/* ═══════════════════════════════════════════════════════════════════════════
   transfer.injected.wtf — Glassmorphism + Dock UI
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow: hidden; height: 100%; }

/* ── Kill ALL browser-default chrome ─────────────────────────────────────── */
::-webkit-scrollbar       { display: none; }
::-webkit-scrollbar-track { display: none; }
::-webkit-scrollbar-thumb { display: none; }
* { scrollbar-width: none; -ms-overflow-style: none; }

::selection { background: rgba(129,129,231,0.48); color: #fff; }

input, button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  font-family: inherit;
}
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; display: none; }
:focus-visible { outline: 2px solid rgba(255,255,255,0.50); outline-offset: 3px; }
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --bg-a: #0a0218; --bg-b: #0f0520; --bg-c: #1e0d38;
  --bg-d: #2d1b4e; --bg-e: #5D43B2; --bg-f: #8181E7;

  --glass:     rgba(255,255,255,0.09);
  --glass-hi:  rgba(255,255,255,0.13);
  --glass-hov: rgba(255,255,255,0.16);
  --border:    rgba(255,255,255,0.16);
  --border-hi: rgba(255,255,255,0.36);
  --inner-glow:rgba(255,255,255,0.13);

  --btn-bg:   #ffffff;
  --btn-text: #1e0d38;

  --green: #22c55e; --green-dim: rgba(34,197,94,0.13); --green-border: rgba(34,197,94,0.30);
  --red:   #ef4444; --red-dim:   rgba(239,68,68,0.12); --red-border:   rgba(239,68,68,0.28);

  --text:    #ffffff;
  --muted:   rgba(255,255,255,0.58);
  --muted-d: rgba(255,255,255,0.34);
  --code-bg: rgba(0,0,0,0.38);
  --code-text: rgba(180,210,255,0.92);

  --r: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;
  --dock-bg: rgba(14,5,34,0.70);
}

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

/* ── Body + Aurora ───────────────────────────────────────────────────────── */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text);
  line-height: 1.5;
  height: 100%;
  overflow: hidden;
  background:
    linear-gradient(160deg,
      var(--bg-a)  0%, var(--bg-c) 20%,
      var(--bg-d) 42%, var(--bg-e) 72%,
      var(--bg-f) 100%);
  background-size: 280% 280%;
  background-attachment: fixed;
  animation: aurora 28s ease infinite, pageReveal 0.4s ease both;
}
/* Pages that need scroll (docs, download) opt-in */
body.page-scroll { overflow: auto; overflow-x: hidden; height: auto; min-height: 100%; }
body.page-scroll ~ html, html:has(body.page-scroll) { overflow: auto; height: auto; }

/* ── Background scene ────────────────────────────────────────────────────── */
.bg-scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-scene svg { width: 100%; height: 100%; display: block; }
body > *:not(.bg-scene) { position: relative; z-index: 1; }

/* ── Page transitions ────────────────────────────────────────────────────── */
/* Page reveal (prevents flash on load — paired with inline body{opacity:0}) */
@keyframes pageReveal { from { opacity: 0; } to { opacity: 1; } }
/* Fallback exit for browsers without view-transition */
body.page-exit { animation: pageFadeOut 0.18s ease both; pointer-events: none; }
/* ═══════════════════════════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes aurora {
  0%   { background-position: 0% 0%;     }
  25%  { background-position: 100% 50%;  }
  50%  { background-position: 50% 100%;  }
  75%  { background-position: 0% 50%;    }
  100% { background-position: 0% 0%;     }
}
@keyframes twinkle {
  0%, 100% { opacity: 1;    }
  45%      { opacity: 0.06; }
  55%      { opacity: 0.06; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes dockIn {
  from { opacity: 0; transform: translateY(-28px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)     scale(1);    }
}
@keyframes shimmerPass {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%);  }
}
@keyframes progressShine {
  0%   { left: -70%;  }
  100% { left: 130%;  }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1);   opacity: 1;    }
  50%      { transform: scale(1.6); opacity: 0.50; }
}
@keyframes stepBump {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1);    }
}
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0    rgba(255,255,255,0.30); }
  70%  { box-shadow: 0 0 0 12px rgba(255,255,255,0);    }
  100% { box-shadow: 0 0 0 0    rgba(255,255,255,0);    }
}
@keyframes float {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-6px); }
}
@keyframes staggerIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes pageContentIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.star { animation: twinkle linear infinite; }

/* ═══════════════════════════════════════════════════════════════════════════
   DOCK NAV  (macOS-style floating pill)
   ══════════════════════════════════════════════════════════════════════════ */
.dock {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.dock-inner {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 7px;
  background: var(--glass);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--border-hi);
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.18),
    0 12px 48px rgba(0,0,0,0.45),
    0 3px 12px rgba(0,0,0,0.30),
    inset 0 1px 0 var(--inner-glow);
  white-space: nowrap;
  pointer-events: auto;
  animation: dockIn 0.70s cubic-bezier(0.16,1,0.3,1) 0.05s both;
}
.dock-brand {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: 14px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: -0.025em;
  color: rgba(255,255,255,0.88); text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.dock-brand:hover { color: #fff; background: rgba(255,255,255,0.07); }
.dock-brand-logo {
  width: 18px; height: 18px; border-radius: 5px;
  background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dock-brand-dim { color: rgba(255,255,255,0.38); }
.dock-sep {
  width: 1px; height: 20px;
  background: rgba(255,255,255,0.12); margin: 0 3px; border-radius: 1px;
}
.dock-items { display: flex; align-items: center; gap: 1px; }
.dock-item {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 13px;
  font-size: 0.82rem; font-weight: 600;
  color: rgba(255,255,255,0.58); text-decoration: none;
  letter-spacing: 0.005em;
  transform: scale(var(--dock-s,1)) translateY(var(--dock-y,0px));
  transform-origin: center bottom;
  transition:
    transform  0.28s cubic-bezier(0.34,1.56,0.64,1),
    color      0.15s, background 0.15s;
}
.dock-item:hover { color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.09); }
.dock-item.active { color: #fff; background: rgba(255,255,255,0.11); }
.dock-icon { display: flex; align-items: center; justify-content: center; opacity: 0.72; transition: opacity 0.15s; }
.dock-item:hover .dock-icon,
.dock-item.active .dock-icon { opacity: 1; }

/* Tooltip */
.dock-tooltip {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: rgba(10,2,24,0.92); color: rgba(255,255,255,0.88);
  padding: 5px 12px; border-radius: 8px;
  font-size: 0.71rem; font-weight: 600;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateX(-50%) translateY(4px);
  transition: opacity 0.18s, transform 0.18s cubic-bezier(0.16,1,0.3,1);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 6px 20px rgba(0,0,0,0.55);
  z-index: 600;
}
.dock-item:hover .dock-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO  (index page)
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
  display: flex; align-items: center; justify-content: center;
  gap: 56px; height: 100dvh; height: 100vh; flex-direction: column;
  max-width: 1140px; margin: 0 auto; padding: 60px 32px 32px;
  overflow: hidden;
}
.hero-copy {
  flex: 1; min-width: 260px;
  animation: fadeUp 0.6s 0.18s cubic-bezier(0.16,1,0.3,1) both;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--r-pill); padding: 5px 14px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: rgba(255,255,255,0.80);
  margin-bottom: 26px; backdrop-filter: blur(8px);
}
.hero-badge-dot {
  width: 6px; height: 6px; background: #a5f3a0;
  border-radius: 50%; animation: dotPulse 2.2s ease-in-out infinite;
}
.hero-h1 {
  font-size: clamp(2.4rem,4.8vw,3.7rem); font-weight: 800;
  letter-spacing: -0.048em; line-height: 1.04; margin-bottom: 22px;
}
.hero-h1 .dim { color: rgba(255,255,255,0.34); }
.hero-sub {
  font-size: 0.97rem; color: var(--muted);
  line-height: 1.74; max-width: 390px; margin-bottom: 30px;
}
.code-block {
  background: var(--code-bg); border: 1px solid rgba(255,255,255,0.12);
  color: var(--code-text); border-radius: var(--r);
  padding: 15px 20px;
  font-family: 'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;
  font-size: 0.79rem; overflow-x: auto; white-space: pre;
  line-height: 1.68; letter-spacing: 0.015em;
  backdrop-filter: blur(6px); position: relative; overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLASS CARD  (upload + download)
   ══════════════════════════════════════════════════════════════════════════ */
.hero-card, .dl-card {
  flex-shrink: 0;
  background: var(--glass);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-xl);
  padding: 30px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.18),
    0 12px 48px rgba(0,0,0,0.45),
    0 3px 12px rgba(0,0,0,0.30),
    inset 0 1px 0 var(--inner-glow);
  animation: cardIn 0.7s 0.32s cubic-bezier(0.16,1,0.3,1) both;
  transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.hero-card:hover, .dl-card:hover {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.20),
    0 20px 68px rgba(0,0,0,0.50),
    0 4px 16px rgba(0,0,0,0.35),
    inset 0 1px 0 var(--inner-glow);
  transform: translateY(-3px);
}
.hero-card { width: 436px; }
.dl-card   { width: 418px; }

.card-state { display: none; }
.card-state.active {
  display: block;
  animation: fadeUp 0.30s cubic-bezier(0.16,1,0.3,1) both;
}
.card-label {
  font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 18px;
}

/* ── Drop Zone ───────────────────────────────────────────────────────────── */
#drop-zone {
  background: rgba(255,255,255,0.04);
  border: 2px dashed rgba(255,255,255,0.24);
  border-radius: var(--r-lg); padding: 34px 20px;
  text-align: center; cursor: pointer; outline: none;
  transition: border-color 0.22s, background 0.22s, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
#drop-zone:hover, #drop-zone:focus-visible {
  border-color: rgba(255,255,255,0.58);
  background: rgba(255,255,255,0.08);
  transform: scale(1.01);
}
#drop-zone.drag-over {
  border-color: rgba(255,255,255,0.80);
  background: rgba(255,255,255,0.12);
  transform: scale(1.02);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.08);
}
#drop-zone.has-file {
  border-style: solid; border-color: rgba(255,255,255,0.50);
  background: rgba(255,255,255,0.07); padding: 18px 20px;
}
.drop-icon {
  margin-bottom: 12px; opacity: 0.55;
  transition: opacity 0.2s, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
#drop-zone:hover .drop-icon { opacity: 0.80; transform: translateY(-4px); }
.drop-title { font-size: 0.92rem; font-weight: 600; margin-bottom: 5px; }
.drop-sub { font-size: 0.78rem; color: var(--muted); line-height: 1.6; }

/* Chosen file */
.file-chosen { display: flex; align-items: center; gap: 10px; text-align: left; }
.file-chosen-name {
  font-size: 0.875rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px;
}
.file-chosen-size { font-size: 0.75rem; color: var(--muted); }
.file-chosen-clear {
  margin-left: auto; background: none; border: none;
  color: var(--muted); cursor: pointer; padding: 5px; border-radius: 7px;
  display: flex; align-items: center; flex-shrink: 0;
  transition: color 0.15s, background 0.15s, transform 0.15s;
}
.file-chosen-clear:hover { color: #f87171; background: var(--red-dim); transform: scale(1.12); }

/* ── Custom stepper (replaces native number input) ───────────────────────── */
.expiry-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.expiry-label { font-size: 0.82rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.stepper {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: var(--r-pill); overflow: hidden;
  transition: border-color 0.15s;
}
.stepper:focus-within { border-color: rgba(255,255,255,0.50); }
.stepper-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; background: transparent; border: none;
  color: rgba(255,255,255,0.58); cursor: pointer; flex-shrink: 0;
  user-select: none; -webkit-user-select: none;
  transition: color 0.14s, background 0.14s, transform 0.1s;
}
.stepper-btn:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,0.10); }
.stepper-btn:active:not(:disabled) { background: rgba(255,255,255,0.16); transform: scale(0.90); }
.stepper-btn:disabled { opacity: 0.26; cursor: not-allowed; }
.stepper-display {
  display: flex; align-items: baseline; gap: 4px;
  padding: 0 4px; min-width: 72px; justify-content: center;
}
.stepper-val {
  font-size: 0.9rem; font-weight: 700; min-width: 22px; text-align: center;
  transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}
.stepper-val.bump { animation: stepBump 0.22s cubic-bezier(0.34,1.56,0.64,1); }
.stepper-unit { font-size: 0.74rem; color: rgba(255,255,255,0.46); }

/* Hidden real input — still submitted with forms / read by JS */
.expiry-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-family: inherit; font-weight: 700; font-size: 0.92rem;
  border: none; border-radius: var(--r-pill); cursor: pointer;
  text-decoration: none; letter-spacing: 0.012em; white-space: nowrap;
  padding: 0 24px; height: 48px; position: relative; overflow: hidden;
  user-select: none;
  transition: background 0.18s, transform 0.14s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.18s, opacity 0.15s;
}
.btn::after {
  content: ''; position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.17), transparent);
  transform: skewX(-20deg); pointer-events: none;
  transition: left 0.5s ease;
}
.btn:hover::after { left: 150%; }

.btn-green {
  background: var(--btn-bg); color: var(--btn-text);
  height: 50px; font-size: 0.95rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 1px 4px rgba(0,0,0,0.15),
              inset 0 1px 0 rgba(255,255,255,0.80);
}
.btn-green:hover:not(:disabled) {
  background: #f2eeff; transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.80);
}
.btn-green:active:not(:disabled) { transform: translateY(0) scale(0.98); box-shadow: 0 2px 8px rgba(0,0,0,0.20); }
.btn-green:disabled { opacity: 0.28; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost {
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.22);
  color: var(--text); backdrop-filter: blur(8px); height: 44px;
}
.btn-ghost:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.45); transform: translateY(-1px); }
.btn-ghost:active { transform: scale(0.98); }
.btn-full { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESS BAR
   ══════════════════════════════════════════════════════════════════════════ */
.progress-track {
  height: 6px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.10); overflow: hidden; margin-top: 14px;
}
.progress-fill {
  height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, rgba(255,255,255,0.60), #ffffff);
  width: 0%; transition: width 0.32s cubic-bezier(0.4,0,0.2,1);
  position: relative; overflow: hidden;
}
.progress-fill::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 55%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
  animation: progressShine 1.5s ease-in-out infinite; left: -70%;
}
.progress-pct {
  font-size: 0.70rem; color: var(--muted); margin-top: 6px;
  text-align: right; font-variant-numeric: tabular-nums;
}

/* File preview row */
.file-preview-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r); padding: 10px 14px; margin-bottom: 20px;
}
.file-preview-name { font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-preview-size { font-size: 0.75rem; color: var(--muted); }

/* Phase dots */
.phase-step { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.phase-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.16); transition: background 0.3s, transform 0.3s;
}
.phase-label { font-size: 0.82rem; color: var(--muted); transition: color 0.25s; }
.phase-dot.active { background: #fff; animation: dotPulse 1.1s ease-in-out infinite; }
.phase-dot.done { background: var(--green); animation: none; }
.phase-label.active { color: var(--text); font-weight: 600; }
.phase-label.done { color: var(--green); }

/* ═══════════════════════════════════════════════════════════════════════════
   RESULT / URL
   ══════════════════════════════════════════════════════════════════════════ */
.url-box {
  font-family: 'SF Mono','Fira Code','Cascadia Code',monospace;
  font-size: 0.77rem; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.24); border-radius: var(--r);
  padding: 12px 14px; word-break: break-all;
  color: rgba(255,255,255,0.92); font-weight: 500; line-height: 1.58;
  user-select: all; transition: background 0.15s, border-color 0.15s;
}
.url-box:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.38); }
.success-icon-wrap {
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.26);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: var(--r-pill);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.badge-green  { background: rgba(255,255,255,0.09); color: #a5f3a0; border: 1px solid rgba(165,243,160,0.28); }
.badge-e2ee   { background: rgba(255,255,255,0.07); color: #86efac; border: 1px solid rgba(134,239,172,0.22); }
.badge-server { background: rgba(255,255,255,0.07); color: #c4b5fd; border: 1px solid rgba(196,181,253,0.22); }
.badge-red    { background: var(--red-dim); color: #f87171; border: 1px solid var(--red-border); }

/* ═══════════════════════════════════════════════════════════════════════════
   FILE INFO (download page)
   ══════════════════════════════════════════════════════════════════════════ */
.file-info-box {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 20px;
}
.info-row {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.84rem; color: var(--muted);
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.info-row:last-child { border-bottom: none; padding-bottom: 0; }
.info-row:first-child { padding-top: 0; }
.info-val { font-weight: 600; color: var(--text); word-break: break-all; }
.info-row svg { flex-shrink: 0; opacity: 0.50; }
.curl-hint {
  font-family: 'SF Mono','Fira Code','Cascadia Code',monospace;
  font-size: 0.71rem; color: var(--muted-d); text-align: center;
  margin-top: 10px; line-height: 1.5; word-break: break-all;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ERROR / SUCCESS / NOTFOUND
   ══════════════════════════════════════════════════════════════════════════ */
.error-box {
  background: var(--red-dim); border: 1px solid var(--red-border);
  border-radius: var(--r); padding: 14px; display: flex; gap: 10px;
  align-items: flex-start; margin-bottom: 14px;
}
.error-box-title { font-weight: 700; color: #f87171; font-size: 0.875rem; }
.error-box-msg { font-size: 0.82rem; color: var(--muted); margin-top: 3px; }
.success-circle {
  width: 50px; height: 50px;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.26);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; animation: pulseRing 1.8s ease-out;
}
.notfound-circle {
  width: 50px; height: 50px;
  background: var(--red-dim); border: 1px solid var(--red-border);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPINNER
   ══════════════════════════════════════════════════════════════════════════ */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,0.12);
  border-top-color: rgba(255,255,255,0.82);
  border-radius: 50%; animation: spin 0.65s linear infinite; flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOW-IT-WORKS  (index page bottom cards)
   ══════════════════════════════════════════════════════════════════════════ */
.how-section {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 90px 32px;
}
.how-inner { max-width: 1140px; margin: 0 auto; }
.how-eyebrow {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.how-title {
  font-size: 1.9rem; font-weight: 800; letter-spacing: -0.04em;
  margin-bottom: 48px;
}
.how-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(270px,1fr)); gap: 18px; }
.how-card {
  background: var(--glass);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-hi); border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25), inset 0 1px 0 var(--inner-glow);
  transition: border-color 0.2s, background 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  /* Staggered fade-in */
  opacity: 0; animation: staggerIn 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
.how-card:nth-child(1) { animation-delay: 0.08s; }
.how-card:nth-child(2) { animation-delay: 0.16s; }
.how-card:nth-child(3) { animation-delay: 0.24s; }
.how-card:hover {
  background: var(--glass-hov); border-color: rgba(255,255,255,0.55);
  transform: translateY(-4px);
}
.how-icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.how-card h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 8px; }
.how-card p { font-size: 0.85rem; color: var(--muted); line-height: 1.68; margin-bottom: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   DOWNLOAD PAGE
   ══════════════════════════════════════════════════════════════════════════ */
.dl-hero {
  display: flex; align-items: center; justify-content: center;
  gap: 56px; height: 100dvh; height: 100vh;
  max-width: 1140px; margin: 0 auto; padding: 60px 32px 32px;
  overflow: hidden; flex-direction: column;
}
.dl-hero.has-preview {
  flex-direction: row;
}
.dl-preview {
  display: none; flex-shrink: 0; max-width: 480px; min-width: 240px;
  animation: fadeUp 0.6s 0.18s cubic-bezier(0.16,1,0.3,1) both;
}
.dl-hero.has-preview .dl-preview { display: block; flex: 1; }
.dl-preview img, .dl-preview video {
  width: 100%; max-height: 65vh; object-fit: contain;
  border-radius: var(--r-xl);
  border: 1px solid var(--border-hi);
  background: var(--glass);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.18),
    0 12px 48px rgba(0,0,0,0.45),
    0 3px 12px rgba(0,0,0,0.30),
    inset 0 1px 0 var(--inner-glow);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOCS PAGE
   ══════════════════════════════════════════════════════════════════════════ */
.docs-layout {
  display: flex; gap: 0; max-width: 1140px; margin: 0 auto;
  padding: 70px 32px 0; height: 100dvh; height: 100vh; overflow: hidden;
}
.docs-sidebar {
  width: 210px; flex-shrink: 0;
  padding: 24px 28px 24px 0;
  overflow-y: auto;
  animation: fadeUp 0.5s 0.10s cubic-bezier(0.16,1,0.3,1) both;
}
.docs-sidebar-title {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-d);
  margin-bottom: 14px; padding-left: 10px;
}
.sidebar-group { margin-bottom: 6px; }
.sidebar-group-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-d);
  padding: 8px 10px 3px; display: block;
}
.sidebar-link {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; font-size: 0.82rem;
  color: rgba(255,255,255,0.50); text-decoration: none;
  border-radius: 8px; position: relative;
  transition: color 0.14s, background 0.14s;
}
.sidebar-link:hover { color: rgba(255,255,255,0.88); background: rgba(255,255,255,0.07); }
.sidebar-link.active { color: #fff; background: rgba(255,255,255,0.10); font-weight: 600; }
.sidebar-link.active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 14px; background: rgba(255,255,255,0.60); border-radius: 2px;
}
.sidebar-link.sub { padding-left: 22px; font-size: 0.79rem; }
.sidebar-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 10px 10px; }

.docs-content {
  flex: 1; min-width: 0;
  padding: 24px 0 32px 32px;
  overflow-y: auto;
  border-left: 1px solid rgba(255,255,255,0.08);
  animation: fadeUp 0.5s 0.22s cubic-bezier(0.16,1,0.3,1) both;
}
.docs-page { display: none; }
.docs-page.active { display: block; animation: pageContentIn 0.30s ease both; }

.docs-hero-block { margin-bottom: 28px; }
.docs-hero-block h1 {
  font-size: clamp(1.9rem,3.5vw,2.8rem); font-weight: 800;
  letter-spacing: -0.045em; line-height: 1.06; margin-bottom: 14px;
}
.docs-hero-block p { font-size: 1.05rem; color: var(--muted); line-height: 1.72; max-width: 580px; }

.docs-h2 {
  font-size: 1.28rem; font-weight: 700; letter-spacing: -0.025em;
  margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
}
.docs-h2::before {
  content: ''; display: block; width: 3px; height: 20px;
  background: rgba(255,255,255,0.40); border-radius: 2px; flex-shrink: 0;
}
.docs-h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 10px; color: rgba(255,255,255,0.85); margin-top: 22px; }
.docs-p {
  font-size: 0.92rem; color: var(--muted); line-height: 1.75;
  margin-bottom: 14px; max-width: 680px;
}
.docs-p + .docs-p { margin-top: -4px; }
.docs-p a {
  color: rgba(200,190,255,0.90); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(200,190,255,0.30);
  transition: color 0.15s, text-decoration-color 0.15s;
}
.docs-p a:hover { color: #fff; text-decoration-color: rgba(255,255,255,0.50); }

.docs-code {
  background: var(--code-bg); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r); padding: 18px 22px;
  font-family: 'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;
  font-size: 0.80rem; color: var(--code-text); overflow-x: auto;
  white-space: pre; line-height: 1.72; margin-bottom: 18px;
  backdrop-filter: blur(6px);
}
.docs-code-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.docs-code-lang { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted-d); }
.docs-inline {
  font-family: 'SF Mono','Fira Code','Cascadia Code',monospace;
  font-size: 0.83em; background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 5px;
  padding: 1px 6px; color: rgba(200,210,255,0.90);
}

.docs-cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 14px; margin-bottom: 24px; }
.docs-card {
  background: var(--glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-hi); border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.28), inset 0 1px 0 var(--inner-glow);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s, border-color 0.20s;
}
.docs-card:hover {
  transform: translateY(-4px); border-color: rgba(255,255,255,0.50);
  box-shadow: 0 10px 32px rgba(0,0,0,0.36), inset 0 1px 0 var(--inner-glow);
}
.docs-card-icon {
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.docs-card h3 { font-size: 0.90rem; font-weight: 700; margin-bottom: 6px; }
.docs-card p { font-size: 0.80rem; color: var(--muted); line-height: 1.60; }

.docs-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 0.84rem; }
.docs-table th {
  text-align: left; padding: 8px 14px; font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-d);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.docs-table td {
  padding: 10px 14px; color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,0.06); vertical-align: top;
}
.docs-table tr:last-child td { border-bottom: none; }
.docs-table td:first-child { color: var(--code-text); font-family: 'SF Mono',monospace; font-size: 0.78rem; }
.docs-table tr:hover td { background: rgba(255,255,255,0.03); }

.docs-callout {
  display: flex; gap: 12px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 18px;
  font-size: 0.84rem; color: var(--muted); line-height: 1.65;
}
.docs-callout-icon { flex-shrink: 0; opacity: 0.70; margin-top: 1px; }

/* ── Copy-to-clipboard button on code blocks ──────────────────────────── */
.docs-code-wrap { position: relative; margin-bottom: 18px; }
.docs-code-wrap .docs-code { margin-bottom: 0; }
.code-copy-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.40); color: rgba(255,255,255,0.35);
  font-size: 0.64rem; font-weight: 600; cursor: pointer;
  opacity: 0; transition: all 0.18s ease;
}
.docs-code-wrap:hover .code-copy-btn { opacity: 1; }
.code-copy-btn:hover { color: rgba(255,255,255,0.70); background: rgba(0,0,0,0.55); border-color: rgba(255,255,255,0.14); }
.code-copy-btn.copied {
  opacity: 1; background: rgba(34,197,94,0.12); color: #22c55e;
  border-color: rgba(34,197,94,0.25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
.footer {
  border-top: 1px solid rgba(255,255,255,0.08); padding: 22px 32px;
}
.footer-inner {
  max-width: 1140px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
.footer-logo {
  font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.75);
  text-decoration: none; transition: color 0.15s;
}
.footer-logo:hover { color: #fff; }
.footer-logo span { color: var(--muted-d); }
.footer-tagline { font-size: 0.74rem; color: var(--muted-d); }

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════════════════════════════ */
.hidden      { display: none !important; }
.sr-only     { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.w-full      { width: 100%; }
.mt-3        { margin-top: 12px; }
.mt-4        { margin-top: 16px; }
.mt-5        { margin-top: 20px; }
.text-center { text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 920px) {
  .hero, .dl-hero {
    flex-direction: column; align-items: stretch;
    padding: 72px 20px 24px; height: auto; min-height: 100dvh; gap: 24px;
  }
  .dl-hero.has-preview { flex-direction: column; height: auto; min-height: 100dvh; }
  .dl-preview { max-width: 100%; }
  .hero-card, .dl-card { width: 100%; }
  .hero-h1 { font-size: 2.2rem; }
  .how-section { padding: 60px 20px; }
  .docs-layout { flex-direction: column; padding: 64px 20px 0; height: auto; min-height: 100dvh; overflow: visible; }
  .docs-sidebar {
    width: 100%; padding: 12px 0; overflow-x: auto; overflow-y: hidden;
    display: flex; flex-wrap: nowrap; gap: 4px; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    margin-bottom: 0; flex-shrink: 0;
  }
  .docs-content { border-left: none; padding-left: 0; }
  .docs-sidebar-title { display: none; }
  .sidebar-group { margin-bottom: 0; flex-shrink: 0; }
  .sidebar-group-label { display: none; }
  .sidebar-link { font-size: 0.78rem; padding: 5px 10px; white-space: nowrap; }
  .sidebar-sep { display: none; }
  .footer { padding: 20px; }
  .dock-inner { max-width: calc(100vw - 24px); }
  .dock-brand span.dock-brand-dim { display: none; }
}
@media (max-width: 520px) {
  .hero-card, .dl-card { padding: 22px; }
  .docs-cards { grid-template-columns: 1fr; }
}