/* 千川智剪 · Studio — one system for projects, editing, preview and delivery. */
:root {
  color-scheme: dark;
  --bg:#19191a; --panel:#252526; --raised:#313132; --line:#39393a;
  --text:#ebebec; --muted:#9e9e9f; --accent:#54d6bc; --accent-ink:#77ddc3;
  --soft:#39393a; --side:var(--bg); --radius:10px; --track-label:164px;
  --font-ui:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-display:"SF Pro Display","PingFang SC",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-data:var(--font-ui);
}
* { box-sizing:border-box; }
[hidden],.sprite { display:none!important; }
body { margin:0; color:var(--text); background:var(--bg); font:14px/1.5 var(--font-ui); -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font:inherit; }
button { color:inherit; cursor:pointer; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { transition:background-color .16s,color .16s,box-shadow .16s; }
button:disabled { opacity:.4; cursor:not-allowed; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--accent-ink); outline-offset:4px; }
a { color:inherit; }
svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
input,textarea,select { min-width:0; color:var(--text); background:var(--panel); border:1px solid #424243; border-radius:7px; outline:none; }
input::placeholder,textarea::placeholder { color:#9f9fa0; }
input:focus,textarea:focus,select:focus { border-color:#9e9e9f; box-shadow:0 0 0 3px #b8b8b918; }
input[type=checkbox] { width:16px; height:16px; margin:0; accent-color:var(--accent-ink); flex-shrink:0; cursor:pointer; }
input[type=range] { accent-color:var(--accent); height:4px; border:0; box-shadow:none; }
.app { --sidebar-width:232px; display:grid; grid-template-columns:var(--sidebar-width) minmax(0,1fr); height:100dvh; min-height:680px; }
.app>main { grid-column:2; grid-row:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
.page { min-height:0; flex:1; }
/* Navigation: stationary icon anchors in both sidebar states. */
.sidebar { display:flex; flex-direction:column; position:sticky; top:0; height:100dvh; min-height:0; padding:24px 12px 16px; background:var(--side); color:#efeff0; overflow:hidden; border-right:1px solid #2f2f30; }
.sidebar-header { position:relative; height:32px; flex-shrink:0; padding:0 8px; margin-bottom:24px; }
.brand { display:flex; align-items:center; gap:10px; height:32px; padding-right:36px; min-width:0; color:#f5f5f6; text-decoration:none; white-space:nowrap; }
.brandmark { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; }
.brandmark img { display:block; width:100%; height:100%; object-fit:contain; }
.brand-name { font-family:var(--font-display); font-size:18px; font-weight:650; letter-spacing:.4px; }
.sidebar-toggle { position:absolute; right:-2px; top:-6px; width:44px; height:44px; display:grid; place-items:center; padding:0; border:0; border-radius:8px; background:transparent; color:#919192; }
.sidebar nav { display:grid; gap:18px; }
.nav-item { width:100%; min-height:44px; display:flex; align-items:center; gap:12px; padding:0 13.5px; border:0; border-radius:8px; background:transparent; color:#adadae; text-align:left; white-space:nowrap; }
.sidebar-toggle svg,.nav-item svg { width:20px; height:20px; stroke-width:1.7; }
.sidebar-toggle:hover,.nav-item:hover { background:#313132; color:#f5f5f6; }
.nav-item.active { background:#263e3c; color:#8fe7d2; }
.nav-label { font-size:14px; font-weight:500; }
.sidebar-account { margin-top:auto; border-top:1px solid #ffffff0e; padding-top:16px; }
.user-profile { height:48px; display:flex; align-items:center; gap:12px; padding:4px 5.5px; min-width:0; }
.user-avatar { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border-radius:12px; color:#e0e0e1; background:#49494a; font-size:14px; font-weight:500; }
.user-details { display:flex; flex-direction:column; min-width:0; gap:2px; }
.user-name { font-size:13px; color:#e9e9ea; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-caption { color:#919192; font-size:11px; white-space:nowrap; }
.sidebar-backdrop { display:none; }
.sidebar-collapsed .app { --sidebar-width:72px; }
.sidebar-collapsed .brand { visibility:hidden; pointer-events:none; }
.sidebar-collapsed .sidebar-toggle { left:0; right:auto; width:100%; }
.sidebar-collapsed .brand-name,.sidebar-collapsed .nav-label,.sidebar-collapsed .user-details { display:none; }
/* Controls share one geometry throughout the product. */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 15px; border:1px solid #424243; border-radius:7px; background:var(--panel); color:var(--text); font-size:13px; font-weight:500; white-space:nowrap; }
.btn svg { width:16px; height:16px; }
.btn:hover { background:#39393a; }
.btn.primary { border-color:transparent; color:#103d34; background:var(--accent); font-weight:600; box-shadow:0 1px 2px #32323310; }
.btn.primary:hover { background:#72e1c9; }
.btn.compact { height:32px; padding:0 11px; font-size:12px; }
.btn.ghost { background:transparent; border-color:transparent; color:var(--muted); }
.btn.ghost:hover { background:var(--raised); color:var(--text); }
.icon-btn { display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:7px; background:transparent; color:var(--muted); flex-shrink:0; }
.icon-btn:hover { background:var(--raised); color:var(--text); }
.icon-btn svg { width:18px; height:18px; }
.search-wrap { display:flex; align-items:center; gap:9px; height:36px; padding:0 12px; border:1px solid #3e3e3f; border-radius:7px; background:var(--panel); }
.search-wrap svg { width:16px; height:16px; color:#959596; }
.search-wrap input { width:100%; padding:0; background:transparent; border:0; box-shadow:none; outline:none; font-size:13px; }
.search-wrap:focus-within { border-color:#a5a5a6; box-shadow:0 0 0 3px #b8b8b912; }
.actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.view-switch { display:flex; padding:3px; gap:2px; background:#212122; border-radius:7px; }
.view-switch button { display:grid; place-items:center; width:29px; height:28px; padding:0; border:0; border-radius:5px; background:transparent; color:#959596; }
.view-switch button[aria-pressed=true] { color:#ddddde; background:#272728; box-shadow:0 1px 4px #00000026; }
.view-switch button:hover { color:var(--accent-ink); }
.view-switch svg { width:16px; height:16px; }
/* Page frame: a useful heading, one toolbar, then the work. */
.listing-page { position:relative; isolation:isolate; overflow:auto; padding:0; background:radial-gradient(ellipse 58% 58% at 108% -3%,#75757635,transparent 72%),radial-gradient(ellipse 55% 45% at 45% -18%,#6363642c,transparent 76%),#19191a; }

.workspace-header { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:space-between; min-height:110px; padding:30px 36px 26px; gap:24px; background:transparent; border-bottom:1px solid #adadae14; }
.workspace-header h1 { margin:0; font-family:var(--font-display); font-size:23px; line-height:1.4; font-weight:600; letter-spacing:-.5px; }
.workspace-header p { margin:7px 0 0; font-size:13px; color:var(--muted); }
.workspace-header .header-with-back { display:flex; align-items:center; gap:14px; min-width:0; }
.workspace-header .header-with-back>div { min-width:0; }
.workspace-header .header-with-back p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workspace-body { position:relative; isolation:isolate; min-height:calc(100% - 116px); padding:26px 36px 48px; }

.workspace-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:38px; margin-bottom:24px; }
.section-caption { display:flex; align-items:center; gap:9px; }
.section-caption h2 { margin:0; font-size:15px; font-weight:600; }
.count-badge { display:inline-grid; place-items:center; min-width:23px; height:21px; padding:0 6px; border-radius:5px; background:#383839; color:#a5a5a6; font-size:11px; font-weight:500; font-variant-numeric:tabular-nums; }
.toolbar-actions { display:flex; align-items:center; gap:12px; }
.toolbar-actions .search-wrap { width:240px; }
.sort-select { height:34px; padding:0 26px 0 10px; border-color:transparent; background:transparent; color:#7e7e7f; font-size:12px; }
/* Project library: a compact visual index, rather than dashboard panels. */
.project-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(242px,1fr)); gap:24px; align-items:stretch; }
.project-tile { min-width:0; background:#272728; border:1px solid #3d3d3e; border-radius:11px; overflow:hidden; box-shadow:0 2px 4px #0000000a; transition:box-shadow .18s; }
.project-tile:hover { box-shadow:0 5px 18px #00000030; }
.project-cover { position:relative; width:100%; aspect-ratio:16/10; display:block; border:0; border-radius:0; padding:0; overflow:hidden; background:#232324; text-align:left; }
.project-cover>img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 40%; transition:filter .18s; }
.project-cover:hover>img { filter:brightness(1.04); }
.project-cover-ratio { position:absolute; top:12px; right:12px; border-radius:4px; padding:3px 6px; background:#272728c9; color:#fff; font:10px/1.4 var(--font-data); }
.cover-time { position:absolute; left:12px; bottom:12px; display:flex; align-items:center; gap:5px; font:11px/1.4 var(--font-data); color:#fff; background:#272728c9; padding:3px 7px; border-radius:4px; }
.cover-time svg { width:11px; height:11px; }
.project-preview-empty { display:grid; place-content:center; justify-items:center; gap:8px; height:100%; color:#9f9fa0; font-size:12px; }
.project-preview-empty svg { width:28px; height:28px; }
.project-tile-info { padding:16px 16px 14px; }
.project-name { display:block; max-width:100%; border:0; background:transparent; text-align:left; padding:0; font-size:14px; line-height:1.5; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-name:hover { color:var(--accent-ink); }
.project-facts { display:flex; gap:7px; align-items:center; color:#a1a1a2; font-size:13px; margin:6px 0 12px; }
.project-facts i { font-style:normal; color:#5f5f60; }
.project-tile-footer { display:flex; justify-content:space-between; align-items:center; margin-top:13px; padding-top:12px; border-top:1px solid #363637; gap:10px; }
.project-tile-footer time { font-size:12px; color:#939394; }
.project-open-action { border:0; padding:0; display:flex; align-items:center; gap:5px; background:transparent; color:#b8b8b9; font-size:12px; }
.project-open-action svg { width:14px; height:14px; }
.project-open-action:hover { color:var(--accent-ink); }











.project-grid.is-list { grid-template-columns:1fr; gap:10px; }
.is-list .project-tile { display:grid; grid-template-columns:144px minmax(0,1fr); }
.is-list .project-cover { aspect-ratio:auto; min-height:112px; height:100%; }
.is-list .project-tile-info { display:grid; grid-template-columns:minmax(150px,1fr) minmax(130px,.7fr) minmax(150px,.65fr); align-items:center; gap:4px 24px; padding:18px 20px; }
.is-list .project-name { grid-column:1; align-self:end; }
.is-list .project-facts { grid-column:1; margin:0; align-self:start; }
.is-list .project-tile-footer { grid-column:3; grid-row:1/3; margin:0; padding:0; border:0; }





.project-list-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:28px; color:#99999a; font-size:12px; }
.project-pagination { display:flex; align-items:center; gap:6px; }
.page-number { min-width:32px; height:32px; padding:0 8px; border:0; background:transparent; color:#919192; border-radius:6px; font-size:12px; }
.page-number[aria-current=page] { color:#cececf; background:#424243; font-weight:600; }
.page-number:hover { background:#363637; }
.page-ellipsis { padding:0 4px; }
/* Editing desk: the image is the brightest object, tools stay quiet. */
.editor-page { --bg:#181819; --panel:#242425; --raised:#303031; --line:#353536; --text:#e3e3e4; --muted:#929293; --accent-ink:#83e1ca; color-scheme:dark; display:grid; grid-template-rows:72px minmax(310px,1fr) 310px; background:var(--bg); color:var(--text); }
.projectbar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 22px; border-bottom:1px solid #313132; margin-bottom:10px; background:#1f1f20; }
.project-identity { display:flex; align-items:center; gap:12px; min-width:0; }
.project-identity>div { min-width:0; }
.project-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:8px; color:#c2c2c3; background:#3c3c3d; flex-shrink:0; }
.project-icon svg { width:18px; height:18px; }
.project-title { display:flex; align-items:center; gap:10px; min-width:0; max-width:100%; padding:0; border:0; background:transparent; color:#ececed; font-size:14px; font-weight:500; white-space:nowrap; text-align:left; overflow:hidden; text-overflow:ellipsis; }
.edit-name { display:flex; color:#919192; opacity:0; }
.edit-name svg { width:13px; height:13px; }
.project-title:hover .edit-name,.project-title:focus-visible .edit-name { opacity:1; }
.project-identity small { display:block; margin-top:3px; color:#949495; font-size:12px; }
.project-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.save-state { color:#8b8b8c; font-size:11px; margin-right:8px; }
.save-state i { display:inline-block; width:4px; height:4px; background:#a5a5a6; border-radius:50%; margin-right:6px; vertical-align:middle; }
.editor-page .btn { height:34px; font-size:12px; border-color:#434344; background:#2d2d2e; }
.editor-page .btn:hover { background:#39393a; }
.editor-page .btn.primary { color:#103d34; background:var(--accent); border-color:transparent; }
.editor-page .btn.primary:hover { background:#72e1c9; }
.editor-page .btn.compact { height:30px; font-size:12px; }
.edit-grid { display:grid; grid-template-columns:280px minmax(250px,1fr) 264px; gap:10px; padding:0 12px 10px; min-height:0; position:relative; }
.panel { min-height:0; border-radius:8px; border:1px solid #333334; background:var(--panel); overflow:hidden; }
.panel-heading { height:48px; display:flex; align-items:center; gap:10px; padding:0 16px; flex-shrink:0; border-bottom:1px solid var(--line); }
.panel-heading h2 { font-size:13px; font-weight:500; margin:0 auto 0 0; white-space:nowrap; }
.panel-heading .subtle { font-size:11px; color:#89898a; white-space:nowrap; }
.dot-sep { margin:0 4px; }
.material-panel { display:flex; flex-direction:column; }
.material-tabs { display:flex; align-items:center; gap:20px; padding:0 16px; min-height:42px; flex-shrink:0; }
.material-tabs button { position:relative; height:42px; border:0; background:transparent; padding:0; font-size:12px; color:#8b8b8c; white-space:nowrap; }
.material-tabs button.active { color:#d4d4d5; }
.material-tabs button.active:after { position:absolute; content:''; bottom:0; left:0; right:0; height:2px; background:#54d6bc; border-radius:2px; }
.material-tabs span { padding:1px 4px; font-size:10px; margin-left:3px; color:#9e9e9f; background:#3b3b3c; border-radius:3px; }
.material-panel .search-wrap { margin:14px 14px 12px; background:#1f1f20; border-color:#39393a; height:32px; flex-shrink:0; }
.material-panel input { color:#e6e6e7; font-size:12px; }
.material-panel input::placeholder { color:#79797a; }
.material-context { color:#8a8a8b; font-size:11px; padding:0 15px 12px; flex-shrink:0; }
.material-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; align-content:start; padding:0 14px 20px; overflow:auto; flex:1; min-height:0; }
.material-card { min-width:0; border:0; background:transparent; border-radius:6px; padding:0; text-align:left; }
.material-cover { position:relative; aspect-ratio:1.3; overflow:hidden; border-radius:5px; background:#3e3e3f; outline:2px solid transparent; outline-offset:2px; }
.material-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.material-card.selected .material-cover { outline-color:#54d6bc; }
.material-selected { position:absolute; right:6px; top:6px; width:18px; height:18px; display:grid; place-items:center; border-radius:4px; background:#54d6bc; color:#333334; }
.material-selected svg { width:12px; height:12px; stroke-width:2; }
.material-card b { display:block; min-width:0; margin-top:9px; font-size:12px; line-height:1.6; font-weight:400; color:#acacad; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.duration { position:absolute; right:5px; bottom:5px; border-radius:3px; padding:2px 4px; color:#efeff0; background:#181819c9; font:10px/1.4 var(--font-data); }
.upload-drop { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:100px; border:1px dashed #4d4d4e; border-radius:7px; background:#272728; padding:16px; margin:0 14px 14px; color:#b9b9ba; flex-shrink:0; }
.upload-drop svg { width:20px; height:20px; }
.upload-drop b { font-size:12px; font-weight:500; }
.upload-drop span { font-size:11px; color:#7f7f80; }
.panel-hint { color:#878788; font-size:12px; line-height:1.8; }
.preview-panel { display:flex; flex-direction:column; background:#1e1e1f; }
.preview-panel .panel-heading { border-bottom:0; }
.preview-stage { display:flex; align-items:center; justify-content:center; min-height:0; flex:1; position:relative; padding:8px 20px 32px; background:#181819; }
.preview-canvas { position:relative; height:100%; max-width:100%; aspect-ratio:9/16; background:#343435; overflow:hidden; border-radius:2px; box-shadow:0 4px 30px #0003; }
.preview-canvas>img,.preview-canvas>video { display:block; width:100%; height:100%; object-fit:cover; }
.preview-canvas:fullscreen { max-width:none; width:100%; height:100%; background:#151516; border-radius:0; }
.preview-canvas:fullscreen>img,.preview-canvas:fullscreen>video { object-fit:contain; }
.poster-overlay { display:none!important; }
.preview-tag { position:absolute; top:8px; right:8px; color:#e6e6e7; background:#262627b8; border-radius:4px; padding:3px 6px; font-size:10px; }
.stage-label { display:flex; align-items:center; gap:6px; position:absolute; bottom:9px; font-size:11px; color:#7b7b7c; }
.mint-dot { width:4px; height:4px; border-radius:50%; background:#a2a2a3; }
.preview-empty { display:flex; align-items:center; flex-direction:column; gap:12px; color:#5b5b5c; text-align:center; }
.preview-empty svg { width:36px; height:36px; stroke-width:1; }
.preview-empty b { font-size:13px; font-weight:400; color:#969697; }
.preview-empty span { font-size:11px; color:#777778; }
.player { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; height:48px; padding:0 18px; flex-shrink:0; }
.player-time { display:flex; align-items:center; gap:7px; white-space:nowrap; font:11px var(--font-data); }
.player-time b { color:#bcbcbd; font-weight:400; }
.player-time>span { color:#6a6a6b; }
.play-buttons { display:flex; align-items:center; gap:10px; }
.play-buttons button { display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:50%; background:transparent; padding:0; color:#a0a0a1; }
.play-buttons button svg { width:14px; height:14px; }
.play-buttons #play { width:32px; height:32px; background:#3c3c3d; color:#e5e5e6; }
.play-buttons #play svg { width:15px; height:15px; }
.play-buttons button:hover { background:#434344; }
.properties-toggle,.properties-close { display:none; }
.property-tabs { display:flex; align-items:center; justify-content:space-between; height:48px; padding:0 16px; border-bottom:1px solid var(--line); }
.property-tabs h2 { font-size:13px; font-weight:500; margin:0; }
.properties-body { padding:18px 16px; height:calc(100% - 48px); overflow:auto; }
.eyebrow { display:inline-block; margin-bottom:20px; color:#949495; font-size:11px; }
.field { display:block; margin:0 0 20px; color:var(--text); font-size:13px; }
.field>span { float:right; font-size:11px; color:var(--muted); }
.field input,.field textarea,.field select { display:block; width:100%; margin-top:9px; padding:10px 12px; font-size:13px; line-height:1.6; }
.field input,.field select { min-height:40px; }
.field textarea { min-height:96px; line-height:1.8; resize:vertical; }
.editor-page input,.editor-page textarea,.editor-page select { background:#202021; border-color:#3e3e3f; color:#c6c6c7; }
.editor-page .field { font-size:13px; color:#a3a3a4; }
.editor-page .field>span { color:#6b6b6c; }
.editor-page .field input,.editor-page .field textarea { font-size:13px; }
.property-divider { height:1px; margin:22px 0; background:var(--line); }
.input-unit { position:relative; }
.input-unit input { padding-right:36px; }
.input-unit>span { position:absolute; right:12px; top:11px; color:var(--muted); font-size:12px; }
/* Time ruler and tracks use separate temperatures, not the same green everywhere. */
.timeline-panel { display:flex; flex-direction:column; min-height:0; margin:0 12px 12px; border:1px solid #39393a; border-radius:8px; background:#232324; overflow:hidden; }
.timeline-toolbar { display:flex; align-items:center; gap:10px; min-height:48px; padding:0 16px; border-bottom:1px solid #383839; flex-shrink:0; }
.timeline-tabs { display:flex; align-items:center; gap:10px; margin-right:14px; }
.timeline-tabs b { font-size:13px; font-weight:500; }
.timeline-tabs>span { color:#787879; font-size:11px; }
.timeline-right { display:flex; align-items:center; gap:10px; margin-left:auto; color:#79797a; font-size:12px; }
.timeline-right input { width:76px; }
.timeline-scroll { min-height:0; flex:1; overflow:auto; }
#timelineInner { position:relative; min-width:100%; min-height:100%; padding:0 16px 16px 0; }
.ruler { height:32px; margin-left:var(--track-label); position:relative; border-bottom:1px solid #444445; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(5% - 1px),#4d4d4e calc(5% - 1px),#4d4d4e 5%) 0 bottom/100% 4px no-repeat; }
.ruler>span { position:absolute; bottom:11px; transform:translateX(-50%); color:#818182; font:10px var(--font-data); }
.ruler>span:first-child { transform:none; }
.ruler>span:last-child { transform:translateX(-100%); }
.track-row { display:grid; grid-template-columns:var(--track-label) minmax(0,1fr); min-height:46px; border-bottom:1px solid #353536; }
.track-label { position:sticky; left:0; z-index:2; display:flex; align-items:center; gap:9px; padding:0 12px; background:#232324; box-shadow:1px 0 #434344; font-size:11px; color:#aeaeaf; }
.track-label svg { width:14px; height:14px; color:#a9a9aa; }
.track-label b { font-weight:400; }
.track-label>span { color:#777778; font:10px var(--font-data); }
.track-label select { width:92px; height:26px; padding:0 3px; border:0; background:#333334; color:#aaaaab; font-size:11px; border-radius:4px; }
.track-label .icon-btn { margin-left:auto; width:24px; height:26px; }
.track-label .icon-btn svg { width:13px; height:13px; }
.track-content { display:grid; grid-template-columns:var(--shot-columns); min-width:0; }
.segment { display:flex; align-items:center; gap:7px; height:34px; min-width:0; margin:6px 3px; padding:0 9px; border:1px solid #5c5c5d; border-radius:5px; background:#474748; color:#cdcdce; font-size:11px; white-space:nowrap; overflow:hidden; text-align:left; }
.segment:first-child { margin-left:0; }
.segment.story>span { font:10px var(--font-data); color:#909091; }
.segment.story b { min-width:0; font-weight:400; overflow:hidden; text-overflow:ellipsis; }
.segment.story small { margin-left:auto; font:10px var(--font-data); color:#9c9c9d; }
.segment.video { border-color:#505051; background:#3f3f40; color:#bfbfc0; }
.segment.video.alternate { background:#3a3a3b; border-color:#4a4a4b; }
.segment.video img { width:24px; height:24px; object-fit:cover; border-radius:3px; flex-shrink:0; }
.segment.video>span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.segment.global { background:#3c3c3d; border-color:#59595a; color:#b8b8b9; }
.segment.empty { border-style:dashed; color:#909091; justify-content:center; }
.segment.active { border-color:#72d4b7; box-shadow:inset 0 0 0 1px #72d4b7; }
.timeline-playhead { position:absolute; z-index:3; pointer-events:none; top:24px; bottom:0; left:calc(var(--track-label) + (100% - var(--track-label) - 16px)*var(--playhead-position,0)/100); width:1px; background:#ee9c87; }
.timeline-playhead:before { content:''; position:absolute; top:-2px; left:-4px; width:9px; height:9px; border-radius:2px; background:#ee9c87; }
.timeline-footer { display:flex; align-items:center; justify-content:space-between; min-height:30px; flex-shrink:0; padding:0 14px; border-top:1px solid #383839; font-size:11px; color:#7a7a7b; gap:18px; }
kbd { font-family:var(--font-data); font-size:10px; border:1px solid #4f4f50; border-radius:3px; padding:1px 4px; margin-right:5px; }
/* Batch preview: settings and results are explicit neighbors. */
.batch-layout { display:grid; grid-template-columns:264px minmax(0,1fr); gap:28px; align-items:start; }
.mix-panel { position:sticky; top:0; padding:22px; border:1px solid var(--line); background:#272728; border-radius:11px; }
.mix-panel h2 { font-size:14px; font-weight:600; margin:0 0 24px; }
.mix-label { font-size:12px; color:#9d9d9e; }
.mix-limit { display:block; margin:7px 0 4px; font-family:var(--font-display); font-size:28px; font-weight:600; letter-spacing:-1px; color:#dededf; }
.mix-limit small { margin-left:5px; font-size:12px; color:#a0a0a1; font-weight:400; letter-spacing:0; }
.mix-math { color:#afafb0; font-size:12px; line-height:1.7; }
.mix-section { margin-top:23px; padding-top:22px; border-top:1px solid #383839; }
.mix-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.mix-section-heading b { font-size:13px; font-weight:500; }
.mix-section-heading .btn { height:26px; padding:0 6px; font-size:12px; }
.strategy-chips { display:flex; flex-wrap:wrap; gap:7px; }
.strategy-chips>span { display:inline-flex; align-items:center; gap:5px; padding:4px 7px; border:1px solid #464647; border-radius:5px; color:#8d8d8e; font-size:11px; background:#313132; }
.strategy-chips svg { width:11px; height:11px; }
.mix-panel>.btn.primary { margin-top:24px; width:100%; }
.batch-result-head { display:flex; align-items:center; justify-content:space-between; min-height:32px; margin-bottom:18px; }
.batch-result-head h2 { margin:0; font-size:15px; font-weight:600; }
.batch-result-head h2 span { font-size:12px; font-weight:400; color:#a3a3a4; margin-left:10px; }
.draft-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:20px; }
.draft-card { min-width:0; border:1px solid #424243; background:#272728; border-radius:10px; overflow:hidden; position:relative; }
.draft-card.selected { border-color:#7e7e7f; }
.draft-card>input { position:absolute; left:12px; top:12px; z-index:2; width:17px; height:17px; }
.draft-cover { position:relative; display:block; width:100%; height:230px; padding:0; border:0; background:#1c1c1d; overflow:hidden; }
.draft-cover img,.draft-cover video { display:block; width:100%; height:100%; object-fit:cover; }
.draft-cover video { position:absolute; inset:0; }
.preview-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:38px; height:38px; background:#262627b8; color:#fff; border-radius:50%; opacity:0; transition:opacity .16s; }
.preview-play svg { width:16px; height:16px; }
.draft-cover:hover .preview-play,.draft-cover:focus-visible .preview-play,.asset-poster:hover .preview-play,.asset-poster:focus-visible .preview-play { opacity:1; }
.draft-info { padding:13px; }
.draft-info h3 { margin:0 0 6px; font-size:12px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.draft-info p { margin:0; font-size:11px; color:#9d9d9e; }
.batch-settings { background:#383839; padding:16px 18px; border-radius:8px; margin-bottom:24px; }
.batch-settings small { font-size:12px; color:#99999a; }
.batch-settings strong { display:block; margin-top:4px; font-family:var(--font-display); font-size:25px; font-weight:600; color:#d4d4d5; }
.batch-settings strong span { font-size:12px; font-weight:400; }
/* Assets: a visual collection with the same grid/list grammar as projects. */
.asset-collection { margin-bottom:32px; }
.asset-collection-head { display:flex; align-items:center; gap:8px; margin-bottom:16px; color:#909091; }
.asset-collection-head svg { width:16px; height:16px; color:#a1a1a2; }
.asset-collection-head h2 { margin:0; font-size:13px; font-weight:500; color:#b5b5b6; }
.asset-collection-head>span { margin-left:3px; color:#a9a9aa; font-size:11px; }
.asset-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(214px,1fr)); gap:20px; }
.asset-card { position:relative; min-width:0; background:#272728; border:1px solid #424243; border-radius:10px; overflow:hidden; }
.asset-card.selected { border-color:#7e7e7f; }
.asset-check { position:absolute; top:12px; left:12px; z-index:2; padding:4px; display:grid; place-items:center; cursor:pointer; }
.asset-poster { position:relative; display:block; width:100%; height:224px; padding:0; border:0; background:#1c1c1d; overflow:hidden; }
.asset-poster img { display:block; width:100%; height:100%; object-fit:cover; }
.asset-duration { position:absolute; bottom:9px; right:10px; padding:2px 5px; border-radius:4px; background:#434344c9; color:#fff; font:10px/1.5 var(--font-data); }
.asset-info { padding:14px; min-width:0; }
.asset-info h3 { font-size:13px; font-weight:500; margin:0 0 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.asset-info>p { margin:0; color:#9d9d9e; font-size:11px; }
.asset-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:14px; border-top:1px solid #363637; padding-top:12px; gap:12px; }
.ready { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:#9a9a9b; }
.ready:before { content:''; width:4px; height:4px; border-radius:50%; background:#aeaeaf; }
.asset-card-footer .btn { height:27px; padding:0 8px; font-size:11px; }
.selection-control { display:flex; align-items:center; gap:8px; color:#8e8e8f; font-size:12px; cursor:pointer; white-space:nowrap; }
.asset-grid.is-list { grid-template-columns:1fr; gap:8px; }
.asset-grid.is-list .asset-card { display:grid; grid-template-columns:80px minmax(0,1fr); padding-left:40px; min-height:104px; }
.asset-grid.is-list .asset-check { left:12px; top:42px; padding:0; }
.asset-grid.is-list .asset-poster { height:104px; }
.asset-grid.is-list .asset-info { display:grid; grid-template-columns:minmax(180px,1fr) auto; align-content:center; gap:5px 24px; padding:16px 22px; }
.asset-grid.is-list .asset-info h3 { grid-column:1; margin:0; }
.asset-grid.is-list .asset-info>p { grid-column:1; }
.asset-grid.is-list .asset-card-footer { grid-column:2; grid-row:1/3; margin:0; padding:0; border:0; gap:24px; }
/* Empty and dialog states share the same restrained language. */
.empty { display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:360px; padding:50px 24px; border:1px solid #3a3a3b; border-radius:11px; background:#262627ad; text-align:center; grid-column:1/-1; }
.empty>svg { width:36px; height:36px; color:#bfbfc0; stroke-width:1.2; margin-bottom:20px; }
.empty h3 { margin:0 0 9px; font-size:16px; font-weight:500; color:#cfcfd0; }
.empty p { margin:0 0 22px; font-size:13px; color:#a2a2a3; line-height:1.8; }
.empty p:last-child { margin-bottom:0; }
.empty .btn { margin-top:2px; }
.modal-mask { position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:#09090abb; backdrop-filter:blur(5px); padding:24px; }
.dialog { display:flex; flex-direction:column; width:min(480px,100%); max-height:90dvh; background:#272728; color:#e2e2e3; border:1px solid #454546; border-radius:14px; overflow:hidden; box-shadow:0 24px 100px #00000066; }
.dialog.wide { width:min(660px,100%); }
.dialog-header { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px; padding:18px 24px; flex-shrink:0; border-bottom:1px solid #3c3c3d; }
.dialog-header h2 { margin:0; font-size:17px; font-weight:600; letter-spacing:-.3px; }
.dialog-header>button { width:28px; height:28px; display:grid; place-items:center; padding:0; border:0; border-radius:6px; background:transparent; color:#a8a8a9; }
.dialog-header>button svg { width:17px; height:17px; }
.dialog-header>button:hover { background:#3a3a3b; }
.dialog-body { overflow:auto; padding:24px; }
.dialog-body>p { margin:0 0 24px; color:#989899; font-size:13px; line-height:1.8; }
.dialog-body>p:last-child { margin-bottom:0; }
.dialog .field:last-of-type { margin-bottom:0; }
.dialog-footer { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:18px 24px; border-top:1px solid #39393a; background:#262627; flex-shrink:0; }
.dialog-footer>span { margin-right:auto; color:#959596; font-size:12px; }
.error { min-height:20px; color:#c46d58; margin-top:12px; font-size:12px; }
.error:empty { min-height:0; margin:0; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:15px 0; gap:24px; border-bottom:1px solid #3e3e3f; }
.toggle-row:first-of-type { padding-top:0; }
.toggle-row:last-of-type { border-bottom:0; }
.toggle-row b { font-size:13px; font-weight:500; color:#d0d0d1; }
.toggle-row small { display:block; margin-top:5px; color:#a1a1a2; font-size:12px; line-height:1.7; }
.toggle-row input { appearance:none; position:relative; width:34px; height:20px; border:0; border-radius:20px; background:#535354; margin:0; box-shadow:none; }
.toggle-row input:before { content:''; width:14px; height:14px; position:absolute; left:3px; top:3px; border-radius:50%; background:#e9e9ea; transition:transform .16s; box-shadow:0 1px 3px #3a3a3b17; }
.toggle-row input:checked { background:#9f9fa0; }
.toggle-row input:checked:before { transform:translateX(14px); }
.strategy-note,.download-note { margin-top:20px; padding:12px 14px; border-radius:7px; background:#363637; color:#bbbbbc!important; font-size:12px!important; line-height:1.8; }
.dialog-video { display:block; max-height:48dvh; max-width:100%; width:auto; aspect-ratio:9/16; object-fit:contain; margin:0 auto; border-radius:4px; background:#212122; }
.media-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-height:320px; overflow:auto; }
.media-option { display:flex; align-items:center; gap:10px; min-width:0; padding:9px; border:1px solid #464647; border-radius:7px; background:#323233; font-size:12px; text-align:left; }
.media-option img { width:35px; height:46px; object-fit:cover; border-radius:3px; }
.media-option.selected { border-color:#9b9b9c; background:#404041; }
#toast { position:fixed; z-index:80; bottom:28px; left:50%; transform:translate(-50%,10px); padding:11px 18px; max-width:calc(100vw - 32px); border-radius:8px; background:#363637; color:#f2f2f3; font-size:12px; opacity:0; pointer-events:none; transition:opacity .16s,transform .16s; box-shadow:0 7px 30px #32323326; }
#toast.show { opacity:1; transform:translate(-50%,0); }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-thumb { background:#4d4d4e; border-radius:10px; }
.editor-page ::-webkit-scrollbar-thumb { background:#4d4d4e; }
@media(min-width:1700px) { .edit-grid { grid-template-columns:304px minmax(300px,1fr) 288px; } .editor-page { grid-template-rows:72px minmax(350px,1fr) 310px; } }
@media(max-width:1279px) {
 .edit-grid { grid-template-columns:250px minmax(250px,1fr); }
 .properties-panel { display:none; }
 .properties-toggle { display:inline-flex; }
 .properties-close { display:grid; }
 .properties-open .properties-panel { display:block; position:absolute; width:280px; right:12px; top:0; bottom:10px; z-index:15; box-shadow:-12px 10px 70px #0006; }
 .save-state { display:none; }
 .timeline-tabs>span { display:none; }
 .project-grid { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px; }
 .workspace-header { padding:26px 28px; }
 .workspace-body { padding:24px 28px 40px; }
 .toolbar-actions .search-wrap { width:200px; }
 .batch-layout { grid-template-columns:240px minmax(0,1fr); gap:24px; }
 .mix-panel { padding:20px; }
 .is-list .project-tile-info { grid-template-columns:minmax(140px,1fr) minmax(140px,.7fr); gap:4px 16px; }
 .is-list .project-tile-footer { grid-column:2; grid-row:2; align-self:start; margin-top:3px; }
}
@media(max-width:900px) {
 .app { grid-template-columns:72px minmax(0,1fr); }
 body:not(.sidebar-collapsed) .sidebar { position:fixed; left:0; top:0; width:232px; z-index:40; box-shadow:16px 0 48px #21212240; }
 body:not(.sidebar-collapsed) .sidebar-backdrop { display:block; position:fixed; inset:0 0 0 232px; z-index:39; padding:0; border:0; background:#21212240; }
 .workspace-toolbar { align-items:flex-start; gap:14px; }
 .toolbar-actions { gap:8px; }
 .sort-select { max-width:110px; padding-left:4px; font-size:11px; }
 .toolbar-actions .search-wrap { width:180px; }
 .projectbar { padding:0 14px; gap:10px; }
 .project-icon { display:none; }
 .project-identity { gap:8px; }
 .project-actions { gap:6px; }
 .project-actions .btn { padding:0 10px; }
 .project-actions .btn svg { display:none; }
 .edit-grid { grid-template-columns:220px minmax(230px,1fr); }
 .player { padding:0 10px; gap:5px; }
 .play-buttons { gap:3px; }
 .preview-panel .subtle { display:none; }
 .timeline-right input { width:52px; }
 .batch-layout { grid-template-columns:1fr; }
 .mix-panel { position:static; display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:8px 24px; }
 .mix-panel h2 { grid-column:1/-1; margin:0 0 4px; }
 .mix-panel .mix-section { margin:0; padding:0 0 0 24px; border-top:0; border-left:1px solid #424243; }
 .mix-panel>.btn.primary { margin:0; width:auto; }
 .mix-limit { font-size:24px; }
}
@media(max-width:700px) {
 .app { height:100dvh; min-height:680px; }
 .workspace-header { padding:24px 20px; min-height:104px; gap:16px; }
 .workspace-header h1 { font-size:20px; }
 .workspace-header p { font-size:12px; }
 .workspace-body { padding:22px 20px 36px; }
 .workspace-toolbar { flex-direction:column; align-items:stretch; margin-bottom:20px; }
 .toolbar-actions .search-wrap { flex:1; width:auto; min-width:90px; }
 .sort-select { max-width:100px; }
 .project-grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
 .section-caption h2 { font-size:14px; }
 .is-list .project-tile { grid-template-columns:90px minmax(0,1fr); }
 .is-list .project-tile-info { display:flex; flex-direction:column; align-items:stretch; gap:3px; padding:12px; }
 .is-list .project-tile-footer { margin-top:5px; }
 .is-list .project-tile-footer time { display:none; }



 .project-list-footer { flex-direction:column; align-items:flex-start; gap:14px; }
 .editor-page { grid-template-rows:100px 500px 300px; overflow:auto; }
 .projectbar { flex-direction:column; align-items:stretch; justify-content:center; gap:10px; padding:10px 12px; }
 .project-actions { justify-content:flex-end; }
 .project-title { font-size:13px; }
 .project-identity small { font-size:10px; margin-top:2px; }
 .project-actions .btn { height:28px; font-size:11px; }
 .edit-grid { grid-template-columns:148px minmax(130px,1fr); gap:6px; padding:0 6px 8px; }
 .panel-heading { height:43px; padding:0 10px; gap:5px; }
 .material-panel #upload { width:25px; padding:0; font-size:0; }
 .material-panel #upload svg { width:14px; height:14px; }
 .material-tabs { padding:0 10px; gap:12px; }
 .material-tabs button { font-size:11px; }
 .material-tabs span { display:none; }
 .material-context { font-size:10px; padding:0 10px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .material-panel .search-wrap { margin:12px 10px 10px; padding:0 8px; }
 .material-grid { grid-template-columns:1fr; padding:0 10px 16px; gap:14px; }
 .material-cover { aspect-ratio:1.4; }
 .preview-panel .panel-heading h2 { display:none; }
 .preview-panel .properties-toggle { margin-right:auto; padding:0 7px; font-size:11px; }
 .preview-stage { padding:12px 8px 32px; }
 .stage-label { max-width:calc(100% - 14px); font-size:10px; white-space:nowrap; overflow:hidden; }
 .player { display:flex; flex-direction:column; justify-content:center; height:78px; gap:6px; }
 .player-time { font-size:10px; }
 .properties-open .properties-panel { width:min(280px,calc(100vw - 90px)); right:6px; }
 .upload-drop { margin:0 10px 10px; min-height:90px; padding:10px; }
 .upload-drop span { display:none; }
 .upload-drop b { font-size:11px; }
 .timeline-panel { margin:0 6px 8px; }
 .timeline-toolbar { padding:0 10px; gap:6px; }
 .timeline-tabs { margin-right:auto; white-space:nowrap; }
 .timeline-tabs b { font-size:12px; }
 .timeline-toolbar .btn { font-size:10px; padding:0 6px; }
 .timeline-toolbar .btn svg,.timeline-right { display:none; }
 .timeline-footer { font-size:10px; padding:6px 10px; }
 .timeline-footer>span:last-child { display:none; }
 .mix-panel { display:block; padding:18px; }
 .mix-panel h2 { margin-bottom:18px; }
 .mix-panel .mix-section { margin-top:20px; padding:18px 0 0; border-top:1px solid #424243; border-left:0; }
 .mix-panel>.btn.primary { width:100%; margin-top:20px; }
 .draft-grid,.asset-grid { grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:14px; }
 .draft-cover,.asset-poster { height:200px; }
 .asset-info,.draft-info { padding:12px; }
 .asset-collection-head h2 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .asset-grid.is-list .asset-card { grid-template-columns:64px minmax(0,1fr); padding-left:30px; }
 .asset-grid.is-list .asset-check { left:8px; }
 .asset-grid.is-list .asset-info { display:block; padding:12px; }
 .asset-grid.is-list .asset-info>p { margin-top:4px; }
 .asset-grid.is-list .asset-card-footer { justify-content:space-between; gap:8px; margin-top:8px; }
 .empty { min-height:300px; padding:36px 16px; }
 .dialog { max-height:92dvh; }
 .dialog-header { padding:16px 20px; min-height:60px; }
 .dialog-body { padding:20px; }
 .dialog-footer { padding:16px 20px; }
 .media-list { grid-template-columns:1fr; }
 .modal-mask { padding:16px; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { transition:none!important; scroll-behavior:auto!important; } }
/* Creation and preview dialogs use the same dark studio materials. */
.format-label { color:#b5b5b6; font-size:13px; margin:22px 0 10px; }
.project-format { display:flex; align-items:center; gap:13px; padding:15px; border:1px solid #59595a; border-radius:8px; background:#373738; }
.format-icon { width:36px; height:42px; display:grid; place-items:center; border-radius:6px; border:1px solid #646465; color:#b9b9ba; background:#414142; }
.project-format>span:nth-child(2) { flex:1; }
.project-format b { display:block; font-size:13px; font-weight:500; color:#d4d4d5; }
.project-format small { display:block; color:#949495; font-size:11px; margin-top:4px; }
.project-format>svg { width:16px; height:16px; color:#b5b5b6; }
.dialog:has(.review-preview-layout) { width:min(580px,100%); }
.review-preview-layout { --review-media-width:calc(42dvh * 9 / 16); --review-gap:28px; display:grid; grid-template-columns:min(var(--review-media-width),calc((100% - var(--review-gap)) / 2)) minmax(0,1fr); align-items:start; gap:var(--review-gap); }
.review-preview-layout>.dialog-video { width:min(100%,var(--review-media-width)); max-height:none; background:transparent; }
.review-details h3 { color:#dbdbdc; font-size:14px; font-weight:500; line-height:1.8; margin:0 0 8px; overflow-wrap:anywhere; }
.review-details>p { color:#9a9a9b; font-size:11px; margin:0 0 26px; }
.review-details h4 { color:#b7b7b8; font-size:12px; font-weight:500; margin:0 0 12px; }
.review-details ol { list-style:decimal-leading-zero; margin:0; padding-left:26px; color:#a1a1a2; font-size:12px; }
.review-details li { padding:0 0 14px 5px; overflow-wrap:anywhere; }
.review-details li::marker { color:#717172; font-family:var(--font-data); font-size:10px; }
@media(max-width:600px) { .review-preview-layout { --review-media-width:calc(35dvh * 9 / 16); grid-template-columns:minmax(0,1fr); gap:20px; } .review-details>p { margin-bottom:16px; } }
/* The start action and the project directory form two deliberate, full-width zones. */









.project-table-heading { display:grid; grid-template-columns:144px minmax(0,1fr); color:#848485; font-size:11px; padding:0 0 12px; }
.project-table-heading>span { padding-left:20px; }
.project-table-heading>div { display:grid; grid-template-columns:minmax(150px,1fr) minmax(130px,.7fr) minmax(150px,.65fr); gap:24px; padding:0 20px; }
.is-list .project-tile { border-color:#3c3c3d; background:#262627; }
.is-list .project-tile:hover { background:#2f2f30; box-shadow:none; }
.is-list .project-tile-footer { gap:20px; }
.is-list .project-name { font-weight:500; }
.is-list .project-facts { font-size:12px; }
@media(min-width:1700px) { .is-list .project-cover { min-height:124px; } }
@media(max-width:1279px) { .project-table-heading { display:none; }  }
@media(max-width:700px) {
 
 
 
 
 
  .project-table-heading { display:none; }
 .is-list .project-tile-footer { gap:10px; }
}

@media(max-width:700px) {
 .workspace-header { flex-wrap:wrap; }
 .workspace-header>.actions { width:100%; justify-content:space-between; }
 .workspace-header>.actions .btn { height:34px; padding:0 10px; font-size:12px; }
 
 
 
 
}
.review-preview-layout>img.dialog-video { object-fit:cover; }
@media(max-width:700px) {
 .toolbar-actions { flex-wrap:wrap; }
 .toolbar-actions .search-wrap { order:-1; flex:1 0 100%; width:100%; }
 .toolbar-actions .sort-select { margin-right:auto; }
 .toolbar-actions .selection-control { margin-right:auto; }
 .is-list .project-tile-footer { align-self:stretch; }
}
/* Creative studio: neutral charcoal, optical atmosphere, image-led shelves. */
:root { --bg:#151719; --panel:#222427; --raised:#2b2e32; --line:#ffffff0e; --text:#e6e9ec; --muted:#959ba3; --side:var(--bg); --accent:#54d6bc; --accent-ink:#8fe4ce; }
body { background:#151719; }
.sidebar { background:var(--side); border-right:1px solid #ffffff09; }
.sidebar-toggle { color:#90979d; }
.nav-item { color:#a0a7ae; }
.nav-item.active { background:#2a3d37; color:#9be7d2; }
.sidebar-toggle:hover,.nav-item:hover { background:#2b3132; color:#edf3ef; }
.sidebar-account { border-color:#ffffff09; }
.user-name { font-size:13px; color:#cbd2d5; }
.user-avatar { background:#30483e; color:#b0e6cf; }
.listing-page { background:#151719; }
.listing-page:before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url('assets/studio-atmosphere.png') top right/max(100%,1400px) auto no-repeat; opacity:.18; mask-image:linear-gradient(#000 0%,#0009 60%,transparent 100%); }
.workspace-header { min-height:142px; padding-top:39px; padding-bottom:29px; border-bottom:0; background:transparent; }
.workspace-header h1 { font-size:26px; line-height:1.35; font-weight:500; letter-spacing:-.8px; color:#f0f2f3; }
.workspace-header p { color:#8b939b; font-size:13px; margin-top:9px; }
.workspace-body { padding-top:10px; background:transparent; }
.workspace-toolbar { margin-bottom:22px; }
.section-caption h2 { font-size:15px; font-weight:500; color:#d6dbdf; }
.count-badge { background:transparent; color:#737c85; font-size:12px; font-weight:400; min-width:0; padding:0; }
.toolbar-actions .search-wrap { width:224px; height:34px; background:#20242799; border-color:#ffffff0a; }
.toolbar-actions .search-wrap svg { color:#6f7881; }
.search-wrap input { color:#cbd0d5; }
.search-wrap input::placeholder { color:#6f7881; }
.sort-select { height:34px; padding:0 10px; border:1px solid #ffffff0a; border-radius:7px; background:#20242799; color:#7f8790; }
.view-switch { background:#1f232799; border:1px solid #ffffff06; padding:2px; }
.view-switch button { color:#68747e; }
.view-switch button[aria-pressed=true] { background:#30363a; color:#c6ddd7; box-shadow:none; }
.project-grid { grid-template-columns:repeat(auto-fill,minmax(242px,1fr)); gap:30px 24px; }
.project-tile { background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible; }
.project-tile:hover { box-shadow:none; }
.project-cover { aspect-ratio:16/10; border-radius:12px; background:#25282b; overflow:hidden; box-shadow:0 5px 20px #00000018; }
.project-cover>img { filter:saturate(.85); }
.project-cover:hover>img { filter:saturate(1) brightness(1.04); }
.project-cover-ratio { top:10px; right:10px; background:#151b1caa; color:#e3ece9; font-size:10px; }
.cover-time { left:10px; bottom:10px; background:#151b1caa; color:#e3ece9; }
.project-tile-info { padding:14px 1px 0; }
.project-name { font-size:14px; font-weight:500; color:#dce1e5; }
.project-facts { color:#7f8991; font-size:12px; margin:5px 0 9px; }
.project-facts i { color:#424b52; }
.project-tile-footer { margin-top:9px; padding-top:0; border:0; }
.project-tile-footer time { color:#626f79; font-size:11px; }
.project-open-action { font-size:12px; color:#9ab7ac; }
.studio-create-tile { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border:1px solid #ffffff0e; border-radius:12px; background:linear-gradient(135deg,#ffffff05,#ffffff02); color:#d3dcd8; padding:28px; box-shadow:inset 0 1px #ffffff03; }
.studio-create-tile>span { display:grid; place-items:center; width:44px; height:44px; margin-bottom:5px; background:#394f443d; border-radius:14px; color:#91ccb4; }
.studio-create-tile>span svg { width:22px; height:22px; }
.studio-create-tile>b { font-size:14px; font-weight:500; }
.studio-create-tile>small { color:#65776d; font-size:12px; }
.studio-create-tile:hover { background:linear-gradient(135deg,#ffffff09,#ffffff04); }
.project-grid.is-list .studio-create-tile { min-height:74px; padding:16px 20px; flex-direction:row; justify-content:flex-start; gap:14px; }
.project-grid.is-list .studio-create-tile>span { width:34px; height:34px; border-radius:10px; margin:0; }
.project-grid.is-list .studio-create-tile>small { margin-left:auto; }
.is-list .project-tile { padding:12px 0; border:0; border-bottom:1px solid #ffffff0a; border-radius:0; background:transparent; grid-template-columns:124px minmax(0,1fr); }
.is-list .project-tile:hover { background:transparent; }
.is-list .project-cover { min-height:86px; height:86px; border-radius:8px; }
.is-list .project-tile-info { padding:5px 0 5px 20px; }
.project-table-heading { display:none; }
.btn { background:#2a2e32; border:1px solid #ffffff08; color:#c9d2d5; border-radius:8px; }
.btn:hover { background:#343a3d; }
.btn.primary { background:#54d6bc; color:#12372d; border:0; box-shadow:0 2px 9px #0002; }
.btn.primary:hover { background:#78e3cb; }
.btn.ghost { border:0; }
/* The editor shares the same materials; video and timeline provide its color. */
.editor-page { --bg:#141619; --panel:#202327; --raised:#292d31; --line:#ffffff0a; --text:#d6dee2; --muted:#85919a; background:#141619; }
.projectbar { background:#1b1e21; border-bottom:1px solid #ffffff06; }
.project-icon { background:#2b4138; color:#9bd5bd; }
.project-title { color:#e3e8eb; }
.project-identity small { color:#7b858e; }
.project-actions .save-state { color:#788b80; }
.editor-page .btn { background:#2a2e32; border:1px solid #ffffff08; color:#b9c4cc; }
.editor-page .btn:hover { background:#353b40; }
.editor-page .btn.primary { background:#54d6bc; color:#12372d; border:0; }
.panel { background:#202327; border:1px solid #ffffff07; border-radius:10px; }
.panel-heading,.property-tabs { border-bottom:1px solid #ffffff07; }
.panel-heading h2,.property-tabs h2 { font-size:13px; color:#b6c1c9; }
.material-panel .search-wrap { background:#191d20; border-color:#ffffff08; }
.material-tabs button { color:#828e98; }
.material-tabs button.active { color:#bee5d7; }
.material-tabs span { background:#33493e; color:#a2c5b1; }
.material-context { color:#6c7b86; font-size:12px; }
.material-cover { border-radius:7px; }
.material-card b { font-size:12px; color:#92a2ad; }
.material-card.selected .material-cover { outline-color:#7ad8b8; outline-width:1px; }
.preview-panel { background:#1b1f23; }
.preview-stage { background:radial-gradient(ellipse at center,#20272c,#15181c 80%); }
.player-time b { color:#afc3cf; }
.player-time>span { color:#5d7181; }
.play-buttons #play { background:#2e3d46; }
.editor-page input,.editor-page textarea,.editor-page select { background:#191e22; border-color:#ffffff0a; color:#c2ced7; border-radius:8px; }
.editor-page .field { color:#95a6b3; }
.editor-page .field>span { color:#5c7080; }
.property-divider { background:#ffffff08; }
.timeline-panel { background:#1c2126; border-color:#ffffff09; border-radius:10px; }
.timeline-toolbar,.timeline-footer { border-color:#ffffff08; }
.track-label { background:#1c2126; box-shadow:1px 0 #ffffff0a; }
.track-label select { background:#29373f; color:#9bb3c1; }
.track-row { border-color:#ffffff04; }
.segment.story { background:#34483e; border-color:#405a4b; color:#b7cfbf; }
.segment.story>span,.segment.story small { color:#789b86; }
.segment.video { background:#333a4c; border-color:#424d64; color:#b3bedc; }
.segment.video.alternate { background:#2c3342; border-color:#374254; color:#9dabc4; }
.segment.active { border-color:#86d7b6; box-shadow:inset 0 0 0 1px #86d7b6; }
/* Preview and assets stay image-led, with details outside the poster. */
.mix-panel { background:#242a2dcc; border:1px solid #ffffff0a; border-radius:13px; box-shadow:0 8px 40px #0000000c; }
.mix-panel h2 { font-weight:500; color:#c7d3d8; }
.mix-label { color:#7b8b95; }
.mix-limit { color:#d5e8df; font-size:30px; font-weight:500; }
.mix-math { color:#8c9f9a; }
.mix-section { border-color:#ffffff09; }
.strategy-chips>span { background:#ffffff04; color:#a5b8ae; border-color:#ffffff08; }
.strategy-chips svg { color:#7eae96; }
.draft-card { background:transparent; border:0; border-radius:0; overflow:visible; }
.draft-card.selected { border:0; }
.draft-cover { border-radius:11px; background:#22292e; }
.draft-card.selected .draft-cover { box-shadow:0 0 0 1px #7ab49c70; }
.draft-info { padding:13px 1px; }
.draft-info h3 { color:#ced9df; font-size:13px; }
.draft-info p { color:#748a99; font-size:12px; }
.asset-collection-head h2 { color:#a4b5c1; }
.asset-card { background:transparent; border:0; border-radius:0; overflow:visible; }
.asset-card.selected { border:0; }
.asset-poster { border-radius:12px; background:#22292f; }
.asset-card.selected .asset-poster { box-shadow:0 0 0 1px #7ab49c70; }
.asset-info { padding:14px 1px 0; }
.asset-info h3 { font-size:13px; color:#cbd8e1; }
.asset-info>p { font-size:12px; color:#758c9d; }
.asset-card-footer { border:0; margin-top:9px; padding-top:0; }
.asset-card-footer .btn { color:#a5b8b0; }
.asset-grid.is-list .asset-card { padding-top:10px; padding-bottom:10px; border-bottom:1px solid #ffffff08; }
.asset-grid.is-list .asset-poster { border-radius:7px; }
.asset-grid.is-list .asset-check { top:52px; }
.asset-grid.is-list .asset-info { padding-top:16px; padding-bottom:16px; }
.empty { background:#ffffff02; border:1px solid #ffffff06; border-radius:14px; }
.empty h3 { color:#c2d0da; font-size:16px; }
.empty p { color:#8197a8; font-size:13px; }
.dialog { background:#252a2f; border-color:#ffffff0a; border-radius:16px; box-shadow:0 30px 120px #0008; }
.dialog-header,.dialog-footer { border-color:#ffffff08; }
.dialog-header h2 { color:#d9e5ec; font-size:17px; font-weight:500; }
.dialog-footer { background:#22282d; }
.dialog-body>p { color:#8ea4b3; }
.dialog input,.dialog textarea { background:#1d242a; border-color:#ffffff0d; color:#cbdce9; }
.dialog .field { color:#b5c8d6; }
.dialog .field>span { color:#708899; }
.project-format { background:#202427; border-color:#54d6bc38; }
@media(max-width:1279px) { .project-grid { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:28px 22px; } }
@media(max-width:700px) {
 .listing-page:before { background-size:auto 720px; opacity:.12; }
 .workspace-header { padding-top:28px; min-height:124px; }
 .workspace-header h1 { font-size:23px; }
 .workspace-body { padding-top:10px; }
 .studio-create-tile { min-height:220px; padding:24px; }
 .project-grid { grid-template-columns:1fr; gap:28px; }
 .project-grid.is-list .studio-create-tile { min-height:72px; gap:10px; padding:15px; }
 .project-grid.is-list .studio-create-tile>small { display:none; }
 .is-list .project-tile { grid-template-columns:80px minmax(0,1fr); }
 .is-list .project-cover { min-height:100%; height:100%; }
 .is-list .project-tile-info { padding:0 0 0 14px; }
 .project-tile-info { padding-top:13px; }
 .asset-grid.is-list .asset-check { top:51px; }
}
.project-tile-footer time { font-size:12px; color:#77828a; }
/* Phase one omits scripts; list rows align name and edit action directly. */
.is-list .project-tile-info { grid-template-columns:minmax(150px,1fr) minmax(180px,.8fr); }
.is-list .project-tile-footer { grid-column:2; grid-row:1/3; align-self:center; margin-top:0; }
@media(max-width:700px) { .is-list .project-tile-info { display:flex; } .is-list .project-tile-footer { align-self:stretch; margin-top:8px; } }

/* Frame the complete project card to match the create tile. */
.project-grid:not(.is-list) .project-tile { border:1px solid #ffffff0e; border-radius:12px; overflow:hidden; background:linear-gradient(135deg,#ffffff05,#ffffff02); }
.project-grid:not(.is-list) .project-cover { border-radius:11px 11px 0 0; box-shadow:none; }
.project-grid:not(.is-list) .project-tile-info { padding:14px 16px 15px; }

/* One native button opens the project from anywhere inside its card. */
.project-tile { padding:0; text-align:left; cursor:pointer; }
.project-tile-info { display:block; }

/* Align toolbar type and the marked spacing on one 12px rhythm. */
.toolbar-actions { gap:12px; }
.toolbar-actions .search-wrap { padding-left:12px; padding-right:12px; }
.toolbar-actions .search-wrap input,.toolbar-actions .sort-select { font-size:13px; line-height:20px; }
.toolbar-actions .sort-select { padding-left:12px; padding-right:12px; }

/* Project library starts directly with its toolbar and create tile. */
#projectsPage>.workspace-body { min-height:100%; padding-top:24px; }
.section-caption h1 { margin:0; font-size:15px; line-height:1.5; font-weight:500; color:#d6dbdf; }
@media(max-width:700px) { #projectsPage>.workspace-body { padding-top:24px; } }

/* Ratio selection: charcoal surface with the existing mint accent. */
.project-format .format-icon { background:#54d6bc0d; border-color:#54d6bc26; color:#8fe4ce; }
.project-format b { color:#dce3e7; }
.project-format small { color:#849198; }
.project-format>svg { color:var(--accent); }
/* Project pair: inset media, shared baselines, quiet depth. */
.project-grid:not(.is-list) .project-tile,
.project-grid:not(.is-list) .studio-create-tile {
 display:flex; flex-direction:column; align-items:stretch; min-height:0; padding:0; gap:0;
 border:1px solid #ffffff16; border-radius:16px; overflow:hidden;
 background:linear-gradient(150deg,#23282bc2,#1a1e21e8);
 box-shadow:inset 0 1px 0 #ffffff05,0 8px 24px #00000012;
 transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;
}
.project-grid:not(.is-list) .project-cover,
.project-grid:not(.is-list) .studio-create-tile>.create-card-art {
 display:block; width:calc(100% - 16px); height:auto; aspect-ratio:16/10;
 margin:8px; flex-shrink:0; border-radius:10px; box-shadow:none;
}
.project-grid:not(.is-list) .project-cover { background:#151a1c; }
.project-grid:not(.is-list) .project-cover>img { transition:transform .28s ease,filter .2s ease; filter:saturate(.9); }
.project-grid:not(.is-list) .project-tile-info {
 display:flex; flex:1; flex-direction:column; padding:10px 16px 16px;
}
.project-grid:not(.is-list) .project-name { line-height:21px; font-size:14px; font-weight:500; color:#e1e7e9; }
.project-grid:not(.is-list) .project-facts { margin:6px 0 17px; font-size:12px; color:#88959b; }
.project-grid:not(.is-list) .project-tile-footer { margin-top:auto; padding-top:0; }
.project-grid:not(.is-list) .project-tile-footer time { color:#78868e; font-size:12px; }
.project-grid:not(.is-list) .studio-create-tile>.create-card-art {
 position:relative; display:grid; place-items:center; padding:0;
 background:radial-gradient(ellipse at 50% 65%,#54d6bc0b,transparent 68%),linear-gradient(145deg,#1b2526,#1a2023);
 border:1px solid #ffffff07; color:#8eb5aa;
}
.create-card-layers { position:relative; display:grid; place-items:center; width:68px; height:68px; }
.studio-create-tile .create-card-layers>svg { width:44px; height:44px; stroke-width:1; color:#7eaa9d; filter:drop-shadow(0 5px 12px #0004); }
.create-card-plus {
 display:grid; place-items:center; position:absolute; right:0; bottom:3px;
 width:25px; height:25px; border:1px solid #8cd8bc35; border-radius:8px;
 background:#2b4940; color:#a7e4ce; box-shadow:0 3px 10px #0003;
}
.studio-create-tile .create-card-plus svg { width:14px; height:14px; stroke-width:1.6; }
.studio-create-tile>.create-card-copy {
 display:flex; align-items:flex-start; justify-content:flex-start; flex-direction:column; flex:1;
 width:auto; height:auto; margin:0; padding:10px 16px 16px;
 border-radius:0; background:transparent; color:inherit; gap:6px;
}
.create-card-copy>b { font-size:14px; font-weight:500; line-height:21px; color:#d6e3de; }
.create-card-copy>small { font-size:12px; line-height:18px; color:#7c9390; }
@media(hover:hover) {
 .project-grid:not(.is-list) .project-tile:hover,
 .project-grid:not(.is-list) .studio-create-tile:hover {
  transform:translateY(-3px); border-color:#ffffff2b;
  box-shadow:inset 0 1px 0 #ffffff08,0 12px 28px #00000025;
 }
 .project-grid:not(.is-list) .project-tile:hover .project-cover>img { transform:scale(1.025); filter:saturate(1) brightness(1.03); }
 .project-grid:not(.is-list) .studio-create-tile:hover .create-card-art { background:radial-gradient(ellipse at 50% 65%,#54d6bc15,transparent 70%),linear-gradient(145deg,#1d2929,#1a2225); }
}
/* List view keeps the same object and compact proportions. */
.project-grid.is-list .studio-create-tile>.create-card-art {
 position:relative; display:grid; place-items:center; flex-shrink:0;
 width:56px; height:46px; margin:0; border-radius:9px; background:#20302d;
}
.project-grid.is-list .create-card-layers { width:42px; height:40px; }
.project-grid.is-list .create-card-layers>svg { width:29px; height:29px; }
.project-grid.is-list .create-card-plus { width:17px; height:17px; border-radius:5px; right:0; bottom:0; }
.project-grid.is-list .create-card-plus svg { width:10px; height:10px; }
.project-grid.is-list .studio-create-tile>.create-card-copy { padding:0; gap:3px; }
@media(max-width:700px) {
 .project-grid:not(.is-list) .studio-create-tile { min-height:0; }
 .project-grid.is-list .studio-create-tile>.create-card-art { width:46px; height:42px; }
}