:root{
  --bg:#0e1117; --panel:#161b24; --panel2:#1c2230; --line:#262e3d;
  --txt:#e6ebf2; --mut:#8b96a8; --acc:#5b8cff; --acc2:#7c5cff;
  --ok:#37c98a; --warn:#f0b93b; --bad:#ef5b6d; --teal:#2dd4bf; --amb:#f59e0b; --radius:14px;
}
*{box-sizing:border-box}
html{scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--txt);font-family:Outfit,system-ui,sans-serif;font-size:14px}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px}
a{color:var(--acc);text-decoration:none}
.hide{display:none!important}

/* ---- Login ---- */
#login{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:100}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
#login .card{width:340px}
#login h1{font-size:18px;margin:0 0 4px}
#login p{color:var(--mut);margin:0 0 20px;font-size:13px}
.fld{display:block;margin-bottom:12px}
.fld label{display:block;color:var(--mut);font-size:12px;margin-bottom:5px}
.fld input,.fld select,.fld textarea{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:10px 12px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--acc)}
.btn{background:var(--acc);color:#fff;border:none;border-radius:9px;padding:10px 16px;font-weight:600}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
.btn.sm{padding:6px 11px;font-size:13px}
.err{color:var(--bad);font-size:13px;min-height:18px;margin-top:4px}

/* ---- Layout ---- */
#app{display:flex;min-height:100vh}
#side{width:212px;background:var(--panel);border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;transition:width .16s}
#side.collapsed{width:60px;padding:16px 8px}
.brand{display:flex;align-items:center;gap:9px;padding:6px 8px 14px;font-weight:700;white-space:nowrap;overflow:hidden}
.brand .logo{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--acc),var(--acc2));flex:none}
#side.collapsed .brand span,#side.collapsed .nav b,#side.collapsed .mode-lab,#side.collapsed .side-foot{display:none}
/* круглая кнопка-сворачивание на краю панели */
.collapse-btn{position:absolute;top:20px;right:-13px;width:26px;height:26px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);color:var(--mut);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:6;font-size:15px;line-height:1}
.collapse-btn:hover{color:var(--txt);border-color:var(--acc)}
.nav{display:flex;align-items:center;gap:11px;padding:10px;border-radius:10px;color:var(--mut);font-weight:500;border:none;background:transparent;width:100%;text-align:left;white-space:nowrap;overflow:hidden}
.nav:hover{background:var(--panel2);color:var(--txt)}
.nav.on{background:var(--panel2);color:var(--txt)}
.nav .ic{width:18px;text-align:center;flex:none;font-size:15px}
#side.collapsed .nav{justify-content:center;padding:10px 0}
/* Счётчик новых заявок в меню. margin-left:auto — прижат к правому краю пункта;
   в свёрнутом сайдбаре подпись исчезает, и счётчик встаёт вплотную к иконке. */
.nav .invbadge{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:var(--bad);color:#fff;font-size:11px;font-weight:700}
#side.collapsed .nav .invbadge{margin-left:0;position:absolute;transform:translate(11px,-10px)}
#side.collapsed .nav{position:relative}
.side-foot{color:var(--mut);font-size:12px;padding:8px;line-height:1.5}
/* переключатель режима */
.mode-wrap{margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.mode-lab{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;margin:2px 4px 7px}
.mode-toggle{display:flex;gap:4px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:4px}
#side.collapsed .mode-toggle{flex-direction:column}
.mode-toggle button{flex:1;border:none;background:transparent;color:var(--mut);border-radius:7px;padding:7px 6px;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:5px}
.mode-toggle button.on{background:var(--acc);color:#fff}
.mode-toggle button.on.demo{background:var(--amb);color:#241a04}

main{flex:1;padding:22px 26px;max-width:100%;overflow-x:hidden}
.top{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.top h2{margin:0;font-size:20px;white-space:nowrap}
.spacer{flex:1}
.demo-badge{background:var(--amb);color:#241a04;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}
.hsearch{display:flex;gap:8px;align-items:center}
.hsearch input,.hsearch select{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:8px 11px}
.hsearch input{min-width:210px}
/* лента стадий-воронки — отдельно, с воздухом и правильным курсором */
.stagebar{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:16px}
.chip{background:var(--panel2);border:1px solid var(--line);color:var(--mut);border-radius:20px;padding:7px 15px;font-size:13px;cursor:pointer;user-select:none;transition:.1s;white-space:nowrap}
.chip:hover{border-color:var(--acc);color:var(--txt)}
.chip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.chipcount{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:7px;border-radius:20px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;vertical-align:middle}
.chip.on .chipcount{background:#fff;color:var(--bad)}
/* «Молчит N дней» в строке списка. Янтарь, а не красный, сознательно: красным
   в этой же ячейке уже помечены ДВЕ настоящие беды — залежавшийся холодный и
   чужой партнёр. Третий красный значок рядом перестал бы читаться, а молчание —
   это «пора написать», а не авария. */
.stalemark{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:1px 7px;border-radius:20px;background:rgba(240,185,59,.16);border:1px solid var(--warn);color:var(--warn);font-size:11px;font-weight:700;white-space:nowrap;vertical-align:middle}
.chip.stale-chip{margin-right:10px}
.chip.stale-chip.on{background:var(--warn);border-color:var(--warn);color:#171a20}
.chip.stale-chip.on .chipcount{background:#171a20;color:var(--warn)}
.coldbang{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:6px;border-radius:50%;background:var(--bad);color:#fff;font-size:12px;font-weight:800;vertical-align:middle}

/* ---- Blogger table ---- */
.btable{width:100%;table-layout:fixed;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
/* Колонок СЕМЬ (Блогер·Источник·Сегмент·Подписчики·Стадия·Рефералы·Оплаты).
   Было задано шесть ширин на 100% — седьмой доставалось 0%, и шапка наезжала сама на себя. */
.btable th:nth-child(1),.btable td:nth-child(1){width:26%}
.btable th:nth-child(2),.btable td:nth-child(2){width:13%}
.btable th:nth-child(3),.btable td:nth-child(3){width:14%}
.btable th:nth-child(4),.btable td:nth-child(4){width:14%}
.btable th:nth-child(5),.btable td:nth-child(5){width:15%}
.btable th:nth-child(6),.btable td:nth-child(6){width:9%}
.btable th:nth-child(7),.btable td:nth-child(7){width:9%}
.btable td{overflow:hidden;text-overflow:ellipsis}
.btable .bn,.btable .bh{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btable th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:600;padding:12px 16px;border-bottom:1px solid var(--line)}
.btable td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:14px}
.btable tr:last-child td{border-bottom:none}
.btable tbody tr{cursor:pointer;transition:background .1s}
.btable tbody tr:hover{background:var(--panel2)}
.btable .bn{font-weight:600}
.btable .bh{color:var(--mut);font-size:12px}
.pill{font-size:11px;padding:3px 9px;border-radius:20px;background:var(--panel2);color:var(--mut);border:1px solid var(--line)}
.pill.bot-pill{background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal);border-color:color-mix(in srgb,var(--teal) 40%,transparent)}
.stg{font-size:12px;padding:3px 10px;border-radius:20px;font-weight:600}
.empty{color:var(--mut);padding:40px;text-align:center}

/* ---- Drawer (half screen slide-out) ---- */
#scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40;opacity:0;pointer-events:none;transition:.15s}
#scrim.show{opacity:1;pointer-events:auto}
#drawer{position:fixed;top:0;right:0;height:100vh;width:50vw;min-width:420px;max-width:760px;background:var(--panel);border-left:1px solid var(--line);z-index:50;transform:translateX(101%);transition:transform .2s ease;overflow-y:auto;padding:24px}
#drawer.show{transform:none}
@media(max-width:720px){#drawer{width:100vw;min-width:0;padding:18px}}
/* header */
.dh{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.dh .av{width:52px;height:52px;border-radius:13px;background:linear-gradient(135deg,var(--acc),var(--acc2));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;color:#fff;flex:none}
.dh .nm{font-size:21px;font-weight:700}
.dh .nm a{color:#fff}
.dh .em{color:var(--mut);font-size:13px;margin-top:2px}
.dh .acts{margin-left:auto;display:flex;gap:8px}
.iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--mut);font-size:17px;display:flex;align-items:center;justify-content:center}
.iconbtn:hover{color:var(--txt);border-color:var(--acc)}
.dmeta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.dmeta .t{font-size:12px;padding:5px 12px;border-radius:20px;background:var(--panel2);border:1px solid var(--line);color:var(--mut)}
.dmeta .t.stage{font-weight:600}
.dmeta .t.days{font-weight:500}
.dmeta .t.days.stale{background:rgba(240,185,59,.16);border-color:var(--warn);color:var(--warn);font-weight:600}
.mhint{background:var(--panel2);border:1px dashed var(--line);border-radius:12px;padding:13px 15px;color:var(--mut);font-size:12px;margin-bottom:18px}
.btn.testgrant{width:100%;margin-bottom:11px;background:var(--teal);color:#04231a;font-weight:700}
.btn.testgrant:hover{filter:brightness(1.06)}
/* KPI tiles */
.dtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.dtile{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center}
.dtile .n{font-size:20px;font-weight:700}
.dtile .l{font-size:11px;color:var(--mut);margin-top:3px}
.dtile.good .n{color:var(--ok)}
.dtile.warn .n{color:var(--warn)}
.dtile.money .n{color:var(--teal)}
.dtiles.f5{grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:10px}
/* Четыре плитки — у менеджера: колонка «доход» ей не показывается (см. drawer.js,
   IS_OWNER). Без своей ширины пятая колонка осталась бы пустой дырой. */
.dtiles.f4{grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:10px}
.dtiles.f5 .dtile,.dtiles.f4 .dtile{padding:11px 6px}
.dtiles.f5 .dtile .n,.dtiles.f4 .dtile .n{font-size:18px}
.dtiles.f5 .dtile .l{font-size:10px}
@media(max-width:560px){.dtiles{grid-template-columns:repeat(2,1fr)}.dtiles.f5{grid-template-columns:repeat(3,1fr)}}
.dtiles.f5 .dtile{cursor:pointer;transition:border-color .15s,transform .1s}
.dtiles.f5 .dtile:hover{border-color:var(--acc)}
.dtiles.f5 .dtile:active{transform:scale(.97)}
.convhint{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--mut);cursor:pointer;user-select:none;margin-bottom:8px}
.convhint:hover{color:var(--txt)}
.convhint .chev{transition:transform .3s;font-size:10px}
.convhint.open .chev{transform:rotate(180deg)}
.convpanel{height:0;overflow:hidden}
.convpanel.open{margin-bottom:14px}
.convwrap{overflow:hidden}
.convinner{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:15px 15px 13px}
.cfun{display:flex;flex-direction:column}
.cfrow{display:flex;align-items:center;gap:11px;padding:2px 0}
.cflabel{width:92px;flex:none;text-align:right;font-size:12px;color:var(--mut)}
.cfbar{flex:1;height:20px;background:var(--panel);border-radius:6px;overflow:hidden}
.cfbar span{display:block;height:100%;border-radius:6px;transition:width .5s cubic-bezier(0.16,1,0.3,1)}
.cfval{width:52px;flex:none;font-size:14px;font-weight:700}
.cfconv{margin:1px 0 1px 103px;font-size:11px;color:var(--mut)}
.cfconv .cfa{color:var(--line2,#3a4150)}
.cfconv b{color:var(--teal);font-weight:700}
.cfconv.bn b{color:var(--amb)}
.cfmeta{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);font-size:12px;color:var(--mut);text-align:center}
.cfmeta b{color:var(--txt)}
.stepper2{display:flex;margin:4px 0 20px}
.step2{flex:1;position:relative;text-align:center;min-width:0}
.step2 .ln2{position:absolute;top:16px;right:50%;width:100%;height:2px;background:var(--line);z-index:0}
.step2 .sq{position:relative;z-index:1;width:34px;height:34px;border-radius:10px;margin:0 auto;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;background:var(--panel2);border:1.5px solid var(--line);color:var(--mut)}
.step2 .sl{font-size:9.5px;line-height:1.15;color:var(--mut);margin-top:7px;padding:0 3px}
/* stepper */
.stepper{display:flex;align-items:center;margin:4px 0 18px}
.step{display:flex;align-items:center;flex:1}
.step:last-child{flex:none}
.step .dt{width:30px;height:30px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);color:var(--mut);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:none}
.step.done .dt{background:var(--teal);border-color:var(--teal);color:#04231a}
.step.cur .dt{background:var(--amb);border-color:var(--amb);color:#241a04;box-shadow:0 0 0 4px rgba(240,185,59,.15)}
.step .ln{flex:1;height:2px;background:var(--line);margin:0 4px}
.step .ln.done{background:var(--teal)}
/* gate box */
.gatebox{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:15px;margin-bottom:12px}
.gt{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin-bottom:11px}
.greq{display:flex;align-items:center;gap:9px;font-size:13px;padding:5px 0}
.greq .mk{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.greq.ok .mk{background:var(--teal);color:#04231a}
.greq.no .mk{background:rgba(240,185,59,.2);color:var(--warn)}
.greq.no{color:var(--mut)}
.advance{width:100%;margin-top:12px;background:var(--teal);color:#04231a;border:none;border-radius:10px;padding:13px;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px}
.advance:hover{filter:brightness(1.06)}
.advance:disabled{background:var(--panel);color:var(--mut);cursor:not-allowed}
.archive{width:100%;background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:10px;padding:11px;font-size:13px;margin-bottom:12px}
.archive:hover{border-color:var(--bad);color:var(--bad)}
.archive.back:hover{border-color:var(--ok);color:var(--ok)}
.goback{width:100%;margin-top:10px;background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:10px;padding:10px;font-size:13px;cursor:pointer}
.goback:hover{border-color:var(--acc);color:var(--txt)}
.confetti-particle{position:absolute;left:0;top:0;width:7px;height:7px;animation:confetti-fly .9s cubic-bezier(0.16,1,0.3,1) forwards}
@keyframes confetti-fly{to{transform:translate(var(--tx),var(--ty)) rotate(var(--rot));opacity:0}}
/* sections */
.dsection{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:15px;margin-top:12px}
.st{display:flex;align-items:center;gap:8px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin-bottom:11px;font-weight:600}
.kv{display:grid;grid-template-columns:1fr auto;gap:7px 10px;font-size:13px}
.kv .k{color:var(--mut)}
.kv .v{text-align:right;font-weight:500}
.kv .v.good{color:var(--ok)}
.kv .v.bad{color:var(--bad)}
.kv .v.warn{color:var(--warn)}
.contactbtn{flex:1;text-align:center;background:var(--teal);color:#04231a;border-radius:9px;padding:10px;font-weight:600;font-size:13px}
.contactbtn.alt{background:var(--panel);border:1px solid var(--line);color:var(--txt)}
.roi-badge{font-size:26px}
.dctrl{display:flex;align-items:center;gap:9px;margin-bottom:11px;flex-wrap:wrap}
.ctrl-lab{font-size:12px;color:var(--mut)}
.verdict{text-align:center;font-size:12px;font-weight:600;margin-top:6px}
.verdict.up{color:var(--teal)}.verdict.down{color:var(--amb)}
.src{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--mut);margin-top:9px}
.fbk{font-size:13px;line-height:1.5;font-style:italic;color:var(--txt)}
.list .it{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:7px;font-size:13px;display:flex;align-items:flex-start;gap:8px}
.it .itbody{flex:1;min-width:0;word-break:break-word}
.it .sub{color:var(--mut);font-size:11px;margin-top:3px}
.delx{flex:none;width:24px;height:24px;border-radius:7px;background:transparent;border:1px solid transparent;color:var(--mut);font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;opacity:.55;transition:.12s}
.delx:hover{opacity:1;color:var(--bad);border-color:var(--bad);background:rgba(239,91,109,.1)}
.rowin{display:flex;gap:7px;margin-top:8px}
.rowin input,.rowin textarea,.rowin select{flex:1;background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:8px 10px}
.task{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line)}
.task>span{flex:1;min-width:0;word-break:break-word}
.task input{width:16px;height:16px;accent-color:var(--acc);flex:none}
.task.done span{text-decoration:line-through;color:var(--mut)}
.muted{color:var(--mut);font-size:13px}

/* ---- Modal ---- */
#modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;display:none;align-items:center;justify-content:center}
#modal.show{display:flex}
#modal .card{width:400px;max-height:90vh;overflow:auto}
#modal h3{margin:0 0 16px;font-size:17px}
.mrow{display:flex;gap:10px}
.mrow .fld{flex:1}
.mfoot{display:flex;gap:9px;justify-content:flex-end;margin-top:8px}
.btn.danger{background:var(--bad);color:#fff}
.btn.danger:hover{filter:brightness(1.08)}
/* ---- Confirm dialog ---- */
#confirm{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:80;display:none;align-items:center;justify-content:center;padding:20px}
#confirm.show{display:flex}
.cfmbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px 20px;width:360px;max-width:94vw;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.cfmicon{width:52px;height:52px;margin:0 auto 14px;border-radius:14px;background:rgba(239,91,109,.14);display:flex;align-items:center;justify-content:center;font-size:24px}
.cfmtitle{font-size:18px;font-weight:700;margin-bottom:6px}
.cfmtext{font-size:13px;color:var(--mut);line-height:1.45;margin-bottom:20px;word-break:break-word}
.cfmfoot{display:flex;gap:10px}
.cfmfoot .btn{flex:1;padding:11px}

/* ---- Infographics ---- */
.info-gate{text-align:center;padding:30px;background:var(--panel);border:1px dashed var(--line);border-radius:var(--radius);color:var(--mut)}
.infogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px}
.chartcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px;cursor:pointer;transition:.12s}
.chartcard:hover{border-color:var(--acc)}
.ch{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.ct{font-weight:600;font-size:14px}
.cs{color:var(--mut);font-size:12px}
.chartwrap{margin:6px 0}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--mut);margin-top:4px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}
#cmodal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70;display:none;align-items:center;justify-content:center;padding:20px}
#cmodal.show{display:flex}
#cbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;width:560px;max-width:96vw;max-height:92vh;overflow:auto}
.cbh{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.cbh .close{background:none;border:none;color:var(--mut);font-size:20px}
.ctrls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.ctrl-lab{font-size:12px;color:var(--mut)}
.seg-ctrl{display:inline-flex;gap:3px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:3px}
.seg-ctrl button{border:none;background:transparent;color:var(--mut);border-radius:6px;padding:5px 10px;font-size:12px}
.seg-ctrl button.on{background:var(--acc);color:#fff}
.insight{display:flex;gap:9px;margin-top:12px;padding:11px;background:var(--panel2);border-radius:10px;font-size:12.5px;color:var(--txt)}
.insight .ic{width:16px;height:16px;flex:none;stroke:var(--amb);fill:none;stroke-width:2}
svg.ic{stroke:currentColor;fill:none;stroke-width:2}

/* ---- Tasks ---- */
.taskbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.taskbar .pct{font-weight:700;font-size:13px;white-space:nowrap}
.pb{flex:1;height:9px;background:var(--panel2);border-radius:6px;overflow:hidden}
.pb i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--acc))}
.taskgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.taskcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.taskcard .th{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.taskcard .nm{font-weight:600}
.taskcard .dy{font-size:11px;color:var(--mut)}
.titem{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:13px;cursor:pointer;color:var(--txt)}
.titem .cb{width:18px;height:18px;border-radius:5px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--teal);flex:none}
.titem.done{color:var(--mut)}
.titem.done .cb{background:var(--teal);color:#04231a;border-color:var(--teal)}

/* ---- Templates ---- */
.tplnote{display:flex;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:12.5px;color:var(--txt)}
.tplnote .ic{width:18px;height:18px;flex:none;stroke:var(--acc)}
.tplgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.tplcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px}
.tplcard.wide{grid-column:1/-1}
.tplcard .sh{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:11px}
.tplcard .dot{width:9px;height:9px;border-radius:50%}
.tplvar{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px;margin-bottom:9px}
.vt{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.vx{font-size:13px;line-height:1.5;white-space:pre-wrap}
.copybtn{margin-top:9px;display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:6px 11px;font-size:12px}
.copybtn:hover{border-color:var(--acc)}
.copybtn.done{border-color:var(--ok);color:var(--ok)}
.dodont{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:12.5px;line-height:1.7}
.dodont .h{font-weight:700;margin-bottom:6px}
.dodont .teal{color:var(--teal)}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ok);color:#04231a;padding:9px 16px;border-radius:9px;font-weight:600;z-index:200;opacity:0;pointer-events:none;transition:.2s}
.toast.show{opacity:1}
@media(max-width:640px){.hsearch input{min-width:130px}}


/* ---- Сегодня: очередь дня ---- */
/* Секции — карточки в две колонки на десктопе, в одну на узком экране.
   Пустая секция не прячется, а гаснет: «здесь пусто» — тоже ответ, и человек
   должен видеть, что очередь проверена, а не что экран недогрузился. */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.tcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 16px 8px;display:flex;flex-direction:column}
.tcard.quiet{opacity:.62}
.th{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.th .ti{font-size:18px;line-height:1}
.th .tt{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0}
.th .tt b{font-size:15px;font-weight:650}
.th .tn{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:20px;background:var(--panel2);color:var(--mut);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.tcard:not(.quiet) .th .tn{background:var(--warn);color:#171a20}
.tgo{background:none;border:none;color:var(--acc);font-size:12.5px;cursor:pointer;padding:4px 0;white-space:nowrap}
.tgo:hover{text-decoration:underline}
.thint{color:var(--mut);font-size:12.5px;line-height:1.45;margin:0 0 10px}
.tbody{display:flex;flex-direction:column}
.trow{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.trow[role=button]{cursor:pointer}
.trow[role=button]:hover{background:var(--panel2);margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:8px;border-top-color:transparent}
.trow[role=button]:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:8px}
.tmain{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.tmain b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmain span{color:var(--mut);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmark{flex:none;padding:2px 8px;border-radius:20px;background:var(--panel2);color:var(--mut);font-size:11px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.tmark.warn{background:rgba(240,185,59,.16);border:1px solid var(--warn);color:var(--warn)}
.tempty{color:var(--mut);font-size:12.5px;padding:9px 0;border-top:1px solid var(--line)}
.tmore{color:var(--mut);font-size:12px;padding:8px 0 4px}
/* Бейдж в сайдбаре — тот же язык, что у счётчика заявок рядом. */
.nav .todaybadge{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:var(--warn);color:#171a20;font-size:11px;font-weight:700}

/* ---- «Моя работа»: свой результат сотрудницы (my-report.js) ---- */
/* Три карточки в ряд на десктопе, в столбик на узком экране. Сетка своя, а не
   общая карточная: здесь ровно три блока и им нужна равная ширина. */
.mr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.mr-card{padding:20px}
.mr-h{font-size:13px;color:var(--mut);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.mr-total{margin-left:auto;color:var(--txt);font-size:16px}
.mr-flist{display:flex;flex-direction:column;gap:9px}
.mr-frow{display:flex;align-items:center;gap:9px}
.mr-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.mr-fname{color:var(--mut);font-size:13px}
.mr-fnum{margin-left:auto;font-variant-numeric:tabular-nums}
/* Холодные — «отложено», а не ступень пути: приглушены и отбиты линией. */
.mr-cold{opacity:.6;padding-top:9px;border-top:1px solid var(--line);margin-top:3px}
.mr-big{font-size:30px;font-weight:600;line-height:1.1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
/* Оговорка про период стоит вплотную к цифре и уезжает вместе с ней. */
.mr-scope{font-size:12px;font-weight:400;color:var(--mut)}
.mr-sub{color:var(--mut);font-size:12px;margin-top:6px}
.mr-note{margin-top:12px;font-size:12px;color:var(--warn);line-height:1.5}
.mr-split{display:flex;gap:20px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.mr-split>div{flex:1}
.mr-lab{color:var(--mut);font-size:12px;margin-bottom:3px}
.mr-split b{font-size:17px;font-variant-numeric:tabular-nums}