:root{
  --bg:#07090d; --panel:#0d1118; --panel2:#111722; --line:rgba(212,166,58,.30); --line2:rgba(255,255,255,.07);
  --gold:#d4a63a; --gold2:#f0c75a; --gold-d:#8a6a1f; --text:#e9e7e0; --mut:#8a909c; --mut2:#a8aeb9;
  --green:#34d36a; --red:#f05a52; --amber:#e6a82e; --blue:#4aa3ff;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(1200px 600px at 70% -10%,#10151f 0,var(--bg) 60%) fixed;color:var(--text);
  font:13px/1.45 "Segoe UI",Inter,system-ui,-apple-system,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
.hide{display:none!important}
.gold{color:var(--gold)} .mut{color:var(--mut)} .green{color:var(--green)} .red{color:var(--red)} .amber{color:var(--amber)}
.num{font-variant-numeric:tabular-nums}

/* ---------- top bar ---------- */
.top{height:56px;display:flex;align-items:center;gap:14px;padding:0 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#0b0e14,#080a0f);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.8px;color:var(--gold);font-size:15px}
.brand img{width:34px;height:30px}
.burger{background:none;border:0;cursor:pointer;color:var(--mut2);padding:6px;margin-left:6px}
.burger svg{display:block}
.spacer{flex:1}
.usermenu{position:relative}
.userbtn{display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;padding:4px 6px;border-radius:8px}
.userbtn:hover{background:rgba(255,255,255,.04)}
.userbtn .meta{text-align:left;line-height:1.15}
.userbtn .meta b{display:block;font-size:12px}
.userbtn .meta span{font-size:10.5px;color:var(--mut)}
.dropdown{position:absolute;right:0;top:46px;min-width:170px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px;z-index:40;box-shadow:0 12px 30px #000a}
.dropdown a,.dropdown button{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 10px;border-radius:6px;cursor:pointer;color:var(--text)}
.dropdown a:hover,.dropdown button:hover{background:rgba(212,166,58,.12);color:var(--gold2)}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:196px 1fr;min-height:calc(100vh - 56px)}
.side{border-right:1px solid var(--line2);padding:16px 10px;background:linear-gradient(180deg,#0a0d13,#07090d)}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;margin-bottom:3px;border-radius:6px;color:var(--mut2);font-size:12.5px;border:1px solid transparent}
.nav a svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav a:hover{background:rgba(212,166,58,.08);color:var(--text)}
.nav a.active{background:linear-gradient(180deg,#e0b246,#b88a25);color:#14100a;font-weight:700;border-color:#f0c75a55}
.main{padding:22px 24px 40px;min-width:0}
.phead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.phead h1{font-size:19px;font-weight:700}
.phead .sub{color:var(--mut);margin-top:2px;font-size:12px}

/* ---------- components ---------- */
.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);border-radius:8px;padding:14px 16px}
.panel.gold-b{border-color:var(--line)}
.panel h3{font-size:12.5px;font-weight:700;margin-bottom:10px}
.grid{display:grid;gap:12px}
.g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:1fr 1fr}
.g-main{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.g-trade{grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr)}
.stat{background:linear-gradient(180deg,#111722,#0c1017);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.stat .l{font-size:11px;color:var(--mut)}
.stat .v{font-size:23px;font-weight:700;margin-top:4px;letter-spacing:.2px}
.stat .d{font-size:10.5px;margin-top:3px;color:var(--green)}
.row{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.mt{margin-top:12px} .mt2{margin-top:20px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:6px;padding:8px 16px;font-weight:700;cursor:pointer;
  border:1px solid var(--gold);background:linear-gradient(180deg,#e0b246,#b88a25);color:#17120a;font-size:12.5px}
.btn:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn.ghost{background:rgba(212,166,58,.06);color:var(--gold2);border-color:var(--gold-d)}
.btn.danger{background:rgba(240,90,82,.08);color:var(--red);border-color:#8a3a36}
.btn.sm{padding:4px 14px;font-size:11.5px}
.btn.wide{width:100%}
.input,select.input{width:100%;background:#0a0d13;border:1px solid #232b3a;border-radius:6px;padding:9px 10px;color:var(--text);outline:none}
.input:focus{border-color:var(--gold)}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8a909c 50%),linear-gradient(135deg,#8a909c 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:26px}
label.f{display:block;font-size:11px;color:var(--mut2);margin:10px 0 4px}
.search{position:relative;min-width:210px}
.search input{padding-left:30px}
.search svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:14px;height:14px;stroke:var(--mut);fill:none;stroke-width:2}

table{width:100%;border-collapse:collapse}
th{font-size:10.5px;font-weight:600;color:var(--mut);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line2);white-space:nowrap;font-size:12px}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(212,166,58,.04)}
.tscroll{overflow-x:auto}
.who{display:flex;align-items:center;gap:9px}
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1.5px solid var(--gold);color:#fff;font-weight:700;flex:none}

.badge{display:inline-block;padding:2px 9px;border-radius:5px;font-size:10.5px;font-weight:600;border:1px solid}
.b-green{color:var(--green);border-color:#1f7a40;background:rgba(52,211,106,.08)}
.b-amber{color:var(--amber);border-color:#8a6a1f;background:rgba(230,168,46,.08)}
.b-red{color:var(--red);border-color:#8a3a36;background:rgba(240,90,82,.08)}
.b-grey{color:var(--mut2);border-color:#2b3342;background:rgba(255,255,255,.03)}
.role-Leader{background:linear-gradient(180deg,#e0b246,#b88a25);color:#17120a;border-color:#e0b246}
.role-Co-Leader{background:#c99a2e;color:#17120a;border-color:#c99a2e}
.role-Officer{background:rgba(212,166,58,.18);color:var(--gold2);border-color:var(--gold-d)}
.role-Member{background:rgba(255,255,255,.05);color:var(--mut2);border-color:#2b3342}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}
.dot.on{background:var(--green)} .dot.off{background:var(--red)}

.tabs{display:flex;gap:0;border-bottom:1px solid var(--line2);margin-bottom:14px;overflow-x:auto}
.tabs button{background:none;border:0;padding:9px 18px;color:var(--mut2);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;font-size:12px}
.tabs button.active{background:linear-gradient(180deg,#e0b246,#b88a25);color:#14100a;font-weight:700;border-radius:5px 5px 0 0}
.tabs.pill{border:0;gap:6px}
.tabs.pill button{border:1px solid var(--line2);border-radius:5px;padding:7px 16px}
.tabs.pill button.active{border-color:var(--gold)}

.pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;font-size:12px}
.pager button{min-width:26px;height:26px;border-radius:5px;background:none;border:1px solid transparent;color:var(--mut2);cursor:pointer}
.pager button:hover:not(:disabled){border-color:var(--gold-d)}
.pager button.cur{border-color:var(--gold);color:var(--gold2)}
.pager button:disabled{opacity:.35;cursor:default}
.pager-wrap{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:var(--mut);font-size:11.5px}
.pager-wrap .pager{margin:0}

.progress{height:9px;background:#1b212c;border-radius:6px;overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,#b88a25,#f0c75a);border-radius:6px}
.toggle{position:relative;width:38px;height:20px;border-radius:12px;background:#2a3140;border:0;cursor:pointer;flex:none}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#9aa1ad;transition:.15s}
.toggle.on{background:var(--gold-d)} .toggle.on::after{left:21px;background:var(--gold2)}
.empty{padding:26px;text-align:center;color:var(--mut)}
.kv{display:grid;grid-template-columns:110px 1fr;gap:8px 12px;font-size:12px}
.kv dt{color:var(--mut)} .kv dd{margin:0}
.list-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2)}
.list-item:last-child{border-bottom:0}
.list-item .t{flex:1;min-width:0}
.list-item .when{color:var(--mut);font-size:11px;min-width:56px}
.bars{display:flex;align-items:flex-end;gap:12px;height:170px;padding-top:10px}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bars .pair{display:flex;gap:3px;align-items:flex-end;height:100%;width:100%;justify-content:center}
.bars .pair i{width:38%;max-width:22px;border-radius:3px 3px 0 0;min-height:2px}
.bars small{color:var(--mut);font-size:10px}

/* ---------- toasts & modal ---------- */
#toasts{position:fixed;right:16px;bottom:16px;z-index:100;display:flex;flex-direction:column;gap:8px}
.toast{background:#121823;border:1px solid var(--line);border-left:3px solid var(--gold);padding:10px 14px;border-radius:6px;box-shadow:0 8px 24px #000a;max-width:320px;animation:in .15s}
.toast.err{border-left-color:var(--red)} .toast.ok{border-left-color:var(--green)}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.overlay{position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;z-index:90;padding:16px}
.modal{width:100%;max-width:430px;background:linear-gradient(180deg,#121823,#0c1017);border:1px solid var(--line);border-radius:10px;padding:18px 20px;max-height:92vh;overflow:auto}
.modal h2{font-size:16px;margin-bottom:6px}
.modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

/* ---------- login ---------- */
.login-page{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;position:relative;overflow:hidden;
  background:
   radial-gradient(900px 420px at 30% 105%,rgba(214,120,30,.55),transparent 65%),
   radial-gradient(700px 500px at 20% 40%,rgba(60,70,90,.45),transparent 70%),
   linear-gradient(180deg,#0a0c11,#07080b 70%)}
.login-page::before,.login-page::after{content:"";position:absolute;top:-40px;width:38%;height:62%;opacity:.5;
  background:linear-gradient(115deg,#151a22,#0b0d12);transform:skewX(-8deg);clip-path:polygon(0 0,100% 6%,92% 100%,0 92%)}
.login-page::before{left:-2%} .login-page::after{left:34%;opacity:.35}
.hero{position:relative;z-index:1;text-align:center;padding:40px}
.hero img{width:min(260px,52vw);filter:drop-shadow(0 8px 30px #000)}
.hero h1{font-size:clamp(30px,5vw,52px);letter-spacing:3px;font-weight:800;margin-top:8px;
  background:linear-gradient(180deg,#f7dc83,#b58420);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{letter-spacing:2px;font-weight:600;font-size:13px;margin-top:6px}
.login-card{position:relative;z-index:1;width:min(380px,92vw);justify-self:center;background:rgba(10,13,19,.88);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:10px;padding:26px 26px 22px}
.login-card h2{font-size:19px;font-weight:600}
.login-card .sub{color:var(--mut);font-size:12px;margin:4px 0 14px}
.login-card .err{color:var(--red);font-size:12px;margin-top:10px;min-height:16px}
.login-card .foot{text-align:center;color:var(--mut);font-size:11px;margin-top:16px}
.login-card .forgot{display:block;text-align:center;color:var(--gold);font-size:12px;margin-top:14px;cursor:pointer}

/* ---------- profile ---------- */
.pcard{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.pcard .big{width:78px;height:78px;font-size:34px;border-width:2px}
.pcard h2{font-size:19px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .g4{grid-template-columns:repeat(2,1fr)} .g-main,.g-trade,.g2{grid-template-columns:1fr}
  .login-page{grid-template-columns:1fr;padding:20px 0}
  .login-page::before,.login-page::after{display:none}
}
@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:56px;bottom:0;width:230px;z-index:25;transform:translateX(-100%);transition:.2s;box-shadow:10px 0 30px #000a}
  body.nav-open .side{transform:none}
  .main{padding:16px 14px 40px}
  .userbtn .meta{display:none}
  .g3{grid-template-columns:1fr}
}
@media (max-width:480px){.g4{grid-template-columns:1fr 1fr}.stat .v{font-size:18px}.brand span{font-size:13px}}

/* ---------- live badge ---------- */
.live{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:20px;padding:5px 12px;background:rgba(255,255,255,.03);font-size:11px;cursor:pointer;color:var(--mut2);white-space:nowrap}
.live i{width:8px;height:8px;border-radius:50%;background:#6b7280;flex:none}
.live.on{color:var(--green);border-color:#1f7a40}.live.on i{background:var(--green);box-shadow:0 0 0 0 rgba(52,211,106,.6);animation:pulse 1.8s infinite}
.live.wait{color:var(--amber);border-color:#8a6a1f}.live.wait i{background:var(--amber)}
.live.bad{color:var(--red);border-color:#8a3a36}.live.bad i{background:var(--red)}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(52,211,106,0)}100%{box-shadow:0 0 0 0 rgba(52,211,106,0)}}
@media (max-width:480px){.live span{max-width:84px;overflow:hidden;text-overflow:ellipsis}}