/* ============================================================
   Дизайн-система админки Кубик Медиа.

   Размеры и отступы кратны четырём — правило компании из доклада
   «Дизайн внутри продукта» (General-A-543 в базе знаний).

   Смесь двух вещей, как просил Дима:
   • **наши интерфейсы** — токены сняты из Figma, файлы «Cubic Play Desktop»
     (uHTVsPuX16tVyBjIFmlikG) и «cubic play app» (4bBZKWgWN16ANjTVQG31GB):
     белый лист, чернила #141414, серый текст #7A7A7A, волосяная #EAE8E8,
     лаймовый #BDFC65 и малиновый #F02E9F как акценты, пилюли и скругления
     5 / 10 / 15 / 69;
   • **Material 3 в варианте Google** — каркас и поведение: верхняя панель,
     боковое меню пилюлями, карточки, чипы-фильтры, диалог, снекбар и главное
     — state layer (слой 8 % при наведении, 12 % при нажатии) вместо смены
     цвета.

   То есть роли и жесты от M3, значения — наши. Шрифт фирменный, ALS Hauss.
   ============================================================ */

:root{
  /* --- наши цвета, разложенные по ролям M3 --- */
  --primary:#F02E9F;              /* малиновый: главное действие, активное состояние */
  --primary-press:#CF2588;
  --on-primary:#FFFFFF;
  --accent:#BDFC65;               /* лайм: положительное действие, «играет», «готово» */
  --on-accent:#141414;
  --surface:#FFFFFF;
  --surface-low:#F9F9F9;
  --surface-mid:#F4F4F4;
  --surface-high:#EFEDED;
  --on-surface:#141414;
  --on-surface-variant:#7A7A7A;
  --outline:#C4C4C4;
  --hairline:#EAE8E8;
  --error:#B3261E;
  --error-surface:#FDECEA;
  --inverse-surface:#141414;
  --inverse-on-surface:#F9F9F9;

  /* --- форма: шкала из наших макетов --- */
  --r-xs:5px; --r-s:10px; --r-m:15px; --r-l:24px; --r-full:999px;

  /* --- тень: только у того, что действительно висит над листом --- */
  --e1:0 1px 2px rgba(20,20,20,.08),0 2px 8px rgba(20,20,20,.06);
  --e2:0 8px 28px rgba(20,20,20,.12);

  --font:"ALS Hauss","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--surface);color:var(--on-surface);
  font-family:var(--font);font-size:16px;line-height:22px;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* ---------- типографика: кегли из макетов кабинета ---------- */
.display{font-size:36px;line-height:38px;font-weight:600;letter-spacing:-.02em}
.headline{font-size:24px;line-height:34px;font-weight:600;letter-spacing:-.01em}
.title{font-size:18px;line-height:24px;font-weight:500}
.body{font-size:16px;line-height:22px}
.small{font-size:14px;line-height:18px}
.caption{font-size:12px;line-height:16px}
.dim{color:var(--on-surface-variant)}

/* ---------- state layer: приём M3 ---------- */
.lay{position:relative}
.lay::before{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;
  opacity:0;transition:opacity .12s;pointer-events:none}
.lay:hover::before{opacity:.08}
.lay:active::before{opacity:.12}

/* ---------- верхняя панель ---------- */
.appbar{height:72px;display:flex;align-items:center;gap:20px;padding:0 24px;background:var(--surface);
  position:sticky;top:0;z-index:20;border-bottom:1px solid var(--hairline)}
.brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:600;letter-spacing:-.01em;
  min-width:200px;text-decoration:none;color:var(--on-surface)}
.brand .mark{width:28px;height:28px;border-radius:var(--r-s);background:var(--on-surface);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:600}
.search{flex:1;max-width:640px;height:48px;display:flex;align-items:center;gap:12px;background:var(--surface-mid);
  border-radius:var(--r-full);padding:0 24px;color:var(--on-surface-variant)}
.search input{flex:1;border:0;outline:0;background:transparent;font:inherit;color:var(--on-surface)}
.search input::placeholder{color:var(--on-surface-variant)}
.appbar .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.ava{width:36px;height:36px;border-radius:50%;background:var(--surface-mid);color:var(--on-surface);
  display:grid;place-items:center;font-size:13px;font-weight:600}

/* ---------- каркас ---------- */
.shell{display:flex;align-items:flex-start}
.nav{width:264px;flex:0 0 264px;padding:16px 12px 40px;position:sticky;top:72px;height:calc(100vh - 72px);overflow-y:auto}
.nav h4{margin:16px 16px 8px;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;
  color:var(--on-surface-variant);text-transform:uppercase}
.navitem{display:flex;align-items:center;gap:12px;height:48px;padding:0 20px;border-radius:var(--r-full);
  color:var(--on-surface);text-decoration:none;font-size:16px;font-weight:500;cursor:pointer}
.navitem .count{margin-left:auto;font-size:13px;color:var(--on-surface-variant);font-weight:400}
/* активный пункт — малиновым текстом, как в кабинете, а не заливкой */
.navitem[aria-current="page"]{color:var(--primary)}
.navitem[aria-current="page"] .count{color:var(--primary)}
.content{flex:1;min-width:0;background:var(--surface-low);border-radius:var(--r-l) 0 0 0;
  padding:32px 40px 80px;min-height:calc(100vh - 72px)}

/* ---------- кнопки ---------- */
.btn{height:48px;display:inline-flex;align-items:center;gap:10px;padding:0 24px;border:0;border-radius:var(--r-full);
  font:inherit;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap;position:relative}
.btn--main{background:var(--primary);color:var(--on-primary)}
.btn--go{background:var(--accent);color:var(--on-accent)}
.btn--soft{background:var(--surface-mid);color:var(--on-surface)}
.btn--line{background:transparent;color:var(--on-surface);box-shadow:inset 0 0 0 1px var(--outline)}
.btn--text{background:transparent;color:var(--primary);padding:0 12px;height:40px}
.btn[disabled]{opacity:.5;cursor:default}

/* ---------- чипы-фильтры ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.chip{height:40px;display:inline-flex;align-items:center;padding:0 20px;border-radius:var(--r-full);
  background:transparent;box-shadow:inset 0 0 0 1px var(--hairline);color:var(--on-surface);
  font:inherit;font-size:15px;cursor:pointer;text-decoration:none;position:relative}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);box-shadow:none}

/* ---------- карточки ---------- */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(296px,1fr));margin-bottom:44px}
/* Контур — настоящей границей, а не внутренней тенью (правка Димы
   24.08.2026: «давай сделаем контур у карточек»). Тень `inset` рисуется под
   содержимым: обложка лежит поверх и закрывала контур с трёх сторон, он был
   виден только внизу, вокруг текста. Значение — волосяная #EAE8E8, та же,
   что у полей и чипов. */
.card{background:var(--surface);border-radius:var(--r-m);overflow:hidden;border:1px solid var(--hairline);
  display:flex;flex-direction:column;position:relative;transition:box-shadow .15s,border-color .15s}
.card:hover{border-color:var(--outline);box-shadow:var(--e1)}
/* Раньше вписывали обложку целиком (contain) — портретные флаеры проваливались
   в узкую полоску с полями. Правильно чинить не здесь: обложки теперь сами
   16:9 (единый срез сверху страницы, npm run covers, src/build-covers.mjs),
   поэтому cover снова безопасен и всегда садится ровно. */
.card .cover{position:relative;aspect-ratio:16/9;background:var(--surface-mid);overflow:hidden}
.card .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* белая пилюля поверх обложки — приём из кабинета, там так подписаны часы */
.card .pill{position:absolute;right:10px;bottom:10px;z-index:1;height:28px;padding:0 12px;border-radius:var(--r-full);
  background:var(--surface);color:var(--on-surface);font-size:13px;line-height:28px;font-weight:500}
/* Кегль и вес — ровно по шкале компании (cubic.md): «заголовок блока» 18/24/500,
   «подпись, второй уровень» 14/18/400. Не изобретать промежуточные размеры. */
.card .pad{padding:16px 16px 8px;flex:1}
.card .pad b{display:block;font-size:18px;line-height:24px;font-weight:500;margin-bottom:4px;letter-spacing:-.01em}
.card .pad span{font-size:14px;line-height:18px;color:var(--on-surface-variant)}
.card .acts{display:flex;align-items:center;gap:4px;padding:8px 12px 12px}

/* ---------- строки: главный приём наших кабинетов ---------- */
.rows{background:var(--surface);border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--hairline);
  overflow:hidden;margin-bottom:44px}
.row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:16px 24px;
  border-top:1px solid var(--hairline)}
.row:first-child{border-top:0}
.row .k{font-size:16px}
.row .k span{display:block;font-size:13px;color:var(--on-surface-variant);margin-top:2px}
.row .v{color:var(--on-surface-variant);font-size:14px;text-align:right}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 12px;border-radius:var(--r-full);
  font-size:13px;font-weight:500;background:var(--surface-mid);color:var(--on-surface-variant)}
.tag--ok{background:var(--accent);color:var(--on-accent)}
.tag--wait{background:var(--surface-mid);color:var(--on-surface-variant)}

/* ---------- шапка раздела ---------- */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:4px 0 24px}
.head h1{margin:0;font-size:32px;line-height:38px;font-weight:600;letter-spacing:-.02em}
.hint{color:var(--on-surface-variant);margin:8px 0 0;font-size:15px;line-height:21px;max-width:58ch}

/* ---------- поля ---------- */
.field{margin:0 0 20px;max-width:640px}
.field label{display:block;font-size:14px;color:var(--on-surface-variant);margin-bottom:8px}
.field input{width:100%;height:52px;padding:0 20px;font:inherit;color:var(--on-surface);background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--r-s);outline:0}
.field input:focus{border-color:var(--primary)}
.field--bad input{border-color:var(--error)}
.field .err{color:var(--error);font-size:14px;margin-top:8px}

/* ---------- сообщения ---------- */
.note{background:var(--surface-mid);border-radius:var(--r-m);padding:16px 20px;margin:0 0 24px;font-size:15px}
.note--warn{background:var(--error-surface);color:var(--error)}
.note--done{background:var(--accent);color:var(--on-accent)}
.snack{position:fixed;right:32px;bottom:32px;background:var(--inverse-surface);color:var(--inverse-on-surface);
  border-radius:var(--r-s);padding:16px 20px;font-size:15px;box-shadow:var(--e2);display:none;z-index:50;max-width:560px}
.snack[data-open]{display:block}

/* ---------- диалог ---------- */
.scrim{position:fixed;inset:0;background:rgba(20,20,20,.32);display:none;place-items:center;z-index:40}
.scrim[data-open]{display:grid}
.dialog{width:min(560px,92vw);background:var(--surface);border-radius:var(--r-l);padding:28px;box-shadow:var(--e2)}
.dialog h2{margin:0 0 8px;font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.01em}
.dialog .acts{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}

@media(max-width:960px){.nav{display:none}.content{border-radius:0;padding:20px}}
/* ---------- боковая панель карточки ----------
   Приём наших кабинетов: клик по строке или карточке открывает панель справа,
   страница под ней остаётся на месте (BASE-A-5, BASE-A-14 в базе знаний).
   Без скрипта панель недоступна, поэтому у каждой карточки есть и обычная
   ссылка на страницу отправки — она работает всегда. */
.side{position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);background:var(--surface);
  box-shadow:var(--e2);z-index:45;display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .18s ease-out}
.side[data-open]{transform:none}
.side__head{display:flex;align-items:flex-start;gap:16px;padding:24px 24px 16px;border-bottom:1px solid var(--hairline)}
.side__head h2{margin:0;font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.01em}
.side__head .sub{color:var(--on-surface-variant);font-size:14px;margin-top:6px}
.side__x{margin-left:auto;width:40px;height:40px;flex:0 0 40px;border:0;border-radius:var(--r-full);
  background:var(--surface-mid);color:var(--on-surface);font-size:18px;cursor:pointer;position:relative}
.side__body{padding:20px 24px;overflow-y:auto;flex:1}
.side__foot{padding:16px 24px 24px;border-top:1px solid var(--hairline);display:flex;gap:10px}
.veil{position:fixed;inset:0;background:rgba(20,20,20,.28);z-index:44;display:none}
.veil[data-open]{display:block}

/* вкладки-фильтры со счётчиком — так устроены списки в базовом сервисе.
   Перенос строкой вместо горизонтальной прокрутки (правка Димы 24.08.2026:
   прокрутка резала вкладки по краю окна без всякого знака, что дальше
   есть ещё). Перенос — тот же приём, что у чипов «Наборы» на конструкторе:
   .chips{flex-wrap:wrap} — ничего нового не вводим. */
.tabs{display:flex;flex-wrap:wrap;gap:8px 24px;border-bottom:1px solid var(--hairline);margin:0 0 24px}
.tab{display:inline-flex;align-items:baseline;gap:8px;padding:0 2px 14px;color:var(--on-surface-variant);
  text-decoration:none;font-size:16px;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab b{font-weight:500}
.tab .n{font-size:13px}
.tab[aria-current="page"]{color:var(--on-surface);border-bottom-color:var(--primary)}