:root {
  --bg: #04090f;
  --bg-deep: #02060a;
  --panel: #0a1119;
  --panel-2: #0d151f;
  --panel-3: #111c28;
  --line: rgba(126, 158, 188, .17);
  --line-strong: rgba(136, 178, 217, .31);
  --text: #eaf1f7;
  --soft: #a2b0bd;
  --muted: #68798a;
  --blue: #91c8fb;
  --blue-2: #417db2;
  --blue-dark: #132a40;
  --green: #6fc2a1;
  --amber: #dfb66e;
  --purple: #9d8fe3;
  --radius: 8px;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; background: var(--bg); }
body { margin: 0; color: var(--text); font: 12px/1.4 var(--sans); }
a { color: inherit; text-decoration: none; }
button, input { color: inherit; font: inherit; }
button { cursor: pointer; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Workspace */
.workspace-shell { min-height: 100vh; display: grid; grid-template-columns: 182px minmax(0, 1fr); background: radial-gradient(circle at 72% -20%, rgba(31, 78, 116, .1), transparent 34%), var(--bg); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: linear-gradient(180deg, #07101a, #070d14 70%, #050a0f); }
.app-brand { height: 70px; display: flex; align-items: center; gap: 10px; padding: 0 17px; border-bottom: 1px solid rgba(126, 158, 188, .08); font-size: 11px; font-weight: 650; letter-spacing: .25em; }
.app-brand svg { width: 27px; height: 27px; stroke: #84c4fa; filter: drop-shadow(0 0 6px #397fb7); }
.app-brand > span > span { color: #9ecef8; }
.profile-switcher { width: calc(100% - 18px); min-height: 58px; display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 8px; margin: 9px; padding: 8px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, .018); text-align: left; }
.avatar { width: 28px; height: 28px; display: inline-grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(161, 197, 228, .38); border-radius: 50%; background: linear-gradient(145deg, #d7e8ef, #375064 60%, #15222d); color: #06111a; font-size: 9px; font-weight: 750; }
.avatar-photo { color: #dcebf7; background: radial-gradient(circle at 50% 35%, #d7baa0 0 22%, #1f3442 23% 46%, #08121b 47%); }
.profile-switcher strong, .profile-switcher small { display: block; }
.profile-switcher strong { color: #d9e2ea; font-size: 10px; font-weight: 550; }
.profile-switcher small { color: #607384; font-size: 8px; }
.profile-chevron { color: #607384; }
.app-nav { padding: 5px 9px; }
.app-nav a { height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 10px; margin: 2px 0; border: 1px solid transparent; border-radius: 5px; color: #8d9aa7; font-size: 10px; }
.app-nav a svg { width: 15px; height: 15px; }
.app-nav a.active, .app-nav a:hover { border-color: rgba(119, 173, 222, .14); background: #14263a; color: #dfeaf3; }
.credit-card { margin: auto 10px 11px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: rgba(10, 18, 27, .84); }
.credit-card > div:first-child { display: flex; justify-content: space-between; color: #758696; font-size: 8px; }
.credit-card button { border: 0; background: transparent; color: #6c8295; }
.credit-card strong { display: block; margin: 5px 0; font-size: 14px; font-weight: 500; }
.credit-meter { height: 2px; margin: 8px 0 10px; background: #1d2a35; }
.credit-meter span { display: block; width: 82%; height: 100%; background: #8dccff; box-shadow: 0 0 7px #5fa7df; }
.credit-card a { color: #6f8496; font-size: 8px; }

.workspace-main { min-width: 0; }
.workspace-topbar { height: 60px; display: flex; align-items: center; justify-content: flex-end; gap: 13px; padding: 0 28px; }
.workspace-search { width: min(310px, 38vw); height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 9px; border: 1px solid var(--line); border-radius: 5px; background: rgba(12, 21, 30, .82); }
.workspace-search svg { width: 14px; color: #5d7285; }
.workspace-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #dce6ee; font-size: 9px; }
.workspace-search input::placeholder { color: #516476; }
kbd { padding: 2px 5px; border: 1px solid #263746; border-radius: 3px; color: #65788a; font: 7px var(--sans); }
.icon-button { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #8ca2b5; }
.icon-button:hover { border-color: var(--line); background: var(--panel-2); }
.icon-button svg { width: 17px; height: 17px; }
.notification-button { position: relative; }
.notification-dot { position: absolute; top: 5px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: #84c5ff; box-shadow: 0 0 8px #84c5ff; }
.mobile-nav-button { display: none; }
.workspace-content { width: min(1280px, 100%); margin: 0 auto; padding: 8px clamp(26px, 3.3vw, 52px) 42px; }
.workspace-intro { margin: 4px 0 17px; }
.workspace-kicker { margin: 0 0 8px !important; color: #51728e !important; font-size: 7px !important; font-weight: 700; letter-spacing: .22em; }
.workspace-intro h1 { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 480; letter-spacing: -.025em; }
.workspace-intro p { margin: 3px 0 0; color: #9aa9b6; font-size: 14px; }

.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 21px; }
.quick-action { min-height: 54px; display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: linear-gradient(145deg, rgba(16, 27, 39, .9), rgba(8, 15, 23, .86)); color: #d9e4ec; text-align: left; transition: border-color .18s ease, transform .18s ease; }
.quick-action:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.quick-action .action-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 5px; background: #122338; color: #b3d6f4; }
.quick-action svg { width: 16px; height: 16px; }
.quick-action strong, .quick-action small { display: block; }
.quick-action strong { font-size: 9px; font-weight: 560; }
.quick-action small { margin-top: 2px; color: #65778a; font-size: 7px; }
.section-block { margin-top: 4px; }
.section-heading, .card-heading { display: flex; align-items: center; justify-content: space-between; }
.section-heading { margin-bottom: 8px; }
.section-heading h2, .card-heading h2 { margin: 0; font-size: 10px; font-weight: 550; }
.section-heading a, .card-heading a, .card-heading button { padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: #7f91a1; font-size: 7px; }
.work-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.work-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(180deg, #0d151f, #080f16); transition: transform .2s ease, border-color .2s ease; }
.work-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.cover-atlas { position: relative; height: clamp(88px, 8.8vw, 124px); background-image: url('/assets/project-cover-atlas-v1.png'); background-size: 500% auto; background-position-y: center; }
.cover-atlas::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 8, 13, .46), transparent 50%); }
.cover-1 { background-position-x: 0%; }.cover-2 { background-position-x: 25%; }.cover-3 { background-position-x: 50%; }.cover-4 { background-position-x: 75%; }.cover-5 { background-position-x: 100%; }
.work-info { min-height: 73px; padding: 9px; }
.work-info .work-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #e0e8ef; font-size: 8px; white-space: nowrap; }
.work-info .work-title strong { overflow: hidden; text-overflow: ellipsis; font-weight: 520; }
.work-info p { margin: 5px 0; color: #647689; font-size: 7px; }
.work-info small { display: block; color: #546677; font-size: 6.5px; }
.status-ready { color: #66b792 !important; }.status-progress { color: #d1ab64 !important; }

.telemetry-grid { display: grid; grid-template-columns: 1fr 1.05fr .95fr; gap: 10px; margin-top: 18px; }
.telemetry-card { min-height: 142px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(145deg, rgba(13, 23, 33, .92), rgba(8, 15, 22, .88)); }
.card-heading { margin-bottom: 8px; }
.card-heading button { border: 0; padding-right: 0; }
.activity-row, .team-row { min-height: 23px; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 6px; color: #97a6b3; font-size: 7px; }
.activity-icon { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: #17362f; color: #77c2a4; font-size: 6px; }
.activity-row time, .team-row time { color: #526474; font-size: 6px; }
.team-row .avatar { width: 16px; height: 16px; color: #dceaf3; font-size: 5px; }
.render-row { padding: 6px 0 8px; border-bottom: 1px solid rgba(126, 158, 188, .08); }
.render-row:last-child { border-bottom: 0; }
.render-title { display: flex; justify-content: space-between; color: #9fadb9; font-size: 7px; }
.render-title span:last-child { color: #dce8f1; }
.render-meta { margin: 4px 0 5px; color: #526576; font-size: 6px; }
.render-progress { height: 2px; background: #1c2934; }
.render-progress span { display: block; height: 100%; background: #8fc9fb; box-shadow: 0 0 6px #609ecf; }

/* Director's Desk */
.director-shell { min-width: 980px; height: 100vh; min-height: 680px; display: grid; grid-template-rows: 46px 92px minmax(0, 1fr); overflow: hidden; background: #03080d; }
.director-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 13px; border-bottom: 1px solid var(--line); background: #06101a; }
.director-title { display: flex; align-items: center; gap: 8px; color: #d9e4ec; }
.director-title strong { font-size: 9px; letter-spacing: .12em; }
.director-title small { color: #62788b; font-size: 7px; letter-spacing: .04em; }
.back-arrow { color: #8aa2b6; font-size: 20px; }
.vortex-dot { width: 8px; height: 8px; border: 2px solid #76b8ef; border-radius: 50%; box-shadow: 0 0 8px #5aa9e9; }
.director-actions { display: flex; align-items: center; gap: 6px; }
.desk-button { height: 28px; min-width: 55px; border: 1px solid var(--line-strong); border-radius: 5px; background: #0b151e; color: #b8c6d1; font-size: 8px; }
.desk-primary { border-color: #a5cff7; background: linear-gradient(#b8d9fa, #73afe5); color: #06101a; box-shadow: 0 0 15px rgba(94, 164, 226, .35); }
.scene-strip { min-width: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr) 64px; gap: 7px; padding: 8px; border-bottom: 1px solid var(--line); background: #050d14; }
.scene-strip-back, .add-scene { border: 1px solid var(--line); border-radius: 6px; background: #071018; color: #7f94a5; font-size: 22px; }
.scene-list { min-width: 0; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #1c3348 transparent; }
.scene-card { min-width: 128px; height: 75px; position: relative; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: #0c151e; text-align: left; }
.scene-card.active { border-color: #b2793c; box-shadow: inset 0 0 0 1px rgba(223, 169, 100, .23), 0 0 13px rgba(211, 137, 57, .12); }
.scene-thumb { position: absolute; inset: 0 0 24px; background-image: url('/assets/project-cover-atlas-v1.png'); background-size: 500% auto; background-position-y: center; filter: brightness(.73) saturate(.85); }
.scene-card:nth-child(4) .scene-thumb, .scene-card:nth-child(5) .scene-thumb { background-image: url('/assets/cinematic-motor-failure-v1.png'); background-size: cover; background-position: center; }
.scene-copy { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; padding: 3px 6px; background: #091119; }
.scene-copy strong, .scene-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-copy strong { color: #c8d5df; font-size: 7px; font-weight: 520; }.scene-copy small { color: #7a8b9a; font-size: 6px; }
.director-workspace { min-height: 0; position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr) 215px; background: #03070b; }
.tool-rail { z-index: 3; padding: 6px 4px; border-right: 1px solid var(--line); background: #050c13; }
.tool-button { width: 46px; height: 43px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #6a7c8c; font-size: 6px; }
.tool-button span:first-child { color: #94adbf; font-size: 13px; }
.tool-button.active, .tool-button:hover { border-color: rgba(119, 169, 213, .2); background: #112235; color: #c4d3de; }
.edit-stage { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(310px, 1fr) 192px; }
.monitor-panel { min-height: 0; position: relative; display: grid; grid-template-rows: minmax(0, 1fr) 31px 39px; padding: 12px 16px 0; background: radial-gradient(circle at 50% 46%, #0d1d2a, #050a0f 67%); }
.director-monitor { min-height: 0; margin: 0; overflow: hidden; border: 1px solid rgba(141, 177, 207, .25); border-radius: 5px 5px 0 0; background: #010305; box-shadow: 0 12px 35px rgba(0, 0, 0, .55); }
.director-monitor img { width: 100%; height: 100%; object-fit: cover; }
.monitor-badge { position: absolute; z-index: 2; top: 21px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 5px; background: rgba(5, 13, 20, .82); backdrop-filter: blur(10px); }
.monitor-badge small, .monitor-badge strong { display: block; }.monitor-badge small { color: #7e91a1; font-size: 6px; }.monitor-badge strong { font-size: 8px; font-weight: 520; }
.monitor-left { left: 26px; }.monitor-right { right: 26px; text-align: right; }
.transport-controls { height: 31px; display: flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid var(--line); border-top: 0; background: #071018; color: #7e92a2; font-size: 7px; }
.transport-controls button { height: 23px; min-width: 23px; padding: 0 4px; border: 0; background: transparent; color: #8fa3b4; font-size: 8px; }
.transport-controls .play-toggle { color: #b4d9f7; }
.transport-spacer { flex: 1; }
.director-command { width: min(630px, 78%); height: 31px; align-self: center; justify-self: center; display: flex; align-items: center; gap: 6px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 6px; background: #0b151f; }
.director-command input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #c8d6e1; font-size: 8px; }
.director-command > button { width: 24px; height: 24px; display: grid; place-items: center; border: 0; background: transparent; color: #7e98ad; }
.director-command .command-submit { border-radius: 5px; background: #376e9d; color: #e8f3fc; }
.timeline-panel { min-width: 0; border-top: 1px solid var(--line); background: #050b11; }
.timeline-toolbar { height: 23px; display: flex; justify-content: space-around; align-items: center; border-bottom: 1px solid rgba(126, 158, 188, .12); color: #536777; font-size: 6px; }
.timeline { position: relative; height: 168px; overflow: hidden; }
.timeline-track { height: 30px; display: grid; grid-template-columns: 48px minmax(0, 1fr); border-bottom: 1px solid rgba(126, 158, 188, .08); }
.timeline-label { display: flex; align-items: center; gap: 4px; padding-left: 8px; border-right: 1px solid rgba(126, 158, 188, .12); color: #718393; font-size: 6px; }
.timeline-lane { position: relative; background-image: linear-gradient(90deg, rgba(105, 135, 160, .06) 1px, transparent 1px); background-size: 10% 100%; }
.clip { position: absolute; top: 4px; height: 21px; padding: 4px 7px; overflow: hidden; border: 1px solid #355e7e; border-radius: 3px; background: #16334b; color: #9fc4df; font-size: 6px; white-space: nowrap; }
.clip.video { background: #2a2855; border-color: #585297; color: #c5c0f1; }.clip.audio { background: #163933; border-color: #2f6d63; color: #83c2b2; }.clip.sfx { background: #172d42; border-color: #315778; }
.playhead { position: absolute; z-index: 5; left: 46%; top: 0; bottom: 0; width: 1px; background: #dcefff; box-shadow: 0 0 6px #8fcaff; }.playhead span { position: absolute; top: -1px; left: -4px; width: 9px; height: 7px; clip-path: polygon(0 0,100% 0,50% 100%); background: #dcefff; }
.object-picker { position: absolute; z-index: 8; top: 10px; right: 228px; width: 250px; max-height: calc(100% - 20px); overflow: auto; border: 1px solid var(--line-strong); border-radius: 7px; background: rgba(6, 14, 22, .97); box-shadow: 0 24px 60px #000c; backdrop-filter: blur(15px); }
.object-picker.hidden { display: none; }
.object-picker header, .inspector-panel > header { height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; border-bottom: 1px solid var(--line); font-size: 8px; }
.object-picker header button, .inspector-panel header button { border: 0; background: transparent; color: #708496; }
.object-picker label { height: 35px; display: flex; align-items: center; gap: 6px; margin: 7px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; background: #050b11; color: #667a8a; }
.object-picker input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 7px; }
.object-tree { padding: 2px 7px 9px; }
.tree-node { min-height: 21px; display: flex; align-items: center; padding: 3px 6px; border-radius: 3px; color: #8c9ba8; font-size: 6.5px; white-space: nowrap; }
.tree-node.active { background: #183451; color: #d8e8f5; }.tree-depth-1 { padding-left: 14px; }.tree-depth-2 { padding-left: 25px; }.tree-depth-3 { padding-left: 36px; }.tree-depth-4 { padding-left: 48px; }
.inspector-panel { min-width: 0; overflow-y: auto; padding: 7px; border-left: 1px solid var(--line); background: #060d14; }
.inspector-panel > header { border: 1px solid var(--line); border-radius: 5px 5px 0 0; background: #09121a; }
.inspector-title { padding: 10px 8px; border: 1px solid var(--line); border-top: 0; background: #081018; }
.inspector-title > div { display: flex; align-items: center; justify-content: space-between; }.inspector-title strong { font-size: 7.5px; font-weight: 550; }.inspector-title small { display: block; margin-top: 3px; color: #5f7385; font-size: 6px; }
.status-pill { padding: 2px 5px; border: 1px solid #37536d; border-radius: 4px; color: #91b6d3; font-size: 6px; }
.property-list { padding: 4px 8px 8px; border: 1px solid var(--line); border-top: 0; }
.property-row { min-height: 26px; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 6px; color: #718393; font-size: 6.5px; }
.property-row span:last-child { color: #b4c1cb; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-text { color: #cfa75e !important; }
.inspector-sections { margin-top: 7px; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.inspector-sections button { width: 100%; height: 28px; display: flex; justify-content: space-between; align-items: center; padding: 0 8px; border: 0; border-bottom: 1px solid var(--line); background: #081018; color: #8798a6; font-size: 7px; text-align: left; }.inspector-sections button:last-child { border-bottom: 0; }
.render-toast { position: fixed; z-index: 30; right: 20px; bottom: 20px; padding: 10px 14px; border: 1px solid #75add8; border-radius: 6px; background: #10263a; color: #dceeff; box-shadow: 0 12px 35px #000b, 0 0 16px rgba(93, 169, 226, .24); opacity: 0; pointer-events: none; transform: translateY(10px); transition: .22s ease; }.render-toast.show { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .001ms !important; } }

@media (max-width: 980px) {
  .workspace-shell { grid-template-columns: 64px minmax(0, 1fr); }
  .app-brand { justify-content: center; padding: 0; }.app-brand > span { display: none; }
  .profile-switcher { grid-template-columns: 1fr; justify-items: center; margin-inline: 7px; }.profile-switcher > span:not(.avatar) { display: none; }
  .app-nav { padding-inline: 7px; }.app-nav a { justify-content: center; padding: 0; }.app-nav a span { display: none; }
  .credit-card { padding: 8px 5px; text-align: center; }.credit-card > div:first-child span, .credit-card > div:first-child button, .credit-card a { display: none; }.credit-card strong { font-size: 9px; }
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: repeat(3, 1fr); }.work-card:nth-child(n+4) { display: none; }
  .telemetry-grid { grid-template-columns: 1fr 1fr; }.telemetry-grid article:last-child { display: none; }
}

@media (max-width: 650px) {
  .workspace-shell { display: block; }
  .sidebar { position: fixed; z-index: 20; left: 0; top: 0; width: 230px; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 20px 0 60px #000d; }.sidebar.open { transform: none; }
  .app-brand { justify-content: flex-start; padding: 0 17px; }.app-brand > span { display: inline; }
  .profile-switcher { grid-template-columns: 31px 1fr auto; justify-items: stretch; }.profile-switcher > span:not(.avatar) { display: inline; }
  .app-nav a { justify-content: flex-start; padding: 0 10px; }.app-nav a span { display: inline; }
  .workspace-topbar { height: 54px; padding: 0 14px; }.mobile-nav-button { width: 32px; height: 32px; display: block; border: 1px solid var(--line); border-radius: 5px; background: transparent; }.workspace-search { width: auto; flex: 1; } .workspace-search kbd { display: none; }
  .workspace-content { padding: 8px 14px 30px; }.workspace-intro h1 { font-size: 23px; }
  .quick-actions { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr 1fr; }.work-card:nth-child(3) { display: none; }.cover-atlas { height: 105px; }
  .telemetry-grid { grid-template-columns: 1fr; }.telemetry-grid article:nth-child(2) { display: none; }
}

@media (max-width: 1100px) {
  .director-shell { min-width: 760px; }
  .director-workspace { grid-template-columns: 50px minmax(0, 1fr); }
  .inspector-panel { display: none; }
  .object-picker { right: 12px; }
}

@media (max-width: 780px) {
  body[data-page="director"] { overflow-x: auto; }
  .director-shell { min-width: 680px; }
  .director-title small { display: none; }
  .edit-stage { grid-template-rows: minmax(300px, 1fr) 175px; }
  .object-picker { width: 220px; }
}