/* Liqzo: ink and paper. Black and white carry everything; seal red marks resistance, losses and warnings.
   Sharp corners, hairline rules instead of boxes. Dark first; light follows the viewer's choice. */
:root{
  --f-display:"Dela Gothic One","Onest",system-ui,sans-serif;
  --f-body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --panel:372px;
}
:root,:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000;--surface-2:#111;--line:#3d3d3d;--line-soft:#222;
  --text:#fff;--text-2:#cfcfcf;--muted:#919191;--faint:#5e5e5e;
  --seal:#ff4b33;--seal-soft:rgba(255,75,51,.13);--ink-soft:rgba(255,255,255,.08);
  --up:#fff;--down:#ff4b33;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#fff;--surface-2:#f2f2f0;--line:#bdbdbd;--line-soft:#e4e4e2;
  --text:#000;--text-2:#2e2e2e;--muted:#6a6a6a;--faint:#a6a6a6;
  --seal:#c8241a;--seal-soft:rgba(200,36,26,.10);--ink-soft:rgba(0,0,0,.06);
  --up:#000;--down:#c8241a;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 var(--f-body)}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.num,.px,.kv dd,.zl .p,.coins b,.coins i{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* header */
.top{display:flex;align-items:center;gap:18px;padding:0 16px;height:48px;border-bottom:1px solid var(--line-soft)}
.brand{font-family:var(--f-display);font-size:18px;letter-spacing:.06em;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:8px}
.seal{display:inline-grid;place-items:center;width:20px;height:20px;background:var(--seal);color:#fff;font-size:12px;font-family:var(--f-body)}
.tabs{display:flex;gap:2px}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:13px 10px 11px;color:var(--muted)}
.tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--text)}
.top-r{margin-left:auto;display:flex;align-items:center;gap:12px}
.who{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
a.primary{display:inline-grid;place-items:center;text-decoration:none;text-align:center}
.conn{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.conn i{width:7px;height:7px;background:var(--faint);display:inline-block}
.conn.live i{background:var(--up)} .conn.offline i{background:var(--seal)}
.seg{display:inline-flex;border:1px solid var(--line)}
.seg button{background:none;border:0;padding:4px 9px;font-size:12px;color:var(--muted);min-height:28px}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.seg.sm button{padding:2px 8px;min-height:24px}
.icon{background:none;border:1px solid var(--line);width:30px;height:30px;color:var(--text-2);display:grid;place-items:center;padding:0}
@media (max-width:600px){
  .top{gap:10px;padding:0 10px}
  .brand{font-size:0;gap:0}
  .tabs button{padding:13px 6px 11px}
  .top-r{gap:8px}
  .conn span{display:none}
  .seg button{padding:4px 7px}
  .coins button{min-width:96px;padding:7px 10px}
}
html,body{overflow-x:hidden}

/* coin strip */
.coins{display:flex;overflow-x:auto;border-bottom:1px solid var(--line-soft);scrollbar-width:none}
.coins::-webkit-scrollbar{display:none}
.coins button{flex:0 0 auto;background:none;border:0;border-right:1px solid var(--line-soft);padding:7px 14px;text-align:left;display:grid;gap:1px;min-width:108px}
.coins button span{font-weight:600;font-size:12.5px}
.coins b{font-weight:400;font-size:12.5px}
.coins i{font-style:normal;font-size:11px;color:var(--muted)}
.coins i.dn{color:var(--seal)}
.coins button[aria-selected="true"]{background:var(--surface-2);box-shadow:inset 0 -2px 0 var(--text)}

/* layout */
.view{display:grid;grid-template-columns:minmax(0,1fr) var(--panel);min-height:calc(100vh - 48px - 50px)}
@media (max-width:980px){.view{grid-template-columns:minmax(0,1fr)}}
/* desktop: the page is one screen; the chart fills it and the panel scrolls on its own */
@media (min-width:981px){
  body{height:100vh;display:flex;flex-direction:column;overflow:hidden}
  .view{flex:1;min-height:0}
  .panel{overflow-y:auto;min-height:0}
  #viewJournal{overflow-y:auto}
}
.chartcol{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line-soft)}
.toolbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line-soft)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{background:none;border:1px solid var(--line-soft);color:var(--faint);font-size:12px;padding:3px 10px;min-height:28px}
.chips button[aria-pressed="true"]{border-color:var(--line);color:var(--text)}
.chartbox{position:relative;flex:1;min-height:420px}
#chart{position:absolute;inset:0}
@media (max-width:980px){.chartbox{flex:none;height:58vh;min-height:340px}}
.msg{position:absolute;left:16px;top:12px;font-size:12px;color:var(--muted);pointer-events:none}
.msg.err{color:var(--seal)}
.fine{font-size:11.5px;color:var(--muted);margin:8px 16px;line-height:1.4}

/* panel */
.panel{display:flex;flex-direction:column;min-width:0}
.blk{padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.blk h2{margin:0 0 10px;font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:8px}
.blk h2 .px{letter-spacing:0;text-transform:none;color:var(--text);font-size:13px}
.situ{margin:0 0 10px;font-size:14px;line-height:1.4}
.zl{list-style:none;margin:0;padding:0;display:grid;gap:0}
.zl li{display:grid;grid-template-columns:14px 1fr auto;gap:2px 8px;padding:7px 0;border-top:1px solid var(--line-soft);cursor:pointer}
.zl li:hover{background:var(--ink-soft)}
.zl li[aria-current="true"]{box-shadow:inset 2px 0 0 var(--text)}
.zl .k{grid-row:span 2;width:10px;height:10px;margin-top:4px;border:1px solid var(--text-2);background:var(--ink-soft)}
.zl .k.R{border-color:var(--seal);background:var(--seal-soft)}
.zl .p{font-size:13px}
.zl .d{font-family:var(--f-mono);font-size:12px;color:var(--text-2);text-align:right}
.zl .why{grid-column:2 / 4;font-size:11.5px;color:var(--muted)}
.dots{letter-spacing:1px;color:var(--text)}
.dots .o{color:var(--faint)}
.zl li.in .p::after{content:" ●";color:var(--seal)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font-size:13px}
.kv dt{color:var(--muted)} .kv dd{margin:0;text-align:right;white-space:nowrap}
.kv dd.dn{color:var(--seal)}
.verdict{margin:10px 0 0;font-size:13px;padding:8px 10px;border-left:2px solid var(--text)}
.nomargin{margin:8px 0 0}
.verdict.bad{border-left-color:var(--seal);color:var(--text)}
.planmode{display:flex;gap:6px;margin:0 0 10px}
.planmode button{background:none;border:1px solid var(--line-soft);font-size:12px;padding:3px 8px;color:var(--muted)}
.planmode button[aria-pressed="true"]{border-color:var(--line);color:var(--text)}
.inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.inputs label{display:grid;gap:3px;font-size:11px;color:var(--muted)}
.inputs input,.rec input{width:100%;background:var(--surface-2);border:1px solid var(--line-soft);padding:6px 8px;font-family:var(--f-mono);font-size:13px;border-radius:0}
.inputs input:focus,.rec input:focus{outline:1px solid var(--text-2);outline-offset:-1px}
.rec{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}
.rec input{font-family:var(--f-body)}
.primary{background:var(--text);color:var(--bg);border:0;padding:7px 12px;font-weight:600;font-size:13px}
.primary:disabled{opacity:.35;cursor:default}
.bar{height:4px;background:var(--seal-soft);position:relative;margin:4px 0 8px}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--text)}
.walls{font-size:12.5px;display:grid;gap:3px}
.walls div{display:flex;justify-content:space-between;gap:8px;font-family:var(--f-mono)}
.walls .tag{font-family:var(--f-body);font-size:11px;color:var(--text);border:1px solid var(--line);padding:0 4px}
.sub{font-size:11.5px;color:var(--muted);margin:10px 0 4px}

/* journal */
#viewJournal{grid-template-columns:minmax(0,1fr)}
.jcol{padding:16px;max-width:1080px}
table.j{width:100%;border-collapse:collapse;font-size:13px}
table.j th{font-weight:400;color:var(--muted);font-size:11.5px;text-align:right;padding:0 8px 6px 0}
table.j th:first-child,table.j td:first-child{text-align:left}
table.j td{padding:7px 8px 7px 0;border-top:1px solid var(--line-soft);text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
table.j td.l{text-align:left;font-family:var(--f-body)}
.pos{color:var(--text)} .neg{color:var(--seal)}
h3{font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
.linkbtn{background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;color:var(--muted);font-size:12px}