:root{--bg:#f3f4fb;--card:#fff;--ink:#1b1e33;--mut:#7b829d;--line:#e9ebf5;--acc:#6a4cf0;--acc2:#d5ccff;--ok:#16a672;--warn:#f0a020;--bad:#e5484d;--sky:#2f9bf0;--pink:#e85d9c;
 --sh:0 1px 2px rgba(30,30,80,.05),0 4px 14px rgba(30,30,80,.06);--sh2:0 2px 4px rgba(30,30,80,.06),0 10px 26px rgba(60,40,160,.14)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1200px 400px at 10% -10%,#e7e1ff 0,transparent 60%),radial-gradient(900px 380px at 100% 0,#dcefff 0,transparent 55%),var(--bg);background-attachment:fixed;color:var(--ink);font:13px/1.35 -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.wrap{max-width:1280px;margin:0 auto;padding:10px 12px 24px}
header{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-bottom:8px}
h1{font-size:18px;margin:0;letter-spacing:-.01em}h1 small{display:block;font-size:11px;color:var(--mut);font-weight:400;letter-spacing:0}
.chips{display:flex;gap:5px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:5px 11px;font:inherit;cursor:pointer;transition:.18s;box-shadow:0 1px 2px rgba(30,30,80,.04)}
.chip:hover{transform:translateY(-1px);box-shadow:var(--sh)}.chip.on{background:linear-gradient(135deg,#7b5cff,#5a3fe0);border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(106,76,240,.35)}
.nav{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 10px;padding:3px;background:rgba(255,255,255,.7);backdrop-filter:blur(6px);border-radius:12px;width:fit-content;max-width:100%;box-shadow:var(--sh)}
.tab{border:0;background:transparent;color:var(--mut);font:inherit;font-weight:600;padding:6px 12px;border-radius:9px;cursor:pointer;transition:.18s}.tab:hover{color:var(--ink)}
.tab.on{background:linear-gradient(135deg,#7b5cff,#5a3fe0);color:#fff;box-shadow:0 3px 10px rgba(106,76,240,.35)}
.search{flex:1 1 300px;max-width:480px;position:relative}.search:before{content:"🔍";position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:13px;opacity:.7}
.search input{width:100%;border:1px solid var(--line);background:var(--card);border-radius:11px;padding:8px 12px 8px 33px;font:inherit;color:var(--ink);outline:none;box-shadow:var(--sh);transition:.18s}.search input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(106,76,240,.15)}
.sec{display:none}.sec.on{display:block;animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.grid{display:grid;gap:8px;grid-template-columns:repeat(12,1fr)}
.card{background:var(--card);border-radius:14px;padding:10px 12px;box-shadow:var(--sh);min-width:0;transition:box-shadow .2s,transform .2s;animation:rise .4s ease both}
.card:hover{box-shadow:var(--sh2)}
.card h2{font-size:13px;margin:0 0 1px}.sub{color:var(--mut);font-size:11px;margin-bottom:6px}
.kpi{grid-column:span 2;position:relative;overflow:hidden;padding:9px 12px 9px 14px}.kpi:hover{transform:translateY(-2px)}
.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c,var(--acc))}
.kpi:after{content:"";position:absolute;right:-18px;top:-18px;width:64px;height:64px;border-radius:50%;background:var(--c,var(--acc));opacity:.09}
.kpi .l{color:var(--mut);font-size:11px}.kpi .v{font-size:20px;font-weight:700;margin:2px 0 1px;white-space:nowrap;color:var(--c,var(--ink))}.kpi .d{font-size:11px;color:var(--mut)}
.k1{--c:#6a4cf0}.k2{--c:#16a672}.k3{--c:#2f9bf0}.k4{--c:#f0a020}.k5{--c:#e85d9c}.k6{--c:#0fb5ae}.k7{--c:#e5484d}
.up{color:var(--ok);font-weight:600}.dn{color:var(--bad);font-weight:600}
.c-chart{grid-column:span 5}.c-don{grid-column:span 3}.c-pace{grid-column:span 4}.c-tab{grid-column:span 12}
svg{display:block;width:100%;height:auto}#donut svg{max-width:170px;margin:0 auto}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--mut);margin-top:4px}.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.bar-r{transform-box:fill-box;transform-origin:bottom;animation:grow .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.don-s{animation:dash 1s ease both}@keyframes dash{from{stroke-dasharray:0 999}}
.pace{display:grid;gap:7px}.pace .pr{display:grid;grid-template-columns:1fr auto;gap:1px 8px;align-items:end}
.pace .n{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pace .m{font-size:10.5px;color:var(--mut)}.pace .t{font-weight:700;font-size:12px;text-align:right}
.bar{grid-column:1/-1;height:5px;border-radius:3px;background:var(--line);overflow:hidden}.bar b{display:block;height:100%;border-radius:3px;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.tw{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:560px}
th{font-size:10px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;text-align:right;padding:4px 7px;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child,td:first-child{text-align:left}td{padding:5px 7px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr,table tr{transition:background .15s}table tr:hover td{background:#f7f6ff}tr:last-child td{border-bottom:0}
.pill{display:inline-block;min-width:40px;text-align:center;padding:1px 7px;border-radius:7px;font-weight:600;font-size:11px}
.g{background:rgba(22,166,114,.14);color:var(--ok)}.y{background:rgba(240,160,32,.18);color:#a76a00}.r{background:rgba(229,72,77,.14);color:var(--bad)}
.note{color:var(--mut);font-size:11px;margin-top:8px}.hint{font-size:11px;color:var(--mut);margin:5px 0 0}
.ans{border-radius:12px;padding:10px 14px;margin-bottom:8px;font-weight:600;display:flex;gap:8px;align-items:center;flex-wrap:wrap;animation:rise .25s ease both}.ans small{font-weight:400;opacity:.85}
.ans.ok{background:linear-gradient(135deg,rgba(22,166,114,.16),rgba(22,166,114,.07));color:#0b7a53}.ans.no{background:rgba(229,72,77,.1);color:#b3262b}.ans.mid{background:rgba(240,160,32,.15);color:#8f5c00}.ans.idle{background:var(--card);color:var(--mut);font-weight:400;box-shadow:var(--sh)}
.res{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}.pc h3{margin:0;font-size:13px;display:flex;justify-content:space-between;gap:8px;align-items:baseline}.pc h3 span{font-size:11px;color:var(--mut);font-weight:500}
.pc{padding:9px 11px}.pc:hover{transform:translateY(-2px)}.col{margin-top:6px}.chips2{display:flex;flex-wrap:wrap;gap:5px}
.sz{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:3px 8px;font:inherit;font-size:12px;cursor:pointer;color:var(--ink);transition:.15s}.sz:hover{transform:translateY(-1px)}.sz b{font-weight:700}
.sz.in{background:rgba(22,166,114,.12);border-color:rgba(22,166,114,.35);color:#0b7a53}.sz.out{color:var(--mut);background:#f6f7fb}.sz.sel{outline:2px solid var(--acc);outline-offset:1px}
.det{margin-bottom:8px;border:1.5px solid var(--acc);box-shadow:var(--sh2)}.det h3{margin:0 0 2px;font-size:15px}.kv{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--mut);margin:3px 0 6px}.kv b{color:var(--ink)}
.btn{border:0;background:linear-gradient(135deg,#7b5cff,#5a3fe0);color:#fff;border-radius:9px;padding:7px 12px;font:inherit;font-weight:600;cursor:pointer;box-shadow:0 3px 10px rgba(106,76,240,.3);transition:.15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(106,76,240,.38)}.btn:active{transform:none}
.btn.sec2{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:none}.btn.sec2:hover{box-shadow:var(--sh)}
.btn.danger{color:var(--bad)}.btn.sm{padding:3px 9px;font-size:12px}.btn[disabled]{opacity:.5;pointer-events:none}
.btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:flex-end}
.form{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:8px}
label{font-size:11px;color:var(--mut);display:grid;gap:3px}
input,select,textarea{font:inherit;color:var(--ink)}
.form input,.form select,.inp,.lines input,dialog input,.mini{width:100%;border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 9px;outline:none;transition:.15s}
.form input:focus,.inp:focus,.lines input:focus,dialog input:focus,.mini:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(106,76,240,.13)}
.mini{width:auto}.lines td{padding:4px}
.toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,20px);background:#1b1e33;color:#fff;padding:9px 14px;border-radius:11px;font-weight:600;opacity:0;pointer-events:none;transition:.3s;max-width:92vw;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:60}.toast.on{opacity:1;transform:translate(-50%,0)}
.login{position:fixed;inset:0;background:var(--bg);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.login.on{display:flex}.login .card{width:100%;max-width:330px;padding:20px}.login h1{margin-bottom:12px;font-size:20px}.login input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:9px;outline:none}
.err{color:var(--bad);font-size:12px;min-height:16px;margin-bottom:5px}
.hide{display:none!important}.empty{padding:14px;text-align:center;color:var(--mut)}
dialog{border:0;border-radius:16px;padding:16px;max-width:400px;width:calc(100% - 28px);box-shadow:0 14px 44px rgba(20,20,60,.3);animation:rise .25s ease}dialog::backdrop{background:rgba(20,20,40,.35)}
dialog label{margin-bottom:9px}
@media(max-width:1000px){.kpi{grid-column:span 4}.c-chart,.c-don,.c-pace{grid-column:span 12}}
@media(max-width:560px){.wrap{padding:8px}.kpi{grid-column:span 6}.kpi .v{font-size:17px}h1{font-size:16px}.search{flex-basis:100%;max-width:none;order:3}.tab{padding:6px 9px}[style*="span 6"],[style*="span 3"],[style*="span 12"]{grid-column:span 12!important}.sk4{grid-column:span 6!important}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

#stab th:nth-child(2){text-align:left}#schart svg{max-height:140px}

@media(max-width:560px){.nav{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.tab{white-space:nowrap;flex:1 0 auto;font-size:12.5px;padding:6px 10px}
#stab{min-width:470px}#stab th:nth-child(5),#stab td:nth-child(5),#stab th:nth-child(7),#stab td:nth-child(7){display:none}#stab td:nth-child(2){max-width:150px;overflow:hidden;text-overflow:ellipsis}.btn.sm{padding:3px 7px}}

.msr{margin-top:12px;padding-top:10px;border-top:1px dashed #e0dcf0}.msr textarea{width:100%;margin:6px 0 8px;resize:vertical;font:inherit}
.pick{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 10px}.pick label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut)}.sel{border:1px solid var(--line);background:#fff;border-radius:9px;padding:5px 8px;font:inherit;color:inherit}tr.clk{cursor:pointer}tr.clk:hover td{background:#f4f1ff}tr.tot td{border-top:2px solid var(--line);background:#faf9ff}
.mgn{align-self:flex-end;padding:7px 10px;border-radius:9px;font-size:12px;white-space:nowrap}.mgn:empty{display:none}.mgn.g{background:#e3f6ee;color:#0e7a52}.mgn.y{background:#fff3dc;color:#a4690a}.mgn.r{background:#fde6e7;color:#b3262c}
#sbox{max-width:none;margin:0 0 12px}.mh{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}.mh label{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--mut)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin:8px 0}.mgrid label{font-size:12px;color:var(--mut);display:flex;flex-direction:column;gap:3px}.mgrid input{width:100%}
.mtab input{width:76px;text-align:center}.mtab th{white-space:normal}.mtab td,.mtab th{text-align:center}.mtab td:first-child{font-weight:600}

/* ===== Тема «Тёплый детский» ===== */
:root{--bg:#fff6ec;--card:#fffdf9;--ink:#3a2a22;--mut:#9a7b69;--line:#f0dccb;--acc:#ff7a59;--acc2:#ffd9c7;--ok:#2a9d6f;--warn:#f0a020;--bad:#d9434a;--sky:#3b9ad9;--pink:#e0568a;
 --sh:0 2px 0 #ffe2c8;--sh2:0 5px 0 #ffd9bd;--r:20px}
body{background:radial-gradient(900px 360px at 8% -10%,#ffe6d2 0,transparent 60%),radial-gradient(800px 340px at 100% 0,#ffefc9 0,transparent 55%),var(--bg);background-attachment:fixed;font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif}
.card,.pc,.det{border-radius:var(--r);border:2px solid #ffe2c8;box-shadow:0 4px 0 #ffe2c8}
.card:hover{box-shadow:0 6px 0 #ffd9bd}
.kpi{border-radius:var(--r)}.kpi:before{width:6px}
.nav{background:#ffeedd;border-radius:99px;box-shadow:none;border:2px solid #ffe2c8}
.tab{border-radius:99px}.tab.on,.chip.on{background:linear-gradient(135deg,#ff8a6b,#ff6a45);color:#fff;box-shadow:0 3px 0 #d85a3a}
.chip{border:2px solid #f0dccb;background:#fffdf9;box-shadow:none}.chip:hover{box-shadow:0 3px 0 #f0dccb}.chip.on{border-color:transparent}
.btn{border-radius:99px;background:linear-gradient(135deg,#ff8a6b,#ff6a45);box-shadow:0 4px 0 #d85a3a;padding:8px 15px;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 #d85a3a}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #d85a3a}
.btn.sec2{background:#fffdf9;border:2px solid #f0dccb;box-shadow:0 3px 0 #f0dccb}.btn.sec2:hover{box-shadow:0 5px 0 #f0dccb}.btn.sec2:active{box-shadow:0 1px 0 #f0dccb}
.btn.sm{padding:3px 10px}
.search input,.form input,.form select,.inp,.lines input,dialog input,.mini,.sel,.login input{border:2px solid #f0dccb;border-radius:14px;background:#fffdf9}
.search input{border-radius:99px;box-shadow:none}.search input:focus,.form input:focus,.inp:focus,.lines input:focus,dialog input:focus,.mini:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(255,122,89,.18)}
.sz{border:2px solid #f0dccb;border-radius:99px;padding:2px 10px}.sz.in{background:#dff5e8;border-color:#a9dcc2;color:#1f7a55}.sz.out{background:#fbf3ea}.sz.sel{outline-color:var(--acc)}
.pill{border-radius:99px}.g{background:#dff5e8;color:#1f7a55}.y{background:#ffeccb;color:#a76a00}.r{background:#ffe0e0;color:#c23038}
.ans{border-radius:var(--r)}.ans.ok{background:#dff5e8;color:#1f7a55}.ans.no{background:#ffe0e0;color:#b3262b}.ans.mid{background:#ffeccb}.ans.idle{border:2px solid #ffe2c8;box-shadow:none}
.det{border:2px solid var(--acc)}
table tr:hover td,tr.clk:hover td{background:#fff1e4}tr.tot td{background:#fff6ec;border-top:2px solid #f0dccb}
.msr{border-top:2px dashed #f0dccb}.mgn{border-radius:99px}.mgn.g{background:#dff5e8;color:#1f7a55}.mgn.y{background:#ffeccb}.mgn.r{background:#ffe0e0}
dialog{border-radius:24px;border:2px solid #ffe2c8;box-shadow:0 8px 0 #ffd9bd,0 20px 50px rgba(120,60,30,.25)}
.toast{background:#3a2a22;border-radius:99px}
.sec.on{animation:pop .45s cubic-bezier(.3,1.4,.5,1) both}
.card{animation:pop .5s cubic-bezier(.3,1.4,.5,1) both}
@keyframes pop{0%{opacity:0;transform:scale(.88) translateY(8px)}100%{opacity:1;transform:none}}
h1{letter-spacing:.01em}
.k1{--c:#ff7a59}.k2{--c:#2a9d6f}.k3{--c:#3b9ad9}.k5{--c:#e0568a}.k7{--c:#d9434a}
.nav{border-radius:99px}

.bdg{background:#ff7a59;color:#fff;border-radius:99px;padding:0 6px;font-size:10px;margin-left:2px}.bdg:empty{display:none}
.cartbox{position:fixed;left:0;right:0;margin:0 auto;bottom:10px;width:min(560px,calc(100% - 20px));z-index:40;max-height:62vh;overflow:auto;border:2px solid var(--acc);box-shadow:0 8px 0 #ffd9bd,0 18px 40px rgba(120,60,30,.25);animation:pop .35s both}
.crow{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:5px 0;border-bottom:1px dashed #f0dccb}.crow small{color:var(--mut)}
tr.og td:first-child{border-left:6px solid var(--oc)}tr.og td{background:color-mix(in srgb,var(--oc) 9%,transparent)}
tr.oh td{text-align:left!important;font-weight:700;font-size:12px;background:color-mix(in srgb,var(--oc) 18%,transparent);border-left:6px solid var(--oc);border-top:2px solid var(--oc)}
@media(max-width:560px){#buytab{min-width:0}#buytab th:nth-child(3),#buytab td:nth-child(3){display:none}.cartbox{max-height:52vh}}
/* журнал продаж: яркая шапка таблицы (вариант А) */
#stab th{background:#ff7a59;color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;border-bottom:0;padding:8px}
#stab th:first-child{border-radius:12px 0 0 12px}#stab th:last-child{border-radius:0 12px 12px 0}
@media(min-width:561px){.tw:has(#stab){overflow:visible}#stab th{position:sticky;top:0;z-index:5}}
@media(max-width:560px){#s-det .kpi{grid-column:span 6!important}#s-det .card[style*="span 6"]{grid-column:span 12!important}}
@media(max-width:560px){#stab{min-width:0}#stab th,#stab td{padding:5px 4px}#stab td:nth-child(2){max-width:105px}#stab td:nth-child(8) .btn{padding:2px 6px;font-size:11px}}