:root {
    --font-serif: 'Onest', system-ui, sans-serif;
    --font-sans: 'Golos Text', system-ui, sans-serif;
    --bg: #F6EFE7;
    --bg-card: #FFFDF8;
    --bg-soft: #F1E4D6;
    /* Подложка прилипших шапок и первой колонки. ОБЯЗАНА быть непрозрачной:
       сквозь полупрозрачную видно цифры, которые проезжают под ней при прокрутке. */
    --sticky-bg: #FFFDF8;
    --sticky-bg-total: #F1E4D6;
    --navy: #2F2A24;
    --navy-soft: #8A7F70;
    --gold: #C06B4C;
    --gold-light: #E8B364;
    --border: #E8DCCB;
    --danger: #b23a2e;
    --success: #5c7a52;
    --radius: 16px;

    /* ===== Новая дизайн-система из ТЗ (палитра «Утренний свет») ===== */
    --cream: #F6EFE7;
    --surface: #FFFDF8;
    --line: #E8DCCB;
    --ink: #3E3630;
    --ink-soft: #8A7F70;
    --terracotta: #D98B6D;
    --terracotta-deep: #C06B4C;
    --olive: #7E8C6F;
    --espresso: #2F2A24;
    --gold2: #E8B364;
    --font-heading: 'Onest', system-ui, sans-serif;
    --font-body: 'Golos Text', system-ui, sans-serif;

    /* ===== Токены для тем оформления (добавлены при внедрении 3 направлений) ===== */
    --espresso-deep: #211d18;
    --on-dark: #f7f1e6;
    --on-dark-rgb: 247,241,230;
    --gold-tint: #fff8e6;
    --gold-tint-2: #f7ecc9;
    --alert-bg: #fbe9e7;
    --alert-border: #e8b8ae;

    /* ===== ФАЗА 1: Токены редизайна ===== */
    /* Типографика — 5 уровней */
    --rd-fs-xs: 12px;
    --rd-fs-sm: 14px;
    --rd-fs-base: 16px;
    --rd-fs-lg: 20px;
    --rd-fs-xl: 28px;

    /* Текст — 3 уровня иерархии */
    --rd-text-1: var(--ink);           /* основной текст */
    --rd-text-2: #6B6460;              /* вторичный: подписи, мета (контраст ≥4.5:1 к #FFFDF8) */
    --rd-text-3: #9C9189;              /* приглушённый: хинты (контраст ≥3:1) */

    /* Статусы — отдельно от бренда */
    --rd-danger: #C74B38;              /* терракота, темнее акцента */
    --rd-danger-bg: #F9E8E4;
    --rd-warn: #D4A135;                /* янтарный */
    --rd-warn-bg: #FEF8EE;
    --rd-ok: #6B8D5E;                  /* приглушённый зелёный */
    --rd-ok-bg: #F1F5ED;
    --rd-neutral: #8A7F70;             /* текущий ink-soft */
    --rd-neutral-bg: #F1E4D6;

    /* Шкала отступов */
    --rd-s1: 4px;
    --rd-s2: 8px;
    --rd-s3: 12px;
    --rd-s4: 16px;
    --rd-s5: 24px;
    --rd-s6: 32px;

    /* Радиусы — две ступени */
    --rd-radius-sm: 12px;              /* кнопки, поля, чипы */
    --rd-radius-lg: 16px;              /* карточки */

    /* Тени — две ступени */
    --rd-shadow-card: 0 1px 3px rgba(63, 54, 48, 0.08);
    --rd-shadow-pop: 0 4px 12px rgba(63, 54, 48, 0.12);
  }
  * { box-sizing: border-box; }
  .icon { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; vertical-align: -5px; }
  .icon-sm { width: 16px; height: 16px; vertical-align: -3px; }

  /* ===== ФАЗА 1: Табличные цифры и типографика ===== */
  .rd-num,
  [data-num] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  /* ===== Новые компоненты по ТЗ редизайна ===== */
  .sticky-header { position: sticky; top: 0; z-index: 30; background: var(--cream); padding: 10px 0 8px; margin: 0 0 4px; }
  .sticky-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .sticky-header-name { font-family: var(--font-heading); font-weight: 600; font-size: 19px; color: var(--ink); }
  .sticky-header-day { font-family: var(--font-body); font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

  .kpi-hero { background: var(--espresso); border-radius: 20px; padding: 22px 20px; margin-bottom: 16px; }
  .kpi-hero-label { font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.55); font-weight: 700; }
  /* Правка дизайна: цифры KPI переведены с декоративного serif на sans + табличные цифры — легче считывать с одного взгляда */
  .kpi-hero-main { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 38px; line-height: 1.1; color: var(--gold2); margin-top: 6px; }
  .kpi-hero-underline { width: 32px; height: 2px; background: var(--gold2); margin: 10px 0 16px; }
  .kpi-hero-subrow { display: flex; gap: 10px; flex-wrap: wrap; }
  .kpi-hero-sub { flex: 1; min-width: 100px; background: rgba(255,255,255,0.06); border-radius: 12px; padding: 10px 12px; }
  .kpi-hero-sub span { display: block; font-family: var(--font-body); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 18px; color: #fff; }
  .kpi-hero-sub label { display: block; font-family: var(--font-body); font-size: 10.5px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 3px; }

  .tile-grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
  .tile-button {
    font-family: var(--font-body); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border-radius: 16px; padding: 16px 10px; text-align: center; font-weight: 700; font-size: 13px; cursor: pointer; border: none;
  }
  .tile-button .tile-icon { font-size: 22px; line-height: 1; }
  .tile-button.primary { background: var(--terracotta); color: #fff; box-shadow: 0 3px 0 var(--terracotta-deep); }
  .tile-button.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--terracotta-deep); }
  .tile-button.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
  .tile-button.danger { background: transparent; color: var(--terracotta-deep); border: 1.5px solid var(--terracotta-deep); }

  .accordion { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 10px; overflow: hidden; }
  .accordion-header { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: none; border: none; cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--ink); text-align: left; }
  .accordion-header .accordion-chevron { transition: transform 160ms ease; color: var(--ink-soft); font-size: 14px; }
  .accordion.open .accordion-header .accordion-chevron { transform: rotate(180deg); }
  .accordion-body { display: none; padding: 0 16px 16px; }
  .accordion.open .accordion-body { display: block; }
  .accordion-preview { padding: 0 16px 12px; font-family: var(--font-body); font-size: 12.5px; color: var(--ink-soft); }
  body {
    margin: 0;
    background:
      radial-gradient(circle at 8% 8%, rgba(232,179,100,0.35), transparent 42%),
      radial-gradient(circle at 92% 15%, rgba(192,107,76,0.14), transparent 45%),
      radial-gradient(circle at 20% 85%, rgba(232,179,100,0.28), transparent 48%),
      radial-gradient(circle at 88% 90%, rgba(192,107,76,0.10), transparent 45%),
      var(--bg);
    background-attachment: fixed;
    color: var(--navy);
    font-family: var(--font-sans);
    min-height: 100vh;
  }
  .app { max-width: 720px; margin: 0 auto; padding: 16px 16px 80px; }

  .header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
  .logo-badge {
    width: 40px; height: 40px; border-radius: 50%; background: var(--navy);
    color: var(--gold-light); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; letter-spacing: 1px; flex-shrink: 0;
    border: 2px solid var(--gold);
  }

  h1 { font-size: 22px; margin: 0; color: var(--navy); font-family: var(--font-serif); font-weight: 500; letter-spacing: .2px; }
  p.muted { color: var(--navy-soft); font-size: 13px; margin: 2px 0 0 50px; }

  .tabs { display: flex; gap: 8px; margin: 18px 0 16px; }

  /* Нижняя ролевая навигация (раздел 2.1 ТЗ) */
  .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .bottom-nav-items { display: flex; }
  .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; padding: 6px 2px; color: var(--ink-soft); font-family: var(--font-body); font-size: 10px; font-weight: 600; cursor: pointer; }
  .bottom-nav-item .icon { color: var(--ink-soft); }
  .bottom-nav-item.active { color: var(--terracotta-deep); }
  .bottom-nav-item.active .icon { color: var(--terracotta-deep); }
  .app { padding-bottom: 84px; }
  .more-sheet-backdrop { position: fixed; inset: 0; background: rgba(47,42,36,0.35); z-index: 55; }
  .more-sheet-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 56; background: var(--surface); border-radius: 20px 20px 0 0; padding: 18px 12px calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .more-sheet-item { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--cream); border: none; border-radius: 14px; padding: 14px 6px; font-family: var(--font-body); font-size: 11.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
  .more-sheet-item .icon { color: var(--terracotta-deep); }
  @media (min-width: 960px) { .app { padding-bottom: 16px; } }
  .danger-zone { margin-top: 24px; padding: 16px; border: 1.5px solid var(--terracotta-deep); border-radius: 16px; background: rgba(192,107,76,0.05); }

  /* ===== Переключатель темы оформления проекта ===== */
  .danger-zone h2 { margin-top: 0 !important; }
  .segment-tabs { display: flex; gap: 6px; background: var(--bg-soft); border-radius: 12px; padding: 4px; }
  .segment-tab { flex: 1; background: none; border: none; border-radius: 9px; padding: 8px 6px; font-family: var(--font-body); font-size: 12.5px; font-weight: 700; color: var(--navy-soft); cursor: pointer; }
  .segment-tab.active { background: var(--surface); color: var(--terracotta-deep); box-shadow: 0 1px 3px rgba(47,42,36,0.1); }
  .tab {
    flex: 1; text-align: center; padding: 11px 6px; border-radius: 12px;
    background: var(--bg-card); border: 1px solid var(--border); cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--navy-soft); transition: all .15s;
  }
  .tab.active { background: var(--navy); color: var(--gold-light); border-color: var(--navy); }

  h2 { font-size: 16px; margin: 0 0 10px; color: var(--navy); font-weight: 500; font-family: var(--font-serif); }
  .card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 22px;
    padding: 18px; margin-bottom: 14px;
    box-shadow: 0 2px 3px rgba(47,42,36,0.05), 0 14px 30px rgba(47,42,36,0.1);
  }

  /* LOGIN */
  .login-screen { text-align: center; padding: 40px 16px; }
  .login-screen select { max-width: 300px; margin: 16px auto; }

  /* Tarot */
  .tarot {
    background: linear-gradient(180deg, #1b1e42, #0f1130);
    border: 2px solid var(--gold); border-radius: var(--radius);
    padding: 22px 18px; text-align: center; margin-bottom: 14px; position: relative; overflow: hidden;
  }
  .tarot::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(1px 1px at 20% 30%, var(--gold-light) 50%, transparent 50%),
      radial-gradient(1px 1px at 70% 20%, var(--gold-light) 50%, transparent 50%),
      radial-gradient(1px 1px at 85% 60%, var(--gold-light) 50%, transparent 50%),
      radial-gradient(1px 1px at 35% 80%, var(--gold-light) 50%, transparent 50%);
    opacity: .5; pointer-events: none;
  }
  .tarot-badge {
    width: 34px; height: 34px; border-radius: 50%; background: var(--navy);
    border: 1.5px solid var(--gold); color: var(--gold-light); font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;
  }
  .tarot-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-light); opacity: .9; }
  .tarot-title { font-size: 18px; font-weight: 700; margin: 8px 0 10px; color: #fff; }
  .tarot-text { font-size: 14px; line-height: 1.6; color: #d8d5ef; font-style: italic; position: relative; }

  /* Pet */
  .pet-box { text-align: center; padding: 10px 0 4px; }
  .pet-emoji { font-size: 64px; display: block; transition: transform .3s; }
  .pet-name { font-weight: 500; font-size: 18px; margin-top: 6px; font-family: var(--font-serif); }
  .pet-stage { font-size: 12px; color: var(--navy-soft); }
  .pet-speech {
    background: var(--bg-soft); border-radius: 14px; padding: 10px 14px; font-size: 13px;
    margin: 10px auto 0; max-width: 320px; border: 1px solid var(--border);
  }
  .pet-speech.hungry { background: var(--alert-bg); border-color: #f0b8b0; color: #a2392f; }
  .pet-speech.happy { background: #e9f6ee; border-color: #b9e2c9; color: var(--success); }

  /* Progress bars */
  .progress-track { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 20px; height: 14px; overflow: hidden; position: relative; }
  .progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transition: width .5s; }
  .checkpoints { display: flex; align-items: center; width: 100%; padding: 0 4px; margin-top: 8px; }
  .checkpoint-item { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
  .checkpoint-line { position: absolute; top: 8px; right: 50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
  .checkpoint-line.done { background: var(--gold); }
  .checkpoint-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--border); z-index: 1; }
  .checkpoint-dot.done { background: var(--gold); border-color: var(--gold); }
  .checkpoint-value { font-size: 10.5px; color: var(--navy-soft); margin-top: 4px; }
  .pet-glow-card { position: relative; overflow: hidden; background: linear-gradient(155deg, var(--bg-card), var(--surface)); }
  .pet-glow-card::before {
    content: ""; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; border-radius: 50%;
    background: radial-gradient(circle, rgba(232,179,100,0.35), transparent 70%); pointer-events: none;
  }

  /* Desktop layout: sidebar + grid rows (по референсу Claude Design) */
  .row-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
  .badge { font-size: 11px; padding: 3px 9px; border-radius: 10px; background: var(--bg-soft); color: var(--navy); font-weight: 600; }
  .badge-gold { background: var(--navy); color: var(--gold-light); }
  .pot-badge { display:inline-block; font-size:11px; padding:3px 9px; border-radius:10px; font-weight:600; white-space:nowrap; }
  .pot-badge-offer { background: var(--rd-danger-bg); color: var(--rd-danger); }
  .pot-badge-invoice { background: var(--rd-neutral-bg); color: var(--rd-neutral); }
  .pot-badge-dozhim { background: var(--rd-warn-bg); color: var(--rd-warn); }
  .pot-badge-prepaid { background: var(--rd-neutral-bg); color: var(--rd-neutral); } /* Остаток — нейтральный, не зелёный */
  .pot-badge-installment { background: var(--rd-warn-bg); color: var(--rd-warn); }
  .pot-badge-level { background: var(--rd-neutral-bg); color: var(--rd-neutral); }

  /* Urgency badges для дат остатков — цвет по срочности */
  .date-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 4px 10px; border-radius: 10px; font-weight: 600; white-space: nowrap; }
  .date-badge-neutral { background: var(--rd-neutral-bg); color: var(--rd-neutral); } /* >3 дней */
  .date-badge-warn { background: var(--rd-warn-bg); color: var(--rd-warn); } /* 1–3 дня */
  .date-badge-danger { background: var(--rd-danger-bg); color: var(--rd-danger); } /* сегодня/просрочено */

  /* Status badges — общие для различных контекстов */
  .status-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 5px 12px; border-radius: 8px; font-weight: 600; }
  .status-badge-ok { background: var(--rd-ok-bg); color: var(--rd-ok); }
  .status-badge-danger { background: var(--rd-danger-bg); color: var(--rd-danger); }
  .status-badge-warn { background: var(--rd-warn-bg); color: var(--rd-warn); }
  .status-badge-neutral { background: var(--rd-neutral-bg); color: var(--rd-neutral); }

  /* ===== ФАЗА 3: Плотность, ширины, вложенность ===== */

  /* 3.1: Ширины полей по содержимому (только десктоп) */
  @media (min-width: 900px) {
    .rd-w-date { max-width: 200px; }
    .rd-w-num { max-width: 160px; }
    .rd-w-short { max-width: 320px; }
    .rd-w-text { max-width: 560px; }
    .rd-btn-auto { width: auto !important; display: inline-flex !important; padding: 12px 24px !important; }

    /* 3.2: Вкладки компактнее */
    .rd-tabs { display: inline-flex; width: auto; }
    .rd-tabs > * { height: 40px; padding: 0 20px; flex: 0 0 auto; font-size: var(--rd-fs-sm); }

    /* Ограничить контентную колонку для удобства чтения */
    .app { max-width: 1040px; }
  }

  /* 3.3: Скрыть третий уровень вложенности (промежуточные карточки) */
  .rd-card-flat { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; }

  /* 3.4: Унифицировать отступы */
  .rd-block { margin-bottom: var(--rd-s5); } /* 24px */
  .rd-card-padded { padding: 16px; }
  @media (min-width: 900px) {
    .rd-card-padded { padding: 20px; }
  }

  /* Отступ между лейблом и полем */
  label + input, label + select, label + textarea, label + .rd-input-group {
    margin-top: var(--rd-s2) !important;
  }

  /* 3.5: Развёрнутые подсказки → в поповеры */
  .rd-hint { display: block; font-size: var(--rd-fs-sm); color: var(--rd-text-2); margin: var(--rd-s3) 0; line-height: 1.5; }

  .rd-more { display: block; margin-top: var(--rd-s3); }
  .rd-more summary { cursor: pointer; font-size: var(--rd-fs-sm); color: var(--rd-text-2); font-weight: 500; user-select: none; }
  .rd-more summary:hover { color: var(--rd-text-1); }
  .rd-more-body { padding: var(--rd-s3) 0 0 var(--rd-s3); margin-top: var(--rd-s3); border-left: 2px solid var(--border); font-size: var(--rd-fs-sm); line-height: 1.6; color: var(--rd-text-1); }

  /* 3.6: Скрытие элементов (альтернатива удалению) */
  .rd-hidden { display: none !important; }

  /* Потенциалы — карточный дизайн (расположение по design_handoff «Потенциалы — новый дизайн»,
     цвета — текущая палитра проекта, без новой) */
  .pot-hero-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .pot-hero-sum { font-family: var(--font-heading); font-weight: 600; font-size: 32px; line-height: 1; color: var(--espresso); }
  .pot-hero-sub { margin-top: 6px; font-size: 12.5px; color: var(--ink-soft); }
  .pot-seg-bar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; margin: 16px 0 10px; background: rgba(192,107,76,0.08); }
  .pot-seg-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; color: var(--ink-soft); }
  .pot-seg-legend-item { display: flex; align-items: center; gap: 7px; }
  .pot-seg-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
  .pot-seg-legend-item b { color: var(--espresso); font-weight: 700; }
  .pot-stages-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 18px; margin-top: 20px; align-items: start; }
  .pot-stage-col { display: flex; flex-direction: column; gap: 10px; }
  .pot-stage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px 9px; border-bottom: 2px solid var(--terracotta-deep); }
  .pot-stage-title { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--espresso); }
  .pot-stage-sum { font-family: var(--font-heading); font-size: 15px; font-weight: 600; color: var(--terracotta-deep); }
  .pot-deal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 16px 12px; box-shadow: 0 1px 2px rgba(47,42,36,0.04), 0 8px 20px -12px rgba(47,42,36,0.18); display: flex; flex-direction: column; gap: 10px; }
  .pot-deal-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .pot-deal-name { font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: var(--espresso); line-height: 1.25; }
  .pot-deal-tariff { margin-top: 2px; font-size: 12px; color: var(--ink-soft); }
  .pot-deal-amount { font-family: var(--font-heading); font-size: 17px; font-weight: 600; color: var(--espresso); white-space: nowrap; }
  .pot-deal-badges { display: flex; flex-wrap: wrap; gap: 6px; }
  .pot-deal-note { font-size: 13px; line-height: 1.45; color: var(--ink-soft); padding-left: 10px; border-left: 2px solid var(--gold-light); }
  .pot-deal-footer { display: flex; align-items: center; gap: 8px; padding-top: 9px; border-top: 1px solid var(--border); }
  .pot-deal-crm { font-size: 12px; font-weight: 700; color: var(--terracotta-deep); text-decoration: none; padding: 5px 10px; border-radius: 8px; background: rgba(192,107,76,0.08); }
  .pot-deal-actions { margin-left: auto; display: flex; gap: 6px; }
  .pot-deal-actions button { width: 28px; height: 28px; border: 1px solid var(--border); background: transparent; border-radius: 8px; font-size: 12px; cursor: pointer; color: var(--ink-soft); }
  .pot-deal-actions button:hover { background: rgba(192,107,76,0.08); color: var(--terracotta-deep); }
  .pot-empty { font-family: var(--font-body); font-size: 13px; color: rgba(47,42,36,0.5); }

  .compare-line { font-size: 13px; color: var(--navy-soft); margin-top: 4px; }
  .compare-up { color: var(--success); font-weight: 600; }
  .compare-down { color: var(--danger); font-weight: 600; }

  /* Race (team screen) */
  .race-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  #raceList::-webkit-scrollbar, #raceListTatiana::-webkit-scrollbar, #raceListAnastasia::-webkit-scrollbar { width: 5px; }
  #raceList::-webkit-scrollbar-thumb, #raceListTatiana::-webkit-scrollbar-thumb, #raceListAnastasia::-webkit-scrollbar-thumb { background: rgba(192,107,76,0.25); border-radius: 4px; }
  #feed::-webkit-scrollbar { width: 5px; }
  #feed::-webkit-scrollbar-thumb { background: rgba(192,107,76,0.25); border-radius: 4px; }
  .race-row:last-child { border-bottom: none; }
  .avatar {
    width: 38px; height: 38px; border-radius: 50%; background: var(--bg-soft); border: 1.5px solid var(--gold);
    display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--navy); overflow: hidden; flex-shrink: 0;
  }
  .avatar img { width: 100%; height: 100%; object-fit: cover; }
  .race-info { flex: 1; min-width: 0; }
  .race-name { font-weight: 600; font-size: 13px; }
  .race-pct { font-size: 12px; color: var(--navy-soft); }

  /* Номинации идут строками (.tm-nom), сетка 2×2 больше не нужна. */
  .nomination-grid { display: block; }
  /* Плитки номинаций удалены 14.09.2026 — заменены строками .tm-nom по макету 23-25. */

  /* Buttons */
  button { font-family: inherit; cursor: pointer; }
  .btn {
    background: var(--bg-soft); border: 1px solid var(--border); color: var(--navy);
    padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600;
  }
  .btn:active { transform: scale(.97); }
  .btn-gold { background: var(--navy); color: var(--gold-light); border: none; }
  .btn-danger { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
  .btn-block { width: 100%; }
  .btn-row { display: flex; gap: 8px; margin-top: 10px; }
  /* Раньше выключенная кнопка ничем визуально не отличалась от рабочей — например, «Подтвердить»
     в модалке удаления, пока не введено имя для подтверждения, выглядела кликабельной, хотя клик
     по ней ничего не делал. Из-за этого нерабочая-по-задумке кнопка казалась багом. */
  button:disabled, input:disabled { opacity: 0.45; cursor: not-allowed; }

  select, input[type=text], input[type=number], input[type=email], input[type=date], input[type=password], textarea {
    width: 100%; background: #fff; border: 1px solid var(--border); color: var(--navy);
    padding: 10px 12px; border-radius: 10px; font-size: 14px; font-family: inherit;
  }
  label { font-size: 12px; color: var(--navy-soft); display: block; margin: 10px 0 4px; }

  .amount-display { font-size: 38px; font-weight: 600; font-family: var(--font-serif); text-align: center; padding: 0 0 10px; color: var(--navy); min-height: 46px; }
  .numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .numpad button {
    background: rgba(192,107,76,0.05); border: none; color: var(--navy);
    padding: 14px 0; border-radius: 14px; font-family: var(--font-serif); font-size: 18px; font-weight: 600;
  }
  .numpad-confirm { background: var(--gold) !important; color: var(--gold-light) !important; box-shadow: 0 6px 14px rgba(192,107,76,0.35); }
  .numpad button[data-key="⌫"] { color: var(--gold); }
  .quick-amounts { display: flex; gap: 8px; margin: 0 0 12px; }
  .quick-amounts button {
    flex: 1; background: rgba(192,107,76,0.05); border: 1px solid rgba(192,107,76,0.25);
    color: var(--gold); padding: 8px 4px; border-radius: 12px; font-size: 11.5px; font-weight: 700;
  }

  /* Стили «Ленты» (.feed-*) удалены вместе с блоком — его нет в макете 23-25. */
  .reaction-btn { background: rgba(192,107,76,0.06); border: none; border-radius: 12px; padding: 2px 8px; font-size: 11.5px; color: var(--navy); }
  .reaction-btn .count { font-size: 11px; color: var(--navy-soft); margin-left: 3px; }

  /* Достижения убраны 14.09.2026: их место заняли баллы и кристаллы. */

  .task-block { background: var(--bg-soft); border-left: 4px solid var(--gold); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
  .subtask { background: #fff; border-radius: 10px; padding: 12px 14px; margin-top: 10px; font-size: 15px; line-height: 1.65; white-space: pre-wrap; border: 1px solid var(--border); }
  .task-time { font-size: 14px; color: var(--gold); font-weight: 700; letter-spacing: .3px; }
  .task-title { font-size: 18px; font-weight: 700; margin: 4px 0 8px; line-height: 1.4; }
  .task-photo { max-width: 100%; border-radius: 10px; margin-top: 10px; border: 1px solid var(--border); }
  .important-block { background: linear-gradient(135deg, var(--gold-tint), var(--gold-tint-2)); border: 1.5px solid var(--gold); }
  .important-block h2 { color: var(--navy); }
  .planerka-date { font-size: 15px; font-weight: 700; color: var(--navy); background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; text-align: center; text-transform: capitalize; }

  .modal-overlay {
    position: fixed; inset: 0; background: rgba(20,23,58,.55); display: none;
    align-items: flex-start; justify-content: center; z-index: 100; padding: 40px 16px; overflow-y: auto;
  }
  .modal-overlay.open { display: flex; }
  .modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; max-width: 480px; width: 100%; }
  .modal-close { float: right; background: none; border: none; color: var(--navy-soft); font-size: 20px; }
  .install-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
  .install-step { display: flex; gap: 12px; align-items: flex-start; }
  .install-step-num {
    flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gold-tint);
    color: var(--terracotta-deep); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center;
  }
  .install-step-text { font-size: 13.5px; line-height: 1.5; color: var(--navy); padding-top: 3px; }
  .install-step-text b { color: var(--terracotta-deep); }
  .install-hint { font-size: 12px; color: var(--navy-soft); margin-top: 16px; line-height: 1.5; }
  .admin-fab {
    position: fixed; bottom: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%;
    background: var(--navy); border: none; color: var(--gold-light);
    font-size: 18px; display: flex; align-items: center; justify-content: center; z-index: 50;
  }
  .list-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
  .list-item:last-child { border-bottom: none; }
  .small-x { background: none; border: none; color: var(--danger); font-size: 16px; padding: 4px 8px; }
  .hint { font-size: 12px; color: var(--navy-soft); margin-top: 6px; }
  .crm-checkbox-list { display:flex; flex-direction:column; gap:6px; max-height:180px; overflow-y:auto; border:1px solid var(--border); border-radius:8px; padding:10px; }
  .crm-checkbox-list label { display:flex; align-items:center; gap:8px; font-weight:400; cursor:pointer; font-size:14px; }
  .crm-checkbox-list .hint { margin:0; }

  .animal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
  .animal-choice {
    background: var(--bg-soft); border: 2px solid transparent; border-radius: 12px; padding: 10px 4px;
    text-align: center; font-size: 26px;
  }
  .animal-choice.selected { border-color: var(--gold); background: var(--gold-tint); }
  .animal-choice-label { font-size: 9px; color: var(--navy-soft); margin-top: 2px; }

  .confetti-piece { position: fixed; top: -10px; z-index: 200; pointer-events: none; font-size: 20px; }

  .team-bonus-banner {
    background: linear-gradient(90deg, var(--gold), var(--gold-light)); color: var(--navy);
    border-radius: var(--radius); padding: 14px 16px; text-align: center; font-weight: 700; margin-bottom: 14px;
  }

  /* Analytics */
  .analytics-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; gap: 8px; }
  .analytics-row:last-child { border-bottom: none; }
  .analytics-row input[type=number] { width: 70px; padding: 6px 8px; font-size: 13px; }
  .heatmap-table { width: 100%; border-collapse: collapse; font-size: 10px; }
  .heatmap-table th { font-weight: 600; color: var(--navy-soft); padding: 4px; text-align: center; }
  .heatmap-table td { width: 14px; height: 14px; border-radius: 4px; text-align: center; }
  .alert-item { background: var(--alert-bg); border: 1px solid var(--alert-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; color: var(--danger); }
  /* Правка дизайна: раньше этот баннер был в той же тёплой оранжевой гамме, что и основная кнопка
     «Занести оплату», и визуально спорил с ней за внимание. Обычное информационное сообщение
     («С днём знаний!» и т.п.) теперь нейтральное — карточка на var(--surface) с акцентом var(--olive)
     слева; насыщенный оранжевый/терракотовый остаётся только у кнопок действия. */
  .greeting-banner { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--olive); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; font-weight: 600; font-size: 14px; }
  .birthday-banner { background: linear-gradient(135deg, #f6d6dc, #f0b8c4); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; text-align: center; font-weight: 600; color: var(--navy); }
  .review-item { display: flex; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 10px; }
  .conv-summary-item { padding: 12px 14px; background: var(--surface); border-radius: 14px; margin-bottom: 10px; }
  .manager-report-card { padding: 16px; background: var(--surface); border-radius: 16px; margin-bottom: 14px; border: 1px solid var(--border); }
  .manager-report-name { font-family: var(--font-serif); font-weight: 600; font-size: 17px; color: var(--navy); margin-bottom: 10px; }
  .manager-report-section-label { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; color: var(--gold); background: rgba(192,107,76,0.08); padding: 4px 12px; border-radius: 20px; display: inline-block; margin-bottom: 8px; }
  .manager-report-segname { font-family: var(--font-serif); font-weight: 600; font-size: 14px; color: var(--navy); margin: 12px 0 4px; }
  .manager-report-segname:first-of-type { margin-top: 4px; }
  .funnel-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px 0 10px; }
  .funnel-stage { border-radius: 8px; padding: 8px 10px; text-align: center; color: #fff; font-size: 12px; font-weight: 700; box-sizing: border-box; }
  .funnel-stage .funnel-label { font-weight: 500; opacity: 0.85; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; display: block; }
  .funnel-stage .funnel-value { font-size: 15px; }
  .funnel-cr-row { display: flex; justify-content: center; gap: 18px; font-size: 12px; color: var(--navy-soft); margin-top: 2px; }
  .funnel-cr-row b { color: var(--gold); }

  /* Stats Source Cards — точная спецификация из design_handoff (вариант 7c) */
  .stat-wrapper { max-width: 660px; margin: 0 auto 22px; background: var(--bg-soft); border-radius: 24px; padding: 22px; border: 1px solid rgba(192,107,76,0.08); }
  .stat-group-wrapper .stat-wrapper { border-left: 4px solid var(--terracotta); background: rgba(217,139,109,0.04); }
  .stat-header-card { background: var(--espresso); border-radius: 20px; padding: 20px 22px; color: var(--on-dark); margin-bottom: 16px; }
  .stat-header-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .stat-header-name { font-family: var(--font-heading); font-weight: 600; font-size: 19px; color: var(--on-dark); }
  .stat-header-group { font-family: var(--font-body); font-weight: 400; font-size: 12px; color: rgba(232,179,100,0.6); margin-top: 2px; }
  .stat-header-avgcheck { font-family: var(--font-heading); font-weight: 600; font-size: 20px; color: var(--gold2); text-align: right; }
  .stat-header-avgchecklabel { font-family: var(--font-body); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(var(--on-dark-rgb),0.5); text-align: right; margin-top: 2px; }
  .stat-header-metrics { display: flex; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(232,179,100,0.15); }
  .stat-header-metric { flex: 1; }
  .stat-header-metric-value { font-family: var(--font-heading); font-weight: 600; font-size: 18px; line-height: 1; color: var(--gold2); }
  .stat-header-metric-label { font-family: var(--font-body); font-size: 9.5px; margin-top: 5px; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(var(--on-dark-rgb),0.45); }
  .stat-source-card { background: var(--surface); border-radius: 18px; padding: 18px 20px; box-shadow: 0 2px 3px rgba(47,42,36,0.04), 0 8px 20px rgba(47,42,36,0.06); margin-bottom: 12px; transition: box-shadow 160ms ease; }
  .stat-source-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
  .stat-source-name { font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--espresso); }
  .stat-source-badge { border-radius: 20px; padding: 4px 11px; font-family: var(--font-body); font-weight: 700; font-size: 10.5px; letter-spacing: 0.03em; white-space: nowrap; }
  .stat-source-badge.paid { background: rgba(192,107,76,0.1); color: var(--terracotta-deep); }
  .stat-source-badge.unpaid { background: rgba(47,42,36,0.06); color: rgba(47,42,36,0.45); }
  .stat-source-metrics { display: flex; margin-bottom: 12px; }
  .stat-source-metric { flex: 1; text-align: center; border-right: 1px solid rgba(192,107,76,0.08); }
  .stat-source-metric:last-child { border-right: none; }
  .stat-source-metric-value { font-family: var(--font-heading); font-weight: 600; font-size: 19px; line-height: 1; }
  .stat-source-metric-label { font-family: var(--font-body); font-size: 9.5px; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(47,42,36,0.45); }
  .stat-cr-bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: rgba(192,107,76,0.07); }
  .stat-cr-bar-answer { background: var(--terracotta); }
  .stat-cr-bar-pay { background: var(--terracotta); }
  .stat-cr-labels { margin-top: 8px; display: flex; justify-content: space-between; font-family: var(--font-body); font-size: 11px; color: rgba(47,42,36,0.5); }
  .stat-cr-labels strong { color: var(--terracotta-deep); }
  .stat-empty { font-family: var(--font-body); font-size: 13px; color: rgba(47,42,36,0.5); }
  .stat-section-title { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--navy); margin: 22px 4px 10px; }
  .day-history-card { flex: 0 0 190px; background: var(--surface); border-radius: 14px; padding: 14px 16px; box-shadow: 0 2px 3px rgba(47,42,36,0.04), 0 8px 20px rgba(47,42,36,0.06); }
  .day-history-date { font-family: var(--font-serif); font-weight: 600; font-size: 15px; color: var(--navy); text-align: center; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid rgba(192,107,76,0.1); }
  .day-history-row { display: flex; justify-content: space-between; font-size: 11.5px; padding: 3px 0; color: rgba(47,42,36,0.65); }
  .day-history-row b { color: var(--terracotta-deep); font-size: 12.5px; }
  .day-history-group-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gold); font-weight: 700; margin: 8px 0 2px; }
  @media (max-width: 560px) {
    .stat-source-metrics { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
    .stat-source-metric { border-right: none; }
    .stat-header-metrics { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
  }
  .conv-summary-subrow { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .conv-summary-subrow:last-child { border-bottom: none; }
  .conv-summary-segname { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 13.5px; color: var(--navy); margin-bottom: 3px; }
  .conv-summary-segstats { display: block; font-size: 12px; color: rgba(47,42,36,0.65); line-height: 1.6; }
  .conv-summary-segstats b { color: var(--gold); }
  .conv-summary-date { font-size: 11.5px; color: rgba(47,42,36,0.55); }
  .conv-summary-name { font-family: var(--font-serif); font-weight: 600; font-size: 15px; color: var(--navy); margin: 2px 0 8px; }
  .conv-summary-row { display: flex; justify-content: space-between; font-size: 13.5px; padding: 3px 0; }
  .conv-summary-row b { color: var(--gold); }
  .review-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--cream); color: var(--terracotta-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .review-body { flex: 1; min-width: 0; }
  .review-title { font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--ink); }
  .review-meta { font-family: var(--font-body); font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
  .review-text { font-family: var(--font-body); font-size: 13px; line-height: 1.5; margin-top: 6px; color: var(--ink); }
  .review-text p:last-child { margin-bottom: 0 !important; }
  /* .archive-item удалён вместе с «Дневником запуска». */
  .conversion-calc-result { background: var(--bg-soft); border-radius: 12px; padding: 14px; margin-top: 10px; text-align: center; }
  .conversion-calc-result .big-num { font-size: 32px; font-weight: 700; font-family: var(--font-serif); color: var(--gold); }

  /* Trainer */
  .trainer-scenario-btn { display:flex; align-items:center; gap:10px; width:100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--ink); margin-bottom: 6px; cursor: pointer; }
  .trainer-scenario-btn:hover { border-color: var(--terracotta); }
  .trainer-scenario-btn.active { background: var(--terracotta); color: #fff; border-color: var(--terracotta); }
  .trainer-scenario-btn .icon { color: var(--terracotta-deep); flex-shrink: 0; }
  .trainer-scenario-btn.active .icon { color: #fff; }
  .trainer-scenario-title { font-family: var(--font-serif); font-weight: 600; font-size: 15px; color: var(--navy); }
  .trainer-scenario-desc { font-size: 12.5px; color: var(--navy-soft); margin-top: 3px; }
  .chat-bubble { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; }
  .chat-bubble.client { align-self: flex-start; background: var(--bg-soft); color: var(--navy); border-bottom-left-radius: 4px; }
  .chat-bubble.mop { align-self: flex-end; background: var(--navy); color: var(--gold-light); border-bottom-right-radius: 4px; }
  .chat-row { display: flex; }
  .chat-row.client { justify-content: flex-start; }
  .chat-row.mop { justify-content: flex-end; }
  .trainer-option-btn { text-align: left; background: #fff; border: 1.5px solid var(--border); border-radius: 12px; padding: 11px 14px; font-size: 13.5px; color: var(--navy); }
  .trainer-option-btn:hover { border-color: var(--gold); }
  .criteria-row { margin-bottom: 12px; }
  .criteria-label { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; }
  .criteria-bar-track { height: 8px; background: var(--bg-soft); border-radius: 6px; overflow: hidden; }
  .criteria-bar-fill { height: 100%; background: linear-gradient(90deg,var(--gold),var(--gold-light)); }

  /* New animated SVG pets */
  @keyframes breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.025)} }
  @keyframes blink { 0%,90%,100%{opacity:0} 94%{opacity:1} }
  @keyframes eggRock { 0%,100%{transform:rotate(-2.5deg)} 50%{transform:rotate(2.5deg)} }
  @keyframes crackPulse { 0%,100%{opacity:.45} 50%{opacity:1} }
  @keyframes shellFlyL { 0%{transform:translate(0,0) rotate(0deg);opacity:1} 100%{transform:translate(-42px,-58px) rotate(-70deg);opacity:0} }
  @keyframes shellFlyR { 0%{transform:translate(0,0) rotate(0deg);opacity:1} 100%{transform:translate(42px,-58px) rotate(70deg);opacity:0} }
  @keyframes bounceFeed { 0%{transform:translateY(0)} 30%{transform:translateY(-18px)} 55%{transform:translateY(2px)} 75%{transform:translateY(-6px)} 100%{transform:translateY(0)} }
  @keyframes sparklePop { 0%{transform:translate(0,0) scale(.2);opacity:0} 30%{opacity:1} 100%{transform:translate(var(--sx,0),calc(var(--sy,0) - 26px)) scale(1);opacity:0} }
  @keyframes glowPulse { 0%,100%{opacity:.22} 50%{opacity:.4} }
  @keyframes twinkle { 0%,100%{opacity:.2} 50%{opacity:.9} }
  @keyframes foxPopIn { 0%{opacity:0;transform:scale(.3)} 100%{opacity:1;transform:scale(1)} }
  @keyframes wag { 0%,100%{transform:rotate(-10deg)} 50%{transform:rotate(14deg)} }
  .pet-svg-box svg { display:block; }
  .animal-choice-svg { width:44px; height:44px; }

  /* Ring progress (по референсу) */
  .ring-progress-wrap { position: relative; width: 170px; height: 170px; margin: 4px auto 8px; }
  .ring-progress-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .ring-track { fill: none; stroke: rgba(192,107,76,0.1); stroke-width: 12; }
  .ring-fill { fill: none; stroke: var(--gold-light); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
  .ring-progress-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .ring-progress-pct { font-family: var(--font-serif); font-size: 40px; font-weight: 500; color: var(--navy); }
  .ring-progress-label { font-size: 11.5px; color: rgba(47,42,36,0.55); text-transform: none; letter-spacing: normal; }

  /* Uppercase serif card labels (по референсу) */
  .card > h2 {
    font-family: var(--font-body); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
    font-weight: 700; color: var(--gold); background: rgba(192,107,76,0.08);
    padding: 4px 12px; border-radius: 20px; display: inline-block; margin-bottom: 14px;
  }
  .card-dark > h2 { color: var(--gold-light); background: rgba(232,179,100,0.12); }

  /* Profile header bar */
  .profile-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg-card); border: 1px solid rgba(192,107,76,0.08); border-radius: 20px; padding: 18px 22px; margin-bottom: 14px; box-shadow: 0 2px 3px rgba(47,42,36,0.05), 0 12px 26px rgba(47,42,36,0.08); }
  .profile-header-info { flex: 1; }
  .profile-header-name { font-family: var(--font-serif); font-weight: 600; font-size: 24px; color: var(--navy); text-transform: none; letter-spacing: normal; }
  .profile-header-role { font-size: 13px; color: rgba(47,42,36,0.55); margin-top: 2px; }
  .profile-status-pill { font-size: 13px; font-weight: 700; font-family: var(--font-sans); padding: 9px 18px; border-radius: 22px; cursor: pointer; border: 1px solid; }
  .profile-status-pill.working { background: rgba(79,110,84,0.1); color: #4f6e54; border-color: #4f6e54; }
  .profile-status-pill.dayoff { background: rgba(192,107,76,0.05); color: var(--gold); border-color: rgba(192,107,76,0.3); }

  /* Tarot flip */
  .tarot-flip-wrap { perspective: 1000px; margin-bottom: 14px; }
  .tarot-flip { position: relative; width: 100%; height: 270px; transition: transform .6s; transform-style: preserve-3d; cursor: pointer; }
  .tarot-flip.flipped { transform: rotateY(180deg); }
  .tarot-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 18px; text-align: center; overflow: hidden; }
  .tarot-front { background: linear-gradient(160deg, var(--espresso), #3a1420); border: 1px solid rgba(232,179,100,0.4); box-shadow: 0 14px 30px rgba(47,42,36,0.35), inset 0 0 0 1px rgba(232,179,100,0.15); }
  /* Обратная сторона карты всегда светлая (это «изнанка» карты, а не элемент темы) —
     поэтому фон задан напрямую, а не через var(--surface)/var(--on-dark), которые в тёмной
     теме сами становятся тёмными и текст на них перестаёт читаться. */
  .tarot-back { background: linear-gradient(155deg, #FFFDF8, #F6EFE7); border: 1px solid rgba(232,179,100,0.7); box-shadow: 0 14px 30px rgba(47,42,36,0.18); transform: rotateY(180deg); }
  .tarot-emblem {
    width: 64px; height: 64px; border-radius: 50%; background: transparent;
    border: 2px solid var(--gold-light); color: var(--gold-light); font-size: 28px; font-weight: 400; font-family: var(--font-serif);
    display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
  }
  .tarot-hint { font-size: 11px; color: rgba(232,179,100,0.6); margin-top: 4px; }
  .tarot-label { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-light); font-family: var(--font-serif); font-weight: 600; }
  .tarot-back .tarot-label { font-size: 10.5px; letter-spacing: 0.1em; color: var(--gold); font-weight: 700; }
  .tarot-streak { display: none; }
  .tarot-title { font-size: 22px; font-weight: 600; margin: 2px 0 8px; color: var(--navy); font-family: var(--font-serif); }
  .tarot-text { font-size: 13px; line-height: 1.4; color: rgba(47,42,36,0.7); font-style: italic; position: relative; }

  /* Pet animation */
  .pet-stage-box { position: relative; height: 120px; display: flex; align-items: center; justify-content: center; }
  .pet-emoji-live { font-size: 68px; display: inline-block; animation: petBreathe 2.4s ease-in-out infinite; transform-origin: bottom center; }
  @keyframes petBreathe { 0%,100% { transform: translateY(0) scale(var(--pet-scale,1)); } 50% { transform: translateY(-6px) scale(var(--pet-scale,1)); } }
  .pet-jump { animation: petJump .5s ease !important; }
  @keyframes petJump { 0%{transform:translateY(0) scale(var(--pet-scale,1));} 40%{transform:translateY(-28px) scale(var(--pet-scale,1));} 100%{transform:translateY(0) scale(var(--pet-scale,1));} }
  .support-msg { background: #e9f6ee; border: 1px solid #b9e2c9; color: var(--success); border-radius: 12px; padding: 10px 14px; font-size: 13px; margin-top: 10px; display:none; }

  /* Team route */
  .route-wrap { position: relative; padding: 30px 6px 10px; }
  .route-track { height: 8px; background: var(--bg-soft); border-radius: 6px; position: relative; }
  .route-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 6px; transition: width 1s ease; }
  .route-rocket { position: absolute; top: -22px; font-size: 24px; transition: left 1s ease; transform: translateX(-50%); }
  .route-flags { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--navy-soft); }

  /* Toast */
  .toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--navy); color: var(--gold-light);
    padding: 12px 20px; border-radius: 30px; font-size: 14px; font-weight: 600; z-index: 300; opacity: 0; transition: all .3s; pointer-events: none; }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* Planerka checkbox */
  .task-check-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
  .task-checkbox { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--gold); background: #fff; cursor: pointer; flex-shrink: 0; display:flex; align-items:center; justify-content:center; font-size: 14px; }
  .task-checkbox.checked { background: var(--gold); color: #fff; }
  .task-check-label { font-size: 13px; color: var(--navy-soft); }

  /* Status toggle */
  .status-toggle { display: flex; gap: 8px; }
  .status-btn { flex: 1; padding: 10px; border-radius: 10px; border: 1.5px solid var(--border); background: #fff; text-align: center; font-size: 13px; font-weight: 600; color: var(--navy-soft); }
  .status-btn.active-work { border-color: var(--success); background: #e9f6ee; color: var(--success); }
  .status-btn.active-off { border-color: var(--danger); background: var(--alert-bg); color: var(--danger); }

  /* Calendar */
  .cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .cal-daylabel { text-align: center; font-size: 10px; color: var(--navy-soft); padding: 4px 0; }
  .cal-cell { aspect-ratio: 1; border-radius: 10px; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12.5px; position: relative; cursor: pointer; }
  .cal-cell.empty { background: transparent; cursor: default; }
  .cal-cell.my-off { background: var(--gold); color: var(--bg); font-weight: 700; }
  .cal-cell.today:not(.my-off) { background: rgba(192,107,76,0.1); font-weight: 700; }
  .cal-dots { display: flex; gap: 2px; margin-top: 0; flex-wrap: wrap; justify-content: center; max-width: 26px; }
  .cal-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--danger); }
  .cal-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: 11px; color: var(--navy-soft); }
  .cal-legend-item { display: flex; align-items: center; gap: 4px; }
  .cal-legend-dot { width: 8px; height: 8px; border-radius: 50%; }

  /* Materials */
  .material-item { display: block; padding: 12px 14px; background: var(--surface); border-radius: 14px; margin-bottom: 8px; text-decoration: none; color: var(--navy); }
  .material-item:hover { background: #f5ecd8; }
  .material-title { font-family: var(--font-serif); font-weight: 600; font-size: 14px; color: var(--navy); }
  .material-desc { font-size: 12.5px; color: rgba(47,42,36,0.6); margin-top: 2px; }
  .material-type { display: none; }

  .reflection-item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
  .reflection-item:last-child { border-bottom: none; }
  .reflection-date { font-size: 11px; color: var(--navy-soft); }

  /* Правка дизайна: .desktop-sidebar не была скрыта по умолчанию, поэтому на узких экранах
     (телефон, боковая панель браузера) она рендерилась обычным блоком поверх мобильного хедера,
     нижней навигации и карточек быстрых действий — навигация и профиль дублировались 2-3 раза.
     Прячем её по умолчанию и показываем только на десктопе, где она и задумана как сайдбар. */
  .desktop-sidebar { display: none; }

  @media (min-width: 960px) {
    .app { max-width: 1180px; }
    .desktop-shell { display: flex; align-items: flex-start; background: var(--bg-card); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px -14px rgba(47,42,36,0.2); border: 1px solid var(--border); }
    .desktop-sidebar {
      display: flex; flex-direction: column; width: 230px; flex-shrink: 0; min-height: 780px;
      background: linear-gradient(180deg, var(--navy), var(--espresso-deep)); padding: 24px 18px;
    }
    .sidebar-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; color: var(--on-dark); font-family: var(--font-serif); font-size: 16px; font-weight: 600; }
    .sidebar-nav-btn {
      text-align: left; border: none; background: transparent; color: rgba(var(--on-dark-rgb),0.65);
      padding: 11px 14px; border-radius: 12px; font-family: var(--font-sans); font-weight: 700; font-size: 13.5px;
      cursor: pointer; margin-bottom: 6px; display: flex; gap: 10px; align-items: center;
    }
    .sidebar-nav-btn.active { background: rgba(232,179,100,0.12); color: var(--gold-light); }
    .sidebar-nav-btn:hover { background: rgba(232,179,100,0.08); }
    .sidebar-group-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(232,179,100,0.4); font-weight: 700; padding: 0 14px; margin: 4px 0 6px; }
    .sidebar-user { display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid rgba(232,179,100,0.15); }
    .sidebar-user-name { color: var(--on-dark); font-size: 12.5px; font-weight: 700; }
    .sidebar-user-status { color: rgba(var(--on-dark-rgb),0.5); font-size: 11px; }
    .desktop-content { flex: 1; padding: 28px 32px; min-width: 0; }
    .desktop-content .header, .desktop-content #dateLabel, .desktop-content .bottom-nav, .desktop-content .more-sheet { display: none; }

    .desktop-row-3col { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; align-items: start; }
    .desktop-row-3col .grid-pet { grid-column: 1 / 6; grid-row: 1; margin-bottom: 0; }
    .desktop-row-3col .grid-tarot { grid-column: 6 / 9; grid-row: 1; margin-bottom: 0; }
    .desktop-row-3col .grid-plan { grid-column: 9 / 13; grid-row: 1; margin-bottom: 0; }
    .desktop-row-2col { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; align-items: start; }
    .desktop-row-2col .grid-payment { grid-column: 1 / 7; grid-row: 1; margin-bottom: 0; }
    .desktop-row-2col .grid-nominations { grid-column: 1 / 7; grid-row: 1; margin-bottom: 0; }
    /* «Команда»: слева «Красавчики дня» пошире, справа «Номинации недели» — как в макете 23-25.
       Прежние .grid-feed / .desktop-row-team / .grid-team-race удалены вместе с «Лентой»
       и пустой левой колонкой; гонка теперь идёт во всю ширину. */
    .desktop-row-2col .grid-daystars { grid-column: 1 / 8; grid-row: 1; margin-bottom: 0; }
    .desktop-row-2col .grid-noms { grid-column: 8 / 13; grid-row: 1; margin-bottom: 0; }
    .profile-header { grid-column: 1 / -1; }
    .desktop-row-trainer { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
    .desktop-row-trainer.has-selection { grid-template-columns: 300px 1fr; }
    .desktop-row-trainer.has-selection #trainerPicker { max-height: 600px; overflow-y: auto; }
    .desktop-row-trainer.has-selection #trainerScenarioList { grid-template-columns: 1fr !important; }
    #trainerPicker { display: block !important; }
  }

/* ═══ ТЕМА «ЛИСТЫ» — единственная тема панели ═══
   Накладывается поверх базовых стилей выше: переопределяет переменные :root
   и точечно правит существующие компоненты. Прежние четыре темы удалены. ═══ */
:root{
 --font-serif:'Onest',system-ui,sans-serif; --font-sans:'Golos Text',system-ui,sans-serif;
 --font-heading:'Onest',system-ui,sans-serif; --font-body:'Golos Text',system-ui,sans-serif;
 --bg:#08080B; --cream:#08080B; --bg-card:rgba(255,255,255,.05); --bg-soft:rgba(255,255,255,.08);
 --surface:rgba(255,255,255,.05);
 /* Прилипшие шапка и первая колонка — СПЛОШНОЙ цвет, не токен поверхности.
    `--bg-card` и `--surface` в «Листах» это rgba(255,255,255,.05), то есть почти
    прозрачные: при горизонтальной прокрутке цифры таблицы ехали ПОД именем менеджера
    и просвечивали сквозь него (заметила заказчица 18.09.2026). Значение то же, что уже
    стояло у матрицы задач и у воронки, — чтобы прилипшие колонки всюду выглядели одинаково. */
 --sticky-bg:#0E0E12; --sticky-bg-total:#17171D;
 --navy:#FFFFFF; --navy-soft:rgba(255,255,255,.64);
 --ink:#FFFFFF; --ink-soft:rgba(255,255,255,.64);
 --border:rgba(255,255,255,.09); --line:rgba(255,255,255,.09);
 --gold:#FFFFFF; --gold-light:#FFFFFF; --gold2:#FFFFFF;
 --terracotta:#E8547F; --terracotta-deep:#C42A6B; --olive:#5FD18A;
 --espresso:#0C0C10; --espresso-deep:#08080B; --on-dark:#FFFFFF; --on-dark-rgb:255,255,255;
 --gold-tint:rgba(47,107,245,.14); --gold-tint-2:rgba(47,107,245,.22);
 --alert-bg:rgba(232,83,74,.14); --alert-border:rgba(232,83,74,.38);
 --danger:#F79790; --success:#8FE3B0; --radius:24px;
 --rd-text-1:#FFFFFF; --rd-text-2:rgba(255,255,255,.64); --rd-text-3:rgba(255,255,255,.42);
 --rd-danger:#F79790; --rd-danger-bg:rgba(232,83,74,.16);
 --rd-warn:#F0D477;  --rd-warn-bg:rgba(232,193,60,.16);
 --rd-ok:#8FE3B0;    --rd-ok-bg:rgba(95,209,138,.16);
 --rd-neutral:rgba(255,255,255,.64); --rd-neutral-bg:rgba(255,255,255,.08);
 --rd-radius-sm:16px; --rd-radius-lg:24px;
 --rd-shadow-card:0 20px 40px -22px rgba(0,0,0,.8);
 --rd-shadow-pop:0 40px 70px -28px rgba(0,0,0,.85);
 --accent:#2F6BF5;
}
html{background:#08080B;color-scheme:dark}
body{background:transparent!important;color:var(--ink)}
html::before{content:'';position:fixed;inset:-18%;z-index:-2;pointer-events:none;
 background:radial-gradient(38% 30% at 30% 8%,rgba(112,52,232,.78),transparent 62%),
  radial-gradient(30% 26% at 84% 10%,rgba(206,44,120,.55),transparent 70%),
  radial-gradient(28% 24% at 10% 34%,rgba(28,104,232,.5),transparent 70%);
 animation:shDrift 30s ease-in-out infinite alternate}
html::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
 background-image:radial-gradient(circle,rgba(255,255,255,.09) .8px,transparent .8px);background-size:13px 13px;
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 26%,#000);
 mask-image:linear-gradient(to bottom,transparent,#000 26%,#000)}
@keyframes shDrift{to{transform:translate3d(-6%,5%,0) scale(1.12)}}

h1,h2,h3,h4{font-family:var(--font-heading)!important;letter-spacing:-.01em}
body,button,input,select,textarea,table{font-family:var(--font-body)}
td,.money,.race-pct,.kpi-hero{font-variant-numeric:tabular-nums}

.card,.modal{background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.035))!important;
 border:1px solid var(--line)!important;border-radius:24px!important;
 box-shadow:var(--rd-shadow-card),inset 0 1px 0 rgba(255,255,255,.16)!important;
 -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
.card-dark{background:linear-gradient(165deg,rgba(196,42,107,.7),rgba(104,24,94,.78))!important;
 border:1px solid rgba(255,255,255,.14)!important}

.btn{background:rgba(255,255,255,.08)!important;border:1px solid var(--line)!important;color:var(--ink)!important;
 border-radius:999px!important;padding:11px 18px!important;font-weight:500!important;
 transition:background 130ms ease,transform 130ms cubic-bezier(.22,.61,.36,1)}
.btn:hover{background:rgba(255,255,255,.15)!important}
.btn:active{transform:scale(.96)}
/* ══════════ БЕЛОЕ НА БЕЛОМ ══════════
   В прежней теме `--navy` был тёмно-коричневый, а `--gold-light` — золотой, и пара
   «background:var(--navy); color:var(--gold-light)» читалась отлично. В «Листах» ОБЕ
   переменные белые, поэтому каждое такое правило давало белый текст на белом фоне.
   Так уже ловили `.logo-badge` 13.09.2026; 14.09.2026 заказчица нашла то же самое
   у всплывающих сообщений и кнопок подтверждения. Здесь вылечены все оставшиеся.
   ПРАВИЛО: не писать цвет через `--navy` / `--gold*` — они белые. */

/* всплывающее сообщение — тёмная стеклянная плашка, не белая */
.toast{background:rgba(20,20,24,.94)!important; color:#fff!important;
 border:1px solid rgba(255,255,255,.12); -webkit-backdrop-filter:blur(14px);
 backdrop-filter:blur(14px); box-shadow:0 18px 36px -18px rgba(0,0,0,.8)}
/* подтверждение суммы на клавиатуре оплаты — главное действие, белая пилюля */
.numpad-confirm{background:#fff!important; color:#101014!important}
/* активная вкладка сегментов и мелкие бейджи */
.tab.active{background:#fff!important; color:#101014!important; border-color:#fff!important}
.tarot-badge,.badge-gold{background:rgba(255,255,255,.12)!important; color:#fff!important}
.admin-fab{background:#fff!important; color:#101014!important}
.chat-bubble.mop{background:rgba(47,107,245,.22)!important; color:#fff!important}

.btn-gold,.btn.primary{background:#FFFFFF!important;color:#101014!important;border:0!important;font-weight:600!important;
 box-shadow:0 16px 30px -16px rgba(0,0,0,.85)!important}
.btn-gold:hover{filter:brightness(.94)}

.sidebar-nav-btn{color:rgba(255,255,255,.72)!important;border-radius:14px!important;
 transition:background 130ms ease,color 130ms ease}
.sidebar-nav-btn:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
.sidebar-nav-btn.active{background:rgba(47,107,245,.9)!important;color:#fff!important}
.sidebar-group-label{color:rgba(255,255,255,.38)!important;letter-spacing:.08em}
.logo-badge{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.3)!important;
 color:#fff!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

.hint{color:var(--rd-text-3)!important}
.list-item{border-bottom:1px solid rgba(255,255,255,.07)!important}
.badge{border-radius:999px!important;font-family:var(--font-heading)!important}
.badge-gold{background:rgba(255,255,255,.14)!important;color:#fff!important}
.segment-tab{border-radius:999px!important;color:var(--rd-text-2)!important;font-family:var(--font-body)!important}
.segment-tab.active{background:rgba(255,255,255,.12)!important;color:#fff!important}
.segment-tabs{background:rgba(255,255,255,.05)!important;border:1px solid var(--line)!important;border-radius:999px!important}
.progress-track{background:rgba(255,255,255,.1)!important}
.progress-fill,.ring-fill{filter:saturate(1.15)}
.accordion{border:1px solid var(--line)!important;border-radius:20px!important;
 background:rgba(255,255,255,.04)!important}
.accordion-header{color:var(--ink)!important}
.modal-overlay{background:rgba(4,4,8,.66)!important;backdrop-filter:blur(3px)}
.tile-button:not(.lf-sheet){border-radius:20px!important;background:rgba(255,255,255,.06)!important;
 border:1px solid var(--line)!important;transition:transform 160ms cubic-bezier(.22,.61,.36,1),background 160ms ease}
.tile-button:not(.lf-sheet):hover{transform:translateY(-3px);background:rgba(255,255,255,.11)!important}
.alert-item{background:var(--rd-danger-bg)!important;border:1px solid rgba(232,83,74,.32)!important;border-radius:16px!important}
.avatar{border-color:var(--line)!important}
input,select,textarea{background:rgba(0,0,0,.32)!important;border:1px solid var(--line)!important;
 color:var(--ink)!important;border-radius:14px!important;color-scheme:dark}
input:focus,select:focus,textarea:focus{outline:0;border-color:rgba(47,107,245,.6)!important;background:rgba(0,0,0,.45)!important}
::placeholder{color:rgba(255,255,255,.3)}
table th{color:var(--rd-text-3)!important;border-color:var(--line)!important}
table td{border-color:rgba(255,255,255,.06)!important}
tbody tr{transition:background 130ms ease}
tbody tr:hover{background:rgba(255,255,255,.035)!important}

/* ══════ АДМИН-ПАНЕЛЬ (макет 08-adminka.html) ══════ */
.adm-wrap{display:grid; grid-template-columns:236px 1fr; gap:20px; margin-top:18px; align-items:start}
@media (max-width:980px){ .adm-wrap{grid-template-columns:1fr} }
.adm-subnav{display:flex; flex-direction:column; gap:4px; position:sticky; top:18px}
@media (max-width:980px){ .adm-subnav{position:static; flex-direction:row; overflow-x:auto;
 scrollbar-width:none} }
.adm-subnav button{display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:14px;
 border:1px solid transparent; background:transparent; color:var(--rd-text-2); font-family:inherit;
 font-size:14px; cursor:pointer; text-align:left; white-space:nowrap}
.adm-subnav button:hover{color:#fff; background:rgba(255,255,255,.05)}
.adm-subnav button[aria-current]{background:rgba(255,255,255,.09); color:#fff; font-weight:500;
 border-color:var(--line)}
.adm-subnav u{width:26px; height:26px; border-radius:9px; background:rgba(255,255,255,.075);
 display:grid; place-items:center; font-size:12px; text-decoration:none; flex:none}
.adm-pane{display:none}
.adm-pane.on{display:block}
.adm-proj{margin-left:auto}

/* ══════ ВХОД (макет 27-vhod-final.html) ══════
   Форма по центру, за ней веер из трёх листов, фон — дрейфующие пятна.
   Свой фон у экрана входа: он живёт отдельно от фона кабинета. */
.lg-page{position:relative; z-index:1; min-height:100vh; display:grid; place-items:center;
 padding:40px 20px; overflow:hidden}
.lg-bg{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.lg-bg span{position:absolute; border-radius:50%; filter:blur(95px); display:block}
.lg-bg .b1{width:70vw; height:64vh; left:4%; top:-22%; background:rgba(112,52,232,.72);
 animation:lgD1 27s ease-in-out infinite alternate}
.lg-bg .b2{width:54vw; height:52vh; right:-8%; top:-10%; background:rgba(206,44,120,.5);
 animation:lgD2 33s ease-in-out infinite alternate}
.lg-bg .b3{width:56vw; height:52vh; left:-12%; bottom:-24%; background:rgba(28,104,232,.5);
 animation:lgD3 30s ease-in-out infinite alternate}
@keyframes lgD1{to{transform:translate3d(-14%,10%,0) scale(1.2)}}
@keyframes lgD2{to{transform:translate3d(-18%,18%,0) scale(.9)}}
@keyframes lgD3{to{transform:translate3d(22%,-12%,0) scale(1.16)}}
.lg-bg .veil{position:absolute; inset:0; display:block;
 background:radial-gradient(120% 90% at 50% 50%,rgba(8,8,11,.2),rgba(8,8,11,.82))}
.lg-bg .dots{position:absolute; inset:0; display:block; opacity:.45;
 background-image:radial-gradient(circle,rgba(255,255,255,.09) .8px,transparent .8px);
 background-size:13px 13px}

.lg-stack{position:relative; z-index:1; width:min(430px,92vw)}
/* веер листов за формой — те же цвета, что закреплены за разделами */
.lg-fan{position:absolute; inset:0; z-index:0; pointer-events:none}
.lg-fan i{position:absolute; left:50%; top:16px; width:270px; height:330px; border-radius:26px;
 display:block; transform-origin:50% 100%; box-shadow:0 26px 50px -26px rgba(0,0,0,.9);
 border:1px solid rgba(255,255,255,.14)}
.lg-fan i:nth-child(1){background:linear-gradient(165deg,rgba(196,42,107,.85),rgba(104,24,94,.9));
 transform:translateX(-50%) rotate(-13deg) translateY(-8px); animation:lgFan1 9s ease-in-out infinite}
.lg-fan i:nth-child(2){background:linear-gradient(168deg,rgba(31,80,62,.85),rgba(10,26,22,.9));
 transform:translateX(-50%); animation:lgFan2 9s ease-in-out infinite}
.lg-fan i:nth-child(3){background:linear-gradient(170deg,rgba(26,107,232,.85),rgba(142,146,222,.8));
 transform:translateX(-50%) rotate(13deg) translateY(-8px); animation:lgFan3 9s ease-in-out infinite}
@keyframes lgFan1{0%,100%{transform:translateX(-50%) rotate(-13deg) translateY(-8px)}
 50%{transform:translateX(-50%) rotate(-16deg) translateY(-16px)}}
@keyframes lgFan2{0%,100%{transform:translateX(-50%) rotate(0deg)}
 50%{transform:translateX(-50%) rotate(0deg) translateY(-8px)}}
@keyframes lgFan3{0%,100%{transform:translateX(-50%) rotate(13deg) translateY(-8px)}
 50%{transform:translateX(-50%) rotate(16deg) translateY(-16px)}}

.lg-brand{display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:16px;
 position:relative; z-index:2; font-family:var(--font-heading); font-size:19px; font-weight:600}
.lg-brand .mark{width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
 background:rgba(255,255,255,.1); display:grid; place-items:center; font-size:12px; letter-spacing:.02em}

.lg-form{position:relative; z-index:1; margin-top:104px; border:1px solid var(--line);
 background:rgba(16,16,22,.66); -webkit-backdrop-filter:blur(26px) saturate(150%);
 backdrop-filter:blur(26px) saturate(150%); border-radius:28px; padding:28px;
 box-shadow:0 30px 60px -26px rgba(0,0,0,.9);
 /* без fill-mode: с ним форма до старта анимации держит нулевой кадр и,
    если анимация не пошла, остаётся невидимой вместе со всем входом */
 animation:lgUp 620ms cubic-bezier(.22,.61,.36,1)}
/* Экран входа — единственный, без которого в панель не попасть, поэтому его
   появление не трогает прозрачность: даже если кадр не придёт, форма видна. */
@keyframes lgUp{from{transform:translateY(22px)} to{transform:none}}
/* светящаяся кромка: 1.2px, толще делать нельзя — станет рамкой */
.lg-form::before{content:''; position:absolute; inset:0; border-radius:inherit; padding:1.2px;
 pointer-events:none;
 background:linear-gradient(150deg,rgba(255,255,255,.75),rgba(255,255,255,.16) 26%,
  rgba(255,255,255,.04) 52%,rgba(255,255,255,.34));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor; mask-composite:exclude}
.lg-head{text-align:center}
.lg-form h2{font-family:var(--font-heading); font-size:24px; font-weight:600; letter-spacing:-.01em;
 margin:0}
.lg-form .s{font-size:13.5px; color:var(--rd-text-3); margin-top:7px; line-height:1.5}

.lg-pane{display:none}
.lg-pane.on{display:block; animation:lgFade 260ms cubic-bezier(.22,.61,.36,1)}
@keyframes lgFade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.lg-fld{margin-bottom:14px}
.lg-form label{display:block; font-size:12.5px; color:var(--rd-text-3); margin-bottom:7px}
.lg-form input,.lg-form select{width:100%; background:rgba(0,0,0,.38)!important;
 border:1px solid var(--line)!important; border-radius:15px; padding:14px 16px; color:#fff!important;
 font-family:inherit; font-size:15px; outline:0;
 transition:all 140ms cubic-bezier(.22,.61,.36,1)}
.lg-form input:focus,.lg-form select:focus{border-color:rgba(47,107,245,.65)!important;
 background:rgba(0,0,0,.5)!important}
.lg-form input::placeholder{color:rgba(255,255,255,.26)}
.lg-pw{position:relative}
.lg-pw button{position:absolute; right:7px; top:7px; width:38px; height:38px; border-radius:50%;
 border:0; background:transparent; color:var(--rd-text-3); font-size:14px; cursor:pointer;
 font-family:inherit}
.lg-pw button:hover{color:#fff}
.lg-between{display:flex; align-items:center; gap:12px; margin:4px 0 18px}
/* специфичность важна: общее .lg-form label ставит display:block и отступ снизу,
   из-за чего галочка уезжала на строку выше текста */
.lg-form label.lg-rem{display:flex; align-items:center; gap:10px; font-size:13px;
 color:var(--rd-text-2); cursor:pointer; margin:0}
.lg-rem input{display:none}
.lg-rem .box{width:18px; height:18px; border-radius:6px; border:1.4px solid rgba(255,255,255,.3);
 display:grid; place-items:center; font-size:10px; color:transparent; flex:none}
.lg-rem input:checked + .box{background:var(--accent,#2F6BF5); border-color:var(--accent,#2F6BF5);
 color:#fff}
.lg-between a{margin-left:auto; font-size:13px; color:var(--rd-text-3); text-decoration:none;
 cursor:pointer}
.lg-between a:hover{color:#fff}

.lg-go{width:100%; padding:16px; border-radius:17px; border:0; background:#fff; color:#111;
 font-family:inherit; font-size:15.5px; font-weight:600; cursor:pointer;
 box-shadow:0 18px 34px -18px rgba(0,0,0,.9);
 transition:transform 140ms cubic-bezier(.22,.61,.36,1), filter 140ms ease}
.lg-go:hover{transform:translateY(-2px); filter:brightness(.96)}
.lg-go:active{transform:scale(.98)}

.lg-foot{text-align:center; font-size:11.5px; color:var(--rd-text-3); margin-top:16px; line-height:1.55}
/* Служебные входы. В макете их нет, но без них администратору не войти,
   а проект не сменить, поэтому оставлены тихими ссылками. */
/* Название проекта в подписи входа: проектов больше одного, и знать, куда заходишь, важно */
.lg-proj{font-size:12px; color:var(--rd-text-3)}
.lg-proj b{color:var(--rd-text-2); font-weight:500}
.lg-links{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:12px; align-items:center}
.lg-links button{background:none; border:0; padding:0; font-family:inherit; font-size:12px;
 color:var(--rd-text-3); text-decoration:underline; cursor:pointer}
.lg-links button:hover{color:#fff}

@media (max-width:900px){
 .lg-form{margin-top:92px}
 .lg-fan i{width:220px; height:280px}
}

/* ══════ КОМАНДА · ПОТЕНЦИАЛЫ КОМАНДЫ · СТАТИСТИКА (макет 23-25) ══════ */
/* герой-карточка цели команды */
.tm-hero{position:relative; margin-top:28px}
.tm-hero .hglow{position:absolute; inset:-14px -18px -26px; border-radius:46px; filter:blur(48px);
 opacity:.72; pointer-events:none;
 background:linear-gradient(110deg,rgba(200,46,112,.9),rgba(140,60,220,.85) 48%,rgba(26,107,232,.9));
 animation:heroPulse 6s ease-in-out infinite}
@keyframes heroPulse{0%,100%{opacity:.62; transform:scale(.985)} 50%{opacity:.86; transform:scale(1.015)}}
.tm-hero .hcard{position:relative; border-radius:30px; padding:28px 32px; overflow:hidden;
 background:radial-gradient(70% 120% at 12% 0%,rgba(255,255,255,.2),transparent 60%),
  linear-gradient(110deg,rgba(196,42,107,.92),rgba(126,54,202,.88) 48%,rgba(26,107,232,.92));
 box-shadow:0 26px 50px -24px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.34);
 transition:transform 340ms cubic-bezier(.22,.61,.36,1), box-shadow 340ms ease}
.tm-hero .hcard .sheen{position:absolute; inset:0; border-radius:inherit; pointer-events:none;
 opacity:0; transition:opacity 280ms ease;
 background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),
  rgba(255,255,255,.22),rgba(255,255,255,.06) 40%,transparent 64%)}
.tm-hero:hover .hcard .sheen{opacity:1}
.tm-hero:hover .hcard{transform:translateY(-4px);
 box-shadow:0 36px 64px -26px rgba(0,0,0,.88), inset 0 1px 0 rgba(255,255,255,.4)}
.tm-hero .hcard::before{content:''; position:absolute; inset:0; border-radius:inherit; padding:1.2px;
 pointer-events:none;
 background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,255,255,.3) 24%,rgba(255,255,255,.08) 48%,rgba(255,255,255,.5));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
         mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor; mask-composite:exclude}
.tm-hero .htop{display:flex; align-items:flex-start; gap:24px; flex-wrap:wrap; position:relative; z-index:1}
.tm-hero .lbl{font-size:14px; color:rgba(255,255,255,.78)}
.tm-hero .big{display:flex; align-items:baseline; gap:12px; margin-top:10px; flex-wrap:wrap}
.tm-hero .big .num-dot{font-size:62px; background-size:7px 7px}
.tm-hero .big > span:not(.num-dot){font-size:20px; color:rgba(255,255,255,.8)}
.tm-hero .side{margin-left:auto; display:flex; gap:34px; text-align:right; flex-wrap:wrap}
.tm-hero .side .v{font-family:var(--font-heading); font-size:34px; font-weight:600; line-height:1;
 font-variant-numeric:tabular-nums}
.tm-hero .side .k{font-size:12.5px; color:rgba(255,255,255,.75); margin-top:6px}
.tm-hero .track{position:relative; height:12px; border-radius:7px; background:rgba(0,0,0,.32);
 margin-top:26px; z-index:1; box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.tm-hero .track i{position:absolute; left:0; top:0; bottom:0; border-radius:7px; display:block;
 background:linear-gradient(90deg,rgba(255,255,255,.88),#fff);
 box-shadow:0 0 26px rgba(255,255,255,.6), 0 0 6px rgba(255,255,255,.9);
 transition:width 1300ms cubic-bezier(.22,.61,.36,1) 300ms}
.tm-hero .track .knob{position:absolute; top:50%; transform:translate(-50%,-50%); z-index:2;
 background:#fff; color:#1A1030; font-family:var(--font-heading); font-size:12.5px; font-weight:600;
 padding:5px 11px; border-radius:999px; box-shadow:0 6px 18px -6px rgba(0,0,0,.7);
 transition:left 1300ms cubic-bezier(.22,.61,.36,1) 300ms; white-space:nowrap}
.tm-hero .ticks{display:flex; justify-content:space-between; margin-top:10px; font-size:12.5px;
 color:rgba(255,255,255,.72); z-index:1; position:relative; gap:12px}

/* гонка: карточки групп и строки людей */
.tm-groups{display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:16px 20px 4px}
@media (max-width:820px){ .tm-groups{grid-template-columns:1fr} }
.gcard{border-radius:20px; padding:16px 18px; position:relative; overflow:hidden;
 transition:transform 280ms cubic-bezier(.22,.61,.36,1), filter 280ms ease}
.gcard:hover{transform:translateY(-4px); filter:brightness(1.12)}
.gcard.g-a{background:linear-gradient(160deg,rgba(47,107,245,.28),rgba(20,30,60,.4))}
.gcard.g-b{background:linear-gradient(160deg,rgba(232,84,127,.26),rgba(60,20,40,.4))}
.gcard .gn{font-size:13.5px; color:var(--rd-text-2)}
.gcard .gv{font-family:var(--font-heading); font-size:28px; font-weight:600; margin-top:6px;
 font-variant-numeric:tabular-nums}
.gcard .gs{font-size:12.5px; color:var(--rd-text-3); margin-top:4px}
.gcard .gt{height:5px; border-radius:3px; background:rgba(255,255,255,.14); margin-top:12px;
 position:relative}
.gcard .gt i{position:absolute; left:0; top:0; bottom:0; border-radius:3px; display:block;
 transition:width 900ms cubic-bezier(.22,.61,.36,1)}
.rrow{display:flex; align-items:center; gap:14px; padding:14px 20px; border-top:1px solid var(--line);
 transition:background 160ms ease, transform 200ms cubic-bezier(.22,.61,.36,1)}
.rrow:hover{background:rgba(255,255,255,.055); transform:translateX(3px)}
.rrow:hover .av{transform:scale(1.1)}
.rrow .pos{width:30px; font-family:var(--font-heading); font-size:16px; color:var(--rd-text-3);
 text-align:center; flex:none}
.rrow .pos.m1{color:#F5C542} .rrow .pos.m2{color:#D8DCE4} .rrow .pos.m3{color:#D79B6B}
.rrow .av{transition:transform 220ms cubic-bezier(.22,.61,.36,1);
 width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.075);
 display:grid; place-items:center; font-size:13px; font-weight:500; flex:none}
.rrow .who2{width:150px; min-width:110px}
.rrow .who2 .g{font-size:12px; color:var(--rd-text-3); margin-top:2px}
.rrow .tr{flex:1; height:8px; border-radius:5px; background:rgba(255,255,255,.09); position:relative;
 min-width:80px}
.rrow .tr i{position:absolute; left:0; top:0; bottom:0; border-radius:5px; display:block;
 transition:width 900ms cubic-bezier(.22,.61,.36,1)}
.rrow .pc2{width:56px; text-align:right; font-family:var(--font-heading); font-size:16px;
 font-weight:600; font-variant-numeric:tabular-nums}
.rrow .sum2{width:110px; text-align:right; font-size:14px; color:var(--rd-text-2);
 font-variant-numeric:tabular-nums}
.rrow.me{background:rgba(255,255,255,.05)}
@media (max-width:820px){ .rrow .sum2{display:none} .rrow .who2{width:auto} }

/* номинации и красавчики */
.nom{display:flex; align-items:center; gap:12px; padding:12px 0;
 border-bottom:1px solid rgba(255,255,255,.1)}
.nom:last-child{border-bottom:0}
.nom .ic{width:32px; height:32px; border-radius:11px; background:rgba(255,255,255,.14);
 display:grid; place-items:center; font-size:14px; flex:none}
.nom .t{font-size:14px}
.nom .s{font-size:12px; color:rgba(255,255,255,.55); margin-top:2px}
.nom .val{margin-left:auto; font-family:var(--font-heading); font-size:15px; font-weight:600;
 font-variant-numeric:tabular-nums}

/* таблицы статистики — числа вправо */
.num-r td:not(:first-child), .num-r th:not(:first-child){text-align:right}

/* ══════ ГРАФИК (макет 09-grafik.html) ══════ */
.sd-roleseg{display:inline-flex; gap:4px; background:var(--surface); border:1px solid var(--line);
 border-radius:999px; padding:4px; margin-top:14px}
.sd-roleseg button{border:0; background:transparent; font-family:inherit; font-size:14px;
 color:var(--rd-text-2); padding:9px 17px; border-radius:999px; cursor:pointer; white-space:nowrap}
.sd-roleseg button[aria-current]{background:rgba(255,255,255,.075); color:#fff; font-weight:500}
.sd-month{margin-left:auto; display:flex; align-items:center; gap:12px}
.sd-month .name{font-family:var(--font-heading); font-size:17px; font-weight:500; min-width:160px;
 text-align:center}
.sd-month .nav{width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
 background:rgba(255,255,255,.075); color:var(--rd-text-2); font-size:16px; cursor:pointer;
 font-family:inherit}
.sd-month .nav:hover{color:#fff}
.sd-card{margin-top:18px; border:1px solid var(--line); border-radius:24px; background:var(--surface);
 overflow:hidden}
.sd-head{display:flex; align-items:flex-start; gap:16px; padding:20px 22px 14px; flex-wrap:wrap}
.sd-head h2{font-family:var(--font-heading); font-size:16px; font-weight:500; margin:0}
.sd-legend{margin-left:auto; display:flex; gap:16px; font-size:12.5px; color:var(--rd-text-3);
 flex-wrap:wrap; align-items:center}
.sd-legend i{display:inline-grid; place-items:center; width:16px; height:16px; border-radius:5px;
 margin-right:7px; vertical-align:middle; font-size:9px; font-style:normal}
.l-w{background:rgba(255,255,255,.1)}
.l-o{background:rgba(232,83,74,.35)}
.l-c{background:rgba(47,107,245,.4); color:#fff}
.l-e{background:rgba(232,193,60,.4); color:#111}
/* Неделя в поле зрения, остальные дни — прокруткой (14.09.2026).
   Ширина колонки дня считается от ВИДИМОЙ ширины скроллера через `cqw`,
   поэтому семь колонок ровно заполняют экран при любой его ширине.
   `width:max-content` у таблицы обязателен: с прежним `width:100%`
   месяц сжимался в экран и клетки становились по 26px. */
.sd-scroll{overflow-x:auto; container-type:inline-size; scroll-behavior:smooth;
 overscroll-behavior-x:contain}
/* table-layout:fixed обязателен: при `auto` браузер считает ширины по содержимому
   и наши `width` остаются лишь пожеланием — колонки расползались до 119px вместо 84.
   Ширина таблицы задаётся явно, число дней месяца приходит из JS (`--sd-days`). */
.sd-grid{border-collapse:collapse; font-size:13px; table-layout:fixed; min-width:100%;
 --sd-who:210px; --sd-day:max(84px, calc((100cqw - var(--sd-who)) / 7));
 width:calc(var(--sd-who) + var(--sd-day) * var(--sd-days, 31))}
.sd-grid th{font-weight:400; color:var(--rd-text-3); font-size:13px; padding:10px 4px 12px;
 text-align:center; white-space:nowrap; width:var(--sd-day)}
.sd-grid th.who{text-align:left; padding-left:22px; width:var(--sd-who); min-width:var(--sd-who);
 position:sticky; left:0; background:var(--sticky-bg); z-index:1; font-size:11.5px}
.sd-grid td.who{padding:8px 10px 8px 22px; white-space:nowrap; position:sticky; left:0;
 background:var(--sticky-bg); z-index:1; width:var(--sd-who); min-width:var(--sd-who)}
/* при фиксированной раскладке длинное имя вылезло бы на соседнюю колонку */
.sd-grid td.who .kb-mgr{max-width:100%}
.sd-grid td.who .kb-mgr > div{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sd-grid td{padding:5px 4px; text-align:center; width:var(--sd-day)}
/* выходные подкрашены полосой: на неделе из семи колонок это единственный ориентир,
   где кончается одна неделя и начинается другая */
.sd-grid th.we, .sd-grid td.we{background:rgba(255,255,255,.022)}
.sd-grid th.we{color:rgba(255,255,255,.5)}
/* плитка занимает всю колонку: квадрат в 66px посреди 167px колонки читался
   как россыпь точек, а не как сетка смен */
.sd-cell{width:100%; height:58px; border-radius:16px; background:rgba(255,255,255,.07);
 display:grid; place-items:center; font-size:12.5px; cursor:pointer; border:0; overflow:hidden;
 font-family:inherit; color:var(--rd-text-3); position:relative; letter-spacing:.01em;
 transition:background .16s cubic-bezier(.22,.61,.36,1), transform .16s cubic-bezier(.22,.61,.36,1)}
.sd-cell:hover{background:rgba(255,255,255,.16); color:#fff; transform:translateY(-2px)}
.sd-cell:active{transform:translateY(0) scale(.96)}
.sd-cell.off{background:rgba(232,83,74,.35); color:#fff}
.sd-cell.today{box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.sd-cell.locked{cursor:default; opacity:.75}
.sd-cell.locked:hover{transform:none}
/* метки внутри плитки, а не поверх её края: плитки теперь стоят вплотную */
.sd-cell b{position:absolute; top:6px; right:7px; min-width:20px; height:20px; padding:0 6px;
 border-radius:999px; background:var(--accent); color:#fff; font-size:11px; display:grid;
 place-items:center; font-weight:500}
.sd-cell u{position:absolute; bottom:6px; left:7px; width:19px; height:19px; border-radius:7px;
 background:var(--rd-warn); color:#111; font-size:11px; display:grid; place-items:center;
 text-decoration:none}
.sd-gap{color:var(--rd-danger); font-size:13px}
.sd-grid tr:last-child td{font-size:13px}
/* на узких экранах неделя целиком не влезает при читаемой плитке —
   уменьшаем не клетку, а число дней в кадре: пять, затем три */
@media (max-width:900px){ .sd-grid{--sd-who:150px; --sd-day:max(64px, calc((100cqw - var(--sd-who)) / 5))} }
@media (max-width:560px){
  .sd-grid{--sd-who:116px; --sd-day:max(58px, calc((100cqw - var(--sd-who)) / 3))}
  .sd-grid th.who{padding-left:14px}
  .sd-grid td.who{padding-left:14px}
}
.sd-foot{display:flex; align-items:center; gap:16px; padding:14px 22px 20px;
 border-top:1px solid var(--line); flex-wrap:wrap}
.sd-foot .note{flex:1; min-width:240px; font-size:12.5px; color:var(--rd-text-3); line-height:1.5}

/* ══════ РАЗДЕЛЫ: СОЗВОНЫ, МАТЕРИАЛЫ, РАЗБОРЫ, ВОЗРАЖЕНИЯ, AI (макет 10-15-razdely.html) ══════ */
.gA{background:linear-gradient(160deg,#1A1A1E,#0C0C0F)}
.gA::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 50% at 70% 30%,rgba(255,255,255,.14),transparent 70%)}
.gB{background:linear-gradient(160deg,#1A6BE8,#5A6CD8 70%,#8E92DE)}
.gB::after{content:'';position:absolute;inset:0;background:radial-gradient(55% 40% at 30% 70%,rgba(8,40,120,.45),transparent 70%)}
.gC{background:linear-gradient(160deg,#C42A6B,#7A1A5C)}
.gC::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 45% at 25% 75%,rgba(255,255,255,.18),transparent 70%)}
.gD{background:linear-gradient(160deg,#173B2E,#0B1A16)}
.gD::after{content:'';position:absolute;inset:0;background:radial-gradient(55% 40% at 70% 25%,rgba(95,209,138,.28),transparent 70%)}
.gE{background:linear-gradient(160deg,#3F2079,#140828)}
.gE::after{content:'';position:absolute;inset:0;background:radial-gradient(58% 40% at 68% 22%,rgba(140,100,255,.32),transparent 70%)}
.gF{background:linear-gradient(160deg,#5E1722,#1E060B)}
.gF::after{content:'';position:absolute;inset:0;background:radial-gradient(58% 40% at 70% 24%,rgba(232,83,74,.3),transparent 70%)}
.gG{background:linear-gradient(160deg,#3A2410,#160C05)}
.gG::after{content:'';position:absolute;inset:0;background:radial-gradient(55% 40% at 28% 72%,rgba(232,193,60,.28),transparent 70%)}

.c-blue{background:rgba(47,107,245,.16); color:#9FBBFF}
.c-yel{background:rgba(232,193,60,.16); color:#F0D477}
.c-red{background:rgba(232,83,74,.16); color:#F79790}
.c-grn{background:rgba(95,209,138,.16); color:#8FE3B0}
.c-pnk{background:rgba(232,84,127,.16); color:#F79BB6}
.c-vio{background:rgba(140,100,255,.18); color:#C9B6FF}

.sc-block{margin-top:18px; border:1px solid var(--line); border-radius:24px; background:var(--surface);
 overflow:hidden}
/* созвоны */
.sc-day{display:flex; align-items:center; gap:13px; padding:18px 22px 8px; font-size:13px;
 color:var(--rd-text-3)}
.sc-day b{color:#fff; font-size:15px; font-weight:500}
.sc-day i{flex:1; height:1px; background:var(--line); display:block; font-style:normal}
.sc-call{display:flex; align-items:center; gap:15px; padding:15px 22px;
 border-bottom:1px solid rgba(255,255,255,.05); width:100%; text-align:left; background:transparent;
 border-left:0; border-right:0; border-top:0; font-family:inherit; color:#fff}
.sc-call:last-child{border-bottom:0}
.sc-call .tm{width:58px; flex:none; font-size:15px; font-variant-numeric:tabular-nums}
.sc-call .ic{width:38px; height:38px; border-radius:13px; display:grid; place-items:center;
 font-size:15px; flex:none}
.sc-call .t{font-size:14.5px}
.sc-call .s{font-size:12.5px; color:var(--rd-text-3); margin-top:3px}
.sc-call .right{margin-left:auto; display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.sc-call.past{opacity:.55}
.sc-zoom{display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:999px;
 border:0; background:#fff; color:#111; font-family:inherit; font-size:13.5px; font-weight:500;
 cursor:pointer; text-decoration:none; white-space:nowrap}
.sc-zoom:hover{filter:brightness(.93)}
.sc-zoom u{width:18px; height:18px; border-radius:5px; background:#2D8CFF; color:#fff; display:grid;
 place-items:center; font-size:9px; text-decoration:none}

/* материалы */
.sc-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:14px;
 margin-top:18px}
.sc-tile{border-radius:22px; border:1px solid var(--line); background:var(--surface); padding:18px 20px;
 text-align:left; font-family:inherit; color:#fff; cursor:pointer; display:flex; flex-direction:column;
 gap:12px; text-decoration:none; min-height:182px; position:relative}
.sc-tile:hover{background:rgba(255,255,255,.075); border-color:rgba(255,255,255,.16)}
.sc-tile .ic{width:40px; height:40px; border-radius:13px; display:grid; place-items:center; font-size:16px}
.sc-tile .t{font-size:15.5px; line-height:1.35}
.sc-tile .meta{margin-top:auto; display:flex; align-items:center; gap:9px; font-size:12px;
 color:var(--rd-text-3); flex-wrap:wrap}
.sc-tile .ext{position:absolute; top:18px; right:18px; width:28px; height:28px; border-radius:50%;
 border:1px solid var(--line); display:grid; place-items:center; font-size:12px; color:var(--rd-text-3)}
.sc-tile:hover .ext{color:#fff; background:rgba(255,255,255,.075)}

/* разборы и диалог ИИ */
.sc-rev{display:flex; gap:15px; padding:18px 22px; border-bottom:1px solid rgba(255,255,255,.05)}
.sc-rev:last-child{border-bottom:0}
.sc-rev .av{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.075);
 display:grid; place-items:center; font-size:13px; font-weight:500; flex:none}
.sc-rev .top{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap}
.sc-rev .nm{font-size:15px}
.sc-rev .dt{font-size:12.5px; color:var(--rd-text-3)}
.sc-rev .score{margin-left:auto; font-size:15px; font-weight:500; font-variant-numeric:tabular-nums}
.sc-rev p{font-size:13.5px; color:var(--rd-text-2); line-height:1.55; margin-top:9px}
.sc-rev .tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:11px}
.sc-rev .row{display:flex; gap:9px; margin-top:13px; flex-wrap:wrap}
.sc-rev .row button{padding:8px 15px; border-radius:999px; border:1px solid var(--line);
 background:rgba(255,255,255,.075); color:var(--rd-text-2); font-family:inherit; font-size:13px;
 cursor:pointer}
.sc-rev .row button.pri{background:#fff; color:#111; border-color:#fff; font-weight:500}

/* банк возражений */
.sc-objs{display:flex; flex-direction:column; gap:12px; margin-top:18px}
.sc-obj{border:1px solid var(--line); border-radius:20px; background:var(--surface); padding:18px 20px;
 cursor:pointer}
.sc-obj:hover{background:rgba(255,255,255,.055)}
.sc-obj .q{font-size:15px; line-height:1.4}
.sc-obj .a{font-size:13.5px; color:var(--rd-text-2); line-height:1.55; margin-top:9px}
.sc-obj .foot{display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap;
 font-size:12.5px; color:var(--rd-text-3)}

/* ══════ ОТЧЁТЫ (макет 05-otchety.html) ══════ */
.rp-sync{margin-left:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.rp-sync .when{text-align:right; font-size:12.5px; color:var(--rd-text-3); line-height:1.5}
.rp-sync .when b{display:block; color:#fff; font-size:14px; font-weight:400}
.rp-sync button{height:44px; padding:0 20px; border-radius:999px; border:1px solid var(--line);
 background:var(--surface); color:var(--rd-text-2); font-family:inherit; font-size:14px; cursor:pointer}
.rp-sync button:hover{color:#fff}
/* ══════ ПРОГНОЗ ФИНИША ЗАПУСКА (строка на кабинете) ══════
   Три состояния: опережаем, в графике, отстаём. Красного нет намеренно —
   это прогноз, а не приговор, и дни ещё есть. */
.kb-fc{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:18px 0 0;
 padding:14px 20px; border-radius:18px; border:1px solid var(--line);
 background:var(--surface); font-size:14px; line-height:1.5; color:var(--rd-text-2)}
.kb-fc .t{font-family:var(--font-heading); font-size:13px; font-weight:500; color:#fff;
 padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.09); white-space:nowrap; flex:none}
.kb-fc .s{flex:1; min-width:240px}
.kb-fc .s b{color:#fff; font-weight:500; font-variant-numeric:tabular-nums}
.kb-fc .d{font-size:12.5px; color:var(--rd-text-3); white-space:nowrap}
.kb-fc.ok{border-color:rgba(95,209,138,.3); background:rgba(95,209,138,.08)}
.kb-fc.ok .t{background:rgba(95,209,138,.2); color:#8FE3B0}
.kb-fc.warn{border-color:rgba(232,193,60,.32); background:rgba(232,193,60,.08)}
.kb-fc.warn .t{background:rgba(232,193,60,.2); color:#F0D477}
.kb-fc.mute .t{color:var(--rd-text-2)}
.kb-fc-link{border:0; background:0; color:#9FBBFF; font-family:inherit; font-size:14px;
 cursor:pointer; text-decoration:underline; padding:0}

/* ══════ ОТЧЁТЫ по макету design/29-otchety-v3.html (собрано 14.09.2026) ══════
   Прежняя лента карточек `.rp-cards`/`.rcard` удалена вместе с градиентами g-v/g-b/g-p/g-g:
   пятнадцать одинаковых плиток не различались и половина уезжала за край экрана. */
.rp-pickbar{display:flex; align-items:center; gap:12px; padding:22px 0 0; flex-wrap:wrap}
.rp-pickbar2{display:flex; align-items:center; gap:10px; padding:14px 0 0; flex-wrap:wrap}
.rp-picker{position:relative}
.rp-pickbtn{display:flex; align-items:center; gap:14px; min-width:320px; max-width:560px;
 background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:20px;
 padding:12px 16px; cursor:pointer; font-family:inherit; color:#fff; text-align:left;
 transition:background .15s cubic-bezier(.22,.61,.36,1), border-color .15s cubic-bezier(.22,.61,.36,1)}
.rp-pickbtn:hover{background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.22)}
.rp-pickbtn .ic{width:38px; height:38px; border-radius:13px; display:grid; place-items:center;
 font-size:15px; flex:none}
.i-fun{background:rgba(140,100,255,.22); color:#C9B6FF}
.i-mgr{background:rgba(47,107,245,.22); color:#9FBBFF}
.i-free{background:rgba(95,209,138,.22); color:#8FE3B0}
.rp-pickbtn .nm{display:block; font-family:var(--font-heading); font-size:17px; font-weight:600;
 line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rp-pickbtn .mt{display:block; font-size:12px; color:var(--rd-text-3); margin-top:4px;
 overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rp-pickbtn .arw{margin-left:auto; color:var(--rd-text-3); font-size:13px; flex:none}
.rp-kbd{font-family:var(--font-body); font-size:11px; color:var(--rd-text-3);
 border:1px solid var(--line); border-radius:6px; padding:3px 7px; background:rgba(0,0,0,.3);
 white-space:nowrap}
.rp-newb{margin-left:auto; display:flex; align-items:center; gap:11px; background:#fff; color:#111;
 border:0; border-radius:999px; padding:6px 8px 6px 18px; font-family:var(--font-heading);
 font-size:14.5px; font-weight:600; cursor:pointer; box-shadow:0 16px 30px -18px rgba(0,0,0,.8)}
.rp-newb .plus{width:34px; height:34px; border-radius:50%; background:#111; color:#fff;
 display:grid; place-items:center; font-size:19px; font-weight:300;
 transition:transform .18s cubic-bezier(.22,.61,.36,1)}
.rp-newb:hover .plus{transform:rotate(90deg)}

/* переключатель того же отчёта по другому сегменту */
.rp-fam{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.rp-fam .lb{font-size:12.5px; color:var(--rd-text-3)}
.rp-fambtn{display:flex; align-items:center; gap:9px; padding:9px 16px; border-radius:999px;
 border:1px solid var(--line); background:var(--surface); color:var(--rd-text-2);
 font-family:inherit; font-size:13.5px; cursor:pointer}
.rp-fambtn:hover{color:#fff; background:rgba(255,255,255,.075)}
.rp-fambtn[aria-current]{background:#fff; color:#101014; font-weight:600; border-color:#fff}
.rp-fambtn em{font-style:normal; width:8px; height:8px; border-radius:50%; display:block}
.rp-fambtn.absent{opacity:.45; border-style:dashed; cursor:default}
.rp-fambtn.absent:hover{color:var(--rd-text-3); background:var(--surface)}

.rp-fav{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.rp-fav .lb{font-size:12px; color:var(--rd-text-3); margin-right:2px}
.rp-fav button{padding:9px 14px; border-radius:999px; border:1px solid var(--line);
 background:var(--surface); color:var(--rd-text-2); font-family:inherit; font-size:13px;
 cursor:pointer; display:flex; align-items:center; gap:8px}
.rp-fav button:hover{color:#fff; background:rgba(255,255,255,.075)}
.rp-fav button[aria-current]{background:#fff; color:#101014; font-weight:500; border-color:#fff}
.rp-fav button em{font-style:normal; width:7px; height:7px; border-radius:50%; display:block}

/* выпадающая палитра */
.rp-pop{position:absolute; left:0; top:calc(100% + 10px); width:min(580px,92vw); z-index:30;
 background:rgba(18,18,24,.96); border:1px solid rgba(255,255,255,.14); border-radius:22px;
 box-shadow:0 40px 80px -30px rgba(0,0,0,.95);
 overflow:hidden; opacity:0; transform:translateY(-8px) scale(.99);
 pointer-events:none; visibility:hidden; display:none;
 transition:opacity .18s cubic-bezier(.22,.61,.36,1),
 transform .18s cubic-bezier(.22,.61,.36,1), visibility 0s linear .18s}
/* Размытие фона живёт ТОЛЬКО на открытой палитре. Chrome продолжает композить слой
   backdrop-filter даже при opacity:0 и visibility:hidden — закрытая палитра просвечивала
   сквозь таблицу отчёта призраком (поймано 14.09.2026). */
.rp-pop.on{opacity:1; transform:none; pointer-events:auto; visibility:visible;
 -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
 transition:opacity .18s cubic-bezier(.22,.61,.36,1),
 transform .18s cubic-bezier(.22,.61,.36,1), visibility 0s}
.rp-pop .ps{display:flex; align-items:center; gap:10px; padding:14px 16px;
 border-bottom:1px solid var(--line)}
.rp-pop .ps input{flex:1; background:0!important; border:0!important; color:#fff;
 font-family:inherit; font-size:15px; outline:0; margin:0!important; padding:0!important;
 border-radius:0!important; width:auto}
.rp-pop .ps input::placeholder{color:var(--rd-text-3)}
.rp-pop .chips{display:flex; gap:6px; flex-wrap:wrap; padding:12px 16px 10px;
 border-bottom:1px solid var(--line)}
.rp-pop .chips button{padding:7px 13px; border-radius:999px; border:1px solid var(--line);
 background:transparent; color:var(--rd-text-3); font-family:inherit; font-size:12.5px; cursor:pointer}
.rp-pop .chips button:hover{color:#fff}
.rp-pop .chips button[aria-current]{background:rgba(255,255,255,.075); color:#fff;
 border-color:rgba(255,255,255,.2)}
.rp-pop .segs{display:flex; gap:6px; flex-wrap:wrap; padding:10px 16px;
 border-bottom:1px solid var(--line); align-items:center}
.rp-pop .segs .lb{font-size:11px; color:var(--rd-text-3); letter-spacing:.06em;
 text-transform:uppercase; margin-right:2px}
.rp-pop .segs button{padding:6px 12px; border-radius:999px; border:1px solid var(--line);
 background:transparent; color:var(--rd-text-3); font-family:inherit; font-size:12.5px;
 cursor:pointer; display:flex; align-items:center; gap:7px}
.rp-pop .segs button:hover{color:#fff}
.rp-pop .segs button[aria-current]{background:rgba(47,107,245,.18); color:#9FBBFF;
 border-color:rgba(47,107,245,.42)}
.rp-pop .segs button .c{background:rgba(255,255,255,.12); border-radius:999px; padding:1px 7px;
 font-size:11px}
.rp-segtag{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px;
 font-size:11px; background:rgba(255,255,255,.08); color:var(--rd-text-2); margin-left:8px;
 vertical-align:middle}
.rp-segtag em{font-style:normal; width:6px; height:6px; border-radius:50%; display:block}
.rp-list{max-height:46vh; overflow-y:auto; padding:6px 0 8px}
.rp-list .gt{font-size:11px; color:var(--rd-text-3); letter-spacing:.07em; text-transform:uppercase;
 padding:12px 18px 6px; display:flex; align-items:center; gap:8px}
.rp-list .gt .n{margin-left:auto; letter-spacing:0; text-transform:none}
.rp-it{display:flex; gap:12px; align-items:center; padding:11px 16px; cursor:pointer;
 transition:background .12s ease}
.rp-it:hover, .rp-it.cur{background:rgba(255,255,255,.06)}
.rp-it[aria-current]{background:rgba(47,107,245,.16)}
.rp-it .ic{width:32px; height:32px; border-radius:11px; display:grid; place-items:center;
 font-size:13px; flex:none}
.rp-it .nm{display:block; font-size:14.5px; line-height:1.25}
.rp-it .mt{display:block; font-size:11.5px; color:var(--rd-text-3); margin-top:4px; line-height:1.4}
.rp-it .rt{margin-left:auto; display:flex; align-items:center; gap:11px; flex:none}
.rp-it .ago{font-size:11.5px; color:var(--rd-text-3); white-space:nowrap}
.rp-star{border:0; background:transparent; color:rgba(255,255,255,.22); font-size:14px;
 cursor:pointer; padding:0; line-height:1}
.rp-star.on{color:var(--rd-warn)}
.rp-empty{padding:26px 18px; font-size:13.5px; color:var(--rd-text-3); line-height:1.6;
 text-align:center}
.rp-popscrim{position:fixed; inset:0; z-index:25; background:transparent; display:none}
.rp-popscrim.on{display:block}

/* результат */
.rp-rwrap{margin-top:18px; background:var(--surface); border:1px solid var(--line);
 border-radius:24px; overflow:hidden; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
 box-shadow:0 20px 40px -24px rgba(0,0,0,.8)}
.rp-rbar{display:flex; align-items:center; gap:9px; padding:18px 24px; flex-wrap:wrap;
 border-bottom:1px solid var(--line)}
.rp-rbar .dt{height:40px; padding:0 13px; border-radius:12px!important;
 border:1px solid var(--line)!important; background:rgba(0,0,0,.32)!important; color:#fff;
 font-family:inherit; font-size:13.5px; outline:0; color-scheme:dark; margin:0!important;
 width:auto; cursor:pointer}
.rp-rbar .show{padding:0 22px; height:40px; border-radius:12px; border:0; background:#fff;
 color:#111; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer}
.rp-rbar .sep{width:1px; height:26px; background:var(--line); margin:0 5px}
.rp-rbar .ghost{height:40px; padding:0 15px; border-radius:12px; border:1px solid var(--line);
 background:rgba(255,255,255,.075); color:var(--rd-text-2); font-family:inherit; font-size:13.5px;
 cursor:pointer}
.rp-rbar .ghost:hover{color:#fff; background:rgba(255,255,255,.13)}
.rp-rbar .ghost.pinned{color:#C9B6FF; border-color:rgba(140,100,255,.4);
 background:rgba(140,100,255,.14)}
.rp-rbar .danger:hover{color:#F79790; border-color:rgba(232,83,74,.4); background:rgba(232,83,74,.12)}
.rp-note{font-size:13px; color:var(--rd-text-3); padding:16px 24px 0; line-height:1.5; margin:0}
.rp-tscroll{margin-top:12px; max-height:min(640px,70vh); overflow:auto}
.rp-tscroll table{width:100%; border-collapse:collapse; font-size:14.5px}
.rp-tscroll thead th{text-align:right; font-size:12.5px; font-weight:400; color:var(--rd-text-3);
 padding:13px 24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
 white-space:nowrap; position:sticky; top:0; z-index:2; background:var(--sticky-bg);
 -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.rp-tscroll thead th:first-child{text-align:left}
.rp-tscroll tbody td{padding:13px 24px; border-bottom:1px solid rgba(255,255,255,.05);
 text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.rp-tscroll tbody td:first-child{text-align:left}
.rp-tscroll tbody tr:last-child td{border-bottom:0}
.rp-tscroll tbody tr:hover{background:rgba(255,255,255,.04)}
@media (max-width:820px){
  .rp-pickbtn{min-width:0; width:100%}
  .rp-newb{margin-left:0; width:100%; justify-content:space-between}
  .rp-tscroll table{min-width:840px}
}
.rp-cr{padding:4px 10px; border-radius:999px; font-size:13px}
.rp-cr.hi{background:rgba(95,209,138,.16); color:#8FE3B0}
.rp-cr.mid{background:rgba(232,193,60,.16); color:#F0D477}
.rp-cr.low{background:rgba(232,83,74,.16); color:#F79790}

/* ══════ МЕНЕДЖЕРЫ (макет 07-menedzhery.html) ══════ */
.g1{background:linear-gradient(160deg,#1A1A1E,#0C0C0F)}
.g1::after{content:''; position:absolute; inset:0;
 background:radial-gradient(60% 50% at 70% 30%,rgba(255,255,255,.14),transparent 70%)}
.g2{background:linear-gradient(160deg,#1A6BE8,#5A6CD8 70%,#8E92DE)}
.g2::after{content:''; position:absolute; inset:0;
 background:radial-gradient(55% 40% at 30% 70%,rgba(8,40,120,.45),transparent 70%)}
.g3{background:linear-gradient(160deg,#5E1722,#1E060B)}
.g3::after{content:''; position:absolute; inset:0;
 background:radial-gradient(58% 40% at 70% 24%,rgba(232,83,74,.3),transparent 70%)}
.g4{background:linear-gradient(160deg,#3A2410,#160C05)}
.g4::after{content:''; position:absolute; inset:0;
 background:radial-gradient(55% 40% at 28% 72%,rgba(232,193,60,.26),transparent 70%)}
.g5{background:linear-gradient(160deg,#173B2E,#0B1A16)}
.g5::after{content:''; position:absolute; inset:0;
 background:radial-gradient(55% 40% at 70% 25%,rgba(95,209,138,.28),transparent 70%)}
.g6{background:linear-gradient(160deg,#C42A6B,#7A1A5C)}
.g6::after{content:''; position:absolute; inset:0;
 background:radial-gradient(60% 45% at 25% 75%,rgba(255,255,255,.18),transparent 70%)}

.mn-grade{display:inline-block; padding:5px 12px; border-radius:999px; font-size:12.5px;
 white-space:nowrap}
.gr-g{background:rgba(232,193,60,.16); color:#F0D477}
.gr-s{background:rgba(255,255,255,.10); color:rgba(255,255,255,.82)}
.gr-b{background:rgba(196,42,107,.16); color:#F79BB6}

.mn-person{display:flex; align-items:center; gap:18px; margin-top:18px; flex-wrap:wrap}
.mn-person .big{width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.1);
 display:grid; place-items:center; font-family:var(--font-heading); font-size:26px; font-weight:500;
 position:relative; flex:none; overflow:hidden}
.mn-person .big img{width:100%; height:100%; object-fit:cover}
.mn-person h1{font-family:var(--font-heading); font-size:30px; font-weight:500; margin:0;
 letter-spacing:-.01em}
.mn-person .meta{display:flex; align-items:center; gap:11px; margin-top:8px; flex-wrap:wrap;
 font-size:13.5px; color:var(--rd-text-3)}
.mn-person .meta .s{width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.2)}
.mn-acts{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap}
.mn-acts button{padding:11px 18px; border-radius:999px; border:1px solid var(--line);
 background:rgba(255,255,255,.075); color:var(--rd-text-2); font-family:inherit; font-size:14px;
 cursor:pointer; white-space:nowrap}
.mn-acts button:hover{color:#fff}
.mn-acts button.primary{background:#fff; color:#111; border-color:#fff; font-weight:500}
.mn-acts button.del{color:var(--rd-danger); border-color:rgba(232,83,74,.35)}
.mn-back{margin:18px 0 0; padding:10px 18px; border-radius:999px; border:1px solid var(--line);
 background:rgba(255,255,255,.075); color:var(--rd-text-2); font-family:inherit; font-size:14px;
 cursor:pointer}
.mn-back:hover{color:#fff}

/* столбики «Оплаты по дням запуска» */
.mn-bars{display:flex; align-items:flex-end; gap:6px; height:132px}
.mn-bars i{flex:1; min-width:4px; border-radius:5px 5px 2px 2px; display:block;
 background:linear-gradient(180deg,#8FE3B0,rgba(95,209,138,.25)); transition:height 340ms ease}
.mn-bars-x{display:flex; gap:6px; font-size:10.5px; color:var(--rd-text-3); margin-top:8px}
.mn-bars-x span{flex:1; min-width:4px; text-align:center; overflow:hidden}
.mn-cols{display:grid; grid-template-columns:1.5fr 1fr; gap:18px; margin-top:18px}
@media (max-width:1100px){ .mn-cols{grid-template-columns:1fr} }
.mn-clickable{cursor:pointer}
.mn-clickable:hover{background:rgba(255,255,255,.05)}

/* ══════ ПЛАНЁРКА (макет 06-planerka.html) ══════ */
.pl-days{margin-left:auto; display:flex; gap:7px; align-items:center; flex-wrap:wrap}
.pl-days button{width:52px; padding:9px 0 10px; border-radius:16px; border:1px solid var(--line);
 background:var(--surface); color:var(--rd-text-3); font-family:inherit; cursor:pointer;
 text-align:center}
.pl-days button .d{font-size:11px}
.pl-days button .n{font-size:16px; margin-top:3px; display:block; font-variant-numeric:tabular-nums}
.pl-days button:hover{color:#fff}
.pl-days button[aria-current]{background:#fff; color:#111; border-color:#fff}
.pl-days button.miss .n{color:var(--rd-danger)}

.m-1{background:linear-gradient(160deg,#173B2E,#0B1A16)}
.m-1::after{content:''; position:absolute; inset:0;
 background:radial-gradient(55% 40% at 70% 25%,rgba(95,209,138,.28),transparent 70%)}
.m-2{background:linear-gradient(160deg,#1A1A1E,#0C0C0F)}
.m-2::after{content:''; position:absolute; inset:0;
 background:radial-gradient(60% 50% at 70% 30%,rgba(255,255,255,.14),transparent 70%)}
.m-3{background:linear-gradient(160deg,#3A2410,#160C05)}
.m-3::after{content:''; position:absolute; inset:0;
 background:radial-gradient(55% 40% at 28% 72%,rgba(232,193,60,.26),transparent 70%)}
.m-4{background:linear-gradient(160deg,#1A6BE8,#5A6CD8 70%,#8E92DE)}
.m-4::after{content:''; position:absolute; inset:0;
 background:radial-gradient(55% 40% at 30% 70%,rgba(8,40,120,.45),transparent 70%)}
.pl-faces{display:flex; margin-top:8px; position:relative; z-index:1}
.pl-faces span{width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.22);
 border:1.5px solid rgba(20,30,55,.6); margin-left:-7px; display:grid; place-items:center;
 font-size:10.5px}
.pl-faces span:first-child{margin-left:0}

.pl-cols{display:grid; grid-template-columns:1.65fr 1fr; gap:18px; margin-top:18px}
@media (max-width:1100px){ .pl-cols{grid-template-columns:1fr} }
.pl-card{background:var(--surface); border:1px solid var(--line); border-radius:24px; overflow:hidden}
.pl-card h2{font-family:var(--font-heading); font-size:16px; font-weight:500; padding:20px 22px 0;
 display:flex; align-items:center; gap:11px; margin:0}
.pl-card h2 .n{margin-left:auto; font-size:13px; color:var(--rd-text-3); font-weight:400}
.pl-card .pad{padding:18px 22px 22px}

.pl-prog{padding:16px 22px 0}
.pl-prog .tr{height:6px; border-radius:3px; background:rgba(255,255,255,.08); position:relative;
 overflow:hidden}
.pl-prog .tr i{position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--rd-ok);
 display:block; transition:width 250ms ease}
.pl-prog .lbl{display:flex; font-size:12.5px; color:var(--rd-text-3); margin-top:9px}
.pl-prog .lbl b{margin-left:auto; color:#fff; font-weight:400; font-variant-numeric:tabular-nums}

.pl-group{padding:18px 22px 0}
.pl-group h4{font-size:12.5px; color:var(--rd-text-3); font-weight:400; margin:0 0 4px;
 display:flex; align-items:center; gap:9px}
.pl-group h4 em{font-style:normal; padding:3px 9px; border-radius:999px; font-size:11px}

.pl-addrow{display:flex; gap:10px; padding:16px 22px 22px}
.pl-addrow input{flex:1; background:rgba(0,0,0,.3)!important; border:1px solid var(--line)!important;
 border-radius:14px!important; margin:0!important}
.pl-addrow button{padding:0 20px; border-radius:14px; border:1px solid var(--line);
 background:rgba(255,255,255,.075); color:var(--rd-text-2); font-family:inherit; font-size:14px;
 cursor:pointer; white-space:nowrap}
.pl-addrow button:hover{color:#fff}

.pl-rop .from{display:flex; align-items:center; gap:11px; font-size:14px; margin-bottom:12px}
.pl-rop .from .av{width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.14);
 display:grid; place-items:center; font-size:12.5px; flex:none}
.pl-rop .from em{font-style:normal; margin-left:auto; font-size:12px; color:var(--rd-text-3)}
.pl-rop p{font-size:14px; line-height:1.6; color:rgba(255,255,255,.86); white-space:pre-wrap}
.pl-rop .ask{margin-top:16px; width:100%; padding:13px; border-radius:14px;
 border:1px solid var(--line); background:rgba(255,255,255,.075); color:var(--rd-text-2);
 font-family:inherit; font-size:14px; cursor:pointer}
.pl-rop .ask:hover{color:#fff}

.pl-y{display:flex; align-items:baseline; gap:12px; padding:11px 0;
 border-bottom:1px solid rgba(255,255,255,.05); font-size:14px}
.pl-y:last-child{border-bottom:0}
.pl-y .k{color:var(--rd-text-2)}
.pl-y .v{margin-left:auto; font-size:15.5px; font-variant-numeric:tabular-nums}
.pl-y .d{font-size:12.5px; width:52px; text-align:right; font-variant-numeric:tabular-nums}

.pl-hist{display:flex; align-items:center; gap:12px; padding:9px 0; font-size:13px}
.pl-hist .dt{width:56px; color:var(--rd-text-3); flex:none}
.pl-hist .tr{flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.08);
 position:relative; overflow:hidden}
.pl-hist .tr i{position:absolute; left:0; top:0; bottom:0; border-radius:3px; display:block}
.pl-hist .v{width:62px; text-align:right; color:var(--rd-text-2); flex:none;
 font-variant-numeric:tabular-nums}

.pl-strip{display:flex; align-items:center; gap:16px; margin-top:18px; flex-wrap:wrap}
.pl-strip .hint{flex:1; min-width:240px; font-size:12.5px; color:var(--rd-text-3); line-height:1.5}
.pl-mark{display:flex; align-items:center; gap:12px; background:#fff; color:#111; border:0;
 border-radius:999px; padding:7px 10px 7px 20px; font-family:var(--font-heading); font-size:15.5px;
 font-weight:600; cursor:pointer}
.pl-mark .ic{width:38px; height:38px; border-radius:50%; background:#111; color:#fff;
 display:grid; place-items:center; font-size:16px}
.pl-mark[disabled]{background:rgba(255,255,255,.12); color:var(--rd-text-2); cursor:default}
.pl-mark[disabled] .ic{background:rgba(255,255,255,.14); color:var(--rd-ok)}

/* ══════ ПОКАЗАТЕЛИ (макет 03-pokazateli.html) ══════
   Префикс pk-: имена макета (.card .row .nm .track .fill .link .grid .legend)
   в панели заняты другим смыслом. */
.pk-minis{display:flex; gap:14px; padding:22px 0 0; overflow-x:auto; scrollbar-width:none}
.pk-minis::-webkit-scrollbar{display:none}
.pk-mini{flex:0 0 236px; height:138px; border-radius:24px; padding:18px 20px; position:relative;
 overflow:hidden; display:flex; flex-direction:column; justify-content:space-between;
 transition:transform 300ms cubic-bezier(.22,.61,.36,1), box-shadow 300ms ease}
.pk-mini:hover{transform:translateY(-6px) scale(1.02);
 box-shadow:0 30px 52px -24px rgba(0,0,0,.85)}
.pk-mini h3{font-size:13.5px; font-weight:400; color:rgba(255,255,255,.72); position:relative;
 z-index:1; margin:0}
.pk-mini .v{position:relative; z-index:1}
.pk-mini .c{font-size:12.5px; color:rgba(255,255,255,.6); margin-top:6px; position:relative; z-index:1}
.pk-mini .d{font-size:12.5px; margin-top:6px; position:relative; z-index:1}
.m-lead{background:linear-gradient(160deg,#1A1A1E,#0C0C0F)}
.m-lead::after{content:''; position:absolute; inset:0;
 background:radial-gradient(60% 50% at 70% 30%,rgba(255,255,255,.14),transparent 70%)}
.m-ans{background:linear-gradient(160deg,#1A6BE8,#5A6CD8 70%,#8E92DE)}
.m-ans::after{content:''; position:absolute; inset:0;
 background:radial-gradient(55% 40% at 30% 70%,rgba(8,40,120,.45),transparent 70%)}
.m-pay{background:linear-gradient(160deg,#C42A6B,#7A1A5C)}
.m-pay::after{content:''; position:absolute; inset:0;
 background:radial-gradient(60% 45% at 25% 75%,rgba(255,255,255,.18),transparent 70%)}
.m-paid{background:linear-gradient(160deg,#173B2E,#0B1A16)}
.m-paid::after{content:''; position:absolute; inset:0;
 background:radial-gradient(55% 38% at 70% 24%,rgba(95,209,138,.26),transparent 70%)}
.pk-up{color:var(--rd-ok)}
.pk-down{color:var(--rd-danger)}

.pk-grid{display:grid; grid-template-columns:1.55fr 1fr; gap:18px; margin-top:18px}
@media (max-width:1100px){ .pk-grid{grid-template-columns:1fr} }
.pk-card{background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:22px 24px;
 margin-top:18px}
.pk-grid .pk-card{margin-top:0}
.pk-card h2{font-family:var(--font-heading); font-size:16px; font-weight:500; display:flex;
 align-items:center; gap:10px; margin:0 0 4px}
.pk-card h2 .n{margin-left:auto; font-size:13px; color:var(--rd-text-3); font-weight:400}
.pk-card .lead{font-size:13px; color:var(--rd-text-3); line-height:1.5; margin-bottom:20px}

/* воронка «Путь лида» */
.pk-stage{margin-bottom:6px}
.pk-stage .r{display:flex; align-items:center; gap:14px; margin-bottom:7px}
.pk-stage .nm{font-size:14.5px; width:160px; flex:none}
.pk-stage .track{flex:1; height:34px; border-radius:11px; background:rgba(255,255,255,.05);
 position:relative; overflow:hidden}
.pk-stage .fill{position:absolute; left:0; top:0; bottom:0; border-radius:11px;
 transition:width 340ms cubic-bezier(.22,.61,.36,1)}
.pk-stage .v{width:82px; text-align:right; font-size:16px; font-variant-numeric:tabular-nums; flex:none}
.pk-f1{background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.10))}
.pk-f2{background:linear-gradient(90deg,#2F6BF5,rgba(47,107,245,.35))}
.pk-f3{background:linear-gradient(90deg,#C42A6B,rgba(196,42,107,.35))}
.pk-f4{background:linear-gradient(90deg,#5FD18A,rgba(95,209,138,.3))}
.pk-link{display:flex; align-items:center; gap:12px; margin:0 0 7px 174px;
 color:var(--rd-text-3); font-size:12.5px; flex-wrap:wrap}
.pk-link .l{width:1px; height:16px; background:rgba(255,255,255,.16); margin-left:9px}
.pk-link .cr{background:rgba(255,255,255,.075); border:1px solid var(--line); border-radius:999px;
 padding:4px 12px; font-size:12.5px; color:#fff; font-variant-numeric:tabular-nums}
.pk-crfoot{display:flex; align-items:center; gap:16px; margin-top:20px; padding-top:20px;
 border-top:1px solid var(--line); flex-wrap:wrap}
.pk-crfoot .lbl{font-size:14.5px}
.pk-crfoot .lbl .s{font-size:12.5px; color:var(--rd-text-3); margin-top:4px}
.pk-crfoot .big{margin-left:auto; display:flex; align-items:baseline; gap:10px}
.pk-crfoot .big .p{font-family:var(--font-heading); font-size:32px; font-weight:500;
 letter-spacing:-.01em; font-variant-numeric:tabular-nums}

/* градусник «Насколько это хорошо» */
/* запас сверху: иначе плашка «вы здесь» налезает на крупное число над шкалой */
.pk-gauge{margin-top:38px}
.pk-marker{position:relative; height:0}
.pk-marker span{position:absolute; top:-30px; transform:translateX(-50%); white-space:nowrap;
 background:#fff; color:#111; font-size:12.5px; font-weight:500; padding:4px 11px; border-radius:999px}
.pk-marker span::after{content:''; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%);
 border:5px solid transparent; border-top-color:#fff; border-bottom:0}
.pk-zones{display:flex; height:9px; border-radius:5px; overflow:hidden; gap:2px}
.pk-zones i{display:block; height:100%}
.pk-zlabels{position:relative; height:16px; margin-top:9px; font-size:11.5px; color:var(--rd-text-3)}
.pk-zlabels span{position:absolute; transform:translateX(-50%); font-variant-numeric:tabular-nums;
 white-space:nowrap}
/* крайние подписи прижимаем к краям, иначе половина уезжает за шкалу и переносится */
.pk-zlabels span:first-child{transform:none}
.pk-zlabels span:last-child{transform:translateX(-100%)}
.pk-cmp-scale span:first-child{transform:none}
.pk-cmp-scale span:last-child{transform:translateX(-100%)}
.pk-verdict{margin-top:24px; font-size:14px; line-height:1.6; color:var(--rd-text-2)}
.pk-verdict b{color:#fff; font-weight:500}

/* график «Как менялось» */
/* Стили графика «Как менялось» удалены вместе с ним 14.09.2026: он строился по ручным
   замерам и при автоподсчёте оставался пустым навсегда. */

/* ── «Где теряются лиды»: три ступени с ценой вопроса ── */
.pk-loss-row{padding:14px 0; border-bottom:1px solid rgba(255,255,255,.055)}
.pk-loss-row:last-of-type{border-bottom:0}
.pk-loss-head{display:flex; align-items:baseline; gap:12px}
.pk-loss-head .t{font-size:14.5px}
.pk-loss-head .n{margin-left:auto; font-size:13px; color:var(--rd-text-3);
 font-variant-numeric:tabular-nums; white-space:nowrap}
.pk-loss-bar{height:7px; border-radius:4px; background:rgba(255,255,255,.07);
 margin-top:9px; overflow:hidden}
.pk-loss-bar i{display:block; height:100%; border-radius:4px; width:0;
 transition:width 700ms cubic-bezier(.22,.61,.36,1)}
.pk-loss-row.bad .pk-loss-bar i{background:var(--rd-danger)}
.pk-loss-row.warn .pk-loss-bar i{background:var(--rd-warn)}
.pk-loss-row.ok .pk-loss-bar i{background:var(--rd-ok)}
.pk-loss-foot{display:flex; align-items:baseline; gap:12px; margin-top:8px}
.pk-loss-foot .m{font-family:var(--font-heading); font-size:16px; font-weight:600;
 font-variant-numeric:tabular-nums}
.pk-loss-row.bad .pk-loss-foot .m{color:#F79790}
.pk-loss-row.warn .pk-loss-foot .m{color:#F0D477}
.pk-loss-row.ok .pk-loss-foot .m{color:#8FE3B0}
.pk-loss-foot .s{margin-left:auto; font-size:12.5px; color:var(--rd-text-3); text-align:right}

/* ── «Я и команда»: своя метка на одной шкале со средним и лучшим ── */
.pk-peer{padding:16px 0; border-bottom:1px solid rgba(255,255,255,.055)}
.pk-peer:last-of-type{border-bottom:0}
.pk-peer-top{display:flex; align-items:baseline; gap:12px}
.pk-peer-top .t{font-size:14.5px}
.pk-peer-top .v{margin-left:auto; font-family:var(--font-heading); font-size:22px;
 font-weight:600; font-variant-numeric:tabular-nums}
.pk-peer-top .v.up{color:var(--rd-ok)}
.pk-peer-top .v.down{color:var(--rd-warn)}
.pk-peer-track{position:relative; height:8px; border-radius:5px;
 background:rgba(255,255,255,.07); margin-top:14px}
.pk-peer-track i{position:absolute; top:50%; display:block; border-radius:2px}
.pk-peer-track .avg{width:2px; height:16px; margin-left:-1px; transform:translateY(-50%);
 background:rgba(255,255,255,.45)}
.pk-peer-track .best{width:2px; height:16px; margin-left:-1px; transform:translateY(-50%);
 background:rgba(255,255,255,.2)}
.pk-peer-track .me{width:14px; height:14px; margin-left:-7px; border-radius:50%;
 transform:translateY(-50%); background:#fff; box-shadow:0 0 0 3px rgba(47,107,245,.45)}
.pk-peer-foot{display:flex; justify-content:space-between; margin-top:9px;
 font-size:12px; color:var(--rd-text-3); font-variant-numeric:tabular-nums}
.pk-peer-rank{margin-top:7px; font-size:12.5px; color:var(--rd-text-2)}
.pk-legend{display:flex; gap:22px; margin-top:16px; font-size:13px; color:var(--rd-text-2);
 flex-wrap:wrap}
.pk-legend b{display:inline-block; width:15px; height:2.5px; border-radius:2px; margin-right:8px;
 vertical-align:middle}

/* «Сегменты рядом» */
.pk-cmp-row{display:flex; align-items:center; gap:16px; padding:15px 0;
 border-bottom:1px solid rgba(255,255,255,.05)}
.pk-cmp-row:last-of-type{border-bottom:0}
.pk-cmp-row .nm{width:180px; display:flex; align-items:center; gap:11px; font-size:14.5px; flex:none}
.pk-cmp-row .nm em{font-style:normal; width:8px; height:8px; border-radius:50%; display:block; flex:none}
.pk-cmp-row .nm .q{display:block; font-size:12px; color:var(--rd-text-3); margin-top:3px}
.pk-cmp-track{flex:1; position:relative; padding:3px 0}
.pk-cmp-track .band{position:absolute; top:-15px; bottom:-15px; background:rgba(95,209,138,.07);
 border-left:1px dashed rgba(95,209,138,.3); border-right:1px dashed rgba(95,209,138,.3)}
.pk-cmp-b{height:11px; border-radius:6px; position:relative; margin:5px 0}
.pk-cmp-b .bg{position:absolute; inset:0; background:rgba(255,255,255,.05); border-radius:6px}
.pk-cmp-b i{position:absolute; left:0; top:0; bottom:0; border-radius:6px; display:block;
 transition:width 340ms cubic-bezier(.22,.61,.36,1)}
.pk-cmp-vals{width:132px; text-align:right; font-variant-numeric:tabular-nums; flex:none}
.pk-cmp-vals .a{font-size:13px; color:var(--rd-text-2)}
.pk-cmp-vals .b{font-size:17px; font-weight:500; margin-top:3px; display:block}
.pk-cmp-scale{position:relative; height:16px; margin:4px 148px 0 196px; font-size:11.5px;
 color:var(--rd-text-3)}
.pk-cmp-scale span{position:absolute; transform:translateX(-50%); font-variant-numeric:tabular-nums}
.pk-cmp-note{display:flex; gap:12px; margin-top:18px; padding-top:18px;
 border-top:1px solid var(--line); font-size:13.5px; color:var(--rd-text-2); line-height:1.6}
.pk-cmp-note b{color:#fff; font-weight:500}
.pk-delta{font-size:12.5px; margin-left:8px}
@media (max-width:820px){
  .pk-stage .nm{width:110px}
  .pk-link{margin-left:124px}
  .pk-cmp-row{flex-wrap:wrap}
  .pk-cmp-row .nm{width:100%}
  .pk-cmp-scale{margin:4px 0 0}
}

/* ══════ ПОТЕНЦИАЛЫ (макет 02-potencialy.html) ══════
   Экран — таблица, а не карточки по этапам. Префикс pt- / dw-: имена макета
   (.mini .bar .seg .search .chip .money .acts) в панели заняты другим смыслом. */
.pt-head h1{font-family:var(--font-heading); font-size:34px; font-weight:500; margin:0;
 letter-spacing:-.01em}
.pt-head .sub{font-size:14px; color:var(--rd-text-3); margin-top:7px; max-width:620px}

/* мини-листы сводки */
.pt-minis{display:flex; gap:14px; padding:22px 0 0; overflow-x:auto; scrollbar-width:none}
.pt-minis::-webkit-scrollbar{display:none}
.pt-mini{flex:0 0 236px; height:138px; border-radius:24px; padding:18px 20px; position:relative;
 overflow:hidden; display:flex; flex-direction:column; justify-content:space-between}
.pt-mini h3{font-size:13.5px; font-weight:400; color:rgba(255,255,255,.72); position:relative;
 z-index:1; margin:0}
.pt-mini .v{position:relative; z-index:1}
.pt-mini .c{font-size:12.5px; color:rgba(255,255,255,.6); margin-top:6px; position:relative; z-index:1}
.m-pot{background:linear-gradient(160deg,#1A1A1E,#0C0C0F)}
.m-pot::after{content:''; position:absolute; inset:0;
 background:radial-gradient(60% 50% at 70% 30%,rgba(255,255,255,.14),transparent 70%)}
.m-sum{background:linear-gradient(160deg,#1A6BE8,#5A6CD8 70%,#8E92DE)}
.m-sum::after{content:''; position:absolute; inset:0;
 background:radial-gradient(55% 40% at 30% 70%,rgba(8,40,120,.45),transparent 70%)}
.m-hot{background:linear-gradient(160deg,#C42A6B,#7A1A5C)}
.m-hot::after{content:''; position:absolute; inset:0;
 background:radial-gradient(60% 45% at 25% 75%,rgba(255,255,255,.18),transparent 70%)}
.m-cold{background:linear-gradient(160deg,#3A2410,#1A0E05)}
.m-cold::after{content:''; position:absolute; inset:0;
 background:radial-gradient(55% 45% at 70% 25%,rgba(232,193,60,.24),transparent 70%)}

/* строка управления: вкладки, поиск, фильтр, добавить */
.pt-bar{display:flex; align-items:center; gap:14px; padding:24px 0 0; flex-wrap:wrap}
.pt-seg{display:flex; gap:4px; background:var(--surface); border:1px solid var(--line);
 border-radius:999px; padding:4px; overflow-x:auto; scrollbar-width:none; max-width:100%}
.pt-seg::-webkit-scrollbar{display:none}
.pt-seg button{border:0; background:transparent; font-family:inherit; font-size:14px;
 color:var(--rd-text-2); padding:9px 17px; border-radius:999px; cursor:pointer; white-space:nowrap;
 display:flex; align-items:center; gap:8px}
.pt-seg button:hover{color:#fff}
.pt-seg button[aria-current]{background:rgba(255,255,255,.075); color:#fff; font-weight:500}
.pt-seg .n{background:rgba(255,255,255,.14); border-radius:999px; padding:1px 8px; font-size:12px;
 font-variant-numeric:tabular-nums}
.pt-search{display:flex; align-items:center; gap:10px; background:var(--surface);
 border:1px solid var(--line); border-radius:999px; padding:0 18px; height:44px; min-width:220px}
.pt-search input{background:0!important; border:0!important; color:#fff; font-family:inherit;
 font-size:14px; width:100%; outline:0; padding:0!important; border-radius:0!important}
.pt-search input::placeholder{color:var(--rd-text-3)}
.pt-filter{height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--line);
 background:var(--surface); color:var(--rd-text-2); font-family:inherit; font-size:14px;
 cursor:pointer; display:flex; align-items:center; gap:9px}
.pt-filter:hover{color:#fff}
/* Охват у «Потенциалов команды»: тот же вид, что у .pt-filter, но это настоящий <select>.
   Свою стрелку рисуем фоном — родная у select в тёмной теме почти не видна. */
.pt-bar .pt-scope, .st-blockhead .pt-scope{height:44px; padding:0 38px 0 18px; border-radius:999px!important; border:1px solid var(--line)!important;
 background:var(--surface)!important; color:var(--rd-text-2); font-family:inherit; font-size:14px;
 cursor:pointer; margin:0!important; width:auto; min-width:200px; max-width:320px;
 -webkit-appearance:none; appearance:none;
 background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.45) 50%),
   linear-gradient(135deg,rgba(255,255,255,.45) 50%,transparent 50%)!important;
 background-position:calc(100% - 21px) 20px, calc(100% - 16px) 20px!important;
 background-size:5px 5px, 5px 5px!important; background-repeat:no-repeat!important}
.pt-bar .pt-scope:hover, .st-blockhead .pt-scope:hover{color:#fff}
.pt-scope option{background:#15151A; color:#fff}
@media (max-width:820px){ .pt-bar .pt-scope{width:100%; max-width:none} }
/* Поля дат и белая кнопка «Показать» в полосе фильтров «Статистики» (макет 23-25).
   Селектор двойной (.pt-bar .pt-date), потому что общее правило форм —
   `select, input[type="date"], … {width:100%}` — это (0,1,1) и перебивает
   одиночный класс (0,1,0). Та же ловушка специфичности, что с .lf-sheen и .pr-stage. */
.pt-bar .pt-date{height:44px; padding:0 16px; border-radius:999px!important; border:1px solid var(--line)!important;
 background:var(--surface)!important; color:#fff; font-family:inherit; font-size:14px;
 margin:0!important; width:auto; min-width:150px; font-variant-numeric:tabular-nums}
/* всё поле — кнопка: календарь открывает обработчик в app.js (showPicker) */
.pt-bar .pt-date{cursor:pointer}
.pt-bar .pt-date:hover{border-color:rgba(255,255,255,.22)!important}
.pt-bar .pt-date::-webkit-calendar-picker-indicator{filter:invert(1); opacity:.75; cursor:pointer;
 width:17px; height:17px; margin-left:6px}
.pt-bar .pt-date:hover::-webkit-calendar-picker-indicator{opacity:1}
.pt-go{height:44px; padding:0 22px; border-radius:999px; border:0; background:#fff; color:#101014;
 font-family:var(--font-heading); font-size:14.5px; font-weight:600; cursor:pointer}
.pt-go:hover{background:rgba(255,255,255,.88)}
/* Шапка блока: заголовок слева, пояснение или элемент управления справа */
.st-blockhead{display:flex; align-items:center; gap:14px; padding:16px 20px;
 border-bottom:1px solid var(--line); flex-wrap:wrap}
.st-blockhead h3{font-family:var(--font-heading); font-size:15.5px; font-weight:500; margin:0}
.st-blockhead .n{font-size:12.5px; color:var(--rd-text-3)}
.st-blockhead .pt-scope, .st-blockhead .pt-filter{height:38px}
.st-pad{padding:18px 20px}

/* ── Воронка по менеджерам (макет 23-25) ── */
.fn-table{width:100%; border-collapse:collapse; font-size:14px}
.fn-table th.num, .fn-table td.num{text-align:right; font-variant-numeric:tabular-nums}
.fn-table th.who, .fn-table td.who{text-align:left; position:sticky; left:0;
 background:var(--sticky-bg); z-index:1; min-width:220px}
/* Фон шапке обязателен: это правило перебивает `.pt-tablewrap thead th` (равная
   специфичность, объявлено ниже), а вместе с ним потерялась бы и подложка —
   сквозь прозрачную шапку просвечивал дрейфующий фон страницы. */
.fn-table thead th{font-size:12.5px; font-weight:400; color:var(--rd-text-3);
 padding:15px 18px; border-bottom:1px solid var(--line); white-space:nowrap;
 background:rgba(14,14,18,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.fn-table tbody td{padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.05)}
.fn-table td.dim{color:var(--rd-text-3)}
.fn-table td.sm{font-size:12.5px; color:var(--rd-text-2)}
.fn-mgr{cursor:pointer}
.fn-mgr:hover td{background:rgba(255,255,255,.035)}
.fn-mgr:hover td.who{background:rgba(22,22,28,.98)}
.fn-table .fn-chev{color:var(--rd-text-3); font-size:11px; margin-left:2px}
/* строка-заголовок группы: только подпись, без линии под ней */
.fn-grp td{padding:16px 18px 6px!important; border-bottom:0!important;
 font-size:12px; color:var(--rd-text-3); letter-spacing:.04em; text-transform:uppercase}
.fn-seg td{font-size:12.5px; color:var(--rd-text-2); padding-top:8px!important; padding-bottom:8px!important}
.fn-seg td.who{padding-left:66px!important; background:rgba(18,18,23,.96)}
.fn-sum td{font-weight:500; background:rgba(255,255,255,.028)}
.fn-sum td.who{background:rgba(20,20,26,.98)}
.fn-table tfoot td{padding:15px 18px; font-weight:600; border-top:1px solid var(--line);
 background:rgba(255,255,255,.04)}
.fn-table tfoot td.who{background:rgba(22,22,28,.98)}
/* конверсия чипом, а не подложкой на всю колонку: подложка красила и нули */
.fn-cr{display:inline-block; min-width:62px; padding:5px 11px; border-radius:999px;
 font-size:13px; font-variant-numeric:tabular-nums}
.fn-cr.hi{background:rgba(95,209,138,.16); color:#8FE3B0}
.fn-cr.mid{background:rgba(232,193,60,.14); color:#F0D477}
.fn-cr.lo{background:rgba(232,83,74,.14); color:#F09A93}
.fn-cr.zero{background:transparent; color:var(--rd-text-3)}

/* ── Сравнение воронок менеджеров ── */
.fc-row{display:grid; grid-template-columns:220px repeat(3, 1fr); gap:18px;
 align-items:center; padding:9px 0}
.fc-row + .fc-row{border-top:1px solid rgba(255,255,255,.05)}
.fc-head{padding-bottom:4px; font-size:12px; color:var(--rd-text-3); letter-spacing:.04em;
 text-transform:uppercase}
.fc-head + .fc-row{border-top:0}
.fc-who{display:flex; align-items:center; gap:11px; min-width:0}
.fc-who .av{width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.075);
 display:grid; place-items:center; font-size:12px; flex:none}
.fc-who .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px}
.fc-col{display:flex; align-items:center; gap:12px; min-width:0}
.fc-head .fc-col{display:block}
.fc-track{position:relative; flex:1; height:10px; border-radius:999px;
 background:rgba(255,255,255,.06); overflow:visible; min-width:40px}
.fc-track i{display:block; height:100%; border-radius:999px; min-width:2px;
 animation:fcGrow 620ms cubic-bezier(.22,.61,.36,1) both}
.fc-track i.lead{background:linear-gradient(90deg,#3D4757,#8A94A6)}
.fc-track i.ans{background:linear-gradient(90deg,#2F6BF5,#7FA8FF)}
.fc-track i.pay{background:linear-gradient(90deg,#2E8F5B,#5FD18A)}
/* засечка «итог по выборке» */
.fc-track u{position:absolute; top:-4px; width:2px; height:18px; border-radius:2px;
 background:rgba(255,255,255,.55); text-decoration:none}
.fc-v{font-size:13px; font-variant-numeric:tabular-nums; color:var(--rd-text-2);
 min-width:58px; text-align:right; flex:none}
/* «мало данных» — строка видна, но не спорит за внимание с настоящими показателями */
.fc-row.weak{opacity:.45}
.fc-row.weak:hover{opacity:.8}
.fc-weak{font-size:11px; color:var(--rd-text-3); border:1px solid var(--line);
 border-radius:999px; padding:2px 8px; white-space:nowrap; flex:none}
.fc-note{margin:14px 0 0; line-height:1.55}

/* ── Воронка одного менеджера: карточка на сегмент, рядом друг с другом ── */
.fo-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:14px}
/* в карточке менеджера этот же блок стоит в узкой правой колонке — там он в один столбец */
#mnFunnel .fo-grid{grid-template-columns:1fr; gap:10px}
#mnFunnel .fo-card{padding:14px 15px 12px}
#mnFunnel .fo-step{grid-template-columns:60px 1fr 44px 40px; gap:8px}
.fo-card{border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.028);
 padding:16px 18px 14px}
.fo-head{display:flex; align-items:baseline; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.fo-head .t{font-family:var(--font-heading); font-size:14.5px; font-weight:500}
.fo-head .n{font-size:12px; color:var(--rd-text-3); margin-left:auto; white-space:nowrap;
 font-variant-numeric:tabular-nums}
.fo-step{display:grid; grid-template-columns:64px 1fr 52px 44px; align-items:center;
 gap:10px; margin-bottom:7px}
.fo-step .l{font-size:12px; color:var(--rd-text-3)}
.fo-step .v{font-size:13px; text-align:right; font-variant-numeric:tabular-nums}
.fo-step .p{font-size:12px; text-align:right; color:var(--rd-text-3); font-variant-numeric:tabular-nums}
.fo-track{height:12px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden}
/* убывание насыщенности по шагам: воронка — последовательность, а не разные сущности */
.fo-track i{display:block; height:100%; border-radius:999px; min-width:2px;
 background:linear-gradient(90deg,#2F6BF5,#7FA8FF);
 animation:fcGrow 620ms cubic-bezier(.22,.61,.36,1) both}
.fo-foot{display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; padding-top:11px;
 border-top:1px solid rgba(255,255,255,.07); font-size:12.5px; color:var(--rd-text-3)}
.fo-foot b{color:#fff; font-weight:500; font-variant-numeric:tabular-nums}
.fo-note{margin:10px 0 0; font-size:12px; color:var(--rd-text-3)}
.fo-legend{margin:14px 0 0; line-height:1.55}
@keyframes fcGrow{from{width:0}}
@media (max-width:900px){
  .fc-row{grid-template-columns:1fr; gap:8px}
  .fc-head{display:none}
  .fc-col::before{content:attr(data-l); font-size:11.5px; color:var(--rd-text-3); min-width:86px}
}
/* Алерты в блоке «Что из этого следует»: тише, чем прежняя сплошная красная плашка —
   красным остаётся только полоса слева, текст читается белым. */
.st-pad .alert-item{background:var(--surface)!important; border:1px solid var(--line)!important;
 border-left:3px solid var(--rd-danger)!important; border-radius:14px!important;
 padding:13px 16px; margin:0; font-size:14px; color:var(--rd-text-2)}
.st-pad .alert-item b{color:#fff; font-weight:500}
.st-pad .alert-item + .alert-item{margin-top:10px}
.st-pad > .hint{margin:0}
.pt-add{margin-left:auto; display:flex; align-items:center; gap:12px; background:#fff; color:#111;
 border:0; border-radius:999px; padding:6px 8px 6px 20px; font-family:var(--font-heading);
 font-size:15px; font-weight:600; cursor:pointer}
.pt-add .plus{width:38px; height:38px; border-radius:50%; background:#111; color:#fff;
 display:grid; place-items:center; font-size:20px; font-weight:300; transition:transform 180ms ease}
.pt-add:hover .plus{transform:rotate(90deg)}
@media (max-width:820px){ .pt-add{margin-left:0; width:100%; justify-content:space-between} }

/* таблица сделок */
.pt-tablewrap{margin-top:18px; border:1px solid var(--line); border-radius:24px;
 background:var(--surface); overflow:hidden}
.pt-tablewrap .pt-scroll{overflow-x:auto}
.pt-tablewrap table{width:100%; border-collapse:collapse; font-size:14.5px}
.pt-tablewrap thead th{text-align:left; font-size:12.5px; font-weight:400; color:var(--rd-text-3);
 padding:15px 18px; border-bottom:1px solid var(--line); white-space:nowrap;
 /* Подложка СПЛОШНАЯ: шапка прилипает, и полупрозрачный фон пропускал бы под собой
    цифры при прокрутке — та же беда, что с первой колонкой (18.09.2026). */
 background:var(--sticky-bg); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.pt-tablewrap tbody td{padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.05);
 vertical-align:middle}
.pt-tablewrap tbody tr:last-child td{border-bottom:0}
.pt-tablewrap tbody tr:hover{background:rgba(255,255,255,.035)}
.pt-cl{display:flex; align-items:center; gap:12px}
.pt-cl .av{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.075);
 display:grid; place-items:center; font-size:13px; font-weight:500; flex:none}
.pt-cl .nm{font-weight:400}
.pt-cl .seg2{font-size:12.5px; color:var(--rd-text-3); margin-top:2px}
.pt-chip{display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px;
 font-size:12.5px; white-space:nowrap}
.pt-chip em{font-style:normal; width:6px; height:6px; border-radius:50%; display:block}
.c-offer{background:rgba(47,107,245,.16); color:#9FBBFF}
.c-bill{background:rgba(232,193,60,.16); color:#F0D477}
.c-push{background:rgba(232,84,127,.16); color:#F79BB6}
.c-pre{background:rgba(95,209,138,.16); color:#8FE3B0}
.pt-lvl{display:flex; gap:5px; align-items:center}
.pt-lvl u{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.18); display:block;
 transition:background .16s cubic-bezier(.22,.61,.36,1)}
.pt-lvl u.on{background:var(--hot,#E8547F)}
/* кликабельный вариант: точки сами и есть переключатель уровня */
button.pt-lvl{border:0; background:transparent; padding:7px 9px; margin:-7px -9px;
 border-radius:999px; cursor:pointer; font:inherit}
button.pt-lvl:hover{background:rgba(255,255,255,.07)}
button.pt-lvl:hover u{background:rgba(255,255,255,.34)}
button.pt-lvl:hover u.on{background:var(--hot,#E8547F)}
button.pt-lvl:active{transform:scale(.94)}
.pt-money{font-variant-numeric:tabular-nums; white-space:nowrap}
.pt-silence{font-size:13px; white-space:nowrap}
.pt-silence.ok{color:var(--rd-text-3)}
.pt-silence.warn{color:var(--rd-warn)}
.pt-silence.bad{color:var(--rd-danger)}
.pt-acts{display:flex; gap:7px; justify-content:flex-end}
.pt-icb{width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
 background:rgba(255,255,255,.075); color:var(--rd-text-2); font-size:13px; cursor:pointer;
 display:grid; place-items:center; font-family:inherit; text-decoration:none}
.pt-icb:hover{color:#fff; background:rgba(255,255,255,.13)}
.pt-icb.ai{background:rgba(47,107,245,.18); border-color:rgba(47,107,245,.42); color:#9FBBFF}
.pt-icb.ai:hover{background:var(--accent); color:#fff; border-color:var(--accent)}
.pt-tfoot{display:flex; align-items:center; gap:16px; padding:15px 18px;
 border-top:1px solid var(--line); font-size:13.5px; color:var(--rd-text-3); flex-wrap:wrap}
.pt-tfoot .sum{margin-left:auto; color:#fff; font-size:15px; font-variant-numeric:tabular-nums}

/* ── боковая панель-ящик (добавление и правка) ── */
.dw-scrim{position:fixed; inset:0; z-index:20; background:rgba(4,4,8,.62);
 -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
 opacity:0; pointer-events:none; transition:opacity 220ms ease}
.dw-scrim.on{opacity:1; pointer-events:auto}
.dw{position:fixed; z-index:21; top:0; right:0; bottom:0; width:432px; max-width:100%;
 background:linear-gradient(180deg,#141418 0%,#0D0D11 100%); border-left:1px solid var(--line);
 transform:translateX(102%); transition:transform 260ms cubic-bezier(.32,.72,0,1);
 display:flex; flex-direction:column}
.dw.on{transform:none}
.dw-head{display:flex; align-items:center; gap:12px; padding:22px 24px 18px;
 border-bottom:1px solid var(--line)}
.dw-head h2{font-family:var(--font-heading); font-size:19px; font-weight:500; margin:0}
.dw-head .x{margin-left:auto; width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
 background:rgba(255,255,255,.075); color:var(--rd-text-2); font-size:15px; cursor:pointer;
 font-family:inherit}
.dw-body{flex:1; overflow-y:auto; padding:22px 24px 26px}
.dw-body label{display:block; font-size:13px; color:var(--rd-text-3); margin-bottom:8px; margin-top:0}
/* Флажки и радио из-под этого правила выведены: раньше чекбокс в чипе сегмента
   растягивался на всю ширину ящика и ломал строку (найдено 14.09.2026). */
.dw-body input:not([type=checkbox]):not([type=radio]),
.dw-body select,.dw-body textarea{width:100%; margin-bottom:18px}
.dw-body input[type=checkbox],.dw-body input[type=radio]{width:16px; height:16px; margin:0; flex:none}

/* Чипы сегментов в ящике «⚙ Сегменты» */
.sg-list{display:flex; flex-wrap:wrap; gap:8px}
.sg-chip{display:inline-flex; align-items:center; gap:9px; padding:9px 14px;
 border:1px solid var(--line); border-radius:999px; background:var(--surface);
 font-size:13.5px; cursor:pointer; max-width:100%}
.sg-chip:hover{border-color:rgba(255,255,255,.22)}
.sg-chip .nm{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sg-chip .rule{font-size:11.5px; color:var(--rd-text-3); white-space:nowrap}
.dw-body textarea{min-height:84px; resize:vertical}
.dw-foot{padding:18px 24px 22px; border-top:1px solid var(--line); display:flex; gap:12px}
.dw-foot .primary{flex:1; padding:15px; border-radius:16px; border:0; background:#fff; color:#111;
 font-family:var(--font-heading); font-size:15px; font-weight:600; cursor:pointer}
.dw-foot .ghost{padding:15px 22px; border-radius:16px; border:1px solid var(--line);
 background:var(--surface); color:var(--rd-text-2); font-family:inherit; font-size:15px; cursor:pointer}

/* Каскад появления карточных лент.
   ВАЖНО: каскад включается только классом .is-entering, который JS вешает на вкладку
   в момент её открытия. Без этого элементы, собранные пока вкладка была display:none,
   застревают невидимыми — анимация с fill-mode:both не стартует и держит начальный кадр.
   На «Материалах» так пропали все двенадцать плиток. */
@keyframes card-rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.is-entering .pk-minis > *,
.is-entering .sc-tiles > *{animation:card-rise 340ms cubic-bezier(.22,.61,.36,1) both}
.is-entering .pk-minis > *:nth-child(1),
.is-entering .sc-tiles > *:nth-child(1){animation-delay:30ms}
.is-entering .pk-minis > *:nth-child(2),
.is-entering .sc-tiles > *:nth-child(2){animation-delay:80ms}
.is-entering .pk-minis > *:nth-child(3),
.is-entering .sc-tiles > *:nth-child(3){animation-delay:130ms}
.is-entering .pk-minis > *:nth-child(4),
.is-entering .sc-tiles > *:nth-child(4){animation-delay:180ms}
.is-entering .sc-tiles > *:nth-child(n+5){animation-delay:220ms}

/* Карточки отчётов и плитки материалов чуть приподнимаются под курсором */
.sc-tile{transition:transform 160ms cubic-bezier(.22,.61,.36,1),
 background 160ms ease, border-color 160ms ease}
.sc-tile:hover{transform:translateY(-3px)}
.sc-tile:active{transform:translateY(-1px) scale(.995)}

/* Подсветка строки при обновлении данных (см. «Анимация» в CLAUDE.md) */
@keyframes row-updated{
  0%{background-color:rgba(47,107,245,.22)}
  100%{background-color:transparent}
}
.is-updated{animation:row-updated 900ms cubic-bezier(.22,.61,.36,1)}

/* ══════ ОБОЛОЧКА ПО МАКЕТАМ ══════
   Логотип-кружок слева сверху, вертикальная рельса с иконками разделов и верхняя
   лента пилюль. Заменяет прежний сайдбар, шапку «Путь к цели» и нижнюю навигацию. */
:root{ --rail:92px }
.app{max-width:none!important; margin:0!important; padding:0 0 44px!important}
.desktop-shell{display:block!important; background:transparent!important; border:0!important;
 border-radius:0!important; box-shadow:none!important; overflow:visible!important}
.desktop-content{flex:none!important; padding:0 26px 0 var(--rail)!important; min-width:0}
.desktop-sidebar{display:none!important}
.bottom-nav,.more-sheet{display:none!important}

.kb-logo{position:fixed; left:22px; top:18px; z-index:6; width:40px; height:40px; border-radius:50%;
 background:rgba(255,255,255,.075); border:1px solid var(--line); display:grid; place-items:center;
 font-size:13px; font-weight:600; font-family:var(--font-heading); color:#fff}
.kb-rail{position:fixed; left:22px; top:50%; transform:translateY(-50%); z-index:6;
 display:flex; flex-direction:column; gap:4px; align-items:center; background:var(--surface);
 border:1px solid var(--line); border-radius:999px; padding:8px 7px}
.kb-rail button{width:38px; height:38px; border-radius:50%; border:0; background:transparent;
 font-family:inherit; font-size:15px; color:var(--rd-text-3); cursor:pointer;
 display:grid; place-items:center;
 transition:background 130ms ease, color 130ms ease,
            transform 130ms cubic-bezier(.22,.61,.36,1)}
.kb-rail button:hover{color:#fff; background:rgba(255,255,255,.075); transform:translateX(1px)}
.kb-rail button:active{transform:scale(.9)}
.kb-rail button[aria-current]{background:var(--accent); color:#fff}

.kb-topnav{display:flex; align-items:center; gap:6px; padding:18px 0 0; overflow-x:auto;
 scrollbar-width:none}
.kb-topnav::-webkit-scrollbar{display:none}
/* Бегущая белая пилюля: сама пилюля — отдельный слой под кнопками, он переезжает
   к активной вкладке, а не перекрашивается мгновенно. */
.kb-tabs{position:relative; display:flex; gap:6px}
.kb-tabpill{position:absolute; top:0; left:0; height:100%; border-radius:999px; background:#fff;
 z-index:0; opacity:0; width:0;
 transition:transform 240ms cubic-bezier(.22,.61,.36,1), width 240ms cubic-bezier(.22,.61,.36,1),
            opacity 180ms ease}
.kb-tabpill.on{opacity:1}
.kb-tab{position:relative; z-index:1; padding:10px 19px; border-radius:999px; border:0;
 background:transparent; font-family:var(--font-body); font-size:14.5px; color:var(--rd-text-2);
 cursor:pointer; white-space:nowrap; transition:color 240ms ease}
.kb-tab:hover{color:#fff}
.kb-tab[aria-current]{color:#101014; font-weight:500}
.kb-nav-right{margin-left:auto; display:flex; gap:10px; align-items:center; padding-left:16px}
.kb-circ{width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
 background:rgba(255,255,255,.075); color:#fff; font-size:15px; cursor:pointer;
 display:grid; place-items:center; position:relative; font-family:inherit;
 transition:filter 130ms ease, transform 130ms cubic-bezier(.22,.61,.36,1)}
.kb-circ:hover{filter:brightness(1.25)}
.kb-circ:active{transform:scale(.9)}
.kb-circ b{position:absolute; top:-3px; right:-3px; width:18px; height:18px; border-radius:50%;
 background:var(--rd-danger); color:#fff; font-size:10.5px; display:grid; place-items:center;
 font-weight:500}
.kb-who{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--rd-text-2);
 white-space:nowrap; cursor:pointer}
.kb-who .ava{width:36px; height:36px; border-radius:50%; overflow:hidden;
 background:linear-gradient(145deg,#E9C6A4,#C99A71); display:grid; place-items:center;
 font-size:14px; color:#3A2A1E; font-weight:500}
.kb-who .ava img{width:100%; height:100%; object-fit:cover}
.kb-who .role{font-size:11.5px; color:var(--rd-text-3); border:1px solid var(--line);
 border-radius:999px; padding:2px 8px}

@media (max-width:820px){
  :root{ --rail:20px }
  .kb-rail{display:none}
  .kb-logo{position:static; margin:16px 0 0 20px}
  .desktop-content{padding:0 20px!important}
  .kb-who span:not(.ava){display:none}
}

/* ══════ КАБИНЕТ: ШАПКА, ЛИСТЫ, ПОЛОСА, НИЖНИЕ БЛОКИ ══════
   Кабинет собран по макету design/01-kabinet.html. Префикс lf- (лист) и kb- (кабинет):
   имена прототипа .sheet/.fl/.glow/.tab/.dot в панели заняты другим смыслом. */

/* ── шапка экрана ── */
.kb-head{display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; padding:6px 2px 0}
.kb-hello{font-family:var(--font-heading); font-size:34px; font-weight:500; letter-spacing:-.01em;
 line-height:1.1; margin:0}
.kb-sub{font-size:14px; color:var(--rd-text-3); margin-top:7px}
.kb-day{margin-left:auto; display:flex; align-items:center; gap:18px}
.kb-stat{text-align:right}
.kb-stat .v{font-family:var(--font-heading); font-size:19px; font-weight:500;
 font-variant-numeric:tabular-nums}
.kb-stat .k{font-size:12.5px; color:var(--rd-text-3); margin-top:2px}
.kb-sep{width:1px; height:34px; background:var(--line)}
.kb-head-actions{display:flex; align-items:center; gap:8px}
@media (max-width:820px){
  .kb-hello{font-size:27px}
  .kb-day{width:100%; margin-left:0; justify-content:space-between; gap:10px}
  .kb-stat{text-align:left}
}

/* ── лента листов ──
   Ленте нужен запас по краям, иначе прокрутка по горизонтали срежет свечение и подъём. */
.lf-rail{display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
 scrollbar-width:none; padding:30px 18px 38px; margin:4px -16px 0; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ .lf-rail{scroll-behavior:auto} }
.lf-rail::-webkit-scrollbar{display:none}
/* Стрелки прокрутки ленты: мышью колесом вбок не поедешь, а полоса прокрутки скрыта.
   Появляются только когда есть куда ехать, и гаснут на краях. */
.lf-railbox{position:relative}
.lf-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:4;
 width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
 background:rgba(12,12,17,.86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
 color:#fff; font-family:var(--font-heading); font-size:22px; line-height:1; cursor:pointer;
 display:grid; place-items:center; padding:0 0 3px;
 box-shadow:0 12px 26px -14px rgba(0,0,0,.9);
 transition:opacity .16s cubic-bezier(.22,.61,.36,1), background .16s ease, transform .16s ease}
.lf-arrow.prev{left:0}
.lf-arrow.next{right:0}
.lf-arrow:hover{background:rgba(30,30,40,.96); transform:translateY(-50%) scale(1.06)}
.lf-arrow:active{transform:translateY(-50%) scale(.94)}
.lf-arrow.off{opacity:0; pointer-events:none}
.lf{flex:0 0 312px; scroll-snap-align:start}
.is-entering .lf{animation:lf-rise 560ms cubic-bezier(.22,.61,.36,1) both}
.is-entering .lf:nth-child(1){animation-delay:40ms}
.is-entering .lf:nth-child(2){animation-delay:110ms}
.is-entering .lf:nth-child(3){animation-delay:180ms}
.is-entering .lf:nth-child(4){animation-delay:250ms}
.is-entering .lf:nth-child(5){animation-delay:320ms}
.is-entering .lf:nth-child(6){animation-delay:390ms}
@keyframes lf-rise{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}

/* качание — на обёртке, увеличение — на самом листе.
   Если оба трансформа повесить на один элемент, CSS-анимация перебьёт ховер. */
.lf-float{position:relative; animation:lf-bob 7s ease-in-out infinite}
.lf:nth-child(2) .lf-float{animation-delay:-1.2s}
.lf:nth-child(3) .lf-float{animation-delay:-2.4s}
.lf:nth-child(4) .lf-float{animation-delay:-3.6s}
.lf:nth-child(5) .lf-float{animation-delay:-4.8s}
.lf:nth-child(6) .lf-float{animation-delay:-6s}
@keyframes lf-bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}
.lf-float:hover{animation-play-state:paused}

.lf-glow{position:absolute; inset:-16px -20px -28px; border-radius:48px; z-index:0;
 filter:blur(46px); opacity:.62; transform:scale(.9); pointer-events:none;
 transition:opacity 340ms cubic-bezier(.22,.61,.36,1),
            transform 340ms cubic-bezier(.22,.61,.36,1), filter 340ms ease}
.lf-drop{position:absolute; left:12%; right:12%; bottom:-18px; height:26px; border-radius:50%;
 background:rgba(0,0,0,.66); filter:blur(17px); z-index:0; pointer-events:none;
 transition:all 340ms cubic-bezier(.22,.61,.36,1)}

.lf-sheet{position:relative; z-index:1; height:462px; border-radius:30px; overflow:hidden;
 padding:22px; display:flex; flex-direction:column; color:#fff; text-align:left;
 -webkit-backdrop-filter:blur(30px) saturate(165%); backdrop-filter:blur(30px) saturate(165%);
 box-shadow:var(--rd-shadow-card), inset 0 1px 0 rgba(255,255,255,.26),
            inset 0 -60px 90px -60px rgba(0,0,0,.55);
 transition:transform 340ms cubic-bezier(.22,.61,.36,1), box-shadow 340ms ease}
.lf-float:hover .lf-sheet{transform:translateY(-14px) scale(1.045); box-shadow:var(--rd-shadow-pop)}
.lf-float:hover .lf-glow{opacity:1; transform:scale(1.08); filter:blur(52px)}
.lf-float:hover .lf-drop{left:6%; right:6%; bottom:-30px; height:32px; filter:blur(24px)}

/* светящаяся кромка: 1.2px через mask-composite. Толще нельзя — становится рамкой,
   и лист сразу выглядит плоским. Проверено. */
.lf-sheet::before{content:''; position:absolute; inset:0; border-radius:inherit; padding:1.2px;
 z-index:4; pointer-events:none; opacity:.8;
 background:linear-gradient(150deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.30) 22%,
  rgba(255,255,255,.06) 46%,rgba(255,255,255,.10) 68%,rgba(255,255,255,.46) 100%);
 -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
         mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
 -webkit-mask-composite:xor; mask-composite:exclude;
 transition:opacity 340ms ease}
.lf-float:hover .lf-sheet::before{opacity:1}

/* блик под курсором — --mx/--my ставит JS на pointermove */
.lf-sheen{position:absolute; inset:0; border-radius:inherit; z-index:3; pointer-events:none;
 opacity:0; transition:opacity 280ms ease;
 background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),
  rgba(255,255,255,.24),rgba(255,255,255,.07) 38%,transparent 62%)}
.lf-float:hover .lf-sheen{opacity:1}
.lf-sheet > *{position:relative; z-index:1}
/* ВНИМАНИЕ. Правило выше — слой содержимого листа — бьёт по ВСЕМ прямым детям
   с той же специфичностью (0,1,0), что и их собственные правила, и стоит ниже
   по файлу. Значит оно перебивает и `position:absolute`, и `z-index` у тех детей,
   которые обязаны лежать отдельным слоем. Блик так дважды оказывался невидимым:
   сперва ушёл под содержимое по z-index, а после починки z-index остался
   `position:relative` — то есть пустым span'ом нулевой высоты, и блика
   по-прежнему не было видно, хотя все замеры (opacity, --mx/--my) были верные.
   Любой новый абсолютный ребёнок листа надо добавлять сюда же. */
.lf-sheet > .lf-sheen{position:absolute; inset:0; z-index:3}
.lf-sheet > .lf-tip{position:absolute; z-index:3}

/* ── внутренности листа ── */
.lf-head{display:flex; align-items:flex-start; gap:10px; margin-bottom:20px}
.lf-head h2{font-family:var(--font-heading); font-size:17px; font-weight:500; margin:0; color:#fff}
.lf-open{margin-left:auto; width:38px; height:38px; border-radius:50%; border:0; flex:none;
 background:#fff; color:#111; font-size:15px; cursor:pointer; display:grid; place-items:center;
 font-family:inherit;
 transition:transform 210ms cubic-bezier(.22,.61,.36,1), box-shadow 210ms ease}
/* Стрелка отзывается на наведение НА ВЕСЬ ЛИСТ, а не только на саму себя:
   лист поднимается, и кнопка уезжает вместе с ним. Так в макете. */
.lf-float:hover .lf-open{transform:translate(2px,-2px); box-shadow:0 8px 18px -6px rgba(0,0,0,.6)}
.lf-open:active{transform:scale(.88)}
.lf-cap{font-size:13px; color:rgba(255,255,255,.68); margin-top:6px}
.lf-foot{margin-top:auto}
.lf-scroll{overflow-y:auto; scrollbar-width:none}
.lf-scroll::-webkit-scrollbar{display:none}
.lf-sheet .hint{color:rgba(255,255,255,.6)!important}

/* матрица оплат за запуск («Мой день») */
.lf-matrix{display:grid; grid-template-columns:repeat(8,1fr); gap:11px; margin:24px 0 auto}
/* Точка видима сама по себе. Появление включается классом .is-entering, который
   switchTab вешает на открываемую вкладку, — ровно как каскад листов.
   ВАЖНО: держать animation с fill-mode:both прямо на .lf-matrix u нельзя.
   Тогда до старта анимации элемент держит нулевой кадр, и если анимация
   не стартовала (вкладка была скрыта, кадры придушены), матрица остаётся
   пустой навсегда. На этом уже обжигались 13.09.2026. */
.lf-matrix u{width:9px; height:9px; border-radius:50%; display:block;
 border:1.2px solid rgba(255,255,255,.45)}
.is-entering .lf-matrix u{animation:lf-dot 200ms ease both}
@keyframes lf-dot{from{opacity:0} to{opacity:1}}
/* последовательное заполнение — по 14 мс на точку */
.is-entering .lf-matrix u:nth-child(1){animation-delay:0ms}
.is-entering .lf-matrix u:nth-child(2){animation-delay:14ms}
.is-entering .lf-matrix u:nth-child(3){animation-delay:28ms}
.is-entering .lf-matrix u:nth-child(4){animation-delay:42ms}
.is-entering .lf-matrix u:nth-child(5){animation-delay:56ms}
.is-entering .lf-matrix u:nth-child(6){animation-delay:70ms}
.is-entering .lf-matrix u:nth-child(7){animation-delay:84ms}
.is-entering .lf-matrix u:nth-child(8){animation-delay:98ms}
.is-entering .lf-matrix u:nth-child(9){animation-delay:112ms}
.is-entering .lf-matrix u:nth-child(10){animation-delay:126ms}
.is-entering .lf-matrix u:nth-child(11){animation-delay:140ms}
.is-entering .lf-matrix u:nth-child(12){animation-delay:154ms}
.is-entering .lf-matrix u:nth-child(13){animation-delay:168ms}
.is-entering .lf-matrix u:nth-child(14){animation-delay:182ms}
.is-entering .lf-matrix u:nth-child(15){animation-delay:196ms}
.is-entering .lf-matrix u:nth-child(16){animation-delay:210ms}
.is-entering .lf-matrix u:nth-child(17){animation-delay:224ms}
.is-entering .lf-matrix u:nth-child(18){animation-delay:238ms}
.is-entering .lf-matrix u:nth-child(19){animation-delay:252ms}
.is-entering .lf-matrix u:nth-child(20){animation-delay:266ms}
.is-entering .lf-matrix u:nth-child(21){animation-delay:280ms}
.is-entering .lf-matrix u:nth-child(22){animation-delay:294ms}
.is-entering .lf-matrix u:nth-child(23){animation-delay:308ms}
.is-entering .lf-matrix u:nth-child(24){animation-delay:322ms}
.is-entering .lf-matrix u:nth-child(25){animation-delay:336ms}
.is-entering .lf-matrix u:nth-child(26){animation-delay:350ms}
.is-entering .lf-matrix u:nth-child(27){animation-delay:364ms}
.is-entering .lf-matrix u:nth-child(28){animation-delay:378ms}
.is-entering .lf-matrix u:nth-child(29){animation-delay:392ms}
.is-entering .lf-matrix u:nth-child(30){animation-delay:406ms}
.is-entering .lf-matrix u:nth-child(31){animation-delay:420ms}
.is-entering .lf-matrix u:nth-child(32){animation-delay:434ms}
.is-entering .lf-matrix u:nth-child(33){animation-delay:448ms}
.is-entering .lf-matrix u:nth-child(34){animation-delay:462ms}
.is-entering .lf-matrix u:nth-child(35){animation-delay:476ms}
.is-entering .lf-matrix u:nth-child(36){animation-delay:490ms}
.is-entering .lf-matrix u:nth-child(37){animation-delay:504ms}
.is-entering .lf-matrix u:nth-child(38){animation-delay:518ms}
.is-entering .lf-matrix u:nth-child(39){animation-delay:532ms}
.is-entering .lf-matrix u:nth-child(40){animation-delay:546ms}
.lf-matrix u.f{background:#fff; border-color:#fff}
.lf-matrix u.t{background:rgba(255,255,255,.35); border-color:#fff;
 box-shadow:0 0 0 3px rgba(255,255,255,.22)}
.lf-legend{margin-left:auto; font-size:12.5px; color:rgba(255,255,255,.72); line-height:1.75;
 text-align:right}
.lf-legend em{font-style:normal; display:inline-block; width:7px; height:7px; border-radius:50%;
 margin-right:7px}

/* задачи («Планёрка») */
.lf-task{display:flex; align-items:center; gap:12px; padding:12px 0;
 border-bottom:1px solid rgba(255,255,255,.08); font-size:14px}
.lf-task:last-child{border-bottom:0}
/* Задача на листе «Планёрка» кликабельна: отметка уходит прямо в планёрку и видна РОПу
   в «Задачах». Кнопка должна выглядеть строкой, а не кнопкой — поэтому сбрасываем всё,
   что браузер рисует у <button> по умолчанию. */
.lf-task-btn{width:100%; background:none; border:0; padding:12px 0; margin:0;
 font-family:inherit; font-size:inherit; color:inherit; text-align:left; cursor:pointer;
 border-bottom:1px solid rgba(255,255,255,.1)}
.lf-task-btn:last-child{border-bottom:0}
.lf-task-btn:hover .lf-chk{border-color:rgba(255,255,255,.6)}
.lf-task-btn:active .lf-chk{transform:scale(.9)}
.lf-task-btn:disabled{opacity:.6; cursor:default}
/* у РОПа вместо галочки — сколько человек из группы закрыли задачу */
.lf-count{min-width:38px; height:21px; padding:0 6px; border-radius:7px; flex:none;
 display:grid; place-items:center; font-size:11.5px; font-variant-numeric:tabular-nums;
 border:1.4px solid rgba(255,255,255,.28); color:rgba(255,255,255,.75)}
.lf-count.on{background:var(--rd-ok); border-color:var(--rd-ok); color:#0B1A16}

.lf-chk{width:21px; height:21px; border-radius:7px; flex:none; display:grid; place-items:center;
 font-size:12px; border:1.4px solid rgba(255,255,255,.35);
 transition:background 130ms ease, border-color 130ms ease, color 130ms ease,
            transform 130ms cubic-bezier(.22,.61,.36,1)}
.lf-chk.on{background:var(--rd-ok); border-color:var(--rd-ok); color:#0B1A16; transform:scale(1.08)}
.lf-task.done span:last-child{color:rgba(255,255,255,.42); text-decoration:line-through}
/* «Важное» из планёрки бывает длинным полотном — обрезаем пятью строками,
   иначе оно выдавливает из листа всё остальное. Полный текст — во вкладке «Планёрка». */
.lf-note{background:rgba(255,255,255,.08); border-radius:14px; padding:13px 15px; font-size:13.5px;
 color:rgba(255,255,255,.8); line-height:1.5; margin-top:auto; flex:none;
 display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden}

/* рейтинг («Команда») */
.lf-rank{display:flex; align-items:center; gap:13px; padding:13px 0;
 border-bottom:1px solid rgba(255,255,255,.08)}
.lf-rank:last-child{border-bottom:0}
.lf-rank .n{width:22px; color:rgba(255,255,255,.42); font-size:14px}
.lf-rank .av{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.15);
 display:grid; place-items:center; font-size:13px; flex:none}
.lf-rank .nm{font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lf-rank .pc{margin-left:auto; font-size:14.5px; font-weight:500; font-variant-numeric:tabular-nums}
.lf-rank.me{background:rgba(255,255,255,.07); margin:0 -10px; padding:13px 10px;
 border-radius:12px; border-bottom:0}
.lf-bar{height:3px; border-radius:2px; background:rgba(255,255,255,.15); margin-top:14px;
 position:relative}
.lf-bar i{position:absolute; left:0; top:0; bottom:0; border-radius:2px; background:var(--rd-warn);
 display:block; width:0;
 transition:width 950ms cubic-bezier(.22,.61,.36,1) 320ms}

/* мишень («Цель запуска») */
.lf-pair{display:flex; align-items:flex-start}
.lf-pair .r{margin-left:auto; text-align:right}
.lf-target{position:relative; height:178px; margin:2px 0}
.lf-target span{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
 border-radius:50%}
.lf-t-dash{width:148px; height:148px; border:1.5px dotted rgba(255,255,255,.6)}
.lf-t-solid{width:104px; height:104px; border:1.5px solid rgba(255,255,255,.9)}
.lf-t-ico{width:34px; height:34px; display:grid; place-items:center; font-size:19px}

/* ── цвета закреплены за разделами (палитра в CLAUDE.md) ──
   Заливка прозрачная: под листом должен просвечивать дрейфующий фон, иначе стекло мертвеет. */
.s-day{background:
  radial-gradient(62% 42% at 26% 74%,rgba(255,255,255,.22),transparent 70%),
  linear-gradient(165deg,rgba(196,42,107,.80),rgba(156,31,99,.76) 45%,rgba(110,26,99,.82))}
.s-plan{background:
  radial-gradient(58% 40% at 72% 22%,rgba(110,224,158,.26),transparent 70%),
  linear-gradient(168deg,rgba(31,80,62,.80),rgba(18,45,37,.78) 55%,rgba(10,26,22,.84))}
.s-team{background:
  radial-gradient(58% 40% at 28% 24%,rgba(244,205,84,.26),transparent 70%),
  linear-gradient(168deg,rgba(80,50,22,.82),rgba(48,28,12,.78) 52%,rgba(22,12,6,.86))}
.s-pot{background:
  radial-gradient(46% 34% at 50% 48%,rgba(255,255,255,.16),transparent 70%),
  linear-gradient(170deg,rgba(38,38,46,.80),rgba(20,20,25,.80) 60%,rgba(11,11,15,.86))}
.s-goal{background:
  radial-gradient(56% 36% at 62% 24%,rgba(8,40,120,.42),transparent 72%),
  linear-gradient(170deg,rgba(26,107,232,.80),rgba(46,99,216,.76) 40%,rgba(142,146,222,.74) 78%,rgba(185,179,232,.78))}
.s-report{background:
  radial-gradient(58% 40% at 68% 22%,rgba(140,100,255,.32),transparent 70%),
  linear-gradient(168deg,rgba(63,32,121,.82),rgba(39,18,82,.8) 52%,rgba(20,8,40,.88))}

/* питомец — металлический лист */
.s-pet{background:linear-gradient(160deg,#EDEFF2 0%,#C9CDD4 38%,#F4F5F7 62%,#AEB4BE 100%);
 padding:0; color:#1C2026}
.s-pet .lf-metal{position:absolute; inset:0; z-index:0;
 background:repeating-linear-gradient(92deg,rgba(255,255,255,.5) 0 2px,
  rgba(118,128,143,.32) 2px 5px,rgba(255,255,255,.2) 5px 9px); filter:blur(.4px)}
.s-pet .lf-tag{position:absolute; z-index:2; top:20px; left:20px; font-size:15px; font-weight:500;
 color:#1C2026; font-family:var(--font-heading)}
.s-pet .lf-open{position:absolute; z-index:2; top:18px; right:18px; margin:0}
/* Свободного места на листе ровно между заголовком и стопкой карточек: 462 − 291
   снизу − заголовок сверху. Размер коробки задаёт JS (PET_BOX_SIZE), высота здесь
   не фиксируется. */
.s-pet .lf-pet{position:absolute; z-index:1; top:38px; left:50%; transform:translateX(-50%);
 filter:drop-shadow(0 14px 26px rgba(40,50,70,.4))}
.s-pet .lf-stack{position:absolute; z-index:2; left:14px; right:14px; bottom:14px;
 display:flex; flex-direction:column; gap:10px}
.lf-subcard{background:rgba(20,20,24,.88); -webkit-backdrop-filter:blur(14px);
 backdrop-filter:blur(14px); border-radius:20px; padding:15px 16px; color:#fff}
.lf-subrow{display:flex; align-items:center; gap:13px}
.lf-subrow .t{font-size:15px}
.lf-subrow .s{font-size:12.5px; color:rgba(255,255,255,.42); margin-top:3px}
.lf-btn-w{margin-left:auto; width:42px; height:42px; border-radius:50%; border:0; background:#fff;
 color:#111; font-size:16px; cursor:pointer; flex:none; display:grid; place-items:center;
 font-family:inherit; transition:transform 130ms cubic-bezier(.22,.61,.36,1)}
.lf-btn-w:hover{transform:scale(1.1)}
.lf-btn-w:active{transform:scale(.9)}

/* Речь питомца и ответ на «поддержать» живут теперь в комнате, на листе их нет. */
/* Реплика и «поддержка» приехали из светлой темы: белый фон #e9f6ee и текст цветом
   --success на тёмном листе давали блёклые буквы на почти чёрной плашке. Здесь обе
   строки переписаны под «Листы»: тихая стеклянная подложка, читаемый текст и цветная
   полоска слева вместо цветного фона — состояние видно, а текст не спорит с фоном. */
.pr-side .support-msg:empty{display:none}
.pr-side .pet-speech,
.pr-side .support-msg{
  margin:14px 0 0; padding:12px 14px 12px 15px; border-radius:14px; font-size:13.5px;
  line-height:1.5; background:rgba(255,255,255,.05); border:1px solid var(--line);
  border-left:3px solid rgba(255,255,255,.22); color:var(--rd-text-2)}
.pr-side .pet-speech.hungry{border-left-color:var(--rd-warn); color:rgba(255,255,255,.78)}
.pr-side .pet-speech.happy{border-left-color:var(--rd-ok); color:rgba(255,255,255,.82)}
.pr-side .support-msg{border-left-color:#E8547F; color:rgba(255,255,255,.82)}

.lf-period{margin-left:auto; padding:9px 16px 12px; border-radius:999px;
 background:rgba(255,255,255,.075); font-size:12.5px; color:rgba(255,255,255,.62);
 text-align:center; position:relative; white-space:nowrap}
.lf-period::after{content:''; position:absolute; left:50%; bottom:7px; transform:translateX(-50%);
 width:22px; height:2.5px; background:#fff; border-radius:2px}

/* потенциалы — орбита */
.lf-orbit{position:relative; height:184px; margin-top:22px}
.lf-orbit .ring{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
 border-radius:50%; border:1px solid rgba(255,255,255,.13)}
.lf-orbit .r1{width:96px; height:96px}
.lf-orbit .r2{width:128px; height:128px}
/* Кольцо и пунктир мишени крутятся только под курсором — фоном это шумит.
   В keyframes обязателен translate(-50%,-50%): иначе кольцо на первом кадре
   прыгает из центра в угол. */
.lf-float:hover .lf-orbit .r2{animation:lf-spin 22s linear infinite}
.lf-float:hover .lf-t-dash{animation:lf-spin-slow 40s linear infinite}
@keyframes lf-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes lf-spin-slow{to{transform:translate(-50%,-50%) rotate(360deg)}}
.lf-orbit .av{position:absolute; width:42px; height:42px; border-radius:50%; background:#fff;
 color:#1A1A1E; display:grid; place-items:center; font-size:14px; font-weight:500}
.lf-orbit .av.c{left:50%; top:50%; transform:translate(-50%,-50%); width:54px; height:54px;
 font-size:16px}
.lf-tip{position:absolute; z-index:3; left:14px; right:40px; bottom:64px;
 background:rgba(38,38,44,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
 border-radius:16px; padding:13px 15px}
.lf-tip .big{font-family:var(--font-heading); font-size:25px; font-weight:500;
 font-variant-numeric:tabular-nums}
.lf-tip .s{font-size:12.5px; color:rgba(255,255,255,.42); margin-top:3px}
.lf-ghost{margin-left:auto; padding:11px 20px; border-radius:999px; border:0;
 background:rgba(255,255,255,.075); font-size:13.5px; color:rgba(255,255,255,.62);
 cursor:pointer; font-family:inherit;
 transition:background 130ms ease, color 130ms ease}
.lf-ghost:hover{background:rgba(255,255,255,.14); color:#fff}

/* ── КАБИНЕТ РОПа (макет 04-kabinet-ropa.html) ── */
/* переключатель охвата под приветствием */
.kb-scope{display:flex; gap:4px; background:var(--surface); border:1px solid var(--line);
 border-radius:999px; padding:4px; margin-top:18px; width:max-content; max-width:100%;
 overflow-x:auto; scrollbar-width:none}
.kb-scope::-webkit-scrollbar{display:none}
.kb-scope button{border:0; background:transparent; font-family:inherit; font-size:14px;
 color:var(--rd-text-2); padding:9px 17px; border-radius:999px; cursor:pointer; white-space:nowrap}
.kb-scope button:hover{color:#fff}
.kb-scope button[aria-current]{background:rgba(255,255,255,.075); color:#fff; font-weight:500}

/* 1 — выручка команды */
.s-rev{background:
  radial-gradient(60% 40% at 28% 72%,rgba(255,255,255,.17),transparent 70%),
  linear-gradient(165deg,rgba(196,42,107,.80),rgba(156,31,99,.76) 45%,rgba(110,26,99,.82))}
.lf-plan{display:flex; align-items:center; gap:10px; font-size:12.5px;
 color:rgba(255,255,255,.7); margin-bottom:16px}
.lf-plan .tr{flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.2); position:relative}
.lf-plan .tr i{position:absolute; left:0; top:0; bottom:0; background:#fff; border-radius:2px; display:block}

/* 2 — требует внимания */
.s-alert{background:
  radial-gradient(58% 40% at 70% 24%,rgba(232,83,74,.30),transparent 70%),
  linear-gradient(165deg,rgba(94,23,34,.84),rgba(58,13,21,.8) 52%,rgba(30,6,11,.88))}
.lf-al{display:flex; align-items:flex-start; gap:12px; padding:12px 0;
 border-bottom:1px solid rgba(255,255,255,.08)}
.lf-al:last-child{border-bottom:0}
.lf-al .ic{width:30px; height:30px; border-radius:10px; display:grid; place-items:center;
 font-size:13px; flex:none}
.lf-al .t{font-size:14px; line-height:1.35}
.lf-al .s{font-size:12px; color:rgba(255,255,255,.5); margin-top:3px}
.lf-al .n{margin-left:auto; font-family:var(--font-heading); font-size:17px; font-weight:500;
 font-variant-numeric:tabular-nums}

/* 3 — гонка команды: отстающий красным */
.lf-rank.low .pc{color:var(--rd-danger)}

/* 4 — планёрка команды: кто отметился / кто нет */
.lf-who4{margin-left:auto; display:flex}
.lf-who4 span{width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.16);
 border:1.5px solid #10261F; margin-left:-7px; display:grid; place-items:center; font-size:10px}
.lf-miss{margin-left:auto; font-size:12.5px; color:var(--rd-warn); white-space:nowrap}

/* 5 — в работе у команды */
.s-fun{background:
  radial-gradient(46% 34% at 50% 48%,rgba(255,255,255,.13),transparent 68%),
  linear-gradient(170deg,rgba(26,26,30,.80),rgba(17,17,20,.80) 60%,rgba(12,12,15,.86))}
.lf-fr{margin:10px 0}
.lf-fr .l{display:flex; align-items:baseline; font-size:13.5px; color:rgba(255,255,255,.62);
 margin-bottom:7px}
.lf-fr .l b{margin-left:auto; color:#fff; font-size:15px; font-weight:500;
 font-variant-numeric:tabular-nums}
.lf-fr .tr{height:9px; border-radius:5px; background:rgba(255,255,255,.07); position:relative}
.lf-fr .tr i{position:absolute; left:0; top:0; bottom:0; border-radius:5px; display:block}

/* 7 — отчёт */
.s-rep{background:
  radial-gradient(58% 40% at 68% 22%,rgba(140,100,255,.32),transparent 70%),
  linear-gradient(168deg,rgba(63,32,121,.82),rgba(39,18,82,.8) 52%,rgba(20,8,40,.88))}
.lf-rrow{display:flex; align-items:baseline; gap:12px; padding:11px 0;
 border-bottom:1px solid rgba(255,255,255,.09); font-size:14px}
.lf-rrow:last-child{border-bottom:0}
.lf-rrow .k{color:rgba(255,255,255,.62)}
.lf-rrow .v{margin-left:auto; font-size:16px; font-weight:500; font-variant-numeric:tabular-nums}
.lf-rnote{font-size:12.5px; color:rgba(255,255,255,.6); line-height:1.5; margin-top:auto}

/* кнопка «Собрать планёрку» в полосе РОПа */
.kb-act{display:flex; align-items:center; gap:12px; margin-left:auto; background:#fff; color:#111;
 border:0; border-radius:999px; padding:7px 10px 7px 20px; font-family:var(--font-heading);
 font-size:15.5px; font-weight:600; cursor:pointer; box-shadow:var(--rd-shadow-card);
 transition:transform 130ms cubic-bezier(.22,.61,.36,1), box-shadow 210ms ease}
.kb-act:hover{transform:translateY(-2px); box-shadow:var(--rd-shadow-pop)}
.kb-act:active{transform:scale(.97)}
.kb-act .plus{width:40px; height:40px; border-radius:50%; background:#111; color:#fff;
 display:grid; place-items:center; font-size:18px;
 transition:transform 210ms cubic-bezier(.22,.61,.36,1)}
.kb-act:hover .plus{transform:rotate(90deg)}
@media (max-width:820px){ .kb-act{margin-left:0; width:100%; justify-content:space-between} }

/* таблица менеджеров в нижнем блоке */
.kb-tbl table{width:100%; border-collapse:collapse; font-size:14.5px}
.kb-tbl thead th{text-align:left; font-size:12.5px; font-weight:400; color:var(--rd-text-3);
 padding:12px 20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
 white-space:nowrap}
.kb-tbl td{padding:13px 20px; border-bottom:1px solid rgba(255,255,255,.05);
 font-variant-numeric:tabular-nums}
.kb-mgr{display:flex; align-items:center; gap:12px}
.kb-mgr .av{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.075);
 display:grid; place-items:center; font-size:13px; font-weight:500; flex:none}
.kb-mgr .g{font-size:12px; color:var(--rd-text-3); margin-top:2px}
.kb-pbar{display:flex; align-items:center; gap:10px}
.kb-pbar .tr{width:74px; height:6px; border-radius:3px; background:rgba(255,255,255,.08);
 position:relative; flex:none}
.kb-pbar .tr i{position:absolute; left:0; top:0; bottom:0; border-radius:3px; display:block}
.kb-quiet{font-size:13px}
.kb-quiet.ok{color:var(--rd-text-3)}
.kb-quiet.warn{color:var(--rd-warn)}
.kb-quiet.bad{color:var(--rd-danger)}
.kb-icb{width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
 background:rgba(255,255,255,.075); color:var(--rd-text-2); font-size:13px; cursor:pointer;
 display:grid; place-items:center; font-family:inherit}
.kb-icb:hover{color:#fff; background:rgba(255,255,255,.13)}

/* запросы помощи */
.kb-req{padding:15px 20px; border-top:1px solid rgba(255,255,255,.05); display:flex; gap:13px}
.kb-req .av{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.075);
 display:grid; place-items:center; font-size:13px; font-weight:500; flex:none}
.kb-req .nm{font-size:14.5px; display:flex; align-items:baseline; gap:9px}
.kb-req .nm em{font-style:normal; font-size:12px; color:var(--rd-text-3)}
.kb-req p{font-size:13.5px; color:var(--rd-text-2); line-height:1.5; margin-top:6px}
.kb-req .row{display:flex; gap:9px; margin-top:11px}
.kb-req .row button{padding:8px 15px; border-radius:999px; border:1px solid var(--line);
 background:rgba(255,255,255,.075); color:var(--rd-text-2); font-family:inherit; font-size:13px;
 cursor:pointer}
.kb-req .row button.pri{background:#fff; color:#111; border-color:#fff; font-weight:500}

/* ── полоса под лентой ── */
.kb-strip{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:0 2px}
.kb-pill{display:flex; align-items:center; gap:10px; background:var(--surface);
 border:1px solid var(--line); border-radius:999px; padding:8px 16px 8px 18px; font-size:13.5px;
 color:var(--rd-text-2)}
.kb-pill b{width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.075);
 display:grid; place-items:center; font-size:12.5px; color:#fff; font-weight:500;
 font-variant-numeric:tabular-nums}
.kb-pay{display:flex; align-items:center; gap:12px; margin-left:auto; background:#fff; color:#111;
 border:0; border-radius:999px; padding:7px 10px 7px 20px; font-family:var(--font-heading);
 font-size:15.5px; font-weight:600; cursor:pointer; box-shadow:var(--rd-shadow-card);
 transition:transform 130ms cubic-bezier(.22,.61,.36,1), box-shadow 210ms ease}
.kb-pay:hover{transform:translateY(-2px); box-shadow:var(--rd-shadow-pop)}
.kb-pay:active{transform:scale(.97)}
.kb-pay .plus{width:40px; height:40px; border-radius:50%; background:#111; color:#fff;
 display:grid; place-items:center; font-size:20px; font-weight:300;
 transition:transform 210ms cubic-bezier(.22,.61,.36,1)}
.kb-pay:hover .plus{transform:rotate(90deg)}
@media (max-width:820px){ .kb-pay{margin-left:0; width:100%; justify-content:space-between} }

/* ── нижние блоки ── */
.kb-cols{display:grid; grid-template-columns:1.6fr 1fr; gap:18px; margin-top:18px}
@media (max-width:1100px){ .kb-cols{grid-template-columns:1fr} }
.kb-block{background:var(--surface); border:1px solid var(--line); border-radius:22px;
 overflow:hidden}
.kb-block h3{font-family:var(--font-heading); font-size:15px; font-weight:500;
 padding:18px 20px 12px; display:flex; align-items:center; gap:10px; margin:0}
.kb-block h3 .n{margin-left:auto; font-size:13px; color:var(--rd-text-3); font-weight:400}
.kb-row{display:flex; align-items:center; gap:16px; padding:13px 20px;
 border-top:1px solid rgba(255,255,255,.05); font-size:14.5px}
.kb-row .cnt{width:38px; height:38px; border-radius:50%; background:#fff; color:#111;
 display:grid; place-items:center; font-size:14px; font-weight:500; flex:none;
 font-variant-numeric:tabular-nums}
.kb-row .nm{width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kb-row .st{color:var(--rd-text-3); font-size:13.5px}
.kb-row .days{margin-left:auto; color:var(--rd-text-3); font-size:13px}
.kb-row .sum{width:112px; text-align:right; font-variant-numeric:tabular-nums}
.kb-row .go{width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
 background:rgba(255,255,255,.075); color:var(--rd-text-2); font-size:13px; cursor:pointer;
 display:grid; place-items:center; font-family:inherit}
.kb-body{padding:18px 20px 20px}
@media (max-width:820px){
  .kb-row .nm{width:auto}
  .kb-row .st,.kb-row .days{display:none}
}

/* ══════ ПЕРФОРИРОВАННЫЕ ЦИФРЫ ══════
   Точечная маска через background-clip:text. Только крупный кегль —
   в таблицах и мелких подписях цифры остаются обычными. */
.num-dot{
 /* Вариант «E», выбран заказчицей 14.09.2026. Раньше было начертание 600 и точка 36 %
    клетки — на цветных листах (синий, розовый) штрих распадался и число не читалось.
    Три поправки разом: жирнее шрифт, крупнее точки, мягкая тень. Тень тут не для красоты:
    белые точки на светлом синем сливались с фоном, и именно она их отделяет. */
 letter-spacing:.01em;
 font-weight:800;
 background-image:radial-gradient(circle at center,currentColor 48%,transparent 50%);
 background-size:5px 5px;
 -webkit-background-clip:text; background-clip:text;
 -webkit-text-fill-color:transparent;
 filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45))}
@supports not ((-webkit-background-clip:text) or (background-clip:text)) {
 /* браузер не умеет маску по тексту — оставляем обычные цифры, а не пустое место */
 .num-dot{background-image:none; -webkit-text-fill-color:currentColor}
}

/* ══════ СВЕЧЕНИЕ КАРТОЧЕК ══════
   Та же кромка, что у обложек, но тише: карточек на экране много. */
.card{position:relative}
.card::before{content:''; position:absolute; inset:0; border-radius:inherit; padding:1.2px;
 z-index:0; pointer-events:none; opacity:.5;
 background:linear-gradient(150deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.20) 24%,
  rgba(255,255,255,.04) 48%,rgba(255,255,255,.08) 70%,rgba(255,255,255,.34) 100%);
 -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
         mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
 -webkit-mask-composite:xor; mask-composite:exclude;
 transition:opacity 340ms ease}
.card:hover::before{opacity:.78}

/* ── «Последнее касание» в Потенциалах / Предоплатах / ВР ──
   Серый — сделку трогали на днях, жёлтый — 3–6 дней, красный — неделя и больше.
   Если даты касания нет вовсе, отметка не рисуется (см. dealLastTouchMs). */
.touch-badge{display:inline-block; font-size:10.5px; line-height:1.6; padding:1px 8px;
 border-radius:999px; white-space:nowrap; font-variant-numeric:tabular-nums; cursor:default}
.touch-badge.is-fresh{background:var(--rd-neutral-bg); color:var(--rd-text-2)}
.touch-badge.is-warm {background:var(--rd-warn-bg);   color:var(--rd-warn)}
.touch-badge.is-cold {background:var(--rd-danger-bg); color:var(--rd-danger)}

/* ── Сравнение сегментов на общей шкале (Показатели) ── */
.seg-compare{margin-bottom:18px}
.seg-compare-title{font-size:12px; color:var(--rd-text-2); margin-bottom:10px}
.seg-compare-row{display:grid; grid-template-columns:minmax(90px,1.1fr) 3fr auto; gap:6px 10px;
 align-items:center; margin-bottom:8px}
.seg-compare-name{font-size:12.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.seg-compare-track{height:10px; border-radius:5px; background:rgba(255,255,255,.06); overflow:hidden}
.seg-compare-bar{height:100%; border-radius:5px; background:rgba(255,255,255,.28);
 transition:width 340ms cubic-bezier(.22,.61,.36,1)}
.seg-compare-bar.is-best{background:var(--rd-ok)}
.seg-compare-val{font-family:var(--font-heading); font-size:13px; font-weight:600;
 font-variant-numeric:tabular-nums; text-align:right}
.seg-compare-sub{grid-column:2/4; font-size:10.5px; color:var(--rd-text-3);
 font-variant-numeric:tabular-nums; margin-top:-4px}

/* ── Воронка «Путь лида» (Показатели) ──
   Ширина полосы = доля от «всего лидов». Проценты подписаны только те, что панель
   действительно считает (CR в ответ — от всех лидов, CR в оплату — от чистых),
   промежуточных конверсий тут нет: предоплата и оплата не идут друг за другом. */
.leadpath{margin-top:16px}
.leadpath-title{font-size:12px; color:var(--rd-text-2); margin-bottom:10px}
.leadpath-row{margin-bottom:10px}
.leadpath-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:4px}
.leadpath-name{font-size:12.5px; color:var(--ink)}
.leadpath-count{font-family:var(--font-heading); font-size:13.5px; font-weight:600;
 font-variant-numeric:tabular-nums}
.leadpath-track{height:12px; border-radius:6px; background:rgba(255,255,255,.06); overflow:hidden}
.leadpath-bar{height:100%; border-radius:6px; transition:width 340ms cubic-bezier(.22,.61,.36,1)}
.leadpath-meta{font-size:11px; color:var(--rd-text-3); margin-top:3px}
.leadpath-badge{display:inline-block; font-size:11px; padding:1px 8px; border-radius:999px;
 background:rgba(255,255,255,.08); color:var(--rd-text-2); font-variant-numeric:tabular-nums}

/* ── Шкала ориентиров нормы (Показатели → CR в оплату) ──
   Заменяет абзац с описанием «нормальных» процентов: те же границы, но видно,
   куда попадает текущий замер. Ось 0–35%, дальше всё схлопывается в последнюю зону. */
.norm-scale{margin-top:14px}
.norm-scale-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:24px}
.norm-scale-caption{font-size:12px; color:var(--rd-text-2)}
.norm-scale-verdict{font-family:var(--font-heading); font-size:13px; font-weight:600}
.norm-scale-track{position:relative; display:flex; gap:2px; height:10px; margin-bottom:6px}
.norm-zone{border-radius:3px}
.norm-zone.z-low {background:rgba(232,83,74,.38)}
.norm-zone.z-mid {background:rgba(232,193,60,.38)}
.norm-zone.z-good{background:rgba(95,209,138,.38)}
.norm-zone.z-top {background:rgba(47,107,245,.45)}
.norm-scale-marker{position:absolute; top:-5px; bottom:-5px; width:2px; background:var(--ink);
 border-radius:2px; transform:translateX(-1px); box-shadow:0 0 0 3px rgba(8,8,11,.55)}
.norm-scale-marker b{position:absolute; left:50%; top:-22px; transform:translateX(-50%);
 font-family:var(--font-heading); font-size:12px; font-weight:600; white-space:nowrap;
 font-variant-numeric:tabular-nums}
/* легенда повторяет flex-раскладку дорожки, иначе подписи не совпадут с границами зон */
.norm-scale-legend{display:flex; gap:2px; font-size:10.5px;
 color:var(--rd-text-3); font-variant-numeric:tabular-nums}
.norm-scale-legend span{text-align:right}
.norm-scale-note{font-size:11.5px; color:var(--rd-text-3); margin-top:8px; line-height:1.5}
.norm-formulas{margin-top:10px; font-size:12px; color:var(--rd-text-2)}
.norm-formulas summary{cursor:pointer; color:var(--rd-text-3); font-size:11.5px}
.norm-formulas div{margin-top:6px; line-height:1.7}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition-duration:1ms!important}
}

/* Подпись под пилюлями сегментов: откуда цифры — свежий расчёт по CRM или ручной замер. */
.pk-source{display:flex; align-items:center; gap:9px; margin:12px 0 0;
 font-size:13px; color:var(--rd-text-3)}
.pk-source:empty{display:none}
.dot-live,.dot-warn{width:7px; height:7px; border-radius:50%; flex:none; display:block}
.dot-live{background:var(--rd-ok); box-shadow:0 0 0 3px rgba(95,209,138,.16)}
.dot-warn{background:var(--rd-warn); box-shadow:0 0 0 3px rgba(232,193,60,.16)}

/* ══════════ «Моя производительность» на «Показателях» ══════════
   Четыре числа из amoCRM плюс среднее за последние семь дней рядом: цифра без опоры
   не читается — «36 событий» сама по себе ничего не говорит. */
.pk-perf{margin-top:18px}
.pk-perf h2{display:flex; align-items:baseline; gap:10px}
.pk-perf h2 .n{margin-left:auto; font-size:12.5px; color:var(--rd-text-3); font-weight:400;
 text-transform:none; letter-spacing:0}
.pk-perf-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;
 margin-top:4px}
.pk-perf-cell{padding:15px 16px; border-radius:18px; background:rgba(255,255,255,.04);
 border:1px solid var(--line)}
.pk-perf-cell .k{font-size:12.5px; color:var(--rd-text-3)}
.pk-perf-cell .v{font-family:var(--font-heading); font-size:30px; font-weight:600; line-height:1.1;
 margin-top:6px}
.pk-perf-cell .d{font-size:12px; color:var(--rd-text-3); margin-top:6px}
.pk-perf-cell .d .up{color:var(--rd-ok)}
.pk-perf-cell .d .down{color:var(--rd-warn)}
.tnum{font-variant-numeric:tabular-nums}

/* ── Подвкладки «Предоплаты», «ВР», «Коснуться сегодня» ──
   Приведены к тому же табличному виду, что и «Потенциалы» (14.09.2026): три подвкладки
   одного экрана не должны выглядеть как три разных экрана. */
.pt-acts{display:flex; gap:7px; justify-content:flex-end}
.pt-ic{width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
 background:rgba(255,255,255,.05); color:var(--rd-text-2); font-family:inherit; font-size:13px;
 cursor:pointer; display:grid; place-items:center; flex:none;
 transition:background 130ms ease, color 130ms ease, transform 130ms cubic-bezier(.22,.61,.36,1)}
.pt-ic:hover{color:#fff; background:rgba(255,255,255,.12); transform:translateY(-1px)}
.pt-ic:active{transform:scale(.94)}
.pt-ic.ai{background:rgba(47,107,245,.18); border-color:rgba(47,107,245,.4); color:#9FBBFF}
.pt-ic.ai:hover{background:var(--accent); color:#fff}

/* ссылка «Открыть в CRM» под именем клиента */
.pt-crm{display:block; margin-top:3px; font-size:12px; color:var(--rd-text-3);
 text-decoration:none}
.pt-crm:hover{color:#9FBBFF}

/* платежи рассрочки: три точки, закрашены внесённые */
.pt-pays{display:inline-flex; gap:5px; align-items:center}
.pt-pays u{width:8px; height:8px; border-radius:50%; display:block;
 background:rgba(255,255,255,.16)}
.pt-pays u.on{background:var(--rd-ok)}

/* строка над таблицей «Коснуться сегодня»: пояснение и кнопка обновления */
.pt-touchbar{display:flex; align-items:center; gap:16px; padding:16px 20px;
 border-bottom:1px solid var(--line); flex-wrap:wrap}
.pt-touchbar .hint{margin:0; flex:1; min-width:220px}
.pt-touchbar .btn{flex:none}

/* Числа в пилюлях «Дожимы» — кнопки: ведут на свою подвкладку «Потенциалов». */
.kb-pill b[data-tab]{cursor:pointer;
 transition:background 130ms ease, color 130ms ease, transform 130ms cubic-bezier(.22,.61,.36,1)}
.kb-pill b[data-tab]:hover{background:rgba(255,255,255,.18); color:#fff; transform:translateY(-1px)}
.kb-pill b[data-tab]:active{transform:scale(.94)}

/* ══════════ БАНК ВОЗРАЖЕНИЙ (макет 10-15) ══════════
   Плитки с категорией, цитатой клиента и числом примеров. Цвет плитки — по категории,
   она выводится из текста возражения (в данных категории нет). */
.ob-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px;
 margin-top:18px}
.ob{display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-height:164px;
 padding:20px; border-radius:22px; border:1px solid var(--line); cursor:pointer;
 font-family:inherit; text-align:left; color:#fff; position:relative; overflow:hidden;
 transition:transform 240ms cubic-bezier(.22,.61,.36,1), box-shadow 240ms ease}
.ob:hover{transform:translateY(-4px); box-shadow:var(--rd-shadow-pop)}
.ob:active{transform:scale(.99)}
.ob.on{outline:2px solid var(--accent); outline-offset:-2px}
.ob > *{position:relative; z-index:1}
.ob .cat{font-size:11px; letter-spacing:.08em; text-transform:uppercase;
 color:rgba(255,255,255,.7)}
.ob .q{font-family:var(--font-heading); font-size:18px; font-weight:600; line-height:1.25}
.ob .go{margin-top:auto; display:flex; align-items:center; gap:8px; font-size:12.5px;
 color:rgba(255,255,255,.72)}
.ob .go u{text-decoration:none; opacity:.7}

/* Скрипт и совет в детальном виде — вместо прежних бежевых плашек старой темы. */
.ob-script{white-space:pre-wrap; font-size:14px; line-height:1.65;
 background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:16px;
 padding:16px 18px; margin-bottom:12px}
.ob-tip{font-size:13.5px; line-height:1.55; color:var(--rd-text-2);
 background:rgba(232,193,60,.1); border:1px solid rgba(232,193,60,.26);
 border-left-width:3px; border-radius:14px; padding:13px 15px; margin-bottom:14px}

/* Разборы: лента без внутренних отступов карточки — строки идут встык, как в макете. */
.rv-card{margin-top:18px; padding:0}
.rv-card .sc-block{padding:0}

/* ══════════ СОЗВОНЫ (макет 10-15) ══════════
   Список по дням: слева время, потом иконка типа, название, справа — чип типа,
   кружки участников и действия. */
.cl-card{margin-top:18px; padding:0}
.cl-day{display:flex; align-items:baseline; gap:12px; padding:18px 24px 14px}
.cl-day b{font-family:var(--font-heading); font-size:15px; font-weight:600}
.cl-day span{font-size:13px; color:var(--rd-text-3)}
.cl-day i{flex:1; height:1px; background:var(--line); margin-left:4px}
.cl-row{display:flex; align-items:center; gap:14px; padding:14px 24px;
 border-top:1px solid rgba(255,255,255,.05); transition:background 130ms ease}
.cl-row:hover{background:rgba(255,255,255,.03)}
.cl-row.past{opacity:.55}
.cl-row .tm{width:52px; flex:none; font-family:var(--font-heading); font-size:15px;
 font-variant-numeric:tabular-nums}
.cl-row .ic{width:32px; height:32px; border-radius:11px; flex:none; display:grid;
 place-items:center; font-size:14px}
.cl-row .ic.c-grn{background:rgba(95,209,138,.16); color:#8FE3B0}
.cl-row .ic.c-blue{background:rgba(47,107,245,.16); color:#9FBBFF}
.cl-row .ic.c-yel{background:rgba(232,193,60,.16); color:#F0D477}
.cl-row .ic.c-pnk{background:rgba(232,84,127,.16); color:#F79BB6}
.cl-main{min-width:0; flex:1}
.cl-main .t{font-size:14.5px}
.cl-main .s{font-size:12.5px; color:var(--rd-text-3); margin-top:2px}
.cl-right{margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
 justify-content:flex-end}
.cl-faces{display:flex}
.cl-faces span{width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.1);
 border:2px solid var(--rd-bg, #0E0E12); margin-left:-8px; display:grid; place-items:center;
 font-size:10.5px; color:var(--rd-text-2)}
.cl-faces span:first-child{margin-left:0}
.cl-acts{display:flex; gap:7px}
.cl-acts .pt-ic{text-decoration:none}
@media (max-width:720px){
  .cl-row{flex-wrap:wrap}
  .cl-right{width:100%; margin-left:66px; justify-content:flex-start}
}

/* ══════════ КОМАНДА: номинации и красавчики дня (макет 23-25) ══════════
   Прежние плитки .nomination-card со светло-серым градиентом и золотой рамкой остались
   от старой темы — на тёмном листе они выглядели вставкой из другого интерфейса. */
.tm-nom{display:flex; align-items:center; gap:12px; padding:12px 0;
 border-bottom:1px solid rgba(255,255,255,.07)}
.tm-nom:last-child{border-bottom:0}
.tm-nom .ic{width:32px; height:32px; border-radius:11px; display:grid; place-items:center;
 font-size:14px; flex:none}
.tm-nom .t{font-size:14px}
.tm-nom .s{font-size:12px; color:var(--rd-text-3); margin-top:2px}

.tm-stars{display:flex; gap:14px; flex-wrap:wrap}
.tm-star{flex:1 1 170px; border-radius:20px; padding:20px 18px; text-align:center; color:#fff}
.tm-star .av{width:70px; height:70px; border-radius:50%; background:rgba(255,255,255,.2);
 margin:0 auto; display:grid; place-items:center; font-family:var(--font-heading);
 font-size:23px; font-weight:600}
.tm-star .nm{font-family:var(--font-heading); font-size:17px; font-weight:600; margin-top:12px}
.tm-star .s{font-size:12.5px; color:rgba(255,255,255,.78); margin-top:5px}
.tm-star .k{font-size:11px; letter-spacing:.08em; text-transform:uppercase;
 color:rgba(255,255,255,.55); margin-top:10px}

/* ══════════ ЗАДАЧИ РОПа: матрица контроля (макет 10-15) ══════════
   Строки — задачи планёрки, столбцы — менеджеры, в клетке время закрытия.
   Первая колонка и шапка прилипают: при шести-восьми менеджерах таблица уезжает вбок,
   и без этого непонятно, чья это клетка. */
.rt-card{margin-top:18px}
.rt-card h2{display:flex; align-items:baseline; gap:10px}
.rt-card h2 .n{margin-left:auto; font-size:12.5px; color:var(--rd-text-3); font-weight:400;
 text-transform:none; letter-spacing:0}
.rt-scroller{overflow-x:auto; margin:14px -24px -22px; padding:0 0 4px}
.rt-mx{border-collapse:separate; border-spacing:0; width:100%; min-width:max-content; font-size:14px}
.rt-mx th,.rt-mx td{padding:0}
.rt-mx thead th{position:sticky; top:0; z-index:2; background:var(--sticky-bg);
 -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); padding:14px 0; font-weight:400}
.rt-mx th.task,.rt-mx td.task{position:sticky; left:0; z-index:3; background:var(--sticky-bg);
 width:300px; min-width:300px; text-align:left; padding:0 20px; border-right:1px solid var(--line)}
.rt-mx thead th.task{z-index:4; color:var(--rd-text-3); font-size:12.5px}
.rt-mx tbody td.task{height:62px}
.rt-mx .tt{font-size:14.5px; line-height:1.35}
.rt-mx .ts{font-size:12px; color:var(--rd-text-3); margin-top:4px}
.rt-mx thead th.p{width:84px; min-width:84px}
.rt-mx thead .ph{display:flex; flex-direction:column; align-items:center; gap:7px}
.rt-mx thead .av{width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.075);
 display:grid; place-items:center; font-size:12px; font-weight:500; color:#fff}
.rt-mx thead .nm{font-size:11.5px; color:var(--rd-text-3)}
.rt-mx td.c{text-align:center; height:62px; border-bottom:1px solid rgba(255,255,255,.05)}
.rt-mx tbody tr:hover td.task{background:#14141C}
.rt-mx tbody tr:hover td.c{background:rgba(255,255,255,.03)}
.rt-mx .done{display:inline-flex; flex-direction:column; align-items:center; gap:4px}
.rt-mx .done u{width:24px; height:24px; border-radius:8px; background:var(--rd-ok); color:#0B1A16;
 display:grid; place-items:center; font-size:12px; text-decoration:none}
.rt-mx .done span{font-size:11px; color:var(--rd-text-3); font-variant-numeric:tabular-nums}
.rt-mx .done.late u{background:var(--rd-warn); color:#221A03}
.rt-mx .undone u{width:24px; height:24px; border-radius:8px;
 border:1.4px dashed rgba(255,255,255,.22); display:block; margin:0 auto}
.rt-mx td.total{width:96px; min-width:96px; text-align:center; border-left:1px solid var(--line);
 color:var(--rd-text-2); font-size:13.5px; font-variant-numeric:tabular-nums}
.rt-mx th.total{width:96px; min-width:96px}
.rt-mx tfoot td{height:52px; text-align:center; font-size:13px; border-top:1px solid var(--line);
 color:var(--rd-text-2); font-variant-numeric:tabular-nums}
.rt-mx tfoot td.task{text-align:left; color:var(--rd-text-3)}
.rt-mx tfoot td.zero{color:#F79790}

/* ══════════ КОМНАТА ПИТОМЦА (вкладка tab-pet) ══════════
   Лист на кабинете теперь показывает ТОЛЬКО питомца — всё остальное живёт здесь. */
.lf-pet-only .lf-pet{top:50%; transform:translate(-50%,-50%)}

.pr-wrap{display:grid; grid-template-columns:1.35fr 1fr; gap:22px; align-items:start; margin-top:22px}
@media (max-width:900px){ .pr-wrap{grid-template-columns:1fr} }

/* Комната — та же металлическая подложка, что на листе: это его продолжение,
   а не отдельный по духу экран. */
/* Комната — чистая сцена: ни кнопок, ни подписей поверх пола, иначе вещи некуда ставить
   и они лезут под плашку. Плашка с кличкой и кнопками вынесена под комнату. */
.pr-left{display:flex; flex-direction:column; gap:14px}
.pr-room{position:relative; border-radius:26px; overflow:hidden; height:560px;
 background:linear-gradient(160deg,#EDEFF2 0%,#C9CDD4 38%,#F4F5F7 62%,#AEB4BE 100%);
 box-shadow:var(--rd-shadow-card), inset 0 1px 0 rgba(255,255,255,.5)}
.pr-room::before{content:''; position:absolute; inset:0; z-index:0;
 background:repeating-linear-gradient(92deg,rgba(255,255,255,.5) 0 2px,
  rgba(118,128,143,.32) 2px 5px,rgba(255,255,255,.2) 5px 9px); filter:blur(.4px)}
/* Тень под лапами рисует сам риг маскота (.mx-floor) — своя здесь была бы второй. */
/* ВНИМАНИЕ: риг вешает на этот же элемент свой класс .mx, а в нём position:relative.
   Специфичность у `.mx` и `.pr-stage` одинаковая (0,1,0), а раздел «МАСКОТ» идёт ниже
   по файлу — значит он побеждает, и питомец уезжает из своего места в комнате наверх.
   Лечится более точным селектором. Те же грабли уже были с .lf-sheen на листах. */
.pr-room .pr-stage{position:absolute; z-index:3; left:50%; bottom:112px;
 transform:translateX(-50%); filter:drop-shadow(0 16px 28px rgba(40,50,70,.4))}
.pr-plate{display:flex; align-items:center; gap:14px; background:var(--surface);
 border:1px solid var(--line); border-radius:20px; padding:15px 18px; color:#fff}
.pr-who{min-width:0}
.pr-name{font-family:var(--font-heading); font-size:19px; font-weight:600}
.pr-stagename{font-size:12.5px; color:rgba(255,255,255,.55); margin-top:3px}
.pr-acts{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.pr-acts .btn{flex:none; white-space:nowrap}
@media (max-width:620px){
  .pr-plate{flex-direction:column; align-items:stretch; gap:12px}
  .pr-acts{margin-left:0; justify-content:flex-start}
}

/* Обои из магазина заменяют фон целиком, поэтому металлическую штриховку под ними гасим. */
.pr-room.has-wall::before{opacity:0}
/* ── Комната как сцена: стена сверху, пол снизу, между ними плинтус ──
   Линия пола на 34 % высоты — там, где у питомца лапы, поэтому вещи «у стены»
   и вещи «на переднем плане» читаются как разная глубина, а не как разный отступ. */
.pr-wall-face{position:absolute; z-index:1; left:0; right:0; top:0; height:66%;
 background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 70%)}
.pr-floor-face{position:absolute; z-index:1; left:0; right:0; bottom:0; height:34%;
 background:linear-gradient(180deg,rgba(86,96,112,.26),rgba(86,96,112,.05) 45%,rgba(255,255,255,.16))}
.pr-baseboard{position:absolute; z-index:1; left:0; right:0; bottom:34%; height:7px;
 background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(96,106,122,.4));
 box-shadow:0 5px 12px -4px rgba(40,50,70,.45)}

/* Слои глубины. Питомец (.pr-stage) стоит между «back» и «front». */
.pr-layer{position:absolute; inset:0; pointer-events:none}
.pr-layer-wall{z-index:2}
.pr-layer-back{z-index:2}
.pr-layer-front{z-index:4}
.pr-place{position:absolute; transform:translateX(-50%); display:block}
.pr-thing{width:100%; height:auto; display:block; aspect-ratio:1;
 filter:drop-shadow(0 9px 12px rgba(40,50,70,.34))}
/* Дальний план чуть притушен — воздух между стеной и передним планом. */
.pr-layer-back .pr-thing{filter:drop-shadow(0 8px 11px rgba(40,50,70,.3)); opacity:.94}
.pr-layer-wall .pr-thing{filter:drop-shadow(0 7px 10px rgba(40,50,70,.28))}

/* Реплика питомца — над головой, а не в боковой карточке: спасибо за покупку должно
   исходить от него самого. */
/* Пузырь сбоку от головы, а не над ней: по центру он ложился прямо на морду.
   Хвостик смотрит вправо-вниз, в сторону питомца. */
.pr-bubble{position:absolute; z-index:5; left:5%; bottom:58%;
 max-width:190px; padding:11px 15px; border-radius:16px;
 background:rgba(20,20,24,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
 color:#fff; font-size:13.5px; line-height:1.4;
 box-shadow:0 12px 24px -10px rgba(0,0,0,.6);
 animation:pr-pop 260ms cubic-bezier(.22,.61,.36,1)}
.pr-bubble::after{content:''; position:absolute; right:14px; bottom:-6px; width:14px; height:14px;
 transform:rotate(45deg); background:rgba(20,20,24,.92); border-radius:3px}
@keyframes pr-pop{from{opacity:0; transform:translateY(6px) scale(.94)}
                  to{opacity:1; transform:translateY(0) scale(1)}}
@media (max-width:900px){ .pr-bubble{max-width:150px; font-size:12.5px} }

/* Полка: коллекция за кристаллы. Ничего не надевается — вещи просто стоят на виду. */
.pr-shelf{position:absolute; z-index:3; top:26px; right:26px; width:176px; pointer-events:none}
.pr-shelf-items{display:flex; justify-content:flex-end; align-items:flex-end; gap:8px;
 min-height:38px; padding:0 6px}
.pr-trophy{width:34px; height:34px; display:block;
 filter:drop-shadow(0 5px 7px rgba(40,50,70,.3))}
.pr-shelf-board{display:block; height:8px; border-radius:4px; margin-top:3px;
 background:linear-gradient(180deg,#E8C99B,#B98F5E);
 box-shadow:0 7px 12px -5px rgba(40,50,70,.5)}

.pr-side{display:flex; flex-direction:column; gap:18px}
.pr-side .card{margin-bottom:0}
.pr-bal-grid{display:flex; align-items:flex-start; gap:26px}
.pr-bal-grid .lf-btn-w{margin-left:auto}
.pr-bal-v.cr{color:#9FBBFF}
.pr-bal-v.cr::before{content:"◆ "; font-size:26px; vertical-align:2px}

/* Магазин: сетка одинаковых плиток — куплённое подсвечено, надетое обведено. */
.pr-shop{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px}
.pr-item{display:flex; flex-direction:column; align-items:center; gap:5px; padding:13px 8px;
 border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.04);
 color:var(--rd-text-2); font-family:inherit; cursor:pointer; text-align:center;
 transition:transform 130ms cubic-bezier(.22,.61,.36,1), background 130ms ease,
            border-color 130ms ease, opacity 130ms ease}
.pr-item:hover:not(:disabled){transform:translateY(-3px); background:rgba(255,255,255,.08); color:#fff}
.pr-item:active:not(:disabled){transform:scale(.96)}
.pr-item:disabled{opacity:.35; cursor:default}
.pr-item .ic{width:34px; height:34px; display:block}
/* Редкое — за кристаллы: тёплая кромка, чтобы отличалось от обычных вещей за баллы. */
.pr-item.rare{border-color:rgba(232,193,60,.3)}
.pr-item.rare .pz{color:#F0D477}
.pr-item.rare.owned{background:rgba(232,193,60,.1); border-color:rgba(232,193,60,.4)}
.pr-item .nm{font-size:12px; line-height:1.25}
.pr-item .pz{font-size:11.5px; color:var(--rd-text-3); font-variant-numeric:tabular-nums}
.pr-item.owned{background:rgba(95,209,138,.1); border-color:rgba(95,209,138,.28)}
.pr-item.owned .pz{color:var(--rd-ok)}
.pr-item.on{border-color:var(--accent); background:rgba(47,107,245,.16); color:#fff}
.pr-item.on .pz{color:#9FBBFF}
.pr-line .r.minus{color:var(--rd-text-3)}

.pr-bal-row{display:flex; align-items:flex-start; gap:14px}
.pr-bal-k{font-size:13px; color:var(--rd-text-3)}
.pr-bal-v{font-family:var(--font-heading); font-size:40px; font-weight:600; line-height:1.05;
 margin-top:4px; font-variant-numeric:tabular-nums}
.pr-next{font-size:13px; color:var(--rd-text-2); margin-top:14px}
.pr-track{height:6px; border-radius:4px; background:rgba(255,255,255,.1); margin-top:8px;
 position:relative; overflow:hidden}
.pr-track i{position:absolute; left:0; top:0; bottom:0; border-radius:4px; display:block; width:0;
 background:linear-gradient(90deg,rgba(47,107,245,.5),var(--accent));
 transition:width 900ms cubic-bezier(.22,.61,.36,1)}

.pr-sum{display:flex; align-items:baseline; gap:12px; padding-bottom:12px;
 border-bottom:1px solid var(--line); font-size:13.5px; color:var(--rd-text-2)}
.pr-sum b{margin-left:auto; font-family:var(--font-heading); font-size:16px; color:#fff;
 font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.pr-line{display:flex; align-items:baseline; gap:12px; padding:9px 0;
 border-bottom:1px solid rgba(255,255,255,.05); font-size:13.5px}
.pr-line:last-child{border-bottom:0}
.pr-line .d{width:88px; color:var(--rd-text-3); font-size:12.5px; flex:none}
.pr-line .c{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pr-line .r{margin-left:auto; color:var(--rd-ok); font-variant-numeric:tabular-nums; flex:none}

/* ══════════ МАСКОТ ══════════
   Аксолотль на шести нарисованных позах (public/img/mascot/<поза>/). Мимика —
   не трансформация, а смена картинки; поверх неё живут дыхание, качание и
   жабры, гнущиеся по длине. Риг собирает JS (mountMascot), здесь геометрия.
   Базовый кадр — 512×512, любой другой размер задаётся масштабом.          */
.mx{position:relative;display:block;flex:none}
.mx-floor{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:150px;height:20px;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(9px)}
/* растём от пола, а не от центра: пол остаётся на месте при смене стадии */
.mx-rig{position:absolute;left:50%;bottom:0;width:512px;height:512px;
  transform-origin:50% 100%;will-change:transform}
.mx-state{position:absolute;inset:0;opacity:0;will-change:opacity}
.mx-base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  pointer-events:none;-webkit-user-drag:none}
.mx-seg{position:absolute;background-repeat:no-repeat;will-change:transform;
  backface-visibility:hidden}

/* выбор маскота в карточке питомца */
.pet-skins{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px}
.pet-skin{display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
 padding:12px 8px 10px; border-radius:18px; font-family:inherit; font-size:13px;
 color:var(--ink-soft,rgba(255,255,255,.64)); background:rgba(255,255,255,.05);
 border:1px solid rgba(255,255,255,.09); transition:border-color 160ms ease, background 160ms ease}
.pet-skin img{width:76px; height:76px; object-fit:contain; display:block;
 filter:drop-shadow(0 8px 16px rgba(0,0,0,.45))}
.pet-skin:hover{background:rgba(255,255,255,.08)}
.pet-skin.on{border-color:#fff; background:rgba(255,255,255,.12); color:#fff}

/* ══════ АНИМАЦИЯ ГОНКИ И ГЕРОЯ (макет 23-25, перенесено 13.09.2026) ══════
   Этих трёх кусков в панели не было, хотя в макете они есть. */

/* золотой ореол у первого места */
.rrow .pos.m1{position:relative}
.rrow .pos.m1::after{content:''; position:absolute; inset:-6px; border-radius:50%;
 background:radial-gradient(circle,rgba(245,197,66,.5),transparent 68%); z-index:-1;
 animation:goldPulse 2.4s ease-in-out infinite}
@keyframes goldPulse{0%,100%{opacity:.35; transform:scale(.9)} 50%{opacity:.9; transform:scale(1.12)}}

/* блик, пробегающий по полосе героя */
.tm-hero .track i{position:relative; overflow:hidden}
.tm-hero .track i::after{content:''; position:absolute; inset:0; display:block;
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
 animation:shine 3.2s ease-in-out infinite}
@keyframes shine{0%{transform:translateX(-100%)} 55%,100%{transform:translateX(220%)}}

/* Появление строк гонки. Как и везде: сама строка видима, анимация только
   добавляет въезд — иначе при непрошедшем кадре список остался бы пустым. */
.rrow.reveal{animation:rv 460ms cubic-bezier(.22,.61,.36,1) both;
 animation-delay:calc(var(--i, 0) * 45ms)}
/* Полоса растёт от нуля: ширину ставит JS, стартовое значение — в кадрах,
   поэтому без анимации полоса просто сразу нужной длины. */
.rrow .tr i{transition:width 900ms cubic-bezier(.22,.61,.36,1)}
.rrow .cnt2{width:74px; text-align:right; font-size:13px; color:var(--rd-text-3);
 font-variant-numeric:tabular-nums}
/* «28 %» и суммы не должны ломаться на две строки — строка и так тесная */
.rrow .pc2, .rrow .sum2, .rrow .cnt2{white-space:nowrap}
@media (max-width:1100px){ .rrow .cnt2{display:none} }

/* ════ ЗАДАЧИ ПЛАНЁРКИ по макету 34-planerka-zadachi.html ════
   Задача — не строка списка, а инструкция: заголовок, срок, описание с выделениями,
   копируемые теги CRM и блок пронумерованных шагов. Прежние правила .pl-task удалены:
   после пересборки на них не осталось ни одной разметки (на листе кабинета свой .lf-task). */
.plt{display:flex; gap:14px; padding:16px 0; border-top:1px solid rgba(255,255,255,.06); position:relative}
.plt:first-child{border-top:0}
.plt.done .plt-ttl{color:var(--rd-text-3); text-decoration:line-through}
.plt.done .plt-body, .plt.done .plt-steps{opacity:.5}
.plt-chk{width:24px; height:24px; border-radius:8px; border:1.6px solid rgba(255,255,255,.3);
  flex:none; margin-top:2px; display:grid; place-items:center; font-size:12px; color:transparent;
  cursor:pointer; background:transparent; transition:all 130ms cubic-bezier(.22,.61,.36,1); padding:0}
.plt-chk:hover{border-color:rgba(255,255,255,.55)}
.plt-chk.on{background:#5FD18A; border-color:#5FD18A; color:#0B1A16}
.plt-main{flex:1; min-width:0}
.plt-row1{display:flex; align-items:flex-start; gap:14px}
.plt-ttl{font-family:var(--font-heading); font-size:16px; font-weight:500; line-height:1.35}
.plt-due{margin-left:auto; flex:none; font-size:12.5px; padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.08); color:var(--rd-text-2); white-space:nowrap; font-variant-numeric:tabular-nums}
.plt-due.soon{background:rgba(232,193,60,.16); color:#F0D477}
.plt-due.late{background:rgba(232,83,74,.18); color:#F79790}
.plt-del{flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,.06); color:var(--rd-text-3); font-size:12px; cursor:pointer; padding:0}
.plt-del:hover{color:#fff; background:rgba(232,83,74,.22)}
.plt-body{margin-top:9px; font-size:14px; line-height:1.6; color:var(--rd-text-2); max-width:78ch}
.plt-body p{margin:0 0 8px}
.plt-body p:last-child{margin-bottom:0}
.plt-body strong{color:#fff; font-weight:600}
.plt-body em{font-style:italic; color:rgba(255,255,255,.86)}
.plt-clip{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.plt-more{margin-top:8px; border:0; background:transparent; color:#9FBBFF; font-family:inherit;
  font-size:13px; cursor:pointer; padding:0}
.plt-more:hover{text-decoration:underline}
.plt-tag{display:inline-flex; align-items:center; gap:7px; padding:3px 10px; border-radius:8px;
  background:rgba(47,107,245,.18); border:1px solid rgba(47,107,245,.34); color:#BBD0FF;
  font-family:inherit; font-size:13px; cursor:pointer; vertical-align:baseline;
  transition:all 130ms cubic-bezier(.22,.61,.36,1)}
.plt-tag:hover{background:rgba(47,107,245,.3); color:#fff}
.plt-tag u{text-decoration:none; font-size:10px; opacity:.7}
.plt-tag.copied{background:rgba(95,209,138,.22); border-color:rgba(95,209,138,.4); color:#B7F0CE}
.plt-steps{margin-top:12px; border:1px solid var(--line); border-radius:16px;
  background:rgba(0,0,0,.22); overflow:hidden}
.plt-steps .sh{display:flex; align-items:center; gap:10px; padding:11px 15px;
  border-bottom:1px solid rgba(255,255,255,.06); font-size:12.5px; color:var(--rd-text-3)}
.plt-steps .sh b{margin-left:auto; font-family:var(--font-heading);
  font-size:13px; color:#fff; font-weight:600}
.plt-step{display:flex; align-items:flex-start; gap:12px; padding:11px 15px;
  border-bottom:1px solid rgba(255,255,255,.05)}
.plt-step:last-child{border-bottom:0}
.plt-step .sn{width:20px; flex:none; margin-top:1px; font-family:var(--font-heading);
  font-size:13px; font-weight:600; color:var(--rd-text-3); text-align:center}
.plt-step .sx{font-size:14px; line-height:1.5; color:var(--rd-text-2)}
.plt-photo{display:block; margin-top:12px; max-width:100%; border-radius:14px}
/* панель форматирования и живой пример в редакторе задачи */
.plt-tools{display:flex; gap:6px; margin:4px 0 9px; flex-wrap:wrap}
.plt-tools button{padding:8px 13px; border-radius:10px; border:1px solid var(--line);
  background:rgba(255,255,255,.07); color:var(--rd-text-2); font-family:inherit; font-size:13px; cursor:pointer}
.plt-tools button:hover{color:#fff; background:rgba(255,255,255,.14)}
.plt-tools .hint{margin-left:auto; font-size:11.5px; color:var(--rd-text-3); align-self:center}
.plt-live{border:1px solid var(--line); border-radius:18px; padding:4px 18px 14px;
  background:rgba(255,255,255,.03)}
.plt-live .plt-chk{display:none}
@media (max-width:620px){
  .plt-row1{flex-wrap:wrap}
  .plt-due{margin-left:0; order:3}
}
.plt-addtask{padding:8px 15px; font-size:13px; white-space:nowrap}
/* margin-left:auto только у первой таблетки — иначе вторая отжала бы первую влево */
.pl-group h4 .plt-addtask:first-of-type{margin-left:auto}
.pl-group h4{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
/* «Важное» стало блоком с абзацами (было <p> с сырым текстом и white-space:pre-wrap) */
.pl-rop #importantText{font-size:14px; line-height:1.6; color:rgba(255,255,255,.86)}
.pl-rop #importantText p{white-space:normal; margin:0 0 8px}
.pl-rop #importantText p:last-child{margin-bottom:0}
/* Список отметившихся у РОПа — на месте кнопки «Отметиться» (ему отмечаться не надо) */
.pl-roster{flex:1; min-width:260px; display:flex; flex-direction:column; gap:9px}
.plr-line{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.plr-k{font-size:12.5px; color:var(--rd-text-3); margin-right:4px; white-space:nowrap}
.plr-chip{display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid var(--line); font-size:13px; color:var(--rd-text-2)}
.plr-chip.ok{background:rgba(95,209,138,.14); border-color:rgba(95,209,138,.3); color:#B7F0CE}
.plr-chip b{font-weight:600; font-variant-numeric:tabular-nums; opacity:.8}
.plr-none{font-size:13px; color:var(--rd-text-3)}
/* У РОПа на экране планёрки вместо галочки — доля по команде */
.plt-cnt{min-width:46px; height:26px; padding:0 9px; border-radius:9px; flex:none; margin-top:2px;
  display:grid; place-items:center; font-size:12.5px; font-variant-numeric:tabular-nums;
  background:rgba(232,193,60,.16); color:#F0D477; border:1px solid rgba(232,193,60,.28)}
.plt-cnt.all{background:rgba(95,209,138,.16); color:#B7F0CE; border-color:rgba(95,209,138,.3)}
.plt-cnt.zero{background:rgba(232,83,74,.14); color:#F79790; border-color:rgba(232,83,74,.3)}
.lf-count.zero{background:rgba(232,83,74,.16); border-color:rgba(232,83,74,.34); color:#F79790}
/* название задачи занимает остаток строки, чтобы длинное переносилось, а не толкало счётчик */
.lf-task > span:last-child{flex:1; min-width:0}
/* Выбор проекта после входа: показывается, только если у человека их несколько */
.lg-pick-cap{font-size:13.5px; color:var(--rd-text-3); margin:0 0 12px; line-height:1.5}
.lg-projlist{display:flex; flex-direction:column; gap:8px}
.lg-projbtn{display:flex; align-items:center; gap:12px; width:100%; padding:14px 16px;
  border-radius:15px; border:1px solid var(--line); background:rgba(255,255,255,.05);
  font-family:inherit; font-size:14.5px; color:#fff; cursor:pointer; text-align:left;
  transition:all 130ms cubic-bezier(.22,.61,.36,1)}
.lg-projbtn:hover{background:rgba(255,255,255,.1); transform:translateX(2px)}
.lg-projbtn em{margin-left:auto; font-style:normal; font-size:11.5px; color:var(--rd-text-3);
  white-space:nowrap}
/* Полоса режима просмотра: интегратор смотрит чужой кабинет */
.view-as-bar{position:fixed; left:0; right:0; top:0; z-index:40; display:flex; align-items:center;
  gap:14px; padding:9px 18px; background:rgba(232,193,60,.16);
  border-bottom:1px solid rgba(232,193,60,.34); color:#F0D477; font-size:13px;
  backdrop-filter:blur(14px)}
.view-as-bar b{color:#fff; font-weight:600}
.view-as-bar button{margin-left:auto; flex:none; padding:7px 14px; border-radius:999px;
  border:1px solid rgba(232,193,60,.4); background:rgba(0,0,0,.25); color:#F0D477;
  font-family:inherit; font-size:12.5px; cursor:pointer; white-space:nowrap}
.view-as-bar button:hover{background:rgba(0,0,0,.4); color:#fff}
.lg-projbtn.lg-console{border-color:rgba(47,107,245,.4); background:rgba(47,107,245,.14)}
.lg-projbtn.lg-console:hover{background:rgba(47,107,245,.22)}
body.has-viewas{padding-top:40px}
body.has-viewas .kb-rail{margin-top:40px}
/* Название проекта в шапке кабинета. Перфорация требует крупного кегля: шаг сетки ≈ кегль/6
   (см. «Читаемость перфорации»), иначе приём превращается в мелкую рябь. */
/* Буквы тоньше цифр, поэтому пропорция шаг = кегль/6, выведенная на числах, тут даёт слишком
   воздушную сетку и название читается тускло. Берём кегль/6.7 и кегль покрупнее. */
.kb-project{font-family:var(--font-heading); font-size:28px; line-height:1.15; margin-top:9px;
  background-size:4.2px 4.2px}
@media (max-width:640px){ .kb-project{font-size:22px; background-size:3.4px 3.4px} }
/* Переключатель структуры отдела в админке: одна команда или несколько групп */
.gm-switch{display:inline-flex; gap:4px; background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:4px; margin:6px 0 8px}
.gm-switch button{border:0; background:transparent; font-family:inherit; font-size:13.5px;
  color:var(--rd-text-2); padding:9px 18px; border-radius:999px; cursor:pointer; white-space:nowrap}
.gm-switch button[aria-current]{background:#fff; color:#101014; font-weight:500}
/* ══════ ЛИСТ «ОПЛАТЫ» в Потенциалах ══════
   Оплаты приезжают из amoCRM сами; галочка отмечает, что сделка занесена в отчётную таблицу. */
.pay-bar{display:flex; align-items:center; gap:16px; padding:14px 18px; flex-wrap:wrap;
  border-bottom:1px solid var(--line)}
.pay-link{margin-left:auto; flex:none; padding:9px 16px; border-radius:999px; background:#fff;
  color:#101014; font-size:13.5px; font-weight:600; text-decoration:none; white-space:nowrap}
.pay-link:hover{filter:brightness(.94)}
/* ЛИСТ «ОПЛАТЫ» — оформление по общей концепции «Листы».
   Строка оплаты это событие «деньги пришли», поэтому иерархия в ней такая: сумма,
   клиент, всё остальное. Отсюда крупные табличные цифры у суммы и приглушённые
   служебные чипы вокруг. */

/* Галочка «занесена в ОТ» — чип-переключатель, а не голый чекбокс: на листе это
   состояние сделки и читаться должно так же, как остальные чипы панели. */
.pay-ot{display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-size:13px;
  color:var(--rd-text-3); user-select:none; padding:7px 14px 7px 9px; border-radius:999px;
  border:1px dashed rgba(255,255,255,.16); background:rgba(255,255,255,.03); white-space:nowrap;
  transition:all 160ms cubic-bezier(.22,.61,.36,1)}
.pay-ot:hover{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.26)}
.pay-ot input{display:none}
.pay-ot .box{width:20px; height:20px; border-radius:6px; border:1.5px solid rgba(255,255,255,.26);
  display:grid; place-items:center; font-size:11px; color:transparent; flex:none;
  transition:all 130ms cubic-bezier(.22,.61,.36,1)}
.pay-ot.on{border-style:solid; border-color:rgba(95,209,138,.4); background:rgba(95,209,138,.12)}
.pay-ot input:checked + .box{background:var(--rd-ok); border-color:var(--rd-ok); color:#0B1A16}
.pay-ot input:checked ~ .lbl{color:var(--rd-ok); font-weight:500}
.pay-ot:active{transform:scale(.97)}

.pay-src{font-size:12px; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.07);
  color:var(--rd-text-3); white-space:nowrap}
.pay-src.amo{background:rgba(47,107,245,.16); color:#9FBBFF}

/* Ссылки — полноценные пилюли, а не мелкие метки (заказчица 15.09.2026: «сделай больше»).
   Цвет закреплён за смыслом, как и у обложек разделов: amoCRM синяя, GetCourse янтарная —
   так две ссылки различаются боковым зрением и не требуют чтения подписи. */
.pay-ext{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:500;
  padding:8px 14px; border-radius:999px; text-decoration:none; white-space:nowrap;
  border:1px solid transparent; transition:all 160ms cubic-bezier(.22,.61,.36,1)}
.pay-ext i{font-style:normal; font-size:11px; opacity:.72;
  transition:transform 160ms cubic-bezier(.22,.61,.36,1)}
.pay-ext.amo{background:rgba(47,107,245,.14); color:#9FBBFF; border-color:rgba(47,107,245,.26)}
.pay-ext.gc{background:rgba(232,193,60,.13); color:#F0D477; border-color:rgba(232,193,60,.24)}
.pay-ext:hover{filter:brightness(1.22); transform:translateY(-1px)}
.pay-ext:hover i{transform:translate(2px,-2px)}
.pay-ext:active{transform:translateY(0)}
.pay-ext + .pay-ext{margin-left:8px}
.pay-nolink{color:rgba(255,255,255,.22); font-size:15px}
.pay-links{white-space:nowrap}

/* Сумма — главное в строке: крупнее остального и обязательно табличными цифрами,
   иначе колонка денег «пляшет» по разрядам. */
.pay-sum{font-family:var(--font-heading); font-size:16px; font-weight:600; color:#fff;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.pay-date{line-height:1.25; white-space:nowrap}
.pay-date span{display:block; font-size:11.5px; color:var(--rd-text-3); margin-top:2px}
.pay-mgrname{color:var(--rd-text-2)}
.pay-links, .pay-date, .pay-mgrname{font-variant-numeric:tabular-nums}

/* Колонкам нужен минимум, иначе тариф ломается на три строки, а имя менеджера на две:
   шесть колонок в 800 px не помещаются по-человечески. Не помещается — едем вбок,
   как в остальных таблицах панели (обёртка .pt-scroll). */
.pay-table .who{min-width:250px}
.pay-table .pt-cl .nm{white-space:nowrap}
/* Тариф — одной строкой с многоточием: это подпись, а не содержание строки,
   и в три строки он растягивает её втрое. Полностью виден по наведению (title). */
.pay-table .pt-cl .seg2{max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pay-table .pay-mgrname{white-space:nowrap}
/* Тип строки: оплата целиком, предоплата или ВР. Цвет по смыслу — зелёный «деньги закрыты»,
   янтарный и синий у частичных: их ещё ждём. */
.pay-kind{display:inline-block; font-size:12px; font-weight:500; padding:5px 12px; border-radius:999px;
  white-space:nowrap}
.pay-kind.k-pay{background:rgba(95,209,138,.14); color:#8FE3B0}
.pay-kind.k-auto{background:rgba(201,182,255,.15); color:#C9B6FF}
/* Виджет с точной суммой: нажатие показывает её вместо подписи. Курсор и лёгкое нажатие —
   единственный намёк, что карточка кликабельная; вешать на неё кнопку было бы шумно. */
/* Ширина таблицы РОПа выросла на колонку действий. */
.pay-table{min-width:1080px}
#ropPayList .pt-act{opacity:.55}
#ropPayList tr:hover .pt-act{opacity:1}
/* Сумма дня на обложке «Мой день» — обычным крупным шрифтом, без перфорации
   (заказчица 15.09.2026). Причина не в красоте: точками набирается «439 тыс», а ей нужна
   полная сумма до рубля — а её точками на этой ширине не прочитать. */
.lf-daysum{font-family:var(--font-heading); font-size:30px; font-weight:700; color:#fff;
  letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; display:block}
.lf-daysum-cap{font-size:15px; opacity:.72; margin-left:4px}
/* Крупная сумма и подпись «₽ сегодня» стоят в одной строке — значит блочным быть нельзя. */
.lf-foot .lf-daysum, .lf-sheet .lf-daysum{display:inline}
@media (max-width:1100px){ .lf-daysum{font-size:26px} }
.has-full{cursor:pointer}
.has-full:active{transform:scale(.99)}
.has-full.show-full .c{color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap}
.has-full:focus-visible{outline:2px solid rgba(255,255,255,.55); outline-offset:3px}
.pay-kind.k-prep{background:rgba(232,193,60,.13); color:#F0D477}
.pay-kind.k-inst{background:rgba(47,107,245,.14); color:#9FBBFF}
/* Остаток — не достижение, поэтому приглушён: он не должен спорить с суммой внесённого. */
.pay-rest{color:var(--rd-text-2); font-variant-numeric:tabular-nums; white-space:nowrap}
/* «Без владельца» — осмысленное состояние (карточка менеджера удалена), а не сбой,
   поэтому подписано словами и приглушено, а не нарисовано прочерком. */
.pay-noowner{color:var(--rd-text-3); font-style:italic; white-space:nowrap}
.pt-cl .nm.none{color:var(--rd-text-3)}
/* Имя и метка источника в одну строку: метка рисуется только у ручных оплат,
   поэтому отдельная колонка «Откуда» больше не нужна и лист МОПа стал как у РОПа. */
.pt-cl .nmrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.pt-cl .nmrow .nm{font-weight:400}
.pay-table .pt-cl .nmrow .pay-src{font-size:11px; padding:3px 9px}
/* Грабли (пятый случай той же болезни): общее правило форм `select{width:100%}` — это
   специфичность (0,1,1), а одиночный класс .pay-mgr — (0,1,0), и класс проигрывает.
   Фильтр растягивался во всю полосу и сталкивал кнопку таблицы на отдельную строку.
   Лечится двойным селектором. */
.pay-bar .pay-mgr{width:auto; min-width:200px; max-width:260px; margin-left:auto; flex:none}
.pay-bar .hint{flex:1 1 260px; min-width:200px}
.pay-bar .pay-link{margin-left:0; flex:none}
@media (max-width:720px){ .pay-bar .pay-mgr{max-width:none; flex:1 1 100%; margin-left:0} }

/* ====== РАЗБОР ДНЯ (вкладка tab-digest и лист «Отчёт» на кабинете РОПа) ====== */
/* Лента дней. Дней немного (до тридцати), но на узком экране они всё равно уезжают —
   поэтому прокрутка вбок, как у ленты листов, и запас снизу под тень активного дня. */
.dg-days{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; margin-bottom:14px;
  scrollbar-width:none}
.dg-days::-webkit-scrollbar{display:none}
.dg-day{flex:0 0 auto; display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  padding:9px 13px; border-radius:14px; cursor:pointer; text-align:left;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:#fff;
  font-family:var(--font-body); transition:transform .18s cubic-bezier(.22,.61,.36,1), background .18s}
.dg-day .d{font-size:13px; font-weight:600; white-space:nowrap}
.dg-day .s{font-size:11px; color:rgba(255,255,255,.42); font-variant-numeric:tabular-nums; white-space:nowrap}
.dg-day:hover{transform:translateY(-2px); background:rgba(255,255,255,.08)}
.dg-day[aria-current="page"]{background:#fff; color:#101014; border-color:transparent}
.dg-day[aria-current="page"] .s{color:rgba(16,16,20,.56)}
.dg-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:900px){.dg-grid{grid-template-columns:1fr}}
/* Строка «название — число». Тот же вид, что у списков на листах кабинета. */
.dg-row{display:flex; align-items:baseline; gap:10px; padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.06)}
.dg-row:last-child{border-bottom:0}
.dg-row .k{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dg-row .v{font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.dg-row .n{color:rgba(255,255,255,.42); font-size:12px; font-variant-numeric:tabular-nums}
.dg-seg{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.dg-tbl{width:100%; min-width:720px; border-collapse:collapse; font-variant-numeric:tabular-nums}
.dg-tbl th,.dg-tbl td{padding:8px 10px; text-align:right; white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.06)}
.dg-tbl th{font-size:11px; font-weight:500; color:rgba(255,255,255,.42);
  text-transform:uppercase; letter-spacing:.04em; position:sticky; top:0; background:#0c0c10}
.dg-tbl th:first-child,.dg-tbl td:first-child{text-align:left; font-weight:600}
.dg-tbl td.cr{font-weight:600}
/* Текст от ИИ приходит строками с «•» и «-», абзацами его не размечают — поэтому
   выводим как есть, сохраняя переносы, а ссылки делаем кликабельными. */
.dg-text{white-space:pre-wrap; line-height:1.55; color:rgba(255,255,255,.86)}
.dg-text a{color:var(--accent, #2F6BF5); text-decoration:none; border-bottom:1px solid rgba(47,107,245,.4)}
.dg-text a:hover{border-bottom-color:#2F6BF5}
.dg-empty{color:rgba(255,255,255,.42); padding:6px 0}
/* Лист «Отчёт» на кабинете: крупная сумма дня и строки под ней. */
.lf-dgsum{font-family:var(--font-heading); font-size:30px; font-weight:800; line-height:1.1;
  font-variant-numeric:tabular-nums; margin:2px 0 2px}
.lf-dgcap{font-size:12px; color:rgba(255,255,255,.56); margin-bottom:10px}

/* ====== ВХОД В «РАЗБОР ДНЯ» С ЭКРАНА «ОТЧЁТЫ» (16.09.2026) ======
   Выделен как действие, а не как строка списка: его ищут глазами, и найтись он
   должен без чтения. Цвет — фиолетовый отчётов и синий цели, как у обложек разделов. */
.rp-digest{display:flex; align-items:center; gap:12px; margin-left:auto;
  background:linear-gradient(135deg,#3F2079,#1A6BE8); border:1px solid rgba(255,255,255,.16);
  border-radius:16px; padding:11px 16px; color:#fff; cursor:pointer;
  font-family:var(--font-body); text-align:left;
  transition:transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s}
.rp-digest:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(26,107,232,.34)}
.rp-digest:active{transform:translateY(0)}
.rp-digest .ic{font-size:20px; line-height:1}
.rp-digest .t{display:flex; flex-direction:column; min-width:0}
.rp-digest .t b{font-family:var(--font-heading); font-size:15px; font-weight:600}
.rp-digest .t i{font-style:normal; font-size:12.5px; color:rgba(255,255,255,.72);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rp-digest .go{margin-left:6px; opacity:.8; transition:transform .18s cubic-bezier(.22,.61,.36,1)}
.rp-digest:hover .go{transform:translate(2px,-2px)}
@media (max-width:720px){.rp-digest{margin-left:0; width:100%}}

/* ====== ПЕРЕПИСКА В СДЕЛКЕ (вариант «сначала состояние, потом переписка», 17.09.2026) ====== */
/* Макет выбран заказчицей из трёх. Смысл: в переписку заходят не читать её, а понять,
   за кем ход и сколько клиент ждёт. Поэтому цифры сверху, сам диалог — под кнопкой. */
.cv{ background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.cv-top{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.055); flex-wrap:wrap; }
.cv-ava{ width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.08); display:grid; place-items:center;
  font-family: var(--font-heading); font-size:11.5px; font-weight:600; color:rgba(255,255,255,.64); flex:none; }
.cv-who{ font-weight:600; }
.cv-chip{ font-size:11px; padding:3px 8px; border-radius:999px; border:1px solid var(--line); color:rgba(255,255,255,.64); white-space:nowrap; }
.cv-chip.wa{ color:#5FD18A; border-color:rgba(95,209,138,.34); }
.cv-chip.tg{ color:#2F6BF5; border-color:rgba(47,107,245,.4); }
.cv-right{ margin-left:auto; }
.cv-sumgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:1px; background:rgba(255,255,255,.055); }
.cv-cell{ background: var(--surface); padding:12px 14px; }
.cv-cell .k{ font-size:11px; color:rgba(255,255,255,.42); text-transform:uppercase; letter-spacing:.06em; }
.cv-cell .v{ font-family: var(--font-heading); font-size:19px; font-weight:600; margin-top:3px; font-variant-numeric: tabular-nums; }
.cv-cell .v.warn{ color:#E8C13C; } .cv-cell .v.ok{ color:#5FD18A; }
.cv-cell .n{ font-size:11.5px; color:rgba(255,255,255,.42); margin-top:2px; }
.cv-last{ padding:13px 14px; border-top:1px solid rgba(255,255,255,.055); font-size:13.5px; }
.cv-last em{ display:block; font-style:normal; color:rgba(255,255,255,.42); font-size:11px; margin-bottom:3px; }
.cv details{ border-top:1px solid rgba(255,255,255,.055); }
.cv summary, .cv-sum{ padding:11px 14px; cursor:pointer; color:rgba(255,255,255,.64); font-size:13px;
  list-style:none; display:flex; align-items:center; gap:8px; }
.cv summary::-webkit-details-marker, .cv-sum::-webkit-details-marker{ display:none; }
.cv summary::before, .cv-sum::before{ content:"▸"; color:rgba(255,255,255,.42); transition: transform .18s cubic-bezier(.22,.61,.36,1); }
.cv details[open] summary::before, details[open] > .cv-sum::before{ transform: rotate(90deg); }
.cv-sum{ padding-left:0; }
.cv-lines{ padding:4px 0 8px; }
.cv-ln{ display:grid; grid-template-columns:52px 3px 1fr; gap:10px; padding:7px 14px; align-items:start; }
.cv-ln + .cv-ln{ border-top:1px solid rgba(255,255,255,.055); }
.cv-ln .tm{ color:rgba(255,255,255,.42); font-size:12px; font-variant-numeric: tabular-nums; padding-top:1px; }
.cv-ln .bar{ border-radius:2px; align-self:stretch; min-height:16px; }
.cv-ln.in .bar{ background:rgba(255,255,255,.22); }
.cv-ln.out .bar{ background:#2F6BF5; }
.cv-ln .nm{ font-size:11px; color:rgba(255,255,255,.42); display:block; margin-bottom:1px; }
.cv-ln .tx{ font-size:13.5px; white-space:pre-line; }
.cv-ln.gap{ background:rgba(232,193,60,.05); }
.cv-wait{ color:#E8C13C; font-size:11px; margin-left:6px; white-space:nowrap; }
.cv-day{ display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.42); font-size:11.5px; padding:6px 14px; }
.cv-day::before, .cv-day::after{ content:""; height:1px; background:rgba(255,255,255,.055); flex:1; }
@media (max-width:560px){ .cv-ln{ grid-template-columns:44px 3px 1fr; gap:8px; padding-inline:11px; } }
.cv-empty{ padding:14px; color:rgba(255,255,255,.42); font-size:13px; }

/* ══════ АДМИН-ПАНЕЛЬ → «Проект» (пересобран 21.09.2026, направление «Б») ══════
   Прежде: один столбец блоков от удалённой золотой темы и ТРИ кнопки «Сохранить»
   на разной глубине прокрутки. Теперь сверху состояние проекта числами, ниже разделы
   без своих кнопок, внизу прилипшая полоса с одним сохранением и счётчиком изменений.
   Значения токенов — по DESIGN.md: поверхность .05, линия .09, радиусы 10/24/999. */

.adm-state{display:flex; gap:14px; margin:2px 0 20px; flex-wrap:wrap}
.adm-st{flex:1 1 180px; min-width:0; height:104px; box-sizing:border-box;
  border:1px solid var(--line); border-radius:24px; background:var(--surface);
  padding:16px 18px; display:flex; flex-direction:column; justify-content:space-between}
.adm-st span{font-size:13px; color:var(--rd-text-2)}
.adm-st b{font-family:var(--font-heading); font-size:27px; font-weight:600; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.adm-sec{margin-bottom:22px}
.adm-sec h2{margin:0 0 12px; font-family:var(--font-heading); font-size:15px; font-weight:600;
  color:var(--rd-text-2)}
.adm-sec .hint{margin:8px 0 0; font-size:12.5px}
.adm-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.adm-row .hint{margin:0}
.adm-row .gm-switch{margin:0}

/* Подпись отдельной строкой над полем. Двойной селектор намеренно: общее правило форм
   `select, input[type="date"], … {width:100%}` имеет специфичность (0,1,1), и одиночный
   класс ему проигрывает — на этом в проекте обожглись пять раз. */
.adm-sec .adm-fld{display:flex; flex-direction:column; gap:6px; min-width:0}
.adm-sec .adm-fld label{font-size:13px; color:var(--rd-text-2); margin:0}
/* Флажки и радио выведены из-под правила ширины. Иначе `width:100%` растягивает сам
   чекбокс, и подпись улетает к правому краю — списки этапов читались как рваная колонка.
   Это уже второй случай в проекте: так же ломались чипы сегментов в ящике. */
.adm-sec .adm-fld input:not([type="checkbox"]):not([type="radio"]),
.adm-sec .adm-fld textarea,
.adm-sec .adm-grid2 input{
  width:100%; box-sizing:border-box; background:var(--surface);
  border:1px solid var(--line); border-radius:10px; color:var(--ink);
  font-family:var(--font-body); font-size:14px; padding:12px 14px; margin:0;
  transition:border-color 130ms cubic-bezier(.22,.61,.36,1)}
.adm-sec .adm-fld input[type="number"], .adm-sec .adm-grid2 input{
  font-family:var(--font-heading); font-size:15px; font-variant-numeric:tabular-nums}
.adm-sec .adm-fld textarea{resize:vertical; min-height:62px; font-family:var(--font-body); font-size:14px}
.adm-sec .adm-fld input:not([type="checkbox"]):not([type="radio"]):focus,
.adm-sec .adm-fld textarea:focus, .adm-sec .adm-grid2 input:focus{
  outline:none; border-color:rgba(255,255,255,.3)}

/* Изменённое поле: синяя кромка плюс прежнее значение подписью. Полоса внизу называет
   те же поля словами — «изменено» должно читаться и без цвета. */
.adm-sec .is-changed input, .adm-sec .is-changed textarea,
.adm-sec input.is-changed{border-color:rgba(47,107,245,.55)}
.adm-was{font-size:12px; color:#6a97f8; margin:0}

.adm-grid4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.adm-grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.adm-two{display:grid; grid-template-columns:1.15fr 1fr; gap:24px}
.adm-two h2{margin-top:0}
.adm-two .adm-fld{margin-top:12px}
.adm-two > div > .adm-fld:first-of-type{margin-top:0}
@media (max-width:980px){
  .adm-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adm-two{grid-template-columns:1fr}
}
@media (max-width:620px){ .adm-grid4{grid-template-columns:1fr} }

.adm-addgroup{display:flex; gap:10px; align-items:flex-end; margin-top:10px}
.adm-addgroup .adm-fld{flex:1 1 auto}
.adm-addgroup .btn{white-space:nowrap; flex:0 0 auto}

/* Три прежние кнопки сохранения. Их обработчики и есть запись в базу — полоса внизу
   нажимает именно их, поэтому удалять кнопки нельзя, только убрать с глаз. */
.adm-hidden-save{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Отрицательных полей тут быть не должно: у колонки .adm-wrap своего padding нет,
   и полоса вылезала за панель на 20px с каждой стороны (замер: 1106 против 1066). */
.adm-savebar{position:sticky; bottom:0; z-index:5; display:flex; align-items:center; gap:14px;
  margin:12px 0 0; padding:14px 20px; background:var(--sticky-bg);
  border:1px solid var(--line); border-bottom:0; border-radius:16px 16px 0 0; flex-wrap:wrap}
.adm-savetext{flex:1 1 auto; font-size:14px; color:var(--rd-text-2); min-width:180px}
.adm-savetext b{color:var(--ink); font-weight:500}
.adm-savebar .kb-pay{margin-left:0; padding:10px 24px}
.adm-savebar.is-idle .kb-pay, .adm-savebar.is-idle #admRevertBtn{opacity:.45; pointer-events:none}

/* Полоса действия внизу раздела: слева пояснение или статус, справа главное действие.
   Раньше кнопка стояла во всю ширину (.btn-block от удалённой золотой темы) и читалась
   как главное на экране, хотя это сохранение одного блока. */
.adm-act{display:flex; align-items:center; gap:16px; margin-top:14px; flex-wrap:wrap}
.adm-act .hint{flex:1 1 220px; margin:0}
.adm-act .kb-pay{margin-left:auto; padding:10px 22px}
.adm-act .kb-pay::after{content:none}

/* Разделы без настроек («Геймификация», «Сборка данных») раньше были абзацем текста,
   который читался как заглушка. Значения есть — просто заданы в коде, а не формой:
   показываем их таблицей, тогда раздел отвечает на вопрос, а не извиняется. */
.adm-facts{margin:14px 0 0; display:flex; flex-direction:column; gap:1px;
  border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--line)}
.adm-facts > div{display:flex; align-items:baseline; gap:16px; background:var(--bg);
  padding:12px 16px; flex-wrap:wrap}
.adm-facts dt{flex:0 0 190px; font-size:13.5px; color:var(--rd-text-2)}
.adm-facts dd{flex:1 1 220px; margin:0; font-size:14px}
.adm-facts dd .hint{display:inline; font-family:var(--font-heading); font-size:12.5px;
  color:var(--rd-text-3); margin-left:6px}
@media (max-width:620px){ .adm-facts dt{flex-basis:100%} }

/* Карточка листа в «Интеграциях». Двенадцать одинаковых списков галочек стояли плоской
   стопкой, и понять, где находишься, можно было только прочитав подпись. Теперь один
   блок на лист, три списка в ряд — различаются местом, а не чтением. */
.adm-crmcard{border:1px solid var(--line); border-radius:16px; background:var(--surface);
  padding:16px 18px; margin-top:12px}
.adm-crmcard h3{margin:0 0 12px; font-family:var(--font-heading); font-size:14.5px; font-weight:600}
.adm-crmgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.adm-crmgrid .crm-checkbox-list{max-height:190px; overflow-y:auto}
.adm-crmcard .adm-narrow{max-width:360px; margin-top:14px}
@media (max-width:980px){ .adm-crmgrid{grid-template-columns:1fr} }

/* Пояснительная врезка (выгрузка архива Wazzup). Раньше несла инлайновый
   `var(--sand-light, #f4efe6)` — переменной из удалённой темы нет, поэтому применялся
   запасной СВЕТЛЫЙ цвет, а текст остался белым: читать было нечего. */
.adm-note{margin-top:14px; padding:14px 16px; border:1px solid var(--line);
  border-radius:16px; background:var(--surface)}
.adm-note .adm-notetitle{margin:0 0 6px; font-family:var(--font-heading); font-size:14px; font-weight:600}
.adm-note .hint{margin:0}
.adm-note .adm-act{margin-top:10px}

/* Опасные действия: цвет ошибки темы, полоса слева ровно 1px. Раньше заголовок красился
   через --terracotta-deep (в «Листах» это розовый, а не красный) и нёс эмодзи. */
.adm-danger{border:1px solid rgba(232,83,74,.38); border-left:1px solid rgba(232,83,74,.38);
  border-radius:16px; background:rgba(232,83,74,.06); padding:16px 18px}
.adm-danger h2{color:var(--rd-danger); margin-top:0}
.btn.btn-danger{background:rgba(232,83,74,.16)!important; border-color:rgba(232,83,74,.38)!important;
  color:var(--rd-danger)!important}
.btn.btn-danger:hover{background:rgba(232,83,74,.26)!important}

/* Подпись над списком галочек ведёт себя как подпись поля, но сам список уже имеет
   рамку и прокрутку — второй рамки ему не нужно. */
.adm-crmgrid .adm-fld > label{margin-bottom:0}
.adm-crmgrid .crm-checkbox-list label{justify-content:flex-start}
.adm-crmgrid .crm-checkbox-list input[type="checkbox"]{flex:0 0 auto; margin:0}

/* ══════════ КЕЙСЫ УЧЕНИКОВ (19.10.2026) ══════════
   Плитки — те же .ob, что у «Банка возражений»; цвет по первой боли кейса.
   Фильтр болей — фишками с переносом, а не лентой: их до семнадцати, и в ленте
   половина уезжала бы за край. */
.pt-bar .cs-search{flex:1 1 360px; min-width:260px}
.cs-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.cs-chip{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
 border:1px solid var(--line); background:var(--surface); color:var(--rd-text-2);
 font-family:inherit; font-size:13.5px; cursor:pointer;
 transition:background 130ms cubic-bezier(.22,.61,.36,1), color 130ms ease, border-color 130ms ease}
.cs-chip:hover{color:#fff; border-color:rgba(255,255,255,.22)}
.cs-chip .n{background:rgba(255,255,255,.12); border-radius:999px; padding:1px 8px; font-size:12px;
 font-variant-numeric:tabular-nums}
.cs-chip.on{background:#fff; color:#101014; border-color:#fff}
.cs-chip.on .n{background:rgba(16,16,20,.12)}
.cs-chip.cs-reset{background:transparent; border-style:dashed}
.cs-found{margin-top:14px; font-size:13px; color:var(--rd-text-3)}
.cs-grid{margin-top:12px}
.cs-tile{min-height:196px}
.cs-tile .cs-sum{font-family:var(--font-heading); font-size:28px; font-weight:600; line-height:1.1;
 font-variant-numeric:tabular-nums}
.cs-tile .q{font-size:16px; font-weight:500}
.cs-tile .cs-snip{font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.86);
 background:rgba(0,0,0,.22); border-radius:12px; padding:8px 10px}
#tab-cases mark{background:rgba(232,193,60,.34); color:#fff; border-radius:3px; padding:0 2px}

.cs-dw{width:600px}
.dw-foot a.ghost{display:inline-flex; align-items:center; text-decoration:none}
.cs-dr-top{padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:18px}
.cs-dr-sum{font-family:var(--font-heading); font-size:38px; font-weight:600; line-height:1.05;
 font-variant-numeric:tabular-nums}
.cs-dr-cap{font-size:13px; color:var(--rd-text-3); margin-top:6px}
.cs-chiprow{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.cs-tag{font-size:12px; padding:4px 10px; border-radius:999px; background:rgba(47,107,245,.16); color:#9FBBFF}
.cs-ab{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin-bottom:18px}
.cs-ab > div{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:11px 13px}
.cs-ab span{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--rd-text-3)}
.cs-ab b{display:block; margin-top:4px; font-weight:500; font-size:14px; line-height:1.35; font-variant-numeric:tabular-nums}
.cs-ab i{font-style:normal; color:var(--rd-text-3)}
.cs-facts{margin:0 0 16px}
.cs-facts dt{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--rd-text-3); margin-top:12px}
.cs-facts dd{margin:4px 0 0; font-size:14.5px; line-height:1.55}
.cs-quote{margin:0 0 18px; padding:15px 17px; border-radius:16px; background:rgba(95,209,138,.1);
 border:1px solid rgba(95,209,138,.26); border-left-width:3px}
.cs-quote p{margin:0; font-size:15px; line-height:1.55}
.cs-qcopy{margin-top:10px; padding:7px 13px; border-radius:999px; border:1px solid var(--line);
 background:rgba(255,255,255,.075); color:#fff; font-family:inherit; font-size:12.5px; cursor:pointer}
.cs-qcopy:hover{background:rgba(255,255,255,.14)}
.cs-vids{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px}
.cs-vid{padding:8px 14px; border-radius:999px; background:rgba(232,83,74,.16); color:#F79790;
 font-size:13px; text-decoration:none}
.cs-vid:hover{background:rgba(232,83,74,.26)}
.cs-h{font-family:var(--font-heading); font-size:15px; font-weight:600; margin:20px 0 10px}
.cs-shots{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.cs-shots a{display:block; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--surface)}
/* contain, а не cover: скриншоты переписок бывают и узкие, и широкие — обрезка съедала суть */
.cs-shots img{display:block; width:100%; aspect-ratio:3/4; object-fit:contain; background:#0E0E12}
.cs-sec{margin-bottom:14px}
.cs-sec h4{font-size:13px; font-weight:600; color:var(--rd-text-2); margin:0 0 6px}
.cs-sec p{margin:0 0 6px; font-size:14px; line-height:1.6; color:rgba(255,255,255,.86)}
.cs-links{display:flex; gap:14px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line)}
.cs-links a{color:#9FBBFF; font-size:13.5px; text-decoration:none}
@media (max-width:560px){ .cs-shots{grid-template-columns:repeat(2,1fr)} .cs-dr-sum{font-size:32px} }
.cs-cut{grid-column:1/-1; display:flex; align-items:center; gap:12px; margin:6px 0 -2px;
 font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--rd-text-3)}
.cs-cut::after{content:''; flex:1; height:1px; background:var(--line)}
/* На телефоне фишки — лентой вбок: при переносе каждая вставала отдельной строкой,
   и семнадцать строк уталкивали сами кейсы за третий экран. */
@media (max-width:560px){
 .cs-chips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-left:-16px; margin-right:-16px;
  padding:2px 16px 4px}
 .cs-chips::-webkit-scrollbar{display:none}
 .cs-chip{flex:none}
}