/* ============================================================
   PairDesk — Cyber Cyan × Magenta neon trading terminal
   Glow lives on accents & states; body numbers stay crisp.
   ============================================================ */
:root {
  /* base — near-black glass */
  --bg:         #080b12;
  --bg-2:       #0b0f18;
  --panel:      rgba(13, 17, 27, .72);
  --panel-2:    rgba(17, 22, 35, .82);
  --inset:      #0c111b;
  --border:     rgba(120, 140, 180, .13);
  --border-hi:  rgba(120, 140, 180, .24);
  --grid:       rgba(120, 140, 180, .05);
  /* text */
  --text:       #e6ecf5;
  --text-dim:   #8b9bb4;
  --text-faint: #55627d;
  /* neon accents */
  --cyan:    #3b82f6;
  --magenta: #22c55e;
  --violet:  #6366f1;
  --blue:    #3b82f6;
  --green:   #22c55e;   /* profit */
  --red:     #ef4444;   /* loss */
  --amber:   #eab308;
  --orange:  #f97316;
  /* dim fills */
  --cyan-dim:    rgba(59, 130, 246, .12);
  --magenta-dim: rgba(34, 197, 94, .12);
  --green-dim:   rgba(34, 197, 94, .12);
  --red-dim:     rgba(239, 68, 68, .12);
  --amber-dim:   rgba(234, 179, 8, .12);
  --violet-dim:  rgba(99, 102, 241, .13);
  /* glows */
  --glow-cyan:  0 0 14px rgba(59, 130, 246, .45), 0 0 2px rgba(59, 130, 246, .9);
  --glow-mag:   0 0 14px rgba(34, 197, 94, .45), 0 0 2px rgba(34, 197, 94, .9);
  --glow-green: 0 0 14px rgba(34, 197, 94, .5);
  --glow-red:   0 0 14px rgba(239, 68, 68, .5);
  --glow-sm:    0 0 8px rgba(59, 130, 246, .35);
  --fx: cubic-bezier(.16, 1, .3, 1);
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  display: flex;
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(34, 197, 94, .10), transparent 55%),
    radial-gradient(1000px 500px at 2% 0%, rgba(59, 130, 246, .10), transparent 52%),
    radial-gradient(1200px 600px at 50% 118%, rgba(99, 102, 241, .07), transparent 60%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 34px,
    var(--bg);
  color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-family: var(--sans);
  font-size: 13px;
  overflow: hidden;
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.dim { color: var(--text-faint); }
.danger-text { color: var(--red); }
.pnl-pos { color: var(--green); text-shadow: 0 0 10px rgba(34, 197, 94, .45); }
.pnl-neg { color: var(--red);   text-shadow: 0 0 10px rgba(239, 68, 68, .45); }

/* ===================== SIDEBAR ===================== */
.sidebar {
  width: 232px; flex: 0 0 232px; height: 100vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(10, 13, 22, .92), rgba(7, 9, 16, .96));
  border-right: 1px solid var(--border);
  backdrop-filter: blur(12px);
  position: relative; z-index: 20;
}
.sidebar::after {
  content: ""; position: absolute; top: 0; right: -1px; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(59, 130, 246, .5), rgba(34, 197, 94, .4), transparent);
}
.sb-brand { display: flex; align-items: center; gap: 11px; padding: 18px 18px 16px; }
.sb-logo {
  width: 38px; height: 38px; display: grid; place-items: center; font-size: 19px;
  border-radius: 11px; background: var(--inset);
  border: 1px solid rgba(59, 130, 246, .4); box-shadow: var(--glow-sm);
}
.sb-title {
  font-size: 12.5px; font-weight: 800; letter-spacing: 1.4px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sb-sub { font-size: 9.5px; letter-spacing: 1px; color: var(--text-faint); margin-top: 2px; }

.sb-nav { display: flex; flex-direction: column; gap: 3px; padding: 6px 12px; flex: 1; overflow-y: auto; }
.sb-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--text-dim);
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; text-align: left;
  position: relative; transition: background .18s, color .18s;
}
.sb-item span { font-size: 14px; filter: grayscale(.4); transition: filter .18s, transform .18s; }
.sb-item:hover { background: rgba(255, 255, 255, .04); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.sb-item:hover span { filter: none; transform: scale(1.12); }
.sb-item.on { color: #fff; background: linear-gradient(90deg, var(--cyan-dim), transparent); }
.sb-item.on span { filter: none; }
.sb-item.on::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
  border-radius: 3px; background: var(--cyan); box-shadow: var(--glow-cyan);
}

.sb-bottom { padding: 12px; border-top: 1px solid var(--border); }
.sb-card {
  background: var(--inset); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px;
}
.sb-card-title { font-size: 8.5px; letter-spacing: 1.6px; color: var(--text-faint); text-transform: uppercase; }
.sb-token { display: flex; align-items: center; font-size: 11.5px; font-weight: 700; margin: 7px 0 9px; color: var(--text-dim); }
.sb-api { display: flex; align-items: center; justify-content: flex-end; gap: 5px; font-size: 9.5px; color: var(--text-faint); margin-top: 10px; letter-spacing: .6px; }

/* ===================== MAIN ===================== */
.main { flex: 1; min-width: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* ---------- KPI bar ---------- */
.kpibar {
  display: flex; align-items: stretch; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(13, 17, 27, .6), transparent);
}
.kpi {
  padding: 6px 14px; border-radius: 10px; min-width: 104px;
  background: var(--panel); border: 1px solid var(--border);
}
.kpi label { display: block; font-size: 8.5px; letter-spacing: 1.5px; color: var(--text-faint); text-transform: uppercase; }
.kpi-v { font-size: 15px; font-weight: 800; margin-top: 2px; display: flex; align-items: center; }
.kpi-v#kSpot, .kpi .kpi-v { letter-spacing: .3px; }
.kpi-s { font-size: 10px; color: var(--text-dim); margin-top: 1px; }
.kpi.pnl-card.pos { border-color: rgba(34, 197, 94, .4); background: var(--green-dim); box-shadow: 0 0 18px rgba(34, 197, 94, .12); }
.kpi.pnl-card.neg { border-color: rgba(239, 68, 68, .4); background: var(--red-dim); box-shadow: 0 0 18px rgba(239, 68, 68, .12); }
#kSpot.up  { color: var(--green); text-shadow: var(--glow-green); }
#kSpot.down { color: var(--red);   text-shadow: var(--glow-red); }
#kDelta { font-size: 10.5px; margin-left: 6px; font-weight: 700; }
#kDelta.up { color: var(--green); } #kDelta.down { color: var(--red); }
.flash-up  { animation: flashUp .5s var(--fx); }
.flash-down { animation: flashDown .5s var(--fx); }

.killblock {
  margin-left: auto; align-self: stretch; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 6px 20px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(159, 18, 57, .85), rgba(127, 29, 29, .7));
  border: 1px solid var(--red); color: #fff;
  box-shadow: 0 0 16px rgba(239, 68, 68, .25);
  animation: breathe 2.6s ease-in-out infinite;
  transition: box-shadow .2s, transform .1s;
}
.killblock:hover { box-shadow: 0 0 26px rgba(239, 68, 68, .6); }
.killblock:active { transform: scale(.98); }
.kill-1 { font-size: 12.5px; font-weight: 800; letter-spacing: 1.5px; }
.kill-2 { font-size: 8.5px; letter-spacing: 1px; opacity: .85; }
.killblock.arm { animation: pulse .5s infinite; background: var(--red); }

/* ---------- dot ---------- */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-right: 6px; flex: 0 0 auto; }
.dot.ok { background: var(--green); box-shadow: 0 0 10px rgba(34, 197, 94, .9); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes breathe { 50% { box-shadow: 0 0 22px rgba(239, 68, 68, .4); } }
@keyframes flashUp   { 0% { background: rgba(34, 197, 94, .3); } 100% { background: transparent; } }
@keyframes flashDown { 0% { background: rgba(239, 68, 68, .3); } 100% { background: transparent; } }
@keyframes slide-in  { from { transform: translateX(30px); opacity: 0; } }
@keyframes sweep     { 0% { box-shadow: inset 0 0 0 rgba(0,229,255,0); } 30% { box-shadow: inset 0 0 30px rgba(59, 130, 246, .35); } 100% { box-shadow: inset 0 0 0 rgba(0,229,255,0); } }

/* ---------- info / lock bars ---------- */
.lockbar {
  padding: 9px 18px; font-weight: 700; letter-spacing: .4px; color: var(--red);
  background: linear-gradient(90deg, rgba(239, 68, 68, .22), rgba(239, 68, 68, .04));
  border-bottom: 1px solid rgba(239, 68, 68, .45);
}
.demobar {
  display: flex; align-items: center; gap: 10px; padding: 9px 18px; font-size: 12px; color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background: linear-gradient(90deg, var(--cyan-dim), var(--magenta-dim), transparent);
  border-bottom: 1px solid rgba(59, 130, 246, .3);
}
.demobar b { color: var(--cyan); }
.demobar .x { margin-left: auto; cursor: pointer; color: var(--text-dim); padding: 2px 8px; border-radius: 5px; font-weight: 700; }
.demobar .x:hover { color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: rgba(255, 255, 255, .07); }

/* ---------- sub bar (mode + windows) ---------- */
.subbar { display: flex; align-items: center; gap: 22px; padding: 10px 18px; border-bottom: 1px solid var(--border); }
.sub-group { display: flex; align-items: center; gap: 10px; }
.sub-group > label { font-size: 8.5px; letter-spacing: 1.4px; color: var(--text-faint); text-transform: uppercase; }
.modeseg { display: inline-flex; padding: 3px; border-radius: 20px; background: var(--inset); border: 1px solid var(--border-hi); }
.modeseg button {
  border: 0; background: transparent; color: var(--text-faint); cursor: pointer;
  font-size: 11px; font-weight: 800; letter-spacing: .5px; padding: 5px 14px; border-radius: 16px; transition: .18s;
}
.modeseg button.on { color: #04151f; background: linear-gradient(135deg, var(--cyan), var(--blue)); box-shadow: 0 0 14px rgba(59, 130, 246, .35); }
.scanseg button[data-auto="1"].on { background: linear-gradient(135deg, var(--green), #14b866); color: #032417; box-shadow: 0 0 14px rgba(34, 197, 94, .45); }
.scan-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 14px; border-bottom: 1px solid var(--border); }
.ctl-lbl { font-size: 8.5px; letter-spacing: 1.2px; color: var(--text-faint); text-transform: uppercase; }
.dirseg button[data-dir="SELL"].on { background: linear-gradient(135deg, var(--red), #be123c); color: #fff; box-shadow: 0 0 12px rgba(239, 68, 68, .4); }
.dirseg button[data-dir="BUY"].on { background: linear-gradient(135deg, var(--green), #16a34a); color: #032417; box-shadow: 0 0 12px rgba(34, 197, 94, .4); }
.multiseg button.on { background: var(--violet-dim); color: var(--violet); box-shadow: 0 0 12px rgba(99, 102, 241, .35); }
.winpills { display: flex; gap: 6px; flex-wrap: wrap; }
.wp {
  font-family: var(--mono); font-size: 10.5px; padding: 4px 10px; border-radius: 14px;
  background: var(--inset); border: 1px solid var(--border); color: var(--text-dim);
}
.wp.active { color: var(--cyan); border-color: rgba(59, 130, 246, .5); box-shadow: var(--glow-sm); }
.wp.now { color: var(--red); border-color: rgba(239, 68, 68, .5); box-shadow: var(--glow-red); }
.wp.off { opacity: .5; }
.subbar .btn-light { margin-left: auto; }

/* ===================== CONTENT / VIEWS ===================== */
.content { flex: 1; overflow-y: auto; padding: 16px 18px 26px; }
.view { animation: viewIn .25s var(--fx); }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } }

.dash-grid {
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  grid-template-areas:
    "chain scanner"
    "chain pos"
    "journal journal";
}
.area-chain { grid-area: chain; } .area-scanner { grid-area: scanner; }
.area-pos { grid-area: pos; }
.area-journal { grid-area: journal; }
.two-col { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }

/* ---------- card ---------- */
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border); border-radius: 13px;
  overflow: hidden; backdrop-filter: blur(9px);
  box-shadow: 0 6px 26px rgba(0, 0, 0, .35);
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  opacity: .8;
}
.card-head {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .015);
}
.card-head h3 { font-size: 11.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.numbadge {
  width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 800; border-radius: 6px;
  background: var(--cyan-dim); color: var(--cyan); border: 1px solid rgba(59, 130, 246, .4);
}
.head-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.sub { font-size: 10.5px; color: var(--text-faint); }

/* ---------- chain legend ---------- */
.chain-legend { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 2px; font-size: 9.5px; letter-spacing: 1px; font-weight: 800; }
.lg-ce { color: var(--cyan); } .lg-pe { color: var(--violet); }
.lg-spot { color: var(--amber); font-size: 12px; }
.legend-foot { display: flex; gap: 18px; padding: 8px 14px 12px; font-size: 10.5px; color: var(--text-dim); }
.legend-foot b { color: var(--cyan); }
.lg-near { color: var(--text-faint); }

/* ---------- tables ---------- */
.table-wrap { overflow: auto; }
.tbl { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; }
.tbl th {
  font-family: var(--sans); font-size: 9px; font-weight: 800; letter-spacing: 1.3px;
  color: var(--text-faint); background: var(--bg-2); padding: 9px 12px; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.th-sticky th, .tbl thead th { position: sticky; top: 0; z-index: 2; }
th.th-ce { color: var(--cyan); } th.th-pe { color: var(--violet); }
.tbl td { padding: 6px 12px; border-bottom: 1px solid rgba(120, 140, 180, .07); font-variant-numeric: tabular-nums; }
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover td { background: rgba(59, 130, 246, .05); }
.l { text-align: left; } .r { text-align: right; } .c { text-align: center; }
td.c { color: var(--text-dim); font-weight: 700; }
.ce-val { color: #7df9ff; } .pe-val { color: #d0a9ff; }
td.itm { background: rgba(234, 179, 8, .05); }
.row-atm td { background: rgba(59, 130, 246, .08); }
.row-atm td.c { color: var(--cyan); text-shadow: var(--glow-cyan); }
.row-q td { background: var(--amber-dim); }
.row-q td.c { color: var(--amber); text-shadow: 0 0 12px rgba(234, 179, 8, .6); }
.row-q { animation: sweep 1.1s var(--fx); }
.match-exact { color: var(--green); font-weight: 800; }
.match-near { color: var(--amber); }
tr.row-open td { opacity: .5; }
tr.row-selected td { background: rgba(59,130,246,.14); box-shadow: inset 3px 0 0 var(--blue); }
tr.pos-open:hover td { background: rgba(255,255,255,.03); }

/* ---------- scanner bits ---------- */
.scan-status { font-size: 9.5px; font-weight: 800; letter-spacing: 1px; padding: 3px 9px; border-radius: 12px; background: var(--inset); border: 1px solid var(--border-hi); color: var(--text-faint); }
.scan-status.run { color: var(--green); border-color: rgba(34, 197, 94, .5); box-shadow: var(--glow-green); }
.scan-brief { padding: 9px 14px; font-size: 11px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.sl-note { padding: 9px 14px; font-size: 10.5px; color: var(--text-dim); border-top: 1px solid var(--border); }
.sl-note b { color: var(--red); }
.set-strip, .filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.set-strip label, .filter-row label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text-dim); }

/* ---------- positions ---------- */
.pos-total { padding: 10px 14px; font-size: 11.5px; color: var(--text-dim); border-top: 1px solid var(--border); }
.pos-total b { font-size: 14px; }
tr.pos-open td { border-left: 0; }
td.st-open { color: var(--cyan); } td.st-closed { color: var(--text-faint); }
.act-sell { color: var(--red); font-weight: 800; } .act-buy { color: var(--green); font-weight: 800; }

/* ---------- broker account ---------- */
.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 13px 14px; }
.acc-row { display: flex; justify-content: space-between; align-items: baseline; background: var(--inset); border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; }
.acc-row .k { font-size: 10.5px; color: var(--text-dim); } .acc-row .v { font-family: var(--mono); font-size: 12.5px; font-weight: 700; }
.acc-sub { font-size: 9.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-faint); padding: 8px 14px; border-top: 1px solid var(--border); }

/* ---------- basket builder ---------- */
.bb-form { display: grid; grid-template-columns: 82px 78px 1fr 1fr auto; gap: 8px; padding: 12px 14px; }
.bb-meta { display: flex; align-items: center; justify-content: space-between; padding: 4px 14px 8px; font-size: 11px; color: var(--text-dim); }
.bb-meta b { color: var(--cyan); font-size: 13px; }
.hint { padding: 8px 14px 12px; font-size: 10.5px; color: var(--text-faint); line-height: 1.5; }
#btnSellBasket, #btnAddLeg { white-space: nowrap; }
#basketPanel #btnSellBasket { margin: 6px 14px 4px; width: calc(100% - 28px); }

/* ---------- payoff simulator ---------- */
.payoff-wrap { padding: 12px 14px 4px; }
#payoffCanvas, #mpCanvas { width: 100%; height: 230px; display: block; }
.modal-lg { width: 640px; max-width: calc(100vw - 40px); }
.mp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mp-head h3 { font-size: 14px; font-weight: 800; letter-spacing: .4px; }
.mp-x { background: transparent; border: 0; color: var(--text-dim); font-size: 18px; cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.mp-x:hover { color: var(--text); background: rgba(255,255,255,.06); }
.mp-note { font-size: 10.5px; color: var(--text-faint); margin-top: 10px; text-align: center; }
.pay-metrics { display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px 14px; }
.pay-metrics .pm { min-width: 92px; background: var(--inset); border: 1px solid var(--border); border-radius: 9px; padding: 7px 11px; }
.pay-metrics .k { display: block; font-size: 8px; letter-spacing: 1.1px; color: var(--text-faint); text-transform: uppercase; }
.pay-metrics .v { font-family: var(--mono); font-size: 13px; font-weight: 700; }

/* ---------- loss-protection suggestion (max-loss unlimited par) ---------- */
.loss-suggest { display: flex; flex-direction: column; gap: 6px; padding: 2px 14px 12px; }
.loss-suggest:empty { display: none; }
.sug-warn { font-size: 12px; font-weight: 700; color: var(--amber);
  background: rgba(234,179,8,.09); border: 1px solid rgba(234,179,8,.28);
  border-radius: 8px; padding: 7px 10px; }
.sug-warn b { color: var(--red); }
.sug-hedge { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; }
.sug-hedge b { color: var(--blue); font-family: var(--mono); }
.sug-hint { font-size: 11px; color: var(--text-faint); font-style: italic; }
.sug-actions { display: flex; gap: 8px; margin-top: 2px; flex-wrap: wrap; }

/* ---------- journal ---------- */
.journal { overflow-y: auto; padding: 8px 14px; font-family: var(--mono); font-size: 11.5px; }
.j-row { display: flex; gap: 12px; padding: 4px 0; border-bottom: 1px solid rgba(120, 140, 180, .06); }
.j-ts { color: var(--text-faint); flex: 0 0 62px; }
.j-kind { flex: 0 0 130px; font-weight: 700; }
.j-detail { color: var(--text-dim); word-break: break-word; }
.k-ENTRY, .k-START { color: var(--green); }
.k-EXIT, .k-EXIT_RETRY, .k-SETTINGS { color: var(--amber); }
.k-SL, .k-KILL, .k-ERROR, .k-MAX_LOSS_LOCK, .k-PANIC_EXIT, .k-ORDER_REJECT { color: var(--red); }
.k-TARGET, .k-SESSION, .k-AUTO, .k-BASKET_TARGET, .k-TRAIL { color: var(--cyan); }

/* ===================== CONTROLS ===================== */
.ctl-rows { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px; }
.ctl-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px; font-size: 12px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.ctl-row:last-of-type { border-bottom: 0; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--sans); font-size: 12px; font-weight: 700; cursor: pointer;
  padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border-hi);
  background: var(--inset); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: border-color .16s, background .16s, box-shadow .16s, transform .1s;
}
.btn:hover { border-color: var(--cyan); box-shadow: var(--glow-sm); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; transform: none; }
.btn:disabled:hover { border-color: var(--border-hi); }
.btn-sm { padding: 4px 11px; font-size: 11px; }
.btn-xs { padding: 3px 7px; font-size: 10px; margin-left: 3px; }
.btn-blue { background: linear-gradient(135deg, var(--cyan), var(--blue)); border-color: transparent; color: #04151f; font-weight: 800; }
.btn-blue:hover { box-shadow: 0 0 20px rgba(59, 130, 246, .5); border-color: transparent; }
.btn-green { background: linear-gradient(135deg, var(--green), #14b866); border-color: transparent; color: #032417; font-weight: 800; }
.btn-green:hover { box-shadow: 0 0 20px rgba(34, 197, 94, .5); border-color: transparent; }
.btn-purple { width: 100%; margin-top: 4px; padding: 11px; letter-spacing: 1.3px; font-weight: 800; background: linear-gradient(135deg, var(--magenta), var(--violet)); border-color: transparent; color: #fff; }
.btn-purple:hover:not(:disabled) { box-shadow: 0 0 24px rgba(34, 197, 94, .5); border-color: transparent; }
.btn-danger { background: transparent; border-color: rgba(239, 68, 68, .5); color: var(--red); }
.btn-danger:hover { background: var(--red-dim); border-color: var(--red); box-shadow: var(--glow-red); }
.btn-light { background: var(--panel-2); border-color: var(--border-hi); color: var(--text-dim); }
.btn-light:hover { color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.btn-outline-w { width: 100%; background: transparent; border-color: rgba(59, 130, 246, .4); color: var(--cyan); font-size: 11px; padding: 6px; }
.btn-outline-w:hover { background: var(--cyan-dim); box-shadow: var(--glow-sm); }
.btn-take-sell { color: var(--red); border-color: rgba(239, 68, 68, .5); }
.btn-take-sell:hover { background: var(--red-dim); border-color: var(--red); box-shadow: none; }
.btn-take-buy { color: var(--green); border-color: rgba(34, 197, 94, .5); }
.btn-take-buy:hover { background: var(--green-dim); border-color: var(--green); box-shadow: none; }

/* ---------- segmented ---------- */
.seg { display: inline-flex; padding: 2px; border-radius: 18px; background: var(--inset); border: 1px solid var(--border-hi); }
.seg button { border: 0; background: transparent; color: var(--text-faint); font-size: 10px; font-weight: 800; letter-spacing: .5px; padding: 5px 13px; cursor: pointer; border-radius: 15px; transition: .16s; }
.seg button:hover { color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.seg button.on { background: var(--cyan-dim); color: var(--cyan); }
.seg button.on.seg-sell { color: #fff; background: linear-gradient(135deg, var(--red), #be123c); }
.seg button.on.seg-buy { color: #032417; background: linear-gradient(135deg, var(--green), #16a34a); }

/* ---------- inputs ---------- */
.inp {
  background: var(--inset); border: 1px solid var(--border-hi); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  border-radius: 8px; padding: 7px 10px; font-size: 12.5px; font-family: var(--sans); width: 100%;
  transition: border-color .16s, box-shadow .16s;
}
.inp:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(59, 130, 246, .2); }
.inp-wide { margin-top: 10px; }
select.inp { cursor: pointer; }
input[type="checkbox"] { accent-color: var(--cyan); width: 15px; height: 15px; cursor: pointer; }
input[type="date"].inp, input[type="time"].inp { color-scheme: dark; }

/* ---------- switch ---------- */
.switch { display: inline-flex; align-items: center; cursor: pointer; }
.switch input { display: none; }
.slider { width: 40px; height: 21px; border-radius: 12px; position: relative; background: var(--inset); border: 1px solid var(--border-hi); transition: .2s; }
.slider::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--text-faint); transition: transform .2s, background .2s; }
.switch input:checked + .slider { background: var(--cyan-dim); border-color: var(--cyan); }
.switch input:checked + .slider::after { transform: translateX(19px); background: var(--cyan); box-shadow: var(--glow-cyan); }

/* ---------- chips ---------- */
.chip { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 800; letter-spacing: .8px; border: 1px solid var(--border-hi); color: var(--text-dim); background: var(--inset); }
.chip-entry  { color: var(--green); border-color: rgba(34, 197, 94, .45); background: var(--green-dim); }
.chip-exit   { color: var(--amber); border-color: rgba(234, 179, 8, .45); background: var(--amber-dim); }
.chip-closed { color: var(--red);   border-color: rgba(239, 68, 68, .45); background: var(--red-dim); }
/* OPEN position = green pulsing chip; CLOSED row = poori dim (ek nazar me fark) */
.chip-openpos { color: var(--green); border-color: rgba(34, 197, 94, .55); background: rgba(34, 197, 94, .10);
  box-shadow: 0 0 8px rgba(34, 197, 94, .25); animation: openPulse 2.2s ease-in-out infinite; }
@keyframes openPulse { 50% { box-shadow: 0 0 14px rgba(34, 197, 94, .5); } }
tr.pos-closed { opacity: .42; }
tr.pos-closed:hover { opacity: .8; }
.chip-live   { color: var(--cyan);  border-color: rgba(59, 130, 246, .5); background: var(--cyan-dim); box-shadow: var(--glow-sm); }
.chip-paper  { color: var(--amber); border-color: rgba(234, 179, 8, .45); background: var(--amber-dim); }
.chip-real   { color: #fff; background: linear-gradient(90deg, var(--red), #be123c); border-color: var(--red); }

/* ---------- settings ---------- */
.set-grid { display: flex; flex-direction: column; gap: 7px; }
.set-grid.pad { padding: 14px; }
.set-sec { font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); margin: 14px 0 3px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; }
.set-row .inp, .set-row select { width: 200px; }
.win-rows { display: flex; flex-direction: column; gap: 6px; }
.win-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-dim); }
.win-row .inp { width: 116px; }

/* ---------- modals ---------- */
.modal-bg { position: fixed; inset: 0; z-index: 100; background: rgba(4, 6, 12, .82); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; }
.modal { width: 470px; max-width: calc(100vw - 40px); background: var(--panel-2); border: 1px solid var(--border-hi); border-radius: 15px; padding: 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, .7), 0 0 30px rgba(59, 130, 246, .1); }
.modal h3 { font-size: 14px; letter-spacing: 1px; margin-bottom: 12px; }
.modal-note { color: var(--text-dim); font-size: 12px; line-height: 1.55; margin-bottom: 12px; }
.url-box { display: block; font-family: var(--mono); font-size: 11px; background: var(--inset); border: 1px solid var(--border); padding: 9px 10px; border-radius: 8px; color: var(--cyan); word-break: break-all; }
.modal-err { color: var(--red); font-size: 12px; min-height: 16px; margin-top: 8px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---------- toasts ---------- */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 11px 16px; border-radius: 11px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--border-hi); background: var(--panel-2); box-shadow: 0 12px 34px rgba(0, 0, 0, .5); animation: slide-in .22s var(--fx); backdrop-filter: blur(8px); }
.toast.ok { border-color: rgba(34, 197, 94, .5); color: var(--green); box-shadow: 0 12px 34px rgba(0,0,0,.5), var(--glow-green); }
.toast.err { border-color: rgba(239, 68, 68, .5); color: var(--red); box-shadow: 0 12px 34px rgba(0,0,0,.5), var(--glow-red); }

/* ---------- footer ---------- */
.foot { padding: 9px 18px; font-size: 10px; color: var(--text-faint); border-top: 1px solid var(--border); display: flex; align-items: center; gap: 6px; }

/* ---------- cards spacing in single-col pages ---------- */
.view > .card + .card { margin-top: 14px; }

/* ---------- responsive ---------- */
@media (max-width: 1150px) {
  .dash-grid { grid-template-columns: 1fr; grid-template-areas: "scanner" "chain" "pos" "journal"; }
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .sidebar { width: 66px; flex-basis: 66px; }
  .sb-title, .sb-sub, .sb-item span + *, .sb-card, .sb-api { display: none; }
  .sb-item { justify-content: center; }
  .kpibar { flex-wrap: wrap; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- scrollbars ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(59, 130, 246, .35); }
::-webkit-scrollbar-track { background: transparent; }