/* Styled after aggr.trade: black, edge to edge, thin dividers, a dense mono tape. Black by default; the theme
   panel (public/theme.js) switches html[data-theme] and html[data-colors], which only change these variables. */
:root {
  --bg: #0A0A0C; --pane: #0A0A0C; --bar: #111114; --line: #1D1E23; --hover: #18191D;
  --text: #E4E6EA; --muted: #7A7F8A; --faint: #4A4E57; --strong: #fff; --strong-dim: rgba(255, 255, 255, .6);
  --edge: #33363E; --edge2: #2A2C33; --tip: #24262C; --grid: #141418; --cross: #3A3D45; --rowline: rgba(0, 0, 0, .35);
  --ladder-line: #16171B; --ladder-text: #C9CCD3; --ladder-muted: #5D616B; --band: rgba(255, 255, 255, .025);
  --neutral-rgb: 122, 127, 138; --last-text: #FFE2A6;
  --buy: #3BCA6D; --sell: #EF4444; --buy-rgb: 59, 202, 109; --sell-rgb: 239, 68, 68; --buy-soft: #7FD69B; --sell-soft: #F08A8A;
  --binance: #F0B90B; --bybit: #F7A600; --okx: #E4E6EA; --okx-text: #0A0A0C; --mexc: #2E7BFF;
  --bitget: #19C2D4; --gate: #8B5CF6; --htx: #E5508A; --kucoin: #24AE8F; --bingx: #7FA6FF;
  --coinbase: #0052FF; --kraken: #5741D9; --bitfinex: #16B157; --bitstamp: #14A356; --bitmex: #E8403C;
  --ui: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
}
html[data-theme="midnight"] {
  --bg: #0B111B; --pane: #0B111B; --bar: #111A28; --line: #1D2839; --hover: #172131;
  --text: #E2E8F0; --muted: #7D8BA0; --faint: #4A576B; --edge: #2F3E54; --edge2: #263347; --tip: #1F2B3D;
  --grid: #111A27; --cross: #34445B; --ladder-line: #141D2B; --ladder-text: #C7D0DC; --ladder-muted: #56637A; --okx: #E2E8F0;
}
html[data-theme="graphite"] {
  --bg: #17181B; --pane: #17181B; --bar: #1F2125; --line: #2C2F35; --hover: #26282D;
  --text: #E8E9EC; --muted: #8E939D; --faint: #5C616B; --edge: #43474F; --edge2: #393C43; --tip: #2F3237;
  --grid: #1E2024; --cross: #484C54; --ladder-line: #212328; --ladder-text: #D0D2D7; --ladder-muted: #676C76; --okx: #E8E9EC;
}
html[data-theme="mocha"] {
  --bg: #13100E; --pane: #13100E; --bar: #1C1714; --line: #2D2520; --hover: #241E1A;
  --text: #EEE6DD; --muted: #9D9184; --faint: #61574E; --edge: #4A3F36; --edge2: #3C332C; --tip: #2C2520;
  --grid: #1A1613; --cross: #4A3F36; --ladder-line: #201A16; --ladder-text: #D9CFC4; --ladder-muted: #6E6358; --okx: #EEE6DD;
}
html[data-theme="light"] {
  --bg: #FFFFFF; --pane: #FFFFFF; --bar: #F3F4F6; --line: #E1E4E9; --hover: #ECEEF2;
  --text: #15171C; --muted: #5E6573; --faint: #9AA1AC; --strong: #000; --strong-dim: rgba(0, 0, 0, .5);
  --edge: #C5CAD3; --edge2: #D3D7DE; --tip: #2A2D33; --grid: #F1F2F5; --cross: #B5BBC5; --rowline: rgba(0, 0, 0, .05);
  --ladder-line: #EEF0F3; --ladder-text: #2B2F36; --ladder-muted: #A2A8B2; --band: rgba(0, 0, 0, .03); --last-text: #8A5A00;
  --okx: #15171C; --okx-text: #fff;
  color-scheme: light;
}
/* buy and sell: green and red, or blue and orange (for red-green colour blindness), or teal and pink */
html[data-colors="blind"] { --buy: #3D8BFF; --sell: #FF9A2E; --buy-rgb: 61, 139, 255; --sell-rgb: 255, 154, 46; --buy-soft: #8DB8FF; --sell-soft: #FFC07A; }
html[data-colors="teal"] { --buy: #1FC7B6; --sell: #F0508A; --buy-rgb: 31, 199, 182; --sell-rgb: 240, 80, 138; --buy-soft: #7EDDD3; --sell-soft: #F496B9; }
/* on white the same colors need to be darker to read */
html[data-theme="light"][data-colors="classic"] { --buy: #12994A; --sell: #D7373A; --buy-rgb: 18, 153, 74; --sell-rgb: 215, 55, 58; --buy-soft: #12994A; --sell-soft: #D7373A; }
html[data-theme="light"][data-colors="blind"] { --buy: #1F6FE5; --sell: #E07B00; --buy-rgb: 31, 111, 229; --sell-rgb: 224, 123, 0; --buy-soft: #1F6FE5; --sell-soft: #E07B00; }
html[data-theme="light"][data-colors="teal"] { --buy: #0E9E90; --sell: #D63370; --buy-rgb: 14, 158, 144; --sell-rgb: 214, 51, 112; --buy-soft: #0E9E90; --sell-soft: #D63370; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 500 13px/1.3 var(--ui); display: flex; flex-direction: column; overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.up { color: var(--buy); } .down { color: var(--sell); }

/* ---------- top bar ---------- */
.top { position: relative; display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 10px; border-bottom: 1px solid var(--line); background: var(--bar); }
.brand { display: none; }
/* the coin search: type a coin, enter or Load opens it; Load on the open coin reloads it */
.coinbar { position: relative; display: flex; align-items: center; gap: 4px; }
.coinin { display: flex; align-items: center; gap: 7px; width: 168px; height: 30px; padding: 0 8px 0 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); cursor: text; }
.coinin:hover { border-color: var(--edge2); }
.coinin:focus-within { border-color: var(--edge); }
.coinin input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; padding: 0; color: var(--text); font: 700 15px var(--ui); letter-spacing: .03em; text-transform: uppercase; }
.coinin input::placeholder { color: var(--faint); text-transform: none; font-weight: 600; }
.load { height: 30px; }
.drop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; width: 440px; max-width: calc(100vw - 20px); max-height: 70vh; display: flex; flex-direction: column; background: var(--bar); border: 1px solid var(--edge2); border-radius: 6px; box-shadow: 0 24px 60px -16px #000; overflow: hidden; }
.drop[hidden] { display: none; }
.avatar { position: relative; overflow: hidden; width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 9.5px var(--ui); letter-spacing: .02em; color: #EEF0F4; background: hsl(var(--hue, 220) 32% 36%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
html[data-theme="light"] .avatar { background: hsl(var(--hue, 220) 40% 58%); color: #fff; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.logo { background: var(--bar); color: transparent; box-shadow: none; }
.quote { display: flex; align-items: baseline; gap: 8px; min-width: 170px; }
.last { font: 600 18px var(--mono); letter-spacing: -.02em; }
.last.tick-up { color: var(--buy); } .last.tick-down { color: var(--sell); }
.chg { font: 600 12px var(--mono); }
.stats { display: flex; gap: 18px; margin: 0; padding-left: 16px; border-left: 1px solid var(--line); height: 26px; align-items: center; }
/* the stats give way first when the bar runs out of room, so the buttons on the right stay visible */
.top > * { flex-shrink: 0; }
.top > .stats { flex-shrink: 1; min-width: 0; overflow: hidden; }
.stats dt, .stats dd { white-space: nowrap; }
.stats div { display: flex; align-items: baseline; gap: 6px; }
.stats dt { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.stats dd { margin: 0; font: 500 12px var(--mono); }
/* connections: a dot per exchange (green live, amber connecting, red down) and the trades a second */
.popwrap { position: relative; }
.conn { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 13px; background: none; font: 600 12px var(--mono); color: var(--text); }
.conn:hover, .conn[aria-expanded="true"] { border-color: var(--edge); background: var(--hover); }
.dots { display: inline-flex; gap: 3px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.dot[data-state="live"] { background: var(--buy); }
.dot[data-state="connecting"] { background: #E6B93F; }
.dot[data-state="down"] { background: var(--sell); }
body.replaying .conn b::after { content: " · replay"; color: #F5B83D; }
/* the panels that drop from the top bar */
.pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 45; min-width: 240px; max-width: calc(100vw - 20px); padding: 12px; background: var(--bar); border: 1px solid var(--edge2); border-radius: 6px; box-shadow: 0 24px 50px -14px #000; }
.pop[hidden] { display: none; }
.pop h3 { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; font: 700 11px var(--ui); color: var(--faint); text-transform: uppercase; letter-spacing: .1em; }
.pop h3 span { font: 500 10.5px var(--mono); letter-spacing: 0; text-transform: none; }
.connpop { left: 0; right: auto; width: 380px; padding: 12px 0 0; }
.connpop h3 { padding: 0 14px; }
.connrow { display: grid; grid-template-columns: 8px minmax(0, 1fr) 56px 76px 52px; gap: 8px; align-items: center; height: 24px; padding: 0 14px; font: 500 12px var(--mono); color: var(--muted); white-space: nowrap; }
.connrow .nm { font: 700 12px var(--ui); letter-spacing: .04em; color: var(--text); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.connrow .nm small { margin-left: 5px; font: 600 10px var(--ui); color: var(--muted); }
.connrow .rt { text-align: right; color: var(--text); font-weight: 600; }
.connrow .rt.on { color: var(--buy); }
.connrow .tot, .connrow .lag { text-align: right; }
.connrow.down .nm, .connrow.down .rt { color: var(--sell); }
.connrow.off { opacity: .45; }
.connfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 9px 14px 10px; border-top: 1px solid var(--line); font: 500 11px var(--mono); color: var(--faint); }
.connfoot span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini { height: 22px; padding: 0 8px; border: 1px solid var(--line); border-radius: 3px; background: none; font: 700 11px var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mini:hover { color: var(--text); border-color: var(--edge); }
/* filters */
.filterpop { width: 250px; padding: 12px 14px; }
.frow { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 36px; font: 700 11.5px var(--ui); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.frow input:not([type]), .frow input[inputmode] { width: 104px; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--text); font: 600 13px var(--mono); outline: none; }
.frow input[inputmode]:focus { border-color: var(--edge); }
.frow input[inputmode]::placeholder { color: var(--faint); }
.frow input.bad { border-color: var(--sell); }
.frow input[type=checkbox] { width: 16px; height: 16px; margin: 0 4px 0 0; accent-color: var(--buy); cursor: pointer; }
.fnote { margin: 6px 0 10px; font: 500 12px/1.4 var(--ui); color: var(--faint); }
.freset { width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--muted); font: 700 11.5px var(--ui); letter-spacing: .08em; text-transform: uppercase; }
.freset:hover { color: var(--text); border-color: var(--edge); }
.freset.armed { color: var(--sell); border-color: rgba(var(--sell-rgb), .5); background: rgba(var(--sell-rgb), .08); }
/* colors */
.themepop { width: 318px; }
.fonts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.font { height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--text); font-size: 12.5px; font-weight: 600; }
.font:hover { border-color: var(--edge); }
.font[aria-pressed="true"] { border-color: var(--buy); color: var(--buy); }
.soundpop { position: fixed; width: 264px; padding: 12px 14px; }
.srow { display: flex; align-items: center; gap: 10px; height: 34px; font: 700 11px var(--ui); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.srow > span { flex: none; width: 82px; }
.srow.son > span { width: auto; }
.srow input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--buy); cursor: pointer; }
.srow input[type=range] { flex: 1; min-width: 0; height: 18px; margin: 0; accent-color: var(--buy); cursor: pointer; }
.srow b { flex: none; min-width: 50px; text-align: right; font: 600 12px var(--mono); color: var(--text); }
.srow select { flex: 1; min-width: 0; height: 26px; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--text); font: 600 12px var(--mono); }
.srow.sfile { cursor: default; }
.srow .sbtn { flex: none; height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--text); font: 700 10.5px var(--ui); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.srow .sbtn:hover { border-color: var(--edge); }
.srow .sbtn.sx { padding: 0 7px; font: 700 13px var(--mono); }
.srow .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11px var(--mono); text-transform: none; letter-spacing: 0; color: var(--text); }
.snote { margin: 6px 0 2px; font: 500 12px/1.4 var(--ui); color: var(--faint); }
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 14px; }
.swatch { display: flex; flex-direction: column; gap: 5px; padding: 0; border: 0; background: none; font: 600 11px var(--ui); color: var(--muted); }
.swatch .pv { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 3px; height: 40px; padding-top: 10px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--edge2); overflow: hidden; }
.swatch .strip { position: absolute; left: 0; right: 0; top: 0; height: 6px; }
.swatch .k { width: 5px; border-radius: 1px; }
.swatch .k.b { background: var(--buy); } .swatch .k.s { background: var(--sell); }
.swatch:hover { color: var(--text); }
.swatch[aria-pressed="true"] { color: var(--text); }
.swatch[aria-pressed="true"] .pv { box-shadow: 0 0 0 2px var(--text); }
.palettes { display: flex; flex-direction: column; gap: 4px; }
.palette { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: none; font: 600 12.5px var(--ui); color: var(--muted); text-align: left; }
.palette:hover { color: var(--text); border-color: var(--edge2); }
.palette[aria-pressed="true"] { color: var(--text); border-color: var(--edge); background: var(--hover); }
.palette .dots i { width: 10px; height: 10px; border-radius: 2px; }
.palette .dots { gap: 3px; }
/* pause: the screen holds still; trades wait and catch up on resume */
.pause .pl { display: none; }
.pause[aria-pressed="true"] { color: #F5B83D; border-color: rgba(245, 184, 61, .5); background: rgba(245, 184, 61, .1); }
.pause[aria-pressed="true"] .pa { display: none; } .pause[aria-pressed="true"] .pl { display: inline; fill: currentColor; stroke: none; }
body.paused .chartwrap { box-shadow: inset 0 0 0 1px rgba(245, 184, 61, .45); }
.tbtn.icon { width: 30px; padding: 0; justify-content: center; }
.tbtn.icon svg { width: 16px; height: 16px; }
.tbtn[aria-expanded="true"] { color: var(--text); background: var(--hover); border-color: var(--edge); }
/* a liquidation alert flashes the rekt list */
.rekt.flash-long { animation: flashL 1.2s ease-out; } .rekt.flash-short { animation: flashS 1.2s ease-out; }
@keyframes flashL { from { box-shadow: inset 0 0 0 2px var(--sell); } to { box-shadow: inset 0 0 0 2px transparent; } }
@keyframes flashS { from { box-shadow: inset 0 0 0 2px var(--buy); } to { box-shadow: inset 0 0 0 2px transparent; } }
.grow { flex: 1; }
.seg { display: inline-flex; gap: 1px; }
.seg button { border: 0; background: none; padding: 4px 8px; border-radius: 3px; font: 600 12px var(--mono); color: var(--faint); }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { color: var(--text); background: var(--hover); }

.seg .sep { width: 1px; margin: 4px 3px; background: var(--line); }
.tbtn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 4px; border: 1px solid var(--line); background: none; font: 700 12px var(--ui); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.tbtn:hover { color: var(--text); border-color: var(--edge); }
.tbtn svg { width: 14px; height: 14px; }
.tbtn[aria-pressed="true"] { color: var(--text); background: var(--hover); border-color: var(--edge); }
.rec i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.rec[aria-pressed="true"] { color: #FF5A5A; border-color: rgba(255, 90, 90, .45); background: rgba(255, 90, 90, .08); }
.rec[aria-pressed="true"] i { background: #FF5A5A; border-color: #FF5A5A; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.links { display: flex; gap: 2px; margin-left: -6px; }
.links a { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; border-radius: 4px; font: 700 12px var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-decoration: none; white-space: nowrap; }
.links a:hover { color: var(--text); background: var(--hover); }

/* ---------- replay bar ---------- */
.replay { display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 10px; background: #15110A; border-bottom: 1px solid #3A2C12; }
.replay[hidden] { display: none; }
.rtag { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #F5B83D; }
.rtag i { width: 7px; height: 7px; border-radius: 50%; background: #F5B83D; }
.rclock { font: 600 15px var(--mono); color: var(--last-text); min-width: 210px; white-space: pre; }
.rctl { display: flex; align-items: center; gap: 2px; }
.rctl button { border: 0; background: none; height: 26px; padding: 0 7px; border-radius: 3px; font: 600 11.5px var(--mono); color: var(--muted); }
.rctl button:hover { color: var(--text); background: var(--hover); }
.rplay { width: 34px; display: grid; place-items: center; color: #0A0A0C !important; background: #F5B83D !important; margin: 0 4px; }
.rplay svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.rplay svg.pa { fill: none; stroke: currentColor; stroke-width: 3.2; display: none; }
.rplay.playing svg.pl { display: none; } .rplay.playing svg.pa { display: block; }
.replay .seg button[aria-pressed="true"] { color: #0A0A0C; background: #F5B83D; }
.track { position: relative; flex: 1; min-width: 120px; height: 18px; margin-right: 6px; cursor: pointer; }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: #2A2418; }
#rCov { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; }
.track .cov { position: absolute; top: 6px; height: 6px; background: #8A6A2A; border-radius: 1px; }
.track .cov.liq { background: #4A3C22; }
.track .head { position: absolute; top: 1px; width: 2px; height: 16px; margin-left: -1px; background: #FFE2A6; box-shadow: 0 0 0 2px rgba(245, 184, 61, .25); }
.track .tip { position: absolute; bottom: 20px; transform: translateX(-50%); white-space: nowrap; font: 500 11px var(--mono); color: #E4E6EA; background: var(--tip); padding: 2px 6px; border-radius: 3px; pointer-events: none; opacity: 0; }
.track:hover .tip { opacity: 1; }
.replay input[type=datetime-local] { height: 26px; background: var(--bar); border: 1px solid var(--line); border-radius: 3px; color: var(--text); font: 500 12px var(--mono); padding: 0 6px; }
.golive { height: 26px; padding: 0 10px; border: 1px solid rgba(var(--buy-rgb), .4); border-radius: 3px; background: rgba(var(--buy-rgb), .1); color: var(--buy); font: 700 12px var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.golive:hover { background: rgba(var(--buy-rgb), .2); }
body.replaying .chartwrap { box-shadow: inset 0 0 0 1px #3A2C12; }
html[data-theme="light"] .replay { background: #FFF6E3; border-bottom-color: #EED6A2; }
html[data-theme="light"] .rtag { color: #A86F00; } html[data-theme="light"] .rtag i, html[data-theme="light"] .track .head { background: #A86F00; }
html[data-theme="light"] .track::before { background: #EEDDB8; } html[data-theme="light"] .track .cov.liq { background: #D9C49A; }
html[data-theme="light"] body.replaying .chartwrap { box-shadow: inset 0 0 0 1px #EED6A2; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; max-width: calc(100vw - 32px); padding: 9px 14px; border-radius: 4px; background: var(--tip); border: 1px solid var(--edge); color: #E4E6EA; font: 600 13px var(--ui); box-shadow: 0 12px 30px -10px #000; }
.toast[hidden] { display: none; }

/* ---------- layout: chart | DOM | trades over rekt, split by 1px lines ---------- */
.main { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--dom-w, 300px) var(--side-w, 330px); }
/* the dividers: drag to resize, double-click to put back (app.js keeps the sizes) */
.vsplit { position: absolute; top: 0; bottom: 0; width: 7px; margin-left: -3px; cursor: col-resize; z-index: 4; }
#splitDom { left: calc(100% - var(--dom-w, 300px) - var(--side-w, 330px)); }
#splitSide { left: calc(100% - var(--side-w, 330px)); }
.hsplit { height: 6px; cursor: row-resize; background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat; }
.vsplit:hover, .vsplit.dragging, .hsplit:hover, .hsplit.dragging { background-color: rgba(245, 184, 61, .3); }
body.resizing { user-select: none; }
.chartwrap { position: relative; min-height: 0; border-right: 1px solid var(--line); }
#chart { position: absolute; inset: 0; }
.legend { position: absolute; top: 8px; left: 10px; z-index: 3; display: flex; gap: 10px; font: 11px var(--mono); color: var(--muted); pointer-events: none; }
.legend b { color: var(--text); font-weight: 500; }
.chartmsg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); pointer-events: none; z-index: 2; }
.side { display: grid; grid-template-rows: auto minmax(0, var(--trades-fr, 60fr)) 6px minmax(0, var(--rekt-fr, 40fr)); min-height: 0; }
.card { background: var(--pane); }
.card + .card { border-top: 1px solid var(--line); }

/* ---------- flow meters ---------- */
.pressure { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 8px 10px; }
.meterhead, .meterfoot { display: flex; justify-content: space-between; font-size: 11px; }
.meterhead { color: var(--faint); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
.meterhead span:last-child { font: 600 11px var(--mono); letter-spacing: 0; }
.meterfoot { font: 500 11px var(--mono); margin-top: 4px; }
.bar { display: flex; height: 4px; background: var(--hover); gap: 1px; }
.bar i { display: block; height: 100%; width: 0; transition: width .4s ease; }
.bar i.b { background: var(--buy); } .bar i.s { background: var(--sell); }

/* ---------- trades and rekt ---------- */
.pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.panehead { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-bottom: 1px solid var(--line); background: var(--bar); }
.panehead h2 { margin: 0; font: 700 12px var(--ui); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.chips { margin-left: auto; display: flex; gap: 1px; }
.chips button { border: 0; background: none; padding: 2px 6px; border-radius: 3px; font: 600 11px var(--mono); color: var(--faint); }
.chips button:hover { color: var(--text); }
.chips button[aria-pressed="true"] { color: var(--text); background: var(--hover); }
/* the speaker: its waves show the volume, a cross shows it off */
.sound { flex: none; display: grid; place-items: center; width: 24px; height: 22px; margin-right: -4px; border: 0; border-radius: 3px; background: none; color: var(--faint); }
.sound:hover { color: var(--text); background: var(--hover); }
.sound svg { width: 16px; height: 16px; }
.sound .w1, .sound .w2, .sound .w3 { display: none; }
.sound[data-level="0"] .x { display: inline; }
.sound:not([data-level="0"]) { color: var(--text); }
.sound:not([data-level="0"]) .x { display: none; }
.sound[data-level="1"] .w1, .sound[data-level="2"] .w1, .sound[data-level="2"] .w2, .sound[data-level="3"] .w1, .sound[data-level="3"] .w2, .sound[data-level="3"] .w3 { display: inline; }
.cols { display: none; }
.row { display: grid; grid-template-columns: 17px 1fr 1fr 34px; gap: 8px; align-items: center; padding: 0 10px; }
.rekt .row { grid-template-columns: 17px 44px 1fr 1fr 34px; }
.row span { text-align: right; }
.row span:first-child, .rekt .row span:nth-child(2) { text-align: left; }
.list { flex: 1; overflow-y: auto; overflow-x: hidden; font: 500 12px/1 var(--mono); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
/* each row is shaded by its size: --a runs 0 (small) to 1 (huge) */
.row { height: 19px; white-space: nowrap; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--rowline); }
.row.buy { color: var(--buy); background: rgba(var(--buy-rgb), calc(var(--a, 0) * .38)); }
.row.sell { color: var(--sell); background: rgba(var(--sell-rgb), calc(var(--a, 0) * .38)); }
.row.t0 { opacity: .5; }
.row.t2 { font-weight: 700; color: var(--strong); }
.row.t3 { height: 26px; font-size: 13px; font-weight: 700; color: #fff; }
.row.t3.buy { background: var(--buy); } .row.t3.sell { background: var(--sell); }
.row.t3 .ex { box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.age { color: var(--faint); font-weight: 400; }
.row.t2 .age { color: var(--strong-dim); } .row.t3 .age { color: rgba(255, 255, 255, .6); }
.side-tag { font: 700 11px var(--ui); letter-spacing: .06em; }
.ex { position: relative; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; color: #0A0A0C; }
.ex svg { width: 12px; height: 12px; display: block; }
/* a spot market: the exchange's mark with a small S */
.ex.spot::after { content: "S"; position: absolute; right: -5px; bottom: -4px; padding: 0 2px; border-radius: 3px; font: 800 8px/10px var(--ui); color: var(--text); background: var(--bar); border: 1px solid var(--line); }
/* plain marks, as aggr.trade draws them: one light colour, no tile (the Colors panel switches) */
html[data-marks="plain"] .ex { background: none !important; color: #C5CAD5; }
html[data-marks="plain"] .ex svg { width: 16px; height: 16px; }
html[data-marks="plain"][data-theme="light"] .ex { color: #4B5160; }
html[data-marks="plain"] .row.t3 .ex { color: #fff; box-shadow: none; }
html[data-marks="plain"] .result .exs { gap: 5px; }
.ex-BITGET { background: var(--bitget); } .ex-GATE { background: var(--gate); color: #fff; } .ex-HTX { background: var(--htx); color: #fff; }
.ex-KUCOIN { background: var(--kucoin); color: #fff; } .ex-BINGX { background: var(--bingx); }
.ex-BINANCE { background: var(--binance); } .ex-BYBIT { background: var(--bybit); } .ex-OKX { background: var(--okx); color: var(--okx-text); } .ex-MEXC { background: var(--mexc); color: #fff; }
.ex-COINBASE { background: var(--coinbase); color: #fff; } .ex-KRAKEN { background: var(--kraken); color: #fff; } .ex-BITFINEX { background: var(--bitfinex); }
.ex-BITSTAMP { background: var(--bitstamp); color: #fff; } .ex-BITMEX { background: var(--bitmex); color: #fff; }
.empty { padding: 18px 12px; color: var(--faint); font: 500 12.5px/1.5 var(--ui); text-align: center; }

/* ---------- DOM: the order book as a price ladder (drawn on a canvas by dom.js) ---------- */
.dom { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--pane); }
.dom .chips button:disabled { opacity: .35; cursor: default; }
.charttools { position: absolute; top: 30px; left: 10px; z-index: 3; display: flex; gap: 4px; }
.charttools button { height: 20px; padding: 0 7px; border: 1px solid var(--line); border-radius: 3px; background: var(--bar); color: var(--muted); font: 700 10.5px var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.charttools button:hover { color: var(--text); border-color: var(--edge); }
.charttools button[aria-pressed="true"] { color: var(--text); border-color: var(--edge); }
.domtools { display: flex; align-items: center; gap: 2px; height: 26px; padding: 0 6px 0 10px; border-bottom: 1px solid var(--line); font: 500 11px var(--mono); color: var(--muted); }
.domtools button { border: 0; background: none; height: 20px; min-width: 20px; padding: 0 5px; border-radius: 3px; font: 600 12px var(--mono); color: var(--muted); }
.domtools button:hover { color: var(--text); background: var(--hover); }
.domticks { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.domtools input { width: 44px; height: 20px; padding: 0 4px; border: 1px solid var(--line); border-radius: 3px; background: var(--bar); color: var(--text); font: 500 11px var(--mono); text-align: right; -moz-appearance: textfield; appearance: textfield; }
.domtools input:focus { outline: 0; border-color: var(--edge); }
.domtools input::-webkit-outer-spin-button, .domtools input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.domlbl { font: 600 11px var(--ui); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; }
.domstep { min-width: 54px; text-align: center; color: var(--text); }
.domcentre { margin-left: auto; font: 700 11px var(--ui) !important; letter-spacing: .06em; text-transform: uppercase; }
.domcentre[aria-pressed="true"] { color: var(--text) !important; background: var(--hover) !important; }
.domcols { display: grid; grid-template-columns: 17fr 14fr 16fr 19fr 16fr 18fr; height: 20px; align-items: center; border-bottom: 1px solid var(--line); font: 600 10.5px var(--ui); color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.domcols span { padding: 0 3px; overflow: hidden; }
.domcols span:nth-child(1), .domcols span:nth-child(2), .domcols span:nth-child(5) { text-align: left; }
.domcols span:nth-child(3), .domcols span:nth-child(6) { text-align: right; }
.domcols span:nth-child(4) { text-align: center; }
.dombox { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.dombox canvas { position: absolute; inset: 0; display: block; }
.dommsg { position: absolute; left: 12px; right: 12px; top: 40%; padding: 8px 10px; text-align: center; color: var(--muted); background: var(--bar); border: 1px solid var(--line); border-radius: 4px; font: 500 12.5px/1.45 var(--ui); pointer-events: none; }
.dommsg[hidden] { display: none; }

/* ---------- search ---------- */
.searchin { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.searchin svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.searchin input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: 600 17px var(--ui); letter-spacing: .02em; padding: 13px 0; outline: none; text-transform: uppercase; }
.searchin input::placeholder { text-transform: none; color: var(--faint); }
kbd { font: 500 10px var(--mono); color: var(--faint); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; }
.recents { display: flex; gap: 4px; flex-wrap: wrap; padding: 8px 14px 0; }
.recents:empty { display: none; }
.recents button { border: 1px solid var(--line); background: none; border-radius: 3px; padding: 2px 8px; font: 600 12px var(--ui); color: var(--muted); }
.recents button:hover { color: var(--text); border-color: var(--edge); }
.results { overflow-y: auto; padding: 6px 0; }
.result { display: grid; grid-template-columns: 1fr auto 24px; gap: 10px; align-items: center; width: 100%; border: 0; background: none; text-align: left; padding: 7px 16px; }
.result:hover, .result[aria-selected="true"] { background: var(--hover); }
.result .nm b { font: 700 14px var(--ui); letter-spacing: .02em; }
.result .nm span { color: var(--muted); font-weight: 600; }
.result .nm small { display: none; }
.result .exs { display: flex; gap: 3px; }
.result .cnt { font: 600 12px var(--mono); color: var(--muted); text-align: right; }
.hint { padding: 7px 14px; color: var(--faint); font-size: 11.5px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; }

/* the chart page's stats give way as it narrows (funding first, then 24h volume); the Recordings page keeps its own */
@media (max-width: 1720px) { body:not(.libpage) .stats div:nth-child(2) { display: none; } }
@media (max-width: 1250px) and (min-width: 861px) {
  .main { grid-template-columns: minmax(0, 1fr) 270px 290px; }
  .top { gap: 10px; }
  .quote { min-width: 150px; }
  .links a { padding: 0 6px; }
}
@media (max-width: 1060px) and (min-width: 861px) {
  /* the chart across the top, the DOM and the tape side by side under it */
  .main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 55fr) minmax(0, 45fr); }
  .vsplit { display: none; }
  .chartwrap { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--line); }
  .top { flex-wrap: wrap; height: auto; padding: 6px 10px; row-gap: 6px; }
  body:not(.libpage) .stats { display: none; }
}
@media (max-width: 1350px) { .replay input[type=datetime-local] { display: none; } }
/* the top bar's buttons go to icons as it narrows (Resume keeps its words: it says what's waiting) */
@media (max-width: 1600px) and (min-width: 861px) { .top { gap: 10px; } .links a { padding: 0 6px; } }
@media (max-width: 1460px) and (min-width: 861px) {
  .tbtn .lbl { display: none; } .pause[aria-pressed="true"] .lbl { display: inline; }
  .tbtn:has(.lbl) { padding: 0 8px; }
  .quote { min-width: 150px; }
}
@media (max-width: 1300px) and (min-width: 861px) { .seg button { padding: 4px 6px; } .coinin { width: 140px; } }
@media (max-width: 1200px) and (min-width: 861px) { .top { flex-wrap: wrap; height: auto; padding: 6px 10px; row-gap: 6px; } }
@media (max-width: 1350px), (max-width: 1540px) and (min-width: 1461px) { body:not(.libpage) .stats div:nth-child(1) { display: none; } }
@media (max-width: 860px) {
  body { display: block; height: auto; overflow: auto; }
  .top { flex-wrap: wrap; height: auto; padding: 6px 10px; gap: 6px 12px; }
  .quote { min-width: 0; }
  .stats { order: 5; width: 100%; border-left: 0; padding-left: 4px; gap: 6px 14px; height: auto; flex-wrap: wrap; }
  .stats dt { white-space: nowrap; }
  body:not(.libpage) .stats div:nth-child(3) dt { display: none; }
  .stats div:nth-child(2) { display: flex; }
  .grow { display: none; }
  .seg { margin-left: auto; }
  .main { display: flex; flex-direction: column; }
  .main > *, .side > * { flex: none; }
  .vsplit, .hsplit { display: none; }
  .chartwrap { height: 52vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .side { display: flex; flex-direction: column; }
  .pane.trades { height: 60vh; } .pane.rekt { height: 42vh; }
  .dom { height: 64vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .links { order: 4; margin-left: 0; }
  .legend { right: 64px; flex-wrap: wrap; gap: 2px 8px; }
  .stats div:nth-child(1) { display: flex; }
  .seg button { padding: 4px 6px; }
  .replay { flex-wrap: wrap; height: auto; padding: 8px 10px; gap: 8px 10px; }
  .rclock { min-width: 0; }
  .track { order: 9; flex-basis: 100%; }
  /* the panels drop the full width of the screen */
  .popwrap { position: static; }
  .pop, .connpop { left: 10px; right: 10px; width: auto; top: calc(100% + 4px); }
  .drop { width: calc(100vw - 20px); }
}

/* ---------- Recordings page: the recorder's dashboard ---------- */
body.libpage { display: block; height: auto; min-height: 100%; overflow: auto; }
.libpage .back { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px 0 2px; border-radius: 4px; color: var(--muted); text-decoration: none; font: 700 13px var(--ui); letter-spacing: .04em; text-transform: uppercase; }
.libpage .back:hover { color: var(--text); background: var(--hover); }
.libpage .back svg { width: 16px; height: 16px; }
.libpage .pagetitle { margin: 0; display: inline-flex; align-items: center; gap: 8px; font: 700 17px var(--ui); letter-spacing: .02em; }
.libpage .recdot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.libpage .recdot.on { background: #FF5A5A; box-shadow: 0 0 0 3px rgba(255, 90, 90, .2); animation: blink 1.6s ease-in-out infinite; }
.libpage .links { margin-left: 0; }
.libpage .leds { display: flex; gap: 14px; font: 600 12px var(--ui); color: var(--muted); white-space: nowrap; }
.libpage .leds span { display: inline-flex; align-items: center; gap: 6px; }
.libpage .led { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.libpage .led.ok { background: var(--buy); } .libpage .led.warn { background: #E6B93F; } .libpage .led.bad { background: var(--sell); }
.libpage .leds b { font: 600 12px var(--mono); color: var(--text); }
.libpage .muted { color: var(--faint); }
/* the page's light/dark switch: the sun shows in dark, the moon in light */
.libpage #themeBtn .moon { display: none; }
html[data-theme="light"] .libpage #themeBtn .sun { display: none; }
html[data-theme="light"] .libpage #themeBtn .moon { display: block; }
html[data-theme="light"] .libpage .age-warn { color: #A86F00; }
html[data-theme="light"] .libpage .o-full { color: #A86F00; }
html[data-theme="light"] .libpage .o-done { color: #1F8A4C; }
html[data-theme="light"] .libpage .lspan .seg { background: #D9B46A; }
html[data-theme="light"] .libpage .lrow.on .lspan .seg { background: #C2913A; }
html[data-theme="light"] .libpage .switch input:checked + i::after { background: #FFFFFF; }
html[data-theme="light"] .libpage .rule[data-level="ultra"] .switch { --on: #8B3FD1; } html[data-theme="light"] .libpage .rule[data-level="high"] .switch { --on: #D9622B; }
html[data-theme="light"] .libpage .rule[data-level="medium"] .switch { --on: #C9960A; } html[data-theme="light"] .libpage .rule[data-level="other"] .switch { --on: #5E6573; }
html[data-theme="light"] .libpage .chip.l-ultra { background: rgba(139, 63, 209, .08); border-color: rgba(139, 63, 209, .3); }
html[data-theme="light"] .libpage .chip.l-high { background: rgba(217, 98, 43, .08); border-color: rgba(217, 98, 43, .3); }
html[data-theme="light"] .libpage .chip.l-medium { background: rgba(179, 138, 18, .1); border-color: rgba(179, 138, 18, .35); }
html[data-theme="light"] .libpage .chip.hand { background: rgba(168, 111, 0, .08); border-color: rgba(168, 111, 0, .3); }

.libpage .dash { display: grid; gap: 14px; padding: 14px 12px 40px; max-width: 1560px; margin: 0 auto; }
.libpage .strip { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.libpage .tile { background: var(--bar); padding: 12px 16px; display: grid; gap: 4px; align-content: start; }
.libpage .lbl { font: 700 11px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.libpage .big { font: 600 26px/1.1 var(--mono); color: var(--text); }
.libpage .big small { font-size: 14px; color: var(--muted); font-weight: 500; }
.libpage .sub { font: 500 12px var(--ui); color: var(--muted); }
.libpage .slots { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.libpage .slot { width: 22px; height: 9px; border-radius: 2px; background: var(--hover); border: 1px solid var(--line); }
.libpage .slot.on { background: #FF5A5A; border-color: #FF5A5A; }
.libpage .slot.hand { background: #F5B83D; border-color: #F5B83D; }

.libpage .dgrid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
.libpage .dcol { display: grid; gap: 14px; min-width: 0; }
.libpage .panel { background: var(--pane); border: 1px solid var(--line); border-radius: 6px; min-width: 0; overflow: hidden; }
.libpage .ph { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 16px; border-bottom: 1px solid var(--line); background: var(--bar); flex-wrap: wrap; }
.libpage .ph h2 { margin: 0; font: 700 12px var(--ui); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.libpage .ph .push { margin-left: auto; }
.libpage .pb { padding: 12px 16px; }

/* recording now */
.libpage .tablewrap { overflow-x: auto; }
.libpage .tbl { width: 100%; border-collapse: collapse; font: 500 13px var(--ui); }
.libpage .tbl th { text-align: left; font: 600 11px var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.libpage .tbl td { padding: 7px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.libpage .tbl tr:last-child td { border-bottom: 0; }
.libpage .tbl tbody tr:hover td { background: var(--hover); }
.libpage .tbl .num { text-align: right; }
.libpage .tbl .mono { font: 500 12px var(--mono); }
.libpage .tbl .lcoin b { font-size: 14px; }
.libpage .by { display: inline-flex; align-items: center; gap: 6px; }
.libpage .chip { display: inline-block; font: 700 10.5px/1 var(--ui); letter-spacing: .06em; padding: 4px 6px; border-radius: 3px; text-transform: uppercase; color: var(--muted); background: var(--hover); border: 1px solid var(--line); white-space: nowrap; }
.libpage .chip.l-ultra { color: #C9A2FF; border-color: rgba(201, 162, 255, .35); background: rgba(201, 162, 255, .1); }
.libpage .chip.l-high { color: #FF9A5C; border-color: rgba(255, 154, 92, .35); background: rgba(255, 154, 92, .1); }
.libpage .chip.l-medium { color: #F5D061; border-color: rgba(245, 208, 97, .35); background: rgba(245, 208, 97, .1); }
.libpage .chip.hand { color: #F5B83D; border-color: rgba(245, 184, 61, .35); background: rgba(245, 184, 61, .08); }
html[data-theme="light"] .libpage .chip.l-ultra { color: #7A3FD1; } html[data-theme="light"] .libpage .chip.l-high { color: #C9541E; }
html[data-theme="light"] .libpage .chip.l-medium { color: #A07A0A; } html[data-theme="light"] .libpage .chip.hand { color: #A86F00; }
.libpage .bar { height: 3px; width: 90px; margin-top: 4px; background: var(--hover); border-radius: 2px; }
.libpage .bar i { display: block; height: 100%; border-radius: 2px; background: #FF5A5A; }
.libpage .age-warn { color: #E6B93F; }
.libpage .tbtn.stop { color: #FF5A5A; border-color: rgba(255, 90, 90, .35); }

/* incoming alerts */
.libpage .feed { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.libpage .feed li { display: grid; grid-template-columns: 44px 112px 20px 72px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 16px; border-bottom: 1px solid var(--line); font: 500 13px var(--ui); }
.libpage .feed li:last-child { border-bottom: 0; }
.libpage .feed li.empty { display: block; }
.libpage .feed .t { font: 500 12px var(--mono); color: var(--faint); }
.libpage .feed .c { display: flex; align-items: center; gap: 6px; min-width: 0; font: 700 13px var(--ui); letter-spacing: .02em; }
.libpage .feed .c b { overflow: hidden; text-overflow: ellipsis; }
.libpage .feed .c small { font: 600 11px var(--mono); color: var(--muted); }
.libpage .out { display: flex; align-items: center; gap: 6px; min-width: 0; font: 600 12px var(--ui); }
.libpage .out::before { content: ""; width: 8px; height: 8px; border-radius: 2px; flex: none; background: currentColor; }
.libpage .o-rec { color: #FF5A5A; } .libpage .o-done { color: var(--buy); } .libpage .o-dup { color: var(--muted); } .libpage .o-full { color: #E6B93F; } .libpage .o-filter, .libpage .o-skip { color: var(--faint); }
.libpage .out em { font-style: normal; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libpage .filters { display: flex; gap: 2px; }
.libpage .filters button { height: 24px; padding: 0 9px; border: 1px solid var(--line); border-radius: 3px; background: none; color: var(--muted); font: 700 11px var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.libpage .filters button:hover { color: var(--text); }
.libpage .filters button[aria-pressed="true"] { color: var(--text); background: var(--hover); border-color: var(--edge); }

/* auto-record: where the alerts come from, the tier switches, the limits */
.libpage .alertsrc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--bar); }
.libpage .alertsrc b { font: 700 13px var(--ui); color: var(--text); }
.libpage .alertsrc.off b { color: var(--muted); }
.libpage .alertsrc .d { grid-column: 2; font: 500 12px/1.45 var(--ui); color: var(--muted); overflow-wrap: anywhere; }
.libpage .sec-title { font: 700 11px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 12px 0 2px; }
.libpage .rule { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.libpage .rule:last-child { border-bottom: 0; }
.libpage .rule .txt { flex: 1; min-width: 0; }
.libpage .rule .txt b { display: block; font: 700 13px var(--ui); color: var(--text); margin-bottom: 1px; }
.libpage .rule .txt span { font: 500 12px var(--ui); color: var(--muted); }
.libpage .switch { position: relative; width: 40px; height: 22px; flex: none; }
.libpage .switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.libpage .switch i { position: absolute; inset: 0; border-radius: 11px; background: var(--hover); border: 1px solid var(--edge2); transition: background .15s; }
.libpage .switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.libpage .switch input:checked + i { background: var(--on, #F5B83D); border-color: var(--on, #F5B83D); }
.libpage .switch input:checked + i::after { transform: translateX(18px); background: #0A0A0C; }
.libpage .switch input:focus-visible + i { outline: 2px solid var(--edge); outline-offset: 2px; }
.libpage .switch input:disabled + i { opacity: .45; }
.libpage .rule[data-level="ultra"] .switch { --on: #C9A2FF; } .libpage .rule[data-level="high"] .switch { --on: #FF9A5C; }
.libpage .rule[data-level="medium"] .switch { --on: #F5D061; } .libpage .rule[data-level="other"] .switch { --on: #C5CAD5; }
.libpage .stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.libpage .stepper button { border: 0; background: none; height: 26px; width: 28px; color: var(--muted); font: 600 15px var(--mono); }
.libpage .stepper button:hover:not(:disabled) { color: var(--text); background: var(--hover); }
.libpage .stepper button:disabled { opacity: .35; cursor: default; }
.libpage .stepper output { min-width: 34px; text-align: center; font: 600 13px var(--mono); color: var(--text); }
.libpage .sel { height: 26px; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--bar); color: var(--text); font: 600 12px var(--ui); }

/* feeds */
.libpage .feedrows { display: grid; gap: 7px; font: 500 12px var(--ui); color: var(--muted); }
.libpage .feedrow { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.libpage .feedrow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libpage .feedrow b { font: 600 12px var(--mono); color: var(--text); }

/* record a coin */
.libpage .adder .picker { position: relative; width: 100%; }
.libpage .picker .searchin { border: 1px solid var(--line); border-radius: 4px; background: var(--bar); padding: 0 10px; }
.libpage .picker .searchin:focus-within { border-color: var(--edge); }
.libpage .picker .searchin input { font-size: 15px; padding: 8px 0; }
.libpage .picker .results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; max-height: 340px; background: var(--bar); border: 1px solid var(--edge2); border-radius: 4px; box-shadow: 0 18px 40px -12px #000; padding: 4px 0; }
.libpage .picker .results[hidden] { display: none; }
.libpage .picker .result { grid-template-columns: 1fr auto 72px; padding: 6px 14px; }
.libpage .picker .hint { border-top: 0; }
.libpage .pickrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 8px; }
.libpage .picked { display: flex; flex-wrap: wrap; gap: 6px; }
.libpage .picked:empty { display: none; }
.libpage .pchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 2px 0 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--bar); font: 700 13px var(--ui); letter-spacing: .02em; }
.libpage .pchip .avatar { width: 18px; height: 18px; font-size: 8px; }
.libpage .pchip button { border: 0; background: none; width: 22px; height: 22px; border-radius: 3px; color: var(--muted); font-size: 16px; line-height: 1; }
.libpage .pchip button:hover { color: var(--text); background: var(--hover); }
.libpage .primary { height: 32px; padding: 0 14px; border-radius: 4px; border: 1px solid rgba(255, 90, 90, .45); background: rgba(255, 90, 90, .1); color: #FF5A5A; font: 700 12.5px var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.libpage .primary:hover:not(:disabled) { background: rgba(255, 90, 90, .18); }
.libpage .primary:disabled { opacity: .35; cursor: default; }
.libpage .note { margin: 9px 0 0; color: var(--faint); font: 500 12.5px/1.45 var(--ui); }
.libpage .bookpref { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 600 12px var(--ui); color: var(--muted); }
.libpage .bookpref label { display: inline-flex; align-items: center; gap: 6px; }
.libpage .bookpref .hint { flex-basis: 100%; font-weight: 500; color: var(--faint); }

/* the library: every coin with a recording */
.libpage .bulk { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--bar); color: var(--muted); font-weight: 600; }
.libpage .bulk .tbtn:disabled { opacity: .35; cursor: default; }
.libpage .bulk .vsep { width: 1px; height: 18px; background: var(--line); }
.libpage .bulk label.tbtn { cursor: pointer; }
.libpage .check { display: inline-grid; place-items: center; width: 18px; height: 18px; cursor: pointer; }
.libpage .check input { margin: 0; width: 14px; height: 14px; accent-color: #F5B83D; cursor: pointer; }
.libpage .check span { display: none; }
.libpage .lhead, .libpage .lrow { display: grid; grid-template-columns: 26px 136px 150px minmax(120px, 1fr) 210px 70px 68px 296px; gap: 12px; align-items: center; padding: 0 16px; }
.libpage .lhead { height: 30px; border-bottom: 1px solid var(--line); font: 600 11px var(--ui); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.libpage .lhead span:nth-child(7) { text-align: right; }
.libpage .lrow { height: 46px; border-bottom: 1px solid var(--line); }
.libpage .lrow:last-child { border-bottom: 0; }
.libpage .lrow:hover { background: var(--hover); }
.libpage .lcoin { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; min-width: 0; }
.libpage .lcoin b { font: 700 15px var(--ui); letter-spacing: .02em; }
.libpage .lcoin .quote { color: var(--muted); font-weight: 600; font-size: 12px; min-width: 0; }
.libpage .lcoin:hover b { text-decoration: underline; text-underline-offset: 3px; }
.libpage .lstatus { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px var(--ui); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.libpage .lstatus i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.libpage .lstatus.rec { color: #FF5A5A; } .libpage .lstatus.rec i { background: #FF5A5A; animation: blink 1.6s ease-in-out infinite; }
.libpage .lstatus.off { color: var(--faint); }
.libpage .lstatus .chip { margin-left: 2px; }
.libpage .lspan { position: relative; display: block; height: 16px; background: var(--hover); border-radius: 2px; overflow: hidden; }
.libpage .lspan .day { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.libpage .lspan .seg { position: absolute; top: 0; bottom: 0; background: #8A6A2A; }
.libpage .lrow.on .lspan .seg { background: #C2913A; }
.libpage .lspan .seg:hover { background: #F5B83D !important; }
.libpage .lspan .alertmark { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #FF5A5A; pointer-events: none; }
.libpage .linfo { display: flex; flex-direction: column; gap: 2px; font: 500 11.5px var(--mono); color: var(--muted); min-width: 0; }
.libpage .linfo b { color: var(--text); font-weight: 600; }
.libpage .linfo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.libpage .lbooks { display: flex; gap: 4px; }
.libpage .lbooks .ex.missing { opacity: .18; }
.libpage .lsize { text-align: right; font: 500 12px var(--mono); }
.libpage .lacts { display: flex; gap: 6px; justify-content: flex-end; }
.libpage .lacts .tbtn { text-decoration: none; height: 26px; padding: 0 9px; }
.libpage .lacts .tbtn.dim { opacity: .35; pointer-events: none; }
.libpage .tbtn.del { color: var(--muted); }
.libpage .tbtn.del:hover, .libpage .tbtn.armed { color: #FF5A5A; border-color: rgba(255, 90, 90, .5); }
.libpage .tbtn.armed { background: rgba(255, 90, 90, .12); }
.libpage .lacts .tbtn.start:hover { color: #FF5A5A; border-color: rgba(255, 90, 90, .45); }
@media (max-width: 1500px) {
  .libpage .lhead, .libpage .lrow { grid-template-columns: 26px 126px 140px minmax(100px, 1fr) 190px 66px 290px; }
  .libpage .lhead span:nth-child(7), .libpage .lsize { display: none; }
}
@media (max-width: 1180px) {
  .libpage .dgrid { grid-template-columns: 1fr; }
  .libpage .lhead, .libpage .lrow { grid-template-columns: 26px 136px 150px minmax(120px, 1fr) 210px 70px 296px; }
}
@media (max-width: 960px) {
  .libpage .strip { grid-template-columns: 1fr 1fr; }
  .libpage .leds { display: none; }
}
@media (max-width: 860px) {
  .libpage .top { flex-wrap: wrap; }
  .libpage .stats { order: 5; }
  .libpage .lhead { display: none; }
  .libpage .lrow { height: auto; padding: 10px 16px; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "c n s" ". t t" ". i i" ". b b" ". a a"; gap: 8px 10px; }
  .libpage .lrow > :nth-child(1) { grid-area: c; } .libpage .lrow > :nth-child(2) { grid-area: n; } .libpage .lrow > :nth-child(3) { grid-area: s; }
  .libpage .lrow > :nth-child(4) { grid-area: t; } .libpage .lrow > :nth-child(5) { grid-area: i; } .libpage .lrow > :nth-child(6) { grid-area: b; }
  .libpage .lrow > :nth-child(7) { display: none; } .libpage .lrow > :nth-child(8) { grid-area: a; justify-content: flex-start; flex-wrap: wrap; }
  .libpage .bulk { height: auto; min-height: 40px; padding: 6px 16px; }
  .libpage #bulkText { font-size: 12px; }
  .libpage .feed li { grid-template-columns: 44px 1fr 20px auto; row-gap: 4px; }
  .libpage .feed li .out { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .libpage .strip { grid-template-columns: 1fr; }
  .libpage .dash { padding: 10px 8px 30px; }
}