@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --bg: #080d19;
  --panel: #111a2c;
  --panel2: #0c1424;
  --border: #263650;
  --text: #f1f5ff;
  --muted: #9cabc5;
  --blue: #448aff;
  --purple: #805bff;
  --green: #46d9a0;
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% -15%, #243c70 0%, transparent 48%),
    radial-gradient(ellipse at 95% 55%, #19183d 0%, transparent 35%),
    var(--bg);
}

button, input { font: inherit; }
button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

.topbar {
  height: 82px;
  padding: 0 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ffffff12;
  background: #090f1cbb;
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: .02em;
}

.brand-logo { width: 58px; height: 58px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 15px #448aff33); }
.brand-name { display: inline-block; }

.topbar nav {
  display: flex;
  align-items: center;
  gap: 32px;
  color: #b8c5dc;
  font-size: 14px;
  font-weight: 600;
}

.topbar nav a:hover { color: white; }

.nav-cta {
  padding: 11px 19px;
  border-radius: 9px;
  color: white !important;
  background: linear-gradient(110deg,var(--blue),var(--purple));
}

.shell {
  width: min(1080px,calc(100% - 40px));
  margin: auto;
}

.hero {
  text-align: center;
  padding: 95px 10px 56px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #8eafff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .19em;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
}

.hero h1 {
  margin: 25px 0 19px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(42px,7vw,76px);
  line-height: 1.08;
  letter-spacing: -.055em;
  font-weight: 700;
}

.hero h1 span {
  background: linear-gradient(100deg,#85b5ff,#a18aff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.hero-copy {
  max-width: 660px;
  margin: auto;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.8;
}

.hero-points {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 23px;
  margin-top: 26px;
  color: #c8d5ed;
  font-size: 13px;
}

.hero-points span::first-letter { color: var(--green); }

.workspace {
  max-width: 760px;
  margin: 0 auto 100px;
  padding: 9px;
  border: 1px solid #34476b;
  border-radius: 21px;
  background: linear-gradient(145deg,#17243a,#10192a);
  box-shadow: 0 25px 90px #0008,0 0 50px #365fba12;
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 8px;
  background: #080f1d;
  border-radius: 14px;
}

.tab {
  padding: 15px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #91a2bf;
  font-size: 14px;
  font-weight: 700;
}

.tab.active {
  color: white;
  background: linear-gradient(110deg,#326ee9,#7252e9);
  box-shadow: 0 5px 20px #456aff35;
}

.panel { padding: 28px; }

.hidden { display: none !important; }

.dropzone {
  min-height: 270px;
  padding: 35px 20px;
  border: 2px dashed #405982;
  border-radius: 17px;
  background: radial-gradient(ellipse at center,#1a2b4c55,transparent 75%),#0b1425;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: .2s ease;
}

.dropzone:hover, .dropzone.dragover {
  border-color: #6699ff;
  background-color: #172846;
  box-shadow: inset 0 0 40px #448aff13;
}

.upload-icon, .receive-icon {
  width: 58px;
  height: 58px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,#2869d9,#7955ed);
  color: white;
  font-size: 30px;
  box-shadow: 0 8px 30px #448aff40;
}

.dropzone h2, .panel h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 23px;
  margin: 19px 0 5px;
}

.dropzone p { color: var(--muted); }

.text-button {
  border: 0;
  background: transparent;
  color: #86adff;
  text-decoration: underline;
  font-weight: 700;
}

.file-limit {
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 30px;
  background: #172b43;
  color: #9ebaff;
  font-size: 12px;
  font-weight: 700;
}

.selected-file {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px;
  margin-top: 17px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #0b1425;
}

.file-symbol { font-size: 26px; color: #8eb3ff; }
.file-meta { flex: 1; min-width: 0; }
.file-meta strong { display: block; overflow-wrap: anywhere; }
.file-meta small { color: var(--muted); }

.remove-file {
  border: 0;
  background: #273750;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 20px;
}

.primary-button {
  border: 0;
  border-radius: 10px;
  padding: 15px 23px;
  color: white;
  font-weight: 800;
  background: linear-gradient(110deg,#397cff,#8056f2);
  box-shadow: 0 7px 22px #456aff35;
  transition: .2s ease;
}

.primary-button:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.13);
}

.primary-button:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

.full { width: 100%; margin-top: 19px; }

.progress-wrap {
  margin-top: 22px;
  padding: 17px;
  background: #0b1425;
  border-radius: 12px;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 11px;
}

.progress-track {
  height: 9px;
  border-radius: 20px;
  overflow: hidden;
  background: #263650;
}

#progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,var(--blue),var(--purple));
  transition: width .2s;
}

.result {
  margin-top: 20px;
  padding: 22px;
  border: 1px solid #386d68;
  border-radius: 13px;
  background: #102c2a;
  overflow-wrap: anywhere;
}

.result .code {
  display: block;
  margin: 15px 0;
  color: #9dffda;
  font-family: monospace;
  font-size: clamp(20px,4vw,30px);
  letter-spacing: .09em;
  text-align: center;
}

.premium-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 27px;
  padding: 20px;
  border: 1px solid #554b88;
  border-radius: 13px;
  background: linear-gradient(110deg,#24224a,#18233e);
}

.premium-strip strong, .premium-strip span {
  display: block;
}

.premium-strip strong { font-size: 14px; }
.premium-strip span { margin-top: 5px; color: #abb9d4; font-size: 12px; }

.outline-button {
  display: inline-block;
  padding: 12px 17px;
  border: 1px solid #7186c0;
  border-radius: 9px;
  background: #27375b;
  color: white;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.outline-button:hover { background: #354b79; }

.receive-icon { margin: 5px auto 20px; }
#receive-panel { text-align: center; }

.muted { color: var(--muted); }

.code-input {
  width: 100%;
  margin-top: 18px;
  padding: 19px 14px;
  border: 1px solid #435a80;
  border-radius: 11px;
  background: #080f1d;
  color: white;
  text-align: center;
  font-family: monospace;
  font-size: 22px;
  letter-spacing: .12em;
  text-transform: uppercase;
  outline: none;
}

.code-input:focus { border-color: #7ba7ff; box-shadow: 0 0 0 3px #448aff20; }

.how { padding: 20px 0 90px; }

.section-heading { text-align: center; }
.section-heading h2, .extension-promo h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 32px;
  letter-spacing: -.035em;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 17px;
  margin-top: 35px;
}

.steps article {
  padding: 25px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #111a2caa;
}

.step-no { color: #82aaff; font-weight: 800; font-size: 13px; }
.steps h3 { font-family: 'Space Grotesk',sans-serif; }
.steps p, .extension-promo p { color: var(--muted); font-size: 13px; line-height: 1.8; }

.extension-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 65px;
  padding: 35px;
  border: 1px solid #394d77;
  border-radius: 18px;
  background: linear-gradient(110deg,#17294b,#211c42);
}

.extension-promo h2 { margin: 12px 0; }
.extension-promo p { max-width: 490px; margin-bottom: 0; }

.footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 27px 6%;
  border-top: 1px solid #ffffff12;
  color: #71819c;
  font-size: 11px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media(max-width:700px) {
  .topbar { height: auto; min-height: 72px; padding: 14px 18px; }
  .topbar nav { gap: 12px; font-size: 11px; }
  .topbar nav a:nth-child(2) { display: none; }
  .brand { font-size: 12px; gap: 8px; }
  .brand-logo { width: 44px; height: 44px; }
  .hero { padding: 65px 5px 40px; }
  .hero h1 { font-size: clamp(38px,10vw,57px); }
  .hero-copy { font-size: 14px; }
  .hero-points { gap: 10px 17px; font-size: 11px; }
  .workspace { width: calc(100% - 22px); }
  .panel { padding: 17px 12px; }
  .dropzone { min-height: 240px; }
  .premium-strip { align-items: flex-start; flex-direction: column; }
  .steps { grid-template-columns: 1fr; }
  .extension-promo { padding: 24px; flex-direction: column; align-items: flex-start; }
  .footer { flex-direction: column; }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; }
}


/* SSFS branded single-use download pages */
.download-body { min-height:100vh; display:flex; flex-direction:column; }
.download-topbar { height:76px; padding:0 max(22px,calc((100% - 1080px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #ffffff12; background:#090f1cbb; }
.download-brand { display:flex; align-items:center; gap:12px; font-family:'Space Grotesk',sans-serif; font-weight:700; }
.download-brand-logo { width:54px;height:54px;object-fit:contain;flex:none;filter:drop-shadow(0 4px 15px #448aff33); }
.download-top-note { color:#7185a8;font-size:10px;font-weight:800;letter-spacing:.16em; }
.download-shell { width:min(680px,calc(100% - 34px)); margin:64px auto 55px; flex:1; }
.download-card { padding:clamp(25px,5vw,48px); border:1px solid #34476b; border-radius:22px; background:linear-gradient(145deg,#17243a,#10192a); box-shadow:0 25px 90px #0008,0 0 50px #365fba12; text-align:center; }
.download-symbol { width:62px;height:62px;margin:0 auto 20px;border-radius:19px;display:grid;place-items:center;background:linear-gradient(135deg,#2869d9,#7955ed);color:#fff;font-size:31px;box-shadow:0 8px 30px #448aff40; }
.download-card h1 { margin:13px 0 10px;font:700 clamp(27px,5vw,37px)/1.15 'Space Grotesk',sans-serif;letter-spacing:-.04em; }
.download-intro,.download-card>p { max-width:490px;margin:0 auto;color:var(--muted);font-size:14px;line-height:1.8; }
.download-file { display:flex;align-items:center;gap:14px;text-align:left;margin:28px 0 18px;padding:17px;border:1px solid #304361;border-radius:14px;background:#0b1425; }
.download-file-icon { width:43px;height:43px;flex:none;display:grid;place-items:center;border-radius:12px;background:#1a3154;color:#8db7ff;font-size:23px; }
.download-file-meta { flex:1;min-width:0; }
.download-file-meta strong { display:block;overflow-wrap:anywhere;color:#f4f7ff;font-size:14px; }
.download-file-meta span { display:block;margin-top:5px;color:#8fa1c0;font-size:12px; }
.ready-pill { padding:5px 8px;border:1px solid #27634f;border-radius:20px;background:#12362d;color:#80e2b8;font-size:9px;font-weight:800;letter-spacing:.08em; }
.download-action { display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:16px 20px;border-radius:11px;background:linear-gradient(110deg,#397cff,#8056f2);box-shadow:0 7px 22px #456aff35;color:#fff;font-weight:800; }
.download-action span { font-size:20px; }
.single-use-note { display:flex;align-items:flex-start;gap:11px;text-align:left;margin-top:20px;padding:15px;border:1px solid #285344;border-radius:12px;background:#102c2a; }
.single-use-note>span { color:#7ee1b5;font-size:18px; }
.single-use-note strong,.single-use-note small { display:block; }
.single-use-note strong { color:#d8fff0;font-size:12px; }
.single-use-note small { margin-top:4px;color:#9dc5b7;font-size:11px;line-height:1.6; }
.download-promo { margin-top:18px;padding:25px;border:1px solid #394d77;border-radius:17px;background:linear-gradient(110deg,#17294b,#211c42);text-align:center; }
.download-promo h2 { margin:10px 0;font:700 23px 'Space Grotesk',sans-serif; }
.download-promo p { max-width:510px;margin:0 auto 17px;color:#abb9d4;font-size:12px;line-height:1.7; }
.promo-action,.download-action.secondary-action { display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border:1px solid #7186c0;border-radius:9px;background:#27375b;color:white;font-size:12px;font-weight:700; }
.download-card.unavailable { padding:48px 28px; }
.download-card.unavailable .download-symbol { background:linear-gradient(135deg,#80556b,#59304c); }
.download-card.unavailable .secondary-action { margin-top:22px; }
.download-footer { padding:24px 15px;border-top:1px solid #ffffff12;text-align:center;color:#71819c;font-size:10px; }
@media(max-width:600px){.download-topbar{height:66px;padding:0 17px}.download-top-note{font-size:8px;letter-spacing:.08em}.download-shell{margin:30px auto}.download-file{gap:10px;padding:13px}.ready-pill{display:none}}

/* Admin control centre */
.admin-header { margin:28px 0 22px; }
.admin-header h1 { margin:8px 0;font:700 34px 'Space Grotesk',sans-serif; }
.admin-header p,.admin-card p,.admin-storage { color:var(--muted);font-size:13px;line-height:1.6; }
.admin-form { display:grid;gap:17px; }
.admin-card { padding:24px;border:1px solid #34476b;border-radius:16px;background:linear-gradient(145deg,#17243a,#10192a); }
.admin-card h2 { margin:0 0 7px;font:700 21px 'Space Grotesk',sans-serif; }
.admin-field { display:grid;gap:7px;margin-top:16px;color:#dce6fa;font-size:12px;font-weight:700; }
.admin-field input,.admin-field textarea,.admin-field select { width:100%;padding:12px 13px;border:1px solid #3b5276;border-radius:9px;background:#080f1d;color:#f1f5ff;outline:none; }
.admin-field textarea { min-height:76px;resize:vertical; }
.admin-field input:focus,.admin-field textarea:focus,.admin-field select:focus { border-color:#7ba7ff;box-shadow:0 0 0 3px #448aff20; }
.admin-check { display:flex;align-items:center;gap:10px;margin-top:17px;color:#cbd8ef;font-size:13px; }
.admin-check input { width:17px;height:17px;accent-color:#6c83ff; }
.admin-save { width:100%; }
.admin-storage { overflow-wrap:anywhere; }
.admin-storage code { color:#c4d5f5; }

.admin-body .download-shell{width:min(820px,calc(100% - 34px));margin-top:38px}

.admin-save{display:block;padding:15px 23px;border:0;border-radius:10px;color:#fff;font-weight:800;background:linear-gradient(110deg,#397cff,#8056f2);box-shadow:0 7px 22px #456aff35;cursor:pointer}
.admin-save:hover{filter:brightness(1.1)}

/* Premium checkout, activation and policy presentation */
.premium-actions{display:flex;flex-direction:column;gap:12px;min-width:min(100%,330px)}
.web-unlock{display:grid;gap:6px;text-align:left;font-size:12px;color:#aebbd0}
.web-unlock>div{display:flex;gap:6px}
.web-unlock input{min-width:0;flex:1;background:#0b1425;border:1px solid #34435c;border-radius:8px;padding:10px;color:#fff}
.web-unlock button{border:0;border-radius:8px;padding:9px 13px;background:#263b5e;color:#fff;font-weight:700;cursor:pointer}
.web-unlock small{min-height:15px;color:#9fc4ff}
.policy-card{text-align:left;line-height:1.65}
.policy-card h2{margin-top:25px;font-size:20px;color:#eaf2ff}
.policy-card li{margin:8px 0}
.policy-card code{overflow-wrap:anywhere}
.download-footer a,.footer a{color:#9fc4ff}


/* Mobile premium panel overflow fix */
.premium-strip,
.premium-actions,
.web-unlock,
.web-unlock > div {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.premium-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
#upgrade-button {
  width: 100%;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  box-sizing: border-box;
  text-align: center;
}
.web-unlock > div {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.web-unlock input {
  flex: 1 1 0;
  width: 1%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
#web-unlock-button {
  flex: 0 0 auto;
  max-width: 42%;
  white-space: normal;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
@media (max-width: 700px) {
  .premium-strip {
    width: 100%;
    padding: 18px 16px;
    gap: 16px;
    box-sizing: border-box;
  }
  .premium-actions {
    width: 100%;
  }
  #upgrade-button {
    display: block;
    min-height: 54px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.35;
  }
  .web-unlock {
    width: 100%;
  }
  .web-unlock > div {
    width: 100%;
  }
  .web-unlock input {
    font-size: 14px;
  }
  #web-unlock-button {
    padding: 11px 12px;
    font-size: 13px;
  }
}

/* SSFS finishing touches */
.share-qr{display:flex;flex-direction:column;align-items:center;gap:6px;margin:18px auto 8px;padding:14px;background:#fff;border-radius:14px;width:max-content;max-width:100%;color:#333}.share-qr canvas{width:220px;height:220px;max-width:100%;image-rendering:pixelated}.share-qr p{margin:0;font-size:12px;color:#555}.upload-history{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}.history-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.history-heading h3{margin:0}.history-item{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}.history-info{min-width:0;display:flex;flex:1;flex-direction:column;gap:5px}.history-info strong{overflow-wrap:anywhere}.history-info small,.history-empty{color:var(--muted,#9aa4b7);font-size:12px}.history-badge{width:max-content;max-width:100%;padding:4px 8px;border-radius:20px;background:rgba(255,255,255,.08);font-size:11px}.history-badge.downloaded{background:rgba(28,190,125,.16);color:#67e3ae}.history-badge.ready{background:rgba(60,140,255,.16);color:#8dbaff}.history-badge.unavailable{background:rgba(255,170,70,.14);color:#ffc078}.history-delete{flex:0 0 32px;width:32px;height:32px;border:0;border-radius:8px;background:rgba(255,255,255,.08);color:inherit;font-size:22px;cursor:pointer}.admin-code-form{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.generated-code{padding:16px;background:#101827;border-radius:10px;font:700 18px/1.5 monospace;overflow-wrap:anywhere}