/* Moveintrade terminal (demo). Compact exchange layout (docs/15): near-black page, #101014 panels split by 4px gaps,
   green/red sampled from the owner's reference, Moveintrade copper kept for the brand and primary actions. */
@font-face { font-family: "Rupee"; src: url("../assets/fonts/inter-rupee.woff2") format("woff2"); font-weight: 100 900; unicode-range: U+20B9; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/jbmono-var.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../assets/fonts/newsreader-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
:root {
  --bg: #08080a; --panel: #101014; --panel-2: #17181d; --panel-3: #22232a; --btn: #404347;
  --line: rgba(255, 255, 255, .06); --line-2: rgba(255, 255, 255, .11);
  --text: #eaecef; --text-2: #b1b5bd; --text-3: #7a7e87;
  --copper: #c8572e; --copper-2: #e27a50;
  --green: #20b26c; --green-d: #15834f; --green-bg: rgba(32, 178, 108, .16);
  --red: #ef454a; --red-d: #b8343a; --red-bg: rgba(239, 69, 74, .16);
  --ask-depth: #33181d; --bid-depth: #164831;
  --sans: "Rupee", "Inter", system-ui, sans-serif; --mono: "Rupee", "JetBrains Mono", ui-monospace, monospace; --serif: "Newsreader", Georgia, serif;
  --gap: 4px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 12px/1.4 var(--sans); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--copper-2); outline-offset: 1px; }
/* dark, thin scrollbars everywhere (the market list used the browser's white default) */
* { scrollbar-width: thin; scrollbar-color: #2a2c33 transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2c33; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #3a3d46; }
::-webkit-scrollbar-corner { background: transparent; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up { color: var(--green); } .down { color: var(--red); }
.lbl { display: block; font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.sub { font: 400 13px/1.4 var(--sans); color: var(--text-3); margin-left: 10px; }
.btn { height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--copper); color: #fff; font-weight: 600; white-space: nowrap; }
.btn:hover { background: #d6633a; }
.btn.big { width: 100%; height: 40px; font-size: 14px; }
.ghost { width: 100%; height: 34px; margin-top: 6px; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); }
.x { width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); }
.x:hover { background: var(--panel-3); color: var(--text); }

/* ── top bar ─────────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 12px; background: var(--panel); border-bottom: 1px solid var(--bg); }
.brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--text); }
.brand svg { width: 16px; height: 16px; color: var(--copper-2); }
.demo { padding: 1px 6px; border-radius: 4px; background: rgba(200, 87, 46, .18); color: var(--copper-2); font: 600 9.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tabsnav { display: flex; gap: 2px; }
.tabsnav button { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); font-weight: 500; }
.tabsnav button:hover { color: var(--text); }
.tabsnav button.on { color: var(--text); background: var(--panel-3); }
.feed { display: flex; align-items: center; gap: 6px; font: 500 10.5px/1 var(--mono); color: var(--text-3); white-space: nowrap; }
.feed i { width: 6px; height: 6px; border-radius: 50%; background: #5a5d66; }
.feed.ok i { background: var(--green); box-shadow: 0 0 0 3px rgba(32, 178, 108, .18); }
.feed.bad i { background: var(--red); }
.acct { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.acct .lbl { font-size: 10px; } .acct b { font-size: 12.5px; }

/* ── trade grid ──────────────────────────────────────────────────────────── */
.grid { position: relative; display: grid; gap: var(--gap); padding: var(--gap); height: calc(100dvh - 42px - 28px); min-height: 560px;
  grid-template-columns: minmax(0, 1fr) 250px 284px; grid-template-rows: auto minmax(0, 1fr) 188px 24px;
  grid-template-areas: "sym sym ticket" "chart book ticket" "bottom bottom ticket" "tape tape tape"; }
.panel { background: var(--panel); border-radius: 6px; min-width: 0; min-height: 0; }

.symbar { grid-area: sym; display: flex; align-items: center; gap: 16px; height: 50px; padding: 0 12px 0 6px; background: var(--panel); border-radius: 6px; min-width: 0; }
.mtoggle { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); }
.mtoggle:hover, .mtoggle[aria-expanded="true"] { background: var(--panel-3); color: var(--text); }
.sym { display: flex; align-items: center; gap: 8px; flex: none; } .sym b { display: block; font-size: 15px; line-height: 1.15; } .sym span:not(.ic) { color: var(--text-3); font-size: 10.5px; }
.ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--copper); color: #fff; font: 700 9.5px/1 var(--sans); }
.bigpx { flex: none; } .bigpx b { display: block; font-size: 16px; line-height: 1.15; } .bigpx span { font-size: 10.5px; color: var(--text-3); }
.stats { display: flex; gap: 18px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .stats::-webkit-scrollbar { display: none; }
.st { flex: none; } .st b { font-size: 12px; font-weight: 500; }
.symbar .net { margin-left: auto; flex: none; }

/* markets drawer: opens over the chart from the ☰ button */
.drawer { position: absolute; z-index: 25; left: var(--gap); top: calc(var(--gap) + 54px); width: 300px; max-height: calc(100% - 62px); display: flex; flex-direction: column;
  background: var(--panel-2); border-radius: 8px; box-shadow: 0 0 0 1px var(--line-2), 0 18px 50px rgba(0, 0, 0, .6); }
.dhead { display: flex; gap: 6px; padding: 8px; } .dhead input { flex: 1; min-width: 0; height: 30px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel); outline: none; }
.dhead input:focus { border-color: var(--copper); }
#mList { overflow: auto; }
.mhead, .mrow { display: grid; grid-template-columns: 1fr auto 62px; gap: 8px; padding: 6px 12px; align-items: center; }
.mhead { font-size: 10.5px; color: var(--text-3); border-bottom: 1px solid var(--line); }
.mrow { width: 100%; border: 0; background: transparent; text-align: left; }
.mrow:hover { background: var(--panel-3); } .mrow.on { background: var(--panel-3); box-shadow: inset 2px 0 0 var(--copper); }
.mrow b { display: block; font-size: 12px; } .mrow small { color: var(--text-3); font-size: 10.5px; }
.mrow .mono { text-align: right; font-size: 11.5px; }
.mrow .stale { color: var(--text-3); }
.flash-up { animation: fu .6s; } .flash-down { animation: fd .6s; }
@keyframes fu { from { background: var(--green-bg); } } @keyframes fd { from { background: var(--red-bg); } }

/* chart */
.chartp { grid-area: chart; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.chartbody { display: grid; grid-template-columns: 34px minmax(0, 1fr); min-height: 0; min-width: 0; overflow: hidden; }   /* a grid item grows to its content (the chart canvas) unless told not to */
.chartbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 32px; padding: 0 8px; border-bottom: 1px solid var(--line); }
.ivs { display: flex; gap: 1px; } .ivs button { height: 24px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: var(--text-3); font: 500 11.5px/1 var(--mono); }
.ivs button:hover { color: var(--text); } .ivs button.on { color: var(--copper-2); background: var(--panel-2); }
.credit { font-size: 10.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .credit a { color: var(--text-2); }
.chart { min-height: 0; min-width: 0; position: relative; overflow: hidden; }

/* order book */
.bookp { grid-area: book; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto minmax(0, 1fr) auto; overflow: hidden; }
.phead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; height: 32px; padding: 9px 10px 0; border-bottom: 1px solid var(--line); }
.phead b { font-size: 12px; } .phead small { color: var(--text-3); font-size: 10px; }
.bkcols, .bkr { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 6px; padding: 0 10px; }
.bkcols { padding-top: 6px; padding-bottom: 4px; font-size: 10.5px; color: var(--text-3); } .bkcols span:not(:first-child) { text-align: right; }
.bk { display: flex; flex-direction: column; overflow: hidden; } .bk.asks { justify-content: flex-end; }
.bkr { position: relative; height: 19px; align-items: center; font: 400 11.5px/1 var(--mono); font-variant-numeric: tabular-nums; border: 0; background: transparent; text-align: left; flex: none; }
.bkr::before { content: ""; position: absolute; top: 1px; bottom: 1px; right: 0; width: var(--d, 0%); }
.asks .bkr::before { background: var(--ask-depth); } .bids .bkr::before { background: var(--bid-depth); }
.bkr span { position: relative; } .bkr span:not(:first-child) { text-align: right; color: var(--text-2); }
.asks .bkr span:first-child { color: var(--red); } .bids .bkr span:first-child { color: var(--green); }
.bkr:hover { background: var(--panel-3); }
.bkmid { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bkmid b { font-size: 14px; } .bkmid small { color: var(--text-3); font-size: 10.5px; }
.bkratio { display: flex; height: 18px; margin: 6px 10px 8px; font: 600 10.5px/18px var(--mono); border-radius: 3px; overflow: hidden; }
.bkratio span { display: flex; align-items: center; padding: 0 6px; min-width: 44px; } .bkratio i { font-style: normal; margin: 0 4px; }
.bkratio .b { background: var(--green-bg); color: var(--green); flex: var(--b, 1); } .bkratio .s { justify-content: flex-end; background: var(--red-bg); color: var(--red); flex: var(--s, 1); }
.bk .none { padding: 10px; color: var(--text-3); font-size: 11px; text-align: center; }

/* ticket */
.ticket { grid-area: ticket; padding: 10px; overflow: auto; display: flex; flex-direction: column; gap: 9px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.seg button { height: 32px; border: 0; border-radius: 6px; background: var(--panel-2); color: var(--text-3); font-weight: 600; transition: background .15s, color .15s; }
.seg.side button.on.long { background: var(--green); color: #fff; } .seg.side button.on.short { background: var(--red); color: #fff; }
.ttabs { display: flex; align-items: center; gap: 14px; height: 24px; border-bottom: 1px solid var(--line); }
.ttabs button { height: 24px; padding: 0; border: 0; background: none; color: var(--text-3); font-weight: 600; border-bottom: 2px solid transparent; }
.ttabs button.on { color: var(--copper-2); border-color: var(--copper-2); }
.ttabs .avail { margin-left: auto; color: var(--text-3); font-size: 10.5px; } .ttabs .avail b { color: var(--text); font-weight: 500; }
.fld { position: relative; display: flex; align-items: center; height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel-2); }
.fld:focus-within { border-color: var(--copper); }
.fld span { flex: none; width: 76px; font-size: 11px; color: var(--text-3); }
.fld input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; text-align: right; font: 500 13px/1 var(--mono); outline: none; -moz-appearance: textfield; }
.fld input::-webkit-outer-spin-button, .fld input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fld em { flex: none; margin-left: 6px; font: normal 500 11px/1 var(--mono); color: var(--text-3); }
.fld.sm { height: 32px; } .fld.sm span { width: 72px; }
.chips { display: flex; gap: 4px; } .chips button { flex: 1; height: 24px; border: 0; border-radius: 4px; background: var(--panel-2); color: var(--text-3); font: 500 11px/1 var(--mono); }
.chips button.on, .chips button:hover { background: var(--panel-3); color: var(--text); }
.lev .row { display: flex; justify-content: space-between; color: var(--text-3); font-size: 11px; margin-bottom: 5px; } .lev b { color: var(--text); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--copper) var(--fill, 20%), #2c2e35 var(--fill, 20%)); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--copper); }
input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border: 3px solid var(--copper); border-radius: 50%; background: #fff; }
.ticks { display: flex; justify-content: space-between; margin-top: 5px; font: 500 10px/1 var(--mono); color: var(--text-3); }
.tpsl-t { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 11.5px; cursor: pointer; } .tpsl-t input { accent-color: var(--copper); margin: 0; }
.tpsl { display: grid; gap: 5px; }
.sum { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 0; font-size: 11.5px; }
.sum dt { color: var(--text-3); } .sum dd { margin: 0; text-align: right; } .sum .liq { color: var(--red); }
.place { flex: none; height: 38px; border: 0; border-radius: 6px; color: #fff; font-size: 14px; font-weight: 700; transition: transform .1s, filter .2s; }
.place.long { background: var(--green); } .place.short { background: var(--red); }
.place:hover { filter: brightness(1.08); } .place:active { transform: scale(.98); } .place:disabled { filter: grayscale(.6) brightness(.7); cursor: wait; }
.msg { min-height: 1.3em; margin: 0; font-size: 11.5px; color: var(--text-3); } .msg.ok { color: var(--green); } .msg.err { color: var(--red); }
.risk { margin: auto 0 0; padding: 8px; border-radius: 6px; background: var(--panel-2); color: var(--text-3); font-size: 10.5px; }
.sess { font-size: 11px; color: var(--text-2); line-height: 1.45; } .sess b { color: var(--text); }
.warn { margin: 0; padding: 6px 8px; border-radius: 6px; background: var(--red-bg); color: var(--red); font-size: 11px; }

/* bottom: positions / orders / history / wallet */
.bottom { grid-area: bottom; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.btabs { display: flex; gap: 18px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.btabs button { height: 32px; padding: 0; border: 0; background: none; color: var(--text-3); font-weight: 600; border-bottom: 2px solid transparent; }
.btabs button:hover { color: var(--text); } .btabs button.on { color: var(--text); border-color: var(--copper-2); }
.btabs span { color: var(--copper-2); }
.bbody { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
th { position: sticky; top: 0; z-index: 1; background: var(--panel); text-align: right; font-weight: 500; color: var(--text-3); padding: 6px 10px; white-space: nowrap; }
td { text-align: right; padding: 6px 10px; border-top: 1px solid var(--line); white-space: nowrap; font-family: var(--mono); }
th:first-child, td:first-child { text-align: left; }
td .pill { display: inline-block; padding: 1px 6px; border-radius: 4px; font: 600 10px/1.4 var(--sans); }
.pill.long { background: var(--green-bg); color: var(--green); } .pill.short { background: var(--red-bg); color: var(--red); }
td button { height: 22px; padding: 0 8px; border: 0; border-radius: 4px; background: var(--panel-3); color: var(--text); font: 500 10.5px/1 var(--sans); margin-left: 4px; }
td button:hover { background: var(--btn); } td button.x { width: auto; background: var(--red-bg); color: #ff9a9d; }
td .tpv { color: var(--text-2); } td .tpv i { font-style: normal; color: var(--text-3); }
.empty { padding: 22px; text-align: center; color: var(--text-3); font-family: var(--sans); }

/* bottom ticker tape */
.tape { grid-area: tape; display: flex; align-items: center; overflow: hidden; background: var(--panel); border-radius: 6px; font: 500 11px/1 var(--mono); }
.tapein { display: flex; gap: 22px; padding-left: 100%; white-space: nowrap; animation: tape 60s linear infinite; }
.tape:hover .tapein { animation-play-state: paused; }
.tapein button { border: 0; background: none; padding: 0; color: var(--text-2); } .tapein button b { color: var(--text); font-weight: 600; margin-right: 6px; }
@keyframes tape { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .tapein { animation: none; padding-left: 12px; } }

/* ── other views ─────────────────────────────────────────────────────────── */
.page { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }
.page h2 { margin: 0 0 16px; font: 400 28px/1.15 var(--serif); }
.page h3 { margin: 0 0 10px; font: 600 13px/1.3 var(--sans); }
.page h3 .sub { display: block; margin: 4px 0 0; font-weight: 400; font-size: 12px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--gap); margin-bottom: 10px; }
.kpi { padding: 12px; border-radius: 6px; background: var(--panel); }
.kpi b { display: block; margin-top: 5px; font: 600 18px/1.1 var(--mono); }
.kpi small { display: block; margin-top: 4px; color: var(--text-3); font-size: 10.5px; }
.card { padding: 14px; border-radius: 6px; background: var(--panel); margin-bottom: 10px; overflow: auto; }
.ledger { font: 500 11.5px/1.6 var(--mono); color: var(--text-3); }
.ledger b.ok { color: var(--green); } .ledger b.bad { color: var(--red); }

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .7); backdrop-filter: blur(4px); }
.sheet { width: min(400px, 100%); padding: 22px; border-radius: 10px; background: var(--panel-2); box-shadow: 0 0 0 1px var(--line-2), 0 30px 80px rgba(0, 0, 0, .6); display: grid; gap: 11px; }
.sheet h2 { margin: 0; font: 400 26px/1.1 var(--serif); }
.sheet p { margin: 0; color: var(--text-2); }
.sheet .fld { background: var(--panel); } .sheet .fld span { width: 120px; }
.sheet input#lName { height: 42px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel); font-size: 14px; outline: none; }
.lm { width: 28px; height: 28px; color: var(--copper-2); }
.tag { padding: 3px 7px; border-radius: 4px; background: rgba(200, 87, 46, .18); color: var(--copper-2); font: 600 11px/1 var(--mono); vertical-align: middle; }
.upiflow { display: flex; gap: 6px; } .upiflow span { flex: 1; padding: 8px 6px; border-radius: 6px; background: var(--panel); color: var(--text-3); font-size: 11px; text-align: center; transition: background .3s, color .3s; }
.upiflow span.on { background: rgba(200, 87, 46, .2); color: var(--text); } .upiflow span.done { background: var(--green-bg); color: var(--green); }

/* execution network badge (Rust core): paper is calm, testnet copper, mainnet red so nobody misses it */
.net { padding: 3px 7px; border-radius: 4px; font: 700 10.5px/1 var(--mono); letter-spacing: .08em; vertical-align: middle; background: var(--panel-3); color: var(--text-2); }
.net.testnet { background: rgba(200, 87, 46, .22); color: var(--copper-2); }
.net.mainnet { background: var(--red-d); color: #fff; }

/* R7: links, quiz, trading limits */
.link { padding: 0; border: 0; background: none; color: var(--copper-2); font: inherit; text-decoration: underline; cursor: pointer; }
.btn.ghost { background: var(--panel-3); }
.sheet.wide { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; }
.qq { margin: 0; padding: 10px 0; border: 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.qq legend { padding: 0; margin-bottom: 4px; color: var(--text); font-weight: 600; }
.qq label { display: flex; gap: 8px; align-items: flex-start; color: var(--text-2); font-size: 12.5px; cursor: pointer; }
.qq .why { color: var(--copper-2); font-size: 11.5px; } .qq .why:empty { display: none; }
.limits { padding: 10px; display: grid; gap: 8px; border-top: 1px solid var(--line); }
.limits h4 { margin: 0; font-size: 12.5px; } .limits p { margin: 0; color: var(--text-2); font-size: 12px; }
.limits .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.limits input, .limits select { height: 30px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel-2); color: var(--text); }
.limits input { width: 140px; }

/* R8: alerts bell, toasts, portfolio analytics */
.bell { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 6px; background: var(--panel-2); color: var(--text-2); }
.bell:hover { color: var(--text); }
.bell span { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--copper); color: #fff; font: 700 9.5px/16px var(--mono); }
.bellp { position: fixed; top: 46px; right: 12px; z-index: 40; width: min(360px, calc(100vw - 24px)); max-height: 70vh; overflow: auto; padding: 12px; border-radius: 8px; background: var(--panel-2); box-shadow: 0 0 0 1px var(--line-2), 0 20px 60px rgba(0, 0, 0, .55); }
.bellp h4 { margin: 0 0 8px; font-size: 12.5px; } .bellp h4 small { color: var(--text-3); font-weight: 400; }
.al { display: grid; gap: 2px; padding: 7px 6px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-2); }
.al time { color: var(--text-3); font: 10.5px var(--mono); }
.al.liquidation, .al.margin90 { color: var(--red); } .al.margin80 { color: var(--copper-2); }
.toasts { position: fixed; right: 12px; bottom: 36px; z-index: 60; display: grid; gap: 8px; width: min(340px, calc(100vw - 24px)); }
.toast { padding: 10px 12px; border-radius: 8px; background: var(--panel-2); box-shadow: 0 0 0 1px var(--line-2), 0 14px 40px rgba(0, 0, 0, .5); font-size: 12.5px; color: var(--text); animation: toastIn .25s ease-out; }
.toast.liquidation, .toast.margin90 { box-shadow: inset 3px 0 0 var(--red), 0 0 0 1px var(--line-2), 0 14px 40px rgba(0, 0, 0, .5); }
.toast.margin80 { box-shadow: inset 3px 0 0 var(--copper), 0 0 0 1px var(--line-2), 0 14px 40px rgba(0, 0, 0, .5); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
.curve { height: 240px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } @media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
.bar { height: 6px; border-radius: 3px; background: var(--copper); min-width: 2px; }

/* R9: phone sign-in */
.phone { display: grid; gap: 8px; } .phone .row { display: flex; gap: 8px; }
.phone input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel); color: var(--text); }
.phone small { color: var(--text-3); font-size: 11px; }
.demo-code { margin: 0; padding: 8px 10px; border-radius: 6px; background: rgba(200, 87, 46, .14); color: var(--copper-2); font: 12.5px var(--mono); }
.demo-code b { font-size: 15px; letter-spacing: .12em; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1280px) { .grid { grid-template-columns: minmax(0, 1fr) 220px 268px; } .hide-md { display: none; } }
@media (max-height: 700px) and (min-width: 861px) { .grid { grid-template-rows: auto minmax(0, 1fr) 150px 22px; } .risk { display: none; } }
@media (max-width: 1100px) and (min-width: 861px) { .hide-sm { display: none; } .stats .st:nth-child(n+4) { display: none; } }

/* phone and small tablet: the page scrolls; chart, then ticket beside the book, then positions */
@media (max-width: 860px) {
  .top { gap: 8px; flex-wrap: wrap; height: auto; padding: 6px 8px; }
  .tabsnav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; } .tabsnav::-webkit-scrollbar { display: none; }
  .feed span, .acct .hide-sm { display: none; } .acct { gap: 8px; } #addMoney { padding: 0 10px; }
  .grid { height: auto; min-height: 0; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto 46vh auto auto auto;
    grid-template-areas: "sym sym" "chart chart" "ticket book" "bottom bottom" "tape tape"; }
  .symbar { height: auto; min-height: 50px; padding: 6px 8px 6px 4px; gap: 10px; flex-wrap: wrap; }
  .stats { order: 5; width: 100%; gap: 14px; padding: 2px 0 0 36px; }
  .bigpx b { font-size: 15px; }
  .drawer { position: fixed; left: 0; top: 0; bottom: 0; width: min(320px, 88vw); max-height: none; border-radius: 0 8px 8px 0; z-index: 45; }
  .ticket { padding: 8px; gap: 7px; } .fld span { width: 56px; font-size: 10.5px; } .fld.sm span { width: 56px; }
  .sum { font-size: 11px; } .risk { display: none; }
  .bookp { grid-template-rows: auto auto auto auto auto auto; align-content: start; align-self: start; } .bk { max-height: none; } .bk.asks { justify-content: flex-start; }
  .bkmid { flex-wrap: wrap; row-gap: 0; }
  .bkcols, .bkr { grid-template-columns: 1.3fr 1fr; padding: 0 6px; } .bkcols span:nth-child(3), .bkr span:nth-child(3) { display: none; }
  .bkr { height: 18px; font-size: 11px; } .phead small { display: none; }
  .bottom { min-height: 220px; max-height: 420px; }
  .btabs { gap: 14px; overflow-x: auto; }
  .tape { height: 26px; }
  .credit { display: none; }
}
@media (max-width: 380px) { .grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); } .sym span:not(.ic) { display: none; } }
.wrow { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; } .wrow .btn.ghost { width: auto; margin: 0; height: 30px; }
.wrow input { width: 120px; height: 30px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel-2); }

/* ── docs/16: favourites, chart toolbar + drawing tools, stop orders, TP/SL modes, share card ── */
.favbar { display: flex; align-items: center; gap: 2px; height: 28px; padding: 0 8px; background: var(--panel); border-bottom: 1px solid var(--bg); overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.favbar::-webkit-scrollbar { display: none; }
.favbar .lab { color: var(--copper-2); font-size: 12px; margin-right: 6px; flex: none; }
.favbar button { flex: none; display: inline-flex; gap: 6px; align-items: baseline; height: 22px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; font: 500 11px/22px var(--mono); color: var(--text-2); }
.favbar button:hover, .favbar button.on { background: var(--panel-3); }
.favbar button b { color: var(--text); font-family: var(--sans); font-weight: 600; }
.favbar .hint { color: var(--text-3); font-size: 11px; }
.star { margin-left: 4px; width: 22px; height: 22px; border: 0; border-radius: 4px; background: transparent; color: var(--text-3); font-size: 15px; line-height: 1; }
.star:hover { color: var(--text); background: var(--panel-3); } .star[aria-pressed="true"] { color: #f0b90b; }
.mrow .star { margin: 0 4px 0 -4px; } .mrow > span:first-child { display: flex; align-items: center; } .mrow > span:first-child > span { display: block; }

.chartbar .sep, .dtools .sep { flex: none; width: 1px; height: 16px; background: var(--line-2); }
.chartbar { justify-content: flex-start; gap: 8px; }
.copts { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .copts::-webkit-scrollbar { display: none; }
.copts select { height: 24px; padding: 0 6px; border: 0; border-radius: 4px; background: var(--panel-2); color: var(--text-2); font-size: 11.5px; }
.copts button { flex: none; height: 24px; padding: 0 7px; border: 0; border-radius: 4px; background: transparent; color: var(--text-3); font: 500 11px/1 var(--sans); }
.copts button:hover { color: var(--text); } .copts button.on { color: var(--copper-2); background: var(--panel-2); }
.chartbar .credit { margin-left: auto; }
.cacts { display: flex; gap: 2px; flex: none; } .chartbar .credit.hide-md + .cacts { margin-left: 0; }
.cacts button, .dtools button { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 4px; background: transparent; color: var(--text-3); }
.cacts button:hover, .dtools button:hover { color: var(--text); background: var(--panel-2); }
.cacts button[aria-pressed="true"], .dtools button.on, .dtools button[aria-pressed="true"] { color: var(--copper-2); background: var(--panel-2); }
.dtools { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: none; }
.dtools::-webkit-scrollbar { display: none; } .dtools .sep { width: 16px; height: 1px; margin: 3px 0; }
.chart .draw { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.chart.drawing .draw { pointer-events: auto; cursor: crosshair; } .chart.erasing .draw { pointer-events: auto; cursor: not-allowed; }
.dtext { position: absolute; z-index: 4; width: 180px; height: 26px; padding: 0 8px; border: 1px solid var(--copper); border-radius: 4px; background: var(--panel-2); color: var(--text); font-size: 12px; outline: none; }
.grid.nobook { grid-template-columns: minmax(0, 1fr) 0 284px; grid-template-areas: "sym sym ticket" "chart chart ticket" "bottom bottom ticket" "tape tape tape"; }
.grid.nobook .bookp { display: none; }
.chartp:fullscreen { border-radius: 0; } .chartp:fullscreen .chartbody { height: 100%; }

.ttabs { gap: 12px; } .ttabs button { font-size: 11.5px; }
.tpsl-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tpmode { display: flex; gap: 2px; padding: 2px; border-radius: 5px; background: var(--panel-2); }
.tpmode button { height: 20px; padding: 0 6px; border: 0; border-radius: 3px; background: transparent; color: var(--text-3); font: 500 10.5px/1 var(--sans); }
.tpmode button.on { background: var(--panel-3); color: var(--text); }
.tpsl { gap: 3px; } .tpsub { min-height: 1em; margin: -1px 0 3px 2px; font: 10.5px/1.2 var(--mono); } .tpsub:empty { display: none; }
td .otype { color: var(--text-2); font-family: var(--sans); }

.sheet.share { width: min(640px, 100%); }
.sheet.share canvas { width: 100%; height: auto; border-radius: 8px; background: #0b0c0f; }
.sheet .acts { display: flex; flex-wrap: wrap; gap: 8px; } .sheet .acts .btn.ghost { width: auto; margin: 0; }
td button.sh { background: transparent; color: var(--text-2); padding: 0 6px; } td button.sh:hover { color: var(--text); background: var(--panel-3); }

@media (max-width: 860px) {
  .grid { height: auto; }
  .chartbody { grid-template-columns: 30px minmax(0, 1fr); } .dtools button { width: 24px; height: 24px; }
  .copts { order: 5; } .chartbar { flex-wrap: wrap; height: auto; padding: 4px 6px; row-gap: 2px; } .chartbar .credit { display: none; }
  .cacts { margin-left: auto; } #cBook { display: none; }
  .ttabs { gap: 10px; } .ttabs .avail { display: none; }
}

.mrow { cursor: pointer; } .mrow:focus-visible { outline: 2px solid var(--copper-2); outline-offset: -2px; }

/* phone header + symbol bar (28 Oct): one tidy row each, the stats and network badge on a second, left-aligned row */
.brk { display: none; }
@media (max-width: 860px) {
  .top { display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 8px; row-gap: 4px; padding: 6px 10px 0; height: auto; }
  .brand { font-size: 14px; } .brand .demo { font-size: 9px; padding: 1px 5px; }
  .brand { grid-row: 1; grid-column: 1; } .feed { grid-row: 1; grid-column: 2; justify-self: start; }
  .acct { grid-row: 1; grid-column: 3; justify-self: end; margin: 0; gap: 8px; }
  .acct .lbl { display: none; } .acct b { font-size: 12.5px; }
  .bell { width: 30px; height: 30px; } #addMoney { height: 30px; padding: 0 12px; }
  .hide-xs { display: none; }
  .tabsnav { grid-row: 2; grid-column: 1 / -1; order: 0; width: auto; margin: 0 -10px; padding: 0 6px 4px; }
  .tabsnav button { height: 30px; padding: 0 12px; }

  .symbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px 8px 4px; min-height: 0; }
  .sym { flex: 1 1 auto; min-width: 0; } .sym > div { min-width: 0; }
  .bigpx { flex: none; text-align: right; } .bigpx b { font-size: 16px; } .bigpx span { display: block; }
  .brk { display: block; flex-basis: 100%; height: 0; }
  .symbar .net { order: 5; margin: 0 0 0 36px; align-self: center; }
  .stats { order: 6; flex: 1 1 0; width: auto; padding: 0; gap: 14px; }
  .symbar:has(.net[hidden]) .stats { margin-left: 36px; }   /* no badge: line the stats up under the name */
}
@media (max-width: 380px) { .feed { display: none; } .top { grid-template-columns: auto 1fr; } .acct { grid-column: 2; } .brand .demo { display: none; } }