/* OSRS GIM Companion — design system */
:root{
  /* surfaces */
  --bg:#14110d;
  --bg-2:#191510;
  --panel:#1d1812;
  --panel-2:#241e16;
  --panel-3:#2c251b;
  --line:#3b3023;
  --line-2:#2a2218;

  /* text */
  --ink:#f0e6d2;
  --ink-2:#cbbf9f;
  --mut:#8c7e62;
  --mut-2:#6b5f48;

  /* accents */
  --gold:#d8a93b;
  --gold-soft:rgba(216,169,59,.12);
  --gold-soft-2:rgba(216,169,59,.22);
  --ok:#6fb86a;
  --ok-soft:rgba(111,184,106,.14);
  --info:#6db6e0;
  --info-soft:rgba(109,182,224,.14);
  --warn:#d97b5b;
  --warn-soft:rgba(217,123,91,.16);
  --danger:#d05a4a;

  /* type */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Cinzel",Georgia,serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

  /* shape */
  --r-sm:4px; --r:6px; --r-lg:10px;
  --shadow:0 2px 8px rgba(0,0,0,.35);
  --shadow-lg:0 8px 32px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--font);min-height:100vh}
body{overflow-x:hidden}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
kbd{font:11px/1 var(--font-mono);padding:2px 5px;border:1px solid var(--line);border-radius:3px;background:var(--bg-2);color:var(--mut)}
::selection{background:var(--gold-soft-2);color:var(--ink)}

/* SHELL =========================================================== */
.shell{
  display:grid;
  grid-template-columns:64px 1fr;
  grid-template-rows:48px 1fr;
  grid-template-areas:
    "rail topbar"
    "rail main";
  min-height:100vh;
}

/* RAIL ============================================================ */
.rail{
  grid-area:rail;
  background:#0f0c08;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  align-items:stretch;
  padding:8px 0;
  gap:2px;
  position:sticky; top:0; height:100vh;
  z-index:5;
}
.rail-logo{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin:0 auto 6px;
  color:var(--gold);
  background:var(--gold-soft);
  border-radius:var(--r);
}
.rail-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  margin:0 6px;
  padding:8px 0 7px;
  color:var(--mut);
  border-radius:var(--r);
  font-size:10.5px;
  letter-spacing:.04em;
  position:relative;
  transition:background .12s,color .12s;
}
.rail-btn:hover{color:var(--ink-2);background:var(--panel)}
.rail-btn.on{color:var(--gold);background:var(--gold-soft)}
.rail-btn.on::before{
  content:"";position:absolute;left:-6px;top:8px;bottom:8px;width:3px;background:var(--gold);border-radius:0 2px 2px 0;
}
.rail-btn svg{flex-shrink:0}
.rail-spacer{flex:1}
.rail-overall .ring{
  --p:0;
  width:36px;height:36px;border-radius:50%;
  background:conic-gradient(var(--gold) calc(var(--p) * 1%), var(--line) 0);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.rail-overall .ring::before{
  content:"";position:absolute;inset:3px;background:var(--bg);border-radius:50%;
}
.rail-overall .ring span{position:relative;font-size:10px;font-weight:600;color:var(--ink-2)}
.rail-mini{flex-direction:row;padding:6px;gap:0}
.rail-mini span{display:none}

/* TOPBAR ========================================================== */
.topbar{
  grid-area:topbar;
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:0 14px;
  position:sticky;top:0;z-index:4;
}
.crumbs{display:flex;align-items:baseline;gap:8px;min-width:0}
.crumb-view{font-family:var(--font-display);font-size:15px;color:var(--ink);font-weight:600;letter-spacing:.02em}
.crumb-sep{color:var(--mut-2)}
.crumb-sub{font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.search-wrap{
  flex:1;max-width:520px;margin:0 auto;
  display:flex;align-items:center;gap:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:5px 9px;color:var(--mut);
  transition:border-color .15s;
}
.search-wrap:focus-within{border-color:var(--gold);color:var(--ink-2)}
.search-wrap input{flex:1;background:none;border:0;outline:0;color:var(--ink);font-size:13px;min-width:0}
.search-wrap input::placeholder{color:var(--mut)}

.topbar-tools{display:flex;align-items:center;gap:6px}
.t-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 10px;border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink-2);background:var(--panel);font-size:12px;font-weight:500;
}
.t-btn:hover{border-color:var(--gold);color:var(--gold)}
.t-btn.t-icon{padding:6px 7px}
.t-btn.danger{border-color:var(--danger);color:var(--danger);background:transparent}
.t-btn.danger:hover{background:rgba(208,90,74,.1)}
.t-btn.primary{background:var(--gold);color:#1a1409;border-color:var(--gold);font-weight:600}
.t-btn.primary:hover{background:#e6b94d}

/* MAIN ============================================================ */
.main{
  grid-area:main;
  padding:14px 18px 80px;
  overflow-x:hidden;
  max-width:1400px;
  width:100%;
}

/* Common building blocks */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.card-head{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;border-bottom:1px solid var(--line);
  background:var(--panel-2);
}
.card-head h2{
  margin:0;font:600 11px/1.2 var(--font);
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut);
}
.card-head .count{
  font:500 11px var(--font-mono);color:var(--mut-2);
  background:var(--bg-2);padding:1px 6px;border-radius:99px;
}
.card-head .spacer{flex:1}
.card-head .h-actions{display:flex;gap:6px}
.card-head .h-actions button{font-size:11px;color:var(--mut);padding:2px 6px;border-radius:4px}
.card-head .h-actions button:hover{color:var(--gold);background:var(--gold-soft)}

.section-title{
  font:600 11px/1 var(--font);
  letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
  margin:18px 0 8px;
  display:flex;align-items:center;gap:10px;
}
.section-title::after{
  content:"";flex:1;height:1px;background:var(--line);
}

.pill{
  display:inline-flex;align-items:center;gap:4px;
  font:500 10.5px var(--font);letter-spacing:.04em;
  padding:2px 7px;border-radius:99px;
  background:var(--bg-2);color:var(--mut);border:1px solid var(--line-2);
  white-space:nowrap;
}
.pill.ok{color:var(--ok);border-color:rgba(111,184,106,.35);background:var(--ok-soft)}
.pill.info{color:var(--info);border-color:rgba(109,182,224,.35);background:var(--info-soft)}
.pill.gold{color:var(--gold);border-color:rgba(216,169,59,.4);background:var(--gold-soft)}
.pill.warn{color:var(--warn);border-color:rgba(217,123,91,.4);background:var(--warn-soft)}

.empty{
  color:var(--mut);font-size:13px;padding:24px 12px;text-align:center;
}

/* PROGRESS BARS */
.bar{height:4px;background:var(--bg-2);border-radius:99px;overflow:hidden}
.bar > span{display:block;height:100%;background:var(--gold);transition:width .25s}

/* ============================================================ */
/* NOW DASHBOARD                                                */
/* ============================================================ */
.now-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,360px);
  gap:14px;
}
@media(max-width:1000px){.now-grid{grid-template-columns:1fr}}

/* HERO current task card */
.now-hero{
  background:linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:18px 20px;
  position:relative;
  overflow:hidden;
}
.now-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px 200px at 80% -50%, var(--gold-soft) 0%, transparent 60%);
  pointer-events:none;
}
.now-hero-tag{
  display:inline-flex;align-items:center;gap:6px;
  font:600 10.5px var(--font);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px;
}
.now-hero-tag::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 8px var(--gold);
}
.now-hero-title{
  font:600 22px/1.25 var(--font-display);color:var(--ink);
  margin:0 0 6px;letter-spacing:.01em;
}
@media(max-width:700px){.now-hero-title{font-size:19px}}
.now-hero-loc{font-size:12px;color:var(--mut);margin-bottom:14px}
.now-hero-loc strong{color:var(--ink-2);font-weight:600}
.now-hero-reqs{
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);
  padding:8px 11px;font-size:12.5px;color:var(--ink-2);margin-bottom:12px;
  display:flex;gap:8px;align-items:flex-start;
}
.now-hero-reqs strong{color:var(--gold);font-weight:600;flex-shrink:0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding-top:1px}
.now-hero-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn-check{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gold);color:#1a1409;
  padding:9px 16px;border-radius:var(--r);font:600 13px var(--font);
  letter-spacing:.02em;
}
.btn-check:hover{background:#e6b94d}
.btn-check svg{margin-left:-2px}
.btn-ghost{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink-2);font:500 12.5px var(--font);
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* UP NEXT */
.upnext{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
@media(max-width:600px){.upnext{grid-template-columns:1fr}}
.upnext-item{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:8px 10px;display:flex;gap:8px;align-items:flex-start;
  cursor:pointer;transition:border-color .12s,transform .12s;
}
.upnext-item:hover{border-color:var(--gold)}
.upnext-num{
  font:600 11px var(--font-mono);color:var(--mut-2);
  flex-shrink:0;width:18px;text-align:center;padding-top:2px;
}
.upnext-body{min-width:0;flex:1}
.upnext-title{font-size:12.5px;line-height:1.35;color:var(--ink-2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.upnext-meta{font-size:10.5px;color:var(--mut);margin-top:2px}

/* DOABLE NOW chips */
.chip-row{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 12px}
.dochip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:99px;
  background:var(--gold-soft);border:1px solid rgba(216,169,59,.35);
  color:var(--gold);font-size:12px;font-weight:500;
  cursor:pointer;transition:background .12s;
}
.dochip:hover{background:var(--gold-soft-2)}
.dochip-tag{
  font:500 10px var(--font-mono);
  color:var(--mut-2);background:rgba(0,0,0,.25);
  padding:1px 5px;border-radius:3px;letter-spacing:.04em;
}

/* AFK / Loops compact rows */
.mini-row{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-top:1px solid var(--line-2);
  cursor:pointer;transition:background .1s;
}
.mini-row:first-child{border-top:0}
.mini-row:hover{background:var(--bg-2)}
.mini-row-icon{
  width:28px;height:28px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;background:var(--panel-3);color:var(--gold);font-size:13px;
}
.mini-row-body{flex:1;min-width:0}
.mini-row-title{font-size:12.5px;color:var(--ink-2);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-row-meta{font-size:10.5px;color:var(--mut);margin-top:1px}
.mini-row-tail{font-size:10.5px;color:var(--mut-2);flex-shrink:0;font-family:var(--font-mono)}

/* Right column on Now */
.now-side{display:flex;flex-direction:column;gap:14px}

/* Stat strip */
.statstrip{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:4px;padding:10px 12px;
}
@media(max-width:1100px){.statstrip{grid-template-columns:repeat(7,1fr)}}
@media(max-width:600px){.statstrip{grid-template-columns:repeat(4,1fr)}}
.stat-cell{
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);
  padding:5px 4px;text-align:center;
}
.stat-cell .sl{font:500 9.5px var(--font);text-transform:uppercase;color:var(--mut);letter-spacing:.08em}
.stat-cell .sv{font:600 14px var(--font-mono);color:var(--ink);margin-top:1px}
.stat-cell.unset .sv{color:var(--mut-2)}
.stat-cell.combat{background:var(--gold-soft);border-color:rgba(216,169,59,.35)}
.stat-cell.combat .sv{color:var(--gold)}

/* Gear preview rows on Now */
.gear-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-top:1px solid var(--line-2);
}
.gear-row:first-of-type{border-top:0}
.gear-style{
  font:600 10.5px var(--font);text-transform:uppercase;letter-spacing:.1em;
  color:var(--mut);width:56px;flex-shrink:0;
}
.gear-style.melee{color:#ef9a73}
.gear-style.ranged{color:#a4cc7b}
.gear-style.magic{color:#9aaee8}
.gear-pick{flex:1;font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gear-pick small{color:var(--mut);font-size:10.5px;margin-left:6px}

/* ============================================================ */
/* PLAN VIEW                                                    */
/* ============================================================ */
.tier-strip{
  display:flex;gap:6px;overflow-x:auto;
  padding:4px 0 8px;
  scrollbar-width:thin;
}
.tier-pill{
  flex-shrink:0;
  display:flex;flex-direction:column;gap:5px;
  padding:8px 14px;min-width:140px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  text-align:left;
  cursor:pointer;transition:border-color .12s,background .12s;
}
.tier-pill:hover{border-color:var(--mut-2)}
.tier-pill.on{border-color:var(--gold);background:var(--panel-2)}
.tier-pill.done{opacity:.7}
.tier-pill-num{font:600 10.5px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.tier-pill.on .tier-pill-num{color:var(--gold)}
.tier-pill-name{font-size:12.5px;color:var(--ink-2);font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tier-pill-meta{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--mut);font-family:var(--font-mono)}
.tier-pill .bar{flex:1}

.tier-body{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  margin-top:6px;overflow:hidden;
}
.tier-blurb{
  padding:14px 16px;border-bottom:1px solid var(--line);
  background:var(--panel-2);
  color:var(--ink-2);font-size:12.5px;line-height:1.55;
}
.tier-blurb strong{color:var(--gold)}

.phase{border-bottom:1px solid var(--line-2)}
.phase:last-child{border-bottom:0}
.phase-head{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;background:var(--bg-2);
  cursor:pointer;user-select:none;
}
.phase-head:hover{background:var(--panel-2)}
.phase-caret{
  width:14px;height:14px;flex-shrink:0;color:var(--mut);
  transition:transform .15s;
}
.phase.open .phase-caret{transform:rotate(90deg)}
.phase-name{flex:1;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.phase-prog{font:500 11px var(--font-mono);color:var(--mut)}
.phase-prog.done{color:var(--ok)}
.phase-tasks{display:none}
.phase.open .phase-tasks{display:block}

.task{
  display:flex;align-items:flex-start;gap:10px;
  padding:8px 14px 8px 32px;
  border-top:1px solid var(--line-2);
  cursor:pointer;position:relative;
  transition:background .1s;
}
.task:hover{background:rgba(255,255,255,.02)}
.task.active{background:var(--gold-soft);border-left:3px solid var(--gold);padding-left:29px}
.task .cb{
  width:18px;height:18px;border:1.5px solid var(--mut-2);border-radius:4px;
  flex-shrink:0;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-2);
  transition:all .12s;
}
.task .cb svg{opacity:0;transform:scale(.5);transition:opacity .12s,transform .12s}
.task.done .cb{background:var(--ok);border-color:var(--ok)}
.task.done .cb svg{opacity:1;transform:scale(1);color:#0a1408}
.task-body{flex:1;min-width:0}
.task-title{font-size:13px;color:var(--ink);line-height:1.4;font-weight:500}
.task.done .task-title{color:var(--mut);text-decoration:line-through}
.task-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:11px;color:var(--mut);margin-top:2px;line-height:1.3}
.task-meta .req::before{content:"⚔ ";color:var(--mut-2)}
.task-meta .gp::before{content:"⛁ ";color:var(--gold)}
.task-tags{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap}
.task-tag{font:500 9.5px var(--font-mono);color:var(--mut-2);background:var(--bg-2);border:1px solid var(--line-2);padding:1px 5px;border-radius:3px;letter-spacing:.04em;text-transform:uppercase}
.task-tag.quest{color:var(--info);border-color:rgba(109,182,224,.3)}
.task-tag.milestone{color:var(--gold);border-color:rgba(216,169,59,.3)}
.task-tag.money{color:var(--ok);border-color:rgba(111,184,106,.3)}
.task-arrow{color:var(--mut-2);font-size:14px;opacity:0;transition:opacity .1s,transform .1s;margin-top:2px}
.task:hover .task-arrow{opacity:1;transform:translateX(2px)}

/* ============================================================ */
/* GEAR / AFK / STATS shared bits                              */
/* ============================================================ */
.tab-strip{
  display:flex;gap:3px;margin-bottom:10px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:3px;width:fit-content;flex-wrap:wrap;
}
.tab-strip button{
  padding:5px 12px;border-radius:4px;
  font-size:12px;color:var(--mut);font-weight:500;
  transition:all .12s;
}
.tab-strip button:hover{color:var(--ink-2)}
.tab-strip button.on{background:var(--gold-soft);color:var(--gold)}

.recommend-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;
  padding:10px 12px;
}
.rec-tile{
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);
  padding:9px 11px;
}
.rec-tile-label{font:600 10px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.rec-tile-val{font-size:13px;color:var(--ink);font-weight:500;margin-top:2px}
.rec-tile-meta{font-size:10.5px;color:var(--mut);margin-top:1px}

/* AFK rows / Gear ladder */
.ladder{display:flex;flex-direction:column}
.ladder-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-top:1px solid var(--line-2);
  cursor:pointer;
}
.ladder-row:first-child{border-top:0}
.ladder-row:hover{background:var(--bg-2)}
.ladder-row.met .l-name{color:var(--ok)}
.ladder-row.locked{opacity:.5}
.ladder-row.current{background:var(--gold-soft)}
.ladder-row.current::before{
  content:"NOW";font:600 9px var(--font-mono);
  letter-spacing:.1em;color:#1a1409;background:var(--gold);
  padding:2px 5px;border-radius:3px;margin-right:4px;
}
.l-tier{font:600 10.5px var(--font-mono);color:var(--mut-2);width:32px;flex-shrink:0;text-align:right}
.l-name{flex:1;font-size:13px;color:var(--ink-2);min-width:0}
.l-req{font-size:11px;color:var(--mut);font-family:var(--font-mono)}
.l-source{font-size:10.5px;color:var(--mut-2);padding:1px 6px;border-radius:3px;background:var(--bg-2);border:1px solid var(--line-2)}
.l-source.quest{color:var(--info)}
.l-source.shop{color:var(--ok)}
.l-source.drop{color:var(--warn)}

/* AFK extended row */
.afk-row{
  padding:11px 14px;border-top:1px solid var(--line-2);cursor:pointer;
  transition:background .1s;
}
.afk-row:first-child{border-top:0}
.afk-row:hover{background:var(--bg-2)}
.afk-row.locked{opacity:.55}
.afk-line1{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.afk-name{font-size:13.5px;color:var(--ink);font-weight:600;flex:1;min-width:140px}
.afk-rate{font:500 12px var(--font-mono);color:var(--gold)}
.afk-line2{margin-top:4px;font-size:11.5px;color:var(--mut);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.afk-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.afk-tags .pill{font-size:9.5px;padding:1px 6px}

/* Bucket headers */
.bucket{
  border:1px solid var(--line);border-radius:var(--r-lg);
  margin-top:14px;overflow:hidden;background:var(--panel);
}
.bucket-head{
  display:flex;align-items:center;gap:8px;
  padding:9px 14px;background:var(--panel-2);
  cursor:pointer;user-select:none;
}
.bucket-head:hover{background:var(--panel-3)}
.bucket-head h3{margin:0;font:600 12px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.bucket-head .count{font:500 11px var(--font-mono);color:var(--mut);background:var(--bg-2);padding:1px 7px;border-radius:99px}
.bucket-head .spacer{flex:1}
.bucket-caret{color:var(--mut);transition:transform .15s;width:14px;height:14px}
.bucket.open .bucket-caret{transform:rotate(90deg)}
.bucket-body{display:none}
.bucket.open .bucket-body{display:block}
.bucket[data-bucket="locked"] .bucket-head h3{color:var(--mut)}
.bucket[data-bucket="available"]{border-color:rgba(111,184,106,.25)}
.bucket[data-bucket="available"] .bucket-head{background:rgba(111,184,106,.06)}
.bucket[data-bucket="available"] .bucket-head h3{color:var(--ok)}

/* STATS view */
.stats-input-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px;
}
.stat-input{
  display:flex;flex-direction:column;gap:3px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:7px 9px;
}
.stat-input label{font:600 10px var(--font);text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
.stat-input input{
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:4px;
  padding:5px 7px;font:600 14px var(--font-mono);color:var(--ink);width:100%;
}
.stat-input input:focus{outline:0;border-color:var(--gold);color:var(--gold)}
.stat-input.combat input{color:var(--gold);background:var(--gold-soft)}

.skill-group{margin-top:14px}
.skill-group h3{margin:0 0 6px;font:600 11px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}

.rsn-row{
  display:flex;gap:8px;align-items:center;padding:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  margin-bottom:14px;flex-wrap:wrap;
}
.rsn-row input{
  flex:1;min-width:140px;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);
  padding:7px 10px;color:var(--ink);font-size:13px;
}
.rsn-row input:focus{outline:0;border-color:var(--gold)}

/* Always-On loops grid */
.loops-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;
}
.loop-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:12px 14px;
  display:flex;flex-direction:column;gap:6px;
  position:relative;overflow:hidden;
}
.loop-card.locked{opacity:.55}
.loop-card-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.loop-card-title{font:600 13.5px var(--font);color:var(--ink);flex:1;min-width:120px}
.loop-card-cadence{font:500 10.5px var(--font-mono);color:var(--gold);background:var(--gold-soft);padding:2px 7px;border-radius:99px;white-space:nowrap}
.loop-card-detail{font-size:11.5px;color:var(--mut);line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.loop-card.expanded .loop-card-detail{-webkit-line-clamp:99;display:block}
.loop-card-foot{display:flex;align-items:center;gap:10px;font-size:11px;margin-top:4px}
.loop-card-foot a{color:var(--ink-2)}
.loop-card-foot .unlocked-by{color:var(--mut);font-style:italic}

/* ============================================================ */
/* ALT ROUTES VIEW — compressed-by-default, opt-in expansion   */
/* ============================================================ */
.alt-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:12px;
  margin-top:8px;
}
.alt-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.alt-card.expanded{grid-column:1/-1}
.alt-card-head{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line-2);
  background:var(--panel-2);
}
.alt-card-head .alt-name{
  flex:1;font:600 14px var(--font-display);color:var(--ink);letter-spacing:.02em;
}
.alt-card-head .alt-prog{font:500 11px var(--font-mono);color:var(--mut);background:var(--bg-2);padding:2px 8px;border-radius:99px}
.alt-card-head .alt-prog.done{color:var(--ok)}
.alt-blurb-wrap{padding:12px 14px;color:var(--ink-2);font-size:12.5px;line-height:1.55}
.alt-blurb-wrap strong{color:var(--gold)}
.alt-card-foot{
  padding:10px 14px 12px;border-top:1px solid var(--line-2);background:var(--bg-2);
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}
.alt-toggle{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border:1px solid var(--gold);border-radius:var(--r);
  color:var(--gold);background:var(--gold-soft);font:600 12px var(--font);
}
.alt-toggle:hover{background:var(--gold-soft-2)}
.alt-toggle .caret{transition:transform .15s;display:inline-block}
.alt-card.expanded .alt-toggle .caret{transform:rotate(90deg)}
.alt-card-tasks{display:none;border-top:1px solid var(--line-2)}
.alt-card.expanded .alt-card-tasks{display:block}

/* DRAWER ========================================================== */
.drawer{
  position:fixed;top:0;right:0;width:min(520px,92vw);height:100vh;
  background:var(--panel);border-left:1px solid var(--line);
  z-index:50;display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg);
}
.drawer[hidden]{display:none !important}
.drawer-head{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--line);
  background:var(--panel-2);
}
.drawer-crumb{flex:1;font-size:11px;color:var(--mut);letter-spacing:.04em}
.drawer-crumb strong{color:var(--gold);font-weight:600}
.drawer-close{
  width:32px;height:32px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  color:var(--mut);
}
.drawer-close:hover{color:var(--ink);background:var(--bg-2)}
.drawer-body{flex:1;overflow-y:auto;padding:16px 20px 60px}

.drawer-title{font:600 18px/1.3 var(--font-display);color:var(--ink);margin:0 0 10px}
.drawer-section{margin:14px 0}
.drawer-section h4{
  margin:0 0 6px;font:600 10.5px var(--font);
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut);
}
.drawer-detail{
  white-space:pre-wrap;font-size:13px;line-height:1.6;color:var(--ink-2);
}
.drawer-links{display:flex;flex-wrap:wrap;gap:6px}
.drawer-links a{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border:1px solid var(--line);border-radius:var(--r);
  font-size:11.5px;color:var(--ink-2);
}
.drawer-links a:hover{border-color:var(--gold);color:var(--gold);text-decoration:none}

.drawer-cta{
  display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;
}

/* POPOVER ========================================================= */
.popover{
  position:fixed;left:74px;bottom:14px;width:280px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px;box-shadow:var(--shadow-lg);z-index:60;
}
.popover h3{margin:0 0 10px;font:600 12px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.set-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 0;font-size:13px;color:var(--ink-2);
}
.set-row input[type=checkbox]{accent-color:var(--gold)}
.popover .t-btn{width:100%;justify-content:center;margin-top:10px}
.set-foot{margin-top:10px;font-size:10.5px;color:var(--mut-2);font-family:var(--font-mono);text-align:center}

/* RESPONSIVE ====================================================== */
@media(max-width:780px){
  .now-grid{grid-template-columns:1fr}
  .recommend-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  .loops-grid{grid-template-columns:1fr}
  .alt-grid{grid-template-columns:1fr}
}

@media(max-width:680px){
  .shell{grid-template-columns:1fr;grid-template-rows:46px 1fr 58px;grid-template-areas:"topbar" "main" "rail"}
  .rail{position:fixed;bottom:0;left:0;right:0;top:auto;height:58px;width:100%;
    flex-direction:row;border-right:0;border-top:1px solid var(--line);padding:0;
    justify-content:space-around;gap:0;background:#0f0c08;
    padding-bottom:env(safe-area-inset-bottom,0);
    height:calc(58px + env(safe-area-inset-bottom,0));
  }
  .rail-logo{display:none}
  .rail-btn{flex:1;margin:0;padding:8px 0 6px;border-radius:0;font-size:9.5px;gap:2px}
  .rail-btn svg{width:20px;height:20px}
  .rail-btn.on::before{left:0;right:0;top:0;bottom:auto;width:auto;height:2px;border-radius:0}
  .rail-spacer,.rail-overall,.rail-mini{display:none}
  .main{padding:10px 12px 80px}
  .topbar{padding:0 10px;gap:8px;height:46px}
  .crumb-view{font-size:14px}
  .crumbs .crumb-sub,.crumb-sep{display:none}
  .search-wrap{max-width:none;padding:5px 8px}
  .search-wrap kbd{display:none}
  .topbar-tools .t-btn:not(.t-icon){display:none}
  .popover{left:14px;right:14px;bottom:74px;width:auto}

  .now-hero{padding:14px 14px 16px}
  .now-hero-title{font-size:17px}
  .now-hero-actions{gap:6px}
  .btn-check{padding:8px 14px;font-size:12.5px}
  .btn-ghost{padding:8px 11px;font-size:12px}
  .upnext{grid-template-columns:1fr}
  .chip-row{padding:8px 10px}
  .dochip{font-size:11.5px;padding:6px 12px}

  .statstrip{grid-template-columns:repeat(4,1fr)}
  .stat-cell{padding:5px 3px}
  .stat-cell .sv{font-size:13px}

  .tier-pill{min-width:120px;padding:7px 11px}
  .tier-pill-name{font-size:12px}

  .tab-strip{width:100%;overflow-x:auto;flex-wrap:nowrap;padding:3px}
  .tab-strip button{flex-shrink:0}

  .afk-line1{gap:4px}
  .afk-rate{font-size:11px}
  .afk-name{font-size:13px;min-width:0;flex:1}

  .task{padding:9px 12px 9px 28px;gap:9px}
  .task.active{padding-left:25px}
  .task .cb{width:20px;height:20px}
  .task-title{font-size:13px}

  .drawer{width:100% !important;border-left:0}
  .drawer-body{padding:14px 16px 80px}
  .drawer-title{font-size:17px}
  .drawer-detail{font-size:12.5px;line-height:1.55}

  .stats-input-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:420px){
  .rail-btn{font-size:9px;letter-spacing:.02em}
  .rail-btn svg{width:20px;height:20px}
  .now-hero-loc,.now-hero-reqs{font-size:11.5px}
  .statstrip{grid-template-columns:repeat(4,1fr);gap:3px}
  .topbar{padding:0 8px;gap:6px}
  .crumb-view{font-size:13px}
}

/* PROJECTED-COMBAT BANNER (Stats view) =============================== */
.proj-banner{
  font-size:12.5px;
  color:var(--ink-2);
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:var(--r);
  margin-bottom:14px;
  background:var(--panel);
}
.proj-banner-head{color:var(--ink);font-weight:500}
.proj-banner-bumps{color:var(--mut);margin-top:3px;font-size:12px}

/* XP GRANT TABLE (drawer) =========================================== */
.xp-grant-table{
  display:flex;flex-direction:column;
  border:1px solid var(--line-2);border-radius:var(--r);
  overflow:hidden;background:var(--bg-2);
}
.xp-grant-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;
  padding:6px 10px;
  border-top:1px solid var(--line-2);
  font-size:12px;color:var(--ink-2);
  align-items:baseline;
}
.xp-grant-row:first-child{border-top:0}
.xp-grant-head{
  background:var(--panel-2);
  font:600 10px var(--font);
  letter-spacing:.1em;text-transform:uppercase;color:var(--mut);
}
.xp-grant-skill{text-transform:capitalize}
.xp-grant-val{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.xp-grant-delta{font-family:var(--font-mono);font-size:11.5px;color:var(--gold);white-space:nowrap;text-align:right}
.xp-grant-note{margin-top:6px;font-size:11px;color:var(--mut);font-style:italic}

/* GEAR ANCHOR JUMP (drawer) ========================================== */
.gear-anchor-jump{
  display:inline-block;
  padding:7px 11px;
  border:1px solid var(--gold);
  border-radius:var(--r);
  background:var(--gold-soft);
  color:var(--gold);
  font:500 12px var(--font);
  cursor:pointer;
  transition:background .12s;
}
.gear-anchor-jump:hover{background:var(--gold-soft-2);text-decoration:none}

/* FLASH (gear ladder row scroll-target) ============================= */
@keyframes flash-bg{
  0%{background:var(--gold-soft-2)}
  50%{background:var(--gold-soft)}
  100%{background:transparent}
}
.ladder-row.flash{animation:flash-bg 1s ease}

/* TOAST (tier-cross celebration) ==================================== */
.toast{
  position:fixed;
  right:18px;bottom:18px;
  max-width:340px;
  background:var(--panel);
  border:1px solid var(--gold);
  border-left:3px solid var(--gold);
  border-radius:var(--r);
  padding:10px 14px;
  color:var(--ink);
  font-size:12.5px;line-height:1.45;
  box-shadow:var(--shadow-lg);
  z-index:80;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .25s,transform .25s;
  pointer-events:none;
}
.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:680px){
  .toast{right:12px;left:12px;bottom:74px;max-width:none}
}

/* SMALL helper */
.hide{display:none !important}
.fade-in{opacity:1}

/* Scrollbar */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:2px solid var(--bg)}
*::-webkit-scrollbar-thumb:hover{background:var(--mut-2)}