:root{
    --bg:#ffffff;
    --sidebar-bg:#fbfbfa;
    --text:#37352f;
    --text-secondary:#787774;
    --text-muted:#a4a29e;
    --border:#e9e9e7;
    --hover:#efeeec;
    --radius:6px;
    --admin:#6e59a5; --admin-bg:#ede9fe;
    --producer:#0e7490; --producer-bg:#cffafe;
    --agency:#15803d; --agency-bg:#dcfce7;
    --client:#b45309; --client-bg:#fef3c7;
    --st-basic:#78716c; --st-basic-bg:#e7e5e4;
    --st-short:#57534e; --st-short-bg:#f1f0ee;
    --st-cand:#a16207; --st-cand-bg:#fef9c3;
    --st-sel:#15803d; --st-sel-bg:#dcfce7;
    --st-backup:#0369a1; --st-backup-bg:#e0f2fe;
    /* "Вибір режисера" (2026-07-27) — статус, який ставить лише режисер */
    --st-director:#7e22ce; --st-director-bg:#f3e8ff;
    /* "Відхилено" (2026-07-29) */
    --st-rejected:#b91c1c; --st-rejected-bg:#fee2e2;
    /* Той самий синій, що раніше жив у --st-cand до перефарбування статусу
       "Кандидат" у жовтий (п.8) — використання, не пов'язане зі статусами
       (підсвітка дропзони заливки), винесено в окремий токен. */
    --drop-highlight:#1d4ed8; --drop-highlight-bg:#dbeafe;
    --new:#d1453d;
    --surface:#ffffff;
    --tile-bg:#f1f0ee;
    --tile-hover-bg:#e9e8e5;
    --panel-bg:#fafaf9;
    --unread-bg:#fdf4f3;
    --unread-hover-bg:#fdecec;
    --primary-bg:#37352f;
    --primary-text:#ffffff;
  }

  [data-theme="dark"]{
    --bg:#2b2b2b;
    --sidebar-bg:#242424;
    --text:#f2f2f0;
    --text-secondary:#b0b0ad;
    --text-muted:#8c8c89;
    --border:#3f3f3f;
    --hover:#3a3a3a;
    --surface:#333333;
    --tile-bg:#3a3a3a;
    --tile-hover-bg:#454545;
    --panel-bg:#303030;
    --unread-bg:#4a2c2c;
    --unread-hover-bg:#5a3434;
    --primary-bg:#f2f2f0;
    --primary-text:#1e1e1e;
    --admin:#b3a1e8; --admin-bg:#3f3570;
    --producer:#67e8f9; --producer-bg:#164e63;
    --agency:#6ee7a0; --agency-bg:#1d4a30;
    --client:#fbbf67; --client-bg:#5c3a10;
    --st-basic:#a8a29e; --st-basic-bg:#44403c;
    --st-short:#b8b6b2; --st-short-bg:#3a3a3a;
    --st-cand:#fbbf24; --st-cand-bg:#42350a;
    --st-sel:#6ee7a0; --st-sel-bg:#1d4a30;
    --st-backup:#7dd3fc; --st-backup-bg:#0c4a6e;
    --st-director:#e9d5ff; --st-director-bg:#4c1d95;
    --st-rejected:#fca5a5; --st-rejected-bg:#7f1d1d;
    --drop-highlight:#7db3f5; --drop-highlight-bg:#1e3a5c;
    --new:#f68b84;
  }
  *{box-sizing:border-box;}
  body{
    margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    color:var(--text); background:var(--bg); font-size:15px; line-height:1.5;
  }
  .hidden{display:none !important;}
  button, select, input, textarea{font-family:inherit; font-size:14px; color:var(--text);}
  button{
    cursor:pointer; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:6px 10px; transition:background .1s;
  }
  button:hover{background:var(--hover);}
  button.primary{background:var(--primary-bg); color:var(--primary-text); border-color:var(--primary-bg);}
  button.primary:hover{opacity:.85;}
  button.ghost{border-color:transparent; padding:4px 6px;}
  button.ghost:hover{background:var(--hover);}
  /* УХ-уніфікація (ТЗ_Уніфікація_UI): «Видалити» — єдиний червоний стиль
     замість точкових color:var(--new)-хаків по модулях. */
  button.danger{background:var(--new); color:#fff; border-color:var(--new);}
  button.danger:hover{opacity:.85;}
  button.ack-btn{font-size:12px; padding:3px 8px; border-color:var(--new); color:var(--new);}
  button.ack-btn:hover{background:var(--unread-hover-bg);}
  .ack-label{font-size:12px; color:var(--text-muted);}
  .ack-label.pending{font-style:italic;}
  select{border:1px solid var(--border); border-radius:var(--radius); padding:5px 8px; background:var(--surface);}
  input[type=text], input[type=email], input[type=password], textarea{
    border:1px solid var(--border); border-radius:var(--radius); padding:8px 10px; width:100%; background:var(--surface);
  }
  input:focus, textarea:focus, select:focus{outline:none; border-color:#b8b6b2;}
  textarea{resize:vertical; min-height:44px;}
  a{color:inherit;}
  .icon{width:16px; height:16px; display:inline-block; vertical-align:-3px; flex-shrink:0;}
  .icon-lg{width:28px; height:28px;}
  .new-dot{width:8px; height:8px; border-radius:50%; background:var(--new); display:inline-block; flex-shrink:0;}

  /* ---------- LOGIN ---------- */
  #screen-login{min-height:100vh; display:flex; align-items:center; justify-content:center;}
  .login-card{width:340px; border:1px solid var(--border); border-radius:12px; padding:32px;}
  .login-card h1{font-size:20px; font-weight:600; margin:0 0 4px;}
  .login-card p.sub{color:var(--text-secondary); font-size:13px; margin:0 0 24px;}
  .field{margin-bottom:12px;}
  .field label{display:block; font-size:12px; color:var(--text-secondary); margin-bottom:4px;}
  .login-card button.primary{width:100%; margin-top:8px; padding:9px;}

  /* ---------- PROJECTS ---------- */
  #screen-projects{max-width:920px; margin:0 auto; padding:32px 24px;}
  .projects-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px;}
  .projects-top h1{font-size:20px; font-weight:600; margin:0;}
  .user-chip{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary);}
  .projects-actions-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:20px;}
  #account-settings-btn{padding:6px; display:flex; align-items:center; justify-content:center;}
  .project-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:14px;}
  /* Проекти таблицею (правка власника 2026-08-01) — альтернатива тайлам,
     ті самі дані й ті самі дії. Рядок перетягується так само, як картка:
     спільний клас .project-drag-item тримає обробники. */
  .projects-view-row{display:flex; justify-content:flex-end; margin-bottom:8px;}
  .project-table{width:100%; border-collapse:collapse; margin-bottom:18px;}
  .project-table th{text-align:left; font-size:12px; color:var(--text-secondary); font-weight:600; padding:6px 10px; border-bottom:1px solid var(--border);}
  .project-table td{padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:middle;}
  .project-row{cursor:pointer;}
  /* Ховер — ФІЛЬТРОМ, а не фоном: колір проекту заливає рядок інлайновим
     style, який перебив би будь-яке фонове правило (інлайн > клас), і
     наведення на кольорових рядках було б непомітним. */
  .project-row:hover{filter:brightness(.96);}
  .project-row.drag-over{outline:2px solid var(--accent); outline-offset:-2px;}
  .project-row.dragging{opacity:.5;}
  .project-row-drag{width:24px; color:var(--text-muted);}
  .project-row-name{font-weight:600;}
  .project-row-desc{color:var(--text-secondary); font-size:13px; max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .project-row-actions{width:80px; white-space:nowrap; text-align:right;}
  .project-table .avatars{display:flex; gap:4px;}
  /* Календар усіх проектів — ОДРАЗУ під переліком проектів, вбудований
     (ТЗ_Календар_Продюсера.md, правка власника 2026-07-31 друга/третя
     ітерація): відступ і роздільник відокремлюють секцію від карток
     проектів вище. ШИРИНА 96vw (третя правка) — свідомо "виривається" за
     max-width:920px батька #screen-projects: класичний CSS-прийом
     breakout, margin-left:calc(50% - 48vw) НЕ залежить від фактичної
     ширини батька (50% тут — половина ширини БАТЬКА, 48vw — половина
     бажаної ширини у viewport-одиницях; різниця завжди дає правильний
     зсув до 2vw від краю екрана, з будь-яким max-width контейнера). */
  .producer-calendar-embed{
    width:96vw; box-sizing:border-box;
    margin-left:calc(50% - 48vw); margin-top:32px;
    padding:24px 16px 0; border-top:1px solid var(--border);
  }
  .project-card{border:1px solid var(--border); border-radius:10px; padding:16px; cursor:pointer; position:relative;}
  .project-card:hover{border-color:#c9c7c2; background:var(--hover);}
  /* Перетягування тайлів (правка власника 2026-08-01) — той самий візуальний
     патерн, що storyboard sb-shot-drag-over (ціль) + notes nt-dragging
     (джерело, приглушене). */
  .project-card.dragging{opacity:.4; transform:scale(.97); cursor:grabbing;}
  .project-card.drag-over{outline:2px dashed var(--accent,#3b82f6); outline-offset:3px;}
  /* Іконка-підказка "це перетягується" (правка власника 2026-08-01) —
     завжди видима (не лише на hover, як edit/delete): мета — щоб
     draggable-можливість було зрозуміло одразу, без наведення. Сама
     картка draggable звідусіль, іконка не має власного обробника.
     У СПІЛЬНОМУ flex-рядку з назвою (.project-card-head), НЕ absolute —
     absolute-варіант налазив на назву, коли вона починалась з того ж
     кута (правка власника, наступна ітерація). */
  .project-card-head{display:flex; align-items:center; gap:6px; margin-bottom:6px;}
  .project-drag-handle{
    flex:0 0 auto; width:16px; height:16px; opacity:.4; cursor:grab;
    display:flex; align-items:center; justify-content:center; color:var(--text-secondary);
  }
  .project-drag-handle .icon{width:16px; height:16px;}
  .project-card-draggable:hover .project-drag-handle{opacity:.9;}
  .project-delete-btn{
    position:absolute; top:10px; right:10px; opacity:0; transition:opacity .15s; width:26px; height:26px;
    padding:0; display:flex; align-items:center; justify-content:center; background:var(--surface); color:var(--new); z-index:2;
  }
  .project-edit-btn{
    position:absolute; top:10px; right:42px; opacity:0; transition:opacity .15s; width:26px; height:26px;
    padding:0; display:flex; align-items:center; justify-content:center; background:var(--surface); z-index:2;
  }
  .project-card:hover .project-delete-btn, .project-card:hover .project-edit-btn{opacity:1;}
  .project-card h3{margin:0; font-size:15px; font-weight:600;}
  /* 2-рядковий клемп опису на тайлі (правка власника 2026-08-01) — довгий
     опис не роздуває картку, обрізається з "…". */
  .project-card p{
    margin:0 0 12px; font-size:13px; color:var(--text-secondary); line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .avatars{display:flex;}
  .avatar{
    width:24px; height:24px; border-radius:50%; background:var(--st-short-bg); color:var(--st-short);
    font-size:10px; font-weight:600; display:flex; align-items:center; justify-content:center;
    border:2px solid var(--surface); margin-left:-6px;
  }
  .avatar:first-child{margin-left:0;}
  /* Пікер кольору проекту (модалка редагування) — той самий віджет, що
     .pc-color-row/.pc-color-dot у Календарі всіх проектів (producer_calendar),
     свій клас тут, бо цей CSS живе в styles.css, не в styleBlock() модуля. */
  .proj-color-row{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;}
  .proj-color-dot{width:22px; height:22px; border-radius:50%; border:2px solid transparent; cursor:pointer;}
  .proj-color-dot.active{border-color:var(--accent,#3b82f6);}
  @media (max-width:640px){
    /* Мобільно — два тайли в рядок замість одного на всю ширину (правка
       власника 2026-08-01), auto-fill(260px) на ~360px екрані завжди давав
       рівно 1 колонку. Тайл звужений: менші padding/шрифти, щоб два
       вмістилися без переповнення. */
    .project-grid{grid-template-columns:repeat(2,1fr); gap:8px;}
    /* Опис у таблиці мобільно лише заважає — досить назви/учасників/дій. */
    .project-row-desc, .project-table th:nth-child(3){display:none;}
    .project-card{padding:10px;}
    .project-card-head{margin-bottom:4px;}
    .project-card h3{font-size:13px;}
    .project-drag-handle{width:13px; height:13px;}
    .project-drag-handle .icon{width:13px; height:13px;}
    .project-card p{font-size:11px; margin-bottom:8px;}
    .avatar{width:18px; height:18px; font-size:8px;}
    .project-edit-btn, .project-delete-btn{width:22px; height:22px; top:6px;}
    .project-delete-btn{right:6px;}
    .project-edit-btn{right:32px;}
  }

  /* ---------- APP SHELL ---------- */
  #screen-app{display:flex; height:100vh;}
  #sidebar{
    width:260px; flex-shrink:0; background:var(--sidebar-bg); border-right:1px solid var(--border);
    display:flex; flex-direction:column; overflow:hidden;
  }
  /* 52px + border-bottom — точно як #topbar, щоб кнопка-дублікат toggleSidebar()
     тут лежала на тій самій висоті, що й справжня кнопка в топбарі. */
  .sb-header{height:52px; flex-shrink:0; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:6px; padding:0 8px;}
  .sb-body{flex:1; min-height:0; overflow-y:auto; padding:12px 8px;}
  .sb-project{display:flex; align-items:center; flex:1; min-width:0; padding:6px 8px; cursor:pointer; border-radius:var(--radius); font-weight:600; font-size:14px;}
  .sb-project:hover{background:var(--hover);}
  .sb-project span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .sb-search{margin:0 4px 12px;}
  .sb-search input{padding:6px 8px; font-size:13px;}
  .sb-section-label{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); padding:6px 12px 4px;}
  .tree-node{}
  .tree-row{
    display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:var(--radius);
    cursor:pointer; font-size:14px; color:var(--text);
  }
  .tree-row:hover{background:var(--hover);}
  /* Правка власника 2026-07-28: рядки СУБМЕНЮ компактніші (відступи були
     завеликі) + іконка посилання менша. Список контейнерів = усі
     dropdown-діти сайдбару. */
  #casting-roles .tree-row, #locations-roles .tree-row, #props-roles .tree-row, #wardrobe-roles .tree-row,
#callsheets-sheets .tree-row, #storyboard-boards .tree-row, #calendar-calendars .tree-row,
  #shoot-planning-days .tree-row, #uploaded-group-children .tree-row, #folders-group-children .tree-row{
    padding:2px 8px; font-size:13px;
  }
  #casting-roles .ghost, #locations-roles .ghost, #props-roles .ghost, #wardrobe-roles .ghost,
  /* Зірочка головного календаря в підменю сайдбару — праворуч, приглушена
     (це маркер стану, а не дія: клікати нема чого). */
  #calendar-calendars .cal-nav-main{margin-left:auto; display:inline-flex; color:var(--text-muted);}
  #calendar-calendars .cal-nav-main svg{width:13px; height:13px;}
  #callsheets-sheets .ghost, #storyboard-boards .ghost, #shoot-planning-days .ghost{
    padding:1px 4px; border-radius:6px;
  }
  #casting-roles .ghost svg, #locations-roles .ghost svg, #props-roles .ghost svg, #wardrobe-roles .ghost svg,
  #callsheets-sheets .ghost svg{width:13px; height:13px;}
  .tree-row.active{background:var(--hover); font-weight:600;}
  .tree-chevron{width:14px; height:14px; flex-shrink:0; color:var(--text-muted); transition:transform .1s;}
  .tree-chevron.open{transform:rotate(90deg);}
  .tree-children{margin-left:16px;}
  .sb-add-folder{margin:10px 8px 4px; font-size:13px; color:var(--text-secondary); display:flex; align-items:center; gap:6px;}
  .sb-add-folder:hover{color:var(--text);}
  .unread-badge{background:var(--new); color:#fff; font-size:11px; font-weight:600; padding:1px 7px; border-radius:10px; margin-left:auto;}
  /* Канонічне меню (план misty-wibbling-tulip): Затверджені матеріали — жирним;
     заголовок групи "Завантажені матеріали" — жирним, щоб читалось як група. */
  #approved-nav #approved-nav-label{font-weight:700;}
  #uploaded-group-label #uploaded-group-label-text{font-weight:700;}
  /* Пункти модулів (renderNav) — tree-row, як Коментарі/Сторіборд; тут лише
     відступ між пунктами та вирівнювання іконки. */
  .nav-item{margin-bottom:6px;}
  .nav-item-icon{display:flex; align-items:center; flex-shrink:0;}
  .nav-item-icon .icon{width:16px; height:16px;}
  /* Лінії-розділювачі навколо групи "Завантажені матеріали" (рев'ю власника). */
  .sb-divider{border-top:1px solid var(--border); margin:8px 4px;}
  /* Порожній рядок між групами меню (рев'ю власника 2026-07-26) — саме
     відступ, а не лінія: лінії власник просив лише навколо "Завантажених". */
  /* Пробіл, який власник додає в структуру меню (Налаштування проекту ->
     Модулі -> "Додати пробіл"). 12px -> 24px за правкою власника
     2026-08-02: як роздільник між групами 12px читалися замало. */
  .sb-gap{height:24px;}
  /* Головна Мудбордів — список, як у Планування/Call sheets. */
  .mb-list-toolbar{margin-bottom:12px;}
  .mb-list-row{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border);
    border-radius:8px; margin-bottom:6px; cursor:pointer;}
  .mb-list-row:hover{background:var(--hover);}
  .mb-list-name{font-weight:600; flex:1;}
  .mb-list-meta{opacity:.7; font-size:13px;}
  /* Іконки заголовків груп (Завантажені/Папки) — той самий розмір, що в пунктів. */
  #uploaded-group-icon .icon, #folders-group-icon .icon{width:16px; height:16px;}

  /* Вкладки (налаштування проекту + сторінка Учасників) — той самий вигляд, що
     перемикачі видів Календаря/Контактів (сірий фон, жирне, активна — акцент). */
  .ps-tabs{display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
  .ps-tab{padding:8px 18px; border-radius:8px; border:1px solid var(--border); background:var(--tile-bg); font-weight:700; font-size:15px; cursor:pointer;}
  .ps-tab.active{background:var(--accent,#3b82f6); color:#fff;}

  /* Картки учасників (сторінка Учасники проекту, вкладка Клієнт/Агенція) —
     візуально як .con-row Контактів, але ВЛАСНІ хостові класи: con-* живуть у
     styleBlock модуля contacts і існують лише коли той відрендерений. */
  .mem-card-row{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; margin-bottom:8px;}
  .mem-card-name{font-weight:700;}
  .mem-card-meta{font-size:12px; color:var(--text-secondary);}
  .mem-card-row label{display:flex; align-items:center; gap:4px; font-size:12px; color:var(--text-secondary); cursor:pointer;}
  .mem-add-form{border:1px dashed var(--border); border-radius:8px; padding:12px; margin-top:14px; max-width:420px;}

  #main{flex:1; display:flex; flex-direction:column; min-width:0;}
  #topbar{
    height:52px; flex-shrink:0; border-bottom:1px solid var(--border); display:flex; align-items:center;
    justify-content:space-between; padding:0 20px;
  }
  .breadcrumb{font-size:13px; color:var(--text-secondary); display:flex; align-items:center; gap:6px;}
  .breadcrumb b{color:var(--text); font-weight:600;}
  .topbar-right{display:flex; align-items:center; gap:10px;}

  #canvas-scroll{flex:1; overflow-y:auto;}
  /* Правка власника 2026-07-31 (глобальна): на широкому екрані контент займав
     лише ~85-90% ширини (94% max-width МІНУС 40px+40px бічного padding) —
     тепер ефективно ~96%: max-width піднято до 99%, бічний padding звужено
     до 16px (вертикальні 40px/120px не чіпаємо — це про висоту, не ширину).
     Мобільний варіант (max-width:640px нижче) не змінюється — там уже
     98%+, власник хотів правки саме для широкого екрана. */
  #canvas{max-width:99%; margin:0 auto; padding:40px 16px 120px;}
  .block{margin-bottom:4px; position:relative;}
  .block-wrap{position:relative;}
  .block-drag-handle{
    position:absolute; top:6px; left:-22px; width:18px; height:22px; opacity:0; transition:opacity .15s;
    display:flex; align-items:center; justify-content:center; cursor:grab; color:var(--text-muted); font-size:14px; user-select:none;
  }
  .block-wrap:hover .block-drag-handle{opacity:1;}
  .block-text{
    padding:4px 2px; font-size:16px; line-height:1.6; outline:none; border-radius:4px; min-height:1.6em;
  }
  .block-text[contenteditable=true]:hover{background:var(--panel-bg);}
  .block-text[contenteditable=true]:focus{background:var(--panel-bg); box-shadow:0 0 0 1px var(--border);}
  .block-text.placeholder-empty:empty:before{content:attr(data-placeholder); color:var(--text-muted);}
  .block-text h1{font-size:24px; font-weight:700; margin:10px 0 4px; line-height:1.3;}
  .block-text h2{font-size:20px; font-weight:700; margin:8px 0 4px; line-height:1.3;}
  .block-text h3{font-size:17px; font-weight:600; margin:6px 0 2px; line-height:1.3;}
  .block-text ul, .block-text ol{margin:4px 0; padding-left:22px;}
  .block-text li{margin:2px 0;}
  .block-text b, .block-text strong{font-weight:700;}
  .block-text i, .block-text em{font-style:italic;}
  .text-toolbar{display:flex; align-items:center; gap:2px; margin-bottom:4px;}
  .text-toolbar button{padding:4px 8px; font-size:12px; line-height:1; min-width:26px;}
  .text-toolbar button .icon{width:14px; height:14px; vertical-align:-2px;}
  .text-toolbar-sep{width:1px; height:18px; background:var(--border); margin:0 4px;}

  .folder-page-title{display:flex; align-items:center; gap:8px; margin-bottom:20px;}
  .folder-page-title h1{font-size:22px; font-weight:600; margin:0;}
  .folder-page-title button{opacity:0; transition:opacity .15s;}
  .folder-page-title:hover button{opacity:1;}
  /* "Модуль / Назва" усередині <h1> (правка власника 2026-07-30) — Модуль
     клікабельний і веде на список/огляд модуля, решта — звичайний текст
     заголовка. Той самий приглушений відступ від назви, що й хлібні крихти. */
  .page-title-parent{color:var(--accent); cursor:pointer; text-decoration:none;}
  .page-title-parent:hover{text-decoration:underline;}
  .page-title-sep{color:var(--text-secondary); font-weight:400; margin:0 2px;}

  .subfolder-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:10px; margin-bottom:20px;}
  .subfolder-card{border:1px solid var(--border); border-radius:8px; padding:14px; cursor:pointer; display:flex; align-items:center; gap:10px; position:relative;}
  .subfolder-card:hover{background:var(--hover);}
  .subfolder-card .icon{color:var(--text-secondary);}
  .subfolder-card span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .subfolder-rename-btn{position:absolute; top:6px; right:28px; opacity:0; transition:opacity .15s; padding:4px;}
  .subfolder-delete-btn{position:absolute; top:6px; right:6px; opacity:0; transition:opacity .15s; padding:4px;}
  .subfolder-card:hover .subfolder-rename-btn, .subfolder-card:hover .subfolder-delete-btn{opacity:1;}
  .subfolder-card span{font-size:14px; font-weight:500;}

  .ic-block{border:1px solid var(--border); border-radius:8px; margin-bottom:20px;}
  .ic-toolbar{display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid var(--border); gap:8px; flex-wrap:wrap;}
  .ic-toolbar .filters{display:flex; gap:8px;}
  .ic-toolbar select{font-size:13px; padding:4px 6px;}
  .ic-group-label{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); padding:10px 12px 2px;}
  .ic-pinned{padding:0 12px;}
  .ic-pinned .item-row{border:2px solid var(--st-sel); border-radius:8px; margin-bottom:8px;}
  .item-row{border-bottom:1px solid var(--border);}
  .item-row:last-child{border-bottom:none;}
  /* .item-row:last-child{border-bottom:none} вище прибирає й нижню лінію зеленої рамки
     "Вибрано" — пінований айтем майже завжди єдиний (тому last-child) у своїй обгортці.
     Повертаємо нижню межу саме для пінованих, з вищою специфічністю. */
  .ic-pinned .item-row:last-child{border-bottom:2px solid var(--st-sel);}
  .item-row-head{display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; flex-wrap:wrap;}
  /* Правка власника 2026-07-31: статус+рейтинги+іконки — ОДНА flex-група, не
     окремі діти item-row-head — інакше кожен елемент шукав місце окремо і
     .cand-name (flex:1, min-width:0, тому охоче стискається до 0) забирав
     весь дефіцит на себе, замість того щоб група пішла на наступний рядок.
     Груповий item переноситься на новий рядок ЦІЛИМ (стандартна поведінка
     multi-line flex: розбивка на рядки — за "природним" розміром, ДО
     застосування shrink), лишаючи cand-name повну ширину на своєму рядку. */
  .cand-row-actions{display:flex; align-items:center; gap:10px;}
  .item-row-head:hover{background:var(--panel-bg);}
  .item-row-head .tree-chevron{margin-right:0;}
  /* Тепер input, а не div (глобальний фікс: раніше назву елемента можна було задати
     лише при створенні, редагувати після — ніяк) — той самий "виглядає як текст, поки
     не клікнув" паттерн, що вже є для полів Сторіборду (.sb-shot-title). Селектор
     input[type="text"].item-name (не просто .item-name) — інакше глобальне правило
     input[type=text]{border:1px solid var(--border);...} (вище за специфічністю)
     перебиває border:none, і поле завжди виглядає як звичайна бордюрована коробка. */
  input[type="text"].item-name{font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    border:none; border-bottom:1px solid transparent; border-radius:0; background:none; color:var(--text); font-family:inherit; font-size:14px; padding:2px 0;}
  input[type="text"].item-name:focus{outline:none; border-bottom-color:var(--border);}
  input[type="text"].item-name:disabled{color:var(--text);}
  .status-badge{font-size:12px; font-weight:500; padding:2px 8px; border-radius:12px; white-space:nowrap;}
  .badge-basic{color:var(--st-basic); background:var(--st-basic-bg);}
  .badge-shortlist{color:var(--st-short); background:var(--st-short-bg);}
  .badge-candidate{color:var(--st-cand); background:var(--st-cand-bg);}
  .badge-selected{color:var(--st-sel); background:var(--st-sel-bg);}
  .badge-backup{color:var(--st-backup); background:var(--st-backup-bg);}
  .badge-director{color:var(--st-director); background:var(--st-director-bg);}
  .badge-rejected{color:var(--st-rejected); background:var(--st-rejected-bg);}
  .media-count{font-size:12px; color:var(--text-secondary); display:flex; align-items:center; gap:4px;}
  .item-row-body{padding:4px 12px 16px 34px;}
  .media-grid{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; --tile-h:200px;}
  .media-tile{
    height:var(--tile-h,100px); background:var(--tile-bg); border-radius:6px; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:4px; cursor:pointer; color:var(--text-secondary); border:1px solid var(--border);
    position:relative; overflow:hidden; flex-shrink:0;
  }
  .media-tile.tile-square{width:var(--tile-h,100px);}
  .media-tile:hover{background:var(--tile-hover-bg);}
  .media-tile span{font-size:10px;}
  /* зберігаємо оригінальні пропорції: висота фіксована, ширина — авто за aspect ratio картинки */
  .media-tile img, .media-tile video{height:100%; width:auto; max-width:480px; display:block; object-fit:contain;}
  .add-media-tile{border-style:dashed; color:var(--text-muted); width:var(--tile-h,100px);}
  .tile-dot{position:absolute; top:6px; right:6px;}
  .media-type-badge{
    position:absolute; top:6px; left:6px; width:60px; height:60px; border-radius:12px;
    background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; pointer-events:none;
  }
  .media-type-badge svg{width:33px; height:33px;}
  .approved-badge{
    position:absolute; bottom:6px; right:6px; width:22px; height:22px; border-radius:50%;
    background:var(--st-sel); color:#fff; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:2;
  }
  .approved-badge svg{width:13px; height:13px;}

  /* ---------- VISIBILITY CONTROL (Agency/Admin → Client) ---------- */
  .client-hidden{opacity:.5;}
  .tile-vis-btn{
    position:absolute; bottom:6px; left:6px; width:22px; height:22px; padding:0; border-radius:50%;
    display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--border);
    color:var(--text-muted); opacity:0; transition:opacity .15s; z-index:2;
  }
  .media-tile:hover .tile-vis-btn, .gal-tile:hover .tile-vis-btn, .gal-feed-wrap:hover .tile-vis-btn{opacity:1;}
  .tile-vis-btn.on{color:var(--agency);}
  .tile-vis-btn.off{color:var(--new); opacity:1;}
  .gal-vis-row{display:flex; align-items:center; gap:6px;}
  .gal-vis-row .tile-vis-btn{position:static; opacity:1;}
  .gal-controls.full .gal-vis-row .tile-vis-btn{width:28px; height:28px;}
  /* Видалення медіа (раніше не існувало) — той самий "ghost", колір
     нейтральний, червоніє при наведенні (деструктивна дія). */
  .tile-delete-btn{color:var(--text-muted); display:flex; align-items:center; justify-content:center;}
  .tile-delete-btn:hover{color:#dc2626;}
  /* Кастинг-правки після рев'ю, п.3: видалення фото кандидата — оверлей
     ПРЯМО на плитці (top-right), той самий візуальний патерн, що інші
     бейджі (main-photo-badge top-left, approved-badge bottom-right). */
  .tile-delete-overlay-btn{
    position:absolute; top:6px; right:6px; width:22px; height:22px; padding:0; border-radius:50%;
    display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); border:none;
    color:#fff; opacity:0; transition:opacity .15s; z-index:2;
  }
  .tile-delete-overlay-btn svg{width:13px; height:13px;}
  .gal-tile:hover .tile-delete-overlay-btn{opacity:1;}
  .tile-delete-overlay-btn:hover{background:#dc2626;}
  .gal-controls.full .gal-vis-row .tile-delete-btn{width:28px; height:28px;}
  .block-vis-btn{
    position:absolute; top:0; right:30px; opacity:0; transition:opacity .15s; width:26px; height:26px;
    padding:0; display:flex; align-items:center; justify-content:center; background:var(--surface); z-index:5;
    color:var(--text-muted);
  }
  .block:hover .block-vis-btn{opacity:1;}
  .block-vis-btn.static{position:static; opacity:1; width:auto; padding:6px 10px;}
  .block-vis-btn.on{color:var(--agency);}
  .block-vis-btn.off{color:var(--new); opacity:1;}

  .comment-list{display:flex; flex-direction:column; gap:2px;}
  .comment-item{display:flex; gap:8px; padding:8px 6px; border-radius:4px;}
  .comment-item.unread{background:var(--unread-bg);}
  .c-avatar{width:22px; height:22px; border-radius:50%; flex-shrink:0; font-size:10px; font-weight:600; display:flex; align-items:center; justify-content:center;}
  .role-ProjectAdmin{color:var(--admin); background:var(--admin-bg);}
  .role-Producer{color:var(--producer); background:var(--producer-bg);}
  .role-Agency{color:var(--agency); background:var(--agency-bg);}
  .role-Client{color:var(--client); background:var(--client-bg);}
  .comment-body{flex:1; min-width:0;}
  .comment-meta{font-size:12px; margin-bottom:2px;}
  .comment-meta b{font-weight:600;}
  .comment-text{font-size:14px; line-height:1.4;}
  .add-comment-row{display:flex; gap:8px; margin-top:8px; align-items:flex-start;}
  .add-comment-row textarea{flex:1;}
  .add-comment-send-btn{flex-shrink:0; padding:6px 8px;}

  .add-block-btn{color:var(--text-muted); font-size:13px; display:flex; align-items:center; gap:6px; margin-top:8px; position:relative;}
  .add-block-menu{
    position:absolute; top:32px; left:0; background:var(--surface); border:1px solid var(--border); border-radius:8px;
    box-shadow:0 4px 16px rgba(0,0,0,.08); padding:4px; z-index:20; width:220px;
  }
  .add-block-menu button{display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:none; padding:8px; font-size:13px;}

  /* ---------- GALLERY BLOCK ---------- */
  .gal-grid{display:flex; flex-wrap:wrap; gap:10px; padding:12px; --tile-h:200px;}
  .toolbar-label{font-size:13px; color:var(--text-secondary);}
  .gal-tile{border:1px solid var(--border); border-radius:6px; overflow:hidden; flex-shrink:0; min-width:140px;}
  .gal-tile.approved{border:2px solid var(--st-sel);}
  .approved-group{margin-bottom:8px;}
  /* Правки після рев'ю, п.1: чіткий бейдж статусу (Вибраний!/Бекап) поруч
     з ім'ям кандидата — той самий .status-badge/.badge-selected/.badge-backup,
     що вже фарбує статус у самій таблиці кандидатів (styles.css, спільні
     класи, не власні кастинг-специфічні). */
  .approved-card-info{display:flex; align-items:center; gap:6px; padding:4px 6px; max-width:var(--tile-h,200px);}
  .approved-card-label{font-size:11px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1;}
  .approved-status-badge{flex-shrink:0; font-size:10px; padding:1px 6px;}
  /* "Загальні матеріали" (правка власника 2026-08-02): тип-іконки
     документів, жирна клікабельна назва + (X.X MB), тайли/таблиця.
     Фірмові кольори типів — ЄДИНЕ місце з hex (UI-ГАЙД §1: hex лише тут). */
  .general-file-icon .icon{width:44px; height:44px;}
  /* Іконка по ЦЕНТРУ комірки (правка власника 2026-08-02): tile-square
     всередині general-тайла тягнеться на всю ширину плитки (біла смуга
     праворуч — саме від фіксованої квадратної ширини) і центрує вміст
     по обох осях. */
  .general-file-tile .gal-tile-media.tile-square{width:100%; justify-content:center; align-items:center;}
  /* Кошик на general-тайлі (правка власника 2026-08-02, друга ітерація):
     справа зверху ПОВЕРХ картинки, червоний одразу (не лише на ховер, як
     базовий .tile-delete-btn у контрол-рядах галерей). Підкладка --surface,
     щоб іконку було видно на будь-якому фото. Нотатки лишаються зліва
     зверху (.nt-tile-overlay) — кути не конфліктують. */
  .general-file-tile{position:relative;}
  .general-file-tile > .tile-delete-btn{
    position:absolute; top:6px; right:6px; z-index:3;
    color:var(--new); background:var(--surface);
    border-radius:6px; padding:3px;
  }
  .general-file-tile > .tile-delete-btn:hover{background:var(--hover); color:var(--new);}
  .file-icon-pdf{color:#d93025;}
  .file-icon-word{color:#185abd;}
  .file-icon-ppt{color:#c43e1c;}
  .file-icon-excel{color:#107c41;}
  .general-file-name{cursor:pointer; min-width:0;}
  .general-file-name b{font-weight:700;}
  .general-file-name:hover b{text-decoration:underline;}
  .general-file-size{color:var(--text-muted); font-weight:400;}
  .general-file-tile .approved-card-label{font-size:12px; color:var(--text);}
  .general-files-toolbar{display:flex; justify-content:flex-end; margin-bottom:8px;}
  .general-file-table{width:100%; border-collapse:collapse;}
  .general-file-table th{text-align:left; font-size:12px; color:var(--text-secondary); font-weight:600; padding:6px 10px; border-bottom:1px solid var(--border);}
  .general-file-table td{padding:7px 10px; border-bottom:1px solid var(--border); vertical-align:middle;}
  .general-file-row:hover{background:var(--hover);}
  .general-file-row.drag-over{outline:2px solid var(--accent); outline-offset:-2px;}
  .gf-col-drag{width:24px; color:var(--text-muted);}
  .gf-col-icon{width:34px;}
  .gf-col-icon .general-file-icon .icon{width:22px; height:22px;}
  .gf-col-uploader, .gf-col-date{color:var(--text-secondary); font-size:13px; white-space:nowrap;}
  .gf-col-notes{width:70px; white-space:nowrap;}
  .gf-col-del{width:40px; text-align:right;}
  @media (max-width:720px){ .gf-col-uploader, .general-file-table th:nth-child(5){display:none;} }
  /* "Загальні матеріали" (uploads) — файли без лайтбоксу, тож нотатки-
     бейдж+кнопка сидять прямо під плиткою, поряд з назвою файлу. */
  .gal-tile-media{
    height:var(--tile-h,120px); background:var(--tile-bg); display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:4px; cursor:pointer; color:var(--text-secondary); position:relative; overflow:hidden;
  }
  .gal-tile-media.tile-square{width:var(--tile-h,120px);}
  .gal-tile-media:hover{background:var(--tile-hover-bg);}
  .gal-tile-media span{font-size:10px;}
  /* зберігаємо оригінальні пропорції: висота фіксована, ширина — авто за aspect ratio картинки */
  .gal-tile-media img, .gal-tile-media video{height:100%; width:auto; max-width:480px; display:block; object-fit:contain;}
  /* "Повні картинки" — на всю ширину колонки, без обмеження висоти (не прев'ю) */
  .gal-feed-item:not(.tile-square) img, .gal-feed-item:not(.tile-square) video{width:100%; height:auto; object-fit:contain; display:block;}
  .gal-feed-item.tile-square img, .gal-feed-item.tile-square video{height:100%; width:auto; object-fit:contain; display:block;}
  .gal-controls{display:flex; flex-direction:column; gap:4px; padding:4px 6px; border-top:1px solid var(--border); background:var(--panel-bg);}
  .gal-controls.full{padding:10px; gap:8px;}
  .gal-rating-row, .gal-appr-row{display:flex; align-items:center; gap:6px;}
  .ctrl-label{font-size:11px; color:var(--text-secondary); white-space:nowrap;}
  .gal-controls.full .ctrl-label{font-size:13px;}
  .gal-rating-select{font-size:11px; padding:2px 4px; min-width:0;}
  .gal-controls.full .gal-rating-select{font-size:13px; padding:5px 8px;}
  .rating-other{font-size:11px; color:var(--text-secondary); white-space:nowrap;}
  .gal-controls.full .rating-other{font-size:13px;}
  .appr-group{display:flex; gap:4px;}
  .appr-btn{
    width:20px; height:20px; padding:0; font-size:10px; font-weight:600; border-radius:50%;
    display:flex; align-items:center; justify-content:center; color:var(--text-muted); background:var(--surface); border:1px solid var(--border);
  }
  .gal-controls.full .appr-btn{width:28px; height:28px; font-size:12px;}
  .appr-btn:disabled{cursor:default;}
  .appr-btn.appr-ProjectAdmin.on{background:var(--admin-bg); border-color:var(--admin); color:var(--admin);}
  .appr-btn.appr-Producer.on{background:var(--producer-bg); border-color:var(--producer); color:var(--producer);}
  .appr-btn.appr-Agency.on{background:var(--agency-bg); border-color:var(--agency); color:var(--agency);}
  .appr-btn.appr-Client.on{background:var(--client-bg); border-color:var(--client); color:var(--client);}
  .gal-tile[draggable="true"], .gal-feed-wrap[draggable="true"]{cursor:grab;}
  .gal-feed{display:flex; flex-direction:column; gap:16px; padding:12px;}
  .gal-feed-wrap{border:1px solid var(--border); border-radius:8px; overflow:hidden; width:100%;}
  .gal-feed-wrap.approved{border:2px solid var(--st-sel);}
  .gal-feed-item{
    width:100%; min-height:200px; background:var(--tile-bg); border-radius:8px; border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; color:var(--text-secondary); cursor:pointer; position:relative; overflow:hidden;
  }
  .gal-feed-item.tile-square{width:200px; height:200px;}
  .gal-feed-wrap .gal-feed-item{border:none; border-radius:0;}
  .gal-feed-item:hover{background:var(--tile-hover-bg);}
  .gal-add-row{padding:0 12px 12px;}
  .modal-gallery-controls{padding:12px 16px; border-bottom:1px solid var(--border);}
  .modal-gallery-controls .gal-controls{border-top:none; background:transparent; padding:0;}

  /* ---------- GALLERY MULTI-FILE DROP UPLOAD ---------- */
  .gal-dropzone{transition:outline-color .12s, background .12s;}
  .gal-dropzone.drag-over{outline:2px dashed var(--drop-highlight); outline-offset:-2px; background:var(--drop-highlight-bg);}
  .gal-drop-hint{padding:6px 12px; font-size:12px; color:var(--text-muted); border-bottom:1px solid var(--border);}
  .gal-uploading-overlay{
    position:absolute; inset:0; background:rgba(0,0,0,.45); color:#fff; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:6px; font-size:11px; text-align:center; padding:4px;
  }
  .gal-spinner{
    width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
    animation:gal-spin .7s linear infinite;
  }
  @keyframes gal-spin{ to{ transform:rotate(360deg); } }

  /* ---------- BLOCK DELETE ---------- */
  .block-delete-btn{
    position:absolute; top:0; right:0; opacity:0; transition:opacity .15s; width:26px; height:26px;
    padding:0; display:flex; align-items:center; justify-content:center; background:var(--surface); z-index:5;
  }
  .block:hover .block-delete-btn{opacity:1;}
  .block-delete-btn.static{position:static; opacity:1; width:auto; padding:6px 10px;}
  .ic-toolbar-actions{display:flex; align-items:center; gap:6px;}

  /* ---------- MODAL / LIGHTBOX ---------- */
  #modal-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:100;
  }
  .modal-card{background:var(--surface); border-radius:12px; width:auto; min-width:460px; max-width:96vw; max-height:94vh; display:flex; flex-direction:column; overflow:hidden;}
  .modal-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); flex-shrink:0;}
  .modal-head b{font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex-shrink:0;}
  .modal-head-title{display:flex; align-items:baseline; gap:10px; min-width:0; overflow:hidden;}
  .modal-head-filename{font-size:12px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
  .modal-head-actions{display:flex; align-items:center; gap:8px; flex-shrink:0;}
  .modal-columns{display:flex; flex:1; min-height:0;}
  .modal-media-col{flex:1; min-width:0; display:flex; flex-direction:column; overflow-y:auto;}
  .modal-media{
    /* Було flex-shrink:0 + max-height:60vh фіксовано — вертикальне фото завжди
       виходило дрібним, бо висота обмежувалась 60vh незалежно від того, скільки
       реально вільного місця дає .modal-card (max-height:94vh). Тепер росте на
       всю доступну висоту колонки (flex:1), а .modal-card/.modal-columns і так
       тримають зовнішню стелю — переповнення саме скролиться (.modal-media-col
       має overflow-y:auto). */
    min-height:200px; flex:1; background:var(--tile-bg); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); overflow:hidden;
    position:relative;
  }
  .modal-media img, .modal-media video{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; background:#000;}
  /* Правки після рев'ю, п.7: стрілки ліво/право — гортають сусідні
     медіа тієї ж сутності (кандидата чи gallery-блоку). */
  .modal-media-nav{
    position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); color:#fff; z-index:3;
  }
  .modal-media-nav:hover{background:rgba(0,0,0,.7);}
  .modal-media-nav-prev{left:10px;}
  .modal-media-nav-next{right:10px;}
  .modal-comments-col{width:300px; flex-shrink:0; border-left:1px solid var(--border); display:flex; flex-direction:column; min-height:0;}
  .modal-comments-col .comment-list{flex:1; overflow-y:auto; padding:14px 16px;}
  .modal-comments-col .add-comment-row{padding:12px 16px; border-top:1px solid var(--border); flex-shrink:0;}
  .modal-body{padding:14px 16px; overflow-y:auto; max-height:40vh;}
  /* УХ-уніфікація (ТЗ_Уніфікація_UI, п.2.1): єдиний футер попапа —
     [Видалити (danger) зліва] ... [Зберегти (primary) справа]. «Зберегти»
     завжди закриває попап (редагування і так автозберігається). */
  .modal-foot{display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--border); flex-shrink:0;}
  .modal-foot-spacer{flex:1;}
  .modal-foot button.primary{min-width:120px;}
  /* Уніфікований попап підтвердження (заміна браузерного confirm()). */
  .confirm-card{min-width:320px; max-width:440px;}
  .confirm-card .modal-body{font-size:14px; max-height:none; white-space:pre-wrap;}
  @media (max-width:640px){
    /* Базовий .modal-card має min-width:460px — на вузьких телефонах це переважає
       над max-width:96vw і розпирає модалку за межі екрана (item 8/10 УХ-правок:
       вікно вибору кадрів Сторіборда і попап "Використано в Плануванні"). Знімаємо
       мінімум лише на мобільному — інлайнові width:340-480px кожної модалки й так
       коректні, max-width:96vw далі підстраховує зовсім вузькі екрани. */
    .modal-card{min-width:0;}
    .modal-columns{flex-direction:column; overflow-y:auto;}
    .modal-comments-col{width:auto; border-left:none; border-top:1px solid var(--border);}
    /* Колонки складені вертикально — flex:1 на .modal-media тут би розтягнув фото
       без стелі (сусід знизу не обмежує висоту так, як бічна колонка в desktop-
       розкладці). Явна стеля лишає коментарі видимими без скролу на весь екран. */
    .modal-media{flex:0 0 auto; max-height:60vh;}
    /* На мобільному 40px бічних відступів "з'їдають" левову частку екрана — звужуємо
       їх заразом із max-width, інакше 99% контейнера все одно виглядав би вузько. */
    #canvas{max-width:99%; padding:20px 8px 80px;}
    /* Той самий принцип — і всередині самих блоків (картка таблиці зйомки, галерея):
       великий внутрішній padding так само "з'їдає" відсоток ширини, як і зовнішній.
       Кваліфікатор "body" піднімає специфічність — інакше програє базовому правилу
       .shoot-table-block{padding:14px}, яке в файлі йде ПІЗНІШЕ за цей media-блок. */
    body .shoot-table-block{padding:8px 4px;}
    body .gal-grid{padding:6px;}
    /* Rich-text панель (Ж/К/H1-H3/список) над текстовими блоками — на мобільному
       прибирається повністю, лишається лише звичайне текстове поле для вводу. */
    .text-toolbar{display:none;}
    /* Час старту/кінця, № і Тривалість на вузькому екрані займають непропорційно
       багато місця. !important — інакше програють інлайновому width з colgroup.
       Картинку НЕ чіпаємо тут !important-ом: інакше він назавжди перебиває
       інлайновий --shoot-img-h, і кнопки +/- зуму картинки візуально перестають
       щось міняти на мобільному. Менший стартовий розмір картинки на мобільному
       задається через JS-дефолт у initShootImageHeight() — це залишає звичайний
       інлайн-механізм (і зум) повністю робочим. */
    .shoot-col-number-col{width:48px !important;}
    .shoot-col-duration-col{width:42px !important;}
    .shoot-col-timeStart-col, .shoot-col-timeEnd-col{width:42px !important;}
    /* Заголовки сторінки й текстових блоків на мобільному менші й з меншими
       відступами зверху/знизу — на вузькому екрані великі desktop-відступи
       займають непропорційно багато вертикального простору. */
    .folder-page-title{margin-bottom:10px;}
    .folder-page-title h1{font-size:18px;}
    .block-text{padding:2px 2px;}
    .block-text h1{font-size:19px; margin:6px 0 2px;}
    .block-text h2{font-size:16px; margin:5px 0 2px;}
    .block-text h3{font-size:14px; margin:4px 0 1px;}
  }

  /* ---------- COMMENTS FEED ---------- */
  .feed-toolbar{display:flex; gap:8px; margin-bottom:16px;}
  .feed-item{border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin-bottom:10px; position:relative;}
  .feed-item.unread{border-color:var(--new);}
  .feed-item .comment-item{padding:0;}
  .feed-thumb{position:relative; flex-shrink:0; width:44px; height:44px; border-radius:6px; overflow:hidden; background:var(--tile-bg,var(--border)); display:flex; align-items:center; justify-content:center;}
  .feed-thumb img, .feed-thumb video{width:100%; height:100%; object-fit:cover;}
  .feed-thumb .media-type-badge{width:20px; height:20px; border-radius:5px; top:50%; left:50%; transform:translate(-50%,-50%);}
  .feed-thumb .media-type-badge svg{width:11px; height:11px;}
  .feed-target-link{font-size:13px; color:var(--text-secondary); margin-top:8px; cursor:pointer; display:flex; align-items:center; gap:6px;}
  .feed-target-link:hover{color:var(--text); text-decoration:underline;}

  /* ---------- СТОРІБОРД: список сторінок ---------- */
  .storyboard-list-create-bar{display:flex; justify-content:center; margin-bottom:18px;}
  .storyboard-list{border:1px solid var(--border); border-radius:8px; overflow:hidden;}
  /* border-bottom тепер на .storyboard-list-item (рядок+прев'ю-стрічка разом), а не на
     самому .storyboard-list-row — інакше стрічка прев'ю опинялась би ПІСЛЯ роздільника
     наступного сторіборду. */
  /* Чіткий роздільник між сторібордами (рев'ю власника) — товщий і видимий
     (var(--text-secondary)), замість ледь помітного 1px var(--border). */
  .storyboard-list-item{border-bottom:2px solid var(--text-secondary);}
  .storyboard-list-item:last-child{border-bottom:none;}
  .storyboard-list-row{display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer;}
  .storyboard-list-row:hover{background:var(--panel-bg);}
  .storyboard-list-icon{color:var(--text-secondary); flex-shrink:0; display:flex;}
  .storyboard-list-name{font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .storyboard-list-count{font-size:12px; color:var(--text-secondary); white-space:nowrap;}
  .storyboard-list-zoom{display:flex; gap:2px; flex-shrink:0;}
  .storyboard-list-zoom button{width:22px; height:22px; padding:0; font-size:14px; line-height:1;}
  .storyboard-list-preview-strip{display:flex; gap:8px; flex-wrap:wrap; padding:0 14px 12px; cursor:pointer;}
  .storyboard-list-preview-tile{flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:2px;}
  .storyboard-list-preview-tile img{height:var(--sb-preview-h, 100px); width:auto; max-width:240px; object-fit:contain; background:var(--tile-bg); border-radius:4px; display:block;}
  .storyboard-list-preview-empty{height:var(--sb-preview-h, 100px); width:var(--sb-preview-h, 100px); display:flex; align-items:center; justify-content:center; background:var(--tile-bg); border-radius:4px; color:var(--text-muted);}
  .storyboard-list-preview-chron{font-size:10px; color:var(--text-muted); white-space:nowrap;}

  /* ---------- КАСТИНГ: ролі -> кандидати (окрема сторінка, storyboard-подібна) ---------- */
  /* Правки після рев'ю, п.13: опис ролі — тепер contenteditable rich-editor
     (.block-text — спільний клас з canvas text-block у app.js), не
     textarea. Рамка тут — лише щоб поле лишалось візуально відокремленим
     полем, як і раніше; сам текстовий вигляд дає .block-text. */
  .casting-role-desc-block{margin-bottom:16px;}
  .casting-role-desc{min-height:60px; border:1px solid var(--border); border-radius:8px; padding:10px 12px;}
  /* 3 колонки: ліва група тягнеться, центральна (сортування) стоїть РІВНО
     по центру екрана, права (друк) — праворуч. Правка власника 2026-07-30
     «Сортування — по центру екрану»: у попередньому flex-рядку селект просто
     плив за шириною кнопок ліворуч. На вузькому екрані — знову один стовпець. */
  .casting-cand-toolbar{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin-bottom:12px;}
  .casting-cand-toolbar-left{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  /* Правка власника 2026-07-31: фільтр-статус переїхав сюди, поруч із
     сортуванням — раніше жив у toolbar-left разом з кнопками Додати/ZIP і на
     мобільному (grid у 1 колонку) опинявся на СВОЄМУ рядку окремо від
     сортування (обидва select — "два випадалки" — виходили на різних рядках).
     Тепер обидва select в одній flex-групі — одна строка на типовій мобільній
     ширині, wrap лишається як запобіжник, якщо колись НЕ влізуть. */
  .casting-cand-toolbar-center{display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap;}
  .casting-cand-toolbar-right{display:flex; justify-content:flex-end; align-items:center; gap:10px;}
  @media (max-width:640px){
    .casting-cand-toolbar{grid-template-columns:1fr;}
    .casting-cand-toolbar-center, .casting-cand-toolbar-right{justify-content:flex-start;}
  }

  /* Розділювач між акторами — контрастніший за глобальний 1px --border
     (правка власника 2026-07-30). Лише в таблиці кандидатів Кастингу:
     глобальний .item-row використовують і Список, і клони-каталоги, де
     товста лінія на кожен рядок була б галасом.
     ⚠️ :not(...) на три кольорові класи ОБОВ'ЯЗКОВИЙ: .cand-row-selected/
     backup/director малюють рамку СВОГО кольору правилом специфічності
     0,1,0, а цей селектор — 0,2,0, тож без винятку сірий border-bottom
     зрізав би низ зеленої/жовтої/синьої рамки (той самий клас багу, що вже
     фіксили 2026-07-29 для .item-row:last-child). */
  .cand-table-body > .item-row:not(.cand-row-selected):not(.cand-row-backup):not(.cand-row-director){
    border-bottom:2px solid var(--text-secondary);
  }
  .cand-table-body > .item-row:not(.cand-row-selected):not(.cand-row-backup):not(.cand-row-director):last-child{
    border-bottom:none;
  }
  /* Правки після рев'ю, п.11-12: рядок-заголовок над таблицею кандидатів —
     зліва toggle "згорнути/розгорнути всіх" (та сама іконка-шеврон, що в
     рядку кандидата), справа +/- розміру фото (shootHeaderWithZoom,
     той самий спільний віджет, що Планування/Сторіборд). */
  .cand-table-header{display:flex; align-items:center; gap:12px; padding:4px 0 8px; border-bottom:1px solid var(--border); margin-bottom:8px;}
  /* Правка власника 2026-07-29: +/- розміру фото — у ПРАВІЙ частині рядка
     і БІЛЬШІ за базові 15px кнопки зум-рядків таблиць Планування. */
  .cand-table-header .shoot-th-zoom-row{margin-top:0;}
  /* Правка власника 2026-07-29: підписи в рядку-заголовку — "згорнути все \
     розгорнути все" праворуч від чеврона і "Задати розмір фото в таблиці:"
     перед +/- (сам підпис і тягне зум-групу вправо через margin-left:auto). */
  .cand-toggle-all-btn{display:inline-flex; align-items:center; gap:6px;}
  .cand-toggle-all-label{font-size:13px; color:var(--text-secondary);}
  .cand-photo-size-label{margin-left:auto; font-size:13px; color:var(--text-secondary);}
  .cand-table-header .shoot-img-zoom-btn{width:28px; height:28px; font-size:18px; border-radius:6px;}
  /* Баг (правки після рев'ю, раунд 2): +/- НЕ впливали на розмір фото в
     таблиці. Причина — .gal-grid{--tile-h:200px;} (рядок вище, спільний
     для generic "Список"/галереї/кандидатів) сам ЗАДЕКЛАРОВАНИЙ на тому ж
     елементі, тож перекриває будь-яке успадковане з предка значення —
     inline-стиль на .cand-table-body тут не конкурент, бо стоїть на ІНШОМУ
     елементі. Фікс: власна CSS-змінна --cand-photo-size (не --tile-h,
     щоб не плутати) + перевизначення --tile-h ЛИШЕ для .gal-grid УСЕРЕДИНІ
     .cand-table-body — специфічність (0,2,0) б'є (0,1,0) generic-правила
     незалежно від порядку в файлі. */
  .cand-table-body .gal-grid{--tile-h: var(--cand-photo-size);}
  /* Правки після рев'ю, п.4: верхній padding .item-row-body (спільний з
     generic "Список") тягнемо до нуля саме для таблиці кандидатів — там
     раніше ще й стояв порожній рядок апрувів (звідси й "великий відступ"),
     якого відтоді прибрано зовсім (п.3, 2026-07-23); Локації/Одяг/Реквізит
     не чіпаємо. */
  .cand-table-body .item-row-body{padding-top:0;}
  /* Правки після рев'ю, п.1: ім'я кандидата — суттєво більше й жирне (було
     500/успадкований розмір ~15px, губилось поруч зі статус-бейджем). */
  .cand-name{font-weight:700; font-size:18px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer;}
  .cand-name-input{font-weight:700; font-size:18px; flex:1; min-width:0; background:transparent; color:inherit; font-family:inherit;
    border:none; border-bottom:1px solid var(--border);}
  .cand-name-input:focus{outline:none;}
  .cand-ratings{display:flex; align-items:center; gap:4px;}
  .cand-ratings .gal-rating-select{font-size:12px; padding:2px 4px;}
  .cand-ratings .rating-other{font-size:11px;}
  .gal-tile.is-main-photo{outline:2px solid var(--st-sel);}
  /* Правки після рев'ю, п.3: компактна кругла кнопка додавання фото/відео —
     фіксований розмір, не масштабується з --cand-photo-size (тайл на всю
     висоту зуму фото виглядав як окрема велика "картка" наприкінці ряду). */
  .cand-add-media-btn{
    width:44px; height:44px; border-radius:50%; border:1px dashed var(--border); background:transparent;
    display:flex; align-items:center; justify-content:center; color:var(--text-muted); cursor:pointer; flex-shrink:0;
  }
  .cand-add-media-btn:hover{background:var(--tile-hover-bg); color:var(--text);}
  .cand-add-media-btn svg{width:18px; height:18px;}
  /* Правки після рев'ю, п.6: статус "Вибраний!" — рядок кандидата обводиться
     зеленим, ім'я отримує зелений фон-пігулку (той самий --st-sel, що й
     бейдж статусу/is-main-photo вище). */
  .cand-row-selected{border:2px solid var(--st-sel); border-radius:8px; margin-bottom:4px;}
  .cand-row-selected .cand-name{background:var(--st-sel-bg); border-radius:6px; padding:2px 8px;}
  /* Правка власника 2026-07-28: Бекап і Вибір режисера — теж рамки своїх
     кольорів (ті самі токени, що бейджі статусів). */
  .cand-row-backup{border:2px solid var(--st-backup); border-radius:8px; margin-bottom:4px;}
  .cand-row-backup .cand-name{background:var(--st-backup-bg); border-radius:6px; padding:2px 8px;}
  .cand-row-director{border:2px solid var(--st-director); border-radius:8px; margin-bottom:4px;}
  .cand-row-director .cand-name{background:var(--st-director-bg); border-radius:6px; padding:2px 8px;}
  /* БАГ-ФІКС (2026-07-29): .item-row:last-child{border-bottom:none} має вищу
     специфічність (клас+псевдоклас) за .cand-row-* і зрізав нижню лінію рамки
     ОСТАННЬОГО кандидата — повертаємо її явно для всіх трьох кольорів. */
  .item-row.cand-row-selected:last-child{border-bottom:2px solid var(--st-sel);}
  .item-row.cand-row-backup:last-child{border-bottom:2px solid var(--st-backup);}
  .item-row.cand-row-director:last-child{border-bottom:2px solid var(--st-director);}
  /* Картка актора (2026-07-29) */
  .actor-card-photo{display:flex; justify-content:center; margin-bottom:12px;}
  .actor-card-photo img{max-height:220px; max-width:100%; width:auto; object-fit:contain; border-radius:8px;}
  .actor-card-row{display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap;}
  .actor-card-actions{display:flex; justify-content:space-between; gap:10px; margin-top:14px;}
  .actor-card-actions-left{display:flex; gap:8px;}
  /* Зона введення коментаря під кнопками картки актора (правка власника
     2026-07-29): відокремлена лінією, щоб не читалась як частина футера. */
  .actor-card-comment{margin-top:14px; padding-top:12px; border-top:1px solid var(--border);}
  .actor-card-comment .add-comment-row{margin:0;}
  .copy-to-label{font-weight:700; margin-bottom:6px;}
  .cand-special-notes{margin:10px 0 4px; font-size:13px;}
  .actor-card-actions .danger{background:#dc2626; color:#fff; border-color:#dc2626;}
  /* Правки 2026-07-29 (2-5): попап на повну потрібну висоту (базовий
     .modal-body обрізає 40vh), жирні підписи, клікабельне фото, лайтбокс. */
  .actor-card-modal .modal-body{max-height:calc(94vh - 60px);}
  .actor-card-modal .field label{font-weight:700;}
  .actor-card-label{font-weight:700; font-size:13px;}
  .actor-card-photo{cursor:zoom-in;}
  #actor-card-lightbox{position:fixed; inset:0; z-index:1300; background:rgba(0,0,0,.8);
    display:flex; align-items:center; justify-content:center; gap:12px;}
  #actor-card-lightbox .acl-stage{max-width:86vw; max-height:90vh; display:flex; flex-direction:column; align-items:center; gap:8px;}
  /* Обгортка САМЕ навколо фото/відео (не всієї сцени з панеллю знизу) —
     щоб .nt-tile-overlay (position:absolute) сідав точно в лівий верхній
     кут знімка, а не сцени. */
  #actor-card-lightbox .acl-photo-wrap{position:relative; display:inline-block; max-width:86vw; max-height:82vh;}
  #actor-card-lightbox .acl-stage img, #actor-card-lightbox .acl-stage video{max-width:86vw; max-height:82vh; object-fit:contain; border-radius:8px;}
  #actor-card-lightbox .acl-bar{display:flex; align-items:center; gap:12px; color:#fff; font-size:13px;}
  #actor-card-lightbox .acl-bar .acl-star{color:#fff;}
  /* Правка 2026-07-29: за замовчуванням зірка ЛИШЕ контур (біла), обрана —
     золота заливка (iconStar(true)); перед нею жирний підпис. */
  #actor-card-lightbox .acl-bar .acl-star.on{color:#f5b301;}
  #actor-card-lightbox .acl-main-label{font-weight:700; color:#fff;}
  #actor-card-lightbox .acl-arrow{background:rgba(255,255,255,.15); border:none; color:#fff; border-radius:50%;
    width:40px; height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
  #actor-card-lightbox .acl-arrow:hover{background:rgba(255,255,255,.3);}
  #actor-card-lightbox .acl-close{position:absolute; top:14px; right:16px; background:none; border:none; color:#fff; cursor:pointer;}
  #actor-card-lightbox .acl-close svg{width:22px; height:22px;}
  .main-photo-badge{position:absolute; top:6px; left:6px; color:#f5b301; background:var(--surface); border-radius:50%;
    width:20px; height:20px; display:flex; align-items:center; justify-content:center; z-index:2;}
  .main-photo-badge svg{width:14px; height:14px;}

  /* ---------- НОТАТКИ: бейдж і кнопка (глобально) ----------
     ⚠️ Ці стилі МАЮТЬ бути тут, а не в styleBlock() модуля notes: бейджі
     малюються ВСЕРЕДИНІ чужих модулів (кастинг, галерея, задачі...), а
     styleBlock вставляється лише коли рендериться сам модуль Нотаток —
     тобто до 2026-07-29 бейджі в інших модулях були взагалі без стилів.
     Колір — той самий золотий, що зірка головного фото (правка власника:
     «іконка нотаток жовта ВСЮДИ»). */
  /* Розмір іконки НАЯВНОЇ нотатки — 22px (×1.5 від 15px, правка власника
     2026-07-30: «іконка нотатки, коли вона є — збільшити в 1.5 рази»).
     Кнопка «додати» лишається 15px: вона не позначка, а дія, і множилась би
     шумом на кожному рядку без нотаток. */
  .nt-badge{display:inline-flex; align-items:center; gap:3px; cursor:pointer; color:#f5b301; font-size:13px; font-weight:600;}
  .nt-badge svg{width:22px; height:22px;}
  /* Кнопка СТВОРЕННЯ нотатки — СІРА, не жовта (правка власника 2026-07-30:
     «іконка створення нотатки має бути сіра. Тільки самі нотатки стають
     жовтими»). Жовтий у .nt-badge означає «тут ВЖЕ є нотатка(и)» — та сама
     семантика, що зірка головного фото; кнопка «додати» ще нічого не
     означає, тож нейтральний колір, як решта ghost-іконок дій. */
  .nt-add-btn{display:inline-flex; align-items:center; color:var(--text-secondary);}
  .nt-add-btn svg{width:15px; height:15px;}
  .nt-add-btn:hover{color:var(--text);}

  /* Оверлей-контейнер для плиток БЕЗ лайтбокса (Загальні матеріали): бейдж
     і кнопка «додати» поруч у лівому верхньому куті знімка. */
  .nt-tile-overlay{position:absolute; top:6px; left:6px; z-index:3; display:flex; align-items:center; gap:4px;}
  .nt-tile-overlay .nt-badge,
  .nt-tile-overlay .nt-add-btn{background:rgba(0,0,0,.55); border-radius:11px; height:22px; padding:0 7px; gap:2px;}
  .nt-tile-overlay .nt-badge{color:#f5b301;}
  .nt-tile-overlay .nt-add-btn{color:#ccc;}
  .nt-tile-overlay .nt-badge svg{width:16px; height:16px;}

  /* На ФОТО/відео бейдж — оверлей у ЛІВОМУ куті, за зразком іконки
     видалення (вона top-right). Кружечок із підкладкою, щоб іконка
     читалась на будь-якому знімку. */
  .gal-tile-media > .nt-badge,
  .gal-feed-item > .nt-badge{
    position:absolute; top:6px; left:6px; z-index:3; gap:2px;
    background:rgba(0,0,0,.55); border-radius:11px; height:22px; padding:0 7px; color:#f5b301;
  }
  .gal-tile-media > .nt-badge svg,
  .gal-feed-item > .nt-badge svg{width:16px; height:16px;}
  /* Якщо на плитці вже є зірка «головне фото» (теж top-left) — зсуваємо
     бейдж нотатки правіше, щоб не накладались. Загальний сусідній
     комбінатор працює, бо в розмітці зірка йде РАНІШЕ за бейдж. */
  .main-photo-badge ~ .nt-badge{left:34px;}

  /* Кадр сторіборду: бейдж — ТРЕТЯ дитина .sb-shot-top-left (див. розмітку
     renderStoryboardShotCard), тобто той самий лівий ВЕРХНІЙ кут, що й
     решта фото (правка власника 2026-07-30 — раніше був нижній). Позиція
     від flex-батька, тут лише вигляд «пігулки». */
  .sb-shot-top-left > .nt-badge{
    gap:2px; background:rgba(0,0,0,.55); border-radius:11px; height:22px; padding:0 7px; color:#f5b301;
  }
  .sb-shot-top-left > .nt-badge svg{width:16px; height:16px;}
  @media print{ .nt-badge, .nt-add-btn{display:none;} }

  /* ---------- СТОРІБОРД: дошка кадрів ---------- */
  .storyboard-toolbar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
  .storyboard-toolbar-left{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
  .storyboard-toolbar-actions{display:flex; align-items:center; gap:6px;}
  /* Перемикач вигляду (тайли/таблиця) — КАНОН. Був лише в Сторіборді,
     Нотатки скопіювали його у свій styleBlock, а Проекти стали третім
     споживачем — за UI-ГАЙД §6.3 такий стиль переїжджає в styles.css під
     нейтральним ім'ям. .storyboard-view-toggle лишається аліасом, щоб не
     чіпати наявну розмітку. */
  .view-toggle, .storyboard-view-toggle{display:flex; border:1px solid var(--border); border-radius:6px; overflow:hidden;}
  .view-toggle button, .storyboard-view-toggle button{border-radius:0; padding:5px 8px;}
  .view-toggle button.active, .storyboard-view-toggle button.active{background:var(--panel-bg); color:var(--text);}
  .storyboard-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px;}
  .storyboard-grid[data-zoom="1"]{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));}
  .storyboard-grid[data-zoom="2"]{grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));}
  .storyboard-grid[data-zoom="3"]{grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));}
  .storyboard-grid[data-zoom="4"]{grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));}
  .sb-shot-card{border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--surface); display:flex; flex-direction:column;}
  .sb-shot-card[draggable="true"]{cursor:grab;}
  .sb-shot-card[draggable="true"]:active{cursor:grabbing;}
  /* Підсилена індикація drop-зони (УХ-правка 4 — попередній тонкий сірий outline
     губився серед карток): товщий кольоровий outline + легке збільшення картки. */
  .sb-shot-card.sb-shot-drag-over{outline:3px solid var(--primary-bg); outline-offset:3px; transform:scale(1.02); transition:transform .1s ease; position:relative; z-index:2;}
  .sb-shot-image-wrap{position:relative; width:100%; background:var(--tile-bg); overflow:hidden;}
  .sb-shot-image-wrap img{width:100%; height:100%; object-fit:contain; display:block;}
  .sb-shot-image-empty{width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--text-muted); min-height:120px;}
  /* Раніше номер (.sb-shot-index) і кольоровий квадратик (.sb-shot-color) сиділи
     кожен на своєму жорсткому position:absolute (left:6px / left:30px) — коли до
     номера додали іконку drag-handle, бейдж номера став ширшим за ці 24px різниці,
     і колір почав налазити на нього (УХ-правка item 11). Тепер обидва — звичайні
     flex-діти спільної обгортки .sb-shot-top-left, що сама одна absolute — відстань
     між ними завжди природна, скільки б місця не займав номер/іконка. */
  .sb-shot-top-left{position:absolute; top:6px; left:6px; display:flex; align-items:center; gap:6px; z-index:2;}
  .sb-shot-index{min-width:18px; height:18px; padding:0 4px; border-radius:4px; background:rgba(0,0,0,.55); color:#fff; font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:2px;}
  .sb-shot-index .icon{width:11px; height:11px; cursor:grab;}
  .sb-shot-menu{position:absolute; top:6px; right:6px;}
  .sb-shot-menu-btn{background:var(--surface); border-radius:6px; padding:3px;}
  .sb-shot-menu-dropdown{
    position:absolute; top:26px; right:0; z-index:30; display:flex; flex-direction:column; min-width:160px; padding:4px;
    background:var(--surface); border:1px solid var(--border); border-radius:6px; box-shadow:0 4px 16px rgba(0,0,0,.12);
  }
  .sb-shot-menu-dropdown button{text-align:left; padding:3px 8px; line-height:1.3; border-radius:4px; font-size:12px; background:none; border:none; color:var(--text); cursor:pointer;}
  .sb-shot-menu-dropdown button:hover{background:var(--panel-bg);}
  .sb-shot-menu-dropdown button.sb-shot-menu-delete{color:var(--new);}
  /* Класична анатомія панелі сторіборду: кадр (зображення) + суміжний, але візуально
     відокремлений інфо-блок під ним — межа тут навмисна, щоб картинка й підпис читалися
     як два чіткі шари, а не зливались (по референсу brianlemay.com/StudioBinder). */
  .sb-shot-info{border-top:1px solid var(--border);}
  /* Клікабельний текст замість завжди-видимого поля вводу — той самий патерн, що
     .shoot-row td input у Плануванні: прозора рамка/фон у стані спокою, рамка/фон
     проявляються лише на ховер/фокус. Специфічність "input[type=text].sb-shot-title"
     навмисно вища за базове "input[type=text]{border:1px solid var(--border)}" (рядок 83) —
     інакше прозора рамка тут не переб'є завжди-видиму базову (той самий трюк, що вже
     є для .sb-table-title-input нижче). */
  input[type="text"].sb-shot-title{border:1px solid transparent; border-radius:4px; background:transparent; font-size:13px; font-weight:500; padding:6px 8px; color:var(--text); width:100%; box-sizing:border-box;}
  input[type="text"].sb-shot-title:hover, input[type="text"].sb-shot-title:focus{outline:none; border-color:var(--border); background:var(--surface);}
  .storyboard-grid[data-zoom="3"] .sb-shot-title{font-weight:700;}
  .sb-shot-desc{border:none; background:none; font-size:12px; color:var(--text-secondary); padding:2px 10px 10px; width:100%; resize:vertical; min-height:36px; font-family:inherit;}
  .sb-shot-desc:focus{outline:none;}
  .sb-shot-plain-field{width:100%;}
  .sb-shot-plain-field label{display:block; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); padding:6px 10px 0;}
  .sb-shot-plain-field .sb-shot-desc{padding-top:0;}
  .sb-shot-chron-caption{text-align:center; font-size:11px; color:var(--text-muted); padding:6px 10px;}
  /* Scene-Shot ("1-B") зліва від хрону, жирним (УХ-правка) — .sb-chron-row лишається
     як є (own padding), обгортка лише вирівнює бейдж з ним в один рядок. */
  .sb-scene-chron-row{display:flex; align-items:center; gap:6px;}
  .sb-scene-shot-badge{font-weight:700; font-size:12px; color:var(--text); padding:0 0 0 10px; white-space:nowrap;}
  .sb-chron-row{display:flex; align-items:center; gap:4px; padding:0 10px 6px; font-size:12px; color:var(--text-secondary);}
  /* Хвилини — під 1 цифру, секунди — під 2 (УХ-правка item 10: раніше обидва поля
     були 34-46px і виглядали занадто довгими). Приховуємо стрілки number-інпута —
     інакше вони самі займають більше місця, ніж лишається під цифру. */
  .sb-chron-row input{width:16px; font-size:12px; padding:2px 3px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); text-align:center;
    -moz-appearance:textfield;}
  .sb-chron-row input::-webkit-inner-spin-button, .sb-chron-row input::-webkit-outer-spin-button{-webkit-appearance:none; margin:0;}
  .sb-chron-row input:last-of-type{width:22px;}
  /* Хрон на картці — те саме прозоре "текст-до-кліку" оформлення, що й Назва;
     у лайтбоксі (renderStoryboardChronControl(...,'lightbox')) лишається завжди
     видима рамка — там це деталізоване вікно редагування, не компактна картка. */
  .sb-shot-card .sb-chron-row input{border-color:transparent; background:transparent;}
  .sb-shot-card .sb-chron-row input:hover, .sb-shot-card .sb-chron-row input:focus{outline:none; border-color:var(--border); background:var(--surface);}
  /* Технічний підпис (компактний підсумок полів) відокремлений пунктирною межею від
     довільного тексту назви/опису вище — той самий поділ "action vs. tech notes", що
     й у класичному інфо-блоці панелі. */
  .sb-shot-compact-summary{padding:8px 10px 10px; margin-top:4px; border-top:1px dashed var(--border); font-size:11px; color:var(--text-muted); line-height:1.5;}
  .sb-new-shot-tile{
    border:2px dashed var(--border); border-radius:8px; display:flex; align-items:center; justify-content:center;
    min-height:160px; cursor:pointer; color:var(--text-muted);
  }
  .sb-new-shot-tile:hover{border-color:var(--text-secondary); color:var(--text-secondary);}
  .sb-new-shot-inner{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:13px;}
  .storyboard-archive-row{display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--border);}
  .storyboard-archive-row:last-child{border-bottom:none;}
  .storyboard-archive-row img{width:44px; height:44px; object-fit:cover; border-radius:4px; background:var(--tile-bg); flex-shrink:0;}
  .storyboard-archive-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px;}

  /* ---------- СТОРІБОРД: гнучкі поля (масштаб 3, панель "Налаштувати поля") ---------- */
  .sb-shot-fields{padding:10px 10px 10px; margin-top:4px; border-top:1px dashed var(--border); display:flex; flex-direction:column; gap:8px;}
  .sb-field{display:flex; flex-direction:column; gap:3px;}
  .sb-field label{font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted);}
  .sb-field input, .sb-field textarea, .sb-field select{font-size:13px; padding:4px 6px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); font-family:inherit;}
  .sb-field textarea{resize:vertical; min-height:44px;}
  .sb-chip-row{display:flex; flex-wrap:wrap; gap:6px;}
  .sb-chip{font-size:12px; padding:3px 10px; border-radius:12px; border:1px solid var(--border); background:var(--bg); color:var(--text-secondary); cursor:pointer;}
  .sb-chip-active{background:var(--primary-bg); color:var(--primary-text); border-color:var(--primary-bg);}
  .sb-field-empty-hint{font-size:12px; color:var(--text-muted); font-style:italic;}
  /* Стадія 4 Кастингу: головна фотка затвердженого кандидата — Сторіборд/
     Розклад/Call sheets, той самий клас в усіх трьох. */
  .actor-avatar{width:18px; height:18px; border-radius:50%; object-fit:cover; vertical-align:middle; margin-right:4px;}
  .cs-actor-chip{white-space:nowrap;}
  .sb-prop-row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid var(--border);}
  .sb-prop-row:last-of-type{border-bottom:none;}
  .sb-prop-toggle{display:flex; align-items:center; gap:8px; cursor:pointer; min-width:0; flex:1;}
  .sb-prop-toggle span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .sb-prop-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .sb-prop-actions{display:flex; align-items:center; gap:2px; flex-shrink:0;}
  /* "Стовпець в таблиці" — маленький чекбокс+іконка (та сама, що на кнопці "Таблиця"
     у тулбарі) в actions, компактно, без окремого підпису (item 7 УХ-правок). */
  .sb-prop-table-check{display:flex; align-items:center; gap:2px; cursor:pointer; color:var(--text-muted); padding:2px;}
  .sb-prop-table-check .icon{width:14px; height:14px;}
  .sb-prop-table-check:has(input:checked){color:var(--primary-bg);}
  .sb-prop-row-details-toggle{border-bottom:none; padding-bottom:0;}
  .sb-prop-hint{font-size:12px; color:var(--text-muted); margin:0 0 8px;}
  .sb-create-prop-form{border-top:1px solid var(--border); margin-top:10px; padding-top:10px; display:flex; flex-direction:column; gap:10px;}
  .sb-create-prop-actions{display:flex; justify-content:flex-end; gap:8px;}
  .sb-option-row{display:flex; align-items:center; gap:6px; padding:5px 0;}
  .sb-option-row input{flex:1; min-width:0; font-size:13px; padding:4px 6px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text);}

  /* ---------- СТОРІБОРД: табличний вигляд ---------- */
  /* overflow-x:auto на обгортці (УХ-правка item 5) — без цього таблиця (Назва+Зображення+
     Деталі з їхніми min-width) на вузькому мобільному екрані розпирала сторінку
     цілком замість того, щоб просто прокручуватись горизонтально в своїх межах. */
  .storyboard-table-wrap{overflow-x:auto; max-width:100%;}
  .storyboard-table{border-collapse:collapse; width:100%; font-size:13px;}
  .storyboard-table th{text-align:left; padding:8px 10px; border-bottom:2px solid var(--border); white-space:nowrap; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted);}
  .storyboard-table th.sortable{cursor:pointer;}
  .storyboard-table th.sortable:hover{color:var(--text);}
  .storyboard-table td{padding:6px 10px; border-bottom:1px solid var(--border); vertical-align:top;}
  .sb-table-row.sb-shot-drag-over{outline:3px solid var(--primary-bg); outline-offset:-3px;}
  /* Два рядки, не один: drag+номер+колір зверху, іконка видалення кадру під ними —
     .shoot-num-top/.shoot-num-actions (обидва самі display:flex) просто стекаються
     як звичайні блокові діти. ВАЖЛИВО: сам <td> НЕ можна робити display:flex —
     це знімає стандартну поведінку table-cell "розтягнутись на всю висоту рядка",
     через що border-bottom клітинки опинявся вище справжнього низу рядка, "посеред
     строки" (найдений і виправлений вживу баг). */
  .sb-table-num-index[draggable="true"]{cursor:grab;}
  /* width:1% + white-space:nowrap — стандартний трюк auto table layout: браузер
     стискає колонку до мінімального вмісту замість того, щоб ділити зайвий простір
     порівну з "гумовою" Назвою (width:100%). Без цього Num-колонка лишалась ширшою,
     ніж треба (УХ-правка, наступний раунд). */
  .sb-table-num-col{width:1%;}
  .sb-table-num{white-space:nowrap;}
  /* Назва — "гумова" колонка (УХ-правка 12): вся вільна ширина таблиці йде сюди,
     решта колонок вузькі/фіксовані за вмістом. Виглядає як звичайний текст, стає
     полем редагування лише при фокусі — той самий .sb-shot-title, що на картці,
     лише font-size керується +/- у заголовку колонки (--sb-title-font). */
  .sb-table-title-col{width:100%;}
  /* textarea, не input (УХ item 4) — текст переноситься на рядки замість того, щоб
     зникати справа за краєм поля; висота підганяється під вміст через
     autoGrowShootFrameTextarea (той самий механізм, що поле "Кадр" у Плануванні).
     ВАЖЛИВО: ".storyboard-table input[type=text], ..., .storyboard-table textarea
     {border:1px solid...}" нижче МАЄ специфічність (0,1,1) — клас .storyboard-table
     + елемент textarea, що переважає лише .sb-table-title-input (0,1,0) без
     префікса. Той самий клас бага, що вже двічі траплявся в цьому файлі —
     потрібен compound-селектор ".storyboard-table textarea.sb-table-title-input". */
  .storyboard-table textarea.sb-table-title-input{
    display:block; font-size:var(--sb-title-font, 13px); padding:8px 4px; border:none; border-bottom:1px solid transparent;
    background:none; width:100%; color:var(--text); font-family:inherit; resize:none; overflow:hidden; box-sizing:border-box;
  }
  .storyboard-table textarea.sb-table-title-input:focus{outline:none; border-bottom-color:var(--border);}
  /* Scene-Shot над Назвою в таблиці (УХ-правка item 7) — той самий .sb-scene-shot-badge,
     що на картці, лише без лівого padding (там компенсував відступ хрон-рядка). */
  .sb-table-scene-shot-badge{padding:6px 4px 0;}
  /* Зображення — розмір керується +/- у заголовку колонки (--sb-img-h), як
     shootImageHeightByBlock у Плануванні. Хрон — малий сірий підпис під фото,
     не окрема колонка (той самий підхід, що shootRowMetaLine). */
  /* Картинка по центру комірки (УХ item 3), не з лівим вирівнюванням — img сам
     display:block, тому центрування лише через text-align на td не спрацювало б,
     потрібен ще й margin:0 auto на самому img/заглушці. +/- у заголовку теж по
     центру — .sb-table-image-col нижче. */
  .sb-table-image{white-space:nowrap; text-align:center;}
  /* Як у Плануванні (.shoot-img-cell img): фіксована ВИСОТА, ширина — auto за
     реальними пропорціями кадру, без background/object-fit-квадрата, що раніше
     давав сірі "letterbox"-смуги зверху/знизу для не-квадратних фото (УХ item 3). */
  /* НІЯКОГО max-width тут — з фіксованою height і width:auto воно не масштабує
     пропорційно (браузер лишає height:70px, а width стискає під max-width, тобто
     спотворює пропорції). Таблиця й так прокручується горизонтально в межах
     .storyboard-table-wrap{overflow-x:auto}, якщо фото виявляється широким. */
  .sb-table-image img{height:var(--sb-img-h, 70px); width:auto; border-radius:4px; display:block; margin:0 auto; cursor:pointer;}
  .sb-table-image-empty{width:var(--sb-img-h, 70px); height:var(--sb-img-h, 70px); display:flex; align-items:center; justify-content:center; background:var(--tile-bg); border-radius:4px; color:var(--text-muted); cursor:pointer; margin:0 auto;}
  .sb-table-chron{font-size:11px; color:var(--text-muted); margin-top:4px; padding-top:2px; border-top:1px dashed var(--border);}
  .sb-table-image-col{text-align:center;}
  .sb-table-image-col .shoot-th-zoom-row{justify-content:center;}
  /* Єдина текстова колонка замість колишньої "по колонці на кожне поле" (баланс як у
     Плануванні) — не редагується напряму, лише клік відкриває детальне вікно, тому
     white-space:normal (перенос рядків), а не nowrap/input-стилі решти комірок.
     font-size — менший дефолт (11px, було 12px) і керується +/- у заголовку колонки
     (--sb-info-font), той самий підхід, що й Назва/Зображення. */
  .sb-table-info{cursor:pointer; white-space:normal; font-size:var(--sb-info-font, 11px); color:var(--text-secondary); min-width:130px; max-width:200px; line-height:1.5;}
  .sb-table-info:hover{color:var(--text);}
  /* Той самий трюк, що й для Num-колонки — без width:1% ця колонка теж забирала
     собі більше простору, ніж треба, замість того, щоб віддати його Назві. */
  .sb-table-info-col{width:1%;}
  .storyboard-table input[type="text"], .storyboard-table input[type="number"], .storyboard-table select, .storyboard-table textarea{
    font-size:13px; padding:4px 6px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); font-family:inherit; width:100%;
  }
  .storyboard-table textarea{resize:vertical; min-height:36px;}
  /* +20% (УХ-правка item 14) — раніше свг 12px/шрифт 11px губились поряд з іншими бейджами. */
  .sb-shot-usage-badge{position:absolute; bottom:6px; left:6px; display:flex; align-items:center; gap:2px; padding:2px 7px; border-radius:12px; background:rgba(0,0,0,.55); color:#fff; font-size:13px; cursor:pointer;}
  .sb-shot-usage-badge svg{width:14px; height:14px;}
  /* Правка власника 2026-07-31: 2+ днів для одного кадру — нетиповий випадок,
     виділяємо червоним (іконка+цифра), щоб було видно з першого погляду. */
  .sb-shot-usage-badge-many{background:#dc2626; color:#fff;}

  /* ---------- Крос-лінкінг зі Сторібордом (у таблиці Планування) ---------- */
  /* +20% (УХ-правка item 13) — раніше 20px/13px губилось поряд з кнопкою видалення прив'язки. */
  .shoot-linked-badge{position:absolute; bottom:4px; right:4px; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:5px; background:rgba(0,0,0,.55); color:#fff; cursor:pointer;}
  .shoot-linked-badge svg{width:16px; height:16px;}
  .sb-picker-group{margin-bottom:14px;}
  .sb-picker-group-label{font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); margin-bottom:6px;}
  .sb-picker-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:8px;}
  .sb-picker-tile{cursor:pointer; border:1px solid var(--border); border-radius:6px; overflow:hidden; text-align:center;}
  .sb-picker-tile img{width:100%; height:70px; object-fit:cover; display:block; background:var(--tile-bg);}
  .sb-picker-tile-empty{width:100%; height:70px; display:flex; align-items:center; justify-content:center; background:var(--tile-bg); color:var(--text-muted);}
  .sb-picker-tile span{display:block; padding:4px 6px; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .sb-picker-tile-selected{position:relative; border-color:var(--primary-bg); box-shadow:0 0 0 2px var(--primary-bg) inset;}
  .sb-picker-tile-check{position:absolute; top:4px; right:4px; width:18px; height:18px; border-radius:50%; background:var(--primary-bg); color:var(--primary-text); display:flex; align-items:center; justify-content:center; z-index:1;}
  .sb-picker-tile-check .icon{width:12px; height:12px;}
  .modal-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 16px; border-top:1px solid var(--border); flex-shrink:0; flex-wrap:wrap;}
  .sb-picker-bulk-count{font-size:12px; color:var(--text-secondary);}
  .sb-usage-row{padding:8px 0; border-bottom:1px solid var(--border); cursor:pointer; display:flex; flex-direction:column; gap:2px;}
  .sb-usage-row:last-child{border-bottom:none;}
  .sb-usage-row span{font-size:12px; color:var(--text-secondary);}

  /* ---------- LOADING / ERROR ---------- */
  .loading-note{padding:16px; color:var(--text-muted); font-size:13px;}
  .error-note{padding:16px; color:var(--new); font-size:13px;}
  .toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:200;
    background:var(--new); color:#fff; padding:10px 16px; border-radius:8px; font-size:13px;
    max-width:420px; box-shadow:0 4px 16px rgba(0,0,0,.2);
  }
  .toast.toast-success{background:var(--st-sel);}

  /* ---------- ПЛАНУВАННЯ ЗЙОМКИ (shoot day planning) ---------- */
  .field.inline{display:flex; align-items:center; gap:8px; margin-bottom:0;}
  .field.inline label{font-size:13px; color:var(--text-secondary); white-space:nowrap;}
  .shoot-table-block{border:1px solid var(--border); border-radius:8px; padding:14px; margin-bottom:16px;}
  .shoot-table-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap;}
  .shoot-table-actions{display:flex; align-items:center; gap:6px;}
  table.shoot-table{width:100%; border-collapse:collapse; font-size:13px; table-layout:fixed;}
  table.shoot-table th{text-align:left; font-size:11px; color:var(--text-muted); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  /* Заголовки "Зображення"/"Кадр" — назва колонки і кнопки +/- у два рядки (одне під
     одним), а не в один рядок з назвою, щоб не звужувати назву колонки. */
  .shoot-th-label{overflow:hidden; text-overflow:ellipsis;}
  .shoot-th-zoom-row{display:flex; gap:3px; margin-top:3px;}
  /* Заголовок Image і його +/- по центру комірки (як і сама картинка/кнопки під
     нею нижче) — .shoot-th-label центрує текст через text-align, .shoot-th-zoom-row
     сам flex-контейнер на всю ширину, тому йому окремо потрібен justify-content.
     Специфічність "table.shoot-table th.shoot-th-image" вища за базове
     "table.shoot-table th{text-align:left}" (2 елементи+клас проти 1+клас) —
     інакше text-align:left з базового правила перебивав центрування назви. */
  table.shoot-table th.shoot-th-image{text-align:center; white-space:normal; overflow:visible;}
  th.shoot-th-image .shoot-th-zoom-row{justify-content:center;}
  /* Правка власника 2026-07-31: "Файл" (розмір фото) і "Текст" (розмір
     підпису під фото) — два ОКРЕМІ label+зум поруч у тому самому <th>. */
  .shoot-th-image-groups{display:flex; justify-content:center; gap:12px;}
  .shoot-th-image-group{display:flex; flex-direction:column; align-items:center;}
  table.shoot-table td{padding:6px 8px; border-bottom:2px solid var(--text-secondary); vertical-align:middle;}
  .shoot-row td input[type=text], .shoot-row td input[type=number], .shoot-row td textarea{
    width:100%; border:1px solid transparent; background:transparent; padding:4px 6px; border-radius:4px;
    font-size:13px; color:var(--text); font-family:inherit; box-sizing:border-box;
  }
  .shoot-row td input[type=text]:hover, .shoot-row td input[type=number]:hover, .shoot-row td textarea:hover,
  .shoot-row td input[type=text]:focus, .shoot-row td input[type=number]:focus, .shoot-row td textarea:focus{border-color:var(--border); background:var(--surface);}
  /* Кадр — єдина "гумова" колонка (без width) у table-layout:fixed, тому забирає
     увесь простір, вивільнений вужчими Тривалість/Початок/Кінець і прибраною колонкою дій. */
  table.shoot-table td.shoot-col-frame{padding:0;}
  /* Специфічність вища за загальне ".shoot-row td ... textarea{font-size:13px}" правило
     (клас .shoot-col-frame + type textarea), інакше --shoot-frame-font programmatically
     не переб'є базовий розмір — той самий трюк, що й для .shoot-col-duration input. */
  .shoot-row td.shoot-col-frame textarea{resize:none; overflow:hidden; line-height:1.4; padding:8px; border-radius:0; font-size:var(--shoot-frame-font);}
  /* Назва кадру у стані ПЕРЕГЛЯДУ (readonly): виглядає як звичайний текст —
     без рамки/фону на наведенні, курсор-вказівник (клік відкриває попап).
     У режимі редагування (dblclick знімає readonly) — звичайне поле. */
  .shoot-row td.shoot-col-frame textarea[readonly]{background:transparent; border:none; cursor:pointer;}
  .shoot-row td.shoot-col-frame textarea:not([readonly]){cursor:text;}
  .shoot-col-duration{width:66px;}
  .shoot-row td.shoot-col-duration input[type=number]{width:100%; font-weight:700; font-size:15px; text-align:center; padding-left:2px; padding-right:2px;}
  /* Тризначне число (100+) інакше не влазить у 66px колонку — шрифт менший на 25%
     (15px→11.25px). Клас виставляється і на рендері (initial value), і живо через
     oninput під час набору. */
  .shoot-row td.shoot-col-duration input[type=number].shoot-duration-long{font-size:11.25px;}
  .shoot-col-number{width:64px; white-space:nowrap; vertical-align:top;}
  .shoot-num-top{display:flex; align-items:center; gap:1px;}
  .shoot-num-actions{display:flex; gap:2px; margin-top:4px;}
  .shoot-num-actions button{padding:1px 3px;}
  .shoot-num-actions .icon{width:10px; height:10px;}
  /* SVG-іконка (не текстовий символ) — точний, передбачуваний розмір/бокс, без
     залежності від того, яким шрифтом браузер надумає рендерити "⠿" на
     конкретній платформі. width/height замість font-size, ~15% більше за базові
     16px (той самий "на 15% більше", що просили раніше). */
  .shoot-drag-handle{cursor:grab; color:var(--text-muted); display:inline-flex;}
  /* 18px → 13.5px (-25%). */
  .shoot-drag-handle .icon{width:13.5px; height:13.5px; vertical-align:middle;}
  /* Тепер теж зона перетягування (draggable, той самий обробник, що й іконка-грип) —
     інакше легкий промах повз вузьку іконку виділяв текст номера замість старту
     drag&drop. user-select:none — щоб курсор і без draggable не тягнув текст. */
  .shoot-row-num{min-width:14px; text-align:right; color:var(--text-muted); font-size:10px; cursor:grab; user-select:none;}
  /* Кольоровий квадратик-свотч замість текстової випадайки — <select> option'и не можна
     нормально стилізувати кольором крос-браузерно. */
  /* margin-right — свотч (суцільний колір, візуально "важчий" за текст) інакше
     здавався притиснутим впритул до тексту Кадру навіть при формально ненульовому
     проміжку від padding сусідньої клітинки. */
  .shoot-color-picker{position:relative; display:inline-block; margin-right:4px;}
  .shoot-color-swatch, .shoot-color-swatch-btn, .shoot-color-swatch-opt{
    width:16px; height:16px; border-radius:4px; border:1px solid var(--border); padding:0; display:inline-block; cursor:pointer;
  }
  .shoot-color-swatch{cursor:default; margin-right:4px;}
  .shoot-color-menu{
    position:absolute; top:20px; left:0; z-index:30; display:flex; gap:4px; padding:5px;
    background:var(--surface); border:1px solid var(--border); border-radius:6px; box-shadow:0 4px 16px rgba(0,0,0,.12);
  }
  .shoot-color-swatch-opt:hover{outline:2px solid var(--text-secondary);}
  /* cursor:pointer — підказка, що подвійний клік тут запускає/скасовує таймер кадру
     (startOrCancelShootTimer), не лише пасивний показ розрахованого часу. */
  .shoot-col-time-start, .shoot-col-time-end{width:52px; white-space:nowrap; color:var(--text); font-variant-numeric:tabular-nums; font-weight:700; cursor:pointer;}
  /* +3px до базового 8px padding — щоб час у Finish (останній стовпець) не впирався
     у праву межу таблиці. */
  table.shoot-table td.shoot-col-time-end{padding-right:11px;}
  /* text-align:center — і для кнопки "+" (порожня клітинка), і для самого фото:
     колонка Image рахується під найширше фото в блоці (--shoot-img-ratio), тож
     вужчі фото/кнопка більше не притиснуті ліворуч із порожнім місцем праворуч.
     padding:4px 0 (не 0) — явний, ГАРАНТОВАНИЙ однаковий відступ зверху й знизу.
     Раніше покладались на vertical-align:middle, що розподіляв залишок висоти
     рядка (коли Кадр вищий за фото) непередбачувано — увесь "зайвий" простір ішов
     тільки вниз, а не порівну; з фіксованим padding це вже не залежить від того,
     скільки саме "зайвої" висоти лишається в рядку. */
  table.shoot-table td.shoot-col-image{overflow:hidden; padding:4px 0; text-align:center;}
  /* Висота картинок регулюється кнопками +/- в заголовку колонки (adjustShootImageHeight) —
     --shoot-img-h виставляється інлайн-стилем на .shoot-table-block, звідти каскадом
     доходить і до .shoot-img-cell, і до <img> всередині; колонка/колгруп рахуються
     тим самим числом у JS (renderShootTableBlock), тому все масштабується синхронно. */
  .shoot-table-block{--shoot-img-h:150px; --shoot-frame-font:13px; --shoot-img-ratio:1.778; --shoot-meta-font:10px;}
  .shoot-img-zoom-btn{
    display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px;
    padding:0; font-size:11px; line-height:1; border-radius:3px;
  }
  .shoot-img-zoom-btn:disabled{opacity:.35; cursor:default;}
  /* inline-block, НЕ flex — у flex-контейнері дефолтний flex-shrink:1 стискає <img>
     по ширині, щоб влізти в max-width, і браузер підганяв висоту під це стиснення,
     спотворюючи пропорції (замість очікуваного "показати задану висоту, обрізати
     праву частину, якщо вона ширша за контейнер"). */
  .shoot-img-cell{position:relative; display:inline-block; height:var(--shoot-img-h); max-width:calc(var(--shoot-img-h) * var(--shoot-img-ratio)); overflow:hidden;}
  /* Без max-width на самому <img> — інакше для горизонтальних (ширших) фото
     object-fit:contain змушений одночасно тримати і висоту, і ширину, тому стискає
     висоту нижче заданої, лишаючи порожні смуги зверху/знизу. Висота завжди
     дорівнює --shoot-img-h, ширина природна за пропорціями; якщо вужча за контейнер
     (покриває аж до --shoot-img-ratio) — .shoot-img-cell обрізає праву частину через
     overflow:hidden, а не масштабує зображення. --shoot-img-ratio — не завжди 16:9:
     handleShootImageLoad() підганяє його під реальні пропорції найширшого завантаженого
     фото в блоці (портретні кадри звужують колонку Image, зайве місце йде в Кадр). */
  .shoot-img-cell img{height:var(--shoot-img-h); width:auto; object-fit:contain; border-radius:4px; display:block; cursor:zoom-in;}
  .shoot-img-cell .shoot-img-remove{
    position:absolute; top:4px; right:4px; width:22px; height:22px; padding:0;
    background:var(--surface); border:1px solid var(--border); border-radius:50%;
    opacity:0; transition:opacity .12s;
  }
  .shoot-img-cell:hover .shoot-img-remove{opacity:1;}
  .shoot-img-cell .shoot-img-remove svg{width:11px; height:11px;}
  /* flex(block)+column, НЕ inline-flex — inline-flex лишається інлайновим боксом і
     й досі тягне за собою "хвіст" baseline/line-height простору від шрифту клітинки
     (той самий клас проблем, що й inline-block раніше), через що table-cell
     vertical-align:middle розподіляв залишок висоти рядка НЕсиметрично (весь
     "зайвий" простір йшов тільки знизу картинки, а зверху вона впритул торкалась
     роздільника). display:flex (блоковий) прибирає цей вплив шрифтових метрик
     повністю — вирівнювання тепер симетричне. Горизонтальне центрування як і
     раніше — через align-items на самому wrap (він і так на всю ширину клітинки). */
  .shoot-img-wrap{display:flex; flex-direction:column; align-items:center;}
  /* Хрон/Формат (задаються у лайтбоксі) — маленький сірий підпис одразу під прев'ю,
     обмежений шириною самої картинки, щоб не розтягував колонку Image. */
  .shoot-img-meta{font-size:var(--shoot-meta-font,10px); line-height:1.3; color:var(--text-muted); max-width:calc(var(--shoot-img-h) * var(--shoot-img-ratio)); word-break:break-word;}
  .shoot-img-add{font-size:12px; white-space:nowrap;}
  /* padding 4px 6px (базове "button.ghost") → 3px 4.5px (-25%) — інакше кнопка
     лишалась старого розміру навіть після зменшення самої іконки всередині.
     "button.ghost.shoot-img-add" — специфічність вища за "button.ghost"
     (2 класи+елемент проти 1 класу+елемент), інакше базове правило перебиває. */
  button.ghost.shoot-img-add{padding:3px 4.5px;}
  /* "+" (завантажити фото) і safe-zone (відкрити деталі кадру без фото) — через
     невеликий пробіл, обидва в порожній клітинці Image. Іконки 16px→12px (-25%). */
  /* position:relative — правка власника 2026-07-31 (п.2): якір для
     .nt-tile-overlay, коли фото ще нема (той самий оверлей, що на самому
     фото, лишається на місці, де фото МАЛО б бути). */
  .shoot-img-add-row{display:flex; align-items:center; justify-content:center; gap:8px; position:relative;}
  /* Мобільна правка власника 2026-07-31: .nt-tile-overlay (absolute, top-left)
     сідав ПОВЕРХ кнопок +/сторіборд/safe-zone — на вузькому екрані рядку не
     вистачає ширини, оверлей і кнопки перекривались. На мобільному — нотатки
     ПІД кнопками (order:1), АЛЕ самі кнопки лишаються в ОДНОМУ рядку — перша
     версія фіксу (flex-direction:column) хибно розклала кожну кнопку на
     ОКРЕМИЙ рядок (рев'ю власника: "+ та [] мають бути на одному рядку").
     Правильний фікс — flex-wrap, а не flex-direction: кнопки (без
     flex-basis) пакуються в перший рядок, .nt-tile-overlay (flex-basis:100%)
     примусово переноситься на другий, повної ширини. */
  @media (max-width:640px){
    .shoot-img-add-row{flex-wrap:wrap;}
    .shoot-img-add-row .nt-tile-overlay{position:static; order:1; flex-basis:100%; justify-content:center;}
  }
  .shoot-img-add .icon{width:12px; height:12px;}
  .shoot-img-empty{color:var(--text-muted);}
  .shoot-empty-note{color:var(--text-muted); font-size:13px;}
  .shoot-table-footer{margin-top:10px; font-size:13px; color:var(--text-secondary); font-weight:700; display:flex; flex-direction:column; gap:2px;}
  /* Індикатор місця вставки під час drag&drop рядка — box-shadow, не border, щоб не
     зсувати сусідні рядки на товщину лінії. */
  .shoot-row.shoot-row-drag-over{box-shadow: inset 0 3px 0 0 var(--primary-bg);}
  /* "Це не кадр?" — чорні лінії зверху/знизу як роздільник (не в підрахунку кадрів).
     box-shadow, НЕ border — border-collapse:collapse на таблиці зливає border-top
     цього рядка з border-bottom попереднього (сірим, base-правило), і сірий "вигравав"
     конфлікт, тому верхня лінія була не видна. box-shadow не бере участі в collapse —
     той самий трюк, що вже використаний для .shoot-row-drag-over вище. */
  .shoot-row.shoot-row-separator{box-shadow: inset 0 2px 0 0 #000, inset 0 -2px 0 0 #000;}
  /* "Кадр зняти" — діагональний крос-хетч поверх фонового кольору рядка (не замість
     нього: рядок може одночасно мати колір-статус І бути знятим). background-image,
     не background — інакше затер би background-color кольору рядка (та сама пара
     властивостей, той самий трюк, що вже використаний для .shoot-row style вище). */
  .shoot-row.shoot-row-taken{
    background-image:
      repeating-linear-gradient(45deg, rgba(120,116,110,.22) 0, rgba(120,116,110,.22) 1.5px, transparent 1.5px, transparent 9px),
      repeating-linear-gradient(-45deg, rgba(120,116,110,.22) 0, rgba(120,116,110,.22) 1.5px, transparent 1.5px, transparent 9px);
  }
  /* Той самий крос-хетч, але ще й ПОВЕРХ самого фото — інакше картинка (непрозорий
     елемент) просто перекривала б фон рядка, і "знятість" на ній не було б видно.
     ::after на .shoot-img-cell (position:relative; overflow:hidden вже є) — окремий
     шар зверху, вища непрозорість (.35 проти .22), щоб читалось на будь-якому фото.
     pointer-events:none — щоб і далі можна було клікнути на фото/кнопку видалення. */
  .shoot-row-taken .shoot-img-cell::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:
      repeating-linear-gradient(45deg, rgba(120,116,110,.35) 0, rgba(120,116,110,.35) 1.5px, transparent 1.5px, transparent 9px),
      repeating-linear-gradient(-45deg, rgba(120,116,110,.35) 0, rgba(120,116,110,.35) 1.5px, transparent 1.5px, transparent 9px);
  }
  .ps-toggle-row input[type=checkbox]{width:16px; height:16px;}

  /* ---- Редактор меню проекту (core/ui/menu-editor.js) ----
     ОДНА розмітка на два місця: вкладка "Модулі" в Налаштуваннях проекту
     і крок 3 Майстра створення. Тому стилі теж одні — без wiz-/ps-
     префіксів, інакше два місця знову розійшлися б. */
  .mnu-hint{margin:0 0 10px; font-size:12px; color:var(--text-muted);}
  .mnu-list{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:8px; overflow:hidden;}
  .mnu-row{
    display:flex; align-items:center; gap:8px; padding:6px 8px;
    border-bottom:1px solid var(--border); background:var(--surface);
  }
  .mnu-row:last-child{border-bottom:none;}
  .mnu-row.mnu-drop-target{box-shadow: inset 0 2px 0 0 var(--primary-bg);}
  .mnu-row input[type=checkbox]{width:16px; height:16px; flex-shrink:0;}
  /* Той самий прийом, що .con-dept-drag-handle: draggable лише ручка,
     рядок цілком лишається клікабельним для чекбокса й кнопок. */
  .mnu-drag{cursor:grab; opacity:.5; flex-shrink:0; width:14px; display:inline-flex;}
  .mnu-drag svg{width:14px; height:14px;}
  .mnu-name{flex:1; font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .mnu-name-sep{color:var(--text-secondary); font-style:italic;}
  .mnu-locked{font-size:11px; color:var(--text-muted); border:1px solid var(--border); border-radius:9px; padding:0 6px; flex-shrink:0;}
  /* Прев'ю самого роздільника — щоб у списку було видно, ЩО саме додано,
     а не лише підпис. */
  .mnu-sep-preview{width:26px; flex-shrink:0;}
  .mnu-sep-preview.is-divider{border-top:1px solid var(--border-strong, var(--border)); height:1px;}
  /* Прев'ю в редакторі тримаємо пропорційним реальному .sb-gap (24px),
     інакше список показував би пробіл удвічі меншим, ніж він виходить
     у меню. Не 24px в упор — рядок редактора 36px, лишаємо повітря. */
  .mnu-sep-preview.is-spacer{height:20px;}
  /* Chevron дивиться вправо; повертаємо його на 90° замість заведення
     двох окремих іконок заради тієї самої стрілки. */
  .mnu-arrow{padding:2px 4px; flex-shrink:0;}
  .mnu-arrow svg{width:14px; height:14px; display:block;}
  .mnu-arrow-up svg{transform:rotate(-90deg);}
  .mnu-arrow-down svg{transform:rotate(90deg);}
  .mnu-arrow[disabled]{opacity:.25; cursor:default;}
  .mnu-remove{padding:2px 4px; flex-shrink:0;}
  .mnu-remove svg{width:14px; height:14px; display:block;}
  /* Тримає колонку кнопок рівною для рядків БЕЗ кошика (пункти меню):
     без розпірки стрілки в них "стрибали" б праворуч відносно роздільників. */
  .mnu-remove-spacer{width:22px; flex-shrink:0;}
  .mnu-add-row{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
  /* "Кадр знятий" і "Таймер" — пара pill-кнопок в один рядок, по центру лайтбоксу
     (align-self на самій обгортці, кнопки всередині — звичайний flex row). */
  .shoot-lightbox-top-actions{display:flex; align-items:center; gap:10px; align-self:center; flex-wrap:wrap; justify-content:center;}
  .shoot-mark-taken-btn, .shoot-timer-btn{
    border:1px solid var(--border); background:var(--surface); color:var(--text); padding:14px 36px;
    font-size:16px; font-weight:600; border-radius:26px;
  }
  .shoot-mark-taken-btn[aria-pressed="true"], .shoot-timer-btn[aria-pressed="true"]{background:var(--primary-bg); color:var(--primary-text); border-color:var(--primary-bg);}
  .shoot-timer-btn:disabled{opacity:.4; cursor:default;}
  .shoot-timer-pause-btn{
    width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:var(--surface);
    display:flex; align-items:center; justify-content:center; padding:0; flex-shrink:0;
  }
  /* Плаваючий віджет активного таймера — видимий лише коли лайтбокс закритий
     (поки він відкритий, відлік і так видно прямо в кнопці .shoot-timer-btn). */
  /* Зелений фон — сигналізує "таймер активний", той самий відтінок, що й
     зелений колір-статус рядка (SHOOT_ROW_COLORS.green), лише непрозорий. */
  .shoot-timer-widget{
    position:fixed; bottom:20px; right:20px; z-index:110; background:#16a34a; color:#fff; border:1px solid #15803d;
    border-radius:10px; padding:10px 14px; box-shadow:0 4px 16px rgba(0,0,0,.25); display:flex; align-items:center; gap:10px; cursor:pointer;
  }
  .shoot-timer-widget.hidden{display:none;}
  .shoot-timer-widget-num{font-weight:700; font-size:13px; color:rgba(255,255,255,.85); white-space:nowrap;}
  .shoot-timer-widget-clock{font-weight:700; font-size:16px; font-variant-numeric:tabular-nums; min-width:56px;}
  /* Базове button{background:var(--surface);} не скидається просто class="ghost"
     (той знімає лише border-color) — усередині зеленого віджета це давало суцільний
     світлий квадрат під кнопкою, і білу іконку (color:#fff) на майже білому фоні
     видно не було ("білі квадратики замість паузи/скидання" — item 4 УХ-правок). */
  .shoot-timer-widget button.ghost{padding:4px; color:#fff; background:transparent;}
  .shoot-timer-widget button.ghost:hover{background:rgba(255,255,255,.2);}
  /* Сигнал завершення відліку — кілька коротких спалахів кольором "нового"
     (той самий --new, що й для непрочитаних коментарів), про всяк випадок
     якщо звук заблоковано/вимкнено. */
  @keyframes shootTimerFlash{ 0%,100%{background:var(--surface);} 50%{background:var(--new); color:#fff;} }
  .shoot-timer-flash{animation:shootTimerFlash .5s ease-in-out 3;}
  .shoot-lightbox{position:relative; max-width:92vw; max-height:94vh; display:flex; flex-direction:column; align-items:center; gap:10px; overflow-y:auto;}
  .shoot-lightbox img{max-width:92vw; max-height:68vh; object-fit:contain; border-radius:6px; display:block;}
  /* Верхня строка лайтбоксу — контекстна підпис-мітка (Планування/Сторіборд), щоб було
     видно, ЯКИЙ саме модуль зараз редагується (два лайтбокси мають дуже схожий вигляд).
     Іконка закриття тепер живе в цій строці (position:relative на батькові), а не
     position:fixed відносно вʼюпорта — тому вона гарантовано вище за .shoot-lightbox-top-actions
     у порядку документа й ніколи з ним не накладається. */
  .shoot-lightbox-header{position:relative; width:100%; min-height:36px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  /* Білий (не var(--text-muted)) — ця строка сидить над зображенням, ще ДО фону
     .shoot-lightbox-panel (var(--surface)), просто на прозорому/темному тлі модалки,
     де приглушений сірий колір губився. */
  .shoot-lightbox-header-label{font-size:12px; font-weight:600; color:#fff; text-transform:uppercase; letter-spacing:.05em;}
  .shoot-lightbox-close{position:absolute; top:0; right:0; width:36px; height:36px; border-radius:50%; background:var(--surface); border:1px solid var(--border);}
  /* Обгортка фото — inline-block, тому точно повторює розмір самого зображення
     (не всього лайтбоксу), і кнопка видалення (absolute всередині) сідає рівно
     в правий верхній кут ФОТО, а не екрана. */
  .shoot-lightbox-media-wrap{position:relative; display:inline-block; max-width:92vw; max-height:68vh;}
  /* Постійна (не лише при наведенні) кнопка видалення фото — у кутку самої картинки. */
  .shoot-lightbox-delete{position:absolute; top:8px; right:8px; width:36px; height:36px; border-radius:50%; background:var(--surface); border:1px solid var(--border); color:var(--new);}
  /* Заглушка "фото ще немає" у лайтбоксі — той самий стиль, що й .modal-media
     (тайл-фон + іконка по центру) у звичайному медіа-переглядачі, але клікабельна:
     відкриває вибір файлу просто з лайтбоксу, без потреби спершу його закривати. */
  .shoot-lightbox-empty-media{
    width:min(70vw, 480px); height:280px; max-height:60vh; background:var(--tile-bg); border-radius:6px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    color:var(--text-secondary); cursor:pointer; font-size:13px;
  }
  /* Якір для .nt-tile-overlay (бейдж+додати нотатку) на фотографії кадру
     Сторіборду (правка власника 2026-07-30) — .shoot-lightbox-media-wrap
     уже має position:relative, лише заглушка "фото ще немає" — ні. */
  .sb-lightbox-photo-wrap{position:relative;}
  .shoot-lightbox-empty-media:hover{background:var(--tile-hover-bg);}
  .shoot-lightbox-empty-media .icon{width:48px; height:48px;}
  /* Хрон/Формат/Нотатка — лише тут, під великим фото, ніде більше в таблиці. */
  .shoot-lightbox-panel{display:flex; flex-direction:column; gap:8px; width:100%; max-width:420px; flex-shrink:0; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px 14px;}
  /* Єдиний футер (УХ-уніфікація) всередині лайтбокса: та сама ширина, що
     панель полів; своя поверхня, бо сам .shoot-lightbox прозорий на фоні. */
  /* Рев'ю власника 2026-07-23: кнопка паралельних жирна, коли вони є. */
  .shoot-table-actions button.shoot-parallel-toggle-has{font-weight:700;}
  /* На місці ПРИХОВАНИХ паралельних — тонка червона лінія (у складеному
     стані видно, що там щось сховано). */
  .shoot-parallel-hidden-marker td{padding:0 !important; height:3px; line-height:0; font-size:0; background:#dc2626; border:none !important;}
  .shoot-parallel-hidden-marker{height:3px;}
  /* Футер попапа кадру: «Зберегти» зверху на всю ширину, під нею —
     «Розірвати зв'язок» (менша) і «Видалити кадр» (червона) в один ряд. */
  .shoot-lightbox-foot{width:100%; max-width:420px; display:flex; flex-direction:column; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px 14px; flex-shrink:0;}
  .shoot-lightbox-foot > button.primary{width:100%; padding:10px; font-weight:600;}
  .shoot-lightbox-foot-row{display:flex; align-items:center; gap:8px;}
  .shoot-lightbox-foot-row button.shoot-lightbox-unlink{font-size:12px; padding:4px 8px; border:1px solid var(--border); flex:1; text-align:left;}
  .shoot-lightbox-foot-row button.danger{margin-left:auto;}
  .shoot-lightbox .modal-foot{width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border); border-radius:8px;}
  /* flex-wrap — на вузькому мобільному екрані select "Формат" переноситься на новий
     рядок замість того, щоб вилазити за межі лайтбоксу. */
  .shoot-lightbox-field{display:flex; align-items:center; gap:6px; row-gap:8px; font-size:13px; flex-wrap:wrap;}
  /* Без min-width — колишні 64px були розраховані під ОДИН лейбл на рядок (для
     вирівнювання колонок); тепер тут ДВА лейбли в одному рядку ("Хрон:" і "Формат:"),
     і той самий min-width лишав по 64px порожнього місця після кожного, звідки й
     "великий відступ після Хрона". */
  .shoot-lightbox-field label{color:var(--text-secondary); flex-shrink:0;}
  /* Хвилини — рівно під 2 цифри (00), секунди трохи ширші під "00.0". */
  #shoot-chron-min{width:30px;}
  #shoot-chron-sec{width:46px;}
  /* Без явної ширини text input тягнеться на весь залишок рядка (браузерний
     дефолт), через що "Об'єктив:" + поле не влазили в один рядок разом і
     переносились на другий. */
  #shoot-lens-input{width:160px; flex:0 0 auto;}
  /* Той самий клас бага, що вже двічі траплявся в цьому файлі: глобальне
     "input[type=text]{width:100%;...}" (специфічність 0,1,1) переважало над
     .sb-scene-shot-input саму по собі (0,1,0) — поле розтягувалось на всю ширину
     рядка, через що Scene/Shot Number з color picker'ом та Назвою розповзались
     на 4 окремі рядки замість одного. Compound-селектор піднімає специфічність. */
  input[type="text"].sb-scene-shot-input{width:46px; flex:0 0 auto; text-align:center;}
  .shoot-lightbox-field span{color:var(--text-secondary);}
  .shoot-lightbox-note{width:100%; min-height:56px; resize:vertical; font-family:inherit; font-size:13px; padding:6px 8px; border-radius:6px; border:1px solid var(--border); background:var(--bg); color:var(--text); box-sizing:border-box;}
  .shoot-lightbox-checkbox-row{display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer;}
  .shoot-lightbox-checkbox-pair{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
  .shoot-lightbox-checkbox-row input[type=checkbox]{width:16px; height:16px;}

  /* Wave 2 (schedule-доробки, ТЗ §7.1) — паралельні рядки/департаменти/актори/нотатки. */
  /* Паралельний рядок — діагональні смужки ПОВЕРХ обраного кольору рядка (той самий
     трюк background-image, що й .shoot-row-taken вище, аби не затерти background-color;
     власник попросив саме "набір паралельних ліній", не суцільний оверлей — так рядок
     видно як особливий одразу, а не лише трохи темнішим). */
  .shoot-row.shoot-row-parallel{
    background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0, rgba(0,0,0,.08) 4px, transparent 4px, transparent 11px);
  }
  /* Компактні іконки-індикатори під текстом Кадру — департаменти (кольорові крапки)
     і нотатки (іконка коментаря в кольорі департаменту нотатки, hover/клік → текст
     через title, повний перелік — лише в лайтбоксі). */
  .shoot-row-badges{display:flex; align-items:center; gap:4px; flex-wrap:wrap;}
  /* Верхній ряд комірки "Кадр": Scene/Shot + іконки нотаток — у тому самому
     візуальному рядку, що номер кадру, але з запасом ширини (рев'ю власника). */
  .shoot-frame-top{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:2px;}
  .shoot-dept-badge{width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0;}
  .shoot-note-badge{width:14px; height:14px; flex-shrink:0; cursor:default;}
  .shoot-note-badge .icon{width:14px; height:14px;}
  .shoot-dept-panel, .shoot-actors-panel, .shoot-notes-panel{flex-direction:column; align-items:flex-start;}
  .shoot-dept-checks{display:flex; flex-wrap:wrap; gap:8px 14px;}
  .shoot-dept-check{display:flex; align-items:center; gap:5px; font-size:13px; cursor:pointer;}
  .shoot-dept-check input[type=checkbox]{width:15px; height:15px;}
  .shoot-actor-chips{display:flex; flex-wrap:wrap; gap:6px;}
  .shoot-actor-chip{display:inline-flex; align-items:center; gap:4px; background:var(--tile-bg); border-radius:14px; padding:3px 6px 3px 10px; font-size:12px;}
  .shoot-actor-chip button{padding:2px; width:18px; height:18px;}
  .shoot-actor-chip .icon{width:12px; height:12px;}
  .shoot-notes-panel .shoot-note-row{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; font-size:13px; padding:3px 0; border-bottom:1px solid var(--border);}
  .shoot-notes-panel .shoot-note-row:last-of-type{border-bottom:none;}
  .shoot-note-add{display:flex; gap:6px; width:100%; margin-top:4px; flex-wrap:wrap;}
  .shoot-note-add input[type=text]{flex:1 1 140px;}

  /* Wave 2 (schedule-доробки, ТЗ §7.1 частина 2/2) — оглядова сторінка. */
  .shoot-overview{display:flex; flex-direction:column; gap:14px;}
  .shoot-overview-toolbar{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;}
  .shoot-overview-tabs{display:flex; gap:6px;}
  .shoot-overview-tabs button{padding:6px 14px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text);}
  .shoot-overview-tabs button.active{background:var(--primary-bg); color:var(--primary-text); border-color:transparent;}
  .shoot-buffer-zone{border:1px solid var(--border); border-radius:8px; background:var(--surface);}
  .shoot-buffer-toggle{width:100%; justify-content:flex-start; padding:8px 12px; font-weight:600;}
  .shoot-buffer-cards{display:flex; flex-wrap:wrap; gap:8px; padding:0 12px 12px;}
  /* Огляд — ГОРИЗОНТАЛЬНО, як Сторіборд (рев'ю власника): кожен день — блок
     на всю ширину, дні один під одним, кадри всередині дня йдуть зліва
     направо з переносом. Раніше — вузькі канбан-колонки з внутрішнім
     вертикальним скролом. */
  .shoot-overview-days{display:flex; flex-direction:column; gap:14px; padding-bottom:8px;}
  .shoot-day-column{border:1px solid var(--border); border-radius:8px; background:var(--surface);}
  .shoot-day-column.completed{opacity:.55;}
  .shoot-day-column-header{padding:8px 12px; border-bottom:1px solid var(--border); display:flex; flex-direction:row; align-items:center; gap:12px; flex-wrap:wrap;}
  .shoot-day-column-title{font-weight:600; cursor:pointer; font-size:15px;}
  .shoot-day-column-title:hover{text-decoration:underline;}
  .shoot-day-column-date, .shoot-day-column-summary{font-size:12px; color:var(--text-secondary);}
  .shoot-day-column-actions{display:flex; gap:4px; margin-left:auto;}
  /* Чіткий роздільник між днями в Огляді (рев'ю власника) — той самий
     "видимий" колір, що лінії Календаря (var(--text-secondary), не
     майже-невидимий var(--border)). */
  .shoot-day-divider{border-top:2px solid var(--text-secondary); margin:4px 0;}
  /* Дата + час старту дня — поруч, жирніше й більше (рев'ю власника). */
  .shoot-day-datetime{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
  .shoot-day-datetime label{font-weight:700; font-size:15px;}
  .shoot-day-datetime input[type=date], .shoot-day-datetime select{font-weight:700; font-size:16px;}
  /* Панель акторів у лайтбоксі — ролі Кастингу з "Вибраний!" героями. */
  .shoot-actor-roles{display:flex; flex-direction:column; gap:4px;}
  .shoot-actor-role-row{display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer;}
  .shoot-actor-role-row input[type=checkbox]{width:15px; height:15px;}
  .shoot-actor-role-name{font-weight:600;}
  .shoot-day-column-cards{display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px;}
  /* Розмір картки — керується +/- в шапці дня (спільна CSS-змінна на корені
     Огляду); висота фото масштабується разом із шириною. */
  .shoot-overview-card{flex:0 0 var(--shoot-ov-card-w,180px); width:var(--shoot-ov-card-w,180px); border-radius:6px; padding:4px; font-size:12px; cursor:grab; border:1px solid rgba(0,0,0,.08);}
  .shoot-overview-card img{width:100%; height:calc(var(--shoot-ov-card-w,180px)*0.55); object-fit:cover; border-radius:4px; display:block;}
  .shoot-overview-card-noimg{width:100%; height:calc(var(--shoot-ov-card-w,180px)*0.55); display:flex; align-items:center; justify-content:center; background:var(--tile-bg); border-radius:4px; color:var(--text-secondary);}
  .shoot-overview-card-noimg .icon{width:28px; height:28px;}
  .shoot-overview-card-desc{margin-top:4px; word-break:break-word;}
  .shoot-overview-card-dur{opacity:.65; font-size:11px;}
  /* Та сама діагональна штрихування, що .shoot-row-parallel вище — картки
     Огляду показують ті самі рядки в іншому вигляді, тож маркування має
     лишатись впізнаваним в обох місцях. Пунктирна рамка лишається як
     другий, незалежний від фону сигнал. */
  .shoot-overview-card.parallel{
    border-style:dashed;
    background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0, rgba(0,0,0,.08) 4px, transparent 4px, transparent 11px);
  }
  .shoot-day-column-cards.shoot-overview-dragover, .shoot-buffer-zone.shoot-overview-dragover{outline:2px dashed var(--primary-bg); outline-offset:-2px;}

  @media print{
    body.printing-shoot #sidebar, body.printing-shoot #topbar,
    body.printing-shoot .add-block-btn, body.printing-shoot .subfolder-grid,
    body.printing-shoot .block-drag-handle, body.printing-shoot .shoot-table-actions,
    body.printing-shoot .shoot-drag-handle, body.printing-shoot .shoot-num-actions,
    body.printing-shoot .shoot-img-remove,
    body.printing-shoot .shoot-img-add, body.printing-shoot .block-vis-btn,
    body.printing-shoot .block-delete-btn, body.printing-shoot .folder-page-title button,
    body.printing-shoot .text-toolbar, body.printing-shoot .shoot-img-zoom-btn
    { display:none !important; }
    body.printing-shoot #canvas-scroll, body.printing-shoot #canvas, body.printing-shoot #main
    { overflow:visible !important; height:auto !important; }
    body.printing-shoot table.shoot-table, body.printing-shoot .shoot-row
    { -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact; }
    /* Сторіборд — та сама логіка друку, що й таблиця зйомочного дня (тумблер, клас
       body.printing-shoot, приховування інтерактивного chrome, точні кольори). */
    body.printing-shoot .storyboard-toolbar, body.printing-shoot .sb-shot-menu,
    body.printing-shoot .sb-new-shot-tile
    { display:none !important; }
    body.printing-shoot .storyboard-grid, body.printing-shoot .storyboard-table, body.printing-shoot .sb-shot-card, body.printing-shoot .sb-table-row
    { -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact; }
    /* Деякі мобільні браузери рендерять друк у контексті екранної (вузької) ширини,
       тому @media (max-width:640px) вище лишається активним і під час друку —
       звужені !important-колонки (48/66/60/52 → 48/42/42px) робили друковану
       таблицю обрізаною/нечитабельною. Друк завжди має виглядати як десктопний
       варіант, незалежно від пристрою — повертаємо базові (не мобільні) ширини. */
    body.printing-shoot .shoot-col-number-col{width:64px !important;}
    body.printing-shoot .shoot-col-duration-col{width:66px !important;}
    body.printing-shoot .shoot-col-timeStart-col{width:60px !important;}
    body.printing-shoot .shoot-col-timeEnd-col{width:52px !important;}
    body.printing-shoot .shoot-table-block{padding:14px !important;}
    body.printing-shoot #canvas{max-width:94% !important; padding:20px !important;}
    /* Кастинг — правки після рев'ю, раунд 2, п.4: та сама логіка друку
       (тумблер body.printing-shoot). .text-toolbar/.shoot-img-zoom-btn/
       .folder-page-title button уже приховані вище (спільні класи) —
       додаємо лише те, що специфічне для таблиці кандидатів: тулбар
       додавання/фільтра/сортування, шапку collapse-all, delete-кнопки,
       плитку "додати фото", і коментарі (друк — чистий підсумок, не тред). */
    body.printing-shoot .casting-cand-toolbar, body.printing-shoot .cand-table-header,
    body.printing-shoot .tile-delete-overlay-btn, body.printing-shoot .cand-delete-btn,
    body.printing-shoot .add-media-tile, body.printing-shoot .comment-list,
    body.printing-shoot .add-comment-row,
    /* 2026-07-29: іконки копіювання і картки актора — теж не для паперу */
    body.printing-shoot .cand-copy-btn, body.printing-shoot .cand-card-btn,
    body.printing-shoot .cand-add-media-btn
    { display:none !important; }
    /* Календар — п.4 рев'ю сьомої хвилі: іконка "Додати подію" в стрічці
       не повинна лишатись на друкованій сторінці (та сама логіка друку). */
    body.printing-shoot .cal-agenda-add-btn
    { display:none !important; }
    /* Календар, рев'ю власника 2026-07-31 (п.3-4): перемикачі видів,
       іконки зовнішнього посилання/друку, стрілки нав-місяця — не для
       паперу; дні "далі після останньої події" (стрічка) — теж, вони
       існують лише для кліку "додати", сенсу на друці не мають. Кольори
       подій і маркування вікенду СВІДОМО НЕ чіпаємо тут — print-color-adjust
       вже стоїть глобально (див. .row-parallel/.shoot-table коментарі
       вище), а .cal-day.weekend/.cal-agenda-table tr.weekend — звичайні
       background, друкуються за замовчуванням тим самим правилом. */
    body.printing-shoot .cal-view-btn, body.printing-shoot .cal-toolbar-actions,
    body.printing-shoot .cal-month-nav-btn, body.printing-shoot .cal-agenda-future,
    body.printing-shoot .cal-cube-add
    { display:none !important; }
    /* ТІ САМІ правила для .pc-* (правка власника 2026-08-01). Раунд
       уніфікації перейменував класи проектного Календаря .cal-* -> .pc-*
       (тепер обидва режими малюють однією розміткою), але цей друк-блок
       лишився на старих іменах — друк тихо перестав ховати тулбар і
       форсувати кольори. .cal-* селектори вище лишаємо: на них досі
       тримається публічна сторінка calendar-public.html (у неї власний
       CSS, але класи ті самі) і мертвий modules/calendar.
       .pc-period-nav НЕ ховаємо цілком — у ньому назва місяця, яка на
       друці потрібна (вимога власника); ховаємо лише інтерактив
       усередині: стрілки ‹› і кнопку "Додати подію". */
    body.printing-shoot .pc-view-btn, body.printing-shoot .pc-toolbar-actions,
    body.printing-shoot .pc-nav-btn, body.printing-shoot .pc-agenda-add,
    body.printing-shoot .pc-agenda-empty-toggle, body.printing-shoot .pc-more-link,
    body.printing-shoot .pc-chips, body.printing-shoot .pc-period-nav button
    { display:none !important; }
    /* Сіра плашка нав-панелі на папері зайва — лишається сама назва місяця. */
    body.printing-shoot .pc-period-nav
    { background:transparent !important; padding:0 0 6px !important; }
    /* Панель календарів проекту (кілька на проект, 2026-08-01): кнопки
       "Зробити головним"/"+"/кошик на папір не йдуть, а НАЗВА календаря —
       навпаки, найважливіше: на друку має бути видно, ЯКИЙ саме варіант
       плану роздрукували. Тому поле вводу перетворюємо на звичайний текст,
       а не ховаємо. */
    body.printing-shoot .pc-calendar-bar button
    { display:none !important; }
    /* Друк Календаря ВСІХ ПРОЕКТІВ (правка власника 2026-08-01): він живе
       на #screen-projects поруч із переліком проектів, кнопками акаунта й
       перемикачем вигляду — на папері все це зайве, лишається сам календар.
       Проектному календарю такі правила не потрібні: він у #screen-app, де
       друк-блок вище вже ховає сайдбар і топбар. Критерії друку самої сітки
       (сховані перемикачі/стрілки, збережені кольори подій і вихідних) —
       СПІЛЬНІ, бо це ті самі .pc-* класи однієї розмітки. */
    body.printing-shoot .projects-top, body.printing-shoot .projects-actions-row,
    body.printing-shoot .projects-view-row, body.printing-shoot #project-grid,
    body.printing-shoot #producer-calendar-embed .pc-chips
    { display:none !important; }
    /* Секція календаря на друку — без breakout-полів і без заголовка
       "Календар всіх проектів" зверху: назву дає printWithDocTitle(). */
    body.printing-shoot .producer-calendar-embed
    { margin:0 !important; width:auto !important; border-top:none !important; padding:0 !important; }
    body.printing-shoot .pc-calendar-name
    { border:none !important; background:transparent !important; padding:0 !important; }
    /* Кольори подій і фон вікенду — БЕЗ print-color-adjust браузер за
       замовчуванням прибирає фонові кольори на друці (економія чорнила),
       тож вимога власника "залишати кольори" вимагає явного exact — той
       самий прийом, що вже стоїть для .shoot-table/.storyboard-grid. */
    body.printing-shoot .cal-event-chip, body.printing-shoot .cal-day.weekend,
    body.printing-shoot .cal-agenda-table tr.weekend td, body.printing-shoot .cal-cube,
    body.printing-shoot .pc-event-chip, body.printing-shoot .pc-day.weekend,
    body.printing-shoot .pc-agenda-table tr.weekend td
    { -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact; }
    /* Рев'ю власника: у друці Планування поля Дата/Час старту виглядають
       звичайним текстом (без рамки/фону/стрілки select). */
    body.printing-shoot .shoot-day-datetime input[type=date],
    body.printing-shoot .shoot-day-datetime select{
      border:none !important; background:transparent !important; -webkit-appearance:none; appearance:none; padding:0 !important;
    }
    /* Прибрати "втрачені рядки" навколо заголовка: підтиснути відступи
       заголовка папки, сховати службовий хром блоків і порожні
       текст-блоки-плейсхолдери, breadcrumb. */
    body.printing-shoot .folder-page-title{margin-bottom:6px !important;}
    body.printing-shoot .block{margin:0 !important; padding:0 !important;}
    body.printing-shoot .block-text:empty,
    body.printing-shoot .add-block-menu, body.printing-shoot .add-block-btn-wrap,
    body.printing-shoot .sb-add-folder, body.printing-shoot .breadcrumb{ display:none !important; }
    body.printing-shoot .block-text{padding:0 !important; margin:0 0 8px !important;}
  }

  /* ------------------------------------------------------------------ *
   *  ПІДКАЗКИ (core/ui/hints.js, Етап H1, ТЗ_Модуль_Підказки.md §7)
   *
   *  Ховер (десктоп) — ЧИСТО CSS: transition-delay на opacity/visibility
   *  дає "з'явитись через ~150мс / зникнути через ~200мс" без жодного
   *  mousenter/mouseleave-слухача (ці типи навмисно НЕ додані в спільний
   *  делегований список core/ui/actions.js EVENT_TYPES — вони летіли б
   *  майже так само часто, як mousemove/scroll, для будь-якого елемента
   *  на сторінці, а не лише для іконок підказок). :hover на .hint-wrap
   *  (не на самій іконці) — щоб наведення на сам попап не закривало його.
   *  Клік/тап/Enter/Space/Esc — JS у hints.js (.hint-open клас).
   * ------------------------------------------------------------------ */
  .hint-wrap{position:relative; display:inline-flex; vertical-align:middle; margin-left:4px;}
  .hint-icon{
    width:15px; height:15px; min-width:15px; padding:0; border-radius:50%;
    border:1px solid var(--text-muted); background:transparent; color:var(--text-muted);
    font-size:10px; line-height:1; display:inline-flex; align-items:center; justify-content:center;
    cursor:help;
  }
  .hint-icon:hover, .hint-icon:focus-visible{color:var(--text-secondary); border-color:var(--text-secondary);}
  .hint-popup{
    position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%);
    width:max-content; max-width:320px; background:var(--surface); color:var(--text);
    border:1px solid var(--border); border-radius:8px; padding:10px 30px 10px 12px;
    font-size:13px; line-height:1.4; box-shadow:0 4px 16px rgba(0,0,0,.18); z-index:60;
    text-align:left;
    opacity:0; visibility:hidden;
    transition:opacity .15s ease, visibility 0s linear .35s;
  }
  .hint-wrap:hover .hint-popup, .hint-wrap.hint-open .hint-popup, .hint-icon:focus-visible ~ .hint-popup{
    opacity:1; visibility:visible;
    transition-delay:.15s, 0s;
  }
  .hint-popup p{margin:0 0 6px;}
  .hint-popup p:last-child{margin-bottom:0;}
  .hint-popup-close{
    position:absolute; top:4px; right:4px; width:18px; height:18px; padding:0;
    display:none; align-items:center; justify-content:center; font-size:11px;
  }
  /* Хрестик закриття — лише для явно відкритого (клік/тап), не для чистого
     ховеру: на десктопі досить відвести мишу, зайвий хрестик — шум. */
  .hint-wrap.hint-open .hint-popup-close{display:flex;}
  @media (max-width:640px){
    .hint-popup{position:fixed; left:12px; right:12px; bottom:12px; top:auto; width:auto; max-width:none; transform:none;}
  }
  @media print{
    .hint-icon, .hint-popup{display:none !important;}
  }

  /* Блок (kind='block', Етап H4) — інлайн rich-text абзац над групою
     полів (майстер створення проекту й подібне), НЕ іконка+попап. */
  .hint-block{font-size:13px; color:var(--text-secondary); line-height:1.5; margin:0 0 12px;}
  .hint-block p{margin:0 0 6px;}
  .hint-block p:last-child{margin-bottom:0;}