:root{
 --ground:#03121D;--panel:#061626;--surface:#081B29;--dcard:#071523;--sunk:#0A1B2B;
 --line:#12283D;--line2:#0E1E2E;
 --ink:#F5F7FF;--muted:#9AB6D0;--faint:#7E9AB5;
 --ice:#35C8F5;--ice-dim:#0B2E44;
 --good:#35DEA0;--good-dim:#06341F;
 --coral:#FF5946;--coral-dim:#33121B;
 --violet:#A58BFA;--violet-dim:#211C40;
 --orange:#FF823F;--orange-dim:#2C211C;
 --ember:#FF823F;
 --gold:#F5A524;--gold-dim:#2C2110;
 --edit:#0C2234;--edit-b:#1D4257;--edit2:#1A1638;--edit2-b:#332856;
 /* ---- artwork slots: swap these three files to change all the imagery ----
    --art-hero is reused three ways (hero banner, dashboard card headers and
    the "Days to next SvS" tile) via different crops. */
 --art-hero:url("art-hero.jpg");
 --art-foot:url("art-footer.jpg");
 --art-fox:url("art-fox.png");
 --shadow:0 1px 2px rgba(0,0,0,.5),0 18px 38px -26px #000;
 --wrap:1200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
 font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:14.5px;line-height:1.55;
 -webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px}
.mono{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.lbl{font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.11em;
 text-transform:uppercase;color:var(--faint)}

/* ---------- top bar ---------- */
header.top{position:sticky;top:0;z-index:60;height:68px;background:#04121E;
 border-bottom:1px solid rgba(53,200,245,.10)}
header.top .tin{height:68px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand .logo{width:40px;height:40px;border-radius:9px;flex:none;
 background-image:var(--art-fox);background-size:cover;background-position:center}
.brand .btext{display:flex;flex-direction:column;line-height:1.15}
.brand .kick{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:15px;
 letter-spacing:.03em;text-transform:uppercase;color:#fff}
.brand .bsub{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;
 text-transform:uppercase;color:var(--faint);margin-top:2px}

nav.tabs{display:flex;align-items:center;gap:0;height:68px;overflow-x:auto;
 scrollbar-width:none;flex:1;min-width:0}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:13.5px;
 background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
 padding:0 11px;height:66px;cursor:pointer;white-space:nowrap;letter-spacing:.01em}
nav.tabs button:hover{color:var(--ink)}
nav.tabs button[hidden]{display:none}
nav.tabs button[aria-selected="true"]{color:var(--ice);border-bottom-color:var(--ice)}

#userbar{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
#sync{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--faint);
 white-space:nowrap;margin-right:2px}
#sync.warn{color:var(--orange)}
#userbar .avatar{width:34px;height:34px;border-radius:50%;flex:none;
 background:#0C2740;border:1px solid rgba(53,200,245,.45);color:#DCF3FF;
 font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:12.5px;
 display:flex;align-items:center;justify-content:center}
#userbar b{font-weight:400;color:#DCE8F4;font-family:"IBM Plex Mono",monospace;font-size:11.5px;
 white-space:nowrap}
#signout{background:none;border:0;padding:4px;cursor:pointer;color:var(--faint);
 display:flex;align-items:center;border-radius:6px}
#signout svg{width:16px;height:16px}
#signout:hover{color:var(--ink)}

/* ---------- hero ----------
   Outer band is plain navy and full width. The artwork lives on .hin, which is
   the SAME centred .wrap container the summary panel and dashboard use, so the
   heading's left edge lines up with the panel below. */
.hero{background:var(--ground)}
.hin{position:relative;display:flex;align-items:center;min-height:320px;overflow:hidden;
 background-image:
   linear-gradient(90deg,var(--ground) 0%,rgba(3,18,29,.96) 24%,rgba(3,18,29,.66) 42%,rgba(3,18,29,.18) 60%,rgba(3,18,29,0) 76%),
   linear-gradient(270deg,var(--ground) 0%,rgba(3,18,29,.70) 6%,rgba(3,18,29,0) 18%),
   linear-gradient(0deg,var(--ground) 0%,rgba(3,18,29,.72) 9%,rgba(3,18,29,0) 28%),
   var(--art-hero);
 background-size:auto,auto,auto,100% auto;
 background-position:center,center,center,center top;
 background-repeat:no-repeat}
.herotext{position:relative;max-width:480px}
.herokick{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:11.5px;
 letter-spacing:.24em;text-transform:uppercase;color:var(--ice);margin:0 0 13px}
.hero h1{font-family:"Chakra Petch",sans-serif;font-weight:700;
 font-size:clamp(32px,4.3vw,46px);line-height:1.05;margin:0 0 15px;color:#F7FAFF;
 letter-spacing:-.005em}
.hero h1 .fox{color:var(--orange)}
.hero .sub{color:#B8CCDF;margin:0;font-size:14.5px;line-height:1.62}

/* ---------- summary panel ---------- */
.statspanel{margin:20px 0;background:rgba(7,22,38,.72);border:1px solid #102439;
 border-radius:16px;padding:13px}
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.stat{background:var(--surface);border:1px solid #102439;border-radius:12px;
 padding:14px 15px 13px;position:relative;overflow:hidden;min-height:142px;
 display:flex;flex-direction:column}
.stat .sicon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;
 justify-content:center;margin-bottom:11px;flex:none}
.stat .sicon svg{width:17px;height:17px}
.stat .sicon.coin{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:15px}
.stat.c-blue .sicon{background:rgba(53,200,245,.13);color:var(--ice)}
.stat.c-green .sicon{background:rgba(53,222,160,.13);color:var(--good)}
.stat.c-violet .sicon{background:rgba(165,139,250,.14);color:var(--violet)}
.stat.c-orange .sicon{background:rgba(255,130,63,.14);color:var(--orange)}
.stat .lbl{display:block}
.stat b{display:block;font-family:"IBM Plex Mono",monospace;font-weight:600;
 font-size:25px;line-height:1.2;margin-top:5px;color:#F7F8F9}
.stat small{display:block;color:var(--faint);font-size:11.5px;margin-top:3px}
.barrow{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:11px}
.bar{flex:1;height:5px;border-radius:3px;background:#12233A;overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px}
.barpct{font-family:"IBM Plex Mono",monospace;font-size:11.5px;flex:none}

.stat.svs{align-items:center;justify-content:center;text-align:center;padding:14px;
 border-color:rgba(53,200,245,.30);
 background-image:linear-gradient(180deg,rgba(6,28,48,.70),rgba(5,22,40,.88)),var(--art-hero);
 background-size:cover,560% auto;background-position:center,34% 26%}
.stat.svs .lbl{color:#9FD8F2;letter-spacing:.1em}
.stat.svs b{font-size:42px;color:#54E1FF;margin-top:2px;line-height:1.1}
.stat.svs .date{display:flex;align-items:center;justify-content:center;gap:6px;
 font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:#C3DCEC;margin-top:5px}
.stat.svs .date svg{width:13px;height:13px;opacity:.8}

/* ---------- panels / toolbar ---------- */
.panel{display:none}.panel.on{display:block}
.toolbar{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:4px 0 6px}
.chip{font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.05em;
 text-transform:uppercase;color:var(--muted);background:transparent;border:1px solid var(--line);
 border-radius:999px;padding:5px 12px;cursor:pointer}
.chip:hover{color:var(--ink);border-color:var(--faint)}
.chip[aria-pressed="true"]{background:var(--ice);border-color:var(--ice);color:#04141C}
.chip.act{border-style:dashed;color:var(--ice)}
input[type=search]{margin-left:auto;font:inherit;font-size:13px;background:var(--surface);
 color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:6px 14px;min-width:180px}
.hint{color:var(--faint);font-size:12px;margin:6px 0 0;max-width:94ch}
.sep{width:1px;height:20px;background:var(--line);margin:0 3px}

/* ---------- dashboard ---------- */
.dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:14px}
.dcard{--tint:120,140,170;background:var(--dcard);border:1px solid var(--line);
 border-radius:15px;overflow:hidden;box-shadow:var(--shadow);position:relative}
.dcard.up{--tint:53,222,160;border-color:rgba(53,222,160,.26)}
.dcard.down{--tint:255,89,70;border-color:rgba(255,89,70,.24)}
.dcard.purple{--tint:165,139,250;border-color:rgba(165,139,250,.24)}
.dcard.orange{--tint:245,165,36;border-color:rgba(245,165,36,.26)}

.dcard header{position:relative;display:flex;align-items:flex-start;gap:13px;
 padding:17px 18px 15px;overflow:hidden}
.dcard header::before{content:"";position:absolute;inset:0;z-index:0;
 background-image:
   linear-gradient(180deg,rgba(7,21,35,.34) 0%,rgba(7,21,35,.80) 62%,var(--dcard) 100%),
   linear-gradient(90deg,rgba(var(--tint),.42),rgba(var(--tint),.10) 70%,transparent),
   var(--art-hero);
 background-size:cover,cover,250% auto;background-position:center,center,14% 60%;opacity:.95}
.dcard header>*{position:relative;z-index:1}
.dcard .hicon{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;
 margin-top:1px}
.dcard .hicon svg{width:30px;height:30px}
.dcard.up .hicon{color:var(--good)}
.dcard.down .hicon{color:var(--coral)}
.dcard.purple .hicon{color:var(--violet)}
.dcard.orange .hicon{color:var(--orange)}
.dcard .htext{min-width:0;flex:1}
.dcard h3{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:17px;margin:0;
 color:#fff;letter-spacing:.005em}
.dcard .htext p{margin:2px 0 0;color:#8FA9C2;font-size:12px}
.dtag{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:10px;letter-spacing:.1em;
 text-transform:uppercase;flex:none;margin-top:3px;padding:4px 10px;border-radius:999px;
 border:1px solid transparent}
.dtag.good{color:#4BE9A9;background:rgba(2,92,56,.55);border-color:rgba(75,233,169,.45)}
.dtag.bad{color:#FF7A66;background:rgba(51,18,27,.72);border-color:rgba(255,122,102,.45)}

.dlist{list-style:none;margin:0;padding:0 18px 8px}
.drow{display:grid;grid-template-columns:26px 22px minmax(0,1.15fr) minmax(58px,1fr) auto auto;
 align-items:center;gap:11px;padding:10px 0;border-top:1px solid rgba(255,255,255,.055)}
.drow:first-child{border-top:0}
.drow::after{content:"";width:6px;height:6px;border-right:1.8px solid #2A3D57;
 border-bottom:1.8px solid #2A3D57;transform:rotate(-45deg);justify-self:end;margin-right:2px}
.rank{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:12px;
 border-radius:8px;height:26px;line-height:26px;text-align:center;
 background:#16263B;color:#8FA9C2}
.dcard.up .rank{background:var(--good);color:#04241A}
.dcard.down .rank{background:#FA634B;color:#2B0A05}
.dcard.purple .rank{background:#2E4160;color:#CFE0F0}
.dcard.orange .rank{background:#2C211C;color:var(--gold)}
.dic{text-align:center;font-size:16px;line-height:1}
.dname{font-weight:500;font-size:13.5px;min-width:0;overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap;color:#EFF4FA}
.dname em{display:block;font-style:normal;font-size:11.5px;color:var(--faint);
 font-family:"IBM Plex Mono",monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbarwrap{min-width:0}
.dbar{height:7px;background:#12233A;border-radius:4px;overflow:hidden}
.dbar i{display:block;height:100%;border-radius:4px}
.dval{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:14px;
 font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;min-width:48px}
.dcard.up .dval{color:var(--good)}
.dcard.down .dval{color:var(--coral)}
.dcard.purple .dval{color:var(--orange)}
.dcard.orange .dval{color:#EAF2FA}
.dempty{color:var(--faint);font-size:13px;padding:16px 0}
.dlist.buys .drow{grid-template-columns:26px minmax(0,2fr) minmax(46px,.75fr) auto auto auto;gap:9px}
.dlist.buys .dval{min-width:44px}
.dlist.buys .pill{justify-self:end}

/* ---------- tables ---------- */
.tw{overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface);
 box-shadow:var(--shadow);margin-top:12px;max-height:76vh}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13.5px}
th{font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.08em;
 text-transform:uppercase;color:var(--faint);text-align:left;padding:10px;white-space:nowrap;
 border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:5}
td{padding:5px 10px;border-bottom:1px solid var(--line2);vertical-align:middle}
tr.grp td{background:var(--sunk);font-family:"Chakra Petch",sans-serif;font-weight:600;
 font-size:11.5px;letter-spacing:.07em;color:var(--muted);padding:7px 10px}
/* only the Backpack's group rows carry a fold button, which brings its own padding */
#stock tr.grp td{padding:0}
#stock td.nm .stock-gen{display:inline-block;margin-left:8px;color:var(--faint);font-size:10px;font-weight:500;white-space:nowrap;vertical-align:middle}
/* The Backpack runs to ten groups, so each header is a fold control that also
   reports how many of its items you have actually filled in. */
.gtog{width:100%;display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:10px;
 align-items:center;background:none;border:0;cursor:pointer;text-align:left;
 padding:8px 10px;color:var(--muted);
 font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.07em}
.gtog:hover{color:var(--ink);background:rgba(255,255,255,.03)}
.gtog .chev{width:6px;height:6px;border-right:1.6px solid var(--faint);
 border-bottom:1.6px solid var(--faint);transform:rotate(45deg);margin-left:1px}
.gtog[aria-expanded="false"] .chev{transform:rotate(-45deg)}
.gtog .gname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmeta{display:flex;align-items:center;gap:8px}
.gbar{width:40px;height:4px;border-radius:3px;background:#12233A;overflow:hidden;flex:none}
.gbar i{display:block;height:100%;border-radius:3px;background:var(--ice)}
.gcount{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--faint);
 font-variant-numeric:tabular-nums}
tr.sec td{background:var(--ice);color:#04141C;font-family:"Chakra Petch",sans-serif;
 font-weight:700;font-size:11px;letter-spacing:.14em;padding:6px 10px}
.num{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
 white-space:nowrap}
th.num{text-align:right}
.ic{width:24px;text-align:center;opacity:.9;padding-right:0}
tr.hide{display:none!important}
input.cell{font:inherit;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
 font-size:13px;width:100%;min-width:96px;text-align:right;background:var(--edit);color:var(--ink);
 border:1px solid var(--edit-b);border-radius:5px;padding:3px 6px}
input.cell.t2{background:var(--edit2);border-color:var(--edit2-b)}
input.cell.txt{text-align:left;font-family:"IBM Plex Sans",sans-serif;min-width:150px}
input.cell:focus{outline:2px solid var(--ice);outline-offset:0}
input.cell::-webkit-outer-spin-button,input.cell::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input.cell[type=number]{-moz-appearance:textfield}
.pill{display:inline-block;font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:10px;
 letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:6px;white-space:nowrap}
.p-yes{color:var(--good);background:rgba(53,222,160,.13)}
.p-no{color:var(--coral);background:rgba(255,89,70,.14)}
.p-na{color:var(--faint);background:rgba(255,255,255,.05)}
.p-gold{color:var(--gold);background:rgba(245,165,36,.15)}
.p-item{color:var(--ice);background:rgba(53,200,245,.13)}
.p-pack{color:var(--violet);background:rgba(165,139,250,.14)}
.p-low{color:var(--muted);background:rgba(255,255,255,.05)}
.prog{display:flex;align-items:center;gap:8px}
.pbar{width:78px;height:7px;background:#12233A;border-radius:4px;overflow:hidden;flex:none}
.pbar i{display:block;height:100%;border-radius:4px}
.prog span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted);
 min-width:30px;text-align:right}
.vbar{display:inline-block;vertical-align:middle;width:70px;height:6px;background:#12233A;
 border-radius:3px;overflow:hidden;margin-right:7px}
.vbar i{display:block;height:100%;border-radius:3px}
.rc{color:var(--muted);font-size:12px;max-width:26ch}
.mini{color:var(--faint);font-size:11px}
.del{border:0;background:none;color:var(--faint);cursor:pointer;font-size:14px;line-height:1;
 padding:2px 5px;border-radius:4px}
.del:hover{color:var(--coral);background:rgba(255,89,70,.14)}
.mx th:first-child,.mx td:first-child{position:sticky;left:0;background:var(--surface);z-index:4;
 text-align:left;min-width:206px;box-shadow:1px 0 0 var(--line)}
.mx th:first-child{z-index:6}
.mx tr.need td{background:var(--sunk);font-weight:600}
.mx tr.need td:first-child{background:var(--sunk);z-index:4}
.mx td{padding:3px 6px}
.mx input.cell{min-width:56px;padding:2px 5px;font-size:12px}
.setgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px 16px;
 box-shadow:var(--shadow)}
.card.wide{grid-column:span 2}
.card h3{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;
 margin:0 0 10px}
.frow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0}
.frow span{color:var(--muted);font-size:13px}
.frow b{font-family:"IBM Plex Mono",monospace}
.frow input{width:130px}
input.wide,select.wide{font:inherit;font-size:13px;background:var(--edit);color:var(--ink);
 border:1px solid var(--edit-b);border-radius:5px;padding:4px 8px}
select.wide{width:170px}
#svsdate,#murrate{font-family:"IBM Plex Mono",monospace;font-weight:500}
th.so{cursor:pointer;user-select:none;white-space:nowrap}
th.so:hover{color:var(--ink)}
th.so[aria-sort="ascending"],th.so[aria-sort="descending"]{color:var(--ice)}
.arr{font-style:normal;font-size:9px;margin-left:5px;display:inline-block;width:7px;vertical-align:1px}
.empty{padding:50px 20px;text-align:center;color:var(--faint)}

/* ---------- auth ---------- */
#auth{max-width:430px;margin:40px auto 0}
.authtabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px}
.authtab{font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:13px;background:none;
 border:0;border-bottom:2px solid transparent;color:var(--muted);padding:9px 13px;cursor:pointer}
.authtab[aria-selected="true"]{color:var(--ice);border-bottom-color:var(--ice)}
#auth form{display:flex;flex-direction:column;gap:11px}
#auth label{font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.1em;
 text-transform:uppercase;color:var(--faint);display:block;margin-bottom:4px}
#auth input{width:100%;font:inherit;font-size:14px;background:var(--edit);color:var(--ink);
 border:1px solid var(--edit-b);border-radius:7px;padding:9px 11px}
#auth input:focus{outline:2px solid var(--ice);outline-offset:0}
#auth button[type=submit]{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:13px;
 letter-spacing:.05em;background:var(--ice);color:#04141C;border:0;border-radius:7px;padding:11px;
 cursor:pointer;margin-top:4px}
#auth button[type=submit]:hover{filter:brightness(1.08)}
#forgot{background:none;border:0;color:var(--ice);font-size:12.5px;cursor:pointer;padding:2px;
 align-self:flex-start}
.authmsg{font-size:12.5px;color:var(--coral);min-height:1.2em;margin:2px 0 0}
.authmsg.ok{color:var(--good)}

/* ---------- footer band ---------- */
.footband{position:relative;margin-top:30px;min-height:182px;display:flex;align-items:center;
 background-image:
   linear-gradient(90deg,rgba(3,18,29,.92) 0%,rgba(3,18,29,.55) 22%,rgba(3,18,29,.12) 42%,rgba(3,18,29,.12) 62%,rgba(3,18,29,.72) 86%,rgba(3,18,29,.95) 100%),
   linear-gradient(180deg,rgba(3,18,29,.88) 0%,rgba(3,18,29,.10) 26%,rgba(3,18,29,.40) 100%),
   var(--art-foot);
 background-size:cover,cover,cover;background-position:center,center,center;
 background-repeat:no-repeat}
.fin{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;
 padding:34px 18px;position:relative}
.footquote{margin:0;font-style:italic;font-size:clamp(15px,1.7vw,18px);line-height:1.5;
 color:#D9E6F2;padding-left:18px;position:relative;max-width:46ch}
.footquote::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;
 background:var(--ice);transform:skewX(-12deg)}
.footsig{font-family:"Caveat",cursive;font-weight:700;color:#4FD6FF;font-size:clamp(30px,3.4vw,40px);
 line-height:.94;text-align:right;flex:none;transform:rotate(-4deg)}
.footsig span{display:block}
footer{padding:16px 18px 34px;color:var(--faint);font-size:12px;display:flex;
 flex-direction:column;gap:4px}

/* ---------- messages ----------
   say() used to be the only channel and it lived in a header span that is hidden
   on a phone, so a failed save was silent. Anything that went wrong now also
   surfaces here and stays until it is dismissed. */
#toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));
 transform:translateX(-50%);z-index:90;max-width:min(560px,calc(100vw - 32px));
 display:flex;align-items:flex-start;gap:11px;
 background:#14283C;border:1px solid var(--edit-b);border-radius:11px;padding:12px 13px 12px 15px;
 box-shadow:0 12px 34px -10px rgba(0,0,0,.75);font-size:13.5px;line-height:1.45;color:var(--ink)}
#toast[hidden]{display:none}
#toast.bad{background:#2A1620;border-color:rgba(255,89,70,.5)}
#toast .tdot{width:7px;height:7px;border-radius:50%;background:var(--coral);flex:none;margin-top:6px}
#toast button{background:none;border:0;color:var(--faint);cursor:pointer;font-size:18px;line-height:1;
 padding:1px 4px;border-radius:5px;flex:none;margin-left:2px}
#toast button:hover{color:var(--ink)}

.banner{margin:20px 0 0;padding:12px 15px;border-radius:11px;font-size:13.5px;line-height:1.5;
 background:rgba(255,130,63,.10);border:1px solid rgba(255,130,63,.38);color:#FFD6BC}
.banner[hidden]{display:none}

.fatal{max-width:520px;margin:48px auto;background:var(--surface);
 border:1px solid rgba(255,89,70,.34);border-radius:14px;padding:26px 28px;box-shadow:var(--shadow)}
.fatal[hidden]{display:none}
.fatal h2{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:21px;margin:0 0 11px;color:#fff}
.fatal p{margin:0 0 8px;color:var(--muted);font-size:14px;line-height:1.55}
.fatal .why{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--faint);
 word-break:break-word;margin-bottom:19px;min-height:1.2em}
.fatal button{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:13px;letter-spacing:.05em;
 background:var(--ice);color:#04141C;border:0;border-radius:8px;padding:11px 20px;cursor:pointer}
.fatal button:hover{filter:brightness(1.08)}

/* ---------- responsive ---------- */
@media (max-width:1150px){#sync{display:none}}
@media (max-width:900px){
 .stats{grid-template-columns:repeat(3,1fr)}
 .stat.svs{grid-column:span 3}
}
@media (max-width:900px){
 .dgrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
 header.top{height:auto;position:static}
 header.top .tin{height:auto;flex-wrap:wrap;gap:12px;padding-top:12px;padding-bottom:0}
 nav.tabs{order:3;width:100%;flex-basis:100%;height:auto;border-top:1px solid var(--line2)}
 nav.tabs button{height:46px}
 #userbar{margin-left:auto}
 #userbar b{display:none}
 /* the header wraps here, so there is room for the save state again — it is
    only hidden between 821 and 1150px where the bar is one cramped row */
 #sync{display:block}
 /* fill the shorter band and crop horizontally rather than shrinking to a thin
    strip; the art spans edge to edge here so no right-edge blend is needed, but
    the scrim has to be heavier because the text sits over the lit fortress */
 .hin{min-height:236px;
  background-image:
    linear-gradient(90deg,var(--ground) 0%,rgba(3,18,29,.94) 40%,rgba(3,18,29,.74) 68%,rgba(3,18,29,.58) 100%),
    linear-gradient(0deg,var(--ground) 0%,rgba(3,18,29,.70) 10%,rgba(3,18,29,0) 34%),
    var(--art-hero);
  background-size:auto,auto,cover;
  background-position:center,center,72% top}
 .herotext{max-width:none}

 /* ---- the two working tables become lists of cards ----
    Nine columns cannot fit a phone without either clipping a value or pushing
    the answer off-screen, so each row stacks. Both Backpack fields stay real
    inputs: changing a target is half the point of the row. */
 #stock,#packs,#stock tbody,#packs tbody{display:block}
 #stock thead,#packs thead{display:none}
 .tw{border-radius:12px}

 #stock tbody tr.grp,#packs tbody tr.grp,#packs tbody tr.sec{display:block;padding:0}
 #stock tbody tr.grp>td,#packs tbody tr.grp>td,#packs tbody tr.sec>td{display:block;width:100%}

 #stock tbody tr:not(.grp),#packs tbody tr:not(.grp):not(.sec){
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px;
  padding:13px;border-bottom:1px solid var(--line2);align-items:start}
 #stock tbody tr:not(.grp)>td,#packs tbody tr:not(.grp):not(.sec)>td{
  display:block;padding:0;border:0;min-width:0}

 td[data-label]::before{content:attr(data-label);display:block;margin-bottom:5px;
  font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint)}

 /* 16px stops iOS zooming the page in the moment you tap a field */
 #stock input.cell,#packs input.cell{font-size:16px;padding:9px 11px;min-width:0;width:100%}

 #stock tbody tr:not(.grp){grid-template-areas:"nm pill" "have tgt" "prog prog"}
 #stock tbody tr:not(.grp)>td:nth-child(1){display:none}
 #stock tbody tr:not(.grp)>td:nth-child(2){grid-area:nm;font-size:14.5px;font-weight:500;
  color:#EFF4FA;align-self:center}
 #stock tbody tr:not(.grp)>td:nth-child(3){grid-area:have}
 #stock tbody tr:not(.grp)>td:nth-child(4){grid-area:tgt}
 #stock tbody tr:not(.grp)>td:nth-child(5){display:none}
 #stock tbody tr:not(.grp)>td:nth-child(6){grid-area:prog}
 #stock tbody tr:not(.grp)>td:nth-child(7){display:none}
 #stock tbody tr:not(.grp)>td:nth-child(8){display:none}
 #stock tbody tr:not(.grp)>td:nth-child(9){grid-area:pill;text-align:right;align-self:center}
 #stock .prog{gap:10px}
 #stock .pbar{flex:1;width:auto}
 #stock .rc{max-width:none;text-align:right;margin-top:3px;font-size:11px}

 #packs tbody tr:not(.grp):not(.sec){grid-template-areas:"nm vd" "price freq" "best best" "pv iv"}
 #packs tbody tr:not(.grp):not(.sec)>td:nth-child(1){display:none}
 #packs tbody tr:not(.grp):not(.sec)>td:nth-child(2){grid-area:nm;font-size:14.5px;font-weight:500;
  color:#EFF4FA;align-self:center}
 #packs tbody tr:not(.grp):not(.sec)>td:nth-child(3){grid-area:price}
 #packs tbody tr:not(.grp):not(.sec)>td:nth-child(4){grid-area:freq}
 #packs tbody tr:not(.grp):not(.sec)>td:nth-child(5){grid-area:best}
 #packs tbody tr:not(.grp):not(.sec)>td:nth-child(6){grid-area:pv}
 #packs tbody tr:not(.grp):not(.sec)>td:nth-child(7){grid-area:iv}
 #packs tbody tr:not(.grp):not(.sec)>td:nth-child(8){grid-area:vd;text-align:right;align-self:center}
 #packs .vbar{width:52px}
 #packs td.num[data-label]{text-align:left}
 #packs tbody tr:not(.grp):not(.sec)>td:nth-child(3){font-family:"IBM Plex Mono",monospace;
  font-size:15px}

 /* one full-width child was forcing a second 250px track, pushing the currency
    card and every baseline value off the right edge of the screen */
 .setgrid{grid-template-columns:minmax(0,1fr)}
 .card.wide{grid-column:auto}
}
@media (max-width:680px){
 .stats{grid-template-columns:repeat(2,1fr)}
 .stat.svs{grid-column:span 2}
 .fin{flex-direction:column;align-items:flex-start;gap:16px}
 .footsig{text-align:left;align-self:flex-end}
}
@media (max-width:540px){
 .drow{grid-template-columns:24px minmax(0,1fr) auto;gap:9px}
 /* the buys row keeps its value AND its verdict, so it needs the fourth track */
 .dlist.buys .drow{grid-template-columns:24px minmax(0,1fr) auto auto;gap:9px}
 .dic,.dbarwrap{display:none}
 .drow::after{display:none}
 input[type=search]{margin-left:0;width:100%}
}
@media (max-width:420px){
 .stats{grid-template-columns:1fr}
 .stat.svs{grid-column:span 1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* ---------- phone summary panel ----------
   These five tiles sit above every tab, so on a phone they have to cost a strip
   rather than a screenful: two per row instead of one, icon beside the label
   instead of above it, and no fixed height. Comes last in the file so it also
   overrides the older one-per-row rule below 420px. */
@media (max-width:680px){
 .statspanel{margin:14px 0;padding:9px}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .stat{min-height:0;padding:9px 11px 10px;
  grid-template-columns:22px minmax(0,1fr);
  grid-template-areas:"ic lbl" "val val" "sub sub" "bar bar";
  display:grid;align-items:center;column-gap:8px;row-gap:0}
 .stat .sicon{grid-area:ic;width:22px;height:22px;border-radius:7px;margin-bottom:0}
 .stat .sicon svg{width:13px;height:13px}
 .stat .sicon.coin{font-size:11px}
 /* two of these labels wrap at this width and three do not, so the label box always
    reserves two lines, otherwise the big numbers sit at different heights per tile */
 .stat .lbl{grid-area:lbl;font-size:9.5px;letter-spacing:.08em;line-height:1.25;min-height:2.5em}
 .stat b{grid-area:val;font-size:19px;line-height:1.15;margin-top:6px}
 .stat small{grid-area:sub;font-size:10.5px;line-height:1.3;margin-top:2px}
 .barrow{grid-area:bar;margin-top:7px;padding-top:0;gap:7px}
 .bar{height:4px}
 .barpct{font-size:10px}
 .stat.svs{grid-column:span 2;padding:10px 12px;text-align:left;justify-content:stretch;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"lbl date" "val date"}
 .stat.svs .lbl{grid-area:lbl;font-size:9.5px}
 .stat.svs b{grid-area:val;font-size:24px;margin-top:1px}
 .stat.svs .date{grid-area:date;justify-content:flex-end;margin-top:0;font-size:11px}
}

#dispname,#newpw{font:inherit;font-size:13px;background:var(--edit);color:var(--ink);
 border:1px solid var(--edit-b);border-radius:5px;padding:4px 8px;width:min(210px,58%)}
#dispname:focus,#newpw:focus{outline:2px solid var(--ice);outline-offset:0}

/* ---------- members list (admin only) ---------- */
#members td{padding:8px 10px}
#members .nm{font-weight:500;color:#EFF4FA}
#members .empty{text-align:center}
#members td.r4e{width:1%;white-space:nowrap}
@media (max-width:820px){
 #p-admin .toolbar{gap:6px 12px}
 #p-admin .hint{margin:6px 0;font-size:11px;line-height:1.4}
 #p-admin .tw{margin-top:8px}
 #p-admin input[type=search]{font-size:16px}
 #members,#members tbody{display:block}
 #members thead{display:none}
 #members tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"nm st" "up seen";
  gap:3px 10px;padding:9px 10px;border-bottom:1px solid var(--line2);align-items:center}
 #members tbody tr>td{display:block;padding:0;border:0;min-width:0;line-height:1.4}
 #members tbody tr>td.nm{grid-area:nm;font-size:14px;overflow-wrap:anywhere}
 #members tbody tr>td.up{grid-area:up;text-align:left}
 #members tbody tr>td.seen{grid-area:seen;text-align:right;justify-content:flex-end}
 #members tbody tr>td.num{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 5px;font-size:11px;white-space:normal}
 #members td.num::before{display:inline;margin:0;font-size:9px;letter-spacing:.04em;white-space:nowrap}
 #members tbody tr>td.st{grid-area:st;text-align:right}
 #members tbody tr>td.r4e{grid-column:1/-1;width:auto}
 #members tbody tr>td.empty{grid-area:auto;grid-column:1/-1;padding:16px 0;text-align:center}
}

/* ---------- phone & tablet: condense the two working tables ----------
   The card layout above was readable but airy: every value carried a label on its
   own line, so a single backpack item cost 157px and a pack 245px. Here the label
   moves beside its value, the paddings come in, and the fields keep a 16px font so
   iOS still does not zoom when you tap one. */
@media (max-width:820px){
 #stock tbody tr:not(.grp),
 #packs tbody tr:not(.grp):not(.sec){gap:6px 10px;padding:10px 12px}

 #stock tbody tr:not(.grp)>td[data-label],
 #packs tbody tr:not(.grp):not(.sec)>td[data-label]{
  display:flex;align-items:center;gap:7px;min-width:0}
 #stock td[data-label]::before,#packs td[data-label]::before{
  margin-bottom:0;flex:none;font-size:9px;letter-spacing:.09em;line-height:1}
 #stock td[data-label] input.cell,#packs td[data-label] input.cell{flex:1;min-width:0}
 #stock input.cell,#packs input.cell{padding:5px 9px;border-radius:6px}

 /* verdict and shortfall share the right edge and should not set the row height */
 .pill{font-size:9px;padding:3px 7px;border-radius:5px}
 #stock .rc{font-size:10px;margin-top:2px;line-height:1.3}
 #stock tbody tr:not(.grp)>td:nth-child(2){font-size:14px}
 #stock .prog{gap:8px}
 #stock .pbar{height:5px}
 #stock .prog span{font-size:10.5px;min-width:26px}

 /* the cadence keeps its own line - inline it wrapped the name on a narrow phone -
    but as a tight 10px line rather than a full-sized one */
 #packs tbody tr:not(.grp):not(.sec)>td:nth-child(2){font-size:14px;display:block;line-height:1.25}
 #packs td.nm .mini{font-size:10px;line-height:1.25;margin-top:1px}
 /* the buy field only ever holds one or two digits, so it does not need half the card */
 #packs tbody tr:not(.grp):not(.sec)>td:nth-child(4){justify-content:flex-end}
 #packs tbody tr:not(.grp):not(.sec)>td:nth-child(4) input.cell{flex:0 1 92px}
 #packs .vbar{width:44px;height:5px;margin-right:6px}
 #packs .mono{font-size:11px}
 #packs tbody tr:not(.grp):not(.sec)>td:nth-child(3){font-size:13px}
}

/* In-game item artwork; existing responsive icon visibility is preserved. */
.item-art{display:inline-block;width:24px;height:24px;object-fit:contain;vertical-align:middle}
#stock td.ic{width:34px;min-width:34px;opacity:1}
.dic .item-art{width:22px;height:22px}

/* ---------- headroom: the phone header gets out of the way ----------
   Below 820px the bar wraps to two rows and the hero takes another 236px, so a
   header that just sits there costs about a third of a phone screen, and the
   static one we had put the tabs out of reach the moment you scrolled. This
   rides along instead: it lifts away while you are reading down the page and
   comes back on any upward flick, so the tabs are never more than one gesture
   away and never in the way. Above 820px nothing changes. */
@media (max-width:820px){
 header.top{position:sticky;top:0;z-index:60;
  transition:transform .26s cubic-bezier(.2,.72,.28,1),box-shadow .18s linear;
  will-change:transform}
 header.top.hr-off{transform:translateY(-100%)}
 header.top.hr-stuck{box-shadow:0 14px 26px -22px #000}
}
@media (prefers-reduced-motion:reduce){header.top{transition:none!important}}

/* Collapsible Things to buy sections. */
#packs tr.sec>td{padding:0}
#packs tr.sec .gtog{color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;grid-template-columns:9px minmax(0,1fr);text-align:left}
#packs tr.sec .chev{border-color:currentColor}
#packs tr.sec .gtog:focus-visible{outline:2px solid currentColor;outline-offset:-3px}

#packs tr.grp>td{padding:0}
#packs tr.grp .gtog{grid-template-columns:9px minmax(0,1fr);text-align:left}

/* ---------- what's new ----------
   A modal that opens once per new update and closes with one tap. It sits in the
   top layer, so it clears the sticky header without any z-index games. */
#news{padding:0;border:1px solid rgba(53,200,245,.22);border-radius:14px;background:var(--surface);
 color:var(--ink);width:min(520px,calc(100vw - 32px));max-height:min(78vh,640px);overflow:hidden;
 box-shadow:var(--shadow)}
#news::backdrop{background:rgba(2,10,17,.72)}
#news .nbox{display:flex;flex-direction:column;max-height:inherit}
#news .nhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
 padding:16px 18px 10px;border-bottom:1px solid var(--line2)}
#news h2{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:19px;margin:0;color:#fff;letter-spacing:.02em}
#news .nx{background:none;border:0;color:var(--faint);font-size:22px;line-height:1;cursor:pointer;padding:4px 6px}
#news .nx:hover{color:var(--ink)}
#news-list{overflow-y:auto;padding:2px 18px;flex:1 1 auto}
.nitem{padding:12px 0;border-bottom:1px solid var(--line2)}
.nitem:last-child{border-bottom:0}
.nitem time{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;
 text-transform:uppercase;color:var(--ice)}
.nitem h3{font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:15px;margin:3px 0 6px;
 color:#fff;line-height:1.3;text-wrap:balance}
.nitem ul{margin:0;padding-left:18px;color:var(--muted);font-size:13.5px;line-height:1.5}
.nitem li+li{margin-top:3px}
#news .nfoot{display:flex;align-items:center;gap:12px;padding:12px 18px 16px;border-top:1px solid var(--line2)}
.nlink{background:none;border:0;padding:0;color:var(--ice);font:inherit;font-size:12.5px;cursor:pointer;
 text-decoration:underline;text-underline-offset:3px}
.nlink[hidden]{display:none}
#news .nok{margin-left:auto;font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:13px;
 letter-spacing:.05em;background:var(--ice);color:#04141C;border:0;border-radius:8px;padding:10px 18px;cursor:pointer}
#news .nok:hover{filter:brightness(1.08)}
#news button:focus-visible,footer .nlink:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
footer .nlink{align-self:flex-start;font-size:12px;margin-bottom:4px}

/* ---------- R4 roles ----------
   Same density as the other tables: one line per task where it fits, tick marks
   (orange = Main, grey = Assist), and edit controls only while editing. */
.r4dot,.r4key{display:inline-block;vertical-align:middle;font-size:14px;font-weight:700;line-height:1}
.r4dot.main::before,.r4dot.assist::before,.r4key.main::before,.r4key.assist::before{content:"\2713"}
.r4dot.main,.r4key.main{color:var(--orange)}
.r4dot.assist,.r4key.assist{color:var(--muted);font-weight:400}
#r4 th.r4m{text-align:center;padding:10px 2px;min-width:34px;font-size:9.5px;letter-spacing:.03em}
#r4 td.r4c{text-align:center;padding:5px 2px}
#r4 td.r4task{white-space:nowrap;padding-left:28px;color:#BFD0E2}
#r4 tr.r4coverage-none>td{background:rgba(255,89,70,.14)}
#r4 tr.r4coverage-single>td{background:rgba(255,122,61,.12)}
#r4 tr.r4coverage-none>td.r4task{box-shadow:inset 4px 0 var(--coral);color:#FFD0CA}
#r4 tr.r4coverage-single>td.r4task{box-shadow:inset 4px 0 var(--orange);color:#FFD4B5}
#r4 .r4coverage-label{display:inline-block;margin-left:9px;padding:1px 6px;border-radius:4px;font:700 10px "Chakra Petch",sans-serif;vertical-align:1px}
#r4 tr.r4coverage-none .r4coverage-label{background:var(--coral);color:#04141C}
#r4 tr.r4coverage-single .r4coverage-label{background:var(--orange);color:#04141C}
#r4 .r4meta{display:none}
/* Shrink the fixed-content columns to their content so the spare width goes to
   the task names and remarks, which are the ones that wrap. */
#r4 td.r4c,#r4 td.r4freq,#r4 td.r4time{width:1%}
#r4 td.r4freq{color:var(--muted);font-size:12px;white-space:nowrap}
#r4 td.r4rem{color:var(--muted);font-size:12px;min-width:140px;line-height:1.3}
#r4 td.r4time{white-space:nowrap;font-size:12.5px;line-height:1.15}
#r4 td.r4time small{display:block;color:var(--faint);font-size:10px}
#r4 .r4who{display:none}
#r4 tr.r4sec td{background:var(--sunk);font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:10.5px;
 letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;color:var(--ink)}
#r4 tr.r4sec .sw{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:8px;vertical-align:1px}
#r4 tr.r4sec[data-tone="coral"] .sw{background:var(--coral)}
#r4 tr.r4sec[data-tone="orange"] .sw{background:var(--orange)}
#r4 tr.r4sec[data-tone="gold"] .sw{background:var(--gold)}
#r4 tr.r4sec[data-tone="good"] .sw{background:var(--good)}
#r4 .r4n,.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#r4 button.r4dot{display:inline-flex;align-items:center;justify-content:center;gap:4px;border:1.5px solid var(--line);
 background:transparent;cursor:pointer;width:18px;height:18px;padding:0;border-radius:4px;font-size:12px;color:var(--muted)}
#r4 button.r4dot.main{background:var(--orange);border-color:var(--orange);color:#04141C;font-weight:700}
#r4 button.r4dot.assist{border-color:var(--muted)}
#r4 button.r4dot:hover{border-color:var(--ice)}
#r4 button:focus-visible,#p-r4 input:focus-visible,.r4btn:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.r4in{width:100%;min-width:70px;font:inherit;font-size:12.5px;color:var(--ink);background:var(--edit);
 border:1px solid var(--edit-b);border-radius:5px;padding:3px 7px}
#r4 td.r4time .r4in{width:100px}
.r4btn{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:11px;letter-spacing:.06em;
 background:var(--ice);color:#04141C;border:0;border-radius:7px;padding:6px 11px;cursor:pointer}
.r4btn.ghost{background:transparent;color:var(--coral);border:1px solid rgba(255,89,70,.4)}
.r4btn.ghost2{background:transparent;color:var(--ice);border:1px solid rgba(53,200,245,.4)}
.r4btn[hidden]{display:none}
.r4addt{margin-left:12px;padding:3px 9px;font-size:10px;vertical-align:1px}
.r4del{background:none;border:0;color:var(--faint);font-size:17px;line-height:1;cursor:pointer;padding:0 5px}
.r4del:hover{color:var(--coral)}
#r4 td.r4x{white-space:nowrap}
.r4mv{background:none;border:0;color:var(--faint);font-size:12px;line-height:1;cursor:pointer;padding:5px 6px}
.r4mv:hover:not(:disabled){color:var(--ice)}
.r4mv:disabled{opacity:.25;cursor:default}
.r4admin{margin-top:14px}
.r4load{margin-top:14px}
.r4load h3{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:11px;letter-spacing:.12em;
 text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.r4lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.r4lcard{display:flex;flex-direction:column;gap:4px;text-align:left;font:inherit;color:var(--ink);cursor:pointer;
 background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.r4lcard:hover{border-color:var(--ice)}
.r4lcard[aria-pressed="true"]{border-color:var(--ice);box-shadow:inset 0 0 0 1px var(--ice)}
.r4lcard:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.r4lname{font-weight:600;font-size:13.5px;color:#EFF4FA;overflow-wrap:anywhere}
.r4lrow{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.r4lrow b{margin-left:auto;color:var(--ink);font-size:14px}
@media (max-width:820px){ .r4lgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.r4mrow,.r4add{display:flex;gap:8px;align-items:center;margin-bottom:8px;max-width:420px}
.r4mrow input,.r4add input{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--ink);background:var(--edit);
 border:1px solid var(--edit-b);border-radius:6px;padding:6px 9px}
@media (max-width:820px){
 /* Too many columns for a phone, so each task is a three-line card: name and time,
    who holds it, then frequency and remarks. Editing keeps the labelled chips. */
 #r4,#r4 tbody{display:block}
 #r4 thead{display:none}
 #r4 tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:start;
  padding:7px 12px 7px 28px;border-bottom:1px solid var(--line2)}
 #r4 tbody tr>td{display:block;border:0;padding:0;min-width:0;max-width:none}
 #r4 tbody tr.r4coverage-none{background:rgba(255,89,70,.14);border-left:4px solid var(--coral);padding-left:24px}
 #r4 tbody tr.r4coverage-single{background:rgba(255,122,61,.12);border-left:4px solid var(--orange);padding-left:24px}
 #r4 tbody tr.r4coverage-none>td,#r4 tbody tr.r4coverage-single>td{background:transparent}
 #r4 tbody tr.r4coverage-none>td.r4task,#r4 tbody tr.r4coverage-single>td.r4task{box-shadow:none}
 #r4 tbody tr.r4sec{display:block;padding:0}
 #r4 tbody tr.r4sec>td{padding:6px 12px}
 #r4 td.r4task{grid-column:1;white-space:normal;font-size:13.5px;line-height:1.3;color:#BFD0E2}
 #r4 td.r4time{grid-column:2;grid-row:1;text-align:right;font-size:11.5px;padding-top:1px}
 #r4 td.r4time small{font-size:10px}
 #r4 td.r4time.nt,#r4 td.r4freq,#r4 td.r4rem{display:none}
 #r4 .r4meta{display:block;font-size:11.5px;line-height:1.35;color:var(--faint);margin-top:1px}
 #r4 td.r4c,#r4 tr.r4tot{display:none!important}
 #r4 .r4who{display:flex;flex-wrap:wrap;gap:0 10px;margin-top:1px;font-size:12px;color:var(--muted)}
 #r4 .r4who b{font-family:"Chakra Petch",sans-serif;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-right:3px}
 #r4 .r4who .r4none{color:var(--faint);font-style:italic}
 #r4 td.r4x{position:absolute;right:6px;top:6px}
 #r4.adm tbody tr{display:flex;flex-wrap:wrap;position:relative;padding:9px 12px}
 #r4.adm td.r4task{padding-left:0}
 #r4.adm td.r4freq,#r4.adm td.r4rem{display:block}
 #r4.adm td.r4task{flex:0 0 100%;padding-right:26px}
 #r4.full td.r4task{padding-right:84px}
 #r4.adm td.r4c{display:inline-block!important;order:1;margin:4px 4px 0 0;flex:none;width:auto}
 #r4.adm button.r4dot{width:auto;height:auto;border-radius:5px;padding:3px 7px}
 #r4.adm .r4n{position:static;width:auto;height:auto;clip:auto;font-size:11px;color:var(--ink)}
 #r4.adm button.r4dot.main .r4n{color:#04141C}
 #r4.adm td.r4freq,#r4.adm td.r4time,#r4.adm td.r4rem{order:2;flex:0 0 100%;margin:5px 0 0;text-align:left}
 #r4.adm td.r4time .r4in{width:100%}
 #r4.adm .r4in{font-size:16px}
}

/* ---------- planned exchange row (Backpack) ---------- */
#stock tr.xch td{padding:4px 10px 8px 44px;border-top:0}
#stock .xrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#stock .xlab{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:10px;letter-spacing:.1em;
 text-transform:uppercase;color:var(--faint)}
#stock .xic{display:inline-flex;width:22px;justify-content:center}
#stock .xic .item-art{width:22px;height:22px}
#stock input.xin{width:84px;font:inherit;font-size:13px;text-align:right;background:var(--edit);color:var(--ink);
 border:1px solid var(--edit-b);border-radius:6px;padding:4px 8px}
#stock input.xin:focus{outline:2px solid var(--ice);outline-offset:0}
#stock .xarr{color:var(--faint)}
#stock .xgot{color:var(--ice);font-size:14px;min-width:34px}
#stock .xmeta{color:var(--muted);font-size:11px;margin-left:auto}
#stock .xreset{font:inherit;font-size:11px;background:transparent;color:var(--muted);border:1px solid var(--line);
 border-radius:5px;padding:3px 9px;cursor:pointer}
#stock .xreset:disabled{opacity:.4;cursor:default}
#stock .xnote{font-size:10.5px;color:var(--faint);margin-top:3px}
#stock .xnote.warn{color:var(--coral)}
@media (max-width:820px){
 #stock tbody tr.xch{display:block!important;padding:0 12px 10px!important;border-top:0}
 #stock tbody tr.xch>td{display:block!important;padding:0!important;grid-area:auto}
 #stock tbody tr.xch.hide{display:none!important}
 #stock input.xin{font-size:16px;width:90px}
 #stock .xmeta{margin-left:0;flex:1 1 auto}
}

/* ---------- Backpack export ----------
   A full-screen sheet (top layer, like What's new). The image itself is a canvas,
   so what you see is exactly what is saved. */
.chip.xport{display:inline-flex;align-items:center;gap:6px;border-color:var(--ice);color:var(--ink)}
.chip.xport:hover{background:var(--ice-dim)}
#export{padding:0;border:0;background:var(--ground);color:var(--ink);width:min(480px,100vw);height:min(100dvh,980px);max-width:100vw;max-height:100dvh}
#export[open]{display:flex;flex-direction:column}
#export::backdrop{background:rgba(2,8,14,.8)}
#export .xp-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 8px}
#export .xp-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
#export .xp-seg button{font:600 11px "Chakra Petch",sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:transparent;border:0;padding:8px 13px;cursor:pointer}
#export .xp-seg button[aria-pressed="true"]{background:var(--ice);color:#04141C}
#export .xp-x{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:15px;cursor:pointer}
#export .xp-view{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 8px}
#export canvas{display:block;max-width:100%;max-height:100%;border-radius:12px}
#export .xp-msg{margin:0;padding:6px 14px 0;min-height:22px;font-size:12px;color:var(--muted);text-align:center}
#export .xp-act{display:flex;gap:8px;padding:6px 12px calc(12px + env(safe-area-inset-bottom,0px))}
#export .xp-act button{flex:1;font:700 12px "Chakra Petch",sans-serif;letter-spacing:.05em;text-transform:uppercase;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
#export .xp-act button[hidden]{display:none}
#export .xp-act .xp-main{background:var(--ice);border-color:var(--ice);color:#04141C}
#export button:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
@media (max-width:820px){#export{width:100vw;height:100dvh}}

/* ---------- language selector ---------- */
.langwrap{position:absolute;top:56px;right:16px;z-index:3}
select.langsel{font:600 12px "Chakra Petch",sans-serif;letter-spacing:.04em;color:var(--ink);background:rgba(4,18,30,.82);border:1px solid var(--line);border-radius:999px;padding:6px 26px 6px 12px;cursor:pointer;appearance:none;-webkit-appearance:none;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AB6D0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 8px center;background-size:12px}
select.langsel:hover{border-color:var(--faint)}
select.langsel:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
select.langsel option{background:#081B29;color:var(--ink)}
footer .langfoot{align-self:flex-start;margin-bottom:6px}
html[lang="es"] #p-charms .cost:before,html[lang="es"] #p-charms .phone .cost:before{content:"Coste de mejora"}
html[lang="tr"] #p-charms .cost:before,html[lang="tr"] #p-charms .phone .cost:before{content:"Yükseltme maliyeti"}
html[lang="nb"] #p-charms .cost:before,html[lang="nb"] #p-charms .phone .cost:before{content:"Oppgraderingskostnad"}
/* Fortress rewards distribution */
#p-fortress{max-width:1200px;margin:0 auto;padding:28px 0 60px}
.fr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}
.fr-head h2{margin:0 0 4px;font-size:27px}.fr-head p{margin:0;color:var(--muted)}
.fr-local{border:1px solid var(--line);border-radius:999px;padding:5px 11px;color:var(--muted);font-size:12px;white-space:nowrap}
.fr-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px;align-items:start}
.fr-main{display:grid;gap:18px;min-width:0}.fr-card{background:var(--panel);border:1px solid var(--edit-b);border-radius:12px;padding:18px;min-width:0}
.fr-card h3{margin:0;font-size:17px}.fr-card>p{margin:6px 0 15px;color:var(--muted)}
.fr-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.fr-card-head span{color:var(--ice);font-size:12px}
.fr-sites{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.fr-site{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer}
.fr-site.selected{border-color:var(--ice);background:var(--ice-dim)}.fr-site input{accent-color:var(--ice)}
.fr-site strong,.fr-site small{display:block}.fr-site strong{font-size:12px}.fr-site small{color:var(--muted);font-size:10px}
.fr-add{display:flex;align-items:flex-end;gap:8px;margin-bottom:12px}.fr-add textarea{flex:1;min-width:0;resize:vertical}
.fr-add-reward input:first-child{flex:2}.fr-add-reward input[type=number]{width:94px}
#p-fortress input:not([type=checkbox]),#p-fortress textarea,#p-fortress select{background:var(--edit);border:1px solid var(--edit-b);border-radius:5px;color:var(--ink);padding:8px;font:inherit}
#p-fortress input:focus-visible,#p-fortress textarea:focus-visible,#p-fortress select:focus-visible,#p-fortress button:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
#p-fortress button{font:inherit;cursor:pointer}#p-fortress button:disabled{cursor:not-allowed;opacity:.5}
.fr-primary,.fr-secondary{border:1px solid var(--ice);border-radius:5px;padding:9px 12px;white-space:nowrap}
.fr-primary{background:var(--ice);color:#021421;font-weight:700}.fr-secondary{background:transparent;color:var(--ice)}
.fr-scroll{overflow-x:auto}.fr-card table{width:100%;border-collapse:collapse;text-align:left}.fr-card th,.fr-card td{border-bottom:1px solid var(--line);padding:7px 6px}
.fr-card thead th{color:var(--muted);font-size:11px;font-weight:500;white-space:nowrap}.fr-card tbody th{font-weight:500;min-width:100px}
.fr-card table input[type=number]{width:76px}.fr-card table input[type=text]{width:100%;min-width:150px}
.fr-member-name{display:flex;align-items:center;gap:6px}.fr-card table .fr-member-name input[type=text]{flex:1;min-width:0}.fr-member-name .fr-remove{flex:none}
.fr-members-scroll{max-height:490px;overflow:auto}.fr-members-scroll thead{position:sticky;top:0;background:var(--panel);z-index:1}
#fr-member-search{width:100%;margin:0 0 9px}
.fr-card table select{min-width:82px}.fr-card table input[type=checkbox]{accent-color:var(--coral)}
.fr-card tr.fr-ignored{opacity:.55}.fr-alloc-grid em{font-style:normal;font-size:10px;color:var(--gold);margin-left:3px}
.fr-remove{border:0;background:none;color:var(--muted);font-size:20px!important;padding:0 5px}.fr-remove:hover{color:var(--coral)}
.fr-note{font-size:12px;color:var(--faint)!important;margin:11px 0 0!important}.fr-empty{padding:18px;border:1px dashed var(--line);border-radius:6px;text-align:center}
.fr-controls{display:flex;align-items:end;gap:9px;flex-wrap:wrap}.fr-controls label{display:grid;gap:3px;color:var(--muted);font-size:12px}.fr-controls select{min-width:170px}
.fr-filter-count{color:var(--muted);font-size:12px;padding-bottom:10px}
.fr-alloc-card{border-top:1px solid var(--line);padding:16px 0 6px}.fr-alloc-card h4{display:flex;justify-content:space-between;gap:15px;margin:0 0 10px;font-size:14px}.fr-alloc-card h4 span{color:var(--ice)}
.fr-alloc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.fr-alloc-grid label{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 7px;background:var(--surface);border-radius:5px;font-size:12px}
.fr-alloc-grid label[hidden]{display:none}
.fr-alloc-grid label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fr-alloc-grid input{width:68px;flex:none;text-align:right}
.fr-bad{color:var(--coral)!important}.fr-bad input{border-color:var(--coral)!important}
.fr-summary{position:sticky;top:110px}.fr-summary h3{margin-bottom:16px}.fr-numbers{display:grid;grid-template-columns:1fr 1fr;gap:10px}.fr-numbers div{padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:6px}.fr-numbers strong,.fr-numbers span{display:block}.fr-numbers strong{font-size:24px;line-height:1.1;color:var(--ice)}.fr-numbers span{font-size:11px;color:var(--muted)}
.fr-ok{color:var(--good)!important;font-size:12px}.fr-issues{border:1px solid var(--coral);border-radius:6px;padding:9px;margin:14px 0;color:var(--coral);font-size:12px}.fr-issues ul{padding-left:18px;margin:6px 0 0}
.fr-summary button{display:block;width:100%;margin-top:9px}.fr-summary #fr-message{min-height:20px;color:var(--good);font-size:12px}
@media(max-width:900px){.fr-layout{grid-template-columns:1fr}.fr-summary{position:static}.fr-sites{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){#p-fortress{padding-top:18px}.fr-head{display:block}.fr-local{display:inline-block;margin-top:10px}.fr-sites{grid-template-columns:repeat(2,minmax(0,1fr))}.fr-alloc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fr-add{flex-wrap:wrap}.fr-add textarea,.fr-add-reward input:first-child{flex-basis:100%}}
@media(max-width:390px){.fr-sites,.fr-alloc-grid{grid-template-columns:1fr}}