:root{
      --paper:#ffffff;
      --brand:#2563eb;
      --brand-rgb:37,99,235;
      --brand-hover:#1d4ed8;
      --bg-cork:#d4b483;
      --line:#e5e7eb;
      --shadow:0 8px 28px rgba(0,0,0,0.18);
      --shadow-soft:0 6px 18px rgba(0,0,0,0.10);
      --radius:10px;
      --ink:#111827;
      --muted:#6b7280;
      --danger:#b91c1c;
      --ok:#16a34a;
      --sat: env(safe-area-inset-top, 0px);
      --sab: env(safe-area-inset-bottom, 0px);
      --sal: env(safe-area-inset-left, 0px);
      --sar: env(safe-area-inset-right, 0px);
      --touch-target: 44px;
      /* WGA revision colors */
      --rev-white:#ffffff;
      --rev-blue:#c8d9f0;
      --rev-pink:#f9d0d8;
      --rev-yellow:#fef9c3;
      --rev-green:#d1f5d3;
      --rev-goldenrod:#fde68a;
      /* Scene status */
      --status-locked:#16a34a;
      --status-progress:#d97706;
      --status-omit:#b91c1c;
      --status-none:#9ca3af;
    }


    /* ── Call Sheet Quick-Win Styles ──────────────────────────────── */
    .cs-action-bar {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    }
    @media (max-width: 600px) {
      .cs-action-bar { gap: 6px; }
      .cs-action-bar select { min-width: 0; flex: 1; }
      .cs-share-btn, .cs-track-btn { padding: 6px 10px; font-size: .76rem; }
    }
    .cs-map-link {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: .72rem; font-weight: 700; color: var(--brand);
      text-decoration: none; padding: 3px 8px; border-radius: 6px;
      background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.18);
      transition: background .15s;
    }
    .cs-map-link:hover { background: rgba(37,99,235,.16); }
    .cs-weather-auto {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: .72rem; font-weight: 700; color: #059669;
      padding: 3px 8px; border-radius: 6px; cursor: pointer;
      background: rgba(5,150,105,.08); border: 1px solid rgba(5,150,105,.18);
      transition: background .15s;
    }
    .cs-weather-auto:hover { background: rgba(5,150,105,.16); }
    .cs-weather-badge {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: .78rem; font-weight: 700; padding: 3px 10px;
      border-radius: 6px; background: #f0fdf4; border: 1px solid #bbf7d0;
      color: #15803d;
    }
    body.dark .cs-weather-badge { background: rgba(5,150,105,.15); border-color: rgba(5,150,105,.3); color: #34d399; }
    .cs-share-btn {
      background: var(--brand); color: white; border: none;
      border-radius: 8px; padding: 7px 14px; font-size: .82rem;
      font-weight: 700; cursor: pointer; font-family: inherit;
      display: inline-flex; align-items: center; gap: 6px;
      transition: background .15s;
    }
    .cs-share-btn:hover { background: var(--brand-hover); }
    .cs-track-btn {
      background: #7c3aed; color: white; border: none;
      border-radius: 8px; padding: 7px 14px; font-size: .82rem;
      font-weight: 700; cursor: pointer; font-family: inherit;
      display: inline-flex; align-items: center; gap: 6px;
      transition: background .15s;
    }
    .cs-track-btn:hover { background: #6d28d9; }
    .cs-confirmation-panel {
      margin-top: 16px; border: 1px solid #e9d5ff; border-radius: 12px;
      padding: 14px 16px; background: #faf5ff;
    }
    body.dark .cs-confirmation-panel { background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.25); }
    .cs-confirmation-panel h4 { margin: 0 0 10px; font-size: .88rem; color: #7c3aed; }
    .cs-recipient-row {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 0; border-bottom: 1px solid #f3e8ff; font-size: .82rem;
      flex-wrap: wrap;
    }
    @media (max-width: 540px) {
      .cs-recipient-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    }
    .cs-recipient-row:last-child { border-bottom: none; }
    .cs-status-pill {
      font-size: .68rem; font-weight: 800; padding: 2px 8px;
      border-radius: 999px; flex-shrink: 0;
    }
    .cs-status-sent { background: #e0e7ff; color: #3730a3; }
    .cs-status-opened { background: #d1fae5; color: #065f46; }
    .cs-status-confirmed { background: #dcfce7; color: #15803d; }
    .cs-dept-header {
      font-size: .72rem; font-weight: 900; letter-spacing: .06em;
      text-transform: uppercase; color: var(--muted);
      padding: 8px 8px 4px; background: #f9fafb;
      border-bottom: 1px solid #f3f4f6;
    }
    body.dark .cs-dept-header { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
    .cs-dept-header:first-child { border-radius: 10px 10px 0 0; }

    /* ── SCRIPT ZOOM ─────────────────────────────────────────── */
    #pages-zoom-wrapper {
      transform-origin: top center;
      width: 100%;
      /* width compensation handled by JS */
    }
    .zoom-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 30px;
      min-height: 30px;
      padding: 2px 7px;
      border-radius: 6px;
      border: 1px solid var(--line);
      background: var(--paper);
      color: var(--ink);
      font-family: 'Inter', sans-serif;
      font-size: .78rem;
      font-weight: 700;
      cursor: pointer;
      line-height: 1;
      user-select: none;
      -webkit-user-select: none;
      transition: background .15s, border-color .15s;
    }
    .zoom-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
    .zoom-btn:active { transform: scale(.93); }
    .zoom-reset-btn { font-size: .68rem; font-weight: 600; min-width: 38px; color: var(--muted); }
    #zoom-controls {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    body.dark .zoom-btn { background: #1e2433; border-color: #2d3447; color: var(--ink); }
    body.dark .zoom-btn:hover { background: var(--brand); color: #fff; }
    /* Hide zoom controls on mobile — zoomed pages break layout; settings pop accessible via menu */
    @media (max-width: 760px) {
      #zoom-controls { display: none !important; }
      #pages-zoom-wrapper { transform: none !important; height: auto !important; }
    }

    /* ── PAGE COLOR SWATCHES in Tools menu ──────────────────── */
    .page-color-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 5px;
      padding: 6px 2px;
      cursor: default;
    }
    .pc-swatch {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 5px 4px;
      border: none;
      background: none;
      border-radius: 8px;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      font-size: .62rem;
      font-weight: 700;
      color: var(--muted);
      transition: background .1s;
      min-height: 0;
    }
    .pc-swatch:hover { background: #f3f4f6; color: var(--ink); }
    .pc-swatch.active { background: #e0e7ff; color: var(--brand); }
    .pc-dot {
      width: 20px; height: 20px;
      border-radius: 50%;
      border: 1.5px solid rgba(0,0,0,0.12);
      flex-shrink: 0;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    body.dark .pc-swatch:hover { background: #252d42; color: var(--ink); }
    body.dark .pc-swatch.active { background: #1d2d4a; color: var(--brand); }
    /* pc-dot border visible in dark mode */
    body.dark .pc-dot { border-color: rgba(255,255,255,0.18); }

    /* ── DARK MODE ───────────────────────────────────────────── */
    body.dark {
      --paper:#1e2433;
      --brand:#4d8ef8;
      --brand-rgb:77,142,248;
      --brand-hover:#3b7af5;
      --bg-cork:#1a1f2e;
      --line:#2d3447;
      --shadow:0 8px 28px rgba(0,0,0,0.55);
      --shadow-soft:0 6px 18px rgba(0,0,0,0.4);
      --ink:#e5e9f0;
      --muted:#a3b1c2; /* lifted from #94a3b8 — keeps secondary text above 4.5:1 on the dark panels */
      --danger:#f05252;
      --ok:#34d399;
      --status-locked:#34d399;
      --status-progress:#fbbf24;
      --status-omit:#f05252;
      --status-none:#64748b;
      background-color:var(--bg-cork);
      background-image:
        radial-gradient(rgba(255,255,255,.04) 15%, transparent 16%),
        radial-gradient(rgba(255,255,255,.04) 15%, transparent 16%),
        radial-gradient(rgba(255,255,255,.02) 16%, transparent 17%);
    }
    body.dark header { background:rgba(20,24,38,0.97); }
    body.dark .app-brand .brand-name, body.dark .app-brand .brand-sub { font-size:.6rem; font-weight:700; letter-spacing:.12em; color:#a0836a; text-transform:uppercase; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
    body.dark .tab { background:#1e2433; color:#64748b; }
    body.dark .tab.active { background:#252d42; color:var(--brand); }
    body.dark .tab:hover { background:#252d42; }
    body.dark .btn.ghost { background:#1e2433; color:var(--ink); border-color:#2d3447; }
    body.dark .btn.ghost:hover { background:#252d42; }
    body.dark .pill { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.10); color:var(--ink); }
    body.dark .kbd { background:#252d42; border-color:#2d3447; color:var(--ink); }
    body.dark .sidebar { background:#181e2d; border-right-color:#2d3447; }
    body.dark .sidebar-header { background:#181e2d; border-bottom-color:#2d3447; color:var(--muted); }
    body.dark .scene-search { background:#1e2433; border-bottom-color:#2d3447; color:var(--ink); }
    body.dark input:not([type='range']):not([type='checkbox']):not([type='radio']),
    body.dark textarea,
    body.dark select {
      background: #1e2433;
      border-color: #2d3447;
      color: var(--ink);
    }
    body.dark input::placeholder,
    body.dark textarea::placeholder { color: #4d5a70; }
    body.dark .scene-search:focus { background:#252d42; border-bottom-color:var(--brand); }
    body.dark .scene-item { color:var(--ink); border-bottom-color:#1e2433; }
    body.dark .scene-item:hover { background:#252d42; color:var(--brand); }
    body.dark .scene-item.active { background:#1d2d4a; border-left-color:var(--brand); }
    body.dark .scene-num { background:#252d42; color:var(--muted); }
    body.dark .breakdown-tools { background:#181e2d; }
    body.dark .tag-btn { background:#1e2433; border-color:#2d3447; color:var(--ink); }
    body.dark .tag-btn:hover { background:#252d42; }
    body.dark .editor-frame { background:#13172a; }
    body.dark .script-page-sheet { background: var(--paper); color: var(--ink); box-shadow: 0 8px 40px rgba(0,0,0,.6); }
    body.dark .page-marker { background:#252d42; border-top-color:#2d3447; border-bottom-color:#2d3447; color:#64748b; }
    body.dark #mode-indicator { background:rgba(20,24,38,0.92); }
    body.dark #mobile-format-bar { background:#181e2d; border-color:#2d3447; }
    body.dark .format-chip { background:#1e2433; border-color:#2d3447; color:var(--ink); }
    body.dark .format-chip.active-chip { background:#1d2d4a; border-color:var(--brand); color:var(--brand); }
    body.dark #tag-float-bar { background:#0f1320; }
    body.dark #find-replace-bar { background:#1e2433; border-color:#2d3447; color:var(--ink); }
    body.dark #find-replace-bar input { background:#252d42; border-color:#2d3447; color:var(--ink); }
    body.dark #scene-jump-bar { background:#1e2433; border-color:#2d3447; }
    body.dark #scene-jump-bar input { background:#252d42; border-color:#2d3447; color:var(--ink); }
    body.dark .sj-item:hover, body.dark .sj-item.sj-active { background:#252d42; }
    body.dark .modal { background:#1e2433; }
    body.dark .modal-header { background:linear-gradient(135deg,rgba(77,142,248,.10),rgba(30,36,51,1)); border-bottom-color:#2d3447; }
    body.dark .modal-body { color:var(--ink); }
    body.dark .modal-footer { background:#181e2d; border-top-color:#2d3447; }
    body.dark .modal-handle { background:#2d3447; }
    body.dark input, body.dark textarea, body.dark select { background:#252d42; border-color:#2d3447; color:var(--ink); }
    body.dark .app-pad { background:#13172a; }
    body.dark .card { background:#1e2433; box-shadow:0 8px 28px rgba(0,0,0,.45); border: 1px solid #2d3447; }
    body.dark table { color:var(--ink); }
    body.dark th, body.dark td { border-bottom-color:#2d3447; }
    body.dark thead th { background:#181e2d; border-bottom-color:#2d3447; }
    body.dark .note { color:var(--muted); }
    body.dark .report-scene-header { background:#252d42; color:var(--ink); }
    body.dark .report-scene-header:hover { background:#2d3447; }
    body.dark .strip-column { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
    body.dark .strip { background:#1e2433; border-color:#2d3447; }
    body.dark .strip-int-day  { background:#1e2433; }
    body.dark .strip-int-night{ background:#181e2d; }
    body.dark .strip-ext-day  { background:#21261a; }
    body.dark .strip-ext-night{ background:#16241c; } /* green family — matches the light-mode convention */
    body.dark .strip-ie-day   { background:#261d14; } /* orange family */
    body.dark .strip-ie-night { background:#241420; } /* pink family */
    body.dark .strip-header { background:#292e1e; }
    body.dark .stripboard-toolbar { background:rgba(0,0,0,.25); border-bottom-color:rgba(255,255,255,.08); }
    body.dark .strip-pages { background:#252d42; color:var(--muted); }
    body.dark .day-total-bar { border-bottom-color:rgba(255,255,255,.08); color:var(--muted); }
    body.dark .folder-body { background:#232939; border-color:#2d3447; }
    body.dark .folder-tab { background:#2d3447 !important; border-color:#3d4a60 !important; }
    body.dark .folder-label { background:#1e2433; border-color:#2d3447; color:var(--ink); }
    body.dark .folder-meta { color:#64748b; }
    body.dark #bottom-nav { background:rgba(20,24,38,0.96); border-top-color:#2d3447; }
    body.dark .btab-label { color:var(--muted); }
    body.dark .overflow-sheet { background:#1e2433; }
    body.dark .overflow-handle { background:#2d3447; }
    body.dark #overflow-sheet [style*='background:#e5e7eb'] { background:#2d3447 !important; }
    body.dark #overflow-sheet [style*="background:#e5e7eb"] { background:#2d3447 !important; }
    /* Dark mode section labels in overflow menu */
    body.dark #overflow-sheet [style*='color:var(--muted)'] { color: #64748b !important; }
    body.dark .mobile-sidebar-sheet { background:#181e2d; }
    body.dark .mobile-sidebar-handle { background:#2d3447; }
    body.dark #local-banner { background:#1a1500; border-bottom-color:#4a3800; color:#fbbf24; }
    body.dark .tools-dropdown { background:#1e2433; border-color:#2d3447; }
    body.dark .tools-item { color:var(--ink); }
    body.dark .tools-item:hover { background:#252d42; }
    body.dark .tools-item kbd { background:#252d42; border-color:#2d3447; color:var(--muted); }
    body.dark .tools-group-label { color:var(--muted); }
    body.dark .tools-divider { background:#2d3447; }
    body.dark #tools-btn.open { background:#1d2d4a; border-color:var(--brand); color:var(--brand); }

    body.dark .scene-oneliner { color:var(--muted); }
    body.dark .callsheet-production-header { background:linear-gradient(135deg,#0f1320,#1a2030); }
    body.dark .fr-highlight { background:#78350f !important; outline-color:#b45309; }
    body.dark .fr-current   { background:#14532d !important; outline-color:#16a34a; }
    /* Tag chips always use pastel backgrounds, so force dark text — otherwise
       dark mode's light page ink makes chip labels unreadable on the pastels. */
    body.dark .tag { filter:saturate(0.7) brightness(0.85); color:#111827 !important; }
    body.dark .scene-note-field { background:#252d42; border-color:#2d3447; color:var(--ink); }
    body.dark .pop-btn { background:#252d42; color:var(--ink); }
    body.dark .pop-btn:hover { background:#2d3447; }
    body.dark #user-pop { background:#1e2433; border-color:#2d3447; }
    body.dark .pop-name { color:var(--ink); }
    body.dark .pop-email, body.dark .pop-sync { color:var(--muted); }
    /* Dark scrollbars */
    body.dark ::-webkit-scrollbar { width:6px; height:6px; }
    body.dark ::-webkit-scrollbar-track { background:#181e2d; }
    body.dark ::-webkit-scrollbar-thumb { background:#2d3447; border-radius:4px; }
    body.dark ::-webkit-scrollbar-thumb:hover { background:#3d4a60; }

    /* ── FOCUS / DISTRACTION-FREE MODE ──────────────────────── */
    body.focus-mode header .nav-tabs,
    body.focus-mode header .header-actions { opacity: 0; pointer-events: none; transition: opacity .3s; }
    body.focus-mode header:hover .nav-tabs,
    body.focus-mode header:hover .header-actions { opacity: 1; pointer-events: auto; }
    body.focus-mode .sidebar { width: 0; overflow: hidden; border: none; transition: width .3s cubic-bezier(0.4,0,0.2,1); }
    body.focus-mode .script-page-sheet { max-width: 680px; }
    body.focus-mode .editor-frame { background: rgba(0,0,0,.45); }
    body.focus-mode #mode-indicator { opacity: .3; transition: opacity .3s; }
    body.focus-mode #mode-indicator:hover { opacity: 1; }
    #focus-btn { display:none; }
    #focus-btn.visible { display:inline-flex; }
    #typewriter-btn { display:none; }
    #typewriter-btn.visible { display:inline-flex; }
    #typewriter-btn.active { background: var(--brand); color: white; border-color: var(--brand); }
    /* Typewriter mode: dim all lines except the active one */
    body.typewriter-mode .page-content .line { opacity: 0.35; transition: opacity .15s; }
    body.typewriter-mode .page-content .line.tw-active { opacity: 1; }

    /* ── WRITING GOAL BAR ────────────────────────────────────── */
    #goal-bar {
      display: none;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      height: 4px;
      z-index: 998;
      background: #e5e7eb;
    }
    #goal-bar.visible { display: block; }
    #goal-progress {
      height: 100%;
      background: linear-gradient(90deg, var(--brand), #7c3aed);
      transition: width .4s cubic-bezier(0.4,0,0.2,1);
      border-radius: 0 2px 2px 0;
      max-width: 100%;
    }
    #goal-progress.complete { background: linear-gradient(90deg, #16a34a, #34d399); }
    body.dark #goal-bar { background: #252d42; }

    /* ── SNAPSHOT TOAST ──────────────────────────────────────── */
    .snapshot-toast {
      position: fixed;
      /* FIX: use 80px on mobile to clear the 60px bottom-nav + safe area */
      bottom: calc(18px + env(safe-area-inset-bottom, 0px));
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: #1f2937;
      color: white;
      padding: 10px 16px;
      border-radius: 10px;
      font-size: .8rem;
      font-weight: 700;
      z-index: 9998;
      box-shadow: 0 4px 20px rgba(0,0,0,.3);
      display: flex;
      align-items: center;
      gap: 10px;
      opacity: 0;
      transition: opacity .2s, transform .2s;
      pointer-events: none;
      white-space: nowrap;
    }
    .snapshot-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
    .snapshot-toast button { background: var(--brand); color: white; border: none; border-radius: 6px; padding: 4px 10px; font-weight: 800; cursor: pointer; font-size: .75rem; font-family: inherit; }
    body.dark .snapshot-toast { background: #0f1320; }

    /* ── TTS PLAYER BAR ──────────────────────────────────────── */
    #tts-bar {
      display: none;
      position: fixed;
      bottom: calc(0px + var(--sab));
      left: 0; right: 0;
      background: #111827;
      will-change: transform, opacity;
      color: #e5e9f0;
      z-index: 1900; /* below modal-root (2000) so modals always render on top */
      box-shadow: 0 -4px 30px rgba(0,0,0,.45);
      border-top: 1px solid rgba(255,255,255,.07);
      flex-direction: column;
    }
    #tts-bar.tts-open { display: flex; }
    /* On mobile push bottom-nav up when TTS bar is open */
    body.tts-active #bottom-nav { bottom: calc(88px + var(--sab)); }
    body.tts-active .view-container { padding-bottom: calc(100px + var(--sab) + 60px); }
    body.tts-active .snapshot-toast { bottom: calc(100px + var(--sab) + 18px); }
    #tts-bar-inner {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      flex-wrap: wrap;
    }
    /* Now-reading panel */
    #tts-now-reading {
      display: flex;
      align-items: center;
      gap: 9px;
      flex: 1;
      min-width: 0;
    }
    #tts-speaker-avatar {
      font-size: 1.3rem;
      flex-shrink: 0;
      width: 34px; height: 34px;
      border-radius: 50%;
      background: rgba(255,255,255,.08);
      display: flex; align-items: center; justify-content: center;
      transition: background .2s;
    }
    #tts-bar.tts-playing #tts-speaker-avatar {
      background: rgba(37,99,235,.35);
      animation: tts-pulse 1.6s ease-in-out infinite;
    }
    @keyframes tts-pulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(37,99,235,.5); }
      50%      { box-shadow: 0 0 0 8px rgba(37,99,235,.0); }
    }
    #tts-label-col {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    #tts-speaker-name {
      font-size: .8rem;
      font-weight: 800;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 180px;
    }
    #tts-line-preview {
      font-size: .68rem;
      color: #8892a4;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 220px;
      margin-top: 1px;
    }
    /* Transport controls */
    #tts-controls {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }
    .tts-btn {
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      color: #e5e9f0;
      border-radius: 10px;
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      font-size: .9rem;
      cursor: pointer;
      transition: background .12s, transform .1s;
      flex-shrink: 0;
      min-width: 36px; /* touch target */
    }
    .tts-btn:hover  { background: rgba(255,255,255,.16); }
    .tts-btn:active { transform: scale(.9); }
    .tts-btn-primary {
      background: var(--brand);
      border-color: var(--brand);
      width: 44px; height: 44px;
      font-size: 1.1rem;
      border-radius: 50%;
    }
    .tts-btn-primary:hover { background: var(--brand-hover); }
    #tts-bar.tts-playing .tts-btn-primary { background: #7c3aed; border-color: #7c3aed; }
    .tts-btn-danger { border-color: rgba(185,28,28,.4); }
    .tts-btn-danger:hover { background: rgba(185,28,28,.3); color: #fca5a5; }
    /* Options */
    #tts-options {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }
    .tts-opt-label {
      font-size: .62rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: #64748b;
      white-space: nowrap;
    }
    #tts-rate,
    #tts-scene-select {
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.12);
      color: #e5e9f0;
      border-radius: 7px;
      padding: 5px 8px;
      font-size: .75rem;
      font-family: inherit;
      cursor: pointer;
      min-height: 32px;
    }
    #tts-scene-select { max-width: 160px; }
    #tts-rate:focus, #tts-scene-select:focus { outline: 2px solid var(--brand); }
    /* Progress bar */
    #tts-progress-track {
      height: 3px;
      background: rgba(255,255,255,.08);
      width: 100%;
    }
    #tts-progress-fill {
      height: 100%;
      background: var(--brand);
      width: 0%;
      transition: width .4s linear;
    }
    /* Mobile adjustments for TTS bar */
    @media (max-width: 760px) {
      #tts-bar-inner { padding: 8px 12px; gap: 8px; }
      #tts-options { order: 3; width: 100%; justify-content: flex-end; }
      #tts-scene-select { max-width: 130px; flex: 1; }
      #tts-now-reading { flex: 1; min-width: 0; }
      #tts-line-preview { max-width: 140px; }
      #tts-speaker-name { max-width: 120px; }
      body.tts-active #bottom-nav { bottom: calc(108px + var(--sab)); }
      body.tts-active .view-container { padding-bottom: calc(130px + var(--sab) + 60px); }
    }

    /* ── SCENE COLOR LABEL DOT ON STRIP ─────────────────────── */
    .strip-color-dot {
      width: 10px; height: 10px; border-radius: 50%;
      border: 1.5px solid rgba(0,0,0,.2);
      display: inline-block; flex-shrink: 0;
      margin-left: 4px; vertical-align: middle;
    }
    /* Color swatch picker in modal */
    .color-swatch-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
    .color-swatch {
      width: 26px; height: 26px; border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
      transition: transform .1s, border-color .1s;
    }
    .color-swatch:hover { transform: scale(1.15); }
    .color-swatch.selected { border-color: var(--ink); transform: scale(1.15); }

    /* ── SHORTCUT GRID ───────────────────────────────────────────── */
    .shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
    @media (max-width: 480px) { .shortcut-grid { grid-template-columns: 1fr; } }
    .shortcut-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .82rem; }
    .shortcut-row:last-child { border-bottom: none; }
    .shortcut-label { color: var(--muted); font-weight: 600; }

    /* ── SHOOTING SCHEDULE ───────────────────────────────────────── */
    /* ── SHOOTING SCHEDULE ───────────────────────────────────── */
    /* Summary bar */
    .sched-summary-bar {
      display: flex; gap: 8px; flex-wrap: wrap;
      margin-bottom: 18px;
    }
    .sched-summary-pill {
      background: rgba(var(--brand-rgb),.08);
      border: 1px solid rgba(var(--brand-rgb),.18);
      color: var(--brand);
      border-radius: 999px;
      padding: 4px 12px;
      font-size: .75rem;
      font-weight: 700;
    }
    /* Empty state */
    .sched-empty-state {
      text-align: center;
      padding: 48px 24px;
      color: var(--muted);
    }
    /* Day card */
    .sched-day-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      margin-bottom: 20px;
      overflow: hidden;
      background: var(--paper);
    }
    /* Header */
    .sched-day-header {
      padding: 14px 16px 12px;
      background: linear-gradient(135deg, var(--brand) 0%, #7c3aed 100%);
      color: white;
    }
    .sched-day-header-top {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }
    .sched-day-num {
      font-size: 1.05rem;
      font-weight: 900;
      letter-spacing: .02em;
      white-space: nowrap;
    }
    .sched-day-date-badge {
      background: rgba(255,255,255,.22);
      border: 1px solid rgba(255,255,255,.30);
      border-radius: 8px;
      padding: 5px 11px;
      font-size: .78rem;
      font-weight: 800;
      cursor: pointer;
      transition: background .12s;
      white-space: nowrap;
      color: white;
      min-height: 32px;
    }
    .sched-day-date-badge:hover,
    .sched-day-date-badge:focus { background: rgba(255,255,255,.38); outline: none; }
    .sched-day-date-badge.weekend { background: rgba(255,80,80,.38); border-color: rgba(255,120,120,.4); }
    /* ── SCHEDULE CALENDAR VIEW ────────────────────────────────────────── */
    .sched-view-toggle { display: flex; gap: 0; margin-bottom: 14px; border-radius: 8px; overflow: hidden; border: 1.5px solid #e5e7eb; width: fit-content; }
    .sched-view-btn { padding: 6px 16px; font-size: .78rem; font-weight: 700; border: none; background: var(--paper); color: var(--muted); cursor: pointer; transition: all .12s; }
    .sched-view-btn.active { background: var(--brand); color: #fff; }
    .sched-month-title { font-weight: 800; font-size: .95rem; margin-bottom: 10px; color: var(--ink); }
    .sched-month-header { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 3px; }
    .sched-month-header div { font-size: .62rem; font-weight: 800; text-transform: uppercase; color: var(--muted); text-align: center; padding: 3px; }
    .sched-month-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 20px; }
    .sched-cal-cell { min-height: 58px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 4px 5px; font-size: .68rem; background: var(--paper); transition: background .1s; }
    .sched-cal-cell.has-shoot { background: #eff6ff; border-color: #93c5fd; cursor: pointer; }
    .sched-cal-cell.has-shoot:hover { background: #dbeafe; }
    .sched-cal-cell.today { border: 2px solid var(--brand); }
    .sched-cal-cell.cal-weekend { background: #fafafa; }
    .sched-cal-cell.other-month { opacity: .28; }
    .sched-cal-daynum { font-weight: 800; font-size: .7rem; color: var(--muted); margin-bottom: 3px; }
    .sched-cal-shoot-badge { background: var(--brand); color: #fff; border-radius: 4px; padding: 1px 5px; font-size: .6rem; font-weight: 800; display: block; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sched-cal-scenes { font-size: .58rem; color: var(--muted); }
    body.dark .sched-cal-cell { border-color: #2a2a3a; }
    body.dark .sched-cal-cell.has-shoot { background: #1e3a5f; border-color: #2563eb; }
    body.dark .sched-cal-cell.cal-weekend { background: #0f1320; }
    .sched-day-header-meta {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }
    .sched-day-stat {
      font-size: .72rem;
      font-weight: 700;
      opacity: .88;
      white-space: nowrap;
    }
    .sched-day-stat + .sched-day-stat::before {
      content: '·';
      margin-right: 10px;
      opacity: .6;
    }
    /* Fields grid — 2 columns on desktop, stacked on mobile */
    .sched-fields-grid {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 0;
      border-bottom: 1px solid var(--line);
      background: rgba(var(--brand-rgb),.025);
    }
    .sched-field-group {
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .sched-field-group + .sched-field-group {
      border-left: 1px solid var(--line);
    }
    .sched-field-label {
      font-size: .68rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--muted);
      white-space: nowrap;
    }
    .sched-field-input {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 7px 10px;
      font: inherit;
      font-size: .84rem;
      background: var(--paper);
      color: var(--ink);
      min-height: var(--touch-target);
      width: 100%;
      box-sizing: border-box;
      transition: border-color .12s;
    }
    .sched-field-input:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12);
    }
    /* Scene list */
    .sched-scenes-list {
      padding: 0;
    }
    .sched-scene-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 11px 14px;
      border-bottom: 1px solid var(--line);
    }
    .sched-scene-row:last-child { border-bottom: none; }
    .sched-scene-num {
      font-weight: 900;
      font-size: .78rem;
      color: var(--brand);
      min-width: 22px;
      padding-top: 2px;
      flex-shrink: 0;
      text-align: center;
      background: rgba(var(--brand-rgb),.08);
      border-radius: 5px;
      padding: 2px 5px;
      line-height: 1.5;
    }
    .sched-scene-body {
      flex: 1;
      min-width: 0;
    }
    .sched-scene-top {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      justify-content: space-between;
    }
    .sched-scene-slug {
      font-weight: 700;
      font-size: .84rem;
      flex: 1;
      min-width: 0;
      word-break: break-word;
    }
    .sched-scene-badges {
      display: flex;
      gap: 5px;
      align-items: center;
      flex-shrink: 0;
    }
    .sched-scene-pages {
      font-size: .7rem;
      font-weight: 800;
      color: var(--muted);
      background: rgba(0,0,0,.05);
      border-radius: 5px;
      padding: 1px 5px;
    }
    .sched-scene-summary {
      font-size: .75rem;
      color: var(--muted);
      margin-top: 3px;
      line-height: 1.4;
    }
    /* Scene meta chips */
    .sched-scene-meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 5px;
    }
    .sched-meta-chip {
      font-size: .68rem;
      font-weight: 600;
      padding: 2px 7px;
      border-radius: 999px;
      border: 1px solid transparent;
      white-space: nowrap;
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sched-chip-cast  { background: rgba(22,163,74,.08);   border-color: rgba(22,163,74,.25);   color: #15803d; }
    .sched-chip-loc   { background: rgba(37,99,235,.08);   border-color: rgba(37,99,235,.25);   color: #1d4ed8; }
    .sched-chip-prop  { background: rgba(217,119,6,.08);   border-color: rgba(217,119,6,.25);   color: #b45309; }
    /* Cast row with interactive chips */
    .sched-cast-row {
      display: flex; flex-wrap: wrap; align-items: center;
      gap: 4px; font-size: .68rem; font-weight: 600; color: #15803d;
    }
    .sched-cast-chip {
      display: inline-flex; align-items: center; gap: 3px;
      background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.25);
      color: #15803d; border-radius: 999px; padding: 2px 7px;
      font-size: .68rem; font-weight: 600; white-space: nowrap;
    }
    .sched-cast-chip.sched-cast-override {
      background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.3); color: #1d4ed8;
    }
    .sched-cast-chip-del {
      cursor: pointer; opacity: .5; font-size: .6rem; line-height: 1;
      margin-left: 1px; font-weight: 900;
    }
    .sched-cast-chip-del:hover { opacity: 1; color: #dc2626; }
    .sched-cast-actions { display: inline-flex; gap: 3px; margin-left: 2px; }
    .sched-cast-act-btn {
      background: rgba(22,163,74,.1); border: 1px solid rgba(22,163,74,.25);
      color: #15803d; border-radius: 6px; padding: 1px 6px;
      font-size: .68rem; font-weight: 800; cursor: pointer; line-height: 1.4;
      font-family: inherit;
    }
    .sched-cast-act-btn:hover { background: rgba(22,163,74,.22); }
    /* ── Mobile cast row — narrow screens ── */
    @media (max-width: 520px) {
      .sched-cast-row {
        width: 100%;
        gap: 3px;
        row-gap: 4px;
      }
      .sched-cast-chip {
        font-size: .62rem;
        padding: 1px 5px;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .sched-cast-actions {
        margin-left: auto; /* push to end of row */
        gap: 2px;
      }
      .sched-cast-act-btn {
        font-size: .62rem;
        padding: 1px 5px;
        min-width: 22px;
        text-align: center;
      }
    }
    .sched-no-scenes {
      padding: 14px 16px;
      font-size: .8rem;
      color: var(--muted);
      font-style: italic;
    }
    /* Notes section */
    .sched-notes-section {
      padding: 10px 14px 14px;
      background: rgba(0,0,0,.018);
      border-top: 1px solid var(--line);
    }
    .sched-notes-input {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--paper);
      font: inherit;
      font-size: .82rem;
      color: var(--muted);
      resize: vertical;
      outline: none;
      padding: 8px 10px;
      min-height: 60px;
      box-sizing: border-box;
      transition: border-color .12s, color .12s;
    }
    .sched-notes-input:focus { color: var(--ink); border-color: var(--brand); }

    /* Dark mode overrides */
    body.dark .sched-day-card { border-color: #2d3447; background: var(--paper); }
    body.dark .sched-field-group { background: transparent; }
    body.dark .sched-fields-grid { background: rgba(255,255,255,.02); border-bottom-color: #2d3447; }
    body.dark .sched-field-group + .sched-field-group { border-left-color: #2d3447; }
    body.dark .sched-field-input { background: #252d42; border-color: #2d3447; color: var(--ink); }
    body.dark .sched-scene-row { border-bottom-color: #2d3447; }
    body.dark .sched-notes-section { background: rgba(255,255,255,.015); border-top-color: #2d3447; }
    body.dark .sched-notes-input { background: #252d42; border-color: #2d3447; }
    body.dark .sched-chip-cast  { background: rgba(52,211,153,.07); border-color: rgba(52,211,153,.2); color: #34d399; }
    body.dark .sched-chip-loc   { background: rgba(77,142,248,.07); border-color: rgba(77,142,248,.2); color: #4d8ef8; }
    body.dark .sched-chip-prop  { background: rgba(251,191,36,.07); border-color: rgba(251,191,36,.2); color: #fbbf24; }
    body.dark .sched-summary-pill { background: rgba(77,142,248,.1); border-color: rgba(77,142,248,.2); }
    body.dark .sched-scene-pages { background: rgba(255,255,255,.07); }

    /* ── CONTACTS ────────────────────────────────────────────── */
    .contacts-grid-inner {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 14px;
    }
    .contacts-empty {
      text-align: center;
      padding: 48px 24px;
      color: var(--muted);
    }
    /* Card */
    .contact-card {
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      background: var(--paper);
      cursor: pointer;
      transition: box-shadow .15s, transform .12s, border-color .15s;
      display: flex;
      flex-direction: column;
    }
    .contact-card:hover {
      box-shadow: var(--shadow-soft);
      border-color: rgba(var(--brand-rgb),.3);
      transform: translateY(-1px);
    }
    .contact-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); transform: translateY(-1px); }
    .contact-card:active { transform: scale(.985); box-shadow: none; }
    .contact-card:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }
    /* Header */
    .contact-card-header {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px 14px 10px;
    }
    .contact-avatar {
      width: 44px; height: 44px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-weight: 900; font-size: 1rem; color: white;
      flex-shrink: 0;
      letter-spacing: .04em;
    }
    .contact-card-info { flex: 1; min-width: 0; }
    .contact-card-name {
      font-weight: 800;
      font-size: .92rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 2px;
    }
    .contact-card-role {
      font-size: .75rem;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 5px;
    }
    .contact-dept-badge {
      display: inline-block;
      font-size: .62rem;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: .05em;
    }
    .contact-delete-btn {
      background: none;
      border: none;
      color: var(--muted);
      cursor: pointer;
      padding: 2px 4px;
      border-radius: 5px;
      font-size: .85rem;
      flex-shrink: 0;
      opacity: .5;
      transition: opacity .12s, color .12s;
      min-width: 24px; min-height: 24px;
    }
    .contact-delete-btn:hover { opacity: 1; color: var(--danger); }
    /* Body */
    .contact-card-body {
      padding: 2px 14px 10px;
      flex: 1;
    }
    .contact-detail {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: .78rem;
      margin-bottom: 4px;
      color: var(--ink);
    }
    .contact-detail a {
      color: var(--brand);
      text-decoration: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .contact-detail a:hover { text-decoration: underline; }
    .contact-detail-icon { font-size: .8rem; flex-shrink: 0; }
    .contact-notes {
      font-size: .73rem;
      color: var(--muted);
      margin-top: 6px;
      line-height: 1.4;
      font-style: italic;
    }
    /* Social row */
    .contact-social-row {
      display: flex;
      gap: 6px;
      align-items: center;
      padding: 8px 14px;
      border-top: 1px solid var(--line);
      flex-wrap: wrap;
    }
    .contact-social-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px; height: 30px;
      border-radius: 8px;
      background: rgba(var(--brand-rgb),.06);
      border: 1px solid rgba(var(--brand-rgb),.14);
      font-size: .9rem;
      text-decoration: none;
      transition: background .14s cubic-bezier(.2,.8,.3,1), transform .12s cubic-bezier(.34,1.56,.64,1), border-color .14s;
      cursor: pointer;
    }
    .contact-social-icon:hover {
      background: rgba(var(--brand-rgb),.15);
      transform: scale(1.12);
    }
    .contact-social-more {
      font-size: .68rem;
      font-weight: 700;
      color: var(--muted);
    }
    /* Modal social fields */
    .contact-social-fields {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .contact-social-field {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .contact-social-field-icon {
      font-size: 1.1rem;
      width: 28px;
      text-align: center;
      padding-top: 22px;
      flex-shrink: 0;
    }
    .contact-social-label {
      display: block;
      font-size: .68rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--muted);
      margin-bottom: 3px;
    }
    .contact-modal-input {
      width: 100%;
      min-height: var(--touch-target);
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      font: inherit;
      font-size: .85rem;
      background: var(--paper);
      color: var(--ink);
      box-sizing: border-box;
      transition: border-color .12s;
    }
    .contact-modal-input:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.1);
    }
    /* ── EASTER EGG contact card glow animation ─────────────────── */
    @keyframes egg-glow {
      0%,100% { box-shadow: 0 0 8px 0 rgba(139,92,246,0.3), 0 4px 18px rgba(0,0,0,0.25); }
      50%      { box-shadow: 0 0 22px 4px rgba(139,92,246,0.55), 0 4px 18px rgba(0,0,0,0.25); }
    }
    #easter-egg-contact:hover {
      transform: translateY(-3px) scale(1.015);
      border-color: rgba(139,92,246,0.85) !important;
    }
    /* Dark mode */

    /* ─────────────────────────────────────────────────────
       AUDITIONS MODULE
    ───────────────────────────────────────────────────── */
    @keyframes aud-gold-glow {
      0%,100%{ box-shadow:0 0 8px rgba(234,179,8,.4),0 2px 12px rgba(0,0,0,.07); }
      50%    { box-shadow:0 0 22px rgba(234,179,8,.75),0 2px 12px rgba(0,0,0,.07); }
    }
    /* rank colour tokens */
    .aud-rank-gold   { --rc:#ca8a04; --rb:#eab308; --rbg:linear-gradient(135deg,#fef9c3,#fef08a); }
    .aud-rank-green  { --rc:#16a34a; --rb:#22c55e; --rbg:linear-gradient(135deg,#f0fdf4,#dcfce7); }
    .aud-rank-blue   { --rc:#1d4ed8; --rb:#3b82f6; --rbg:linear-gradient(135deg,#eff6ff,#dbeafe); }
    .aud-rank-yellow { --rc:#d97706; --rb:#f59e0b; --rbg:linear-gradient(135deg,#fffbeb,#fef3c7); }
    .aud-rank-red    { --rc:#b91c1c; --rb:#ef4444; --rbg:linear-gradient(135deg,#fef2f2,#fee2e2); }
    .aud-rank-none   { --rc:#6b7280; --rb:#e5e7eb; --rbg:var(--paper); }

    .aud-role-card {
      border:1px solid #e5e7eb; border-radius:16px; margin-bottom:16px;
      background:var(--paper); box-shadow:0 1px 4px rgba(0,0,0,.05);
      overflow:hidden;
    }
    .aud-role-header {
      display:flex; align-items:center; gap:12px; padding:13px 16px;
      background:linear-gradient(90deg,#f8faff,#f9fafb);
      border-bottom:1px solid #f3f4f6; cursor:pointer; user-select:none;
      flex-wrap:wrap;
    }
    .aud-role-header:hover { background:linear-gradient(90deg,#f0f5ff,#f3f5fb); }
    .aud-role-body   { padding:16px 18px; }

    /* actor card */
    .aud-actor-card {
      border:1.5px solid var(--rb,#e5e7eb); border-radius:13px;
      padding:13px 15px; background:var(--rbg,var(--paper));
      position:relative; transition:box-shadow .15s,transform .12s;
    }
    .aud-actor-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.09); transform:translateY(-1px); }
    .aud-actor-card.aud-rank-gold { animation:aud-gold-glow 2.5s ease-in-out infinite; }

    /* rank pip buttons */
    .aud-pip {
      display:inline-flex; align-items:center; justify-content:center;
      width:27px; height:27px; border-radius:50%; border:2px solid var(--rb,#e5e7eb);
      background:var(--paper); font-size:.76rem; cursor:pointer; flex-shrink:0;
      transition:transform .1s, box-shadow .1s;
    }
    .aud-pip:hover        { transform:scale(1.18); box-shadow:0 2px 8px rgba(0,0,0,.15); }
    .aud-pip.aud-pip-on   { background:var(--rb); color:#fff; }

    /* criteria rating dots */
    .aud-dot-row  { display:flex; align-items:center; gap:7px; padding:2px 0; }
    .aud-dot-lbl  { font-size:.7rem; color:var(--muted); width:108px; flex-shrink:0; }
    /* ── AUDITIONS SELF-TAPE VIDEO LINK ──────────────────────────────── */
    .aud-tape-row { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
    .aud-tape-input { flex: 1; font-size: .72rem; padding: 4px 8px; }
    .aud-tape-link { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; color: var(--brand); text-decoration: none; padding: 3px 9px; border-radius: 6px; border: 1.5px solid var(--brand); background: rgba(37,99,235,.06); white-space: nowrap; }
    .aud-tape-link:hover { background: rgba(37,99,235,.13); }
    .aud-dots     { display:flex; gap:4px; }
    .aud-dot {
      width:11px; height:11px; border-radius:50%; background:#e5e7eb;
      cursor:pointer; transition:background .1s, transform .1s; flex-shrink:0;
    }
    .aud-dot:hover   { transform:scale(1.28); }
    .aud-dot.aud-dot-on { background:var(--rb,var(--brand)); }

    /* status badge on role */
    .aud-status-pill {
      font-size:.7rem; font-weight:700; border-radius:20px;
      padding:3px 10px; white-space:nowrap; border:2px solid transparent;
    }

    /* sides chip */
    .aud-sides-chip {
      display:inline-flex; align-items:center; gap:3px; font-size:.68rem;
      background:#e0e7ff; color:#3730a3; border-radius:20px;
      padding:2px 8px; font-weight:700; white-space:nowrap;
    }

    /* rank legend strip */
    .aud-legend { display:flex; gap:12px; flex-wrap:wrap; align-items:center;
                  padding:8px 14px; background:#f9fafb;
                  border-radius:10px; border:1px solid #e5e7eb; margin-bottom:16px; }
    .aud-legend-item { display:flex; align-items:center; gap:5px; font-size:.74rem; font-weight:700; }

    body.dark .aud-role-card  { border-color:#2d3447; background:#1e2433; }
    body.dark .aud-role-header{ background:linear-gradient(90deg,#1a2240,#1e2433); border-bottom-color:#2d3447; }
    body.dark .aud-actor-card { background:#13172a; }
    body.dark .aud-rank-none  { background:var(--paper); }
    body.dark .aud-legend     { background:#1a2240; border-color:#2d3447; }
    body.dark .aud-dot        { background:#2d3447; }

        body.dark .contact-card { border-color: #2d3447; }
    body.dark .contact-card:hover { border-color: rgba(77,142,248,.4); }
    body.dark .contact-social-row { border-top-color: #2d3447; }
    body.dark .contact-social-icon { background: rgba(77,142,248,.08); border-color: rgba(77,142,248,.35); }
    body.dark .contact-modal-input { background: #252d42; border-color: #2d3447; color: var(--ink); }
    /* Mobile */
    @media (max-width: 760px) {
      .contacts-grid-inner { grid-template-columns: 1fr; }
    }
    @media (max-width: 480px) {
      .contacts-grid-inner { grid-template-columns: 1fr; }
      #contacts-search { width: 140px !important; }
    }
    #schedule-config-bar {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 20px;
      padding: 14px;
      background: rgba(var(--brand-rgb),.04);
      border: 1px solid rgba(var(--brand-rgb),.12);
      border-radius: 14px;
    }
    .sched-config-field {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .sched-config-field input,
    .sched-config-field select {
      min-height: var(--touch-target);
      padding: 6px 10px;
      font-size: .85rem;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--paper);
      color: var(--ink);
      font: inherit;
    }
    .sched-config-field input:focus,
    .sched-config-field select:focus {
      outline: none;
      border-color: var(--brand);
    }
    body.dark #schedule-config-bar { background: rgba(255,255,255,.03); border-color: #2d3447; }
    body.dark .sched-config-field input,
    body.dark .sched-config-field select { background: #252d42; border-color: #2d3447; color: var(--ink); }

    /* Mobile overrides for schedule */
    @media (max-width: 760px) {
      #schedule-config-bar { grid-template-columns: 1fr 1fr; }
      .sched-config-field:last-child { grid-column: 1 / -1; }
      .sched-fields-grid { grid-template-columns: 1fr; }
      .sched-field-group + .sched-field-group { border-left: none; border-top: 1px solid var(--line); }
      body.dark .sched-field-group + .sched-field-group { border-top-color: #2d3447; }
      .sched-scene-meta-row .sched-meta-chip { max-width: 140px; }
    }
    @media (max-width: 480px) {
      #schedule-config-bar { grid-template-columns: 1fr; }
      .sched-scene-row { padding: 9px 10px; gap: 7px; }
      .sched-scene-meta-row .sched-meta-chip { max-width: 100px; font-size: .62rem; }
      .sched-scene-slug { font-size: .78rem; }
    }

    /* ── DAY OUT OF DAYS ─────────────────────────────────────────── */
    .dood-table {
      border-collapse: collapse;
      width: 100%;
      font-size: .78rem;
      white-space: nowrap;
    }
    .dood-table th {
      position: sticky;
      top: 0;
      background: var(--paper);
      z-index: 2;
      padding: 6px 8px;
      font-weight: 800;
      text-align: center;
      border-bottom: 2px solid var(--line);
      font-size: .72rem;
    }
    .dood-table th.dood-name-col {
      text-align: left;
      left: 0;
      z-index: 3;
      min-width: 120px;
      max-width: 180px;
    }
    .dood-table td {
      padding: 5px 6px;
      border-bottom: 1px solid var(--line);
      text-align: center;
    }
    .dood-table td.dood-name-cell {
      text-align: left;
      font-weight: 700;
      position: sticky;
      left: 0;
      background: var(--paper);
      z-index: 1;
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .dood-cell {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 24px;
      border-radius: 5px;
      font-size: .72rem;
      font-weight: 900;
    }
    .dood-W  { background: #dcfce7; color: #166534; } /* Work */
    .dood-SW { background: #bbf7d0; color: #14532d; } /* Start/Work */
    .dood-WF { background: #fee2e2; color: #991b1b; } /* Work/Finish */
    .dood-H  { background: #ede9fe; color: #4c1d95; } /* Hold */
    .dood-F  { background: #fce7f3; color: #831843; } /* Finish */
    .dood-empty { background: transparent; color: transparent; }
    /* ── Extended DOOD markers: Travel, Rehearsal, Fitting ── */
    .dood-T  { background: #fef9c3; color: #854d0e; } /* Travel */
    .dood-R  { background: #e0f2fe; color: #075985; } /* Rehearsal */
    .dood-FT { background: #fff7ed; color: #9a3412; } /* Fitting */
    .dood-SWF { background: #d1fae5; color: #065f46; font-size:.58rem; letter-spacing:-.03em; } /* Start/Work/Finish (single day) */
    body.dark .dood-T  { background: #422006; color: #fde68a; }
    body.dark .dood-R  { background: #0c2840; color: #7dd3fc; }
    body.dark .dood-FT { background: #431407; color: #fdba74; }

    /* ── Split-screen writer+stripboard ── */
    #split-screen-container { display:none; flex-direction:row; height:100%; width:100%; position:relative; overflow:hidden; }
    #split-screen-container.active { display:flex; }
    #split-writer-pane { flex:1 1 0; min-width:240px; display:flex; flex-direction:column; overflow:hidden; }
    /* Collapse sidebar in split view so editor gets full pane width */
    #split-writer-pane .sidebar { width:0 !important; min-width:0 !important; overflow:hidden; padding:0; border:none; }
    #split-strip-pane { flex:1 1 0; min-width:240px; display:flex; flex-direction:column; overflow:hidden; border-left:3px solid var(--brand); background:var(--paper); }
    #split-strip-pane .stripboard-toolbar { position:sticky; top:0; z-index:10; border-radius:0; }
    #split-strip-pane .stripboard-scroll { flex:1 1 auto; overflow-x:auto; overflow-y:auto; }
    #split-drag-handle { width:8px; background:var(--brand); cursor:col-resize; flex-shrink:0; opacity:.35; transition:opacity .15s; position:relative; z-index:20; }
    #split-drag-handle:hover, #split-drag-handle.dragging { opacity:1; }
    #split-drag-handle::after { content:'\22EE'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; font-size:.9rem; pointer-events:none; }
    .split-pane-label { font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); padding:4px 14px; background:var(--paper); border-bottom:1px solid var(--line); flex-shrink:0; }
    #split-toggle-btn.active { background:var(--brand) !important; color:#fff !important; border-color:var(--brand) !important; }
    /* FIX (Bug #3): Do NOT hide split-toggle-btn on narrow screens.
       Instead, a resize listener (see JS) calls _deactivateSplitScreen()
       when width drops below 700px so the user is never trapped. */
    @media (max-width: 700px) {
      #split-screen-container { flex-direction: column !important; }
      #split-strip-pane { border-left: none !important; border-top: 3px solid var(--brand); min-width: 0 !important; }
      #split-drag-handle { display: none !important; }
    }

    /* ── Conflict Detection panel ── */
    #conflict-panel { display:none; margin-top:12px; border:2px solid #fca5a5; border-radius:12px; background:#fff5f5; overflow:hidden; }
    body.dark #conflict-panel { background:#2d1515; border-color:#dc2626; }
    #conflict-panel.has-conflicts { display:block; }
    .conflict-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:#fee2e2; border-bottom:1px solid #fca5a5; font-weight:800; font-size:.82rem; color:#991b1b; }
    body.dark .conflict-header { background:#3d1515; color:#fca5a5; border-color:#dc2626; }
    .conflict-item { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-bottom:1px solid #fecaca; font-size:.78rem; line-height:1.5; }
    body.dark .conflict-item { border-color:#5a1a1a; }
    .conflict-item:last-child { border-bottom:none; }
    .conflict-icon { font-size:1.1rem; flex-shrink:0; margin-top:1px; }
    .conflict-body { flex:1; }
    .conflict-actor { font-weight:800; color:var(--ink); }
    .conflict-detail { color:var(--muted); margin-top:2px; }
    .conflict-scenes { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
    .conflict-scene-pill { background:#fef2f2; border:1px solid #fca5a5; border-radius:5px; padding:1px 7px; font-size:.7rem; font-weight:700; color:#991b1b; }
    body.dark .conflict-scene-pill { background:#3d1515; border-color:#dc2626; color:#fca5a5; }
    .conflict-dist-badge { background:#b91c1c; color:#fff; border-radius:5px; padding:1px 7px; font-size:.68rem; font-weight:800; margin-left:4px; }

    /* ── Element Merge UI ── */
    .merge-candidate-row { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); font-size:.82rem; }
    .merge-candidate-row:last-child { border-bottom:none; }
    .merge-candidate-row input[type=checkbox] { accent-color:var(--brand); width:16px; height:16px; cursor:pointer; }
    .merge-candidate-name { flex:1; font-weight:600; }
    .merge-candidate-count { font-size:.7rem; color:var(--muted); white-space:nowrap; }
    .merge-group { border:1px solid var(--line); border-radius:10px; margin-bottom:12px; overflow:hidden; }
    .merge-group-header { background:#f9fafb; padding:8px 12px; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); display:flex; align-items:center; justify-content:space-between; }
    body.dark .merge-group-header { background:#1e2433; }
    .merge-master-input { width:100%; border:none; border-top:2px solid var(--brand); padding:10px 14px; font-size:.85rem; font-weight:700; background:rgba(37,99,235,.05); color:var(--ink); outline:none; box-sizing:border-box; }
    .merge-master-input::placeholder { color:var(--muted); font-weight:400; }

    .dood-day-header { font-size: .65rem; font-weight: 800; color: var(--muted); }
    .dood-date-header { font-size: .62rem; color: var(--muted); font-weight: 600; }
    .dood-weekend-col { background: rgba(0,0,0,.025); }

    /* Production date range banner */
    .dood-date-range {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 20px;
      background: linear-gradient(135deg, #eff6ff, #f0fdf4);
      border: 1px solid #bfdbfe;
      border-radius: 10px;
      padding: 12px 16px;
      margin-bottom: 16px;
      font-family: 'Inter', sans-serif;
    }
    .dood-date-range-item {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .dood-date-range-label {
      font-size: .6rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--muted);
    }
    .dood-date-range-value {
      font-size: .88rem;
      font-weight: 800;
      color: var(--ink);
      white-space: nowrap;
    }
    .dood-date-range-divider {
      font-size: 1.1rem;
      color: #93c5fd;
      font-weight: 300;
      align-self: center;
      padding-bottom: 2px;
    }
    .dood-date-range-no-date {
      font-size: .8rem;
      color: var(--muted);
      font-style: italic;
    }
    .dood-date-range-no-date a {
      color: var(--brand);
      text-decoration: underline;
      cursor: pointer;
    }
    body.dark .dood-date-range {
      background: linear-gradient(135deg, #1a2235, #1a2830);
      border-color: #1d3a5f;
    }
    body.dark .dood-table th, body.dark .dood-table td.dood-name-cell { background: #1e2433; }
    body.dark .dood-weekend-col { background: rgba(255,255,255,.04); }
    body.dark .dood-W  { background: #14532d; color: #86efac; }
    body.dark .dood-SW { background: #166534; color: #bbf7d0; }
    body.dark .dood-WF { background: #7f1d1d; color: #fca5a5; }
    body.dark .dood-H  { background: #2e1065; color: #c4b5fd; }
    body.dark .dood-F  { background: #500724; color: #fbcfe8; }

    /* ── STORYBOARD ──────────────────────────────────────────────── */
    .sb-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
    }
    @media (max-width: 600px) { .sb-grid { grid-template-columns: 1fr; } }
    .sb-panel {
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      background: var(--paper);
      box-shadow: var(--shadow-soft);
      transition: box-shadow .15s;
      display: flex;
      flex-direction: column;
    }
    .sb-panel:hover { box-shadow: var(--shadow); }
    .sb-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: var(--line);
      font-size: .75rem;
      font-weight: 800;
      color: var(--muted);
    }
    .sb-panel-num { color: var(--brand); font-size: .85rem; }
    .sb-canvas-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 16/9;
      background: #1a1a2e;
      cursor: crosshair;
      flex-shrink: 0;
    }
    .sb-canvas { display: block; width: 100%; height: 100%; touch-action: none; }

    /* Tool bar – always visible on mobile, hover on desktop */
    .sb-canvas-tools {
      position: absolute;
      bottom: 6px; left: 6px; right: 6px;
      display: flex;
      gap: 5px;
      align-items: center;
      flex-wrap: wrap;
      opacity: 0;
      transition: opacity .15s;
      pointer-events: none;
    }
    .sb-panel:hover .sb-canvas-tools,
    .sb-panel:focus-within .sb-canvas-tools,
    .sb-canvas-tools.always-visible {
      opacity: 1;
      pointer-events: auto;
    }
    @media (max-width: 900px) {
      .sb-canvas-tools { opacity: 1 !important; pointer-events: auto !important; }
    }
    .sb-tool-btn {
      background: rgba(0,0,0,.72);
      color: white;
      border: 1.5px solid rgba(255,255,255,.18);
      border-radius: 7px;
      padding: 5px 9px;
      font-size: .72rem;
      font-weight: 800;
      cursor: pointer;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: background .1s;
      font-family: inherit;
      min-height: 30px;
      touch-action: manipulation;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .sb-tool-btn:hover, .sb-tool-btn:active { background: rgba(0,0,0,.92); }
    /* ── STORYBOARD BRUSH SIZE SLIDER (mini panel) ───────────────────── */
    .sb-size-row { display: flex; align-items: center; gap: 4px; margin-top: 2px; padding: 0 2px; }
    .sb-size-row label { font-size: .56rem; color: rgba(255,255,255,.45); white-space: nowrap; }
    .sb-size-row input[type=range] { flex: 1; min-width: 36px; accent-color: var(--brand); height: 3px; cursor: pointer; }
    .sb-tool-btn.active { background: var(--brand); border-color: var(--brand); }

    /* Color swatches */
    .sb-swatch-row { display: flex; align-items: center; gap: 4px; }
    .sb-swatch {
      width: 17px; height: 17px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.3);
      cursor: pointer;
      flex-shrink: 0;
      touch-action: manipulation;
      transition: transform .1s, border-color .15s;
    }
    .sb-swatch:hover, .sb-swatch:active { transform: scale(1.25); }
    .sb-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--brand); }

    .sb-panel-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
    .sb-field-label { font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
    .sb-field-input {
      width: 100%; border: none; background: transparent;
      font: inherit; font-size: .82rem; color: var(--ink);
      padding: 0; resize: none; outline: none;
      border-bottom: 1px solid transparent;
      transition: border-color .12s; line-height: 1.4;
    }
    .sb-field-input:focus { border-bottom-color: var(--brand); }
    .sb-field-select {
      border: none; background: transparent; font: inherit;
      font-size: .82rem; color: var(--ink); padding: 0;
      outline: none; cursor: pointer;
      -webkit-appearance: none; appearance: none; background-image: none;
    }
    .sb-panel-footer {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 12px; border-top: 1px solid var(--line); gap: 8px;
    }
    .sb-drag-handle { cursor: grab; color: var(--muted); font-size: 1rem; padding: 2px 4px; }
    .sb-drag-handle:active { cursor: grabbing; }
    .sb-panel.dragging { opacity: .4; }
    .sb-panel.drag-over { outline: 2px dashed var(--brand); }
    body.dark .sb-panel { border-color: #2d3447; }
    body.dark .sb-panel-header { background: #252d42; }
    body.dark .sb-panel-footer { border-top-color: #2d3447; }
    /* ── Wardrobe character strip on storyboard panels ── */
    .sb-char-strip {
      display: flex; align-items: center; gap: 6px; padding: 6px 10px;
      border-top: 1px solid var(--line); background: rgba(99,102,241,.03);
      flex-wrap: wrap; min-height: 36px;
    }
    body.dark .sb-char-strip { background: rgba(99,102,241,.07); border-top-color: rgba(255,255,255,.07); }
    .sb-char-strip-label { font-size: .58rem; font-weight: 900; color: #9ca3af; text-transform: uppercase; letter-spacing: .07em; flex-shrink: 0; }
    .sb-char-chip {
      display: inline-flex; align-items: center; gap: 4px;
      background: #f0f4ff; border: 1px solid #c7d2fe; border-radius: 8px;
      padding: 3px 8px; font-size: .68rem; font-weight: 700; color: #4338ca;
      cursor: pointer; transition: background .12s;
      position: relative; overflow: hidden;
    }
    body.dark .sb-char-chip { background: rgba(99,102,241,.18); border-color: rgba(99,102,241,.35); color: #a5b4fc; }
    .sb-char-chip:hover { background: #e0e7ff; }
    body.dark .sb-char-chip:hover { background: rgba(99,102,241,.28); }
    .sb-char-chip img { width: 20px; height: 28px; object-fit: contain; object-position: bottom; }
    .sb-char-chip-remove { font-size: .6rem; color: #9ca3af; margin-left: 2px; line-height: 1; }
    .sb-char-chip-remove:hover { color: #ef4444; }
    .sb-add-char-btn {
      font-size: .65rem; font-weight: 800; color: #6366f1; background: rgba(99,102,241,.08);
      border: 1px dashed rgba(99,102,241,.35); border-radius: 8px; padding: 3px 8px;
      cursor: pointer; white-space: nowrap; transition: background .12s;
    }
    .sb-add-char-btn:hover { background: rgba(99,102,241,.15); }
    body.dark .sb-canvas-wrap { background: #0f1320; }
    .sb-empty { text-align: center; padding: 48px 24px; color: var(--muted); }
    .sb-empty-icon { font-size: 3rem; margin-bottom: 12px; }
    .sb-shot-type-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .sb-shot-chip {
      font-size: .68rem; font-weight: 800; padding: 3px 8px; border-radius: 6px;
      cursor: pointer; border: 1px solid var(--line); background: var(--paper);
      color: var(--muted); transition: background .1s, color .1s, border-color .1s; white-space: nowrap;
    }
    .sb-shot-chip.selected { background: var(--brand); color: white; border-color: var(--brand); }

    /* ── Storyboard stat bar (S2, S3) ────────────────────────────── */
    .sb-stat-bar { display: flex; gap: 16px; align-items: center; padding: 6px 0; font-size: .78rem; color: #6b7280; flex-wrap: wrap; margin-bottom: 4px; }
    .sb-stat-item { display: flex; align-items: center; gap: 5px; }
    .sb-stat-val { font-weight: 700; color: #1a1a2e; }
    body.dark .sb-stat-val { color: #e5e7eb; }

    /* ── Fullscreen drawing overlay ──────────────────────────────── */
    #sb-fs-overlay {
      display: none; position: fixed; inset: 0;
      z-index: 8000; background: #0d0f1a;
      flex-direction: column;
    }
    #sb-fs-overlay.open { display: flex; }
    #sb-fs-bar {
      display: flex; align-items: center; gap: 6px;
      padding: 8px 12px; background: rgba(0,0,0,.8);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      flex-shrink: 0; flex-wrap: wrap;
      border-bottom: 1px solid rgba(255,255,255,.1);
    }
    #sb-fs-canvas-wrap { flex: 1; position: relative; overflow: hidden; cursor: crosshair; }
    #sb-fs-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
    .sb-fs-btn {
      background: rgba(255,255,255,.1); color: white;
      border: 1px solid rgba(255,255,255,.2); border-radius: 8px;
      padding: 7px 12px; font-size: .8rem; font-weight: 700;
      cursor: pointer; font-family: inherit; min-height: 36px;
      touch-action: manipulation; transition: background .12s; white-space: nowrap; flex-shrink: 0;
    }
    .sb-fs-btn:hover, .sb-fs-btn:active { background: rgba(255,255,255,.22); }
    .sb-fs-btn.active { background: var(--brand); border-color: var(--brand); }
    .sb-fs-sep { width: 1px; height: 26px; background: rgba(255,255,255,.18); margin: 0 2px; flex-shrink: 0; }
    .sb-fs-swatch {
      width: 22px; height: 22px; border-radius: 50%;
      border: 2px solid rgba(255,255,255,.3); cursor: pointer; flex-shrink: 0;
      touch-action: manipulation; transition: transform .1s, border-color .15s;
    }
    .sb-fs-swatch:hover, .sb-fs-swatch:active { transform: scale(1.2); }
    .sb-fs-swatch.active { border-color: white; box-shadow: 0 0 0 2px var(--brand); }
    .sb-fs-slider {
      -webkit-appearance: none; appearance: none;
      width: 70px; height: 4px; border-radius: 2px;
      background: rgba(255,255,255,.3); outline: none; cursor: pointer;
    }
    .sb-fs-slider::-webkit-slider-thumb {
      -webkit-appearance: none; width: 15px; height: 15px;
      border-radius: 50%; background: white; cursor: pointer;
    }
    #sb-fs-title {
      margin-left: auto; font-size: .75rem; font-weight: 700;
      color: rgba(255,255,255,.45); white-space: nowrap; overflow: hidden;
      text-overflow: ellipsis; max-width: 180px;
    }

    *{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
    /* Global keyboard focus ring — visible for accessibility, hidden on mouse */
    :focus { outline: none; }
    :focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
      border-radius: 4px;
    }
    /* Fallback for browsers without :focus-visible support */
    @supports not (selector(:focus-visible)) {
      :focus { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
    }
    /* scene-item focus state for keyboard navigation */
    .scene-item:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: -2px;
      background: #f0f4ff;
      border-left: 2px solid var(--brand);
      padding-left: 17px;
    }
    body.dark .scene-item:focus-visible {
      background: rgba(var(--brand-rgb), .12);
    }
    /* tab-scroll-btn focus ring */
    .tab-scroll-btn:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 1px;
    }
    /* hdr-icon-btn focus ring */
    .hdr-icon-btn:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
      opacity: 1;
    }
    html, body{ height:100%; overscroll-behavior:none; }
    body{
      margin:0;
      font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      background-color:var(--bg-cork);
      background-image:
        radial-gradient(#9c6f44 15%, transparent 16%),
        radial-gradient(#9c6f44 15%, transparent 16%),
        radial-gradient(rgba(255,255,255,.06) 16%, transparent 17%);
      background-size:4px 4px, 4px 4px, 18px 18px;
      background-position:0 0, 2px 2px, 9px 9px;
      overflow:hidden;
      max-width:100vw;
      display:flex;
      flex-direction:column;
      color:var(--ink);
      -webkit-font-smoothing: antialiased;
    }

    .hidden{ display:none !important; }
    .row{ display:flex; align-items:center; }
    .gap-8{ gap:8px; }
    .gap-10{ gap:10px; }
    .grow{ flex:1; }

    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:6px 10px; border-radius:999px;
      background:rgba(17,24,39,.06);
      border:1px solid rgba(17,24,39,.10);
      font-weight:800; font-size:.78rem; color:#374151;
    }
    .kbd{
      font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,"Courier New",monospace;
      font-size:.74rem;
      padding:2px 6px;
      border-radius:6px;
      border:1px solid #d1d5db;
      background:#fff;
      box-shadow:0 1px 0 rgba(0,0,0,.06);
    }
    .btn{
      background:var(--brand);
      color:white;
      border:none;
      padding:8px 14px;
      border-radius:10px;
      font-weight:800;
      cursor:pointer;
      transition:transform .08s, background .12s, box-shadow .12s;
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:.85rem;
      box-shadow:0 2px 10px rgba(37,99,235,.18);
      user-select:none;
      min-height: var(--touch-target);
      touch-action: manipulation;
      -webkit-appearance: none;
    }
    .btn:hover{ background:var(--brand-hover); transform:translateY(-1px); }
    .btn:active{ transform:translateY(0) scale(.97); background:var(--brand-hover); }
    .btn.secondary{ background:#374151; box-shadow:0 2px 10px rgba(17,24,39,.14); }
    .btn.ghost{ background:white; color:#374151; border:1px solid #d1d5db; box-shadow:none; }
    /* ghost hover/active — canonical definition is lower in the file (phase54 polish layer) */
    .btn.ghost:hover{ background:#f5f5f5; border-color:#bbc0ca; }
    .btn.ghost:active{ background:#ededee; }
    .btn.danger{ background:var(--danger); box-shadow:0 2px 10px rgba(185,28,28,.16); }
    .btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

    input, textarea, select{
      font:inherit;
      border:1px solid #d1d5db;
      border-radius:10px;
      padding:10px 12px;
      background:#fff;
      min-height: var(--touch-target);
      -webkit-appearance: none;
      appearance: none;
      font-size: 16px; /* Prevent iOS zoom on focus */
    }
    textarea{ min-height:84px; resize:vertical; font-size: 16px; }
    select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 36px;
    }

    /* Select arrow in dark mode — light stroke so it's visible */
    body.dark select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239ca3af' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    }
    /* Disabled inputs/selects/textareas */
    input:disabled, textarea:disabled, select:disabled {
      opacity: .5;
      cursor: not-allowed;
      background: #f3f4f6;
    }
    body.dark input:disabled, body.dark textarea:disabled, body.dark select:disabled {
      opacity: .4;
      background: rgba(255,255,255,.04);
      color: var(--muted);
    }

    /* ── Thin scrollbars globally ───────────────────────────── */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 999px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); }
    body.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); }
    body.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.34); }
    * { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.18) transparent; }
    body.dark * { scrollbar-color: rgba(255,255,255,0.22) transparent; }

    /* ══════════════════════════════════════════════════════════
       APP-WIDE POLISH — round 5
       Fixes: brand hover, tooltip layer, bottom-nav indicator,
       overlay animations, dark-mode gaps, narrow header,
       storyboard grid, aria roles.
       ══════════════════════════════════════════════════════════ */

    /* ── Fix 2: Header logo hover feedback ───────────────────── */
    .app-brand {
      transition: opacity .14s, transform .14s cubic-bezier(.34,1.56,.64,1);
    }
    .app-brand:hover  { opacity: .8; transform: scale(1.03); }
    .app-brand:active { opacity: .65; transform: scale(.97); }

    /* ── Fix 3: CSS tooltip for header icon-only buttons ─────── */
    [data-tip] { position: relative; }
    [data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      bottom: calc(100% + 7px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      background: rgba(20,24,38,0.92);
      color: #e5e7eb;
      font-size: .68rem;
      font-weight: 700;
      white-space: nowrap;
      padding: 4px 8px;
      border-radius: 6px;
      pointer-events: none;
      opacity: 0;
      transition: opacity .15s, transform .15s cubic-bezier(.34,1.56,.64,1);
      z-index: 9999;
      box-shadow: 0 2px 8px rgba(0,0,0,.24);
    }
    [data-tip]:hover::after {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    body.dark [data-tip]::after {
      background: rgba(240,244,255,0.92);
      color: #1e2433;
    }

    /* ── Fix 4: Bottom-nav active tab indicator line ─────────── */
    .bottom-tab { position: relative; }
    .bottom-tab.active::after {
      content: '';
      position: absolute;
      bottom: 3px;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 3px;
      border-radius: 9px;
      background: var(--brand);
    }

    /* ── Fix 5: Overlay entry animations ─────────────────────── */
    @keyframes _overlaySlideIn {
      from { opacity: 0; transform: translateY(-8px) scale(.97); }
      to   { opacity: 1; transform: translateY(0)    scale(1);   }
    }
    #find-replace-bar.open,
    #scene-jump-bar.open {
      animation: _overlaySlideIn .18s cubic-bezier(.34,1.2,.64,1) both;
    }

    /* ── Fix 6: Dark mode — sched cell hover ─────────────────── */
    body.dark .sched-cal-cell.has-shoot:hover { background: #25497a; }

    /* ── Fix 8: Conflict badge — brighter in dark mode ───────── */
    body.dark .conflict-dist-badge { background: #ef4444; }

    /* ── Fix 15: Header cluster — prevent collapse at <430px ─── */
    @media (max-width: 430px) {
      .app-brand .brand-sub { display: none; }
      .hdr-icon-cluster { flex-shrink: 0; }
      .header-actions   { gap: 2px; }
    }

    /* ── Fix 17: Storyboard grid — prevent panel overflow ──────── */
    .sb-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
    .sb-panel { min-width: 0; }

    /* ── R4-Fix 2: Desktop tab bar right-edge overflow fade ───── */
    #project-nav::after {
      content: '';
      position: sticky;
      right: 0;
      top: 0;
      align-self: stretch;
      width: 28px;
      background: linear-gradient(to right, transparent, #f2ece2);
      flex-shrink: 0;
      pointer-events: none;
      z-index: 10;
    }
    body.dark #project-nav::after {
      background: linear-gradient(to right, transparent, rgba(20,24,38,.96));
    }

    /* ── R4-Fix 3: Script editor empty-state ghost prompt ──────── */
    /* Editor frame stays white in both modes, so use dark text */
    #pages-container:empty::after {
      content: 'Open or create a project to start writing…';
      display: block;
      text-align: center;
      margin-top: 120px;
      color: rgba(0,0,0,.28);
      font-size: 1rem;
      font-weight: 600;
      font-style: italic;
      pointer-events: none;
      user-select: none;
    }

    /* ── R4-Fix 4: Hub CTA button label — prevent text wrapping ── */
    .phase60-home-cta-label { white-space: nowrap; }
    @media (max-width: 390px) { .phase60-home-cta-label { font-size: .88rem; } }

    /* ── F7: pinned project folder accent ── */
    .folder.folder-pinned { box-shadow: 0 0 0 2px rgba(37,99,235,.55), 0 6px 18px rgba(0,0,0,.12); }
    .folder.folder-pinned .folder-tab::after { content: '📌'; position: absolute; top: 4px; right: 6px; font-size: .8rem; }

    /* ── F3: Hub project-type filter chips ── */
    #hub-type-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
    .hub-type-chip {
      appearance: none; cursor: pointer; border-radius: 999px; padding: 6px 14px;
      font-size: .8rem; font-weight: 600; white-space: nowrap;
      background: rgba(127,127,127,.1); border: 1px solid rgba(127,127,127,.28);
      color: inherit; transition: .15s;
    }
    .hub-type-chip:hover { background: rgba(127,127,127,.2); }
    .hub-type-chip.active { background: #2563eb; border-color: #2563eb; color: #fff; }
    body.dark .hub-type-chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
    body.dark .hub-type-chip:hover { background: rgba(255,255,255,.12); }
    body.dark .hub-type-chip.active { background: #2563eb; border-color: #2563eb; }

    /* ── E14: Resume last project pill in the hub hero ── */
    .phase60-home-resume {
      margin-top: 12px; display: inline-flex; align-items: center; gap: 7px;
      max-width: 100%; padding: 9px 15px; border-radius: 999px; cursor: pointer;
      background: rgba(255,161,74,.12); border: 1px solid rgba(255,161,74,.4);
      color: inherit; font-size: .85rem; transition: .15s;
    }
    .phase60-home-resume:hover { background: rgba(255,161,74,.22); border-color: rgba(255,161,74,.7); }
    .phase60-home-resume b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }

    /* ── M1: Mobile writer canvas — warm-gray tint so white page sheet
          has visible contrast (mirrors Final Draft / Fade In mobile look).
          Overrides phase103 forced-white rule; targets ID selectors to
          match its specificity, placed later in cascade so it wins. ── */
    @media (max-width: 760px) {
      html[data-ui-tier="phone"] body:not(.dark)[data-active-view="writer-app"] #editor-frame,
      html[data-ui-tier="phone"] body:not(.dark)[data-active-view="writer-app"] #pages-zoom-wrapper {
        background: #e8e4dd !important;
      }
      html[data-ui-tier="phone"] body:not(.dark)[data-active-view="writer-app"] #pages-container {
        background: transparent !important;
        padding: 10px 10px 0 !important;
      }
      /* Page sheets gain a crisp lifted shadow on the gray canvas */
      html[data-ui-tier="phone"] body:not(.dark)[data-active-view="writer-app"] .script-page-sheet {
        box-shadow:
          0 0 0 1px rgba(0,0,0,.09),
          0 2px 6px rgba(0,0,0,.09),
          0 10px 28px rgba(0,0,0,.07) !important;
        border-radius: 3px !important;
      }
    }

    /* ══════════════════════════════════════════════════════════
       LUXURY POLISH LAYER — applied over the existing design,
       additive only. Touches: buttons, inputs, modals, strips,
       script page, hub background, scene nav, save indicator.
       ══════════════════════════════════════════════════════════ */

    /* ── Buttons: tactile gradient sheen + richer glow ───────── */
    .btn {
      background-image: linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 60%);
      box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
                  0 2px 12px rgba(var(--brand-rgb),.28),
                  0 1px 3px rgba(0,0,0,.12);
      transition: transform .1s cubic-bezier(.2,.8,.3,1),
                  background .14s, box-shadow .14s;
    }
    .btn:hover {
      box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
                  0 4px 20px rgba(var(--brand-rgb),.42),
                  0 2px 6px rgba(0,0,0,.14);
      transform: translateY(-2px);
    }
    .btn:active {
      transform: translateY(0) scale(.97);
      box-shadow: 0 1px 4px rgba(var(--brand-rgb),.22);
      background-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.06) 100%);
    }
    /* Ghost btn: pressed / recessed feel */
    .btn.ghost {
      background-image: none;
      box-shadow: 0 1px 2px rgba(0,0,0,.07), inset 0 1px 2px rgba(0,0,0,.04);
    }
    .btn.ghost:hover {
      box-shadow: 0 2px 8px rgba(0,0,0,.10), inset 0 1px 2px rgba(0,0,0,.04);
    }
    /* Danger btn: red glow, not brand blue */
    .btn.danger {
      box-shadow: 0 1px 0 rgba(255,255,255,.15) inset,
                  0 2px 12px rgba(185,28,28,.28),
                  0 1px 3px rgba(0,0,0,.12);
    }
    .btn.danger:hover {
      box-shadow: 0 1px 0 rgba(255,255,255,.15) inset,
                  0 4px 20px rgba(185,28,28,.42),
                  0 2px 6px rgba(0,0,0,.14);
    }
    /* Secondary btn: neutral glow */
    .btn.secondary {
      box-shadow: 0 1px 0 rgba(255,255,255,.10) inset,
                  0 2px 12px rgba(55,65,81,.28),
                  0 1px 3px rgba(0,0,0,.14);
    }
    .btn.secondary:hover {
      box-shadow: 0 1px 0 rgba(255,255,255,.10) inset,
                  0 4px 18px rgba(55,65,81,.38),
                  0 2px 6px rgba(0,0,0,.18);
    }
    body.dark .btn {
      background-image: linear-gradient(180deg, rgba(255,255,255,.09) 0%, transparent 60%);
      box-shadow: 0 1px 0 rgba(255,255,255,.12) inset,
                  0 2px 14px rgba(var(--brand-rgb),.35),
                  0 1px 3px rgba(0,0,0,.28);
    }
    body.dark .btn:hover {
      box-shadow: 0 1px 0 rgba(255,255,255,.12) inset,
                  0 4px 22px rgba(var(--brand-rgb),.50),
                  0 2px 8px rgba(0,0,0,.32);
    }
    body.dark .btn.ghost {
      background-image: none;
      box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
    }

    /* ── Input/textarea/select: glowing focus ring ───────────── */
    input:focus, textarea:focus, select:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14),
                  0 1px 3px rgba(0,0,0,.08);
    }
    body.dark input:focus, body.dark textarea:focus, body.dark select:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .22),
                  0 1px 4px rgba(0,0,0,.3);
    }
    /* Borderless / underline-only inputs: no focus ring — just the underline accent */
    .sb-field-input:focus { box-shadow: none; }
    /* Prop inputs use amber theming — keep their own glow, suppress ours */
    .prop-input:focus { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.15); }
    /* Art dept inputs use purple theming */
    .artdept-input:focus { border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,.15); }

    /* ── Modal: frosted glass backdrop + elevated shadow ─────── */
    #modal-root .modal-backdrop {
      background: rgba(15, 20, 40, .72); /* fallback for no backdrop-filter support */
      backdrop-filter: blur(8px) saturate(120%);
      -webkit-backdrop-filter: blur(8px) saturate(120%);
    }
    @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
      #modal-root .modal-backdrop { background: rgba(15, 20, 40, .52); }
    }
    /* Wardrobe dark modal backdrop — no page blur (it's already dark-themed) */
    #modal-root .modal-backdrop[data-wdb] {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: rgba(5, 8, 20, .72);
    }
    .modal {
      box-shadow: 0 32px 80px rgba(0,0,0,.38),
                  0 8px 24px rgba(0,0,0,.18),
                  0 1px 0 rgba(255,255,255,.9) inset;
      border: 1px solid rgba(255,255,255,.55);
    }
    body.dark .modal {
      box-shadow: 0 32px 80px rgba(0,0,0,.65),
                  0 8px 24px rgba(0,0,0,.45),
                  0 1px 0 rgba(255,255,255,.06) inset;
      border: 1px solid rgba(255,255,255,.07);
    }

    /* ── Script page: warmer paper, richer layered shadow ─────── */
    /* NOTE: no !important — applyRevisionColor() sets inline style.background  */
    /* for WGA revision tinting; inline styles must be able to override this.    */
    .script-page-sheet {
      background: #fffef8;
      box-shadow:
        0 2px 4px rgba(0,0,0,.06),
        0 8px 24px rgba(0,0,0,.10),
        0 24px 60px rgba(0,0,0,.12),
        0 1px 0 rgba(255,255,255,.8) inset;
    }
    body.dark .script-page-sheet {
      background: var(--paper);
      box-shadow: 0 4px 12px rgba(0,0,0,.3),
                  0 16px 56px rgba(0,0,0,.55);
    }

    /* ── Strip cards: lift + deepen shadow on hover ──────────── */
    .strip {
      transition: transform .15s cubic-bezier(.2,.8,.3,1),
                  box-shadow .15s cubic-bezier(.2,.8,.3,1);
    }
    .strip:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0,0,0,.13);
    }
    body.dark .strip:hover {
      box-shadow: 0 6px 20px rgba(0,0,0,.45);
    }

    /* ── Scene navigator items: smooth left-accent slide ─────── */
    .scene-item {
      transition: background .12s ease, color .12s ease,
                  padding-left .1s ease, border-left-color .1s ease;
    }
    .scene-item:hover {
      background: #f0f4ff;
      color: var(--brand);
      border-left: 2px solid rgba(var(--brand-rgb), .35);
      padding-left: 17px;
    }
    body.dark .scene-item:hover {
      background: rgba(var(--brand-rgb), .1);
      color: var(--brand);
    }

    /* ── Folder cards (hub): richer shadow + highlight shimmer── */
    .folder-body {
      transition: box-shadow .18s ease;
      box-shadow: 3px 5px 14px rgba(0,0,0,.13),
                  0 1px 0 rgba(255,255,255,.7) inset;
    }
    .folder:hover .folder-body {
      box-shadow: 4px 12px 28px rgba(0,0,0,.22),
                  0 1px 0 rgba(255,255,255,.8) inset;
    }
    body.dark .folder-body {
      box-shadow: 2px 4px 16px rgba(0,0,0,.4),
                  0 1px 0 rgba(255,255,255,.04) inset;
    }
    body.dark .folder:hover .folder-body {
      box-shadow: 4px 12px 32px rgba(0,0,0,.6),
                  0 1px 0 rgba(255,255,255,.06) inset;
    }


    /* ── Save status: pulsing dot for Saving… state ──────────── */
    @keyframes _cs_pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.35; }
    }
    #save-status.saving::before {
      content: '';
      display: inline-block;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: currentColor;
      margin-right: 5px;
      vertical-align: middle;
      animation: _cs_pulse 1.2s ease-in-out infinite;
    }

    /* ── App-pad (non-writer views): softer background ───────── */
    .app-pad {
      background: #f0f2f7;
    }
    body.dark .app-pad {
      background: #0f1320;
    }

    /* ── Header: deeper warmth + grain texture overlay ────────── */
    header::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
      background-size: 200px 200px;
      mix-blend-mode: multiply;
      opacity: 0.6;
    }

    /* ── Bottom nav (mobile): backdrop blur ──────────────────── */
    #bottom-nav {
      backdrop-filter: blur(16px) saturate(140%);
      -webkit-backdrop-filter: blur(16px) saturate(140%);
    }

    /* END LUXURY POLISH LAYER */

    /* ══════════════════════════════════════════════════════════
       UI SMOOTHING LAYER — Interface refinements:
       button groups, toolbar consistency, header cleanup,
       tab dividers, input standards, micro-interactions.
       Additive only — zero impact on existing visual identity.
       ══════════════════════════════════════════════════════════ */

    /* ── Button Groups: flush-joined ghost buttons ───────────── */
    .btn-group {
      display: inline-flex;
      align-items: center;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.6);
      border: 1px solid #d1d5db;
      background: white;
    }
    body.dark .btn-group {
      border-color: rgba(255,255,255,.12);
      box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
      background: transparent;
    }
    .btn-group .btn.ghost {
      border: none;
      border-radius: 0;
      box-shadow: none;
      border-right: 1px solid #e5e7eb;
      padding: 6px 12px;
      min-height: 34px;
      font-size: .82rem;
    }
    body.dark .btn-group .btn.ghost {
      border-right-color: rgba(255,255,255,.08);
    }
    .btn-group .btn.ghost:last-child {
      border-right: none;
    }
    .btn-group .btn.ghost:hover {
      background: #f3f4f6;
      z-index: 1;
    }
    body.dark .btn-group .btn.ghost:hover {
      background: rgba(255,255,255,.06);
    }
    .btn-group .btn.ghost:first-child { border-radius: 9px 0 0 9px; }
    .btn-group .btn.ghost:last-child  { border-radius: 0 9px 9px 0; }
    .btn-group .btn.ghost:only-child  { border-radius: 9px; }

    /* ── Header icon-only buttons: subtler, no border ──────────── */
    .hdr-icon-btn {
      background: none;
      border: none;
      padding: 5px 7px;
      min-height: 30px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 1rem;
      color: #7a4f1e;
      opacity: .7;
      transition: opacity .12s, background .12s;
      line-height: 1;
      display: inline-flex;
      align-items: center;
    }
    .hdr-icon-btn:hover { opacity: 1; background: rgba(0,0,0,.06); }
    .hdr-icon-btn:active { background: rgba(0,0,0,.10); transform: scale(.95); }
    body.dark .hdr-icon-btn { color: #9ca3af; }
    body.dark .hdr-icon-btn:hover { background: rgba(255,255,255,.08); }

    /* ── Module toolbars: standardized flex bar ─────────────────── */
    .module-toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 16px;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      flex-shrink: 0;
      flex-wrap: wrap;
      min-height: 50px;
      box-sizing: border-box;
    }
    .module-toolbar-title {
      font-size: .9rem;
      font-weight: 800;
      color: var(--ink);
      white-space: nowrap;
      letter-spacing: -.01em;
    }
    .module-toolbar-spacer { flex: 1 1 0; min-width: 8px; }
    .module-toolbar-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    /* ── Filter bars: standardized search + select row ────────── */
    .filter-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 8px 16px;
      border-bottom: 1px solid var(--line);
      background: var(--paper);
      flex-shrink: 0;
    }
    .filter-bar-search {
      flex: 1 1 160px;
      min-width: 0;
      max-width: 280px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 7px 10px 7px 28px;
      font-size: .83rem;
      background: #f9fafb;
      color: var(--ink);
      min-height: 34px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: 8px center;
      background-size: 14px;
    }
    body.dark .filter-bar-search {
      background-color: rgba(255,255,255,.04);
      border-color: rgba(255,255,255,.12);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    }
    .filter-bar-select {
      flex: 1 1 120px;
      min-width: 0;
      max-width: 200px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 7px 28px 7px 10px;
      font-size: .83rem;
      background: #f9fafb;
      color: var(--ink);
      min-height: 34px;
    }
    body.dark .filter-bar-select {
      background-color: rgba(255,255,255,.04);
      border-color: rgba(255,255,255,.12);
    }

    /* ── Tab section dividers ───────────────────────────────────── */
    .tab-section-sep {
      width: 1px;
      height: 20px;
      background: rgba(0,0,0,.12);
      flex-shrink: 0;
      align-self: center;
      margin: 0 2px;
      border-radius: 1px;
    }
    body.dark .tab-section-sep {
      background: rgba(255,255,255,.10);
    }

    /* ── Tab section label (tiny category label above first tab in group) */
    .tab-group-label {
      position: absolute;
      top: 4px;
      left: 50%;
      transform: translateX(-50%);
      font-size: .48rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: #7a5520;
      white-space: nowrap;
      pointer-events: none;
      opacity: .85;
    }
    body.dark .tab-group-label { color: #6b7280; }

    /* ── Ghost button refinements: warmer hover, cleaner states ── */
    .btn.ghost {
      transition: background .14s cubic-bezier(.2,.8,.3,1), box-shadow .14s cubic-bezier(.2,.8,.3,1), transform .1s cubic-bezier(.34,1.56,.64,1), border-color .14s;
    }
    .btn.ghost:hover {
      background: #f5f5f5;
      border-color: #bbc0ca;
    }
    body.dark .btn.ghost:hover {
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.18);
    }
    .btn.ghost:active {
      background: #ededee;
      transform: scale(.97) translateY(1px);
      box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
    }
    body.dark .btn.ghost:active {
      background: rgba(255,255,255,.04);
    }

    /* ── Micro buttons: for delete/toggle within content rows ─── */
    .btn-micro {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: 1px solid transparent;
      border-radius: 6px;
      padding: 2px 6px;
      font-size: .7rem;
      font-weight: 700;
      cursor: pointer;
      color: var(--muted);
      min-height: 24px;
      transition: background .1s, color .12s, border-color .1s;
      white-space: nowrap;
      line-height: 1;
    }
    .btn-micro:hover {
      background: #f3f4f6;
      color: var(--ink);
      border-color: #e5e7eb;
    }
    .btn-micro.danger:hover {
      background: #fee2e2;
      color: #b91c1c;
      border-color: #fca5a5;
    }
    body.dark .btn-micro:hover {
      background: rgba(255,255,255,.07);
      color: var(--ink);
      border-color: rgba(255,255,255,.12);
    }

    /* ── Card module headers: consistent h2 + action cluster ──── */
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }
    .card-header-title { flex: 1 1 200px; min-width: 0; }
    .card-header-title h2 { margin: 0 0 2px; }
    .card-header-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      flex-shrink: 0;
    }

    /* ── Improved save-status indicator in writer status bar ─── */
    #save-status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    /* ── Toolbar input/select reset for modules that use ad-hoc styles */
    .module-toolbar input[type="search"],
    .module-toolbar select {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 6px 10px;
      font-size: .83rem;
      background: #f9fafb;
      color: var(--ink);
      min-height: 34px;
    }
    body.dark .module-toolbar input[type="search"],
    body.dark .module-toolbar select {
      background: rgba(255,255,255,.04);
      border-color: rgba(255,255,255,.12);
    }

    /* ── Active header action buttons (toggled state) ─────────── */
    .hdr-action-active {
      background: rgba(37,99,235,.10) !important;
      border-color: rgba(37,99,235,.35) !important;
      color: var(--brand) !important;
    }

    /* ── Smooth section pills for module toolbars ─────────────── */
    .toolbar-section-pill {
      font-size: .6rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--muted);
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(0,0,0,.04);
      border: 1px solid var(--line);
      white-space: nowrap;
      flex-shrink: 0;
    }
    body.dark .toolbar-section-pill {
      background: rgba(255,255,255,.04);
      border-color: rgba(255,255,255,.08);
    }

    /* ══════════════════════════════════════════════════════════
       INTERFACE POLISH — Surgical improvements to reduce visual
       noise without touching the core look.
       All changes are additive CSS + minimal HTML tweaks.
       ══════════════════════════════════════════════════════════ */

    /* ── 1. Header actions: tighten all header buttons uniformly ─ */
    .header-actions .btn.ghost {
      padding: 5px 9px;
      font-size: .8rem;
      min-height: 30px;
      border-color: rgba(0,0,0,.13);
      line-height: 1;
    }
    body.dark .header-actions .btn.ghost {
      border-color: rgba(255,255,255,.14);
    }
    /* Group the icon-only header buttons so they read as one cluster */
    .hdr-icon-cluster {
      display: inline-flex;
      border-radius: 9px;
      border: 1px solid rgba(0,0,0,.13);
      overflow: hidden;
      background: white;
    }
    body.dark .hdr-icon-cluster {
      border-color: rgba(255,255,255,.14);
      background: rgba(255,255,255,.04);
    }
    .hdr-icon-cluster .btn.ghost {
      border: none;
      border-radius: 0;
      border-right: 1px solid rgba(0,0,0,.08);
      min-height: 30px;
      padding: 5px 8px;
      background: transparent;
      box-shadow: none;
    }
    body.dark .hdr-icon-cluster .btn.ghost {
      border-right-color: rgba(255,255,255,.08);
    }
    .hdr-icon-cluster .btn.ghost:last-child { border-right: none; }
    .hdr-icon-cluster .btn.ghost:hover { background: rgba(0,0,0,.05) !important; border-color: transparent !important; }
    body.dark .hdr-icon-cluster .btn.ghost:hover { background: rgba(255,255,255,.07) !important; }

    /* ── Tab groups: label floats above each group of tabs ──────
       Each .tab-group is a flex column: label row on top,
       tab row on bottom. Groups sit side-by-side in the scrolling
       nav-tabs flex container. The label never touches the tab.    */
    .nav-tabs {
      align-items: flex-end; /* keep — groups align their tab row to the bottom */
    }
    .tab-group {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      flex-shrink: 0;
      /* Small right gap between groups — visually separates them */
      margin-right: 8px;
      position: relative;
    }
    .tab-group:last-child { margin-right: 0; }

    /* The label sits in the header space above the tab row */
    .tab-group::before {
      content: attr(data-group);
      display: block;
      /* .46rem rendered as an unreadable clipped speck above the tabs */
      font-size: .55rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: #6b4516;
      text-align: center;
      padding: 0 4px 3px;
      line-height: 1;
      white-space: nowrap;
      opacity: .88;
      /* Fills remaining header space above the tab row */
      flex: 1;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      min-height: 14px;
    }
    body.dark .tab-group::before { color: #6b7280; opacity: .9; }

    /* A thin accent line under the label, spanning the group width */
    .tab-group::after {
      content: '';
      position: absolute;
      bottom: 0; /* flush with tab row bottom */
      left: 0; right: 0;
      height: 2px;
      border-radius: 1px 1px 0 0;
      background: transparent; /* invisible by default */
      pointer-events: none;
    }
    /* When any tab in this group is active, accent the group label */
    .tab-group:has(.tab.active)::before {
      color: var(--brand);
      opacity: 1;
    }
    .tab-group:has(.tab.active)::after {
      background: rgba(37,99,235,.18);
    }
    body.dark .tab-group:has(.tab.active)::before { color: var(--brand); }

    /* Tab row inside the group */
    .tab-group-tabs {
      display: flex;
      align-items: flex-end;
      gap: 3px;
    }

    /* Subtle right edge divider between groups (not on last group) */
    .tab-group:not(:last-child) .tab-group-tabs::after {
      content: '';
      display: block;
      width: 1px;
      height: 20px;
      background: rgba(160, 112, 60, .22);
      flex-shrink: 0;
      align-self: center;
      margin-left: 5px;
      border-radius: 1px;
    }
    body.dark .tab-group:not(:last-child) .tab-group-tabs::after {
      background: rgba(255,255,255,.10);
    }

    /* Remove old section-start padding/pseudo-elements (no longer used) */
    .tab-section-start { padding-top: 7px !important; }
    .tab-section-start::before { display: none !important; }

    /* At icon-only breakpoint: shorten group labels to abbreviations */
    @media (max-width: 900px) {
      .tab-group[data-group="Development"]::before    { content: "Dev"; }
      .tab-group[data-group="Pre-Production"]::before { content: "Pre"; }
      .tab-group[data-group="Scheduling"]::before     { content: "Sched"; }
      .tab-group[data-group="Production"]::before     { content: "Prod"; }
      .tab-group[data-group="Specialty Studios"]::before { content: "Spec"; }
      /* Prevent label overflow at any size */
      .tab-group::before {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }
    }

    /* ── END TAB GROUPS ─────────────────────────────────────────── */

    /* ── 3. Ghost button: stronger, crisper hover state ───────── */
    .btn.ghost:hover {
      background: #ededef !important;
      border-color: #b0b4be !important;
    }
    body.dark .btn.ghost:hover {
      background: rgba(255,255,255,.10) !important;
      border-color: rgba(255,255,255,.22) !important;
    }
    .btn.ghost:active {
      background: #e4e4e7 !important;
      transform: scale(.97) translateY(1px) !important;
    }
    body.dark .btn.ghost:active {
      background: rgba(255,255,255,.05) !important;
    }

    /* ── 4. Module toolbars: unify all the ad-hoc inline styles ── */
    #wardrobe-toolbar,
    #props-toolbar,
    #budget-toolbar {
      display: flex !important;
      align-items: center !important;
      gap: 7px !important;
      padding: 8px 16px !important;
      min-height: 48px !important;
    }
    /* Mini buttons inside module toolbars */
    #wardrobe-toolbar .btn.mini,
    #props-toolbar .btn.mini,
    #budget-toolbar .btn.mini {
      min-height: 30px;
      padding: 5px 10px;
      font-size: .8rem;
    }

    /* ── 5. Mini button base: slightly tighter, consistent ──────── */
    .btn.mini {
      padding: 5px 10px !important;
      font-size: .8rem !important;
      min-height: 30px !important;
      border-radius: 8px !important;
      gap: 5px !important;
      line-height: 1 !important;
    }

    /* ── 6. Active / toggled ghost buttons ──────────────────────── */
    .btn.ghost.is-active,
    .btn.ghost[aria-pressed="true"] {
      background: rgba(37,99,235,.09) !important;
      border-color: rgba(37,99,235,.35) !important;
      color: var(--brand) !important;
    }
    body.dark .btn.ghost.is-active,
    body.dark .btn.ghost[aria-pressed="true"] {
      background: rgba(37,99,235,.18) !important;
      border-color: rgba(37,99,235,.4) !important;
    }

    /* ── 7. New Project button: slightly more prominent ─────────── */
    #new-btn {
      font-size: .8rem !important;
      padding: 5px 13px !important;
      min-height: 30px !important;
    }

    /* ── 8. Tools button: cleaner open state ─────────────────────── */
    #tools-btn.open {
      background: rgba(37,99,235,.09);
      border-color: rgba(37,99,235,.35);
      color: var(--brand);
    }
    body.dark #tools-btn.open {
      background: rgba(37,99,235,.18);
      border-color: rgba(37,99,235,.4);
    }

    /* ── 9. Smooth transition on all interactive elements ────────── */
    .btn, .tab, input, select, textarea {
      transition-timing-function: cubic-bezier(.2,.8,.3,1);
    }

    /* ── 10. Card header action rows: consistent right-side layout */
    /* Target the pattern used in Locations, Schedule, Auditions, etc. */
    .card > div:first-child {
      align-items: flex-start;
    }

    /* ── Tab bar scroll arrows (mouse users without trackpad) ───── */
    .tab-scroll-btn {
      flex-shrink: 0;
      align-self: flex-end;
      height: 34px;
      /* 19 of 31 module tabs hide beyond the strip — the chevron is the only
         affordance, so it must read as a real button, not a sliver. */
      width: 30px;
      background: linear-gradient(to bottom, #f0d8a8 0%, #e8ca90 100%);
      border: 1px solid #b8945a;
      border-bottom: none;
      border-radius: 6px 6px 0 0;
      color: #5c3311;
      font-size: 1.35rem;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
      display: none; /* shown by JS when tabs overflow */
      align-items: center;
      justify-content: center;
      padding: 0;
      margin-bottom: 0;
      transition: background .1s, color .1s;
      user-select: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
    }
    .tab-scroll-btn:hover {
      background: linear-gradient(to bottom, #fce8c4 0%, #f5d8a0 100%);
      color: #5c3311;
    }
    .tab-scroll-btn:active {
      background: linear-gradient(to bottom, #e8ca90 0%, #dfc080 100%);
    }
    .tab-scroll-btn.tab-scroll-hidden {
      opacity: .3;
      pointer-events: none;
    }
    body.dark .tab-scroll-btn {
      background: linear-gradient(to bottom, #252d42 0%, #1e2433 100%);
      border-color: #2d3447;
      color: #9ca3af;
    }
    body.dark .tab-scroll-btn:hover {
      background: linear-gradient(to bottom, #2d3750 0%, #252d42 100%);
      color: #e5e7eb;
    }
    /* Scroll arrows: visibility controlled by JS (_tabBarUpdateArrows) at all sizes */

    /* ── END TAB SCROLL BUTTONS ─────────────────────────────────── */

    /* ── HEADER ─────────────────────────────────────────────── */
    header{
      background: linear-gradient(to bottom, #f5e6c8 0%, #eddcb0 100%);
      border-bottom: 2px solid #c9a96e;
      padding: 0 14px;
      padding-top: var(--sat);
      height: calc(68px + var(--sat)); /* +8px for group label row above tabs */
      display: flex;
      align-items: flex-end;
      gap: 0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.5);
      z-index: 100;
      flex-shrink: 0;
      overflow: visible;
      position: relative;
      min-width: 0;
      box-sizing: border-box;
      width: 100%;
    }
    body.dark header {
      background: linear-gradient(to bottom, #1e2433 0%, #161b27 100%);
      border-bottom-color: #2d3447;
      box-shadow: 0 2px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    body.dark #bottom-nav {
      background: rgba(20,24,38,0.97);
      border-top-color: #2d3447;
    }
    body.dark .bottom-tab { color: #64748b; }
    body.dark .bottom-tab.active { color: var(--brand); }

    /* ── Brand (never shrinks, never wraps) ─────────────────── */
    .app-brand{
      font-weight:900;
      display:flex;
      align-items:center;
      gap:7px;
      cursor:pointer;
      user-select:none;
      line-height:1;
      flex-shrink:0;
      text-decoration:none;
      color: inherit;
      margin-right: 8px;
      padding-bottom: 10px;
    }
    .app-brand .brand-emoji { font-size: 1.35rem; line-height:1; }
    .app-brand .brand-text { display:flex; flex-direction:column; gap:1px; }
    .app-brand .brand-name {
      font-size:.78rem; font-weight:900; letter-spacing:.02em;
      color: #5c3d11; line-height:1; white-space:nowrap;
    }
    .app-brand .brand-sub {
      font-size:.58rem; font-weight:600; color: #8b6035;
      letter-spacing:.06em; line-height:1; white-space:nowrap;
    }
    body.dark .app-brand .brand-name { color: var(--ink); }
    body.dark .app-brand .brand-sub  { color: var(--muted); }

    /* ── Nav tabs — manila folder style ────────────────────────
       Tabs sit flush to the bottom of the header. The active tab
       has no bottom border so it appears to "open" into the page. */
    .nav-tabs{
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      gap: 3px;
      height: 100%;
      align-items: flex-end;
      overflow-x: auto;
      overflow-y: visible;
      scroll-behavior: smooth;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding-left: 6px;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }

    /* Individual tab — manila folder shape */
    .tab {
      position: relative;
      padding: 7px 13px 8px;
      background: #f5d0a9;
      border-radius: 8px 8px 0 0;
      border: 1px solid #c9a96e;
      border-bottom: none;
      cursor: pointer;
      font-weight: 800;
      color: #7a4f1e;
      font-size: .75rem;
      user-select: none;
      transition: background .12s, color .12s, transform .1s;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
      flex-shrink: 0;
      /* slightly shorter — rises on active */
      height: 34px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 1px 0 0 rgba(0,0,0,0.04);
    }
    .tab::before {
      /* bottom cover — hides the border-bottom gap on inactive tabs */
      content: '';
      position: absolute;
      bottom: -2px;
      left: -1px;
      right: -1px;
      height: 3px;
      background: #c9a96e;
      border-radius: 0;
    }
    .tab:hover {
      background: #fce8c4;
      color: #5c3311;
      transform: translateY(-1px);
    }
    .tab:hover::before { background: #c9a96e; }

    /* Active tab — taller, white face, no bottom edge so it "opens" */
    .tab.active {
      background: #fff8ee;
      color: #2563eb;
      height: 40px;
      border-color: #c9a96e;
      border-bottom: none;
      font-weight: 900;
      transform: translateY(0);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), -1px 0 0 rgba(0,0,0,0.04), 1px 0 0 rgba(0,0,0,0.04);
      z-index: 2;
    }
    .tab.active::before {
      /* cover the header border-bottom so active tab merges with content */
      bottom: -3px;
      height: 5px;
      background: #fff8ee;
    }
    body.dark .tab {
      background: #252d42;
      border-color: #2d3447;
      color: #9ca3af;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    body.dark .tab::before { background: #2d3447; }
    body.dark .tab:hover { background: #2d3750; color: #e5e7eb; }
    body.dark .tab.active {
      background: #1e2433;
      color: var(--brand);
      border-color: #2d3447;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
    }
    body.dark .tab.active::before { background: #1e2433; }

    /* Icon always visible; label hidden at narrower widths via breakpoints */
    .tab-icon { flex-shrink:0; font-size:.9rem; line-height:1; }
    .tab-label { white-space:nowrap; }

    /* ── Right-side header actions (never shrinks) ──────────── */
    .header-actions {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
      margin-left: 4px;
      padding-bottom: 8px;
    }

    /* Save status pill */
    /* All buttons in the header: compact */
    .header-actions .btn {
      padding: 5px 10px;
      font-size: .77rem;
      min-height: 32px;
      gap: 4px;
      white-space: nowrap;
    }
    .header-actions .btn.danger { padding: 5px 10px; }

    /* ── TOOLS DROPDOWN MENU ────────────────────────────────── */
    #tools-menu-wrap { position: relative; }

    #tools-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 10px;
      font-size: .8rem;
      min-height: 32px;
      white-space: nowrap;
      border-radius: 10px;
    }
    #tools-btn.open {
      background: #e0e7ff;
      border-color: var(--brand);
      color: var(--brand);
    }
    .tools-btn-label { font-weight: 800; }
    .tools-caret {
      font-size: .65rem;
      opacity: .6;
      transition: transform .15s;
    }
    #tools-btn.open .tools-caret { transform: rotate(180deg); }

    .tools-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      box-shadow: 0 12px 40px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.06);
      min-width: 210px;
      z-index: 600;
      padding: 6px;
      animation: toolsDrop .12s cubic-bezier(0.34,1.2,0.64,1);
      transform-origin: top right;
      max-height: calc(100dvh - 80px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      overscroll-behavior: contain;
    }
    .tools-dropdown.open { display: block; }

    @keyframes toolsDrop {
      from { opacity: 0; transform: scale(0.92) translateY(-6px); }
      to   { opacity: 1; transform: scale(1)    translateY(0);    }
    }

    .tools-group-label {
      font-size: .66rem;
      font-weight: 900;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .07em;
      padding: 6px 10px 3px;
    }
    .tools-divider {
      height: 1px;
      background: #f3f4f6;
      margin: 4px 6px;
    }
    .tools-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 8px 10px;
      border: none;
      background: none;
      border-radius: 8px;
      font-family: inherit;
      font-size: .82rem;
      font-weight: 700;
      color: var(--ink);
      cursor: pointer;
      text-align: left;
      gap: 8px;
      min-height: 36px;
      touch-action: manipulation;
    }
    .tools-item:hover { background: #f3f4f6; }
    .tools-item:active { background: #e0e7ff; color: var(--brand); transform: scale(.97); }
    .tools-item.danger { color: var(--danger); }
    .tools-item.danger:hover { background: #fef2f2; }
    .tools-item kbd {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
      font-size: .65rem;
      padding: 2px 5px;
      border-radius: 5px;
      border: 1px solid #d1d5db;
      background: #f9fafb;
      color: var(--muted);
      font-weight: 600;
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* Mobile menu button */
    #mobile-menu-btn {
      display: none;
      background: #f3f4f6;
      border: none;
      border-radius: 10px;
      padding: 0;
      cursor: pointer;
      font-size: 1.3rem;
      min-height: 36px;
      min-width: 36px;
      justify-content: center;
      align-items: center;
      color: #374151;
      font-weight: 900;
      letter-spacing: .05em;
    }
    #mobile-menu-btn:active { background: #e5e7eb; }

    /* ── MOBILE OVERFLOW MENU ───────────────────────────────── */
    #mobile-overflow-menu {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: 500;
    }
    #mobile-overflow-menu.open { display: flex; flex-direction: column; justify-content: flex-end; }
    .overflow-backdrop {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0.4);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .overflow-sheet {
      position: relative;
      background: white;
      border-radius: 20px 20px 0 0;
      padding: 16px;
      padding-bottom: calc(16px + var(--sab));
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 75vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
      /* Allow native vertical scroll without blocking our tap detection */
      touch-action: pan-y;
    }
    .overflow-handle {
      width: 36px; height: 4px;
      background: #e5e7eb;
      border-radius: 999px;
      margin: 0 auto 12px;
    }
    .overflow-sheet .btn {
      width: 100%;
      justify-content: flex-start;
      font-size: .9rem;
      padding: 14px 16px;
      border-radius: 10px;
      transition: background .12s;
    }
    .overflow-sheet .btn:active {
      background: rgba(37,99,235,0.10) !important;
      transform: scale(0.98);
    }
    body.dark .overflow-sheet { background: #1e2433; }
    body.dark .overflow-sheet .btn { color: var(--ink); background: transparent; border-color: #2d3447; }
    body.dark .overflow-sheet .btn:hover { background: #252d42 !important; }
    body.dark .overflow-sheet .btn.danger { color: var(--danger); }

    /* ── BOTTOM NAV (Mobile) ────────────────────────────────── */
    #bottom-nav {
      display: none;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      background: rgba(255,255,255,0.96);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-top: 1px solid rgba(0,0,0,0.08);
      padding: 6px 0;
      padding-bottom: calc(6px + var(--sab));
      z-index: 1000;
      box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
      overflow: hidden;
    }
    .bottom-nav-inner {
      display: flex;
      align-items: stretch;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 0 4px;
      gap: 2px;
      touch-action: pan-x;
      scroll-snap-type: x proximity;
    }
    .bottom-nav-inner::-webkit-scrollbar { display: none; }
    .bottom-tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 5px 6px;
      border-radius: 10px;
      cursor: pointer;
      transition: background .15s;
      flex: 0 0 auto;
      min-width: 56px;
      max-width: 72px;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none;
      min-height: var(--touch-target);
      justify-content: center;
      overflow: hidden;
      scroll-snap-align: start;
    }
    /* Make child elements non-interactive so touches always bubble to .bottom-tab */
    .btab-icon, .btab-label {
      pointer-events: none;
    }
    .bottom-tab:active { background: rgba(37,99,235,0.08); transform: scale(0.95); }
    .bottom-tab.active { color: var(--brand); }
    .bottom-tab.active .btab-icon {
      background: rgba(37,99,235,0.14);
      box-shadow: 0 0 0 1.5px rgba(37,99,235,0.25);
    }
    body.dark .bottom-tab.active .btab-icon {
      background: rgba(77,142,248,0.18);
      box-shadow: 0 0 0 1.5px rgba(77,142,248,0.3);
    }
    .btab-icon {
      font-size: 1.15rem;
      width: 34px; height: 28px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 9px;
      transition: background .15s;
      flex-shrink: 0;
    }
    .btab-label {
      font-size: .6rem;
      font-weight: 800;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .03em;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      line-height: 1;
    }
    .bottom-tab.active .btab-label { color: var(--brand); }

    .view-container{ flex:1; overflow:hidden; position:relative; display:flex; }

    /* ── PROJECT HUB ─────────────────────────────────────────── */
    #project-hub{
      width:100%; height:100%;
      overflow-y:auto;
      -webkit-overflow-scrolling: touch;
      padding:28px 36px 28px;
      display:flex;
      flex-direction:column;
      gap:0;
      box-sizing:border-box;
    }
    /* The actual folder grid inside the hub */
    #hub-folder-grid {
      flex: 1;
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
      grid-auto-rows: 200px;
      gap:28px 24px;
      align-content:start;
      min-height: 0;
    }
    /* Hub user button — compact avatar in top-right */
    .hub-user-bar {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: 12px;
      position: relative;
    }
    body.dark .hub-user-bar { background: none; border: none; }
    .hub-user-info { display: none; }
    .hub-user-name { display: none; }
    .hub-avatar-btn {
      position: relative;
      display: flex;
      align-items: center;
      gap: 7px;
      background: rgba(255,255,255,0.18);
      border: 1.5px solid rgba(255,255,255,0.25);
      border-radius: 50px;
      padding: 4px 10px 4px 4px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
      font-family: inherit;
      color: var(--ink);
      min-height: 38px;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .hub-avatar-btn:hover {
      background: rgba(255,255,255,0.35);
      border-color: rgba(255,255,255,0.45);
    }
    body.dark .hub-avatar-btn {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.14);
    }
    body.dark .hub-avatar-btn:hover {
      background: rgba(255,255,255,0.14);
    }
    .hub-avatar {
      width: 28px; height: 28px;
      border-radius: 50%;
      object-fit: cover;
    }
    .hub-avatar-initials {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: var(--brand);
      color: white;
      font-size: 0.7rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .hub-avatar-name {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--ink);
      opacity: 0.85;
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .hub-avatar-caret {
      font-size: 0.6rem;
      opacity: 0.5;
      margin-left: 2px;
    }
    /* Dropdown */
    .hub-user-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 10px;
      box-shadow: var(--shadow);
      padding: 6px;
      min-width: 160px;
      z-index: 999;
    }
    .hub-user-dropdown.open { display: block; }
    .hub-signout-btn {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
      background: none;
      border: none;
      border-radius: 7px;
      padding: 8px 10px;
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--danger);
      cursor: pointer;
      font-family: inherit;
      transition: background 0.12s;
      text-align: left;
    }
    .hub-signout-btn:hover { background: #fee2e2; }
    body.dark .hub-signout-btn:hover { background: rgba(240,82,82,0.15); }

    .hub-empty { display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; gap:0; color:#a0836a; font-size:1rem; font-weight:600; grid-column:1/-1; padding:24px; box-sizing:border-box; }
    body.dark .hub-empty { color: #8892a4; }
    .hub-empty span{ display:block; font-size:3rem; margin-bottom:14px; }
    .folder{ position:relative; cursor:pointer; transition:transform .18s; padding-top:18px; display:flex; flex-direction:column; }
    .folder:hover{ transform:translateY(-4px); filter: drop-shadow(0 8px 16px rgba(0,0,0,0.18)); }
    .folder:active{ transform:scale(0.97); }
    .folder-tab{
      width:80px; height:18px; background:#f5d0a9;
      border-radius:8px 8px 0 0; border:1px solid #cbb08a; border-bottom:none;
      position:absolute; top:0; left:0;
    }
    .folder-body{
      background:#fcebc5;
      height:100%;
      min-height:unset;
      max-height:unset;
      border-radius:0 8px 8px 8px;
      border:1px solid #cbb08a;
      box-shadow:3px 5px 14px rgba(0,0,0,.13);
      padding:12px 12px 10px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      position:relative;
      overflow:hidden;
      box-sizing:border-box;
    }
    .pin{
      position:absolute;
      top:10px; right:10px;
      width:10px; height:10px;
      border-radius:50%;
      background:#d32f2f;
      box-shadow:0 2px 0 rgba(0,0,0,.2), 0 8px 18px rgba(0,0,0,.18);
    }
    .folder-label{
        background:white;
        padding:8px 10px;
        border:1px solid #e5e7eb;
        font-family:'Courier Prime', monospace;
      font-weight:900;
      font-size:.85rem;
      transform:rotate(-1deg);
      box-shadow:1px 2px 6px rgba(0,0,0,.10);
      border-radius:10px;
      line-height:1.2;
      max-height:58px;
      overflow:hidden;
        /* Ensure label is readable in dark mode */
        color: #111827;
        /* Prevent long single words from overflowing the card width */
        word-break: break-word;
        overflow-wrap: break-word;
        align-self:flex-start;
        position:relative;
        z-index:2;
        max-width:calc(100% - 42px);
        margin:18px 28px 10px 14px;
      }
    .folder-meta{
      font-size:.75rem;
      color:#886a4a;
      display:flex;
      justify-content:space-between;
      font-weight:800;
    }
    /* Project accent color dot — top-left corner of folder body */
    .folder-color-dot {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 1.5px solid rgba(0,0,0,0.15);
      box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }
    .folder-actions{ display:flex; gap:5px; align-items:center; flex-wrap:wrap; margin-top:2px; }
    .mini{ padding:5px 9px; font-size:.82rem; border-radius:8px; min-height:32px; line-height:1; }
    @media (max-width: 760px) { .mini { min-height: 40px; min-width: 40px; padding: 8px 10px; } }

    /* ── WRITER LAYOUT ───────────────────────────────────────── */
    #writer-app{ width:100%; display:flex; flex-direction:row; background:#e5e7eb; position: relative; overflow:hidden; }
    /* Editor column: holds format bar + frame + stats + mode, flex column */
    .editor-column { flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }
    .sidebar{
      width:300px;
      background:#f9fafb;
      border-right:1px solid #d1d5db;
      display:flex;
      flex-direction:column;
      flex-shrink:0;
      transition: transform .25s cubic-bezier(0.4,0,0.2,1);
    }
    .sidebar-header{
      padding:10px 15px;
      font-size:.72rem;
      font-weight:900;
      color:#6b7280;
      text-transform:uppercase;
      border-bottom:1px solid #e5e7eb;
      background:white;
      letter-spacing:.06em;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }

    /* Mobile sidebar as bottom sheet */
    #mobile-sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 300;
    }
    #mobile-sidebar-overlay.open { display: flex; flex-direction: column; justify-content: flex-end; }
    #mobile-sidebar-overlay .overlay-bg {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0.45);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .mobile-sidebar-sheet {
      position: relative;
      z-index: 1;
      background: #f9fafb;
      border-radius: 20px 20px 0 0;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .mobile-sidebar-handle {
      width: 36px; height: 4px;
      background: #e5e7eb;
      border-radius: 999px;
      margin: 10px auto 4px;
      flex-shrink: 0;
    }

    .scene-search{
      width:100%;
      padding:10px 12px;
      border:none;
      border-bottom:1px solid #e5e7eb;
      border-radius:0;
      font-size:16px;
      background:#fafafa;
      outline:none;
    }
    .scene-search:focus{ background:#fff; border-bottom-color:var(--brand); }

    .scene-list{
      flex:1;
      overflow-y:auto;
      -webkit-overflow-scrolling: touch;
      padding:0; margin:0;
      list-style:none;
      max-height:48%;
      border-bottom:1px solid #d1d5db;
    }
    .scene-item{
      padding:12px 15px;
      border-bottom:1px solid #f3f4f6;
      cursor:pointer;
      font-size:.8rem;
      font-weight:800;
      color:#374151;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      user-select:none;
      display:flex;
      align-items:center;
      gap:8px;
      min-height: var(--touch-target);
      touch-action: manipulation;
    }
    .scene-item:active{ background:#eef2ff; }
    .scene-item:hover{ background:#eef2ff; color:var(--brand); }
    .scene-item.active{ background:#e0e7ff; color:var(--brand); border-left:3px solid var(--brand); padding-left:12px; }
    .scene-num{
      flex-shrink:0;
      background:#e5e7eb;
      color:#6b7280;
      border-radius:4px;
      font-size:.68rem;
      font-weight:900;
      padding:2px 6px;
      min-width: 24px;
      text-align: center;
    }

    .breakdown-tools{ flex:1; overflow-y:auto; -webkit-overflow-scrolling: touch; background:white; padding:12px; }
    .tag-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .tag-btn{
      display:flex; align-items:center;
      width:100%;
      padding:10px 12px;
      border:1px solid #e5e7eb;
      border-radius:10px;
      background:#f8fafc;
      cursor:pointer;
      font-size:.76rem;
      font-weight:900;
      transition:transform .08s, background .10s, border-color .10s;
      user-select:none;
      min-height: var(--touch-target);
      touch-action: manipulation;
    }
    .tag-btn:hover{ background:#f1f5f9; transform:translateY(-1px); border-color:#cbd5e1; }
    .tag-btn:active{ background:#e0e7ff; transform:scale(0.97); }
    .dot{ width:10px; height:10px; border-radius:999px; margin-right:8px; border:1px solid rgba(0,0,0,0.10); flex-shrink:0; }

    .c-cast{ background:#ffb3b3; }
    .c-stunts{ background:#ffd9b3; }
    .c-extras{ background:#b3ffb3; }
    .c-props{ background:#e6b3ff; }
    .c-veh{ background:#ffb3e6; }
    .c-sfx{ background:#b3d9ff; }
    .c-ward{ background:#fff2b3; }
    .c-mu{ background:#d2b48c; }
    .c-ani{ background:#ffcc99; }
    .c-set{ background:#a3d9a5; }
    .c-sound{ background:#a67c52; }
    .c-equip{ background:#cbd5e1; }
    .c-custom{ background:#93c5fd; }
    /* Extended tag types */
    .c-vfx{ background:#e879f9; }
    .c-hair{ background:#fca5a5; }
    .c-music{ background:#6ee7b7; }
    .c-gfx{ background:#fde68a; }
    .c-gr{ background:#86efac; }
    .c-aerial{ background:#bae6fd; }

    .tag{
      border-bottom:2px solid rgba(0,0,0,.45);
      padding:0 2px;
      border-radius:4px;
      cursor:pointer;
      transition:filter .12s;
      user-select:text;
    }
    .tag:hover{ filter:brightness(.96); }
    .tag[data-type="cast"]{ background:#ffb3b3; border-color:#ff0000; }
    .tag[data-type="stunts"]{ background:#ffd9b3; border-color:#e65100; }
    .tag[data-type="extras"]{ background:#b3ffb3; border-color:#1b5e20; }
    .tag[data-type="props"]{ background:#e6b3ff; border-color:#4a148c; }
    .tag[data-type="veh"]{ background:#ffb3e6; border-color:#880e4f; }
    .tag[data-type="sfx"]{ background:#b3d9ff; border-color:#0d47a1; }
    .tag[data-type="ward"]{ background:#fff2b3; border-color:#f57f17; }
    .tag[data-type="mu"]{ background:#d2b48c; border-color:#5d4037; }
    .tag[data-type="ani"]{ background:#ffcc99; border-color:#e64a19; }
    .tag[data-type="set"]{ background:#a3d9a5; border-color:#33691e; }
    .tag[data-type="sound"]{ background:#a67c52; border-color:#3e2723; }
    .tag[data-type="equip"]{ background:#cbd5e1; border-color:#111827; }
    .tag[data-type="custom"]{ background:#93c5fd; border-color:#1d4ed8; }
    /* Extended tag types */
    .tag[data-type="vfx"]{ background:#f5d0fe; border-color:#a21caf; }
    .tag[data-type="hair"]{ background:#fecaca; border-color:#dc2626; }
    .tag[data-type="music"]{ background:#a7f3d0; border-color:#065f46; }
    .tag[data-type="gfx"]{ background:#fef08a; border-color:#a16207; }
    .tag[data-type="gr"]{ background:#bbf7d0; border-color:#15803d; }
    .tag[data-type="aerial"]{ background:#bae6fd; border-color:#0369a1; }

    /* ── PAGED EDITOR FRAME ─────────────────────────────────── */
    .editor-frame{
      flex:1;
      overflow-y:auto;
      scroll-behavior:smooth;
      -webkit-overflow-scrolling: touch;
      display:flex;
      flex-direction: column;
      align-items: center;
      padding: 28px 20px 80px;
      cursor:text;
      position:relative;
      background: #b8b0a0;
      background-image:
        radial-gradient(rgba(0,0,0,.05) 15%, transparent 16%),
        radial-gradient(rgba(0,0,0,.05) 15%, transparent 16%);
      background-size: 4px 4px, 4px 4px;
      background-position: 0 0, 2px 2px;
      /* FIX: scroll-padding-bottom tells the browser how much room to leave at the
         bottom when it auto-scrolls to keep the caret in view.
         Without this the browser treats "visible" as touching the viewport bottom
         edge, but the fixed .editor-statusbar (~43px tall, sitting 18px from bottom)
         physically covers the caret on the last few lines of every page.
         72px = statusbar top (18px) + statusbar height (~25px) + 29px breathing room.
         This is the one and only thing that causes lines to disappear while typing
         or deleting near the bottom of a page. */
      scroll-padding-bottom: 72px;
    }
    body.dark .editor-frame {
      background: #0f1320;
      background-image: none;
    }

    /* The container that holds all pages */
    #pages-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      width: 100%;
      max-width: 900px;
    }

    /* Individual screenplay page sheet */
    .script-page-sheet {
      background: white;
      width: 100%;
      max-width: 860px;
      min-height: 1056px;
      height: 1056px;
      padding: 72px 80px 96px 80px;
      box-sizing: border-box;
      box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.05);
      border-radius: 1px;
      font-family: 'Courier Prime','Courier New',monospace;
      font-size: 12pt;
      line-height: 1.5;
      color: #111;
      position: relative;
      flex-shrink: 0;
      overflow: hidden; /* overridden to visible on mobile (height:auto) */
      transition: box-shadow .2s;
    }
    /* Dotted bottom-margin line to show where the page ends */
    .script-page-sheet::after {
      content: '';
      position: absolute;
      bottom: 72px;
      left: 80px;
      right: 80px;
      border-bottom: 1px dashed rgba(0,0,0,0.1);
      pointer-events: none;
    }
    .script-page-sheet:focus-within {
      box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 8px 28px rgba(0,0,0,0.18), 0 0 0 2px rgba(37,99,235,0.5);
    }
    body.dark .script-page-sheet {
      background: #1e2433;
      color: #e5e9f0;
      box-shadow: 0 4px 6px rgba(0,0,0,0.4), 0 10px 40px rgba(0,0,0,0.55);
    }

    /* Page number in lower right */
    .page-num-badge {
      position: absolute;
      bottom: 42px;
      right: 72px;
      font-family: 'Courier Prime','Courier New',monospace;
      font-size: 10pt;
      color: #aaa;
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
    }
    body.dark .page-num-badge { color: #3d4a60; }

    /* "MORE" hint at bottom of non-last pages (continuation marker) */
    .page-more-hint {
      position: absolute;
      bottom: 42px;
      left: 80px;
      font-family: 'Courier Prime','Courier New',monospace;
      font-size: 9pt;
      color: #ccc;
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
      letter-spacing: 0.1em;
    }
    body.dark .page-more-hint { color: #2d3447; }

    /* Hidden data store — all script content lives here in the DOM */
    #script-page {
      display: none !important;
    }

    /* Editable content area within each page */
    .page-content {
      outline: none;
      height: calc(1056px - 72px - 96px); /* full page minus top/bottom padding */
      /* FIX (page-transition #4): overflow:hidden clips the caret div for the
         two rAF frames between Enter and paginateScript running, causing a
         visible flash where the new line disappears then reappears on page 2.
         overflow-y:clip paints the overflowing content (keeping the caret
         visible) while still preventing the user from scrolling inside the box.
         The sheet itself keeps overflow:hidden so nothing bleeds into the margin. */
      overflow: hidden;
      overflow-y: clip;
      white-space: pre-wrap;
      caret-color: #111;
      -webkit-text-size-adjust: none;
    }
    body.dark .page-content { caret-color: #e5e9f0; }
    .page-content, .page-content * {
      -webkit-user-select: text !important;
      user-select: text !important;
    }

    /* ── MOBILE FORMATTING TOOLBAR — Floating Pill ──────────── */
    #mobile-format-bar {
      display: none; /* shown via JS on mobile */
      position: fixed;
      z-index: 4500;
      /* Default position: above keyboard, centered — overridden by JS */
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      background: white;
      border: 1px solid rgba(0,0,0,0.10);
      border-radius: 18px;
      padding: 6px 10px 6px 6px;
      gap: 0;
      flex-direction: row;
      align-items: center;
      overflow: visible; /* pill handles its own scroll inside */
      box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.10);
      max-width: 92vw;
      touch-action: none; /* drag takes over */
      transition: bottom 0.18s ease, opacity 0.15s ease;
      opacity: 1;
      /* Don't hide scrollbar outside — inner scroll container handles it */
    }
    body.dark #mobile-format-bar {
      background: #1e2433;
      border-color: #2d3447;
      box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
    }
    #mobile-format-bar::-webkit-scrollbar { display: none; }

    /* Drag handle knob on the left */
    #fmt-drag-handle {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 6px 8px 6px 4px;
      cursor: grab;
      flex-shrink: 0;
      opacity: 0.35;
      touch-action: none;
      align-self: stretch;
      justify-content: center;
    }
    #fmt-drag-handle:active { cursor: grabbing; opacity: 0.65; }
    #fmt-drag-handle span {
      display: block;
      width: 18px;
      height: 2px;
      border-radius: 2px;
      background: var(--ink);
    }
    body.dark #fmt-drag-handle span { background: var(--ink); }

    /* Inner scrollable chips row */
    #fmt-chips-scroll {
      display: flex;
      gap: 5px;
      align-items: center;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-right: 2px;
    }
    #fmt-chips-scroll::-webkit-scrollbar { display: none; }

    .format-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 6px 12px;
      border-radius: 999px;
      border: 1.5px solid #e5e7eb;
      background: #f9fafb;
      font-size: .72rem;
      font-weight: 900;
      white-space: nowrap;
      cursor: pointer;
      min-height: 34px;
      touch-action: manipulation;
      flex-shrink: 0;
      transition: background .1s, border-color .1s, transform .08s;
    }
    body.dark .format-chip { background: #252d42; border-color: #2d3447; color: var(--ink); }
    .format-chip:active { transform: scale(0.94); background: #e0e7ff; border-color: var(--brand); color: var(--brand); }
    .format-chip.active-chip { background: #e0e7ff; border-color: var(--brand); color: var(--brand); }
    body.dark .format-chip.active-chip { background: #1d2d4a; border-color: var(--brand); color: var(--brand); }

    /* Format chips group and tag mode chips inside scroll area */
    .format-chips-group {
      display: flex;
      gap: 5px;
      align-items: center;
    }
    .tag-mode-chips {
      display: none;
      gap: 5px;
      align-items: center;
    }
    #mobile-format-bar.tag-mode .format-chips-group { display: none; }
    #mobile-format-bar.tag-mode .tag-mode-chips { display: flex; }

    /* "dragging" state — suppress transitions */
    #mobile-format-bar.is-dragging {
      transition: none !important;
      opacity: 0.88;
    }

    /* ── TAG FLOATING TOOLBAR (desktop) + MOBILE INLINE TAG MODE ─── */
    #tag-float-bar {
      display: none;
      position: fixed;
      bottom: calc(var(--sab) + 80px);
      left: 50%;
      transform: translateX(-50%);
      background: #1f2937;
      border-radius: 14px;
      padding: 8px 10px;
      gap: 6px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      z-index: 5000;
      box-shadow: 0 10px 30px rgba(0,0,0,0.45);
      max-width: 92vw;
      transition: bottom 0.15s ease;
    }
    #tag-float-bar.visible { display: flex; }
    #tag-float-bar::-webkit-scrollbar { display: none; }
    .tag-float-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 6px 10px;
      border-radius: 8px;
      border: none;
      background: rgba(255,255,255,0.1);
      color: white;
      font-size: .7rem;
      font-weight: 900;
      cursor: pointer;
      white-space: nowrap;
      min-height: 34px;
      touch-action: manipulation;
      transition: background .1s;
    }
    .tag-float-btn:active { background: rgba(255,255,255,0.25); }
    .tag-float-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px; height: 30px;
      border-radius: 6px;
      border: none;
      background: rgba(255,255,255,0.15);
      color: white;
      font-size: .9rem;
      cursor: pointer;
      touch-action: manipulation;
      flex-shrink: 0;
    }

    /* ── MOBILE INLINE TAG MODE ──────────────────────────────────────
       When text is selected on mobile, the format bar switches to
       "tag mode" in-place. No new element is shown — the existing
       format bar transforms. This preserves keyboard focus and keeps
       the text selection alive because no blur event fires.
    ──────────────────────────────────────────────────────────────── */
    .tag-mode-label {
      font-size: .62rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--brand);
      white-space: nowrap;
      padding: 0 2px 0 4px;
      flex-shrink: 0;
      border-right: 1px solid rgba(37,99,235,.25);
      margin-right: 2px;
    }
    .inline-tag-chip {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 5px 9px;
      border-radius: 999px;
      border: 1.5px solid transparent;
      font-size: .65rem;
      font-weight: 900;
      white-space: nowrap;
      cursor: pointer;
      min-height: 32px;
      touch-action: manipulation;
      flex-shrink: 0;
      background: #1f2937;
      color: white;
      transition: background .08s, transform .06s;
      -webkit-user-select: none;
      user-select: none;
    }
    .inline-tag-chip:active { transform: scale(0.92); background: #374151; }
    .inline-tag-cancel {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1.5px solid #e5e7eb;
      background: #f9fafb;
      color: #374151;
      font-size: .65rem;
      font-weight: 900;
      cursor: pointer;
      min-height: 32px;
      touch-action: manipulation;
      flex-shrink: 0;
      white-space: nowrap;
      -webkit-user-select: none;
      user-select: none;
    }
    .inline-tag-cancel:active { background: #f3f4f6; }
    body.dark .inline-tag-cancel { background: #252d42; border-color: #2d3447; color: var(--ink); }
    /* On mobile suppress the floating bar — inline mode handles tagging */
    @media (max-width: 768px) {
      #tag-float-bar { display: none !important; }
    }

    /* ── UNIFIED EDITOR STATUS BAR ───────────────────────────── */
    .editor-statusbar {
      position: fixed;
      bottom: 18px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(17,24,39,.80);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: rgba(255,255,255,.78);
      padding: 6px 16px;
      border-radius: 999px;
      font-size: .72rem;
      font-weight: 700;
      pointer-events: none;
      z-index: 999;
      display: flex;
      align-items: center;
      gap: 10px;
      letter-spacing: .03em;
      transition: opacity .3s, background .25s;
      white-space: nowrap;
      border: 1px solid rgba(255,255,255,.06);
    }
    .esb-sep { color: rgba(255,255,255,.28); }
    .esb-divider {
      width: 1px;
      height: 12px;
      background: rgba(255,255,255,.2);
      flex-shrink: 0;
      margin: 0 2px;
    }
    /* Save states colour just the save-status span */
    #save-status {
      color: rgba(255,255,255,.55);
      transition: color .2s, font-weight .2s;
      font-size: .75rem;
      font-weight: 600;
      white-space: nowrap;
    }
    #save-status.unsaved { color: #fca5a5; font-weight: 800; }
    #save-status.saving  { color: rgba(255,255,255,.45); }
    #save-status.saved   { color: #86efac; font-weight: 700; }
    /* Spinner on saving */
    #save-status.saving::before {
      content: '';
      display: inline-block;
      width: 7px; height: 7px;
      border-radius: 50%;
      border: 2px solid currentColor;
      border-top-color: transparent;
      animation: spin .6s linear infinite;
      margin-right: 5px;
      vertical-align: middle;
    }
    body.dark .editor-statusbar { background: rgba(10,13,22,.85); border-color: rgba(255,255,255,.07); }
    body.focus-mode .editor-statusbar { opacity: .25; transition: opacity .3s; }
    body.focus-mode .editor-statusbar:hover { opacity: 1; }

    /*
     * SCREENPLAY FORMAT — WGA standard on US Letter
     * Page content width: 860px max, 40px padding each side → ~780px text area
     * At 72dpi, 1 inch ≈ 96px. We use percentages/ch so they scale with the container.
     *
     * Standard column inches (from left edge of text area):
     *   Action/Scene:     0"  →  5.5" (full width)
     *   Transition:       4"  →  right-aligned
     *   Character:        2.1"  centered block, ~2" wide
     *   Dialogue:         1"  →  3.5"  (2.5" wide)
     *   Parenthetical:    1.5" →  3"   (1.5" wide)
     *
     * Converted to % of 780px:
     *   1"   ≈ 12.3%
     *   1.5" ≈ 19.2%
     *   2.1" ≈ 26.9%
     *   3.5" right margin ≈ 22.4% from right (2.5" / 11" page)
     */
    .line{
      min-height:1.4em;
      margin-bottom:0;
      line-height:1.5;
      white-space:pre-wrap;
      word-wrap:break-word;
    }
    /* A blank line gap between action blocks */
    .line + .line { margin-top:0; }
    /* Scene heading */
    .line.scene{
      font-weight:bold;
      text-transform:uppercase;
      margin-top:2em;
      margin-bottom:0.2em;
      margin-left:0;
      margin-right:0;
    }
    /* Action (default) */
    .line:not(.scene):not(.character):not(.dialogue):not(.parenthetical):not(.transition){
      margin-left:0;
      margin-right:0;
    }
    /* Character cue — center-left at ~2.2" in from text edge */
    .line.character{
      margin-left:37%;
      margin-right:5%;
      margin-top:1em;
      margin-bottom:0;
      text-transform:uppercase;
    }
    /* Dialogue — 1" in from each side, narrower column */
    .line.dialogue{
      margin-left:22%;
      margin-right:18%;
      margin-bottom:0;
      margin-top:0;
    }
    /* Parenthetical — slightly tighter than dialogue */
    .line.parenthetical{
      margin-left:28%;
      margin-right:22%;
      margin-bottom:0;
      margin-top:0;
      font-style:italic;
    }
    /* Transition — flush right */
    .line.transition{
      text-align:right;
      margin-left:50%;
      margin-right:0;
      margin-top:1em;
      text-transform:uppercase;
    }
    /* SHOT heading — like scene but smaller-weight, indented 1" */
    .line.shot{
      font-weight:bold;
      text-transform:uppercase;
      margin-top:1em;
      margin-bottom:0;
      margin-left:0;
      margin-right:0;
      font-size:.92em;
      letter-spacing:.04em;
    }
    /* SUPER / TITLE CARD — centered, italic, visually distinct */
    .line.supers{
      text-align:center;
      font-style:italic;
      font-weight:600;
      margin-top:1em;
      margin-bottom:.5em;
      margin-left:10%;
      margin-right:10%;
      color:#1e3a5f;
    }
    body.dark .line.supers{ color:#93c5fd; }
    /* Centered action — centered block for logos, titles, credits */
    .line.centered{
      text-align:center;
      margin-left:15%;
      margin-right:15%;
      margin-top:.5em;
      margin-bottom:.5em;
    }
    /* Lyrics — indented, italic, for song text */
    .line.lyrics{
      margin-left:22%;
      margin-right:18%;
      font-style:italic;
      margin-top:0;
      margin-bottom:0;
    }
    /* Writer note — non-printing, amber background, visually flagged */
    .line.writer-note{
      background:rgba(251,191,36,.12);
      border-left:3px solid #f59e0b;
      padding-left:8px;
      margin-left:0;
      margin-right:0;
      margin-top:.3em;
      margin-bottom:.3em;
      font-style:italic;
      color:#92400e;
      border-radius:0 4px 4px 0;
    }
    body.dark .line.writer-note{ background:rgba(251,191,36,.08); color:#fbbf24; }
    /* Writer note author attribution badge — shown when data-author is set */
    .line.writer-note[data-author]::before {
      content: "✏ " attr(data-author);
      display: block;
      font-size: .6rem;
      font-style: normal;
      font-weight: 700;
      color: #92400e;
      opacity: .65;
      letter-spacing: .04em;
      margin-bottom: 2px;
    }
    body.dark .line.writer-note[data-author]::before { color: #fbbf24; }
    @media print { .line.writer-note[data-author]::before { display: none; } }
    /* Auto-format: flagged lines (low confidence) get a subtle amber underline */
    .line[data-autoformat-flag="1"]{
      border-bottom: 2px dashed #f59e0b;
    }
    /* Auto-format: generated scene headings get an amber left stripe */
    .line.scene[data-generated="1"]{
      border-left: 3px solid #f59e0b;
      padding-left: 6px;
      color: #b45309;
    }
    body.dark .line.scene[data-generated="1"]{ color: #fbbf24; }

    #mode-indicator{
      position:fixed;
      bottom:18px; right:18px;
      background:#111827;
      color:white;
      padding:10px 14px;
      border-radius:999px;
      font-size:.8rem;
      font-weight:900;
      box-shadow:0 10px 25px rgba(0,0,0,.22);
      pointer-events:none;
      display:flex;
      align-items:center;
      gap:10px;
      opacity:.92;
      z-index:1000;
      transition:transform .12s;
    }
    #mode-icon{ font-size:1.1rem; }

    #mode-indicator select{
      font-size:0.8rem;
      background:#1f2937;
      color:#fff;
      border:none;
      border-radius:4px;
      padding:2px 6px;
      pointer-events:auto;
      appearance:none;
    }

    .page-marker {
      user-select: none;
      -webkit-user-select: none;
      text-align: center;
      color: #9ca3af;
      font-family: 'Inter', sans-serif;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      margin: 40px -80px;   /* bleed to page edges */
      padding: 20px 0;
      background: #e5e7eb;
      box-shadow: inset 0 4px 6px -4px rgba(0,0,0,0.1), inset 0 -4px 6px -4px rgba(0,0,0,0.1);
      border-top: 1px solid #d1d5db;
      border-bottom: 1px solid #d1d5db;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .app-pad{ width:100%; padding:20px; background:#f3f4f6; overflow-y:auto; -webkit-overflow-scrolling: touch; }
    .card{
      background:white;
      border-radius:16px;
      box-shadow:var(--shadow);
      max-width:1100px;
      margin:0 auto;
      padding:20px;
    }
    /* Polish: top highlight edge for depth */
    .card {
      border: 1px solid rgba(0,0,0,.07);
      box-shadow: var(--shadow), 0 1px 0 rgba(255,255,255,.9) inset;
    }
    body.dark .card {
      border-color: #2d3447;
      box-shadow: var(--shadow), 0 1px 0 rgba(255,255,255,.04) inset;
    }
    .card h2{ margin:0 0 14px 0; }
    .card h3{ margin:18px 0 10px 0; }
    table{ width:100%; border-collapse:collapse; }
    th, td{ text-align:left; padding:10px; border-bottom:1px solid #eee; }
    thead th{ background:#f9fafb; border-bottom:2px solid #eee; font-size:.85rem; }
    .note{ color:var(--muted); font-size:.85rem; line-height:1.3; }

    /* Responsive table wrapper */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-scroll table { min-width: 100%; }
    .table-scroll td, .table-scroll th { word-break: break-word; }

    /* ── Location Scout ─────────────────────────────────────────────── */
    .loc-card { background:white; border:1px solid #e5e7eb; border-radius:14px; padding:18px; margin-bottom:14px; box-shadow:0 1px 4px rgba(0,0,0,.06); }
    .loc-card input[type="text"],.loc-card input[type="url"],.loc-card input[type="email"],
    .loc-card input[type="date"],.loc-card input[type="number"],.loc-card input:not([type]),
    .loc-card textarea {
      border:1px solid #e5e7eb; border-radius:6px; padding:6px 9px; font-size:.82rem;
      font-family:inherit; background:#f9fafb; color:var(--ink); transition:border-color .15s;
      box-sizing:border-box;
    }
    .loc-card input:focus,.loc-card textarea:focus { border-color:var(--brand); outline:none; background:white; }
    .loc-label { font-size:.65rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; display:block; }
    .loc-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
    .loc-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:8px; }
    .loc-cl-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:14px; }
    .loc-card details { margin-bottom:6px; border-radius:8px; overflow:hidden; border:1px solid #e5e7eb; }
    .loc-card details.grp-done { border-color:#bbf7d0; }
    .loc-card details summary { display:flex; align-items:center; gap:6px; padding:8px 10px; cursor:pointer; user-select:none; background:#f9fafb; font-size:.78rem; font-weight:700; list-style:none; min-height:40px; -webkit-tap-highlight-color:transparent; }
    .loc-card details summary::-webkit-details-marker,.loc-card details summary::marker { display:none; }
    .loc-card details.grp-done summary { background:#f0fdf4; }
    .loc-card details summary:active { background:rgba(37,99,235,.06); }
    .loc-chevron { font-size:.6rem; color:var(--muted); transition:transform .2s; margin-left:2px; }
    .loc-card details[open] .loc-chevron { transform:rotate(180deg); }
    .loc-cbadge { font-size:.68rem; font-weight:700; padding:1px 7px; border-radius:999px; background:#f3f4f6; color:#6b7280; flex-shrink:0; }
    .loc-cbadge.done { background:#dcfce7; color:#15803d; }
    .loc-ci { border-bottom:1px solid #f3f4f6; padding:5px 0 4px; }
    .loc-ci:last-child { border-bottom:none; }
    .loc-clabel { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:.82rem; min-height:36px; -webkit-tap-highlight-color:transparent; }
    .loc-clabel input[type="checkbox"] { width:18px; height:18px; flex-shrink:0; accent-color:var(--brand); cursor:pointer; }
    .loc-ctext { flex:1; line-height:1.35; }
    .loc-ctext.done { text-decoration:line-through; color:var(--muted); }
    .loc-cnote { display:block; margin:3px 0 0 26px; width:calc(100% - 26px) !important; font-size:.75rem !important; padding:3px 7px !important; background:#fafafa !important; border:1px solid #e5e7eb; border-radius:4px; box-sizing:border-box; }
    .loc-tod { display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px; font-size:.75rem; font-weight:700; margin:3px; border:1.5px solid #e5e7eb; background:transparent; color:var(--muted); cursor:pointer; user-select:none; min-height:34px; transition:border-color .12s,background .12s,color .12s; -webkit-tap-highlight-color:transparent; }
    .loc-tod.on { border-color:var(--brand); background:rgba(37,99,235,.1); color:var(--brand); }
    .loc-tod:active { transform:scale(.93); }
    .loc-star { cursor:pointer; font-size:1.4rem; padding:4px 2px; transition:color .12s; display:inline-block; -webkit-tap-highlight-color:transparent; }
    .loc-star:active { transform:scale(1.2); }
    .loc-photo-wrap { display:inline-block; width:120px; vertical-align:top; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; margin:3px; position:relative; }
    .loc-photo-img { width:100%; height:80px; object-fit:cover; display:block; background:#f3f4f6; }
    .loc-photo-link { display:flex; width:100%; height:80px; align-items:center; justify-content:center; background:#f0f4ff; font-size:.72rem; color:var(--brand); font-weight:700; text-decoration:none; gap:4px; flex-direction:column; }
    .loc-photo-del { position:absolute; top:4px; right:4px; background:rgba(185,28,28,.85); color:white; border:none; border-radius:50%; width:22px; height:22px; font-size:11px; cursor:pointer; line-height:22px; text-align:center; z-index:2; }
    .loc-photo-badge { position:absolute; top:4px; left:4px; font-size:.55rem; font-weight:700; padding:1px 5px; border-radius:3px; color:white; }
    .loc-photo-cap { font-size:.68rem !important; border:none !important; outline:none !important; background:transparent !important; width:100%; padding:3px 5px 4px !important; }
    .loc-agree { margin-top:12px; padding:10px 12px; background:linear-gradient(135deg,#eff6ff,#f5f3ff); border:1px solid #c7d2fe; border-radius:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .loc-agree-wrap { flex:1; min-width:150px; }
    .loc-send { background:#4338ca; color:white; border:none; border-radius:8px; padding:9px 16px; font-size:.82rem; font-weight:700; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; min-height:40px; font-family:inherit; }
    .loc-send:hover { background:#3730a3; }
    .loc-chip { display:inline-flex; align-items:center; padding:5px 11px; border-radius:999px; font-size:.78rem; font-weight:600; border:1.5px solid #e5e7eb; background:transparent; color:var(--muted); cursor:pointer; user-select:none; min-height:34px; transition:border-color .12s,background .12s,color .12s; -webkit-tap-highlight-color:transparent; margin:3px; }
    .loc-chip.on { border-color:#3730a3; background:#e0e7ff; color:#3730a3; }
    .loc-chip:active { transform:scale(.94); }
    /* dark */
    body.dark .loc-card { background:#1e2433 !important; border-color:#2d3447 !important; }
    body.dark .loc-card input,body.dark .loc-card textarea { background:#13172a; border-color:#2d3447; color:#e5e9f0; }
    body.dark .loc-card input:focus,body.dark .loc-card textarea:focus { background:#0f1320; }
    body.dark .loc-card select { background:#13172a; border-color:#2d3447; color:#e5e9f0; }
    body.dark .loc-card details { border-color:#2d3447 !important; }
    body.dark .loc-card details.grp-done { border-color:rgba(22,163,74,.4) !important; }
    body.dark .loc-card details summary { background:#13172a !important; }
    body.dark .loc-card details.grp-done summary { background:rgba(22,163,74,.08) !important; }
    body.dark .loc-ci { border-color:#2d3447; }
    body.dark .loc-cnote { background:#0f1320 !important; border-color:#2d3447; }
    body.dark .loc-photo-wrap { border-color:#2d3447; }
    body.dark .loc-photo-link { background:rgba(37,99,235,.12); }
    body.dark .loc-agree { background:rgba(67,56,202,.1); border-color:rgba(99,102,241,.3); }
    body.dark .loc-agree input { background:#13172a !important; border-color:rgba(99,102,241,.3) !important; }
    body.dark .loc-tod { border-color:#2d3447; color:#9ca3af; }
    body.dark .loc-tod.on { border-color:var(--brand); color:#93c5fd; background:rgba(37,99,235,.15); }
    body.dark .loc-chip { border-color:#2d3447; color:#9ca3af; }
    body.dark .loc-chip.on { background:rgba(55,48,163,.25); border-color:#6366f1; color:#a5b4fc; }
    /* mobile */
    @media(max-width:600px){
      .loc-grid-2 { grid-template-columns:1fr; }
      .loc-grid-3 { grid-template-columns:1fr 1fr; }
      .loc-cl-grid { grid-template-columns:1fr; }
      .loc-card { padding:14px 12px; }
      .loc-agree { flex-direction:column; align-items:stretch; }
      .loc-send { width:100%; justify-content:center; }
    }
    @media(max-width:400px){ .loc-grid-3 { grid-template-columns:1fr; } }

    /* ── 3D Location Scan Viewer ──────────────────────────────────────────── */
    .loc-scan-strip { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; padding:12px 14px; background:linear-gradient(135deg,#0f172a,#1e293b); border-radius:12px; border:1px solid #334155; }
    .loc-scan-title { font-size:.62rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; color:#64748b; margin-bottom:8px; }
    .loc-scan-thumb { width:88px; height:60px; border-radius:8px; overflow:hidden; background:#0f172a; border:2px solid #334155; cursor:pointer; position:relative; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:border-color .15s,transform .15s; }
    .loc-scan-thumb:hover { border-color:#0ea5e9; transform:scale(1.04); }
    .loc-scan-thumb canvas { width:100% !important; height:100% !important; }
    .loc-scan-thumb-icon { font-size:1.6rem; color:#475569; }
    .loc-scan-thumb-label { position:absolute; bottom:0; left:0; right:0; font-size:.55rem; font-weight:700; padding:3px 5px; background:rgba(0,0,0,.7); color:#94a3b8; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .loc-scan-thumb-del { position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:rgba(185,28,28,.9); color:#fff; border:none; font-size:9px; cursor:pointer; display:none; align-items:center; justify-content:center; z-index:3; }
    .loc-scan-thumb:hover .loc-scan-thumb-del { display:flex; }
    .loc-scan-add-btn { width:88px; height:60px; border:2px dashed #334155; border-radius:8px; background:transparent; color:#475569; font-size:.72rem; font-weight:700; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; transition:border-color .15s,color .15s; flex-shrink:0; }
    .loc-scan-add-btn:hover { border-color:#0ea5e9; color:#0ea5e9; }
    .loc-scan-add-btn-icon { font-size:1.4rem; }
    .loc-scan-info { font-size:.65rem; color:#475569; flex:1; min-width:120px; }
    .loc-scan-pin-count { font-size:.65rem; font-weight:700; color:#0ea5e9; background:rgba(14,165,233,.12); border:1px solid rgba(14,165,233,.25); border-radius:999px; padding:2px 8px; white-space:nowrap; }
    /* Scan Viewer Modal */
    #scan-viewer-modal { position:fixed; inset:0; z-index:9999; display:none; background:#020617; }
    #scan-viewer-modal.open { display:flex; flex-direction:column; }
    #scan-viewer-header { display:flex; align-items:center; gap:10px; padding:10px 16px; background:rgba(2,6,23,.9); border-bottom:1px solid #1e293b; flex-shrink:0; backdrop-filter:blur(8px); z-index:10; }
    #scan-viewer-title { font-size:.9rem; font-weight:800; color:#e2e8f0; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .scan-hdr-btn { background:transparent; border:1px solid #334155; border-radius:7px; color:#94a3b8; font-size:.72rem; font-weight:700; padding:5px 12px; cursor:pointer; transition:all .12s; white-space:nowrap; display:flex; align-items:center; gap:5px; }
    .scan-hdr-btn:hover { border-color:#0ea5e9; color:#0ea5e9; background:rgba(14,165,233,.08); }
    .scan-hdr-btn.active { background:#0ea5e9; border-color:#0ea5e9; color:#fff; }
    .scan-hdr-btn.danger { border-color:#dc2626; color:#dc2626; }
    .scan-hdr-btn.danger:hover { background:#dc2626; color:#fff; }
    #scan-viewer-body { flex:1; display:flex; min-height:0; position:relative; }
    #scan-canvas-wrap { flex:1; position:relative; overflow:hidden; cursor:grab; }
    #scan-canvas-wrap.pin-mode { cursor:crosshair; }
    #scan-canvas-wrap:active { cursor:grabbing; }
    #scan-canvas-wrap.pin-mode:active { cursor:crosshair; }
    #scan-three-canvas { display:block; width:100% !important; height:100% !important; }
    /* Pin sidebar */
    #scan-pin-sidebar { width:280px; min-width:220px; flex-shrink:0; background:#0a0f1e; border-left:1px solid #1e293b; display:flex; flex-direction:column; overflow:hidden; }
    #scan-pin-sidebar-header { padding:12px 14px 8px; border-bottom:1px solid #1e293b; flex-shrink:0; }
    #scan-pin-sidebar-title { font-size:.62rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; color:#475569; margin-bottom:8px; }
    #scan-pin-list { flex:1; overflow-y:auto; padding:6px 0; }
    #scan-pin-detail { flex-shrink:0; border-top:1px solid #1e293b; background:#060c1a; max-height:50%; overflow-y:auto; }
    .scan-pin-item { display:flex; align-items:center; gap:8px; padding:7px 14px; cursor:pointer; transition:background .1s; border-left:3px solid transparent; }
    .scan-pin-item:hover { background:rgba(14,165,233,.07); }
    .scan-pin-item.selected { background:rgba(14,165,233,.12); border-left-color:#0ea5e9; }
    .scan-pin-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
    .scan-pin-name { flex:1; font-size:.75rem; font-weight:700; color:#cbd5e1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .scan-pin-type-tag { font-size:.55rem; font-weight:800; padding:2px 6px; border-radius:4px; white-space:nowrap; }
    /* Pin type filter chips */
    .scan-type-chip { font-size:.62rem; font-weight:700; padding:3px 8px; border-radius:999px; border:1px solid #334155; background:transparent; color:#64748b; cursor:pointer; transition:all .12s; white-space:nowrap; }
    .scan-type-chip.active { background:#0ea5e9; border-color:#0ea5e9; color:#fff; }
    /* Detail pane */
    #scan-pin-detail input, #scan-pin-detail textarea, #scan-pin-detail select { width:100%; box-sizing:border-box; background:#0a0f1e; border:1px solid #1e293b; border-radius:6px; padding:5px 8px; font:inherit; font-size:.75rem; color:#cbd5e1; margin-bottom:6px; resize:none; }
    #scan-pin-detail input:focus, #scan-pin-detail textarea:focus, #scan-pin-detail select:focus { outline:none; border-color:#0ea5e9; }
    #scan-pin-detail label { font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#475569; display:block; margin-bottom:2px; }
    /* 3D pin markers injected into canvas overlay */
    .scan-pin-overlay { position:absolute; pointer-events:none; top:0; left:0; width:100%; height:100%; }
    .scan-pin-label { position:absolute; transform:translate(-50%,-100%); background:rgba(2,6,23,.92); border:1.5px solid; border-radius:8px; padding:3px 8px; font-size:.62rem; font-weight:800; white-space:nowrap; pointer-events:all; cursor:pointer; transition:opacity .15s; max-width:120px; overflow:hidden; text-overflow:ellipsis; user-select:none; z-index:5; }
    .scan-pin-label::after { content:''; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); border-width:5px 4px 0; border-style:solid; border-color:inherit transparent transparent; }
    .scan-pin-label.selected { z-index:5; transform:translate(-50%,-100%) scale(1.05); }
    /* Loading overlay */
    #scan-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:#020617; z-index:20; }
    #scan-loading-bar { width:200px; height:3px; background:#1e293b; border-radius:999px; overflow:hidden; }
    #scan-loading-fill { height:100%; background:#0ea5e9; border-radius:999px; width:0; transition:width .3s; }
    #scan-loading-msg { font-size:.8rem; font-weight:700; color:#475569; }
    /* Empty state */
    #scan-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; pointer-events:none; }
    #scan-empty-icon { font-size:3.5rem; opacity:.25; }
    #scan-empty-msg { font-size:.85rem; font-weight:700; color:#334155; text-align:center; max-width:220px; line-height:1.4; }
    /* Measure mode */
    .scan-measure-line { position:absolute; pointer-events:none; top:0; left:0; width:100%; height:100%; }
    /* Mobile responsive */
    @media(max-width:700px) {
      #scan-pin-sidebar { display:none; }
      #scan-pin-sidebar.mobile-open { display:flex; position:absolute; right:0; top:0; bottom:0; z-index:10; box-shadow:-4px 0 24px rgba(0,0,0,.5); }
      #scan-mobile-pins-btn { display:block !important; }
    }
    /* ── End 3D Scan Viewer ─────────────────────────────────────────────────── */

    #stripboard-app{
      width:100%;
      display:flex;
      flex-direction:column;
    }
    .stripboard-toolbar{
      padding:12px 16px;
      background:rgba(255,255,255,.25);
      border-bottom:1px solid rgba(255,255,255,.3);
      display:flex;
      align-items:center;
      gap:10px;
      flex-shrink:0;
      backdrop-filter:blur(4px);
      flex-wrap: wrap;
    }
    .stripboard-scroll{
      flex:1;
      overflow-x:auto;
      overflow-y:auto;
      -webkit-overflow-scrolling: touch;
      padding:20px;
      display:flex;
      gap:18px;
      align-items:flex-start;
    }
    .strip-column{
      min-width:280px;
      background:rgba(255,255,255,.40);
      border:2px dashed rgba(255,255,255,.65);
      border-radius:14px;
      padding:12px;
      padding-top:44px;
      position:relative;
      box-shadow:var(--shadow-soft);
      flex-shrink:0;
    }
    .strip-header{
      position:absolute;
      top:-16px;
      left:50%;
      transform:translateX(-50%) rotate(-1deg);
      background:#fef3c7;
      padding:6px 16px;
      font-family:'Caveat',cursive;
      font-size:1.25rem;
      box-shadow:0 2px 6px rgba(0,0,0,.12);
      z-index:10;
      width:78%;
      text-align:center;
      border-radius:12px;
      border:1px solid rgba(0,0,0,.06);
      user-select:none;
    }
    .strip{
      background:#f8fafc;
      border:1px solid #cbd5e1;
      border-left:6px solid #64748b;
      padding:12px;
      margin-bottom:10px;
      border-radius:12px;
      font-family:'Inter',sans-serif;
      box-shadow:0 2px 6px rgba(0,0,0,.06);
      cursor:grab;
      user-select:none;
      transition:transform .10s, box-shadow .12s;
      touch-action: none;
    }
    .strip:hover{ transform:translateY(-2px); box-shadow:0 10px 18px rgba(0,0,0,.10); }
    .strip:active{ cursor:grabbing; }
    .strip-int{ background:white; }
    .strip-ext{ background:#fefce8; }
    /* Drag handle hint on strips */
    .strip::before {
      content: '⠿';
      position: absolute;
      top: 50%;
      left: -18px;
      transform: translateY(-50%);
      font-size: .7rem;
      color: rgba(0,0,0,0.2);
      pointer-events: none;
      opacity: 0;
      transition: opacity .15s;
    }
    .strip-column:hover .strip::before { opacity: 1; }
    .strip-slug{
      font-weight:900;
      font-size:.75rem;
      text-transform:uppercase;
      display:flex;
      justify-content:space-between;
      gap:6px;
      margin-bottom:6px;
      color:#111827;
      min-width:0;
    }
    .strip-slug > span:first-child {
      flex:1;
      min-width:0;
      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
    }
    .strip-sub{
      font-size:.72rem; color:#6b7280; font-weight:800;
      overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    }
    .strip-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
    /* ── STRIPBOARD BANNER STRIPS ──────────────────────────────────────── */
    .strip-banner { border-radius: 5px; margin: 3px 4px; padding: 5px 10px; font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 6px; user-select: none; }
    .strip-banner-move   { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
    .strip-banner-meal   { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
    .strip-banner-travel { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
    .strip-banner-setup  { background: #fce7f3; color: #9d174d; border: 1px solid #f9a8d4; }
    .strip-banner-end    { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
    .strip-banner-del { background: none; border: none; cursor: pointer; color: inherit; opacity: .45; font-size: .8rem; margin-left: auto; padding: 0; line-height: 1; }
    .strip-banner-del:hover { opacity: 1; }
    .strip-banner-add-btn { display: block; width: calc(100% - 8px); margin: 2px 4px 4px; padding: 3px 0; background: none; border: 1.5px dashed #cbd5e1; border-radius: 5px; font-size: .6rem; font-weight: 700; color: #94a3b8; cursor: pointer; text-align: center; transition: border-color .12s, color .12s; }
    .strip-banner-add-btn:hover { border-color: var(--brand); color: var(--brand); }
    .sb-add-banner-btn { font-size: .6rem; font-weight: 700; color: var(--muted); background: none; border: 1px dashed #d1d5db; border-radius: 4px; padding: 3px 8px; margin: 2px 4px; cursor: pointer; width: calc(100% - 8px); text-align: center; display: block; }
    .sb-add-banner-btn:hover { background: #f0f4ff; color: var(--brand); border-color: var(--brand); }
    body.dark .strip-banner-move   { background: #1e3a5f; color: #93c5fd; border-color: #1e40af; }
    body.dark .strip-banner-meal   { background: #14532d; color: #86efac; border-color: #166534; }
    body.dark .strip-banner-travel { background: #422006; color: #fde047; border-color: #854d0e; }
    body.dark .strip-banner-setup  { background: #500724; color: #f9a8d4; border-color: #9d174d; }
    body.dark .strip-banner-end    { background: #1f2937; color: #9ca3af; border-color: #374151; }
    .strip-badge{ width:10px; height:10px; border-radius:50%; border:1px solid rgba(0,0,0,.12); cursor:default; }
    /* Badge tooltip wrapper — hover shows department names */
    .strip-badges-tip-wrap {
      display: flex; flex-wrap: wrap; gap: 3px;
      position: relative; cursor: default;
    }
    .strip-badges-tip-wrap::after {
      content: attr(data-tip);
      position: absolute;
      bottom: calc(100% + 7px);
      left: 0;
      background: rgba(17,24,39,0.92);
      color: #fff;
      font-size: .68rem;
      font-weight: 600;
      font-family: inherit;
      padding: 5px 9px;
      border-radius: 7px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity .15s, transform .15s;
      z-index: 200;
    }
    .strip-badges-tip-wrap:hover::after {
      opacity: 1;
      transform: translateY(0);
    }
    /* Stripboard color legend panel */
    .sb-legend { display:flex; flex-wrap:wrap; gap:6px 14px; padding:8px 14px; background:var(--surface); border-bottom:1px solid var(--line); font-size:.72rem; }
    .sb-legend-item { display:flex; align-items:center; gap:5px; color:var(--muted); font-weight:600; }
    .sb-legend-dot  { width:9px; height:9px; border-radius:50%; border:1px solid rgba(0,0,0,.14); flex-shrink:0; }

    /* Scene status on strips */
    .strip-status {
      display:inline-flex; align-items:center; gap:4px;
      font-size:.62rem; font-weight:900; padding:2px 7px;
      border-radius:999px; margin-top:6px; text-transform:uppercase; letter-spacing:.04em;
    }
    .status-none    { background:#f3f4f6; color:#6b7280; }
    .status-locked  { background:#dcfce7; color:#15803d; }
    .status-progress{ background:#fef3c7; color:#b45309; }
    .status-omit    { background:#fee2e2; color:#b91c1c; text-decoration:line-through; opacity:.7; }

    /* Strip color by INT/EXT + DAY/NIGHT — follows the industry stripboard
       convention (taught in CorkBoard University (CBU) / companion book Ch. 9):
       white = INT day · yellow = EXT day · blue = INT night · green = EXT night */
    .strip-int-day  { background:#ffffff; border-left-color:#94a3b8; }
    .strip-int-night{ background:#eef4fb; border-left-color:#2563eb; }
    .strip-ext-day  { background:#fefce8; border-left-color:#ca8a04; }
    .strip-ext-night{ background:#e9f7ee; border-left-color:#15803d; }
    /* I/E (Interior/Exterior) split scenes — outside the classic four, so they
       get distinct non-conventional hues (orange day / pink night) */
    .strip-ie-day   { background:#fff7ed; border-left-color:#ea580c; }
    .strip-ie-night { background:#fdf2f8; border-left-color:#be185d; }
    .strip-omit     { opacity:.45; filter:grayscale(.6); }

    /* Page-count badge on strip */
    .strip-pages {
      font-size:.62rem; font-weight:900; color:#6b7280;
      margin-left:auto; background:#f3f4f6; border-radius:4px; padding:1px 5px;
      white-space:nowrap;
    }

    /* Revision color pill in header */
    /* Project color dots on hub folders */
    .folder-color-dot {
      position:absolute; top:8px; left:8px;
      width:12px; height:12px; border-radius:50%;
      border:2px solid rgba(255,255,255,.7);
      box-shadow:0 1px 4px rgba(0,0,0,.2);
    }

    /* Scene notes field */
    .scene-note-field {
      width:100%; padding:4px 8px;
      font-size: 16px; /* FIX: was .72rem which triggered iOS keyboard zoom */
      border:1px solid #e5e7eb; border-radius:6px;
      background:#f9fafb; margin-top:6px; resize:none;
      font-family:inherit; min-height:0; height:28px;
      overflow:hidden;
    }
    .scene-note-field:focus { border-color:var(--brand); background:#fff; outline:none; }

    /* Day total bar on stripboard */
    .day-total-bar {
      font-size:.68rem; font-weight:900; color:#6b7280;
      display:flex; justify-content:space-between; gap:8px;
      padding:4px 2px 8px; border-bottom:1px solid rgba(255,255,255,.5);
      margin-bottom:8px;
    }
    .day-total-est { color:#374151; font-weight:900; }

    /* One-liner display under scene heading in script */
    .scene-oneliner {
      font-size:.72rem; color:#6b7280; font-style:italic;
      margin-top:2px; display:block; user-select:none;
      -webkit-user-select:none; pointer-events:none;
    }

    /* ── MODAL ───────────────────────────────────────────────── */
    #modal-root{ position:fixed; inset:0; z-index:2000; }
    .modal-backdrop{
      position:absolute; inset:0;
      background:rgba(17,24,39,.45);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:20px;
      animation: _cs_backdropIn .18s ease;
    }
    @keyframes _cs_backdropIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .modal{
      width:min(640px, 100%);
      background:#fff;
      border-radius:16px;
      box-shadow:0 20px 60px rgba(0,0,0,.35);
      overflow:hidden;
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      animation: _cs_modalIn .22s cubic-bezier(.34,1.2,.64,1);
    }
    @keyframes _cs_modalIn {
      from { opacity: 0; transform: scale(.96) translateY(8px); }
      to   { opacity: 1; transform: scale(1)  translateY(0); }
    }
    @keyframes _cs_modalSlideUp {
      from { transform: translateY(100%); }
      to   { transform: translateY(0); }
    }
    .modal-handle {
      display: none; /* only shown on mobile bottom-sheet */
      width: 36px; height: 4px;
      background: #e5e7eb;
      border-radius: 999px;
      margin: 10px auto 0;
      flex-shrink: 0;
    }
    .modal-header{
      padding:12px 18px;
      background:linear-gradient(135deg, rgba(37,99,235,.10), rgba(255,255,255,1));
      border-bottom:1px solid #e5e7eb;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-shrink: 0;
    }
    .modal-header h3{ margin:0; font-size:1rem; }
    .modal-body{ padding:16px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; }
    .modal-footer{
      padding:14px 18px;
      padding-bottom: calc(14px + var(--sab));
      background:#f9fafb;
      border-top:1px solid #e5e7eb;
      display:flex;
      justify-content:flex-end;
      gap:10px;
      flex-wrap:wrap;
      flex-shrink: 0;
    }
    body.dark .modal-footer { background: #181e2d; border-top-color: #2d3447; }
    @media (max-width: 480px) {
      .modal-footer { justify-content: stretch; }
      .modal-footer .btn { flex: 1; justify-content: center; }
    }
    .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
    .field label{ display:block; font-size:.78rem; font-weight:900; color:#374151; margin-bottom:6px; }

    @keyframes spin{ to{ transform:rotate(360deg); } }

    /* ── SWIPE GESTURE ───────────────────────────────────────── */
    .swipeable { touch-action: pan-y; }

    /* ═══════════════════════════════════════════════════════════
       RESPONSIVE BREAKPOINTS
       Strategy:
         > 1080px  Full tabs: icon + label
         900–1080  Medium: icon + label (tabs scroll if needed)
         760–899   Compact: icon-only tabs, Tools label hidden
         < 760px   Mobile: bottom nav, header tabs hidden
    ═══════════════════════════════════════════════════════════ */

    /* ── 1080px: sidebar gets a bit narrower ─────────────────── */
    @media (max-width: 1080px){
      .sidebar { width: 270px; }
      .script-page-sheet { padding: 56px 60px 80px; font-size: 11pt; }
    }

    /* ── 900px: icon-only tabs; Tools label hidden; ⋯ btn shown ─
       Tabs shrink to just their emoji so all 6 fit comfortably.
       Tools dropdown still fully works — just shows 🛠️ ▾         */
    @media (max-width: 900px){
      .tab-label { display: none; }
      .tab { padding: 8px 12px; gap: 0; min-width: 40px; justify-content: center; }
      .tab-icon { font-size: 1rem; }
      .tools-btn-label { display: none; }
      #mobile-menu-btn { display: inline-flex !important; }
    }

    /* ── 760px: mobile layout ────────────────────────────────── */
    @media (max-width: 760px){
      header {
        /* Keep full tab-bar height — tabs are always visible and scrollable */
        height: calc(68px + var(--sat));
        padding: 0 6px;
        padding-top: var(--sat);
      }
      /* Tighten brand on mobile */
      .app-brand .brand-sub  { display: none; }
      .app-brand .brand-emoji{ font-size: 1.2rem; }
      .app-brand .brand-name { font-size: .68rem; }
      .app-brand { gap: 5px; }

      /* Tighten actions on mobile */
      .header-actions { gap: 4px; margin-left: 2px; }
      .header-actions .btn { padding: 5px 8px; font-size: .74rem; min-height: 30px; }

      /* Tabs: always visible, icon-only, horizontally scrollable */
      .nav-tabs { display: flex !important; }
      #project-nav { display: flex !important; }
      /* Bottom nav is retired — tabs replace it at all sizes */
      #bottom-nav { display: none !important; }
      #mobile-menu-btn { display: none !important; }

      /* Tab group labels: hide to save vertical space on mobile */
      .tab-group::before, .tab-group::after { display: none !important; }
      .tab-group-label { display: none !important; }
      .tab-group { margin-right: 2px !important; }
      .tab-group-tabs { gap: 1px !important; }

      /* Tabs: smaller touch-friendly icons */
      .tab-label { display: none !important; }
      .tab { padding: 6px 10px !important; gap: 0 !important; min-width: 36px !important;
             justify-content: center !important; height: 30px !important; }
      .tab-icon { font-size: .95rem !important; }

      /* Scroll arrows: always show when tab bar overflows */
      .tab-scroll-btn { display: inline-flex !important; width: 18px !important;
                        height: 30px !important; font-size: .9rem !important; }

      /* Tools btn icon-only */
      .tools-btn-label { display: none; }
      #tools-dropdown {
        right: 0;
        min-width: 200px;
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
      }

      /* No bottom-nav clearance needed — tabs are in the header */
      .view-container { padding-bottom: calc(8px + var(--sab)); }
      #local-banner.show ~ * .view-container,
      body:has(#local-banner.show) .view-container { padding-bottom: calc(38px + var(--sab)); }

      /* Goal bar and toast: return to their natural bottom positions */
      #goal-bar { bottom: calc(8px + var(--sab)); }
      .snapshot-toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

      /* FIX: dark-toggle and focus-btn hidden on mobile — accessible via overflow menu */
      #dark-toggle { display: none !important; }
      #focus-btn   { display: none !important; }

      /* Project hub */
      #project-hub {
        padding: 16px 16px;
        gap: 0;
      }
      #hub-folder-grid {
        grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
        grid-auto-rows: auto;
        gap: 18px;
      }
      .folder { min-height: 160px; }
      .folder-label { max-height: none; }

      /* Writer */
      #writer-app { flex-direction: row; }
      .sidebar { display: none; }
      /* #mobile-format-bar display is controlled by JS (_showFmtBar/_hideFmtBar) */
      .editor-frame { padding: 12px 8px 20px; gap: 12px; /* reduced bottom padding since bar is floating */
                      scroll-padding-bottom: 140px; /* mobile statusbar sits above 66px bottom-nav */ }
      .script-page-sheet { padding: 20px 16px 24px; border-radius: 4px; font-size: 11px; min-height: unset; }
      .page-num-badge { bottom: 6px; right: 16px; font-size: 9pt; }
      .page-more-hint { bottom: 6px; left: 16px; font-size: 9pt; }
      .page-content { height: 800px; overflow: hidden; overflow-y: clip; }

      /* Screenplay margins */
      .line.character    { margin-left: 30%; margin-right: 4%; }
      .line.dialogue     { margin-left: 14%; margin-right: 10%; }
      .line.parenthetical{ margin-left: 20%; margin-right: 14%; }
      .line.transition   { margin-left: 40%; }
      /* Fixed-height pages: overflow:hidden clips at page boundary (matches desktop) */
      .script-page-sheet { overflow: hidden; }

      /* ── Mobile page-break dividers ─────────────────────────── */
      /* Match the desktop style: solid grey bar with centred label */
      .page-marker {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 28px -20px;
        padding: 10px 0;
        background: #e5e7eb;
        box-shadow: inset 0 3px 5px -3px rgba(0,0,0,0.10),
                    inset 0 -3px 5px -3px rgba(0,0,0,0.10);
        border-top: 1px solid #d1d5db;
        border-bottom: 1px solid #d1d5db;
        height: auto;
        overflow: visible;
        position: relative;
      }
      .page-marker .pm-label {
        background: #fff;
        color: #9ca3af;
        font-family: 'Inter', sans-serif;
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        padding: 3px 10px;
        border-radius: 999px;
        border: 1px solid #d1d5db;
        pointer-events: none;
        user-select: none;
        -webkit-user-select: none;
        white-space: nowrap;
      }
      body.dark .page-marker {
        background: #252d42;
        border-top-color: #2d3447;
        border-bottom-color: #2d3447;
        box-shadow: none;
      }
      body.dark .page-marker .pm-label {
        background: #1e2433;
        border-color: #2d3447;
        color: #4d5a70;
      }

      /* Overlays — compact on mobile, no bulky padding */
      #mode-indicator { bottom: calc(var(--sab) + 70px); right: 10px; font-size:.72rem; padding: 5px 8px; background: rgba(17,24,39,.55); box-shadow: none; }
      #mode-indicator select { font-size: .72rem; padding: 2px 4px; }
      .editor-statusbar { bottom: calc(var(--sab) + 66px); font-size:.65rem; padding: 4px 10px; gap: 6px; background: rgba(17,24,39,.55); box-shadow: none; }

      /* App pad */
      .app-pad { padding: 12px; padding-bottom: calc(12px + var(--sab) + 60px); }
      .card { padding: 16px; }

      /* Grids */
      .grid-2, .grid-3 { grid-template-columns: 1fr; }

      /* Stripboard — vertical stack on mobile */
      #stripboard-app { flex-direction: column; }
      .stripboard-toolbar {
        padding: 10px 12px;
        gap: 8px;
        flex-wrap: nowrap; /* single row on mobile */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .stripboard-toolbar::-webkit-scrollbar { display: none; }
      .stripboard-toolbar .pill { display: none; } /* hide hint text — no room */
      /* Stack columns vertically, full-width */
      .stripboard-scroll {
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 16px 12px 100px;
        gap: 28px;
        align-items: stretch;
      }
      .strip-column {
        min-width: 0;
        width: 100%;
        padding: 48px 12px 14px;
        border-radius: 14px;
      }
      /* Re-center the post-it header for full-width columns */
      .strip-header {
        top: -14px;
        width: 72%;
        font-size: 1.1rem;
        padding: 5px 12px;
      }
      /* Strips fill full column width */
      .strip {
        margin-bottom: 8px;
        padding: 10px 12px;
        border-radius: 10px;
      }
      .strip-slug { font-size: .72rem; }
      .strip-sub  { font-size: .68rem; }
      .day-total-bar { font-size: .65rem; padding: 4px 0 8px; }

      /* ── Compact strip cards on mobile ─────────────────────── */
      /* Slug: single line, truncate with ellipsis */
      .strip-slug {
        white-space: nowrap;
        overflow: hidden;
      }
      .strip-slug > span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        flex: 1 1 0;
      }
      /* Summary: max 1 line, tight truncation */
      .strip .strip-sub {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        font-size: .65rem;
        margin-top: 2px;
      }
      /* Hide note preview on mobile — too verbose */
      .strip .strip-note-preview { display: none; }
      /* Status badge: icon-only, no text */
      .strip .strip-status { font-size: 0; padding: 2px 4px; }
      .strip .status-locked::before   { content: '🔒'; font-size: .65rem; }
      .strip .status-progress::before { content: '⏳'; font-size: .65rem; }
      .strip .status-omit::before     { content: '✕';  font-size: .65rem; color: #b91c1c; }
      /* Badges row: tighter dots */
      .strip-badges { gap: 4px; margin-top: 4px; }
      .strip-badge  { width: 8px; height: 8px; }

      /* ── Mobile stripboard toolbar buttons ── */
      .sb-toolbar-btn {
        min-height: 40px !important;
        min-width: 40px !important;
        padding: 8px 14px !important;
        font-size: .82rem !important;
        flex-shrink: 0;
      }
      #sb-day-counter {
        font-size: .78rem;
        font-weight: 900;
        color: var(--ink);
        white-space: nowrap;
        flex-shrink: 0;
      }
      /* "Add day" card at bottom of column list */
      .strip-add-day-card {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 64px;
        border: 2px dashed rgba(37,99,235,0.35);
        border-radius: 14px;
        background: rgba(37,99,235,0.04);
        color: var(--brand);
        font-weight: 900;
        font-size: 1rem;
        cursor: pointer;
        touch-action: manipulation;
        transition: background .15s, border-color .15s;
        user-select: none;
        -webkit-user-select: none;
      }
      .strip-add-day-card:active {
        background: rgba(37,99,235,0.12);
        border-color: var(--brand);
      }
      body.dark .strip-add-day-card {
        border-color: rgba(77,142,248,0.35);
        background: rgba(77,142,248,0.06);
        color: var(--brand);
      }
      /* Day delete button (mobile: tap to remove empty day) */
      .strip-delete-day-btn {
        position: absolute;
        top: -10px;
        right: 8px;
        width: 26px; height: 26px;
        border-radius: 50%;
        border: none;
        background: #fee2e2;
        color: #b91c1c;
        font-size: .8rem;
        font-weight: 900;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        touch-action: manipulation;
        box-shadow: 0 1px 4px rgba(0,0,0,.15);
        z-index: 20;
        transition: background .15s;
      }
      .strip-delete-day-btn:active { background: #fca5a5; }

      /* Modals become bottom sheets */
      .modal-backdrop { align-items: flex-end; padding: 0; }
      .modal { border-radius: 20px 20px 0 0; max-height: 85vh; width: 100%;
               animation: _cs_modalSlideUp .25s cubic-bezier(.32,.72,.4,1); }
      .modal-handle { display: block; }

      /* Tables */
      th, td { padding: 8px 6px; font-size: .8rem; }

      /* Breakdown report — mobile */
      #report-body .report-item-row {
        grid-template-columns: 14px 1fr 30px;
        padding: 10px 10px 10px 12px;
        gap: 0 8px;
      }
      #report-body .ri-scene-col {
        grid-column: 2;
        grid-row: 2;
        margin-top: 3px;
      }
      #report-body .ri-notes-col {
        grid-column: 3;
        grid-row: 1 / 3;
        justify-content: center;
      }

      .shot-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    }

    /* ── 420px: very small phones ───────────────────────────── */
    @media (max-width: 420px){
      .tag-grid { grid-template-columns: 1fr 1fr; }
      #hub-folder-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
      .folder-body { min-height: unset; max-height: unset; }
      .btn { padding: 8px 10px; font-size: .8rem; }
    }

    /* ── iOS keyboard zoom prevention ──────────────────────────
       iOS Safari zooms the viewport when an input/select is
       focused with a computed font-size < 16px. The global rule
       sets 16px but class-level rules on these specific elements
       override it with smaller sizes. Force them back to 16px on
       mobile so users never see the unwanted zoom.
    ─────────────────────────────────────────────────────────── */
    @media (max-width: 760px) {
      .cork-search,
      .cork-select,
      #tts-rate,
      #tts-scene-select,
      .sched-field-input,
      .sched-notes-input,
      .sched-config-field input,
      .sched-config-field select,
      .contact-modal-input,
      .sb-field-input,
      .sb-field-select,
      #mode-indicator select,
      .loc-card input,
      .loc-card input[type="text"],
      .loc-card input[type="url"],
      .loc-card input[type="email"],
      .loc-card input[type="date"],
      .loc-card input[type="number"],
      .loc-card input:not([type]),
      .loc-card textarea,
      .loc-cnote,
      .loc-photo-cap,
      .folder-rename-input,
      .settings-select {
        font-size: 16px !important;
      }
    }

    /* ── Landscape mobile ───────────────────────────────────── */
    @media (max-width: 760px) and (orientation: landscape) {
      header {
        height: calc(44px + var(--sat));
        /* FIX v5.15: In landscape on notched iPhones (Dynamic Island / Face ID notch),
           the side safe-area insets (--sal, --sar) can be 44-59px. Without these,
           the Tools button and project name can be obscured by the device cutout. */
        padding-left:  max(10px, var(--sal));
        padding-right: max(10px, var(--sar));
      }
      .view-container { padding-bottom: calc(50px + var(--sab)); }
      #bottom-nav { padding: 3px 2px; }
      .bottom-tab { min-height: 34px; gap: 1px; padding: 3px 2px; }
      .btab-icon { height: 22px; width: 28px; font-size: 1rem; }
      .btab-label { display: none; }
      /* FIX v5.15: clamp dropdown height to viewport in landscape (short screen).
         Uses #tools-dropdown (ID specificity) to override the portrait-mobile
         `#tools-dropdown { right:0 }` rule and keep the dropdown clear of the
         right-side notch / home-indicator safe area. */
      #tools-dropdown {
        max-height: calc(100dvh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        right: max(0px, var(--sar));
      }
    }

    /* ── PWA standalone ─────────────────────────────────────── */
    @media (display-mode: standalone) {
      header { padding-top: max(var(--sat), 10px); height: calc(54px + max(var(--sat), 10px)); }
    }

    /* ── Large touch screens ────────────────────────────────── */
    @media (pointer: coarse) {
      .btn { min-height: var(--touch-target); }
      .tab { min-height: var(--touch-target); }
      .tag-btn { min-height: var(--touch-target); }
    }


    /* ═══════════════════════════════════════════════════════
       v11 NEW FEATURE STYLES
    ═══════════════════════════════════════════════════════ */

    /* Find & Replace overlay */
    #find-replace-bar {
      display: none;
      position: fixed;
      will-change: transform, opacity;
      top: calc(56px + var(--sat) + 8px);
      right: 18px;
      background: white;
      border-radius: 14px;
      padding: 14px 16px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.22);
      z-index: 1500;
      border: 1px solid #e5e7eb;
      min-width: 340px;
      max-width: 92vw;
    }
    #find-replace-bar.open { display: block; }
    #find-replace-bar h4 {
      margin: 0 0 10px;
      font-size: .82rem;
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    #find-replace-bar input { width: 100%; margin-bottom: 8px; padding: 8px 12px; font-size: 16px; }
    #find-replace-bar .fr-row { display: flex; gap: 6px; flex-wrap: wrap; }
    #find-replace-bar .fr-info { font-size: .72rem; color: var(--muted); margin-top: 6px; min-height: 1em; }
    .fr-highlight { background: #fde68a !important; outline: 2px solid #f59e0b; border-radius: 2px; }
    .fr-current   { background: #bbf7d0 !important; outline: 2px solid #16a34a; border-radius: 2px; }

    /* Scene Jump bar */
    #scene-jump-bar {
      display: none;
      position: fixed;
      will-change: transform, opacity;
      top: calc(56px + var(--sat) + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: white;
      border-radius: 14px;
      padding: 12px 16px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.22);
      z-index: 1500;
      border: 1px solid #e5e7eb;
      width: min(480px, 92vw);
    }
    #scene-jump-bar.open { display: block; }
    #scene-jump-bar input { width: 100%; font-size: 16px; margin-bottom: 6px; }
    #scene-jump-results { max-height: 260px; overflow-y: auto; }
    .sj-item {
      padding: 8px 10px;
      border-radius: 8px;
      cursor: pointer;
      font-size: .82rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 8px;
      user-select: none;
    }
    .sj-item:hover, .sj-item.sj-active { background: #f0f9ff; }
    .sj-num { font-size: .7rem; color: var(--muted); min-width: 24px; font-weight: 600; }

    /* Strip reorder drop indicator */
    .strip.strip-drop-before::before {
      content: '';
      display: block;
      height: 3px;
      background: var(--brand);
      border-radius: 2px;
      margin-bottom: 6px;
    }
    .strip-column.drag-active {
      background: rgba(37,99,235,.08);
      border-color: rgba(37,99,235,.5);
    }

    /* Shot list drag */
    .shot-drag-col {
      width: 28px;
      cursor: grab;
      color: #9ca3af;
      text-align: center;
      font-size: 1rem;
      user-select: none;
    }
    .shot-drag-col:active { cursor: grabbing; }
    tr.shot-dragging { opacity: 0.45; }
    tr.shot-drag-over > td:first-child { border-top: 3px solid var(--brand); }

    /* Shot status badge */
    .shot-status-pill { display:inline-flex;align-items:center;gap:3px;font-size:.6rem;font-weight:800;padding:2px 7px;border-radius:999px;white-space:nowrap;cursor:pointer;border:1.5px solid transparent;transition:opacity .12s;user-select:none; }
    .shot-status-pill:hover { opacity:.75; }
    .sstat-pending { background:#f3f4f6;color:#374151;border-color:#e5e7eb; }
    .sstat-printed { background:#d1fae5;color:#065f46;border-color:#6ee7b7; }
    .sstat-hold    { background:#fef3c7;color:#92400e;border-color:#fcd34d; }
    .sstat-cut     { background:#fee2e2;color:#991b1b;border-color:#fca5a5;text-decoration:line-through;opacity:.7; }
    .sstat-vfx     { background:#ede9fe;color:#5b21b6;border-color:#c4b5fd; }

    /* Shot sketch thumbnail column */
    .shot-sketch-thumb { width:52px;height:30px;border-radius:5px;border:1.5px solid #e5e7eb;display:block;background:#f9fafb;cursor:pointer;object-fit:cover;transition:border-color .12s; }
    .shot-sketch-thumb:hover { border-color:var(--brand); }
    .shot-sketch-empty { width:52px;height:30px;border-radius:5px;border:1.5px dashed #d1d5db;display:flex;align-items:center;justify-content:center;font-size:.55rem;color:#9ca3af;cursor:pointer;background:#fafafa;transition:border-color .12s,background .12s; }
    .shot-sketch-empty:hover { border-color:var(--brand);background:#f0f4ff;color:var(--brand); }
    #shot-sketch-modal { position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:9100;display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px; }
    #shot-sketch-modal.open { display:flex; }
    #shot-sketch-canvas { background:#1a1a2e;border-radius:10px;touch-action:none;cursor:crosshair;max-width:100%; }
    .shot-sketch-toolbar { display:flex;align-items:center;gap:8px;padding:10px 0 0;flex-wrap:wrap;justify-content:center; }
    .shot-sketch-color { width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(255,255,255,.3);cursor:pointer;transition:transform .1s; }
    .shot-sketch-color.active,.shot-sketch-color:hover { transform:scale(1.28);border-color:#fff; }

    /* Beat template picker */
    .beat-template-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px; }
    .beat-template-card { border:1.5px solid var(--line);border-radius:10px;padding:12px;cursor:pointer;transition:border-color .12s,background .12s; }
    .beat-template-card:hover { border-color:var(--brand);background:rgba(37,99,235,.05); }
    .beat-template-card h4 { margin:0 0 4px;font-size:.85rem; }
    .beat-template-card p { margin:0;font-size:.72rem;color:var(--muted); }
    @media(max-width:500px){.beat-template-grid{grid-template-columns:1fr;}}

    /* Company move distance matrix */
    .move-matrix-table { width:100%;border-collapse:collapse;font-size:.75rem;margin-top:12px; }
    .move-matrix-table th { background:var(--paper2,#f9fafb);padding:6px 10px;text-align:left;font-size:.68rem;font-weight:700;color:var(--muted);border-bottom:2px solid var(--line);white-space:nowrap; }
    .move-matrix-table td { padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:middle; }
    .move-dist-badge { display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:.7rem;font-weight:700; }
    .move-dist-near { background:#d1fae5;color:#065f46; }
    .move-dist-mid  { background:#fef3c7;color:#92400e; }
    .move-dist-far  { background:#fee2e2;color:#991b1b; }

    /* Contacts department groups */
    .contacts-dept-group-header { font-size:.68rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:16px 4px 6px;border-bottom:2px solid var(--line);margin-bottom:8px;display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none; }
    .contacts-dept-group-header:first-child { padding-top:4px; }
    .contacts-dept-group-header .cdg-toggle { font-size:.75rem;transition:transform .15s; }
    .contacts-dept-group-header.collapsed .cdg-toggle { transform:rotate(-90deg); }
    .contacts-dept-group { margin-bottom:4px; }

    /* Budget actuals */
    .bci-actual-input { width:80px;border:none;background:transparent;font-size:.78rem;font-weight:700;color:var(--ink);text-align:right;padding:2px 4px;border-radius:4px;border-bottom:1.5px solid #e5e7eb; }
    .bci-actual-input:focus { outline:none;border-bottom-color:var(--brand); }
    .bci-over-budget { color:#dc2626;font-weight:900; }
    .bci-under-budget { color:#16a34a; }
    .bci-variance-bar { height:4px;border-radius:2px;margin-top:2px; }

    /* Collapsible report sections */
    .report-scene-header {
      background: #f9fafb;
      padding: 8px 12px;
      font-weight: 900;
      font-size: .8rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border-radius: 8px;
      user-select: none;
      transition: background .12s;
    }
    .report-scene-header:hover { background: #f3f4f6; }
    .rsh-arrow { transition: transform .15s; display: inline-block; }
    .report-scene-header.collapsed .rsh-arrow { transform: rotate(-90deg); }

    /* ── Breakdown report — category-grouped layout ─────────────────────── */
    .rpt-cat-section {
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--line);
      width: 100%;
    }
    .report-scene-header {
      background: #f8fafc;
      padding: 11px 16px;
      font-weight: 800;
      font-size: .83rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      user-select: none;
      transition: background .12s;
    }
    .report-scene-header:hover { background: #f1f5f9; }
    .rsh-arrow { transition: transform .15s; display: inline-block; font-size: .65rem; color: var(--muted); }
    .report-scene-header.collapsed .rsh-arrow { transform: rotate(-90deg); }
    .report-items-block { padding: 0; width: 100%; }

    /* Grid: [dot 14px] [element name flexible] [scene flexible] [notes btn 36px] */
    .report-item-row {
      display: grid;
      grid-template-columns: 14px 1fr 1fr 36px;
      align-items: center;
      padding: 11px 16px;
      border-top: 1px solid var(--line);
      gap: 0 12px;
      width: 100%;
      box-sizing: border-box;
      transition: background .1s;
    }
    .report-item-row:hover { background: #f8faff; }

    .ri-dot {
      width: 9px; height: 9px; border-radius: 50%;
      flex-shrink: 0; display: block; margin: 0 auto;
    }
    .ri-element {
      font-weight: 700;
      font-size: .88rem;
      display: flex;
      align-items: center;
      gap: 6px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .ri-cast-num {
      font-size: .62rem; font-weight: 900;
      color: #64748b; background: #f1f5f9;
      padding: 1px 5px; border-radius: 4px;
      flex-shrink: 0;
    }
    .ri-scene-col {
      font-size: .78rem;
      color: var(--muted);
      overflow: hidden;
    }
    .ri-scene-chip {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ri-notes-col {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ri-expand-btn {
      background: none;
      border: 1.5px solid #e2e8f0;
      border-radius: 7px;
      width: 28px; height: 28px;
      font-size: .72rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      touch-action: manipulation;
      flex-shrink: 0;
      transition: all .12s;
      padding: 0;
    }
    .ri-expand-btn.has-notes { border-color: var(--brand); color: var(--brand); }
    .ri-expand-btn.has-notes:hover { background: var(--brand); color: white; }
    .ri-notes-full {
      grid-column: 2 / -1;
      font-size: .8rem; color: #475569;
      white-space: pre-wrap;
      background: #f8fafc;
      border-radius: 8px;
      padding: 8px 12px;
      margin: 2px 0 6px;
      display: none;
      line-height: 1.5;
      border: 1px solid #e2e8f0;
    }
    .ri-notes-full.open { display: block; }

    /* suppress old layout remnants */
    .ri-scene-mob, .ri-note-preview-mob, .ri-meta, .ri-cat-pill, .ri-sep { display: none !important; }

    body.dark .report-scene-header { background: #1e293b; color: var(--ink); }
    body.dark .report-scene-header:hover { background: #253047; }
    body.dark .rpt-cat-section { border-color: #2d3a50; }
    body.dark .report-item-row { border-top-color: #2d3a50; }
    body.dark .report-item-row:hover { background: rgba(255,255,255,.03); }
    body.dark .ri-notes-full { background: #1a2535; border-color: #2d3a50; color: #94a3b8; }
    body.dark .ri-expand-btn { border-color: #2d3a50; }
    body.dark .ri-expand-btn.has-notes { border-color: var(--brand); }
    body.dark .ri-cast-num { background: #1e293b; color: #94a3b8; }

    /* Enhanced call sheet */
    .callsheet-production-header {
      background: linear-gradient(135deg, #1e293b, #334155);
      color: white;
      border-radius: 12px 12px 0 0;
      padding: 16px 20px;
      margin: -1px -1px 0;
    }
    .callsheet-production-header h2 { margin: 0 0 4px; font-size: 1.1rem; color: white; }
    .cs-meta { font-size: .72rem; color: rgba(255,255,255,.65); display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
    .emergency-contact-row { background: #fef2f2; }

    /* Project rename inline */
    .folder-rename-input {
      font-family: 'Courier Prime', monospace;
      font-weight: 900;
      font-size: .85rem;
      border: 2px solid var(--brand);
      border-radius: 8px;
      padding: 4px 8px;
      width: 100%;
      background: white;
      outline: none;
      min-height: 32px;
    }

    /* ══════════════════════════════════════════════════════════
       STORY BEATS / CORKBOARD VIEW
    ══════════════════════════════════════════════════════════ */
    #corkboard-app {
      width: 100%;
      display: flex;
      flex-direction: column;
      background: #c8a96e;
      background-image:
        radial-gradient(#9c6f44 15%, transparent 16%),
        radial-gradient(#9c6f44 15%, transparent 16%),
        radial-gradient(rgba(255,255,255,.04) 16%, transparent 17%);
      background-size: 4px 4px, 4px 4px, 18px 18px;
      background-position: 0 0, 2px 2px, 9px 9px;
    }
    body.dark #corkboard-app {
      background: #2a1f0e;
      background-image:
        radial-gradient(rgba(0,0,0,.3) 15%, transparent 16%),
        radial-gradient(rgba(0,0,0,.3) 15%, transparent 16%);
      background-size: 4px 4px, 4px 4px;
      background-position: 0 0, 2px 2px;
    }
    /* ── Wardrobe Studio — High-Polish Rebuild ───────────────────── */
    .ward-char-item {
      display:flex; align-items:center; gap:8px; padding:10px 12px;
      cursor:pointer; border-bottom:1px solid #f0f0f0;
      font-size:.85rem; color:var(--ink); transition:background .15s;
      user-select:none;
    }
    .ward-char-item:hover { background:#f0f4ff; }
    .ward-char-item.active { background:#e8eeff; font-weight:600; border-left:3px solid #3b82f6; }
    .ward-char-avatar {
      width:32px; height:32px; border-radius:50%; background:#dbeafe;
      display:flex; align-items:center; justify-content:center;
      font-size:.75rem; font-weight:700; color:#1d4ed8; flex-shrink:0;
    }
    /* Paper Doll Container */
    .ward-paper-doll-wrap {
      position:relative; width:160px; flex-shrink:0;
      display:flex; flex-direction:column; align-items:center; gap:8px;
    }
    .ward-paper-doll {
      position:relative; width:140px; height:220px;
      border-radius:16px; overflow:visible;
    }
    .ward-doll-layer {
      position:absolute; inset:0; width:100%; height:100%;
      object-fit:contain; pointer-events:none;
      transition:opacity .35s cubic-bezier(0.34,1.56,0.64,1), transform .35s cubic-bezier(0.34,1.56,0.64,1);
    }
    .ward-doll-layer.layer-swap {
      animation:layerPop .4s cubic-bezier(0.34,1.56,0.64,1) forwards;
    }
    @keyframes layerPop {
      0%   { transform:scale(1); }
      40%  { transform:scale(1.06); }
      100% { transform:scale(1); }
    }
    /* Glow effect — PDF spec: rgba(255,255,255,0.35) */
    .glow {
      box-shadow: 0 0 40px rgba(255,255,255,0.35);
      transition: box-shadow 400ms ease;
    }
    .ward-doll-glow {
      position:absolute; inset:-8px; border-radius:20px; opacity:0; pointer-events:none;
      box-shadow: 0 0 40px rgba(255,255,255,0.35);
      transition: box-shadow 400ms ease, opacity .5s ease;
    }
    .ward-doll-glow.active { opacity:1; animation:glowPulse 1.2s ease forwards; }
    @keyframes glowPulse {
      0%   { opacity:0; }
      30%  { opacity:1; }
      100% { opacity:0; }
    }
    /* Glint sweep */
    .ward-doll-glint {
      position:absolute; inset:0; pointer-events:none; border-radius:16px; overflow:hidden;
    }
    .ward-doll-glint::after {
      content:''; position:absolute; top:-50%; left:-120%; width:60%; height:200%;
      background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%);
      opacity:0; transition:none;
    }
    .ward-doll-glint.sweep::after {
      animation:glintSweep .6s ease forwards;
    }
    @keyframes glintSweep {
      0%   { left:-120%; opacity:1; }
      100% { left:160%; opacity:1; }
    }
    /* Wardrobe item palette */
    .ward-doll-palette {
      flex:1; display:flex; flex-direction:column; gap:14px; overflow-y:auto; padding:4px 0;
    }
    .ward-doll-category {
      background:rgba(255,255,255,.65); backdrop-filter:blur(12px) saturate(1.5);
      -webkit-backdrop-filter:blur(12px) saturate(1.5);
      border:1px solid rgba(255,255,255,.8); border-radius:14px;
      padding:10px 12px; box-shadow:0 2px 12px rgba(0,0,0,.06);
    }
    .ward-doll-cat-title {
      font-size:.65rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
      color:#6366f1; margin-bottom:8px; display:flex; align-items:center; gap:5px;
    }
    .ward-doll-items {
      display:flex; flex-wrap:wrap; gap:6px;
    }
    .ward-doll-item {
      width:52px; height:52px; border-radius:10px; cursor:pointer;
      border:2px solid transparent; overflow:hidden; position:relative;
      transition:transform .25s cubic-bezier(0.34,1.56,0.64,1), border-color .15s, box-shadow .15s;
      background:#f3f4f6; display:flex; align-items:center; justify-content:center;
      font-size:1.4rem;
    }
    .ward-doll-item img { width:100%; height:100%; object-fit:cover; }
    .ward-doll-item:hover { transform:scale(1.12); box-shadow:0 4px 14px rgba(99,102,241,.35); }
    .ward-doll-item.equipped {
      border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.25);
      transform:scale(1.07);
    }
    .ward-doll-item.equipped::after {
      content:'✓'; position:absolute; bottom:2px; right:3px;
      font-size:.5rem; font-weight:900; color:#6366f1; line-height:1;
    }
    /* Status badge */
    .ward-sb-status {
      display:inline-flex; align-items:center; gap:4px;
      font-size:.65rem; font-weight:700; padding:2px 8px; border-radius:999px;
      letter-spacing:.04em; user-select:none;
    }
    .ward-sb-status.online  { background:#d1fae5; color:#065f46; }
    .ward-sb-status.offline { background:#fee2e2; color:#991b1b; }
    .ward-sb-status.loading { background:#fef3c7; color:#92400e; }
    .ward-sb-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
    .ward-sb-status.online  .ward-sb-dot { background:#10b981; }
    .ward-sb-status.offline .ward-sb-dot { background:#ef4444; }
    .ward-sb-status.loading .ward-sb-dot { background:#f59e0b; animation:blink .8s ease infinite; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
    /* Outfit grid & cards */
    .ward-outfit-grid {
      display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px;
    }
    .ward-outfit-card {
      background:rgba(255,255,255,.7); backdrop-filter:blur(10px) saturate(1.4);
      -webkit-backdrop-filter:blur(10px) saturate(1.4);
      border:1px solid rgba(255,255,255,.85); border-radius:16px;
      overflow:hidden; transition:box-shadow .3s cubic-bezier(0.34,1.56,0.64,1), transform .3s cubic-bezier(0.34,1.56,0.64,1);
      box-shadow:0 2px 10px rgba(0,0,0,.06);
    }
    .ward-outfit-card:hover { box-shadow:0 8px 28px rgba(99,102,241,.18); transform:translateY(-3px) scale(1.01); }
    .ward-outfit-card.save-glow {
      animation:cardSaveGlow .8s cubic-bezier(0.34,1.56,0.64,1);
    }
    @keyframes cardSaveGlow {
      0%   { box-shadow:0 2px 10px rgba(0,0,0,.06); }
      40%  { box-shadow:0 0 0 4px rgba(99,102,241,.4), 0 8px 32px rgba(99,102,241,.3); transform:translateY(-4px) scale(1.02); }
      100% { box-shadow:0 2px 10px rgba(0,0,0,.06); transform:translateY(0) scale(1); }
    }
    .ward-outfit-thumb {
      height:130px; background:linear-gradient(135deg,#f0f4ff,#f3f4f6); position:relative;
      display:flex; align-items:center; justify-content:center;
      overflow:hidden; cursor:pointer;
    }
    .ward-outfit-thumb-img { width:100%; height:100%; object-fit:cover; }
    .ward-outfit-thumb-placeholder { font-size:2.5rem; opacity:.35; }
    /* Paper doll preview inside thumb */
    .ward-outfit-thumb-doll {
      position:relative; width:70px; height:110px; margin:auto;
    }
    .ward-outfit-thumb-doll img {
      position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
    }
    .ward-outfit-info { padding:10px 12px; }
    .ward-outfit-name { font-weight:700; font-size:.9rem; margin-bottom:4px; }
    .ward-outfit-meta { font-size:.75rem; color:#6b7280; }
    /* ── WARDROBE CONTINUITY GRID ──────────────────────────────────────── */
    .ward-cont-table { border-collapse: collapse; font-size: .72rem; width: 100%; min-width: 600px; }
    .ward-cont-table th, .ward-cont-table td { border: 1px solid #e5e7eb; padding: 5px 8px; }
    .ward-cont-table thead th { background: #f8fafc; font-weight: 800; font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; position: sticky; top: 0; z-index: 1; white-space: nowrap; }
    .ward-cont-table .wct-char-col { position: sticky; left: 0; background: var(--paper); z-index: 2; min-width: 110px; max-width: 160px; font-weight: 700; }
    /* FIX: dark-mode border & background overrides for continuity table */
    body.dark .ward-cont-table th,
    body.dark .ward-cont-table td { border-color: #2d3447; }
    body.dark .ward-cont-table thead th { background: #1e2433; color: #94a3b8; }
    body.dark .ward-cont-table .wct-char-col { background: #141828; }
    body.dark .ward-cont-table tr:hover td { background: rgba(255,255,255,.03); }
    /* FIX: visual divider between Clothing section and Scene Continuity section in editor */
    .wdb-section-divider {
      border: none; border-top: 1px solid #e5e7eb;
      margin: 14px 0 10px;
    }
    body.dark .wdb-section-divider { border-color: #2d3447; }
    .wdb-section-label {
      font-size: .6rem; font-weight: 900; text-transform: uppercase;
      letter-spacing: .08em; color: #6b7280; margin: 0 0 8px;
    }
    body.dark .wdb-section-label { color: #4b5563; }
    .ward-cont-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 80px; }
    .ward-cont-outfit { font-size: .65rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; max-width: 90px; text-align: center; }
    .ward-cont-cond { font-size: .58rem; padding: 1px 5px; border-radius: 9px; font-weight: 700; }
    .ward-cont-empty { color: #d1d5db; font-size: .85rem; text-align: center; padding: 4px 0; }
    .ward-cont-qc { background: #fef3c7; color: #92400e; font-size: .58rem; font-weight: 800; padding: 1px 5px; border-radius: 6px; margin-top: 1px; display: block; text-align: center; }
    .ward-outfit-actions { display:flex; gap:6px; padding:8px 12px; border-top:1px solid #f3f4f6; flex-wrap:wrap; }
    .ward-condition-badge {
      display:inline-flex; align-items:center; gap:3px;
      font-size:.7rem; font-weight:700; border-radius:999px;
      padding:2px 8px; white-space:nowrap;
    }
    .ward-cond-clean   { background:#d1fae5; color:#065f46; }
    .ward-cond-worn    { background:#fef3c7; color:#92400e; }
    .ward-cond-dirty   { background:#e5e7eb; color:#374151; }
    .ward-cond-wet     { background:#dbeafe; color:#1e40af; }
    .ward-cond-blood   { background:#fee2e2; color:#991b1b; }
    .ward-cond-torn    { background:#fce7f3; color:#9d174d; }
    .ward-cond-reset   { background:#f0fdf4; color:#14532d; }
    .ward-assign-row {
      display:flex; align-items:center; gap:8px; padding:8px 10px;
      border-bottom:1px solid #f3f4f6; font-size:.83rem;
    }
    .ward-assign-row:hover { background:#f9fafb; }
    .ward-assign-scene { flex:1; color:var(--ink); font-size:.82rem; }
    .ward-sb-strip {
      display:flex; align-items:center; gap:8px; padding:6px 10px;
      border:1px solid #e5e7eb; border-radius:8px; background:var(--paper);
      margin-bottom:6px; font-size:.8rem;
    }
    .ward-sb-thumb {
      width:36px; height:36px; border-radius:6px; background:#f3f4f6;
      object-fit:cover; flex-shrink:0; display:flex; align-items:center;
      justify-content:center; font-size:1.1rem; overflow:hidden;
    }
    .ward-risk-dot {
      width:8px; height:8px; border-radius:50%; flex-shrink:0;
    }
    .ward-risk-warn { background:#f59e0b; }
    .ward-risk-ok   { background:#10b981; }
    /* Collage builder */
    .ward-collage-board {
      position:relative; width:100%; height:420px; background:#f9f9f9;
      border:1px solid #e5e7eb; border-radius:10px; overflow:hidden;
      touch-action:none;
    }
    .ward-collage-el {
      position:absolute; cursor:move; user-select:none;
      border:2px solid transparent; border-radius:4px;
      transition:border-color .1s;
    }
    .ward-collage-el.selected { border-color:#3b82f6; }
    .ward-collage-el img { width:100%; height:100%; object-fit:cover; border-radius:3px; display:block; }
    .ward-collage-el .ward-el-emoji { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2rem; background:#e5e7eb; border-radius:3px; }
    .ward-resize-handle {
      position:absolute; right:-5px; bottom:-5px; width:12px; height:12px;
      background:#3b82f6; border-radius:2px; cursor:se-resize;
    }
    .ward-del-btn {
      position:absolute; top:-8px; right:-8px; background:#ef4444; color:#fff;
      border:none; border-radius:50%; width:18px; height:18px; font-size:10px;
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      line-height:1; padding:0;
    }
    /* ── Prop Master Studio ──────────────────────────────────────── */
    .prop-list-item {
      display:flex; align-items:center; gap:9px; padding:10px 12px;
      cursor:pointer; border-bottom:1px solid #f0f0f0;
      font-size:.84rem; color:var(--ink); transition:background .15s;
      user-select:none;
    }
    .prop-list-item:hover { background:#f0f4ff; }
    .prop-list-item.active { background:#e8eeff; font-weight:600; border-left:3px solid #f59e0b; }
    .prop-type-dot {
      width:10px; height:10px; border-radius:50%; flex-shrink:0;
    }
    .prop-hero-star { color:#f59e0b; font-size:.8rem; flex-shrink:0; }
    .prop-detail-grid {
      display:grid; grid-template-columns:1fr 1fr; gap:14px;
    }
    .prop-field-group { display:flex; flex-direction:column; gap:4px; }
    .prop-field-label { font-size:.72rem; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.04em; }
    .prop-field-value { font-size:.88rem; color:var(--ink); }
    .prop-input {
      border:1px solid #e5e7eb; border-radius:6px; padding:7px 10px;
      font-size:.85rem; background:var(--paper); color:var(--ink);
      width:100%; box-sizing:border-box; font-family:inherit;
    }
    .prop-input:focus { outline:none; border-color:#f59e0b; box-shadow:0 0 0 2px rgba(245,158,11,.15); }
    .prop-scene-row {
      display:flex; align-items:center; gap:8px; padding:8px 10px;
      border-bottom:1px solid #f3f4f6; font-size:.82rem;
    }
    .prop-scene-row:hover { background:#fffbeb; }
    .prop-state-badge {
      display:inline-flex; align-items:center; gap:3px;
      font-size:.7rem; font-weight:700; border-radius:999px;
      padding:2px 8px; white-space:nowrap;
    }
    .pstate-clean   { background:#d1fae5; color:#065f46; }
    .pstate-dirty   { background:#e5e7eb; color:#374151; }
    .pstate-damaged { background:#fee2e2; color:#991b1b; }
    .pstate-wet     { background:#dbeafe; color:#1e40af; }
    .pstate-bloody  { background:#fce7f3; color:#9d174d; }
    .pstate-reset   { background:#f0fdf4; color:#14532d; }
    .prop-continuity-grid {
      display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px;
    }
    .prop-cont-thumb {
      border:1px solid #e5e7eb; border-radius:8px; overflow:hidden;
      background:#f9fafb; cursor:pointer; transition:box-shadow .15s;
    }
    .prop-cont-thumb:hover { box-shadow:0 3px 12px rgba(0,0,0,.1); }
    /* ── PROP CHECK-IN/OUT LOG ──────────────────────────────────────────── */
    .prop-log-wrap { margin-top: 18px; }
    .prop-log-entry { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-bottom: 1px solid #f3f4f6; font-size: .78rem; }
    .prop-log-entry:last-child { border-bottom: none; }
    .prop-log-icon { font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; }
    .prop-log-body { flex: 1; min-width: 0; }
    .prop-log-who { font-weight: 700; color: var(--ink); }
    .prop-log-note { color: var(--muted); font-size: .72rem; margin-top: 1px; }
    .prop-log-when { font-size: .63rem; color: #9ca3af; }
    .prop-log-empty { color: #9ca3af; font-size: .8rem; padding: 10px 0; font-style: italic; }
    .prop-cont-thumb img { width:100%; height:90px; object-fit:cover; display:block; }
    .prop-cont-thumb-placeholder { height:90px; display:flex; align-items:center; justify-content:center; font-size:2rem; opacity:.4; }
    .prop-cont-thumb-meta { padding:5px 7px; font-size:.68rem; color:#6b7280; }
    .prop-weapon-warning {
      background:#fff7ed; border:1px solid #fed7aa; border-radius:8px;
      padding:10px 14px; margin-bottom:14px; display:flex; gap:8px; align-items:flex-start;
    }
    /* Stripboard props overlay */
    .sb-props-pill {
      display:inline-flex; align-items:center; gap:3px;
      font-size:.65rem; background:#fef3c7; color:#92400e;
      border:1px solid #fcd34d; border-radius:999px;
      padding:1px 6px; margin:1px; white-space:nowrap;
    }
    .sb-props-heavy {
      font-size:.65rem; background:#fee2e2; color:#991b1b;
      border:1px solid #fca5a5; border-radius:999px;
      padding:1px 6px; margin:1px; display:inline-flex; align-items:center; gap:2px;
    }
    body.dark .prop-list-item { border-bottom-color:#2a2a3a; }
    body.dark .prop-list-item.active { background:#1e2a45; border-left-color:#f59e0b; }
    body.dark .prop-input { background:#1a1a2e; border-color:#2a2a3a; }
    body.dark .prop-scene-row { border-bottom-color:#2a2a3a; }
    body.dark .prop-scene-row:hover { background:#1e1a10; }
    body.dark .prop-cont-thumb { background:#1a1a2e; border-color:#2a2a3a; }
    body.dark .prop-weapon-warning { background:#2a1a0e; border-color:#7c2d12; }

    /* ══════════════════════════════════════════════════════════
       PROP RACK REDESIGN  (.prk-*)
    ══════════════════════════════════════════════════════════ */
    /* Toolbar */
    #props-toolbar { background:#1a2744 !important; border-bottom:2px solid #0f1a35 !important; }
    #props-toolbar strong { color:#fff !important; }
    #props-search { background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.2) !important; color:#fff !important; }
    #props-search::placeholder { color:rgba(255,255,255,.45) !important; }
    #props-filter-type { background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.2) !important; color:#fff !important; }
    body.dark #props-toolbar { background:#0a1228 !important; }

    /* Panels */
    #props-list-panel  { background:#faf7f2 !important; border-right:1px solid #e8dfd0 !important; }
    #props-detail-panel { background:#f5f0e8 !important; padding:0 !important; }
    body.dark #props-list-panel  { background:#17150f !important; border-right-color:#2a2820 !important; }
    body.dark #props-detail-panel { background:#131210 !important; }

    /* Rack header */
    .prk-rack-hdr { display:flex; align-items:center; justify-content:space-between; padding:9px 12px 6px; border-bottom:1px solid #e8dfd0; }
    .prk-rack-lbl { font-size:.58rem; font-weight:900; text-transform:uppercase; letter-spacing:.1em; color:#9a8a72; }
    body.dark .prk-rack-hdr  { border-bottom-color:#2a2820; }
    body.dark .prk-rack-lbl  { color:#6a5f4f; }

    /* Section headers */
    .prk-shdr { padding:8px 12px 3px; font-size:.58rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; color:#a0907a; display:flex; align-items:center; gap:6px; }
    .prk-shdr::after { content:''; flex:1; height:1px; background:#e0d8cc; }
    body.dark .prk-shdr { color:#5a5045; }
    body.dark .prk-shdr::after { background:#2a2820; }

    /* Rack list item */
    .prk-item { display:flex; align-items:center; gap:9px; padding:9px 12px; cursor:pointer; border-bottom:1px solid #efe8da; transition:background .12s; user-select:none; }
    .prk-item:hover { background:#f0ebe0; }
    .prk-item.active { background:#fffbef; border-left:3px solid #f59e0b; padding-left:9px; }
    .prk-item-thumb { width:38px; height:38px; flex-shrink:0; border-radius:5px; overflow:hidden; background:#e8dfd0; border:1px solid #ddd5c5; display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
    .prk-item-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
    .prk-item-info { flex:1; min-width:0; }
    .prk-item-name { font-size:.82rem; font-weight:700; color:#1a1208; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.2; }
    .prk-item-badge { display:inline-flex; align-items:center; gap:3px; font-size:.58rem; font-weight:800; letter-spacing:.04em; padding:1px 6px; border-radius:3px; text-transform:uppercase; white-space:nowrap; border:1px solid transparent; margin-top:2px; }
    .prk-item-count { flex-shrink:0; font-size:.63rem; font-weight:700; background:#ede8df; color:#9a8a72; border-radius:4px; padding:2px 6px; }
    body.dark .prk-item { border-bottom-color:#2a2820; }
    body.dark .prk-item:hover { background:#1e1c18; }
    body.dark .prk-item.active { background:#1f1b0e; border-left-color:#f59e0b; }
    body.dark .prk-item-thumb { background:#2a2820; border-color:#3a3028; }
    body.dark .prk-item-name { color:#f0ece4; }
    body.dark .prk-item-count { background:#2a2820; color:#7a6a52; }

    /* Add strip */
    .prk-add-strip { padding:10px 12px; border-top:1px solid #e8dfd0; display:flex; gap:6px; }
    body.dark .prk-add-strip { border-top-color:#2a2820; }

    /* Stage (right panel) */
    .prk-stage { display:flex; flex-direction:column; height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; }
    .prk-stage-hero { display:flex; align-items:flex-start; gap:22px; padding:24px 28px 20px; background:#f5f0e8; border-bottom:1px solid #e8dfd0; flex-shrink:0; }
    body.dark .prk-stage-hero { background:#191610; border-bottom-color:#2a2820; }

    /* Polaroid frame */
    .prk-polaroid { flex-shrink:0; background:#fff; padding:7px 7px 26px; box-shadow:0 4px 18px rgba(0,0,0,.2),0 1px 4px rgba(0,0,0,.12); transform:rotate(-2deg); border-radius:2px; width:128px; position:relative; transition:transform .2s; }
    .prk-polaroid:hover { transform:rotate(0deg) scale(1.03); }
    .prk-polaroid-img { width:114px; height:114px; overflow:hidden; background:#e8dfd0; display:flex; align-items:center; justify-content:center; font-size:2.6rem; }
    .prk-polaroid-img img { width:100%; height:100%; object-fit:cover; display:block; }
    .prk-photo-btn { position:absolute; bottom:4px; right:4px; background:rgba(0,0,0,.35); border:none; border-radius:4px; color:#fff; font-size:.6rem; padding:2px 5px; cursor:pointer; font-family:inherit; }
    body.dark .prk-polaroid { background:#ede8df; }

    /* Hero info */
    .prk-hero-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
    .prk-prop-name-input { font-size:1.3rem; font-weight:900; font-family:'Courier Prime','Courier New',monospace; text-transform:uppercase; border:none; border-bottom:2px solid #ddd5c5; background:transparent; color:#1a1208; outline:none; padding:2px 0; width:100%; letter-spacing:.01em; }
    .prk-prop-name-input:focus { border-bottom-color:#f59e0b; }
    body.dark .prk-prop-name-input { color:#f0ece4; border-bottom-color:#3a3028; }
    .prk-type-tags { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
    .prk-tag { display:inline-flex; align-items:center; gap:3px; font-size:.64rem; font-weight:800; letter-spacing:.06em; padding:3px 10px; border-radius:5px; text-transform:uppercase; border:1.5px solid; white-space:nowrap; }
    .prk-hero-toggle { display:flex; align-items:center; gap:5px; font-size:.74rem; font-weight:700; color:#9a8a72; cursor:pointer; user-select:none; }
    .prk-hero-toggle input { accent-color:#f59e0b; width:14px; height:14px; cursor:pointer; }
    .prk-hero-toggle.active { color:#b45309; }
    .prk-type-row { display:flex; gap:8px; align-items:center; }
    .prk-type-sel { border:1px solid #ddd5c5; border-radius:7px; padding:6px 8px; font-size:.8rem; background:#fff; color:#1a1208; font-family:inherit; outline:none; flex:1; }
    .prk-type-sel:focus { border-color:#f59e0b; }
    body.dark .prk-type-sel { background:#1e1c18; border-color:#3a3028; color:#f0ece4; }
    .prk-del-btn { border:none; background:#fee2e2; color:#991b1b; border-radius:7px; padding:5px 10px; font-size:.72rem; cursor:pointer; font-family:inherit; font-weight:800; transition:background .12s; }
    .prk-del-btn:hover { background:#fecaca; }

    /* Stage body */
    .prk-stage-body { flex:1; padding:20px 28px 40px; }
    .prk-section { margin-bottom:22px; }
    .prk-stitle { font-size:.58rem; font-weight:900; text-transform:uppercase; letter-spacing:.1em; color:#9a8a72; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
    .prk-stitle::after { content:''; flex:1; height:1px; background:#e0d8cc; }
    body.dark .prk-stitle { color:#6a5f4f; }
    body.dark .prk-stitle::after { background:#2a2820; }

    /* Fields */
    .prk-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .prk-field { display:flex; flex-direction:column; gap:4px; }
    .prk-field.full { grid-column:1/-1; }
    .prk-flabel { font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#9a8a72; }
    body.dark .prk-flabel { color:#6a5f4f; }
    .prk-finput { border:1px solid #ddd5c5; border-radius:7px; padding:7px 10px; font-size:.84rem; background:#fff; color:#1a1208; width:100%; box-sizing:border-box; font-family:inherit; transition:border-color .12s; outline:none; }
    .prk-finput:focus { border-color:#f59e0b; box-shadow:0 0 0 2px rgba(245,158,11,.12); }
    .prk-textarea { border:1px solid #ddd5c5; border-radius:7px; padding:8px 10px; font-size:.83rem; background:#fff; color:#1a1208; width:100%; box-sizing:border-box; font-family:inherit; resize:vertical; outline:none; transition:border-color .12s; line-height:1.5; }
    .prk-textarea:focus { border-color:#f59e0b; box-shadow:0 0 0 2px rgba(245,158,11,.12); }
    body.dark .prk-finput { background:#1e1c18; border-color:#3a3028; color:#f0ece4; }
    body.dark .prk-finput:focus { border-color:#f59e0b; }
    body.dark .prk-textarea { background:#1e1c18; border-color:#3a3028; color:#f0ece4; }
    body.dark .prk-textarea:focus { border-color:#f59e0b; }

    /* Continuity polaroid mini cards */
    .prk-cont-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; }
    .prk-cont-card { background:#fff; border-radius:2px; padding:5px 5px 18px; box-shadow:0 2px 8px rgba(0,0,0,.13); cursor:pointer; transition:box-shadow .12s,transform .12s; }
    .prk-cont-card:hover { box-shadow:0 5px 18px rgba(0,0,0,.22); transform:scale(1.03); }
    .prk-cont-img { width:100%; height:80px; background:#e8dfd0; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:1.8rem; }
    .prk-cont-img img { width:100%; height:100%; object-fit:cover; display:block; }
    .prk-cont-cap { font-size:.62rem; color:#6b5f4f; padding:4px 2px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    body.dark .prk-cont-card { background:#ede8df; }
    body.dark .prk-cont-img  { background:#2a2820; }

    /* Scene rows */
    .prk-scene-row { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; border:1px solid #ddd5c5; margin-bottom:4px; background:#fff; font-size:.8rem; color:#1a1208; transition:border-color .12s; }
    .prk-scene-row:hover { border-color:#f59e0b; }
    body.dark .prk-scene-row { background:#1e1c18; border-color:#3a3028; color:#f0ece4; }
    body.dark .prk-scene-row:hover { border-color:#f59e0b; }

    /* Weapon warning */
    .prk-weapon-warn { background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; padding:10px 14px; margin-bottom:12px; display:flex; gap:8px; align-items:flex-start; }
    body.dark .prk-weapon-warn { background:#2a1500; border-color:#7c2d12; }

    /* Log entries */
    .prk-log-entry { display:flex; align-items:flex-start; gap:7px; padding:7px 0; border-bottom:1px solid #ede8df; font-size:.76rem; }
    .prk-log-entry:last-child { border-bottom:none; }
    body.dark .prk-log-entry { border-bottom-color:#2a2820; }

    /* Empty state in detail panel */
    .prk-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; padding:40px 24px; text-align:center; color:#9a8a72; }
    .prk-empty-icon { font-size:3rem; margin-bottom:12px; opacity:.6; }
    .prk-empty-head { font-size:1rem; font-weight:700; color:#5a4a3a; margin-bottom:6px; font-family:'Courier Prime',monospace; }
    .prk-empty-sub { font-size:.82rem; max-width:320px; line-height:1.5; }

    /* Mobile overrides for prop rack */
    @media (max-width: 760px) {
      .prk-stage-hero { flex-direction:column; padding:16px; gap:14px; }
      .prk-polaroid { width:100px; transform:rotate(0deg); }
      .prk-polaroid-img { width:86px; height:86px; }
      .prk-stage-body { padding:14px 16px 40px; }
      .prk-grid { grid-template-columns:1fr; }
      .prk-field.full { grid-column:unset; }
    }

    /* ── Art Department Studio ───────────────────────────────────── */
    .artdept-stab {
      padding:5px 11px; font-size:.78rem; font-weight:500;
      border:none; border-radius:6px; background:transparent;
      color:#6b7280; cursor:pointer; transition:all .15s; white-space:nowrap;
    }
    .artdept-stab:hover { background:#e5e7eb; color:var(--ink); }
    .artdept-stab.active { background:#fff; color:#7c3aed; font-weight:700;
      box-shadow:0 1px 4px rgba(0,0,0,.08); }
    .artdept-panel { display:flex; }

    /* Set list sidebar */
    .artdept-set-item {
      display:flex; align-items:center; gap:8px; padding:9px 12px;
      cursor:pointer; border-bottom:1px solid #f0f0f0;
      font-size:.83rem; color:var(--ink); transition:background .12s;
    }
    .artdept-set-item:hover { background:#f5f0ff; }
    .artdept-set-item.active { background:#ede9fe; font-weight:600;
      border-left:3px solid #7c3aed; }
    .artdept-set-dot {
      width:9px; height:9px; border-radius:50%; flex-shrink:0;
    }

    /* Concept bible detail */
    .artdept-input {
      border:1px solid #e5e7eb; border-radius:6px; padding:7px 10px;
      font-size:.84rem; background:var(--paper); color:var(--ink);
      width:100%; box-sizing:border-box; font-family:inherit;
    }
    .artdept-input:focus { outline:none; border-color:#7c3aed;
      box-shadow:0 0 0 2px rgba(124,58,237,.15); }
    .artdept-field-label {
      font-size:.7rem; font-weight:700; color:#9ca3af;
      text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px;
    }

    /* Colour palette swatches */
    .artdept-palette {
      display:flex; flex-wrap:wrap; gap:6px; align-items:center;
    }
    .artdept-swatch {
      width:34px; height:34px; border-radius:6px; border:2px solid rgba(0,0,0,.08);
      cursor:pointer; position:relative; flex-shrink:0; transition:transform .1s;
    }
    .artdept-swatch:hover { transform:scale(1.12); }
    .artdept-swatch-add {
      width:34px; height:34px; border-radius:6px;
      border:2px dashed #d1d5db; display:flex; align-items:center; justify-content:center;
      font-size:1.1rem; color:#9ca3af; cursor:pointer; transition:all .12s;
    }
    .artdept-swatch-add:hover { border-color:#7c3aed; color:#7c3aed; }

    /* Set dec table */
    .artdept-setdec-row {
      display:grid; grid-template-columns:1fr 90px 100px 90px auto;
      gap:6px; align-items:center; padding:7px 8px;
      border-bottom:1px solid #f3f4f6; font-size:.82rem;
    }
    .artdept-setdec-row:hover { background:#faf5ff; }
    .artdept-setdec-row input, .artdept-setdec-row select {
      border:1px solid #e5e7eb; border-radius:5px;
      padding:4px 7px; font-size:.8rem; background:var(--paper); color:var(--ink);
      width:100%; box-sizing:border-box; font-family:inherit;
    }
    .artdept-setdec-row input:focus, .artdept-setdec-row select:focus {
      outline:none; border-color:#7c3aed;
    }
    .artdept-acq-owned    { color:#065f46; background:#d1fae5; }
    .artdept-acq-rental   { color:#1e40af; background:#dbeafe; }
    .artdept-acq-build    { color:#92400e; background:#fef3c7; }
    .artdept-acq-borrow   { color:#5b21b6; background:#ede9fe; }
    .artdept-acq-purchase { color:#9d174d; background:#fce7f3; }

    /* Mood board elements */
    .artdept-mb-el {
      position:absolute; user-select:none; cursor:move;
      border:2px solid transparent; border-radius:8px;
      transition:border-color .15s;
    }
    .artdept-mb-el:hover, .artdept-mb-el.selected {
      border-color:#7c3aed;
    }
    .artdept-mb-el img {
      width:100%; height:100%; object-fit:cover; border-radius:6px;
      display:block; pointer-events:none;
    }
    .artdept-mb-swatch-el {
      width:100%; height:100%; border-radius:6px;
      display:flex; align-items:center; justify-content:center;
      font-size:.72rem; font-weight:700;
    }
    .artdept-mb-note-el {
      background:#fffbeb; border:1px solid #fcd34d; border-radius:6px;
      padding:8px 10px; font-size:.75rem; color:#92400e;
      width:100%; height:100%; box-sizing:border-box; overflow:hidden;
    }
    .artdept-mb-resize {
      position:absolute; bottom:0; right:0; width:14px; height:14px;
      background:#7c3aed; border-radius:4px 0 6px 0; cursor:se-resize;
      opacity:0; transition:opacity .15s;
    }
    .artdept-mb-el:hover .artdept-mb-resize,
    .artdept-mb-el.selected .artdept-mb-resize { opacity:1; }
    .artdept-mb-del {
      position:absolute; top:-8px; right:-8px; width:18px; height:18px;
      background:#ef4444; color:#fff; border-radius:50%; font-size:.65rem;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; opacity:0; transition:opacity .15s; border:none;
    }
    .artdept-mb-el:hover .artdept-mb-del,
    .artdept-mb-el.selected .artdept-mb-del { opacity:1; }

    /* Budget table */
    .artdept-budget-row {
      display:grid; grid-template-columns:1fr 80px 90px 90px 80px auto;
      gap:6px; align-items:center; padding:7px 8px;
      border-bottom:1px solid #f3f4f6; font-size:.82rem;
    }
    .artdept-budget-row:hover { background:#faf5ff; }
    .artdept-budget-row input, .artdept-budget-row select {
      border:1px solid #e5e7eb; border-radius:5px;
      padding:4px 7px; font-size:.8rem; background:var(--paper); color:var(--ink);
      width:100%; box-sizing:border-box; font-family:inherit;
    }
    .artdept-budget-row input:focus, .artdept-budget-row select:focus {
      outline:none; border-color:#7c3aed;
    }
    .artdept-over-budget { color:#dc2626; font-weight:700; }

    /* Dress/Strike card */
    .artdept-ds-card {
      border:1px solid #e5e7eb; border-radius:10px; margin-bottom:12px;
      overflow:hidden; page-break-inside:avoid;
    }
    .artdept-ds-header {
      padding:10px 14px; font-weight:700; font-size:.88rem;
      display:flex; align-items:center; gap:8px;
      background:#f5f3ff; border-bottom:1px solid #e5e7eb;
    }
    .artdept-ds-scenes {
      padding:8px 14px; display:flex; flex-wrap:wrap; gap:6px;
    }
    .artdept-ds-scene-pill {
      font-size:.72rem; padding:3px 9px; border-radius:999px;
      border:1px solid #e5e7eb; color:var(--ink);
      display:inline-flex; align-items:center; gap:4px;
    }
    .artdept-ds-needs-dress { background:#fef3c7; border-color:#fcd34d; color:#92400e; }
    .artdept-ds-needs-strike { background:#fee2e2; border-color:#fca5a5; color:#991b1b; }
    .artdept-ds-clean { background:#d1fae5; border-color:#6ee7b7; color:#065f46; }

    /* Stripboard overlay */
    .sb-artdept-pill {
      display:inline-flex; align-items:center; gap:3px;
      font-size:.63rem; background:#ede9fe; color:#5b21b6;
      border:1px solid #c4b5fd; border-radius:999px;
      padding:1px 6px; margin:1px; white-space:nowrap;
    }
    .sb-artdept-heavy {
      font-size:.63rem; background:#fce7f3; color:#9d174d;
      border:1px solid #f9a8d4; border-radius:999px;
      padding:1px 6px; margin:1px;
    }

    body.dark .artdept-stab.active { background:#1f1f2e; color:#a78bfa; }
    body.dark .artdept-set-item { border-bottom-color:#2a2a3a; }
    body.dark .artdept-set-item.active { background:#1e1535; border-left-color:#7c3aed; }
    body.dark .artdept-input { background:#1a1a2e; border-color:#2a2a3a; }
    body.dark .artdept-setdec-row { border-bottom-color:#2a2a3a; }
    body.dark .artdept-setdec-row:hover { background:#1a1030; }
    body.dark .artdept-setdec-row input, body.dark .artdept-setdec-row select { background:#1a1a2e; border-color:#2a2a3a; }
    body.dark .artdept-budget-row { border-bottom-color:#2a2a3a; }
    body.dark .artdept-budget-row input, body.dark .artdept-budget-row select { background:#1a1a2e; border-color:#2a2a3a; }
    body.dark .artdept-ds-card { border-color:#2a2a3a; }
    body.dark .artdept-ds-header { background:#1a1030; border-bottom-color:#2a2a3a; }
    body.dark .artdept-mb-note-el { background:#1e1a10; border-color:#7c4f00; color:#fcd34d; }

    /* ══════════════════════════════════════════════════════════════════════
       CINEMATOGRAPHER STUDIO  —  accent: #0d9488 (teal) / #d97706 (amber)
       ══════════════════════════════════════════════════════════════════════ */
    :root { --cine:#0d9488; --cine-rgb:13,148,136; --cine-hover:#0f766e; --cine-light:#f0fdfa; --cine-amber:#d97706; }
    body.dark { --cine-light:#042f2e; }
    .cine-stab { padding:6px 14px; border-radius:7px; border:none; background:transparent; font-size:.78rem; font-weight:700; color:var(--muted); cursor:pointer; transition:background .12s,color .12s; white-space:nowrap; }
    .cine-stab:hover { background:rgba(13,148,136,.1); color:var(--cine); }
    .cine-stab.active { background:var(--cine); color:#fff; }
    body.dark .cine-stab:hover { background:rgba(13,148,136,.18); }
    .cine-scene-item { padding:10px 14px; border-bottom:1px solid var(--line); cursor:pointer; font-size:.78rem; font-weight:700; color:var(--ink); transition:background .1s,color .1s; position:relative; }
    .cine-scene-item:hover { background:var(--cine-light); color:var(--cine); }
    .cine-scene-item.active { background:var(--cine-light); color:var(--cine); border-left:3px solid var(--cine); padding-left:11px; }
    .cine-scene-badge { display:inline-block; font-size:.6rem; font-weight:900; padding:1px 5px; border-radius:4px; background:rgba(13,148,136,.15); color:var(--cine); margin-left:5px; vertical-align:middle; }
    body.dark .cine-scene-item { border-bottom-color:#1e3a3a; }
    body.dark .cine-scene-item.active { background:#042f2e; border-left-color:var(--cine); }
    body.dark .cine-scene-item:hover { background:#042f2e; }
    .cine-field-group { display:flex; flex-direction:column; gap:4px; margin-bottom:16px; }
    .cine-field-group label { font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; color:var(--cine); }
    .cine-pill-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
    .cine-pill { padding:5px 12px; border-radius:20px; border:1.5px solid var(--line); background:var(--paper); font-size:.72rem; font-weight:700; color:var(--muted); cursor:pointer; transition:all .12s; user-select:none; }
    .cine-pill:hover { border-color:var(--cine); color:var(--cine); }
    .cine-pill.active { background:var(--cine); border-color:var(--cine); color:#fff; }
    body.dark .cine-pill { background:#1e2433; border-color:#2d3447; color:var(--muted); }
    body.dark .cine-pill:hover { border-color:var(--cine); color:var(--cine); }
    body.dark .cine-pill.active { background:var(--cine); border-color:var(--cine); color:#fff; }
    .cine-palette-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:4px; }
    .cine-swatch { width:34px; height:34px; border-radius:8px; border:2px solid transparent; cursor:pointer; position:relative; transition:transform .12s,box-shadow .12s; box-shadow:0 1px 4px rgba(0,0,0,.15); }
    .cine-swatch:hover { transform:scale(1.12); box-shadow:0 3px 10px rgba(0,0,0,.2); }
    .cine-swatch.has-color { border-color:rgba(0,0,0,.12); }
    .cine-swatch-add { width:34px; height:34px; border-radius:8px; border:2px dashed #d1d5db; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:#9ca3af; transition:all .12s; }
    .cine-swatch-add:hover { border-color:var(--cine); color:var(--cine); background:var(--cine-light); }
    .cine-shot-table { width:100%; border-collapse:collapse; font-size:.78rem; }
    .cine-shot-table th { text-align:left; padding:7px 10px; font-size:.65rem; font-weight:900; text-transform:uppercase; letter-spacing:.05em; color:var(--cine); background:var(--cine-light); border-bottom:2px solid rgba(13,148,136,.2); white-space:nowrap; }
    .cine-shot-row { border-bottom:1px solid var(--line); transition:background .1s; }
    .cine-shot-row:hover { background:var(--cine-light); }
    .cine-shot-row td { padding:6px 8px; vertical-align:middle; }
    .cine-shot-row input, .cine-shot-row select { width:100%; border:none; background:transparent; font:inherit; color:var(--ink); font-size:.78rem; padding:2px 4px; border-radius:4px; min-height:28px; min-width:0; }
    .cine-shot-row input:focus, .cine-shot-row select:focus { background:var(--paper); border:1px solid var(--cine); box-shadow:0 0 0 2px rgba(13,148,136,.14); outline:none; }
    .cine-complexity-stars { display:flex; gap:2px; }
    .cine-star { width:14px; height:14px; cursor:pointer; color:#d1d5db; font-size:.82rem; transition:color .1s; }
    .cine-star.lit { color:var(--cine-amber); }
    body.dark .cine-shot-row { border-bottom-color:#1e3a3a; }
    body.dark .cine-shot-row:hover { background:#042f2e; }
    body.dark .cine-shot-row input, body.dark .cine-shot-row select { color:var(--ink); }
    body.dark .cine-shot-row input:focus, body.dark .cine-shot-row select:focus { background:#1e2433; }
    body.dark .cine-shot-table th { background:#042f2e; border-bottom-color:var(--cine); }
    .cine-stat-card { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
    .cine-stat-card .stat-num { font-size:1.6rem; font-weight:900; color:var(--cine); line-height:1; }
    .cine-stat-card .stat-label { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
    .cine-bar-row { display:flex; align-items:center; gap:8px; font-size:.75rem; margin-bottom:6px; }
    .cine-bar-label { width:110px; flex-shrink:0; color:var(--ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .cine-bar-track { flex:1; height:8px; background:var(--line); border-radius:999px; overflow:hidden; }
    .cine-bar-fill { height:100%; background:var(--cine); border-radius:999px; transition:width .4s cubic-bezier(.2,.8,.3,1); }
    .cine-bar-count { width:28px; text-align:right; color:var(--muted); font-weight:700; font-size:.72rem; }
    body.dark .cine-stat-card { background:#1e2433; border-color:#1e3a3a; }
    /* Stripboard overlays */
    .strip.cine-density-low    { box-shadow:inset 3px 0 0 #34d399 !important; }
    .strip.cine-density-medium { box-shadow:inset 3px 0 0 var(--cine-amber) !important; }
    .strip.cine-density-high   { box-shadow:inset 3px 0 0 #ef4444 !important; }
    .strip.cine-gear-heavy   { background:rgba(239,68,68,.07) !important; }
    .strip.cine-gear-moderate { background:rgba(245,158,11,.06) !important; }
    .strip[data-cine-light="soft-daylight"]   { border-left-color:#fbbf24 !important; }
    .strip[data-cine-light="practical"]       { border-left-color:#f97316 !important; }
    .strip[data-cine-light="hard-contrast"]   { border-left-color:#1e3a5f !important; }
    .strip[data-cine-light="low-key"]         { border-left-color:#334155 !important; }
    .strip[data-cine-light="high-key"]        { border-left-color:#bae6fd !important; }
    .strip[data-cine-light="magic-hour"]      { border-left-color:#f59e0b !important; }
    .strip[data-cine-light="neon-practicals"] { border-left-color:#a855f7 !important; }
    .strip[data-cine-light="available-light"] { border-left-color:#94a3b8 !important; }
    .cine-overlay-active .strip[data-cine-light] { border-left-width:6px !important; }
    /* Swatch hover: reveal ✕ delete icon */
    .cine-swatch:hover .cine-swatch-del { opacity:1 !important; }
    .cine-overlay-btn { font-size:.72rem; padding:4px 9px; border-radius:6px; border:1.5px solid var(--line); background:var(--paper); color:var(--muted); cursor:pointer; font-weight:700; transition:all .12s; white-space:nowrap; }
    .cine-overlay-btn:hover { border-color:var(--cine); color:var(--cine); }
    .cine-overlay-btn.active { background:var(--cine); border-color:var(--cine); color:#fff; }
    body.dark .cine-overlay-btn { background:#1e2433; border-color:#2d3447; }
    body.dark .cine-overlay-btn:hover { border-color:var(--cine); color:var(--cine); }
    body.dark .cine-overlay-btn.active { background:var(--cine); color:#fff; }
    .cine-risk-badge { font-size:.58rem; font-weight:800; padding:1px 5px; border-radius:3px; vertical-align:middle; margin-left:3px; }
    .cine-risk-badge.low    { background:#d1fae5; color:#065f46; }
    .cine-risk-badge.medium { background:#fef3c7; color:#92400e; }
    .cine-risk-badge.high   { background:#fee2e2; color:#991b1b; }
    body.dark .cine-risk-badge.low    { background:#052e16; color:#34d399; }
    body.dark .cine-risk-badge.medium { background:#451a03; color:#fcd34d; }
    body.dark .cine-risk-badge.high   { background:#450a0a; color:#fca5a5; }
    .cine-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--muted); text-align:center; padding:40px 20px; font-size:.85rem; }
    .cine-empty-icon { font-size:2.4rem; opacity:.6; }

    /* ── Scene Intelligence Panel ─────────────────────────────────────── */
    .cine-intel-panel { background:linear-gradient(135deg,rgba(13,148,136,.06) 0%,rgba(13,148,136,.02) 100%); border:1px solid rgba(13,148,136,.18); border-radius:12px; padding:14px 16px; margin-bottom:18px; }
    .cine-intel-title { font-size:.6rem; font-weight:900; text-transform:uppercase; letter-spacing:.1em; color:var(--cine); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
    .cine-intel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; }
    .cine-intel-item { display:flex; flex-direction:column; gap:2px; }
    .cine-intel-key { font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
    .cine-intel-val { font-size:.8rem; font-weight:800; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .cine-intel-tags { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
    .cine-intel-tag { font-size:.6rem; font-weight:700; padding:1px 6px; border-radius:10px; background:rgba(13,148,136,.12); color:var(--cine); }
    body.dark .cine-intel-panel { background:rgba(13,148,136,.08); border-color:rgba(13,148,136,.25); }

    /* ── Reference Images ─────────────────────────────────────────────── */
    .cine-refs-grid { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; align-items:flex-start; }
    .cine-ref-thumb { width:88px; height:60px; border-radius:8px; object-fit:cover; cursor:pointer; border:2px solid transparent; transition:all .15s; box-shadow:0 2px 8px rgba(0,0,0,.15); flex-shrink:0; }
    .cine-ref-thumb:hover { border-color:var(--cine); transform:scale(1.04); box-shadow:0 4px 16px rgba(13,148,136,.3); }
    .cine-ref-add { width:88px; height:60px; border-radius:8px; border:2px dashed #d1d5db; background:transparent; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:#9ca3af; font-size:.65rem; font-weight:700; transition:all .12s; flex-shrink:0; }
    .cine-ref-add:hover { border-color:var(--cine); color:var(--cine); background:var(--cine-light); }
    .cine-ref-wrap { position:relative; flex-shrink:0; }
    .cine-ref-del { position:absolute; top:-5px; right:-5px; width:16px; height:16px; border-radius:50%; background:#ef4444; color:#fff; border:none; cursor:pointer; font-size:.6rem; display:none; align-items:center; justify-content:center; line-height:1; }
    .cine-ref-wrap:hover .cine-ref-del { display:flex; }
    body.dark .cine-ref-add { border-color:#2d3447; color:var(--muted); }
    body.dark .cine-ref-add:hover { border-color:var(--cine); color:var(--cine); }

    /* ── Lighting Continuity Clusters ─────────────────────────────────── */
    .cine-cluster-section { margin-top:20px; }
    .cine-cluster-title { font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.07em; color:var(--cine); margin-bottom:12px; }
    .cine-cluster-group { margin-bottom:14px; border-radius:10px; overflow:hidden; border:1px solid var(--line); }
    .cine-cluster-header { display:flex; align-items:center; gap:10px; padding:8px 12px; font-size:.75rem; font-weight:800; }
    .cine-cluster-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
    .cine-cluster-scenes { display:flex; flex-wrap:wrap; gap:4px; padding:8px 12px; border-top:1px solid var(--line); background:var(--paper); }
    .cine-cluster-scene { font-size:.68rem; font-weight:700; padding:3px 8px; border-radius:6px; background:rgba(13,148,136,.07); color:var(--ink); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    body.dark .cine-cluster-group { border-color:#1e3a3a; }
    body.dark .cine-cluster-scenes { background:#1e2433; }
    body.dark .cine-cluster-scene { background:rgba(13,148,136,.12); }

    /* ── Visual Density Engine ────────────────────────────────────────── */
    .cine-density-engine { margin-top:20px; }
    .cine-density-scene-row { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; transition:background .1s; cursor:default; }
    .cine-density-scene-row:hover { background:var(--cine-light); }
    .cine-density-name { flex:1; min-width:0; font-size:.75rem; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cine-density-bar { width:80px; flex-shrink:0; }
    .cine-density-bar-inner { height:6px; border-radius:3px; transition:width .4s cubic-bezier(.2,.8,.3,1); }
    .cine-density-mins { width:50px; text-align:right; font-size:.7rem; font-weight:700; color:var(--muted); flex-shrink:0; }
    .cine-density-risk { width:60px; text-align:right; font-size:.62rem; font-weight:800; flex-shrink:0; }
    body.dark .cine-density-scene-row:hover { background:#042f2e; }

    /* ── Shot density badge on stripboard strips ──────────────────────── */
    .strip-cine-badge { display:none; font-size:.55rem; font-weight:900; padding:1px 5px; border-radius:3px; background:rgba(13,148,136,.15); color:var(--cine); margin-left:4px; vertical-align:middle; white-space:nowrap; }
    .cine-overlay-active .strip-cine-badge { display:inline; }

    /* ── Overlay bar legend ───────────────────────────────────────────── */
    .cine-overlay-legend { display:flex; align-items:center; gap:12px; font-size:.65rem; flex-wrap:wrap; }
    .cine-legend-item { display:flex; align-items:center; gap:4px; color:var(--muted); font-weight:700; }
    .cine-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
    .cine-legend-bar { width:4px; height:14px; border-radius:2px; flex-shrink:0; }

    /* ── Blueprint section dividers ───────────────────────────────────── */
    .cine-section-divider { font-size:.6rem; font-weight:900; text-transform:uppercase; letter-spacing:.1em; color:var(--cine); padding:12px 0 6px; border-top:1px solid rgba(13,148,136,.12); margin-top:4px; display:flex; align-items:center; gap:8px; }
    .cine-section-divider::after { content:''; flex:1; height:1px; background:rgba(13,148,136,.1); }

    /* ── Gaffer Sheet ─────────────────────────────────────────────────── */
    .cine-fix-add-btn { font-size:.7rem; font-weight:700; padding:3px 8px; border-radius:6px; border:1.5px solid var(--line); background:var(--paper); color:var(--muted); cursor:pointer; transition:all .12s; white-space:nowrap; }
    .cine-fix-add-btn:hover { border-color:var(--cine); color:var(--cine); background:var(--cine-light); }
    .cine-fix-add-btn.active { background:var(--cine); color:#fff; border-color:var(--cine); }
    body.dark .cine-fix-add-btn { background:#1e2433; border-color:#2d3447; }
    body.dark .cine-fix-add-btn:hover { border-color:var(--cine); color:var(--cine); background:#042f2e; }
    /* SVG diagram fixture styles */
    .cine-fixture { cursor:grab; }
    .cine-fixture:active { cursor:grabbing; }
    .cine-fixture.selected .fix-body { stroke:#0d9488; stroke-width:2.5; filter:drop-shadow(0 0 4px rgba(13,148,136,.5)); }
    .fix-body { transition:stroke .1s; }
    /* Equipment list */
    .cine-equip-row { display:flex; align-items:center; gap:8px; padding:4px 0; border-bottom:1px solid var(--line); font-size:.72rem; }
    .cine-equip-icon { width:20px; text-align:center; font-size:.9rem; flex-shrink:0; }
    .cine-equip-name { flex:1; min-width:0; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cine-equip-watts { color:var(--muted); font-weight:600; white-space:nowrap; }
    .cine-power-total { font-size:.72rem; font-weight:800; padding:6px 0 2px; border-top:2px solid var(--line); color:var(--cine); }
    body.dark .cine-equip-row { border-bottom-color:#1e3a3a; }
    body.dark .cine-power-total { border-top-color:#1e3a3a; }
    /* Diagram room grid */
    #cine-diagram-svg { background: repeating-linear-gradient(0deg, transparent, transparent 29px, rgba(13,148,136,.06) 29px, rgba(13,148,136,.06) 30px), repeating-linear-gradient(90deg, transparent, transparent 29px, rgba(13,148,136,.06) 29px, rgba(13,148,136,.06) 30px); }
    body.dark #cine-diagram-svg { background: repeating-linear-gradient(0deg, transparent, transparent 29px, rgba(13,148,136,.08) 29px, rgba(13,148,136,.08) 30px), repeating-linear-gradient(90deg, transparent, transparent 29px, rgba(13,148,136,.08) 29px, rgba(13,148,136,.08) 30px); }

    /* END CINEMATOGRAPHER STUDIO CSS */
    .cork-toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background: rgba(0,0,0,0.18);
      flex-wrap: wrap;
      flex-shrink: 0;
      backdrop-filter: blur(4px);
    }
    .cork-scroll {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 24px 20px 80px;
    }
    .cork-stats-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      padding: 0 0 16px;
    }
    .cork-stat-pill {
      background: rgba(0,0,0,0.25);
      color: rgba(255,255,255,0.85);
      border-radius: 999px;
      padding: 4px 12px;
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .cork-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
      gap: 24px;
    }
    @media (max-width: 760px) {
      .cork-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 16px; }
      .cork-scroll { padding: 16px 12px 80px; }
    }
    /* ── STICKY NOTE CARD ─────────────────────────────── */
    .sticky-note {
      position: relative;
      /* Beats default to a legible sans; honors the Beats font picker (var). */
      font-family: var(--cbs-beats-font, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
      border-radius: 3px;
      padding: 32px 14px 20px;
      box-shadow:
        4px 5px 14px rgba(0,0,0,0.30),
        0 2px 4px rgba(0,0,0,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.08);
      cursor: pointer;
      transition: transform .14s cubic-bezier(0.34,1.4,0.64,1), box-shadow .14s;
      user-select: none;
      -webkit-user-select: none;
      display: flex;
      flex-direction: column;
      min-height: 160px;
    }
    .sticky-note:hover {
      transform: translateY(-6px) rotate(0deg) scale(1.03) !important;
      box-shadow: 6px 12px 28px rgba(0,0,0,0.38), 0 3px 6px rgba(0,0,0,0.16);
      z-index: 10;
    }
    .sticky-note:active { transform: scale(0.97) !important; }
    /* Corner curl effect */
    .sticky-note::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 20px;
      height: 20px;
      background: linear-gradient(225deg, rgba(0,0,0,0.18) 50%, transparent 50%);
      border-radius: 3px 0 3px 0;
    }
    /* ── PUSH-PIN ─────────────────────────────────────── */
    .sticky-pin {
      position: absolute;
      top: -7px;
      left: 50%;
      transform: translateX(-50%);
      width: 18px;
      height: 18px;
      z-index: 5;
    }
    .sticky-pin-head {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #ff6b6b, #c0392b 60%, #7b1f1f);
      box-shadow: 0 2px 6px rgba(0,0,0,0.45), inset 0 1px 2px rgba(255,255,255,0.25);
      margin: 0 auto;
    }
    .sticky-pin-needle {
      width: 2px;
      height: 8px;
      background: linear-gradient(to bottom, #888, #555);
      margin: 0 auto;
      border-radius: 0 0 2px 2px;
    }
    /* ── TAPE STRIP ───────────────────────────────────── */
    .sticky-tape {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 48px;
      height: 14px;
      background: rgba(255,255,255,0.45);
      border-radius: 1px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    }
    body.dark .sticky-tape { background: rgba(255,255,255,0.18); }
    /* Note color variants */
    .note-canary  { background: #fef08a; border-top: 3px solid #eab308; }
    .note-rose    { background: #fda4af; border-top: 3px solid #f43f5e; }
    .note-sky     { background: #bae6fd; border-top: 3px solid #0ea5e9; }
    .note-mint    { background: #bbf7d0; border-top: 3px solid #22c55e; }
    .note-lavender{ background: #e9d5ff; border-top: 3px solid #a855f7; }
    .note-peach   { background: #fed7aa; border-top: 3px solid #f97316; }
    .note-white   { background: #f8f8f4; border-top: 3px solid #d1d5db; }
    body.dark .note-canary  { background: #854d0e; border-top-color: #a16207; }
    body.dark .note-rose    { background: #881337; border-top-color: #be123c; }
    body.dark .note-sky     { background: #075985; border-top-color: #0284c7; }
    body.dark .note-mint    { background: #14532d; border-top-color: #16a34a; }
    body.dark .note-lavender{ background: #4c1d95; border-top-color: #7c3aed; }
    body.dark .note-peach   { background: #7c2d12; border-top-color: #c2410c; }
    body.dark .note-white   { background: #374151; border-top-color: #6b7280; }
    /* ── NOTE CONTENT ─────────────────────────────────── */
    .sticky-title {
      font-family: 'Caveat', cursive;
      font-size: 1.05rem;
      font-weight: 700;
      color: #1a1a1a;
      line-height: 1.25;
      margin-bottom: 6px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      min-height: 1.3em;
    }
    body.dark .sticky-title { color: rgba(255,255,255,0.92); }
    .sticky-body {
      font-family: 'Caveat', cursive;
      font-size: .88rem;
      color: #374151;
      line-height: 1.4;
      flex: 1;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
    }
    body.dark .sticky-body { color: rgba(255,255,255,0.72); }
    /* ── NOTE FOOTER ──────────────────────────────────── */
    .sticky-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
      gap: 6px;
    }
    .sticky-act-badge {
      font-size: .6rem;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
      background: rgba(0,0,0,0.12);
      border-radius: 4px;
      padding: 2px 6px;
      color: rgba(0,0,0,0.6);
    }
    body.dark .sticky-act-badge { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); }
    .sticky-type-badge {
      font-size: .58rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      background: rgba(0,0,0,0.10);
      border-radius: 4px;
      padding: 2px 5px;
      color: rgba(0,0,0,0.5);
    }
    body.dark .sticky-type-badge { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.5); }
    .sticky-label-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      border: 1.5px solid rgba(0,0,0,0.18);
      flex-shrink: 0;
    }
    /* ── COLOR SWATCHES IN FOOTER ─────────────────────── */
    .sticky-color-row {
      display: flex;
      gap: 4px;
      margin-top: 6px;
      padding: 4px 0 2px;
      border-top: 1px solid rgba(0,0,0,0.08);
    }
    .sticky-color-swatch {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1.5px solid rgba(0,0,0,0.15);
      cursor: pointer;
      transition: transform .1s;
      flex-shrink: 0;
    }
    .sticky-color-swatch:hover { transform: scale(1.3); }
    .sticky-color-swatch.active { border-color: rgba(0,0,0,0.55); transform: scale(1.2); }
    /* ── DRAGGING ─────────────────────────────────────── */
    .sticky-note.drag-over { outline: 3px dashed rgba(255,255,255,0.7); outline-offset: 2px; }
    .sticky-note.dragging  { opacity: 0.4; }
    /* ── MULTI-SELECT ─────────────────────────────────── */
    .sticky-note.beat-selected {
      outline: 3px solid #2563eb;
      outline-offset: 3px;
      box-shadow: 0 0 0 6px rgba(37,99,235,0.18), 0 8px 24px rgba(0,0,0,.25);
    }
    /* Selection action bar */
    #cork-select-bar {
      display: none;
      align-items: center;
      gap: 10px;
      padding: 7px 14px;
      background: #1e40af;
      color: white;
      font-size: .8rem;
      font-weight: 700;
      position: sticky;
      top: 0;
      z-index: 50;
      flex-shrink: 0;
    }
    #cork-select-bar.visible { display: flex; }
    #cork-select-bar select,
    #cork-select-bar button {
      font-size: .75rem;
      padding: 4px 10px;
      border-radius: 6px;
      border: 1.5px solid rgba(255,255,255,.35);
      background: rgba(255,255,255,.15);
      color: white;
      cursor: pointer;
      font-family: inherit;
      font-weight: 700;
    }
    #cork-select-bar button:hover { background: rgba(255,255,255,.28); }
    /* Beat drag ghost */
    #cork-drag-ghost {
      position: fixed;
      pointer-events: none;
      z-index: 9999;
      opacity: 0.88;
      transform: rotate(-3deg) scale(1.07);
      box-shadow: 0 16px 40px rgba(0,0,0,.4);
      border-radius: 3px;
      transition: transform .08s;
      display: none;
      min-width: 140px;
      max-width: 200px;
      padding: 10px 12px;
      font-family: inherit;
      font-size: .8rem;
      font-weight: 700;
      word-break: break-word;
    }
    /* ── ADD BUTTON ───────────────────────────────────── */
    .cork-add-btn {
      position: relative;
      border-radius: 3px;
      padding: 24px 14px;
      min-height: 130px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 8px;
      border: 2.5px dashed rgba(255,255,255,0.5);
      cursor: pointer;
      transition: background .15s, border-color .15s;
      background: rgba(255,255,255,0.08);
    }
    .cork-add-btn:hover {
      background: rgba(255,255,255,0.18);
      border-color: rgba(255,255,255,0.8);
    }
    .cork-add-label {
      font-family: 'Caveat', cursive;
      font-size: 1rem;
      color: rgba(255,255,255,0.75);
      font-weight: 700;
    }
    /* ── BEAT EDITOR MODAL ────────────────────────────── */
    #beat-editor-modal .modal-body { padding: 16px 18px; }
    /* ── BEATS v2 — TIMELINE VIEW ──────────────────────────── */
    #cork-timeline {
      display: none;
      flex-direction: column;
      gap: 0;
      padding: 0 0 40px;
    }
    #cork-timeline.active { display: flex; }
    .tl-act-lane {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-bottom: 20px;
    }
    .tl-act-header {
      font-size: .68rem; font-weight: 900; letter-spacing: .1em;
      text-transform: uppercase; color: rgba(255,255,255,0.75);
      padding: 8px 16px 6px;
      background: rgba(0,0,0,0.22);
      border-left: 4px solid rgba(255,255,255,0.35);
      backdrop-filter: blur(4px);
      display: flex; align-items: center; gap: 10px;
    }
    .tl-act-header .tl-act-count {
      background: rgba(255,255,255,0.18); border-radius: 999px;
      padding: 1px 8px; font-size: .6rem;
    }
    .tl-beats-row {
      display: flex;
      flex-direction: row;
      gap: 14px;
      padding: 16px 16px 10px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.2) transparent;
      min-height: 200px;
    }
    .tl-beats-row::-webkit-scrollbar { height: 5px; }
    .tl-beats-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
    .tl-card {
      flex-shrink: 0;
      width: 180px;
      border-radius: 4px;
      padding: 12px 12px 14px;
      box-shadow: 3px 4px 12px rgba(0,0,0,0.28);
      cursor: pointer;
      transition: transform .13s, box-shadow .13s;
      display: flex; flex-direction: column; gap: 5px;
      position: relative;
    }
    .tl-card:hover { transform: translateY(-4px); box-shadow: 4px 10px 22px rgba(0,0,0,0.38); z-index: 5; }
    .tl-card-title {
      font-family: 'Caveat', cursive;
      font-size: .95rem; font-weight: 700;
      color: #1a1a1a; line-height: 1.25;
      overflow: hidden; display: -webkit-box;
      -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    .tl-card-body {
      font-family: 'Caveat', cursive;
      font-size: .78rem; color: #374151; line-height: 1.35;
      overflow: hidden; display: -webkit-box;
      -webkit-line-clamp: 3; -webkit-box-orient: vertical;
      flex: 1;
    }
    .tl-card-footer {
      display: flex; align-items: center; gap: 5px; margin-top: 4px; flex-wrap: wrap;
    }
    .tl-card-tension {
      display: flex; gap: 2px; align-items: center;
    }
    .tl-tension-pip {
      width: 7px; height: 7px; border-radius: 50%;
      background: rgba(0,0,0,0.15);
      transition: background .1s;
    }
    .tl-tension-pip.filled { background: rgba(0,0,0,0.5); }
    body.dark .tl-card-title { color: rgba(255,255,255,0.92); }
    body.dark .tl-card-body  { color: rgba(255,255,255,0.68); }
    body.dark .tl-tension-pip { background: rgba(255,255,255,0.15); }
    body.dark .tl-tension-pip.filled { background: rgba(255,255,255,0.55); }

    /* ── TENSION GRAPH ────────────────────────────────────── */
    #cork-tension-wrap {
      background: rgba(0,0,0,0.22);
      padding: 12px 16px 8px;
      flex-shrink: 0;
      backdrop-filter: blur(4px);
    }
    #cork-tension-wrap .tg-label {
      font-size: .58rem; font-weight: 900; letter-spacing: .08em;
      text-transform: uppercase; color: rgba(255,255,255,0.5);
      margin-bottom: 6px;
    }
    #cork-tension-canvas {
      display: block; width: 100%; height: 60px;
      border-radius: 4px;
    }

    /* ── VIEW TOGGLE BUTTONS ──────────────────────────────── */
    .cork-view-btn {
      background: rgba(255,255,255,0.12);
      border: 1.5px solid rgba(255,255,255,0.22);
      color: rgba(255,255,255,0.75);
      border-radius: 7px;
      padding: 5px 11px;
      font-size: .75rem; font-weight: 800;
      cursor: pointer; font-family: inherit;
      transition: background .13s, border-color .13s;
      min-height: 34px;
    }
    .cork-view-btn.active, .cork-view-btn:hover {
      background: rgba(255,255,255,0.25);
      border-color: rgba(255,255,255,0.6);
      color: white;
    }

    /* ── BEAT CHARACTERS TAGS ─────────────────────────────── */
    .beat-char-tags {
      display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px;
    }
    .beat-char-tag {
      background: rgba(37,99,235,0.12); border: 1px solid rgba(37,99,235,0.25);
      color: var(--brand); border-radius: 999px;
      padding: 2px 9px; font-size: .68rem; font-weight: 700;
      display: flex; align-items: center; gap: 4px;
    }
    .beat-char-tag-del {
      cursor: pointer; opacity: .55; font-size: .6rem;
      padding: 0 1px; line-height: 1;
    }
    .beat-char-tag-del:hover { opacity: 1; }
    #beat-char-input-wrap {
      display: flex; gap: 6px; align-items: center; margin-top: 6px;
    }
    #beat-char-input {
      flex: 1; padding: 5px 10px; border: 1.5px solid var(--line);
      border-radius: 8px; font-size: .82rem; font-family: inherit;
      background: var(--paper); color: var(--ink);
    }

    /* ── TENSION SLIDER IN EDITOR ─────────────────────────── */
    .beat-tension-row {
      display: flex; align-items: center; gap: 10px; margin-top: 4px;
    }
    #beat-tension {
      flex: 1; accent-color: var(--brand); cursor: pointer;
    }
    .beat-tension-val {
      min-width: 22px; font-weight: 800; font-size: .9rem;
      color: var(--brand); text-align: center;
    }

    /* ── BEAT BADGE IN WRITER ─────────────────────────────── */
    .beat-scene-badge {
      display: inline-flex; align-items: center; gap: 3px;
      font-size: .62rem; font-weight: 800;
      background: rgba(37,99,235,0.12); color: var(--brand);
      border: 1px solid rgba(37,99,235,0.2); border-radius: 4px;
      padding: 1px 6px; margin-left: 8px; vertical-align: middle;
      cursor: pointer; user-select: none; -webkit-user-select: none;
      transition: background .12s;
    }
    .beat-scene-badge:hover { background: rgba(37,99,235,0.22); }
    body.dark .beat-scene-badge {
      background: rgba(37,99,235,0.2); border-color: rgba(37,99,235,0.35); color: #93c5fd;
    }

    /* ── BEAT PRINT STYLES ────────────────────────────────── */
    @media print {
      body.printing-beats * { display: none !important; }
      body.printing-beats #beat-print-sheet,
      body.printing-beats #beat-print-sheet * { display: revert !important; }
      #beat-print-sheet { position: static !important; }
    }
    #beat-print-sheet {
      display: none;
      position: fixed; inset: 0; z-index: 99999;
      background: white; color: #111;
      padding: 48px 56px; overflow-y: auto;
      font-family: 'Inter', Arial, sans-serif;
    }
    #beat-print-sheet.open { display: block; }
    .bps-title { font-size: 1.5rem; font-weight: 900; margin-bottom: 4px; }
    .bps-subtitle { font-size: .82rem; color: #6b7280; margin-bottom: 28px; }
    .bps-act { font-size: .68rem; font-weight: 900; letter-spacing: .1em;
      text-transform: uppercase; color: #6b7280; margin: 22px 0 8px;
      padding-bottom: 5px; border-bottom: 2px solid #e5e7eb; }
    .bps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 14px; }
    .bps-card {
      border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px;
      page-break-inside: avoid;
    }
    .bps-card-title { font-weight: 800; font-size: .92rem; margin-bottom: 5px; }
    .bps-card-body { font-size: .78rem; color: #374151; line-height: 1.45; }
    .bps-card-meta { font-size: .65rem; color: #9ca3af; margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
    .bps-close-btn {
      position: fixed; top: 20px; right: 24px;
      background: #1f2937; color: white; border: none;
      border-radius: 8px; padding: 8px 16px; font-size: .82rem;
      font-weight: 700; cursor: pointer; font-family: inherit;
    }
    @media print { .bps-close-btn { display: none !important; } }

    .beat-label-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 6px;
    }
    .beat-label-swatch {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
      transition: transform .1s, border-color .1s;
    }
    .beat-label-swatch:hover { transform: scale(1.2); }
    .beat-label-swatch.selected { border-color: var(--ink); transform: scale(1.15); }
    /* Toolbar inputs */
    .cork-search {
      border: 1.5px solid rgba(255,255,255,0.35);
      border-radius: 8px;
      padding: 6px 12px;
      background: rgba(255,255,255,0.18);
      color: white;
      font-size: .82rem;
      font-weight: 700;
      min-height: 34px;
      outline: none;
      font-family: inherit;
      min-width: 150px;
    }
    .cork-search::placeholder { color: rgba(255,255,255,0.55); }
    .cork-search:focus { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.7); }
    .cork-select {
      border: 1.5px solid rgba(255,255,255,0.35);
      border-radius: 8px;
      padding: 6px 30px 6px 10px;
      background: rgba(0,0,0,0.25);
      color: white;
      font-size: .78rem;
      font-weight: 700;
      min-height: 34px;
      outline: none;
      font-family: inherit;
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,0.7)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
    }
    .cork-select option { background: #1f2937; color: white; }

    /* Print styles */
    @media print {
      header, .sidebar, #mode-indicator, .editor-statusbar, #bottom-nav, #mobile-format-bar,
      #find-replace-bar, #scene-jump-bar, .page-num-badge, .page-more-hint { display: none !important; }
      .view-container { padding-bottom: 0; }
      .editor-frame { background: white !important; padding: 0 !important; }
      #pages-container { gap: 0 !important; }
      .script-page-sheet { 
        box-shadow: none !important; border-radius: 0 !important; 
        page-break-after: always; min-height: 0 !important;
      }
      .script-page-sheet:last-child { page-break-after: avoid; }
    }

    /* ── AUTH OVERLAY ────────────────────────────────────────────── */
    #auth-overlay {
      position:fixed; inset:0; z-index:9000;
      background:rgba(0,0,0,0.6);
      backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
      display:flex; align-items:center; justify-content:center; padding:20px;
    }
    #auth-overlay.hidden { display:none !important; }
    .auth-card {
      background:white; border-radius:22px; padding:36px 32px;
      width:100%; max-width:420px;
      box-shadow:0 24px 80px rgba(0,0,0,0.35);
      animation:authIn .22s cubic-bezier(0.34,1.56,0.64,1);
    }
    @keyframes authIn { from{opacity:0;transform:scale(0.88) translateY(12px)} to{opacity:1;transform:scale(1) translateY(0)} }
    .auth-logo { text-align:center; margin-bottom:22px; }
    .auth-logo-icon { font-size:2.4rem; display:block; margin-bottom:6px; }
    .auth-logo-title { font-size:1.2rem; font-weight:900; color:var(--ink); }
    .auth-logo-sub { font-size:.72rem; color:var(--muted); font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-top:2px; }
    .auth-tabs { display:flex; background:#f3f4f6; border-radius:12px; padding:3px; gap:2px; margin-bottom:22px; }
    .auth-tab { flex:1; text-align:center; padding:8px 0; border-radius:10px; font-weight:800; font-size:.83rem; cursor:pointer; color:var(--muted); transition:background .12s,color .12s; user-select:none; }
    .auth-tab.active { background:white; color:var(--brand); box-shadow:0 2px 8px rgba(0,0,0,.10); }
    .auth-field { margin-bottom:12px; }
    .auth-field label { display:block; font-size:.75rem; font-weight:800; color:#374151; margin-bottom:5px; letter-spacing:.03em; }
    .auth-field input { width:100%; padding:11px 14px; border:1.5px solid #e5e7eb; border-radius:12px; font-size:16px; transition:border-color .12s; background:#fafafa; box-sizing:border-box; }
    .auth-role-toggle { display:flex; gap:8px; }
    .auth-role-opt { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 8px; border:1.5px solid #e5e7eb; border-radius:12px; font-size:.85rem; font-weight:700; color:#374151; cursor:pointer; background:#fafafa; transition:.12s; }
    .auth-role-opt:has(input:checked) { border-color:var(--brand); background:rgba(37,99,235,.06); color:var(--brand); }
    .auth-role-opt input { width:auto; margin:0; }
    .auth-field input:focus { border-color:var(--brand); outline:none; background:white; }
    .auth-submit { width:100%; padding:13px; background:var(--brand); color:white; border:none; border-radius:12px; font-weight:900; font-size:.95rem; cursor:pointer; margin-top:4px; }
    .auth-submit:hover { background:var(--brand-hover); }
    .auth-submit:disabled { opacity:.6; cursor:not-allowed; }
    .auth-divider { display:flex; align-items:center; gap:10px; margin:16px 0; color:var(--muted); font-size:.73rem; font-weight:700; }
    .auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:#e5e7eb; }
    .auth-social { width:100%; padding:11px 14px; border:1.5px solid #e5e7eb; border-radius:12px; background:white; font-weight:800; font-size:.87rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:8px; color:var(--ink); }
    .auth-social:hover { background:#f9fafb; border-color:#c5c9d0; }
    .auth-social svg { width:20px; height:20px; flex-shrink:0; }
    .auth-error { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; padding:10px 14px; border-radius:10px; font-size:.8rem; font-weight:700; margin-bottom:12px; display:none; }
    .auth-error.show { display:block; }
    .auth-skip { text-align:center; margin-top:14px; font-size:.73rem; color:var(--muted); }
    .auth-skip a { color:var(--brand); font-weight:800; cursor:pointer; text-decoration:none; }
    .auth-skip a:hover { text-decoration:underline; }
    /* ── Mobile login fixes ────────────────────────────────────────── */
    @media (max-width: 480px) {
      #auth-overlay {
        align-items: flex-start;
        padding: 16px 12px;
        padding-top: max(16px, env(safe-area-inset-top, 16px));
        padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
        overflow-y: auto;
      }
      .auth-card {
        padding: 24px 20px;
        border-radius: 18px;
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin: auto 0;
      }
      .auth-logo { margin-bottom: 16px; }
      .auth-logo-icon { font-size: 2rem; }
      .auth-tabs { margin-bottom: 16px; }
      .auth-field { margin-bottom: 10px; }
      .auth-field input { font-size: 16px; } /* prevent iOS zoom */
      .auth-submit { padding: 14px; font-size: 1rem; }
      .auth-social { padding: 12px 14px; }
      .auth-divider { margin: 12px 0; }
      .auth-skip { margin-top: 12px; }
    }
    /* user avatar in header */
    #user-btn {
      width:34px; height:34px; border-radius:50%; border:2px solid var(--brand);
      background:var(--brand); color:white; font-weight:900; font-size:.8rem;
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      flex-shrink:0; overflow:hidden; padding:0;
    }
    #user-btn:hover { opacity:.85; }
    #user-btn.hidden { display:none !important; }
    #user-btn img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
    /* user popover */
    #user-pop {
      position:fixed; top:calc(68px + var(--sat) + 8px); right:14px;
      background:white; border-radius:16px; padding:16px;
      box-shadow:0 16px 48px rgba(0,0,0,.18); border:1px solid #e5e7eb;
      z-index:5000; min-width:220px; display:none;
    }
    #user-pop.show { display:block; }

    /* settings popover */
    #settings-pop {
      position:fixed; top:calc(68px + var(--sat) + 8px); right:14px;
      background:white; border-radius:16px; padding:16px;
      box-shadow:0 16px 48px rgba(0,0,0,.18); border:1px solid #e5e7eb;
      z-index:5000; min-width:220px; display:none;
    }
    #settings-pop.show { display:block; }
    .settings-section-label {
      font-size:.68rem; font-weight:900; text-transform:uppercase;
      letter-spacing:.07em; color:var(--muted); margin-bottom:7px;
    }
    .settings-select {
      width:100%; padding:8px 10px; border-radius:10px;
      border:1px solid var(--line); background:var(--paper);
      color:var(--ink); font-size:.82rem; font-weight:700;
      cursor:pointer; -webkit-appearance:none; appearance:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat:no-repeat; background-position:right 10px center;
      padding-right:30px;
    }
    #settings-pop #zoom-controls {
      display:flex; align-items:center; gap:6px; width:100%;
    }
    #settings-pop .zoom-btn { flex:1; padding:7px 0; }
    #settings-pop .zoom-reset-btn { flex:1.4; }
    body.dark #settings-pop {
      background:#1e2433; border-color:#2d3447;
    }
    body.dark .settings-select {
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239ca3af' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    }
    .pop-name { font-weight:900; font-size:.9rem; color:var(--ink); }
    .pop-email { font-size:.73rem; color:var(--muted); margin-top:2px; margin-bottom:10px; }
    .pop-sync { font-size:.72rem; color:var(--ok); font-weight:700; margin-bottom:10px; }
    .pop-btn { width:100%; padding:9px 12px; border:none; border-radius:10px; background:#f9fafb; text-align:left; font-weight:800; font-size:.82rem; cursor:pointer; color:var(--ink); display:flex; align-items:center; gap:8px; margin-bottom:4px; }
    .pop-btn:hover { background:#f3f4f6; }
    .pop-btn.danger { color:var(--danger); }
    .pop-btn.danger:hover { background:#fef2f2; }
    /* local mode banner — fixed, doesn't affect layout */
    #local-banner {
      position:fixed; bottom:0; left:0; right:0;
      background:#fffbeb; border-top:1px solid #fde68a;
      padding:5px 16px; font-size:.72rem; font-weight:700; color:#92400e;
      align-items:center; justify-content:center; gap:8px;
      z-index:201; display:none; /* above bottom-nav (200) */
    }
    #local-banner.show { display:flex; }
    #local-banner a { color:var(--brand); font-weight:800; cursor:pointer; text-decoration:underline; }
  
    /* ── AUTOCOMPLETE DROPDOWN ──────────────────────────────────────── */
    #ac-dropdown {
      position: fixed;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.14);
      z-index: 99999;
      min-width: 220px;
      max-width: 360px;
      max-height: 220px;
      overflow-y: auto;
      display: none;
      padding: 4px 0;
      font-family: 'Courier Prime', 'Courier New', monospace;
      font-size: .88rem;
    }
    #ac-dropdown.visible { display: block; }
    .ac-item {
      padding: 6px 14px;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-radius: 4px;
      color: var(--ink);
    }
    .ac-item.ac-active, .ac-item:hover {
      background: var(--brand);
      color: #fff;
    }
    .ac-item-label {
      font-size: .68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--muted);
      padding: 6px 14px 2px;
      pointer-events: none;
    }
    body.dark #ac-dropdown {
      background: #1e2535;
      border-color: #2d3447;
    }
    body.dark .ac-item { color: #e5e7eb; }
    body.dark .ac-item-label { color: #6b7280; }

    /* ── DUAL DIALOGUE ──────────────────────────────────────────────── */
    .dual-dialogue-wrapper {
      display: flex;
      gap: 0;
      width: 100%;
      margin: 0;
    }
    .dual-dialogue-col {
      flex: 1;
      min-width: 0;
    }
    .dual-dialogue-col .line.character {
      margin-left: 0 !important;
      margin-right: 2% !important;
      text-align: center;
    }
    .dual-dialogue-col .line.dialogue {
      margin-left: 4% !important;
      margin-right: 4% !important;
    }
    .dual-dialogue-col .line.parenthetical {
      margin-left: 8% !important;
      margin-right: 8% !important;
    }
    .dual-dialogue-badge {
      font-size: .6rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: #7c3aed;
      background: #ede9fe;
      border: 1px solid #c4b5fd;
      padding: 1px 6px;
      border-radius: 4px;
      user-select: none;
      vertical-align: middle;
      margin-left: 6px;
    }
    body.dark .dual-dialogue-badge { background: rgba(124,58,237,.2); border-color: #7c3aed; color: #c4b5fd; }
    .dual-split-btn {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: .72rem; font-weight: 700; color: #7c3aed;
      background: #f5f3ff; border: 1px solid #c4b5fd;
      border-radius: 6px; padding: 3px 9px; cursor: pointer;
      transition: background .15s;
    }
    .dual-split-btn:hover { background: #ede9fe; }

    /* ── SCRIPT LOCKED MODE ─────────────────────────────────────────── */
    #lock-banner {
      display: none;
      position: sticky;
      top: 0;
      z-index: 900;
      background: linear-gradient(90deg, #fef3c7, #fde68a);
      border-bottom: 2px solid #f59e0b;
      color: #92400e;
      padding: 7px 16px;
      font-size: .82rem;
      font-weight: 700;
      text-align: center;
      gap: 10px;
      align-items: center;
      justify-content: center;
    }
    #lock-banner.visible {
      display: flex;
    }
    #lock-banner button {
      background: #f59e0b;
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 4px 12px;
      font-size: .78rem;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
    }
    #lock-banner button:hover { background: #d97706; }
    body.script-locked .page-content { pointer-events: none; user-select: none; }
    body.script-locked .page-content * { cursor: default; }
    #tools-lock-btn.locked { color: #f59e0b; font-weight: 800; }

    /* ══════════════════════════════════════════════════════════
       v13 NEW FEATURE STYLES
       ══════════════════════════════════════════════════════════ */

    /* ── Wardrobe Quick-Change Alert Dashboard ──────────────── */
    #ward-redflag-banner {
      display: none;
      margin: 0 0 14px;
      border-radius: 10px;
      border: 2px solid #fca5a5;
      background: linear-gradient(135deg, #fff1f2, #ffe4e6);
      overflow: hidden;
    }
    #ward-redflag-banner.visible { display: block; }
    .ward-rf-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px 8px;
      cursor: pointer;
      user-select: none;
    }
    .ward-rf-title {
      font-size: .9rem;
      font-weight: 800;
      color: #991b1b;
      flex: 1;
    }
    .ward-rf-badge {
      background: #dc2626;
      color: #fff;
      font-size: .68rem;
      font-weight: 900;
      padding: 2px 8px;
      border-radius: 999px;
      letter-spacing: .04em;
    }
    .ward-rf-body {
      padding: 0 14px 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .ward-rf-alert {
      background: #fff;
      border: 1px solid #fecaca;
      border-radius: 8px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .ward-rf-alert-char {
      font-weight: 800;
      font-size: .85rem;
      color: #dc2626;
    }
    .ward-rf-alert-detail {
      font-size: .78rem;
      color: var(--ink);
    }
    .ward-rf-alert-scenes {
      font-size: .73rem;
      color: var(--muted);
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 2px;
    }
    .ward-rf-scene-pill {
      background: #fee2e2;
      color: #9a3412;
      padding: 2px 8px;
      border-radius: 5px;
      font-weight: 700;
      font-size: .68rem;
    }
    .ward-rf-dismissed {
      font-size: .72rem;
      color: var(--muted);
      text-align: right;
      padding: 4px 14px 8px;
      cursor: pointer;
    }
    .ward-rf-dismissed:hover { color: var(--brand); }

    /* ── Props Set Cart Mode ────────────────────────────────── */
    #props-setcart-panel {
      display: none;
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      background: #f8fafc;
    }
    body.dark #props-setcart-panel { background: #131929; }
    #props-setcart-panel.visible { display: block; }
    .sc-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }
    .sc-header h3 {
      margin: 0;
      font-size: .95rem;
      font-weight: 800;
    }
    .sc-scene-sel {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 6px 10px;
      font-size: .83rem;
      background: var(--paper);
      color: var(--ink);
      max-width: 280px;
    }
    .sc-close-btn {
      margin-left: auto;
      background: none;
      border: none;
      font-size: .85rem;
      color: var(--muted);
      cursor: pointer;
    }
    .sc-close-btn:hover { color: var(--danger); }
    .sc-prop-row {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 12px 14px;
      margin-bottom: 10px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }
    .sc-prop-info { flex: 1; min-width: 0; }
    .sc-prop-name {
      font-size: .88rem;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .sc-prop-type {
      font-size: .7rem;
      color: var(--muted);
    }
    .sc-checkboxes {
      display: flex;
      flex-direction: column;
      gap: 5px;
      flex-shrink: 0;
    }
    .sc-check-label {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: .78rem;
      font-weight: 600;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
    }
    .sc-check-label input[type=checkbox] {
      width: 15px;
      height: 15px;
      accent-color: var(--brand);
      cursor: pointer;
    }
    .sc-check-label.checked { color: #16a34a; }
    .sc-check-label.checked-warn { color: #d97706; }
    .sc-timestamp {
      font-size: .65rem;
      color: var(--muted);
      margin-left: auto;
    }
    .sc-prop-row.all-done {
      border-color: #bbf7d0;
      background: #f0fdf4;
    }
    body.dark .sc-prop-row.all-done {
      border-color: rgba(22,163,74,.3);
      background: rgba(22,163,74,.06);
    }
    .sc-empty {
      text-align: center;
      color: var(--muted);
      padding: 48px 20px;
      font-size: .9rem;
    }
    #props-setcart-btn.active {
      background: #0284c7;
      color: #fff;
      border-color: transparent;
    }

    /* ── Shot-to-Cost Storyboard Integration ────────────────── */
    .sb-prod-tags {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      padding: 0 10px 8px;
    }
    .sb-prod-tag {
      font-size: .65rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
      padding: 2px 8px;
      border-radius: 999px;
      cursor: pointer;
      user-select: none;
      transition: opacity .15s;
      border: 1.5px solid transparent;
    }
    .sb-prod-tag.active { opacity: 1; }
    .sb-prod-tag.inactive { opacity: .35; border-style: dashed; }
    .sb-prod-tag.vfx     { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
    .sb-prod-tag.stunt   { background: #fff7ed; color: #c2410c; border-color: #fdba74; }
    .sb-prod-tag.crane   { background: #ecfdf5; color: #065f46; border-color: #6ee7b7; }
    .sb-prod-tag.sfx     { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
    .sb-prod-tag.aerial  { background: #e0f2fe; color: #075985; border-color: #7dd3fc; }
    .sb-prod-tag.night   { background: #1e1b4b; color: #a5b4fc; border-color: #4338ca; }
    .sb-cost-flag {
      display: none;
      background: linear-gradient(90deg, #fef3c7, #fff7ed);
      border-top: 1px solid #fed7aa;
      padding: 6px 10px;
      font-size: .72rem;
      font-weight: 700;
      color: #c2410c;
      align-items: center;
      gap: 6px;
    }
    .sb-cost-flag.visible { display: flex; }
    body.dark .sb-cost-flag {
      background: rgba(194,65,12,.12);
      border-color: rgba(194,65,12,.3);
      color: #fdba74;
    }
    .sb-cost-flag a {
      color: var(--brand);
      font-size: .68rem;
      cursor: pointer;
      text-decoration: none;
      margin-left: auto;
    }
    .sb-cost-flag a:hover { text-decoration: underline; }
    /* High-cost scene indicator on storyboard scene select */
    .hcs-badge {
      font-size: .6rem;
      font-weight: 800;
      padding: 1px 5px;
      border-radius: 4px;
      background: #fef3c7;
      color: #92400e;
      border: 1px solid #fcd34d;
      margin-left: 4px;
      vertical-align: middle;
    }

    /* ═══════════════════════════════════════════════════════════
       v14 FEATURE STYLES
       ═══════════════════════════════════════════════════════════ */

    /* ── 1. Production Heatmap ──────────────────────────────── */
    /* display/layout handled via inline style; hidden/shown by setView hidden class */
    #heatmap-app {
      background: var(--paper);
    }
    .hm-toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      border-bottom: 1px solid var(--line);
      flex-shrink: 0;
      flex-wrap: wrap;
      background: var(--paper);
    }
    .hm-title { font-size: .95rem; font-weight: 800; }
    .hm-legend {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .72rem;
      font-weight: 700;
      margin-left: auto;
    }
    .hm-legend-dot {
      width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;
    }
    .hm-body {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
    }
    .hm-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 14px;
    }
    .hm-day-card {
      border-radius: 12px;
      border: 2px solid transparent;
      padding: 14px 16px;
      cursor: pointer;
      transition: transform .15s, box-shadow .15s;
      position: relative;
      overflow: hidden;
    }
    .hm-day-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.14); }
    .hm-day-name {
      font-size: .88rem;
      font-weight: 800;
      margin-bottom: 6px;
    }
    .hm-day-score-bar {
      height: 5px;
      border-radius: 3px;
      background: rgba(0,0,0,.12);
      margin-bottom: 10px;
      overflow: hidden;
    }
    .hm-day-score-fill { height: 100%; border-radius: 3px; transition: width .4s; }
    .hm-day-stats {
      display: flex;
      flex-direction: column;
      gap: 3px;
      font-size: .72rem;
    }
    .hm-stat-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .hm-stat-val { font-weight: 700; min-width: 22px; text-align: right; }
    .hm-risk-label {
      position: absolute;
      top: 10px; right: 10px;
      font-size: .6rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .07em;
      padding: 2px 7px;
      border-radius: 999px;
      background: rgba(0,0,0,.13);
    }
    .hm-detail-panel {
      display: none;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 18px 20px;
      margin-top: 20px;
    }
    .hm-detail-panel.open { display: block; }
    .hm-detail-title {
      font-size: .95rem;
      font-weight: 800;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .hm-factor-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }
    .hm-factor {
      background: #f9fafb;
      border-radius: 8px;
      padding: 10px 12px;
      font-size: .78rem;
    }
    body.dark .hm-factor { background: rgba(255,255,255,.04); }
    .hm-factor-label { color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
    .hm-factor-val { font-weight: 800; font-size: 1.05rem; }
    .hm-flag-list { display: flex; flex-wrap: wrap; gap: 6px; }
    .hm-flag {
      font-size: .72rem;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 6px;
      background: #fef3c7;
      color: #92400e;
      border: 1px solid #fcd34d;
    }
    .hm-flag.red { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
    .hm-flag.purple { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
    .hm-flag.blue { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
    .hm-empty {
      text-align: center;
      color: var(--muted);
      padding: 60px 20px;
      font-size: .9rem;
    }

    /* ── 2. Living Continuity Engine ────────────────────────── */
    #continuity-alert-banner {
      display: none;
      position: fixed;
      top: calc(var(--touch-target, 44px) + 28px); /* clears header + tab bar */
      left: 0;
      right: 0;
      z-index: 150; /* above nav (z:100), below modals/overlays */
      background: linear-gradient(90deg, #fff7ed, #fef3c7);
      border-bottom: 2px solid #f59e0b;
      box-shadow: 0 4px 12px rgba(245,158,11,.18);
      padding: 8px 16px;
      font-size: .82rem;
      font-weight: 700;
      color: #92400e;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      flex-wrap: wrap;
    }
    #continuity-alert-banner.visible { display: flex; }
    /* Push writer content down when banner is visible so it isn't obscured */
    body.cont-banner-open #writer-app { padding-top: 40px; }
    .cont-alert-count {
      background: #f59e0b;
      color: #fff;
      font-size: .68rem;
      font-weight: 900;
      padding: 2px 8px;
      border-radius: 999px;
    }
    .cont-alert-dismiss {
      margin-left: auto;
      font-size: .72rem;
      color: #b45309;
      cursor: pointer;
      text-decoration: underline;
    }

    #continuity-modal .cont-alert-item {
      border: 1px solid #fed7aa;
      border-radius: 8px;
      padding: 12px 14px;
      margin-bottom: 10px;
      background: #fffbeb;
    }
    body.dark #continuity-modal .cont-alert-item {
      background: rgba(245,158,11,.07);
      border-color: rgba(245,158,11,.25);
    }
    .cont-alert-head {
      font-weight: 800;
      font-size: .85rem;
      color: #d97706;
      margin-bottom: 5px;
    }
    .cont-scene-pill {
      display: inline-block;
      background: #fef3c7;
      color: #92400e;
      font-size: .68rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 5px;
      border: 1px solid #fcd34d;
    }

    /* ── 3. Day-Bundle PDF ──────────────────────────────────── */
    .cs-bundle-btn {
      background: linear-gradient(135deg, #7c3aed, #4f46e5);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 7px 14px;
      font-size: .82rem;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: opacity .15s;
    }
    .cs-bundle-btn:hover { opacity: .88; }
    .cs-bundle-btn:disabled { opacity: .5; cursor: not-allowed; }

    /* ── 4. Shadow Budget Mode ──────────────────────────────── */
    #shadow-mode-bar {
      display: none;
      position: sticky;
      top: 0;
      z-index: 500;
      background: linear-gradient(90deg, #1e1b4b, #312e81);
      color: #e0e7ff;
      padding: 9px 16px;
      font-size: .83rem;
      font-weight: 700;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }
    #shadow-mode-bar.active { display: flex; }
    .shadow-label {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: .88rem;
      font-weight: 800;
    }
    .shadow-diff {
      font-size: .83rem;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 6px;
    }
    .shadow-diff.saving { background: rgba(22,163,74,.25); color: #86efac; }
    .shadow-diff.costing { background: rgba(220,38,38,.25); color: #fca5a5; }
    .shadow-diff.neutral { background: rgba(255,255,255,.1); color: #e0e7ff; }
    .shadow-merge-btn {
      background: #4f46e5;
      color: #fff;
      border: 1px solid #818cf8;
      border-radius: 7px;
      padding: 5px 14px;
      font-size: .78rem;
      font-weight: 800;
      cursor: pointer;
      font-family: inherit;
      transition: background .15s;
    }
    .shadow-merge-btn:hover { background: #4338ca; }
    .shadow-discard-btn {
      background: rgba(255,255,255,.08);
      color: #c7d2fe;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 7px;
      padding: 5px 14px;
      font-size: .78rem;
      font-weight: 800;
      cursor: pointer;
      font-family: inherit;
      transition: background .15s;
      margin-left: auto;
    }
    .shadow-discard-btn:hover { background: rgba(220,38,38,.2); color: #fca5a5; border-color: rgba(220,38,38,.3); }
    body.shadow-mode .strip-column { opacity: .75; }
    body.shadow-mode .strip-column:hover { opacity: 1; }
    body.shadow-mode #stripboard-scroll { border: 3px solid #4f46e5; border-radius: 8px; }
    body.shadow-mode .strip-header { background: linear-gradient(180deg, #312e81, #1e1b4b) !important; color: #e0e7ff !important; }

    /* ═══════════════════════════════════════════════════════════════
       MOBILE UX/UI OPTIMIZATION PASS
       Surgical improvements for readability, touch targets, and
       layout stability on phones (≤ 760px, ≤ 480px).
       All rules are additive — nothing breaks desktop.
       ═══════════════════════════════════════════════════════════════ */

    /* ── 1. PREVENT iOS INPUT ZOOM (font-size < 16px triggers auto-zoom) ── */
    @media (max-width: 760px) {
      input:not([type='range']):not([type='checkbox']):not([type='radio']),
      textarea,
      select {
        font-size: 16px !important;
      }
      /* Re-apply correct sizes for display-only / chip elements that are not editable */
      .format-chip, .btab-label, .tab-label { font-size: inherit !important; }
    }

    /* ── 2. HEADER TOUCH TARGETS — bump all header buttons to ≥ 40px ── */
    @media (max-width: 760px) {
      .hdr-icon-cluster .btn.ghost {
        min-height: 40px !important;
        min-width: 38px !important;
        padding: 8px 9px !important;
      }
      #settings-btn-wrap {
        gap: 0;
      }
      #mobile-menu-btn {
        min-height: 42px !important;
        min-width: 42px !important;
        font-size: 1.4rem !important;
      }
      /* Tools btn touch target */
      #tools-btn {
        min-height: 40px !important;
        padding: 8px 10px !important;
      }
    }

    /* ── 3. BOTTOM NAV — improved readability & touch comfort ── */
    @media (max-width: 760px) {
      #bottom-nav {
        /* Slightly taller nav bar */
        padding-top: 4px;
        padding-bottom: calc(4px + var(--sab));
      }
      .bottom-tab {
        min-width: 62px;
        max-width: 80px;
        padding: 5px 7px;
        gap: 3px;
      }
      .btab-icon {
        font-size: 1.2rem;
        width: 36px;
        height: 30px;
      }
      .btab-label {
        font-size: .65rem;   /* up from .6rem — more legible */
        letter-spacing: .01em;
      }
      /* Active tab: stronger highlight for visibility */
      .bottom-tab.active .btab-icon {
        background: rgba(37,99,235,0.18);
        box-shadow: 0 0 0 2px rgba(37,99,235,0.30);
      }
    }

    /* ── 4. FILTER BAR — larger touch targets for search/select ── */
    @media (max-width: 760px) {
      .filter-bar-search,
      .filter-bar-select {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 16px !important; /* iOS zoom prevention */
      }
      .filter-bar {
        padding: 10px 12px;
        gap: 10px;
      }
      .filter-bar-search {
        max-width: 100%;
        flex: 1 1 100%;
      }
      .filter-bar-select {
        flex: 1 1 140px;
        max-width: 100%;
      }
    }

    /* ── 5. MODULE TOOLBAR — prevent content from being squished ── */
    @media (max-width: 760px) {
      .module-toolbar {
        padding: 10px 12px;
        gap: 6px;
        min-height: 52px;
      }
      .module-toolbar-title {
        font-size: .85rem;
        flex: 1 1 auto;
        min-width: 80px;
      }
      .module-toolbar-actions {
        gap: 5px;
        flex-wrap: wrap;
      }
      /* Mini buttons inside toolbars: easier to tap */
      .module-toolbar .btn.mini,
      .module-toolbar .btn.ghost {
        min-height: 38px !important;
        padding: 7px 10px !important;
        font-size: .8rem !important;
      }
    }

    /* ── 6. APP PAD — comfortable horizontal breathing room ── */
    @media (max-width: 760px) {
      .app-pad {
        padding: 14px !important;
        padding-bottom: calc(14px + var(--sab) + 66px) !important;
      }
      .card {
        padding: 14px !important;
        border-radius: 12px;
      }
    }

    /* ── 7. ART DEPT BUDGET ROW — stack on mobile (was 6-col grid) ── */
    @media (max-width: 760px) {
      .artdept-budget-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px 12px;
        border-radius: 8px;
        border: 1px solid var(--line);
        margin-bottom: 8px;
        background: var(--paper);
      }
      .artdept-budget-row > *:first-child {
        grid-column: 1 / -1; /* description spans full width */
      }
      body.dark .artdept-budget-row {
        border-color: #2a2a3a;
      }
    }

    /* ── 8. AD TREATMENT DELIVERABLE ROW — stack on mobile ── */
    @media (max-width: 760px) {
      .adt-deliv-row {
        flex-wrap: wrap !important;
        gap: 10px 12px !important;
        padding: 12px !important;
        border: 1px solid var(--line) !important;
        border-radius: 10px !important;
        margin-bottom: 8px !important;
        background: var(--paper);
      }
      .adt-deliv-row > div[style*="flex:0 0"] {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 120px !important;
      }
      .adt-deliv-row > div[style*="flex:1"] {
        flex: 1 1 100% !important; /* Deliverable name: full width */
      }
      body.dark .adt-deliv-row {
        border-color: #2d3447 !important;
      }
    }

    /* ── 9. CARD HEADER — prevent actions from squishing title ── */
    @media (max-width: 760px) {
      .card-header {
        gap: 10px;
        margin-bottom: 14px;
      }
      .card-header-title {
        flex: 1 1 160px;
      }
      .card-header-actions {
        flex-wrap: wrap;
        gap: 5px;
      }
    }

    /* ── 10. SCHEDULE CONFIG BAR — single column on small screens ── */
    @media (max-width: 480px) {
      #schedule-config-bar {
        grid-template-columns: 1fr;
      }
      .sched-config-field:last-child {
        grid-column: auto;
      }
    }

    /* ── 11. CONTACTS GRID — ensure single column on small phones ── */
    @media (max-width: 420px) {
      .contacts-grid-inner {
        grid-template-columns: 1fr;
      }
    }

    /* ── 12. STORYBOARD GRID — single column on small screens ── */
    @media (max-width: 480px) {
      .sb-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }
    }

    /* ── 13. PROJECT HUB FOLDERS — better on very small screens ── */
    @media (max-width: 400px) {
      #hub-folder-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        grid-auto-rows: auto;
        gap: 14px;
      }
    }

    /* ── 14. SCRIPT PAGE SHEET — more comfortable on small screens ── */
    @media (max-width: 400px) {
      .script-page-sheet {
        padding: 20px 14px 60px !important;
        font-size: 12.5px !important;
      }
      .line.character     { margin-left: 26% !important; margin-right: 3% !important; }
      .line.parenthetical { margin-left: 18% !important; margin-right: 12% !important; }
    }

    /* ── 15. MODAL BOTTOM-SHEET — better on narrow screens ── */
    @media (max-width: 480px) {
      .modal-backdrop {
        padding: 0;
        align-items: flex-end;
      }
      .modal {
        border-radius: 20px 20px 0 0;
        width: 100%;
        max-height: 90vh;
        animation: _cs_modalSlideUp .25s cubic-bezier(0.34,1.1,0.64,1);
      }
      .modal-handle {
        display: block; /* show drag handle on mobile */
      }
    }

    /* ── 16. SCHED DAY HEADER — prevent stat labels from wrapping oddly ── */
    @media (max-width: 480px) {
      .sched-day-header-meta {
        gap: 6px 14px;
      }
      .sched-day-stat {
        font-size: .7rem;
      }
    }

    /* ── 17. DOOD TABLE — horizontal scroll wrapper ── */
    @media (max-width: 760px) {
      #dood-app .app-pad,
      #dood-app > .app-pad {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      .dood-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 14px 10px;
      }
    }

    /* ── 18. BOTTOM NAV scroll hint — subtle fade edge (both sides) ── */
    @media (max-width: 760px) {
      .bottom-nav-inner::before {
        content: '';
        position: sticky;
        left: 0;
        top: 0;
        width: 28px;
        height: 100%;
        background: linear-gradient(to left, transparent, rgba(255,255,255,.95));
        flex-shrink: 0;
        pointer-events: none;
        z-index: 1;
      }
      body.dark .bottom-nav-inner::before {
        background: linear-gradient(to left, transparent, rgba(20,24,38,.97));
      }
      .bottom-nav-inner::after {
        content: '';
        position: sticky;
        right: 0;
        top: 0;
        width: 36px;
        height: 100%;
        background: linear-gradient(to right, transparent, rgba(255,255,255,.95));
        flex-shrink: 0;
        pointer-events: none;
      }
      body.dark .bottom-nav-inner::after {
        background: linear-gradient(to right, transparent, rgba(20,24,38,.97));
      }
    }

    /* ── 19. VIEW CONTAINER — increased bottom padding to clear bottom nav ── */
    @media (max-width: 760px) {
      .view-container {
        padding-bottom: calc(66px + var(--sab)) !important;
      }
    }

    /* ── 20. GENERAL TEXT: ensure readability minimums ── */
    @media (max-width: 760px) {
      /* Data content rows */
      .sched-scene-slug  { font-size: .85rem; }
      .sched-scene-summary { font-size: .78rem; }
      .contact-card-name { font-size: .95rem; }
      .contact-card-role { font-size: .78rem; }
      /* Shot list & reports */
      .module-toolbar-title { font-size: .88rem; }
      /* Ensure hub folder labels are readable */
      .folder-label { font-size: .88rem; }
    }

    /* ═══════════════════════════════════════════════════════════════
       MOBILE PASS 2 — Fix script clipping, nav icon size, scroll jump
       ═══════════════════════════════════════════════════════════════ */

    /* ── A. BOTTOM NAV: reduce icon + label size (was too large) ── */
    @media (max-width: 760px) {
      .btab-icon {
        font-size: 1rem !important;   /* down from 1.2rem */
        width: 30px !important;
        height: 26px !important;
        border-radius: 8px !important;
      }
      .btab-label {
        font-size: .58rem !important; /* tighter label */
        letter-spacing: 0 !important;
      }
      .bottom-tab {
        min-width: 52px !important;
        max-width: 66px !important;
        padding: 4px 5px !important;
        gap: 2px !important;
      }
    }

    /* ── B. SCRIPT PAGE: stop horizontal overflow / clipping ── */
    @media (max-width: 760px) {
      /* Constrain the editor frame so pages cannot exceed viewport */
      .editor-frame {
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        /* Extra scroll-padding so caret never hides under format bar or nav */
        scroll-padding-bottom: 160px !important;
        scroll-padding-top: 12px !important;
      }

      /* Pages container: full width, no side overflow */
      #pages-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        align-items: stretch !important;
      }

      /* Zoom wrapper: clamp to viewport */
      #pages-zoom-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
      }

      /* Script page sheet: full width, comfortable side padding */
      .script-page-sheet {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;       /* edge-to-edge */
        margin: 0 !important;
        padding: 20px 16px 60px !important;
        overflow-x: hidden !important;
      }

      /* Page content: full width, no overflow */
      .page-content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
      }

      /* Screenplay element margins — rebalanced for narrow screens */
      .line.scene-heading { margin-left: 0 !important; margin-right: 0 !important; }
      .line.action        { margin-left: 0 !important; margin-right: 0 !important; }
      .line.character     { margin-left: 28% !important; margin-right: 4% !important; }
      .line.dialogue      { margin-left: 12% !important; margin-right: 8% !important; }
      .line.parenthetical { margin-left: 20% !important; margin-right: 12% !important; }
      .line.transition    { margin-left: 35% !important; }
      /* New block types on mobile */
      .line.shot          { margin-left: 0 !important; margin-right: 0 !important; }
      .line.supers        { margin-left: 5% !important; margin-right: 5% !important; }
      .line.centered      { margin-left: 5% !important; margin-right: 5% !important; }
      .line.lyrics        { margin-left: 10% !important; margin-right: 8% !important; }
      .line.writer-note   { margin-left: 0 !important; margin-right: 0 !important; }

      /* Page markers: full bleed */
      .page-marker {
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
    }

    /* ── C. SCROLL-ANCHOR: prevent layout jump on typing/delete ── */
    @media (max-width: 760px) {
      /* overflow-anchor:none on the frame lets us manually manage position */
      .editor-frame {
        overflow-anchor: none !important;
      }
      /* Anchor scroll to the active page's content area */
      .script-page-sheet.active-page .page-content {
        overflow-anchor: auto !important;
      }
    }

    /* ═══════════════════════════════════════════════════════════════
       MOBILE PASS 3 — Wardrobe / Props / Art Dept / Cine / Ad Treatment
       ═══════════════════════════════════════════════════════════════ */

    /* ── WARDROBE v4: mobile layout (replaces old wds-corkboard/wdb-card rules) ── */
    @media (max-width: 760px) {
      /* v4 card grid */
      .wdb-card-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px 12px !important; }
      .wdb-cork { padding: 14px 10px 36px !important; }
      /* No heavy rotation on touch */
      .wdb-char-card { --card-rot: 0deg !important; }
      .wdb-char-card:hover { transform: translateY(-3px) scale(1.02) !important; }
      /* Stacked editor */
      .wde-body { flex-direction: column !important; overflow-y: auto !important; overflow-x: hidden !important; }
      .wde-col { width: 100% !important; min-width: 100% !important; border-right: none !important; border-bottom: 1px solid var(--wdb-line) !important; }
      .wde-col-figure { max-height: 280px !important; flex-direction: row !important; flex-wrap: wrap !important; }
      .wde-croquis-stage { min-width: 100px !important; max-width: 140px !important; flex-shrink: 0 !important; }
      .wde-figure-selectors { flex: 1 !important; min-width: 100px !important; }
      .wde-col-cont { max-height: 360px !important; }
      .wde-col-looks { overflow: visible !important; }
      .wde-rail-wrap { max-height: 220px !important; }
    }

    /* ── PROPS: stack list above detail on mobile ── */
    @media (max-width: 760px) {
      #props-body { flex-direction: column !important; }
      #props-list-panel {
        width: 100% !important; min-width: unset !important;
        max-height: 220px !important;
        border-right: none !important; border-bottom: 1px solid #e5e7eb !important;
        flex-shrink: 0 !important;
      }
      #props-detail-panel { padding: 14px !important; }
    }

    /* ── ART DEPT: stack list above detail; scrollable subtabs ── */
    @media (max-width: 760px) {
      #artdept-concept { flex-direction: column !important; }
      #artdept-sets-list {
        width: 100% !important; min-width: unset !important;
        max-height: 200px !important;
        border-right: none !important; border-bottom: 1px solid #e5e7eb !important;
        flex-shrink: 0 !important;
      }
      #artdept-concept-detail { padding: 14px !important; }
      #artdept-subtabs { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch !important; }
      #artdept-subtabs button { white-space: nowrap !important; flex-shrink: 0 !important; font-size: .72rem !important; }
      #artdept-mb-board { grid-template-columns: repeat(2, 1fr) !important; }
    }

    /* ── CINE: stack scene list above detail; scrollable subtabs ── */
    @media (max-width: 760px) {
      #cine-body { flex-direction: column !important; }
      #cine-scene-list {
        width: 100% !important; min-width: unset !important; max-width: unset !important;
        max-height: 160px !important;
        border-right: none !important; border-bottom: 1px solid var(--line) !important;
        flex-shrink: 0 !important;
      }
      #cine-subtabs { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch !important; }
      .cine-stab { white-space: nowrap !important; flex-shrink: 0 !important; font-size: .72rem !important; padding: 5px 10px !important; }
      .cine-shot-table { font-size: .72rem !important; }
      .cine-shot-table th:nth-child(5), .cine-shot-table td:nth-child(5) { display: none !important; }
      /* Gaffer Sheet: handled in detail below */
      #cine-gaffer-toolbar { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; gap: 4px !important; padding: 6px 10px !important; }
    }

    /* ── GAFFER SHEET: stack diagram/panel vertically; fixture row scrollable ── */
    @media (max-width: 760px) {
      /* Fixture add buttons: single scrollable row, no wrapping */
      #cine-gaffer-toolbar {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 4px !important;
        padding: 6px 10px !important;
        align-items: center !important;
      }
      #cine-gaffer-toolbar::-webkit-scrollbar { display: none; }
      #cine-gaffer-scene-name { display: none !important; } /* save space */
      .cine-fix-add-btn {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-size: .7rem !important;
        padding: 4px 8px !important;
        min-height: 30px !important;
      }
      /* Main gaffer body: stack diagram ABOVE notes panel */
      #cine-gaffer-body {
        flex-direction: column !important;
      }
      /* Diagram canvas: fixed height so it's actually usable */
      #cine-diagram-wrap {
        height: 52vw !important;
        min-height: 200px !important;
        max-height: 320px !important;
        flex-shrink: 0 !important;
        border-bottom: 1px solid var(--line) !important;
      }
      /* Right panel: full width below diagram, scrollable */
      #cine-gaffer-right {
        width: 100% !important;
        min-width: unset !important;
        border-left: none !important;
        border-top: 1px solid var(--line) !important;
        flex: 1 !important;
        overflow-y: auto !important;
      }
      /* Fixture properties: 2-col inputs side by side */
      #cine-fixture-props { padding: 8px 10px !important; }
      #cine-fixture-props > div > div[style*="display:flex"] { gap: 6px !important; }
      /* Gaffer notes textarea: shorter on mobile */
      #cine-gaffer-notes { rows: 3; min-height: 60px !important; max-height: 100px !important; resize: none !important; }
      /* Equipment list */
      #cine-equipment-list { padding: 8px 10px !important; }
    }

    /* ── AD TREATMENT: single-column grids; scrollable subnav ── */
    @media (max-width: 760px) {
      #adtv-treatment div[style*="grid-template-columns:1fr 1fr"],
      #adtv-treatment div[style*="grid-template-columns: 1fr 1fr"],
      #adtv-treatment div[style*="grid-template-columns:1fr 1fr 1fr"],
      #adtv-treatment div[style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }
      .adt-subnav { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch !important; }
      .adt-snbtn { white-space: nowrap !important; flex-shrink: 0 !important; font-size: .72rem !important; padding: 5px 10px !important; }
      .adt-shot-row, .adt-deliv-row { flex-wrap: wrap !important; }
      .adt-shot-row > div, .adt-deliv-row > div { flex: 1 1 100% !important; min-width: unset !important; }
    }