:root{
  --silver:#9DA3A9; --black:#0A0A0A; --deep:#0E2445; --blue:#1A8CCB; --electric:#1E7BFF;
  --slate:#1B2433; --steel:#3A4758; --white:#F5F7FA;
  --bg:#05080E; --panel:rgba(14,22,36,.72); --line:rgba(120,150,190,.16); --line2:rgba(120,150,190,.28);
  --up:#2BD67B; --down:#FF5A5F; --muted:#8A97A8; --gold:#C9A46A;
  --head:'Cinzel','Trajan Pro',serif; --ui:'Montserrat','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--ui);color:var(--white);background:var(--bg);font-size:13px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font-family:inherit;color:var(--white)}
.num{font-variant-numeric:tabular-nums}
.up{color:var(--up)} .down{color:var(--down)}
svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- background ---------- */
.atmo{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
   radial-gradient(1200px 600px at 75% -10%, rgba(30,123,255,.16), transparent 60%),
   radial-gradient(900px 500px at 0% 100%, rgba(14,36,69,.7), transparent 70%),
   linear-gradient(180deg,#060A12 0%,#04060B 100%);}
.atmo::after{content:"";position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(rgba(120,150,190,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,150,190,.05) 1px,transparent 1px);
  background-size:48px 48px;mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%)}

/* ---------- LOGIN ---------- */
#login{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity .7s ease, transform .7s ease}
#login.out{opacity:0;transform:scale(1.04);pointer-events:none}
.scene{position:absolute;inset:0;overflow:hidden}
.bgimg{position:absolute;inset:-2%;background:#05080E url(../assets/login-bg.jpg) center/cover no-repeat;animation:kb 28s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.06) translateX(-1%)}}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,6,12,.35),transparent 30%,transparent 70%,rgba(3,6,12,.7)),radial-gradient(60% 80% at 50% 50%,transparent 40%,rgba(3,6,12,.45))}
@media (min-width:1100px){#login{justify-content:flex-start;padding-left:5vw}
 .bgimg{background-position:12% center}
 .shade{background:linear-gradient(90deg,rgba(3,6,12,.55),rgba(3,6,12,.15) 32%,transparent 50%),linear-gradient(180deg,rgba(3,6,12,.3),transparent 30%,transparent 72%,rgba(3,6,12,.7))}}
@media (prefers-reduced-motion:reduce){.bgimg{animation:none}}
@media (max-width:680px){.tagline{letter-spacing:.22em;font-size:9px}}
.card{position:relative;width:min(380px,92vw);padding:38px 34px 30px;border-radius:18px;
  background:linear-gradient(160deg,rgba(40,60,90,.38),rgba(10,18,30,.66));
  border:1px solid rgba(160,190,230,.22);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(30,123,255,.05);text-align:center}
.card .logo{width:230px;max-width:80%;display:block;margin:0 auto 4px}
.card h2{font-family:var(--ui);font-weight:500;letter-spacing:.42em;font-size:12px;margin:14px 0 26px;color:#DDE3EA}
.field{position:relative;margin-bottom:14px}
.field input{width:100%;height:46px;border-radius:8px;border:1px solid var(--line2);background:rgba(5,10,18,.55);padding:0 42px 0 44px;font-size:13px;outline:none;transition:border-color .2s,box-shadow .2s}
.field input::placeholder{color:#9AA6B6}
.field input:focus{border-color:var(--electric);box-shadow:0 0 0 3px rgba(30,123,255,.18)}
.field .l{position:absolute;left:14px;top:14px;color:#AEB8C6}
.field .r{position:absolute;right:12px;top:12px;color:#AEB8C6;padding:2px}
.btn-primary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:46px;border-radius:8px;font-weight:500;font-size:14px;
  background:linear-gradient(180deg,#2F8BFF,#1462E0);box-shadow:0 8px 24px rgba(30,123,255,.35),inset 0 1px 0 rgba(255,255,255,.25);transition:filter .2s,transform .1s}
.btn-primary:hover{filter:brightness(1.12)} .btn-primary:active{transform:translateY(1px)}
.link{color:#DDE3EA;text-decoration:underline;text-underline-offset:3px;font-size:12px;display:inline-block;margin:16px 0 4px}
.or{display:flex;align-items:center;gap:12px;color:#AEB8C6;margin:14px 0 16px;font-size:12px}
.or::before,.or::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line2),transparent)}
.bio{display:inline-flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;color:#DDE3EA}
.bio .ring{width:46px;height:46px;border-radius:10px;border:1px solid rgba(30,123,255,.6);display:grid;place-items:center;color:#4BA3FF;
  background:rgba(30,123,255,.08);box-shadow:0 0 18px rgba(30,123,255,.35);position:relative;overflow:hidden}
.bio .ring svg{width:26px;height:26px}
.bio.scan .ring::after{content:"";position:absolute;left:0;right:0;height:2px;background:#6FB8FF;box-shadow:0 0 10px #6FB8FF;animation:scan 1s ease-in-out infinite}
@keyframes scan{0%{top:0}50%{top:44px}100%{top:0}}
.msg{min-height:16px;font-size:11.5px;color:#9FB4CF;margin-top:12px}
.tagline{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:10.5px;letter-spacing:.5em;color:#7E8A9A}
.demo-chip{position:absolute;top:18px;right:18px;font-size:10.5px;letter-spacing:.18em;padding:6px 12px;border:1px solid rgba(201,164,106,.5);color:var(--gold);border-radius:20px;background:rgba(0,0,0,.35)}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ---------- APP ---------- */
#app{position:relative;z-index:1;min-height:100vh;padding:18px;opacity:0;transition:opacity .8s ease .15s}
#app.on{opacity:1}
.shell{max-width:1480px;margin:0 auto;border:1px solid var(--line2);border-radius:18px;background:rgba(6,10,17,.78);
  box-shadow:0 30px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden}
header.top{display:flex;align-items:center;gap:22px;height:64px;padding:0 22px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{height:26px;mix-blend-mode:screen}
nav.main{display:flex;gap:6px;margin-left:36px;overflow-x:auto;scrollbar-width:none}
nav.main::-webkit-scrollbar{display:none}
nav.main button{padding:8px 18px;border-radius:7px;font-size:13px;color:#C9D2DE;white-space:nowrap;border:1px solid transparent;transition:.2s}
nav.main button:hover{color:#fff;background:rgba(255,255,255,.04)}
nav.main button.on{color:#fff;background:linear-gradient(180deg,rgba(30,123,255,.35),rgba(20,80,180,.25));border-color:rgba(60,140,255,.7);box-shadow:0 0 16px rgba(30,123,255,.25)}
.tools{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.iconbtn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#D7DEE8;position:relative;transition:.2s}
.iconbtn:hover{background:rgba(255,255,255,.06)}
.iconbtn .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:#2F8BFF;box-shadow:0 0 8px #2F8BFF}
.avatar{width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font-size:12px;background:rgba(255,255,255,.04)}
.search{display:flex;align-items:center;gap:8px;height:36px;border-radius:18px;border:1px solid var(--line2);padding:0 12px;width:0;opacity:0;overflow:hidden;transition:width .3s,opacity .3s}
.search.open{width:200px;opacity:1}
.search input{background:none;border:0;outline:none;font-size:12.5px;width:100%}

.body{display:grid;grid-template-columns:200px 1fr;min-height:calc(100vh - 36px - 64px)}
aside.side{border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:2px}
aside.side button{display:flex;align-items:center;gap:12px;height:38px;padding:0 14px;border-radius:7px;color:#C9D2DE;font-size:13px;text-align:left;transition:.2s;border:1px solid transparent}
aside.side button:hover{background:rgba(255,255,255,.04);color:#fff}
aside.side button.on{color:#fff;background:linear-gradient(90deg,rgba(30,123,255,.38),rgba(30,123,255,.06));border-color:rgba(60,140,255,.45)}
aside.side .spacer{flex:1}
.live{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);padding:10px 14px}
.live i{width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 8px var(--up);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}

main{padding:18px;display:flex;flex-direction:column;gap:16px;min-width:0}
.view{display:none;flex-direction:column;gap:16px;animation:fade .45s ease}
.view.on{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.panel{background:linear-gradient(170deg,rgba(22,34,54,.62),rgba(8,13,22,.8));border:1px solid var(--line2);border-radius:10px;padding:16px 18px;position:relative;min-width:0}
.panel h3{font-weight:500;font-size:13.5px;margin-bottom:12px;color:#E7ECF2}
.kpis{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:14px}
.kpi .lab{font-size:12px;color:#D2DAE4}
.kpi .val{font-size:24px;font-weight:400;margin-top:8px;letter-spacing:.01em}
.kpi .sub{font-size:11.5px;margin-top:6px}
.kpi .mini{position:absolute;right:14px;bottom:14px;width:46%;height:46px}
.kpi.small .mini{width:34px;height:30px}
.flash-up{animation:fu .8s} .flash-down{animation:fd .8s}
@keyframes fu{0%{color:#7CFFB5;text-shadow:0 0 10px rgba(43,214,123,.6)}}
@keyframes fd{0%{color:#FF9A9D;text-shadow:0 0 10px rgba(255,90,95,.6)}}

.row2{display:grid;grid-template-columns:1fr 290px;gap:14px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.tabs{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tabs button{padding:6px 12px;border-radius:6px;font-size:12px;color:#C9D2DE;border:1px solid transparent}
.tabs button.on{background:rgba(30,123,255,.3);border-color:rgba(60,140,255,.7);color:#fff}
.ranges{display:flex;gap:4px;justify-content:flex-end;margin:10px 0 2px}
.ranges button{padding:4px 8px;border-radius:5px;font-size:11px;color:#B8C3D1}
.ranges button.on{background:rgba(30,123,255,.35);color:#fff;box-shadow:0 0 0 1px rgba(60,140,255,.7)}
.chartbox{position:relative;height:250px}
.chartbox svg{width:100%;height:100%;display:block}
.tip{position:absolute;pointer-events:none;background:rgba(6,12,22,.92);border:1px solid var(--line2);border-radius:6px;padding:6px 9px;font-size:11.5px;white-space:nowrap;transform:translate(-50%,-120%);opacity:0;transition:opacity .15s}
.tip b{font-weight:500}

table{width:100%;border-collapse:collapse}
td,th{padding:9px 6px;font-size:12.5px;text-align:right;white-space:nowrap}
th{font-weight:500;color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--line)}
td:first-child,th:first-child{text-align:left}
tbody tr{transition:background .2s}
tbody tr.click{cursor:pointer}
tbody tr.click:hover{background:rgba(30,123,255,.07)}
.watch td{padding:11px 4px}
.watch td.sp{width:64px}
.sparksvg{width:60px;height:20px;display:block;margin-left:auto}

.alloc{display:flex;align-items:center;gap:20px}
.donut{width:104px;height:104px;flex:none;position:relative}
.donut .c{position:absolute;inset:0;display:grid;place-items:center;font-size:15px}
.legend{flex:1;display:flex;flex-direction:column;gap:9px;font-size:12px}
.legend div{display:flex;align-items:center;gap:8px}
.legend i{width:8px;height:8px;border-radius:50%}
.legend span:last-child{margin-left:auto}

.qa{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qa button{height:76px;border-radius:8px;border:1px solid var(--line2);background:rgba(255,255,255,.02);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:12px;transition:.2s}
.qa button:hover{border-color:rgba(60,140,255,.7);background:rgba(30,123,255,.1);box-shadow:0 0 18px rgba(30,123,255,.2)}
.qa svg.i{width:22px;height:22px}
.trade-row-new{animation:newrow 1.6s ease}
@keyframes newrow{0%{background:rgba(30,123,255,.3)}100%{background:transparent}}

/* trade page */
.tradegrid{display:grid;grid-template-columns:1fr 340px;gap:14px}
.ticket label{display:block;font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin:14px 0 6px}
.ticket select,.ticket input{width:100%;height:42px;border-radius:7px;border:1px solid var(--line2);background:rgba(5,10,18,.6);padding:0 12px;font-size:13.5px;outline:none}
.ticket select:focus,.ticket input:focus{border-color:var(--electric)}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line2);border-radius:7px;overflow:hidden}
.seg button{height:40px;font-size:13px;color:#C9D2DE}
.seg button.buy.on{background:rgba(43,214,123,.18);color:var(--up)}
.seg button.sell.on{background:rgba(255,90,95,.18);color:var(--down)}
.sum{display:flex;justify-content:space-between;margin-top:14px;font-size:12.5px;color:#C9D2DE}
.sum b{font-weight:500;color:#fff}
.book td{padding:4px 6px;font-size:12px;position:relative}
.book .bar{position:absolute;top:2px;bottom:2px;right:0;opacity:.14;border-radius:2px}
.secondary{height:42px;border-radius:7px;border:1px solid var(--line2);padding:0 18px;font-size:13px}
.secondary:hover{border-color:#fff}

.placeholder{display:grid;place-items:center;text-align:center;min-height:360px;color:var(--muted)}
.placeholder h2{font-family:var(--head);font-weight:500;letter-spacing:.2em;color:#E7ECF2;font-size:20px;margin-bottom:10px}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pagehead h1{font-family:var(--head);font-weight:500;letter-spacing:.18em;font-size:20px}
.pagehead p{color:var(--muted);font-size:12px;margin-top:4px}
.filter{height:34px;border-radius:7px;border:1px solid var(--line2);background:rgba(5,10,18,.6);padding:0 12px;outline:none;font-size:12.5px;width:220px}
.pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;border:1px solid var(--line2);color:#C9D2DE}

/* modal / toast / dropdown */
.modal{position:fixed;inset:0;z-index:40;background:rgba(2,4,8,.6);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:16px}
.modal.on{display:flex;animation:fade .25s}
.modal .panel{width:min(400px,100%);padding:24px}
.modal h3{font-family:var(--head);letter-spacing:.14em;font-size:16px;font-weight:500;margin-bottom:6px}
.modal .x{position:absolute;top:14px;right:14px;color:var(--muted)}
.toast{position:fixed;right:22px;bottom:22px;z-index:50;display:flex;flex-direction:column;gap:8px}
.toast div{background:rgba(10,18,30,.95);border:1px solid var(--line2);border-left:3px solid var(--electric);padding:12px 16px;border-radius:8px;font-size:12.5px;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:fade .3s}
.dropdown{position:absolute;top:56px;right:20px;z-index:30;width:300px;display:none}
.dropdown.on{display:block;animation:fade .2s}
.dropdown .panel{padding:12px 14px;background:rgba(8,14,24,.97)}
.note{padding:9px 2px;border-bottom:1px solid var(--line);font-size:12px;line-height:1.45}
.note:last-child{border:0}
.note small{color:var(--muted);display:block}
.usermenu button{display:block;width:100%;text-align:left;padding:9px 4px;font-size:12.5px;color:#D7DEE8}
.usermenu button:hover{color:#fff}
.demo-strip{text-align:center;font-size:10.5px;letter-spacing:.32em;color:#6E7B8C;padding:14px 0 0}

/* responsive */
@media (max-width:1180px){
  .body{grid-template-columns:64px 1fr}
  aside.side button span,.live span{display:none}
  aside.side button{justify-content:center;padding:0}
  .live{justify-content:center;padding:10px 0}
  .kpis{grid-template-columns:1fr 1fr}
  .row3{grid-template-columns:1fr 1fr}
  .row3>.panel:last-child{grid-column:1/-1}
  nav.main{margin-left:10px}
}
@media (max-width:900px){
  .row2,.tradegrid{grid-template-columns:1fr}
  .search.open{width:140px}
}
@media (max-width:680px){
  #app{padding:0}
  .shell{border-radius:0;border:0}
  header.top{gap:8px;padding:0 12px;height:auto;flex-wrap:wrap;padding-top:10px}
  nav.main{order:3;width:100%;margin:0 0 8px}
  .body{grid-template-columns:1fr}
  aside.side{display:none}
  main{padding:12px}
  .kpis,.row3{grid-template-columns:1fr}
  .kpi .val{font-size:21px}
  .chartbox{height:210px}
  .hide-m{display:none}
}

.err{color:#FF8A8E!important}