:root{
  /* ── Brand (Blue) ─────────────────────────────────────────── */
  --brand:          #2563eb;   /* primary brand blue                */
  --brand-hover:    #1d4ed8;   /* hover                             */
  --brand-active:   #1e40af;   /* pressed / active                  */
  --brand-deep:     #0B63CE;   /* deep blue — spinner, progress bar */
  --brand-light:    #eff6ff;   /* tint background                   */
  --brand-border:   #bfdbfe;   /* outline / border accent           */
  --brand-glow:     rgba(37,99,235,0.18); /* focus ring glow        */

  /* ── Surfaces ─────────────────────────────────────────────── */
  --bg:             #f1f2f5;   /* app canvas / page background      */
  --surface:        #ffffff;   /* cards, panels, modals             */
  --surface-raised: #f8fafc;   /* subtle inset / secondary areas    */

  /* ── Borders ──────────────────────────────────────────────── */
  --border:         #e3e6eb;   /* default                           */
  --border-subtle:  #cbd5e1;   /* light dividers                    */
  --border-strong:  #94a3b8;   /* emphasis                          */

  /* ── Ink / Typography ─────────────────────────────────────── */
  --ink:            #1c1f26;   /* headings / active elements        */
  --ink-label:      #4a505c;   /* field labels (.lb)                */
  --ink-muted:      #5b6270;   /* meta / subtitles                  */
  --ink-subtle:     #8a909c;   /* inactive icons / tags             */
  --ink-placeholder:#8a909c;   /* input placeholders                */

  /* ── Semantic ─────────────────────────────────────────────── */
  --danger:         #ef4444;
  --danger-hover:   #dc2626;
  --danger-light:   #fef2f2;
  --danger-border:  #fecaca;
  --success:        #059669;
  --success-hover:  #047857;
  --success-light:  #ecfdf5;
  --warning:        #d97706;
  --warning-light:  #fffbeb;

  /* ── Legacy aliases (backward compat — do not remove) ─────── */
  --primary-color:    var(--brand);
  --primary-hover:    var(--brand-hover);
  --primary-active:   var(--brand-active);
  --primary-light:    var(--brand-light);
  --primary-border:   var(--brand-border);
  --selection-color:  var(--brand-hover);
  --selection-hover:  var(--brand-active);
  --selection-light:  var(--brand-light);
  --selection-border: var(--brand-border);
  --selection-glow:   var(--brand-glow);
  --panel-bg:         var(--surface);
  --panel-subtle-bg:  var(--surface-raised);
  --bg-color:         var(--bg);
  --canvas-bg:        var(--bg);
  --toolbar-bg:       var(--surface);
  --border-color:     var(--border);
  --text-color:       var(--ink);
  --text-label:       var(--ink-label);
  --text-muted:       var(--ink-muted);
  --text-subtle:      var(--ink-subtle);
  --text-placeholder: var(--ink-placeholder);
  --danger-color:     var(--danger);
  --success-color:    var(--success);
  --warning-color:    var(--warning);
  --sat:env(safe-area-inset-top,0px);
  --sar:env(safe-area-inset-right,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --height-xs:24px;
  --height-sm:28px;
  --height-md:32px;
  --height-lg:36px;
  --height-xl:44px;
  --header-toolbar-height:60px;
  --panel-header-height:44px;
  --statusbar-height:38px;
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-full:9999px;
  --font-xs:11px;
  --font-sm:12px;
  --font-base:13px;
  --font-md:14px;
  --font-lg:16px;
  --font-xl:20px;
  --icon-xs:12px;
  --icon-sm:14px;
  --icon-md:16px;
  --icon-lg:20px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --ease-spring:cubic-bezier(0.16,1,0.3,1);
  --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
  --ease-smooth:cubic-bezier(0.4,0,0.2,1);
  --anim-fast:0.15s var(--ease-spring);
  --anim-norm:0.22s var(--ease-spring);
  --anim-slow:0.35s var(--ease-spring);

  /* ── Typography ────────────────────────────────────────────── */
  --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale — UI tiers (use these, not raw px) */
  --type-label:  12px;   /* section labels, chips, helper text  → 600  */
  --type-ui:     13px;   /* inputs, rows, buttons, inspector    → 400–600 */
  --type-title:  14px;   /* panel titles, inspector field name  → 700  */
  --type-heading:16px;   /* sub-headings                        → 700  */
  --type-hero:   28px;   /* start / home headings               → 700  */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;height:100dvh}
body{font-family:var(--font-ui);-webkit-font-smoothing:antialiased;font-feature-settings:"cv02","cv03","cv04","cv11";color:var(--text-color);background:var(--canvas-bg);min-height:100vh;min-height:100dvh;height:100vh;height:100dvh;width:100%;overflow:hidden;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none}
input,textarea,select{-webkit-user-select:auto;user-select:auto}
label:not(.nav-cta):not(.btn-primary):not(.btn-secondary):not(.btn-inverse):not(.btn){display:block;margin-bottom:var(--space-1);font-weight:600;font-size:var(--font-xs);color:var(--text-muted)}
input[type="text"],input[type="number"],select,textarea{width:100%;height:var(--height-md);padding:0 10px;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:var(--font-base);color:var(--text-color);background:#f8fafc;font-family:inherit;box-sizing:border-box;transition:border-color var(--anim-fast),background-color var(--anim-fast),box-shadow var(--anim-fast),transform var(--anim-fast)}
textarea{height:auto;padding:8px 10px}
input[type="text"]:focus,input[type="number"]:focus,select:not(.video-caption-select):focus,textarea:focus{outline:none;border-color:var(--primary-color);background:#ffffff;box-shadow:0 0 0 3px rgba(37,99,235,0.15)}
button{cursor:pointer;border:none;font-family:inherit;font-size:var(--font-sm);font-weight:600;transition:transform var(--anim-fast),background var(--anim-fast),box-shadow var(--anim-fast),color var(--anim-fast),border-color var(--anim-fast);will-change:transform;touch-action:manipulation}
button:active{transform:scale(0.965)}
.btn-xs{height:var(--height-xs);padding:0 8px;font-size:var(--font-xs);border-radius:var(--radius-xs);display:inline-flex;align-items:center;justify-content:center;gap:4px}
.btn-sm{height:var(--height-sm);padding:0 10px;font-size:var(--font-xs);border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;gap:5px}
.btn-md{height:var(--height-md);padding:0 14px;font-size:var(--font-sm);border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn-lg{height:var(--height-lg);padding:0 18px;font-size:var(--font-md);border-radius:var(--radius-md);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-primary{background:var(--primary-color);color:#ffffff;border:1px solid var(--primary-hover);box-shadow:0 1px 3px rgba(37,99,235,0.24);font-weight:600}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-active);box-shadow:0 3px 10px rgba(37,99,235,0.32);transform:translateY(-1px)}
.btn-primary:active{transform:scale(0.965);box-shadow:0 1px 2px rgba(37,99,235,0.2)}
.btn-secondary{background:#ffffff;color:#4a505c;border:1px solid var(--border-subtle);box-shadow:0 1px 2px rgba(0,0,0,0.04);font-weight:500}
.btn-secondary:hover{background:#f8fafc;border-color:var(--border-strong);color:#1c1f26;transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,0.06)}
.btn-secondary:active{transform:scale(0.965);box-shadow:0 0 1px rgba(0,0,0,0.04)}
.btn-success{background:var(--success-color);color:#ffffff;border:1px solid var(--success-hover);box-shadow:0 1px 3px rgba(5,150,105,0.24)}
.btn-success:hover{background:var(--success-hover);transform:translateY(-1px);box-shadow:0 3px 10px rgba(5,150,105,0.3)}
.btn-danger{background:var(--danger-color);color:#ffffff;border:1px solid var(--danger-hover);box-shadow:0 1px 3px rgba(239,68,68,0.24)}
.btn-danger:hover{background:var(--danger-hover);transform:translateY(-1px);box-shadow:0 3px 10px rgba(239,68,68,0.3)}
.btn-block{width:100%;display:flex}
*{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:var(--radius-full);transition:background var(--anim-fast)}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}
hr{border:none;border-top:1px solid var(--border-color);margin:var(--space-4) 0}
input:focus-visible,select:not(.video-caption-select):focus-visible,textarea:focus-visible,button:focus-visible,[tabindex]:focus-visible,.field-overlay:focus-visible{outline:2px solid var(--brand-hover) !important;outline-offset:2px !important}
::placeholder{color:var(--text-placeholder,#8a909c) !important;opacity:1 !important}
i[data-lucide]{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;min-width:14px;min-height:14px;vertical-align:middle;box-sizing:border-box}
svg[data-lucide],.lucide{display:inline-block;vertical-align:middle;flex-shrink:0}
@keyframes sharedAxisHomeOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.98)}}
@keyframes sharedAxisEditorIn{0%{opacity:0;transform:scale(1.02)}100%{opacity:1;transform:scale(1)}}
@keyframes sharedAxisEditorOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.02)}}
@keyframes sharedAxisHomeIn{0%{opacity:0;transform:scale(0.98)}100%{opacity:1;transform:scale(1)}}
.screen-transition-home-out{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100vw !important;width:100dvw !important;height:100vh !important;height:100dvh !important;z-index:10 !important;pointer-events:none !important;transform-origin:center center !important;animation:sharedAxisHomeOut 180ms cubic-bezier(0.4,0,1,1) 0ms forwards !important;will-change:transform,opacity}
.screen-transition-editor-in{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100vw !important;width:100dvw !important;height:100vh !important;height:100dvh !important;z-index:20 !important;transform-origin:center center !important;opacity:0 !important;animation:sharedAxisEditorIn 220ms cubic-bezier(0,0,0.2,1) 60ms forwards !important;will-change:transform,opacity}
.screen-transition-editor-out{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100vw !important;width:100dvw !important;height:100vh !important;height:100dvh !important;z-index:20 !important;pointer-events:none !important;transform-origin:center center !important;animation:sharedAxisEditorOut 180ms cubic-bezier(0.4,0,1,1) 0ms forwards !important;will-change:transform,opacity}
.screen-transition-home-in{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100vw !important;width:100dvw !important;height:100vh !important;height:100dvh !important;z-index:10 !important;transform-origin:center center !important;opacity:0 !important;animation:sharedAxisHomeIn 220ms cubic-bezier(0,0,0.2,1) 60ms forwards !important;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){
  .screen-transition-home-out,.screen-transition-editor-in,.screen-transition-editor-out,.screen-transition-home-in{animation:none !important;transform:none !important;opacity:1 !important;position:static !important}
}

/* ── Minimalist Studio Curtain (Disabled / Removed) ────────── */
.studio-curtain {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  background: rgba(248, 250, 252, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0 !important;
}
.studio-curtain.active {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
.studio-curtain-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 2.5px;
  width: 0%;
  background: linear-gradient(90deg, var(--brand-deep) 0%, var(--brand) 50%, #38bdf8 100%);
  box-shadow: 0 0 12px rgba(11, 99, 206, 0.55), 0 0 2px rgba(37, 99, 235, 0.8);
  transition: width 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  z-index: 2;
  will-change: width, opacity;
}
.studio-curtain-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 9999px;
  box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.04);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #1c1f26;
  letter-spacing: -0.015em;
  user-select: none;
  transform: translateY(0);
}
.studio-curtain-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(11, 99, 206, 0.2);
  border-top-color: var(--brand-deep);
  border-radius: 50%;
  animation: studioSpin 0.65s linear infinite;
  flex-shrink: 0;
}
@keyframes studioSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .studio-curtain {
    transition: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .studio-curtain-progress {
    transition: none !important;
  }
  .studio-curtain-spinner {
    animation-duration: 2s !important;
  }
}