:root{
  --bg:#f5f6f8; --panel:#ffffff; --line:#e6e8ec; --line2:#eef0f3;
  --text:#1b1d22; --muted:#8a909c; --muted2:#aab0bb;
  --blue:#2f6bff; --blue-soft:#eaf0ff;
  --up:#00b25b; --dn:#f5475b;
  --buy:#12b76a; --buy-d:#0e9d5a; --sell:#f5475b; --sell-d:#dc3b4e;
  --rail:#1b1d22; --rail-ic:#8b93a4;
  --shadow:0 1px 3px rgba(20,25,40,.06);
  font-size:13px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); overflow:hidden;
}
b{font-weight:600}
.up{color:var(--up)!important}
.dn{color:var(--dn)!important}
.hidden{display:none!important}

/* ---------- top nav ---------- */
.topnav{
  height:48px; background:var(--panel); border-bottom:1px solid var(--line);
  display:flex; align-items:center; padding:0 16px; gap:16px; position:relative; z-index:5;
}
.logo{font-weight:700; font-size:16px; color:#0a66ff; white-space:nowrap}
.logo-sim{color:var(--muted); font-weight:500; font-size:13px}
.nav-left{width:200px}
.nav-center{flex:1; display:flex; justify-content:center; align-items:center; gap:12px}
.nav-right{width:260px; text-align:right}
.acct{color:var(--text); font-size:13px; cursor:default}
.search-box{
  display:flex; align-items:center; gap:8px; background:#f1f2f5; border:1px solid var(--line);
  border-radius:8px; padding:6px 12px; width:320px;
}
.search-box .ic{color:var(--muted)}
.search-box input{border:0; background:transparent; outline:0; width:100%; font-size:13px}
.loader-controls{display:flex; align-items:center; gap:6px}
.loader-controls input[type=date]{
  border:1px solid var(--line); border-radius:8px; padding:6px 8px; background:#f1f2f5; font-size:13px;
}
.loader-controls button{
  border:1px solid var(--line); background:#f1f2f5; border-radius:8px; padding:6px 10px; cursor:pointer; font-size:13px;
}
.load-btn{background:var(--blue)!important; color:#fff; border-color:var(--blue)!important; font-weight:600}
.load-btn:hover{background:#1c56ec!important}

/* ---------- app grid ---------- */
.app{display:flex; height:calc(100vh - 48px)}
.rail{
  width:52px; background:var(--rail); display:flex; flex-direction:column; align-items:center;
  padding-top:10px; gap:6px; flex:0 0 52px;
}
.rail-ic{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; color:var(--rail-ic); font-size:18px; cursor:pointer;
}
.rail-ic.active,.rail-ic:hover{background:#2a2d35; color:#fff}
.rail-ic.active{box-shadow:inset 2px 0 0 var(--blue)}

/* profile full page */
.profile-page{flex:1; overflow-y:auto; background:var(--bg)}
.pf-wrap{max-width:900px; margin:0 auto; padding:28px 24px 60px}
.pf-topbar{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px}
.pf-title{font-size:24px; font-weight:700; margin:0}
.pf-who{color:var(--muted); font-size:13px}
.pf-card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:16px; box-shadow:var(--shadow)}
.pf-card-h{font-weight:700; font-size:14px; margin-bottom:12px}
.pf-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.pf-stat{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 0; font-size:13px; border-bottom:1px solid var(--line2)}
.pf-stat:last-child{border-bottom:0}
.pf-stat span{color:var(--muted)}
.pf-stat b{font-variant-numeric:tabular-nums}
.pf-stat.big{margin-top:4px}
.pf-stat.big span{color:var(--text); font-weight:600}
.pf-stat.big b{font-size:20px}
.g-btn{
  display:inline-flex; align-items:center; gap:12px; background:#fff; color:#3c4043;
  border:1px solid #dadce0; border-radius:8px; padding:10px 18px; font-size:14px; font-weight:600;
  cursor:pointer; font-family:inherit;
}
.g-btn:hover{background:#f8f9fa; box-shadow:0 1px 2px rgba(60,64,67,.15)}
.pf-hint{font-size:11.5px; color:var(--muted); margin-top:8px; line-height:1.5}
.pf-hint code{background:#f1f2f5; padding:1px 5px; border-radius:4px; font-size:11px}
.pf-hint a{color:var(--blue); text-decoration:none}
.pf-or{display:flex; align-items:center; text-align:center; color:var(--muted2); font-size:11px; margin:14px 0}
.pf-or::before,.pf-or::after{content:""; flex:1; height:1px; background:var(--line2)}
.pf-or span{padding:0 12px}
.pf-signed-user{display:flex; align-items:center; gap:10px; font-size:14px}
.pf-avatar{width:34px; height:34px; border-radius:50%; object-fit:cover}
.pf-login{display:flex; gap:10px; flex-wrap:wrap}
.pf-login input{flex:1; min-width:160px; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:13px; background:#fff}
.pf-login input:focus{border-color:var(--blue); outline:0}
.pf-signed{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px}
.pf-btn{border:0; background:var(--blue); color:#fff; font-weight:600; border-radius:8px; padding:10px 18px; cursor:pointer; font-size:13px}
.pf-btn:hover{background:#1c56ec}
.pf-btn.ghost{background:#eef0f3; color:var(--text)}
.pf-btn.ghost:hover{background:#e3e6eb}
@media (max-width:760px){ .pf-grid{grid-template-columns:1fr} }

/* ---------- center ---------- */
.center{flex:1; display:flex; flex-direction:column; min-width:0; background:var(--panel); position:relative}

/* drawing tools menu */
.draw-menu{
  position:absolute; z-index:20; background:#fff; border:1px solid var(--line);
  border-radius:10px; box-shadow:0 8px 28px rgba(20,25,40,.14); padding:6px; min-width:210px;
}
.draw-item{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:7px;
  font-size:13px; color:var(--text); cursor:pointer; white-space:nowrap;
}
.draw-item:hover{background:#f1f2f5}
.draw-item .di{width:18px; text-align:center; color:var(--muted)}
.draw-item.active{background:var(--blue-soft); color:var(--blue)}
.tf-toggle.active{color:var(--blue); font-weight:700}
#drawLayer{position:absolute; left:0; top:0; z-index:5}
.chart-head{
  display:flex; align-items:center; justify-content:space-between;
  height:38px; border-bottom:1px solid var(--line); padding:0 14px;
}
.tab{font-weight:600; padding:8px 4px; border-bottom:2px solid var(--blue); color:var(--text)}
.replay-status{color:var(--muted); font-size:12px}

.quote-strip{display:flex; align-items:baseline; gap:12px; padding:8px 14px 2px}
.qs-sym{font-weight:700; font-size:15px}
.qs-price{font-weight:700; font-size:15px}
.qs-chg{font-weight:600; font-size:13px}
.qs-session{color:var(--muted); font-size:12px; margin-left:6px}

.tf-row{display:flex; align-items:center; gap:2px; padding:2px 14px; border-bottom:1px solid var(--line2)}
.tf-row span{padding:4px 8px; font-size:12px; color:var(--muted); cursor:pointer; border-radius:6px}
.tf-row span:hover{background:#f1f2f5}
.tf-row span.active{color:var(--blue); font-weight:700}
.tf-sep{flex:1}
.tf-toggle{color:var(--text)!important}
.tf-toggle:hover{background:#f1f2f5}

.ohlc-row{display:flex; gap:16px; padding:6px 14px; font-size:12px; color:var(--muted); border-bottom:1px solid var(--line2)}
.ohlc-row b{color:var(--text)}
.ohlc-chg{font-weight:600}

.chart{flex:1; min-height:120px; position:relative}

/* ---------- transport ---------- */
.transport{
  display:flex; align-items:center; gap:8px; padding:6px 14px;
  border-top:1px solid var(--line); background:#fafbfc;
}
.transport button{
  border:1px solid var(--line); background:#fff; border-radius:6px; width:30px; height:28px;
  cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center;
}
.transport button:hover{background:#f1f2f5}
.transport button.play{background:var(--blue); color:#fff; border-color:var(--blue); width:34px}
.transport select{border:1px solid var(--line); border-radius:6px; height:28px; padding:0 6px; background:#fff}
.scrub{flex:1; accent-color:var(--blue)}
.clock{font-variant-numeric:tabular-nums; color:var(--muted); width:52px; text-align:center; font-size:12px}

/* ---------- blotter ---------- */
.blotter{height:170px; border-top:1px solid var(--line); display:flex; flex-direction:column}
.blotter-tabs{display:flex; gap:14px; padding:8px 14px; border-bottom:1px solid var(--line2)}
.bt{font-size:12px; color:var(--muted); cursor:pointer; padding-bottom:4px}
.bt.active{color:var(--text); font-weight:600; border-bottom:2px solid var(--blue)}
.blotter-body{flex:1; overflow:auto}
.bl-table{width:100%; border-collapse:collapse; font-size:12px}
.bl-table th{
  text-align:right; color:var(--muted); font-weight:500; padding:6px 14px; position:sticky; top:0;
  background:var(--panel); border-bottom:1px solid var(--line2);
}
.bl-table th:first-child, .bl-table td:first-child{text-align:left}
.bl-table td{text-align:right; padding:6px 14px; border-bottom:1px solid var(--line2); font-variant-numeric:tabular-nums}
.bl-table .flat-btn{border:1px solid var(--line); background:#fff; border-radius:5px; padding:2px 8px; cursor:pointer; font-size:11px}
.bl-table .flat-btn:hover{background:#f1f2f5}
.bl-empty td{color:var(--muted2); text-align:center; padding:16px}
.pos-tag{font-size:10px; font-weight:700; padding:1px 6px; border-radius:4px; margin-left:6px; vertical-align:middle}
.pos-tag.open{background:#e7f0ff; color:var(--blue)}
.pos-tag.closed{background:#f0f1f4; color:var(--muted)}
.closed-row td{color:var(--muted)}
.closed-row td:last-child, .closed-row td.up, .closed-row td.dn{color:inherit}

/* ---------- right panel ---------- */
.quote-panel{width:340px; background:var(--panel); border-left:1px solid var(--line); display:flex; flex-direction:column; overflow-y:auto}
.qp-head{padding:10px 16px 4px}
.qp-title{font-weight:700; font-size:15px}
.qp-quote{padding:4px 16px 12px; border-bottom:1px solid var(--line2)}
.qp-name{font-size:13px}
.qp-exch{color:var(--muted); font-size:11px; margin-left:4px}
.qp-price{font-size:30px; font-weight:700; line-height:1.1; margin-top:2px}
.qp-chg{font-weight:600; font-size:14px}
.qp-sub{color:var(--muted); font-size:11px; margin-top:4px}

.qp-stats{padding:10px 16px; border-bottom:1px solid var(--line2)}
.qp-stats-title{font-weight:600; margin-bottom:8px}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px 18px}
.stat-grid > div{display:flex; justify-content:space-between; font-size:12px}
.stat-grid span{color:var(--muted)}

.qp-trade{padding:10px 16px}
.trade-tabs{display:flex; gap:16px; border-bottom:1px solid var(--line2); margin-bottom:10px}
.tt{padding-bottom:8px; font-weight:600; font-size:13px; cursor:pointer}
.tt.active{border-bottom:2px solid var(--blue); color:var(--text)}
.tt.dim{color:var(--muted)}

.bidask{display:flex; align-items:center; border-radius:6px; overflow:hidden; margin-bottom:12px; font-size:12px}
.bidask .bid{background:#e7f7ef; color:#0e9d5a; padding:6px 10px; flex:1}
.bidask .ask{background:#fdeaec; color:var(--dn); padding:6px 10px; flex:1; text-align:right}
.bidask .spread{padding:6px 10px; color:var(--muted); background:#f6f7f9}

.side-toggle{display:flex; background:#eef0f3; border-radius:8px; padding:3px; margin-bottom:12px}
.side{flex:1; border:0; background:transparent; padding:8px; border-radius:6px; font-weight:700; cursor:pointer; color:var(--muted)}
.side.buy.active{background:var(--buy); color:#fff}
.side.sell.active{background:var(--sell); color:#fff}

.field-row{display:flex; gap:10px; margin-bottom:10px}
label{display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--muted); flex:1}
.field-full{margin-bottom:10px}
select,input[type=number]{
  border:1px solid var(--line); border-radius:7px; padding:8px 10px; font-size:13px; color:var(--text);
  background:#fff; outline:0; width:100%;
}
input[type=number]:focus,select:focus{border-color:var(--blue)}
.bracket{display:flex; flex-direction:column; gap:6px; margin-bottom:10px}
.chk{flex-direction:row; align-items:center; gap:6px; color:var(--text); font-size:12px}
.chk input{width:auto}
.est{font-size:12px; color:var(--muted); margin-bottom:10px}
.est b{color:var(--text)}
.place{width:100%; border:0; padding:12px; border-radius:8px; font-weight:700; font-size:14px; color:#fff; cursor:pointer}
.place.buy{background:var(--buy)} .place.buy:hover{background:var(--buy-d)}
.place.sell{background:var(--sell)} .place.sell:hover{background:var(--sell-d)}
.place:disabled{opacity:.5; cursor:not-allowed}

.acct-summary{margin:auto 0 0; padding:12px 16px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:8px 18px}
.acct-summary > div{display:flex; justify-content:space-between; font-size:12px}
.acct-summary span{color:var(--muted)}

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:#1b1d22; color:#fff; padding:10px 18px; border-radius:8px; font-size:13px;
  opacity:0; pointer-events:none; transition:.25s; z-index:50;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--dn)}