/* Дизайн-токены кабинета = дизайн-токены PEAKCUT.

   Раньше здесь жила своя палитра (--ac:#5B5BD6, серый воркспейс) из отдельного
   макета, и кабинет визуально разошёлся с админкой. Источник истины один —
   admin/app/static/tokens.css; этот файл его повторяет, добавляя только то, чего
   в админке нет (цвета площадок, анимации кабинета).

   Правило бренда, которое здесь нельзя нарушать: ФИОЛЕТОВЫЙ — это PEAKCUT
   (бренд, главные действия), ЗЕЛЁНЫЙ — это выбор и сигнал (активный пункт
   навигации, «живое», рост). Зелёный как текст живёт только на тёмном. */
:root{
  color-scheme:light;

  /* Бренд */
  --purple-50:#f5f0ff;
  --purple-100:#ede3ff;
  --purple-500:#9146ff;
  --purple-600:#7c3aed;
  --purple-700:#6d28d9;
  --lime-400:#53fc18;
  /* Знак Populi (13.09.2026): кольцо цветом текста, точка — градиент фиолетовый → бирюзовый.
     Только у знака: палитра интерфейса бирюзы не получает. */
  --logo-a:#7f6bff;
  --logo-b:#57e0b4;
  --sidebar:#ffffff;
  --sidebar-raised:#252832;
  --white:#fff;
  --workspace:#f8fafc;
  --ink:#05070d;
  --ink-raised:#11141d;
  --glass:rgba(255,255,255,.68);
  --glass-strong:rgba(255,255,255,.82);
  --glass-line:rgba(255,255,255,.74);

  /* Светлый аналитический остров — фирменная поверхность продукта. В кабинете
     на ней живут блоки, которые клиент читает как «пульс»: охват во времени,
     топ рилсов, шапка аккаунта. Белая карточка с еле заметным фиолетово-лаймовым
     дыханием градиента; имена «-on-dark» исторические — это просто акценты
     острова, теперь на светлой подложке. */
  --island-grad:linear-gradient(155deg,#ffffff 0%,#fbf9ff 58%,#f6faf5 132%);
  --island-solid:#ffffff;
  --island-raise:rgba(15,23,42,.03);
  --island-line:rgba(15,23,42,.08);
  --island-line-strong:rgba(15,23,42,.16);
  --on-island:var(--text);
  --on-island-muted:var(--muted);
  --on-island-faint:#8494a7;
  --signal-on-dark:var(--selection-strong);
  --accent-on-dark:var(--purple-500);
  --ok-on-dark:#15803d;
  --warn-on-dark:#b45309;
  --danger-on-dark:#dc2626;
  --info-on-dark:#0284c7;
  --island-shadow:0 14px 32px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.85);
  --island-shadow-hover:0 18px 40px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.9);
  --island-glow-violet:rgba(145,70,255,.12);
  --island-glow-lime:rgba(83,252,24,.07);

  /* Ряды графика — фиксированный порядок, НЕ по рангу: цвет принадлежит
     величине, и просмотры остаются фиолетовыми, сколько бы рядов ни показывали.
     Пара подобрана под БЕЛУЮ подложку острова: обе линии темнее поля и
     различаются между собой в том числе по светлоте. Третьего ряда на графике
     нет: подписчики отличаются на два порядка и живут плиткой, а не линией. */
  --series-1:var(--purple-500);  /* просмотры  — фиолетовая половина бренда */
  --series-2:#34c70e;            /* охваченные зрители — лаймовая половина */
  --series-1-glow:rgba(145,70,255,.32);
  --series-2-glow:rgba(52,199,14,.28);

  /* Семантические поверхности и текст */
  --bg:var(--workspace);
  --surface:var(--white);
  --surface-1:#f9fafc;   /* чуть серее белого: ряд фильтров таблицы, не спорит с карточкой */
  --surface-2:#f1f5f9;
  --surface-3:#e8eef5;
  --line:#d7e0ea;
  --line-soft:#e8edf3;
  --control-line:#7c8ba1;
  --text:#0f172a;
  --muted:#526176;
  --muted-2:#64748b;
  --accent:var(--purple-500);
  --accent-dim:var(--purple-600);
  --accent-strong:var(--purple-700);
  --accent-ghost:rgba(145,70,255,.11);

  --selection:var(--lime-400);
  --selection-strong:#34c70e;
  --selection-surface:rgba(83,252,24,.13);
  --selection-surface-strong:rgba(83,252,24,.2);
  --selection-line:rgba(83,252,24,.46);
  --selection-text:#17320c;
  --selection-on-dark:#b8ff9f;

  --signal:var(--lime-400);
  --signal-text:#102a09;
  --ok:#19713b;
  --ok-surface:#eaf8ef;
  --warn:#9a5b08;
  --warn-surface:#fff7df;
  --danger:#c52c35;
  --danger-surface:#fff0f1;
  --info:#1769aa;
  --info-surface:#edf6ff;
  --unknown:#5b6472;
  --unknown-surface:#f1f3f6;

  /* Ровно тот же стек, что у operator admin. Кабинет больше не подставляет
     самохостящийся Golos между Inter и системным UI-шрифтом: именно он давал
     клиентской поверхности заметно более тяжёлый и чужой рисунок. */
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:"Avenir Next",Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;

  --text-xs:.75rem;
  --text-sm:.8125rem;
  --text-md:.875rem;
  --text-lg:1rem;
  --text-xl:1.5rem;

  --space-1:4px;  --space-2:8px;  --space-3:12px;  --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px;

  /* Радиусы — средняя шкала (итерация 1 редизайна, референс handoff/
     dashboard-target.png): 24px читались «пузырём», рубеные 2–4px — жестковато.
     Средняя — та, что читается как актуальный SaaS; границы на ней не выцветают.
     Кабинет от админской шкалы здесь расходится осознанно — редизайн идёт
     маленькими итерациями, админка подтянется своей. */
  --r-sm:6px;
  --r-md:8px;
  --r-lg:10px;
  --r-xl:12px;
  /* Радиус панели оболочки — сайдбар, шапка, карточки, остров, шторка: один на всех
     (доводка 12.09.2026: карточки на 12px спорили с сайдбаром на 24px; 13.09 владелец попросил чуть меньше — 20px). Вложенные
     элементы — плитки, обложки, кнопки — остаются на --r-xl и ниже. */
  --r-panel:20px;
  --surface-card:rgba(255,255,255,.74);
  --surface-card-strong:rgba(255,255,255,.88);
  --surface-card-hover:#fff;
  --surface-card-line:rgba(203,213,225,.72);
  --card-pad-compact:12px;
  --card-pad:16px;
  --card-pad-roomy:20px;
  --card-gap:16px;

  --shadow-none:none;
  --shadow-low:0 1px 2px rgba(15,23,42,.045);
  /* Тень карточки из референса итерации 1: разделение со фоном делает не рамка,
     а мягкая диффузная тень в два слоя (контактная + широкая), ховер добавляет
     лифт. Заменяет --shadow-low у .card/.kpi. */
  --shadow-card:0 1px 2px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.05);
  --shadow-lift:0 6px 18px rgba(15,23,42,.12);
  --shadow-raised:0 12px 30px rgba(15,23,42,.075);
  --shadow-overlay:0 22px 54px rgba(2,6,23,.18);
  /* Подложка под шторкой (волна 4): приглушает страницу, не пряча её. */
  --scrim:rgba(15,23,42,.28);
  --shadow-glass:var(--shadow-raised),inset 0 1px 0 rgba(255,255,255,.78);

  /* Сайдбар — раскрывающийся, как в админке, но по умолчанию РАЗВЁРНУТ:
     кабинет — витрина, подписи пунктов и панель «Creator cabinet» видны сразу.
     html[data-sidebar="collapsed"] сжимает его до иконок. */
  --sidebar-width:236px;
  --sidebar-current-width:var(--sidebar-width);
  --topbar-height:68px;
  --shell-gutter:12px;
  --pad:24px;

  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:140ms;
  --t-mid:200ms;
  --t-slow:260ms;

  --dur-feedback:100ms;
  --dur-micro:150ms;
  --dur-panel:240ms;
  --dur-cap:360ms;
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-enter:cubic-bezier(0,0,0,1);
  --ease-exit:cubic-bezier(.3,0,1,1);
  /* Свип по полотну графика. Входные кривые здесь не годятся: они отдают 88%
     пути за первую треть, и остаток ползёт — на длинной дистанции это читается
     не как «settle», а как подлагивание. Тут нужен ровный ход с мягкими концами. */
  --ease-sweep:cubic-bezier(.32,.08,.24,1);

  /* Площадки: фон плашки + цвет инициалов. Только в аватарках аккаунтов.
     Instagram живёт фирменным градиентом (--pf-ig-grad) с белым глифом. */
  --pf-ig-grad:radial-gradient(128% 128% at 22% 106%,#fdf497 0%,#fd5949 42%,#d6249f 66%,#6a2fd6 96%);
  --pf-instagram-bg:#fbe9f1;  --pf-instagram-fg:#c0246b;
  --pf-tiktok-bg:#ececf2;     --pf-tiktok-fg:#26262e;
  --pf-youtube-bg:#fce9ec;    --pf-youtube-fg:#c22b3d;
  --pf-twitch-bg:#efeafb;     --pf-twitch-fg:#7343c9;
  --pf-kick-bg:#eaf6ea;       --pf-kick-fg:#2e7d32;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font:inherit;border:none;background:none;padding:0;margin:0;color:inherit;}
input{font:inherit;}
a{color:inherit;text-decoration:none;}
[hidden]{display:none !important;}

/* Табличные цифры везде, где число меняется: иначе метрики «дёргаются» при
   обновлении и колонки таблиц перестают читаться сверху вниз. */
.num,.tnum,td.num,.kpi-value,.metric b{font-variant-numeric:tabular-nums;}

@keyframes riseIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes pulseDot{0%,100%{transform:scale(.7);opacity:.55}50%{transform:scale(1.1);opacity:1}}
@keyframes ppulse{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* ---------- проявление графика ----------
   Линию не открывают заслонкой, а ВЕДУТ: маска растёт слева направо, у её
   правого края растушёвка, и по этому же краю едет пятно света. Ни один такт не
   трогает геометрию путей — dash-reveal на растянутом полотне рвал штрих
   (см. .chart в components.css).

   Маска задана размером, а не позицией: растёт коробка mask-image, а
   растушёвка — её последние 56px, поэтому ширина размытия постоянна и не зависит
   от того, насколько широк график. Финальные 110% заведомо накрывают полотно
   целиком, так что после проигрыша не срезано ничего. */
@keyframes chartWipe{
  from{-webkit-mask-size:0% 100%;mask-size:0% 100%}
  to{-webkit-mask-size:110% 100%;mask-size:110% 100%}
}
/* Пятно света у кромки: разгорается на старте, ведёт линию, гаснет на финише. */
@keyframes chartSweep{
  from{left:-3%;opacity:0}
  12%{opacity:1}
  82%{opacity:1}
  to{left:103%;opacity:0}
}
/* Заливка поднимается от базовой линии ВСЛЕД за проведённой линией: второе
   направление движения там, где до этого всё ехало только горизонтально. */
@keyframes areaFlood{from{transform:scaleY(.05);opacity:0}to{transform:none;opacity:1}}
/* Прибытие: точка приходит с лёгким перелётом, а не проступает. Собственный
   translate у неё в базовом правиле — в кадрах его приходится повторять. */
@keyframes dotLand{
  from{transform:translate(-50%,-50%) scale(0);opacity:0}
  62%{transform:translate(-50%,-50%) scale(1.32);opacity:1}
  to{transform:translate(-50%,-50%) scale(1);opacity:1}
}
/* Одиночная волна от точки — не пульс: повторяющееся кольцо на статистике
   читается как «идёт загрузка», а здесь всё уже пришло. */
@keyframes dotRing{
  from{transform:translate(-50%,-50%) scale(.5);opacity:.5}
  to{transform:translate(-50%,-50%) scale(3.6);opacity:0}
}

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