/* ===== Design tokens ===== */
:root {
  --bg-main:#0b0e11; --bg-panel:#161a1e; --bg-light:#1e2329; --bg-soft:#0f1317;
  --border:#2b2f36; --border-soft:#22262c;
  --text:#eaecef; --text-muted:#8b949e; --text-dim:#5f6670;
  --green:#0ecb81; --green-soft:rgba(14,203,129,.12);
  --red:#f6465d; --red-soft:rgba(246,70,93,.12);
  --yellow:#f0b90b; --yellow-soft:rgba(240,185,11,.10);
  --blue:#3a7afe; --blue-soft:rgba(58,122,254,.12);
  --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-lg:15px; --fs-xl:18px;
  --r-sm:4px; --r-md:6px; --r-lg:10px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;

  --watchlist-w: 240px;
  --basket-w: 300px;
  --bottom-h: 220px;
  --topbar-h: 56px;
  --subbar-h: 32px;

  --z-drawer: 200;
  --z-backdrop: 150;
  --z-modal: 9000;
  --z-toast: 10000;
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; background:var(--bg-main); color:var(--text);
  font-family:Inter,system-ui,-apple-system,Arial,sans-serif;
  font-size:var(--fs-md); overflow:hidden;
  font-variant-numeric: tabular-nums;
}
.hidden { display:none !important; }
.muted { color:var(--text-muted); }
kbd { background:var(--bg-light); border:1px solid var(--border); border-bottom-width:2px; padding:1px 6px; border-radius:4px; font-size:var(--fs-xs); font-family:Inter; color:var(--text); }

/* ===== App grid ===== */
#app {
  display:grid;
  grid-template-rows: var(--topbar-h) var(--subbar-h) 1fr var(--bottom-h);
  height:100vh;
  position:relative;
}

/* ===== Topbar ===== */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--sp-5); gap:var(--sp-4);
  background:linear-gradient(180deg,#171b20,#13171c);
  border-bottom:1px solid var(--border);
}
.topbar-left { display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.logo { font-size:var(--fs-lg); font-weight:700; letter-spacing:.5px; white-space:nowrap; }
.logo span { color:var(--yellow); }
.market-indices { display:flex; gap:var(--sp-6); flex:1; justify-content:center; }
.index-box { display:flex; flex-direction:column; line-height:1.2; }
.idx-name { font-size:var(--fs-xs); color:var(--text-muted); letter-spacing:.4px; }
.idx-price { font-size:var(--fs-md); font-weight:600; }
.idx-chg { font-size:var(--fs-xs); }
.idx-chg.up { color:var(--green); } .idx-chg.down { color:var(--red); }

.topbar-right { display:flex; align-items:center; gap:var(--sp-3); }
.pnl-tile {
  display:flex; flex-direction:column; align-items:flex-end; line-height:1.2;
  padding:6px 12px; background:var(--bg-light); border:1px solid var(--border); border-radius:var(--r-md);
}
.pnl-label { font-size:var(--fs-xs); color:var(--text-muted); }
.pnl-value { font-size:var(--fs-md); font-weight:600; }
.pnl-value.up { color:var(--green); } .pnl-value.down { color:var(--red); }

.conn-pill { display:flex; align-items:center; gap:6px; font-size:var(--fs-xs); padding:4px 10px; background:var(--bg-light); border:1px solid var(--border); border-radius:999px; color:var(--text-muted); }
.conn-pill .dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); }
.conn-pill.warn .dot { background:var(--yellow); box-shadow:0 0 6px var(--yellow); }
.conn-pill.err .dot { background:var(--red); box-shadow:0 0 6px var(--red); }

.btn-ghost {
  position:relative;
  background:transparent; color:var(--text-muted); border:1px solid var(--border);
  width:34px; height:34px; border-radius:var(--r-md); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-ghost:hover { color:var(--text); background:var(--bg-light); }
.btn-ghost-sm { background:transparent; border:none; color:var(--text-muted); cursor:pointer; padding:4px 6px; }
.btn-ghost-sm:hover { color:var(--text); }
.topbar-badge {
  position:absolute; top:-4px; right:-4px;
  background:var(--yellow); color:#000; font-size:9px; font-weight:700;
  min-width:16px; height:16px; padding:0 4px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* Drawer toggles - hidden on desktop */
.drawer-toggle { display:none; background:transparent; color:var(--text); border:1px solid var(--border); width:34px; height:34px; border-radius:var(--r-md); cursor:pointer; align-items:center; justify-content:center; font-size:18px; }
.drawer-toggle:hover { background:var(--bg-light); }
.drawer-toggle-right { display:none; }

/* ===== Sub bar ===== */
.subbar {
  display:flex; align-items:center; gap:var(--sp-2);
  padding:0 var(--sp-5); background:var(--bg-soft); border-bottom:1px solid var(--border);
  font-size:var(--fs-xs); color:var(--text-muted);
}
.subbar .sep { color:var(--text-dim); }
.mkt-status { display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.mkt-status .dot { width:6px; height:6px; border-radius:50%; }
.mkt-status.open { color:var(--green); } .mkt-status.open .dot { background:var(--green); box-shadow:0 0 6px var(--green); }
.mkt-status.closed { color:var(--text-muted); } .mkt-status.closed .dot { background:var(--text-muted); }

/* ===== Layout (3-col center) ===== */
.layout {
  display:grid;
  grid-template-columns: var(--watchlist-w) minmax(0,1fr) var(--basket-w);
  min-height:0;
}

/* Watchlist */
.watchlist { background:var(--bg-soft); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:var(--sp-3); min-height:0; min-width:0; }
.tabs { display:flex; gap:6px; margin-bottom:var(--sp-3); }
.tabs button {
  flex:1; background:var(--bg-light); border:1px solid var(--border-soft);
  color:var(--text-muted); padding:8px 10px; cursor:pointer;
  font-size:var(--fs-sm); border-radius:var(--r-md);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:background .15s, color .15s;
}
.tabs button:hover { color:var(--text); }
.tabs button.active { color:var(--yellow); background:var(--yellow-soft); border-color:rgba(240,185,11,.3); }

.search-wrap { position:relative; margin-bottom:var(--sp-3); }
.search-wrap i { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:13px; }
.search-wrap input {
  width:100%; padding:8px 10px 8px 30px; background:var(--bg-main); border:1px solid var(--border);
  color:var(--text); border-radius:var(--r-md); font-size:var(--fs-sm); outline:none;
}
.search-wrap input:focus-visible { border-color:var(--yellow); box-shadow:0 0 0 2px var(--yellow-soft); }

.watch-list { flex:1; overflow:auto; }
.watch-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; border-bottom:1px solid var(--border-soft); cursor:pointer;
  border-radius:var(--r-sm); transition:background .12s;
}
.watch-item:hover { background:var(--bg-light); }
.watch-item .sym { font-size:var(--fs-sm); font-weight:500; }
.watch-item .seg { font-size:10px; color:var(--text-dim); }
.watch-item .ltp { font-size:var(--fs-sm); }
.chg-pill { font-size:10px; padding:1px 5px; border-radius:3px; margin-left:6px; }
.chg-pill.up { background:var(--green-soft); color:var(--green); }
.chg-pill.down { background:var(--red-soft); color:var(--red); }

/* Center */
.center-panel { padding:var(--sp-4); overflow:auto; display:flex; flex-direction:column; gap:var(--sp-4); min-width:0; }
.trade-panel { background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-5); }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-4); flex-wrap:wrap; gap:var(--sp-3); }
.panel-head h3 { margin:0; font-size:var(--fs-lg); font-weight:600; display:inline-flex; align-items:center; gap:8px; }
.panel-head-actions { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.panel-tag { font-size:var(--fs-xs); color:var(--text-muted); background:var(--bg-light); padding:3px 8px; border-radius:4px; }

.order-mode { display:inline-flex; gap:4px; background:var(--bg-light); padding:3px; border-radius:var(--r-md); }
.order-mode .mode { background:transparent; color:var(--text-muted); border:none; padding:5px 14px; border-radius:var(--r-sm); cursor:pointer; font-size:var(--fs-sm); }
.order-mode .mode.active { background:var(--bg-panel); color:var(--text); box-shadow:inset 0 0 0 1px var(--border); }

.mode-toggle { display:inline-flex; gap:4px; background:var(--bg-light); padding:3px; border-radius:var(--r-md); border:1px solid var(--border-soft); }
.mode-toggle .mode-btn { background:transparent; color:var(--text-muted); border:none; padding:6px 14px; border-radius:var(--r-sm); cursor:pointer; font-size:var(--fs-sm); display:inline-flex; gap:6px; align-items:center; font-weight:500; }
.mode-toggle .mode-btn.active { background:var(--yellow-soft); color:var(--yellow); box-shadow:inset 0 0 0 1px rgba(240,185,11,.3); }

.contract-row { display:flex; gap:var(--sp-2); margin-bottom:var(--sp-3); align-items:center; }
.contract-row.wide { flex-wrap:wrap; }
.contract-row > * { flex:1; min-width:120px; }

.contract-chip {
  background:var(--yellow-soft); color:var(--yellow); padding:6px 12px;
  border-radius:var(--r-sm); font-size:var(--fs-sm); margin-bottom:var(--sp-3);
  display:inline-block; border:1px solid rgba(240,185,11,.3);
}

/* ===== Futures panel (NEW) ===== */
.futures-panel { margin-bottom:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2); }
.fut-chip {
  display:flex; align-items:center; gap:var(--sp-2);
  background:var(--blue-soft); border:1px dashed rgba(58,122,254,.4);
  color:var(--blue); padding:10px 14px; border-radius:var(--r-md);
  font-size:var(--fs-sm); font-weight:500;
}
.fut-chip.loaded { background:var(--green-soft); border-color:rgba(14,203,129,.4); color:var(--green); border-style:solid; }
.fut-chip .fut-chip-label { flex:1; }
.fut-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2); }
.fut-meta-item {
  background:var(--bg-soft); border:1px solid var(--border-soft);
  padding:8px 12px; border-radius:var(--r-md);
  display:flex; flex-direction:column; line-height:1.3;
}
.fut-meta-item span:first-child { font-size:10px; color:var(--text-muted); letter-spacing:.4px; text-transform:uppercase; }
.fut-meta-item span:last-child { font-size:var(--fs-sm); font-weight:600; color:var(--text); }

.field, select.field, input.field {
  background:var(--bg-main); border:1px solid var(--border); color:var(--text);
  padding:8px 10px; border-radius:var(--r-md); font-size:var(--fs-sm); width:100%; outline:none;
  transition:border-color .12s, box-shadow .12s;
}
.field:focus-visible { border-color:var(--yellow); box-shadow:0 0 0 2px var(--yellow-soft); }
.field:disabled { opacity:.5; cursor:not-allowed; }
.field-label { display:block; font-size:var(--fs-xs); color:var(--text-muted); margin-bottom:4px; letter-spacing:.3px; }

.lot-preview { display:block; margin-top:4px; font-size:11px; color:var(--text-muted); }
.lot-preview b { color:var(--yellow); font-weight:600; }

.price-info { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-2); margin-bottom:var(--sp-4); }
.price-info.wide { grid-template-columns:repeat(4, 1fr); }
.price-box {
  background:var(--bg-soft); border:1px solid var(--border-soft);
  padding:8px 12px; border-radius:var(--r-md); display:flex; flex-direction:column; line-height:1.3;
}
.price-box span:first-child { font-size:10px; color:var(--text-muted); letter-spacing:.4px; }
.price-box span:last-child { font-size:var(--fs-md); font-weight:600; }

.order-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:var(--sp-3); margin-bottom:var(--sp-4); }
.seg { display:flex; flex-direction:column; min-width:0; }

/* Side toggle */
.side-toggle { display:flex; background:var(--bg-light); border-radius:var(--r-md); padding:2px; }
.side-toggle button { flex:1; background:transparent; border:none; padding:6px 0; color:var(--text-muted); cursor:pointer; font-weight:600; font-size:var(--fs-sm); border-radius:var(--r-sm); }
.side-toggle .side-buy.active { background:var(--green); color:#08110d; }
.side-toggle .side-sell.active { background:var(--red); color:#1a0509; }

.order-actions { display:flex; gap:var(--sp-3); }

/* Buttons */
.btn-primary, .btn-secondary {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border:none; border-radius:var(--r-md); cursor:pointer; font-weight:600;
  font-size:var(--fs-sm); transition:filter .12s, transform .05s;
  width:100%;
}
.btn-primary { background:var(--green); color:#08110d; }
.btn-primary.btn-sell { background:var(--red); color:#fff; }
.btn-secondary { background:var(--bg-light); color:var(--text); border:1px solid var(--border); }
.btn-secondary.danger { background:var(--red-soft); color:var(--red); border-color:rgba(246,70,93,.35); }
.btn-primary:hover, .btn-secondary:hover { filter:brightness(1.1); }
.btn-primary:active, .btn-secondary:active { transform:translateY(1px); }
.btn-primary:disabled, .btn-secondary:disabled { opacity:.5; cursor:not-allowed; }
.spin { display:inline-block; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Skeleton */
.skel { position:relative; color:var(--text-dim); }
.skel.loading { background:linear-gradient(90deg,var(--bg-light) 25%,var(--bg-panel) 50%,var(--bg-light) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; color:transparent; border-radius:3px; min-width:40px; min-height:14px; display:inline-block; }
@keyframes shimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* ===== Live Baskets ===== */
.live-baskets { background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-4); }
.live-baskets-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); }
.live-baskets-head h4 { margin:0; font-size:var(--fs-md); display:inline-flex; align-items:center; gap:8px; }
.net-summary { font-size:var(--fs-sm); color:var(--text-muted); }
.net-summary .pnl { font-weight:600; margin-left:6px; }
.net-summary .pnl.up { color:var(--green); } .net-summary .pnl.down { color:var(--red); }

/* Bulk action bar */
.bulk-bar {
  display:none; align-items:center; justify-content:space-between;
  background:linear-gradient(90deg, var(--yellow-soft), var(--bg-soft));
  border:1px solid rgba(240,185,11,.35); border-radius:var(--r-md);
  padding:8px 12px; margin-bottom:var(--sp-3);
  position:sticky; top:0; z-index:5;
  animation:bulk-in .18s ease-out;
}
.bulk-bar.show { display:flex; }
.bulk-bar-left { display:flex; align-items:center; gap:8px; color:var(--yellow); font-weight:600; font-size:var(--fs-sm); }
.bulk-bar-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.bulk-bar-actions .btn-secondary { width:auto; padding:6px 10px; font-size:var(--fs-xs); }
@keyframes bulk-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

.basket-card-pro {
  position:relative;
  background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-3) var(--sp-3) 36px; margin-bottom:var(--sp-3);
  transition:border-color .15s, background .15s;
}
.basket-card-pro:hover { border-color:var(--text-dim); }
.basket-card-pro.selected { border-color:var(--yellow); background:linear-gradient(180deg,var(--yellow-soft),var(--bg-soft)); }
.bcp-select {
  position:absolute; left:12px; top:14px;
  width:18px; height:18px; cursor:pointer; accent-color:var(--yellow);
}
.bcp-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:var(--sp-2); }
.bcp-strategy { font-weight:600; font-size:var(--fs-md); }
.bcp-id { font-size:10px; color:var(--text-dim); margin-top:2px; }
.bcp-pnl { text-align:right; font-weight:700; font-size:var(--fs-lg); }
.bcp-pnl.up { color:var(--green); } .bcp-pnl.down { color:var(--red); }
.bcp-pnl-pct { font-size:var(--fs-xs); font-weight:500; }
.bcp-summary { display:flex; gap:var(--sp-4); font-size:var(--fs-xs); color:var(--text-muted); margin-bottom:var(--sp-2); flex-wrap:wrap; }
.bcp-summary b { color:var(--text); font-weight:500; }
.bcp-legs { display:flex; flex-direction:column; gap:4px; margin-bottom:var(--sp-2); }
.leg-row {
  display:grid; grid-template-columns: auto 1fr auto auto; gap:var(--sp-2);
  background:var(--bg-main); padding:8px 10px; border-radius:var(--r-sm);
  font-size:var(--fs-xs); align-items:center;
}
.leg-row .leg-side {
  font-size:9px; font-weight:700; padding:2px 6px; border-radius:3px;
  letter-spacing:.4px;
}
.leg-row .leg-side.buy { background:var(--green-soft); color:var(--green); }
.leg-row .leg-side.sell { background:var(--red-soft); color:var(--red); }
.leg-row .leg-info { display:flex; flex-direction:column; min-width:0; }
.leg-row .leg-info .symbol { font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.leg-row .leg-info .meta { color:var(--text-muted); font-size:10px; margin-top:1px; }
.leg-row .leg-pnl { text-align:right; font-weight:600; min-width:70px; }
.leg-row .leg-pnl.up { color:var(--green); } .leg-row .leg-pnl.down { color:var(--red); }
.leg-row .leg-exit {
  background:var(--red-soft); color:var(--red); border:1px solid rgba(246,70,93,.3);
  padding:4px 8px; border-radius:var(--r-sm); font-size:10px; cursor:pointer; font-weight:600;
  display:inline-flex; align-items:center; gap:4px;
}
.leg-row .leg-exit:hover { background:var(--red); color:#fff; }

.bcp-risk { display:flex; gap:var(--sp-2); font-size:var(--fs-xs); margin-bottom:var(--sp-2); flex-wrap:wrap; }
.risk-badge { padding:3px 8px; border-radius:4px; background:var(--bg-light); border:1px solid var(--border); }
.risk-badge.sl { color:var(--red); }
.risk-badge.tg { color:var(--green); }
.bcp-actions { display:flex; gap:var(--sp-2); }
.bcp-actions button { flex:1; padding:6px 10px; font-size:var(--fs-xs); border-radius:var(--r-sm); border:1px solid var(--border); cursor:pointer; background:var(--bg-light); color:var(--text); display:inline-flex; align-items:center; justify-content:center; gap:4px; font-weight:500; }
.bcp-actions button:hover { filter:brightness(1.15); }
.bcp-actions .exit-btn { background:var(--red-soft); color:var(--red); border-color:rgba(246,70,93,.3); }

/* ===== Draft basket ===== */
.basket-panel { background:var(--bg-soft); border-left:1px solid var(--border); display:flex; flex-direction:column; padding:var(--sp-3); min-height:0; }
.basket-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); }
.basket-header h4 { margin:0; font-size:var(--fs-md); display:inline-flex; align-items:center; gap:6px; }
.count { background:var(--yellow); color:#000; font-size:10px; padding:1px 6px; border-radius:10px; font-weight:600; }
.basket-legs { flex:1; overflow:auto; display:flex; flex-direction:column; gap:6px; }
.basket-card {
  background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--sp-2); font-size:var(--fs-xs);
}
.basket-card .card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.basket-card .symbol { font-weight:600; font-size:var(--fs-sm); }
.basket-card .card-mid { color:var(--text-muted); margin-bottom:4px; }
.basket-card .card-row { display:flex; justify-content:space-between; margin-bottom:2px; }
.basket-card .side.buy { color:var(--green); font-weight:600; }
.basket-card .side.sell { color:var(--red); font-weight:600; }
.basket-card .card-bottom { color:var(--text-dim); font-size:10px; margin-top:4px; }
.basket-card .remove-leg { background:transparent; border:none; color:var(--text-dim); cursor:pointer; font-size:14px; }
.basket-card .remove-leg:hover { color:var(--red); }
.basket-footer { display:flex; gap:var(--sp-2); margin-top:var(--sp-3); }

/* Empty states */
.empty { padding:var(--sp-5); text-align:center; color:var(--text-dim); font-size:var(--fs-sm); }
.empty i { font-size:24px; display:block; margin-bottom:6px; opacity:.6; }

/* ===== Bottom panel ===== */
.bottom-panel { background:var(--bg-panel); border-top:1px solid var(--border); display:flex; flex-direction:column; min-height:0; position:relative; }
.positions-resizer {
  position:absolute; top:-3px; left:0; right:0; height:6px; cursor:row-resize;
  background:transparent; z-index:10;
}
.positions-resizer:hover, .positions-resizer.dragging {
  background:linear-gradient(180deg, transparent, var(--yellow), transparent);
}
.panel-tabs { display:flex; border-bottom:1px solid var(--border); align-items:center; }
.panel-tabs button { background:transparent; border:none; color:var(--text-muted); padding:10px 18px; cursor:pointer; font-size:var(--fs-sm); display:inline-flex; gap:6px; align-items:center; }
.panel-tabs button.active { color:var(--text); border-bottom:2px solid var(--yellow); }
.panel-tabs-right { margin-left:auto; padding-right:var(--sp-3); }
.panel-content { flex:1; overflow:auto; padding:var(--sp-2) var(--sp-3); }
.bottom-panel.positions-collapsed { height:36px !important; }
.bottom-panel.positions-collapsed .panel-content { display:none; }
.bottom-panel.positions-collapsed .panel-tabs button.active { border-bottom-color:transparent; }

.pos-table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.pos-table th { text-align:left; color:var(--text-muted); font-weight:500; font-size:var(--fs-xs); padding:6px 8px; border-bottom:1px solid var(--border); }
.pos-table td { padding:8px; border-bottom:1px solid var(--border-soft); }
.pos-table tr:hover { background:var(--bg-light); }
.pnl-up { color:var(--green); font-weight:600; } .pnl-down { color:var(--red); font-weight:600; }
.close-pos-btn { background:var(--red-soft); color:var(--red); border:1px solid rgba(246,70,93,.3); padding:3px 10px; border-radius:var(--r-sm); cursor:pointer; font-size:var(--fs-xs); }
.close-pos-btn:hover { background:var(--red); color:#fff; }

/* ===== Login ===== */
.login-shell { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at top,#1a1f26 0%,#0b0e11 60%); padding:var(--sp-4); }
.login-card { width:100%; max-width:380px; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:0 20px 60px rgba(0,0,0,.5); }
.brand { display:flex; gap:var(--sp-3); align-items:center; margin-bottom:var(--sp-5); }
.brand-mark { width:44px; height:44px; border-radius:var(--r-md); background:linear-gradient(135deg,var(--yellow),#d49a08); color:#000; display:flex; align-items:center; justify-content:center; font-size:22px; }
.brand-title { font-size:var(--fs-lg); font-weight:700; }
.brand-title span { color:var(--yellow); }
.brand-sub { font-size:var(--fs-xs); color:var(--text-muted); }
.login-card .field { margin-bottom:var(--sp-3); }
.login-card .field-label { margin-bottom:4px; }
.login-card .btn-primary { background:var(--yellow); color:#000; }
.login-error { margin-top:var(--sp-3); padding:8px 12px; background:var(--red-soft); border:1px solid rgba(246,70,93,.3); border-radius:var(--r-sm); color:var(--red); font-size:var(--fs-xs); }
.login-footer { margin-top:var(--sp-4); text-align:center; }
.badge-demo { display:inline-flex; align-items:center; gap:6px; font-size:10px; color:var(--yellow); background:var(--yellow-soft); padding:3px 10px; border-radius:999px; }
.mt-2 { margin-top:var(--sp-3); }

/* ===== Modals ===== */
.modal-shell { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:var(--z-modal); padding:var(--sp-4); }
.modal-card { background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--r-lg); width:100%; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.modal-head { padding:var(--sp-4); border-bottom:1px solid var(--border); }
.modal-head h4 { margin:0; font-size:var(--fs-md); display:inline-flex; align-items:center; gap:8px; }
.modal-body { padding:var(--sp-4); font-size:var(--fs-sm); }
.modal-foot { padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--border); display:flex; gap:var(--sp-2); justify-content:flex-end; }
.modal-foot .btn-primary, .modal-foot .btn-secondary { width:auto; min-width:100px; }
.risk-row { margin-bottom:var(--sp-3); }
.risk-row label { display:block; font-size:var(--fs-xs); color:var(--text-muted); margin-bottom:4px; }
.bulk-mode-toggle { display:flex; gap:var(--sp-2); margin-bottom:var(--sp-4); padding:var(--sp-2); background:var(--bg-soft); border-radius:var(--r-md); border:1px solid var(--border-soft); }
.bulk-mode-toggle label { flex:1; display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:var(--r-sm); cursor:pointer; font-size:var(--fs-sm); transition:background .12s; }
.bulk-mode-toggle label:hover { background:var(--bg-light); }
.bulk-mode-toggle input[type="radio"] { accent-color:var(--yellow); }
.hk { display:flex; gap:8px; align-items:center; padding:6px 0; font-size:var(--fs-sm); }
.hk span { color:var(--text-muted); margin-left:8px; }

/* ===== Toasts ===== */
.toast-host { position:fixed; top:70px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:var(--z-toast); max-width:340px; }
.toast { background:var(--bg-panel); border:1px solid var(--border); border-left:3px solid var(--blue); padding:10px 14px; border-radius:var(--r-md); font-size:var(--fs-sm); box-shadow:0 8px 24px rgba(0,0,0,.4); display:flex; align-items:center; gap:10px; animation:slide-in .25s ease-out; }
.toast.success { border-left-color:var(--green); }
.toast.error { border-left-color:var(--red); }
.toast.warning { border-left-color:var(--yellow); }
.toast.fade { opacity:0; transform:translateX(20px); transition:all .3s; }
@keyframes slide-in { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }

/* Scrollbars */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-dim); }

/* ===== Drawer backdrop ===== */
.drawer-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  z-index:var(--z-backdrop); display:none;
}
body.drawer-open .drawer-backdrop { display:block; }

/* ===== Responsive ===== */
@media (max-width:1400px) {
  :root { --watchlist-w:220px; --basket-w:280px; }
  .order-grid { grid-template-columns:repeat(3, 1fr); }
}

@media (max-width:1280px) {
  :root { --basket-w:0px; }
  .basket-panel {
    position:fixed; top:calc(var(--topbar-h) + var(--subbar-h)); right:0;
    height:calc(100vh - var(--topbar-h) - var(--subbar-h) - var(--bottom-h));
    width:320px; max-width:90vw;
    border-left:1px solid var(--border);
    transform:translateX(100%); transition:transform .25s ease-out;
    z-index:var(--z-drawer);
    display:flex !important;
  }
  .basket-panel.open { transform:translateX(0); animation:drawer-in .25s ease-out; }
  .basket-panel.hidden.open { transform:translateX(0); }
  .drawer-toggle-right { display:inline-flex; }
  .price-info.wide { grid-template-columns:repeat(4, 1fr); }
}

@media (max-width:1024px) {
  :root { --watchlist-w:0px; --bottom-h:200px; }
  .watchlist {
    position:fixed; top:calc(var(--topbar-h) + var(--subbar-h)); left:0;
    height:calc(100vh - var(--topbar-h) - var(--subbar-h) - var(--bottom-h));
    width:280px; max-width:85vw;
    border-right:1px solid var(--border);
    transform:translateX(-100%); transition:transform .25s ease-out;
    z-index:var(--z-drawer);
  }
  .watchlist.open { transform:translateX(0); animation:drawer-in-l .25s ease-out; }
  .drawer-toggle { display:inline-flex; }
  .market-indices { display:none; }
  .order-grid { grid-template-columns:repeat(2, 1fr); }
  .price-info.wide { grid-template-columns:repeat(2, 1fr); }
  .center-panel { padding:var(--sp-3); }
  .trade-panel { padding:var(--sp-3); }
}

@media (max-width:640px) {
  :root { --topbar-h:52px; --bottom-h:180px; }
  .topbar { padding:0 var(--sp-3); }
  .pnl-tile { padding:4px 8px; }
  .order-grid { grid-template-columns:repeat(2, 1fr); }
  .order-actions { flex-direction:column; }
  .panel-head h3 { font-size:var(--fs-md); }
  .toast-host { right:8px; left:8px; max-width:none; top:60px; }
  .bulk-bar { flex-direction:column; align-items:flex-start; gap:8px; }
  .bulk-bar-actions { width:100%; }
}

@keyframes drawer-in   { from { transform:translateX(100%); } to { transform:translateX(0); } }
@keyframes drawer-in-l { from { transform:translateX(-100%); } to { transform:translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.bottom-tabs { display:flex; gap:4px; padding:6px 8px; border-bottom:1px solid var(--border); background:var(--bg-soft); }
.bt-tab { background:transparent; border:none; color:var(--text-muted); padding:6px 14px; cursor:pointer; font-size:var(--fs-sm); border-radius:var(--r-sm); position:relative; }
.bt-tab.active { color:var(--yellow); background:var(--yellow-soft); }
.bt-pane { padding:8px; overflow:auto; height:100%; }
.data-table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.data-table th, .data-table td { padding:6px 8px; text-align:left; border-bottom:1px solid var(--border-soft); }
.data-table th { color:var(--text-muted); font-weight:500; font-size:var(--fs-xs); }
.data-table .up { color:var(--green); } .data-table .down { color:var(--red); }
.po-edit:hover { color:var(--blue); } .po-cancel:hover { color:var(--red); }

/* webhooks  */
.wh-row { margin-bottom: var(--sp-3); }
.wh-copy { display:flex; gap:6px; }
.wh-copy .field { flex:1; }
.wh-copy .btn-secondary { width:auto; padding:8px 12px; }
pre#wh-template { background:var(--bg-main); padding:10px; border-radius:6px; color:var(--text); }

/* ===== TradingView Webhook Modal ===== */
.tv-modal-card { max-width: 680px; width: 100%; }
.tv-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.tv-head h4 { margin:0; font-size:var(--fs-md); display:inline-flex; align-items:center; gap:8px; }

.tv-row { margin-bottom: var(--sp-4); }
.tv-row:last-child { margin-bottom:0; }

.tv-pill-group {
  display:flex; gap:6px; background:var(--bg-light); padding:4px;
  border-radius:var(--r-md); border:1px solid var(--border-soft);
}
.tv-pill {
  flex:1; background:transparent; color:var(--text-muted); border:none;
  padding:8px 14px; border-radius:var(--r-sm); cursor:pointer;
  font-size:var(--fs-sm); font-weight:500;
  transition:background .12s, color .12s, box-shadow .12s;
}
.tv-pill:hover:not(:disabled) { color:var(--text); }
.tv-pill.active {
  background:var(--yellow-soft); color:var(--yellow);
  box-shadow:inset 0 0 0 1px rgba(240,185,11,.3);
}
.tv-pill:disabled { opacity:.4; cursor:not-allowed; }

.tv-json {
  width:100%; min-height:260px; max-height:420px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px; line-height:1.55;
  background:var(--bg-main); color:var(--text);
  padding:12px; resize:vertical; white-space:pre;
}
.tv-hint {
  margin-top:6px; font-size:11px; color:var(--text-muted);
  display:flex; align-items:flex-start; gap:6px; line-height:1.5;
}
.tv-hint code {
  background:var(--bg-light); padding:1px 5px; border-radius:3px;
  color:var(--yellow); font-size:10px;
}

@media (max-width:640px) {
  .tv-modal-card { max-width: 95vw; }
  .tv-pill { padding:8px 8px; font-size:11px; }
  .tv-json { min-height:200px; font-size:11px; }
}

/* ===== Loader ===== */

#global-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#global-loader.hidden {
  display: none;
}

/* Spinner */
#global-loader::after {
  content: "";
  width: 40px;
  height: 40px;
  border: 4px solid #fff;
  border-top: 4px solid transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  z-index: 9999;
}
.loader::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top-color: #00bcd4;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.hidden { display: none; }

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}