:root{
  --ground:#F1F2EE; --surface:#FFFFFF; --surface-2:#F7F8F4; --ink:#1B1F1C; --ink-2:#5B625C; --line:#D7DAD2;
  --accent:#3A3FC4; --accent-ink:#FFFFFF; --accent-soft:#E7E8FB;
  --ok:#2F7A4B; --ok-soft:#E1F0E6; --warn:#8F5C0E; --warn-soft:#FBEFD8; --bad:#B3372B; --bad-soft:#F8E2DF;
  --display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --sans:"IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#121513; --surface:#1A1E1B; --surface-2:#202521; --ink:#E6E9E3; --ink-2:#9AA29B; --line:#313732;
    --accent:#9EA2FF; --accent-ink:#14163A; --accent-soft:#262852;
    --ok:#72CC95; --ok-soft:#1C3326; --warn:#E6B45E; --warn-soft:#3A2E17; --bad:#F08A7E; --bad-soft:#3D211E;
  }
}
:root[data-theme="dark"]{
  --ground:#121513; --surface:#1A1E1B; --surface-2:#202521; --ink:#E6E9E3; --ink-2:#9AA29B; --line:#313732;
  --accent:#9EA2FF; --accent-ink:#14163A; --accent-soft:#262852;
  --ok:#72CC95; --ok-soft:#1C3326; --warn:#E6B45E; --warn-soft:#3A2E17; --bad:#F08A7E; --bad-soft:#3D211E;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;padding-inline:clamp(16px,3vw,32px);padding-block:20px 48px;margin:0}
.wrap{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
h1,h2{font-family:var(--display);font-weight:700;letter-spacing:-.01em;margin:0;text-wrap:balance}
h1{font-size:28px;line-height:1.1}
h2{font-size:18px}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2);font-weight:600}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

header.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;border-bottom:1px solid var(--line);padding-bottom:16px}
.brand{display:flex;flex-direction:column;gap:4px}
.brand p{margin:0;color:var(--ink-2);max-width:60ch}
.catalog-chip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.catalog-chip strong{color:var(--ink);font-weight:600}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:500;font-size:14px;display:inline-flex;align-items:center;gap:8px;line-height:1.2}
.btn:hover{border-color:var(--ink-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2);padding:6px 8px}
.btn.ghost:hover{color:var(--ink);border-color:var(--line)}
.btn[disabled]{opacity:.55;cursor:progress}

.grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:start}
@media (max-width:900px){.grid{grid-template-columns:1fr}}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:16px}
.intake{position:sticky;top:16px}
@media (max-width:900px){.intake{position:static}}
.intake textarea{width:100%;min-height:300px;resize:vertical;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding:14px;line-height:1.55;font-size:14.5px}
.intake .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hint{font-size:13px;color:var(--ink-2);margin:0}
.mode{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.mode i{width:7px;height:7px;border-radius:50%;background:var(--ink-2);display:inline-block}
.mode.on i{background:var(--ok)}
.status-line{font-size:13px;color:var(--ink-2);min-height:1.5em;margin:0}
.status-line.err{color:var(--bad)}

.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.fields{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.f{display:flex;flex-direction:column;gap:4px;min-width:0}
.f.s5{grid-column:span 5}.f.s2{grid-column:span 2}.f.s3{grid-column:span 3}.f.s4{grid-column:span 4}.f.s1{grid-column:span 1}
@media (max-width:560px){.fields{grid-template-columns:repeat(2,minmax(0,1fr))}.f.s2,.f.s3,.f.s4,.f.s5{grid-column:span 2}.f.s1{grid-column:span 1}}
.f label{font-size:12px;color:var(--ink-2);font-weight:500;display:flex;justify-content:space-between;gap:6px}
.f label em{font-style:normal;font-weight:600}
.f label em.bad{color:var(--bad)}.f label em.ok{color:var(--ok)}
.in{display:flex;border:1px solid var(--line);border-radius:7px;background:var(--surface);overflow:hidden}
.in:focus-within{border-color:var(--accent)}
.in input,.in select{border:0;background:transparent;padding:8px 10px;width:100%;min-width:0;outline:none}
.in.mono input{font-family:var(--mono);font-size:14px}
.in.empty{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.copy{border:0;border-left:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);padding:0 9px;cursor:pointer;font-size:12px;flex:none}
.copy:hover{color:var(--accent)}
.copy.done{color:var(--ok)}

.summary{display:flex;flex-wrap:wrap;gap:8px}
.pill{font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}

.items{display:flex;flex-direction:column;gap:10px}
.item{border:1px solid var(--line);border-radius:9px;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.item.s-warn{background:color-mix(in srgb,var(--warn-soft) 55%,var(--surface))}
.item.s-bad{background:color-mix(in srgb,var(--bad-soft) 55%,var(--surface))}
.item-top{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.item-top .left{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;min-width:0}
.said{font-size:13px;color:var(--ink-2);font-style:italic;overflow-wrap:anywhere}
.stamp{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--accent);border:1.5px solid var(--accent);border-radius:4px;padding:1px 7px;letter-spacing:.02em;transform:rotate(-1.2deg);display:inline-block;background:var(--accent-soft)}
.stamp.none{color:var(--bad);border-color:var(--bad);border-style:dashed;background:transparent;transform:none}
.item-fields{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:end}
@media (max-width:560px){.item-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.item-fields .f.prod{grid-column:span 2}}
.line-total{font-variant-numeric:tabular-nums;font-weight:600;text-align:right;padding-bottom:8px}
.note{margin:0;font-size:13px;color:var(--ink-2)}
.item.s-warn .note{color:var(--warn)}
.item.s-bad .note{color:var(--bad)}
.num input{font-variant-numeric:tabular-nums;text-align:right}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:16px}
.total{display:flex;flex-direction:column}
.total b{font-family:var(--display);font-size:26px;font-variant-numeric:tabular-nums;line-height:1.1}
.foot .actions{display:flex;flex-wrap:wrap;gap:8px}

.example-tag{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--warn);background:var(--warn-soft);border-radius:4px;padding:2px 7px}

dialog{border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);max-width:min(640px,calc(100vw - 32px));width:100%;padding:0}
dialog::backdrop{background:rgba(10,12,10,.45)}
.dlg{padding:20px;display:flex;flex-direction:column;gap:14px}
.dlg textarea{width:100%;min-height:160px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding:10px;font-family:var(--mono);font-size:12.5px}
.dlg .row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:9px 16px;border-radius:8px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* ---- app real ---- */
.nav{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:3px}
.nav button{border:0;background:transparent;border-radius:6px;padding:7px 14px;font-weight:600;font-size:14px;color:var(--ink-2);cursor:pointer}
.nav button[aria-selected="true"]{background:var(--accent-soft);color:var(--accent)}
.nav .count{font-size:11px;background:var(--warn-soft);color:var(--warn);border-radius:999px;padding:1px 7px;margin-left:6px}
.userbox{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);flex-wrap:wrap}
.banner{border-radius:10px;padding:12px 16px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;font-size:14px}
.banner.warn{background:var(--warn-soft);color:var(--warn)}
.banner.bad{background:var(--bad-soft);color:var(--bad)}
.banner a.btn{text-decoration:none}
.stamp.av{color:var(--warn);border-color:var(--warn);background:transparent;border-style:dashed;transform:none}
.empty{border:1.5px dashed var(--line);border-radius:10px;padding:18px;color:var(--ink-2);font-size:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.plist{display:flex;flex-direction:column}
.prow{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow .who{display:flex;flex-direction:column;min-width:0}
.prow .who b{font-weight:600;overflow-wrap:anywhere}
.prow .who span{font-size:12.5px;color:var(--ink-2)}
.prow .val{font-variant-numeric:tabular-nums;font-weight:600;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.prow .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.prow .acts .btn{padding:6px 10px;font-size:13px}
@media (max-width:640px){.prow{grid-template-columns:1fr auto}.prow .acts{grid-column:1/-1;justify-content:flex-start}}
.pill.neutral{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.pill.accent{background:var(--accent-soft);color:var(--accent)}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 12px;font-size:13px;cursor:pointer;color:var(--ink-2)}
.filters button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.success{display:flex;flex-direction:column;gap:12px}
.success .link{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.success .link input{border:0;padding:9px 10px;flex:1;min-width:0;font-family:var(--mono);font-size:12.5px;background:var(--surface-2)}
.success .row{display:flex;gap:8px;flex-wrap:wrap}
.success .seal{width:40px;height:40px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;font-weight:700;font-size:20px}
.success textarea{width:100%;min-height:110px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding:10px;font-size:13.5px}

a.btn{text-decoration:none}