/* Theme A: Brushed steel (default) */
:root,:root[data-theme="A"]{
--page:linear-gradient(180deg,#E9ECF0,#CBD0D8);--ink:#1B2330;--sub:#5B6676;--line:#B9BFC9;--blue:#2B59C3;--red:#C8372D;--teal:#0F8F82;
--card:linear-gradient(180deg,#FFFFFF,#DDE1E8);--cardsh:0 1px 0 #fff inset,0 -2px 0 #B9BFC9 inset,0 4px 8px rgba(40,50,70,.25);
--top:linear-gradient(180deg,#F4F6F8,#C9CED6);--topsh:0 2px 6px rgba(40,50,70,.3);
--btn:linear-gradient(180deg,#FFFFFF,#D3D8E0);--btnsh:0 1px 0 #fff inset,0 -1px 0 #AEB5C0 inset,0 2px 4px rgba(40,50,70,.25);--btnink:#1B2330;
--track:#C3C9D3;--tracksh:inset 0 2px 3px rgba(40,50,70,.35);--inbg:#F6F7F9;--tabon:#16305F;--tabglow:none;--tabline:#2B59C3;
--gbar:linear-gradient(180deg,#27B7A6,#0F8F82);--bbar:linear-gradient(180deg,#E0574D,#B02A21);--nbar:#9AA3B0;
--chartgood:#12A090;--chartbad:#C8372D;--chartcmp:#AEB5C0;--chartgrid:rgba(40,50,70,.12);
--subrow:#E3E6EC;--modal:#EEF0F4;
}
/* Theme B: Gunmetal */
:root[data-theme="B"]{
--page:linear-gradient(180deg,#2A303A,#14181F);--ink:#E6EAF0;--sub:#9AA5B6;--line:#0D1015;--blue:#4C86FF;--red:#FF6B5E;--teal:#3DDBC6;
--card:linear-gradient(180deg,#3A4150,#232830);--cardsh:0 1px 0 rgba(255,255,255,.18) inset,0 -2px 0 #0D1015 inset,0 5px 10px rgba(0,0,0,.5);
--top:linear-gradient(180deg,#3B4252,#1B2029);--topsh:0 3px 8px rgba(0,0,0,.55);
--btn:linear-gradient(180deg,#465064,#2A303C);--btnsh:0 1px 0 rgba(255,255,255,.2) inset,0 -1px 0 #0D1015 inset,0 2px 5px rgba(0,0,0,.5);--btnink:#E6EAF0;
--track:#14181F;--tracksh:inset 0 2px 4px rgba(0,0,0,.7);--inbg:#1A1F27;--tabon:#fff;--tabglow:0 0 8px rgba(76,134,255,.6);--tabline:#4C86FF;
--gbar:linear-gradient(180deg,#5CF0DA,#12A593);--bbar:linear-gradient(180deg,#FF8A7E,#D23A2C);--nbar:#59637A;
--chartgood:#3DDBC6;--chartbad:#FF6B5E;--chartcmp:#59637A;--chartgrid:rgba(255,255,255,.1);
--subrow:#2D3441;--modal:#2A303A;
}
*{box-sizing:border-box}
html{background:#14181F}
body{margin:0;min-height:100vh;background:var(--page);background-attachment:fixed;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;font-size:14px}
.hidden{display:none!important}
.sub{color:var(--sub);font-size:12px}
.good{color:var(--teal)}.bad{color:var(--red)}
button,select,input{font:inherit}
button{cursor:pointer;border:0;background:var(--btn);color:var(--btnink);box-shadow:var(--btnsh);border-radius:5px;padding:6px 12px}
button:active{transform:translateY(1px);box-shadow:none}
button.primary{background:linear-gradient(180deg,#4F82E8,#2449A8);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.3)}
button.danger{color:var(--red)}
button.sm{padding:3px 9px;font-size:12px}
button.on{background:linear-gradient(180deg,#3A4558,#1B2330);color:#fff}
button:disabled{opacity:.45;cursor:default}
input,select{border:0;border-radius:5px;padding:7px 9px;background:var(--inbg);color:var(--ink);box-shadow:var(--tracksh);max-width:100%}
select option{background:#fff;color:#111}
input:focus,select:focus{outline:2px solid var(--blue);outline-offset:1px}
label.f{display:block;margin-bottom:10px;font-size:12px;color:var(--sub)}
label.f input,label.f select{display:block;width:100%;margin-top:3px;font-size:15px}
.top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--top);box-shadow:var(--topsh);padding:8px 14px;position:relative}
.brand{font-weight:600;font-size:16px;letter-spacing:.3px}
.sp{flex:1}
/* frameless metal tabs */
.nav{display:flex;gap:2px;overflow-x:auto;padding:4px 10px 0;background:transparent}
.nav button{white-space:nowrap;background:none;box-shadow:none;border-radius:0;border-bottom:2px solid transparent;color:var(--sub);padding:9px 12px;font-weight:500}
.nav button:hover{color:var(--ink)}
.nav button.on{color:var(--tabon);text-shadow:var(--tabglow);border-bottom-color:var(--tabline);font-weight:600}
.nav button:active{transform:none}
main{max-width:1200px;margin:0 auto;padding:14px}
.card{background:var(--card);box-shadow:var(--cardsh);border-left:6px solid var(--st,var(--sub));border-radius:0 7px 7px 0;padding:12px 14px;margin-bottom:12px}
.card.good{--st:var(--teal);color:inherit}.card.bad{--st:var(--red);color:inherit}.card.blue{--st:var(--blue)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.kpis .card{margin:0}
.big{font-size:26px;font-weight:600;line-height:1.15}
.w{margin-bottom:6px}
.wbar{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-bottom:4px}
.feed .card{margin-bottom:8px;padding:9px 12px}
.lights{display:flex;flex-wrap:wrap;gap:8px}
.dot{display:inline-block;width:22px;height:22px;border-radius:50%;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -2px 3px rgba(0,0,0,.3) inset,0 2px 4px rgba(0,0,0,.35)}
.dot.g{background:radial-gradient(circle at 35% 30%,#7CF0E0,#0F8F82)}.dot.r{background:radial-gradient(circle at 35% 30%,#FF9A90,#B02A21)}.dot.n{background:radial-gradient(circle at 35% 30%,#C9CFD9,#7D8798)}
.rank .row{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:12px}
.rank .row b{width:64px;font-weight:500}
.rank .tr{flex:1;height:10px;background:var(--track);box-shadow:var(--tracksh);border-radius:5px;overflow:hidden}
.rank .tr i{display:block;height:10px;border-radius:5px;background:var(--gbar)}
.rank .tr i.bad{background:var(--bbar)}.rank .tr i.nb{background:var(--nbar)}
.login{max-width:380px;margin:8vh auto;padding:0 14px}
.login .card{padding:20px}
table{width:100%;border-collapse:collapse}
th,td{padding:6px 8px;border-bottom:1px solid rgba(128,138,155,.3);text-align:left;vertical-align:top}
th{font-size:11px;color:var(--sub);text-transform:uppercase}
td.r,th.r{text-align:right}
tr.sub td{font-weight:600;background:var(--subrow)}
.scroll{overflow-x:auto}
.row2{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.chk{display:inline-flex;gap:5px;align-items:center;margin:3px 10px 3px 0;font-size:13px}
.chk input{width:auto}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:14px;z-index:50}
.modal .box{background:var(--modal);color:var(--ink);box-shadow:var(--cardsh);border-radius:8px;max-width:420px;width:100%;padding:16px;max-height:90vh;overflow:auto}
.chartbox{position:relative;height:280px}
.empty{text-align:center;color:var(--sub);padding:40px 10px}
.err{color:var(--red);min-height:18px;font-size:13px;margin-top:6px}
.pill{display:inline-block;font-size:11px;padding:1px 8px;border-radius:9px;background:var(--btn);box-shadow:var(--btnsh)}
.soon{opacity:.5}
.thm{display:inline-flex;gap:4px}