/* ═══════════════════════════════════════════════════════════════════════
   Notium · стилі застосунку.

   Шар 1 — система: токени, каркас, картки, поля, таблиці, кнопки, бейджі,
           чипи, меню. Точна копія затвердженого макета; міри й кольори тут
           не змінюються.
   Шар 2 — класи стану, які ставить код (.active, .sel, .show), і старі імена
           токенів як посилання на токени шару 1: правила компонентів не
           мають власних кольорів.
   Шар 3 — компоненти застосунку поза макетом (вхід, автопідказка, вибір
           дослідження, звіт, кабінет) на тих самих токенах і мірах.
   ═══════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════ ШАР 1 ════════════════════════════ */
:root{
  color-scheme:light;
  --ink:#0A0A0A; --ink80:#333333; --ink60:#666666; --ink40:#999999; --ink20:#D6D6D2; --ink10:#EEEEEA;
  --paper:#FFFFFF; --cream:#FBFBF7; --blue:#1C46F5; --blue-bg:#EEF2FF; --lime:#D2FF52;
  --ok:#1E8A4C; --ok-bg:#E4F4EA; --warn:#A86A00; --warn-bg:#FCF1D8; --bad:#D42B26; --bad-bg:#FCE6E5; --na:#A3A39E; --cir:#2F62C9;
  --head:'Unbounded','Montserrat',system-ui,sans-serif; --text:'Manrope','Montserrat',system-ui,sans-serif; --mono:'JetBrains Mono',Consolas,monospace;
  --h2font:var(--head); --numfont:var(--head);
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--cream);color:var(--ink);font-family:var(--text);font-size:14px;line-height:1.5;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}

/* ---------- каркас ---------- */
.shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{background:var(--paper);border-right:1px solid var(--ink10);display:flex;flex-direction:column;padding:18px 12px;position:sticky;top:0;height:100vh}
.logo{font-family:var(--head);font-weight:800;font-size:22px;letter-spacing:-.5px;padding:4px 10px 18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.logo small{font-family:var(--mono);font-size:10px;font-weight:500;color:var(--ink60);letter-spacing:.06em;white-space:nowrap;flex-basis:100%;order:3}
.nav{display:flex;flex-direction:column;gap:2px}
.nav .grp{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink40);padding:14px 10px 6px}
.nav button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;font-weight:600;color:var(--ink80)}
.nav button:hover{background:var(--ink10)}
.nav button[aria-current="page"]{background:var(--blue-bg);color:var(--blue)}
.nav button:focus-visible{outline:2px solid var(--blue)}
.nav svg{width:18px;height:18px;flex:0 0 18px}
.nav .cnt{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink60)}
.side .me{margin-top:auto;border-top:1px solid var(--ink10);padding:14px 10px 0;display:flex;align-items:center;gap:10px}
.av{width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--lime);display:flex;align-items:center;justify-content:center;font-family:var(--head);font-size:12px;font-weight:700;flex:0 0 32px}
.me div{line-height:1.25;font-size:12.5px;min-width:0}
.me small{color:var(--ink60)}
.me .who{flex:1 1 auto}.me .who br{display:none}.me .who span,.me .who small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me button{margin-left:auto}
.later-tag{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--warn);background:var(--warn-bg);padding:1px 5px;border-radius:3px;margin-left:6px;white-space:nowrap}
.new-tag{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);background:var(--blue-bg);padding:1px 5px;border-radius:3px;margin-left:6px;white-space:nowrap}
.later{display:none!important}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{height:56px;display:flex;align-items:center;gap:12px;padding:0 28px;border-bottom:1px solid var(--ink10);background:var(--paper)}
.crumbs{display:flex;gap:8px;align-items:center;color:var(--ink60);font-size:13px;min-width:0}
.crumbs button{all:unset;cursor:pointer}
.crumbs button:hover{color:var(--blue)}
.crumbs b{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .lang{margin-left:auto;display:flex;border:1px solid var(--ink20);border-radius:999px;overflow:hidden;font-size:12px;font-weight:700}
.topbar .lang span{padding:4px 10px}
.topbar .lang span.on{background:var(--blue);color:#fff}
.content{padding:26px 28px 60px;max-width:1320px;width:100%}

/* ---------- загальні ---------- */
h1,h2,h3{text-wrap:balance}
.h-page{font-family:var(--head);font-weight:700;font-size:26px;letter-spacing:-.3px;margin:0}
.h-sec{font-family:var(--h2font);font-weight:700;font-size:15px;margin:0 0 12px}
.card{background:var(--paper);border:1px solid var(--ink10);border-radius:10px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink20);background:var(--paper);padding:8px 14px;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--ink)}
.btn svg{width:16px;height:16px}
.btn--pri{background:var(--ink);border-color:var(--ink);color:var(--lime)}
.btn--pri:hover{background:#222}
.btn--blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn--ghost{border-color:transparent;background:transparent;color:var(--blue);padding-inline:6px}
.btn--sm{padding:5px 10px;font-size:12px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.b-work{background:var(--warn-bg);color:var(--warn)}
.b-ready{background:var(--ok-bg);color:var(--ok)}
.b-docs{background:var(--ink10);color:var(--ink80)}
.b-bad{background:var(--bad-bg);color:var(--bad)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 9px}
.d-ok{background:var(--ok)}.d-warn{background:var(--warn)}.d-bad{background:var(--bad)}.d-na{background:var(--na)}.d-cir{background:var(--cir)}.d-lime{background:var(--lime);box-shadow:0 0 0 1.5px var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1.5px solid var(--ink20);border-radius:999px;font-size:12.5px;font-weight:600;background:var(--paper)}
.chip[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.chip:focus-visible{outline:2px solid var(--blue)}
.chip .c{font-family:var(--mono);font-size:11px;opacity:.75}
.foot-note{font-size:12px;color:var(--ink60);margin-top:12px}
.menu{position:relative}
.menu-pop{position:absolute;right:0;top:calc(100% + 6px);background:var(--paper);border:1px solid var(--ink20);border-radius:8px;min-width:200px;padding:6px;z-index:5;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.menu-pop button{all:unset;display:block;width:100%;box-sizing:border-box;padding:8px 10px;border-radius:6px;cursor:pointer;font-weight:600;font-size:13px}
.menu-pop button:hover{background:var(--ink10)}
.menu-pop small{display:block;color:var(--ink60);font-weight:500;font-size:11.5px}

/* ---------- таблиці: виділена шапка ---------- */
table{border-collapse:collapse;width:100%}
.tbl-wrap{overflow-x:auto;border-radius:10px}
.tb th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:11px 14px;white-space:nowrap;background:var(--ink);color:#fff;position:sticky;top:0;z-index:1}
.tb th.r,.tb td.r{text-align:right}
.tb td{padding:11px 14px;border-bottom:1px solid var(--ink10);vertical-align:middle}
.tb tbody tr:nth-child(4n+1):not(.det) td,.tb.zebra tbody tr:nth-child(even) td{background:transparent}
.tb tr.r{cursor:pointer}
.tb tr.r:hover td{background:#F7F7F2}
.tb tr.muted td{color:var(--na)}
.inci{font-weight:700;white-space:nowrap}
.arr{display:inline-block;width:16px;color:var(--blue);font-size:11px;transition:transform .15s}
tr.open .arr{transform:rotate(90deg)}
.stc{display:flex;align-items:center;gap:8px;white-space:nowrap;font-weight:600}
.act{font-size:12px;font-weight:700;color:var(--blue);border:1.5px solid var(--blue);border-radius:6px;padding:3px 9px;background:var(--paper);cursor:pointer;white-space:nowrap}
.act--done{color:var(--ok);border-color:var(--ok)}
tr.det td{background:#F5F7FF;padding:16px 18px 18px 44px;cursor:default;vertical-align:top}
.mos-bad{color:var(--bad);font-weight:800}
.mos-ok{font-weight:700}

/* ---------- головна ---------- */
.head-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:18px}
.head-row .sp{flex:1}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.tile{padding:16px 18px}
.tile b{display:block;font-family:var(--numfont);font-size:26px;font-weight:700;line-height:1}
.tile span{display:flex;align-items:center;gap:7px;color:var(--ink60);font-size:12.5px;margin-top:8px}
.changed{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin-bottom:18px;border-left:3px solid var(--blue)}
.changed p{margin:0}
.changed small{color:var(--ink60)}
.search{display:flex;align-items:center;gap:8px;border:1.5px solid var(--ink20);background:var(--paper);border-radius:8px;padding:7px 12px;min-width:240px;color:var(--ink40)}
.search input{border:0;outline:0;background:transparent;width:100%;color:var(--ink)}
.search svg{width:16px;height:16px;flex:0 0 16px}
.ptbl{min-width:780px}
.ptbl td{padding:13px 14px}
.ptbl .pn{font-weight:700}
.ptbl .pn small{display:block;font-weight:500;color:var(--ink60);font-size:12px}

/* ---------- продукт ---------- */
.phead{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-bottom:6px}
.phead .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pmeta{color:var(--ink60);font-size:13px;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:4px 16px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--ink20);margin-bottom:22px;overflow-x:auto}
.tab{all:unset;cursor:pointer;padding:11px 14px;font-weight:700;color:var(--ink60);white-space:nowrap;display:flex;align-items:center;gap:7px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--blue)}
.tab:focus-visible{outline:2px solid var(--blue)}
.tab .st{width:7px;height:7px;border-radius:50%}
.tab .n{font-family:var(--mono);font-size:11px;color:var(--ink40);font-weight:500}

/* підсумок */
.sum-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start}
.stack{display:grid;gap:16px}
.tally{display:grid;grid-template-columns:repeat(4,1fr)}
.tally button{all:unset;cursor:pointer;padding:18px 18px 16px;border-right:1px solid var(--ink10)}
.tally button:last-child{border-right:0}
.tally button:hover{background:#FAFAF6}
.tally button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.tally b{display:block;font-family:var(--numfont);font-size:30px;font-weight:700;line-height:1}
.tally span{display:flex;align-items:center;gap:7px;margin-top:9px;color:var(--ink60);font-size:12.5px}
.tally em{display:block;font-style:normal;color:var(--blue);font-size:12px;font-weight:700;margin-top:6px}
.low{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;padding:18px;border-top:1px solid var(--ink10);align-items:center}
.low .big{font-family:var(--numfont);font-size:40px;font-weight:700;color:var(--bad);line-height:1}
.trace{display:flex;align-items:center;font-size:12.5px;min-width:0;flex-wrap:wrap;row-gap:4px}
.trace .v{font-family:var(--mono);font-weight:700;white-space:nowrap}
.trace .ln{flex:1 1 40px;min-width:30px;height:2px;background:var(--blue);margin:0 0 0 8px}
.trace .pt{width:10px;height:10px;border-radius:50%;background:var(--lime);border:1.5px solid var(--ink);margin-right:8px;flex:0 0 10px}
.trace .src{font-family:var(--mono);color:var(--ink80)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px 10px}
.card-h .h-sec{margin:0}
.lst{margin:0;padding:0}
.lst li{list-style:none;display:flex;gap:12px;align-items:flex-start;padding:12px 18px;border-top:1px solid var(--ink10)}
.lst .t{flex:1}
.lst .t small{display:block;color:var(--ink60)}
.pif li{justify-content:space-between;padding:9px 18px;font-size:13px}
.pif li span:last-child{display:flex;align-items:center;gap:6px;color:var(--ink60);white-space:nowrap}
.norms{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 16px}
.norms span{border:1px solid var(--ink20);border-radius:6px;padding:4px 9px;font-size:12px;font-weight:600;background:var(--cream)}

/* продукт: форма */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;padding:20px}
.f label{display:block;font-size:12px;font-weight:700;color:var(--ink60);margin-bottom:5px}
.in{border:1.5px solid var(--ink20);border-radius:8px;padding:9px 12px;background:var(--paper);display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:40px}
.in small{color:var(--ink60);font-family:var(--mono);font-size:11px;white-space:nowrap}
.in input{border:0;outline:0;background:transparent;width:100%}

/* склад */
.bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}
.editor{margin-bottom:16px}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 18px 16px}
.way{border:1.5px dashed var(--ink20);border-radius:8px;padding:14px;font-size:13px}
.way b{display:block;margin-bottom:4px}
.way p{margin:0;color:var(--ink60);font-size:12.5px}
.ed-row{display:grid;grid-template-columns:1fr 120px 150px;gap:10px;padding:0 18px 12px;align-items:start}
.ed-row .in{position:relative}
.drop{border:1px solid var(--ink20);border-radius:8px;background:var(--paper);margin-top:4px;box-shadow:0 8px 24px rgba(0,0,0,.06);overflow:hidden}
.drop .g{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink60);padding:8px 12px 4px}
.drop button{all:unset;display:flex;justify-content:space-between;gap:10px;width:100%;box-sizing:border-box;padding:8px 12px;cursor:pointer;font-size:13px}
.drop button:hover{background:var(--blue-bg)}
.drop button small{color:var(--ink60)}
.mix{margin:0 18px 14px;border:1.5px solid var(--blue);border-radius:8px;overflow:hidden}
.mix-h{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 12px;background:var(--blue-bg)}
.mix-h b{font-size:13.5px}
.mix-h a{color:var(--blue);font-size:12px;font-weight:700;text-decoration:none}
.mix-h .sp{flex:1}
.mix table td{padding:8px 12px;border-top:1px solid var(--ink10);font-size:13px}
.mix .sum{font-weight:800;color:var(--ok)}
.range{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 18px 16px;padding:10px 12px;border-radius:8px;background:var(--warn-bg);font-size:13px}
.stbl{min-width:1080px;font-size:13.5px}
.stbl td{white-space:nowrap}
.stbl .fn{max-width:230px;overflow:hidden;text-overflow:ellipsis;color:var(--ink80);font-size:12.5px}
.stbl .cas{font-family:var(--mono);font-size:12px}
.rule{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--blue)}
.kv{display:grid;grid-template-columns:110px 1fr;gap:4px 12px;font-size:13px;margin:0}
.kv dt{color:var(--ink60)}
.kv dd{margin:0}
.fileref{font-family:var(--mono);font-size:11.5px;color:var(--ink80);background:var(--paper);border:1px solid var(--ink20);border-radius:4px;padding:1px 6px;white-space:nowrap}
.decl{padding:16px 18px;margin-top:16px;display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.decl p{flex:1 1 400px;margin:0;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--ink80)}
.decl .acts{display:flex;gap:8px;flex-wrap:wrap}
.aroma{margin-top:16px}
.aroma .grid{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;padding:0 18px 14px;align-items:end}
.up{border:1.5px dashed var(--ink20);border-radius:8px;padding:10px 12px;font-size:12.5px;display:flex;justify-content:space-between;gap:10px;align-items:center}

/* оцінка */
.scn{margin-bottom:16px}
.scn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 18px 12px}
.params{display:flex;flex-wrap:wrap;gap:6px 18px;padding:12px 18px;border-top:1px solid var(--ink10);font-size:13px}
.params span b{font-family:var(--mono)}
.scn details{border-top:1px solid var(--ink10)}
.scn summary{cursor:pointer;padding:12px 18px;font-weight:700;color:var(--blue);list-style:none}
.scn summary::-webkit-details-marker{display:none}
.scn summary::before{content:"▸ ";}
.scn details[open] summary::before{content:"▾ ";}
.scn .inner{padding:0 18px 16px}
.cat{min-width:640px;font-size:13px}
.cat td{padding:8px 12px}
.cat tr.cur td{background:var(--blue-bg);font-weight:700}
.cs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cs-live{margin-top:10px;font-family:var(--mono);font-size:12.5px;background:var(--cream);border-radius:6px;padding:8px 10px}
.formula{font-family:var(--mono);font-size:12.5px;color:var(--ink60);margin:0}
.formula b{color:var(--ink)}
.atbl{min-width:900px;font-size:13.5px}
.det-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:22px}
.det p{margin:0 0 8px;max-width:78ch}
.det .warnline{color:var(--bad);font-weight:700}
.det .links{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.det .links button{all:unset;cursor:pointer;font-weight:700;color:var(--blue)}
.det .trace{margin:4px 0 12px;background:var(--paper);border:1px solid var(--ink10);border-radius:8px;padding:10px 12px}
.whatif{background:var(--paper);border:1px solid var(--ink10);border-radius:8px;padding:14px}
.whatif label{display:flex;justify-content:space-between;font-weight:700;font-size:12.5px;margin-bottom:8px}
.whatif input[type=range]{width:100%;accent-color:var(--blue)}
.whatif .res{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.whatif .res div{background:var(--cream);border-radius:6px;padding:8px 10px}
.whatif .res small{display:block;color:var(--ink60);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.whatif .res b{font-family:var(--numfont);font-size:20px}
.whatif .note{font-size:11.5px;color:var(--ink60);margin-top:8px}
.cands{margin-top:12px;background:var(--paper);border:1px solid var(--ink10);border-radius:8px;overflow-x:auto}
.cands table{min-width:640px;font-size:12.5px}
.cands td{padding:8px 12px;white-space:nowrap}
.cands .rec td{background:var(--ok-bg)}
.ways4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px}
.ways4 button{all:unset;cursor:pointer;border:1.5px solid var(--ink20);border-radius:8px;padding:10px 12px;background:var(--paper);font-size:12.5px}
.ways4 button:hover{border-color:var(--blue)}
.ways4 b{display:block;font-size:13px;margin-bottom:3px}
.ways4 span{color:var(--ink60)}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:12.5px;color:var(--ink60)}
.legend span{display:flex;align-items:center;gap:6px}
.subsum{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:14px 18px;margin-top:14px}
.trace-tech{margin-top:10px;padding:12px 14px;font-family:var(--mono);font-size:12px;line-height:1.7;background:var(--paper);border:1px solid var(--ink10);border-radius:8px;white-space:pre-wrap}

/* документи, звіт */
.dl li{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center}
.out{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 18px 18px}
.out .card{padding:14px}
.out p{margin:4px 0 10px;color:var(--ink60);font-size:12.5px}
.ltbl{min-width:780px}

/* кабінет */
.subtabs{display:flex;gap:6px;margin:0 0 16px;flex-wrap:wrap}

@media (max-width:1100px){.sum-grid,.det-grid,.lab-grid{grid-template-columns:1fr}.out{grid-template-columns:1fr}.ways4{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px 12px;gap:6px;border-right:0;border-bottom:1px solid var(--ink10)}
  .logo{padding:0 8px 0 4px}.logo small{display:none}.nav{flex-direction:row;flex-wrap:wrap}.nav .grp,.side .me,.nav .cnt{display:none}
  .topbar,.content{padding-inline:16px}
  .tiles{grid-template-columns:1fr 1fr}.tally{grid-template-columns:1fr 1fr}.tally button:nth-child(2){border-right:0}.tally button:nth-child(-n+2){border-bottom:1px solid var(--ink10)}
  .form-grid,.ways,.scn-grid,.cs,.aroma .grid,.ed-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* ════════════════════════════ ШАР 2 ════════════════════════════ */
:root{
  /* старі імена → токени шару 1 */
  --white:var(--paper); --wash:var(--cream); --wash-2:var(--cream); --zebra:var(--paper); --field-bg:var(--paper);
  --line:var(--ink10); --line-2:var(--ink10); --chip-bg:var(--ink10);
  --grey:var(--ink60); --grey-2:var(--ink40);
  --green:var(--ok); --green-bg:var(--ok-bg); --green-line:var(--ok);
  --amber:var(--warn); --amber-bg:var(--warn-bg); --amber-line:var(--warn);
  --red:var(--bad); --red-bg:var(--bad-bg); --red-line:var(--bad);
  --blue-050:var(--blue-bg); --blue-line:var(--blue); --blue-600:var(--blue);
  --slate:var(--ink80); --slate-bg:var(--ink10); --slate-line:var(--ink20);
  --lime-line:var(--lime); --ink-2:var(--ink80);
  --nav-fg:var(--ink40); --nav-fg-dim:var(--ink60);
  --r-sm:6px; --r:10px; --r-lg:10px; --r-pill:999px;
}
[hidden]{display:none!important}
h1,h2,h3,h4,h5,h6,p{margin:0}
#login-state,#app-state{display:none}
#login-state.show,#app-state.show{display:block}
.view{display:none}
.view.active{display:block}
.panel{display:none}
.panel.active{display:block}
.tab.active{color:var(--ink);border-bottom-color:var(--blue)}
.ic{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.nav svg{fill:none;stroke:currentColor;stroke-width:2}
.logo{cursor:pointer}
.burger{display:none!important}
.content>.view{max-width:none}

/* перемикач мови в шапці */
#zvit-lang-toggle.lang button{all:unset;cursor:pointer;padding:4px 10px}
#zvit-lang-toggle.lang button.on{background:var(--blue);color:#fff}
#zvit-lang-toggle.lang button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* кнопки: імена, які будують шаблони коду */
a.btn{text-decoration:none;color:var(--ink)}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-dark{background:var(--ink);border-color:var(--ink);color:var(--lime)}
.btn-dark:hover{background:#222}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-ghost{border-color:transparent;background:transparent;color:var(--blue);padding-inline:6px}
.btn-lime{background:var(--paper)}
a.btn-primary{color:#fff}
.btn:disabled,.act:disabled{opacity:.5;cursor:not-allowed}
.btn:disabled:hover{border-color:var(--ink20)}
.btn-primary:disabled:hover{border-color:var(--blue)}
.act:hover{background:var(--blue-bg)}

/* поля поза .in: той самий вигляд, що й .in */
:where(input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input:not([type]),select,textarea):not(:where(.search *,.in *)){
  width:100%;border:1.5px solid var(--ink20);border-radius:8px;padding:9px 12px;background:var(--paper);min-height:40px;color:var(--ink)}
:where(textarea){min-height:72px;resize:vertical}
:where(input,select,textarea):focus{outline:0;border-color:var(--blue)}
input[type=checkbox],input[type=radio]{accent-color:var(--blue);width:auto;min-height:0}
.in input,.in select,.in textarea{border:0;outline:0;background:transparent;width:100%;padding:0;min-height:0;border-radius:0}
.in select{appearance:none;-webkit-appearance:none;cursor:pointer;text-overflow:ellipsis}
.in select:disabled{cursor:not-allowed;color:var(--ink);opacity:1}
.in:focus-within{border-color:var(--blue)}
.field{margin-bottom:14px}
.field:last-child{margin-bottom:0}
.field>label{display:block;font-size:12px;font-weight:700;color:var(--ink60);margin-bottom:5px}
.hint{font-size:12px;color:var(--ink60);font-weight:400}

/* таблиці, що їх будує код: вигляд .tb */
.tbl-scroll{overflow-x:auto;border-radius:10px;background:var(--paper);border:1px solid var(--ink10)}
table.stack{display:table;gap:0}
:where(thead th){text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:11px 14px;white-space:nowrap;background:var(--ink);color:#fff}
:where(thead th.r){text-align:right}
:where(tbody td){padding:11px 14px;border-bottom:1px solid var(--ink10);vertical-align:middle}
:where(td.r){text-align:right}
.muted:not(tr){color:var(--ink60);font-size:12px}
.mono-i{font-family:var(--mono);font-size:12px;color:var(--ink60)}
.src{color:var(--blue);font-size:12px;text-decoration:none}
.src:hover{text-decoration:underline}

/* бейджі, крапки, чипи, кнопки рядка — імена з шаблонів коду */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.pill-ok{background:var(--ok-bg);color:var(--ok)}
.pill-need{background:var(--blue-bg);color:var(--blue)}
.pill-bad,.pill-miss{background:var(--bad-bg);color:var(--bad)}
.pill-man,.pill-exempt{background:var(--ink10);color:var(--ink80)}
.pill-warn{background:var(--warn-bg);color:var(--warn)}
.pill-exempt{white-space:normal;vertical-align:top}
.light{display:inline-flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap}
.dotL,.sdot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 9px;background:var(--na)}
.dotL.g,.sdot-ok{background:var(--ok)}
.dotL.y,.sdot-warn{background:var(--warn)}
.dotL.r,.sdot-bad{background:var(--bad)}
.sdot-na{background:var(--na)}
.sdot-cir{background:var(--cir)}
.ob-chip{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1.5px solid var(--ink20);border-radius:999px;font-size:12.5px;font-weight:600;background:var(--paper);color:var(--ink)}
.ob-chip[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.ob-chip .c{font-family:var(--mono);font-size:11px;opacity:.75}
.ob-act{font-size:12px;font-weight:700;color:var(--blue);border:1.5px solid var(--blue);border-radius:6px;padding:3px 9px;background:var(--paper);cursor:pointer;white-space:nowrap}
.ob-act:hover{background:var(--blue-bg)}
.chip.sel{border-color:var(--ink);background:var(--ink);color:#fff}
.link-btn,.ob-link{appearance:none;border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--blue);cursor:pointer;text-decoration:none}
.link-btn:hover,.ob-link:hover{text-decoration:underline}

/* навігація між вкладками */
.navbtns{margin-top:14px;display:flex;justify-content:flex-end;gap:8px}
.navbtns>span:empty{display:none}

/* сторінки поза продуктом */
.h-page+.view-sub,.head-row+.view-sub{margin-top:-6px}
.view-sub{color:var(--ink60);margin:0 0 14px;max-width:76ch}


/* ════════════════════════════ ШАР 3 ════════════════════════════ */

/* ── каркас застосунку ──────────────────────────────────────────── */
.crumbs #crumb-sep[hidden],.crumbs #head-name[hidden]{display:none}
@media (max-width:860px){
  /* вихід лишається доступним і на телефоні */
  .side{position:relative}
  .side .me{display:flex;position:absolute;top:10px;right:12px;margin:0;border:0;padding:0}
  .side .me .av,.side .me .who{display:none}
}

/* ── головна ─────────────────────────────────────────────────────── */
.ptbl tr.r:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.home-empty{padding:22px 18px;color:var(--ink60)}
@media (max-width:620px){.head-row .search{min-width:0;flex:1 1 100%}}

/* ── шапка продукту ─────────────────────────────────────────────── */
.phead .h-page{min-width:0;overflow-wrap:anywhere}
.phead .acts{justify-content:flex-end}
.menu-pop button[hidden]{display:none}
.tab .st[hidden]{display:none}
.sum-empty{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:22px 18px;color:var(--ink60)}
.stack{min-width:0}
.tally button>b{font-variant-numeric:tabular-nums}
.low .big.ok{color:var(--ink)}
.low-t{min-width:0}
.low-t>b{display:block}
.low .trace{all:unset;cursor:pointer;display:flex;align-items:center;font-size:12.5px;min-width:0;flex-wrap:wrap;row-gap:4px;margin-top:6px;width:100%}
.low .trace:hover .src{color:var(--blue)}
.low .trace:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.lst li>.dot{margin-top:6px}
.lst .t b{font-weight:700}
.pif li span:last-child .dot{margin-top:0}

/* ── продукт: поля ───────────────────────────────────────────────── */
.f .in select{font-weight:400}
.f .in small.arr-s{pointer-events:none}

/* ── вікно «Новий продукт» ── */
#product-modal .card-h{display:block;padding:0;margin:0 0 6px!important;font-family:var(--h2font);font-weight:700;font-size:15px}
#product-modal .btn-row{display:flex}

/* ── службові повідомлення ──────────────────────────────────────── */
.status-box{margin-top:14px;border-radius:8px;padding:10px 12px;font-size:13px;display:none;gap:10px;align-items:flex-start}
.status-box.show{display:flex}
.status-box.info{background:var(--blue-bg);color:var(--ink)}
.status-box.err{background:var(--bad-bg);color:var(--bad)}
.status-box.ok{background:var(--ok-bg);color:var(--ok)}
.status-box .si{flex:none;line-height:1.3}
.status-box b{font-weight:700}
.spinner{width:15px;height:15px;border:2px solid var(--blue-bg);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;flex:none;margin-top:1px}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;font-size:13px;font-weight:600;
  padding:12px 18px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.08);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:100;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.demo-note{font-size:12px;color:var(--ink60);background:var(--cream);border:1.5px dashed var(--ink20);border-radius:8px;padding:8px 12px;margin-bottom:12px;display:flex;gap:8px;align-items:center}
.demo-note.hide{display:none}
.stale-note{display:none;margin:0 0 14px;padding:10px 12px;border-radius:8px;background:var(--warn-bg);font-size:13px}
.stale-note.show{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.state-conflict{margin:0 0 14px;padding:10px 12px;border-radius:8px;background:var(--bad-bg);color:var(--bad);font-size:13px}
.state-conflict button{margin-left:8px}
/* стан збереження в шапці продукту (аудит 01.11, P0 №3): точка + підпис, як .stc */
.save-state{font-size:12px;color:var(--ink60)}
.save-state[data-state="failed"]{color:var(--bad)}
.save-state[data-state="retrying"]{color:var(--warn)}
.save-state .btn{margin-left:2px}
#state-load-error{margin:0 0 14px}
#state-load-error .btn{margin-left:8px}
.empty-hint{background:var(--paper);border:1.5px dashed var(--ink20);border-radius:10px;padding:40px 24px;text-align:center;color:var(--ink60);margin-top:16px}
.empty-hint .ei{margin-bottom:10px}
.empty-hint .ei .ic{width:34px;height:34px;stroke-width:1.5}
.empty-hint .et{font-family:var(--head);font-weight:700;font-size:15px;color:var(--ink);margin-bottom:6px}
.soon-box{background:var(--paper);border:1.5px dashed var(--ink20);border-radius:10px;padding:34px 22px;text-align:center;margin-bottom:16px}
.soon-box .st{font-family:var(--head);font-weight:700;font-size:15px;margin-bottom:8px}
.soon-box .sd{color:var(--ink60);max-width:520px;margin:0 auto 4px}
.soon-box .badge-soon{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--warn);background:var(--warn-bg);border-radius:3px;padding:1px 5px;margin-bottom:14px}
.subblock{margin-top:16px;background:var(--cream);border:1px solid var(--ink10);border-radius:10px;padding:16px}
.subblock h3{font-family:var(--head);font-size:15px;font-weight:700;margin-bottom:2px}
.subblock .s{font-size:12.5px;color:var(--ink60);margin-bottom:10px}
.dev-dim{opacity:.5;pointer-events:none}

/* ── вхід ────────────────────────────────────────────────────────── */
#login-state{min-height:100vh}
.login-wrap{display:grid;grid-template-columns:1.15fr .85fr;min-height:100vh;align-items:stretch}
@media(max-width:960px){.login-wrap{grid-template-columns:1fr}}
.login-hero{background:var(--ink);color:#fff;padding:56px 54px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.brand{font-family:var(--head);font-weight:800;letter-spacing:-.5px}
.login-hero .brand{font-size:30px;margin-bottom:6px;color:#fff}
.login-hero .brand b{color:var(--lime)}
.login-hero .tagline{font-family:var(--head);font-weight:700;font-size:32px;line-height:1.15;letter-spacing:-.3px;margin:18px 0 10px;max-width:560px;overflow-wrap:break-word}
.login-hero .lede{font-size:15px;color:var(--ink40);max-width:520px;margin-bottom:30px}
.login-hero .theses{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;max-width:520px}
.login-hero .theses li{display:flex;gap:14px;align-items:flex-start;color:var(--ink40)}
.login-hero .theses .ti{flex:none;width:34px;height:34px;border-radius:8px;background:var(--ink80);color:var(--lime);display:grid;place-items:center;font-weight:700;font-family:var(--mono)}
.login-hero .theses b{color:#fff;font-weight:700}
.login-hero .foot{margin-top:36px;font-size:12px;color:var(--ink40);position:relative;z-index:1}
.login-panel{background:var(--cream);padding:40px 44px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.login-card{background:var(--paper);border:1px solid var(--ink10);border-radius:10px;padding:32px 30px;width:100%;max-width:400px}
.login-card h1{font-family:var(--head);font-size:22px;font-weight:700;margin-bottom:4px}
.login-card .sub{color:var(--ink60);margin-bottom:22px}
.login-card .btn-dark{width:100%;justify-content:center;margin-top:8px;padding:11px 16px;font-size:14px}
.login-err{display:none;background:var(--bad-bg);color:var(--bad);border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:16px;gap:9px;align-items:flex-start}
.login-err.show{display:flex}
.login-err .si{flex:none}
.login-mini{font-size:12px;color:var(--ink60);margin-top:8px}
.login-card-brand{display:none;font-size:22px;margin-bottom:14px}
.login-card-brand b{color:var(--blue)}
@media(max-width:960px){.login-wrap{min-height:0}.login-panel{order:-1;padding:64px 16px 28px}.login-hero{padding:40px 24px}.login-card-brand{display:block}}
@media(max-width:480px){.login-hero{padding:32px 16px}.login-hero .tagline{font-size:23px}.login-card{padding:24px 18px}}

/* ── сценарій експозиції ─────────────────────────────────────────── */
.radios{display:flex;gap:10px;flex-wrap:wrap}
.radio{flex:1;min-width:130px;border:1.5px solid var(--ink20);border-radius:8px;padding:9px 12px;background:var(--paper);cursor:pointer;font-weight:600;display:flex;align-items:center;gap:8px}
.radio.sel{border-color:var(--blue);background:var(--blue-bg);color:var(--blue)}
.radios.locked .radio{pointer-events:none}
.radios.locked .radio:not(.sel){opacity:.5}
.parfum-gap{display:none;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 16px;padding:10px 12px;border-radius:8px;background:var(--warn-bg);color:var(--warn)}
.parfum-gap.show{display:flex}
.parfum-gap strong{display:block;color:var(--ink);margin-bottom:2px}
.parfum-gap p{font-size:12.5px}
@media(max-width:560px){.parfum-gap.show{display:block}.parfum-gap .btn{margin-top:10px}}

/* ── склад: введення ─────────────────────────────────────────────── */
.ac-wrap{position:relative}
.ac-list{position:absolute;left:0;right:0;top:100%;z-index:50;background:var(--paper);border:1px solid var(--ink20);border-radius:8px;margin-top:4px;box-shadow:0 8px 24px rgba(0,0,0,.06);max-height:240px;overflow-y:auto;display:none}
.ac-list.show{display:block}
.ac-item{padding:8px 12px;cursor:pointer;font-size:13px;display:flex;justify-content:space-between;gap:10px}
.ac-item:hover,.ac-item.active{background:var(--blue-bg)}
.ac-item .ac-inci{font-weight:600}
.ac-item .ac-uk{color:var(--ink60);font-size:12px}
.ac-group{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink60);padding:8px 12px 4px}
.comp-blend{border:1.5px solid var(--blue);border-radius:8px;background:var(--paper);overflow:hidden;margin:0 0 10px}
.comp-blend .cb-head{display:grid;grid-template-columns:1fr 96px 38px;gap:8px;align-items:center;background:var(--blue-bg);padding:10px 12px}
.comp-blend .cb-name{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:13.5px}
.comp-blend .cb-maker{font-size:12px;font-weight:700;color:var(--ink60)}
.comp-blend .cb-src{font-size:12px;font-weight:700}
.comp-blend .cb-pct{margin:0;text-align:right}
.comp-blend .cb-kids{padding:4px 12px 0}
.comp-blend .cb-cols,.comp-blend .cb-child{display:grid;grid-template-columns:1fr 110px 90px 30px;gap:8px;align-items:center}
.comp-blend .cb-cols{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink60);padding:8px 12px 4px}
.comp-blend .cb-cols span:nth-child(2),.comp-blend .cb-cols span:nth-child(3){text-align:right}
.comp-blend .cb-child{margin:0 0 6px}
.comp-blend .cb-share{text-align:right}
.comp-blend .cb-prod{text-align:right;font-size:12.5px;color:var(--ink60)}
.comp-blend .cb-del{width:30px;height:30px;border:1.5px solid var(--ink20);border-radius:6px;background:var(--paper);color:var(--ink60);cursor:pointer}
.comp-blend .cb-hint{grid-column:1 / -1;font-size:12px;color:var(--ink60);margin-top:-3px}
.comp-blend .cb-warn .cb-inci{border-color:var(--warn);background:var(--warn-bg)}
.comp-blend .cb-warn .cb-hint,.comp-blend .cb-out .cb-hint{color:var(--warn)}
.comp-blend .cb-out .cb-share{border-color:var(--warn);background:var(--warn-bg)}
.comp-blend .cb-foot{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;border-top:1px solid var(--ink10);padding:8px 12px;font-size:13px}
.comp-blend .cb-add{border:0;background:none;color:var(--blue);font-weight:700;font-size:13px;cursor:pointer;padding:0}
.comp-blend .cb-msg{width:100%;font-size:12.5px;color:var(--bad)}
.comp-blend .cb-msg:empty{display:none}
@media(max-width:560px){.comp-blend .cb-cols,.comp-blend .cb-child{grid-template-columns:1fr 76px 64px 28px;gap:6px}.comp-blend .cb-head{grid-template-columns:1fr 84px 34px}}
.comp-rows{display:flex;flex-direction:column;gap:10px}
.comp-row-wrap{display:flex;flex-direction:column}
.comp-row.cr-warn .cr-inci{border-color:var(--warn);background:var(--warn-bg)}
.comp-row.cr-bad .cr-inci{border-color:var(--bad);background:var(--bad-bg)}
.cr-flag{font-size:12px;margin:3px 0 0;cursor:pointer;display:inline-flex;gap:5px;align-items:center;width:fit-content;font-weight:600}
.cr-flag.warn{color:var(--warn)}.cr-flag.bad{color:var(--bad)}
.cr-flag:hover{text-decoration:underline}
.cr-range{font-size:12px;margin:3px 0 0;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;color:var(--warn);font-weight:600}
.cr-range.done{color:var(--ink60)}
.cr-range button{font:inherit;font-size:12px;padding:2px 8px;border-radius:6px;border:1.5px solid currentColor;background:transparent;color:inherit;cursor:pointer}
.cr-range button[disabled]{opacity:.45;cursor:not-allowed}
.comp-row.cr-range-pending .cr-pct{border-color:var(--warn)}
.comp-row{display:grid;grid-template-columns:1fr 130px 96px 38px;gap:8px;align-items:center}
.comp-row .cr-cas{font-family:var(--mono);font-size:12px;color:var(--ink60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.comp-row .cr-pct{text-align:right}
.comp-row .cr-del{border:1.5px solid var(--ink20);background:var(--paper);color:var(--ink60);border-radius:8px;width:38px;height:38px;cursor:pointer;font-size:16px;line-height:1}
.comp-row .cr-del:hover{border-color:var(--bad);color:var(--bad)}
.comp-row-head{display:grid;grid-template-columns:1fr 130px 96px 38px;gap:8px;font-size:12px;font-weight:700;color:var(--ink60);margin-bottom:5px}
@media(max-width:640px){.comp-row{grid-template-columns:1fr 84px 34px}.comp-row .cr-cas{grid-column:1 / -1;margin-top:-4px}.comp-row .cr-del{width:34px;height:34px}.comp-row-head{display:none}}



/* ── оцінка: сценарій і таблиця за прототипом ───────────────────── */
#assess-scenario-card .scn-grid{grid-template-columns:repeat(4,1fr)}
.scn-hint{padding:0 18px 12px}
.scn-hint:empty{display:none}
.scenario-status{padding:0 18px 10px;color:var(--ink60);font-size:12px}
.scenario-status:empty{display:none}
.scn-need{display:grid;gap:4px;color:var(--ink80)}
.scn-need b{color:var(--ink)}
.cs.cs-2{grid-template-columns:1fr 3fr}
.cs-why .in textarea{min-height:0;resize:vertical;line-height:1.4}
.cs-live:empty{display:none}
.atbl .stc{white-space:normal}
.atbl td.inci{white-space:nowrap}
.ob-row.open .arr{transform:rotate(90deg)}
.ob-row:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
#assess-conclusion.bad b{color:var(--ink)}
tr.ob-detail td{padding:16px 18px 18px 44px}
@media (max-width:860px){#assess-scenario-card .scn-grid,.cs.cs-2{grid-template-columns:1fr}}


/* ── документи і звіт ───────────────────────────────────────────── */
.dl li>div{min-width:0;overflow-wrap:anywhere}
@media(max-width:860px){.dl li small{display:block;margin-left:0}}
.dl li small{color:var(--ink60);margin-left:8px}
.doc-file{display:inline-flex;align-items:center;gap:2px;margin:2px 4px 0 0}
button.fileref{cursor:pointer}
button.fileref:hover{border-color:var(--blue);color:var(--blue)}
.doc-del{all:unset;cursor:pointer;color:var(--ink40);padding:0 4px;font-size:13px;line-height:1}
.doc-del:hover{color:var(--bad)}
.doc-del:focus-visible{outline:2px solid var(--blue)}
.rep-full{padding:0 18px 18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.rep-full .status-box{flex:1 1 100%;margin-top:0}
.rep-full>#report-run[hidden]+#report-run-soon[hidden]+.status-box:not(.show){display:none}


/* ── токсбаза, кабінет, інструкція ───────────────────────────────── */
.tox-results{margin-bottom:14px}
.tox-results:empty{display:none}
.tox-name{margin:0 0 12px}
.tox-name:empty{display:none}
#cabinet-body>.card,#cabinet-body .cab-grid>.card{margin-bottom:16px;padding:0 0 8px}
#cabinet-body .card-h{font-family:var(--h2font);font-weight:700;font-size:15px}
#cabinet-body div.kv,#cabinet-body .field,#cabinet-body .btn-row,#cabinet-body .status-box,#cabinet-body .muted,#cabinet-body .tbl-scroll{margin-left:18px;margin-right:18px}
#cabinet-body .btn-row{display:flex;gap:10px;margin-bottom:12px}
#cabinet-body .field input,#cabinet-body .field textarea{max-width:560px}
.guide-search-l{flex:1;min-width:220px}


/* токсбаза: картка речовини і картки вибору */
.tox-card{padding:16px 18px;margin-bottom:12px}
.tox-card .foot-note{margin:8px 0 0}
#tox-detail>.card{margin-bottom:12px}
#tox-detail .card>.card-h{padding:0 0 10px;font-family:var(--h2font);font-weight:700;font-size:15px}
#pick-summary{padding:14px 18px}
#tox-detail .card>.muted{display:block;padding:12px 18px}
#tox-detail .cand-table td{vertical-align:top}
.expo-tbl td:first-child{white-space:normal;max-width:240px}

/* ── склад: редактор, як .editor прототипу ──────────────────────── */
.way.excel-drop,.way.manual-way{cursor:pointer}
.way.excel-drop:hover,.way.manual-way:hover,.way.excel-drop.drag{border-color:var(--blue)}
.way.excel-drop:focus-visible,.way.manual-way:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.excel-drop.busy{opacity:.7;pointer-events:none}
.way a{color:var(--blue);font-weight:700;text-decoration:none}
.way a:hover{text-decoration:underline}
.paste-box{display:flex;flex-direction:column;gap:8px}
.paste-box .paste-ta{min-height:64px;font-family:var(--mono);font-size:12px;line-height:1.5;padding:7px 10px;resize:vertical}
.paste-box .btn{align-self:flex-start}
#comp-editor .status-box{margin:0 18px 16px}
#manual-card{padding:0 18px 16px}
.clarify-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 12px;padding:10px 12px;border-radius:8px;background:var(--warn-bg);font-size:13px}
.clarify-bar>span{flex:1 1 300px}
.ed-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
#comp-rows:empty+.ed-foot{margin-top:0}
.comp-rows:empty{display:none}
#manual-card .comp-row-head{display:none}
#manual-card .comp-rows:not(:empty){margin-bottom:0}
#comp-rows:not(:empty)~.ed-foot{margin-top:12px}
.rule.over{color:var(--bad)}
.stbl .cas{max-width:104px;overflow:hidden;text-overflow:ellipsis}
.stbl td.inci .arr{margin-right:2px}
/* INCI-декларація: текст, як абзац .decl p */
.decl .inci-box{display:block;width:100%;border:0;padding:0;background:transparent;min-height:0;resize:none;outline:0;
  font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--ink80);field-sizing:content}
/* аромат: зони файлів .up */
.up.dropz{cursor:pointer;background:var(--paper)}
.up.dropz:hover{border-color:var(--blue)}
.up.dropz:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.up .dzs{color:var(--ink60)}
.up.has{border-style:solid}
.up.has .dot{background:var(--ok)}
.up.has .dzs{font-family:var(--mono);font-size:11.5px;color:var(--ink80);background:var(--paper);border:1px solid var(--ink20);border-radius:4px;padding:1px 6px;display:inline-block;margin-top:2px;word-break:break-all}
#allergen-doses .allergen-dose{max-width:140px}


/* ── звіт ────────────────────────────────────────────────────────── */
.banner{border-radius:10px;padding:16px 18px;margin:16px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--paper);border:1px solid var(--ink10)}
.banner.ok .icon{background:var(--ok-bg);color:var(--ok)}
.banner.need .icon{background:var(--blue-bg);color:var(--blue)}
.banner.bad .icon{background:var(--bad-bg);color:var(--bad)}
.banner .bl{display:flex;align-items:center;gap:14px}
.banner .icon{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--ink10)}
.banner h2{font-family:var(--head);font-size:15px;font-weight:700;margin-bottom:4px}
.banner .gates{font-family:var(--mono);font-weight:700}
.report-h{font-family:var(--h2font);font-size:15px;font-weight:700;margin:22px 0 10px}
ul.warns{list-style:none;padding:0;margin:0;background:var(--paper);border:1px solid var(--ink10);border-radius:10px;overflow:hidden}
ul.warns li{padding:12px 18px;border-top:1px solid var(--ink10);display:flex;gap:10px}
ul.warns li:first-child{border-top:0}
ul.warns .tag{flex-shrink:0;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--blue);text-transform:uppercase;padding-top:2px;min-width:64px}
.report-md{background:var(--paper);border:1px solid var(--ink10);border-radius:10px;padding:18px;white-space:pre-wrap;word-break:break-word;max-height:520px;overflow-y:auto;line-height:1.6}
ol.sources{padding-left:22px;font-size:13px;margin-top:4px}
ol.sources a{color:var(--blue)}
.footnote{font-size:12px;color:var(--ink60);margin-top:8px}

/* ── мобільні картки таблиць, що їх будує код ───────────────────── */
@media(max-width:680px){
  table.stack thead{display:none}
  table.stack tbody tr{display:block;border:1px solid var(--ink10);border-radius:8px;margin:0 0 10px;background:var(--paper)!important;padding:6px 0}
  table.stack tbody td{display:flex;justify-content:space-between;gap:14px;border:none;padding:7px 14px;text-align:right}
  table.stack tbody td::before{content:attr(data-label);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink60);text-align:left;flex-shrink:0}
  table.stack tbody td.wide{flex-direction:column;align-items:flex-start;text-align:left}
  html[lang="en"] table.stack tbody td[data-label-en]::before{content:attr(data-label-en)}
}

/* ── технічний слід розрахунку ───────────────────────────────────── */
/* Технічний слід розрахунку: картка на компонент, кроки «підпис — значення» */
.calc-trace{margin:16px 0;display:grid;gap:10px}
.calc-trace .h-sec{margin:0 0 2px}
.trace-scn{background:var(--paper);border:1px solid var(--ink10);border-radius:10px;padding:14px 18px;font-size:13px;display:grid;gap:4px;line-height:1.55}
.trace-scn .muted{font-size:12px;color:var(--ink60)}
.trace-card{background:var(--paper);border:1px solid var(--ink10);border-radius:10px;padding:14px 18px}
.trace-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;font-weight:700;padding-bottom:10px}
.trace-steps{list-style:none;margin:0;padding:0;display:grid;font-size:13px;line-height:1.55}
.trace-steps li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;border-top:1px solid var(--ink10);padding:7px 0}
.trace-steps li:last-child{padding-bottom:0}
.trace-k{color:var(--ink60);font-size:12px;padding-top:1px}
.trace-v{min-width:0;overflow-wrap:anywhere;max-width:96ch}
.trace-f{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.trace-f b{font-weight:700}
.trace-v .muted{color:var(--ink60)}
.trace-steps li.trace-ok .trace-v{color:var(--ok);font-weight:600}
.trace-steps li.trace-bad .trace-v{color:var(--bad);font-weight:600}
/* «Дані для оцінки» під розгорнутим рядком */
.recs-card{margin-top:12px;border:1px solid var(--ink10);border-radius:10px;padding:12px 16px;font-size:13px;line-height:1.55;display:grid;gap:6px;background:var(--paper)}
.recs-card>div,.recs-card>ul{max-width:96ch}
.recs-card.gap,.recs-card.error{background:var(--warn-bg);border-color:transparent}
.recs-card .ob-dl{margin-top:4px}
.recs-title{font-weight:700;font-size:13.5px}
.recs-card .muted{color:var(--ink60);font-size:12.5px}
.recs-list{margin:0;padding-left:18px;font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
@media(max-width:680px){
  .trace-scn,.trace-card{padding:12px 14px}
  .trace-steps li{grid-template-columns:1fr;gap:2px;padding:8px 0}
  /* таблиця оцінки на телефоні прокручується вбік; картка лишається в межах екрана */
  tr.ob-detail .recs-card{position:sticky;left:0;max-width:calc(100vw - 56px)}
}

/* ── таблиця оцінки ─────────────────────────────────────────────── */
.ob-params{font-size:13px;color:var(--ink60);display:grid;gap:2px;margin:0 0 14px}
.ob-params strong{color:var(--ink);font-variant-numeric:tabular-nums}
.ob-hint{background:var(--warn-bg);color:var(--ink);border-radius:8px;padding:10px 12px;font-size:13px;margin:0 0 12px}
.ob-mos-low{color:var(--bad);font-weight:800}
.ob-sv{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ob-nod{color:var(--ink60)}
.ob-sub{display:block;font-size:12px;color:var(--ink60);margin-top:2px}
.ob-sub.bad{color:var(--bad);font-weight:700}
.ob-v{display:inline-block;border-radius:6px;padding:3px 9px;font-size:12px;font-weight:700;white-space:nowrap;border:0;font-family:inherit;line-height:1.4;flex-shrink:0}
button.ob-v{cursor:pointer}
.ob-v-ok{color:var(--ok);border:1.5px solid var(--ok);background:var(--paper)}
.ob-v-low{color:var(--bad);border:1.5px solid var(--bad);background:var(--paper)}
.ob-v-na{color:var(--na);font-weight:600;padding:0}
.ob-v-pick{background:var(--blue);color:#fff;border:1.5px solid var(--blue)}
.ob-v-out{border:1.5px solid var(--blue);color:var(--blue);background:var(--paper)}
.ob-v-done{color:var(--ok);border:1.5px solid var(--ok);background:var(--paper)}
.ob-v-req{background:var(--warn-bg);color:var(--warn)}
.ob-det{display:grid;gap:5px;font-size:13px;padding:2px 0 8px;max-width:860px}
.ob-det b{font-weight:700}
.ob-det .q{font-style:italic;color:var(--ink80)}
.ob-dl{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.ob-dl a,.ob-dl button{color:var(--blue);font-weight:700;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:700;text-decoration:none}
.ob-dl a:hover,.ob-dl button:hover{text-decoration:underline}
.ob-pk{display:grid;gap:10px;padding:4px 0 10px}
.ob-pk h6{font-family:var(--h2font);font-size:15px;font-weight:700}
.ob-pk .ss{color:var(--ink60);font-size:12.5px}
.ob-pk table{background:var(--paper);border:1px solid var(--ink10);font-variant-numeric:tabular-nums;table-layout:fixed;font-size:12.5px}
.ob-pk col.k-pod{width:27%}.ob-pk col.k-st{width:auto}.ob-pk col.k-src{width:118px}
.ob-pk col.k-sys{width:74px}.ob-pk col.k-mos{width:62px}.ob-pk col.k-act{width:150px}
.ob-pk .qt{font-style:italic;color:var(--ink60)}
.ob-pk thead th{padding:8px 12px}
.ob-pk tbody td{padding:8px 12px;vertical-align:top;white-space:normal;overflow-wrap:anywhere;background:var(--paper)}
.ob-pk tbody td.r{white-space:nowrap;overflow-wrap:normal}
.ob-pk tbody tr.is-chosen td{background:var(--ok-bg)}
.ob-pk .r{text-align:right;white-space:nowrap}
.ob-tag{display:inline-block;background:var(--blue-bg);color:var(--blue);border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:700;white-space:nowrap}
.ob-tag.warn{background:var(--warn-bg);color:var(--warn)}
.ob-b{display:inline-block;font-size:12px;font-weight:700;color:var(--blue);border:1.5px solid var(--blue);border-radius:6px;padding:3px 9px;background:var(--paper);cursor:pointer;white-space:nowrap;font-family:inherit}
.ob-b.on{color:var(--ok);border-color:var(--ok);cursor:default}
.ob-b:disabled{opacity:.5;cursor:not-allowed}
.ob-why{font-size:11.5px;color:var(--ink60);white-space:normal;display:inline-block;text-align:left}
.ob-prop{color:var(--blue);font-weight:600}
.ob-more{display:flex;flex-wrap:wrap;gap:16px}
.ob-apply{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;background:var(--paper);border:1px solid var(--ink10);border-radius:8px;padding:12px 14px}
.ob-apply label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--ink60);flex:1;min-width:280px}
.ob-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ob-opt{background:var(--paper);border:1.5px solid var(--ink20);border-radius:8px;padding:10px 12px;display:grid;gap:6px;align-content:start;font-size:12.5px}
.ob-opt.rec{border-color:var(--blue)}
.ob-opt.off{opacity:.62}
.ob-opt .oh{font-weight:700;font-size:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ob-opt p{color:var(--ink60)}
.ob-opt .hint2{color:var(--blue);font-weight:600}
.ob-opt .ob-b{justify-self:start}
.ob-docgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 10px}
.ob-docgrid .w2{grid-column:span 2}
.ob-docform label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--ink60);min-width:0}
.ob-doccalc{font-family:var(--mono);font-size:12.5px;background:var(--cream);border-radius:6px;padding:8px 10px}
@media(max-width:760px){.ob-docgrid{grid-template-columns:1fr 1fr}.ob-opts{grid-template-columns:1fr}}
.whatif .res b.bad{color:var(--bad)}
.whatif .res b.ok{color:var(--ok)}
.ob-det .trace{margin:4px 0 12px;background:var(--paper);border:1px solid var(--ink10);border-radius:8px;padding:10px 12px}
.ob-det>div:not(.trace):not(.ob-dl){max-width:78ch}
.ob-det .ob-sub.bad{font-size:13px}
.ob-dl{gap:16px}
.ob-req{margin-top:14px}
.ob-req textarea{display:block;margin:0 18px 16px;width:calc(100% - 36px);min-height:120px;font-size:13px}
.annex-ref{white-space:nowrap}
.filerefs{margin-top:3px}
.pod-cell{line-height:1.4}
.pod-val{font-family:var(--mono);font-weight:700;white-space:nowrap}
.pod-val small{font-family:var(--text);font-weight:400;font-size:11.5px;color:var(--ink60)}
.pod-meta,.pod-src{font-size:12px;color:var(--ink60);margin-top:2px}
.pod-hint{margin-top:5px;font-size:11.5px}
.pod-chosen{background:var(--blue-bg);color:var(--blue)}
.mos-agg{font-size:11px;font-weight:600;margin-top:3px}
.mos-agg.is-ok{color:var(--ok)}
.mos-agg.is-bad{color:var(--bad)}
.fact-strip{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline}
.fact-attn{color:var(--warn)}

/* ── склад: таблиця ─────────────────────────────────────────────── */

/* ── довідник і каталог ─────────────────────────────────────────── */
.lib-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.lib-grid:has(#lib-detail:not([hidden])){grid-template-columns:minmax(0,1.2fr) minmax(320px,1fr)}
.lib-tbl tr.sel td{background:var(--blue-bg)}
.lib-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 2px}
.lib-detail{padding:0 0 4px}
.lib-comp{font-size:13px}
.search.lib-maker{min-width:200px;flex:0 1 240px}
.ltbl.lib-tbl{min-width:0}
.expo-tbl td .arr{margin-right:2px}
.expo-tbl tr.det td{padding:12px 18px 14px 44px;font-size:12.5px;color:var(--ink80)}
@media(max-width:1100px){.lib-grid:has(#lib-detail:not([hidden])){grid-template-columns:1fr}}

/* ── токсбаза і вибір дослідження ────────────────────────────────── */
.tox-pod{background:var(--paper);border:1px solid var(--ink10);border-radius:10px;padding:16px 18px;margin:8px 0 16px}
.tox-pod .lab{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink60);font-weight:700}
.tox-pod .val{font-family:var(--mono);font-weight:700;font-size:20px;margin-top:6px}
.tox-pod .val small{font-size:12.5px;color:var(--ink60);font-family:var(--text);margin-left:6px}
.tox-pod .meta{font-size:12.5px;color:var(--ink60);margin-top:6px}
.pick-head-n{font-family:var(--h2font);font-size:15px;font-weight:700}
.pick-head-n b{color:var(--blue)}
.pick-head-s{font-size:12.5px;color:var(--ink60);margin-top:5px}
.pick-h{margin:22px 0 10px}
.pick-chosen{padding:14px 18px;margin-bottom:12px}
.pick-similar{padding:14px 18px;margin-top:16px}
.pick-similar>summary{cursor:pointer;font-weight:700;color:var(--blue)}
.pick-similar-note{font-size:12.5px;margin:8px 0 12px}
.pick-showall{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink60);margin-top:16px;cursor:pointer}
.pick-hidden-note{font-size:12px;margin-top:6px}
.pick-glossary{font-size:12.5px;color:var(--ink60);margin-top:8px}
.pick-glossary b{color:var(--ink)}
.pick-apply{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}
.pick-field{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--ink60)}
.pick-field input{min-width:190px}
.pick-field-wide input{min-width:340px}
.pick-ra-note{font-size:12px;margin-top:8px}
#pick-summary{padding:14px 18px;margin-top:16px}
.cand-table td{vertical-align:top}
.cand-row.is-crit>td{background:var(--ok-bg)}
.cand-row.is-off{opacity:.62}
.cand-pick{white-space:nowrap}
.cand-choose{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;cursor:pointer}
.cand-sup{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink60);margin-top:5px;cursor:pointer}
.cand-why{font-size:11.5px;color:var(--ink60);white-space:normal;display:block;max-width:170px}
.cand-val{white-space:normal}
.cand-conv,.cand-src-meta,.cand-sub{font-size:11px;color:var(--ink60);margin-top:3px}
.cand-src{margin-top:5px}
.cand-src-flat{color:var(--ink60)}
.cand-quote{font-size:11px;color:var(--ink60);margin-top:4px;font-style:italic}
.cand-flags{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.cand-flag{font-size:10px}

/* ── інструкція ─────────────────────────────────────────────────── */
.guide-top{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.guide-search{flex:1;min-width:220px}
.guide-jump{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.guide-jump button{all:unset;cursor:pointer;display:inline-flex;align-items:center;padding:6px 11px;border:1.5px solid var(--ink20);border-radius:999px;font-size:12.5px;font-weight:600;background:var(--paper)}
.guide-jump button:hover{border-color:var(--ink)}
.guide-group{margin-bottom:16px}
.guide-group h3{font-family:var(--h2font);font-size:15px;font-weight:700;margin:0 0 10px}
.lst li.guide-q{display:block;padding:0}
.guide-q>button{all:unset;box-sizing:border-box;display:flex;gap:8px;align-items:center;width:100%;padding:12px 18px;cursor:pointer;font-weight:700}
.guide-q>button:hover{color:var(--blue)}
.guide-q>button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.guide-q.open>button .arr{transform:rotate(90deg)}
.guide-a{display:none;padding:0 18px 14px 42px;line-height:1.55}
.guide-q.open .guide-a{display:block}
.guide-a p{margin:0 0 8px;max-width:78ch}
.guide-a img{display:block;width:100%;max-width:760px;border:1px solid var(--ink10);border-radius:8px;margin:6px 0 8px;cursor:zoom-in}
.guide-a .more{font-size:13px;color:var(--blue);font-weight:700;text-decoration:none}
.guide-empty{padding:18px;color:var(--ink60)}
.instr{background:var(--paper);border:1px solid var(--ink10);border-radius:10px;padding:16px 18px;margin-bottom:12px}
.instr h3{font-family:var(--h2font);font-size:15px;font-weight:700;margin-bottom:6px}
.instr .b{white-space:pre-wrap}
.instr .blk{font-family:var(--mono);font-size:11px;color:var(--ink60);margin-top:8px}

/* ── кабінет ─────────────────────────────────────────────────────── */
.cab-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.cab-grid{grid-template-columns:1fr}}
div.kv{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:7px 0;border-bottom:1px solid var(--ink10)}
div.kv:last-child{border-bottom:none}
div.kv .k{color:var(--ink60)}
div.kv .v{font-weight:600}
/* зразок суміші під способами внесення складу (тест командою 08.10) */
.mix-hint{margin:0 18px 14px;border:1px solid var(--ink10);border-radius:10px;background:var(--paper);font-size:13px}
.mix-hint summary{cursor:pointer;padding:10px 14px;font-weight:600;color:var(--blue)}
.mix-hint[open] summary{border-bottom:1px solid var(--ink10)}
.mix-hint .tbl-wrap{margin:12px 14px 0}
.mix-hint .mix-t th,.mix-hint .mix-t td{padding:7px 12px;font-size:12.5px}
.mix-hint p{margin:10px 14px 12px;color:var(--ink60);line-height:1.5}