/* ReReelz. Принципы: воздух, мало текста, крупные эмодзи рядом с подписью, одна основная кнопка на экран,
   логотипы площадок рядом с названием, без пустых блоков. Секции разделяет фон (bg → surface → sunk), а не рамки. */
:root {
  --bg: #eef0f3;
  --surface: #ffffff;
  --sunk: #f3f4f7;
  --sunk-2: #e6e9ee;
  --line: #d3d8e0;
  --fg: #141821;
  --muted: #5d6676;
  --accent: #e8452c;
  --accent-ink: #ffffff;
  --accent-soft: #fde4de;
  --ok: #1f8a4c;
  --ok-soft: #dcf2e4;
  --warn: #a35f00;
  --warn-soft: #fff1d6;
  --bad: #c0262d;
  --bad-soft: #fde2e3;
  --info: #2457c5;
  --info-soft: #e1e9fb;
  --tt: #111111;
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r: 20px;
  --r-sm: 12px;
  --pad: 32px;
  --gap: 28px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10131a; --surface: #181c25; --sunk: #1f2430; --sunk-2: #2a3040; --line: #2d3342;
    --fg: #eef1f6; --muted: #98a1b2; --accent: #ff6a4d; --accent-ink: #1a0b07; --accent-soft: #3a1d17;
    --ok: #4cc382; --ok-soft: #173426; --warn: #f0b04a; --warn-soft: #33270f; --bad: #ff6b6b; --bad-soft: #3a1a1c;
    --info: #7ea6ff; --info-soft: #1b2744; --tt: #000000;
    color-scheme: dark;
  }
}

@media (max-width: 640px) { :root { --pad: 22px; --gap: 22px; --r: 18px; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--fg);
  font: 16px/1.55 var(--body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  min-height: 100vh;
  display: flex; flex-direction: column;
  overflow-x: hidden;
}
a { color: var(--accent); }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1 { font: 700 clamp(28px, 4.5vw, 40px)/1.15 var(--display); margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
/* Фокус на заголовке после перехода (FocusOnNavigate) — для читалок, рамка не нужна */
h1:focus { outline: none; }
h2 { font: 600 20px/1.25 var(--display); margin: 0; text-wrap: balance; }
h3 { font: 600 16px/1.3 var(--display); margin: 0; }
p { margin: 0; }
code { font-family: var(--mono); font-size: .9em; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.note { color: var(--muted); font-size: 14px; margin: 0; }

/* Эмодзи Noto и логотипы площадок */
.emoji { width: var(--s, 40px); height: var(--s, 40px); flex: none; display: block; }
picture.emoji img { width: 100%; height: 100%; display: block; }
.plogo { width: var(--s, 20px); height: var(--s, 20px); border-radius: 26%; display: inline-grid; place-items: center; flex: none; vertical-align: -.2em; color: #fff; }
.plogo svg { width: 62%; height: 62%; fill: currentColor; display: block; }
.plogo.ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.plogo.tt { background: var(--tt); }
.plogo.yt { background: #ff0000; }
.ava { width: var(--s, 36px); height: var(--s, 36px); border-radius: 50%; object-fit: cover; display: block; flex: none; }
.ava-wrap { position: relative; width: var(--s, 36px); height: var(--s, 36px); flex: none; display: inline-block; }
.ava-wrap .ava { width: 100%; height: 100%; }
.ava-wrap .ava-badge { position: absolute; right: -3px; bottom: -3px; box-shadow: 0 0 0 2px var(--surface); }

/* Шапка */
.top { max-width: 1160px; width: 100%; margin: 0 auto; padding-block: 24px; display: flex; align-items: center; gap: 16px 32px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 18px var(--display); letter-spacing: .01em; color: var(--fg); text-decoration: none; }
.brand img { display: block; border-radius: 8px; }
.brand b { font-weight: inherit; }
.brand span { color: var(--accent); }
.nav { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.nav a { text-decoration: none; padding: 8px 14px; border-radius: 10px; color: var(--muted); font-weight: 500; }
.nav a:hover { color: var(--fg); }
.nav a.active { background: var(--surface); color: var(--fg); }
.user { display: flex; gap: 16px; align-items: center; font-size: 14px; }
@media (max-width: 640px) {
  .top { gap: 12px 16px; padding-block: 16px; }
  .top > .brand { flex: 1; }
  .nav { order: 3; flex-basis: 100%; gap: 2px; }
  .nav a { padding: 7px 10px; }
  .user-email { display: none; }
}
.user-email { color: var(--muted); overflow-wrap: anywhere; }
.link-muted { background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }

.page { max-width: 1160px; width: 100%; margin: 0 auto; flex: 1; padding-block: 16px 80px; }
.plain { flex: 1; display: grid; place-items: center; padding-block: 48px; }
.legal { max-width: 1160px; width: 100%; margin: 0 auto; padding-block: 24px 32px; font-size: 12px; color: var(--muted); }

/* Кнопки и поля: основная — заливка акцентом, второстепенные — фон без рамки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 12px; padding: 13px 22px; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(1.05); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-small { padding: 9px 16px; font-size: 14px; }
.btn-big { padding: 17px 30px; font-size: 17px; border-radius: 14px; }
.btn.ghost { background: var(--sunk-2); color: var(--fg); }
.btn.ghost:hover { filter: none; background: var(--line); }
.btn.stale { background: var(--accent-soft); color: var(--accent); }
.input { background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100%; min-width: 0; }
.input.invalid { border-color: var(--bad); }
.input.code { font: 500 20px var(--mono); letter-spacing: .12em; text-align: center; }
.hint { border-radius: var(--r-sm); padding: 14px 16px; font-size: 15px; margin: 0; }
.hint.error { background: var(--bad-soft); color: var(--bad); }
.hint.warn { background: var(--warn-soft); color: var(--warn); }
.hint.ok { background: var(--ok-soft); color: var(--ok); }
.hint a { color: inherit; font-weight: 600; }
.link-btn { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 6px 0; font-weight: 500; }
.link-btn:disabled { color: var(--muted); cursor: default; }
.link-danger { background: none; border: 0; padding: 0; color: var(--bad); cursor: pointer; font-weight: 600; font-size: 14px; }
/* Кнопка-ссылка с эмодзи перед текстом */
.with-emoji { display: inline-flex; align-items: center; gap: 6px; }
.more { display: block; width: 100%; margin-top: 16px; background: var(--sunk-2); color: var(--fg); border: 0; border-radius: var(--r-sm); padding: 14px; font-weight: 600; cursor: pointer; }
.more:hover:not(:disabled) { background: var(--line); }
.more:disabled { opacity: .6; cursor: progress; }
.hint.error .link-btn { color: inherit; text-decoration: underline; padding: 0 0 0 6px; }
textarea, select { font: inherit; color: inherit; }
textarea { background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100%; min-width: 0; resize: vertical; min-height: 72px; line-height: 1.5; font-size: 15px; }

/* Вход */
.login-card { background: var(--surface); border-radius: var(--r); padding: 44px var(--pad); width: 100%; max-width: 520px; display: grid; gap: 18px; justify-items: start; }
.login-card > * { width: 100%; }
.login-card > .emoji, .login-card > picture.emoji, .login-card > .brand, .login-card > .link-muted { width: auto; }
.login-card .brand { margin-bottom: 12px; }
/* Как вход commentvibe-app: поле — строкой, кнопка — под ним во всю ширину */
.login-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.login-row .input { padding: 16px 18px; font-size: 16px; }
.login-row .input.code { font-size: 22px; letter-spacing: .3em; }
.login-row .btn { width: 100%; padding: 15px 20px; font-size: 15px; }
.perk { display: flex; align-items: center; gap: 10px; background: var(--accent-soft); color: var(--accent); border-radius: var(--r-sm); padding: 10px 14px; font-weight: 600; font-size: 15px; }
.ddg-captcha { min-height: 0; }

/* Лендинг: заголовок → боли → продукт → кнопка (Home.razor) */
.hero { padding-block: 48px 72px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 860px) { .hero { grid-template-columns: minmax(0, 1fr); padding-block: 24px 56px; } }
.hero-text { display: grid; gap: 22px; justify-items: start; }
.hero h1 { font-size: clamp(32px, 5.2vw, 56px); }
.lede { margin: 0; max-width: 36ch; font-size: clamp(18px, 2.2vw, 21px); line-height: 1.45; }
.for-whom { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.cta-block { display: grid; gap: 10px; justify-items: start; }
.hero-visual { position: relative; height: 380px; }
@media (max-width: 860px) { .hero-visual { height: 300px; max-width: 420px; width: 100%; justify-self: center; } }
.mock-copy { position: absolute; top: 20px; width: 44%; aspect-ratio: 9 / 16; border-radius: 18px; box-shadow: 0 18px 40px rgba(20,24,33,.22);
  display: grid; align-content: end; overflow: hidden; padding: 12px; color: #fff; font-weight: 600; font-size: 14px; }
.mock-copy span { text-shadow: 0 1px 4px rgba(0,0,0,.75); }
.mock-copy > .scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mock-copy > :not(.scene) { position: relative; }
.mock-copy.framed > .scene { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); border-radius: 12px; }
.mock-copy.c1 { left: 0; transform: rotate(-8deg); }
.mock-copy.c2 { left: 28%; top: 0; z-index: 1; }
.mock-copy.c3 { left: 56%; transform: rotate(8deg); filter: saturate(.8) brightness(1.06) hue-rotate(12deg); }
/* Один и тот же «ролик» во всех копиях; рамка — ролик меньше на размытом фоне */
.mock-copy, .g1 { background: linear-gradient(160deg, #3b2a22, #8a4b2e 45%, #d99a5b); }
.g2 { background: linear-gradient(160deg, #13324a, #1f6f8b 50%, #8fd3c7); }
.g3 { background: linear-gradient(160deg, #2b1846, #7b3fe4 50%, #f28cb1); }
.framed { box-shadow: inset 0 0 0 7px rgba(255,255,255,.28), 0 18px 40px rgba(20,24,33,.22); }
.tone { filter: hue-rotate(-25deg) saturate(1.15); }

/* Полоса на всю ширину окна без горизонтальной прокрутки */
.band { background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); padding-block: 64px; display: grid; gap: 40px; }
.band h2, .flow > h2, .final h2, .faq h2 { font-size: clamp(24px, 3.4vw, 34px); }
.pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) { .pains { grid-template-columns: minmax(0, 1fr); } }
.pain { background: var(--sunk); border-radius: var(--r); padding: 28px; display: grid; gap: 18px; align-content: start; }
.pain p { font: 600 19px/1.35 var(--display); }

.flow { padding-block: 72px; display: grid; gap: 56px; }
.flow-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.flow-step:nth-of-type(even) .flow-text { order: 2; }
@media (max-width: 760px) { .flow-step { grid-template-columns: minmax(0, 1fr); gap: 20px; } .flow-step:nth-of-type(even) .flow-text { order: 0; } }
.flow-text { display: grid; gap: 10px; }
.flow-text b { font: 600 22px/1.3 var(--display); }
.flow-text p { color: var(--muted); font-size: 17px; max-width: 40ch; }
.mock { width: 100%; max-width: 460px; justify-self: center; background: var(--surface); border-radius: var(--r); padding: 22px; display: grid; gap: 10px; box-shadow: 0 10px 30px rgba(20,24,33,.08); }
.mock-head { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 4px; }
.mock-reels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mock-reel { aspect-ratio: 9 / 16; border-radius: 10px; position: relative; }
.mock-reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.mock-reel span { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 8px; color: #fff; font-size: 12px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.mock-reel.picked { outline: 3px solid var(--accent); outline-offset: 2px; }
.mock-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; background: var(--sunk); border-radius: var(--r-sm); padding: 10px; }
.mock-row p { color: var(--muted); font-size: 14px; }
.mock-thumb { aspect-ratio: 9 / 16; border-radius: 8px; display: grid; justify-items: end; align-content: start; padding: 4px; }
.mock-thumb { position: relative; overflow: hidden; }
.mock-thumb > .scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mock-thumb.framed > .scene { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); border-radius: 5px; }
.mock-thumb.tone { filter: none; }
.mock-thumb.tone > .scene { filter: saturate(.8) brightness(1.06) hue-rotate(12deg); }
.mock-slot { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; background: var(--sunk); border-radius: var(--r-sm); padding: 14px 16px; font-size: 15px; }
.mock-day { font-weight: 600; }
.pill.plan { background: var(--info-soft); color: var(--info); }
@media (max-width: 420px) { .mock-slot { grid-template-columns: minmax(0, 1fr) auto; } .mock-slot .pill { grid-column: 1 / -1; justify-self: start; } }

.insight { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; background: var(--accent-soft); border-radius: var(--r); padding: 24px 28px; font-size: 18px; line-height: 1.5; }
@media (max-width: 520px) { .insight { grid-template-columns: minmax(0, 1fr); } }

/* Один ролик — два результата: показывается, только когда задан настоящий случай */
.case { padding-block: 72px 0; display: grid; gap: 28px; justify-items: center; text-align: center; }
.case h2 { font-size: clamp(24px, 3.4vw, 34px); }
.case > p { color: var(--muted); max-width: 46ch; }
.case-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 20px; }
.case-item { background: var(--surface); border-radius: var(--r); padding: 28px 20px; display: grid; gap: 6px; color: var(--muted); }
.case-item b { font: 700 clamp(32px, 5vw, 48px)/1 var(--display); color: var(--fg); }
.case-item.best { background: var(--ok-soft); }
.case-item.best b { color: var(--ok); }

/* Сравнение с ботом, меняющим только параметры файла */
.compare { padding-block: 0 72px; display: grid; gap: 24px; }
.compare h2 { font-size: clamp(24px, 3.4vw, 34px); }
.compare-lede { color: var(--muted); font-size: 17px; max-width: 60ch; }
.compare-table { background: var(--surface); border-radius: var(--r); padding: 8px; display: grid; }
.compare-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 14px 16px; align-items: start; font-size: 15px; }
.compare-row + .compare-row { border-top: 1px solid var(--sunk-2); }
.compare-row > :first-child { font-weight: 600; }
.compare-head { font-weight: 600; color: var(--muted); font-size: 14px; }
.compare-head > :last-child { color: var(--accent); }
.compare-row .no { color: var(--muted); }
.compare-row .yes { font-weight: 500; }
@media (max-width: 600px) {
  .compare-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 14px; }
  .compare-row > :first-child { grid-column: 1 / -1; }
  .compare-head > :first-child { display: none; }
}
.compare-more a { font-weight: 600; color: var(--accent); }

.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) { .fit { grid-template-columns: minmax(0, 1fr); } }
.fit ul { list-style: none; margin: 0; padding: 28px; border-radius: var(--r); display: grid; gap: 14px; align-content: start; font-size: 17px; }
.fit li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
.fit-yes { background: var(--ok-soft); }
.fit-yes li::before { content: "✓"; color: var(--ok); font-weight: 700; }
.fit-no { background: var(--sunk); }
.fit-no li::before { content: "✕"; color: var(--bad); font-weight: 700; }

.faq { padding-block: 72px 0; display: grid; gap: 28px; }
.faq-list { display: grid; gap: 12px; max-width: 860px; }
.faq-item { background: var(--surface); border-radius: var(--r-sm); font-size: 17px; }
.faq-item summary { list-style: none; position: relative; padding: 18px 56px 18px 22px; color: var(--fg); font-weight: 600; border-radius: var(--r-sm); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; translate: 0 -50%; color: var(--accent); font-size: 26px; font-weight: 400; line-height: 1; transition: rotate .2s; }
.faq-item[open] summary::after { rotate: 45deg; }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq-item p { margin: 0; padding: 0 22px 20px; color: var(--muted); line-height: 1.55; max-width: 70ch; }

.final { padding-block: 80px 40px; display: grid; gap: 20px; justify-items: center; text-align: center; }
.final p { color: var(--muted); max-width: 46ch; }
.final .cta-block { justify-items: center; }
.final > p { order: 1; }

/* Заглушки разделов */
.stub { background: var(--surface); border-radius: var(--r); padding: 48px var(--pad); display: grid; gap: 16px; max-width: 640px; justify-items: start; }

/* Тарифы */
.section { display: grid; gap: 36px; }
.callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; background: var(--sunk); border-radius: var(--r-sm); padding: 20px; }
.section > .callout { background: var(--surface); max-width: 760px; font-size: 17px; align-items: center; }
.callout details { margin-top: 8px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.plan { background: var(--surface); border-radius: var(--r); padding: var(--pad); display: grid; gap: 14px; align-content: start; }
.plan-name { font: 600 20px var(--display); margin-top: 6px; }
.plan-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan-price b { font: 700 36px/1 var(--display); }
.plan-price span { color: var(--muted); font-size: 14px; }
.plan-volume { font-size: 19px; font-weight: 600; }
.plan-facts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: 15px; color: var(--muted); }
.plan-facts li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
.plan-facts li::before { content: "✓"; color: var(--ok); font-weight: 700; }
/* Выделенный тариф (Средний): тёмная карточка выше соседних, метка на верхнем крае и кнопка в цветах логотипа */
.plan { position: relative; }
.plan.featured { background: #14161c; color: #f3f4f7; margin-block: -14px; padding-block: calc(var(--pad) + 14px); box-shadow: 0 18px 40px rgb(20 24 33 / .22); }
.plan.featured .plan-price span, .plan.featured .plan-facts, .plan.featured .muted { color: rgb(243 244 247 / .68); }
.plan.featured .plan-facts li::before { color: #4cc382; }
.plan.featured .btn { background: linear-gradient(90deg, #c41f5a, #e8452c 55%, #ff8a1e); color: #fff; box-shadow: 0 8px 24px rgb(232 69 44 / .45); }
.plan-badge { position: absolute; top: -12px; left: var(--pad); background: linear-gradient(90deg, #c41f5a, #e8452c); color: #fff; border-radius: 99px; padding: 4px 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
@media (prefers-color-scheme: dark) { .plan.featured { background: #050608; box-shadow: 0 0 0 1px #e8452c66, 0 18px 40px rgb(0 0 0 / .4); } }
@media (max-width: 760px) { .plan.featured { margin-block: 8px 0; } }

/* Ошибка Blazor */
#blazor-error-ui { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: var(--warn-soft); color: var(--warn); padding: 12px max(16px, env(safe-area-inset-left, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)); }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* Кабинет: общая сетка и карточки */
.banner { border-radius: var(--r-sm); padding: 14px 18px; font-size: 15px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.banner.accent { background: var(--accent-soft); color: var(--accent); }
.banner.warn { background: var(--warn-soft); color: var(--warn); }
.banner.bad { background: var(--bad-soft); color: var(--bad); }
.banner a { color: inherit; font-weight: 600; }
.cabinet-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
@media (max-width: 920px) { .cabinet-grid { grid-template-columns: minmax(0, 1fr); gap: var(--gap); } }
.stack { display: grid; gap: var(--gap); min-width: 0; }
.stack > h1 { margin-bottom: 4px; }
.card { background: var(--surface); border-radius: var(--r); padding: var(--pad); display: grid; gap: 22px; min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.card-title { display: flex; align-items: center; gap: 16px; }
.card.side { gap: 14px; justify-items: start; }
.card.side h2 { font-size: 18px; }
.card.side p { color: var(--muted); font-size: 15px; }
.dots { display: flex; gap: 6px; }
.dots i { width: 26px; height: 6px; border-radius: 99px; background: var(--sunk-2); }
.dots i.on { background: var(--accent); }
details { font-size: 15px; }
summary { cursor: pointer; color: var(--accent); font-weight: 500; }
details ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }

/* «Аккаунты» */
.platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .platforms { grid-template-columns: minmax(0, 1fr); } }
.pf { background: var(--sunk); border-radius: var(--r-sm); padding: 22px; display: grid; gap: 12px; align-content: start; justify-items: start; }
.pf .btn { width: 100%; margin-top: 6px; }
.pf.soon .plogo { opacity: .55; }
.acc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.acc-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px; border-radius: var(--r-sm); background: var(--sunk); }
@media (max-width: 560px) { .acc-row { grid-template-columns: 48px minmax(0, 1fr); } .acc-actions { grid-column: 2; justify-content: flex-start; } }
.acc-main { min-width: 0; display: grid; gap: 2px; }
.acc-name { font-weight: 600; overflow-wrap: anywhere; }
.acc-actions { display: flex; gap: 14px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 2px 10px; font-size: 13px; font-weight: 600; vertical-align: 1px; white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.acc-name .pill { margin-left: 8px; }

/* «Новая публикация» */
.file { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 20px; align-items: center; }
.thumb, .cover-prev { aspect-ratio: 9 / 16; width: 80px; max-width: 100%; border-radius: 10px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #3b2a22, #8a4b2e 45%, #d99a5b); }
.thumb canvas, .cover-prev canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-prev.own { background: var(--sunk-2); }
.thumb span, .cover-prev span { position: absolute; right: 5px; bottom: 5px; font: 500 11px var(--mono); color: #fff; background: rgba(0,0,0,.55); padding: 1px 5px; border-radius: 5px; }
.file-name { font-weight: 600; font-size: 17px; overflow-wrap: anywhere; }
.title-field { margin-top: 16px; }
.file-body { min-width: 0; display: grid; gap: 12px; }
.specs { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; color: var(--muted); font-size: 14px; }
.specs .ok { color: var(--ok); font-weight: 500; }
.specs a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 500; }
.bar { height: 8px; background: var(--sunk-2); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s linear; }
.bar.done i { background: var(--ok); }
.up-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); margin-top: 8px; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.drop { background: var(--sunk); border: 2px dashed transparent; border-radius: var(--r-sm); padding: 22px; text-align: center; color: var(--muted); font-size: 14px; cursor: pointer; display: grid; gap: 6px; justify-items: center; align-content: center; position: relative; }
.drop b { color: var(--fg); font-size: 16px; margin-top: 6px; }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.source-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .source-choice { grid-template-columns: 1fr; } }
.source-choice .drop { font: inherit; font-size: 14px; color: var(--muted); width: 100%; }
.source-choice .drop:hover:not(:disabled), .source-choice .drop[aria-expanded="true"] { background: var(--sunk-2); }
.player.picker-modal { max-width: 800px; align-content: start; }
.feed-title { display: flex; align-items: center; gap: 12px; }
.reels-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.reels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.reel { position: relative; width: 100%; aspect-ratio: 9 / 16; border: 0; border-radius: 10px; overflow: hidden; padding: 0; cursor: pointer;
    background: var(--sunk-2); display: block; color: #fff; }
.reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel:hover:not(:disabled) { outline: 3px solid var(--accent); outline-offset: -3px; }
.reel:disabled { cursor: progress; }
.reel:disabled:not(.busy) img { opacity: .55; }
.reel-top, .reel-views { position: absolute; left: 8px; right: 8px; font-size: 12px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.85); text-align: left; }
.reel-top { top: 8px; }
.reel-views { bottom: 8px; }
.reel-busy { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; justify-items: center; font-size: 12px; background: rgba(8,10,14,.55); }

.accounts { display: flex; flex-wrap: wrap; gap: 12px; }
.acc { display: flex; align-items: center; gap: 12px; border: 2px solid transparent; border-radius: var(--r-sm); padding: 10px 18px 10px 10px; background: var(--sunk); cursor: pointer; text-align: left; color: var(--fg); font-weight: 600; }
.acc[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.acc[disabled] { cursor: not-allowed; opacity: .55; }

.seg { display: inline-grid; grid-auto-flow: column; background: var(--sunk-2); border-radius: 12px; padding: 4px; gap: 4px; justify-self: start; }
.seg button { border: 0; background: transparent; border-radius: 9px; padding: 10px 22px; cursor: pointer; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg); }
.seg button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.12); color: var(--accent); }
.seg button:disabled { color: var(--muted); opacity: .5; cursor: not-allowed; }
.seg.wrapable { display: flex; flex-wrap: wrap; }

.toggles { display: grid; gap: 10px; }
.toggle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: var(--r-sm); background: var(--sunk); }
.toggle b { font-weight: 600; display: block; }
.toggle span { color: var(--muted); font-size: 14px; }
.toggle .pill { font-size: 13px; }
.sub-title { font-size: 16px; font-weight: 600; margin: 22px 0 10px; }
.switch { position: relative; width: 48px; height: 28px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; background: var(--line); border-radius: 99px; transition: background .15s; pointer-events: none; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled + i { opacity: .45; }

.advanced { background: var(--sunk); border-radius: var(--r-sm); padding: 14px 18px; }
.advanced summary { font-weight: 600; font-size: 15px; }
.advanced[open] summary { margin-bottom: 14px; }
.adv-grid { display: grid; gap: 6px; }
.adv-row { display: grid; grid-template-columns: 52px repeat(4, 64px); gap: 8px; align-items: center; }
.adv-row > input[type="checkbox"] { justify-self: center; width: 18px; height: 18px; accent-color: var(--accent); }
.adv-row .no { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.adv-row .input { padding: 8px 12px; font-size: 14px; }
.adv-head { font-size: 13px; color: var(--muted); }
.adv-head span:not(:first-child):not(:last-child) { text-align: center; }
@media (max-width: 560px) {
  .adv-row { grid-template-columns: 40px repeat(4, minmax(0, 1fr)); }
  .adv-row .input { grid-column: 2 / -1; }
  .adv-head span:last-child { display: none; }
}
.cover-body { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: start; }
.cover-prev { width: 72px; }
.cover-prev::after { content: ""; position: absolute; inset: 12.5% 0; border-block: 1px dashed rgba(255,255,255,.7); }
.cover-prev span { right: auto; left: 5px; }
.cover-ctl { display: grid; gap: 12px; min-width: 0; }
.cover-body[hidden] { display: none; }
.cover-prev.own img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cover-pick { position: relative; overflow: hidden; cursor: pointer; }
.cover-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cover-ctl input[type="range"] { width: 100%; accent-color: var(--accent); }
.vary { display: flex; gap: 10px; align-items: center; font-size: 15px; cursor: pointer; }
.vary input { accent-color: var(--accent); width: 18px; height: 18px; }

.f { display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
.f .seg { color: var(--fg); font-size: 15px; }
.f .req { color: var(--accent); font-weight: 700; }
.f .f-hint { font-size: 13px; }
.field-date { max-width: 300px; }
.gen-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.timeline li { background: var(--sunk); border-radius: var(--r-sm); padding: 14px 16px; display: grid; gap: 10px; }
.tl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tl-when { font-variant-numeric: tabular-nums; }
.tl-when span { color: var(--muted); font-size: 14px; margin-left: 6px; }
.tl-tools { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.tl-cap { min-height: 52px; }
.cap-meter { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); margin-top: -2px; }
.cap-count { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cap-count.near { color: var(--warn); }
.cap-meter.bad { color: var(--bad); font-weight: 500; }
textarea.invalid, textarea.invalid:focus { border-color: var(--bad); outline-color: var(--bad); }
.src { font-size: 12px; font-weight: 600; border-radius: 99px; padding: 1px 9px; background: var(--sunk-2); color: var(--muted); }
.src.ai { background: var(--accent-soft); color: var(--accent); }
.again { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: 14px; font-weight: 500; }
.again[disabled] { color: var(--muted); cursor: default; }

.aside { position: sticky; top: calc(16px + env(safe-area-inset-top, 0px)); display: grid; gap: var(--gap); }
@media (max-width: 920px) { .aside { position: static; } }
.summary { background: var(--surface); border-radius: var(--r); padding: var(--pad) 26px; display: grid; gap: 18px; }
.summary .btn { width: 100%; }
.summary-main { font: 600 18px/1.35 var(--display); overflow-wrap: anywhere; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; margin: 0; font-size: 15px; }
.kv dt { color: var(--muted); white-space: nowrap; }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kv dd a { text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.cta { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 14px; padding: 17px 18px; font-weight: 700; font-size: 17px; cursor: pointer; width: 100%; }
.cta:hover { filter: brightness(1.05); }
.cta[disabled] { opacity: .5; cursor: not-allowed; filter: none; }
.cost { font-size: 14px; color: var(--muted); text-align: center; margin: 0; }
.cost.over { color: var(--warn); }
.side-note { font-size: 14px; color: var(--muted); margin: 0; text-align: center; }
.review-toggle { grid-template-columns: auto minmax(0, 1fr) auto; }

/* Страница задачи */
.job-head { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; align-items: center; }
.job-head .thumb { width: 96px; }
.job-title { min-width: 0; display: grid; gap: 12px; }
.job-head h1 { font-size: clamp(22px, 3vw, 30px); overflow-wrap: anywhere; }
/* «Название» задачи: карандаш рядом с заголовком, правка — полем на его месте */
.title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rename-btn { flex: none; background: none; border: 0; padding: 6px; border-radius: 8px; cursor: pointer; opacity: .55; line-height: 0; }
.rename-btn:hover, .rename-btn:focus-visible { opacity: 1; background: var(--sunk-2); }
.rename { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rename .input { flex: 1 1 240px; font-size: 18px; font-weight: 600; }
.job-meta { color: var(--muted); font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 8px; border-radius: 99px; padding: 4px 12px; font-size: 14px; font-weight: 600; }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.badge.run { background: var(--accent-soft); color: var(--accent); }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.wait { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }

.stages { list-style: none; margin: 0; padding: 0; display: grid; }
.stage { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding-bottom: 28px; position: relative; }
.stage:last-child { padding-bottom: 0; }
.stage:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 52px; bottom: 6px; width: 2px; background: var(--sunk-2); border-radius: 2px; }
.stage.done:not(:last-child)::before { background: var(--ok); }
.stage-main { min-width: 0; }
.dot { width: 48px; height: 48px; border-radius: 50%; background: var(--sunk); display: grid; place-items: center; }
.stage.active .dot { background: var(--accent-soft); }
.stage.done .dot { background: var(--ok-soft); }
.stage.failed .dot { background: var(--bad-soft); }
.stage.pending .dot .emoji { opacity: .4; filter: grayscale(1); }
.stage-title { font-weight: 600; font-size: 17px; padding-top: 11px; }
.stage.pending .stage-title { color: var(--muted); }
.stage-body { display: grid; gap: 12px; margin-top: 8px; min-width: 0; }
.stage.pending .stage-body { display: none; }
.upload-banner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; background: var(--warn-soft); color: var(--warn); border-radius: var(--r-sm); padding: 14px 16px; font-size: 15px; }
.stage-body .drop { padding: 18px; }

.copies { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.copy { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; font-size: 15px; padding: 10px 14px 10px 10px; border-radius: var(--r-sm); background: var(--sunk); }
.copy-main { min-width: 0; display: grid; gap: 4px; }
.copy .when { font-variant-numeric: tabular-nums; }
.copy .when b { font-weight: 600; }
.copy .bar { margin-top: 4px; height: 5px; }
.copy .st { font-size: 14px; color: var(--muted); text-align: right; }
.copy .st.ok { color: var(--ok); }
.copy .st.run { color: var(--accent); }
.copy .st.bad { color: var(--bad); }
.copy .st.wait { color: var(--warn); }
.copy .copy-uniq { font-size: 13px; color: var(--muted); }
.copy .copy-act { display: flex; gap: 10px; justify-content: flex-end; align-items: baseline; margin-top: 2px; }
.copy .copy-act button { font-size: 14px; }
@media (max-width: 520px) { .copy { grid-template-columns: 44px minmax(0, 1fr); } .copy .st { grid-column: 2; text-align: left; } .copy .copy-act { justify-content: flex-start; } }
/* Кадр копии: по нажатию — плеер (CopyThumb, CopyPlayer) */
.copy-thumb { aspect-ratio: 9 / 16; width: 44px; padding: 0; border: 0; border-radius: 8px; background: var(--sunk-2); position: relative; overflow: hidden; cursor: pointer; display: block; }
.copy-thumb:disabled { cursor: default; }
.copy-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.copy-thumb.empty { display: grid; place-items: center; cursor: default; color: var(--muted); font-weight: 600; font-size: 14px; }
.copy-thumb:not(:disabled):not(.empty):hover, .copy-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.player-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(8,10,14,.72); display: grid; place-items: center; padding: 16px; outline: none; }
.player { background: var(--surface); color: var(--fg); border-radius: var(--r); padding: 20px; width: 100%; max-width: 420px; display: grid; gap: 16px; max-height: 100%; overflow: auto; }
.player-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.player-head b { font: 600 18px var(--display); }
.player-sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
.player-close { border: 0; background: var(--sunk-2); color: var(--muted); width: 36px; height: 36px; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; flex: none; }
.player-close:hover { color: var(--fg); }
.player video { width: 100%; aspect-ratio: 9 / 16; max-height: calc(100vh - 200px); background: #000; border-radius: var(--r-sm); display: block; }
.player .confirm-row { justify-content: flex-end; }

/* Статистика вышедших копий (PublicationMetrics, StatsSummary) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mets { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mets li { display: inline-flex; align-items: center; gap: 4px; }
.mets b { color: var(--fg); font-weight: 600; }
.mets.top li:first-child b { color: var(--ok); }
.mets-note { font-size: 13px; color: var(--muted); margin-top: 4px; }
.kpis { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; background: var(--sunk-2); border-radius: var(--r-sm); padding: 10px 14px; font-size: 14px; color: var(--muted); }
.kpis > span { display: inline-flex; align-items: center; gap: 6px; }
.kpis b { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.kpis .upd { margin-left: auto; font-size: 12px; }
.kpis .best { flex-basis: 100%; color: var(--fg); }
.kpis .best b { color: var(--ok); }
.chip-btn { border: 1px solid var(--line); background: var(--surface); color: var(--fg); border-radius: 99px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.chip-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* Окно правки запланированной публикации (PublicationEditDialog) */
.player.edit-modal { max-width: 560px; align-content: start; }
.edit-field { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.edit-field .note, .edit-field .cap-meter { font-weight: 400; }
.edit-field input.invalid { border-color: var(--bad); }
.edit-cover { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; }
.edit-thumb { width: 72px; aspect-ratio: 9 / 16; max-width: 100%; border-radius: var(--r-sm); background: var(--sunk-2); overflow: hidden; position: relative; }
.edit-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edit-thumb.busy::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: edit-shine 1.2s linear infinite; }
@keyframes edit-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .edit-thumb.busy::after { animation: none; } }
.edit-cover-ctl { display: grid; gap: 6px; justify-items: start; font-weight: 400; min-width: 0; }
.edit-foot { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; }
.edit-why { font-size: 13px; color: var(--muted); margin-right: auto; min-width: 0; }
.edit-why[role="alert"] { color: var(--bad); }
.confirm-row { display: flex; gap: 14px; align-items: baseline; font-size: 14px; flex-wrap: wrap; }
.player.wide { max-width: 420px; }
@media (min-width: 760px) {
    .player.wide { max-width: 800px; grid-template-columns: 360px minmax(0, 1fr); align-items: start; gap: 24px; }
    .player.wide .player-head { grid-column: 1 / -1; }
}
.review-panel { display: grid; gap: 16px; align-content: start; }
.review-panel textarea { width: 100%; min-height: 150px; resize: vertical; }
.review-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.review-panel .review-actions .btn { flex: 1 1 auto; }
.review-card { background: var(--warn-soft); }
.review-card p { font-size: 15px; }
/* Запрос в работе (отмена задачи или копии): крутилка вместо кнопок «Да / Нет» */
.busy { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.spinner { width: 14px; height: 14px; flex: none; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
@media (prefers-reduced-motion: reduce) { .bar i, .switch i, .switch i::after { transition: none; } }

/* «Публикации»: сводка, вкладки, ролики с копиями, расписание */
.pubs { display: grid; gap: 28px; }
.pubs .title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pubs .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.pubs .stat { background: var(--surface); border: 2px solid transparent; border-radius: var(--r); padding: 22px; display: grid; gap: 4px; justify-items: start; text-align: left; cursor: pointer; color: var(--fg); }
.pubs .stat .emoji { margin-bottom: 8px; }
.pubs .stat[aria-pressed="true"] { border-color: var(--fg); }
.pubs .stat .n { font: 700 34px/1.05 var(--display); font-variant-numeric: tabular-nums; }
.pubs .stat .l { font-size: 15px; }
.pubs .stat .s { font-size: 13px; color: var(--muted); }
.pubs .stat.wait { background: var(--warn-soft); }
.pubs .stat.bad { background: var(--bad-soft); }
.pubs .stat.bad .n, .pubs .stat.bad .l { color: var(--bad); }

.pubs .pbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pubs .tabs { display: inline-flex; background: var(--sunk-2); border-radius: 12px; padding: 4px; gap: 4px; }
.pubs .tabs button { border: 0; background: transparent; border-radius: 9px; padding: 9px 18px; cursor: pointer; font-weight: 600; }
.pubs .tabs button[aria-selected="true"] { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.pubs .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pubs .chip { border: 0; background: var(--surface); border-radius: 99px; padding: 7px 14px; cursor: pointer; font-size: 14px; font-weight: 500; }
.pubs .chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.pubs .acc-filter { display: flex; gap: 8px; align-items: center; }
.pubs select { font: inherit; color: inherit; background: var(--surface); border: 0; border-radius: 99px; padding: 7px 12px; font-size: 14px; }
.pubs .vmeta { font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.where { display: inline-flex; align-items: center; gap: 6px; }

.pubs .videos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pubs .video { background: var(--surface); border-radius: var(--r); overflow: hidden; }
.pubs .vhead { width: 100%; background: none; border: 0; text-align: left; cursor: pointer; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 22px; }
.pubs .vhead:hover { background: var(--sunk); }
@media (max-width: 600px) { .pubs .vhead { grid-template-columns: 44px minmax(0, 1fr); } .pubs .vhead > .pill { grid-column: 2; justify-self: start; } }
.pubs .vthumb { aspect-ratio: 9 / 16; width: 48px; border-radius: 8px; background: var(--sunk-2); position: relative; overflow: hidden; display: grid; place-items: end center; padding-bottom: 4px; font: 500 10px var(--mono); color: var(--muted); }
.pubs .vthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pubs .vthumb:has(img) span { position: relative; color: #fff; background: rgba(0,0,0,.55); padding: 0 4px; border-radius: 4px; }
.pubs .vtitle { min-width: 0; display: grid; gap: 4px; }
.pubs .vname { font-weight: 600; font-size: 17px; overflow-wrap: anywhere; }

.pubs .vbody { background: var(--sunk); padding: 16px 22px 20px; display: grid; gap: 12px; }
.pubs .pcopies { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pubs .pcopy { display: grid; grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: var(--r-sm); background: var(--surface); font-size: 15px; }
@media (max-width: 700px) { .pubs .pcopy { grid-template-columns: 44px minmax(0, 1fr); } .pubs .pcopy > :nth-child(n+3) { grid-column: 2; } }
.pubs .pmain { min-width: 0; display: grid; gap: 2px; justify-items: start; }
.pubs .pcopy .when { font-variant-numeric: tabular-nums; }
.pubs .pcopy .pacc { font-size: 14px; color: var(--muted); }
.pubs .pcopy .err { font-size: 13px; color: var(--bad); margin-top: 4px; }
.pubs .pcopy .act { display: flex; gap: 14px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.pubs .pcopy .act button { font-size: 14px; }
@media (max-width: 700px) { .pubs .pcopy .act { justify-content: flex-start; } }
.pubs .pretry { grid-column: 2 / -1; display: grid; gap: 10px; padding: 6px 0 4px; }
.pubs .pretry-row { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; }
.pubs .pretry-row label { display: grid; gap: 6px; }
.pubs .pretry-row .input { padding: 8px 12px; font-size: 14px; width: auto; }
.pubs .pretry .err { font-size: 13px; color: var(--bad); }
.pubs .pill.published, .dash .pill.published { background: var(--ok-soft); color: var(--ok); }
.pubs .pill.scheduled, .dash .pill.scheduled { background: var(--info-soft); color: var(--info); }
.pubs .pill.processing, .dash .pill.processing { background: var(--accent-soft); color: var(--accent); }
.pubs .pill.review, .dash .pill.review { background: var(--warn-soft); color: var(--warn); }
.pubs .pill.failed, .dash .pill.failed { background: var(--bad-soft); color: var(--bad); }
.pubs .pill.cancelled, .dash .pill.cancelled { background: var(--sunk-2); color: var(--muted); }
.pubs .lnk { color: var(--accent); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.pubs .vfoot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }

.pubs .days { display: grid; gap: 16px; }
.pubs .day { background: var(--surface); border-radius: var(--r); padding: 22px; display: grid; gap: 8px; }
.pubs .day h3 { font-size: 17px; margin: 0 0 6px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.pubs .day h3 small { font: 400 14px var(--body); color: var(--muted); }
.pubs .slot { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: var(--r-sm); background: var(--sunk); font-size: 15px; }
.pubs .slot .tm { font: 600 15px var(--body); font-variant-numeric: tabular-nums; }
.pubs .slot .what { min-width: 0; color: inherit; text-decoration: none; overflow-wrap: anywhere; display: grid; gap: 2px; }
.pubs .slot .what small { color: var(--muted); font-size: 13px; }
@media (max-width: 520px) { .pubs .slot { grid-template-columns: 52px minmax(0, 1fr); } .pubs .slot .pill { grid-column: 2; justify-self: start; } }
.pubs .clash { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; background: var(--warn-soft); color: var(--warn); border-radius: var(--r-sm); padding: 12px 14px; font-size: 14px; margin-top: 4px; }
.pubs .empty { background: var(--surface); border-radius: var(--r); padding: 56px 28px; text-align: center; color: var(--muted); display: grid; gap: 14px; justify-items: center; }
.pubs .empty b { color: var(--fg); font: 600 19px/1.3 var(--display); }

/* Пример уникализации в форме: кадр ролика, наклон и зум — как у стандартных правок */
.sub-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 22px 0 10px; }
.sub-head .sub-title { margin: 0; }
.uniq-example { display: grid; grid-template-columns: repeat(3, minmax(0, 120px)); gap: 16px; margin: 4px 0 10px; }
.uniq-example figure { margin: 0; display: grid; gap: 8px; }
.uniq-example figcaption { font-size: 14px; color: var(--muted); }
.ex-frame { aspect-ratio: 9 / 16; border-radius: 12px; position: relative; overflow: hidden; background: linear-gradient(160deg, #3b2a22, #8a4b2e 45%, #d99a5b); }
.ex-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform: rotate(1.5deg) scale(1.06); }
.ex-frame .ex-bg { filter: blur(6px) brightness(.85); transform: scale(1.15); }
.ex-frame .ex-fg { inset: 6%; width: 88%; height: 88%; border-radius: 4px; transform: rotate(1.5deg); }
.ex-frame .ex-sticker { position: absolute; right: 9%; top: 7%; width: 15%; height: auto; transform: rotate(-12deg); }
.ex-frame .ex-sticker img { width: 100%; height: auto; }
.ex-note { margin-bottom: 14px; }

/* Оплата: оформление, возврат, эмулятор */
.pay { max-width: 560px; }
.pay-card { display: grid; gap: 18px; }
.pay-card p { margin: 0; }
.pay-volume { font-weight: 600; font-size: 17px; }
.pay-sum { padding: 14px 16px; background: var(--sunk); border-radius: var(--r-sm); }
.pay-wait { display: flex; gap: 12px; align-items: center; color: var(--muted); }
.pay-card .row { display: flex; flex-wrap: wrap; gap: 10px; }
.pay-card > .link-muted { justify-self: start; }

/* Блог */
.posts { display: grid; gap: 16px; max-width: 760px; }
.post-card { background: var(--surface); border-radius: var(--r); padding: 24px 28px; display: grid; gap: 8px; text-decoration: none; color: inherit; }
.post-card:hover { box-shadow: 0 10px 30px rgba(20,24,33,.08); }
.post-card b { font: 600 20px/1.35 var(--display); }
.post-card p { color: var(--muted); }
.post-meta { color: var(--muted); font-size: 14px; margin: 0; }
.post { max-width: 720px; display: grid; gap: 18px; font-size: 18px; line-height: 1.65; }
.post h1 { font-size: clamp(28px, 4.4vw, 42px); line-height: 1.2; }
.post h2 { font-size: clamp(21px, 2.8vw, 26px); margin-top: 22px; line-height: 1.3; }
.post p, .post ul, .post ol { margin: 0; }
.post ul, .post ol { padding-left: 22px; display: grid; gap: 8px; }
.post-lead { font-size: 20px; }
.post-cta { margin-top: 32px; background: var(--accent-soft); border-radius: var(--r); padding: 28px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 22px; align-items: center; }
.post-cta b { font: 600 20px/1.3 var(--display); }
.post-cta p { font-size: 16px; line-height: 1.5; color: var(--muted); margin-top: 6px; }
.post-cta .btn { grid-column: 2; justify-self: start; }
@media (max-width: 520px) { .post-cta { grid-template-columns: minmax(0, 1fr); } .post-cta .btn { grid-column: 1; } }
.legal a { color: inherit; }
.legal-doc { font-size: 16px; line-height: 1.6; gap: 14px; }
.legal-doc h2 { font-size: clamp(19px, 2.4vw, 22px); }
.legal-doc .post-lead { font-size: 18px; }
.legal-doc .kv { max-width: 480px; }
.legal-doc .kv dd { text-align: left; }
.legal-next { margin-top: 12px; }
.cookie-notice { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; width: calc(100% - 32px); max-width: 760px; display: flex; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; box-shadow: 0 10px 30px rgba(20,24,33,.12); }
.cookie-notice p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.cookie-notice a { color: inherit; }
.cookie-notice .btn { flex-shrink: 0; }
@media (max-width: 640px) { .cookie-notice { flex-direction: column; align-items: stretch; gap: 12px; bottom: 12px; } }

/* Страница «Тариф» (/billing) */
.meters { display: grid; gap: 20px; }
.meter { display: grid; gap: 8px; }
.meter-head { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.meter-head b { font-variant-numeric: tabular-nums; }
.meter.low .bar i { background: var(--warn); }
.meter.out .bar i { background: var(--bad); }
.card > .row { display: flex; flex-wrap: wrap; gap: 10px; }
.bill-list { list-style: none; margin: 0; padding: 0; display: grid; }
.bill-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--sunk-2); }
.bill-list li:first-child { border-top: 0; padding-top: 0; }
.bill-list a.pill { text-decoration: none; }
.pill.off { background: var(--sunk-2); color: var(--muted); }

/* Кабинет: меню слева (CabinetLayout), на телефоне — полосой сверху */
.cab { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; }
.cab-side { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; gap: 28px; padding-block: 24px; }
.cab-nav { display: grid; gap: 4px; }
.cab-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--muted); font-weight: 500; }
.cab-nav a:hover { color: var(--fg); }
.cab-nav a.active { background: var(--surface); color: var(--fg); }
.cab-foot { margin-top: auto; display: grid; gap: 12px; justify-items: start; padding: 16px 12px 0; border-top: 1px solid var(--sunk-2); }
.cab-user { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; }
.cab-ava { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; flex: none; }
.cab-main { display: flex; flex-direction: column; min-width: 0; }
.cab-main .page, .cab-main .legal { max-width: none; }
.cab-main .page { padding-top: 32px; }
@media (max-width: 900px) {
  .cab { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cab-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-block: 16px 8px; }
  .cab-side > .brand { flex: 1; }
  .cab-nav { order: 3; flex-basis: 100%; display: flex; overflow-x: auto; gap: 2px; scrollbar-width: none; }
  .cab-nav a { white-space: nowrap; padding: 8px 10px; gap: 8px; }
  .cab-foot { margin: 0; padding: 0; border: 0; display: flex; align-items: center; }
  .cab-foot > .link-muted:not(:last-child), .cab-user .user-email { display: none; }
  .cab-main .page { padding-top: 16px; }
}

/* Обзор (/dashboard) */
.dash-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }
.dash-head h1 { font-size: clamp(24px, 3.5vw, 32px); }
.dash-head a.pill { text-decoration: none; }
.dash-stats, .dash-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 900px) { .dash-stats, .dash-actions { grid-template-columns: minmax(0, 1fr); } }
.dash-stat { gap: 10px; align-content: start; }
.dash-stat .btn { justify-self: start; margin-top: 6px; }
.dash-stat .meter-head { display: none; }
.dash-n { font: 700 34px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.dash-action { gap: 10px; align-content: start; text-decoration: none; color: inherit; }
.dash-action:hover { outline: 2px solid var(--sunk-2); }
.dash-go { color: var(--accent); font-weight: 600; font-size: 15px; text-decoration: none; }
.dash-video { display: grid; gap: 2px; min-width: 0; text-decoration: none; color: inherit; overflow-wrap: anywhere; }