/* Defines the compact Blender-inspired workspace and responsive timeline layout. */
:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #111316; color: #d9dde3; --line: #30343b; --panel: #1b1e23; --accent: #e8793a; --ruler: 28px; }
* { box-sizing: border-box; }
body { height: 100vh; display: flex; flex-direction: column; margin: 0; min-width: 760px; overflow: hidden; }
button, input, select, textarea { color: inherit; font: inherit; }
button, select, input, textarea { border: 1px solid #40454e; background: #292d33; border-radius: 4px; }
button { padding: 6px 10px; cursor: pointer; }
button:hover { background: #353a42; }
button.primary { background: #c95d2b; border-color: #ec7d47; color: white; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon-button { display: grid; width: 40px; min-width: 40px; height: 34px; place-items: center; padding: 0 !important; touch-action: manipulation; }
.ui-icon { display: block; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.has-tooltip { position: relative; }
.has-tooltip::after { content: attr(data-tooltip); position: absolute; z-index: 30; right: 50%; bottom: calc(100% + 7px); width: max-content; max-width: 220px; padding: 5px 7px; transform: translateX(50%) translateY(2px); border: 1px solid #484e57; border-radius: 4px; background: #111317; box-shadow: 0 3px 10px #0009; color: #e4e7eb; font-size: 11px; font-weight: 500; line-height: 1.25; opacity: 0; pointer-events: none; text-align: left; transition: opacity .1s ease, transform .1s ease; white-space: nowrap; }
.has-tooltip:hover::after, .has-tooltip:focus-visible::after, .has-tooltip.tooltip-visible::after { transform: translateX(50%) translateY(0); opacity: 1; }
.has-tooltip.tooltip-align-start::after { right: auto; left: 0; transform: translateY(2px); }
.has-tooltip.tooltip-align-end::after { right: 0; transform: translateY(2px); }
.has-tooltip.tooltip-align-start:hover::after, .has-tooltip.tooltip-align-start:focus-visible::after, .has-tooltip.tooltip-align-start.tooltip-visible::after, .has-tooltip.tooltip-align-end:hover::after, .has-tooltip.tooltip-align-end:focus-visible::after, .has-tooltip.tooltip-align-end.tooltip-visible::after { transform: translateY(0); }
.icon-button[aria-disabled="true"] { color: #6e747d; cursor: default; }
.icon-button[aria-disabled="true"]:hover { background: #292d33; }
.topbar { height: 46px; display: flex; flex: none; align-items: center; gap: 18px; padding: 0 12px; border-bottom: 1px solid var(--line); background: #181a1f; }
.brand { display: flex; align-items: center; gap: 7px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.brand-icon { width: 27px; height: 27px; flex: none; border-radius: 7px; }
.brand strong { font-size: 13px; }
.brand span { color: #777e89; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.project-switcher { position: relative; }
.project-browser-trigger { min-width: 140px; max-width: min(280px, 25vw); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 5px 8px; background: transparent; text-align: left; }
.project-browser-trigger .ui-icon { width: 17px; height: 17px; color: #b5bbc4; }
#current-project-name { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.project-browser { width: min(520px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 58px)); position: absolute; z-index: 1000; top: calc(100% + 8px); left: 0; overflow: hidden; border: 1px solid #505762; border-radius: 7px; background: #202329; box-shadow: 0 14px 42px #000d; }
.project-browser-heading { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 12px; background: #292d34; box-shadow: inset 0 -1px #3a4048; }
.project-browser-heading > div:first-child { display: grid; gap: 2px; }
.project-browser-heading strong { color: #f0f2f5; font-size: 15px; letter-spacing: .01em; }
.project-browser-heading span { color: #858c96; font-size: 10px; }
.project-storage-details { position: relative; color: #858c96; font-size: 10px; }
.project-storage-details summary { cursor: help; list-style: none; }
.project-storage-details summary::-webkit-details-marker { display: none; }
.project-storage-details summary::after { content: ' ⓘ'; color: #a1a8b1; }
.project-storage-details p { width: min(290px, 70vw); position: absolute; z-index: 5; top: calc(100% + 7px); left: -7px; margin: 0; padding: 8px 9px; border: 1px solid #4a515b; border-radius: 5px; background: #191c21; box-shadow: 0 7px 20px #000b; color: #c6cbd2; font-size: 10px; font-weight: 500; line-height: 1.4; }
.project-browser-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.project-browser-heading-actions button { padding: 5px 8px; font-size: 10px; }
.project-list { max-height: min(490px, calc(100vh - 132px)); padding: 7px 5px 5px; overflow-y: auto; }
.project-row { min-height: 57px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; position: relative; border-bottom: 1px solid #32373f; }
.project-row:last-child { border-bottom: 0; }
.project-row-open { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 3px 8px; padding: 8px 10px; border-color: transparent; background: transparent; text-align: left; }
.project-row-open strong { overflow: hidden; color: #e7e9ed; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.project-current { color: #77bd8f; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.project-row-metadata { grid-column: 1 / -1; color: #858c96; font-size: 9px; }
.project-row-menu-trigger { width: 40px; height: 36px; align-self: center; margin-right: 4px; padding: 0; border-color: transparent; background: transparent; color: #9198a2; font-size: 10px; letter-spacing: 1px; touch-action: manipulation; }
.project-row-menu-trigger:hover, .project-row-menu-trigger[aria-expanded="true"] { border-color: #464d57; background: #30353c; color: #fff; }
.project-action-menu { min-width: 128px; display: grid; position: fixed; z-index: 1200; padding: 4px; border: 1px solid #505762; border-radius: 6px; background: #24282e; box-shadow: 0 8px 24px #000c; }
.project-action-menu button { min-height: 38px; padding: 7px 10px; border-color: transparent; background: transparent; font-size: 11px; text-align: left; touch-action: manipulation; }
.project-action-menu [data-project-action="delete"] { color: #ffaea5; }
.project-rename-form { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px; padding: 7px 4px 7px 9px; }
.project-rename-form input { min-width: 0; padding: 6px; }
.project-rename-form button { padding: 5px 7px; font-size: 10px; }
.project-browser[aria-busy="true"] { opacity: .7; pointer-events: none; }
.toolbar { display: flex; gap: 6px; }
.toolbar .history-button { width: 32px; min-width: 32px; height: 32px; border-color: transparent; background: transparent; color: #a1a8b1; }
.toolbar .history-button:hover { border-color: transparent; background: #ffffff0b; color: #eef0f3; }
.toolbar .history-button:focus-visible { outline: 1px solid #73b9d5; outline-offset: -2px; background: #ffffff0b; color: #f1f3f5; }
.toolbar .history-button:disabled, .toolbar .history-button:disabled:hover { border-color: transparent; background: transparent; color: #555b64; cursor: default; }
.toolbar .history-icon { width: 19px; height: 19px; stroke-width: 2; }
.toolbar #export-open { margin-left: 3px; }
#status { margin-left: auto; color: #9ca3ad; font-size: 12px; max-width: 35vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.storage-durability-indicator { flex: none; padding: 3px 6px; border: 1px solid #66523a; border-radius: 4px; color: #c8aa80; font-size: 9px; white-space: nowrap; }
.storage-durability-indicator[hidden] { display: none; }
.app-menu-shell { position: relative; flex: none; }
.app-menu-trigger { width: 44px; height: 34px; display: grid; grid-template-columns: 22px 10px; place-content: center; align-items: center; gap: 1px; padding: 0; border-color: transparent; background: transparent; color: #9ba2ac; }
.app-menu-trigger:hover, .app-menu-trigger[aria-expanded="true"] { border-color: transparent; background: #ffffff0c; color: #edf0f3; }
.app-menu-trigger:focus-visible { outline: 1px solid #73b9d5; outline-offset: -2px; }
.app-menu-account-icon { width: 21px; height: 21px; }
.app-menu-chevron { width: 12px; height: 12px; transition: transform .14s ease; }
.app-menu-trigger[aria-expanded="true"] .app-menu-chevron { transform: rotate(180deg); }
.app-menu { width: 252px; position: absolute; z-index: 1650; top: calc(100% + 7px); right: 0; overflow: hidden; border: 1px solid #505762; border-radius: 7px; background: #202329; box-shadow: 0 14px 38px #000d; }
.app-menu-heading { min-height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #3a4048; background: #292d34; }
.app-menu-heading > span, .app-menu a > span { min-width: 0; display: grid; gap: 2px; }
.app-menu-heading strong { color: #f0f2f5; font-size: 13px; }
.app-menu small { color: #858c96; font-size: 9px; font-weight: 500; line-height: 1.3; }
#app-menu-close { display: none; }
.app-menu-group { display: grid; padding: 5px; }
.app-menu-group + .app-menu-group { border-top: 1px solid #343941; }
.app-menu-group-label { padding: 4px 7px 3px; color: #777f89; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.app-menu a { min-height: 48px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px; border-radius: 4px; color: #d9dde3; text-decoration: none; }
.app-menu a:hover, .app-menu a:focus-visible { outline: 0; background: #30353c; color: #fff; }
.app-menu a > .ui-icon { width: 20px; height: 20px; color: #aeb5be; }
.app-menu a:hover > .ui-icon, .app-menu a:focus-visible > .ui-icon { color: #ffad73; }
.app-menu a strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.app-menu a > i { color: #757d87; font-size: 18px; font-style: normal; }
.app-menu-backdrop { display: none; }
.runtime-warning { padding: 9px 14px; border-bottom: 1px solid #a43f3f; background: #521f24; color: #ffd2d2; font-size: 13px; font-weight: 700; text-align: center; }
.storage-durability-warning { min-height: 38px; display: flex; flex: none; align-items: center; justify-content: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid #8a6536; background: #403321; color: #ffe0ae; font-size: 12px; line-height: 1.35; text-align: center; }
.storage-durability-warning[hidden] { display: none; }
.storage-durability-warning.critical { border-color: #a43f3f; background: #521f24; color: #ffd2d2; }
.storage-durability-warning button { flex: none; padding: 4px 8px; border-color: #a57a42; background: #594328; color: #fff1d8; font-size: 11px; }
.workspace { min-height: 0; display: grid; flex: 1; grid-template: minmax(260px, 48%) 1fr / minmax(220px, 24%) 1fr minmax(220px, 24%); gap: 1px; background: #08090b; }
.panel { min-height: 0; background: var(--panel); overflow: hidden; }
.panel-title { height: 34px; display: flex; align-items: center; padding: 0 10px; background: #24272d; border-bottom: 1px solid var(--line); text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.panel-title #preview-resolution { margin-left: auto; color: #858c96; }
.preview-progress { max-width: calc(100% - 28px); position: absolute; z-index: 64; bottom: 10px; left: 50%; padding: 6px 8px; border: 1px solid #536473; border-radius: 5px; background: #17242de8; color: #cbe8f8; font-size: 10px; pointer-events: none; transform: translateX(-50%); }
.preview-panel > .panel-title .panel-title-label, .inspector-panel > .panel-title { display: none; }
.mobile-sheet-heading, .mobile-sheet-close, #mobile-sheet-backdrop, #mobile-action-dock, .mobile-asset-placement { display: none; }
.media-panel { display: flex; flex-direction: column; }
.source-tabs { height: 34px; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-bottom: 1px solid var(--line); background: #24272d; }
.source-tab { padding: 3px 8px; border-color: transparent; background: transparent; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.source-tab.active { border-color: #555d68; background: #31363e; color: #fff; }
.source-panel { min-height: 0; display: flex; flex: 1; flex-direction: column; }
.drop-zone { margin: 10px; min-height: 72px; border: 1px dashed #59606b; background: #202329; color: #c9ced6; }
.media-panel.has-media .drop-zone { min-height: 34px; padding: 5px; font-size: 0; }
.media-panel.has-media .drop-zone br, .media-panel.has-media .drop-zone span { display: none; }
.media-panel.has-media .drop-zone::after { content: 'Import media'; font-size: 12px; }
.drop-zone.dragover { border-color: var(--accent); background: #30261f; }
.drop-zone span { color: #7f8792; font-size: 11px; }
#relink-media { margin: 0 10px 10px; border-color: #9a633f; color: #ffad73; }
.media-list { overflow: auto; padding: 0 8px 10px; }
.media-import-progress { margin: 0 10px 9px; padding: 7px 9px; border: 1px solid #486274; border-radius: 4px; background: #1c2c36; color: #bce7ff; font-size: 10px; line-height: 1.4; }
.asset-usage { margin-top: 2px; color: #e7ad82; font-size: 9px; }
.text-source-panel { gap: 8px; padding: 10px; overflow-y: auto; }
.text-type-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 2px; border-radius: 5px; background: #17191d; }
.text-type-tabs button { min-height: 30px; padding: 4px 8px; border-color: transparent; background: transparent; font-size: 11px; }
.text-type-tabs button.active { border-color: #565d68; background: #30353d; color: #fff; }
.text-type-browser { display: grid; gap: 8px; }
.text-add-card { display: grid; min-height: 74px; align-content: center; gap: 5px; text-align: left; cursor: grab; }
.text-add-card strong { font-size: 15px; }
.text-add-card span, .source-note { color: #8d949f; font-size: 10px; line-height: 1.4; }
.text-add-card.primary-card { border-color: #7e5b45; background: linear-gradient(135deg, #34271f, #252930); }
.text-add-card.caption-card { border-color: #52796a; background: linear-gradient(135deg, #1e332d, #252930); }
.text-browser-heading { display: flex; align-items: baseline; justify-content: space-between; margin-top: 5px; color: #d9dde3; font-size: 11px; }
.text-browser-heading span { color: #858c96; font-size: 9px; }
.text-effect-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.text-effect-card { min-height: 54px; padding: 6px; overflow: hidden; color: #fff; font-size: 11px; font-weight: 700; text-align: left; text-shadow: 0 1px 3px #000; }
.text-effect-card span { display: block; margin-top: 4px; color: #d8dce2; font-size: 8px; font-weight: 500; text-transform: uppercase; }
.text-effect-card[data-mode="0"] { background: #2d3138; }
.text-effect-card[data-mode="1"] { background: linear-gradient(135deg, #ffd166, #ff4e8d); }
.text-effect-card[data-mode="2"] { border-color: #00d9ff; background: #102f3d; box-shadow: inset 0 0 14px #00d9ff66; }
.text-effect-card[data-mode="3"] { background: linear-gradient(135deg, #3b260e, #e7b94c, #6e4212); }
.text-effect-card[data-mode="4"] { background: linear-gradient(#eef4ff, #34445c 45%, #fff 55%, #526179); }
.text-effect-card[data-mode="5"] { background: repeating-linear-gradient(120deg, #ece7dc, #ece7dc 8px, #8fa7b5 9px, #ece7dc 11px); color: #18242b; text-shadow: none; }
.text-effect-card[data-mode="6"] { background: #343938; color: #f2f0df; }
.text-effect-card[data-mode="7"] { background: #4a2525; color: #ff8e86; }
.text-effect-card[data-mode="8"] { background: linear-gradient(90deg, #00ecff 0 32%, #171b23 32% 65%, #ff2da6 65%); }
.asset { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 3px 0; padding: 6px; background: #252930; border: 1px solid transparent; border-radius: 3px; cursor: grab; }
.asset:hover { border-color: #4b515c; }
.asset-icon { display: grid; height: 32px; place-items: center; overflow: hidden; border-radius: 3px; background: #343a43; color: var(--accent); font-weight: 700; }
.asset-thumbnail { width: 100%; height: 100%; display: block; object-fit: contain; background: #111318; }
.asset-thumbnail[hidden], .asset-kind[hidden] { display: none; }
.asset-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.asset-meta { color: #8d949f; font-size: 10px; }
.asset-storage { min-height: 14px; color: #6fae83; font-size: 10px; }
.asset-remove { padding: 2px 7px; color: #969da7; font-size: 16px; cursor: pointer; }
.asset-actions { display: grid; justify-items: center; gap: 2px; }
.asset-download, .asset-relink { padding: 2px 4px; border-color: transparent; background: transparent; color: #8fbda0; font-size: 9px; text-decoration: underline; }
.asset-retry { padding: 0; border: 0; background: transparent; color: #ffad73; font-size: 10px; text-decoration: underline; }
.storage-progress { margin: 7px 0 0; color: #ffad73; line-height: 1.4; }
.preview-panel { display: flex; flex-direction: column; }
.preview-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 14px; position: relative; background: #090a0c; overflow: hidden; }
.preview-stage.hand-active { cursor: grab; }
.preview-stage.hand-active.panning { cursor: grabbing; }
.preview-stage.visual-animation-active #preview-viewport { box-shadow: 0 0 0 3px #70d7ff, 0 0 18px #70d7ff77; }
#preview-viewport { --viewer-inverse-zoom: 1; isolation: isolate; position: relative; width: 270px; height: 480px; flex: none; transform-origin: center; }
#preview-canvas { display: block; position: relative; z-index: 1; width: 100%; height: 100%; background: #050506; outline: 2px solid #727983; box-shadow: 0 0 0 3px #050608, 0 8px 24px #000c; }
#motion-path-overlay { display: block; position: absolute; z-index: 40; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#motion-path-handles { position: absolute; z-index: 41; inset: 0; pointer-events: none; }
.motion-keyframe-point { position: absolute; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; transform: translate(-50%, -50%); cursor: move; pointer-events: auto; touch-action: none; }
.motion-keyframe-point::before { content: ''; position: absolute; inset: 8px; border: 2px solid #e9faff; border-radius: 50%; background: #1c708d; box-shadow: 0 0 0 1px #10252e, 0 0 7px #70d7ffaa; }
.motion-keyframe-point.current::before { background: #ff8a4c; }
.motion-keyframe-point:only-child::before { inset: 5px; border-width: 3px; box-shadow: 0 0 0 2px #10252e, 0 0 12px #70d7ff; }
.motion-keyframe-point:only-child::after { content: ''; position: absolute; inset: 1px; border: 1px dashed #70d7ff; border-radius: 50%; }
.motion-keyframe-point:hover, .motion-keyframe-point:focus-visible { background: transparent; outline: none; }
.motion-keyframe-point:hover::before, .motion-keyframe-point:focus-visible::before { inset: 6px; border-color: #fff; }
#visual-animation-indicator { position: absolute; z-index: 42; padding: 3px 6px; border: 1px solid #70d7ff; border-radius: 3px; background: #10252edd; box-shadow: 0 0 8px #70d7ff88; color: #dff8ff; font-size: 9px; font-weight: 800; letter-spacing: .06em; pointer-events: none; text-transform: uppercase; }
#transform-box { position: absolute; z-index: 30; border: calc(1.5px * var(--viewer-inverse-zoom)) solid #ffad73; box-shadow: 0 0 0 calc(1px * var(--viewer-inverse-zoom)) #000b; cursor: move; pointer-events: auto; transform-origin: center; }
#text-edit-overlay { position: absolute; z-index: 50; min-width: 1px; min-height: 1em; margin: 0; padding: 0; border: 0; outline: calc(1.5px * var(--viewer-inverse-zoom)) dashed #ffad73; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: #fff; white-space: pre; overflow: visible; transform-origin: center; }
#text-edit-overlay::selection, #text-edit-overlay *::selection { background: #e8793a80; }
#timeline-text-editor { position: fixed; z-index: 1200; box-sizing: border-box; min-width: 220px; padding: 6px; border: 2px solid #ffad73; border-radius: 6px; background: #202329; box-shadow: 0 10px 28px #000c; -webkit-user-select: text; user-select: text; }
#timeline-text-edit-overlay { display: block; box-sizing: border-box; width: 100%; min-height: 68px; max-height: min(180px, 40vh); padding: 8px; resize: vertical; border: 1px solid #4b515b; border-radius: 3px; outline: 0; background: #17191d; color: #f1f3f6; font: 16px/1.35 system-ui, sans-serif; }
#timeline-text-edit-overlay::selection { background: #e8793aaa; }
.transform-handle, .rotation-handle { position: absolute; width: calc(12px * var(--viewer-inverse-zoom)); height: calc(12px * var(--viewer-inverse-zoom)); border: calc(1px * var(--viewer-inverse-zoom)) solid white; border-radius: 50%; background: var(--accent); }
.transform-handle.top-left { top: calc(-6px * var(--viewer-inverse-zoom)); left: calc(-6px * var(--viewer-inverse-zoom)); cursor: nwse-resize; }
.transform-handle.top-right { top: calc(-6px * var(--viewer-inverse-zoom)); right: calc(-6px * var(--viewer-inverse-zoom)); cursor: nesw-resize; }
.transform-handle.bottom-left { bottom: calc(-6px * var(--viewer-inverse-zoom)); left: calc(-6px * var(--viewer-inverse-zoom)); cursor: nesw-resize; }
.transform-handle.bottom-right { right: calc(-6px * var(--viewer-inverse-zoom)); bottom: calc(-6px * var(--viewer-inverse-zoom)); cursor: nwse-resize; }
.rotation-stem { position: absolute; left: 50%; bottom: calc(-31px * var(--viewer-inverse-zoom)); width: calc(1px * var(--viewer-inverse-zoom)); height: calc(25px * var(--viewer-inverse-zoom)); background: #ffad73; transform: translateX(-50%); pointer-events: none; }
.crop-handle { display: none; }
.rotation-handle { left: 50%; bottom: calc(-40px * var(--viewer-inverse-zoom)); transform: translateX(-50%); cursor: crosshair; }
.preview-panel:fullscreen { width: 100vw; height: 100vh; background: #090a0c; }
.preview-panel:fullscreen .panel-title { display: none; }
.inspector-panel { overflow-y: auto; }
.settings-section { padding: 9px; border-bottom: 1px solid var(--line); font-size: 11px; }
.settings-section summary { cursor: pointer; color: #d4d8de; font-weight: 700; }
/* Project settings becomes the desktop inspector's aligned, meaningful top header. */
body:not(.is-mobile-workspace) #project-properties { padding: 0 9px 9px; }
body:not(.is-mobile-workspace) #project-properties > summary { height: 34px; margin: 0 -9px; padding: 9px 10px 8px; border-bottom: 1px solid var(--line); background: #24272d; text-transform: uppercase; letter-spacing: .06em; }
body:not(.is-mobile-workspace) #project-properties:not([open]) { padding-bottom: 0; }
.settings-note { color: #858c96; line-height: 1.4; }
.property-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 9px 0; }
.property-grid label { display: grid; gap: 3px; color: #999fa9; }
.property-grid .wide { grid-column: 1 / -1; }
.property-grid input, .property-grid select { min-width: 0; width: 100%; padding: 4px; }
.property-grid textarea { min-width: 0; width: 100%; padding: 5px; resize: vertical; }
.property-grid label > span { display: flex; align-items: center; gap: 6px; }
.property-grid label > span output { min-width: 42px; color: #d9dde3; text-align: right; }
.property-label { color: #999fa9; }
.animated-property { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px; color: #999fa9; }
.animated-property > input { grid-column: 1 / -1; }
.animated-property.active { color: #ffd0b3; }
.animated-property-title { align-self: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keyframe-controls { display: flex; gap: 1px; }
.keyframe-controls button { width: 19px; min-width: 19px; height: 18px; padding: 0; border-color: transparent; background: transparent; color: #7f8792; font-size: 10px; line-height: 16px; }
.keyframe-controls button:hover, .keyframe-controls button:focus-visible { border-color: #525a65; color: #e7ebf0; }
.keyframe-controls [data-keyframe-toggle].keyed { color: #ff9a62; }
.keyframe-controls [data-keyframe-toggle].animated:not(.keyed) { color: #70c8e8; }
.animation-group-actions { display: flex; gap: 5px; margin-top: 8px; }
.animation-group-actions button { flex: 1; padding: 4px 6px; font-size: 10px; }
.visual-animation-toggle { border-color: #40454e; background: #292d33; color: #aeb4bc; box-shadow: none; }
.visual-animation-toggle:hover { border-color: #505762; background: #353a42; color: #d9dde3; }
.visual-animation-toggle.active, .visual-animation-toggle[aria-pressed="true"] { border-color: #70d7ff; background: #173d4b; color: #bcefff; box-shadow: inset 0 0 0 1px #70d7ff77, 0 0 8px #70d7ff44; }
.transform-tool-row { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.transform-key-navigation { display: flex; gap: 2px; }
.transform-key-navigation button { width: 24px; height: 24px; padding: 0; }
.transform-key-navigation #animation-toolbar-toggle.keyed { border-color: #e8793a; color: #ff9a62; }
#visual-animation-status { min-width: 0; color: #929ba6; font-size: 9px; line-height: 1.2; }
.keyframe-settings-back { width: 100%; margin: 7px 0; text-align: left; }
.inspector-panel.keyframe-context > .settings-section:not(#keyframe-settings) { display: none !important; }
.keyframe-settings-title { margin: 7px 0 5px; color: #ffd1b5; font-size: 12px; font-weight: 700; }
.keyframe-time-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 6px; margin: 7px 0; color: #aeb6c0; font-size: 10px; }
.keyframe-time-row input { min-width: 0; color: #cbd3dc; }
.keyframe-settings-navigation, .keyframe-danger-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 7px 0; }
.keyframe-danger-actions button { border-color: #6e4646; color: #ffb8ad; }
.curve-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.curve-presets button { padding: 4px 3px; font-size: 9px; }
.curve-presets button.active { border-color: #e8793a; background: #453027; color: #ffd8c0; }
#animation-curve-canvas { width: 100%; height: 150px; display: block; margin-top: 7px; border: 1px solid #3b424c; background: #171a1e; cursor: crosshair; touch-action: none; }
#animation-curve-canvas.unavailable { cursor: default; }
.bezier-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; margin-top: 6px; }
.bezier-controls label { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 3px; color: #9ba3ad; font-size: 9px; }
.bezier-controls input { width: 100%; min-width: 0; }
.bezier-controls button { grid-column: 1 / -1; }
.font-picker { display: grid; position: relative; gap: 3px; }
.font-picker-trigger { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 7px; width: 100%; padding: 5px 7px; text-align: left; }
.font-picker-trigger > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.font-trigger-state { color: #8fbda0; font-size: 11px; }
.font-picker-popover { position: fixed; z-index: 1000; max-height: calc(100vh - 16px); padding: 6px; border: 1px solid #505762; border-radius: 5px; background: #202329; box-shadow: 0 10px 30px #000b; }
.font-picker-tools { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 5px; margin-bottom: 5px; }
.font-picker-tools input { width: 100%; min-width: 0; padding: 5px 7px; }
.font-picker-tools button { padding: 4px; color: #e4b95e; }
.font-picker-tools button[aria-pressed="true"] { border-color: #c99443; background: #493b27; }
.font-list { height: min(252px, calc(100vh - 80px)); position: relative; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #343941; border-radius: 3px; background: #181b1f; }
.font-list-spacer { position: relative; min-height: 1px; }
.font-list-window { position: absolute; top: 0; right: 0; left: 0; }
.font-row { height: 42px; display: grid; grid-template-columns: minmax(0, 1fr) 52px 28px 28px; align-items: center; gap: 3px; padding: 3px 4px 3px 8px; border-bottom: 1px solid #2d3239; cursor: pointer; }
.font-row:hover, .font-row:focus { outline: 0; background: #30353d; }
.font-row[aria-selected="true"] { box-shadow: inset 3px 0 #e8793a; background: #352d29; }
.font-row-name { overflow: hidden; color: #e3e6eb; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.font-row small { overflow: hidden; color: #777f8a; font-size: 8px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.font-row-icon { width: 26px; height: 26px; padding: 0; border-color: transparent; background: transparent; color: #98a1ad; }
.font-row-icon:disabled { opacity: 1; color: #70a783; cursor: default; }
.font-row-icon.font-favorite { color: #e4b95e; font-size: 15px; }
.font-list-empty { padding: 24px 8px; color: #777f8a; font-size: 11px; text-align: center; }
.text-advanced { padding: 3px 0; border-top: 1px solid #333840; border-bottom: 1px solid #333840; }
.text-advanced > summary { padding: 4px 0; color: #aeb4bd; cursor: pointer; }
.text-advanced > .property-grid { padding-top: 6px; }
.control-unavailable { opacity: .45; }
.clip-identity output { overflow: hidden; color: #d9dde3; text-overflow: ellipsis; white-space: nowrap; }
.property-grid .toggle { display: flex; grid-template-columns: auto 1fr; align-items: center; justify-content: start; }
.property-grid .toggle input { width: auto; }
.storage-setting-row { position: relative; display: flex; align-items: center; gap: 5px; }
.storage-setting-row > .toggle { flex: 1; }
.storage-setting-help { position: relative; }
.storage-setting-help summary { display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid #505762; border-radius: 50%; color: #aeb4bd; cursor: help; font-size: 11px; list-style: none; }
.storage-setting-help summary::-webkit-details-marker { display: none; }
.storage-setting-help[open] summary { border-color: #d16c3c; color: #ffad73; }
.storage-setting-help > div { position: absolute; z-index: 100; top: 24px; right: 0; width: min(330px, calc(100vw - 36px)); padding: 9px 10px; border: 1px solid #505762; border-radius: 5px; background: #15171b; box-shadow: 0 9px 25px #000c; color: #d5d9df; font-size: 11px; line-height: 1.45; }
.transport { min-height: 42px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 4px 8px; border-top: 1px solid var(--line); }
.transport-controls, .viewer-tools { display: flex; align-items: center; gap: 5px; }
.transport-controls .transport-icon { width: 16px; height: 16px; pointer-events: none; }
.transport-controls #play-button .transport-icon { width: 18px; height: 18px; }
.viewer-tools.left { justify-content: flex-start; }
.viewer-tools.right { justify-content: flex-end; }
.viewer-tools select { min-width: 66px; max-width: 112px; padding: 5px; font-size: 11px; }
.viewer-tools button { padding: 5px 8px; font-size: 11px; }
#preview-hand[aria-pressed="true"] { border-color: #ffad73; background: #453024; color: #ffd2b4; }
#preview-audio-mute[hidden] { display: none; }
#preview-audio-mute[aria-pressed="true"] { border-color: #e68a52; background: #493127; color: #ffb481; }
#preview-audio-mute[aria-pressed="false"] .preview-audio-off, #preview-audio-mute[aria-pressed="true"] .preview-audio-on { display: none; }
.transport button { min-width: 34px; }
#time-display { margin-left: 10px; min-width: 95px; font: 12px ui-monospace, monospace; }
.timeline-panel { grid-column: 1 / -1; display: flex; flex-direction: column; -webkit-user-select: none; user-select: none; }
.timeline-tools { height: 40px; min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 3px 10px; overflow: visible; border-bottom: 1px solid var(--line); color: #8f969f; font-size: 11px; }
.timeline-action-group, .timeline-connection-actions, .timeline-zoom-controls { display: flex; align-items: center; gap: 4px; }
.timeline-zoom-controls { margin-left: auto; }
.timeline-zoom-controls input { width: clamp(90px, 14vw, 180px); }
.timeline-follow-toggle[aria-pressed="true"] { border-color: #e68a52; background: #493127; color: #ffb481; box-shadow: inset 0 0 0 1px #e68a5266; }
.timeline-tools .has-tooltip::after { top: calc(100% + 7px); bottom: auto; }
/* Desktop tool strips use quiet button chrome so their panel borders remain visually continuous. */
body:not(.is-mobile-workspace) .transport .icon-button, body:not(.is-mobile-workspace) .timeline-tools .icon-button { width: 30px; min-width: 30px; height: 30px; border-color: transparent; background: transparent; color: #9299a3; box-shadow: none; }
body:not(.is-mobile-workspace) .transport .icon-button:hover, body:not(.is-mobile-workspace) .timeline-tools .icon-button:hover { border-color: transparent; background: #ffffff0b; color: #e5e8ec; }
body:not(.is-mobile-workspace) .transport .icon-button:focus-visible, body:not(.is-mobile-workspace) .timeline-tools .icon-button:focus-visible { outline: 1px solid #73b9d5; outline-offset: -2px; background: #ffffff0b; color: #f1f3f5; }
body:not(.is-mobile-workspace) .transport .icon-button[aria-disabled="true"], body:not(.is-mobile-workspace) .timeline-tools .icon-button[aria-disabled="true"], body:not(.is-mobile-workspace) .transport .icon-button:disabled, body:not(.is-mobile-workspace) .timeline-tools .icon-button:disabled { color: #575d66; }
body:not(.is-mobile-workspace) .transport .icon-button[aria-disabled="true"]:hover, body:not(.is-mobile-workspace) .timeline-tools .icon-button[aria-disabled="true"]:hover, body:not(.is-mobile-workspace) .transport .icon-button:disabled:hover, body:not(.is-mobile-workspace) .timeline-tools .icon-button:disabled:hover { background: transparent; color: #575d66; }
body:not(.is-mobile-workspace) #preview-hand[aria-pressed="true"], body:not(.is-mobile-workspace) #preview-audio-mute[aria-pressed="true"], body:not(.is-mobile-workspace) .timeline-follow-toggle[aria-pressed="true"] { border-color: transparent; background: transparent; color: #ff9f66; filter: drop-shadow(0 0 4px #e8793a88); box-shadow: none; }
body:not(.is-mobile-workspace) .visual-animation-toggle, body:not(.is-mobile-workspace) .visual-animation-toggle:hover { border-color: transparent; box-shadow: none; }
body:not(.is-mobile-workspace) .visual-animation-toggle.active, body:not(.is-mobile-workspace) .visual-animation-toggle[aria-pressed="true"] { border-color: transparent; background: transparent; color: #72ddff; filter: drop-shadow(0 0 4px #4acdf688); box-shadow: none; }
.sequencer { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.timeline-scroll { position: absolute; inset: 0; overflow: auto; background: #14161a; }
.timeline-content { position: relative; min-width: 100%; min-height: 100%; width: 1200px; }
.ruler { height: var(--ruler); position: sticky; top: 0; z-index: 8; overflow: hidden; border-bottom: 1px solid #3a3e45; background: #22252a; user-select: none; }
.tick { position: absolute; bottom: 0; height: 8px; border-left: 1px solid #6f7680; color: #9198a2; font: 9px ui-monospace, monospace; padding: 0 0 10px 3px; }
#track-lanes { position: absolute; right: 0; left: 0; display: flex; flex-direction: column; }
.track-lane { height: 54px; position: relative; flex-shrink: 0; border-top: 1px solid #292e35; border-bottom: 1px solid #3a4049; background: #1a1d22; }
.track-lane.title-track { height: 32px; background: #1d1921; }
.track-lane.caption-track { height: 32px; background: #172326; }
.track-lane.audio-track { height: 42px; background: #182019; }
.track-lane.dragover { background: #25231d; }
.track-lane.title-drop-target { box-shadow: inset 0 3px #bd7dca; background: #28202c; }
.track-lane.caption-drop-blocked { box-shadow: inset 0 0 0 2px #c95252; background: #352123; }
.track-lane.dragover::after { content: ''; position: absolute; z-index: 7; top: 2px; bottom: 2px; left: var(--drop-x, 0); width: 2px; background: #ffad73; pointer-events: none; }
.new-overlay-lane { height: 24px; border: 1px dashed transparent; background: transparent; }
.new-overlay-lane.dragover { border-color: #59606b; background: #25231d; }
.timeline-content.overlay-drop-active { box-shadow: inset 0 0 0 1px #59606b; }
.main-track { background: #20242a; box-shadow: inset 0 2px #59616d; }
.track-kind-label { position: absolute; z-index: 0; top: 4px; right: 7px; color: #737b86; font-size: 9px; text-transform: uppercase; pointer-events: none; }
.empty-main-track { border: 1px dashed #59616d; }
.main-track-prompt { position: absolute; inset: 0; display: grid; place-items: center; color: #858d98; font-size: 11px; pointer-events: none; }
.clip { position: absolute; z-index: 1; top: 5px; height: 44px; min-width: 10px; overflow: hidden; border: 1px solid #5688a6; border-radius: 4px; background: #285c78; cursor: grab; user-select: none; }
.clip.audio { border-color: #61a071; background: #356744; }
.clip.image { border-color: #8d79c6; background: #514478; }
.clip.text { border-color: #bd7dca; background: #674173; }
.clip.text { touch-action: none; }
.clip.text.caption { border-color: #66aa9a; background: #315f5c; }
.clip.text.caption.orphan { border-color: #d36565; background: #64383d; }
.title-track .clip, .caption-track .clip { top: 3px; height: 26px; }
.title-track .clip-caption, .caption-track .clip-caption { top: 2px; padding-top: 1px; padding-bottom: 1px; }
.title-track .clip-time, .caption-track .clip-time { display: none; }
.title-track .clip-label, .caption-track .clip-label { line-height: 16px; }
.audio-track .clip { top: 4px; height: 34px; }
.clip.text.connected::before { content: '◆'; position: absolute; z-index: 5; top: 1px; left: 2px; color: #ffe0a8; font-size: 8px; }
.clip.connection-parent, .clip.connection-parent-preview { box-shadow: inset 0 0 0 3px #f0bd6d, 0 0 0 1px #e9b35e99, 0 0 7px #e9b35e66; }
.clip.title-snap-parent { box-shadow: inset 0 0 0 2px #ffd07a, 0 0 8px #d4903c99; }
.clip.selected { border: 2px solid #fff0c8; box-shadow: 0 0 0 1px #e67a3b; }
.clip.dragging { z-index: 20; opacity: .82; }
.clip.audio-muted { border-style: dashed; }
.clip.audio-muted .clip-thumbnails { opacity: .32; }
.clip.audio-muted .clip-caption { max-width: calc(100% - 30px); }
.clip-muted-indicator { position: absolute; z-index: 5; top: 4px; right: 5px; display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #17191de6; color: #ffb481; pointer-events: none; }
.clip-muted-indicator[hidden] { display: none; }
.clip-muted-indicator .ui-icon { width: 12px; height: 12px; stroke-width: 2.2; }
.clip.micro-clip { min-width: 10px; background-image: repeating-linear-gradient(135deg, #285c78 0 3px, #1c455c 3px 6px); }
.clip.micro-clip.audio { background-image: repeating-linear-gradient(135deg, #356744 0 3px, #244b31 3px 6px); }
.clip.micro-clip.image { background-image: repeating-linear-gradient(135deg, #514478 0 3px, #3d345d 3px 6px); }
.clip.micro-clip.text { background-image: repeating-linear-gradient(135deg, #674173 0 3px, #4e3058 3px 6px); }
.clip-thumbnails { position: absolute; inset: 0; overflow: hidden; opacity: .72; pointer-events: none; }
.clip-thumbnails img { position: absolute; top: 0; height: 100%; object-fit: cover; background: #11151a; }
.clip-caption { position: absolute; z-index: 2; top: 3px; left: 4px; max-width: calc(100% - 8px); padding: 2px 4px; border-radius: 3px; background: #080b0eb8; pointer-events: none; }
.clip-label, .clip-time { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; line-height: 13px; text-shadow: 0 1px 2px #000; }
.clip-time { color: #d6eef9; font-size: 9px; line-height: 11px; }
.clip.compact-clip .clip-thumbnails, .clip.compact-clip .clip-time, .clip.compact-clip .clip-streams { display: none; }
.clip.short-clip .clip-time { display: none; }
.clip.micro-clip .clip-caption { display: none; }
.clip-streams { position: absolute; z-index: 3; right: 8px; bottom: 4px; padding: 1px 4px; border-radius: 3px; background: #111a; color: #d9f0df; font-size: 8px; font-weight: 700; pointer-events: none; }
.clip-keyframes { position: absolute; z-index: 6; right: var(--trim-zone, 7px); bottom: 0; left: var(--trim-zone, 7px); height: 16px; pointer-events: none; }
.clip-keyframe { position: absolute; bottom: 0; width: 28px; height: 20px; padding: 0; border: 0; background: transparent; box-shadow: none; transform: translateX(-50%); pointer-events: auto; cursor: pointer; touch-action: none; }
.clip-keyframe::before { content: ''; position: absolute; bottom: 3px; left: 10px; width: 8px; height: 8px; border: 1px solid #fff1cf; border-radius: 1px; background: #e9894f; box-shadow: 0 0 0 1px #101216aa; transform: rotate(45deg); }
.clip-keyframe.aggregate::before { border-color: #cceeff; background: #3e9ebf; }
.clip-keyframe.current::before { background: #fff4bb; box-shadow: 0 0 0 2px #e8783b; }
.clip-keyframe.snap-target::before { width: 11px; height: 11px; bottom: 2px; left: 8px; border-color: #fff7c2; background: #ffd36b; box-shadow: 0 0 0 2px #6a4a1d, 0 0 8px #ffd36b; }
.clip-keyframe:hover, .clip-keyframe:focus-visible { outline: 1px solid #ffd1b555; outline-offset: -2px; }
.clip.animation-mode .clip-keyframes { top: 0; height: auto; }
.clip-keyframe.visual-animation-marker { height: 100%; }
.clip-keyframe.visual-animation-marker::after { content: ''; position: absolute; top: 5px; bottom: 14px; left: 13px; width: 1px; background: #a9d9e666; }
.clip-keyframe.cluster::before { bottom: 4px; left: 7px; border-color: #cceeff; background: #3e9ebf; box-shadow: 3px -3px 0 -1px #235f76, 3px -3px 0 0 #cceeff; }
.clip-keyframe.cluster::after { display: none; }
.keyframe-cluster-count { position: absolute; right: 0; bottom: 11px; min-width: 13px; height: 13px; padding: 0 3px; border: 1px solid #bfeeff; border-radius: 7px; background: #174b60; color: #effbff; font-size: 8px; font-weight: 700; line-height: 11px; text-align: center; text-shadow: 0 1px #000; }
.keyframe-context-menu { position: fixed; z-index: 1400; display: grid; width: 210px; padding: 5px; border: 1px solid #59616c; border-radius: 5px; background: #20242a; box-shadow: 0 12px 30px #000c; }
.keyframe-context-menu button { width: 100%; padding: 6px 8px; border-color: transparent; background: transparent; text-align: left; }
.keyframe-context-menu button:hover, .keyframe-context-menu button:focus-visible { border-color: #59616c; background: #2b3138; }
.keyframe-context-menu button.active { color: #ffd1b5; }
.keyframe-context-menu > button:last-child { color: #ffb4aa; }
.keyframe-context-heading { padding: 5px 8px 3px; color: #8f98a3; font-size: 9px; text-transform: uppercase; }
.keyframe-context-easing { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 4px; border-bottom: 1px solid #373d45; padding-bottom: 5px; }
.keyframe-context-easing button { font-size: 10px; }
.trim-handle { position: absolute; z-index: 4; top: 0; bottom: 0; width: var(--trim-zone, 7px); cursor: ew-resize; }
.trim-handle.left { left: 0; } .trim-handle.right { right: 0; }
.playhead { position: absolute; z-index: 10; top: 0; bottom: 0; left: 0; width: 1px; background: #f05a40; pointer-events: none; }
.playhead span { position: absolute; top: 0; left: -5px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #f05a40; }
.playhead.keyframe-snapped { width: 2px; background: #ffd36b; box-shadow: 0 0 5px #ffd36b; }
.playhead.keyframe-snapped span { border-top-color: #ffd36b; }
.connection-stem { position: absolute; z-index: 6; width: 1px; border-left: 1px solid #e9b35e; pointer-events: none; }
.connection-stem::before { content: ''; position: absolute; top: -3px; left: -3px; width: 5px; height: 5px; border: 1px solid #ffe0a8; background: #75532a; transform: rotate(45deg); }
.connection-stem.preview { border-left-style: dashed; opacity: .85; }
.connection-stem.connection-drag-preview::before { display: none; }
.connection-stem.connection-drag-preview.detach-candidate { border-left-color: #ff8f83; }
.connection-handle { position: absolute; z-index: 9; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: #ffe0a8; transform: translate(-50%, -50%); cursor: crosshair; touch-action: none; }
.connection-handle::before { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 1px; background: #282017; box-shadow: 0 0 0 2px #14161acc; transform: translate(-50%, -50%) rotate(45deg); }
.connection-handle.connected::before { background: #e9b35e; }
.connection-handle:hover, .connection-handle:focus-visible { background: transparent; }
.connection-handle:hover::before, .connection-handle:focus-visible::before, .connection-handle.dragging::before { width: 10px; height: 10px; border-color: #fff1d2; }
.connection-handle.detach-candidate { color: #ff8f83; }
.title-snap-guide { position: absolute; z-index: 8; top: 0; bottom: 0; width: 1px; border-left: 1px dashed #ffd07a; box-shadow: 0 0 5px #d4903c; pointer-events: none; }
dialog { width: min(460px, 90vw); border: 1px solid #50555e; border-radius: 7px; background: #202329; color: inherit; box-shadow: 0 20px 80px #000c; }
dialog::backdrop { background: #08090bbb; }
button.danger { border-color: #a64d49; background: #7e332f; color: #fff; }
.project-confirmation-dialog p { color: #aab0b9; font-size: 12px; line-height: 1.5; }
.project-package-dialog { width: min(600px, 92vw); }
.project-package-dialog > form > p, .project-package-progress-dialog p { color: #aab0b9; font-size: 12px; line-height: 1.5; }
.project-package-selection, .project-package-review { display: grid; max-height: min(420px, 55vh); margin: 12px 0; overflow-y: auto; border: 1px solid #3b414a; border-radius: 5px; }
.project-package-choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 48px; padding: 7px 9px; border-bottom: 1px solid #343941; }
.project-package-choice:last-child { border-bottom: 0; }
.project-package-choice strong, .project-package-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-package-choice small { margin-top: 2px; color: #858c96; font-size: 9px; }
.project-package-readiness { justify-self: end; color: #aab0b9; font-size: 10px; white-space: nowrap; }
.project-package-readiness.ready { color: #8fc9a2; }
.project-package-readiness.blocked { color: #ffad73; }
.project-package-choice select { min-width: 130px; padding: 5px; }
.project-package-selection-status { min-height: 18px; margin: 8px 0 0 !important; }
.project-package-selection-history { margin: 2px 0 8px !important; color: #c5cad1 !important; }
.project-package-selection-missing { max-height: 150px; margin: 8px 0; padding: 8px 10px; overflow-y: auto; border: 1px solid #574638; border-radius: 5px; background: #2a2521; color: #d4bca9; font-size: 11px; line-height: 1.5; }
.project-package-selection-missing ul { margin: 0; padding-left: 18px; }
.project-package-selection-missing small { color: #b99b84; }
.project-package-repair-actions { display: flex; flex-wrap: wrap; gap: 8px; min-height: 30px; }
.project-package-history-confirmation { display: grid; gap: 7px; margin: 8px 0; padding: 9px 10px; border: 1px solid #7b503d; border-radius: 5px; background: #30231e; color: #e8d2c5; font-size: 11px; line-height: 1.4; }
.project-package-history-confirmation[hidden] { display: none; }
.project-package-history-confirmation > div { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.project-package-progress-dialog { width: min(480px, 90vw); }
.project-package-progress-dialog progress { width: 100%; margin: 10px 0 16px; }
#project-package-progress-item { min-height: 18px; overflow-wrap: anywhere; }
.project-package-missing-list { display: grid; max-height: min(420px, 55vh); margin: 12px 0; overflow-y: auto; border: 1px solid #3b414a; border-radius: 5px; }
.project-package-missing-project { padding: 9px; border-bottom: 1px solid #343941; }
.project-package-missing-project:last-child { border-bottom: 0; }
.project-package-missing-project > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project-package-missing-project ul { margin: 7px 0 0; padding-left: 18px; color: #aab0b9; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
#project-conflict-status { min-height: 18px; color: #ffad73; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid label { display: grid; gap: 5px; color: #aab0b9; font-size: 12px; }
.form-grid input, .form-grid select { padding: 7px; width: 100%; }
.export-advanced { margin-top: 14px; }
.export-advanced summary { color: #aab0b9; cursor: pointer; font-size: 12px; }
.export-advanced .form-grid { margin-top: 10px; }
#export-progress { width: 100%; margin-top: 20px; }
#export-note { color: #9299a3; font-size: 12px; }
.export-download { display: block; margin: 10px 0; color: #ff9a62; font-weight: 700; }
.format-warning { margin: 10px 0 0; padding: 7px; border: 1px solid #8f3d3d; border-radius: 4px; background: #3a2020; color: #ff9c9c; font-size: 12px; }
[disabled] { color: #777d85; }
[hidden] { display: none !important; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 1000px) { .workspace { grid-template-columns: 200px 1fr 210px; } .brand span { display: none; } .project-browser-trigger { min-width: 110px; } .transport { grid-template: auto auto / 1fr 1fr; } .transport-controls { grid-column: 1 / -1; grid-row: 1; justify-content: center; } .viewer-tools.left { grid-column: 1; grid-row: 2; } .viewer-tools.right { grid-column: 2; grid-row: 2; } .viewer-tools select { max-width: 88px; } }
@media (pointer: coarse) { .connection-handle { width: 44px; height: 44px; } }

/* Mobile workspace presentation is class-gated so fine-pointer desktop layout and input remain unchanged. */
#mobile-action-dock, #mobile-task-tray, #mobile-viewer-trigger, #mobile-viewer-popover, #mobile-media-status, #mobile-feedback { display: none; }
body.is-mobile-workspace { --mobile-dock-height: 66px; width: 100%; min-width: 0; height: var(--mobile-app-height, 100%); position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; }
.is-mobile-workspace .topbar { height: calc(48px + env(safe-area-inset-top)); min-height: calc(48px + env(safe-area-inset-top)); gap: 8px; padding: env(safe-area-inset-top) 8px 0; }
.is-mobile-workspace .brand, .is-mobile-workspace #status, .is-mobile-workspace .storage-durability-indicator { display: none; }
.is-mobile-workspace .project-switcher { min-width: 0; flex: 1; }
.is-mobile-workspace .project-browser-trigger { width: 100%; min-width: 0; max-width: none; height: 40px; }
.is-mobile-workspace .toolbar { gap: 4px; }
.is-mobile-workspace .toolbar button { min-width: 42px; min-height: 40px; padding: 5px 7px; font-size: 0; touch-action: manipulation; }
.is-mobile-workspace .toolbar .history-button { width: 42px; height: 40px; padding: 0; }
.is-mobile-workspace .toolbar .history-icon { width: 23px; height: 23px; stroke-width: 2.2; }
.is-mobile-workspace .toolbar #export-open { font-size: 11px; }
.is-mobile-workspace .app-menu-trigger { width: 40px; min-width: 40px; height: 40px; display: grid; grid-template-columns: 1fr; padding: 0; touch-action: manipulation; }
.is-mobile-workspace .app-menu-account-icon { width: 24px; height: 24px; }
.is-mobile-workspace .app-menu-chevron { display: none; }
.is-mobile-workspace .app-menu { width: min(520px, 100%); max-height: min(70%, calc(var(--mobile-visible-height, 100vh) - 24px)); position: fixed; z-index: 1650; top: auto; right: 0; bottom: 0; left: 0; margin: auto; padding-bottom: env(safe-area-inset-bottom); overflow-y: auto; border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -14px 42px #000c; }
.is-mobile-workspace .app-menu-heading { min-height: 54px; padding: 7px 10px 7px 16px; }
.is-mobile-workspace #app-menu-close { width: 40px; min-width: 40px; height: 40px; display: grid; padding: 0; border-color: transparent; border-radius: 50%; background: transparent; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.is-mobile-workspace .app-menu-group { padding: 7px; }
.is-mobile-workspace .app-menu-group-label { padding: 6px 9px 4px; }
.is-mobile-workspace .app-menu a { min-height: 58px; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px; touch-action: manipulation; }
.is-mobile-workspace .app-menu a > .ui-icon { width: 23px; height: 23px; }
.is-mobile-workspace .app-menu a strong { font-size: 13px; }
.is-mobile-workspace .app-menu small { font-size: 10px; }
.is-mobile-workspace .app-menu-backdrop { display: block; position: fixed; z-index: 1640; inset: 0; padding: 0; border: 0; border-radius: 0; background: #050609aa; }
.is-mobile-workspace .runtime-warning, .is-mobile-workspace .storage-durability-warning { position: fixed; z-index: 1700; top: calc(48px + env(safe-area-inset-top)); right: 0; left: 0; }
.is-mobile-workspace .workspace { min-height: 0; padding-bottom: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom)); grid-template: minmax(150px, 42%) minmax(0, 1fr) / minmax(0, 1fr); transition: grid-template-rows .18s ease; }
.is-mobile-workspace .preview-panel { grid-row: 1; grid-column: 1; }
.is-mobile-workspace .preview-panel > .panel-title { display: none; }
.is-mobile-workspace .preview-stage { min-height: 0; padding: 7px; touch-action: none; overscroll-behavior: contain; }
.is-mobile-workspace #preview-viewport, .is-mobile-workspace #transform-box, .is-mobile-workspace .transform-handle, .is-mobile-workspace .rotation-handle { touch-action: none; }
.is-mobile-workspace #transform-box { cursor: default; pointer-events: none; }
.is-mobile-workspace #transform-box .transform-handle, .is-mobile-workspace #transform-box .rotation-handle, .is-mobile-workspace #transform-box .rotation-stem { display: none; }
.is-mobile-workspace[data-mobile-mode="transform"] #transform-box, .is-mobile-workspace[data-mobile-mode="animate"] #transform-box { cursor: move; pointer-events: auto; }
.is-mobile-workspace[data-mobile-mode="transform"] #transform-box .transform-handle, .is-mobile-workspace[data-mobile-mode="transform"] #transform-box .rotation-handle, .is-mobile-workspace[data-mobile-mode="transform"] #transform-box .rotation-stem, .is-mobile-workspace[data-mobile-mode="animate"] #transform-box .transform-handle, .is-mobile-workspace[data-mobile-mode="animate"] #transform-box .rotation-handle, .is-mobile-workspace[data-mobile-mode="animate"] #transform-box .rotation-stem { display: block; }
.is-mobile-workspace .transform-handle, .is-mobile-workspace .rotation-handle { width: calc(26px * var(--viewer-inverse-zoom)); height: calc(26px * var(--viewer-inverse-zoom)); border-width: calc(2px * var(--viewer-inverse-zoom)); }
.is-mobile-workspace .transform-handle.top-left { top: calc(-13px * var(--viewer-inverse-zoom)); left: calc(-13px * var(--viewer-inverse-zoom)); }
.is-mobile-workspace .transform-handle.top-right { top: calc(-13px * var(--viewer-inverse-zoom)); right: calc(-13px * var(--viewer-inverse-zoom)); }
.is-mobile-workspace .transform-handle.bottom-left { bottom: calc(-13px * var(--viewer-inverse-zoom)); left: calc(-13px * var(--viewer-inverse-zoom)); }
.is-mobile-workspace .transform-handle.bottom-right { right: calc(-13px * var(--viewer-inverse-zoom)); bottom: calc(-13px * var(--viewer-inverse-zoom)); }
.is-mobile-workspace .rotation-handle { bottom: calc(-47px * var(--viewer-inverse-zoom)); }
.is-mobile-workspace .transport { min-height: 48px; display: flex; justify-content: center; padding: 3px 6px; }
.is-mobile-workspace .viewer-tools { display: none; }
.is-mobile-workspace .transport-controls { min-width: 0; justify-content: center; gap: 3px; }
.is-mobile-workspace .transport-controls button { min-width: 42px; min-height: 40px; padding: 4px; touch-action: manipulation; }
.is-mobile-workspace #time-display { min-width: 80px; margin-left: 4px; font-size: 10px; }
.is-mobile-workspace .timeline-panel { grid-row: 2; grid-column: 1; }
.is-mobile-workspace .timeline-tools { height: 42px; min-height: 42px; padding: 3px 6px; overflow-x: auto; scrollbar-width: none; }
.is-mobile-workspace .timeline-tools::-webkit-scrollbar { display: none; }
.is-mobile-workspace .timeline-zoom-controls input { display: none; }
.is-mobile-workspace .timeline-zoom-controls { margin-left: auto; }
.is-mobile-workspace .timeline-scroll, .is-mobile-workspace .timeline-content, .is-mobile-workspace .track-lane, .is-mobile-workspace .clip, .is-mobile-workspace .trim-handle { touch-action: none; }
.is-mobile-workspace .sequencer { margin-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right)); border-right: 1px solid #2d3239; border-left: 1px solid #2d3239; }
.is-mobile-workspace .timeline-scroll { overscroll-behavior: contain; }
.is-mobile-workspace .clip.selected .trim-handle { width: min(48px, 45%); background: none; }
.is-mobile-workspace .clip.selected .trim-handle::after { content: '›'; width: 3px; position: absolute; top: 5px; bottom: 5px; left: 17px; background: #ff9a62; color: #fff; font-size: 19px; font-style: normal; font-weight: 900; line-height: 30px; text-indent: 5px; text-shadow: 0 1px 2px #000; }
.is-mobile-workspace .clip.selected .trim-handle.right::after { content: '‹'; right: 17px; left: auto; text-indent: -9px; }
.is-mobile-workspace[data-mobile-mode="trim"] .clip.selected { box-shadow: 0 0 0 2px #ffad73, 0 0 10px #e8793a88; }
.is-mobile-workspace .connection-handle { width: 48px; height: 48px; }
.is-mobile-workspace .media-panel, .is-mobile-workspace .inspector-panel { width: min(520px, 100%); max-height: min(calc(var(--mobile-visible-height, 100vh) - 24px), 76%); display: flex; position: fixed; z-index: 1510; right: 0; bottom: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom) + var(--mobile-keyboard-inset, 0px)); left: 0; flex-direction: column; margin: auto; overflow: hidden auto; border: 1px solid #4c535d; border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -14px 42px #000c; transform: translateY(calc(100% + var(--mobile-dock-height) + 30px)); transition: transform .18s ease; }
.is-mobile-workspace[data-mobile-sheet="media"] .media-panel, .is-mobile-workspace[data-mobile-sheet="inspector"] .inspector-panel { transform: translateY(0); }
.is-mobile-workspace .mobile-sheet-heading { min-height: 48px; display: flex; flex: none; align-items: center; justify-content: space-between; padding: 6px 10px 6px 16px; border-bottom: 1px solid var(--line); background: #292d34; }
.is-mobile-workspace .mobile-sheet-close { width: 40px; min-width: 40px; height: 40px; display: grid; padding: 0; border-color: transparent; border-radius: 50%; background: transparent; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.is-mobile-workspace .inspector-panel > .panel-title { height: 48px; display: flex; flex: none; align-items: center; justify-content: space-between; padding: 5px 10px 5px 16px; }
.is-mobile-workspace .settings-section { flex: none; padding: 12px; font-size: 12px; }
.is-mobile-workspace .property-grid input, .is-mobile-workspace .property-grid select, .is-mobile-workspace .property-grid textarea { min-height: 42px; font-size: 16px; }
.is-mobile-workspace .source-tabs { height: 46px; flex: none; }
.is-mobile-workspace .source-tab, .is-mobile-workspace .text-type-tabs button { min-height: 38px; touch-action: manipulation; }
.is-mobile-workspace .drop-zone { min-height: 52px; touch-action: manipulation; }
.is-mobile-workspace .drop-zone { font-size: 0; }
.is-mobile-workspace .drop-zone br, .is-mobile-workspace .drop-zone span { display: none; }
.is-mobile-workspace .drop-zone::after { content: 'Import from device'; font-size: 13px; }
.is-mobile-workspace .media-list { padding-bottom: 18px; }
.is-mobile-workspace .asset { grid-template-columns: 46px minmax(0, 1fr) auto; min-height: 70px; cursor: default; }
.is-mobile-workspace .asset-icon { height: 36px; }
.is-mobile-workspace .mobile-asset-placement { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.is-mobile-workspace .mobile-asset-placement button { min-height: 42px; padding: 5px; font-size: 11px; touch-action: manipulation; }
.is-mobile-workspace #mobile-sheet-backdrop { display: block; position: fixed; z-index: 1500; inset: 0; padding: 0; border: 0; border-radius: 0; background: #050609aa; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.is-mobile-workspace.mobile-sheet-open #mobile-sheet-backdrop { opacity: 1; pointer-events: auto; }
.is-mobile-workspace #mobile-action-dock { height: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom)); display: block; position: fixed; z-index: 1520; right: 0; bottom: var(--mobile-keyboard-inset, 0px); left: 0; padding: 4px max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left)); border-top: 1px solid #3b4149; background: #1d2025f5; box-shadow: 0 -5px 18px #0008; }
.is-mobile-workspace .mobile-actions { height: 58px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(58px, 1fr); overflow-x: auto; scrollbar-width: none; }
.is-mobile-workspace .mobile-actions::-webkit-scrollbar { display: none; }
.is-mobile-workspace .mobile-actions button { min-width: 58px; min-height: 54px; display: grid; place-items: center; gap: 1px; padding: 3px 5px; border-color: transparent; background: transparent; font-size: 10px; touch-action: manipulation; }
.is-mobile-workspace .mobile-actions button span { font-size: 19px; line-height: 21px; }
.is-mobile-workspace .mobile-actions-selection { display: none; }
.is-mobile-workspace.has-mobile-selection .mobile-actions-project { display: none; }
.is-mobile-workspace.has-mobile-selection .mobile-actions-selection { display: grid; }
.is-mobile-workspace .mobile-actions [aria-pressed="true"] { color: #ffb481; box-shadow: inset 0 0 0 1px #e68a52; background: #493127; }
.is-mobile-workspace #mobile-task-tray { min-height: 54px; display: none; position: fixed; z-index: 1518; right: max(4px, env(safe-area-inset-right)); bottom: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom) + var(--mobile-keyboard-inset, 0px)); left: max(4px, env(safe-area-inset-left)); padding: 5px; overflow-x: auto; border: 1px solid #454c56; border-bottom: 0; border-radius: 10px 10px 0 0; background: #24282ef5; box-shadow: 0 -8px 24px #0009; scrollbar-width: none; }
.is-mobile-workspace[data-mobile-mode="trim"] #mobile-task-tray, .is-mobile-workspace[data-mobile-mode="transform"] #mobile-task-tray, .is-mobile-workspace[data-mobile-mode="crop"] #mobile-task-tray, .is-mobile-workspace[data-mobile-mode="animate"] #mobile-task-tray { display: block; }
.is-mobile-workspace.mobile-sheet-open #mobile-task-tray { display: none; }
.is-mobile-workspace .mobile-task-controls { min-width: max-content; display: none; align-items: center; gap: 5px; }
.is-mobile-workspace[data-mobile-mode="trim"] [data-mobile-task="trim"], .is-mobile-workspace[data-mobile-mode="transform"] [data-mobile-task="transform"], .is-mobile-workspace[data-mobile-mode="crop"] [data-mobile-task="crop"], .is-mobile-workspace[data-mobile-mode="animate"] [data-mobile-task="animate"] { display: flex; }
.is-mobile-workspace .mobile-task-controls strong { padding: 0 6px; color: #ffd0b2; font-size: 11px; }
.is-mobile-workspace .mobile-task-controls span { max-width: 180px; color: #aab1ba; font-size: 10px; }
.is-mobile-workspace .mobile-task-controls output { padding: 0 4px; color: #dce1e7; font: 10px ui-monospace, monospace; white-space: nowrap; }
.is-mobile-workspace .mobile-task-controls button, .is-mobile-workspace .mobile-task-controls select { min-height: 42px; padding: 5px 10px; touch-action: manipulation; }
.is-mobile-workspace[data-mobile-mode="crop"] #transform-box { border-style: dashed; border-color: #82e3ff; pointer-events: auto; }
.is-mobile-workspace[data-mobile-mode="crop"] .crop-handle { width: calc(34px * var(--viewer-inverse-zoom)); height: calc(34px * var(--viewer-inverse-zoom)); display: block; position: absolute; border: calc(2px * var(--viewer-inverse-zoom)) solid #fff; border-radius: 5px; background: #1787a8; touch-action: none; }
.is-mobile-workspace .crop-handle.crop-left { top: 50%; left: calc(-17px * var(--viewer-inverse-zoom)); transform: translateY(-50%); }
.is-mobile-workspace .crop-handle.crop-right { top: 50%; right: calc(-17px * var(--viewer-inverse-zoom)); transform: translateY(-50%); }
.is-mobile-workspace .crop-handle.crop-top { top: calc(-17px * var(--viewer-inverse-zoom)); left: 50%; transform: translateX(-50%); }
.is-mobile-workspace .crop-handle.crop-bottom { bottom: calc(-17px * var(--viewer-inverse-zoom)); left: 50%; transform: translateX(-50%); }
.is-mobile-workspace.mobile-keyboard-open #mobile-action-dock { display: none; }
.is-mobile-workspace.mobile-keyboard-open #mobile-task-tray { display: none; }
.is-mobile-workspace #mobile-viewer-trigger { width: 40px; min-width: 40px; height: 40px; display: grid; position: absolute; z-index: 62; top: 7px; right: max(7px, env(safe-area-inset-right)); place-items: center; padding: 0; border-color: #525963; border-radius: 50%; appearance: none; background: #20242abf; color: #cbd1d8; line-height: 1; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; }
.is-mobile-workspace #mobile-viewer-trigger .ui-icon { width: 21px; height: 21px; }
.is-mobile-workspace #mobile-viewer-trigger:hover { background: #20242abf; }
.is-mobile-workspace #mobile-viewer-trigger:active { background: #ffffff18; transform: scale(.94); }
.is-mobile-workspace #mobile-viewer-trigger:focus-visible { outline: 2px solid #ffad73; outline-offset: 2px; }
.is-mobile-workspace[data-mobile-mode="viewer"] #mobile-viewer-trigger { border-color: #e8793a; color: #ffbb8e; }
.is-mobile-workspace #mobile-viewer-popover { display: none; position: absolute; z-index: 61; top: 51px; right: max(7px, env(safe-area-inset-right)); grid-auto-flow: column; grid-auto-columns: 42px; gap: 2px; padding: 4px; border: 1px solid #454c56; border-radius: 24px; background: #20242af2; box-shadow: 0 8px 24px #000a; }
.is-mobile-workspace[data-mobile-mode="viewer"] #mobile-viewer-popover { display: grid; }
.is-mobile-workspace #mobile-viewer-popover button { width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0; border-color: transparent; border-radius: 50%; background: transparent; color: #cbd1d8; box-shadow: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.is-mobile-workspace #mobile-viewer-popover button:hover { background: transparent; }
.is-mobile-workspace #mobile-viewer-popover button:active { background: #ffffff18; color: #fff; transform: scale(.93); }
.is-mobile-workspace #mobile-viewer-popover button:focus-visible { outline: 2px solid #ffad73; outline-offset: -2px; }
.is-mobile-workspace #mobile-viewer-popover .ui-icon { width: 21px; height: 21px; }
.is-mobile-workspace #mobile-viewer-popover button[aria-pressed="true"] { color: #ffad73; }
.is-mobile-workspace #mobile-viewer-mute[aria-pressed="false"] .preview-audio-off, .is-mobile-workspace #mobile-viewer-mute[aria-pressed="true"] .preview-audio-on { display: none; }
.is-mobile-workspace #mobile-media-status { max-width: calc(100% - 105px); min-height: 36px; display: block; position: absolute; z-index: 62; top: 7px; left: max(7px, env(safe-area-inset-left)); overflow: hidden; padding: 5px 9px; border-color: #9a633f; background: #39281fef; color: #ffc39a; font-size: 10px; text-overflow: ellipsis; touch-action: manipulation; white-space: nowrap; }
.is-mobile-workspace #mobile-media-status.saving { border-color: #446e86; background: #1c3440ef; color: #a9e2ff; }
.is-mobile-workspace #mobile-feedback { max-width: calc(100% - 24px); display: block; position: fixed; z-index: 1750; top: calc(54px + env(safe-area-inset-top)); left: 50%; padding: 9px 12px; border: 1px solid #b77850; border-radius: 6px; background: #30241fee; box-shadow: 0 7px 22px #000b; color: #ffe0ca; font-size: 11px; line-height: 1.35; pointer-events: none; transform: translateX(-50%); }
.is-mobile-workspace .asset-usage { font-size: 10px; }
.is-mobile-workspace.mobile-keyboard-open .media-panel, .is-mobile-workspace.mobile-keyboard-open .inspector-panel { bottom: var(--mobile-keyboard-inset, 0px); max-height: calc(var(--mobile-visible-height, 100vh) - 8px); }
.is-mobile-workspace.mobile-timeline-expanded .workspace { grid-template-rows: minmax(130px, 26%) minmax(0, 1fr); }
.is-mobile-workspace.mobile-timeline-expanded .preview-panel .transport { min-height: 40px; }

/* Phone portrait compacts inactive secondary lanes while an explicit timeline expansion restores full heights. */
.is-phone-workspace:not(.mobile-timeline-expanded) .track-lane:not(.main-track):not(:has(.clip.selected)) { height: 28px; }
.is-phone-workspace:not(.mobile-timeline-expanded) .track-lane:not(.main-track):not(:has(.clip.selected)) .clip { top: 2px; height: 24px; }
.is-phone-workspace:not(.mobile-timeline-expanded) .track-lane:not(.main-track):not(:has(.clip.selected)) .clip-caption { top: 1px; padding-top: 1px; padding-bottom: 1px; }
.is-phone-workspace:not(.mobile-timeline-expanded) .track-lane:not(.main-track):not(:has(.clip.selected)) .clip-time, .is-phone-workspace:not(.mobile-timeline-expanded) .track-lane:not(.main-track):not(:has(.clip.selected)) .clip-keyframes { display: none; }

@media (orientation: landscape) {
  .is-mobile-workspace .workspace { grid-template: minmax(105px, 43%) minmax(0, 1fr) / minmax(0, 1fr); }
  .is-mobile-workspace .media-panel { right: auto; left: env(safe-area-inset-left); margin: 0; border-radius: 0 14px 0 0; }
  .is-mobile-workspace .inspector-panel { right: env(safe-area-inset-right); left: auto; margin: 0; border-radius: 14px 0 0 0; }
}
/* Keeps useful server and admin notices visible without obstructing the editing workspace. */
.app-status-banner { position:fixed; z-index:1000; top:max(10px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; max-width:min(720px,calc(100vw - 24px)); padding:10px 12px; color:#e8f8ff; background:#173447; border:1px solid #2f7998; border-radius:8px; box-shadow:0 8px 30px #0008; font-size:13px }
.app-status-banner[hidden] { display:none }
.app-status-banner[data-level="warning"] { color:#fff5d5; background:#4b3917; border-color:#9a742b }
.app-status-banner[data-level="error"] { color:#ffe8e8; background:#4c2024; border-color:#a74b52 }
.app-status-banner button { flex:0 0 auto; margin-left:auto; padding:0 4px; color:inherit; background:transparent; border:0; font-size:20px; line-height:1; cursor:pointer }