:root { --bg:#e9ecf0; --card:#fff; --ink:#1b1f24; --mute:#7a838f; --line:#e3e6ea; --acc:#2f8de4; --ok:#1a9b55; --warn:#d93a3a; --side:#252b33; --sidehi:#39414c; --hl:#f3e9fb; --hover:#f5f8fb; --tab:#fff; }
@media (prefers-color-scheme: dark) { :root { --bg:#15181c; --card:#1e2227; --ink:#e6e9ed; --mute:#8f99a5; --line:#2c3138; --acc:#5aa7f0; --ok:#4cc38a; --warn:#ff7b72; --side:#101215; --sidehi:#2a3038; --hl:#2d2538; --hover:#252a31; --tab:#2a3038; } }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; display:flex; }
a { color:var(--acc); text-decoration:none; }
#side { width:190px; transition:width .12s; flex:none; background:var(--side); color:#c9d0d9; display:flex; flex-direction:column; padding:8px 0; overflow-y:auto; }
#side .logo { color:#fff; font-weight:700; padding:8px 8px 10px 16px; font-size:14px; display:flex; align-items:center; justify-content:space-between; gap:6px; }
#side .logo button { border:0; background:var(--sidehi); color:#c9d0d9; border-radius:6px; width:26px; height:26px; cursor:pointer; font-size:15px; flex:none; }
#side .logo button:hover { color:#fff; }
#side a { color:inherit; padding:7px 16px; display:flex; justify-content:space-between; gap:8px; border-left:3px solid transparent; }
#side a:hover { background:var(--sidehi); color:#fff; }
#side a.on { background:var(--sidehi); color:#ffd84d; border-left-color:#ffd84d; }
#side .grp { padding:9px 12px 9px 14px; font-size:13px; font-weight:700; color:#e3e8ee; display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none; border-top:1px solid #313842; }
#side .grp:hover { background:var(--sidehi); } #side .grp i { font-style:normal; width:18px; text-align:center; color:#8fb8ea; } #side .grp span { flex:1; } #side .grp b { color:#7d8794; font-weight:400; }
#side .grp.here i { color:#ffd84d; } #side .grp.here:not(.open) { box-shadow:inset 3px 0 0 #ffd84d; color:#ffd84d; }
#side .items a { padding-left:41px; }
#side.mini { width:46px; } #side.mini .logo span, #side.mini .grp span, #side.mini .grp b, #side.mini .items, #side.mini .me { display:none; }
#side.mini .logo { padding:8px 0 10px; justify-content:center; } #side.mini .grp { justify-content:center; padding:12px 0; } #side.mini .grp i { font-size:17px; }
#side .me { margin-top:auto; padding:14px 16px 8px; border-top:1px solid #3a424d; display:flex; flex-direction:column; gap:2px; font-size:13px; }
#side .me b { color:#fff; } #side .me a { padding:4px 0 0; border:0; color:#8fb8ea; }
#side .sep { height:1px; background:#3a424d; margin:8px 14px; }
#side .bd { background:#e5484d; color:#fff; border-radius:9px; padding:0 6px; font-size:11px; line-height:18px; }
#side .soon { opacity:.5; }
#page { flex:1; min-width:0; display:flex; flex-direction:column; height:100vh; }
.top { display:flex; align-items:center; gap:12px; padding:14px 20px 10px; flex-wrap:wrap; }
.top h1 { font-size:19px; margin:0 8px 0 0; }
.seg { display:flex; background:var(--line); border-radius:8px; padding:2px; }
.seg button { border:0; background:none; padding:6px 12px; border-radius:6px; font:inherit; color:var(--ink); cursor:pointer; font-weight:600; }
.seg button.on { background:var(--acc); color:#fff; }
.tools { display:flex; align-items:center; gap:10px; padding:0 20px 10px; }
.search { flex:0 1 420px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); font:inherit; font-size:15px; }
.grow { flex:1; }
.btn { border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:8px; padding:7px 12px; font:inherit; cursor:pointer; }
.btn.pri { background:var(--acc); border-color:var(--acc); color:#fff; font-weight:600; }
.body { flex:1; min-height:0; display:flex; gap:14px; padding:0 20px 0; }
.tabs { width:190px; flex:none; display:flex; flex-direction:column; gap:2px; }
.tabs a { color:var(--ink); padding:10px 14px; border-radius:8px; display:flex; justify-content:space-between; font-weight:600; }
.tabs a.on { background:var(--tab); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.tabs .n { color:var(--mute); font-weight:600; font-size:12px; }
.tabs .n.red { background:#e5484d; color:#fff; border-radius:4px; padding:0 6px; }
.tw { flex:1; min-width:0; background:var(--card); border-radius:8px 8px 0 0; overflow:auto; position:relative; }
table { border-collapse:separate; border-spacing:0; width:100%; }
th, td { padding:0 10px; height:44px; border-bottom:1px solid var(--line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; text-align:left; }
th { position:sticky; top:0; z-index:2; background:var(--card); color:var(--mute); font-weight:600; font-size:13px; cursor:pointer; user-select:none; border-bottom:2px solid var(--acc); }
th.nosort { cursor:default; }
thead tr:first-child th { border-bottom:1px solid var(--line); }
tr.flt th { top:44px; height:38px; padding:0 6px; }
tr.flt input { width:100%; min-width:46px; padding:5px 7px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--ink); font:inherit; font-size:13px; font-weight:400; }
tr.flt input:focus { outline:2px solid var(--acc); background:var(--card); }
tbody tr { cursor:pointer; }
tbody tr:hover td { background:var(--hover); }
tr.absent td { color:var(--mute); }
tr.res td { background:var(--hl); }
tr.grp td { background:var(--bg); font-weight:700; height:34px; cursor:default; }
@media print { #side, .tools, .burger, .top .btn { display:none !important; } #page { height:auto; } .tw { overflow:visible; } body { background:#fff; } }
td.num, th.num { text-align:right; }
td.c, th.c { text-align:center; }
td.b { font-weight:700; }
td.st, th.st { text-align:center; border-left:1px solid var(--line); width:100px; min-width:100px; max-width:100px; position:sticky; background:var(--card); }
th.st { z-index:3; white-space:normal; line-height:1.15; font-size:12px; } tr.res td.st { background:var(--hl); } tbody tr:hover td.st { background:var(--hover); }
td.st b { font-weight:700; } td.st i { color:#8d5fd3; font-style:normal; }
td img.pv { width:54px; height:38px; object-fit:cover; border-radius:5px; display:block; }
.nopv { width:54px; height:38px; border-radius:5px; border:1px dashed var(--line); }
.two { line-height:1.2; } .two small { display:block; color:var(--mute); font-size:11.5px; } .two small.ok { color:var(--ok); } .two small.red { color:var(--warn); }
.foot { padding:8px 20px; color:var(--mute); font-size:13px; background:var(--card); margin:0 20px; border-top:1px solid var(--line); }
.body.withtabs + .foot { margin-left:224px; }
.pop { position:absolute; right:20px; top:96px; z-index:20; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.18); padding:8px 0; width:340px; }
.pop label, .pop .it { display:flex; justify-content:space-between; align-items:center; padding:9px 16px; cursor:pointer; gap:10px; }
.pop label:hover, .pop .it:hover { background:var(--hover); }
.pop hr { border:0; border-top:1px solid var(--line); margin:6px 0; }
.pop .sub { padding:2px 16px 6px 30px; color:var(--mute); }
#modal { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:50; display:flex; align-items:flex-start; justify-content:center; padding:5vh 12px; }
#modal[hidden] { display:none; }
.dlg { background:var(--card); border-radius:10px; width:min(820px, 100%); max-height:90vh; display:flex; flex-direction:column; }
.dlg h2 { margin:0; padding:16px 20px; font-size:18px; border-bottom:1px solid var(--line); }
.dlg .cols { display:grid; grid-template-columns:1fr 1fr; overflow:auto; }
.dlg .col { padding:14px 18px; min-height:240px; } .dlg .col + .col { background:var(--bg); }
.dlg .col h3 { margin:0 0 8px; font-size:15px; }
.dlg .ci { padding:8px 10px; border-radius:6px; cursor:grab; display:flex; justify-content:space-between; gap:8px; }
.dlg .ci:hover { background:var(--hover); } .dlg .ci.drag { opacity:.4; }
.dlg .ci span.mv { color:var(--mute); cursor:pointer; padding:0 4px; }
.dlg .act { display:flex; justify-content:flex-end; gap:10px; padding:12px 18px; border-top:1px solid var(--line); }
.scroll { flex:1; overflow:auto; padding:0 20px 40px; }
.card { background:var(--card); border-radius:10px; padding:16px; margin-bottom:12px; }
.card h2 { font-size:14px; margin:0 0 10px; color:var(--mute); }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:2px 28px; }
.kv { display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px dashed var(--line); }
.kv span:first-child { color:var(--mute); } .kv span:last-child { text-align:right; overflow-wrap:anywhere; }
.photos { display:flex; gap:8px; overflow-x:auto; } .photos img { height:160px; border-radius:8px; }
.in { color:var(--ok); font-weight:600; } .out { color:var(--mute); } .red { color:var(--warn); }
.login { max-width:340px; margin:18vh auto; } .login select { width:100%; padding:10px 12px; font-size:16px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); margin-bottom:8px; }
.login input { width:100%; padding:10px 12px; font-size:16px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); }
.err { color:var(--warn); min-height:20px; margin:8px 0; }
.empty { padding:60px 20px; text-align:center; color:var(--mute); }
.burger { display:none; }
@media (max-width:820px) {
  body { display:block; } #side { position:fixed; inset:0 auto 0 0; z-index:40; transform:translateX(-100%); transition:transform .15s; } #side.open { transform:none; }
  .burger { display:inline-block; } .body { flex-direction:column; padding:0 8px; } .tabs { width:auto; flex-direction:row; overflow-x:auto; } .tabs a { white-space:nowrap; gap:8px; }
  td.st, th.st { right:auto !important; }
  .top, .tools { padding-left:10px; padding-right:10px; } .foot, .body.withtabs + .foot { margin:0 8px; } .pop { right:8px; width:calc(100% - 16px); }
}

td.st.add { cursor:copy; } td.st.add:hover { outline:2px solid var(--acc); outline-offset:-2px; }
.toast { position:fixed; right:18px; bottom:18px; z-index:80; background:#1f2a36; color:#fff; padding:12px 16px; border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.3); max-width:440px; }
.toast.bad { background:#b3261e; } .toast + .toast { bottom:74px; }
input.mini { width:70px; padding:5px 6px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--ink); font:inherit; } input.mini.w { width:100px; }
label.fl { display:flex; flex-direction:column; gap:4px; color:var(--mute); font-size:13px; }
label.fl input, label.fl select { padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font:inherit; font-size:14px; }
.btn[disabled] { opacity:.5; cursor:default; }
.tw.inc td.st { cursor:copy; } .tw.inc td.st:hover { outline:2px solid var(--ok); outline-offset:-2px; }
a.btn { display:inline-block; }
[hidden] { display:none !important; }
.kanban { flex:1; min-height:0; display:flex; gap:10px; overflow-x:auto; padding:0 20px 12px; align-items:stretch; }
.kcol { flex:0 0 270px; display:flex; flex-direction:column; background:var(--card); border-radius:10px; min-height:0; }
.kcol.won { background:color-mix(in srgb, var(--ok) 7%, var(--card)); } .kcol.lost { background:color-mix(in srgb, var(--warn) 6%, var(--card)); }
.khead { padding:10px 12px 8px; border-top:4px solid var(--acc); border-radius:10px 10px 0 0; display:flex; flex-direction:column; gap:2px; }
.khead span { color:var(--mute); font-size:12px; }
.kcards { flex:1; overflow-y:auto; padding:0 8px 8px; display:flex; flex-direction:column; gap:6px; }
.kcard { display:block; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.kcard:hover { border-color:var(--acc); }
.kt { font-weight:600; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ks { display:flex; justify-content:space-between; margin:4px 0 2px; } .ks span, .kc, .km { color:var(--mute); font-size:12px; } .kc { color:var(--ink); }
.knone { color:var(--mute); font-size:12px; text-align:center; padding:14px 4px; }
.btn.sm { padding:4px 9px; font-size:13px; }
.kcard.tdone { opacity:.6; } .kcard.tdone .kt { text-decoration:line-through; }
#side .items a .bd { margin-left:auto; }
.kcol.over { outline:3px dashed var(--acc); outline-offset:-3px; } .kcard[draggable=true] { cursor:grab; }
img.zoom { cursor:zoom-in; }
.pv-dlg { width:min(760px, 100%); }
.pv-head { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); } .pv-head .out { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv-main { position:relative; background:#111; display:flex; align-items:center; justify-content:center; height:min(56vh, 520px); }
.pv-main img { max-width:100%; max-height:100%; object-fit:contain; } .pv-main img.dim { opacity:.35; }
.pv-nav { position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.9); font-size:24px; line-height:1; cursor:pointer; } .pv-nav.l { left:10px; } .pv-nav.r { right:10px; }
.pv-tools { display:flex; align-items:center; gap:8px; padding:10px 14px 4px; } .pv-tools .btn { font-size:18px; min-width:46px; } .pv-tools .btn.del { color:var(--warn); font-size:14px; }
.pv-strip { position:relative; display:flex; gap:6px; overflow-x:auto; padding:10px 14px 14px; } .pv-strip img { height:58px; width:78px; object-fit:cover; border-radius:6px; cursor:pointer; opacity:.7; border:2px solid transparent; flex:none; } .pv-strip img.on { opacity:1; border-color:var(--acc); }
label.chk { display:flex; gap:6px; align-items:center; color:var(--mute); font-size:13px; cursor:pointer; }
td.st { overflow:visible; } td.st .sv { display:inline-block; min-width:26px; }
.qty { display:inline-flex; align-items:center; gap:2px; margin-left:4px; vertical-align:middle; visibility:hidden; }
tbody tr:hover .qty, .qty.has { visibility:visible; }
.qty button { width:22px; height:22px; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:5px; cursor:pointer; font:700 14px/1 system-ui; padding:0; }
.qty button:hover:not([disabled]) { border-color:var(--acc); color:var(--acc); } .qty button[disabled] { opacity:.3; cursor:default; }
.qty em { font-style:normal; font-weight:700; min-width:14px; text-align:center; color:var(--acc); } .tw.inc .qty em { color:var(--ok); }
.qty.has { background:color-mix(in srgb, var(--acc) 12%, transparent); border-radius:6px; padding:1px 2px; }
@media (hover:none) { .qty { visibility:visible; } }
.lstyles { display:flex; gap:12px; flex-wrap:wrap; } .lstyles label { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px; border:2px solid var(--line); border-radius:10px; cursor:pointer; font-size:13px; } .lstyles label.on, .lstyles label:has(input:checked) { border-color:var(--acc); } .lstyles img { width:170px; background:#fff; border-radius:4px; } .lstyles input { display:none; }
.pl-tree { width:340px; flex:none; background:var(--card); border-radius:8px 8px 0 0; overflow:auto; padding:6px 0; }
.pl-n { display:flex; align-items:center; gap:6px; padding:6px 10px 6px 8px; cursor:pointer; white-space:nowrap; } .pl-n:hover { background:var(--hover); } .pl-n.on { background:var(--hl); }
.pl-n i { font-style:normal; width:16px; text-align:center; color:var(--mute); } .pl-n span { color:var(--mute); overflow:hidden; text-overflow:ellipsis; flex:1; } .pl-n em { font-style:normal; color:var(--acc); font-weight:700; font-size:12px; }
.pl-warn { margin:10px; padding:10px; border-radius:8px; background:color-mix(in srgb, var(--warn) 9%, transparent); font-size:13px; }
.pl-head { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
@media (max-width:820px) { .pl-tree { width:auto; max-height:40vh; } }
.cam { position:fixed; inset:0; z-index:90; background:#000; color:#fff; display:flex; flex-direction:column; }
.cam-top { display:flex; align-items:center; gap:8px; padding:10px 12px; background:#111; }
.cam-view { position:relative; flex:1; min-height:0; overflow:hidden; } .cam-view video { width:100%; height:100%; object-fit:cover; }
.cam-aim { position:absolute; left:8%; right:8%; top:38%; height:24%; border:3px solid rgba(255,216,77,.9); border-radius:12px; box-shadow:0 0 0 2000px rgba(0,0,0,.28); }
.cam-msg { padding:16px 14px calc(16px + env(safe-area-inset-bottom)); font-size:17px; text-align:center; background:#111; min-height:62px; } .cam-msg.ok { background:#12703f; } .cam-msg.bad { background:#b3261e; }
td.st small.cellc { display:block; font-size:10.5px; line-height:1.1; color:var(--mute); margin-top:1px; overflow:hidden; text-overflow:ellipsis; }
.stores { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
.store { flex:1 1 200px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--bg); }
.store.none { opacity:.6; }
.store .sn { font-weight:700; margin-bottom:4px; } .store .sq { display:flex; gap:10px; font-size:15px; }
.store .sc { margin-top:4px; color:var(--mute); white-space:nowrap; } .store .sc b { color:var(--ink); font-size:15px; letter-spacing:.02em; }
.kv.st2 { align-items:center; } .kv.st2 > span:first-child { color:var(--ink); font-weight:600; }
.kv.st2 small { display:block; font-weight:400; font-size:12px; color:var(--mute); white-space:nowrap; } .kv.st2 small.red { color:var(--warn); }
.kv.st2 > span:last-child { white-space:nowrap; display:flex; align-items:center; gap:6px; justify-content:flex-end; } .kv.st2 .qty { visibility:visible; margin-left:2px; }
.grid.g2 { grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); }
td.st { padding:0 4px; }
.qn { display:inline-flex; align-items:center; justify-content:center; gap:2px; }
.qn .sv { min-width:30px; text-align:center; } .qn .sv i { font-size:11px; margin-left:1px; } .qn .sv em { font-style:normal; font-weight:700; color:var(--acc); } .tw.inc .qn .sv em { color:var(--ok); }
.qn button { width:20px; height:22px; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:5px; cursor:pointer; font:700 14px/1 system-ui; padding:0; visibility:hidden; }
tbody tr:hover .qn button:not(.off), td.st.picked .qn button:not(.off) { visibility:visible; }
.qn button:hover:not([disabled]) { border-color:var(--acc); color:var(--acc); } .qn button[disabled] { opacity:.3; cursor:default; }
td.st.picked { background:color-mix(in srgb, var(--acc) 10%, var(--card)); }
@media (hover:none) { .qn button:not(.off) { visibility:visible; } }
th { position:sticky; } .rz { position:absolute; top:0; right:-3px; width:9px; height:100%; cursor:col-resize; z-index:4; touch-action:none; } .rz:hover, body.resizing .rz:active { background:linear-gradient(to right, transparent 3px, var(--acc) 3px, var(--acc) 5px, transparent 5px); }
body.resizing { cursor:col-resize; user-select:none; }
th.st .rz { right:auto; left:-3px; }   /* у закреплённых справа колонок тянем за левый край: правый упирается в край таблицы */
td.st small.cellc { max-width:100%; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:10px; margin-bottom:12px; }
.tile { display:flex; flex-direction:column; gap:3px; background:var(--card); border-radius:10px; padding:12px 14px; color:var(--ink); border-left:4px solid var(--line); } .tile:hover { border-left-color:var(--acc); }
.tile span { color:var(--mute); font-size:13px; } .tile b { font-size:22px; line-height:1.15; } .tile small { color:var(--mute); font-size:12px; } .tile.bad { border-left-color:var(--warn); }
.home { flex:1; overflow:auto; padding:12px 12px 40px; max-width:640px; width:100%; margin:0 auto; }
.hhead { display:flex; justify-content:space-between; align-items:center; padding:6px 6px 12px; } .hhead b { font-size:18px; display:block; } .hhead small { color:var(--mute); }
.hsearch { display:flex; gap:8px; margin-bottom:12px; } .hsearch input { flex:1; min-width:0; padding:14px 14px; font-size:16px; border:0; border-radius:12px; background:var(--card); color:var(--ink); }
.hscan { width:54px; border:0; border-radius:12px; background:var(--card); color:var(--ink); font-size:22px; cursor:pointer; }
.hgrp { background:var(--card); border-radius:12px; margin-bottom:12px; overflow:hidden; }
.hrow { display:flex; align-items:center; gap:14px; padding:15px 16px; color:var(--ink); border-bottom:1px solid var(--line); min-height:58px; } .hrow:last-child { border-bottom:0; } .hrow:active { background:var(--hover); }
.hrow i { font-style:normal; width:26px; text-align:center; font-size:19px; color:var(--mute); flex:none; } .hrow span { flex:1; min-width:0; } .hrow b { font-weight:600; font-size:16px; } .hrow small { display:block; color:var(--mute); font-size:12.5px; }
.hrow em { font-style:normal; color:var(--mute); font-size:20px; } .hrow .bd { background:#e5484d; color:#fff; border-radius:10px; padding:1px 8px; font-size:12px; }
.bigbtn { display:flex; justify-content:center; padding:14px; font-size:16px; } .bigbtn.off { opacity:.5; }
.mlist { background:none !important; } .mrow { background:var(--card); border-radius:10px; margin-bottom:8px; overflow:hidden; } .mrow.absent .mtop { opacity:.6; }
.mtop { display:flex; gap:10px; padding:10px; align-items:center; cursor:pointer; } .mtop img, .mtop .nopv { width:64px; height:48px; object-fit:cover; border-radius:6px; flex:none; }
.mtop > div:nth-child(2) { flex:1; min-width:0; } .mtop b { display:block; font-weight:600; line-height:1.25; } .mtop small { color:var(--mute); font-size:12px; overflow-wrap:anywhere; } .mprice { font-weight:700; white-space:nowrap; }
.mst { display:flex; justify-content:space-between; align-items:center; padding:7px 12px; border-top:1px solid var(--line); gap:8px; } .mst > span:first-child { min-width:0; } .mst small { display:block; color:var(--mute); font-size:11.5px; }
.mst .qn button { visibility:visible; width:34px; height:32px; font-size:18px; } .mst .qn .sv { min-width:44px; font-size:16px; }
.hrow .bd, .hrow .btn { flex:none; } .hcap { padding:10px 16px 4px; color:var(--mute); font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; } .htask { cursor:pointer; }
.htask b { font-size:15px; line-height:1.25; display:block; }
.np { max-width:640px; margin:0 auto; display:grid; gap:12px; padding-bottom:40px; } .npsec { background:var(--card); border-radius:12px; padding:12px 14px 14px; display:grid; gap:10px; }
.npsec h3 { margin:0; font-size:12.5px; color:var(--mute); text-transform:uppercase; letter-spacing:.03em; } .np2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.np label.fl input, .np label.fl select { padding:12px 12px; font-size:16px; min-width:0; width:100%; } .npseg button { flex:1; padding:11px 6px; font-size:15px; } .nprow { display:flex; gap:8px; } .nprow input { flex:1; }
.npph { display:flex; flex-wrap:wrap; gap:8px; } .npth { position:relative; width:86px; height:86px; } .npth img { width:100%; height:100%; object-fit:cover; border-radius:8px; }
.npth button { position:absolute; top:-6px; right:-6px; width:24px; height:24px; border-radius:12px; border:0; background:#e5484d; color:#fff; cursor:pointer; }
.npadd { width:86px; height:86px; border:1.5px dashed var(--line); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--mute); font-weight:600; cursor:pointer; }
.npl { display:flex; flex-wrap:wrap; gap:6px; } .npl button { border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:16px; padding:8px 12px; font:inherit; cursor:pointer; }
.nppn { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; background:var(--bg); border-radius:8px; font-size:16px; }
.npwarn { background:#fff4d6; color:#6b4e00; border-radius:8px; padding:10px 12px; font-size:13.5px; display:grid; gap:4px; } .npwarn a { color:inherit; text-decoration:underline; }
.npok { background:var(--card); border-radius:12px; padding:18px 16px; display:grid; gap:4px; text-align:center; } .npok b { font-size:34px; } .npok span { font-size:16px; font-weight:600; } .npok small { color:var(--mute); }
@media (max-width:420px) { .np2 { grid-template-columns:1fr 1fr; } }
.np, .np > *, .npsec > *, .np2 > * { min-width:0; } .np { width:100%; }
.npcar { display:grid; gap:8px; } .npcar + .npcar { border-top:1px solid var(--line); padding-top:10px; } .npl button.on { background:var(--acc); border-color:var(--acc); color:#fff; }
.npin { flex:1; min-width:0; padding:12px; font-size:16px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font:inherit; }
.npin { width:0; }