:root{--green:#00b86b;--green-dark:#009b59;--orange:#ffb100;--blue:#1698ed;--bg:#f4f6f8;--panel:#fff;--text:#202734;--muted:#636c78;--line:#e4e8ec;--sidebar:#20252d;--sidebar2:#2a3039}*{box-sizing:border-box}body{margin:0;font-family:"GT Eesti Pro Display","Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text);font-size:13px}button,input,select,textarea{font:inherit}button{cursor:pointer}.app{display:grid;grid-template-columns:220px 1fr;min-height:100vh}.sidebar{background:var(--sidebar);color:#fff;padding:14px 10px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:9px;padding:8px 8px 16px;border-bottom:1px solid #343b46;margin-bottom:10px}.brand-logo{width:34px;height:34px;border-radius:8px;background:var(--orange);display:grid;place-items:center;font-weight:900;color:#20252d}.brand b{font-size:14px}.brand small{display:block;color:#aeb6c2;font-size:11px;margin-top:2px}.nav{display:grid;gap:3px}.nav button{width:100%;border:0;background:transparent;color:#c7ced8;text-align:left;padding:9px 10px;border-radius:8px}.nav button:hover,.nav button.active{background:var(--sidebar2);color:#fff}.nav .sep{height:1px;background:#343b46;margin:8px 6px}.userbox{position:absolute;left:10px;right:10px;bottom:12px;border-top:1px solid #343b46;padding-top:10px}.userbox .name{font-weight:700}.userbox .role{font-size:11px;color:#9ea8b4}.main{min-width:0}.topbar{height:54px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 18px;position:sticky;top:0;z-index:5}.topbar h1{font-size:17px;margin:0}.content{padding:16px 18px 28px;max-width:1500px}.page{display:none}.page.active{display:block}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.toolbar .grow{flex:1}.btn{border:1px solid var(--line);background:#fff;color:var(--text);border-radius:8px;padding:8px 11px;font-weight:650}.btn.primary{background:var(--green);border-color:var(--green);color:#fff}.btn.small{padding:5px 8px;font-size:12px}.stats{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px;margin-bottom:14px}.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px}.stat .label{font-size:11px;color:var(--muted);margin-bottom:5px}.stat .value{font-size:24px;font-weight:800}.stat.alert .value{color:#c47700}.stat.good .value{color:var(--green-dark)}.panel{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}.panel-head{padding:11px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px}
/* v0.9.120: в .panel-head текст-описание слева не был ограничен по
   ширине — при длинном тексте (например, у «Роли»/«API доступ») он
   отжимал кнопку справа, и её подпись переносилась на две строки
   («Создать» / «роль»). Теперь описание сжимается и переносится само,
   а кнопка держит свою ширину и не переносится. */
.panel-head>div:first-child{min-width:0}
.panel-head .btn{flex-shrink:0;white-space:nowrap}.panel-head h2{font-size:14px;margin:0}.panel-body{padding:12px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:1100px}th,td{padding:8px 9px;border-bottom:1px solid #edf0f2;text-align:left;white-space:nowrap}th{font-size:11px;color:#76808d;background:#fafbfc}tr:hover td{background:#fbfcfd}.site{color:var(--blue);text-decoration:none}.muted{color:var(--muted)}.status{display:inline-flex;padding:4px 7px;border-radius:999px;background:#f1f4f6;font-size:11px}.status.sale{background:#e7f8f0;color:#00854c}.status.lost{background:#fceeee;color:#b73535}.status.wait{background:#fff4da;color:#966900}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.field{display:grid;gap:5px}.field.full{grid-column:1/-1}.field label{font-size:11px;font-weight:700;color:#6b7480}.field input,.field select,.field textarea{width:100%;border:1px solid #dfe4e8;border-radius:8px;padding:8px 9px;background:#fff}.field textarea{min-height:78px;resize:vertical}.form-error{display:block;font-size:12px;color:#c23b3b;font-weight:650;min-height:16px}.drawer{position:fixed;top:0;right:-1400px;width:min(1400px,96vw);height:100vh;background:#fff;box-shadow:-12px 0 40px rgba(0,0,0,.14);z-index:20;transition:.2s;display:flex;flex-direction:column}.drawer.open{right:0}.drawer-head{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.drawer-body{padding:14px 16px;overflow:auto;flex:1}.drawer h2{font-size:18px;margin:0}.two-col{display:grid;grid-template-columns:280px 1fr;gap:14px}.card{border:1px solid var(--line);border-radius:9px;padding:11px}.card h3{font-size:13px;margin:0 0 9px}.timeline{display:grid}.event{display:grid;grid-template-columns:14px 1fr;gap:9px;padding-bottom:12px}.dot{width:10px;height:10px;border-radius:50%;background:var(--orange);margin-top:5px}.event .box{border-left:2px solid #edf0f2;padding-left:10px}.event .meta{font-size:11px;color:var(--muted);margin-bottom:3px}.event .note{white-space:pre-wrap}.funnel{display:grid;gap:7px}.frow{display:grid;grid-template-columns:180px 1fr 42px;gap:8px;align-items:center}.bar{height:20px;background:#eef1f4;border-radius:5px;overflow:hidden}.bar span{display:block;height:100%;background:var(--green);min-width:2px}.manager-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}.manager-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px}.manager-card h3{margin:0 0 3px;font-size:14px}.manager-card .email{font-size:11px;color:var(--muted);margin-bottom:10px}.modalback{display:none;position:fixed;inset:0;background:rgba(19,23,29,.36);z-index:30;align-items:center;justify-content:center}.modalback.open{display:flex}.modal{width:min(620px,94vw);max-height:90vh;overflow:auto;background:#fff;border-radius:12px;padding:16px;box-shadow:0 20px 70px rgba(0,0,0,.2)}.modal h2{margin:0 0 12px;font-size:17px}.steps{display:flex;gap:6px;margin-bottom:12px}.step{padding:6px 9px;border-radius:999px;background:#eef1f4;color:#6d7683;font-size:11px}.step.active{background:#e8f8f0;color:#008a50;font-weight:800}.worklist{display:grid;gap:6px;max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:7px}.work{display:flex;gap:7px;align-items:center}.empty{padding:30px;text-align:center;color:var(--muted)}@media(max-width:900px){.app{grid-template-columns:68px 1fr}.brand div:last-child,.nav button span,.userbox .name,.userbox .role{display:none}.sidebar{padding:10px 7px}.brand{justify-content:center;padding:5px 0 12px}.nav button{text-align:center}.two-col{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}

.official-logo{width:132px;max-height:42px;object-fit:contain;object-position:left center;display:block}

/* v0.2 UI fixes */
.brand{background:#fff;border-radius:10px;padding:9px 10px;margin:0 0 12px;border-bottom:0;min-height:58px}
.brand .official-logo{width:150px;max-width:100%;max-height:44px;object-fit:contain;object-position:left center}
.brand small{color:#5f6976}
.worklist{display:flex;flex-direction:column;gap:0;max-height:330px;padding:0;overflow-y:auto;background:#fff}
.work{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:8px 10px;border-bottom:1px solid #edf0f2;line-height:1.25;font-weight:500;color:var(--text);cursor:pointer}
.work:last-child{border-bottom:0}.work:hover{background:#f7faf9}
.work input[type="checkbox"]{width:16px!important;height:16px!important;min-width:16px;flex:0 0 16px;margin:0;accent-color:var(--green)}
.work span{display:block;flex:1;white-space:normal;text-align:left}
.client-picker-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}.client-picker-row .field{min-width:0}
.modal.modal-wide{width:min(760px,96vw)}.form-help{font-size:11px;color:var(--muted);margin-top:4px}
.modal.task-modal-wide{width:min(1300px,97vw)}
.validation-error{display:none;background:#fff0f0;color:#b73535;border:1px solid #f1caca;border-radius:8px;padding:8px 10px;margin-bottom:10px}.validation-error.show{display:block}
.top-client-button{display:none}body[data-current-page="clients"] .top-client-button{display:inline-flex}
@media(max-width:680px){.client-picker-row{grid-template-columns:1fr}.modal.modal-wide{width:96vw}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}}

/* v0.3 fixes */
#newClientModal{z-index:60}
#proposalModal{z-index:40}
#proposalModal.behind-client{pointer-events:none}
.brand{background:transparent!important;padding:8px 4px 16px!important;border-radius:0!important}
.brand .official-logo{width:205px;max-width:100%;height:auto;max-height:58px;object-fit:contain;object-position:left center}
.brand small{display:none}
.tariff-hidden{display:none!important}
.tariff-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tariff-card{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 11px;text-align:left;min-height:61px;display:flex;flex-direction:column;justify-content:center;gap:3px;color:var(--text)}
.tariff-card b{font-size:13px}.tariff-card span{font-size:11px;color:var(--muted)}
.tariff-card:hover{border-color:#8ed9b8;background:#f8fffb}
.tariff-card.selected{border:2px solid var(--green);background:#effbf6;padding:9px 10px}
.tariff-card.selected b{color:var(--green-dark)}
.proposal-price-row{display:grid;grid-template-columns:minmax(180px,280px) 1fr}
@media(max-width:720px){.tariff-cards{grid-template-columns:repeat(2,1fr)}.proposal-price-row{grid-template-columns:1fr}}

/* ===== Segment SEO decorative layer v0.5 ===== */
body{position:relative;overflow-x:hidden;background:radial-gradient(circle at 92% 6%,rgba(0,184,107,.08),transparent 22%),radial-gradient(circle at 74% 96%,rgba(255,177,0,.08),transparent 24%),var(--bg)}
body:before{content:"";position:fixed;width:240px;height:240px;border:42px solid rgba(0,184,107,.035);border-radius:50%;right:-120px;top:140px;pointer-events:none;z-index:0}
body:after{content:"";position:fixed;width:160px;height:160px;border:28px solid rgba(255,177,0,.035);border-radius:36px;transform:rotate(28deg);left:180px;bottom:-90px;pointer-events:none;z-index:0}
.main,.sidebar,.drawer,.modalback{position:relative;z-index:1}
.sidebar{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 20%),var(--sidebar);overflow:hidden}
.sidebar:before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(0,184,107,.28),rgba(0,184,107,0) 68%);top:-62px;right:-65px;pointer-events:none}
.sidebar:after{content:"";position:absolute;width:110px;height:110px;border-radius:26px;background:linear-gradient(135deg,rgba(255,177,0,.14),rgba(255,177,0,0));transform:rotate(24deg);bottom:86px;left:-68px;pointer-events:none}
.brand{position:relative;z-index:2}.brand:after{content:"";position:absolute;left:8px;right:8px;bottom:7px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--orange),transparent 90%);opacity:.85}
.nav button{position:relative;overflow:hidden}.nav button.active:before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 4px 4px 0;background:linear-gradient(var(--green),var(--orange))}.nav button:not(.nav-caret):hover:after{content:"";position:absolute;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.035);right:-24px;top:-22px}
/* v0.9.139: тот самый "квадрат-обводка" у стрелки (.nav-caret) при наведении
   вернулся — но уже не через background (те 3 правила из v0.9.135 давно
   :not(.nav-caret)), а через декоративный ::after-круг (60×60px, полупрозрачно-
   белый, для "свечения" при наведении на обычные пункты меню) у общего
   правила ".nav button:hover:after" — .nav-caret тоже обычная <button>, значит
   тоже matched, и у неё, в отличие от крупных пунктов меню, эта абсолютно
   спозиционированная окружность (right:-24px;top:-22px) визуально перекрывает
   почти всю маленькую (30px) кнопку стрелки светлым овалом. Добавили
   :not(.nav-caret) и сюда — то же лекарство, что и раньше, просто для
   другого CSS-механизма (псевдоэлемент, а не background), поэтому предыдущая
   проверка через getComputedStyle().backgroundColor его не поймала. */
.topbar{position:sticky;overflow:hidden}.topbar:after{content:"";position:absolute;left:0;bottom:0;width:220px;height:2px;background:linear-gradient(90deg,var(--green),var(--orange),transparent)}.topbar:before{content:"";position:absolute;width:90px;height:90px;border-radius:50%;border:18px solid rgba(0,184,107,.04);right:140px;top:-55px;pointer-events:none}
.panel-head h2,.drawer h2,.modal h2,#title{position:relative}.panel-head h2:after,.modal h2:after{content:"";display:inline-block;width:34px;height:4px;margin-left:9px;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--orange));vertical-align:middle;opacity:.9}
.panel,.card,.manager-card,.stat{position:relative;box-shadow:0 6px 24px rgba(25,37,31,.035)}.panel:before,.manager-card:before,.stat:before{content:"";position:absolute;left:0;top:0;width:54px;height:3px;border-radius:10px 0 6px 0;background:linear-gradient(90deg,var(--green),var(--orange))}
.stat{overflow:hidden}.stat:after{content:"";position:absolute;width:64px;height:64px;border-radius:50%;border:12px solid rgba(0,184,107,.04);right:-26px;bottom:-26px}.stat.alert:after{border-color:rgba(255,177,0,.07)}.stat.good:after{border-color:rgba(0,184,107,.08)}
table tbody tr{transition:.15s ease}table tbody tr:hover{transform:translateX(2px)}table tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--green)}th{background:linear-gradient(180deg,#fbfcfd,#f7f9fa)}.status{border:1px solid rgba(32,39,52,.05);box-shadow:0 1px 0 rgba(255,255,255,.8) inset}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:rgba(0,184,107,.58);box-shadow:0 0 0 3px rgba(0,184,107,.08)}
.btn.primary{position:relative;overflow:hidden;box-shadow:0 5px 14px rgba(0,184,107,.16)}.btn.primary:after{content:"";position:absolute;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.11);right:-22px;top:-22px}.btn.primary:hover{transform:translateY(-1px)}.btn{transition:.15s ease}
.modal{position:relative;overflow-y:auto;overflow-x:hidden;border:1px solid var(--line)}.modal:before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(0,184,107,.09),rgba(0,184,107,0) 70%);right:-74px;top:-74px;pointer-events:none}.modal:after{content:"";position:absolute;width:90px;height:90px;border:18px solid rgba(255,177,0,.05);border-radius:24px;transform:rotate(24deg);left:-55px;bottom:-50px;pointer-events:none}.modal>*{position:relative;z-index:1}
.steps{position:relative}.steps:before{content:"";position:absolute;left:18px;right:18px;top:50%;height:1px;background:linear-gradient(90deg,rgba(0,184,107,.25),rgba(255,177,0,.22));z-index:0}.step{position:relative;z-index:1;border:1px solid rgba(0,184,107,.08)}
.worklist{background:linear-gradient(180deg,rgba(0,184,107,.018),rgba(255,255,255,.7))}.work{position:relative;padding:7px 9px;border-radius:7px;transition:.12s ease}.work:hover{background:rgba(0,184,107,.045)}.work input{accent-color:var(--green)}
.drawer{border-left:1px solid rgba(0,184,107,.14)}.drawer-head{position:relative;overflow:hidden}.drawer-head:after{content:"";position:absolute;left:16px;bottom:0;width:90px;height:3px;background:linear-gradient(90deg,var(--green),var(--orange));border-radius:999px}.event .dot{box-shadow:0 0 0 4px rgba(255,177,0,.10)}


/* ===== v0.5.1 functional positioning fix ===== */

/* Decorative elements must never change the functional positioning model. */
.main{
  position:relative;
  z-index:1;
}

.sidebar{
  position:sticky !important;
  top:0;
  z-index:10;
}

.topbar{
  position:sticky !important;
  top:0;
  z-index:15;
}

.drawer{
  position:fixed !important;
  z-index:70 !important;
}
/* v0.9.82: клик по затемнённой области вокруг раскрывашки должен закрывать
   её — раньше единственным способом закрыть было нажать «Закрыть» явно. */
.drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(19,23,29,.36);z-index:69}
.drawer-backdrop.open{display:block}

.modalback{
  position:fixed !important;
  inset:0 !important;
  z-index:50 !important;
}

#proposalModal{
  z-index:60 !important;
}

#newClientModal{
  z-index:80 !important;
}

#managerModal{
  z-index:80 !important;
}

/* Эти модалки могут открываться поверх рабочего пространства SEO-проекта
   (.drawer, z-index:70), поэтому им нужен более высокий z-index. */
#seoTaskModal,
#articleModal,
#standardTasksModal,
#transferToSeoModal{
  z-index:80 !important;
}

#proposalResultModal{
  z-index:90 !important;
}

/* Keep the inactive proposal behind the client form without hiding the client form. */
#proposalModal.behind-client{
  pointer-events:none;
}

/* Decorative pseudo-elements can never block a click. */
.topbar:before,.topbar:after,
.sidebar:before,.sidebar:after,
.brand:after,
.nav button:before,.nav button:after,
.panel:before,.manager-card:before,.stat:before,.stat:after,
.panel-head h2:after,.modal h2:after,
.btn.primary:after,
.modal:before,.modal:after,
.steps:before,
.drawer-head:after,
body:before,body:after{
  pointer-events:none !important;
}

/* Buttons must remain above decorative layers. */
.btn,.nav button{
  position:relative;
  z-index:2;
  pointer-events:auto !important;
}

/* Modal children remain interactive. */
.modal > *{
  position:relative;
  z-index:2;
}

/* The Clients page already has its own + Client button.
   Hide the duplicate toolbar button only on that page for a cleaner interface. */
body[data-current-page="clients"] .top-client-button{
  display:none;
}


/* ===== v0.6 Bitrix-inspired Segment SEO layout ===== */
:root{
 --brand-green:#00b86b;
 --brand-green-2:#00a85d;
 --brand-green-dark:#008e50;
 --brand-orange:#ffb100;
 --brand-yellow:#ffd258;
 --kanban-blue:#2aa7ff;
 --kanban-yellow:#f7c617;
 --kanban-green:#4fc96b;
 --kanban-teal:#16b9a5;
 --kanban-purple:#8a5cf6;
 --kanban-gray:#a7afb8;
}
body{background:#edf3f1}
.app{grid-template-columns:190px 1fr}
.sidebar{
 background:
   radial-gradient(circle at 20% 100%,rgba(255,177,0,.12),transparent 26%),
   linear-gradient(180deg,#0ca66a 0%,#0b8e61 58%,#087754 100%) !important;
 border-right:1px solid rgba(255,255,255,.12);
}
.brand{border-bottom-color:rgba(255,255,255,.18)}
.brand small,.userbox .role,.userbox a{color:rgba(255,255,255,.78)!important}
.nav button{color:#f1fff8;font-weight:650}
.nav button:hover,.nav button.active{background:rgba(255,255,255,.14)}
.nav .sep{background:rgba(255,255,255,.18)}
.userbox{border-top-color:rgba(255,255,255,.18)}
.topbar{
 height:58px;
 color:#fff;
 background:
   linear-gradient(100deg,rgba(255,255,255,.06),transparent 32%),
   linear-gradient(90deg,#119f70,#0a8e69,#128f64);
 border:0;
}
.topbar h1{color:#fff}
.topbar:after{display:none}
.topbar .btn{border-color:rgba(255,255,255,.25)}
.topbar .btn.primary{background:#fff;color:#07895b;border-color:#fff;box-shadow:none}
.content{padding:14px;max-width:none}
.workspace-shell{
 display:grid;
 grid-template-columns:minmax(0,1fr) 260px;
 gap:12px;
 align-items:start;
}
.workspace-main{min-width:0}
.activity-panel{
 background:#fff;
 border:1px solid var(--line);
 border-radius:10px;
 overflow:hidden;
 position:sticky;
 top:72px;
}
.activity-head{padding:12px 13px;border-bottom:1px solid var(--line);font-weight:800}
.activity-list{max-height:calc(100vh - 120px);overflow:auto}
.activity-item{padding:11px 13px;border-bottom:1px solid #edf1ef}
.activity-item:last-child{border-bottom:0}
.activity-item .atype{font-weight:800;font-size:12px}
.activity-item .acompany{margin-top:3px}
.activity-item .atime{font-size:11px;color:var(--muted);margin-top:3px}

.crm-toolbar{
 display:flex;gap:8px;align-items:center;flex-wrap:wrap;
 margin-bottom:10px;
}
.crm-toolbar .grow{flex:1}
.view-tabs{display:flex;gap:4px}
.view-tabs button{
 border:0;background:transparent;padding:8px 10px;border-radius:7px;color:#56616d;font-weight:700
}
.view-tabs button.active{background:#fff;color:#078e5f;box-shadow:0 1px 5px rgba(0,0,0,.07)}

/* v0.9.48 — SEO-проекты: своя таблица (Группа/Статус/Команда/Клиент/Задачи) */
.col-settings-wrap{position:relative}
.col-settings-wrap .theme-settings-btn{border-color:var(--line);color:#56616d}
.col-settings-popover{right:0;left:auto;width:220px}
.col-toggle-list{display:grid;gap:2px}
.col-toggle-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px;color:#3b4652}
.col-toggle-label{flex:1}
.col-reorder-btns{display:flex;flex-direction:column;gap:1px;flex:none}
.col-reorder-btn{width:16px;height:13px;line-height:1;padding:0;border:none;background:transparent;color:#8b96a1;font-size:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:3px}
.col-reorder-btn:hover:not(:disabled){background:#eef1f4;color:#3b4652}
.col-reorder-btn:disabled{opacity:.25;cursor:default}
.toggle-switch{position:relative;display:inline-block;width:34px;height:19px;flex:none}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-switch .slider{position:absolute;inset:0;background:#d7dde1;border-radius:999px;cursor:pointer;transition:.15s}
.toggle-switch .slider:before{content:"";position:absolute;width:15px;height:15px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.toggle-switch input:checked+.slider{background:#2f80ed}
.toggle-switch input:checked+.slider:before{transform:translateX(15px)}
.project-group-badge{display:inline-flex;padding:4px 8px;border-radius:7px;background:#eef1f4;color:#43505c;font-size:11px;font-weight:700;white-space:nowrap}
.status.active-project{background:#e7f8f0;color:#00854c}
.status.archived-project{background:#eef1f2;color:#6d7683}
.team-avatars{display:flex;align-items:center;cursor:pointer}
.team-avatars .avatar-online-wrap{margin-left:-7px}
.team-avatars .avatar-online-wrap:first-child{margin-left:0}
.team-avatars .avatar-wrap{border:2px solid #fff}
.team-avatars-empty{color:var(--muted);cursor:pointer}
.client-team-cell{cursor:pointer}
.client-group-cell{cursor:pointer}
/* v0.9.89: точка онлайн-статуса на аватаре сотрудника — см. ниже. */
/* v0.9.89: точка онлайн-статуса на аватаре сотрудника в команде проекта —
   зелёная, если сотрудник был активен в CRM за последние 5 минут (см.
   ONLINE_THRESHOLD_SECONDS на бэкенде), иначе красная. Отдельная обёртка
   (не .avatar-wrap самого аватара) — у него overflow:hidden для круглой
   картинки, точка на нём просто обрежется по краю. */
.avatar-online-wrap{position:relative;display:inline-block;vertical-align:middle;line-height:0}
.avatar-online-dot{position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;border:2px solid #fff;background:#b73535}
.avatar-online-dot.online{background:#1fb15e}
/* position:fixed + добавляется в document.body (см. toggleInlineClientTeam) —
   иначе попап обрезается overflow:auto у обёртки таблицы (.table-wrap). */
.team-edit-popover{display:none;position:fixed;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 10px 30px rgba(0,0,0,.14);z-index:50;min-width:220px;max-width:260px;padding:8px}
.team-edit-popover.open{display:block}
.team-edit-popover .team-edit-list{max-height:220px}
.team-edit-popover-row{display:flex;align-items:center;gap:8px;font-size:12px;padding:5px 4px;border-radius:6px;cursor:pointer}
.team-edit-popover-row:hover{background:#f1f4f6}
.team-edit-popover-row input{width:15px;height:15px;flex:none}
.tasks-progress{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:12px}
.tasks-progress .tp-dot{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:10px;color:#fff;background:#c7d3d0}
.tasks-progress.done .tp-dot{background:#00a86b}
.tasks-progress.partial .tp-dot{background:#f2b705;color:#202734}
.workload-bar-wrap{display:inline-block;width:110px;height:8px;border-radius:5px;background:#e7ebe9;overflow:hidden;vertical-align:middle;margin-right:6px}
.workload-bar{height:100%;border-radius:5px;background:#00a86b}
.workload-bar.warn{background:#f2b705}
.workload-bar.over{background:#c0392b}
.view-tabs button.hidden-tab{display:none}
.team-edit-list{display:grid;gap:2px;max-height:180px;overflow:auto;margin-top:6px}
.label-chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.label-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;font-size:11.5px;font-weight:650;cursor:pointer;border:1.5px solid transparent;background:#f1f4f6;color:#5b6572}
.label-chip.active{color:#fff}
.checklist-mini-row{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:3px 0}
.checklist-mini-row .grow{flex:1}
.checklist-mini-del{border:0;background:transparent;color:#b8bfc7;font-size:15px;cursor:pointer;line-height:1;padding:2px 4px}
.checklist-mini-del:hover{color:#cf3535}
.task-label-pill{display:inline-block;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:700;color:#fff;margin-right:3px}
.team-edit-row{display:flex;align-items:center;gap:8px;font-size:12px;padding:4px 0;cursor:pointer}
.team-edit-row input{width:15px;height:15px}
/* v0.9.144: «Постановщик» задачи — только показ, кто создал, не выбор
   (по просьбе — «автоматически, кто создал»), поэтому не select/input,
   а просто текст в виде поля формы. */
.field-static{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#f7f9fa;font-size:13px;color:#4d5661}
/* v0.9.152: «Участники» задачи — Постановщик/Исполнитель/Соисполнители
   единым виджетом с плюсиком-поповером («нажимаешь плюсик и добавляешь из
   списка», по просьбе + присланному скриншоту-примеру). Поповер и список —
   те же .team-edit-popover/.team-edit-popover-row, что и у команды проекта
   (toggleInlineClientTeam), новых стилей под него не заводили. */
.task-participants{display:flex;flex-wrap:wrap;gap:16px 20px;padding:4px 0}
.task-participant-group{display:flex;flex-direction:column;gap:5px}
.task-participant-group .tpg-label{font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.task-participant-avatars{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.task-participant-chip{position:relative;display:inline-flex;line-height:0}
.task-participant-remove{position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50%;background:#c23b3b;color:#fff;font-size:9px;line-height:13px;text-align:center;padding:0;border:1.5px solid #fff;cursor:pointer}
.task-participant-add{width:26px;height:26px;flex:none;border-radius:50%;border:1.5px dashed var(--line);background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;line-height:1;padding:0}
.task-participant-add:hover{border-color:var(--ui-main,#00a86b);color:var(--ui-main-dark,#058e5f)}
/* v0.9.152: поповер выбора участника открывается ИЗНУТРИ карточки задачи
   (#seoTaskModal/#calendarTaskModal), а не из таблицы клиентов, как у
   исходного .team-edit-popover (там z-index:50 годился — модалок вокруг
   не было). У #seoTaskModal собственный z-index:80 !important (см.
   модалки, которые открываются поверх рабочего пространства/дровера —
   .drawer:70), поэтому поповер с z-index:50 рисовался ПОД задачей и был не
   виден (проверено через elementFromPoint — клик по чекбоксу попадал в
   поле формы под поповером, а не в сам чекбокс). Помечаем поповер участника
   отдельным классом (см. openTaskParticipantPicker в app.js) и поднимаем
   его z-index выше любой модалки в проекте (максимум там — 90 у
   #proposalResultModal). */
/* v0.9.152: z-index:200 хватало для #seoTaskModal (80), но в
   calendarTaskModal (лёгкая карточка задачи продаж/календаря — тот же
   виджет «Участники» переиспользуется и там) свой модалбэк на
   z-index:1000 !important (body > #calendarTaskModal) — попап опять
   рисовался под модалкой. Ставим с запасом выше самого верхнего модального
   z-index в приложении (1000), но ниже toast/alert (9999+). */
.team-edit-popover.task-participant-popover{z-index:5000}
.search-wide{min-width:280px;max-width:460px;width:36%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fff}
.kanban-wrap{overflow-x:auto;padding-bottom:8px}
.kanban{
 display:grid;
 grid-auto-flow:column;
 grid-auto-columns:minmax(235px,1fr);
 gap:8px;
 min-width:max-content;
}
.kcol{
 background:#f4f7f6;
 border:1px solid #e0e7e4;
 border-radius:10px;
 overflow:hidden;
 min-height:560px;
}
.khead{
 color:#fff;
 padding:9px 10px;
 font-size:12px;
 font-weight:850;
 display:flex;
 justify-content:space-between;
 align-items:center;
 position:relative;
}
.khead.blue{background:var(--kanban-blue)}
.khead.yellow{background:var(--kanban-yellow);color:#4c4300}
.khead.green{background:var(--kanban-green)}
.khead.teal{background:var(--kanban-teal)}
.khead.purple{background:var(--kanban-purple)}
.khead.gray{background:var(--kanban-gray)}
.seo-task-kanban .khead{background:#3b4652}
.kcol-menu-btn{background:transparent;border:none;color:inherit;font-size:14px;line-height:1;padding:2px 4px;border-radius:5px;cursor:pointer}
.kcol-menu-btn:hover{background:rgba(255,255,255,.18)}
.kcol-menu-popover{display:none;position:absolute;top:100%;right:8px;margin-top:4px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 10px 30px rgba(0,0,0,.14);z-index:6;min-width:190px;padding:5px;flex-direction:column}
.kcol-menu-popover.open{display:flex}
.kcol-menu-popover button{background:transparent;border:none;text-align:left;padding:7px 8px;border-radius:6px;font-size:12px;color:var(--text);cursor:pointer}
.kcol-menu-popover button:hover{background:#f1f4f6}
.kcol-menu-popover button.danger{color:#b73535}
.kcol.kcol-add{background:transparent;border:1px dashed #c9d2d8;display:flex;align-items:center;justify-content:center;min-height:56px}
#seoTaskListPanel,#seoTaskKanbanPanel,#seoTaskCalendarPanel{display:none}
#seoTaskListPanel.active,#seoTaskKanbanPanel.active,#seoTaskCalendarPanel.active{display:block}
.ksum{
 padding:7px 10px;
 font-size:11px;
 color:#68727d;
 border-bottom:1px solid #e3e8e6;
 text-align:center;
}
.kcards{padding:7px;min-height:490px}
.kcards.dragover{background:rgba(0,184,107,.06)}
.kcard{
 background:#fff;
 border:1px solid #dfe6e3;
 border-radius:8px;
 padding:var(--ux-card-y,9px) 10px;
 margin-bottom:var(--ux-card-gap,7px);
 box-shadow:0 1px 4px rgba(0,0,0,.035);
 cursor:grab;
}
.kcard:active{cursor:grabbing}
.kcard:hover{border-color:#b8d7ca;box-shadow:0 3px 10px rgba(0,0,0,.06)}
.kcard h4{margin:0 20px 5px 0;font-size:12px}
.kcard .site{font-size:11px;margin-bottom:6px;display:block}
.kcard .line{font-size:11px;margin:2px 0}
.kcard .owner{margin-top:8px;color:#5e6872}
.kcard .next{margin-top:7px;font-size:11px;color:#008d56;font-weight:700}
.kcard .more{float:right;color:#82909b}
.task-color-swatches{display:flex;flex-wrap:wrap;gap:8px}
.color-swatch{
 width:26px;height:26px;border-radius:50%;border:2px solid transparent;
 cursor:pointer;padding:0;box-shadow:0 0 0 1px rgba(0,0,0,.08) inset;
 transition:transform .1s ease;
}
.color-swatch:hover{transform:scale(1.1)}
.color-swatch.none{background:#fff repeating-linear-gradient(45deg,#e3e8e6 0 4px,#fff 4px 8px)}
.color-swatch.active{border-color:#1f2937;box-shadow:0 0 0 2px #fff inset,0 0 0 1px rgba(0,0,0,.08)}
.status-color-row{display:flex;flex-wrap:wrap;gap:6px;padding:6px 8px 8px}
.status-color-row .color-swatch{width:18px;height:18px}

/* --- Быстрые фильтры «Задачи» --- */
.quick-filter-btn{background:#fff;border:1px solid var(--line)}
.quick-filter-btn.active{background:var(--green,#1f9d63);color:#fff;border-color:transparent}

/* --- Учёт времени (таймер) --- */
.task-timer-row{display:flex;align-items:center;gap:10px;margin:-4px 0 14px;padding:9px 12px;background:#f4f7f6;border-radius:9px}
/* Страховка: элемент с атрибутом hidden должен быть скрыт всегда, даже если
   у него есть класс с собственным display (как у .task-timer-row выше) —
   без этого правила такие элементы оставались видимыми и кликабельными,
   хотя JS считал их скрытыми (см. таймер новой, ещё не сохранённой задачи). */
[hidden]{display:none!important}
.timer-play-btn{width:30px;height:30px;border-radius:50%;border:none;background:var(--green,#1f9d63);color:#fff;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.timer-play-btn:hover{filter:brightness(1.08)}
.timer-play-btn.small{width:20px;height:20px;font-size:10px}
.timer-display{font-variant-numeric:tabular-nums;font-weight:700;font-size:14px}
.timer-display.small{font-size:11px;font-weight:700}
.task-timer-mini{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.task-timer-mini.running .timer-display{color:var(--green,#1f9d63)}
.kcard-meta-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.kcard-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.kcard-top-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:5px}
.kcard-overdue-badge{font-size:10px;font-weight:700;color:#b73535;background:#fceeee;border-radius:999px;padding:2px 7px;white-space:nowrap}
.kcard-star{float:right;font-size:13px;color:#f2c94c;line-height:1}
.kcard-title{display:block;font-size:12.5px;margin-bottom:3px}
.kcard-note{font-size:11px;color:var(--muted);margin-bottom:5px;line-height:1.35}
.kcard-company{font-size:11px;font-weight:650;color:#4d5661;margin-bottom:4px}
.kcard-dates{font-size:11px;color:var(--muted);margin-bottom:3px}
.kcard-assignee{font-size:11px;color:#5e6872;display:flex;align-items:center;gap:6px}
.avatar-wrap{position:relative;display:inline-block;border-radius:50%;overflow:hidden;flex:none;vertical-align:middle;background:var(--green)}
.avatar-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.avatar-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.task-mini-badge{font-size:10px;background:#eef2f1;border-radius:6px;padding:2px 6px;color:#556}

/* --- Подзадачи / комментарии / вложения в модалке задачи --- */
.task-subsection{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.task-subsection h3{font-size:13px;margin:0 0 8px}
.task-inline-add{display:flex;gap:8px;margin-top:8px;align-items:flex-start}
.task-inline-add input,.task-inline-add textarea{flex:1;padding:8px;border:1px solid var(--line);border-radius:8px;font:inherit}
.task-checklist-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px}
.task-checklist-row span.done{text-decoration:line-through;color:#98a3ab}
.task-mini-del{background:transparent;border:none;color:#98a3ab;font-size:15px;cursor:pointer;line-height:1;padding:0 4px}
.task-mini-del:hover{color:#b73535}
.task-comment-row{padding:7px 0;border-bottom:1px solid #eef1f0;font-size:13px}
.task-comment-row:last-child{border-bottom:none}
.task-comment-head{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.task-attachment-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px}
.task-attachment-row a{color:var(--green,#1f9d63);font-weight:600}
.checklist-card{border:1px solid var(--line);border-radius:9px;padding:9px 10px;margin-bottom:10px;background:#fbfcfd}
.checklist-card-head{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.checklist-card-head input{flex:1;border:1px solid transparent;background:transparent;font-weight:700;font-size:13px;padding:3px 5px;border-radius:6px}
.checklist-card-head input:hover,.checklist-card-head input:focus{border-color:var(--line);background:#fff}
.checklist-card-count{font-size:11px;color:var(--muted);flex:none}
.checklist-card-del{background:transparent;border:none;color:#98a3ab;font-size:15px;cursor:pointer;line-height:1;padding:0 4px;flex:none}
.checklist-card-del:hover{color:#b73535}
.checklist-item-row{display:flex;align-items:center;gap:7px;padding:3px 0;font-size:12.5px}
.checklist-item-row span.done{text-decoration:line-through;color:#98a3ab}
.checklist-item-add{display:flex;gap:6px;margin-top:5px}
.checklist-item-add input{flex:1;padding:6px 7px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:12.5px}
.checklist-item-add button{flex:none}

/* --- Модалка задачи в две колонки: поля слева, вкладки (комментарии/
   подзадачи/вложения) справа — вместо одной длинной узкой формы. Модалка
   сделана заметно крупнее (высота почти во весь экран, как в примерах
   пользователя), а колонка с комментариями — своей высоты, со списком,
   который прокручивается отдельно от формы слева, и полем ввода, всегда
   видимым внизу. Границу между колонками можно тянуть мышью (.task-modal-resizer),
   выбранная ширина запоминается в браузере (см. initTaskModalResizer в app.js). */
.modal.task-modal-wide{display:flex;flex-direction:column;height:88vh;max-height:88vh;overflow:hidden}
.modal.task-modal-wide>.modal-title-row,.modal.task-modal-wide>.task-timer-row,.modal.task-modal-wide>.toolbar{flex:none}
/* .modal>* задаёт всем прямым детям модалки z-index:1 (см. декоративные
   кружки выше) — из-за этого .task-modal-cols (тоже z-index:1, но позже
   в разметке) перекрывал собой выпадающее меню «⋯» в шапке задачи, хотя
   у самого меню z-index и повыше: при равном z-index побеждает порядок
   в DOM у родительских стэкинг-контекстов. Поднимаем шапку выше. */
.modal.task-modal-wide>.modal-title-row{z-index:5}
.modal.task-modal-wide>.task-modal-cols{flex:1;min-height:0}
.task-modal-cols{display:grid;grid-template-columns:1fr 7px var(--task-side-w,380px);gap:0;margin-top:4px}
.task-modal-main{min-width:0;padding-right:16px;overflow-y:auto}
.task-modal-resizer{position:relative;cursor:col-resize}
.task-modal-resizer:before{content:"";position:absolute;left:3px;top:0;bottom:0;width:1px;background:var(--line)}
.task-modal-resizer:hover:before,.task-modal-resizer.dragging:before{background:var(--green);width:2px;left:2.5px}
.task-modal-side{min-width:0;min-height:0;padding-left:16px;display:flex;flex-direction:column}
.task-modal-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:10px;flex:none}
.task-modal-tab{background:transparent;border:0;border-bottom:2px solid transparent;padding:8px 4px;margin-bottom:-1px;font-size:12.5px;font-weight:650;color:var(--muted);cursor:pointer}
.task-modal-tab:hover{color:var(--text)}
.task-modal-tab.active{color:var(--green-dark);border-bottom-color:var(--green)}
.task-modal-side .task-subsection{margin-top:0;padding-top:0;border-top:0;flex:1;min-height:0;display:flex;flex-direction:column}
.task-modal-side .task-subsection>*:first-child{flex:1;overflow-y:auto;min-height:60px;padding-right:4px}
.task-modal-side .task-inline-add{flex:none}
@media(max-width:860px){
  .modal.task-modal-wide{height:auto;max-height:92vh;overflow-y:auto;display:block}
  .task-modal-cols{grid-template-columns:1fr;display:block}
  .task-modal-main{padding-right:0;overflow-y:visible}
  .task-modal-resizer{display:none}
  .task-modal-side{padding-left:0;border-top:1px solid var(--line);padding-top:16px;margin-top:16px;display:block}
  .task-modal-side .task-subsection{display:block}
  .task-modal-side .task-subsection>*:first-child{overflow-y:visible;max-height:none}
}

/* --- Мини-редактор форматированного текста (вместо голого textarea) для
   комментариев и описаний — жирный/курсив/подчёркивание/списки/ссылка,
   как в задачах moo.team. Хранит содержимое как HTML (санитизируется и на
   клиенте, и на сервере — см. sanitize_html в app.py), а не как обычный
   textarea.value, но существующий JS-код продолжает читать/писать через
   .value как раньше (см. initRichEditors в app.js). */
.rich-editor{border:1px solid #dfe4e8;border-radius:8px;overflow:hidden;background:#fff}
.rich-editor:focus-within{border-color:#8bd7b4;box-shadow:0 0 0 3px rgba(0,184,107,.12)}
.rich-toolbar{display:flex;align-items:center;gap:1px;flex-wrap:wrap;padding:4px 5px;border-bottom:1px solid #eef1f0;background:#fafbfc}
.rich-toolbar button{border:0;background:transparent;color:#5c6875;border-radius:6px;width:25px;height:25px;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;cursor:pointer;padding:0}
.rich-toolbar button:hover{background:#eef1f4;color:var(--text)}
.rich-toolbar .rich-sep{width:1px;height:16px;background:var(--line);margin:0 4px;flex:none}
.rich-toolbar .grow{flex:1}
.rich-expand{font-size:13px !important}
.rich-editable{min-height:78px;max-height:260px;overflow:auto;padding:8px 9px;font-size:13px;line-height:1.5;outline:none}
.rich-editable.small{min-height:56px;max-height:220px}
.rich-editable:empty:before{content:attr(data-placeholder);color:#98a3ab}
.rich-editable ul,.rich-editable ol{margin:4px 0;padding-left:22px}
.rich-editable a{color:var(--blue)}
.task-inline-add .rich-editor{flex:1}
.rich-editor.rich-fullscreen{position:fixed;inset:5vh 8vw;z-index:9999;box-shadow:0 30px 90px rgba(0,0,0,.35);display:flex;flex-direction:column}
.rich-editor.rich-fullscreen .rich-editable{flex:1;max-height:none}
.rich-content{font-size:13px;line-height:1.5;white-space:normal}
.rich-content ul,.rich-content ol{margin:4px 0;padding-left:22px}
.rich-content a{color:var(--blue)}

/* --- Группировка в списке задач --- */
tr.group-row td{background:#f4f7f6;font-weight:800;font-size:12px;padding:8px 14px;color:#43504a}

/* --- Раздел «Проекты» в меню SEO-отдела --- */
.project-mini-list{padding:6px 12px 16px}
.project-mini-row{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:8px;cursor:pointer}
.project-mini-row:hover{background:#f4f7f6}
.project-mini-favicon{width:20px;height:20px;border-radius:4px;flex:none}
.project-mini-favicon.placeholder{background:#dfe6e3}
.project-mini-name{font-weight:700;font-size:13px}
.project-mini-site{font-size:12px}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-day{background:#fff;border:1px solid var(--line);border-radius:8px;min-height:105px;padding:8px}
.cal-day .num{font-weight:800;margin-bottom:6px}
.cal-event{font-size:11px;padding:5px 6px;background:#ecfaf4;border-left:3px solid var(--green);border-radius:5px;margin-bottom:4px}
#clientListPanel{background:#fff;border-radius:10px;border:1px solid var(--line)}
#kanbanPanel,#calendarPanel{display:none}
#kanbanPanel.active,#clientListPanel.active,#calendarPanel.active{display:block}
#clientListPanel:not(.active){display:none}
@media(max-width:1100px){
 .workspace-shell{grid-template-columns:1fr}
 .activity-panel{position:static}
}

/* ===== v0.7 tools hub / screenshot-inspired visual language ===== */
#p-tools{max-width:1450px;margin:0 auto}
.tools-hero{
 display:flex;justify-content:space-between;gap:24px;align-items:center;
 background:linear-gradient(120deg,#fff 0%,#fbfffd 68%,#eaf9f3 100%);
 border:1px solid #dbe9e3;border-radius:22px;padding:28px 32px;margin-bottom:16px;
 overflow:hidden;position:relative;
}
.tools-hero:after{
 content:"";position:absolute;width:260px;height:260px;border-radius:50%;
 border:34px solid rgba(0,184,107,.045);right:-80px;top:-115px;pointer-events:none
}
.eyebrow{display:inline-block;background:#e8f8f1;color:#008d56;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:900}
.tools-hero h2{font-size:32px;margin:13px 0 8px;color:#202734}
.tools-hero p{font-size:15px;line-height:1.55;color:#566273;max-width:760px;margin:0}
.tools-hero-badge{width:auto;min-width:104px;height:auto;min-height:104px;border-radius:24px;background:linear-gradient(145deg,#00b86b,#008f56);color:white;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:16px;box-shadow:0 15px 35px rgba(0,142,80,.2);z-index:1;padding:10px 16px;white-space:nowrap}
.tools-hero-badge b{font-size:13px;letter-spacing:.3px}
.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tool-card{
 background:#fff;border:1px solid #dfe8e4;border-radius:18px;padding:20px;
 min-height:285px;display:flex;flex-direction:column;position:relative;overflow:hidden;
 transition:.18s ease;
}
.tool-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(32,64,50,.08);border-color:#b9dcca}
.tool-card:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;background:#effaf5;right:-35px;top:-35px}
.tool-card.featured{border-color:#8bd7b4;background:linear-gradient(150deg,#fff,#f4fcf8)}
.tool-icon{
 width:48px;height:48px;border-radius:13px;background:#e9f8f1;color:#00955a;
 display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;margin-bottom:14px;z-index:1
}
.tool-icon svg{width:23px;height:23px}
/* v0.9.90: у части иконок инструментов не было fill/stroke="currentColor" на
   вложенных path — они рисовались чёрными вместо зелёных. Задаём двуцветный
   стиль (обводка + заливка одним акцентным цветом) на уровне svg, чтобы
   унаследовали все вложенные фигуры без собственных fill/stroke. */
.tool-icon svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tool-tag{font-size:10px;font-weight:900;color:#00a361;letter-spacing:.5px}
.tool-card h3{font-size:19px;margin:6px 0 2px}
.tool-tagline{font-size:12px;font-weight:800;color:#00a361;margin:0 0 8px}
.tool-card p{font-size:13px;line-height:1.5;color:#5c6875;margin:0 0 12px}
.tool-points{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;margin-bottom:15px}
.tool-points span{font-size:11px;background:#f4f7f6;border-radius:7px;padding:6px 7px;color:#43505c}
.tool-card .btn{align-self:flex-start}
.tool-card.coming{border-style:dashed;background:#fafcfb}
@media(max-width:1200px){.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.tool-grid{grid-template-columns:1fr}.tools-hero{padding:20px}.tools-hero-badge{display:none}.tools-hero h2{font-size:25px}}

/* ===== v0.8 manager statistics ===== */
.manager-stats-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:12px}
.manager-stats-head h2{margin:0 0 4px;font-size:24px}
.manager-filter-row{display:flex;gap:8px;flex-wrap:wrap}
.manager-filter-row select{padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:#fff}
.manager-stats-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px}
.manager-funnel-wrap{display:grid;grid-template-columns:330px minmax(0,1fr);gap:20px;align-items:start;padding:4px 2px 10px}
.manager-funnel{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 0}
.funnel-step{height:45px;border-radius:5px;color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;font-weight:850;line-height:1.05;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.funnel-step small{font-size:9px;font-weight:700;margin-top:3px}
.funnel-step:nth-child(1){background:linear-gradient(90deg,#008f52,#00a85d)}
.funnel-step:nth-child(2){background:linear-gradient(90deg,#36b85d,#54c96f)}
.funnel-step:nth-child(3){background:linear-gradient(90deg,#f3af00,#ffbf1f)}
.funnel-step:nth-child(4){background:linear-gradient(90deg,#ff7b00,#ff9622)}
.funnel-step:nth-child(5){background:linear-gradient(90deg,#a287dd,#836dce)}
.funnel-step:nth-child(6){background:linear-gradient(90deg,#8b74d9,#7562c7)}
.funnel-step:nth-child(7){background:linear-gradient(90deg,#4a97e2,#2d7fcc)}
.funnel-step:nth-child(8){background:linear-gradient(90deg,#18b7a8,#0fa293)}
.funnel-step:nth-child(9){background:linear-gradient(90deg,#00b86b,#009b59)}
.funnel-step:nth-child(10){background:linear-gradient(90deg,#8c98a6,#6f7b88)}
.mft-head,.mft-row{display:grid;grid-template-columns:minmax(180px,1fr) 90px 90px 120px;gap:10px;align-items:center}
.mft-head{font-size:11px;color:#73808c;padding:8px 0;border-bottom:1px solid var(--line)}
.mft-row{padding:9px 0;border-bottom:1px solid #edf1ef;font-size:12px}
.mft-stage{display:flex;align-items:center;gap:8px;font-weight:700}
.mft-dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.manager-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.manager-kpi{border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center;background:#fbfdfc}
.manager-kpi span{display:block;font-size:11px;color:var(--muted);margin-bottom:5px}
.manager-kpi b{font-size:22px;color:#008f56}
.manager-stats-side{display:flex;flex-direction:column;gap:14px}
.summary-list{display:flex;flex-direction:column}
.summary-list>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid #eef1f0;font-size:12px}
.summary-list>div:last-child{border-bottom:0}
.sales-plan-value{font-size:13px;margin:4px 0 12px}.sales-plan-value b{color:#00955a;font-size:19px}
.sales-plan-bar{height:10px;border-radius:999px;background:#e8ecef;overflow:hidden;margin-bottom:9px}
.sales-plan-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#00b86b,#009b59);border-radius:999px}
.manager-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.chart-placeholder{height:220px;position:relative;background:linear-gradient(180deg,#fff,#fbfdfc);overflow:hidden}
.chart-placeholder svg{width:100%;height:100%}
.source-donut-wrap{display:flex;align-items:center;justify-content:center;gap:28px;min-height:220px}
.source-donut{width:130px;height:130px;border-radius:50%;background:conic-gradient(#0a9d61 0 50%,#2f9bd9 50% 75%,#8b79d7 75% 92%,#8f99a5 92% 100%);position:relative}
.source-donut:after{content:"";position:absolute;inset:28px;background:white;border-radius:50%}
.source-legend{min-width:170px}.source-legend div{display:flex;align-items:center;gap:8px;font-size:12px;margin:10px 0}
.source-legend i{width:9px;height:9px;border-radius:50%;background:#0a9d61}.source-legend div:nth-child(2) i{background:#2f9bd9}.source-legend div:nth-child(3) i{background:#8b79d7}.source-legend div:nth-child(4) i{background:#8f99a5}.source-legend b{margin-left:auto}
.leader-item{display:grid;grid-template-columns:minmax(0,1fr) 100px 50px;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid #eef1f0;font-size:12px}
.leader-bar{height:8px;background:#e8ecef;border-radius:999px;overflow:hidden}.leader-bar span{display:block;height:100%;background:#00a45f;border-radius:999px}
@media(max-width:1200px){.manager-stats-layout{grid-template-columns:1fr}.manager-stats-side{display:grid;grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.manager-funnel-wrap{grid-template-columns:1fr}.manager-bottom-grid{grid-template-columns:1fr}.manager-stats-side{grid-template-columns:1fr}.mft-head,.mft-row{grid-template-columns:minmax(150px,1fr) 70px 70px 100px}}

/* v0.9 calendar tasks */
.nav-tool-mark{display:inline-flex!important;align-items:center;justify-content:center;width:25px!important;height:18px!important;border-radius:5px;background:rgba(255,255,255,.16);color:#fff;font-size:9px;font-weight:900;margin-right:5px}
.cal-day{transition:.15s ease;position:relative}.cal-day:hover{border-color:#b7d8ca;background:#fcfffd}.cal-day.today{outline:2px solid rgba(0,184,107,.35);outline-offset:-2px}
.cal-day .num{display:flex;justify-content:space-between}.cal-day .num small{font-size:9px;color:#00965b}
.cal-task{font-size:10px;padding:5px 6px;background:#fff7df;border-left:3px solid #ffb100;border-radius:5px;margin-bottom:4px;cursor:pointer;line-height:1.25}
.cal-task.done{opacity:.55;text-decoration:line-through;background:#f0f2f1;border-left-color:#99a29d}.cal-task b{display:block}.cal-task .ct-client{color:#69747f;margin-top:2px}
/* v0.9.152: соисполнители — мелкой аватаркой прямо в чипе мини-календаря
   (по просьбе «в самой задаче должно быть видно также кто что делает») */
.cal-task .ct-avatars{display:flex;gap:2px;margin-top:3px}
.cal-task .ct-avatars .avatar-wrap{border:1px solid #fff}
.calendar-task-modal{width:min(650px,calc(100vw - 28px))}.calendar-task-modal .form-grid{grid-template-columns:1fr 1fr}.calendar-task-modal .span-2{grid-column:1/-1}.calendar-task-modal textarea{resize:vertical}
@media(max-width:650px){.calendar-task-modal .form-grid{grid-template-columns:1fr}.calendar-task-modal .span-2{grid-column:auto}}

/* ===== v0.9.1 manager statistics spacing ===== */
#p-managers{
  box-sizing:border-box;
  width:100%;
  max-width:none;
  padding:18px 26px 34px 26px;
}
#p-managers .manager-stats-head{
  margin-bottom:16px;
}
#p-managers .manager-stats-layout{
  gap:20px;
}
#p-managers .manager-stats-main,
#p-managers .manager-stats-side{
  min-width:0;
}
#p-managers .manager-stats-side{
  padding-right:4px;
}
#p-managers .manager-stats-side > .panel{
  margin:0;
}
#p-managers .manager-bottom-grid{
  gap:18px;
  margin-top:18px;
  padding-bottom:6px;
}
#p-managers .manager-funnel-panel{
  margin:0;
}
@media(max-width:1200px){
  #p-managers{padding:16px 18px 28px}
  #p-managers .manager-stats-layout{gap:16px}
}
@media(max-width:700px){
  #p-managers{padding:12px 10px 24px}
}


/* ===== v0.9.2 REAL manager spacing fix ===== */

/* Real outer gutters: the page no longer stretches to the viewport edge. */
#p-managers.page.active{
  width:calc(100% - 48px) !important;
  max-width:1600px !important;
  margin:22px 24px 34px 24px !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

/* More breathing room between the funnel and the right KPI rail. */
#p-managers .manager-stats-layout{
  grid-template-columns:minmax(0,1fr) 340px !important;
  gap:24px !important;
  align-items:start;
}

/* Keep the right rail away from the page edge and stop overflow. */
#p-managers .manager-stats-side{
  width:100%;
  min-width:0;
  padding:0 !important;
  gap:18px !important;
}

/* Internal spacing in ALL right-side cards. */
#p-managers .manager-stats-side > .panel{
  width:100%;
  min-width:0;
  overflow:hidden;
  padding-bottom:14px;
}

/* Summary rows previously touched card edges. */
#p-managers .manager-stats-side .summary-list{
  padding:0 15px;
}
#p-managers .manager-stats-side .summary-list > div{
  padding:11px 0;
}

/* Sales-plan contents previously had no horizontal inner padding. */
#p-managers .manager-stats-side .sales-plan-value{
  margin:8px 15px 12px !important;
}
#p-managers .manager-stats-side .sales-plan-bar{
  margin:0 15px 10px !important;
}
#p-managers .manager-stats-side #salesPlanText{
  display:block;
  margin:0 15px !important;
}

/* Conversion leaders get the same inner gutter. */
#p-managers .manager-stats-side .leader-list{
  padding:0 15px;
}
#p-managers .manager-stats-side .leader-item{
  padding:11px 0;
}

/* Main funnel and lower analytics panels are separated consistently. */
#p-managers .manager-funnel-panel{
  margin:0 !important;
}
#p-managers .manager-bottom-grid{
  gap:20px !important;
  margin-top:20px !important;
}

/* Header aligns to the same gutter as the cards. */
#p-managers .manager-stats-head{
  margin:0 0 18px 0 !important;
}

@media(max-width:1200px){
  #p-managers.page.active{
    width:calc(100% - 32px) !important;
    margin:16px !important;
  }
  #p-managers .manager-stats-layout{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
  #p-managers .manager-stats-side{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:800px){
  #p-managers.page.active{
    width:calc(100% - 20px) !important;
    margin:10px !important;
  }
  #p-managers .manager-stats-side{
    grid-template-columns:1fr;
  }
}

/* ===== v0.9.3 calendar modal visibility fix ===== */
#calendarTaskModal{
  display:none !important;
  position:fixed !important;
  inset:0 !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(19,23,29,.36) !important;
  z-index:100 !important;
  padding:20px !important;
}
#calendarTaskModal.open{
  display:flex !important;
}
#calendarTaskModal .calendar-task-modal{
  width:min(650px,94vw) !important;
  max-height:90vh !important;
  overflow:auto !important;
  margin:auto !important;
}

/* ===== v0.9.4 structural layout + calendar + overdue ===== */

/* Manager page: use the parent's padding as the real gutter. */
body[data-current-page="managers"] .content{
  max-width:none !important;
  width:100% !important;
  padding:22px 30px 40px !important;
}
#p-managers.page.active{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}
#p-managers .manager-stats-layout{
  grid-template-columns:minmax(0,1fr) minmax(330px,360px) !important;
  gap:26px !important;
}
#p-managers .manager-stats-side{
  padding:0 !important;
  margin:0 !important;
  gap:18px !important;
}
#p-managers .manager-stats-side > .panel{
  border-radius:12px !important;
  overflow:hidden !important;
}
#p-managers .manager-stats-side > .panel > .panel-head{
  padding:14px 18px !important;
}
#p-managers .manager-stats-side .summary-list,
#p-managers .manager-stats-side .leader-list{
  padding:4px 18px 12px !important;
}
#p-managers .manager-stats-side .summary-list > div{
  padding:12px 0 !important;
}
#p-managers .manager-stats-side .sales-plan-value{
  margin:14px 18px 12px !important;
}
#p-managers .manager-stats-side .sales-plan-bar{
  margin:0 18px 11px !important;
}
#p-managers .manager-stats-side #salesPlanText{
  margin:0 18px 4px !important;
}
#p-managers .manager-bottom-grid{
  gap:20px !important;
  margin-top:20px !important;
}

/* Calendar task modal: direct body sibling, never participates in page flow. */
body > #calendarTaskModal{
  display:none !important;
  position:fixed !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:24px !important;
  background:rgba(16,24,20,.46) !important;
  z-index:1000 !important;
  align-items:center !important;
  justify-content:center !important;
}
body > #calendarTaskModal.open{
  display:flex !important;
}
body > #calendarTaskModal .calendar-task-modal{
  position:relative !important;
  width:min(680px,94vw) !important;
  max-height:88vh !important;
  margin:0 !important;
  padding:20px !important;
  overflow:auto !important;
  border-radius:14px !important;
  background:#fff !important;
}
.calendar-modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:14px;
}
.calendar-modal-head h2{margin:0 0 4px !important}
.calendar-close{
  width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:8px;
  font-size:22px;line-height:1;display:grid;place-items:center;flex:0 0 auto;
}
.calendar-modal-actions{
  display:flex;justify-content:flex-end;gap:8px;margin-top:16px;
}

/* Calendar interaction hint. */
.cal-day[data-date]{cursor:default}
.cal-day[data-date]:hover{border-color:#82d9b3 !important;background:#fbfffd !important}
.cal-day[data-date]:hover:after{
  content:"+ задача";position:absolute;right:7px;bottom:6px;font-size:9px;
  color:#00955a;font-weight:800;opacity:.65;
}

/* Overdue = red everywhere it appears. */
.cal-task.overdue,
.cal-event.overdue{
  background:#fff0f0 !important;
  border-left-color:#e33b3b !important;
  color:#a51f1f !important;
}
.cal-task.overdue .ct-client{color:#b14444 !important}
.activity-item.overdue{
  background:#fff0f0 !important;
  border-left:4px solid #e33b3b !important;
}
.activity-item.overdue .atype,
.activity-item.overdue .atime{color:#c12626 !important;font-weight:800}
.overdue-row td{
  background:#fff0f0 !important;
  color:#a51f1f !important;
}
.overdue-row:hover td{background:#ffe5e5 !important}
.overdue-status{
  background:#ffdede !important;
  color:#b51f1f !important;
  font-weight:850 !important;
}
.dashboard-task-title{font-size:11px;color:inherit;margin-top:2px}

/* Avoid decorative rules blocking modal interaction. */
#calendarTaskModal,
#calendarTaskModal *{pointer-events:auto !important}

@media(max-width:1200px){
  body[data-current-page="managers"] .content{padding:18px 20px 32px !important}
  #p-managers .manager-stats-layout{grid-template-columns:1fr !important;gap:18px !important}
}
@media(max-width:700px){
  body[data-current-page="managers"] .content{padding:12px 10px 24px !important}
  body > #calendarTaskModal{padding:10px !important}
}

/* ===== v0.9.5 modal close controls ===== */
.modal-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:8px;
}
.modal-title-row h2{margin:0 !important}
.task-modal-title-group{display:flex;align-items:center;gap:10px;min-width:0}
.task-modal-title-group h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-header-avatar{flex:none}
.task-header-private{font-size:15px;line-height:1;flex:none}
.task-header-actions{display:flex;align-items:center;gap:8px;flex:none}
.task-actions-menu-wrap{position:relative}
.task-actions-menu-wrap .task-actions-menu-btn{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#303844;font-size:18px}
.task-actions-menu-wrap .task-actions-menu-btn:hover{background:#f4f7f6}
.task-actions-menu-popover{min-width:220px;right:0}
.task-actions-menu-popover button{padding:8px 10px;font-size:13px}
.task-actions-menu-popover .danger{border-top:1px solid var(--line);margin-top:4px;padding-top:9px;border-radius:0 0 6px 6px}
.modal-close-x{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  color:#303844;
  font-size:24px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.modal-close-x:hover{
  background:#f4f7f6;
  border-color:#b9c9c2;
}

/* v0.9.6 — подписи SEO-инструментов */
.tools-hero-badge,
.seo-tools-badge{
  min-width:150px;
  text-align:center;
  line-height:1.15;
}

/* ===== v0.9.7 calendar modal overflow fix ===== */
body > #calendarTaskModal{
  overflow:hidden !important;
}

body > #calendarTaskModal .calendar-task-modal{
  box-sizing:border-box !important;
  width:min(720px,calc(100vw - 32px)) !important;
  max-width:720px !important;
  max-height:calc(100vh - 48px) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

/* Prevent children from forcing the modal wider than its container. */
#calendarTaskModal .form-grid,
#calendarTaskModal .field,
#calendarTaskModal input,
#calendarTaskModal select,
#calendarTaskModal textarea,
#calendarTaskModal .calendar-modal-actions,
#calendarTaskModal .calendar-modal-head{
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

#calendarTaskModal input,
#calendarTaskModal select,
#calendarTaskModal textarea{
  width:100% !important;
}

#calendarTaskModal textarea{
  resize:vertical !important;
}

/* Keep actions inside the modal and prevent them from stretching the width. */
#calendarTaskModal .calendar-modal-actions{
  position:sticky;
  bottom:-20px;
  background:#fff;
  padding-top:12px;
  padding-bottom:2px;
  margin-top:12px;
  z-index:2;
}

/* Decorative pseudo-elements must stay clipped inside the modal. */
#calendarTaskModal .calendar-task-modal{
  isolation:isolate;
}
#calendarTaskModal .calendar-task-modal:before,
#calendarTaskModal .calendar-task-modal:after{
  pointer-events:none !important;
  max-width:100% !important;
}

/* Hide the horizontal scrollbar completely. */
#calendarTaskModal .calendar-task-modal::-webkit-scrollbar:horizontal{
  height:0 !important;
}
#calendarTaskModal .calendar-task-modal{
  scrollbar-width:auto;
}

/* Slightly more compact on short screens. */
@media(max-height:760px){
  body > #calendarTaskModal .calendar-task-modal{
    max-height:calc(100vh - 24px) !important;
    padding:16px !important;
  }
  #calendarTaskModal .field{margin-bottom:8px}
}

/* ===== v0.9.8 QA pass: layout fixes + design polish ===== */

/* --- Tester note -----------------------------------------------------
   Fixed: mobile sidebar was unusable (an unconditional ".app{grid-
   template-columns:190px 1fr}" rule added in v0.6 silently overrode the
   original 900px collapse rule, and nav labels were hidden with no
   icons to replace them, leaving blank buttons + page-wide horizontal
   scroll on phones). Replaced with a proper off-canvas drawer.
------------------------------------------------------------------------ */

.topbar-left{display:flex;align-items:center;gap:10px;min-width:0}
.topbar-left h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-menu-btn{
  display:none;
  align-items:center;justify-content:center;
  width:36px;height:36px;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.3);
  border-radius:8px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:17px;
  cursor:pointer;
}
.mobile-menu-btn:hover{background:rgba(255,255,255,.18)}
.sidebar-backdrop{
  display:none;
  position:fixed;inset:0;
  background:rgba(9,18,14,.5);
  z-index:290;
}

@media(max-width:900px){
  .app{grid-template-columns:1fr !important}
  .mobile-menu-btn{display:inline-flex}

  .sidebar{
    position:fixed !important;
    top:0 !important;left:0 !important;
    height:100vh !important;
    width:250px !important;
    max-width:82vw;
    padding:14px 12px !important;
    transform:translateX(-100%);
    transition:transform .22s ease;
    z-index:300;
    box-shadow:14px 0 40px rgba(0,0,0,.2);
  }
  body.mobile-nav-open .sidebar{transform:translateX(0)}
  body.mobile-nav-open .sidebar-backdrop{display:block}
  body.mobile-nav-open{overflow:hidden}

  /* Undo the old icon-only collapse: the drawer is now full width,
     so labels must stay legible instead of disappearing. */
  .brand div:last-child,.nav button span,.userbox .name,.userbox .role{display:block !important}
  .nav-tool-mark{display:inline-flex !important}
  .brand{justify-content:flex-start !important;padding:8px 6px 16px !important}
  .nav button{text-align:left !important}

  .two-col{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:901px){
  .sidebar-backdrop{display:none !important}
}

/* --- Calendar month grid: 7 fixed columns used to get crushed to
   ~50px on phones with no way to reach the last column. Scrolls
   horizontally instead, same pattern as the kanban board. --- */
@media(max-width:760px){
  #calendarPanel{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #calendarPanel .calendar-grid{min-width:640px}
}

/* --- Kanban: make the extra columns past the fold discoverable with
   a soft edge fade, and stop the board reserving huge empty height
   when a stage has few or no cards. --- */
.kanban-wrap{position:relative}
.kanban-wrap:after{
  content:"";
  position:absolute;top:0;right:0;bottom:8px;width:34px;
  background:linear-gradient(90deg,rgba(237,243,241,0),#edf3f1);
  pointer-events:none;
}
.kcol{min-height:220px}
.kcards{min-height:150px}

/* --- Demo-data badges: the funnel-trend and lead-source charts on
   the manager stats page show illustrative numbers, not numbers
   computed from real CRM history — say so in the UI instead of only
   in the changelog. --- */
.demo-badge{
  display:inline-block;
  vertical-align:middle;
  margin-left:7px;
  padding:2px 7px;
  border-radius:999px;
  background:#fff2d6;
  color:#8a5b00;
  font-size:9px;
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
  cursor:help;
}

/* --- Reduce the amount of empty page below short tables/boards on
   tall viewports; decorative circles read as "unfinished" over a
   large blank area. --- */
.content{min-height:0}
body:before{opacity:.7}
body:after{opacity:.7}

/* --- Consistent focus outline for keyboard users on the tab/view
   controls (kanban/list/calendar, KP steps) which had none. --- */
.view-tabs button:focus-visible,
.nav button:focus-visible,
.tariff-card:focus-visible,
.btn:focus-visible,
.modal-close-x:focus-visible,
.calendar-close:focus-visible{
  outline:2px solid var(--brand-green,#00b86b);
  outline-offset:2px;
}


/* ===== v0.9.10 proposal editor modal: full scrolling + always-visible actions ===== */
#proposalModal{
  padding:16px !important;
  overflow:hidden !important;
}

#proposalModal .proposal-editor-modal{
  width:min(780px,calc(100vw - 32px)) !important;
  max-width:780px !important;
  height:auto !important;
  max-height:calc(100vh - 32px) !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

#proposalModal .proposal-editor-modal > .modal-title-row{
  flex:0 0 auto;
  padding:16px 18px 10px;
}

#proposalModal .proposal-editor-modal > .steps{
  flex:0 0 auto;
  margin:0 18px 10px !important;
}

#proposalModal .proposal-editor-scroll{
  flex:1 1 auto;
  min-height:0 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  padding:4px 18px 18px;
  overscroll-behavior:contain;
}

#proposalModal .proposal-editor-scroll .form-grid,
#proposalModal .proposal-editor-scroll .field,
#proposalModal .proposal-editor-scroll input,
#proposalModal .proposal-editor-scroll select,
#proposalModal .proposal-editor-scroll textarea,
#proposalModal .client-picker-row,
#proposalModal .tariff-cards,
#proposalModal .worklist{
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* The work list can scroll when very long, but it no longer traps the whole modal. */
#proposalModal .worklist{
  max-height:230px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}

/* Footer is outside the scrolling region, so Save is always available. */
#proposalModal .proposal-editor-actions{
  flex:0 0 auto;
  margin:0 !important;
  padding:12px 18px 16px;
  border-top:1px solid var(--line);
  background:#fff;
  box-shadow:0 -8px 20px rgba(32,39,52,.04);
  position:relative;
  z-index:5;
}

#proposalModal .proposal-editor-actions .btn{
  white-space:nowrap;
}

/* Kill decorative overflow in this modal only. */
#proposalModal .proposal-editor-modal:before,
#proposalModal .proposal-editor-modal:after{
  display:none !important;
}

@media(max-height:720px){
  #proposalModal{padding:8px !important}
  #proposalModal .proposal-editor-modal{
    max-height:calc(100vh - 16px) !important;
  }
  #proposalModal .proposal-editor-modal > .modal-title-row{
    padding-top:12px;
    padding-bottom:8px;
  }
  #proposalModal .proposal-editor-modal > .steps{
    margin-bottom:8px !important;
  }
  #proposalModal .proposal-editor-scroll{
    padding-bottom:12px;
  }
}

@media(max-width:680px){
  #proposalModal{padding:8px !important}
  #proposalModal .proposal-editor-modal{
    width:100% !important;
    max-height:calc(100vh - 16px) !important;
  }
  #proposalModal .proposal-editor-actions{
    padding:10px 12px 12px;
  }
}

/* ===== v0.9.12 settings / RBAC / delete client ===== */
.btn.danger{background:#fff1f0;border-color:#ffc9c5;color:#c7352d}
.btn.danger:hover{background:#ffe7e4}
.folder-tabs{display:flex;align-items:flex-end;gap:3px}
.folder-tab{border:0;cursor:pointer;font:inherit;font-weight:750;border-radius:10px 10px 0 0;position:relative}
.settings-tabs{margin:0;padding:0 0 0 16px}
.settings-tabs .folder-tab{background:#e3ece8;color:var(--muted);padding:10px 16px 11px;transform:translateY(3px)}
.settings-tabs .folder-tab.active{background:#fff;color:var(--text);transform:translateY(0);margin-bottom:-1px;z-index:2;box-shadow:0 -3px 10px rgba(20,45,35,.06)}
.settings-pane{display:none}.settings-pane.active{display:block}
.access-table-wrap{overflow-x:auto}.access-table{min-width:1050px}.access-table td{vertical-align:top}
.access-role{min-width:135px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff}
.permission-grid{display:flex;flex-wrap:wrap;gap:6px;max-width:510px}
.permission-chip{display:inline-flex;gap:6px;align-items:center;padding:6px 9px;border-radius:999px;background:#f2f6f4;border:1px solid #e1e9e5;font-size:12px;cursor:pointer;white-space:nowrap}
.permission-chip input{accent-color:var(--green)}.permission-chip.locked{opacity:.62;cursor:default}
.switch-check{display:flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap}.switch-check input{accent-color:var(--green)}

.nav button{display:flex;align-items:center;gap:10px}.nav-icon{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.deal-board{display:flex;gap:10px;overflow-x:auto;padding:12px;min-height:500px}.deal-col{flex:0 0 225px;background:#f5f8f7;border:1px solid var(--line);border-radius:14px;padding:10px}.deal-col-head{display:flex;justify-content:space-between;gap:8px}.deal-col-head span{background:#e3f5ec;color:var(--green-dark);padding:2px 7px;border-radius:999px}.deal-card{display:flex;width:100%;flex-direction:column;text-align:left;gap:4px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;margin-top:8px;cursor:pointer}.deal-card small{color:var(--muted)}.deal-card strong{color:var(--green-dark)}.deal-empty{padding:14px 3px;color:var(--muted);font-size:12px}.report-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px}.report-card{padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff}.report-card span{display:block;color:var(--muted);font-size:12px}.report-card b{font-size:28px}

/* ===== v0.9.15 company parser + call base ===== */
.parser-layout{max-width:980px}
.parser-panel{padding-bottom:4px}
.parser-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px}
.parser-form-grid .span-2{grid-column:1/-1}
.parser-form-grid .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.parser-form-grid .field span{font-size:12px;font-weight:700;color:var(--muted)}
.parser-form-grid input,.parser-form-grid textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:9px;padding:10px 11px;background:#fff;font:inherit;color:var(--text)}
.parser-form-grid textarea{resize:vertical;min-height:155px;line-height:1.45}
.parser-actions{display:flex;gap:8px;padding:0 16px 14px;flex-wrap:wrap}
.parser-status{margin:0 16px 12px;padding:13px 14px;border:1px solid var(--line);border-radius:11px;background:#f7faf8}
.parser-status-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}
.parser-progress{height:8px;background:#e4ece8;border-radius:999px;margin-top:9px;overflow:hidden}
.parser-progress span{display:block;width:0;height:100%;background:var(--green);border-radius:999px;transition:width .25s ease}
.parser-note{padding:0 16px 16px;color:var(--muted);font-size:11px;line-height:1.5}
.callbase-toolbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.callbase-toolbar .search-wide{max-width:620px}
.callbase-table{min-width:900px}
.callbase-table th:nth-child(1){width:28%}.callbase-table th:nth-child(2){width:18%}.callbase-table th:nth-child(3){width:20%}.callbase-table th:nth-child(4){width:31%}.callbase-table th:nth-child(5){width:3%}
.site-link{color:#1683c8;text-decoration:none;word-break:break-all}.site-link:hover{text-decoration:underline}
.problem-cell{line-height:1.4}
.icon-action{width:28px;height:28px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font-size:18px;line-height:1}.icon-action.danger{color:#c7352d}.icon-action.danger:hover{background:#fff1f0;border-color:#ffc9c5}
@media(max-width:820px){.parser-form-grid{grid-template-columns:1fr}.parser-form-grid .span-2{grid-column:auto}}

.parser-env-status{padding:11px 13px;border-radius:10px;border:1px solid var(--line);font-size:12px;font-weight:700}
.parser-env-status.ok{background:#edf9f4;border-color:#bfe9d5;color:#087a4a}
.parser-env-status.warn{background:#fff7df;border-color:#f1d58a;color:#8a6200}

/* v0.9.18 — interface color themes */
/* v0.9.134: default (green) --ui-main was #00a86b — a slightly different
   shade from the app's own --green brand constant (#00b86b, used on
   buttons etc.) that the sidebar panel/tabs now derive their color from
   (v0.9.132). Per "#00b86b цвет панели поменяй на этот" unified the
   default theme's accent onto the same #00b86b so the panel matches the
   rest of the app's green exactly. Other theme presets (yellow/blue/…)
   are untouched. */
:root{--ui-main:#00b86b;--ui-main-dark:#058e5f;--ui-main-soft:#e9f8f2;--ui-on-main:#fff}
html[data-theme="yellow"]{--ui-main:#f2b705;--ui-main-dark:#d99f00;--ui-main-soft:#fff7d6;--ui-on-main:#202734}
html[data-theme="amber"]{--ui-main:#ffb100;--ui-main-dark:#e0a000;--ui-main-soft:#fff4d9;--ui-on-main:#202734}
html[data-theme="orange"]{--ui-main:#f28a18;--ui-main-dark:#d86f00;--ui-main-soft:#fff0df;--ui-on-main:#202734}
html[data-theme="red"]{--ui-main:#e5484d;--ui-main-dark:#c73338;--ui-main-soft:#fdecec;--ui-on-main:#fff}
html[data-theme="pink"]{--ui-main:#ea4c89;--ui-main-dark:#c93370;--ui-main-soft:#fdeaf2;--ui-on-main:#fff}
html[data-theme="purple"]{--ui-main:#7c5cff;--ui-main-dark:#6440e0;--ui-main-soft:#f0ecff;--ui-on-main:#fff}
html[data-theme="blue"]{--ui-main:#168bd2;--ui-main-dark:#0872b4;--ui-main-soft:#e8f4fc;--ui-on-main:#fff}
html[data-theme="teal"]{--ui-main:#0eb8a4;--ui-main-dark:#0a9686;--ui-main-soft:#e4f9f6;--ui-on-main:#202734}
/* v0.9.141: 4 новых акцента по просьбе («добавь больше вариаций цветов») —
   тем же принципом, что и остальные: --ui-on-main тёмный для светлых
   заливок (lime, как yellow/amber) и белый для достаточно тёмных (indigo,
   cyan, wine). Проверено по формуле контраста WCAG (относительная
   яркость): lime к тёмному тексту ~7.6:1, indigo/wine к белому ~6.3–6.6:1
   — с запасом. cyan к белому даёт только ~3.7:1 (как у blue, см. заливку
   кнопки чуть ниже) — поэтому у cyan, как и у blue/red/pink/purple, для
   .btn.primary отдельно взята более тёмная заливка. */
html[data-theme="lime"]{--ui-main:#84cc16;--ui-main-dark:#65a30d;--ui-main-soft:#f3fbe4;--ui-on-main:#202734}
html[data-theme="indigo"]{--ui-main:#4f46e5;--ui-main-dark:#3c34c2;--ui-main-soft:#ecebfd;--ui-on-main:#fff}
html[data-theme="cyan"]{--ui-main:#0891b2;--ui-main-dark:#076e8a;--ui-main-soft:#e1f5fa;--ui-on-main:#fff}
html[data-theme="wine"]{--ui-main:#a23361;--ui-main-dark:#84284e;--ui-main-soft:#fbe8f0;--ui-on-main:#fff}
/* v0.9.142: по просьбе («добавь просто светлый, типо белый» / «светлые
   оттенки нужны») — 2 нейтральных светлых варианта вместо цветного акцента,
   на тех же серых/белых тонах, что уже использует само приложение
   (--bg:#f4f6f8, --panel:#fff, --line:#e4e8ec), а не выдуманные новые
   оттенки. light — чуть сероватый (как фон контента), white — чистый
   белый. Оба идут в ту же «светлую» группу, что и yellow/amber/lime ниже
   (тёмный текст + светлые иконки рельсы). */
html[data-theme="light"]{--ui-main:#eef1f4;--ui-main-dark:#d8dee3;--ui-main-soft:#ffffff;--ui-on-main:#202734}
html[data-theme="white"]{--ui-main:#ffffff;--ui-main-dark:#e7eaed;--ui-main-soft:#f4f6f8;--ui-on-main:#202734}
/* v0.9.49: сами акцентные цвета — недостаточно тёмные/светлые, чтобы держать текст кнопки контрастным
   (WCAG AA, 4.5:1) при заливке кнопки основным цветом темы. Для orange/teal хватило тёмного текста
   (см. --ui-on-main выше), для red/pink/purple/blue понадобилась чуть более тёмная заливка именно
   у кнопки — на бренд-градиент сайдбара/шапки это не влияет, meняется только .btn.primary. */
html[data-theme="red"] .btn.primary,html[data-theme="red"] .btn.small.primary{background:#d34247!important;border-color:#d34247!important}
html[data-theme="pink"] .btn.primary,html[data-theme="pink"] .btn.small.primary{background:#cd4278!important;border-color:#cd4278!important}
html[data-theme="purple"] .btn.primary,html[data-theme="purple"] .btn.small.primary{background:#795af9!important;border-color:#795af9!important}
html[data-theme="blue"] .btn.primary,html[data-theme="blue"] .btn.small.primary{background:#147cbc!important;border-color:#147cbc!important}
html[data-theme="cyan"] .btn.primary,html[data-theme="cyan"] .btn.small.primary{background:#067b97!important;border-color:#067b97!important}
/* v0.9.142: у light/white заливка топбара сама почти белая, а «+ Клиент»
   там же принудительно белый (workspace-ux.css, единое для всех тем) — без
   отдельной рамки кнопка визуально сливалась бы с шапкой. Возвращаем ей
   обычную серую рамку, как у остальных .btn вне топбара. */
html[data-theme="light"] .topbar .btn.primary,html[data-theme="white"] .topbar .btn.primary{border-color:var(--line)!important;box-shadow:0 1px 3px rgba(20,39,33,.08)!important}
/* Проверено в браузере: внутри шапки (.topbar .btn.primary — «белая таблетка» на цветном
   градиенте шапки, см. правило ниже по файлу) текст у этой «таблетки» всегда тёмный (#202734,
   workspace-ux.css), а фон четырьмя строчками выше стал заливкой акцента темы — на red/pink/
   purple/blue это давало тёмный текст на насыщенном цветном фоне, контраст всего ~3.3:1 (нужно
   4.5:1). Явно возвращаем «таблетке» белый фон в этих четырёх темах, как у всех тем кроме зелёной
   (у зелёной — сознательное исключение, см. комментарий «тёплая CTA-кнопка» ниже). */
html[data-theme="red"] .topbar .btn.primary,
html[data-theme="pink"] .topbar .btn.primary,
html[data-theme="purple"] .topbar .btn.primary,
html[data-theme="blue"] .topbar .btn.primary{background:#fff!important;color:#202734!important;border-color:#fff!important}
html[data-theme="dark"]{--ui-main:#303945;--ui-main-dark:#202833;--ui-main-soft:#edf0f3;--ui-on-main:#fff}

.sidebar{background:linear-gradient(180deg,var(--ui-main),var(--ui-main-dark))!important}
.topbar{background:linear-gradient(90deg,var(--ui-main),var(--ui-main-dark))!important}
.btn.primary,.btn.small.primary{background:var(--ui-main)!important;border-color:var(--ui-main)!important;color:var(--ui-on-main)!important}
.nav button.active{background:rgba(255,255,255,.17)!important}
html[data-theme="yellow"] .sidebar,html[data-theme="yellow"] .topbar,html[data-theme="amber"] .sidebar,html[data-theme="amber"] .topbar,html[data-theme="lime"] .sidebar,html[data-theme="lime"] .topbar,html[data-theme="light"] .sidebar,html[data-theme="light"] .topbar,html[data-theme="white"] .sidebar,html[data-theme="white"] .topbar{color:#202734}
html[data-theme="yellow"] .nav button,html[data-theme="yellow"] .userbox,html[data-theme="yellow"] .topbar h1,html[data-theme="amber"] .nav button,html[data-theme="amber"] .userbox,html[data-theme="amber"] .topbar h1,html[data-theme="lime"] .nav button,html[data-theme="lime"] .userbox,html[data-theme="lime"] .topbar h1,html[data-theme="light"] .nav button,html[data-theme="light"] .userbox,html[data-theme="light"] .topbar h1,html[data-theme="white"] .nav button,html[data-theme="white"] .userbox,html[data-theme="white"] .topbar h1{color:#202734!important}
html[data-theme="yellow"] .nav-icon,html[data-theme="amber"] .nav-icon,html[data-theme="lime"] .nav-icon,html[data-theme="light"] .nav-icon,html[data-theme="white"] .nav-icon{stroke:#202734!important}
/* v0.9.141: «при выборе жёлтого — ярлыки не видны, направлял на чёрном» —
   строка выше красит ЛЮБУЮ .nav-icon/.nav button тёмно-синим (#202734) для
   светлых тем (yellow/amber, теперь и lime), включая те, что физически
   лежат в узкой ВСЕГДА-тёмной рельсе (.side-rail — вкладки-иконки SEO-
   инструментов; .side-footer-rail — шестерёнка настроек внизу). Их фон не
   зависит от темы (см. --sidebar constant), поэтому тёмно-синяя иконка на
   этом фоне (#202734 на #20252d) практически сливалась — контраст ~1.1:1.
   Возвращаем этим двум блокам их обычный светлый цвет более специфичным
   правилом (добавляя классы .side-rail/.side-footer-rail в селектор бьёт
   специфичность строк выше независимо от порядка подключения). Активная
   кнопка рельсы — отдельно, у неё заливка всегда фирменно-зелёная
   (var(--green)), а не цвет темы, поэтому белая иконка на ней контрастна
   при любой теме. */
html[data-theme="yellow"] .side-rail .nav button:not(.active),html[data-theme="amber"] .side-rail .nav button:not(.active),html[data-theme="lime"] .side-rail .nav button:not(.active),html[data-theme="light"] .side-rail .nav button:not(.active),html[data-theme="white"] .side-rail .nav button:not(.active),
html[data-theme="yellow"] .side-footer-rail .nav button,html[data-theme="amber"] .side-footer-rail .nav button,html[data-theme="lime"] .side-footer-rail .nav button,html[data-theme="light"] .side-footer-rail .nav button,html[data-theme="white"] .side-footer-rail .nav button{color:#c7ced8!important}
html[data-theme="yellow"] .side-rail .nav-icon,html[data-theme="amber"] .side-rail .nav-icon,html[data-theme="lime"] .side-rail .nav-icon,html[data-theme="light"] .side-rail .nav-icon,html[data-theme="white"] .side-rail .nav-icon,
html[data-theme="yellow"] .side-footer-rail .nav-icon,html[data-theme="amber"] .side-footer-rail .nav-icon,html[data-theme="lime"] .side-footer-rail .nav-icon,html[data-theme="light"] .side-footer-rail .nav-icon,html[data-theme="white"] .side-footer-rail .nav-icon{stroke:#c7ced8!important}
html[data-theme="yellow"] .side-rail .nav button.active .nav-icon,html[data-theme="amber"] .side-rail .nav button.active .nav-icon,html[data-theme="lime"] .side-rail .nav button.active .nav-icon,html[data-theme="light"] .side-rail .nav button.active .nav-icon,html[data-theme="white"] .side-rail .nav button.active .nav-icon{stroke:#fff!important}
/* v0.9.141: тот же класс проблемы — «тёмный» (.side-panel .sidebar-body,
   ~строка 1829) намеренно красит текст пунктов меню тёмно-зелёным
   (#0d2f20) — это хорошо смотрится на насыщенной цветной заливке (зелёный
   по умолчанию, синий, жёлтый и т.д.), но у встроенной темы «Тёмный»
   заливка сама по себе тёмно-серая (#303945) — тёмно-зелёный текст на ней
   практически не виден (контраст ~1.3:1 вместо нужных 4.5:1). Для этой
   темы возвращаем светлый (белый) текст/иконки — как и everywhere else в
   ней (--ui-on-main тут и так белый). */
html[data-theme="dark"] .side-panel .sidebar-body .nav button,html[data-theme="dark"] .side-panel .sidebar-body .nav-sub-row{color:#fff!important}
html[data-theme="dark"] .side-panel .sidebar-body .nav button .nav-icon{stroke:#fff!important}
html[data-theme="dark"] .side-panel .sidebar-body .nav button:not(.nav-caret):hover,html[data-theme="dark"] .side-panel .sidebar-body .nav button.active{background:rgba(255,255,255,.16)!important;color:#fff!important}
html[data-theme="dark"] .side-panel .sidebar-body .nav button:hover .nav-icon,html[data-theme="dark"] .side-panel .sidebar-body .nav button.active .nav-icon{stroke:#fff!important}
html[data-theme="dark"] .side-panel .sidebar-body .nav button.active:before{background:#fff!important}
html[data-theme="dark"] .side-panel .sidebar-body .nav-caret{color:rgba(255,255,255,.6)}

.topbar>div:last-child{position:relative}
.theme-settings-btn{width:34px;height:34px;border:1px solid rgba(255,255,255,.65);border-radius:9px;background:#fff;color:var(--ui-main-dark);display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.08)}
.theme-settings-btn:hover{transform:translateY(-1px)}
.theme-settings-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-popover{display:none;position:absolute;right:0;top:42px;width:218px;padding:13px;background:#fff;border:1px solid #dfe6e4;border-radius:12px;box-shadow:0 14px 36px rgba(20,39,33,.18);z-index:500;color:#202734}
.theme-popover.open{display:block}
.theme-popover-title{font-size:13px;font-weight:800;margin-bottom:10px}
.theme-swatches{display:flex;flex-wrap:wrap;gap:8px;max-width:190px}
.theme-swatch{width:28px;height:28px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #d6dddb;cursor:pointer}
.theme-swatch.active{box-shadow:0 0 0 2px #202734}
.theme-swatch.green{background:#00a86b}.theme-swatch.lime{background:#84cc16}.theme-swatch.yellow{background:#f2b705}.theme-swatch.amber{background:#ffb100}.theme-swatch.orange{background:#f28a18}.theme-swatch.red{background:#e5484d}.theme-swatch.wine{background:#a23361}.theme-swatch.pink{background:#ea4c89}.theme-swatch.purple{background:#7c5cff}.theme-swatch.indigo{background:#4f46e5}.theme-swatch.blue{background:#168bd2}.theme-swatch.cyan{background:#0891b2}.theme-swatch.teal{background:#0eb8a4}.theme-swatch.light{background:#eef1f4}.theme-swatch.white{background:#fff}.theme-swatch.dark{background:#303945}
.theme-current{margin-top:9px;font-size:11px;color:#697386}

/* v0.9.44 — свой фон интерфейса (личная настройка, хранится в браузере).
   v0.9.74: было background-size:cover + position:center — на широком
   экране это агрессивно обрезает картинку по бокам (background-size
   растягивает её по высоте окна, а лишнюю ширину обрезает поровну слева и
   справа), и если по центру картинки как раз пустое/прозрачное место (как
   у декоративных PNG с рисунком по центру), от фона не остаётся ничего
   видимого — выглядит как «фон не применился», хотя технически всё
   загрузилось и сохранилось. Меняем на contain + правый нижний угол —
   картинка всегда видна целиком, без непредсказуемой обрезки. */
body.has-custom-bg{background-image:var(--app-bg-image)!important;background-size:min(560px,60vw) auto;background-position:right bottom;background-attachment:fixed;background-repeat:no-repeat}
.bg-controls{margin-top:13px;padding-top:12px;border-top:1px solid #eef1f3}
.bg-controls .bg-row{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.bg-thumb{width:42px;height:30px;border-radius:6px;background:#eef1f4 center/cover no-repeat;border:1px solid #dfe6e4;flex:none}
.bg-upload-btn{font-size:11px;padding:6px 9px;position:relative;overflow:hidden}
.bg-upload-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.bg-hint{font-size:10px;color:#8b96a3;margin-top:6px}

/* v0.9.91: голый <input type="file"> рисовался браузером как системная
   кнопка с прямыми углами — на фоне скруглённых .btn вокруг (например,
   «Файлы отчётов» → «Выберите файл» + «Загрузить») это выглядело чужеродно.
   Скругляем саму рамку поля и его внутреннюю кнопку выбора файла под общий
   стиль .btn — без изменения разметки/логики загрузки. Точечно по id, а не
   общим input[type=file] — иначе сломали бы уже готовый приём с прозрачным
   input под своей .btn-подложкой (bg-upload-btn, logo-upload-btn,
   .task-inline-add), где рамка не нужна вовсе. */
#projectFileInput,#projectReportInput,#seoAttachmentFile,#calendarAttachmentFile{
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);
  padding:6px 9px;font:inherit;font-size:12px;max-width:100%;
}
#projectFileInput::file-selector-button,#projectReportInput::file-selector-button,
#seoAttachmentFile::file-selector-button,#calendarAttachmentFile::file-selector-button,
#projectFileInput::-webkit-file-upload-button,#projectReportInput::-webkit-file-upload-button,
#seoAttachmentFile::-webkit-file-upload-button,#calendarAttachmentFile::-webkit-file-upload-button{
  border:1px solid var(--line);border-radius:7px;background:#f4f7f6;color:var(--text);
  padding:6px 10px;margin-right:10px;font:inherit;font-size:12px;font-weight:650;cursor:pointer;
}
#projectFileInput::file-selector-button:hover,#projectReportInput::file-selector-button:hover,
#seoAttachmentFile::file-selector-button:hover,#calendarAttachmentFile::file-selector-button:hover,
#projectFileInput::-webkit-file-upload-button:hover,#projectReportInput::-webkit-file-upload-button:hover,
#seoAttachmentFile::-webkit-file-upload-button:hover,#calendarAttachmentFile::-webkit-file-upload-button:hover{
  background:#e9edf0;
}

/* v0.9.20 — call base compact data + settings popover stacking */
.topbar{position:relative;z-index:1000;overflow:visible!important}
.content{position:relative;z-index:1}
.theme-popover{z-index:10000!important}
.callbase-table{min-width:1220px}
.callbase-table th:nth-child(1){width:17%}
.callbase-table th:nth-child(2){width:12%}
.callbase-table th:nth-child(3){width:15%}
.callbase-table th:nth-child(4){width:20%}
.callbase-table th:nth-child(5){width:33%}
.callbase-table th:nth-child(6){width:3%}
.opener-cell{line-height:1.42;color:#394352;min-width:280px}

.parser-stop-btn{border-color:#efb0aa!important;color:#b52b22!important;background:#fff7f6!important}
.parser-stop-btn:not(:disabled):hover{background:#ffe9e7!important;border-color:#dd8078!important}
.parser-stop-btn:disabled{opacity:.45;cursor:not-allowed}

.callbase-head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.callbase-table{min-width:1400px}
.callbase-table th:nth-child(1){width:12%}
.callbase-table th:nth-child(2){width:15%}
.callbase-table th:nth-child(3){width:10%}
.callbase-table th:nth-child(4){width:13%}
.callbase-table th:nth-child(5){width:18%}
.callbase-table th:nth-child(6){width:29%}
.callbase-table th:nth-child(7){width:3%}
.niche-cell{font-weight:700;color:#3b4653;line-height:1.35}
.row-actions{white-space:nowrap;display:flex;gap:5px}

.btn.danger-soft{background:#fff5f4!important;border-color:#efb5af!important;color:#b52b22!important}
.btn.danger-soft:hover{background:#ffe9e7!important}
.seo-problems{margin:0;padding-left:18px;display:grid;gap:4px;line-height:1.35}
.seo-problems li::marker{font-weight:800;color:#d58f00}
.seo-no-errors{color:#66716d;font-size:12px}

.proposal-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.permission-grid{align-items:flex-start}

.settings-section-title{font-size:16px;font-weight:850;margin:22px 0 12px;padding-top:18px;border-top:1px solid var(--line,#e5ebe9)}
.settings-section-title:first-child{margin-top:0;padding-top:0;border-top:0}
.proposal-settings-grid textarea{min-height:90px}
.api-key-new-box{background:#fff8e6;border:1px solid #ffd979;border-radius:8px;padding:10px 12px;margin-bottom:12px}
.api-key-new-row{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.api-key-new-row code{flex:1;min-width:220px;background:#fff;border:1px solid #e4d69a;border-radius:6px;padding:7px 9px;font-size:12px;word-break:break-all}
.proposal-settings-grid .form-help{font-size:11px;color:var(--muted,#657083);margin-top:5px}

.site-logo-cell{width:52px;text-align:center}
.site-logo-wrap{width:34px;height:34px;border-radius:9px;border:1px solid #e2e9e6;background:#fff;display:grid;place-items:center;overflow:hidden}
.site-logo-wrap img{width:26px;height:26px;object-fit:contain}
.site-logo-fallback{display:none;width:100%;height:100%;place-items:center;font-size:13px;font-weight:850;background:#f1f5f3;color:#4b5b54}

.cal-task{position:relative;padding-right:4px}
.cal-task-main{cursor:pointer;padding-right:58px}
.cal-task-actions{display:flex;gap:3px;position:absolute;right:4px;top:4px;opacity:.18;transition:opacity .15s}
.cal-task:hover .cal-task-actions{opacity:1}
.cal-task-actions button{width:20px;height:20px;border:0;border-radius:5px;background:rgba(255,255,255,.86);font-size:12px;font-weight:900;cursor:pointer;display:grid;place-items:center;padding:0}
.cal-task-actions button:hover{background:#fff}
.cal-task-actions button.danger{color:#cf3535}

/* v0.9.32: destructive calendar action must look and behave clickable */
#calendarTaskDeleteBtn{background:#e23b32!important;color:#fff!important;border-color:#e23b32!important;cursor:pointer!important;opacity:1!important;pointer-events:auto!important;font-weight:850!important}
#calendarTaskDeleteBtn:hover{background:#c92f28!important;border-color:#c92f28!important}
#calendarTaskDeleteBtn:disabled{opacity:.65!important;cursor:wait!important}

.client-favicon-head,.client-favicon-cell{width:48px;min-width:48px;text-align:center}
.client-favicon{width:30px;height:30px;margin:auto;border-radius:8px;border:1px solid #e2e9e6;background:#fff;display:grid;place-items:center;overflow:hidden}
.client-favicon img{width:22px;height:22px;object-fit:contain}
.client-favicon span{display:none;width:100%;height:100%;place-items:center;background:#f1f5f3;color:#53615b;font-size:12px;font-weight:850}

/* v0.9.85: регулируемая ширина столбцов в «Клиенты»/«SEO-проекты» — общая
   таблица #clientsTable, тянуть можно за правый край заголовка любого
   столбца, кроме первого (иконка сайта). Ширина запоминается в браузере
   отдельно для каждого отдела (см. setupResizableColumns в app.js). */
table.resizable-cols{table-layout:fixed}
table.resizable-cols th{position:relative;overflow:hidden;text-overflow:ellipsis}
table.resizable-cols td{overflow:hidden;text-overflow:ellipsis}
table.resizable-cols td.client-comment-cell.editing{overflow:visible}
.col-resize-handle{position:absolute;top:0;right:-4px;bottom:0;width:8px;cursor:col-resize;z-index:4;touch-action:none}
.col-resize-handle:hover,.col-resize-handle.dragging{background:rgba(0,184,107,.4)}
body.col-resizing{cursor:col-resize!important;user-select:none}
body.col-resizing *{cursor:col-resize!important}

/* v0.9.83: колонка «Комментарий» в списке «Клиенты» — редактируется прямо
   в таблице, без открытия карточки (см. startInlineClientComment). */
.client-comment-cell{cursor:pointer;max-width:230px}
.client-comment-cell .comment-preview{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.client-comment-cell .client-comment-empty{cursor:pointer}
.client-comment-cell.editing{cursor:default;max-width:360px;padding:6px}
.client-comment-cell .inline-comment-editor{width:100%}
.client-comment-cell .inline-comment-editor .rich-editable{min-height:36px;max-height:160px}
.client-comment-cell .client-comment-empty{font-style:italic}
/* v0.9.86: узкая колонка — панель форматирования переносилась на две
   строки, поэтому в быстром редакторе прямо в таблице её убрали (см.
   startInlineClientComment); полное форматирование остаётся в карточке
   клиента, поле «Описание». */
.inline-comment-editor.no-toolbar .rich-editable{border:0}

/* v0.9.87: цвет метки статуса в списке = цвет его колонки в Канбане (см.
   KANBAN_GROUP_COLOR в app.js — единый источник цвета для списка и канбана,
   чтобы они не могли разъехаться). */
.status.k-blue{background:#e3f3ff;color:#0d6fb8}
.status.k-yellow{background:#fff6d6;color:#7a5f00}
.status.k-green{background:#e6f9ea;color:#1f9c46}
.status.k-teal{background:#e0f7f3;color:#0e8677}
.status.k-purple{background:#f1ecfe;color:#6a3fd6}
.status.k-gray{background:#eef1f2;color:#6d7683}

/* v0.9.87: статус можно сменить прямо в списке, не открывая карточку —
   клик по метке подменяет её на выпадающий список (см.
   startInlineClientStatus в app.js), цвет фона/текста тот же, что и у
   самой метки статуса. */
.client-status-cell,.task-status-cell{cursor:pointer}
.status-inline-select,.group-inline-select{border:0;border-radius:999px;padding:4px 22px 4px 7px;font-size:11px;font-weight:700;font:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;background-repeat:no-repeat;background-position:right 7px center;background-size:9px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23636c78' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* v0.9.89: раньше при клике на статус в списке было видно только неполную
   рамку фокуса (select ещё не успел раскрыть список) — теперь список
   раскрывается сразу (см. showPicker() в startInlineClientStatus), а саму
   рамку/подсветку фокуса убираем совсем, как просили. */
.status-inline-select:focus,.group-inline-select:focus{outline:none;box-shadow:none}

/* v0.9.86: «Следующий контакт» и «Комментарий» в списке «Клиенты» — если
   дело просрочено (дата в прошлом, а сделка ещё не закрыта), дата и текст
   комментария горят красным, а вся строка получает тёплую подсветку —
   как в референсном CRM (тонкая кремовая заливка + красный текст только
   там, где просрочка, а не по всей строке). */
.deals-overdue-row td{background:#fdf8ee}
.deals-overdue-row:hover td{background:#fbf1dc}
td.next-contact-cell.overdue{color:#c0392b;font-weight:750}
.client-comment-cell.overdue .comment-preview{color:#c0392b;font-weight:700}

/* v0.9.88: выбор кластеров перед формированием отчёта — «Все кластеры»
   (по умолчанию) или отметить несколько конкретных, см. #reportPositionsModal
   и toggleReportClusterList/startInlineClientStatus-подобный список в app.js. */
.rp-cluster-list{display:grid;gap:2px;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:6px;margin-top:8px}
.rp-cluster-row{display:flex;align-items:center;gap:8px;padding:5px 4px;font-size:13px;cursor:pointer;border-radius:6px}
.rp-cluster-row:hover{background:#f4f6f8}
.rp-cluster-row input{width:auto}
.rp-cluster-row .muted{margin-left:auto;font-size:11px}

/* v0.9.39 department switch */
.department-switch{margin:4px 10px 0;padding:0 0 0 2px;gap:2px}
.department-switch .folder-tab{flex:1;padding:9px 6px 8px;background:rgba(255,255,255,.10);color:rgba(255,255,255,.75);font:inherit;font-size:12px;font-weight:700;transform:translateY(3px)}
.department-switch .folder-tab.active{background:#fff;color:var(--green-dark,#009b59);box-shadow:0 -3px 10px rgba(0,0,0,.18);transform:translateY(0);z-index:2}
.nav-sales,.nav-seo{margin-top:10px}
[data-department-menu][hidden]{display:none!important}
body[data-department="seo"] .top-client-button{background:var(--green,#00b86b)}
.department-hero{display:none;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(120deg,#f4fff9,#fff)}
body[data-department="seo"] .department-hero{display:flex}
.department-hero>div{display:flex;flex-direction:column;gap:3px}.department-hero b{font-size:22px}.department-hero span{color:var(--muted);font-size:13px}
.seo-quick-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
.seo-quick-tools button{border:1px solid var(--line);background:#fff;border-radius:12px;padding:13px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:3px;min-height:68px}
.seo-quick-tools button:hover{border-color:var(--green);box-shadow:0 5px 18px rgba(0,184,107,.08)}.seo-quick-tools b{font-size:13px}.seo-quick-tools span{font-size:11px;color:var(--muted)}
.seo-quick-tools button.quick-tool-position{flex-direction:row;align-items:center;gap:10px;background:var(--mint);border-color:var(--mint-line)}
.seo-quick-tools button.quick-tool-position:hover{border-color:var(--green);box-shadow:0 5px 18px rgba(0,184,107,.14)}
.seo-quick-tools .qt-position-ic{width:38px;height:38px;border-radius:9px;overflow:hidden;flex:none;background:#fff;border:1px solid var(--mint-line)}
.seo-quick-tools .qt-position-ic img{width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block}
.seo-quick-tools .qt-position-txt{display:flex;flex-direction:column;gap:3px}
.seo-quick-tools .qt-position-txt b{color:var(--green-dark)}
/* v0.9.80: !important на display раньше побеждало атрибут hidden — кнопка
   «Проверить позиции» оставалась видимой и в карточке клиента отдела
   продаж, хотя JS (openClient) выставлял hidden=true. Ограничиваем
   правило состоянием :not([hidden]), чтобы hidden снова реально скрывал
   кнопку. */
.position-check-btn:not([hidden]){display:inline-flex!important;align-items:center;gap:6px}
.position-check-ic{width:22px;height:22px;border-radius:6px;overflow:hidden;flex:none;background:var(--mint);border:1px solid var(--mint-line)}
.position-check-ic img{width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block}
body[data-department="seo"] .top-client-button{background:var(--green)}

/* v0.9.41 — the sidebar header (logo + department tabs) stays in the
   interface accent color; only the body below it (nav buttons + user
   box), wrapped in .sidebar-body, is white — so the active tab reads
   as a page rising out of a colored folder spine. Overrides every
   earlier sidebar background rule (base dark, Bitrix-style green
   gradient, per-theme --ui-main gradient), which is why this sits
   last and repeats !important on the properties it touches. */
.sidebar{
  display:flex;flex-direction:column;padding:0;overflow:visible;
  background:linear-gradient(180deg,var(--ui-main),var(--ui-main-dark))!important;
  color:#fff;
}
.sidebar:before,.sidebar:after{display:none!important}
.brand{background:transparent!important;padding:14px 10px 14px!important;border-bottom:0!important}
.brand:after{display:none!important}
.brand small{color:rgba(255,255,255,.82)!important}
.department-switch{margin:0 10px 0!important;padding:0 0 0 2px}
.department-switch .folder-tab{background:rgba(255,255,255,.14);color:rgba(255,255,255,.8);box-shadow:none!important}
.department-switch .folder-tab.active{background:#fff;color:var(--ui-main-dark,#009b59);box-shadow:none!important}
.sidebar-body{
  background:#fff;flex:1;min-height:0;display:flex;flex-direction:column;
  padding:14px 10px 12px;border-radius:14px 14px 0 0;margin-top:-1px;
  position:relative;overflow-y:auto;
}
.sidebar-body .nav{padding:0;display:flex;flex-direction:column;gap:3px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
/* v0.9.103 — на низких экранах .nav сжимался (flex:1;min-height:0), но без
   собственного overflow его лишние пункты не обрезались и не скроллились —
   они просто визуально вылезали (overflow:visible) поверх .userbox под ним,
   и «Alexandr / Выйти» накладывались на «SEO-инструменты» / «Команда».
   Даём .nav свою полосу прокрутки, чтобы пункты меню скроллились внутри
   своей области и никогда не наезжали на блок пользователя. */
.sidebar-body .nav::-webkit-scrollbar{width:5px}
.sidebar-body .nav::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:3px}
.sidebar-body .nav button{color:var(--text)!important;font-weight:600}
.sidebar-body .nav button:not(.nav-caret):hover,.sidebar-body .nav button.active{background:#eef5f0!important;color:var(--green-dark)!important}
.sidebar-body .nav button.active:before{background:linear-gradient(var(--green),var(--orange))}
.sidebar-body .nav .sep{background:var(--line)!important}
/* v0.9.90: пункт «Настройки» всегда прижат к низу меню (над блоком
   пользователя), а не просто идёт последним в потоке — одинаково и в
   отделе продаж, и в SEO/проектах. */
.sidebar-body .nav button[data-page="settings"]{margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
/* v0.9.91: без flex-shrink:0 браузер сжимал пункты меню (когда все строки
   не помещались по высоте) — вместо прокрутки шестерёнка «Настройки»
   вылезала за свою же верхнюю границу и наезжала на разделительную линию.
   Запрещаем сжатие пунктов меню — если места не хватает, .sidebar-body
   (overflow-y:auto) просто покажет полосу прокрутки. */
.sidebar-body .nav>*{flex-shrink:0}
.sidebar-body .userbox{flex-shrink:0}
.sidebar-body .userbox{
  position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;
  margin-top:auto;padding-top:10px;border-top:1px solid var(--line)!important;
}
.sidebar-body .userbox .name{color:var(--text)!important}
.sidebar-body .userbox .role{color:var(--muted)!important}
.sidebar-body .userbox a{color:var(--green-dark)!important}
html[data-theme] .sidebar-body .nav button,html[data-theme] .sidebar-body .userbox,html[data-theme] .sidebar-body .userbox a{color:var(--text)!important}
html[data-theme] .sidebar-body .nav-icon{stroke:currentColor!important}
html[data-theme] .sidebar-body .nav button:not(.nav-caret):hover,html[data-theme] .sidebar-body .nav button.active{color:var(--green-dark)!important}
html[data-theme="yellow"] .brand small,html[data-theme="yellow"] .department-switch .folder-tab{color:rgba(32,39,52,.75)!important}
html[data-theme="yellow"] .department-switch .folder-tab.active{color:#202734!important}
@media(max-width:900px){.sidebar{padding:0!important;box-shadow:14px 0 40px rgba(20,45,35,.14)}}

/* ===== v0.9.121 — two-column sidebar: icon rail + department panel + unified footer =====
   Approved mockup: a narrow green icon rail on the left holds the brand mark, the vertical
   department switch and the two nav items shared by both departments (Сегодня/Календарь);
   a wider dark panel on the right holds the department-specific text list (unchanged
   nav-sales/nav-seo blocks, just narrower); a single footer bar spans the full sidebar width
   with ONE shared border-top (the admin/leader gear on the rail side, the user profile on the
   panel side) instead of two separately-bordered halves. .sidebar stays the flex column the
   v0.9.41 rule above made it; .side-top is the scrollable row (rail+panel), .side-footer is a
   second flex row pinned under it, so the border-top of .side-footer itself is the single
   dividing line — never drawn per-half. Selectors below intentionally carry extra classes
   (.side-rail/.side-panel/.side-footer-* prefixes) so they out-specificity the pre-existing
   .sidebar-body/.nav rules above and in workspace-ux.css (loaded last) without needing to
   touch either of those blocks. */
.side-top{display:flex;flex:1;min-height:0;overflow:hidden}
.side-footer{display:flex;flex:0 0 auto;width:100%;border-top:1px solid rgba(0,0,0,.18)}

/* --- rail (icon-only, shared by both departments) — v0.9.122: swapped to
   dark (was green) per user feedback ("черный с лева, зеленый с права");
   toggle/active states reuse the app's native green-accent-on-dark look
   instead of the earlier custom dark-on-green pill, which read poorly. --- */
.side-rail{flex:0 0 64px;width:64px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px 10px;overflow-y:auto;background:linear-gradient(180deg,#262c36,var(--sidebar,#20252d))}
.side-rail .brand{background:transparent!important;padding:0!important;margin:0 0 2px!important;border-bottom:0!important;min-height:0;display:flex;justify-content:center!important;align-items:center;width:100%}
.side-rail .brand:after{display:none!important}
.side-rail .brand-mark{width:36px;height:36px;object-fit:cover;object-position:center;border-radius:10px;display:block;background:#fff;border:0}
/* v0.9.123: real iOS-style slide switch per user reference (two screenshots
   of a green/gray on-off toggle) — a pill track with a sliding round knob,
   instead of the earlier two-button pill. No new markup needed: the two
   existing .folder-tab buttons become invisible full-track hit zones (left
   half = SEO, right half = Продажи) and the knob + track color are pure
   CSS driven by :has(), reading which button already carries .active
   (set by the existing setDepartment() JS, unchanged). */
/* v0.9.124: department switch re-styled as a pair of stacked "folder tabs",
   reusing the exact visual language of this app's own .tool-document-tab
   (static/tool-documents.css — the SEO-tool tabs docked at the screen edge:
   rounded outer corner, folded-corner accent, vertical rotated label) per
   user reference — "такого же дизайна" (same design as that). */
/* v0.9.126: actual paper-folder silhouette per user feedback ("как будто
   это папка для бумаг") — each tab is a body + a narrower raised nub
   sticking up from its top-left edge, like a manila folder tab, instead of
   a plain rounded card. Same color/--tab-bg for nub and body so they read
   as one continuous cut-out shape. */
/* v0.9.127: fanned/cascading pockets per user's follow-up reference (photo
   of a concertina/accordion paper folder, each colored divider's tab
   peeking a little further forward than the one behind it, search query
   "папка для бумаг"). The inactive tab now sits indented with a narrower
   nub, as if tucked behind; the active tab steps forward flush-left with a
   wider nub and a deeper shadow, as if it were the pocket pulled to the
   front of the fan — same continuous nub+body silhouette as v0.9.126. */
/* v0.9.128: per feedback ("кнопка должна выглядеть как язычок раздела") the
   nub was a separate absolutely-positioned pseudo-element sitting ~1px
   above the body — at low opacity (inactive state) that seam read as two
   disconnected floating chips instead of one tab. Replaced with a single
   clip-path silhouette (nub+body cut from ONE box, no seam possible) so
   the button is literally one die-cut "язычок" shape, like a real folder
   divider tab, not a card with a sticker on top. */
/* v0.9.129: user mocked this up in Photoshop by pasting the app's OWN real
   .tool-document-tab elements (the open-SEO-tool tabs docked on the screen
   edge) straight onto the rail — so this now matches that component
   directly: solid flat fill per state (not translucent), the same
   diagonal folded-paper-corner accent, and a small icon stacked above the
   vertical label. Per follow-up feedback ("форма" + "отделена от блока")
   the earlier die-cut notch (clip-path) and the fan-style indent/width
   change on the inactive tab were both wrong — the REAL component is just
   a plain rounded rectangle, flush full-width, no notch and no gap/inset;
   only its shadow (and here, fill color) changes when active. Matched
   that exactly: same border-radius profile as .tool-document-tab
   (15px 0 0 4px). */
/* v0.9.130: per "она должна быть вместе с меню,
   как бы её же часть" — the tab should read as an outgrowth of the PANEL
   (the green department menu), not a button that lives inside the dark
   rail. So the tab now bleeds through the rail's own right padding to
   touch the rail/panel seam with zero gap (root/attachment edge = right,
   same as the real .tool-document-tab's root is the screen edge). The
   free/outer end (pointing into the rail) stays on the left, rounded —
   same radius order as the real component, no mirroring needed since the
   attachment side (right, at the panel) plays the same role their screen
   edge does.
   v0.9.130 follow-up: the active tab first used the panel's own two-stop
   gradient as its fill, but the tab (118px tall) and the panel (its full
   ~820px rendered height) compute that gradient over different box
   heights, so the colors didn't line up at the seam — visible as a thin
   border. First try used a flat #00c877 (the gradient's own top stop),
   which was closer but still ~10/255 off — because the tab doesn't sit at
   the panel's very top, the panel's gradient has already drifted a bit
   toward its darker stop by the tab's vertical position. Measured the
   panel's actual on-screen color at the tab's height (~30% down its
   gradient) and used THAT flat value (#00be70) instead, so the two now
   match within a couple of RGB units across the tab's whole height, and
   pulled the shadow's spread in (negative spread on box-shadow) so it
   doesn't bleed across
   onto the panel side either. */
/* v0.9.132: per "зелёный цвет должен быть един и при смене цвета в
   настройках полностью меняться" — the rail/panel green was hardcoded
   (#00c877 etc.), completely ignoring the theme accent picker
   (html[data-theme=...] → --ui-main/--ui-main-dark/--ui-on-main, see
   ~line 1344). Panel + footer-panel + both department tabs now derive
   from those theme tokens instead, so switching the accent color in
   Настройки recolors the whole sidebar, not just buttons. This also kills
   the old gradient-seam problem for good: panel/footer-panel/active tab
   are now all the SAME flat --ui-main (no two-stop gradient to
   mis-compute across different box heights), so they always match
   exactly regardless of theme. Per "язычок неактивный тоже должен быть
   зеленый но потемнее" the inactive tab uses --ui-main-dark (darker
   shade of the SAME hue, not an unrelated neutral gray) and the active
   one --ui-main (lighter) — "при активности становится светлее а второй
   темнее". Text/icon color uses --ui-on-main so contrast stays correct
   on light accents too (yellow/amber use dark-on-light there already).
   v0.9.133: per "сделай высоту и ширину язычка такой же как справа" —
   sized the tab to match the real .tool-document-tab exactly instead of
   the custom 58×118px used before: width:var(--tool-rail-width) (44px,
   36px under the tool-tabs' own ≤600px breakpoint) and the same
   height:clamp(124px,23vh,168px). The tab no longer stretches to the
   department-switch container's full (panel-touching) width, so the
   container now right-aligns it (align-items:flex-end) to keep the
   right edge flush against the panel seam from v0.9.130 — only the tab's
   own footprint got narrower, the "merged with the panel" edge didn't
   move. */
.side-rail .department-switch{position:relative;margin:0 -6px 10px 0!important;padding:0!important;width:calc(100% + 6px);display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.side-rail .department-switch .folder-tab{position:relative;flex:none;width:var(--tool-rail-width,44px);height:clamp(124px,23vh,168px);margin:0;padding:0;border:0;transform:none!important;border-radius:15px 0 0 4px!important;--tab-bg:var(--ui-main-dark,#058e5f);background:var(--tab-bg)!important;color:var(--ui-on-main,#fff)!important;opacity:.82;box-shadow:-3px 3px 10px rgba(0,0,0,.22)!important;min-height:0;cursor:pointer;isolation:isolate;transition:background .15s ease,box-shadow .15s ease,color .15s ease,opacity .15s ease}
.side-rail .department-switch .folder-tab:after{content:"";position:absolute;bottom:0;left:0;width:10px;height:10px;background:linear-gradient(45deg,#fff5 49%,#0000 51%);pointer-events:none}
.side-rail .department-switch .folder-tab:hover{opacity:.94}
.side-rail .department-switch .folder-tab.active{background:var(--ui-main,#00a86b)!important;color:var(--ui-on-main,#fff)!important;opacity:1;box-shadow:-6px 5px 14px -4px rgba(0,0,0,.34)!important;z-index:2}
.side-rail .dept-tab-content{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.side-rail .dept-tab-icon{width:16px;height:16px;flex:none;fill:currentColor}
.side-rail .dept-tab-label{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;line-height:1.25;font-weight:800;letter-spacing:.02em}
/* v0.9.155: «убери иконку, напиши просто SEO и ОП» — язычки вернулись к
   чистому тексту без пиктограммы (перебирали варианты значков, ни один не
   зашёл — проще и понятнее просто подписью). «Продажи» сократили до «ОП»
   (отдел продаж) по той же просьбе — раньше не помещалось бы так коротко,
   но без иконки под текст освобождается место, и gap для icon+label
   (родительское правило выше) для одного child ничего не даёт — обнуляем
   его отдельным классом, плюс чуть крупнее шрифт, раз иконка больше не
   отбирает вертикальное место. */
.side-rail .dept-tab-content-text{gap:0}
.side-rail .dept-tab-content-text .dept-tab-label{font-size:13px;letter-spacing:.03em}
.side-rail .nav.nav-rail{display:flex;flex-direction:column;gap:4px;width:100%;padding:0;margin:4px 0 0}
.side-rail .nav.nav-rail button{width:100%;justify-content:center;padding:10px 4px!important;border-radius:9px!important;background:transparent!important;color:#c7ced8!important}
.side-rail .nav.nav-rail button .nav-icon{stroke:#c7ced8}
.side-rail .nav.nav-rail button:hover{background:rgba(255,255,255,.08)!important}
.side-rail .nav.nav-rail button.active{background:var(--green,#00b86b)!important}
.side-rail .nav.nav-rail button.active .nav-icon{stroke:#fff}
.side-rail .nav.nav-rail button.active:before{display:none!important}

/* --- panel (department-specific text list) — v0.9.122: swapped to green
   (was dark) per user feedback. --- */
.side-panel{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--ui-main,#00a86b)}
.side-panel .sidebar-body{background:transparent!important;border-radius:0!important;margin-top:0!important;padding:10px 8px!important}
.side-panel .sidebar-body .nav{padding:0}
/* html/body prefixed on the color rules below: the existing
   html[data-theme] .sidebar-body .nav button{color:var(--text)!important}
   overrides (app.css, ~line 1659) count "html" as an extra element in their
   specificity, which otherwise beats a plain .side-panel .sidebar-body .nav
   button selector even though ours has more classes — verified via computed
   style in Chromium, text was rendering as var(--text) navy on the panel
   until this was added. */
html body .side-panel .sidebar-body .nav button,.side-panel .sidebar-body .nav-sub-row{color:#0d2f20!important;font-weight:650!important}
.side-panel .sidebar-body .nav button .nav-icon{stroke:#0d3d28!important}
html body .side-panel .sidebar-body .nav button:not(.nav-caret):hover,html body .side-panel .sidebar-body .nav button.active{background:rgba(0,0,0,.12)!important;color:#08201a!important}
.side-panel .sidebar-body .nav button:hover .nav-icon,.side-panel .sidebar-body .nav button.active .nav-icon{stroke:#08201a!important}
.side-panel .sidebar-body .nav button.active:before{background:#0d2f20!important}
.side-panel .sidebar-body .nav .sep{background:rgba(0,0,0,.14)!important}
.side-panel .sidebar-body .nav-caret{color:rgba(13,47,32,.6)}
/* v0.9.135: "убери эту обводку квадратом которая вертится при нажатии" —
   этот hover-фон растягивался на всю высоту строки (.nav-row{align-items:
   stretch}), а у «SEO-инструменты» строка в 2 строки текста, из-за чего
   получался вытянутый прямоугольник позади стрелки, который к тому же
   вращался вместе с кнопкой при открытии/закрытии списка. Убрали фон
   совсем — при наведении меняется только цвет самой стрелки.
   Оказалось, что этого недостаточно: в приложении оказалось СРАЗУ 3
   более общих правила вида ".nav button:hover{background:...!important}",
   которые красят фоном ЛЮБУЮ кнопку внутри .nav при наведении (включая
   .nav-caret — это тоже <button>) и, благодаря !important, побеждают
   более специфичное правило ниже независимо от порядка подключения
   файлов: базовое (app.css ~1645, обычный/дефолтный сайдбар),
   панельное (app.css ~1820, зелёная .side-panel) и ещё одно —
   workspace-ux.css ~105 (он подключается последним и был реальной
   причиной, которая всё ещё показывала фон после первых двух правок).
   Во все три добавлено :not(.nav-caret), чтобы стрелку больше нигде не
   красило. Проверено Playwright: фон у стрелки прозрачный (rgba(0,0,0,0))
   в hover/открытом состоянии для обоих раскрывающихся списков, в зелёной
   и синей теме, в обоих отделах — а обычные пункты меню по-прежнему
   подсвечиваются при наведении как раньше. */
.side-panel .sidebar-body .nav-caret:hover{background:transparent;color:#08201a}
.side-panel .sidebar-body .nav-sub-row:hover{background:rgba(0,0,0,.12)!important;color:#08201a!important}
.side-panel .sidebar-body .project-mini-favicon.placeholder{background:rgba(255,255,255,.5)}

/* --- unified footer bar — colors follow the rail(dark)/panel(green) swap above --- */
.side-footer-rail{flex:0 0 64px;width:64px;background:var(--sidebar,#20252d);display:flex;align-items:center;justify-content:center;padding:8px 0}
.side-footer-rail .nav{padding:0;width:100%;display:flex;justify-content:center}
.side-footer-rail .nav button{width:38px;height:38px;padding:0!important;border-radius:9px!important;background:transparent!important;display:flex;align-items:center;justify-content:center;color:#c7ced8!important}
.side-footer-rail .nav button .nav-icon{stroke:#c7ced8}
.side-footer-rail .nav button:hover{background:rgba(255,255,255,.10)!important}
.side-footer-panel{flex:1;min-width:0;background:var(--ui-main,#00a86b);padding:10px 12px;display:flex;align-items:center}
.side-footer-panel .userbox{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;border-top:0!important;padding-top:0!important;margin:0!important;width:100%}
.side-footer-panel .userbox .name{color:#08201a!important}
.side-footer-panel .userbox .role{color:rgba(13,47,32,.72)!important}
.side-footer-panel .userbox a{color:#0d2f20!important}
.side-footer-panel .userbox .app-build-version{color:rgba(13,47,32,.72)!important}

.logo-settings-body{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.logo-preview-box{width:64px;height:64px;border:1px solid var(--line);border-radius:10px;background:#fafbfc;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.logo-preview-box img{max-width:100%;max-height:100%;object-fit:contain}
.logo-preview-box-wide{width:120px;height:88px}
.proposal-assets-body{display:flex;flex-direction:column;gap:16px}
.logo-settings-actions{display:flex;gap:8px;flex-wrap:wrap}
.logo-upload-btn{position:relative;overflow:hidden}
.logo-upload-btn input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
@media(max-width:1050px){.seo-quick-tools{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.seo-quick-tools{grid-template-columns:1fr}.department-hero{align-items:flex-start;flex-direction:column}}

/* --- Раскрывающийся список SEO-проектов в меню --- */
.nav-row{display:flex;align-items:stretch;gap:2px}
.nav-row .nav-row-main{flex:1;min-width:0}
/* v0.9.134: "стрелка странно переворачивается при нажатии" — .nav-caret
   был обычной <button> с текстовым глифом "▾" без явного центрирования
   (только flex:0 0 30px по ширине в родительском .nav-row, без
   display:flex/align-items на самой кнопке). rotate(180deg) крутится
   вокруг геометрического центра БОКСА кнопки, а не вокруг оптического
   центра глифа — если глиф в боксе не отцентрован (высота бокса
   растягивается на всю строку через align-items:stretch у .nav-row, а
   текст внутри выравнивается по умолчанию браузера, не по центру по
   вертикали), при повороте он визуально "прыгает" в сторону, а не
   просто переворачивается на месте. Добавили явное центрирование —
   теперь ось вращения совпадает с центром глифа. */
.nav-caret{flex:0 0 30px;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:#c7ced8;border-radius:8px;font-size:12px;line-height:1;transition:transform .15s;transform-origin:center;-webkit-tap-highlight-color:transparent}
.nav-caret:hover{background:transparent;color:#fff}
.nav-caret.open{transform:rotate(180deg)}
.nav-sublist{display:grid;gap:2px;padding:2px 0 4px 14px;max-height:260px;overflow:auto}
/* Цвет и hover-состояние живут в .sidebar-body .nav-sub-row (workspace-ux.css) — там более
   специфичный селектор, и старые значения ниже (#c7ced8 / var(--sidebar2)+#fff) никогда не
   применялись, только сбивали с толку при чтении темы. */
.nav-sub-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;cursor:pointer;font-size:12px}
.project-mini-favicon{width:16px;height:16px;border-radius:4px;flex:0 0 16px;background:#3a4150}
.project-mini-favicon.placeholder{display:inline-block}
.project-mini-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* тот же раскрывающийся список, но для пункта «SEO-инструменты»: цветной
   мини-ярлычок с тем же глифом, что и в столбике вкладок инструмента (TOOL_TABS) */
.tool-mini-icon{display:flex;align-items:center;justify-content:center;width:20px;height:18px;border-radius:5px;flex:0 0 20px;font-size:9px;font-weight:800;letter-spacing:.01em}
.tool-mini-icon svg{width:12px;height:12px}

/* --- Общий календарь компании --- */
.calendar-shell{display:grid;grid-template-columns:230px 1fr;gap:14px;align-items:start}
.calendar-side{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px}
.calendar-nav-mini{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:14px}
.calendar-side-block{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.calendar-side-title{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:8px;text-transform:uppercase}
.calendar-layer-check{display:flex;align-items:center;gap:7px;font-size:12px;padding:4px 0;cursor:pointer}
.calendar-type-row{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:2px 0}
.calendar-type-row .calendar-layer-check{flex:1;min-width:0}
.calendar-type-actions{display:flex;gap:2px;flex:0 0 auto}
.mini-icon-btn{border:0;background:transparent;color:var(--muted);border-radius:6px;padding:2px 5px;font-size:11px}
.mini-icon-btn:hover{background:#eef1f4;color:var(--text)}
.color-dot{width:11px;height:11px;border-radius:50%;flex:0 0 11px;display:inline-block;cursor:pointer;border:1px solid rgba(0,0,0,.15)}
.calendar-main{padding:0}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line)}
.calendar-grid-week-labels{background:#fafbfc;margin-bottom:1px}
.cal-weekday{padding:8px 6px;text-align:center;font-size:11px;font-weight:700;color:var(--muted);background:#fafbfc}
.cal-blank{background:#fbfcfd;min-height:96px}
.cal-day{background:#fff;min-height:96px;max-height:230px;padding:6px;display:flex;flex-direction:column;gap:3px;cursor:pointer;overflow-y:auto;overflow-x:hidden}
.cal-day .num{position:sticky;top:-6px;background:#fff;z-index:1;margin:-6px -6px 0;padding:6px 6px 2px}
.cal-day.today .num{background:#f3fbf6}
.cal-day.today{background:#f3fbf6}
.cal-day .num{display:flex;align-items:baseline;gap:5px;font-weight:700;font-size:12px}
.cal-day .num small{font-weight:600;font-size:9px;color:var(--green-dark)}
.cal-event{border-radius:5px;padding:2px 5px;font-size:10.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.cal-event.holiday-pill{background:#fff4da;color:#966900;cursor:default}
.cal-event.birthday-pill{background:#fdeef7;color:#a3186f;cursor:default}
.cal-event.vacation-pill{background:#e7f4fd;color:#136ba3;cursor:default;white-space:normal;overflow:visible;text-overflow:clip;font-weight:600}
@media(max-width:900px){.calendar-shell{grid-template-columns:1fr}}

/* --- Специалисты / Менеджеры: список + карточка сотрудника --- */
.manager-list-toolbar{margin-bottom:12px}
.manager-detail-back{margin-bottom:12px}
.manager-detail-layout{display:grid;grid-template-columns:320px 1fr;gap:14px;align-items:start}
.manager-detail-head{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid var(--line)}
.manager-avatar{width:46px;height:46px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800;font-size:17px;flex:0 0 46px}
.manager-avatar-wrap{position:relative;flex:0 0 46px;width:46px;height:46px}
.manager-avatar-wrap #mdAvatar .avatar-wrap{width:46px !important;height:46px !important;font-size:18px !important}
.avatar-edit-btn{position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;border:2px solid #fff;background:var(--blue);color:#fff;font-size:10px;display:grid;place-items:center;padding:0;cursor:pointer;line-height:1}
.avatar-edit-icon{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.readonly-card .avatar-edit-btn{display:none}
.manager-detail-tabs{display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--line)}
.manager-detail-tab{border:0;background:transparent;padding:8px 11px;border-radius:8px;font-weight:650;color:var(--muted)}
.manager-detail-tab.active{background:#eef5f0;color:var(--green-dark)}
.manager-detail-pane{display:none;padding:14px}
.manager-detail-pane.active{display:block}
.employee-stat-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.employee-time-day-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:7px 9px;border-bottom:1px solid #edf0f2;font-size:12.5px}
.switch-check{display:flex;align-items:center;gap:8px;padding:5px 0}
.account-status-toggle{display:flex;align-items:center;gap:9px;border:1px solid #dfe4e8;border-radius:8px;padding:8px 9px;background:#fff;min-height:16px}
.account-status-toggle #mdFieldActiveText{font-weight:650}
.account-status-toggle #mdFieldActiveText.is-off{color:var(--muted);font-weight:500}
.manager-detail-view.readonly-card .toggle-switch,#managerDetailView.readonly-card .toggle-switch{opacity:.6;pointer-events:none}
@media(max-width:900px){.manager-detail-layout{grid-template-columns:1fr}}

/* --- Задачи: боковое меню (Все задачи / Шаблоны / Планировщик / Корзина) --- */
.tasks-shell{display:grid;grid-template-columns:200px 1fr;gap:14px;align-items:start;position:relative}
.tasks-shell>div{min-width:0}
/* Явно закрепляем колонки за элементами: когда .tasks-side скрывается
   (display:none) при сворачивании, она выпадает из авто-размещения грида —
   без явного grid-column вторая (контентная) колонка съедет в первую
   освободившуюся дорожку вместо второй и схлопнется до 0 ширины. */
.tasks-side{grid-column:1}
.tasks-shell>div:not(.tasks-side){grid-column:2}

/* Кнопка сворачивания бокового меню — не участвует в сетке (position:absolute),
   поэтому не ломает раскладку .tasks-shell на 2 колонки. */
.tasks-side-toggle{position:absolute;top:14px;left:200px;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;box-shadow:0 2px 6px rgba(20,39,33,.12);padding:0;font-size:13px;line-height:1;color:var(--muted);transition:left .15s ease}
.tasks-side-toggle:hover{color:var(--text);border-color:#c8d0d6}
.tasks-shell.side-collapsed{grid-template-columns:0px 1fr;gap:0}
.tasks-shell.side-collapsed .tasks-side{display:none}
.tasks-shell.side-collapsed .tasks-side-toggle{left:0}
.tasks-side{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px}
.tasks-side-item{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;text-align:left;padding:9px 10px;border-radius:8px;font-weight:650;color:var(--text)}
.tasks-side-item:hover{background:#f1f4f6}
.tasks-side-item.active{background:#eef5f0;color:var(--green-dark)}
.tasks-side-item.disabled{color:var(--muted);cursor:default;opacity:.65}
.tasks-side-item.disabled:hover{background:transparent}
.tasks-main-pane{display:none}
.tasks-main-pane.active{display:block}
.template-row,.trash-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid #edf0f2}
.template-row .t-main b{display:block}
.template-row .t-main span{color:var(--muted);font-size:11.5px}
.trash-row .t-main b{display:block}
.trash-row .t-main span{color:var(--muted);font-size:11.5px}
.trash-days-left{font-size:11px;color:#b73535;background:#fceeee;border-radius:999px;padding:3px 8px;white-space:nowrap}

/* --- Карточка клиента/проекта во всю ширину --- */
/* v0.9.79: раньше во всю ширину открывалась только карточка SEO-проекта
   (.project-mode), а карточка клиента отдела продаж была вдвое уже (760px) —
   не было причины держать их разной ширины, обе теперь используют базовую
   ширину .drawer (задана выше), здесь остаётся только десктопное ограничение. */
/* На десктопе (сайдбар — статичная колонка шириной 220px, см. .app) ширина
   96vw реально перекрывала почти весь сайдбар — клик по пункту меню, пока
   открыта карточка, физически попадал в карточку поверх меню, а не в
   само меню, и не срабатывал вообще. Ограничиваем ширину, чтобы левый край
   карточки никогда не заходил на сайдбар. На мобильном (≤900px) сайдбар уходит
   за экран (off-canvas), поэтому там это ограничение не нужно и не применяется. */
@media(min-width:901px){
  .drawer{width:min(1400px,96vw,calc(100vw - 220px))}
}
.drawer-body.project-body{padding:0;display:flex;flex-direction:column}
.drawer-body.project-body[hidden]{display:none!important}
.project-tabs-shell{display:grid;grid-template-columns:210px 1fr;gap:0;flex:1;min-height:0;position:relative}
/* Колонки закреплены явно: без этого, когда .project-tabs-side скрывается
   через display:none при сворачивании меню, авто-расстановка грида отдаёт
   единственный оставшийся элемент (.project-tabs-main) первой колонке —
   а она в свёрнутом состоянии 0px шириной, и весь контент карточки проекта
   визуально пропадает. */
.project-tabs-side{grid-column:1;background:#fafbfc;border-right:1px solid var(--line);padding:14px 10px;display:grid;gap:2px;align-content:start}
.project-tabs-main{grid-column:2}
.project-tab-item{display:block;width:100%;border:0;background:transparent;text-align:left;padding:9px 10px;border-radius:8px;font-weight:650;color:var(--text)}
.project-tab-item:hover{background:#eef1f4}
.project-tab-item.active{background:#eef5f0;color:var(--green-dark)}
/* Пункты меню карточки проекта, которые не переключают вкладку внутри
   карточки, а уводят на отдельную страницу («Позиции сайта»,
   «Кластеризация сайта») — стрелка справа как визуальная подсказка. */
.project-tab-item.project-tab-nav{display:flex;align-items:center;justify-content:space-between;gap:6px}
.project-tab-item.project-tab-nav::after{content:'↗';font-weight:400;color:var(--muted);font-size:12px}
.project-tabs-sep{margin:12px 4px 4px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:700}
.project-tabs-main{padding:16px 18px;overflow:auto}
/* Сворачивание меню карточки проекта — тот же паттерн, что и у «Задачи»/
   «Команда» (see .tasks-side-toggle), но отдельная реализация, чтобы не
   пересекаться с их сеткой. */
.project-tabs-toggle{position:absolute;top:14px;left:210px;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;box-shadow:0 2px 6px rgba(20,39,33,.12);padding:0;font-size:13px;line-height:1;color:var(--muted);transition:left .15s ease}
.project-tabs-toggle:hover{color:var(--text);border-color:#c8d0d6}
.project-tabs-shell.side-collapsed{grid-template-columns:0px 1fr}
.project-tabs-shell.side-collapsed .project-tabs-side{display:none}
.project-tabs-shell.side-collapsed .project-tabs-toggle{left:0}
.project-pane .card{margin-bottom:0}
.file-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid #edf0f2}
.file-row a{color:var(--blue);text-decoration:none;font-weight:650;flex:1}
.task-type-pill{display:inline-flex;padding:3px 8px;border-radius:999px;background:#eef1f4;font-size:11px;font-weight:650;color:#4d5661}
.star-btn{border:0;background:transparent;cursor:pointer;font-size:16px;color:#c7ced8;line-height:1;padding:0}
.star-btn.active{color:#f2c94c}
.cost-input{width:74px;border:1px solid #dfe4e8;border-radius:6px;padding:4px 6px}
/* v0.9.140: приоритет в таблице «Задачи проекта» — select без класса
   наследовал только глобальное select{appearance:none;...} (снимает
   нативную стрелку и рисует свою), но не border/паддинг/фон — в итоге
   браузер дорисовывал собственную рамку по умолчанию, и селект выглядел
   "родным", а не как остальные компактные поля в этой же строке (ср.
   .cost-input рядом). padding-right у select{} помечен !important — он
   всё равно победит и оставит место под стрелку, даже несмотря на свой
   padding здесь (это ожидаемо и нужно). border-radius сюда специально
   НЕ добавлен: во всём приложении на select/input/textarea уже
   действует общее правило border-radius:9px!important (workspace-ux.css,
   подключён последним) — оно одинаково перекрывает и это правило, и,
   например, border-radius:6px у .cost-input чуть выше, так что 9px и
   есть фактический унифицированный радиус всех полей, а не расхождение. */
.priority-select{border:1px solid #dfe4e8;padding:4px 6px;font-size:12px;background:#fff;min-width:96px}
.priority-pill{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:650;white-space:nowrap}
/* «Перевыпустить ссылку» ломает уже отправленную клиенту ссылку — визуально
   тише обычной кнопки, чтобы не путать с равноценным по весу действием рядом. */
.link-btn-muted{background:transparent;border:0;padding:6px 4px;color:var(--muted);font-size:13px;text-decoration:underline;text-decoration-style:dotted;cursor:pointer}
.link-btn-muted:hover{color:#c0392b;text-decoration-style:solid}

/* --- Единое окно подтверждения/уведомления (замена системных confirm()/alert()) --- */
.confirm-modalback{z-index:9999!important}
.confirm-modal{width:min(420px,92vw)}
.confirm-modal.wide{width:min(520px,92vw)}
.confirm-modal-msg{white-space:pre-wrap;line-height:1.45;font-size:14.5px;color:var(--text)}
.confirm-modal-input{width:100%;margin-top:12px;border:1px solid #dfe4e8;border-radius:8px;padding:8px 10px;font:inherit}
/* v0.9.77: карточки-радио для модалок выбора (замена узких <select> с
   длинными вариантами, которые обрезались/раскрывались не по размеру). */
.choice-list{display:grid;gap:8px}
.choice-card{display:flex;align-items:flex-start;gap:10px;border:1px solid #dfe4e8;border-radius:10px;padding:10px 12px;cursor:pointer}
.choice-card:hover{border-color:#c8d0d6;background:#fafbfc}
.choice-card input{margin-top:3px;flex:none}
.choice-card span{display:flex;flex-direction:column;gap:2px;min-width:0}
.choice-card b{font-size:13.5px}
.choice-card small{color:var(--muted);font-size:12px;line-height:1.4}
.choice-card:has(input:checked){border-color:var(--green,#00854c);background:#f2f9f5}
/* Кратковременная «вспышка» при инлайн-сохранении поля (расходы, приоритет и т.п.),
   чтобы было видно, что значение применилось — без модалки и без перезагрузки таблицы. */
.field-saved-flash{animation:fieldSavedFlash .7s ease}
@keyframes fieldSavedFlash{
  0%{background-color:#d7f2df;box-shadow:0 0 0 2px #7fd99a}
  100%{background-color:transparent;box-shadow:0 0 0 2px transparent}
}

/* --- Команда: иконки проектов сотрудника в таблице --- */
.project-icons{display:flex;align-items:center}
.project-icon{width:22px;height:22px;border-radius:50%;background:#eef1f4;border:2px solid #fff;box-shadow:0 0 0 1px #dfe4e8;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#4d5661;overflow:hidden;margin-left:-7px}
.project-icon:first-child{margin-left:0}
.project-icon img{width:100%;height:100%;object-fit:cover}
.project-icon-more{background:#dfe4e8;color:#4d5661}

/* v0.9.145: строка-легенда статусов над таблицей задач — приём из примера
   конкурента (The Qiosker): «Всего задач: N ● Статус: X ● Статус: Y…» одной
   строкой, чтобы сводку по статусам было видно и в списке/календаре, а не
   только в Канбане (там своя — счётчик в заголовке колонки). */
.task-status-legend{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:0 20px 12px;font-size:12.5px;color:#5b6572}
.task-status-legend:empty{padding:0}
.task-status-legend-total{font-weight:700;color:#202734}
.task-status-legend-item{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.task-status-legend-dot{width:8px;height:8px;border-radius:50%;flex:none}

/* v0.9.145: «Команда» — счётчик задач сотрудника (сегодня/за месяц),
   выполнено/всего. Зелёным — когда всё выполнено (done>=total). */
.team-task-stat{font-size:12.5px;font-weight:650;color:#4d5661}
.team-task-stat.is-done{color:#0a8a52}

/* v0.9.145: часы + дата в верхней панели — заполняют место, которое
   раньше пустовало на страницах без кнопки «+ Клиент» (та скрыта везде,
   кроме списка клиентов — см. .top-client-button{display:none} выше).
   Цвет — сразу через var(--ui-on-main), а не хардкод #fff: так виджет
   сам подстраивается под любую тему интерфейса без отдельного
   переопределения на каждую светлую тему (в отличие от .topbar h1 и
   похожих мест, которые изначально были на хардкоде и из-за этого ловили
   баг контраста на светлых темах). */
.topbar-clock{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:650;color:var(--ui-on-main,#fff);opacity:.92;white-space:nowrap;padding:0 2px}
.topbar-clock-dot{opacity:.7;font-size:15px;line-height:1}
.topbar-clock-tz{font-size:10.5px;font-weight:600;opacity:.65;letter-spacing:.2px}
.topbar-clock-sep{opacity:.55;font-weight:400;margin:0 1px}
.topbar-clock-date{font-weight:600}

/* v0.9.145: кнопка «Начать/закончить рабочий день» рядом с часами.
   В покое — обычная маленькая кнопка (как соседние в шапке); «на смене» —
   зелёная плашка с пульсирующей точкой и живым счётчиком (переиспользует
   .timer-display — тот же класс и тикер, что у мини-таймеров задач). */
.shift-toggle-btn{display:inline-flex;align-items:center;gap:2px;padding:4px 6px;border-radius:999px;font-size:12.5px;font-weight:700;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);color:var(--ui-on-main,#fff);white-space:nowrap}
.shift-toggle-btn:hover{background:rgba(255,255,255,.22)}
.shift-toggle-btn.active{background:#0a8a52;border-color:#0a8a52;color:#fff}
.shift-dot{width:7px;height:7px;border-radius:50%;background:#fff;flex:none;animation:shiftPulse 1.6s ease-in-out infinite}
@keyframes shiftPulse{0%,100%{opacity:1}50%{opacity:.35}}
.shift-toggle-btn .timer-display{font-variant-numeric:tabular-nums;padding:0 4px}
/* v0.9.151: «формулировку "на смене" убери, давай сделаем время и рядом
   значки плей/пауза/стоп» — кнопка стала контейнером (див) с иконками-
   кнопками внутри (см. renderShiftButton в app.js). Паузе на бэкенде нет
   отдельного состояния — по ответу пользователя на уточнение её значок
   делает то же самое, что и стоп (завершает смену), просто как более
   привычная пара иконок. */
.shift-toggle-btn .shift-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.shift-toggle-btn .shift-icon-btn svg{width:12px;height:12px;fill:currentColor}
.shift-toggle-btn:not(.active) .shift-icon-btn:hover{background:rgba(0,0,0,.08)}
.shift-toggle-btn.active .shift-icon-btn:hover{background:rgba(255,255,255,.22)}
.shift-toggle-btn .shift-icon-btn:disabled{opacity:.5;cursor:default}

/* «На смене» — бейдж в «Команде» рядом с сотрудником, у кого сейчас идёт
   рабочий день (живой статус, руководителю). */
.team-shift-badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:#0a8a52;margin-top:2px}
.team-shift-badge .shift-dot{background:#0a8a52}
@media(max-width:900px){
  /* На узком экране 11 пунктов меню карточки проекта в столбик заслоняли
     собой весь контент — приходилось скроллить мимо всех вкладок, чтобы
     увидеть данные проекта. Вместо этого — одна горизонтально прокручиваемая
     строка вкладок над контентом, без переноса на новую строку. */
  .project-tabs-shell{grid-template-columns:1fr}
  .project-tabs-toggle{display:none}
  .project-tabs-side{border-right:0;border-bottom:1px solid var(--line);display:flex;align-items:center;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:4px;padding:8px 10px}
  .project-tab-item{width:auto;white-space:nowrap;flex:0 0 auto;align-self:center}
  .project-tabs-sep{display:flex;align-items:center;margin:0 2px;white-space:nowrap}
}

/* --- Яндекс Метрика: виджет с графиками --- */
.ym-period-row{display:flex;gap:6px;flex-wrap:wrap}
.ym-stats-row{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 14px}
.ym-stat-card{flex:1 1 150px;min-width:140px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff}
.ym-stat-label{font-size:11.5px;color:#8a938e;font-weight:650;margin-bottom:4px}
.ym-stat-value{font-size:19px;font-weight:750;color:#1c2b24}
.ym-delta{display:inline-block;margin-top:4px;font-size:11px;font-weight:700;padding:1px 6px;border-radius:999px}
.ym-delta.up{color:#00854c;background:#e3f5ea}
.ym-delta.down{color:#b73535;background:#fbe8e8}
.ym-metric-tabs{display:flex;gap:6px;margin-bottom:8px}
.ym-chart-box{border:1px solid var(--line);border-radius:10px;padding:12px;background:#fff}
.health-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.health-card{flex:1 1 220px;min-width:200px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff}
.health-card-label{font-size:11.5px;color:#8a938e;font-weight:650;margin-bottom:4px}
.health-card-value{font-size:14px;font-weight:700;color:var(--text)}
.health-card-link{display:inline-block;margin-top:6px;font-size:12px}
.health-card.good{border-color:#bfe8d3;background:#f3fbf6}
.health-card.good .health-card-value{color:#00854c}
.health-card.bad{border-color:#f3c9c9;background:#fef6f6}
.health-card.bad .health-card-value{color:#b73535}
.health-card.warn{border-color:#f0dfa0;background:#fffaf0}
.health-card.warn .health-card-value{color:#966900}
.health-card.muted .health-card-value{color:var(--muted);font-weight:600}

/* ===== v0.9.75 — фирменный стиль в духе segment-seo.ru =====
   Объединяет все 5 согласованных вариантов из макета «Оформление Segment CRM»:
   1) более мягкое скругление карточек/плиток/кнопок,
   2) зелёная рамка + мятная заливка у карточек-«плиток» с данными,
   3) сплошная зелёная заливка для выделенного — применена к карточкам
      задач в «Избранном» на канбане (это и есть тот самый «важный»
      элемент, который должен бросаться в глаза; для просроченных задач
      заливку сознательно не трогаем — там красный цвет уже несёт
      предупреждающий смысл, и заливать их зелёным было бы нелогично),
   4) бейджи/плашки — полностью скруглённые «пилюли» (почти везде это уже
      было так; докрутили единственный оставшийся прямоугольный бейдж),
   5) тёплая оранжевая кнопка-CTA, как «Получить аудит» на сайте.
      Сделана ТОЛЬКО для темы интерфейса по умолчанию (зелёной) — если
      сотрудник в «Настройки → Цвет интерфейса» выбрал другой акцент
      (жёлтый, синий, тёмный и т.д.), его кнопки остаются в выбранном
      им цвете: это персональная настройка каждого сотрудника, ломать
      её ради фирменного стиля не нужно. */
:root{
  --mint:#eafaf3;
  --mint-line:#bdeed7;
}

/* -- 1) мягкие скругления --
   Кнопки: сначала скруглили только «главную» (.btn.primary) до пилюли, а
   обычная (например «Отмена» рядом с «Создать») осталась почти прямоугольной —
   в паре это выглядело как две разные кнопочные системы. Скругляем до пилюли
   ВСЕ кнопки, чтобы «Отмена»/«Создать», «Отмена»/«Да, продолжить» и т.п.
   были одной формы и отличались только цветом. */
.kcard,.stat,.manager-card,.tariff-card,.ym-stat-card{border-radius:16px}
.modal{border-radius:18px}
.btn{border-radius:999px}

/* -- 2) зелёная рамка + мятная заливка у карточек с данными -- */
.kcard,.stat,.manager-card,.ym-stat-card{
  border-color:var(--mint-line);
  background:linear-gradient(180deg,var(--mint) 0%,#fff 70%);
}
.kcard:hover{border-color:var(--green)}

/* -- 3) сплошная заливка для важного: избранная задача на канбане -- */
.kcard.kcard-starred{
  background:var(--green);
  border-color:var(--green);
}
.kcard.kcard-starred .kcard-title,
.kcard.kcard-starred .kcard-note,
.kcard.kcard-starred .kcard-company,
.kcard.kcard-starred .kcard-dates,
.kcard.kcard-starred .kcard-assignee,
.kcard.kcard-starred .kcard-assignee span,
.kcard.kcard-starred .kcard-star{color:#fff}
.kcard.kcard-starred .task-type-pill{background:rgba(255,255,255,.22);color:#fff}
.kcard.kcard-starred .task-mini-badge{background:rgba(255,255,255,.24);color:#fff}
.kcard.kcard-starred .timer-display{color:#fff}
.kcard.kcard-starred .timer-play-btn{background:rgba(255,255,255,.3)}
.kcard.kcard-starred:hover{border-color:#fff}
/* то же для выбранного тарифа в КП — тот же приём «заливка = важное» */
.tariff-card.selected{background:var(--green);border-color:var(--green)}
.tariff-card.selected b,.tariff-card.selected span{color:#fff}

/* -- 4) последний не-«пилюльный» бейдж -- */
.task-mini-badge{border-radius:999px}

/* -- 5) тёплая CTA-кнопка — только для темы по умолчанию (зелёной) -- */
html[data-theme="green"] .btn.primary,
html[data-theme="green"] .btn.small.primary{
  background:var(--orange)!important;
  border-color:var(--orange)!important;
  color:#3a2a00!important;
  box-shadow:0 5px 14px rgba(255,177,0,.28);
}
html[data-theme="green"] .topbar .btn.primary{box-shadow:none}

/* ===== v0.9.76 — SEO-отчёты: сводка по проектам за месяц + тренд отдела =====
   Раньше на этой странице у SEO-отдела были плитки «Продажи»/«Создано КП» —
   метрики отдела продаж, к SEO не относящиеся (см. README). Ниже — стили для
   новой сводки: переключатель месяца, KPI-плитки с дельтой к прошлому месяцу,
   график по отделу за 6 месяцев и таблица по проектам. Цвета и радиусы — те
   же переменные, что и в остальном фирменном стиле (v0.9.75). */
.seo-report-toolbar{padding:16px 16px 0}
.month-switch{display:inline-flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:5px 6px}
.month-switch button{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--muted);font-size:13px;cursor:pointer;display:grid;place-items:center}
.month-switch button:hover{color:var(--text);border-color:#c8d0d6}
.month-switch span{font-weight:700;font-size:13px;padding:0 2px;min-width:130px;text-align:center;display:inline-block}

.seo-report-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 16px 0}
.kpi-tile{background:linear-gradient(180deg,var(--mint) 0%,#fff 70%);border:1px solid var(--mint-line);border-radius:16px;padding:13px 14px}
.kpi-label{font-size:11px;color:var(--muted);margin-bottom:6px}
.kpi-value{font-size:23px;font-weight:800;font-variant-numeric:tabular-nums}
.kpi-value.warn{color:#c47700}
.kpi-delta{font-size:11px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
.kpi-delta.good{color:var(--green-dark)}
.kpi-delta.bad{color:#b73535}
.kpi-delta.neutral{color:var(--muted);font-weight:600}

.seo-report-trend{margin:16px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:#fff}
.seo-report-trend-head h4{margin:0 0 10px;font-size:13px;font-weight:700}
.trend-chart{width:100%;height:110px;display:block}
.trend-bar{fill:var(--mint-line)}
.trend-bar.current{fill:var(--green)}
.trend-label{font-size:10px;fill:var(--muted)}
.trend-value{font-size:10.5px;fill:var(--text);font-weight:700}

.seo-report-table-wrap{padding:0 16px 16px}
.rtable{width:100%;border-collapse:collapse;font-size:12.5px}
.rtable th{text-align:left;font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:0 10px 8px;border-bottom:1px solid var(--line)}
.rtable td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.rtable tr:last-child td{border-bottom:0}
.rtable tr[onclick]{cursor:pointer}
.rtable tr[onclick]:hover td{background:#fbfcfd}
.proj-name{font-weight:700;display:block}
.proj-group{display:block;font-size:11px;color:var(--muted);font-weight:500;margin-top:1px}
.type-chip-row{display:flex;gap:4px;flex-wrap:wrap}
.type-chip{font-size:10px;font-weight:650;padding:2px 7px;border-radius:999px;background:var(--mint);color:var(--green-dark);white-space:nowrap}
.rtable .num{font-variant-numeric:tabular-nums;font-weight:700}
.rtable .num.bad{color:#b73535}
.status-pill{display:inline-flex;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700}
.status-pill.ok{background:var(--mint);color:var(--green-dark)}
.status-pill.risk{background:#fff4da;color:#966900}
.status-pill.neutral{background:#f1f4f6;color:#6d7683}
@media(max-width:900px){.seo-report-kpis{grid-template-columns:repeat(2,1fr)}}

/* --- Нативные панели SEO-инструментов: боковая шторка (не на весь экран) +
   док свёрнутых запусков внизу, чтобы сотрудник мог продолжать другую
   работу, пока инструмент считает результат на своём бэкенде --- */
/* Шторке всегда оставлена полоса в 56px у правого края экрана — там висит
   столбик ярлычков-инструментов (.tool-tabstack), поэтому текст внутри
   шторки никогда не оказывается под ярлычками. */
.drawer.tool-drawer{width:calc(100% - 220px - 56px);right:calc(-100% + 220px + 56px);border-radius:20px 0 0 20px}
.drawer.tool-drawer.open{right:56px}
.tool-drawer-head{border-radius:20px 0 0 0}
@media(max-width:900px){
  .drawer.tool-drawer{width:calc(100% - 68px - 56px);right:calc(-100% + 68px + 56px)}
  .drawer.tool-drawer.open{right:56px}
}

/* Столбик ярлычков всех 7 SEO-инструментов — самостоятельный плавающий
   блок, закреплённый у правого края ЭКРАНА (не шторки), поэтому виден
   постоянно и никогда не перекрывает содержимое открытой панели: клик
   открывает/переключает инструмент, повторный клик по уже открытому —
   сворачивает его (см. handleTabstackClick в app.js). При наведении
   ярлычок раскрывается влево, показывая название инструмента. */
/* z-index:75 — шторка сама поднята до 70 отдельным !important-правилом
   выше по файлу, поэтому рейку нужно держать строго над ней, но ниже
   любых модалок (от 80 и выше), чтобы модальные окна по-прежнему
   перекрывали её, как и полагается. */
.tool-tabstack{position:fixed;top:74px;right:10px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:75}
/* .tool-tab-btn (круглый значок-кнопка старого варианта рейки) удалён как мёртвый CSS: ни в
   app.js, ни в index.html этот класс больше не выставляется — актуальная вёрстка ярлычков
   инструментов теперь .tool-document-tab/.tool-document-toggle в tool-documents.css. */
@media(max-width:900px){.tool-tabstack{right:6px;top:64px}}
.tool-drawer-head{gap:12px;flex-wrap:wrap;align-items:center}
.tool-drawer-title{display:flex;align-items:center;gap:10px;min-width:0}
.tool-drawer-title h2{font-size:16px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}
.tool-drawer-badge{background:var(--mint);border:1px solid var(--mint-line);color:var(--green-dark);font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.tool-drawer-project{display:flex;align-items:center;margin-left:auto}
.tool-drawer-project label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--muted)}
.tool-drawer-project select{border:1px solid #dfe4e8;border-radius:8px;padding:6px 9px;font-size:12px;max-width:230px;background:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool-drawer-actions{display:flex;gap:6px}
.tool-drawer-body{background:var(--bg);padding:16px;border-radius:0 0 0 20px}
.tool-instance{max-width:100%}
.tool-instance .sub{font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 12px;max-width:760px}
.tool-instance .info-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.tool-instance .info-chip{font-size:11.5px;font-weight:650;padding:5px 11px;border-radius:999px;background:var(--mint);border:1px solid var(--mint-line);color:var(--green-dark)}
/* v0.9.51: раньше только двухколоночный вариант (.tool-form-grid) получал отступ снизу — у
   обычной однорядной .form-grid его не было вовсе. Из-за этого текст-подсказка под «Количество
   страниц» в аудите сайта (и кнопка «Проверить →» под полями в анализе интента и похожих
   инструментах) прижимались вплотную к полям выше — местами даже с отрицательным отступом,
   который рассчитывал на этот базовый отступ, но не находил его. Переносим отступ на базовый
   класс — теперь он общий для всех вариантов формы внутри инструментов. */
.tool-instance .form-grid{margin-bottom:16px}
.tool-instance .form-grid.tool-form-grid{grid-template-columns:minmax(0,1.35fr) minmax(220px,.85fr);align-items:start}
.tool-instance .field-queries{display:flex;flex-direction:column;gap:6px}
.tool-instance .field-queries textarea{flex:1;min-height:220px;resize:vertical}
.tool-instance .query-counter{font-size:11px;color:var(--muted);text-align:right}
.tool-instance .query-counter.over{color:#c23b3b;font-weight:700}
.tool-instance .field-side{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.tool-instance .field-side .field.full{grid-column:1/-1}
/* v0.9.51: в ON-PAGE-проверке пара «Регион»/«Тип страницы» в этой 2-колоночной сетке слишком
   узкая для варианта «Определить автоматически» — нативный <select> обрезает текст без
   многоточия (браузеры это игнорируют, см. аналогичный случай с выбором проекта у инструментов).
   Здесь варианты не пользовательские, а фиксированные — можно просто отдать полям всю ширину
   колонки вместо того, чтобы урезать текст. */
.tool-instance .field-side.field-side-stack{grid-template-columns:1fr}
.tool-instance .form-error{display:block;font-size:12px;color:#c23b3b;font-weight:650;min-height:16px}
.tool-instance .actions{display:flex;align-items:center;gap:12px;margin-top:2px}
.tool-instance .tool-loading{display:none;font-size:12.5px;color:var(--green-dark);font-weight:650}
.tool-instance .tool-result{margin-top:18px;display:none}
.tool-instance .tool-result-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.tool-instance .tool-result-card h3{font-size:13px;margin:0 0 10px}
.tool-instance .tool-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.tool-instance .tool-tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;font-size:12px;font-weight:650;color:var(--text)}
.tool-instance .tool-tabs button.active{background:var(--green);border-color:var(--green);color:#fff}
.tool-instance .tool-task-btn-row{display:flex;justify-content:flex-end;margin-top:10px}

/* .tool-dock / .tool-dock-* (нижний плавающий док запущенных инструментов, более старый вариант,
   чем нынешняя рейка) удалены как мёртвый CSS — ни один из классов не встречается ни в app.js,
   ни в index.html. */

/* --- Результаты "Анализ ТОП-10 выдачи" внутри нативной панели --- */
.tool-instance .summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:4px}
.tool-instance .summary .stat{text-align:center}
.tool-instance .summary .stat b{display:block;font-size:21px;font-weight:800;line-height:1.2}
.tool-instance .summary .stat span{font-size:11px;color:var(--muted)}
.tool-instance .highlight-toolbar{display:flex;align-items:center;gap:7px;margin:2px 0 8px;flex-wrap:wrap}
.tool-instance .highlight-toggle{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:650;color:var(--text)}
.tool-instance .highlight-toggle.active{background:#fff4da;border-color:#f0d38a;color:#966900}
.tool-instance .serp-board{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px}
.tool-instance .serp-col{flex:1 0 240px;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.tool-instance .serp-head{padding:9px 10px;background:#fafbfc;border-bottom:1px solid var(--line);font-size:12px;font-weight:700;display:flex;gap:6px;align-items:baseline}
.tool-instance .serp-head-engine{font-size:10px;font-weight:800;color:var(--green-dark);background:var(--mint);border-radius:5px;padding:1px 5px;flex:none}
.tool-instance .serp-card{display:flex;gap:8px;padding:8px 10px;border-bottom:1px solid #eef1f3;transition:background .12s}
.tool-instance .serp-card:last-child{border-bottom:0}
.tool-instance .serp-pos{flex:none;width:20px;font-size:11px;font-weight:800;color:var(--muted)}
.tool-instance .serp-body{min-width:0}
.tool-instance .serp-url{font-size:12px;color:var(--blue);text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool-instance .serp-snippet{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool-instance .serp-empty{padding:12px 10px;font-size:11.5px;color:var(--muted)}
.tool-instance .site-pos-col{text-align:center;width:100px}
.tool-instance .site-pos-badge{display:inline-flex;align-items:center;justify-content:center;min-width:30px;padding:3px 9px;border-radius:999px;font-weight:800;font-size:12.5px}
.tool-instance .site-pos-badge.top3{background:var(--green);color:#fff}
.tool-instance .site-pos-badge.top10{background:var(--mint);color:var(--green-dark);border:1px solid var(--mint-line)}
.tool-instance .site-pos-badge.top30{background:#fff7e6;color:#a66400}
.tool-instance .site-pos-badge.none{background:var(--bg);color:var(--muted);border:1px solid var(--line);font-weight:700}
.tool-instance .site-pos-legend{display:flex;gap:16px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.tool-instance .site-pos-legend span{display:inline-flex;align-items:center;gap:6px}
.tool-instance .site-pos-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.tool-instance .site-pos-legend i.top3{background:var(--green)}
.tool-instance .site-pos-legend i.top10{background:var(--mint);border:1px solid var(--mint-line)}
.tool-instance .site-pos-legend i.top30{background:#fff7e6;border:1px solid #f0dfa0}
.tool-instance .site-pos-legend i.none{background:var(--bg);border:1px solid var(--line)}
.tool-instance .site-favicon{vertical-align:middle;border-radius:3px;position:relative;top:-1px}
.tool-instance .serp-card.hl-home{background:#eafaf3}
.tool-instance .serp-card.hl-aggregator{background:#fff4da}
.tool-instance .serp-card.domain-linked-hover{background:#e6f2fc}
.tool-instance .serp-card.domain-linked-dim{opacity:.35}


/* --- Результаты "SEO-аудит сайта" внутри нативной панели: структуры,
   которых нет среди общих классов панели (шкала оценок, GEO/AEO-чек-лист,
   список проблем с бейджами приоритета, сигналы коммерческих факторов). --- */

.tool-instance .auditor-scores{display:grid;gap:8px}
.tool-instance .auditor-score-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:var(--bg);font-size:13px}
.tool-instance .auditor-score-row b{font-size:15px;font-weight:800;color:var(--green-dark)}
.tool-instance .auditor-score-icon{font-size:15px;text-align:center}
.tool-instance .auditor-score-icon.danger{color:#c23b3b}
.tool-instance .auditor-score-icon.warn{color:var(--orange)}
.tool-instance .auditor-score-icon.blue{color:var(--blue)}
.tool-instance .auditor-score-icon.good{color:var(--green-dark)}

.tool-instance .auditor-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:640px){.tool-instance .auditor-cards{grid-template-columns:1fr 1fr}}

.tool-instance .auditor-note{padding:11px 13px;border-radius:10px;background:var(--bg);color:var(--muted);font-size:12px;line-height:1.55}
.tool-instance .ok{color:var(--green-dark)}
.tool-instance .bad{color:#c23b3b}

.tool-instance .auditor-geo-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.tool-instance .auditor-geo-head h3{margin:0}
.tool-instance .auditor-geo-total{flex:0 0 auto;min-width:70px;padding:8px 12px;border-radius:10px;background:var(--mint);border:1px solid var(--mint-line);color:var(--green-dark);font-size:16px;font-weight:800;text-align:center}
.tool-instance .auditor-geo-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tool-instance .auditor-geo-check{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.tool-instance .auditor-geo-check-icon{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:11px;font-weight:900}
.tool-instance .auditor-geo-check.yes .auditor-geo-check-icon{background:var(--mint);color:var(--green-dark)}
.tool-instance .auditor-geo-check.no .auditor-geo-check-icon{background:#f0f2f1;color:#8a9490}
.tool-instance .auditor-geo-check-name{font-size:12px;font-weight:650;line-height:1.25}
.tool-instance .auditor-geo-group{display:inline-block;margin-right:5px;color:#88918e;font-size:9.5px;font-weight:800;text-transform:uppercase}
.tool-instance .auditor-geo-check-hint{margin-top:2px;color:var(--muted);font-size:10.5px;line-height:1.25}
.tool-instance .auditor-geo-check-count{font-size:11px;font-weight:800;color:var(--green-dark);white-space:nowrap}
.tool-instance .auditor-geo-check.no .auditor-geo-check-count{color:#8a9490}
@media(max-width:760px){.tool-instance .auditor-geo-checks{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.tool-instance .auditor-geo-checks{grid-template-columns:1fr}}

.tool-instance .auditor-issue{padding:16px 0;border-top:1px solid var(--line)}
.tool-instance .auditor-issue:first-child{padding-top:0;border-top:0}
.tool-instance .auditor-issue-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tool-instance .auditor-issue-head strong{font-size:15px;font-weight:700}
.tool-instance .auditor-issue-head em{font-style:normal;color:var(--green-dark)}
.tool-instance .auditor-badge{flex:none;padding:5px 10px;border-radius:999px;background:#fff0f0;color:#c23b3b;font-size:11px;font-weight:700;white-space:nowrap}
.tool-instance .auditor-badge.mid{background:#fff7e6;color:#a66400}
.tool-instance .auditor-badge.low{background:var(--bg);color:var(--muted)}
.tool-instance .auditor-issue-note{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--bg);color:#47524f;font-size:12.5px;line-height:1.5}
.tool-instance .auditor-found-count{margin:10px 0 6px;color:#5b6662;font-size:12px}
.tool-instance .auditor-found-count b{color:var(--green-dark)}
.tool-instance .auditor-problem-table{margin-top:6px;border-top:1px solid var(--line)}
.tool-instance .auditor-problem-table-head,.tool-instance .auditor-problem-row{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:14px;align-items:center;padding:8px 4px}
.tool-instance .auditor-problem-table-head{color:var(--muted);font-size:11px;font-weight:700}
.tool-instance .auditor-problem-row{border-top:1px solid var(--line);font-size:12.5px}
.tool-instance .auditor-problem-row b{font-size:11px;font-weight:700}
.tool-instance .auditor-problem-url{display:flex;align-items:flex-start;gap:8px;color:var(--green-dark);overflow-wrap:anywhere}
.tool-instance .auditor-problem-url i{min-width:16px;color:var(--muted);font-style:normal}
.tool-instance .auditor-urls{margin-top:8px;color:var(--green-dark);font-size:12.5px;line-height:1.6;overflow-wrap:anywhere}
.tool-instance .auditor-broken-card{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.tool-instance .auditor-broken-sources{margin-top:8px}
.tool-instance .auditor-broken-source{padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
@media(max-width:640px){
  .tool-instance .auditor-problem-table-head,.tool-instance .auditor-problem-row{grid-template-columns:1fr}
  .tool-instance .auditor-problem-table-head span:last-child{display:none}
}

.tool-instance .auditor-rec{padding:11px 0;border-top:1px solid var(--line)}
.tool-instance .auditor-rec:first-child{border-top:0}
.tool-instance .auditor-rec strong{font-size:13px;font-weight:700}

.tool-instance .auditor-signal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tool-instance .auditor-signal{padding:9px 10px;border-radius:10px;background:var(--bg);font-size:12px}
.tool-instance .auditor-signal.yes{color:var(--green-dark)}
.tool-instance .auditor-signal.no{color:#c23b3b}
@media(max-width:640px){.tool-instance .auditor-signal-grid{grid-template-columns:1fr 1fr}}

/* --- Результаты "Анализ текста страницы" внутри нативной панели ---
   Большая часть визуала переиспользует уже существующие общие классы
   (.sub, .info-chips, .form-grid/.field, .actions, .tool-loading,
   .form-error, .tool-result/.tool-result-card, .tool-tabs, .summary/.stat,
   .table-wrap+table, .tool-task-btn-row). Ниже — только то, для чего
   подходящего общего класса не нашлось. */

/* переключатель источника (URL / вставленный текст) внутри формы */
.tool-instance .text-source-tabs{display:flex;gap:14px;margin-bottom:10px;font-size:12px}
.tool-instance .text-source-tabs label{display:flex;gap:6px;align-items:center;cursor:pointer;color:var(--muted);font-weight:600}

/* режим "Сравнить две страницы": две колонки-карточки */
.tool-instance .text-two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:2px}
.tool-instance .text-source-box{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--bg)}
.tool-instance .text-source-box h3{margin:0 0 8px;font-size:12.5px;font-weight:700;color:var(--text)}
@media(max-width:600px){.tool-instance .text-two-col{grid-template-columns:1fr}}

/* индикатор хода анализа (получение страницы -> анализ -> оценки) */
.tool-instance .text-progress{margin:2px 0 14px;background:var(--mint);border-radius:10px;padding:11px 14px}
.tool-instance .text-progress-track{height:6px;background:var(--mint-line);border-radius:9px;overflow:hidden}
.tool-instance .text-progress-bar{width:10%;height:100%;background:var(--green);transition:.5s}
.tool-instance .text-progress-status{font-size:11px;color:var(--green-dark);margin-top:6px}

/* карточки метрик (6 оценок текста; 3 карточки слов/предложения/интента;
   3 карточки сходства при сравнении) */
.tool-instance .text-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.tool-instance .text-compare-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tool-instance .text-metric-card{border:1px solid var(--line);border-radius:10px;padding:12px}
.tool-instance .text-metric-card b{display:block;color:var(--green);font-size:19px;font-weight:800;line-height:1.2}
.tool-instance .text-metric-card span{font-size:11px;color:var(--muted)}
@media(max-width:600px){.tool-instance .text-compare-cards{grid-template-columns:1fr}}

/* метаданные / термины / интенты — двухколоночный блок */
.tool-instance .text-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.tool-instance .text-grid2{grid-template-columns:1fr}}
.tool-instance .text-meta-box{background:var(--bg);border-radius:10px;padding:12px;font-size:12px;line-height:1.6}
.tool-instance .text-recommend-box{background:var(--mint);border-radius:10px;padding:12px;font-size:13px;line-height:1.6;color:var(--text)}

/* список рекомендаций */
.tool-instance .text-list{margin:0;padding-left:18px;color:var(--text);font-size:12.5px;line-height:1.7}

/* каннибализация: круг риска + карточка-вывод */
.tool-instance .text-verdict{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.tool-instance .text-risk-circle{flex:0 0 84px;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:#fff0f1;color:#c23b3b;font-size:19px;font-weight:800;border:7px solid #ffd8dc}
.tool-instance .text-cannibal-verdict{margin:0 0 14px;padding:14px 16px;border-radius:10px;border:1px solid var(--mint-line);background:var(--mint)}
.tool-instance .text-cannibal-verdict strong{display:block;font-size:15px;margin-bottom:4px;color:var(--text)}
.tool-instance .text-cannibal-verdict p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.5}

/* таблица точных вхождений ключевых фраз */
.tool-instance .key-count-ok{color:var(--green-dark);font-weight:700}
.tool-instance .key-count-zero{color:var(--muted)}

/* естественность текста по Ципфу: график + облако слов */
.tool-instance .text-zipf-chart{margin-top:10px}
.tool-instance .text-zipf-chart svg{width:100%;height:auto;display:block}
.tool-instance .text-word-cloud{position:relative;height:260px;border:1px solid var(--line);border-radius:10px;background:#fafbfc;overflow:hidden}
.tool-instance .text-word-cloud span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;color:var(--green-dark)}

/* --- Результаты "Анализ интента" внутри нативной панели ---
   Generic panel classes (.sub,.info-chips,.form-grid,.field,.actions,
   .tool-loading,.form-error,.tool-result,.tool-result-card,.summary/.stat,
   .card,.muted,.tool-task-btn-row) come from the shared native-panel CSS
   already in app.css. The rules below cover intent-analyzer structures that
   have no generic equivalent: the score-card grid, query-coverage bars,
   structure-card labels, commercial-factor chips, priority pills and the
   conclusion note box. */

.tool-instance .intent-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tool-instance .intent-card{padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.tool-instance .intent-card span{display:block;color:var(--muted);font-size:11.5px;margin-bottom:6px}
.tool-instance .intent-card b{font-size:16px;font-weight:700;line-height:1.25;color:var(--text)}

.tool-instance .coverage-row{display:grid;grid-template-columns:135px 1fr 46px;gap:10px;align-items:center;margin:9px 0}
.tool-instance .coverage-row span:first-child{font-size:12.5px;color:var(--text)}
.tool-instance .coverage-row .track{height:8px;background:var(--line);border-radius:999px;overflow:hidden}
.tool-instance .coverage-row .track i{display:block;height:100%;background:var(--green);border-radius:999px}
.tool-instance .coverage-row b{font-size:12.5px;text-align:right;color:var(--green-dark)}

.tool-instance .intent-structure-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tool-instance .card.structure-card{min-height:88px;display:flex;flex-direction:column;justify-content:center;gap:7px}
.tool-instance .card.structure-card .structure-label{display:block;color:var(--muted);font-size:11.5px;font-weight:650}
.tool-instance .card.structure-card .structure-value{display:block;font-size:14.5px;font-weight:700;line-height:1.3;color:var(--text);overflow-wrap:anywhere}
.tool-instance .card.structure-card.compact .structure-value{font-size:13px}

.tool-instance .factor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tool-instance .factor{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:12.5px}
.tool-instance .factor .dot{flex:none;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:11px}
.tool-instance .factor.yes .dot{background:var(--mint);color:var(--green-dark)}
.tool-instance .factor.no .dot{background:var(--bg);color:var(--muted)}

.tool-instance .issue{padding:12px 0;border-top:1px solid var(--line)}
.tool-instance .issue:first-child{padding-top:0;border-top:0}
.tool-instance .issue-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tool-instance .issue-copy{display:flex;align-items:baseline;gap:8px;min-width:0}
.tool-instance .issue-number{flex:none;font-size:14px;font-weight:700;color:var(--text)}
.tool-instance .issue-text{font-size:12.5px;font-weight:600;line-height:1.4;color:var(--text)}

.tool-instance .pill{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:78px;padding:5px 11px;border-radius:999px;font-size:11px;font-weight:700;line-height:1;white-space:nowrap;border:1px solid transparent}
.tool-instance .pill.danger{color:#c7352d;background:#fff1f0;border-color:#ffc9c5}
.tool-instance .pill.warn{color:#966900;background:#fff4da;border-color:#f0d38a}
.tool-instance .pill.good{color:var(--green-dark);background:var(--mint);border-color:var(--mint-line)}

.tool-instance .note{padding:12px 14px;border-radius:10px;background:var(--bg);color:var(--muted);font-size:12.5px;line-height:1.5}
.tool-instance .note b{color:var(--text)}

@media(max-width:760px){
  .tool-instance .intent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tool-instance .intent-structure-grid,
  .tool-instance .factor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .tool-instance .intent-grid,
  .tool-instance .intent-structure-grid,
  .tool-instance .factor-grid{grid-template-columns:1fr}
  .tool-instance .coverage-row{grid-template-columns:96px 1fr 40px}
}

/* --- Результаты и форма "LSI-анализ конкурентов" внутри нативной панели ---
   Новые правила: генерические .field/.form-grid/.tool-tabs/.tool-result-card и
   т.д. покрывают базовую форму и карточки, но структуры, которых в общем
   app.css нет (переключатель режима, сетка настроек авто-режима, плашка-
   уведомление, метрики со шкалой соответствия, карточки зон, список
   конкурентов с чекбоксами, карточка ТЗ), заведены здесь как lsi- классы. */
.tool-instance .hint{margin-top:6px;font-size:11px;line-height:1.4;color:var(--muted)}
.tool-instance .hint b{color:var(--text)}

.tool-instance .lsi-mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.tool-instance .lsi-mode-switch label{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:#fff}
.tool-instance .lsi-mode-switch label:has(input:checked){border-color:var(--green);background:var(--mint)}
.tool-instance .lsi-mode-switch input{width:16px;height:16px;accent-color:var(--green);flex:0 0 auto}
.tool-instance .lsi-mode-switch span{display:flex;flex-direction:column;gap:2px}
.tool-instance .lsi-mode-switch b{font-size:12.5px;font-weight:700}
.tool-instance .lsi-mode-switch small{color:var(--muted);font-size:10.5px}

.tool-instance .lsi-mode-box{padding:14px;border-radius:10px;background:#fafbfc;border:1px solid var(--line);margin-bottom:12px}
.tool-instance .lsi-mode-box .field{margin-bottom:10px}
.tool-instance .lsi-mode-box .field:last-child{margin-bottom:0}
.tool-instance .lsi-settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
.tool-instance .lsi-check-row{display:flex;align-items:center;gap:8px;padding:9px 11px;margin:2px 0 10px;background:#fff;border:1px solid var(--line);border-radius:8px;font-size:12px}
.tool-instance .lsi-check-row input{width:15px;height:15px;accent-color:var(--green);flex:0 0 auto}
.tool-instance .lsi-notice{margin-top:2px;padding:10px 12px;border-radius:8px;background:#fff7df;border:1px solid #f4df9c;color:#6c5c2c;font-size:11.5px;line-height:1.45}

.tool-instance .lsi-metrics{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:10px;margin-bottom:14px}
.tool-instance .lsi-metric{padding:12px;border:1px solid var(--line);border-radius:10px;background:#fafbfc}
.tool-instance .lsi-metric span{display:block;color:var(--muted);font-size:11px}
.tool-instance .lsi-metric b{display:block;margin-top:7px;color:var(--green-dark);font-size:22px;font-weight:700}
.tool-instance .lsi-metric.featured{background:linear-gradient(135deg,var(--mint),#fff)}
.tool-instance .lsi-metric.featured b{font-size:26px}
.tool-instance .lsi-metric small{display:block;color:var(--muted);font-size:10px;margin-top:5px}
.tool-instance .lsi-meter{height:6px;margin-top:8px;border-radius:999px;background:#e6eeeb;overflow:hidden}
.tool-instance .lsi-meter i{display:block;height:100%;width:0;background:var(--green);transition:.35s}

.tool-instance .lsi-zone-cards{display:flex;gap:8px;flex-wrap:wrap}
.tool-instance .lsi-zone-card{padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:11.5px}
.tool-instance .lsi-zone-card b{color:var(--green-dark);font-size:14px;margin-left:5px}

.tool-instance .lsi-view{margin-top:2px}
.tool-instance .lsi-tag{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:999px;background:#fff2ca;color:#8d6712;font-size:9px;font-weight:800;text-transform:uppercase}

.tool-instance .lsi-competitor{display:grid;grid-template-columns:20px 1fr;gap:9px;padding:10px 4px;border-bottom:1px solid #edf1ef}
.tool-instance .lsi-competitor:last-child{border-bottom:0}
.tool-instance .lsi-competitor input{width:16px;height:16px;accent-color:var(--green)}
.tool-instance .lsi-competitor b{font-size:12.5px}
.tool-instance .lsi-competitor a{color:var(--blue);font-size:11.5px;text-decoration:none;word-break:break-all}
.tool-instance .lsi-competitor small{color:var(--muted)}
.tool-instance #lsi_recalcBtn{margin-top:12px}

.tool-instance .lsi-brief-card{padding:14px;border-radius:10px;background:#fafbfc;border:1px solid var(--line)}
.tool-instance .lsi-brief-card h3{margin:0 0 6px;font-size:15px;font-weight:650}
.tool-instance .lsi-brief-card p{color:var(--muted);line-height:1.5;margin:0;font-size:12.5px}
.tool-instance .lsi-brief-terms{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tool-instance .lsi-brief-terms span{padding:6px 9px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:11px}

@media(max-width:700px){
  .tool-instance .form-grid{grid-template-columns:1fr}
  .tool-instance .lsi-settings-grid{grid-template-columns:1fr 1fr}
  .tool-instance .lsi-metrics{grid-template-columns:1fr 1fr}
  .tool-instance .lsi-mode-switch{grid-template-columns:1fr}
}

/* --- "Проверка посадочной страницы" внутри нативной панели: только то, что
   не покрывается общими классами из блока "Нативные панели SEO-инструментов"
   выше (.sub/.info-chips/.form-grid.tool-form-grid/.field-queries/.field-side/
   .query-counter/.actions/.tool-loading/.form-error/.tool-result(-card)/
   .highlight-toolbar/.highlight-toggle/.summary/.stat/.tool-task-btn-row —
   все эти уже есть и используются как есть). --- */

/* Повторяемые карточки "Целевая страница N" */
.tool-instance .target-groups{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.tool-instance .target-group{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fbfdfc}
.tool-instance .target-group-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.tool-instance .target-group-head span{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.tool-instance .target-remove{color:#c23b3b;border-color:#f0c3c3;background:#fff}
.tool-instance .target-remove:hover{background:#fff5f5}
.tool-instance .target-add{width:100%;background:#fff;border:1px dashed var(--mint-line);color:var(--green-dark);box-shadow:none}
.tool-instance .target-add:hover{background:var(--mint)}
.tool-instance .target-add:disabled{opacity:.45;cursor:not-allowed}
/* Внутри группы textarea компактнее, чем стандартная .field-queries textarea
   (там она одна на всю форму, здесь их может быть до пяти подряд). */
.tool-instance .target-group textarea.target-queries{min-height:90px;flex:none}

/* Сводка "по каждой целевой странице" при нескольких страницах за один запуск */
.tool-instance .target-per-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:14px}
.tool-instance .target-pt-card{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.tool-instance .target-pt-card .target-pt-url{display:block;font-size:12px;font-weight:700;color:var(--text);word-break:break-all;margin-bottom:6px}
.tool-instance .target-pt-card .target-pt-stats{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--muted)}
.tool-instance .target-pt-card .target-pt-stats b{color:var(--green-dark);font-weight:700}
.tool-instance .target-pt-card .target-pt-stats b.warn{color:#c23b3b}

/* Заметка "Целевая страница: ..." (когда проверялась только одна страница) */
.tool-instance .target-note{margin-bottom:14px;padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.45}
.tool-instance .target-note b{color:var(--text)}

/* Таблица результатов: сортируемые заголовки, позиция/частотность,
   подсветка совпадение/несовпадение целевой страницы */
.tool-instance .target-sortable{cursor:pointer;user-select:none;white-space:nowrap}
.tool-instance .target-sortable:hover{color:var(--green-dark)}
.tool-instance .target-sort-arrow{display:inline-block;margin-left:5px;color:var(--muted);font-size:11px}
.tool-instance tr.target-match-row td{background:#f1fbf6}
.tool-instance tr.target-mismatch-row td{background:#fff7f7}
.tool-instance .target-url-cell.match a{color:var(--green-dark);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.tool-instance .target-url-cell.mismatch a{color:#f04444;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.tool-instance .target-position{font-size:15px;font-weight:800}
.tool-instance .target-position.top10{color:var(--green-dark)}
.tool-instance .target-position.top30{color:var(--orange)}
.tool-instance .target-position.top100{color:#df742b}
.tool-instance .target-position.none{color:var(--muted)}
.tool-instance .target-query{font-weight:700;min-width:160px}
.tool-instance .target-frequency{font-weight:750;white-space:nowrap}
.tool-instance .target-freq-note{display:block;margin-top:3px;color:var(--muted);font-size:10px;font-weight:400}
.tool-instance .target-title-cell{max-width:280px;line-height:1.35}
.tool-instance .error{display:block;margin-top:5px;color:#f04444;font-size:11px}
/* Колонка "Страница" видна только когда за один запуск проверялось
   несколько целевых страниц (table.target-multi). */
.tool-instance #target_table:not(.target-multi) .target-page-col{display:none}
.tool-instance .target-page-cell{max-width:200px;font-size:12px;color:var(--muted);word-break:break-all}

/* --- Результаты "Проверка ON-PAGE факторов" внутри нативной панели ---
   Everything here is structure that has no generic .tool-instance equivalent
   yet (score ring, group/metric grids, factor rows, text-analysis stats,
   word cloud, keyword table alignment, recommendations list). Layout/density
   is carried over from the tool's own restyled index.html; colors are
   remapped onto the CRM's own tokens (no --warn/--danger token exists in
   app.css, so warn maps to var(--orange) and danger to the CRM's existing
   #c23b3b, already used for .form-error / .query-counter.over). */

.tool-instance .page-meta{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:16px}
.tool-instance .page-meta .stat{text-align:center;padding:14px 10px}
.tool-instance .page-meta .stat b{display:block;font-size:18px;font-weight:800;line-height:1.2;word-break:break-word;color:var(--text)}
.tool-instance .page-meta .stat span{font-size:11px;color:var(--muted)}
@media(max-width:760px){.tool-instance .page-meta{grid-template-columns:repeat(2,1fr)}}

.tool-instance .score-ring{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) 0deg,var(--green) 0deg,#edf2ef 0deg);position:relative;margin:4px auto 14px}
.tool-instance .score-ring:after{content:"";position:absolute;inset:12px;border-radius:50%;background:#fff}
.tool-instance .score-ring strong{position:relative;z-index:2;font-size:30px;font-weight:600;color:var(--text)}

.tool-instance .group-score-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:6px 0 14px}
.tool-instance .group-score-card{border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px}
.tool-instance .group-score-card .gname{font-size:11.5px;color:var(--muted);min-height:29px}
.tool-instance .group-score-card .gscore{font-size:20px;font-weight:750;margin:4px 0}
.tool-instance .group-score-card .gbar{height:6px;background:#edf3f0;border-radius:999px;overflow:hidden}
.tool-instance .group-score-card .gbar span{display:block;height:100%;border-radius:999px}
@media(max-width:760px){.tool-instance .group-score-grid{grid-template-columns:repeat(2,1fr)}}

.tool-instance .metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tool-instance .metric{padding:13px;border:1px solid var(--line);border-radius:12px;background:#fff}
.tool-instance .metric-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.tool-instance .metric-name{font-size:12px;color:var(--muted);font-weight:700}
.tool-instance .metric-score{font-size:16px;font-weight:800;color:var(--green-dark)}
.tool-instance .metric-bar{height:6px;border-radius:999px;background:#edf3f0;overflow:hidden}
.tool-instance .metric-bar span{display:block;height:100%;background:var(--green);border-radius:999px}
@media(max-width:760px){.tool-instance .metric-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.tool-instance .metric-grid{grid-template-columns:1fr}}

.tool-instance .factor-list-v13{display:flex;flex-direction:column;gap:8px}
.tool-instance .factor-row-v13{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:#f8faf9}
.tool-instance .factor-icon-v13{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;color:#fff;font-size:12px;font-weight:800;line-height:22px}
.tool-instance .factor-ok .factor-icon-v13{background:var(--green)}
.tool-instance .factor-warn .factor-icon-v13{background:var(--orange)}
.tool-instance .factor-bad .factor-icon-v13{background:#c23b3b}
.tool-instance .factor-content-v13{display:flex;flex-direction:column;gap:3px;min-width:0}
.tool-instance .factor-title-v13{display:block;font-size:13px;font-weight:700;color:var(--text);line-height:1.35}
.tool-instance .factor-text-v13{display:block;font-size:12.5px;color:var(--muted);line-height:1.45;word-break:normal;overflow-wrap:anywhere}
.tool-instance .problem-area-v19{margin-top:5px;padding:7px 9px;border-radius:8px;background:#fff7e7;border-left:3px solid var(--orange);color:#6d5217;font-size:11.5px;line-height:1.4}
.tool-instance .factor-bad .problem-area-v19{background:#fff0f0;border-left-color:#c23b3b;color:#8e2d2d}
.tool-instance .factor-help-v20{margin-top:6px;padding:9px 11px;border-radius:9px;background:#fff;border:1px solid var(--line);line-height:1.45;font-size:11.5px}
.tool-instance .factor-help-v20 .fix-v20{color:var(--text)}
.tool-instance .factor-help-v20 .example-v20{margin-top:4px;color:var(--muted)}
.tool-instance .factor-help-v20 b{color:var(--text)}

.tool-instance .text-analysis-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.tool-instance .text-stat{border:1px solid var(--line);border-radius:11px;padding:12px;background:#fff;text-align:center}
.tool-instance .text-stat b{display:block;font-size:18px;margin-bottom:3px;color:var(--text)}
.tool-instance .text-stat span{font-size:11px;color:var(--muted)}
@media(max-width:760px){.tool-instance .text-analysis-grid{grid-template-columns:repeat(2,1fr)}}

.tool-instance .words-cloud{display:flex;flex-wrap:wrap;gap:6px}
.tool-instance .word-chip{padding:6px 9px;border-radius:9px;background:var(--mint);font-size:11.5px;color:var(--text)}
.tool-instance .word-chip b{color:var(--green-dark)}

.tool-instance .keyword-table td:nth-child(2),
.tool-instance .keyword-table td:nth-child(3),
.tool-instance .keyword-table td:nth-child(4),
.tool-instance .keyword-table td:nth-child(5){text-align:center;white-space:nowrap}

.tool-instance .recommendations{display:grid;gap:8px}
.tool-instance .recommendation{padding:11px 13px;border-left:3px solid var(--green);background:#f7faf9;border-radius:0 10px 10px 0;font-size:12.5px;line-height:1.45;color:var(--text)}

/* ---------------- Проверка позиций проектов ---------------- */
#p-positions{max-width:100%}
.postrack-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
/* v0.9.106: фавиконка и select раньше были двумя отдельными "пилюлями"
   рядом друг с другом (каждая со своей рамкой) — по просьбе пользователя
   объединили в один визуальный блок: одна общая рамка/фон на .postrack-
   project-picker, а фавиконка и сам select — уже без своей рамки/фона,
   просто содержимое внутри общего окошка. */
.postrack-project-picker{
  display:flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:8px;background:#fff;
  padding:0 2px 0 5px;flex:none;
}
/* v0.9.117: у select снимали только box-shadow — стандартная браузерная
   outline-рамка фокуса всё равно рисовалась, но только вокруг самого
   <select>, не захватывая иконку слева, и весь блок выглядел "обрезанным".
   Убираем outline у select и вместо этого подсвечиваем всю "таблетку"
   через :focus-within — рамка теперь обводит иконку + текст целиком. */
.postrack-project-picker .pos-project-favicon{width:24px;height:24px;flex:none;margin:0;border:0;box-shadow:none;background:transparent}
.postrack-project-picker select{padding:8px 26px 8px 2px!important;border:0!important;border-radius:0!important;background:transparent!important;font-weight:650;min-width:170px}
.postrack-project-picker select:focus{box-shadow:none!important;outline:none!important}
.postrack-project-picker:focus-within{border-color:var(--green);box-shadow:0 0 0 2px rgba(0,184,107,.18)}
.postrack-head .chip{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:var(--mint);border:1px solid var(--mint-line);color:var(--green-dark);font-size:12px;font-weight:650}
.postrack-head .chip.muted-chip{background:var(--bg);border-color:var(--line);color:var(--muted);font-weight:600}
/* v0.9.113: переключатель «Яндекс/Google» — пилюля из двух кнопок, тот же
   визуальный язык, что у .cluster-mode-switch (переключатель Карточки/
   Таблица в кластеризации), но с подписями, а не только иконками — те же
   слова используются в chip'ах/настройках проекта, поэтому подпись понятнее
   значка. Используется и в шапке страницы «Позиции проектов»
   (#posEngineSwitch), и во вкладке «Позиции сайта» внутри карточки проекта
   (#ppPosEngineSwitch) — один и тот же класс, см. renderPositionEngineSwitch. */
.engine-switch{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff;flex:none}
.engine-switch button{border:0;background:transparent;padding:5px 12px 5px 6px;font-size:12px;font-weight:700;color:#8a93a0;display:flex;align-items:center;gap:6px}
.engine-switch button .eng-logo{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;line-height:1;flex:none;font-family:Arial,Helvetica,sans-serif;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.engine-switch button .eng-logo-yandex{color:#fc3f1d}
.engine-switch button .eng-logo-google{color:#4285f4}
.engine-switch button.active{background:var(--green);color:#fff}
.engine-switch button:not(.active):hover{background:var(--bg);color:var(--text)}
/* v0.9.97: чип теперь живёт в верхней панели (.topbar-actions), а не только
   внутри .postrack-head — поэтому стилизован полностью сам, без опоры на
   унаследованные от .postrack-head правила. */
.xmlriver-balance-chip{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:650;white-space:nowrap;cursor:pointer;background:#edf9f4;border:1px solid #bfe9d5;color:#087a4a}
.xmlriver-balance-chip:hover{filter:brightness(0.97)}
.xmlriver-balance-chip.warn{background:#fff7df;border-color:#f1d58a;color:#8a6200}
.postrack-warn{background:#fff7e6;border:1px solid #f0dfa0;color:#7a5400;border-radius:8px;padding:9px 12px;font-size:12.5px;margin-bottom:12px}
.mode-tabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.mode-tab{border:0;background:transparent;padding:9px 4px;margin-right:18px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer}
.mode-tab.active{color:var(--green-dark);border-bottom-color:var(--green)}
.postrack-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.postrack-toolbar select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;min-width:240px}
.postrack-add-input{flex:1 0 260px;min-width:200px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;resize:vertical;min-height:38px}
.postrack-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.postrack-stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px}
.postrack-stat b{display:block;font-size:20px;font-weight:800}
.postrack-stat span{font-size:11px;color:var(--muted)}
.postrack-table{width:100%;border-collapse:collapse;min-width:640px}
.postrack-table th,.postrack-table td{padding:8px 10px;border-bottom:1px solid #e5e9ec;border-right:1px solid #eef1f3;text-align:left;white-space:nowrap}
.postrack-table th:last-child,.postrack-table td:last-child{border-right:none}
.postrack-table th{font-size:11px;color:#76808d;background:#fafbfc;position:sticky;top:0;z-index:2}
.postrack-table tbody tr:nth-child(even) td{background:#fafbfc}
.postrack-table tbody tr:hover td{background:#f2f6f4}
/* v0.9.73: строки должны быть одной высоты независимо от того, есть ли во
   второй строке ячейки блок ▲/▼ (.postrack-delta) — иначе часть строк была
   в 1 линию, часть в 2, и таблица «прыгала» по высоте. Плюс отключаем
   унаследованный от общего правила `table tbody tr:hover{transform:...}`
   сдвиг строки при наведении именно для этой таблицы — он и вызывал
   ощущение "прыжка экрана" при наведении рядом с нижней полосой прокрутки. */
.postrack-table tbody tr{transform:none!important;height:46px}
.postrack-table td{box-sizing:border-box;height:46px;vertical-align:middle}
.postrack-table .postrack-date-col{text-align:center}
.postrack-table th.sortable{cursor:pointer;user-select:none}
.postrack-table th.sortable:hover{color:var(--text)}
.postrack-table th.sortable.sorted{color:var(--text);font-weight:800}
.postrack-tagdot{width:14px;padding:0 0 0 4px!important}
.postrack-tagdot::before{content:'';display:block;width:9px;height:9px;border-radius:50%;background:var(--tagcolor,#c7cdd4)}
.postrack-qtext{font-weight:400;white-space:normal;min-width:200px}
.postrack-freq{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.postrack-cell{text-align:center;font-weight:750;font-variant-numeric:tabular-nums;border-radius:6px;line-height:14px}
.postrack-cell.good{background:#e7f8f0;color:#00854c}
.postrack-cell.bad{background:#fceeee;color:#b73535}
.postrack-cell.flat{background:#fafbfc;color:var(--text)}
.postrack-cell.none{background:var(--bg);color:var(--muted);font-weight:600}
.postrack-cell.warn{background:#fff4da;color:#966900;font-weight:600;cursor:help}
/* v0.9.97-v0.9.100: перебирали угловой бейдж и колонку сверху — то наезжало
   на цифру, то выглядело как «друг под другом». v0.9.101: дельта — обычный
   надстрочный знак СПРАВА от числа (как показал пример), некрупный и не
   жирный, в потоке текста — не может ничего перекрыть, потому что не стоит
   поверх и не занимает отдельную строку. */
.postrack-cellinner{white-space:nowrap}
.postrack-value{line-height:14px}
.postrack-delta{font-size:10px;font-weight:400;vertical-align:super;line-height:1;margin-left:2px}
.postrack-delta.up{color:#00854c}
.postrack-delta.down{color:#b73535}
.cluster-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:16px}
.folder-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;height:320px;transition:border-color .12s,box-shadow .12s}
.folder-card.drag-over{border-color:var(--ui-main-dark);box-shadow:0 0 0 2px var(--ui-main-soft) inset}
.folder-head{flex:none;display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);cursor:grab}
.folder-head:active{cursor:grabbing}
.folder-head .fic{width:9px;height:9px;border-radius:50%;flex:none}
.folder-head b{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.folder-head b.folder-name{cursor:text}
.folder-head b.folder-name:hover{text-decoration:underline dotted}
.folder-head .cnt{font-size:11px;color:var(--muted);background:var(--bg);border-radius:999px;padding:2px 7px}
.folder-target{flex:none;padding:5px 12px;font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--line);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.folder-target:hover{color:var(--text);background:var(--bg)}
.folder-menu-btn{border:0;background:transparent;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:2px 4px}
.folder-menu-btn:hover{color:#b73535}
.folder-body{flex:1;min-height:0;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.folder-empty{padding:10px 0;text-align:center;color:var(--muted);font-size:11.5px}
.qrow{display:flex;align-items:center;gap:7px;font-size:12.5px;cursor:grab}
.qrow:active{cursor:grabbing}
.qrow-mismatch{flex:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#fdeaea;color:#c0392b;font-weight:800;font-size:11px;cursor:help}
/* v0.9.74: свои подсказки по data-tip (см. _showTip в app.js) — не
   привязаны к нативному title, поэтому работают и на draggable-строках. */
.app-tooltip{display:none;position:fixed;z-index:10050;max-width:280px;padding:6px 9px;border-radius:7px;background:#202734;color:#fff;font-size:11.5px;line-height:1.4;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.qrow-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrow-remove{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;flex:none}
.qrow-remove:hover{color:#b73535}
.folder-add{flex:none;border-top:1px solid var(--line);padding:6px 8px;display:flex;gap:6px;align-items:center}
.folder-bulk-toggle{flex:1;border:1px dashed var(--line);background:#fff;color:var(--muted);border-radius:7px;padding:6px 9px;font-size:11.5px;cursor:pointer;white-space:nowrap}
.folder-bulk-toggle:hover{color:var(--ui-main-dark);border-color:var(--ui-main-dark)}
.folder-bulk-add{flex:none;border-top:1px solid var(--line);padding:8px;display:flex;flex-direction:column;gap:6px;background:#fbfcfd}
.folder-bulk-add textarea{resize:vertical;min-height:56px;border:1px solid var(--line);border-radius:7px;padding:7px 8px;font-size:12.5px;font-family:inherit}
.folder-bulk-add .btn{align-self:flex-end}

/* v0.9.108: переключатель режима «Карточки/Таблица» кластеризации и
   табличный режим (кластеры слева, запросы с двумя частотами справа) —
   по мотивам стороннего сервиса подбора запросов, см. запрос пользователя. */
.cluster-mode-switch{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff;flex:none}
.cluster-mode-switch button{border:0;background:transparent;padding:7px 10px;display:flex;align-items:center;color:#8a93a0;line-height:0}
.cluster-mode-switch button svg{width:15px;height:15px}
.cluster-mode-switch button.active{background:var(--green);color:#fff}
.cluster-mode-switch button:not(.active):hover{background:var(--bg);color:var(--text)}
.cluster-table-shell{display:grid;grid-template-columns:240px minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;max-width:100%}
.ctbl-side{border-right:1px solid var(--line);padding:8px;max-height:560px;overflow-y:auto}
.ctbl-side-head{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:#9aa2ad;margin:4px 6px 8px;font-weight:700}
.ctbl-row{display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:7px;font-size:12.5px;cursor:pointer}
.ctbl-row span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctbl-row:hover{background:var(--bg)}
.ctbl-row.active{background:#e8f8f0;color:#00854c;font-weight:700}
.ctbl-row .n{flex:none;color:#9aa2ad;font-size:11px}
.ctbl-row.active .n{color:#00854c}
.ctbl-row.drag-over{background:var(--ui-main-soft,#e9f8f2);box-shadow:0 0 0 2px var(--ui-main-dark,#009b59) inset}
.ctbl-row-del{flex:none;border:0;background:transparent;color:#d9534f;opacity:.55;cursor:pointer;padding:2px;line-height:0;border-radius:5px}
.ctbl-row-del svg{width:14px;height:14px;display:block}
.ctbl-row-del:hover{opacity:1;background:#fdeaea}
.ctbl-main tbody tr[draggable]{cursor:grab}
.ctbl-main tbody tr[draggable]:active{cursor:grabbing}
.ctbl-main{min-width:0;width:100%;display:flex;flex-direction:column}
.ctbl-stats{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);flex:none}
.ctbl-stats b{color:var(--text)}
.ctbl-stats .btn{flex:none}
.ctbl-main table{min-width:0}
.ctbl-main td.num,.ctbl-main th:nth-child(2),.ctbl-main th:nth-child(3){text-align:right;font-variant-numeric:tabular-nums}
.ctbl-main .table-wrap{max-height:560px;overflow:auto;min-width:0}
.ctbl-main thead th{position:sticky;top:0;z-index:1}
.ctbl-main table{table-layout:fixed;width:100%}
.ctbl-main td,.ctbl-main th{white-space:normal;overflow-wrap:anywhere}
.ctbl-main td:nth-child(1),.ctbl-main th:nth-child(1){width:36%}
.ctbl-main td:nth-child(2),.ctbl-main th:nth-child(2){width:15%}
.ctbl-main td:nth-child(3),.ctbl-main th:nth-child(3){width:19%}
.ctbl-main td:nth-child(4),.ctbl-main th:nth-child(4){width:30%}
/* v0.9.114: `display:flex` прямо на <td> ломает table-layout:fixed — браузер
   перестаёт учитывать эту ячейку как обычную при расчёте ширины колонки по
   первой строке (заголовку), и колонка «Запрос» в теле схлопывается до
   контента вместо заданных 36%. Поэтому <td> остаётся обычной ячейкой, без
   какого-либо display на ней.
   v0.9.115: а внутри — не flex-строка на всю ширину ячейки (там крестик с
   flex:1 на тексте «уезжал» к правому краю широкой колонки, отрываясь от
   короткого запроса), а простой инлайн-поток: текст и крестик — соседние
   inline-элементы, крестик стоит сразу после текста, не растягиваясь. */
.ctbl-qrow-remove{opacity:0;vertical-align:middle;margin-left:2px}
.ctbl-main tbody tr:hover .ctbl-qrow-remove,.ctbl-main tbody tr:focus-within .ctbl-qrow-remove{opacity:1}
@media(max-width:900px){.cluster-table-shell{grid-template-columns:1fr}.ctbl-side{border-right:0;border-bottom:1px solid var(--line);max-height:200px}}
.unassigned{background:#fff8ec;border:1px solid #f0d9a6;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.unassigned h4{margin:0 0 4px;font-size:12px;color:#8a6a1f;font-weight:750}
.unassigned .qrow-text{max-width:260px}
/* v0.9.75: карточка «Контакт» на «О проекте» — компактнее, было слишком
   много воздуха для четырёх коротких строк. */
.compact-card{padding:9px 11px}
.compact-card h3{margin-bottom:6px}
.contact-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;line-height:1.4}
.contact-cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.contact-cell{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fafbfc;min-width:0}
.contact-cell small{display:block;font-size:11px;color:#8a938e;font-weight:650;margin-bottom:3px}
.contact-cell span{font-size:13.5px;font-weight:650;color:var(--text);word-break:break-word}
.contact-cell span.muted{font-weight:500}
/* v0.9.79: встроенные (в окне проекта) вкладки «Позиции сайта» и
   «Кластеризация сайта» — карточки кластеров в сетке, компактнее, чем на
   отдельной странице «Позиции проектов». */
.cluster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.cluster-folder-card{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff}
.cluster-folder-card.muted-card{background:#fafbfc}
.cluster-folder-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.cluster-folder-head b{font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cluster-query-list{display:grid;gap:5px;margin:8px 0;max-height:220px;overflow:auto}
.cluster-query-row{display:flex;align-items:center;gap:6px;font-size:12.5px}
.cluster-query-row select{font-size:11.5px;padding:3px 4px;max-width:110px}
.cluster-query-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cluster-add-row{display:flex;gap:6px;margin-top:6px}
.cluster-add-row input{flex:1;min-width:0;border:1px solid #dfe4e8;border-radius:8px;padding:6px 8px;font-size:12.5px}
/* v0.9.76: вкладка «Отчёты» проекта — сводка отчёта о продвижении. */
.report-section{padding:14px 0;border-bottom:1px solid var(--line)}
.report-section:last-child{border-bottom:0}
.report-section h3{margin:0 0 8px;font-size:14px}
.report-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px}
.report-metric{background:#fafbfc;border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.report-metric small{color:var(--muted);font-size:11px}
.report-metric b{font-size:16px}
.report-metric span{font-size:12px;font-weight:650}
.report-share-actions{display:flex;gap:8px;flex-wrap:wrap}
/* v0.9.137: модульность отчёта — панель порядка/видимости разделов
   (drag&drop через нативный draggable, без сторонних библиотек). */
.report-section-settings{padding:12px;background:#fafbfc;border:1px solid var(--line);border-radius:10px;margin-bottom:4px}
.report-section-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;background:#fff;border:1px solid var(--line);margin-bottom:6px;cursor:grab}
.report-section-row:last-child{margin-bottom:0}
.report-section-row.dragging{opacity:.4}
.report-section-drag{color:var(--muted);font-size:14px;user-select:none;line-height:1}
.report-section-check{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;flex:1}
.report-section-check input{cursor:pointer}
/* v0.9.137: «Пульс проекта» — вкладка с быстрыми апдейтами + фильтр-чипы. */
.pulse-filters{display:flex;gap:7px;flex-wrap:wrap}
.pulse-filter-chip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:5px 12px;font-size:12.5px;cursor:pointer;color:#3a3d43}
.pulse-filter-chip.active{background:var(--green-dark,#0a6b4c);border-color:var(--green-dark,#0a6b4c);color:#fff}
/* v0.9.142: «опять системный вид» — select #pulseEventType рядом с кнопкой
   «Опубликовать» был без класса, вне .field (там стилизацию даёт
   .field select — см. форму «Добавить действие»), поэтому у него был тот
   же баг, что и у .priority-select в v0.9.140: только appearance:none от
   базового select{}, без border/паддинга/фона — выглядел системным. */
.pulse-type-select{border:1px solid #dfe4e8;border-radius:8px;padding:6px 8px;font-size:12.5px;background:#fff;min-width:130px}
.report-issue{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:8px;background:#fafbfc}
.report-issue-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.report-issue-head b{font-size:13.5px}
.report-issue-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:#f4e4c8;color:#8a5a00}
.report-issue-badge.pr-high{background:#fbe0e0;color:#a12b2b}
.report-issue-badge.pr-low{background:#e7ecf5;color:#39507a}
.report-issue-note{color:var(--muted);font-size:12px;margin-top:4px}
.report-issue-samples{margin:8px 0 0;padding-left:16px;font-size:12.5px;line-height:1.6}
.report-issue-samples li{word-break:break-all}
.report-issue-more{color:var(--muted);font-size:12px;margin-top:4px}

/* ============================================================
   v0.9.104 — кастомные select и date-picker (см. app.js внизу).
   Нативный select/date-input остаётся в DOM как есть (значение,
   onchange, disabled/hidden — всё по-старому), но popup при
   открытии — свой, в стиле CRM, а не системный браузера/ОС.
   ============================================================ */
select{
  appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7480' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 10px center!important;background-size:13px!important;
  padding-right:30px!important;
  cursor:pointer;
}
select:disabled{cursor:not-allowed;opacity:.6}
select:focus{outline:none;box-shadow:0 0 0 3px rgba(0,184,107,.15)}
.csel-pop{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 14px 40px rgba(20,40,30,.16);
  padding:5px;max-height:280px;overflow-y:auto;z-index:9999;
  display:flex;flex-direction:column;gap:1px;
  font-size:13px;
}
.csel-opt{
  border:0;background:transparent;text-align:left;padding:8px 10px;
  border-radius:7px;color:var(--text);font:inherit;white-space:nowrap;
}
.csel-opt:hover{background:#eef5f0;color:var(--green-dark)}
.csel-opt.selected{background:#e7f8f0;color:var(--green-dark);font-weight:700}
.csel-opt.disabled{color:var(--muted);cursor:not-allowed}

.cdate-wrap{position:relative;display:block}
.cdate-wrap input[type=date]{color:transparent;cursor:pointer;border-color:transparent!important;box-shadow:none!important}
.cdate-wrap input[type=date]::-webkit-calendar-picker-indicator{display:none}
.cdate-wrap input[type=date]::-webkit-inner-spin-button,
.cdate-wrap input[type=date]::-webkit-clear-button{display:none;-webkit-appearance:none}
/* v0.9.120: у .cdate-label не было своей рамки, а фон непрозрачный —
   он полностью закрывал собой рамку настоящего <input> под ним, из-за
   этого поле выглядело так, будто в него вообще некуда вводить дату
   (особенно заметно, когда оно пустое — виден только плейсхолдер без
   каких-либо границ). Рамку и подсветку фокуса теперь рисует сам label. */
.cdate-label{
  position:absolute;inset:0;display:flex;align-items:center;
  padding:0 34px 0 10px;pointer-events:none;font:inherit;color:var(--text);
  border:1px solid #dfe4e8;border-radius:8px;overflow:hidden;white-space:nowrap;
  background:#fff;
}
.cdate-wrap input[type=date]:focus + .cdate-label{
  border-color:rgba(0,184,107,.58);box-shadow:0 0 0 3px rgba(0,184,107,.08);
}
.cdate-label.placeholder{color:#98a0ab}
.cdate-icon{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8490' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cline x1='16' y1='3' x2='16' y2='7'/%3E%3Cline x1='8' y1='3' x2='8' y2='7'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:contain;
}
.cdate-pop{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 40px rgba(20,40,30,.16);
  padding:10px;width:240px;z-index:9999;
}
.cdate-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cdate-title{font-weight:750;font-size:13px}
.cdate-nav{border:0;background:#f1f4f6;color:var(--text);width:26px;height:26px;border-radius:7px;font-size:15px;line-height:1;cursor:pointer}
.cdate-nav:hover{background:#e7f8f0;color:var(--green-dark)}
.cdate-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;color:var(--muted);font-size:11px;margin-bottom:2px}
.cdate-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cdate-cell{border:0;background:transparent;height:28px;border-radius:7px;font-size:12px;color:var(--text);cursor:pointer}
.cdate-cell.empty{cursor:default}
.cdate-cell:not(.empty):hover{background:#eef5f0;color:var(--green-dark)}
.cdate-cell.today{font-weight:800;color:var(--green-dark)}
.cdate-cell.selected{background:var(--green);color:#fff;font-weight:800}
.cdate-foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.cdate-foot-btn{border:0;background:transparent;color:var(--green-dark);font-weight:700;font-size:12px;cursor:pointer;padding:4px 6px;border-radius:6px}
.cdate-foot-btn.muted{color:var(--muted);font-weight:600}
.cdate-foot-btn:hover{background:#f1f4f6}

/* ===== v0.9.147 — жёлто-зелёная светлая тема на весь интерфейс.
   Утверждённый макет (несколько раундов правок в чате: sidebar-mockup.html →
   sidebar-mockup-v2.html → theme-mockup.html): узкая зелёная рельса слева
   (была тёмная, 64px → 52px) с чёрными иконками без подложки (активная —
   просто жёлтая иконка, без фона); флажки «SEO»/«Продажи» — белые с зелёным
   текстом (были сплошным цветом темы); широкая панель меню справа от рельсы
   (была залита цветом темы) — теперь белая, пункты плиткой (иконка сверху,
   подпись снизу), текст/иконки зелёные, активный/наведённый пункт —
   светло-зелёная плашка; раскрывающиеся списки (SEO-проекты, SEO-инструменты)
   — тоже плиткой, без отступа; шапка (topbar) — всегда светлая с тёмным
   текстом (была цветной по теме); в шапку добавлена кнопка «База знаний»;
   основные жёлтые кнопки (.btn.primary) по всему приложению вместо зелёных.
   Правила идут последними в каскаде и намеренно дублируют !important на тех
   же свойствах, что и более ранние блоки (тот же приём, что и v0.9.41/
   v0.9.121 выше) — так не нужно трогать ни один из исторических блоков или
   28 per-theme override'ов выше, и другие темы/брейкпоинты не ломаются.
   Разметка (HTML) и JS-обработчики (go(), toggleSeoProjectsNavList и т.д.)
   не менялись — только CSS, поэтому вся логика меню работает как раньше. */
:root{--yellow:#ffbd2e;--yellow-dark:#e6a300;--yellow-ink:#5c4200}

/* -- общая ширина сайдбара: рельса 52px + плиточная панель ~130px
   (было 64px + ~206px = 270px). Реально объявлена в workspace-ux.css
   (подключается последним в <head>, поэтому его :root всегда побеждал бы
   эту строку) — правьте там, эта строка здесь ничего не решает и оставлена
   только чтобы значение не потерялось при чтении файла по порядку. -- */
:root{--ux-sidebar-width:182px}

/* -- рельса: уже, залита цветом темы (была фиксированно тёмной) -- */
.side-rail{flex:0 0 52px!important;width:52px!important;padding:12px 4px 10px!important;background:linear-gradient(180deg,var(--ui-main,#00a86b),var(--ui-main-dark,#058e5f))!important}
/* v0.9.151: «сделай лого побольше» — было 30px (уже, чем базовые 36px из
   строки 1770), пользователь попросил крупнее. Рельса даёт 44px полезной
   ширины (52px - по 4px паддинга с боков), берём 40px — заметно крупнее,
   но с запасом 2px с каждой стороны, чтобы не упереться в паддинг рельсы. */
.side-rail .brand-mark{width:40px;height:40px}
/* v0.9.147 fix: рядом с лого в узкой рельсе жил невидимый (0×0), но
   реально существующий в DOM блок #departmentSubtitle — .brand{gap:9px}
   всё равно резервировал под него зазор, из-за чего лого визуально сидело
   не по центру своей 52px колонки (сдвиг ~4-5px влево). Правило пользователя
   («этого поля не должно быть, лого должно быть по центру», пример — The
   Qiosker, где лого — просто центрированный значок без соседних полей):
   убираем этот блок из потока полностью, тогда justify-content:center
   центрирует один-единственный оставшийся элемент — сам логотип. */
.side-rail .brand>div:last-child{display:none!important}
.side-footer-rail{flex:0 0 52px!important;width:52px!important;background:var(--ui-main-dark,#058e5f)!important}

/* -- рельса: иконки чёрные, без подложки; активная — жёлтая, тоже без фона -- */
.side-rail .nav.nav-rail button{width:38px;height:38px;margin:0 auto;background:transparent!important;color:#14181d!important;border-radius:11px!important}
.side-rail .nav.nav-rail button:hover{background:rgba(0,0,0,.08)!important}
.side-rail .nav.nav-rail button .nav-icon{stroke:#14181d!important}
.side-rail .nav.nav-rail button.active{background:transparent!important}
.side-rail .nav.nav-rail button.active .nav-icon{stroke:var(--yellow)!important}
.side-rail .nav.nav-rail button.active:before{display:none!important}
.side-footer-rail .nav button{background:transparent!important;color:#14181d!important}
.side-footer-rail .nav button:hover{background:rgba(0,0,0,.08)!important}
.side-footer-rail .nav button .nav-icon{stroke:#14181d!important}
.side-footer-rail .nav button.active{background:transparent!important}
.side-footer-rail .nav button.active .nav-icon{stroke:var(--yellow)!important}
.side-footer-rail .nav button.active:before,.side-panel .sidebar-body .nav button[data-page="settings"].active:before{display:none!important}
/* v0.9.148 fix: флажки нарочно шире рельсы на 6px (department-switch{width:
   calc(100% + 6px)}) — старый приём "язычок бесшовно достаёт до панели".
   Но .side-rail{overflow-y:auto} без явного overflow-x — по спеке CSS, раз
   один из осей не visible, браузер вычисляет и другую ось как auto тоже —
   и эти лишние 2-6px по горизонтали превращались в самую настоящую
   горизонтальную прокрутку с виджетом "◄●►" внизу рельсы (нашли по
   скриншоту пользователя). Панель и так стыкуется с рельсой без зазора
   (proverено: .side-panel.left === .side-rail.right), так что бесшовный
   бленд не нужен — просто убираем переполнение и на всякий случай глушим
   overflow-x явно. */
.side-rail{overflow-x:hidden!important}
.side-rail .department-switch{width:100%!important;margin:0 0 10px!important}

/* v0.9.150: «флажки должны прилегать к меню» — пользователь прислал скрин с
   волнистой красной линией вдоль стыка флажков и белой панели. Проверили
   через getBoundingClientRect: сама рельса (.side-rail) действительно
   стыкуется с панелью без зазора (right===182===panel.left, как и написано
   в комментарии выше), НО у рельсы есть свой правый padding 4px
   (padding:12px 4px 10px), и .department-switch — а значит и сами флажки —
   лежит внутри этого padding, поэтому правый край флажка (48px) не
   дотягивался 4px до правого края рельсы (52px) = до начала панели.
   Тянуть флажок шире (width:calc(100% + 4px)) нельзя — это тот самый трюк
   с "нахлёстом", который в v0.9.149 убрали именно из-за горизонтальной
   прокрутки. Вместо этого гасим правый padding только для department-switch
   отрицательным margin — флажок остаётся в границах рельсы (52px), просто
   занимает и её паддинг, scrollWidth не растёт.
   Важный нюанс: .side-rail — flex-колонка с align-items:center, поэтому
   один только отрицательный margin-right центрируется заново (уменьшенный
   margin-box просто съезжает к середине, а не к правому краю) — проверено
   через getBoundingClientRect, без align-self правый край останавливался
   на 50px вместо нужных 52px. Добавляем align-self:flex-end, чтобы
   margin-box сначала прижался к правому краю паддинга, а отрицательный
   margin уже вытолкнул его в сам паддинг вплотную к панели. */
.side-rail .department-switch{align-self:flex-end!important;margin-right:-4px!important}

/* -- флажки SEO/Продажи: белые, текст/иконка — цвет темы (были залиты цветом темы) -- */
/* v0.9.153: «сделай еще эти вкладки меньше в половину, они очень большими
   выглядыт и сделай тень» — эти правила (а не более ранние из v0.9.133,
   строка ~1900) на самом деле и решают итоговую высоту/тень язычков —
   они идут позже в каскаде с той же специфичностью и тем же !important,
   поэтому именно их значения побеждают. Высота убавлена ровно вдвое (тот
   же clamp, оба предела /2: 124→62, 168→84; у активного была без вычета
   16px — тоже /2 без вычета). Тень явно усилена и развёрнута вправо (в
   сторону белой панели, к которой язычок прилегает) вместо мелкого
   офсета влево — на тёмно-зелёном фоне рельсы прежняя была почти не
   видна, теперь заметно «приподнимает» язычок над панелью. */
.side-rail .department-switch .folder-tab{--tab-bg:var(--panel,#f6f8f9)!important;background:var(--tab-bg)!important;color:var(--ui-main-dark,#058e5f)!important;opacity:.6!important;width:38px!important;height:calc(clamp(62px,11.5vh,84px) - 8px)!important;box-shadow:3px 3px 9px -1px rgba(0,0,0,.32)!important}
.side-rail .department-switch .folder-tab:after{background:linear-gradient(45deg,rgba(0,0,0,.14) 49%,#0000 51%)!important}
.side-rail .department-switch .folder-tab.active{background:#fff!important;color:var(--ui-main-dark,#058e5f)!important;opacity:1!important;width:44px!important;height:clamp(62px,11.5vh,84px)!important;box-shadow:4px 4px 12px -1px rgba(0,0,0,.38)!important}
html[data-theme="yellow"] .side-rail .department-switch .folder-tab,html[data-theme="amber"] .side-rail .department-switch .folder-tab,html[data-theme="lime"] .side-rail .department-switch .folder-tab,html[data-theme="light"] .side-rail .department-switch .folder-tab,html[data-theme="white"] .side-rail .department-switch .folder-tab{color:#202734!important}

/* -- широкая панель: была сплошной заливкой цвета темы с тёмным текстом
   прямо на ней — теперь белая, пункты плиткой (иконка сверху, подпись
   снизу), текст/иконки — цвет темы, активный/наведённый — светло-зелёная
   плашка (color-mix; для очень старых браузеров без поддержки остаётся
   мягкий серый — строка перед color-mix ниже). -- */
.side-panel{background:#fff!important;flex:0 0 130px!important;width:130px!important}
.side-panel .sidebar-body{padding:14px 6px 10px!important}
.side-panel .sidebar-body .nav{gap:4px!important}
html body .side-panel .sidebar-body .nav button{
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  gap:5px!important;text-align:center!important;padding:9px 4px!important;border-radius:12px!important;
  color:var(--ui-main-dark,#058e5f)!important;font-weight:650!important;
}
.side-panel .sidebar-body .nav button span{font-size:10.5px;line-height:1.2;white-space:normal!important}
/* v0.9.154: «сделай эти иконку крупнее» — иконки пунктов меню в панели
   (Клиенты/Создать КП/…/Отчёт по отделу) были 21px, пользователь обвёл
   почти все пункты списком на скриншоте. Увеличены до 28px (+33%) —
   плитка и так вертикальная (иконка сверху, подпись снизу, gap 5px),
   места достаточно, текст не обрезается. */
.side-panel .sidebar-body .nav button .nav-icon{stroke:var(--ui-main-dark,#058e5f)!important;width:28px;height:28px;flex:0 0 28px}
html body .side-panel .sidebar-body .nav button:not(.nav-caret):hover,html body .side-panel .sidebar-body .nav button.active{
  background:#eaf6ef!important;
  background:color-mix(in srgb,var(--ui-main,#00a86b) 16%,#fff)!important;
  color:var(--ui-main-dark,#058e5f)!important;
}
.side-panel .sidebar-body .nav button:hover .nav-icon,.side-panel .sidebar-body .nav button.active .nav-icon{stroke:var(--ui-main-dark,#058e5f)!important}
.side-panel .sidebar-body .nav button.active:before{display:none!important}
.side-panel .sidebar-body .nav .sep{background:var(--line)!important;margin:4px 8px!important}

/* раскрывающиеся списки (SEO-проекты / SEO-инструменты) — стрелка переезжает
   в угол плитки, список — тоже плиткой (кружок + подпись), без отступа */
.side-panel .nav-row{position:relative;display:block!important}
.side-panel .nav-row .nav-row-main{width:100%}
.side-panel .nav-caret{position:absolute!important;top:3px;right:3px;width:18px;height:18px;background:transparent!important;border-radius:6px!important;color:var(--ui-main-dark,#058e5f)!important;font-size:10px}
.side-panel .nav-caret:hover{background:transparent!important;color:var(--ui-main-dark,#058e5f)!important}
.side-panel .nav-sublist{padding:2px 0 4px!important;gap:3px!important}
.side-panel .nav-sub-row{display:flex!important;flex-direction:column!important;align-items:center!important;gap:4px!important;text-align:center!important;padding:7px 4px!important;border-radius:10px!important;color:var(--ui-main-dark,#058e5f)!important;font-size:10.5px!important}
.side-panel .nav-sub-row:hover{background:#eaf6ef!important;background:color-mix(in srgb,var(--ui-main,#00a86b) 16%,#fff)!important;color:var(--ui-main-dark,#058e5f)!important}
.side-panel .project-mini-favicon{width:22px;height:22px;border-radius:50%!important;background:var(--panel,#f6f8f9)!important;border:1px solid var(--line);flex:none}
.side-panel .project-mini-favicon.placeholder{background:var(--panel,#f6f8f9)!important}
.side-panel .project-mini-name{white-space:normal!important;overflow:visible!important;max-width:100%;line-height:1.15}
.side-panel .tool-mini-icon{width:22px!important;height:22px!important;border-radius:50%!important;margin:0 auto}

/* userbox (низ панели) — уже центрирован по узкой колонке */
.side-footer-panel{padding:10px 6px!important;justify-content:center!important}
.side-footer-panel .userbox{text-align:center!important}
.side-footer-panel .userbox .name{font-size:11.5px}
.side-footer-panel .userbox .role{font-size:10px}

/* -- шапка: всегда светлая с тёмным текстом (была залита градиентом темы) -- */
.topbar{background:#fff!important}
.topbar h1{color:var(--text)!important}
.topbar-clock{color:var(--text)!important;opacity:.85!important}
.theme-settings-btn{border-color:var(--ui-main,#00a86b)!important;color:var(--ui-main-dark,#058e5f)!important}
.shift-toggle-btn{border:1.5px solid var(--ui-main,#00a86b)!important;background:#fff!important;color:var(--ui-main-dark,#058e5f)!important}
.shift-toggle-btn:hover{background:var(--panel,#f6f8f9)!important}
.shift-toggle-btn.active{background:var(--ui-main,#00a86b)!important;border-color:var(--ui-main,#00a86b)!important;color:var(--ui-on-main,#fff)!important}

/* -- «База знаний» — новая кнопка в шапке, ведёт на статьи (id=p-knowledge) -- */
.knowledge-base-btn{display:inline-flex!important;align-items:center;gap:6px;border:1.5px solid var(--ui-main,#00a86b)!important;color:var(--ui-main-dark,#058e5f)!important;background:#fff!important;font-weight:700}
.knowledge-base-btn:hover{background:var(--panel,#f6f8f9)!important}
.knowledge-base-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.kb-articles{display:grid;gap:10px;padding:14px}
.kb-article{background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px 14px;transition:background .12s ease}
.kb-article[open]{background:#fff}
.kb-article summary{list-style:none;cursor:pointer;padding:12px 0;display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text)}
.kb-article summary::-webkit-details-marker{display:none}
.kb-article summary .nav-icon{width:18px;height:18px;stroke:var(--ui-main-dark,#058e5f);flex:none}
.kb-article summary:after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
.kb-article[open] summary:after{transform:rotate(45deg)}
.kb-article-body{padding:0 0 14px 28px;color:var(--muted);font-size:12.5px;line-height:1.55}
/* v0.9.151: «×» на статьях, добавленных через интерфейс (только у
   Владельца/Администратора — рендерится в JS условно, см. loadKnowledgeArticles) */
.kb-article-del{width:20px;height:20px;flex:none;border:0;background:transparent;color:var(--muted);font-size:15px;line-height:1;border-radius:6px;cursor:pointer}
.kb-article-del:hover{background:#f1f4f6;color:#c23b3b}

/* -- основные кнопки жёлтые по всему приложению (были зелёными) -- */
.btn.primary{background:var(--yellow)!important;border-color:var(--yellow)!important;color:var(--yellow-ink)!important}
.btn.primary:hover{background:var(--yellow-dark)!important;border-color:var(--yellow-dark)!important}
body[data-current-page="clients"] .top-client-button,body[data-department="seo"] .top-client-button,.top-client-button{background:var(--yellow)!important;border-color:var(--yellow)!important;color:var(--yellow-ink)!important}

/* -- декоративные круги (в духе уже существующего .topbar:before) — добавлены
   в шапку (второе, жёлтое кольцо) и в плиточную панель меню, для красоты -- */
.topbar:before{border-color:rgba(0,184,107,.05)!important}
.topbar{overflow:hidden}
.topbar:after{background:linear-gradient(90deg,var(--ui-main,#00a86b),var(--yellow),transparent)!important;display:block!important}
.side-panel{position:relative;overflow:hidden}
.side-panel:before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;border:16px solid rgba(0,168,107,.05);right:-60px;top:-40px;pointer-events:none}
.side-panel:after{content:"";position:absolute;width:70px;height:70px;border-radius:50%;border:12px solid rgba(255,189,46,.14);left:-30px;bottom:70px;pointer-events:none}
.side-panel .sidebar-body{position:relative;z-index:1}

@media(max-width:900px){
  .side-rail{flex:0 0 52px!important;width:52px!important}
  .side-panel{flex:1 1 auto!important;width:auto!important}
}
/* v0.9.147 fix: на узких экранах в одну строку шапки не помещались часы +
   кнопка рабочего дня + баланс + «База знаний» + шестерёнка — новая кнопка
   «База знаний» перекрывала гамбургер-меню (Playwright поймал реальный клик
   мимо цели). Прячем часы и «База знаний» (не критично на телефоне,
   доступно с десктопа), остальное ужимаем — тот же приём, что и остальные
   .topbar правила в этом брейкпоинте (app.css ~2450 / workspace-ux.css). */
@media(max-width:700px){
  .topbar-clock,.knowledge-base-btn{display:none!important}
  .shift-toggle-btn{padding:5px 8px!important;font-size:11px!important}
  /* v0.9.147 fix pt.2: даже без часов/«Базы знаний» оставшиеся кнопки
     (рабочий день + баланс + шестерёнка) не сжимались сами —flexbox отбирал
     всю ширину у .topbar-left (min-width:0 из базового правила), и заголовок
     страницы схлопывался до 0px (Playwright: getBoundingClientRect().width
     === 0 у #title, хотя textContent на месте). Заголовку гарантирован
     минимум, а действия при нехватке места скроллятся вбок, а не давят
     заголовок. */
  .topbar-left{min-width:70px!important;flex:1 1 auto!important}
  .topbar-actions{flex:0 1 auto!important;overflow-x:auto!important;max-width:62vw;scrollbar-width:none!important}
  .topbar-actions::-webkit-scrollbar{display:none}
}
/* v0.9.152: "стрелка переворачивается не на месте, будто вокруг чужой оси" —
   .nav-caret тоже <button>, поэтому на неё случайно попадало общее правило
   .sidebar-body .nav button{min-height:42px} (workspace-ux.css). min-height
   всегда побеждает более ранний height:18px независимо от специфичности
   селектора — в итоге реальный бокс стрелки был 18×42px вместо 18×18px,
   transform-origin съезжал вниз, а сама стрелка на 3px "вылезала" за нижний
   край строки меню. Возвращаем стрелке компактный квадратный бокс, чтобы
   rotate(180deg) крутил её строго вокруг геометрического центра глифа. */
.side-panel .nav-caret{min-height:18px!important;height:18px!important}

/* v0.9.152: «опять системный вид» — #mdStatsPeriod (селектор периода на
   вкладке «Статистика» карточки сотрудника) был голым <select> без class,
   вне .field/.manager-filter-row/.crm-toolbar — то есть доставался только
   базовый select{appearance:none;...} без border/паддинга/фона, ровно тот
   же баг, что чинили в v0.9.140 (.priority-select) и v0.9.142
   (.pulse-type-select). Даём ему тот же вид "пилюли", что и у остальных
   select в тулбарах. */
.stats-period-select{padding:9px 30px 9px 12px!important;border:1px solid var(--line);border-radius:9px;background-color:#fff;font-size:13px;font-weight:600;color:var(--text)}
/* Добавилась 4-я карточка «Рабочее время» — на узких экранах пусть
   переносится по 2 в ряд, а не сжимает 4 колонки до нечитаемой ширины. */
.employee-stat-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat.time:after{border-color:rgba(88,110,238,.09)}
@media (max-width:640px){.employee-stat-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* v0.9.153: настоящая пауза у кнопки рабочего дня — визуально отличаем от
   «идёт» (зелёная), чтобы на глаз было видно, что время сейчас НЕ тикает:
   тот же янтарный, что и у предупреждений/просрочки в интерфейсе. */
.shift-toggle-btn.active.paused{background:#c98a00!important;border-color:#c98a00!important}
/* v0.9.153: редактор базы знаний — заголовки (H2/H3) и вставленные картинки
   внутри .rich-editable (сам редактор) и .kb-article-body (отображение
   сохранённой статьи) должны выглядеть одинаково в обоих местах. */
.rich-editable h2,.kb-article-body h2{font-size:17px;font-weight:700;margin:10px 0 6px;line-height:1.3;color:var(--text)}
.rich-editable h3,.kb-article-body h3{font-size:14.5px;font-weight:700;margin:8px 0 5px;line-height:1.3;color:var(--text)}
.rich-editable h2:first-child,.kb-article-body h2:first-child,
.rich-editable h3:first-child,.kb-article-body h3:first-child{margin-top:0}
.rich-editable img,.kb-article-body img{max-width:100%;height:auto;border-radius:8px;margin:6px 0;display:block}
/* Кнопка «🖼» в тулбаре — тот же квадратный вид, что у «📎» рядом. */
.rich-toolbar .rich-image{font-size:13px}