:root{
  --brand:#12202E; --amber:#F2C14E; --green:#2F6F4E; --lgreen:#7FB99A;
  --bg:#F7F9FB; --surface:#FFFFFF; --surface-2:#EDF1F5; --surface-3:#E1E7ED; --field:#F4F7FA;
  --line:#CBD4DC; --line-strong:#A6B3BF;
  --ink:#12202E; --ink-2:#566472; --ink-3:#828F9B;
  --accent:#87610F; --accent-fill:#F2C14E; --accent-ink:#12202E; --accent-soft:#FCF2DA; --amber-ink:#B8801A;
  --ok:#2F6F4E; --ok-soft:#E2EFE8;
  --warn:#87610F; --warn-soft:#FAEFD6;
  --bad:#A2342A; --bad-soft:#F8E6E3;
  --shadow:0 1px 2px rgba(18,32,46,.07), 0 8px 24px -14px rgba(18,32,46,.3);
  --r:10px;
  --s1:#C08419; --s2:#0B7D52; --grid:#E1E7ED; --axis:#B6C1CB;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1923; --surface:#16232F; --surface-2:#1E2C39; --surface-3:#273644; --field:#1E2C39;
    --line:#2C3B49; --line-strong:#42525F;
    --ink:#E8EEF3; --ink-2:#9FB0C0; --ink-3:#74848F;
    --accent:#F2C14E; --accent-fill:#E0AE38; --accent-ink:#12202E; --accent-soft:#2B2517; --amber-ink:#F2C14E;
    --ok:#7FB99A; --ok-soft:#152A20;
    --warn:#E5BC63; --warn-soft:#2C2413;
    --bad:#E58E80; --bad-soft:#38201C;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px -14px rgba(0,0,0,.75);
    --s1:#C08419; --s2:#31A578; --grid:#273644; --axis:#3C4B58;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1923; --surface:#16232F; --surface-2:#1E2C39; --surface-3:#273644; --field:#1E2C39;
  --line:#2C3B49; --line-strong:#42525F;
  --ink:#E8EEF3; --ink-2:#9FB0C0; --ink-3:#74848F;
  --accent:#F2C14E; --accent-fill:#E0AE38; --accent-ink:#12202E; --accent-soft:#2B2517; --amber-ink:#F2C14E;
  --ok:#7FB99A; --ok-soft:#152A20;
  --warn:#E5BC63; --warn-soft:#2C2413;
  --bad:#E58E80; --bad-soft:#38201C;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px -14px rgba(0,0,0,.75);
  --s1:#C08419; --s2:#31A578; --grid:#273644; --axis:#3C4B58;
}

*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif; font-size:16.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; text-wrap:balance; font-weight:600; letter-spacing:-.015em}
input,select,button,textarea{font:inherit; color:inherit}
.num,.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.topbar{position:sticky; top:0; z-index:40; background:var(--surface);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:18px;
  flex-wrap:wrap; padding:9px 20px}
.brand{display:flex; align-items:center; gap:11px; margin-right:auto}
.brand .mark{width:40px; height:46px; display:block; flex:none}
.wordmark{font-size:22px; font-weight:700; letter-spacing:-.035em; line-height:1.05}
.wordmark .a{color:var(--amber-ink)}
.wordmark .b{color:var(--green); font-weight:600}
:root[data-theme="dark"] .wordmark .b{color:var(--lgreen)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wordmark .b{color:var(--lgreen)}}
.brand small{display:block; font-size:11.5px; color:var(--ink-3); letter-spacing:.08em;
  text-transform:uppercase; font-family:"IBM Plex Mono",monospace; margin-top:1px}

.tabs{display:flex; gap:2px; background:var(--surface-2); padding:3px; border-radius:8px}
.tabs button{border:0; background:transparent; color:var(--ink-2); cursor:pointer;
  padding:8px 15px; border-radius:6px; font-size:15px; font-weight:500}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.1)}
.tabs button:focus-visible,.icon-btn:focus-visible,.btn:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-fill); outline-offset:2px}
.icon-btn{border:1px solid var(--line); background:var(--surface); border-radius:7px;
  width:34px; height:34px; display:grid; place-items:center; cursor:pointer; color:var(--ink-2)}
.icon-btn:hover{color:var(--ink); border-color:var(--line-strong)}

main{max-width:1420px; margin:0 auto; padding:20px 20px 90px}
.panel[hidden]{display:none}

/* ---------- generic ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.card-h{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--line)}
.card-h h2{font-size:13.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-2);
  font-family:"IBM Plex Mono",monospace; font-weight:500}
.card-b{padding:16px}

label.f{display:flex; flex-direction:column; gap:5px; min-width:0}
label.f > span{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3);
  font-family:"IBM Plex Mono",monospace; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
input[type=text],input[type=number],input[type=date],select,textarea{
  background:var(--field); border:1px solid var(--line); border-radius:7px; padding:9px 11px; width:100%; min-width:0}
textarea{resize:vertical; min-height:62px; line-height:1.45}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:var(--field)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) input,
 :root:not([data-theme="light"]) select,:root:not([data-theme="light"]) textarea{background:var(--field)}}
input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}
select{appearance:none; cursor:pointer; padding-right:22px}
.sel-wrap{position:relative}
.sel-wrap::after{content:""; position:absolute; right:9px; top:50%; width:6px; height:6px;
  border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg); pointer-events:none}

.btn{border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:8px;
  padding:9px 15px; cursor:pointer; font-weight:500; font-size:15px; display:inline-flex; align-items:center; gap:7px}
.btn:hover{border-color:var(--line-strong); background:var(--surface-2)}
.btn.primary{background:var(--accent-fill); border-color:var(--accent-fill); color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.danger{color:var(--bad)}
.btn.danger:hover{background:var(--bad-soft); border-color:var(--bad)}
.btn.sm{padding:6px 11px; font-size:14px; border-radius:7px}

.pill{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:12.5px; font-weight:500; white-space:nowrap}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.pill.nacrt{background:var(--surface-3); color:var(--ink-2)}
.pill.poslano{background:var(--warn-soft); color:var(--warn)}
.pill.prihvaceno{background:var(--ok-soft); color:var(--ok)}
.pill.odbijeno{background:var(--bad-soft); color:var(--bad)}
.tag{display:inline-flex; align-items:center; padding:2px 8px; border-radius:5px; font-size:11px;
  font-weight:600; letter-spacing:.03em; text-transform:uppercase; font-family:"IBM Plex Mono",monospace}
.tag.vrata{background:var(--accent-soft); color:var(--accent)}
.tag.pvc{background:var(--ok-soft); color:var(--ok)}

.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:3px; gap:2px}
.seg button{border:0; background:transparent; color:var(--ink-2); cursor:pointer;
  padding:7px 14px; border-radius:6px; font-size:14.5px; font-weight:500}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.1)}

.note{display:flex; gap:10px; align-items:flex-start; background:var(--surface-2); border:1px solid var(--line);
  border-left:3px solid var(--accent-fill); border-radius:8px; padding:12px 14px; font-size:14.5px; color:var(--ink-2)}
.note b{color:var(--ink); font-weight:600}

/* ---------- quote layout ---------- */
.work{display:grid; grid-template-columns:minmax(0,1fr) 352px; gap:18px; align-items:start}
@media (max-width:1120px){.work{grid-template-columns:minmax(0,1fr)}}
.stack{display:flex; flex-direction:column; gap:18px; min-width:0}
.head-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
@media (max-width:860px){.head-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.switches{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; padding-top:14px; margin-top:14px; border-top:1px dashed var(--line)}
.sw{display:flex; align-items:center; gap:9px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:8px; padding:7px 12px; cursor:pointer; user-select:none}
.sw input{accent-color:var(--accent-fill); width:16px; height:16px; cursor:pointer}
.sw span{font-size:14.5px; font-weight:500}
.mini{width:128px}

/* items */
.items{display:flex; flex-direction:column; gap:12px}
.item{border:1px solid var(--line); border-radius:9px; background:var(--surface-2); overflow:hidden}
.item-top{display:grid; gap:10px; align-items:end; padding:11px 12px}
.item-top.vrata{grid-template-columns:34px minmax(150px,1.7fr) 88px 128px 138px 34px}
.item-top.pvc{grid-template-columns:34px minmax(120px,1.5fr) 86px 86px 68px 108px 124px 34px}
.item-no{height:32px; width:32px; border-radius:6px; background:var(--surface-3); color:var(--ink-2);
  display:grid; place-items:center; font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:600}
.item-calc{height:32px; display:flex; align-items:center; justify-content:flex-end;
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:15.5px; padding-right:2px}
.item-calc.total{font-weight:600; font-size:17px}
.del{height:32px; width:32px; border-radius:6px; border:1px solid transparent; background:transparent;
  color:var(--ink-3); cursor:pointer; display:grid; place-items:center}
.del:hover{color:var(--bad); background:var(--bad-soft)}
.item-opts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;
  padding:12px; border-top:1px solid var(--line); background:var(--surface)}
.item-opts > .wide{grid-column:span 2}
.extras{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:7px}
.chip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--bg);
  border-radius:999px; padding:6px 12px 6px 10px; cursor:pointer; font-size:13.5px; user-select:none}
.chip input{accent-color:var(--accent-fill); width:14px; height:14px; margin:0; cursor:pointer}
.chip:has(input:checked){background:var(--accent-soft); border-color:var(--accent-fill); color:var(--accent)}
.chip b{font-family:"IBM Plex Mono",monospace; font-weight:500; color:var(--ink-3); font-size:12.5px}
.chip:has(input:checked) b{color:var(--accent)}
.warnrow{grid-column:1/-1; font-size:13.5px; color:var(--bad); background:var(--bad-soft);
  border:1px solid var(--bad); border-radius:7px; padding:7px 10px}
@media (max-width:1000px){
  .item-top.vrata,.item-top.pvc{grid-template-columns:32px minmax(0,1fr) 32px}
  .item-top > .sp{grid-column:1/-1}
  .item-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .item-opts > .wide{grid-column:span 2}
}

/* dodatne stavke */
.dod{display:grid; grid-template-columns:minmax(0,1fr) 70px 108px 108px 32px; gap:10px; align-items:end}
@media (max-width:760px){.dod{grid-template-columns:minmax(0,1fr) 60px 92px 32px} .dod .hide-sm{display:none}}

/* summary */
.sum{position:sticky; top:76px}
.sum-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0; font-size:15.5px}
.sum-row + .sum-row{border-top:1px solid var(--line)}
.sum-row .k{color:var(--ink-2)}
.sum-row .v{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
.sum-row.strong .k,.sum-row.strong .v{font-weight:600; color:var(--ink)}
.sum-row.disc .v{color:var(--ok)}
.sum-row.muted .k,.sum-row.muted .v{color:var(--ink-3); font-size:14px}
.grand{margin-top:12px; padding:13px 14px; border-radius:9px; background:var(--accent-soft); border:1px solid var(--accent-fill)}
.grand .lbl{font-size:11.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--accent); font-family:"IBM Plex Mono",monospace}
.grand .amt{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:30px;
  font-weight:600; letter-spacing:-.02em; margin-top:3px; color:var(--ink)}
.pay{margin-top:14px; padding-top:12px; border-top:1px dashed var(--line)}
.pay h3{font-size:11.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3);
  font-family:"IBM Plex Mono",monospace; margin-bottom:7px}
.pay-row{display:flex; justify-content:space-between; gap:10px; font-size:14px; padding:4px 0; color:var(--ink-2)}
.pay-row .v{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; color:var(--ink)}
.sum-actions{display:flex; flex-direction:column; gap:8px; margin-top:14px}
.sum-actions .btn{justify-content:center}

/* ---------- arhiva ---------- */
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px}
@media (max-width:860px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; box-shadow:var(--shadow)}
.kpi .k{font-size:11.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.kpi .v{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:30px;
  font-weight:600; letter-spacing:-.025em; margin-top:5px}
.kpi .s{font-size:13.5px; color:var(--ink-2); margin-top:3px}
.statbar{display:flex; height:8px; border-radius:999px; overflow:hidden; background:var(--surface-3); margin-top:9px}
.statbar i{display:block; height:100%}
.legend{display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; font-size:13px; color:var(--ink-2)}
.legend em{font-style:normal; display:inline-flex; align-items:center; gap:5px}
.legend i{width:8px; height:8px; border-radius:2px; display:block}
.tbl-wrap{overflow-x:auto}
table.arh{width:100%; border-collapse:collapse; font-size:15px; min-width:940px}
table.arh th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3);
  font-family:"IBM Plex Mono",monospace; font-weight:500; padding:0 12px 9px; white-space:nowrap}
table.arh td{padding:10px 12px; border-top:1px solid var(--line); vertical-align:middle}
table.arh tr:hover td{background:var(--surface-2)}
table.arh td.r,table.arh th.r{text-align:right}
.row-acts{display:flex; gap:6px; justify-content:flex-end}
.empty{padding:44px 20px; text-align:center; color:var(--ink-3); font-size:15.5px}

/* ---------- cjenovnik ---------- */
.price-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start}
@media (max-width:940px){.price-grid{grid-template-columns:minmax(0,1fr)}}
.plist{display:flex; flex-direction:column; gap:8px}
.prow{display:grid; grid-template-columns:minmax(0,1fr) 100px 32px; gap:8px; align-items:center}
.prow.pct{grid-template-columns:minmax(0,1fr) 92px 30px}
.prow.marz{grid-template-columns:minmax(0,1fr) 100px 100px 32px}
.prow .u{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3); text-align:center}
.prow .calc{font-family:"IBM Plex Mono",monospace; font-size:14px; color:var(--ink-3); text-align:right; padding-right:4px}
table.el{width:100%; border-collapse:collapse; font-size:14.5px; min-width:700px}
table.el th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3);
  font-family:"IBM Plex Mono",monospace; font-weight:500; padding:0 8px 8px; white-space:nowrap}
table.el td{padding:5px 8px; border-top:1px solid var(--line)}
table.el td.r,table.el th.r{text-align:right}
table.el input,table.el select{padding:5px 7px}
.el-scroll{max-height:560px; overflow:auto}

.modelpick small{display:block; margin-top:5px; font-size:12.5px; color:var(--ink-3); line-height:1.35}
.mdl-tbl{width:100%; border-collapse:collapse; font-size:14.5px; min-width:760px}
.mdl-tbl th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3);
  font-family:"IBM Plex Mono",monospace; font-weight:500; padding:0 8px 8px; white-space:nowrap}
.mdl-tbl td{padding:6px 8px; border-top:1px solid var(--line); vertical-align:middle}
.mdl-tbl td.r{text-align:right}
.mdl-tbl input,.mdl-tbl select{padding:6px 8px}

.src{display:inline-block; padding:2px 7px; border-radius:5px; font-size:11px; font-weight:600;
  letter-spacing:.03em; font-family:"IBM Plex Mono",monospace; white-space:nowrap}
.src.c{background:var(--ok-soft); color:var(--ok)}
.src.i{background:var(--warn-soft); color:var(--warn)}

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); background:var(--ink);
  color:var(--bg); padding:11px 20px; border-radius:999px; font-size:15px; font-weight:500;
  opacity:0; pointer-events:none; transition:all .22s ease; z-index:90; box-shadow:0 10px 30px -10px rgba(0,0,0,.55)}
.toast.on{opacity:1; transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* ---------- print ---------- */
#print{display:none}
@media print{
  @page{size:A4; margin:9mm 11mm}
  .topbar,main,.toast{display:none !important}
  html,body{background:#fff !important}
  #print{display:block !important; background:#fff; color:#16222E; font-size:12px; line-height:1.38}
  .p-band{display:flex; justify-content:space-between; align-items:flex-end;
    border-bottom:2.2px solid #12202E; padding-bottom:3mm; margin-bottom:4.5mm}
  .p-logo{display:flex; align-items:center; gap:4.5mm}
  .p-logo svg{width:17mm; height:19.5mm; display:block; flex:none}
  .p-logo .w{font-size:29px; font-weight:700; letter-spacing:-.035em; line-height:1; color:#12202E}
  .p-logo .w .a{color:#C08419}
  .p-logo .ba{font-size:11.5px; font-weight:600; letter-spacing:.2em; color:#2F6F4E; margin-top:1.4mm}
  .p-logo .tag{font-size:9.5px; letter-spacing:.04em; color:#54646F; margin-top:1mm}
  .p-meta{text-align:right; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:#3C4B58; line-height:1.5}
  .p-meta b{color:#12202E; font-size:13.5px}
  .p-title{font-size:22px; font-weight:700; letter-spacing:-.025em; margin:0 0 1.5mm; color:#12202E}
  .p-firm{font-size:10.5px; color:#54646F; margin-bottom:3.5mm}
  .p-client{font-size:12px; margin-bottom:3.5mm; color:#16222E}
  #print table{width:100%; border-collapse:collapse; font-size:11px}
  #print th{background:#E7ECF1 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;
    color:#12202E; text-align:left; padding:2mm 2mm; border:.5px solid #8B99A5;
    font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:600}
  #print td{padding:1.9mm 2mm; border:.5px solid #B7C1CB; vertical-align:top; color:#16222E}
  #print td.r,#print th.r{text-align:right; font-family:"IBM Plex Mono",monospace}
  .p-sub{font-size:10px; color:#54646F; margin-top:.6mm}
  .p-tot{margin-left:auto; width:76mm; margin-top:3.5mm}
  .p-tot div{display:flex; justify-content:space-between; padding:1mm 0; font-size:11.5px}
  .p-tot div.g{border-top:1.8px solid #12202E; margin-top:1mm; padding-top:1.8mm; font-weight:700; font-size:16px}
  .p-tot div.d span:last-child{color:#2F6F4E}
  .p-tot div.pdvnote{display:block; text-align:right; font-size:9.5px; color:#54646F; margin-top:1.5mm; padding:0}
  .p-tot span:last-child{font-family:"IBM Plex Mono",monospace}
  .p-terms{margin-top:5mm; font-size:10.5px; page-break-inside:avoid; color:#16222E}
  .p-terms h4{margin:0 0 1.8mm; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:#12202E}
  .p-terms div{margin-bottom:1.2mm}
  .p-sign{display:flex; justify-content:space-between; margin-top:15mm; page-break-inside:avoid}
  .p-sign div{width:64mm; text-align:center}
  .p-sign i{display:block; border-bottom:.8px solid #12202E; height:14mm}
  .p-sign small{font-size:10px; color:#54646F}
  .p-foot{margin-top:5mm; font-size:10px; color:#54646F; text-align:center;
    border-top:.5px solid #B7C1CB; padding-top:2mm}
}

/* ================= server verzija: nalog, filteri, modal ================= */
.user{display:flex; align-items:center; gap:8px}
.user .who{text-align:right; line-height:1.15; margin-right:2px}
.user .who b{display:block; font-size:14px; font-weight:600}
.user .who span{display:block; font-size:11px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace;
  text-transform:uppercase; letter-spacing:.07em}
.user a.btn{text-decoration:none}
body.busy{cursor:progress}

.filteri{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.filteri label.f{width:170px}
.filteri .seg{margin-left:auto}

.modal{position:fixed; inset:0; background:rgba(18,32,46,.55); display:grid; place-items:center; z-index:80; padding:20px}
.modal[hidden]{display:none}
.modal-box{width:100%; max-width:420px}

/* ================= dijagrami ================= */
.viz{position:relative}
.viz svg{display:block; width:100%; height:auto; overflow:visible}
.viz .gl{stroke:var(--grid); stroke-width:1}
.viz .ax{stroke:var(--axis); stroke-width:1}
.viz .tick{fill:var(--ink-3); font-size:11.5px; font-family:"IBM Plex Mono",monospace}
.viz .vlab{fill:var(--ink-2); font-size:11.5px; font-family:"IBM Plex Mono",monospace; font-weight:500}
.viz .band:hover .hit{fill:var(--surface-2)}
.viz .hit{fill:transparent}
.chart-leg{font-size:13px}
.chart-leg em{gap:6px}
.chart-leg i{width:10px; height:10px; border-radius:3px}
.viz-tip{
  position:absolute; pointer-events:none; opacity:0; transform:translate(-50%,-100%);
  background:var(--ink); color:var(--bg); padding:8px 11px; border-radius:8px; font-size:13px;
  white-space:nowrap; box-shadow:0 8px 22px -10px rgba(0,0,0,.6); z-index:5; transition:opacity .12s
}
.viz-tip.on{opacity:1}
.viz-tip b{display:block; font-size:12px; opacity:.75; font-weight:500; margin-bottom:3px;
  font-family:"IBM Plex Mono",monospace; letter-spacing:.04em}
.viz-tip .r{display:flex; align-items:center; gap:7px; margin-top:2px}
.viz-tip .r i{width:9px; height:9px; border-radius:2px; flex:none}
.viz-tip .r span{margin-left:auto; padding-left:14px; font-family:"IBM Plex Mono",monospace; font-weight:600}
.viz-prazno{padding:34px 12px; text-align:center; color:var(--ink-3); font-size:15px}