/* Креативы 2.0 — one system with Citiwell Stock, Salons and Marketing: neutral graphite in the dark theme, a light grey
   page with white cards in the light one, a blue accent, soft tinted plaques for states, the system font, 12/8 px radii,
   thin borders. Pages use these roles, not raw colours: a change of the palette is a change here. Text colours pass
   WCAG AA (4.5:1) on the page, cards and their soft fills in both themes. */
:root {
  color-scheme: light;
  --bg: #f4f6f9;
  --bg-2: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f5f7fa;
  --surface-3: #edf1f5;
  --text: #19252f;
  --muted: #5a6672;
  --faint: #67727e;
  --border: #e1e6ec;
  --border-strong: #cdd5de;
  --brand: #2d6bb5;
  --brand-strong: #1f5a9e;
  --brand-soft: #e8f0fa;
  --on-brand: #ffffff;
  --coral: #d92d20;
  --success: #287559;
  --success-soft: #e7f4ed;
  --danger: #b34742;
  --danger-soft: #fcebea;
  --warn: #9b5e18;
  --warn-soft: #fff1dc;
  --star: #e3a008;
  --ring: color-mix(in srgb, var(--brand) 38%, transparent);
  --glass: rgba(255, 255, 255, 0.9);
  --appbar: var(--surface);
  --appbar-2: var(--surface);
  --appbar-text: var(--text);
  /* Toasts and the bars that float over a page: the opposite of the page (dark on light, light on dark). */
  --inv-bg: #19252f;
  --inv-text: #f4f6f9;
  --inv-muted: #b9c2cc;
  --inv-accent: #a0c9ff;
  --inv-danger: #f2b8b1;
  --inv-on-accent: #16191c;
  --inv-hover: rgba(255, 255, 255, 0.12);
  --backdrop: rgba(17, 24, 32, 0.42);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-lift: 0 12px 32px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.08);
  --shadow-sheet: 0 -10px 40px -18px rgba(16, 24, 40, 0.35);
  --radius-card: 12px;
  --radius-field: 8px;
  --radius-sm: 6px;
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --fw-strong: 650;
  --fw-semi: 600;
  --fw-medium: 550;
  --gutter: max(16px, env(safe-area-inset-left));
  --gutter-r: max(16px, env(safe-area-inset-right));
  --topbar-h: 60px;
  --sidebar-w: 240px;
  --fb: #1665d8;
  --ig: #c81e64;
  --fb-bg: #e8f0fd;
  --ig-bg: #fce8f0;

  --t-blue-bg: #e6f0fb;   --t-blue: #2f6fae;
  --t-teal-bg: #dff3ef;   --t-teal: #17766a;
  --t-green-bg: #e7f4ed;  --t-green: #287559;
  --t-violet-bg: #eeebfb; --t-violet: #5d4cc2;
  --t-coral-bg: #fcebea;  --t-coral: #b34742;
  --t-amber-bg: #fff1dc;  --t-amber: #9b5e18;
  --on-tint: #fff;
  --t-rose-bg: #fce8f0;   --t-rose: #a83a6a;
  --t-slate-bg: #edf1f5;  --t-slate: #4d5d6b;
  --t-indigo-bg: #e8ebfb; --t-indigo: #3f55b8;
  /* Markets in charts: the calendar's hues in steps checked for marks (lightness, chroma, colour-blind separation,
     at least 3:1 with the panel) for each theme. */
  --rh-ME: #079181; --rh-RS: #3955cb; --rh-RU: #b93b73;
  /* Days of the calendar: today, a weekend, a day of another month, a day nothing may be put on (hatched). */
  --day-today: color-mix(in srgb, var(--brand-soft) 55%, var(--surface));
  --day-weekend: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
  --day-other: var(--surface-2);
  --day-hatch: repeating-linear-gradient(135deg, var(--surface-3) 0 6px, transparent 6px 12px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111315; --bg-2: #111315; --surface: #212428; --surface-2: #282c31; --surface-3: #2e3339;
    --text: #f0f2f5; --muted: #a7b0ba; --faint: #8e98a3; --border: #33383e; --border-strong: #444b53;
    --brand: #a0c9ff; --brand-strong: #c2dcff; --brand-soft: #2a3e56; --on-brand: #16191c; --coral: #f07166;
    --success: #a5d6bc; --success-soft: #24392f; --danger: #edafa7; --danger-soft: #452d2c; --warn: #edc493; --warn-soft: #423426; --star: #f6c04f;
    --glass: rgba(33, 36, 40, 0.9);
    --inv-bg: #f0f2f5; --inv-text: #19252f; --inv-muted: #4d5966; --inv-accent: #1f5a9e; --inv-danger: #b34742; --inv-on-accent: #ffffff; --inv-hover: rgba(25, 37, 47, 0.08);
    --backdrop: rgba(0, 0, 0, 0.55);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-sheet: 0 -10px 50px -16px rgba(0, 0, 0, 0.7);
    --fb: #6aa7ff; --ig: #ff7fb0; --fb-bg: #1d2f4a; --ig-bg: #452a38;
    --t-blue-bg: #2a3e56; --t-blue: #a0c9ff; --t-teal-bg: #1f3a37; --t-teal: #8fd9cc; --t-green-bg: #24392f; --t-green: #a5d6bc;
    --t-violet-bg: #332d52; --t-violet: #c3b8ff; --t-coral-bg: #452d2c; --t-coral: #edafa7; --t-amber-bg: #423426; --t-amber: #edc493;
    --on-tint: #1f1708;
    --t-rose-bg: #452a38; --t-rose: #f0a9c8; --t-slate-bg: #2e3339; --t-slate: #c1c9d2; --t-indigo-bg: #2d3456; --t-indigo: #b3c0ff;
    --rh-ME: #35aa9a; --rh-RS: #7e90d9; --rh-RU: #d1719e;
    --day-today: color-mix(in srgb, var(--brand-soft) 50%, var(--surface));
    --day-weekend: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
    --day-other: color-mix(in srgb, var(--bg) 45%, var(--surface));
    --day-hatch: repeating-linear-gradient(135deg, var(--surface-3) 0 6px, transparent 6px 12px);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111315; --bg-2: #111315; --surface: #212428; --surface-2: #282c31; --surface-3: #2e3339;
  --text: #f0f2f5; --muted: #a7b0ba; --faint: #8e98a3; --border: #33383e; --border-strong: #444b53;
  --brand: #a0c9ff; --brand-strong: #c2dcff; --brand-soft: #2a3e56; --on-brand: #16191c; --coral: #f07166;
  --success: #a5d6bc; --success-soft: #24392f; --danger: #edafa7; --danger-soft: #452d2c; --warn: #edc493; --warn-soft: #423426; --star: #f6c04f;
  --glass: rgba(33, 36, 40, 0.9);
  --inv-bg: #f0f2f5; --inv-text: #19252f; --inv-muted: #4d5966; --inv-accent: #1f5a9e; --inv-danger: #b34742; --inv-on-accent: #ffffff; --inv-hover: rgba(25, 37, 47, 0.08);
  --backdrop: rgba(0, 0, 0, 0.55);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-sheet: 0 -10px 50px -16px rgba(0, 0, 0, 0.7);
  --fb: #6aa7ff; --ig: #ff7fb0; --fb-bg: #1d2f4a; --ig-bg: #452a38;
  --t-blue-bg: #2a3e56; --t-blue: #a0c9ff; --t-teal-bg: #1f3a37; --t-teal: #8fd9cc; --t-green-bg: #24392f; --t-green: #a5d6bc;
  --t-violet-bg: #332d52; --t-violet: #c3b8ff; --t-coral-bg: #452d2c; --t-coral: #edafa7; --t-amber-bg: #423426; --t-amber: #edc493;
  --on-tint: #1f1708;
  --t-rose-bg: #452a38; --t-rose: #f0a9c8; --t-slate-bg: #2e3339; --t-slate: #c1c9d2; --t-indigo-bg: #2d3456; --t-indigo: #b3c0ff;
  --rh-ME: #35aa9a; --rh-RS: #7e90d9; --rh-RU: #d1719e;
  --day-today: color-mix(in srgb, var(--brand-soft) 50%, var(--surface));
  --day-weekend: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
  --day-other: color-mix(in srgb, var(--bg) 45%, var(--surface));
  --day-hatch: repeating-linear-gradient(135deg, var(--surface-3) 0 6px, transparent 6px 12px);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; font: 400 14px/1.5 var(--font); color: var(--text);
  background: var(--bg); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 8px; }
.icon { width: 20px; height: 20px; flex: none; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); margin: 0; }
.faint { color: var(--faint); }
.hint { margin: 0; font-size: 13px; color: var(--muted); }
.center { text-align: center; }
.mono { font-family: var(--mono); font-size: 0.92em; }
.nowrap { white-space: nowrap; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 10px; }
.row-wrap { flex-wrap: wrap; }
/* In a row that wraps, a block of words keeps room for itself (2.13.1): on a phone the list or the buttons beside it go
   to the next line instead of squeezing the words into a column one word wide. */
.row-wrap > .grow:not(:empty) { flex: 1 1 240px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.spacer { flex: 1; }
[hidden] { display: none !important; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--surface); padding: 10px 14px; border-radius: 12px; box-shadow: var(--shadow-lift); }
.skip-link:focus { top: 12px; }

/* ---------- splash / welcome (as in Citiwell Team) ---------- */
.splash { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.splash img { width: 64px; height: 64px; border-radius: 18px; animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(0.94); opacity: 0.75; } }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.brand-mark--lg { width: 64px; height: 64px; border-radius: 18px; }
.welcome { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: calc(24px + env(safe-area-inset-top)) var(--gutter-r) calc(24px + env(safe-area-inset-bottom)) var(--gutter); }
.welcome-card {
  position: relative; width: min(100%, 440px); padding: 32px 26px 26px; border-radius: var(--radius-card); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-lift); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
}
.welcome-card > .brand-mark--lg { margin-bottom: 6px; }
.welcome-title { margin: 0; font-size: 30px; line-height: 1.1; font-weight: var(--fw-strong); letter-spacing: -0.025em; }
.welcome-title span { color: var(--brand); }
.welcome-title--sm { font-size: 24px; }
.welcome-lead { margin: 0; color: var(--muted); font-size: 16px; }
.eyebrow { margin: 0; font-size: 12px; font-weight: var(--fw-strong); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); }
.card-corner { position: absolute; top: 12px; right: 12px; display: flex; gap: 2px; }
.welcome-card .citiwell-id-button { margin-top: 10px; }
.welcome-features { width: 100%; display: grid; gap: 8px; margin: 4px 0 2px; text-align: left; }
.welcome-features li { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 14px; list-style: none; }
.welcome-features li .icon { color: var(--brand); width: 18px; height: 18px; }
.welcome-features ul { margin: 0; padding: 0; display: grid; gap: 8px; }
.state-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); }
.state-icon .icon { width: 26px; height: 26px; }
.state-icon--warn { background: var(--warn-soft); color: var(--warn); }
.state-icon--good { background: var(--success-soft); color: var(--success); }
.lang-row { display: flex; gap: 6px; justify-content: center; margin-top: 4px; }
.lang-pill {
  min-width: 44px; height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted);
  font-size: 13px; font-weight: var(--fw-strong); letter-spacing: 0.04em; cursor: pointer; display: inline-grid; place-items: center;
}
.lang-pill.is-active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
.notice {
  margin: 0; width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 11px 14px; border-radius: 10px;
  font-size: 14px; font-weight: var(--fw-medium); background: var(--brand-soft); color: var(--brand-strong);
}
.notice .icon { margin-top: 1px; }
.notice-warn { background: var(--warn-soft); color: var(--warn); }
.notice-danger { background: var(--danger-soft); color: var(--danger); }
.notice-good { background: var(--success-soft); color: var(--success); }
.notice p { margin: 0; }
.notice .notice-body { flex: 1; display: grid; gap: 6px; min-width: 0; }
.notice .notice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* A long action of a notice wraps instead of widening the page on a phone (2.13). */
.notice .notice-actions .btn { max-width: 100%; white-space: normal; text-align: left; padding-block: 6px; }

/* "Sign in with Citiwell ID": copied from id.citiwell.global/brand/citiwell-id-button.css (the CSP allows only own styles). */
.citiwell-id-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px 0 13px;
  border: 1px solid transparent; border-radius: 12px; background: linear-gradient(135deg, #27a3d6, #1573a8); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: var(--fw-semi); line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 10px 22px -14px rgba(21, 115, 168, 0.9); transition: filter 0.15s, box-shadow 0.15s;
}
.citiwell-id-button:hover { filter: brightness(1.06); text-decoration: none; }
.citiwell-id-button:focus-visible { outline: 3px solid rgba(39, 163, 214, 0.45); outline-offset: 2px; }
.citiwell-id-button svg { flex: none; width: 24px; height: 24px; }
.citiwell-id-button--block { display: flex; width: 100%; }
.citiwell-id-button--lg { min-height: 56px; border-radius: 16px; font-size: 16.5px; gap: 12px; }
.citiwell-id-button--lg svg { width: 28px; height: 28px; }
.citiwell-id-button:active { transform: scale(0.985); }
.dev-panel { width: 100%; text-align: left; border: 1.5px dashed var(--warn); border-radius: var(--radius-card); padding: 12px 14px; background: var(--warn-soft); color: var(--text); font-size: 14px; }
.dev-panel h2 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--warn); }
.dev-panel ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.dev-panel code { font-family: var(--mono); font-weight: var(--fw-semi); }
.demo-people { width: 100%; display: grid; gap: 8px; margin-top: 6px; }
.demo-person {
  display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); text-decoration: none; font-size: 14px;
}
.demo-person:hover { border-color: var(--brand); text-decoration: none; }
.demo-person span { color: var(--muted); font-size: 13px; }

/* ---------- buttons, tools, chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 15px; border-radius: var(--radius-field);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-weight: var(--fw-semi); font-size: 14px; white-space: nowrap;
  text-decoration: none; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s, filter 0.15s;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active:not(:disabled) { transform: scale(0.985); }
.btn:disabled { opacity: 0.5; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand); filter: brightness(1.06); }
.btn-soft { background: var(--brand-soft); border-color: transparent; color: var(--brand-strong); }
.btn-soft:hover { background: var(--brand-soft); border-color: var(--brand); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-3); border-color: transparent; }
.btn-danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-good { background: var(--success); border-color: var(--success); color: var(--surface); }
.btn-sm { min-height: 34px; padding: 0 11px; border-radius: 7px; font-size: 13px; }
.btn-lg { min-height: 48px; padding: 0 20px; border-radius: 10px; font-size: 15px; }
.btn-block { width: 100%; }
.btn .icon { width: 17px; height: 17px; }
.tool {
  width: 38px; height: 38px; border-radius: var(--radius-field); border: 1px solid transparent; background: transparent; color: var(--muted);
  display: inline-grid; place-items: center; flex: none; transition: background 0.15s, color 0.15s;
}
.tool:hover { background: var(--surface-3); color: var(--text); }
.tool.is-active { color: var(--star); }
.tool-sm { width: 32px; height: 32px; border-radius: 7px; }
.tool-sm .icon { width: 17px; height: 17px; }
.tool-line { border-color: var(--border-strong); background: var(--surface); color: var(--text); }
.tool-line:hover { background: var(--surface-2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: var(--fw-medium); white-space: nowrap;
}
.chip:hover { background: var(--surface-2); }
.chip[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); font-weight: var(--fw-semi); }
.chip .count { font-size: 12px; font-weight: var(--fw-semi); color: var(--faint); }
.chip[aria-pressed="true"] .count { color: inherit; opacity: 0.8; }
.chip .icon { width: 16px; height: 16px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.chips::-webkit-scrollbar { display: none; }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface-3); gap: 2px; }
.seg button { height: 32px; min-width: 36px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-weight: var(--fw-medium); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: var(--fw-semi); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), 0 0 0 1px var(--border); }
.seg button .icon { width: 16px; height: 16px; }
.seg-block { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
/* On a phone the words of a full-width switch stay on one line (2.13.1): «Всё время», «По разделу» took two. */
@media (max-width: 760px) {
  .seg-block { grid-auto-columns: minmax(max-content, 1fr); }
  .seg-block button { padding-inline: 6px; white-space: nowrap; }
}

/* status pills */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: var(--fw-semi); white-space: nowrap; background: var(--t-slate-bg); color: var(--t-slate); }
.pill::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.pill-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pill-plain::before { display: none; }
.pill.s-draft, .pill.s-storage, .pill.s-archived, .pill.s-cancelled { background: var(--t-slate-bg); color: var(--t-slate); }
.pill.s-ready { background: var(--t-blue-bg); color: var(--t-blue); }
.pill.s-scheduled, .pill.s-queued { background: var(--t-violet-bg); color: var(--t-violet); }
.pill.s-paused { background: var(--t-amber-bg); color: var(--t-amber); }
.pill.s-publishing, .pill.s-running { background: var(--t-blue-bg); color: var(--t-blue); }
.pill.s-publishing::before, .pill.s-running::before { animation: pulse 1.2s ease-in-out infinite; }
.pill.s-published, .pill.s-completed { background: var(--t-green-bg); color: var(--t-green); }
.pill.s-partial { background: var(--t-amber-bg); color: var(--t-amber); }
.pill.s-review, .pill.s-blocked { background: var(--t-coral-bg); color: var(--t-coral); }
@keyframes pulse { 50% { opacity: 0.2; } }
.badge { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: var(--fw-semi); background: var(--surface-3); color: var(--muted); font-variant-numeric: tabular-nums; }
.badge-alert { background: var(--danger-soft); color: var(--danger); }
.platform { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: var(--fw-semi); }
.platform .icon { width: 16px; height: 16px; }
.p-facebook { color: var(--fb); }
.p-instagram { color: var(--ig); }
.market-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: var(--fw-semi); letter-spacing: 0.04em; background: var(--surface-3); color: var(--muted); }
.m-ME { background: var(--t-teal-bg); color: var(--t-teal); }
.m-RS { background: var(--t-indigo-bg); color: var(--t-indigo); }
.m-RU { background: var(--t-rose-bg); color: var(--t-rose); }

/* ---------- app shell: the side menu with the sections and the person below, the top bar with the page's place ---------- */
.app { min-height: 100vh; min-height: 100dvh; }
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.workspace { min-width: 0; display: flex; flex-direction: column; }
.sidebar {
  position: sticky; top: 0; z-index: 31; height: 100vh; height: 100dvh; overflow-y: auto; padding: 18px 12px 12px; display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid var(--border); background: var(--surface); scrollbar-width: thin;
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; color: var(--text); text-decoration: none; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.sidebar .brand { padding: 2px 8px 16px; }
.sidebar .brand-mark { width: 36px; height: 36px; border-radius: 10px; }
.brand-name { display: grid; min-width: 0; line-height: 1.2; }
.brand-name small { font-size: 12px; color: var(--muted); }
.brand-name strong { font-size: 16px; font-weight: var(--fw-strong); letter-spacing: -0.01em; }
.topbar {
  position: sticky; top: 0; z-index: 30; height: calc(var(--topbar-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) clamp(16px, 3vw, 32px) 0;
  display: flex; align-items: center; gap: 12px; color: var(--text); background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--border);
}
.topbar .brand { display: none; }
.topbar .brand-mark { width: 30px; height: 30px; border-radius: 8px; }
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); white-space: nowrap; }
.crumbs a:hover { color: var(--text); text-decoration: none; }
.crumbs .icon { width: 14px; height: 14px; color: var(--faint); }
.crumbs strong { color: var(--text); font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-search {
  flex: 0 1 380px; min-width: 0; margin-left: auto; height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 8px 0 12px; border-radius: var(--radius-field);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 13.5px; text-align: left;
}
.top-search:hover { border-color: var(--border-strong); }
.top-search .icon { width: 17px; height: 17px; color: var(--faint); }
.top-search span:not(.kbd) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-banners:not(:empty) { padding: 18px clamp(16px, 3vw, 36px) 0; max-width: 1392px; margin: 0 auto; width: 100%; }
.kbd { font-family: var(--font); font-size: 11.5px; font-weight: var(--fw-semi); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.only-phone { display: none !important; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--brand-soft); color: var(--brand-strong);
  font-weight: var(--fw-semi); font-size: 13px; display: grid; place-items: center; flex: none; padding: 0; letter-spacing: 0.02em;
}
.avatar-lg { width: 56px; height: 56px; font-size: 19px; }
.nav-label { margin: 14px 12px 6px; font-size: 11px; font-weight: var(--fw-semi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
/* The menu's top: the brand and, on a phone, × (2.10). */
.sidebar-top { display: flex; align-items: center; gap: 8px; }
.sidebar-top .brand { flex: 1; min-width: 0; }
.sidebar-x { display: none; }
.sidebar-top + .nav-label { margin-top: 2px; }
.nav-rail-toggle { color: var(--faint); }
.nav-scrim { display: none; }
.nav-item {
  display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-field); color: var(--muted); font-weight: var(--fw-medium); text-decoration: none;
  border: 0; background: transparent; width: 100%; text-align: left; font-size: 14px;
}
.nav-item .icon { width: 19px; height: 19px; }
.nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-item[aria-current="page"] { background: var(--brand-soft); color: var(--brand-strong); font-weight: var(--fw-semi); }
.nav-item .badge { margin-left: auto; }
.nav-item[aria-current="page"] .badge:not(.badge-alert) { background: var(--surface); color: var(--brand-strong); }
.sidebar-foot { margin-top: auto; display: grid; gap: 2px; padding-top: 14px; }
.sidebar-foot .nav-item { min-height: 36px; font-size: 13px; }
.account { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 12px 8px 4px; border: 0; border-top: 1px solid var(--border); background: none; color: inherit; text-align: left; border-radius: 0; }
.account:hover .account-info strong { color: var(--brand-strong); }
.account-info { display: grid; min-width: 0; line-height: 1.3; }
.account-info strong { font-size: 13px; font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-info small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-version { padding: 6px 8px 0; font-size: 11.5px; color: var(--faint); }
.main { min-width: 0; width: 100%; padding: 26px clamp(16px, 3vw, 36px) 64px; }
.page { max-width: 1320px; margin: 0 auto; display: grid; gap: 22px; }
.page-narrow { max-width: 1100px; }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
/* The title keeps a readable width: wide actions (the market switch on a phone) go to the next line instead. */
.page-head .grow { display: grid; gap: 4px; flex: 1 1 260px; }
.page-title { margin: 0; font-size: clamp(23px, 2.6vw, 28px); line-height: 1.2; font-weight: var(--fw-strong); letter-spacing: -0.02em; }
.page-sub { margin: 0; color: var(--muted); font-size: 14px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.greeting { margin: 0; font-size: clamp(24px, 3.6vw, 32px); line-height: 1.15; font-weight: var(--fw-strong); letter-spacing: -0.02em; }
.role-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.role-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; font-weight: var(--fw-medium); color: var(--muted); }
.role-chip--full { border-color: transparent; background: var(--text); color: var(--surface); }
.role-chip .icon { width: 15px; height: 15px; }

/* bottom tab bar on phones */
.tabbar { display: none; }
.fab { display: none; }
/* The creative page has its own save bar and buttons: the floating "+" would cover them on phones. */

/* ---------- panels, cards ---------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 20px; min-width: 0; }
.panel-flush { padding: 0; overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.panel-head h2, .panel-head h3 { margin: 0; font-size: 16.5px; font-weight: var(--fw-strong); letter-spacing: -0.01em; }
.panel-head .grow { display: grid; gap: 2px; }
.panel-head p { margin: 0; color: var(--muted); font-size: 13.5px; }
.panel-link { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semi); font-size: 14px; }
.section-title { margin: 0; font-size: 18px; font-weight: var(--fw-strong); letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.label { font-size: 12px; font-weight: var(--fw-strong); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); color: var(--text); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
a.kpi:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.kpi-top { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: var(--fw-semi); font-size: 13.5px; }
.kpi-top > span:not(.kpi-icon) { min-width: 0; overflow-wrap: break-word; }
/* Two tiles in a row on a phone (2.13.1): the icon above the name, the arrow in the corner — a long name
   («Взаимодействия», «Опубликовано за 30 дней») is no longer cut off or pushed past the tile. */
@media (max-width: 760px) {
  .kpi { padding: 14px; }
  .kpi-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .kpi-top > .icon-sm { position: absolute; top: 14px; right: 14px; }
  .kpi-top .kpi-icon { width: 32px; height: 32px; border-radius: 10px; }
}
.kpi-icon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--tint-bg, var(--brand-soft)); color: var(--tint, var(--brand)); }
.kpi-icon .icon { width: 19px; height: 19px; }
.kpi-value { font-size: 32px; line-height: 1; font-weight: var(--fw-strong); letter-spacing: -0.03em; }
.kpi-note { font-size: 13px; color: var(--muted); }
.kpi-note .up { color: var(--success); font-weight: var(--fw-strong); }
.kpi-note .down { color: var(--danger); font-weight: var(--fw-strong); }
.tint-blue { --tint-bg: var(--t-blue-bg); --tint: var(--t-blue); }
.tint-teal { --tint-bg: var(--t-teal-bg); --tint: var(--t-teal); }
.tint-green { --tint-bg: var(--t-green-bg); --tint: var(--t-green); }
.tint-violet { --tint-bg: var(--t-violet-bg); --tint: var(--t-violet); }
.tint-coral { --tint-bg: var(--t-coral-bg); --tint: var(--t-coral); }
.tint-amber { --tint-bg: var(--t-amber-bg); --tint: var(--t-amber); }
.tint-rose { --tint-bg: var(--t-rose-bg); --tint: var(--t-rose); }
.tint-slate { --tint-bg: var(--t-slate-bg); --tint: var(--t-slate); }
.tint-indigo { --tint-bg: var(--t-indigo-bg); --tint: var(--t-indigo); }

.attention { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.attention-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-card); background: var(--tint-bg); color: var(--tint); font-weight: var(--fw-semi);
  text-decoration: none; border: 1px solid transparent; transition: border-color 0.15s;
}
.attention-item:hover { text-decoration: none; border-color: currentColor; }
.attention-item strong { font-size: 22px; line-height: 1; }
.attention-item span { flex: 1; color: var(--text); font-size: 14px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.account-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.account-head h3 { margin: 0; font-size: 17px; font-weight: var(--fw-strong); }
.account-head p { margin: 0; color: var(--muted); font-size: 13.5px; }
.account-avatar { width: 44px; height: 44px; border-radius: var(--radius-card); display: grid; place-items: center; font-weight: var(--fw-strong); }
.channel-table { display: grid; gap: 0; }
.channel-line { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; }
.channel-line.head { border-top: 0; padding-top: 0; font-size: 12px; font-weight: var(--fw-strong); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.channel-line strong { font-size: 15px; }
.channel-line a { color: var(--text); font-weight: var(--fw-strong); }
.insights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.insight { padding: 10px 12px; border-radius: var(--radius-card); background: var(--surface-2); display: grid; gap: 2px; }
.insight strong { font-size: 17px; font-weight: var(--fw-strong); }
.insight span { font-size: 12px; color: var(--muted); font-weight: var(--fw-medium); }
/* Rhythm of publications (views/rhythm.js): months of a year, the markets' bars side by side. What went out is solid;
   the plan on top is told apart by its fill — a light tint (approved), stripes (waiting for approval), a dashed frame
   (waiting for the image) — not only by colour. The goal band of 2–3 a week sits behind. */
.rhythm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; --rh-plot: 200px; --rh-goal: color-mix(in srgb, var(--text) 7%, transparent); --rh-goal-edge: color-mix(in srgb, var(--text) 18%, transparent); transition: opacity 0.15s; }
.rhythm.is-loading { opacity: 0.55; }
.rhythm .panel-head { margin-bottom: 0; flex-wrap: wrap; }
.rh-years { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-3); }
.rh-year { min-width: 52px; height: 32px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: var(--fw-semi); font-size: 13.5px; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
button.rh-year:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.rh-year.is-current { background: var(--surface); color: var(--text); font-weight: var(--fw-strong); box-shadow: 0 1px 3px rgba(14, 29, 42, 0.12); }
.rh-years .tool:disabled { opacity: 0.35; background: none; }
.rh-tools { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
/* On a very narrow screen the mode names may take two lines rather than be cut. */
.rh-tools .seg { max-width: 100%; }
.rh-tools .seg button { height: auto; min-height: 32px; padding-top: 4px; padding-bottom: 4px; line-height: 1.2; text-align: center; }
.rh-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; font-weight: var(--fw-medium); color: var(--muted); }
.rh-legend li { display: inline-flex; align-items: center; gap: 6px; }
.rh-swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--c, var(--muted)); }
.rh-swatch.k-queued, .rh-seg.k-queued { background: color-mix(in srgb, var(--c, var(--muted)) 42%, transparent); }
.rh-swatch.k-paused, .rh-seg.k-paused { background: repeating-linear-gradient(135deg, var(--c, var(--muted)) 0 1.5px, transparent 1.5px 5px), color-mix(in srgb, var(--c, var(--muted)) 16%, transparent); }
.rh-swatch.k-image, .rh-seg.k-image { background: color-mix(in srgb, var(--c, var(--muted)) 7%, transparent); border: 1.5px dashed var(--c, var(--muted)); }
.rh-swatch.k-goal { height: 10px; border-radius: 2px; background: var(--rh-goal); box-shadow: inset 0 1px 0 var(--rh-goal-edge), inset 0 -1px 0 var(--rh-goal-edge); }
.rh-empty { margin: 0; }
.rh-chart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.rh-axis { position: relative; height: var(--rh-plot); min-width: 22px; font-size: 11.5px; font-weight: var(--fw-semi); color: var(--faint); font-variant-numeric: tabular-nums; }
.rh-axis span { position: absolute; right: 0; transform: translateY(50%); line-height: 1; }
.rh-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 2px; }
.rh-plot { position: relative; }
.rh-grid { position: absolute; left: 0; right: 0; top: 0; height: var(--rh-plot); pointer-events: none; }
.rh-grid span { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--border); }
.rh-grid span.is-base { border-top-color: var(--border-strong); }
.rh-months { position: relative; display: grid; grid-template-columns: repeat(12, minmax(46px, 1fr)); margin: 0; padding: 0; list-style: none; }
.rh-month { display: grid; grid-template-rows: var(--rh-plot) auto; gap: 6px; color: var(--muted); text-decoration: none; border-radius: 10px; }
.rh-month:hover { text-decoration: none; }
.rh-month:focus-visible { outline: 3px solid var(--ring); outline-offset: -1px; }
.rh-area { position: relative; border-radius: 10px 10px 0 0; transition: background 0.15s; }
.rh-month.is-current .rh-area { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.rh-month:hover .rh-area, .rh-month.is-tip .rh-area { background: color-mix(in srgb, var(--brand) 11%, transparent); }
.rh-goal { position: absolute; left: 0; right: 0; background: var(--rh-goal); box-shadow: inset 0 1px 0 var(--rh-goal-edge), inset 0 -1px 0 var(--rh-goal-edge); pointer-events: none; }
.rh-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding: 0 3px; }
.rh-bar { width: min(22px, 34%); max-height: 100%; display: flex; flex-direction: column-reverse; gap: 2px; }
.rh-seg { flex: var(--v) 1 0; min-height: 3px; background: var(--c); }
.rh-seg:last-child { border-radius: 4px 4px 0 0; }
.rh-seg.k-image:last-child { border-radius: 4px 4px 1px 1px; }
.rh-label { text-align: center; font-size: 12px; font-weight: var(--fw-semi); white-space: nowrap; padding-bottom: 2px; }
.rh-month.is-future .rh-label { color: var(--faint); }
.rh-month.is-current .rh-label span { padding: 2px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font-weight: var(--fw-strong); }
.rh-tip { position: fixed; z-index: 65; width: 300px; max-width: calc(100vw - 16px); display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lift); pointer-events: none; font-size: 13px; line-height: 1.4; animation: pop-in 0.12s ease-out; }
.rh-tip-title { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.rh-now { padding: 1px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font-size: 11.5px; font-weight: var(--fw-strong); }
.rh-tip-row { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px; }
.rh-key { width: 12px; height: 3px; margin-top: 9px; border-radius: 2px; background: var(--c); }
.rh-tip-body { display: grid; gap: 2px; min-width: 0; }
.rh-tip-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rh-tip-out { font-weight: var(--fw-semi); }
.rh-tip-body small, .rh-tip-goal { color: var(--muted); font-size: 12.5px; }
.rh-tip-missed { color: var(--t-coral); font-weight: var(--fw-semi); }
.rh-pace { font-size: 11.5px; font-weight: var(--fw-strong); padding: 0 7px; border-radius: 999px; background: var(--t-slate-bg); color: var(--t-slate); }
.rh-pace.is-below { background: var(--t-amber-bg); color: var(--t-amber); }
.rh-pace.is-within { background: var(--t-green-bg); color: var(--t-green); }
.rh-tip-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-weight: var(--fw-semi); font-size: 13.5px; }
.rh-sheet { display: grid; gap: 14px; }
.rh-sheet .rh-tip-row { font-size: 14px; }
.rh-compare { display: grid; gap: 8px; }
.rh-compare h3 { margin: 0; font-size: 15px; font-weight: var(--fw-strong); }
.rhythm .rh-table-wrap { border: 0; border-radius: 0; box-shadow: none; background: none; }
.rh-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rh-table.is-one { width: auto; min-width: min(100%, 420px); }
.rh-table th, .rh-table td { padding: 8px 10px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.rh-table thead th { border-top: 0; padding-top: 0; font-size: 13px; font-weight: var(--fw-strong); color: var(--text); }
.rh-table tbody th { font-weight: var(--fw-medium); color: var(--muted); }
.rh-table small { display: block; margin-top: 1px; font-size: 12px; font-weight: var(--fw-medium); color: var(--muted); }
.rh-th { display: inline-flex; align-items: center; gap: 6px; }
.rh-code { display: none; }
.rh-value { display: inline-flex; align-items: center; gap: 5px; font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.rh-lead { display: inline-grid; place-items: center; color: var(--t-amber); }
.rh-details summary { cursor: pointer; width: fit-content; font-weight: var(--fw-semi); font-size: 14px; color: var(--brand); }
.rh-details[open] summary { margin-bottom: 10px; }
.rhythm .rh-months-table th, .rhythm .rh-months-table td { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.rh-months-table tbody th { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: var(--fw-semi); color: var(--text); background: none; }
.rh-months-table tr.is-current th { color: var(--brand-strong); }
.rh-months-table td small { display: block; }
.rhythm .rh-months-table thead th { white-space: normal; vertical-align: bottom; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.rhythm .rh-months-table td.rh-plan-cell { white-space: normal; min-width: 140px; }
.list { display: grid; }
.list-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; min-width: 0;
  background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left;
}
.list-row:first-child { border-top: 0; }
.list-row:hover { text-decoration: none; background: var(--surface-2); border-radius: 12px; }
.list-row .grow { display: grid; gap: 2px; flex: 1; min-width: 0; }
.list-row .grow .pill { justify-self: start; margin-top: 4px; }
.list-row strong { font-weight: var(--fw-semi); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row small { color: var(--muted); font-size: 12.5px; }
.list-row time { color: var(--muted); font-size: 13px; font-weight: var(--fw-medium); white-space: nowrap; }
.thumb { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--surface-3); flex: none; display: grid; place-items: center; color: var(--faint); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-sm { width: 36px; height: 36px; border-radius: 10px; }
.date-block { width: 52px; flex: none; text-align: center; border-radius: 12px; background: var(--surface-2); padding: 6px 0; }
.date-block b { display: block; font-size: 18px; line-height: 1.1; }
.date-block span { display: block; font-size: 11px; font-weight: var(--fw-strong); text-transform: uppercase; color: var(--muted); letter-spacing: 0.06em; }

/* ---------- toolbar / filters ---------- */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.search { position: relative; flex: 1 1 280px; min-width: 200px; }
.search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.search input {
  width: 100%; height: 40px; padding: 0 70px 0 40px; border-radius: var(--radius-field); border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 14px; font-weight: 400; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.search .search-count { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12.5px; font-weight: var(--fw-strong); color: var(--faint); }
.select {
  height: 40px; padding: 0 34px 0 12px; border-radius: var(--radius-field); border: 1px solid var(--border-strong); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238597a6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none; font-weight: var(--fw-medium); font-size: 13.5px; color: var(--text); max-width: 100%;
}
.select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.filters { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.bulkbar {
  position: sticky; top: calc(var(--topbar-h) + 10px); z-index: 15; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px 10px 16px;
  border-radius: 12px; background: var(--inv-bg); color: var(--inv-text); box-shadow: var(--shadow-lift);
}
.bulkbar strong { margin-right: auto; }
.bulkbar .btn { background: var(--inv-hover); border-color: transparent; color: var(--inv-text); }
.bulkbar .btn:hover { background: var(--inv-hover); filter: brightness(1.15); }

/* ---------- creatives grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 16px; }
.concept {
  position: relative; display: flex; flex-direction: column; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-card); overflow: hidden; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; min-width: 0;
}
.concept:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--border-strong); }
.concept.is-selected { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.concept-open { display: block; border: 0; padding: 0; background: none; text-align: left; color: inherit; width: 100%; }
.concept-media { position: relative; aspect-ratio: 4 / 5; background: var(--surface-3); overflow: hidden; }
.concept-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.concept:hover .concept-media img { transform: scale(1.02); }
.no-media { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--faint); font-weight: var(--fw-semi); font-size: 13.5px; background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 10px, var(--surface-3) 10px, var(--surface-3) 20px); }
.no-media .icon { width: 28px; height: 28px; }
/* a release already in the plan, still without its picture */
.no-media.is-planned { gap: 4px; padding: 12px; text-align: center; color: var(--t-rose); background: repeating-linear-gradient(45deg, var(--t-rose-bg), var(--t-rose-bg) 10px, var(--surface-2) 10px, var(--surface-2) 20px); }
.no-media.is-planned strong { font-size: 14px; font-weight: var(--fw-strong); }
.no-media.is-planned span { color: var(--text); font-weight: var(--fw-semi); }
.no-media.is-planned small { color: var(--muted); font-weight: var(--fw-medium); }
.concept-body { padding: 12px 14px 14px; display: grid; gap: 8px; }
.concept-kicker { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: var(--fw-strong); color: var(--faint); letter-spacing: 0.02em; min-width: 0; }
.concept-kicker .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.concept-title { margin: 0; font-size: 15px; line-height: 1.3; font-weight: var(--fw-strong); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.variants { display: flex; gap: 4px; flex-wrap: wrap; }
.concept-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.variant {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 7px 0 6px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2);
  font-size: 11.5px; font-weight: var(--fw-strong); color: var(--text); text-decoration: none; letter-spacing: 0.02em;
}
.variant[aria-current="true"] { border-color: var(--border-strong); background: var(--surface); }
.variant:hover { border-color: var(--border-strong); text-decoration: none; }
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.variant .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.variant.is-dim { opacity: 0.45; }
.dot.s-ready { background: var(--t-blue); }
.dot.s-draft, .dot.s-storage, .dot.s-archived { background: var(--faint); }
.dot.s-scheduled { background: var(--t-violet); }
.dot.s-paused, .dot.s-partial { background: var(--t-amber); }
.dot.s-published { background: var(--t-green); }
.dot.s-review { background: var(--t-coral); }
.dot.s-publishing { background: var(--t-blue); animation: pulse 1.2s ease-in-out infinite; }
.concept-corner { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.corner-btn {
  width: 34px; height: 34px; border-radius: 11px; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, 0.9); color: #445868;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px);
}
.corner-btn:hover { background: #fff; color: #0e1d2a; }
.corner-btn.is-active { color: var(--star); }
.corner-btn .icon { width: 18px; height: 18px; }
.concept-check { position: absolute; top: 10px; left: 10px; }
@media (hover: hover) {
  .concept-corner .corner-btn:not(.is-active) { opacity: 0; transition: opacity 0.15s; }
  .concept:hover .corner-btn, .concept:focus-within .corner-btn { opacity: 1; }
  .ad-tile:hover .corner-btn, .ad-tile:focus-within .corner-btn, .ad-campaign:hover .corner-btn, .ad-campaign:focus-within .corner-btn { opacity: 1; }
  .ad-card-tools .corner-btn:not(.is-active) { opacity: 0; transition: opacity 0.15s; }
}
.ad-tile-corner { z-index: 2; }
.ad-card-tools { display: inline-flex; gap: 4px; }
.ad-card-tools .corner-btn { width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2); color: var(--muted); box-shadow: none; border: 1px solid var(--border); }
.ad-card-tools .corner-btn.is-active { color: var(--star); }
.ad-card-star { display: inline-grid; place-items: center; width: 28px; height: 28px; color: var(--star); }
.concept-check .corner-btn[aria-pressed="true"] { background: var(--brand); color: #fff; }
.concept-flags { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; }
.flag { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 9px; font-size: 12px; font-weight: var(--fw-strong); background: rgba(14, 29, 42, 0.72); color: #fff; backdrop-filter: blur(6px); }
.flag .icon { width: 14px; height: 14px; }
.table-wrap { overflow-x: auto; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-card); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; font-weight: var(--fw-medium); color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface-2); }
.table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background 0.1s; }
.table tbody tr:hover { background: var(--surface-2); }
.table .cell-title { display: flex; align-items: center; gap: 12px; min-width: 240px; }
.table .cell-title button { border: 0; background: none; padding: 0; text-align: left; font-weight: var(--fw-strong); color: var(--text); }
.table .cell-title button:hover { color: var(--brand); }
.table small { color: var(--muted); }
.more { display: flex; justify-content: center; margin-top: 4px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-weight: var(--fw-semi); font-size: 14px; }

/* ---------- empty / loading ---------- */
.empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 48px 20px; color: var(--muted); }
.empty h2, .empty h3 { margin: 0; color: var(--text); font-size: 18px; font-weight: var(--fw-strong); }
.empty p { margin: 0; max-width: 420px; }
.skeleton { border-radius: var(--radius-card); background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton-card { height: 360px; }
.skeleton-line { height: 18px; border-radius: 8px; }
.loading-dots::after { content: "…"; }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; flex: none; }
.spinner-lg { width: 44px; height: 44px; border-width: 4px; color: var(--brand); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- forms ---------- */
/* One column that may be narrower than its content (2.13): a select with a long option (a pixel's name and number) no
   longer widens the page on a phone, which let the page slide sideways. */
.field { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
.field > span, .field > label { font-size: 13px; font-weight: var(--fw-semi); color: var(--muted); }
.input, .textarea {
  width: 100%; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-field); border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 14px; font-weight: 400; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus, .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.input[readonly], .textarea[readonly] { background: var(--surface-2); }
.textarea { resize: vertical; line-height: 1.55; font-weight: 400; }
.title-input { font-size: clamp(20px, 2.4vw, 26px); font-weight: var(--fw-strong); letter-spacing: -0.02em; border-color: transparent; background: transparent; padding: 6px 10px; margin-left: -10px; resize: none; overflow: hidden; line-height: 1.25; min-height: 0; width: calc(100% + 10px); display: block; }
.title-input:hover { border-color: var(--border); }
.title-input:focus { background: var(--surface); }
.checks { display: flex; gap: 10px; flex-wrap: wrap; }
.check {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 13px; border-radius: var(--radius-field); border: 1px solid var(--border-strong);
  background: var(--surface); font-weight: var(--fw-medium); cursor: pointer; user-select: none;
}
.check:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }
.check:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); margin: 0; }
.check small { font-weight: var(--fw-medium); color: var(--muted); }
.toolbar .check, .row .check, .cal-filters .check { min-height: 34px; font-size: 13.5px; padding: 0 11px; }
.switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.switch input { appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--border-strong); position: relative; flex: none; margin: 0; transition: background 0.15s; cursor: pointer; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.switch input:checked { background: var(--brand); }
.switch input:checked::after { transform: translateX(18px); }
.switch input:disabled { opacity: 0.5; cursor: not-allowed; }
.switch span { display: grid; gap: 2px; font-weight: var(--fw-semi); }
.switch small { font-weight: 500; color: var(--muted); font-size: 13px; }
.form-error { margin: 0; color: var(--danger); font-weight: var(--fw-semi); font-size: 14px; }
.form-error:empty { display: none; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ---------- editor ---------- */
.editor { display: grid; gap: 18px; }
.editor-head { display: grid; gap: 12px; }
.editor-head > * { min-width: 0; }
.editor-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.editor-top .code-tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-top .pill { flex: none; }
/* a long state has a short form for the head of the window on a phone */
.pill-short { display: none; }
@media (max-width: 760px) {
  .editor-top .pill-long { display: none; }
  .editor-top .pill-short { display: inline; }
}
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: var(--fw-semi); font-size: 14px; border: 0; background: none; padding: 6px 8px 6px 2px; border-radius: 10px; }
.back:hover { color: var(--text); text-decoration: none; }
.code-tag { font-family: var(--mono); font-size: 13px; font-weight: var(--fw-semi); padding: 4px 9px; border-radius: 8px; background: var(--surface-3); color: var(--muted); }
.market-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.market-tab {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface);
  font-weight: var(--fw-strong); font-size: 14px; color: var(--muted); text-decoration: none;
}
.market-tab:hover { border-color: var(--border-strong); text-decoration: none; color: var(--text); }
.market-tab[aria-current="page"] { border-color: var(--brand); color: var(--brand-strong); background: var(--brand-soft); }
.market-tab .dot { width: 8px; height: 8px; border-radius: 50%; }
.market-tab-add { border-style: dashed; }
.editor-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(300px, 0.95fr); gap: 18px; align-items: start; }
.editor-col { display: grid; gap: 18px; min-width: 0; }
.editor-main { display: contents; }
.media-box { display: grid; gap: 12px; }
.drop {
  position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--surface-3); aspect-ratio: 4 / 5; display: grid; place-items: center;
  border: 2px dashed transparent; transition: border-color 0.15s, background 0.15s;
}
.drop img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--surface-2); }
.drop.is-empty { border-color: var(--border-strong); cursor: pointer; }
.drop.is-over { border-color: var(--brand); background: var(--brand-soft); }
.drop-hint { display: grid; justify-items: center; gap: 8px; text-align: center; color: var(--muted); font-weight: var(--fw-semi); padding: 20px; }
.drop-hint .icon { width: 34px; height: 34px; color: var(--brand); }
.drop-busy { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(14, 29, 42, 0.45); color: #fff; }
.drop-story { aspect-ratio: 9 / 16; max-height: 360px; }
.media-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.caption-box { display: grid; gap: 10px; }
.caption-box .textarea { min-height: 360px; }
.counters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.counter { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 9px; background: var(--surface-2); font-size: 12.5px; font-weight: var(--fw-semi); color: var(--muted); }
.counter .icon { width: 14px; height: 14px; }
.counter.is-over { background: var(--danger-soft); color: var(--danger); }
.counter.is-good { background: var(--success-soft); color: var(--success); }
.meter { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--w, 0%); background: var(--brand); border-radius: inherit; }
.meter.is-over i { background: var(--danger); }
.savebar {
  position: sticky; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 20; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 10px 10px 16px; border-radius: 12px; background: var(--inv-bg); color: var(--inv-text); box-shadow: var(--shadow-lift); animation: pop-in 0.18s ease-out;
}
.savebar p { margin: 0; flex: 1; font-weight: var(--fw-semi); }
.savebar .btn-ghost { color: var(--inv-text); }
.savebar .btn-ghost:hover { background: var(--inv-hover); }
.channel { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.channel:first-of-type { border-top: 0; padding-top: 0; }
.channel-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.channel-icon.facebook { background: var(--fb-bg); color: var(--fb); }
.channel-icon.instagram { background: var(--ig-bg); color: var(--ig); }
.channel .grow { display: grid; gap: 2px; }
.channel strong { font-size: 14.5px; }
.channel small { color: var(--muted); font-size: 13px; }
.channel small.good { color: var(--success); font-weight: var(--fw-semi); }
.plan-box { display: grid; gap: 10px; padding: 14px; border-radius: var(--radius-card); background: var(--surface-2); border: 1px solid var(--border); }
.plan-when { font-size: 17px; font-weight: var(--fw-strong); }
.stepper { display: grid; gap: 10px; counter-reset: step; }
.step { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.step::before { counter-increment: step; content: counter(step); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); font-weight: var(--fw-strong); font-size: 13px; }
.step > div { display: grid; gap: 8px; }
.candidates { display: grid; gap: 8px; max-height: 340px; overflow-y: auto; }
.candidate { display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 10px; border-radius: var(--radius-card); border: 1px solid var(--border); cursor: pointer; align-items: start; }
.candidate:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.candidate input { position: absolute; opacity: 0; pointer-events: none; }
.candidate img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; }
.candidate p { margin: 2px 0 0; font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.timeline { display: grid; gap: 0; }
.tl-item { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.tl-item:first-child { border-top: 0; padding-top: 0; }
.tl-icon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); }
.tl-icon .icon { width: 16px; height: 16px; }
.tl-item strong { font-size: 14px; }
.tl-item p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.version { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.version summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; font-weight: var(--fw-semi); font-size: 14px; }
.version summary::-webkit-details-marker { display: none; }
.version summary small { color: var(--muted); font-weight: var(--fw-medium); }
.version[open] summary { border-bottom: 1px solid var(--border); background: var(--surface-2); }
.version-body { padding: 12px; display: grid; gap: 10px; }
.version-body img { max-height: 220px; width: auto; border-radius: 12px; justify-self: start; }
.version-text { white-space: pre-wrap; font-size: 13.5px; color: var(--muted); max-height: 200px; overflow-y: auto; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.tab { border: 0; background: none; padding: 10px 12px; font-weight: var(--fw-strong); font-size: 14px; color: var(--muted); border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.tab[aria-selected="true"] { color: var(--brand-strong); border-color: var(--brand); }
.tab .badge { height: 20px; min-width: 20px; font-size: 11px; }

/* post preview (Instagram / Facebook look) */
.preview { border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); overflow: hidden; font-size: 13.5px; }
.preview-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.preview-avatar { width: 32px; height: 32px; border-radius: 50%; background: conic-gradient(from 200deg, #f9ce34, #ee2a7b, #6228d7, #f9ce34); padding: 2px; }
.preview-avatar span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--surface); font-size: 11px; font-weight: var(--fw-strong); }
.preview.fb .preview-avatar { background: var(--fb); }
.preview-name { font-weight: var(--fw-strong); font-size: 13.5px; }
.preview-sub { font-size: 12px; color: var(--muted); }
.preview-image { aspect-ratio: 4 / 5; background: var(--surface-3); }
.preview-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-icons { display: flex; gap: 14px; padding: 10px 12px 4px; color: var(--text); }
.preview-caption { padding: 4px 12px 14px; white-space: pre-wrap; word-break: break-word; }
.preview-caption b { font-weight: var(--fw-strong); }
.preview-caption .more-link { color: var(--muted); font-weight: var(--fw-medium); border: 0; background: none; padding: 0; }
.preview.fb .preview-caption { padding-top: 0; }

/* ---------- calendar: a month, a timeline («Шкала») and a list (views/calendar.js, calendarDays.js, calendarScale.js) ---------- */
/* The tone of a release: the soft fill of its state and the colour of its time and sign (the same as the state pills). */
.t-plan { --tone-bg: var(--t-violet-bg); --tone: var(--t-violet); }
.t-warning { --tone-bg: var(--t-amber-bg); --tone: var(--t-amber); }
.t-image { --tone-bg: var(--t-rose-bg); --tone: var(--t-rose); }
.t-danger { --tone-bg: var(--t-coral-bg); --tone: var(--t-coral); }
.t-success { --tone-bg: var(--t-green-bg); --tone: var(--t-green); }
.t-progress { --tone-bg: var(--t-blue-bg); --tone: var(--t-blue); }
.t-muted, .t-ready { --tone-bg: var(--t-slate-bg); --tone: var(--t-slate); }
.page-calendar { gap: 14px; --cal-bar-h: 56px; }
/* ‹ Сегодня ›, the days shown and the views stay on top while the days scroll. */
.cal-sticky {
  position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top)); z-index: 22; margin: -8px calc(-1 * clamp(16px, 3vw, 36px)) -4px;
  padding: 8px clamp(16px, 3vw, 36px); background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: saturate(1.3) blur(8px); -webkit-backdrop-filter: saturate(1.3) blur(8px);
}
.cal-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 40px; }
.cal-nav { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.cal-nav .tool-line { width: 34px; height: 34px; }
.cal-today { min-height: 34px; }
.cal-title { margin: 0 0 0 4px; font-size: 17px; font-weight: var(--fw-strong); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cal-title::first-letter { text-transform: uppercase; }
.cal-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-filters .chips { flex-wrap: wrap; overflow: visible; }
.cal-filters .chip { height: 32px; }
.cal-filters .select { height: 34px; font-size: 13px; }
.cal-filters-btn { position: relative; }
.cal-filters-btn.is-set { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }
.cal-filters-count { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font-size: 10.5px; font-weight: var(--fw-semi); }
.cal-sheet-filters { display: grid; gap: 18px; }
.cal-sheet-filters .sheet-section > :not(.sheet-label) { justify-self: start; }
.cal-sheet-filters .chips { flex-wrap: wrap; overflow: visible; }
.cal-sheet-filters .select, .cal-sheet-filters .check { width: 100%; }
.cal-body { display: grid; gap: 14px; min-width: 0; }

/* A release: a plaque on the soft fill of its state; its picture with a small badge when it is to be made again. */
.rel {
  display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--text); text-decoration: none; border-radius: var(--radius-sm);
  background: var(--tone-bg, var(--surface-2)); font-size: 12px; line-height: 1.25; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.rel:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--tone, var(--border-strong)); }
.rel:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-radius: var(--radius-sm); }
.rel[draggable="true"] { cursor: grab; }
.rel.is-moving { opacity: 0.55; }
.rel-thumb { position: relative; flex: none; width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; background: var(--surface-3); color: var(--faint); }
.rel-thumb img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.rel-thumb > .icon { width: 13px; height: 13px; }
.rel-thumb.is-none { color: var(--t-rose); background: var(--surface); outline: 1px dashed var(--t-rose); outline-offset: -1px; }
.rel-badge { position: absolute; right: -4px; bottom: -4px; width: 13px; height: 13px; display: grid; place-items: center; border-radius: 50%; background: var(--t-amber); color: var(--on-tint); box-shadow: 0 0 0 1.5px var(--surface); }
.rel-badge .icon { width: 9px; height: 9px; stroke-width: 3; }
.rel-glyph { flex: none; width: 12px; height: 12px; color: var(--tone); }
.rel-time { flex: none; font-size: 11.5px; font-weight: var(--fw-semi); color: var(--tone, var(--muted)); font-variant-numeric: tabular-nums; }
.rel-market { flex: none; padding: 1px 4px; border-radius: 4px; font-size: 9.5px; font-weight: var(--fw-semi); letter-spacing: 0.03em; }
.rel-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); }
.rel-flag { flex: none; width: 12px; height: 12px; color: var(--t-amber); }
.rel--line { height: 28px; padding: 3px 6px 3px 3px; }
/* At two weeks: the picture with the time and signs beside it, the start of the title under them. */
.rel--card { flex-direction: column; align-items: stretch; gap: 5px; padding: 3px; }
.rel--card .rel-badge { right: -3px; bottom: -3px; width: 12px; height: 12px; }
.rel-top { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.rel--card .rel-thumb { width: 28px; height: 28px; border-radius: 5px; }
.rel-meta { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.rel-signs { display: flex; align-items: center; gap: 3px; min-height: 12px; }
.rel--card .rel-title { font-size: 11.5px; }
/* A picture as wide as the day gives, and its time under it. */
.rel--thumb { flex-direction: column; gap: 2px; padding: 3px 2px 2px; }
.rel--thumb .rel-thumb { width: clamp(22px, calc(var(--day-w, 40px) - 14px), 44px); height: clamp(22px, calc(var(--day-w, 40px) - 14px), 44px); }
.rel--thumb .rel-time { font-size: 10px; }
.rel--dot { height: 12px; display: grid; place-items: center; background: none; border-radius: 3px; }
.rel--dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tone); }
.rel--dot.g-none::before { background: transparent; box-shadow: inset 0 0 0 2px var(--tone); }
.rel--dot:hover { box-shadow: none; background: var(--tone-bg); }

/* The month on a computer: thin lines, today softly lit, past days muted, weekends a shade apart, another month greyed. */
.month { min-width: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); }
.cal-dow { padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: 12px; font-weight: var(--fw-medium); color: var(--muted); }
.cal-dow::first-letter { text-transform: uppercase; }
.cal-dow.is-weekend { color: var(--faint); }
.cal-day {
  container-type: inline-size; position: relative; min-width: 0; min-height: 124px; padding: 6px 6px 8px; display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface);
}
.cal-grid > :nth-child(7n) { border-right: 0; }
.cal-grid > .cal-day:nth-last-child(-n + 7) { border-bottom: 0; }
.cal-day.is-weekend { background: var(--day-weekend); }
.cal-day.is-other { background: var(--day-other); }
.cal-day.is-other .cal-num { color: var(--faint); }
.cal-day.is-other .rel { opacity: 0.6; }
.cal-day.is-past:not(.is-other) .cal-num { color: var(--faint); }
.cal-day.is-today { background: var(--day-today); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent); }
.cal-day.is-today .cal-num { background: var(--brand); color: var(--on-brand); }
.cal-day-head { display: flex; align-items: center; gap: 6px; min-height: 26px; min-width: 0; }
.cal-num { flex: none; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 99px; display: inline-grid; place-items: center; font-size: 12.5px; font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.cal-holiday { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: 11.5px; font-weight: var(--fw-medium); color: var(--muted); }
.cal-holiday .icon { flex: none; width: 13px; height: 13px; color: var(--star); }
.cal-holiday-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-add { position: absolute; top: 4px; right: 4px; z-index: 1; opacity: 0; transition: opacity 0.15s; background: var(--surface); }
.cal-day:hover .cal-add, .cal-add:focus-visible { opacity: 1; }
.cal-day-items { display: grid; gap: 3px; min-width: 0; }
.cal-more { align-self: flex-start; padding: 2px 6px; border: 0; border-radius: 6px; background: none; font-size: 12px; font-weight: var(--fw-semi); color: var(--brand-strong); }
.cal-more:hover { background: var(--brand-soft); }
/* A narrow day keeps the picture and the time; the market, then the title give way. */
@container (max-width: 136px) { .rel--line .rel-market { display: none; } }
@container (max-width: 108px) { .rel--line .rel-title, .cal-holiday-name { display: none; } }
@container (max-width: 76px) { .rel--line .rel-glyph, .rel--line .rel-flag { display: none; } .rel--line { padding-right: 3px; } }

/* Moving a release: the days it may go to are outlined, the others hatched; the day under it is lit. */
.month.is-dragging .cal-day.is-target, .scale.is-dragging .scale-day.is-target { outline: 2px dashed color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: -4px; }
.month.is-dragging .cal-day:not(.is-target), .scale.is-dragging .scale-day:not(.is-target) { background-image: var(--day-hatch); }
.scale[data-dragging="ME"] .scale-day:not([data-market="ME"]), .scale[data-dragging="RS"] .scale-day:not([data-market="RS"]) { background-image: var(--day-hatch); outline: none; }
.cal-day.is-drop, .scale-day.is-drop { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }

/* The month on a phone: a compact grid with a dot per release; the chosen day's releases below it. */
.mcal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); touch-action: pan-y; }
.mcal-dow { padding: 2px 0 4px; text-align: center; font-size: 11px; font-weight: var(--fw-medium); color: var(--muted); }
.mcal-dow.is-weekend { color: var(--faint); }
.mcal-day { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0; min-height: 50px; padding: 4px 0 5px; border: 0; border-radius: 8px; background: none; color: var(--text); }
.mcal-day.is-weekend { background: var(--day-weekend); }
.mcal-day.is-other { color: var(--faint); background: none; }
.mcal-day.is-other .mcal-dots { opacity: 0.5; }
.mcal-day.is-past:not(.is-other) .mcal-num { color: var(--muted); }
.mcal-num { width: 30px; height: 26px; display: grid; place-items: center; border-radius: 99px; font-size: 14px; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.mcal-day.is-today .mcal-num { background: var(--brand); color: var(--on-brand); font-weight: var(--fw-semi); }
.mcal-day.is-chosen { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand); }
.mcal-day.has-holiday::after { content: ""; position: absolute; top: 4px; right: calc(50% - 19px); width: 6px; height: 6px; border-radius: 50%; background: var(--star); }
.mcal-dots { display: flex; justify-content: center; align-items: center; gap: 3px; min-height: 6px; }
.mcal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tone); }
.mcal-plus { font-style: normal; font-size: 10px; line-height: 6px; font-weight: var(--fw-semi); color: var(--muted); }
.mday { display: grid; gap: 10px; margin-top: 14px; }
.mday-head { display: flex; align-items: flex-start; gap: 10px; }
.mday-title { margin: 0; font-size: 16px; font-weight: var(--fw-strong); }
.mday-holiday { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.mday-holiday .icon { color: var(--star); }
.mday-empty { margin: 0; padding: 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius-card); text-align: center; color: var(--muted); }

/* A release as a row: a phone's day, the agenda. The strip on its left is its state's colour, the pill says it. */
.agenda { display: grid; gap: 16px; }
.agenda-day { display: grid; gap: 8px; }
.agenda-date { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: var(--fw-semi); color: var(--muted); }
.agenda-date > span:first-child::first-letter { text-transform: uppercase; }
.agenda-day.is-today .agenda-date { color: var(--brand-strong); }
.agenda-today { padding: 1px 8px; border-radius: 99px; background: var(--brand-soft); color: var(--brand-strong); font-size: 11.5px; }
.agenda-list { display: grid; gap: 8px; }
.rel-row {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 10px; border: 1px solid var(--border); border-left: 3px solid var(--tone, var(--border)); border-radius: var(--radius-card);
  background: var(--surface); color: var(--text); text-decoration: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.rel-row:hover { text-decoration: none; border-color: var(--border-strong); border-left-color: var(--tone, var(--border-strong)); }
.rel-row .rel-thumb { width: 44px; height: 55px; border-radius: 6px; }
.rel-row .rel-thumb > .icon { width: 18px; height: 18px; }
.rel-row .rel-badge { width: 16px; height: 16px; }
.rel-row-body { display: grid; gap: 4px; min-width: 0; flex: 1; }
.rel-row-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--muted); }
.rel-row-meta .rel-time { font-size: 13px; }
.rel-row-title { font-size: 14px; font-weight: var(--fw-semi); line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rel-row-state { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rel-row-state .grade-chip { margin-top: 0; }
.rel-row-wrap { display: grid; gap: 6px; }
.rel-row-action { display: flex; justify-content: flex-end; }

/* The timeline on a computer: the lanes of the markets, the weeks over them, a line at "now". */
.scale { position: relative; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; scroll-margin-top: calc(var(--topbar-h) + var(--cal-bar-h) + 8px); }
.scale-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; outline: none; }
.scale-grid { position: relative; display: grid; grid-template-rows: 28px minmax(46px, auto); grid-auto-rows: auto; width: max-content; transition: opacity 0.2s; }
.scale-grid.is-loading .scale-week { opacity: 0.55; }
.scale-corner, .scale-lane { position: sticky; left: 0; z-index: 3; background: var(--surface); border-right: 1px solid var(--border-strong); }
.scale-corner { display: flex; align-items: flex-end; padding: 6px 10px 8px; border-bottom: 1px solid var(--border); font-size: 11px; line-height: 1.3; color: var(--muted); }
.scale-month { min-width: 0; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border-strong); background: var(--surface-2); }
.scale-month span { position: sticky; left: calc(var(--lane-w) + 8px); display: inline-block; padding: 6px 8px; font-size: 12px; font-weight: var(--fw-semi); white-space: nowrap; }
.scale-month span::first-letter { text-transform: uppercase; }
.scale-dayhead { position: relative; min-width: 0; display: grid; justify-items: center; align-content: center; padding: 4px 0; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); background: var(--surface); font-size: 11px; color: var(--muted); }
.scale-dayhead.is-weekend { background: var(--day-weekend); }
.scale-dayhead.is-first { border-left-color: var(--border-strong); }
.scale-dayhead.is-today { background: var(--brand-soft); color: var(--brand-strong); }
.scale-dow { font-size: 10.5px; }
.scale-dow::first-letter { text-transform: uppercase; }
.scale-num { min-width: 22px; padding: 0 4px; border-radius: 99px; text-align: center; line-height: 20px; font-size: 12.5px; font-weight: var(--fw-semi); color: var(--text); font-variant-numeric: tabular-nums; }
.scale-dayhead.is-past .scale-num { color: var(--muted); }
.scale-dayhead.is-today .scale-num { background: var(--brand); color: var(--on-brand); }
.scale-holiday { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; padding: 0 3px; font-size: 10.5px; color: var(--muted); }
.scale-holiday .icon { flex: none; width: 11px; height: 11px; color: var(--star); }
.scale-holiday-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-dot .scale-dayhead { align-content: end; padding-bottom: 4px; }
.is-dot .scale-num { min-width: 0; padding: 0; font-size: 9.5px; line-height: 14px; }
.is-dot .scale-dayhead:not(.is-monday):not(.is-today) .scale-num { visibility: hidden; }
.is-dot .scale-dayhead.is-today .scale-num { padding: 0 3px; }
.scale-lane { display: grid; align-content: start; gap: 6px; padding: 10px; border-bottom: 1px solid var(--border); }
.scale-lane .market-tag { justify-self: start; }
.scale-lane strong { font-size: 13px; font-weight: var(--fw-semi); line-height: 1.25; }
.scale-week { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 32px; padding: 4px 6px; border-left: 1px solid var(--border-strong); border-bottom: 1px dashed var(--border); overflow: hidden; }
.scale-week.is-below { background: color-mix(in srgb, var(--t-amber-bg) 75%, var(--surface)); }
.scale-week.is-above { background: color-mix(in srgb, var(--t-blue-bg) 75%, var(--surface)); }
.is-dot .scale-week { justify-content: center; padding: 4px 2px; }
.wk-chip { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 22px; padding: 0 8px; border-radius: 99px; background: var(--surface-3); color: var(--muted); font-size: 12px; font-weight: var(--fw-semi); white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent); }
.wk-chip .icon { width: 13px; height: 13px; }
.wk-chip.is-within { background: var(--t-green-bg); color: var(--t-green); }
.wk-chip.is-below { background: var(--t-amber-bg); color: var(--t-amber); }
.wk-chip.is-above { background: var(--t-blue-bg); color: var(--t-blue); }
.wk-chip.is-none { background: none; box-shadow: none; color: var(--faint); }
.is-dot .wk-chip { padding: 0 6px; }
.scale-day { position: relative; min-width: 0; min-height: 88px; display: flex; flex-direction: column; gap: 3px; padding: 4px 2px 8px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.is-card .scale-day { min-height: 136px; }
.is-thumb .scale-day { min-height: 112px; }
.is-dot .scale-day { min-height: 80px; gap: 1px; padding: 4px 0 6px; }
.scale-day.is-monday { border-left-color: var(--border-strong); }
.scale-day.is-weekend { background: var(--day-weekend); }
.scale-day.is-past { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.scale-day.wk-below { background: color-mix(in srgb, var(--t-amber-bg) 38%, var(--surface)); }
.scale-day.wk-above { background: color-mix(in srgb, var(--t-blue-bg) 38%, var(--surface)); }
.scale-day.is-today { background: var(--day-today); }
.scale-day.is-closed { background: var(--day-hatch), var(--surface); }
.scale-items { display: grid; gap: 3px; min-width: 0; }
.scale-more { align-self: center; min-width: 24px; height: 18px; padding: 0 6px; border: 0; border-radius: 99px; background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: var(--fw-semi); }
.scale-more:hover { color: var(--text); }
.scale-add { position: absolute; right: 2px; bottom: 2px; width: 24px; height: 24px; opacity: 0; transition: opacity 0.15s; background: var(--surface); }
.is-thumb .scale-add { right: 50%; margin-right: -12px; }
.scale-day:hover .scale-add, .scale-add:focus-visible { opacity: 1; }
.scale-now { position: absolute; top: 28px; bottom: 0; z-index: 2; width: 2px; margin-left: -1px; background: var(--danger); pointer-events: none; }
.scale-now::before { content: ""; position: absolute; top: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* The timeline on a phone: the days down, a column per market; a week's heading with its counts. */
.vscale { display: grid; gap: 14px; scroll-margin-top: calc(var(--topbar-h) + var(--cal-bar-h) + 8px); }
.vscale.is-loading .vscale-tallies { opacity: 0.55; }
.vscale-lanes { position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top) + var(--cal-bar-h) - 6px); z-index: 6; display: grid; grid-template-columns: 40px repeat(var(--lanes), minmax(0, 1fr)); gap: 6px; padding: 6px 8px 6px 6px; margin: -6px 0 -8px; background: var(--bg); }
.vscale-lanes .market-tag { justify-content: center; }
.vscale-week { display: grid; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.vscale-weekhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.vscale-weekname { font-size: 13px; font-weight: var(--fw-semi); white-space: nowrap; }
.vscale-tallies { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.vscale-tally { display: inline-flex; align-items: center; gap: 4px; }
.vscale-tally-m { padding: 1px 4px; border-radius: 4px; font-size: 10px; font-weight: var(--fw-semi); }
.vscale-day { display: grid; grid-template-columns: 40px repeat(var(--lanes), minmax(0, 1fr)); gap: 6px; min-height: 42px; padding: 6px 8px 6px 6px; border-top: 1px solid var(--border); scroll-margin-top: calc(var(--topbar-h) + var(--cal-bar-h) + 40px); }
.vscale-weekhead + .vscale-day { border-top: 0; }
.vscale-day.is-weekend { background: var(--day-weekend); }
.vscale-day.is-today { background: var(--day-today); }
.vscale-date { display: grid; justify-items: center; align-content: start; line-height: 1.15; font-size: 11px; color: var(--muted); }
.vscale-dow::first-letter { text-transform: uppercase; }
.vscale-date b { font-size: 16px; font-weight: var(--fw-semi); color: var(--text); font-variant-numeric: tabular-nums; }
.vscale-day.is-past .vscale-date b { color: var(--muted); }
.vscale-day.is-today .vscale-date b { color: var(--brand-strong); }
.vscale-day.has-holiday .vscale-date { grid-row: span 2; }
.vscale-holiday { grid-column: 2 / -1; display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--muted); }
.vscale-holiday .icon { flex: none; width: 13px; height: 13px; color: var(--star); }
.vscale-cell { display: grid; align-content: start; gap: 4px; min-width: 0; }
.vscale .rel--card { min-height: 38px; }

/* The legend: the colours of the states, the marks of pictures and holidays, the weeks against the goal. */
.cal-legend { display: grid; gap: 8px; font-size: 12.5px; color: var(--muted); }
.cal-keys, .cal-marks, .cal-legend-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.cal-key { display: inline-flex; align-items: center; gap: 6px; }
.cal-key::before { content: ""; width: 18px; height: 12px; border-radius: 3px; background: var(--tone-bg); box-shadow: inset 3px 0 0 var(--tone); }
.cal-mark { display: inline-flex; align-items: center; gap: 6px; }
.cal-mark .rel-badge { position: static; box-shadow: none; }
.cal-mark-none { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px; color: var(--t-rose); outline: 1px dashed var(--t-rose); outline-offset: -1px; }
.cal-mark-none .icon { width: 11px; height: 11px; }
.cal-mark-holiday { display: inline-grid; }
.cal-mark-holiday .icon { width: 15px; height: 15px; color: var(--star); }
.cal-mark-closed { width: 18px; height: 12px; border-radius: 3px; background: var(--day-hatch), var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); }
.cal-mark-now { width: 2px; height: 14px; border-radius: 1px; background: var(--danger); }
.cal-mark .wk-chip { height: 20px; padding: 0 6px; }
.grade-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: var(--fw-semi); color: var(--t-amber); background: var(--t-amber-bg); }
.grade-chip .icon { width: 12px; height: 12px; }
/* The calendar on a phone: the bar with ‹ Сегодня › and the views stays on top, the days shown under it; filters in a sheet. */
@media (max-width: 760px) {
  .cal-sticky { margin: -10px calc(-1 * var(--gutter-r)) -6px calc(-1 * var(--gutter)); padding: 8px var(--gutter-r) 6px var(--gutter); }
  .cal-bar { gap: 6px; row-gap: 2px; }
  .cal-title { order: 9; flex-basis: 100%; margin: 0; font-size: 15px; }
  .cal-bar .seg button { min-width: 38px; padding: 0 9px; }
  .cal-today { padding: 0 10px; }
  .cal-legend { font-size: 12px; }
  .scale { border-radius: var(--radius-card); }
  .page-calendar .page-head { gap: 10px; }
}
@media (max-width: 360px) {
  .cal-today { padding: 0 8px; }
  .cal-bar .seg button { min-width: 34px; padding: 0 7px; }
  .mcal-num { width: 26px; font-size: 13px; }
}
/* a release looked at without opening it: next to it on hover or focus, in a sheet on a touch screen (planPreview.js) */
.plan-preview { position: fixed; z-index: 65; width: 300px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: hidden; pointer-events: none;
  display: grid; align-content: start; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-lift); animation: pop-in 0.14s ease-out; }
.plan-preview.is-sheet { position: static; z-index: auto; width: auto; max-width: none; max-height: none; overflow: visible; pointer-events: auto; gap: 12px; background: none; border: 0; border-radius: 0; box-shadow: none; animation: none; }
.pv-media { width: 100%; aspect-ratio: 4 / 5; max-height: min(375px, 52vh); overflow: hidden; background: var(--surface-3); }
.pv-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv-media.is-loading { background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.pv-media.is-empty { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 10px, var(--surface-3) 10px, var(--surface-3) 20px); }
.plan-preview.is-sheet .pv-media { width: min(100%, 320px); justify-self: center; border-radius: var(--radius-card); max-height: 46vh; }
/* A story or a reel (2.18): its 9:16 picture whole in the middle of a dark band, like a phone screen; a reel with ▶. */
.pv-media.is-vertical { position: relative; display: flex; justify-content: center; align-items: center; aspect-ratio: auto; height: min(340px, 50vh); background: #1c2128; }
.pv-media.is-vertical img { width: auto; height: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.pv-media.is-vertical.is-empty { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 10px, var(--surface-3) 10px, var(--surface-3) 20px); }
.plan-preview.is-sheet .pv-media.is-vertical { width: min(100%, 320px); height: min(420px, 50vh); max-height: none; }
.pv-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(14, 22, 30, 0.6); color: #fff; }
.pv-play .icon { width: 20px; height: 20px; margin-left: 2px; }
.pv-none { height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 12px; text-align: center; color: var(--faint); font-weight: var(--fw-semi); font-size: 13px; }
.pv-none .icon { width: 28px; height: 28px; }
.pv-body { display: grid; gap: 6px; padding: 12px 14px 14px; min-width: 0; }
.plan-preview.is-sheet .pv-body { padding: 0; }
.pv-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; font-weight: var(--fw-semi); color: var(--muted); }
.pv-title { font-size: 14.5px; font-weight: var(--fw-strong); line-height: 1.3; overflow-wrap: anywhere; }
.pv-text { margin: 0; max-height: 9.5em; overflow: hidden; font-size: 13px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; color: var(--text); }
.plan-preview.is-sheet .pv-text { max-height: none; }
.pv-text.is-empty { color: var(--faint); }
.pv-where { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--muted); }
.plan-preview .image-model { margin: 0; }
.pv-redo { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; font-weight: var(--fw-semi); line-height: 1.35; color: var(--t-amber); background: var(--t-amber-bg); }
.pv-redo .icon { flex: none; width: 14px; height: 14px; margin-top: 1px; }
@media (prefers-reduced-motion: reduce) { .plan-preview, .rh-tip { animation: none; } .rhythm, .rh-area { transition: none; } }
/* High contrast: the bars and their fills are the data, they keep their colours. */
@media (forced-colors: active) { .rh-seg, .rh-swatch, .rh-goal, .rh-key { forced-color-adjust: none; } }

/* ---------- published ---------- */
.post { display: flex; flex-direction: column; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); overflow: hidden; min-width: 0; }
.post-media { aspect-ratio: 1; background: var(--surface-3); position: relative; }
.post-media img, .post-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-body { padding: 12px 14px 14px; display: grid; gap: 8px; }
.post-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); font-weight: var(--fw-semi); flex-wrap: wrap; }
.post-caption { margin: 0; font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.date-range { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.date-range .input { width: auto; min-height: 40px; padding: 6px 10px; }

/* ---------- review ---------- */
.review-list { display: grid; gap: 12px; }
.review-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.review-item img, .review-item .ph { width: 72px; height: 72px; border-radius: var(--radius-card); object-fit: cover; background: var(--surface-3); }
.review-item h3 { margin: 0; font-size: 15px; font-weight: var(--fw-strong); }
.review-item p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }

/* ---------- connections ---------- */
.connections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.conn-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
.conn-row:first-of-type { border-top: 0; }
.conn-row p { margin: 0; font-size: 13px; color: var(--muted); }
.conn-problem { margin: 0 0 8px; color: var(--danger); font-size: 13px; overflow-wrap: anywhere; }
.sync-auto { margin: 10px 0 0; gap: 6px; align-items: flex-start; font-size: 13.5px; color: var(--muted); }
.sync-auto .icon { flex: none; margin-top: 2px; }
.sync-note { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.progress { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.progress i { display: block; height: 100%; width: var(--w, 0%); background: var(--brand); border-radius: inherit; transition: width 0.4s; }

/* ---------- dialogs, sheets, menus ---------- */
dialog.sheet {
  width: min(560px, calc(100vw - 32px)); max-height: min(88vh, 860px); max-height: min(88dvh, 860px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface);
  color: var(--text); box-shadow: var(--shadow-lift); overflow: hidden;
}
dialog.sheet-wide { width: min(880px, calc(100vw - 32px)); }
dialog.sheet::backdrop { background: var(--backdrop); backdrop-filter: blur(3px); }
dialog.sheet[open] { animation: pop-in 0.18s ease-out; display: flex; flex-direction: column; }
.sheet-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 10px 22px; }
.sheet-grab { display: none; }
.sheet-head .grow { display: grid; gap: 4px; }
.sheet-head h2 { margin: 0; font-size: 19px; font-weight: var(--fw-strong); letter-spacing: -0.01em; }
.sheet-head p { margin: 0; color: var(--muted); font-size: 14px; }
/* Rows as tall as their content (2.13.1): a sheet taller than the screen scrolls instead of squeezing a block that clips
   its content (the profile's list of Подключения, Горячие клавиши… was 22 px high on a phone). */
.sheet-body { padding: 8px 22px 18px; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; gap: 14px; }
.sheet-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 14px 22px 18px; border-top: 1px solid var(--border); background: var(--surface-2); }
@keyframes pop-in { from { opacity: 0; transform: translateY(6px) scale(0.99); } }
.menu {
  position: fixed; z-index: 60; min-width: 230px; max-width: calc(100vw - 24px); padding: 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-lift); animation: pop-in 0.14s ease-out; display: grid;
}
.menu-item {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 10px; border-radius: 8px; border: 0; background: none; text-align: left; color: var(--text);
  font-weight: var(--fw-semi); font-size: 14px; text-decoration: none; width: 100%;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-3); text-decoration: none; outline: none; }
.menu-item .icon { color: var(--muted); width: 18px; height: 18px; }
.menu-item.danger { color: var(--danger); }
.menu-item.danger .icon { color: var(--danger); }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--border); }
.profile-head { display: flex; align-items: center; gap: 14px; }
.profile-head h2 { margin: 0; font-size: 19px; }
.profile-head p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.sheet-section { display: grid; gap: 8px; }
.sheet-label { font-size: 12px; font-weight: var(--fw-strong); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.menu-list { display: grid; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.menu-list .menu-item { border-radius: 0; min-height: 50px; border-top: 1px solid var(--border); padding: 0 14px; }
.menu-list .menu-item:first-child { border-top: 0; }
.menu-list .menu-item .icon:first-child { color: var(--brand); }
.menu-list .menu-item .trail { margin-left: auto; color: var(--faint); }

/* command palette */
dialog.palette { width: min(640px, calc(100vw - 24px)); margin-top: 10vh; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lift); overflow: hidden; }
dialog.palette::backdrop { background: var(--backdrop); backdrop-filter: blur(3px); }
.palette-input { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.palette-input input { flex: 1; height: 58px; border: 0; background: none; font-size: 17px; font-weight: var(--fw-medium); outline: none; }
.palette-input .icon { color: var(--faint); }
.palette-list { max-height: min(60vh, 520px); overflow-y: auto; padding: 8px; display: grid; gap: 2px; }
.palette-group { padding: 8px 10px 4px; font-size: 11.5px; font-weight: var(--fw-strong); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.palette-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; border: 0; background: none; text-align: left; width: 100%; color: var(--text); }
.palette-item[aria-selected="true"] { background: var(--brand-soft); }
.palette-item .grow { display: grid; gap: 1px; }
.palette-item strong { font-size: 14.5px; font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item .palette-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); flex: none; overflow: hidden; }
.palette-item .palette-icon img { width: 100%; height: 100%; object-fit: cover; }
.palette-item .palette-star { width: 15px; height: 15px; color: var(--star); flex: none; }
.palette-foot { display: flex; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--faint); font-weight: var(--fw-semi); background: var(--surface-2); }

/* toasts & update banner */
.toasts { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(460px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 16px; border-radius: 12px; background: var(--inv-bg); color: var(--inv-text); font-size: 14px; font-weight: var(--fw-medium); box-shadow: var(--shadow-lift); animation: pop-in 0.18s ease-out; width: 100%; }
.toast .icon { color: var(--inv-accent); }
.toast.is-error .icon { color: var(--inv-danger); }
.toast-text { flex: 1; }
.toast-action { border: 0; background: var(--inv-accent); color: var(--inv-on-accent); font-weight: var(--fw-semi); border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.update-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-strong); font-weight: var(--fw-semi); }
.update-bar span { flex: 1; }
.banner-demo { display: flex; align-items: center; gap: 10px; padding: 8px var(--gutter-r) 8px var(--gutter); background: var(--warn-soft); color: var(--warn); font-weight: var(--fw-semi); font-size: 13.5px; }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  /* Two columns: on the left the image, the text right under it, its preview, the prompt and stories; publishing,
     the numbers and the history beside the image. */
  .editor-grid { grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); }
  .editor-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .editor-main > .editor-col { display: contents; }
  .p-media { order: 1; } .p-text { order: 2; } .p-preview { order: 3; } .p-prompt { order: 4; } .p-story { order: 5; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The side menu with only its icons (2.10): chosen at its foot or with «[», or a narrow window unless chosen otherwise
   (app.js puts html.nav-rail; never on a phone, where the menu slides out with its names). The groups' names give way
   to a thin line between them. */
html.nav-rail { --sidebar-w: 72px; }
html.nav-rail .sidebar { padding: 14px 10px 10px; align-items: center; }
html.nav-rail .sidebar-top { justify-content: center; }
html.nav-rail .sidebar .brand { flex: none; padding: 2px 0 14px; }
html.nav-rail .sidebar .brand-name, html.nav-rail .account-info, html.nav-rail .sidebar-version { display: none; }
html.nav-rail .nav-label { width: 32px; height: 1px; margin: 10px auto; padding: 0; overflow: hidden; color: transparent; background: var(--border); }
html.nav-rail .sidebar-top + .nav-label { display: none; }
html.nav-rail .nav-item { justify-content: center; padding: 0; width: 48px; min-height: 44px; position: relative; }
html.nav-rail .nav-item span:not(.badge) { display: none; }
html.nav-rail .nav-item .badge { position: absolute; top: 3px; right: 1px; margin: 0; height: 17px; min-width: 17px; font-size: 10px; padding: 0 5px; }
html.nav-rail .account { justify-content: center; padding: 12px 0 4px; }
@media (max-width: 1080px) {
  .home-grid, .accounts, .connections { grid-template-columns: minmax(0, 1fr); }
  .top-search .kbd { display: none; }
}
@media (max-width: 860px) {
  /* One column: the image first, then publishing (and its check), the text and its preview, the prompt, stories,
     the numbers and the history. */
  .editor-grid { grid-template-columns: minmax(0, 1fr); }
  .editor-main, .editor-grid > .editor-col { display: contents; }
  .p-media { order: 1; } .p-review { order: 2; } .p-pub { order: 3; } .p-text { order: 4; } .p-preview { order: 5; }
  .p-prompt { order: 6; } .p-story { order: 7; } .p-metrics { order: 8; } .p-history { order: 9; }
}
@media (max-width: 760px) {
  :root { --topbar-h: 56px; }
  .shell { display: block; }
  /* The side menu slides out from the left (2.10): ☰, «Ещё» or a swipe; it follows the finger while pulled (nav-drag). */
  .sidebar {
    position: fixed; z-index: 55; top: 0; bottom: 0; left: 0; width: min(86vw, 320px); height: 100dvh; gap: 2px;
    padding: calc(12px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overscroll-behavior: contain; box-shadow: 0 0 40px rgba(0, 0, 0, 0.28);
    transform: translateX(-105%); visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }
  html.nav-open .sidebar { transform: none; visibility: visible; transition: transform 0.22s ease; }
  html.nav-drag .sidebar { transition: none; visibility: visible; }
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 54; background: var(--backdrop); animation: window-in 0.2s ease; }
  .nav-scrim[hidden] { display: none; }
  html.nav-drag .nav-scrim { animation: none; }
  html.nav-open, html.nav-open body { overflow: hidden; }
  .sidebar .brand { padding: 2px 4px 12px; }
  .sidebar-x { display: inline-grid; }
  .nav-rail-toggle { display: none; }
  .sidebar .nav-item { min-height: 44px; font-size: 15px; }
  .sidebar-foot .nav-item { min-height: 40px; font-size: 14px; }
  .nav-burger { margin-left: -8px; }
  .main { padding: 18px var(--gutter-r) calc(96px + env(safe-area-inset-bottom)) var(--gutter); }
  .topbar { padding: env(safe-area-inset-top) var(--gutter-r) 0 var(--gutter); gap: 8px; }
  .topbar .brand { display: flex; gap: 9px; }
  .topbar .brand-name strong { font-size: 16px; }
  .topbar .brand-name small { display: none; }
  .crumbs, .top-search, .top-create { display: none; }
  .top-actions { margin-left: auto; }
  .only-phone { display: inline-grid !important; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 6px var(--gutter-r) calc(6px + env(safe-area-inset-bottom)) var(--gutter); background: var(--glass); backdrop-filter: saturate(1.5) blur(18px);
    border-top: 1px solid var(--border);
  }
  .tab-item { display: grid; justify-items: center; gap: 2px; padding: 6px 0; border-radius: 10px; color: var(--muted); font-size: 11px; font-weight: var(--fw-semi); text-decoration: none; border: 0; background: none; position: relative; }
  .tab-item:hover { text-decoration: none; }
  .tab-item[aria-current="page"] { color: var(--brand-strong); background: var(--brand-soft); }
  .tab-item .icon { width: 23px; height: 23px; }
  .tab-item .badge { position: absolute; top: 0; left: calc(50% + 6px); height: 17px; min-width: 17px; font-size: 10px; padding: 0 5px; }
  .fab {
    display: grid; place-items: center; position: fixed; right: var(--gutter-r); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 41; width: 54px; height: 54px; border-radius: var(--radius-card);
    border: 0; background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-lift);
  }
  .fab .icon { width: 26px; height: 26px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 14px; }
  .kpi-value { font-size: 26px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .concept-body { padding: 10px; }
  .concept-title { font-size: 14px; }
  .variant { height: 26px; padding: 0 7px 0 6px; font-size: 11.5px; }
  .channel-line { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 0.8fr)); font-size: 13px; }
  .rhythm { --rh-plot: 170px; }
  .rh-year.is-near { display: none; }
  .rh-table { font-size: 13px; }
  .rh-table th, .rh-table td { padding: 8px 5px; }
  .rh-table tbody th { hyphens: auto; }
  .rh-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rh-code { display: inline; }
  .insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  dialog.sheet { width: 100vw; max-width: 100vw; max-height: 92vh; max-height: 92dvh; margin: auto 0 0; border-radius: var(--radius-card) 18px 0 0; border-bottom: 0; }
  /* The handle of a sheet from below (2.10): it and the head pull the sheet down to close it. */
  .sheet-grab { display: block; flex: none; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--border-strong); }
  .sheet-grab, .sheet-head { touch-action: none; }
  .sheet-grab + .sheet-head { padding-top: 10px; }
  dialog.sheet[open] { animation: sheet-up 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .sheet-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .sheet-foot .btn { flex: 1; }
  .review-item { grid-template-columns: 56px minmax(0, 1fr); }
  .review-item img, .review-item .ph { width: 56px; height: 56px; }
  .review-item > :last-child { grid-column: 1 / -1; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .savebar { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .caption-box .textarea { min-height: 260px; }
  .page-head { align-items: flex-start; }
  .page-actions .btn-label { display: none; }
  .hide-phone { display: none !important; }
  /* 16 px in fields: a phone does not zoom the page in when one gets the cursor. */
  .input, .textarea, .select, .search input { font-size: 16px; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0.4; } }

/* grids never grow wider than the screen: wide tables scroll inside their frame */
.page, .cal-body { grid-template-columns: minmax(0, 1fr); }
.savebar-slot { position: sticky; bottom: 16px; z-index: 20; }
.savebar-slot:empty { display: none; }
.rework-strip { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--t-amber-bg); }
.rework-strip.is-fixed { background: var(--t-green-bg); }
/* The mark on a tile names itself ("На переделке: картинка"), then the note. */
.rework-strip-title { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; font-size: 13px; font-weight: var(--fw-strong); color: var(--t-amber); }
.rework-strip.is-fixed .rework-strip-title { color: var(--t-green); }
.rework-strip-title .icon { flex: none; }
.rework-strip-title span { min-width: 0; overflow-wrap: anywhere; }
.rework-strip-note { margin: 0; font-size: 13px; font-weight: var(--fw-medium); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rework-strip small { color: var(--muted); font-size: 12px; }
.publish-summary { margin: 0; font-weight: var(--fw-strong); }
.rework-wait { margin: 0; }

/* ---------- states in people's words: one palette for pills, dots, market lines and calendar strips ---------- */
.pill.t-muted { background: var(--t-slate-bg); color: var(--t-slate); }
.pill.t-ready { background: var(--t-teal-bg); color: var(--t-teal); }
.pill.t-warning { background: var(--t-amber-bg); color: var(--t-amber); }
.pill.t-plan { background: var(--t-violet-bg); color: var(--t-violet); }
/* in the plan, but still without its post image: it neither goes out nor can be approved */
.pill.t-image { background: var(--t-rose-bg); color: var(--t-rose); }
.pill.t-progress { background: var(--t-blue-bg); color: var(--t-blue); }
.pill.t-progress::before { animation: pulse 1.2s ease-in-out infinite; }
.pill.t-success { background: var(--t-green-bg); color: var(--t-green); }
.pill.t-danger { background: var(--t-coral-bg); color: var(--t-coral); }
.dot.t-muted { background: var(--faint); }
.dot.t-ready { background: var(--t-teal); }
.dot.t-warning { background: var(--t-amber); }
.dot.t-plan { background: var(--t-violet); }
.dot.t-image { background: var(--t-rose); }
.dot.t-progress { background: var(--t-blue); animation: pulse 1.2s ease-in-out infinite; }
.dot.t-success { background: var(--t-green); }
.dot.t-danger { background: var(--t-coral); }
.state-btn { display: inline-flex; align-items: center; gap: 4px; border: 0; padding: 0; background: none; color: var(--faint); cursor: pointer; border-radius: 999px; }
.state-btn:hover { color: var(--text); }
.state-btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.popover { width: min(340px, calc(100vw - 16px)); padding: 14px; }
.explain { display: grid; gap: 8px; justify-items: start; }
.explain p { margin: 0; font-size: 14px; }
.explain dl { margin: 0; display: grid; gap: 2px; }
.explain dt { font-size: 12px; font-weight: var(--fw-strong); color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 6px; }
.explain dd { margin: 0; font-size: 14px; }
.legend-list { display: grid; gap: 4px; }
.legend-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: start; padding: 10px 0; border-top: 1px solid var(--border); }
.legend-row:first-child { border-top: 0; }
.legend-row .pill { justify-self: start; }
.legend-row p { margin: 0; }
.chips-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chips-row .chips { flex: 1; min-width: 0; }
@media (min-width: 761px) { .chips-row .chips { flex-wrap: wrap; overflow: visible; } }
.chip.chip-alert { border-color: var(--t-amber); }
.chip.chip-alert .count { color: var(--t-amber); }
.chip.chip-alert[aria-pressed="true"] .count { color: inherit; }

/* tiles: one line per published market, the rework flag, the publish button */
.market-lines { display: grid; gap: 6px; }
.market-line { display: flex; align-items: center; gap: 8px; min-width: 0; color: inherit; border-radius: 10px; }
.market-line:hover { text-decoration: none; }
.market-line:hover .pill { box-shadow: 0 0 0 2px var(--border-strong); }
.market-line .pill { min-width: 0; max-width: 100%; overflow: hidden; }
.market-line.is-dim { opacity: 0.45; }
.market-line-quiet small { color: var(--faint); font-weight: var(--fw-semi); font-size: 12px; }
.market-line .market-tag { flex: none; }
.line-flag { color: var(--t-amber); display: inline-flex; }
.line-flag .icon { width: 15px; height: 15px; }
.concept.has-rework { border-color: var(--t-amber); box-shadow: 0 0 0 1px var(--t-amber); }
.rework-flag {
  position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; width: fit-content; max-width: calc(100% - 20px);
  min-height: 28px; padding: 4px 10px; border-radius: 10px; font-size: 12.5px; font-weight: var(--fw-strong); background: var(--t-amber); color: var(--on-tint); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}
.rework-flag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rework-flag .flag-short { display: none; }
.rework-flag.is-fixed { background: var(--t-green); }
.rework-flag .icon { width: 15px; height: 15px; flex: none; }
.concept-publish { margin-top: 2px; }
.cell-sub { display: block; color: var(--muted); }
.cell-state:hover { text-decoration: none; }
.cell-rework { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--t-amber); min-width: 220px; max-width: 320px; }
.cell-rework span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cell-rework span { color: var(--text); }
.cell-rework .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; }
tr.has-rework td:first-child { box-shadow: inset 3px 0 0 var(--t-amber); }
.cell-actions { white-space: nowrap; text-align: right; }
.cell-actions > * + * { margin-left: 6px; }

/* the creative page: rework banner, prompt */
.rework-ask .icon { color: var(--t-amber); }
.rework-banner { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--radius-card); background: var(--t-amber-bg); border: 1px solid var(--t-amber); }
.rework-banner.is-fixed { background: var(--t-green-bg); border-color: var(--t-green); }
.rework-banner-head { display: flex; gap: 10px; align-items: center; }
.rework-banner-head .grow { display: grid; gap: 2px; }
.rework-banner-head strong { font-size: 15.5px; }
.rework-banner-head small { color: var(--muted); font-size: 12.5px; font-weight: var(--fw-medium); }
.rework-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--t-amber); color: var(--on-tint); flex: none; }
.rework-banner.is-fixed .rework-icon { background: var(--t-green); }
.rework-note { margin: 0; white-space: pre-wrap; font-size: 14.5px; }
.rework-fix { margin: 0; font-size: 14px; }
.rework-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rework-quote { padding: 12px 14px; border-left: 3px solid var(--t-amber); border-radius: 0 12px 12px 0; background: var(--t-amber-bg); }
.rework-quote p { margin: 6px 0 0; white-space: pre-wrap; }
.prompt { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.prompt-head { display: flex; align-items: center; gap: 8px; }
.prompt-title { display: inline-flex; align-items: center; gap: 8px; }
.prompt-title .icon { color: var(--t-violet); width: 18px; height: 18px; }
.prompt-text { white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; color: var(--text); background: var(--surface-2); border-radius: 12px; padding: 10px 12px; overflow-wrap: anywhere; }
.prompt-body.is-clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.prompt-area { min-height: 160px; font-size: 13.5px; line-height: 1.5; resize: vertical; }
.prompt-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prompt.is-empty .muted { margin: 0; font-size: 13.5px; }
.plan-box.plan-overdue, .plan-box.plan-failed { border-color: var(--t-coral); background: var(--t-coral-bg); }
.plan-box.plan-waiting { border-color: var(--t-amber); }
.plan-box.plan-noimage { border-color: var(--t-rose); border-style: dashed; }
.notice-image { background: var(--t-rose-bg); color: var(--t-rose); }

/* why a send did not go out: per platform, what to do, Meta's details */
.plan-box.plan-partial, .plan-box.plan-unknown { border-color: var(--t-coral); }
.failure-label { margin: 2px 0 0; font-size: 13px; font-weight: var(--fw-strong); color: var(--muted); }
.failure-list { display: grid; gap: 8px; }
.failure-item { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.failure-head { display: flex; gap: 8px; align-items: flex-start; }
.failure-head .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--danger); }
.failure-head strong { color: var(--danger); overflow-wrap: anywhere; }
.failure-item.is-unknown .failure-head strong, .failure-item.is-unknown .failure-head .icon { color: var(--warn); }
.failure-item p { margin: 0; }
.failure-meta summary { cursor: pointer; font-size: 13px; color: var(--muted); min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none; }
.failure-meta summary::-webkit-details-marker { display: none; }
.failure-meta summary::before { content: ''; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.15s; }
.failure-meta[open] summary::before { transform: rotate(90deg); }
.failure-meta p { margin: 4px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.failure-short, .table .failure-short { display: block; margin-top: 2px; color: var(--danger); font-size: 12px; overflow-wrap: anywhere; }
.bad-text, .channel small.bad-text { color: var(--danger); }

/* publish now: markets, destinations, the answer */
.sheet-publish .sheet-foot { justify-content: space-between; }
.sheet-publish .btn-publish { white-space: normal; text-align: left; }
.publish-market { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-card); }
.publish-market.is-blocked { opacity: 0.7; }
.publish-market-head { display: flex; align-items: center; gap: 8px; }
.publish-preview { display: flex; gap: 10px; align-items: flex-start; }
.publish-preview .thumb { width: 64px; height: 80px; border-radius: 10px; }
.publish-text { margin: 0; font-size: 13px; color: var(--muted); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.checks-stack { flex-direction: column; gap: 6px; }
.check.dest { align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); }
.check.dest .grow { display: grid; }
.check.dest small { font-size: 12px; }
.check.dest.is-off { opacity: 0.6; }
.good { color: var(--t-green); }
.warn-text { color: var(--t-amber); }
.empty-tight { padding: 8px 0; }
.facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; padding: 12px 14px; border-radius: var(--radius-card); background: var(--surface-2); }
.facts dt { color: var(--muted); font-weight: var(--fw-semi); }
.facts dd { margin: 0; font-weight: var(--fw-semi); }

/* to do */
.todo-detail { display: grid; gap: 4px; margin-top: 4px; }
.todo-detail p { margin: 0; }
.todo-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-self: center; }
section.is-focus > .section-title { color: var(--brand-strong); }

.row-link { display: block; min-width: 0; overflow: hidden; color: inherit; }
.row-link strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- ChatGPT and Codex: setup guide and the connection consent ---------- */
.page-guide { max-width: 860px; }
.guide-steps { margin: 4px 0 0; padding-left: 24px; display: grid; gap: 18px; }
.guide-steps > li { padding-left: 6px; }
.guide-steps > li::marker { color: var(--brand); font-weight: var(--fw-strong); }
.guide-steps strong { font-size: 15.5px; font-weight: var(--fw-strong); }
.guide-steps p { margin: 4px 0 10px; color: var(--muted); font-size: 14.5px; }
.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row .input { flex: 1; min-width: 0; }
.guide-more { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.guide-more summary { cursor: pointer; font-weight: var(--fw-strong); }
.guide-more p { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; }
.guide-quote { margin: 0 0 12px; padding: 14px 16px; border-left: 3px solid var(--brand); border-radius: 0 12px 12px 0; background: var(--surface-2); font-size: 15px; }
.guide-examples { margin: 14px 0; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); font-size: 14.5px; }
.guide-faq { margin: 0 0 12px; }
.guide-faq dt { font-weight: var(--fw-strong); margin-top: 14px; }
.guide-faq dt:first-child { margin-top: 0; }
.guide-faq dd { margin: 4px 0 0; color: var(--muted); font-size: 14.5px; }
.consent-card { width: min(100%, 520px); align-items: stretch; text-align: left; }
.consent-card > .brand-mark--lg, .consent-card > .eyebrow, .consent-card > .welcome-title { align-self: center; text-align: center; }
.consent-card > a.hint { align-self: center; }
.consent-card .welcome-lead { text-align: center; }
.consent-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; padding: 14px 16px; border-radius: var(--radius-card); background: var(--surface-2); font-size: 14.5px; }
.consent-facts dt { color: var(--muted); font-weight: var(--fw-semi); }
.consent-facts dd { margin: 0; font-weight: var(--fw-semi); overflow-wrap: anywhere; }
.consent-block { display: grid; gap: 8px; }
.consent-scopes { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.consent-scopes li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.consent-scopes .icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--success); }
.consent-scopes.is-omitted li { color: var(--muted); text-decoration: line-through; }
.consent-scopes.is-omitted .icon { color: var(--faint); }
.consent-actions { display: grid; gap: 8px; margin-top: 4px; }
@media (max-width: 520px) {
  .copy-row { flex-wrap: wrap; }
  .copy-row .btn { width: 100%; }
  .consent-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .consent-facts dd { margin-bottom: 8px; }
}
@media (max-width: 760px) {
  .stack > *, .cal-body > *, .page > * { min-width: 0; }
  .prompt-area { max-height: 40vh; }
  .legend-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .rework-flag { font-size: 12px; }
  .rework-flag .flag-long { display: none; }
  .rework-flag .flag-short { display: inline; }
  /* A narrow tile: the state wraps to a second line instead of losing its words. */
  .market-line .pill { height: auto; min-height: 26px; padding: 4px 9px; border-radius: 10px; white-space: normal; line-height: 1.2; }
  .market-line .pill-text { overflow: visible; }
  /* The same in "To do": a long state with its date wraps inside the row. */
  .review-item .pill { max-width: 100%; height: auto; min-height: 26px; padding: 4px 9px; border-radius: 10px; white-space: normal; line-height: 1.2; }
  .review-item .pill-text { overflow: visible; }
  .cell-rework { min-width: 180px; }
  .sheet-publish .sheet-foot { flex-direction: column-reverse; }
  .sheet-publish .sheet-foot .btn { width: 100%; }
  .toolbar { gap: 8px; }
  .toolbar .search { flex-basis: 100%; }
  .toolbar .select { flex: 1 1 0; min-width: 0; }
  .concept-kicker .grow { display: none; }
  .concept-media { aspect-ratio: 4 / 5; }
  .corner-btn { width: 30px; height: 30px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .topbar, .sidebar, .tabbar, .fab, .toasts { display: none !important; }
  .shell { display: block; }
}

/* images */
.image-by { margin: -4px 0 0; overflow-wrap: anywhere; }
.image-history-box { display: grid; gap: 12px; min-width: 0; }
.image-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.image-entry { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); min-width: 0; }
.image-entry.is-current { border-color: var(--brand); }
.image-thumb { width: 76px; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--surface-3); color: var(--faint); display: grid; place-items: center; text-align: center; align-self: start; }
.image-thumb.is-story { aspect-ratio: 9 / 16; }
.image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-thumb-missing { display: grid; justify-items: center; gap: 4px; padding: 6px; }
.image-thumb-missing small { font-size: 11px; font-weight: var(--fw-semi); line-height: 1.2; }
.image-entry-body { display: grid; gap: 6px; min-width: 0; align-content: start; }
.image-entry-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.image-entry .hint { margin: 0; overflow-wrap: anywhere; }
.image-entry .prompt-text { font-size: 13px; padding: 8px 10px; }
.image-entry .prompt-body.is-open { max-height: 40vh; overflow-y: auto; }
.image-entry .image-expand { justify-self: start; }
.image-noprompt { margin: 0; font-size: 13px; }
/* The model an image was made with (views/ui.js modelNote): under the current post image and in each history entry;
   on a tile of the collection a dark corner mark (not on a phone's narrow tile), in the list after the code. */
.image-model { display: flex; align-items: flex-start; gap: 6px; margin: 0; overflow-wrap: anywhere; min-width: 0; }
.image-model .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--brand); }
.image-model.is-unknown { color: var(--faint); }
.image-model.is-unknown .icon { color: var(--faint); }
.image-by + .image-model, .media-actions + .image-model { margin-top: -6px; }
.model-flag { position: absolute; top: 10px; left: 10px; max-width: calc(100% - 96px); min-width: 0; }
.model-flag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-flag .icon { flex: none; }
.cell-model { color: var(--muted); }
/* The collection's toolbar has five controls: the search gives way first so that at 1024 px they stay on one line;
   a long unknown model id does not stretch its filter. */
.select-model { max-width: 220px; text-overflow: ellipsis; }
@media (min-width: 761px) {
  .toolbar-creatives .search { flex-basis: 180px; min-width: 180px; }
}
@media (max-width: 760px) {
  .model-flag { display: none; }
  /* Three lists do not fit one phone row: topic and model share one, the order and the view the next. */
  .toolbar-creatives .select { flex: 1 1 40%; }
}
.prompt-for { display: flex; align-items: flex-start; padding: 10px 12px; min-height: 0; font-weight: var(--fw-semi); }
.prompt-for input { margin-top: 2px; flex: none; }
.prompt-for .grow { display: grid; gap: 2px; font-size: 14px; min-width: 0; }
.prompt-for small { font-size: 12.5px; line-height: 1.4; font-weight: var(--fw-medium); }
@media (max-width: 520px) {
  .image-entry { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .image-thumb { width: 56px; }
  .image-entry .media-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* bulk */
/* Several creatives at once: the selection bar, the windows' lists of what changes and what is left out. */
:root { --bulkbar: #0e1d2a; --bulkbar-text: #f1f6fa; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bulkbar: #1b2f49; --bulkbar-text: #e7eff6; }
  :root:not([data-theme="light"]) .bulkbar { border: 1px solid var(--border-strong); }
}
:root[data-theme="dark"] { --bulkbar: #1b2f49; --bulkbar-text: #e7eff6; }
:root[data-theme="dark"] .bulkbar { border: 1px solid var(--border-strong); }
.bulkbar { display: grid; gap: 8px; background: var(--bulkbar); color: var(--bulkbar-text); padding: 10px 12px; min-width: 0; }
.bulkbar-main, .bulkbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.bulkbar-main strong { margin-right: auto; min-width: 0; }
.bulkbar .btn { color: var(--bulkbar-text); }
.bulkbar .btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.bulkbar .btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.bulk-short { display: none; }
.concept-check .corner-btn[aria-pressed="true"] { color: var(--on-brand); }
.table tr.is-selected td { background: var(--brand-soft); }
.bulk-group-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bulk-skeleton { height: 180px; }
.bulk-list { display: grid; gap: 6px; min-width: 0; }
.bulk-row {
  display: grid; grid-template-columns: auto 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); min-width: 0;
}
.bulk-row .thumb { width: 40px; height: 40px; border-radius: 10px; }
.bulk-row-big { grid-template-columns: auto 64px minmax(0, 1fr) auto; align-items: start; }
.bulk-row-big .thumb { width: 64px; height: 80px; }
.bulk-row.is-off { opacity: 0.6; }
.bulk-row.is-changed { border-color: var(--t-amber); background: var(--t-amber-bg); }
.bulk-series { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; }
.bulk-main { display: grid; gap: 3px; min-width: 0; }
.bulk-main strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-main small { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.bulk-when { font-family: var(--mono); font-size: 12.5px; font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bulk-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.bulk-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.bulk-sub.is-off { opacity: 0.75; }
.bulk-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bulk-why { color: var(--text); }
.bulk-warn { color: var(--t-amber); font-weight: var(--fw-semi); }
.bulk-main small.bulk-warn { color: var(--t-amber); }
.bulk-moves { display: grid; gap: 2px; }
.bulk-skipped summary { cursor: pointer; font-weight: var(--fw-strong); font-size: 14px; }
.bulk-skipped .bulk-list { margin-top: 8px; }
.bulk-confirm { font-size: 14px; }
.sheet-bulk .seg-block { grid-auto-columns: 1fr; }
.sheet-bulk .seg-block button { height: auto; min-height: 32px; padding: 4px 6px; line-height: 1.2; white-space: normal; }
@media (min-width: 761px) {
  .sheet-bulk .bulk-list { max-height: min(46vh, 420px); overflow: auto; }
}
@media (max-width: 760px) {
  /* Above the tab bar, in two rows; the actions as three equal buttons, the icon over a short word. */
  .bulkbar { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 42; padding: 8px; }
  .bulkbar-main { flex-wrap: nowrap; }
  .bulkbar-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bulkbar-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bulkbar-actions .btn { display: grid; justify-items: center; gap: 2px; width: 100%; min-height: 48px; padding: 4px; font-size: 12px; line-height: 1.15; white-space: normal; text-align: center; }
  .bulk-long { display: none; }
  .bulk-short { display: inline; }
  body.is-selecting .fab { display: none; }
  body.is-selecting .toasts { bottom: calc(196px + env(safe-area-inset-bottom)); }
  .page:has(.bulkbar) { padding-bottom: 150px; }
  .sheet-bulk .sheet-foot { flex-direction: column-reverse; }
  .sheet-bulk .sheet-foot .btn { width: 100%; white-space: normal; }
  .bulk-row { grid-template-columns: auto 36px minmax(0, 1fr) auto; gap: 8px; padding: 8px; }
  .bulk-row .thumb { width: 36px; height: 36px; }
  .bulk-row-big { grid-template-columns: auto 52px minmax(0, 1fr); }
  .bulk-row-big .thumb { width: 52px; height: 65px; }
  .bulk-series { grid-template-columns: 36px minmax(0, 1fr) auto; }
}

/* today */
.today-head { display: flex; align-items: flex-end; gap: 12px; min-width: 0; }
.today-head .grow { display: grid; gap: 2px; min-width: 0; }
.today-head .hint { overflow-wrap: anywhere; }
.today-head .panel-link { flex: none; }
.today-panel { padding: 6px 16px; }
.today-list { display: grid; }
.today-row { display: grid; grid-template-columns: 52px 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); min-width: 0; }
.today-list > :first-child, .today-now + .today-row { border-top: 0; }
.today-time { display: grid; font-size: 15px; font-weight: var(--fw-strong); line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--text); }
.today-time small { font-size: 11px; font-weight: var(--fw-semi); color: var(--muted); }
.today-row.is-past .today-time { color: var(--muted); }
.today-thumb { display: block; line-height: 0; }
.today-thumb:hover { text-decoration: none; }
.today-body { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.today-body .pill { max-width: 100%; }
.today-title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: var(--fw-semi); color: var(--text); }
a.today-title:hover { color: var(--brand); }
.today-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; color: var(--muted); font-size: 12.5px; }
.today-flag { display: inline-flex; align-items: center; gap: 4px; color: var(--t-amber); font-weight: var(--fw-semi); }
.today-note { max-width: 100%; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.today-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.today-side > .icon { color: var(--muted); }
.today-now { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--brand-strong); font-size: 12px; font-weight: var(--fw-strong); }
.today-now::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--brand); opacity: 0.5; }
.today-empty { display: grid; justify-items: start; gap: 8px; padding: 12px 0; min-width: 0; }
.today-empty p { max-width: 100%; overflow-wrap: anywhere; }
.legend-moments { display: grid; gap: 6px; margin-top: 8px; }
.legend-moments p { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--muted); font-size: 13.5px; }
.legend-moments .pill { flex: none; }
@media (max-width: 760px) {
  .today-head { align-items: flex-start; }
  .today-panel { padding: 4px 12px; }
  .today-row { grid-template-columns: 46px 40px minmax(0, 1fr) auto; gap: 10px; }
  .today-row .thumb { width: 40px; height: 40px; border-radius: 10px; }
  .today-time { font-size: 14px; }
  .today-row.has-buttons .today-side { grid-column: 1 / -1; justify-content: flex-start; }
  .today-row.has-buttons .today-side .btn { flex: 1 1 auto; }
  .legend-moments p { flex-direction: column; gap: 4px; }
}

/* metrics */
.metric-list { display: grid; min-width: 0; }
.metric-post { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--border); min-width: 0; }
.metric-list > .metric-post:first-child { border-top: 0; padding-top: 0; }
.metric-post-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.metric-post-head .grow { display: grid; gap: 2px; }
.metric-post-head strong { font-size: 14px; overflow-wrap: anywhere; }
.metric-post-head small { color: var(--muted); font-size: 13px; }
.metric-post-head small.warn { color: var(--warn); font-weight: var(--fw-semi); }
.channel-icon-sm { width: 32px; height: 32px; border-radius: 10px; }
.channel-icon-sm .icon { width: 17px; height: 17px; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.metric { display: grid; gap: 2px; padding: 9px 10px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.metric dd { order: -1; margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: clamp(15px, 4.2vw, 17px); font-weight: var(--fw-strong); line-height: 1.2; font-variant-numeric: tabular-nums; }
.metric dd.is-empty { color: var(--faint); }
.metric dt { min-width: 0; font-size: 12px; font-weight: var(--fw-medium); color: var(--muted); overflow-wrap: anywhere; hyphens: auto; line-height: 1.25; }
.metric-problem { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.p-metrics .metric-how { margin-top: 10px; }
.post-metrics { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; font-size: 12.5px; font-weight: var(--fw-semi); color: var(--muted); font-variant-numeric: tabular-nums; }
.post-metrics > span { display: inline-flex; align-items: center; gap: 4px; }
.post-metrics .post-metrics-date { font-weight: var(--fw-medium); color: var(--faint); }
.table .post-metrics { margin-top: 4px; }
@media (max-width: 400px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Platform colours also in automatic dark mode (the theme "auto" removes data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .channel-icon.facebook { background: #10254a; color: #6aa7ff; }
  :root:not([data-theme="light"]) .channel-icon.instagram { background: #3a1528; color: #ff7fb0; }
}

/* window */
/* A creative in a window over the page it was opened from: the page stays put underneath, the window scrolls;
   its bar (the creative's code, state and actions, the arrows and the close button) stays in sight. */
html.has-window { overflow: hidden; }
.creative-window {
  position: fixed; inset: 0; z-index: 50; display: flex; justify-content: center;
  padding: 16px clamp(12px, 2.5vw, 32px); background: rgba(5, 14, 22, 0.56); animation: window-in 0.16s ease-out;
}
.window-panel {
  position: relative; width: min(1480px, 100%); height: 100%; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); border-radius: var(--radius-card); box-shadow: var(--shadow-sheet); outline: none; animation: window-rise 0.2s ease-out;
}
.window-bar {
  position: sticky; top: 0; z-index: 8; padding: 12px clamp(16px, 2.4vw, 32px);
  background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
}
.window-bar .editor-top { min-width: 0; }
.window-body { padding: 18px clamp(16px, 2.4vw, 32px) 32px; }
.window-nav { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.window-pos { min-width: 64px; text-align: center; font-size: 13px; font-weight: var(--fw-semi); color: var(--muted); font-variant-numeric: tabular-nums; }
.window-close { flex: none; }
.creative-window .savebar-slot { position: sticky; bottom: 14px; }
@keyframes window-in { from { opacity: 0; } }
@keyframes window-rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .creative-window, .window-panel { animation: none; } }
@media (max-width: 760px) {
  /* A phone: the whole screen, the bar under the status bar, the save bar at the bottom of the window. */
  .creative-window { padding: 0; }
  .window-panel { width: 100%; border-radius: 0; }
  .window-bar { padding: calc(8px + env(safe-area-inset-top)) var(--gutter-r) 8px var(--gutter); }
  .window-body { padding: 14px var(--gutter-r) calc(24px + env(safe-area-inset-bottom)) var(--gutter); }
  .creative-window .savebar-slot { bottom: calc(8px + env(safe-area-inset-bottom)); }
  .creative-window .savebar { bottom: 0; }
}

/* translation */
/* The prompt is a card of its own; the text card has the original and its Russian translation. */
.p-prompt .prompt { margin-top: 0; padding-top: 0; border-top: 0; }
.text-tabs { margin: 0 0 12px; }
.text-tabs.is-stale .seg button .icon { color: var(--warn); }
.caption-part, .translation-part { display: grid; gap: 12px; min-width: 0; }
.caption-part[hidden], .translation-part[hidden] { display: none; }
.translation-text { white-space: pre-wrap; font-size: 14.5px; line-height: 1.55; color: var(--text); background: var(--surface-2); border-radius: 12px; padding: 12px 14px; overflow-wrap: anywhere; max-height: 62vh; overflow-y: auto; }
/* On a phone the window scrolls as a whole: no scroll inside a scroll. */
@media (max-width: 860px) { .translation-text { max-height: none; overflow: visible; } }
.translation-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.translation-actions .grow { flex: 1 1 180px; min-width: 0; }
.translation-empty { margin: 0; }

/* ---------- Реклама: campaigns, ad creatives, files and audiences (views/ads/) ---------- */
.nav-sep { height: 1px; margin: 12px 10px 2px; background: var(--border); }
.ad-note { margin: -8px 0 0; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: var(--fw-medium); }
.ad-note .icon { color: var(--faint); }
.pill.ad-idea, .pill.ad-draft { background: var(--t-slate-bg); color: var(--t-slate); }
.pill.ad-preparing, .pill.ad-review { background: var(--t-amber-bg); color: var(--t-amber); }
.pill.ad-ready { background: var(--t-blue-bg); color: var(--t-blue); }
.pill.ad-live { background: var(--t-green-bg); color: var(--t-green); }
.pill.ad-live::before { animation: pulse 1.6s ease-in-out infinite; }
.pill.ad-paused { background: var(--t-violet-bg); color: var(--t-violet); }
.pill.ad-finished { background: var(--surface-3); color: var(--faint); }
.select.ad-status-select { font-weight: var(--fw-strong); border-color: transparent; background-color: var(--tint-bg, var(--surface-3)); color: var(--tint, var(--text)); }
.ad-status-select.ad-idea, .ad-status-select.ad-draft { --tint-bg: var(--t-slate-bg); --tint: var(--t-slate); }
.ad-status-select.ad-preparing, .ad-status-select.ad-review { --tint-bg: var(--t-amber-bg); --tint: var(--t-amber); }
.ad-status-select.ad-ready { --tint-bg: var(--t-blue-bg); --tint: var(--t-blue); }
.ad-status-select.ad-live { --tint-bg: var(--t-green-bg); --tint: var(--t-green); }
.ad-status-select.ad-paused { --tint-bg: var(--t-violet-bg); --tint: var(--t-violet); }
.ad-status-select.ad-finished { --tint-bg: var(--surface-3); --tint: var(--muted); }

/* a picture of a file */
.ad-preview { position: relative; width: 100%; height: 100%; background: var(--surface-3); overflow: hidden; display: grid; place-items: center; color: var(--faint); }
.ad-preview img, .ad-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-preview.is-doc { background: linear-gradient(160deg, var(--surface-2), var(--surface-3)); align-content: center; gap: 6px; }
.ad-preview.is-doc > .icon { width: 34px; height: 34px; color: var(--brand); }
.ad-ext { font-size: 12px; font-weight: var(--fw-strong); letter-spacing: 0.06em; color: var(--muted); }
.ad-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(14, 29, 42, 0.62); color: #fff; backdrop-filter: blur(4px); }
.ad-play .icon { width: 18px; height: 18px; margin-left: 2px; }
.ad-duration { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 7px; background: rgba(14, 29, 42, 0.72); color: #fff; font-size: 11.5px; font-weight: var(--fw-strong); }
.ad-preview--large { aspect-ratio: auto; min-height: 260px; max-height: 70vh; border-radius: var(--radius-card); background: var(--surface-2); }
.ad-preview--large img, .ad-preview--large video { object-fit: contain; max-height: 70vh; }
/* The formats of a creative side by side at one height (each grows by its width to height), its proportions under each. */
.ad-formats { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: var(--surface-2); overflow: hidden; }
.ad-format { min-width: 0; display: grid; gap: 5px; justify-items: center; }
.ad-format-media { width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(16, 24, 40, 0.18); }
/* In a picker too (.ad-pick .ad-preview is square): the box of a format keeps the file's own proportions. */
.ad-formats .ad-format-media > .ad-preview { aspect-ratio: auto; height: 100%; }
.ad-format-media .ad-play { width: 28px; height: 28px; }
.ad-format-media .ad-play .icon { width: 13px; height: 13px; }
.ad-format-media .ad-duration { display: none; }
.ad-format-label { font-size: 11px; font-weight: var(--fw-strong); letter-spacing: 0.02em; color: var(--muted); line-height: 1; }

/* campaigns */
.ad-campaigns { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.ad-campaign {
  display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-card); color: var(--text); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; min-width: 0;
}
.ad-campaign:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--border-strong); }
.ad-campaign.is-archived, .ad-tile.is-archived, .ad-file-tile.is-archived { opacity: 0.72; }
.ad-campaign-top { display: flex; align-items: center; gap: 6px 8px; min-width: 0; flex-wrap: wrap; }
.ad-campaign-dates { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 12.5px; font-weight: var(--fw-strong); color: var(--muted); white-space: nowrap; }
/* The audience a campaign runs on now: one line, the rest in its title. */
.ad-campaign-audience { margin: 0; display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13.5px; font-weight: var(--fw-semi); color: var(--text); }
.ad-campaign-audience span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-campaign-audience .icon { flex: none; color: var(--t-violet); }
.ad-campaign-audience.is-empty { color: var(--faint); font-weight: var(--fw-medium); }
.ad-campaign-audience.is-empty .icon { color: var(--faint); }
.ad-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-campaign-title { margin: 0; font-size: 17px; line-height: 1.3; font-weight: var(--fw-strong); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ad-campaign-sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.ad-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ad-strip-item { aspect-ratio: 4 / 5; border-radius: 10px; }
.ad-strip--empty { display: flex; align-items: center; justify-content: center; gap: 8px; height: 72px; border-radius: 12px; border: 1px dashed var(--border-strong); color: var(--faint); font-size: 13px; font-weight: var(--fw-semi); }
.ad-campaign-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); font-weight: var(--fw-semi); }
.ad-campaign-foot strong { color: var(--text); }

/* creative tiles */
.ad-tile { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); overflow: hidden; min-width: 0; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.ad-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--border-strong); }
.ad-tile-open { display: block; color: inherit; text-decoration: none; }
.ad-tile-open:hover { text-decoration: none; }
.ad-tile-media { position: relative; aspect-ratio: 4 / 5; }
.ad-tile-body { padding: 12px 14px 14px; display: grid; gap: 6px; }
.ad-tile-title { margin: 0; font-size: 15px; line-height: 1.3; font-weight: var(--fw-strong); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-tile-text { margin: 0; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-tile-campaigns { display: flex; align-items: center; gap: 6px; padding: 0 14px 14px; margin-top: -6px; color: var(--muted); font-size: 12.5px; font-weight: var(--fw-semi); min-width: 0; }
.ad-tile-campaigns span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* a campaign and a creative: two columns */
.ad-head .grow { gap: 2px; }
.ad-kicker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--faint); font-size: 12.5px; font-weight: var(--fw-strong); letter-spacing: 0.02em; }
.ad-saving { font-weight: var(--fw-semi); color: var(--faint); }
.ad-saving[data-state="saving"] { color: var(--brand); }
.ad-saving[data-state="saved"] { color: var(--success); }
.ad-saving[data-state="error"] { color: var(--danger); }
.ad-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 18px; align-items: start; }
.ad-layout--creative { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
.ad-side { display: grid; gap: 18px; min-width: 0; }
.ad-main { min-width: 0; }
@media (min-width: 1081px) {
  .ad-side--sticky { position: sticky; top: calc(var(--topbar-h) + 18px); max-height: calc(100vh - var(--topbar-h) - 36px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 4px; }
}
.ad-budget { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 8px; }
.ad-history { display: grid; gap: 10px; max-height: 420px; overflow-y: auto; }
.ad-history-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.ad-history-row .dot { margin-top: 6px; background: var(--border-strong); }
.ad-history-row .grow { display: grid; gap: 1px; }
.ad-history-row small { color: var(--faint); font-size: 12px; font-weight: var(--fw-medium); }

/* a campaign (2.7): the creatives on the left, the settings, the audience and the history on the right; on a narrow
   screen the settings and the audience come first, then the creatives */
.ad-campaign-page {
  display: grid; gap: 18px; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  grid-template-areas: "creatives settings" "creatives audience" "creatives history"; grid-template-rows: auto auto 1fr;
}
.ad-c-settings { grid-area: settings; }
.ad-c-audience { grid-area: audience; }
.ad-c-creatives { grid-area: creatives; }
.ad-c-history { grid-area: history; }
.ad-chips-wrap { flex-wrap: wrap; overflow: visible; }
.ad-chips-wrap .chip { height: 32px; padding: 0 12px; font-size: 13px; }
.ad-c-creatives-head { flex-wrap: wrap; }
.ad-c-creatives-head > .grow { flex: 1 1 260px; }
.ad-c-creatives-head h2 { display: flex; align-items: center; gap: 8px; }
.ad-count-badge { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--surface-3); color: var(--muted); font-size: 12px; font-weight: var(--fw-strong); }

/* a creative of a campaign: its files with what each is for, the texts to copy */
.ad-cc-list { display: grid; gap: 12px; }
.ad-cc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 14px; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface-2); min-width: 0; }
.ad-cc.is-archived { opacity: 0.72; }
.ad-cc-files { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; max-width: 320px; }
.ad-cc-file { margin: 0; display: grid; gap: 4px; justify-items: start; }
.ad-cc-thumb { display: block; padding: 0; border: 0; cursor: zoom-in; height: 180px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface-3) 0 50%) 0 0 / 16px 16px; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.14); }
.ad-cc-thumb .ad-preview img { object-fit: contain; }
.ad-cc-thumb .ad-play { width: 30px; height: 30px; }
.ad-cc-file figcaption { display: flex; align-items: center; gap: 2px; font-size: 12px; font-weight: var(--fw-strong); color: var(--muted); }
.ad-cc-label { white-space: nowrap; }
.ad-cc-label .ad-cc-ratio::before { content: " · "; }
.ad-cc-nofiles { width: 136px; height: 136px; border-radius: 10px; border: 1.5px dashed var(--border-strong); display: grid; place-content: center; justify-items: center; gap: 6px; padding: 8px; text-align: center; color: var(--faint); font-size: 12.5px; font-weight: var(--fw-semi); }
.ad-cc-body { display: grid; gap: 8px; align-content: start; min-width: 0; }
.ad-cc-name { font-size: 15.5px; font-weight: var(--fw-strong); line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.ad-cc-texts { border-top: 1px solid var(--border); padding-top: 8px; }
.ad-cc-texts > summary { cursor: pointer; display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-weight: var(--fw-strong); font-size: 13.5px; padding: 2px 0; list-style: none; }
.ad-cc-texts > summary::-webkit-details-marker { display: none; }
.ad-cc-chevron { color: var(--muted); transition: transform 0.15s; }
.ad-cc-texts[open] .ad-cc-chevron { transform: rotate(90deg); }
.ad-cc-texts > summary:hover > span { color: var(--brand-strong); }
.ad-cc-texts > summary small { color: var(--muted); font-weight: var(--fw-medium); font-size: 12.5px; }
.ad-cc-text-list { display: grid; gap: 10px; padding-top: 10px; }
.ad-cc-copyall { display: flex; }
.ad-cc-text { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.ad-cc-text-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: var(--fw-strong); color: var(--muted); }
.ad-cc-text p { margin: 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ad-cc-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* the audience log of a campaign: the current entry first, earlier ones under it */
.ad-aud-panel-head { margin-bottom: 8px; }
.ad-aud-hint { margin: 0 0 12px; }
.ad-aud-list { display: grid; gap: 10px; }
.ad-aud { display: grid; gap: 6px; padding: 12px; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface-2); }
.ad-aud.is-current { border-color: var(--t-green); background: var(--t-green-bg); }
.ad-aud-head { display: flex; align-items: flex-start; gap: 8px; }
.ad-aud-text { flex: 1; min-width: 0; margin: 0; font-size: 14.5px; font-weight: var(--fw-strong); line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.ad-aud-head .tool { margin: -4px -4px 0 0; }
.ad-aud-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); font-weight: var(--fw-semi); }
.ad-aud-dates { display: inline-flex; align-items: center; gap: 5px; }
.ad-aud-notes { margin: 0; font-size: 13.5px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.ad-aud-form { display: grid; gap: 10px; padding: 12px; margin-bottom: 10px; border-radius: var(--radius-card); border: 1.5px solid var(--brand); background: var(--surface); }
.ad-aud-list .ad-aud-form { margin-bottom: 0; }
.ad-aud-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ad-aud-empty { display: grid; justify-items: start; gap: 6px; padding: 14px; border-radius: var(--radius-card); border: 1.5px dashed var(--border-strong); }
.ad-danger-text, .ad-danger-text:hover { color: var(--danger); }

/* pickers */
.ad-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ad-pick {
  position: relative; display: grid; gap: 4px; padding: 0 0 8px; border-radius: var(--radius-card); border: 1.5px solid var(--border); background: var(--surface); text-align: left;
  overflow: hidden; color: var(--text); min-width: 0;
}
.ad-pick .ad-preview { aspect-ratio: 1; height: auto; }
.ad-pick-media { position: relative; aspect-ratio: 4 / 5; }
.ad-pick-media > .ad-preview, .ad-pick-media > .ad-formats { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.ad-pick-campaign .grow { gap: 1px; }
.ad-pick-campaign:disabled { opacity: 0.6; cursor: default; }
.ad-pick-campaign:disabled:hover { background: none; }
.ad-pick:hover { border-color: var(--border-strong); }
.ad-pick.is-on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.ad-pick-check { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); color: transparent; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.ad-pick.is-on .ad-pick-check { background: var(--brand); color: #fff; }
.ad-pick-check .icon { width: 15px; height: 15px; }
.ad-pick-name { padding: 2px 10px 0; font-weight: var(--fw-strong); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-pick small { padding: 0 10px; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* uploads and dropping files */
.ad-uploads { display: grid; gap: 8px; }
.ad-upload { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); }
.ad-upload .grow { display: grid; gap: 6px; }
.ad-upload strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-upload small { color: var(--muted); font-size: 12.5px; font-weight: var(--fw-semi); }
.ad-upload.is-failed { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.ad-upload.is-failed small { color: var(--danger); }
.ad-drop-page { position: relative; }
.ad-drop-overlay {
  display: none; position: fixed; inset: calc(var(--topbar-h) + 12px) 12px 12px calc(var(--sidebar-w) + 12px); z-index: 25; border-radius: var(--radius-card); border: 3px dashed var(--brand);
  background: color-mix(in srgb, var(--brand-soft) 88%, transparent); color: var(--brand-strong); place-content: center; justify-items: center; gap: 10px; font-size: 18px; pointer-events: none;
}
.ad-drop-overlay .icon { width: 40px; height: 40px; }
.ad-drop-page.is-dropping .ad-drop-overlay { display: grid; }
.ad-files-panel.is-dropping, .sheet-body .stack.is-dropping { outline: 3px dashed var(--brand); outline-offset: 4px; border-radius: var(--radius-card); background: var(--brand-soft); }
.ad-dropzone { border: 2px dashed var(--border-strong); border-radius: var(--radius-card); background: var(--surface); }
.ad-drop-empty { display: grid; justify-items: center; gap: 6px; padding: 30px 16px; border: 2px dashed var(--border-strong); border-radius: var(--radius-card); color: var(--muted); text-align: center; }
.ad-drop-empty .icon { width: 30px; height: 30px; color: var(--brand); }

/* a new creative */
.ad-format-pick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ad-format-option { display: grid; justify-items: center; gap: 6px; padding: 12px 4px; border-radius: var(--radius-card); border: 1.5px solid var(--border); background: var(--surface); font-weight: var(--fw-strong); font-size: 12.5px; color: var(--muted); }
.ad-format-option[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }
.ad-mini-files { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-mini-file { position: relative; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; }
.ad-mini-file .corner-btn { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 8px; }
.ad-mini-file .corner-btn .icon { width: 14px; height: 14px; }

/* files of a creative */
.ad-file-list { display: grid; gap: 10px; }
.ad-file-row { display: flex; align-items: flex-start; gap: 14px; padding: 10px; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface-2); }
.ad-file-thumb { position: relative; width: 92px; height: 92px; flex: none; border-radius: 12px; overflow: hidden; display: block; }
.ad-file-index { position: absolute; left: 6px; top: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 7px; background: rgba(14, 29, 42, 0.72); color: #fff; font-size: 12px; font-weight: var(--fw-strong); display: grid; place-items: center; }
.ad-file-title { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-file-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.ad-file-controls .select, .ad-file-controls .input { height: 38px; min-height: 38px; font-size: 13.5px; padding-top: 0; padding-bottom: 0; }
.ad-file-controls .input { flex: 1 1 180px; }
.ad-file-actions { display: grid; grid-template-columns: repeat(2, 32px); gap: 2px; }
/* someone who only looks has the download alone */
.ad-file-actions.is-view { grid-template-columns: 32px; }
.ad-warn { display: inline-flex; align-items: center; gap: 6px; color: var(--warn); font-weight: var(--fw-semi); font-size: 12.5px; }

/* texts */
.ad-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ad-field-head > span:first-child { font-size: 13px; font-weight: var(--fw-strong); color: var(--muted); }
.ad-variant { display: flex; gap: 10px; align-items: flex-start; }
.ad-variant-num { width: 26px; height: 26px; flex: none; margin-top: 10px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); font-size: 12.5px; font-weight: var(--fw-strong); }
.ad-variant-field { display: grid; gap: 4px; }
.ad-variant-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.ad-variant-foot .btn { min-height: 28px; padding: 0 8px; font-size: 12.5px; color: var(--muted); }
.ad-count { font-size: 12px; font-weight: var(--fw-strong); color: var(--faint); }
.ad-count.is-over { color: var(--warn); }
.ad-add-variant { justify-self: start; color: var(--brand-strong); }
/* a copy button right of every text, for the targetologist; the heads of files and texts wrap their buttons */
.ad-copy-row { display: flex; gap: 6px; align-items: flex-start; }
.ad-copy-row > .input, .ad-copy-row > .textarea { flex: 1; min-width: 0; }
.ad-copy-row > .ad-copy { margin-top: 4px; }
.ad-copy:disabled { opacity: 0.35; background: none; }
.ad-files-panel .panel-head, .ad-texts-panel .panel-head, .ad-m-creatives > .panel-head { flex-wrap: wrap; }
.ad-files-panel .panel-head > .grow, .ad-texts-panel .panel-head > .grow { flex: 1 1 260px; }
.ad-m-creatives > .panel-head > .grow { flex: 1 1 200px; }
.ad-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* readiness */
.ad-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ad-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; font-weight: var(--fw-medium); }
.ad-checks li .icon { margin-top: 1px; }
.ad-checks .is-ok { color: var(--muted); }
.ad-checks .is-ok .icon { color: var(--success); }
.ad-checks .is-missing .icon { color: var(--warn); }
.ad-checks .is-warn .icon { color: var(--t-blue); }

/* preview: a post in the feed and a story */
.ad-variant-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -4px 0 10px; font-size: 13px; font-weight: var(--fw-strong); color: var(--muted); }
.ad-mock { border-radius: var(--radius-card); border: 1px solid var(--border); background: #fff; color: #050505; overflow: hidden; font-size: 14px; line-height: 1.38; box-shadow: 0 8px 26px -18px rgba(0, 0, 0, 0.5); }
.ad-mock-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ad-mock-head .grow { display: grid; gap: 0; }
.ad-mock-head strong { font-size: 14px; }
.ad-mock-head small { font-size: 12px; color: #65676b; font-weight: var(--fw-medium); }
.ad-mock-head > .icon { color: #65676b; }
.ad-mock-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #27a3d6, #1573a8); color: #fff; font-weight: var(--fw-strong); flex: none; }
.ad-mock-text { margin: 0; padding: 0 12px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ad-mock-text .faint { color: #65676b; }
.ad-mock-media { position: relative; width: 100%; aspect-ratio: 1; background: #f0f2f5; display: grid; place-items: center; color: #8a8d91; overflow: hidden; }
.ad-mock-media img, .ad-mock-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-mock-media.is-empty { gap: 6px; align-content: center; font-size: 13px; font-weight: var(--fw-semi); }
.ad-mock-doc { display: grid; justify-items: center; gap: 6px; font-size: 12.5px; padding: 12px; text-align: center; }
.ad-mock-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f0f2f5; }
.ad-mock-bar .grow { display: grid; gap: 1px; min-width: 0; }
.ad-mock-bar small { font-size: 11.5px; color: #65676b; letter-spacing: 0.02em; }
.ad-mock-bar strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-mock-bar span { font-size: 13px; color: #65676b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-mock-cta { flex: none; padding: 8px 12px; border-radius: 6px; background: #e4e6eb; color: #050505 !important; font-weight: var(--fw-semi); font-size: 13px !important; }
.ad-mock-carousel { display: flex; gap: 8px; overflow-x: auto; padding: 0 12px 12px; scroll-snap-type: x mandatory; }
.ad-mock-card { flex: 0 0 78%; border-radius: 10px; overflow: hidden; border: 1px solid #dadde1; scroll-snap-align: start; }
.ad-mock-square { aspect-ratio: 1; }
.ad-mock-story { position: relative; width: min(100%, 300px); margin: 0 auto; aspect-ratio: 9 / 16; border-radius: var(--radius-card); overflow: hidden; background: #111; color: #fff; box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.7); }
.ad-mock-story-media { position: absolute; inset: 0; aspect-ratio: auto; background: #222; color: #aaa; }
.ad-mock-story-top { position: absolute; left: 0; right: 0; top: 0; padding: 8px 4px 24px; background: linear-gradient(rgba(0, 0, 0, 0.45), transparent); }
.ad-mock-story-top .ad-mock-head small, .ad-mock-story-top .ad-mock-head > .icon { color: rgba(255, 255, 255, 0.8); }
.ad-mock-bars { height: 3px; margin: 0 8px 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.ad-mock-bars i { display: block; width: 40%; height: 100%; background: #fff; }
.ad-mock-story-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 16px; display: grid; justify-items: center; gap: 10px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); }
.ad-mock-story-bottom p { margin: 0; font-size: 13px; text-align: center; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.ad-mock-swipe { display: grid; justify-items: center; gap: 2px; padding: 8px 16px; border-radius: 999px; background: #fff; color: #050505; font-weight: var(--fw-strong); font-size: 13px; }
.ad-mock-swipe .icon { width: 16px; height: 16px; }
.ad-preview-panel .hint { margin-top: 10px; }

/* the failed tries of a creative (2.7.1): under everything and quieter than its formats — a panel the colour of the page,
   without a shadow; small pictures at their own proportions (a tall one narrower), what each was made for, why it was
   turned down, a download and, for those who may change the creative, «Убрать» */
.panel.ad-rejects { background: transparent; box-shadow: none; }
.ad-rejects .panel-head { margin-bottom: 12px; }
.ad-rejects-count { color: var(--faint); font-weight: var(--fw-semi); }
.ad-rejects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 14px; align-items: start; }
.ad-reject { margin: 0; display: grid; gap: 6px; align-content: start; min-width: 0; }
.ad-reject-thumb { display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface-3); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.14); }
.ad-reject-thumb .ad-preview img { object-fit: contain; }
.ad-reject-thumb .ad-play { width: 30px; height: 30px; }
.ad-reject figcaption { display: grid; gap: 3px; min-width: 0; }
.ad-reject-place { font-size: 12px; font-weight: var(--fw-strong); color: var(--muted); overflow-wrap: anywhere; }
.ad-reject-note { font-size: 12.5px; line-height: 1.4; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.ad-reject-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.ad-reject-act { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 12.5px; font-weight: var(--fw-semi); text-decoration: none; cursor: pointer; }
.ad-reject-act:hover { color: var(--brand-strong); text-decoration: none; }
button.ad-reject-act:hover { color: var(--danger); }
.ad-reject-act .icon { width: 14px; height: 14px; }

/* files library */
.ad-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.ad-file-tile { display: grid; padding: 0; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; text-align: left; color: var(--text); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; min-width: 0; }
.ad-file-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--border-strong); }
.ad-file-tile-media { position: relative; aspect-ratio: 1; }
.ad-file-tile-media .concept-flags { left: 8px; bottom: 8px; }
.ad-file-tile-body { display: grid; gap: 2px; padding: 10px 12px 12px; min-width: 0; }
.ad-file-tile-body strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-file-tile-body small { color: var(--muted); font-size: 12px; font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-file-sheet { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ad-file-sheet-media { position: sticky; top: 0; }
.ad-facts-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13.5px; }
.ad-facts-list dt { color: var(--muted); font-weight: var(--fw-semi); }
.ad-facts-list dd { margin: 0; font-weight: var(--fw-medium); overflow-wrap: anywhere; }

/* audiences */
.ad-audiences { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.ad-audience { display: grid; gap: 10px; align-content: start; }
.ad-audience-head { display: flex; align-items: center; gap: 12px; }
.ad-audience-head h3 { margin: 0; font-size: 16px; font-weight: var(--fw-strong); }
.ad-audience-line { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--text); }
.ad-audience-line .icon { margin-top: 2px; color: var(--faint); }
.ad-audience-desc { margin: 0; color: var(--muted); font-size: 13.5px; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ad-audience-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--border); padding-top: 10px; }

@media (max-width: 1080px) {
  .ad-layout, .ad-layout--creative { grid-template-columns: minmax(0, 1fr); }
  .ad-campaign-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "creatives creatives" "settings audience" "history history"; grid-template-rows: none; }
}
@media (max-width: 760px) {
  .ad-drop-overlay { inset: calc(var(--topbar-h) + 8px) 8px calc(84px + env(safe-area-inset-bottom)) 8px; }
  .ad-campaigns, .ad-audiences { grid-template-columns: minmax(0, 1fr); }
  .ad-library { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ad-file-sheet { grid-template-columns: minmax(0, 1fr); }
  .ad-file-sheet-media { position: static; }
  .ad-format-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ad-campaign-page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "creatives" "settings" "audience" "history"; }
  .ad-cc { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .ad-cc-files { max-width: none; }
  .ad-cc-thumb { height: 116px; }
  .ad-cc-label.has-ratio .ad-cc-place { display: none; }
  .ad-cc-label .ad-cc-ratio::before { content: none; }
  .ad-file-row { flex-wrap: wrap; }
  .ad-file-thumb { width: 72px; height: 72px; }
  .ad-file-actions { grid-template-columns: repeat(4, 32px); width: 100%; justify-content: end; }
  .ad-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-rejects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  /* five lists of the creatives do not fit one phone row: two to a row, the order next to Active / Archive */
  .ad-toolbar .select { flex: 1 1 40%; }
}
/* In a box of fixed proportions the picture fills it; files and picks show the whole picture, uncropped. */
.ad-tile-media > .ad-preview, .ad-tile-media > .ad-formats, .ad-file-tile-media > .ad-preview { position: absolute; inset: 0; }
.ad-file-tile .ad-preview img, .ad-pick .ad-preview img, .ad-file-thumb .ad-preview img { object-fit: contain; }
.ad-file-tile .ad-preview, .ad-pick .ad-preview, .ad-file-thumb .ad-preview { background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface-3) 0 50%) 0 0 / 16px 16px; }

/* ---------- Реклама 2.8: the ad accounts of Meta (views/ads/campaigns.js, metaCampaign.js, metaSettings.js, metaUi.js) ----------
   The list by account with each campaign's state, switch and results; a campaign's page with its settings as in Ads
   Manager on the left and what Meta says of it on the right. */
.icon.spin { animation: spin 0.9s linear infinite; }

/* the list: an account a tab, the account's line under the tabs, a card's switch, results of 7 days and flags */
.ad-m-tabs { margin-bottom: 6px; }
.ad-m-tab small { font-size: 11px; font-weight: var(--fw-semi); letter-spacing: 0.04em; color: var(--faint); }
.ad-m-tab[aria-selected="true"] small { color: inherit; opacity: 0.75; }
.ad-m-accline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: -2px 0 0; font-size: 13px; font-weight: var(--fw-medium); color: var(--muted); }
.ad-m-accline strong { color: var(--text); font-weight: var(--fw-semi); }
.ad-m-err { color: var(--danger); }
.ad-m-card .ad-campaign-top { min-height: 28px; }
/* The campaign or the creative just looked at, back in the list (2.13). */
.ad-m-card.is-recent, .ad-tile.is-recent { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 55%, transparent); transition: box-shadow 0.6s ease; }
.ad-m-switch { flex: none; }
.ad-m-meta-thumb { width: 100%; object-fit: cover; background: var(--surface-3); }
/* More looks than the card shows (2.13): «+3» over the last picture. */
.ad-strip-more { position: relative; display: block; min-width: 0; }
.ad-strip-more > .ad-strip-item { display: block; }
.ad-strip-more > b { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 10px; background: rgba(15, 18, 24, 0.5); color: #fff; font-size: 16px; font-weight: var(--fw-strong); }
.ad-m-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.ad-m-mini > div { display: grid; gap: 2px; min-width: 0; align-content: space-between; }
.ad-m-mini span { font-size: 11.5px; line-height: 1.25; font-weight: var(--fw-semi); color: var(--muted); overflow-wrap: anywhere; }
.ad-m-mini strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.ad-m-flags { display: flex; flex-wrap: wrap; gap: 6px; }

/* a new campaign: its account */
.ad-m-account-pick { gap: 8px; }
.ad-m-account-option {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.ad-m-account-option:hover { background: var(--surface-2); }
.ad-m-account-option.is-on { border-color: var(--brand); background: var(--brand-soft); }
.ad-m-account-option .grow { display: grid; gap: 1px; }
.ad-m-account-option strong { font-size: 14.5px; }
.ad-m-account-option small { font-size: 12.5px; color: var(--muted); }
.ad-m-account-option > .icon { color: var(--brand); flex: none; }

/* a campaign's page */
.ad-m-page { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.ad-m-main, .ad-m-side, .ad-m-settings { gap: 18px; min-width: 0; }
.ad-m-actions { align-items: center; }
.ad-m-switchbox { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: 14px; font-weight: var(--fw-semi); }
.ad-m-notices:empty { display: none; }
.ad-m-meta-words { padding-left: 10px; border-left: 2px solid currentColor; font-size: 13.5px; font-style: italic; overflow-wrap: anywhere; }
.ad-m-problems { margin: 0; padding-left: 20px; display: grid; gap: 2px; }

/* the settings, panel by panel */
.ad-m-panel { gap: 14px; }
.ad-m-panel > .panel-head { margin-bottom: 0; }
.ad-m-static { display: grid; gap: 1px; min-height: 40px; align-content: center; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.ad-m-static small { font-size: 12.5px; color: var(--muted); }
.ad-m-budget { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ad-m-amount { display: flex; align-items: center; gap: 8px; }
.ad-m-amount .input { width: 120px; }
.ad-m-amount span { font-weight: var(--fw-semi); color: var(--muted); }
.ad-m-when { display: flex; align-items: center; gap: 6px; }
.ad-m-when .input { flex: 1; min-width: 0; }
.ad-m-loc { gap: 10px; margin-top: 8px; }
.ad-m-rows { display: grid; gap: 8px; }
.ad-m-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 8px 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); font-weight: var(--fw-semi); }
.ad-m-row > .icon { color: var(--faint); flex: none; }
.ad-m-row .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-m-radius { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.ad-m-radius .input { width: 76px; }
.ad-m-radius span { font-size: 13px; font-weight: var(--fw-semi); color: var(--muted); }
.ad-m-point { display: grid; gap: 8px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.ad-m-coords { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.ad-m-maplink { display: inline-flex; align-items: center; gap: 5px; justify-self: start; font-weight: var(--fw-semi); }
.ad-m-ages { display: flex; align-items: center; gap: 8px; }
.ad-m-ages .select { flex: 1; min-width: 0; }
.ad-m-ages > span { color: var(--faint); }
.ad-m-fixed { margin: 0; display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13px; font-weight: var(--fw-medium); color: var(--muted); }
.ad-m-fixed .icon { margin-top: 1px; color: var(--faint); flex: none; }
.ad-m-adset { display: grid; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.ad-m-interests { gap: 8px; padding-left: 56px; }
.chip.ad-m-chip { padding-right: 6px; cursor: default; }
.ad-m-chip-x { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.ad-m-chip-x:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.ad-m-places { display: grid; gap: 8px; }
.ad-m-places > strong { font-size: 13.5px; }
.ad-m-search { position: relative; }
.ad-m-suggest {
  position: absolute; z-index: 25; left: 0; right: 0; top: calc(100% + 4px); display: grid; max-height: 280px; overflow-y: auto; padding: 6px;
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lift);
}
.ad-m-suggest[hidden] { display: none; }
.ad-m-suggest button { display: grid; gap: 1px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); text-align: left; cursor: pointer; }
.ad-m-suggest button:hover, .ad-m-suggest button:focus-visible { background: var(--surface-2); }
.ad-m-suggest small { font-size: 12px; color: var(--muted); }
.ad-m-suggest .hint { padding: 8px 10px; }

/* the side: results of a period, what is in Facebook with Meta's statuses */
.ad-m-results, .ad-m-objects { gap: 12px; }
.ad-m-results > .panel-head, .ad-m-objects > .panel-head { margin-bottom: 0; }
.ad-m-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ad-m-tile { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.ad-m-tile span { font-size: 12px; font-weight: var(--fw-semi); color: var(--muted); }
.ad-m-tile strong { font-size: 16px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ad-m-tile.is-strong { background: var(--t-indigo-bg); }
.ad-m-tile.is-strong strong { font-size: 19px; color: var(--t-indigo); }
.ad-m-tile.is-strong:first-child { grid-column: 1 / -1; }
.ad-m-tree { display: grid; gap: 10px; }
.ad-m-allsets { justify-self: start; }
.ad-m-node { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); min-width: 0; }
.ad-m-node-head, .ad-m-leaf { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ad-m-node-head strong, .ad-m-leaf .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.ad-m-leaf { padding: 6px 8px; border-radius: 8px; background: var(--surface); font-size: 13px; }
.ad-m-node .icon, .ad-m-leaf .icon { color: var(--faint); flex: none; }
.pill.ad-m-es-active { background: var(--t-green-bg); color: var(--t-green); }
.pill.ad-m-es-paused, .pill.ad-m-es-campaign_paused, .pill.ad-m-es-adset_paused { background: var(--t-amber-bg); color: var(--t-amber); }
.pill.ad-m-es-in_process, .pill.ad-m-es-pending_review, .pill.ad-m-es-preapproved { background: var(--t-blue-bg); color: var(--t-blue); }
.pill.ad-m-es-disapproved, .pill.ad-m-es-with_issues, .pill.ad-m-es-pending_billing_info { background: var(--t-coral-bg); color: var(--t-coral); }
.pill.ad-m-es-deleted, .pill.ad-m-es-archived { background: var(--surface-3); color: var(--faint); }

/* the creatives: pictures in their proportions, the first headline and text */
.ad-m-creatives { gap: 14px; }
.ad-m-creatives > .panel-head { margin-bottom: 0; }
.ad-m-creative-list { display: grid; gap: 12px; }
.ad-m-creative { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; min-width: 0; padding: 12px; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface-2); }
.ad-m-thumbs { display: flex; gap: 8px; align-items: flex-start; }
/* A picture keeps its size and its caption wraps under it (2.13.1): on a phone a long «Stories и Reels · 9:16» made
   the row wider than the card, and the feed picture, squeezed, ran under the Stories one. */
.ad-m-thumb { margin: 0; display: grid; gap: 4px; justify-items: start; flex: none; }
.ad-m-thumb-media {
  position: relative; display: block; padding: 0; border: 0; cursor: zoom-in; height: 200px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.14);
  background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface-3) 0 50%) 0 0 / 16px 16px;
}
.ad-m-thumb-media > .ad-preview, .ad-m-thumb-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad-m-thumb-media .ad-preview img { object-fit: contain; }
.ad-m-thumb-media:hover .ad-shot-zoom, .ad-m-thumb-media:focus-visible .ad-shot-zoom { opacity: 1; }
.ad-m-thumb-media:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.ad-m-thumb figcaption { width: 0; min-width: 100%; font-size: 12px; font-weight: var(--fw-strong); color: var(--muted); line-height: 1.3; }
.ad-m-creative .ad-cc-nofiles { width: 200px; height: 200px; }
/* One column no wider than the card (2.13.1): a long text or link of an ad no longer runs past its edge. */
.ad-m-creative-body { display: grid; gap: 6px; align-content: start; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.ad-m-adlink a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; overflow-wrap: anywhere; }
.ad-m-adlink a:hover { color: var(--text); }
.ad-m-headline { margin: 0; font-size: 14px; font-weight: var(--fw-semi); overflow-wrap: anywhere; }
.ad-m-firsttext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-m-sub { margin: 4px 0 0; font-size: 14px; font-weight: var(--fw-strong); display: flex; align-items: center; gap: 6px; }
/* Where a look of Ads Manager's ads runs (2.13): «в 5 группах объявлений · активно в 2». */
.ad-m-look { margin: 0; display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: var(--fw-semi); color: var(--muted); text-align: left; }
button.ad-m-look { cursor: pointer; }
button.ad-m-look:hover span { text-decoration: underline; text-underline-offset: 3px; }
.ad-m-look.is-running { color: var(--success); }
.ad-m-look-chev { transition: transform 0.15s; }
.ad-m-look[aria-expanded="true"] .ad-m-look-chev { transform: rotate(180deg); }
.ad-m-look-sets { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; }
.ad-m-look-sets li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ad-m-look-sets li .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

@media (max-width: 1080px) {
  /* One column: the pictures first, then what the campaign shows in Meta, then its settings (2.9). */
  .ad-m-page { display: flex; flex-direction: column; gap: 18px; }
  .ad-m-main, .ad-m-side { display: contents; }
  .ad-m-creatives { order: 1; }
  .ad-m-results { order: 2; }
  .ad-m-objects { order: 3; }
  .ad-m-settings-slot { order: 4; }
  .ad-m-audlog { order: 5; }
  .ad-m-history { order: 6; }
}
@media (max-width: 760px) {
  .ad-m-coords { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ad-m-interests { padding-left: 0; }
  .ad-m-creative { grid-template-columns: minmax(0, 1fr); }
  .ad-m-thumb-media { height: 160px; }
  .ad-m-creative .ad-cc-nofiles { width: 160px; height: 160px; }
  .ad-m-thumbs { overflow-x: auto; max-width: 100%; }
  .ad-m-mini strong { font-size: 14px; }
  .ad-m-switchbox { height: 36px; }
}

/* unsaved changes */
/* A changed field: its border turns amber and a line right at it says «Изменено», what it was, and offers to put it
   back or save it. The question before leaving lists the changed fields. */
.change-slot:empty, .head-notes:empty { display: none; }
.head-notes { display: grid; gap: 12px; }
.change-mark { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; font-size: 13px; color: var(--muted); }
.change-text { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 160px; min-width: 0; }
.change-text strong { color: var(--t-amber); font-weight: var(--fw-strong); white-space: nowrap; }
.change-dot, .seg-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--t-amber); flex: none; }
.change-was { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.change-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.change-mark .btn-sm { min-height: 32px; padding: 0 10px; }
.change-mark .form-error { flex-basis: 100%; font-size: 13px; }
.input.is-changed, .textarea.is-changed, .title-input.is-changed { border-color: var(--t-amber); }
.title-input.is-changed:not(:focus) { background: color-mix(in srgb, var(--t-amber-bg) 45%, transparent); }
.field-cell { display: grid; gap: 6px; min-width: 0; align-content: start; }
.unsaved-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.unsaved-list li { display: grid; gap: 2px; min-width: 0; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); border-left: 3px solid var(--t-amber); }
.unsaved-list strong { font-size: 14.5px; }
.unsaved-list small { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.seg-mark { width: 7px; height: 7px; }
@media (max-width: 760px) {
  /* Three answers on a phone: one under another, the main one on top. */
  .sheet-unsaved .sheet-foot { flex-direction: column-reverse; }
  .sheet-unsaved .sheet-foot .btn { width: 100%; }
  .change-mark .btn-sm { min-height: 36px; }
}

/* tiles: the badge of each market line carries the picture of that market's variant; the list has it in the cell */
.line-thumb {
  width: 22px; height: 22px; border-radius: 6px; flex: none; overflow: hidden; display: inline-grid; place-items: center;
  background: var(--surface-3); color: var(--faint); box-shadow: inset 0 0 0 1px var(--border);
}
.line-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.line-thumb .icon { width: 13px; height: 13px; }
.market-tag.has-thumb { gap: 6px; padding: 0 8px 0 0; overflow: hidden; }
.market-tag.has-thumb .line-thumb { border-radius: 0; box-shadow: none; }
.cell-state { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
@media (max-width: 760px) {
  /* No room to spare in a phone's tile: the picture shows where it differs from the tile's or is missing, and then a
     state that does not fit beside it goes under the badge instead of losing its words. */
  .market-tag.is-same { padding: 0 8px; }
  .market-tag.is-same .line-thumb { display: none; }
  .market-line:has(> .market-tag.has-thumb:not(.is-same)) { flex-wrap: wrap; row-gap: 4px; }
}

/* ---------- Analytics & comments (views/analytics.js, comments.js, commentCard.js, postAnalytics.js, analyticsCharts.js) ----------
   Only the theme's tokens: markets --rh-ME and --rh-RS, platforms --fb and --ig, tints --t-*. */
.an-page { transition: opacity 0.15s; }
.an-page.is-loading .an-kpis, .an-page.is-loading .an-charts, .an-page.is-loading .an-top-table, .an-page.is-loading .an-top-cards { opacity: 0.55; }
.an-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.an-controls-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
.an-controls-row .chips { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.an-range { margin: 0; }
.an-daily { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13.5px; color: var(--muted); }
.an-daily .sync-note { flex: 1 1 260px; }
.an-daily.is-stale { background: var(--t-amber-bg); border-color: transparent; color: var(--t-amber); }
/* Tiles: the value, «было N» with the change, a short line of the period. */
.an-kpi { align-content: start; min-width: 0; overflow: hidden; }
.an-kpi .kpi-value { font-variant-numeric: tabular-nums; }
.an-delta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.an-change { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; color: var(--muted); }
.an-change.is-good { color: var(--success); }
.an-change.is-bad { color: var(--danger); }
.an-growth, .an-coverage { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.an-coverage { font-weight: 600; color: var(--faint); }
.an-growth.is-warn { color: var(--t-amber); }
.an-spark { display: block; width: 100%; height: 28px; margin-top: 2px; }
.an-spark path { fill: none; stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; opacity: 0.8; }
button.attention-item { font: inherit; text-align: left; cursor: pointer; width: 100%; }
.attention-item .an-att-body { flex: 1; min-width: 0; display: grid; gap: 6px; }
/* Charts: Montenegro and Serbia side by side. */
.an-block .panel-head { flex-wrap: wrap; }
.an-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.an-pair.is-one { grid-template-columns: minmax(0, 1fr); }
.an-market { display: grid; gap: 6px; min-width: 0; }
.an-market-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 800; }
.an-chart { position: relative; min-width: 0; border-radius: 12px; }
.an-chart:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; }
.an-chart-svg { width: 100%; min-width: 0; }
.an-chart svg { display: block; overflow: visible; }
.an-chart-empty { display: grid; place-items: center; min-height: 120px; padding: 16px; border-radius: 12px; background: var(--surface-2); text-align: center; }
.an-grid { stroke: var(--border); stroke-width: 1; }
.an-axis { stroke: var(--border-strong); stroke-width: 1; }
.an-tick { fill: var(--faint); font-size: 11px; font-weight: 600; font-family: var(--font); font-variant-numeric: tabular-nums; }
.an-line { fill: none; stroke: var(--c, var(--brand)); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.an-line.is-dashed { stroke-width: 1.6; stroke-dasharray: 5 4; opacity: 0.55; }
.an-dot { fill: var(--c, var(--brand)); stroke: var(--surface); stroke-width: 1.5; }
.an-dot.is-dashed { opacity: 0.55; }
.an-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.an-tip {
  position: absolute; top: 6px; z-index: 5; display: grid; gap: 4px; min-width: 150px; max-width: 260px; padding: 9px 11px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lift); font-size: 12.5px; pointer-events: none;
}
.an-tip strong { font-size: 12.5px; }
.an-tip-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 6px; color: var(--muted); }
.an-tip-row b { color: var(--text); font-variant-numeric: tabular-nums; }
.an-key { display: inline-block; width: 12px; height: 3px; border-radius: 2px; background: var(--c, var(--brand)); }
.an-key.is-dashed { background: repeating-linear-gradient(90deg, var(--c, var(--brand)) 0 4px, transparent 4px 7px); opacity: 0.7; }
/* The best posts: a table on a wide screen, cards on a phone. */
.an-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-table th.an-sortable { padding: 0; }
.an-table th.an-sortable button { display: inline-flex; align-items: center; gap: 4px; width: 100%; padding: 12px 14px; border: 0; background: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.an-table th.an-sortable[aria-sort] button { color: var(--text); }
.an-row { cursor: pointer; }
.an-row:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }
.an-table th, .an-table td { padding-left: 10px; padding-right: 10px; }
.an-table .cell-title { min-width: 220px; }
.an-post-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.an-open { margin-left: 6px; background: var(--t-coral-bg); color: var(--t-coral); height: 18px; min-width: 18px; font-size: 11px; padding: 0 5px; }
.an-top-cards { display: none; }
.an-top-card {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow-card); font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.an-top-card .grow { display: grid; gap: 4px; }
.an-top-card strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-top-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.an-top-nums span { display: grid; }
.an-top-nums small { font-size: 11px; color: var(--muted); font-weight: 700; }
.an-top-nums b { font-size: 14px; font-variant-numeric: tabular-nums; }
.an-comments .cm-list { margin-top: 4px; }
/* A post's analytics (a sheet). */
.an-post { display: grid; gap: 18px; }
.an-post h3 { margin: 0; font-size: 15.5px; font-weight: 800; }
.an-post-head { display: flex; gap: 14px; align-items: flex-start; }
.an-post-head .grow { display: grid; gap: 8px; }
.thumb-lg { width: 96px; height: 96px; border-radius: 16px; }
.an-post-caption { margin: 0; font-size: 13.5px; color: var(--muted); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.an-post-numbers { display: grid; gap: 8px; }
.an-metric-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.an-versus { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.an-versus.is-up { color: var(--success); }
.an-versus.is-down { color: var(--danger); }
.an-post-history, .an-post-comments { display: grid; gap: 10px; }
.an-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
/* The title keeps its line; a long row of numbers (a reel's, a story's) goes under it and scrolls sideways. */
.an-post-history > .row > h3 { flex: 1 0 auto; white-space: nowrap; }
.an-seg::-webkit-scrollbar { display: none; }
.an-table-details summary { cursor: pointer; font-weight: 700; color: var(--brand); font-size: 14px; }
.an-table-details .table-wrap { margin-top: 10px; }
.metric-comments { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.metric-comments .badge { height: 18px; min-width: 18px; font-size: 11px; padding: 0 5px; }
.post-analytics { display: flex; flex-wrap: wrap; gap: 6px; }
.post-analytics .badge { height: 18px; min-width: 18px; font-size: 11px; padding: 0 5px; }
/* Comments in «Аналитика» and a post's analytics: a card is the post, the thread (ours marked), the status and the
   actions, the reply under it. The journal «Комментарии» itself is a mailbox (below). */
.cm-list { display: grid; gap: 12px; }
.cm-card { display: grid; gap: 12px; padding: 16px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); min-width: 0; }
.cm-card.is-new { border-left: 4px solid var(--t-amber); }
.cm-card.is-deleted { opacity: 0.75; }
.cm-post { display: flex; align-items: center; gap: 10px; min-width: 0; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.cm-post-thumb { flex: none; }
.cm-post-body { display: grid; gap: 3px; flex: 1; min-width: 0; }
.cm-post-title { font-weight: var(--fw-strong); font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--muted); }
.cm-post-links { display: flex; gap: 2px; flex: none; }
.cm-thread { display: grid; gap: 8px; }
.cm-item { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--radius-card); background: var(--surface-2); min-width: 0; }
.cm-item.is-reply { margin-left: 22px; }
.cm-item.is-ours { background: var(--brand-soft); }
.cm-item.is-target { box-shadow: inset 0 0 0 2px var(--border-strong); }
.cm-item.is-deleted .cm-text { text-decoration: line-through; color: var(--faint); }
.cm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--muted); }
.cm-meta strong { color: var(--text); font-size: 13.5px; font-weight: var(--fw-semi); }
.cm-item.is-ours .cm-meta strong { color: var(--brand-strong); }
.cm-likes, .cm-flag { display: inline-flex; align-items: center; gap: 3px; font-weight: var(--fw-semi); }
.cm-likes { color: var(--muted); font-size: 12.5px; }
.cm-flag { color: var(--t-amber); }
.cm-text { margin: 0; font-size: 14.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.cm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.cm-foot .pill { white-space: normal; height: auto; min-height: 26px; padding: 3px 10px; }
.cm-busy { display: inline-flex; align-items: center; gap: 6px; }
.cm-busy .spinner, .cm-composer-none .spinner { width: 14px; height: 14px; border-width: 2px; }
.cm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cm-log summary { cursor: pointer; font-size: 12.5px; font-weight: var(--fw-semi); color: var(--muted); }
.cm-log ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.cm-log li { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 13px; }
.cm-log li small { color: var(--muted); }
.cm-reply { display: grid; gap: 8px; padding: 12px; border-radius: var(--radius-card); background: var(--surface-2); }
.cm-reply-field { min-height: 92px; }
.cm-reply-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; }
.cm-reply-count { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cm-reply-count.is-low { color: var(--t-amber); font-weight: var(--fw-semi); }
.cm-reply-error:empty { display: none; }
.cm-reply-actions { display: flex; justify-content: flex-end; gap: 8px; }
.cm-quote { margin: 0; padding: 10px 12px; border-left: 3px solid var(--border-strong); border-radius: 0 var(--radius-field) var(--radius-field) 0; background: var(--surface-2); font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
/* «авто»: marked as not needing an answer by itself (an old comment of the first reading); the why is in its hint. */
.cm-auto { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-sm); border: 1px dashed var(--border-strong); font-size: 11px; font-weight: var(--fw-semi); color: var(--muted); cursor: help; white-space: nowrap; }
.cm-filter-chip { display: inline-flex; align-items: center; gap: 6px; justify-self: start; max-width: 100%; padding: 2px 2px 2px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font-size: 13.5px; font-weight: var(--fw-semi); }
.cm-filter-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-filter-chip .tool { color: inherit; }
.cm-pick-list { display: grid; max-height: min(60vh, 520px); overflow-y: auto; }
.cm-pick { border: 0; background: none; font: inherit; color: inherit; width: 100%; text-align: left; cursor: pointer; }

/* ---------- «Комментарии» (2.5.1): a mailbox — the list on the left, the open thread on the right; on a phone and a
   narrow screen the list, and the thread over the whole screen ---------- */
.cm-page { max-width: 1440px; gap: 16px; }
.cm-page > .stack:empty { display: none; }
.cm-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.cm-sum-open { color: var(--text); font-weight: var(--fw-semi); }
.cm-sum-stale { display: inline-flex; align-items: center; gap: 4px; color: var(--t-amber); font-weight: var(--fw-semi); }
.cm-sum-dot { color: var(--faint); }
.cm-filters { gap: 10px; }
/* The daily synchronisation as a line in the head of the page. */
.cm-daily:empty { display: none; }
.cm-daily .an-daily { padding: 2px 0 0; border: 0; border-radius: 0; background: none; gap: 4px 12px; font-size: 13px; }
.cm-daily .an-daily.is-stale { color: var(--t-amber); }
.cm-daily .an-daily .sync-note { flex: 0 1 auto; }
.cm-daily .an-daily .btn { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.cm-filters-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cm-filters-top > .chips-row { flex: 1 1 auto; }
.cm-order { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cm-label-row { gap: 10px; }
.cm-label-title { flex: none; font-size: 11.5px; font-weight: var(--fw-semi); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.cm-label-row .chip { height: 30px; padding: 0 11px; font-size: 13px; }
.cm-toolbar .search { flex: 1 1 220px; }
.cm-sort { max-width: 230px; }
.cm-inbox { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.cm-page.is-wide .cm-inbox { grid-template-columns: minmax(340px, 0.82fr) minmax(0, 1.18fr); }
.cm-listpane { min-width: 0; display: grid; gap: 8px; align-content: start; container: cm-list / inline-size; }
.cm-listhead:empty { display: none; }
.cm-listhead:has(.bulkbar) { position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top) + 8px); z-index: 7; }
@media (min-width: 761px) { .cm-bulk { position: static; } }
/* «Новый креатив» is not what the journal is for: the round button would cover the rows on a phone. */
body[data-route="comments"] .fab { display: none; }
.cm-bulk .btn:disabled { opacity: 0.45; }
.cm-listhead-row { display: flex; align-items: center; gap: 4px; min-height: 32px; }
.cm-listhead-text { font-size: 13px; color: var(--muted); font-weight: var(--fw-medium); }
.cm-rows { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; }
.cm-rows > * { min-width: 0; }
.cm-rows > .empty { padding: 40px 20px; }
.cm-more { display: flex; justify-content: center; min-height: 1px; }
/* One comment in a row: the check box, the circle with initials, who and when, two lines of the text, where. */
.cm-row { position: relative; display: flex; align-items: stretch; min-width: 0; border-top: 1px solid var(--border); background: var(--surface);
  scroll-margin: calc(var(--topbar-h) + env(safe-area-inset-top) + 56px) 0 16px; }
.cm-rows > .cm-row:first-child, .cm-rows > .cm-run:first-child, .cm-group-body > .cm-row:first-child { border-top: 0; }
.cm-row:hover { background: var(--surface-2); }
.cm-row.is-picked { background: color-mix(in srgb, var(--brand-soft) 55%, var(--surface)); }
.cm-row.is-selected { background: var(--brand-soft); }
.cm-row.is-selected::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); }
.cm-row.is-done .cm-row-main, .cm-row.is-done .cm-avatar { opacity: 0.6; }
.cm-row-pick { flex: none; display: grid; justify-items: center; align-content: start; width: 34px; padding: 16px 0 0 6px; cursor: pointer; }
.cm-row-pick input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.cm-row-open { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px 12px 8px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cm-row:not(:has(.cm-row-pick)) .cm-row-open { padding-left: 14px; }
.cm-row-open:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; border-radius: 0; }
.cm-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: var(--fw-semi); letter-spacing: 0.02em; background: var(--surface-3); color: var(--muted); }
.cm-avatar.tone-0 { background: var(--t-blue-bg); color: var(--t-blue); }
.cm-avatar.tone-1 { background: var(--t-teal-bg); color: var(--t-teal); }
.cm-avatar.tone-2 { background: var(--t-violet-bg); color: var(--t-violet); }
.cm-avatar.tone-3 { background: var(--t-rose-bg); color: var(--t-rose); }
.cm-avatar.tone-4 { background: var(--t-indigo-bg); color: var(--t-indigo); }
.cm-avatar.tone-5 { background: var(--t-green-bg); color: var(--t-green); }
.cm-avatar.is-ours { background: var(--brand); color: var(--on-brand); }
.cm-row-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.cm-row-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cm-row-author { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: var(--fw-semi); }
.cm-row-top time { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.cm-row-top .spacer { min-width: 4px; }
.cm-row-text { font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cm-row.is-deleted .cm-row-text { text-decoration: line-through; color: var(--faint); }
.cm-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 12px; color: var(--muted); }
.cm-row-meta .market-tag { height: 18px; padding: 0 6px; font-size: 10.5px; }
.cm-row-meta .platform .icon { width: 15px; height: 15px; }
.cm-meta-n { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.cm-meta-n .icon { width: 13px; height: 13px; }
.thumb-xs { width: 22px; height: 22px; border-radius: var(--radius-sm); }
.thumb-xs .icon { width: 13px; height: 13px; }
/* How long a comment waits: amber from a day on. */
.cm-wait { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--t-slate-bg); color: var(--t-slate); font-size: 11.5px; font-weight: var(--fw-semi); white-space: nowrap; }
.cm-wait .icon { width: 12px; height: 12px; }
.cm-wait.is-stale { background: var(--t-amber-bg); color: var(--t-amber); }
/* The marks of the text. */
.cm-label { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: var(--fw-semi); white-space: nowrap; }
.cm-label.is-question { background: var(--t-blue-bg); color: var(--t-blue); }
.cm-label.is-spam { background: var(--t-coral-bg); color: var(--t-coral); }
.cm-label.is-emoji { background: var(--t-violet-bg); color: var(--t-violet); }
.cm-row-status { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.cm-row-status.is-answered { color: var(--t-green); font-weight: var(--fw-semi); }
.cm-row-status .icon { width: 13px; height: 13px; }
.cm-row-draft, .cm-row-claim { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: var(--fw-semi); color: var(--t-violet); }
.cm-row-claim { color: var(--t-amber); }
.cm-row-draft .icon, .cm-row-claim .icon { width: 12px; height: 12px; }
.cm-row-skeleton { height: 78px; border-radius: 0; border-top: 1px solid var(--surface); }
/* Neighbouring comments of one post: one group under the post's head. */
.cm-run { border-top: 1px solid var(--border-strong); }
.cm-run-head { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px 6px 14px; background: var(--surface-2); font-size: 12.5px; color: var(--muted); }
.cm-run-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: var(--fw-semi); }
.cm-run-meta { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.cm-run-meta .market-tag { height: 18px; padding: 0 6px; font-size: 10.5px; }
.cm-run-meta .icon { width: 15px; height: 15px; }
.cm-run-head .tool-sm { width: 28px; height: 28px; }
.cm-run .cm-row { border-top-color: color-mix(in srgb, var(--border) 65%, transparent); }
.cm-run .cm-row:first-of-type { border-top-color: var(--border); }
.cm-run .cm-row-open { padding-top: 10px; padding-bottom: 10px; }
/* A narrow list (a computer of 1100–1300 px): a comment that waits says how long instead of when it came. */
@container cm-list (max-width: 440px) {
  .cm-row-top time:has(~ .cm-wait) { display: none; }
  .cm-row-open { gap: 8px; }
}
/* The view by creatives: a creative (or a post) with its counts, its comments under it. */
.cm-group { border-top: 1px solid var(--border); }
.cm-rows > .cm-group:first-child { border-top: 0; }
.cm-group-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.cm-group-head:hover { background: var(--surface-2); }
.cm-group-head .grow { display: grid; gap: 4px; }
.cm-group-head strong { font-size: 14px; font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-group-counts { display: grid; justify-items: end; gap: 2px; flex: none; }
.cm-group-counts small { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.cm-group-body { border-top: 1px solid var(--border); background: var(--surface); }
.cm-group.is-open .cm-group-head { background: var(--surface-2); }
.cm-group-none { padding: 12px 14px; }

/* The thread: on a computer a panel that stays in view beside the list, the reply field fixed at its bottom. */
.cm-threadpane { display: none; min-width: 0; container: cm-pane / inline-size; }
.cm-page.is-wide .cm-threadpane {
  display: block; position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top) + 12px);
  height: var(--cm-pane-h, calc(100dvh - var(--topbar-h) - env(safe-area-inset-top) - 24px)); min-height: 360px;
}
.cm-th { height: 100%; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; }
.cm-th-bar { flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.cm-th-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 12px; padding: 14px 16px 18px; }
.cm-th-foot { flex: none; padding: 10px 14px 12px; border-top: 1px solid var(--border); background: var(--surface); }
.cm-th-empty { height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; border: 1px dashed var(--border-strong); border-radius: var(--radius-card); color: var(--muted); text-align: center; }
.cm-th-empty .icon { width: 28px; height: 28px; color: var(--faint); }
.cm-th-empty p { margin: 0; max-width: 340px; }
.cm-th-post { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; }
.cm-th-thumb { flex: none; display: block; border-radius: var(--radius-card); }
.cm-th-post .thumb { width: 56px; height: 56px; }
.cm-th-post-body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.cm-th-caption { margin: 0; font-size: 13.5px; font-weight: var(--fw-semi); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cm-th-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--muted); }
.cm-th-code { font-family: var(--mono); font-size: 11.5px; }
.cm-th-links { display: flex; flex-wrap: wrap; gap: 2px 4px; margin-left: -8px; }
.cm-th-links .btn { min-height: 30px; padding: 0 8px; font-size: 12.5px; gap: 5px; }
.cm-th-links .btn .icon { width: 15px; height: 15px; }
.cm-th-tools { flex: none; display: flex; align-items: center; gap: 6px; }
.cm-th-post-meta > span { white-space: nowrap; }
/* A narrow thread beside the list: its buttons and links as icons (their names in the hints), a smaller picture. */
@container cm-pane (max-width: 600px) {
  .cm-th-tool-label, .cm-th-links .btn > span { display: none; }
  .cm-th-links { margin-left: -6px; gap: 0; }
  .cm-th-links .btn { padding: 0 7px; }
  .cm-th-post { gap: 10px; }
  .cm-th-post .thumb { width: 44px; height: 44px; }
  .cm-th-bar { padding: 10px 12px; }
  .cm-th-body { padding: 12px 12px 16px; }
  .cm-th-foot { padding: 8px 12px 10px; }
  .cm-composer-from { display: none; }
}
.cm-th-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cm-th-status .pill { height: 26px; }
.cm-spam { font-size: 13.5px; }
.cm-th-thread { display: grid; gap: 10px; }
.cm-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 92%; min-width: 0; }
.cm-msg .cm-avatar { width: 28px; height: 28px; font-size: 11px; }
.cm-msg.is-reply { margin-left: 24px; }
.cm-msg.is-ours { margin-left: auto; max-width: 86%; }
.cm-msg-bubble { min-width: 0; display: grid; gap: 3px; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: var(--surface-2); border: 1px solid var(--border); }
.cm-msg.is-ours .cm-msg-bubble { border-radius: 14px 14px 4px 14px; background: var(--brand-soft); border-color: transparent; }
.cm-msg.is-target .cm-msg-bubble { border-color: var(--brand); box-shadow: 0 0 0 2px var(--ring); }
.cm-msg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 12px; color: var(--muted); }
.cm-msg-meta strong { color: var(--text); font-size: 13px; font-weight: var(--fw-semi); }
.cm-msg.is-ours .cm-msg-meta strong { color: var(--brand-strong); }
.cm-msg-text { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.cm-msg.is-deleted .cm-msg-text { text-decoration: line-through; color: var(--faint); }
/* The reply field: quick replies and the @name over it, the count of what is left, the buttons under it. */
.cm-composer { display: grid; gap: 8px; }
.cm-composer-tools { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cm-quick { padding: 0 9px; }
.cm-mention { display: inline-flex; align-items: center; gap: 3px; min-width: 0; max-width: 240px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: var(--fw-medium); }
.cm-mention span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-mention[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }
.cm-composer-count { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-composer-count.is-low { color: var(--t-amber); font-weight: var(--fw-semi); }
.cm-composer-field { min-height: 64px; max-height: 40vh; resize: none; overflow-y: auto; }
.cm-composer-error:empty, .cm-composer-notice:empty { display: none; }
.cm-composer-warn { display: grid; gap: 4px; padding: 8px 10px; border-radius: var(--radius-field); background: var(--warn-soft); color: var(--warn); font-size: 13px; font-weight: var(--fw-medium); }
.cm-composer-warn p { margin: 0; display: flex; align-items: flex-start; gap: 6px; }
.cm-composer-warn .icon { margin-top: 2px; }
.cm-composer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cm-composer-from { flex: 1 1 160px; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-composer-foot .spacer { display: none; }
.cm-kbd { margin-left: 2px; padding: 1px 5px; border-color: color-mix(in srgb, currentColor 35%, transparent); background: transparent; color: inherit; opacity: 0.85; font-size: 11px; }
.cm-composer-none { display: flex; align-items: center; gap: 8px; }
/* On a phone and a narrow screen: the thread over the whole screen (a panel over the dimmed page from 761 px). */
.cm-sheet { position: fixed; inset: 0; z-index: 45; display: flex; justify-content: center; background: var(--bg); animation: cm-in 0.18s ease-out; }
.cm-sheet .cm-th { width: 100%; max-width: 860px; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.cm-th.is-narrow .cm-th-bar { align-items: center; padding: calc(8px + env(safe-area-inset-top)) var(--gutter-r) 8px var(--gutter); }
.cm-th.is-narrow .cm-th-body { padding: 14px var(--gutter-r) 18px var(--gutter); }
.cm-th.is-narrow .cm-th-foot { padding: 10px var(--gutter-r) calc(10px + env(safe-area-inset-bottom)) var(--gutter); }
.cm-th.is-narrow .cm-th-post { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-2); }
.cm-th-bar-title { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.cm-th-bar-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: var(--fw-semi); }
.cm-th-bar-title small { color: var(--muted); font-size: 12px; }
html.has-cm-sheet { overflow: hidden; }
@keyframes cm-in { from { opacity: 0; transform: translateY(8px); } }
@media (min-width: 761px) {
  .cm-sheet { padding: 16px; background: var(--backdrop); }
  .cm-sheet .cm-th { border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-lift); }
  .cm-th.is-narrow .cm-th-bar { padding-top: 10px; }
}
/* Quick replies: the picker over the field and the sheet of the list. */
.popover:has(.cm-tpl-pick) { width: min(420px, calc(100vw - 16px)); padding: 10px; }
.cm-tpl-pick { display: grid; gap: 8px; }
.cm-tpl-pick-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.cm-tpl-tabs .seg button { height: 28px; padding: 0 9px; }
.cm-tpl-list { display: grid; gap: 2px; max-height: min(46vh, 380px); overflow-y: auto; }
.cm-tpl-item { display: grid; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-field); background: none; color: var(--text); text-align: left; }
.cm-tpl-item:hover, .cm-tpl-item:focus-visible { background: var(--surface-3); outline: none; }
.cm-tpl-item strong { font-size: 13px; font-weight: var(--fw-semi); }
.cm-tpl-item span { font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-tpl-pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.cm-tpl-manage { display: grid; gap: 8px; }
.cm-tpl-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.cm-tpl-row .grow { display: grid; gap: 4px; }
.cm-tpl-row strong { font-size: 14px; font-weight: var(--fw-semi); }
.cm-tpl-row p { margin: 0; font-size: 13.5px; white-space: pre-line; overflow-wrap: anywhere; }
.cm-tpl-row-actions { flex: none; display: flex; gap: 2px; }
.cm-tpl-form { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--brand); border-radius: var(--radius-card); background: var(--surface-2); }
.cm-tpl-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.cm-keys .kbd { min-width: 70px; text-align: center; }
.cm-sheet-filters { display: grid; gap: 10px; }
.cm-sheet-filters .select, .cm-sheet-filters .btn { width: 100%; }
.conn-daily-run { display: grid; gap: 6px; padding: 12px 0 4px; }
.conn-daily-run p { margin: 0; font-size: 13.5px; }
.conn-daily-errors { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); display: grid; gap: 2px; }
.conn-daily-errors strong { color: var(--text); }
@media (max-width: 860px) {
  .an-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-kpi .kpi-value { font-size: 24px; }
  .an-top-table { display: none; }
  .an-top-cards { display: grid; gap: 10px; }
  .an-controls-row .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .an-post-head .thumb-lg { width: 72px; height: 72px; }
  .cm-card { padding: 12px; }
  .cm-item.is-reply { margin-left: 12px; }
  .cm-foot .spacer { display: none; }
  .cm-actions { width: 100%; }
  .cm-actions .btn { flex: 1 1 auto; }
  .cm-post-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  /* The journal on a phone: the search, then «Фильтры» and the order side by side; the list from edge to edge. */
  .cm-keys-btn, .cm-sum-dot { display: none; }
  .cm-summary { column-gap: 10px; }
  .cm-toolbar { display: grid; gap: 8px; }
  .cm-toolbar .search { min-width: 0; }
  .cm-toolbar-row { display: flex; gap: 8px; min-width: 0; }
  .cm-toolbar-row > * { flex: 1 1 0; min-width: 0; max-width: none; }
  .cm-filters-btn .badge { margin-left: 2px; }
  .cm-filters-btn.is-set { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }
  .cm-label-title { display: none; }
  .cm-rows { margin: 0 calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter)); border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .cm-row-open { padding: 12px var(--gutter-r) 12px var(--gutter); }
  .cm-row { scroll-margin-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .cm-row:has(.cm-row-pick) .cm-row-open { padding-left: 8px; }
  .cm-row-pick { padding-left: var(--gutter); width: calc(var(--gutter) + 24px); }
  .cm-run-head { padding-left: var(--gutter); padding-right: calc(var(--gutter-r) - 6px); }
  .cm-kbd, .cm-composer-from { display: none; }
  .cm-composer-foot .btn { flex: 1 1 auto; }
  .cm-msg, .cm-msg.is-ours { max-width: 100%; }
  .cm-th.is-narrow .cm-th-tool-label { display: none; }
  /* The head: the title and its numbers on the left, the quick replies and the analytics on the right. */
  .cm-page .page-head { flex-wrap: nowrap; align-items: flex-start; }
  .cm-page .page-head .grow { flex: 1 1 auto; }
  .cm-page .page-actions { flex-wrap: nowrap; }
  .cm-page .page-actions .btn { padding: 0 11px; }
}
@media (prefers-reduced-motion: reduce) { .an-page { transition: none; } }
@media (forced-colors: active) { .an-line, .an-dot, .an-key, .an-spark path { forced-color-adjust: none; } }

/* --- Stories and reels (2.5) --------------------------------------------------------------------------------------- */
/* The two branches of the collection, a story's or a reel's tile (9:16) and its marks. */
/* Posts | Stories | Reels: only on a phone (2.19), where one tab holds the three; the side menu has an item for each. */
.branch-switch { display: none; margin: 2px 0 14px; }
.branch-switch a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 7px; color: var(--muted); font-weight: var(--fw-semi); text-decoration: none; }
.branch-switch a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--border); }
.branch-switch .icon { width: 16px; height: 16px; }
.old-stories { margin-bottom: 14px; }
.grid-vertical { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.concept.is-vertical .concept-media { aspect-ratio: 9 / 16; }
/* A video without a picture of its first frame: dark like a player, not the dashed "nothing yet". */
.no-media.is-video { padding: 12px; text-align: center; background: #1c2128; color: rgba(255, 255, 255, 0.72); }
.format-flag { position: absolute; top: 10px; left: 10px; max-width: calc(100% - 96px); }
.format-flag-time { display: inline-flex; align-items: center; gap: 3px; margin-left: 2px; padding-left: 6px; border-left: 1px solid rgba(255, 255, 255, 0.35); font-variant-numeric: tabular-nums; }
.format-flag-time .icon { width: 12px; height: 12px; }
.format-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 99px; font-size: 11.5px; font-weight: var(--fw-semi); background: var(--t-violet-bg); color: var(--t-violet); }
.format-chip.f-story { background: var(--t-teal-bg); color: var(--t-teal); }
.format-chip.f-post { background: var(--surface-3); color: var(--muted); }
.format-chip .icon { width: 13px; height: 13px; }
.thumb.is-vertical, .thumb-vertical { width: 40px; height: 64px; border-radius: 9px; }
.line-thumb .icon { width: 12px; height: 12px; }

/* By series (2.18): a block per series, its episodes one under another, each a strip of 9:16 tiles in the order one
   country gets them; the strip scrolls sideways, the series folds. */
.series-list { display: grid; gap: 16px; min-width: 0; }
.series-note { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; color: var(--muted); font-size: 13px; }
.series-note .icon { flex: none; }
.series { min-width: 0; padding: 14px 16px 16px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.series.is-closed { padding-bottom: 14px; }
.series-head { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; }
.series-toggle { display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin-left: -6px; padding: 4px 8px 4px 4px; border: 0; border-radius: 8px; background: none; color: var(--text); font-size: 17px; font-weight: var(--fw-strong); text-align: left; cursor: pointer; }
.series-toggle:hover { background: var(--surface-2); }
.series-toggle .icon { flex: none; width: 18px; height: 18px; color: var(--muted); }
.series-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.series-sub { margin: 0; min-width: 0; color: var(--muted); font-size: 13px; }
.series-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.series-episodes { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.series-episode { display: grid; gap: 8px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--border); }
.episode-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; }
.episode-title { font-weight: var(--fw-semi); }
.episode-when { color: var(--muted); font-size: 13px; }
.episode-head .tool { margin-left: auto; }
.episode-strip { display: flex; gap: 10px; min-width: 0; padding: 2px 2px 6px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.episode-strip.is-wrap { flex-wrap: wrap; overflow: visible; margin-top: 12px; }
.series-tile { flex: none; display: grid; align-content: start; gap: 4px; width: 108px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--text); text-align: left; cursor: pointer; scroll-snap-align: start; }
.series-thumb { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 9 / 16; border-radius: 10px; background: var(--surface-3); border: 1px solid var(--border); transition: border-color 0.15s, box-shadow 0.15s; }
.series-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.series-none .icon { width: 22px; height: 22px; color: var(--faint); }
.series-tile:hover .series-thumb { border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.series-tile:focus-visible { outline: none; }
.series-tile:focus-visible .series-thumb { outline: 3px solid var(--ring); outline-offset: 2px; }
.series-tile.is-selected .series-thumb { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.series-reel, .series-flag, .series-check { position: absolute; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: rgba(14, 22, 30, 0.62); color: #fff; }
.series-reel { top: 6px; right: 6px; }
.series-flag { top: 6px; left: 6px; background: var(--danger); }
.series-check { right: 6px; bottom: 6px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }
.series-tile.is-selected .series-check { background: var(--brand); color: var(--on-brand); }
.series-reel .icon, .series-flag .icon, .series-check .icon { width: 14px; height: 14px; }
.series-when { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.series-when b { font-weight: var(--fw-semi); white-space: nowrap; }
.series-part { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .series { padding: 12px; }
  .series-head { grid-template-columns: minmax(0, 1fr) auto; }
  .series-sub { grid-row: 2; grid-column: 1 / -1; }
  .series-actions { grid-row: 3; grid-column: 1 / -1; justify-content: flex-start; }
  .series-tile { width: 92px; }
}

/* The highlight of a series (2.19, views/highlights.js): the slides in order, a tick each; beside them (under them on a
   phone) the round cover and the times to pick in Instagram's archive. */
.hl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); grid-template-areas: 'top top' 'list side'; gap: 14px 20px; align-items: start; }
.hl-top { grid-area: top; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.hl-count { margin: 0; font-size: 14px; font-weight: var(--fw-semi); }
.hl-note { display: flex; align-items: flex-start; flex-basis: 100%; gap: 6px; margin: 0; color: var(--muted); font-size: 13px; }
.hl-note .icon { flex: none; margin-top: 2px; }
.hl-slides { grid-area: list; display: grid; gap: 2px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.hl-row { display: grid; grid-template-columns: auto 22px 40px minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: pointer; }
.hl-row:hover { background: var(--surface-2); }
.hl-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.hl-num { color: var(--muted); font-size: 12px; font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; text-align: right; }
.hl-thumb { display: grid; place-items: center; overflow: hidden; width: 40px; aspect-ratio: 9 / 16; border-radius: 6px; background: var(--surface-3); border: 1px solid var(--border); }
.hl-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hl-thumb .icon { width: 16px; height: 16px; color: var(--faint); }
.hl-text { display: grid; gap: 2px; min-width: 0; }
.hl-text strong { overflow: hidden; font-size: 14px; font-weight: var(--fw-semi); text-overflow: ellipsis; white-space: nowrap; }
.hl-text small { color: var(--muted); font-size: 12px; }
.hl-text small.is-posted { color: var(--success); }
.hl-slide.is-off .hl-thumb, .hl-slide.is-off .hl-text { opacity: 0.5; }
.hl-empty { padding: 12px; color: var(--muted); }
.hl-side { grid-area: side; position: sticky; top: 0; display: grid; gap: 14px; min-width: 0; }
.hl-cover, .hl-archive { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--radius-card); background: var(--surface-2); border: 1px solid var(--border); }
.hl-cover h3, .hl-archive h3 { margin: 0; font-size: 14px; }
.hl-cover .hint, .hl-archive .hint { margin: 0; font-size: 12.5px; }
.hl-cover-row { display: flex; align-items: center; gap: 12px; }
.hl-circle { flex: none; display: grid; place-items: center; overflow: hidden; width: 88px; height: 88px; border-radius: 50%; background: var(--surface-3); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--border-strong); }
.hl-circle img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hl-circle .icon { width: 24px; height: 24px; color: var(--faint); }
.hl-cover-text { display: grid; gap: 8px; min-width: 0; }
.hl-range { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.hl-range input { width: 100%; accent-color: var(--brand); }
.hl-times { display: grid; gap: 4px; margin: 0; padding-left: 22px; font-size: 13px; }
.hl-times b { margin-right: 6px; font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.hl-times span { color: var(--muted); }
.hl-missing { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--warn); font-size: 12.5px; }
.hl-missing .icon { flex: none; margin-top: 2px; }
@media (max-width: 760px) {
  .hl { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'top' 'list' 'side'; }
  .hl-side { position: static; }
}

/* A story's or a reel's media in the creative's window: 9:16, the video playable, its facts and checks under it. */
.drop-vertical { aspect-ratio: 9 / 16; max-height: 560px; justify-self: center; width: min(100%, 315px); }
.drop-vertical video, .drop-vertical .vertical-media { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.drop-busy strong { position: absolute; bottom: 18px; font-size: 15px; font-variant-numeric: tabular-nums; }
.drop-busy { flex-direction: column; }
.media-facts { display: flex; align-items: center; gap: 6px; margin: 0; }
.media-facts .icon { flex: none; width: 14px; height: 14px; }
.checks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.check-item { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; line-height: 1.4; }
.check-item .icon { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.check-item.is-error { color: var(--danger); }
.check-item.is-warning { color: var(--warn); }
.check-item strong { font-weight: var(--fw-semi); }
.check-ok { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--success); }
.check-ok .icon { width: 15px; height: 15px; }
.reel-options { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.reel-cover { display: flex; gap: 12px; align-items: flex-start; }
.reel-cover-thumb { flex: none; width: 54px; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--surface-3); color: var(--faint); }
.reel-cover-thumb img { width: 100%; height: 100%; object-fit: cover; }
.reel-cover strong { display: block; font-size: 13.5px; }
.reel-cover .hint { margin: 2px 0 8px; }
.reel-options .check small { display: block; margin-top: 2px; }
.story-text { margin-top: 2px; }
.format-notes { display: grid; gap: 8px; margin-top: 10px; }
.format-notes .hint { margin: 0; }
.version-body img.is-vertical { aspect-ratio: 9 / 16; max-height: 220px; width: auto; }

/* The 9:16 preview: a phone with the chrome of a story or a reel of Instagram or Facebook. */
.phone { justify-self: center; width: min(100%, 290px); padding: 8px; border-radius: 30px; background: #0e1116; box-shadow: var(--shadow-lift); }
.phone-screen { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #1c2128; color: #fff; }
.phone-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: rgba(255, 255, 255, 0.65); font-size: 13px; text-align: center; padding: 20px; }
.phone-empty .icon { width: 30px; height: 30px; }
.phone-head { position: absolute; inset: 0 0 auto; padding: 10px 10px 18px; background: linear-gradient(rgba(0, 0, 0, 0.45), transparent); pointer-events: none; }
.phone-bars { display: flex; gap: 3px; margin-bottom: 8px; }
.phone-bars i { flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.95); }
.phone-bars i.is-off { background: rgba(255, 255, 255, 0.4); }
.phone-who { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.phone-who strong { font-weight: var(--fw-strong); }
.phone-who small { color: rgba(255, 255, 255, 0.75); }
.phone-avatar { width: 26px; height: 26px; border-radius: 50%; padding: 2px; background: conic-gradient(from 200deg, #f9ce34, #ee2a7b, #6228d7, #f9ce34); }
.phone.is-fb .phone-avatar { background: #1877f2; }
.phone-avatar span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #1c2128; font-size: 10px; font-weight: var(--fw-strong); }
.phone-story-foot { position: absolute; inset: auto 0 0; display: flex; align-items: center; gap: 10px; padding: 12px 10px; pointer-events: none; }
.phone-reply { flex: 1; height: 30px; display: flex; align-items: center; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 99px; font-size: 11.5px; color: rgba(255, 255, 255, 0.85); }
.phone-story-foot .icon, .phone-reel-side .icon { width: 20px; height: 20px; }
.phone-reel { position: absolute; inset: auto 0 0; display: flex; align-items: flex-end; gap: 10px; padding: 30px 10px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); pointer-events: none; }
.phone-reel-text { flex: 1; min-width: 0; font-size: 12px; }
.phone-reel-text p { margin: 4px 0 0; line-height: 1.35; overflow-wrap: anywhere; }
.phone-reel-side { display: grid; gap: 14px; justify-items: center; }
.phone video.phone-media { pointer-events: auto; }

/* The timeline's channels: a market's head row (its goal and counts, folding) and a row per platform and format. */
.scale-lane-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--surface-2); }
.scale-lane-head strong { font-size: 13px; }
.scale-fold { width: 26px; height: 26px; }
.scale-lane-sum { display: flex; align-items: center; padding: 6px 10px 6px 44px; color: var(--muted); }
.scale-channel { display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 16px; font-size: 12.5px; color: var(--text); }
.scale-channel .icon { flex: none; width: 14px; height: 14px; }
.scale-channel.p-instagram > .icon:first-child { color: var(--ig); }
.scale-channel.p-facebook > .icon:first-child { color: var(--fb); }
.scale-channel-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scale-channel-info { color: var(--faint); }
.scale-channel.is-empty { color: var(--muted); padding-top: 3px; padding-bottom: 3px; }
.scale-empty { display: flex; align-items: center; min-height: 26px; padding: 0 12px; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border-strong); color: var(--faint); font-size: 12px; background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.scale-empty span { position: sticky; left: calc(var(--lane-w) + 12px); }
.scale-day[data-channel] { min-height: 46px; }
.is-card .scale-day[data-channel] { min-height: 66px; }
.is-thumb .scale-day[data-channel] { min-height: 60px; }
.is-dot .scale-day[data-channel] { min-height: 24px; }
.scale-day.is-foreign { background-image: var(--day-hatch); }
.scale-first { z-index: 1; display: grid; place-items: center start; padding-left: 2px; color: var(--success); pointer-events: auto; }
.scale-first .icon { width: 14px; height: 14px; }
.wk-formats { display: inline-flex; gap: 4px; }
.wk-format { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px; border-radius: 99px; font-size: 11.5px; font-weight: var(--fw-semi); background: var(--t-violet-bg); color: var(--t-violet); font-variant-numeric: tabular-nums; }
.wk-format.f-story { background: var(--t-teal-bg); color: var(--t-teal); }
.wk-format .icon { width: 12px; height: 12px; }
.rel.is-paired { box-shadow: 0 0 0 2px var(--brand); z-index: 1; }
.rel-format { display: inline-grid; place-items: center; flex: none; color: var(--t-violet); }
.rel-format.f-story { color: var(--t-teal); }
.rel-format .icon { width: 12px; height: 12px; }
.rel-platforms { display: inline-flex; gap: 1px; flex: none; }
.rel-platforms .platform { display: inline-grid; }
.icon-xs { width: 11px; height: 11px; }
.rel--line .rel-platforms { flex-direction: column; justify-content: center; gap: 1px; }
.rel--line .rel-platforms .icon { width: 9px; height: 9px; display: block; }
.rel-thumb-format { position: absolute; right: -4px; bottom: -4px; z-index: 1; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 4px; background: var(--t-violet); color: #fff; box-shadow: 0 0 0 1.5px var(--surface); }
.rel-thumb-format.f-story { background: var(--t-teal); }
.rel-thumb-format .icon { width: 9px; height: 9px; }
/* A picture still on its way: the format's sign on a quiet fill, covered by the picture once it is there. */
.rel-thumb .rel-thumb-sign { width: 60%; height: 60%; max-width: 16px; max-height: 16px; color: var(--faint); }
.rel-thumb img { opacity: 0; transition: opacity 0.2s; }
.rel-thumb img.is-loaded { opacity: 1; }
.cal-title-btn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; margin: -2px -6px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
.cal-title-btn:hover { background: var(--surface-3); }
.month-picker { display: grid; gap: 14px; }
.month-picker-years { display: flex; flex-wrap: wrap; gap: 6px; }
.month-picker-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.month-picker-months .btn { justify-content: center; text-transform: capitalize; }
.month-picker-months .btn.is-now { box-shadow: inset 0 0 0 1px var(--brand); }
.cal-hidden { margin-bottom: 10px; }
.cal-hidden p { flex: 1; }
.vscale-market { margin-bottom: 10px; }
.vscale-market .seg { width: 100%; }
.vscale-market .seg button { flex: 1; }
.vscale-platform { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; font-weight: var(--fw-semi); }
.vscale-platform.p-instagram .icon { color: var(--ig); }
.vscale-platform.p-facebook .icon { color: var(--fb); }
.old-stories-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.old-stories-strip figure { flex: none; display: grid; gap: 4px; margin: 0; width: 76px; }
.old-stories-strip img { width: 76px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; background: var(--surface-3); }
.old-stories-strip figcaption { font-size: 10px; color: var(--muted); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bullets { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
/* The legend of the timeline: the market's first post, the two marks of one release; the rhythm's reels and stories. */
.cal-mark-first { display: inline-grid; place-items: center; color: var(--success); }
.cal-mark-first .icon { width: 14px; height: 14px; }
.cal-mark-pair { width: 18px; height: 12px; border-radius: 4px; background: var(--surface); box-shadow: 0 0 0 2px var(--brand); }
.cal-mark .rel-format .icon { width: 14px; height: 14px; }
.rh-tip-formats { color: var(--muted); }

/* «Комментарии»: answers to stories are direct messages, said under the filters. */
.cm-stories { display: flex; align-items: center; gap: 6px; margin: 0; }
.cm-stories .icon { flex: none; }

/* «Аналитика» · «Сторис и рилс»: the counts of the formats, the reels' and the stories' numbers with their cards. */
.an-formats { display: grid; gap: 14px; }
.an-fcounts { display: flex; flex-wrap: wrap; gap: 10px; }
.an-fcount { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.an-fcount b { font-size: 18px; font-variant-numeric: tabular-nums; }
.an-fcount small { color: var(--muted); font-size: 12px; }
.an-fcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.an-fcol { display: grid; gap: 10px; align-content: start; min-width: 0; }
.an-fcol .hint { margin: 0; }
.an-fcol-title { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; font-weight: 800; }
.an-fcol-title .icon { width: 16px; height: 16px; color: var(--t-violet); }
.an-fcol:last-child .an-fcol-title .icon { color: var(--t-teal); }
.an-fstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.an-fstat { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); min-width: 0; }
.an-fstat small { color: var(--muted); font-size: 11.5px; font-weight: var(--fw-semi); line-height: 1.25; overflow-wrap: anywhere; }
.an-fstat b { align-self: end; }
.an-fstat b { font-size: 16px; font-variant-numeric: tabular-nums; }
.an-vstrip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.an-vcard { flex: none; display: grid; gap: 6px; width: 112px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; }
.an-vcard-media { display: grid; place-items: center; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: var(--surface-3); color: var(--faint); }
.an-vcard-media img { width: 100%; height: 100%; object-fit: cover; }
.an-vcard:hover .an-vcard-media, .an-vcard:focus-visible .an-vcard-media { box-shadow: 0 0 0 2px var(--brand); }
.an-vcard-body { display: grid; gap: 1px; min-width: 0; }
.an-vcard-body .row { gap: 4px; }
.an-vcard-body strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.an-vcard-body .hint { font-size: 11.5px; }
@media (max-width: 900px) {
  .an-fcols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .branch-switch { display: flex; }
  .branch-switch a { flex: 1; justify-content: center; padding: 0 8px; }
  .grid-vertical { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .format-flag { display: inline-flex; }
  .format-flag > span:not(.format-flag-time) { display: none; }
  .drop-vertical { max-height: 70vh; }
}

/* ---------- Реклама 2.9: pictures first, the set a page belongs to, the star ---------- */
.star-btn.is-active { color: var(--star); }
.ad-head-nav { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; min-width: 0; }
.ad-pager { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; font-weight: var(--fw-semi); color: var(--muted); font-variant-numeric: tabular-nums; }
.ad-pager span { padding: 0 6px; white-space: nowrap; }
.ad-title-row { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.ad-title-row .star-btn { flex: none; margin-top: 4px; }
.ad-title-row .title-input { flex: 1; min-width: 0; }
/* A creative's pictures at one height: up to 360 px; on a narrow screen they share its width (container units). */
.ad-shots { --shot-max: 360px; container-type: inline-size; display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.ad-shots.is-single { --shot-max: 420px; }
.ad-shot { flex: none; margin: 0; display: grid; gap: 6px; min-width: 0; }
.ad-shot-media {
  position: relative; display: block; padding: 0; border: 0; cursor: zoom-in; border-radius: 14px; overflow: hidden;
  height: clamp(150px, calc((100cqw - var(--gaps, 0px)) / var(--sum, 1)), var(--shot-max)); aspect-ratio: var(--ratio, 1);
  background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface-3) 0 50%) 0 0 / 16px 16px; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.16);
}
.ad-shot-media .ad-preview { position: absolute; inset: 0; }
.ad-shot-media .ad-preview img { object-fit: contain; }
.ad-shot-media:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.ad-shot-zoom, .ad-shot-index {
  position: absolute; display: grid; place-items: center; border-radius: 9px; background: rgba(14, 18, 24, 0.62); color: #fff; backdrop-filter: blur(6px);
}
.ad-shot-zoom { top: 8px; right: 8px; width: 32px; height: 32px; opacity: 0; transition: opacity 0.15s; }
.ad-shot-zoom .icon { width: 17px; height: 17px; }
.ad-shot-media:hover .ad-shot-zoom, .ad-shot-media:focus-visible .ad-shot-zoom { opacity: 1; }
.ad-shot-index { left: 8px; top: 8px; min-width: 24px; height: 24px; padding: 0 6px; font-size: 12px; font-weight: var(--fw-strong); }
.ad-shot-cap { display: grid; gap: 1px; min-width: 0; }
.ad-shot-cap strong { font-size: 13.5px; }
.ad-shot-cap small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.ad-shot .ad-warn { max-width: 100%; }
.ad-shot-actions { display: flex; flex-wrap: wrap; gap: 2px; }
.ad-shot-edit { display: grid; gap: 6px; max-width: 260px; }
.ad-shot-edit .select, .ad-shot-edit .input { height: 34px; font-size: 13px; }
button.ad-reject-thumb { padding: 0; border: 0; cursor: zoom-in; }
@media (pointer: coarse) {
  .ad-shot-zoom { opacity: 1; }
}
@media (max-width: 760px) {
  .ad-shots { --shot-max: 300px; gap: 10px; }
  .ad-shots.is-single { --shot-max: 340px; }
  .ad-shot-edit { max-width: none; }
}

/* The picker of creatives (2.9): a grid on a large screen, one creative at a time swiped on a phone. */
.ad-pick-cell { position: relative; min-width: 0; display: grid; }
.ad-pick-zoom { position: absolute; left: 8px; top: 8px; width: 30px; height: 30px; z-index: 1; }
@media (hover: hover) {
  .ad-pick-zoom { opacity: 0; transition: opacity 0.15s; }
  .ad-pick-cell:hover .ad-pick-zoom, .ad-pick-cell:focus-within .ad-pick-zoom { opacity: 1; }
}
.ad-pick-grid--empty { display: block; }
.ad-pick-swipe {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 4px; padding: 2px 4px 8px;
  scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.ad-pick-swipe::-webkit-scrollbar { display: none; }
.ad-pick-slide { flex: 0 0 min(90%, 440px); scroll-snap-align: center; display: grid; gap: 10px; padding: 10px; border-radius: var(--radius-card); border: 1.5px solid var(--border); background: var(--surface); min-width: 0; }
.ad-pick-slide.is-on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
/* The box of a 1:1 and a 9:16 side by side (1 + 9/16 ≈ 3/2): the pair fills it. */
.ad-pick-slide-media { position: relative; display: block; padding: 0; border: 0; width: 100%; aspect-ratio: 3 / 2; max-height: 46vh; border-radius: 12px; overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.ad-pick-slide-media .ad-formats { padding: 8px; gap: 6px; }
.ad-pick-slide-media > .ad-formats, .ad-pick-slide-media > .ad-preview { position: absolute; inset: 0; height: 100%; }
.ad-pick-slide-media .ad-shot-zoom { opacity: 1; }
.ad-pick-slide-body { display: grid; gap: 2px; min-width: 0; }
.ad-pick-slide-body strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-pick-slide-body small { color: var(--muted); font-size: 12.5px; }
.ad-pick-slide-btn { width: 100%; height: 46px; justify-content: center; font-size: 15px; }
.ad-pick-where { text-align: center; font-size: 13px; color: var(--muted); font-weight: var(--fw-semi); min-height: 18px; }

/* Pictures of the posts open over the whole screen (2.9): the picture is a button now, not a link to a new tab. */
.drop-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; color: inherit; }
.image-thumb-open { padding: 0; border: 0; cursor: zoom-in; }
.drop-open:focus-visible, .image-thumb-open:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }

.ad-more { display: grid; justify-items: center; gap: 6px; margin-top: 10px; }

/* ---------- The picture viewer (viewer.js, 2.9): a picture over the whole screen, wherever pictures are ----------
   Dark in both themes, as photo viewers are: the picture is the point. The bars sit over the picture's edges with a
   shade; on a phone they keep clear of the notch and the home bar (safe areas). */
html.has-viewer { overflow: hidden; }
.viewer {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; color: #f3f4f6;
  background: rgb(9 11 14 / var(--viewer-fade, 1)); overscroll-behavior: contain;
}
.viewer:not([open]) { display: none; }
.viewer::backdrop { background: rgba(0, 0, 0, 0.6); }
.viewer-top {
  position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 10px calc(16px + env(safe-area-inset-left));
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.viewer-title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.viewer-title strong { font-size: 15px; font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-title small { font-size: 12.5px; color: rgba(255, 255, 255, 0.68); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-tools, .viewer-zoomctl { display: flex; align-items: center; gap: 6px; flex: none; }
/* However many tools a picture has, the close button (after them) stays in sight: the tools scroll if they must. */
.viewer-tools { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.viewer-tools::-webkit-scrollbar { display: none; }
.viewer-title { flex: 1 1 120px; }
.viewer-zoomctl { margin-right: 6px; }
.viewer-btn {
  height: 38px; min-width: 38px; padding: 0 12px; border: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 13.5px; font-weight: var(--fw-semi); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.viewer-btn:hover { background: rgba(255, 255, 255, 0.18); text-decoration: none; }
.viewer-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.viewer-btn:disabled { opacity: 0.55; cursor: default; }
.viewer-btn .icon { width: 18px; height: 18px; }
.viewer-btn.is-icon { width: 38px; padding: 0; }
.viewer-btn.is-primary { background: var(--brand); color: var(--on-brand, #fff); }
.viewer-btn.is-starred { color: #f6c04f; }
.viewer-btn.is-starred .icon { fill: currentColor; }
.viewer-zoom { min-width: 58px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.viewer-body { position: relative; min-height: 0; }
.viewer-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: zoom-in; }
.viewer-stage.is-zoomed { cursor: grab; }
.viewer-stage.is-zoomed:active { cursor: grabbing; }
.viewer-img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-drag: none; image-rendering: auto; }
.viewer-img.is-preview { filter: blur(6px); }
.viewer-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.viewer-spinner { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.viewer-spinner .spinner { color: #fff; }
.viewer-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; color: rgba(255, 255, 255, 0.75); font-size: 14px; }
.viewer-empty .icon { width: 40px; height: 40px; opacity: 0.6; }
.viewer-nav {
  position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; margin-top: -26px; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer; transition: background 0.15s;
}
.viewer-nav:hover { background: rgba(0, 0, 0, 0.7); }
.viewer-nav .icon { width: 26px; height: 26px; }
.viewer-nav.is-prev { left: calc(14px + env(safe-area-inset-left)); }
.viewer-nav.is-next { right: calc(14px + env(safe-area-inset-right)); }
.viewer-nav[hidden] { display: none; }
.viewer-bottom {
  position: relative; z-index: 3; display: grid; justify-items: center; gap: 10px; min-width: 0;
  padding: 10px calc(14px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
}
.viewer-bottom > [hidden] { display: none; }
.viewer-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.viewer-chip {
  height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.25); color: #fff;
  font-size: 13px; font-weight: var(--fw-semi); cursor: pointer;
}
.viewer-chip[aria-pressed="true"] { background: #fff; border-color: #fff; color: #111; }
.viewer-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.viewer-pick-btn, .viewer-pick-done { min-width: 180px; height: 46px; font-size: 15px; border-radius: 12px; }
.viewer-pick-btn { background: rgba(255, 255, 255, 0.16); }
.viewer-pick-btn.is-on { background: #2f8a63; }
.viewer-strip { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px; scroll-behavior: smooth; }
.viewer-strip::-webkit-scrollbar { display: none; }
.viewer-thumb {
  position: relative; flex: none; width: 54px; height: 54px; padding: 0; border-radius: 9px; overflow: hidden; border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); display: grid; place-items: center; opacity: 0.6; cursor: pointer; transition: opacity 0.15s;
}
.viewer-thumb:hover { opacity: 0.9; }
.viewer-thumb.is-current { border-color: #fff; opacity: 1; }
.viewer-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.viewer-thumb.is-starred::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #f6c04f; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5); }
.viewer-thumb-mark { position: absolute; inset: auto 4px 4px auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #2f8a63; color: #fff; }
.viewer-thumb-mark .icon { width: 13px; height: 13px; }
/* A phone: the picture as large as can be — the arrows give way to swipes, the zoom buttons to a pinch, the words of
   the bar to its icons. */
@media (max-width: 760px), (pointer: coarse) {
  .viewer-zoomctl { display: none; }
}
@media (max-width: 760px) {
  .viewer-top { gap: 8px; }
  .viewer-tools { gap: 4px; }
  .viewer-btn { height: 40px; min-width: 40px; padding: 0 10px; }
  .viewer-btn .viewer-label { display: none; }
  .viewer-btn.is-primary .viewer-label { display: inline; }
  .viewer-nav { display: none; }
  .viewer-thumb { width: 46px; height: 46px; }
  .viewer-pick-btn, .viewer-pick-done { flex: 1 1 140px; min-width: 0; max-width: 260px; }
}

/* ---------- Реклама 2.10: the numbers of a period over the list of campaigns, and its order ---------- */
.ad-m-orderbar { justify-content: space-between; }
.ad-m-sort { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.ad-m-sort .select { width: auto; min-width: 210px; }
.ad-m-sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 12px; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-card); }
.ad-m-sum-tile { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); min-width: 0; }
.ad-m-sum-tile span { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-m-sum-tile strong { font-size: 18px; font-weight: var(--fw-strong); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
@media (max-width: 1080px) {
  .ad-m-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ad-m-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; }
  .ad-m-sum-tile:last-child { grid-column: 1 / -1; }
  .ad-m-orderbar .seg { flex: 1 1 100%; }
  .ad-m-orderbar .seg button { flex: 1; }
  .ad-m-sort { flex: 1 1 100%; }
  .ad-m-sort .select { flex: 1; min-width: 0; }
}

/* ---------- Реклама 2.13: on a phone the list of campaigns opens on the campaigns ---------- */
@media (max-width: 760px) {
  .ad-list-page .page-head { flex-wrap: nowrap; align-items: center; }
  .ad-list-page .page-head .grow { flex: 1 1 auto; }
  .ad-list-page .page-sub, .ad-list-page > .ad-note { display: none; }
  .ad-list-page .page-actions { flex-wrap: nowrap; }
  .ad-m-orderbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 2px 4px; }
  .ad-m-orderbar::-webkit-scrollbar { display: none; }
  .ad-m-orderbar .seg, .ad-m-sort { flex: none; }
  .ad-m-orderbar .seg button { flex: none; }
  .ad-m-sort .select { flex: none; width: auto; min-width: 0; }
  .ad-m-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px; }
  .ad-m-sum-tile { padding: 6px 8px; }
  .ad-m-sum-tile:last-child { grid-column: auto; }
  .ad-m-sum-tile span { font-size: 12px; }
  .ad-m-sum-tile strong { font-size: 16px; }
}

/* ---------- Реклама 2.13: an account resting, numbers older than Meta keeps ---------- */
.ad-m-sum--none { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ad-m-sum--none .grow { display: grid; gap: 2px; min-width: 200px; }
.ad-m-sum--none strong { font-size: 15px; }
.ad-m-sum--none p { margin: 0; color: var(--muted); font-size: 13.5px; }
.ad-m-sum-go { align-items: center; gap: 6px; }
.ad-m-sum-old { grid-column: 1 / -1; margin: 2px 2px 0; }
.ad-m-old { display: block; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.4; }

/* ---------- Реклама 2.11: «Аналитика рекламы» (views/ads/analytics.js) ---------- */
.ad-an-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ad-an-kpis .kpi-value { font-size: 28px; }
.ad-an-toolbar { justify-content: space-between; }
.ad-an-swatch { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--brand)); }
.ad-m-tab .ad-an-swatch { margin-right: 2px; }
.ad-an-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 13px; }
.ad-an-legend span { display: inline-flex; align-items: center; gap: 6px; }
.an-bar { fill: var(--c, var(--brand)); }
.an-bar-hover { fill: var(--surface-3); opacity: 0.6; pointer-events: none; }
.an-tip-row.is-total { padding-top: 4px; border-top: 1px solid var(--border); }
.ad-an-ads { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; }
.ad-an-ad { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-card); min-width: 0; }
.ad-an-pic { position: relative; display: grid; place-items: center; width: 128px; height: 128px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--surface-2); color: var(--faint); cursor: zoom-in; }
.ad-an-pic img, .ad-an-pic .file-preview, .ad-an-pic > * { width: 100%; height: 100%; object-fit: cover; }
.ad-an-pic .icon { width: 28px; height: 28px; }
.ad-an-pic-count { position: absolute; right: 6px; bottom: 6px; width: auto !important; height: auto !important; padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11.5px; font-weight: var(--fw-semi); }
.ad-an-body { display: grid; gap: 6px; align-content: start; min-width: 0; }
.ad-an-title { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.ad-an-title strong { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.ad-an-campaign { display: flex; align-items: center; gap: 6px; margin: 0; min-width: 0; font-size: 13px; color: var(--muted); }
.ad-an-campaign a, .ad-an-campaign span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ad-an-sets { margin: 0; font-size: 12px; }
.ad-an-headline { margin: 0; color: var(--text); font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-an-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.ad-an-nums > div { display: grid; gap: 1px; min-width: 0; }
.ad-an-nums span { color: var(--muted); font-size: 11.5px; font-weight: var(--fw-semi); line-height: 1.25; }
.ad-an-nums strong, .ad-an-nums b { font-size: 14px; font-variant-numeric: tabular-nums; }
.ad-an-links { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ad-an-out { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: var(--fw-semi); }
/* The campaign page (2.11): its run by day under the results, and the same campaign in «Маркетинг». */
.ad-m-days { padding-top: 6px; border-top: 1px solid var(--border); }
.ad-m-days h3 { margin: 0; font-size: 14px; }
.ad-m-days .select { width: auto; max-width: 60%; }
.ad-m-marketing { justify-self: start; }
@media (max-width: 1080px) {
  .ad-an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ad-an-kpis .kpi-value { font-size: 22px; }
  .ad-an-ad { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .ad-an-pic { width: 96px; height: 96px; }
  .ad-an-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; }
  .ad-an-toolbar .seg { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
  .ad-an-toolbar .seg::-webkit-scrollbar { display: none; }
  .ad-an-toolbar .seg button { flex: none; white-space: nowrap; }
}

/* ---------- «Когда публиковать» (2.11, views/analytics.js): days of the week by hours ---------- */
.an-when-scroll { overflow-x: auto; }
.an-when { display: grid; grid-template-columns: 38px repeat(var(--slots, 9), minmax(34px, 1fr)); gap: 4px; min-width: 360px; }
.an-when-corner, .an-when-slot, .an-when-day { font-size: 11.5px; font-weight: var(--fw-semi); color: var(--faint); font-variant-numeric: tabular-nums; }
.an-when-slot { text-align: center; white-space: nowrap; }
.an-when-day { display: flex; align-items: center; text-transform: capitalize; }
.an-when-cell {
  display: grid; place-items: center; height: 34px; border-radius: 8px; font-size: 11.5px; font-weight: var(--fw-semi); font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--muted);
}
.an-when-cell.is-up { background: color-mix(in srgb, var(--brand) calc(18% + var(--a) * 62%), var(--surface)); color: var(--text); }
.an-when-cell.is-strong { color: var(--on-brand); }
.an-when-cell.is-down { background: color-mix(in srgb, var(--surface-3) calc(40% + var(--a) * 60%), var(--surface)); }
.an-when-cell.is-few { background: transparent; border: 1px dashed var(--border); color: var(--faint); }
.an-when-cell.is-empty { background: transparent; }
.an-when-best { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--muted); font-size: 13.5px; }
.an-when-best .icon { flex: none; margin-top: 2px; color: var(--brand); }

/* ---------- «потянуть вниз — обновить» in the installed app (2.11) ---------- */
.ptr {
  position: fixed; z-index: 45; left: 50%; top: calc(env(safe-area-inset-top) + 8px); width: 38px; height: 38px; margin-left: -19px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); color: var(--muted); box-shadow: var(--shadow-lift); border: 1px solid var(--border);
  transform: translateY(calc(var(--pull, 0px) - 60px)); opacity: 0; transition: transform 0.2s ease, opacity 0.2s ease; pointer-events: none;
}
.ptr .icon { width: 19px; height: 19px; transform: rotate(calc(var(--turn, 0) * 1deg)); }
.ptr.is-pulling { opacity: 1; transition: none; }
.ptr.is-ready { color: var(--brand-strong); }
.ptr.is-busy { opacity: 1; transform: translateY(8px); color: var(--brand-strong); }
.ptr.is-busy .icon { animation: spin 0.8s linear infinite; }

/* ---------- fingers (2.10) ---------- */
/* The small square and round buttons answer a touch a little around them too, without growing: 38 px of a tool become
   48 px to a finger, a card's 30 px corner buttons 40 px. */
@media (pointer: coarse) {
  :where(.tool, .corner-btn, .star-btn) { position: relative; }
  :where(.tool, .corner-btn, .star-btn)::after { content: ''; position: absolute; inset: -5px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, html.nav-open .sidebar { transition: none; }
  .nav-scrim { animation: none; }
}

/* ---------- Реклама 2.14: «Разместить в Facebook» — a campaign of its own for a creative, asked first ---------- */
.ad-place-lead { margin: 0; color: var(--muted); font-size: 14px; }
.ad-place-warn { color: var(--warn); font-weight: var(--fw-semi); }
.ad-place-note { margin: 0; }
.ad-place-start { align-self: start; }
/* The buttons under a creative's card, outside its link. */
.ad-tile.has-actions { display: flex; flex-direction: column; }
.ad-tile.has-actions > .ad-tile-open { flex: 1; }
.ad-tile-actions { display: flex; gap: 8px; padding: 0 14px 14px; }
.ad-tile-place { flex: 1; justify-content: center; }

/* ---------- Реклама 2.14.1: «Проверьте перед выгрузкой» — every setting as it will go ---------- */
.ad-plan { gap: 14px; }
.ad-plan-section { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface-2); }
.ad-plan-section h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; font-weight: var(--fw-strong); }
.ad-plan-section h3 .icon { color: var(--brand); }
.ad-plan-row { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: 4px 12px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.ad-plan-section h3 + .ad-plan-row, .ad-plan-section > .ad-plan-row:first-child { border-top: 0; }
.ad-plan-key { color: var(--muted); font-weight: var(--fw-semi); }
.ad-plan-value { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ad-plan-value a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
.ad-plan-text { white-space: pre-line; }
/* Every text in full, numbered when there are several (2.14.2). */
.ad-plan-texts { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; }
.ad-plan-texts li::marker { color: var(--muted); font-weight: var(--fw-semi); }
.ad-plan-creative { display: grid; gap: 8px; padding: 8px 0 4px; border-top: 1px solid var(--border); }
.ad-plan-pics { display: flex; gap: 8px; align-items: flex-end; }
.ad-plan-pics figure { margin: 0; display: grid; gap: 4px; }
.ad-plan-pics .ad-preview { width: auto; height: 96px; border-radius: 8px; }
.ad-plan-pics .ad-preview img { height: 96px; width: auto; object-fit: contain; }
.ad-plan-pics figcaption { font-size: 11.5px; color: var(--muted); }
.ad-plan .ad-m-fixed { margin: 6px 0 0; }
/* While it goes, over the plan; after it, the window of the sending (2.14.2). */
.ad-plan-status { position: sticky; top: 0; z-index: 1; box-shadow: 0 0 0 6px var(--surface); }
.ad-sent { gap: 14px; }
.ad-sent-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-card); background: var(--success-soft); color: var(--success); }
.ad-sent-head > .icon { width: 28px; height: 28px; flex: none; }
.ad-sent-head .grow { display: grid; gap: 2px; min-width: 0; }
.ad-sent-head strong { color: var(--text); overflow-wrap: anywhere; }
.ad-sent-head span { color: var(--muted); font-size: 13px; }
.ad-sent-sum { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 4px; font-size: 13.5px; font-weight: var(--fw-semi); }
.ad-sent-sum .icon { flex: none; margin-top: 2px; }
.ad-sent-sum.is-ok { color: var(--success); }
.ad-sent-sum.is-bad { color: var(--warn); }
.ad-sent-creative { display: grid; gap: 6px; padding: 8px 0 2px; border-top: 1px solid var(--border); }
.ad-sent-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.ad-sent-lines > li { display: flex; align-items: flex-start; gap: 8px; }
.ad-sent-lines > li > .icon { flex: none; margin-top: 2px; }
.ad-sent-lines > li > div { min-width: 0; display: grid; gap: 4px; }
.ad-sent-lines > li.is-ok > .icon { color: var(--success); }
.ad-sent-lines > li.is-bad > .icon { color: var(--danger); }
.ad-sent-lines > li.is-off { color: var(--muted); }
.ad-sent-missing { margin: 0; padding-left: 1.2em; color: var(--muted); font-size: 12.5px; white-space: pre-line; overflow-wrap: anywhere; }
@media (min-width: 761px) {
  dialog.sheet.sheet-sent { width: min(640px, calc(100vw - 32px)); }
}
@media (max-width: 760px) {
  .ad-plan-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sheet-sent .sheet-foot .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- «Google Карты» (2.15): overview, profiles, posts, Google Ads, competitors ---------- */
.g-page .flag, .g-template .flag, .g-camp .flag { background: var(--surface-3); color: var(--muted); backdrop-filter: none; height: 24px; border-radius: 8px; font-weight: var(--fw-semi); }
.g-page .flag.is-good, .g-account .flag.is-good { background: var(--success-soft); color: var(--success); }
.g-page .flag.is-warn { background: var(--warn-soft); color: var(--warn); }
.g-page .flag.g-kind-offer { color: var(--t-rose); background: var(--t-rose-bg); }
.g-page .flag.g-kind-event { color: var(--t-violet); background: var(--t-violet-bg); }
.flag.g-tpl-maps { color: var(--t-blue); background: var(--t-blue-bg); }
.flag.g-tpl-competitors { color: var(--t-coral); background: var(--t-coral-bg); }
.flag.g-tpl-brand { color: var(--t-green); background: var(--t-green-bg); }
.g-block { display: block; }
.g-panel-pad { padding: 20px 20px 0; }
.g-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.g-kpis .kpi-value { font-size: 26px; }
.g-kpis .kpi-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.g-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: var(--fw-strong); }
.g-delta.is-up { color: var(--success); }
.g-delta.is-down { color: var(--danger); }
.g-delta .icon { width: 14px; height: 14px; }
.btn.is-busy .icon { animation: g-spin 1s linear infinite; }
@keyframes g-spin { to { transform: rotate(360deg); } }

/* the health of a profile */
.g-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.g-ring svg { display: block; }
.g-ring-bg { fill: none; stroke: var(--surface-3); stroke-width: 4; }
.g-ring-fg { fill: none; stroke-width: 4; stroke-linecap: round; }
.g-ring.is-good .g-ring-fg { stroke: var(--success); }
.g-ring.is-warn .g-ring-fg { stroke: var(--star); }
.g-ring.is-bad .g-ring-fg { stroke: var(--danger); }
.g-ring-num { position: absolute; font-size: 12px; font-weight: var(--fw-strong); }

/* «Что сделать» */
.g-advice { display: grid; gap: 10px; }
.g-advice-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); border-left-width: 4px; background: var(--surface); }
.g-advice-item .grow { min-width: 0; }
.g-advice-item.is-high { border-left-color: var(--danger); }
.g-advice-item.is-medium { border-left-color: var(--star); }
.g-advice-item.is-low { border-left-color: var(--border-strong); }
.g-advice-item p { margin: 3px 0 0; font-size: 13.5px; color: var(--muted); }
.g-advice-item .hint { font-size: 12.5px; }
.g-advice-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--surface-3); color: var(--muted); }
.g-advice-item.is-high .g-advice-icon { background: var(--danger-soft); color: var(--danger); }
.g-advice-item.is-medium .g-advice-icon { background: var(--warn-soft); color: var(--warn); }
.g-advice-actions { display: flex; gap: 6px; align-items: center; flex: none; }
.g-advice-empty { display: flex; gap: 10px; align-items: center; color: var(--success); font-weight: var(--fw-semi); }

/* the salons, the places in Maps, the competitors next door, the campaigns */
.g-salons td { white-space: nowrap; }
.g-salon { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--fw-semi); color: var(--text); text-decoration: none; }
.g-salons .badge { margin-left: 6px; }
.g-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 22px; }
.g-ranks, .g-rivals, .g-camps { display: grid; gap: 8px; }
.g-rank, .g-rival, .g-camp-row { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.g-rank:last-child, .g-rival:last-child, .g-camp-row:last-child { border-bottom: 0; }
.g-rank .grow, .g-rival .grow, .g-camp-row .grow { display: grid; gap: 2px; min-width: 0; }
.g-rank small, .g-rival small, .g-camp-row small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.g-camp-row { color: var(--text); text-decoration: none; }
.g-rank-place { width: 40px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-weight: var(--fw-strong); flex: none; }
.g-rank-place.is-top { background: var(--success-soft); color: var(--success); }
.g-rank-place.is-mid { background: var(--warn-soft); color: var(--warn); }
.g-rank-place.is-out { background: var(--danger-soft); color: var(--danger); }
.g-threat { display: inline-grid; place-items: center; min-width: 32px; height: 24px; padding: 0 6px; border-radius: 7px; font-size: 12.5px; font-weight: var(--fw-strong); }
.g-threat.is-high { background: var(--danger-soft); color: var(--danger); }
.g-threat.is-mid { background: var(--warn-soft); color: var(--warn); }
.g-threat.is-low { background: var(--surface-3); color: var(--muted); }

/* «Профили» */
.g-loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.g-loc { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-card); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; min-width: 0; }
.g-loc:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lift); }
.g-loc.is-on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--ring); }
.g-loc-head { display: flex; align-items: center; gap: 10px; }
.g-loc-head input { width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.g-loc-head .grow { display: grid; gap: 2px; min-width: 0; }
.g-loc-head small { color: var(--muted); }
.g-loc-nums { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.g-loc-nums > span { display: inline-flex; align-items: center; gap: 4px; }
.g-flag { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--fw-semi); }
.g-flag.is-warn { color: var(--warn); }
.g-flag.is-draft { color: var(--brand-strong); }
.g-flag.is-good { color: var(--success); }
.g-missing { display: flex; flex-wrap: wrap; gap: 6px; }
.g-miss { font-size: 12px; padding: 3px 8px; border-radius: 7px; background: var(--warn-soft); color: var(--warn); font-weight: var(--fw-semi); }
.g-bulk { position: sticky; top: calc(var(--topbar-h) + 8px); z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--inv-bg); color: var(--inv-text); box-shadow: var(--shadow-lift); }
.g-bulk .btn { background: var(--inv-hover); color: var(--inv-text); border-color: transparent; }
.g-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.g-photo-preview { width: 100%; max-height: 360px; object-fit: contain; border-radius: 10px; background: var(--surface-2); }
.g-tabs { overflow-x: auto; scrollbar-width: none; }
.g-updated { border-color: var(--warn); }
.g-updated .panel-head > .icon { color: var(--warn); }
.g-upd-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--border); }
.g-upd-values p { margin: 0 0 4px; overflow-wrap: anywhere; }
.g-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.g-tips li { display: flex; gap: 6px; align-items: center; }
.g-tips .is-ok { color: var(--success); }
.g-tips .is-miss { color: var(--warn); }
.g-form-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; align-items: start; }
.g-form-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; align-items: start; }
.g-cats, .g-cat-found { display: flex; flex-wrap: wrap; gap: 6px; }
.g-cats .chip.is-primary { border-color: var(--brand); color: var(--brand-strong); font-weight: var(--fw-semi); }
.chip-x { border: 0; background: none; padding: 0; margin-left: 2px; display: inline-grid; place-items: center; color: var(--muted); cursor: pointer; }
.chip-x .icon { width: 14px; height: 14px; }
.g-hours-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.g-hours-row .check { min-width: 150px; }
.g-hours-row .input[type="time"] { width: 120px; }
.g-services .input { min-width: 180px; }
.g-services .input.g-price { width: 110px; min-width: 0; }
.g-price.is-missing { border-color: var(--warn); background: var(--warn-soft); }
.g-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.g-photo { margin: 0; display: grid; gap: 4px; }
.g-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.g-photo figcaption { font-size: 12px; color: var(--muted); }
.g-post-rows { display: grid; gap: 6px; }
.g-post-row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--border); color: var(--text); text-decoration: none; min-width: 0; }
.g-post-row .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }

/* «Публикации» */
.g-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.g-post-card { display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; color: var(--text); text-decoration: none; transition: box-shadow 0.15s, border-color 0.15s; min-width: 0; }
.g-post-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lift); }
.g-post-media { aspect-ratio: 4 / 3; background: var(--surface-2); display: grid; place-items: center; color: var(--faint); overflow: hidden; }
.g-post-media img { width: 100%; height: 100%; object-fit: cover; }
.g-post-body { display: grid; gap: 6px; padding: 12px 14px; align-content: start; min-width: 0; }
.g-post-body p { margin: 0; }
.g-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; color: var(--muted); }
.g-post-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 22px; align-items: start; }
.g-post-side { position: sticky; top: calc(var(--topbar-h) + 12px); }
.g-salon-pick { display: grid; gap: 14px; }
.g-salon-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.g-salon-all { font-weight: var(--fw-semi); }
.g-problems { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.g-target { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.g-target:last-child { border-bottom: 0; }
.g-target .grow { display: grid; gap: 2px; min-width: 0; }
.g-target small { overflow-wrap: anywhere; }
.g-preview { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); font-size: 14px; }
.g-pv-head { display: flex; gap: 10px; align-items: center; padding: 10px 12px; }
.g-pv-head div { display: grid; }
.g-pv-head small { color: var(--muted); font-size: 12px; }
.g-pv-logo { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-weight: var(--fw-strong); }
.g-pv-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--surface-2); }
.g-pv-img.is-empty { display: grid; place-items: center; align-content: center; gap: 6px; color: var(--faint); }
.g-pv-body { display: grid; gap: 6px; padding: 12px; }
.g-pv-title { font-size: 15px; }
.g-pv-dates { color: var(--muted); }
.g-pv-text { margin: 0; white-space: pre-line; color: var(--text); display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.g-pv-coupon { margin: 0; padding: 8px; border: 1px dashed var(--border-strong); border-radius: 8px; text-align: center; }
.g-pv-btn { justify-self: start; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--brand-strong); font-weight: var(--fw-semi); font-size: 13.5px; }
.g-savebar { position: sticky; bottom: 12px; z-index: 6; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lift); }
.g-savebar:not(:has(.btn, .g-dirty)) { display: none; }
.g-dirty { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semi); color: var(--brand-strong); font-size: 13.5px; }

/* «Реклама Google» */
.g-accounts { display: grid; gap: 8px; }
.g-account { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.g-account:last-child { border-bottom: 0; }
.g-account .grow { display: grid; gap: 2px; min-width: 200px; }
.g-account small { color: var(--muted); }
.g-account.is-hidden { opacity: 0.55; }
.g-templates { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.g-template { display: grid; gap: 6px; text-align: left; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; }
.g-template p { margin: 0; font-size: 13px; color: var(--muted); }
.g-template.is-on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--ring); }
.g-camp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.g-camp { display: grid; gap: 12px; align-content: start; padding: 16px; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-card); color: var(--text); text-decoration: none; transition: box-shadow 0.15s, border-color 0.15s; min-width: 0; }
.g-camp:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lift); }
.g-camp-head { display: flex; gap: 10px; align-items: flex-start; }
.g-camp-head .grow { display: grid; gap: 6px; min-width: 0; }
.g-camp-head small { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.g-camp-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.g-camp-nums--wide { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); padding: 14px 16px; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); }
.g-camp-nums span { display: grid; gap: 2px; min-width: 0; }
.g-camp-nums small { font-size: 12px; color: var(--muted); }
.g-camp-nums strong { font-size: 15px; }
.g-counted { position: relative; flex: 1; min-width: 0; }
.g-counted .input { padding-right: 52px; width: 100%; }
.g-count { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11.5px; color: var(--faint); pointer-events: none; }
.g-count.is-over { color: var(--danger); font-weight: var(--fw-strong); }
.g-lines .row { gap: 6px; }
.g-kw { display: flex; flex-wrap: wrap; gap: 6px; }
.g-kw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); font-size: 13.5px; max-width: 100%; }
.g-kw-match { border: 0; border-radius: 6px; padding: 2px 6px; font: inherit; font-size: 11px; font-weight: var(--fw-strong); cursor: pointer; background: var(--t-blue-bg); color: var(--t-blue); }
.g-kw-chip.m-EXACT .g-kw-match { background: var(--t-violet-bg); color: var(--t-violet); }
.g-kw-chip.m-BROAD .g-kw-match { background: var(--t-amber-bg); color: var(--t-amber); }
.g-add-words .textarea { flex: 1 1 260px; min-height: 0; }
.g-adpv { display: grid; gap: 3px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); font-family: Arial, sans-serif; }
.g-adpv-sponsored { font-weight: 700; font-size: 12px; color: var(--text); }
.g-adpv-url { font-size: 12.5px; color: var(--muted); }
.g-adpv-title { color: var(--brand-strong); font-size: 17px; font-weight: 400; }
.g-adpv p { margin: 0; font-size: 13.5px; color: var(--muted); }
.g-sitelink { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.g-price-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 110px auto auto; gap: 8px; align-items: center; }
/* 2.17: the logo and the pictures of a Google Ads campaign, each as Google gets it (a square and a 1.91:1 from the middle). */
.g-logo { width: 56px; height: 56px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 10px; border: 1px solid var(--border); background: #fff; }
.g-logo img { width: 100%; height: 100%; object-fit: contain; }
.g-logo.is-empty { background: var(--surface-2); color: var(--muted); }
.g-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.g-img-card { display: grid; gap: 6px; min-width: 0; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.g-img-card.is-off { opacity: .45; }
.g-img-cuts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.91fr); gap: 6px; align-items: start; }
.g-img-cut { overflow: hidden; border-radius: 6px; background: var(--border); }
.g-img-cut--sq { aspect-ratio: 1 / 1; }
.g-img-cut--wide { aspect-ratio: 1.91 / 1; }
.g-img-cut img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g-img-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-num { max-width: 160px; }
.g-narrow { max-width: 220px; }
.g-wasted td:first-child { color: var(--warn); }
.g-code { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-3); font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.g-help h3 { margin: 6px 0 0; font-size: 15px; }
.g-help p, .g-help ol { margin: 0; }
.g-help ol { padding-left: 20px; display: grid; gap: 4px; }

/* «Конкуренты» */
.g-rivals-table .g-seen { min-width: 11rem; }
.g-rivals-table td { vertical-align: top; }
.g-rivals-table tr.is-muted td { opacity: 0.55; }
.g-rivals-table .tool-sm { width: 26px; height: 26px; vertical-align: middle; }
.g-promo { max-width: 280px; font-size: 13px; }
.g-promo summary { cursor: pointer; color: var(--muted); }
.g-promo p { margin: 6px 0 0; white-space: pre-line; }

@media (max-width: 960px) {
  .g-post-layout { grid-template-columns: minmax(0, 1fr); }
  .g-post-side { position: static; }
}
@media (max-width: 760px) {
  .g-upd-row { grid-template-columns: minmax(0, 1fr); }
  .g-advice-item { flex-wrap: wrap; }
  .g-advice-actions { width: 100%; justify-content: flex-end; }
  .g-camp-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-sitelink { grid-template-columns: minmax(0, 1fr); }
  .g-price-row { grid-template-columns: minmax(0, 1fr) 90px auto auto; }
  .g-price-row .g-counted:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .g-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-kpis .kpi-value { font-size: 22px; }
  .g-savebar { bottom: calc(72px + env(safe-area-inset-bottom)); }
}
.g-row-click { cursor: pointer; }
.g-row-click:hover td { background: var(--surface-2); }
@media (max-width: 760px) {
  .g-camp-row { flex-wrap: wrap; }
  .g-camp-row > .nowrap { white-space: normal; flex-basis: 100%; font-size: 13px; color: var(--muted); }
  .g-rank, .g-rival { flex-wrap: wrap; }
}