/* =====================================================================
   Member area component layer (auth, account dashboard, settings shell,
   trade lists, pokedex, trainer directory). Token-driven (var(--snk-*));
   depends on snk-remote-raids.css for the shared .rr-* primitives + --rr-live.
   Lifted verbatim from the approved mockups (docs/superpowers/mockups/auth/).
   ===================================================================== */

/* ---------- icon discipline (member scopes) ----------
   Same zero-specificity baseline as snk-remote-raids.css: standalone Lucide
   icons default to ~1rem; framed icons (.ico 2.2rem, .acct-tile .ic, etc.)
   opt UP via their own rules. :where() keeps this at specificity 0. */
:where(.snk-auth,.acct-grid,.acct-layout,.acct-side,.acct-panel,.trn-grid,.trn-card,.pdx-grid,.teampick) :where(i[data-lucide],svg.lucide){width:1rem;height:1rem}

/* ---- auth cards (sign-in / sign-up) ---- */
/* auth card uses an intentional larger 20px radius (focal, isolated card) — not the --rr-r-* component scale */
.snk-auth{max-width:450px;margin:1rem auto;padding:2rem 1.75rem;border:1px solid var(--snk-border);border-radius:20px;background:var(--snk-surface);box-shadow:0 14px 40px var(--snk-shadow)}
.snk-auth .ico{width:76px;height:76px;border-radius:20px;display:grid;place-items:center;margin:0 auto .9rem;background:linear-gradient(135deg,color-mix(in srgb,var(--snk-accent) 22%,var(--snk-surface)),var(--snk-surface));color:var(--snk-accent)}
.snk-auth .ico i{width:2.2rem;height:2.2rem}
.snk-auth h1{font-size:1.55rem;font-weight:800;text-align:center;letter-spacing:-.02em;margin:0 0 .35rem;color:var(--snk-text)}
.snk-auth .sub{text-align:center;color:var(--snk-text-muted);font-size:.9rem;margin-bottom:1.1rem;line-height:1.45}
.snk-auth hr{border:0;border-top:1px solid var(--snk-hairline);margin:1rem 0}
.snk-auth .field{margin-bottom:.9rem}
.snk-auth label{display:block;font-weight:700;font-size:.84rem;margin-bottom:.35rem;color:var(--snk-ink-700)}
.snk-auth label .opt{color:var(--snk-text-muted);font-weight:500}
.snk-auth .links{text-align:center;margin-top:1.1rem;font-size:.88rem;display:flex;flex-direction:column;gap:.4rem}
.snk-auth .links a{color:var(--snk-accent);text-decoration:none;font-weight:600}
.pw-reqs{list-style:none;padding:0;margin:.55rem 0 0;font-size:.78rem;display:grid;grid-template-columns:1fr 1fr;gap:.2rem .8rem}
.pw-reqs li{color:var(--snk-text-muted);display:flex;gap:.35rem;align-items:center}
.pw-reqs li::before{content:"○";font-weight:800}
.pw-reqs li.ok,.pw-reqs li.text-success{color:var(--snk-success)} .pw-reqs li.ok::before,.pw-reqs li.text-success::before{content:"✓"}
.pw-reqs li.text-danger{color:var(--snk-danger)}
/* bridge the existing sign-up JS (Bootstrap is-invalid) onto .rr-input */
.rr-input.is-invalid{border-color:var(--snk-danger)}
.rr-input.is-invalid ~ .invalid-feedback{display:block;color:var(--snk-danger);font-size:.78rem;margin-top:.25rem}
.terms-toggle{width:100%;border:1px solid var(--snk-border-strong);background:var(--snk-surface);border-radius:999px;padding:.65rem;font-weight:800;color:var(--snk-ink-700);cursor:pointer;display:flex;gap:.4rem;align-items:center;justify-content:center}
.terms-toggle.on{background:var(--snk-success);color:#fff;border-color:var(--snk-success)}
.terms-toggle.is-invalid{border-color:var(--snk-danger)}
.terms-note{font-size:.74rem;color:var(--snk-text-muted);text-align:center;margin-top:.5rem;line-height:1.4}
.terms-note a{color:var(--snk-accent)}
.teampick{display:flex;gap:.4rem}
.teampick button{flex:1;border:1px solid var(--snk-border-strong);background:var(--snk-surface);border-radius:var(--rr-r-md);padding:.5rem;font-weight:800;font-size:.8rem;cursor:pointer;color:var(--snk-ink-700)}
.teampick button.mystic.on{background:linear-gradient(135deg,#1b6ec2,#2aa5e6);color:#fff;border-color:transparent}
.teampick button.valor.on{background:linear-gradient(135deg,#d23b3b,#f0683f);color:#fff;border-color:transparent}
.teampick button.instinct.on{background:linear-gradient(135deg,#e0a800,#f5d042);color:#fff;border-color:transparent}

/* teamless hero fallback (rr-phero t-mystic/valor/instinct live in snk-remote-raids.css) */
.rr-phero.t-none{background:linear-gradient(135deg,#475569,#64748b)}

/* ---- account dashboard action grid ---- */
.acct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.acct-tile{position:relative;border:1px solid var(--snk-border);border-radius:var(--rr-r-lg);background:var(--snk-surface);padding:1.05rem .8rem;text-align:center;text-decoration:none;color:var(--snk-text);font-weight:700;font-size:.88rem;transition:.12s;display:flex;flex-direction:column;align-items:center;gap:.55rem}
.acct-tile:hover{transform:translateY(-3px);box-shadow:0 10px 24px var(--snk-shadow);border-color:var(--snk-accent)}
.acct-tile .ic{width:2.7rem;height:2.7rem;border-radius:var(--rr-r-md);display:grid;place-items:center;background:color-mix(in srgb,var(--snk-accent) 12%,var(--snk-surface));color:var(--snk-accent)}
.acct-tile.feature{border-color:color-mix(in srgb,var(--rr-live) 40%,var(--snk-border))}
.acct-tile.feature .ic{background:color-mix(in srgb,var(--rr-live) 14%,var(--snk-surface));color:var(--rr-live)}
.acct-tile .new{position:absolute;top:.5rem;right:.5rem;font-size:.6rem;font-weight:800;line-height:1;letter-spacing:.02em;background:var(--rr-live);color:#fff;border-radius:5px;padding:.15rem .32rem;text-transform:uppercase}

/* ---- account settings shell ---- */
.acct-layout{display:grid;grid-template-columns:230px 1fr;gap:1.2rem;align-items:start}
/* unframed content column (card-based pages: notifications, trainer codes) — min-width:0 stops the 1fr track blowing out on wide auto-fill grids */
.acct-col{min-width:0}
.acct-side{border:1px solid var(--snk-border);border-radius:var(--rr-r-lg);background:var(--snk-surface);padding:.55rem;position:sticky;top:5.5rem}
.acct-side a{display:flex;gap:.6rem;align-items:center;padding:.6rem .7rem;border-radius:var(--rr-r-sm);text-decoration:none;color:var(--snk-ink-700);font-weight:700;font-size:.87rem}
.acct-side a i{width:1.05rem;height:1.05rem}
.acct-side a.on{background:color-mix(in srgb,var(--snk-accent) 13%,var(--snk-surface));color:var(--snk-accent)}
.acct-side a.danger{color:var(--snk-danger)}
.acct-side a.acct-hub{color:var(--snk-text-muted);margin-bottom:.35rem;padding-bottom:.7rem;border-bottom:1px solid var(--snk-border);border-radius:0}
.acct-side a.acct-hub i{color:var(--snk-accent)}
.acct-panel{border:1px solid var(--snk-border);border-radius:var(--rr-r-lg);background:var(--snk-surface);padding:1.5rem 1.6rem}
.acct-panel h2{font-size:1.2rem;font-weight:800;margin:0 0 1.1rem;letter-spacing:-.01em;color:var(--snk-text)}
.avatar-row{display:flex;gap:1rem;align-items:center;margin-bottom:1.2rem}
.avatar-row .rr-av{width:72px;height:72px;font-size:1.7rem}
.chips-in{display:flex;gap:.4rem;flex-wrap:wrap}
.chip-tag{background:color-mix(in srgb,var(--snk-accent) 12%,var(--snk-surface));color:var(--snk-accent);border-radius:999px;padding:.3rem .65rem;font-weight:700;font-size:.8rem;display:inline-flex;gap:.3rem;align-items:center}
.switch-row{display:flex;align-items:center;gap:.7rem;padding:.75rem 0;border-top:1px solid var(--snk-hairline)}
.switch-row .lbl{font-weight:700;color:var(--snk-text)} .switch-row .lbl span{display:block;font-weight:500;color:var(--snk-text-muted);font-size:.8rem}
.switch{margin-left:auto;width:2.6rem;height:1.5rem;border-radius:999px;background:var(--snk-accent);position:relative;flex:0 0 auto;border:0;cursor:pointer}
.switch::after{content:"";position:absolute;top:.15rem;right:.15rem;width:1.2rem;height:1.2rem;border-radius:50%;background:#fff}
.switch.off{background:var(--snk-border-strong)} .switch.off::after{right:auto;left:.15rem}
textarea.rr-input{min-height:90px;resize:vertical}

/* ---- trainer directory ---- */
.trn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.8rem}
.trn-card{border:1px solid var(--snk-border);border-radius:var(--rr-r-lg);background:var(--snk-surface);padding:1rem}
.trn-card .fc{margin-top:.7rem;background:var(--snk-surface-3);border:1px dashed var(--snk-border-strong);border-radius:9px;padding:.4rem .6rem;font-weight:800;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:.4rem;color:var(--snk-text)}
.trn-card .fc button{margin-left:auto;border:0;background:var(--snk-accent);color:#fff;border-radius:7px;width:1.7rem;height:1.7rem;display:grid;place-items:center;cursor:pointer}
.trn-badges{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.6rem}
.trn-b{font-size:.72rem;font-weight:700;border-radius:7px;padding:.2rem .45rem;display:inline-flex;gap:.25rem;align-items:center}
.trn-b i{width:.85rem;height:.85rem}
.trn-b.raid{background:color-mix(in srgb,var(--rr-live) 13%,var(--snk-surface));color:var(--rr-live)}
.trn-b.trade{background:color-mix(in srgb,var(--snk-success) 14%,var(--snk-surface));color:var(--snk-success)}
.trn-b.gift{background:color-mix(in srgb,var(--snk-brand) 30%,var(--snk-surface));color:var(--rr-amber)}

/* ---- pokedex picker ---- */
.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:.4rem}
.pdx-cell{border:1px solid var(--snk-border);border-radius:var(--rr-r-sm);background:var(--snk-surface);padding:.3rem;text-align:center;position:relative;cursor:pointer}
.pdx-cell img{width:46px;height:46px;object-fit:contain}
.pdx-cell.owned{border-color:var(--snk-success);background:color-mix(in srgb,var(--snk-success) 9%,var(--snk-surface))}
.pdx-cell.owned::after{content:"✓";position:absolute;top:1px;right:5px;color:var(--snk-success);font-weight:800;font-size:.85rem}
.pdx-cell .dx{font-size:.6rem;color:var(--snk-text-muted)}

@media(max-width:760px){.acct-layout{grid-template-columns:1fr}.acct-side{position:static;display:flex;gap:.3rem;overflow:auto}.acct-side a{white-space:nowrap}}

/* mobile nav-offset: clear the floating bottom tab bar (visible ≤991.98px).
   --rr-botgap is defined in snk-remote-raids.css (loaded first). */
@media(max-width:991.98px){
  .acct-layout{padding-bottom:var(--rr-botgap,calc(3.6rem + env(safe-area-inset-bottom)))}
}

/* ============================================================
   Auth-friction components — lifted from the approved mockup
   (public_html/_auth-mock.html): social login, divider, soft
   verify banner, progressive-profile nudge, connected accounts.
   ============================================================ */

/* ---- social login buttons + divider (auth screens) ---- */
.social{display:flex;flex-direction:column;gap:.55rem}
.social-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.6rem;font-family:inherit;font-weight:700;font-size:.94rem;padding:.72rem 1rem;border-radius:var(--rr-r-md);cursor:pointer;border:1px solid var(--snk-border-strong);text-decoration:none}
.social-btn svg{width:19px;height:19px;flex:0 0 auto}
.social-btn.google{background:#fff;color:#1f2937;border-color:#dadce0}
html[data-bs-theme=dark] .social-btn.google{background:#fff;color:#1f2937}
.social-btn.apple{background:#000;color:#fff;border-color:#000}
html[data-bs-theme=dark] .social-btn.apple{background:#fff;color:#000;border-color:#fff}
.snk-auth .divider{display:flex;align-items:center;gap:.6rem;color:var(--snk-text-muted);font-size:.78rem;font-weight:600;margin:.9rem 0}
.snk-auth .divider::before,.snk-auth .divider::after{content:"";flex:1;height:1px;background:var(--snk-hairline)}

/* ---- soft email-verify banner ---- */
.verify-banner{display:flex;gap:.6rem;align-items:center;padding:.7rem .9rem;border-radius:var(--rr-r-md);background:color-mix(in srgb,var(--snk-warning) 15%,var(--snk-surface));border:1px solid color-mix(in srgb,var(--snk-warning) 40%,var(--snk-border));color:color-mix(in srgb,var(--snk-warning) 55%,var(--snk-text));margin-bottom:1rem}
.verify-banner .ic{flex:0 0 auto;display:grid;place-items:center}
.verify-banner .ic svg{width:20px;height:20px}
.verify-banner .tx{font-size:.82rem;line-height:1.35}.verify-banner .tx b{color:var(--snk-text)}
.verify-banner .x{margin-left:auto;color:var(--snk-text-muted);cursor:pointer;background:none;border:0;display:grid;place-items:center}
.verify-banner .mini-btn{border:0;border-radius:999px;padding:.3rem .75rem;font-weight:800;font-size:.74rem;cursor:pointer;background:var(--snk-warning);color:#3b2a05;white-space:nowrap;font-family:inherit;text-decoration:none}

/* ---- progressive-profile nudge (/me) ---- */
.nudge{border:1px solid var(--snk-border);background:var(--snk-surface);border-radius:var(--rr-r-lg);padding:.9rem 1rem;position:relative;margin-bottom:1rem}
.nudge h4{margin:0 0 .1rem;font-size:.95rem;font-weight:800;color:var(--snk-text)}
.nudge .p{color:var(--snk-text-muted);font-size:.8rem;margin-bottom:.6rem}
.nudge .x{position:absolute;top:.55rem;right:.65rem;color:var(--snk-text-muted);background:none;border:0;cursor:pointer;display:grid;place-items:center}
.nudge .progress{height:8px;border-radius:8px;background:var(--snk-border);overflow:hidden;margin:.2rem 0 .35rem}
.nudge .progress i{display:block;height:100%;background:linear-gradient(90deg,var(--snk-accent),var(--snk-accent-2))}
.nudge .pct{font-size:.74rem;color:var(--snk-text-muted);margin-bottom:.6rem}
.chiprow{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{border:1px dashed var(--snk-border-strong);background:var(--snk-surface-3);border-radius:999px;padding:.32rem .7rem;font-size:.78rem;font-weight:700;color:var(--snk-accent);cursor:pointer;display:inline-flex;gap:.3rem;align-items:center;text-decoration:none}
.chip.done{border-style:solid;color:var(--snk-success);background:color-mix(in srgb,var(--snk-success) 12%,var(--snk-surface))}
.chip svg{width:14px;height:14px}

/* ---- connected accounts (rows inside an .acct-panel) ---- */
.acc{display:flex;align-items:center;gap:.7rem;padding:.8rem 0;border-top:1px solid var(--snk-hairline)}
.acc:first-of-type{border-top:0}
.acc .ai{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--snk-surface-3);border:1px solid var(--snk-hairline);flex:0 0 auto}
.acc .ai svg{width:18px;height:18px}
.acc .an{font-weight:700;font-size:.9rem;color:var(--snk-text)}.acc .as{font-size:.78rem;color:var(--snk-text-muted)}
.acc .act{margin-left:auto}
.pill-ok{font-size:.72rem;font-weight:800;color:var(--snk-success);background:color-mix(in srgb,var(--snk-success) 14%,var(--snk-surface));border-radius:999px;padding:.22rem .6rem;display:inline-flex;gap:.25rem;align-items:center}
.pill-ok svg{width:13px;height:13px}
.pill-link{font-size:.78rem;font-weight:800;color:var(--snk-accent);background:none;border:0;cursor:pointer;font-family:inherit;text-decoration:none}

/* --- Restored signup: show/hide password, inline terms, email hint (2026-07-03) --- */
.snk-pw-wrap { position: relative; }
.snk-pw-wrap .rr-input { padding-right: 2.6rem; }
.snk-pw-eye {
  position: absolute; top: 0; right: 0; height: 100%; width: 2.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--snk-text-muted);
}
.snk-pw-eye:hover { color: var(--snk-accent); }
.snk-pw-eye i { width: 18px; height: 18px; }
.snk-terms-inline {
  font-size: .74rem; line-height: 1.45; color: var(--snk-text-muted);
  text-align: center; margin: .7rem 0 0;
}
.snk-terms-inline a { color: var(--snk-accent); text-decoration: none; }
.snk-terms-inline a:hover { text-decoration: underline; }
.snk-email-hint {
  font-size: .78rem; margin-top: .35rem; color: var(--snk-danger);
  display: flex; align-items: center; gap: .35rem;
}
.snk-email-hint a { color: var(--snk-accent); font-weight: 600; text-decoration: none; }

/* --- Unified /sign-in: Log in / Create account segmented control (2026-07-03) --- */
.snk-auth-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: .3rem;
  background: color-mix(in srgb, var(--snk-text) 6%, var(--snk-surface));
  border-radius: 999px; padding: .25rem; margin: .2rem 0 1rem;
}
.snk-auth-seg-btn {
  border: 0; background: transparent; border-radius: 999px;
  padding: .5rem .4rem; font-weight: 600; font-size: .9rem;
  color: var(--snk-text-muted); cursor: pointer; transition: background .15s, color .15s;
}
.snk-auth-seg-btn.is-active {
  background: var(--snk-surface); color: var(--snk-text);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* =====================================================================
   /me COMMAND CENTER (2026-07-03) — lifted from the approved mockup
   (_mockups/member/). Token-driven (var(--snk-*) + --rr-r-*), depends on
   snk-remote-raids.css primitives (.rr-phero/.rr-boss/.rr-btn/--rr-live).
   Scope class: .cc on the page shell. Prefix: .cc- (hub) / .set- (settings).
   ===================================================================== */

/* icon discipline: standalone lucide icons ~1rem inside the command center */
.cc :where(i[data-lucide],svg.lucide){width:1rem;height:1rem}

/* ---------- page rhythm ---------- */
.cc{--cc-gap:1.1rem}
/* --- Global-bleed guards. header.php's inline <style> loads on every live page
   (h1..h5{color:var(--snk-ink-800)}, a/a:hover{color}, body{line-height:26px})
   but the standalone mockup never loads it, so the live hub drifted from the
   mockup. Neutralise the spacing + hover bleed here, scoped to the hub, so /me
   renders 1:1 with _mockups/member/. The hero-title colour guard sits on the
   .cc-hero-id h1 rule itself; body line-height should ideally become unitless
   site-wide (follow-up), but this keeps the fix contained to the member area. --- */
.cc,.cc-overlay{line-height:normal}
.cc-watchline:hover,.cc-np-see:hover{color:var(--snk-accent)}
.cc .rr-sec{display:flex;align-items:center;gap:.5rem;margin:1.5rem 0 .7rem}
.cc .rr-sec .cc-sec-act{margin-left:auto;font-size:.8rem;font-weight:700;color:var(--snk-accent);text-decoration:none;display:inline-flex;align-items:center;gap:.25rem}
.cc .rr-sec .cc-sec-act i{width:.9rem;height:.9rem}

/* ---------- refined identity hero (team-gradient band) ---------- */
.cc-hero{position:relative;overflow:hidden;border-radius:18px;padding:1.25rem 1.4rem;color:#fff;
  box-shadow:0 10px 30px color-mix(in srgb,var(--snk-shadow) 60%,transparent)}
.cc-hero.t-valor   {background:linear-gradient(135deg,#d23b3b,#f0683f)}
.cc-hero.t-mystic  {background:linear-gradient(135deg,#1b6ec2,#2aa5e6)}
.cc-hero.t-instinct{background:linear-gradient(135deg,#e0a800,#f5d042)}
.cc-hero.t-none    {background:linear-gradient(135deg,#475569,#64748b)}
.cc-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 140% at 88% -20%,rgba(255,255,255,.28),transparent 55%);pointer-events:none}
.cc-hero>*{position:relative;z-index:1}
.cc-hero-top{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.cc-hero-av{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  display:grid;place-items:center;font-weight:800;font-size:1.5rem;color:#fff;
  background:rgba(255,255,255,.18);box-shadow:0 0 0 4px rgba(255,255,255,.35)}
.cc-hero-id{min-width:0}
/* color:inherit → stays white from .cc-hero; beats global h1{color:var(--snk-ink-800)} on live */
.cc-hero-id h1{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.15;color:inherit}
.cc-hero-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.35rem;font-size:.86rem;font-weight:600}
.cc-hero-meta .mchip{display:inline-flex;align-items:center;gap:.32rem;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:.16rem .55rem;line-height:1;backdrop-filter:blur(2px)}
.cc-hero-meta .mchip i{width:.85rem;height:.85rem}
.cc-hero-actions{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.cc-hpill{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.84rem;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:.4rem .75rem;transition:.14s}
.cc-hpill:hover{background:rgba(255,255,255,.28);color:#fff}
/* solid pill sits on the coloured hero in BOTH themes → fixed dark ink, not a theme token */
.cc-hpill.solid{background:#fff;color:#1d2939;border-color:#fff}
.cc-hpill.solid:hover{background:rgba(255,255,255,.9);color:#1d2939}
.cc-hpill.icon{padding:.4rem;width:2.05rem;height:2.05rem;justify-content:center}
.cc-hpill i{width:1rem;height:1rem}
.cc-hero-note{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;font-size:.76rem;font-weight:600;
  color:rgba(255,255,255,.92);background:rgba(0,0,0,.14);border-radius:999px;padding:.3rem .7rem}
.cc-hero-note i{width:.85rem;height:.85rem;flex:0 0 auto}

/* ---------- dashboard grid ---------- */
.cc-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:var(--cc-gap);align-items:start;margin-top:1.2rem}
.cc-col{display:flex;flex-direction:column;gap:var(--cc-gap);min-width:0}

/* ---------- generic card ---------- */
.cc-card{border:1px solid var(--snk-border);border-radius:var(--rr-r-lg);background:var(--snk-surface);
  box-shadow:0 1px 2px var(--snk-shadow)}
.cc-card-pad{padding:1.05rem 1.15rem}
.cc-card-h{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:.95rem;color:var(--snk-text);letter-spacing:-.01em}
.cc-card-h .sub{margin-left:auto;font-size:.78rem;font-weight:700;color:var(--snk-text-muted)}
.cc-card-h .lnk{margin-left:auto;font-size:.8rem;font-weight:700;color:var(--snk-accent);text-decoration:none;display:inline-flex;align-items:center;gap:.25rem}
.cc-card-h .lnk i{width:.9rem;height:.9rem}

/* ---------- "Right now" primary command card ---------- */
.cc-now{position:relative;border:1px solid color-mix(in srgb,var(--snk-accent) 26%,var(--snk-border));
  border-radius:var(--rr-r-lg);padding:1.1rem 1.2rem;
  background:radial-gradient(120% 160% at 100% 0,color-mix(in srgb,var(--snk-accent) 12%,var(--snk-surface)),var(--snk-surface) 60%);
  box-shadow:0 4px 18px color-mix(in srgb,var(--snk-accent) 12%,transparent)}
.cc-now-live{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-bottom:.95rem}
.cc-lc{display:flex;flex-direction:column;line-height:1}
.cc-lc .n{font-size:1.5rem;font-weight:800;color:var(--snk-text);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:.4rem}
.cc-lc .n .rr-livedot,.cc-livedot{width:.55rem;height:.55rem;border-radius:50%;background:var(--rr-live,#e0392b);position:relative;flex:0 0 auto}
.cc-lc .n .rr-livedot::after,.cc-livedot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--rr-live,#e0392b);opacity:.5;animation:cc-ping 1.8s ease-out infinite}
@keyframes cc-ping{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.cc-lc .n .rr-livedot::after,.cc-livedot::after{animation:none}}
.cc-lc .l{font-size:.74rem;font-weight:700;color:var(--snk-text-muted);text-transform:uppercase;letter-spacing:.04em;margin-top:.3rem}
.cc-now-cta{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.cc-bigbtn{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-decoration:none;border-radius:var(--rr-r-md);
  padding:.85rem 1rem;font-weight:800;font-size:1rem;border:1px solid transparent;transition:.14s;line-height:1.1}
.cc-bigbtn .cc-bb-sub{font-size:.74rem;font-weight:600;opacity:.85}
.cc-bigbtn i{width:1.15rem;height:1.15rem}
.cc-bigbtn .cc-bb-top{display:flex;align-items:center;gap:.45rem}
.cc-bigbtn.host{background:var(--snk-brand);color:#32414A;box-shadow:0 4px 14px color-mix(in srgb,var(--snk-brand) 40%,transparent)}
.cc-bigbtn.host:hover{transform:translateY(-2px);box-shadow:0 8px 20px color-mix(in srgb,var(--snk-brand) 45%,transparent)}
.cc-bigbtn.find{background:var(--snk-accent);color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--snk-accent) 35%,transparent)}
.cc-bigbtn.find:hover{transform:translateY(-2px);box-shadow:0 8px 20px color-mix(in srgb,var(--snk-accent) 42%,transparent)}
.cc-watchline{display:flex;align-items:center;gap:.4rem;margin-top:.85rem;font-size:.82rem;font-weight:700;color:var(--snk-accent);text-decoration:none}
.cc-watchline i{width:.95rem;height:.95rem}
.cc-watchline .dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--rr-live,#e0392b)}

/* ---------- live status banner (active state) ---------- */
.cc-status{display:flex;align-items:center;gap:.8rem;border-radius:var(--rr-r-md);padding:.7rem .9rem;margin-bottom:.9rem;
  border:1px solid var(--snk-border);background:var(--snk-surface)}
.cc-status .ic{width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;color:#fff}
.cc-status .ic i{width:1.05rem;height:1.05rem}
.cc-status .bd{min-width:0;flex:1 1 auto}
.cc-status .bd b{display:block;font-size:.92rem;color:var(--snk-text);font-weight:800}
.cc-status .bd span{font-size:.78rem;color:var(--snk-text-muted)}
.cc-status.is-queue{border-color:color-mix(in srgb,var(--snk-accent) 40%,var(--snk-border));background:color-mix(in srgb,var(--snk-accent) 8%,var(--snk-surface))}
.cc-status.is-queue .ic{background:var(--snk-accent)}
.cc-status.is-host{border-color:color-mix(in srgb,var(--snk-brand) 55%,var(--snk-border));background:color-mix(in srgb,var(--snk-brand) 18%,var(--snk-surface))}
.cc-status.is-host .ic{background:#c99a1e}
.cc-status.is-lobby{border-color:color-mix(in srgb,var(--snk-success) 45%,var(--snk-border));background:color-mix(in srgb,var(--snk-success) 9%,var(--snk-surface))}
.cc-status.is-lobby .ic{background:var(--snk-success)}
.cc-status .rr-btn{flex:0 0 auto}

/* ---------- attention / library rows ---------- */
.cc-rows{display:flex;flex-direction:column}
.cc-row{display:flex;align-items:center;gap:.75rem;padding:.75rem .3rem;text-decoration:none;border-top:1px solid var(--snk-hairline)}
.cc-row:first-child{border-top:0}
.cc-row .ic{width:2.35rem;height:2.35rem;border-radius:var(--rr-r-sm);display:grid;place-items:center;flex:0 0 auto;
  background:color-mix(in srgb,var(--snk-accent) 12%,var(--snk-surface));color:var(--snk-accent)}
.cc-row .ic i{width:1.15rem;height:1.15rem}
.cc-row .tx{min-width:0;flex:1 1 auto}
.cc-row .tx b{display:block;font-size:.9rem;font-weight:700;color:var(--snk-text);line-height:1.2}
.cc-row .tx span{font-size:.78rem;color:var(--snk-text-muted)}
.cc-row .cnt{flex:0 0 auto;min-width:1.5rem;height:1.5rem;padding:0 .45rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:800;font-variant-numeric:tabular-nums;background:var(--snk-surface-3);color:var(--snk-text-muted)}
.cc-row .cnt.alert{background:var(--rr-live,#e0392b);color:#fff}
.cc-row .chev{flex:0 0 auto;color:var(--snk-text-muted)}
.cc-row .chev i{width:1.1rem;height:1.1rem}
.cc-row:hover .tx b{color:var(--snk-accent)}
.cc-row:hover{background:color-mix(in srgb,var(--snk-accent) 5%,transparent);border-radius:var(--rr-r-sm)}
.cc-row.trade .ic{background:color-mix(in srgb,var(--snk-success) 14%,var(--snk-surface));color:var(--snk-success)}
.cc-row.match .ic{background:color-mix(in srgb,var(--snk-accent) 13%,var(--snk-surface));color:var(--snk-accent)}
.cc-row.notif .ic{background:color-mix(in srgb,var(--snk-warning) 16%,var(--snk-surface));color:var(--snk-warning)}

/* ---------- wallet card ---------- */
.cc-wallet .top{display:flex;align-items:flex-start;gap:.9rem}
.cc-wallet .tok{display:flex;flex-direction:column;line-height:1}
.cc-wallet .tok .big{font-size:2.1rem;font-weight:800;color:var(--snk-text);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:.35rem}
.cc-wallet .tok .big i{width:1.5rem;height:1.5rem;color:var(--snk-brand)}
.cc-wallet .tok .lab{font-size:.76rem;font-weight:700;color:var(--snk-text-muted);text-transform:uppercase;letter-spacing:.04em;margin-top:.25rem}
.cc-wallet .plan{margin-left:auto;font-size:.72rem;font-weight:800;color:var(--snk-ink-600);background:var(--snk-surface-3);border:1px solid var(--snk-hairline);border-radius:999px;padding:.25rem .6rem}
.cc-daily{display:flex;align-items:center;gap:.6rem;margin-top:.9rem;padding:.6rem .75rem;border-radius:var(--rr-r-md);
  border:1px dashed color-mix(in srgb,var(--snk-success) 45%,var(--snk-border));background:color-mix(in srgb,var(--snk-success) 9%,var(--snk-surface))}
.cc-daily .ic{color:var(--snk-success)}
.cc-daily .tx{font-size:.8rem;font-weight:700;color:var(--snk-text);flex:1 1 auto}
.cc-daily .tx span{display:block;font-weight:500;color:var(--snk-text-muted);font-size:.74rem}
.cc-daily.waiting{border-style:solid;border-color:var(--snk-border);background:var(--snk-surface-3)}
/* claimed = done, not disabled → success-tinted check reads positive */
.cc-daily.waiting .ic{color:var(--snk-success)}
.cc-wallet .btns{display:flex;gap:.5rem;margin-top:.8rem}
.cc-wallet .btns .rr-btn{flex:1}

/* ---------- stat tiles ---------- */
.cc-statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem}
.cc-stat{border:1px solid var(--snk-border);border-radius:var(--rr-r-md);background:var(--snk-surface-3);padding:.7rem .4rem;text-align:center}
.cc-stat .n{font-size:1.25rem;font-weight:800;color:var(--snk-text);font-variant-numeric:tabular-nums;line-height:1}
.cc-stat .l{font-size:.68rem;font-weight:700;color:var(--snk-text-muted);text-transform:uppercase;letter-spacing:.03em;margin-top:.25rem}
.cc-stat.accent .n{color:var(--snk-accent)}

/* ---------- profile completeness (slim) ---------- */
.cc-pc{display:flex;align-items:center;gap:.85rem}
.cc-ring{--p:75;flex:0 0 auto;width:3.2rem;height:3.2rem;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--snk-accent) calc(var(--p)*1%),var(--snk-border) 0)}
.cc-ring::before{content:"";position:absolute;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--snk-surface)}
.cc-ring span{position:relative;font-size:.78rem;font-weight:800;color:var(--snk-text);font-variant-numeric:tabular-nums}
.cc-pc .bd{min-width:0}
.cc-pc .bd b{font-size:.9rem;font-weight:800;color:var(--snk-text)}
.cc-pc .bd p{margin:.1rem 0 .4rem;font-size:.78rem;color:var(--snk-text-muted)}
.cc-pc .chips{display:flex;flex-wrap:wrap;gap:.35rem}
.cc-pc .chip{border:1px dashed var(--snk-border-strong);background:var(--snk-surface-3);border-radius:999px;padding:.22rem .55rem;font-size:.73rem;font-weight:700;color:var(--snk-accent);text-decoration:none;display:inline-flex;gap:.25rem;align-items:center}
.cc-pc .chip.done{border-style:solid;color:var(--snk-success);background:color-mix(in srgb,var(--snk-success) 12%,var(--snk-surface))}
.cc-pc .chip i{width:.8rem;height:.8rem}

/* ---------- app-install slim banner ---------- */
.cc-appbar{display:flex;align-items:center;gap:.8rem;border-radius:var(--rr-r-md);padding:.75rem .9rem;
  border:1px solid color-mix(in srgb,var(--snk-accent) 28%,var(--snk-border));background:color-mix(in srgb,var(--snk-accent) 7%,var(--snk-surface))}
.cc-appbar .ic{width:2.3rem;height:2.3rem;border-radius:var(--rr-r-sm);display:grid;place-items:center;flex:0 0 auto;background:var(--snk-accent);color:#fff}
.cc-appbar .bd{flex:1 1 auto;min-width:0}
.cc-appbar .bd b{display:block;font-size:.88rem;font-weight:800;color:var(--snk-text)}
.cc-appbar .bd span{font-size:.78rem;color:var(--snk-text-muted)}
.cc-appbar .rr-btn{flex:0 0 auto}

/* ---------- today on snacknap ---------- */
.cc-today{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem}
.cc-tcard{display:flex;gap:.6rem;align-items:center;border:1px solid var(--snk-border);border-radius:var(--rr-r-md);
  background:var(--snk-surface);padding:.6rem .7rem;text-decoration:none}
.cc-tcard img{width:38px;height:38px;object-fit:contain;flex:0 0 auto}
.cc-tcard .tx b{display:block;font-size:.82rem;font-weight:800;color:var(--snk-text);line-height:1.15}
.cc-tcard .tx span{font-size:.72rem;color:var(--snk-text-muted)}
.cc-tcard .kick{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--snk-accent)}

/* ---------- demoted account footer ---------- */
.cc-account{margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--snk-border)}
.cc-account-h{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--snk-text-muted);margin-bottom:.7rem}
.cc-acclist{display:flex;flex-wrap:wrap;gap:.5rem}
.cc-acclink{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--snk-border);background:var(--snk-surface);
  border-radius:999px;padding:.45rem .8rem;font-size:.83rem;font-weight:700;color:var(--snk-ink-700);text-decoration:none;transition:.12s}
.cc-acclink:hover{border-color:var(--snk-accent);color:var(--snk-accent)}
.cc-acclink i{width:.95rem;height:.95rem;color:var(--snk-text-muted)}
.cc-acclink:hover i{color:var(--snk-accent)}
.cc-accfoot{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:900px){.cc-grid{grid-template-columns:1fr}}
@media (max-width:560px){
  .cc-hero{padding:1.1rem}
  .cc-hero-id h1{font-size:1.3rem}
  .cc-hero-actions{width:100%;margin-left:0}
  .cc-now-cta{grid-template-columns:1fr}
  .cc-now-live{gap:1rem}
  .cc-lc .n{font-size:1.3rem}
  .cc-statgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:991.98px){.cc-account{padding-bottom:calc(3.6rem + env(safe-area-inset-bottom))}}

/* ---------- settings shell (demoted account pages) ---------- */
.set-head{display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem}
.set-head .back{width:2.2rem;height:2.2rem;border-radius:var(--rr-r-sm);border:1px solid var(--snk-border);background:var(--snk-surface);display:grid;place-items:center;color:var(--snk-text-muted);text-decoration:none}
.set-head .back:hover{color:var(--snk-accent);border-color:var(--snk-accent)}
.set-head h1{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;margin:0;color:var(--snk-text)}
.set-head p{margin:.1rem 0 0;font-size:.83rem;color:var(--snk-text-muted)}
.set-layout{display:grid;grid-template-columns:240px 1fr;gap:1.3rem;align-items:start}
.set-side{border:1px solid var(--snk-border);border-radius:var(--rr-r-lg);background:var(--snk-surface);padding:.5rem;position:sticky;top:5.5rem;box-shadow:0 1px 2px var(--snk-shadow)}
.set-side-label{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--snk-text-muted);padding:.7rem .7rem .3rem}
.set-side a{display:flex;gap:.65rem;align-items:center;padding:.58rem .7rem;border-radius:var(--rr-r-sm);text-decoration:none;color:var(--snk-ink-700);font-weight:700;font-size:.87rem}
.set-side a i{width:1.05rem;height:1.05rem;color:var(--snk-text-muted)}
.set-side a:hover{background:var(--snk-surface-3)}
.set-side a.on{background:color-mix(in srgb,var(--snk-accent) 13%,var(--snk-surface));color:var(--snk-accent)}
.set-side a.on i{color:var(--snk-accent)}
.set-side a.danger{color:var(--snk-danger)} .set-side a.danger i{color:var(--snk-danger)}
.set-side .div{height:1px;background:var(--snk-hairline);margin:.4rem .3rem}
.set-side .set-hub{color:var(--snk-text-muted)} .set-side .set-hub i{color:var(--snk-accent)}
.set-panel{border:1px solid var(--snk-border);border-radius:var(--rr-r-lg);background:var(--snk-surface);padding:1.5rem 1.6rem;box-shadow:0 1px 2px var(--snk-shadow)}
.set-panel h2{font-size:1.15rem;font-weight:800;margin:0 0 .3rem;letter-spacing:-.01em;color:var(--snk-text)}
.set-panel .lead{font-size:.84rem;color:var(--snk-text-muted);margin:0 0 1.3rem}
.set-avatar{display:flex;gap:1rem;align-items:center;margin-bottom:1.4rem;padding-bottom:1.4rem;border-bottom:1px solid var(--snk-hairline)}
.set-avatar img,.set-avatar .ph{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--snk-surface-3);display:grid;place-items:center}
.set-field{margin-bottom:1.05rem}
.set-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.set-field label{display:block;font-weight:700;font-size:.82rem;margin-bottom:.35rem;color:var(--snk-ink-700)}
.set-field .hint{font-size:.75rem;color:var(--snk-text-muted);margin-top:.3rem}
.set-actions{display:flex;gap:.6rem;margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--snk-hairline)}
@media(max-width:760px){
  .set-layout{grid-template-columns:1fr}
  .set-side{position:static;display:flex;gap:.3rem;overflow:auto;padding:.4rem}
  .set-side .set-side-label,.set-side .div{display:none}
  .set-side a{white-space:nowrap}
  .set-2{grid-template-columns:1fr}
}

/* ---------- overlays: modal / bottom-sheet / notifications panel / toast / empty ---------- */
.cc-modal{width:100%;max-width:400px;border:1px solid var(--snk-border);border-radius:18px;background:var(--snk-surface);
  box-shadow:0 24px 70px rgba(2,8,20,.4);padding:1.6rem;text-align:center;position:relative}
.cc-modal .x{position:absolute;top:.9rem;right:.9rem;color:var(--snk-text-muted);background:none;border:0;cursor:pointer;display:grid;place-items:center}
.cc-modal .mico{width:66px;height:66px;border-radius:20px;display:grid;place-items:center;margin:0 auto 1rem}
.cc-modal .mico i{width:2rem;height:2rem}
.cc-modal .mico.good{background:color-mix(in srgb,var(--snk-success) 16%,var(--snk-surface));color:var(--snk-success)}
.cc-modal .mico.gold{background:color-mix(in srgb,var(--snk-brand) 32%,var(--snk-surface));color:#b9891a}
.cc-modal .mico.bad{background:color-mix(in srgb,var(--snk-danger) 15%,var(--snk-surface));color:var(--snk-danger)}
.cc-modal .mico.accent{background:color-mix(in srgb,var(--snk-accent) 15%,var(--snk-surface));color:var(--snk-accent)}
.cc-modal h3{font-size:1.2rem;font-weight:800;margin:0 0 .35rem;color:var(--snk-text);letter-spacing:-.01em}
.cc-modal p{font-size:.86rem;color:var(--snk-text-muted);margin:0 0 1.2rem;line-height:1.5}
.cc-modal .mbtns{display:flex;gap:.6rem}
.cc-modal .mbtns .rr-btn{flex:1;justify-content:center}
.cc-modal .mbtns.stack{flex-direction:column}
.cc-packs{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.1rem;text-align:left}
.cc-pack{display:flex;align-items:center;gap:.7rem;border:1px solid var(--snk-border);border-radius:var(--rr-r-md);padding:.7rem .8rem}
.cc-pack.best{border-color:color-mix(in srgb,var(--snk-accent) 45%,var(--snk-border));background:color-mix(in srgb,var(--snk-accent) 7%,var(--snk-surface))}
.cc-pack .pk{width:2.1rem;height:2.1rem;border-radius:var(--rr-r-sm);display:grid;place-items:center;background:color-mix(in srgb,var(--snk-brand) 30%,var(--snk-surface));color:#b9891a;flex:0 0 auto}
.cc-pack .pt{flex:1 1 auto}.cc-pack .pt b{display:block;font-size:.9rem;color:var(--snk-text)}.cc-pack .pt span{font-size:.76rem;color:var(--snk-text-muted)}
.cc-pack .pp{font-weight:800;color:var(--snk-text)}
.cc-pack .tagbest{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;background:#3a5a9c;color:#fff;border-radius:5px;padding:.12rem .35rem;white-space:nowrap}
.cc-sheet{width:100%;max-width:430px;border:1px solid var(--snk-border);border-bottom:0;border-radius:22px 22px 0 0;background:var(--snk-surface);
  box-shadow:0 -14px 50px rgba(2,8,20,.35);padding:.9rem 1rem 1.3rem}
.cc-grip{width:2.6rem;height:.3rem;border-radius:999px;background:var(--snk-border-strong);margin:.2rem auto 1rem}
.cc-sheet-h{display:flex;align-items:center;gap:.7rem;padding:0 .2rem .9rem;border-bottom:1px solid var(--snk-hairline);margin-bottom:.7rem}
.cc-sheet-h .rr-av{width:40px;height:40px;font-size:.95rem}
.cc-sheet-h b{font-size:.95rem;color:var(--snk-text)}.cc-sheet-h span{font-size:.76rem;color:var(--snk-text-muted);display:block}
.cc-sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.cc-sheet-it{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.7rem .3rem;border-radius:var(--rr-r-md);text-decoration:none;color:var(--snk-text);font-size:.75rem;font-weight:700;text-align:center;position:relative}
.cc-sheet-it:hover{background:var(--snk-surface-3)}
.cc-sheet-it .si{width:2.2rem;height:2.2rem;border-radius:var(--rr-r-sm);display:grid;place-items:center;background:color-mix(in srgb,var(--snk-accent) 12%,var(--snk-surface));color:var(--snk-accent)}
.cc-sheet-it .si i{width:1.15rem;height:1.15rem}
.cc-sheet-it .nb{position:absolute;top:.4rem;right:.7rem;min-width:1.1rem;height:1.1rem;padding:0 .28rem;border-radius:999px;background:var(--rr-live,#e0392b);color:#fff;font-size:.62rem;font-weight:800;display:grid;place-items:center}
.cc-nav-panel{width:100%;max-width:370px;border:1px solid var(--snk-border);border-radius:var(--rr-r-lg);background:var(--snk-surface);
  box-shadow:0 24px 70px rgba(2,8,20,.4);overflow:hidden}
.cc-np-h{display:flex;align-items:center;gap:.5rem;padding:.9rem 1rem;border-bottom:1px solid var(--snk-hairline);font-weight:800;color:var(--snk-text)}
.cc-np-h .clear{margin-left:auto;font-size:.76rem;font-weight:700;color:var(--snk-accent);text-decoration:none}
.cc-np-row{display:flex;gap:.7rem;padding:.75rem 1rem;border-top:1px solid var(--snk-hairline);text-decoration:none}
.cc-np-row:first-of-type{border-top:0}
.cc-np-row.unread{background:color-mix(in srgb,var(--snk-accent) 6%,var(--snk-surface))}
.cc-np-row .ni{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:color-mix(in srgb,var(--snk-accent) 12%,var(--snk-surface));color:var(--snk-accent)}
.cc-np-row .ni i{width:1rem;height:1rem}
.cc-np-row .nt{min-width:0;flex:1 1 auto}
.cc-np-row .nt b{display:block;font-size:.84rem;font-weight:700;color:var(--snk-text);line-height:1.25}
.cc-np-row .nt span{font-size:.74rem;color:var(--snk-text-muted)}
.cc-np-row .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--snk-accent);flex:0 0 auto;margin-top:.4rem}
.cc-toast{display:inline-flex;align-items:center;gap:.6rem;background:var(--snk-ink-800);color:#fff;border-radius:999px;padding:.6rem 1rem;font-weight:700;font-size:.85rem;box-shadow:0 10px 30px rgba(2,8,20,.35)}
.cc-toast .ti{width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;background:var(--snk-success);color:#fff}
.cc-toast .ti i{width:.9rem;height:.9rem}
.cc-empty{text-align:center;padding:2rem 1.2rem;border:1px dashed var(--snk-border-strong);border-radius:var(--rr-r-lg);background:var(--snk-surface)}
.cc-empty .ei{width:3.2rem;height:3.2rem;border-radius:50%;display:grid;place-items:center;margin:0 auto .8rem;background:var(--snk-surface-3);color:var(--snk-text-muted)}
.cc-empty h4{margin:0 0 .3rem;font-size:1rem;font-weight:800;color:var(--snk-text)}
.cc-empty p{margin:0 0 1rem;font-size:.83rem;color:var(--snk-text-muted)}

/* ---------- overlay host (fixed scrim) for on-page modal / notifications panel ---------- */
.cc-overlay{position:fixed;inset:0;z-index:1400;background:color-mix(in srgb,#0b1220 55%,transparent);display:flex;align-items:center;justify-content:center;padding:1rem;animation:cc-fade .15s ease}
.cc-overlay[hidden]{display:none}
@keyframes cc-fade{from{opacity:0}to{opacity:1}}
.cc-overlay .cc-nav-panel{width:100%;max-width:380px;max-height:80vh;display:flex;flex-direction:column}
.cc-overlay .cc-np-rows{overflow:auto}
.cc-np-h .clear{background:none;border:0;cursor:pointer;font-family:inherit}
.cc-np-see{display:block;text-align:center;padding:.7rem;font-weight:700;font-size:.83rem;color:var(--snk-accent);text-decoration:none;border-top:1px solid var(--snk-hairline)}
.cc-np-empty{padding:1.6rem;text-align:center;color:var(--snk-text-muted);font-size:.85rem}

/* ---------- dark-mode contrast guards (bug-332): never #fff on --snk-accent (it lightens in dark) ---------- */
html[data-bs-theme=dark] .cc-bigbtn.find{color:#15233a}
html[data-bs-theme=dark] .cc-bigbtn.find .cc-bb-sub{opacity:.8}
html[data-bs-theme=dark] .cc-appbar .ic,
html[data-bs-theme=dark] .cc-status.is-queue .ic{color:#15233a}


/* =====================================================================
   ACCOUNT & SETTINGS component layer — ported from _mockups/settings
   (2026-07-04). Extends the .set-* shell already in this file. Token-
   driven; light/dark + dark-contrast guards included. Prefix: .set-
   ===================================================================== */
/* =====================================================================
   Account & Settings — mockup-only component layer.
   Extends the live system (snk-theme tokens, snk-remote-raids primitives
   .rr-btn/.rr-input/.rr-note, snk-member .switch/.teampick/.chip-tag) and
   the /me Command Center shell (.set-* / .cc-* from member-mock.css).
   Everything here is token-driven so light + dark come for free.
   Prefix for NEW components: .set-
   ===================================================================== */

/* icon discipline: standalone lucide icons ~1rem inside the settings shell */
.set-shell :where(i[data-lucide],svg.lucide){width:1rem;height:1rem}
.set-shell{--set-gap:1.1rem;line-height:normal}

/* content column can now hold ONE or MORE stacked panels (security stacks) */
.set-main{display:flex;flex-direction:column;gap:var(--set-gap);min-width:0}

/* section label inside a panel (e.g. "Notification channels", "Active sessions") */
.set-sec{display:flex;align-items:center;gap:.5rem;margin:1.5rem 0 .8rem}
.set-sec:first-child{margin-top:.2rem}
.set-sec h3{font-size:.95rem;font-weight:800;letter-spacing:-.01em;margin:0;color:var(--snk-text)}
.set-sec p{font-size:.78rem;color:var(--snk-text-muted);margin:.1rem 0 0}
.set-sec .set-sec-act{margin-left:auto;font-size:.8rem;font-weight:700;color:var(--snk-accent);text-decoration:none;display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap}
.set-sec .set-sec-act i{width:.9rem;height:.9rem}

/* ---------- status pills (Verified / Not set / Connected / Recommended) ---------- */
.set-pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  border-radius:999px;padding:.2rem .5rem;line-height:1;border:1px solid transparent;white-space:nowrap}
.set-pill i{width:.8rem;height:.8rem}
.set-pill.ok{background:color-mix(in srgb,var(--snk-success) 14%,var(--snk-surface));color:var(--snk-success);border-color:color-mix(in srgb,var(--snk-success) 30%,transparent)}
.set-pill.muted{background:var(--snk-surface-3);color:var(--snk-text-muted);border-color:var(--snk-hairline)}
.set-pill.warn{background:color-mix(in srgb,var(--snk-warning) 16%,var(--snk-surface));color:var(--snk-warning);border-color:color-mix(in srgb,var(--snk-warning) 32%,transparent)}
.set-pill.danger{background:color-mix(in srgb,var(--snk-danger) 13%,var(--snk-surface));color:var(--snk-danger);border-color:color-mix(in srgb,var(--snk-danger) 30%,transparent)}
.set-pill.accent{background:color-mix(in srgb,var(--snk-accent) 12%,var(--snk-surface));color:var(--snk-accent);border-color:color-mix(in srgb,var(--snk-accent) 28%,transparent)}

/* ---------- generic list-row with an action (email / password / provider / session) ---------- */
.set-list{display:flex;flex-direction:column}
.set-row{display:flex;align-items:center;gap:.85rem;padding:.95rem .2rem;border-top:1px solid var(--snk-hairline)}
.set-row:first-child{border-top:0}
.set-row .set-row-ic{width:2.5rem;height:2.5rem;border-radius:var(--rr-r-sm);display:grid;place-items:center;flex:0 0 auto;
  background:color-mix(in srgb,var(--snk-accent) 11%,var(--snk-surface));color:var(--snk-accent)}
.set-row .set-row-ic i{width:1.2rem;height:1.2rem}
.set-row .set-row-ic img{width:1.35rem;height:1.35rem;object-fit:contain}
.set-row .set-row-tx{min-width:0;flex:1 1 auto}
.set-row .set-row-tx b{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:700;color:var(--snk-text);line-height:1.25}
.set-row .set-row-tx span{display:block;font-size:.78rem;color:var(--snk-text-muted);margin-top:.1rem;overflow-wrap:anywhere}
.set-row .set-row-act{flex:0 0 auto;display:flex;align-items:center;gap:.5rem}
/* tinted icon variants */
.set-row.ok  .set-row-ic{background:color-mix(in srgb,var(--snk-success) 13%,var(--snk-surface));color:var(--snk-success)}
.set-row.warn .set-row-ic{background:color-mix(in srgb,var(--snk-warning) 15%,var(--snk-surface));color:var(--snk-warning)}
.set-row.neutral .set-row-ic{background:var(--snk-surface-3);color:var(--snk-text-muted)}

/* a small inline "current value" + copy affordance (trainer code, email) */
.set-inline{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.set-mono{font-variant-numeric:tabular-nums;font-weight:700;color:var(--snk-text);letter-spacing:.02em}

/* ---------- NOTIFICATIONS: channel status strip ---------- */
.set-conns{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.7rem;margin-bottom:.5rem}
.set-conn{display:flex;align-items:center;gap:.7rem;border:1px solid var(--snk-border);border-radius:var(--rr-r-md);
  background:var(--snk-surface-2);padding:.75rem .85rem}
.set-conn .cn-ic{width:2.2rem;height:2.2rem;border-radius:var(--rr-r-sm);display:grid;place-items:center;flex:0 0 auto;color:#fff}
.set-conn .cn-ic i{width:1.1rem;height:1.1rem}
.set-conn.insite .cn-ic{background:var(--snk-accent)}
.set-conn.email  .cn-ic{background:#7c5cff}
.set-conn.telegram .cn-ic{background:#2aa5e6}
.set-conn.push   .cn-ic{background:#e0a800}
.set-conn .cn-tx{min-width:0;flex:1 1 auto}
.set-conn .cn-tx b{display:block;font-size:.83rem;font-weight:800;color:var(--snk-text);line-height:1.15}
.set-conn .cn-tx span{font-size:.73rem;color:var(--snk-text-muted);display:flex;align-items:center;gap:.3rem}
.set-conn .cn-dot{width:.5rem;height:.5rem;border-radius:50%;flex:0 0 auto}
.set-conn .cn-dot.on{background:var(--snk-success)}
.set-conn .cn-dot.off{background:var(--snk-border-strong)}
.set-conn .cn-act{flex:0 0 auto;font-size:.76rem;font-weight:800;color:var(--snk-accent);text-decoration:none;white-space:nowrap}

/* ---------- NOTIFICATIONS: channel matrix ---------- */
.set-matrix{border:1px solid var(--snk-border);border-radius:var(--rr-r-lg);overflow:hidden;background:var(--snk-surface)}
.set-mx-head,.set-mx-row{display:grid;grid-template-columns:minmax(0,1fr) repeat(4,68px);align-items:center}
.set-mx-head{background:var(--snk-surface-2);border-bottom:1px solid var(--snk-border);padding:.55rem .9rem}
.set-mx-head .mh{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:.2rem;font-size:.66rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.03em;color:var(--snk-text-muted);line-height:1}
.set-mx-head .mh i{width:1.05rem;height:1.05rem}
.set-mx-head .mh .mh-ic{width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;color:#fff;margin-bottom:.05rem}
.set-mx-head .mh.insite .mh-ic{background:var(--snk-accent)}
.set-mx-head .mh.email .mh-ic{background:#7c5cff}
.set-mx-head .mh.telegram .mh-ic{background:#2aa5e6}
.set-mx-head .mh.push .mh-ic{background:#e0a800}
.set-mx-head .mh.off{opacity:.45}
.set-mx-lead{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--snk-text-muted);
  padding:.9rem .9rem .35rem;background:var(--snk-surface-2)}
.set-mx-row{padding:.7rem .9rem;border-top:1px solid var(--snk-hairline)}
.set-mx-row:first-of-type{border-top:0}
/* desktop: cells participate directly in the row grid; mobile media query overrides to a 4-col grid */
.set-mx-row .mx-cells{display:contents}
.set-mx-row .mx-lbl{min-width:0;padding-right:.6rem}
.set-mx-row .mx-lbl b{display:block;font-size:.87rem;font-weight:700;color:var(--snk-text);line-height:1.25}
.set-mx-row .mx-lbl span{font-size:.75rem;color:var(--snk-text-muted)}
/* the toggle "check chip" that fills each matrix cell */
.set-ch{justify-self:center;width:1.9rem;height:1.9rem;border-radius:8px;border:1.5px solid var(--snk-border-strong);
  background:var(--snk-surface);display:grid;place-items:center;cursor:pointer;color:transparent;transition:.13s;padding:0}
.set-ch i{width:1.05rem;height:1.05rem}
.set-ch:hover{border-color:var(--snk-accent)}
.set-ch.on{background:var(--snk-accent);border-color:var(--snk-accent);color:#fff}
.set-ch.off-channel{opacity:.4;cursor:not-allowed;background:repeating-linear-gradient(45deg,var(--snk-surface-3),var(--snk-surface-3) 4px,transparent 4px,transparent 8px)}
.set-ch.off-channel:hover{border-color:var(--snk-border-strong)}
/* not-applicable cell (channel doesn't carry this event type, e.g. announcements → push) */
.set-ch.na{border-style:dashed;border-color:var(--snk-border);background:none;cursor:default;opacity:.55;color:var(--snk-text-muted)}
.set-ch.na:hover{border-color:var(--snk-border)}

/* ---------- PREFERENCES: segmented control (theme etc.) ---------- */
.set-seg{display:inline-flex;border:1px solid var(--snk-border);border-radius:999px;background:var(--snk-surface-2);padding:.25rem;gap:.15rem}
.set-seg button{display:inline-flex;align-items:center;gap:.4rem;border:0;background:none;cursor:pointer;border-radius:999px;
  padding:.45rem .9rem;font-size:.83rem;font-weight:700;color:var(--snk-text-muted);transition:.12s}
.set-seg button i{width:1rem;height:1rem}
.set-seg button.on{background:var(--snk-surface);color:var(--snk-accent);box-shadow:0 1px 3px var(--snk-shadow)}
.set-seg button:hover:not(.on){color:var(--snk-text)}

/* ---------- SECURITY: session + provider rows reuse .set-row; add device badge ---------- */
.set-badge{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--snk-success);
  background:color-mix(in srgb,var(--snk-success) 13%,var(--snk-surface));border:1px solid color-mix(in srgb,var(--snk-success) 30%,transparent);
  border-radius:999px;padding:.12rem .45rem}

/* ---------- inline expandable form (change email / change password) ---------- */
.set-expand{border:1px solid var(--snk-border);border-radius:var(--rr-r-md);background:var(--snk-surface-2);padding:1.1rem 1.15rem;margin-top:.4rem}
.set-expand .set-field:last-of-type{margin-bottom:.9rem}

/* password strength checklist */
.set-reqs{display:grid;grid-template-columns:1fr 1fr;gap:.35rem .9rem;margin:.3rem 0 .2rem}
.set-req{display:flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:600;color:var(--snk-text-muted)}
.set-req i{width:.9rem;height:.9rem}
.set-req.met{color:var(--snk-success)}
.set-meter{height:.4rem;border-radius:999px;background:var(--snk-surface-3);overflow:hidden;margin:.6rem 0 .2rem}
.set-meter i{display:block;height:100%;border-radius:999px;transition:.2s}
.set-meter i.weak{width:33%;background:var(--snk-danger)}
.set-meter i.mid{width:66%;background:var(--snk-warning)}
.set-meter i.strong{width:100%;background:var(--snk-success)}

/* ---------- DANGER ZONE ---------- */
.set-panel.danger{border-color:color-mix(in srgb,var(--snk-danger) 40%,var(--snk-border))}
.set-panel.danger h2{color:var(--snk-danger)}
.set-danger-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.set-danger-row .dz-tx{flex:1 1 260px;min-width:0}
.set-danger-row .dz-tx b{display:block;font-size:.9rem;font-weight:800;color:var(--snk-text)}
.set-danger-row .dz-tx span{font-size:.8rem;color:var(--snk-text-muted)}

/* danger callout (delete page warning) */
.set-callout{display:flex;gap:.8rem;border-radius:var(--rr-r-md);padding:.95rem 1.05rem;border:1px solid;margin-bottom:1.2rem}
.set-callout .co-ic{width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.set-callout .co-ic i{width:1.2rem;height:1.2rem}
.set-callout .co-bd{min-width:0}
.set-callout .co-bd b{display:block;font-size:.92rem;font-weight:800;color:var(--snk-text)}
.set-callout .co-bd p{margin:.2rem 0 0;font-size:.82rem;color:var(--snk-text-muted);line-height:1.5}
.set-callout.danger{background:color-mix(in srgb,var(--snk-danger) 8%,var(--snk-surface));border-color:color-mix(in srgb,var(--snk-danger) 32%,var(--snk-border))}
.set-callout.danger .co-ic{background:color-mix(in srgb,var(--snk-danger) 15%,var(--snk-surface));color:var(--snk-danger)}
.set-callout.info{background:color-mix(in srgb,var(--snk-accent) 7%,var(--snk-surface));border-color:color-mix(in srgb,var(--snk-accent) 28%,var(--snk-border))}
.set-callout.info .co-ic{background:color-mix(in srgb,var(--snk-accent) 14%,var(--snk-surface));color:var(--snk-accent)}
.set-callout.good{background:color-mix(in srgb,var(--snk-success) 8%,var(--snk-surface));border-color:color-mix(in srgb,var(--snk-success) 30%,var(--snk-border))}
.set-callout.good .co-ic{background:color-mix(in srgb,var(--snk-success) 14%,var(--snk-surface));color:var(--snk-success)}

/* consequences list on the delete page */
.set-conseq{list-style:none;margin:0 0 1.2rem;padding:0;display:flex;flex-direction:column;gap:.55rem}
.set-conseq li{display:flex;gap:.6rem;font-size:.84rem;color:var(--snk-text);line-height:1.4}
.set-conseq li i{width:1.05rem;height:1.05rem;flex:0 0 auto;margin-top:.1rem;color:var(--snk-text-muted)}

/* recovery card (soft-deleted state) */
.set-recover{display:flex;align-items:center;gap:1rem;border:1px dashed color-mix(in srgb,var(--snk-warning) 45%,var(--snk-border));
  background:color-mix(in srgb,var(--snk-warning) 8%,var(--snk-surface));border-radius:var(--rr-r-md);padding:1rem 1.1rem;flex-wrap:wrap}
.set-recover .rc-tx{flex:1 1 240px;min-width:0}
.set-recover .rc-tx b{display:block;font-size:.9rem;font-weight:800;color:var(--snk-text)}
.set-recover .rc-tx span{font-size:.8rem;color:var(--snk-text-muted)}

/* ---------- char counter + help ---------- */
.set-field .set-counter{float:right;font-size:.73rem;font-weight:700;color:var(--snk-text-muted)}
.set-help{font-size:.8rem;color:var(--snk-text-muted);line-height:1.5;margin:.2rem 0 0}

/* ---------- compact public-card preview (Profile page) ---------- */
.set-preview{border-radius:16px;padding:1rem 1.15rem;color:#fff;position:relative;overflow:hidden;margin-bottom:1.3rem}
.set-preview.t-valor{background:linear-gradient(135deg,#d23b3b,#f0683f)}
.set-preview.t-mystic{background:linear-gradient(135deg,#1b6ec2,#2aa5e6)}
.set-preview.t-instinct{background:linear-gradient(135deg,#e0a800,#f5d042)}
.set-preview.t-none{background:linear-gradient(135deg,#475569,#64748b)}
.set-preview::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 140% at 90% -20%,rgba(255,255,255,.25),transparent 55%)}
.set-preview>*{position:relative;z-index:1}
.set-preview .pv-top{display:flex;align-items:center;gap:.8rem}
.set-preview .pv-av{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.set-preview .pv-id b{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;display:block;line-height:1.1}
.set-preview .pv-id span{font-size:.78rem;font-weight:600;opacity:.92}
.set-preview .pv-see{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;font-weight:800;
  color:#fff;text-decoration:none;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:.35rem .7rem}
.set-preview .pv-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}
.set-preview .pv-chips .pv-chip{font-size:.72rem;font-weight:700;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);
  border-radius:999px;padding:.18rem .55rem;display:inline-flex;align-items:center;gap:.3rem}
.set-preview .pv-chips .pv-chip i{width:.8rem;height:.8rem}

/* ---------- sticky "unsaved changes" save bar ---------- */
.set-savebar{position:sticky;bottom:1rem;z-index:5;display:flex;align-items:center;gap:.8rem;margin-top:1.4rem;
  border:1px solid color-mix(in srgb,var(--snk-accent) 35%,var(--snk-border));border-radius:999px;
  background:color-mix(in srgb,var(--snk-accent) 6%,var(--snk-surface));backdrop-filter:blur(6px);
  padding:.55rem .7rem .55rem 1.1rem;box-shadow:0 8px 26px color-mix(in srgb,var(--snk-shadow) 70%,transparent)}
.set-savebar .sb-tx{flex:1 1 auto;font-size:.83rem;font-weight:700;color:var(--snk-text);display:flex;align-items:center;gap:.45rem}
.set-savebar .sb-tx i{width:1rem;height:1rem;color:var(--snk-accent)}
.set-savebar .sb-act{display:flex;gap:.5rem;flex:0 0 auto}

/* ---------- responsive: matrix + rows collapse on phones ---------- */
@media(max-width:680px){
  /* matrix → per-event cards; channels become a labelled toggle row */
  .set-matrix{border:0;background:none;overflow:visible;display:flex;flex-direction:column;gap:.7rem}
  .set-mx-head{display:none}
  .set-mx-lead{padding:.4rem .1rem .1rem;background:none}
  .set-mx-row{grid-template-columns:1fr;gap:.7rem;border:1px solid var(--snk-border);border-radius:var(--rr-r-md);
    background:var(--snk-surface);padding:.9rem}
  .set-mx-row .mx-cells{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
  .set-mx-row .set-ch{width:100%;height:2.6rem;border-radius:var(--rr-r-sm);position:relative}
  /* label each phone toggle with its channel via data-label */
  .set-mx-row .set-ch::before{content:attr(data-label);position:absolute;bottom:-1.05rem;left:0;right:0;text-align:center;
    font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--snk-text-muted)}
  .set-mx-row .mx-cells{margin-bottom:1.1rem}
  .set-danger-row{align-items:flex-start}
}

/* ---------- dark-mode contrast guards ----------
   --snk-accent lightens in dark mode → white text/icons on an accent fill
   lose contrast. Put dark ink on accent-filled surfaces (mirrors production
   .rr-btn-primary). Light mode untouched. */
html[data-bs-theme=dark] .set-ch.on{color:#15233a}
html[data-bs-theme=dark] .set-conn.insite .cn-ic,
html[data-bs-theme=dark] .set-mx-head .mh.insite .mh-ic{color:#15233a}

/* functional switch bridge: a visually-hidden checkbox drives the adjacent .switch pill
   (no JS). Markup: <label class="switch-row"><span class="lbl">..</span><input type=checkbox name=X [checked]><span class="switch"></span></label> */
.switch-row input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.switch-row input[type=checkbox]:not(:checked)+.switch{background:var(--snk-border-strong)}
.switch-row input[type=checkbox]:not(:checked)+.switch::after{right:auto;left:.15rem}
.switch-row input[type=checkbox]:focus-visible+.switch{outline:2px solid var(--snk-accent);outline-offset:2px}