:root{--bg:#EDF5F6;--card:#fff;--line:#d6e4e6;--txt:#123238;--mut:#6b8489;--acc:#0ABAB5;--acc2:#d9f3f1;--red:#d9534f;--redbg:#fdecea;--yelbg:#fdf3dc;--yel:#e0a83a;--grn:#2f9e6e;--grnbg:#e3f5ec;--hot:#ff6b4a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--txt);min-height:100vh}
button{font:inherit;color:inherit;cursor:pointer}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);display:flex;align-items:center;gap:8px;padding:12px 12px;min-height:54px;border-bottom:1px solid transparent}
.top.sh{border-bottom-color:var(--line)}
.top h1{font-size:17px;margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib{width:38px;height:38px;border-radius:12px;border:0;background:var(--card);display:grid;place-items:center;box-shadow:0 1px 2px #0001;color:var(--txt);flex:none}
.wrap{padding:8px 16px 24px;max-width:860px;margin:0 auto}
.card{background:var(--card);border-radius:16px;padding:16px;box-shadow:0 1px 2px #0000000d;margin-bottom:12px}
.mut{color:var(--mut)} .sm{font-size:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--acc);color:#fff;border:0;border-radius:14px;padding:12px 16px;font-weight:700}
.btn.ghost{background:var(--card);color:var(--acc);border:1.5px solid var(--acc)}
.btn.red{background:var(--card);color:var(--red);border:1.5px solid var(--red)}
.btn.wide{width:100%}
.btn:disabled{opacity:.45}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;border-radius:9px;padding:4px 8px;background:var(--acc2);color:var(--acc)}
.tag.grey{background:#eef2f3;color:var(--mut)} .tag.red{background:var(--redbg);color:var(--red)} .tag.yel{background:var(--yelbg);color:#8a5d10} .tag.grn{background:var(--grnbg);color:var(--grn)}
h2{font-size:18px;margin:16px 2px 12px} h3{font-size:15px;margin:16px 2px 8px}
.demo{background:var(--yelbg);color:#7a5414;border-radius:12px;padding:8px 12px;font-size:13px;margin-bottom:12px;display:flex;gap:8px}
.row{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:12px;border:0;width:100%;text-align:left;margin-bottom:8px}
.row .thumb{width:54px;height:54px;border-radius:11px;object-fit:cover;background:var(--acc2);flex:none;display:grid;place-items:center;color:var(--acc)}
.row .t{flex:1;min-width:0} .row .t b{display:block} .row .t span{font-size:12px;color:var(--mut)}
.row.off{opacity:.55}
.seg{display:flex;background:#dde9eb;border-radius:13px;padding:4px;margin-bottom:12px}
.seg button{flex:1;border:0;background:none;padding:8px 4px;border-radius:10px;font-weight:700;font-size:13.5px;color:var(--mut)}
.seg button.on{background:var(--card);color:var(--acc);box-shadow:0 1px 3px #0001}
.search{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:14px;padding:0 12px;margin-bottom:12px;border:1.5px solid transparent}
.search:focus-within{border-color:var(--acc)}
.search input{border:0;outline:0;background:none;font:inherit;padding:12px 0;flex:1;color:var(--txt)}
.figwrap{position:relative;max-width:360px;margin:0 auto}
.figwrap img{width:100%;display:block;user-select:none;-webkit-user-drag:none}
.figwrap svg{position:absolute;inset:0;width:100%;height:100%}
.z{fill:var(--acc);fill-opacity:0;stroke:var(--acc);stroke-opacity:0;stroke-width:3;cursor:pointer;transition:.2s}
.z.has{fill-opacity:.14;stroke-opacity:.5}
.z:hover{fill-opacity:.25}
.z.sel{fill-opacity:.42;stroke-opacity:1}
.chipb{border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:8px 12px;font-weight:600;font-size:13px}
.chipb.on{border-color:var(--acc);color:var(--acc)}
.grp{font-size:12px;font-weight:800;letter-spacing:.4px;color:var(--mut);text-transform:uppercase;margin:16px 4px 8px}
.empty{text-align:center;color:var(--mut);padding:32px 12px;font-size:14px}
.empty .ico{width:54px;height:54px;border-radius:16px;background:var(--acc2);color:var(--acc);display:grid;place-items:center;margin:0 auto 12px}
.cbox{background:var(--card);border-radius:14px;padding:12px 16px;border-left:4px solid var(--acc)}
.cbox.red{border-color:var(--red);background:var(--redbg)} .cbox.yellow{border-color:var(--yel);background:var(--yelbg)} .cbox.green{border-color:var(--grn);background:var(--grnbg)}
.cbox b{display:block;margin-bottom:4px}
.cbox ul{margin:4px 0 0;padding-left:16px} .cbox li{margin:4px 0}
.cards{display:grid;gap:12px;margin-bottom:12px}
details.sec{background:var(--card);border-radius:14px;margin-bottom:8px;overflow:hidden}
details.sec summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 16px;font-weight:700;cursor:pointer}
details.sec summary::-webkit-details-marker{display:none}
details.sec summary .chev{margin-left:auto;transition:.2s;color:var(--mut)}
details.sec[open] summary .chev{transform:rotate(90deg)}
details.sec .body{padding:0 16px 12px}
details.sec ul{margin:0;padding-left:16px} details.sec li{margin:4px 0}
details.no{background:var(--redbg)} details.no summary{color:var(--red)}
details.crit summary{color:var(--grn)}
.ptabs{position:sticky;top:54px;z-index:15;background:var(--bg);display:flex;gap:8px;padding:8px 0 12px;overflow-x:auto}
.ptabs button{flex:1;min-width:56px;border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:8px 4px;font-weight:800;line-height:1.15;position:relative}
.ptabs button small{display:block;font-weight:600;font-size:11px;color:var(--mut)}
.ptabs button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.ptabs button.on small{color:#e6fbfa}
.ptabs button.lk{opacity:.6}
.ptabs .dot{position:absolute;top:-6px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--hot);color:#fff;font-size:11px;line-height:18px;padding:0 4px}
.ex{background:var(--card);border-radius:16px;overflow:hidden;position:relative;border:2px solid transparent;transition:.15s;display:flex;flex-direction:column}
.ex.on{border-color:var(--acc)}
.ex .im{aspect-ratio:3/2;background:#f3f8f8;position:relative;cursor:pointer}
.ex .im img{width:100%;height:100%;object-fit:contain;display:block}
.ex .n{position:absolute;left:8px;top:8px;background:#fffffff0;color:var(--acc);font-weight:800;font-size:12px;border-radius:8px;padding:2px 8px}
.ex .ck{position:absolute;right:8px;top:8px;width:34px;height:34px;border-radius:50%;border:2px solid #fff;background:#ffffffd0;display:grid;place-items:center;color:transparent;box-shadow:0 1px 4px #0003}
.ex.on .ck{background:var(--acc);color:#fff}
.ex .tx{padding:12px 12px 12px;flex:1;display:flex;flex-direction:column;gap:8px}
.ex .tx b{font-size:14px;line-height:1.3}
.ex .dose{align-self:flex-start}
.ex .note{font-size:12px;color:#7a5414;background:var(--yelbg);border-radius:8px;padding:4px 8px}
.ex .more{border:0;background:none;color:var(--acc);font-size:13px;font-weight:700;padding:0;align-self:flex-start;margin-top:auto}
.exs{display:grid;gap:12px}
.fig{background:var(--card);border-radius:14px;overflow:hidden;margin-bottom:12px}
.fig img{width:100%;display:block}
.fig .cap{padding:8px 12px;font-size:12px;color:var(--mut)}
.fld{margin-bottom:16px}
.fld>b{display:block;margin:0 2px 8px;font-size:13px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:8px 12px;font-weight:600}
.opt.on{border-color:var(--acc);background:var(--acc2);color:var(--acc)}
.inp{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 12px;font:inherit;background:var(--card);color:var(--txt)}
.inp:focus{outline:0;border-color:var(--acc)}
textarea.inp{min-height:96px;resize:vertical}
.linkb{border:0;background:none;color:var(--acc);font-weight:700;padding:8px}
.shade{position:fixed;inset:0;background:#0006;z-index:60;display:none}
.sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,105%);width:100%;max-width:560px;max-height:88vh;overflow:auto;background:var(--bg);border-radius:20px 20px 0 0;z-index:61;transition:transform .25s;padding:8px 16px 24px}
.sheet.open{transform:translate(-50%,0)}
.sheet .grab{width:40px;height:4px;border-radius:2px;background:#b9cdd0;margin:4px auto 12px}
.toast{position:fixed;left:50%;top:16px;transform:translate(-50%,-90px);background:var(--txt);color:#fff;border-radius:12px;padding:12px 16px;z-index:80;transition:.25s;font-weight:600;font-size:14px;max-width:90%;text-align:center}
.toast.on{transform:translate(-50%,0)}
.upbtn{position:fixed;right:14px;bottom:140px;z-index:35;width:42px;height:42px;border-radius:50%;border:0;background:var(--card);color:var(--acc);box-shadow:0 4px 14px #0003;display:grid;place-items:center;opacity:0;pointer-events:none;transition:.2s}
.upbtn.on{opacity:1;pointer-events:auto}
.demobar{position:fixed;left:8px;bottom:82px;z-index:35;display:flex;border-radius:10px;overflow:hidden;background:#123238d9;box-shadow:0 2px 8px #0003}
.demobar .exit{display:flex;align-items:center;gap:4px;color:#fff;text-decoration:none;font-size:11px;font-weight:600;padding:4px 8px;border-right:1px solid #ffffff33}
.demobar .exit .i{width:14px;height:14px}
.n8n{border:0;background:none;color:#fff;font-size:11px;padding:4px 8px;font-weight:600}
.n8n b{color:#7ff0ea;margin-right:4px}
.n8n.hit{animation:hit .9s;border-radius:8px}
@keyframes hit{0%{transform:scale(1.35);background:#ff6b4a}100%{transform:scale(1)}}
.steps{display:flex;align-items:center;gap:4px;overflow-x:auto;padding:0 2px 12px;font-size:12px;scrollbar-width:none}
.steps::-webkit-scrollbar{display:none}
.steps button{border:0;background:none;padding:4px 0;display:flex;align-items:center;gap:4px;color:var(--mut);white-space:nowrap;font-weight:600}
.steps button i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;background:#dfe9eb;color:var(--mut)}
.steps button.done i{background:var(--acc);color:#fff}
.steps button.cur{color:var(--txt)} .steps button.cur i{background:var(--txt);color:#fff}
.steps .sep{color:#b9cdd0}
.steps button:disabled{cursor:default}

/* ================= Дизайн-система v2: токены, размеры касания, состояния ================= */
:root{
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --tap:44px;
  --r-sm:10px;--r:14px;--r-lg:18px;
  --sh1:0 1px 2px rgba(18,50,56,.06),0 6px 16px -10px rgba(18,50,56,.22);
  --sh2:0 10px 30px -12px rgba(18,50,56,.35);
  --sh-acc:0 8px 18px -10px rgba(10,186,181,.75);
  --fs-cap:12px;--fs-sm:13px;--fs:15px;--fs-h3:16px;--fs-h2:18px;--fs-h1:22px
}
.card,.row,.tile,.stat,.ex,.pex,.cbox,details.sec,.qcard,.pcard,.hero,.fig{box-shadow:var(--sh1)}
.sheet{box-shadow:var(--sh2)}
/* кнопки: размер, иерархия, состояния */
.btn{min-height:48px;padding:12px 24px;font-size:15px;box-shadow:var(--sh-acc);transition:transform .08s,filter .15s,box-shadow .15s;white-space:nowrap}
.btn.ghost,.btn.red{box-shadow:none}
.btn.sm{min-height:var(--tap);padding:8px 16px;font-size:14px}
.btn:active{transform:scale(.97);filter:brightness(.94)}
.btn:focus-visible,.ib:focus-visible,.opt:focus-visible,.row:focus-visible{outline:3px solid #0abab566;outline-offset:2px}
.btn:disabled{opacity:.5;box-shadow:none}
.btn.busy{position:relative;color:transparent!important;pointer-events:none}
.btn.busy::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2.5px solid #fff;border-right-color:transparent;animation:spin .7s linear infinite}
.btn.ghost.busy::after{border-color:var(--acc);border-right-color:transparent}
.btn.okd{background:var(--grn)!important;box-shadow:none}
@keyframes spin{to{transform:rotate(360deg)}}
.ib{width:var(--tap);height:var(--tap)}
.ib:active,.row:active,.tile:active,.opt:active,.chipb:active{transform:scale(.98)}
.linkb{min-height:var(--tap);padding:8px 12px}
.opt{min-height:var(--tap);padding:8px 16px}
.chipb{min-height:40px;padding:8px 16px}
.seg button{min-height:40px}
.sc button{min-height:var(--tap)!important}
.ptabs button{min-height:48px}
.search input{min-height:var(--tap)}
.inp{min-height:48px}
.row{min-height:64px}
/* подписи полей и подсказки */
.lbl{display:block;font-size:var(--fs-sm);font-weight:700;margin:0 4px 8px}
.lbl small{font-weight:500;color:var(--mut)}
.help{font-size:var(--fs-cap);color:var(--mut);margin:8px 4px 0}
.err{font-size:14px;color:var(--red);margin:8px 4px 0;display:flex;gap:8px;align-items:flex-start}
.inp.bad{border-color:var(--red)}
/* уведомление с отменой */
.toast{display:flex;align-items:center;gap:12px}
.toast .undo{border:0;background:none;color:#7ff0ea;font-weight:800;min-height:36px;padding:4px 8px}
/* одноразовые подсказки */
.demo{position:relative;padding-right:44px}
.demo .x{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:none;color:inherit;opacity:.6;display:grid;place-items:center}
/* поиск */
mark{background:#fff1a8;color:inherit;border-radius:3px;padding:0 1px}
.recent{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.recent span{font-size:var(--fs-cap);color:var(--mut);align-self:center}
.recent button{border:1.5px solid var(--line);background:var(--card);border-radius:20px;min-height:36px;padding:4px 12px;font-size:13px;font-weight:600}
/* шаги выдачи */
.flow{display:flex;gap:8px;margin:4px 0 16px}
.flow div{flex:1;text-align:center;font-size:var(--fs-cap);font-weight:700;color:var(--mut)}
.flow div i{display:block;height:4px;border-radius:2px;background:#dfe9eb;margin-bottom:8px}
.flow div.on{color:var(--txt)} .flow div.on i{background:var(--acc)}
.flow div.done i{background:var(--acc);opacity:.45}
/* полоска шагов в базе — крупнее для пальца */
.steps button{min-height:36px;padding:4px 4px}
.toast{width:min(92%,420px);justify-content:space-between;text-align:left}
.toast span{flex:1}

/* ================= Тёмная тема: нейтральный графит (Material/Apple), бирюза — только акцент ================= */
html.dark{
  --bg:#121315;--card:#1c1e21;--line:#2c2f33;--txt:#eceeef;--mut:#9ba1a6;--acc:#4fd1cb;--acc2:#262a2d;
  --red:#ff8a80;--redbg:#2e2122;--yelbg:#2d281c;--grnbg:#1d2a24;--grn:#6fd6a5;--hot:#ff9e80;
  --sh1:none;--sh2:0 -8px 30px rgba(0,0,0,.5);--sh-acc:none;
  color-scheme:dark
}
html.dark body{background:var(--bg)}
html.dark .top{background:color-mix(in srgb,var(--bg) 92%,transparent)}
html.dark .btn{color:#0b2b2a}
html.dark .btn.ghost{color:var(--acc);border-color:#3a3f43}
html.dark .btn.red{color:var(--red);border-color:#4a3333}
html.dark .seg{background:#1c1e21}
html.dark .seg button.on{background:#2c2f33;color:#fff;box-shadow:none}
html.dark .tag{background:#262a2d;color:var(--acc)}
html.dark .tag.grey{background:#262a2d;color:var(--mut)}
html.dark .tag.yel{background:#2d281c;color:#f3c76b} html.dark .tag.red{background:#2e2122;color:var(--red)} html.dark .tag.grn{background:#1d2a24;color:var(--grn)}
html.dark .demo{background:#2d281c;color:#e9cf8c}
html.dark .ex .im,html.dark .pex .im,html.dark .fig,html.dark .hero img,html.dark .row .thumb img,html.dark .ci img{background:#fff}
html.dark .toast{background:#33373b;color:#fff}
html.dark .chipb,html.dark .opt,html.dark .sc button,html.dark .ptabs button,html.dark .inp,html.dark .search,html.dark .vchip{border-color:#33373b}
html.dark .opt.on{background:#262a2d}
html.dark .ptabs button.on,html.dark .sc button.on{background:var(--acc);border-color:var(--acc);color:#0b2b2a}
html.dark .ptabs button.on small{color:#0b2b2a}
html.dark .steps button i{background:#2c2f33}
html.dark .steps button.done i{background:#2c2f33;color:var(--acc)}
html.dark .steps button.cur i{background:#eceeef;color:#121315}
html.dark mark{background:#5c5016;color:#fff}
html.dark .ex .note,html.dark .pex .note{color:#e9cf8c}
html.dark table.t th{background:#2c2f33;color:#fff}
html.dark table.t td{border-color:var(--line)}
html.dark .shade{background:#000b}
html.dark .main-box{background:#1f2a2a;border:1px solid #2f4a49;color:var(--txt)}
html.dark .main-box b{color:var(--acc)}
html.dark .cartbar{background:#2c2f33}
html.dark .cartbar .go{color:#0b2b2a}
html.dark .demobar{background:#2c2f33dd}
html.dark .sheet{background:#1c1e21}
html.dark .sheet .card,html.dark .sheet .row,html.dark .sheet .q,html.dark .sheet .qa{background:#26292c}
html.dark .sheet .grab{background:#44494e}
html.dark .vth{background:#262a2d}
html.dark .score{background:#26292c;color:#fff}
html.dark .score b{color:var(--acc)}
html.dark .av .cn{background:#2c2f33;color:#fff}
html.dark .tabbar,html.dark .dock,html.dark .side,html.dark .cartp{background:#1a1c1f;border-color:#2c2f33}
html.dark .nav.on{background:#262a2d}
html.dark .z{fill:#4fd1cb}
html.dark .cbox{background:#1c1e21}
html.dark details.no{background:#2a1f20}
html.dark .phl{color:var(--acc)}
html.dark .paper{color:#1b2b2e}

/* объёмные иконки */
.i3{display:block;object-fit:contain;pointer-events:none}
.ico.i3w{background:none!important;box-shadow:none!important}
.empty>.i3{margin:0 auto 12px}
html.dark .thumb img.i3,html.dark .i3{background:none!important}