:root{
  --void:#05060b; --void-2:#070912; --panel:#0a0f1b; --panel-2:#0f1626; --panel-3:#141d31;
  --line:rgba(126,158,214,.16); --line-strong:rgba(126,178,255,.34);
  --cyan:#35c6ff; --cyan-soft:#7fe0ff; --blue:#3a72ff; --violet:#8b5cf6; --violet-soft:#b79cff;
  --chrome:#e2e9f5; --text:#a6b3c9; --muted:#69768d;
  --good:#46e0a8; --warn:#ffcf5c; --bad:#ff6b7d;
  --grad:linear-gradient(100deg,var(--cyan) 0%,var(--blue) 46%,var(--violet) 100%);
  --r:16px; --maxw:1120px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--text);
  font-family:'Barlow',system-ui,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh;
  background-image:
    radial-gradient(1200px 700px at 78% -8%, #1a2b6b33, transparent 60%),
    radial-gradient(900px 620px at 8% 4%, #0b3a5a3d, transparent 60%),
    radial-gradient(1000px 900px at 50% 120%, #3a1f6e2e, transparent 62%);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,.disp{font-family:'Chakra Petch',sans-serif;color:var(--chrome);line-height:1.1;margin:0;letter-spacing:.2px}
.mono{font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--cyan);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan))}
.muted{color:var(--muted)}

/* Nav */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(5,6,11,.92),rgba(5,6,11,.62));border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:22px;height:62px}
.brand{display:flex;align-items:center;gap:11px;font-family:'Chakra Petch';font-weight:700;font-size:1.06rem;
  letter-spacing:.06em;color:var(--chrome)}
.brand .mark{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 0 8px #35c6ff66)}
.brand b{color:var(--cyan);font-weight:700}
.nav-links{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav.has-search .nav-links{margin-left:0}
.nav-search{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border-radius:9px;
  border:1px solid var(--line-strong);color:var(--chrome);background:rgba(120,160,230,.06);flex:0 0 auto}
.nav-search:hover{color:var(--cyan-soft);border-color:var(--cyan)}
.nav-search kbd{font:600 .7rem/1 inherit;padding:2px 5px;border-radius:4px;border:1px solid var(--line-strong);color:var(--muted)}
@media (max-width:1180px){.nav-search{padding:0 8px}.nav-search kbd{display:none}}
.gs-overlay{position:fixed;inset:0;z-index:60;background:rgba(3,6,14,.72);backdrop-filter:blur(3px);display:flex;justify-content:center;
  align-items:flex-start;padding:7vh 16px 16px}
.gs-overlay[hidden]{display:none}
html.gs-open{overflow:hidden}
.gs-box{width:min(860px,100%);max-height:86vh;overflow:auto;background:var(--panel,#0b1220);border:1px solid var(--line-strong);
  border-radius:16px;padding:16px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.gs-bar{display:flex;gap:8px}
.gs-q{flex:1;min-width:0;font-size:1rem}
.gs-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.gs-chip{font:inherit;font-size:.78rem;padding:5px 10px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;
  color:var(--chrome);cursor:pointer}
.gs-chip:hover{color:var(--cyan-soft);border-color:var(--cyan)}
.gs-help{font-size:.84rem;color:var(--chrome);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:10px}
.gs-help ul{margin:6px 0 6px 18px;padding:0}
.gs-help code{font-size:.8rem;color:var(--cyan-soft)}
.gs-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:4px 0 8px;font-size:.84rem}
.gs-alllbl{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.gs .gs-bulk-to{width:auto;min-width:170px;margin-left:auto;padding:6px 10px;font-size:.84rem}
.gs-status{font-size:.82rem;margin:6px 0 8px}
.gs-row{padding:8px 12px;gap:10px;flex-wrap:wrap}
.gs-row .icon{width:40px;height:40px;flex:0 0 auto}
.gs-main{min-width:0;flex:1 1 170px}
.gs-main .lead{font-size:.92rem}
.gs-main .sub{font-size:.78rem}
.gs-perks{color:var(--cyan-soft)}
.gs .gs-act{width:auto;min-width:150px;padding:6px 10px;font-size:.82rem;margin-left:auto}
.gs-lock{font-size:.76rem;margin-left:auto}
.gs-page{margin-top:10px}
@media (max-width:600px){.gs .gs-act,.gs .gs-bulk-to{flex:1 1 100%;margin-left:0}.gs-overlay{padding:10px}.gs-box{max-height:94vh}}
.nav-links a{font-size:.85rem;letter-spacing:.03em;color:var(--text);transition:color .2s;font-weight:600}
.nav-links a:hover,.nav-links a.on{color:var(--cyan-soft)}
.who{display:flex;align-items:center;gap:9px;padding-left:6px}
.who img{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong)}
.who span{font-size:.82rem;color:var(--chrome);max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-links a{white-space:nowrap}
@media (min-width:1081px) and (max-width:1280px){.who span{display:none}}
/* Hamburger toggle — only rendered (and only shown) when a user is logged in
   and the nav actually has links to collapse. */
.nav-toggle{display:none;margin-left:auto;align-items:center;justify-content:center;gap:4px;flex-direction:column;
  width:44px;height:40px;padding:0;border-radius:10px;cursor:pointer;
  background:rgba(120,160,230,.06);border:1px solid var(--line-strong)}
.nav-toggle span{display:block;width:20px;height:2px;border-radius:2px;background:var(--chrome);
  transition:transform .22s var(--ease),opacity .18s var(--ease)}
.nav-toggle.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.on span:nth-child(2){opacity:0}
.nav-toggle.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1080px){
  .nav-in{gap:14px;height:58px}
  .nav.has-menu .nav-toggle{display:inline-flex}
  .nav.has-search .nav-toggle{margin-left:4px}
  .nav-search kbd{display:none}
  .nav.has-menu .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;margin:0;padding:0;background:linear-gradient(180deg,rgba(7,9,18,.99),rgba(7,9,18,.99));
    border-bottom:1px solid var(--line);max-height:0;overflow:hidden;
    transition:max-height .26s var(--ease);box-shadow:0 24px 40px -24px #000}
  .nav.has-menu .nav-links.open{max-height:min(80vh,520px);overflow:auto}
  .nav.has-menu .nav-links a{padding:14px 22px;font-size:.98rem;border-top:1px solid var(--line)}
  .nav.has-menu .nav-links a:first-child{border-top:0}
  .nav.has-menu .who{padding:14px 22px;border-top:1px solid var(--line)}
  .nav.has-menu .who span{display:inline}
  .nav.has-menu .nav-links form{padding:0 22px 16px}
  .nav.has-menu .nav-links form .btn{width:100%;justify-content:center}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;cursor:pointer;font-family:'Chakra Petch';font-weight:600;
  font-size:.88rem;letter-spacing:.04em;padding:.66em 1.15em;border-radius:11px;border:1px solid transparent;
  color:#04121c;background:var(--grad);box-shadow:0 6px 22px -8px #35c6ff88, inset 0 1px 0 #ffffff55;
  transition:transform .18s var(--ease),box-shadow .25s var(--ease);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px #6aa5ffaa,inset 0 1px 0 #ffffff66}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:rgba(120,160,230,.06);color:var(--chrome);border:1px solid var(--line-strong);box-shadow:none;clip-path:none;border-radius:11px}
.btn.ghost:hover{background:rgba(120,160,230,.12);box-shadow:0 0 0 1px var(--line-strong)}
.btn.sm{padding:.5em .9em;font-size:.8rem}
.btn.danger{background:rgba(255,107,125,.1);color:var(--bad);border:1px solid #ff6b7d55;box-shadow:none;clip-path:none;border-radius:11px}
.btn.discord{background:linear-gradient(100deg,#5865F2,#7c86ff);color:#fff}
.btn.bungie{background:linear-gradient(100deg,#0a2f6b,#1b5fc7);color:#fff}

/* Panels / widget cards (the features-page console blocks) */
.panel{position:relative;background:linear-gradient(180deg,rgba(18,26,44,.6),rgba(10,15,27,.6));
  border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 18px;backdrop-filter:blur(8px)}
.panel.glow::before{content:"";position:absolute;inset:0;border-radius:var(--r);padding:1px;background:var(--grad);
  opacity:.28;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel-head .lbl{font-family:'Chakra Petch';font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.chip{font-family:'Chakra Petch';font-weight:600;font-size:.72rem;letter-spacing:.06em;color:var(--cyan-soft);
  border:1px solid var(--line-strong);background:rgba(53,198,255,.06);border-radius:999px;padding:.3em .8em;white-space:nowrap}
.chip.violet{color:var(--violet-soft);border-color:#8b5cf655;background:rgba(139,92,246,.1)}
.cmd{display:inline-block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;color:var(--cyan-soft);
  border:1px solid var(--line-strong);background:rgba(53,198,255,.05);border-radius:8px;padding:.2em .6em}

/* Rows inside a widget */
.rows{display:flex;flex-direction:column;gap:9px}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:rgba(9,13,23,.5)}
.row.sel{border-color:var(--line-strong);background:rgba(53,198,255,.05)}
.row .lead{font-weight:600;color:var(--chrome)}
.row .sub{color:var(--muted);font-size:.86rem}
.row .end{margin-left:auto;display:flex;align-items:center;gap:10px}
.rank{width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;font-family:'Chakra Petch';
  font-weight:700;color:#04121c;background:var(--grad);font-size:.9rem}
.rank.dim{background:rgba(120,160,230,.14);color:var(--text)}

/* Verdict pills */
.pill{font-family:'Chakra Petch';font-weight:600;font-size:.72rem;letter-spacing:.05em;padding:.24em .6em;border-radius:999px;white-space:nowrap}
.pill.god{color:#ffe08a;border:1px solid #ffcf5c55;background:rgba(255,207,92,.12)}
.pill.pve{color:var(--cyan-soft);border:1px solid var(--line-strong);background:rgba(53,198,255,.08)}
.pill.pvp{color:var(--violet-soft);border:1px solid #8b5cf655;background:rgba(139,92,246,.1)}
.pill.junk{color:var(--bad);border:1px solid #ff6b7d55;background:rgba(255,107,125,.1)}
.pill.off{color:var(--muted);border:1px solid var(--line)}
.pill.na{color:var(--muted);border:1px solid var(--line)}
.pill.good{color:var(--good);border:1px solid #46e0a855;background:rgba(70,224,168,.1)}
.pill.locked{color:var(--muted);border:1px solid var(--line)}

/* Status labels for the ZTH track */
.st{font-family:'Chakra Petch';font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.5em}
.st.cleared{color:var(--good)}
.st.progress{color:var(--good)}
.st.locked{color:var(--muted)}
/* Pulsing green "live" dot for the in-progress raid/dungeon (matches the
   Active status on the features page). */
.livedot{display:inline-block;vertical-align:middle;width:9px;height:9px;border-radius:50%;background:var(--good);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(70,224,168,.55);animation:livepulse 1.8s var(--ease) infinite}
/* Inside a status pill ("Open", "Active") the dot sits before the word with
   a gap, and pulses a little tighter so the ring stays around the dot. */
.pill>.livedot{width:7px;height:7px;margin:0 .45em 0 .05em;vertical-align:0;animation-name:livepulse-sm}
@keyframes livepulse-sm{0%{box-shadow:0 0 0 0 rgba(70,224,168,.55)}70%{box-shadow:0 0 0 5px rgba(70,224,168,0)}100%{box-shadow:0 0 0 0 rgba(70,224,168,0)}}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(70,224,168,.5)}70%{box-shadow:0 0 0 7px rgba(70,224,168,0)}100%{box-shadow:0 0 0 0 rgba(70,224,168,0)}}

/* Layout helpers */
.page{padding-top:34px;padding-bottom:70px}
.page h1{font-size:1.9rem;margin-bottom:6px}
.page .lede{color:var(--text);max-width:60ch;margin-bottom:24px}
.grid{display:grid;gap:16px}
/* min(280px,100%) so a single card never forces horizontal scroll on a
   narrow phone (a bare 280px track would overflow a ~300px viewport). */
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
/* Fixed multi-column layouts (character gear vs inventory, ZTH order vs
   fireteam) that must fold to a single column on small screens. */
.grid.duo{grid-template-columns:1fr 1fr;align-items:start}
.grid.split{grid-template-columns:1.4fr 1fr;align-items:start}
@media (max-width:820px){.grid.duo,.grid.split{grid-template-columns:1fr}}
.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:.82rem;color:var(--muted)}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.seg a{padding:.5em 1em;font-family:'Chakra Petch';font-size:.82rem;letter-spacing:.04em;color:var(--text)}
.seg a.on{background:rgba(53,198,255,.1);color:var(--cyan-soft)}
.check{width:18px;height:18px;accent-color:#35c6ff;flex:0 0 auto}
.field{width:100%;padding:.7em 1em;border-radius:11px;border:1px solid var(--line-strong);background:rgba(9,13,23,.7);
  color:var(--chrome);font-size:.95rem;font-family:'Barlow',sans-serif}
.field:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(53,198,255,.15)}
.notice{padding:14px 16px;border-radius:12px;border:1px solid var(--line-strong);background:rgba(53,198,255,.06);margin-bottom:18px}
.notice.warn{border-color:#ffcf5c55;background:rgba(255,207,92,.08);color:#ffe6ab}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.icon{width:34px;height:34px;border-radius:8px;flex:0 0 auto;background:#0d1424;border:1px solid var(--line);object-fit:cover}
.lo-ico{display:inline-grid;place-items:center;flex:0 0 auto;border-radius:7px;overflow:hidden;background:#0d1424 center/cover no-repeat;
  border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.lo-ico img{width:100%;height:100%;object-fit:contain;border:0;background:none}
html.embedded header.nav,html.embedded .foot{display:none}
html.embedded main.page{padding-top:20px;padding-bottom:30px}
/* "← Dashboard" back links would load the dashboard into the overlay. */
html.embedded .toolbar:has(> a[href="/web/dashboard"]:only-child){display:none}
.charcard{display:block;transition:transform .18s var(--ease)}
.charcard:hover{transform:translateY(-3px)}
.charcard:hover .panel{border-color:var(--line-strong)}
/* Subclass ability/aspect preview chips on loadout cards */
.plug-strip{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto;padding-left:8px}
.plug{width:30px;height:30px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;
  background:#0d1424;border:1px solid var(--line)}
.plug img{width:100%;height:100%;object-fit:cover}
.plug.aspect{border-color:var(--violet);box-shadow:0 0 0 1px #8b5cf655}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;
  transition:.25s var(--ease);background:var(--panel-2);border:1px solid var(--line-strong);border-radius:12px;
  padding:12px 18px;color:var(--chrome);font-size:.9rem;box-shadow:0 20px 50px -20px #000;z-index:100;max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Live equip progress (loadout/progress.js via GhostProgress below) */
#equipProgress{position:fixed;right:18px;bottom:18px;z-index:60;width:min(300px,calc(100vw - 32px));background:var(--panel,#0f1522);
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:0 12px 40px rgba(0,0,0,.45);font-size:.86rem}
#equipProgress .ep-title{font-family:'Chakra Petch';letter-spacing:.04em;font-size:.8rem;color:var(--cyan-soft);margin-bottom:8px}
#equipProgress .ep-row{display:flex;align-items:center;gap:8px;padding:3px 0;color:var(--muted)}
#equipProgress .ep-row.active{color:var(--text)}
#equipProgress .ep-row.done{color:var(--text)}
#equipProgress .ep-count{margin-left:auto;font-variant-numeric:tabular-nums}
#equipProgress .ep-bar{height:3px;border-radius:2px;background:var(--line);margin-top:8px;overflow:hidden}
#equipProgress .ep-bar i{display:block;height:100%;background:var(--cyan-soft);transition:width .3s}
.foot{border-top:1px solid var(--line);margin-top:40px;padding:22px 0;color:var(--muted);font-size:.82rem;text-align:center}

/* --- Mobile scaling -------------------------------------------------------
   Tighter gutters, smaller headings, roomier tap targets, and full-width
   form controls (the inline max-width caps leave awkward gaps on a phone). */
@media (max-width:640px){
  body{font-size:15px}
  .wrap{padding:0 16px}
  .page{padding-top:24px;padding-bottom:56px}
  .page h1{font-size:1.5rem}
  .panel{padding:16px 15px 14px}
  /* Let a row's trailing controls/verdict pills drop to a second line rather
     than overflow the viewport on a narrow phone. */
  .row{padding:11px 13px;flex-wrap:wrap}
  .row .end{margin-left:auto}
  .field{max-width:none!important}
  .btn{padding:.7em 1.05em}
  .btn.sm{padding:.6em .95em}
  .legend{gap:10px 16px}
  /* Controls that share a flex bar (Save / Import / Gather panels) stack and
     go full-width instead of squeezing side by side. */
  .stack-sm{flex-direction:column;align-items:stretch!important}
  .stack-sm>.btn,.stack-sm>select,.stack-sm>input{width:100%;max-width:none!important}
  .stack-sm .lbl{margin-bottom:2px}
}