/* ===== Финалка — дизайн-система (mobile-first, tokenised) =====
   Two modes by task: light everywhere (management), dark in the working zone
   (review — forced via body.view-review below). Token NAMES are preserved so
   every component re-skins from this layer. Green means one thing: accepted. */
:root {
  /* ── base surfaces (light / management) ── */
  --bg: #F5F3EF;            /* Paper — page (warm) */
  --surface: #FFFDFB;       /* cards, panels (warm white) */
  --surface-2: #EFECE5;     /* Surface Sunk — secondary buttons, chips, fields at rest */
  --surface-3: #E8E4DC;     /* list hover, deeper nesting */
  --border: #E7E4DD;
  --border-strong: #D6D2C9;
  --thread-rail-nested: rgba(18, 20, 26, 0.10); /* hairline rail for nested reply levels */
  --text: #1C1917;          /* Ink — warm dark */
  --text-muted: #57534E;    /* secondary / descriptions */
  --text-faint: #A8A29E;    /* captions, placeholders */
  /* ── accent — GREEN is the brand ACTION colour (primary button, send, confirm).
       "Accepted" is signalled by FORM (checkmark), not shade. Active states stay
       contrast (Ink), never colour — see --active-*. ── */
  --accent: #1C1917;                    /* interactive text / links / focus (mono) */
  --accent-weak: rgba(28, 25, 23, 0.06);
  --accent-ghost: rgba(28, 25, 23, 0.05);
  --accent-ghost-strong: rgba(28, 25, 23, 0.09);
  --accent-contrast: #FFFFFF;           /* text on a coloured fill (avatar, badge) */
  --accent-solid: #17A862;              /* Accent — primary button fill */
  --accent-solid-hover: #149154;        /* Accent Hover */
  --accent-on: #FFFFFF;                 /* text on the green primary */
  --accent-soft: #DFF3E7;               /* Accent Soft — accent chip backgrounds */
  --active-bg: #1C1917;                 /* active segment/tab fill = Ink (contrast) */
  --active-fg: #FFFDFB;                 /* text on active fill */
  --ring: rgba(28, 25, 23, 0.16);
  /* ── status: red = requested edits + destructive; green = accepted/done ── */
  --danger: #E5484D;
  --danger-weak: rgba(229, 72, 77, 0.12);
  --danger-solid: #E5484D;
  --danger-solid-hover: #CC3B40;
  --ok: #2BD17E;            /* «Принята» green — accepted */
  --ok-weak: rgba(43, 209, 126, 0.12);
  --ok-text: #17A862;       /* accent-dark: green on white with contrast */
  --ok-solid: #2BD17E;
  --ok-solid-hover: #23B86D;
  --ok-on: #0A3A26;         /* text on green fill */
  --warn: #7A4E00;          /* amber text darkened for light bg */
  --warn-raw: #FFB020;      /* «На ревью» amber */
  --warn-weak: rgba(255, 176, 32, 0.14);
  --warn-border: rgba(255, 176, 32, 0.45);
  --info: #2FA9FF;          /* system hints, new-in-product */
  --info-weak: rgba(47, 169, 255, 0.12);
  --purple: #6E56CF;
  --purple-weak: rgba(110, 86, 207, 0.12);
  --purple-text: #6E56CF;
  --purple-solid: #6E56CF;
  --blue: #2FA9FF;
  --blue-weak: rgba(47, 169, 255, 0.12);
  --blue-border: rgba(47, 169, 255, 0.4);
  --blue-strong: #1E86D6;
  /* ── highlight / flash (jump-to-comment) ── */
  --flash: #FFF3C4;
  --hl: #FFEFA8;
  --flash-post: #FFE3B0;
  --flash-post-ring: #FFB020;
  /* ── scrims & image overlays (theme-independent) ── */
  --scrim: rgba(15, 15, 15, 0.5);
  --scrim-strong: rgba(0, 0, 0, 0.85);
  --overlay-strong: rgba(0, 0, 0, 0.62);
  --overlay-light: rgba(255, 255, 255, 0.15);
  --overlay-light-hover: rgba(255, 255, 255, 0.3);
  /* ── player / timeline "dark control island" (dark in both modes) ── */
  --control-track: #141416;
  --control-bg: #0B0B0B;    /* Base — field around video */
  --control-bg-2: #1C1C1F;
  --control-bg-3: #2A2A2E;
  --control-border: #2A2A2E;
  --control-text: #F7F7F5;
  --control-muted: #A1A1AA;
  --control-line: rgba(255, 255, 255, 0.08);
  --control-line-strong: rgba(255, 255, 255, 0.5);
  --control-dot-border: rgba(255, 255, 255, 0.6);
  --control-played: rgba(247, 247, 245, 0.18);
  --control-accent: #F7F7F5;      /* play button — the one accent control */
  --control-accent-bg: #1C1C1F;
  --control-accent-bg-hover: #2A2A2E;
  --control-accent-text: #F7F7F5;
  --canvas-bg: #000000;
  --canvas-line: rgba(255, 255, 255, 0.85);
  --canvas-scrim: rgba(0, 0, 0, 0.28);
  --tooltip-bg: #1C1917;
  --toast-bg: #1C1917;
  /* ── spacing scale (8px base, half-steps for dense lists) ── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;
  /* ── typography — Rubik (display), Inter (text), JetBrains Mono (data) ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-logo: 'Rubik', 'Onest', 'Inter', sans-serif;   /* wordmark ONLY */
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --fz-micro: 10px; --fz-xs: 12px; --fz-sm: 13px; --fz-md: 14px; --fz-base: 15px; --fz-lg: 18px; --fz-xl: 22px; --fz-2xl: 34px;
  --fw-medium: 500; --fw-bold: 700; --fw-heavy: 800;
  --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.45; --lh-loose: 1.5;
  /* ── radii (a touch rounder — echoes the logo plates) ── */
  --r-sm: 6px; --r-md: 14px; --r-lg: 18px; --radius: 10px;
  /* ── elevation (light: soft & diffuse) ── */
  --shadow: 0 2px 8px rgba(28, 25, 23, 0.06);
  --shadow-md: 0 4px 18px rgba(28, 25, 23, 0.08);
  --shadow-lg: 0 8px 36px rgba(28, 25, 23, 0.12);
  --shadow-accent: none;
  --tooltip-shadow: 0 6px 20px rgba(28, 25, 23, 0.18);
  --toast-shadow: 0 8px 36px rgba(28, 25, 23, 0.16);
  --lightbox-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  /* ── motion ── */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.12s;
  --dur: 0.16s;
  --dur-slow: 0.24s;
  --dur-flash: 2s;   /* decorative comment flash */
  --dur-post: 3s;    /* own just-posted flash */
  --dur-hl: 5s;      /* playback highlight fade */
  --tap: 44px;
}

/* Accessibility: honour the OS "reduce motion" setting — neutralise all
   animation/movement and smooth-scroll, keep state changes instant. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== dark mode (Финалка) =====
   Applied three ways, sharing one palette:
   (1) OS dark, unless the user forced light — management zone (see @media below);
   (2) user picks "Тёмная" (html[data-theme="dark"]);
   (3) the working zone (body.view-review) stays dark by default UNLESS the user
       explicitly picks "Светлая" — so a light theme is opt-in and the default
       working zone remains dark per the design.
   Either way the timeline stays a dark island (its --control-* tokens are never
   re-themed). No shadows in dark: elevation is Base → Surface 1 → Surface 2. */
:root[data-theme="dark"],
:root:not([data-theme="light"]) body.view-review {
  --bg: #17161A;
  --surface: #1F1E23;
  --surface-2: #26242A;
  --surface-3: #2F2D34;
  --border: #34323A;
  --border-strong: #45424C;
  --thread-rail-nested: rgba(255, 255, 255, 0.13);
  --text: #F7F7F5;
  --text-muted: #A1A1AA;
  --text-faint: #71717A;
  --accent: #F7F7F5;
  --accent-weak: rgba(247, 247, 245, 0.10);
  --accent-ghost: rgba(247, 247, 245, 0.06);
  --accent-ghost-strong: rgba(247, 247, 245, 0.12);
  --accent-contrast: #FFFFFF;
  --accent-solid: #2BD17E;
  --accent-solid-hover: #23B86D;
  --accent-on: #0A3A26;
  --accent-soft: rgba(43, 209, 126, 0.16);
  --active-bg: #F7F7F5;
  --active-fg: #17161A;
  --ring: rgba(247, 247, 245, 0.24);
  --danger: #F0685E;
  --danger-weak: rgba(229, 72, 77, 0.18);
  --danger-solid: #E5484D;
  --danger-solid-hover: #CC3B40;
  --ok: #2BD17E;
  --ok-weak: rgba(43, 209, 126, 0.16);
  --ok-text: #2BD17E;
  --ok-solid: #2BD17E;
  --ok-solid-hover: #23B86D;
  --ok-on: #0A3A26;
  --warn: #FFB020;
  --warn-raw: #FFB020;
  --warn-weak: rgba(255, 176, 32, 0.16);
  --warn-border: rgba(255, 176, 32, 0.35);
  --info: #2FA9FF;
  --info-weak: rgba(47, 169, 255, 0.16);
  --purple: #B6A3FF;
  --purple-weak: rgba(110, 86, 207, 0.22);
  --purple-text: #B6A3FF;
  --purple-solid: #6E56CF;
  --blue: #5FA8E0;
  --blue-weak: rgba(47, 169, 255, 0.16);
  --blue-border: rgba(47, 169, 255, 0.35);
  --blue-strong: #8FC6EC;
  --flash: #3c3712;
  --hl: #3c3712;
  --flash-post: #3a2a12;
  --flash-post-ring: #c47c1e;
  --scrim: rgba(0, 0, 0, 0.62);
  --scrim-strong: rgba(0, 0, 0, 0.9);
  --tooltip-bg: #34323A;
  --toast-bg: #1F1E23;
  --shadow: none;
  --shadow-md: none;
  --shadow-lg: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17161A;
    --surface: #1F1E23;
    --surface-2: #26242A;
    --surface-3: #2F2D34;
    --border: #34323A;
    --border-strong: #45424C;
    --thread-rail-nested: rgba(255, 255, 255, 0.13);
    --text: #F7F7F5;
    --text-muted: #A1A1AA;
    --text-faint: #71717A;
    --accent: #F7F7F5;
    --accent-weak: rgba(247, 247, 245, 0.10);
    --accent-ghost: rgba(247, 247, 245, 0.06);
    --accent-ghost-strong: rgba(247, 247, 245, 0.12);
    --accent-contrast: #FFFFFF;
    --accent-solid: #2BD17E;
    --accent-solid-hover: #23B86D;
    --accent-on: #0A3A26;
    --accent-soft: rgba(43, 209, 126, 0.16);
    --active-bg: #F7F7F5;
    --active-fg: #17161A;
    --ring: rgba(247, 247, 245, 0.24);
    --danger: #F0685E;
    --danger-weak: rgba(229, 72, 77, 0.18);
    --danger-solid: #E5484D;
    --danger-solid-hover: #CC3B40;
    --ok: #2BD17E;
    --ok-weak: rgba(43, 209, 126, 0.16);
    --ok-text: #2BD17E;
    --ok-solid: #2BD17E;
    --ok-solid-hover: #23B86D;
    --ok-on: #0A3A26;
    --warn: #FFB020;
    --warn-raw: #FFB020;
    --warn-weak: rgba(255, 176, 32, 0.16);
    --warn-border: rgba(255, 176, 32, 0.35);
    --info: #2FA9FF;
    --info-weak: rgba(47, 169, 255, 0.16);
    --purple: #B6A3FF;
    --purple-weak: rgba(110, 86, 207, 0.22);
    --purple-text: #B6A3FF;
    --purple-solid: #6E56CF;
    --blue: #5FA8E0;
    --blue-weak: rgba(47, 169, 255, 0.16);
    --blue-border: rgba(47, 169, 255, 0.35);
    --blue-strong: #8FC6EC;
    --flash: #3c3712;
    --hl: #3c3712;
    --flash-post: #3a2a12;
    --flash-post-ring: #c47c1e;
    --scrim: rgba(0, 0, 0, 0.62);
    --scrim-strong: rgba(0, 0, 0, 0.9);
    --tooltip-bg: #34323A;
    --toast-bg: #1F1E23;
    --shadow: none;
    --shadow-md: none;
    --shadow-lg: none;
  }
}

* { box-sizing: border-box; }

/* Self-hosted Inter (variable, Latin+Cyrillic). Falls back to the system stack
   in --font-sans until/if the woff2 is present. font-display: swap = no blocking. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterVariable.woff2') format('woff2');
}

html, body {
  margin: 0; padding: 0;
  width: 100%; max-width: 100%; overflow-x: hidden;
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fz-base); line-height: var(--lh-normal);
  -webkit-text-size-adjust: 100%;
}

/* Secondary by default: soft Surface Sunk fill, no border, Ink text (DS).
   All buttons are pills (radius full); player controls override with their own. */
button {
  font: inherit; cursor: pointer; font-weight: var(--fw-medium);
  border: 1px solid transparent; background: var(--surface-2); color: var(--text);
  border-radius: 999px; padding: 10px var(--sp-4); min-height: var(--tap);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
button:hover { background: var(--surface-3); }
button:active { transform: translateY(0.5px); }
/* Primary: Ink fill, inverse text (tokens flip in dark). No shadow tint. */
button.primary { background: var(--accent-solid); color: var(--accent-on); border-color: var(--accent-solid); }
button.primary:hover { background: var(--accent-solid-hover); border-color: var(--accent-solid-hover); }
/* Approve: the ONE place green is clickable — accept a version. */
button.approve { background: var(--ok-solid); color: var(--ok-on); border-color: var(--ok-solid); }
button.approve:hover { background: var(--ok-solid-hover); border-color: var(--ok-solid-hover); }
button.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
button.danger:hover { background: var(--danger-weak); }
button.small { min-height: 32px; padding: 6px 14px; font-size: var(--fz-sm); border-radius: 999px; }
button:disabled { opacity: 0.4; cursor: default; }
button:disabled:hover { background: var(--surface-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* icon buttons — compact, conventional action glyphs */
.icon-btn {
  min-height: 34px; height: 34px; width: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; border-radius: var(--r-sm);
  font-size: var(--fz-base); line-height: 1; color: var(--text-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.icon-btn.ok { color: var(--ok); }
.icon-btn.ok:hover { background: var(--ok-weak); }
.icon-btn.danger { color: var(--danger); }
.icon-btn.danger:hover { background: var(--danger-weak); }
/* base icon: inline-block so glyphs sit inline with text and center in
   text-align:center blocks; flex buttons still center via align-items */
.ic { display: inline-block; vertical-align: middle; flex: none; }
.icon-btn svg.ic { display: block; }
.fb-success-emoji .ic { color: var(--ok); }

/* icon + label helper (iconLabel): keeps glyph and text aligned in any button */
.ib { display: inline-flex; align-items: center; gap: var(--sp-2); }
.ib-label { min-width: 0; }
/* heading with a leading icon */
.h3-ic { display: flex; align-items: center; gap: var(--sp-2); }
/* icon-only buttons that aren't .icon-btn: center the glyph */
.tc-badge .skip, .tc-badge .play-btn,
.modal-x, .lightbox-close, .tc-mini, .frag-btn, .react-toggle, .fe-tool, .notif-btn { display: inline-flex; align-items: center; justify-content: center; }

input, textarea, select {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 14px;
  width: 100%; min-height: var(--tap);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input:hover, textarea:hover, select:hover { border-color: var(--text); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
textarea { resize: vertical; }
label { display: block; font-size: var(--fz-md); font-weight: var(--fw-medium); color: var(--text); margin: var(--sp-2) 0 6px; }
a { color: var(--accent); }

.hidden { display: none !important; }
.muted { color: var(--text-muted); }
.error { color: var(--danger); font-size: var(--fz-md); margin: var(--sp-2) 0; }
.warn { color: var(--warn) !important; }

/* ===== header ===== */
.topbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3); background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
}
.topbar .brand { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.topbar .brand .logo-mark { border-radius: 6px; flex: 0 0 auto; display: block; }
.topbar .spacer { flex: 1; }
/* Video title next to the project breadcrumb (DS §264 project-level nav) */
.topbar .crumb-video { font-size: var(--fz-sm); color: var(--text-muted); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar .who { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fz-md); cursor: pointer; }
.topbar .who-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* header burger menu — hidden on desktop (actions shown inline), shown on mobile */
.nav-menu-wrap { position: relative; display: none; }
.nav-menu-btn { color: var(--text-muted); }
.nav-menu {
  position: absolute; left: 0; right: auto; top: calc(100% + 6px); z-index: 60;
  min-width: 230px; max-width: calc(100vw - 16px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: var(--sp-1); display: flex; flex-direction: column; gap: 2px;
  max-height: 70vh; overflow-y: auto;
}
.nav-menu.hidden { display: none; }
.nav-menu .menu-sep { height: 1px; background: var(--border); margin: var(--sp-1) 0; }
.nav-menu .menu-item .ic { color: var(--text-muted); }
.nav-menu .menu-label { font-size: var(--fz-xs); color: var(--text-muted); font-weight: var(--fw-medium); padding: var(--sp-1) var(--sp-2) 2px; }
.nav-menu .menu-item.active { color: var(--accent); font-weight: var(--fw-bold); }
/* mobile-only affordances — hidden on desktop */
.filters-toggle, .feed-fs-toggle, .proj-all-mobile { display: none; }
/* PiP drag/resize layers — only active when the player is a PiP over the feed */
.pip-drag, .pip-resize { display: none; }

/* ===== avatars ===== */
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-contrast); font-size: var(--fz-xs); font-weight: var(--fw-bold); flex: none;
  background-size: cover; background-position: center;
}
.avatar.sm { width: 24px; height: 24px; font-size: var(--fz-micro); }
.avatar.lg { width: 40px; height: 40px; font-size: var(--fz-md); }

/* ===== auth ===== */
.auth-wrap { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--sp-1); padding: var(--sp-6) var(--sp-4); }
.auth-wrap .card { width: 100%; max-width: 420px; }
.auth-wrap > p { max-width: 420px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-5); }
.tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.tabs button { flex: 1; }
.tabs button.active { background: var(--active-bg); color: var(--active-fg); border-color: var(--active-bg); }

/* ===== videos list ===== */
.container { max-width: 1200px; margin: 0 auto; padding: var(--sp-4); }
/* DS §47: one list of rows separated by a 1px divider (not detached cards);
   sections are set apart by their heading above each list. */
.video-list { display: grid; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.video-item {
  background: var(--surface); border: none; border-radius: 0; border-bottom: 1px solid var(--border);
  padding: var(--sp-3); display: flex; align-items: center; gap: var(--sp-3); box-shadow: none;
  transition: background var(--dur) var(--ease);
}
.video-item:last-child { border-bottom: none; }
.video-item:hover { background: var(--surface-2); }
.video-item .vi-main { flex: 1; min-width: 0; cursor: pointer; }
.video-item .vi-title { font-weight: var(--fw-medium); }
.video-item .vi-sub { font-size: var(--fz-sm); color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
/* Member avatar stack on the projects list (DS §52) */
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar { border: 2px solid var(--surface); margin-left: -8px; }
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar-stack .avatar-more { background: var(--surface-2); color: var(--text-muted); font-weight: var(--fw-medium); }
.row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.section-title { font-family: var(--font-display); font-size: var(--fz-xl); font-weight: 600; letter-spacing: -0.01em; margin: var(--sp-2) 0 var(--sp-3); }
/* Screen header + section labels (screens reference) */
.phead { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.h1s { font-family: var(--font-display); font-weight: 600; font-size: 27px; letter-spacing: -0.015em; line-height: 1.18; margin: 0; }
.h2s { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; line-height: 1.25; margin: 0; }
.seclabel { font-size: var(--fz-xs); color: var(--text-faint); margin: 0 0 var(--sp-2) 3px; }
.lmeta { font-size: var(--fz-xs); color: var(--text-faint); margin: 0; }
/* Wordmark: Rubik ExtraBold, Text Secondary in-product (per brandbook). Headings: Onest. */
.topbar .brand .wm { font-family: var(--font-logo); font-weight: 800; font-size: 12px; letter-spacing: 0.025em; color: var(--text-muted); }
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.projects-intro {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); color: var(--text-muted); font-size: var(--fz-sm);
}
.projects-intro p { margin: 0 0 var(--sp-2); }
.projects-intro p:last-child { margin-bottom: 0; }
.projects-intro b { color: var(--text); }

/* role badges / breadcrumb / member chips */
.badge {
  display: inline-block; font-size: var(--fz-xs); font-weight: var(--fw-medium); vertical-align: middle;
  color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px var(--sp-2);
}
.topbar .crumb { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.badge.owner { color: var(--warn); background: var(--warn-weak); border-color: var(--warn-border); }

/* members modal — grid rows, no overlap */
#mem-list { max-height: 46vh; overflow-y: auto; margin-bottom: var(--sp-2); }
.mem-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: var(--sp-3); align-items: center;
  padding: var(--sp-2); border: 1px solid var(--border); border-radius: 10px; margin-bottom: var(--sp-2);
}
.mem-color { width: 34px; height: 34px; min-height: 0; padding: 2px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; }
.mem-info { min-width: 0; }
.mem-name { font-weight: var(--fw-medium); font-size: var(--fz-md); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.mem-email { font-size: var(--fz-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-you { font-size: var(--fz-xs); color: var(--accent); font-weight: var(--fw-bold); }
.mem-role { min-height: 34px; width: auto; }
.mem-actions { display: flex; gap: var(--sp-1); align-items: center; }
.mem-actions .icon-btn { min-width: 34px; min-height: 34px; padding: var(--sp-1); }
@media (max-width: 520px) {
  .mem-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .mem-actions { grid-column: 2 / -1; justify-content: flex-end; }
}

/* invites modal — compact list, scrolls when many */
.inv-list { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 46vh; overflow-y: auto; padding-right: 2px; }
.inv-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2); border: 1px solid var(--border); border-radius: 8px; flex-wrap: wrap; }
.inv-row.used { background: var(--surface-2); }
.inv-role { font-size: var(--fz-micro); font-weight: var(--fw-bold); color: var(--accent); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px var(--sp-2); }
.inv-status { font-size: var(--fz-xs); color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 1 1 120px; }
.inv-status.active { color: var(--ok-text); }
.inv-actions { display: flex; gap: var(--sp-1); margin-left: auto; }
.inv-actions .icon-btn { min-width: 32px; min-height: 32px; padding: var(--sp-1); }

/* feed ↔ timeline sync: comment currently under the playhead */
.comment.tc-current { background: var(--accent-ghost); }
.comment.root:not(.general).tc-current { background: transparent; }
.comment.root:not(.general).tc-current > .c-main { background: var(--accent-ghost); }
.comment.tc-current .c-tc { color: var(--accent); font-weight: var(--fw-bold); }
.member-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.member-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fz-sm);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1);
}
.member-chip .mc-role { font-size: var(--fz-micro); color: var(--accent); font-weight: var(--fw-medium); }

/* reactions */
.c-reacts { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; margin-top: var(--sp-1); }
.react-chip { font-size: var(--fz-xs); min-height: 24px; padding: 1px var(--sp-2); border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); cursor: pointer; }
.react-chip.mine { border-color: var(--accent); background: var(--accent-weak); }
.react-add { position: relative; display: inline-flex; }
.react-toggle { font-size: var(--fz-xs); min-height: 24px; padding: 1px var(--sp-2); border: 1px solid var(--border); border-radius: 12px; background: transparent; color: var(--text-muted); cursor: pointer; }
.react-palette { display: none; position: absolute; bottom: 100%; left: 0; margin-bottom: var(--sp-1); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: var(--sp-1); box-shadow: var(--shadow); z-index: 12; }
.react-add.open .react-palette { display: flex; flex-wrap: wrap; gap: 2px; width: 232px; }
.react-opt { font-size: var(--fz-lg); min-height: 32px; width: 32px; padding: 0; border: none; background: transparent; cursor: pointer; border-radius: 50%; }
.react-opt:hover { background: var(--surface-2); }

/* assignee */
.assignee { display: inline-flex; align-items: center; gap: 2px; }
.assignee-chip { font-size: var(--fz-xs); color: var(--accent); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 1px var(--sp-2); white-space: nowrap; }
.assign-list { display: flex; flex-direction: column; gap: var(--sp-1); max-height: 52vh; overflow: auto; }
.assign-opt { display: flex; align-items: center; gap: var(--sp-2); text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: var(--sp-2) var(--sp-3); cursor: pointer; min-height: 40px; }
.assign-opt:hover { background: var(--surface-2); }

/* version selector */
.version-select { width: auto; min-height: 30px; padding: 2px var(--sp-2); font-size: var(--fz-sm); }

/* frame editor (screenshot + drawing) */
.fe-backdrop { z-index: 60; }
.fe { background: var(--surface); border-radius: var(--radius); width: min(96vw, 1100px); max-height: 94vh; display: flex; flex-direction: column; padding: var(--sp-3); box-shadow: var(--shadow); }
.fe-toolbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding-bottom: var(--sp-2); }
.fe-toolbar .spacer { flex: 1; }
.fe-tools, .fe-colors { display: flex; gap: var(--sp-1); align-items: center; }
.fe-tool { min-height: 34px; min-width: 38px; padding: 2px var(--sp-2); border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
.fe-tool.active { border-color: var(--accent); background: var(--accent-weak); }
.fe-color { width: 26px; height: 26px; min-height: 26px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; }
.fe-color.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--accent); }
.fe-canvas-wrap { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--control-bg); border-radius: 8px; overflow: auto; }
.fe-canvas-wrap canvas { max-width: 100%; max-height: 74vh; touch-action: none; cursor: crosshair; background: var(--canvas-bg); }
.fe-size { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-1); }
.fe-size .fe-size-a { font-weight: var(--fw-heavy); font-size: var(--fz-base); color: var(--text-muted); }
.fe-size input[type="range"] { width: 92px; }
.fe-textinput {
  position: absolute; z-index: 5; margin: 0; padding: 0 2px; box-sizing: content-box;
  border: 1px dashed var(--canvas-line); background: var(--canvas-scrim);
  color: var(--control-text); outline: none; resize: none; overflow: hidden; border-radius: 3px;
  line-height: var(--lh-tight); font-weight: var(--fw-bold);
}
.fe-textinput::placeholder { color: var(--control-dot-border); }
.fe-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); }

/* ===== review layout (mobile-first) ===== */
.review { display: flex; flex-direction: column; }
.splitter { display: none; }

/* Review screen fills the viewport exactly — the page itself never scrolls;
   only the comment feed (and the timeline horizontally, when zoomed) scroll. */
body.view-review { overflow: hidden; }
/* --app-h is set by JS to the visual-viewport height, so the layout fits the area
   ABOVE the mobile keyboard (falls back to 100dvh). Video stays pinned at the top,
   feed scrolls in the middle, composer sits at the bottom above the keyboard. */
body.view-review #app { display: flex; flex-direction: column; height: var(--app-h, 100dvh); overflow: hidden; }
body.view-review .review { flex: 1 1 auto; min-height: 0; }
body.view-review .player-col { flex: 0 0 auto; }        /* video pinned to the top */
body.view-review .review-body { flex: 1 1 auto; min-height: 0; }
body.view-review .feed { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
body.view-review .compose { flex: 0 0 auto; }           /* bottom, above the keyboard */

.player-sticky { position: sticky; top: 0; z-index: 20; background: var(--canvas-bg); }
.player-box { position: relative; width: 100%; background: var(--canvas-bg); aspect-ratio: 16 / 9; }
.player-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--canvas-bg); }
.player-box #yt-player, .player-box #vk-player, .player-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-box canvas.overlay { position: absolute; pointer-events: none; z-index: 2; }

/* Shield over embedded players (YouTube/VK): captures all pointer events so the
   platform's own chrome (progress bar, title, "Watch on YouTube", share…) never
   appears. Only the central band is clickable — it toggles play/pause via our
   own player API. Top and bottom strips stay fully blocked. */
.player-shield { position: absolute; inset: 0; z-index: 3; cursor: default; }
.player-shield-center { position: absolute; left: 0; right: 0; top: 12%; bottom: 24%; cursor: pointer; }

/* Player + timeline are one dark island in BOTH themes (video controls stay dark
   in the light theme too); only the management panel goes light. */
.tc-badge {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap;
  background: var(--control-bg); color: var(--control-text); padding: var(--sp-2) var(--sp-3); font-variant-numeric: tabular-nums;
}
/* Current timecode + rewind steps are monospaced — the row reads as one scale (DS). */
.tc-badge .tc-now { font-family: var(--font-mono); font-size: var(--fz-base); font-weight: 500; letter-spacing: -0.01em; }
.tc-badge .ctrls { display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: center; flex: 1 1 auto; }
.tc-badge .ctrl-spacer { flex: 1 1 var(--sp-4); min-width: var(--sp-3); }
.tc-badge .skip {
  background: var(--control-bg-2); color: var(--control-text); border-color: var(--control-border);
  min-height: 34px; padding: var(--sp-1) var(--sp-2); font-size: var(--fz-sm); border-radius: var(--radius); min-width: 40px;
}
.tc-badge .skip[data-skip] { font-family: var(--font-mono); }
.tc-badge .skip:hover { background: var(--control-bg-3); }
/* DS §17: set the "к началу" button apart from the rewind-step group. */
.tc-badge #btn-to-start { margin-right: var(--sp-2); }
.tc-badge .play-btn { background: var(--control-accent); color: #1C1917; border-color: var(--control-accent); min-height: 34px; min-width: 44px; border-radius: var(--radius); }
.tc-badge .ctrl-sep { width: 1px; align-self: stretch; background: var(--control-border); margin: var(--sp-1) var(--sp-1); }
.tc-badge .speed-btn { background: var(--control-accent-bg); border-color: var(--control-accent); color: var(--control-accent-text); font-weight: var(--fw-bold); min-width: 48px; }
.tc-badge .speed-btn:hover { background: var(--control-accent-bg-hover); }
/* custom volume slider */
.tc-badge .vol { width: 68px; min-height: 0; height: 26px; padding: 0; background: transparent; border: none; accent-color: var(--accent); cursor: pointer; }
.tc-badge .vol:focus { box-shadow: none; }
/* custom scrubber cursor */
.timeline { cursor: pointer; }
.timeline.scrubbing { cursor: grabbing; }
.player-box:fullscreen { width: 100vw; height: 100vh; }
.player-box:fullscreen video { object-fit: contain; }

/* timeline — DS §15: video → controls → timeline → zoom read as one block,
   so the timeline shares the controls' background (no separate-container seam). */
/* The timeline stays a dark island in both themes (its --control-* tokens are
   never re-themed) — участник colours need a dark track for contrast (DS §243). */
.timeline-wrap { background: var(--control-bg); padding: 0 var(--sp-3) var(--sp-3); }
.timeline-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: var(--sp-2); scrollbar-width: thin; scrollbar-color: var(--control-bg-3) transparent; }
.timeline-scroll::-webkit-scrollbar { height: 6px; }
.timeline-scroll::-webkit-scrollbar-track { background: transparent; }
.timeline-scroll::-webkit-scrollbar-thumb { background: var(--control-bg-3); border-radius: 999px; }
.timeline-scroll::-webkit-scrollbar-thumb:hover { background: var(--control-border); }
/* time ruler ticks */
.timeline .tl-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--control-line); transform: translateX(-0.5px); pointer-events: none; z-index: 1; }
.timeline .tl-tick-label { position: absolute; top: 1px; left: 3px; font-size: var(--fz-micro); line-height: 1; color: var(--control-line-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.timeline {
  position: relative; height: 48px; min-width: 100%;
  background: var(--control-bg-2); border-radius: 6px; cursor: pointer; overflow: hidden;
}
.timeline .played { position: absolute; top: 0; bottom: 0; left: 0; background: var(--control-played); }
.timeline .playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--control-text); z-index: 4; }
/* DS §20/§22: marks are the author's colour, no border; hover brightens (a ring
   is reserved for the current timecode only, §21). */
.timeline .mark.range { position: absolute; height: 8px; border-radius: 999px; opacity: 0.95; cursor: pointer; }
.timeline .mark.range::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.timeline .mark.range:hover, .timeline .mark.range.hover-mark { filter: brightness(1.18); }
.timeline .dot {
  position: absolute; bottom: 4px; width: 8px; height: 8px; border-radius: 50%;
  transform: translateX(-50%); border: none; cursor: pointer;
}
.timeline .dot::after { content: ""; position: absolute; left: -8px; right: -8px; top: -8px; bottom: -8px; }
/* closed comments read paler than open ones */
.timeline .dot.closed { opacity: 0.35; }
/* One ring for all point-marker emphasis — hover on the dot, hover on its comment,
   the current-timecode mark, and click-to-seek (link) all look identical. */
.timeline .dot:hover, .timeline .dot.hover-mark, .timeline .dot.at-cursor, .timeline .dot.linkhl,
.timeline .tl-req:hover, .timeline .tl-req.hover-mark, .timeline .tl-req.at-cursor, .timeline .tl-req.linkhl,
.timeline .tl-titre:hover, .timeline .tl-titre.hover-mark, .timeline .tl-titre.at-cursor, .timeline .tl-titre.linkhl {
  box-shadow: 0 0 0 2px var(--control-bg-2), 0 0 0 4px var(--control-text); z-index: 6;
}

.tl-zoom { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.tl-zbtn {
  background: var(--control-bg-2); color: var(--control-text); border: 1px solid var(--control-border);
  min-height: 28px; min-width: 34px; padding: 2px var(--sp-2); font-size: var(--fz-sm); border-radius: 6px;
}
.tl-zbtn:hover { background: var(--control-bg-3); }
/* DS §18: the single zoom read-out doubles as the reset control (click = 100%). */
.tl-zlabel { background: transparent; border: 1px solid transparent; color: var(--control-muted); font-size: var(--fz-xs); min-width: 48px; min-height: 28px; text-align: center; font-variant-numeric: tabular-nums; cursor: pointer; border-radius: 6px; }
.tl-zlabel:hover { background: var(--control-bg-3); color: var(--control-text); }

/* ===== review body ===== */
.review-body { display: flex; flex-direction: column; }
.review-title-bar {
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); flex-wrap: wrap;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 6;
}
.review-title-bar .rt-title { font-weight: var(--fw-bold); font-size: var(--fz-base); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-title-bar .rt-status { display: inline-flex; align-items: center; }
/* Review header «⚙» dropdown (settings / copy list / hotkeys / feed fullscreen) */
.rt-menu-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.rt-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px; max-width: calc(100vw - 16px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: var(--sp-1); display: flex; flex-direction: column; gap: 2px;
}
.rt-menu.hidden { display: none; }

.filters {
  display: flex; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); flex-wrap: wrap; align-items: center;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 41px; z-index: 5;
}
.filters button[data-f] { display: inline-flex; align-items: center; gap: 3px; min-height: 32px; padding: var(--sp-1) var(--sp-3); font-size: var(--fz-sm); }
.filters button.active { background: var(--active-bg); color: var(--active-fg); border-color: var(--active-bg); }
.filters .user-filter { width: auto; min-height: 32px; padding: var(--sp-1) var(--sp-2); font-size: var(--fz-sm); max-width: 160px; }
.filters .spacer { flex: 1; }
/* «Ещё фильтры» collapsible sub-row (DS §24) */
.review-title-bar .spacer { flex: 1; }
/* «Ещё фильтры» reads as a text link, not a pill button (DS) */
.more-filters-toggle { position: relative; background: transparent; border: none; color: var(--text-muted); min-height: 0; padding: var(--sp-1) var(--sp-2); font-size: var(--fz-sm); }
.more-filters-toggle:hover { background: transparent; color: var(--text); text-decoration: underline; }
.more-filters-toggle.active, .more-filters-toggle.has-active { background: transparent; color: var(--text); }
.more-filters-toggle .mf-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-solid); margin-left: 4px; display: inline-block; }
.filters-extra { display: none; flex-basis: 100%; width: 100%; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.filters-extra.open { display: flex; }
.filters-extra button[data-f] { display: inline-flex; align-items: center; gap: 3px; min-height: 32px; padding: var(--sp-1) var(--sp-3); font-size: var(--fz-sm); }
.filters-extra button.active { background: var(--active-bg); color: var(--active-fg); border-color: var(--active-bg); }

/* ===== comments feed ===== */
/* DS §28: comments are rows separated by a 1px divider (not detached cards). */
.feed { padding: var(--sp-2) var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 0; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.feed::-webkit-scrollbar { width: 8px; }
.feed::-webkit-scrollbar-track { background: transparent; }
.feed::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.feed::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: padding-box; }
.comment {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3); box-shadow: var(--shadow);
  border-left: 3px solid var(--author, var(--border));
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.comment.root:hover { box-shadow: var(--shadow-md); }
/* Reply (DS §322): a clean 3px author bar, no card / bg / radius. */
/* Nested replies: a single neutral 4px rail per level (never the author colour —
   only the root branch carries the author colour). See ТЗ «вложенные ветки». */
.comment.reply { box-shadow: none; background: transparent; border: none; border-left: 4px solid var(--thread-rail-nested); border-radius: 0; padding: var(--sp-1) 0 var(--sp-1) var(--sp-2); }
/* The comment stripe always reflects the author's colour (state is shown via the
   inline type label + dimming, not the stripe colour). */
/* Closed правки collapse to one line; when expanded they read in a lightened text
   colour (not opacity) so it's clear they're closed. Closure line stays green. */
.comment.done .c-closeline { color: var(--ok-text); }
.comment.done .c-body, .comment.done .c-name { color: var(--text-muted); }
/* Collapsed closed правка — one compact line (DS variant 3): timecode stays in the
   left column, text in the middle, green check + ⋯ on the right. Click to expand. */
/* .comment.root sets align-items:flex-start; override so the timecode centres
   with the avatar + text row. */
.comment.root.done-collapsed {
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2);
  border-bottom: 1px solid var(--border); font-size: var(--fz-sm);
  transition: background var(--dur) var(--ease);
}
.done-collapsed:hover { background: var(--surface-2); }
.done-collapsed:last-child { border-bottom: none; }
.done-collapsed .dc-tc { flex: 0 0 auto; width: 58px; font-family: var(--font-mono); font-size: var(--fz-sm); color: var(--text-faint); cursor: pointer; letter-spacing: -0.02em; }
.done-collapsed .dc-tc.c-tc:hover { color: var(--accent); }
.done-collapsed .dc-tc-pin { cursor: default; font-family: inherit; font-size: var(--fz-xs); }
/* mirror the open comment's content column (pale author stripe + same left pad) so
   the avatar/text line up with open comments */
.done-collapsed .dc-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); border-left: 3px solid color-mix(in srgb, var(--author, var(--border)) 30%, transparent); padding-left: var(--sp-3); }
.done-collapsed .dc-body { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); background: none; border: none; padding: 0; text-align: left; cursor: pointer; }
.done-collapsed .avatar { flex: 0 0 auto; opacity: 0.4; } /* pale avatar for closed (per system) */
.done-collapsed .dc-snip { min-width: 0; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.done-collapsed:hover .dc-snip { color: var(--text-muted); }
.done-collapsed .dc-right { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.done-collapsed .dc-check { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--ok-text); cursor: pointer; }
/* closure line: info left, collapse chevron right */
.c-closeline { justify-content: space-between; }
.c-closeline .cl-info { display: inline-flex; align-items: center; gap: var(--sp-1); }
.c-closeline .cl-collapse { flex: 0 0 auto; background: none; border: none; color: var(--text-muted); cursor: pointer; min-height: 0; padding: 2px var(--sp-1); font-size: var(--fz-xs); }
.c-closeline .cl-collapse:hover { color: var(--text); }
/* Hover/nav highlight of a comment is a background only — no ring (that read as a
   "mourning frame"). The timeline mark still gets its ring. */
.comment.flash { animation: flash var(--dur-flash) ease; }
@keyframes flash { from { background: var(--flash); } to { background: var(--surface); } }
/* playback highlight: light yellow, slow 5s fade */
.comment.tc-hl { animation: tcHighlight var(--dur-hl) ease-out; }
@keyframes tcHighlight { 0% { background: var(--hl); box-shadow: 0 0 0 2px var(--hl); } 100% { background: var(--surface); box-shadow: var(--shadow); } }
/* just-posted own comment: orange flash, 3s fade */
.comment.just-posted { animation: justPosted var(--dur-post) ease-out; }
@keyframes justPosted { 0% { background: var(--flash-post); box-shadow: 0 0 0 2px var(--flash-post-ring); } 100% { background: var(--surface); box-shadow: var(--shadow); } }

/* root comments: the timecode is its OWN block on the page background (left),
   and the comment card (with the author-colour stripe) sits to its right. */
.comment.root { display: flex; gap: var(--sp-2); align-items: flex-start; }
/* Row: a full-width 1px divider under the whole row; the 3px author stripe sits
   on the content column (DS §28). No card border / shadow / radius. */
.comment.root:not(.general) {
  background: transparent; border: none; border-bottom: 1px solid var(--border);
  box-shadow: none; padding: var(--sp-3) var(--sp-2); border-radius: 0;
  transition: background var(--dur) var(--ease);
}
.comment.root:not(.general):last-child { border-bottom: none; }
/* The author stripe hugs the comment content only (vertical padding lives on the
   row), so stripes of adjacent comments don't merge into one continuous line. */
.comment.root:not(.general) > .c-main {
  background: transparent; border: none;
  border-left: 4px solid var(--author, var(--border)); border-radius: 0;
  padding: 0 0 0 var(--sp-3); box-shadow: none;
}
.comment.root:not(.general):hover { background: var(--surface-2); }

/* Inline comment-edit form: matches the composer field; compact right-aligned
   actions (ghost «Отмена» + accent «Сохранить») instead of loud full pills. */
.comment.editing { display: block; }
.edit-form { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }
.edit-form .edit-text {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 56px;
  font: inherit; font-size: var(--fz-sm); line-height: 1.55; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
}
.edit-form .edit-text:hover { border-color: var(--border); }
.edit-form .edit-text:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); outline: none; }
.edit-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; align-items: center; }
.edit-btn { min-height: 30px; padding: 5px 14px; font-size: var(--fz-sm); border-radius: 999px; display: inline-flex; align-items: center; gap: var(--sp-1); }
.edit-btn.ok { background: var(--accent-solid); color: var(--accent-on); border-color: var(--accent-solid); }
.edit-btn.ok:hover { background: var(--accent-solid-hover); border-color: var(--accent-solid-hover); }
.edit-btn.ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.edit-btn.ghost:hover { background: var(--surface-2); color: var(--text); }
/* flash / highlight / link-hover apply to the card, not the transparent row */
.comment.root:not(.general).flash { animation: none; }
.comment.root:not(.general).flash > .c-main { animation: flash var(--dur-flash) ease; }
.comment.root:not(.general).tc-hl { animation: none; }
.comment.root:not(.general).tc-hl > .c-main { animation: tcHighlight var(--dur-hl) ease-out; }
.comment.root:not(.general).just-posted { animation: none; }
.comment.root:not(.general).just-posted > .c-main { animation: justPosted var(--dur-post) ease-out; }
.comment.root:not(.general).linkhl { box-shadow: none; }
.comment.root:not(.general).linkhl > .c-main { box-shadow: none; }
.comment .c-left { flex: 0 0 auto; width: 58px; display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-1); padding-top: 0; }
.comment .c-main { flex: 1 1 auto; min-width: 0; }
.comment .c-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.comment .c-name { font-weight: var(--fw-medium); font-size: var(--fz-sm); }
.comment .c-time { color: var(--text-muted); font-size: var(--fz-xs); white-space: nowrap; }
/* DS §62: the head timecode chip is mobile-only (desktop keeps the left gutter). */
.comment .c-head-tc { display: none; }
/* Header actions (DS §31): галочка · ответственный · ⋯, pinned to the right, always visible (§38). */
.comment .c-head-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.comment .c-head-actions .assignee { margin: 0; }
.comment .icon-btn.done-off { color: var(--text-faint); }
.comment .icon-btn.done-off:hover { color: var(--ok-text); background: var(--ok-weak); }
.comment .icon-btn.done-on { color: var(--ok-solid); }
/* line-height matches the header row height (avatar + 34px action buttons) so the
   gutter timecode centres with the avatar/name line. */
.comment .c-left .c-tc {
  display: block; text-align: left; line-height: 34px; font-size: var(--fz-sm);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  color: var(--text); cursor: pointer; padding: 0; background: none; border: none;
}
.comment .c-tc:hover { color: var(--accent); }
.comment .c-body { margin: var(--sp-1) 0; word-break: break-word; font-size: var(--fz-md); }
.comment .c-ref { font-size: var(--fz-xs); margin-top: var(--sp-1); }
/* Bottom line (DS §33): ответ + реакция + чипы реакций, one row. */
.comment .c-bottom { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-top: var(--sp-1); align-items: center; }
.comment .c-bottom .c-reacts { margin-top: 0; }
/* Closure line under the text (DS §35): ✓ имя, дата. */
.comment .c-closeline { font-size: var(--fz-xs); color: var(--ok-text); font-weight: var(--fw-medium); display: flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-1); }
.comment .c-closeline .ic { width: 14px; height: 14px; flex: 0 0 auto; }

/* ⋯ overflow menu */
.more-wrap { position: relative; display: inline-flex; }
/* Fixed, like .ctx-menu: the feed scrolls, so an absolute menu on the last
   comment was clipped by it. Coordinates come from positionMoreMenu(). */
.more-menu {
  display: none; position: fixed; z-index: 200;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: var(--sp-1); min-width: 180px; max-width: min(92vw, 260px);
  flex-direction: column; gap: 2px;
}
.more-wrap.open .more-menu { display: flex; animation: menuPop var(--dur-fast) var(--ease); }
@keyframes menuPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.menu-item {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left;
  background: transparent; border: none; border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); min-height: 38px;
  color: var(--text); font-size: var(--fz-sm);
}
.menu-item:hover { background: var(--surface-2); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger:hover { background: var(--danger-weak); }
.menu-item .ic { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
.menu-item.danger .ic { color: var(--danger); }
.avatar.xs { width: 18px; height: 18px; font-size: var(--fz-micro); }

.tc-link { cursor: pointer; color: var(--accent); text-decoration: underline; font-variant-numeric: tabular-nums; }
.frag-btn {
  cursor: pointer; color: var(--accent); font-size: var(--fz-xs); border: 1px solid var(--border);
  border-radius: 5px; padding: 0 var(--sp-1); background: var(--surface-2); min-height: 20px; line-height: 18px;
}

/* attachments */
.c-atts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-1) 0; }
.att { position: relative; }
.att-thumb img {
  width: 92px; height: 92px; object-fit: cover; border-radius: 7px; border: 1px solid var(--border); display: block;
}
.att-file a {
  display: inline-block; font-size: var(--fz-xs); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 6px; padding: var(--sp-1) var(--sp-2); text-decoration: none;
}
/* unified round delete-cross for any image thumbnail (compose previews + comment attachments) */
.att-del, .cp-del {
  position: absolute; width: 18px; height: 18px; min-width: 18px; min-height: 18px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  border: none; border-radius: 50%; background: var(--overlay-strong); color: var(--control-text);
  font-size: var(--fz-xs); line-height: 1; cursor: pointer;
}
.att-del:hover, .cp-del:hover { background: var(--danger); }
.att-del { top: -6px; right: -6px; }

/* Nested reply branch: a small left indent, no grey bracket (each reply carries
   its own author bar, DS §321). */
/* Each nesting level indents its children by a fixed 24px step (ТЗ §3). */
.branch { margin: var(--sp-2) 0 0; padding-left: 24px; border-left: none; display: flex; flex-direction: column; gap: var(--sp-2); }
/* Thread toggle lives in the bottom line as a compact chip (DS §33/§34). */
.branch-toggle {
  background: transparent; border: none; color: var(--text-muted);
  font-size: var(--fz-xs); min-height: 26px; padding: 2px var(--sp-1); cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; margin-left: var(--sp-1);
}
.branch-toggle:hover { color: var(--text); }

/* Collapsed-branch summary pill (ТЗ §4): participant dots + reply count. */
.branch-collapsed { margin-top: var(--sp-2); }
.thread-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 0; padding: 3px var(--sp-2) 3px var(--sp-1);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  font-size: var(--fz-xs); color: var(--text-muted); cursor: pointer;
}
.thread-pill:hover { color: var(--text); background: var(--surface-3); }
.thread-pill .tp-dots { display: inline-flex; align-items: center; padding-left: 3px; }
.thread-pill .tp-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--border-strong));
  box-shadow: 0 0 0 2px var(--surface-2); margin-left: -3px;
}
.thread-pill .tp-more { margin-left: var(--sp-1); font-size: var(--fz-xs); color: inherit; }
.thread-pill .tp-count { font-weight: var(--fw-medium); }

/* Nesting caps at 4 visual levels (0–3) on every platform: level 4 and deeper sit
   flat at level-3 indent, with an addressee line and no collapse control. */
.branch .branch .branch .branch { padding-left: 0; }
.branch .branch .branch .branch .branch-toggle,
.branch .branch .branch .branch .branch-collapsed { display: none; }
/* Addressee line — rendered by JS only for depth ≥4; neutral grey, never author-coloured. */
.c-addressee { display: block; font-size: var(--fz-xs); color: var(--text-muted); margin-bottom: 2px; }

/* ===== compose bar ===== */
/* A normal flex item at the bottom of the review column (not fixed) — this keeps it
   above the mobile keyboard together with the visual-viewport height on #app. */
.compose {
  background: var(--surface); border-top: 1px solid var(--border);
  padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.compose .reply-banner { font-size: var(--fz-sm); color: var(--text-muted); display: flex; gap: var(--sp-2); align-items: center; }
.compose .reply-quote { flex: 1; min-width: 0; border-left: 3px solid var(--accent); padding-left: var(--sp-2); }
.compose .reply-quote-head { font-weight: var(--fw-medium); color: var(--text); font-size: var(--fz-xs); }
.compose .reply-quote-text { font-size: var(--fz-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compose .reply-banner { --author: var(--accent); }
.compose .reply-quote { border-left-color: var(--author); }
.compose .reply-cancel-x { min-width: 30px; padding: var(--sp-1) var(--sp-2); }
/* video-settings link row: read-only URL + copy button */
.vs-link-row { display: flex; gap: var(--sp-2); align-items: center; }
.vs-link-row input { flex: 1 1 auto; min-width: 0; }
.vs-link-row .icon-btn { flex: 0 0 auto; }

/* Composer, DS §40–46: one resting line — [+] taймкод · поле · отправить. */
.compose-main { display: flex; gap: var(--sp-2); align-items: center; }
.compose-plus { flex: 0 0 auto; display: inline-flex; } /* «+» opens the property list (desktop dropdown / mobile sheet) */
.compose-menu-wrap { align-self: center; }
/* One field visually holds the timecode chip + the text input. */
.compose-field {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 5px 8px 5px 10px;
}
.compose-field:focus-within { border-color: var(--text); box-shadow: 0 0 0 3px var(--ring); }
/* Timecode chip lives inside the field: compact mono pill, no border. */
.compose .range-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-1); align-self: center;
  font-size: var(--fz-xs); background: var(--surface-2); border: none;
  border-radius: 999px; padding: 4px var(--sp-2); min-height: 0;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  cursor: pointer; white-space: nowrap; color: var(--text);
}
.compose .range-chip:hover:not(:disabled) { background: var(--surface-3); }
.compose .range-chip:disabled { cursor: default; color: var(--text-muted); }
.compose .range-chip.is-general { color: var(--text-muted); }
.compose .range-reset { flex: 0 0 auto; align-self: center; min-height: 0; width: 26px; height: 26px; }
/* Manual timecode entry inside the field: мм:сс input(s) + apply/cancel. */
.compose .range-edit { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-1); align-self: center; }
.compose .range-edit .tc-in { width: 60px; text-align: center; }
.compose .range-edit-sep { color: var(--text-muted); font-size: var(--fz-xs); }
.compose .range-edit .tc-mini { width: 26px; height: 26px; padding: 0; }
.compose .range-edit.hidden, .range-menu-wrap.hidden { display: none; }
/* Textarea sits inside the field with no chrome of its own. */
.compose-field .compose-ta-wrap { flex: 1 1 auto; min-width: 0; display: flex; }
/* Text vertically centred with the timecode chip on the resting single line
   (line-height == min-height centres one line; it still grows for more). */
.compose-field textarea { background: transparent; border: none; box-shadow: none; padding: 0 2px; min-height: 28px; line-height: 28px; resize: none; align-self: center; }
.compose-field textarea:hover, .compose-field textarea:focus { border: none; box-shadow: none; }
.compose .files-chip { font-size: var(--fz-xs); color: var(--text-muted); }

/* Selected-property chips above the field (DS §45) */
.compose-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.compose-chips.hidden { display: none; }
.compose-chip { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fz-xs); font-weight: var(--fw-medium); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px var(--sp-1) 2px var(--sp-2); }
.compose-chip .chip-x { min-height: 0; padding: 2px; border-radius: 999px; background: transparent; border: none; color: inherit; cursor: pointer; display: inline-flex; line-height: 0; }
.compose-chip .chip-x:hover { background: var(--surface-3); }
.compose-chip.c-type-req { color: var(--warn); }
.compose-chip.c-type-titre { color: var(--blue); }
.compose-chip.c-type-pin { color: var(--purple-text); }

/* «+» property list — a dropdown context menu on desktop (opens upward, anchored
   to the «+»), a bottom sheet on mobile. */
.compose-menu-wrap { position: relative; display: inline-flex; flex: 0 0 auto; align-self: center; }
.compose-tools {
  display: none; flex-direction: column; gap: 0;
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 250px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: var(--sp-1);
}
.compose.tools-open .compose-tools { display: flex; }
.ct-sheet-handle { display: none; }
.ct-sect { font-size: var(--fz-xs); color: var(--text-faint); padding: var(--sp-2) var(--sp-2) 4px; }
.ct-div { height: 1px; background: var(--border); margin: var(--sp-1) 0; }
.ct-item {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left;
  padding: var(--sp-2) var(--sp-2); min-height: 40px; border: none; border-radius: var(--r-sm);
  background: transparent; color: var(--text); font-size: var(--fz-sm); cursor: pointer;
}
.ct-item:hover { background: var(--surface-2); }
.ct-item .ic { color: var(--text-muted); flex: 0 0 auto; }
.ct-item.ct-type.active { color: var(--accent-solid); }
.ct-item.ct-type.active::after { content: "✓"; margin-left: auto; font-weight: var(--fw-bold); }
.compose-previews { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-1) 0; }
.compose-previews.hidden { display: none; }
.cp-thumb { position: relative; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: var(--canvas-bg); }
.cp-thumb.warn { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.cp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-del { top: 2px; right: 2px; }

/* @mention autocomplete + highlight */
.compose-main .compose-ta-wrap { position: relative; flex: 1 1 auto; display: flex; min-width: 0; }
.compose-ta-wrap > textarea { width: 100%; }
.mention-menu {
  position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 40; min-width: 220px; max-width: 320px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-md); padding: var(--sp-1); overflow: hidden;
}
.mention-menu.hidden { display: none; }
.mention-item {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-2) var(--sp-2);
  border: none; background: none; border-radius: 6px; cursor: pointer; font-size: var(--fz-sm); text-align: left; color: var(--text);
}
.mention-item.active, .mention-item:hover { background: var(--surface-2); }
.mention { color: var(--accent); font-weight: var(--fw-medium); }

/* notification bell + panel */
.notif-wrap { position: relative; display: inline-flex; }
.notif-btn { position: relative; border: none; background: none; cursor: pointer; font-size: var(--fz-lg); line-height: 1; padding: var(--sp-1) var(--sp-2); border-radius: 8px; }
.notif-btn:hover { background: var(--surface-2); }
/* DS §57: the bell count is dark/neutral (red is reserved for edits & deletions). */
.notif-badge {
  position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 var(--sp-1);
  background: var(--text); color: var(--surface); font-size: var(--fz-micro); font-weight: var(--fw-bold); line-height: 16px; text-align: center; border-radius: 8px;
}
.notif-badge.hidden { display: none; }
.notif-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 340px; max-width: 92vw; max-height: 70vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg);
}
.notif-panel.hidden { display: none; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border); font-weight: var(--fw-bold); font-size: var(--fz-sm); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.notif-head .notif-title { font-family: var(--font-display); }
.notif-head .link { border: none; background: none; color: var(--accent); cursor: pointer; font-size: var(--fz-xs); }
/* Segments: Непрочитанные (default) / Все (DS §55) */
.notif-tabs { display: flex; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); position: sticky; top: 45px; background: var(--surface); z-index: 1; }
.notif-tab { flex: 0 0 auto; min-height: 30px; padding: var(--sp-1) var(--sp-3); font-size: var(--fz-xs); border-radius: 999px; }
.notif-tab.active { background: var(--active-bg); color: var(--active-fg); border-color: var(--active-bg); }
.notif-tabn { font-variant-numeric: tabular-nums; opacity: 0.8; }
/* Day dividers (DS §55) */
.notif-day { padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: var(--fz-micro); color: var(--text-faint); text-transform: none; letter-spacing: 0.02em; position: sticky; top: 82px; background: var(--surface-2); border-top: 1px solid var(--border); }
.notif-empty { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--text-muted); font-size: var(--fz-sm); }
/* Row: avatar · body(line/snip/context) · time (DS §58) */
.notif-row { display: flex; align-items: flex-start; gap: var(--sp-3); width: 100%; text-align: left; border: none; border-radius: 0; background: none; cursor: pointer; padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border); }
.notif-row:hover { background: var(--surface-2); }
/* DS §56: unread reads as a row-background highlight (not a dot). */
.notif-row.unread { background: var(--accent-ghost); }
.notif-row.unread:hover { background: var(--accent-ghost-strong); }
.notif-row .avatar { flex: 0 0 auto; margin-top: 1px; width: 28px; height: 28px; font-size: var(--fz-xs); }
.notif-sys { background: var(--surface-3); color: var(--text-muted); }
/* DS §57: red flags edits / deletions on the row's stripe. */
.notif-row.notif-red { box-shadow: inset 3px 0 0 var(--danger-solid); }
.notif-body { flex: 1 1 auto; min-width: 0; }
.notif-line { font-size: var(--fz-sm); color: var(--text); }
.notif-actor { font-weight: var(--fw-bold); }
.notif-snip { font-size: var(--fz-xs); color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-meta { font-size: var(--fz-xs); color: var(--text-muted); margin-top: var(--sp-1); opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-tc { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.notif-time { flex: 0 0 auto; font-size: var(--fz-micro); color: var(--text-faint); font-variant-numeric: tabular-nums; margin-top: 1px; }
.notif-footer { display: block; width: 100%; text-align: center; border: none; border-radius: 0; background: none; cursor: pointer; padding: var(--sp-3); font-size: var(--fz-xs); color: var(--accent); border-top: 1px solid var(--border); position: sticky; bottom: 0; }
.notif-footer:hover { background: var(--surface-2); }

/* instant timeline mark tooltip */
.tl-tooltip {
  position: fixed; z-index: 80; max-width: 320px; pointer-events: none;
  background: var(--tooltip-bg); color: var(--control-text); font-size: var(--fz-xs); line-height: var(--lh-snug);
  padding: var(--sp-2) var(--sp-2); border-radius: 7px; box-shadow: var(--tooltip-shadow);
  white-space: pre-wrap; word-break: break-word;
}
.tl-tooltip.hidden { display: none; }

/* profile: password section */
.pf-sep { border: none; border-top: 1px solid var(--border); margin: var(--sp-4) 0 var(--sp-3); }
.pf-subhead { margin: 0 0 var(--sp-2); font-size: var(--fz-md); }
.ok-msg { color: var(--ok-text); font-size: var(--fz-sm); margin-bottom: var(--sp-2); }
.ok-msg.hidden { display: none; }
.link-btn { border: none; background: none; padding: var(--sp-1) 0; min-height: 0; color: var(--accent); font: inherit; cursor: pointer; }
.link-btn:hover { text-decoration: underline; background: none; }
.link-btn.danger { color: var(--danger); }
.guest-note { padding: var(--sp-3) var(--sp-4); margin: var(--sp-2); text-align: center; color: var(--text-muted); font-size: var(--fz-sm); background: var(--surface-2); border: 1px dashed var(--border); border-radius: 8px; }

/* referral / partner program */
.ref-note { background: var(--blue-weak); border: 1px solid var(--blue-border); color: var(--blue-strong); border-radius: 8px; padding: var(--sp-2) var(--sp-3); font-size: var(--fz-sm); margin-bottom: var(--sp-3); }
.ref-rules { font-size: var(--fz-sm); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: var(--sp-3) var(--sp-3); margin-bottom: var(--sp-3); }
.ref-rules ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
.ref-rules li { margin: var(--sp-1) 0; }
.ref-balance { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.rb-item { flex: 1; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: var(--sp-3) var(--sp-2); }
.rb-num { display: block; font-size: var(--fz-lg); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
.rb-lbl { font-size: var(--fz-xs); color: var(--text-muted); }
.ref-levels { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fz-sm); margin-bottom: var(--sp-2); }
.rl-item { background: var(--surface-2); border-radius: 6px; padding: var(--sp-2) var(--sp-3); }
.ref-link { border: 1px solid var(--border); border-radius: 8px; padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
.ref-link.off { opacity: .6; }
.rl-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-1); }
.rl-label { font-weight: var(--fw-medium); }
.rl-toggle { font-size: var(--fz-xs); color: var(--accent); cursor: pointer; }
.rl-url { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.rl-url input { flex: 1; font-size: var(--fz-xs); min-height: 32px; }
.rl-stats { font-size: var(--fz-xs); color: var(--text-muted); }
.ref-comms { overflow-x: auto; }
.ref-table { width: 100%; border-collapse: collapse; font-size: var(--fz-xs); }
.ref-table th, .ref-table td { text-align: left; padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.ref-table th { color: var(--text-muted); font-weight: var(--fw-medium); }

/* wide modal (referral / invites) */
.modal.modal-wide { max-width: 860px; }
.ref-totals { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.rt-item { flex: 1 1 140px; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: var(--sp-3) var(--sp-2); }
.rt-num { display: block; font-size: var(--fz-xl); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
.rt-lbl { font-size: var(--fz-xs); color: var(--text-muted); }
.ref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
.ref-links-scroll { max-height: 320px; overflow-y: auto; }
.ref-levels .rl-item { display: flex; align-items: center; gap: var(--sp-3); }
.rl-rate { flex: 0 0 46px; text-align: center; font-weight: var(--fw-heavy); color: var(--accent); background: var(--surface-2); border-radius: 6px; padding: var(--sp-1) 0; font-variant-numeric: tabular-nums; }
.rl-label-input { flex: 1; min-width: 0; font-weight: var(--fw-medium); border: 1px solid transparent; background: transparent; border-radius: 6px; padding: var(--sp-1) var(--sp-2); }
.rl-label-input:hover { border-color: var(--border); }
.rl-label-input:focus { border-color: var(--accent); background: var(--surface); outline: none; }
@media (max-width: 720px) { .ref-grid { grid-template-columns: 1fr; } .ref-links-scroll { max-height: none; } }

/* invites table */
.inv-create { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; align-items: center; }
.inv-create #inv-email { flex: 1; min-width: 160px; }
.inv-create #inv-role { width: auto; }
.inv-days-lbl { font-size: var(--fz-xs); color: var(--text-muted); display: inline-flex; align-items: center; gap: var(--sp-1); }
.inv-days-lbl input { width: 60px; }
.inv-table-wrap { overflow-x: auto; }
.inv-table { width: 100%; border-collapse: collapse; font-size: var(--fz-xs); }
.inv-table th, .inv-table td { text-align: left; padding: var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--border); vertical-align: top; }
.inv-table th { color: var(--text-muted); font-weight: var(--fw-medium); white-space: nowrap; }
.inv-table tr.used, .inv-table tr.expired { opacity: 0.75; }
.inv-status.active { color: var(--ok-text); }
.inv-status.used { color: var(--text-muted); }
.inv-status.expired, .inv-expired { color: var(--warn); }
.inv-created { white-space: nowrap; }
.inv-actions { white-space: nowrap; text-align: right; }
.inv-table .invite-code { font-family: var(--font-mono); font-size: var(--fz-xs); }
.cs-pending { color: var(--warn); } .cs-approved { color: var(--ok-text); } .cs-paid { color: var(--blue); } .cs-cancelled { color: var(--text-muted); text-decoration: line-through; }

/* feedback (bug report / idea) */
.fb-btn {
  display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  cursor: pointer; font-size: var(--fz-xs); font-weight: var(--fw-medium); line-height: 1;
  padding: var(--sp-2) var(--sp-3); min-height: 0; border-radius: 8px;
}
.fb-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.fb-success { text-align: center; padding: var(--sp-2) var(--sp-1) 2px; }
.fb-success-emoji { font-size: var(--fz-2xl); line-height: 1; margin-bottom: var(--sp-2); }
.fb-success p { margin: 0; font-size: var(--fz-sm); line-height: var(--lh-loose); color: var(--text); }
.fb-success.hidden, #fb-form.hidden { display: none; }
@media (max-width: 720px) { .fb-btn-label { display: none; } } /* icon only on small screens */
.fb-wrap { position: relative; display: inline-flex; }
.fb-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 320px; max-width: 92vw;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg); padding: var(--sp-3);
}
.fb-panel.hidden { display: none; }
.fb-panel h4 { margin: 0 0 var(--sp-2); font-size: var(--fz-md); }
.fb-panel textarea { width: 100%; min-height: 90px; resize: vertical; }
.fb-panel .fb-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); }
.fb-msg { font-size: var(--fz-xs); margin-top: var(--sp-2); }
.fb-msg.hidden { display: none; }
.compose textarea { min-height: 44px; max-height: 140px; }
/* Inside the bordered field the textarea is single-line height so its text
   centres with the timecode chip; the field border provides the visual box. */
.compose .compose-field textarea { min-height: 28px; max-height: 120px; }
/* narrow comment column → taller input so ~2 lines are visible up front */
.compose.narrow textarea { min-height: 66px; }
/* With the taller field the timecode chip must ride at the top, level with the
   first line of text (not centred against the whole 2-line box). */
.compose.narrow .compose-field { align-items: flex-start; }
.compose.narrow .compose-field .range-menu-wrap,
.compose.narrow .compose-field .range-edit,
.compose.narrow .compose-field .range-reset { align-self: flex-start; margin-top: 2px; }
/* Round icon send button (DS reference): 40px circle, arrow glyph. */
.compose .send-btn { flex: 0 0 auto; align-self: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.compose .send-btn .ic { width: 18px; height: 18px; }
/* DS §44: inactive (grey) while empty, accent-green from the first character. */
.compose .send-btn:disabled { background: var(--surface-2); color: var(--text-muted); border-color: transparent; opacity: 1; cursor: default; }
.compose .send-btn.is-sending:disabled { background: var(--accent-solid); color: var(--accent-on); }
/* version selector in the review title bar — a compact badge-styled <select> */
.rt-version {
  appearance: none; -webkit-appearance: none;
  font-size: var(--fz-xs); font-weight: var(--fw-bold); font-family: inherit;
  color: var(--accent); background: var(--accent-weak);
  border: 1px solid var(--accent-weak); border-radius: 6px;
  padding: 2px var(--sp-2); min-height: 0; height: auto; width: auto; flex: 0 0 auto; cursor: pointer;
}

/* modal */
.modal-backdrop {
  position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(3px);
  z-index: 50; display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
  animation: modalFade var(--dur) var(--ease);
}
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  position: relative;
  background: var(--surface); border-radius: var(--r-lg); max-width: 480px; width: 100%;
  padding: var(--sp-5); box-shadow: var(--shadow-lg); max-height: 90vh; overflow: auto;
  animation: modalPop var(--dur-slow) var(--ease-out);
}
.modal > h3:first-of-type { padding-right: var(--sp-7); } /* room for the close X */
@keyframes modalPop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal h3 { margin: 0 0 var(--sp-1); font-size: var(--fz-lg); }
.modal .modal-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-5); }

/* supported-sources hint in the add-video modal */
.src-hint { margin: var(--sp-2) 0 2px; padding: var(--sp-3) var(--sp-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; font-size: var(--fz-xs); color: var(--text-muted); }
.src-hint-title { font-weight: var(--fw-bold); color: var(--text); margin-bottom: var(--sp-1); }
.src-hint ul { margin: 0; padding-left: var(--sp-5); }
.src-hint li { margin: 2px 0; }
.src-hint li b { color: var(--text); font-weight: var(--fw-medium); }
.src-hint-note { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
/* unified modal header with close button */
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.modal-head h3 { margin: 0; }
.modal-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; min-height: 32px; border-radius: 50%; border: none; background: var(--surface-2); color: var(--text-muted); font-size: var(--fz-base); line-height: 1; padding: 0; }
.modal-x:hover { background: var(--surface-3); color: var(--text); }
.invite-code { font-family: var(--font-mono); background: var(--surface-2); padding: 2px var(--sp-2); border-radius: 6px; }

/* toasts */
#toasts { position: fixed; left: 0; right: 0; bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); z-index: 100; pointer-events: none; }
.toast { background: var(--toast-bg); color: var(--control-text); padding: var(--sp-3) var(--sp-4); border-radius: 10px; box-shadow: var(--toast-shadow); font-size: var(--fz-md); max-width: 90vw; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow), transform var(--dur-slow); pointer-events: auto; }
.toast.show { opacity: 1; transform: none; }
.toast.error { background: var(--danger-solid); }
.toast.success { background: var(--ok-solid); }
.toast-action { display: inline-flex; align-items: center; gap: var(--sp-3); text-align: left; }
.toast-btn { background: transparent; border: none; color: var(--accent-solid); font-weight: var(--fw-bold); font-size: var(--fz-md); padding: var(--sp-1) var(--sp-2); border-radius: 999px; cursor: pointer; min-height: 0; white-space: nowrap; }
.toast-btn:hover { background: rgba(255, 255, 255, 0.12); }

/* filter counts + review progress */
.f-count { font-size: var(--fz-xs); font-variant-numeric: tabular-nums; opacity: 0.65; margin-left: 1px; }
.filters button.active .f-count { opacity: 0.9; }
.rt-progress { font-size: var(--fz-xs); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* hover link: comment ↔ timeline mark (comment side = background only, no ring) */
/* Nav highlight (permalink) uses scale + brightness, never a ring — a ring on a
   mark means the current timecode only (DS §21). */
.timeline .mark.range.linkhl { z-index: 6; filter: brightness(1.3); }

/* empty feed */
.feed-empty { text-align: center; color: var(--text-muted); padding: var(--sp-7) var(--sp-5); }
.feed-empty .fe-emoji { font-size: var(--fz-2xl); margin-bottom: var(--sp-2); opacity: 0.85; }
.feed-empty p { margin: var(--sp-2) 0; }
.feed-empty p:first-of-type { color: var(--text); font-weight: var(--fw-medium); font-size: var(--fz-base); }

/* hotkeys cheatsheet */
.hk-table { width: 100%; border-collapse: collapse; }
.hk-table td { padding: var(--sp-2) var(--sp-1); border-bottom: 1px solid var(--border); font-size: var(--fz-md); }
.hk-key { font-family: var(--font-mono); white-space: nowrap; width: 132px; color: var(--accent); font-weight: var(--fw-medium); }

/* "edited by/when" note */
.c-edited { color: var(--text-muted); font-style: italic; }

/* whole-video (pinned) comment — same style as a normal comment row, just without
   the timecode column (it applies to the whole video). The «Закреплённый:» inline
   label marks it as pinned. */
#btn-general.active { background: var(--purple-solid); color: var(--accent-contrast); border-color: var(--purple-solid); }
.comment.general {
  display: block; background: transparent; box-shadow: none; border: none;
  border-bottom: 1px solid var(--border); border-left: 3px solid var(--author, var(--border));
  border-radius: 0; padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-3);
  transition: background var(--dur) var(--ease);
}
.comment.general:hover { background: var(--surface-2); }
.comment.general.done { opacity: 1; }

/* inline type label at the start of the comment line (request / titre / pinned) */
.comment .c-type { font-weight: var(--fw-bold); }
.comment .c-type-req { color: var(--warn); }
.comment .c-type-titre { color: var(--blue); }
.comment .c-type-pin { color: var(--purple-text); }
/* DS §22: filled square, glyph cut out in the timeline background colour. */
.timeline .tl-req {
  position: absolute; bottom: 2px; width: 15px; height: 15px; transform: translateX(-50%);
  border: none; border-radius: 4px;
  font-size: var(--fz-xs); font-weight: var(--fw-heavy); line-height: 15px; text-align: center; cursor: pointer;
}
.timeline .tl-req.closed { opacity: 0.35; }
/* titres marks (T) */
.timeline .tl-titre {
  position: absolute; width: 15px; height: 15px; transform: translateX(-50%);
  border: none; border-radius: 4px;
  font-size: var(--fz-xs); font-weight: var(--fw-heavy); line-height: 15px; text-align: center; cursor: pointer;
}
.timeline .tl-titre.closed { opacity: 0.35; }

/* radio group (add-version modal) */
.radio-group { display: flex; flex-direction: column; gap: var(--sp-1); }
.radio-group label { display: flex; align-items: center; gap: var(--sp-2); color: var(--text); font-size: var(--fz-md); margin: 0; cursor: pointer; }
.radio-group input { width: auto; min-height: 0; }

/* selective export */
.select-bar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); background: var(--accent-weak); border-bottom: 1px solid var(--border); font-size: var(--fz-sm); position: sticky; top: 0; z-index: 6; }
.select-bar .spacer { flex: 1; }
.select-bar .sel-sep { width: 1px; align-self: stretch; background: var(--border-strong); margin: 0 var(--sp-1); }
.comment.selecting { position: relative; }
.comment .sel-check { width: 18px; height: 18px; min-height: 0; flex: none; margin-right: 2px; align-self: flex-start; margin-top: var(--sp-1); cursor: pointer; }

/* image lightbox */
.lightbox-backdrop { position: fixed; inset: 0; background: var(--scrim-strong); z-index: 90; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); cursor: zoom-out; }
.lightbox-img { max-width: 96vw; max-height: 94vh; object-fit: contain; border-radius: 6px; box-shadow: var(--lightbox-shadow); }
.lightbox-close { position: fixed; top: 14px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: var(--overlay-light); color: var(--control-text); border: none; font-size: var(--fz-lg); cursor: pointer; }
.lightbox-close:hover { background: var(--overlay-light-hover); }
input[type="color"] { padding: 2px; cursor: pointer; }

/* editable timecode in the feed */
.c-tc-wrap { display: inline-flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.c-tc, .c-tc-end { cursor: pointer; }
.c-left.tc-editing { display: flex; flex-direction: column; gap: var(--sp-1); align-items: stretch; }
.tc-in { width: 76px; font-size: var(--fz-xs); padding: var(--sp-1) var(--sp-1); min-height: 0; font-variant-numeric: tabular-nums; }
.tc-edit-btns { display: flex; flex-direction: column; gap: var(--sp-1); align-items: stretch; }
.tc-mini { border: 1px solid var(--border); background: var(--surface); min-height: 0; padding: 2px var(--sp-2); border-radius: 5px; cursor: pointer; font-size: var(--fz-xs); }
.tc-mini.ok { color: var(--ok-text); }

/* speed popover */
.speed-wrap { position: relative; display: inline-flex; }
/* Fixed (not absolute): the controls strip scrolls horizontally on mobile and
   used to clip this popup. Coordinates are set by positionSpeedPop(). */
.speed-pop { position: fixed; z-index: 60; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-md); padding: var(--sp-2); width: 150px; }
.speed-pop.hidden { display: none; }
.speed-adjust { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.speed-adjust button { min-height: 0; width: 34px; padding: var(--sp-1) 0; font-size: var(--fz-lg); }
.speed-adjust #speed-val { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.speed-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1); }
.speed-presets button { min-height: 0; padding: var(--sp-1) 0; font-size: var(--fz-xs); }

/* drag image onto the compose */
.compose.drag-over { outline: 2px dashed var(--accent); outline-offset: -4px; background: var(--accent-ghost); }

/* ===== desktop ===== */
@media (min-width: 900px) {
  .review { flex-direction: row; } /* height comes from body.view-review (fills viewport) */
  body.view-review .player-col { flex: 0 0 62%; }
  .player-col { flex: 0 0 62%; max-width: 62%; display: flex; flex-direction: column; background: var(--canvas-bg); }
  .player-sticky { position: static; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .player-box { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }

  .splitter {
    display: block; flex: 0 0 6px; background: var(--border); cursor: col-resize;
    position: relative; z-index: 15;
  }
  .splitter:hover, .splitter:active { background: var(--accent); }

  .review-body { flex: 1 1 auto; min-width: 0; height: 100%; }
  .feed { flex: 1; overflow-y: auto; padding-bottom: var(--sp-3); }
  .review-title-bar { position: static; }
  .filters { position: static; }
}

/* ===== mobile polish (#9): bottom-sheet modals, bigger touch targets ===== */
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@media (max-width: 720px) { /* DS §61: mobile layout threshold */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal { max-width: 100%; width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; padding: var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom)); animation: sheetUp var(--dur-slow) var(--ease-out); }
  .modal-x { top: 12px; right: 12px; }
  .comment .c-head-actions .icon-btn, .comment .c-bottom .icon-btn { min-height: 38px; height: 38px; width: 38px; }
  .comment .sel-check { width: 22px; height: 22px; }
  .filters { gap: var(--sp-1) var(--sp-2); }
  .fe-tool, .fe-color { min-height: 40px; }
  .lightbox-close { top: 10px; right: 10px; }

  /* Header: burger on the far left, no logo, secondary actions in the burger. */
  .topbar-desktop { display: none; }
  .nav-menu-wrap { display: inline-flex; order: -1; }  /* far left */
  .topbar .brand { display: none; }                    /* no logo on mobile */
  .topbar { gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
  .topbar .who-name { display: none; }                 /* avatar only, saves space */
  .topbar .crumb { display: none; }                    /* back-to-project moved to the burger */
  .topbar .crumb-video { display: none; }              /* video name not shown in the mobile topbar */

  /* Title bar: no video title; desktop-only buttons and the version select hidden
     (version lives in the burger). "Фильтры" spoiler + feed-fullscreen shown. */
  .title-bar-desktop { display: none; }
  .rt-title { display: none; }
  .version-select { display: none; }
  .filters-toggle, .feed-fs-toggle { display: inline-flex; }
  .review-title-bar { gap: var(--sp-1) var(--sp-2); padding: var(--sp-1) var(--sp-2); }

  /* Feed fullscreen → the player is a PiP over the feed (DS §67): 38% wide, 16:9,
     pinned bottom-right 10px above the composer, tap restores, drag by the corners,
     no controls inside and no resize handle. */
  #app.feed-fullscreen .player-col {
    position: fixed; z-index: 45; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom));
    width: 38%; max-width: 320px; height: auto; aspect-ratio: 16 / 9;
    border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-lg);
    border: 1px solid var(--control-border); touch-action: none;
  }
  #app.feed-fullscreen .player-box { aspect-ratio: 16 / 9; height: 100%; }
  #app.feed-fullscreen .tc-badge, #app.feed-fullscreen .timeline-wrap { display: none; }
  #app.feed-fullscreen .pip-drag { display: block; position: absolute; inset: 0; z-index: 5; cursor: move; touch-action: none; }
  #app.feed-fullscreen .pip-resize { display: none; } /* fixed 38% size, no resize (DS §67) */

  /* Composer (DS §64): a permanent input row — «+», чип таймкода, поле, отправить.
     The «+» opens the property tools as a bottom sheet (DS §65). */
  .compose-plus { display: inline-flex; }
  .compose-main { gap: var(--sp-1); flex-wrap: nowrap; }
  .compose .range-chip { padding: var(--sp-1) var(--sp-2); }
  .compose .compose-ta-wrap { min-width: 0; }
  .compose #btn-send { flex: 0 0 auto; white-space: nowrap; }
  /* Text fields must be >= 16px or iOS auto-zooms the page on focus (and never
     restores). Compact selects don't trigger that, so they keep their own size. */
  input, textarea { font-size: 16px; }

  /* Property tools as a bottom sheet with a grab handle + dimmed backdrop. */
  .compose.tools-open::before { content: ""; position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, 0.4); }
  .compose.tools-open .compose-tools {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60;
    min-width: 0; max-width: none;
    background: var(--surface); border: none; border-top: 1px solid var(--border); border-radius: 18px 18px 0 0;
    box-shadow: var(--shadow-lg); gap: 2px;
    padding: var(--sp-2) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom));
    animation: sheetUp var(--dur-slow) var(--ease-out); max-height: 70vh; overflow-y: auto;
  }
  .compose-tools .ct-sheet-handle { display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--border-strong); margin: 2px auto var(--sp-2); }
  .compose-tools .ct-item { min-height: 46px; }

  /* "Все проекты" on the project page. */
  .proj-all-mobile { display: inline-flex; margin-bottom: var(--sp-3); }

  /* Filters as a spoiler: hidden until "Фильтры" is tapped. */
  .filters { display: none; }
  .filters.open { display: flex; }

  /* Player controls strictly on one line (scroll sideways if they don't all fit). */
  .tc-badge { padding: var(--sp-1) var(--sp-2); gap: var(--sp-1); flex-wrap: nowrap; }
  .tc-badge .tc-now { font-size: var(--fz-md); flex: 0 0 auto; }
  .tc-badge .ctrls { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tc-badge .ctrls::-webkit-scrollbar { display: none; }
  .tc-badge .ctrl-spacer { display: none; } /* no stretch inside the mobile scroll strip */
  .tc-badge .skip { min-width: 34px; padding: var(--sp-1) var(--sp-1); flex: 0 0 auto; }

  /* Timeline zoom is pinch-only on mobile — hide the +/- buttons. */
  .tl-zoom { display: none; }
  .timeline-wrap { padding-bottom: var(--sp-1); }

  /* Denser comment feed; horizontal padding trimmed to 12px (ТЗ §5). */
  .feed { padding: var(--sp-1) 12px var(--sp-3); gap: 0; }
  .comment.root:not(.general) > .c-main { padding: var(--sp-3) var(--sp-2); }
  .comment.general { padding: var(--sp-2) var(--sp-2); }
  .comment .c-body { margin: 2px 0; font-size: var(--fz-sm); }
  .comment .c-head { gap: var(--sp-1); }
  .comment .c-bottom { margin-top: 2px; gap: 2px; }
  .comment .avatar.sm { width: 20px; height: 20px; font-size: 9px; }
  .comment .c-name { font-size: var(--fz-xs); }

  /* The left timecode column becomes a full-width row above the branch; no divider
     under it, and the head chip is dropped on mobile. */
  .comment.root:not(.general) { flex-direction: column; align-items: stretch; }
  .comment.root:not(.general) > .c-left {
    display: block; width: 100%; padding: 0; margin-bottom: var(--sp-1); border-bottom: none;
  }
  .comment.root:not(.general) > .c-left .c-tc-wrap { display: inline-flex; gap: var(--sp-1); }
  .comment.root:not(.general) > .c-left .c-tc {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-muted);
  }
  .comment .c-head-tc { display: none; } /* timecode now lives in the row above */
  /* collapsed closed правка: timecode not a fixed column on phones (no gutter) */
  .done-collapsed .dc-tc { width: auto; }

  /* Thinner rails on mobile, uniform 2px on every level (root colour + nested grey). */
  .comment.root:not(.general) > .c-main { border-left-width: 2px; }
  .comment.reply { border-left-width: 2px; }
  /* Smaller nesting step on mobile (14px). */
  .branch { padding-left: 14px; }
  .branch .branch .branch .branch { padding-left: 0; }
  /* DS §69: comfortable touch targets. */
  .comment .c-head-actions .icon-btn, .comment .c-bottom .icon-btn { min-height: 44px; height: 44px; width: 44px; }
  .ct-type, .ct-media-btn, .notif-tab { min-height: 44px; }
  .tc-badge .skip, .tc-badge .play-btn { min-height: 44px; }
}

/* DS §69: on very narrow phones the comment head keeps only the галочка and «ещё»;
   the responsible control drops out (still reachable via the ⋯ menu / row). */
@media (max-width: 360px) {
  .comment .c-head-actions .assignee { display: none; }
}

/* =========================================================================
   Features 2/4/7/8/10 — статусы, инбокс, поиск, сессии, корзина, суперадмин
   Все цвета — из дизайн-токенов, поэтому светлая/тёмная темы работают сами.
   ========================================================================= */

.mono { font-family: var(--font-mono); }
.tiny { font-size: var(--fz-xs); }
.money { font-family: var(--font-mono); font-weight: var(--fw-bold); white-space: nowrap; }
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fz-xs); font-weight: var(--fw-medium);
  padding: 2px var(--sp-2); border-radius: 999px; border: 1px solid transparent;
  white-space: nowrap; line-height: 1.4;
}
.pill.good { background: var(--ok-weak); color: var(--ok-text); }
.pill.warn { background: var(--warn-weak); color: var(--warn); border-color: var(--warn-border); }
.pill.crit { background: var(--danger-weak); color: var(--danger); }
.pill.accent { background: var(--accent-weak); color: var(--accent); }
.pill.neutral { background: var(--surface-2); color: var(--text-muted); }
.note-info {
  background: var(--warn-weak); border: 1px solid var(--warn-border); color: var(--warn);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fz-sm); margin-bottom: var(--sp-4);
}

/* 2. approval status */
.vstatus {
  display: inline-flex; align-items: center; gap: 3px; font-size: var(--fz-xs); font-weight: var(--fw-medium);
  padding: 3px var(--sp-2); border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
/* "Принято/Выложено" carry a check — the FORM, not the shade, marks acceptance (DS). */
.vstatus.st-approved::before, .vstatus.st-published::before { content: "✓"; font-weight: 700; }
/* Workflow: Новый → Новая версия → Правки даны → Правки внесены →
   Утверждено → Выложено → В архиве */
/* 7 statuses recoloured to the Финалка palette. Green = accepted/done only. */
.vstatus.st-new, .vstatus-select.st-new { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
.vstatus.st-newver, .vstatus-select.st-newver { background: var(--info-weak); color: var(--info); border-color: transparent; }
.vstatus.st-given, .vstatus-select.st-given { background: var(--danger-weak); color: var(--danger); border-color: transparent; }
.vstatus.st-done, .vstatus-select.st-done { background: var(--warn-weak); color: var(--warn); border-color: var(--warn-border); }
.vstatus.st-approved, .vstatus-select.st-approved { background: var(--ok-weak); color: var(--ok-text); border-color: transparent; }
.vstatus.st-published, .vstatus-select.st-published { background: var(--ok); color: var(--ok-on); border-color: transparent; }
.vstatus.st-archived, .vstatus-select.st-archived { background: var(--surface-3); color: var(--text-faint); border-color: var(--border); }
.vstatus-select {
  appearance: none; -webkit-appearance: none; font-family: inherit; font-size: var(--fz-xs);
  font-weight: var(--fw-medium); border-radius: 999px; padding: 3px var(--sp-3); cursor: pointer;
  min-height: 0; height: auto; width: auto; flex: 0 0 auto;
}
.vi-status-wrap { flex: none; }

/* ---- shared context menu (⋯) ---- */
.ctx-wrap { position: relative; display: inline-flex; flex: none; }
.ctx-btn { color: var(--text-muted); }
.ctx-btn:hover { color: var(--accent); }
/* Fixed, not absolute: html/body use overflow-x:hidden, which turns the body
   into a scroll container that would clip an absolute menu (and grow a
   scrollbar). Coordinates come from positionCtxMenu(), anchored to the card's
   bottom-right corner. */
.ctx-menu {
  position: fixed; z-index: 200; min-width: 210px; max-width: min(92vw, 280px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: var(--sp-1);
}
.ctx-menu.hidden { display: none; }
.ctx-menu .menu-item {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left;
  background: none; border: none; border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-2);
  font-size: var(--fz-sm); color: var(--text); cursor: pointer; min-height: 36px;
}
.ctx-menu .menu-item:hover { background: var(--surface-2); }
.ctx-menu .menu-item.danger { color: var(--danger); }
.ctx-menu .menu-item .ic { color: var(--text-muted); flex: none; }
.ctx-menu .menu-item.danger .ic { color: var(--danger); }

/* ---- project page: video list as a table ---- */
.video-list-head {
  display: grid; grid-template-columns: 1fr 150px 170px 44px; gap: var(--sp-3);
  align-items: center; padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-size: var(--fz-xs); text-transform: none; letter-spacing: 0.02em;
  color: var(--text-muted); font-weight: var(--fw-medium);
}
/* Only the project page's video table is a 4-column grid. The projects list
   reuses .video-item with just a title + menu, so it stays a flex row —
   otherwise its ⋯ button landed in the middle status column. */
.video-list.videos-table .video-item { display: grid; grid-template-columns: 1fr 150px 170px 44px; gap: var(--sp-3); align-items: center; }
.video-item .vi-cell { min-width: 0; }
.video-item .vi-cell-menu { display: flex; justify-content: flex-end; }
/* The ⋯ button is the same size and alignment in every list/table. */
.ctx-btn { width: 32px; height: 32px; min-height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* Responsible person: a round dot in the participant's colour + name/select.
   Colour marks the person; the control itself stays neutral (no coloured plate). */
.vi-assignee-wrap { display: inline-flex; align-items: center; gap: 6px; min-width: 0; width: 100%; }
.vi-assignee-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.vi-assignee-select {
  appearance: none; -webkit-appearance: none; font-family: inherit; font-size: var(--fz-xs);
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 3px var(--sp-2); cursor: pointer;
  min-height: 0; height: auto; width: 100%; flex: 1 1 auto; min-width: 0;
}
.vi-assignee {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fz-xs); color: var(--text-muted);
}

/* ---- admin: filters, counts, user card ---- */
.admin-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
}
.admin-filters label { display: inline-flex; align-items: center; gap: var(--sp-1); margin: 0; font-size: var(--fz-xs); color: var(--text-muted); }
.admin-filters select, .admin-filters input[type="number"] {
  min-height: 30px; height: auto; padding: 2px var(--sp-2); font-size: var(--fz-xs); width: auto;
}
.admin-filters input[type="number"] { width: 68px; }
.admin-filters input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; flex: none; margin: 0; padding: 0; }
.admin-count { font-size: var(--fz-xs); color: var(--text-muted); margin-bottom: var(--sp-2); }
.filters-hint { color: var(--text-muted); margin-left: auto; }

/* sortable table headers */
.admin-table th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.admin-table th.th-sort:hover { color: var(--accent); background: var(--surface-3); }
.admin-table th.th-sort.active { color: var(--accent); }
.admin-table tr.row-clickable:hover { background: var(--accent-ghost); }

.uc-head { display: flex; align-items: flex-start; gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-4); }
.uc-ava {
  width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center;
  color: #fff; font-weight: var(--fw-bold); font-size: var(--fz-lg);
}
.uc-id { flex: 1; min-width: 0; }
.uc-name { font-size: var(--fz-lg); font-weight: var(--fw-bold); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.uc-mail { font-size: var(--fz-sm); color: var(--text-muted); margin-top: 2px; }
.uc-meta { color: var(--text-muted); margin-top: 4px; }
.uc-actions { flex: none; }
.uc-kpis { grid-template-columns: repeat(6, 1fr); }
.uc-log { display: flex; flex-direction: column; gap: var(--sp-1); }
.uc-log-row {
  display: grid; grid-template-columns: 108px 128px 1fr; gap: var(--sp-2); align-items: start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3);
}
.uc-when { color: var(--text-muted); }
.uc-log-body { min-width: 0; font-size: var(--fz-sm); overflow-wrap: anywhere; }

/* ---- project page header ---- */
.proj-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; }
.proj-head-info { min-width: 0; }
.proj-head-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ---- composer: "sending" state (blocks double submits visibly) ---- */
.compose.sending { opacity: 0.75; }
.compose.sending #compose-text { pointer-events: none; }
#btn-send.is-sending { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: progress; }
#btn-send:disabled { opacity: 0.85; cursor: progress; }
.spinner {
  width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: vr-spin 0.7s linear infinite;
}
@keyframes vr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; opacity: 0.7; }
}

/* 4. inbox + search */
.inbox-view .section-title, .admin-view .section-title { margin-bottom: var(--sp-3); }
.inbox-search { position: relative; margin-bottom: var(--sp-4); }
.inbox-search input[type="search"] { width: 100%; }
.srch-results { display: none; }
.srch-results.has {
  display: block; position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); max-height: 60vh; overflow-y: auto; padding: var(--sp-1);
}
.srch-h { font-size: var(--fz-xs); color: var(--text-muted); font-weight: var(--fw-medium); padding: var(--sp-2) var(--sp-2) var(--sp-1); }
.srch-empty { padding: var(--sp-3); color: var(--text-muted); font-size: var(--fz-sm); }
.srch-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left;
  background: none; border: none; border-radius: var(--r-sm); padding: var(--sp-2); cursor: pointer;
}
.srch-row:hover { background: var(--surface-2); }
.srch-row .srch-t { font-size: var(--fz-sm); color: var(--text); }
.srch-row .srch-sub { font-size: var(--fz-xs); color: var(--text-muted); }
.inbox-tabs { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.inbox-tabs button {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 999px; padding: var(--sp-1) var(--sp-3); font-size: var(--fz-sm); cursor: pointer;
}
.inbox-tabs button.active { background: var(--active-bg); color: var(--active-fg); border-color: var(--active-bg); }
.inbox-tabs .c { font-family: var(--font-mono); opacity: 0.8; margin-left: 2px; }
.inbox-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.ibx-row {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3); cursor: pointer;
}
.ibx-row:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.ibx-main { flex: 1; min-width: 0; }
.ibx-text { font-size: var(--fz-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibx-meta { font-size: var(--fz-xs); color: var(--text-muted); margin-top: 2px; }
.ibx-tc { font-family: var(--font-mono); color: var(--accent); }
.ibx-type { flex: none; font-size: var(--fz-xs); background: var(--accent-weak); color: var(--accent); border-radius: 6px; padding: 2px var(--sp-2); }

/* 7. sessions / verify (profile modal) */
.pf-verify { font-size: var(--fz-sm); margin-bottom: var(--sp-3); }
.vok { color: var(--ok-text); font-weight: var(--fw-medium); }
.vwarn { color: var(--warn); font-weight: var(--fw-medium); }
.pf-sessions-h { font-size: var(--fz-sm); color: var(--text-muted); font-weight: var(--fw-medium); margin-bottom: var(--sp-2); }
.pf-sessions { display: flex; flex-direction: column; gap: var(--sp-2); }
.sess-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3);
}
.sess-ua { font-size: var(--fz-sm); }
.sess-sub { font-size: var(--fz-xs); color: var(--text-muted); }

/* 8. trash */
.trash-h { font-size: var(--fz-md); font-weight: var(--fw-bold); margin: var(--sp-5) 0 var(--sp-2); }
.trash-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3); margin-bottom: var(--sp-2);
}
.trash-title { font-weight: var(--fw-medium); }
.trash-sub { font-size: var(--fz-xs); color: var(--text-muted); margin-top: 2px; }
.trash-acts { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

/* 10. superadmin */
.admin-tabs { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-4); border-bottom: 1px solid var(--border); padding-bottom: var(--sp-2); }
.admin-tabs button {
  background: none; border: none; color: var(--text-muted); border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3); font-size: var(--fz-sm); cursor: pointer;
}
.admin-tabs button:hover { background: var(--surface-2); }
.admin-tabs button.active { background: var(--accent-weak); color: var(--accent); font-weight: var(--fw-medium); }
.akpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-4); }
.akpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); box-shadow: var(--shadow); }
.akpi-alert { border-color: var(--danger); }
.akpi-l { font-size: var(--fz-xs); color: var(--text-muted); }
.akpi-v { font-size: var(--fz-xl); font-weight: var(--fw-bold); margin-top: 2px; }
.akpi-alert .akpi-v { color: var(--danger); }
.acards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.acard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); box-shadow: var(--shadow); }
.acard.acard-alert { border-color: var(--danger); }
.acard h4 { margin: 0 0 var(--sp-3); font-size: var(--fz-sm); }
.arow { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-1) 0; font-size: var(--fz-sm); border-top: 1px solid var(--border); }
.arow:first-of-type { border-top: none; }
.arow span { color: var(--text-muted); }
.admin-toolbar { margin-bottom: var(--sp-3); }
.admin-toolbar input { width: 100%; max-width: 360px; }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fz-sm); min-width: 560px; }
.admin-table thead th {
  text-align: left; font-size: var(--fz-xs); text-transform: none; letter-spacing: 0.04em;
  color: var(--text-muted); font-weight: var(--fw-medium); padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.admin-table tbody td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--surface-2); }
.admin-table tr.row-blocked { opacity: 0.6; }
.admin-row-acts { display: flex; gap: var(--sp-1); flex-wrap: wrap; justify-content: flex-end; }
.af-filters { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.af-filters button { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); border-radius: 999px; padding: var(--sp-1) var(--sp-3); font-size: var(--fz-sm); cursor: pointer; }
.af-filters button.active { background: var(--active-bg); color: var(--active-fg); border-color: var(--active-bg); }
.admin-tool { margin-top: var(--sp-5); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); }
.admin-tool summary { cursor: pointer; font-weight: var(--fw-medium); font-size: var(--fz-sm); }

@media (max-width: 720px) {
  .akpis, .uc-kpis { grid-template-columns: repeat(3, 1fr); }
  .acards { grid-template-columns: 1fr; }
  .trash-row, .sess-row { flex-wrap: wrap; }
  .uc-head { flex-wrap: wrap; }
  .uc-log-row { grid-template-columns: 1fr; gap: 2px; }
  .admin-filters { gap: var(--sp-2); }
}

/* =========================================================================
   Mobile: project page + player controls
   ========================================================================= */
@media (max-width: 720px) { /* DS §61: mobile layout threshold */
  /* Card layout on phones: title row (with the ⋯ menu), then status and
     responsible side by side. No table columns. */
  .video-list-head { display: none; }
  .video-list.videos-table .video-item {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "main menu"
      "status assignee";
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3);
  }
  .video-item .vi-main { grid-area: main; min-width: 0; }
  .video-item .vi-cell-menu { grid-area: menu; }
  .video-item .vi-cell-status { grid-area: status; }
  .video-item .vi-cell-assignee { grid-area: assignee; }
  .video-item .vi-title { font-size: var(--fz-md); }
  .video-item .vi-sub { font-size: var(--fz-xs); }
  .vi-assignee-select { max-width: 100%; }

  /* Header: title block first, actions wrap below, each button content-sized */
  .proj-head { gap: var(--sp-2); }
  .proj-head-info, .proj-head-actions { width: 100%; }
  .proj-head-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .proj-head-actions button { min-height: 36px; flex: 0 0 auto; width: auto; }
  .proj-head-actions .primary { flex: 1 0 100%; }  /* primary action on its own row */

  /* Player controls: drop the volume slider (touch devices use hardware volume;
     iOS ignores programmatic volume anyway) and pull the speed control to the
     start of the scrolling strip so it's always reachable. */
  .tc-badge .vol { display: none; }
  .tc-badge .ctrls .speed-wrap { order: -1; }
}