/* SagaCycles Platform — shared design system (tokens + components).
   Warm "paper" brand. Link this once per page: <link rel="stylesheet" href="/style.css">
   then use the semantic classes below. Keeps every page consistent. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.31.0/dist/tabler-icons.min.css');

:root {
  /* — color: warm paper brand — */
  --paper:#faf8f3; --surface:#ffffff; --soft:#f7f5f0; --sunk:#f4f1ea;
  --ink:#1a1a1a; --ink-2:#54514a; --muted:#6b6b6b; --faint:#9a958b;
  --line:#e6e1d7; --line-2:#eceae3;
  --accent:#2d5762; --accent-dark:#22434c; --accent-soft:#e4f0f0;
  --gold:#b8881a; --gold-soft:#fdf6e3;
  --green:#2f7a3d; --green-soft:#eef5ee;
  --danger:#c52828; --danger-soft:#fbeaea;

  /* — type — */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,'Noto Sans TC',sans-serif;
  --font-display:'Fraunces',Georgia,serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px;
  --fs-16:16px; --fs-18:18px; --fs-21:21px; --fs-24:24px; --fs-32:32px; --fs-40:40px; --fs-46:46px;

  /* — space — */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* — radius + elevation — */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;
  --sh-1:0 1px 3px rgba(26,26,26,.05);
  --sh-2:0 4px 16px rgba(26,26,26,.05);
  --sh-pop:0 8px 28px rgba(26,26,26,.12);
  --focus:0 0 0 3px rgba(45,87,98,.25);
}

* { box-sizing:border-box; margin:0; padding:0; }
body {
  background:var(--paper); color:var(--ink);
  font:400 var(--fs-16)/1.6 var(--font-sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.ti { line-height:1; vertical-align:-.125em; }

/* — headings — */
h1 { font-family:var(--font-display); font-weight:600; letter-spacing:-.015em; line-height:1.1; color:var(--ink); }
h2, h3 { font-weight:600; color:var(--ink); letter-spacing:-.005em; }

/* — buttons — */
.btn {
  display:inline-flex; align-items:center; gap:var(--s-2);
  font:inherit; font-weight:600; font-size:var(--fs-15);
  padding:11px 20px; border-radius:var(--r-md); border:1px solid transparent;
  cursor:pointer; transition:background .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration:none; }
.btn:focus-visible { outline:none; box-shadow:var(--focus); }
.btn:active { transform:translateY(.5px); }
.btn--primary { background:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(31,94,105,.3); }
.btn--primary:hover { background:var(--accent-dark); }
.btn--ghost { background:var(--surface); border-color:var(--line); color:var(--ink); }
.btn--ghost:hover { border-color:var(--accent); color:var(--accent); }
.btn--sm { font-size:var(--fs-13); padding:7px 13px; border-radius:var(--r-sm); }
.btn--block { width:100%; justify-content:center; }
.btn:disabled, .btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; transform:none; }

/* — surfaces — */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); }
.card--raised { box-shadow:var(--sh-2); }

/* — form fields — */
.field, input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="password"], textarea, select {
  width:100%; font:inherit; font-size:var(--fs-15);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:10px 13px; color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s;
}
.field:focus, input:focus, textarea:focus, select:focus { border-color:var(--accent); box-shadow:var(--focus); }
::placeholder { color:var(--faint); }

/* — badges / pills — */
.badge { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-11); font-weight:500; border-radius:var(--r-sm); padding:3px 9px; background:var(--sunk); color:var(--muted); }
.badge--accent { background:var(--accent-soft); color:var(--accent-dark); }
.badge--paid { background:var(--gold-soft); color:var(--gold); }
.badge--good { background:var(--green-soft); color:var(--green); }
.badge--danger { background:var(--danger-soft); color:var(--danger); }

/* — text helpers — */
.muted { color:var(--muted); } .faint { color:var(--faint); }
.mono { font-family:var(--font-mono); }
.eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-12); font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--gold); }

/* — shared console nav (app / sell / packs / earnings / account) — */
.chead { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:var(--s-2); padding:11px 24px; border-bottom:1px solid var(--line-2); background:var(--surface); flex-wrap:wrap; font-size:15px; line-height:1.6; }
.chead .cbrand { display:flex; align-items:center; gap:8px; font-weight:600; color:var(--ink); text-decoration:none; margin-right:10px; white-space:nowrap; }
.chead .cbrand .mark { width:22px; height:22px; border-radius:6px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; }
.chead .cbrand:hover { text-decoration:none; }
.chead .cnav { display:flex; gap:2px; flex-wrap:wrap; }
.chead .cnav a { color:var(--muted); text-decoration:none; font-size:var(--fs-14); padding:6px 12px; border-radius:var(--r-md); white-space:nowrap; transition:.15s; }
.chead .cnav a:hover { color:var(--ink); background:var(--sunk); text-decoration:none; }
.chead .cnav a.active { color:var(--accent); background:var(--accent-soft); }
.chead .spacer { flex:1; }
.chead .cacct { color:var(--muted); text-decoration:none; font-size:var(--fs-14); white-space:nowrap; }
.copybtn { display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:12.5px; font-weight:600; padding:5px 10px; border-radius:7px; border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer; white-space:nowrap; }
.copybtn:hover { color:var(--accent); border-color:var(--accent); }
.acctdrop a.cur { color:var(--accent); font-weight:700; background:var(--accent-soft); pointer-events:none; }
.chead .cacct:hover { color:var(--accent); }

/* — avatar — */
.avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent-dark); font-weight:600; }

@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }

/* ── brand personality: compass motif · teal band · marker highlight ────────── */
:root { --gold-mark:#f4e3ad; }

/* gold marker highlight for a key phrase in a display heading */
.mark-hi { background:linear-gradient(transparent 58%, var(--gold-mark) 58%, var(--gold-mark) 94%, transparent 94%); padding:0 .06em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

/* eyebrow gets a short leading rule */
.eyebrow::before { content:""; width:22px; height:1.5px; background:var(--gold); display:inline-block; flex:0 0 auto; }

/* faint compass watermark, top-right of a position:relative hero */
.compass-corner { position:absolute; top:-60px; right:-120px; width:380px; height:380px; opacity:.07; pointer-events:none; z-index:0; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%232d5762%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%22184%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%22138%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%2264%22%2F%3E%3Cline%20x1%3D%22342%22%20y1%3D%22200%22%20x2%3D%2258%22%20y2%3D%22200%22%2F%3E%3Cline%20x1%3D%22300.4%22%20y1%3D%22300.4%22%20x2%3D%2299.6%22%20y2%3D%2299.6%22%2F%3E%3Cline%20x1%3D%22200%22%20y1%3D%22342%22%20x2%3D%22200%22%20y2%3D%2258%22%2F%3E%3Cline%20x1%3D%2299.6%22%20y1%3D%22300.4%22%20x2%3D%22300.4%22%20y2%3D%2299.6%22%2F%3E%3Cline%20x1%3D%22350%22%20y1%3D%22200%22%20x2%3D%22376%22%20y2%3D%22200%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%22354.5%22%20y1%3D%22241.4%22%20x2%3D%22370%22%20y2%3D%22245.6%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22338.6%22%20y1%3D%22280%22%20x2%3D%22352.4%22%20y2%3D%22288%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22306.1%22%20y1%3D%22306.1%22%20x2%3D%22324.5%22%20y2%3D%22324.5%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%22280%22%20y1%3D%22338.6%22%20x2%3D%22288%22%20y2%3D%22352.4%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22241.4%22%20y1%3D%22354.5%22%20x2%3D%22245.6%22%20y2%3D%22370%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22200%22%20y1%3D%22350%22%20x2%3D%22200%22%20y2%3D%22376%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%22158.6%22%20y1%3D%22354.5%22%20x2%3D%22154.4%22%20y2%3D%22370%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22120%22%20y1%3D%22338.6%22%20x2%3D%22112%22%20y2%3D%22352.4%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%2293.9%22%20y1%3D%22306.1%22%20x2%3D%2275.5%22%20y2%3D%22324.5%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%2261.4%22%20y1%3D%22280%22%20x2%3D%2247.6%22%20y2%3D%22288%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%2245.5%22%20y1%3D%22241.4%22%20x2%3D%2230%22%20y2%3D%22245.6%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%2250%22%20y1%3D%22200%22%20x2%3D%2224%22%20y2%3D%22200%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%2245.5%22%20y1%3D%22158.6%22%20x2%3D%2230%22%20y2%3D%22154.4%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%2261.4%22%20y1%3D%22120%22%20x2%3D%2247.6%22%20y2%3D%22112%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%2293.9%22%20y1%3D%2293.9%22%20x2%3D%2275.5%22%20y2%3D%2275.5%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%22120%22%20y1%3D%2261.4%22%20x2%3D%22112%22%20y2%3D%2247.6%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22158.6%22%20y1%3D%2245.5%22%20x2%3D%22154.4%22%20y2%3D%2230%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22200%22%20y1%3D%2250%22%20x2%3D%22200%22%20y2%3D%2224%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%22241.4%22%20y1%3D%2245.5%22%20x2%3D%22245.6%22%20y2%3D%2230%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22280%22%20y1%3D%2261.4%22%20x2%3D%22288%22%20y2%3D%2247.6%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22306.1%22%20y1%3D%2293.9%22%20x2%3D%22324.5%22%20y2%3D%2275.5%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%22338.6%22%20y1%3D%22120%22%20x2%3D%22352.4%22%20y2%3D%22112%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22354.5%22%20y1%3D%22158.6%22%20x2%3D%22370%22%20y2%3D%22154.4%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M200%2054%20L223%20200%20L200%20346%20L177%20200%20Z%22%20fill%3D%22%232d5762%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; }

/* full-bleed teal color block with an auto compass watermark */
.band { position:relative; overflow:hidden; background:var(--accent-dark); padding:64px 24px; }
.band::before { content:""; position:absolute; top:50%; left:50%; width:640px; height:640px; transform:translate(-50%,-50%); background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%22184%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%22138%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%2264%22%2F%3E%3Cline%20x1%3D%22342%22%20y1%3D%22200%22%20x2%3D%2258%22%20y2%3D%22200%22%2F%3E%3Cline%20x1%3D%22300.4%22%20y1%3D%22300.4%22%20x2%3D%2299.6%22%20y2%3D%2299.6%22%2F%3E%3Cline%20x1%3D%22200%22%20y1%3D%22342%22%20x2%3D%22200%22%20y2%3D%2258%22%2F%3E%3Cline%20x1%3D%2299.6%22%20y1%3D%22300.4%22%20x2%3D%22300.4%22%20y2%3D%2299.6%22%2F%3E%3Cline%20x1%3D%22350%22%20y1%3D%22200%22%20x2%3D%22376%22%20y2%3D%22200%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%22354.5%22%20y1%3D%22241.4%22%20x2%3D%22370%22%20y2%3D%22245.6%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22338.6%22%20y1%3D%22280%22%20x2%3D%22352.4%22%20y2%3D%22288%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22306.1%22%20y1%3D%22306.1%22%20x2%3D%22324.5%22%20y2%3D%22324.5%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%22280%22%20y1%3D%22338.6%22%20x2%3D%22288%22%20y2%3D%22352.4%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22241.4%22%20y1%3D%22354.5%22%20x2%3D%22245.6%22%20y2%3D%22370%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22200%22%20y1%3D%22350%22%20x2%3D%22200%22%20y2%3D%22376%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%22158.6%22%20y1%3D%22354.5%22%20x2%3D%22154.4%22%20y2%3D%22370%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22120%22%20y1%3D%22338.6%22%20x2%3D%22112%22%20y2%3D%22352.4%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%2293.9%22%20y1%3D%22306.1%22%20x2%3D%2275.5%22%20y2%3D%22324.5%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%2261.4%22%20y1%3D%22280%22%20x2%3D%2247.6%22%20y2%3D%22288%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%2245.5%22%20y1%3D%22241.4%22%20x2%3D%2230%22%20y2%3D%22245.6%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%2250%22%20y1%3D%22200%22%20x2%3D%2224%22%20y2%3D%22200%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%2245.5%22%20y1%3D%22158.6%22%20x2%3D%2230%22%20y2%3D%22154.4%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%2261.4%22%20y1%3D%22120%22%20x2%3D%2247.6%22%20y2%3D%22112%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%2293.9%22%20y1%3D%2293.9%22%20x2%3D%2275.5%22%20y2%3D%2275.5%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%22120%22%20y1%3D%2261.4%22%20x2%3D%22112%22%20y2%3D%2247.6%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22158.6%22%20y1%3D%2245.5%22%20x2%3D%22154.4%22%20y2%3D%2230%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22200%22%20y1%3D%2250%22%20x2%3D%22200%22%20y2%3D%2224%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%22241.4%22%20y1%3D%2245.5%22%20x2%3D%22245.6%22%20y2%3D%2230%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22280%22%20y1%3D%2261.4%22%20x2%3D%22288%22%20y2%3D%2247.6%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22306.1%22%20y1%3D%2293.9%22%20x2%3D%22324.5%22%20y2%3D%2275.5%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%22338.6%22%20y1%3D%22120%22%20x2%3D%22352.4%22%20y2%3D%22112%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22354.5%22%20y1%3D%22158.6%22%20x2%3D%22370%22%20y2%3D%22154.4%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M200%2054%20L223%20200%20L200%20346%20L177%20200%20Z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; opacity:.07; pointer-events:none; }
.band .band-inner { position:relative; z-index:1; max-width:800px; margin:0 auto; text-align:center; }
.band h2, .band h3 { font-family:var(--font-display); color:#fff; letter-spacing:-.015em; }
.band p { color:rgba(255,255,255,.78); }
.band .btn--gold { background:var(--gold); color:#241a06; }
.band .btn--gold:hover { background:#a6790f; }

/* content after a compass watermark sits above it */
.compass-corner ~ * { position:relative; z-index:1; }

/* sticky page header for buyer/marketing pages (kept full-height stable) */
.pagehead { position:sticky; top:0; z-index:40; background:var(--paper); }


/* — console top-right cluster (Upload · Tracks · account dropdown) —
   Rendered by /console-nav.js on console pages; /app renders it natively. */
.hdr-actions { display:flex; gap:8px; align-items:center; }
.hbtn { display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:13px; font-weight:600; padding:6px 12px; border-radius:8px; border:1px solid transparent; cursor:pointer; transition:background .15s, border-color .15s, color .15s; white-space:nowrap; }
.hbtn .ti { font-size:15px; }
.hbtn--primary { background:var(--accent); color:#fff; }
.hbtn--primary:hover { background:var(--accent-dark); }
.hbtn--ghost { background:var(--surface); border-color:var(--line); color:var(--ink); }
.hbtn--ghost:hover { border-color:var(--accent); color:var(--accent); }
.acctmenu { position:relative; display:inline-block; }
.acctbtn { display:inline-flex; align-items:center; gap:4px; background:transparent; border:1px solid var(--line); border-radius:999px; padding:3px 8px 3px 3px; cursor:pointer; font:inherit; transition:border-color .15s, box-shadow .15s; }
.acctbtn:hover { border-color:var(--accent); }
.acctbtn[aria-expanded="true"] { border-color:var(--accent); box-shadow:0 0 0 3px rgba(45,87,98,.15); }
.acctbtn .avatar { width:26px; height:26px; border-radius:999px; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.acctbtn .ti { font-size:15px; color:var(--muted); transition:transform .15s; }
.acctbtn[aria-expanded="true"] .ti { transform:rotate(180deg); }
.acctdrop { position:absolute; right:0; top:calc(100% + 8px); background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(26,26,26,.14); min-width:210px; display:none; z-index:70; padding:6px; }
.acctdrop.open { display:block; }
.acctdrop .acctdrop-head { padding:8px 10px 9px; }
.acctdrop .acctdrop-head .lbl { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:700; }
.acctdrop .acctdrop-head .em { font-size:13px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.acctdrop .acctdrop-sep { height:1px; background:var(--line); margin:5px 4px; }
.acctdrop a, .acctdrop button { display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 10px; border:0; background:transparent; color:var(--ink); font:inherit; font-size:14px; cursor:pointer; border-radius:7px; text-decoration:none; }
.acctdrop a:hover, .acctdrop button:hover { background:var(--sunk); color:var(--ink); }
.acctdrop a .ti, .acctdrop button .ti { font-size:16px; color:var(--muted); }
.acctdrop #logout { color:var(--danger); }
.acctdrop #logout .ti { color:var(--danger); }

/* brand logo is a home link — never underline it on hover */
.brand:hover { text-decoration:none; }