/* ============================================================
   freestream — portal / landing skin
   Built on the freestream media-kit tokens (--fs-*).
   Legacy class/ID hooks preserved 1:1 so app.js keeps working.
   ============================================================ */
@import url("/_site/brand/fonts/fonts.css");
@import url("/_site/brand/tokens.css");

:root{
  /* legacy var names remapped onto the brand contract */
  --bg:var(--fs-bg);
  --panel:var(--fs-surface);
  --panel2:var(--fs-surface-raised);
  --border:var(--fs-border);
  --txt:var(--fs-text);
  --muted:var(--fs-text-muted);
  --dim:var(--fs-text-subtle);
  --acc:var(--fs-accent);          /* violet — interactive */
  --acc2:var(--fs-accent);
  --good:var(--fs-success);
  --radius:var(--fs-radius-md);
  --field:var(--fs-neutral-900);   /* input / code wells */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--fs-font-ui);font-size:var(--fs-text-base);line-height:var(--fs-leading-normal);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.bg{position:fixed;inset:0;z-index:-1;background:var(--fs-grad-velvet)}
.bg::after{content:"";position:absolute;inset:0;background:var(--fs-grad-spotlight)}

/* logged-out splash overlay */
.splash{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;
  background:var(--fs-grad-velvet)}
.splash::after{content:"";position:absolute;inset:0;background:var(--fs-grad-spotlight);pointer-events:none}
.splash-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;
  background:var(--fs-surface-glass);border:1px solid var(--fs-border);border-top:2px solid rgba(203,163,90,.55);
  border-radius:var(--fs-radius-xl);padding:46px 40px;max-width:440px;width:100%;box-shadow:var(--fs-shadow-xl);
  -webkit-backdrop-filter:blur(var(--fs-blur-lg)) saturate(var(--fs-glass-saturate));
  backdrop-filter:blur(var(--fs-blur-lg)) saturate(var(--fs-glass-saturate))}
.splash-logo{height:52px;width:auto}
.splash-tag{margin:0;color:var(--fs-text-muted);font-size:15px;line-height:1.55;max-width:320px}
.splash-btn{font-size:16px;padding:13px 32px;margin-top:2px}
.splash-sub{margin:0;color:var(--fs-text-subtle);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
code{background:var(--field);border:1px solid var(--border);border-radius:var(--fs-radius-xs);
  padding:2px 8px;font-size:var(--fs-text-sm);color:var(--fs-neutral-200);font-family:var(--fs-font-mono)}

/* a11y niceties (adopted from base.css) */
:focus-visible{outline:2px solid var(--fs-focus-ring);outline-offset:2px;border-radius:4px}
::selection{background:var(--fs-accent-soft);color:var(--fs-text)}
*{scrollbar-width:thin;scrollbar-color:var(--fs-neutral-700) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--fs-neutral-700);border-radius:8px;border:2px solid transparent;background-clip:content-box}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* top bar — glass */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 22px;border-bottom:1px solid var(--border);box-shadow:var(--fs-inset-top);
  background:var(--fs-surface-glass);
  -webkit-backdrop-filter:blur(var(--fs-blur-md)) saturate(var(--fs-glass-saturate));
  backdrop-filter:blur(var(--fs-blur-md)) saturate(var(--fs-glass-saturate))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.top{background:var(--fs-glass-fallback)}}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-mark{height:30px;display:block}
.brand-word{height:19px;display:block}
.topnav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.topnav a{color:var(--muted);font-size:var(--fs-text-sm)}
.topnav a:hover{color:var(--txt)}
.topnav .donate-link{color:var(--fs-text-on-gold);font-weight:var(--fs-w-bold);font-size:var(--fs-text-sm);
  background:var(--fs-grad-gold);border:1px solid transparent;border-radius:var(--fs-radius-pill);
  padding:7px 16px;cursor:pointer;font-family:inherit;box-shadow:var(--fs-inset-gold),var(--fs-glow-gold);
  transition:filter var(--fs-dur-fast) var(--fs-ease-standard)}
.topnav .donate-link:hover{filter:brightness(1.07);text-decoration:none}
#account{display:inline-flex;align-items:center;font-size:var(--fs-text-sm);color:var(--muted)}
#account a{color:var(--acc)}
/* logged-in profile chip */
.profile{display:inline-flex;align-items:center;gap:9px;background:var(--fs-surface-raised);
  border:1px solid var(--border);border-radius:var(--fs-radius-pill);padding:4px 12px 4px 4px;
  color:var(--txt);cursor:pointer;font-family:inherit;font-size:var(--fs-text-sm);font-weight:var(--fs-w-medium);
  transition:border-color var(--fs-dur-fast),background var(--fs-dur-fast)}
.profile:hover{border-color:var(--acc);background:var(--fs-surface)}
.profile .avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--fs-grad-violet);color:#fff;font-size:11px;font-weight:var(--fs-w-bold);
  box-shadow:0 0 0 1px var(--fs-border-gold)}
.profile .pname{line-height:1}
.profile .pcaret{color:var(--muted);font-size:11px;margin-left:-2px}
#account .signout{margin-left:12px;color:var(--muted);font-size:var(--fs-text-xs)}
#account .signout:hover{color:var(--txt)}

/* donate banner (gold = membership / ceremonial) */
.donate-banner{display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(203,163,90,.22),rgba(203,163,90,.07));
  border-top:1px solid var(--fs-border-gold);border-bottom:1px solid var(--fs-border-gold);
  box-shadow:inset 0 1px 0 rgba(235,208,138,.25);padding:13px 20px;font-size:14px;line-height:1.45}
.db-text{margin:0;max-width:880px;color:var(--txt)}
.db-text b{color:var(--fs-gold-200)}
.db-sign{color:var(--muted);font-style:italic}
.db-actions{display:flex;align-items:center;gap:8px;flex:none}
.db-btn{background:var(--fs-grad-gold);border:none;color:var(--fs-text-on-gold);font-weight:var(--fs-w-bold);
  border-radius:var(--fs-radius-sm);padding:8px 16px;font-size:14px;cursor:pointer;white-space:nowrap;box-shadow:var(--fs-inset-gold)}
.db-btn:hover{filter:brightness(1.06)}
.db-x{background:transparent;border:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
.db-x:hover{color:var(--txt)}
.donate-banner.guilt{justify-content:center;text-align:center;animation:db-shake .5s}
.db-guilt{margin:0;max-width:760px;color:var(--txt);font-size:14px;line-height:1.5}
.db-faces{display:block;font-size:22px;letter-spacing:3px;margin:2px 0}
@keyframes db-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

.wrap{max-width:1080px;margin:0 auto;padding:10px 20px 80px}
section{margin:46px 0}
h1,h2{font-family:var(--fs-font-display);font-weight:var(--fs-w-medium);letter-spacing:var(--fs-tracking-tight)}
h1{font-size:var(--fs-text-4xl);line-height:1.04;margin:0 0 14px}
h2{font-size:var(--fs-text-2xl);line-height:1.1;margin:0 0 6px}
h2 em{color:var(--acc);font-style:italic}
.sub{color:var(--muted);font-size:17px;max-width:760px;margin:0 auto}
.lede{color:var(--muted);max-width:820px;margin:6px 0 16px}

/* hero (reserved) */
.hero{text-align:center;padding:54px 10px 22px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-block;padding:11px 20px;border-radius:var(--fs-radius-md);border:1px solid var(--border);
  background:var(--panel2);color:var(--txt);font-weight:var(--fs-w-semibold);font-size:15px;cursor:pointer;
  text-decoration:none;font-family:inherit;transition:all var(--fs-dur-fast) var(--fs-ease-standard)}
.btn:hover{border-color:var(--acc);text-decoration:none}
.btn.primary{background:var(--fs-grad-violet);border-color:transparent;color:var(--fs-text-on-violet)}
.btn.primary:hover{filter:brightness(1.06);border-color:transparent}
.ghost{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:var(--fs-radius-sm);
  padding:7px 12px;font-size:14px;cursor:pointer;font-family:inherit}
.ghost:hover{color:var(--txt);border-color:var(--acc)}
.linkbtn{background:none;border:none;color:var(--acc);cursor:pointer;font-size:inherit;padding:0;text-decoration:underline;font-family:inherit}

/* grids */
.grid{display:grid;gap:14px}
.cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.devices{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;
  display:flex;flex-direction:column;gap:5px;color:var(--txt)}
a.card:hover{border-color:var(--acc);text-decoration:none;transform:translateY(-2px);transition:.15s}
.card .ic{font-size:26px}
.card b{font-size:16px}
.card small{color:var(--muted);font-size:13px}
.card.static code{margin-top:6px;align-self:flex-start}

/* primary destination tiles */
.dests{margin-top:6px}
/* Flex (not a fixed 4-col grid) so any number of tiles stays centered — with 4
   they fill the row at 248px like before; with 3 (music hidden) they centre. */
.dest-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.dest{flex:1 1 200px;max-width:248px;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden;transition:transform var(--fs-dur-base) var(--fs-ease-out),border-color var(--fs-dur-fast),box-shadow var(--fs-dur-base)}
.dest:hover{border-color:var(--acc);transform:translateY(-3px);box-shadow:var(--fs-shadow-lg)}
.dest-open{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;
  text-align:center;color:var(--txt);padding:0}
.dest-open:hover{text-decoration:none}
.dest-open .ic{font-size:40px;line-height:1}
.dest-open img.ic{width:100%;height:auto;aspect-ratio:1/1;display:block;filter:none}
.dest-open b{font-size:18px;letter-spacing:-.3px;line-height:1.25;font-weight:var(--fs-w-semibold);padding:14px 12px 12px}
.dest-url{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--border);background:var(--panel2)}
.dest-url code{flex:1;background:none;border:none;padding:0;font-size:12px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.copy-url{flex:none;background:var(--field);border:1px solid var(--border);border-radius:var(--fs-radius-xs);color:var(--muted);
  width:30px;height:28px;font-size:14px;cursor:pointer;transition:.12s}
.copy-url:hover{border-color:var(--acc);color:var(--txt)}
.copy-url.done{border-color:var(--good);color:var(--good)}

/* "Coming soon" tile — greyed, non-clickable, diagonal ribbon (bottom-left -> top-right) */
.dest.coming-soon{position:relative;cursor:default}
.dest.coming-soon:hover{border-color:var(--border);transform:none;box-shadow:none}
.dest.coming-soon .dest-open,
.dest.coming-soon .copy-url{pointer-events:none}
.dest.coming-soon .dest-open .ic,
.dest.coming-soon .dest-open b,
.dest.coming-soon .dest-url{filter:grayscale(1);opacity:.4}
.cs-tag{position:absolute;left:50%;top:50%;z-index:3;pointer-events:none;
  transform:translate(-50%,-50%) rotate(-45deg);transform-origin:center;
  background:var(--fs-grad-gold);color:var(--fs-text-on-gold);
  font-weight:var(--fs-w-bold);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 64px;white-space:nowrap;box-shadow:var(--fs-shadow-lg)}

/* help — enter, or ask the AI assistant (single-screen, design-led, no instructions) */
.help{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;max-width:720px;margin:34px auto 0}
.help-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  text-align:center;background:var(--panel);border:1px solid var(--border);border-radius:var(--fs-radius-lg);
  padding:26px 18px;color:var(--txt);cursor:pointer;font-family:inherit;
  transition:transform var(--fs-dur-base) var(--fs-ease-out),border-color var(--fs-dur-fast),box-shadow var(--fs-dur-base)}
.help-card:hover{transform:translateY(-3px);border-color:var(--acc);box-shadow:var(--fs-shadow-lg)}
.help-ic{width:46px;height:46px;color:var(--muted)}
.help-ic svg{width:100%;height:100%;display:block}
.help-label{font-size:var(--fs-text-md);font-weight:var(--fs-w-semibold)}
.help-sub{font-size:var(--fs-text-xs);color:var(--muted)}
/* the assistant is the obvious primary action — it draws the eye */
.help-card.assistant{background:linear-gradient(160deg,var(--fs-violet-900) 0%,var(--fs-surface) 72%);
  border-color:var(--fs-border-strong);animation:fs-pulse 3.4s var(--fs-ease-standard) infinite}
.help-card.assistant .help-ic{width:58px;height:58px;color:var(--fs-violet-200)}
.help-card.assistant .help-label{font-size:var(--fs-text-xl)}
.help-card.assistant:hover{border-color:var(--fs-accent)}
@keyframes fs-pulse{
  0%,100%{box-shadow:0 0 0 1px rgba(145,112,244,.30),0 10px 44px -10px rgba(126,91,230,.40)}
  50%{box-shadow:0 0 0 1px rgba(145,112,244,.55),0 16px 60px -8px rgba(126,91,230,.62)}}

/* support / donate — wide, short modal */
#donate-modal .modal-card{width:min(720px,96vw)}
.donate-body{padding:20px 22px 22px}
.support-note{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 16px}
.donate-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.donate-col{display:flex;flex-direction:column;background:var(--panel2);border:1px solid var(--border);border-radius:var(--fs-radius-md);padding:14px 16px}
.donate-col h4{margin:0 0 11px;font-size:11px;font-weight:var(--fs-w-bold);letter-spacing:.6px;text-transform:uppercase;color:var(--dim)}
.donate-perks,.donate-compare{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.donate-perks li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--txt)}
.donate-perks li span{font-size:16px;width:20px;text-align:center;flex:none}
.donate-compare li{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--muted)}
.donate-compare li b{color:var(--txt);font-variant-numeric:tabular-nums}
/* scroll past the first ~5 rows; thin gold scrollbar hints there's more */
.scroll5{max-height:148px;overflow-y:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:var(--fs-gold-600) transparent}
.scroll5::-webkit-scrollbar{width:6px}
.scroll5::-webkit-scrollbar-thumb{background:var(--fs-gold-600);border-radius:999px}
.scroll5::-webkit-scrollbar-track{background:transparent}
/* footer line pinned BELOW the scroll area (perks blurb · costs total) */
.donate-foot{border-top:1px solid var(--border);margin-top:10px;padding-top:9px;font-size:13px}
.perks-foot{color:var(--fs-gold);font-weight:var(--fs-w-semibold);line-height:1.4}
.compare-total{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--txt);font-weight:var(--fs-w-semibold)}
.compare-total b{color:var(--fs-gold);font-variant-numeric:tabular-nums}

/* membership card (.mcard*) — moved to the SHARED /_site/brand/mcard.js (single source of
   truth, also used by the Jellyfin hub popup). It injects its own stylesheet at runtime. */
.donate-amount-label{font-size:11px;font-weight:var(--fs-w-bold);letter-spacing:.6px;text-transform:uppercase;color:var(--dim);margin:0 0 10px}
/* 4-option tier bar */
.tier-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tier{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--fs-radius-md);padding:14px 8px;color:var(--txt);
  cursor:pointer;transition:.13s}
.tier:hover{border-color:var(--fs-gold);transform:translateY(-2px);text-decoration:none;box-shadow:var(--fs-glow-gold)}
.tier .ic{font-size:25px;line-height:1}
.tier b{font-size:14px}
.support-loading{grid-column:1/-1;text-align:center;color:var(--dim);padding:14px}
.support-fee{color:var(--dim);font-size:11.5px;line-height:1.45;margin:12px 2px 0;text-align:center}

/* fee-less crypto toggle + addresses */
.crypto-row{display:flex;align-items:center;gap:10px;justify-content:center;margin:14px 0 0}
.crypto-row-label{font-size:13px;color:var(--txt)}
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;cursor:pointer;background:var(--border);border-radius:999px;transition:.18s}
.switch .slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.18s}
.switch input:checked + .slider{background:var(--fs-gold)}
.switch input:checked + .slider:before{transform:translateX(18px)}
.crypto-pane{margin-top:14px}
.crypto-pane.hidden{display:none}
.cp-sub{font-weight:var(--fs-w-bold);color:var(--muted);text-transform:none;letter-spacing:0}
/* step 1 — amount picker */
.crypto-amts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 14px}
.ca-chip{font-size:15px;font-weight:700;padding:9px 16px;border-radius:999px;border:1px solid var(--border);
  background:var(--field);color:var(--txt);cursor:pointer;transition:.13s;min-width:58px}
.ca-chip:hover{border-color:var(--fs-gold)}
.ca-chip.is-active{border-color:var(--fs-gold);color:var(--fs-gold);box-shadow:var(--fs-glow-gold)}
.ca-custom{width:96px;font-size:14px;padding:9px 12px;border-radius:999px;border:1px solid var(--border);
  background:var(--field);color:var(--txt);text-align:center}
.ca-custom:focus{outline:none;border-color:var(--acc)}
.crypto-go{display:block;width:100%;font-size:14.5px;font-weight:700;padding:12px;border-radius:999px;border:0;
  cursor:pointer;color:#1a1018;background:linear-gradient(180deg,var(--fs-gold),#caa23a);transition:.13s}
.crypto-go:hover{filter:brightness(1.06)}
.crypto-go:disabled{opacity:.5;cursor:default;filter:none}
.crypto-hint{font-size:11.5px;line-height:1.45;color:var(--dim);text-align:center;margin:11px 4px 0}
/* step 2 — pay */
.crypto-amt-head{font-size:13px;color:var(--muted);text-align:center;margin:0 0 12px}
.crypto-amt-head b{color:var(--txt);font-size:15px}
.crypto-amt-head a{color:var(--acc)}
.crypto-tabs{display:flex;gap:8px;justify-content:center;margin:0 0 14px}
.ct-tab{font-size:13px;font-weight:700;padding:7px 16px;border-radius:999px;border:1px solid var(--border);
  background:transparent;color:var(--muted);cursor:pointer;transition:.13s}
.ct-tab.is-active{border-color:var(--fs-gold);color:var(--fs-gold);background:var(--field)}
.crypto-method{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.cm-qr-wrap{background:#fff;border-radius:12px;padding:8px;box-shadow:var(--fs-glow-gold)}
.cm-qr{display:block;width:172px;height:172px;border-radius:4px}
.cm-amt{font-size:12px;color:var(--muted)}
.cm-code{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;word-break:break-all;color:var(--muted);
  line-height:1.4;background:var(--field);border:1px solid var(--border);border-radius:8px;padding:8px 10px;max-width:100%}
.cm-actions{display:flex;gap:10px;align-items:center}
.crypto-copy,.crypto-open{font-size:12px;padding:7px 16px;border-radius:999px;border:1px solid var(--border);
  background:transparent;color:var(--txt);cursor:pointer;transition:.13s;text-decoration:none;display:inline-block}
.crypto-copy:hover,.crypto-open:hover{border-color:var(--fs-gold);color:var(--fs-gold)}
.crypto-open{background:var(--field)}
.crypto-state{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0 2px;
  font-size:13px;font-weight:600;color:var(--muted)}
.crypto-state .cs-dot{width:9px;height:9px;border-radius:50%;background:var(--fs-gold);flex:none;
  animation:cspulse 1.3s ease-in-out infinite}
@keyframes cspulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.crypto-state.cs-seen{color:var(--fs-gold)}
.crypto-state.cs-done{color:var(--good)}.crypto-state.cs-done .cs-dot{background:var(--good);animation:none}
.crypto-state.cs-dead{color:var(--dim)}.crypto-state.cs-dead .cs-dot{background:var(--border);animation:none}

/* concierge */
.fab{position:fixed;right:22px;bottom:22px;z-index:30;width:56px;height:56px;border-radius:50%;
  border:none;background:var(--fs-grad-gold);color:var(--fs-text-on-gold);font-size:24px;cursor:pointer;box-shadow:var(--fs-glow-gold)}
.panel{position:fixed;right:22px;bottom:22px;z-index:31;width:min(380px,92vw);height:min(560px,80vh);
  background:var(--fs-surface-glass-strong);border:1px solid var(--border);border-radius:var(--fs-radius-lg);
  display:flex;flex-direction:column;box-shadow:var(--fs-shadow-xl);overflow:hidden;
  -webkit-backdrop-filter:blur(var(--fs-blur-lg)) saturate(var(--fs-glass-saturate));
  backdrop-filter:blur(var(--fs-blur-lg)) saturate(var(--fs-glass-saturate))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.panel{background:var(--fs-glass-fallback-strong)}}
.panel-head{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--border);background:var(--panel2)}
.panel-head b{flex:1;font-family:var(--fs-font-display);font-size:var(--fs-text-lg);font-weight:var(--fs-w-medium)}
.budget{font-size:11px;color:var(--dim)}
.x{background:none;border:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.chat-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.msg{padding:9px 13px;border-radius:13px;max-width:85%;font-size:14px;white-space:pre-wrap;word-wrap:break-word}
.msg.user{align-self:flex-end;background:var(--acc);color:var(--fs-text-on-violet);border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start;background:var(--panel2);border:1px solid var(--border);border-bottom-left-radius:4px}
.msg.err{align-self:flex-start;background:rgba(200,81,79,.16);border:1px solid var(--fs-red-500);color:#ffb3bd}
.rate{align-self:flex-start;display:flex;gap:6px;margin:-4px 0 2px 4px;font-size:12px;color:var(--muted)}
.rate-btn{background:none;border:none;cursor:pointer;font-size:14px;line-height:1;padding:2px;opacity:.6;transition:opacity .15s}
.rate-btn:hover{opacity:1}
.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border)}
.chat-form input{flex:1;background:var(--field);border:1px solid var(--border);border-radius:var(--fs-radius-sm);color:var(--txt);padding:10px 12px;font-size:14px;font-family:inherit}
.gate{padding:24px;text-align:center;color:var(--muted);display:flex;flex-direction:column;gap:14px;align-items:center}

/* modal */
.modal{position:fixed;inset:0;z-index:40;background:var(--fs-scrim);display:flex;align-items:center;justify-content:center;padding:18px}
.modal-card{width:min(520px,96vw);max-height:92vh;overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:var(--fs-radius-lg);box-shadow:var(--fs-shadow-xl)}
#report-form{padding:18px;display:flex;flex-direction:column;gap:13px}
#report-form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--muted)}
#report-form select,#report-form input,#report-form textarea{
  background:var(--field);border:1px solid var(--border);border-radius:var(--fs-radius-sm);color:var(--txt);padding:10px 12px;font-size:14px;font-family:inherit}
#report-form textarea{resize:vertical}
.modal-actions{display:flex;align-items:center;gap:12px}
.rstatus{font-size:13px;color:var(--muted)}
.rstatus.ok{color:var(--good)} .rstatus.bad{color:#ffb3bd}

.acct-body{padding:14px 20px 18px;display:flex;flex-direction:column;gap:2px}
#account-modal .modal-card{width:min(520px,94vw)}
/* avatar header (first thing) + its own pencil */
.acct-avatarbar{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0 2px}
.acct-avatarwrap{position:relative;width:84px;height:84px}
.acct-avatar.xl{width:84px;height:84px;font-size:28px;background-size:cover;background-position:center}
.acct-avatar-pencil{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--panel);background:var(--fs-grad-violet,#7E5BE6);color:#fff;cursor:pointer;font-size:13px;box-shadow:0 0 0 1px var(--fs-border-gold)}
.acct-avatar-pencil:hover{filter:brightness(1.08)}
/* avatar picker */
.acct-picker{margin:4px 0 2px;padding:12px;border:1px solid var(--border);border-radius:var(--fs-radius-md);background:var(--panel2)}
.acct-picker-head{font-size:11px;color:var(--muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:.06em}
.acct-preset-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.acct-preset{appearance:none;border:2px solid transparent;background:none;border-radius:50%;padding:0;cursor:pointer;line-height:0}
.acct-preset img{width:100%;aspect-ratio:1/1;border-radius:50%;display:block}
.acct-preset:hover{border-color:var(--acc)}
.acct-picker-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.btn.ghost{background:none;color:var(--muted)}
.btn.ghost:hover{color:var(--txt)}
/* compact two-column rows with inline pencil-edit; space reserved so nothing reflows */
.acct-inline{display:grid;grid-template-columns:84px 1fr;align-items:center;column-gap:14px;row-gap:2px;padding:8px 0}
.acct-inline+.acct-inline{border-top:1px solid var(--border)}
.acct-inline .acct-label{font-weight:var(--fs-w-medium);color:var(--txt);font-size:13.5px}
.acct-control{display:flex;align-items:center;gap:8px;min-width:0;min-height:38px}
.acct-view{display:flex;align-items:center;gap:6px;min-width:0;flex:1}
.acct-value{color:var(--txt);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-pencil{appearance:none;background:none;border:none;cursor:pointer;color:var(--muted);font-size:13px;line-height:1;padding:5px;border-radius:6px;flex:none}
.acct-pencil:hover{color:var(--acc);background:var(--field)}
.acct-editrow{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.acct-editrow input{flex:1;min-width:0;background:var(--field);border:1px solid var(--border);border-radius:var(--fs-radius-sm);color:var(--txt);padding:8px 10px;font-size:14px;font-family:inherit}
.acct-editrow .btn{padding:8px 14px;white-space:nowrap}
.acct-save{visibility:hidden}
.acct-save.show{visibility:visible}
.acct-x{appearance:none;background:none;border:none;cursor:pointer;color:var(--muted);font-size:18px;line-height:1;padding:0 4px;flex:none}
.acct-x:hover{color:var(--txt)}
.acct-inline .rstatus{grid-column:1/-1;margin:0;min-height:1.1em}
.acct-label{display:flex;align-items:center;gap:8px;font-weight:var(--fs-w-medium);color:var(--txt)}
.soon{font-size:10px;font-weight:var(--fs-w-bold);letter-spacing:.06em;text-transform:uppercase;
  color:var(--fs-gold-200);background:var(--fs-gold-soft);border:1px solid var(--fs-border-gold);
  border-radius:var(--fs-radius-pill);padding:2px 8px;line-height:1.4}
.acct-field.is-soon .acct-label{color:var(--fs-text-subtle)}
.acct-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;
  background:var(--fs-grad-violet);color:#fff;font-weight:var(--fs-w-bold);font-size:14px;box-shadow:0 0 0 1px var(--fs-border-gold)}
.acct-row input:disabled,.acct-row .btn:disabled,.acct-row .btn[disabled]{
  background:var(--field);color:var(--fs-text-subtle);border-color:var(--border);opacity:.7;cursor:not-allowed}
.acct-field{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--muted)}
.acct-row{display:flex;gap:10px;align-items:center}
.acct-row input{flex:1;background:var(--field);border:1px solid var(--border);border-radius:var(--fs-radius-sm);color:var(--txt);padding:10px 12px;font-size:14px;font-family:inherit}
.acct-row .btn{white-space:nowrap}
.acct-hint{font-size:12px;color:var(--muted);opacity:.85}
.acct-hint code{background:var(--field);border:1px solid var(--border);border-radius:5px;padding:1px 5px}
.acct-hr{border:none;border-top:1px solid var(--border);margin:12px 0 4px}
.acct-signout-row{display:flex;justify-content:flex-end;margin-top:8px}
.signout-modal{color:var(--muted)}
.signout-modal:hover{color:var(--txt);border-color:var(--acc);text-decoration:none}

/* signed-in greeting (above the destination tiles) */
.greeting{max-width:1080px;margin:4px auto 16px;padding:0 4px;
  font-size:21px;font-weight:var(--fs-w-semibold);color:var(--txt);letter-spacing:-.3px;line-height:1.2}
.greeting .g-sub{display:block;margin-top:3px;font-size:13px;font-weight:var(--fs-w-regular,400);
  color:var(--muted);letter-spacing:0}

/* Quick Connect helper — CTA under the tiles + step modal */
.qc-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  margin:18px auto 0;background:none;border:1px dashed var(--border);border-radius:var(--fs-radius-md);
  padding:12px 16px;color:var(--muted);font-family:inherit;font-size:14px;cursor:pointer;
  transition:border-color var(--fs-dur-fast),color var(--fs-dur-fast),background var(--fs-dur-base)}
.qc-cta:hover{border-color:var(--acc);color:var(--txt);background:var(--panel)}
.qc-cta svg{width:20px;height:20px;flex:none;color:var(--acc)}
.qc-cta b{color:var(--txt);font-weight:var(--fs-w-semibold)}
#qc-modal .modal-card{width:min(440px,94vw)}
.qc-body{padding:18px 20px 20px}
.qc-intro{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.5}
.qc-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.qc-steps li{display:flex;gap:12px;align-items:flex-start}
.qc-num{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--fs-grad-violet);color:#fff;font-weight:var(--fs-w-bold);font-size:13px;
  box-shadow:0 0 0 1px var(--fs-border-gold)}
.qc-steps li div{padding-top:2px;font-size:14px;line-height:1.5;color:var(--txt)}
.qc-steps li b{font-weight:var(--fs-w-semibold)}
.qc-foot{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--border);
  color:var(--muted);font-size:13px;line-height:1.5}
.qc-foot b{color:var(--txt);font-weight:var(--fs-w-semibold)}
@media(max-width:600px){.greeting{font-size:18px;margin:2px auto 12px}}

/* app-launch overlay — instant feedback on tile click; persists through the SSO redirect chain */
.launch{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--bg)}
.launch::after{content:"";position:absolute;inset:0;background:var(--fs-grad-spotlight);pointer-events:none}
.launch-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.launch-logo{height:54px;width:auto;animation:launch-pulse 1.7s var(--fs-ease-standard) infinite}
.launch-spin{width:32px;height:32px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--acc);animation:launch-spin .8s linear infinite}
.launch-title{margin:4px 0 0;font-size:18px;font-weight:var(--fs-w-semibold);color:var(--txt)}
.launch-sub{margin:0;font-size:13px;color:var(--muted)}
@keyframes launch-spin{to{transform:rotate(360deg)}}
@keyframes launch-pulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}

.hidden{display:none!important}
@media(max-width:560px){.donate-cols{grid-template-columns:1fr}.tier-bar{grid-template-columns:repeat(3,1fr)}.crypto-pane{grid-template-columns:1fr}.help{grid-template-columns:1fr}}
@media(max-width:600px){h1{font-size:30px}.sub{font-size:15px}.top{padding:10px 14px}.wrap{padding:6px 14px 70px}
  .topnav{gap:10px}.dest-grid{gap:12px}
  .dest-open{padding:0}.dest-open img.ic{width:100%;height:auto}.dest-open b{font-size:16px;padding:12px 10px}}