/* БМК · CRM: фирменный стиль по брендбуку; компоновка по образцу amoCRM (рейка слева, воронка, карточка с лентой) */
:root{color-scheme:light;--page:#f6efe6;--surface:#fffdfa;--surface-2:#f8ead9;--ink:#241c1a;--ink-2:#5b4f49;--ink-3:#7a6c64;--line:#e6d3bb;--accent:#b30000;--accent-dark:#8c0000;--accent-ink:#fff;--accent-soft:#ffe6cc;--good:#0b7a3b;--good-soft:#e3f4e3;--warn:#7a5200;--warn-soft:#fdf1d0;--bad:#a02020;--bad-soft:#fbe0e0;--head:"Bahnschrift","Arial Narrow",Oswald,sans-serif;--goldg:linear-gradient(90deg,#9c7630,#b99758,#d5b97f,#cdac66,#c7a14e,#b68e43,#a37b3a);font-family:Calibri,Carlito,"Segoe UI",system-ui,sans-serif}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--page:#150d0b;--surface:#201513;--surface-2:#2b1d1a;--ink:#fff3e6;--ink-2:#d9c3b3;--ink-3:#b09a8c;--line:#4a3029;--accent:#ff6b5e;--accent-dark:#6e0000;--accent-ink:#1a0000;--accent-soft:#3a1414;--good:#5ad25a;--good-soft:#15301a;--warn:#fab219;--warn-soft:#382c0c;--bad:#f08a8a;--bad-soft:#3b1a1a}}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--page);color:var(--ink);font-size:15px;line-height:1.4}
button,input,select,textarea{font:inherit;color:inherit}
.demo{background:var(--warn-soft);color:var(--warn);font-size:13px;padding:6px 12px;text-align:center}
.muted{color:var(--ink-3);font-size:13px}
.err{color:var(--bad);min-height:1.2em;margin:.3em 0}

/* вход */
.login{max-width:360px;margin:8vh auto;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:14px;text-align:center}
.login .logo{height:64px}
.login h1{font-family:var(--head);text-transform:uppercase;color:var(--accent-dark);margin:.3em 0 .6em}
.login label{display:block;text-align:left;font-size:13px;color:var(--ink-2);margin-bottom:10px}
.login input{display:block;width:100%;margin-top:4px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}

.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 14px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.btn.primary:hover{background:var(--accent-dark)}
.btn.good{background:var(--good);border-color:var(--good);color:#fff;font-weight:700}
.btn.bad{color:var(--bad);border-color:var(--bad)}
.btn.big{width:100%;padding:12px}
.btn.sm{padding:4px 10px;font-size:13px}

/* каркас: рейка слева + рабочая область */
.shell{display:flex;min-height:100vh}
.rail{width:76px;flex:none;background:var(--accent-dark);color:#ffe6cc;display:flex;flex-direction:column;align-items:stretch;padding:8px 0;position:sticky;top:0;height:100vh}
.rail-logo{height:40px;width:auto;margin:6px auto 12px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.rail button{position:relative;background:none;border:0;color:inherit;cursor:pointer;padding:9px 2px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;opacity:.78}
.rail button svg{width:24px;height:24px;fill:currentColor;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.rail button:hover{opacity:1;background:rgba(255,255,255,.08)}
.rail button.on{opacity:1;background:rgba(255,255,255,.16);box-shadow:inset 3px 0 #d5b97f}
.bdg{position:absolute;top:4px;right:12px;background:#ffd24a;color:#4a2b00;border-radius:99px;font-style:normal;font-size:11px;font-weight:700;padding:0 6px;min-width:18px;text-align:center}
.rail-end{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:6px}
.ava{width:34px;height:34px;border-radius:50%;background:#ffe6cc;color:var(--accent-dark);display:grid;place-items:center;font-weight:700}
.rail .out{font-size:11px;padding:4px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;gap:10px;align-items:center;padding:10px 16px;background:var(--surface);flex-wrap:wrap}
.top h1{font-family:var(--head);font-variation-settings:"wght" 700,"wdth" 75;text-transform:uppercase;color:var(--accent-dark);font-size:22px;margin:0 8px 0 0}
.top input[type=search]{flex:1;min-width:180px;max-width:420px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--page)}
.top select{padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.gold{height:4px;background:var(--goldg);-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 10px);mask-image:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 10px)}
.view{padding:14px 16px 40px;flex:1;min-width:0}

/* сводка и вкладки статусов */
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 14px;min-width:130px}
.stat b{display:block;font-size:20px;font-family:var(--head)}
.stat.bad b{color:var(--bad)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:12px;background:var(--surface)}
.seg button{border:0;background:none;padding:6px 14px;cursor:pointer}
.seg button.on{background:var(--accent);color:var(--accent-ink);font-weight:700}

/* воронка */
.board{display:flex;gap:10px;overflow-x:auto;padding-bottom:12px;align-items:flex-start}
.col{flex:0 0 250px;background:var(--surface-2);border-radius:10px;min-height:160px;border-top:4px solid var(--c,#999)}
.col.over{outline:2px dashed var(--accent)}
.col h3{margin:0;padding:8px 10px 2px;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2);display:flex;justify-content:space-between;gap:6px}
.col .sum{padding:0 10px 6px;font-size:12px;color:var(--ink-3)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;margin:6px;padding:8px 10px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.card:hover{border-color:var(--accent)}
.card.drag{opacity:.45}
.card .t{font-weight:700;font-size:14px;word-break:break-word}
.card .c{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.card .m{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:12.5px}
.card .a{font-weight:700}
.pill{display:inline-block;border-radius:99px;padding:1px 8px;font-size:12px;background:var(--surface-2);color:var(--ink-2)}
.pill.late{background:var(--bad-soft);color:var(--bad)}
.pill.today{background:var(--warn-soft);color:var(--warn)}
.pill.ok{background:var(--good-soft);color:var(--good)}
.pill.pool{background:var(--accent-soft);color:var(--accent-dark)}

/* таблицы и списки */
table.tb{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tb th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3);padding:8px 10px;background:var(--surface-2)}
.tb td{padding:8px 10px;border-top:1px solid var(--line);vertical-align:top}
.tb tr.row{cursor:pointer}
.tb tr.row:hover td{background:var(--accent-soft)}
.grp{font-family:var(--head);text-transform:uppercase;color:var(--ink-2);margin:16px 0 6px;font-size:14px}
.grp.late{color:var(--bad)}
.task{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:6px}
.task.done .tx{text-decoration:line-through;color:var(--ink-3)}
.task input{margin-top:4px;width:18px;height:18px;accent-color:var(--accent)}
.task .tx{flex:1}
.task a,.lnk{color:var(--accent-dark);cursor:pointer;text-decoration:underline}
.empty{padding:30px;text-align:center;color:var(--ink-3)}

/* карточка (модальное окно) */
.modal{position:fixed;inset:0;background:rgba(20,10,8,.55);z-index:20;display:flex;justify-content:center;align-items:flex-start;overflow:auto;padding:3vh 12px}
.sheet{background:var(--page);border-radius:14px;width:min(1040px,100%);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.sh-head{background:var(--surface);padding:12px 16px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--line)}
.sh-head h2{margin:0;flex:1;font-size:18px;word-break:break-word}
.sh-body{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:0}
.sh-left{padding:14px 16px;background:var(--surface);border-right:1px solid var(--line)}
.sh-right{padding:14px 16px;min-width:0}
@media(max-width:820px){.sh-body{grid-template-columns:1fr}.sh-left{border-right:0;border-bottom:1px solid var(--line)}.rail{width:58px}.rail button span{display:none}.col{flex-basis:230px}}
.fl{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:10px}
.fl input,.fl select,.fl textarea{display:block;width:100%;margin-top:3px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--page)}
.fl textarea{min-height:70px;resize:vertical}
.ro{padding:8px 10px;background:var(--surface-2);border-radius:8px;color:var(--ink-2);margin-top:3px}
.stages{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.stages button{border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:4px 8px;font-size:12.5px;cursor:pointer;border-bottom:3px solid var(--c)}
.stages button.on{background:var(--c);color:#fff;border-color:var(--c)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.feedbox{display:flex;gap:8px;margin-bottom:8px}
.feedbox textarea{flex:1;min-height:56px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);resize:vertical}
.ev{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.ev:last-child{border:0}
.ev i{flex:none;width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--ink-3)}
.ev.note i{background:var(--accent)}.ev.stage i{background:#2f6fb0}.ev.task i{background:var(--warn)}.ev.close i{background:var(--good)}
.ev .w{font-size:12px;color:var(--ink-3)}
.ev .x{white-space:pre-wrap;word-break:break-word}
.sub-h{font-family:var(--head);text-transform:uppercase;font-size:13px;color:var(--ink-2);margin:14px 0 6px;display:flex;justify-content:space-between;align-items:center}
.closebar{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.botbox{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:12px 14px;margin-bottom:14px}
.botcode{font-family:var(--head);font-size:34px;letter-spacing:.2em;color:var(--accent-dark)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--page);padding:10px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:40;max-width:90vw}
.toast.on{opacity:1}