/* PakkoGame — dark premium theme. No external fonts/CDNs. */
:root{--bg:#07070d;--bg2:#0d0d18;--card:rgba(20,20,36,.62);--line:rgba(255,255,255,.09);--tx:#ecebf5;--mut:#9a98b3;--ac:#8b5cf6;--ac2:#22d3ee;--gold:#f5b942;--ok:#22c55e;--bad:#f43f5e;--warn:#f59e0b;
 --grad:linear-gradient(135deg,#8b5cf6 0%,#6366f1 45%,#22d3ee 100%);--r:16px;--sh:0 20px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset}
*{box-sizing:border-box}html,body{min-height:100%}
body{margin:0;font:14.5px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--tx);overflow-x:hidden}
/* animated background: aurora blobs + grid + drifting sparks (CSS only) */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(1200px 700px at 10% -10%,rgba(139,92,246,.22),transparent 60%),radial-gradient(900px 600px at 110% 10%,rgba(34,211,238,.16),transparent 60%),radial-gradient(800px 600px at 50% 120%,rgba(245,185,66,.10),transparent 60%),var(--bg)}
.bg::before{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg at 50% 50%,rgba(139,92,246,.10),rgba(34,211,238,.08),rgba(245,185,66,.06),rgba(139,92,246,.10));filter:blur(80px);animation:spin 40s linear infinite}
.bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%)}
.sp{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:var(--ac2);box-shadow:0 0 10px 2px rgba(34,211,238,.7);opacity:0;animation:rise linear infinite}
.sp:nth-child(1){left:8%;animation-duration:14s}.sp:nth-child(2){left:22%;animation-duration:19s;animation-delay:3s;background:var(--ac);box-shadow:0 0 10px 2px rgba(139,92,246,.8)}
.sp:nth-child(3){left:37%;animation-duration:16s;animation-delay:6s}.sp:nth-child(4){left:55%;animation-duration:21s;animation-delay:1s;background:var(--gold);box-shadow:0 0 10px 2px rgba(245,185,66,.7)}
.sp:nth-child(5){left:68%;animation-duration:17s;animation-delay:8s}.sp:nth-child(6){left:81%;animation-duration:23s;animation-delay:4s;background:var(--ac);box-shadow:0 0 10px 2px rgba(139,92,246,.8)}
.sp:nth-child(7){left:93%;animation-duration:15s;animation-delay:10s}.sp:nth-child(8){left:46%;animation-duration:25s;animation-delay:12s;background:var(--gold);box-shadow:0 0 10px 2px rgba(245,185,66,.7)}
@keyframes rise{0%{transform:translateY(0) scale(.6);opacity:0}10%{opacity:.9}100%{transform:translateY(-105vh) scale(1.2);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bg::before,.sp{animation:none}.sp{display:none}}
/* logo */
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:.2px;color:var(--tx);text-decoration:none}
.brand svg{width:34px;height:34px;filter:drop-shadow(0 0 12px rgba(139,92,246,.55))}
.brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* layout */
.wrap{max-width:1120px;margin:0 auto;padding:22px 20px 60px;animation:fadeUp .45s ease both}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.top .row{flex:0 0 auto;align-items:center}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:18px;box-shadow:var(--sh);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);animation:fadeUp .45s ease both}
.card h3{margin:0 0 14px;font-size:16px;letter-spacing:.3px;display:flex;align-items:center;gap:8px}
.card h3::before{content:"";width:4px;height:16px;border-radius:4px;background:var(--grad);box-shadow:0 0 10px rgba(139,92,246,.6)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}@media(max-width:860px){.grid2{grid-template-columns:1fr}}
/* auth split */
.auth-split{min-height:calc(100vh - 44px);display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;max-width:1120px;margin:0 auto;padding:22px 20px}
.hero h1{font-size:clamp(30px,4.2vw,52px);line-height:1.08;margin:26px 0 14px;letter-spacing:-.8px}
.hero h1 span{background:linear-gradient(120deg,#c4b5fd,#22d3ee 50%,#f5b942);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{color:var(--mut);font-size:16.5px;max-width:520px;margin:0 0 26px}
.feat{list-style:none;padding:0;margin:0;display:grid;gap:14px;max-width:520px}
.feat li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}
.feat .ic{flex:0 0 36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(139,92,246,.25),rgba(34,211,238,.18));border:1px solid rgba(139,92,246,.35);font-size:17px}
.feat b{display:block;margin-bottom:2px}.feat span{color:var(--mut);font-size:13.5px}
.auth{width:100%;max-width:420px;justify-self:end;padding:30px;position:relative}
.auth::after{content:"";position:absolute;inset:-1px;border-radius:var(--r);padding:1px;background:linear-gradient(135deg,rgba(139,92,246,.7),transparent 40%,transparent 60%,rgba(34,211,238,.6));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.auth h2{margin:0 0 4px;font-size:24px;letter-spacing:-.3px}.auth .sub{color:var(--mut);margin:0 0 20px}
.auth .foot{color:var(--mut);font-size:13.5px;margin:18px 0 0;text-align:center;line-height:1.9}
.authtop{display:flex;justify-content:space-between;align-items:center}
@media(max-width:900px){.auth-split{grid-template-columns:1fr;gap:26px;padding-top:16px}.auth{justify-self:center}.hero h1{margin-top:18px}.feat{display:none}.hero p.lead{margin-bottom:6px}}
/* forms */
label{display:block;font-size:12.5px;color:var(--mut);font-weight:600;letter-spacing:.3px;margin-bottom:12px}
input,select{width:100%;padding:12px 14px;margin-top:6px;background:rgba(8,8,16,.7);border:1px solid var(--line);border-radius:11px;color:var(--tx);font:inherit;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus{outline:none;border-color:rgba(139,92,246,.75);box-shadow:0 0 0 4px rgba(139,92,246,.18)}
input::placeholder{color:#6b6987}
select{cursor:pointer}select.lang{width:auto;margin:0;padding:8px 12px;border-radius:10px;font-size:13px}
.pw{position:relative}.pw input{padding-right:46px}
.eye{position:absolute;right:6px;top:calc(50% + 3px);transform:translateY(-50%);background:transparent;border:0;color:var(--mut);padding:6px 8px;border-radius:8px;cursor:pointer;box-shadow:none;font-size:16px;line-height:1}
.eye:hover{color:var(--tx);background:rgba(255,255,255,.06);transform:translateY(-50%)}
.meter{height:5px;border-radius:9px;background:rgba(255,255,255,.07);overflow:hidden;margin:-4px 0 6px}
.meter i{display:block;height:100%;width:0;border-radius:9px;transition:width .3s,background .3s}
.meter[data-s="1"] i{width:25%;background:var(--bad)}.meter[data-s="2"] i{width:50%;background:var(--warn)}.meter[data-s="3"] i{width:75%;background:#a3e635}.meter[data-s="4"] i{width:100%;background:var(--ok);box-shadow:0 0 10px rgba(34,197,94,.7)}
.mlabel{font-size:12px;color:var(--mut);min-height:18px;margin-bottom:8px}
/* buttons */
button{position:relative;background:var(--grad);color:#fff;border:0;border-radius:11px;padding:10px 18px;cursor:pointer;font:600 14px/1.2 inherit;font-family:inherit;letter-spacing:.2px;box-shadow:0 8px 24px rgba(99,102,241,.35);transition:transform .15s,box-shadow .2s,filter .2s;white-space:nowrap}
button:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(139,92,246,.5);filter:brightness(1.08)}button:active{transform:none}
button.g{background:rgba(255,255,255,.06);box-shadow:none;border:1px solid var(--line)}button.g:hover{background:rgba(255,255,255,.1)}
button.r{background:linear-gradient(135deg,#f43f5e,#e11d48);box-shadow:0 8px 22px rgba(244,63,94,.28)}
button.big{width:100%;padding:14px 18px;font-size:15px;border-radius:12px;margin-top:4px}
button[disabled]{opacity:.7;cursor:progress;transform:none}
button.loading{color:transparent}button.loading::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
a{color:#a78bfa;text-decoration:none}a:hover{color:var(--ac2)}
/* tables / misc */
/* ---- lists / tables (app-wide): card-like rows, zebra, hover, sticky header, action column, mobile cards ---- */
table{width:100%;border-collapse:separate;border-spacing:0 6px;margin:0}
td select{min-width:150px}
td,th{padding:11px 12px;text-align:left;font-size:13.5px;vertical-align:middle}
th{position:sticky;top:0;z-index:2;color:#d4d4f5;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;background:#1b1a33;border-top:1px solid rgba(139,92,246,.45);border-bottom:2px solid rgba(139,92,246,.55);white-space:nowrap}
th:first-child{border-left:1px solid rgba(139,92,246,.45);border-radius:10px 0 0 10px}th:last-child{border-right:1px solid rgba(139,92,246,.45);border-radius:0 10px 10px 0}
td{background:rgba(255,255,255,.035);border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);transition:background .15s,border-color .15s}
td:first-child{border-left:3px solid rgba(139,92,246,.35);border-radius:10px 0 0 10px}td:last-child{border-right:1px solid rgba(255,255,255,.07);border-radius:0 10px 10px 0}
td:only-child{border-radius:10px}
tr:nth-child(even)>td{background:rgba(255,255,255,.065)}
tr:hover>td{background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.45)}tr:hover>td:first-child{border-left-color:var(--ac2)}
td.act,td:has(>button),td:has(>.btnlink){text-align:right;white-space:nowrap;width:1%}
td.act button,td:has(>button) button{margin:2px 0 2px 4px}
tr.empty>td,tr.empty:hover>td{text-align:center;color:var(--mut);background:rgba(255,255,255,.02);border:1px dashed rgba(255,255,255,.14);border-radius:10px;padding:22px;font-size:14px}
.tscroll{overflow:auto;max-height:72vh}
@media(max-width:700px){
 table,table tbody{display:block;margin:0}table tr{display:block;margin:0 0 10px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-left:3px solid rgba(139,92,246,.55)}
 table tr:has(>th){display:none}
 table td{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border:0!important;border-radius:0!important;border-bottom:1px solid rgba(255,255,255,.06)!important;text-align:right;width:auto!important}
 table td:last-child{border-bottom:0!important}
 table td:empty{display:none}
 td select{min-width:0;flex:1 1 140px}
 table td[data-label]::before{content:attr(data-label);color:var(--mut);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;text-align:left;flex:0 0 auto}
 table td:not([data-label]),table td[data-label=""]{justify-content:flex-end}table td[data-label=""]::before{content:none}
 tr.empty{border-style:dashed}tr.empty>td{justify-content:center}
 .tscroll{max-height:none;overflow:visible}
}
.mut{color:var(--mut)}.err{color:var(--bad);min-height:20px;font-size:13.5px}
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap;vertical-align:middle;background:rgba(255,255,255,.07);border:1px solid var(--line)}
.pill.free{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.4);color:#86efac}.pill.assigned{background:rgba(139,92,246,.16);border-color:rgba(139,92,246,.45);color:#c4b5fd}.pill.maintenance{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.4);color:#fcd34d}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1;min-width:120px}.row input,.row select{margin-top:0}
.secret{font-family:ui-monospace,Consolas,monospace;background:#000;padding:12px;border-radius:10px;word-break:break-all;border:1px solid rgba(245,185,66,.4);color:var(--gold)}
h4{margin:16px 0 8px;font-size:13px;color:var(--mut);text-transform:uppercase;letter-spacing:.6px}
.stat{display:flex;align-items:center;gap:10px}.dot{width:10px;height:10px;border-radius:50%;background:#52525b}.dot.on{background:var(--ok);box-shadow:0 0 0 4px rgba(34,197,94,.18),0 0 14px rgba(34,197,94,.8);animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(34,197,94,0),0 0 14px rgba(34,197,94,.8)}}
/* toasts */
#toasts{position:fixed;right:18px;bottom:18px;display:grid;gap:10px;z-index:50;max-width:min(380px,calc(100vw - 36px))}
.toast{padding:12px 16px;border-radius:12px;background:rgba(20,20,36,.92);border:1px solid var(--line);box-shadow:var(--sh);backdrop-filter:blur(12px);animation:fadeUp .25s ease both;border-left:3px solid var(--ac2)}
.toast.bad{border-left-color:var(--bad)}.toast.ok{border-left-color:var(--ok)}.toast.out{opacity:0;transform:translateY(8px);transition:.3s}
/* verify page */
.center{min-height:100vh;display:grid;place-items:center;padding:20px}.center .card{max-width:460px;text-align:center;padding:34px}.center .brand{margin-bottom:18px}
/* ---- subscription state */
.btnlink{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;background:var(--grad);color:#fff;font-weight:700;text-decoration:none;box-shadow:0 8px 24px rgba(99,102,241,.35)}
.btnlink:hover{filter:brightness(1.08);text-decoration:none}
.btnlink.g{background:rgba(255,255,255,.06);border:1px solid var(--line);box-shadow:none;color:var(--tx)}
.nosub{position:relative;border-color:rgba(245,185,66,.35);background:linear-gradient(135deg,rgba(245,185,66,.08),rgba(139,92,246,.08)),var(--card);padding-left:84px}
.nosub h3::before{background:linear-gradient(180deg,var(--gold),#f97316)}
.nosub-ic{position:absolute;left:22px;top:22px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:rgba(245,185,66,.14);border:1px solid rgba(245,185,66,.35)}
.subok{border-color:rgba(34,197,94,.3)}
/* ---- guide */
.guide{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px;align-items:start}
.toc{position:sticky;top:16px;padding:18px}
.toc h4{margin:0 0 10px}.toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.toc li a{display:flex;gap:10px;align-items:center;padding:7px 10px;border-radius:9px;color:var(--tx);text-decoration:none;font-size:13.5px}
.toc li a:hover{background:rgba(255,255,255,.06)}
.ghero h2{margin:0 0 6px;font-size:26px;letter-spacing:-.3px}.ghero .lead,.gsec .lead{color:var(--mut);font-size:15.5px;margin:0 0 6px}
.gsec{padding:0;overflow:hidden}
.gsec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:18px 22px;font-weight:700;font-size:16.5px}
.gsec>summary::-webkit-details-marker{display:none}
.gsec>summary::after{content:"▾";margin-left:auto;color:var(--mut);transition:transform .2s}
.gsec:not([open])>summary::after{transform:rotate(-90deg)}
.gsec>summary:hover{background:rgba(255,255,255,.03)}
.gsec>:not(summary){margin-left:22px;margin-right:22px}.gsec>:last-child{margin-bottom:20px}
.gnum{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:13px;background:var(--grad);color:#fff;box-shadow:0 0 14px rgba(139,92,246,.45)}
.gic{font-size:18px}
.steps{list-style:none;margin:8px 0 0;padding:0}
.steps li{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.steps li:first-child{border-top:0}
.steps .num{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;border:1px solid rgba(139,92,246,.6);color:#c4b5fd;background:rgba(139,92,246,.12)}
.steps p{margin:2px 0}
.steps code,.qa code,.gsec code{background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:12.5px;word-break:break-all}
.qa{border-top:1px solid var(--line);padding:10px 0}.qa:first-child{border-top:0}
.qa summary{cursor:pointer;font-weight:600}.qa p{color:var(--mut);margin:8px 0 2px}
.gimg{margin:10px 0}.gimg img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line);display:block}
.gimg figcaption{color:var(--mut);font-size:12.5px;margin-top:6px}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:12px}
.thumb{margin:0;padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);font-size:12.5px}
.thumb img{width:100%;height:110px;object-fit:cover;border-radius:8px;display:block;margin-bottom:6px}
@media(max-width:900px){.guide{grid-template-columns:1fr}.toc{position:static}.nosub{padding-left:22px}.nosub-ic{position:static;margin-bottom:10px}}
.card button[disabled]{opacity:.42;filter:grayscale(.7);cursor:not-allowed;box-shadow:none}
.gsec>.lead{margin:0 22px 8px}
/* field help: badges, "?" popovers, hints, validation */
.fld{margin-bottom:12px;min-width:0}.fld>input,.fld>select,.fld>.pw{margin-top:6px}.fld .pw input{margin-top:0}
.fh{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;color:var(--mut);font-weight:600;letter-spacing:.3px}.fh label{margin:0;font-size:inherit}
.badge{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;border-radius:999px;border:1px solid;line-height:1.4}
.badge.req{color:#fda4af;border-color:rgba(244,63,94,.45);background:rgba(244,63,94,.10)}.badge.opt{color:#a5b4fc;border-color:rgba(129,140,248,.40);background:rgba(129,140,248,.08)}
.hw{position:relative;display:inline-flex}
button.hq{width:20px;height:20px;padding:0;border-radius:50%;font:700 12px/18px inherit;font-family:inherit;background:rgba(139,92,246,.18);border:1px solid rgba(139,92,246,.55);color:#ddd6fe;box-shadow:none}
button.hq:hover,button.hq:focus-visible,.hw.open button.hq{background:rgba(139,92,246,.4);transform:none;outline:none;box-shadow:0 0 0 3px rgba(139,92,246,.28);filter:none}
.pop{display:none;position:absolute;z-index:60;width:300px;padding:12px 14px;border-radius:12px;background:#14142a;border:1px solid rgba(139,92,246,.5);box-shadow:0 18px 50px rgba(0,0,0,.65),0 0 24px rgba(139,92,246,.18);color:var(--tx);font-size:13px;font-weight:400;letter-spacing:0;line-height:1.5;text-transform:none;white-space:normal;text-align:left}
.hw:hover .pop,.hw:focus-within .pop,.hw.open .pop{display:block;animation:fadeUp .18s ease both}
.pop .pt{display:flex;gap:8px;align-items:center;font-weight:700;font-size:13.5px;margin-bottom:4px}.pop .pr{display:block;margin-top:7px}.pop .pr b{display:block;color:#c4b5fd;font-size:11.5px;letter-spacing:.3px;margin-bottom:1px}
.pop code,.hint code,.sa-box code{font-size:12px;background:rgba(255,255,255,.07);padding:1px 5px;border-radius:5px;word-break:break-all}
.card:has(.hw:hover),.card:has(.hw:focus-within),.card:has(.hw.open){position:relative;z-index:20}
.hint{display:block;font-size:12px;color:#8c8aa8;margin-top:5px;line-height:1.45;word-break:break-word}
input[aria-invalid=true],select[aria-invalid=true]{border-color:var(--bad);box-shadow:0 0 0 4px rgba(244,63,94,.15)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px 16px;align-items:start}.fgrid.wide{grid-template-columns:3fr 1fr}@media(max-width:700px){.fgrid.wide{grid-template-columns:1fr}}
/* standalone notice, banner, how-to, contact footer */
.banner,.sa-box{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,rgba(245,185,66,.12),rgba(139,92,246,.09));border:1px solid rgba(245,185,66,.42)}
.banner{margin-bottom:18px;animation:fadeUp .45s ease both}.sa-box{margin:0 0 14px}
.banner p,.sa-box p{margin:3px 0 0;color:#d9d6ea;font-size:13.5px}.banner b,.sa-box b{color:#fcd34d}.bic{font-size:22px;line-height:1}
.banner .x{margin-left:auto;padding:4px 10px;flex:0 0 auto}
.sa-hero{display:flex;gap:8px;align-items:center;padding:9px 13px;border-radius:11px;border:1px solid rgba(245,185,66,.42);background:rgba(245,185,66,.08);color:#fcd34d;font-size:13.5px;margin:-10px 0 22px;max-width:520px}
.howto{margin-left:auto;font-size:12px;font-weight:600;letter-spacing:.2px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);white-space:nowrap}.howto:hover{border-color:rgba(34,211,238,.5)}
.subsec{padding:14px 16px;border:1px dashed rgba(139,92,246,.38);border-radius:14px;margin-bottom:18px;background:rgba(139,92,246,.05)}
.card h4{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:14px}
.sitefoot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:28px auto 0;max-width:1120px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.025)}
.sitefoot b{display:block;margin-bottom:2px}.sitefoot .mut{font-size:13px}
.top>.row{flex:1 1 auto;flex-wrap:wrap;justify-content:flex-end}.top>.row>*{flex:0 0 auto;min-width:0}
/* ===== staff console ===== */
.center-auth{min-height:calc(100vh - 44px);display:grid;place-items:center;padding:24px 16px}.center-auth .auth{justify-self:center;max-width:460px}
.pill.owner{background:linear-gradient(135deg,rgba(245,185,66,.25),rgba(139,92,246,.2));border-color:rgba(245,185,66,.55);color:#fde68a}
.atabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px;padding:6px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.atabs a{display:flex;gap:7px;align-items:center;padding:8px 13px;border-radius:10px;color:var(--mut);text-decoration:none;font-weight:600;font-size:13.5px;transition:.15s}
.atabs a:hover{color:var(--tx);background:rgba(255,255,255,.05)}.atabs a.on{color:#fff;background:var(--grad);box-shadow:0 6px 20px rgba(99,102,241,.35)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{position:relative;padding:16px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:2px;overflow:hidden}
.kpi b{font-size:26px;letter-spacing:-.5px}.kpi span:last-child{color:var(--mut);font-size:12.5px}.kpi .kic{position:absolute;right:12px;top:10px;font-size:20px;opacity:.55}
.kpi.bad{border-color:rgba(244,63,94,.45);box-shadow:0 0 0 1px rgba(244,63,94,.15) inset}.kpi.bad b{color:#fda4af}.kpi.warn{border-color:rgba(245,158,11,.45)}.kpi.warn b{color:#fcd34d}
.bars{display:flex;align-items:flex-end;gap:4px;height:120px;padding:6px 0;border-bottom:1px solid var(--line)}
.bars i{flex:1;position:relative;background:linear-gradient(180deg,#8b5cf6,#22d3ee);border-radius:4px 4px 0 0;opacity:.85;min-width:4px;display:flex;align-items:flex-end}.bars i:hover{opacity:1}
.bars s{display:block;width:100%;background:rgba(244,63,94,.9);border-radius:4px 4px 0 0}
.lv-debug{color:#a1a1aa}.pill.lv-info{color:#93c5fd;border-color:rgba(59,130,246,.35)}.pill.lv-warn{color:#fcd34d;border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.12)}.pill.lv-error{color:#fda4af;border-color:rgba(244,63,94,.5);background:rgba(244,63,94,.12)}
.tscroll{overflow-x:auto}.nowrap{white-space:nowrap}.brk{word-break:break-word;overflow-wrap:anywhere}code.brk{display:block;white-space:normal;font-size:11.5px;margin-top:6px}
table.evt td{vertical-align:top}table.evt pre,.tline pre{margin:6px 0 0;max-width:520px;max-height:260px;overflow:auto;font-size:11.5px;background:rgba(0,0,0,.35);padding:8px;border-radius:8px;border:1px solid var(--line)}
details summary{cursor:pointer;color:var(--ac2);font-size:12.5px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.chip{padding:4px 10px;border-radius:99px;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.3);font-size:12px}
.tline{list-style:none;margin:0;padding:0 0 0 8px;position:relative}.tline::before{content:"";position:absolute;left:21px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,rgba(139,92,246,.6),rgba(34,211,238,.25))}
.tday{margin:14px 0 8px 40px;font-weight:700;color:var(--gold);font-size:12.5px;text-transform:uppercase;letter-spacing:.6px}
.tli{display:flex;gap:12px;margin:0 0 10px;position:relative}.tdot{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#15152a;border:1px solid var(--line);font-size:13px;z-index:1}
.tli.lv-error .tdot{border-color:rgba(244,63,94,.7);box-shadow:0 0 12px rgba(244,63,94,.4)}.tli.lv-warn .tdot{border-color:rgba(245,158,11,.7)}
.tbody{flex:1;padding:6px 12px;border-radius:12px;background:rgba(255,255,255,.025);border:1px solid var(--line)}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}.card.inner{margin:0;background:rgba(255,255,255,.03)}
.perms{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin:10px 0 12px}
.perm{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.2);cursor:pointer}.perm:has(input:checked){border-color:rgba(139,92,246,.6);background:rgba(139,92,246,.1)}
.perm input{margin-top:3px;accent-color:#8b5cf6}.perm span{display:flex;flex-direction:column}.perm small{color:var(--mut);font-size:12px;line-height:1.35}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.codes code{padding:8px;text-align:center;border-radius:8px;background:rgba(0,0,0,.35);border:1px dashed rgba(245,185,66,.45);font-size:14px;letter-spacing:1px}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1.5px}.secret.big{font-size:26px;text-align:center;color:#fde68a}
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(3,3,8,.7);backdrop-filter:blur(6px);padding:16px}.mbox{width:100%;max-width:480px}
.modal textarea{width:100%;margin-top:6px;resize:vertical}.steps.compact li{margin-bottom:8px}
/* account, legal, 404 */
.pt{margin:6px 0 2px;font-size:26px;letter-spacing:-.4px}.ok{color:#86efac;min-height:1em;margin:6px 0}
.card.danger{border-color:rgba(244,63,94,.45);background:linear-gradient(180deg,rgba(244,63,94,.06),transparent 60%),var(--card)}
.sitefoot .legal{flex-basis:100%;font-size:12.5px;color:var(--mut);margin-top:6px}
.legaltxt{max-width:820px;margin:0 auto 18px}.legaltxt h1{margin:0 0 8px}.legaltxt h3{margin:18px 0 4px}.legaltxt p{line-height:1.65}
.nf{text-align:center;padding:48px 20px;max-width:560px;margin:30px auto}.nfc{font-size:84px;font-weight:800;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.pill{white-space:nowrap}select.srole{min-width:140px}
.perm{text-align:left}.perm input[type=checkbox]{width:auto;min-width:0;flex:0 0 auto;margin:3px 0 0;padding:0;height:auto;box-shadow:none}.perm span{flex:1;min-width:0;align-items:flex-start}.perm code{font-size:12px}
.modal textarea{background:rgba(0,0,0,.35);color:var(--tx);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;outline:none}.modal textarea:focus{border-color:rgba(139,92,246,.7);box-shadow:0 0 0 3px rgba(139,92,246,.2)}
.tbody .mut{margin:2px 0 0}.tbody details{margin-top:4px}.tbody>div:first-child{line-height:1.5}
/* TOTP QR enrollment */
.qrwrap{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin:8px 0}
.qr{background:#fff;border-radius:10px;padding:6px;line-height:0;flex:0 0 auto}
.qr svg{display:block;width:180px;height:180px}
.qrwrap>div:last-child{flex:1;min-width:200px}
/* timeline: routine toggle + grouped repeats */
.tgl{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;white-space:nowrap}
.tgl input{width:auto;margin:0}
.pill.rep{background:rgba(99,102,241,.18);color:#c7d2fe;border-color:rgba(99,102,241,.4)}

/* compact tables that must fit desktop width (Admin > Users) */
table.fit{table-layout:auto}table.fit td{white-space:normal}
.ucell{max-width:300px}.trunc{display:block;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.usub{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}.usub .pill{font-size:11px;padding:1px 8px}
.pill.bad{background:rgba(244,63,94,.14);border-color:rgba(244,63,94,.45);color:#fda4af}
.vcell{display:grid;gap:6px}.vassign{display:flex;gap:6px;align-items:center}.vassign select{margin:0;padding:7px 10px;min-width:0;max-width:170px;font-size:12.5px}.vassign button{padding:7px 12px;font-size:12.5px}
button.ic,.btnlink.ic{padding:7px 11px;line-height:1}
details.amenu{display:inline-block;position:relative;margin-left:4px}details.amenu>summary{list-style:none;cursor:pointer;display:inline-block;font-weight:800;letter-spacing:1px}details.amenu>summary::-webkit-details-marker{display:none}
.amenu-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:20;display:grid;gap:6px;min-width:170px;padding:8px;border-radius:12px;background:#17162c;border:1px solid rgba(139,92,246,.45);box-shadow:var(--sh)}
.amenu-pop button{width:100%;margin:0!important;text-align:left}
table.users .tscroll,.tscroll:has(table.users){overflow:visible;max-height:none}
@media(max-width:700px){.trunc{max-width:60vw}.ucell{max-width:none}.ucell .usub{justify-content:flex-end}.vcell{justify-items:end}}
table.fit td.act{white-space:nowrap}
.btnlink.adminbtn{background:var(--grad);color:#fff;border-color:transparent;font-weight:700;box-shadow:0 0 16px rgba(139,92,246,.45)}

/* details modal */
body.dmopen{overflow:hidden}
.dmov{position:fixed;inset:0;z-index:1000;background:rgba(5,3,15,.72);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px}
.dmbox{width:min(760px,100%);max-height:86vh;display:flex;flex-direction:column;gap:10px;background:#15122a;border:1px solid rgba(160,130,255,.35);border-radius:14px;padding:16px 18px;box-shadow:0 20px 60px rgba(0,0,0,.6);outline:none}
.dmhead{display:flex;align-items:center;justify-content:space-between}.dmhead h3{margin:0;font-size:16px}
.dmrid{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px}.dmrid code{word-break:break-all}
.dmpre{margin:0;flex:1;overflow:auto;overflow-x:hidden;white-space:pre-wrap;word-break:break-word;font-size:12.5px;line-height:1.5;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px}
.dmfoot{display:flex;justify-content:flex-end;align-items:center;gap:10px}
button.dbtn{padding:3px 10px;font-size:12px}

/* user picker */
.upk{position:relative}.upk-in{width:100%}
.upk-lb{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:50;margin:0;padding:4px;list-style:none;max-height:300px;overflow:auto;background:#17132d;border:1px solid rgba(160,130,255,.35);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.upk-lb [role=option]{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer}
.upk-lb [role=option]:hover,.upk-lb [role=option][aria-selected=true]{background:rgba(139,92,246,.25);outline:1px solid rgba(167,139,250,.5)}
.upk-email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.upk-b{flex:none}
.upk-msg{padding:8px 10px}
.upk-chip{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 8px 6px 12px;border:1px solid rgba(160,130,255,.45);background:rgba(139,92,246,.14);border-radius:999px;min-height:40px}
.upk-chip .upk-x{margin-left:auto}
.upk-st{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.upk-chip[hidden],.upk-lb[hidden],.upk-in[hidden]{display:none}
.fgrid>:has(.upk){grid-column:span 2}
@media (max-width:700px){.fgrid>:has(.upk){grid-column:auto}}

/* save feedback */
@keyframes flashbg{0%{box-shadow:0 0 0 2px #a78bfa,0 0 24px rgba(167,139,250,.6);background-color:rgba(139,92,246,.28)}100%{box-shadow:0 0 0 0 transparent;background-color:transparent}}
.flash,tr.flash>td{animation:flashbg 3.2s ease-out}
button[aria-busy=true]{opacity:.6;cursor:progress}
.newrole{border:1px dashed rgba(167,139,250,.55)}
fieldset.pcat{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px 10px;margin:0 0 8px}fieldset.pcat legend{padding:0 6px;font-weight:700;font-size:12.5px;color:var(--ac2)}
.perms{display:block}fieldset.pcat .perm{display:inline-flex;width:calc(50% - 8px);vertical-align:top;margin:3px 4px}
@media (max-width:700px){fieldset.pcat .perm{width:100%}}

/* pagination */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.pgbtns{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.pgb{min-width:34px;padding:5px 9px;font-size:13px}.pgb.on{background:linear-gradient(90deg,#8b5cf6,#22d3ee);color:#fff;border-color:transparent}
.pgb[disabled]{opacity:.35;cursor:default}.pgsize select{width:auto;padding:4px 8px;margin-left:6px}

/* activity v2 */
table.evt tr.ev>td:first-child{border-left:4px solid #64748b}
table.evt tr.lv-error>td:first-child{border-left-color:#ef4444}table.evt tr.lv-warn>td:first-child{border-left-color:#f59e0b}table.evt tr.lv-info>td:first-child{border-left-color:#3b82f6}table.evt tr.lv-debug>td:first-child{border-left-color:#64748b}
table.evt tr.everr>td{background:rgba(239,68,68,.09)!important}
.tli.everr{background:rgba(239,68,68,.08);border-radius:8px}
table.evt tr.dayrow th{position:sticky;top:0;z-index:2;text-align:left;background:#1b1636;color:var(--ac2);font-size:12.5px;padding:8px 12px;border-radius:8px;letter-spacing:.02em}
.pill.lv-error{background:rgba(239,68,68,.18);color:#fca5a5;border-color:rgba(239,68,68,.45)}.pill.lv-warn{background:rgba(245,158,11,.16);color:#fcd34d;border-color:rgba(245,158,11,.45)}
.pill.lv-info{background:rgba(59,130,246,.16);color:#93c5fd;border-color:rgba(59,130,246,.45)}.pill.lv-debug{background:rgba(100,116,139,.18);color:#cbd5e1;border-color:rgba(100,116,139,.45)}
.evw{display:flex;gap:8px;align-items:flex-start}.evic{font-size:18px;line-height:1.2}.evn{font-size:14px}.evk{font-size:11.5px;opacity:.6;margin-top:1px}.evk code{font-size:11.5px}.evm{font-size:12.5px;margin-top:2px}
.actor{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:inherit;max-width:260px}.actor:hover .ace{text-decoration:underline}
.av{flex:none;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;background:#334155;color:#fff}
.av-user{background:linear-gradient(135deg,#6366f1,#22d3ee)}.av-staff{background:linear-gradient(135deg,#a855f7,#ec4899)}.av-agent{background:#0f766e}.av-anon{background:#475569}.av-system{background:#374151}
.acn{display:flex;flex-direction:column;min-width:0;line-height:1.2}.ace{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.ack{font-size:11px;opacity:.65}
details.msel{position:relative}details.msel>summary{list-style:none;cursor:pointer;padding:11px 12px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(0,0,0,.25);color:inherit;font-size:14px}
details.msel>summary::after{content:'▾';float:right;opacity:.6}.msel-pop{position:absolute;z-index:40;left:0;top:calc(100% + 4px);width:min(560px,90vw);max-height:420px;overflow:auto;background:#17132d;border:1px solid rgba(160,130,255,.35);border-radius:12px;padding:10px;box-shadow:0 14px 36px rgba(0,0,0,.55)}
label.chk{display:flex;align-items:baseline;gap:6px;padding:3px 2px;font-size:13px;cursor:pointer}label.chk small{margin-left:auto}
.fchips{display:flex;flex-wrap:wrap;gap:6px}.fchip{position:relative;cursor:pointer}.fchip input{position:absolute;opacity:0;pointer-events:none}
.fchip span{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font-size:13px;background:rgba(0,0,0,.2)}
.fchip input:checked+span{background:rgba(139,92,246,.3);border-color:#a78bfa;color:#fff}.fchip input:focus-visible+span{outline:2px solid #a78bfa}
.fchip.levels-error input:checked+span{background:rgba(239,68,68,.3);border-color:#ef4444}.fchip.levels-warn input:checked+span{background:rgba(245,158,11,.3);border-color:#f59e0b}.fchip.levels-info input:checked+span{background:rgba(59,130,246,.3);border-color:#3b82f6}
.fld.span2{grid-column:span 2}@media (max-width:700px){.fld.span2{grid-column:auto}}
.afcustom{display:flex;gap:6px;margin-top:6px}.afcustom[hidden]{display:none}.afadv{margin:8px 0}
.achips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}.achip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 12px;border-radius:999px;background:rgba(139,92,246,.2);border:1px solid rgba(167,139,250,.5);font-size:12.5px}.achip button{padding:1px 7px;font-size:11px}
.aflegend{font-size:13px}.aflegend>summary{cursor:pointer}.aflegend dl{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center}.aflegend dd{margin:0}
.msel-pop label.chk{display:flex!important;flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:8px;margin:0;font-weight:500}
.msel-pop label.chk input{width:auto!important;margin:0;flex:none}.msel-pop label.chk span{flex:1}.msel-pop label.chk small{flex:none;white-space:nowrap}
.msel-pop fieldset.pcat{display:block}
table.evt td:nth-child(3){min-width:170px}

/* guide-to-missing-step + connection status */
.needbox{display:flex;gap:12px;align-items:flex-start;margin:0 0 12px;padding:12px 14px;border-radius:12px;border:1px solid #f59e0b;background:rgba(245,158,11,.12);animation:flashbg 2.4s ease-out}
.needbox.ok{border-color:#22c55e;background:rgba(34,197,94,.12)}.needbox p{margin:4px 0 8px}.needic{font-size:22px}
.needfocus{outline:3px solid #f59e0b;outline-offset:4px;border-radius:12px;transition:outline-color .4s}
.pill.conn-online{background:rgba(34,197,94,.18);color:#86efac;border-color:rgba(34,197,94,.5)}.pill.conn-connecting{background:rgba(59,130,246,.16);color:#93c5fd}.pill.conn-error{background:rgba(239,68,68,.18);color:#fca5a5;border-color:rgba(239,68,68,.5)}
p.info{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.35);border-radius:10px;padding:8px 12px;font-size:13.5px}.small{font-size:12px}
/* VDS enrollment modal */
.enrsteps{margin:0 0 4px 18px;padding:0;display:grid;gap:4px;font-size:14px}
.enrcmd{display:flex;flex-direction:column;gap:6px}
.enrlab{display:flex;align-items:center;justify-content:space-between;gap:8px}
.enrpre{white-space:pre-wrap;word-break:break-all;user-select:all;font-size:13px;margin:0}
.enrpre.flash{animation:enrfl 1.2s ease}
.enrpre.stale{opacity:.45;text-decoration:line-through}
@keyframes enrfl{0%{box-shadow:0 0 0 2px #22d3ee}100%{box-shadow:0 0 0 0 transparent}}
.enrlinux summary{cursor:pointer;color:#b9b2e0;margin:4px 0}
.enrstat{font-size:14px}.enrstat .ok,.enrstat.ok,#enrst.ok{color:#4ade80;font-weight:600}#enrleft.bad{color:#f87171;font-weight:600}
#enrleft{margin-right:10px}
/* live VDS list */
.livetag{font-size:12px;color:#4ade80;margin-left:8px;animation:lvp 2s infinite}@keyframes lvp{50%{opacity:.4}}
.vlu{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:2px 0}
.vlload{display:grid;grid-template-columns:auto 70px;gap:3px 8px;align-items:center;font-size:12px;white-space:nowrap}
.vlload .bar{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}.vlload .bar i{display:block;height:100%;background:linear-gradient(90deg,#22d3ee,#a78bfa)}
td.flash{animation:enrfl 1.2s ease}
table.kv th{text-align:left;padding-right:14px;color:#b9b2e0;font-weight:500;white-space:nowrap}table.kv td,table.kv th{padding:6px 4px}

.upk-main{display:flex;flex-direction:column;min-width:0}.upk-sub{font-size:11px}.upk-more{text-align:center}.upk-lm{width:100%}
.upk-in{cursor:pointer}.upk-in:focus{cursor:text}

.demo{border:1px dashed rgba(160,130,255,.4);border-radius:12px;padding:10px 14px;margin-bottom:10px}.demo-steps{margin:6px 0 0 18px;line-height:1.7}
#lockstop[hidden]{display:none}
/* ---- /app compact grid (desktop 3 columns -> 2 -> 1 on mobile) */
.wrap:has(#appgrid){max-width:1440px}
.appgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.appgrid>.card{margin:0;padding:14px 16px}.appgrid .card h3{margin-bottom:8px;font-size:15px}
.appgrid .span2{grid-column:span 2}.appgrid .span3{grid-column:1/-1}
.appgrid p{margin:6px 0}.appgrid .sm{font-size:12.5px}.appgrid .fgrid{gap:8px 12px}.appgrid form{margin-top:8px}.appgrid .subsec{margin-top:10px;padding-top:8px}
.appgrid table.tight td,.appgrid table.tight th{padding:6px 8px;font-size:13px}
@media(max-width:1180px){.appgrid{grid-template-columns:1fr 1fr}.appgrid .span3,.appgrid .span2{grid-column:1/-1}}
@media(max-width:720px){.appgrid{grid-template-columns:1fr}.appgrid>*{grid-column:auto!important}}
.hbox{margin:0 0 8px;border:1px solid rgba(160,130,255,.25);border-radius:10px;padding:6px 10px;font-size:12.5px;background:rgba(139,92,246,.06)}.hbox summary{cursor:pointer;font-weight:600}.hbox div{margin-top:6px;line-height:1.55}
.lockbox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;border:1px dashed rgba(251,191,36,.5);background:rgba(251,191,36,.07);border-radius:10px;padding:8px 10px;margin:0 0 8px;font-size:13px}
.bag{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;margin:6px 0;max-width:460px}
.bc{all:unset;box-sizing:border-box;aspect-ratio:1;border:1px solid rgba(160,130,255,.22);border-radius:5px;background:rgba(255,255,255,.03);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9.5px;line-height:1.05;cursor:pointer;min-width:0;overflow:hidden;color:var(--fg,#e9e4ff)}
.bc:disabled{cursor:default}.bc b{font-size:10px}.bc i{font-style:normal;opacity:.75}
.bc:not(:disabled):hover,.bc.sel{outline:2px solid #a78bfa}
.bc.need{background:rgba(59,130,246,.18);border-color:rgba(96,165,250,.6)}.bc.ok{background:rgba(34,197,94,.2);border-color:rgba(74,222,128,.6)}.bc.busy{background:rgba(239,68,68,.2);border-color:rgba(248,113,113,.6)}.bc.item{background:rgba(255,255,255,.12)}
.bagleg{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:11.5px;color:var(--mut)}.bagleg .bc{width:12px;height:12px;aspect-ratio:auto;display:inline-block;cursor:default}
.celled{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0;padding:8px;border:1px solid rgba(160,130,255,.35);border-radius:10px}.celled[hidden]{display:none}.celled input{width:auto;flex:1 1 140px}.celled #ceamt{flex:0 0 80px}
.ftool{gap:6px;margin:4px 0 8px}.chk{display:flex;gap:6px;align-items:center;cursor:pointer}
#filtercard td button{padding:5px 9px;margin-left:4px}.lpg{align-items:center;justify-content:center;gap:10px;margin-top:8px}
#appgrid .nosub .nosub-ic{display:none}

/* ---- v2 balanced grid: 6 tracks; thirds / halves / full; rows stretch to equal height */
.appgrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;align-items:stretch}
.appgrid>.card{grid-column:span 2;display:flex;flex-direction:column;min-width:0}
.appgrid>.card.half{grid-column:span 3}.appgrid>.card.span3,.appgrid>.card.span2{grid-column:1/-1}
.appgrid .subsec{margin:10px 0 0;padding:10px 12px}
.gacols{display:flex;flex-direction:column;gap:0;flex:1}.gacols>.subsec{margin-top:auto}
.addacc{margin:8px 0 0}.addacc summary{cursor:pointer;font-weight:600;font-size:13px;color:#c4b5fd}.addacc form{margin-top:6px}
#stashcard .fgrid{grid-template-columns:1fr 1fr}#stashcard .row:last-child{margin-top:auto}
.appgrid .bag{max-width:none}
#invcard .tscroll,#invbox table{max-height:260px;overflow:auto}
.strip{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:12px 0!important}
.scell{padding:0 16px;border-left:1px solid var(--line);min-width:0}.scell:first-child{border-left:0}
.scell h3{font-size:14px!important;margin-bottom:6px!important}.scell p{margin:4px 0}.scell .demo-steps{margin:2px 0 4px 18px;line-height:1.45;font-size:12.5px}
.scell .row{gap:6px}.scell button,.scell .btnlink{padding:6px 12px}
.strip .subok,.strip .nosub{background:none;border:0;box-shadow:none}
.ftool{flex-wrap:nowrap!important;white-space:nowrap;overflow-x:auto;margin:2px 0 8px!important;padding-bottom:2px}.ftool .chk{margin-right:auto}.ftool button{padding:6px 12px}
.appgrid>.card.half .tscroll{max-height:520px;overflow:auto}.appgrid>.card.half>:last-child{margin-top:auto}
@media(max-width:1180px){.appgrid>#gacard{grid-column:1/-1}.gacols{display:grid;grid-template-columns:1fr 1fr;gap:16px}.gacols>.subsec{margin:0}
 .appgrid>#stashcard,.appgrid>#invcard{grid-column:span 3}.appgrid>.card.half{grid-column:1/-1}}
@media(max-width:820px){.strip{grid-template-columns:1fr}.scell{border-left:0;border-top:1px solid var(--line);padding:10px 16px}.scell:first-child{border-top:0}}
@media(max-width:720px){.appgrid>.card{grid-column:1/-1!important}.gacols{display:flex}#stashcard .fgrid{grid-template-columns:1fr}.ftool{flex-wrap:wrap!important;white-space:normal}}
#gacard .tscroll{overflow:visible}#gacard table.tight,#gacard table.tight tbody{display:block}#gacard table.tight tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:6px 8px}#gacard table.tight td{padding:0!important;border:0}#gacard table.tight td:last-child{margin-left:auto}
.ftool .chk{flex:0 0 auto}.chk input{width:auto!important;margin:0}
#stashcard .fgrid label{flex-wrap:wrap}
#gacard table.tight{width:100%;max-width:100%}#gacard table.tight tr{position:static;width:100%;box-sizing:border-box}#gacard table.tight td{position:static!important;float:none!important;transform:none!important}#gacard table.tight td:last-child{flex:1 0 100%;display:flex;justify-content:flex-end;gap:6px;margin:0}
.acclist{display:flex;flex-direction:column;gap:6px;margin:8px 0}.accrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03)}.accact{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}.accact button{padding:5px 10px}

/* ---- v3: original-panel bag grids (12x5, identical geometry) + full-width account row */
.appgrid>#gacard{grid-column:1/-1}
.gacols{display:grid!important;grid-template-columns:2fr 1fr;gap:0 18px;align-items:start}.gacols>.subsec{margin:0!important}
.gacols>div:first-child{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-content:start}.gacols>div:first-child>*{grid-column:1}.gacols>div:first-child>.addacc{grid-column:2;grid-row:1/span 20;margin:0}
.addacc[open] summary{margin-bottom:4px}
#stashcard{--cs:38px}
.sthead{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}.sthead h3{margin:0 0 6px!important}
.sttabs{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}.sttabs .fld,.sttabs>div{margin:0;width:190px}.sttabs input{padding:7px 10px}.sttabs #stsave{height:38px;align-self:flex-end;margin-bottom:2px}
.stinfo{margin:2px 0 6px!important;min-height:1em;text-align:right}
.bags{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:4px 0 6px}
.bagpane{flex:0 0 auto}.bagpane h4{margin:0 0 6px!important;font-size:13.5px}
.inv{display:inline-grid;grid-template-columns:repeat(12,var(--cs));grid-template-rows:repeat(5,var(--cs));gap:4px;padding:8px;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:11px;user-select:none}
.inv .cell{all:unset;box-sizing:border-box;border:1px solid rgba(160,130,255,.18);border-radius:6px;background:#0e1118;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:9px;cursor:pointer;transition:border-color .12s}
.inv .cell:disabled,#bagI .cell{cursor:default}.inv .cell:not(:disabled):hover{border-color:#a78bfa}
.inv .cell.lock{background:rgba(52,209,122,.1);border-color:rgba(52,209,122,.5)}.inv .cell.lock.busy{background:rgba(239,68,68,.14);border-color:rgba(248,113,113,.6)}.inv .cell.lock.need{background:rgba(59,130,246,.12);border-color:rgba(96,165,250,.55)}
.inv .cell.picked{outline:2px solid #a78bfa;outline-offset:-2px;background:rgba(139,92,246,.28)!important}
.inv img{max-width:calc(var(--cs) - 8px);max-height:calc(var(--cs) - 8px);object-fit:contain;filter:drop-shadow(0 2px 3px #000);pointer-events:none}
.inv .ab{font-weight:700;font-size:10px;pointer-events:none}
.inv .q{position:absolute;right:2px;bottom:0;font:700 10px ui-monospace,monospace;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000;pointer-events:none}
.inv .item{border:1px solid #7a6440;border-radius:6px;background:linear-gradient(180deg,#2a2116,#1b150e);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#e6d7b8;z-index:1}
.inv .item.bad{border-color:#f43f5e;box-shadow:0 0 0 2px rgba(244,63,94,.35) inset}.inv .item.ok{border-color:rgba(74,222,128,.75)}
.bagtools{gap:6px;align-items:center;margin-top:6px;min-height:32px}.bagtools #pickinfo{margin-right:auto}.bagtools button{padding:5px 10px;font-size:12.5px}.bagtools #stbulk{display:flex;gap:6px}.bagtools #stbulk[hidden]{display:none}
.bagleg{justify-content:center;margin:2px 0 8px}.bagleg .cell,.bagleg .item{display:inline-block;width:13px;height:13px;border-radius:3px;border:1px solid}
.bagleg .cell.need{background:rgba(59,130,246,.2);border-color:rgba(96,165,250,.7)}.bagleg .cell.ok{background:rgba(52,209,122,.2);border-color:rgba(52,209,122,.7)}.bagleg .cell.busy{background:rgba(239,68,68,.2);border-color:rgba(248,113,113,.7)}.bagleg .item{background:#2a2116;border-color:#7a6440}.bagleg .item.bad{border-color:#f43f5e}
.hrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hrow .hbox{margin:0}
.cmenu{position:fixed;z-index:90;background:var(--card,#151226);border:1px solid rgba(160,130,255,.45);border-radius:11px;padding:6px;box-shadow:0 20px 50px -10px #000;width:260px;max-height:70vh;overflow:auto;backdrop-filter:blur(16px)}
.cmenu .hd{font-size:11.5px;color:var(--mut,#a19bbf);padding:4px 8px;display:flex;align-items:center;gap:6px}.cmenu .hd img{width:20px;height:20px}
.cmenu .mi{all:unset;box-sizing:border-box;display:flex;width:100%;align-items:center;gap:9px;padding:6px 9px;border-radius:7px;cursor:pointer;font-size:13px}.cmenu .mi:hover,.cmenu .mi:focus{background:rgba(139,92,246,.2)}.cmenu .mi img{width:22px;height:22px;object-fit:contain}.cmenu .mi .ab{width:22px;font-size:10px;text-align:center}
.cmenu .mi.del{color:#fb7185}.cmenu .msearch{padding:4px 4px 2px}.cmenu input{width:100%;box-sizing:border-box;padding:6px 8px}
@media(max-width:1180px){#stashcard{--cs:33px}.gacols{grid-template-columns:1fr 1fr}.gacols>div:first-child{grid-template-columns:1fr}.gacols>div:first-child>.addacc{grid-column:1;grid-row:auto;margin-top:8px}}
@media(max-width:720px){.gacols{grid-template-columns:1fr}.hrow{grid-template-columns:1fr}.bagpane{width:100%}.inv{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:none;width:100%;box-sizing:border-box}.inv .cell,.inv .item{aspect-ratio:1}.sttabs>div{width:100%}}
.bagpane{width:min-content;max-width:100%}.bagtools{flex-wrap:wrap}.bagtools #pickinfo{flex:1 1 100%;line-height:1.35}
@media(max-width:1180px){#stashcard{--cs:31px}.inv{gap:3px;padding:7px}.bags{gap:14px}}
@media(max-width:720px){.bagpane{width:100%}}
.appgrid>#stashcard{grid-column:1/-1!important}
.sttabs .fh{flex-wrap:nowrap;white-space:nowrap}.sttabs>div{width:220px}.sthead{align-items:center}.sthead h3{margin:0!important}
.bagtools button{flex:0 0 auto;width:auto}
.addacc .fgrid{grid-template-columns:1fr 1fr!important}.addacc .fgrid>:nth-child(3){grid-column:1/-1}
.sttabs>div{width:auto;min-width:200px}.sttabs{gap:14px}.sttabs .fh{gap:6px}

/* ---- v4 account card: info banner on top, aligned one-line forms */
.ginfo{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--mut,#a19bbf);background:rgba(139,92,246,.06);border:1px solid rgba(160,130,255,.22);border-radius:10px;padding:7px 12px;margin:0 0 10px;line-height:1.4}.ginfo span{flex:1 1 260px}
.gabody{display:grid;grid-template-columns:minmax(240px,1fr) 2.3fr;gap:14px 20px;align-items:start}
.gabody h4{margin:0 0 6px!important;font-size:13.5px}.gaacc .acclist{margin:0}
.gaforms{display:flex;flex-direction:column;gap:10px}.rowform{margin:0!important;padding:0}
.rf{display:grid;gap:8px 10px;align-items:start}.rf3{grid-template-columns:1fr 1.2fr 1.2fr auto}.rf2{grid-template-columns:1fr 1.6fr auto}
.rf .fld{margin:0;min-width:0}.rf .fh{flex-wrap:nowrap;white-space:nowrap;min-height:22px}.rf input,.rf select{height:36px;box-sizing:border-box;padding:6px 10px;width:100%}
.rf .pw,.rf .pwrap{width:100%}.rf .hint{display:block;font-size:11.5px;line-height:1.3;margin-top:3px}
.rf>button{margin-top:26px;height:36px;padding:0 16px;white-space:nowrap}
#stashcard{--cs:34px}@media(max-width:1180px){#stashcard{--cs:30px}}
.inv img{max-width:calc(var(--cs) - 10px);max-height:calc(var(--cs) - 10px)}
@media(max-width:900px){.gabody{grid-template-columns:1fr}}
@media(max-width:620px){.rf3,.rf2{grid-template-columns:1fr}.rf>button{margin-top:0}}
.gaforms .err:empty{display:none}.gaforms form{margin-top:0!important}.gaforms{gap:12px}.rowform h4{min-height:0}
.rf .badge.opt{display:none}.rf .fh{gap:5px;overflow:hidden}.rf .fh .badge{font-size:9.5px;padding:1px 5px}
.ginfo{padding:6px 10px;font-size:12px}
.rf3{grid-template-columns:.75fr 1.35fr 1.1fr auto}