/* walbi.css — widget bodies + theme presets (skins). Themes override CSS vars on body[data-theme].
   The `walbi` theme is a faithful match of app.walbi.com: tokens lifted from its live CSS
   (bg #0f0f11, panels #050505, up #00b97a, down #fe5564, accent #5364ff, font Inter Display). */
:root { --up: #00b97a; --down: #fe5564; --accent: #5364ff; --dim: #8b8e9e; --txt: #f6f7ff; --panel: #07070a; --panel2: #131318; --line: #23232b; --bg: #0f0f11; }
/* skins */
body[data-theme="midnight"] { --accent: #3d7bff; --up: #2bd576; --down: #ff5a7a; --txt: #c9d3e0; --panel: #11151e; --panel2: #161b26; --line: #232c3a; --bg: #0b0e14; }
body[data-theme="neon"] { --accent: #00e5ff; --up: #39ff14; --down: #ff2e88; --txt: #c9d3e0; --bg: #07060f; --panel: #100c20; --panel2: #170f2e; --line: #2a1f4d; }
body[data-theme="bloomberg"] { --accent: #ff9f0a; --up: #f0a800; --down: #ff5630; --txt: #d8d2c4; --bg: #060606; --panel: #0e0e0e; --panel2: #151512; --line: #2a2a24; }
body[data-theme="walbi"] { --up: #00b97a; --down: #fe5564; --accent: #5364ff; --dim: #8b8e9e; --txt: #f6f7ff; --panel: #07070a; --panel2: #131318; --line: #23232b; --bg: #0f0f11; }
/* map theme vars onto the dock engine vars so the whole shell recolours */
.dk-root { --dk-bg0: var(--bg); --dk-bg1: var(--panel); --dk-bg2: var(--panel2); --dk-line: var(--line); --dk-line2: var(--line);
  --dk-txt: var(--txt); --dk-dim: var(--dim); --dk-accent: var(--accent); --dk-accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --dk-up: var(--up); --dk-down: var(--down); }

.dk-content { font: 12px/1.4 "Inter Display", "Inter", -apple-system, system-ui, sans-serif; color: var(--txt); letter-spacing: normal; }
/* clean terminal mode (default) — hide single-widget panel headers + editing chrome, like app.walbi.com.
   Press E to toggle edit mode: headers + Добавить виджет/↺ return so panels can be dragged / widgets added. */
body:not(.edit) .dk-tabbar:has(.dk-tab:only-child) { display: none; }
body:not(.edit) #add-btn, body:not(.edit) #reset-btn, body:not(.edit) #theme-btn { display: none; }
body:not(.edit) .wd-src { display: none; }   /* dev wiring badges (WS 1013→1015 …) — not in WALBI */
body.edit .dk-pane { outline: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -2px; }
/* grid in clean mode: rounded panels + gaps over page bg — измерено на app.walbi.com (panel radius 8px) */
body:not(.edit) .dk-root { --dk-gutter: 6px; }
body:not(.edit) .dk-pane { border-radius: 8px; border-color: transparent; }
body:not(.edit) .dk-host { padding: 6px; }
.dk-content .mono { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; }
.up { color: var(--up); } .down { color: var(--down); } .dim { color: var(--dim); } .acc { color: var(--accent); } .sm { font-size: 10px; }
.wd-src { position: absolute; top: 6px; right: 8px; z-index: 6; font-size: 9px; padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--dim); pointer-events: none; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-src.live::before { content: "● "; color: var(--up); }
.wd-fill, .wd-tape, .wd-signals, .wd-agents, .wd-chat, .wd-inbox { height: 100%; overflow: auto; }
.wd-pad { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.wd-spark { width: 80px; height: 22px; vertical-align: middle; }
.wd-chart { background: var(--bg); }
/* asset selector strip (app.walbi.com) — pinned to the chart panel top; panel itself stays draggable */
.wd-assets { position: absolute; top: 0; left: 0; right: 0; height: 40px; display: flex; align-items: center; gap: 2px; padding: 0 8px; overflow-x: auto; background: var(--panel); border-bottom: 1px solid var(--line); z-index: 6; scrollbar-width: none; }
.wd-assets::-webkit-scrollbar { display: none; }
.as-btn { display: grid; place-items: center; background: transparent; border: none; border-radius: 8px; padding: 5px; cursor: pointer; transition: background .12s; }
.as-btn:hover { background: var(--panel2); } .as-btn.on { background: var(--dk-accent-soft); }
.as-ico, .as-fallback { width: 20px; height: 20px; border-radius: 50%; flex: none; }
.as-fallback { background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.as-spacer { flex: 1; }
.as-active { display: flex; align-items: center; gap: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 12px 3px 7px; flex: none; }
.as-active .as-ico, .as-active .as-fallback { width: 22px; height: 22px; }
.as-act-i { display: flex; flex-direction: column; line-height: 1.18; }
.as-act-p { font-size: 12px; font-weight: 700; } .as-act-px { font-size: 11px; }
.as-add { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); color: var(--accent); font-size: 15px; cursor: pointer; display: grid; place-items: center; padding: 0; margin-right: 4px; }
.as-add:hover { border-color: var(--accent); }
/* timeframe toolbar */
.wd-tfbar { position: absolute; top: 40px; left: 0; right: 0; height: 32px; display: flex; align-items: center; gap: 2px; padding: 0 8px; background: var(--panel); border-bottom: 1px solid var(--line); z-index: 6; }
.tf-btn { background: transparent; border: none; color: var(--dim); border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 11px; cursor: pointer; }
.tf-btn:hover { background: var(--panel2); color: var(--txt); }
.tf-btn.on { background: var(--dk-accent-soft); color: var(--accent); font-weight: 600; }
.tf-flex { flex: 1; } .tf-ind { color: var(--dim); font-size: 11px; }
.wd-chartwrap { position: absolute; top: 72px; left: 0; right: 0; bottom: 0; }

/* table */
.wd-tbl { display: flex; flex-direction: column; height: 100%; overflow: auto; }
.wd-th { display: flex; position: sticky; top: 0; background: var(--panel2); color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.wd-th span, .wd-tr span { flex: 1 1 0; min-width: 0; } .wd-th span:not(:first-child), .wd-tr span:not(:first-child) { text-align: right; }
.wd-tr { display: flex; align-items: center; padding: 5px 10px; border-bottom: 1px solid rgba(255,255,255,.03); } .wd-tr:hover { background: var(--panel2); }
.wd-cls { font-size: 9px; opacity: .5; }
button.mini { background: color-mix(in srgb, var(--up) 18%, transparent); color: var(--up); border: none; border-radius: 5px; padding: 2px 8px; font: inherit; font-size: 11px; cursor: pointer; }

/* order book */
.ob-group { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 3px; }
.ob-grp-sel { background: var(--panel2); border: 1px solid var(--line); color: var(--txt); border-radius: 8px; padding: 3px 8px; font: inherit; font-size: 11px; cursor: pointer; }
.ob-grp-ico { color: var(--dim); font-size: 14px; }
.ob-head { display: flex; justify-content: space-between; padding: 4px 10px 5px; font-size: 10px; color: var(--dim); letter-spacing: .02em; border-bottom: 1px solid var(--line); }
/* ticket header (pair + live price), like app.walbi.com */
.tk-head { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.tk-coin { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.tk-hcol { display: flex; flex-direction: column; line-height: 1.18; }
.tk-pairname { font-size: 14px; font-weight: 700; } .tk-pairname .dim { font-weight: 600; margin-left: 2px; }
.tk-hpx { display: flex; align-items: baseline; gap: 6px; }
.tk-px { font-size: 13px; font-weight: 600; } .tk-chg { font-weight: 600; }
.tk-sp { flex: 1; } .tk-hi { color: var(--dim); font-size: 15px; cursor: pointer; } .tk-hi:hover { color: var(--txt); }
.tk-price-l { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; color: var(--dim); }
.tk-price-l input:disabled { color: var(--dim); cursor: default; }
/* positions panel toolbar (Позиции по всем балансам · Статистика ИИ) */
.wd-colpanel { display: flex; flex-direction: column; }
.wd-flex1 { flex: 1 1 0; min-height: 0; height: auto; }
.pos-bar { display: flex; align-items: center; gap: 16px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 11px; }
.pos-chk { display: flex; align-items: center; gap: 7px; color: var(--dim); cursor: pointer; }
.pos-chk input { accent-color: var(--accent); width: 13px; height: 13px; cursor: pointer; }
.pos-stat { cursor: pointer; font-weight: 600; }
.wd-ob { display: flex; flex-direction: column; height: 100%; font-family: "Inter Display", "Inter", "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; font-size: 11.5px; }
.ob-s { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .ob-s.bids { justify-content: flex-start; }
.ob-r { position: relative; display: flex; justify-content: space-between; padding: 2px 10px; } .ob-r i { position: absolute; right: 0; top: 0; bottom: 0; } .ob-r.up i { background: color-mix(in srgb, var(--up) 24%, transparent); } .ob-r.down i { background: color-mix(in srgb, var(--down) 24%, transparent); } .ob-r span { position: relative; }
.ob-mid { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; background: var(--panel2); border-block: 1px solid var(--line); font-weight: 700; }
.ob-mid > span:first-child { font-size: 17px; letter-spacing: -.01em; }
.ob-arrow { font-size: 15px; } .ob-arrow.up { color: var(--up); } .ob-arrow.down { color: var(--down); }
.ob-bs { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 10px; font-weight: 700; border-top: 1px solid var(--line); }
.ob-bsbar { flex: 1; display: flex; height: 5px; border-radius: 3px; overflow: hidden; }
.ob-bsbar i { display: block; height: 100%; } .ob-bsbar i.up { background: var(--up); } .ob-bsbar i.down { background: var(--down); }
.ob-mid .sm { font-size: 9.5px; font-weight: 500; }

/* ticket */
.wd-ticket { padding: 11px; display: flex; flex-direction: column; gap: 7px; height: 100%; overflow-y: auto; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .seg.sm button { font-size: 11px; padding: 5px; }
.seg button { flex: 1; background: var(--panel2); color: var(--dim); border: none; padding: 8px; cursor: pointer; font: inherit; }
.seg button.on.up { background: color-mix(in srgb, var(--up) 20%, transparent); color: var(--up); } .seg button.on.down { background: color-mix(in srgb, var(--down) 20%, transparent); color: var(--down); } .seg button.on { background: var(--dk-accent-soft); color: var(--txt); }
.wd-ticket label { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--dim); } .wd-ticket input { width: 130px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: var(--txt); padding: 7px 9px; font: inherit; text-align: right; }
.submit { background: #009f70; color: #fff; border: none; border-radius: 8px; height: 48px; padding: 0; font: 400 16px/1 inherit; cursor: pointer; } .submit.down { background: #f14f5d; color: #fff; }
.submit:disabled { opacity: .55; cursor: default; }
/* enriched ticket */
.tk-acct { display: flex; flex-direction: column; gap: 3px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.tk-ar { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--dim); }
.tk-ar b, .tk-ar > span:last-child { color: var(--txt); font-weight: 600; }
.tk-row2 { display: flex; gap: 6px; } .tk-row2 .seg { flex: 1; }
.tk-presets { display: flex; gap: 5px; margin-top: -3px; }
.tk-presets button { flex: 1; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: var(--dim); padding: 6px 0; font: inherit; font-size: 10.5px; cursor: pointer; }
.tk-presets button:hover { color: var(--txt); border-color: var(--accent); }
.tk-calc { display: flex; flex-direction: column; gap: 3px; padding: 7px 0; border-top: 1px solid var(--line); }
.tk-btns { display: flex; gap: 8px; } .tk-btns .submit { flex: 1; }
.tk-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) 0 var(--p,8%), var(--line) var(--p,8%) 100%); outline: none; margin: 0; cursor: pointer; }
.tk-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid var(--bg); }
.tk-slider::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid var(--bg); }
.tk-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 11px; color: var(--txt); }
.tk-check input { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; }
.tk-tpsl { display: flex; flex-direction: column; gap: 7px; }
.tk-eqhead { display: flex; align-items: center; padding-top: 2px; }
.tk-eqi { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--panel2); border: 1px solid var(--line); color: var(--dim); font-size: 12px; cursor: pointer; font-style: normal; margin-left: 6px; }
.tk-eqi.plus { background: var(--accent); color: #fff; border-color: var(--accent); }
.tk-eqrow { display: flex; align-items: baseline; gap: 6px; padding-bottom: 2px; }
.tk-eqrow b { font-size: 20px; font-weight: 700; letter-spacing: -.3px; } .tk-chev { color: var(--dim); margin-left: 2px; }
/* ── ticket form: stacked label + full-width input w/ unit suffix (вёрстка 1:1 app.walbi.com) ── */
.tk-field { display: flex; flex-direction: column; gap: 5px; }
.tk-fl { font-size: 11px; color: var(--dim); }
.tk-inwrap { position: relative; }
.tk-inwrap input { width: 100%; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: var(--txt); padding: 10px 46px 10px 11px; font: inherit; font-size: 13px; font-weight: 600; text-align: right; }
.tk-inwrap input:disabled { color: var(--dim); }
.tk-unit { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--dim); font-size: 12px; pointer-events: none; }
/* slider track + tick markers (0/25/50/75/100), like walbi */
.tk-slwrap { position: relative; padding-bottom: 8px; }
.tk-slwrap .tk-slider { width: 100%; }
.tk-ticks { position: absolute; left: 7px; right: 7px; bottom: 0; display: flex; justify-content: space-between; pointer-events: none; }
.tk-ticks i { width: 2px; height: 4px; border-radius: 1px; background: var(--line); }
/* order-type / margin segments fuller + gear (walbi) */
.tk-row2 .seg button { padding: 9px 6px; font-size: 12px; }
.tk-gear { flex: none; width: 40px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: var(--dim); cursor: pointer; font-size: 14px; }
.tk-gear:hover { color: var(--txt); border-color: var(--accent); }
/* buy/sell CTA wrapper spacing */
.tk-btns { margin-top: 2px; } .tk-btns .submit { flex: 1; }
.tk-gear { flex: none; width: 34px; background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; color: var(--dim); cursor: pointer; font-size: 13px; }
.tk-gear:hover { color: var(--txt); border-color: var(--accent); }
.tk-tpslrow { display: flex; gap: 14px; }
.tk-liq { padding-top: 2px; } .tk-liq .mono { color: var(--accent); }

/* time & sales */
.tp-r { display: flex; justify-content: space-between; padding: 3px 10px; border-bottom: 1px solid rgba(255,255,255,.03); font-family: "IBM Plex Mono", monospace; font-size: 11px; } .tp-r.up { background: color-mix(in srgb, var(--up) 6%, transparent); } .tp-r.down { background: color-mix(in srgb, var(--down) 6%, transparent); }

/* signals */
.wd-signals { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.sg-card { background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--up); border-radius: 9px; padding: 10px; } .sg-card.down { border-left-color: var(--down); }
.sg-h { display: flex; align-items: center; gap: 8px; } .sg-h b { flex: 1; } .sg-dir { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 4px; background: color-mix(in srgb, var(--up) 18%, transparent); color: var(--up); } .sg-card.down .sg-dir { background: color-mix(in srgb, var(--down) 18%, transparent); color: var(--down); }
.sg-imp { font-size: 9px; padding: 1px 6px; border-radius: 4px; } .imp-high { background: color-mix(in srgb, var(--down) 18%, transparent); color: var(--down); } .imp-med { background: rgba(255,159,10,.18); color: #ff9f0a; } .imp-low { background: rgba(125,138,160,.18); color: var(--dim); }
.sg-px { font-size: 11px; color: var(--dim); margin: 6px 0; } .sg-go { width: 100%; background: var(--dk-accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 7px; padding: 7px; font: inherit; font-size: 11px; cursor: pointer; }

/* predictions */
.wd-predict { padding: 14px; } .pr-q { font-size: 13px; margin-bottom: 12px; } .pr-bar { height: 8px; border-radius: 4px; background: var(--down); overflow: hidden; } .pr-bar i { display: block; height: 100%; background: var(--up); } .pr-pct { display: flex; justify-content: space-between; font-size: 12px; margin: 6px 0; } .pr-cd { text-align: center; font-size: 20px; margin: 10px 0; } .pr-btns { display: flex; gap: 8px; } .pr-btns button { flex: 1; padding: 12px; border: none; border-radius: 9px; font: 600 13px/1 inherit; cursor: pointer; } .pr-btns .up { background: color-mix(in srgb, var(--up) 85%, black); color: #04210f; } .pr-btns .down { background: color-mix(in srgb, var(--down) 85%, black); color: #2a0710; }

/* agents + chat */
.wd-agents { padding: 8px; display: flex; flex-direction: column; gap: 8px; } .ag-card { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 10px; } .ag-h { display: flex; align-items: center; } .ag-h b { flex: 1; } .ag-st { font-size: 10px; color: var(--dim); } .ag-st.on { color: var(--up); } .ag-stats { font-size: 11px; margin: 4px 0 8px; } .ag-go { width: 100%; border: none; border-radius: 7px; padding: 7px; font: inherit; font-size: 11px; cursor: pointer; } .ag-go.up { background: color-mix(in srgb, var(--up) 18%, transparent); color: var(--up); } .ag-go.down { background: color-mix(in srgb, var(--down) 18%, transparent); color: var(--down); }
.wd-chat { display: flex; flex-direction: column; } .ch-log { flex: 1; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .ch-m { max-width: 85%; padding: 7px 10px; border-radius: 10px; font-size: 12px; } .ch-m.ai { background: var(--panel2); align-self: flex-start; } .ch-m.me { background: var(--dk-accent-soft); align-self: flex-end; } .ch-in { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); } .ch-in input { flex: 1; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: var(--txt); padding: 7px 10px; font: inherit; } .ch-in button { width: 34px; border: none; border-radius: 8px; background: color-mix(in srgb, var(--up) 85%, black); color: #04210f; cursor: pointer; }

/* misc */
.at-row { display: flex; justify-content: space-between; align-items: baseline; } .wl-big { font-size: 28px; font-weight: 700; } .wl-btns, .pf { display: flex; gap: 8px; } .wl-btns button { flex: 1; background: var(--panel2); border: 1px solid var(--line); color: var(--txt); border-radius: 8px; padding: 9px; font: inherit; cursor: pointer; } .wl-btns .up { background: color-mix(in srgb, var(--up) 18%, transparent); color: var(--up); border-color: transparent; }
.wd-inbox .ib-r { display: flex; gap: 9px; padding: 9px 12px; border-bottom: 1px solid var(--line); } .ib-i { font-size: 16px; } .ib-t { font-size: 12px; }
.pf { align-items: center; } .pf-av { width: 42px; height: 42px; border-radius: 50%; background: var(--dk-accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; }
.vc-card { background: var(--panel2); border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 10px; padding: 14px; text-align: center; } .vc-amt { font-size: 26px; font-weight: 700; } .vc-card button { border: none; border-radius: 7px; padding: 7px 14px; background: color-mix(in srgb, var(--up) 85%, black); color: #04210f; cursor: pointer; }

/* live-state widgets */
.wd-load, .wd-empty, .wd-offline { display: grid; place-items: center; height: 100%; min-height: 60px; color: var(--dim); font-size: 12px; text-align: center; padding: 16px; }
.wd-offline { color: var(--down); } .wd-offline .dim { color: var(--dim); margin-top: 4px; }
.wd-load { opacity: .7; }
.wd-load::before { content: "◌ "; }

button.mini.close { background: color-mix(in srgb, var(--down) 18%, transparent); color: var(--down); margin-left: 6px; padding: 0 6px; }
.t-status { margin-top: 4px; } .submit:disabled { opacity: .55; cursor: default; }

/* cross-widget: clickable symbols in watchlist drive the chart */
.wl-sym { cursor: pointer; transition: color .12s; }
.wl-sym:hover { color: var(--accent); }

/* polished empty/load states */
.wd-empty { font-style: italic; opacity: .8; }
.wd-empty::before { content: "○ "; opacity: .5; }

/* Аналитика — Индекс страха и жадности */
.wd-fng { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px; }
.fng-svg { width: 100%; max-width: 250px; }
.fng-val { font: 800 30px "Inter Display", "Inter", sans-serif; letter-spacing: -1px; }
.fng-cls { font-size: 16px; font-weight: 700; }
.fng-hist { display: flex; gap: 28px; }
.fng-hist > div { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; } .fng-hist b { font-size: 16px; }
/* Аналитика — Обзор рынка */
.mg-cap { padding-bottom: 6px; } .mg-cap .wl-big { font-size: 24px; }
.mg-dom { padding: 10px 0; }
.mg-bar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: var(--line); }
.mg-bar i { display: block; height: 100%; } .mg-bar i.btc { background: #f7931a; } .mg-bar i.eth { background: #627eea; }
.mg-leg { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 7px; font-size: 11px; } .mg-leg b { font-size: 9px; }
/* Аналитика — Тепловая карта */
.wd-heat { height: 100%; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 3px; padding: 6px; align-content: start; }
.ht-tile { border-radius: 6px; padding: 8px 6px; display: flex; flex-direction: column; gap: 2px; min-height: 52px; justify-content: center; cursor: pointer; transition: transform .1s; }
.ht-tile:hover { transform: scale(1.04); }
.ht-sym { font-weight: 700; font-size: 12px; } .ht-ch { font-size: 11px; }
/* Аналитика — Тренды */
.tr-row { display: flex; align-items: center; gap: 9px; padding: 7px 11px; border-bottom: 1px solid rgba(255,255,255,.04); }
.tr-n { width: 16px; color: var(--dim); font-size: 11px; text-align: center; } .tr-ic { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.tr-name { flex: 1; font-size: 12px; min-width: 0; } .tr-name b { text-transform: uppercase; } .tr-rank { font-size: 11px; }
/* Аналитика — Топ роста/падения */
.mv-h { padding: 8px 11px 4px; font-size: 11px; font-weight: 700; position: sticky; top: 0; background: var(--panel); z-index: 1; }
.mv-row { display: flex; align-items: center; gap: 9px; padding: 6px 11px; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 12px; cursor: pointer; }
.mv-row:hover { background: var(--panel2); }
.mv-row b { text-transform: uppercase; width: 54px; flex: none; } .mv-row .mono.dim { flex: 1; text-align: right; }
.mv-row > span:last-child { width: 66px; text-align: right; flex: none; }
/* Аналитика — Часы рынков */
.se-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 2px; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 12px; }
.se-row b { margin-right: 4px; } .se-crypto { font-weight: 600; }
.se-clock { text-align: center; padding-top: 12px; color: var(--dim); font-size: 14px; letter-spacing: .5px; }
/* Аналитика — Топ-50 таблица */
.mt-name { display: flex; align-items: center; gap: 7px; } .mt-name b { text-transform: uppercase; }
.wd-tr.mt-row { cursor: pointer; }
.seg.side.sm button { padding: 6px; font-size: 12px; }
/* Аналитика — Альтсезон */
.alt-idx { font: 800 42px "Inter Display", sans-serif; text-align: center; letter-spacing: -2px; }
.alt-season { text-align: center; font-size: 15px; font-weight: 700; margin-top: -4px; }
.alt-bar { position: relative; height: 9px; border-radius: 5px; margin: 20px 4px 4px; background: linear-gradient(90deg, #f7931a, #8b8e9e 50%, #16c784); }
.alt-bar i { position: absolute; top: -4px; width: 4px; height: 17px; border-radius: 2px; background: var(--txt); transform: translateX(-50%); box-shadow: 0 0 6px rgba(0,0,0,.6); }
.alt-leg { display: flex; justify-content: space-between; margin: 6px 4px 0; font-size: 10px; color: var(--dim); }
/* Торговля — Конвертер */
.cv-row { display: flex; align-items: center; gap: 8px; }
.cv-sel { flex: 1; background: var(--panel2); border: 1px solid var(--line); color: var(--txt); border-radius: 7px; padding: 8px; font: inherit; cursor: pointer; }
.cv-arrow { color: var(--dim); font-size: 16px; }
.cv-out { padding: 14px 0 4px; text-align: center; } .cv-res { font: 800 24px "Inter Display", sans-serif; letter-spacing: -.5px; margin-bottom: 4px; }

/* Аналитика — Long/Short */
.ls-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ls-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--panel2); }
.ls-bar i { height: 100%; transition: width .4s cubic-bezier(.4,0,.2,1); }
.ls-l { background: color-mix(in srgb, var(--up) 80%, transparent); } .ls-s { background: color-mix(in srgb, var(--down) 80%, transparent); }
.ls-leg { display: flex; justify-content: space-between; margin: 6px 2px 0; font-size: 11px; font-weight: 600; }
.ls-spark { margin-top: 10px; } .ls-spark svg { width: 100%; height: 38px; display: block; }
/* Аналитика — Волатильность */
.vol-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.vol-s { width: 38px; font-weight: 700; font-size: 12px; }
.vol-track { flex: 1; height: 8px; border-radius: 4px; background: var(--panel2); overflow: hidden; }
.vol-track i { display: block; height: 100%; border-radius: 4px; transition: width .4s cubic-bezier(.4,0,.2,1); }
.vol-row b { width: 46px; text-align: right; font-size: 12px; }
/* Аналитика — Газ ETH */
.gas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gas-card { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gas-card.sel { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, var(--panel2)); }
.gas-ic { font-size: 18px; } .gas-card b { font: 800 22px "Inter Display", sans-serif; letter-spacing: -1px; }
/* Сигналы — Лента новостей */
.news-list { display: flex; flex-direction: column; }
.news-it { display: block; padding: 9px 11px; border-bottom: 1px solid rgba(255,255,255,.04); text-decoration: none; color: var(--txt); transition: background .12s; }
.news-it:hover { background: var(--panel2); }
.news-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.news-src { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.news-t { font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ═══ WALBI fidelity polish (design iterations 51–80) ═══ */
/* thin subtle scrollbars like app.walbi.com */
.dk-content ::-webkit-scrollbar, .wd-fill::-webkit-scrollbar, .wd-tbl::-webkit-scrollbar, .rail-body::-webkit-scrollbar, .wd-heat::-webkit-scrollbar { width: 7px; height: 7px; }
.dk-content ::-webkit-scrollbar-thumb, .wd-fill::-webkit-scrollbar-thumb, .wd-tbl::-webkit-scrollbar-thumb, .rail-body::-webkit-scrollbar-thumb, .wd-heat::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.dk-content ::-webkit-scrollbar-thumb:hover, .rail-body::-webkit-scrollbar-thumb:hover { background: var(--dim); }
.dk-content ::-webkit-scrollbar-track { background: transparent; }
.dk-content, .rail-body { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::selection { background: color-mix(in srgb, var(--accent) 38%, transparent); }
/* dock tabs as PILLS, like app.walbi.com bottom panel (measured: radius 24px, h32, active 8% white, text #f6f7ff) */
body[data-theme="walbi"] .dk-tabbar { gap: 4px; padding: 0 6px; align-items: center; background: var(--bg); border-bottom: none; }
body[data-theme="walbi"] .dk-tab { font-size: 14px; border-right: none; border-radius: 24px; padding: 0 13px; margin: 0; color: var(--txt); box-shadow: none; }
body[data-theme="walbi"] .dk-tab .dk-ttl { font-weight: 400; }
body[data-theme="walbi"] .dk-tab:hover { background: color-mix(in srgb, var(--txt) 5%, transparent); color: var(--txt); }
body[data-theme="walbi"] .dk-tab.active { background: color-mix(in srgb, var(--txt) 8%, transparent); color: var(--txt); box-shadow: none; }
body[data-theme="walbi"]:not(.edit) .dk-tab .dk-ico { display: none; }   /* walbi bottom tabs = text-only pills */
/* input focus ring + transitions */
.wd-ticket input, .cv-sel, .ob-grp-sel, .rail-search input { transition: border-color .12s, box-shadow .12s; }
.wd-ticket input:focus, .cv-sel:focus, .ob-grp-sel:focus, .rail-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
/* button press + hover */
.submit { transition: filter .12s, transform .07s; } .submit:hover { filter: brightness(1.08); }
.submit:active, .tk-presets button:active, .tf-btn:active, #bar .bar-deposit:active { transform: translateY(1px); }
#bar .bar-deposit { transition: filter .12s; } #bar .bar-deposit:hover { filter: brightness(1.08); }
.seg button { transition: background .12s, color .12s; }
/* numeric = tabular figures */
.mono { font-variant-numeric: tabular-nums; }
/* row hovers */
.ob-r { transition: background .08s; } .ob-r:hover { background: rgba(255,255,255,.03); }
.wd-tr { transition: background .08s; }
.as-active { transition: border-color .12s; } .as-active:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
/* mid price subtle emphasis */
.ob-mid > span:first-child { text-shadow: 0 0 12px color-mix(in srgb, currentColor 35%, transparent); }
/* panel header (edit mode) cleaner */
.dk-tab { transition: background .12s; }

/* ═══ walbi design-language adoption — interaction states + density (115–130) ═══ */
/* 115 tabular numerals on every numeric surface (alignment like walbi) */
.ob-r, .as-act-px, .tk-eqrow b, .tk-hpx, .vol-row b, .ls-head b, .wd-tbl, .mv-row, .tr-rank { font-variant-numeric: tabular-nums; }
/* 116 segment active = inset filled pill (walbi look) */
.seg button { margin: 2px; border-radius: 6px; transition: background .12s, color .12s; }
.seg { padding: 0; gap: 0; }
/* 117 selected quick-amount / preset highlight */
.tk-presets button.on { background: var(--dk-accent-soft); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); color: var(--accent); font-weight: 600; }
.tk-presets button:active { transform: translateY(1px); }
/* 118 slider thumb hover/active feedback */
.tk-slider::-webkit-slider-thumb { transition: transform .1s, box-shadow .1s; }
.tk-slider:hover::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.tk-slider:active::-webkit-slider-thumb { transform: scale(1.2); }
/* 119 keyboard focus-visible rings (a11y + polish) on bar + actions */
#bar button:focus-visible, .submit:focus-visible, .tk-presets button:focus-visible, .tf-btn:focus-visible, .rc-plus:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#bar button:focus:not(:focus-visible) { outline: none; }
/* 120 denser order-book rows (walbi compact rows) */
.ob-r { padding-top: 1.5px; padding-bottom: 1.5px; line-height: 1.45; }
/* 121 sticky column header in the order book */
.ob-head { position: sticky; top: 0; z-index: 2; background: var(--panel); }
/* 122 liquidation-price row emphasis (walbi shows it accented) */
.tk-liq { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--dim); padding-top: 2px; }
.tk-liq b, .tk-liq .mono { color: var(--accent); }
/* 123 section divider hairlines inside the ticket (walbi groups blocks) */
.tk-price-l { padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); margin-top: 2px; }
/* 124 24h change chip styling in headers */
.tk-chg, .tk-hpx .tk-chg { font-size: 11px; font-weight: 600; }
.tk-chg.up, .as-act-px.up { color: var(--up); } .tk-chg.down, .as-act-px.down { color: var(--down); }
/* 125 bottom-panel utility row (Позиции по всем балансам / Статистика ИИ) */
.pos-chk { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--dim); padding: 9px 12px; }
.pos-chk a, .pos-link { color: var(--accent); cursor: pointer; font-weight: 500; }
/* 126 consistent hover bg on list rows */
.wd-tr:hover, .mv-row:hover, .tr-row:hover, .news-it:hover, .vol-row:hover { background: color-mix(in srgb, var(--txt) 4%, transparent); }
/* 127 buy/sell submit weight + letter-spacing like walbi CTA */
.submit { letter-spacing: .005em; }   /* walbi CTA weight stays 400 (set in base rule) */
/* 128 voice orb uses brand accent gradient (already), add active depress */
#voice-btn:active { transform: scale(.92); }
/* 129 deposit button focus glow */
#bar .bar-deposit:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
/* 130 scrollbars thinner inside rail body (walbi sidebars) */
.rail-body::-webkit-scrollbar { width: 6px; }

/* ═══ walbi design-language adoption — states, type scale, responsive (131–150) ═══ */
/* 131 widget content fades in on mount (subtle, like walbi panels) */
.dk-content > *:not(iframe) { animation: wmIn .22s ease both; }
@keyframes wmIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
/* 132 loading state = animated shimmer instead of static text */
.wd-load { position: relative; overflow: hidden; }
.wd-load::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--txt) 6%, transparent), transparent); transform: translateX(-100%); animation: shimmer 1.3s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
/* 133 empty state — centered, iconographic */
.wd-empty::before { content: "▢"; display: block; font-size: 22px; opacity: .35; margin-bottom: 6px; }
/* 134 offline state — clearer hierarchy */
.wd-offline > div:first-child { font-weight: 600; color: var(--txt); opacity: .8; }
.wd-offline::before { content: "⚠"; display: block; font-size: 18px; color: var(--down); opacity: .7; margin-bottom: 4px; }
/* 135 typography scale tokens (walbi: labels small/dim, values bold/tabular, headings tight) */
:root { --fs-label: 11px; --fs-val: 13px; --fs-h: 14px; }
.wd-pad .dim, .at-row .dim, .wd-ticket label { font-size: var(--fs-label); }
/* 136 consistent uppercase micro-labels (walbi section captions) */
.rail-cat, .mv-h, .ob-head { text-transform: uppercase; letter-spacing: .05em; }
/* 137 subtle elevation on the active/focused pane (walbi depth) */
body:not(.edit) .dk-pane { box-shadow: 0 1px 0 rgba(0,0,0,.25); }
/* 138 mobile: top bar compresses, nav hidden, larger touch targets */
@media (max-width: 820px) {
  :root { --bar: 60px; }
  #bar { padding: 10px 12px; gap: 8px; }
  #bar .bar-right { gap: 9px; } #bar .bar-wallet { display: none; }
  .submit { height: 52px; } .tk-presets button { padding: 9px 0; }
}
/* 139 mobile: rail becomes a full-height sheet with backdrop */
@media (max-width: 820px) {
  body.rail-open::after { content: ""; position: fixed; inset: var(--bar) 0 0 0; background: rgba(0,0,0,.45); z-index: 80; }
  .rc-prev { height: 120px; }
}
/* 140 mobile: denser order-book + ticket fonts */
@media (max-width: 820px) { .ob-mid > span:first-child { font-size: 16px; } .tk-eqrow b { font-size: 18px; } }
/* 141 respect reduced-motion (a11y) */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }
/* 142 input placeholder + disabled tone matches walbi dim */
.wd-ticket input::placeholder, .rail-search input::placeholder { color: var(--dim); opacity: .8; }
/* 143 hover lift on rail quick-actions */
.rail-quick button:active { transform: translateY(1px); }
/* 144 consistent value emphasis (bold tabular) across widget rows */
.at-row b, .se-row b, .wd-tr span:last-child { font-variant-numeric: tabular-nums; }
/* 145 splash sublabel uses brand accent dot rhythm (tighter) */
.sp-sub { letter-spacing: .01em; }
/* 146 active asset-strip pill ring (selected coin) like walbi */
.as-btn.on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
/* 147 order-book depth bars slightly brighter on hover row */
.ob-r:hover.up i { background: color-mix(in srgb, var(--up) 32%, transparent); }
.ob-r:hover.down i { background: color-mix(in srgb, var(--down) 32%, transparent); }
/* 148 ticket gear button hover */
.tk-gear:hover, .tk-eqi:hover { border-color: var(--accent); color: var(--txt); }
/* 149 news source tag uppercase accent (walbi feed style) */
.news-src { text-transform: uppercase; }
/* 150 sticky section captions in scrolling widget bodies */
.wd-fill .mv-h, .wd-fill .rail-cat { position: sticky; top: 0; }

/* ═══ walbi 8px-radius consistency across widget cards + interaction polish (151–175) ═══ */
/* 151 unify card radii (signals/agents/predictions/voucher) to 8px */
.sg-card, .ag-card, .vc-card, .pr-btns button { border-radius: 8px; }
/* 152 unify CTA radii inside cards to 8px */
.sg-go, .ag-go { border-radius: 8px; }
/* 153 status/impact chips to 6px (walbi chip radius) */
.sg-dir, .sg-imp { border-radius: 6px; }
/* 154 signal/agent cards lift on hover */
.sg-card, .ag-card { transition: border-color .12s, transform .08s, box-shadow .12s; }
.sg-card:hover, .ag-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.3); }
/* 155 prediction bar taller, rounded, animated fill */
.pr-bar { height: 10px; border-radius: 5px; } .pr-bar i { transition: width .5s cubic-bezier(.4,0,.2,1); }
/* 156 prediction Да/Нет buttons press + hover */
.pr-btns button { transition: filter .12s, transform .07s; } .pr-btns button:hover { filter: brightness(1.08); } .pr-btns button:active { transform: translateY(1px); }
/* 157 wallet headline tabular + tight tracking (walbi balance look) */
.wl-big { font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
/* 158 wallet action buttons hover */
.wl-btns button { transition: border-color .12s, filter .12s; } .wl-btns button:hover { border-color: var(--accent); }
/* 159 signal "перейти" button hover */
.sg-go:hover, .ag-go:hover { filter: brightness(1.12); }
/* 160 consistent card inner padding (11px like walbi cards) */
.sg-card, .ag-card { padding: 11px; }
/* 161 table header subtle bottom shadow when stuck */
.wd-th { box-shadow: 0 1px 0 var(--line); }
/* 162 table rows: tabular numerals on every cell */
.wd-tr span { font-variant-numeric: tabular-nums; }
/* 163 positive/negative last cell auto-emphasis weight */
.wd-tr span:last-child { font-weight: 600; }
/* 164 voucher card hover */
.vc-card { transition: border-color .12s; } .vc-card:hover { border-color: var(--accent); }
/* 165 consistent 8px stack rhythm in padded widget bodies */
.wd-pad { gap: 8px; }
/* 166 leaderboard / table row pointer affordance */
.mt-row, .wl-sym, .mv-row { cursor: pointer; }
/* 167 prediction countdown emphasis */
.pr-cd { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); }
/* 168 agent status dot pulse when active */
.ag-st.on::before { content: "● "; }
/* 169 signal price line tabular */
.sg-px { font-variant-numeric: tabular-nums; }
/* 170 muted history tone vs live positions (hierarchy) */
.wd-tbl.history .wd-tr { color: color-mix(in srgb, var(--txt) 82%, var(--dim)); }
/* 171 consistent dim label colour token everywhere */
.dim { color: var(--dim); }
/* 172 segment hover (inactive) feedback */
.seg button:not(.on):hover { background: color-mix(in srgb, var(--txt) 6%, var(--panel2)); color: var(--txt); }
/* 173 quick-amount button hover border accent */
.tk-presets button:hover { background: color-mix(in srgb, var(--txt) 4%, var(--panel2)); }
/* 174 voucher / CTA up-buttons consistent green token */
.vc-card button, .ch-in button { font-weight: 600; }
/* 175 asset-strip coin hover scale */
.as-btn { transition: background .12s, transform .08s; } .as-btn:hover { transform: scale(1.08); }

/* ═══ walbi design-language adoption — final wave: tokens, skins, finish (176–200) ═══ */
/* 176 motion + elevation design tokens (single source of truth) */
:root { --t: .12s; --elev-1: 0 1px 0 rgba(0,0,0,.25); --elev-2: 0 4px 14px rgba(0,0,0,.3); --elev-3: 0 10px 40px rgba(0,0,0,.5); }
/* 177 voice caption uses elevation token + walbi panel tone */
#voice-cap { box-shadow: var(--elev-3); }
/* 178 notification bell dot gently pulses (walbi live indicator) */
#bar .bar-bell::after { animation: bellpulse 2s ease-in-out infinite; }
@keyframes bellpulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.8); } }
/* 179 avatar subtle ring (walbi profile chip) */
#bar .bar-av { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg) 100%, transparent), 0 0 0 3px color-mix(in srgb, #2bd576 40%, transparent); }
/* 180 fx Индикаторы / utility links hover */
.tf-ind { cursor: pointer; transition: color var(--t); } .tf-ind:hover { color: var(--txt); }
/* 181 skin parity: pills + cards inherit theme tokens on ALL skins, not just walbi */
body[data-theme="midnight"] .dk-tab.active, body[data-theme="bloomberg"] .dk-tab.active { background: color-mix(in srgb, var(--txt) 8%, transparent); color: var(--txt); }
/* 182 skin parity: neon keeps accent focus ring */
body[data-theme="neon"] .submit:focus-visible, body[data-theme="neon"] #bar button:focus-visible { outline-color: var(--accent); }
/* 183 consistent panel2 hairline borders across cards */
.sg-card, .ag-card, .gas-card, .kpi, .vc-card { border-color: color-mix(in srgb, var(--line) 90%, transparent); }
/* 184 up/down semantic colours unified across every widget (NOT on filled buttons/segments — they set their own text colour) */
.up:not(.submit):not(.seg button):not(.pr-btns button):not(.wl-btns button):not(.ag-go) { color: var(--up); }
.down:not(.submit):not(.seg button):not(.pr-btns button):not(.wl-btns button):not(.ag-go) { color: var(--down); }
.submit.up { color: #fff; }   /* white text on the green CTA, like app.walbi.com */
/* 185 consistent disabled affordance */
button:disabled, input:disabled { opacity: .55; cursor: default; }
/* 186 scroll-shadow hint at the top of scrolling tables */
.wd-tbl { background: linear-gradient(var(--panel) 30%, transparent), radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.25), transparent) 0 0 / 100% 8px no-repeat; }
/* 187 bottom-tab pills get a comfortable min width (walbi) */
body[data-theme="walbi"] .dk-tab { min-width: 0; }
/* 188 focus rings share the 8px radius rhythm */
:root { --focus-r: 8px; }
.submit:focus-visible, .tk-presets button:focus-visible { border-radius: var(--focus-r); }
/* 189 reduce CLS: reserve widget min-height while loading */
.wd-load { min-height: 80px; }
/* 190 voice orb scales down on small screens */
@media (max-width: 820px) { #voice-orb { width: 48px; height: 48px; right: 16px; bottom: 16px; } }
/* 191 consistent bar icon button hit-area */
#bar .bar-ic { min-width: 22px; display: inline-flex; align-items: center; justify-content: center; }
/* 192 heading letter-spacing tightened (walbi display type) */
.wl-big, .alt-idx, .cv-res, .tk-eqrow b { letter-spacing: -.4px; }
/* 193 deposit button matches walbi weight + tracking */
#bar .bar-deposit { letter-spacing: .005em; }
/* 194 splash gradient subtler (less neon, walbi-restrained) */
#splash { background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--accent) 18%, var(--bg)) 0%, var(--bg) 62%); }
/* 195 consistent transition on all interactive controls */
button, .seg button, .rail-card, .as-btn, .tf-btn { transition-duration: var(--t); }
/* 196 table zebra-free but clear row separation (walbi) */
.wd-tr { border-bottom-color: color-mix(in srgb, var(--line) 60%, transparent); }
/* 197 accent selection inside inputs */
.wd-ticket input::selection, .rail-search input::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); }
/* 198 consistent dim sublabels in cards */
.sm { font-size: 10.5px; }
/* 199 prevent text selection flicker on controls (walbi feel) */
button, .dk-tab, .as-btn, .rail-card { -webkit-user-select: none; user-select: none; }
/* 200 final: panel surfaces snap to exact walbi tokens (bg #0f0f11 / panel #07070a) */
body[data-theme="walbi"] { --bg: #0f0f11; --panel: #07070a; --txt: #f6f7ff; --accent: #5364ff; --up: #00b97a; --down: #fe5564; --dim: #8b8e9e; --line: #23232b; }

/* ════════════ ТИКЕТ 1:1 с ЖИВЫМ app.walbi.com — снято getComputedStyle (50 итераций) ════════════ */
/* D-1 контейнер: padding 12, вертикальный ритм 12px */
.wd-ticket { padding: 12px; gap: 12px; }
/* D-2 имя пары 16/500 */
.tk-pairname { font-size: 16px; font-weight: 500; }
/* D-3 иконка монеты 24px */
.tk-coin { width: 24px; height: 24px; }
/* D-4 цена в шапке 16/500 */
.tk-px { font-size: 16px; font-weight: 500; }
/* D-5 изменение 13px */
.tk-chg { font-size: 13px; font-weight: 500; }
/* D-6 ☆ ? 16px, 50% */
.tk-hi { font-size: 16px; color: rgba(246,247,255,.5); }
/* D-7 лейбл «Собственная стоимость» 10px / 50% белого / 500 */
.tk-eqhead .dim { font-size: 10px; color: rgba(246,247,255,.5); font-weight: 500; text-transform: none; letter-spacing: 0; }
/* D-8 кнопки ⇄/＋ 32×32 */
.tk-eqi { width: 32px; height: 32px; border-radius: 8px; font-size: 13px; }
/* D-9 значение equity крупное 26/600 */
.tk-eqrow b { font-size: 26px; font-weight: 600; letter-spacing: -.5px; }
.tk-eqrow .dim { font-size: 12px; }
/* D-10 account-блок: gap 4 */
.tk-acct { gap: 4px; }
/* D-11 account-строки 12px, line-height 16 */
.tk-ar { font-size: 12px; line-height: 16px; }
/* D-12 лейблы account = 50% белого (не серый) */
.tk-ar .dim, .tk-calc .dim, .tk-liq .dim, .tk-fl { color: rgba(246,247,255,.5); }
/* D-13 значения account = белый / 500 */
.tk-ar b, .tk-ar > span:last-child { color: var(--txt); font-weight: 500; }
/* D-14 ряд сегментов: gap 4, выравнивание по центру */
.tk-row2 { gap: 4px; align-items: center; }
/* D-15 сегмент-обёртка: БЕЗ рамки/фона/радиуса (пилюли, не бокс) */
.tk-row2 .seg { border: none; border-radius: 0; background: transparent; gap: 4px; overflow: visible; }
/* D-16 кнопки сегмента = пилюли 24px, h32, 14/400, прозрачные */
.tk-row2 .seg button { border-radius: 24px; height: 32px; padding: 3px 12px; font-size: 14px; font-weight: 400; background: transparent; color: var(--txt); margin: 0; }
/* D-17 активная пилюля = 8% белого (не акцент, не green/red) */
.tk-row2 .seg button.on, .tk-row2 .seg button.on.up, .tk-row2 .seg button.on.down { background: rgba(246,247,255,.08); color: var(--txt); }
/* D-18 hover неактивной пилюли 5% */
.tk-row2 .seg button:not(.on):hover { background: rgba(246,247,255,.05); }
/* D-19 поле: лейбл сверху, gap 6 */
.tk-field { gap: 6px; }
/* D-20 лейбл поля 12/50% */
.tk-fl { font-size: 12px; }
/* D-21 бокс инпута: h50, 4% фон, 4% бордер, radius 8, padding 0 12 */
.tk-inwrap { height: 50px; background: rgba(246,247,255,.04); border: 1px solid rgba(246,247,255,.04); border-radius: 8px; display: flex; align-items: center; padding: 0 12px; }
/* D-22 инпут «голый» внутри бокса, 14/500, слева, без рамки/фона */
.tk-inwrap input { width: 100%; height: 100%; background: transparent; border: none; border-radius: 0; padding: 0; font-size: 14px; font-weight: 500; text-align: left; color: var(--txt); }
/* D-23 disabled = 50% белого */
.tk-inwrap input:disabled { color: rgba(246,247,255,.5); -webkit-text-fill-color: rgba(246,247,255,.5); }
/* D-24 юнит-суффикс НЕ внутри (он в лейбле) */
.tk-inwrap .tk-unit { display: none; }
/* D-25 фокус бокса инпута (рамка акцентом) */
.tk-inwrap:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
/* D-26 слайдер тоньше (4px) */
.tk-slider { height: 4px; background: linear-gradient(90deg, #fff 0 var(--p,8%), rgba(246,247,255,.14) var(--p,8%) 100%); }
/* D-27 палец слайдера = БЕЛЫЙ круг 16px (как noUiSlider) */
.tk-slider::-webkit-slider-thumb { width: 16px; height: 16px; background: #fff; border: none; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.tk-slider::-moz-range-thumb { width: 16px; height: 16px; background: #fff; border: none; }
/* D-28 убрать мои тик-маркеры (у walbi noUi их нет в этом виде) */
.tk-ticks { display: none; }
.tk-slwrap { padding-bottom: 0; }
/* D-29 quick-кнопки = СОЕДИНЁННАЯ сегмент-группа, gap 2 */
.tk-presets { gap: 2px; }
/* D-30 quick-кнопка: 8% фон, без рамки, 13/400, без радиуса */
.tk-presets button { background: rgba(246,247,255,.08); border: none; border-radius: 0; color: var(--txt); font-size: 13px; font-weight: 400; padding: 8px 0; }
/* D-31 первая quick скруглена слева */
.tk-presets button:first-child { border-radius: 8px 0 0 8px; }
/* D-32 последняя quick скруглена справа */
.tk-presets button:last-child { border-radius: 0 8px 8px 0; }
/* D-33 hover quick 14% */
.tk-presets button:hover { background: rgba(246,247,255,.14); color: var(--txt); border-color: transparent; }
/* D-34 calc-строки 12px */
.tk-calc { font-size: 12px; gap: 4px; }
/* D-35 значения calc = белый */
.tk-calc .mono:not(.dim) { color: var(--txt); }
/* D-36 TP/SL чекбоксы 12px */
.tk-check { font-size: 12px; }
.tk-check input { width: 16px; height: 16px; border-radius: 4px; }
/* D-37 ряд кнопок сделки: gap 8, отступ сверху */
.tk-btns { gap: 8px; margin-top: 2px; }
/* D-38 CTA: 48px, 16/400, белый (цвета #009f70/#f14f5d уже) */
.tk-btns .submit { height: 48px; font-size: 16px; font-weight: 400; }
/* D-39 строка ликвидации 12px */
.tk-liq { font-size: 12px; padding-top: 2px; }
/* D-40 шестерёнка как пилюля-бокс 32px */
.tk-gear { width: 32px; height: 32px; border-radius: 8px; background: rgba(246,247,255,.04); border: 1px solid rgba(246,247,255,.04); color: rgba(246,247,255,.5); }
.tk-gear:hover { color: var(--txt); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
/* D-41 шапка тикета: выравнивание, gap */
.tk-head { gap: 9px; align-items: center; }
/* D-42 hcol gap */
.tk-hcol { gap: 2px; }
/* D-43 equity-строка: baseline, gap 6 */
.tk-eqrow { gap: 6px; align-items: baseline; }
/* D-44 chevron 50% */
.tk-chev { color: rgba(246,247,255,.5); }
/* D-45 разделители-хайрлайны блоков (account/calc) под walbi */
.tk-acct, .tk-calc { border-color: rgba(246,247,255,.06); }
/* D-46 t-status 11px 50% */
.t-status { font-size: 11px; color: rgba(246,247,255,.5); }
/* D-47 P&L нулевой = нейтральный (не зелёный) */
#tk-pnl { color: var(--txt); }
/* D-48 убрать верхнюю hairline у tk-price-l (в новой вёрстке не нужна) */
.tk-price-l { border-top: none; padding-top: 0; margin-top: 0; }
/* D-49 равная высота сегмент-рядов и поджать ⚙ к ним */
.tk-row2 .seg { flex: 1; justify-content: flex-start; }
/* D-50 общий tabular на значениях формы */
.tk-inwrap input, .tk-eqrow b, .tk-ar b, .tk-calc .mono { font-variant-numeric: tabular-nums; }

/* ════ ТИКЕТ: компактный вертикальный ритм чтобы влезать как walbi (646px, без скролла) ════ */
/* F-1 общий ритм формы 5px (было 12 → −100px) + паддинг 10 */
.wd-ticket { gap: 5px; padding: 10px 12px; }
/* F-2 бокс инпута 48px (walbi), не 50 */
.tk-inwrap { height: 48px; }
/* F-3 поле: лейбл к боксу gap 3 */
.tk-field { gap: 3px; }
/* F-4 quick-кнопки 20px высотой (walbi), padding 3 */
.tk-presets button { padding: 3px 0; font-size: 12px; }
/* F-5 слайдер-обёртка без лишних отступов */
.tk-slwrap { padding: 0; margin: 1px 0; }
/* F-6 account-блок плотнее */
.tk-acct { gap: 2px; padding-bottom: 6px; }
/* F-7 calc-блок плотнее */
.tk-calc { gap: 2px; padding: 6px 0; }
/* F-8 equity-строка без лишнего паддинга */
.tk-eqrow { padding: 0; } .tk-eqhead { padding-top: 0; }
/* F-9 шапка плотнее снизу */
.tk-head { padding-bottom: 2px; }
/* F-10 TP/SL ряд компактный */
.tk-tpslrow { gap: 16px; }
/* F-11 строка статуса убрана из высоты (абсолютно мелкая) */
.t-status { margin-top: 2px; font-size: 10px; }
/* F-12 ликвидация компактно */
.tk-liq { padding-top: 0; }
/* F-13 убрать скролл если влезает (overflow только при крайней нужде) */
.wd-ticket { overflow-y: auto; scrollbar-width: none; }
.wd-ticket::-webkit-scrollbar { width: 0; }

/* ════ ТИКЕТ: добить компактность до влезания (cut −82px) ════ */
/* F-14 ритм 3px */
.wd-ticket { gap: 3px; padding: 8px 12px; }
/* F-15 бокс инпута 46px */
.tk-inwrap { height: 46px; }
/* F-16 quick 20px (padding 2) */
.tk-presets button { padding: 2px 0; }
/* F-17 equity-значение 23px (чуть компактнее, влезает) */
.tk-eqrow b { font-size: 23px; }
/* F-18 account/calc ещё плотнее */
.tk-acct { padding-bottom: 5px; } .tk-calc { padding: 5px 0; }
/* F-19 TP/SL ряд тоньше */
.tk-tpslrow { margin: 1px 0; }
/* F-20 шапка/equity без вертикального воздуха */
.tk-head { padding-bottom: 0; } .tk-eqhead { margin-top: 0; }

/* ════ ТИКЕТ: финальное влезание (−29px) ════ */
/* F-21 ритм 2px */
.wd-ticket { gap: 2px; padding: 6px 12px 8px; }
/* F-22 бокс инпута 44px */
.tk-inwrap { height: 44px; }
/* F-23 equity 21px */
.tk-eqrow b { font-size: 21px; }
/* F-24 слайдер-обёртка вплотную */
.tk-slwrap { margin: 0; }

/* ════ ТИКЕТ: тонкие детали слайдера/quick/equity (снято getComputedStyle walbi) ════ */
/* G-1 слайдер: трек-зона 16px прозрачная (как noUi-target) */
.tk-slider { height: 16px; background: transparent; padding: 0; }
/* G-2 тонкий трек 4px через runnable-track + accent-fill до позиции */
.tk-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #5364ff 0 var(--p,8%), rgba(246,247,255,.12) var(--p,8%) 100%); }
.tk-slider::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(246,247,255,.12); }
.tk-slider::-moz-range-progress { height: 4px; border-radius: 2px; background: #5364ff; }
/* G-3 палец: БЕЛЫЙ круг 16px с кольцом 4px accent (#5364ff) — фирменный walbi */
.tk-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid #5364ff; box-sizing: border-box; margin-top: -6px; box-shadow: none; }
.tk-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid #5364ff; box-sizing: border-box; }
/* G-4 quick-текст 15px (walbi 16, чуть ужат под высоту 20) */
.tk-presets button { font-size: 15px; }
/* G-5 equity-иконки ⇄/＋ крупнее (walbi 40px), radius 8 */
.tk-eqi { width: 36px; height: 36px; }
/* G-6 ⇄ прозрачная (как walbi), только ＋ синяя */
.tk-eqi { background: transparent; border-color: transparent; color: rgba(246,247,255,.7); }
.tk-eqi.plus { background: var(--accent); color: #fff; }
/* G-7 equity-ряд: чуть воздуха под крупным значением */
.tk-eqrow { padding-bottom: 4px; }

/* G-8 re-fit: quick 13px, без лишнего паддинга equity */
.tk-presets button { font-size: 13px; padding: 2px 0; }
.tk-eqrow { padding-bottom: 2px; }

/* G-9 финальный трим −7px */
.tk-acct { padding-bottom: 3px; } .tk-calc { padding: 3px 0; } .tk-eqrow { padding-bottom: 0; }

/* G-10 market-режим без price-лейбла (walbi) → вернуть полные размеры walbi */
.tk-eqrow b { font-size: 24px; }      /* ближе к walbi 26 */
.tk-inwrap { height: 46px; }          /* ближе к walbi 48 */

/* ════ ТИКЕТ: чекбоксы TP/SL + лейблы (снято с walbi) ════ */
/* H-1 кастомный чекбокс = бокс 20px, 8% фон, radius 4 (walbi 22px 8%) */
.tk-check input { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 4px; background: rgba(246,247,255,.08); border: 1px solid rgba(246,247,255,.06); position: relative; cursor: pointer; margin: 0; }
/* H-2 отмеченный = accent + галка */
.tk-check input:checked { background: var(--accent); border-color: var(--accent); }
.tk-check input:checked::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; }
/* H-3 лейбл TP/SL = белый (walbi), 13px */
.tk-check { font-size: 13px; color: var(--txt); gap: 7px; }
/* H-4 строка ликвидации: лейбл белый (walbi), значение белый */
.tk-liq .dim { color: var(--txt); }
.tk-liq { font-size: 12px; }
/* H-5 иконка монеты квадратная как walbi (radius 0 на img, арт круглый сам) */
.tk-coin { border-radius: 50%; }
/* H-6 calc-значения tabular */
.tk-calc .mono { font-variant-numeric: tabular-nums; }