:root{
  --ink:#101A21; --ink-2:#3D4C56; --ink-3:#6B7C86;
  --paper:#F1F3F4; --card:#FFFFFF; --rail:#111A20; --rail-2:#1B262E;
  --line:#D8DEE2; --line-soft:#E9EDEF;
  --accent:#00767C; --accent-soft:#E2F1F1; --accent-deep:#004F55;
  --money:#9A5B00; --warn:#A8321F; --ok:#2E6B33;
  --r:3px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font:15px/1.5 "Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;font-weight:640;letter-spacing:-.012em}

/* ---------- shell ---------- */
.top{
  position:sticky;top:0;z-index:40;background:var(--rail);color:#EAF0F2;
  display:flex;align-items:center;gap:18px;padding:0 18px;height:56px;
  border-bottom:1px solid #000;
}
.brand{display:flex;align-items:baseline;gap:9px;font-weight:700;letter-spacing:-.02em;font-size:17px}
.brand small{font-weight:450;font-size:12px;color:#8FA3AD;letter-spacing:0}
.tabs{display:flex;gap:2px;margin-left:8px}
.tab{
  background:none;border:0;color:#93A6AF;padding:8px 13px;border-radius:var(--r);
  font-size:14px;font-weight:520;
}
.tab:hover{color:#DCE6EA;background:#1E2A32}
.tab[aria-selected="true"]{background:var(--accent);color:#fff}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.role{
  background:#1E2A32;border:1px solid #2C3A44;color:#CFDCE1;border-radius:var(--r);
  padding:6px 9px;font-size:13px;
}
.who{font-size:12.5px;color:#8FA3AD}

.wrap{display:grid;grid-template-columns:236px minmax(0,1fr) 340px;gap:0;align-items:start}
@media(max-width:1180px){ .wrap{grid-template-columns:200px minmax(0,1fr)} .ledger{display:none} }
@media(max-width:820px){ .wrap{grid-template-columns:minmax(0,1fr)} .rail{display:none} }

/* ---------- left rail ---------- */
.rail{
  position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;
  background:var(--rail-2);color:#B9C8CF;padding:14px 0 40px;
}
.rail h4{font-size:11.5px;font-weight:600;color:#7C919B;padding:0 16px;margin:14px 0 6px;letter-spacing:.01em}
.rl{
  display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;background:none;border:0;
  color:#B9C8CF;padding:7px 16px;font-size:13.5px;line-height:1.25;border-left:2px solid transparent;
}
.rl:hover{background:#22303A;color:#fff}
.rl.on{border-left-color:var(--accent);background:#22303A;color:#fff}
.rl b{margin-left:auto;font-weight:600;font-size:12px;color:var(--accent);white-space:nowrap}
.rl.zero b{color:#5F7480;font-weight:450}

/* ---------- content ---------- */
.main{padding:22px 26px 120px;min-width:0}
@media(max-width:820px){.main{padding:16px 14px 200px}}
.hero{margin-bottom:20px;max-width:70ch}
.hero p{color:var(--ink-2);margin:6px 0 0;font-size:14.5px}
.pill{
  display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);color:var(--accent-deep);
  padding:4px 9px;border-radius:100px;font-size:12.5px;font-weight:560;
}

.sec{background:var(--card);border:1px solid var(--line);margin-bottom:14px;border-radius:var(--r)}
.sec-h{cursor:pointer;display:flex;gap:14px;align-items:flex-start;padding:15px 18px;border-bottom:1px solid var(--line-soft)}
.sec-h.closed{border-bottom:0}
.sec-h .t{flex:1;min-width:0}
.sec-h h3{font-size:16px}
.sec-h p{margin:3px 0 0;color:var(--ink-3);font-size:13px;max-width:64ch}
.sec-sum{text-align:right;white-space:nowrap;font-weight:640;font-size:15px}
.sec-sum small{display:block;font-weight:450;color:var(--ink-3);font-size:12px}
.chev{background:none;border:0;color:var(--ink-3);padding:2px 0 0 4px;font-size:15px}

.stepper{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.stepper button{background:#F6F8F9;border:0;width:30px;height:30px;font-size:16px;color:var(--ink-2);line-height:1}
.stepper button:hover{background:var(--accent);color:#fff}
.stepper input{width:44px;height:30px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-weight:620}
.unit{font-size:12.5px;color:var(--ink-3);margin-left:7px}

.body{padding:4px 18px 16px}
.grp{margin-top:14px}
.grp>h4{font-size:12.5px;color:var(--ink-3);font-weight:600;margin:0 0 4px;padding-bottom:5px;border-bottom:1px solid var(--line-soft)}
.row{display:flex;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:0}
.row .nm{flex:1;min-width:0;font-size:13.8px;line-height:1.35}
.row .nm span{color:var(--ink-3);font-size:12px}
.row.core .nm{font-weight:560}
.row .pr{width:112px;text-align:right;font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.row .tot{width:120px;text-align:right;font-weight:620;font-size:13.8px;white-space:nowrap}
.row.off .nm,.row.off .pr{color:#9AA8B0}
.row .tot.z{color:#B4BFC5;font-weight:450}
.qty{display:flex;align-items:center;gap:6px}
.qty input[type=number]{width:52px;height:28px;border:1px solid var(--line);border-radius:var(--r);text-align:center;background:#fff}
.qty input[type=number]:focus{outline:2px solid var(--accent);outline-offset:-1px}
input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent);margin:0}
.radio{display:flex;align-items:center;gap:10px}
input[type=radio]{width:16px;height:16px;accent-color:var(--accent);margin:0}
.margin{font-size:11.5px;color:var(--money);white-space:nowrap;width:96px;text-align:right}

/* ---------- ledger ---------- */
.ledger{position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;background:var(--card);border-left:1px solid var(--line);padding:16px 16px 30px}
.ledger h4{font-size:12.5px;color:var(--ink-3);font-weight:600;margin:0 0 8px}
.lrow{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:13px;align-items:baseline}
.lrow .n{flex:1;min-width:0;line-height:1.3}
.lrow .n small{display:block;color:var(--ink-3);font-size:11.5px}
.lrow .v{font-weight:600;white-space:nowrap}
.empty{color:var(--ink-3);font-size:13px;padding:10px 0 14px;line-height:1.45}
.tot-block{margin-top:14px;border-top:2px solid var(--ink);padding-top:10px}
.tline{display:flex;justify-content:space-between;padding:4px 0;font-size:13.5px}
.tline.big{font-size:22px;font-weight:700;letter-spacing:-.02em;padding-top:8px}
.tline.disc{color:var(--ok)}
.hint{background:#FFF7EA;border:1px solid #F0DCBE;color:var(--money);font-size:12.3px;padding:8px 10px;border-radius:var(--r);margin-top:10px;line-height:1.4}
.acts{display:grid;gap:7px;margin-top:14px}
.btn{
  border:1px solid var(--line);background:#fff;border-radius:var(--r);padding:9px 12px;
  font-size:13.5px;font-weight:560;text-align:center;
}
.btn:hover{border-color:var(--accent);color:var(--accent-deep)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.pri:hover{background:var(--accent-deep);color:#fff}
.btn.sm{padding:6px 10px;font-size:12.5px}
.btn.danger:hover{border-color:var(--warn);color:var(--warn)}
.btnrow{display:flex;gap:7px;flex-wrap:wrap}

/* mobile bar */
.mbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--rail);color:#fff;
  padding:10px 14px;align-items:center;gap:12px;
}
@media(max-width:1180px){.mbar{display:flex}}
.mbar .v{font-size:19px;font-weight:700;letter-spacing:-.02em}
.mbar small{display:block;color:#8FA3AD;font-size:11.5px;font-weight:450}

/* ---------- tables (admin / кп) ---------- */
table{border-collapse:collapse;width:100%}
th{font-size:11.8px;color:var(--ink-3);font-weight:600;text-align:left;padding:7px 8px;border-bottom:1px solid var(--line)}
td{padding:5px 8px;border-bottom:1px solid var(--line-soft);font-size:13.3px;vertical-align:middle}
td.r,th.r{text-align:right}
.cell{width:100%;border:1px solid transparent;background:#F7F9FA;border-radius:var(--r);padding:4px 6px;text-align:right}
.cell:focus{outline:0;border-color:var(--accent);background:#fff}
.cell.txt{text-align:left}
.gh td{background:#F4F7F8;font-weight:600;font-size:12.5px;color:var(--ink-2)}

.note{font-size:12.8px;color:var(--ink-3);line-height:1.5}
.field{display:block;margin-bottom:10px}
.field span{display:block;font-size:12.3px;color:var(--ink-3);margin-bottom:3px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:var(--r);padding:7px 9px;background:#fff}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.two{grid-template-columns:1fr}}

/* ---------- modal ---------- */
.mask{position:fixed;inset:0;background:rgba(16,26,33,.55);z-index:60;display:flex;align-items:center;justify-content:center;padding:18px}
.modal{background:#fff;border-radius:4px;max-width:560px;width:100%;max-height:88vh;overflow:auto;padding:20px}
.modal h3{margin-bottom:8px}
code.code{display:block;background:#F4F7F8;border:1px solid var(--line);padding:10px;border-radius:var(--r);font:12px/1.45 ui-monospace,Menlo,Consolas,monospace;word-break:break-all;max-height:150px;overflow:auto}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:100px;font-size:13.5px;z-index:80}

/* ---------- КП ---------- */
.kp{background:#fff;border:1px solid var(--line);padding:34px 38px;max-width:900px;border-radius:var(--r)}
@media(max-width:700px){.kp{padding:20px 16px}}
.kp-head{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:18px;flex-wrap:wrap}
.kp-head .co{font-size:12.3px;color:var(--ink-2);line-height:1.5;max-width:46ch}
.kp h1{font-size:23px;letter-spacing:-.02em}
.kp h2{font-size:14.5px;margin:20px 0 4px;padding-top:10px;border-top:1px solid var(--line)}
.kp .meta{font-size:12.8px;color:var(--ink-3)}
.kp table{margin-top:6px}
.kp .sum{margin-top:20px;border-top:2px solid var(--ink);padding-top:10px;max-width:380px;margin-left:auto}
.kp .sum .tline.big{font-size:20px}
.kp .fin{margin-top:22px;font-size:12.5px;color:var(--ink-2);line-height:1.6;border-top:1px solid var(--line);padding-top:12px}

@media print{
  .top,.rail,.ledger,.mbar,.noprint{display:none!important}
  .wrap{display:block}
  .main{padding:0}
  body{background:#fff}
  .kp{border:0;padding:0;max-width:none}
  a{text-decoration:none;color:inherit}
}


/* кнопки в шапке */
.staffbtn{background:#1E2A32;border:1px solid #2C3A44;color:#CFDCE1;text-decoration:none;display:inline-block}
.staffbtn:hover{border-color:var(--accent);color:#fff}
a.brand{text-decoration:none;color:inherit}
.sec-h.closed{cursor:default}
.kpi{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0 4px}
.kpi div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;min-width:150px}
.kpi b{display:block;font-size:19px;letter-spacing:-.02em}
.kpi span{font-size:12.3px;color:var(--ink-3)}