/* ═══════════════════════════════════════════════════════════════════════════
   CABANA · AMBASSADOR DESIGN SYSTEM
   ─────────────────────────────────────────────────────────────────────────
   Shared by ambassadors.html (the gateway) and ambassador-dashboard.html.

   This is a tier above the partner surface on purpose. An ambassador is
   chosen, one email at a time, and the room they walk into should say so
   before a single word does. Everything here serves that: deeper elevation,
   an aurora that moves, a display face with real presence.

   Two themes, three states. `:root` carries the full light palette. A dark
   block overrides only the tokens, guarded so an explicit light choice wins
   over the system preference, and a `[data-theme="dark"]` block lets the
   toggle beat the system in both directions. No colour is ever defined only
   inside a media query — that is how a page ends up unstyled for whoever
   set the other preference.

   Motion honours prefers-reduced-motion everywhere. Not as a courtesy: an
   aurora that cannot be turned off is a page some people cannot use.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TOKENS · light ───────────────────────────────────────────────────── */
:root{
  /* surfaces, back to front */
  --bg:#F2F3FA;
  --surface:#FCFCFE;
  --surface-2:#F5F5FC;
  --surface-3:#ECEDF8;
  --surface-glass:rgba(252,252,254,.72);

  /* ink */
  --ink:#08080F;
  --ink-2:#13142A;
  --ink-soft:#474A66;
  --ink-faint:#8B8EAC;

  /* brand */
  --violet:#6D28FF;
  --iris:#8B5CF6;
  --lilac:#C3AEFA;
  --electric:#4F6DFF;
  --mint:#4EE0C8;
  --mint-deep:#14B8A6;
  --gold:#F5B12E;
  --ember:#FF6A3C;
  --err:#FF4D6D;

  /* lines */
  --line:rgba(8,8,15,.07);
  --line-2:rgba(8,8,15,.13);
  --line-strong:rgba(8,8,15,.20);

  /* elevation. Two shadows per step: a tight contact shadow and a wide
     ambient one. A single blurred shadow reads as a sticker. */
  --lift-1:0 1px 2px rgba(8,8,15,.04), 0 4px 12px rgba(8,8,15,.04);
  --lift-2:0 2px 4px rgba(8,8,15,.05), 0 12px 32px rgba(8,8,15,.07);
  --lift-3:0 4px 8px rgba(8,8,15,.06), 0 24px 64px rgba(8,8,15,.10);
  --lift-brand:0 8px 24px rgba(109,40,255,.26);

  --aurora-a:rgba(109,40,255,.16);
  --aurora-b:rgba(79,109,255,.14);
  --aurora-c:rgba(78,224,200,.12);
  --scrim:rgba(8,8,15,.44);

  /* type */
  --font-d:'Bricolage Grotesque','Geist','Inter',system-ui,sans-serif;
  --font-b:'Inter',system-ui,-apple-system,sans-serif;
  --font-m:ui-monospace,'SF Mono',Menlo,monospace;

  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.16s; --t:.28s; --t-slow:.52s;

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;
}

/* ── TOKENS · dark ────────────────────────────────────────────────────────
   Guarded on :not([data-theme="light"]) so someone who explicitly chose
   light keeps light even on a dark-preferring OS. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#07070E;
    --surface:#101021;
    --surface-2:#16162C;
    --surface-3:#1E1E38;
    --surface-glass:rgba(16,16,33,.72);

    --ink:#F7F7FC;
    --ink-2:#E4E4F2;
    --ink-soft:#A5A7C4;
    --ink-faint:#71738F;

    --violet:#8B5CF6;
    --iris:#A78BFA;
    --lilac:#4C3A80;
    --electric:#6D8BFF;
    --mint:#5EEAD4;
    --mint-deep:#2DD4BF;

    --line:rgba(255,255,255,.08);
    --line-2:rgba(255,255,255,.14);
    --line-strong:rgba(255,255,255,.22);

    --lift-1:0 1px 2px rgba(0,0,0,.40), 0 4px 12px rgba(0,0,0,.30);
    --lift-2:0 2px 4px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.42);
    --lift-3:0 4px 8px rgba(0,0,0,.50), 0 24px 64px rgba(0,0,0,.55);
    --lift-brand:0 8px 28px rgba(139,92,246,.36);

    --aurora-a:rgba(139,92,246,.22);
    --aurora-b:rgba(109,139,255,.18);
    --aurora-c:rgba(94,234,212,.12);
    --scrim:rgba(0,0,0,.66);
  }
}
/* Explicit dark. Repeated rather than shared with the media block, because a
   selector list containing an invalid item is dropped whole in some engines. */
:root[data-theme="dark"]{
  --bg:#07070E; --surface:#101021; --surface-2:#16162C; --surface-3:#1E1E38;
  --surface-glass:rgba(16,16,33,.72);
  --ink:#F7F7FC; --ink-2:#E4E4F2; --ink-soft:#A5A7C4; --ink-faint:#71738F;
  --violet:#8B5CF6; --iris:#A78BFA; --lilac:#4C3A80; --electric:#6D8BFF;
  --mint:#5EEAD4; --mint-deep:#2DD4BF;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-strong:rgba(255,255,255,.22);
  --lift-1:0 1px 2px rgba(0,0,0,.40), 0 4px 12px rgba(0,0,0,.30);
  --lift-2:0 2px 4px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.42);
  --lift-3:0 4px 8px rgba(0,0,0,.50), 0 24px 64px rgba(0,0,0,.55);
  --lift-brand:0 8px 28px rgba(139,92,246,.36);
  --aurora-a:rgba(139,92,246,.22); --aurora-b:rgba(109,139,255,.18); --aurora-c:rgba(94,234,212,.12);
  --scrim:rgba(0,0,0,.66);
}

/* ── RESET ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:var(--font-b);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  overflow-x:hidden;
  transition:background var(--t) var(--ease), color var(--t) var(--ease);
}
img{max-width:100%;display:block;}
button,input,select,textarea{font:inherit;color:inherit;}
a{color:inherit;}

:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px;}

::selection{background:var(--violet);color:#fff;}

/* Reduced motion: kill every animation, but keep opacity at 1 so nothing
   that reveals on scroll is left permanently invisible. That failure mode —
   a blank page for the people who most need it not to move — is far worse
   than the animation itself. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1!important;transform:none!important;}
}

/* ── AURORA ───────────────────────────────────────────────────────────────
   Three drifting radial blooms. Fixed, pointer-events:none, painted behind
   everything. Animated with transform only, so it never triggers layout. */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.aurora::before,.aurora::after,.aurora i{
  content:'';position:absolute;border-radius:50%;filter:blur(90px);
  will-change:transform;
}
.aurora::before{
  width:60vw;height:60vw;min-width:420px;min-height:420px;
  top:-22vw;right:-14vw;background:var(--aurora-a);
  animation:drift-a 26s var(--ease-in-out) infinite;
}
.aurora::after{
  width:52vw;height:52vw;min-width:360px;min-height:360px;
  bottom:-20vw;left:-14vw;background:var(--aurora-b);
  animation:drift-b 32s var(--ease-in-out) infinite;
}
.aurora i{
  width:38vw;height:38vw;min-width:280px;min-height:280px;
  top:38%;left:46%;background:var(--aurora-c);
  animation:drift-c 24s var(--ease-in-out) infinite;
}
@keyframes drift-a{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(-6vw,5vh,0) scale(1.12);}
}
@keyframes drift-b{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(7vw,-5vh,0) scale(1.16);}
}
@keyframes drift-c{
  0%,100%{transform:translate3d(-50%,-50%,0) scale(1);}
  50%{transform:translate3d(-42%,-58%,0) scale(1.2);}
}

.page{position:relative;z-index:1;}

/* ── TYPE ────────────────────────────────────────────────────────────── */
.display{
  font-family:var(--font-d);font-weight:800;letter-spacing:-.035em;
  line-height:1.02;
  font-size:clamp(2.15rem,6vw,4.25rem);
}
.h1{font-family:var(--font-d);font-weight:700;letter-spacing:-.028em;line-height:1.1;font-size:clamp(1.6rem,3.4vw,2.4rem);}
.h2{font-family:var(--font-d);font-weight:700;letter-spacing:-.022em;line-height:1.18;font-size:clamp(1.24rem,2.3vw,1.6rem);}
.h3{font-family:var(--font-d);font-weight:600;letter-spacing:-.014em;font-size:1.05rem;}
.lede{font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.65;color:var(--ink-soft);}
.body{font-size:.95rem;line-height:1.68;color:var(--ink-soft);}
.small{font-size:.82rem;line-height:1.55;color:var(--ink-faint);}
.mono{font-family:var(--font-m);font-size:.86rem;letter-spacing:-.02em;}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet);
}
.eyebrow::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--violet);box-shadow:0 0 0 4px color-mix(in srgb,var(--violet) 18%,transparent);
  animation:pulse-dot 2.6s var(--ease-in-out) infinite;
}
@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.5;transform:scale(.7);}
}

/* The one piece of chrome that earns a gradient: it marks the tier. */
.grad{
  background:linear-gradient(112deg,var(--violet) 0%,var(--electric) 42%,var(--mint-deep) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:grad-pan 9s var(--ease-in-out) infinite;
}
@keyframes grad-pan{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

/* ── LAYOUT ──────────────────────────────────────────────────────────── */
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,32px);}
.wrap-narrow{max-width:720px;margin:0 auto;padding:0 clamp(16px,4vw,32px);}
.stack{display:flex;flex-direction:column;}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.spread{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.grid{display:grid;gap:clamp(14px,2vw,20px);}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.g4{grid-template-columns:repeat(auto-fit,minmax(178px,1fr));}

/* ── CARD ────────────────────────────────────────────────────────────── */
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(18px,2.4vw,26px);
  box-shadow:var(--lift-1);
  transition:transform var(--t) var(--ease),
             box-shadow var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.card-hover:hover{transform:translateY(-3px);box-shadow:var(--lift-2);border-color:var(--line-2);}

.card-glass{
  background:var(--surface-glass);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
}

/* A hairline of brand across the top edge. Used only on the cards that
   represent money or rank, so the signal stays worth something. */
.card-crest::before{
  content:'';position:absolute;inset:0 0 auto 0;height:3px;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg,var(--violet),var(--electric),var(--mint-deep));
}

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
.btn{
  --btn-bg:var(--surface); --btn-fg:var(--ink); --btn-bd:var(--line-2);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:var(--r);border:1.5px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--font-b);font-weight:650;font-size:.92rem;letter-spacing:-.008em;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform var(--t-fast) var(--ease),
             box-shadow var(--t) var(--ease),
             border-color var(--t) var(--ease),
             background var(--t) var(--ease),
             opacity var(--t) var(--ease);
  overflow:hidden;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--lift-2);}
.btn:active{transform:translateY(0) scale(.985);}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none;}

.btn-primary{
  --btn-bg:linear-gradient(135deg,var(--violet),var(--electric));
  --btn-fg:#fff; --btn-bd:transparent;
  box-shadow:var(--lift-brand);
}
.btn-primary:hover{box-shadow:0 12px 34px rgba(109,40,255,.38);}
/* Sheen sweeps once on hover, not on a loop. A button that shimmers forever
   reads as an advert; one that answers a hover reads as responsive. */
.btn-primary::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.30) 50%,transparent 70%);
  transform:translateX(-120%);
}
.btn-primary:hover::after{transform:translateX(120%);transition:transform .7s var(--ease);}

.btn-ghost{--btn-bg:transparent;--btn-fg:var(--ink-soft);}
.btn-ghost:hover{--btn-fg:var(--ink);--btn-bd:var(--violet);}
.btn-sm{padding:9px 16px;font-size:.84rem;border-radius:var(--r-sm);}
.btn-block{width:100%;}

.btn.is-loading{pointer-events:none;color:transparent;}
.btn.is-loading::before{
  content:'';position:absolute;top:50%;left:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;
  border:2px solid rgba(255,255,255,.32);border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;
}
.btn-ghost.is-loading::before,.btn:not(.btn-primary).is-loading::before{
  border-color:var(--line-2);border-top-color:var(--violet);
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── BADGES ──────────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;border-radius:var(--r-full);
  font-size:.68rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase;
  white-space:nowrap;
}
.badge svg{width:11px;height:11px;}
.b-tier{background:linear-gradient(135deg,var(--violet),var(--electric));color:#fff;box-shadow:var(--lift-brand);}
.b-ok{background:color-mix(in srgb,var(--mint-deep) 15%,transparent);color:var(--mint-deep);}
.b-warn{background:color-mix(in srgb,var(--gold) 18%,transparent);color:#B47908;}
.b-hot{background:color-mix(in srgb,var(--ember) 14%,transparent);color:var(--ember);}
.b-err{background:color-mix(in srgb,var(--err) 14%,transparent);color:var(--err);}
.b-mute{background:var(--surface-3);color:var(--ink-faint);}
:root[data-theme="dark"] .b-warn{color:var(--gold);}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .b-warn{color:var(--gold);}}

/* ── FIELDS ──────────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:7px;}
.label{font-size:.8rem;font-weight:650;color:var(--ink-2);letter-spacing:-.004em;}
.hint{font-size:.76rem;color:var(--ink-faint);line-height:1.5;}
.input,.select,.textarea{
  width:100%;padding:13px 15px;
  background:var(--surface-2);
  border:1.5px solid var(--line-2);border-radius:var(--r);
  font-size:.94rem;color:var(--ink);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--ink-faint);}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--violet);background:var(--surface);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--violet) 13%,transparent);
}
.textarea{min-height:104px;resize:vertical;line-height:1.6;}
.select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8EAC' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px;
  padding-right:40px;
}
.field-err .input,.field-err .select{border-color:var(--err);}
.err-text{font-size:.78rem;color:var(--err);font-weight:600;}

/* Segmented control — used for lead type and theme. */
.seg{display:inline-flex;padding:4px;gap:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);}
.seg button{
  padding:8px 15px;border:none;background:transparent;border-radius:var(--r-sm);
  font-size:.83rem;font-weight:640;color:var(--ink-faint);cursor:pointer;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--lift-1);}

/* ── STAT ────────────────────────────────────────────────────────────── */
.stat{display:flex;flex-direction:column;gap:6px;}
.stat-val{
  font-family:var(--font-d);font-weight:750;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.7rem,3.6vw,2.5rem);
  font-variant-numeric:tabular-nums;
}
.stat-lbl{font-size:.76rem;font-weight:640;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);}
.stat-note{font-size:.8rem;color:var(--ink-soft);}

/* ── PROGRESS RING ───────────────────────────────────────────────────── */
.ring{position:relative;display:grid;place-items:center;width:132px;height:132px;flex:none;}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg);}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round;}
.ring .track{stroke:var(--surface-3);}
.ring .bar{
  stroke:url(#ringGrad);
  stroke-dasharray:var(--circ);
  stroke-dashoffset:var(--circ);
  transition:stroke-dashoffset 1.4s var(--ease);
}
.ring-mid{text-align:center;line-height:1.1;}
.ring-num{font-family:var(--font-d);font-weight:750;font-size:1.6rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.ring-sub{font-size:.68rem;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);margin-top:3px;}

/* ── PIPELINE ────────────────────────────────────────────────────────── */
.lead{
  display:flex;align-items:center;gap:14px;
  padding:15px 17px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line);
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.lead:hover{transform:translateX(3px);border-color:var(--line-2);background:var(--surface);}
.lead-dot{width:9px;height:9px;border-radius:50%;flex:none;}
.lead-main{flex:1;min-width:0;}
.lead-name{font-weight:650;font-size:.94rem;letter-spacing:-.008em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lead-meta{font-size:.78rem;color:var(--ink-faint);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* The onboarding action, on the lead itself. The whole job of this
   programme is onboarding, so the button that does it belongs here and
   not three screens away. It hides its label on a narrow phone rather
   than wrapping the row, because this list is read one-handed. */
.lead-act{flex:none;gap:5px;white-space:nowrap;}
.lead-act svg{width:13px;height:13px;flex:none;}
@media (max-width:560px){
  .lead-act{font-size:0;padding-left:10px;padding-right:10px;}
  .lead-act svg{width:15px;height:15px;}
}

/* ── LEADERBOARD ─────────────────────────────────────────────────────── */
.lb-row{
  display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:var(--r);
  transition:background var(--t) var(--ease);
}
.lb-row:hover{background:var(--surface-2);}
.lb-row.is-me{background:color-mix(in srgb,var(--violet) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--violet) 24%,transparent);}
.lb-rank{
  width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:9px;
  background:var(--surface-3);color:var(--ink-soft);
  font-family:var(--font-d);font-weight:750;font-size:.84rem;
}
.lb-row:nth-child(1) .lb-rank{background:linear-gradient(135deg,#F5B12E,#FF9A3C);color:#fff;}
.lb-row:nth-child(2) .lb-rank{background:linear-gradient(135deg,#C9CEDD,#9AA3BB);color:#fff;}
.lb-row:nth-child(3) .lb-rank{background:linear-gradient(135deg,#D08B5B,#B06B3B);color:#fff;}

/* ── AVATAR ──────────────────────────────────────────────────────────── */
.av{
  display:grid;place-items:center;flex:none;
  width:52px;height:52px;border-radius:17px;
  background:linear-gradient(135deg,var(--violet),var(--electric));
  color:#fff;font-family:var(--font-d);font-weight:750;font-size:1.2rem;
  box-shadow:var(--lift-brand);
}
.av-sm{width:34px;height:34px;border-radius:11px;font-size:.82rem;}

/* ── LINK BOX ────────────────────────────────────────────────────────── */
.linkbox{
  display:flex;align-items:center;gap:10px;padding:6px 6px 6px 16px;
  background:var(--surface-2);border:1.5px dashed var(--line-2);border-radius:var(--r);
  transition:border-color var(--t) var(--ease);
}
.linkbox:hover{border-color:var(--violet);}
.linkbox code{
  flex:1;min-width:0;font-family:var(--font-m);font-size:.83rem;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── TOAST ───────────────────────────────────────────────────────────── */
.toasts{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:9000;display:flex;flex-direction:column;gap:9px;align-items:center;
  pointer-events:none;width:min(94vw,460px);
}
.toast{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:13px 17px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line-2);
  box-shadow:var(--lift-3);
  font-size:.89rem;font-weight:550;line-height:1.5;
  animation:toast-in .42s var(--spring) both;
  pointer-events:auto;
}
.toast.out{animation:toast-out .3s var(--ease-in-out) both;}
.toast-icon{width:19px;height:19px;flex:none;}
.toast-ok   .toast-icon{color:var(--mint-deep);}
.toast-err  .toast-icon{color:var(--err);}
.toast-info .toast-icon{color:var(--electric);}
@keyframes toast-in{from{opacity:0;transform:translateY(18px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes toast-out{to{opacity:0;transform:translateY(10px) scale(.97);}}

/* ── MODAL ───────────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:8000;display:grid;place-items:center;padding:18px;}
.modal[hidden]{display:none;}
.modal-scrim{position:absolute;inset:0;background:var(--scrim);backdrop-filter:blur(6px);animation:fade .28s var(--ease) both;}
.modal-body{
  position:relative;width:min(96vw,560px);max-height:88vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-xl);
  padding:clamp(22px,3.4vw,34px);box-shadow:var(--lift-3);
  animation:modal-in .42s var(--spring) both;
}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
@keyframes modal-in{from{opacity:0;transform:translateY(22px) scale(.965);}to{opacity:1;transform:none;}}

/* ── REVEAL ──────────────────────────────────────────────────────────────
   Elements start displaced and are released by IntersectionObserver. The
   .in class is added by JS; if JS never runs, the no-js rule below keeps
   everything visible rather than leaving a blank page. */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);}
.reveal.in{opacity:1;transform:none;}
html.no-js .reveal{opacity:1;transform:none;}

/* ── SKELETON ────────────────────────────────────────────────────────── */
.skel{
  border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite;
  color:transparent!important;user-select:none;
}
@keyframes shimmer{to{background-position:-200% 0;}}

/* ── GATE / BOOT ─────────────────────────────────────────────────────── */
.boot{
  position:fixed;inset:0;z-index:9500;display:grid;place-items:center;
  background:var(--bg);gap:16px;transition:opacity .4s var(--ease),visibility .4s;
}
.boot.gone{opacity:0;visibility:hidden;pointer-events:none;}
.boot-inner{display:flex;flex-direction:column;align-items:center;gap:15px;}
.boot-mark{
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(135deg,var(--violet),var(--electric));
  box-shadow:var(--lift-brand);
  animation:boot-pulse 1.5s var(--ease-in-out) infinite;
}
@keyframes boot-pulse{
  0%,100%{transform:scale(1) rotate(0deg);border-radius:14px;}
  50%{transform:scale(.86) rotate(45deg);border-radius:18px;}
}
.boot p{font-size:.85rem;color:var(--ink-faint);}

/* ── THEME TOGGLE ────────────────────────────────────────────────────── */
.theme-btn{
  width:38px;height:38px;display:grid;place-items:center;
  border:1.5px solid var(--line-2);border-radius:12px;background:var(--surface);
  cursor:pointer;color:var(--ink-soft);
  transition:transform var(--t-fast) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.theme-btn:hover{color:var(--ink);border-color:var(--violet);transform:rotate(-14deg) scale(1.06);}
.theme-btn svg{width:18px;height:18px;}

/* ── DIVIDER ─────────────────────────────────────────────────────────── */
.hr{height:1px;background:var(--line);border:0;margin:clamp(20px,3vw,32px) 0;}

/* ── UTIL ────────────────────────────────────────────────────────────── */
.center{text-align:center;}
.muted{color:var(--ink-faint);}
.tnum{font-variant-numeric:tabular-nums;}
[hidden]{display:none!important;}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;}

@media (max-width:640px){
  .ring{width:112px;height:112px;}
  .btn{padding:12px 20px;}
}