:root {
  --bg: #f3f2ee; --panel: #ffffff; --ink: #16171b; --muted: #6a6e78; --line: #e4e3dd; --line2: #cfcdc4;
  --chartbg: #fbfbf9; --rulerbg: #f1f0ea; --grpbg: #ecebe4; --slope: #14a3c7; --sel: #111111;
  --hdl: rgba(0, 0, 0, .16); --hdl-soft: rgba(0, 0, 0, .07); --accent: #16171b; --accent-ink: #fff;
  --range: rgba(79, 140, 255, .16); --danger: #c0392b; --up: #1a8f4d; --dn: #c0392b;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.04);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0f12; --panel: #17181d; --ink: #ececf1; --muted: #8c909b; --line: #272932; --line2: #3a3d49;
    --chartbg: #121317; --rulerbg: #1b1c22; --grpbg: #21232b; --slope: #3cc3e6; --sel: #ffffff;
    --hdl: rgba(255, 255, 255, .26); --hdl-soft: rgba(255, 255, 255, .1); --accent: #ececf1; --accent-ink: #111;
    --range: rgba(79, 140, 255, .22); --danger: #ff7a6b; --up: #4cd488; --dn: #ff7a6b;
    --shadow: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.mono, .t-val, input.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
small { color: var(--muted); font-weight: 400; }
code { background: var(--hdl-soft); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
h3, h4, h2 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 16px 0 8px; font-weight: 600; }
h4:first-child { margin-top: 2px; }
.muted, .dim { color: var(--muted); } .small { font-size: 12.5px; } .grow, .spacer { flex: 1; }

/* header */
.top { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.mark { background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800; padding: 4px 6px; border-radius: 6px; }
.wkname { flex: 1 1 200px; min-width: 120px; max-width: 480px; font: inherit; font-weight: 600; font-size: 15px; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 6px 10px; color: var(--ink); }
.wkname:hover { border-color: var(--line); } .wkname:focus { border-color: var(--line2); outline: none; background: var(--chartbg); }
.ftpbox { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line2); border-radius: 8px; padding: 0 10px; background: var(--chartbg); }
.ftpbox span { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); } .ftpbox i { font-style: normal; color: var(--muted); font-size: 12px; }
.ftpbox input { width: 52px; border: 0; background: transparent; padding: 6px 0; text-align: right; font: inherit; font-weight: 650; color: var(--ink); } .ftpbox input:focus { outline: none; }
.ftpbox:focus-within { border-color: var(--ink); }
.actions { display: flex; gap: 8px; margin-left: auto; align-items: center; }

/* buttons + inputs */
.btn { font: inherit; font-size: 13px; font-weight: 550; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line2); background: var(--panel); color: var(--ink); cursor: pointer; white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: var(--ink); } .btn:disabled { opacity: .35; cursor: default; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.icon { padding: 6px 10px; min-width: 34px; } .btn.sm { padding: 4px 9px; font-size: 12.5px; } .btn.sm.icon { min-width: 0; padding: 4px 8px; }
.btn.danger { color: var(--danger); } .btn.danger:hover:not(:disabled) { border-color: var(--danger); }
input, select, textarea { font: inherit; color: var(--ink); }
.fld { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.fld > span { font-size: 12px; font-weight: 600; color: var(--muted); }
.fld em, .tgt em { font-style: normal; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.fld input, .fld select, .fld textarea, .emsg input, .emsg select, .emsg textarea, .withunit input, .stepper input {
  width: 100%; padding: 7px 9px; border: 1px solid var(--line2); border-radius: 8px; background: var(--chartbg);
}
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--ink) 55%, transparent); outline-offset: 1px; }
input.bad { border-color: var(--danger) !important; background: color-mix(in srgb, var(--danger) 10%, var(--chartbg)); }
.two, .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .row2 { grid-template-columns: 1fr 112px; align-items: end; }

/* layout */
.app { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; padding: 14px 16px 40px; align-items: start; }
.main, .side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 14px 16px; min-width: 0; }
.chartcard { padding: 0; overflow: hidden; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.seltools { display: inline-flex; gap: 6px; align-items: center; } .seltools[hidden] { display: none; }
.sep { width: 1px; height: 22px; background: var(--line2); margin: 0 2px; }
.hintline { padding: 8px 14px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }
@media (max-width: 1080px) { .app { grid-template-columns: minmax(0, 1fr); } .brand .word { display: none; } }

/* stat tiles */
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.tile { padding: 10px 14px 9px; border-right: 1px solid var(--line); min-width: 0; } .tile:last-child { border-right: 0; }
.t-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.t-val { font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; white-space: nowrap; }
.t-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlt { margin-left: 6px; font-weight: 650; } .dlt.up { color: var(--up); } .dlt.dn { color: var(--dn); }
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(3, 1fr); } .tile { border-bottom: 1px solid var(--line); } }

/* timeline */
.tl { display: flex; background: var(--chartbg); }
.axis { flex: none; display: block; }
.scroll { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; }
#tlSvg { display: block; user-select: none; -webkit-user-select: none; touch-action: pan-x; }
.atxt { fill: var(--muted); font-size: 10px; } .atxt.strong { fill: var(--ink); font-weight: 650; } .atxt.sub { font-size: 9px; opacity: .75; }
.acap { fill: var(--muted); font-size: 9px; letter-spacing: .1em; font-weight: 650; }
.tag rect { fill: var(--ink); } .tag text { fill: var(--panel); font-size: 9.5px; font-weight: 650; } .tag.npl rect { fill: #d1307f; } .tag.npl text { fill: #fff; }
.bg { fill: transparent; }
.ruler { fill: var(--rulerbg); cursor: col-resize; } .tick { stroke: var(--line2); } .rtxt { fill: var(--muted); font-size: 10px; pointer-events: none; }
.vgrid { stroke: var(--line); opacity: .55; pointer-events: none; }
.hgrid { stroke: var(--line); pointer-events: none; } .hgrid.ftp { stroke: var(--muted); stroke-dasharray: 5 4; opacity: .75; } .hgrid.zero { stroke: var(--line2); }
.blk { stroke: var(--chartbg); stroke-width: .6; cursor: pointer; }
.blk.ghost { opacity: .66; } .blk.sel { stroke: var(--sel); stroke-width: 2; opacity: 1; paint-order: stroke; }
.sbar { fill: var(--slope); cursor: pointer; } .sbar.ghost { opacity: .55; } .sbar.sel { stroke: var(--sel); stroke-width: 1.5; }
.ergbar { fill: var(--muted); opacity: .4; cursor: pointer; } .ergbar.sel { fill: var(--sel); opacity: .9; }
.lbl { fill: #fff; font-size: 10px; font-weight: 650; pointer-events: none; paint-order: stroke; stroke: rgba(0,0,0,.42); stroke-width: 2.6px; stroke-linejoin: round; }
.lbl.sm { font-weight: 500; font-size: 9.5px; }
.lblo { fill: var(--ink); font-size: 9.5px; font-weight: 600; pointer-events: none; }
.grp rect { fill: var(--grpbg); stroke: var(--line2); cursor: pointer; } .grp text { fill: var(--ink); font-size: 10.5px; font-weight: 650; pointer-events: none; }
.grp.ghost rect { opacity: .55; } .grp.sel rect { stroke: var(--sel); stroke-width: 1.6; opacity: 1; }
.gsep { stroke: var(--line2); pointer-events: none; }
.nm rect { fill: transparent; stroke: var(--line2); stroke-dasharray: 3 2; cursor: pointer; } .nm text { fill: var(--muted); font-size: 10.5px; pointer-events: none; } .nm.sel rect { stroke: var(--sel); stroke-dasharray: none; stroke-width: 1.6; }
.msg path { fill: var(--ink); } .msg line { stroke: var(--ink); opacity: .55; } .msg.ghost { opacity: .35; }
.mhit { fill: transparent; } .msg.live .mhit { cursor: ew-resize; } .msg.ghost .mhit { cursor: pointer; }
.h { fill: transparent; } .h:hover { fill: var(--hdl); } .h.hs { fill: var(--hdl-soft); } .h.hs:hover { fill: var(--hdl); }
.hx { cursor: ew-resize; } .hy { cursor: ns-resize; }
.hc { cursor: ns-resize; fill: var(--sel); stroke: var(--chartbg); stroke-width: 1.5; opacity: 0; } .hc:hover, .hc.hs { opacity: .95; }
.guide { fill: none; stroke-width: 1.3; stroke-dasharray: 6 4; pointer-events: none; } .guide.avgl { stroke: var(--ink); opacity: .8; } .guide.npl { stroke: #d1307f; }
.range { fill: var(--range); stroke: rgba(79,140,255,.7); stroke-width: 1; pointer-events: none; }

/* step outline */
.tablewrap { max-height: 380px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid th { position: sticky; top: 0; background: var(--rulerbg); text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 7px 10px; font-weight: 600; z-index: 1; }
.grid td { padding: 6px 10px; border-top: 1px solid var(--line); white-space: nowrap; }
.grid td.idx { color: var(--muted); width: 30px; text-align: right; } .grid td.empty { padding: 22px; text-align: center; color: var(--muted); white-space: normal; }
.grid tr.row { cursor: pointer; user-select: none; } .grid tr.row:hover { background: var(--hdl-soft); } .grid tr.row.sel { background: color-mix(in srgb, var(--slope) 16%, transparent); }
.grid tr.grow { background: color-mix(in srgb, var(--grpbg) 70%, transparent); } .grid tr.grow.sel { background: color-mix(in srgb, var(--slope) 16%, var(--grpbg)); }
.grid .lab { display: flex; align-items: center; } .hint { color: var(--muted); font-size: 11.5px; margin-left: 4px; }
.zdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; flex: none; }

/* side stats */
.kvgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.kv { display: flex; flex-direction: column; } .kv span { font-size: 11px; color: var(--muted); } .kv b { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; } .kv b small { font-size: 11px; }
#selStats h4 { margin-top: 0; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); } #selStats h4 small { margin-left: 6px; font-size: 11px; }
.zbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 1px; } .zbar i { display: block; }
.zlist { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12.5px; } .zlist li { display: grid; grid-template-columns: 10px 1fr auto 40px; gap: 8px; align-items: center; padding: 2px 0; }
.zlist li i { width: 10px; height: 10px; border-radius: 3px; } .zlist li b { font-variant-numeric: tabular-nums; font-weight: 600; } .zlist li em { font-style: normal; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* edit panel (docked, non-blocking: the chart stays visible and updates live) */
.editor { position: fixed; top: 62px; right: 16px; bottom: 16px; width: 404px; z-index: 40; background: var(--panel); border: 1px solid var(--line2); border-radius: 16px; box-shadow: 0 18px 60px rgba(0,0,0,.28); display: flex; flex-direction: column; overflow: hidden; }
.editor[hidden] { display: none; }
.ehead { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 18px 10px; border-bottom: 1px solid var(--line); } .ehead h3 { font-size: 16px; }
.ebody { flex: 1; overflow: auto; padding: 14px 18px 6px; }
.efoot .btn { padding: 6px 11px; }
.efoot { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--rulerbg); }
body.editing .top, body.editing .main, body.editing .side { pointer-events: none; }
@media (min-width: 1081px) { body.editing .app { padding-right: 436px; grid-template-columns: minmax(0, 1fr); } body.editing .side { display: none; } }
@media (max-width: 1080px) { body.editing .app { padding-bottom: 60vh; } }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; width: fit-content; }
.seg button { background: var(--chartbg); color: var(--muted); border: 0; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line2); } .seg button.on { background: var(--accent); color: var(--accent-ink); }
.inline { display: flex; flex-wrap: wrap; gap: 8px; }
.tgt { margin: -2px 0 14px; } .tgt .two { margin-bottom: 4px; } .tgt small { display: block; margin-top: 2px; }
.withunit { position: relative; } .withunit input { padding-right: 28px; } .withunit i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--muted); font-size: 12px; pointer-events: none; }
.stepper { display: flex; gap: 6px; } .stepper input { text-align: center; flex: 1; } .stepper button { width: 38px; border: 1px solid var(--line2); background: var(--panel); border-radius: 8px; color: var(--ink); font-size: 16px; cursor: pointer; }
.emsg { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 8px; margin-bottom: 8px; background: var(--chartbg); }
.emsg .row2 { margin-bottom: 6px; } .emsg textarea { resize: vertical; min-height: 44px; }
.emsg .x { position: absolute; right: 6px; top: 6px; background: none; border: 0; color: var(--muted); cursor: pointer; display: none; } .emsg:hover .x { display: block; }
.link { background: none; border: 0; color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px 0; margin-bottom: 8px; }
.step { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 2px; margin-bottom: 12px; background: color-mix(in srgb, var(--grpbg) 35%, transparent); }
.step.picked { border-color: var(--ink); }
.step > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12.5px; }
.step > header button { background: none; border: 1px solid transparent; border-radius: 6px; padding: 2px 8px; color: var(--muted); cursor: pointer; font-size: 13px; } .step > header button:hover:not(:disabled) { border-color: var(--line2); color: var(--ink); } .step > header button:disabled { opacity: .3; cursor: default; }
@media (max-width: 1080px) { .editor { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 72vh; } }

/* dialogs, toast */
dialog { border: 1px solid var(--line2); border-radius: 16px; padding: 0; background: var(--panel); color: var(--ink); width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 40px); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(10, 10, 14, .5); backdrop-filter: blur(2px); }
.dlgbody { padding: 18px 22px 22px; } .dlgbody header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .dlgbody h2 { font-size: 18px; }
.tips { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 12.5px; } .tips li { margin-bottom: 7px; } .tips b { color: var(--ink); }
#toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); background: var(--ink); color: var(--panel); padding: 9px 16px; border-radius: 10px; font-size: 13px; opacity: 0; pointer-events: none; transition: .22s; z-index: 70; max-width: min(560px, 90vw); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#dragTip { position: fixed; display: none; background: var(--ink); color: var(--panel); font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 6px; pointer-events: none; z-index: 80; font-variant-numeric: tabular-nums; white-space: nowrap; }