/* arb-bot-lab — спокойный дашборд. Без внешних шрифтов и CDN.
   Все цвета живут только в двух блоках переменных ниже: тёмная тема — значения по умолчанию, светлая переопределяет их. */
:root{
  --bg:#14161a; --panel:#1c1f25; --panel-2:#181b21; --line:#2a2e37; --line-strong:#3a404c;
  --fg:#e4e6ea; --muted:#9aa1ad; --dim:#7d848f;
  --accent:#5b8def; --accent-soft:#232f47; --accent-line:#33487a;
  --pos:#4fae7b; --neg:#d9655f; --warn:#d2ad55;
  --row-hover:#22262e; --row-open:#262b35; --stripe:#ffffff05;
  --tag-bg:#272b34; --tag-swap:#23392c; --tag-out:#37311f; --tag-in:#1f3440; --tag-other:#2a2d36;
  --code-bg:#111318; --tip-bg:#232830; --shadow:0 6px 20px #00000059;
  --banner-bg:#332022; --banner-line:#63393a;
  --sig-bg:#1e2a21; --sig-fg:#8fcf9f; --trig-bg:#232019;
  --chart-bar:#5b8def; --chart-hover:#ffffff14; --chart-grid:#39404c;
  --sidebar-w:220px;
}
:root[data-theme="light"]{
  --bg:#f6f7f9; --panel:#ffffff; --panel-2:#f9fafb; --line:#e3e6eb; --line-strong:#ccd2db;
  --fg:#1c2026; --muted:#667085; --dim:#7d8695;
  --accent:#2f6fde; --accent-soft:#e6eefc; --accent-line:#bed3f5;
  --pos:#1f8f57; --neg:#c9433c; --warn:#9a7118;
  --row-hover:#f1f4f8; --row-open:#e9eef6; --stripe:#00000004;
  --tag-bg:#eef1f5; --tag-swap:#e3f2e9; --tag-out:#f7efdc; --tag-in:#e4eff7; --tag-other:#eef1f5;
  --code-bg:#f2f4f7; --tip-bg:#ffffff; --shadow:0 8px 24px #10182818;
  --banner-bg:#fdedec; --banner-line:#f0bbb7;
  --sig-bg:#e7f4ea; --sig-fg:#1f6b3c; --trig-bg:#faf5e7;
  --chart-bar:#2f6fde; --chart-hover:#00000010; --chart-grid:#ccd2db;
}

*{box-sizing:border-box}
html{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:14px;line-height:1.45;margin:0;min-height:100%;
  background:var(--bg);color:var(--fg);font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:17px;margin:0;font-weight:600}
h2{font-size:15.5px;margin:20px 0 8px;font-weight:600}
h3{font-size:13.5px;margin:0 0 8px;font-weight:600;color:var(--fg)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px}
.muted{color:var(--muted)}.dim{color:var(--dim)}
.pos{color:var(--pos)}.neg{color:var(--neg)}.hit{color:var(--warn)}
.nowrap{white-space:nowrap}
.right{text-align:right}
.w90{width:92px}

/* ---------- каркас ---------- */
/* без align-items:flex-start: иначе колонка получает ширину по содержимому и широкая таблица растягивает всю страницу вбок */
.app{display:flex;align-items:stretch;min-height:100vh}
.sidebar{position:sticky;top:0;flex:0 0 var(--sidebar-w);width:var(--sidebar-w);height:100vh;z-index:20;
  display:flex;flex-direction:column;gap:14px;padding:18px 14px;background:var(--panel);border-right:1px solid var(--line)}
.brand{display:flex;flex-direction:column;gap:2px;padding:0 6px}
.brand b{font-size:15px;font-weight:600;letter-spacing:.01em}
.brand small{color:var(--dim);font-size:11.5px;line-height:1.3}
.content{flex:1 1 auto;min-width:0;max-width:1400px;padding:0 24px 56px}
.head{padding:20px 0 4px}
.head .sub{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.wrap{padding:0}

/* вкладки: в колонке слева, на узком экране — горизонтальная полоса с прокруткой */
.tabs{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;min-height:0}
.tabs button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;white-space:nowrap;
  background:none;border:1px solid transparent;border-radius:10px;color:var(--muted);font:inherit;font-size:13.5px;padding:7px 10px;cursor:pointer}
.tabs button:hover{background:var(--row-hover);color:var(--fg)}
.tabs button.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--fg)}
.tabs button.on .ico{color:var(--accent)}
.ico{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.side-foot{display:flex;flex-direction:column;gap:8px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 10px;font:inherit;font-size:12.5px;
  background:var(--panel-2);color:var(--muted);border:1px solid var(--line);border-radius:9px;cursor:pointer}
.icon-btn:hover{color:var(--fg);border-color:var(--line-strong)}
.icon-btn .ico{width:15px;height:15px}
.live-line{display:flex;align-items:flex-start;gap:7px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);
  color:var(--muted);font-size:11.5px;line-height:1.35;cursor:default;overflow-wrap:anywhere}
.live-line:focus{outline:1px solid var(--accent-line)}
.dot{width:8px;height:8px;margin-top:4px;border-radius:50%;flex:0 0 auto;background:var(--dim)}
.dot.ok{background:var(--pos)}.dot.bad{background:var(--neg)}.dot.off{background:var(--dim)}

/* плашка живого режима */
.banner{display:flex;gap:9px;align-items:flex-start;background:var(--banner-bg);border:1px solid var(--banner-line);border-radius:10px;
  padding:11px 14px;margin:14px 0 0;font-size:13px}
.banner .ico{width:17px;height:17px;margin-top:1px;color:var(--neg)}
.banner b{font-weight:600}

/* ---------- фильтры ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 10px}
.filters label{color:var(--dim);font-size:12px;display:flex;align-items:center;gap:5px}
select,input,button.btn{height:32px;background:var(--panel);color:var(--fg);border:1px solid var(--line-strong);border-radius:9px;
  padding:0 9px;font:inherit;font-size:12.5px}
input[type=search]{min-width:210px}
input[type=date]{min-width:130px}
select:focus,input:focus,button.btn:focus{outline:1px solid var(--accent);outline-offset:0}
button.btn{cursor:pointer;color:var(--muted)}
button.btn:hover:not(:disabled){background:var(--row-hover);color:var(--fg)}
button.btn:disabled{opacity:.45;cursor:default}
.count{color:var(--dim);font-size:12.5px;margin-left:auto}

/* ---------- плитки и панели ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin:14px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.card>small:first-child{display:block;color:var(--muted);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.card b{display:block;font-size:21px;font-weight:600;margin:5px 0 2px;overflow-wrap:anywhere}
.card small{color:var(--dim);font-size:12px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:14px 0;min-width:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:14px;align-items:start;margin:14px 0}
.grid>.panel{margin:0}
.panel>table{margin-top:2px}
.panelbox{overflow-x:auto;margin:0 -16px -14px;padding:0 16px 14px}

/* ---------- таблицы ---------- */
.tablebox table{font-size:13px}
.tablebox{overflow:auto;max-height:calc(100vh - 200px);min-height:200px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;overscroll-behavior:contain}
table{border-collapse:collapse;width:100%}
th,td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;white-space:nowrap}
th{color:var(--muted);font-weight:600;position:sticky;top:0;background:var(--panel);font-size:12px;z-index:4;cursor:pointer;user-select:none;
  border-bottom:1px solid var(--line-strong)}
th.nosort{cursor:default}
th:not(.nosort):hover{color:var(--fg)}
.panel > table th,.md table th{position:static}
th .ar{color:var(--accent);font-size:10px}
tbody tr:nth-child(even)>td{background:var(--stripe)}
tbody tr.row{cursor:pointer}
tbody tr.row:hover>td{background:var(--row-hover)}
tbody tr.row.open>td{background:var(--row-open)}
tr.det>td{background:var(--panel-2);white-space:normal}
tbody tr:last-child>td{border-bottom:none}
/* имя класса не «wrap»: оно занято контейнером страницы .wrap. Ширину ограничивает вложенный блок, а не сама ячейка */
td.cell-wrap{white-space:normal}
td.cell-wrap>div{max-width:42ch}
.tag{display:inline-block;background:var(--tag-bg);border-radius:6px;padding:1px 7px;font-size:11.5px;color:var(--muted)}
.tag.k-swap{background:var(--tag-swap)}.tag.k-bridge_out{background:var(--tag-out)}.tag.k-bridge_in{background:var(--tag-in)}
.tag.k-approve,.tag.k-contract,.tag.k-wrap{background:var(--tag-other)}
.fail{color:var(--neg);font-weight:600}
.pager{display:flex;gap:8px;align-items:center;margin:10px 0;flex-wrap:wrap}
.empty{color:var(--dim);padding:14px 2px;font-size:13px}
td.empty{white-space:normal}

/* ---------- детали ---------- */
.det-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px;margin:8px 0 12px}
.kv{font-size:12.5px;min-width:0}
.kv div{margin:2px 0;overflow-wrap:anywhere}
.kv span.k{color:var(--dim);display:inline-block;min-width:112px}
.legs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:10px;margin:10px 0}
.leg{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;min-width:0}
.leg b{font-size:12.5px}
.leg .mono{display:block;margin-top:4px;word-break:break-all}
details{margin:8px 0}
summary{cursor:pointer;color:var(--muted);font-size:12.5px}
pre{background:var(--code-bg);border:1px solid var(--line);border-radius:10px;padding:10px;overflow:auto;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;margin:6px 0;max-height:380px}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:var(--code-bg);border-radius:5px;padding:0 4px;overflow-wrap:anywhere}

/* ---------- markdown ---------- */
.md{font-size:13.5px;line-height:1.6;max-width:80ch}
.md h1{font-size:17px;margin:14px 0 8px}.md h2{font-size:15px;margin:20px 0 8px}.md h3{font-size:13.5px;margin:16px 0 6px}
.md h4{font-size:13px;margin:14px 0 4px;font-weight:600}
.md p{margin:8px 0}
.mdtable{overflow-x:auto;max-width:100%;margin:10px 0}
.md table{width:auto;margin:0;border:1px solid var(--line);border-radius:10px}
.md td,.md th{white-space:normal;cursor:default}
.md blockquote{border-left:3px solid var(--line-strong);margin:10px 0;padding:2px 12px;color:var(--muted)}
.md ul,.md ol{margin:8px 0;padding-left:22px}
.md li{margin:3px 0}
.md hr{border:none;border-top:1px solid var(--line);margin:16px 0}
.md pre{max-width:100%}

/* ---------- токены: список + карточка ---------- */
.split{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:14px;align-items:start;margin-top:4px}
.split .col-left{min-width:0}
.split .col-right{min-width:0;margin:0}
#tok-list{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tok-item{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);cursor:pointer}
.tok-item:last-child{border-bottom:none}
.tok-item:hover{background:var(--row-hover)}
.tok-item.on{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}
.tok-item .right{white-space:nowrap}
.tok-item small{color:var(--dim);font-size:11.5px;display:block}

/* ---------- пошаговый разбор цикла ---------- */
.tl-hint{font-size:12px;margin:4px 0 10px;max-width:100ch;color:var(--dim)}
.tl-card{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;margin:8px 0;padding:0}
.tl-card>summary{cursor:pointer;list-style:none;padding:8px 11px;border-radius:10px}
.tl-card>summary::-webkit-details-marker{display:none}
.tl-card>summary:hover{background:var(--row-hover)}
.tl-card[open]>summary{border-bottom:1px solid var(--line);border-radius:10px 10px 0 0}
.tl-card>summary::before{content:'▸';color:var(--muted);margin-right:6px;display:inline-block}
.tl-card[open]>summary::before{content:'▾'}
.tl-head{display:inline-flex;gap:10px;flex-wrap:wrap;align-items:baseline;font-size:13px}
.tl-head .tl-profit{font-weight:600}
.tl-sum{color:var(--muted);font-size:12.5px;margin:3px 0 0 16px;overflow-wrap:anywhere}
.tl-wrap{overflow-x:auto;padding:0 2px 4px}
table.tl-steps{width:100%;font-size:12px}
table.tl-steps th{position:static;background:var(--panel-2);font-size:11px;cursor:default;padding:5px 7px}
table.tl-steps td{padding:4px 7px;vertical-align:top}
table.tl-steps td small{display:block;font-size:11px}
table.tl-steps tr.tl-trig>td{font-style:italic;background:var(--trig-bg);color:var(--muted)}
.tl-badge{display:inline-block;background:var(--tag-out);color:var(--warn);border-radius:5px;padding:0 6px;font-size:10.5px;font-style:normal;vertical-align:1px}
.tl-badge.sig{background:var(--sig-bg);color:var(--sig-fg);font-weight:700}
table.tl-steps tr.tl-sig>td{background:var(--sig-bg);color:var(--fg);font-style:normal}
h4.tl-h{font-size:13px;margin:16px 0 2px;font-weight:600}
td.tl-chain{white-space:normal;max-width:11ch}
td.tl-note{white-space:normal;min-width:20ch;max-width:34ch;color:var(--muted)}
table.reaction{width:100%;min-width:660px;max-width:960px;margin:8px 0 12px;font-size:12.5px;table-layout:fixed}
table.reaction th{white-space:normal;vertical-align:bottom;position:static;background:transparent;cursor:default;font-size:11.5px}
table.reaction th:first-child,table.reaction td:first-child{width:19%;white-space:normal}
table.reaction td,table.reaction th{padding:5px 9px}
table.reaction tr.tl-total>td{font-weight:600;background:var(--row-open)}
.tl-med{margin:4px 0 6px}
.tl-med span.k{min-width:152px}

/* ---------- диаграммы ---------- */
.chart{width:100%;height:auto;display:block;overflow:visible;touch-action:pan-y}
.chart text{fill:var(--muted);font-size:9.5px;font-family:inherit}
.chart-h text{font-size:10.5px}
.chart .bar{fill:var(--chart-bar)}
.chart .bar.pos{fill:var(--pos)}
.chart .bar.neg{fill:var(--neg)}
.chart .axis{stroke:var(--chart-grid);stroke-width:1}
.chart .bar-hit{fill:var(--chart-hover);opacity:0}
.chart .bar-hit.go{cursor:pointer}
.chart .bar-hit:hover,.chart .bar-hit:focus{opacity:1}
.chart .bar-hit:focus{outline:none;stroke:var(--accent);stroke-width:1.5}

/* подсказка (одна на страницу) */
.tip{position:fixed;left:0;top:0;z-index:60;pointer-events:none;max-width:280px;background:var(--tip-bg);color:var(--fg);
  border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow);padding:9px 11px;font-size:12.5px;line-height:1.4}
.tip[hidden]{display:none}
.tip .tip-t{font-weight:600;margin-bottom:5px}
.tip .tip-t2{margin-top:8px}
.tip .tip-row{display:flex;justify-content:space-between;gap:16px;white-space:nowrap}
.tip .tip-row>span{color:var(--muted)}
.tip .tip-note{color:var(--dim);font-size:11.5px;margin-top:5px}

.loading{color:var(--dim);padding:16px 2px}
.err{color:var(--neg);padding:12px 0}

@media (max-width:900px){
  .app{flex-direction:column}
  .sidebar{position:sticky;top:0;flex:0 0 auto;width:100%;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;
    padding:8px 12px;border-right:none;border-bottom:1px solid var(--line)}
  .brand{flex:1 1 auto;padding:0}
  .brand small{display:none}
  .tabs{order:3;flex:1 0 100%;flex-direction:row;gap:4px;overflow-x:auto;overflow-y:hidden;padding-bottom:2px}
  .tabs button{width:auto;flex:0 0 auto}
  .side-foot{flex:0 0 auto;flex-direction:row;align-items:center;gap:8px;max-width:70%}
  .live-line{font-size:11px;padding:5px 8px;max-width:210px;align-items:center}
  .live-line .live-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dot{margin-top:0}
  .content{padding:0 16px 40px}
  .head{padding:14px 0 2px}
  .tablebox{max-height:calc(100vh - 160px)}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  input[type=search]{min-width:150px}
  .count{margin-left:0}
  .live-line{max-width:150px}
}