:root {
  --bg:#0b0d12; --panel:#12151c; --panel2:#181c25; --line:#232838; --text:#e8eaf0; --muted:#8a91a3; --dim:#5d647a;
  --green:#22c55e; --red:#ef4444; --blue:#4f8cff; --yellow:#f5b72b; --violet:#8b7bff;
  --radius:12px; --side:232px; --side-min:64px; --font: "Inter", "SF Pro Text", -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; font:14px/1.45 var(--font); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
.hidden { display:none !important; }
a { color:var(--blue); text-decoration:none; } a:hover { text-decoration:underline; }
svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* layout */
#app { display:flex; min-height:100vh; }
#sidebar { width:var(--side); background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; transition:width .15s; }
#sidebar.min { width:var(--side-min); }
.side-top { display:flex; align-items:center; gap:8px; padding:18px 16px 12px; height:56px; }
.logo { font-weight:700; font-size:18px; letter-spacing:.3px; }
#sidebar.min .logo, #sidebar.min #mode, #sidebar.min .who, #sidebar.min nav a span { display:none; }
nav { display:flex; flex-direction:column; gap:2px; padding:8px; }
nav a { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; color:var(--muted); font-weight:500; white-space:nowrap; }
nav a:hover { background:var(--panel2); color:var(--text); text-decoration:none; }
nav a.active { background:#1b2233; color:var(--text); }
nav a.active svg { color:var(--blue); }
#sidebar.min nav a { justify-content:center; padding:10px 0; }
.side-bottom { margin-top:auto; padding:12px; border-top:1px solid var(--line); display:flex; align-items:center; gap:6px; }
.who { flex:1; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sidebar.min .side-bottom { flex-direction:column; }
#sidebar.min #btn-collapse svg { transform:rotate(180deg); }
main { flex:1; min-width:0; padding:24px 28px 40px; max-width:1600px; }
.page-head { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.page-head h1 { margin:0; font-size:20px; font-weight:600; }
.page-head .sub { color:var(--muted); font-size:12px; }
.page-head .spacer { flex:1; }

/* components */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:16px; }
.card h3 { margin:0 0 12px; font-size:13px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.grid { display:grid; gap:12px; }
.g4 { grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); } .g2 { grid-template-columns:repeat(auto-fit, minmax(380px, 1fr)); }
.kpi { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; }
.kpi .k { color:var(--muted); font-size:12px; display:flex; align-items:center; gap:6px; }
.kpi .v { font-size:24px; font-weight:600; margin-top:6px; letter-spacing:-.3px; font-variant-numeric:tabular-nums; }
.kpi .s { color:var(--muted); font-size:12px; margin-top:2px; }
.seg { display:inline-flex; gap:4px; }
.badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; background:#232838; color:var(--muted); white-space:nowrap; }
.badge.ok, .badge.on { background:#12351f; color:var(--green); } .badge.off, .badge.err { background:#3b1717; color:var(--red); }
.badge.warn { background:#3a2f0e; color:var(--yellow); } .badge.info { background:#16243d; color:var(--blue); } .badge.dry { background:#2a2350; color:var(--violet); }
.pos { color:var(--green); } .neg { color:var(--red); } .muted { color:var(--muted); } .dim { color:var(--dim); }
.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size:12.5px; }
.dt-h .num { font-family:var(--font); font-size:11px; }
.ctr { text-align:center; }
/* data tables as CSS grid: the header and every row share one grid-template-columns (set on
   the .dt container as --cols), so columns line up by construction; the container scrolls
   horizontally only when the sum of minimum widths exceeds the card */
.card.tbl { padding:0; overflow-x:auto; }
.card.tbl h3 { padding:14px 18px 0; margin:0; }
.dt { min-width:var(--min, 0); }
.dt-h, .dt-r { display:grid; grid-template-columns:var(--cols); align-items:center; column-gap:12px; padding:0 18px; }
.dt-h { min-height:38px; border-bottom:1px solid var(--line); color:var(--muted); font-weight:500; font-size:11px; text-transform:uppercase; letter-spacing:.3px; }
.dt-h > div, .dt-r > div { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dt-r { min-height:50px; border-bottom:1px solid var(--line); font-size:13px; }
.dt-r:last-child { border-bottom:0; }
.dt-r.dt-x { cursor:pointer; } .dt-r.dt-x:hover { background:var(--panel2); }
.dt-r > div.wrap, .dt-h > div.wrap { white-space:normal; }
.dt-d { display:none; }
.kvgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px 24px; }
.kv { display:flex; flex-direction:column; gap:4px; font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
.kv > b { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; color:var(--muted); }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.modal-head h2 { margin:0; }
.dt-sum { display:grid; grid-template-columns:var(--cols); column-gap:12px; padding:10px 18px; font-weight:600; border-top:1px solid var(--line); }
.dt-empty { padding:18px; color:var(--dim); font-size:13px; }
.card:not(.tbl) .dt-h, .card:not(.tbl) .dt-r, .card:not(.tbl) .dt-d, .card:not(.tbl) .dt-empty { padding-left:0; padding-right:0; }
.ell { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meta { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); font-size:11px; margin-top:2px; } .meta.neg { color:var(--red); }
.sub2 { display:block; color:var(--muted); font-size:11px; margin-top:1px; }
.grid > * { min-width:0; }
.span2 { grid-column:1 / -1; }
/* plain small tables (settings key/proxy editors) */
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; color:var(--muted); font-weight:500; font-size:11px; text-transform:uppercase; letter-spacing:.3px; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.btn { background:#1e2432; color:var(--text); border:1px solid var(--line); border-radius:9px; padding:7px 13px; cursor:pointer; font:inherit; font-size:13px; display:inline-flex; align-items:center; gap:6px; }
.btn:hover { background:#28303f; } .btn.primary { background:var(--blue); border-color:var(--blue); color:#fff; } .btn.primary:hover { background:#3f7cf0; }
.btn.danger { background:#3b1717; border-color:#5a2222; color:#fca5a5; } .btn.sm { padding:4px 9px; font-size:12px; border-radius:7px; } .btn.icon { padding:6px; } .btn.wide { width:100%; justify-content:center; }
.btn.ghost { background:transparent; }
input, select, textarea { background:#0e1117; color:var(--text); border:1px solid var(--line); border-radius:9px; padding:8px 10px; font:inherit; font-size:13px; width:100%; }
input:focus, select:focus { outline:none; border-color:var(--blue); }
input[type=checkbox] { width:16px; height:16px; accent-color:var(--blue); }
label { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); margin-bottom:5px; }
.field { margin-bottom:12px; } .row { display:flex; gap:8px; align-items:center; } .row > * { flex:1; } .row > .btn { flex:0 0 auto; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px 14px; }
.check { display:flex; align-items:center; gap:8px; padding-top:22px; }
.check label { margin:0; }
.actions { display:flex; gap:6px; justify-content:flex-end; white-space:nowrap; align-items:center; }
.dt-r > div.actions-cell, .dt-r > div.links-cell { overflow:visible; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size:12px; }
.thumb { width:36px; height:36px; border-radius:8px; background:#1e2432; object-fit:cover; display:inline-block; vertical-align:middle; }
.thumb.lg { width:64px; height:64px; border-radius:12px; }
.thumb.sm { width:28px; height:28px; border-radius:6px; flex:0 0 28px; }
.unit { color:var(--muted); font-size:11px; font-family:var(--font); }
.bar { display:inline-block; width:56px; height:6px; background:#232838; border-radius:3px; vertical-align:middle; margin-right:6px; overflow:hidden; }
.bar i { display:block; height:100%; background:linear-gradient(90deg, var(--blue), var(--green)); }
.item { display:flex; align-items:center; gap:10px; }
.item .id { font-weight:600; }
.links { display:flex; gap:8px; }
.links a { color:var(--muted); } .links a:hover { color:var(--text); }
.copy { cursor:pointer; color:var(--muted); } .copy:hover { color:var(--text); }

/* tooltip */
/* one body-level box positioned by script: a CSS ::after inside a scrolling table was
   clipped to a thin empty bar */
#tipbox { position:fixed; display:none; z-index:1000; background:#20263a; color:var(--text); border:1px solid #2f3650; border-radius:8px; padding:8px 10px; font-size:12px; font-weight:400; line-height:1.4; width:max-content; max-width:300px; white-space:normal; box-shadow:0 8px 24px rgba(0,0,0,.4); pointer-events:none; }
.q { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:#242a3a; color:var(--muted); font-size:10px; font-weight:700; cursor:help; }

/* tabs */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px; flex-wrap:wrap; }
.tabs button { background:transparent; border:0; color:var(--muted); padding:8px 12px; cursor:pointer; font:inherit; border-bottom:2px solid transparent; }
.tabs button.active { color:var(--text); border-bottom-color:var(--blue); }

/* charts */
.chart { position:relative; height:200px; } .chart canvas { width:100%; height:100%; display:block; }
.chart .hover { position:absolute; pointer-events:none; background:#20263a; border:1px solid #2f3650; border-radius:6px; padding:4px 8px; font-size:11px; display:none; white-space:nowrap; }
.legend { display:flex; gap:14px; font-size:11px; color:var(--muted); margin-bottom:6px; } .legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; }

/* collection card */
.colcard { display:grid; grid-template-columns:72px 1fr; gap:14px; background:#0e1117; border:1px solid var(--line); border-radius:12px; padding:14px; margin:10px 0 16px; }
.colcard .title { font-weight:600; font-size:15px; }
#f-card.pending .colcard { opacity:.55; transition:opacity .15s; }
#f-card.pending .colcard .calc::after { content:'пересчёт…'; color:var(--dim); font-size:12px; }
.colcard .facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:6px 14px; margin-top:8px; }
.colcard .facts div { font-size:12px; color:var(--muted); } .colcard .facts b { display:block; color:var(--text); font-weight:600; font-size:13px; }
.colcard .calc { grid-column:1 / -1; border-top:1px solid var(--line); padding-top:10px; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; font-size:13px; }

/* modal, login, toast, logs */
#modal { position:fixed; inset:0; background:rgba(4,6,10,.7); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; z-index:10; backdrop-filter:blur(2px); }
.modal-card { width:min(960px, 100%); background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px 22px; }
.modal-card h2 { margin:0 0 14px; font-size:17px; }
#login { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg); }
.login-card { width:380px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:28px; text-align:center; }
.login-card .logo { font-size:24px; margin-bottom:18px; } .or { color:var(--dim); margin:12px 0; font-size:12px; }
.login-card .btn.wide + .btn.wide { margin-top:10px; }
.login-card .err { margin-top:14px; }
.err { color:var(--red); min-height:18px; font-size:12px; margin-top:8px; }
#toast { position:fixed; bottom:20px; right:20px; z-index:20; display:flex; flex-direction:column; gap:8px; }
#toast div { background:#1b2130; border:1px solid var(--line); border-left:3px solid var(--blue); padding:10px 14px; border-radius:8px; max-width:380px; font-size:13px; }
#toast div.err { border-left-color:var(--red); }
pre.log { background:#0a0c10; border:1px solid var(--line); border-radius:10px; padding:12px; max-height:72vh; overflow:auto; font-size:12px; white-space:pre-wrap; margin:0; font-family: ui-monospace, Menlo, monospace; }
.log .error { color:var(--red); } .log .warn { color:var(--yellow); } .log .time { color:var(--dim); } .log .kind { color:var(--blue); }
details summary { cursor:pointer; color:var(--muted); margin:14px 0 10px; font-size:13px; }
/* Trades: one collapsible group per collection */
details.tgroup { border:1px solid var(--line); border-radius:12px; background:#0e1117; margin:0 0 10px; }
details.tgroup > summary { list-style:none; margin:0; color:inherit; font-size:14px; display:grid; grid-template-columns:minmax(220px, 2fr) 90px 90px 130px 100px 110px; column-gap:12px; align-items:center; padding:12px 18px 12px 34px; position:relative; }
details.tgroup > summary::-webkit-details-marker { display:none; }
details.tgroup > summary::before { content:'\25B8'; color:var(--dim); position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:12px; }
details.tgroup[open] > summary::before { content:'\25BE'; }
details.tgroup[open] > summary { border-bottom:1px solid var(--line); }
details.tgroup .tg-name { display:flex; flex-direction:column; min-width:0; }
details.tgroup .tg-sub { display:block; color:var(--dim); font-size:11px; font-weight:400; }
details.tgroup .tg-body { border:0; border-radius:0 0 12px 12px; margin:0; }
@media (max-width: 900px) { details.tgroup > summary { grid-template-columns:minmax(160px, 2fr) 70px 70px 110px; } details.tgroup > summary > div:nth-child(n+5) { display:none; } }
.empty { color:var(--dim); padding:16px 4px; font-size:13px; }

/* multichain: the switcher in the sidebar (RH | ETH | все), the short chain badges and the
   per-chain rows on Dashboard and in Settings */
.chain-seg { display:flex; gap:4px; padding:0 12px 10px; }
.chain-seg .btn { flex:1; justify-content:center; padding:4px 6px; font-size:11px; font-weight:600; }
#sidebar.min .chain-seg { flex-direction:column; padding:0 8px 8px; }
.badge.chain { font-size:10px; padding:1px 6px; letter-spacing:.3px; vertical-align:middle; }
.badge.c-robinhood { background:#2b1d3f; color:#c9a8ff; } .badge.c-ethereum { background:#16243d; color:#8ab4ff; }
.hrow { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:6px; }
.hrow:last-child { margin-bottom:0; }
/* the health card is grouped by what the row is about: chains, Blur, OpenSea keys */
.hsec { margin-top:10px; }
.hsec:first-child { margin-top:2px; }
.hsec > .hcap { color:var(--muted); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-bottom:4px; }
.hsec details { margin-top:4px; }
.hsec details > summary { color:var(--muted); font-size:11px; cursor:pointer; }
.hsec details > div { color:var(--muted); font-size:11px; margin-top:3px; line-height:1.5; }
/* one column per chain side by side (two for RH + ETH), never stacked */
.bal-cols { display:grid; gap:10px; margin-top:8px; }
.bal-col { display:flex; flex-direction:column; gap:4px; min-width:0; }
.bal-col .bal-line { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bal-col .bal-line b { color:var(--text); }
.bal-col .btn { justify-content:center; margin-top:2px; padding:4px 6px; font-size:11px; white-space:nowrap; }
.chain-block { margin-top:12px; } .chain-block h4 { margin:0 0 8px; font-size:12px; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:6px; }
.chain-list { display:flex; flex-direction:column; gap:6px; margin-top:4px; } .chain-list label { margin:0; color:var(--text); } .chain-list label.dim { margin-left:22px; font-size:12px; color:var(--muted); }
@media (max-width:860px) { #sidebar { width:var(--side-min); } #sidebar .logo, #sidebar #mode, #sidebar .who, #sidebar nav a span { display:none; } #sidebar .chain-seg { flex-direction:column; padding:0 8px 8px; } main { padding:16px; } }