/* Админка «Искры». Токены — дизайн-система «Искра» (iskra-time.ru): светлая и тёмная темы. Сначала телефон. */

:root {
  --bg: #fff7f4;
  --surface: #ffffff;
  --ink: #2b1b20;
  --ink-body: #3d2b31;
  --ink-soft: #6b565c;
  --ink-faint: #7d6c71;
  --line: rgba(43, 27, 32, .08);
  --line-strong: rgba(43, 27, 32, .12);
  --crimson: #d12a43;
  --crimson-deep: #a81d35;
  --crimson-darker: #7e1427;
  --on-crimson: #ffffff;
  --rose: #fde1e4;
  --rose-soft: #fde6e8;
  --rose-muted: #f3d3d7;
  --peach: #ffe8d2;
  --peach-soft: #fff0e0;
  --peach-ink: #8a4210;
  --peach-strong: #b4560f;
  --gold: #f6c343;
  --glass-fill: rgba(255, 247, 244, .72);
  --glass-stroke: rgba(255, 255, 255, .7);
  --shadow-card: 0 30px 70px -45px rgba(120, 30, 50, .45);
  --shadow-float: 0 12px 26px -12px rgba(168, 29, 53, .6);
  --font-display: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius-card: 24px;
  --radius-tile: 20px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1013;
    --surface: #261a1e;
    --ink: #fbeff1;
    --ink-body: #eadadd;
    --ink-soft: #c4aeb3;
    --ink-faint: #a8939a;
    --line: rgba(251, 239, 241, .10);
    --line-strong: rgba(251, 239, 241, .18);
    --crimson-deep: #ff8fa0;
    --crimson-darker: #ffb3be;
    --rose: #3a1f27;
    --rose-soft: #331c23;
    --rose-muted: #4a2932;
    --peach: #3a2716;
    --peach-soft: #2f2015;
    --peach-ink: #ffc48f;
    --peach-strong: #ffa75c;
    --glass-fill: rgba(38, 26, 30, .72);
    --glass-stroke: rgba(255, 255, 255, .14);
    --shadow-card: 0 30px 70px -45px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  overflow-x: hidden;
}

a { color: var(--crimson-deep); }
a:hover { color: var(--crimson-darker); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: 20px; line-height: 1.25; }
h3 { font-size: 17px; }

p { margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--crimson); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Каркас ─────────────────────────────────────────────── */

.blob { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }
.blob--rose { width: 360px; height: 360px; background: var(--rose); top: -150px; right: -160px; opacity: .9; }
.blob--peach { width: 300px; height: 300px; background: var(--peach); top: 620px; left: -190px; opacity: .8; }

.app { position: relative; z-index: 1; min-height: 100vh; }

.content {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(140px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-head__titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-head__kicker { font-size: 14px; color: var(--ink-soft); }
.page-head__aside { font-size: 14px; color: var(--ink-soft); }

.sidebar { display: none; }
.me-mobile { display: flex; align-items: center; gap: 8px; }
@media (min-width: 1024px) { .me-mobile .icon-btn { display: none; } }

.tabbar {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 20;
  height: 64px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--glass-fill);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-stroke);
  box-shadow: 0 10px 30px -12px rgba(120, 30, 50, .25);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
}

.tabbar__item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px;
  font-size: 11px; font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
}
.tabbar__item svg { stroke: currentColor; }
.tabbar__item[aria-current="page"] { color: var(--crimson-deep); font-weight: 600; }
.tabbar__item[aria-current="page"] svg { stroke: var(--crimson); }

.badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--crimson); color: var(--on-crimson);
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}
.tabbar__item .badge { position: absolute; top: 2px; left: calc(50% + 6px); }

.fab {
  position: fixed;
  right: 16px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 19;
  display: inline-flex; align-items: center; gap: 8px;
  height: 56px; padding: 0 22px;
  border: 0; border-radius: 999px;
  background: var(--crimson); color: var(--on-crimson);
  font-size: 17px; font-weight: 500; text-decoration: none;
  box-shadow: var(--shadow-float);
  cursor: pointer;
}
.fab:hover { color: var(--on-crimson); }

@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: 264px minmax(0, 1fr); }
  .sidebar {
    display: flex; flex-direction: column; gap: 24px;
    position: sticky; top: 0; height: 100vh;
    padding: 28px 16px;
    border-right: 1px solid var(--line);
    background: var(--glass-fill);
  }
  .sidebar__brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
  .sidebar__brand-name { font-family: var(--font-display); font-weight: 800; font-size: 20px; }
  .sidebar__brand-sub { font-size: 13px; color: var(--ink-soft); }
  .sidebar nav { display: flex; flex-direction: column; gap: 4px; }
  .sidebar__item {
    display: flex; align-items: center; gap: 12px;
    min-height: 44px; padding: 0 12px;
    border-radius: 14px;
    color: var(--ink-body); text-decoration: none; font-weight: 500;
  }
  .sidebar__item svg { stroke: currentColor; flex: none; }
  .sidebar__item[aria-current="page"] { background: var(--rose-soft); color: var(--crimson-deep); }
  .sidebar__item .badge { margin-left: auto; }
  .sidebar__me { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 8px; }
  .content { max-width: 1040px; padding: 40px 40px 80px; }
  .tabbar { display: none; }
  .fab { bottom: 32px; right: 32px; }
}

/* ── Общие элементы ─────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.card--raised { box-shadow: var(--shadow-card); padding: 22px; gap: 16px; }
.card--link { text-decoration: none; color: var(--ink); }
.card--link:hover { color: var(--ink); border-color: var(--line-strong); }

.section { display: flex; flex-direction: column; gap: 12px; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); font-size: 13px; }
.small { font-size: 14px; }

.avatar {
  width: 44px; height: 44px; flex: none;
  border-radius: 999px; border: 0;
  background: var(--crimson); color: var(--on-crimson);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
}
.avatar--sm { width: 32px; height: 32px; font-size: 14px; }

.chip {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent;
}
.chip--scheduled { background: var(--rose-soft); color: var(--crimson-deep); }
.chip--in-review { background: var(--peach-soft); color: var(--peach-ink); }
.chip--draft { background: transparent; color: var(--ink-soft); border-color: var(--line-strong); }
.chip--published { background: var(--rose-muted); color: var(--crimson-darker); }
.chip--archived { background: transparent; color: var(--ink-faint); border-color: var(--line); }
.chip--today { background: var(--rose-muted); color: var(--crimson-darker); }
.chip--warn { background: var(--peach-soft); color: var(--peach-ink); }
.chip--error { background: var(--ink); color: var(--bg); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink);
  font-size: 16px; font-weight: 500; text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.btn--primary { background: var(--crimson); border-color: var(--crimson); color: var(--on-crimson); box-shadow: var(--shadow-float); }
.btn--primary:hover { color: var(--on-crimson); background: var(--crimson-deep); border-color: var(--crimson-deep); }
.btn--dark { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn--dark:hover { color: var(--bg); }
.btn--soft { background: var(--rose-soft); border-color: transparent; color: var(--crimson-deep); }
.btn--soft:hover { color: var(--crimson-darker); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--crimson-deep); padding: 0 8px; }
.btn--block { width: 100%; min-height: 56px; font-size: 17px; }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 15px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; }

.icon-btn {
  width: 44px; height: 44px; flex: none;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); text-decoration: none; cursor: pointer;
}
.icon-btn svg { stroke: currentColor; }

.segmented {
  display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column;
  padding: 4px; border-radius: 999px; background: var(--rose-muted);
}
.segmented > * {
  min-height: 40px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-soft);
  font-size: 15px; font-weight: 500; text-decoration: none;
  display: flex; align-items: center; justify-content: center; text-align: center;
  cursor: pointer; padding: 0 8px;
}
.segmented > [aria-selected="true"], .segmented > [aria-pressed="true"], .segmented > [aria-current="page"] {
  background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px -4px rgba(120, 30, 50, .35);
}

.filters { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filter {
  flex: none; display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-body);
  font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.filter[aria-pressed="true"], .filter[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.search {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 18px;
  border-radius: var(--radius-tile);
  background: var(--surface); border: 1px solid var(--line-strong);
}
.search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 17px; }

.notice {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-tile);
  background: var(--peach-soft); color: var(--peach-ink);
  font-size: 15px; line-height: 1.45;
}
.notice--dark { background: var(--ink); color: var(--bg); }
.notice--dark b { color: var(--bg); }
.notice--rose { background: var(--rose-soft); color: var(--crimson-darker); }
.notice__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.notice__actions .btn { min-height: 44px; font-size: 15px; }
.notice--dark .btn { background: var(--bg); color: var(--ink); border-color: transparent; }
.notice--dark .btn--outline { background: transparent; color: var(--bg); border-color: rgba(255, 247, 244, .4); }

.empty-state { padding: 32px 16px; text-align: center; color: var(--ink-soft); }

/* ── Формы ──────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 600; }
.field__hint { font-size: 13px; color: var(--ink-faint); }
.counter { font-size: 13px; font-weight: 500; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.counter[data-over="true"] { color: var(--crimson-deep); font-weight: 600; }

.input, .textarea, .select {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 17px;
}
.textarea { resize: vertical; line-height: 1.5; }
/* iOS Safari: у date своя внутренняя ширина — без этого поле вылезает за край экрана. */
input[type="date"].input { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; text-align: left; }
input[type="date"].input::-webkit-date-and-time-value { text-align: left; }
/* iOS увеличивает страницу при фокусе на поле со шрифтом меньше 16px. */
input, select, textarea { font-size: max(16px, 1em); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--crimson); }
.select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b565c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }

fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
legend { font-size: 15px; font-weight: 600; padding: 0; margin-bottom: 8px; }

.form-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }

/* ── Обзор ──────────────────────────────────────────────── */

.stock__label { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--crimson); }
.stock__value { display: flex; align-items: baseline; gap: 8px; }
.stock__value b { font-family: var(--font-display); font-weight: 800; font-size: 36px; line-height: 1; }

.mini-cal { display: flex; flex-direction: column; gap: 6px; }
.mini-cal__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mini-cal__wd { font-size: 12px; color: var(--ink-faint); text-align: center; }
.day {
  height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent;
}
.day--past { color: var(--ink-faint); background: var(--rose-muted); opacity: .55; }
.day--ok { color: var(--on-crimson); background: var(--crimson); }
.day--today { color: var(--on-crimson); background: var(--crimson); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--crimson); }
.day--today-empty { color: var(--crimson-deep); border: 1.5px dashed var(--crimson); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--crimson); }
.day--conflict { color: var(--bg); background: var(--ink); }
.day--draft { color: var(--peach-ink); background: var(--peach-soft); border-color: var(--peach-strong); }
.day--empty { color: var(--crimson-deep); border: 1.5px dashed var(--crimson); background: transparent; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.legend .l-ok { background: var(--crimson); }
.legend .l-draft { background: var(--peach-soft); border: 1px solid var(--peach-strong); }
.legend .l-empty { border: 1.5px dashed var(--crimson); }
.legend .l-conflict { background: var(--ink); }

.alert-item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; min-height: 72px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile);
  text-decoration: none; color: var(--ink);
}
.alert-item:hover { color: var(--ink); border-color: var(--line-strong); }
.alert-item__icon {
  width: 40px; height: 40px; flex: none; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
}
.alert-item__icon--danger { background: var(--crimson); color: var(--on-crimson); }
.alert-item__icon--dark { background: var(--ink); color: var(--bg); }
.alert-item__icon--peach { background: var(--peach-soft); color: var(--peach-ink); }
.alert-item__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.alert-item__title { font-size: 16px; font-weight: 600; }
.alert-item__text { font-size: 14px; color: var(--ink-soft); }
.alert-item svg { stroke: var(--ink-faint); flex: none; }

.spark-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.spark-card__when { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink-soft); }
.spark-card__when--accent { color: var(--crimson); }
.spark-card__title { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.2; }
.spark-card__teaser { font-size: 15px; line-height: 1.5; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spark-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-faint); }

.warmup-strip { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--peach-soft); border-radius: var(--radius-tile); text-decoration: none; color: var(--ink); }
.warmup-strip:hover { color: var(--ink); }
.warmup-strip__kicker { font-size: 14px; color: var(--peach-ink); }
.warmup-strip__title { font-size: 16px; font-weight: 600; }

.log { display: flex; flex-direction: column; }
.log__row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.4; }
.log__row:first-child { border-top: 0; }
.log__text { flex: 1; color: var(--ink-body); }
.log__when { color: var(--ink-faint); white-space: nowrap; }

@media (min-width: 1024px) {
  .overview-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .overview-grid > div { display: flex; flex-direction: column; gap: 20px; }
}

/* ── Календарь ──────────────────────────────────────────── */

.month-nav { display: flex; align-items: center; gap: 4px; }
.month-nav__label { font-size: 15px; font-weight: 600; padding: 0 6px; white-space: nowrap; }

.cal-row { display: flex; gap: 12px; align-items: stretch; }
.cal-row__date {
  width: 52px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: 16px; color: var(--ink);
}
.cal-row__date b { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1; }
.cal-row__date span { font-size: 12px; }
.cal-row__date--warn { color: var(--crimson-deep); background: var(--rose-soft); }
.cal-row__date--today { color: var(--on-crimson); background: var(--crimson); }
.cal-row__date--past { opacity: .55; }
.cal-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cal-slot {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 12px 16px; min-height: 64px;
  border-radius: var(--radius-tile);
  background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
}
.cal-slot:hover { color: var(--ink); border-color: var(--line-strong); }
.cal-slot__title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.cal-slot--empty { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; border: 1.5px dashed var(--crimson); background: transparent; color: var(--crimson-deep); font-size: 15px; font-weight: 500; }
.cal-slot--empty svg { stroke: currentColor; }
.cal-slot--past-empty { border-style: dashed; border-color: var(--line-strong); background: transparent; color: var(--ink-faint); font-size: 15px; }

.pool-item { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-tile); background: var(--surface); border: 1px solid var(--line); }
.pool-item__main { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); }
.pool-item__main:hover { color: var(--ink); }
.pool-item form { display: flex; gap: 8px; align-items: center; }
.pool-item .input { min-height: 44px; padding: 8px 12px; font-size: 16px; width: auto; }

/* ── Каталог ────────────────────────────────────────────── */

.list { display: flex; flex-direction: column; gap: 10px; }

@media (min-width: 1024px) {
  .list--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* ── Редактор ───────────────────────────────────────────── */

.editor-head {
  position: sticky; top: 0; z-index: 10;
  margin: calc(-24px - env(safe-area-inset-top)) -16px 0;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
  background: var(--glass-fill);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--line);
}
.editor-head__back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font-weight: 500; text-decoration: none; }
.editor-head__back svg { stroke: currentColor; }
.editor-head__center { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.editor-head__title { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.editor-head__status { font-size: 12px; color: var(--ink-faint); }
@media (min-width: 1024px) {
  .editor-head { margin: -40px -40px 0; padding: 16px 40px; }
}

.editor { display: flex; flex-direction: column; gap: 22px; }
.editor[data-readonly="true"] .textarea, .editor[data-readonly="true"] .input { background: transparent; }

.media-row { display: flex; flex-wrap: wrap; gap: 10px; }
.media-tile {
  position: relative;
  width: 104px;
  display: flex; flex-direction: column; gap: 6px;
}
.media-tile__thumb {
  position: relative;
  width: 104px; height: 104px; border-radius: 18px; overflow: hidden;
  background: var(--rose-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--ink-soft);
}
.media-tile__thumb img, .media-tile__thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-tile__remove {
  position: absolute; top: 6px; right: 6px;
  width: 32px; height: 32px; border-radius: 999px; border: 0;
  background: rgba(43, 27, 32, .65); color: #ffffff; font-size: 18px; line-height: 1;
  cursor: pointer;
}
.media-tile__move { display: flex; gap: 4px; }
.media-tile__move button { flex: 1; min-height: 32px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; font-size: 14px; }
.media-tile__alt { width: 104px; min-height: 36px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 16px; }
.media-tile__alt[aria-invalid="true"] { border-color: var(--crimson); }
.media-tile progress { width: 100%; height: 6px; accent-color: var(--crimson); }
.media-add {
  width: 104px; height: 104px; border-radius: 18px;
  border: 1.5px dashed var(--line-strong); background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--ink-soft); font-size: 13px; font-weight: 500; text-align: center;
  cursor: pointer;
}
.media-add svg { stroke: currentColor; }
.media-error { font-size: 13px; color: var(--crimson-deep); width: 100%; }

.checks { display: flex; flex-direction: column; gap: 10px; }
.check { display: flex; gap: 12px; align-items: flex-start; }
.check__mark {
  width: 24px; height: 24px; flex: none; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.check--ok .check__mark { background: var(--rose-soft); color: var(--crimson-deep); }
.check--fail .check__mark { background: var(--crimson); color: var(--on-crimson); }
.check__body { display: flex; flex-direction: column; gap: 2px; }
.check__title { font-size: 15px; font-weight: 600; }
.check__text { font-size: 14px; color: var(--ink-soft); }

.history-link { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--radius-tile); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.history-link:hover { color: var(--ink); }
.history-link svg { stroke: var(--ink-faint); margin-left: auto; }

.action-bar {
  position: fixed; left: 0; right: 0;
  bottom: 0; z-index: 20;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--glass-fill);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid var(--line);
  display: flex; gap: 10px; justify-content: center;
}
.action-bar > * { flex: 1; max-width: 340px; }
.action-bar .btn { min-height: 52px; }
@media (min-width: 1024px) { .action-bar { left: 264px; } }
.has-action-bar .tabbar { display: none; }
.has-action-bar .content { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }

/* ── Ревью и сравнение ──────────────────────────────────── */

del { background: var(--rose-muted); color: var(--crimson-darker); text-decoration: line-through; border-radius: 4px; padding: 0 2px; }
ins { background: var(--peach-soft); color: var(--peach-ink); text-decoration: underline; text-decoration-thickness: 2px; border-radius: 4px; padding: 0 2px; }
.diff-field { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.diff-field__name { font-size: 13px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.diff-field__text { font-size: 15px; line-height: 1.55; color: var(--ink-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.diff-legend { display: flex; gap: 12px; font-size: 13px; }

.comment { display: flex; gap: 12px; }
.comment__body { display: flex; flex-direction: column; gap: 2px; }
.comment__meta { font-size: 13px; color: var(--ink-faint); }

/* ── Превью «как у пары» ───────────────────────────────── */

.preview { --p-bg: #fff7f4; --p-surface: #ffffff; --p-ink: #2b1b20; --p-soft: #6b565c; --p-line: rgba(43, 27, 32, .08);
  background: var(--p-bg); color: var(--p-ink); border-radius: 36px; border: 1px solid var(--line-strong);
  padding: 28px 18px; display: flex; flex-direction: column; gap: 16px; min-height: 560px; position: relative; overflow: hidden; }
.preview[data-theme="dark"] { --p-bg: #1a1013; --p-surface: #261a1e; --p-ink: #fbeff1; --p-soft: #c4aeb3; --p-line: rgba(251, 239, 241, .10); }
.preview__kicker { font-size: 14px; color: var(--p-soft); }
.preview__h { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.1; }
.preview__card { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; }
.preview__media { display: flex; gap: 2px; overflow-x: auto; }
.preview__media img, .preview__media video { width: 100%; max-height: 260px; object-fit: cover; flex: none; }
.preview__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.preview__title { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.2; }
.preview__text { font-size: 16px; line-height: 1.5; color: var(--p-soft); white-space: pre-wrap; }
.preview__buttons { display: grid; gap: 10px; }
.preview__yes { min-height: 54px; border-radius: 999px; background: #d12a43; color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 500; }
.preview__no { min-height: 54px; border-radius: 999px; border: 1px solid var(--p-line); display: flex; align-items: center; justify-content: center; color: var(--p-ink); font-weight: 500; }
.preview__both { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; color: #d12a43; font-size: 18px; }
.preview [data-state] { display: none; }
.preview[data-show="before"] [data-state="before"], .preview[data-show="after"] [data-state="after"] { display: flex; flex-direction: column; gap: 16px; }

/* ── Импорт ─────────────────────────────────────────────── */

.steps { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.steps li { padding: 6px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); }
.steps li[aria-current="step"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.stats { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.stats b { font-family: var(--font-display); font-weight: 800; font-size: 26px; margin-right: 6px; }
.table-wrap { overflow-x: auto; border-radius: var(--radius-tile); border: 1px solid var(--line); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 12px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
th { border-top: 0; font-size: 13px; color: var(--ink-faint); font-weight: 600; white-space: nowrap; }
/* На телефоне строки отчёта — карточки: причина видна без горизонтальной прокрутки. */
@media (max-width: 640px) {
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; }
  .table-wrap thead { display: none; }
  .table-wrap tr { padding: 12px 14px; border-top: 1px solid var(--line); }
  .table-wrap tr:first-child { border-top: 0; }
  .table-wrap td { padding: 2px 0; border: 0; }
  .table-wrap td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-faint); font-size: 13px; }
}
.dropzone { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--radius-card); border: 1.5px dashed var(--line-strong); background: var(--surface); }

/* ── Вход ───────────────────────────────────────────────── */

.login { max-width: 440px; margin: 0 auto; min-height: 100vh; padding: calc(72px + env(safe-area-inset-top)) 24px 32px; display: flex; flex-direction: column; gap: 32px; position: relative; z-index: 1; }
.login__logo { width: 64px; height: 64px; border-radius: 20px; background: var(--surface); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); }
.login__title { font-size: 38px; line-height: 1.05; letter-spacing: -0.025em; }
.login__title span { color: var(--crimson); }
.login__lede { font-size: 17px; color: var(--ink-soft); }
.login__note { font-size: 14px; color: var(--ink-soft); text-align: center; }
.login__install { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-tile); border: 1px solid var(--line); background: var(--glass-fill); font-size: 14px; color: var(--ink-body); }
.login__install svg { stroke: var(--crimson-deep); flex: none; }
/* Уже установлена на экран «Домой» — подсказка не нужна. */
@media (display-mode: standalone) { .login__install { display: none; } }

/* Кнопка Яндекс ID по брендбуку: чёрная, логотип «Я» в красном круге, текст «Войти с Яндекс ID». */
.ya-button {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; border-radius: 12px;
  background: #000000; color: #ffffff;
  font-family: 'YS Text', var(--font-body); font-size: 17px; font-weight: 500;
  text-decoration: none;
}
.ya-button:hover { color: #ffffff; background: #1f1f1f; }
.ya-button__logo { width: 28px; height: 28px; flex: none; }
@media (prefers-color-scheme: dark) { .ya-button { background: #ffffff; color: #000000; } .ya-button:hover { color: #000000; background: #f2f2f2; } }

/* ── Тосты ─────────────────────────────────────────────── */

.toast-host { position: fixed; left: 16px; right: 16px; top: calc(16px + env(safe-area-inset-top)); z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { max-width: 480px; padding: 14px 18px; border-radius: 18px; background: var(--ink); color: var(--bg); font-size: 15px; box-shadow: var(--shadow-card); pointer-events: auto; }

@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in .2s ease-out; }
  @keyframes toast-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
}