/* ==========================================================================
   Rakion GG — player site
   Same design language as RUM (the admin panel): Discord-like dark greys,
   purple accent, soft radii, quiet borders. Minimal and clean.
   ========================================================================== */

:root{
  /* surfaces — Discord-like greys */
  --bg:#1a1b1e;
  --surface:#232428;
  --surface-2:#2b2d31;
  --surface-3:#35373c;

  /* text */
  --tx:#f2f3f5;
  --tx-2:#b5bac1;
  --tx-3:#80848e;

  /* lines */
  --line:#2e3035;
  --line-2:#3f4147;

  /* brand — Discord blurple family */
  --accent:#8b5cf6;
  --accent-2:#a78bfa;
  --accent-soft:rgba(139,92,246,.14);

  --r-sm:8px; --r:12px; --r-lg:16px;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
  --shadow-lg:0 12px 40px rgba(0,0,0,.5);
}

*,*::before,*::after{box-sizing:border-box}
/* clip horizontal overflow (e.g. the off-canvas nav drawer parked off the right
   edge). The nav is position:fixed (no :sticky in play), so this is safe. */
/* clip (not hidden): hidden turns html/body into scroll containers and breaks
   position:sticky (GGpedia's index column). Old browsers fall back to hidden. */
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--tx);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* keyboard-only focus ring (mouse clicks stay clean via :focus-visible) */
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:4px}
.rk-row.clickable:focus-visible{outline:2px solid var(--accent-2);outline-offset:-2px}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2b2f38;border:3px solid var(--bg);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#3b414d}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:46px;padding:0 22px;border-radius:var(--r-sm);border:0;cursor:pointer;
  font:inherit;font-size:15px;font-weight:600;white-space:nowrap;
  transition:background .15s,border-color .15s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{background:rgba(35,36,40,.55);color:var(--tx);
  border:1px solid var(--line-2);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:var(--surface-3);border-color:#4b4e55}
.btn-sm{height:38px;padding:0 16px;font-size:14px}

/* ---------------- navbar ---------------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;
  background:rgba(26,27,30,.78);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(46,48,53,.7)}
.nav .wrap{height:64px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:16px;letter-spacing:-.01em}
.brand .mark{width:32px;height:32px;border-radius:9px;flex:none;
  background:linear-gradient(145deg,#2a2d36,#1a1c22);color:var(--accent);
  border:1px solid var(--line-2);display:grid;place-items:center;
  font-size:11px;font-weight:800;letter-spacing:.5px}
.brand span small{display:block;font-size:11px;font-weight:400;color:var(--tx-3);line-height:1.2}
.nav-links{display:flex;gap:4px;margin-left:8px}
.nav-links a{padding:8px 13px;border-radius:var(--r-sm);font-size:14px;font-weight:500;
  color:var(--tx-2);transition:background .13s,color .13s}
.nav-links a:hover{background:var(--surface-3);color:var(--tx)}
.nav-links a.active,.nav-drawer a.active{color:var(--accent-2)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}

/* mobile nav: hamburger + slide-in drawer (hidden on desktop) */
.nav-burger{display:none;width:40px;height:40px;flex:none;place-items:center;cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:transparent;color:var(--tx-2)}
.nav-burger:hover{background:var(--surface-3);color:var(--tx)}
.nav-scrim{position:fixed;inset:0;z-index:59;background:rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transition:opacity .2s}
.nav-scrim.show{opacity:1;pointer-events:auto}
.nav-drawer{position:fixed;top:0;inset-inline-end:0;z-index:60;width:min(78vw,300px);height:100%;
  display:flex;flex-direction:column;gap:4px;padding:78px 16px 24px;
  background:var(--surface);border-inline-start:1px solid var(--line);box-shadow:var(--shadow-lg);
  transform:translateX(100%);transition:transform .22s ease;overflow-y:auto}
html[dir=rtl] .nav-drawer{transform:translateX(-100%)}
.nav-drawer.open{transform:translateX(0)}
.nav-drawer a{padding:13px 14px;border-radius:var(--r-sm);font-size:15px;font-weight:600;
  color:var(--tx-2)}
.nav-drawer a:hover{background:var(--surface-3);color:var(--tx)}
.nav-drawer .drawer-login{margin-top:10px;color:#fff;text-align:center;justify-content:center}

/* ---------------- hero ---------------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;
  padding:140px 0 90px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("/img/ui/lobby/img_rakion_bg.png") center 22% / cover no-repeat #131316}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to bottom,rgba(26,27,30,.55),rgba(26,27,30,.15) 30%,var(--bg) 96%),
  linear-gradient(100deg,rgba(21,20,28,.94) 22%,rgba(21,20,28,.55) 48%,rgba(139,92,246,.10) 100%)}
.hero-in{max-width:560px}
.badge{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;margin-bottom:22px;
  border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-2);background:var(--accent-soft);border:1px solid rgba(139,92,246,.3)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-2);
  animation:badge-pulse 1.8s ease-out infinite}
@keyframes badge-pulse{
  0%{box-shadow:0 0 0 0 rgba(167,139,250,.65),0 0 8px var(--accent-2)}
  70%{box-shadow:0 0 0 9px rgba(167,139,250,0),0 0 8px var(--accent-2)}
  100%{box-shadow:0 0 0 0 rgba(167,139,250,0),0 0 8px var(--accent-2)}
}
.hero h1{margin:0 0 18px;font-size:56px;line-height:1.06;font-weight:800;letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--accent-2)}
.hero p{margin:0 0 30px;max-width:460px;font-size:16.5px;color:var(--tx-2)}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px}
.hero-note{margin-top:20px;font-size:13px;color:var(--tx-3)}

/* ---------------- feature sections ---------------- */
.features{padding-top:40px;padding-bottom:10px}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
  padding:64px 0}
.feature .art{position:relative;aspect-ratio:16/10;border-radius:var(--r-lg);
  border:1px solid var(--line-2);box-shadow:var(--shadow-lg);
  background-size:cover;background-position:center 18%;overflow:hidden}
.feature .art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(26,27,30,.35),transparent 45%);
  border-radius:inherit}
.feature.rev .art{order:2}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-2);margin:0 0 12px}
.feature h2{margin:0 0 14px;font-size:32px;line-height:1.15;font-weight:750;letter-spacing:-.02em}
.feature p{margin:0;color:var(--tx-2);max-width:440px}
.feature ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.feature li{display:flex;gap:10px;align-items:baseline;color:var(--tx-2);font-size:14.5px}
.feature li::before{content:"✓";color:var(--accent-2);font-weight:700;flex:none}

/* ---------------- CTA band ---------------- */
.cta{margin:60px 0 90px}
.cta-card{position:relative;overflow:hidden;text-align:center;
  padding:64px 32px;border-radius:20px;border:1px solid var(--line-2);
  background:radial-gradient(600px 260px at 50% -40%,rgba(139,92,246,.28),transparent 70%),var(--surface)}
.cta-card h2{margin:0 0 10px;font-size:34px;font-weight:800;letter-spacing:-.02em}
.cta-card p{margin:0 auto 28px;max-width:420px;color:var(--tx-2)}
.cta-card .hero-btns{justify-content:center}

/* ---------------- footer ---------------- */
footer{border-top:1px solid var(--line);background:#161719}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding:52px 0 40px}
.foot-grid .tag{margin:14px 0 0;font-size:13.5px;color:var(--tx-3);max-width:280px}
.foot-col h4{margin:4px 0 14px;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-3)}
.foot-col a{display:block;padding:5px 0;font-size:14px;color:var(--tx-2)}
.foot-col a:hover{color:var(--accent-2)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  padding:18px 0 26px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--tx-3)}

/* ---------------- "coming soon" page ---------------- */
.soon{min-height:100vh;display:grid;place-items:center;padding:24px}
.soon-card{text-align:center;max-width:420px;padding:56px 40px;
  border-radius:20px;border:1px solid var(--line-2);background:var(--surface);
  box-shadow:var(--shadow-lg)}
.soon-card .mark{width:52px;height:52px;margin:0 auto 20px;border-radius:14px;
  background:var(--accent-soft);color:var(--accent-2);border:1px solid rgba(139,92,246,.3);
  display:grid;place-items:center;font-size:15px;font-weight:800}
.soon-card h1{margin:0 0 10px;font-size:24px;letter-spacing:-.02em}
.soon-card p{margin:0 0 26px;color:var(--tx-2);font-size:14.5px}

/* ---------------- language selector ---------------- */
.lang-sel{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px;
  border-radius:var(--r-sm);border:1px solid var(--line-2);background:rgba(35,36,40,.55);
  color:var(--tx-2);cursor:pointer;font:inherit;font-size:13px;font-weight:600;
  transition:background .13s,color .13s}
.lang-btn:hover{background:var(--surface-3);color:var(--tx)}
.lang-btn img{width:20px;height:15px;border-radius:3px;object-fit:cover}
.lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:60;min-width:180px;
  display:none;flex-direction:column;padding:6px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line-2);box-shadow:var(--shadow-lg)}
.lang-sel.open .lang-menu{display:flex}
.lang-menu button{display:flex;align-items:center;gap:10px;padding:9px 11px;border:0;
  border-radius:var(--r-sm);background:transparent;color:var(--tx-2);cursor:pointer;
  font:inherit;font-size:14px;text-align:start;transition:background .12s,color .12s}
.lang-menu button:hover{background:var(--surface-3);color:var(--tx)}
.lang-menu button.on{background:var(--accent-soft);color:var(--accent-2);font-weight:600}
.lang-menu img{width:20px;height:15px;border-radius:3px;object-fit:cover;flex:none}

/* ---------------- (New) pill ---------------- */
.pill-new{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-2);background:var(--accent-soft);border:1px solid rgba(139,92,246,.3)}

/* ---------------- auth pages (login / register) ----------------
   Centered card over a full-bleed background (no left/right split). */
.auth{min-height:100vh;position:relative;display:flex;flex-direction:column;padding:24px}
.auth-art{position:fixed;inset:0;z-index:-2;
  background:url("/img/ui/lobby/img_bg_select_world.png") center 30% / cover no-repeat #131316}
.auth-art::after{content:"";position:fixed;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(26,27,30,.72),rgba(26,27,30,.92)),
  radial-gradient(60% 55% at 50% 28%,rgba(139,92,246,.20),transparent 70%)}
.auth-art .quote{display:none} /* the card is centered now — the side quote is dropped */
.auth-side{flex:1;display:flex;flex-direction:column;width:100%;max-width:960px;margin:0 auto;position:relative}
.auth-top{display:flex;align-items:center;justify-content:space-between;width:100%}
.auth-card{margin:auto;width:100%;max-width:440px;padding:30px 30px 34px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:22px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);transition:max-width .3s cubic-bezier(.5,0,.2,1)}
.auth-card .mark-lg{width:52px;height:52px;border-radius:14px;margin-bottom:22px;
  background:linear-gradient(145deg,#2a2d36,#1a1c22);color:var(--accent);
  border:1px solid var(--line-2);display:grid;place-items:center;font-size:15px;font-weight:800}
.auth-card h1{margin:0 0 8px;font-size:28px;font-weight:800;letter-spacing:-.02em}
.auth-card .sub{margin:0 0 26px;color:var(--tx-2);font-size:14.5px}
/* unified auth: one card, constant size for both modes (no jarring resize) —
   min-height keeps the short create-step-1 the same footprint as sign-in */
.auth-combined{max-width:1014px;min-height:600px;padding:44px 56px 46px}
/* create-account content spans the full card width — same footprint as sign-in,
   empty space is fine so nothing feels cramped */
#panelCreate{max-width:none;margin-inline:0}
.signin-grid{display:grid;grid-template-columns:minmax(0,440px) 300px;justify-content:space-between;gap:56px;align-items:start}
.signin-main{min-width:0}
.signin-qr{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;
  padding-left:56px;border-left:1px solid var(--line);align-self:stretch;justify-content:center}
.qr-cap{display:flex;flex-direction:column;gap:5px}
.qr-cap b{font-size:15px;font-weight:700}
.qr-cap-t{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.qr-cap-t svg{color:var(--accent-2);flex:none}
.qr-req{display:inline-flex;align-items:center;gap:2px;margin:-6px auto 0;padding:3px 6px;border-radius:99px;
  background:var(--surface-2);border:1px solid var(--line)}
.qr-req-i{position:relative;display:grid;place-items:center;width:30px;height:26px;border-radius:99px;
  color:#4ade80;cursor:help;outline:0;transition:background .15s}
.qr-req-i + .qr-req-i::before{content:"";position:absolute;inset-inline-start:-1px;top:7px;bottom:7px;width:1px;background:var(--line-2)}
.qr-req-i:hover,.qr-req-i:focus-visible{background:var(--surface-3)}
/* tooltip: the (translated) aria-label, above the icon */
.qr-req-i::after{content:attr(aria-label);position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translate(-50%,4px);padding:5px 9px;border-radius:7px;white-space:nowrap;pointer-events:none;
  background:#111214;border:1px solid var(--line-2);color:var(--tx);font-size:12px;font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,.45);opacity:0;transition:opacity .15s,transform .15s;z-index:5}
.qr-req-i:hover::after,.qr-req-i:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.qr-cap span{color:var(--tx-2);font-size:12.5px;line-height:1.45}

/* the QR + its ring timer: a line draws itself around the QR in 15s; when it
   closes the loop, qr-signin.js swaps in a new QR (and restarts the line) */
.qr-stage{position:relative;width:220px;height:220px;flex:none}
.qr-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.qr-ring path{fill:none;stroke-width:4;stroke-linecap:round}
.qr-ring-track{stroke:var(--line-2)}
.qr-ring-bar{stroke:var(--accent-2);stroke-dasharray:100;stroke-dashoffset:100;
  filter:drop-shadow(0 0 5px rgba(167,139,250,.55))}
.qr-ring-bar.claim{stroke:#fbbf24;filter:drop-shadow(0 0 5px rgba(251,191,36,.5))}
@keyframes qrRingDraw{
  0%{stroke-dashoffset:100}
  80%{stroke:var(--accent-2)}
  100%{stroke-dashoffset:0;stroke:#f59e0b}}
.qr-ring-bar.claim{animation-name:qrRingDraw}
.signin-qr .qr-frame{position:absolute;inset:14px;margin:0;padding:12px;border:0;border-radius:18px;
  background:#fff;cursor:pointer;box-shadow:0 10px 32px rgba(0,0,0,.5);display:grid;place-items:center;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,filter .3s,opacity .3s}
.signin-qr .qr-frame:hover{transform:scale(1.02);box-shadow:0 14px 40px rgba(0,0,0,.55)}
.signin-qr .qr-frame.wiggle{animation:qrWiggle .5s cubic-bezier(.36,.07,.19,.97)}
.qr-code{display:block;width:100%;height:100%}
.qr-code svg{display:block;width:100%;height:100%}
.qr-logo{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:11px;
  background:#1a1b1e;color:var(--accent);display:grid;place-items:center;font-weight:800;font-size:15px;
  box-shadow:0 0 0 5px #fff}
/* loading: a soft shimmer instead of a blank white square */
.qr-stage[data-state=loading] .qr-code,.qr-stage[data-state=off] .qr-code{opacity:.12}
.qr-stage:not([data-state=qr]):not([data-state=loading]):not([data-state=tour]) .qr-frame{filter:blur(6px);opacity:.28;pointer-events:none}
.qr-stage[data-state=tour]:has(.qr-over:not(:empty)) .qr-frame{filter:blur(6px);opacity:.28}
.qr-stage[data-state=idle] .qr-frame,.qr-stage[data-state=error] .qr-frame{pointer-events:none}
.qr-stage[data-state=idle],.qr-stage[data-state=error]{cursor:pointer}
/* state overlay (scanned · totp · ok · denied · idle) */
.qr-over{position:absolute;inset:14px;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:10px 12px;border-radius:18px;text-align:center}
.qr-stage:not([data-state=qr]):not([data-state=loading]):not([data-state=off]) .qr-over:not(:empty){display:flex;
  background:rgba(26,27,30,.78);backdrop-filter:blur(2px);animation:qoIn .28s cubic-bezier(.34,1.3,.5,1)}
@keyframes qoIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.qr-over p{margin:0;font-size:13px;line-height:1.4;color:var(--tx)}
.qo-ico{font-size:22px;line-height:1}
.qo-ico.ok{color:#4ade80;font-size:34px;font-weight:800}
.qo-hint{font-size:11.5px !important;color:var(--tx-3) !important;line-height:1.35 !important}
.qo-as{font-size:12.5px !important;color:var(--tx-2) !important}
.qo-as b{color:var(--tx)}
.qo-code{font-size:42px;font-weight:800;letter-spacing:.06em;color:#fbbf24;line-height:1.05;
  font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(251,191,36,.35)}
.qr-over .linkbtn{font-size:12.5px;align-self:center}
.qo-totp{display:flex;gap:6px;width:100%}
.qo-totp input{flex:1;min-width:0;height:38px;padding:0 10px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--bg);color:var(--tx);font:inherit;font-size:16px;letter-spacing:.2em;text-align:center}
.qo-err{color:#fca5a5 !important;font-size:12px !important}
/* "?" — opens the guided tour; pulses until the first time it's used */
.qr-help{align-self:flex-end;flex:none;width:30px;height:30px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--tx-2);font:inherit;font-weight:800;font-size:14px;
  display:grid;place-items:center;transition:color .15s,border-color .15s,transform .15s}
.qr-help:hover{color:#fff;border-color:var(--accent);transform:scale(1.08)}
.qr-help{animation:helpSoft 3.2s ease-in-out infinite}
.qr-help.pulse{animation:helpPulse 2s ease-in-out infinite;color:#fff;border-color:var(--accent)}
@keyframes helpSoft{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.22);border-color:var(--line-2)}
  50%{box-shadow:0 0 0 5px rgba(139,92,246,0);border-color:rgba(139,92,246,.55)}}
@keyframes helpPulse{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.55)}50%{box-shadow:0 0 0 8px rgba(139,92,246,0)}}
.qr-dc{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.qr-dc[hidden],.qr-dc-form[hidden]{display:none}
.qr-dc .linkbtn{font-size:12.5px;color:var(--accent-2);align-self:center}
.qr-dc-form{display:flex;gap:6px;width:100%}
.qr-dc-form input{flex:1;min-width:0;height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--bg);color:var(--tx);font:inherit;font-size:14px}
.qr-dc-form .btn{height:36px}
.qr-mobile{display:none}
/* brand without the tagline (auth pages): the name sits centred on the mark */
.brand-solo span:not(.mark){line-height:1;font-size:17px}
/* rotating security tip under "Welcome back" (login.js) — fixed height so the
   form never jumps when a longer tip comes in */
.sec-tip{display:flex;align-items:center;gap:8px;height:22px;margin:0 0 24px;font-size:13.5px;line-height:22px;color:var(--tx-2)}
.sec-tip svg{flex:none;color:#4ade80}
/* always ONE line: login.js shrinks the font to fit; ellipsis is the last resort */
.sec-tip-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .28s,transform .28s}
.sec-tip-t.out{opacity:0;transform:translateY(-3px)}
/* phone arrived from scanning a PC's QR: say why it must sign in first */
.qrnext{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin:0 0 22px;border-radius:14px;
  background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.45);animation:qoIn .35s cubic-bezier(.34,1.3,.5,1)}
.qrnext[hidden]{display:none}
.qrnext-ico{font-size:26px;line-height:1}
.qrnext b{display:block;font-size:15px;margin-bottom:3px;color:#fde68a}
.qrnext span{display:block;font-size:13px;line-height:1.45;color:var(--tx-2)}
body.from-qr .qr-mobile,body.from-qr .auth-alt{display:none}
/* remember me */
.remember{display:flex;align-items:center;gap:9px;margin:-4px 0 16px;font-size:13.5px;color:var(--tx-2);cursor:pointer;
  width:max-content;max-width:100%}
.remember input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer;margin:0}
@keyframes qrWiggle{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
/* panel swap: a quick slide + fade in the travel direction */
@keyframes panelInR{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes panelInL{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.auth-panel.slide-r{animation:panelInR .44s cubic-bezier(.4,0,.15,1)}
.auth-panel.slide-l{animation:panelInL .44s cubic-bezier(.4,0,.15,1)}
/* between phone and the full 1014px card: the original compact proportions */
@media (max-width:980px){
  .auth-combined{padding:32px 30px 34px}
  .signin-grid{grid-template-columns:minmax(0,1fr) 250px;gap:34px}
  .signin-qr{padding-left:34px}
}
@media (max-width:640px){
  .auth-combined{min-height:auto;padding:26px 20px 28px}
  .signin-grid{grid-template-columns:1fr;gap:26px}
  .signin-qr{display:none}
  .qr-mobile{display:block;padding:14px 16px;border-radius:12px;background:var(--accent-soft);
    border:1px solid rgba(139,92,246,.3);color:var(--tx-2);font-size:13px;line-height:1.5}
}
.auth-toggle{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:0 0 24px;
  padding:4px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.auth-tab{position:relative;z-index:1;border:0;background:transparent;cursor:pointer;font:inherit;
  padding:9px 8px;border-radius:999px;font-size:14px;font-weight:600;color:var(--tx-2);transition:color .2s}
.auth-tab.on{color:#fff}
.auth-toggle-ind{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);
  border-radius:999px;background:var(--accent-2);box-shadow:0 4px 14px rgba(139,92,246,.4);
  transition:transform .36s cubic-bezier(.5,0,.2,1)}
.auth-panel[hidden]{display:none}
.mark-lg.ok{color:#86efac}
/* registration: email-verify gate (step 1) then the rest (step 2) */
.email-row{display:flex;gap:8px;align-items:stretch}
.email-row input{flex:1;min-width:0}
.email-row .btn{flex:0 0 auto;white-space:nowrap}
.email-tick{color:#4ade80;font-weight:800}
.verify-box{margin:-4px 0 16px;padding:12px;border-radius:var(--r-sm);
  background:var(--accent-soft);border:1px solid rgba(139,92,246,.3);display:flex;flex-direction:column;gap:10px}
.verify-box[hidden]{display:none}
.linkbtn{align-self:flex-start;border:0;background:transparent;color:var(--accent-2);font:inherit;
  font-size:13px;font-weight:600;cursor:pointer;padding:0}
.linkbtn:hover{text-decoration:underline}
.reg-rest[hidden]{display:none}
/* two-step sign-up: required → optional */
#regStep1[hidden],#regStep2[hidden]{display:none}
.reg-steps{display:flex;align-items:center;gap:8px;justify-content:center;margin:0 0 22px}
.reg-steps b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:800;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--tx-3);transition:background .2s,color .2s,border-color .2s}
.reg-steps b.on{background:var(--accent);border-color:var(--accent);color:#fff}
.reg-steps i{width:46px;height:2px;border-radius:2px;background:var(--line-2);position:relative;overflow:hidden}
.reg-steps i.fill::after{content:"";position:absolute;inset:0;background:var(--accent-2)}
.reg-step2-sub{margin:-4px 0 20px}
.reg-step2-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.reg-step2-foot .linkbtn{font-size:14px}
/* 3-phase stepper (email · details · human check) */
.reg-phases{display:flex;align-items:center;gap:8px;justify-content:center;margin:2px 0 22px}
.reg-phases b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--tx-3);
  transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.reg-phases b.on{background:var(--accent);border-color:var(--accent);color:#fff}
.reg-phases b.cur{box-shadow:0 0 0 4px var(--accent-soft)}
.reg-phases i{width:40px;height:2px;border-radius:2px;background:var(--line-2);overflow:hidden;position:relative}
.reg-phases i::after{content:"";position:absolute;inset:0;background:var(--accent-2);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s}
.reg-phases i.fill::after{transform:scaleX(1)}
.pw-hint{margin-top:6px;font-size:12.5px;color:var(--tx-3);min-height:16px;transition:color .2s}
.pw-hint.ok{color:#4ade80}
/* phase 3 · human-check mini game (tap the class) */
.cap-q{font-size:16px;font-weight:600;text-align:center;margin:6px 0 16px;color:var(--tx)}
.cap-q b{color:var(--accent-2);text-transform:capitalize}
.cap-faces{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:14px}
.cap-face{padding:0;border:2px solid var(--line-2);border-radius:14px;background:var(--surface-2);cursor:pointer;overflow:hidden;
  aspect-ratio:1;transition:transform .15s,border-color .15s,box-shadow .15s}
.cap-face img{width:100%;height:100%;object-fit:cover;display:block}
.cap-face:hover{transform:translateY(-3px) scale(1.03);border-color:var(--accent)}
.cap-face.ok{border-color:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.3)}
.cap-face.bad{border-color:#f87171;animation:cap-shake .4s}
.cap-face[disabled]{opacity:.4;cursor:default;transform:none}
@keyframes cap-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.cap-result{text-align:center;font-size:13.5px;font-weight:700;min-height:20px;margin-bottom:12px}
.cap-result.ok{color:#4ade80}
.cap-result.bad{color:#f87171}
/* phone: a custom dial dropdown (flag + code) + the number input */
.phone-row{display:flex;gap:8px;align-items:stretch}
.phone-row input[type=tel]{flex:1;min-width:0}
.dial-sel{position:relative;flex:0 0 auto}
.dial-btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 12px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg);color:var(--tx);font:inherit;font-size:14.5px}
.dial-btn:hover{border-color:var(--accent)}
.dial-flag{width:22px;height:16px;border-radius:3px;object-fit:cover;flex:0 0 auto;background:var(--surface-2)}
.dial-code{font-weight:650;font-variant-numeric:tabular-nums}
.dial-btn svg{color:var(--tx-3)}
.dial-sel.open .dial-btn{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.dial-menu{position:absolute;z-index:20;top:calc(100% + 6px);inset-inline-start:0;width:min(300px,82vw);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:8px;display:none}
.dial-sel.open .dial-menu{display:block}
.dial-search{width:100%;height:38px;padding:0 12px;margin-bottom:6px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--bg);color:var(--tx);font:inherit;font-size:14px;outline:none}
.dial-search:focus{border-color:var(--accent)}
.dial-list{max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.dial-opt{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:8px;
  background:transparent;color:var(--tx);font:inherit;font-size:14px;cursor:pointer;text-align:start}
.dial-opt:hover{background:var(--surface-2)}
.dial-opt.on{background:var(--accent-soft);color:var(--accent-2)}
.dial-opt img{width:22px;height:16px;border-radius:3px;object-fit:cover;flex:0 0 auto}
.dial-opt .do-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dial-opt .do-d{color:var(--tx-3);font-variant-numeric:tabular-nums}
.dial-none{padding:10px;text-align:center;color:var(--tx-3)}

/* password strength meter — bars fill in with a little pop, label fades in */
.pw-meter{display:flex;align-items:center;gap:10px;margin-top:8px;min-height:16px}
.pw-bars{display:flex;gap:5px;flex:0 0 auto}
.pw-bars i{width:34px;height:5px;border-radius:99px;background:var(--surface-3);position:relative;overflow:hidden}
.pw-bars i::after{content:"";position:absolute;inset:0;border-radius:99px;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .35s cubic-bezier(.4,1.4,.5,1),background .3s}
.pw-label{font-size:12px;font-weight:700;letter-spacing:.02em;opacity:0;transition:opacity .3s,color .3s}
.pw-meter:not([data-level="0"]) .pw-label{opacity:1}
.pw-meter[data-level="1"] .pw-bars i:nth-child(1)::after{transform:scaleX(1);background:#f87171}
.pw-meter[data-level="1"] .pw-label{color:#f87171}
.pw-meter[data-level="2"] .pw-bars i:nth-child(-n+2)::after{transform:scaleX(1);background:#fbbf24}
.pw-meter[data-level="2"] .pw-label{color:#fbbf24}
.pw-meter[data-level="3"] .pw-bars i::after{transform:scaleX(1);background:#4ade80}
.pw-meter[data-level="3"] .pw-label{color:#4ade80}
@keyframes pw-pop{0%,100%{transform:scaleY(1)}45%{transform:scaleY(2.1)}}
.pw-meter[data-level="1"] .pw-bars i:nth-child(1),
.pw-meter[data-level="2"] .pw-bars i:nth-child(2),
.pw-meter[data-level="3"] .pw-bars i:nth-child(3){animation:pw-pop .4s ease}
@media (prefers-reduced-motion:reduce){ .pw-bars i::after{transition:none} .pw-bars i{animation:none!important} }
.login-forgot{display:block;margin:14px auto 0}
.reset-box{margin-top:10px}
.reset-box[hidden]{display:none}
/* QR sign-in option + placeholder */
.login-or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--tx-3);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:var(--line)}
#qrBtn{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.qr-box{margin-top:8px;text-align:center}
.qr-box[hidden]{display:none}
.qr-box .sub{text-align:center;margin-inline:auto;max-width:340px}
.qr-frame{display:inline-block;margin:8px auto 14px;padding:10px;border-radius:16px;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.45)}
.qr-svg{width:200px;height:200px;display:block}
.qr-note{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px;color:var(--tx-3);font-size:13px}
@media (prefers-reduced-motion:reduce){ .auth-toggle-ind{transition:none} }
.field{margin-bottom:16px}
.field label{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;font-weight:600;color:var(--tx-2);margin-bottom:7px;
  text-transform:uppercase;letter-spacing:.05em}
.field .hint{font-size:11.5px;color:var(--tx-3);text-transform:none;letter-spacing:0;font-weight:400}
.field input{width:100%;height:46px;padding:0 14px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--bg);color:var(--tx);font:inherit;font-size:15px;
  transition:border-color .13s,box-shadow .13s}
.field input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form-msg{display:none;padding:11px 13px;border-radius:var(--r-sm);font-size:13.5px;margin-bottom:16px}
.form-msg.show{display:block}
.form-msg.err{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.35);color:#fca5a5}
.form-msg.ok{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.35);color:#86efac}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.under-hint{margin-top:6px;font-size:12px;color:var(--tx-3)}
.field select{width:100%;height:46px;padding:0 12px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--bg);color:var(--tx);font:inherit;font-size:15px;
  transition:border-color .13s,box-shadow .13s}
.field select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field input[type=date]{color-scheme:dark}
.qr-img{width:150px;height:150px;border-radius:var(--r);margin:4px 0 10px;
  border:5px solid #fff;background:#fff}
.secret-key{font-size:12px;color:var(--tx-3);word-break:break-all;margin-top:4px}
.secret-key code{color:var(--accent-2);font-family:Consolas,monospace}
.auth-alt{margin-top:22px;text-align:center;font-size:14px;color:var(--tx-3)}
.auth-alt a{color:var(--accent-2);font-weight:600}
.auth-alt a:hover{text-decoration:underline}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.coming-note{display:flex;align-items:center;gap:10px;padding:11px 13px;margin-bottom:16px;
  border-radius:var(--r-sm);background:var(--accent-soft);border:1px solid rgba(139,92,246,.3);
  color:var(--accent-2);font-size:13.5px}
/* ===== welcome-pack: its own card that slides in under the main card ===== */
.gift-card{position:relative;width:100%;max-width:1014px;margin:14px auto 0;padding:20px 22px;
  border-radius:22px;background:var(--surface);border:1px solid var(--line-2);overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.4);
  opacity:0;transform:translateY(-14px) scale(.985);
  transition:opacity .38s cubic-bezier(.4,0,.15,1),transform .38s cubic-bezier(.34,1.3,.5,1)}
.gift-card[hidden]{display:none}
.gift-card.in{opacity:1;transform:none}
.gift-card h3{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx-3)}
.gift-glow{position:absolute;inset:-40% -10% auto;height:180px;pointer-events:none;
  background:radial-gradient(360px 120px at 50% 0,rgba(139,92,246,.22),transparent 70%)}
.gift-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.grow{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:14px;
  background:var(--bg);border:1px solid var(--line);
  transition:border-color .18s,transform .18s,background .18s}
.grow:hover{border-color:var(--accent);transform:translateY(-2px);background:var(--surface-2)}
.grow span{font-size:11.5px;color:var(--tx-3);text-transform:uppercase;letter-spacing:.04em}
.grow b{font-size:18px;color:var(--accent-2);font-variant-numeric:tabular-nums;line-height:1}
.gift-card.in .grow{animation:giftPop .5s both cubic-bezier(.34,1.4,.5,1)}
.gift-card.in .grow:nth-child(1){animation-delay:.06s}
.gift-card.in .grow:nth-child(2){animation-delay:.13s}
.gift-card.in .grow:nth-child(3){animation-delay:.20s}
.gift-card.in .grow:nth-child(4){animation-delay:.27s}
@keyframes giftPop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
@media (max-width:640px){ .gift-grid{grid-template-columns:1fr 1fr} }

/* ===== micro-interactions on the auth card ===== */
.field input:focus,.field select:focus{transform:translateY(-1px)}
.field input,.field select{transition:border-color .13s,box-shadow .13s,transform .13s}
.btn{transition:background .14s,transform .12s,box-shadow .16s,border-color .14s}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary:active{transform:translateY(0) scale(.985)}
.auth-tab{transition:color .2s,transform .12s}
.auth-tab:active{transform:scale(.97)}
.linkbtn{transition:color .15s,transform .12s}
.linkbtn:active{transform:scale(.96)}
.mark:hover{transform:rotate(-6deg) scale(1.05);transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
/* the current step number keeps a gentle heartbeat */
.reg-phases b.cur{animation:stepPulse 1.9s ease-in-out infinite}
@keyframes stepPulse{0%,100%{box-shadow:0 0 0 4px var(--accent-soft)}50%{box-shadow:0 0 0 7px var(--accent-soft)}}

/* ===== CHAOS MODE — Blue D wakes up on the login too ===== */
body.egg-chaos .auth-art{filter:hue-rotate(-48deg) saturate(1.3)}
body.egg-chaos .auth-card,body.egg-chaos .gift-card{border-color:rgba(251,191,36,.45);
  box-shadow:0 18px 48px rgba(245,158,11,.22)}
body.egg-chaos .qr-ring-bar{stroke:#fbbf24}
body.egg-chaos .qr-logo{color:#fbbf24}
body.egg-chaos .auth-side::after{content:"🦆";position:fixed;left:6%;bottom:8%;font-size:34px;
  z-index:5;pointer-events:none;animation:duckFloat 5s ease-in-out infinite;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
@keyframes duckFloat{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-16px) rotate(6deg)}}
@media (prefers-reduced-motion:reduce){
  .gift-card.in .grow,.reg-phases b.cur,.qr-help,.qr-help.pulse,body.egg-chaos .auth-side::after{animation:none}
  .auth-panel.slide-r,.auth-panel.slide-l{animation:none}
}

/* ---------------- panel ---------------- */
.papp{display:flex;height:100vh;overflow:hidden}
.sidebar{width:248px;flex:none;background:var(--surface);display:flex;flex-direction:column;
  border-inline-end:1px solid var(--line)}
.sidebar .brand{padding:22px 20px 18px}
.snav{flex:1;overflow-y:auto;padding:4px 12px;display:flex;flex-direction:column;gap:2px}
.snav a,.snav button{display:flex;align-items:center;gap:11px;height:42px;padding:0 12px;
  border:0;border-radius:var(--r-sm);background:transparent;color:var(--tx-2);cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:500;text-align:start;width:100%;
  transition:background .13s,color .13s}
.snav a:hover,.snav button:hover{background:var(--surface-3);color:var(--tx)}
.snav .active{background:var(--accent-soft);color:var(--accent-2);font-weight:600;
  box-shadow:inset 2px 0 0 var(--accent)}
html[dir=rtl] .snav .active{box-shadow:inset -2px 0 0 var(--accent)}
.snav .ico{width:18px;flex:none;display:grid;place-items:center}
.snav .lbl{flex:1;min-width:0}
.slabel{padding:2px 12px 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3)}
.sgroup{display:flex;flex-direction:column;gap:2px}
.sgroup[hidden]{display:none}
.snav .chev{transition:transform .18s;color:var(--tx-3)}
.snav .open>.chev{transform:rotate(180deg)}
.submenu{display:none;flex-direction:column;gap:2px;padding:2px 0 4px;
  margin-inline-start:17px;border-inline-start:1px solid var(--line-2)}
.submenu.open{display:flex}
.submenu a{height:36px;font-size:13.5px;margin-inline-start:8px;color:var(--tx-3)}
.snav .sep{height:1px;margin:10px 12px;background:var(--line);flex:none}
.sfoot{padding:12px;border-top:1px solid var(--line)}
.ucard{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r-sm)}
.ucard .ava{width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-2);font-weight:800;font-size:15px;
  border:1px solid rgba(139,92,246,.3);text-transform:uppercase}
.ucard .who{min-width:0;flex:1}
.ucard .who .n{font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ucard .who .r{font-size:11.5px;color:var(--tx-3)}
.ucard .out{width:32px;height:32px;flex:none;border:0;border-radius:var(--r-sm);cursor:pointer;
  background:transparent;color:var(--tx-3);display:grid;place-items:center;transition:.13s}
.ucard .out:hover{background:rgba(248,113,113,.12);color:#f87171}
.gm-chip{display:inline-flex;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:#fbbf24;
  background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.35)}

.pmain{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.ptop{flex:none;display:flex;align-items:center;gap:14px;padding:16px 32px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.ptop h1{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em;flex:1;
  display:flex;align-items:center;gap:10px}
.burger{display:none;width:40px;height:40px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:transparent;color:var(--tx-2);cursor:pointer;place-items:center}
.pbody{flex:1;overflow-y:auto;padding:28px 32px 60px}
.pwrap{max-width:860px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;margin-bottom:18px}
.pcard h2{margin:0 0 6px;font-size:17px;font-weight:700;display:flex;align-items:center;gap:10px}
.pcard .desc{margin:0 0 18px;color:var(--tx-2);font-size:14px;max-width:520px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:18px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.tile .k{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3)}
.tile .v{margin-top:6px;font-size:22px;font-weight:750;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--accent-2)}
.tile .v.plain{color:var(--tx);font-size:16px;font-weight:600}
.hi-row{display:flex;align-items:center;gap:12px;margin:0 0 20px}
.hi-row h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em}
.form-narrow{max-width:420px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:18px 0}
.step-card{background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r);padding:16px}
.step-card .num{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-2);font-weight:800;font-size:13px;margin-bottom:10px}
.step-card .t{font-weight:650;font-size:14px;margin-bottom:4px}
.step-card .p{font-size:12.5px;color:var(--tx-3);line-height:1.5}
.qr-ph{width:150px;height:150px;border-radius:var(--r);border:1px dashed var(--line-2);
  background:repeating-conic-gradient(var(--surface-3) 0% 25%,var(--surface-2) 0% 50%) 0 0/14px 14px;
  opacity:.5;margin:4px 0 14px}
.sup-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.tier{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:0}
.tier.hot{border-color:rgba(139,92,246,.5);
  background:radial-gradient(300px 140px at 50% -30%,rgba(139,92,246,.18),transparent 70%),var(--surface)}
.tier .n{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2)}
.tier .pr{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:8px 0 14px}
.tier .pr small{font-size:13px;color:var(--tx-3);font-weight:500}
.tier ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:8px;flex:1}
.tier li{display:flex;gap:9px;align-items:baseline;color:var(--tx-2);font-size:13.5px}
.tier li::before{content:"✓";color:var(--accent-2);font-weight:700}
.center-soon{display:grid;place-items:center;text-align:center;padding:60px 20px}
.center-soon .art-mini{width:120px;height:120px;border-radius:24px;margin-bottom:20px;
  background:url("/img/ui/lobby/img_bg_forge.png") center 30% / cover;
  border:1px solid var(--line-2);box-shadow:var(--shadow-lg)}
.center-soon h2{margin:0 0 8px;font-size:22px;font-weight:750}
.center-soon p{margin:0;color:var(--tx-2);max-width:380px}

/* ---------------- download page ---------------- */
.dl-hero{position:relative;padding:150px 0 64px;overflow:hidden}
.dl-hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("/img/ui/lobby/img_lobby_selectworldbg.png") center 10% / cover no-repeat #131316}
.dl-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to bottom,rgba(26,27,30,.78),rgba(26,27,30,.5) 55%,var(--bg) 97%)}
.dl-hero .eyebrow{animation:rise .5s both}
.dl-hero h1{margin:0 0 12px;font-size:44px;font-weight:800;letter-spacing:-.03em;
  animation:rise .55s .05s both}
.dl-hero .sub{margin:0;color:var(--tx-2);max-width:460px;font-size:16px;
  animation:rise .6s .12s both}
.dl-main{padding-top:36px;padding-bottom:20px}
.dl-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start}
.dl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s}
.dl-card:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.35);
  box-shadow:0 14px 40px rgba(0,0,0,.45)}
.dl-card.primary{border-color:rgba(139,92,246,.4);
  background:radial-gradient(420px 200px at 18% -20%,rgba(139,92,246,.16),transparent 70%),var(--surface)}
.dl-head{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.dl-ico{width:52px;height:52px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-2);border:1px solid rgba(139,92,246,.3);
  transition:transform .3s cubic-bezier(.3,1.6,.4,1)}
.dl-card:hover .dl-ico{transform:rotate(-5deg) scale(1.06)}
.dl-ico.alt{background:var(--surface-2);color:var(--tx-2);border-color:var(--line-2)}
.dl-head h2{margin:0 0 7px;font-size:19px;letter-spacing:-.01em}
.dl-chips{display:flex;gap:6px;flex-wrap:wrap}
.chip-meta{padding:2px 9px;border-radius:999px;font-size:11.5px;color:var(--tx-3);
  background:var(--surface-2);border:1px solid var(--line)}
.dl-card .desc{color:var(--tx-2);font-size:14px;margin:0 0 18px}
.btn-dl:hover .dl-arrow{animation:dl-nudge .6s ease infinite}
@keyframes dl-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.copy-chip{padding:5px 13px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--tx-2);font:inherit;font-size:12px;font-weight:600;
  cursor:pointer;transition:border-color .18s,color .18s,background .18s,transform .12s}
.copy-chip:hover{border-color:var(--accent);color:var(--accent-2)}
.copy-chip:active{transform:scale(.93)}
.copy-chip.done{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.4);color:#4ade80}
.sec-t{margin:46px 0 16px;font-size:20px;font-weight:750;letter-spacing:-.01em}
.step-card{transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s}
.step-card:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.35)}
.step-card .num{transition:transform .25s cubic-bezier(.3,1.8,.4,1)}
.step-card:hover .num{transform:scale(1.15) rotate(-6deg)}
.req-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.req-grid .tile{transition:transform .3s,border-color .3s}
.req-grid .tile:hover{transform:translateY(-2px);border-color:rgba(139,92,246,.3)}

/* ---------------- rankings page ---------------- */
.rk-hero::before{background-image:url("/img/ui/lobby/img_bg_select_character.png");
  background-position:center 26%}
.dl-solo{max-width:680px;margin:0 auto}
.rk-top{display:flex;justify-content:center;margin-bottom:18px}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:11px;
  background:var(--surface);border:1px solid var(--line-2)}
.seg button{padding:8px 20px;border:0;border-radius:8px;background:transparent;
  color:var(--tx-2);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background .18s,color .18s,transform .12s}
.seg button:hover{color:var(--tx)}
.seg button:active{transform:scale(.96)}
.seg button.on{background:var(--accent-soft);color:var(--accent-2)}
.rk-table{max-width:880px;margin:0 auto;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.rk-ctls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:-6px 0 18px}
.rk-ctl{height:38px;padding:0 12px;border-radius:var(--r-sm);font:inherit;font-size:13px;
  font-weight:600;color:var(--tx-2);background:var(--surface);border:1px solid var(--line-2);
  transition:border-color .15s,color .15s}
.rk-ctl:hover{border-color:#4b4e55;color:var(--tx)}
.rk-ctl:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input.rk-ctl{color-scheme:dark}
.live-chip{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  color:var(--accent-2);border-color:rgba(139,92,246,.4);background:var(--accent-soft)}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--accent-2);
  animation:badge-pulse 1.8s ease-out infinite}
.cls-sel{position:relative}
.cls-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.cls-btn img,.cls-menu img{width:26px;height:26px;min-width:26px;max-width:none;
  border-radius:7px;object-fit:cover;border:1px solid var(--line-2)}
.cls-all{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  font-size:13px;color:var(--accent-2);background:var(--accent-soft);
  border:1px solid rgba(139,92,246,.3)}
.cls-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  z-index:60;display:none;gap:6px;padding:8px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line-2);box-shadow:var(--shadow-lg)}
.cls-sel.open .cls-menu{display:flex}
.cls-menu button{padding:5px;border:1px solid transparent;border-radius:10px;
  background:transparent;cursor:pointer;display:grid;place-items:center;
  transition:background .13s,border-color .13s,transform .15s}
.cls-menu button:hover{background:var(--surface-3);transform:translateY(-1px)}
.cls-menu button.on{background:var(--accent-soft);border-color:rgba(139,92,246,.4)}
.mv{font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.mv-up{color:#4ade80}
.mv-dn{color:#f87171}
.mv-eq{color:var(--tx-3)}
.rk-row{display:grid;grid-template-columns:50px 52px minmax(0,1fr) 150px 92px 140px 88px;
  align-items:center;gap:10px;padding:11px 20px;border-bottom:1px solid var(--line);
  transition:background .15s;animation:rise .4s both}
.rk-row:last-child{border-bottom:0}
.rk-row:hover{background:var(--surface-2)}
.rk-row.head{animation:none;padding:13px 20px;background:var(--surface-2);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3)}
.rk-row.head:hover{background:var(--surface-2)}
.rk-pos{font-weight:800;color:var(--tx-3);font-variant-numeric:tabular-nums;font-size:14px}
.rk-row.t1,.rk-row.t2,.rk-row.t3{background:linear-gradient(90deg,var(--accent-soft),transparent 40%)}
.rk-row.t1:hover,.rk-row.t2:hover,.rk-row.t3:hover{background:
  linear-gradient(90deg,var(--accent-soft),transparent 40%),var(--surface-2)}
.rk-who{display:flex;align-items:center;gap:10px;min-width:0}
.rk-face{width:30px;height:30px;border-radius:8px;flex:none;object-fit:cover;
  background:var(--surface-2);border:1px solid var(--line-2);
  transition:transform .25s cubic-bezier(.3,1.6,.4,1)}
.rk-row:hover .rk-face{transform:scale(1.12) rotate(-3deg)}
.rk-name{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clan-chip{flex:none;padding:1px 8px;border-radius:999px;font-size:10.5px;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--tx-3)}
.rk-cls{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--tx-2)}
.rk-cls .dot{width:7px;height:7px;border-radius:50%;flex:none}
.rk-num{text-align:end;font-variant-numeric:tabular-nums;font-size:13.5px}
.rk-lvl{color:var(--accent-2);font-weight:750;font-size:14.5px}
.rk-rec{color:var(--tx-3);font-size:12.5px}
.rk-empty{padding:48px 20px;text-align:center;color:var(--tx-3)}

/* expandable character card */
.rk-row.clickable{cursor:pointer}
.rk-row.sel{background:var(--surface-2)}
.rk-detail{border-bottom:1px solid var(--line);background:var(--bg);animation:rise .3s both}
.cd-grid{display:flex;flex-wrap:wrap;gap:10px 40px;align-items:center;
  justify-content:center;padding:18px 24px}
.hex-radar{width:270px;max-width:100%}
.hex-grid{fill:none;stroke:var(--line-2);stroke-width:1}
.hex-val{fill:rgba(139,92,246,.32);stroke:var(--accent-2);stroke-width:2;stroke-linejoin:round}
.hex-radar text{fill:var(--tx-3);font-size:11.5px;font-weight:600}
.cd-info{min-width:260px;flex:0 1 340px;display:flex;flex-direction:column;gap:2px}
.cd-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:15px}
.cd-lv{color:var(--accent-2);font-weight:750;font-size:13px}
.cd-row{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:8px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.cd-row:last-child{border-bottom:0}
.cd-row>span{color:var(--tx-3)}
.cd-row b{font-weight:650;display:inline-flex;align-items:center;gap:7px}
.cd-flag{width:20px;height:15px;border-radius:3px;object-fit:cover}
.cd-status.ok{color:#4ade80}
.cd-status.bad{color:#f87171}
.cd-status.off{color:var(--tx-3)}
.cd-dot{width:8px;height:8px;border-radius:50%;background:var(--tx-3);display:inline-block}
.cd-dot.on{background:#4ade80;box-shadow:0 0 8px #4ade80;animation:badge-pulse 1.8s ease-out infinite}
.cd-miss{padding:22px;text-align:center;color:var(--tx-3)}
.cd-eye{vertical-align:-2px;color:var(--tx-3)}
/* comments + "who viewed you" on the character detail */
.cm-wrap{border-top:1px solid var(--line);padding:16px 24px 20px;max-width:720px;margin:0 auto}
.cm-title{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tx-3);
  margin-bottom:12px;display:flex;align-items:center;gap:8px}
.cm-count{background:var(--surface-3);color:var(--tx-2);border-radius:999px;padding:1px 8px;font-size:11px}
.cm-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px;margin-bottom:16px}
.cm-input{width:100%;border:0;background:transparent;color:var(--tx);font:inherit;font-size:14px;resize:vertical;min-height:40px;outline:none}
.cm-box-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.cm-as{font-size:12px;color:var(--tx-3)}
.cm-as b{color:var(--accent-2)}
.cm-list{display:flex;flex-direction:column;gap:12px}
.cm{display:flex;gap:10px}
.cm-face{width:34px;height:34px;border-radius:9px;flex:0 0 auto;object-fit:cover;background:var(--surface-2)}
.cm-face.ph{display:grid;place-items:center;font-weight:700;color:var(--tx-2)}
.cm-main{flex:1;min-width:0}
.cm-hd{display:flex;align-items:baseline;gap:8px}
.cm-hd b{font-size:13.5px}
.cm-date{font-size:11.5px;color:var(--tx-3)}
.cm-body{font-size:14px;color:var(--tx);margin:2px 0 6px;overflow-wrap:anywhere;white-space:pre-wrap}
.cm-votes{display:flex;gap:8px}
.cm-vote{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--tx-3);border-radius:999px;padding:2px 10px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s}
.cm-vote:hover{color:var(--tx)}
.cm-vote.up.on{color:#4ade80;border-color:#4ade80;background:rgba(74,222,128,.12)}
.cm-vote.dn.on{color:#f87171;border-color:#f87171;background:rgba(248,113,113,.12)}
.cm-empty{color:var(--tx-3);font-size:13.5px;padding:6px 0}
.vw-wrap .vw-list{display:flex;flex-wrap:wrap;gap:8px}
.vw{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:4px 12px;font-size:12.5px}
.vw b{font-weight:650}
.vw-at{color:var(--tx-3);font-size:11.5px}
/* guest banner on the rankings page */
.rk-guest{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;text-align:center;
  margin:0 0 18px;padding:14px 18px;border-radius:var(--r-lg);
  background:var(--accent-soft);border:1px dashed rgba(139,92,246,.4);color:var(--tx-2);font-size:14px}
/* panel → profile cards (per character: views + who looked you up) */
.pf-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px}
.pf-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.pf-hd{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pf-face{width:46px;height:46px;border-radius:10px;object-fit:cover;background:var(--surface-2);flex:0 0 auto}
.pf-face.ph{display:grid;place-items:center;font-weight:800;color:var(--tx-2)}
.pf-id{flex:1;min-width:0}
.pf-name{font-weight:700}
.pf-lv{font-size:12.5px;color:var(--accent-2);font-weight:650}
.pf-views{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--tx);
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px}
.pf-vtitle{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tx-3);margin-bottom:8px}

/* ---------------- GG bot (guided help, replaces a static FAQ) ---------------- */
.gb-fab{position:fixed;inset-inline-end:20px;bottom:20px;z-index:120;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;border:0;color:#fff;
  background:linear-gradient(145deg,var(--accent),#7c3aed);box-shadow:0 10px 30px rgba(139,92,246,.45);
  transition:transform .18s,box-shadow .18s}
.gb-fab:hover{transform:translateY(-2px) scale(1.04)}
.gb-fab.on{transform:scale(.94)}
.gb-panel{position:fixed;inset-inline-end:20px;bottom:88px;z-index:120;width:min(360px,calc(100vw - 32px));
  max-height:min(560px,calc(100vh - 120px));display:flex;flex-direction:column;overflow:hidden;
  border-radius:18px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);
  animation:gb-rise .22s ease both}
.gb-panel[hidden]{display:none}
@keyframes gb-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes gb-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.gb-head{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--line);
  background:radial-gradient(300px 80px at 0% 0%,rgba(139,92,246,.18),transparent 70%),var(--surface-2)}
.gb-ava{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:13px;
  color:#fff;background:linear-gradient(145deg,var(--accent),#7c3aed);flex:0 0 auto}
.gb-id{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.gb-id b{font-size:14px}
.gb-on{font-size:11px;color:var(--tx-3);display:inline-flex;align-items:center;gap:5px}
.gb-on i{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px #4ade80}
.gb-restart{border:0;background:transparent;color:var(--tx-3);font:inherit;font-size:11.5px;cursor:pointer;white-space:nowrap}
.gb-restart:hover{color:var(--tx)}
.gb-x{border:0;background:transparent;color:var(--tx-3);font-size:15px;cursor:pointer;padding:2px 4px}
.gb-x:hover{color:var(--tx)}
.gb-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.gb-msg{max-width:85%;padding:10px 12px;border-radius:14px;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.gb-msg.bot{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:5px}
.gb-msg.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.gb-link{display:inline-block;margin-top:8px;padding:7px 12px;border-radius:9px;font-size:13px;font-weight:600;
  color:#fff;background:linear-gradient(145deg,var(--accent),#7c3aed)}
.gb-pills{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;max-width:100%}
.gb-pill{border:1px solid var(--line-2);background:var(--surface);color:var(--tx);font:inherit;font-size:13px;
  font-weight:600;border-radius:999px;padding:7px 13px;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.gb-pill:hover{border-color:var(--accent-2);background:var(--accent-soft);color:var(--accent-2)}
@media (max-width:520px){ .gb-panel{inset-inline:10px;width:auto;bottom:78px} .gb-fab{inset-inline-end:14px;bottom:14px} }
@media (prefers-reduced-motion:reduce){ .gb-panel,.gb-msg{animation:none} }

/* "new comments" badge on the panel Profile nav item */
.nav-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-inline-start:8px;
  border-radius:999px;background:#f87171;color:#fff;font-size:10.5px;font-weight:800;line-height:1}

/* minimalist server clock (footer + calendar) */
.srv-clock{display:inline-flex;align-items:center;gap:6px;color:var(--tx-3)}
.srv-clock svg{opacity:.75}
.srv-clock b{color:var(--tx-2);font-weight:650;font-variant-numeric:tabular-nums}
.cal-srv{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;
  color:var(--tx-3);font-size:12px;font-variant-numeric:tabular-nums}
.cal-srv svg{opacity:.7}
/* warrior board has 8 tabs: stretch full-width so they distribute evenly
   (one row on desktop, balanced wrap on smaller) instead of a lopsided 2nd row */
.seg-wrap{display:flex;width:100%;max-width:none;flex-wrap:wrap;gap:6px}
.seg-wrap button{flex:1 1 auto;min-width:96px;text-align:center}
.rk-table + .sec-t{margin-top:56px}
/* scope selector (Warriors / Clans / Alliances) — the primary switcher */
.rk-scope{margin-bottom:22px}
.rk-scope button{padding:9px 22px;font-size:14px}
#scopeChars,#scopeClans,#scopeAllies{animation:rise .35s ease both}
.rk-row.clan-row{grid-template-columns:52px 58px minmax(0,1fr) 140px 90px 100px 100px}
.rk-row.ally-row{grid-template-columns:52px 58px minmax(0,1fr) 80px 110px 100px}
.ally-ava{background:linear-gradient(145deg,rgba(139,92,246,.35),rgba(139,92,246,.1))}
.clan-ava{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;
  font-size:13px;font-weight:800;color:var(--accent-2);text-transform:uppercase;
  background:var(--accent-soft);border:1px solid rgba(139,92,246,.3);
  transition:transform .25s cubic-bezier(.3,1.6,.4,1)}
.rk-row:hover .clan-ava{transform:scale(1.12) rotate(-3deg)}
/* dedicated clan column (warrior rows): clan name with the alliance pill above */
.rk-clancol{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  gap:3px;min-width:0;text-align:end;overflow:hidden}
.rk-alliance-pill{max-width:100%;padding:1px 8px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--accent-2);
  background:var(--accent-soft);border:1px solid rgba(139,92,246,.3);cursor:default;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background .15s}
.rk-alliance-pill:hover,.rk-alliance-pill:focus-visible{background:rgba(139,92,246,.24);color:var(--accent-2)}
.rk-clancol .rk-clanname{font-size:13px;color:var(--tx-2);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-clanhead{text-align:end}

/* clan/alliance level chip (Lv N) next to the name */
.lvl-chip{flex:none;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:700;
  color:var(--accent-2);background:var(--accent-soft);border:1px solid rgba(139,92,246,.3);white-space:nowrap}

/* jump-to-name search */
.rk-search-row{position:relative;max-width:360px;margin:0 auto 22px}
.rk-search-ico{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);
  color:var(--tx-3);display:grid;place-items:center;pointer-events:none}
.rk-search{width:100%;height:42px;padding:0 14px 0 38px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--surface);color:var(--tx);font:inherit;font-size:14px}
html[dir=rtl] .rk-search{padding:0 38px 0 14px}
html[dir=rtl] .rk-search-ico{inset-inline-start:auto;inset-inline-end:12px}
.rk-search::placeholder{color:var(--tx-3)}
.rk-search:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
@keyframes rk-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.rk-search.miss{animation:rk-shake .3s;border-color:var(--bad)}

/* located row: persistent purple outline + underlined name + a brief flash */
@keyframes rk-flash{0%{background:var(--accent-soft)}100%{background:transparent}}
.rk-row.rk-found{box-shadow:inset 0 0 0 2px var(--accent);border-radius:8px;animation:rk-flash 1.4s ease}
.rk-row.rk-found .rk-name{text-decoration:underline;text-decoration-color:var(--accent-2);text-underline-offset:2px}

/* alliance tooltip (single element reused, positioned by JS) */
.ally-tip{position:fixed;z-index:300;max-width:270px;padding:12px 14px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);
  font-size:12.5px;color:var(--tx-2);opacity:0;transform:translateY(4px);
  pointer-events:none;transition:opacity .15s,transform .15s}
.ally-tip.show{opacity:1;transform:none}
.ally-tip-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.ally-flag{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;
  font-size:14px;font-weight:800;color:#fff;text-transform:uppercase;
  background:linear-gradient(145deg,var(--accent),rgba(139,92,246,.5));border:1px solid rgba(139,92,246,.5)}
.ally-tip-head b{font-size:14px;color:var(--tx)}
.ally-tip-row{display:flex;justify-content:space-between;gap:14px;padding:3px 0}
.ally-tip-row>span{color:var(--tx-3)}
.ally-tip-row b{color:var(--tx)}
.ally-tip-clans{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);display:grid;gap:4px}
.ally-tip-clans b{color:var(--tx)}
.ally-tip-war{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);color:#f87171;font-weight:600}
.ally-tip-peace{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);color:#4ade80}
@media (max-width:760px){
  .hide-sm{display:none}
  .rk-row{grid-template-columns:40px 48px minmax(0,1fr) 70px 76px;padding:10px 14px}
  .rk-row.clan-row{grid-template-columns:40px 48px minmax(0,1fr) 72px 76px}
  .rk-row.ally-row{grid-template-columns:40px 48px minmax(0,1fr) 56px 76px}
}

/* ---------------- community page ---------------- */
.cm-hero::before{background-image:url("/img/ui/lobby/img_lobby_bg.png");
  background-position:center 30%}
.cm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px;
  max-width:760px;margin:0 auto}
.qr-card{display:flex;flex-direction:column}
.dl-ico.tg{background:rgba(59,130,246,.14);color:#60a5fa;border-color:rgba(59,130,246,.3)}
.qr-holder{display:grid;place-items:center;padding:18px 0 14px}
.qr-big{width:190px;height:190px;border-radius:var(--r);border:8px solid #fff;background:#fff;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.qr-card:hover .qr-big{transform:scale(1.03) rotate(.5deg);
  box-shadow:0 10px 34px rgba(0,0,0,.5)}
.link-row{display:flex;align-items:center;gap:10px;margin:2px 0 16px;
  padding:10px 12px;border-radius:var(--r-sm);background:var(--bg);border:1px solid var(--line-2)}
.link-row code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--accent-2);font-family:Consolas,monospace;font-size:13px}
.soc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.soc{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;
  border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
  color:var(--tx-2);font-weight:600;font-size:14.5px;
  transition:transform .25s,border-color .25s,color .25s,box-shadow .25s}
.soc svg{transition:transform .3s cubic-bezier(.3,1.6,.4,1)}
.soc:hover{transform:translateY(-2px);border-color:rgba(139,92,246,.4);color:var(--tx);
  box-shadow:0 8px 26px rgba(0,0,0,.35)}
.soc:hover svg{transform:scale(1.18) rotate(-5deg);color:var(--accent-2)}
.staff-sub{margin:-6px 0 16px;color:var(--tx-3);font-size:13.5px}
/* staff org tree: nodes connected by SVG edges with travelling sparks */
.tree-scroll{overflow-x:auto;padding:6px 4px 4px}
.tree{position:relative;display:flex;flex-direction:column;align-items:center;gap:52px;
  min-width:880px;margin:0 auto}
.tree-edges{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.tree-row{position:relative;z-index:1;display:flex;justify-content:center;gap:16px;width:100%}
.tree-node{text-align:center;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .3s}
.tree-node:hover{transform:translateY(-4px);border-color:rgba(139,92,246,.4);box-shadow:0 12px 36px rgba(0,0,0,.45)}
.tree-node:hover .staff-ava{transform:scale(1.08) rotate(-4deg)}
.row-admin .tree-node{padding:26px 40px;min-width:230px;border-color:rgba(139,92,246,.5);
  background:radial-gradient(240px 130px at 50% -20%,rgba(139,92,246,.2),transparent 70%),var(--surface)}
.row-head .tree-node,.row-gm .tree-node{padding:18px 16px;width:158px}
.row-help .tree-node{padding:12px 8px;width:96px}

.staff-ava{width:64px;height:64px;margin:0 auto 12px;border-radius:18px;object-fit:cover;
  display:grid;place-items:center;font-size:24px;font-weight:800;color:var(--accent-2);
  background:var(--surface-2);border:1px solid var(--line-2);
  transition:transform .3s cubic-bezier(.3,1.6,.4,1)}
.row-head .staff-ava,.row-gm .staff-ava{width:56px;height:56px;font-size:22px;border-radius:15px;margin-bottom:9px}
.row-help .staff-ava{width:42px;height:42px;font-size:16px;border-radius:12px;margin-bottom:7px}
.row-help .staff-r{font-size:9.5px}
@keyframes mystery-glow{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.4)}
  50%{box-shadow:0 0 24px 4px rgba(139,92,246,.35)}}
.staff-ava.mystery{background:var(--accent-soft);border-color:rgba(139,92,246,.45);
  animation:mystery-glow 3s ease-in-out infinite}
/* mobile: drop the wide connected tree for a clean stacked directory */
@media (max-width:720px){
  .tree-scroll{overflow-x:visible;padding:0}
  .tree{min-width:0;width:100%;gap:22px}
  .tree-edges{display:none}
  .tree-row{flex-wrap:wrap;gap:10px}
  .row-admin .tree-node{padding:18px 22px;min-width:0;width:100%;max-width:300px}
  .row-head .tree-node,.row-gm .tree-node{width:calc(50% - 5px);max-width:190px;padding:14px 10px}
  .row-help .tree-node{width:calc(25% - 8px);min-width:70px;padding:10px 6px}
  .row-help .staff-ava{width:36px;height:36px;font-size:14px;margin-bottom:5px}
}

/* connector edges + travelling spark (built/animated by community.js) */
.edge{fill:none;stroke:var(--line-2);stroke-width:2;opacity:.5}
.edge-pulse{fill:none;stroke:var(--accent-2);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:12 200;opacity:0;filter:drop-shadow(0 0 5px var(--accent-2))}

.staff-n{font-weight:750;font-size:16px}
.staff-r{margin-top:2px;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-2)}
.staff-hint{margin-top:8px;font-size:12px;color:var(--tx-3)}

/* ---------------- transfer event ---------------- */
.tr-hero::before{background-image:url("/img/ui/lobby/img_bg_event.png");background-position:center 24%}
.tr-hero .badge{margin-bottom:18px}
.cd-timer{display:inline-flex;align-items:flex-end;justify-content:center;flex-wrap:wrap;
  gap:6px 10px;max-width:100%;margin-top:26px;padding:14px 22px;
  border-radius:var(--r-lg);background:rgba(26,27,30,.6);border:1px solid var(--line-2);
  backdrop-filter:blur(6px)}
.cd-unit{display:flex;flex-direction:column;align-items:center;min-width:52px}
.cd-unit span{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.02em;
  color:var(--accent-2);font-variant-numeric:tabular-nums}
.cd-unit small{margin-top:6px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3)}
.cd-sep{font-size:26px;font-weight:800;color:var(--tx-3);padding-bottom:16px}
.tr-ended{margin-top:24px;font-size:16px;font-weight:700;color:#f87171}
.tr-packs .tier{align-items:center;text-align:center}
.tr-packs .pack-medal{font-size:38px;line-height:1;margin-bottom:4px}
.tr-packs .n{font-size:15px}
.pack-for{margin:6px 0 14px;font-size:12.5px;color:var(--tx-3)}
.tr-packs ul{text-align:start}
.pack-bronze{border-color:rgba(205,127,50,.4)}
.pack-silver.hot{border-color:rgba(203,213,225,.5);
  background:radial-gradient(300px 140px at 50% -30%,rgba(203,213,225,.14),transparent 70%),var(--surface)}
.pack-gold{border-color:rgba(245,197,66,.5);
  background:radial-gradient(300px 140px at 50% -30%,rgba(245,197,66,.14),transparent 70%),var(--surface)}

/* register: choice + transfer block */
.choice-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:start;margin-bottom:12px;
  padding:16px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line-2);
  color:var(--tx);cursor:pointer;font:inherit;transition:transform .18s,border-color .18s,box-shadow .18s}
.choice-opt:hover{transform:translateY(-2px);border-color:rgba(139,92,246,.5);box-shadow:var(--shadow-lg)}
.choice-opt.hot{border-color:rgba(139,92,246,.45);
  background:radial-gradient(300px 120px at 20% -20%,rgba(139,92,246,.16),transparent 70%),var(--surface)}
.choice-ico{font-size:28px;flex:none}
.choice-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.choice-d{margin-top:3px;font-size:12.5px;color:var(--tx-3)}
.tr-banner{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px;
  padding:10px 13px;border-radius:var(--r-sm);background:var(--accent-soft);
  border:1px solid rgba(139,92,246,.3);color:var(--accent-2);font-size:13px}
.tr-off{margin-inline-start:auto;background:none;border:0;color:var(--tx-3);cursor:pointer;
  font:inherit;font-size:12px;text-decoration:underline}
.tr-off:hover{color:var(--tx)}
.tr-divider{display:flex;align-items:center;gap:12px;margin:20px 0 4px;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3)}
.tr-divider::before,.tr-divider::after{content:"";flex:1;height:1px;background:var(--line)}
#trFields textarea{width:100%;padding:11px 14px;border-radius:var(--r-sm);resize:vertical;
  border:1px solid var(--line-2);background:var(--bg);color:var(--tx);font:inherit;font-size:14px}
#trFields textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
#trFields select{width:100%;height:46px;padding:0 12px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--bg);color:var(--tx);font:inherit;font-size:15px}
#trFields select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------------- landing hero carousel (news over the pitch) ---------------- */
.hero-news{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-news-slide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;
  transform:scale(1.035);transform-origin:center;
  transition:opacity .95s ease, transform 1.15s cubic-bezier(.2,.6,.2,1);
  background:center 22%/cover no-repeat #131316;pointer-events:none;will-change:opacity,transform}
.hero-news-slide::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to bottom,rgba(26,27,30,.55),rgba(26,27,30,.15) 30%,var(--bg) 96%),
  linear-gradient(100deg,rgba(21,20,28,.94) 22%,rgba(21,20,28,.55) 48%,rgba(139,92,246,.10) 100%)}
.hero-news-slide .wrap{position:relative;z-index:1}
.hero-news-slide.is-active{opacity:1;transform:scale(1);pointer-events:auto}
.hero-news-cat{display:inline-block;margin-bottom:16px;padding:4px 12px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-2);background:var(--accent-soft);border:1px solid rgba(139,92,246,.3)}
.hero-news-title{margin:0 0 14px;font-size:44px;line-height:1.08;font-weight:800;
  letter-spacing:-.03em;max-width:620px}
.hero-news-ex{margin:0 0 26px;max-width:460px;font-size:16.5px;color:var(--tx-2)}
.hero-carousel-ui{position:absolute;left:0;right:0;bottom:22px;z-index:4;
  display:flex;align-items:center;justify-content:center;gap:14px}
.hero-dots{display:flex;gap:8px;position:relative}
.hero-dot{width:9px;height:9px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.3);transition:background .3s,transform .2s;position:relative;z-index:0}
.hero-dot:hover{background:rgba(255,255,255,.55)}
.hero-dot.on{background:var(--accent-2)}
/* the "merge" pill: sits on the active dot and grows to swallow the next one,
   so two dots read as one just as the slide dissolves over (see home.js). */
.hero-dot-bridge{position:absolute;left:0;top:50%;width:9px;height:9px;
  transform:translateY(-50%);border-radius:999px;background:var(--accent-2);
  box-shadow:0 0 10px rgba(139,92,246,.7);pointer-events:none;z-index:1}
.hero-arrow{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:#fff;background:rgba(26,27,30,.5);border:1px solid var(--line-2);backdrop-filter:blur(6px);
  transition:background .15s,transform .15s}
.hero-arrow:hover{background:rgba(139,92,246,.4)}
.hero-arrow:active{transform:scale(.94)}
@media (prefers-reduced-motion: reduce){ .hero-news-slide{transition:none} }

/* ---------------- news page ---------------- */
.news-hero::before{background-image:url("/img/ui/lobby/img_bg_post.png");background-position:center 30%}
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px}
.news-card{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);color:var(--tx);
  transition:transform .25s,border-color .25s,box-shadow .25s}
.news-card:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.4);box-shadow:var(--shadow-lg)}
.news-thumb{position:relative;aspect-ratio:16/9;background:center 25%/cover no-repeat var(--surface-2)}
.news-cat{position:absolute;top:10px;inset-inline-start:10px;padding:3px 10px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:rgba(26,27,30,.7);border:1px solid rgba(139,92,246,.4);backdrop-filter:blur(4px)}
.news-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.news-date{font-size:12px;color:var(--tx-3)}
.news-h{margin:6px 0 8px;font-size:17px;font-weight:700;line-height:1.25}
.news-ex{margin:0 0 14px;font-size:13.5px;color:var(--tx-2);flex:1}
.news-more{font-size:13px;font-weight:600;color:var(--accent-2)}
.news-card:hover .news-more{text-decoration:underline}
.news-article{max-width:760px;margin:0 auto}
.news-back{display:inline-block;margin-bottom:18px;font-size:13.5px;color:var(--accent-2)}
.news-back:hover{text-decoration:underline}
.news-hero-img{position:relative;aspect-ratio:16/7;border-radius:var(--r-lg);margin-bottom:18px;
  background:center 25%/cover no-repeat var(--surface-2);border:1px solid var(--line-2)}
.news-article{overflow-wrap:anywhere}
.news-title{margin:6px 0 14px;font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.12;
  overflow-wrap:anywhere;word-break:break-word}
.news-lead{font-size:17px;color:var(--tx-2);margin:0 0 20px;overflow-wrap:anywhere}
.news-content{font-size:15.5px;color:var(--tx);line-height:1.7;overflow-wrap:anywhere;word-break:break-word}
.news-content p{margin:0 0 16px;overflow-wrap:anywhere}

/* news index: top category toggles + date-search calendar + single-column rows */
.nx{max-width:1000px;margin:0 auto}
.nx-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-bottom:24px}
.nx-filters{display:flex;flex-wrap:nowrap;gap:18px;overflow-x:auto;scrollbar-width:none;min-width:0;padding:6px 8px}
.nx-filters::-webkit-scrollbar{display:none}
.nx-datesel{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto}
.nx-datesel-l{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2)}
.nx-sel{height:40px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--tx);font:inherit;font-size:14px;cursor:pointer}
.nx-sel:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.nx-filter{white-space:nowrap}
.nx-filter{--cat:var(--accent-2);display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;
  cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:var(--tx);transition:color .15s,opacity .15s}
.nx-filter .nc-dot{transition:transform .15s,box-shadow .15s}
.nx-filter:hover{color:var(--tx)}
.nx-filter:hover .nc-dot{transform:scale(1.15)}
.nx-filter.on .nc-dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--cat) 26%,transparent)}
.nx-filter.off{color:var(--tx-3);opacity:.55}
.nx-filter.off .nc-dot{background:var(--tx-3)}
.nx-cal-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:16px;position:relative}
.nx-clear{margin-top:12px;width:100%;padding:8px;border-radius:8px;cursor:pointer;font:inherit;
  border:1px dashed rgba(139,92,246,.4);background:var(--accent-soft);color:var(--accent-2);font-size:13px;font-weight:600}
.nx-clear[hidden]{display:none}
.cal-cell.sel{box-shadow:inset 0 0 0 2px var(--accent-2);background:color-mix(in srgb,var(--accent-2) 22%,var(--surface-3))}
.cal-cell.sel .cal-d{color:#fff;font-weight:800}
.nx-list{display:flex;flex-direction:column;gap:16px}
.nx-row{display:grid;grid-template-columns:240px 1fr;gap:22px;align-items:stretch;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  color:var(--tx);transition:transform .2s,border-color .2s,box-shadow .2s}
.nx-row:hover{transform:translateY(-2px);border-color:rgba(139,92,246,.4);box-shadow:var(--shadow-lg)}
.nx-thumb{background:center/cover no-repeat var(--surface-2);min-height:150px}
.nx-thumb.ph{background:linear-gradient(135deg,color-mix(in srgb,var(--cat,var(--accent-2)) 40%,var(--surface-2)),var(--surface-2))}
.nx-body{padding:18px 20px 18px 0;display:flex;flex-direction:column;min-width:0}
.nx-meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx-3);margin-bottom:8px}
.nx-cat{font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tx-2);font-size:11px}
.nx-h{margin:0 0 8px;font-size:19px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.nx-ex{margin:0 0 14px;font-size:14px;color:var(--tx-2);flex:1;overflow-wrap:anywhere}
.nx-more{font-size:13.5px;font-weight:600;color:var(--accent-2)}
.nx-row:hover .nx-more{text-decoration:underline}
@media (max-width:860px){
  .nx-controls{grid-template-columns:1fr}
  .nx-cal-card{max-width:420px}
  .nx-row{grid-template-columns:1fr}
  .nx-thumb{min-height:170px}
  .nx-body{padding:0 18px 18px}
}

/* who we are / mission — its own full-bleed band (breaks out of the wrap) */
.mission-band{width:100vw;margin-inline:calc(50% - 50vw);padding:60px 0;text-align:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:radial-gradient(1200px 420px at 50% 0%,color-mix(in srgb,var(--accent-2) 7%,transparent),transparent 70%),var(--surface)}
.mission-head{max-width:760px;margin:0 auto 36px}
.mission-band .eyebrow{justify-content:center}
.mission-head h2{font-size:32px;font-weight:800;letter-spacing:-.02em;margin:8px 0 16px}
.mission-lead{font-size:17px;line-height:1.65;color:var(--tx-2);margin:0}
.mission-vals{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1040px;margin:0 auto;text-align:start}
.mcard{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 22px;
  transition:transform .25s,border-color .25s,box-shadow .25s}
.mcard:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.4);box-shadow:var(--shadow-lg)}
.mcard-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;
  color:var(--accent-2);background:var(--accent-soft);border:1px solid rgba(139,92,246,.3)}
.mcard h3{margin:0 0 8px;font-size:17px;font-weight:700;white-space:normal}
.mcard p{margin:0;font-size:14px;line-height:1.6;color:var(--tx-2);white-space:normal}
@media (max-width:940px){ .mission-vals{grid-template-columns:1fr 1fr;max-width:680px} }
@media (max-width:560px){ .mission-vals{grid-template-columns:1fr;max-width:420px} }

/* ---------------- landing: "what's happening" (board + calendar) ---------------- */
/* full-width band so the calendar gets its own dedicated area on the page */
.nc-band{margin:44px 0;padding:52px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:radial-gradient(1200px 380px at 78% 0%,color-mix(in srgb,var(--accent-2) 8%,transparent),transparent 70%),var(--surface)}
.nc{margin:0 auto}
.nc-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:22px}
.nc-head .sec-t{margin:0;font-size:30px}
.nc-all{font-size:14.5px;font-weight:600;color:var(--accent-2);white-space:nowrap}
.nc-all:hover{text-decoration:underline}
/* adaptive: board flexes, calendar sits between a comfortable min/max; the pair
   is centred inside the band */
.nc-grid{display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:40px;
  align-items:stretch;max-width:1180px;margin:0 auto}

/* board (left) — no pills: a coloured dot + its label */
.nc-dot{width:9px;height:9px;border-radius:50%;background:var(--cat,var(--accent-2));flex:0 0 auto}
/* filters span the full width so all types stay on ONE line; the inline padding
   keeps the active dot's glow ring from being clipped by overflow-x */
.nc-filters{display:flex;flex-wrap:nowrap;gap:20px;margin:0 auto 16px;max-width:1180px;
  overflow-x:auto;scrollbar-width:none;padding:6px 8px}
.nc-filters::-webkit-scrollbar{display:none}
.nc-filter{white-space:nowrap}
.nc-filter{--cat:var(--accent-2);display:inline-flex;align-items:center;gap:8px;
  padding:4px 2px;border:0;background:transparent;cursor:pointer;font:inherit;
  font-size:13.5px;font-weight:600;color:var(--tx-3);transition:color .15s}
.nc-filter .nc-dot{transition:box-shadow .15s,transform .15s}
.nc-filter:hover{color:var(--tx)}
.nc-filter:hover .nc-dot{transform:scale(1.15)}
.nc-filter.on{color:var(--tx)}
.nc-filter.on .nc-dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--cat) 28%,transparent)}
.nc-table-scroll{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.nc-table{width:100%;border-collapse:collapse;font-size:15px;table-layout:fixed}
.nc-table thead th{text-align:start;padding:13px 18px;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.nc-th-type{width:160px}
.nc-th-date{width:92px;text-align:end}
.nc-row{cursor:pointer;transition:background .12s,box-shadow .12s}
.nc-row td{padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
.nc-table tbody tr:last-child td{border-bottom:0}
.nc-row:hover{background:var(--surface-2)}
.nc-row:focus-visible{outline:2px solid var(--accent-2);outline-offset:-2px}
.nc-row.linked{background:color-mix(in srgb,var(--accent-2) 13%,transparent);
  box-shadow:inset 3px 0 0 var(--accent-2)}
.nc-td-title{color:var(--tx);font-weight:500;font-size:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nc-td-date{text-align:end;color:var(--tx-3);font-size:13.5px;white-space:nowrap}
.nc-pin{color:var(--accent-2)}
.nc-empty td{padding:22px 14px;text-align:center;color:var(--tx-3)}
/* type = coloured dot + plain label (no pill) */
.nc-type{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.nc-type-l{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tx-2);white-space:nowrap}
/* paginator under the list */
.nc-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}
.nc-pager:empty{display:none}
.nc-pg{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface-2);color:var(--tx-2);font-size:15px;
  transition:color .15s,border-color .15s,background .15s,transform .12s}
.nc-pg:hover:not([disabled]){color:var(--tx);border-color:var(--line-2)}
.nc-pg:active:not([disabled]){transform:scale(.93)}
.nc-pg[disabled]{opacity:.32;cursor:not-allowed}
.nc-pg-info{font-size:13px;color:var(--tx-3);min-width:56px;text-align:center}

/* calendar (right) */
.nc-cal{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface-2);padding:22px;display:flex;flex-direction:column}
.cal-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.cal-title-wrap{flex:1;text-align:center;min-width:0}
.cal-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent-2)}
.cal-month{font-size:21px;font-weight:800;color:var(--tx);text-transform:capitalize;line-height:1.2;letter-spacing:-.01em}
.cal-nav{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;cursor:pointer;
  border-radius:50%;color:var(--tx-2);background:var(--surface-3);border:1px solid var(--line);
  transition:color .15s,background .15s,border-color .15s,transform .12s}
.cal-nav:hover{color:var(--tx);border-color:var(--line-2)}
.cal-nav:active{transform:scale(.92)}
.cal-nav.blocked{opacity:.3;cursor:not-allowed}
.cal-nav.blocked:hover{color:var(--tx-2);border-color:var(--line)}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal-dow span{text-align:center;font-size:11.5px;font-weight:700;color:var(--tx-3);text-transform:uppercase;padding:3px 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-cell{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;border:0;background:transparent;border-radius:10px;
  color:var(--tx-2);font:inherit;cursor:default;padding:0;transition:transform .16s,background .16s,box-shadow .16s}
.cal-cell.empty{visibility:hidden}
.cal-d{font-size:15px;line-height:1;font-weight:500}
.cal-cell.has{cursor:pointer;color:var(--tx);background:var(--surface-3)}
.cal-cell.has:hover{background:var(--surface)}
.cal-cell.today{box-shadow:inset 0 0 0 2px var(--accent-2)}
.cal-cell.today .cal-d{color:var(--accent-2);font-weight:800}
.cal-dots{display:flex;gap:3px;height:6px;flex-wrap:nowrap}
.cal-dots i{width:6px;height:6px;border-radius:50%;display:block;flex:0 0 auto}
/* the calendar day that matches the hovered news row (and vice-versa) pulses */
@keyframes cal-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
.cal-cell.linked{z-index:3;color:#fff;background:color-mix(in srgb,var(--accent-2) 30%,var(--surface-3));
  box-shadow:0 0 0 2px var(--accent-2),0 8px 22px rgba(139,92,246,.45);
  animation:cal-pulse 1s ease-in-out infinite}
.cal-cell.linked .cal-d{color:#fff;font-weight:800}
.cal-cell.linked .cal-dots i{box-shadow:0 0 0 1.5px rgba(255,255,255,.5)}
/* calmer glow (in the category's colour) when a type/filter is hovered */
.cal-cell.glow{z-index:2;
  box-shadow:0 0 0 2px var(--glow,var(--accent-2)),
             0 0 16px color-mix(in srgb,var(--glow,var(--accent-2)) 55%,transparent)}
/* hover tooltip over a day */
.cal-tip{position:absolute;z-index:20;min-width:170px;max-width:250px;padding:10px 12px;
  border-radius:10px;background:var(--surface);border:1px solid var(--line-2);
  box-shadow:var(--shadow-lg);pointer-events:none;opacity:0;
  transform:translate(-50%,-100%);transition:opacity .14s}
.cal-tip.show{opacity:1}
.cal-tip[hidden]{display:none}
.cal-tip .tip-d{font-size:11.5px;font-weight:700;color:var(--tx-3);text-transform:capitalize;margin-bottom:6px}
.cal-tip .tip-ev{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:13px}
.cal-tip .tip-ev i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.cal-tip .tip-ev span{color:var(--tx);font-weight:500;line-height:1.3}
.cal-detail{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px;flex:1;min-height:96px}
.cal-detail-empty{margin:auto 0;text-align:center;color:var(--tx-3);font-size:13.5px;padding:8px 0}
.cal-detail-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:auto;padding-top:6px}
.cal-detail-h{font-size:12px;font-weight:700;color:var(--tx-3);text-transform:capitalize}
.cal-ev{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:var(--tx);
  padding:6px 8px;border-radius:8px;background:var(--surface-2)}
a.cal-ev:hover{background:var(--surface-3)}
.cal-ev-t{font-size:13px;font-weight:600}
.cal-ev-d{font-size:12px;color:var(--tx-3);flex-basis:100%}
.cal-toast{margin-top:12px;font-size:13px;font-weight:600;color:var(--accent-2);text-align:center;
  padding:10px 12px;border-radius:8px;background:var(--accent-soft);
  border:1px dashed rgba(139,92,246,.4);opacity:0;transform:translateY(4px);
  transition:opacity .25s,transform .25s;pointer-events:none}
.cal-toast:not(.show){display:none}
.cal-toast.show{opacity:1;transform:none}
@media (max-width:960px){
  .nc-grid{grid-template-columns:1fr;justify-items:center}
  .nc-list-wrap{width:100%;max-width:560px}
  .nc-cal{width:100%;max-width:560px}
  .nc-band{padding:40px 0;margin:32px 0}
  .nc-head .sec-t{font-size:25px}
}

/* ---------------- guard (anti-copy layer) ---------------- */
body.guarded{-webkit-user-select:none;user-select:none}
body.guarded input,body.guarded textarea,body.guarded select{
  -webkit-user-select:text;user-select:text}
body.guarded img{-webkit-user-drag:none;user-drag:none}
.guard-flash{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:#000;opacity:0;pointer-events:none;transition:opacity .12s}
.guard-flash.show{opacity:1}
.guard-flash span{font-size:clamp(20px,4vw,34px);font-weight:800;letter-spacing:-.02em;
  color:var(--accent-2);text-shadow:0 0 30px rgba(139,92,246,.5)}
@media print{
  body.guarded>*{display:none!important}
  body.guarded{background:#000!important}
  body.guarded::after{content:"Don't be like Softnyx.";display:grid;place-items:center;
    height:100vh;font-size:32px;font-weight:800;color:#8b5cf6}
}

/* ---------------- micro-interactions ---------------- */
::selection{background:rgba(139,92,246,.4);color:#fff}

/* hero: staggered entrance + a very slow drift on the art */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-in>*{animation:rise .55s cubic-bezier(.2,.7,.3,1) both}
.hero-in>*:nth-child(2){animation-delay:.07s}
.hero-in>*:nth-child(3){animation-delay:.14s}
.hero-in>*:nth-child(4){animation-delay:.21s}
.hero-in>*:nth-child(5){animation-delay:.3s}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.06)}}
.hero::before{animation:drift 38s ease-in-out infinite alternate}

/* the word "reborn" quietly shimmers */
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.hero h1 em{background:linear-gradient(100deg,var(--accent-2) 30%,#e9d5ff 50%,var(--accent-2) 70%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 7s linear infinite}
.hero h1 em.egg-glitching{background:none;-webkit-background-clip:initial;background-clip:initial}

/* buttons: 1px lift + a soft bloom on the primary */
.btn{transition:background .15s,border-color .15s,transform .18s,box-shadow .25s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(139,92,246,.35)}
.btn-ghost:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:none}

/* logo mark: a tiny tilt + glow when touched */
.brand .mark{transition:transform .25s cubic-bezier(.3,1.6,.4,1),box-shadow .25s,color .25s}
.brand:hover .mark{transform:rotate(-6deg) scale(1.05);color:var(--accent-2);
  box-shadow:0 0 14px rgba(139,92,246,.35)}

/* nav links: underline that grows from the start edge */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;inset-inline:13px;bottom:5px;height:2px;
  border-radius:2px;background:var(--accent-2);transform:scaleX(0);
  transform-origin:0 50%;transition:transform .22s ease}
.nav-links a:hover::after{transform:scaleX(1)}

/* Transfer is a limited-time event: a tiny "live" dot that breathes, so it
   reads as new and temporary without shouting. Soft, minimal. */
.nav-event{display:inline-flex;align-items:center;gap:6px}
.event-dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  background:var(--accent-2);box-shadow:0 0 0 0 var(--accent-2);
  animation:event-pulse 2.4s ease-in-out infinite}
.nav-drawer .event-dot{margin-inline-start:2px}
@keyframes event-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.55);opacity:.75}
  50%    {box-shadow:0 0 0 5px rgba(139,92,246,0);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .event-dot{animation:none;opacity:.9}
}
/* event over (util.js checks /api/transfer): no "live" dot for a closed event */
.event-over .event-dot{display:none}

/* feature cards: lift toward the cursor, checkmarks pop */
.feature .art{transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s,filter .5s}
.feature .art:hover{transform:translateY(-5px);filter:saturate(1.12);
  box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(139,92,246,.25)}
.feature li{transition:color .2s}
.feature li::before{display:inline-block;transition:transform .25s cubic-bezier(.3,1.8,.4,1)}
.feature li:hover{color:var(--tx)}
.feature li:hover::before{transform:scale(1.35) rotate(8deg)}
.eyebrow{display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:14px;height:2px;border-radius:2px;background:var(--accent);
  transition:width .3s ease}
.feature:hover .eyebrow::before{width:26px}

/* CTA: the glow slowly breathes */
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
.cta-card{position:relative}
.cta-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(500px 220px at 50% -30%,rgba(139,92,246,.22),transparent 70%);
  animation:breathe 6s ease-in-out infinite}

/* footer links: nudge forward */
.foot-col a{transition:color .18s,padding-inline-start .18s}
.foot-col a:hover{padding-inline-start:5px}

/* badge: border warms up on touch */
.badge{transition:border-color .3s,box-shadow .3s}
.badge:hover{border-color:rgba(139,92,246,.55);box-shadow:0 0 16px rgba(139,92,246,.18)}

/* scroll reveal (elements get .rv from ambient.js, .rv-in when visible) */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rv-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .hero-in>*,.hero::before,.hero h1 em,.cta-card::before{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  /* stop every looping pulse/glow for motion-sensitive users */
  .badge::before,.dot-live,.cd-dot.on,.staff-ava.mystery,
  .egg-toast,.egg-glitching,.rk-search.miss,.rk-row.rk-found{animation:none!important}
  *{scroll-behavior:auto!important}
}

/* ---------------- easter eggs ---------------- */
.egg-toast{position:fixed;bottom:24px;left:50%;z-index:200;max-width:90vw;
  transform:translateX(-50%) translateY(16px);opacity:0;pointer-events:none;
  padding:12px 18px;border-radius:12px;text-align:center;font-size:14px;
  background:var(--surface-2);border:1px solid rgba(139,92,246,.45);color:var(--tx);
  box-shadow:var(--shadow-lg);transition:opacity .3s,transform .3s}
.egg-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
body.egg-chaos{--accent:#f59e0b;--accent-2:#fbbf24;--accent-soft:rgba(245,158,11,.16)}
body.egg-chaos .hero::before{filter:hue-rotate(-45deg) saturate(1.35)}
body.egg-chaos .badge{border-color:rgba(251,191,36,.4)}
@keyframes egg-glitch{
  0%,100%{transform:none;opacity:1}
  20%{transform:translate(-2px,1px) skewX(-6deg);opacity:.7}
  40%{transform:translate(2px,-1px);opacity:.9}
  60%{transform:translate(-1px,2px) skewX(4deg);opacity:.6}
  80%{transform:translate(1px,-2px)}}
.egg-glitching{display:inline-block;animation:egg-glitch .35s steps(2) infinite;
  color:#fbbf24!important;text-shadow:0 0 18px rgba(251,191,36,.55)}
@keyframes egg-knock{0%{transform:none}30%{transform:rotate(-7deg) scale(1.06)}
  60%{transform:rotate(5deg)}100%{transform:none}}
.egg-strike{animation:egg-knock .28s ease}
.badge{position:relative}
.badge .egg-tip{position:absolute;top:calc(100% + 8px);inset-inline-start:0;
  padding:6px 10px;border-radius:8px;white-space:nowrap;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--tx-3);
  font-size:11px;letter-spacing:.04em;text-transform:none;font-weight:400;
  opacity:0;transition:opacity .5s;pointer-events:none}
.badge .egg-tip.show{opacity:1}

/* ---------------- responsive ---------------- */
@media (max-width:920px){
  .nav-links{display:none}
  .nav-burger{display:grid}
  .nav-login{display:none} /* lives in the drawer on mobile */
  .hero h1,.hero-news-title{font-size:42px}
  .feature{grid-template-columns:1fr;gap:34px;padding:44px 0}
  .feature.rev .art{order:0}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .auth{grid-template-columns:1fr}
  .auth-art{display:none}
  .dl-grid{grid-template-columns:1fr}
  .dl-hero h1{font-size:34px}
  .sidebar{position:fixed;inset:0 auto 0 0;z-index:70;transform:translateX(-100%);
    transition:transform .22s;box-shadow:var(--shadow-lg)}
  html[dir=rtl] .sidebar{inset:0 0 0 auto;transform:translateX(100%)}
  .sidebar.open{transform:translateX(0)}
  .burger{display:grid}
  .pbody,.ptop{padding-left:18px;padding-right:18px}
  .scrim{position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.5);display:none}
  .scrim.show{display:block}
}
@media (max-width:520px){
  .two-col{grid-template-columns:1fr}
  .hero{padding-top:120px;min-height:0}
  .hero h1,.hero-news-title{font-size:32px}
  .hero-btns .btn{flex:1 1 100%}
  .feature h2{font-size:26px}
  .cta-card h2{font-size:26px}
  /* rankings: on phones show rank + name + the primary metric only, so names
     stay readable and the class face never overlaps the numbers */
  .rk-row,.rk-row.clan-row,.rk-row.ally-row{
    grid-template-columns:30px minmax(0,1fr) auto;gap:8px;padding:10px 12px}
  .rk-row .mv{display:none}
  .rk-row .rk-num:not(.rk-lvl){display:none}
  .rk-pos{font-size:13px}
  /* countdown shrinks to fit the smallest phones */
  .cd-unit{min-width:38px}
  .cd-unit span{font-size:26px}
  .cd-sep{padding-bottom:14px;font-size:22px}
}

/* ---------------- guided tour (tour.js) ----------------
   The whole page dims except a spotlight "hole" around the step's element;
   a card next to it explains it. The dim IS the hole's giant box-shadow, so
   the cut-out and the shade move together with one transition. */
.tour{position:fixed;inset:0;z-index:1000;opacity:0;transition:opacity .22s}
.tour.show{opacity:1}
.tour-hole{position:fixed;border-radius:16px;pointer-events:none;
  box-shadow:0 0 0 200vmax rgba(8,9,12,.74),0 0 0 2px rgba(167,139,250,.9),0 0 26px 4px rgba(139,92,246,.45);
  transition:left .35s cubic-bezier(.4,0,.15,1),top .35s cubic-bezier(.4,0,.15,1),
    width .35s cubic-bezier(.4,0,.15,1),height .35s cubic-bezier(.4,0,.15,1),border-radius .35s}
.tour.centered .tour-hole{box-shadow:0 0 0 200vmax rgba(8,9,12,.74)}
.tour-tip{position:fixed;width:min(330px,calc(100vw - 24px));padding:20px 20px 16px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line-2);box-shadow:0 22px 60px rgba(0,0,0,.6);color:var(--tx);
  transition:left .35s cubic-bezier(.4,0,.15,1),top .35s cubic-bezier(.4,0,.15,1);outline:0}
.tour-tip::before{content:"";position:absolute;width:14px;height:14px;background:var(--surface);
  border:1px solid var(--line-2);transform:rotate(45deg);display:none}
.tour-tip.arrow-top::before{display:block;top:-8px;left:calc(var(--ax) - 7px);border-right:0;border-bottom:0}
.tour-tip.arrow-bottom::before{display:block;bottom:-8px;left:calc(var(--ax) - 7px);border-left:0;border-top:0}
.tour-tip.arrow-left::before{display:block;left:-8px;top:calc(var(--ay) - 7px);border-right:0;border-top:0}
.tour-tip.arrow-right::before{display:block;right:-8px;top:calc(var(--ay) - 7px);border-left:0;border-bottom:0}
.tour-step{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);margin-bottom:6px}
.tour-tip h3{margin:0 0 8px;font-size:17px;font-weight:800;letter-spacing:-.01em;padding-inline-end:22px}
.tour-tip p{margin:0 0 16px;color:var(--tx-2);font-size:14px;line-height:1.55}
.tour-x{position:absolute;top:12px;inset-inline-end:12px;width:28px;height:28px;border:0;border-radius:8px;
  background:transparent;color:var(--tx-3);cursor:pointer;font-size:14px}
.tour-x:hover{background:var(--surface-2);color:var(--tx)}
.tour-foot{display:flex;align-items:center;gap:10px}
.tour-nav{width:32px;height:32px;border-radius:8px;border:1px solid var(--line-2);background:transparent;
  color:var(--tx);cursor:pointer;font-size:18px;line-height:1}
.tour-nav[disabled]{opacity:.3;cursor:default}
.tour-dots{flex:1;display:flex;justify-content:center;gap:6px}
.tour-dot{width:7px;height:7px;padding:0;border:0;border-radius:99px;background:var(--line-2);cursor:pointer;
  transition:width .25s,background .25s}
.tour-dot.on{width:20px;background:var(--accent-2)}
.tour-next{height:34px;padding:0 16px}
html.tour-on{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){ .tour,.tour-hole,.tour-tip,.tour-dot{transition:none} }

/* ---------------- phone approval page (/qr, qr.js) ---------------- */
.qrp{min-height:100vh;display:flex;flex-direction:column;padding:20px 16px 28px;max-width:460px;margin:0 auto}
.qrp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.qrp-card{background:var(--surface);border:1px solid var(--line-2);border-radius:20px;padding:24px 20px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);text-align:center}
.qrp-card h1{margin:4px 0 8px;font-size:22px;font-weight:800;letter-spacing:-.01em}
.qrp-card .sub{margin:0 0 18px;color:var(--tx-2);font-size:14px}
.qrp-ico{font-size:40px;line-height:1;margin-bottom:6px}
.qrp-dev{display:flex;align-items:center;gap:12px;text-align:start;padding:14px;border-radius:14px;
  background:var(--bg);border:1px solid var(--line);margin-bottom:12px}
.qrp-dev-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--accent-soft);color:var(--accent-2);font-size:20px}
.qrp-dev b{display:block;font-size:15px}
.qrp-dev span{display:block;color:var(--tx-3);font-size:12.5px}
.qrp-warn{padding:11px 13px;border-radius:12px;margin-bottom:12px;text-align:start;font-size:13px;line-height:1.45;
  background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.4);color:#fca5a5}
.qrp-as{font-size:13.5px;color:var(--tx-2);margin:6px 0 18px}
.qrp-as b{color:var(--tx)}
.qrp-pick{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);margin-bottom:10px}
.qrp-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.qrp-num{height:74px;border-radius:16px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--tx);
  font:inherit;font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;cursor:pointer;
  transition:transform .12s,border-color .15s,background .15s}
.qrp-num:hover{border-color:var(--accent);background:var(--surface-3)}
.qrp-num:active{transform:scale(.96)}
.qrp-num[disabled]{opacity:.5;cursor:default}
.qrp-time{height:4px;border-radius:99px;background:var(--line);overflow:hidden;margin:4px 0 16px}
.qrp-time i{display:block;height:100%;background:#fbbf24;transform-origin:left;animation:qrpTime linear forwards}
@keyframes qrpTime{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.qrp-steps{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 14px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2)}
.qrp-steps b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--tx-3)}
.qrp-steps b.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 4px var(--accent-soft)}
.qrp-steps b.done{background:rgba(74,222,128,.15);border-color:rgba(74,222,128,.5);color:#4ade80}
.qrp-steps i{width:18px;height:2px;background:var(--line-2);border-radius:2px}
.qrp-steps span{margin-inline-start:4px}
.qrp-login{text-align:start}
.qrp-res{font-size:52px;line-height:1;margin:6px 0 10px}
.qrp .linkbtn{font-size:13px}
.qrp-foot{margin-top:18px;text-align:center;font-size:12px;color:var(--tx-3)}

/* ---------------- panel · Discord link ---------------- */
.dc-state{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:var(--bg);
  border:1px solid var(--line);margin:0 0 16px}
.dc-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;background:#5865f2;color:#fff}
.dc-state b{display:block}
.dc-state span{display:block;color:var(--tx-3);font-size:12.5px}

/* ---------------- GGpedia (ggpedia.js) ----------------
   Two panes: index on the left (versions / articles), content on the right. */
.gp-hero{padding-bottom:26px}
.gp-page{padding-top:8px;padding-bottom:70px}
.gp-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 22px;scroll-margin-top:84px}
.gp-mode button{display:inline-flex;align-items:center;gap:8px}
.gp-search{position:relative;flex:1;min-width:220px;max-width:420px;margin-inline-start:auto}
.gp-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--tx-3);pointer-events:none}
.gp-search input{width:100%;height:40px;padding:0 12px 0 36px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--tx);font:inherit;font-size:14px}
.gp-search input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.gp-results{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;padding:6px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);max-height:360px;overflow:auto}
.gp-results a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:14px}
.gp-results a:hover{background:var(--surface-2)}
.gp-results small{margin-inline-start:auto;color:var(--tx-3);font-size:12px}
.gp-staff{position:relative}
.gp-staff[hidden],.gp-menu[hidden],.gp-results[hidden]{display:none}
.gp-staff .btn{display:inline-flex;align-items:center;gap:6px}
.gp-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:230px;padding:6px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-lg)}
.gp-menu button{display:block;width:100%;text-align:start;padding:9px 11px;border:0;border-radius:8px;background:none;
  color:var(--tx);font:inherit;font-size:14px;cursor:pointer}
.gp-menu button:hover{background:var(--surface-2)}

.gp{display:grid;grid-template-columns:280px minmax(0,1fr);gap:26px;align-items:start}
.gp-side{position:sticky;top:86px;max-height:calc(100vh - 110px);overflow:auto;padding:10px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line)}
.gp-picker{display:none}
.gp-side-q{width:100%;height:36px;margin:2px 0 8px;padding:0 10px;border-radius:9px;border:1px solid var(--line-2);
  background:var(--bg);color:var(--tx);font:inherit;font-size:13.5px}
.gp-side-empty{padding:18px 10px;color:var(--tx-3);font-size:13.5px;text-align:center}
.gp-list{display:flex;flex-direction:column;gap:2px}
.gp-group{margin:12px 8px 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3)}
.gp-group:first-child{margin-top:4px}
.gp-li{position:relative;display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;color:var(--tx-2);
  transition:background .15s,color .15s}
.gp-li:hover{background:var(--surface-2);color:var(--tx)}
.gp-li.on{background:var(--accent-soft);color:var(--tx)}
.gp-li.on::before{content:"";position:absolute;inset-inline-start:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--accent)}
.gp-li-t{display:flex;flex-direction:column;min-width:0;flex:1}
.gp-li-t b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gp-li-t small{font-size:12px;color:var(--tx-3)}
.gp-code{flex:none;display:grid;place-items:center;min-width:44px;height:30px;padding:0 6px;border-radius:8px;
  background:var(--surface-3);color:var(--accent-2);font-weight:800;font-size:13px;letter-spacing:.02em}
.gp-li.on .gp-code{background:var(--accent);color:#fff}
.gp-code.sm{min-width:0;height:22px;font-size:11.5px;margin-inline-end:8px;display:inline-grid}
.gp-draft{flex:none;padding:2px 7px;border-radius:99px;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:#fbbf24;border:1px solid rgba(251,191,36,.45);background:rgba(251,191,36,.1)}

.gp-main{min-width:0}
.gp-head{display:flex;gap:18px;align-items:flex-start;padding:22px;margin-bottom:18px;border-radius:18px;
  background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(139,92,246,.02) 60%),var(--surface);border:1px solid var(--line-2)}
.gp-head-code{flex:none;display:grid;place-items:center;width:74px;height:74px;border-radius:18px;background:var(--accent);
  color:#fff;font-size:24px;font-weight:800;box-shadow:0 10px 26px rgba(139,92,246,.35)}
.gp-head-t{flex:1;min-width:0}
.gp-head h2{margin:2px 0 4px;font-size:24px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gp-head-meta{color:var(--tx-3);font-size:13px}
.gp-head p{margin:10px 0 0;color:var(--tx-2);font-size:14.5px;line-height:1.55}
.gp-tools{display:flex;gap:6px;flex:none}
.gp-tools.sm{margin-inline-start:auto}
.gp-tool{width:32px;height:32px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--tx-2);
  cursor:pointer;font-size:14px;display:grid;place-items:center;transition:border-color .15s,color .15s}
.gp-tool:hover{border-color:var(--accent);color:#fff}
.gp-tool.danger:hover{border-color:#f87171}
.gp-tools.sm .gp-tool{width:28px;height:28px;font-size:13px}

.gp-cards{display:flex;flex-direction:column;gap:16px}
.gp-card{overflow:hidden;border-radius:18px;background:var(--surface);border:1px solid var(--line);
  transition:border-color .2s,transform .2s;scroll-margin-top:100px}
.gp-card:hover{border-color:var(--line-2)}
.gp-card:target{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.gp-card-b{padding:18px 20px 16px}
.gp-card-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.gp-card h3{margin:0 0 6px;font-size:18px;font-weight:700}
.gp-cat{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.gp-cat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.gp-media{display:block;width:100%;aspect-ratio:16/9;background:#0e0f11;border:0;padding:0;position:relative;overflow:hidden}
.gp-media img,.gp-media video,.gp-media iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.gp-media video{object-fit:contain;background:#000}
.gp-media.img{cursor:zoom-in}
.gp-media.img img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.gp-media.img:hover img{transform:scale(1.03)}
.gp-media.yt{cursor:pointer}
.gp-play{position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;display:grid;
  place-items:center;background:rgba(139,92,246,.92);color:#fff;font-size:24px;box-shadow:0 10px 30px rgba(0,0,0,.5);
  transition:transform .2s}
.gp-media.yt:hover .gp-play{transform:scale(1.08)}
.gp-article .gp-media{border-radius:14px;margin:0 0 18px}
.gp-lightbox{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:24px;background:rgba(8,9,12,.9);
  cursor:zoom-out;animation:qoIn .2s}
.gp-lightbox img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.gp-lightbox button{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--surface);color:var(--tx);cursor:pointer;font-size:16px}

/* article body markup (md() in ggpedia.js) */
.gp-body{color:var(--tx-2);font-size:14.5px;line-height:1.65}
.gp-body.lg{font-size:15.5px;line-height:1.75}
.gp-body p{margin:0 0 10px}
.gp-body h3{margin:22px 0 8px;color:var(--tx);font-size:18px;font-weight:700;scroll-margin-top:100px}
.gp-body ul,.gp-body ol{margin:0 0 12px;padding-inline-start:22px}
.gp-body li{margin:3px 0}
.gp-body li::marker{color:var(--accent-2)}
.gp-body b{color:var(--tx)}
.gp-body code{padding:1px 6px;border-radius:6px;background:var(--surface-3);color:var(--accent-2);font-size:.9em}
.gp-tip{margin:14px 0;padding:12px 14px;border-radius:12px;background:var(--accent-soft);border-inline-start:3px solid var(--accent);color:var(--tx)}
.gp-inimg{max-width:100%;border-radius:12px;margin:10px 0}

.gp-card-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.gp-more{margin-inline-start:auto;font-size:13.5px;color:var(--accent-2)}
.gp-more b{color:var(--tx)}
.gp-more:hover b{text-decoration:underline}
.gp-votes{position:relative;display:inline-flex;align-items:center;gap:6px}
.gp-vote{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--tx-2);font:inherit;font-size:13px;font-weight:600;
  transition:border-color .15s,color .15s,background .15s}
.gp-vote:hover{color:var(--tx);border-color:var(--tx-3)}
.gp-vote.up.on{color:#4ade80;border-color:rgba(74,222,128,.55);background:rgba(74,222,128,.1)}
.gp-vote.down.on{color:#f87171;border-color:rgba(248,113,113,.5);background:rgba(248,113,113,.1)}
.gp-vote.pop svg{animation:votePop .38s cubic-bezier(.34,1.6,.5,1)}
@keyframes votePop{40%{transform:scale(1.35) rotate(-8deg)}}
.gp-voters-btn{height:32px;padding:0 10px;border-radius:99px;border:1px dashed var(--line-2);background:none;color:var(--tx-3);
  font:inherit;font-size:12px;cursor:pointer}
.gp-voters-btn:hover{color:var(--accent-2);border-color:var(--accent)}
.gp-pop{position:absolute;bottom:calc(100% + 8px);inset-inline-start:0;z-index:40;width:290px;padding:10px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);animation:qoIn .2s}
.gp-pop-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:8px}
.gp-pop-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;border-radius:8px;border:0;
  background:var(--surface-2);color:var(--tx-2);font:inherit;font-size:12.5px;cursor:pointer}
.gp-pop-tabs button.on{background:var(--accent-soft);color:var(--tx)}
.gp-pop-q{width:100%;height:34px;padding:0 10px;margin-bottom:6px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--bg);color:var(--tx);font:inherit;font-size:13px}
.gp-pop-list{max-height:220px;overflow:auto}
.gp-pop-row{display:flex;align-items:center;gap:8px;padding:7px 6px;border-radius:7px;font-size:13px}
.gp-pop-row:hover{background:var(--surface-2)}
.gp-pop-row .chr{color:var(--accent-2);font-size:12px}
.gp-pop-row .at{margin-inline-start:auto;color:var(--tx-3);font-size:11.5px}
.gp-pop-empty{padding:14px 6px;text-align:center;color:var(--tx-3);font-size:13px}

/* encyclopedia article */
.gp-article{padding:26px 28px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.gp-crumbs{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx-3);margin-bottom:6px}
.gp-article h2{margin:0 0 8px;font-size:28px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gp-lead{margin:0 0 12px;color:var(--tx-2);font-size:16px;line-height:1.55}
.gp-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;color:var(--tx-3);font-size:12.5px}
.gp-chip{padding:4px 10px;border-radius:99px;background:var(--accent-soft);border:1px solid rgba(139,92,246,.35);color:var(--accent-2);font-weight:600}
.gp-chip:hover{border-color:var(--accent)}
.gp-toc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:12px 14px;margin-bottom:18px;border-radius:12px;
  background:var(--bg);border:1px solid var(--line);font-size:13px}
.gp-toc b{color:var(--tx-3);font-size:11px;letter-spacing:.08em;text-transform:uppercase;width:100%}
.gp-toc a{color:var(--accent-2)}
.gp-toc a:hover{text-decoration:underline}
.gp-related{display:flex;flex-direction:column;gap:6px;margin-top:22px;padding:14px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.gp-related b{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3)}
.gp-related a{display:flex;align-items:center;font-size:14px;color:var(--tx-2)}
.gp-related a:hover{color:var(--tx)}
.gp-helpful{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:16px;
  border-top:1px solid var(--line);color:var(--tx-2);font-size:14px}

/* staff editor */
.gp-modal{position:fixed;inset:0;z-index:1050;display:grid;place-items:center;padding:20px;background:rgba(8,9,12,.72);animation:qoIn .2s}
.gp-dialog{width:min(640px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;border-radius:18px;
  background:var(--surface);border:1px solid var(--line-2);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.gp-dialog-h{position:relative;padding:18px 20px 12px;border-bottom:1px solid var(--line)}
.gp-dialog-h h3{margin:0;font-size:17px}
.gp-dialog-b{padding:16px 20px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.gp-dialog-f{display:flex;justify-content:space-between;gap:10px;padding:12px 20px 16px;border-top:1px solid var(--line)}
.gp-f{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--tx-2)}
.gp-f small{font-weight:400;color:var(--tx-3)}
.gp-f input:not([type=radio]):not([type=checkbox]),.gp-f select,.gp-f textarea{width:100%;padding:9px 11px;border-radius:9px;
  border:1px solid var(--line-2);background:var(--bg);color:var(--tx);font:inherit;font-size:14px;font-weight:400}
.gp-f textarea{resize:vertical;line-height:1.5}
.gp-f input:focus,.gp-f select:focus,.gp-f textarea:focus{outline:0;border-color:var(--accent)}
.gp-f input[type=date]{color-scheme:dark}
.gp-media-pick{display:flex;flex-wrap:wrap;gap:12px}
.gp-radio{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:var(--tx-2);cursor:pointer}
.gp-radio input{accent-color:var(--accent)}
.gp-radio.pub{margin-top:4px}
.gp-media-in{display:flex;gap:8px}
.gp-media-in input{flex:1}
.gp-drop{margin-top:8px}
.gp-preview{padding:14px 20px 18px;border-top:1px dashed var(--line-2);max-height:260px;overflow:auto}
.gp-preview[hidden]{display:none}

@media (max-width:860px){
  .gp{grid-template-columns:1fr;gap:14px}
  .gp-side{position:static;max-height:none;padding:0;background:none;border:0}
  .gp-list,.gp-side-q{display:none}
  .gp-picker{display:block;width:100%;height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line-2);
    background:var(--surface);color:var(--tx);font:inherit;font-size:15px}
  .gp-search{max-width:none;margin-inline-start:0;flex-basis:100%}
  .gp-head{padding:16px;gap:12px}
  .gp-head-code{width:54px;height:54px;font-size:18px;border-radius:14px}
  .gp-article{padding:18px 16px}
  .gp-article h2{font-size:23px}
  .gp-more{margin-inline-start:0}
}
@media (prefers-reduced-motion:reduce){ .gp-media.img img,.gp-vote.pop svg{transition:none;animation:none} }

/* community: centred network name + phone icon; copy = an icon that appears on hover */
.qr-card .dl-head{justify-content:center}
.qr-card .dl-head h2{margin:0}
.qr-phone{color:var(--tx-3)}
.icon-copy{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--tx-2);
  opacity:0;transform:scale(.85);transition:opacity .18s,transform .18s,color .15s,border-color .15s}
.qr-card:hover .icon-copy,.qr-card:focus-within .icon-copy,.soc:hover .icon-copy,.soc:focus-within .icon-copy{opacity:1;transform:none}
.icon-copy:hover{color:var(--accent-2);border-color:var(--accent)}
.icon-copy.done{color:#4ade80;border-color:rgba(74,222,128,.5);background:rgba(74,222,128,.1);opacity:1;transform:none}
@media (hover:none){ .icon-copy{opacity:1;transform:none} }
.soc{position:relative;padding:0}
.soc-link{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:100%;color:inherit}
.soc-h{font-weight:600}
.soc-copy{position:absolute;inset-inline-end:10px;top:50%;margin-top:-17px}
.soc:hover .soc-copy{transform:none}

/* ---------------- staff CMS (cms.js · news-cms.js) + social publisher ---------------- */
.gp-dialog.wide{width:min(1040px,100%)}
.cms-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 18px;padding:10px 12px;border-radius:14px;
  background:linear-gradient(135deg,rgba(251,191,36,.10),rgba(251,191,36,.02));border:1px dashed rgba(251,191,36,.45)}
.cms-bar-t{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fbbf24;margin-inline-end:auto}
.cms-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 16px;padding:10px;border-radius:12px;
  background:var(--surface-2);border:1px dashed rgba(251,191,36,.45)}
.cms-danger:hover{border-color:#f87171;color:#fca5a5}
.cms-note{color:var(--tx-3);font-size:13px;margin:0 0 12px}
.cms-q{width:100%;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);color:var(--tx);font:inherit;margin-bottom:10px}
.cms-list{display:flex;flex-direction:column;gap:6px;max-height:62vh;overflow:auto}
.cms-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.cms-row-t{flex:1;min-width:0;display:flex;flex-direction:column}
.cms-row-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cms-row-t small{color:var(--tx-3);font-size:12px}
.cms-row code,.sc-env code{font-size:11px;padding:1px 5px;border-radius:5px;background:var(--surface-3);color:var(--accent-2)}
.cms-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px}
.cms-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.cms-count{font-weight:400;color:var(--tx-3)}
/* upload zone: drag & drop + preview */
.cms-drop{position:relative;display:flex;align-items:center;gap:12px;min-height:84px;padding:10px;border-radius:12px;cursor:pointer;
  border:1.5px dashed var(--line-2);background:var(--bg);transition:border-color .15s,background .15s;outline:0}
.cms-drop:hover,.cms-drop:focus-visible,.cms-drop.over{border-color:var(--accent);background:var(--accent-soft)}
.cms-drop.busy{opacity:.6;pointer-events:none}
.cms-prev{position:relative;flex:none;width:112px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--surface-2);display:none}
.cms-drop.has .cms-prev{display:block}
.cms-prev img,.cms-prev video{width:100%;height:100%;object-fit:cover;display:block}
.cms-badge{position:absolute;right:5px;bottom:5px;padding:1px 6px;border-radius:6px;background:rgba(0,0,0,.7);color:#fff;font-size:10.5px;font-weight:700}
.cms-drop-t{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--tx-2)}
.cms-drop-t span{font-size:11.5px;color:var(--tx-3);font-weight:400}
.cms-drop-msg{position:absolute;right:10px;bottom:6px;font-size:11.5px;color:var(--tx-3);font-weight:400}
.news-video{border-radius:14px;margin:0 0 18px}
.nx-thumb{position:relative}
.nx-play{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;display:grid;place-items:center;
  background:rgba(139,92,246,.92);color:#fff;font-size:14px}

/* publisher */
.sc-tabs{display:inline-flex;gap:4px;padding:4px;margin-bottom:14px;border-radius:12px;background:var(--surface-2)}
.sc-tabs button{height:34px;padding:0 14px;border:0;border-radius:9px;background:none;color:var(--tx-2);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.sc-tabs button.on{background:var(--accent);color:#fff}
.sc-pane[hidden]{display:none}
.sc-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;align-items:start}
.sc-pick{position:sticky;top:0;display:flex;flex-direction:column;gap:4px}
.sc-net{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:11px;border:1px solid var(--line);background:var(--bg);cursor:pointer}
.sc-net:has(input:checked){border-color:rgba(139,92,246,.55);background:var(--accent-soft)}
.sc-net.off{opacity:.55;cursor:not-allowed}
.sc-net input{accent-color:var(--accent)}
.sc-net-t{display:flex;flex-direction:column;min-width:0}
.sc-net-t b{font-size:13.5px}
.sc-net-t small{font-size:11px;color:var(--tx-3);line-height:1.3}
.sc-netlink{align-self:flex-start;margin-top:6px;font-size:12.5px}
.sc-ico{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff}
.sc-discord{background:#5865f2}.sc-telegram{background:#229ed9}.sc-facebook{background:#1877f2}
.sc-instagram{background:linear-gradient(45deg,#f58529,#dd2a7b 50%,#8134af)}.sc-youtube{background:#ff0033}
.sc-tiktok{background:#111;box-shadow:inset 0 0 0 1px #333}.sc-whatsapp{background:#25d366}
.sc-cards{display:flex;flex-direction:column;gap:12px;min-width:0}
.sc-card{border-radius:14px;border:1px solid var(--line-2);background:var(--bg);overflow:hidden}
.sc-card[hidden]{display:none}
.sc-card-h{display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid var(--line)}
.sc-kind{margin-inline-start:auto;font-size:11px;color:var(--tx-3);text-transform:uppercase;letter-spacing:.06em}
.sc-card-b{display:flex;gap:12px;padding:12px}
.sc-media{position:relative;flex:none;width:120px;border-radius:9px;overflow:hidden;background:var(--surface-2);align-self:flex-start}
.sc-media img,.sc-media video{width:100%;display:block}
.sc-edit{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.sc-edit textarea,.sc-edit input{width:100%;padding:9px 11px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);color:var(--tx);
  font:inherit;font-size:13.5px;line-height:1.5;resize:vertical}
.sc-edit input{font-weight:600}
.sc-edit textarea:focus,.sc-edit input:focus{outline:0;border-color:var(--accent)}
.sc-count{align-self:flex-end;font-size:11px;color:var(--tx-3)}
.sc-count.near{color:#fbbf24}
.sc-warn{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px;font-size:12px;color:#fcd34d}
.sc-foot-note{color:var(--tx-3);font-size:12.5px}
.sc-jobs{display:flex;flex-direction:column;gap:8px}
.sc-job{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.sc-job-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sc-job-m small{color:var(--tx-3);font-size:11.5px}
.sc-err{margin-top:4px;padding:6px 9px;border-radius:8px;background:rgba(248,113,113,.1);color:#fca5a5;font-size:12px;word-break:break-word}
.sc-note{margin-top:4px;font-size:12px;color:#fcd34d}
.sc-job-text{margin:6px 0 0;padding:8px 10px;border-radius:8px;background:var(--surface-2);font:inherit;font-size:12.5px;white-space:pre-wrap;max-height:130px;overflow:auto}
.sc-pill{flex:none;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--surface-3);color:var(--tx-2)}
.st-sent .sc-pill,.sc-pill.st-sent{background:rgba(74,222,128,.14);color:#4ade80}
.st-failed .sc-pill,.sc-pill.st-failed{background:rgba(248,113,113,.14);color:#f87171}
.st-queued .sc-pill,.st-sending .sc-pill{background:rgba(96,165,250,.14);color:#60a5fa}
.st-sending .sc-pill{animation:helpSoft 1.4s ease-in-out infinite}
.st-manual .sc-pill{background:rgba(251,191,36,.14);color:#fbbf24}
.sc-job-a{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:none;max-width:48%}
.sc-env{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 12px;font-size:12.5px}
.sc-env .ok,.sc-test-r.ok{color:#4ade80}.sc-env .bad,.sc-test-r.bad{color:#fca5a5}
.sc-test-r{font-size:12px;margin-top:3px;word-break:break-word}
@media (max-width:860px){
  .cms-grid,.sc-grid{grid-template-columns:1fr}
  .sc-pick{position:static;display:grid;grid-template-columns:1fr 1fr}
  .sc-card-b{flex-direction:column}
  .sc-media{width:100%;max-width:260px}
  .sc-job{flex-wrap:wrap}.sc-job-a{max-width:none;width:100%;justify-content:flex-start}
}
/* the `hidden` attribute must win over .btn's display (publisher footer, etc.) */
.btn[hidden]{display:none}

/* ---- CMS inside the account panel (staff) ---- */
.cm-desc{color:var(--tx-2);margin:0 0 16px;font-size:14px}
.cm-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.cm-bar #cmNew,.cm-bar #cmCalNew{margin-inline-start:auto}
.cm-in{height:36px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface-2);color:var(--tx);font:inherit;font-size:13.5px}
.cm-bar input.cm-in{flex:1;min-width:180px}
.cm-list{display:flex;flex-direction:column;gap:8px}
.cm-row{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);transition:border-color .15s,background .15s}
.cm-row:hover{border-color:var(--line-2);background:var(--surface-2)}
.cm-thumb{--cat:var(--accent);width:84px;aspect-ratio:16/9;flex:none;border-radius:8px;background:color-mix(in srgb,var(--cat) 30%,var(--surface-3)) center/cover no-repeat;display:grid;place-items:center}
.cm-thumb span{width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:10px;display:grid;place-items:center}
.cm-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cm-main b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-main small{font-size:12.5px;color:var(--tx-3);display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.cm-cat{--cat:var(--tx-3);display:inline-flex;align-items:center;gap:6px;color:var(--tx-2);font-weight:600}
.cm-cat i{width:8px;height:8px;border-radius:50%;background:var(--cat)}
.cm-st{flex:none;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;border:1px solid var(--line-2);color:var(--tx-3)}
.cm-st.st-published{color:#4ade80;border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.08)}
.cm-st.st-scheduled{color:#60a5fa;border-color:rgba(96,165,250,.35);background:rgba(96,165,250,.08)}
.cm-st.st-draft{color:#fbbf24;border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.08)}
.cm-acts{display:flex;gap:4px;flex:none}
.cm-ic{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;border:0;background:transparent;color:var(--tx-2);cursor:pointer;font-size:14px;text-decoration:none;transition:background .13s,color .13s}
.cm-ic:hover{background:var(--surface-3);color:var(--tx)}
.cm-ic.danger:hover{background:rgba(248,113,113,.12);color:#f87171}
.cm-empty{padding:28px;text-align:center;color:var(--tx-3);border:1px dashed var(--line-2);border-radius:12px}
.cm-month{display:flex;align-items:center;gap:6px}
.cm-month b{min-width:150px;text-align:center;text-transform:capitalize}
.cm-date{width:84px;flex:none;display:flex;flex-direction:column;gap:2px}
.cm-date b{font-size:14px}.cm-date small{font-size:11.5px;color:var(--tx-3)}
.cm-form{display:flex;flex-direction:column;gap:12px}
.cm-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cm-h{margin:26px 0 12px;font-size:15px}
.cm-jobnews{font-size:12px;color:var(--tx-3);margin:6px 2px -4px}
@media (max-width:640px){
  .cm-row{flex-wrap:wrap;gap:10px}
  .cm-thumb{width:64px}
  .cm-main{flex-basis:calc(100% - 80px)}
  .cm-acts{margin-inline-start:auto}
  .cm-bar #cmNew,.cm-bar #cmCalNew{margin-inline-start:0;width:100%}
  .cm-bar .cm-in{flex:1 1 40%;min-width:0}
  .cm-bar input.cm-in{flex-basis:100%}
  .cm-2{grid-template-columns:1fr}
}
/* News bodies: Markdown */
.news-content h2,.news-content h3,.news-content h4{margin:26px 0 10px;line-height:1.3}
.news-content h2{font-size:22px}.news-content h3{font-size:18px}.news-content h4{font-size:16px}
.news-content ul,.news-content ol{margin:0 0 16px;padding-inline-start:22px}
.news-content li{margin:4px 0}
.news-content a{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px}
.news-content blockquote{margin:0 0 16px;padding:8px 14px;border-inline-start:3px solid var(--accent);background:var(--surface-2);border-radius:0 8px 8px 0;color:var(--tx-2)}
.news-content code{padding:1px 6px;border-radius:5px;background:var(--surface-3);font-size:.9em}
.news-content hr{border:0;border-top:1px solid var(--line-2);margin:22px 0}
.cm-st.st-external{color:#f87171;border-color:rgba(248,113,113,.35);background:rgba(248,113,113,.08)}
.cm-ic:disabled{opacity:.3;cursor:not-allowed}

/* ---- publisher: switches + required mode + real-shape preview ---- */
.sc-grid{grid-template-columns:300px minmax(0,1fr)}
.sc-pick{max-height:70vh;overflow:auto;padding-right:2px}
.sc-net{display:flex;flex-direction:column;align-items:stretch;gap:8px;cursor:default;transition:border-color .15s,background .15s}
.sc-net.on{border-color:rgba(74,222,128,.45);background:rgba(74,222,128,.06)}
.sc-net-h{display:flex;align-items:center;gap:9px}
.sc-net-h .sc-net-t{flex:1}
.sc-sw{flex:none;width:40px;height:23px;border-radius:99px;border:0;background:var(--surface-3);position:relative;cursor:pointer;transition:background .18s}
.sc-sw i{position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.sc-sw[aria-checked=true]{background:#22c55e}
.sc-sw[aria-checked=true] i{transform:translateX(17px)}
.sc-sw:disabled{opacity:.4;cursor:not-allowed}
.sc-sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sc-modes{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.sc-modes[hidden]{display:none}
.sc-modes.need{border-color:rgba(251,191,36,.6);box-shadow:0 0 0 3px rgba(251,191,36,.12)}
.sc-modes-t{grid-column:1/-1;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.sc-modes.need .sc-modes-t{color:#fbbf24}
.sc-modes button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 9px;border-radius:9px;border:1px solid var(--line-2);
  background:var(--bg);color:var(--tx);font:inherit;text-align:start;cursor:pointer;transition:border-color .13s,background .13s}
.sc-modes button b{font-size:12.5px}
.sc-modes button small{font-size:10.5px;color:var(--tx-3);line-height:1.25}
.sc-modes button:hover:not(:disabled){border-color:var(--accent)}
.sc-modes button[aria-checked=true]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.sc-modes button[aria-checked=true] b::before{content:'● ';color:var(--accent-2)}
.sc-modes button:disabled{opacity:.4;cursor:not-allowed}
.sc-cards-h{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.sc-none{padding:30px;text-align:center;color:var(--tx-3);border:1px dashed var(--line-2);border-radius:12px}
.sc-none[hidden]{display:none}
.sc-kind.need{color:#fbbf24}
.sc-view{flex:none;width:210px}
.sc-view.shape-card,.sc-view.shape-chat,.sc-view.shape-post{width:250px}
.sc-pickfirst{padding:26px 12px;text-align:center;color:#fbbf24;font-size:12.5px;border:1px dashed rgba(251,191,36,.5);border-radius:12px}
.sc-phone{position:relative;aspect-ratio:9/16;width:100%;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 0 0 3px #2a2c31,0 8px 20px rgba(0,0,0,.4)}
.sc-phone img,.sc-phone video,.sc-media-f img,.sc-media-f video{width:100%;height:100%;object-fit:cover;display:block}
.sc-over{position:absolute;left:0;right:0;padding:10px;color:#fff;font-size:11.5px;line-height:1.35}
.sc-over.top{top:0;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.sc-over.bottom{bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.75));white-space:pre-line}
.sc-bar{display:block;height:2px;margin-top:8px;border-radius:2px;background:rgba(255,255,255,.85)}
.sc-who{display:flex;align-items:center;gap:7px;font-size:12px}
.sc-who .sc-ico{width:22px;height:22px;border-radius:50%}
.sc-who .sc-ico svg{width:12px;height:12px}
.sc-post{border-radius:12px;overflow:hidden;background:var(--surface);border:1px solid var(--line-2)}
.sc-post .sc-who{padding:9px 10px}
.sc-media-f{background:#000}
.shape-4x5 .sc-media-f{aspect-ratio:4/5}.shape-16x9 .sc-media-f{aspect-ratio:16/9}
.shape-post .sc-media-f,.shape-card .sc-media-f,.shape-chat .sc-media-f{aspect-ratio:auto;max-height:220px}
.shape-post .sc-media-f img,.shape-card .sc-media-f img,.shape-chat .sc-media-f img{height:auto;max-height:220px;object-fit:contain}
.sc-cap{padding:9px 10px;font-size:12px;line-height:1.4;color:var(--tx-2);white-space:pre-line}
.sc-linkcard{margin:0 10px 10px;padding:10px;border-radius:8px;background:var(--surface-3);font-size:12px;color:var(--tx-3)}
.sc-ph{width:100%;height:100%;min-height:120px;background:repeating-linear-gradient(45deg,#26282d 0 10px,#2c2e33 10px 20px)}
.sc-embed{padding:10px 12px;border-radius:6px;background:#2b2d31;border-inline-start:4px solid #8b5cf6;font-size:12px}
.sc-embed b{display:block;color:#fff;margin-bottom:5px}
.sc-embed p{margin:0 0 8px;color:#dbdee1;white-space:pre-line;line-height:1.4}
.sc-embed .sc-media-f{border-radius:6px;overflow:hidden}
.sc-bubble{border-radius:14px 14px 14px 4px;overflow:hidden;background:#1e2c3a;font-size:12px;color:#e8eef4}
.sc-bubble p{margin:0;padding:9px 11px;white-space:pre-line;line-height:1.4}
.sc-nocap{margin:2px 0 0;font-size:12px;color:var(--tx-3)}
.sc-nocap[hidden]{display:none}
.sc-foot-note.warn{color:#fbbf24;font-weight:600}
@media (max-width:860px){
  .sc-grid{grid-template-columns:1fr}
  .sc-pick{max-height:none;display:flex}
  .sc-view,.sc-view.shape-card,.sc-view.shape-chat,.sc-view.shape-post{width:100%;max-width:260px}
}
.sc-jmode{margin-inline-start:6px;padding:1px 7px;border-radius:99px;background:var(--accent-soft);color:var(--accent-2);font-size:11px;font-weight:700}
.sc-chan{display:flex;flex-direction:column;gap:5px;padding:8px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.sc-chan[hidden]{display:none}
.sc-chan span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.sc-chan select{height:34px;padding:0 10px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg);color:var(--tx);font:inherit;font-size:13px}
.sc-chan.need{border-color:rgba(251,191,36,.6);box-shadow:0 0 0 3px rgba(251,191,36,.12)}
.sc-chan.need span{color:#fbbf24}

/* ---- credential expiry traffic light (CMS → Connected networks) ---- */
.cm-tabs{margin-bottom:16px;display:inline-flex}
[data-spane][hidden]{display:none}
.cr-pill{flex:none;display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border-radius:99px;background:var(--bg);border:1px solid var(--line-2)}
.cr-i{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;cursor:help;flex:none}
.cr-i:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cr-i.st-ok{background:#16a34a}
.cr-i.st-warn{background:#eab308;color:#1a1b1e}
.cr-i.st-danger{background:#dc2626}
.cr-i.st-expired{background:#000;box-shadow:inset 0 0 0 1px #52525b;color:#a1a1aa}
.cr-i.st-unknown{background:var(--surface-3);color:var(--tx-3)}
.cr-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:-4px 0 14px;font-size:12px;color:var(--tx-3)}
.cr-legend .cr-i{width:12px;height:12px;cursor:default}
.cr-legend .linkbtn{margin-inline-start:auto}
@media (max-width:640px){.sc-conn .cr-pill{order:5}}

/* ---- publisher v3: several formats per network, fields per format ---- */
.sc-step{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);margin:0 0 4px}
.sc-modes button[aria-checked=true] b::before{content:'✓ ';color:var(--accent-2)}
.sc-card-b{align-items:flex-start}
.sc-edit{gap:10px}
.sc-fld{display:flex;flex-direction:column;gap:4px}
.sc-fld>span{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tx-3)}
.sc-fld select{height:36px;padding:0 10px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);color:var(--tx);font:inherit;font-size:13.5px}
.sc-fh{font-size:11.5px;color:var(--tx-3);line-height:1.35}
.sc-tog{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13.5px;cursor:pointer}
.sc-tog input{accent-color:var(--accent);width:16px;height:16px}
.sc-tog .sc-fh{flex-basis:100%;padding-inline-start:24px}
.sc-ov{position:absolute;left:7%;right:7%;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.62);border-inline-start:3px solid #8b5cf6;color:#fff;text-align:center;display:flex;flex-direction:column;gap:3px}
.sc-ov b{font-size:14px;line-height:1.2}.sc-ov span{font-size:11px;color:#e4e4e7}
.sc-ov.pos-top{top:12%}.sc-ov.pos-center{top:50%;transform:translateY(-50%)}.sc-ov.pos-bottom{bottom:10%}
.sc-ping{font-size:12px;color:#c9cdfb;background:rgba(88,101,242,.25);display:inline-block;padding:1px 6px;border-radius:4px;margin-bottom:6px}
.sc-media-f.spoiler img,.sc-media-f.spoiler video{filter:blur(18px)}
.st-deleted .sc-pill{background:var(--surface-3);color:var(--tx-3);text-decoration:line-through}
.st-deleted{opacity:.7}
/* ---- legal pages (/privacy, /terms) ---- */
.legal-main{max-width:820px;padding-top:110px;padding-bottom:70px}
.legal[hidden],.legal-only[hidden]{display:none}
.legal-only{margin:0 0 18px;padding:10px 14px;border-radius:10px;background:var(--accent-soft);color:var(--accent-2);font-size:14px}
.legal h1{font-size:clamp(28px,4vw,40px);margin:0 0 6px}
.legal-date{color:var(--tx-3);font-size:13.5px;margin:0 0 26px}
.legal h2{font-size:19px;margin:30px 0 10px}
.legal p,.legal li{color:var(--tx-2);line-height:1.75;font-size:15.5px}
.legal ul{padding-inline-start:22px;margin:0}
.legal li{margin:6px 0}
.legal b{color:var(--tx)}
.legal a{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px}
.sc-connect{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-top:8px}
.sc-connect small{font-size:11.5px;color:var(--tx-3);word-break:break-all}
.sc-connect small.bad{color:#fbbf24}
.sc-connect code{font-size:11px}