@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #0d1726;
  --muted: #6f7b8b;
  --muted-2: #9aa5b4;
  --text-soft: #6f7b8b;
  --line: #e8ecf1;
  --surface: #ffffff;
  --canvas: #f6f8fb;
  --navy: #101c2f;
  --teal: #55cdb9;
  --teal-deep: #168d84;
  --coral: #ff836b;
  --yellow: #f8bf5a;
  --shadow: 0 18px 45px rgba(18, 39, 68, .06), 0 3px 10px rgba(18, 39, 68, .03);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--canvas); color: var(--ink); font-family: 'Manrope', 'Noto Sans SC', system-ui, sans-serif; }
button { font: inherit; }
button:focus-visible { outline: 3px solid rgba(85, 205, 185, .38); outline-offset: 2px; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 250px; flex: 0 0 250px; background: var(--navy); color: #eaf0f6; padding: 27px 15px 18px; display: flex; flex-direction: column; }
.brand { display:flex; align-items: center; gap: 12px; padding: 0 10px 29px; }
.brand-mark { width: 29px; height: 29px; display: flex; align-items: end; gap: 3px; }
.brand-mark span { display:block; width: 7px; border-radius: 8px 8px 2px 2px; background: var(--teal); }
.brand-mark span:nth-child(1) { height: 17px; opacity: .7; }.brand-mark span:nth-child(2) { height: 27px; }.brand-mark span:nth-child(3) { height: 21px; background: var(--coral); }
.brand-name { font-size: 12px; letter-spacing: .18em; font-weight: 800; }.brand-sub { color: #8695a9; font-size: 11px; margin-top: 4px; }
.workspace-switcher { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.045); border-radius: 12px; padding: 10px 9px; display:flex; align-items:center; gap: 9px; }
.workspace-avatar, .profile-avatar, .avatar-button { display:grid; place-items:center; border-radius: 9px; font-weight:800; }
.workspace-avatar { width: 30px; height: 30px; background: #ffe0b3; color: #844f36; font-size: 13px; }.workspace-copy { min-width:0; flex:1; }.workspace-copy strong { font-size: 12px; display:block; }.workspace-copy span { color: #8190a3; font-size: 10px; display:block; margin-top: 2px; }.chevron { color:#7b899c; font-size: 18px; margin-top:-5px; }
.side-nav { padding-top: 29px; }.nav-label { color:#6e7e93; font-size: 10px; text-transform: uppercase; letter-spacing: .16em; padding: 0 12px 9px; font-family: 'DM Mono', monospace; }.nav-label.spaced { margin-top: 27px; }
.nav-item { width:100%; border:0; background:transparent; color:#9aa8ba; text-align:left; padding: 11px 12px; border-radius: 9px; cursor:pointer; font-size: 12px; display:flex; align-items:center; gap: 11px; transition: .2s; }.nav-item:hover { color:#fff; background:rgba(255,255,255,.06); }.nav-item.active { color:#f6fffd; background: linear-gradient(90deg, rgba(85,205,185,.17), rgba(85,205,185,.06)); box-shadow: inset 3px 0 0 var(--teal); }.nav-icon { width: 15px; color: var(--teal); font-size: 14px; text-align:center; }.nav-item em { margin-left:auto; font-style:normal; color:#738197; background:rgba(255,255,255,.08); border-radius: 20px; padding:2px 7px; font-size:10px; }
.sidebar-bottom { margin-top:auto; }.quota-card { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); border-radius: 12px; padding: 13px 12px 11px; }.quota-top, .quota-foot { display:flex; justify-content:space-between; font-size:10px; color:#8d9aad; }.quota-top span:last-child { color:var(--teal); text-transform:uppercase; letter-spacing:.08em; }.quota-meter { height: 5px; background: #26364e; border-radius: 20px; margin: 12px 0 9px; overflow:hidden; }.quota-meter span { display:block; height:100%; background:var(--teal); border-radius:20px; }.quota-foot strong { color:#e9f2f2; font-size:11px; }.profile-row { display:flex; align-items:center; gap:9px; padding: 22px 9px 0; }.profile-avatar { width:29px; height:29px; background:#c5edf0; color:#14757b; font-size:12px; }.profile-row div:nth-child(2) { flex:1; }.profile-row strong { font-size:11px; display:block; }.profile-row span { color:#7f8da0; font-size:10px; display:block; margin-top:3px; }.profile-row .more { font-size:13px; letter-spacing:2px; }

.main-content { flex:1; min-width:0; padding-bottom: 60px; }.topbar { height:72px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.8); display:flex; align-items:center; justify-content:space-between; padding: 0 clamp(24px, 4vw, 63px); }.breadcrumbs { color:#96a0af; font-size:11px; display:flex; gap:10px; align-items:center; }.breadcrumbs b { color:#ccd2dc; font-weight:400; }.breadcrumbs strong { color:#263348; font-weight:600; }.top-actions { display:flex; align-items:center; gap:16px; }.saved { color:#8a95a4; font-size:10px; display:flex; align-items:center; gap:6px; }.saved i, .live-dot { width:6px; height:6px; display:inline-block; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(85,205,185,.13); }.icon-button, .avatar-button { border:0; cursor:pointer; }.icon-button { width:27px; height:27px; border-radius:50%; color:#8c96a3; background:#f3f5f8; font-size:12px; }.icon-button.small { width:25px; height:25px; }.avatar-button { width:29px; height:29px; background:#ffe0b3; color:#844f36; font-size:11px; }
.page-head, .project-strip, .workflow-section, .workspace-grid { width: min(1250px, calc(100% - 48px)); margin-left:auto; margin-right:auto; }.page-head { padding: 40px 0 27px; display:flex; align-items:end; justify-content:space-between; gap:30px; }.eyebrow { font-family:'DM Mono', monospace; font-size:10px; letter-spacing:.08em; color:#8b97a8; display:flex; align-items:center; gap:8px; text-transform:uppercase; }.page-head h1 { font-size:clamp(25px, 3vw, 38px); letter-spacing:-.055em; margin:14px 0 9px; line-height:1.1; font-weight:800; }.page-head p { color:#7c8797; margin:0; font-size:13px; }.head-actions { display:flex; gap:9px; flex-shrink:0; }.button { border:0; border-radius:8px; padding: 11px 15px; cursor:pointer; font-size:11px; font-weight:700; display:inline-flex; align-items:center; gap:7px; transition: .2s; }.button.ghost { background:#fff; color:#5f6b7b; box-shadow: var(--shadow); }.button.primary { background:var(--ink); color:#fff; box-shadow: 0 8px 20px rgba(13,23,38,.14); }.button:hover { transform:translateY(-1px); }.button.primary:hover { background:#1b2b43; }.button.full { width:100%; justify-content:center; margin-top:20px; padding:13px; }
.card { background:var(--surface); border:1px solid rgba(225,230,237,.85); border-radius:13px; box-shadow:var(--shadow); }.project-strip { padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:25px; }.project-title { display:flex; align-items:center; gap:15px; min-width:0; }.project-poster { width:57px; height:67px; border-radius:8px; flex:0 0 auto; padding:8px 7px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; position:relative; }.poster-fog { background: radial-gradient(circle at 67% 24%, #ffb08f, transparent 27%), linear-gradient(154deg, #172b45, #6f8a9a 56%, #d9d4bf); color:#fff; }.poster-fog:after { content:""; position:absolute; width:90px; height:34px; background:rgba(231,243,232,.45); filter:blur(12px); bottom:8px; left:-18px; transform:rotate(-11deg); }.poster-kicker, .poster-foot { position:relative; z-index:1; font: 6px 'DM Mono', monospace; letter-spacing:.12em; opacity:.8; }.poster-poster strong { position:relative; z-index:1; }.poster-fog strong { position:relative; z-index:1; font-size:16px; line-height:1.05; letter-spacing:-.08em; }.title-line { display:flex; align-items:center; gap:9px; }.title-line h2 { margin:0; font-size:18px; letter-spacing:-.04em; }.title-line > span { font-size:9px; }.status-pill { padding:4px 7px; border-radius:20px; font-weight:700; display:inline-flex; align-items:center; gap:4px; }.status-pill.green { background:#e6f7f2; color:#278879; }.status-pill.green i { width:5px; height:5px; border-radius:50%; background:#44c0a6; }.project-title p { color:#7c8797; font-size:11px; margin:7px 0 9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:500px; }.project-meta { color:#a0a9b6; font-size:9px; display:flex; gap:8px; }.project-meta b { color:#d6dbe2; font-weight:400; }.style-control { display:flex; align-items:center; gap:11px; flex-shrink:0; }.control-label { color:#98a3b1; font-size:10px; }.segmented { display:flex; background:#f4f6f8; padding:3px; border-radius:8px; }.style-option { border:0; background:transparent; color:#8490a0; padding:7px 10px; border-radius:6px; font-size:10px; cursor:pointer; }.style-option.active { background:#fff; color:#223044; box-shadow:0 2px 6px rgba(23,40,62,.1); font-weight:700; }
.workflow-section { padding-top:38px; }.section-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }.section-heading > div { display:flex; align-items:center; gap:10px; }.section-index { color:var(--teal-deep); font: 10px 'DM Mono', monospace; letter-spacing:.1em; }.section-heading h2 { font-size:14px; margin:0; letter-spacing:-.03em; }.section-note, .stage-count { font-size:10px; color:#9aa4b1; margin-left:4px; }.text-button { border:0; background:transparent; color:#788698; cursor:pointer; font-size:10px; padding:4px; }.text-button:hover { color:var(--teal-deep); }.workflow-track { display:grid; grid-template-columns: repeat(7, minmax(118px, 1fr)); gap:0; position:relative; }.workflow-track:before { content:""; height:1px; background:#dce3ea; position:absolute; top:22px; left:42px; right:42px; z-index:0; }.workflow-node { position:relative; z-index:1; min-width:0; cursor:pointer; }.node-dot { width:45px; height:45px; border-radius:13px; display:grid; place-items:center; margin:0 auto 9px; border:4px solid var(--canvas); font-size:15px; font-weight:800; transition:.2s; }.workflow-node:hover .node-dot, .workflow-node.active .node-dot { transform:translateY(-2px); box-shadow:0 7px 14px rgba(25,44,72,.1); }.node-dot.done { background:#d9f3ed; color:#148a80; }.node-dot.review { background:#fff0d7; color:#b87813; }.node-dot.running { background:#dfe9ff; color:#5579c6; }.node-dot.pending { background:#edf0f4; color:#9aa4b1; }.node-label { text-align:center; display:block; color:#657285; font-size:10px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.workflow-node.active .node-label { color:var(--ink); }.node-status { text-align:center; color:#a6afb9; font-size:9px; margin-top:4px; display:block; }.node-status.teal { color:#2b9a8c; }.node-status.gold { color:#c28a37; }
.workspace-grid { display:grid; grid-template-columns:minmax(0, 1fr) 295px; gap:26px; padding-top:39px; }.section-heading.compact { margin-bottom:13px; }.stage-panel { min-height:420px; overflow:hidden; }.insight-column .section-heading { margin-bottom:13px; }.snapshot-card { padding:18px; }.snapshot-head { display:flex; justify-content:space-between; align-items:center; }.mini-label { color:#a0aab6; font:9px 'DM Mono', monospace; letter-spacing:.08em; display:block; }.snapshot-head strong { margin-top:5px; display:block; font-size:15px; }.health-ring { width:53px; height:53px; border-radius:50%; display:grid; place-items:center; font-size:14px; font-weight:800; color:#198e83; background:radial-gradient(closest-side, white 71%, transparent 72% 99%), conic-gradient(var(--teal) 0 92%, #e7f3f1 92% 100%); }.health-ring span { font-size:9px; margin-left:1px; }.health-bars { display:flex; flex-direction:column; gap:12px; padding:22px 0 16px; }.health-bars > div { display:grid; grid-template-columns:1fr auto; gap:6px; font-size:10px; color:#7d8898; }.health-bars b { color:#627083; font-size:10px; }.health-bars i { grid-column:1 / 3; height:5px; border-radius:10px; background:#eff2f4; overflow:hidden; }.health-bars i em { display:block; height:100%; background:linear-gradient(90deg, #8ce0d0, #4fc1b0); border-radius:10px; }.snapshot-divider { height:1px; background:var(--line); }.snapshot-stats { display:grid; grid-template-columns:repeat(3,1fr); padding-top:16px; }.snapshot-stats div + div { border-left:1px solid var(--line); padding-left:13px; }.snapshot-stats strong { display:block; font-size:16px; letter-spacing:-.05em; }.snapshot-stats span { display:block; color:#9da7b4; font-size:9px; margin-top:4px; }.activity-card { margin-top:13px; padding:17px 16px 10px; }.activity-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }.activity-title h3 { margin:0; font-size:12px; }.activity-item { display:flex; align-items:flex-start; gap:9px; padding:10px 0; border-top:1px solid #f0f2f5; }.activity-icon { width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-size:11px; flex:0 0 auto; }.activity-icon.teal { color:#168d84; background:#e1f5f0; }.activity-icon.coral { color:#c66a57; background:#fff0ed; }.activity-icon.yellow { color:#aa761c; background:#fff4dc; }.activity-item div { min-width:0; flex:1; }.activity-item strong, .activity-item span { display:block; }.activity-item strong { color:#4c596b; font-size:10px; }.activity-item span { color:#98a3b1; font-size:9px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.activity-item time { color:#aeb6c0; font-size:8px; white-space:nowrap; padding-top:1px; }.portfolio-tip { display:flex; gap:10px; background:linear-gradient(125deg, #effaf7, #fbfaf2); border:1px solid #dcefe9; border-radius:12px; padding:14px; margin-top:13px; }.tip-icon { width:23px; height:23px; display:grid; place-items:center; border-radius:7px; color:#208b7f; background:#d5f1e9; font-size:11px; flex:0 0 auto; }.portfolio-tip strong { color:#3e766e; font-size:10px; }.portfolio-tip p { color:#77928d; font-size:9px; line-height:1.6; margin:5px 0 0; }

/* Dynamic stage content */
.stage-intro { padding:19px 21px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }.stage-intro h3 { margin:0; font-size:16px; letter-spacing:-.04em; }.stage-intro p { margin:6px 0 0; color:#8b96a4; font-size:10px; line-height:1.55; }.stage-intro .button { padding:8px 11px; font-size:10px; }.stage-body { padding:18px 20px 22px; }.character-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }.character-card { border:1px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer; transition:.2s; background:#fff; }.character-card:hover, .character-card.selected { border-color:#8bd9cd; box-shadow:0 8px 20px rgba(46,140,127,.1); transform:translateY(-2px); }.character-visual { height:138px; position:relative; overflow:hidden; }.character-visual:before { content:""; width:84px; height:128px; border-radius:45% 48% 16% 16%; position:absolute; bottom:-9px; left:50%; transform:translateX(-50%); background:linear-gradient(90deg, rgba(255,255,255,.22), transparent 40%), var(--char); box-shadow:inset -11px 0 0 rgba(0,0,0,.08); }.character-visual:after { content:""; position:absolute; width:43px; height:43px; border-radius:50%; background:var(--skin,#f2b08d); left:50%; top:28px; transform:translateX(-50%); box-shadow:0 -10px 0 4px var(--hair,#202c43), inset -4px -3px 0 rgba(0,0,0,.07); }.character-visual span { position:absolute; z-index:1; left:10px; top:9px; color:#fff; font:8px 'DM Mono',monospace; letter-spacing:.1em; opacity:.8; }.char-yan { --char:#355e78; --skin:#d7a078; --hair:#182b3d; background:linear-gradient(140deg,#dcecf0,#99b7b9); }.char-luo { --char:#9a4d55; --skin:#efb495; --hair:#4b1e2b; background:linear-gradient(140deg,#f8e9dd,#d7a99f); }.char-qi { --char:#d09255; --skin:#e4a477; --hair:#d7c1a1; background:linear-gradient(140deg,#f4e8ca,#9eaa92); }.character-info { padding:10px 11px 11px; }.character-info > div { display:flex; align-items:center; justify-content:space-between; }.character-info strong { font-size:11px; }.character-info small { color:#9aa5b2; font-size:9px; }.character-tags { display:flex; gap:4px; margin-top:7px; }.character-tags span { color:#778495; background:#f4f6f8; border-radius:4px; padding:3px 5px; font-size:8px; }.character-lock { color:#2c9d8e; font-size:10px; }.stage-footer { display:flex; justify-content:space-between; align-items:center; margin-top:17px; padding-top:15px; border-top:1px solid var(--line); color:#9aa5b2; font-size:9px; }.stage-footer span:first-child { display:flex; align-items:center; gap:5px; }.stage-footer i { width:6px; height:6px; border-radius:50%; background:#4fc0ab; }
.editor-shell { border:1px solid var(--line); border-radius:12px; padding:15px; background:linear-gradient(180deg, #fff, #fbfcfd); margin-top:16px; box-shadow:0 8px 20px rgba(18,39,68,.04); }
.editor-shell-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.editor-shell-head strong { display:block; margin-top:4px; font-size:15px; }
.form-grid { display:grid; gap:12px; }
.story-form { grid-template-columns:repeat(2, minmax(0,1fr)); }
.character-form { grid-template-columns:repeat(2, minmax(0,1fr)); }
.script-form { grid-template-columns:repeat(2, minmax(0,1fr)); }
.story-action-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.story-result-shell { margin-top:16px; }
.story-edit-grid { display:grid; gap:14px; }
.story-acts-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.story-act-card { border:1px solid var(--line); border-radius:12px; background:#fff; padding:13px; box-shadow:0 6px 16px rgba(18,39,68,.04); display:flex; flex-direction:column; gap:10px; }
.story-act-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.story-act-head span { color:#7b8795; font-size:10px; white-space:nowrap; }
.story-act-head input, .story-act-card textarea { width:100%; border:1px solid var(--line); border-radius:8px; background:#fff; padding:9px 10px; font:inherit; color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.55); }
.story-act-head input:focus, .story-act-card textarea:focus { outline:2px solid rgba(85,205,185,.24); border-color:#85d7ca; }
.story-act-head input { flex:1; min-width:0; font-weight:700; }
.story-act-card textarea { min-height:120px; resize:vertical; line-height:1.6; }
.story-meta-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.story-meta-grid article { border:1px solid var(--line); border-radius:12px; background:#fbfdfe; padding:13px; }
.story-meta-grid p { margin:7px 0 0; color:#627083; font-size:11px; line-height:1.65; }
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field span { color:#8b96a4; font-size:10px; }
.field input, .field textarea, .field select { width:100%; border:1px solid var(--line); border-radius:8px; background:#fff; padding:9px 10px; font:inherit; color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.55); }
.field textarea { min-height:78px; resize:vertical; line-height:1.6; }
.field input:focus, .field textarea:focus, .field select:focus { outline:2px solid rgba(85,205,185,.24); border-color:#85d7ca; }
.field-wide { grid-column:1 / -1; }
.field-inline { flex-direction:row; align-items:center; gap:8px; padding-top:20px; }
.field-inline span { color:#4f5d70; font-size:11px; }
.character-form .field-inline { grid-column:1 / -1; }
.reference-preview { margin-top:16px; border:1px solid var(--line); border-radius:12px; overflow:hidden; min-height:220px; background:#f7f9fb; display:grid; place-items:center; }
.reference-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.shot-editor { border:1px solid var(--line); border-radius:12px; padding:14px; background:#fff; box-shadow:0 6px 16px rgba(18,39,68,.04); }
.shot-editor + .shot-editor { margin-top:12px; }
.shot-editor-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
.shot-editor-head strong { font-size:13px; }
.script-editor { display:flex; flex-direction:column; gap:12px; }
.empty-stage.compact { padding:24px 18px; }
.script-table { width:100%; border-collapse:collapse; }.script-table th { text-align:left; color:#9aa4b0; font:9px 'DM Mono',monospace; letter-spacing:.06em; padding:0 8px 10px; font-weight:400; }.script-table td { border-top:1px solid #eff2f5; padding:12px 8px; color:#5e6b7d; font-size:10px; vertical-align:top; }.script-table td:first-child { color:#1d947f; font-family:'DM Mono',monospace; width:45px; }.shot-title { color:#334155; font-weight:700; display:block; margin-bottom:4px; }.shot-copy { color:#8994a2; line-height:1.5; }.dialogue { color:#a5664f; }.table-status { display:inline-flex; align-items:center; gap:5px; padding:4px 7px; border-radius:20px; font-size:9px; }.table-status.ok { color:#298c7c; background:#e8f8f3; }.table-status.wait { color:#b6791e; background:#fff4df; }
.editor-wrap { background:#101b2c; padding:18px 20px 21px; min-height:399px; }.editor-top { display:flex; justify-content:space-between; align-items:center; color:#eaf1f7; }.editor-top h3 { margin:0; font-size:15px; letter-spacing:-.03em; }.editor-top p { margin:4px 0 0; color:#8b9bae; font-size:9px; }.editor-actions { display:flex; gap:7px; }.editor-actions button { border:1px solid rgba(255,255,255,.13); color:#bfcbd8; background:rgba(255,255,255,.06); border-radius:6px; padding:7px 9px; font-size:9px; cursor:pointer; }.editor-actions button.play { background:var(--teal); border-color:var(--teal); color:#092c2b; font-weight:800; }.timeline-ruler { margin-top:22px; margin-left:59px; height:19px; border-top:1px solid #38475b; color:#758499; font:8px 'DM Mono',monospace; display:flex; justify-content:space-between; align-items:flex-start; padding-top:6px; }.timeline-row { display:grid; grid-template-columns:59px 1fr; gap:0; align-items:center; min-height:59px; }.track-label { color:#8190a4; font-size:9px; }.track-lane { min-height:42px; border-radius:6px; background:rgba(255,255,255,.045); display:flex; align-items:stretch; gap:4px; padding:4px; position:relative; }.clip { border-radius:5px; min-width:90px; flex:1; cursor:grab; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.14); background:linear-gradient(125deg,#315e78,#688c92); padding:7px 8px; color:#fff; }.clip:nth-child(2) { background:linear-gradient(125deg,#754e67,#aa8b8d); }.clip:nth-child(3) { background:linear-gradient(125deg,#8e744e,#c4aa77); }.clip:nth-child(4) { background:linear-gradient(125deg,#456b64,#83a698); }.clip strong { display:block; font-size:9px; }.clip span { display:block; font:8px 'DM Mono',monospace; color:rgba(255,255,255,.7); margin-top:3px; }.clip:after { content:""; position:absolute; inset:0; background:linear-gradient(130deg,rgba(255,255,255,.13),transparent 38%); pointer-events:none; }.clip.dragging { opacity:.45; }.audio-lane .audio-clip { background:linear-gradient(90deg, #2b786f, #489c8d); min-width:150px; }.audio-lane .audio-clip.bgm { background:linear-gradient(90deg, #806342, #b28b55); }.playhead { width:1px; background:var(--coral); position:absolute; top:-24px; bottom:-8px; left:22%; z-index:3; }.playhead:before { content:""; position:absolute; top:-4px; left:-4px; width:9px; height:9px; background:var(--coral); transform:rotate(45deg); border-radius:2px; }.editor-bottom { display:flex; justify-content:space-between; color:#7f90a3; font-size:9px; margin-top:16px; }.editor-bottom strong { color:#c8d2de; font-weight:500; }.range-row { display:flex; align-items:center; gap:10px; color:#8b9bae; font-size:9px; }.range-row input { accent-color:var(--teal); width:105px; }
.empty-stage { padding:48px 22px; text-align:center; color:#8995a4; }.empty-stage .empty-icon { width:45px; height:45px; margin:0 auto 13px; display:grid; place-items:center; border-radius:13px; background:#edf7f5; color:#2a9a8e; font-size:19px; }.empty-stage h3 { color:#3d4d62; font-size:14px; margin:0 0 8px; }.empty-stage p { font-size:10px; margin:0 auto 18px; max-width:300px; line-height:1.6; }

.modal-backdrop { position:fixed; inset:0; background:rgba(13,23,38,.45); display:grid; place-items:center; z-index:20; padding:20px; }.modal-backdrop[hidden] { display:none; }.modal { width:min(410px,100%); background:#fff; border-radius:16px; box-shadow:0 25px 70px rgba(7,20,38,.25); padding:28px; position:relative; }.modal-close { position:absolute; right:15px; top:12px; border:0; background:transparent; color:#929ead; font-size:22px; cursor:pointer; }.modal-kicker { color:var(--teal-deep); font:9px 'DM Mono',monospace; letter-spacing:.12em; }.modal h2 { font-size:21px; letter-spacing:-.05em; margin:10px 0 7px; }.modal p { color:#8894a3; font-size:11px; line-height:1.6; margin:0; }.modal-preview { margin-top:20px; padding:13px; border:1px solid var(--line); border-radius:10px; display:flex; align-items:center; gap:10px; }.file-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:8px; background:#e8f7f3; color:#188e81; font:11px 'DM Mono',monospace; }.modal-preview div { flex:1; }.modal-preview strong,.modal-preview span { display:block; }.modal-preview strong { color:#445266; font-size:10px; }.modal-preview div span { color:#a0aab6; font-size:9px; margin-top:4px; }.file-check { color:#2f9c8a; font-size:13px; }
.toast { position:fixed; bottom:25px; left:50%; transform:translate(-50%,20px); opacity:0; pointer-events:none; display:flex; align-items:center; gap:9px; padding:11px 15px 11px 11px; background:#142238; color:#f4fbfa; border-radius:9px; box-shadow:0 12px 35px rgba(14,27,46,.24); transition:.25s; z-index:30; }.toast.show { opacity:1; transform:translate(-50%,0); }.toast > span { width:20px; height:20px; display:grid; place-items:center; border-radius:6px; background:#57cdbb; color:#0b3a36; font-size:12px; font-weight:800; }.toast p { margin:0; font-size:10px; }

@media (max-width: 1050px) { .sidebar { width:210px; flex-basis:210px; }.workflow-track { grid-template-columns:repeat(4,1fr); row-gap:20px; }.workflow-track:before { display:none; }.workspace-grid { grid-template-columns:1fr; }.insight-column { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; align-items:start; }.insight-column .section-heading { grid-column:1 / -1; margin-bottom:0; }.portfolio-tip { margin-top:0; } }
@media (max-width: 740px) { .sidebar { width:66px; flex-basis:66px; padding:20px 9px; }.brand { padding:0 8px 28px; }.brand > div:last-child, .workspace-copy, .chevron, .nav-label, .nav-item em, .quota-card, .profile-row div:nth-child(2), .profile-row .more { display:none; }.workspace-switcher { justify-content:center; padding:8px; }.side-nav { padding-top:20px; }.nav-item { justify-content:center; padding:12px 0; }.nav-icon { font-size:16px; }.profile-row { padding:18px 9px 0; }.topbar { padding:0 17px; }.breadcrumbs span,.breadcrumbs b { display:none; }.page-head, .project-strip, .workflow-section, .workspace-grid { width:calc(100% - 30px); }.page-head { padding-top:29px; display:block; }.page-head h1 { font-size:28px; }.head-actions { margin-top:21px; }.project-strip { align-items:flex-start; flex-direction:column; }.project-title p { max-width:calc(100vw - 150px); }.style-control { width:100%; justify-content:space-between; }.segmented { flex:1; }.style-option { flex:1; }.workflow-track { grid-template-columns:repeat(2,1fr); }.character-grid { grid-template-columns:1fr; }.character-visual { height:160px; }.insight-column { display:block; }.activity-card { margin-top:13px; }.portfolio-tip { margin-top:13px; }.script-table { min-width:620px; }.stage-panel:has(.script-table) { overflow-x:auto; }.editor-wrap { padding-left:13px; padding-right:13px; overflow:hidden; }.editor-actions button:not(.play):not([data-action="render-export"]) { display:none; }.editor-top { align-items:flex-start; }.range-row input { width:70px; }.story-form, .character-form, .script-form, .story-acts-grid, .story-meta-grid { grid-template-columns:1fr; }.editor-shell-head { flex-direction:column; align-items:flex-start; }.clip-inspector { flex-wrap:wrap; }.clip-inspector .button { margin-left:0; } }
/* Clip inspector controls */
.clip-inspector { display:flex; align-items:end; gap:9px; padding-top:14px; margin-top:4px; border-top:1px solid rgba(255,255,255,.08); }
.clip-inspector label { color:#8797aa; font-size:9px; display:flex; flex-direction:column; gap:5px; }
.clip-inspector select, .clip-inspector input { border:1px solid rgba(255,255,255,.13); background:#1a2a40; color:#dbe4ec; border-radius:5px; padding:6px 8px; font-size:9px; min-width:112px; }
.clip-inspector input { width:76px; min-width:0; }
.clip-inspector .button { padding:7px 10px; font-size:9px; margin-left:auto; }
.character-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.character-visual img+span{z-index:2;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.story-grid{display:grid;grid-template-columns:1.1fr 1.4fr 1fr;gap:12px}.story-grid article{padding:15px;border:1px solid var(--line);border-radius:12px;background:rgba(17,29,49,.52)}.story-grid p{margin:9px 0 0;color:var(--text-soft);line-height:1.7;font-size:13px}.story-grid ol{margin:9px 0 0;padding-left:20px;color:var(--text-soft);font-size:13px}.story-grid li{margin:7px 0}.story-grid li span{display:block;color:var(--muted);font-size:12px;margin-top:2px}.asset-list{padding:0 18px 18px;display:grid;gap:8px}.asset-row{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:12px;padding:9px 11px;border:1px solid var(--line);background:rgba(17,29,49,.46);border-radius:10px}.asset-thumb{height:48px;border-radius:7px;display:grid;place-items:center;background:linear-gradient(135deg,#172a44,#24385b);overflow:hidden;color:#c8d5e7;font-size:10px;text-align:center}.asset-thumb img{width:100%;height:100%;object-fit:cover}.asset-thumb.video{background:linear-gradient(135deg,#3a2546,#1c3554)}.asset-thumb.voice{background:linear-gradient(135deg,#3e3020,#26364d)}.asset-row strong{font-size:13px}.asset-row p{margin:3px 0 0;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:470px}.asset-row .table-status{white-space:nowrap}.stage-body{min-height:0}@media (max-width:900px){.story-grid{grid-template-columns:1fr}.asset-row p{max-width:220px}}
.model-default-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.model-default-grid small{display:block;color:#9aa5b2;font-size:9px;line-height:1.45;margin-top:5px}.model-actions{display:flex;gap:8px}.provider-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:16px}.provider-card{border:1px solid var(--line);border-radius:12px;padding:15px;background:linear-gradient(180deg,#fff,#fbfcfd)}.provider-card.configured{border-color:#a5dfd5}.provider-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}.provider-card-head strong{display:block;font-size:14px}.provider-state{display:block;color:#9aa5b2;font-size:9px;margin-top:4px}.provider-state.ready{color:#2b9a8c}.provider-card .field{margin-top:9px}.provider-card .field span{font-size:9px}.provider-card .field input,.provider-card .field select{padding:9px 10px;font-size:11px}.provider-model-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.text-button.danger{color:#bf6f64}.text-button:disabled{opacity:.38;cursor:not-allowed}@media (max-width:900px){.provider-grid,.model-default-grid{grid-template-columns:1fr}.model-actions{flex-wrap:wrap}}
.provider-card .field .model-custom-input{margin-top:6px;font-size:10px;padding:7px 9px}