@tailwind base;@tailwind components;@tailwind utilities;html,body{width:100%;max-width:100%;overflow-x:hidden}body{margin:0}html,body{overscroll-behavior-x:none;overscroll-behavior-y:auto}.font-bebas{font-family:Bebas Neue,sans-serif}.font-headline{font-family:Space Grotesk,sans-serif;letter-spacing:-.03em}.font-body{font-family:Lora,serif}h1,h2,h3,h4,h5,h6{font-family:Space Grotesk,sans-serif;letter-spacing:-.02em}:root{--ruliad-timeline-shell-min-height:460px;--ruliad-timeline-shell-max-height:760px;--ruliad-timeline-shell-auto-max-height:620px;--bg-main: #050505;--bg-panel: #0a0a0a;--bg-header: #0f0f0f;--border-color: #1f2937;--text-main: #ffffff;--text-muted: #9ca3af;--bg-media: #000000;--accent-color: #1d4ed8;--accent-hover: #1e40af;--input-bg: #1a1c1e;--text-hover: #ffffff;--scroll-track: #1a1c1e;--scroll-thumb: #4A4E54}[data-theme=light]{--bg-main: #f3f4f6;--bg-panel: #ffffff;--bg-header: #e5e7eb;--border-color: #94a3b8;--text-main: #111827;--text-muted: #374151;--bg-media: #d1d5db;--accent-color: #2563eb;--accent-hover: #1d4ed8;--input-bg: #ffffff;--text-hover: #000000;--scroll-track: #e5e7eb;--scroll-thumb: #9ca3af}@layer base{input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],textarea,select{@apply theme-bg-input border theme-border rounded-lg px-3 py-2 text-sm theme-text-main focus:outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-400/30 transition-all;}#chat-input,#media-chat-input,#creative-chat-input,#adcp-chat-input,#pubmatic-chat-input,#watchtower-input,#jarvis-input{@apply rounded-full;}}.theme-bg-main{background-color:var(--bg-main)}.theme-bg-panel{background-color:var(--bg-panel)}.theme-bg-header{background-color:var(--bg-header)}.theme-border{border-color:var(--border-color)}.theme-text-main{color:var(--text-main)}.theme-text-muted{color:var(--text-muted)}.theme-bg-input{background-color:var(--input-bg)}.theme-bg-media{background-color:var(--bg-media)}.theme-bg-accent{background-color:var(--accent-color)}.theme-border-accent{border-color:var(--accent-color)}.theme-text-accent{color:var(--accent-color)}.theme-bg-accent:hover{background-color:var(--accent-hover)}.hover\:theme-bg-accent:hover,.group:hover .group-hover\:theme-bg-accent{background-color:var(--accent-color)}.group:hover .group-hover\:theme-border-accent{border-color:var(--accent-color)}.theme-text-hover:hover{color:var(--text-hover)}body,div,nav,aside,header,input,textarea,select,button,svg,img,tr,td,th,table{transition-property:background-color,border-color,color,fill,stroke;transition-duration:.2s;transition-timing-function:ease-in-out}.custom-scrollbar::-webkit-scrollbar{width:6px;height:6px}.custom-scrollbar::-webkit-scrollbar-track{background:var(--scroll-track)}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:var(--scroll-thumb);border-radius:10px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--accent-color)}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .3s ease-out forwards}@keyframes slideDown{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.slide-down{animation:slideDown .4s ease-out forwards}@keyframes pulse-border{0%{box-shadow:0 0 #3b82f666;border-color:#3b82f666}50%{box-shadow:0 0 15px 2px #3b82f699;border-color:#3b82f6e6;transform:scale(1.02)}to{box-shadow:0 0 #3b82f666;border-color:#3b82f666;transform:scale(1)}}@keyframes green-glow-pulse{0%,to{box-shadow:0 0 20px #3b82f61a;border-color:#3b82f64d}50%{box-shadow:0 0 40px #3b82f64d;border-color:#3b82f6cc}}.pulse-green-card{animation:green-glow-pulse 3s infinite ease-in-out}@keyframes cyan-glow-pulse{0%,to{box-shadow:0 0 20px #3b82f61a;border-color:#3b82f64d}50%{box-shadow:0 0 40px #3b82f64d;border-color:#3b82f6cc}}.pulse-cyan-card{animation:cyan-glow-pulse 3s infinite ease-in-out}.pulse-wave{animation:pulse-border 1.5s infinite}@keyframes text-pulse-cyan{0%,to{opacity:1;text-shadow:0 0 10px rgba(37, 99, 235, .5)}50%{opacity:.8;text-shadow:0 0 2px rgba(37, 99, 235, .2)}}.text-blue-400.animate-pulse{animation:text-pulse-cyan 3s infinite ease-in-out}.delay-0{animation-delay:0s}.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-400{animation-delay:.4s}.aspect-16-9{aspect-ratio:16 / 9}.aspect-9-16{aspect-ratio:9 / 16}.aspect-1-1{aspect-ratio:1 / 1}.aspect-4-5{aspect-ratio:4 / 5}input[type=range]{-webkit-appearance:none;width:100%;background:transparent;height:20px;cursor:pointer;margin:0}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;background:var(--border-color);border-radius:99px;border:none;transition:background .2s}input[type=range]:hover::-webkit-slider-runnable-track{background:var(--text-muted)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:14px;width:14px;border-radius:50%;background:#60a5fa;border:2px solid #ffffff;cursor:pointer;margin-top:-5px;box-shadow:0 1px 3px #00000080;transition:transform .1s ease}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);background:#2563eb}input[type=range]::-moz-range-track{width:100%;height:4px;cursor:pointer;background:var(--border-color);border-radius:99px}input[type=range]::-moz-range-thumb{height:14px;width:14px;border:2px solid #ffffff;border-radius:50%;background:#60a5fa;cursor:pointer;box-shadow:0 1px 3px #00000080}aside.sidebar-collapsed{width:5rem!important}aside.sidebar-collapsed .nav-label,aside.sidebar-collapsed .logo-text,aside.sidebar-collapsed .section-header,aside.sidebar-collapsed .footer-details{display:none!important;opacity:0!important;pointer-events:none!important}aside.sidebar-collapsed .sidebar-nav-btn,aside.sidebar-collapsed #sidebar-logo{justify-content:center!important;padding-left:0!important;padding-right:0!important}aside.sidebar-collapsed #sidebar-footer{display:flex!important;flex-direction:column-reverse!important;align-items:center!important;gap:1.5rem!important;padding:1.5rem 0!important}aside.sidebar-collapsed #sidebar-footer-icons{display:flex!important;flex-direction:column!important;gap:.75rem!important;width:100%!important;align-items:center!important;border-top:none!important;margin-top:0!important;padding-top:0!important;grid-template-columns:none!important}aside.sidebar-collapsed #sidebar-footer-icons button{width:2.5rem!important;height:2.5rem!important;justify-content:center!important}aside.sidebar-collapsed #user-menu-btn{padding:0!important;justify-content:center!important;margin:0!important;width:100%!important}aside.sidebar-collapsed #user-menu-btn img{margin:0!important;width:2.5rem!important;height:2.5rem!important}aside.sidebar-collapsed #user-menu-btn svg,aside.sidebar-collapsed #user-menu-btn>div{display:none!important}aside.sidebar-collapsed #auth-btn{justify-content:center!important;padding:.5rem!important}aside.sidebar-collapsed #auth-btn span{display:none!important}.sidebar-nav-btn.active{background-color:#1e3a8a;border-color:#3b82f6;color:#fff;box-shadow:0 0 10px #3b82f64d}body.chat-open #app-container{box-sizing:border-box;padding-right:var(--ruliad-chat-panel-width);transition:padding-right .3s ease-in-out}#preview-modal{position:absolute;inset:0;width:100%;height:100%;z-index:40;transition:right .3s ease-in-out}body.chat-open #preview-modal{right:var(--ruliad-chat-panel-width)!important}#chat-panel{z-index:50!important}#nle-track-headers{z-index:70!important}#timeline-ruler{z-index:65!important}#timeline-playhead-indicator{z-index:60!important}.timeline-clip-element{position:absolute;top:4px;bottom:4px;border-radius:4px;overflow:hidden;-webkit-user-select:none;user-select:none;transition:box-shadow .1s ease}.interaction-locked{pointer-events:none;position:relative}#app-container.interaction-locked:after{content:"AUTONOMOUS MODE ACTIVE";position:absolute;top:20px;left:50%;transform:translate(-50%);background:#313d37e6;border:1px solid #3b82f6;color:#60a5fa;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:700;z-index:9999;box-shadow:0 0 15px #3b82f64d;letter-spacing:1px;pointer-events:none;animation:fadeIn .3s ease-out}.interaction-locked *{cursor:wait!important}.interaction-locked .allow-interaction,.interaction-locked .allow-interaction *{pointer-events:auto!important;cursor:auto!important;z-index:10001}.interaction-locked .allow-interaction textarea,.interaction-locked .allow-interaction input[type=text],.interaction-locked .allow-interaction input[type=search]{cursor:text!important}.bg-stars{background-color:#050505;background-image:radial-gradient(1px 1px at 20px 30px,#fff,#0000),radial-gradient(1px 1px at 40px 70px,#fff,#0000),radial-gradient(1px 1px at 50px 160px,#fff,#0000),radial-gradient(1.5px 1.5px at 90px 40px,#fff,#0000),radial-gradient(1.5px 1.5px at 130px 80px,#fff,#0000);background-repeat:repeat;background-size:200px 200px;animation:stars-move 100s linear infinite}@keyframes stars-move{0%{background-position:0 0}to{background-position:0 1000px}}.glass-panel{background:#0a0a0a99;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08)}.text-gradient-cyan{background:linear-gradient(to right,#3b82f6,#10b981);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.text-gradient-emerald{background:linear-gradient(to right,#34d399,#10b981,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.glow-orb{position:absolute;width:400px;height:400px;border-radius:50%;filter:blur(100px);opacity:.15;z-index:0;pointer-events:none}.glow-cyan{background:#3b82f6}.glow-emerald{background:#10b981}.ruliad-card:hover{transform:translateY(-4px);border-color:#3b82f666;box-shadow:0 10px 40px -10px #3b82f626}.nle-card{@apply aspect-video bg-black rounded-lg overflow-hidden relative group cursor-grab active:cursor-grabbing flex flex-col items-center justify-center p-2 text-center border-2 border-gray-800;transition:all .2s ease-in-out}.nle-card:hover{@apply border-blue-500 shadow-[0_0_15px_rgba(37,99,235,.3)];transform:translateY(-2px)}.wizard-director-card{@apply theme-bg-input border-2 theme-border rounded-xl p-4 flex items-start gap-4 cursor-pointer transition-all duration-200;}.wizard-director-card:hover{@apply border-blue-500/50 bg-blue-900/10;}.wizard-director-card.selected{@apply border-blue-500 bg-blue-950/30 shadow-[0_0_25px_rgba(37,99,235,.15)] ring-2 ring-blue-500/50;}.wizard-director-card.disabled{@apply opacity-40 grayscale cursor-not-allowed;}.bg-gradient-ruliad{background-image:linear-gradient(to right,#8b5cf6,#3b82f6)}.bg-gradient-ruliad:hover{filter:brightness(1.2)}

/* Turbo URL input hardening (production stylesheet override) */
#expressway-url-input {
  background: #0a0a0a !important;
  background-color: #0a0a0a !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  color: #9cecff !important;
  -webkit-text-fill-color: #9cecff !important;
  caret-color: #60a5fa !important;
  color-scheme: dark;
}
#expressway-url-input::placeholder { color: #9cecff !important; }
#expressway-url-input:focus,
#expressway-url-input:active,
#expressway-url-input:focus-visible,
#expressway-url-input:not(:placeholder-shown) {
  background: #0a0a0a !important;
  background-color: #0a0a0a !important;
  background-image: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
#expressway-url-input:-webkit-autofill,
#expressway-url-input:-webkit-autofill:hover,
#expressway-url-input:-webkit-autofill:focus,
#expressway-url-input:-webkit-autofill:active {
  -webkit-appearance: none !important;
  -webkit-text-fill-color: #9cecff !important;
  transition: background-color 9999s ease-out 0s;
  -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset !important;
  box-shadow: 0 0 0 1000px #0a0a0a inset !important;
  background-color: #0a0a0a !important;
  background-image: none !important;
}
#expressway-url-input:-moz-autofill {
  box-shadow: 0 0 0 1000px #0a0a0a inset !important;
  -moz-text-fill-color: #9cecff !important;
}

/* Storyboard/Casting focus + footer transport (authoritative overrides) */
#storyboard-grid .asset-card,
#characters-grid .asset-card {
  position: relative;
}
#storyboard-grid.has-active-card .asset-card.is-inactive::after,
#characters-grid.has-active-card .asset-card.is-inactive::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 47, 73, 0.34);
  pointer-events: none;
  z-index: 35;
  backdrop-filter: saturate(0.96) brightness(0.9);
}
#storyboard-grid .asset-card.is-active,
#characters-grid .asset-card.is-active {
  border-color: rgba(59, 130, 246, 0.65);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.22), 0 0 20px rgba(59, 130, 246, 0.1);
}
#storyboard-grid.has-active-card .asset-card.is-inactive .preview-wrapper,
#characters-grid.has-active-card .asset-card.is-inactive .preview-wrapper {
  filter: grayscale(0.18) brightness(0.84);
}
.card-footer-controls button {
  line-height: 1;
}
.card-footer-controls .card-footer-play-btn {
  color: #67e8f9;
}
.card-footer-controls {
  background: linear-gradient(180deg, rgba(14, 17, 22, 0.92) 0%, rgba(8, 11, 14, 0.97) 100%);
  border-top: 1px solid rgba(59, 130, 246, 0.2);
}
.card-footer-controls .card-footer-play-btn:hover {
  color: #bfdbfe;
}

#global-shot-transport {
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
  border-top-color: rgba(59, 130, 246, 0.28);
  padding: 1.2rem 1.5rem !important;
  min-height: 128px;
}

#app-container.has-shot-transport #main-content-area {
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  padding-bottom: 10.5rem;
  scroll-padding-bottom: 10.5rem;
}
#app-container.has-shot-transport #storyboard-grid,
#app-container.has-shot-transport #characters-grid {
  position: relative;
  height: auto !important;
  min-height: 0;
  padding-bottom: 0 !important;
  scroll-padding-bottom: 10.5rem;
  overflow: visible !important;
  overscroll-behavior-y: auto;
  grid-auto-rows: minmax(27.5rem, auto);
  align-content: start;
}

#app-container.has-shot-transport #global-shot-transport {
    display: flex !important;
    position: absolute;
    left: 0;
    right: 0;
  bottom: 0;
  z-index: 45;
  pointer-events: auto;
}

/* WP10-C1/C2 revision-footer overlay (portaled to <body>, so no #app-container descendant selector can
   reach it): while the shot transport bar is pinned to the bottom (rule above, min-height 128px), lift
   the overlay clear of it — at its default bottom offset the footer painted INSIDE the transport
   (measured footer y=937 vs transport y=918-1000 @1000px viewport). Source never hits this: its
   storyboard surface has no bottom transport bar under the overlay. */
body:has(#app-container.has-shot-transport) [data-revision-footer-overlay] {
  bottom: 9.5rem;
}

#global-shot-transport > div {
  min-height: 84px;
  align-items: center;
  gap: 1rem;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

#global-shot-transport .global-shot-left-controls,
#global-shot-transport .global-shot-center-controls,
#global-shot-transport .global-shot-right-controls {
  min-height: 80px;
  display: flex;
  align-items: center;
}

#global-shot-transport .global-shot-left-controls {
  flex: 1 1 0;
  justify-content: flex-start;
}

#global-shot-transport .global-shot-center-controls {
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

#global-shot-transport .global-shot-right-controls {
  flex: 1 1 0;
  justify-content: flex-end;
}

#global-shot-transport .global-shot-control-btn {
  border: 1px solid rgba(56, 189, 248, 0.18);
  background: rgba(8, 12, 16, 0.8);
  min-width: 3rem;
  min-height: 3rem;
  border-radius: 0.72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  line-height: 1;
}

#global-shot-transport .global-shot-control-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  margin: 0 auto;
}

#global-shot-play-btn {
  width: 3.45rem;
  height: 3.45rem;
  min-width: 3.45rem;
  min-height: 3.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#global-shot-transport .global-shot-control-btn:hover {
  border-color: rgba(103, 232, 249, 0.5);
  background: rgba(8, 47, 73, 0.42);
}

#vo-player-footer,
#music-player-footer {
  min-height: var(--ruliad-workspace-footer-height, 82px);
  height: var(--ruliad-workspace-footer-height, 82px);
  max-height: var(--ruliad-workspace-footer-height, 82px);
  box-sizing: border-box;
  overflow: hidden;
  border-top-color: rgba(59, 130, 246, 0.28);
  background: rgba(11, 15, 19, 0.95);
}

#vo-player-footer .vo-player-transport,
#music-player-footer .music-player-transport {
  min-height: 3.15rem;
  border: 1px solid rgba(59, 130, 246, 0.55);
  border-radius: 1rem;
  background: rgba(3, 10, 15, 0.82);
  padding: 0.25rem 0.45rem;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.08), 0 0 18px rgba(29, 78, 216, 0.16);
}

#vo-player-footer .vo-player-control-btn,
#music-player-footer .music-player-control-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  min-width: 2.6rem;
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 0.72rem;
  background: rgba(8, 12, 16, 0.8);
  color: rgb(209, 213, 219);
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

#vo-player-footer .vo-player-primary-control,
#music-player-footer .music-player-primary-control {
  color: rgb(103, 232, 249);
  border-color: rgba(59, 130, 246, 0.35);
}

#vo-player-footer .vo-player-control-btn:hover,
#music-player-footer .music-player-control-btn:hover {
  border-color: rgba(103, 232, 249, 0.5);
  background: rgba(8, 47, 73, 0.42);
  color: white;
}

#vo-player-footer .vo-player-runtime-badge,
#music-player-footer .music-player-runtime-badge {
  min-width: 9.5rem;
  text-align: center;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  color: rgb(191, 219, 254);
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: 0.45rem;
  background: rgb(6, 16, 23);
  padding: 0.42rem 0.65rem;
}

#vo-player-footer .vo-player-seek,
#music-player-footer .music-player-seek {
  width: clamp(8rem, 18vw, 16rem);
  height: 1rem;
  accent-color: rgb(59, 130, 246);
}

#vo-tab-settings,
#vo-tab-history {
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
}

#vo-panel-settings {
  padding: 1rem !important;
}

#vo-panel-settings > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.85rem !important;
}

#vo-panel-settings label {
  margin-bottom: 0.35rem !important;
  font-size: 0.68rem !important;
  line-height: 1rem !important;
}

#vo-studio-voice-selector {
  min-height: 3.2rem;
  padding: 0.55rem 0.75rem !important;
  border-radius: 0.5rem !important;
}

#vo-selected-voice-icon {
  width: 1.75rem !important;
  height: 1.75rem !important;
}

#vo-studio-model-select {
  height: 2.55rem;
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
  border-radius: 0.5rem !important;
}

#vo-panel-settings .space-y-5 {
  padding-top: 0 !important;
}

#vo-panel-settings .space-y-5 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.75rem !important;
}

#vo-panel-settings .flex.justify-between.text-xs {
  margin-bottom: 0.25rem !important;
}

#vo-panel-settings .eleven-slider {
  height: 1.8rem !important;
  min-height: 1.8rem !important;
  padding-left: 0.65rem !important;
  padding-right: 0.65rem !important;
  border-radius: 0.5rem !important;
}

#vo-panel-settings input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
}

#vo-panel-settings input[type="range"]::-moz-range-track {
  height: 3px;
}

#vo-panel-settings .border-t.theme-border {
  padding-top: 0.75rem !important;
}

#vo-panel-settings .flex.items-center.justify-between.py-2 {
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
}

#vo-studio-generate-btn {
  min-height: 2.75rem;
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
  border-radius: 0.55rem !important;
}

#vo-add-voice-btn {
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
  border-radius: 0.55rem !important;
}

#vo-style-suggestion {
  height: 4.5rem !important;
  padding: 0.7rem !important;
  border-radius: 0.5rem !important;
}

#music-input-container .theme-bg-header.border-t {
  min-height: 4.75rem;
  align-items: center;
}

.music-param-pill {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 999px;
  background: rgba(15, 23, 31, 0.92);
  color: rgba(244, 250, 252, 0.92);
  padding: 0.38rem 0.8rem;
  font-size: 0.75rem;
  line-height: 1;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.music-param-pill:hover,
.music-param-pill:focus-visible {
  border-color: rgba(103, 232, 249, 0.55);
  background: rgba(8, 47, 73, 0.46);
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.12);
  outline: none;
}

.music-param-kicker {
  color: rgb(103, 232, 249);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.music-param-popover,
#music-duration-popover,
#music-type-popover {
  border: 1px solid rgba(59, 130, 246, 0.24);
  border-radius: 0.85rem;
  background: rgba(9, 13, 18, 0.98);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(103, 232, 249, 0.06);
  padding: 0.65rem;
}

.music-popover-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.45rem;
  padding: 0 0.15rem;
}

.music-popover-heading span {
  color: rgba(242, 252, 255, 0.94);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.music-popover-heading small,
.music-popover-note {
  color: rgba(148, 163, 184, 0.86);
  font-size: 0.66rem;
  line-height: 1.35;
}

.music-popover-note {
  margin-bottom: 0.55rem;
  padding: 0 0.15rem;
}

.music-ai-opt,
.music-type-opt {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  border: 0;
  border-radius: 0.6rem;
  background: transparent;
  color: rgba(229, 231, 235, 0.92);
  padding: 0.62rem 0.7rem;
  text-align: left;
}

.music-ai-opt:hover,
.music-type-opt:hover {
  background: rgba(15, 23, 42, 0.82);
}

.music-ai-opt.active,
.music-type-opt.active,
.music-dur-opt.active {
  background: rgba(29, 78, 216, 0.18);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.48);
  color: rgb(236, 254, 255);
}

.music-ai-opt span,
.music-type-opt span {
  font-size: 0.78rem;
  font-weight: 750;
}

.music-ai-opt small,
.music-type-opt small {
  color: rgba(148, 163, 184, 0.9);
  font-size: 0.66rem;
  line-height: 1.32;
}

.music-ai-opt b {
  color: rgba(103, 232, 249, 0.86);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.music-ai-opt em {
  margin-left: 0.35rem;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.15);
  color: rgb(191, 219, 254);
  padding: 0.09rem 0.38rem;
  font-size: 0.56rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.music-duration-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.38rem;
}

.music-dur-opt {
  min-height: 1.9rem;
  border: 0;
  border-radius: 0.5rem;
  background: rgba(15, 23, 31, 0.92);
  color: rgba(229, 231, 235, 0.9);
  padding: 0 0.55rem;
  font-size: 0.72rem;
}

.music-dur-opt:hover {
  background: rgba(8, 47, 73, 0.52);
}

.music-custom-duration {
  display: flex;
  min-height: 1.9rem;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 0.5rem;
  background: rgba(2, 6, 10, 0.86);
  padding: 0 0.45rem;
}

.music-custom-duration input {
  width: 3rem;
  background: transparent;
  color: white;
  font-size: 0.72rem;
  outline: none;
  text-align: center;
}

#wizard-project-name-input,
#campaign-selection-create-input,
#wizard-project-name-input:focus,
#campaign-selection-create-input:focus,
#wizard-project-name-input:active,
#campaign-selection-create-input:active,
#wizard-project-name-input:focus-visible,
#campaign-selection-create-input:focus-visible,
#wizard-project-name-input:not(:placeholder-shown),
#campaign-selection-create-input:not(:placeholder-shown) {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #0a0a0a !important;
  background-color: #0a0a0a !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 0 1000px #0a0a0a inset !important;
  -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset !important;
  caret-color: #60a5fa !important;
  color-scheme: dark !important;
}

#wizard-project-name-input::placeholder,
#campaign-selection-create-input::placeholder {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  opacity: 1 !important;
}

#wizard-project-name-input:-webkit-autofill,
#wizard-project-name-input:-webkit-autofill:hover,
#wizard-project-name-input:-webkit-autofill:focus,
#wizard-project-name-input:-webkit-autofill:active,
#campaign-selection-create-input:-webkit-autofill,
#campaign-selection-create-input:-webkit-autofill:hover,
#campaign-selection-create-input:-webkit-autofill:focus,
#campaign-selection-create-input:-webkit-autofill:active {
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 0 1000px #0a0a0a inset !important;
  -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset !important;
}

#global-shot-runtime {
  min-width: 236px;
  text-align: center;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

#global-shot-duration {
  min-width: 124px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  padding: 0.68rem 0.78rem;
}

#global-shot-transport.is-disabled {
  opacity: 1;
}

#global-shot-transport button:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}

#preview-modal .nle-nav-btn {
  position: relative;
  border: 1px solid transparent;
}

#preview-modal .nle-nav-btn.active {
  background: linear-gradient(180deg, rgba(11, 28, 40, 0.92) 0%, rgba(8, 21, 32, 0.98) 100%);
  border-color: rgba(59, 130, 246, 0.62);
  color: #e0f7ff !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.16), 0 0 14px rgba(59, 130, 246, 0.28);
}

#preview-modal .nle-nav-btn.active::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 0.65rem;
  border: 1px solid rgba(59, 130, 246, 0.18);
  pointer-events: none;
}

#storyboard-grid .asset-card,
#storyboard-grid [data-storyboard-react-surface="true"] > .asset-card,
#characters-grid .asset-card {
  min-height: 0;
}

#storyboard-grid .asset-card .preview-wrapper,
#storyboard-grid [data-storyboard-react-surface="true"] > .asset-card .preview-wrapper,
#characters-grid .asset-card .preview-wrapper {
  min-height: 0;
}

#storyboard-grid [data-storyboard-react-surface="true"] > .asset-card .preview-wrapper {
  aspect-ratio: 4 / 3;
  margin-top: 0.65rem !important;
  margin-bottom: 0.65rem !important;
}

#storyboard-grid .asset-card .card-controls-shell,
#characters-grid .asset-card .card-controls-shell {
  flex: 0 0 auto;
  min-height: 0;
  margin-top: 0.55rem !important;
}

[data-storyboard-control-modal] select,
[data-storyboard-react-settings-drawer] select {
  color-scheme: dark;
  background-color: #081019 !important;
  color: #f8fafc !important;
}

[data-storyboard-control-modal] select option,
[data-storyboard-react-settings-drawer] select option {
  background-color: #081019;
  color: #f8fafc;
}

[data-storyboard-control-modal] select option:checked,
[data-storyboard-react-settings-drawer] select option:checked {
  background-color: #1d4ed8;
  color: #ffffff;
}

#production-architect-react-root select,
[data-react-production-architect-shell="true"] select,
#new-campaign-modal select,
.production-architect-select {
  color-scheme: dark;
  background-color: #020617 !important;
  color: #f8fafc !important;
}

#production-architect-react-root select option,
[data-react-production-architect-shell="true"] select option,
#new-campaign-modal select option,
.production-architect-select option,
.production-architect-select-option {
  background-color: #020617 !important;
  color: #f8fafc !important;
}

#production-architect-react-root select option:checked,
[data-react-production-architect-shell="true"] select option:checked,
#new-campaign-modal select option:checked,
.production-architect-select option:checked,
.production-architect-select-option:checked {
  background: linear-gradient(#0f3b46, #0f3b46) !important;
  background-color: #0f3b46 !important;
  color: #ffffff !important;
}

#characters-grid .asset-card .card-footer-controls,
#storyboard-grid .asset-card .card-footer-controls {
  min-height: 32px;
}

/* Force storyboard/casting scrollbars to dark theme (fix white scrollbar regression). */
#app-container.has-shot-transport #main-content-area,
#storyboard-grid,
#characters-grid,
#storyboard-grid textarea,
#characters-grid textarea {
  scrollbar-width: thin;
  scrollbar-color: #6b7280 #0b0f14;
}

#app-container.has-shot-transport #main-content-area::-webkit-scrollbar,
#storyboard-grid::-webkit-scrollbar,
#characters-grid::-webkit-scrollbar,
#storyboard-grid textarea::-webkit-scrollbar,
#characters-grid textarea::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

#app-container.has-shot-transport #main-content-area::-webkit-scrollbar-track,
#storyboard-grid::-webkit-scrollbar-track,
#characters-grid::-webkit-scrollbar-track,
#storyboard-grid textarea::-webkit-scrollbar-track,
#characters-grid textarea::-webkit-scrollbar-track {
  background: #0b0f14;
  border-left: 1px solid #1a222d;
}

#app-container.has-shot-transport #main-content-area::-webkit-scrollbar-thumb,
#storyboard-grid::-webkit-scrollbar-thumb,
#characters-grid::-webkit-scrollbar-thumb,
#storyboard-grid textarea::-webkit-scrollbar-thumb,
#characters-grid textarea::-webkit-scrollbar-thumb {
  background: #5d6673;
  border-radius: 999px;
  border: 2px solid #0b0f14;
}

#app-container.has-shot-transport #main-content-area::-webkit-scrollbar-thumb:hover,
#storyboard-grid::-webkit-scrollbar-thumb:hover,
#characters-grid::-webkit-scrollbar-thumb:hover,
#storyboard-grid textarea::-webkit-scrollbar-thumb:hover,
#characters-grid textarea::-webkit-scrollbar-thumb:hover {
  background: #7a8492;
}

#app-container.has-shot-transport #main-content-area::-webkit-scrollbar-corner,
#storyboard-grid::-webkit-scrollbar-corner,
#characters-grid::-webkit-scrollbar-corner {
  background: #0b0f14;
}

/* Missing ratio class used by storyboard/casting aspect selector */
.aspect-4-3 {
  aspect-ratio: 4 / 3;
}


/* Storyboard: do not dim cards that already contain media assets */
#storyboard-grid.has-active-card .asset-card.is-inactive[data-has-media="true"]::after,
#characters-grid.has-active-card .asset-card.is-inactive[data-has-media="true"]::after {
  display: none;
}

#storyboard-grid.has-active-card .asset-card.is-inactive[data-has-media="true"] .preview-wrapper,
#characters-grid.has-active-card .asset-card.is-inactive[data-has-media="true"] .preview-wrapper {
  filter: none;
}

#storyboard-grid.has-active-card .asset-card.is-inactive[data-has-media="false"]::after,
#storyboard-grid [data-storyboard-react-surface="true"].has-active-card .asset-card.is-inactive[data-has-media="false"]::after,
#characters-grid.has-active-card .asset-card.is-inactive[data-has-media="false"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 47, 73, 0.34);
  pointer-events: none;
  z-index: 35;
  backdrop-filter: saturate(0.96) brightness(0.9);
}

#storyboard-grid.has-active-card .asset-card.is-inactive[data-has-media="false"] .preview-wrapper,
#storyboard-grid [data-storyboard-react-surface="true"].has-active-card .asset-card.is-inactive[data-has-media="false"] .preview-wrapper,
#characters-grid.has-active-card .asset-card.is-inactive[data-has-media="false"] .preview-wrapper {
  filter: grayscale(0.18) brightness(0.84);
}

.nle-context-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
  z-index: 50;
  background: transparent;
  border-right: 0;
}

.nle-context-resizer:hover {
  background: transparent;
}

body.nle-resizing {
  user-select: none;
  cursor: ew-resize !important;
}

/* Collapsed sidebar sizing and icon alignment overrides */
aside.sidebar-collapsed,
#sidebar.sidebar-collapsed {
  width: 5rem !important;
  min-width: 5rem !important;
}

aside.sidebar-collapsed .tool-launch-btn {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

aside.sidebar-collapsed .tool-launch-btn .nav-label,
aside.sidebar-collapsed .tool-launch-btn span {
  display: none !important;
}

/* Chat composer sizing */
#chat-dropzone,
#media-chat-dropzone,
#creative-chat-dropzone {
  min-height: 3rem;
  box-shadow: inset 0 1px 0 rgba(59, 130, 246, 0.06), 0 0 0 1px rgba(8, 47, 73, 0.3);
}

#gervais-chat-dropzone {
  min-height: 7.25rem;
  box-shadow: inset 0 1px 0 rgba(59, 130, 246, 0.06), 0 0 0 1px rgba(8, 47, 73, 0.3);
}

#chat-input,
#media-chat-input,
#creative-chat-input,
#gervais-input {
  border-radius: 0.75rem !important;
}

#chat-input,
#media-chat-input,
#creative-chat-input {
  min-height: 2.25rem !important;
  max-height: 2.25rem !important;
}

#gervais-input {
  min-height: 3rem !important;
  max-height: 7rem;
  background-color: #0b1522 !important;
  color: #f3f4f6;
}

@media (max-width: 1280px) {
  #chat-dropzone,
  #media-chat-dropzone,
  #creative-chat-dropzone {
    min-height: 2.75rem;
  }

  #gervais-chat-dropzone {
    min-height: 6.25rem;
  }
}

/* Darken native multi-select list highlight + scrollbar in Memory > Media Outcomes */
#dash-memory-media-objective {
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: #4b5563 #111827;
}

#dash-memory-media-objective::-webkit-scrollbar {
  width: 10px;
}

#dash-memory-media-objective::-webkit-scrollbar-track {
  background: #111827;
  border-radius: 10px;
}

#dash-memory-media-objective::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 10px;
  border: 1px solid #111827;
}

#dash-memory-media-objective::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

#dash-memory-media-objective option {
  background-color: #0f1722;
  color: #e5e7eb;
}

#dash-memory-media-objective option:checked {
  background: #4b5563 linear-gradient(0deg, #4b5563, #4b5563);
  color: #f9fafb;
}

#dash-memory-media-objective option:hover,
#dash-memory-media-objective option:focus {
  background: #374151 linear-gradient(0deg, #374151, #374151);
  color: #ffffff;
}

/* Desktop chat dock reserves width once at app container level. */
:root {
  --ruliad-chat-panel-open-width: 320px;
  --ruliad-chat-panel-width: var(--ruliad-chat-panel-open-width);
}

body.chat-open #app-container {
  box-sizing: border-box;
  padding-right: var(--ruliad-chat-panel-width) !important;
}

body.chat-open #main-content-area {
  margin-right: 0 !important;
}

body.chat-open #preview-modal {
  right: var(--ruliad-chat-panel-width) !important;
}

#sidebar.sidebar-collapsed > div:first-child,
#dash-sidebar.sidebar-collapsed > div:first-child {
  height: 3rem !important;
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
  justify-content: center !important;
}

/* Campaign Architect Brand inputs must stay dark even when browser autofill/value styling kicks in. */
#new-campaign-title,
#new-ingest-url-input,
#wizard-product-input,
#wizard-project-name-input,
#campaign-selection-create-input,
#wt-target-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #0a0a0a !important;
  background-color: #0a0a0a !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #60a5fa !important;
  box-shadow: 0 0 0 1000px #0a0a0a inset !important;
  -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset !important;
  color-scheme: dark;
}

#new-campaign-title::placeholder,
#new-ingest-url-input::placeholder,
#wizard-product-input::placeholder,
#wizard-project-name-input::placeholder,
#campaign-selection-create-input::placeholder,
#wt-target-input::placeholder {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  opacity: 1 !important;
}

#new-campaign-title:focus,
#new-campaign-title:active,
#new-campaign-title:focus-visible,
#new-ingest-url-input:focus,
#new-ingest-url-input:active,
#new-ingest-url-input:focus-visible,
#wizard-product-input:focus,
#wizard-product-input:active,
#wizard-product-input:focus-visible,
#wizard-project-name-input:focus,
#wizard-project-name-input:active,
#wizard-project-name-input:focus-visible,
#campaign-selection-create-input:focus,
#campaign-selection-create-input:active,
#campaign-selection-create-input:focus-visible,
#wt-target-input:focus,
#wt-target-input:active,
#wt-target-input:focus-visible,
#new-campaign-title:not(:placeholder-shown),
#new-ingest-url-input:not(:placeholder-shown),
#wizard-product-input:not(:placeholder-shown),
#wizard-project-name-input:not(:placeholder-shown),
#campaign-selection-create-input:not(:placeholder-shown),
#wt-target-input:not(:placeholder-shown) {
  background: #0a0a0a !important;
  background-color: #0a0a0a !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 0 1000px #0a0a0a inset !important;
  -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset !important;
}

#new-campaign-title:-webkit-autofill,
#new-campaign-title:-webkit-autofill:hover,
#new-campaign-title:-webkit-autofill:focus,
#new-campaign-title:-webkit-autofill:active,
#new-ingest-url-input:-webkit-autofill,
#new-ingest-url-input:-webkit-autofill:hover,
#new-ingest-url-input:-webkit-autofill:focus,
#new-ingest-url-input:-webkit-autofill:active,
#wizard-product-input:-webkit-autofill,
#wizard-product-input:-webkit-autofill:hover,
#wizard-product-input:-webkit-autofill:focus,
#wizard-product-input:-webkit-autofill:active,
#wizard-project-name-input:-webkit-autofill,
#wizard-project-name-input:-webkit-autofill:hover,
#wizard-project-name-input:-webkit-autofill:focus,
#wizard-project-name-input:-webkit-autofill:active,
#campaign-selection-create-input:-webkit-autofill,
#campaign-selection-create-input:-webkit-autofill:hover,
#campaign-selection-create-input:-webkit-autofill:focus,
#campaign-selection-create-input:-webkit-autofill:active,
#wt-target-input:-webkit-autofill,
#wt-target-input:-webkit-autofill:hover,
#wt-target-input:-webkit-autofill:focus,
#wt-target-input:-webkit-autofill:active {
  -webkit-appearance: none !important;
  -webkit-text-fill-color: #ffffff !important;
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0 1000px #0a0a0a inset !important;
  -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset !important;
  background-color: #0a0a0a !important;
  background-image: none !important;
}

#new-campaign-title:-moz-autofill,
#new-ingest-url-input:-moz-autofill,
#wizard-product-input:-moz-autofill,
#wizard-project-name-input:-moz-autofill,
#campaign-selection-create-input:-moz-autofill,
#wt-target-input:-moz-autofill {
  box-shadow: 0 0 0 1000px #0a0a0a inset !important;
  -moz-text-fill-color: #ffffff !important;
}

/* ================================================
   LIGHT THEME HARD OVERRIDES (NO DARK SURFACES)
   Applies only when theme switch is set to light.
   ================================================ */
[data-theme="light"] {
  color-scheme: light;
  --bg-main: #f4f7fb;
  --bg-panel: #ffffff;
  --bg-header: #edf2f7;
  --border-color: #cbd5e1;
  --text-main: #0f172a;
  --text-muted: #475569;
  --bg-media: #e2e8f0;
  --accent-color: #3b82f6;
  --accent-hover: #2563eb;
  --input-bg: #f8fafc;
  --text-hover: #0f172a;
  --scroll-track: #e2e8f0;
  --scroll-thumb: #94a3b8;
  --ruliad-surface-soft: #f1f5f9;
  --ruliad-surface-mid: #e2e8f0;
  --ruliad-overlay: rgba(226, 232, 240, 0.9);
}

[data-theme="light"] body {
  background: var(--bg-main);
  color: var(--text-main);
}

[data-theme="light"] .bg-stars {
  background-color: #f4f7fb !important;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(15, 23, 42, 0.12), transparent),
    radial-gradient(1px 1px at 40px 70px, rgba(15, 23, 42, 0.08), transparent),
    radial-gradient(1px 1px at 50px 160px, rgba(15, 23, 42, 0.08), transparent),
    radial-gradient(1.5px 1.5px at 90px 40px, rgba(15, 23, 42, 0.12), transparent),
    radial-gradient(1.5px 1.5px at 130px 80px, rgba(15, 23, 42, 0.08), transparent) !important;
}

[data-theme="light"] .glass-panel {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
}

/* remap hardcoded dark utility classes used across tools/modals/jarvis */
[data-theme="light"] [class*="bg-black/"],
[data-theme="light"] [class*="bg-black"],
[data-theme="light"] [class*="bg-[#050505]"],
[data-theme="light"] [class*="bg-[#0a0a0a]"],
[data-theme="light"] [class*="bg-[#0b0f14]"],
[data-theme="light"] [class*="bg-[#0b1118]"],
[data-theme="light"] [class*="bg-[#0b1116]"],
[data-theme="light"] [class*="bg-[#0d1118]"],
[data-theme="light"] [class*="bg-[#0d1218]"],
[data-theme="light"] [class*="bg-[#10131a]"],
[data-theme="light"] [class*="bg-[#10151c]"],
[data-theme="light"] [class*="bg-[#10151d]"],
[data-theme="light"] [class*="bg-[#10161d]"],
[data-theme="light"] [class*="bg-[#10161f]"],
[data-theme="light"] [class*="bg-[#111]"],
[data-theme="light"] [class*="bg-[#111111]"],
[data-theme="light"] [class*="bg-[#111214]"],
[data-theme="light"] [class*="bg-[#111820]"],
[data-theme="light"] [class*="bg-[#121212]"],
[data-theme="light"] [class*="bg-[#121416]"],
[data-theme="light"] [class*="bg-[#121822]"],
[data-theme="light"] [class*="bg-[#141d28]"],
[data-theme="light"] [class*="bg-[#161f29]"],
[data-theme="light"] [class*="bg-[#1a1c1e]"],
[data-theme="light"] [class*="bg-[#1a1d22]"],
[data-theme="light"] [class*="bg-[#1f2623]"],
[data-theme="light"] [class*="bg-zinc-900"],
[data-theme="light"] [class*="bg-zinc-800"],
[data-theme="light"] [class*="bg-gray-900"],
[data-theme="light"] [class*="bg-gray-800"],
[data-theme="light"] [class*="bg-gray-700"] {
  background-color: var(--ruliad-surface-soft) !important;
}

[data-theme="light"] [class*="border-gray-900"],
[data-theme="light"] [class*="border-gray-800"],
[data-theme="light"] [class*="border-gray-700"],
[data-theme="light"] [class*="border-gray-600"] {
  border-color: var(--border-color) !important;
}

[data-theme="light"] .text-white,
[data-theme="light"] [class*="text-gray-100"],
[data-theme="light"] [class*="text-gray-200"],
[data-theme="light"] [class*="text-gray-300"],
[data-theme="light"] [class*="text-gray-400"],
[data-theme="light"] [class*="text-zinc-400"],
[data-theme="light"] [class*="text-zinc-300"] {
  color: var(--text-main) !important;
}

[data-theme="light"] [class*="text-gray-500"],
[data-theme="light"] [class*="text-gray-600"],
[data-theme="light"] [class*="text-zinc-500"],
[data-theme="light"] [class*="text-zinc-600"] {
  color: var(--text-muted) !important;
}

[data-theme="light"] .theme-bg-accent,
[data-theme="light"] .bg-blue-700,
[data-theme="light"] .bg-blue-600,
[data-theme="light"] .bg-blue-500,
[data-theme="light"] .from-blue-700,
[data-theme="light"] .to-blue-500 {
  color: #ffffff !important;
}

[data-theme="light"] .theme-bg-accent {
  background-color: var(--accent-color) !important;
}

[data-theme="light"] .theme-bg-accent:hover {
  background-color: var(--accent-hover) !important;
}

[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-track {
  background: var(--scroll-track) !important;
}

[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb) !important;
}

/* keep Expressway URL field integrated in light theme */
[data-theme="light"] #expressway-url-input,
[data-theme="light"] #expressway-url-input:focus,
[data-theme="light"] #expressway-url-input:active,
[data-theme="light"] #expressway-url-input:focus-visible,
[data-theme="light"] #expressway-url-input:not(:placeholder-shown) {
  background: var(--input-bg) !important;
  background-color: var(--input-bg) !important;
  color: #9cecff !important;
  -webkit-text-fill-color: #9cecff !important;
  box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  caret-color: var(--accent-color) !important;
  color-scheme: light !important;
}

[data-theme="light"] #expressway-url-input::placeholder {
  color: #9cecff !important;
}

[data-theme="light"] #expressway-url-input:-webkit-autofill,
[data-theme="light"] #expressway-url-input:-webkit-autofill:hover,
[data-theme="light"] #expressway-url-input:-webkit-autofill:focus,
[data-theme="light"] #expressway-url-input:-webkit-autofill:active {
  -webkit-text-fill-color: #9cecff !important;
  box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
}

[data-theme="light"] #expressway-url-input:-moz-autofill {
  box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  -moz-text-fill-color: #9cecff !important;
}

/* campaign architect brand fields must be light in light theme */
[data-theme="light"] #new-campaign-title,
[data-theme="light"] #new-ingest-url-input,
[data-theme="light"] #new-campaign-title:focus,
[data-theme="light"] #new-campaign-title:active,
[data-theme="light"] #new-campaign-title:focus-visible,
[data-theme="light"] #new-campaign-title:not(:placeholder-shown),
[data-theme="light"] #new-ingest-url-input:focus,
[data-theme="light"] #new-ingest-url-input:active,
[data-theme="light"] #new-ingest-url-input:focus-visible,
[data-theme="light"] #new-ingest-url-input:not(:placeholder-shown) {
  background: var(--input-bg) !important;
  background-color: var(--input-bg) !important;
  color: var(--text-main) !important;
  -webkit-text-fill-color: var(--text-main) !important;
  box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  caret-color: var(--accent-color) !important;
  color-scheme: light !important;
}

[data-theme="light"] #new-campaign-title::placeholder,
[data-theme="light"] #new-ingest-url-input::placeholder {
  color: var(--text-muted) !important;
}

[data-theme="light"] #new-campaign-title:-webkit-autofill,
[data-theme="light"] #new-campaign-title:-webkit-autofill:hover,
[data-theme="light"] #new-campaign-title:-webkit-autofill:focus,
[data-theme="light"] #new-campaign-title:-webkit-autofill:active,
[data-theme="light"] #new-ingest-url-input:-webkit-autofill,
[data-theme="light"] #new-ingest-url-input:-webkit-autofill:hover,
[data-theme="light"] #new-ingest-url-input:-webkit-autofill:focus,
[data-theme="light"] #new-ingest-url-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text-main) !important;
  box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
}

[data-theme="light"] #new-campaign-title:-moz-autofill,
[data-theme="light"] #new-ingest-url-input:-moz-autofill {
  box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  -moz-text-fill-color: var(--text-main) !important;
}

/* memory multi-select should not force dark in light mode */
[data-theme="light"] #dash-memory-media-objective {
  color-scheme: light !important;
  scrollbar-color: #94a3b8 #e2e8f0 !important;
}

[data-theme="light"] #dash-memory-media-objective::-webkit-scrollbar-track {
  background: #e2e8f0 !important;
}

[data-theme="light"] #dash-memory-media-objective::-webkit-scrollbar-thumb {
  background: #94a3b8 !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] #dash-memory-media-objective option {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

[data-theme="light"] #dash-memory-media-objective option:checked {
  background: #cbd5e1 linear-gradient(0deg, #cbd5e1, #cbd5e1) !important;
  color: #0f172a !important;
}

/* Signup + onboarding credential fields must stay dark even with browser autofill */
#signup-website,
#signup-email,
#signup-password,
#signup-confirm-password,
#auth-email,
#auth-password {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #151515 !important;
    background-color: #151515 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 0 0 1000px #151515 inset !important;
    -webkit-box-shadow: 0 0 0 1000px #151515 inset !important;
    caret-color: #60a5fa !important;
    background-image: none !important;
    color-scheme: dark;
}

#signup-website:focus,
#signup-email:focus,
#signup-password:focus,
#signup-confirm-password:focus,
#auth-email:focus,
#auth-password:focus,
#signup-website:active,
#signup-email:active,
#signup-password:active,
#signup-confirm-password:active,
#auth-email:active,
#auth-password:active,
#signup-website:focus-visible,
#signup-email:focus-visible,
#signup-password:focus-visible,
#signup-confirm-password:focus-visible,
#auth-email:focus-visible,
#auth-password:focus-visible,
#signup-website:not(:placeholder-shown),
#signup-email:not(:placeholder-shown),
#signup-password:not(:placeholder-shown),
#signup-confirm-password:not(:placeholder-shown),
#auth-email:not(:placeholder-shown),
#auth-password:not(:placeholder-shown) {
    background: #151515 !important;
    background-color: #151515 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 0 0 1000px #151515 inset !important;
    -webkit-box-shadow: 0 0 0 1000px #151515 inset !important;
}

/* Explicit workspace footer parity rules for the local app entry stylesheet. */
/* `#dash-sidebar` is comma-added to every `#sidebar`-scoped rule below: this app's rail renders as
   id="dash-sidebar" (DashboardSidebar.tsx — the id is referenced by 20+ e2e specs, so it stays),
   while the ported source rules target `#sidebar`. Without the extra selector the whole muted
   sidebar pass and collapsed block are dead and the rail falls back to its Tailwind classes. */
#sidebar,
#dash-sidebar {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

#sidebar > nav,
#dash-sidebar > nav {
    min-height: 0;
}

/* Clean muted sidebar pass */
#sidebar,
#dash-sidebar {
    --sidebar-bg: #0f1117;
    --sidebar-bg-soft: #151821;
    --sidebar-border: #232733;
    --sidebar-muted: #858893;
    --sidebar-text: #b7bac3;
    --sidebar-strong: #eef0f5;
    --sidebar-active-bg: #2a171f;
    --sidebar-active-border: #75404a;
    --sidebar-active: #ff5b66;
    background: var(--sidebar-bg) !important;
    border-right-color: var(--sidebar-border) !important;
    width: 13.5rem;
    min-width: 13.5rem;
    color: var(--sidebar-muted);
}

#sidebar > div:first-child,
#dash-sidebar > div:first-child {
    height: 4.5rem;
    border-bottom-color: var(--sidebar-border) !important;
    padding: 0 0.75rem !important;
}

:root {
    --ruliad-logo-gradient-approved: linear-gradient(91deg, #0d338d 0%, #145da0 34%, #188da9 66%, #13f1ef 100%);
    --ruliad-logo-glow-approved: 0 0 20px rgba(19, 241, 239, 0.16);
}

#sidebar-logo-word {
    font-size: 44px !important;
    line-height: 0.9 !important;
    letter-spacing: -0.06em !important;
    background: var(--ruliad-logo-gradient-approved) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: var(--ruliad-logo-glow-approved);
}

#auth-gate-wordmark {
    background: var(--ruliad-logo-gradient-approved) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: var(--ruliad-logo-glow-approved);
}

#sidebar-logo-mini {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border-color: rgba(59, 130, 246, 0.34);
    color: #60a5fa;
    background: #151821;
}

#sidebar-toggle-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: 1px solid var(--sidebar-border);
    background: #181b24;
    color: #8b8e99;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

#sidebar-toggle-btn:hover {
    background: #20232d;
    color: #d1d5dd;
}

#sidebar-toggle-btn svg {
    width: 1rem !important;
    height: 1rem !important;
}

#sidebar > nav,
#dash-sidebar > nav {
    padding: 0.75rem 0.75rem 1rem !important;
    background: transparent;
    scrollbar-color: #2a2e39 transparent;
}

#sidebar-identity-slot {
    margin-bottom: 1.25rem !important;
}

#sidebar-identity-slot #user-menu-btn {
    border-radius: 0.75rem !important;
    border-color: var(--sidebar-border) !important;
    background: #12151d !important;
    box-shadow: none !important;
    min-height: 3.25rem;
}

#sidebar-identity-slot #user-avatar {
    width: 2.25rem !important;
    height: 2.25rem !important;
    border: 1px solid #2b303b;
}

#sidebar-identity-slot #user-name {
    color: var(--sidebar-strong) !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0 !important;
}

.sidebar-cluster {
    margin-top: 1.25rem !important;
}

.sidebar-cluster:first-of-type {
    margin-top: 0 !important;
}

.sidebar-parent-btn,
.sidebar-section-toggle,
.sidebar-child-stack .sidebar-nav-btn,
.sidebar-child-stack .tool-launch-btn,
#auth-btn {
    min-height: 2.35rem;
    border: 1px solid transparent !important;
    border-radius: 0.5rem !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--sidebar-muted) !important;
}

.sidebar-parent-btn:hover,
.sidebar-section-toggle:hover,
.sidebar-child-stack .sidebar-nav-btn:hover,
.sidebar-child-stack .tool-launch-btn:hover,
#auth-btn:hover {
    border-color: transparent !important;
    background: #171a23 !important;
    color: var(--sidebar-text) !important;
}

.sidebar-parent-btn .nav-label,
.sidebar-section-toggle .nav-label,
.sidebar-child-stack .nav-label,
.tool-launch-btn .nav-label,
#auth-btn .nav-label {
    color: inherit !important;
    font-size: 0.8125rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    line-height: 1.15;
}

.sidebar-parent-btn > div,
.sidebar-section-toggle > div,
.sidebar-child-stack .sidebar-nav-btn > div,
.sidebar-child-stack .tool-launch-btn > div,
#auth-btn {
    gap: 0.72rem !important;
}

.sidebar-parent-btn svg,
.sidebar-section-toggle svg,
.sidebar-child-stack .sidebar-nav-btn svg,
.sidebar-child-stack .tool-launch-btn svg,
#auth-btn svg {
    width: 1.05rem !important;
    height: 1.05rem !important;
    color: #777b86 !important;
    stroke-width: 1.55;
}

.sidebar-parent-btn img,
.sidebar-section-toggle img,
.sidebar-child-stack .sidebar-nav-btn img,
.sidebar-child-stack .tool-launch-btn img {
    width: 1.05rem !important;
    height: 1.05rem !important;
    filter: brightness(0) saturate(100%) invert(54%) sepia(7%) saturate(347%) hue-rotate(188deg) brightness(91%) contrast(86%) !important;
    opacity: 0.95;
}

.sidebar-parent-chevron {
    width: 1.15rem;
    height: 1.15rem;
    flex-basis: 1.15rem;
    border: 0 !important;
    background: transparent !important;
    color: #666a75;
}

.sidebar-parent-chevron svg {
    width: 0.82rem !important;
    height: 0.82rem !important;
}

.sidebar-child-stack {
    padding-left: 0.18rem !important;
}

.sidebar-child-stack::before {
    display: none !important;
}

.sidebar-nav-btn.active.sidebar-parent-btn,
.sidebar-section-toggle.active,
.sidebar-nav-btn.active,
.sidebar-child-stack .sidebar-nav-btn.active,
.sidebar-child-stack .tool-launch-btn.active {
    border-color: var(--sidebar-active-border) !important;
    background: var(--sidebar-active-bg) !important;
    color: var(--sidebar-strong) !important;
    box-shadow: inset 3px 0 0 var(--sidebar-active) !important;
}

.sidebar-nav-btn.active svg,
.sidebar-section-toggle.active svg,
.sidebar-child-stack .sidebar-nav-btn.active svg,
.sidebar-child-stack .tool-launch-btn.active svg {
    color: var(--sidebar-active) !important;
}

.sidebar-nav-btn.active img,
.sidebar-child-stack .sidebar-nav-btn.active img,
.sidebar-child-stack .tool-launch-btn.active img {
    filter: brightness(0) saturate(100%) invert(54%) sepia(43%) saturate(2877%) hue-rotate(320deg) brightness(105%) contrast(103%) !important;
}

.workspace-dot,
.locked-dot,
#projects-live-indicator {
    width: 0.45rem !important;
    height: 0.45rem !important;
    background: #60a5fa !important;
    box-shadow: 0 0 9px rgba(59, 130, 246, 0.75) !important;
}

#sidebar.sidebar-collapsed,
#dash-sidebar.sidebar-collapsed {
    width: 4rem !important;
    min-width: 4rem !important;
}

#sidebar.sidebar-collapsed > div:first-child,
#dash-sidebar.sidebar-collapsed > div:first-child {
    height: 4rem !important;
    padding: 0 !important;
}

#sidebar.sidebar-collapsed #sidebar-toggle-btn,
#dash-sidebar.sidebar-collapsed #sidebar-toggle-btn {
    width: 2.35rem;
    height: 2.35rem;
}

#sidebar.sidebar-collapsed > nav,
#dash-sidebar.sidebar-collapsed > nav {
    padding: 0.55rem 0.45rem 0.8rem !important;
}

#sidebar.sidebar-collapsed .sidebar-cluster,
#dash-sidebar.sidebar-collapsed .sidebar-cluster {
    margin-top: 0.75rem !important;
}

#sidebar.sidebar-collapsed .sidebar-cluster::before,
#sidebar.sidebar-collapsed #sidebar-identity-slot,
#sidebar.sidebar-collapsed .sidebar-parent-chevron,
#dash-sidebar.sidebar-collapsed .sidebar-cluster::before,
#dash-sidebar.sidebar-collapsed #sidebar-identity-slot,
#dash-sidebar.sidebar-collapsed .sidebar-parent-chevron {
    display: none !important;
}

#sidebar.sidebar-collapsed .sidebar-child-stack,
#dash-sidebar.sidebar-collapsed .sidebar-child-stack {
    display: block !important;
    padding-left: 0 !important;
}

#sidebar.sidebar-collapsed .sidebar-parent-btn,
#sidebar.sidebar-collapsed .sidebar-section-toggle,
#sidebar.sidebar-collapsed .sidebar-child-stack .sidebar-nav-btn,
#sidebar.sidebar-collapsed .sidebar-child-stack .tool-launch-btn,
#dash-sidebar.sidebar-collapsed .sidebar-parent-btn,
#dash-sidebar.sidebar-collapsed .sidebar-section-toggle,
#dash-sidebar.sidebar-collapsed .sidebar-child-stack .sidebar-nav-btn,
#dash-sidebar.sidebar-collapsed .sidebar-child-stack .tool-launch-btn {
    width: 2.75rem;
    min-height: 2.5rem;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 auto 0.2rem;
}

#sidebar.sidebar-collapsed .sidebar-parent-btn > div,
#sidebar.sidebar-collapsed .sidebar-section-toggle > div,
#sidebar.sidebar-collapsed .sidebar-child-stack .sidebar-nav-btn > div,
#sidebar.sidebar-collapsed .sidebar-child-stack .tool-launch-btn > div,
#dash-sidebar.sidebar-collapsed .sidebar-parent-btn > div,
#dash-sidebar.sidebar-collapsed .sidebar-section-toggle > div,
#dash-sidebar.sidebar-collapsed .sidebar-child-stack .sidebar-nav-btn > div,
#dash-sidebar.sidebar-collapsed .sidebar-child-stack .tool-launch-btn > div {
    justify-content: center;
    gap: 0 !important;
}

#sidebar.sidebar-collapsed .sidebar-nav-btn.active,
#sidebar.sidebar-collapsed .sidebar-section-toggle.active,
#sidebar.sidebar-collapsed .tool-launch-btn.active,
#dash-sidebar.sidebar-collapsed .sidebar-nav-btn.active,
#dash-sidebar.sidebar-collapsed .sidebar-section-toggle.active,
#dash-sidebar.sidebar-collapsed .tool-launch-btn.active {
    box-shadow: inset 3px 0 0 var(--sidebar-active) !important;
}

#pro-help-card,
.sidebar-status-card,
.sidebar-toast-card {
    border-color: var(--sidebar-border) !important;
    background: #12151d !important;
    color: var(--sidebar-text) !important;
    box-shadow: none !important;
}

#sidebar-footer {
    min-height: 82px;
    height: auto !important;
    padding: 12px 14px 14px !important;
    gap: 12px;
    justify-content: flex-end;
    flex-shrink: 0;
}

#sidebar-footer #user-menu-btn {
    margin-bottom: 0 !important;
    min-height: 44px;
    padding: 8px 10px !important;
    gap: 10px;
}

#sidebar-footer-icons {
    margin-top: 0 !important;
    padding-top: 8px !important;
    gap: 10px !important;
    align-items: center;
}

#sidebar-footer-icons > button {
    width: 40px;
    height: 40px;
    padding: 0 !important;
}

#production-console-composer {
    min-height: 148px !important;
    height: auto !important;
    padding: 12px 14px !important;
    background: linear-gradient(180deg, rgba(22, 26, 33, 0.98), rgba(16, 19, 25, 0.98));
}

#production-console-composer #chat-input,
#production-console-composer #chat-dropzone {
    height: 96px;
    min-height: 96px;
    max-height: 96px;
}

#production-console-composer #chat-input {
    font-size: 1rem;
    line-height: 1.55;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#production-console-composer .production-console-mic-stack {
    width: 72px;
    justify-content: center;
    gap: 8px;
}

#production-console-composer #chat-mic-btn {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
}

#production-console-composer #chat-mic-btn svg {
    width: 32px;
    height: 32px;
}

#production-console-composer #chat-mic-status {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
}

#production-console-composer #chat-dropzone {
    padding: 0 14px;
    border-radius: 20px;
    align-items: stretch;
}

#production-console-composer #chat-mute-btn {
    align-self: flex-end;
    margin-bottom: 10px;
}

#global-shot-transport {
    min-height: 120px !important;
    height: 120px !important;
    padding: 1rem 1.25rem !important;
}

#chat-messages.production-console-message-stack .production-console-media-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

#chat-messages.production-console-message-stack .production-console-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

#chat-messages.production-console-message-stack .production-console-note-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

#chat-messages.production-console-message-stack .production-console-data-list,
#chat-messages.production-console-message-stack .production-console-score-list {
    border: 1px solid rgba(29, 78, 216, 0.34);
    background: linear-gradient(180deg, rgba(5, 11, 18, 0.98), rgba(5, 12, 19, 0.88));
    border-radius: 16px;
    overflow: hidden;
}

#chat-messages.production-console-message-stack .production-console-data-row,
#chat-messages.production-console-message-stack .production-console-score-row {
    padding: 9px 10px;
    border-bottom: 1px solid rgba(8, 47, 73, 0.75);
}

#chat-messages.production-console-message-stack .production-console-data-row:last-child,
#chat-messages.production-console-message-stack .production-console-score-row:last-child {
    border-bottom: none;
}

#chat-messages.production-console-message-stack .production-console-data-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

#chat-messages.production-console-message-stack .production-console-data-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.25;
}

#chat-messages.production-console-message-stack .production-console-data-value {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 52%;
    text-align: right;
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 800;
    word-break: break-word;
}

#chat-messages.production-console-message-stack .production-console-score-row {
    background: rgba(0, 0, 0, 0.12);
}

#chat-messages.production-console-message-stack .production-console-score-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

#chat-messages.production-console-message-stack .turbo-v2-artifact [data-img-tile] .production-console-image-caption {
    padding: 6px 8px 7px;
}

#chat-messages.production-console-message-stack .turbo-v2-artifact [data-img-tile] .production-console-image-caption p {
    line-height: 1.25;
}

#chat-messages.production-console-message-stack .turbo-v2-artifact {
    width: 100%;
    margin: 4px 0;
}

#chat-messages.production-console-message-stack .turbo-v2-artifact > div:first-child {
    padding: 9px 11px;
}

#chat-messages.production-console-message-stack .turbo-v2-artifact > div:last-child {
    padding: 8px;
}

#chat-messages.production-console-message-stack .production-console-media-grid > *,
#chat-messages.production-console-message-stack .production-console-info-grid > *,
#chat-messages.production-console-message-stack .production-console-note-grid > * {
    min-width: 0;
    width: 100%;
}

#global-shot-transport > div,
#global-shot-transport .global-shot-left-controls,
#global-shot-transport .global-shot-center-controls,
#global-shot-transport .global-shot-right-controls {
    min-height: 80px;
}

/* Storyboard runtime footer/composer alignment and locked-mode scrolling. */
:root {
    --ruliad-workspace-footer-height: 82px;
    --ruliad-workspace-footer-padding-y: 8px;
    --ruliad-workspace-footer-padding-x: 14px;
    --ruliad-workspace-footer-inner-height: 54px;
    --ruliad-production-composer-height: var(--ruliad-workspace-footer-height);
    --ruliad-transport-height: var(--ruliad-workspace-footer-height);
}

#production-console-composer,
#global-shot-transport {
    min-height: var(--ruliad-workspace-footer-height) !important;
    height: var(--ruliad-workspace-footer-height) !important;
    max-height: var(--ruliad-workspace-footer-height) !important;
    box-sizing: border-box;
    overflow: hidden !important;
}

#production-console-composer {
    padding: 7px 10px !important;
}

#production-console-composer #chat-input,
#production-console-composer #chat-dropzone {
    height: var(--ruliad-workspace-footer-inner-height) !important;
    min-height: var(--ruliad-workspace-footer-inner-height) !important;
    max-height: var(--ruliad-workspace-footer-inner-height) !important;
}

.production-console-react-shell form[data-production-console-react-composer="true"] {
    min-height: var(--ruliad-workspace-footer-height) !important;
    height: var(--ruliad-workspace-footer-height) !important;
    max-height: var(--ruliad-workspace-footer-height) !important;
    padding: var(--ruliad-workspace-footer-padding-y) 12px !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.production-console-react-shell [data-production-console-react-input-shell="true"] {
    min-height: var(--ruliad-workspace-footer-inner-height) !important;
    height: var(--ruliad-workspace-footer-inner-height) !important;
    max-height: var(--ruliad-workspace-footer-inner-height) !important;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    border-radius: 0.85rem;
    overflow: hidden;
}

.production-console-react-shell textarea[data-production-console-react-input="true"] {
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    line-height: 1.35 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.production-console-react-shell [data-production-console-react-actions="true"] {
    height: 44px;
    align-self: center;
    align-items: stretch;
}

.production-console-react-shell [data-production-console-react-mic="true"],
.production-console-react-shell [data-production-console-react-mute="true"] {
    min-height: 44px !important;
    height: 44px !important;
    width: 44px !important;
}

#app-container.has-shot-transport #main-content-area {
    min-height: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    position: relative;
}

#app-container.has-shot-transport #storyboard-grid,
#app-container.has-shot-transport #characters-grid {
    position: absolute !important;
    inset: 0;
    height: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box;
    padding-top: 0.75rem !important;
    padding-bottom: calc(var(--ruliad-workspace-footer-height) + 24px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    grid-auto-rows: auto !important;
    align-items: start;
    align-content: start;
    justify-items: stretch;
    place-content: start;
    row-gap: 1.75rem !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

#app-container.has-shot-transport #storyboard-grid > [data-storyboard-react-surface="true"] {
    grid-column: 1 / -1;
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 1.75rem;
    align-items: start;
    align-content: start;
}

@media (min-width: 768px) {
    #app-container.has-shot-transport #storyboard-grid > [data-storyboard-react-surface="true"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    #app-container.has-shot-transport #storyboard-grid > [data-storyboard-react-surface="true"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

#app-container.has-shot-transport #storyboard-grid > .asset-card,
#app-container.has-shot-transport #characters-grid > .asset-card,
#app-container.has-shot-transport #storyboard-grid > [data-storyboard-react-surface="true"] > .asset-card {
    align-self: start;
    display: flex;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

#app-container.has-shot-transport #storyboard-grid,
#app-container.has-shot-transport #characters-grid {
    column-gap: 1rem !important;
}

#app-container.has-shot-transport #global-shot-transport {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    padding: var(--ruliad-workspace-footer-padding-y) 1.25rem !important;
    pointer-events: auto;
}

#global-shot-transport > div,
#global-shot-transport .global-shot-left-controls,
#global-shot-transport .global-shot-center-controls,
#global-shot-transport .global-shot-right-controls {
    min-height: var(--ruliad-workspace-footer-inner-height) !important;
}

#global-shot-transport[data-react-storyboard-transport="true"] > :not(#global-shot-transport-react-root),
#global-shot-transport[data-react-storyboard-transport="true"] > [data-react-storyboard-original-transport="true"],
#global-shot-transport[data-react-storyboard-transport="true"] > [hidden] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#global-shot-transport[data-react-storyboard-transport="true"] #global-shot-transport-react-root {
    min-height: var(--ruliad-workspace-footer-inner-height);
    height: 100%;
    align-items: center;
    gap: 1rem;
    display: flex;
    width: 100%;
    justify-content: space-between;
    overflow: hidden;
}

#global-shot-transport[data-react-storyboard-transport="true"] #global-shot-transport-react-root > [data-storyboard-react-transport="true"] {
    display: flex !important;
    height: 100%;
    min-height: 0;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    width: 100%;
}

#global-shot-transport[data-react-storyboard-transport="true"] .global-shot-control-btn {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-radius: 0.8rem;
}

#global-shot-transport[data-react-storyboard-transport="true"] .global-shot-primary-control {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    min-height: 3rem;
}

.interaction-locked #main-content-area,
.interaction-locked #storyboard-grid,
.interaction-locked #characters-grid,
.interaction-locked #preview-modal,
.interaction-locked #image-lightbox-modal {
    pointer-events: auto !important;
}

.interaction-locked #main-content-area,
.interaction-locked #storyboard-grid,
.interaction-locked #characters-grid {
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

#signup-website:-webkit-autofill,
#signup-website:-webkit-autofill:hover,
#signup-website:-webkit-autofill:focus,
#signup-email:-webkit-autofill,
#signup-email:-webkit-autofill:hover,
#signup-email:-webkit-autofill:focus,
#signup-password:-webkit-autofill,
#signup-password:-webkit-autofill:hover,
#signup-password:-webkit-autofill:focus,
#signup-confirm-password:-webkit-autofill,
#signup-confirm-password:-webkit-autofill:hover,
#signup-confirm-password:-webkit-autofill:focus,
#auth-email:-webkit-autofill,
#auth-email:-webkit-autofill:hover,
#auth-email:-webkit-autofill:focus,
#auth-password:-webkit-autofill,
#auth-password:-webkit-autofill:hover,
#auth-password:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 9999s ease-out 0s;
    box-shadow: 0 0 0 1000px #151515 inset !important;
    -webkit-box-shadow: 0 0 0 1000px #151515 inset !important;
    background-color: #151515 !important;
    background-image: none !important;
}

#signup-website:-moz-autofill,
#signup-email:-moz-autofill,
#signup-password:-moz-autofill,
#signup-confirm-password:-moz-autofill,
#auth-email:-moz-autofill,
#auth-password:-moz-autofill {
    box-shadow: 0 0 0 1000px #151515 inset !important;
    -moz-text-fill-color: #ffffff !important;
}

#wt-target-input {
    background: #0b1220 !important;
    color: #eff6ff !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: none !important;
}

#wt-target-input:focus {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: rgba(56, 189, 248, 0.9) !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.22) !important;
}

#wt-target-input::placeholder {
    color: rgba(148, 163, 184, 0.9) !important;
}

#wt-target-input:-webkit-autofill,
#wt-target-input:-webkit-autofill:hover,
#wt-target-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f8fafc !important;
    -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
    transition: background-color 99999s ease-in-out 0s;
}

#wt-target-input:-moz-autofill {
    box-shadow: 0 0 0 1000px #0f172a inset !important;
    -moz-text-fill-color: #f8fafc !important;
}

/* Keep project-name inputs dark even when light-theme utility remaps are active. */
[data-theme="light"] #campaign-selection-create-input,
[data-theme="light"] #campaign-selection-create-input:focus,
[data-theme="light"] #campaign-selection-create-input:active,
[data-theme="light"] #campaign-selection-create-input:focus-visible,
[data-theme="light"] #campaign-selection-create-input:not(:placeholder-shown),
[data-theme="light"] #wizard-project-name-input,
[data-theme="light"] #wizard-project-name-input:focus,
[data-theme="light"] #wizard-project-name-input:active,
[data-theme="light"] #wizard-project-name-input:focus-visible,
[data-theme="light"] #wizard-project-name-input:not(:placeholder-shown) {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 0 0 1000px #0a0a0a inset !important;
    -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset !important;
    caret-color: #60a5fa !important;
    color-scheme: dark !important;
}

[data-theme="light"] #campaign-selection-create-input::placeholder,
[data-theme="light"] #wizard-project-name-input::placeholder {
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
    opacity: 1 !important;
}

[data-theme="light"] #campaign-selection-create-input:-webkit-autofill,
[data-theme="light"] #campaign-selection-create-input:-webkit-autofill:hover,
[data-theme="light"] #campaign-selection-create-input:-webkit-autofill:focus,
[data-theme="light"] #campaign-selection-create-input:-webkit-autofill:active,
[data-theme="light"] #wizard-project-name-input:-webkit-autofill,
[data-theme="light"] #wizard-project-name-input:-webkit-autofill:hover,
[data-theme="light"] #wizard-project-name-input:-webkit-autofill:focus,
[data-theme="light"] #wizard-project-name-input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 0 0 1000px #0a0a0a inset !important;
    -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset !important;
}

[data-theme="light"] #campaign-selection-create-input:-moz-autofill,
[data-theme="light"] #wizard-project-name-input:-moz-autofill {
    box-shadow: 0 0 0 1000px #0a0a0a inset !important;
    -moz-text-fill-color: #ffffff !important;
}
#welcome-screen[data-landing-mirror-ready="false"] > .max-w-full {
  opacity: 0;
  pointer-events: none;
}

#welcome-screen[data-landing-mirror-ready="true"] > .max-w-full {
  opacity: 1;
  transition: opacity 160ms ease;
}

/* Production shell: storyboard header owns title/actions, Production Console owns autonomous status. */
#app-header {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 1rem !important;
  min-width: 0 !important;
  overflow: visible !important;
}

#app-header.hidden {
  display: none !important;
}

#app-header-title-slot {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  justify-self: auto !important;
}

#main-project-title {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  text-align: left !important;
}

#app-header-action-slot {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  overflow: visible !important;
  justify-self: auto !important;
  white-space: nowrap !important;
}

#header-save-menu-wrap,
#header-export-menu-wrap {
  z-index: 95;
}

#header-storyboard-actions {
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
}

#production-console-header-shell {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(24, 34, 46, 0.9);
  background: linear-gradient(180deg, rgba(16, 19, 25, 0.98), rgba(12, 15, 21, 0.96));
}

.production-console-header {
  min-height: 4rem;
  height: auto !important;
  border-bottom: none !important;
  background: transparent !important;
}

#chat-panel.production-console-shell .production-console-header {
  min-height: 4rem;
  height: 4rem !important;
  padding: 0 1rem !important;
  background: transparent !important;
  overflow: hidden;
}

#chat-panel.production-console-shell .production-console-header h3 {
  display: none;
}

#chat-panel.production-console-shell .production-console-header-controls {
  min-width: 0;
  width: 100%;
  justify-content: flex-end;
  gap: 0.5rem;
  overflow: hidden;
}

#chat-panel.production-console-shell #open-director-modal-btn,
#chat-panel.production-console-shell .chat-panel-width-preset-btn {
  min-height: 34px;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

#chat-panel.production-console-shell #open-director-modal-btn {
  gap: 0.45rem;
  padding-left: 0.6rem;
  padding-right: 0.55rem;
  max-width: 132px;
}

#chat-panel.production-console-shell #chat-header-avatars {
  flex-shrink: 0;
}

#chat-panel.production-console-shell .production-console-team-label {
  white-space: nowrap;
}

#chat-panel.production-console-shell #production-console-recovery-controls {
  min-height: 34px;
  max-width: min(100%, 250px);
  padding: 0.25rem;
  gap: 0.25rem;
  flex: 0 1 auto;
}

#chat-panel.production-console-shell #production-console-recovery-controls button {
  min-height: 26px;
  padding: 0.3rem 0.5rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

#chat-panel.production-console-shell #chat-panel-width-presets {
  display: none !important;
}

/* Density variants (data-resize-mode set by chatPanelDensity.ts from the open width) — header only.
   Ported from Ruliad_New index.css. At the narrow 320–360px panel these keep the Team dropdown from
   overflowing/clipping: compact trims its padding/max-width; narrow also hides the "Team" label. */
#chat-panel.production-console-shell[data-resize-mode="compact"] .production-console-header {
  padding-left: 10px;
  padding-right: 10px;
}

#chat-panel.production-console-shell[data-resize-mode="compact"] #open-director-modal-btn {
  padding-left: 0.55rem;
  padding-right: 0.55rem;
  max-width: 108px;
}

#chat-panel.production-console-shell[data-resize-mode="narrow"] .production-console-header {
  padding-left: 8px;
  padding-right: 8px;
}

#chat-panel.production-console-shell[data-resize-mode="narrow"] .production-console-header-controls {
  gap: 6px;
}

#chat-panel.production-console-shell[data-resize-mode="narrow"] #open-director-modal-btn {
  max-width: 72px;
  padding-left: 0.45rem;
  padding-right: 0.4rem;
}

#chat-panel.production-console-shell[data-resize-mode="narrow"] .production-console-team-label {
  display: none;
}

#production-console-autonomous-slot {
  display: block;
}

#production-console-autonomous-slot #autonomous-lock-banner {
  min-width: 0 !important;
  width: 100% !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

#production-console-autonomous-slot #autonomous-lock-banner > div {
  width: 100% !important;
  margin: 0 !important;
}

@media (max-width: 1380px) {
  #app-header {
    flex-wrap: nowrap !important;
    row-gap: 0 !important;
  }

  #app-header-title-slot,
  #app-header-action-slot {
    max-width: none !important;
  }

  #app-header-title-slot {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  #app-header-action-slot {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    width: auto !important;
    margin-left: auto !important;
    overflow: visible !important;
  }
}

#preview-modal input[data-video-editor-react-toolbar-control="zoom"] {
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  border-radius: 999px;
  background: transparent !important;
  cursor: pointer;
}

#preview-modal input[data-video-editor-react-toolbar-control="zoom"]::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #3b82f6 0%,
    #3b82f6 var(--video-editor-zoom-percent, 50%),
    #1e3a8a var(--video-editor-zoom-percent, 50%),
    #1e3a8a 100%
  );
}

#preview-modal input[data-video-editor-react-toolbar-control="zoom"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 3px solid #e0f2fe;
  border-radius: 999px;
  background: #60a5fa;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16), 0 8px 18px rgba(29, 78, 216, 0.35);
}

#preview-modal input[data-video-editor-react-toolbar-control="zoom"]::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #3b82f6 0%,
    #3b82f6 var(--video-editor-zoom-percent, 50%),
    #1e3a8a var(--video-editor-zoom-percent, 50%),
    #1e3a8a 100%
  );
}

#preview-modal input[data-video-editor-react-toolbar-control="zoom"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid #e0f2fe;
  border-radius: 999px;
  background: #60a5fa;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16), 0 8px 18px rgba(29, 78, 216, 0.35);
}

#preview-modal #timeline-scroll-area {
  overflow-y: hidden !important;
  scrollbar-width: none;
}

#preview-modal #timeline-scroll-area::-webkit-scrollbar {
  display: none;
}

#preview-modal #nle-track-headers {
  width: 180px !important;
  flex-basis: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  border-right-color: rgba(51, 65, 85, 0.95) !important;
  box-shadow: none !important;
}

#preview-modal #nle-editor-main-grid {
  display: grid !important;
  grid-template-columns: minmax(18rem, 20rem) minmax(0, 1fr);
  grid-template-rows: minmax(180px, 0.78fr) minmax(420px, auto);
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-left-color: rgba(31, 41, 55, 0.95) !important;
  box-shadow: none !important;
}

#preview-modal #nle-editor-main-grid[data-context-sidebar-collapsed="true"] {
  grid-template-columns: 56px minmax(0, 1fr);
}

#preview-modal #nle-upper-region {
  display: contents !important;
}

#preview-modal #nle-context-sidebar {
  grid-column: 1;
  grid-row: 1 / 3;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  border-right: 1px solid rgba(31, 41, 55, 0.95) !important;
  box-shadow: none !important;
}

#preview-modal #nle-context-sidebar[data-collapsed="true"] {
  width: 56px !important;
  flex-basis: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
}

#preview-modal #nle-context-sidebar[data-collapsed="true"] #nle-context-title,
#preview-modal #nle-context-sidebar[data-collapsed="true"] #nle-context-content,
#preview-modal #nle-context-sidebar[data-collapsed="true"] #nle-context-resizer {
  display: none !important;
}

#preview-modal #nle-context-sidebar[data-collapsed="true"] > .theme-bg-header {
  height: 100% !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 12px 8px !important;
  border-bottom: 0 !important;
}

#preview-modal #nle-context-sidebar[data-collapsed="true"] #nle-context-collapse-btn {
  margin: 0 !important;
  height: 76px !important;
  width: 40px !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 6px 0 !important;
  writing-mode: horizontal-tb !important;
}

#preview-modal #nle-context-sidebar[data-collapsed="true"] #nle-context-collapse-btn span {
  font-size: 8px !important;
  letter-spacing: 0.05em !important;
}

#preview-modal #nle-context-content {
  min-height: 0 !important;
}

#preview-modal #nle-player-area {
  grid-column: 2;
  grid-row: 1;
  min-height: 0 !important;
  max-height: calc(100dvh - var(--ruliad-timeline-shell-height, 500px)) !important;
  overflow: hidden !important;
}

#preview-modal #nle-timeline-shell {
  grid-column: 2;
  grid-row: 2;
  min-height: 420px !important;
  max-height: min(68dvh, var(--ruliad-timeline-shell-max-height, 760px)) !important;
  overflow: hidden !important;
  border-left-color: rgba(31, 41, 55, 0.95) !important;
  box-shadow: none !important;
}

#preview-modal #timeline-scroll-area,
#preview-modal #timeline-tracks-area {
  min-height: 0 !important;
}

#preview-modal #timeline-container,
#preview-modal #timeline-scroll-area,
#preview-modal #timeline-tracks-area {
  border-left-color: rgba(31, 41, 55, 0.95) !important;
  border-right-color: rgba(31, 41, 55, 0.95) !important;
  box-shadow: none !important;
}

#preview-modal #timeline-playhead-indicator {
  background: rgb(71, 85, 105) !important;
  box-shadow: none !important;
}

#preview-modal #timeline-playhead-indicator .playhead-marker {
  border-color: rgba(148, 163, 184, 0.85) !important;
  background: rgb(71, 85, 105) !important;
  box-shadow: none !important;
}

#preview-modal .nle-nav-btn.active {
  background: rgba(59, 130, 246, 0.10) !important;
  border-color: rgba(59, 130, 246, 0.34) !important;
  color: #e0f7ff !important;
  box-shadow: none !important;
}

#preview-modal .nle-nav-btn.active::after {
  content: none !important;
  display: none !important;
}

#storyboard-grid .asset-card .loading-overlay,
#characters-grid .asset-card .loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.82);
  border-radius: inherit;
  color: #60a5fa;
  pointer-events: none;
}

#storyboard-grid .asset-card .loading-overlay.flex,
#characters-grid .asset-card .loading-overlay.flex {
  display: flex !important;
}

#storyboard-grid .asset-card .loading-message,
#characters-grid .asset-card .loading-message {
  color: #60a5fa;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.storyboard-processing-spinner {
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid rgba(59, 130, 246, 0.34);
  border-top-color: #60a5fa;
  border-radius: 999px;
  animation: storyboard-processing-spin 0.7s linear infinite;
}

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

/* React Clip Miner: use the app cyan/blue system instead of white utility borders. */
[data-storyboard-react-clip-miner-modal="true"] .theme-bg-panel,
[data-storyboard-react-clip-miner-modal="true"] [class*="border-white"],
[data-storyboard-react-clip-miner-modal="true"] [class*="border-gray"],
[data-storyboard-react-clip-miner-modal="true"] [class*="border-slate"] {
  border-color: rgba(59, 130, 246, 0.52) !important;
}

[data-storyboard-react-clip-miner-modal="true"] #clip-miner-media-frame,
[data-storyboard-react-clip-miner-modal="true"] #clip-miner-timeline,
[data-storyboard-react-clip-miner-modal="true"] .clip-miner-trim-selection,
[data-storyboard-react-clip-miner-modal="true"] .clip-miner-panel {
  border-color: rgba(56, 189, 248, 0.72) !important;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.12), 0 0 26px rgba(14, 165, 233, 0.08) !important;
}

[data-storyboard-react-clip-miner-modal="true"] #trimmer-playhead {
  background: #60a5fa !important;
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.62) !important;
}

#account-modal {
  bottom: 12px;
  left: 5rem;
  width: min(19.25rem, calc(100vw - 6rem));
  max-height: calc(100vh - 24px);
}

#account-modal #account-modal-panel {
  width: 100%;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  background: rgba(28, 28, 29, 0.98);
  padding: 10px 0;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(18px);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

#account-modal .account-popover-summary {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 3px 12px 8px;
}

.account-popover-profile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.account-popover-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #0ea5e9;
  object-fit: cover;
}

.account-popover-email,
.account-popover-name {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-popover-email {
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.83rem;
  font-weight: 650;
  line-height: 1.25;
}

.account-popover-name-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.account-popover-name {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.76rem;
}

.account-popover-plan {
  flex: 0 0 auto;
  border: 1px solid rgba(59, 130, 246, 0.45);
  border-radius: 999px;
  padding: 2px 9px;
  color: #8ff4ff;
  font-size: 0.68rem;
  font-weight: 750;
}

.account-icon-button {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
}

.account-icon-button svg,
.account-row-icon svg {
  width: 17px;
  height: 17px;
}

#account-modal .account-popover-credits {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding: 0;
}

#account-modal .account-popover-credits span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

#account-modal .account-popover-credits strong {
  color: #67e8f9;
  font-size: 0.98rem;
}

.account-subscription-row,
.account-popover-item {
  display: flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  padding: 7px 12px;
  text-align: left;
}

.account-subscription-row {
  min-height: 39px;
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.account-subscription-row em {
  margin-left: auto;
  border-radius: 7px;
  background: #0ea5e9;
  padding: 4px 9px;
  color: white;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.account-avatar-upload-plus {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 2px solid rgba(10, 12, 16, 0.92);
  border-radius: 999px;
  background: #0ea5e9;
  color: #fff;
  box-shadow: 0 5px 14px rgba(14, 165, 233, 0.35);
}

.account-avatar-upload-plus svg {
  width: 14px;
  height: 14px;
}

#avatar-cropper-modal {
  z-index: 160 !important;
}

.account-popover-section {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 6px;
  padding: 7px 8px 0;
}

.account-popover-section:first-of-type {
  border-top: 0;
}

.account-popover-section-label {
  margin: 0 0 8px;
  padding: 0 12px;
  color: rgba(103, 232, 249, 0.92);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: left;
}

.account-popover-tools-section .account-popover-section-label {
  display: block;
  grid-template-columns: none;
  column-gap: 0;
  padding-left: 12px;
}

.account-popover-tools-section .account-popover-section-label .account-row-icon,
.account-popover-admin .account-popover-section-label .account-row-icon {
  display: none;
}

.account-popover-tools-section .account-popover-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 11px;
}

.account-popover-home-link,
.account-popover-home-link .account-row-icon {
  color: rgba(103, 232, 249, 0.96);
}

.account-popover-home-link:hover {
  color: #ffffff;
}

.account-popover-settings-label {
  margin-top: 2px;
}

.account-popover-item:hover,
.account-icon-button:hover,
.account-subscription-row:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.account-popover-item-pending,
.account-popover-item-pending:hover {
  cursor: wait;
  opacity: 0.72;
  background: rgba(14, 165, 233, 0.1);
  color: #dff9ff;
}

.account-row-icon {
  display: inline-grid;
  width: 19px;
  flex: 0 0 19px;
  height: 19px;
  place-items: center;
  color: rgba(255, 255, 255, 0.66);
}

.account-popover-tools-section .account-row-icon {
  width: 20px;
  height: 20px;
  justify-self: center;
}

.account-popover-item span:nth-child(2),
.account-subscription-row > span:nth-child(2) {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-popover-item small {
  display: block;
  margin-left: -2px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.7rem;
}

.account-row-chevron {
  margin-left: auto;
  flex: 0 0 auto !important;
  color: rgba(255, 255, 255, 0.46);
  font-size: 1rem !important;
}

.account-popover-admin {
  padding-bottom: 8px;
}

.account-popover-logout {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
  margin-top: 0;
  padding: 12px 20px 9px !important;
}

#sidebar-footer {
  background: rgba(7, 9, 12, 0.78);
}

#sidebar-footer #sidebar-identity-slot {
  margin-bottom: 0 !important;
}

#sidebar.sidebar-collapsed #sidebar-footer,
#dash-sidebar.sidebar-collapsed #sidebar-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 12px 12px !important;
}

#sidebar.sidebar-collapsed #sidebar-footer #user-menu-btn,
#sidebar.sidebar-collapsed #sidebar-footer #auth-btn,
#dash-sidebar.sidebar-collapsed #sidebar-footer #user-menu-btn,
#dash-sidebar.sidebar-collapsed #sidebar-footer #auth-btn {
  width: 48px !important;
  height: 48px;
  min-height: 48px;
  border-radius: 12px !important;
  padding: 0 !important;
}

#sidebar.sidebar-collapsed #sidebar-footer #user-avatar,
#dash-sidebar.sidebar-collapsed #sidebar-footer #user-avatar {
  width: 38px !important;
  height: 38px !important;
}

/* Keep the account trigger tight to the floor of the visible sidebar rail. */
#sidebar #sidebar-footer,
#dash-sidebar #sidebar-footer {
  min-height: 64px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 6px 12px 8px !important;
}

#sidebar #sidebar-footer #sidebar-identity-slot,
#dash-sidebar #sidebar-footer #sidebar-identity-slot {
  display: block !important;
  width: 100%;
}

#sidebar #sidebar-footer #user-menu-btn,
#sidebar #sidebar-footer #auth-btn,
#dash-sidebar #sidebar-footer #user-menu-btn,
#dash-sidebar #sidebar-footer #auth-btn {
  margin: 0 !important;
}

#sidebar.sidebar-collapsed #sidebar-footer,
#dash-sidebar.sidebar-collapsed #sidebar-footer {
  min-height: 56px !important;
  align-items: center !important;
  padding: 4px 8px 6px !important;
}

#sidebar.sidebar-collapsed #sidebar-footer #sidebar-identity-slot,
#dash-sidebar.sidebar-collapsed #sidebar-footer #sidebar-identity-slot {
  display: block !important;
  width: 100%;
}

#welcome-screen [data-homepage-collapsible-section],
#main-welcome-screen [data-homepage-collapsible-section] {
  box-sizing: border-box;
  max-width: min(100%, 84rem) !important;
  margin-top: 0 !important;
  margin-bottom: 0.9rem !important;
  padding-right: clamp(1rem, 2vw, 1.5rem) !important;
  padding-left: clamp(1rem, 2vw, 1.5rem) !important;
}

#app,
#app-container,
#welcome-screen,
#main-welcome-screen {
  max-width: 100%;
  overflow-x: hidden !important;
}

#welcome-screen > .max-w-full,
#main-welcome-screen > .max-w-full {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
  overflow-x: hidden !important;
}

#main-welcome-screen > .max-w-full {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding-bottom: 0 !important;
}

#welcome-screen [data-homepage-hero-intro],
#main-welcome-screen [data-homepage-hero-intro] {
  margin-bottom: 0 !important;
  width: 100%;
  max-width: 84rem;
  padding-top: clamp(1.35rem,3vh,2.75rem)!important;
  box-sizing: border-box;
}

#welcome-screen [data-homepage-hero-intro] h2,
#main-welcome-screen [data-homepage-hero-intro] h2 {
  box-sizing: border-box;
  max-width: min(100%, 62rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(0.5rem, 1.25vw, 1rem);
  padding-right: clamp(0.5rem, 1.25vw, 1rem);
  font-size: clamp(1.55rem, 5.5vw, 3rem) !important;
  font-weight: 900 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.04em !important;
  word-spacing: normal;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: geometricPrecision;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

@media (min-width: 900px) {
  #welcome-screen [data-homepage-hero-intro] h2,
  #main-welcome-screen [data-homepage-hero-intro] h2 {
    font-size: clamp(4.45rem, 6.4vw, 6.2rem) !important;
  }
}

#welcome-screen [data-homepage-hero-intro] h2 span,
#main-welcome-screen [data-homepage-hero-intro] h2 span {
  max-width: 100%;
  white-space: normal !important;
}

#welcome-screen [data-homepage-hero-intro] [data-homepage-expressway-host="hero"],
#main-welcome-screen [data-homepage-hero-intro] [data-homepage-expressway-host="hero"] {
  margin-top: clamp(1.75rem, 3.5vh, 2.75rem) !important;
}

#welcome-screen [data-homepage-hero-intro] h2 span:nth-child(1),
#main-welcome-screen [data-homepage-hero-intro] h2 span:nth-child(1) {
  font-size: 0.36em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
  margin-bottom: 0.35em;
}

#welcome-screen [data-homepage-hero-intro] h2 span:nth-child(2),
#main-welcome-screen [data-homepage-hero-intro] h2 span:nth-child(2) {
  font-size: 1.34em;
  line-height: 0.9;
}

#welcome-screen [data-homepage-hero-intro] h2 span:nth-child(3),
#main-welcome-screen [data-homepage-hero-intro] h2 span:nth-child(3) {
  font-size: 1.31em;
  line-height: 0.9;
  margin-top: 0.06em;
}

#welcome-screen [data-homepage-hero-intro] > div:has(img[alt="Ruliad homepage cinematic preview"]),
#main-welcome-screen [data-homepage-hero-intro] > div:has(img[alt="Ruliad homepage cinematic preview"]) {
  width: 100% !important;
  max-width: min(100%, 54rem) !important;
  margin-bottom: clamp(2.75rem, 5vh, 4.75rem) !important;
}

#welcome-screen [data-homepage-hero-intro] img[alt="Ruliad homepage cinematic preview"],
#main-welcome-screen [data-homepage-hero-intro] img[alt="Ruliad homepage cinematic preview"] {
  width: 100%;
}

#welcome-screen [data-homepage-collapsible-section] > :first-child,
#main-welcome-screen [data-homepage-collapsible-section] > :first-child {
  margin-bottom: 0 !important;
}

#welcome-screen [data-homepage-collapsible-section][data-homepage-section-expanded="1"],
#main-welcome-screen [data-homepage-collapsible-section][data-homepage-section-expanded="1"] {
  margin-bottom: 2rem !important;
}

#welcome-screen [data-homepage-collapsible-section][data-homepage-section-expanded="1"] > :first-child,
#main-welcome-screen [data-homepage-collapsible-section][data-homepage-section-expanded="1"] > :first-child {
  margin-bottom: 1rem !important;
}

#welcome-screen [data-homepage-section-content] > .grid,
#main-welcome-screen [data-homepage-section-content] > .grid {
  box-sizing: border-box;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  justify-content: center;
  justify-items: stretch;
}

#welcome-screen [data-homepage-section-content] > .grid:has(.landing-video-trigger),
#main-welcome-screen [data-homepage-section-content] > .grid:has(.landing-video-trigger),
#welcome-screen [data-homepage-section-content] > .grid:has(.workflow-card),
#main-welcome-screen [data-homepage-section-content] > .grid:has(.workflow-card),
#welcome-screen [data-homepage-section-content] > .grid:has(.tool-launch-btn),
#main-welcome-screen [data-homepage-section-content] > .grid:has(.tool-launch-btn) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 26rem)) !important;
}

#welcome-screen [data-homepage-section-toggle],
#main-welcome-screen [data-homepage-section-toggle],
#homepage-sponsors-main h2 {
  min-height: 2.15rem;
  align-items: center;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

#welcome-screen [data-homepage-section-toggle],
#main-welcome-screen [data-homepage-section-toggle],
#homepage-sponsors-main h2 {
  display: grid !important;
  grid-template-columns: 1.15rem 24rem minmax(3rem, 1fr);
  column-gap: 0.75rem;
}

#welcome-screen [data-homepage-section-toggle] > span:nth-child(2),
#main-welcome-screen [data-homepage-section-toggle] > span:nth-child(2),
#homepage-sponsors-main h2 > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#welcome-screen [data-homepage-section-toggle] > .h-px,
#main-welcome-screen [data-homepage-section-toggle] > .h-px,
#homepage-sponsors-main h2 > .h-px {
  width: 100%;
}

#homepage-footer,
#homepage-footer-main {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}

.homepage-sponsor-grid {
  max-width: min(100%, 70rem);
  margin-right: auto;
  margin-left: auto;
}

.homepage-sponsor-card {
  border-radius: 1rem !important;
}

@media (max-width: 700px) {
  #welcome-screen [data-homepage-section-toggle],
  #main-welcome-screen [data-homepage-section-toggle] {
    grid-template-columns: 1.15rem minmax(9rem, 1fr);
  }

  #welcome-screen [data-homepage-section-toggle] > .h-px,
  #main-welcome-screen [data-homepage-section-toggle] > .h-px {
    display: none;
  }

  .homepage-sponsor-grid {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .homepage-sponsor-card {
    width: min(100%, 18rem) !important;
    max-width: 100% !important;
    padding-right: 0.4rem !important;
    padding-left: 0.4rem !important;
  }
}

/* Create-template modal inputs must stay dark under focus and browser autofill. */
#template-create-modal .template-create-input,
#template-create-modal .template-create-input:hover,
#template-create-modal .template-create-input:focus,
#template-create-modal .template-create-input:active,
#template-create-modal .template-create-input:focus-visible {
  background: #10151c !important;
  background-color: #10151c !important;
  background-image: none !important;
  border-color: #374151 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #67e8f9 !important;
  box-shadow: none !important;
  outline: none !important;
  color-scheme: dark;
}

#template-create-modal .template-create-input:-webkit-autofill,
#template-create-modal .template-create-input:-webkit-autofill:hover,
#template-create-modal .template-create-input:-webkit-autofill:focus,
#template-create-modal .template-create-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #10151c inset !important;
  box-shadow: 0 0 0 1000px #10151c inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #67e8f9 !important;
  transition: background-color 9999s ease-out 0s;
}

.sidebar-nav-btn.media-architect-syncing {
  border-color: rgba(59, 130, 246, 0.78) !important;
  background: linear-gradient(180deg, rgba(7, 45, 58, 0.98), rgba(7, 26, 36, 0.98)) !important;
  color: #f4fdff !important;
  box-shadow: inset 3px 0 0 #60a5fa, 0 0 0 1px rgba(59, 130, 246, 0.24), 0 0 22px rgba(59, 130, 246, 0.28) !important;
}

.sidebar-nav-btn.media-architect-syncing .workspace-dot {
  display: inline-flex !important;
  animation: mediaArchitectSidebarPulse 1s ease-in-out infinite;
}

@keyframes mediaArchitectSidebarPulse {
  0%, 100% {
    opacity: 0.65;
    transform: scale(0.86);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.72);
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.95);
  }
}

/* ===== inline <style> 48-65 from Ruliad_New index.html ===== */
        /* NOTE: this rule never actually applies in Ruliad_New — its <body> carries Tailwind's
           `font-sans` class, and a class selector (0,1,0) outranks this element selector (0,0,1),
           so the source renders body text in the preflight stack (ui-sans-serif -> system UI
           font), not Inter. index.html must keep `font-sans` on <body> or this rule starts
           winning and every screen silently diverges from the source. */
        body { font-family: 'Inter', sans-serif; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        @keyframes promo-offer-pulse {
            0%, 100% {
                color: #e5e7eb;
                text-shadow: 0 0 0 rgba(59, 130, 246, 0);
            }
            50% {
                color: #dbeafe;
                text-shadow: 0 0 10px rgba(59, 130, 246, 0.75), 0 0 24px rgba(14, 116, 144, 0.55);
            }
        }
        .promo-offer-copy {
            animation: promo-offer-pulse 2.2s ease-in-out infinite;
        }

/* ===== inline <style> 91-492 from Ruliad_New index.html ===== */
    html,
    body {
        margin: 0;
        min-height: 100%;
        background: #050505;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    #app,
    #app-container,
    #welcome-screen,
    #main-welcome-screen {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    #welcome-screen > .max-w-full,
    #main-welcome-screen > .max-w-full {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
        overflow-x: hidden !important;
    }

    [data-homepage-collapsible-section][data-homepage-section-expanded="0"] {
        margin-bottom: 0.95rem !important;
    }

    [data-homepage-collapsible-section][data-homepage-section-expanded="0"] > div:first-child {
        margin-bottom: 0 !important;
    }

    [data-homepage-collapsible-section][data-homepage-section-id="multi-modal-media"] > div:first-child {
        margin-bottom: 0.8rem !important;
    }

    [data-homepage-section-toggle] {
        display: grid !important;
        grid-template-columns: 1.15rem 24rem minmax(3rem, 1fr);
        column-gap: 0.75rem;
        align-items: center;
        min-height: 2.45rem;
    }

    [data-homepage-section-toggle] > span:nth-child(2) {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    [data-homepage-section-toggle] > .h-px {
        width: 100%;
    }

    @media (max-width: 760px) {
        [data-homepage-section-toggle] {
            grid-template-columns: 1.15rem minmax(9rem, 1fr);
        }

        [data-homepage-section-toggle] > .h-px {
            display: none;
        }
    }

    [data-homepage-hero-intro] {
        width: 100%;
        max-width: 84rem;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box;
    }

    [data-homepage-hero-intro] h2 {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        font-size: clamp(2.35rem, 4vw, 4.25rem) !important;
        line-height: 0.98 !important;
        letter-spacing: 0 !important;
        text-wrap: balance;
    }

    [data-homepage-hero-intro] h2 span {
        overflow-wrap: normal;
        white-space: normal;
    }

    [data-homepage-hero-intro] [data-homepage-expressway-host="hero"] {
        max-width: min(100%, 46rem) !important;
        margin-top: clamp(1.75rem,3.5vh,2.75rem)!important;
        margin-bottom: 0.75rem !important;
    }

    [data-homepage-hero-intro] .homepage-expressway-composer {
        max-width: min(100%, 42rem) !important;
    }

    [data-homepage-hero-intro] .homepage-expressway-input-row {
        min-height: 4.25rem !important;
    }

    [data-homepage-hero-intro] .homepage-expressway-launch {
        min-height: 2.75rem !important;
    }

    [data-homepage-hero-intro] > div:has(img[alt="Ruliad homepage cinematic preview"]) {
        width: 100% !important;
        max-width: min(100%, 54rem) !important;
        margin-top: -0.25rem !important;
        margin-bottom: clamp(2.75rem,5vh,4.75rem)!important;
    }

    [data-homepage-hero-intro] img[alt="Ruliad homepage cinematic preview"] {
        width: 100%;
        max-height: min(30vh, 20rem);
        object-fit: cover;
        object-position: center 38%;
    }

    [data-homepage-collapsible-section] {
        box-sizing: border-box;
        max-width: min(100%, 84rem) !important;
    }

    @media (max-height: 760px) {
        [data-homepage-hero-intro] h2 {
            font-size: clamp(2.25rem, 4vw, 3.75rem) !important;
        }

        [data-homepage-hero-intro] img[alt="Ruliad homepage cinematic preview"] {
            max-height: 24vh;
        }
    }

    #global-app-loader {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        isolation: isolate;
        background-color: #050505;
        background-image: none;
        transition: opacity 700ms ease;
    }

    #global-app-loader.hidden {
        display: none;
    }

    body[data-ruliad-loader-dismissed="true"] #global-app-loader {
        pointer-events: none !important;
        visibility: hidden !important;
    }

    body[data-ruliad-loader-dismissed="true"] #global-app-loader.hidden,
    body[data-ruliad-app-ready="true"] #global-app-loader.hidden {
        display: none !important;
    }

    html[data-ruliad-boot-visible="true"] #global-app-loader.hidden,
    body:not([data-ruliad-app-ready="true"]) #global-app-loader.hidden {
        display: flex !important;
    }

    #global-app-loader.opacity-0 {
        opacity: 0;
        pointer-events: none;
    }

    body[data-ruliad-loader-dismissed="true"] #global-app-loader.opacity-0,
    body[data-ruliad-app-ready="true"] #global-app-loader.opacity-0 {
        opacity: 0 !important;
    }

    html[data-ruliad-boot-visible="true"] #global-app-loader.opacity-0,
    body:not([data-ruliad-app-ready="true"]) #global-app-loader.opacity-0 {
        opacity: 1 !important;
    }

    #global-app-loader::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 50% 28%, rgba(10, 168, 194, 0.24), transparent 25rem),
            linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.9));
        pointer-events: none;
    }

    @keyframes ruliad-boot-progress-sweep {
        0% {
            transform: translateX(-145%);
            opacity: 0.35;
        }
        12% {
            opacity: 1;
        }
        88% {
            opacity: 0.94;
        }
        100% {
            transform: translateX(650%);
            opacity: 0.4;
        }
    }

    .ruliad-boot-loader {
        position: relative;
        z-index: 1;
        display: flex;
        width: min(68rem, calc(100vw - 8rem));
        flex-direction: column;
        align-items: center;
        padding: 2.4rem 1rem 2rem;
        text-align: center;
        box-sizing: border-box;
        transform: scale(0.67);
        transform-origin: center center;
    }

    .ruliad-boot-wordmark {
        display: block;
        margin-bottom: 2.8rem;
        color: transparent;
        background: linear-gradient(90deg, #07506f 0%, #0db4d5 52%, #bfdbfe 100%);
        -webkit-background-clip: text;
        background-clip: text;
        font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: clamp(5rem, 8.8vw, 8.6rem);
        font-weight: 900;
        letter-spacing: -0.058em;
        line-height: 1;
        padding-top: 0.12em;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 0 1.75rem rgba(59, 130, 246, 0.34));
    }

    .ruliad-boot-progress-shell {
        position: relative;
        width: 100%;
        max-width: 64rem;
        height: 0.45rem;
        overflow: hidden;
        border: 1px solid rgba(29, 78, 216, 0.62);
        border-radius: 999px;
        background: rgba(0, 16, 22, 0.92);
        box-shadow:
            0 0 0 1px rgba(103, 232, 249, 0.08),
            0 0 1.5rem rgba(29, 78, 216, 0.22);
    }

    .ruliad-boot-progress-shell::after {
        content: none;
        display: none;
    }

    #global-loader-progress.ruliad-boot-progress {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 18% !important;
        min-width: 7rem;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, rgba(29, 78, 216, 0), #e0fbff 26%, #67e8f9 52%, rgba(29, 78, 216, 0));
        box-shadow: 0 0 1.4rem rgba(103, 232, 249, 0.92), 0 0 0.55rem rgba(224, 251, 255, 0.9);
        animation: ruliad-boot-progress-sweep 1.45s linear infinite;
        transform: translateX(-145%);
        transition: none;
        will-change: transform, opacity;
    }

    .ruliad-boot-status,
    .ruliad-boot-substatus {
        margin-top: 2.1rem;
        color: rgba(191, 219, 254, 0.86);
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
        font-size: 1.05rem;
        letter-spacing: 0.34em;
        line-height: 1.4;
        text-transform: uppercase;
        text-shadow: 0 0 0.9rem rgba(103, 232, 249, 0.45);
    }

    .ruliad-boot-substatus {
        margin-top: 1.55rem;
        color: rgba(148, 163, 184, 0.74);
        text-shadow: none;
    }

    .ruliad-boot-primary-copy,
    .ruliad-boot-secondary-copy {
        max-width: 60rem;
        margin: 1.65rem auto 0;
        color: rgba(244, 244, 245, 0.9);
        font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: clamp(1.05rem, 1.38vw, 1.45rem);
        line-height: 1.35;
        text-shadow: 0 0 1.2rem rgba(255, 255, 255, 0.16);
    }

    .ruliad-boot-secondary-copy {
        max-width: 58rem;
        margin-top: 1.5rem;
        color: rgba(161, 161, 170, 0.78);
        font-size: clamp(0.86rem, 0.96vw, 1rem);
    }

    #global-app-loader[data-file-preview="true"] #global-loader-progress {
        width: 100% !important;
        min-width: 0;
        animation: none;
        transform: none;
    }

    #global-app-loader[data-file-preview="true"] #global-loader-status {
        color: rgba(191, 219, 254, 0.92);
    }

    #global-app-loader[data-file-preview="true"] .ruliad-boot-substatus::after {
        content: " Open through the local dev server or deployed site to run the app.";
        display: block;
        margin-top: 0.7rem;
        color: rgba(244, 244, 245, 0.7);
        font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 0.76rem;
        letter-spacing: 0;
        line-height: 1.4;
        text-transform: none;
    }

    #global-loader-error {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin-top: 1rem;
        color: #ef4444;
        font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 0.875rem;
        text-align: center;
    }

    #global-loader-error.hidden {
        display: none;
    }

    #global-loader-error button {
        border: 1px solid rgba(127, 29, 29, 0.5);
        border-radius: 0.25rem;
        background: rgba(127, 29, 29, 0.3);
        color: #f87171;
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
        font-weight: 700;
        cursor: pointer;
    }

    @media (max-width: 700px) {
        .ruliad-boot-loader {
            width: min(100%, calc(100vw - 2rem));
            padding: 1.5rem 0 1.25rem;
            transform: scale(0.82);
        }

        .ruliad-boot-wordmark {
            margin-bottom: 1.75rem;
            font-size: 4.3rem;
        }

        .ruliad-boot-status,
        .ruliad-boot-substatus {
            font-size: 0.78rem;
        }

        .ruliad-boot-primary-copy {
            font-size: 1.05rem;
        }

        .ruliad-boot-secondary-copy {
            font-size: 0.92rem;
        }
    }

    #app-container.interaction-locked::after {
        content: none !important;
        display: none !important;
    }
    #welcome-screen[data-logged-out-mirror-state="booting"] > .max-w-full {
        visibility: hidden;
    }

/* Fix: keep the section-toggle divider line thin (grid default stretches it). */
#welcome-screen [data-homepage-section-toggle],
#main-welcome-screen [data-homepage-section-toggle] {
  align-items: center;
}
#welcome-screen [data-homepage-section-toggle] > .h-px,
#main-welcome-screen [data-homepage-section-toggle] > .h-px {
  background-color: #1f2937 !important;
  height: 1px !important;
}

/* ===== Landing base text color + signup modal (app additions) ===== */
.ruliad-landing-root { color: #e6e9ef; }

.ruliad-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  padding: 1rem;
}
.ruliad-modal {
  width: 100%;
  max-width: 380px;
  background: #121212;
  border: 1px solid #1f2937;
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  position: relative;
  color: #e6e9ef;
}
.ruliad-modal h2 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1rem;
}
.ruliad-modal form { display: flex; flex-direction: column; gap: 0.75rem; }
.ruliad-modal input {
  padding: 0.7rem 0.85rem;
  background: #1a1c1e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #e6e9ef;
  font-size: 0.95rem;
}
.ruliad-modal input::placeholder { color: #6b7280; }
.ruliad-modal-submit {
  margin-top: 0.25rem;
  padding: 0.7rem;
  background: #2563eb;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.ruliad-modal-submit:disabled { opacity: 0.6; cursor: default; }
.ruliad-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  background: none;
  border: none;
  color: #9aa4b2;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.ruliad-modal-switch {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: #9aa4b2;
}
.ruliad-modal-switch button {
  background: none;
  border: none;
  color: #60a5fa;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.ruliad-modal-error {
  background: rgba(220, 38, 38, 0.15);
  color: #fca5a5;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  margin: 0;
}

/* Explicit chevron rotation (don't rely on Tailwind's group-aria arbitrary variant). */
[data-homepage-section-toggle] [data-homepage-section-chevron] {
  transition: transform 0.2s ease;
  display: inline-block;
}
/* collapsed → point right, like the SPONSORS arrow */
[data-homepage-section-toggle][aria-expanded="false"] [data-homepage-section-chevron] {
  transform: rotate(0deg) !important;
}
/* expanded → point down */
[data-homepage-section-toggle][aria-expanded="true"] [data-homepage-section-chevron] {
  transform: rotate(90deg) !important;
}

/* (Removed the forced dark scrollbar block for the wizard + landing so macOS uses
   its native overlay scrollbar — auto-hiding and light — matching Ruliad_New.) */

/* Global app boot loader (verbatim from Ruliad_New index.html inline styles). */
#global-app-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background-color: #050505;
  background-image: none;
  transition: opacity 700ms ease;
}

#global-app-loader.hidden {
  display: none;
}

#global-app-loader.opacity-0 {
  opacity: 0;
  pointer-events: none;
}

#global-app-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 28%, rgba(10, 168, 194, 0.24), transparent 25rem),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.9));
  pointer-events: none;
}

@keyframes ruliad-boot-progress-sweep {
  0% {
    transform: translateX(-145%);
    opacity: 0.35;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 0.94;
  }
  100% {
    transform: translateX(650%);
    opacity: 0.4;
  }
}

.ruliad-boot-loader {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(68rem, calc(100vw - 8rem));
  flex-direction: column;
  align-items: center;
  padding: 2.4rem 1rem 2rem;
  text-align: center;
  box-sizing: border-box;
  transform: scale(0.67);
  transform-origin: center center;
}

.ruliad-boot-wordmark {
  display: block;
  margin-bottom: 2.8rem;
  color: transparent;
  background: linear-gradient(90deg, #07506f 0%, #0db4d5 52%, #bfdbfe 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(5rem, 8.8vw, 8.6rem);
  font-weight: 900;
  letter-spacing: -0.058em;
  line-height: 1;
  padding-top: 0.12em;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 1.75rem rgba(59, 130, 246, 0.34));
}

.ruliad-boot-progress-shell {
  position: relative;
  width: 100%;
  max-width: 64rem;
  height: 0.45rem;
  overflow: hidden;
  border: 1px solid rgba(29, 78, 216, 0.62);
  border-radius: 999px;
  background: rgba(0, 16, 22, 0.92);
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.08),
    0 0 1.5rem rgba(29, 78, 216, 0.22);
}

#global-loader-progress.ruliad-boot-progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 18% !important;
  min-width: 7rem;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(29, 78, 216, 0), #e0fbff 26%, #67e8f9 52%, rgba(29, 78, 216, 0));
  box-shadow: 0 0 1.4rem rgba(103, 232, 249, 0.92), 0 0 0.55rem rgba(224, 251, 255, 0.9);
  animation: ruliad-boot-progress-sweep 1.45s linear infinite;
  transform: translateX(-145%);
  transition: none;
  will-change: transform, opacity;
}

.ruliad-boot-status,
.ruliad-boot-substatus {
  margin-top: 2.1rem;
  color: rgba(191, 219, 254, 0.86);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 1.05rem;
  letter-spacing: 0.34em;
  line-height: 1.4;
  text-transform: uppercase;
  text-shadow: 0 0 0.9rem rgba(103, 232, 249, 0.45);
}

.ruliad-boot-substatus {
  margin-top: 1.55rem;
  color: rgba(148, 163, 184, 0.74);
  text-shadow: none;
}

.ruliad-boot-primary-copy,
.ruliad-boot-secondary-copy {
  max-width: 60rem;
  margin: 1.65rem auto 0;
  color: rgba(244, 244, 245, 0.9);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.05rem, 1.38vw, 1.45rem);
  line-height: 1.35;
  text-shadow: 0 0 1.2rem rgba(255, 255, 255, 0.16);
}

.ruliad-boot-secondary-copy {
  max-width: 58rem;
  margin-top: 1.5rem;
  color: rgba(161, 161, 170, 0.78);
  font-size: clamp(0.86rem, 0.96vw, 1rem);
}

#global-loader-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  color: #ef4444;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.875rem;
  text-align: center;
}

#global-loader-error.hidden {
  display: none;
}

#global-loader-error button {
  border: 1px solid rgba(127, 29, 29, 0.5);
  border-radius: 0.25rem;
  background: rgba(127, 29, 29, 0.3);
  color: #f87171;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 700px) {
  .ruliad-boot-loader {
    width: min(100%, calc(100vw - 2rem));
    padding: 1.5rem 0 1.25rem;
    transform: scale(0.82);
  }

  .ruliad-boot-wordmark {
    margin-bottom: 1.75rem;
    font-size: 4.3rem;
  }

  .ruliad-boot-status,
  .ruliad-boot-substatus {
    font-size: 0.78rem;
  }

  .ruliad-boot-primary-copy {
    font-size: 1.05rem;
  }

  .ruliad-boot-secondary-copy {
    font-size: 0.92rem;
  }
}

/* Setup "Scraped Product / Source Images" live site-scan overlay — the cyan sweep bar animation
   (ported from Ruliad_New WizardSiteScanOverlay's inline @keyframes ruliadScanSweep). */
@keyframes ruliadScanSweep {
    0% { top: -8%; }
    50% { top: 96%; }
    100% { top: -8%; }
}

/* ============================================================================
   HPC homepage redesign — ported verbatim from Ruliad_New/index.css
   (branch codex/e2e-recovery-hybrid-20260803, commit ab57368a).
   Source ranges: 45-80, 793-829, 3079-3313, 3456-4211, 4213-4263, 4419-4524.
   ============================================================================ */

/* Filled gradient Generate pill (reference style) — the same blue→cyan fill
   as the Sign up CTAs. Applies to the logged-in "Generate ↵" and the
   logged-out "Sign in to generate" (mirror clone has no ids, hence the
   attribute+class selector). */
#expressway-launch-btn,
#expressway-manual-v5-btn,
[data-homepage-runtime-scenario].homepage-expressway-launch {
  background: linear-gradient(100deg, #1c55dd, #3fd4d8) !important;
  border: none !important;
  color: #ffffff !important;
}
#expressway-launch-btn:hover,
#expressway-manual-v5-btn:hover,
[data-homepage-runtime-scenario].homepage-expressway-launch:hover {
  background: linear-gradient(100deg, #1c55dd, #3fd4d8) !important;
  filter: brightness(1.08);
}

.homepage-expressway-composer{width:min(100%,52rem);margin-left:auto;margin-right:auto}
.homepage-expressway-input-row{display:flex;align-items:center;gap:.55rem;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(5,10,18,.55);box-shadow:0 1.5rem 5rem rgba(3,3,8,.6);backdrop-filter:blur(18px);padding:.4rem .55rem;transition:border-color .16s ease,box-shadow .16s ease}
.homepage-expressway-input-row:focus-within{border-color:rgba(103,232,249,.55);box-shadow:0 0 0 1px rgba(103,232,249,.18),0 1.5rem 5rem rgba(29, 78, 216, .24)}
.homepage-expressway-drop{position:relative;flex:none;width:2.7rem;height:2.7rem;min-height:0;border:1px solid rgba(79,214,232,.35);border-radius:999px;background:rgba(8,18,30,.7);color:rgba(238,244,247,.72);display:flex;align-items:center;justify-content:center;padding:0;text-align:center;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.homepage-expressway-drop:hover,.homepage-expressway-drop:focus-visible,.homepage-expressway-drop.is-dragging{border-color:rgba(103,232,249,.75);background:rgba(12,28,42,.85);transform:translateY(-1px)}
.homepage-expressway-drop.is-dragging{border-color:rgba(103,232,249,.95);background:linear-gradient(180deg,rgba(59, 130, 246, .22),rgba(8,47,73,.2)),rgba(59, 130, 246, .1);box-shadow:0 0 0 2px rgba(59, 130, 246, .18)}
.homepage-expressway-drop-icon{position:relative;display:inline-grid;width:1.9rem;height:1.9rem;place-items:center;border-radius:50%;background:transparent;color:rgba(238,244,247,.72)}
.homepage-expressway-drop-icon svg{width:1.05rem;height:1.05rem}
.homepage-expressway-plus{position:absolute;right:-.14rem;bottom:-.08rem;display:grid;width:.8rem;height:.8rem;place-items:center;border-radius:999px;background:rgba(79,214,232,.35);color:#fff;font-size:.58rem;font-weight:900;line-height:1}
.homepage-expressway-drop-label{display:none}
.homepage-expressway-url,#expressway-url-input.homepage-expressway-url{width:100%;min-height:2.7rem;height:2.7rem;resize:none;overflow:hidden;border:none!important;border-radius:999px!important;background:transparent!important;background-color:transparent!important;color:rgba(238,244,247,.86)!important;-webkit-text-fill-color:rgba(238,244,247,.86)!important;caret-color:#67e8f9!important;box-shadow:none!important;padding:.78rem 1rem .5rem .35rem!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-size:clamp(.8rem,.95vw,.95rem)!important;font-weight:420!important;line-height:1.2!important;outline:none!important;text-align:left!important;vertical-align:middle!important;white-space:nowrap}
.homepage-expressway-url::placeholder,#expressway-url-input.homepage-expressway-url::placeholder{color:rgba(238,244,247,.42)!important;-webkit-text-fill-color:rgba(238,244,247,.42)!important;opacity:1!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-weight:420!important}
.homepage-expressway-url:focus,#expressway-url-input.homepage-expressway-url:focus,#expressway-url-input.homepage-expressway-url:active,#expressway-url-input.homepage-expressway-url:focus-visible{border:none!important;background:transparent!important;background-color:transparent!important;box-shadow:none!important}
.homepage-expressway-launch{display:inline-flex;flex:none;width:auto;min-height:2.7rem;align-items:center;justify-content:center;margin-top:0;border:none;border-radius:999px;background:linear-gradient(100deg,#1c55dd,#3fd4d8);box-shadow:0 .9rem 2.4rem rgba(28,85,221,.35);color:#fff;cursor:pointer;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:.85rem;font-weight:500;letter-spacing:normal;text-transform:none;padding:0 1.7rem;white-space:nowrap;transition:filter .16s ease,transform .16s ease,box-shadow .16s ease}
.homepage-expressway-launch:hover,.homepage-expressway-launch:focus-visible{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 1.1rem 2.8rem rgba(28,85,221,.45)}
.homepage-expressway-launch:disabled{cursor:wait;opacity:.72;transform:none}
.hpc-generate-state{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media (max-width:700px){.homepage-expressway-input-row{flex-wrap:wrap}.homepage-expressway-launch{flex:1 1 100%;min-height:2.6rem}}

.landing-video-trigger {
  position: relative;
}

.landing-video-trigger > video {
  position: relative;
  z-index: 0;
  filter: brightness(0.68) saturate(0.84) contrast(1.04);
  transition: filter 240ms ease;
}

.landing-video-trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 18%, rgba(59, 130, 246, 0.28) 0%, rgba(59, 130, 246, 0) 46%),
    linear-gradient(160deg, rgba(6, 44, 72, 0.7) 0%, rgba(4, 19, 34, 0.66) 62%, rgba(3, 9, 18, 0.74) 100%);
  opacity: 1;
  transition: opacity 220ms ease;
}

.landing-video-trigger:hover::after,
.landing-video-trigger:focus-within::after {
  opacity: 0;
}

.landing-video-trigger:hover > video,
.landing-video-trigger:focus-within > video {
  filter: brightness(1) saturate(1) contrast(1);
}

.landing-video-trigger > .absolute {
  z-index: 2;
}

#welcome-screen [data-homepage-collapsible-section],
#main-welcome-screen [data-homepage-collapsible-section] {
  box-sizing: border-box;
  max-width: min(100%, 84rem) !important;
  margin-top: 0 !important;
  margin-bottom: 0.9rem !important;
  padding-right: clamp(1rem, 2vw, 1.5rem) !important;
  padding-left: clamp(1rem, 2vw, 1.5rem) !important;
}

#app,
#app-container,
#welcome-screen,
#main-welcome-screen {
  max-width: 100%;
  overflow-x: hidden !important;
}

#welcome-screen > .max-w-full,
#main-welcome-screen > .max-w-full {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
  overflow-x: hidden !important;
}

#main-welcome-screen > .max-w-full {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding-bottom: 0 !important;
}

#welcome-screen [data-homepage-hero-intro],
#main-welcome-screen [data-homepage-hero-intro] {
  margin-bottom: 0 !important;
  width: 100%;
  max-width: 84rem;
  padding-top: clamp(1.35rem, 3vh, 2.75rem) !important;
  box-sizing: border-box;
}

#welcome-screen [data-homepage-hero-intro] h2,
#main-welcome-screen [data-homepage-hero-intro] h2 {
  box-sizing: border-box;
  max-width: min(100%, 78rem);
  margin-left: auto;
  margin-right: auto;
  padding-right: clamp(0.5rem, 1.25vw, 1rem);
  padding-left: clamp(0.5rem, 1.25vw, 1rem);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: clamp(1.55rem, 5.5vw, 3rem) !important;
  font-weight: 900 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.04em !important;
  word-spacing: normal;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: geometricPrecision;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

#welcome-screen [data-homepage-hero-intro] h2 span,
#main-welcome-screen [data-homepage-hero-intro] h2 span {
  max-width: 100%;
  white-space: normal !important;
}

#welcome-screen [data-homepage-hero-intro] h2 span:nth-child(1),
#main-welcome-screen [data-homepage-hero-intro] h2 span:nth-child(1) {
  font-size: 0.36em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
  margin-bottom: 0.35em;
}

#welcome-screen [data-homepage-hero-intro] h2 span:nth-child(2),
#main-welcome-screen [data-homepage-hero-intro] h2 span:nth-child(2) {
  font-size: 1.34em;
  line-height: 0.9;
}

#welcome-screen [data-homepage-hero-intro] h2 span:nth-child(3),
#main-welcome-screen [data-homepage-hero-intro] h2 span:nth-child(3) {
  font-size: 1.31em;
  line-height: 0.9;
  margin-top: 0.06em;
}

@media (min-width: 900px) {
  #welcome-screen [data-homepage-hero-intro] h2,
  #main-welcome-screen [data-homepage-hero-intro] h2 {
    font-size: clamp(4.45rem, 6.4vw, 6.2rem) !important;
    letter-spacing: -0.04em !important;
  }
}

#welcome-screen [data-homepage-hero-intro] [data-homepage-expressway-host="hero"],
#main-welcome-screen [data-homepage-hero-intro] [data-homepage-expressway-host="hero"] {
  margin-top: clamp(1.75rem, 3.5vh, 2.75rem) !important;
}

#welcome-screen [data-homepage-hero-intro] > div:has(img[alt="Ruliad homepage cinematic preview"]),
#main-welcome-screen [data-homepage-hero-intro] > div:has(img[alt="Ruliad homepage cinematic preview"]) {
  width: 100% !important;
  max-width: min(100%, 54rem) !important;
  margin-bottom: clamp(2.75rem, 5vh, 4.75rem) !important;
}

#welcome-screen [data-homepage-hero-intro] img[alt="Ruliad homepage cinematic preview"],
#main-welcome-screen [data-homepage-hero-intro] img[alt="Ruliad homepage cinematic preview"] {
  width: 100%;
}

#welcome-screen [data-homepage-collapsible-section] > :first-child,
#main-welcome-screen [data-homepage-collapsible-section] > :first-child {
  margin-bottom: 0 !important;
}

#welcome-screen [data-homepage-collapsible-section][data-homepage-section-expanded="1"],
#main-welcome-screen [data-homepage-collapsible-section][data-homepage-section-expanded="1"] {
  margin-bottom: 2rem !important;
}

#welcome-screen [data-homepage-collapsible-section][data-homepage-section-expanded="1"] > :first-child,
#main-welcome-screen [data-homepage-collapsible-section][data-homepage-section-expanded="1"] > :first-child {
  margin-bottom: 1rem !important;
}

#welcome-screen [data-homepage-section-content] > .grid,
#main-welcome-screen [data-homepage-section-content] > .grid {
  box-sizing: border-box;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  justify-content: center;
  justify-items: stretch;
}

#welcome-screen [data-homepage-section-content] > .grid:has(.landing-video-trigger),
#main-welcome-screen [data-homepage-section-content] > .grid:has(.landing-video-trigger),
#welcome-screen [data-homepage-section-content] > .grid:has(.workflow-card),
#main-welcome-screen [data-homepage-section-content] > .grid:has(.workflow-card),
#welcome-screen [data-homepage-section-content] > .grid:has(.tool-launch-btn),
#main-welcome-screen [data-homepage-section-content] > .grid:has(.tool-launch-btn) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 26rem)) !important;
}

#welcome-screen [data-homepage-section-toggle],
#main-welcome-screen [data-homepage-section-toggle],
#homepage-sponsors-main h2 {
  min-height: 2.15rem;
  align-items: center;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

#welcome-screen [data-homepage-section-toggle],
#main-welcome-screen [data-homepage-section-toggle],
#homepage-sponsors-main h2 {
  display: grid !important;
  grid-template-columns: 1.15rem 24rem minmax(3rem, 1fr);
  column-gap: 0.75rem;
}

#welcome-screen [data-homepage-section-toggle] > span:nth-child(2),
#main-welcome-screen [data-homepage-section-toggle] > span:nth-child(2),
#homepage-sponsors-main h2 > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#welcome-screen [data-homepage-section-toggle] > .h-px,
#main-welcome-screen [data-homepage-section-toggle] > .h-px,
#homepage-sponsors-main h2 > .h-px {
  width: 100%;
}

#homepage-sponsors-main {
  margin-top: 0.9rem !important;
}

#homepage-sponsors-main > div {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

#homepage-sponsors-main h2 {
  max-width: min(100%, 70rem);
  margin-right: auto;
  margin-bottom: 0.9rem !important;
  margin-left: auto;
}

.homepage-sponsor-grid {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

#homepage-footer,
#homepage-footer-main {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}

.homepage-sponsor-grid {
  max-width: min(100%, 70rem);
  margin-right: auto;
  margin-left: auto;
}

.homepage-sponsor-card {
  border-radius: 1rem !important;
}

@media (max-width: 700px) {
  #welcome-screen [data-homepage-section-toggle],
  #main-welcome-screen [data-homepage-section-toggle] {
    grid-template-columns: 1.15rem minmax(9rem, 1fr);
  }

  #welcome-screen [data-homepage-section-toggle] > .h-px,
  #main-welcome-screen [data-homepage-section-toggle] > .h-px {
    display: none;
  }

}

/* ============================================================
   Homepage cinema redesign (marketing landing surface only).
   Scoped to #welcome-screen / #main-welcome-screen + hpc-* classes.
   ============================================================ */

#welcome-screen,
#main-welcome-screen {
  background-color: #030308 !important;
}

/* The homepage production step React surface is retired and hides the legacy
   Expressway composer at mount. The redesigned landing keeps the URL front
   door visible: force the legacy composer back on for the landing screens. */
#welcome-screen [data-homepage-expressway-legacy].hidden,
#main-welcome-screen [data-homepage-expressway-legacy].hidden {
  display: block !important;
}
#welcome-screen [data-homepage-expressway-react-root],
#main-welcome-screen [data-homepage-expressway-react-root] {
  display: none !important;
}

/* --- Hero ------------------------------------------------- */
[data-homepage-hero-intro].hpc-hero {
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(2.5rem, 5vh, 4.5rem) !important;
}

.hpc-hero-aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #04060a;
}

/* Film Engine surface (per design handoff README: 5 drifting radial blobs,
   additive blending, blur 34px / saturate 1.3 / scale 1.22 / opacity .8).
   Tiny 480x300 buffer upscaled by CSS keeps the fill cost trivial. */
.hpc-film-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  filter: blur(34px) saturate(1.3);
  transform: scale(1.22);
  opacity: 0.8;
  will-change: transform;
}

/* Overlay stack above the film: vertical fade (top layer), starfield,
   scanlines — matching the reference hero layering. */
.hpc-hero-aura::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3, 3, 8, 0.3) 0%, rgba(3, 3, 8, 0.45) 38%, rgba(3, 3, 8, 0.9) 74%, #04060a 100%),
    radial-gradient(1px 1px at 24px 34px, rgba(255, 255, 255, 0.28), transparent 45%),
    radial-gradient(1px 1px at 130px 90px, rgba(255, 255, 255, 0.17), transparent 45%),
    radial-gradient(1.4px 1.4px at 190px 160px, rgba(255, 255, 255, 0.23), transparent 45%),
    radial-gradient(1px 1px at 70px 150px, rgba(255, 255, 255, 0.14), transparent 45%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 4px);
  background-size: 100% 100%, 230px 200px, 230px 200px, 230px 200px, 230px 200px, 100% 4px;
}

.hpc-hero-eyebrow {
  color: #1d5580;
}

.hpc-hero-gradient-a {
  background: linear-gradient(180deg, #5fbde8 0%, #3d90c8 62%, #2f7cb4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hpc-hero-gradient-b {
  background: linear-gradient(180deg, #2a6da0 0%, #1a5288 46%, #123f6e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hpc-hero-sub {
  margin: 1.4rem auto 0;
  max-width: 62rem;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(0.92rem, 1.15vw, 1.06rem);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(238, 244, 247, 0.78);
  text-shadow: 0 1px 16px rgba(3, 3, 8, 0.8);
}

/* --- Site nav ---------------------------------------------- */
.hpc-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: -1.5rem -1.5rem 0;
  background: linear-gradient(180deg, rgba(3, 3, 8, 0.88) 0%, rgba(3, 3, 8, 0.72) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hpc-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 84rem;
  margin: 0 auto;
  padding: 0.8rem clamp(1rem, 2.5vw, 2.75rem);
}

.hpc-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 1.9rem);
  min-width: 0;
}

.hpc-nav-link {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(238, 244, 247, 0.8);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.hpc-nav-link:hover,
.hpc-nav-link:focus-visible {
  color: #ffffff;
}

.hpc-nav-link.hpc-nav-link--active {
  color: #4fd6e8;
}

.hpc-nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: none;
}

.hpc-nav-signin {
  background: none;
  border: none;
  padding: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(238, 244, 247, 0.8);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.hpc-nav-signin:hover,
.hpc-nav-signin:focus-visible {
  color: #ffffff;
}

.hpc-nav-signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: linear-gradient(100deg, #1c55dd, #3fd4d8);
  color: #ffffff;
  padding: 10px 20px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.hpc-nav-signup:hover,
.hpc-nav-signup:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Logged-in homepage: hide the auth CTAs; the mirror (#welcome-screen)
   keeps them for logged-out visitors. */
#main-welcome-screen .hpc-nav-signin,
#main-welcome-screen .hpc-nav-signup {
  display: none;
}

/* --- Hero workspace cards --------------------------------- */
.hpc-workspace-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: min(58rem, 100%);
  margin: clamp(2.2rem, 5vh, 4rem) auto 0;
  text-align: left;
}

.hpc-work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  padding: 22px 22px 16px;
  border: 1px solid rgba(79, 214, 232, 0.22);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.hpc-work-card:hover {
  transform: translateY(-3px);
  border-color: rgba(62, 210, 214, 0.75);
  box-shadow: 0 0 28px rgba(62, 210, 214, 0.25);
}

.hpc-work-card[data-homepage-workflow-card] {
  cursor: pointer;
}

.hpc-work-card[data-homepage-workflow-card]:focus-visible {
  outline: none;
  border-color: rgba(103, 232, 249, 0.85);
  box-shadow: 0 0 0 2px rgba(103, 232, 249, 0.3), 0 0 28px rgba(62, 210, 214, 0.25);
}

.hpc-work-card--1 { background: linear-gradient(135deg, #1c3a66 0%, #12294c 45%, #070d1a 100%); }
.hpc-work-card--2 { background: linear-gradient(135deg, #135263 0%, #0d3a4a 45%, #081b26 100%); }
.hpc-work-card--3 { background: linear-gradient(135deg, #1a575e 0%, #104048 45%, #092028 100%); }

.hpc-work-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.hpc-work-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(79, 214, 232, 0.35);
  background: rgba(8, 18, 30, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hpc-work-card-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(238, 244, 247, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 5px 11px;
}

.hpc-work-card-kicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.26em;
  color: #4fd6e8;
  margin-top: 26px;
}

.hpc-work-card-title {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 21px;
  font-weight: 600;
  color: #eef4f7;
  margin-top: 7px;
}

.hpc-work-card-desc {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(238, 244, 247, 0.62);
  margin-top: 8px;
  flex: 1;
}

.hpc-work-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 14px;
  padding-top: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(238, 244, 247, 0.5);
}

.hpc-work-card-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(79, 214, 232, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4fd6e8;
  font-size: 14px;
  letter-spacing: 0;
}

@media (max-width: 900px) {
  .hpc-workspace-grid {
    grid-template-columns: 1fr;
    width: min(26rem, 100%);
  }
}

.hpc-work-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hpc-work-card-info {
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(126, 224, 237, 0.42);
  border-radius: 999px;
  background: rgba(3, 13, 22, 0.38);
  color: rgba(184, 244, 250, 0.9);
  cursor: help;
  font: 700 11px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.hpc-work-card-info:hover,
.hpc-work-card-info:focus-visible {
  color: #ffffff;
  border-color: #55e7f2;
  background: rgba(10, 31, 43, 0.88);
  box-shadow: 0 0 18px rgba(79, 214, 232, 0.34);
  outline: none;
}

.hpc-work-card-try {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid rgba(79, 214, 232, 0.9);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(12, 34, 51, 0.96), rgba(5, 17, 27, 0.96));
  color: #eaffff;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-shadow: 0 0 12px rgba(79, 214, 232, 0.55);
  box-shadow:
    0 0 0 1px rgba(79, 214, 232, 0.18) inset,
    0 0 28px rgba(18, 189, 220, 0.38),
    0 10px 34px rgba(0, 0, 0, 0.32);
}

/* --- Homepage product methodology modal ------------------ */
.hpc-info-backdrop {
  --hpc-info-accent: #42d9eb;
  --hpc-info-accent-rgb: 66, 217, 235;
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 36px);
  background: rgba(1, 5, 10, 0.87);
  backdrop-filter: blur(18px) saturate(115%);
  animation: hpc-info-fade 180ms ease-out;
}

.hpc-info-backdrop--production { --hpc-info-accent: #55e6df; --hpc-info-accent-rgb: 85, 230, 223; }
.hpc-info-backdrop--media { --hpc-info-accent: #67ead2; --hpc-info-accent-rgb: 103, 234, 210; }

.hpc-info-modal {
  width: min(1000px, 100%);
  max-height: min(88vh, 920px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #f2f7fa;
  border: 1px solid rgba(var(--hpc-info-accent-rgb), 0.34);
  border-radius: 18px;
  background: radial-gradient(circle at 90% 0%, rgba(var(--hpc-info-accent-rgb), 0.11), transparent 36%), linear-gradient(145deg, #0b121c 0%, #070b11 54%, #05080d 100%);
  box-shadow: 0 32px 110px rgba(0, 0, 0, 0.72), 0 0 45px rgba(var(--hpc-info-accent-rgb), 0.08);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  animation: hpc-info-rise 220ms cubic-bezier(.2,.8,.2,1);
}

.hpc-info-header {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(4, 9, 15, 0.72);
}

.hpc-info-identity { display: flex; align-items: center; gap: 15px; min-width: 0; }
.hpc-info-number { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; color: #061016; background: var(--hpc-info-accent); font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; box-shadow: 0 0 24px rgba(var(--hpc-info-accent-rgb), .25); }
.hpc-info-kicker, .hpc-info-section-eyebrow { color: var(--hpc-info-accent); font: 600 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .24em; }
.hpc-info-header h2 { margin: 5px 0 0; color: #f5f8fa; font-size: clamp(20px, 2.5vw, 28px); line-height: 1.12; font-weight: 650; letter-spacing: -.025em; }
.hpc-info-close { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; cursor: pointer; color: #a7b2bc; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.025); transition: 160ms ease; }
.hpc-info-close:hover, .hpc-info-close:focus-visible { color: #fff; border-color: rgba(var(--hpc-info-accent-rgb), .75); background: rgba(var(--hpc-info-accent-rgb), .08); outline: none; }
.hpc-info-scroll { overflow-y: auto; padding: 24px; scrollbar-width: thin; scrollbar-color: rgba(var(--hpc-info-accent-rgb), .45) transparent; }
.hpc-info-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, .7fr); gap: 24px; align-items: stretch; }
.hpc-info-hero > p { margin: 0; padding: 4px 0; color: #b9c3cc; font-size: 14px; line-height: 1.75; }
.hpc-info-pipeline { display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 18px; border: 1px solid rgba(var(--hpc-info-accent-rgb), .2); border-radius: 12px; background: rgba(var(--hpc-info-accent-rgb), .045); }
.hpc-info-pipeline span { color: #778795; font: 600 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; text-transform: uppercase; }
.hpc-info-pipeline strong { color: var(--hpc-info-accent); font: 650 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.hpc-info-sections { margin-top: 25px; border-top: 1px solid rgba(255,255,255,.09); }
.hpc-info-section { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 23px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.hpc-info-section-index { color: rgba(var(--hpc-info-accent-rgb), .44); font: 500 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; padding-top: 1px; }
.hpc-info-section h3 { margin: 6px 0 8px; color: #edf4f7; font-size: 16px; line-height: 1.35; font-weight: 620; letter-spacing: -.01em; }
.hpc-info-section p { margin: 0; color: #9eabb6; font-size: 12.5px; line-height: 1.72; }
.hpc-info-section ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.hpc-info-section li { position: relative; padding: 10px 10px 10px 25px; color: #aebbc5; border: 1px solid rgba(255,255,255,.065); border-radius: 8px; background: rgba(255,255,255,.018); font-size: 10.5px; line-height: 1.5; }
.hpc-info-section li::before { content: ""; position: absolute; top: 16px; left: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--hpc-info-accent); box-shadow: 0 0 9px rgba(var(--hpc-info-accent-rgb), .55); }
.hpc-info-disclosure { display: flex; gap: 12px; margin-top: 20px; padding: 16px 18px; color: var(--hpc-info-accent); border: 1px solid rgba(var(--hpc-info-accent-rgb), .18); border-radius: 10px; background: rgba(var(--hpc-info-accent-rgb), .045); }
.hpc-info-disclosure > svg { flex: 0 0 auto; margin-top: 1px; }
.hpc-info-disclosure strong { display: block; font: 650 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2em; }
.hpc-info-disclosure p { margin: 5px 0 0; color: #8797a3; font-size: 11px; line-height: 1.65; }
.hpc-info-footer { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 24px; border-top: 1px solid rgba(255,255,255,.09); background: #05090e; }
.hpc-info-footer > span { color: #53616c; font: 600 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .22em; }
.hpc-info-footer button { min-width: 88px; padding: 10px 18px; cursor: pointer; color: var(--hpc-info-accent); border: 1px solid rgba(var(--hpc-info-accent-rgb), .5); border-radius: 8px; background: rgba(var(--hpc-info-accent-rgb), .065); font: 650 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; transition: 160ms ease; }
.hpc-info-footer button:hover, .hpc-info-footer button:focus-visible { color: #061015; background: var(--hpc-info-accent); outline: none; box-shadow: 0 0 22px rgba(var(--hpc-info-accent-rgb), .24); }

@keyframes hpc-info-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hpc-info-rise { from { opacity: 0; transform: translateY(12px) scale(.992); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .hpc-info-backdrop { padding: 8px; }
  .hpc-info-modal { max-height: 94vh; border-radius: 14px; }
  .hpc-info-header, .hpc-info-scroll { padding: 17px; }
  .hpc-info-hero { grid-template-columns: 1fr; gap: 15px; }
  .hpc-info-section { grid-template-columns: 30px minmax(0, 1fr); gap: 9px; }
  .hpc-info-section ul { grid-template-columns: 1fr; }
  .hpc-info-footer { padding: 11px 17px; }
}

/* --- Ticker ------------------------------------------------ */
.hpc-ticker {
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: #05060c;
  width: 100%;
  max-width: 100%;
  /* Simon 2026-07-27: symmetric breathing room — the gap from the Try-for-FREE
     button above matches the existing gap to the footer text below. */
  margin-top: clamp(2.2rem, 4vh, 3.4rem);
  margin-bottom: clamp(2.2rem, 4vh, 3.4rem);
}

.hpc-ticker-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: hpcTick 26s linear infinite;
}

.hpc-ticker-item {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  padding: 11px 0;
  color: rgba(238, 244, 247, 0.6);
}

.hpc-ticker-hot {
  color: #4fd6e8;
}

@keyframes hpcTick {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- Section shells ---------------------------------------- */
.hpc-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  text-align: left;
}

.hpc-kicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: #4fd6e8;
  text-transform: uppercase;
}

.hpc-headline {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #eef4f7;
  margin-top: 10px;
}

.hpc-section-desc {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(238, 244, 247, 0.6);
  max-width: 400px;
  padding-bottom: 4px;
}

@media (max-width: 820px) {
  .hpc-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* --- Video wall / template cards --------------------------- */
.hpc-wall-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}

@media (max-width: 1024px) {
  .hpc-wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .hpc-wall-grid { grid-template-columns: 1fr; }
}

.hpc-wall-card {
  position: relative;
  display: block;
  width: 100%;
  height: 240px;
  border-radius: 12px;
  overflow: hidden;
  background: #04050a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.hpc-wall-card:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 214, 232, 0.45);
  box-shadow: 0 18px 44px rgba(3, 3, 8, 0.6);
}

/* The redesigned cards own their grade; disable the legacy blue wash. */
.hpc-wall-card.landing-video-trigger::after {
  display: none;
}

.hpc-wall-card.landing-video-trigger > video,
.hpc-wall-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.82) saturate(0.95);
  transition: filter 240ms ease;
}

.hpc-wall-card.landing-video-trigger:hover > video,
.hpc-wall-card.landing-video-trigger:focus-within > video {
  filter: brightness(1) saturate(1);
}

.hpc-wall-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, transparent 55%, rgba(3, 3, 8, 0.78) 100%);
}

.hpc-wall-label {
  position: absolute;
  bottom: 14px;
  left: 16px;
  right: 16px;
  z-index: 3;
}

.hpc-wall-title {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #eef4f7;
  line-height: 1.2;
}

.hpc-wall-meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: rgba(238, 244, 247, 0.65);
  margin-top: 4px;
  text-transform: uppercase;
}

.hpc-wall-hover {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 6, 12, 0.35);
  opacity: 0;
  transition: opacity 0.25s;
}

.hpc-wall-card:hover .hpc-wall-hover,
.hpc-wall-card:focus-visible .hpc-wall-hover {
  opacity: 1;
}

.hpc-wall-hover-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(5, 10, 18, 0.7);
  border: 1px solid rgba(79, 214, 232, 0.5);
  border-radius: 999px;
  padding: 10px 18px 10px 12px;
  backdrop-filter: blur(8px);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: #cdeff6;
}

.hpc-wall-play {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(100deg, #1c55dd, #3fd4d8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0;
}

/* --- Cloned Agents grid ------------------------------------ */
.hpc-agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.hpc-agent-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(165deg, #0b1626 0%, #070d16 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px 12px 16px;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}

.hpc-agent-card:hover,
.hpc-agent-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(62, 210, 214, 0.6);
}

.hpc-agent-ring {
  display: block;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(from 210deg, #1c55dd, #4fd6e8, #7ef2c3, #1c55dd);
  box-shadow: 0 4px 18px rgba(28, 85, 221, 0.35);
}

.hpc-agent-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid #05070d;
  box-sizing: border-box;
}

.hpc-agent-name {
  display: block;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #eef4f7;
  margin-top: 12px;
  line-height: 1.25;
}

.hpc-agent-spec {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: #4fd6e8;
  margin-top: 6px;
  text-transform: uppercase;
  line-height: 1.5;
}

.hpc-agents-grid .hpc-agents-empty {
  grid-column: 1 / -1;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  padding: 24px 20px;
  font-size: 14px;
  color: #9ca3af;
}

/* --- Sponsors ---------------------------------------------- */
.hpc-sponsor-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 980px) {
  .hpc-sponsor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
  .hpc-sponsor-grid { grid-template-columns: 1fr; }
}

.hpc-sponsor-card,
.homepage-sponsor-card.hpc-sponsor-card {
  width: auto !important;
  max-width: none !important;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #07090f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px !important;
  padding: 0 26px;
}

.hpc-sponsor-card img {
  max-height: 32px;
  max-width: 100%;
  object-fit: contain;
}

.hpc-sponsor-card .hpc-sponsor-invert {
  filter: brightness(0) invert(1);
}

.hpc-sponsor-card .hpc-sponsor-nvidia {
  max-height: 52px;
  width: 100%;
  max-width: 200px;
}

/* --- Footer CTA + legal ------------------------------------ */
#homepage-footer-main.hpc-footer {
  position: relative;
  overflow: hidden;
  border-top: none;
  background: #030308;
  padding: clamp(4.5rem, 9vh, 6.5rem) 24px 56px;
  margin-top: 3.5rem;
  text-align: center;
}

.hpc-footer-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 50% 100%, rgba(28, 85, 221, 0.26), transparent 72%),
    radial-gradient(42% 55% at 28% 92%, rgba(63, 212, 216, 0.16), transparent 70%);
}

.hpc-footer-inner {
  position: relative;
}

.hpc-footer-headline {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #ffffff 0%, #8ccdf0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}

.hpc-footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(100deg, #1c55dd, #3fd4d8);
  color: #ffffff;
  padding: 14px 32px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 18px 48px rgba(28, 85, 221, 0.35);
  transition: filter 0.16s ease, transform 0.16s ease;
}

.hpc-footer-cta:hover,
.hpc-footer-cta:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.hpc-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin-top: 54px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(238, 244, 247, 0.4);
  text-transform: uppercase;
}

.hpc-footer-legal a {
  color: #4fd6e8;
  transition: color 0.15s ease;
}

.hpc-footer-legal a:hover {
  color: #ffffff;
}

/* --- Signed-out browse mode ---------------------------------- */
/* Default signed-out presentation: the auth-gate overlay shows the homepage
   full width (account entry lives in the header nav only). Explicit Login
   intent removes .hpc-browse, revealing the overlay's docked sign-in panel. */

#auth-gate-overlay.hpc-browse > div:first-child {
  display: none !important;
}

/* Public browse is a true full-viewport homepage. The authenticated app
   sidebar still exists underneath the fixed auth gate, so the generic
   sidebar-aware film offset must not reserve its width here. The left column
   is introduced only after explicit Sign in intent removes .hpc-browse. */
#auth-gate-overlay.hpc-browse #welcome-screen {
  flex: 1 1 100%;
  width: 100%;
  max-width: none;
}

#auth-gate-overlay.hpc-browse #welcome-screen .hpc-nav {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#auth-gate-overlay.hpc-browse #welcome-screen .hpc-nav-link {
  text-shadow: 0 1px 12px rgba(2, 4, 8, 0.85);
}

body:has(#auth-gate-overlay.hpc-browse:not(.hidden)) div.hpc-hero-aura {
  left: 0;
}

/* Keep deep homepage libraries out of signed-out browse mode, but leave the
   three try-free workflow tiles visible as the public tool entry surface. */
#auth-gate-overlay.hpc-browse #welcome-screen [data-homepage-collapsible-section],
#auth-gate-overlay.hpc-browse #welcome-screen section:has(.hpc-sponsor-grid) {
  display: none !important;
}

/* --- Motion safety ----------------------------------------- */
/* The Film Engine renders one static frame under reduced motion (JS check). */
@media (prefers-reduced-motion: reduce) {
  .hpc-ticker-track {
    animation: none;
  }
}

/* ============================================================
   HOMEPAGE FILM AURA — FULL-PAGE (2026-07-27, Simon). The blurred
   motion-blob canvas was clipped inside .hpc-hero (overflow:hidden box)
   so the glow cut off in a rectangle around the hero. The aura layer is
   now a FIXED full-viewport background: the same canvas film drifts
   behind every section (hero, logo wall, closing CTA, footer) while the
   page scrolls over it. z-index:-1 keeps it below ALL content inside
   the #main-welcome-screen stacking context (text stays readable; the
   canvas itself paints the dark base at 0.8 opacity over bg-stars).
   Blob travel already spans the whole canvas, so stretching the surface
   to the viewport extends the drift paths page-wide; animation stays
   canvas+CSS-blur (GPU-friendly) and prefers-reduced-motion still gets
   the engine's single static frame. div.<class> specificity beats the
   earlier same-sheet rules regardless of minified-block order.
   ============================================================ */
div.hpc-hero-aura {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: transparent;
}

/* ============================================================
   HOMEPAGE FILM AURA — SIMON'S CORRECTIONS (2026-07-27 round 2).
   1. The nav read as a black strip pinning the page top: its near-
      opaque band now becomes a light blurred scrim so the film shows
      through and the nav sits visually flush at y=0 (geometry was
      always top-0 sticky; the solid fill was the "gap").
   2. The LEFT APP SIDEBAR must never be washed by the film: the aura's
      fixed layer starts at the sidebar's right edge whenever the
      sidebar is visible (13rem, 5rem collapsed, 0 when hidden), and
      the sidebar keeps a forced-opaque panel background above it.
   3. Solid-black boxes float on the animated background — the footer
      panel ("Your next spot is one prompt away.") goes transparent
      (its soft radial scrim stays for text contrast) and the partner
      logo tiles become translucent dark + blur so they sit ON the
      film instead of punching holes in it.
   ============================================================ */
nav.hpc-nav {
  background: linear-gradient(180deg, rgba(3, 3, 8, 0.42) 0%, rgba(3, 3, 8, 0.14) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

aside#sidebar,
aside#dash-sidebar {
  background-color: var(--bg-panel) !important;
}

/* Source parity (`aside#sidebar` rules, 13rem expanded / collapsed): our rail is `#dash-sidebar`, so
   each source selector gets a `#dash-sidebar` twin. Widths now come from the re-scoped muted-sidebar
   pass (13.5rem expanded, 4rem collapsed). Keeps the film from drawing beneath the rail at all; the
   rail's own `z-50` is what guarantees it stays legible. */
body:has(aside#sidebar) div.hpc-hero-aura,
body:has(aside#dash-sidebar) div.hpc-hero-aura { left: 13.5rem; }
body:has(aside#sidebar.sidebar-collapsed) div.hpc-hero-aura,
body:has(aside#dash-sidebar.sidebar-collapsed) div.hpc-hero-aura { left: 4rem; }
body:has(aside#sidebar.hidden) div.hpc-hero-aura,
body:has(aside#sidebar[style*="display: none"]) div.hpc-hero-aura,
body:has(aside#dash-sidebar.hidden) div.hpc-hero-aura,
body:has(aside#dash-sidebar[style*="display: none"]) div.hpc-hero-aura { left: 0; }

/* Match the strongest existing selectors (#id.class and .class.class)
   so the translucency actually wins over the solid fills. */
footer.hpc-footer,
#homepage-footer-main.hpc-footer {
  background: transparent;
}

div.hpc-sponsor-card,
div.homepage-sponsor-card.hpc-sponsor-card {
  background: rgba(5, 8, 15, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ============================================================
   HOMEPAGE POLISH (2026-07-27, Simon): header at top + no black boxes.
   1. Whatever un-hides #app-header while the PUBLIC welcome screen is
      visible created a dark strip above the site nav ("header drifting
      lower"). The welcome surface never needs the app chrome — force it
      hidden whenever the welcome screen is shown.
   2. The nav itself goes TRANSPARENT (Simon's call) so it floats on the
      film aura instead of reading as a black bar; links keep a soft
      text-shadow for contrast.
   3. Footer ("Your next spot is one prompt away.") was still a black box
      because the ID rule #homepage-footer-main.hpc-footer (1-1-1) beats
      the earlier transparent override footer.hpc-footer (0-1-1) — match
      the ID specificity.
   4. Partner/sponsor logo tiles: translucent dark + blur so they sit ON
      the animated background instead of punching black holes in it.
   ============================================================ */
body:has(#main-welcome-screen:not(.hidden)) #app-header {
  display: none !important;
}
#main-welcome-screen .hpc-nav {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#main-welcome-screen .hpc-nav-link {
  text-shadow: 0 1px 12px rgba(2, 4, 8, 0.85);
}
#homepage-footer-main.hpc-footer {
  background: transparent !important;
}
.hpc-sponsor-card,
.homepage-sponsor-card.hpc-sponsor-card,
div.hpc-sponsor-card {
  background: rgba(5, 8, 15, 0.42) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================================
   Standard + lit-up CTA variants + SCRIPT ENGINE compact parameter
   grid + PA Step-1 chip top-row — ported verbatim from Ruliad_New
   root index.css (claude/scrape-race-fix-20260804: .ruliad-cta :3418,
   .ruliad-cta-primary :3438, .script-engine-* :4271, .pa-step1-chip-grid
   :4389) for the Step-1 Setup redesign (footer CTAs + Analyze CTA +
   parameter chip strip).
   ============================================================ */
/* Standard CTA surface — the dark cyan pill (e.g. AUTONOMOUS). Callers keep
   their own padding / font-size / tracking utilities; this owns the surface,
   border, hover, and disabled state. Doubled class = specificity. */
.ruliad-cta.ruliad-cta {
  border-radius: 0.75rem;
  border: 1px solid rgba(14, 116, 144, 0.6);
  background-color: rgba(8, 51, 68, 0.3);
  color: #dbeafe;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ruliad-cta.ruliad-cta:hover:not(:disabled) {
  background-color: rgba(30, 58, 138, 0.45);
  border-color: rgba(59, 130, 246, 0.55);
  color: #ffffff;
}
.ruliad-cta.ruliad-cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ruliad-cta-primary.ruliad-cta-primary {
  border-radius: 0.75rem;
  border: 1px solid rgba(59, 130, 246, 0.7);
  background: linear-gradient(90deg, #0a2540 0%, #0f4358 50%, #0a2540 100%);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.22);
  transition: filter 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ruliad-cta-primary.ruliad-cta-primary:hover:not(:disabled) {
  filter: brightness(1.2);
  border-color: rgba(59, 130, 246, 0.9);
  box-shadow: 0 0 26px rgba(59, 130, 246, 0.3);
}
.ruliad-cta-primary.ruliad-cta-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.script-engine-control-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(8.25rem, 1fr));
  gap: 0.5rem;
}

@media (min-width: 1280px) {
  .script-engine-control-grid {
    grid-template-columns: repeat(8, minmax(7.2rem, 1fr));
  }
}

.script-engine-control,
.script-engine-attach-chip {
  min-width: 0;
  min-height: 3.35rem;
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: 0.5rem;
  background: linear-gradient(180deg, rgba(10, 21, 30, 0.94), rgba(3, 8, 13, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.script-engine-control {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.18rem;
  padding: 0.42rem 0.5rem;
}

.script-engine-control:focus-within,
.script-engine-attach-chip:focus-visible,
.script-engine-attach-chip:hover:not(:disabled) {
  border-color: rgba(103, 232, 249, 0.58);
  background: linear-gradient(180deg, rgba(8, 47, 73, 0.48), rgba(4, 12, 18, 0.98));
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1), 0 12px 28px rgba(0, 0, 0, 0.28);
  outline: none;
}

.script-engine-control-label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.32rem;
  color: rgba(103, 232, 249, 0.86);
  font-size: 0.58rem;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.script-engine-control-label svg {
  flex: 0 0 auto;
}

.script-engine-select-wrap {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
}

.script-engine-select-wrap svg {
  pointer-events: none;
  position: absolute;
  right: 0.1rem;
  color: rgba(148, 163, 184, 0.78);
}

.script-engine-select {
  width: 100%;
  min-width: 0;
  height: 1.45rem;
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(248, 250, 252, 0.96);
  font-size: 0.74rem;
  font-weight: 780;
  line-height: 1.1;
  outline: none;
  overflow: hidden;
  padding: 0 1.1rem 0 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.script-engine-select option {
  background: #081016;
  color: #e5eef6;
}

.script-engine-attach-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: rgba(207, 250, 254, 0.92);
  font-size: 0.66rem;
  font-weight: 850;
  text-transform: uppercase;
}

.script-engine-attach-chip.is-disabled,
.script-engine-attach-chip:disabled {
  cursor: not-allowed;
  border-color: rgba(71, 85, 105, 0.42);
  background: rgba(15, 23, 42, 0.48);
  color: rgba(100, 116, 139, 0.92);
}

.pa-step1-chip-grid.pa-step1-chip-grid {
  /* FIXED 4 PER ROW (source index.css .pa-step1-chip-grid, Simon 2026-08-05):
     auto-fit reflowed to 5-then-3 at desktop widths, which read as a ragged
     wall. minmax(0,1fr) keeps chips shrinkable so the row can never overflow
     the setup column (.production-setup clips overflow instead of scrolling).
     Doubled class: keeps this override ahead of any later-loaded sheet's
     .script-engine-control-grid ≥1280px 8-column rule. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 640px) {
  .pa-step1-chip-grid.pa-step1-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   PRODUCTION UI REDESIGN CSS — ported verbatim from Ruliad_New ROOT index.css
   (claude/scrape-race-fix-20260804, delta d7dfff3..HEAD append block). These are
   the stylesheets the Step-3/Step-4 source markup depends on and that the earlier
   delta port MISSED (it compared src/index.css, not the root index.css that this
   file mirrors). Sections: shot-plan textarea auto-size, SCRIPT LOCK COMPILER
   (.slc-*), PRE-PRODUCTION MATRIX Step 4 (.pp4), PROJECTS & TEMPLATES BROWSER (.ptb).
   ============================================================ */
/* ============================================================
   SHOT-PLAN TEXTAREAS AUTO-SIZE (2026-07-27, Simon). The Script Lock
   VIDEO/AUDIO beat boxes and Script Engine editor boxes must show their
   full text on open — no dragging to read. Chromium sizes natively via
   field-sizing; campaign/ui.ts runs a JS sweep for other engines.
   textarea.<class> specificity (0-1-1) beats the runtime Tailwind CDN
   height utilities (0-1-0) regardless of injection order. Manual
   resize stays enabled via the existing resize-y utilities.
   ============================================================ */
@supports (field-sizing: content) {
  textarea.script-shot-editor,
  textarea.script-vo-editor,
  textarea.script-graphics-treatment-editor,
  textarea.script-treatment-editor,
  textarea.script-votrack-editor,
  textarea.shot-plan-autosize {
    field-sizing: content;
    height: auto;
    min-height: 4rem;
    max-height: none;
  }
}


/* ============================================================
   SCRIPT LOCK COMPILER — "Compiling the Creative Stack" redesign
   (Simon 2026-07-28, task #5 pixel-fidelity). PRESENTATION ONLY.
   Every class namespaced slc-* so nothing leaks into the global app
   sheet (the prototype's .card/.step/.chip/.grid would collide).
   Driven by real state in src/campaign/ui.ts
   (renderScriptBrainCompilerBoardHtml + updateScriptGenerationShell).
   The sidebar + wizard footer are the app's own — not restyled here.
   ============================================================ */
@property --slc-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes slcSpin{to{transform:rotate(360deg)}}
@keyframes slcSpinBorder{to{--slc-ang:360deg}}
@keyframes slcSheen{to{background-position:-200% 0}}
@keyframes slcShimmer{0%{background-position:180% 0}100%{background-position:-120% 0}}
@keyframes slcHalo{0%,100%{opacity:.6;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
@keyframes slcLive{0%{box-shadow:0 0 0 0 rgba(34,224,255,.55)}70%{box-shadow:0 0 0 7px rgba(34,224,255,0)}100%{box-shadow:0 0 0 0 rgba(34,224,255,0)}}
@keyframes slcRiseIn{to{opacity:1;transform:translateY(0)}}
@keyframes slcSlideIn{to{opacity:1;transform:translateX(0)}}
@keyframes slcDrift1{to{transform:translate3d(-90px,70px,0) scale(1.14)}}
@keyframes slcDrift2{to{transform:translate3d(-120px,-60px,0) scale(1.08)}}
@keyframes slcDrift3{to{transform:translate3d(110px,-50px,0) scale(1.12)}}

.slc-overlay{
  --slc-line:rgba(125,180,255,.09);--slc-line-2:rgba(125,190,255,.16);--slc-line-3:rgba(125,200,255,.26);
  --slc-text:#E9F2FF;--slc-text-2:#B7C7DE;--slc-muted:#7C8CA6;--slc-dim:#4E5C74;--slc-faint:#334054;
  --slc-azure:#3FA0FF;--slc-cyan:#22E0FF;
  --slc-grad:linear-gradient(100deg,#2E6BFF 0%,#3FA0FF 46%,#22E0FF 100%);
  --slc-ease:cubic-bezier(.22,.61,.36,1);--slc-ease-io:cubic-bezier(.65,0,.35,1);
  --slc-mono:"SF Mono",ui-monospace,"JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
  position:relative;overflow:hidden;min-height:calc(100vh - 15rem);
  display:flex;align-items:stretch;justify-content:center;
  border-radius:22px;background:#03060D;color:var(--slc-text);
}
.slc-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.slc-aurora{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.slc-a1{width:820px;height:820px;left:22%;top:-34%;background:radial-gradient(circle at 50% 50%,rgba(46,107,255,.34),rgba(46,107,255,0) 68%);animation:slcDrift1 34s var(--slc-ease-io) infinite alternate}
.slc-a2{width:720px;height:720px;right:-14%;top:16%;background:radial-gradient(circle at 50% 50%,rgba(34,224,255,.24),rgba(34,224,255,0) 66%);animation:slcDrift2 41s var(--slc-ease-io) infinite alternate}
.slc-a3{width:940px;height:640px;left:6%;bottom:-40%;background:radial-gradient(circle at 50% 50%,rgba(63,160,255,.20),rgba(63,160,255,0) 70%);animation:slcDrift3 47s var(--slc-ease-io) infinite alternate}
.slc-gridlines{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(122,180,255,.055) 1px,transparent 1px),linear-gradient(to bottom,rgba(122,180,255,.055) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(120% 90% at 58% 34%,#000 0%,rgba(0,0,0,.55) 46%,transparent 78%);mask-image:radial-gradient(120% 90% at 58% 34%,#000 0%,rgba(0,0,0,.55) 46%,transparent 78%)}
.slc-vignette{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 0%,transparent 40%,rgba(2,4,9,.72) 100%)}

.slc-card{position:relative;z-index:1;flex:1;margin:18px;border-radius:22px;
  background:radial-gradient(120% 130% at 50% -10%,rgba(46,107,255,.10),transparent 58%),linear-gradient(180deg,rgba(12,18,31,.80),rgba(7,11,20,.88));
  border:1px solid var(--slc-line-2);backdrop-filter:blur(26px);overflow:hidden;
  box-shadow:0 34px 90px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);
  display:flex;flex-direction:column}
.slc-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--slc-ang,0deg),transparent 0deg,rgba(34,224,255,.55) 26deg,rgba(46,107,255,.45) 58deg,transparent 96deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:slcSpinBorder 9s linear infinite;pointer-events:none;opacity:.85}
.slc-card.slc-complete{border-color:rgba(34,224,255,.3)}
.slc-topline{position:absolute;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,rgba(46,107,255,.2),var(--slc-azure) 40%,var(--slc-cyan));box-shadow:0 0 16px rgba(34,224,255,.75);border-radius:0 2px 2px 0;transition:width .35s linear;z-index:3}
.slc-bloom{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(60% 55% at 24% 46%,rgba(34,224,255,.16),transparent 62%);transition:opacity .8s var(--slc-ease)}
.slc-card.slc-complete .slc-bloom{opacity:1}

.slc-card-bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--slc-line);background:linear-gradient(180deg,rgba(255,255,255,.022),transparent)}
.slc-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:999px;border:1px solid var(--slc-line-2);background:rgba(255,255,255,.03);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slc-text-2)}
.slc-pill .slc-mono{font-family:var(--slc-mono);letter-spacing:.02em;text-transform:none;color:var(--slc-cyan);font-size:11px}
.slc-live{width:6px;height:6px;border-radius:50%;background:var(--slc-cyan);flex:none;box-shadow:0 0 0 0 rgba(34,224,255,.55);animation:slcLive 2s var(--slc-ease-io) infinite}
.slc-bar-right{display:flex;align-items:center;gap:10px}
.slc-elapsed{font-family:var(--slc-mono);font-size:11.5px;color:var(--slc-muted);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.slc-elapsed b{color:var(--slc-text-2);font-weight:500}

.slc-card-body{position:relative;z-index:2;flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:minmax(320px,420px) 1fr;gap:40px;padding:30px 34px;align-items:safe center}
@media(max-width:1080px){.slc-card-body{grid-template-columns:1fr;gap:26px}}
.slc-card-body::-webkit-scrollbar{width:9px}
.slc-card-body::-webkit-scrollbar-thumb{background:rgba(122,180,255,.16);border-radius:9px;border:3px solid transparent;background-clip:content-box}

.slc-stage{display:flex;flex-direction:column;align-items:center;gap:22px;padding-top:6px}
.slc-ring-wrap{position:relative;width:270px;height:270px;flex:none}
.slc-ring-wrap svg{position:absolute;inset:0;width:100%;height:100%}
.slc-ring-halo{position:absolute;inset:16px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(34,224,255,.18),rgba(46,107,255,.07) 46%,transparent 70%);filter:blur(10px);animation:slcHalo 4.4s var(--slc-ease-io) infinite}
.slc-spin-slow,.slc-spin-rev,.slc-sweep{transform-box:view-box;transform-origin:120px 120px}
.slc-spin-slow{animation:slcSpin 26s linear infinite}
.slc-spin-rev{animation:slcSpin 18s linear infinite reverse}
.slc-sweep{animation:slcSpin 3.4s linear infinite}
.slc-readout{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.slc-pct{display:flex;align-items:baseline;justify-content:center;gap:2px;font-variant-numeric:tabular-nums;filter:drop-shadow(0 4px 26px rgba(34,224,255,.32))}
.slc-pct .slc-n{font-size:60px;font-weight:600;letter-spacing:-.045em;line-height:1;background:linear-gradient(160deg,#FFFFFF 0%,#BFE9FF 38%,#22E0FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.slc-pct .slc-s{font-size:22px;font-weight:500;color:var(--slc-cyan);opacity:.85;letter-spacing:-.02em}
.slc-cap{margin-top:9px;font-size:9.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--slc-muted)}
.slc-cap.slc-ok{color:var(--slc-cyan)}

.slc-status{text-align:center;max-width:340px}
.slc-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--slc-cyan);padding:5px 12px;border-radius:999px;background:rgba(34,224,255,.06);border:1px solid rgba(34,224,255,.18)}
.slc-headline{margin-top:14px;font-size:clamp(20px,1.55vw,25px);font-weight:800;line-height:1.16;letter-spacing:.055em;text-transform:uppercase;background-image:linear-gradient(100deg,#3E86FF 0%,#22E0FF 22%,#F2FEFF 31%,#22E0FF 40%,#3E86FF 64%,#22E0FF 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:slcSheen 6.5s linear infinite}
.slc-headline.slc-done{animation:none;background-image:linear-gradient(100deg,#8AF2FF,#FFFFFF 50%,#22E0FF)}
.slc-hint{margin-top:11px;font-size:12px;color:var(--slc-muted);line-height:1.55;min-height:38px}
.slc-hint em{font-style:normal;color:var(--slc-text-2)}
.slc-stats{display:grid;grid-template-columns:repeat(3,1fr);width:100%;max-width:360px;margin-top:22px;border:1px solid var(--slc-line);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));overflow:hidden}
.slc-stat{padding:12px 8px 13px;text-align:center;position:relative}
.slc-stat + .slc-stat::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;background:var(--slc-line-2)}
.slc-sv{display:block;font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--slc-faint);transition:.4s var(--slc-ease)}
.slc-stat.slc-on .slc-sv{background:linear-gradient(150deg,#FFFFFF,#22E0FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.slc-sk{display:block;margin-top:7px;font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--slc-dim)}
.slc-stat.slc-on .slc-sk{color:var(--slc-muted)}

.slc-right{display:flex;flex-direction:column;gap:22px;min-width:0}
.slc-chips{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
@media(min-width:1480px){.slc-chips{grid-template-columns:repeat(4,1fr)}}
.slc-chip{position:relative;overflow:hidden;min-height:84px;display:flex;flex-direction:column;justify-content:space-between;padding:13px 14px 14px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));border:1px solid var(--slc-line);opacity:0;transform:translateY(10px);animation:slcRiseIn .7s var(--slc-ease) forwards}
.slc-chip::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--slc-grad);opacity:.65}
.slc-chip .slc-k{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--slc-dim)}
.slc-chip .slc-v{margin-top:7px;font-size:12.5px;font-weight:600;color:var(--slc-text);line-height:1.35}
.slc-chip .slc-v span{color:var(--slc-muted);font-weight:500}

.slc-tl-head{display:flex;align-items:center;gap:12px}
.slc-tl-head .slc-lbl{font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--slc-dim)}
.slc-tl-head .slc-rule{flex:1;height:1px;background:linear-gradient(90deg,var(--slc-line-2),transparent)}
.slc-tl-head .slc-count{font-family:var(--slc-mono);font-size:11px;color:var(--slc-muted);font-variant-numeric:tabular-nums}
.slc-timeline{position:relative;list-style:none;margin:0;padding:0}
.slc-timeline::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:1px;background:linear-gradient(180deg,var(--slc-line-2),var(--slc-line))}
.slc-tl-fill{position:absolute;left:11px;top:14px;width:1px;height:0;background:linear-gradient(180deg,var(--slc-azure),var(--slc-cyan));box-shadow:0 0 10px rgba(34,224,255,.65);transition:height .5s var(--slc-ease)}
.slc-step{position:relative;display:grid;grid-template-columns:23px 1fr;gap:12px;align-items:center;padding:6.5px 10px 6.5px 0;border-radius:9px;opacity:0;transform:translateX(-8px);animation:slcSlideIn .55s var(--slc-ease) forwards}
.slc-mark{position:relative;z-index:1;width:23px;height:23px;display:grid;place-items:center}
.slc-mark .slc-base{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--slc-faint);background:var(--slc-bg-1,#060A13);transition:.3s var(--slc-ease)}
.slc-mark .slc-tick{position:absolute;opacity:0;transform:scale(.4);transition:.3s var(--slc-ease);color:#02121F}
.slc-mark .slc-mhalo{position:absolute;inset:0;border-radius:50%;opacity:0;transition:.3s var(--slc-ease)}
.slc-step .slc-lab{font-size:11px;font-weight:600;letter-spacing:.085em;text-transform:uppercase;color:var(--slc-dim);line-height:1.4;transition:.3s var(--slc-ease)}
.slc-step .slc-lab i{font-style:normal;color:inherit;opacity:.62;font-weight:500}
.slc-step .slc-dur{font-family:var(--slc-mono);font-size:10px;color:var(--slc-faint);opacity:0;font-variant-numeric:tabular-nums;transition:.3s var(--slc-ease)}
.slc-step.slc-done .slc-mark .slc-base{width:19px;height:19px;border-color:transparent;background:var(--slc-grad);box-shadow:0 2px 10px rgba(46,107,255,.34)}
.slc-step.slc-done .slc-mark .slc-tick{opacity:1;transform:scale(1)}
.slc-step.slc-done .slc-lab{color:var(--slc-text-2)}
.slc-step.slc-done .slc-dur{opacity:1}
.slc-step.slc-now{background:linear-gradient(90deg,rgba(34,224,255,.10),rgba(46,107,255,.045) 48%,transparent 88%);box-shadow:inset 0 0 0 1px rgba(34,224,255,.12)}
.slc-step.slc-now::after{content:"";position:absolute;inset:0;border-radius:9px;pointer-events:none;overflow:hidden;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.09) 46%,transparent 78%);background-size:220% 100%;animation:slcShimmer 1.9s linear infinite}
.slc-step.slc-now .slc-mark .slc-base{width:9px;height:9px;background:var(--slc-cyan);border-color:transparent;box-shadow:0 0 12px rgba(34,224,255,.9)}
.slc-step.slc-now .slc-mark .slc-mhalo{opacity:1;border:1.5px solid transparent;background:conic-gradient(from 0deg,transparent 0deg,rgba(34,224,255,.9) 90deg,transparent 200deg) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:slcSpin 1.1s linear infinite}
.slc-step.slc-now .slc-lab{color:#fff;letter-spacing:.09em}
.slc-step.slc-now .slc-dur{opacity:1;color:var(--slc-cyan)}

.slc-laws{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:4px}
@media(max-width:640px){.slc-laws{grid-template-columns:1fr}}
.slc-law{position:relative;padding:12px 14px 12px 15px;border-radius:14px;background:rgba(255,255,255,.017);border:1px solid var(--slc-line)}
.slc-law::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--slc-grad);opacity:.75}
.slc-law .slc-k{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--slc-azure)}
.slc-law p{margin-top:6px;font-size:11px;line-height:1.6;color:var(--slc-muted)}

@media (prefers-reduced-motion:reduce){
  .slc-aurora,.slc-spin-slow,.slc-spin-rev,.slc-sweep,.slc-ring-halo,.slc-headline,
  .slc-card::before,.slc-step.slc-now::after,.slc-live,.slc-step.slc-now .slc-mark .slc-mhalo{animation:none!important}
  .slc-chip,.slc-step{animation-duration:.01ms!important}
}

/* ============================================================================
   PRE-PRODUCTION MATRIX — STEP 4 "Pre Pro · Final Review"  (scoped under .pp4)
   Ports the prepro-step4-redesign.html design system VERBATIM (same blue->cyan
   palette as Script Lock's --slc-*). EVERY selector is scoped under .pp4 and
   every keyframe / @property is pp4-prefixed so nothing leaks globally. The
   design tokens are defined on .pp4 (component-scoped custom properties — they
   only cascade to .pp4 descendants). Both the Step-4 root
   (#wizard-step-content-4.pp4) AND the portaled source-modal wrapper carry the
   .pp4 class, so the .pp4 .modal-* rules resolve for the portal too.
   ============================================================================ */
@property --pp4-ang{syntax:'<angle>';initial-value:0deg;inherits:false}

.pp4{
  --bg-0:#03060D; --bg-1:#060A13; --bg-2:#080D18;
  --panel:rgba(11,17,29,.72); --panel-2:rgba(9,14,25,.6);
  --line:rgba(125,180,255,.09); --line-2:rgba(125,190,255,.16); --line-3:rgba(125,200,255,.28);
  --text:#E9F2FF; --text-2:#B7C7DE; --muted:#7C8CA6; --dim:#4E5C74; --faint:#334054;
  --blue:#2E6BFF; --azure:#3FA0FF; --cyan:#22E0FF; --cyan-2:#8AF2FF;
  --grad:linear-gradient(100deg,#2E6BFF 0%,#3FA0FF 46%,#22E0FF 100%);
  --grad-2:linear-gradient(120deg,#2E6BFF,#22E0FF);
  --r-xl:22px; --r-lg:16px; --r-md:12px; --r-sm:9px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --mono:"SF Mono",ui-monospace,"JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
  color:var(--text); min-width:0;
}
.pp4 *{box-sizing:border-box}
.pp4 button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.pp4 svg{display:block}
.pp4 ::selection{background:rgba(34,224,255,.24)}

.pp4 .pp4-main{min-width:0;display:flex;flex-direction:column}

/* ---- topbar ---- */
.pp4 .topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-bottom:22px;flex-wrap:wrap}
.pp4 .crumbs{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--dim);letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:9px}
.pp4 .crumbs b{color:var(--cyan);font-weight:600} .pp4 .crumbs .sep{opacity:.4}
.pp4 .h1{font-size:25px;font-weight:700;letter-spacing:-.028em;display:flex;align-items:center;gap:12px;color:#fff}
.pp4 .h1 .step-chip{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);padding:4px 10px;border-radius:999px;background:rgba(34,224,255,.08);border:1px solid rgba(34,224,255,.2)}
.pp4 .sub{font-size:12.5px;color:var(--muted);margin-top:8px;max-width:640px;line-height:1.55}
.pp4 .topbar-r{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex:none}
.pp4 .actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.pp4 .abtn{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:10px;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--text-2);border:1px solid var(--line-2);background:rgba(255,255,255,.028);transition:.22s var(--ease)}
.pp4 .abtn:hover{color:#fff;border-color:var(--line-3);background:rgba(34,224,255,.07);transform:translateY(-1px)}
.pp4 .abtn svg{color:var(--azure)}
.pp4 .abtn.accent{color:var(--cyan);border-color:rgba(34,224,255,.28);background:rgba(34,224,255,.06)}
.pp4 .abtn.accent svg{color:var(--cyan)}

/* ---- generic card chrome ---- */
.pp4 .card{position:relative;border-radius:var(--r-xl);
  background:radial-gradient(120% 130% at 50% -10%,rgba(46,107,255,.08),transparent 56%),linear-gradient(180deg,rgba(12,18,31,.78),rgba(7,11,20,.86));
  border:1px solid var(--line-2);backdrop-filter:blur(24px);
  box-shadow:0 30px 80px -44px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04)}
.pp4 .card.sweep::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--pp4-ang,0deg),transparent 0deg,rgba(34,224,255,.5) 24deg,rgba(46,107,255,.4) 56deg,transparent 94deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:pp4SpinB 10s linear infinite;pointer-events:none;opacity:.7}
@keyframes pp4SpinB{to{--pp4-ang:360deg}}
.pp4 .card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 22px;border-bottom:1px solid var(--line)}
.pp4 .card-title{font-size:15px;font-weight:700;letter-spacing:-.01em;color:#fff}
.pp4 .card-desc{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.5;max-width:660px}
.pp4 .card-desc .cy{color:var(--azure)}
.pp4 .status-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;flex:none;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);background:rgba(34,224,255,.06);border:1px solid rgba(34,224,255,.2)}
.pp4 .status-pill.warn{color:var(--azure);background:rgba(63,160,255,.07);border-color:rgba(63,160,255,.24)}
.pp4 .status-pill .lv{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(34,224,255,.5);animation:pp4Live 2s var(--ease-io) infinite}
@keyframes pp4Live{0%{box-shadow:0 0 0 0 rgba(34,224,255,.5)}70%{box-shadow:0 0 0 7px rgba(34,224,255,0)}100%{box-shadow:0 0 0 0 rgba(34,224,255,0)}}
.pp4 .section-eyebrow{display:flex;align-items:center;gap:12px;margin:26px 2px 13px}
.pp4 .section-eyebrow .lbl{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.pp4 .section-eyebrow .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.pp4 .section-eyebrow .meta{font-family:var(--mono);font-size:10.5px;color:var(--muted)}

/* ---- HERO storyboard grid ---- */
.pp4 .hero{margin-bottom:4px}
.pp4 .autosave{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-size:11px;color:var(--azure);padding:5px 11px;border-radius:8px;background:rgba(46,107,255,.07);border:1px solid rgba(63,160,255,.16)}
.pp4 .sb-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:16px;padding:20px 22px 22px}
@media(max-width:1180px){.pp4 .sb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.pp4 .sb-grid{grid-template-columns:minmax(0,1fr)}}
.pp4 .frame{position:relative;display:flex;min-width:0;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:var(--panel-2);border:1px solid var(--line-2);transition:.3s var(--ease);opacity:0;transform:translateY(12px);animation:pp4Rise .6s var(--ease) forwards;cursor:pointer}
.pp4 .frame:hover{border-color:var(--line-3);transform:translateY(-3px);box-shadow:0 18px 40px -20px rgba(34,224,255,.4)}
.pp4 .frame.selected{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(34,224,255,.35),0 0 26px -6px rgba(34,224,255,.4)}
@keyframes pp4Rise{to{opacity:1;transform:translateY(0)}}
.pp4 .frame-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(160deg,#0A1524,#060D18)}
.pp4 .frame-img>img.frame-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pp4 .frame-badge{position:absolute;top:10px;left:10px;z-index:3;font-size:11px;font-weight:800;letter-spacing:.02em;color:#03121F;padding:3px 9px;border-radius:7px;background:var(--grad);box-shadow:0 3px 10px rgba(34,224,255,.4)}
.pp4 .frame-move{position:absolute;top:11px;right:11px;z-index:3;display:flex;align-items:center;gap:5px;font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-2);padding:3px 8px;border-radius:6px;background:rgba(3,10,20,.6);border:1px solid rgba(34,224,255,.2);backdrop-filter:blur(6px)}
.pp4 .frame-annot{position:absolute;left:10px;bottom:10px;right:10px;z-index:3;font-family:var(--mono);font-size:9px;line-height:1.5;color:rgba(200,230,255,.68);background:linear-gradient(180deg,transparent,rgba(3,7,14,.85) 45%);padding:14px 6px 4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pp4 .frame-scan{position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(34,224,255,.03) 3px 4px)}
.pp4 .frame-state{position:absolute;inset:0;z-index:4;display:grid;place-items:center;gap:8px;text-align:center;background:rgba(2,11,20,.55);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-2);padding:12px}
.pp4 .frame-state .spin{width:28px;height:28px;border-radius:50%;border:2px solid rgba(34,224,255,.25);border-top-color:var(--cyan);animation:pp4Spin .8s linear infinite}
.pp4 .frame-fail{position:absolute;left:8px;right:8px;bottom:40px;z-index:4;border-radius:7px;border:1px solid rgba(255,120,140,.4);background:rgba(43,6,16,.85);padding:8px;text-align:center;font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#ffd7de}
@keyframes pp4Spin{to{transform:rotate(360deg)}}
.pp4 .frame-mirror{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;align-items:center;gap:6px;background:rgba(34,224,255,.9);color:#00131d;padding:5px 8px;font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.pp4 .frame-mirror .spin{width:11px;height:11px;border-radius:50%;border:2px solid rgba(0,19,29,.3);border-top-color:#00131d;animation:pp4Spin .8s linear infinite}
.pp4 .frame-meta{display:flex;min-height:58px;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px 6px}
.pp4 .frame-meta .ft{font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--text);min-width:0}
.pp4 .frame-meta .ft strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp4 .frame-meta .ft small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--azure);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp4 .lens{font-family:var(--mono);font-size:10px;color:var(--muted);padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid var(--line);flex:none}
.pp4 .rail-row{display:flex;flex-direction:column;align-items:stretch;gap:7px;margin-top:auto;padding:8px 13px 14px}
.pp4 .rail-lbl{font-size:8px;font-weight:700;letter-spacing:.16em;color:var(--dim)}
.pp4 .rail-controls{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:6px;min-width:0}
.pp4 .thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:44px;align-items:center;justify-content:start;gap:6px;min-width:0;min-height:33px;overflow-x:auto}
.pp4 .thumb{display:block;width:44px;height:33px;min-width:44px;border-radius:6px;border:1px solid var(--line-2);object-fit:cover;background:linear-gradient(135deg,#12324f,#0a1826);transition:.2s var(--ease)}
.pp4 .thumb.talent{object-position:top}
.pp4 .thumb.location{border-color:rgba(139,92,246,.6)}
.pp4 .thumb:hover{border-color:var(--line-3);transform:translateY(-1px)}
.pp4 .thumb.more{width:44px;height:33px;display:grid;place-items:center;cursor:pointer;color:var(--cyan);border-style:dashed;border-color:rgba(34,224,255,.4);background:rgba(34,224,255,.06);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.01em}
.pp4 .thumb.editor-open{grid-column:2;flex:none}
.pp4 .thumb.more:hover{background:rgba(34,224,255,.13);border-color:var(--cyan);transform:translateY(-1px)}
.pp4 .rail-empty{font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(200,230,255,.35);align-self:center}

/* ---- team + refs ---- */
.pp4 .cc-stack>section+section{margin-top:16px}
.pp4 .team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px}
@media(max-width:1024px){.pp4 .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.pp4 .team-grid{grid-template-columns:minmax(0,1fr)}}
.pp4 .member{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r-md);border:1px solid var(--line);background:rgba(255,255,255,.02);transition:.2s var(--ease)}
.pp4 .member:hover{border-color:var(--line-2);background:rgba(255,255,255,.04)}
.pp4 .m-av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:14px;font-weight:700;color:#04121E;position:relative;overflow:hidden;background:linear-gradient(140deg,#2E6BFF,#22E0FF)}
.pp4 .m-av img{width:100%;height:100%;object-fit:cover;object-position:top}
.pp4 .m-info{flex:1;min-width:0}
.pp4 .m-name{font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.pp4 .m-role{font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.pp4 .m-actions{display:flex;align-items:center;gap:8px;flex:none}
.pp4 .m-dl{width:26px;height:26px;border-radius:7px;border:1px solid var(--line-2);color:var(--cyan-2);display:grid;place-items:center;transition:.2s var(--ease)}
.pp4 .m-dl:hover{color:var(--cyan);border-color:var(--line-3);background:rgba(34,224,255,.08)}
.pp4 .tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;flex:none;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pp4 .tag.live{color:var(--cyan);background:rgba(34,224,255,.08);border:1px solid rgba(34,224,255,.24)}
.pp4 .tag.live .d{width:5px;height:5px;border-radius:50%;background:var(--cyan);animation:pp4Live 2s var(--ease-io) infinite}
.pp4 .tag.lock{color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--line-2)}
.pp4 .member-foot{padding:4px 14px 16px;font-size:10.5px;color:var(--dim);line-height:1.5}
.pp4 .refwall2{display:grid;grid-template-columns:.82fr 1.45fr;gap:28px;padding:18px 20px 20px}
@media(max-width:1040px){.pp4 .refwall2{grid-template-columns:1fr;gap:20px}}
.pp4 .rf-col{min-width:0}
.pp4 .rf-col+.rf-col{border-left:1px solid var(--line);padding-left:28px}
@media(max-width:1040px){.pp4 .rf-col+.rf-col{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:18px}}
.pp4 .ref-block-lbl{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:2px 0 11px}
.pp4 .ref-grid{display:grid;gap:12px;justify-content:start}
.pp4 .ref-grid.tal{grid-template-columns:repeat(2,185px)}
.pp4 .ref-grid.prod{grid-template-columns:repeat(3,185px)}
@media(max-width:640px){.pp4 .ref-grid.tal,.pp4 .ref-grid.prod{grid-template-columns:repeat(2,1fr)}}
.pp4 .ref{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line-2);background:var(--panel-2);transition:.25s var(--ease)}
.pp4 .ref:hover{border-color:var(--line-3);transform:translateY(-2px)}
.pp4 .ref.excluded{opacity:.42;filter:grayscale(.6)}
.pp4 .ref-img{aspect-ratio:1/1;position:relative;overflow:hidden;background:linear-gradient(160deg,#0c1b2b,#070f1a)}
.pp4 .ref-img>[data-step6-reference-card]{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
/* ReferenceVisual paints its own cyan label chip as its LAST child span; hide it
   so the faithful mono .ref-key renders in its place (the component is reused
   verbatim for its launch-gate load-tracking data attributes). */
.pp4 .ref-img>[data-step6-reference-card]>span:last-child{display:none}
.pp4 .ref-key{position:absolute;top:8px;left:8px;z-index:2;font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.06em;color:var(--cyan-2);padding:2px 7px;border-radius:5px;background:rgba(3,10,20,.66);border:1px solid rgba(34,224,255,.22);backdrop-filter:blur(6px)}
.pp4 .ref-empty{grid-column:1/-1;font-size:11px;color:var(--dim);padding:10px 2px;font-style:italic;line-height:1.5}
.pp4 .ref-body{padding:9px 11px 11px}
.pp4 .ref-name{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.pp4 .ref-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;flex-wrap:wrap}
.pp4 .ready-badge{display:inline-flex;align-items:center;gap:5px;font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);padding:3px 8px;border-radius:6px;background:rgba(34,224,255,.07);border:1px solid rgba(34,224,255,.22)}
.pp4 .ready-badge .d{width:5px;height:5px;border-radius:50%;background:var(--cyan)}
.pp4 .ready-badge.warn{color:var(--azure);background:rgba(63,160,255,.07);border-color:rgba(63,160,255,.22)}
.pp4 .ready-badge.warn .d{background:var(--azure)}
.pp4 .excl-btn{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:4px 9px;border-radius:6px;border:1px solid var(--line-2);transition:.2s var(--ease)}
.pp4 .excl-btn:hover{color:#ff9a9a;border-color:rgba(255,120,120,.4);background:rgba(255,90,90,.06)}
.pp4 .ref.excluded .excl-btn{color:var(--cyan)}
.pp4 .ref.excluded .excl-btn:hover{color:var(--cyan);border-color:rgba(34,224,255,.4);background:rgba(34,224,255,.06)}
.pp4 .ref.excluded .ready-badge{color:var(--muted);background:rgba(255,255,255,.03);border-color:var(--line-2)}
.pp4 .ref.excluded .ready-badge .d{background:var(--muted)}

/* ---- tabbed detail ---- */
.pp4 .tabs-card{margin-top:0}
.pp4 .tabbar{display:flex;gap:4px;padding:12px 14px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.pp4 .tabbar::-webkit-scrollbar{display:none}
.pp4 .tab{position:relative;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:10px 15px;border-radius:10px;font-size:12.5px;font-weight:600;letter-spacing:-.005em;color:var(--muted);transition:.2s var(--ease)}
.pp4 .tab:hover{color:var(--text-2);background:rgba(255,255,255,.03)}
.pp4 .tab .ti{color:var(--dim);transition:.2s var(--ease);display:grid;place-items:center}
.pp4 .tab .badge{font-family:var(--mono);font-size:9.5px;font-weight:600;color:var(--dim);padding:1px 6px;border-radius:5px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.pp4 .tab.active{color:#fff;background:linear-gradient(180deg,rgba(34,224,255,.12),rgba(46,107,255,.05))}
.pp4 .tab.active .ti{color:var(--cyan)}
.pp4 .tab.active .badge{color:var(--cyan);border-color:rgba(34,224,255,.3);background:rgba(34,224,255,.08)}
.pp4 .tab.active::after{content:"";position:absolute;left:14px;right:14px;bottom:-13px;height:2px;border-radius:2px;background:var(--grad);box-shadow:0 0 12px rgba(34,224,255,.7)}
.pp4 .panels{padding:22px 24px 26px;min-height:300px}
.pp4 .panel{animation:pp4FadeUp .4s var(--ease)}
@keyframes pp4FadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.pp4 .panel-intro{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:18px;max-width:720px}

/* Production Book */
.pp4 .book-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start}
@media(max-width:1100px){.pp4 .book-grid{grid-template-columns:1fr}}
.pp4 .checklist{display:flex;flex-direction:column;gap:10px}
.pp4 .check{display:flex;gap:13px;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:rgba(255,255,255,.018);transition:.22s var(--ease)}
.pp4 .check:hover{border-color:var(--line-2);background:rgba(255,255,255,.03)}
.pp4 .check .ck{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;color:#03121F;background:var(--grad);box-shadow:0 2px 10px rgba(46,107,255,.34)}
.pp4 .check .ck.pending{background:none;border:2px solid rgba(255,196,120,.6);color:#ffce93}
.pp4 .check .ck.active{background:none;border:2px solid rgba(34,224,255,.25);border-top-color:var(--cyan);color:transparent;animation:pp4Spin .8s linear infinite}
.pp4 .check .ck.blocked{background:#ff6f8a;color:#2b0206}
.pp4 .check .cbody{flex:1;min-width:0}
.pp4 .check .ctitle{font-size:13px;font-weight:600;display:flex;align-items:center;gap:9px;color:var(--text)}
.pp4 .check .cdesc{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.5}
.pp4 .mini-tag{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);padding:2px 7px;border-radius:5px;background:rgba(34,224,255,.07);border:1px solid rgba(34,224,255,.2)}
.pp4 .readiness{border-radius:var(--r-lg);border:1px solid var(--line-2);padding:20px;background:linear-gradient(180deg,rgba(34,224,255,.05),rgba(46,107,255,.02))}
.pp4 .rd-ring{display:flex;align-items:center;gap:18px}
.pp4 .rd-num{font-size:40px;font-weight:700;letter-spacing:-.04em;line-height:1;background:linear-gradient(150deg,#fff,#22E0FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.pp4 .rd-num small{font-size:22px}
.pp4 .rd-cap{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-top:6px}
.pp4 .rd-desc{font-size:11px;color:var(--muted);margin-top:2px}
.pp4 .manifest{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.pp4 .manifest .mk{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.pp4 .manifest .mv{font-size:12px;color:var(--text-2);line-height:1.6}
.pp4 .manifest .mv b{color:var(--cyan);font-weight:600}
.pp4 .chips-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.pp4 .mchip{font-family:var(--mono);font-size:10px;color:var(--text-2);padding:5px 10px;border-radius:7px;background:rgba(255,255,255,.035);border:1px solid var(--line-2)}

/* Parameters */
.pp4 .param-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.pp4 .param{position:relative;overflow:hidden;padding:13px 15px;border-radius:var(--r-md);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));transition:.22s var(--ease)}
.pp4 .param:hover{border-color:var(--line-3);transform:translateY(-2px)}
.pp4 .param::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--grad);opacity:.6}
.pp4 .param .pk{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.pp4 .param .pv{margin-top:7px;font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.pp4 .param-note{grid-column:1/-1;font-size:11px;color:var(--dim);padding:6px 2px;font-style:italic}

/* Script Shots */
.pp4 .shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:13px}
.pp4 .shot{border-radius:var(--r-md);border:1px solid var(--line);background:rgba(255,255,255,.018);overflow:hidden;transition:.22s var(--ease)}
.pp4 .shot:hover{border-color:var(--line-2)}
.pp4 .shot-head{display:flex;align-items:center;gap:11px;padding:13px 15px 11px}
.pp4 .shot-badge{font-size:11px;font-weight:800;color:#03121F;padding:3px 9px;border-radius:7px;background:var(--grad);flex:none}
.pp4 .shot-tt{flex:1;min-width:0}
.pp4 .shot-name{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.pp4 .shot-sub{font-size:10.5px;color:var(--muted);margin-top:2px}
.pp4 .shot-exp{width:26px;height:26px;border-radius:7px;border:1px solid var(--line-2);color:var(--muted);display:grid;place-items:center;flex:none;transition:.2s var(--ease)}
.pp4 .shot-exp:hover{color:var(--cyan);border-color:var(--line-3);background:rgba(34,224,255,.06)}
.pp4 .shot-cv{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line)}
.pp4 .cv{padding:11px 15px;background:var(--bg-1);min-width:0}
.pp4 .cv .cvk{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--azure);margin-bottom:5px}
.pp4 .cv .cvv{font-size:11.5px;color:var(--text-2);line-height:1.45}
.pp4 .shot-full{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);background:var(--bg-1);border-top:1px solid transparent}
.pp4 .shot.open .shot-full{max-height:360px;border-top-color:var(--line);overflow:auto}
.pp4 .shot-full p{padding:13px 15px;font-size:11px;color:var(--muted);line-height:1.65;font-family:var(--mono);white-space:pre-wrap}
.pp4 .shot.open .shot-exp{color:var(--cyan);border-color:var(--line-3);background:rgba(34,224,255,.06);transform:rotate(45deg)}

/* Receipts */
.pp4 .receipts{display:flex;flex-direction:column;gap:10px}
.pp4 .receipt{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:rgba(255,255,255,.018);transition:.2s var(--ease)}
.pp4 .receipt:hover{border-color:var(--line-2)}
.pp4 .receipt .ri{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;color:var(--cyan);background:rgba(34,224,255,.06);border:1px solid rgba(34,224,255,.2)}
.pp4 .receipt .rk{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--cyan-2);letter-spacing:.01em}
.pp4 .receipt .rv{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.pp4 .receipt .rstat{margin-left:auto;flex:none;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);padding:4px 9px;border-radius:6px;background:rgba(34,224,255,.07);border:1px solid rgba(34,224,255,.2)}
.pp4 .receipt .rstat.warn{color:var(--muted);background:rgba(255,255,255,.03);border-color:var(--line-2)}

/* Style & Mood */
.pp4 .style-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.pp4 .style-card{position:relative;padding:16px 18px 18px;border-radius:var(--r-md);border:1px solid var(--line);background:rgba(255,255,255,.018)}
.pp4 .style-card::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:2px;border-radius:2px;background:var(--grad);opacity:.7}
.pp4 .style-card .sk{display:flex;align-items:center;gap:8px;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--azure)}
.pp4 .style-card .sv{margin-top:11px;font-size:13.5px;font-weight:500;color:var(--text);line-height:1.5}
.pp4 .style-card .sx{margin-top:8px;font-size:11px;color:var(--muted);line-height:1.55}

/* Strategic Brief */
.pp4 .brief{border-radius:var(--r-lg);border:1px solid var(--line-2);overflow:hidden;background:linear-gradient(180deg,rgba(46,107,255,.05),rgba(9,14,25,.4))}
.pp4 .brief-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.pp4 .brief-top .bt{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--cyan-2);display:flex;align-items:center;gap:9px}
.pp4 .brief-top .edit{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:5px 11px;border-radius:7px;border:1px solid var(--line-2);transition:.2s var(--ease);display:inline-flex;align-items:center;gap:5px}
.pp4 .brief-top .edit:hover{color:var(--cyan);border-color:var(--line-3);background:rgba(34,224,255,.06)}
.pp4 .brief-body{padding:18px 22px;max-height:340px;overflow:auto;font-size:12px;line-height:1.75;color:var(--text-2)}
.pp4 .brief-body p{margin-bottom:13px;white-space:pre-wrap}
.pp4 .brief-body .tc{color:var(--cyan);font-family:var(--mono);font-size:11px}
.pp4 .brief-body strong{color:#fff;font-weight:600}

/* ---- source modal (portaled; wrapper carries .pp4) ---- */
.pp4 .modal-scrim{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:40px;background:rgba(2,4,9,.72);backdrop-filter:blur(10px);animation:pp4ScrimIn .22s var(--ease)}
@keyframes pp4ScrimIn{from{opacity:0}to{opacity:1}}
.pp4 .modal{width:min(720px,94vw);max-height:84vh;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--line-2);
  background:radial-gradient(120% 120% at 50% -10%,rgba(46,107,255,.1),transparent 56%),linear-gradient(180deg,rgba(14,20,34,.97),rgba(8,12,22,.98));
  box-shadow:0 50px 120px -30px rgba(0,0,0,.92);animation:pp4ModalIn .28s var(--ease)}
@keyframes pp4ModalIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.pp4 .modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 22px 14px;border-bottom:1px solid var(--line)}
.pp4 .modal-eyebrow{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.pp4 .modal-title{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-top:6px;color:#fff}
.pp4 .modal-close{width:32px;height:32px;border-radius:9px;border:1px solid var(--line-2);color:var(--muted);display:grid;place-items:center;flex:none;transition:.2s var(--ease)}
.pp4 .modal-close:hover{color:#fff;border-color:var(--line-3);background:rgba(255,255,255,.05)}
.pp4 .modal-sub{padding:13px 22px 0;font-size:11.5px;color:var(--muted);line-height:1.5}
.pp4 .modal-body{padding:16px 22px 22px;overflow:auto}
.pp4 .modal-empty{display:grid;place-items:center;border-radius:var(--r-md);border:1px solid var(--line-2);background:rgba(3,10,20,.4);padding:32px 16px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(200,230,255,.5)}
.pp4 .modal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:13px}
.pp4 .msrc{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line-2);background:var(--panel-2);transition:.2s var(--ease)}
.pp4 .msrc:hover{border-color:var(--line-3);transform:translateY(-2px)}
.pp4 .msrc.location{border-color:rgba(139,92,246,.6)}
.pp4 .msrc-img{aspect-ratio:4/3;width:100%;object-fit:cover;background:linear-gradient(135deg,#12324f,#0a1826)}
.pp4 .msrc-img.talent{object-position:top}
.pp4 .msrc-cap{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px}
.pp4 .msrc-k{font-family:var(--mono);font-size:10px;color:var(--cyan-2)}
.pp4 .msrc-t{font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.pp4 .modal-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 22px 20px;border-top:1px solid var(--line)}
.pp4 .modal-foot .abtn{cursor:pointer}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .pp4 .card.sweep::before,.pp4 .status-pill .lv,.pp4 .tag.live .d,
  .pp4 .frame,.pp4 .panel,.pp4 .modal-scrim,.pp4 .modal,
  .pp4 .frame-state .spin,.pp4 .frame-mirror .spin,.pp4 .check .ck.active{animation:none!important}
  .pp4 .frame{opacity:1!important;transform:none!important}
}

/* ============================================================================
   PROJECTS & TEMPLATES BROWSER  (.ptb)  — fresh React island surface
   Ported from projects-templates-redesign.reference.html, re-scoped under .ptb.
   Tokens mirror the .pp4 block (index.css) + reference-specific extras. The
   ambient backdrop/aurora/grid/vignette and card chrome match Script Lock/Step 4.
   ============================================================================ */
.ptb{
  --bg-0:#03060D; --bg-1:#060A13; --bg-2:#080D18;
  --panel:rgba(11,17,29,.72); --panel-2:rgba(9,14,25,.6);
  --line:rgba(125,180,255,.09); --line-2:rgba(125,190,255,.16); --line-3:rgba(125,200,255,.28);
  --text:#E9F2FF; --text-2:#B7C7DE; --muted:#7C8CA6; --dim:#4E5C74; --faint:#334054;
  --blue:#2E6BFF; --azure:#3FA0FF; --cyan:#22E0FF; --cyan-2:#8AF2FF;
  --violet:#8B7BFF; --amber:#FFB24D;
  --grad:linear-gradient(100deg,#2E6BFF 0%,#3FA0FF 46%,#22E0FF 100%);
  --r-xl:20px; --r-lg:15px; --r-md:11px; --r-sm:8px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --font:"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
  --cols-c:26px 42px minmax(200px,1.7fr) 122px 152px 140px 112px;
  --cols-t:26px 46px minmax(220px,1.7fr) 132px 108px 128px 132px;
  position:relative; height:100%; min-height:0; width:100%; overflow:hidden;
  display:flex; flex-direction:column;
  font-family:var(--font); background:var(--bg-0); color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.ptb *{box-sizing:border-box}
.ptb button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.ptb svg{display:block} .ptb input,.ptb textarea{font:inherit}
.ptb ::selection{background:rgba(34,224,255,.24)}
.ptb *::-webkit-scrollbar{width:10px;height:10px}
.ptb *::-webkit-scrollbar-thumb{background:rgba(122,180,255,.15);border-radius:10px;border:3px solid transparent;background-clip:content-box}
.ptb *::-webkit-scrollbar-thumb:hover{background:rgba(122,180,255,.26);background-clip:content-box}

/* backdrop (contained to the island region, not the viewport) */
.ptb .backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ptb .aurora{position:absolute;border-radius:50%;filter:blur(95px);opacity:.4;will-change:transform}
.ptb .a1{width:820px;height:820px;left:26%;top:-42%;background:radial-gradient(circle at 50% 50%,rgba(46,107,255,.32),transparent 68%);animation:ptbD1 36s var(--ease-io) infinite alternate}
.ptb .a2{width:700px;height:700px;right:-16%;top:6%;background:radial-gradient(circle at 50% 50%,rgba(34,224,255,.2),transparent 66%);animation:ptbD2 43s var(--ease-io) infinite alternate}
.ptb .a3{width:940px;height:620px;left:0;bottom:-48%;background:radial-gradient(circle at 50% 50%,rgba(63,160,255,.16),transparent 70%);animation:ptbD3 49s var(--ease-io) infinite alternate}
@keyframes ptbD1{to{transform:translate3d(-80px,60px,0) scale(1.12)}}
@keyframes ptbD2{to{transform:translate3d(-110px,-50px,0) scale(1.07)}}
@keyframes ptbD3{to{transform:translate3d(100px,-40px,0) scale(1.1)}}
.ptb .grid-bg{position:absolute;inset:0;
  background-image:linear-gradient(to right,rgba(122,180,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(122,180,255,.05) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(130% 100% at 60% 12%,#000 0%,rgba(0,0,0,.5) 46%,transparent 80%);
          mask-image:radial-gradient(130% 100% at 60% 12%,#000 0%,rgba(0,0,0,.5) 46%,transparent 80%)}
.ptb .vignette{position:absolute;inset:0;background:radial-gradient(130% 100% at 50% -6%,transparent 44%,rgba(2,4,9,.7) 100%)}

/* main column */
.ptb .main{position:relative;z-index:1;min-width:0;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.ptb .topstrip{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 30px;border-bottom:1px solid var(--line);flex:none}
.ptb .switch{display:inline-flex;background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:11px;padding:3px}
.ptb .switch button{padding:7px 16px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted);transition:.2s var(--ease)}
.ptb .switch button.on{color:#03121F;background:var(--grad);box-shadow:0 4px 14px -4px rgba(34,224,255,.6)}
.ptb .switch button:not(.on):hover{color:var(--text)}
.ptb .topstrip-r{display:flex;align-items:center;gap:10px}
.ptb .icon-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2);color:var(--muted);display:grid;place-items:center;transition:.2s var(--ease)}
.ptb .icon-btn:hover{color:var(--cyan);border-color:var(--line-3);background:rgba(34,224,255,.06)}
.ptb .icon-btn.info{color:var(--cyan);border-color:rgba(34,224,255,.28);background:rgba(34,224,255,.06)}
.ptb .exit{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--text-2);border:1px solid transparent;transition:.2s var(--ease)}
.ptb .exit:hover{color:#fff;background:rgba(255,255,255,.05);border-color:var(--line-2)}
.ptb .headwrap{padding:20px 30px 0;flex:none}
.ptb .h1{font-size:26px;font-weight:700;letter-spacing:-.028em}

/* ONE ROW (Simon 2026-07-29): search is compact and never grows, so every control
   — filters, New, view/density toggles, row-count and pager — sits on a single
   line. A greedy flex:1 search was pushing the pager onto its own row and eating
   the vertical space the density redesign exists to save. */
.ptb .toolbar{display:flex;align-items:center;gap:10px;padding:14px 30px 12px;flex:none;flex-wrap:nowrap}
.ptb .toolbar .grow{flex:1 1 auto;min-width:8px}
.ptb .search{position:relative;flex:0 1 240px;min-width:132px}
.ptb .search>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--dim)}
.ptb .search input{width:100%;padding:11px 14px 11px 40px;border-radius:11px;border:1px solid var(--line-2);background:rgba(255,255,255,.028);color:var(--text);font-size:13px;transition:.2s var(--ease)}
.ptb .search input::placeholder{color:var(--dim)}
.ptb .search input:focus{outline:none;border-color:rgba(34,224,255,.4);background:rgba(34,224,255,.04);box-shadow:0 0 0 3px rgba(34,224,255,.08)}
.ptb .tbtn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:11px;font-size:12.5px;font-weight:600;color:var(--text-2);border:1px solid var(--line-2);background:rgba(255,255,255,.028);white-space:nowrap;transition:.2s var(--ease)}
.ptb .tbtn:hover{color:#fff;border-color:var(--line-3);background:rgba(34,224,255,.06)}
.ptb .tbtn .cv{color:var(--dim);display:inline-flex}
.ptb .chipset{display:inline-flex;border:1px solid var(--line-2);border-radius:11px;overflow:hidden}
.ptb .chipset button{padding:9px 13px;font-size:12px;font-weight:600;color:var(--muted);border-right:1px solid var(--line);transition:.18s var(--ease)}
.ptb .chipset button:last-child{border-right:none}
.ptb .chipset button.on{color:var(--cyan);background:rgba(34,224,255,.08)}
.ptb .chipset button:not(.on):hover{color:var(--text);background:rgba(255,255,255,.03)}
.ptb .chipset .ct{font-family:var(--mono);font-size:10px;opacity:.7;margin-left:4px}
/* Lives in .topstrip-r (page top-right, above the menu bar) — sized to sit level
   with the Exit control rather than the taller toolbar inputs. */
.ptb .btn-new{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;font-size:12.5px;font-weight:700;color:#03121F;background:var(--grad);box-shadow:0 8px 24px -8px rgba(34,224,255,.6);white-space:nowrap;transition:.25s var(--ease)}
.ptb .btn-new:hover{transform:translateY(-1px);box-shadow:0 12px 30px -8px rgba(34,224,255,.75)}
.ptb .seg-toggle{display:inline-flex;border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.ptb .seg-toggle button{width:38px;height:38px;display:grid;place-items:center;color:var(--muted);border-right:1px solid var(--line);transition:.18s var(--ease)}
.ptb .seg-toggle button:last-child{border-right:none}
.ptb .seg-toggle button.on{color:var(--cyan);background:rgba(34,224,255,.08)}
.ptb .seg-toggle button:not(.on):hover{color:var(--text)}

.ptb .menu-wrap{position:relative}
.ptb .menu{position:absolute;top:calc(100% + 8px);left:0;z-index:40;width:210px;padding:6px;border-radius:14px;background:linear-gradient(180deg,rgba(14,20,34,.98),rgba(8,12,22,.99));border:1px solid var(--line-2);box-shadow:0 30px 70px -20px rgba(0,0,0,.9);max-height:360px;overflow:auto;animation:ptbPop .18s var(--ease)}
@keyframes ptbPop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ptb .menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 11px;border-radius:9px;font-size:12.5px;font-weight:500;color:var(--text-2);transition:.15s var(--ease)}
.ptb .menu button:hover,.ptb .menu button.active{background:rgba(255,255,255,.04);color:#fff}
.ptb .menu button.sel{color:#03121F;background:var(--grad);font-weight:600}
.ptb .menu button .mk{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--dim)}
.ptb .menu button.sel .mk{color:rgba(3,18,31,.7)}

/* listmeta now lives INSIDE .toolbar (single-row law above), so it is a compact
   inline cluster rather than its own full-width band. */
.ptb .listmeta{display:contents}
.ptb .listmeta .cnt{font-size:11.5px;color:var(--muted);white-space:nowrap} .ptb .listmeta .cnt b{color:var(--text-2);font-weight:600}
.ptb .pager{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);white-space:nowrap}
.ptb .pager button{padding:6px 13px;border-radius:8px;border:1px solid var(--line-2);color:var(--text-2);font-weight:600;transition:.18s var(--ease)}
.ptb .pager button:hover:not(:disabled){color:#fff;border-color:var(--line-3);background:rgba(34,224,255,.06)}
.ptb .pager button:disabled{opacity:.4;cursor:default}
.ptb .psz-label{font-size:11px;color:var(--dim)}
.ptb .chipset.psz button{padding:6px 11px;font-size:11.5px}

.ptb .scroll{flex:1;overflow:auto;padding:0 30px 40px}

/* list */
.ptb .view{display:block}
.ptb .thead{position:sticky;top:0;z-index:20;display:grid;gap:14px;align-items:center;padding:11px 16px;background:rgba(6,10,19,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-2)}
.ptb .thead.c{grid-template-columns:var(--cols-c)} .ptb .thead.t{grid-template-columns:var(--cols-t)}
.ptb .thead span{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.ptb .thead .r{text-align:right}
.ptb .grp{margin-top:8px}
.ptb .grp-head{position:sticky;top:39px;z-index:15;display:flex;align-items:center;gap:11px;padding:9px 14px;margin-top:6px;border-radius:9px;cursor:pointer;background:linear-gradient(90deg,rgba(46,107,255,.1),rgba(9,14,25,.6));border:1px solid var(--line);backdrop-filter:blur(10px);transition:.2s var(--ease)}
.ptb .grp-head:hover{border-color:var(--line-2)}
.ptb .grp-head .gchev{color:var(--cyan);transition:transform .25s var(--ease);display:inline-flex}
.ptb .grp.collapsed .gchev{transform:rotate(-90deg)}
.ptb .grp-head .gname{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.ptb .grp-head .gcount{margin-left:auto;font-size:10px;font-weight:600;color:var(--muted);padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line-2)}
.ptb .grp.collapsed .grp-body{display:none}

.ptb .row{position:relative;display:grid;gap:14px;align-items:center;padding:8px 16px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:background .18s var(--ease),border-color .18s var(--ease);text-align:left;width:100%}
.ptb .row.c{grid-template-columns:var(--cols-c)} .ptb .row.t{grid-template-columns:var(--cols-t)}
.ptb .row:hover{background:rgba(255,255,255,.028);border-color:var(--line)}
.ptb .row.open{background:rgba(34,224,255,.05);border-color:rgba(34,224,255,.2)}
.ptb .row .exp{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:var(--dim);transition:.2s var(--ease)}
.ptb .row:hover .exp{color:var(--muted)} .ptb .row.open .exp{color:var(--cyan);transform:rotate(90deg)}
.ptb .thumb{width:100%;aspect-ratio:4/3;border-radius:7px;overflow:hidden;border:1px solid var(--line-2);position:relative;background:linear-gradient(150deg,#12324f,#0a1826);background-size:cover;background-position:center}
.ptb .thumb>*{width:100%;height:100%}
.ptb .thumb.folder{display:grid;place-items:center;color:var(--azure);background:rgba(46,107,255,.08)}
.ptb .thumb .tg{position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:4px;display:grid;place-items:center;color:#cdefff;background:rgba(3,10,20,.55);backdrop-filter:blur(4px);z-index:2}
.ptb .cell-name{min-width:0}
.ptb .nm1{font-size:12.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptb .nm2{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.ptb .ws{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:var(--text-2);padding:4px 9px;border-radius:7px;background:rgba(255,255,255,.04);border:1px solid var(--line-2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptb .ws .d{width:5px;height:5px;border-radius:50%;background:var(--cyan);flex:none}
.ptb .mod{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptb .chip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10px;font-weight:600;padding:4px 9px;border-radius:6px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ptb .chip.direct{color:var(--cyan);background:rgba(34,224,255,.08);border:1px solid rgba(34,224,255,.22)}
.ptb .chip.life{color:var(--violet);background:rgba(139,123,255,.1);border:1px solid rgba(139,123,255,.26)}
.ptb .chip.market{color:var(--azure);background:rgba(63,160,255,.1);border:1px solid rgba(63,160,255,.26)}
.ptb .chip.mine{color:var(--cyan-2);background:rgba(138,242,255,.08);border:1px solid rgba(138,242,255,.22)}
.ptb .chip.draft{color:var(--amber);background:rgba(255,178,77,.1);border:1px solid rgba(255,178,77,.28)}
.ptb .chip.pub{color:#5CE6A8;background:rgba(92,230,168,.1);border:1px solid rgba(92,230,168,.28)}
.ptb .chip.neutral{color:var(--text-2);background:rgba(255,255,255,.04);border:1px solid var(--line-2)}
.ptb .acts{display:flex;align-items:center;justify-content:flex-end;gap:5px;opacity:.5;transition:opacity .18s var(--ease)}
.ptb .row:hover .acts,.ptb .row.open .acts{opacity:1}
.ptb .act{width:27px;height:27px;border-radius:7px;display:grid;place-items:center;color:var(--muted);border:1px solid transparent;transition:.18s var(--ease)}
.ptb .act:hover{color:#fff;border-color:var(--line-2);background:rgba(255,255,255,.05)}
.ptb .act.play:hover{color:var(--cyan);border-color:rgba(34,224,255,.3);background:rgba(34,224,255,.08)}
.ptb .act.del:hover{color:#ff9a9a;border-color:rgba(255,120,120,.35);background:rgba(255,90,90,.07)}
.ptb .act.use{width:auto;padding:0 12px;font-size:11px;font-weight:700;color:#03121F;background:var(--grad);border-color:transparent}
.ptb .act.edit{width:auto;padding:0 12px;font-size:11px;font-weight:600;color:var(--text-2);border-color:var(--line-2)}
.ptb .act.edit:hover{color:#fff;background:rgba(34,224,255,.06)}

/* compact density */
.ptb .view.dense{--cols-c:22px 30px minmax(200px,1.7fr) 116px 148px 132px 108px;--cols-t:22px 32px minmax(220px,1.7fr) 126px 104px 122px 126px}
.ptb .view.dense .row{padding:3px 16px;gap:12px}
.ptb .view.dense .thumb{aspect-ratio:auto;height:23px}
.ptb .view.dense .thumb.folder svg{width:13px;height:13px}
.ptb .view.dense .thumb .tg{display:none}
.ptb .view.dense .nm2{display:none}

/* detail */
.ptb .detail{grid-column:1/-1;overflow:hidden;max-height:0;transition:max-height .38s var(--ease)}
.ptb .detail.open{max-height:820px}
.ptb .detail-inner{margin:4px 0 12px;border-radius:var(--r-lg);border:1px solid rgba(34,224,255,.16);background:radial-gradient(120% 130% at 50% -10%,rgba(46,107,255,.07),transparent 56%),linear-gradient(180deg,rgba(12,18,31,.7),rgba(7,11,20,.8))}
.ptb .seg{display:flex;gap:4px;padding:11px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ptb .seg button{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:9px;font-size:12px;font-weight:600;color:var(--muted);transition:.18s var(--ease)}
.ptb .seg button .sc{color:var(--dim);display:inline-flex}
.ptb .seg button.on{color:#fff;background:linear-gradient(180deg,rgba(34,224,255,.12),rgba(46,107,255,.05))}
.ptb .seg button.on .sc{color:var(--cyan)}
.ptb .seg button:not(.on):hover{color:var(--text-2);background:rgba(255,255,255,.03)}
.ptb .seg .badge{font-family:var(--mono);font-size:9.5px;padding:1px 6px;border-radius:5px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--dim)}
.ptb .spanel{padding:16px 18px 18px;animation:ptbFade .3s var(--ease)}
@keyframes ptbFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ptb .d2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:1150px){.ptb .d2{grid-template-columns:1fr}}
.ptb .block{border-radius:var(--r-md);border:1px solid var(--line);background:rgba(255,255,255,.015);padding:13px 14px;min-width:0}
.ptb .block-h{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.ptb .block-h .n{font-family:var(--mono);color:var(--muted);letter-spacing:0}
.ptb .preview{aspect-ratio:16/9;max-height:214px;border-radius:9px;border:1px solid var(--line-2);position:relative;overflow:hidden;background:linear-gradient(150deg,#0b1a2a,#060d18);display:grid;place-items:center;text-align:center}
.ptb .preview>video,.ptb .preview>img{width:100%;height:100%;object-fit:cover}
/* projectManager's renderPlayableVideoPreview injects its own relatively/absolutely
   positioned wrapper; let it fill the preview box instead of collapsing. */
.ptb .preview>div{position:relative;width:100%;height:100%}
.ptb .preview video{width:100%;height:100%;object-fit:cover}
.ptb .preview .ph{font-size:11px;color:var(--muted);padding:10px} .ptb .preview .ph b{display:block;color:var(--text-2);font-size:12.5px;margin-bottom:3px;font-weight:600}
.ptb .play-c{width:44px;height:44px;border-radius:50%;background:rgba(3,10,20,.6);border:1px solid rgba(34,224,255,.3);display:grid;place-items:center;color:var(--cyan);margin:0 auto 8px}
.ptb .kv{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);font-size:11.5px;gap:10px}
.ptb .kv:last-child{border-bottom:none} .ptb .kv .k{color:var(--muted)} .ptb .kv .v{color:var(--text-2);font-weight:600;font-family:var(--mono)}
.ptb .suite{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ptb .suite .s{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.02);border:1px solid var(--line);font-size:11px;color:var(--text-2)}
.ptb .suite .s .sd{width:6px;height:6px;border-radius:50%;background:var(--dim);margin-left:auto}
.ptb .suite .s.active .sd{background:var(--cyan);box-shadow:0 0 8px rgba(34,224,255,.7)}
.ptb .suite .s .st{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-left:auto}
.ptb .folderrow{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;background:rgba(255,255,255,.02);border:1px solid var(--line);margin-bottom:7px}
.ptb .folderrow .fi{color:var(--azure);display:inline-flex} .ptb .folderrow .fn{font-size:12px;font-weight:600} .ptb .folderrow .fsub{font-size:10px;color:var(--dim);margin-top:1px}
.ptb .folderrow .fc{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted);white-space:nowrap}
.ptb .filelist{max-height:172px;overflow:auto;margin-top:2px}
.ptb .file{display:flex;align-items:center;gap:10px;padding:7px 6px;border-bottom:1px solid rgba(125,180,255,.05);font-size:11.5px;border-radius:6px;cursor:pointer;transition:background .15s var(--ease)}
.ptb .file:hover{background:rgba(34,224,255,.06)}
.ptb .file .fthumb{width:34px;height:24px;flex:none;border-radius:5px;object-fit:cover;border:1px solid var(--line-2);background:linear-gradient(150deg,#12324f,#0a1826);display:block}
.ptb .file .fthumb-blank{display:grid;place-items:center;color:var(--dim);background:rgba(255,255,255,.02)}
.ptb .file .fthumb-blank svg{width:13px;height:13px}
.ptb .view.dense .file .fthumb{width:26px;height:18px}
.ptb .file:hover .fn{color:#fff}
.ptb .recent{cursor:default}
.ptb .file:last-child{border-bottom:none}
.ptb .file .fn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-2)}
.ptb .file .ft{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--cyan);padding:2px 6px;border-radius:5px;background:rgba(34,224,255,.07);border:1px solid rgba(34,224,255,.18)}
.ptb .file .fd{font-family:var(--mono);font-size:9.5px;color:var(--dim);white-space:nowrap}
.ptb .empty{padding:16px 4px;font-size:11px;color:var(--dim);text-align:center}
.ptb .desc-box{width:100%;min-height:64px;border-radius:9px;border:1px solid var(--line-2);background:rgba(255,255,255,.02);padding:11px;color:var(--text-2);font-size:12px;line-height:1.5;resize:vertical}
.ptb .verticals{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}
.ptb .vert{padding:8px 11px;border-radius:8px;text-align:center;font-size:11px;font-weight:500;color:var(--text-2);background:rgba(255,255,255,.02);border:1px solid var(--line);cursor:pointer;transition:.15s var(--ease)}
.ptb .vert:hover{border-color:var(--line-3);color:#fff;background:rgba(34,224,255,.05)}
.ptb .vert.on{color:var(--cyan);background:rgba(34,224,255,.09);border-color:rgba(34,224,255,.32)}
.ptb .dactions{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.ptb .dbtn{padding:9px 14px;border-radius:9px;font-size:11.5px;font-weight:600;color:var(--text-2);border:1px solid var(--line-2);background:rgba(255,255,255,.03);transition:.18s var(--ease)}
.ptb .dbtn:hover{color:#fff;border-color:var(--line-3);background:rgba(34,224,255,.06)}
.ptb .dbtn.primary{color:#03121F;background:var(--grad);border-color:transparent;font-weight:700}
.ptb .dbtn.danger{color:#ff9a9a;border-color:rgba(255,120,120,.3)} .ptb .dbtn.danger:hover{background:rgba(255,90,90,.08);color:#ffb3b3}
.ptb .dbtn:disabled{opacity:.5;cursor:default}
.ptb .recent{display:flex;align-items:center;padding:6px 6px;border-bottom:1px solid var(--line);font-size:11.5px;gap:10px;border-radius:6px;transition:background .15s var(--ease)}
.ptb .recent:hover{background:rgba(34,224,255,.06)}
.ptb .recent:hover .rn{color:#fff}
.ptb .recent .fthumb{width:34px;height:24px;flex:none;border-radius:5px;object-fit:cover;border:1px solid var(--line-2);background:linear-gradient(150deg,#12324f,#0a1826);display:block}
.ptb .recent .fthumb-blank{display:grid;place-items:center;color:var(--dim);background:rgba(255,255,255,.02)}
.ptb .recent .fthumb-blank svg{width:13px;height:13px}
.ptb .recent .rn{flex:1;min-width:0}
.ptb .recent .rt{margin-left:auto}
.ptb .recent:last-child{border-bottom:none} .ptb .recent .rn{color:var(--text-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ptb .recent .rt{font-family:var(--mono);font-size:9px;color:var(--cyan);flex:none}
.ptb .pathbox{margin-top:11px;padding:9px 11px;border-radius:8px;background:rgba(0,0,0,.25);border:1px solid var(--line);font-family:var(--mono);font-size:9.5px;color:var(--dim);word-break:break-all;line-height:1.5}

/* grid cards */
.ptb .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:14px;padding-top:18px}
.ptb .pcard{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(12,18,31,.7),rgba(7,11,20,.82));transition:.25s var(--ease);opacity:0;transform:translateY(10px);animation:ptbRise .6s var(--ease) forwards;text-align:left;width:100%;display:block}
@keyframes ptbRise{to{opacity:1;transform:none}}
.ptb .pcard:hover{border-color:var(--line-3);transform:translateY(-3px);box-shadow:0 20px 44px -22px rgba(34,224,255,.4)}
.ptb .pcard-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(150deg,#12324f,#0a1826);background-size:cover;background-position:center}
.ptb .pcard-img>video,.ptb .pcard-img>img,.ptb .pcard-img>div{width:100%;height:100%;object-fit:cover}
.ptb .pcard-img.folder{display:grid;place-items:center;color:var(--azure);background:linear-gradient(150deg,rgba(46,107,255,.12),rgba(9,14,25,.6))}
.ptb .pcard-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,7,14,.15),rgba(3,7,14,.5));pointer-events:none}
.ptb .pcard-tg{position:absolute;left:9px;top:9px;z-index:2;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:#cdefff;background:rgba(3,10,20,.55);border:1px solid rgba(125,180,255,.2);backdrop-filter:blur(6px)}
.ptb .pcard-dur{position:absolute;right:9px;top:9px;z-index:2;font-family:var(--mono);font-size:9.5px;font-weight:700;color:#eafcff;padding:3px 8px;border-radius:6px;background:rgba(3,10,20,.62);border:1px solid rgba(125,180,255,.22);backdrop-filter:blur(6px)}
.ptb .pcard-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:42px;height:42px;border-radius:50%;background:rgba(3,10,20,.5);border:1px solid rgba(34,224,255,.35);display:grid;place-items:center;color:var(--cyan);opacity:0;transition:.25s var(--ease)}
.ptb .pcard:hover .pcard-play{opacity:1}
.ptb .pcard-body{padding:12px 13px 13px}
.ptb .pcard-name{font-size:12.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptb .pcard-sub{font-size:10.5px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptb .pcard-meta{display:flex;align-items:center;gap:7px;margin-top:10px;min-width:0}
.ptb .pcard-meta .chip{padding:3px 7px;font-size:9px;flex:none}
.ptb .pcard-date{font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-left:auto;flex:none;white-space:nowrap}
.ptb .pcard-foot{display:flex;align-items:center;gap:7px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.ptb .pcard-foot .grow{flex:1}
.ptb .mini{padding:7px 13px;border-radius:8px;font-size:11px;font-weight:600;transition:.18s var(--ease)}
.ptb .mini.ghost{color:var(--text-2);border:1px solid var(--line-2)} .ptb .mini.ghost:hover{color:#fff;border-color:var(--line-3);background:rgba(34,224,255,.06)}
.ptb .mini.solid{color:#03121F;background:var(--grad);font-weight:700} .ptb .mini.solid:hover{filter:brightness(1.06)}

.ptb .bkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.ptb .bktile{border-radius:9px;overflow:hidden;border:1px solid var(--line-2);background:rgba(255,255,255,.02);display:block;text-align:left;transition:.2s var(--ease)}
.ptb .bktile:hover{border-color:var(--line-3);background:rgba(34,224,255,.06);transform:translateY(-2px)}
.ptb .bktile img,.ptb .bktile video{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:linear-gradient(150deg,#12324f,#0a1826)}
.ptb .bktile .bkname{display:block;padding:7px 9px;font-size:10.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptb .bktile:hover .bkname{color:#fff}
.ptb .browser-empty{padding:60px 20px;text-align:center;color:var(--muted);font-size:13px}

@media (prefers-reduced-motion:reduce){
  .ptb .aurora{animation:none!important}
  .ptb .pcard,.ptb .spanel,.ptb .menu{animation:none!important;opacity:1!important;transform:none!important}
}

/* Script-Lock stage-list entrance animation — ported from Ruliad_New root index.css:3370-3383
   (claude/scrape-race-fix-20260804). Drives .ruliad-stage-list children in the Step-3 compiler. */
@keyframes ruliadStageIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.ruliad-stage-list > div { animation: ruliadStageIn 0.45s ease both; }

/* ============================================================
   NLE editor chrome — ported verbatim from Ruliad_New root index.css:2587-2609
   (claude/scrape-race-fix-20260804). These hooks are already emitted by
   VideoEditorHostChrome.tsx but had NO CSS in the monorepo, so editor-fullscreen
   sidebar hiding and the preview-modal timeline chrome did nothing.
   NOTE: source's #auth-gate-wordmark rule is intentionally NOT ported — it depends
   on --ruliad-logo-gradient-approved, which this monorepo does not define; porting
   it would set color:transparent with no gradient and hide the wordmark entirely.
   ============================================================ */
body.nle-editor-sidebar-hidden #sidebar,
body.nle-editor-sidebar-hidden #dash-sidebar {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.nle-editor-sidebar-hidden #app-container,
body.nle-editor-sidebar-hidden main,
body.nle-editor-sidebar-hidden #main-content-area {
  margin-left: 0 !important;
}

#preview-modal #nle-timeline-resize-handle {
  display: none !important;
}

#preview-modal [data-video-editor-react-timeline-headers],
#preview-modal [data-video-editor-react-timeline] {
  background: #0c1117 !important;
}

/* PA Step-3 embedded Script Studio composer — dropdown menu scrollbar (Ruliad_New ui.ts:19186-19193,
   source ships these rules as a scoped <style> inside #architect-script-empty-composer). */
#architect-script-empty-composer [data-architect-script-select-menu] {
  scrollbar-width: thin;
  scrollbar-color: #1d4ed8 #020617;
}
#architect-script-empty-composer [data-architect-script-select-menu]::-webkit-scrollbar { width: 7px; }
#architect-script-empty-composer [data-architect-script-select-menu]::-webkit-scrollbar-track { background: #020617; }
#architect-script-empty-composer [data-architect-script-select-menu]::-webkit-scrollbar-thumb { background: #1d4ed8; border-radius: 999px; }

/* Script Notes "Show me" flash (Phase C2 — the note always points at something) */
@keyframes scriptNoteFlash {
  0% { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.75); }
  100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}
.script-note-flash { animation: scriptNoteFlash 1.6s ease-out; }

/* ============================================================
   CTA READY ORBIT. When a call-to-action becomes activatable, a bright beam orbits its border over a dim
   base ring — a border-beam, in the app's cyan. The point is that readiness is VISIBLE: the Step-4 route
   buttons unlock only once the storyboard and authorities are in place, and without this an operator had
   no signal that the wait was over besides re-reading the checklist.

   Universal by design: the whole `.ruliad-cta` family carries it, current and future, with no per-button
   wiring; `cta-ready-orbit` opts a one-off button in. GPU-cheap — one ::before, a conic gradient rotated
   through a registered custom property, no layout and no extra DOM. */
@property --cta-orbit-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cta-ready-orbit, .ruliad-cta, .ruliad-cta-primary { position: relative; isolation: isolate; }
.cta-ready-orbit::before,
.ruliad-cta:not(:disabled):not([aria-disabled="true"])::before,
.ruliad-cta-primary:not(:disabled):not([aria-disabled="true"])::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background:
    conic-gradient(from var(--cta-orbit-angle),
      rgba(34, 224, 255, 0.10) 0%,
      rgba(34, 224, 255, 0.10) 72%,
      rgba(34, 224, 255, 0.55) 82%,
      #bfdbfe 90%,
      #ffffff 94%,
      rgba(34, 224, 255, 0.55) 97%,
      rgba(34, 224, 255, 0.10) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: ctaOrbitSweep 2.6s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes ctaOrbitSweep { to { --cta-orbit-angle: 360deg; } }
/* A disabled button must never advertise readiness, even if the class lingers on it. */
.cta-ready-orbit:disabled::before, .cta-ready-orbit[aria-disabled="true"]::before { content: none; }
@media (prefers-reduced-motion: reduce) {
  .cta-ready-orbit::before,
  .ruliad-cta:not(:disabled)::before,
  .ruliad-cta-primary:not(:disabled)::before {
    animation: none;
    background: rgba(34, 224, 255, 0.45);
  }
}

/* Production Architect modal chrome (ported from Ruliad_New index.css:3399-3412 — markup at
   ProductionArchitectModal.tsx): the step body owns its scroll with bottom breathing room, and the
   footer keeps its 88px floor above the scroll region. */
[data-production-architect-scroll-region="true"] {
  min-height: 0;
  overflow-y: auto !important;
  padding-bottom: 1.75rem !important;
  scroll-padding-bottom: 7rem;
}
[data-production-architect-footer="true"] {
  bottom: 0;
  box-sizing: border-box;
  min-height: 88px;
  position: relative;
  z-index: 20;
}

/* Creative Console composer (account menu → Agents → INITIALIZE CONSOLE) — a verbatim port of the
   deployed `#creative-chat-*` composer, which is NOT the production-console footer. The block above
   pins that footer (and its mic/mute buttons) to fixed pixel sizes via !important; release them for
   this variant so the 48px mic + "Voice" caption and the 3rem dropzone size themselves, and restate
   the deployed `#creative-chat-dropzone` ring. */
.production-console-react-shell[data-production-console-variant="creative"] form[data-production-console-react-composer="true"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 16px !important;
    display: block;
}

.production-console-react-shell[data-production-console-variant="creative"] [data-production-console-react-input-shell="true"] {
    height: auto !important;
    min-height: 3rem !important;
    max-height: none !important;
    width: auto;
    border-radius: 1rem;
    overflow: visible;
    box-shadow: inset 0 1px #60a5fa0f, 0 0 0 1px #082f494d;
}

.production-console-react-shell[data-production-console-variant="creative"] textarea[data-production-console-react-input="true"] {
    height: 2.25rem !important;
    min-height: 2.25rem !important;
    max-height: 2.25rem !important;
    line-height: 2.1rem !important;
    border-radius: .75rem !important;
}

/* The footer block forces the console mic/mute to a 44px square; the creative mic is a 48px circle and
   the mute is an inline glyph inside the input pill. */
.production-console-react-shell[data-production-console-variant="creative"] [data-production-console-react-mic="true"] {
    min-height: 3rem !important;
    height: 3rem !important;
    width: 3rem !important;
}

.production-console-react-shell[data-production-console-variant="creative"] [data-production-console-react-mute="true"] {
    min-height: 0 !important;
    height: auto !important;
    width: auto !important;
}

/* ============================================================================================
   Projects — step-based Resource Center (saved-campaign release; source built index.css
   `.ptb .resource-*` block @ da66fe8a / 56f08eda / 16685586). Scoped under `.ptb` like the rest of
   the ported Projects browser tokens; the resource table lives inside the expanded project row.
   ============================================================================================ */
.ptb .resource-tabs{gap:5px;padding-block:8px}
.ptb .resource-tabs>button{min-width:128px;flex:1 0 128px;justify-content:flex-start;padding:8px 10px;border:1px solid transparent}
.ptb .resource-tabs>button.on{border-color:rgba(34,224,255,.16)}
.ptb .resource-tabs .tab-copy{display:grid;gap:3px;line-height:1;text-align:left;min-width:0}
.ptb .resource-tabs .tab-primary{font-size:12px;font-weight:700;color:var(--text-2);white-space:nowrap}
.ptb .resource-tabs .tab-secondary{font-family:var(--mono);font-size:8px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.ptb .resource-tabs button.on .tab-primary{color:#fff}
.ptb .resource-tabs button.on .tab-secondary{color:var(--cyan)}
.ptb .resource-tabs .badge{margin-left:auto;font-family:var(--mono);font-size:9px;padding:2px 6px;border-radius:6px;border:1px solid var(--line-2);color:var(--text-2);background:rgba(255,255,255,.03)}
.ptb .resource-state{display:flex;align-items:center;gap:7px;margin-top:9px;padding:7px 9px;border-radius:7px;border:1px solid var(--line);font-size:9.5px;color:var(--muted);background:rgba(0,0,0,.18)}
.ptb .resource-state>span{width:6px;height:6px;border-radius:50%;background:var(--dim);flex:none}
.ptb .resource-state.ready>span{background:#5ce6a8}.ptb .resource-state.loading>span{background:var(--cyan);box-shadow:0 0 7px rgba(34,224,255,.65)}
.ptb .resource-state.partial>span{background:var(--amber)}.ptb .resource-state.error>span{background:#ff7d7d}
.ptb .resource-panel{min-width:0}
.ptb .resource-panel-head{display:grid;grid-template-columns:minmax(130px,.42fr) minmax(320px,1.7fr) auto;align-items:center;gap:20px;margin-bottom:11px;padding:0 2px}
.ptb .resource-panel-head>div>span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan)}
.ptb .resource-panel-head h3{font-size:16px;line-height:1.1;margin:2px 0 0;color:#fff}
.ptb .resource-panel-head p{font-size:10.5px;line-height:1.45;color:var(--muted);margin:0}
.ptb .resource-total{font-family:var(--mono);font-size:9.5px;color:var(--text-2);white-space:nowrap;padding:5px 8px;border-radius:7px;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.ptb .resource-table-wrap{max-height:390px;overflow:auto;border:1px solid var(--line);border-radius:9px;background:rgba(0,0,0,.16);scrollbar-width:thin}
.ptb .resource-table{min-width:1050px}
.ptb .resource-head,.ptb .resource-row{display:grid;grid-template-columns:minmax(230px,1.45fr) 72px minmax(150px,.85fr) minmax(230px,1.25fr) minmax(115px,.65fr) 142px;align-items:center;gap:10px}
.ptb .resource-head{position:sticky;top:0;z-index:3;min-height:29px;padding:0 10px;border-bottom:1px solid var(--line-2);background:rgba(8,13,22,.97);backdrop-filter:blur(9px);font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.ptb .resource-row{min-height:47px;padding:5px 10px;border-bottom:1px solid rgba(125,180,255,.055);transition:background .14s var(--ease)}
.ptb .resource-row:last-child{border-bottom:none}.ptb .resource-row:hover{background:rgba(34,224,255,.035)}
.ptb .resource-main{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:9px;min-width:0;text-align:left;border-radius:6px}
.ptb .resource-main:disabled{cursor:default;opacity:.75}
.ptb .resource-thumb{width:46px;height:32px;object-fit:cover;display:block;border-radius:5px;border:1px solid var(--line-2);background:linear-gradient(150deg,#12324f,#0a1826)}
.ptb .resource-thumb-empty{display:grid;place-items:center;color:var(--dim)}.ptb .resource-thumb-empty svg{width:14px;height:14px}
.ptb .resource-name{display:grid;min-width:0}.ptb .resource-name b{font-size:11px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ptb .resource-name small{font-family:var(--mono);font-size:8.5px;color:var(--dim);margin-top:2px}
.ptb .resource-type{justify-self:start;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.08em;color:var(--cyan);padding:2px 5px;border-radius:5px;border:1px solid rgba(34,224,255,.18);background:rgba(34,224,255,.06)}
.ptb .resource-code{display:block;min-width:0;font-family:var(--mono);font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptb .resource-address{color:#8db8ca}
.ptb .resource-relation{font-size:9.5px;color:var(--dim);text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptb .resource-actions{display:flex;justify-content:flex-end;gap:5px}
.ptb .resource-actions button{padding:5px 8px;border-radius:6px;border:1px solid var(--line-2);font-size:9px;font-weight:650;color:var(--text-2);background:rgba(255,255,255,.025);transition:.15s var(--ease)}
.ptb .resource-actions button:hover{color:#fff;border-color:rgba(34,224,255,.34);background:rgba(34,224,255,.07)}
.ptb .resource-actions button:disabled{opacity:.35;cursor:default}
.ptb .resource-empty{min-height:96px;display:grid;place-items:center}
.ptb .director-rail,.ptb .shot-history-rail{display:flex;gap:9px;overflow-x:auto;margin:0 0 11px;padding-bottom:3px;scrollbar-width:thin;overscroll-behavior-inline:contain}
.ptb .director-rail>div{display:grid;min-width:205px;padding:8px 10px;border-radius:8px;border:1px solid rgba(139,123,255,.22);background:rgba(139,123,255,.055)}
.ptb .director-rail>div span{font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--violet)}
.ptb .director-rail>div b{font-size:11.5px;color:var(--text-2);margin-top:2px}.ptb .director-rail>div code{font-size:8.5px;color:var(--dim);margin-top:2px}
.ptb .shot-history-group{min-width:270px;max-width:390px;padding:8px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.016)}
.ptb .shot-history-group header{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:7px}.ptb .shot-history-group header b{font-size:10px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ptb .shot-history-group header span{font-family:var(--mono);font-size:8.5px;color:var(--dim);white-space:nowrap}
.ptb .shot-history-group>div{display:flex;gap:6px;overflow-x:auto}.ptb .shot-history-group button{width:68px;flex:none;text-align:left}.ptb .shot-history-group img,.ptb .shot-history-group button>span{width:68px;height:45px;border-radius:5px;border:1px solid var(--line-2);object-fit:cover;display:grid;place-items:center;color:var(--dim);background:#07101a}.ptb .shot-history-group small{display:block;margin-top:3px;font-size:8px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptb .edit-handoff{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:11px;padding:9px 11px;border-radius:9px;border:1px solid rgba(34,224,255,.2);background:linear-gradient(90deg,rgba(34,224,255,.055),rgba(46,107,255,.025))}
.ptb .edit-handoff>div{display:grid}.ptb .edit-handoff span{font-family:var(--mono);font-size:8.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--cyan)}.ptb .edit-handoff b{font-size:10.5px;color:var(--text-2);margin-top:2px}.ptb .edit-handoff .dbtn{margin:0;white-space:nowrap}
@media(max-width:760px){.ptb .resource-panel-head{grid-template-columns:1fr auto}.ptb .resource-panel-head p{grid-column:1/-1;grid-row:2}.ptb .resource-tabs>button{min-width:118px;flex-basis:118px}}

/* Secure script reader modal (source 16685586 `project-asset-preview` script intent). */
.ptb .script-reader-backdrop{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;background:rgba(3,6,13,.78);backdrop-filter:blur(6px)}
.ptb .script-reader{width:min(920px,100%);max-height:min(86vh,940px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;border-radius:var(--r-lg);border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(12,18,31,.98),rgba(7,11,20,.99));box-shadow:0 30px 80px -30px rgba(34,224,255,.35);color:var(--text)}
.ptb .script-reader header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid var(--line)}
.ptb .script-reader header span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan)}
.ptb .script-reader header h3{margin:3px 0 0;font-size:16px;line-height:1.15;color:#fff}
.ptb .script-reader header small{display:block;margin-top:4px;font-family:var(--mono);font-size:9px;color:var(--dim);word-break:break-all}
.ptb .script-reader-body{overflow:auto;padding:14px 16px;scrollbar-width:thin}
.ptb .script-reader-body pre{margin:0;white-space:pre-wrap;word-break:break-word;font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--text-2)}
.ptb .script-reader-status{padding:8px 16px;font-size:10px;color:var(--muted);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}
.ptb .script-reader footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.ptb .script-reader-error{padding:18px 16px;font-size:11px;color:#ffb1b1}