:root{
  --red:#B50900; --red-d:#8f0700; --ink:#2B2A29; --surface:#F6F5F4; --line:#EDEDED;
  --muted:#9a9895; --muted2:#6b6a68; --ok:#1d8a4c; --info:#1b6ec2; --warn:#b8860b;
  --radius:8px; --sans:'Montserrat',system-ui,Arial,sans-serif; --head:'Cuprum','Montserrat',sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:#eef0f2;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
#app{display:flex;min-height:100vh}
#sidebar{width:208px;flex:none;background:var(--ink);color:#cfcdca;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:9px;padding:18px 14px;border-bottom:1px solid #3a3937}
.brand .logo-mark{width:32px;height:30px;flex:none;overflow:hidden;display:block}
.brand .logo-mark img{height:30px;width:auto;max-width:none;display:block}
.brand .brand-text{font-family:var(--head);font-weight:700;font-size:15px;color:#fff;line-height:1.05;display:flex;flex-direction:column}
.brand small{font-weight:400;font-size:10px;color:#9a9895;letter-spacing:.04em;text-transform:uppercase}
#nav{display:flex;flex-direction:column;padding:10px 8px;gap:2px;flex:1}
.navbtn{display:block;text-align:left;background:none;border:none;color:#cfcdca;font:500 13.5px/1 var(--sans);padding:11px 12px;border-radius:6px;cursor:pointer}
.navbtn:hover{background:#3a3937;color:#fff}
.navbtn.active{background:var(--red);color:#fff}
.navbtn-admin{margin-top:14px;font-size:12.5px;color:#8d8b88;border-top:1px solid #3a3937;border-radius:0;padding-top:14px}
.navbtn-admin:hover{background:none;color:#cfcdca}
.side-foot{padding:12px 16px;font-size:10.5px;color:#7a7976;border-top:1px solid #3a3937}
/* Ширина рабочей области. Было 1080px — на широком мониторе список «Мои КП»
   не вмещал колонку действий, кнопка «Скачать .kp» переносилась и обрезалась. */
#view{flex:1;padding:26px 30px;max-width:1400px;margin:0 auto;width:100%}
.h1{font-family:var(--head);font-weight:700;font-size:26px;margin:0 0 4px}
.h2{font-family:var(--head);font-weight:700;font-size:18px;margin:0 0 12px}
.muted{color:var(--muted2)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
/* white-space:nowrap — подпись кнопки не разрывается на две строки: при line-height:1
   перенос выдавливал текст за границы («Скачать .kp», «Дублировать»). */
.btn{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #d8d6d2;color:var(--ink);font:500 13px/1 var(--sans);padding:9px 14px;border-radius:6px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--surface)}
.btn:active{transform:scale(.98)}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover{background:var(--red-d)}
.btn-ghost{border-style:dashed;color:var(--red);border-color:var(--red);background:none}
.btn-sm{padding:6px 10px;font-size:12px}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.field label,.lbl{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.input,.select,textarea{font:400 13.5px/1.4 var(--sans);color:var(--ink);border:1px solid #d8d6d2;border-radius:6px;padding:9px 10px;background:#fff;width:100%}
.input:focus,.select:focus,textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(181,9,0,.12)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.col{flex:1;min-width:160px}
.grid{display:grid;gap:12px}
table.table{width:100%;border-collapse:collapse}
.table th{font-family:var(--head);font-weight:700;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--ink);padding:9px 8px;text-align:left}
.table td{padding:9px 8px;border-bottom:1px solid var(--line);font-size:12.5px;vertical-align:top}
.table tr:hover td{background:#fcfbfa}
.badge{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--surface);color:var(--muted2)}
.badge.draft{background:#efeded;color:#6b6a68}
.badge.sent{background:#e6f0fb;color:#1b6ec2}
.badge.accepted{background:#e7f5ec;color:#1d8a4c}
.badge.rejected{background:#fbeaea;color:#b50900}
.pill{display:inline-block;font-size:11px;font-weight:600;color:var(--red);background:#fbf4f3;border:1px solid #f0dcd9;padding:2px 9px;border-radius:20px}
.right{text-align:right}.center{text-align:center}
.modal-bg{position:fixed;inset:0;background:rgba(43,42,41,.5);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50;overflow:auto}
.modal{background:#fff;border-radius:10px;max-width:560px;width:100%;padding:22px 24px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.empty{text-align:center;color:var(--muted2);padding:48px 20px}
.empty .big{font-family:var(--head);font-weight:700;font-size:22px;color:var(--ink);margin-bottom:8px}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:11px 20px;border-radius:8px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:99}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.totbar{position:sticky;bottom:0;background:#fff;border-top:2px solid var(--ink);padding:12px 16px;display:flex;justify-content:flex-end;align-items:center;gap:18px;margin-top:16px}
.tot-pay{background:var(--red);color:#fff;font-family:var(--head);font-weight:700;font-size:18px;padding:7px 16px;border-radius:6px}