/* ============================================================================
 * cab.css — стили личного кабинета портала.
 *
 * До 15.09.2026 эти 41 КБ ехали инлайном в layout.html, то есть заново с каждым
 * ответом сервера: переход между разделами — минус ~8 КБ gzip на пустом месте,
 * и ни одного шанса на кеш браузера. Содержимое перенесено как есть, порядок
 * сохранён.
 *
 * ВАЖНО: файл подключается ПОСЛЕ app.css — часть правил рассчитывает на это
 * при равной специфичности (см. комментарии внутри).
 * ==========================================================================*/

[x-cloak] { display: none !important; }

  :root {
    --of-bg: #f7f2ea;
    --of-bg-soft: #fbf7f1;
    --of-paper: rgba(255, 252, 247, 0.88);
    --of-paper-solid: #fffaf3;
    --of-line: rgba(74, 58, 39, 0.14);
    --of-line-strong: rgba(58, 44, 29, 0.24);
    --of-ink: #211c15;
    --of-ink-soft: #5f5649;
    --of-mute: #877b6a;
    --of-accent: var(--coral);
    --of-accent-2: #e85cae;
    --of-success-bg: #eff7ec;
    --of-success-text: #2c6a36;
    --of-danger-bg: #fff0ee;
    --of-danger-line: rgba(204, 83, 60, 0.28);
    --of-danger-text: #a44431;
    --of-warning-bg: #fff4da;
    --of-warning-text: #8b5b00;
    --of-grad: var(--grad);
    --of-shadow: 0 24px 80px rgba(43, 32, 19, 0.08);
    --of-radius-xl: 28px;
    --of-radius-lg: 20px;
    --of-radius-md: 14px;
  }

  html { min-height: 100%; }

  .of-app-shell {
    position: relative;
    min-height: 100vh;
  }

  .of-title {
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--of-ink);
  }

  .of-page-title {
    font-weight: 600;
    font-size: clamp(2rem, 2vw + 1.15rem, 3.45rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
    color: var(--of-ink);
  }

  .of-eyebrow,
  .of-label,
  .of-mono {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--of-mute);
  }

  .of-gradient-text {
    background: var(--of-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .of-card {
    border: 1px solid var(--of-line);
    background: var(--of-paper);
    backdrop-filter: blur(18px);
    box-shadow: var(--of-shadow);
  }

  .of-panel {
    border-radius: var(--of-radius-xl);
    border: 1px solid var(--of-line);
    background:
      radial-gradient(circle at top right, rgba(232, 92, 174, 0.08), transparent 30%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 248, 240, 0.86));
    box-shadow: var(--of-shadow);
    backdrop-filter: blur(18px);
  }

  .of-soft-panel {
    border-radius: var(--of-radius-lg);
    border: 1px solid var(--of-line);
    background: rgba(255, 252, 247, 0.76);
    backdrop-filter: blur(12px);
  }

  .of-table thead {
    background: rgba(127, 108, 80, 0.08);
    color: var(--of-ink-soft);
  }

  .of-table tbody tr {
    border-top: 1px solid rgba(74, 58, 39, 0.08);
  }

  .of-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.45);
  }

  .of-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.8rem;
    padding: 0.72rem 1.15rem;
    border-radius: 999px;
    font-size: 0.925rem;
    font-weight: 600;
    white-space: nowrap;
    transition: 180ms ease;
    transition-property: transform, box-shadow, border-color, background-color, color, opacity;
  }

  .of-btn:hover { transform: translateY(-1px); }
  .of-btn:disabled,
  .of-btn.disabled,
  .of-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
  }

  .of-btn-primary {
    border: 1px solid transparent;
    color: #fff7f3;
    background: var(--of-grad);
    box-shadow: 0 14px 30px rgba(223, 106, 46, 0.22);
  }

  .of-btn-secondary {
    border: 1px solid var(--of-line);
    color: var(--of-ink);
    background: rgba(255, 252, 247, 0.82);
  }

  .of-btn-secondary:hover {
    border-color: var(--of-line-strong);
    background: rgba(255, 255, 255, 0.96);
  }

  .of-btn-danger {
    border: 1px solid var(--of-danger-line);
    color: var(--of-danger-text);
    background: var(--of-danger-bg);
  }

  .of-input,
  .of-select,
  .of-textarea {
    width: 100%;
    border-radius: 18px;
    border: 1px solid rgba(74, 58, 39, 0.14);
    background: rgba(255, 253, 249, 0.92);
    color: var(--of-ink);
    padding: 0.82rem 1rem;
    font-size: 0.95rem;
    outline: none;
    transition: 160ms ease;
    transition-property: border-color, box-shadow, background-color;
  }

  .of-input::placeholder,
  .of-textarea::placeholder { color: #978a78; }

  .of-input:focus,
  .of-select:focus,
  .of-textarea:focus {
    border-color: rgba(223, 106, 46, 0.65);
    box-shadow: 0 0 0 4px rgba(223, 106, 46, 0.12);
    background: #fffdf9;
  }

  .of-checkbox {
    accent-color: var(--of-accent);
  }

  .of-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.34rem 0.7rem;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border: 1px solid var(--of-line);
    color: var(--of-ink-soft);
    background: rgba(255, 255, 255, 0.66);
  }

  .of-badge-live {
    color: #fff8f2;
    border-color: transparent;
    background: var(--of-grad);
  }

  .of-badge-success {
    color: var(--of-success-text);
    border-color: rgba(44, 106, 54, 0.14);
    background: var(--of-success-bg);
  }

  .of-alert-danger,
  .of-alert-warning {
    border-radius: 20px;
    padding: 0.95rem 1rem;
    font-size: 0.95rem;
    border: 1px solid;
  }

  .of-alert-danger {
    background: var(--of-danger-bg);
    border-color: var(--of-danger-line);
    color: var(--of-danger-text);
  }

  .of-alert-warning {
    background: var(--of-warning-bg);
    border-color: rgba(168, 115, 0, 0.16);
    color: var(--of-warning-text);
  }

  .of-divider {
    border-top: 1px solid rgba(74, 58, 39, 0.12);
  }

  .of-sidebar {
    background:
      radial-gradient(circle at top, rgba(232, 92, 174, 0.10), transparent 24%),
      linear-gradient(180deg, rgba(255, 252, 247, 0.94), rgba(248, 241, 232, 0.94));
    border-right: 1px solid var(--of-line);
    backdrop-filter: blur(24px);
  }

  .of-sidebar-title {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.03em;
  }

  .of-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    color: var(--of-ink-soft);
    border: 1px solid transparent;
    transition: 150ms ease;
  }

  .of-nav-link:hover {
    color: var(--of-ink);
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(74, 58, 39, 0.08);
  }

  .of-nav-link-active {
    color: var(--of-ink);
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(74, 58, 39, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  }

  .of-topbar {
    background: rgba(251, 246, 239, 0.74);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--of-line);
  }

  @media (max-width: 1024px) {
    .of-page-title { font-size: clamp(1.9rem, 6vw, 2.9rem); }
  }

  @media (max-width: 640px) {
    .of-page-title {
      font-size: clamp(1.65rem, 9vw, 2.25rem);
      line-height: 1.02;
    }

    .of-btn {
      min-height: 2.45rem;
      padding: 0.62rem 0.82rem;
      font-size: 0.86rem;
    }

    .of-input,
    .of-select,
    .of-textarea {
      border-radius: 14px;
      padding: 0.72rem 0.82rem;
    }

    .of-panel,
    .of-card {
      border-radius: 20px;
    }

    .of-sidebar {
      border-right: 0;
      box-shadow: 0 24px 70px rgba(43, 32, 19, 0.18);
    }
  }

  :root {
    --bg: #fbfaf7;
    --bg-2: #f4f2ec;
    --paper: #ffffff;
    --ink: #14110d;
    --ink-2: #4a463d;
    --mute: #837e72;
    --mute-2: #b2ad9f;
    --hair: #e8e3d6;
    --hair-2: #efeae0;
    --coral: #FF4A56;
    --pulse-1: #FF2D85;
    --pulse-2: #FF4A56;
    --pulse-3: #FF6B35;
    --success: #2c6a36;
    --success-bg: #eff7ec;
    --warning: #8b5b00;
    --warning-bg: #fff4da;
    --danger: #a44431;
    --danger-bg: #fff0ee;
    --danger-line: rgba(204, 83, 60, .28);
    /* обводки бейджей/ячеек для 🟢 и 🟡 — пара к --danger-line, чтобы статусные
       бейджи не держали собственные oklch-цвета мимо токенов (BRANDBOOK §1.3) */
    --success-line: rgba(44, 106, 54, .22);
    --warning-line: rgba(139, 91, 0, .22);
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --grad: linear-gradient(125deg, #FF2D85 0%, #FF4A56 55%, #FF6B35 100%);
    --f-display: "Space Grotesk", "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
    --f-body: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --rule: .5px solid var(--hair);
  }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 14.5px;
    line-height: 1.45;
    letter-spacing: 0;
    font-feature-settings: "ss01", "cv11";
  }

  button { font: inherit; }
  .of-app-shell::before { display: none; }
  .of-title, .of-page-title, .of-sidebar-title { font-family: var(--f-display); }
  .of-eyebrow, .of-label, .of-mono { font-family: var(--f-mono); }

  .h-display {
    font-family: var(--f-display);
    font-weight: 700;
    letter-spacing: -0.038em;
    line-height: .94;
    font-size: clamp(44px, 6.2vw, 112px);
    text-wrap: balance;
  }
  .grad, .of-gradient-text {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .btn, .of-btn, .cab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 46px;
    min-height: 0;
    padding: 0 22px;
    border-radius: 99px;
    border: .5px solid transparent;
    font-family: var(--f-display);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, filter .2s ease, border-color .2s ease;
  }
  .btn:hover, .of-btn:hover, .cab-btn:hover { transform: translateY(-1px); }
  .btn:active, .of-btn:active, .cab-btn:active { transform: scale(0.97); }
  /* .hidden (Tailwind display:none) из app.css проигрывает по каскаду инлайновому
     .btn{display:inline-flex} — из-за этого скрытые кнопки не прятались. Адресный
     override со специфичностью 0,2,0 возвращает скрытие без !important. */
  .btn.hidden, .of-btn.hidden, .cab-btn.hidden { display: none; }
  .btn:disabled, .btn[disabled], .of-btn:disabled, .of-btn[disabled],
  .cab-btn:disabled, .cab-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
  }
  .btn--grad, .of-btn-primary {
    color: #fff;
    background: var(--grad);
    box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 14px 36px -14px oklch(65% 0.28 358 / .65);
  }
  .btn--ghost, .of-btn-secondary {
    color: var(--ink);
    background: var(--paper);
    border-color: var(--hair);
  }
  .btn--ghost:hover, .of-btn-secondary:hover {
    border-color: var(--ink-2);
    background: var(--paper);
  }
  /* Инверсная нейтральная кнопка (напр. «Отменить изменения»): в светлой теме
     тёмная, в тёмной — белая. Фон = основной текст, текст = поверхность. */
  .btn--cancel {
    color: var(--paper);
    background: var(--ink);
    border-color: var(--ink);
  }
  .btn--cancel:hover { background: var(--ink-2); border-color: var(--ink-2); }
  .of-btn-danger {
    color: oklch(50% 0.22 25);
    background: oklch(95% 0.04 25);
    border-color: oklch(50% 0.22 25 / .22);
  }

  .cab-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; }
  .cab-shell::before {
    display: none;
  }
  .cab-side {
    border-right: var(--rule);
    background: var(--bg);
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
  }
  .cab-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0;
    color: var(--ink);
  }
  .cab-brand .b-mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--grad);
    flex: 0 0 auto;
    box-shadow: 0 4px 14px -6px oklch(65% 0.28 358 / .55);
  }
  .cab-brand small {
    margin-left: 4px;
    color: var(--mute);
    font: 400 10.5px/1 var(--f-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .cab-side-section { margin-top: 28px; }
  .cab-link {
    display: grid;
    grid-template-columns: 54px 1fr auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 2px;
    padding: 10px 12px;
    border: .5px solid transparent;
    border-radius: 14px;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 500;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .cab-link-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cab-link:hover { color: var(--ink); background: var(--bg-2); }
  .cab-link .ix {
    width: 54px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font: 500 10px/1 var(--f-mono);
    letter-spacing: .05em;
    color: var(--mute);
  }
  .cab-link .ar { font: 400 11px/1 var(--f-mono); color: var(--mute); opacity: 0; transition: opacity .15s ease, transform .15s ease; }
  .cab-link:hover .ar { opacity: 1; transform: translateX(2px); }
  .cab-link.is-active {
    color: var(--ink);
    background: var(--paper);
    border-color: var(--hair);
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 18px -10px rgba(0,0,0,.08);
  }
  .cab-link.is-active .ix {
    color: #fff;
    background: var(--grad);
    box-shadow: 0 7px 18px -10px oklch(65% 0.28 358 / .65);
  }
  .cab-link.is-active .ar { opacity: 1; color: var(--ink); }
  /* «База знаний» — отдельный нижний блок над футером: читается как
     самостоятельный раздел, а не пункт рядом с калькуляторами. margin-top:auto
     прижимает его к низу; футеру ниже гасим авто-отступ, чтобы он сел вплотную. */
  .cab-side-help {
    margin-top: auto;
    padding-top: 16px;
    border-top: var(--rule);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .cab-side-help + .cab-side-foot { margin-top: 6px; }
  .cab-side-foot {
    margin-top: auto;
    padding-top: 18px;
    border-top: var(--rule);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .cab-user {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: .5px solid var(--hair);
    border-radius: 12px;
    background: var(--paper);
    text-align: left;
    cursor: pointer;
  }
  .cab-user:hover { border-color: var(--ink-2); }
  .cab-user .av {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--grad);
    color: #fff;
    display: grid;
    place-items: center;
    font: 700 13px/1 var(--f-display);
    flex: 0 0 auto;
  }
  .cab-user .id { min-width: 0; }
  .cab-user .nm { font-size: 13.5px; line-height: 1.2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
  .cab-user .em { font: 400 10.5px/1.3 var(--f-mono); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cab-account-menu {
    display: grid;
    gap: 6px;
    padding: 8px;
    border: .5px solid var(--hair);
    border-radius: 14px;
    background: var(--paper);
    box-shadow: 0 16px 36px -28px rgba(0,0,0,.28);
  }
  .cab-account-link,
  .cab-out {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: .5px solid transparent;
    border-radius: 10px;
    color: var(--ink-2);
    background: transparent;
    font: 400 10.5px/1 var(--f-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .cab-account-link:hover,
  .cab-account-link.is-active,
  .cab-out:hover {
    border-color: var(--hair);
    color: var(--ink);
    background: var(--bg);
  }
  .cab-main { min-width: 0; display: flex; flex-direction: column; position: relative; isolation: isolate; }
  .cab-main::before {
    display: none;
  }
  .cab-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 22px clamp(20px, 3vw, 40px) 0;
  }
  .cab-top-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .cab-crumbs { font: 400 11px/1 var(--f-mono); letter-spacing: .06em; color: var(--mute); text-transform: uppercase; }
  .cab-crumbs b { color: var(--ink); font-weight: 500; }
  .cab-crumbs .sep { margin: 0 8px; color: var(--mute-2); }
  .cab-top-meta { display: flex; align-items: center; gap: 14px; font: 400 11px/1 var(--f-mono); letter-spacing: .04em; color: var(--mute); text-transform: uppercase; }
  .cab-top-meta .pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: .5px solid var(--hair); border-radius: 99px; background: var(--paper); color: var(--ink-2); }
  .cab-top-meta .lv { width: 6px; height: 6px; border-radius: 99px; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
  .cab-page { padding: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 40px) 64px; }

  .cab-input, .cab-select, .of-input, .of-select, .of-textarea {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: .5px solid var(--hair);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
    outline: none;
    font: 400 14px/1.45 var(--f-body);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  }
  textarea.of-textarea, textarea.cab-input { height: auto; padding-top: 12px; padding-bottom: 12px; }
  .cab-input::placeholder, .of-input::placeholder, .of-textarea::placeholder { color: var(--mute-2); }
  /* приглушённый контрол: фильтр, неприменимый к текущему разрезу, гасим видимо,
     а не прячем — иначе панель прыгает при переключении вкладок */
  .cab-input:disabled, .cab-select:disabled { opacity: .5; cursor: not-allowed; background: var(--bg-2); }
  .cab-input:focus, .cab-select:focus, .of-input:focus, .of-select:focus, .of-textarea:focus {
    border-color: oklch(65% 0.28 358);
    box-shadow: 0 0 0 4px oklch(65% 0.28 358 / .12);
    background: var(--paper);
  }
  .cab-input--search {
    padding-left: 38px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat;
    background-position: 13px center;
  }
  .cab-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .cab-field label { font: 500 11px/1 var(--f-mono); letter-spacing: .06em; color: var(--mute); text-transform: uppercase; }
  .cab-check, .of-checkbox { accent-color: var(--ink); }
  label.cab-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--ink-2); font-size: 13.5px; text-transform: none; letter-spacing: 0; user-select: none; }

  .cab-filters { display: grid; gap: 14px; border: var(--rule); border-radius: 18px; padding: 18px 22px; background: var(--paper); }
  .cab-filters-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 12px; align-items: end; }
  .cab-filters-actions { display: flex; align-items: center; gap: 10px; padding-top: 8px; border-top: .5px dashed var(--hair-2); }
  .cab-grow { flex: 1 1 auto; }
  /* Базовая кнопка кабинета. До 23.09 её не существовало вовсе: в файле жили
     только модификаторы (--sm, --quiet), и «Сохранить», «Редактировать»,
     «Помочь с планом» рендерились голым текстом — прозрачный фон, нулевая
     рамка. Геометрия приезжает от `.btn` (селектор общий), здесь — поверхность:
     та же, что у `.btn--ghost`, которой в кабинете набраны нейтральные кнопки.
     Своих цветов не вводим, только токены. */
  .cab-btn { color: var(--ink); background: var(--paper); border-color: var(--hair); }
  .cab-btn:hover { border-color: var(--ink-2); background: var(--paper); }
  /* Заблокированную кнопку видно, что она есть: полупрозрачности от `.btn`
     мало, если рамка и фон прозрачны сами по себе. */
  .cab-btn:disabled, .cab-btn[disabled] { background: var(--bg-2); border-color: var(--hair); color: var(--mute); }
  .cab-btn--sm { height: 34px; padding: 0 14px; font-size: 12.5px; }
  .cab-btn--quiet { color: var(--ink-2); background: transparent; border-color: transparent; box-shadow: none; }
  .cab-btn--quiet:hover { background: var(--bg-2); color: var(--ink); border-color: transparent; }
  .cab-btn--quiet:disabled, .cab-btn--quiet[disabled] { background: transparent; border-color: transparent; }

  .cab-tbl-wrap, .of-card, .of-soft-panel, .of-panel {
    border: var(--rule);
    border-radius: 18px;
    background: var(--paper);
    overflow: hidden;
    box-shadow: none;
    backdrop-filter: none;
  }
  .cab-tbl, .of-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
  .cab-tbl thead th, .of-table thead th {
    position: sticky;
    top: 0;
    text-align: left;
    font: 500 10.5px/1.3 var(--f-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mute);
    background: var(--paper);
    border-bottom: var(--rule);
  }
  .cab-tbl tbody td, .of-table tbody td { border-top: .5px solid var(--hair-2); vertical-align: middle; }
  .cab-tbl tbody tr:first-child td, .of-table tbody tr:first-child td { border-top: 0; }
  .cab-tbl tbody tr:hover, .of-table tbody tr:hover { background: var(--bg-2); }
  .cab-tbl .sku { font: 400 12px/1.35 var(--f-mono); color: var(--ink-2); letter-spacing: .02em; }
  .cab-tbl .name { color: var(--ink); font-weight: 500; }
  .cab-tbl .price { font-family: var(--f-display); font-weight: 700; font-size: 16px; color: var(--ink); }
  .cab-tbl .muted { color: var(--mute); }
  .cab-tbl .row-acts { display: inline-flex; gap: 4px; }
  .cab-tbl tbody tr.is-selected { background: oklch(96% 0.04 350); }

  .cab-badge, .of-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    padding: 0 10px;
    border-radius: 99px;
    border: .5px solid var(--hair);
    background: var(--paper);
    color: var(--ink-2);
    font: 500 10.5px/1 var(--f-mono);
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .cab-badge .d { width: 6px; height: 6px; border-radius: 99px; background: var(--mute); }
  .cab-badge--focus { background: oklch(96% 0.04 350); color: oklch(50% 0.22 358); border-color: oklch(65% 0.28 358 / .25); }
  .cab-badge--focus .d { background: oklch(65% 0.28 358); }
  /* 🟢 и 🟡 — те же семантические токены, что у точек KPI-плиток. Раньше здесь
     стояли свои oklch: на одном экране получались два разных зелёных и два
     разных жёлтых (BRANDBOOK §1.3) */
  .cab-badge--ok { background: var(--success-bg); color: var(--success); border-color: var(--success-line); }
  .cab-badge--ok .d { background: var(--success); }
  .cab-badge--warn { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-line); }
  .cab-badge--warn .d { background: var(--warning); }
  /* 🔴 и ⚪ статусов модели v4: --focus не переиспользуем, у него своя семантика
     («фокусный артикул»). Цвета — из семантических токенов, поэтому бейдж
     меняется вместе с темой (HL_PALETTE была захардкожена и на тёмном слепла) */
  .cab-badge--danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
  .cab-badge--danger .d { background: var(--danger); }
  .cab-badge--mute { background: var(--bg-2); color: var(--mute); border-color: var(--hair); }
  .cab-badge--mute .d { background: var(--mute); }

  /* ─── общие блоки гридовых вкладок кабинета ───
     Жили копией внутри native_forecast.html; вкладок с гридами уже три, и
     четвёртая копия запрещена (BRANDBOOK §4.7), поэтому переехали сюда — вместе
     с токенами, которые раньше объявлялись на #fc-root и на странице с другим id
     корня тихо отваливались в тёмной теме.
     ВАЖНО: этот <style> идёт ПОСЛЕ app.css при равной специфичности, поэтому
     utility .hidden сам по себе не гасит display:grid/absolute — гасим адресно. */
  :root { --fc-hl-fill: #ebe9e2; --pf-wb:#CB11AB; --pf-ozon:#005BFF; --pf-ms:#1baf7a; --pf-ym:#FFCC00; }
  /* Палитра статей «Структура расходов» раздела «Управленческая отчётность»
     (--pnl-cat-*, 1:1 с расходными строками каскада). Читаема в обеих темах,
     без coral и цветов площадок — те заняты брендом и --pf-*. */
  :root {
    --pnl-cat-1: #c98a2b; /* Комиссия и эквайринг */
    --pnl-cat-2: #4f9d8f; /* Логистика */
    --pnl-cat-3: #6a7fb0; /* Хранение */
    --pnl-cat-4: #b06a8a; /* Приёмка и штрафы */
    --pnl-cat-5: #8a8f5c; /* Реклама */
    --pnl-cat-6: #9a7bb0; /* Прочие удержания площадки */
    --pnl-cat-7: #7a6a5d; /* Себестоимость */
  }

  /* KPI-полоса: сетка с волосяными разделителями */
  /* ── Канон fc-компонентов (подъём 05.09) ─────────────────────────────
     Жили копиями в native_forecast.html и pnl.html — третий раздел (/daily-market)
     заводил свои дубли под другими именами, и одинаковые элементы разъезжались.
     Единый источник здесь; копии на страницах идентичны и подлежат удалению
     при следующем заходе в каждую (docs/brand/COMPONENTS.md). */
  .fc-card { background: var(--paper); border: var(--rule); border-radius: 18px; }
  .fc-eyebrow { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
  .fc-filter label { display:block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }
  .fc-tab { padding: 9px 18px; border-radius: 12px; border: 1px solid var(--hair); background: var(--paper); cursor: pointer; font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--ink-2); }
  .fc-tab:hover { border-color: var(--mute-2); }
  .fc-tab.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .fc-tab:disabled { opacity: .45; cursor: default; }
  .fc-tab small { font-weight: 400; opacity: .7; font-family: var(--f-mono); font-size: 10.5px; }
  html[data-theme="dark"] .fc-tab.active, body[data-theme="dark"] .fc-tab.active { color: #0e0d0b; }

  .fc-facts { display: grid; background: var(--paper); border: var(--rule); border-radius: 18px; overflow: hidden; }
  .fc-facts.hidden { display: none; }
  .fc-facts > div { padding: 20px 22px 22px; border-right: var(--rule); }
  .fc-facts > div:last-child { border-right: 0; }
  .fc-facts .k { font-family: var(--f-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); margin-bottom: 10px; }
  .fc-facts .v { font-family: var(--f-display); font-size: clamp(26px, 2.4vw, 38px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); }
  .fc-facts .dot { display:inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
  .fc-facts-3 { grid-template-columns: repeat(3, 1fr); }
  .fc-facts-4 { grid-template-columns: repeat(4, 1fr); }
  .fc-facts-5 { grid-template-columns: repeat(5, 1fr); }
  .fc-facts > div[data-kpi] { cursor: pointer; transition: background .12s; }
  .fc-facts > div[data-kpi]:hover { background: var(--bg-2); }
  /* плитка — кнопка (role=button, tabindex=0): фокус обязан быть виден, иначе
     с клавиатуры не понять, какой фильтр сейчас под Enter */
  .fc-facts > div[data-kpi]:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
  .fc-facts > div.kpi-on { box-shadow: inset 0 0 0 2px var(--coral); }
  @media (max-width: 1100px) {
    .fc-facts-5 { grid-template-columns: repeat(2, 1fr); }
    .fc-facts-4 { grid-template-columns: repeat(2, 1fr); }
    .fc-facts-3 { grid-template-columns: 1fr; }
  }

  /* панель «Колонки» (OF.colChooser) */
  .fc-colbox { position:absolute; right:0; top:110%; z-index:40; max-height:320px; overflow:auto; background:var(--paper); border:1px solid var(--hair); border-radius: 14px; padding:12px 16px; box-shadow:0 12px 30px rgba(20,17,13,.12); min-width:340px; }
  .fc-colbox.hidden { display: none; }
  /* внутренности панели «Колонки» (OF.colChooser) — подняты 25.09, жили
     копиями в native_forecast.html и ветке-доноре /pnl */
  .fc-cc-row { border-bottom: 1px solid var(--hair); padding: 5px 0; }
  .fc-cc-head { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--ink-2); cursor:pointer; }
  .fc-cc-fmt { font: 500 10px/1 var(--f-mono); text-transform:uppercase; color:var(--mute); background:none; border:0; cursor:pointer; margin-left:24px; margin-top:3px; }
  .fc-cc-fmt:hover { color:var(--ink); }
  .fc-cc-panel { padding: 4px 0 4px 24px; }
  .fc-cc-rule { display:flex; gap:6px; align-items:center; font-size:12px; margin-bottom:3px; }
  .fc-cc-x { color:var(--danger); cursor:pointer; background:none; border:0; font-weight:700; }
  .fc-cc-form { display:flex; gap:4px; flex-wrap:wrap; align-items:center; margin-top:4px; }
  .fc-cc-form select, .fc-cc-form input { height:30px !important; font-size:12px; width:auto !important; padding:0 8px; }
  .fc-cc-form input { width:66px !important; }
  .fc-cc-form .btn { height:30px; padding:0 10px; }
  .fc-cc-panel.hidden { display: none; }

  /* ── Канон: сегмент-переключатель (подъём 25.09, эталон — план-факт).
     Жил как .pf-seg инлайном в planfact.html; «Управленческая отчётность» —
     второй потребитель, канон переехал сюда. Правило .hidden — адресное:
     Tailwind-утилита объявлена раньше и при равной специфичности проигрывает. */
  .cab-seg { display: inline-flex; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
  .cab-seg.hidden { display: none; }
  .cab-seg button { padding: 8px 16px; background: var(--paper); color: var(--ink-2); font-family: var(--f-display); font-weight: 600; font-size: 13px; cursor: pointer; border: 0; }
  .cab-seg button + button { border-left: 1px solid var(--hair); }
  .cab-seg button.active { background: var(--ink); color: var(--paper); }
  .cab-seg button:disabled { opacity: .45; cursor: default; }

  /* ── Канон: состояние раздела «грузится / пусто / упало» (эталон — #pf-state
     план-факта: единственный, кто переживал 500 и протухшую сессию — кнопки
     «Повторить» и «Войти заново»). Разметка: .cab-state > .cab-state-row >
     (.cab-state-text + кнопки .cab-btn .cab-btn--sm). */
  .cab-state { background: var(--paper); border: var(--rule); border-radius: 18px; padding: 16px; }
  .cab-state.hidden { display: none; }
  .cab-state-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .cab-state-text { font-size: 13px; color: var(--ink-2); }

  /* ── Канон: мультиселект-фильтр .fc-ms (эталон — «Прогноз заказов»; логика —
     OF.multiSelect в of.js). Стили жили в native_forecast.html и копией в
     ветке-доноре /pnl. */
  .fc-ms { position: relative; }
  .fc-ms-btn { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 100%; padding-right: 28px; }
  .fc-ms-clearx { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 5; width: 20px; height: 20px; border: 0; background: none; color: var(--mute); font-size: 16px; line-height: 1; cursor: pointer; border-radius: 5px; display: none; align-items: center; justify-content: center; }
  .fc-ms-clearx.fc-ms-shown { display: flex; }
  .fc-ms-clearx:hover { color: var(--danger); background: var(--bg-2); }
  .fc-ms-box { position: absolute; left: 0; top: calc(100% + 6px); z-index: 45; width: max(100%, 260px); max-height: 340px; overflow: auto; background: var(--paper); border: .5px solid var(--hair); border-radius: 10px; box-shadow: 0 12px 30px rgba(20,17,13,.12); padding: 10px 12px; }
  .fc-ms-box.hidden { display: none; }
  .fc-ms-search { height: 34px !important; margin-bottom: 8px; }
  .fc-ms-clear { display: block; font: 500 10px/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--mute); cursor: pointer; margin-bottom: 6px; background: none; border: 0; padding: 0; }
  .fc-ms-clear:hover { color: var(--ink); }
  .fc-ms-list label { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-2); padding: 4px 0; cursor: pointer; }
  .fc-ms-empty { font-size: 12px; color: var(--mute); padding: 6px 0; }
  html[data-theme="dark"] .fc-ms-box, body[data-theme="dark"] .fc-ms-box { box-shadow: 0 12px 30px rgba(0,0,0,.5); }

  /* ── Канон: тема AG Grid. Жила тремя копиями (native_forecast.html,
     planfact.html, planfact_edit.html). Селектор body .ag-theme-quartz —
     специфичность 0,1,1: рантайм-стиль AG Grid ставит --ag-background-color
     на голый .ag-theme-quartz (0,1,0) и грузится позже — без перевеса в
     тёмной теме пустая зона грида остаётся белым прямоугольником. */
  body .ag-theme-quartz {
    --ag-font-family: var(--f-body); --ag-font-size: 13px;
    --ag-background-color: var(--paper);
    --ag-foreground-color: var(--ink);
    --ag-border-color: var(--hair);
    --ag-border-radius: 8px; --ag-wrapper-border-radius: 14px;
    --ag-header-background-color: var(--bg-2);
    --ag-header-foreground-color: var(--mute);
    --ag-row-hover-color: var(--bg-2);
    --ag-selected-row-background-color: var(--hair-2);
    --ag-odd-row-background-color: var(--paper);
  }
  .ag-theme-quartz .ag-header-cell-text { font-family: var(--f-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }

  /* цифры Onest разной ширины — без tabular-nums столбец «пляшет» от строки
     к строке. Одно правило на все гриды портала */
  .ag-theme-quartz .ag-cell { font-variant-numeric: tabular-nums; }

  /* «Наименование» в 2 строки. Кламп обязан висеть на .ag-cell-wrapper /
     .ag-cell-value: сама .ag-cell у AG Grid 32 — flow-root с flex-обёрткой
     внутри, и -webkit-line-clamp на ней не действует вовсе (текст резался по
     половине глифа). autoHeight НЕ включаем — он ломает строку 48px.
     Один класс на все гриды: вторая копия правила уже расходилась */
  .ag-theme-quartz .fc-clamp2 .ag-cell-wrapper,
  .ag-theme-quartz .fc-clamp2 .ag-cell-value {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; white-space: normal; line-height: 1.3;
  }

  .cab-iconbtn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mute);
    border: .5px solid transparent;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
  }
  .cab-iconbtn:hover { color: var(--ink); background: var(--bg-2); border-color: var(--hair); }
  .cab-iconbtn.is-danger:hover { color: oklch(50% 0.22 25); background: oklch(95% 0.04 25); }
  .cab-iconbtn svg { width: 15px; height: 15px; }

  .cab-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
  .cab-dash-card {
    position: relative;
    overflow: hidden;
    min-height: 220px;
    border: var(--rule);
    border-radius: 18px;
    padding: clamp(22px, 2vw, 28px);
    background: var(--paper);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .cab-dash-card:hover { transform: translateY(-2px); border-color: var(--hair); box-shadow: 0 14px 32px -22px rgba(0,0,0,.18); }
  .cab-dash-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); opacity: 0; transition: opacity .2s ease; }
  .cab-dash-card:hover::before { opacity: 1; }
  .cab-dash-card h3 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2vw, 28px); letter-spacing: 0; line-height: 1.05; }
  .cab-dash-card .sub { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; max-width: 38ch; }
  .cab-dash-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
  .cab-dash-card .meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: var(--rule); }
  .cab-dash-card .meta .id { font: 400 10.5px/1.3 var(--f-mono); letter-spacing: .06em; color: var(--mute); text-transform: uppercase; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cab-dash-card .meta .open { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; }
  .cab-orb-pink { width: 560px; height: 560px; pointer-events: none; z-index: 0; background: radial-gradient(closest-side, oklch(65% 0.28 358 / .35), transparent); filter: blur(20px); }
  .cab-orb-orange { width: 380px; height: 380px; pointer-events: none; z-index: 0; background: radial-gradient(closest-side, oklch(75% 0.2 38 / .35), transparent); filter: blur(20px); }
  .login-eyebrow {
    font: 400 11px/1 var(--f-mono);
    letter-spacing: .08em;
    color: var(--mute);
    text-transform: uppercase;
  }
  .login-hero-title {
    align-self: center;
    font-family: var(--f-display);
    font-size: clamp(56px, 6vw, 78px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.02;
  }
  .login-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
  }
  .login-forgot {
    color: var(--mute);
    font: 400 10.5px/1 var(--f-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .login-forgot:hover { color: var(--ink); }
  .login-manager {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 18px;
    border: var(--rule);
    border-radius: 14px;
    background: var(--paper);
    color: var(--mute);
    font: 400 11px/1.4 var(--f-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 12px 28px -24px rgba(0,0,0,.22);
  }
  .login-manager b { color: var(--ink); font-weight: 600; }
  .login-manager-dot {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: oklch(65% 0.28 358);
    flex: 0 0 auto;
  }
  .cab-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px 4px 4px; }
  .cab-pager-pages { display: flex; gap: 4px; max-width: 100%; overflow-x: auto; }
  .cab-pg-pg, .cab-pg-arrow {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 400 12px/1 var(--f-mono);
    color: var(--ink-2);
    border: .5px solid transparent;
    background: transparent;
  }
  .cab-pg-arrow { border-color: var(--hair); background: var(--paper); }
  .cab-pg-pg:hover, .cab-pg-arrow:hover { background: var(--bg-2); color: var(--ink); }
  .cab-pg-pg.is-current { background: var(--ink); color: #fff; }
  .cab-pg-pg.is-current-grad { background: var(--grad); color: #fff; }
  .cab-pg-arrow[disabled] { opacity: .4; pointer-events: none; }
  .cab-pg-meta { margin-left: auto; font: 400 11px/1 var(--f-mono); letter-spacing: .05em; color: var(--mute); text-transform: uppercase; }
  .cab-pg-perpage { display: inline-flex; align-items: center; gap: 6px; }
  .cab-pg-perpage .lbl, .cab-mono {
    font: 400 11px/1.3 var(--f-mono);
    letter-spacing: .06em;
    color: var(--mute);
    text-transform: uppercase;
  }
  .cab-mono::before { content: "// "; color: var(--mute-2); }
  .cab-mono b { color: var(--ink); font-weight: 500; }
  .cab-row { display: flex; align-items: center; gap: 10px; }
  .cab-row--between { justify-content: space-between; }
  .cab-spacer-sm { height: 8px; }
  .cab-spacer { height: 16px; }
  .cab-spacer-lg { height: 32px; }

  @media (max-width: 980px) {
    /* minmax(0, 1fr), а не 1fr: колонка грида по умолчанию не сжимается ниже
       min-content, и широкая таблица распирала всю страницу вместо своего скролла. */
    .cab-shell { grid-template-columns: minmax(0, 1fr); }
    .cab-side { position: static; height: auto; border-right: 0; border-bottom: var(--rule); padding: 16px; gap: 14px; }
    .cab-side-section { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 0; overflow-x: visible; }
    .cab-link { min-width: 0; grid-template-columns: 46px minmax(0, 1fr); padding: 8px; margin: 0; font-size: 15px; gap: 8px; }
    .cab-link .ix { width: 42px; height: 30px; font-size: 12px; }
    .cab-link .ar { display: none; }
    .cab-side-help { margin-top: 0; padding-top: 12px; }
    .cab-side-help + .cab-side-foot { margin-top: 0; }
    .cab-side-foot { margin-top: 0; padding-top: 12px; }
    .cab-filters-row { grid-template-columns: 1fr 1fr; }
    .cab-top { padding: 16px 16px 0; }
    .cab-top-meta .pill { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cab-page { padding: 24px 16px 48px; }
  }
  @media (max-width: 560px) {
    .cab-dash-grid { grid-template-columns: 1fr; }
    .cab-filters-row { grid-template-columns: 1fr; }
    .cab-side { padding: 14px 12px; }
    .cab-brand { font-size: 20px; }
    .cab-brand .b-mark { width: 26px; height: 26px; }
    .cab-side-section {
      display: flex;
      gap: 8px;
      margin: 0 -12px;
      padding: 0 12px 2px;
      overflow-x: auto;
      scrollbar-width: none;
      scroll-snap-type: x proximity;
    }
    .cab-side-section::-webkit-scrollbar { display: none; }
    .cab-link {
      min-width: 152px;
      scroll-snap-align: start;
      grid-template-columns: 40px minmax(0, 1fr);
      font-size: 13px;
    }
    .cab-link-text { white-space: normal; line-height: 1.15; }
    .cab-top { align-items: flex-start; flex-direction: column; padding: 14px 12px 0; gap: 10px; }
    .cab-top-meta .pill { max-width: calc(100vw - 24px); }
    .cab-page { padding: 18px 12px 40px; }
    .cab-filters { padding: 14px; border-radius: 14px; }
    .cab-filters-actions { align-items: stretch; flex-direction: column; }
    .cab-filters-actions .cab-grow { display: none; }
    .cab-filters-actions .btn { width: 100%; }
    .cab-pager { gap: 8px; }
    .cab-pager-pages { order: 3; width: 100%; padding-bottom: 2px; }
    .cab-pg-meta { margin-left: 0; }
    .cab-pg-perpage { width: 100%; overflow-x: auto; }
    .btn, .of-btn { height: 40px; padding: 0 14px; font-size: 13px; }
    .cab-dash-card { min-height: 0; padding: 20px; }
    .h-display { font-size: clamp(36px, 12vw, 48px); line-height: .95; }
    .login-hero-title { font-size: clamp(44px, 15vw, 64px); }
    .login-form-row { align-items: flex-start; flex-direction: column; gap: 12px; }
    .login-manager { align-items: flex-start; padding: 14px 16px; }
    .login-pane {
      min-height: auto !important;
      grid-template-rows: auto !important;
      gap: 24px;
      padding: 28px !important;
    }
    .login-pane .h-display { align-self: start; }
  }

/* ── design-tweaks: правки скруглений и плотности (решение Нат 03.07) ── */
/* меньше скруглений (решение Нат 03.07): карточки 12, крупные панели 14, кнопки/инпуты 10 */
  .btn, .of-btn { border-radius: 10px; }
  .cab-input, .cab-select { border-radius: 10px !important; }
  .cab-dash-card, .cab-filters, .cab-table-wrap, .cab-panel { border-radius: 12px !important; }
  .cab-link { border-radius: 10px !important; }
  .cab-user, .cab-account-menu { border-radius: 12px !important; }
  .fc-card, .fc-facts { border-radius: 12px !important; }
  .fc-colbox, .fc-hl { border-radius: 10px !important; }
  .fc-tab { border-radius: 10px !important; }

  /* пункты меню без номерной колонки */
  .cab-link { grid-template-columns: minmax(0, 1fr) auto !important; }

  /* админ-контент (of-*) на cab-каркасе: поверхности из переменных темы */
  .of-card, .of-panel, .of-soft-panel { background: var(--paper) !important; border: var(--rule) !important; border-radius: 12px !important; box-shadow: none !important; background-image: none !important; }
  .of-table thead { background: var(--bg-2) !important; }
  .of-table thead th { color: var(--mute) !important; font-family: var(--f-mono) !important; font-size: 10px !important; text-transform: uppercase; letter-spacing: .05em; }
  .of-table tbody tr { border-color: var(--hair) !important; color: var(--ink-2); }
  .of-table tbody tr:hover { background: var(--bg-2) !important; }
  .of-title, .of-page-title { color: var(--ink) !important; }
  .cab-brand small { font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); margin-left: 8px; }

  /* лого-wordmark с промо в сайдбаре кабинета */
  .lgw { height: 26px; width: auto; display: block; }
  .lgw .lg-t { fill: var(--ink); }
  .lgw .lg-m { fill: var(--login-pane-bg, var(--paper)); }

  /* тумблер темы внизу меню */
  .cab-theme-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding: 10px 14px; border: .5px solid var(--hair); border-radius: 10px; background: var(--paper); color: var(--ink-2); font: 500 12.5px/1 var(--f-display); cursor: pointer; }
  .cab-theme-btn:hover { border-color: var(--mute-2); }
  .cab-theme-btn .m { font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; color: var(--mute); }

  /* сворачивание меню вбок (десктоп): панель анимируется, кнопка едет по её границе */
  @media (min-width: 981px) {
    .cab-shell { transition: grid-template-columns .28s ease; }
    html.side-collapsed .cab-shell { grid-template-columns: 0px minmax(0, 1fr); }
    .cab-side { min-width: 0; overflow: hidden; white-space: nowrap; }
    html.side-collapsed .cab-side { padding-left: 0; padding-right: 0; border-right: 0; }
  }
  .cab-side-toggle {
    position: fixed; top: 50%; transform: translateY(-50%); left: calc(280px - 14px); z-index: 60;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border: .5px solid var(--hair); border-radius: 99px;
    background: var(--paper); color: var(--ink-2); font: 500 12px/1 var(--f-mono);
    cursor: pointer; box-shadow: 0 2px 10px rgba(20,17,13,.08);
    transition: left .28s ease, border-color .15s ease;
  }
  .cab-side-toggle:hover { border-color: var(--mute-2); color: var(--ink); }
  html.side-collapsed .cab-side-toggle { left: 10px; }
  @media (max-width: 980px) { .cab-side-toggle { display: none; } }
  html[data-theme="dark"] .cab-side-toggle, body[data-theme="dark"] .cab-side-toggle { box-shadow: 0 2px 10px rgba(0,0,0,.4); }

  /* ── тёмная тема кабинета ── */
  html[data-theme="dark"], body[data-theme="dark"] {
    --bg:#0e0d0b; --bg-2:#171613; --paper:#191815; --ink:#f4f2ec; --ink-2:#c7c2b6;
    --mute:#8a857a; --mute-2:#5a564d; --hair:#2b2925; --hair-2:#24221f;
    /* семантические токены тёмной темы (алерты/бейджи не должны слепить светлым) */
    --danger:#ff6f5e; --danger-bg:#2b1512; --danger-line:rgba(255,111,94,.30);
    --success:#6fcf86; --success-bg:#12241a; --success-line:rgba(111,207,134,.30);
    --warning:#e2a53f; --warning-bg:#241d0c; --warning-line:rgba(226,165,63,.30);
    --of-danger-bg:#2b1512; --of-danger-text:#ff9a8c; --of-danger-line:rgba(255,111,94,.30);
    --of-success-bg:#12241a; --of-success-text:#6fcf86;
    --of-warning-bg:#241d0c; --of-warning-text:#e2a53f;
    /* заливка активной строки/редактируемой ячейки и полоски площадок: раньше
       жили на #fc-root и на вкладке с другим id корня тихо пропадали.
       #005BFF на тёмном даёт 2.4:1 — светлим все четыре полоски */
    --fc-hl-fill:#34312c;
    --pf-wb:#e356c4; --pf-ozon:#4d8dff; --pf-ms:#3ecf9a; --pf-ym:#FFDB4D;
    color-scheme: dark;
  }
  html[data-theme="dark"] .cab-side, html[data-theme="dark"] .cab-top, body[data-theme="dark"] .cab-side, body[data-theme="dark"] .cab-top { background: var(--bg); }
  body[data-theme="dark"] .lgw .lg-t { fill: #F3EFE7; }
  body[data-theme="dark"] .cab-dash-card { box-shadow: none; }
  body[data-theme="dark"] .cab-top-meta .pill { background: var(--paper); }
  body[data-theme="dark"] .bg-white, body[data-theme="dark"] .bg-white\/55 { background-color: var(--paper) !important; }
  /* бейджи кабинета на тёмном фоне: светлые oklch-заливки → тёмные семантические */
  body[data-theme="dark"] .cab-badge--focus { background: var(--of-danger-bg); color: var(--of-danger-text); border-color: var(--of-danger-line); }
  body[data-theme="dark"] .cab-badge--focus .d { background: var(--danger); }
  body[data-theme="dark"] .cab-badge--ok { background: var(--success-bg); color: var(--of-success-text); border-color: var(--success-line); }
  body[data-theme="dark"] .cab-badge--ok .d { background: var(--success); }
  body[data-theme="dark"] .cab-badge--warn { background: var(--warning-bg); color: var(--of-warning-text); border-color: var(--warning-line); }
  body[data-theme="dark"] .cab-badge--warn .d { background: var(--warning); }
  body[data-theme="dark"] .cab-badge--danger { background: var(--of-danger-bg); color: var(--of-danger-text); border-color: var(--of-danger-line); }
  body[data-theme="dark"] .cab-badge--danger .d { background: var(--danger); }
  body[data-theme="dark"] .fc-colbox { box-shadow: 0 12px 30px rgba(0,0,0,.5); }