/* ─────────────────────────────────────────────────────────────────────────────
   CHATRIM theme B — "sleek gaming dashboard"
   Preview only: served at /chatrim3. Loaded AFTER the page's own <style>, so every
   rule here is an override and nothing is removed.

   Same hard rule as theme A: colour, type, spacing, radius, shadow, transition
   only. No display / position / grid-template / flex-direction changes, so the
   renderers' layout assumptions hold. Gold stays the brand accent; cyan is the
   secondary for live/active state, the way a stream dashboard reads at a glance.
   ───────────────────────────────────────────────────────────────────────────── */

:root{
  --bg:#05060a;
  --card:#0d1018;
  --card-h:#141926;
  --input-bg:#090c13;
  --bdr:#1b2231;
  --bdr-h:#334260;
  --t1:#eaf0fa;
  --t2:#93a1ba;
  --t3:#64708a;
  --gold:#FFB23D;
  --radius:10px;
  --cyan:#36E2E6;
  --glass:rgba(16,21,32,.66);
  --glow-gold:0 0 22px rgba(255,178,61,.20);
  --glow-cyan:0 0 20px rgba(54,226,230,.18);
  --ease:cubic-bezier(.2,.7,.3,1);
}
body{
  background:
    radial-gradient(1200px 700px at 50% -200px, rgba(54,226,230,.07), transparent 60%),
    radial-gradient(900px 520px at 85% 8%, rgba(255,178,61,.07), transparent 62%),
    linear-gradient(180deg,#05060a 0%,#070910 100%);
  background-attachment:fixed;
}
html{ font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; }

/* ── Type: tight, technical, uppercase micro-labels ───────────────────────── */
.crest h1{
  font-size:36px; letter-spacing:.17em; font-weight:700;
  color:var(--t1); text-shadow:0 0 28px rgba(54,226,230,.26);
}
.crest .season-line{
  font-family:'Inter',system-ui,sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; color:var(--cyan);
}
.crest .countdown{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--t3); font-variant-numeric:tabular-nums;
}
.lb-title{
  font-family:'Inter',system-ui,sans-serif; font-size:12px; font-weight:800;
  letter-spacing:.22em; text-transform:uppercase; color:var(--t2);
  text-align:left; margin:26px 0 12px;
}
.section-head span{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--t3); font-weight:700;
}

/* ── Glass panels ─────────────────────────────────────────────────────────── */
.about-card{
  border-radius:var(--radius);
  padding:20px;
  background:var(--glass);
  border:1px solid var(--bdr);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.5);
}
.user-bar{
  border-radius:var(--radius);
  padding:15px 18px;
  background:linear-gradient(135deg,rgba(255,178,61,.09),rgba(16,21,32,.86) 46%);
  border:1px solid rgba(255,178,61,.26);
  box-shadow:var(--glow-gold), 0 10px 30px rgba(0,0,0,.5);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.user-av{ box-shadow:0 0 0 2px rgba(54,226,230,.45), 0 0 18px rgba(54,226,230,.26); }
.user-pts-num{ color:var(--gold); font-variant-numeric:tabular-nums; letter-spacing:-.015em; }
.user-pts-label{ letter-spacing:.17em; text-transform:uppercase; font-size:9.5px !important; }

/* ── Tabs: segmented control ──────────────────────────────────────────────── */
.tabs{
  border-radius:var(--radius); padding:4px; gap:2px;
  background:var(--glass); border:1px solid var(--bdr);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.tab{
  border-radius:7px; font-size:10.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; padding:9px 4px;
  transition:all .16s var(--ease);
}
.tab:hover{ color:var(--t1); background:rgba(54,226,230,.07); }
.tab.active{
  color:#04161a; background:linear-gradient(180deg,#4DF0F4,#26C9CD);
  box-shadow:var(--glow-cyan);
}
.tab-sub{ letter-spacing:.06em; opacity:.75; }

/* ── Pills ────────────────────────────────────────────────────────────────── */
.s2-pill{
  border-radius:7px; padding:7px 14px; font-size:11px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  background:var(--glass); transition:all .16s var(--ease);
}
.s2-pill:hover{ border-color:var(--cyan); color:var(--t1); }
.s2-pill.on{
  background:linear-gradient(180deg,#4DF0F4,#26C9CD);
  border-color:transparent; color:#04161a; box-shadow:var(--glow-cyan);
}

/* ── Data rows ────────────────────────────────────────────────────────────── */
.lr{
  border-radius:8px; margin-bottom:4px; padding:10px 14px;
  background:var(--glass); border:1px solid var(--bdr);
  transition:all .15s var(--ease);
}
.lr:hover{ border-color:var(--cyan); background:var(--card-h); box-shadow:var(--glow-cyan); }
.lr-score, .lr-name, .lr-rank{ font-variant-numeric:tabular-nums; }
.lr-rank.top{ color:var(--gold); }

/* ── Quest banners ────────────────────────────────────────────────────────── */
.bn{
  border-radius:var(--radius); margin-bottom:10px;
  box-shadow:0 8px 26px rgba(0,0,0,.5);
  transition:box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.bn:hover{ border-color:var(--bdr-h); box-shadow:0 10px 32px rgba(0,0,0,.6), var(--glow-cyan); }
.bn-label{ letter-spacing:.02em; }
.bn-bar, .bn-bar-fill{ border-radius:999px; }
.bn-frac{ font-variant-numeric:tabular-nums; }
.bn-cmd{
  border-radius:5px; font-weight:700; font-size:11px;
  letter-spacing:.04em; background:rgba(54,226,230,.12); color:var(--cyan);
}

/* ── Inputs + buttons ─────────────────────────────────────────────────────── */
input[type=text], .pet-sel, select{ border-radius:8px; transition:all .16s var(--ease); }
input[type=text]:focus, select:focus{
  outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(54,226,230,.16);
}
.pet-save, .med-sell, .chest-btn, .user-signout{
  border-radius:8px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  font-size:11.5px; transition:all .16s var(--ease);
}
.pet-save:hover, .med-sell:hover, .chest-btn:hover{ filter:brightness(1.12); box-shadow:var(--glow-gold); }
.pet-save:active, .med-sell:active, .chest-btn:active{ transform:translateY(1px); }

/* ── Tiers + bars ─────────────────────────────────────────────────────────── */
.tier-row{ border-radius:8px; transition:background .15s var(--ease); }
.tier-row:hover{ background:rgba(54,226,230,.05); }
.tier-row.here{ box-shadow:inset 2px 0 0 var(--cyan); }
.tier-bar-wrap, .tier-prog-bar, .slvl-bar{ border-radius:999px; overflow:hidden; }
.tier-bar-fill, .tier-prog-fill, .slvl-fill{ border-radius:999px; }
.tier-name, .tier-pts-info, .tier-prog-text{ font-variant-numeric:tabular-nums; }

/* ── Inventory + medallions ───────────────────────────────────────────────── */
.inv-sq, .med-cell{
  border-radius:8px; background:var(--glass);
  transition:all .14s var(--ease);
}
.inv-sq:hover, .med-cell:hover{ border-color:var(--cyan); box-shadow:var(--glow-cyan); }
.trophy-shelf, .inv-sellbar{ border-radius:var(--radius); }
.inv-cnt{ letter-spacing:.1em; text-transform:uppercase; font-size:10.5px; }

/* ── Battlefield ──────────────────────────────────────────────────────────── */
.battlefield{
  border-radius:var(--radius); background:var(--glass);
  border:1px solid var(--bdr);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.bf-header{ letter-spacing:.14em; text-transform:uppercase; font-size:11px; font-weight:700; }
.bf-knight{ border-radius:6px; font-size:10.5px; letter-spacing:.03em; }
.alive-dot{ box-shadow:0 0 10px currentColor; }

/* ── Stream embed ─────────────────────────────────────────────────────────── */
.stream-wrap{
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 0 0 1px var(--bdr), 0 16px 40px rgba(0,0,0,.6);
}
.stream-live-badge{ letter-spacing:.14em; text-transform:uppercase; font-weight:800; }

@media(max-width:560px){
  .crest h1{ font-size:27px; letter-spacing:.13em; }
  .about-card{ padding:16px; }
}