/* =============================================================================
   TERMINAL

   Glass panels floating on an ambient wash, rather than the hard 1px grid this
   started as. Same three regions, more air between them, larger type, bigger
   targets. Every panel is its own card so it is obvious where one thing ends
   and the next begins.
   ========================================================================== */

body.term-page {
  font-size: 13.5px;
  overflow: hidden;
  height: 100vh;
  background: var(--ambient), var(--bg);
  background-attachment: fixed;
}

.term-page .mono,
.term-page table { font-variant-numeric: tabular-nums; }

/* the shared card look */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-l);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}

/* ---------------- top bar ---------------- */
.tbar {
  height: 58px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; background: rgba(10,10,12,.6);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-line);
  position: relative; z-index: 40;
}
.tbar-left { display: flex; align-items: center; gap: 26px; }
.tbar .brand { font-size: 15.5px; }
.tbar .brand svg { width: 23px; height: 23px; }
.tnav { display: flex; gap: 4px; }
.tnav a {
  color: var(--muted); font-size: 13.5px; padding: 7px 12px; border-radius: 9px;
  transition: color .15s, background .15s;
}
.tnav a:hover { color: var(--text); background: var(--glass-hi); }
.tnav a.on { color: var(--text); background: var(--glass-2); }
.tbar-right { display: flex; align-items: center; gap: 9px; }

.feed-chip {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px;
  background: var(--glass-2); border: 1px solid var(--glass-line); border-radius: 999px;
  font-size: 12px; color: var(--muted); white-space: nowrap;
}
.feed-chip .bar { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.feed-chip.live .bar { background: var(--up); box-shadow: 0 0 0 3px rgba(61,220,151,.16); }
.feed-chip.warn .bar { background: var(--warn); box-shadow: 0 0 0 3px rgba(245,165,36,.16); }

.tbtn {
  height: 36px; padding: 0 15px; border-radius: 10px;
  border: 1px solid var(--glass-line); background: var(--glass-2); color: var(--text);
  font-size: 13px; font-weight: 500;
  transition: background .15s, border-color .15s, transform .1s;
}
.tbtn:hover { background: var(--glass-hi); border-color: var(--glass-line-2); }
.tbtn:active { transform: translateY(1px); }
.tbtn-primary { background: var(--accent); border-color: var(--accent); color: #1a0707; font-weight: 650; }
.tbtn-primary:hover { background: #ff7676; border-color: #ff7676; }
.tbtn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------- market header ---------------- */
.mhead {
  display: flex; align-items: stretch; gap: 14px; margin: 14px 14px 0;
  height: 74px; border-radius: var(--radius-l);
  background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  position: relative; z-index: 30;
}
.mpick {
  display: flex; align-items: center; gap: 12px; padding: 0 18px 0 16px;
  border-right: 1px solid var(--glass-line); cursor: pointer; min-width: 250px;
  border-radius: var(--radius-l) 0 0 var(--radius-l);
  transition: background .15s;
}
.mpick:hover { background: var(--glass-hi); }
.mpick img { width: 52px; height: 34px; object-fit: contain; }
.mpick .nm { font-size: 15.5px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.mpick .sub { font-size: 11px; color: var(--dim); font-family: var(--mono); margin-top: 3px; letter-spacing: .04em; }
.mpick .car { color: var(--muted); font-size: 11px; margin-left: auto; }

.mstats { display: flex; gap: 30px; padding: 0 20px; flex: 1; overflow-x: auto; align-items: center; }
.mstats::-webkit-scrollbar { height: 0; }
.mstat { display: flex; flex-direction: column; gap: 5px; white-space: nowrap; }
.mstat .k { font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
.mstat .v { font-size: 14px; font-family: var(--mono); }
.mstat .v.big { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }

/* market dropdown */
.mdrop {
  position: absolute; top: 150px; left: 14px; width: 400px; z-index: 60;
  background: rgba(18,18,22,.86); border: 1px solid var(--glass-line-2);
  border-radius: var(--radius-l); box-shadow: var(--shadow-lg);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  display: none; flex-direction: column; max-height: 64vh; overflow: hidden;
}
.mdrop.open { display: flex; }
.mdrop-head { padding: 12px; border-bottom: 1px solid var(--glass-line); }
.mdrop-head input {
  width: 100%; height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13px;
  background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text); outline: none;
}
.mdrop-head input:focus { border-color: var(--glass-line-2); }
.mdrop-body { overflow-y: auto; padding: 6px; }
.mrow {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center;
  padding: 9px 10px; cursor: pointer; border-radius: 10px;
}
.mrow:hover { background: var(--glass-hi); }
.mrow.on { background: var(--glass-2); box-shadow: inset 2px 0 0 var(--accent); }
.mrow img { width: 44px; height: 28px; object-fit: contain; }
.mrow .n { font-size: 13px; font-weight: 550; line-height: 1.25; }
.mrow .w { font-size: 10.5px; color: var(--dim); font-family: var(--mono); }
.mrow .r { text-align: right; font-family: var(--mono); }
.mrow .p { font-size: 13px; }
.mrow .c { font-size: 10.5px; }
.mdrop .none { padding: 22px; text-align: center; color: var(--dim); font-size: 13px; }

/* ---------------- three column layout ---------------- */
.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px 340px;
  gap: 14px; padding: 14px;
  height: calc(100vh - 58px - 74px - 30px - 14px);
}
.layout > .col {
  min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: var(--radius-l);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
/* needs to outrank `.layout > .col`, hence the doubled selector */
.layout > .col.col-left {
  display: grid; grid-template-rows: minmax(0, 1fr) 244px; gap: 14px;
  background: none; border: 0; border-radius: 0; backdrop-filter: none; overflow: visible;
}
.col-left > .pane {
  min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: var(--radius-l);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}

/* ---------------- panel header strip ---------------- */
.strip {
  height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 14px;
  border-bottom: 1px solid var(--glass-line); overflow-x: auto; flex: none;
}
.strip::-webkit-scrollbar { height: 0; }
.strip .t {
  color: var(--muted); font-size: 13px; cursor: pointer; white-space: nowrap;
  padding: 6px 11px; border-radius: 9px; transition: color .15s, background .15s;
}
.strip .t:hover { color: var(--text); background: var(--glass-hi); }
.strip .t.on { color: var(--text); background: var(--glass-2); }
.strip .head { color: var(--text); font-size: 13px; font-weight: 600; letter-spacing: -.01em; padding-right: 4px; }
.strip .r { margin-left: auto; display: flex; gap: 14px; align-items: center; color: var(--dim); font-size: 11.5px; white-space: nowrap; }
.strip .readout { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* ---------------- chart ---------------- */
.chart-pane { position: relative; flex: 1; min-height: 0; padding: 4px 4px 0; }
.chart { position: absolute; inset: 4px 4px 0; }
.chart-note {
  position: absolute; top: 10px; right: 80px; z-index: 3;
  font-size: 10.5px; color: var(--dim); text-align: right;
  border-bottom: 1px dotted var(--line-2); cursor: help;
}
.ohlc {
  position: absolute; top: 10px; left: 16px; z-index: 3;
  font-size: 11.5px; color: var(--dim); font-family: var(--mono); pointer-events: none;
}
.ohlc b { color: var(--muted); font-weight: 500; }

/* ---------------- tables ---------------- */
.tbl-wrap { flex: 1; overflow: auto; min-height: 0; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tbl th {
  position: sticky; top: 0; z-index: 2;
  background: rgba(18,18,22,.92);
  backdrop-filter: var(--blur-soft); -webkit-backdrop-filter: var(--blur-soft);
  text-align: right; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim); font-weight: 600; padding: 10px 14px;
  border-bottom: 1px solid var(--glass-line); white-space: nowrap;
}
table.tbl th:first-child, table.tbl td:first-child { text-align: left; }
table.tbl td {
  text-align: right; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.045);
  font-family: var(--mono); white-space: nowrap;
}
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover td { background: var(--glass-hi); }
.empty { padding: 34px 18px; text-align: center; color: var(--dim); font-size: 13px; font-family: var(--sans); }
.empty a { color: var(--accent); }

.tag {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10.5px;
  font-family: var(--mono); border: 1px solid var(--glass-line);
}
.tag.long { color: var(--up); border-color: rgba(61,220,151,.32); background: rgba(61,220,151,.1); }
.tag.short { color: var(--down); border-color: rgba(229,72,77,.32); background: rgba(229,72,77,.1); }
.x-btn {
  font-size: 11.5px; color: var(--muted); border: 1px solid var(--glass-line);
  border-radius: 999px; padding: 5px 12px; background: var(--glass-2); transition: all .15s;
}
.x-btn:hover { color: var(--text); background: var(--glass-hi); border-color: var(--glass-line-2); }

/* ---------------- what it's worth ---------------- */
.dcol { flex: 1; overflow-y: auto; min-height: 0; padding: 4px 0 0; }
.dhead {
  display: grid; padding: 8px 16px 6px; font-size: 9.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--dim);
}
.dhead div:not(:first-child) { text-align: right; }
.drow {
  display: grid; padding: 7px 16px; font-size: 12.5px; font-family: var(--mono);
  position: relative; align-items: center;
}
.drow > span { position: relative; z-index: 1; }
.drow > span:not(:first-child) { text-align: right; }
.drow .fill { position: absolute; right: 8px; left: 8px; top: 1px; bottom: 1px; z-index: 0; opacity: .1; border-radius: 6px; }
.drow.ask .k { color: var(--down); }
.drow.sale .k { color: var(--up); }
.drow.sale .fill { background: var(--up); }
.drow .lbl { color: var(--muted); font-family: var(--sans); font-size: 12px; }

.dmid {
  display: grid; grid-template-columns: 1fr auto 1fr; padding: 12px 16px; margin: 8px 12px;
  font-size: 12.5px; font-family: var(--mono); color: var(--muted);
  background: var(--glass-2); border: 1px solid var(--glass-line); border-radius: var(--radius);
}
.dmid .c { text-align: center; font-family: var(--sans); font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--dim); }
.dmid .r { text-align: right; }
.dsec {
  padding: 14px 16px 4px; font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--dim);
}
.dnote {
  margin: 12px; padding: 12px 14px; font-size: 11.5px; color: var(--dim); line-height: 1.6;
  background: rgba(255,255,255,.022); border-radius: var(--radius); border: 1px solid var(--glass-line);
}

/* ---------------- order ticket ---------------- */
.of { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; padding-bottom: 4px; }
.of-side { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 14px 10px; }
.of-side button {
  height: 42px; border-radius: 11px; border: 1px solid var(--glass-line); background: var(--glass-2);
  color: var(--muted); font-weight: 600; font-size: 13.5px; transition: all .15s;
}
.of-side button:hover { color: var(--text); background: var(--glass-hi); }
.of-side button.on.buy { background: var(--up); border-color: var(--up); color: #04150e; }
.of-side button.on.sell { background: var(--down); border-color: var(--down); color: #1a0407; }

.of-type {
  display: flex; align-items: center; gap: 6px; padding: 0 14px 12px;
  color: var(--muted); font-size: 13px;
}
.of-type .t { cursor: pointer; padding: 5px 11px; border-radius: 9px; transition: all .15s; }
.of-type .t:hover { color: var(--text); background: var(--glass-hi); }
.of-type .t.on { color: var(--text); font-weight: 600; background: var(--glass-2); }
.of-type .r { margin-left: auto; font-size: 11.5px; color: var(--dim); }

.of-line { display: flex; justify-content: space-between; gap: 10px; padding: 8px 16px; font-size: 12.5px; color: var(--muted); }
.of-line .v { color: var(--text); font-family: var(--mono); }
.of-line .v.up { color: var(--up); } .of-line .v.down { color: var(--down); } .of-line .v.dim { color: var(--dim); }

.of-field { padding: 6px 14px; }
.of-field label { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 7px; }
.of-input {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px;
  border: 1px solid var(--glass-line); border-radius: 11px; background: var(--glass-2);
  transition: border-color .15s;
}
.of-input:focus-within { border-color: var(--glass-line-2); }
.of-input input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-family: var(--mono); font-size: 15px; color: var(--text); }
.of-input span { font-size: 12px; color: var(--dim); font-family: var(--mono); }
.of-field select {
  width: 100%; height: 44px; padding: 0 13px; border-radius: 11px; font-size: 13.5px;
  border: 1px solid var(--glass-line); background: var(--glass-2); color: var(--text); outline: none;
}
.of-field select:focus { border-color: var(--glass-line-2); }
.of-chips { display: flex; gap: 6px; margin-top: 8px; }
.of-chips button {
  flex: 1; height: 32px; border-radius: 9px; border: 1px solid var(--glass-line);
  background: var(--glass-2); color: var(--muted); font-size: 12px; font-family: var(--mono);
  transition: all .15s;
}
.of-chips button:hover { color: var(--text); background: var(--glass-hi); }

.of-lev { padding: 10px 14px 6px; }
.of-lev input[type=range] { width: 100%; accent-color: var(--accent); }
.of-lev .row { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11.5px; color: var(--dim); margin-top: 4px; }
.of-lev .row b { color: var(--text); font-weight: 600; }

.of-sum {
  margin: 12px 14px 0; padding: 6px 0;
  background: rgba(255,255,255,.022); border: 1px solid var(--glass-line); border-radius: var(--radius);
}
.of-cta { margin: 14px; }
.of-cta .tbtn { width: 100%; height: 46px; font-size: 14px; border-radius: 12px; }
.of-err { padding: 0 16px; font-size: 12px; color: var(--down); min-height: 16px; }
.of-note { padding: 4px 16px 18px; font-size: 11.5px; color: var(--dim); line-height: 1.6; }

canvas.payoff { width: calc(100% - 28px); height: 132px; display: block; margin: 12px 14px 0; }

/* ---------------- option chain ---------------- */
table.chain { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--mono); }
table.chain th {
  position: sticky; top: 0; z-index: 2;
  background: rgba(18,18,22,.92);
  backdrop-filter: var(--blur-soft); -webkit-backdrop-filter: var(--blur-soft);
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
  font-weight: 600; padding: 9px 4px; border-bottom: 1px solid var(--glass-line); font-family: var(--sans);
}
table.chain td { padding: 8px 4px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; }
table.chain td.k { background: rgba(255,255,255,.03); font-weight: 600; }
table.chain tr.atm td.k { color: var(--accent); }
table.chain td.itm { background: rgba(255,255,255,.02); }
table.chain td:hover { background: var(--glass-hi); }
table.chain td.sel { outline: 1px solid var(--accent); outline-offset: -1px; border-radius: 4px; }

/* ---------------- status bar ---------------- */
.sbar {
  height: 30px; border-top: 1px solid var(--glass-line); display: flex; align-items: center;
  justify-content: space-between; padding: 0 18px; font-size: 11.5px; color: var(--dim);
  background: rgba(10,10,12,.6);
  backdrop-filter: var(--blur-soft); -webkit-backdrop-filter: var(--blur-soft);
  gap: 14px; overflow: hidden;
}
.sbar .l, .sbar .r { display: flex; gap: 18px; white-space: nowrap; }
.sbar b { color: var(--muted); font-weight: 500; }
.sbar .ok { color: var(--up); } .sbar .warn { color: var(--warn); }
.sbar .sb-link { color: var(--muted); }
.sbar .sb-link:hover { color: var(--text); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.09); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.16); }
::-webkit-scrollbar-track { background: transparent; }

/* =============================================================================
   MARKET PICKER — the screen the terminal opens on
   ========================================================================== */
.picker {
  height: calc(100vh - 58px - 30px);
  overflow-y: auto;
  padding: 30px 24px 70px;
}
.pick-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; max-width: 1200px; margin: 0 auto 24px;
}
.pick-head h1 { font-size: 34px; letter-spacing: -.035em; }
.pick-head p { color: var(--muted); font-size: 14.5px; margin-top: 9px; }
.pick-head input {
  width: 280px; height: 44px; padding: 0 16px; border-radius: 12px; font-size: 14px;
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--text); outline: none;
  backdrop-filter: var(--blur-soft); -webkit-backdrop-filter: var(--blur-soft);
}
.pick-head input:focus { border-color: var(--glass-line-2); }

.pick-tiers { display: flex; gap: 8px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto 16px; }
.pick-tiers button {
  height: 36px; padding: 0 17px; border-radius: 999px; border: 1px solid var(--glass-line);
  background: var(--glass); font-size: 13px; color: var(--muted); transition: all .15s;
}
.pick-tiers button:hover { color: var(--text); background: var(--glass-hi); }
.pick-tiers button.on { color: var(--text); border-color: var(--glass-line-2); background: var(--glass-2); }

.pick-wrap {
  max-width: 1200px; margin: 0 auto;
  background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: var(--radius-xl); overflow-x: auto; overflow-y: hidden;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
}
table.pick-tbl th.sortable { cursor: pointer; user-select: none; }
table.pick-tbl th.sortable:hover { color: var(--muted); }
table.pick-tbl th.on { color: var(--text); }
table.pick-tbl td { padding: 12px 16px; font-size: 13px; }
table.pick-tbl th { padding: 12px 16px; }
table.pick-tbl tbody tr { cursor: pointer; }
.pick-name { display: flex; align-items: center; gap: 14px; font-family: var(--sans); }
.pick-name img { width: 62px; height: 40px; object-fit: contain; flex: none; }
.pick-name span { display: flex; flex-direction: column; gap: 3px; }
.pick-name b { font-size: 14px; font-weight: 560; letter-spacing: -.012em; }
.pick-name i { font-style: normal; font-size: 11px; color: var(--dim); font-family: var(--mono); }
.pick-spark { width: 130px; padding-right: 6px !important; }
svg.spark { width: 116px; height: 28px; display: block; opacity: .85; }
.pick-go {
  display: inline-block; padding: 6px 15px; border-radius: 999px;
  border: 1px solid var(--glass-line); background: var(--glass-2);
  font-family: var(--sans); font-size: 12.5px; color: var(--muted); transition: all .15s;
}
tbody tr:hover .pick-go { color: #1a0707; background: var(--accent); border-color: var(--accent); }
.pick-note { max-width: 1200px; margin: 16px auto 0; font-size: 12px; color: var(--dim); }

/* ---------------- narrow ---------------- */
@media (max-width: 1240px) {
  body.term-page { overflow: auto; height: auto; }
  .layout { grid-template-columns: 1fr; height: auto; }
  .layout > .col.col-left { grid-template-rows: 440px 300px; }
  .layout > .col { max-height: none; }
  .dcol, .of { overflow: visible; }
  .mdrop { left: 14px; right: 14px; width: auto; }
  .picker { height: auto; }
}
/* drop the least important columns before the table starts scrolling */
@media (max-width: 1150px) {
  table.pick-tbl th:nth-child(8), table.pick-tbl td:nth-child(8) { display: none; }
}
@media (max-width: 820px) {
  .picker { padding: 20px 14px 50px; }
  .pick-head h1 { font-size: 27px; }
  .pick-head input { width: 100%; }
  table.pick-tbl th:nth-child(2), table.pick-tbl td:nth-child(2),
  table.pick-tbl th:nth-child(5), table.pick-tbl td:nth-child(5),
  table.pick-tbl th:nth-child(8), table.pick-tbl td:nth-child(8) { display: none; }
  .pick-name img { width: 48px; height: 32px; }
}
@media (max-width: 700px) {
  .tnav { display: none; }
  .tbar { padding: 0 14px; }
  .mhead { height: auto; flex-direction: column; align-items: stretch; margin: 12px 12px 0; }
  .mpick { min-width: 0; border-right: 0; border-bottom: 1px solid var(--glass-line); padding: 12px 14px; border-radius: var(--radius-l) var(--radius-l) 0 0; }
  .mstats { gap: 22px; padding: 14px; }
  .layout { padding: 12px; gap: 12px; }
}

/* chart toolbar: range buttons and the candle/line toggle */
.strip .rng { display: flex; gap: 4px; }
.strip .rng .t { font-family: var(--mono); font-size: 12px; padding: 5px 10px; }

/* price sources */
.drow.src .lbl i { font-style: normal; color: var(--dim); font-size: 11px; }
.drow.src .k { color: var(--text); }
.drow.src .off { font-size: 11.5px; color: var(--dim); width: 56px; text-align: right; }
.dnote.warn { border-color: rgba(245,165,36,.3); background: rgba(245,165,36,.06); color: #d9b980; }

/* ---------------- keyboard ---------------- */
#keyflash {
  position: fixed; left: 50%; bottom: 54px; transform: translate(-50%, 8px);
  z-index: 60; pointer-events: none;
  padding: 9px 16px; border-radius: 10px;
  background: var(--glass-2); border: 1px solid var(--glass-line-2);
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  font: 500 13px/1 var(--mono); color: var(--text);
  opacity: 0; transition: opacity .16s ease, transform .16s ease;
}
#keyflash.on { opacity: 1; transform: translate(-50%, 0); }

#keysheet {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.ks-card {
  width: min(440px, calc(100vw - 32px));
  background: var(--glass-2); border: 1px solid var(--glass-line-2);
  border-radius: 16px; padding: 18px 20px 16px;
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
}
.ks-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ks-head b { font-size: 15px; }
.ks-rows { display: grid; gap: 2px; }
.ks-row {
  display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 12px;
  padding: 7px 0; border-top: 1px solid var(--glass-line);
}
.ks-row:first-child { border-top: 0; }
.ks-row span { font-size: 13px; color: var(--muted); }
.ks-row kbd {
  display: inline-block; text-align: center;
  padding: 4px 7px; border-radius: 6px;
  background: var(--glass-hi); border: 1px solid var(--glass-line-2);
  font: 500 11.5px/1 var(--mono); color: var(--text); white-space: nowrap;
}
.ks-note {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--glass-line);
  font-size: 12px; line-height: 1.55; color: var(--dim);
}
.sb-keys { cursor: pointer; color: var(--dim); }
.sb-keys:hover { color: var(--muted); }
.sb-keys kbd {
  padding: 1px 5px; margin: 0 1px; border-radius: 4px;
  background: var(--glass-hi); border: 1px solid var(--glass-line);
  font: 500 10.5px/1.5 var(--mono);
}

/* ---------------- strategies ---------------- */
.of-strat {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--glass-line);
}
.of-strat .t {
  padding: 5px 9px; border-radius: 7px; cursor: pointer;
  font: 500 11.5px/1 var(--mono); color: var(--dim);
  border: 1px solid transparent; white-space: nowrap;
}
.of-strat .t:hover { color: var(--text); background: var(--glass-hi); }
.of-strat .t.on { color: var(--text); background: var(--glass-hi); border-color: var(--glass-line-2); }

.of-blurb {
  font-size: 12px; line-height: 1.55; color: var(--muted);
  margin-bottom: 10px;
}
.of-legs { display: grid; gap: 3px; margin-bottom: 12px; }
.of-leg {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: 8px;
  background: var(--glass-hi); border: 1px solid var(--glass-line);
  font: 500 12px/1 var(--mono);
}
.of-leg.buy { border-left: 2px solid var(--up); }
.of-leg.sell { border-left: 2px solid var(--down); }
.of-leg .v { color: var(--muted); }
.of-axis {
  font-size: 11.5px; line-height: 1.55; color: var(--dim);
  margin: 6px 0 12px;
}
.of-axis b { color: var(--muted); font-weight: 500; }

/* ---------------- chart context menu ---------------- */
.cmenu {
  position: fixed; z-index: 65; min-width: 172px;
  padding: 6px; border-radius: 11px;
  background: var(--glass-2); border: 1px solid var(--glass-line-2);
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
}
.cmenu-head {
  padding: 6px 9px 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--glass-line);
  font: 600 13px/1 var(--mono); color: var(--text);
}
.cmenu-head span { font-weight: 400; color: var(--dim); margin-left: 4px; }
.cmenu button {
  display: block; width: 100%; text-align: left;
  padding: 7px 9px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--muted);
  font: 500 12.5px/1 var(--mono);
}
.cmenu button:hover { background: var(--glass-hi); color: var(--text); }

/* ---------------- grouped strategy legs ---------------- */
tr.grp td { border-top: 1px solid var(--glass-line-2); }
tr.sub td { color: var(--muted); padding-top: 4px; padding-bottom: 4px; }
tr.sub td:nth-child(2) { padding-left: 18px; }
.tag.strat {
  background: var(--glass-hi); border: 1px solid var(--glass-line-2); color: var(--text);
}

/* ---------------- network switch ---------------- */
.netsw {
  display: flex; gap: 2px; padding: 3px; margin-right: 8px;
  border-radius: 10px;
  background: var(--glass); border: 1px solid var(--glass-line);
}
.netsw button {
  padding: 5px 10px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--dim);
  font: 500 11.5px/1 var(--mono); white-space: nowrap;
}
.netsw button:hover { color: var(--text); background: var(--glass-hi); }
.netsw button.on { color: var(--text); background: var(--glass-hi); box-shadow: inset 0 0 0 1px var(--glass-line-2); }
.netsw button.real.on { color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255,99,99,.4); }

.sbar .sb-real { color: var(--accent); }
.sbar .sb-test { color: var(--warn); }

/* wallet picker styles live in base.css: the landing page needs them too */