/* ── Личный кабинет: общий слой для всех страниц ЛК ───────────────────────
   Подключается на /cabinet, странице разбора, инструкциях, сертификате и
   пробном материале — чтобы раскладка и цвет были едиными, а не только на
   главном экране.
   Палитра кабинета своя и НЕ повторяет персик сайта: розовый + зелёный.
   Розовый ведёт действие, зелёный — прогресс и «готово»; так рабочий экран
   читается боковым зрением и не сливается с витриной. */
:root{
  --cab-rose:#e08bab;      /* розовый — действие, новое, акцент кабинета */
  --cab-green:#6faa8e;     /* эвкалипт — прогресс, идёт работа */
  --cab-deep:#57ab88;      /* зелёный — готово, пройдено */
  --cab-haze:#cfe0d6;      /* мятная дымка — мягкая подложка */
  --cab-plum:#b8789c;      /* сливовый — история, «ваш путь» */
}
/* ── Личный кабинет: рабочая поверхность ──────────────────────────────────
   Не витрина, а инструмент: фиксированная шкала кегля вместо clamp, широкая
   рабочая область вместо колонки по центру, две зоны — «что делать сейчас»
   слева и вспомогательное справа. Акцент — розовый (--cab-rose), состояния —
   зелёные: активное, прогресс, пройдено. */
.cab-wrap{width:100%;max-width:1520px;margin:0 auto;padding:0 clamp(18px,3vw,44px);}

.cab-head{position:static;background:none;backdrop-filter:none;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:26px;border-bottom:1px solid var(--line);}
.cab-eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.cab-hello{font-family:'Unbounded',sans-serif;font-weight:600;font-size:1.9rem;line-height:1.1;
  letter-spacing:-.02em;margin:8px 0 0;}
.cab-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* Колокольчик уведомлений — вместо широкого баннера на пол-экрана */
.cab-bell{position:relative;width:44px;height:44px;border-radius:11px;border:1px solid var(--line);
  background:var(--glass);color:var(--fg);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .2s,background .2s;}
.cab-bell:hover{border-color:var(--fg);}
.cab-bell svg{width:19px;height:19px;}
.cab-bell__dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 2px var(--bg);}
.cab-bell--on{border-color:var(--red);background:var(--red-ring);}
.cab-bell--busy{opacity:.55;pointer-events:none;}
.cab-hint{width:100%;font-size:13px;line-height:1.55;color:var(--muted);background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:12px;}
.cab-hint b{color:var(--fg);}

.cab-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.cab-head .live-strip{margin:14px 0 0;}          /* чип статуса прижимался к заголовку */



/* Две зоны: слева задача, справа вспомогательное */
.cab-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start;
  padding-bottom:70px;}
.cab-col{display:flex;flex-direction:column;gap:18px;min-width:0;}
.cab-side{position:sticky;top:92px;}

.cab-sec{font-family:'Unbounded',sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:-.01em;
  margin:6px 0 0;}
.cab-sec span{font-size:12px;font-weight:500;color:var(--muted);margin-left:8px;letter-spacing:0;}
.cab-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;}

.cab-panel{border:1px solid var(--line);border-radius:16px;background:var(--bg);padding:18px;}
.cab-panel--soft{background:var(--surface);}
.cab-panel__k{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.cab-panel h3{font-family:'Unbounded',sans-serif;font-size:1rem;margin:8px 0 6px;}
.cab-panel p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0;}

/* Карточка продукта: единственное место с акцентной рамкой — она тут новая */
.cab-promo{border:1px solid var(--cab-green);border-radius:16px;
  background:color-mix(in srgb, var(--cab-green) 12%, transparent);padding:18px;}
.cab-new{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--fg);color:var(--bg);border-radius:999px;padding:4px 9px;margin-left:8px;vertical-align:2px;}

/* Приветственное видео — компактно, плеер не доминирует над задачей */
/* Приветственное видео — компактная полоса в рабочей колонке, над разборами.
   Ролик у Дарьи вертикальный: если тянуть его по ширине блока, он съедает
   пол-экрана чёрными полями. Поэтому задаём ВЫСОТУ, а ширину считает браузер —
   так одинаково компактно и для вертикального, и для горизонтального ролика. */
.cab-welcome{display:flex;align-items:stretch;gap:16px;
  border:1px solid color-mix(in srgb, var(--fg) 12%, transparent);border-radius:16px;
  padding:12px;margin:0 0 18px;
  background:color-mix(in srgb, var(--bg) 58%, transparent);
  backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);}
.cab-welcome .cw-video{flex:0 0 auto;border-radius:11px;overflow:hidden;background:#000;}
.cab-welcome .cw-video video{display:block;height:190px;width:auto;max-width:100%;max-height:190px;}
.cab-welcome .cw-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;
  padding:16px 18px;border-radius:11px;
  background:linear-gradient(140deg, color-mix(in srgb, var(--cab-rose) 26%, transparent),
                                     color-mix(in srgb, var(--cab-green) 20%, transparent));}
.cw-kicker{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;}
.cab-welcome .cw-title{font-size:1.25rem !important;line-height:1.2;margin:0;}
.cab-welcome .cw-text{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--fg);opacity:.85;}
@media(max-width:620px){
  .cab-welcome{flex-direction:column;}
  .cab-welcome .cw-video{align-self:center;}
  .cab-welcome .cw-video video{height:220px;}
}


.cab-diary-row{display:flex;align-items:center;justify-content:space-between;gap:14px;}

/* Цвет и стекло: мягкие пятна под контентом, панели — матовое стекло поверх.
   Пятна деликатные: они дают глубину, но не спорят с текстом. */
.cab-hero{position:relative;isolation:isolate;}
.cab-hero::before{content:'';position:absolute;z-index:-1;pointer-events:none;
  inset:-40px -6vw auto -6vw;height:620px;
  background:
    radial-gradient(560px 340px at 10% 0%, rgba(224,139,171,.30), transparent 66%),
    radial-gradient(560px 340px at 88% 2%, rgba(111,170,142,.34), transparent 66%),
    radial-gradient(420px 260px at 60% 34%, rgba(207,224,214,.24), transparent 70%);}
[data-theme="dark"] .cab-hero::before{
  /* На тёмном радиальные пятна дают заметные полосы (бандинг) — виден «мерцающий»
     переход. Поэтому в тёмной теме только очень мягкая линейная подсветка сверху:
     линейный градиент по одной оси ступенями почти не идёт. */
  background:linear-gradient(180deg, rgba(224,139,171,.085) 0%, rgba(111,170,142,.035) 30%, transparent 64%);}

.cab-panel{background:color-mix(in srgb, var(--bg) 58%, transparent);
  backdrop-filter:blur(18px) saturate(1.18);-webkit-backdrop-filter:blur(18px) saturate(1.18);
  border-color:color-mix(in srgb, var(--fg) 13%, transparent);}
.cab-promo{background:linear-gradient(150deg, color-mix(in srgb, var(--cab-green) 30%, transparent), color-mix(in srgb, var(--bg) 60%, transparent));
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-color:color-mix(in srgb, var(--cab-green) 58%, transparent);
  box-shadow:0 14px 34px -22px rgba(111,170,142,.8);}
.cab-cards a{background:color-mix(in srgb, var(--bg) 62%, transparent) !important;
  backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid color-mix(in srgb, var(--fg) 12%, transparent) !important;
  transition:transform .2s, box-shadow .2s, border-color .2s;}
.cab-cards a:hover{transform:translateY(-2px);box-shadow:0 16px 32px -24px rgba(20,19,15,.5);
  border-color:color-mix(in srgb, var(--cab-green) 62%, transparent) !important;}

/* Карточка разбора в сетке: заголовок под ширину колонки, а не под всю строку */
.cab-cards a{align-items:flex-start !important;padding:14px !important;border-radius:14px !important;}
.cab-cards a .display{font-size:1.05rem !important;line-height:1.2 !important;}
.cab-cards a img{width:64px !important;height:64px !important;border-radius:10px !important;}
.cab-cards a > span:last-child{gap:6px !important;}

@media(max-width:1100px){
  .cab-grid{grid-template-columns:1fr;gap:20px;}
  .cab-side{position:static;}
}
@media(max-width:620px){
  .cab-hello{font-size:1.5rem;}
  .cab-head{align-items:flex-start;gap:14px;}
  .cab-actions{width:100%;}
  .cab-cards{grid-template-columns:1fr;}
}

/* ── Цвет по смыслу ───────────────────────────────────────────────────────
   Не декор: каждый оттенок закреплён за состоянием, чтобы экран читался
   боковым зрением. Розовый — действие и новое, эвкалипт — прогресс,
   зелёный — готово, сливовый — история. */

/* Заголовок раздела: цветная засечка вместо голого текста */
.cab-sec{display:flex;align-items:center;gap:10px;}
.cab-sec::before{content:'';width:4px;height:18px;border-radius:3px;background:var(--cab-rose);flex:0 0 auto;}
.cab-sec span{background:color-mix(in srgb, var(--cab-rose) 22%, transparent);color:var(--fg);
  border-radius:999px;padding:2px 9px;margin-left:2px;font-size:11px;}

/* Прогресс разбора — прохладный, чтобы не спорить с кнопками действия */
.cab-cards a span[style*="height:6px"]{background:color-mix(in srgb, var(--cab-green) 22%, transparent) !important;}
.cab-cards a span[style*="height:6px"] > span{background:linear-gradient(90deg, var(--cab-rose), var(--cab-deep)) !important;}

/* Пройдено — мятный */
.cab-cards a .cab-done,.cab-panel .cab-done{color:var(--cab-deep);}
.cab-paused{background:color-mix(in srgb, var(--cab-haze) 34%, transparent);border-radius:999px;padding:2px 9px;font-size:11px;}

/* Чипы статуса: тёплый — серия дней, лиловый — «Дарья была» */
.cab-head .live-chip{border:1px solid color-mix(in srgb, var(--cab-rose) 46%, transparent);
  background:color-mix(in srgb, var(--cab-rose) 13%, transparent);border-radius:999px;padding:6px 12px;}
/* «Дарья была недавно» — зелёный: это признак присутствия, а не декор */
.cab-head .live-chip--daria{border-color:color-mix(in srgb, var(--cab-green) 55%, transparent);
  background:color-mix(in srgb, var(--cab-green) 14%, transparent);}

/* «Ваш путь» — лиловая засечка: это история, а не задача */
.diary-wrap{border-left:3px solid color-mix(in srgb, var(--cab-plum) 55%, transparent);}
.cab-panel__k{color:var(--muted);}

/* ── Внутренние страницы ЛК: та же шкала, что на главном экране ───────────
   Заголовки там заданы инлайново через clamp (наследие витринной вёрстки),
   поэтому переопределяем явно: кабинет — рабочая поверхность. */
/* Файл подключён только на страницах ЛК, поэтому правило безопасно глобальное:
   у внутренних страниц свои контейнеры (.help-wrap и т.п.), под один селектор их не собрать. */
h1.display{font-size:1.9rem !important;line-height:1.15 !important;letter-spacing:-.02em;}
.cab-wrap .crumbs{margin-bottom:14px;}

/* Пустое состояние: сообщение, а не полстраницы пустоты */
.cab-wrap .lessons-empty,.cab-wrap #lessonsRoot > .card:only-child{
  text-align:left;padding:22px 24px;border-radius:16px;
  border-left:3px solid color-mix(in srgb, var(--cab-green) 55%, transparent);}

@media(max-width:620px){ h1.display{font-size:1.5rem !important;} }


/* ── Тёмная тема: цвет не должен уходить в серость ─────────────────────────
   На тёмном фоне те же color-mix-проценты дают почти нейтральный результат —
   цвет читается только в светлой теме. Поэтому здесь оттенки светлее, а доли
   выше; сравнивал на реальном экране, не на глаз в коде. */
[data-theme="dark"]{
  --cab-rose:#f0a4c0;
  --cab-green:#84c7a7;
  --cab-deep:#7fd0aa;
  --cab-haze:#9fc2ae;
  --cab-plum:#cf9dba;
}
[data-theme="dark"] .cab-hero::before{
  background:linear-gradient(180deg, rgba(240,164,192,.12) 0%, rgba(132,199,167,.06) 32%, transparent 66%);}
[data-theme="dark"] .cab-promo{
  /* цвет держим дольше по диагонали: одношаговый уход в фон на тёмном читается серым */
  background:linear-gradient(150deg, color-mix(in srgb, var(--cab-green) 36%, transparent) 0%,
                                     color-mix(in srgb, var(--cab-green) 14%, transparent) 52%,
                                     transparent 100%);
  border-color:color-mix(in srgb, var(--cab-green) 62%, transparent);
  box-shadow:0 14px 34px -22px rgba(132,199,167,.6);}
[data-theme="dark"] .cab-welcome .cw-body{
  background:linear-gradient(140deg, color-mix(in srgb, var(--cab-rose) 24%, transparent) 0%,
                                     color-mix(in srgb, var(--cab-green) 22%, transparent) 100%);}
[data-theme="dark"] .cab-head .live-chip{border-color:color-mix(in srgb, var(--cab-rose) 55%, transparent);
  background:color-mix(in srgb, var(--cab-rose) 18%, transparent);}
[data-theme="dark"] .cab-head .live-chip--daria{border-color:color-mix(in srgb, var(--cab-green) 60%, transparent);
  background:color-mix(in srgb, var(--cab-green) 18%, transparent);}
[data-theme="dark"] .cab-sec span{background:color-mix(in srgb, var(--cab-rose) 26%, transparent);}