:root{
  --bg:#0b0f14;
  --panel:#0d1218;
  --panel2:#10161d;
  --surface:#131a22;
  --line:#202a33;
  --line2:#18222b;
  --text:#d7dde3;
  --text-strong:#f0f3f5;
  --muted:#7d8993;
  --muted2:#66727c;
  --cyan:#00c9d7;
  --cyan-soft:rgba(0,201,215,.11);
  --green:#22c997;
  --red:#f04455;
  --amber:#e0ad19;
  --shadow:0 10px 30px rgba(0,0,0,.28);
  --font-ui:-apple-system,BlinkMacSystemFont,"Trebuchet MS",Roboto,Ubuntu,"Segoe UI",Arial,sans-serif;
  --font-num:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:12px;line-height:1.35;overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{outline:1px solid var(--cyan);outline-offset:1px}
.app{height:100vh;display:grid;grid-template-rows:58px minmax(0,1fr);background:var(--bg)}

/* top */
.topbar{display:flex;align-items:center;gap:10px;padding:0 10px;border-bottom:1px solid var(--line);background:#090d12;min-width:0}
.brand{display:flex;align-items:center;gap:8px;min-width:218px}
.mark{width:34px;height:34px;border:1.5px solid var(--cyan);border-radius:6px;position:relative;transform:skew(-7deg);box-shadow:0 0 14px rgba(0,201,215,.08)}
.mark:before,.mark:after{content:"";position:absolute;left:7px;width:18px;height:1.5px;background:var(--cyan);top:16px}
.mark:before{transform:rotate(42deg)}
.mark:after{transform:rotate(-42deg)}
.brandcopy b{font-size:18px;font-weight:650;letter-spacing:.35px;line-height:18px;white-space:nowrap;color:#f2f5f7}
.brandcopy span{display:block;color:var(--cyan);font-size:7px;font-weight:600;letter-spacing:4.2px;margin-top:3px}
.demo{border:1px solid #7b6000;background:#171304;color:#e7b91f;border-radius:4px;padding:3px 7px;font-size:9px;font-weight:650;letter-spacing:.2px}
.build-version{font-size:9px;color:#6f7b85;letter-spacing:.2px;white-space:nowrap;margin-left:-2px;user-select:none;font-weight:500}
.nav{display:flex;align-items:center;gap:1px;white-space:nowrap;min-width:0;height:100%}
.nav button{height:32px;border:0;background:transparent;color:#9aa6af;padding:0 10px;border-radius:7px;font-size:10px;font-weight:500;letter-spacing:.08px}
.nav button:hover{background:#10171e;color:#d7dde3}
.nav button.active{background:#151d25;color:#f2f4f6}
.nav button.bot{color:#16cfb6}
.flex{flex:1}
.kyc{border:1px solid #765d00;background:#171304;color:#e6b91d;padding:4px 7px;border-radius:4px;font-size:8px;font-weight:650;white-space:nowrap;letter-spacing:.15px}
.metrics{display:flex;gap:16px;white-space:nowrap;align-items:center}
.metric small{display:block;font-size:7px;color:#68747e;letter-spacing:.55px;font-weight:600;margin-bottom:1px}
.metric strong{font-family:var(--font-num);font-size:10px;font-weight:600;color:#e1e6ea;font-variant-numeric:tabular-nums}
.metric strong.positive{color:var(--green)}
.metric strong.negative{color:var(--red)}
.topicons{display:flex;gap:5px}
.sq{width:29px;height:29px;border:1px solid var(--line);background:#0d1319;color:#9aa8b2;border-radius:5px;padding:0}
.sq:hover{background:#141c23;color:#e2e7ea;border-color:#2b3944}

/* work area */
.terminal{min-height:0;display:grid;grid-template-columns:196px minmax(620px,1fr) 258px;grid-template-rows:minmax(0,1fr) 286px;background:var(--bg)}
.watchlist{grid-row:1/3;background:var(--panel);border-right:1px solid var(--line);min-height:0;position:relative;transition:.18s width}
.watch-head{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;border-bottom:1px solid var(--line);font-size:9px;font-weight:600;letter-spacing:.35px;color:#89959f}
.plus{width:21px;height:21px;border:1px solid var(--line);background:transparent;color:#9eabb4;border-radius:4px;padding:0}
.plus:hover{background:#151d25;color:#fff}
.watch-row{height:70px;padding:8px 8px 7px;border-bottom:1px solid var(--line2);cursor:pointer;position:relative;transition:background .12s ease}
.watch-row:hover{background:#111820}
.watch-row.selected{background:#121a22}
.watch-row.selected:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--cyan)}
.wtop,.wmid,.wlow{display:flex;justify-content:space-between;gap:7px;align-items:center}
.wtop{font-size:10px;font-weight:600;color:#e3e7ea}
.wmid{font-family:var(--font-num);font-size:9px;color:#c9d0d5;margin-top:7px;font-variant-numeric:tabular-nums}
.wlow{font-family:var(--font-num);font-size:8px;color:#65727c;margin-top:5px;font-variant-numeric:tabular-nums}
.up{color:var(--green)}.down{color:var(--red)}
.watch-collapse{position:absolute;right:-9px;top:50%;transform:translateY(-50%);width:9px;height:24px;padding:0;border:1px solid #34424d;background:#111820;color:#8997a1;border-radius:0 5px 5px 0;z-index:20;font-size:9px;line-height:20px}
.watch-collapse:hover{background:#18222b;color:#fff}
.terminal.watch-hidden{grid-template-columns:0 minmax(620px,1fr) 258px}
.terminal.watch-hidden .watchlist{overflow:visible;border-right:0}
.terminal.watch-hidden .watch-head,.terminal.watch-hidden #watchRows{display:none}
.terminal.watch-hidden .watch-collapse{right:-9px}

/* chart */
.chart-shell{min-width:0;min-height:0;display:grid;grid-template-rows:39px minmax(0,1fr) 34px;background:#0d1117;border-right:1px solid var(--line);position:relative}
.chart-top{display:flex;align-items:center;gap:2px;padding:0 8px;border-bottom:1px solid var(--line);background:#0b1016}
.chart-button,.chart-select{height:28px;border:0;background:transparent;color:#96a2ac;border-radius:5px;padding:0 8px;font-size:10px;font-weight:500}
.chart-button:hover,.chart-select:hover{background:#151c23;color:#e7ebee}
.chart-select{outline:0;color:#c8d0d6}
.chart-select option{background:#121820;color:#d4dae0}
.vline{width:1px;height:18px;background:#25313a;margin:0 4px}
.chart-area{position:relative;min-height:0;overflow:hidden;user-select:none;cursor:crosshair;background:#0d1117}
#chart{position:absolute;inset:0;width:100%;height:100%;display:block}
.chart-info{position:absolute;left:10px;top:8px;z-index:4;font-size:10px;pointer-events:none;color:#cdd4d9;font-weight:500;letter-spacing:.02px}
.chart-info b{font-weight:600;color:#eef1f3}
.chart-info span{color:#16b8b0;margin-left:5px;font-family:var(--font-num);font-size:9px;font-weight:500;font-variant-numeric:tabular-nums}
.price-badge{position:absolute;right:0;top:55%;transform:translateY(-50%);z-index:4;background:#168b87;color:#fff;font-family:var(--font-num);font-size:9px;font-weight:600;padding:3px 6px;pointer-events:none;font-variant-numeric:tabular-nums}
.cross-label{position:absolute;z-index:5;background:#1b232b;color:#d5dbe0;border:1px solid #32404a;padding:2px 5px;font-family:var(--font-num);font-size:8px;display:none;pointer-events:none;font-variant-numeric:tabular-nums}
.chart-bottom{display:flex;align-items:center;justify-content:space-between;padding:0 9px;border-top:1px solid var(--line);background:#0b1016;color:#8f9ca5;font-size:9px}
.range-buttons,.chart-status{display:flex;gap:12px;align-items:center}
.range-buttons button{border:0;background:transparent;color:#8f9aa4;font-size:9px;font-weight:500;padding:4px 2px}
.range-buttons button:hover{color:#fff}
.chart-status{font-family:var(--font-num);font-variant-numeric:tabular-nums}

/* popovers */
.popover{position:absolute;top:42px;z-index:30;width:210px;background:#121820;border:1px solid #2a3741;border-radius:6px;box-shadow:var(--shadow);display:none;overflow:hidden}
.popover.open{display:block}
.popover h4{margin:0;padding:9px 10px;font-size:9px;font-weight:600;letter-spacing:.35px;color:#7d8993;border-bottom:1px solid var(--line)}
.popover button{display:flex;width:100%;align-items:center;justify-content:space-between;border:0;background:transparent;color:#c1c9cf;padding:9px 10px;font-size:10px;text-align:left}
.popover button:hover,.popover button.on{background:#1a232b;color:#fff}
#drawMenu{left:64px}#indicatorMenu{left:142px}
.draw-active{color:var(--cyan)!important;background:var(--cyan-soft)!important}

/* ticket */
.ticket{background:var(--panel);min-height:0}
.ticket-head{height:48px;padding:7px 10px;border-bottom:1px solid var(--line)}
.ticket-titleline{display:flex;justify-content:space-between;align-items:center}
.ticket-title{font-size:9px;font-weight:600;letter-spacing:.35px;color:#7e8a94}
.pair{font-size:10px;font-weight:600;margin-top:7px;color:#e5e9ec}
.oneclick{border:1px solid var(--line);background:transparent;color:#8f9ca6;padding:4px 7px;border-radius:4px;font-size:8px;font-weight:500}
.oneclick:hover{background:#151d25;color:#fff}
.ticket-body{padding:10px}
.order-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.order-tabs button{height:29px;border:1px solid var(--line);background:#0c1218;color:#8d99a3;border-radius:4px;font-size:9px;font-weight:550}
.order-tabs button:hover{background:#151d25;color:#dfe4e8}
.order-tabs button.active{border-color:var(--cyan);background:var(--cyan-soft);color:#58e2eb}
.field{margin-top:11px}
.field label{display:block;color:#74818b;font-size:8px;font-weight:600;letter-spacing:.25px;margin-bottom:5px}
.field input{width:100%;height:32px;border:1px solid var(--line);border-radius:4px;background:#0a0f14;color:#d8dee3;padding:0 8px;font-family:var(--font-num);font-size:10px;outline:0;font-variant-numeric:tabular-nums}
.field input:hover{border-color:#2a3943}
.field input:focus{border-color:#3c6470;box-shadow:0 0 0 1px rgba(0,201,215,.08)}
.entry-field{display:none}.ticket.mode-pending .entry-field{display:block}
.summary{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:11px;padding:7px 0}
.sumrow{display:flex;justify-content:space-between;color:#77848e;font-size:9px;padding:4px 0}
.sumrow b{font-family:var(--font-num);color:#dce2e6;font-size:9px;font-weight:600;font-variant-numeric:tabular-nums}
.trade-row{display:grid;grid-template-columns:1fr 76px 1fr;gap:5px;margin-top:10px}
.sell,.buy{height:39px;border:0;border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.15px;color:#fff}
.sell{background:#ea3f50}.sell:hover{background:#f04a5a}
.buy{background:#1ebf8d}.buy:hover{background:#26cb97}
.sell span,.buy span{font-family:var(--font-num);font-size:9px;font-variant-numeric:tabular-nums}
.qty{display:grid;grid-template-columns:22px 1fr 22px;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#0a0f14}
.qty button,.qty span{border:0;background:transparent;color:#c7d0d6;display:grid;place-items:center;font-size:9px}
.qty button:hover{background:#151d25;color:#fff}
.qty span{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.ticket-note{font-size:8px;color:#65727c;margin-top:7px;line-height:1.4}

/* bottom */
.bottom{grid-column:2/4;background:var(--panel);border-top:1px solid var(--line);min-height:0;display:grid;grid-template-rows:38px minmax(0,1fr)}
.bottom-tabs{display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--line);padding:0 10px}
.bottom-tab{height:38px;display:flex;align-items:center;color:#77848e;font-size:9px;font-weight:550;position:relative;cursor:pointer}
.bottom-tab:hover{color:#cdd4d9}
.bottom-tab.active{color:#eef2f4}
.bottom-tab.active:after{content:"";position:absolute;height:2px;background:var(--cyan);left:0;right:0;bottom:0}
.panel-body{min-height:0;overflow:auto}
.empty{height:100%;display:grid;place-items:center;text-align:center;color:#72808a}
.emptyicon{width:36px;height:36px;border:1px solid #2a3943;border-radius:50%;display:grid;place-items:center;margin:0 auto 9px;color:#75848e;background:#0e141a}
.empty b{display:block;color:#dce2e6;font-size:10px;font-weight:600}
.empty p{font-size:9px;line-height:1.5;margin:7px 0 0;color:#6c7983}
.data-table{width:100%;border-collapse:collapse;font-size:9px}
.data-table th{position:sticky;top:0;background:#0d1319;color:#707d87;font-weight:600;text-align:left;height:32px;padding:0 8px;border-bottom:1px solid var(--line);letter-spacing:.2px}
.data-table td{padding:8px;border-bottom:1px solid var(--line2);color:#c5cdd3;white-space:nowrap;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.data-table tr:hover td{background:#101820}
.data-table td.green{color:var(--green)}.data-table td.red{color:var(--red)}
.small-action{border:1px solid #2a3942;background:transparent;color:#9eaab3;border-radius:4px;padding:4px 7px;font-size:8px;font-family:var(--font-ui)}
.small-action:hover{border-color:#40515c;color:#fff;background:#151d25}
.side-buy{color:var(--green);font-weight:700}.side-sell{color:var(--red);font-weight:700}

/* modal/toast */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.58);display:none;place-items:center;z-index:80}.modal-backdrop.open{display:grid}
.modal{width:320px;background:#121820;border:1px solid #2a3741;border-radius:7px;box-shadow:var(--shadow);padding:14px}
.modal h3{font-size:13px;font-weight:600;margin:0 0 8px;color:#eef2f4}.modal p{font-size:10px;color:#8e9ba5;line-height:1.45;margin:0}
.modal-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:13px}.modal-actions button{border:1px solid var(--line);background:#0d141a;color:#b9c3ca;padding:6px 10px;border-radius:4px;font-size:9px}.modal-actions .confirm{border-color:#168d96;color:#4bdce6}
.toast{position:fixed;right:18px;bottom:18px;z-index:90;background:#121a21;border:1px solid #2b3d47;color:#cbd4da;padding:9px 12px;border-radius:6px;font-size:9px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:.18s;pointer-events:none}.toast.show{opacity:1;transform:none}

/* full chart */
body.full-chart .topbar,body.full-chart .watchlist,body.full-chart .ticket,body.full-chart .bottom{display:none}
body.full-chart .app{grid-template-rows:1fr}
body.full-chart .terminal{display:block}
body.full-chart .chart-shell{height:100vh;border:0}

/* tablet / mobile */
@media(max-width:1250px){
  .brand{min-width:188px}.nav button{padding:0 7px}.metrics{gap:10px}.metrics .metric:nth-child(n+5){display:none}
  .terminal{grid-template-columns:180px minmax(520px,1fr) 235px}
}
@media(max-width:900px){
  html,body{overflow:auto}.app{height:auto;min-height:100vh}.topbar{height:auto;min-height:64px;flex-wrap:wrap;padding:8px}.nav{order:3;width:100%;overflow:auto;height:34px}.metrics{margin-left:auto}
  .terminal{display:flex;flex-direction:column}.watchlist{height:250px;border-right:0;border-bottom:1px solid var(--line)}.watch-collapse{display:none}
  .chart-shell{height:560px;border-right:0}.ticket{height:auto;border-top:1px solid var(--line)}.bottom{height:330px;grid-column:auto}
}