/* Оформление портала. Все цвета живут только здесь: страницы разделов
   берут их через переменные, поэтому смена стиля — правка этого блока,
   а не восемнадцати файлов.

   Палитра: белый лист, чёрный текст, серые рамки, зелёный — единственный
   акцент (он же в кнопке «сохранить»). Шрифт один на весь портал — Inter. */
:root{
    --bg:#F7F8FA;
    --surface:#FFFFFF;
    --surface-raised:#F3F4F6;
    --border:#D1D5DB;
    --border-soft:#E5E7EB;
    --text:#111111;
    --text-dim:#4B5563;
    --text-faint:#6B7280;
    --positive:#0F7A36;
    --negative:#B42318;

    /* Мягкие тени: карточка приподнята над листом, но без «пластика». */
    --shadow-sm:0 1px 2px rgba(17,17,17,.05);
    --shadow-md:0 4px 14px rgba(17,17,17,.07);
    --shadow-lg:0 18px 48px rgba(17,17,17,.14);

    --soft-blue-bg:#EFF4F8;    --soft-blue-text:#3E6E8E;
    --soft-green-bg:#E8F8EF;   --soft-green-text:#0F7A36;
    --soft-yellow-bg:#FDF3E3;  --soft-yellow-text:#B9762F;
    --soft-red-bg:#FDECEA;     --soft-red-text:#B42318;

    /* Зелёный — единственный акцент портала: кнопка главного действия,
       активный пункт меню, отметка о выполнении. Имя --c-yandex-direct
       осталось с тех пор, когда портал был рекламным кабинетом; в разделе
       «Реклама» эта переменная по-прежнему означает цвет Яндекс.Директа и
       задаётся там отдельно. */
    --accent:#16C653;
    --accent-dark:#12A845;
    --accent-soft:#E8F8EF;
    --c-yandex-direct:#16C653;
    --prio-high:#EF4444;
    --prio-normal:#F4C400;
    --prio-low:#9CA3AF;
    --placeholder:#9CA3AF;
    --c-vk-ads:#3E6E8E;
    --c-avito:#B9762F;
    --c-yandex-business:#8B5FBF;
    --c-yandex-zen:#C74B4B;
    --c-google-ads:#2563AF;
    --c-taplink:#8B5CF6;
    --radius:14px;
    --radius-sm:10px;
    --radius-lg:20px;

    /* Стикеры задач — бумажный жёлтый, темнее фона страницы, чтобы
       читались как наклеенные листки, а не как ещё одна карточка. */
    --sticky-bg:#FBF3D9;
    --sticky-border:#E8D9A8;
    --sticky-meta:#8A7440;

    --sidebar:#111111;
    --sidebar-hover:#1F2023;

    /* Палитра диаграмм и разделов. Шесть оттенков, различимых и рядом, и
       по отдельности; светлые парные — для подложек и плиток. Цвет здесь
       значит смысл: зелёный — деньги пришли, синий — люди, янтарный —
       ожидание, красный — потеря, сиреневый — управление, бирюзовый —
       продвижение. Не для украшения: если цвет ничего не значит, его на
       диаграмме быть не должно. */
    --ch-green:#16A34A;   --ch-green-soft:#E8F8EF;
    --ch-blue:#3E6E8E;    --ch-blue-soft:#EFF4F8;
    --ch-amber:#D9902F;   --ch-amber-soft:#FDF3E3;
    --ch-red:#DC5B4B;     --ch-red-soft:#FDECEA;
    --ch-violet:#8B5FBF;  --ch-violet-soft:#F3EDFA;
    --ch-teal:#2E9B96;    --ch-teal-soft:#E6F5F4;
    --ch-grey:#9CA3AF;    --ch-grey-soft:#F3F4F6;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;}
  .mono{font-variant-numeric:tabular-nums;}
  h1,h2,h3,.serif{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:-.015em;}

  .app-shell{display:flex;min-height:100vh;}

  .sidebar{
    width:232px;flex-shrink:0;background:var(--sidebar);color:#E8E7E1;
    padding:22px 0;display:flex;flex-direction:column;gap:0;position:sticky;top:0;height:100vh;overflow-y:auto;
  }
  .brand{font-family:'Inter',sans-serif;font-size:22px;font-weight:700;padding:0 22px 22px;border-bottom:1px solid #3A3B36;margin:0 0 12px;display:flex;align-items:center;gap:10px;color:#E8E7E1;}
  .brand span{color:var(--c-yandex-direct);filter:brightness(1.4) saturate(1.3);}
  .brand .dot{width:8px;height:8px;border-radius:50%;background:var(--c-yandex-direct);filter:brightness(1.4) saturate(1.3);box-shadow:0 0 0 4px rgba(255,255,255,.08);flex-shrink:0;}
  .brand h1{font-size:22px;margin:0;font-weight:700;}
  .brand .sub{color:#8B8C85;font-size:10.5px;font-weight:500;line-height:1.4;font-family:'Inter',sans-serif;}

  .nav{display:flex;flex-direction:column;gap:0;padding:0 10px;}
  .nav-label{font-size:11px;color:#8B8C85;padding:14px 12px 6px;letter-spacing:.03em;text-transform:uppercase;font-weight:600;}
  /* Шестерёнка настроек стоит в строке первой группы меню. */
  .nav-label{display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .nav-gear{
    border:none;background:none;cursor:pointer;color:inherit;opacity:.55;
    padding:2px;border-radius:6px;line-height:0;
  }
  .nav-gear svg{width:15px;height:15px;}
  .nav-gear:hover{opacity:1;background:rgba(255,255,255,.12);}

  /* Окно настроек меню. */
  .ms-group{border:1px solid var(--border-soft);border-radius:12px;padding:8px 10px;margin-bottom:9px;}
  .ms-items{padding-left:14px;border-left:2px solid var(--border-soft);margin-top:6px;}
  .ms-row{display:grid;grid-template-columns:20px 1fr auto;gap:9px;align-items:center;padding:3px 0;}
  .ms-row + .ms-row{margin-top:3px;}
  .ms-ic{color:var(--text-faint);line-height:0;}
  .ms-ic svg{width:16px;height:16px;}
  .ms-nm{font-size:13.5px;}
  .ms-row input{padding:5px 9px;font-size:13.5px;}
  .ms-group > .ms-row .ms-nm, .ms-group > .ms-row input{font-weight:600;}
  .ms-acts{display:flex;gap:4px;}
  .ms-btn{
    width:26px;height:26px;border-radius:7px;border:1px solid var(--border-soft);
    background:var(--surface);cursor:pointer;font-size:12px;color:var(--text-dim);padding:0;line-height:1;
  }
  .ms-btn:hover:not(:disabled){border-color:var(--accent);color:var(--text);}
  .ms-btn:disabled{opacity:.35;cursor:default;}
  .nav-item{
    display:flex;align-items:center;gap:10px;text-align:left;border:none;background:transparent;text-decoration:none;
    padding:10px 12px;border-radius:8px;font-family:'Inter';font-weight:500;font-size:13px;
    color:#CFCFC7;cursor:pointer;transition:all .15s ease;width:100%;border-left:3px solid transparent;
  }
  .nav-item .nav-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:#6b6c66;}
  /* Бейджи уведомлений в стиле iOS: синий — новое, красный — просрочено. */
  .nav-badges{margin-left:auto;display:flex;gap:4px;flex-shrink:0;}
  .nav-badge{
    min-width:17px;height:17px;padding:0 4px;border-radius:9px;display:flex;align-items:center;
    justify-content:center;font-size:10.5px;font-weight:700;color:#fff;line-height:1;
    font-variant-numeric:tabular-nums;box-shadow:0 0 0 1.5px rgba(0,0,0,.15);
  }
  .nav-badge.new{background:#0A84FF;}
  .nav-badge.overdue{background:#FF3B30;}
  /* Закупки: жёлтый — новая заявка ждёт решения, зелёный — одобрена и ждёт реализации. */
  .nav-badge.pending{background:#FFD60A;color:#3a2f00;box-shadow:0 0 0 1.5px rgba(0,0,0,.1);}
  .nav-badge.approved{background:#34C759;}

  /* Единица измерения в заявке на закупку — колесо-пикер в стиле iOS
     вместо выпадающего списка (requests-page.js: openUnitPicker). */
  .wheel-trigger{
    width:100%;text-align:left;padding:9px 12px;border-radius:10px;border:1px solid var(--border);
    background:var(--surface);color:var(--text);font:inherit;cursor:pointer;
  }
  .wheel-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:400;display:flex;align-items:flex-end;justify-content:center;}
  .wheel-sheet{width:100%;max-width:480px;background:var(--surface);border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom, 0);}
  .wheel-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-weight:600;font-size:13.5px;border-bottom:1px solid var(--border);}
  .wheel-viewport{position:relative;height:200px;overflow:hidden;}
  .wheel-list{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;}
  .wheel-list::-webkit-scrollbar{display:none;}
  .wheel-item{height:40px;line-height:40px;text-align:center;font-size:17px;color:var(--text-faint);scroll-snap-align:center;transition:color .15s, font-size .15s;}
  .wheel-item.active{color:var(--text);font-weight:700;font-size:19px;}
  .wheel-highlight{position:absolute;top:50%;left:8px;right:8px;height:40px;margin-top:-20px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);pointer-events:none;}
  /* Значок раздела: те же иконки, что на плитках главной и в шапке. */
  .nav-item .nav-ic{flex:none;display:flex;width:18px;height:18px;opacity:.7;}
  .nav-item .nav-ic svg{width:18px;height:18px;display:block;}
  .nav-item:hover .nav-ic{opacity:1;}
  .nav-item.active{background:var(--sidebar-hover);color:#fff;border-left:3px solid var(--c-yandex-direct);font-weight:600;}
  .nav-item.active .nav-dot{background:var(--c-yandex-direct);filter:brightness(1.4) saturate(1.3);}
  .nav-item.active .nav-ic{opacity:1;color:var(--c-yandex-direct);}
  .nav-item:not(.active):hover{background:var(--sidebar-hover);color:#fff;}
  .nav-item.muted{opacity:.5;cursor:default;}
  .nav-item.muted:hover{background:transparent;color:#CFCFC7;}
  .nav-item.add{color:#9A9C93;font-style:italic;}
  .nav-item.add .nav-dot{background:none;border:1px dashed #6b6c66;}

  .main-area{flex:1;min-width:0;display:flex;flex-direction:column;}
  .topbar{
    display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px;
    padding:20px 32px;border-bottom:1px solid var(--border);position:sticky;top:0;
    background:rgba(255,255,255,0.92);backdrop-filter:blur(8px);z-index:10;
  }
  .view-ic{
    flex:none;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
    background:var(--surface-raised);color:var(--text-dim);
  }
  .view-ic svg{width:21px;height:21px;}
  .view-title{font-family:'Inter',sans-serif;font-size:26px;font-weight:600;}
  .view-sub{font-size:12px;color:var(--text-faint);margin-top:4px;}
  .controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

  .tabgroup{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px;gap:2px;}
  .tabgroup button{
    border:none;background:transparent;color:var(--text-dim);
    padding:8px 15px;border-radius:999px;font-family:'Inter';font-weight:500;font-size:12.5px;
    cursor:pointer;transition:all .15s ease;white-space:nowrap;
  }
  .tabgroup button.active{background:var(--soft-blue-bg);color:var(--soft-blue-text);font-weight:600;}
  .tabgroup.accent-green button.active{background:var(--soft-green-bg);color:var(--soft-green-text);}
  .tabgroup.accent-yellow button.active{background:var(--soft-yellow-bg);color:var(--soft-yellow-text);}
  .tabgroup.accent-blue button.active{background:var(--soft-blue-bg);color:var(--soft-blue-text);}
  .tabgroup button:not(.active):hover{color:var(--text);}
  .tabgroup .add-btn{color:var(--soft-green-text);font-weight:700;}

  /* Рабочая область занимает всю ширину окна.
     Ограничение в 1180px осталось от рекламного дашборда, где были
     графики; в портале же таблицы, доски и календари — на широком
     мониторе они упирались в невидимую границу и уезжали в
     горизонтальную прокрутку, пока справа и слева пустовало по 300px. */
  main{padding:28px 32px 60px;width:100%;margin:0;}
  .view{display:none;}
  .view.active{display:block;}

  .empty-note{
    display:none;align-items:center;gap:10px;background:var(--surface);border:1px dashed var(--border);
    color:var(--text-dim);font-size:12.5px;padding:10px 14px;border-radius:var(--radius);margin-bottom:20px;
  }
  .empty-note.show{display:flex;}
  .empty-note.error{border-color:var(--soft-red-text);}
  .empty-note .badge{
    font-size:10.5px;font-weight:600;background:var(--soft-red-bg);
    color:var(--soft-red-text);padding:2px 7px;border-radius:20px;letter-spacing:.03em;
  }
  .empty-note button{margin-left:auto;flex-shrink:0;}

  .empty-state{background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);padding:44px 20px;text-align:center;}
  .empty-state .empty-title{font-family:'Inter',sans-serif;font-weight:600;font-size:20px;color:var(--text);margin-bottom:6px;}
  .empty-state .empty-sub{color:var(--text-dim);font-size:12.5px;max-width:420px;margin:0 auto 16px;line-height:1.5;}

  /* ---- totals (сводный дашборд) ---- */
  .totals{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:14px;margin-bottom:24px;}
  .totals .big{background:var(--text);color:#fff;border-radius:var(--radius);padding:22px 24px;}
  .totals .big .label{font-size:12px;color:#B9BDB2;margin-bottom:6px;}
  .totals .big .amount{font-family:'Inter',sans-serif;font-weight:700;font-size:32px;}
  .totals .big .trend{font-size:12px;margin-top:6px;font-weight:500;color:#B9BDB2;}
  .totals .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;}
  .totals .card .label{font-size:12px;color:var(--text-faint);margin-bottom:8px;}
  .totals .card .amount{font-family:'Inter',sans-serif;font-weight:700;font-size:26px;}
  .totals .card .trend{font-size:12px;margin-top:6px;font-weight:500;}
  .up{color:var(--positive);}
  .down{color:var(--negative);}
  @media (max-width:900px){ .totals{grid-template-columns:1fr 1fr;} }

  .section-title{display:flex;align-items:baseline;justify-content:space-between;margin:32px 0 14px;flex-wrap:wrap;gap:8px;}
  .section-title:first-child{margin-top:0;}
  .section-title h2{font-family:'Inter',sans-serif;font-size:20px;color:var(--text);font-weight:600;margin:0;}
  .section-title .hint{font-size:11.5px;color:var(--text-faint);}

  /* ---- panels / charts ---- */
  .charts-row{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:28px;}
  @media (max-width:900px){ .charts-row{grid-template-columns:1fr;} }
  .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;}
  .panel h2{font-family:'Inter',sans-serif;font-size:20px;font-weight:600;margin:0 0 2px;}
  .panel .sub{font-size:12px;color:var(--text-faint);margin-bottom:14px;}
  .info-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;}
  .canvas-wrap{position:relative;height:280px;}
  .zoom-hint{font-size:11px;color:var(--text-faint);}
  .zoom-reset{
    flex-shrink:0;padding:7px 14px;background:#fff;border:1px solid var(--border);border-radius:8px;
    font-size:12px;color:var(--text-faint);cursor:pointer;font-family:'Inter';
  }
  .zoom-reset:hover{border-color:var(--c-yandex-direct);color:var(--soft-green-text);}

  .donut-wrap{display:flex;align-items:center;gap:20px;}
  .donut-legend{flex:1;}
  .donut-legend .row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px solid var(--border);}
  .donut-legend .row:last-child{border-bottom:none;}
  .donut-legend .name{display:flex;align-items:center;gap:8px;}
  .donut-legend .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
  .donut-legend .val{font-weight:600;font-variant-numeric:tabular-nums;}

  .funnel-legend{display:flex;gap:16px;margin:12px 0 8px;flex-wrap:wrap;}
  .funnel-legend span{font-size:12px;color:var(--text-faint);display:flex;align-items:center;gap:6px;}
  .funnel-legend .dot{width:9px;height:9px;border-radius:50%;}

  /* ---- platform cards (сводный дашборд) ---- */
  .platforms{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px;}
  @media (max-width:900px){ .platforms{grid-template-columns:1fr 1fr;} }
  @media (max-width:600px){ .platforms{grid-template-columns:1fr;} }
  .platform-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;position:relative;cursor:pointer;transition:border-color .15s;}
  .platform-card:hover{border-color:var(--c-yandex-direct);}
  .platform-card .ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:8px;}
  .platform-card .ph .name{font-weight:600;font-size:15px;}
  .status-ok{background:var(--soft-green-bg);color:var(--soft-green-text);}
  .status-warn{background:var(--soft-yellow-bg);color:var(--soft-yellow-text);}
  .status-off{background:var(--surface-raised);color:var(--text-faint);}
  .platform-card .balance-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
  .platform-card .balance-row .amount{font-family:'Inter',sans-serif;font-weight:700;font-size:22px;}
  .platform-card .balance-row .runway{font-size:11px;color:var(--text-faint);}
  .mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid var(--border);padding-top:12px;}
  .mini-stats div{text-align:center;}
  .mini-stats .v{font-size:15px;font-weight:600;}
  .mini-stats .l{font-size:10px;color:var(--text-faint);margin-top:2px;}
  .platform-card.disabled{background:#FBFAF7;cursor:default;}
  .platform-card.disabled:hover{border-color:var(--border);}
  .platform-card.disabled .name{color:var(--text-faint);}
  .connect-btn{margin-top:8px;width:100%;padding:8px;background:none;border:1px dashed var(--border);border-radius:8px;color:var(--text-faint);font-size:12px;cursor:pointer;font-family:'Inter';}

  /* ---- tiles (кабинет площадки) ---- */
  .tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px;}
  @media (max-width:900px){ .tiles{grid-template-columns:repeat(2,1fr);} }
  .tile{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px;}
  .tile .t-label{font-size:12px;color:var(--text-faint);margin-bottom:8px;}
  .tile .t-value{font-family:'Inter',sans-serif;font-weight:700;font-size:26px;}
  .tile .t-trend{font-size:12px;margin-top:6px;font-weight:500;}

  .data-table, .ledger{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
  .data-table table, .ledger table{width:100%;border-collapse:collapse;}
  .data-table thead th, .ledger thead th{
    text-align:left;font-size:11px;color:var(--text-faint);
    font-weight:600;padding:12px 16px;border-bottom:1px solid var(--border);
  }
  .data-table tbody td, .ledger tbody td{padding:13px 16px;font-size:13px;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums;}
  .data-table tbody tr:last-child td, .ledger tbody tr:last-child td{border-bottom:none;}
  .data-table tbody tr:hover, .ledger tbody tr:hover{background:var(--surface-raised);}
  .data-table td.channel, .ledger td.channel{font-weight:600;display:flex;align-items:center;gap:9px;}
  .data-table td.proj, .ledger td.proj{color:var(--text-dim);font-weight:500;font-size:12.5px;}
  .data-table .empty-row td, .ledger .empty-row td{text-align:center;color:var(--text-faint);padding:26px;}
  .data-table td.num, .ledger td.num{text-align:right;}
  .data-table th.num, .ledger th.num{text-align:right;}

  /* Экспресс-оценка канала — "светофор". Круг нарочно в насыщенный
     семантический цвет (не пастель) — иначе теряется сам смысл светофора;
     всё остальное (карточка/текст) остаётся в общей светлой палитре. */
  .score-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
  @media (max-width:900px){ .score-row{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:520px){ .score-row{grid-template-columns:repeat(2,1fr);} }
  .score-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
  .score-card.inactive{opacity:.45;}
  .score-circle{
    width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-family:'Inter',sans-serif;font-weight:700;font-size:20px;color:var(--text);flex-shrink:0;
    background:var(--surface);border:4px solid var(--border);
  }
  .score-circle.green{border-color:#4A9B5E;}
  .score-circle.yellow{border-color:#D9A441;}
  .score-circle.red{border-color:#D24C3F;}
  .score-card .label{font-weight:600;font-size:11.5px;}

  .chip-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
  .status{font-size:11px;padding:3px 10px;border-radius:20px;font-weight:500;letter-spacing:.02em;display:inline-block;}
  .status.ok, .status.active, .status.applied, .status.approved, .status.published{background:var(--soft-green-bg);color:var(--soft-green-text);}
  .status.pending, .status.draft{background:var(--surface-raised);color:var(--text-faint);}
  .status.paused{background:var(--soft-yellow-bg);color:var(--soft-yellow-text);}
  .status.failed, .status.rejected{background:var(--soft-red-bg);color:var(--soft-red-text);}

  .btn{border:none;background:var(--soft-blue-bg);color:var(--soft-blue-text);font-family:'Inter';font-weight:500;
    font-size:12px;padding:7px 13px;border-radius:8px;cursor:pointer;white-space:nowrap;}
  .btn:hover{filter:brightness(0.96);}
  .btn.green{background:var(--soft-green-bg);color:var(--soft-green-text);}
  .btn.negative{background:var(--soft-red-bg);color:var(--soft-red-text);}
  .btn:disabled{opacity:.5;cursor:not-allowed;}
  .btn-row{display:flex;gap:6px;flex-wrap:wrap;}
  .panel-noimpl{font-size:10.5px;color:var(--text-faint);background:var(--surface-raised);padding:2px 8px;border-radius:20px;}

  .modal-backdrop{position:fixed;inset:0;background:rgba(27,28,26,.45);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px;overflow-y:auto;}
  /* Длинная форма (много полей — оформление кандидата и т.п.) не должна
     растягивать саму карточку выше экрана: тогда кнопки «Отмена»/
     «Сохранить» уезжают за пределы видимой области и выглядят так,
     будто вывалились из окна. Карточка ограничена высотой экрана,
     прокручивается только середина (modal-body), а заголовок и кнопки
     всегда на виду. */
  .modal{
    background:var(--surface);border-radius:var(--radius);padding:24px;width:400px;max-width:100%;
    border:1px solid var(--border);margin:auto;position:relative;
    display:flex;flex-direction:column;max-height:calc(100vh - 32px);
  }
  .modal h3{font-family:'Inter',sans-serif;margin:0 0 10px;font-size:20px;font-weight:600;flex:none;}
  .modal .modal-body{color:var(--text-dim);font-size:12.5px;line-height:1.6;margin-bottom:16px;overflow-y:auto;min-height:0;}
  .modal .modal-body p{margin:0 0 10px;}
  .modal input, .modal select{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:8px;font-family:'Inter';font-size:13px;margin-bottom:6px;color:var(--text);background:var(--surface);}
  /* Флажки и переключатели — не текстовые поля: правило width:100% выше
     растягивало их на всю строку, браузер сжимал обратно до минимума, и
     подпись прилипала к квадратику. Возвращаем им их собственный размер
     везде, а не только там, где стоит класс .check. */
  .modal input[type=checkbox], .modal input[type=radio],
  input[type=checkbox], input[type=radio]{
    width:16px;height:16px;min-width:16px;padding:0;margin:0;flex:none;
    accent-color:var(--c-yandex-direct);
    /* Для чекбоксов, стоящих прямо в строке текста. Во flex- и
       grid-контейнерах это правило не действует, там сдвиг задаётся
       отступом, поэтому оно ничего не ломает. */
    vertical-align:-3px;
  }
  .modal select{font-family:'Inter';font-weight:500;}
  /* Кнопки в столбик, а не в ряд: с длинной подписью («Утвердить и
     сформировать документы») и узкой карточкой (400px) ряд не помещался
     и «Отмена» вылезала за пределы окна — full-width, друг над другом,
     не помещается никогда. Главное действие — сверху (это оно набрано
     жирно зелёным и на него смотрят в первую очередь), «Отмена» — под
     ним, чтобы случайный тап по нижней кнопке не отменял форму. */
  .modal-actions{display:flex;flex-direction:column-reverse;gap:8px;}
  .modal-actions .btn{width:100%;text-align:center;white-space:normal;}

  /* Подтверждение действия. Появляется сверху по центру, а не в углу:
     человек только что нажал кнопку в модальном окне и смотрит в центр
     экрана — уведомление в правом нижнем углу он попросту не замечает. */
  .toast{
    position:fixed;top:18px;left:50%;transform:translateX(-50%);
    display:flex;align-items:center;gap:10px;
    background:var(--text);color:#fff;padding:13px 20px;border-radius:12px;
    font-size:13.5px;font-weight:500;font-family:'Inter';z-index:400;
    box-shadow:0 6px 24px rgba(0,0,0,.22);max-width:min(460px,calc(100vw - 32px));
    animation:toast-in .18s ease-out;
  }
  .toast .t-icon{
    flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:700;background:rgba(255,255,255,.18);
  }
  .toast.ok{background:#3E5233;}
  .toast.err{background:#A23B2E;}
  .toast.info{background:#3E6E8E;}
  .toast .t-text{line-height:1.35;}
  @keyframes toast-in{from{opacity:0;transform:translate(-50%,-10px);}to{opacity:1;transform:translate(-50%,0);}}
  @media (prefers-reduced-motion:reduce){ .toast{animation:none;} }

  .creative-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;}
  .creative-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;}
  .creative-thumb{aspect-ratio:1;background:var(--surface-raised);display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:11px;}
  .creative-thumb img{width:100%;height:100%;object-fit:cover;}
  .creative-body{padding:10px 12px;flex:1;}
  .creative-project{font-size:11.5px;font-weight:600;margin-bottom:4px;}
  .creative-prompt{font-size:11.5px;color:var(--text-dim);line-height:1.4;max-height:48px;overflow:hidden;margin-bottom:8px;}
  .creative-actions{display:flex;gap:6px;padding:0 12px 12px;}

  .form-row{margin-bottom:12px;}
  .form-row label{display:block;font-size:11px;font-weight:600;color:var(--text-dim);margin-bottom:5px;letter-spacing:.02em;}
  .form-row input, .form-row textarea, .form-row select{
    width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:8px;font-family:'Inter';
    font-size:13px;color:var(--text);background:var(--surface);
  }

  footer{text-align:center;padding:20px;color:var(--text-faint);font-size:11px;}

  .login-screen{
    position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:500;padding:16px;
  }
  .login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:30px;width:340px;max-width:100%;}
  .login-note{font-size:11.5px;color:var(--text-faint);margin-top:10px;line-height:1.5;min-height:14px;}
  .login-note.error{color:var(--soft-red-text);}

  .sidebar-user{margin-top:auto;padding:14px 22px 0;border-top:1px solid #3A3B36;}
  .sidebar-user .user-name{font-size:13px;font-weight:600;margin-bottom:2px;color:#fff;}
  .sidebar-user .user-role{font-size:10.5px;color:#8B8C85;margin-bottom:8px;}
  .sidebar-user .logout-btn{
    border:none;background:transparent;color:#8B8C85;font-family:'Inter';font-weight:500;
    font-size:11.5px;padding:0;cursor:pointer;
  }
  .sidebar-user .logout-btn:hover{color:#E8E7E1;}

  /* Построчный список каналов (не плитка) — компактнее и легче сравнивать
     статусы между собой, когда каналов у проекта несколько. */
  .channel-grid{display:flex;flex-direction:column;gap:10px;}
  .channel-card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:12px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  }
  .channel-card .channel-head{display:flex;align-items:center;gap:10px;flex:1 1 220px;min-width:0;order:1;}
  .channel-card .channel-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;min-width:0;}
  .channel-card .channel-title span.name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .channel-card .channel-sub{font-size:10.5px;color:var(--text-faint);flex:1 1 200px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;order:2;}
  .channel-card .btn-row{flex:0 0 auto;margin-left:auto;order:3;}
  .channel-card .channel-error{
    font-size:11px;color:var(--soft-red-text);line-height:1.4;background:var(--soft-red-bg);
    padding:6px 10px;border-radius:8px;flex:1 1 100%;order:4;
  }
  .add-channel-card{
    border:1px dashed var(--border);border-radius:var(--radius);display:flex;align-items:center;
    min-height:44px;padding:0 16px;background:transparent;cursor:pointer;color:var(--text-dim);font-weight:600;font-size:13px;
  }
  .add-channel-card:hover{background:var(--surface-raised);border-color:var(--soft-blue-text);}

  .settings-project{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;margin-bottom:18px;}
  .settings-project-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 14px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border);}
  .settings-project-head h3{font-family:'Inter',sans-serif;font-size:21px;font-weight:700;margin:0;}
  .settings-project-badge{font-size:10.5px;font-weight:600;padding:3px 10px;border-radius:20px;background:var(--soft-blue-bg);color:var(--soft-blue-text);letter-spacing:.02em;}
  .settings-subhead{font-size:11px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 10px;}
  .settings-subhead:first-of-type{margin-top:0;}

  .login-card .brand{color:var(--text);border-bottom-color:var(--border);}
  .login-card .brand .dot{background:var(--c-yandex-direct);box-shadow:0 0 0 4px var(--soft-green-bg);}

  /* Бургер-меню — кнопка видна только на мобильных, на десктопе скрыта.
     На узких экранах сайдбар уезжает за левый край (transform), а не
     занимает место горизонтальной полосой как раньше — так остаётся
     нормальная высота под контент. Открывается поверх контента с
     затемняющей подложкой (sidebar-backdrop), закрывается кликом по ней,
     по пункту меню или по самому бургеру. */
  .burger-btn{display:none;}
  .sidebar-backdrop{display:none;}
  @media (max-width:820px){
    .app-shell{position:relative;}
    .burger-btn{
      display:flex;align-items:center;justify-content:center;
      width:38px;height:38px;border-radius:10px;border:1px solid var(--border);
      background:var(--surface);cursor:pointer;flex-shrink:0;gap:0;
    }
    .burger-btn span{display:block;width:16px;height:2px;background:var(--text);position:relative;}
    .burger-btn span::before,.burger-btn span::after{content:"";position:absolute;left:0;width:16px;height:2px;background:var(--text);}
    .burger-btn span::before{top:-5px;}
    .burger-btn span::after{top:5px;}
    .sidebar{
      position:fixed;top:0;left:0;height:100vh;width:260px;max-width:82vw;
      transform:translateX(-100%);transition:transform .22s ease;z-index:101;
      flex-direction:column;align-items:stretch;padding:22px 0;overflow-x:hidden;
    }
    .app-shell.sidebar-open .sidebar{transform:translateX(0);}
    .sidebar-backdrop{
      display:block;position:fixed;inset:0;background:rgba(0,0,0,0);pointer-events:none;
      transition:background .22s ease;z-index:100;
    }
    .app-shell.sidebar-open .sidebar-backdrop{background:rgba(0,0,0,0.45);pointer-events:auto;}
    .main-area{width:100%;}
  }
  @media (max-width:720px){
    .topbar{padding:14px 16px;}
    main{padding:16px 16px 40px;}
  }
  @media (max-width:480px){
    .view-title{font-size:21px;}
    .tabgroup button{padding:7px 11px;font-size:11.5px;}
  }

  /* ------------------------------------------------------------------
     Единые элементы форм. До этого чекбоксы верстались по месту: где-то
     align-items:center, где-то flex-start с ручным margin-top — из-за
     чего квадратик «плавал» относительно подписи от страницы к странице.
     Теперь один класс на весь портал.
     ------------------------------------------------------------------ */
  .check{
    display:grid;grid-template-columns:16px 1fr;gap:9px;align-items:start;
    font-size:13px;line-height:1.4;margin-bottom:9px;cursor:pointer;
  }
  /* Квадрат 16px в строке 13px/1.4 стоит выше, чем читается подпись:
     глаз равняется по букве, а не по строчному боксу. Сдвигаем на 2px
     вниз — тогда чекбокс и текст стоят на одной оптической линии, и у
     подписи в две строки квадрат по-прежнему у первой строки. */
  .check > input[type=checkbox], .check > input[type=radio]{
    width:16px;height:16px;margin:2px 0 0;flex:none;accent-color:var(--c-yandex-direct);
  }
  .check .c-desc{font-size:11.5px;color:var(--text-faint);line-height:1.45;margin-top:2px;}
  .check-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:4px;}
  .check-row .check{margin-bottom:0;}

  /* Пара полей в строку, которая на узком экране становится столбиком. */
  .form-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

  /* ------------------------------------------------------------------
     Планшет и телефон. Правила собраны в одном месте, а не разбросаны по
     страницам: раньше каждая страница решала это сама (или не решала), и
     на узком экране сетки с фиксированными колонками вылезали за край.
     ------------------------------------------------------------------ */
  @media (max-width:720px){
    /* Вкладок на странице бывает четыре и больше — на телефоне они не
       помещаются в строку, поэтому прокручиваются вбок, а не переносятся
       рваными рядами. */
    .tabgroup{
      overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;
      -webkit-overflow-scrolling:touch;padding-bottom:2px;
    }
    .tabgroup::-webkit-scrollbar{display:none;}
    .tabgroup button{white-space:nowrap;flex:none;}

    .form-2col{grid-template-columns:1fr;}

    /* Строки «дата — описание — сумма»: на телефоне сумма уезжает под
       текст, а не сжимает его до одной буквы в строке. */
    .op-row, .ycl-row, .exp-row, .doc-row, .rule, .prog-row, .ack-row{
      grid-template-columns:1fr !important;
      display:grid !important;
      gap:4px !important;
      text-align:left;
    }
    .op-row .amt, .exp-amt, .rule-val{text-align:left;}

    /* Строки вида «подпись — значение» (кто ознакомился, редакции форм,
       подрядчики, направления, правила мотивации). На узком экране они
       переносят значение на вторую строку, а не сжимают подпись до
       одной буквы в строке. */
    .ver-row, .prog-row, .tpl-row, .dir-row, .ctr, .ack-row, .line, .sc-row,
    .platform-card .ph, .platform-card .balance-row{
      flex-wrap:wrap;align-items:flex-start;
    }
    /* Заголовок секции с кнопкой справа — кнопка уходит под заголовок. */
    .sec-title{flex-wrap:wrap;}

    /* Шапка страницы: заголовок и кнопки в столбик, кнопки во всю ширину
       — на телефоне их нажимают большим пальцем. */
    .topbar{flex-wrap:wrap;gap:10px;}
    .controls{width:100%;justify-content:flex-start;flex-wrap:wrap;}
    .btn-row{flex-wrap:wrap;}
    .btn-row .btn{flex:1 1 auto;justify-content:center;text-align:center;}
  }

  @media (max-width:480px){
    .modal{padding:18px 16px;}
    .kpi-row, .plan-row, .home-grid, .sum-grid, .strat-grid{grid-template-columns:1fr !important;}

    /* Кнопка «Показать» и поле даты в шапке раздела: на узком экране
       поле растягивается, кнопка встаёт под ним во всю ширину — иначе
       они делят строку пополам и подпись кнопки переносится. */
    .btn{padding:8px 14px;}
  }

  /* Таблицы в прокручиваемых обёртках не должны сжиматься до нечитаемого:
     лучше горизонтальная прокрутка, чем колонка шириной в один символ.
     Липкая первая колонка при этом остаётся на месте. */
  .data-table table, .ledger table,
  .t-wrap table, .table-wrap table{min-width:560px;}
  @media (min-width:900px){
    .data-table table, .ledger table,
    .t-wrap table, .table-wrap table{min-width:0;}
  }

  .data-table{overflow-x:auto;overflow-y:hidden;}

  /* =====================================================================
     Оформление портала: белый лист, чёрный текст, серые рамки, зелёный
     акцент. Блок идёт последним намеренно — он задаёт общий вид кнопок,
     полей и карточек поверх частных правил выше, чтобы стиль не пришлось
     править в каждом разделе отдельно.
     ===================================================================== */

  /* Кнопки. Три роли, и только три: зелёная — главное действие («Сохранить»,
     «Поставить»), серая — отказ («Отмена»), остальные — второстепенные. */
  .btn{
    font-family:'Inter',sans-serif;font-weight:600;font-size:13px;
    padding:9px 16px;border-radius:var(--radius-sm);border:1px solid transparent;
    background:var(--surface-raised);color:var(--text);
    box-shadow:var(--shadow-sm);transition:background .15s ease,border-color .15s ease;
  }
  .btn:hover{filter:none;background:#E9EBEE;}
  .btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
  .btn.primary:hover{background:var(--accent-dark);}
  .btn.ghost{background:#E5E7EB;color:var(--text);}
  .btn.ghost:hover{background:#D8DBE0;}
  .btn.danger{background:var(--negative);color:#fff;border-color:var(--negative);}
  .btn.danger:hover{background:#8E1C13;}
  .btn.green{background:var(--soft-green-bg);color:var(--soft-green-text);}
  .btn.green:hover{background:#D8F2E3;}
  .btn.negative{background:var(--soft-red-bg);color:var(--soft-red-text);}
  .btn.negative:hover{background:#FADFDB;}
  .btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;}
  .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

  /* Поля ввода: рамка #D1D5DB, зелёная подсветка в фокусе. */
  input[type=text], input[type=date], input[type=number], input[type=tel],
  input[type=email], input[type=search], input[type=time], select, textarea,
  .modal input, .modal select, .form-row input, .form-row textarea, .form-row select{
    border:1px solid var(--border);border-radius:var(--radius-sm);
    font-family:'Inter',sans-serif;font-size:13.5px;color:var(--text);background:#fff;
    padding:10px 12px;
  }
  input:focus, select:focus, textarea:focus{
    outline:none;border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(22,198,83,.16);
  }
  input::placeholder, textarea::placeholder{color:#9CA3AF;}
  .form-row label{color:var(--text);font-size:12.5px;font-weight:600;letter-spacing:0;}

  /* Карточки: рамка плюс мягкая тень — на белом листе одной рамки мало,
     блоки сливаются с фоном. */
  .panel, .info-card, .totals .card, .tile, .data-table, .ledger,
  .empty-state, .platform-card, .score-card, .login-card{
    box-shadow:var(--shadow-sm);
  }
  .panel, .info-card, .login-card{border-radius:var(--radius-lg);}
  .modal{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border-color:var(--border-soft);padding:26px;}
  /* Окно для чтения: статья с фото в 400 px не читается. */
  .modal.wide{width:760px;padding:30px 32px;}
  .modal.wide .modal-body{font-size:15px;color:var(--text);}
  @media (max-width:640px){ .modal.wide{padding:18px 16px;} }
  .modal h3{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--text);}
  .modal .modal-body{font-size:13.5px;color:var(--text-dim);}
  .modal-actions{gap:10px;margin-top:18px;}
  .modal-actions .btn{padding:11px 22px;font-size:14px;}
  .modal-backdrop{background:rgba(17,17,17,.42);}

  /* Таблицы: разделители светлее рамок карточек, иначе сетка рябит. */
  .data-table thead th, .ledger thead th{color:var(--text-faint);background:var(--surface-raised);}
  .data-table tbody td, .ledger tbody td{border-bottom:1px solid var(--border-soft);}
  .tabgroup{border-color:var(--border-soft);box-shadow:var(--shadow-sm);}

  /* Флажки и переключатели идут последними: правила полей ввода выше
     задают им padding и рамку, а флажок должен остаться квадратом 16×16. */
  input[type=checkbox], input[type=radio],
  .modal input[type=checkbox], .modal input[type=radio],
  .form-row input[type=checkbox], .form-row input[type=radio]{
    width:16px;height:16px;min-width:16px;padding:0;margin:0;flex:none;
    border-radius:4px;accent-color:var(--c-yandex-direct);box-shadow:none;
  }

  /* ---- Формы заявок и списков внутри модальных окон -------------------
     Общее для закупок и технических заявок: мелкие карточки со списком
     (позиции, вложения), счётчики символов и подписи ошибок под полем. */
  .req-star{color:var(--prio-high);}
  .err{font-size:12.5px;color:var(--prio-high);margin-top:5px;min-height:0;}
  .err:empty{display:none;}
  input.bad, select.bad, textarea.bad{border-color:var(--prio-high);}
  .cnt{font-size:12px;color:var(--text-faint);text-align:right;margin-top:4px;}
  .sec-head{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    font-size:15px;font-weight:700;margin:18px 0 8px;letter-spacing:-.01em;
  }
  .link-btn{
    background:none;border:none;box-shadow:none;padding:0;cursor:pointer;
    font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:var(--accent-dark);
  }
  .link-btn:hover{background:none;text-decoration:underline;}
  .link-btn.danger{color:var(--prio-high);font-weight:500;font-size:13px;}
  .mini-card{background:var(--surface-raised);border-radius:12px;padding:4px 12px;}
  .mini-card.empty{padding:16px 14px;text-align:center;}
  .mini-row{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 0;border-bottom:1px solid var(--border-soft);
  }
  .mini-row:last-child{border-bottom:none;}
  .mini-name{font-size:14px;font-weight:500;line-height:1.35;word-break:break-word;}
  .mini-name.bought{text-decoration:line-through;color:var(--text-faint);}
  .mini-name.link{color:var(--accent-dark);text-decoration:none;}
  .mini-name.link:hover{text-decoration:underline;}
  .mini-sub{font-size:13px;color:var(--text-faint);margin-top:2px;}
  .mini-acts{display:flex;gap:12px;flex:none;}
  .mini-card.empty .mini-sub{margin-top:4px;}

  /* ---- Перетаскивание карточек по календарю ---------------------------
     Копия карточки едет за курсором или пальцем; она не должна ловить
     события мыши, иначе поиск дня под курсором всегда упирался бы в неё. */
  .dnd-ghost{
    /* Выше полноэкранного редактора (600): модули программы курса
       перетаскиваются внутри него. */
    position:fixed;z-index:615;pointer-events:none;margin:0;
    box-shadow:0 12px 28px rgba(17,17,17,.22);
    transform:scale(1.04) rotate(-1deg);opacity:.95;
  }
  /* Ctrl/Cmd во время переноса — копирование вместо переноса: зелёная
     пунктирная рамка и подпись прямо на плашке, чтобы это было видно
     раньше, чем отпустили кнопку. */
  .dnd-ghost.dnd-ghost-copy{
    outline:2px dashed var(--ch-green);outline-offset:2px;
    box-shadow:0 12px 28px rgba(45,164,78,.32);
  }
  .dnd-ghost.dnd-ghost-copy::after{
    content:'+ копия';position:absolute;top:-20px;left:0;
    font-size:10px;font-weight:700;color:#fff;background:var(--ch-green);
    padding:2px 7px;border-radius:5px;white-space:nowrap;
  }
  body.dnd-active:has(.dnd-ghost-copy) *{cursor:copy !important;}
  .dnd-source{opacity:.35;}
  /* Пока тащим — ни выделения текста, ни прокрутки страницы жестом. */
  body.dnd-active{user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:contain;}
  body.dnd-active *{cursor:grabbing !important;}
  .dnd-over{
    border-color:var(--accent) !important;background:var(--accent-soft) !important;
    box-shadow:inset 0 0 0 1px var(--accent);
  }
  /* Палец: карточку берут удержанием, поэтому собственный жест прокрутки
     у неё отключать нельзя — только продольный. */
  [data-dnd-item]{touch-action:pan-y;}
  @media (prefers-reduced-motion:reduce){ .dnd-ghost{transform:none;} }

  /* Сплошной текст читать во всю ширину монитора невозможно: глаз теряет
     строку. Раскладки занимают всё окно, а пояснения и подписи — не шире
     примерно 100 знаков. */
  .legend, .block-note, .empty-state .empty-sub, .view-sub{max-width:96ch;}

  /* Выбор раздела при переносе карточки — та же сетка «кружок + подпись»,
     что у ролей и чекбоксов. */
  .role-pick{display:flex;flex-direction:column;gap:2px;margin-top:4px;}
  .role-pick label{
    display:grid;grid-template-columns:16px 1fr;gap:9px;align-items:start;
    font-size:13.5px;line-height:1.4;cursor:pointer;padding:7px 9px;border-radius:10px;
    border:1px solid transparent;
  }
  .role-pick label.on{border-color:var(--accent);background:var(--accent-soft);}
  .role-pick label > input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--accent);}
  .role-pick .rd{font-size:12.5px;color:var(--text-faint);margin-top:2px;}

  /* Меню действий у карточки. Одно на портал — см. Portal.openMenu. */
  .pm-menu{
    position:fixed;z-index:400;background:#fff;border:1px solid var(--border-soft);
    border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;min-width:210px;
  }
  .pm-menu button, .pm-menu a{
    display:block;width:100%;text-align:left;background:none;border:none;box-shadow:none;
    padding:10px 12px;border-radius:9px;font-family:'Inter',sans-serif;font-size:14px;
    color:var(--text);cursor:pointer;text-decoration:none;
  }
  .pm-menu button:hover, .pm-menu a:hover{background:var(--surface-raised);}
  .pm-menu .danger{color:var(--prio-high);}
  .pm-menu hr{border:none;border-top:1px solid var(--border-soft);margin:5px 8px;}
  .dots-btn{
    background:none;border:none;box-shadow:none;color:var(--text-faint);font-size:18px;
    line-height:1;padding:5px 8px;border-radius:8px;cursor:pointer;letter-spacing:1px;flex:none;
  }
  .dots-btn:hover{background:var(--surface-raised);color:var(--text);}

  /* ---- Редактор содержимого «как в блоге» ------------------------------
     Перенесён из админки сайта: полноэкранная накладка, читаемая колонка
     и плавающая панель форматирования снизу. Текст пишут длинный, и
     боковое меню с шапкой здесь только мешают. */
  .ed{position:fixed;inset:0;z-index:600;background:var(--bg);display:flex;flex-direction:column;}
  .ed[hidden]{display:none;}
  .ed-bar{
    display:flex;align-items:center;gap:14px;padding:12px 20px;
    border-bottom:1px solid var(--border-soft);background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  }
  .ed-back{
    background:none;border:none;box-shadow:none;font-size:20px;line-height:1;cursor:pointer;
    color:var(--text-dim);padding:4px 8px;border-radius:9px;flex:none;
  }
  .ed-back:hover{background:var(--surface-raised);color:var(--text);}
  .ed-head{min-width:0;}
  .ed-t{font-size:15px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ed-s{font-size:12.5px;color:var(--text-faint);}
  .ed-status{margin-left:auto;font-size:12.5px;color:var(--text-faint);white-space:nowrap;}
  .ed-scroll{flex:1;overflow-y:auto;padding:32px 0 140px;}
  .ed-inner{max-width:760px;margin:0 auto;padding:0 20px;}

  /* Сам текст. Кегль крупнее обычного интерфейсного: это чтение, а не
     таблица, и набирают такое с телефона в том числе. */
  .ed-body{
    font-size:16.5px;line-height:1.7;color:var(--text);outline:none;min-height:50vh;
  }
  .ed-body:empty::before{content:'Начните писать…';color:var(--placeholder);}
  .ed-body p{margin:0 0 14px;}
  .ed-body h2{font-size:23px;font-weight:700;margin:28px 0 10px;line-height:1.25;}
  .ed-body h3{font-size:19px;font-weight:700;margin:22px 0 8px;line-height:1.3;}
  .ed-body ul, .ed-body ol{margin:0 0 14px;padding-left:24px;}
  .ed-body li{margin-bottom:6px;}
  .ed-body blockquote{
    border-left:3px solid var(--accent);padding:2px 0 2px 16px;margin:18px 0;color:var(--text-dim);
  }
  .ed-body figure{margin:22px 0;}
  .ed-body figure img{width:100%;border-radius:12px;display:block;}
  .ed-body figcaption{
    font-size:13px;color:var(--text-faint);margin-top:7px;text-align:center;outline:none;
  }
  .ed-body figcaption:empty::before{content:'Подпись к фото (необязательно)';color:var(--placeholder);}

  /* Размер фото в тексте — класс (или ручная ширина в style) на <figure>.
     Положение всегда одно — по центру, текста слева/справа не бывает.
     Одни и те же классы работают и в редакторе (.ed-body), и в окне
     чтения (.content-body). */
  /* max-width:100% — обязательно: ручная ширина в пикселях (перетаскивание
     за уголок в редакторе, до 2000px) иначе не ужималась бы на узком
     экране и вызывала горизонтальную прокрутку всей страницы. */
  .ed-body figure, .content-body figure{margin-left:auto;margin-right:auto;max-width:100%;}
  .ed-body .ed-img-s, .content-body .ed-img-s{width:220px;max-width:100%;}
  .ed-body .ed-img-m, .content-body .ed-img-m{width:420px;max-width:100%;}
  .ed-body .ed-img-l, .content-body .ed-img-l{width:100%;}

  /* Рамка вокруг фото в редакторе — держит точку для растягивания
     мышью (editor.js: слушатель mousedown на .ed-img-handle). В окне
     чтения (.content-body) этой обёртки вообще нет — только в редакторе. */
  .ed-body .ed-img-frame{position:relative;display:block;}
  /* Пока тянут за ⠿, сама фигура остаётся на своём месте, но невидима —
     текст вокруг неё не переезжает; видно только призрак под курсором
     и линию, куда фигура встанет по отпусканию (editor.js). */
  .ed-body figure.ed-img-dragging{opacity:0;}
  .ed-body .ed-img-handle{
    position:absolute;right:6px;bottom:6px;width:22px;height:22px;border-radius:50%;
    background:var(--accent);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);
    cursor:nwse-resize;touch-action:none;
    z-index:2; /* полоска ниже (см. .ed-img-bar) — иначе она (во всю
      ширину, тот же нижний угол) перехватывала клик по точке первой. */
  }
  /* На тач-экране «наведения» не бывает — точка и полоска были бы
     невидимы всегда. (hover: hover) верно только там, где есть мышь:
     для неё — прячем и показываем по наведению, для пальца — видно
     сразу, показывать по наведению там нечему. */
  @media (hover: hover){
    .ed-body .ed-img-handle{opacity:0;transition:opacity .12s;}
    .ed-body .ed-img-frame:hover .ed-img-handle{opacity:1;}
  }

  /* Призрак, который тащат мышью, и линия-индикатор места вставки.
     Висит прямо в <body>, вне .ed-body/.content-body — а правила
     «сжимать картинку по ширине фигуры» привязаны именно к этим classам.
     Без явного width:100% тут картинка показывалась бы в свой родной
     пиксельный размер (то самое «фото раздувается»), а не в размер
     призрака. */
  .ed-img-ghost{
    position:fixed;top:0;left:0;z-index:900;pointer-events:none;opacity:.75;
    box-shadow:0 8px 24px rgba(0,0,0,.35);border-radius:8px;overflow:hidden;
  }
  .ed-img-ghost img{width:100%;display:block;}
  .ed-img-ghost .ed-img-bar, .ed-img-ghost .ed-img-handle{display:none;}
  .ed-img-dropline{height:3px;border-radius:2px;background:var(--accent);margin:8px 0;}

  /* Полоска управления — оверлеем в левом верхнем углу самой картинки
     (внутри .ed-img-frame), не отдельным блоком под ней: фото не
     «растёт» от наведения курсора. На мыши видна только по наведению
     (см. @media (hover: hover) ниже), на тач-экране — всегда. */
  .ed-img-bar{
    position:absolute;left:6px;top:6px;z-index:1;display:flex;align-items:center;gap:2px;
    padding:4px;background:rgba(0,0,0,.55);border-radius:8px;pointer-events:auto;
  }
  @media (hover: hover){
    .ed-img-bar{opacity:0;pointer-events:none;transition:opacity .12s;}
    .ed-body .ed-img-frame:hover .ed-img-bar{opacity:1;pointer-events:auto;}
  }
  .ed-img-bar button{background:rgba(255,255,255,.12);border:none;box-shadow:none;padding:5px 9px;
    font-size:12px;border-radius:6px;cursor:pointer;color:#fff;white-space:nowrap;}
  .ed-img-bar button:hover{background:rgba(255,255,255,.24);}
  .ed-img-bar button.active{background:var(--accent);}
  .ed-img-grab{padding:5px 8px;cursor:grab;color:#fff;user-select:none;touch-action:none;}
  .ed-img-grab:active{cursor:grabbing;}

  .ed-toolbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:610;}
  .ed-toolbar-inner{
    display:flex;gap:2px;background:#fff;border:1px solid var(--border-soft);
    border-radius:14px;padding:6px;box-shadow:var(--shadow-lg);
  }
  .ed-toolbar button{
    width:38px;height:38px;border-radius:9px;border:none;background:none;box-shadow:none;
    color:var(--text);cursor:pointer;font-size:14px;display:grid;place-items:center;
  }
  .ed-toolbar button:hover{background:var(--surface-raised);}
  .ed-toolbar .sep{width:1px;background:var(--border-soft);margin:6px 3px;}
  @media (max-width:560px){
    .ed-toolbar-inner{flex-wrap:wrap;max-width:calc(100vw - 24px);justify-content:center;}
  }

  /* Тот же текст при чтении — общий вид для инструкций и уроков. */
  .content-body{font-size:15px;line-height:1.7;color:var(--text);}
  .content-body p{margin:0 0 12px;}
  .content-body h2{font-size:19px;font-weight:700;margin:24px 0 9px;}
  .content-body h3{font-size:16.5px;font-weight:700;margin:20px 0 7px;}
  .content-body ul, .content-body ol{margin:0 0 12px;padding-left:22px;}
  .content-body li{margin-bottom:5px;}
  .content-body blockquote{border-left:3px solid var(--accent);padding-left:14px;margin:16px 0;color:var(--text-dim);}
  .content-body figure{margin-top:18px;margin-bottom:18px;}
  .content-body figure img{width:100%;border-radius:12px;display:block;}
  .content-body figcaption{font-size:12.5px;color:var(--text-faint);margin-top:6px;text-align:center;}

  /* ---- Список статей -------------------------------------------------
     Тот же вид, что у блога на colibri-beauty.ru: обложка, дата,
     заголовок, первые строки и «Читать». Мастер выбирает инструкцию
     глазами — по фото оборудования, а не по названию в строке списка.
     Живёт в общем файле: обучение читается так же. */
  .post-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
  @media (max-width:1560px){ .post-grid{grid-template-columns:repeat(5,1fr);} }
  @media (max-width:1320px){ .post-grid{grid-template-columns:repeat(4,1fr);} }
  @media (max-width:1060px){ .post-grid{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:800px){  .post-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){  .post-grid{grid-template-columns:1fr;} }
  /* Сложенная плитка: показываем ряд, остальное — под «Показать ещё».
     Класс ставит страница, посчитав число столбцов. */
  .post-card.folded{display:none;}
  .post-more{margin-top:12px;}

  .post-card{
    background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);
    overflow:hidden;display:flex;flex-direction:column;cursor:pointer;box-shadow:var(--shadow-sm);
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .post-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow-md);}
  .post-card.archived{opacity:.62;}

  .post-card__media{
    position:relative;aspect-ratio:16/9;background:var(--surface-raised);overflow:hidden;flex:none;
  }
  .post-card__media img{width:100%;height:100%;object-fit:cover;display:block;}
  /* Без фото: не серый прямоугольник, а монограмма — так плитка остаётся
     ровной, а карточка не выглядит недоделанной. */
  .post-card__media.none{
    display:grid;place-items:center;
    background:linear-gradient(135deg, var(--accent-soft), var(--surface-raised));
  }
  .post-card__media.none span{
    font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--accent-dark);opacity:.45;
  }
  .post-card__tools{position:absolute;top:8px;right:8px;display:flex;gap:4px;}
  .post-card__tools .dots-btn, .post-card__tools .grab{
    background:rgba(255,255,255,.93);border:1px solid var(--border-soft);border-radius:8px;
    box-shadow:var(--shadow-sm);color:var(--text-dim);
    width:26px;height:26px;display:grid;place-items:center;font-size:12px;line-height:1;padding:0;
  }
  .post-card__tools .dots-btn:hover{background:#fff;color:var(--text);}

  .post-card__body{padding:11px 13px 13px;display:flex;flex-direction:column;flex:1;}
  .post-card__date{
    font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
    color:var(--text-faint);margin-bottom:6px;
  }
  /* Заголовок и аннотация обрезаются по строкам: в узкой карточке важнее
     ровный ряд, чем полный текст — он открывается в один клик. */
  .post-card__body h3{
    font-family:'Inter',sans-serif;font-size:13.5px;font-weight:700;line-height:1.32;
    letter-spacing:-.01em;color:var(--text);margin:0 0 5px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .post-card__excerpt{
    font-size:11.5px;line-height:1.5;color:var(--text-dim);margin:0 0 9px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .post-card__foot{
    margin-top:auto;display:flex;align-items:baseline;gap:7px;min-width:0;
    font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  }
  .post-card__link{color:var(--accent-dark);flex:none;}
  .post-card__foot .muted{
    letter-spacing:.02em;font-weight:500;color:var(--text-faint);text-transform:none;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  }
  /* Одна в ряд — места хватает, возвращаем читаемый кегль. */
  @media (max-width:560px){
    .post-card__body{padding:14px 16px 16px;}
    .post-card__body h3{font-size:15.5px;}
    .post-card__excerpt{font-size:13px;-webkit-line-clamp:3;}
  }

  /* ---- Форма-конструктор в редакторе ---------------------------------
     Карточка курса: поля, бонусы и программа модулями. Устроена так же,
     как в админке сайта colibri-beauty.ru, откуда раздел и перенесён. */
  .ed-form{padding-bottom:40px;}
  .ed-ftitle{
    width:100%;border:none;outline:none;background:none;padding:0;margin:0;
    font-family:'Inter',sans-serif;font-size:27px;font-weight:800;letter-spacing:-.02em;color:var(--text);
  }
  .ed-ftitle::placeholder{color:var(--placeholder);}
  .ed-field{margin-top:26px;}
  .ed-label{
    font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--text-faint);margin-bottom:7px;
  }
  .ed-hint{font-size:12.5px;color:var(--text-faint);line-height:1.5;margin-top:5px;}
  .ed-input{
    width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;
    font-family:'Inter',sans-serif;font-size:14px;color:var(--text);background:var(--surface);
  }
  .ed-input:focus{outline:none;border-color:var(--accent);}
  .ed-rich{
    border:1px solid var(--border-soft);border-radius:12px;padding:12px 14px;
    background:var(--surface);font-size:15px;min-height:96px;
  }
  .ed-rich:focus{border-color:var(--accent);}
  .ed-photo{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;}
  .ed-photo img{width:210px;border-radius:12px;display:block;border:1px solid var(--border-soft);}
  .ed-photo-btns{display:flex;gap:8px;flex-wrap:wrap;}
  .ed-add{margin-top:10px;}
  .ed-list-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
  .ed-x{
    background:none;border:none;box-shadow:none;color:var(--text-faint);cursor:pointer;
    font-size:14px;line-height:1;padding:7px 9px;border-radius:8px;flex:none;
  }
  .ed-x:hover{background:var(--surface-raised);color:var(--prio-high);}
  .ed-mod{
    border:1px solid var(--border-soft);border-radius:14px;padding:14px;margin-bottom:12px;
    background:var(--surface);box-shadow:var(--shadow-sm);
  }
  .ed-mod .ed-input{margin-bottom:8px;}
  .ed-mod-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
  .ed-mod-grab{cursor:grab;color:var(--text-faint);user-select:none;font-size:15px;line-height:1;}
  .ed-mod-num{
    font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);
  }
  .ed-mod-top .ed-x{margin-left:auto;}
  .ed-mod-body{min-height:74px;font-size:14.5px;}

  /* ---- Документ страницами ------------------------------------------
     Word и Excel показываются так же, как в почте: сервер раскладывает
     документ по страницам (LibreOffice), портал выводит их подряд.
     Формат при этом сохраняется целиком — шрифты, колонки, штампы. */
  .doc-pages{display:flex;flex-direction:column;gap:14px;align-items:center;}
  .doc-pages img{
    width:100%;max-width:840px;display:block;border:1px solid var(--border-soft);
    border-radius:8px;box-shadow:var(--shadow-sm);background:#fff;
  }
  .doc-pages-note{font-size:12px;color:var(--text-faint);padding:4px 0 2px;}

  /* ---- Строка заявки (закупки, техпроблемы) ---------------------------
     В строке видно всё, ради чего раньше приходилось открывать карточку:
     что просят, кто, когда, позиции и ссылка на товар. На телефоне
     строка становится плашкой — колонки в ряд там не читаются. */
  .rq-list{display:flex;flex-direction:column;gap:8px;}
  .rq{
    background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);
    box-shadow:var(--shadow-sm);cursor:pointer;display:grid;
    grid-template-columns:92px minmax(0,2.3fr) minmax(0,1.1fr) minmax(0,.9fr) 96px;
    gap:14px;align-items:start;padding:13px 15px;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .rq:hover{border-color:var(--accent);box-shadow:var(--shadow-md);}
  .rq.urgent{border-left:3px solid var(--prio-high);}
  .rq-when{font-size:12.5px;color:var(--text-dim);font-variant-numeric:tabular-nums;}
  .rq-when b{display:block;font-size:13px;font-weight:600;color:var(--text);}
  .rq-due{font-size:11.5px;color:var(--prio-high);margin-top:4px;}
  .rq-t{font-weight:600;font-size:14.5px;line-height:1.35;}
  .rq-fire{
    font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--soft-red-text);background:var(--soft-red-bg);
    padding:3px 8px;border-radius:20px;margin-right:8px;vertical-align:1px;
  }
  .rq-sub{
    font-size:12.5px;color:var(--text-dim);line-height:1.5;margin-top:4px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .rq-items{margin:6px 0 0;padding-left:17px;font-size:12.5px;color:var(--text-dim);line-height:1.5;}
  .rq-items li{margin-bottom:2px;}
  .rq-items li.bought{text-decoration:line-through;color:var(--text-faint);}
  .rq-who{font-size:13px;line-height:1.4;}
  .rq-meta{font-size:11.5px;color:var(--text-faint);margin-top:4px;display:flex;flex-wrap:wrap;gap:4px 10px;}
  .rq-links{display:flex;flex-wrap:wrap;gap:6px;}
  .rq-link{
    display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
    text-decoration:none;background:var(--accent-soft);color:var(--accent-dark);
    border-radius:8px;padding:4px 10px;white-space:nowrap;
  }
  .rq-link:hover{background:var(--accent);color:#fff;}
  .rq-st{display:flex;justify-content:flex-end;}
  .rq-lab{display:none;}


  /* ---- Массовый выбор заявок ------------------------------------------
     Столбец с галочкой появляется только там, где массовые действия
     разрешены (.pickable): в закупках у управляющего. */
  .rq-list.pickable .rq{
    grid-template-columns:26px 92px minmax(0,2.3fr) minmax(0,1.1fr) minmax(0,.9fr) 96px;
  }
  .rq-pick{display:flex;align-items:center;justify-content:center;padding-top:2px;cursor:default;}
  .rq-pick input{width:17px;height:17px;margin:0;cursor:pointer;}
  .rq.picked{border-color:var(--accent);background:var(--accent-soft);}
  .rq-pickbar{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:0 4px 9px;font-size:13px;
  }
  .rq-pickn{font-size:12px;color:var(--text-faint);font-variant-numeric:tabular-nums;}
  /* Полоса действий липнет к низу окна: список длинный, и уезжать за
     кнопкой вниз после выбора шести заявок — лишняя работа. */
  .rq-bulkbar{
    position:sticky;bottom:12px;margin-top:12px;z-index:5;
    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:var(--shadow-md);padding:11px 14px;
  }
  .rq-bulkn{font-size:13px;color:var(--text-dim);}
  .rq-bulkn b{font-size:15px;color:var(--text);}

  @media (max-width:900px){
    .rq-list.pickable .rq{grid-template-columns:1fr;}
    .rq-pick{order:0;justify-content:flex-start;}
    .rq-bulkbar{flex-direction:column;align-items:stretch;}
    .rq-bulkbar .btn-row{justify-content:stretch;}
    .rq-bulkbar .btn{flex:1;}
  }

  @media (max-width:900px){
    /* Плашка: сначала статус, потом суть, потом кто и когда. */
    .rq{grid-template-columns:1fr;gap:10px;padding:14px 15px;}
    .rq-lab{
      display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
      color:var(--text-faint);margin-bottom:4px;
    }
    .rq-st{justify-content:flex-start;order:1;}
    .rq-c-main{order:2;}
    .rq-c-who{order:3;}
    .rq-c-when{order:4;}
    .rq-c-links{order:5;}
    .rq-c-who, .rq-c-when, .rq-c-links{border-top:1px solid var(--border-soft);padding-top:10px;}
    .rq-when b{display:inline;}
  }

/* Редактор операций технологической карты (techcard-editor.js). Живёт
   здесь, а не в странице, потому что редактор один на две страницы —
   список карт и карточку услуги. */
.ed-step{
  background:var(--surface-raised);border-radius:12px;padding:12px;margin-bottom:10px;
  display:grid;grid-template-columns:22px 26px 1fr 92px auto;gap:8px;align-items:center;
}
.ed-step .full{grid-column:1 / -1;}
.ed-step input, .ed-step textarea{width:100%;}
.ed-step .rm{
  background:none;border:none;box-shadow:none;color:var(--prio-high);cursor:pointer;
  font-size:17px;padding:8px 6px;line-height:1;
}
/* Ручка перетаскивания: порядок операций — это и есть содержание карты,
   поэтому шаги двигаются мышью и пальцем, а не переписыванием текста. */
.ed-step .ed-grab{cursor:grab;color:var(--text-faint);font-size:15px;line-height:1;user-select:none;text-align:center;}
.ed-step .ed-num{
  width:26px;height:26px;border-radius:50%;background:var(--surface);border:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--text-dim);
}
.ed-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 8px;}
.ed-head .norm{font-size:13px;color:var(--text-dim);font-weight:600;}