/* Вариант D — «Студія» (Studio).
   ui-ux-pro-max: Bento Box Grid + Dark Mode (OLED), шрифты Outfit (заголовки) +
   Inter (текст) + JetBrains Mono (таймкоды). Референс — Frame.io V4 / Linear.
   Перестроено, не перекрашено:
   • боковая панель → верхняя панель: логотип, единый поиск с режимами, действия;
     фильтры Замовник / Лід / Проєкт — таблетками во втором ряду;
   • главная — шапка со статистикой + bento-сетка проектов, подпись поверх обложки;
   • проект — шапка с размытой обложкой, лидом, сводкой статусов; чипы
     статуса и типа вместо выпадающих списков; липкие вкладки разделов;
   • карточка — название поверх превью, «аватар · автор · N днів тому»,
     статус-таблетка цвета статуса, ссылки и Sources/Export — чипами;
   • Feedbacker — «кинозал»: панели-капсулы, комменты как чат с аватарами;
   • вход — экран с витриной слева.
   Дополняется public/skins/enhance.js (элементы интерфейса). */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('/skins/skin-base.css');
@import url('/skins/components.css');

:root[data-sk="d"] {
  --sk-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sk-display: 'Outfit', 'Inter', system-ui, sans-serif;
  --sk-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --sk-r: 10px; --sk-r-lg: 16px; --sk-r-thumb: 0px; --sk-ctl: 38px;
  --sk-card-w: 288px; --sk-card-w-compact: 220px; --sk-card-pad: 0px; --sk-card-pad-compact: 0px;
  --sk-review-fs: 15.5px; --sk-head-h: 112px;
  --sk-grad: var(--sk-accent);

  /* день */
  --sk-bg: #f5f6fa; --sk-sidebar: rgba(255, 255, 255, .86); --sk-surface: #ffffff; --sk-surface-2: #f1f2f7; --sk-surface-3: #e7e9f1;
  --sk-input: #ffffff; --sk-group: transparent; --sk-group-border: transparent; --sk-thumb: #e3e5ee; --sk-chip: #eef0f6;
  --sk-border: #e3e5ee; --sk-border-2: #cdd1de; --sk-divider: #eceef4;
  --sk-text: #0b0d12; --sk-text-2: #4f5563; --sk-text-3: #5f6573;
  --sk-accent: #2563eb; --sk-accent-hover: #1d4ed8; --sk-on-accent: #ffffff; --sk-accent-text: #1d4ed8;
  --sk-accent-soft: rgba(37, 99, 235, .08); --sk-link: #1d4ed8; --sk-focus: #2563eb;
  --sk-new: #f59e0b; --sk-on-new: #1a1100; --sk-new-text: #b45309;
  --sk-danger: #dc2626; --sk-ok: #16a34a; --sk-ok-text: #15803d; --sk-warn: #b45309;
  --sk-section-color: #0b0d12; --sk-label-color: #4f5563;
  --sk-req-border: #ecd9a6; --sk-req-bg: #fffaf0; --sk-req-text: #8a5300;
  --sk-shadow-sm: 0 1px 2px rgba(11, 13, 18, .05); --sk-shadow: 0 12px 32px rgba(11, 13, 18, .10); --sk-shadow-lg: 0 20px 50px rgba(11, 13, 18, .16);
  --sk-scrim: rgba(8, 9, 12, .62); --sk-timeline: #e7e9f1; --sk-playhead: #0b0d12;
  --sk-tooltip-bg: #0b0d12; --sk-tooltip-fg: #f2f3f5;
  --sk-hero-bg: #ffffff;
}
:root[data-sk="d"][data-theme="dark"] {
  --sk-bg: #08090c; --sk-sidebar: rgba(10, 11, 15, .82); --sk-surface: #111318; --sk-surface-2: #171a21; --sk-surface-3: #20242d;
  --sk-input: #0d0f13; --sk-thumb: #171a21; --sk-chip: #1a1d25;
  --sk-border: rgba(255, 255, 255, .07); --sk-border-2: rgba(255, 255, 255, .16); --sk-divider: rgba(255, 255, 255, .06);
  --sk-text: #f2f3f5; --sk-text-2: #a4a8b3; --sk-text-3: #8a909c;
  --sk-accent: #2563eb; --sk-accent-hover: #3b82f6; --sk-on-accent: #ffffff; --sk-accent-text: #93c5fd;
  --sk-accent-soft: rgba(59, 130, 246, .14); --sk-link: #93c5fd; --sk-focus: #93c5fd;
  --sk-new: #fbbf24; --sk-on-new: #1a1100; --sk-new-text: #fcd34d;
  --sk-danger: #f87171; --sk-ok: #34d399; --sk-ok-text: #6ee7b7; --sk-warn: #fcd34d;
  --sk-section-color: #f2f3f5; --sk-label-color: #a4a8b3;
  --sk-req-border: rgba(251, 191, 36, .28); --sk-req-bg: linear-gradient(180deg, rgba(251, 191, 36, .07), rgba(251, 191, 36, .02)), #111318; --sk-req-text: #fcd34d;
  --sk-shadow-sm: 0 0 0 1px rgba(255, 255, 255, .02); --sk-shadow: 0 18px 40px rgba(0, 0, 0, .55); --sk-shadow-lg: 0 24px 60px rgba(0, 0, 0, .7);
  --sk-scrim: rgba(0, 0, 0, .62); --sk-timeline: #0d0f13; --sk-playhead: #ffffff;
  --sk-tooltip-bg: #f2f3f5; --sk-tooltip-fg: #0b0d12;
  --sk-hero-bg: #111318;
}
@media (prefers-color-scheme: dark) {
  :root[data-sk="d"]:not([data-theme="light"]) {
    --sk-bg: #08090c; --sk-sidebar: rgba(10, 11, 15, .82); --sk-surface: #111318; --sk-surface-2: #171a21; --sk-surface-3: #20242d;
    --sk-input: #0d0f13; --sk-thumb: #171a21; --sk-chip: #1a1d25;
    --sk-border: rgba(255, 255, 255, .07); --sk-border-2: rgba(255, 255, 255, .16); --sk-divider: rgba(255, 255, 255, .06);
    --sk-text: #f2f3f5; --sk-text-2: #a4a8b3; --sk-text-3: #8a909c;
    --sk-accent: #2563eb; --sk-accent-hover: #3b82f6; --sk-on-accent: #ffffff; --sk-accent-text: #93c5fd;
    --sk-accent-soft: rgba(59, 130, 246, .14); --sk-link: #93c5fd; --sk-focus: #93c5fd;
    --sk-new: #fbbf24; --sk-on-new: #1a1100; --sk-new-text: #fcd34d;
    --sk-danger: #f87171; --sk-ok: #34d399; --sk-ok-text: #6ee7b7; --sk-warn: #fcd34d;
    --sk-section-color: #f2f3f5; --sk-label-color: #a4a8b3;
    --sk-req-border: rgba(251, 191, 36, .28); --sk-req-bg: linear-gradient(180deg, rgba(251, 191, 36, .07), rgba(251, 191, 36, .02)), #111318; --sk-req-text: #fcd34d;
    --sk-shadow-sm: 0 0 0 1px rgba(255, 255, 255, .02); --sk-shadow: 0 18px 40px rgba(0, 0, 0, .55); --sk-shadow-lg: 0 24px 60px rgba(0, 0, 0, .7);
    --sk-scrim: rgba(0, 0, 0, .62); --sk-timeline: #0d0f13; --sk-playhead: #ffffff;
    --sk-tooltip-bg: #f2f3f5; --sk-tooltip-fg: #0b0d12;
    --sk-hero-bg: #111318;
  }
}

/* ====================================================== общие компоненты D/E/F
   (иконки, поиск, чипы, вкладки, карточка — разметка из enhance.js) */
html[data-sk="d"] .sk-ico { width: 1.05em; height: 1.05em; flex: none; vertical-align: -.16em; }
html[data-sk="d"] .sk-icon-only .sk-ico { margin: 0; }
html[data-sk="d"] :is(button, a, .fb-toggle, h2, h4, .tz-badge, label):has(> .sk-ico) { display: inline-flex; align-items: center; gap: .45em; }

/* ============================================================ КАТАЛОГ + КЛИЕНТ */
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) {
  & body { flex-direction: column; align-items: stretch; background: var(--sk-bg); }

  /* --- верхняя панель (была боковая) */
  & .sidebar {
    position: sticky; top: 0; z-index: 60; flex: none; width: auto; height: auto; max-height: none; overflow: visible;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 10px; padding: 12px 24px;
    background: var(--sk-sidebar); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-right: 0; border-bottom: 1px solid var(--sk-border);
  }
  & .sidebar > * { margin: 0 !important; }
  & .sidebar h1 { order: 1; font-family: var(--sk-display); font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 8px; margin-right: 10px !important; white-space: nowrap; }
  & .sidebar h1 .sk-ico { width: 26px; height: 26px; padding: 5px; border-radius: 8px; color: var(--sk-bg); background: var(--sk-text); stroke-width: 2.2; }
  & .sk-search { order: 2; flex: 1 1 360px; max-width: 620px; }
  & #new-version-hint { order: 3; flex-basis: 100%; }
  & #feedbacker-btn { order: 5; }
  & #select-mode-btn { order: 6; }
  & #refresh-btn { order: 7; }
  & #soft-update-btn { order: 8; }
  & #soft-update-btn[hidden], & #select-mode-btn[hidden] { display: none !important; }
  & .top-bar { order: 9; margin-left: auto !important; }
  & .profile-bottom { order: 10; }
  & .filters-divider { order: 20; flex-basis: 100%; height: 0; padding: 0 !important; border: 0; font-size: 0; }
  & .filter-group { order: 21; }
  & .project-lead-row { margin-top: 0 !important; }
  & #status-filter-group, & #type-filter-group { display: none !important; }   /* → чипы в контенте */
  & .refresh-status { order: 30; margin-left: auto !important; font-size: .72rem; }
  & .subtitle { order: 31; font-size: .72rem; }

  /* кнопки панели */
  & #feedbacker-btn, & #select-mode-btn, & #refresh-btn, & #soft-update-btn {
    width: auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; min-height: 38px;
    border-radius: 999px; font-weight: 600; font-size: .82rem; white-space: nowrap;
  }
  & #feedbacker-btn { display: inline-flex !important; text-align: left !important; background: var(--sk-grad); border: 0; color: #fff; }
  & #feedbacker-btn:hover { filter: brightness(1.08); }
  & #refresh-btn { width: 38px; padding: 0; justify-content: center; font-size: 0; }
  & #refresh-btn .sk-ico { font-size: 16px; }
  & .top-bar { gap: 6px; }
  & .icon-btn { width: 38px; height: 38px; border-radius: 999px; }
  & .lang-btn { min-height: 38px; border-radius: 999px; padding: 0 14px; font-size: .78rem; }
  & .profile-bottom { border: 0; padding: 0; gap: 8px; }
  & .profile-avatar { width: 34px; height: 34px; font-size: .78rem; background: var(--sk-surface-3); color: var(--sk-text); }
  & .profile-name { display: none; }
  & .new-notice { width: 38px; height: 38px; border-radius: 999px; }
  & .notif-popover { top: calc(var(--sk-head-h) + 8px); bottom: auto; left: auto; right: 24px; }

  /* единый поиск */
  & .sk-search { display: flex; align-items: center; gap: 8px; }
  & .sk-search-field { position: relative; flex: 1; }
  & .sk-search-field .toolbar { display: none; margin: 0; }
  & .sk-search[data-mode="name"] .toolbar[data-mode="name"], & .sk-search[data-mode="link"] .toolbar[data-mode="link"], & .sk-search[data-mode="author"] .toolbar[data-mode="author"] { display: block; }
  & .sk-search-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--sk-text-3); z-index: 1; pointer-events: none; }
  & .sk-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 1; font: 500 .7rem var(--sk-mono); color: var(--sk-text-3); border: 1px solid var(--sk-border-2); border-radius: 6px; padding: 1px 6px; pointer-events: none; }
  & .sk-search-field input, & .sk-search-field .combo-input { padding-left: 40px !important; padding-right: 38px; min-height: 40px; border-radius: 999px; background: var(--sk-surface-2); border-color: transparent; font-size: .88rem; }
  & .sk-search-field input:focus { background: var(--sk-input); }
  & .sk-search-tabs { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--sk-surface-2); }
  & .sk-search-tabs button { border: 0; background: none; color: var(--sk-text-2); font: 600 .74rem var(--sk-font); padding: 7px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
  & .sk-search-tabs button.on { background: var(--sk-surface); color: var(--sk-text); box-shadow: var(--sk-shadow-sm), 0 1px 3px rgba(0,0,0,.12); }

  /* фильтры-таблетки: подпись внутри */
  & .filter-group { display: flex; align-items: center; gap: 0; border-radius: 999px; background: var(--sk-surface-2); padding-left: 14px; min-height: 36px; flex-wrap: nowrap; }
  & .filter-group-title { margin: 0; font-size: .7rem; letter-spacing: .02em; text-transform: none; color: var(--sk-text-3); white-space: nowrap; font-weight: 600; }
  & .filter-group .combo { width: 190px; }
  & .filter-group .combo-input { border: 0; background: transparent; min-height: 36px; font-weight: 600; font-size: .8rem; box-shadow: none !important; }
  & .project-lead-row { padding: 0 12px 0 4px; }
  & .project-lead-row label { font-size: .7rem; }
  & .project-lead-row select { border: 0; background: transparent; min-height: 30px; font-weight: 600; }
  & .combo-list { min-width: 240px; padding: 6px; }
  & .combo-option { padding: 8px 10px; border-radius: 8px; }

  /* --- контент */
  & .content { padding: 22px 28px 90px; }
  & main.content { display: flex; flex-direction: column; }
  & main.content > * { min-width: 0; }
  & .back-to-projects { order: -1; align-self: flex-start; }
  & .sk-chips[data-kind="type"] .sk-chip-n { display: none; }
  & .back-to-projects { border-radius: 999px; padding: 0 14px 0 10px; min-height: 34px; margin-bottom: 16px; }

  /* шапка: главная и проект */
  & .sk-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    padding: 30px 32px; margin-bottom: 22px; border-radius: 22px; background: var(--sk-hero-bg); border: 1px solid var(--sk-border); min-height: 168px; }
  & .sk-hero[hidden] { display: none; }
  & .sk-hero-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(34px) saturate(1.3); opacity: .55; transform: scale(1.1); }
  & .sk-hero-project::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--sk-surface) 0%, color-mix(in srgb, var(--sk-surface) 70%, transparent) 55%, transparent 100%); }
  & .sk-hero > * { position: relative; z-index: 1; }
  & .sk-eyebrow { display: inline-flex; align-items: center; gap: 7px; font: 600 .74rem var(--sk-font); letter-spacing: .08em; text-transform: uppercase; color: var(--sk-accent-text); }
  & .sk-hero-title { font: 800 clamp(1.8rem, 3vw, 2.7rem)/1.05 var(--sk-display); letter-spacing: -.025em; margin: 8px 0 8px; color: var(--sk-text); }
  & .sk-hero-sub { margin: 0; color: var(--sk-text-2); font-size: .92rem; max-width: 56ch; }
  & .sk-hero-meta { display: flex; gap: 8px; flex-wrap: wrap; }
  & .sk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--sk-surface) 80%, transparent); border: 1px solid var(--sk-border); font-size: .8rem; color: var(--sk-text-2); backdrop-filter: blur(8px); }
  & .sk-chip b { color: var(--sk-text); }
  & .sk-stats { display: flex; gap: 10px; }
  & .sk-stat { min-width: 112px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--sk-surface) 70%, transparent); border: 1px solid var(--sk-border); backdrop-filter: blur(8px); }
  & .sk-stat b { display: block; font: 700 1.7rem/1 var(--sk-display); letter-spacing: -.02em; }
  & .sk-stat span { font-size: .76rem; color: var(--sk-text-2); }
  & .sk-stat-new b { color: var(--sk-new-text); }
  & .sk-statuses { display: grid; grid-template-columns: repeat(5, minmax(96px, 1fr)); gap: 8px; }
  & .sk-st { padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--sk-surface) 82%, transparent); border: 1px solid var(--sk-border); border-top: 3px solid var(--st); backdrop-filter: blur(8px); }
  & .sk-st b { display: block; font: 700 1.35rem/1.1 var(--sk-display); }
  & .sk-st span { font-size: .7rem; color: var(--sk-text-2); white-space: nowrap; }
  & .sk-st.sk-zero { opacity: .55; }

  /* чипы статуса и типа */
  & .sk-filterbar { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
  & .sk-filterbar[hidden] { display: none; }
  & .sk-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  & .sk-chips-label { font-size: .72rem; font-weight: 600; color: var(--sk-text-3); min-width: 48px; }
  & .sk-chip-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--sk-border); background: var(--sk-surface); color: var(--sk-text); font: 600 .78rem var(--sk-font); cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
  & .sk-chip-btn:hover { border-color: var(--sk-border-2); transform: translateY(-1px); }
  & .sk-chip-btn.on { background: var(--sk-text); color: var(--sk-bg); border-color: var(--sk-text); }
  & .sk-chip-n { font: 500 .7rem var(--sk-mono); opacity: .7; }
  & .sk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st); }

  /* вкладки разделов */
  & .sk-sections { position: sticky; top: var(--sk-head-h); z-index: 30; display: flex; gap: 4px; overflow-x: auto; margin: 0 -28px 18px; padding: 10px 28px;
    background: color-mix(in srgb, var(--sk-bg) 85%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--sk-border); scrollbar-width: none; }
  & .sk-sections[hidden] { display: none; }
  & .sk-sections a { display: inline-flex; gap: 8px; align-items: center; padding: 7px 14px; border-radius: 999px; color: var(--sk-text-2); text-decoration: none; font-weight: 600; font-size: .82rem; white-space: nowrap; }
  & .sk-sections a:hover { background: var(--sk-surface-2); color: var(--sk-text); }
  & .sk-sections a span { font: 500 .7rem var(--sk-mono); color: var(--sk-text-3); }

  /* главная: bento-плитки с подписью поверх обложки */
  & .project-home { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-rows: 220px; gap: 14px; }
  & .project-card { position: relative; border: 0; border-radius: 20px; background: var(--sk-thumb); box-shadow: var(--sk-shadow-sm); }
  & .project-card-thumb { position: absolute; inset: 0; aspect-ratio: auto; }
  & .project-card-thumb img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  & .project-card:hover .project-card-thumb img { transform: scale(1.06); }
  & .project-card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(180deg, transparent, rgba(5, 6, 9, .82)); color: #fff; gap: 2px; }
  & .project-card-name { font: 700 1.05rem/1.15 var(--sk-display); color: #fff; letter-spacing: -.01em; }
  & .project-card-client, & .project-card-meta { color: rgba(255, 255, 255, .78); }
  & .project-card-meta { font-size: .7rem; }
  & .project-card:hover { transform: translateY(-3px); box-shadow: var(--sk-shadow); }
  & .project-card-new { top: 12px; left: 12px; border-radius: 999px; padding: 3px 10px; }
  & .project-cover-edit { border-radius: 999px; width: 30px; height: 30px; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); }

  /* разделы и ряды */
  & .tag-section { margin-bottom: 36px; scroll-margin-top: calc(var(--sk-head-h) + 60px); }
  & .tag-section h2 { font: 700 1.35rem/1.2 var(--sk-display); letter-spacing: -.02em; text-transform: none; color: var(--sk-text); border: 0; padding: 0; margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; }
  & .tag-section h2 .count { font: 500 .8rem var(--sk-mono); color: var(--sk-text-3); }
  & .asset-group-multi, & .asset-group-single { background: transparent; border: 0; padding: 0; margin-bottom: 18px; }
  & .asset-group-label { text-transform: none; letter-spacing: 0; font: 600 .88rem var(--sk-font); color: var(--sk-text); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
  & .asset-group-label .count { font: 500 .72rem var(--sk-mono); }
  & .asset-group-cards, & .cards-grid { gap: 14px; }

  /* --- карточка */
  & .card { --cw: var(--sk-card-w); width: var(--cw); padding: 0; border: 1px solid var(--sk-border); border-radius: 16px; background: var(--sk-surface); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
  & body.density-compact .card { --cw: var(--sk-card-w-compact); }
  & .card:hover { transform: translateY(-3px); box-shadow: var(--sk-shadow); border-color: var(--sk-border-2); }
  & .card-thumb { margin: 0; border-radius: 0; aspect-ratio: 16 / 9; position: relative; }
  & .card-thumb img { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
  & .card:hover .card-thumb img { transform: scale(1.05); }
  & .sk-play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); backdrop-filter: blur(8px); color: #fff; opacity: 0; transform: scale(.85); transition: opacity .2s, transform .2s; pointer-events: none; }
  & .sk-play .sk-ico { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }
  & .card:hover .sk-play { opacity: 1; transform: none; }
  /* название — поверх превью, снизу на градиенте */
  & .card-top { position: absolute; left: 0; right: 0; top: calc(var(--cw) * 9 / 16 - 64px); height: 64px; margin: 0; padding: 0 14px 10px; display: flex; align-items: flex-end;
    background: linear-gradient(180deg, transparent, rgba(5, 6, 9, .78)); pointer-events: none; z-index: 1; }
  & .asset-name { color: #fff; font: 600 .86rem/1.25 var(--sk-font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
  & .card > :not(.card-thumb):not(.card-select):not(.card-menu):not(.new-badge):not(.shared-badge):not(.card-top) { margin-left: 14px; margin-right: 14px; }
  & .card-cat, & .card-date { display: none; }
  & .sk-meta { display: flex; align-items: center; gap: 8px; margin-top: 12px; margin-bottom: 4px; font-size: .76rem; color: var(--sk-text-2); min-width: 0; }
  & .sk-author { font-weight: 600; color: var(--sk-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  & .sk-when { margin-left: auto; white-space: nowrap; color: var(--sk-text-3); font-size: .72rem; }
  & .card-version { margin-top: 8px; }
  & .card-version .version-select { border-radius: 999px; padding: 3px 8px; font-weight: 600; }
  & .card-links { gap: 6px; margin-top: 10px; }
  & .sk-linkchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--sk-surface-2); color: var(--sk-text-2) !important; font-size: .72rem; font-weight: 600; text-decoration: none !important; transition: background .15s, color .15s; }
  & .sk-linkchip:hover { background: var(--sk-accent-soft); color: var(--sk-accent-text) !important; }
  & .link-missing { font-size: .72rem; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--sk-danger) 12%, transparent); }
  & .status-row { border-top: 1px solid var(--sk-divider); margin-top: 12px; padding-top: 12px; gap: 8px; flex-direction: row; flex-wrap: wrap; align-items: center; }
  & .status-select { appearance: none; -webkit-appearance: none; border-radius: 999px; padding: 6px 30px 6px 12px; font-size: .74rem; min-height: 0; border-width: 1px;
    background: color-mix(in srgb, currentColor 13%, var(--sk-surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center; }
  & .upload-checks { gap: 6px; margin-left: auto; }
  & .upload-checks label { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--sk-border); font-size: .68rem; font-weight: 600; color: var(--sk-text-3); gap: 5px; }
  & .upload-checks label:has(input:checked) { border-color: color-mix(in srgb, var(--sk-ok) 50%, transparent); color: var(--sk-ok-text); background: color-mix(in srgb, var(--sk-ok) 10%, transparent); }
  & .upload-checks input { width: 12px; height: 12px; accent-color: var(--sk-ok); margin: 0; }
  & .status-meta { flex-basis: 100%; font-size: .68rem; color: var(--sk-text-3); }
  & .status-history-toggle { font-size: .7rem; }
  & .feedback { border-top: 0; margin-top: 6px; padding-top: 0; margin-bottom: 14px; }
  & .fb-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 0; color: var(--sk-text-2); font-size: .76rem; }
  & .fb-toggle:hover { color: var(--sk-accent-text); }
  & #catalog:not(.multi-project-view) .card-footer { display: none; }
  & .card-footer { border-top: 0; margin-bottom: 12px; }
  & .card-menu { top: 10px; right: 10px; z-index: 2; }
  & .card-menu-toggle { width: 30px; height: 30px; border-radius: 999px; backdrop-filter: blur(8px); display: grid; place-items: center; }
  & .shared-badge { top: 10px; left: 10px; border-radius: 999px; padding: 3px 10px; font-size: .64rem; }
  & .new-badge { border-radius: 999px; top: 10px; left: 10px; }

  /* требования и ТЗ */
  & .project-req { border-radius: 18px; padding: 18px 22px; }
  & .project-req-title { font-family: var(--sk-display); font-size: 1.02rem; }
  & .tz-card { border-radius: 16px; border: 1px solid color-mix(in srgb, var(--sk-accent) 45%, transparent); background: linear-gradient(180deg, var(--sk-accent-soft), transparent 60%), var(--sk-surface); box-shadow: 10px 0 0 var(--sk-bg); }
  & .tz-card::after { display: none; }
  & .tz-badge { border-radius: 999px; padding: 3px 10px; }
  & .tz-add { border-radius: 16px; box-shadow: 10px 0 0 var(--sk-bg); }
}

/* ============================================================ FEEDBACKER D */
html[data-sk="d"][data-page="review"] {
  & body { background: var(--sk-bg); }
  & .wrap { padding-top: 14px; }
  & h1 { font: 700 1.05rem var(--sk-display); }
  & h1 small { display: none; }
  & .card { border-radius: 20px; box-shadow: var(--sk-shadow-sm); }
  & .player-card { background: transparent; border: 0; box-shadow: none; padding: 0; }
  & .stage { border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
  & .playerbar { padding: 6px; border-radius: 999px; background: var(--sk-surface); border: 1px solid var(--sk-border); margin: 0 0 12px; }
  & .playerbar button, & .playerbar input { border-radius: 999px; }
  & .timeline { height: 34px; border-radius: 12px; margin-top: 14px; }
  & .player-card .row { padding: 6px; border-radius: 999px; background: var(--sk-surface); border: 1px solid var(--sk-border); width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; margin-top: 10px; }
  & .player-card .row button, & .player-card .row input, & .player-card .row .fnum { border-radius: 999px; }
  & .iconbtn { border-radius: 999px; }
  & .swatch { border-radius: 50%; width: 26px; height: 26px; }
  & #playpause { background: var(--sk-grad); border: 0; }
  & .fnum { font-family: var(--sk-mono); }
  & .hint { text-align: center; opacity: .8; }
  & .side h2 { font: 600 .72rem var(--sk-font); letter-spacing: .1em; }
  & .scope button, & .status button, & .chan { border-radius: 999px; }
  & button.on { background: var(--sk-accent); }
  & #addcmt { background: var(--sk-grad); border: 0; color: #fff; border-radius: 999px; }
  & .cmt { border-radius: 16px; padding: 12px 14px; }
  & .cmt .who { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
  /* вторая строка шапки — под именем, с отступом на аватар (26 + 8) */
  & .cmt .who-sub { padding-left: 34px; font-size: .78rem; }
  & .sk-avatar { width: 26px; height: 26px; font-size: .64rem; }
  & .tree { border-radius: 20px; }
  & .trow { border-radius: 10px; }
}

/* аватар — общий */
html[data-sk="d"] .sk-avatar { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: hsl(var(--h) 30% 34%); color: #fff; font: 700 .6rem/1 var(--sk-font); letter-spacing: .02em; }

/* ============================================================ ВХОД D */
html[data-sk="d"][data-page="login"] {
  & body { display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; justify-content: stretch; background: var(--sk-bg); }
  & body::before { content: 'Animation catalog, frame-accurate feedback and statuses — all in one place.'; display: flex; align-items: flex-end; padding: 56px;
    font: 700 clamp(1.6rem, 2.6vw, 2.4rem)/1.15 var(--sk-display); letter-spacing: -.02em; color: #fff;
    background: #111318; }
  & .box { align-self: center; justify-self: center; width: min(380px, 86%); max-width: none; border: 0; box-shadow: none; background: transparent; padding: 0; }
  & h1 { font: 800 1.7rem var(--sk-display); }
  & input { min-height: 44px; border-radius: 12px; }
  & button { min-height: 46px; border-radius: 12px; background: var(--sk-grad); font-weight: 700; }
}
@media (max-width: 860px) { html[data-sk="d"][data-page="login"] body { grid-template-columns: 1fr; } html[data-sk="d"][data-page="login"] body::before { min-height: 220px; padding: 28px; font-size: 1.3rem; } }

/* ============================================================ АДМИНКА D */
html[data-sk="d"][data-page="admin"] {
  & .wrap { max-width: 1200px; }
  & h1 { font: 800 1.7rem var(--sk-display); letter-spacing: -.02em; }
  & h2 { font: 700 1.15rem var(--sk-display); }
  & .card { border-radius: 18px; }
  & th { background: var(--sk-surface-2); }
  & button[style*="var(--accent)"] { background: var(--sk-grad) !important; border: 0 !important; color: #fff !important; border-radius: 999px !important; }
}

/* телефон */
@media (max-width: 760px) {
  :is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) {
    & .sidebar { position: static; padding: 10px 12px; }
    & .sk-search { flex-basis: 100%; flex-wrap: wrap; }
    & .filter-group { flex: 1 1 100%; }
    & .filter-group .combo { flex: 1; width: auto; }
    & .sk-sections { top: 0; margin: 0 -12px 14px; padding: 8px 12px; }
    & .project-home { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
    & .project-card:nth-child(n) { grid-column: auto; grid-row: auto; }
    & .project-card:nth-child(1) { grid-column: span 2; }
    & .sk-statuses { grid-template-columns: repeat(2, 1fr); }
    & .card { --cw: calc(100vw - 24px); }
    & .sk-hero { padding: 20px; }
  }
}

/* ============================================================ доработки Полины (19.10.2026) */
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) {
  /* логотип — ссылка на «Усі проєкти» */
  & .sidebar h1[role="link"] { cursor: pointer; border-radius: 10px; padding: 4px 6px; margin-left: -6px !important; transition: background .15s; }
  & .sidebar h1[role="link"]:hover { background: var(--sk-surface-2); }
  & .sidebar h1[role="link"]:focus-visible { outline: 2px solid var(--sk-focus); outline-offset: 2px; }

  /* шапки компактнее */
  & .sk-hero { padding: 18px 22px; min-height: 0; margin-bottom: 16px; border-radius: 18px; gap: 16px; align-items: center; }
  & .sk-hero-title { margin: 2px 0 4px; font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
  & .sk-hero-sub { font-size: .86rem; }
  & .sk-stat { min-width: 96px; padding: 10px 14px; border-radius: 14px; }
  & .sk-stat b { font-size: 1.45rem; }
  & .sk-hero-project { align-items: flex-end; }
  & .sk-st { padding: 8px 10px; border-radius: 12px; }
  & .sk-st b { font-size: 1.15rem; }

  /* 🔴 размытая обложка — ФОН шапки, а не элемент ряда. Правило «.sk-hero > *
     { position: relative }» шло ниже и возвращало её в поток: на узком окне
     она занимала место слева, и название проекта уезжало вправо. */
  & .sk-hero > .sk-hero-bg { position: absolute; inset: -40px; z-index: 0; }
  & .sk-hero-project::after { z-index: 0; }
  & .sk-hero-text { flex: 1 1 280px; min-width: 0; }
  & .sk-hero-title { overflow-wrap: anywhere; }
  & .sk-statuses { flex: 1 1 520px; }
}
@media (max-width: 1100px) {
  :is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) .sk-statuses { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) .sk-statuses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================ FEEDBACKER D — правки Полины (19.10.2026) */
html[data-sk="d"][data-page="review"] {
  /* --- верхняя плашка как в каталоге */
  & #backLink, & .wrap > h1 { display: none !important; }
  & .wrap { padding-top: 0; }
  & .sk-rvbar { grid-column: 1 / -1; position: sticky; top: 0; z-index: 70; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 -24px 14px; padding: 12px 24px; background: var(--sk-sidebar); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-bottom: 1px solid var(--sk-border); }
  & .sk-rv-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; font: 700 1.05rem var(--sk-display); letter-spacing: -.01em; }
  & .sk-rv-home, & .sk-rv-here { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
  & .sk-rv-home { color: var(--sk-text-2); text-decoration: none; padding: 4px 8px 4px 4px; margin-left: -4px; border-radius: 10px; transition: background .15s, color .15s; }
  & .sk-rv-home:hover { background: var(--sk-surface-2); color: var(--sk-text); }
  & .sk-rv-home .sk-ico { width: 26px; height: 26px; padding: 5px; border-radius: 8px; color: var(--sk-bg); background: var(--sk-text); stroke-width: 2.2; }
  & .sk-rv-sep { display: inline-flex; color: var(--sk-text-3); }
  & .sk-rv-here { color: var(--sk-text); }
  & .sk-rv-here .sk-ico { width: 18px; height: 18px; color: var(--sk-accent-text); }
  & .sk-rv-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
  & .sk-rv-ib { position: relative; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--sk-border); background: var(--sk-surface-2); color: var(--sk-text);
    display: inline-grid; place-items: center; padding: 0; cursor: pointer; text-decoration: none; }
  & .sk-rv-ib:hover { border-color: var(--sk-border-2); }
  & .sk-rv-logout { min-height: 38px; border-radius: 999px; padding: 0 14px; border: 1px solid var(--sk-border); background: var(--sk-surface-2); color: var(--sk-text-2); font: 600 .78rem var(--sk-font); cursor: pointer; }
  & .sk-rv-logout:hover { color: var(--sk-text); border-color: var(--sk-border-2); }
  & .sk-rv-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; }
  & .sk-rv-avatar .sk-avatar { width: 34px; height: 34px; font-size: .74rem; }
  & .sk-rv-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--sk-danger); color: #fff; font: 700 .62rem/18px var(--sk-font); text-align: center; }
  & .sk-rv-badge[hidden] { display: none; }
  & .sk-rvbar.sk-rv-guest .sk-rv-auth { display: none; }

  /* всплывашки */
  & .sk-rv-popwrap { position: relative; display: inline-flex; }
  & .sk-rv-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 90; min-width: 170px; padding: 6px; border-radius: 12px;
    background: var(--sk-surface); border: 1px solid var(--sk-border-2); box-shadow: var(--sk-shadow); }
  & .sk-rv-pop[hidden] { display: none; }
  & .sk-rv-pop > button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--sk-text); font: 500 .8rem var(--sk-font); cursor: pointer; text-align: left; }
  & .sk-rv-pop > button:hover { background: var(--sk-surface-2); }
  & .sk-rv-pop > button.active { background: var(--sk-accent); color: var(--sk-on-accent); }

  /* --- левая панель */
  & .player-card > .row:has(.tool) { overflow: visible; z-index: 20; position: relative; }
  & .sk-rv-tool { width: 40px; height: 36px; border-radius: 10px; border: 1px solid var(--sk-border); background: var(--sk-surface-2); color: var(--sk-text);
    display: grid; place-items: center; padding: 0; cursor: pointer; }
  & .sk-rv-tool:hover { border-color: var(--sk-border-2); }
  & .sk-rv-tool.on { background: var(--sk-accent-soft); border-color: var(--sk-accent); color: var(--sk-accent-text); }
  & .sk-rv-tool .sk-ico { width: 20px; height: 20px; }
  & .sk-rv-pop-side { top: 0; left: calc(100% + 10px); right: auto; }
  /* цвета: одна радужная кнопка, внутри — текущий цвет */
  & .sk-rv-rainbow i { width: 22px; height: 22px; border-radius: 50%; display: block;
    box-shadow: 0 0 0 2px var(--sk-surface-2), 0 0 0 4.5px transparent; position: relative; }
  & .sk-rv-rainbow { background: conic-gradient(#ff2d55, #ff8a00, #ffea00, #39ff14, #00e0ff, #7a5cff, #ff00e5, #ff2d55); border: 0; padding: 4px; }
  & .sk-rv-rainbow i { width: 100%; height: 100%; border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
  & .player-card > .row:has(.tool) .sk-rv-colors .sk-rv-pop #colors { display: grid; grid-template-columns: repeat(4, 30px); gap: 8px; }
  & .player-card > .row:has(.tool) .sk-rv-colors .sk-rv-pop .swatch { width: 30px; height: 30px; border-radius: 50%; border-width: 2px; }
  & .sk-rv-colors .sk-rv-pop { min-width: 0; padding: 10px; }
  /* размер: иконка толщины линии + число; слайдер вертикальный, поверх видео */
  & .player-card > .row:has(.tool) #sizeBtn { width: 40px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
  & #sizeBtn .size-dot { display: none; }
  & #sizeBtn .sk-rv-weight .sk-ico { width: 20px; height: 20px; }
  & #sizeBtn #sizeVal { font: 600 .66rem var(--sk-mono); line-height: 1; }
  & .size-ctl { position: relative; }
  & .player-card > .row:has(.tool) .size-pop { left: calc(100% + 10px); top: 50%; bottom: auto; transform: translateY(-50%); z-index: 90;
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 10px; border-radius: 12px;
    background: var(--sk-surface); border: 1px solid var(--sk-border-2); box-shadow: var(--sk-shadow); }
  & .player-card > .row:has(.tool) .size-pop[hidden] { display: none; }
  & .size-pop input[type=range] { writing-mode: vertical-lr; direction: rtl; width: 22px; height: 150px; margin: 0; accent-color: var(--sk-accent); }
  & .size-pop b { font: 600 .74rem var(--sk-mono); order: -1; }
  /* Onion: иконка «стопка кадров» + меню */
  & .sk-rv-onion-menu { min-width: 210px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
  & .sk-rv-menu-title { font: 600 .7rem var(--sk-font); letter-spacing: .08em; text-transform: uppercase; color: var(--sk-text-3); }
  & .sk-rv-switch, & .sk-rv-step { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .82rem; color: var(--sk-text); cursor: pointer; }
  & .sk-rv-switch input { appearance: none; -webkit-appearance: none; width: 36px; height: 20px; border-radius: 999px; background: var(--sk-surface-3); position: relative; cursor: pointer; margin: 0; transition: background .15s; }
  & .sk-rv-switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
  & .sk-rv-switch input:checked { background: var(--sk-accent); }
  & .sk-rv-switch input:checked::after { transform: translateX(16px); }
  & .sk-rv-step span { display: inline-flex; align-items: center; gap: 8px; }
  & .sk-rv-step i { width: 10px; height: 10px; border-radius: 3px; }
  & .sk-rv-before i { background: #4c8dff; }
  & .sk-rv-after i { background: #ff4d4d; }
  & .sk-rv-step input[type=number] { width: 58px; height: 30px; border-radius: 8px; text-align: center; font: 600 .82rem var(--sk-mono); }

  /* --- скорость: одна капсула */
  & .speed-wrap { align-items: center; border: 1px solid var(--sk-border); background: var(--sk-surface-2); border-radius: 999px; padding: 0 4px 0 12px; height: 34px; }
  & .speed-wrap input { border: 0 !important; background: transparent !important; width: 40px; padding: 0 !important; height: 32px; box-shadow: none !important; text-align: right; font: 600 .82rem var(--sk-mono); }
  & .speed-wrap input:focus { outline: none; }
  & .speed-wrap::after { content: '×'; font: 600 .82rem var(--sk-mono); color: var(--sk-text-2); margin: 0 2px 0 1px; }
  & .speed-wrap #speedPresetBtn { border: 0 !important; background: transparent !important; width: 24px; height: 28px; padding: 0; border-radius: 999px; color: var(--sk-text-2); order: 2; }
  & .speed-wrap:hover, & .speed-wrap:focus-within { border-color: var(--sk-border-2); }
  & .speed-popover { border-radius: 12px; }

  /* --- правая панель: свойства → комменты → поле внизу */
  & .card.side { display: flex; flex-direction: column; gap: 0; position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: hidden; padding: 0; }
  & .card.side > * { margin-left: 16px; margin-right: 16px; }
  & .card.side > #chanBar { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--sk-divider); }
  & #authorWrap { display: none !important; }   /* Feedback author — не нужно (Полина, 19.10); подпись коммента берётся из входа */
  & .sk-rv-props { margin: 0; padding: 12px 16px 14px; border-bottom: 1px solid var(--sk-divider); display: flex; flex-direction: column; gap: 8px; }
  & .sk-rv-sec-title { font: 600 .68rem var(--sk-font); letter-spacing: .1em; text-transform: uppercase; color: var(--sk-text-3); }
  & .sk-rv-props > div:not([hidden]) { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 2px; }
  & .sk-rv-props > div > h2 { margin: 0; font: 500 .78rem var(--sk-font); letter-spacing: 0; text-transform: none; color: var(--sk-text-2); }
  & .sk-rv-props > div > :not(h2) { grid-column: 2; }
  & .sk-rv-props select, & .sk-rv-props #videoAuthor { min-height: 32px; height: 32px; border-radius: 999px; padding: 0 12px; font: 600 .8rem var(--sk-font); }
  & .sk-rv-props #videoAuthor { border-color: transparent; background: transparent; padding-left: 0; }
  & .sk-rv-props #statusMeta, & .sk-rv-props #statusNoCard, & .sk-rv-props #versionNote, & .sk-rv-props #clientStatusNote { font-size: .7rem !important; margin: 0 !important; }
  & .sk-rv-props #versionNote:not([hidden]) { display: inline-flex; width: fit-content; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--sk-warn) 14%, transparent); color: var(--sk-warn) !important; font-weight: 600; }
  & .sk-rv-cmt-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 6px; }
  & .sk-rv-cmt-head h2 { margin: 0; }
  & .sk-rv-cmt-head .sk-rv-ib { width: 30px; height: 30px; }
  & .sk-rv-copy { min-width: 0; padding: 10px 12px; }
  & .sk-rv-copy .row { margin: 0 !important; flex-wrap: nowrap; white-space: nowrap; }
  & .card.side > #clist { flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding-bottom: 8px; }
  & .sk-rv-compose { margin: 0; padding: 10px 16px 14px; border-top: 1px solid var(--sk-divider); background: var(--sk-surface); display: flex; flex-direction: column; gap: 8px; }
  & .sk-rv-compose > h2 { display: none; }
  & .sk-rv-compose .scope { margin: 0; display: inline-flex; width: fit-content; padding: 3px; gap: 2px; border-radius: 999px; background: var(--sk-surface-2); }
  & .sk-rv-compose .scope button { border: 0; background: none; padding: 5px 12px; font-size: .74rem; }
  & .sk-rv-compose .scope button.on { background: var(--sk-surface); color: var(--sk-text); box-shadow: var(--sk-shadow-sm), 0 1px 3px rgba(0,0,0,.15); }
  & .sk-rv-compose textarea { min-height: 68px; border-radius: 12px; resize: vertical; }
  & .sk-rv-compose .row { margin: 0 !important; }
}
@media (max-width: 1000px) {
  html[data-sk="d"][data-page="review"] .card.side { position: static; max-height: none; }
}
html[data-sk="d"][data-page="review"] {
  & .onion-ctl[hidden] { display: none !important; }
  & .sk-rv-props select { line-height: 1.2; padding-top: 0; padding-bottom: 0; }
  & .sk-rv-compose .scope button { white-space: nowrap; }
  & .sk-rv-compose textarea { height: 76px; }
}
html[data-sk="d"][data-page="review"] .sk-rv-props :is(#cardStatus, #videoVersion, #clientStatus, #videoAuthor) {
  height: 32px; min-height: 32px; padding: 0 30px 0 12px; font: 600 .8rem/1.2 var(--sk-font); border-radius: 999px;
}
html[data-sk="d"][data-page="review"] .sk-rv-props #videoAuthor { padding-left: 0; }

/* ============================================================ правки Полины, раунд 2 (19.10.2026) */
/* шапка «Проєкти»: мягкий малиновый градиент вправо + голубая обводка */
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) .sk-hero-home {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(214, 51, 108, .30), transparent 55%),
    radial-gradient(90% 120% at 85% 100%, rgba(168, 85, 247, .16), transparent 60%),
    linear-gradient(100deg, var(--sk-hero-bg) 30%, color-mix(in srgb, #be185d 14%, var(--sk-hero-bg)) 100%);
  border: 1px solid rgba(125, 196, 255, .45);
  box-shadow: 0 0 0 1px rgba(125, 196, 255, .06), 0 10px 40px -18px rgba(214, 51, 108, .45);
}
:root[data-sk="d"]:not([data-theme="dark"]) :is([data-page="catalog"], [data-page="client"]) .sk-hero-home { }
@media (prefers-color-scheme: light) {
  :root[data-sk="d"]:not([data-theme="dark"]) .sk-hero-home { border-color: rgba(59, 130, 246, .38); }
}
:root[data-sk="d"][data-theme="light"] .sk-hero-home {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(219, 39, 119, .16), transparent 55%),
    radial-gradient(90% 120% at 85% 100%, rgba(168, 85, 247, .10), transparent 60%),
    linear-gradient(100deg, #ffffff 30%, #fdf2f7 100%);
  border-color: rgba(59, 130, 246, .38);
}

html[data-sk="d"][data-page="review"] {
  /* подсказки: только обычная браузерная (серая); своя белая убрана */
  & [title]:hover::after { content: none !important; display: none !important; animation: none !important; }
  /* цвет кисти — просто кружок текущего цвета */
  & .sk-rv-rainbow { background: var(--sk-surface-2); border: 1px solid var(--sk-border); padding: 0; }
  & .sk-rv-rainbow i { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px var(--sk-surface), 0 0 0 3px var(--sk-border-2); }
  /* размер: число внизу сбоку от слайдера, без кружка-подложки */
  & .player-card > .row:has(.tool) .size-pop { flex-direction: row; align-items: flex-end; gap: 4px; padding: 14px 10px 12px 12px; }
  & .size-pop b, & .size-pop #sizePopVal { order: 2; background: none !important; border: 0 !important; box-shadow: none !important;
    min-width: 0; width: auto; height: auto; padding: 0; margin: 0 0 -2px; border-radius: 0;
    font: 600 .72rem var(--sk-mono); color: var(--sk-text-2); }
  & .size-pop input[type=range] { order: 1; }
}
/* поле нового коммента: без двойных отступов (общий отступ панели + свой) */
html[data-sk="d"][data-page="review"] .card.side > .sk-rv-compose { margin: 0; padding: 8px 12px 12px; gap: 6px; }
html[data-sk="d"][data-page="review"] .card.side > .sk-rv-props { margin: 0; }
html[data-sk="d"][data-page="review"] .sk-rv-compose #ctext { height: 64px; min-height: 52px; padding: 8px 12px; margin: 0; font-size: .86rem; }
html[data-sk="d"][data-page="review"] .sk-rv-compose .row { gap: 6px; }
html[data-sk="d"][data-page="review"] .player-card > .row:has(.tool) .size-pop { width: auto; min-width: 0; padding: 12px 8px 10px 10px; }

/* ============================================================ правки Полины, раунд 3 (19.10.2026)
   Малиновый тише, тот же переход — и в шапке проекта; обводка ярче;
   плитки «проєктів / превʼю» — как плитки статусов, с цветной полоской. */
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) :is(.sk-hero-home, .sk-hero-project) {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(190, 60, 110, .17), transparent 55%),
    radial-gradient(90% 120% at 85% 100%, rgba(150, 90, 200, .09), transparent 60%),
    linear-gradient(100deg, var(--sk-hero-bg) 35%, color-mix(in srgb, #9d2c5a 9%, var(--sk-hero-bg)) 100%);
  border: 1px solid rgba(110, 190, 255, .85);
  box-shadow: 0 0 0 1px rgba(110, 190, 255, .12), 0 0 22px -6px rgba(110, 190, 255, .35);
}
/* в шапке проекта — тот же переход вместо размытой обложки */
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) .sk-hero-project > .sk-hero-bg { display: none; }
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) .sk-hero-project::after { display: none; }
:root[data-sk="d"][data-theme="light"] :is(.sk-hero-home, .sk-hero-project) {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(190, 60, 110, .09), transparent 55%),
    radial-gradient(90% 120% at 85% 100%, rgba(150, 90, 200, .06), transparent 60%),
    linear-gradient(100deg, #ffffff 35%, #fbf3f7 100%);
  border-color: rgba(37, 130, 235, .75);
  box-shadow: 0 0 0 1px rgba(37, 130, 235, .08), 0 0 18px -8px rgba(37, 130, 235, .35);
}
@media (prefers-color-scheme: light) {
  :root[data-sk="d"]:not([data-theme="dark"]) :is(.sk-hero-home, .sk-hero-project) {
    background:
      radial-gradient(120% 140% at 100% 0%, rgba(190, 60, 110, .09), transparent 55%),
      radial-gradient(90% 120% at 85% 100%, rgba(150, 90, 200, .06), transparent 60%),
      linear-gradient(100deg, #ffffff 35%, #fbf3f7 100%);
    border-color: rgba(37, 130, 235, .75);
  }
}
/* плитки «проєктів / превʼю / з новим» — с цветной полоской сверху, как у статусов */
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) .sk-stat {
  border-top: 3px solid var(--st, var(--sk-border-2)); border-radius: 14px; padding: 10px 14px;
  background: color-mix(in srgb, var(--sk-surface) 82%, transparent);
}
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) .sk-stat:nth-child(1) { --st: #e2579a; }
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) .sk-stat:nth-child(2) { --st: #5ab0ff; }
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) .sk-stat-new { --st: var(--sk-new); }

/* ============================================================ раунд 4 (19.10.2026): обводка — как на примере Полины
   Рамка тихая, по верхнему краю — тонкая голубая линия, гаснущая к краям. */
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) :is(.sk-hero-home, .sk-hero-project) {
  border: 1px solid var(--sk-border) !important;
  box-shadow: none !important;
}
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) :is(.sk-hero-home, .sk-hero-project)::before {
  content: ''; position: absolute; z-index: 2; top: -1px; left: 6%; right: 6%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(92, 160, 255, .85) 45%, rgba(92, 160, 255, .85) 55%, transparent);
}
:root[data-sk="d"][data-theme="light"] :is(.sk-hero-home, .sk-hero-project)::before {
  background: linear-gradient(90deg, transparent, rgba(37, 110, 235, .7) 45%, rgba(37, 110, 235, .7) 55%, transparent);
}
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) :is(.sk-hero-home, .sk-hero-project) { border-top-color: transparent !important; }
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) :is(.sk-hero-home, .sk-hero-project)::before { top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--sk-border) 0%, rgba(92, 160, 255, .2) 15%, rgba(92, 160, 255, .9) 50%, rgba(92, 160, 255, .2) 85%, var(--sk-border) 100%); }
:root[data-sk="d"][data-theme="light"] :is(.sk-hero-home, .sk-hero-project)::before {
  background: linear-gradient(90deg, var(--sk-border) 0%, rgba(37, 110, 235, .2) 15%, rgba(37, 110, 235, .75) 50%, rgba(37, 110, 235, .2) 85%, var(--sk-border) 100%); }
/* раунд 5: голубой тусклее (Полина: «все ещё оч ярко»), рисунок градиента тот же */
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) :is(.sk-hero-home, .sk-hero-project)::before {
  background: linear-gradient(90deg, var(--sk-border) 0%, rgba(110, 160, 230, .1) 15%, rgba(110, 160, 230, .45) 50%, rgba(110, 160, 230, .1) 85%, var(--sk-border) 100%); }
:root[data-sk="d"][data-theme="light"] :is(.sk-hero-home, .sk-hero-project)::before {
  background: linear-gradient(90deg, var(--sk-border) 0%, rgba(60, 110, 200, .1) 15%, rgba(60, 110, 200, .4) 50%, rgba(60, 110, 200, .1) 85%, var(--sk-border) 100%); }

/* ============================================================ технічні вимоги проєкту — «студийно» (19.10.2026)
   Как форма в Linear / Notion: шапка с иконкой и действиями справа, поле — лист
   для письма, картинки — аккуратные плитки. Без жёлтых рамок и пунктиров. */
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) {
  & .project-req { position: relative; border: 1px solid var(--sk-border); border-radius: 18px; padding: 14px 18px; margin: 0 0 18px;
    background: var(--sk-surface); box-shadow: none; }
  & .project-req-head { gap: 10px; min-height: 34px; }
  & .project-req-title, & .project-req-toggle { font: 700 .98rem var(--sk-display); letter-spacing: -.01em; color: var(--sk-text); }
  & .project-req-title .sk-ico, & .project-req-toggle > .sk-ico { width: 30px; height: 30px; padding: 7px; border-radius: 9px;
    background: var(--sk-accent-soft); color: var(--sk-accent-text); }
  & .project-req-toggle .chev { color: var(--sk-text-3); }
  & .project-req-meta { font-size: .74rem; color: var(--sk-text-3); }
  & .project-req-text { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: var(--sk-surface-2); font-size: .9rem; line-height: 1.65; color: var(--sk-text); }
  & .project-req-imgs img { height: 104px; min-width: 104px; border-radius: 12px; border-color: var(--sk-border); }

  /* кнопки — таблетки */
  & :is(.project-req-edit, .project-req-cancel, .project-req-save) { min-height: 34px; padding: 0 14px; border-radius: 999px; font: 600 .8rem var(--sk-font);
    border: 1px solid var(--sk-border); background: var(--sk-surface-2); color: var(--sk-text); display: inline-flex; align-items: center; gap: 6px; }
  & :is(.project-req-edit, .project-req-cancel):hover { border-color: var(--sk-border-2); }
  & .project-req-actions .project-req-save { background: var(--sk-accent); border-color: var(--sk-accent); color: var(--sk-on-accent); }
  & .project-req-actions .project-req-save:hover { background: var(--sk-accent-hover); }

  /* правка: шапка + действия в одном ряду, ниже лист и картинки */
  & .project-req.editing { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
    border-color: color-mix(in srgb, var(--sk-accent) 35%, var(--sk-border)); }
  & .project-req.editing > .project-req-head { grid-column: 1; grid-row: 1; }
  & .project-req.editing > .project-req-actions { grid-column: 2; grid-row: 1; margin: 0; }
  & .project-req.editing > .project-req-input { grid-column: 1 / -1; grid-row: 2; }
  & .project-req.editing > .project-req-imgs-edit { grid-column: 1 / -1; grid-row: 3; }
  & .project-req-error:empty { display: none; }
  & .project-req-input { margin-top: 12px; min-height: 150px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--sk-border);
    background: var(--sk-surface-2); color: var(--sk-text); font: 400 .9rem/1.65 var(--sk-font); resize: vertical; box-shadow: none; outline: none; }
  & .project-req-input:focus { border-color: color-mix(in srgb, var(--sk-accent) 45%, var(--sk-border)); box-shadow: 0 0 0 3px var(--sk-accent-soft); background: var(--sk-input); }
  & .project-req-input::placeholder { color: var(--sk-text-3); }

  /* картинки в правке */
  & .project-req-imgs-edit { margin-top: 12px; gap: 10px; }
  & .project-req-img-edit { width: 104px; height: 104px; }
  & .project-req-img-edit img { border-radius: 12px; border-color: var(--sk-border); }
  & .project-req-rm { top: 6px; right: 6px; width: 24px; height: 24px; background: rgba(0, 0, 0, .6); backdrop-filter: blur(6px); font-size: .68rem; }
  & .project-req-rm:hover { background: var(--sk-danger); }
  & .project-req-add-img { min-height: 104px; min-width: 104px; padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--sk-border-2);
    background: var(--sk-surface-2); color: var(--sk-text); font: 600 .82rem var(--sk-font); gap: 6px; max-width: 220px; transition: border-color .15s, background .15s; }
  & .project-req-add-img:hover { border-color: var(--sk-accent); background: var(--sk-accent-soft); }
  & .project-req-add-img span { color: var(--sk-text-3); font-size: .7rem; line-height: 1.35; text-align: center; }
  & .project-req-img-note { color: var(--sk-text-3); font-size: .74rem; }

  /* пусто: тихая строка-приглашение вместо жёлтого пунктира */
  & .project-req.empty { padding: 0; border: 1px dashed var(--sk-border-2); background: transparent; }
  & .project-req-add { min-height: 46px; padding: 0 16px; color: var(--sk-text-2); font: 600 .84rem var(--sk-font); display: flex; align-items: center; gap: 8px; border-radius: 18px; }
  & .project-req-add:hover { color: var(--sk-text); background: var(--sk-surface-2); }
}

/* ============================================================ выпадающие списки (<select>) в стиле D (19.10.2026)
   1) color-scheme — браузер рисует меню списка в тон теме (раньше в тёмной теме
      меню было белым со светлым текстом). Работает во всех браузерах.
   2) Где браузер умеет (Chrome/Edge — appearance: base-select), меню
      оформлено целиком: панель-всплывашка, пункты-строки, выбранный подсвечен. */
:root[data-sk="d"] { color-scheme: light; }
:root[data-sk="d"][data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root[data-sk="d"]:not([data-theme="light"]) { color-scheme: dark; } }
html[data-sk="d"] select option { background-color: var(--sk-surface); color: var(--sk-text); }

@supports (appearance: base-select) {
  html[data-sk="d"] select, html[data-sk="d"] select::picker(select) { appearance: base-select; }
  html[data-sk="d"] select { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
  html[data-sk="d"] select::picker-icon { content: ''; width: 10px; height: 6px; margin-left: auto; color: var(--sk-text-3); transition: transform .15s;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a909c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; }
  html[data-sk="d"] select:open::picker-icon { transform: rotate(180deg); }
  /* где свой шеврон уже нарисован фоном — второй не нужен */
  html[data-sk="d"] select.status-select::picker-icon { display: none; }
  html[data-sk="d"] select::picker(select) {
    margin-top: 6px; padding: 6px; min-width: anchor-size(width); border: 1px solid var(--sk-border-2); border-radius: 12px;
    background: var(--sk-surface); color: var(--sk-text); box-shadow: var(--sk-shadow); max-height: 320px; overflow-y: auto;
  }
  html[data-sk="d"] select option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: transparent;
    color: var(--sk-text); font: 500 .82rem var(--sk-font); cursor: pointer; white-space: nowrap; }
  html[data-sk="d"] select option:hover, html[data-sk="d"] select option:focus-visible { background: var(--sk-surface-2); outline: none; }
  html[data-sk="d"] select option:checked { background: var(--sk-accent-soft); color: var(--sk-accent-text); font-weight: 600; }
  html[data-sk="d"] select option::checkmark { content: ''; display: none; }
  html[data-sk="d"] select option:disabled { color: var(--sk-text-3); cursor: default; }
}
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) .project-req-input { height: 168px; }

/* раунд 7 (19.10.2026): заголовок по центру иконки; картинки — компактными квадратами */
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) {
  & .project-req-title { display: inline-flex; align-items: center; gap: 10px; line-height: 1.2; }
  & .project-req-title .sk-ico, & .project-req-toggle > .sk-ico { vertical-align: middle; flex: none; }
  & .project-req-toggle { align-items: center; gap: 10px; line-height: 1.2; }
  & .project-req-imgs-edit { align-items: center; gap: 8px; }
  & .project-req-img-edit { width: 76px; height: 76px; }
  & .project-req-rm { top: 4px; right: 4px; width: 20px; height: 20px; font-size: .62rem; }
  & .project-req-add-img { position: relative; width: 76px; height: 76px; min-width: 76px; min-height: 76px; max-width: none; padding: 0; font-size: 0; }
  & .project-req-add-img::before { content: '+'; font: 300 1.7rem/1 var(--sk-font); color: var(--sk-text-2); }
  & .project-req-add-img:hover::before { color: var(--sk-accent-text); }
  & .project-req-add-img span { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap;
    text-align: left; font-size: .72rem; color: var(--sk-text-3); pointer-events: none; }
  & .project-req-imgs img { height: 76px; min-width: 76px; width: 76px; max-width: 76px; }
}

/* ============================================================ загрузка главной (20.10.2026)
   Плитки-заглушки с бликом, пока грузится каталог; проекты выкладываются волной. */
html[data-sk="d"][data-page="catalog"] {
  & .sk-skeleton { margin-bottom: 14px; }
  & .sk-skel-hero { height: 92px; border-radius: 18px; margin-bottom: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px;
    background: var(--sk-hero-bg); border: 1px solid var(--sk-border); }
  & .sk-skel-hero i { display: block; height: 18px; width: 180px; border-radius: 6px; }
  & .sk-skel-hero i + i { height: 10px; width: 320px; }
  & .sk-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-rows: 220px; gap: 14px; }
  & .sk-skel-tile { position: relative; border-radius: 20px; overflow: hidden; background: var(--sk-surface);
    border: 1px solid var(--sk-border); display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 16px;
    animation: skTileIn .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
  & .sk-skel-tile i { display: block; height: 12px; width: 60%; border-radius: 6px; }
  & .sk-skel-tile i + i { height: 9px; width: 38%; }
  & :is(.sk-skel-hero, .sk-skel-tile) i, & .sk-skel-tile::before {
    background: linear-gradient(90deg, var(--sk-surface-2) 0%, var(--sk-surface-3) 50%, var(--sk-surface-2) 100%);
    background-size: 200% 100%; animation: skShimmer 1.4s ease-in-out infinite; }
  & .sk-skel-tile::before { content: ''; position: absolute; inset: 0 0 64px; opacity: .55; }

  /* проекты выкладываются волной */
  & .project-home .project-card { animation: skTileIn .55s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
}
@keyframes skTileIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes skShimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-sk="d"][data-page="catalog"] :is(.project-home .project-card, .sk-skel-tile, .sk-skel-tile i, .sk-skel-hero i, .sk-skel-tile::before) { animation: none !important; }
}

/* размер кисти (20.10.2026): окошко по слайдеру, число в кнопке по центру, кружок-превью при перетягивании */
html[data-sk="d"][data-page="review"] {
  & .player-card > .row:has(.tool) .size-pop { padding: 12px 8px 10px 10px; gap: 2px; overflow: visible; }
  & .player-card > .row:has(.tool) .size-pop input[type=range] { min-width: 0; width: 22px; height: 150px; }
  & #sizeBtn #sizeVal { min-width: 0; text-align: center; width: 100%; }
  & .sk-rv-brush { position: absolute; left: calc(100% + 14px); transform: translate(-50%, -50%); margin-left: 12px; border-radius: 50%;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55), 0 2px 10px rgba(0, 0, 0, .45); pointer-events: none;
    transition: width .06s linear, height .06s linear; }
  & .sk-rv-brush[hidden] { display: none; }
}
/* число размера — только в иконке, в окошке его нет (Полина, 20.10.2026) */
html[data-sk="d"][data-page="review"] .size-pop #sizePopVal { display: none !important; }
html[data-sk="d"][data-page="review"] .player-card > .row:has(.tool) .size-pop { padding: 12px 10px; }

/* скорость и fps — капсулы в нижней панели (Полина, 20.10.2026)
   «×» — ПЕРЕД числом и через ::before: ::after на элементах с title гасит правило,
   убравшее белые подсказки, — «×» пропадал при наведении и капсула прыгала. */
html[data-sk="d"][data-page="review"] {
  & .speed-wrap::after { content: none !important; display: none !important; }
  & .speed-wrap { padding: 0 2px 0 12px; height: 34px; gap: 0; }
  & .speed-wrap::before { content: '×'; font: 600 .82rem var(--sk-mono); color: var(--sk-text-2); margin-right: 1px; }
  & .speed-wrap input { width: 34px; text-align: left; padding: 0 !important; }
  & .speed-wrap #speedPresetBtn { width: 26px; height: 30px; font-size: 0 !important; color: transparent;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a909c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center !important; }
  & .speed-popover button { font: 600 .8rem var(--sk-mono); }

  & .sk-rv-fps { display: inline-flex; align-items: center; height: 34px; padding: 0 3px 0 12px; gap: 6px; border-radius: 999px;
    border: 1px solid var(--sk-border); background: var(--sk-surface-2); }
  & .sk-rv-fps:hover, & .sk-rv-fps:focus-within { border-color: var(--sk-border-2); }
  & .sk-rv-fps-label { font: 600 .74rem var(--sk-font); color: var(--sk-text-2); }
  & .sk-rv-fps #fps { width: 52px; height: 28px; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
    font: 600 .82rem var(--sk-mono); color: var(--sk-text); -moz-appearance: textfield; }
  & .sk-rv-fps #fps::-webkit-inner-spin-button, & .sk-rv-fps #fps::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  & .sk-rv-fps #fps:focus { outline: none; }
  & .sk-rv-fps #autofps { height: 28px; padding: 0 10px; border-radius: 999px; border: 0; background: var(--sk-surface-3); color: var(--sk-text-2); font: 600 .72rem var(--sk-font); }
  & .sk-rv-fps #autofps:hover { color: var(--sk-text); }
}
/* подпись «speed» не нужна — «×» в капсуле говорит сам; панель остаётся в один ряд */
html[data-sk="d"][data-page="review"] .player-card > .row:has(#playpause) > label { display: none; }
/* нижняя панель в один ряд с капсулой fps: компактнее счётчик кадров, fps и отступы кнопок */
html[data-sk="d"][data-page="review"] .player-card > .row:has(#playpause) {
  gap: 3px; flex-wrap: nowrap; max-width: none; width: max-content;
  & .fnum { font-size: .76rem; padding: 0 8px; white-space: nowrap; }
  & :is(#prev, #next) { min-width: 0; width: 32px; padding: 0; justify-content: center; }
  & :is(#prevcmt, #nextcmt) { padding: 0 8px; }
  & :is(#setIn, #setOut) { padding: 0 9px; }
  & .spacer { flex: 0 0 6px; }
  & .sk-rv-fps #fps { width: 40px; }
  & .sk-rv-fps #autofps { padding: 0 8px; }
}

/* ============================================================ кнопка админки и шапка админки (20.10.2026) */
:is(html[data-sk="d"][data-page="catalog"]) #profile-bottom #admin-link {
  position: static; width: 38px; height: 38px; border-radius: 999px; box-shadow: none; display: inline-grid; place-items: center;
  border: 1px solid var(--sk-border); background: var(--sk-surface-2); color: var(--sk-text); font-size: 0; }
:is(html[data-sk="d"][data-page="catalog"]) #profile-bottom #admin-link .sk-ico { width: 16px; height: 16px; }
:is(html[data-sk="d"][data-page="catalog"]) #profile-bottom #admin-link:hover { border-color: var(--sk-border-2); }
:is(html[data-sk="d"][data-page="catalog"]) #profile-bottom #admin-link[hidden] { display: none; }
html[data-sk="d"] .sk-rv-admin[hidden] { display: none !important; }
html[data-sk="d"] .sk-rv-admin.on { background: var(--sk-accent-soft); border-color: var(--sk-accent); color: var(--sk-accent-text); }

/* шапка на странице админки — те же правила, что у Feedbacker */
html[data-sk="d"][data-page="admin"] {
  & body { padding-top: 0; }
  & .sk-rvbar { position: sticky; top: 0; z-index: 70; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 -24px 18px; padding: 12px 24px; background: var(--sk-sidebar); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-bottom: 1px solid var(--sk-border); }
  & .sk-rv-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; font: 700 1.05rem var(--sk-display); letter-spacing: -.01em; }
  & .sk-rv-home, & .sk-rv-here { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
  & .sk-rv-home { color: var(--sk-text-2); text-decoration: none; padding: 4px 8px 4px 4px; margin-left: -4px; border-radius: 10px; }
  & .sk-rv-home:hover { background: var(--sk-surface-2); color: var(--sk-text); }
  & .sk-rv-home .sk-ico { width: 26px; height: 26px; padding: 5px; border-radius: 8px; color: var(--sk-bg); background: var(--sk-text); stroke-width: 2.2; }
  & .sk-rv-sep { display: inline-flex; color: var(--sk-text-3); }
  & .sk-rv-here { color: var(--sk-text); }
  & .sk-rv-here .sk-ico { width: 18px; height: 18px; color: var(--sk-accent-text); }
  & .sk-rv-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
  & .sk-rv-ib { position: relative; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--sk-border); background: var(--sk-surface-2); color: var(--sk-text);
    display: inline-grid; place-items: center; padding: 0; cursor: pointer; text-decoration: none; }
  & .sk-rv-ib:hover { border-color: var(--sk-border-2); }
  & .sk-rv-logout { min-height: 38px; border-radius: 999px; padding: 0 14px; border: 1px solid var(--sk-border); background: var(--sk-surface-2); color: var(--sk-text-2); font: 600 .78rem var(--sk-font); cursor: pointer; }
  & .sk-rv-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; }
  & .sk-rv-avatar .sk-avatar { width: 34px; height: 34px; font-size: .74rem; }
  & .sk-rv-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--sk-danger); color: #fff; font: 700 .62rem/18px var(--sk-font); text-align: center; }
  & .sk-rv-badge[hidden] { display: none; }
  & .sk-rv-popwrap { position: relative; display: inline-flex; }
  & .sk-rv-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 90; min-width: 170px; padding: 6px; border-radius: 12px;
    background: var(--sk-surface); border: 1px solid var(--sk-border-2); box-shadow: var(--sk-shadow); }
  & .sk-rv-pop[hidden] { display: none; }
  & .sk-rv-pop > button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--sk-text); font: 500 .8rem var(--sk-font); cursor: pointer; text-align: left; }
  & .sk-rv-pop > button:hover { background: var(--sk-surface-2); }
  & .sk-rv-pop > button.active { background: var(--sk-accent); color: var(--sk-on-accent); }
}

/* админка: углы таблиц — по скруглению карточки (20.10.2026). У карточек обрезка
   выключена (иначе не открыть список проектов клиента), и квадратные углы строки
   заголовков вылезали за скругление 18px. */
html[data-sk="d"][data-page="admin"] .card > table {
  border-collapse: separate; border-spacing: 0;
  & thead tr:first-child > :first-child { border-top-left-radius: 17px; }
  & thead tr:first-child > :last-child { border-top-right-radius: 17px; }
  & tbody tr:last-child > :first-child { border-bottom-left-radius: 17px; }
  & tbody tr:last-child > :last-child { border-bottom-right-radius: 17px; }
  & tbody tr:last-child > td { border-bottom: 0; }
}
/* чекбоксы Sources / Export — по левому краю карточки, ровно под статусом (Полина, 20.10.2026) */
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) .status-row .upload-checks { margin-left: 0; }

/* Feedbacker в бою (21.10.2026): гость по ссылке /r/… — без «Animation Space ›» и
   кнопок аккаунта (каталог ему недоступен); клиент — без кнопок команды. */
html[data-sk="d"] .sk-rvbar.sk-rv-guest :is(.sk-rv-home, .sk-rv-sep) { display: none; }
html[data-sk="d"] .sk-rvbar.sk-rv-client :is(.sk-rv-bell, .sk-rv-admin, .sk-rv-logout) { display: none !important; }

/* «📚 Гайди» (появилась в бою 19.10, после ответвления редизайна) — в плашке рядом с Feedbacker, той же таблеткой */
:is(html[data-sk="d"][data-page="catalog"]) #guides-btn {
  order: 5; width: auto; display: inline-flex !important; align-items: center; gap: 8px; padding: 0 14px; min-height: 38px; margin: 0 !important;
  border-radius: 999px; font-weight: 600; font-size: .82rem; white-space: nowrap; text-align: left !important;
  border: 1px solid var(--sk-border); background: var(--sk-surface-2); color: var(--sk-text); text-decoration: none; }
:is(html[data-sk="d"][data-page="catalog"]) #guides-btn:hover { border-color: var(--sk-border-2); }
/* плотность карточек убрана (19.10) — и в кабинете клиента кнопки нет */
html[data-sk="d"] #density-icon-toggle { display: none !important; }

/* ============================================================ правки Полины, 21.10.2026 */
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) {
  /* иконка по центру кнопки: в кнопке остаётся невидимый текст, и gap сдвигал иконку */
  & #refresh-btn { display: inline-grid !important; place-items: center; gap: 0; padding: 0; }
  & #refresh-btn .sk-ico { margin: 0; display: block; }
  & .project-cover-edit { display: grid; place-items: center; gap: 0; padding: 0; font-size: 0; line-height: 0; }
  & .project-cover-edit .sk-ico { width: 14px; height: 14px; margin: 0; display: block; }

  /* обновление идёт — кнопка заблокирована, три точки */
  & #refresh-btn:disabled { cursor: progress; opacity: 1; }
  & #refresh-btn:disabled .sk-ico { display: none; }
  & #refresh-btn:disabled::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: rgba(242, 243, 245, .9);
    box-shadow: -7px 0 0 rgba(242, 243, 245, .9), 7px 0 0 rgba(242, 243, 245, .9); animation: skDots 1s linear infinite; }

  /* плитка проекта — всегда 4 строки: название, заказчик, превʼю, «Оновлено» */
  & .project-card-meta { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1px; }
  & .project-card-meta span:empty { display: none; }

  /* «N нових» — точка вместо колокольчика, спокойная плашка */
  & .project-card-new { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 9px; border-radius: 999px;
    background: rgba(10, 11, 14, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #f2f3f5;
    border: 1px solid rgba(255, 255, 255, .12); font: 600 .7rem var(--sk-font); letter-spacing: .01em; }
  & .project-card-new .sk-ico { display: none; }
  & .project-card-new::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fbbf24; flex: none;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, .22), 0 0 10px rgba(251, 191, 36, .55); }

  /* «Згорнути всі категорії» — слева от вкладок */
  & .sk-fold-all { flex: none; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--sk-border); background: var(--sk-surface-2);
    color: var(--sk-text-2); display: grid; place-items: center; padding: 0; cursor: pointer; margin-right: 6px; }
  & .sk-fold-all:hover { color: var(--sk-text); border-color: var(--sk-border-2); }
  & .sk-fold-all .sk-ico { width: 16px; height: 16px; margin: 0; }
  & .sk-sections { align-items: center; }

  /* вход в проект — шапка и фильтры проявляются, карточки волной */
  & .sk-proj-in :is(.sk-hero, .sk-filterbar, .project-req, .sk-sections) { animation: skFadeUp .45s cubic-bezier(.2, .7, .2, 1) backwards; }
  & .sk-proj-in .sk-filterbar { animation-delay: 60ms; }
  & .sk-proj-in :is(.project-req, .sk-sections) { animation-delay: 110ms; }
  & #catalog .card.sk-in { animation: skTileIn .5s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(120ms + var(--i, 0) * 30ms); }
}
html[data-sk="d"] .sk-totop { position: fixed; right: 24px; bottom: 24px; z-index: 80; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--sk-border-2); background: color-mix(in srgb, var(--sk-surface) 88%, transparent); backdrop-filter: blur(10px);
  color: var(--sk-text); display: grid; place-items: center; padding: 0; cursor: pointer; box-shadow: var(--sk-shadow);
  transition: transform .15s, opacity .2s; }
html[data-sk="d"] .sk-totop:hover { transform: translateY(-2px); }
html[data-sk="d"] .sk-totop[hidden] { display: none; }
html[data-sk="d"] .sk-totop .sk-ico { width: 20px; height: 20px; margin: 0; }
@keyframes skDots {
  0%, 100% { box-shadow: -7px 0 0 rgba(242, 243, 245, .9), 7px 0 0 rgba(242, 243, 245, .25); background: rgba(242, 243, 245, .25); }
  33% { box-shadow: -7px 0 0 rgba(242, 243, 245, .25), 7px 0 0 rgba(242, 243, 245, .25); background: rgba(242, 243, 245, .9); }
  66% { box-shadow: -7px 0 0 rgba(242, 243, 245, .25), 7px 0 0 rgba(242, 243, 245, .9); background: rgba(242, 243, 245, .25); }
}
@keyframes skFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html[data-sk="d"] :is(.sk-proj-in .sk-hero, .sk-proj-in .sk-filterbar, .sk-proj-in .project-req, .sk-proj-in .sk-sections, #catalog .card.sk-in) { animation: none !important; }
}
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) #refresh-btn {
  display: inline-flex !important; justify-content: center; align-items: center; gap: 0; line-height: 0; font-size: 0; }
html[data-sk="d"] .sk-totop:not([hidden]) { display: inline-flex !important; align-items: center; justify-content: center; }

/* «N нових» на плитке проекта — тем же минимализмом, что «NEW» на видео (Полина, 21.10.2026),
   и поверх обложки: при наведении обложка увеличивается и перекрывала плашку. */
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) .project-card-new {
  z-index: 3; display: inline-flex; align-items: center; gap: 0; padding: 3px 9px; border-radius: 999px; border: 0;
  background: var(--sk-new); color: var(--sk-on-new); backdrop-filter: none; -webkit-backdrop-filter: none;
  font: 800 .62rem var(--sk-font); letter-spacing: .05em; text-transform: uppercase; }
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) .project-card-new::before { content: none; display: none; }
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) .project-cover-actions { z-index: 3; }
/* ТЗ-карточки — в волне входа в проект вместе с карточками видео (21.10.2026) */
:is(html[data-sk="d"][data-page="catalog"]) #catalog :is(.tz-card, .tz-add).sk-in { animation: skTileIn .5s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(120ms + var(--i, 0) * 30ms); }
@media (prefers-reduced-motion: reduce) { html[data-sk="d"] #catalog :is(.tz-card, .tz-add).sk-in { animation: none !important; } }

/* Выделенный текст в тёмной теме — заметно (Рома Ванхази, 21.10.2026: «зливається з фоном») */
html[data-sk="d"] ::selection { background: #2f6fed; color: #fff; }
html[data-sk="d"] :is(input, textarea)::selection { background: #2f6fed; color: #fff; }
/* «/» в поиске — с подсказкой при наведении */
:is(html[data-sk="d"][data-page="catalog"], html[data-sk="d"][data-page="client"]) .sk-kbd { pointer-events: auto; cursor: help; }
/* ссылки в тексте требований и ТЗ */
html[data-sk="d"] a.tf-link { color: var(--sk-link); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
html[data-sk="d"] a.tf-link:hover { color: var(--sk-text); }
/* поля растут за текстом — но не выше 60% экрана, дальше прокрутка */
html[data-sk="d"] textarea { max-height: max(320px, 60vh); overflow-y: auto; }
/* имя проекта: карандаш при наведении на заголовок, правка на месте (Алина, 22.10.2026) */
html[data-sk="d"] .sk-hero-title .sk-title-edit { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 30px; height: 30px; margin-left: 10px; padding: 0; border: 1px solid var(--sk-border-2); border-radius: 8px; background: var(--sk-surface-2); color: var(--sk-text-2); cursor: pointer; opacity: .4; transition: opacity .15s, color .15s, border-color .15s; }
html[data-sk="d"] .sk-hero-title:hover .sk-title-edit, html[data-sk="d"] .sk-title-edit:focus-visible { opacity: 1; }
html[data-sk="d"] .sk-title-edit:hover { color: var(--sk-text); border-color: var(--sk-accent-text); }
html[data-sk="d"] .sk-title-edit .sk-ico { width: 15px; height: 15px; }
html[data-sk="d"] .sk-title-input { display: block; width: min(100%, 720px); box-sizing: border-box; font: inherit; letter-spacing: inherit; color: var(--sk-text); background: var(--sk-input); border: 1px solid var(--sk-accent-text); border-radius: 10px; padding: 4px 12px; outline: none; }
html[data-sk="d"] .sk-title-hint { display: block; margin-top: 6px; font: 500 .74rem var(--sk-font); letter-spacing: 0; color: var(--sk-text-3); }
/* иконка папки у названия → папка проекта на Drive (Полина, 22.10.2026) */
html[data-sk="d"] .sk-hero-title .sk-title-drive { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; position: relative; top: -.08em; width: 40px; height: 40px; margin-right: 12px; border: 1px solid var(--sk-border-2); border-radius: 11px; background: var(--sk-surface-2); color: var(--sk-accent-text); text-decoration: none; transition: background .15s, border-color .15s, color .15s, transform .15s; }
html[data-sk="d"] .sk-title-drive:hover { background: var(--sk-accent-soft); border-color: var(--sk-accent-text); color: var(--sk-text); transform: translateY(-1px); }
html[data-sk="d"] .sk-title-drive .sk-ico { width: 20px; height: 20px; }
/* коммент клиента (канал external) на карточке — пометка «Клієнт» (Полина, 23.10.2026) */
html[data-sk="d"] .fb-item .fb-client { display: inline-block; padding: 0 7px; border-radius: 999px; background: #f6c344; color: #1a1a1a; font: 700 .64rem/1.6 var(--sk-font); vertical-align: 1px; }
html[data-sk="d"] .fb-item.is-client { border-color: rgba(246, 195, 68, .55); }
/* ссылка на конкретное ТЗ — кнопка рядом с ✕ (Роман Ванхази, 26.10.2026) */
html[data-sk="d"] .tz-copylink { position: absolute; top: 12px; right: 46px; background: none; border: 0; color: var(--sk-text-2); font-size: 1.05rem; cursor: pointer; opacity: .75; }
html[data-sk="d"] .tz-copylink:hover, html[data-sk="d"] .tz-copylink.done { opacity: 1; color: var(--sk-text); }
html[data-sk="d"] .tz-head { padding-right: 62px; }
/* папки ассета на карточке ТЗ — как чипы Source / Preview / Exports на карточке видео (Алина, 27.10.2026) */
html[data-sk="d"] .tz-card .tz-folder { background: var(--sk-surface-2); color: var(--sk-text-2); transition: background .15s, color .15s; }
html[data-sk="d"] .tz-card .tz-folder:hover { background: var(--sk-accent-soft); color: var(--sk-accent-text); }
/* окно после «Зберегти» в шеринге: ссылка для клиента и список (Полина, 09.11.2026) */
html[data-sk="d"] #share-done { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 61; width: min(560px, calc(100vw - 32px)); box-sizing: border-box; padding: 16px 18px; border-radius: 16px; background: var(--sk-surface); border: 1px solid var(--sk-border-2); box-shadow: var(--sk-shadow-lg); color: var(--sk-text); }
html[data-sk="d"] #share-done[hidden] { display: none; }
html[data-sk="d"] #share-done .share-done-title { font: 700 1rem var(--sk-display); margin-bottom: 4px; }
html[data-sk="d"] #share-done .share-done-sub { font-size: .8rem; color: var(--sk-text-2); margin-bottom: 12px; }
html[data-sk="d"] #share-done .share-done-actions { display: flex; gap: 8px; flex-wrap: wrap; }
html[data-sk="d"] #share-done .share-done-actions .refresh-btn { width: auto; min-height: 36px; padding: 0 14px; border-radius: 999px; font: 600 .8rem var(--sk-font); }
html[data-sk="d"] #share-done #share-done-link { background: var(--sk-accent); color: #fff; border-color: transparent; }
html[data-sk="d"] #share-done #share-done-close { margin-left: auto; }
html[data-sk="d"] #share-bar #share-link-btn[hidden] { display: none; }