/* IC Group: Montserrat, чернильный #1A1D1E, зелёный #8FC640, фон #F8F9F4, кнопки-пилюли */
:root{
  --ink:#1A1D1E;
  --ink-2:rgba(26,29,30,.62);
  --ink-3:rgba(26,29,30,.42);
  --line:rgba(26,29,30,.10);
  --line-2:rgba(26,29,30,.20);
  --paper:#FFFFFF;
  --soft:#F8F9F4;
  --green:#8FC640;
  --green-soft:#EDF6DF;
  --green-deep:#618F1F;
  --amber:#B07800;
  --amber-soft:#FCF2DB;
  --red:#B5352A;
  --red-soft:#FBE8E5;
  --blue:#2F6FA8;
  --blue-soft:#E6F0F8;
  --sans:"Montserrat","Roboto",system-ui,-apple-system,Segoe UI,sans-serif;
  --pill:999px;
  --r:16px;
  --shadow:0 1px 2px rgba(26,29,30,.04),0 10px 30px rgba(26,29,30,.05);
}
*{box-sizing:border-box}
body{margin:0;background:var(--soft);color:var(--ink);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
h1{font-size:25px;font-weight:800;margin:0;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:16px;font-weight:700;margin:0}
h3{font-size:14px;font-weight:700;margin:0}
p{margin:0}
.lbl{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}

.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{background:var(--paper);border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;gap:24px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{font-weight:900;font-size:23px;letter-spacing:-.02em;padding:0 8px}
.brand .g{color:var(--green)}
.brand small{display:block;font:600 10px var(--sans);color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase;margin-top:6px}
.nav{display:flex;flex-direction:column;gap:3px}
.nav .group{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:14px 14px 6px}
.nav button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;border:0;background:none;padding:10px 16px;border-radius:var(--pill);color:var(--ink-2);cursor:pointer;font-weight:600}
.nav button:hover{background:var(--soft)}
.nav button.on{background:var(--ink);color:#fff}
.nav .cnt{font-size:11px;font-weight:700;background:rgba(26,29,30,.07);padding:2px 9px;border-radius:var(--pill);min-width:24px;text-align:center}
.nav button.on .cnt{background:rgba(255,255,255,.2)}
.nav .cnt.hot{background:var(--green);color:var(--ink)}
.who{margin-top:auto;border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.whobtn{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:1px solid var(--line);background:var(--paper);padding:9px 12px;border-radius:var(--pill);cursor:pointer}
.whobtn:hover{background:var(--soft)}
.whobtn b{display:block;font-size:13px;font-weight:700;line-height:1.25}
.whobtn small{color:var(--ink-3);font-size:11px}
.ava{width:32px;height:32px;border-radius:50%;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}
.mode{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:700;color:var(--ink-2);background:var(--soft);padding:8px 13px;border-radius:var(--pill);line-height:1.3}
.mode i{width:8px;height:8px;border-radius:50%;background:var(--amber);display:block;flex:none}
.mode.live i{background:var(--green)}

.main{padding:28px 34px 64px;min-width:0}
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.sub{color:var(--ink-2);margin-top:7px;max-width:72ch}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.card.pad{padding:20px 22px}
.card+.card{margin-top:14px}
.hd{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.bd{padding:22px}

.btn{border:1px solid var(--line-2);background:var(--paper);padding:10px 20px;border-radius:var(--pill);cursor:pointer;font-weight:700;font-size:13px;white-space:nowrap}
.btn:hover{background:var(--soft)}
.btn.pri{background:var(--green);border-color:var(--green);color:var(--ink)}
.btn.pri:hover{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.dark:hover{background:#000}
.btn.sm{padding:7px 15px;font-size:12px}
.btn.ghost{border-color:transparent;background:none;color:var(--ink-2)}
.btn.ghost:hover{background:var(--soft)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible,.nav button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.whobtn:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.pill{display:inline-flex;align-items:center;gap:7px;padding:4px 13px;border-radius:var(--pill);font-size:11.5px;font-weight:700;background:rgba(26,29,30,.06);color:var(--ink-2);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.ok{background:var(--green-soft);color:var(--green-deep)}
.pill.warn{background:var(--amber-soft);color:var(--amber)}
.pill.bad{background:var(--red-soft);color:var(--red)}
.pill.info{background:var(--blue-soft);color:var(--blue)}
.pill.dark{background:var(--ink);color:#fff}
.pill.plain::before{display:none}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.kpi{padding:18px 20px}
.kpi .v{font-size:32px;font-weight:800;margin-top:9px;letter-spacing:-.03em;line-height:1}
.kpi .d{color:var(--ink-3);font-size:11.5px;margin-top:7px}

.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:700px}
th{text-align:left;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:13px 22px;border-bottom:1px solid var(--line)}
td{padding:14px 22px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tfoot td{border-top:1px solid var(--line-2);border-bottom:0;background:var(--soft)}
tbody tr.click{cursor:pointer}
tbody tr.click:hover td{background:var(--soft)}
.strong{font-weight:700}

/* очередь: список слева, форма справа */
.work{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.queue{display:flex;flex-direction:column;max-height:calc(100vh - 200px);overflow:auto}
.q{padding:14px 18px;border-bottom:1px solid var(--line);cursor:pointer;text-align:left;background:none;border-left:0;border-right:0;border-top:0;width:100%}
.q:last-child{border-bottom:0}
.q b{display:block;font-weight:700;font-size:13px}
.q small{color:var(--ink-3);font-size:11.5px;display:block;margin-top:3px}
.q:hover{background:var(--soft)}
.q.on{background:var(--green-soft);box-shadow:inset 3px 0 0 var(--green)}

/* формы */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.f{display:flex;flex-direction:column;gap:7px;min-width:0}
.f label{font-size:12px;color:var(--ink-2);font-weight:700}
.f input,.f select,.f textarea{border:1px solid var(--line-2);background:var(--paper);border-radius:12px;padding:11px 14px;width:100%}
.f textarea{min-height:74px;resize:vertical}
.f input:disabled,.f select:disabled{background:var(--soft);color:var(--ink-2)}
.f .hint{font-size:11.5px;color:var(--ink-3)}
.span2{grid-column:1/-1}
.check{display:flex;align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:var(--pill);padding:9px 16px;cursor:pointer;font-weight:600;font-size:13px;user-select:none}
.check.on{background:var(--green-soft);border-color:var(--green);color:var(--green-deep)}
.check input{display:none}

/* маршрут */
.route{width:100%;border-collapse:collapse;min-width:640px}
.route th{padding:0 10px 10px;border-bottom:1px solid var(--line)}
.route td{padding:8px 10px;border-bottom:1px solid var(--line)}
.route td:first-child,.route th:first-child{padding-left:0}
.route td:last-child,.route th:last-child{padding-right:0;text-align:right}
.route input,.route select{border:1px solid var(--line-2);background:var(--paper);border-radius:10px;padding:9px 11px;width:100%}
.route tr.manual td{background:var(--amber-soft)}
.route .auto{font-size:10px;color:var(--ink-3);display:block;margin-top:4px}
.route .del{border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:18px;line-height:1;padding:5px 9px;border-radius:50%}
.route .del:hover{background:var(--red-soft);color:var(--red)}
.totline{display:flex;gap:34px;flex-wrap:wrap;align-items:baseline;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.totline .v{font-size:23px;font-weight:800;letter-spacing:-.02em;margin-top:6px}

/* статус заявки */
.track{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
.steps{display:flex;flex-direction:column;gap:0}
.step{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:0 0 4px}
.step .mark{position:relative;display:flex;flex-direction:column;align-items:center}
.step .bead{width:22px;height:22px;border-radius:50%;background:var(--soft);border:2px solid var(--line-2);display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--ink-3);flex:none;z-index:1}
.step .line{width:2px;flex:1;background:var(--line);min-height:22px}
.step:last-child .line{display:none}
.step.done .bead{background:var(--green);border-color:var(--green);color:var(--ink)}
.step.done .line{background:var(--green)}
.step.cur .bead{background:var(--ink);border-color:var(--ink);color:#fff}
.step .txt{padding-bottom:20px}
.step .txt b{display:block;font-weight:700;font-size:13.5px}
.step .txt small{color:var(--ink-3);font-size:11.5px;display:block;margin-top:3px}
.step.cur .txt b{color:var(--ink)}
.step.todo .txt b{color:var(--ink-3);font-weight:600}
.sumline{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:13px}
.sumline:last-of-type{border-bottom:0}
.sumline b{font-weight:700}
.total{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:8px}
.banner{display:flex;gap:14px;align-items:flex-start;padding:18px 22px;border-radius:var(--r);background:var(--ink);color:#fff}
.banner.wait{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.banner .big{font-size:17px;font-weight:700;letter-spacing:-.01em}
.banner small{display:block;opacity:.75;margin-top:5px;font-size:12.5px}

.note{background:var(--soft);border-radius:12px;padding:13px 16px;font-size:12.5px;color:var(--ink-2);line-height:1.55}
.note.warn{background:var(--amber-soft);color:var(--amber)}
.note.ok{background:var(--green-soft);color:var(--green-deep)}
.note.bad{background:var(--red-soft);color:var(--red)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.box{border:1px solid var(--line);border-radius:var(--r);padding:17px 18px;display:flex;flex-direction:column;gap:13px}
.box.off{opacity:.5}
.box .h{display:flex;justify-content:space-between;align-items:center;font-weight:700}
.file{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;font-size:12.5px}
.file .ic{width:30px;height:30px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:9px;font-weight:800;color:var(--ink-2);flex:none}
.file small{color:var(--ink-3);display:block}
.files{display:flex;flex-direction:column;gap:7px}
.upload{display:flex;flex-direction:column;gap:9px}
.leg{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:14px;background:var(--paper)}
.leg:last-child{margin-bottom:0}
.leg-hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.leg-hd b{font-size:14px;font-weight:700}
.leg .box{border-color:var(--line);background:var(--soft)}
.leg .box .f input,.leg .box .f select{background:var(--paper)}
.needs{display:flex;gap:6px;flex-wrap:wrap}
.mini{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:var(--pill);padding:4px 11px;font-size:11.5px;font-weight:700;cursor:pointer;user-select:none;white-space:nowrap;color:var(--ink-3)}
.mini.on{background:var(--green-soft);border-color:var(--green);color:var(--green-deep)}
.mini input{width:13px;height:13px;margin:0;accent-color:var(--green-deep)}
.tag{display:inline-block;background:var(--amber-soft);color:var(--amber);border-radius:var(--pill);padding:2px 9px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}
.drop{display:block;border:1.5px dashed var(--line-2);border-radius:12px;padding:13px;text-align:center;color:var(--ink-2);font-size:12.5px;font-weight:700;background:var(--soft);cursor:pointer}
.drop:hover{border-color:var(--green);color:var(--green-deep);background:var(--green-soft)}
.drop:focus-within{outline:2px solid var(--green-deep);outline-offset:2px}

.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.cat{border:1px solid var(--line);border-radius:var(--r);padding:16px 17px;display:flex;flex-direction:column;gap:8px}
.cat.off{opacity:.42}
.cat .src{font-size:10px;color:var(--ink-3);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cat .v{font-size:20px;font-weight:800;letter-spacing:-.02em}
.cat .art{font-size:11.5px;color:var(--ink-2)}
.deal{display:grid;grid-template-columns:34px 1fr 180px 130px;gap:16px;align-items:center;padding:15px 22px;border-top:1px solid var(--line);font-size:13px}
.deal .k{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--green-soft);color:var(--green-deep)}
.deal b{display:block;font-weight:700}
.deal small{color:var(--ink-3)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 22px;border-top:1px solid var(--line);background:var(--soft);border-radius:0 0 var(--r) var(--r);flex-wrap:wrap}

.hist{display:flex;flex-direction:column;gap:0}
.hist div{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.hist div:last-child{border-bottom:0}
.hist time{color:var(--ink-3);white-space:nowrap;font-size:11.5px;min-width:96px}
.hist b{font-weight:700}

.empty{padding:44px 22px;text-align:center;color:var(--ink-3)}
.empty b{display:block;color:var(--ink-2);font-weight:700;margin-bottom:6px}
.skeleton{height:14px;border-radius:var(--pill);background:linear-gradient(90deg,var(--soft),rgba(26,29,30,.06),var(--soft));background-size:200% 100%;animation:sk 1.2s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}

.modal{position:fixed;inset:0;background:rgba(26,29,30,.42);display:grid;place-items:center;padding:20px;z-index:50}
.modal[hidden]{display:none}
.sheet{background:var(--paper);border-radius:20px;max-width:560px;width:100%;max-height:84vh;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.sheet-hd{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}
.sheet-bd{padding:20px 24px;overflow:auto}
.x{border:0;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--ink-3);padding:2px 8px;border-radius:50%}
.x:hover{background:var(--soft);color:var(--ink)}
.pickrow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;cursor:pointer;width:100%;text-align:left;border:1px solid transparent;background:none}
.pickrow:hover{background:var(--soft)}
.pickrow.on{background:var(--green-soft);border-color:var(--green)}
.pickrow b{display:block;font-weight:700;font-size:13px}
.pickrow small{color:var(--ink-3);font-size:11.5px}

.toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:60;max-width:380px}
.toast{background:var(--ink);color:#fff;padding:13px 18px;border-radius:14px;font-size:13px;font-weight:600;box-shadow:var(--shadow);animation:in .18s ease-out}
.toast.ok{background:var(--green-deep)}
.toast.bad{background:var(--red)}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}

@media (max-width:1100px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:column}
  .work,.track{grid-template-columns:1fr}
  .queue{max-height:none}
  .two{grid-template-columns:1fr}
  .deal{grid-template-columns:34px 1fr;gap:6px 16px}
}
@media (max-width:560px){
  .main{padding:18px 16px 48px}
  .grid2{grid-template-columns:1fr}
  .span2{grid-column:auto}
  .bd,.hd{padding:16px}
}