:root{--ink:#1c2430;--muted:#6b7480;--line:#e3e7ec;--bg:#f4f6f8;--card:#fff;--accent:#1f6feb;--accent-soft:#e8f0fe;
--ok:#137333;--ok-soft:#e6f4ea;--warn:#a15c00;--warn-soft:#fff4dc;--err:#b3261e;--err-soft:#fce8e6}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--accent);text-decoration:none}
header{background:#111827;color:#fff;display:flex;align-items:center;gap:22px;padding:0 20px;height:52px}
header .logo{font-weight:700;letter-spacing:.06em}
header nav a{color:#cbd5e1;padding:15px 2px;border-bottom:2px solid transparent}
header nav a.on,header nav a:hover{color:#fff;border-color:#60a5fa}
header nav{display:flex;gap:18px;flex:1}
header .me{color:#cbd5e1;font-size:13px}
main{padding:20px;max-width:1320px;margin:0 auto}
h1{font-size:20px;margin:0 0 14px}
h2{font-size:15px;margin:0 0 10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:12px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:start}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
textarea{min-height:64px}
button,.btn{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font:inherit;color:var(--ink)}
.btn.primary,button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.sm,button.sm{padding:4px 10px;font-size:13px}
table{width:100%;border-collapse:collapse}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#fafbfc}
td.num,th.num{text-align:right;white-space:nowrap}
tr.click:hover td{background:#f7faff;cursor:pointer}
.muted{color:var(--muted)}.small{font-size:12px}
.chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;background:#eef1f4;margin:1px 2px 1px 0;white-space:nowrap}
.chip.yellow{background:#fff4cc}.chip.blue{background:#dbeafe}.chip.green{background:var(--ok-soft);color:var(--ok)}
.chip.gray{background:#eceff1;color:#555}.chip.orange{background:#ffe8cc}.chip.red{background:var(--err-soft);color:var(--err)}
.flash{padding:10px 14px;border-radius:10px;margin-bottom:14px}
.flash.ok{background:var(--ok-soft);color:var(--ok)}.flash.err{background:var(--err-soft);color:var(--err)}
.note{background:var(--warn-soft);color:var(--warn);padding:8px 12px;border-radius:8px;font-size:13px;margin:6px 0}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.kpi .v{font-size:22px;font-weight:700;margin-top:4px}.kpi .l{font-size:12px;color:var(--muted)}
.kpi .s{font-size:12px;color:var(--muted);margin-top:2px}
.tg{background:#e6ebd9;border-radius:12px;padding:14px}
.tg .bubble{background:#fff;border-radius:12px;padding:10px 12px;white-space:pre-wrap;font-size:13.5px;max-width:460px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.tg .bubble .who{color:#c2457a;font-weight:600;font-size:13px;margin-bottom:4px}
.tg blockquote{margin:4px 0;border-left:3px solid #c2457a;padding:2px 8px;background:#fbf2f6;border-radius:4px;color:#333}
.pos{color:var(--ok)}.neg{color:var(--err)}
.login{max-width:360px;margin:12vh auto}
.badge-sys{font-size:11px;color:var(--muted)}
.statusbar form{display:inline}
.statusbar button{margin:2px 2px}
.statusbar button.on{background:var(--accent-soft);border-color:var(--accent);font-weight:600}
details summary{cursor:pointer;color:var(--accent)}
.right{text-align:right}
/* вибір готового ПК */
.pc-pick{margin-top:10px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--bg,#fafafa)}
.pc-pick summary{cursor:pointer;font-weight:600}
.pc-pick[open] summary{margin-bottom:8px}
.pc-results{max-height:460px;overflow:auto;margin-top:4px}
.pc-item{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0;background:var(--card)}
.pc-item:hover{border-color:var(--accent,#3b6)}
.pc-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.pc-price{font-weight:700;white-space:nowrap}
.pc-parts{display:flex;flex-wrap:wrap;gap:2px 14px;margin:6px 0}
.goods-row[hidden]{display:none}
/* вузькі екрани: пів монітора, планшет, телефон */
@media (max-width:960px){
  .split{grid-template-columns:1fr}
  .split .card[style*="sticky"]{position:static!important}
  main{padding:14px}
}
@media (max-width:640px){
  header{height:auto;flex-wrap:wrap;gap:6px 14px;padding:8px 12px}
  header nav{order:3;flex-basis:100%;overflow-x:auto;white-space:nowrap;gap:14px}
  header nav a{padding:8px 2px}
  .g2,.g3{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr 1fr}
  main{padding:10px}
  table{display:block;overflow-x:auto}
  .pc-head{flex-direction:column;gap:2px}
}
/* вставка з переписки, доставка, додаткова вартість */
.paste-box{background:var(--accent-soft);border:1px dashed var(--accent);border-radius:10px;padding:10px 12px;margin-bottom:12px}
.paste-box textarea{min-height:64px}
.delivery-box{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.delivery-box[hidden]{display:none}
.extra-box{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
input.filled{background:var(--ok-soft);transition:background .3s}
/* фінпанель: ліміт ФОП, групи надходжень */
.fop .l{font-size:12px;color:var(--muted)}
.fop-big{font-size:20px;margin:4px 0 8px}
.fop .bar{position:relative;height:12px;background:var(--line);border-radius:6px;overflow:hidden;margin-bottom:6px}
.fop .bar>div{height:100%;background:var(--ok);border-radius:6px}
.fop-warn .bar>div{background:#e5a100}.fop-danger .bar>div{background:var(--err)}
.fop-warn{border-left:4px solid #e5a100}.fop-danger{border-left:4px solid var(--err)}.fop-ok{border-left:4px solid var(--ok)}
.fop .mark{position:absolute;top:0;bottom:0;width:2px;background:rgba(0,0,0,.25)}
.months{display:flex;gap:4px;align-items:flex-end;height:84px}
.mcol{display:flex;flex-direction:column;align-items:center;gap:2px}
.mbar{width:14px;background:var(--accent);border-radius:3px 3px 0 0;min-height:2px;opacity:.75}
.ml{font-size:10px;color:var(--muted)}
.fin-group summary{cursor:pointer}
.fin-group[open] summary{margin-bottom:8px}
.tx-found{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding:6px 0}
.quick{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 12px}
.quick .chip{text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);cursor:pointer}
.quick .chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.lead-box{display:block;margin-top:12px;font-size:13px;color:var(--ink)}
/* службове меню */
.navmore{position:relative;color:#cbd5e1}
.navmore summary{list-style:none;cursor:pointer;padding:15px 2px;border-bottom:2px solid transparent}
.navmore summary::-webkit-details-marker{display:none}
.navmore.on summary,.navmore summary:hover{color:#fff;border-color:#60a5fa}
.navmenu{position:absolute;top:100%;left:0;background:#111827;border:1px solid #334155;border-radius:8px;padding:6px;min-width:230px;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.navmenu a{display:block;padding:8px 10px!important;border:0!important;border-radius:6px;color:#e2e8f0}
.navmenu a:hover{background:#1f2937}
@media (max-width:640px){.navmenu{position:fixed;left:8px;right:8px;top:auto}}