:root {
  color-scheme: dark;
  --bg-0: #090b10;
  --bg-1: #0d1016;
  --bg-2: #12161e;
  --bg-3: #171c26;
  --bg-4: #1e2430;
  --line: #252c39;
  --line-strong: #343d4e;
  --text: #f4f6fa;
  --text-2: #b6bfce;
  --text-3: #737f91;
  --accent: #8267ff;
  --accent-2: #a18cff;
  --accent-soft: rgba(130, 103, 255, .16);
  --cyan: #41d9d1;
  --green: #62d69b;
  --danger: #ff6577;
  --warning: #f5bb58;
  --radius: 8px;
  --radius-lg: 13px;
  --topbar-h: 54px;
  --timeline-h: 244px;
  --status-h: 24px;
  --left-w: 302px;
  --right-w: 324px;
  --tool-w: 48px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg-0); color: var(--text); }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; }
button:not(:disabled), select:not(:disabled), input[type="checkbox"] { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
svg { display: block; width: 18px; height: 18px; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hidden { display: none !important; }

.app-shell {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: var(--left-w) minmax(320px, 1fr) var(--right-w);
  grid-template-rows: var(--topbar-h) minmax(240px, 1fr) var(--timeline-h) var(--status-h);
  grid-template-areas:
    "top top top"
    "left workspace right"
    "timeline timeline timeline"
    "status status status";
  background: var(--bg-0);
  isolation: isolate;
}

/* Top bar */
.topbar {
  grid-area: top;
  display: grid;
  grid-template-columns: var(--left-w) minmax(260px, 1fr) auto;
  align-items: center;
  height: var(--topbar-h);
  background: #0d1016;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 30;
}
.brand-block { height: 100%; border-right: 1px solid var(--line); display: flex; align-items: center; padding: 0 10px; }
.brand-button { display: flex; align-items: center; gap: 8px; background: transparent; border-radius: 7px; padding: 6px 7px; min-width: 0; }
.brand-button:hover { background: var(--bg-3); }
.brand-mark { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, #9c79ff, #6147ed 72%); display: grid; place-items: center; color: #fff; box-shadow: 0 5px 18px rgba(111, 83, 244, .26); flex: 0 0 auto; }
.brand-mark svg { width: 20px; height: 20px; }
.brand-mark.large { width: 58px; height: 58px; border-radius: 15px; }
.brand-mark.large svg { width: 40px; height: 40px; }
.brand-word { font-size: 15px; font-weight: 750; letter-spacing: -.25px; white-space: nowrap; }
.brand-word span { color: var(--accent-2); }
.local-chip { font-size: 8px; font-weight: 800; letter-spacing: .6px; color: var(--cyan); border: 1px solid rgba(65,217,209,.35); border-radius: 4px; padding: 2px 4px; background: rgba(65,217,209,.08); }
.topbar-project { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.project-name { min-width: 100px; width: min(300px, 36vw); text-align: center; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 5px 8px; font-size: 13px; font-weight: 600; }
.project-name:hover { border-color: var(--line); background: var(--bg-2); }
.project-name:focus { background: var(--bg-2); border-color: var(--accent); }
.save-status { display: flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 10px; white-space: nowrap; }
.save-dot, .live-dot, .privacy-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(98,214,155,.09); display: inline-block; flex: 0 0 auto; }
.save-status.saving .save-dot { background: var(--warning); box-shadow: 0 0 0 3px rgba(245,187,88,.09); animation: pulse-dot .7s infinite alternate; }
@keyframes pulse-dot { to { opacity: .45; } }
.topbar-actions { justify-self: end; display: flex; align-items: center; gap: 8px; padding-right: 10px; }
.topbar-divider, .workspace-divider { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
.button-group { display: flex; align-items: center; gap: 2px; }

.button, .icon-button, .tool-button, .mini-icon-button, .quick-action, .dropdown-button, .zoom-label, .transport-play, .mini-add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 7px;
  transition: background .13s ease, color .13s ease, border-color .13s ease, transform .1s ease;
}
.button { min-height: 34px; padding: 0 13px; border: 1px solid transparent; font-size: 12px; font-weight: 650; white-space: nowrap; }
.button svg { width: 15px; height: 15px; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button-primary { background: linear-gradient(180deg, #8e73ff, #7053ee); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.19), 0 6px 18px rgba(94,70,220,.18); }
.button-primary:hover { background: linear-gradient(180deg, #9a83ff, #785af2); }
.button-secondary { background: var(--bg-3); border-color: var(--line-strong); color: var(--text-2); }
.button-secondary:hover, .button-quiet:hover { background: var(--bg-4); color: var(--text); }
.button-quiet { background: transparent; border-color: var(--line); color: var(--text-2); }
.button-danger { background: #b94352; color: #fff; }
.button-danger:hover { background: #d04d5e; }
.button-small { min-height: 28px; padding: 0 10px; font-size: 10px; }
.button-large { min-height: 43px; font-size: 13px; }
.full-width { width: 100%; }
.icon-button { width: 32px; height: 32px; background: transparent; color: var(--text-2); border: 1px solid transparent; }
.icon-button:hover { background: var(--bg-3); color: var(--text); border-color: var(--line); }
.icon-button:disabled { color: #404856; cursor: default; }
.icon-button.tiny { width: 27px; height: 27px; border-radius: 6px; }
.icon-button.tiny svg { width: 15px; height: 15px; }

/* Left tools and layers */
.left-area { grid-area: left; display: grid; grid-template-columns: var(--tool-w) 1fr; min-width: 0; border-right: 1px solid var(--line); background: var(--bg-1); overflow: hidden; }
.tool-rail { background: #0b0e13; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 5px; min-height: 0; }
.tool-button { width: 37px; height: 37px; color: var(--text-3); background: transparent; position: relative; }
.tool-button svg { width: 18px; height: 18px; }
.tool-button:hover { color: var(--text); background: var(--bg-3); }
.tool-button.active { color: #fff; background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(130,103,255,.35); }
.tool-button kbd { display: none; position: absolute; left: calc(100% + 7px); top: 8px; padding: 3px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-0); color: var(--text-2); font-size: 9px; z-index: 70; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.tool-button:hover kbd { display: block; }
.tool-separator { width: 25px; height: 1px; background: var(--line); margin: 3px 0; }
.tool-spacer { flex: 1; }
.panel { background: var(--bg-1); min-height: 0; }
.layers-panel { display: flex; flex-direction: column; overflow: hidden; }
.panel-tabs { height: 42px; display: flex; align-items: stretch; border-bottom: 1px solid var(--line); padding: 0 10px; gap: 12px; flex: 0 0 auto; }
.panel-tab { background: transparent; color: var(--text-3); font-size: 11px; font-weight: 650; padding: 0 2px; position: relative; }
.panel-tab:hover { color: var(--text-2); }
.panel-tab.active { color: var(--text); }
.panel-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
.panel-tab-content { display: none; flex: 1; min-height: 0; overflow: hidden; }
.panel-tab-content.active { display: flex; flex-direction: column; }
.panel-section-heading { height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; color: var(--text-3); font-size: 10px; border-bottom: 1px solid rgba(37,44,57,.7); flex: 0 0 auto; }
.panel-section-heading.compact { text-transform: uppercase; letter-spacing: .4px; }
.inline-actions { display: flex; align-items: center; gap: 2px; }
.mini-icon-button { width: 25px; height: 25px; color: var(--text-3); background: transparent; }
.mini-icon-button svg { width: 14px; height: 14px; }
.mini-icon-button:hover { color: var(--text); background: var(--bg-3); }
.mini-icon-button.danger:hover { color: var(--danger); background: rgba(255,101,119,.08); }
.layer-list { flex: 1; min-height: 0; overflow-y: auto; padding: 5px; }
.layer-row { height: 37px; display: grid; grid-template-columns: 26px minmax(0, 1fr) 24px 24px; align-items: center; gap: 2px; border-radius: 6px; padding: 0 4px; color: var(--text-2); cursor: default; user-select: none; border: 1px solid transparent; }
.layer-row:hover { background: var(--bg-3); }
.layer-row.selected { background: var(--accent-soft); border-color: rgba(130,103,255,.25); color: var(--text); }
.layer-row.drag-over { border-top-color: var(--accent); }
.layer-row.hidden-layer { opacity: .5; }
.layer-row.locked-layer .layer-title { color: var(--text-3); }
.layer-icon { width: 23px; height: 23px; display: grid; place-items: center; color: var(--text-3); }
.layer-icon svg { width: 14px; height: 14px; }
.layer-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.layer-toggle { width: 22px; height: 22px; display: grid; place-items: center; background: transparent; color: var(--text-3); border-radius: 4px; opacity: .2; }
.layer-row:hover .layer-toggle, .layer-row.selected .layer-toggle, .layer-toggle.active { opacity: 1; }
.layer-toggle:hover { background: rgba(255,255,255,.05); color: var(--text); }
.layer-toggle svg { width: 13px; height: 13px; }
.layer-empty { padding: 30px 18px; text-align: center; color: var(--text-3); font-size: 11px; line-height: 1.5; }
.assets-drop { margin: 12px; min-height: 150px; border: 1px dashed var(--line-strong); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-3); background: rgba(255,255,255,.012); transition: border-color .15s, background .15s; }
.assets-drop.dragging { border-color: var(--accent); background: var(--accent-soft); }
.assets-drop > svg { width: 24px; height: 24px; color: var(--accent-2); margin-bottom: 4px; }
.assets-drop strong { color: var(--text-2); font-size: 11px; }
.assets-drop span { font-size: 9px; }
.assets-drop button { margin-top: 6px; }
.asset-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 0 12px 10px; overflow-y: auto; }
.asset-card { aspect-ratio: 1; background: var(--bg-3); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; position: relative; }
.asset-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-card:hover { border-color: var(--accent); }
.asset-card span { position: absolute; inset: auto 4px 4px; background: rgba(0,0,0,.65); border-radius: 4px; padding: 3px 5px; font-size: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.privacy-note { display: flex; align-items: center; gap: 7px; color: var(--text-3); padding: 0 14px 12px; margin: auto 0 0; font-size: 9px; }

/* Workspace */
.workspace-area { grid-area: workspace; position: relative; display: grid; grid-template-rows: 38px minmax(0, 1fr); min-width: 0; min-height: 0; background: #0b0e13; overflow: hidden; }
.workspace-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 9px; border-bottom: 1px solid var(--line); background: rgba(13,16,22,.97); z-index: 4; }
.workspace-left-tools, .zoom-controls { display: flex; align-items: center; gap: 2px; }
.dropdown-button { min-height: 27px; padding: 0 8px; background: transparent; color: var(--text-2); font-size: 10px; }
.dropdown-button:hover { background: var(--bg-3); color: var(--text); }
.dropdown-button svg { width: 12px; height: 12px; transform: rotate(90deg); }
.zoom-label { width: 44px; height: 26px; background: transparent; color: var(--text-2); font-size: 9px; }
.zoom-label:hover { background: var(--bg-3); color: var(--text); }
.selection-quickbar { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-2); box-shadow: 0 7px 24px rgba(0,0,0,.2); }
.selection-quickbar > span { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }
.quick-action { width: 24px; height: 23px; background: transparent; color: var(--text-3); font-size: 9px; font-weight: 700; }
.quick-action:hover { color: var(--text); background: var(--bg-4); }
.canvas-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background-color: #0a0d12; background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 20px 20px; touch-action: none; }
.canvas-stage.grid-off { background-image: none; }
#editorCanvas { display: block; width: 100%; height: 100%; cursor: default; }
.app-shell[data-tool="select"] #editorCanvas { cursor: default; }
.app-shell[data-tool="hand"] #editorCanvas, .app-shell.space-pan #editorCanvas { cursor: grab; }
.app-shell[data-tool="hand"].dragging #editorCanvas, .app-shell.space-pan.dragging #editorCanvas { cursor: grabbing; }
.app-shell[data-tool="rect"] #editorCanvas, .app-shell[data-tool="ellipse"] #editorCanvas, .app-shell[data-tool="star"] #editorCanvas, .app-shell[data-tool="text"] #editorCanvas { cursor: crosshair; }
.inline-text-editor { position: absolute; z-index: 8; min-width: 40px; min-height: 28px; padding: 0; border: 1px dashed var(--accent-2); outline: none; background: rgba(0,0,0,.08); color: #fff; white-space: pre-wrap; overflow: hidden; transform-origin: center; }
.canvas-empty-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; color: var(--text-3); pointer-events: none; }
.canvas-empty-hint > * { pointer-events: auto; }
.canvas-empty-hint .hint-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent-2); }
.canvas-empty-hint .hint-icon svg { width: 23px; height: 23px; }
.canvas-empty-hint strong { color: var(--text-2); font-size: 13px; }
.canvas-empty-hint span:not(.hint-icon) { font-size: 10px; }

/* Inspector */
.right-area { grid-area: right; min-width: 0; min-height: 0; border-left: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.inspector-tabs { justify-content: center; gap: 24px; }
.inspector-content { display: none; flex: 1; min-height: 0; overflow-y: auto; }
.inspector-content.active { display: block; }
.inspector-empty { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 28px 15px 15px; text-align: center; color: var(--text-3); overflow-y: auto; }
.inspector-empty .empty-icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--bg-3); color: var(--text-3); margin-bottom: 10px; }
.inspector-empty .empty-icon.purple { background: var(--accent-soft); color: var(--accent-2); }
.inspector-empty .empty-icon svg { width: 21px; height: 21px; }
.inspector-empty strong { color: var(--text-2); font-size: 12px; }
.inspector-empty p { margin: 5px 10px 18px; font-size: 10px; line-height: 1.5; max-width: 210px; }
.inspector-empty.compact-empty { min-height: 260px; justify-content: center; }
.artboard-card { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 12px; background: rgba(255,255,255,.015); text-align: left; margin-top: 2px; }
.inspector-section { border-bottom: 1px solid var(--line); padding: 11px 13px; }
.layer-header-section { padding: 9px 11px; }
.selected-layer-heading { display: grid; grid-template-columns: 26px minmax(0,1fr) 25px; align-items: center; gap: 5px; }
.layer-type-icon { width: 26px; height: 26px; border-radius: 6px; background: var(--bg-3); color: var(--accent-2); display: grid; place-items: center; }
.layer-type-icon svg { width: 14px; height: 14px; }
.layer-name-input { min-width: 0; border: 1px solid transparent; background: transparent; border-radius: 5px; padding: 5px 6px; font-size: 11px; font-weight: 650; }
.layer-name-input:hover { background: var(--bg-3); border-color: var(--line); }
.layer-name-input:focus { background: var(--bg-3); border-color: var(--accent); }
.section-toggle { width: 100%; height: 25px; display: flex; align-items: center; gap: 6px; background: transparent; color: var(--text-2); padding: 0; font-size: 10px; font-weight: 700; text-align: left; }
.section-toggle svg { width: 11px; height: 11px; transform: rotate(90deg); transition: transform .13s ease; color: var(--text-3); }
.section-toggle.collapsed svg { transform: rotate(0deg); }
.section-toggle.collapsed + .section-body { display: none; }
.section-body { padding-top: 8px; }
.inspector-section-title { color: var(--text-2); font-size: 10px; font-weight: 700; margin-bottom: 10px; }
.inspector-section-title.with-action { display: flex; align-items: center; justify-content: space-between; }
.tag { font-size: 7px; letter-spacing: .6px; color: var(--accent-2); background: var(--accent-soft); border-radius: 4px; padding: 3px 5px; }
.field-grid { display: grid; gap: 7px; }
.field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: left; }
.field > span { color: var(--text-3); font-size: 8px; text-transform: uppercase; letter-spacing: .4px; font-weight: 650; }
.field input, .field select, .field textarea, .unit-input { width: 100%; min-width: 0; border: 1px solid var(--line); background: var(--bg-2); border-radius: 6px; color: var(--text-2); font-size: 10px; }
.field input, .field select { height: 30px; padding: 0 8px; }
.field textarea { resize: vertical; min-height: 58px; padding: 7px 8px; line-height: 1.45; }
.field input:hover, .field select:hover, .field textarea:hover, .unit-input:hover { border-color: var(--line-strong); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; color: var(--text); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 12px) 12px, calc(100% - 8px) 12px; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; padding-right: 22px; }
.field-grid + .field-grid, .field-grid + .field, .field + .field-grid, .field + .field, .field + .segmented, .field-grid + .segmented, .field + .range-field, .range-field + .check-row { margin-top: 8px; }
.unit-input { display: flex; align-items: center; height: 30px; }
.unit-input input { flex: 1; width: 0; height: 28px; border: 0; background: transparent; }
.unit-input em { color: var(--text-3); font-size: 9px; font-style: normal; padding-right: 8px; }
.color-field { margin-bottom: 8px; }
.color-field > div { display: grid; grid-template-columns: 35px 1fr; gap: 6px; }
.color-field input[type="color"] { padding: 4px; width: 35px; }
.color-field input[type="text"] { text-transform: uppercase; }
.field-row { display: flex; gap: 7px; margin-top: 8px; }
.grow { flex: 1; }
.range-field { display: grid; grid-template-columns: 40px 1fr 26px; align-items: center; gap: 6px; margin-top: 9px; color: var(--text-3); font-size: 8px; text-transform: uppercase; letter-spacing: .35px; }
.range-field input { accent-color: var(--accent); width: 100%; }
.range-field output { text-align: right; color: var(--text-2); font-size: 9px; }
.check-row { display: flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 10px; margin-top: 9px; cursor: pointer; }
.check-row input { position: absolute; opacity: 0; pointer-events: none; }
.check-box { width: 15px; height: 15px; border: 1px solid var(--line-strong); border-radius: 4px; display: grid; place-items: center; background: var(--bg-2); color: transparent; }
.check-box svg { width: 11px; height: 11px; }
.check-row input:checked + .check-box { background: var(--accent); border-color: var(--accent); color: #fff; }
.indented { margin: 8px 0 0 22px; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); padding: 2px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 7px; }
.segmented button { height: 25px; background: transparent; color: var(--text-3); border-radius: 5px; font-size: 9px; }
.segmented button:hover { color: var(--text-2); }
.segmented button.active { background: var(--bg-4); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.preset-card { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; min-height: 67px; padding: 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-2); color: var(--text-3); }
.preset-card:hover { border-color: rgba(130,103,255,.55); background: var(--accent-soft); color: var(--text); }
.preset-card strong { font-size: 8px; font-weight: 650; }
.preset-preview { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 6px; background: linear-gradient(145deg, #2c3341, #1d222d); color: var(--accent-2); font-size: 12px; font-weight: 800; overflow: hidden; }
.preset-card:hover .preset-preview.fade { animation: preset-fade .8s ease-out infinite; }
.preset-card:hover .preset-preview.slide { animation: preset-slide .8s ease-out infinite; }
.preset-card:hover .preset-preview.pop { animation: preset-pop .8s cubic-bezier(.2,1.5,.4,1) infinite; }
.preset-card:hover .preset-preview.spin { animation: preset-spin .9s ease-in-out infinite; }
.preset-card:hover .preset-preview.drift { animation: preset-drift .8s ease-in-out infinite; }
.preset-card:hover .preset-preview.pulse { animation: preset-pulse .8s ease-in-out infinite; }
@keyframes preset-fade { from { opacity: .15; } }
@keyframes preset-slide { from { transform: translateY(12px); opacity: .1; } }
@keyframes preset-pop { from { transform: scale(.2); } }
@keyframes preset-spin { to { transform: rotate(360deg); } }
@keyframes preset-drift { 50% { transform: translateX(8px); } }
@keyframes preset-pulse { 50% { transform: scale(1.3); } }
.mini-add-button { height: 25px; padding: 0 8px; background: var(--accent-soft); color: var(--accent-2); font-size: 9px; }
.mini-add-button:hover { background: rgba(130,103,255,.25); color: #c2b6ff; }
.mini-add-button svg { width: 12px; height: 12px; }
.action-list { display: flex; flex-direction: column; gap: 5px; }
.action-empty { padding: 16px 8px; border: 1px dashed var(--line); border-radius: 7px; text-align: center; color: var(--text-3); font-size: 9px; line-height: 1.45; }
.action-row { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; gap: 6px; align-items: center; min-height: 42px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-2); cursor: pointer; }
.action-row:hover { border-color: var(--line-strong); background: var(--bg-3); }
.action-row.selected { border-color: rgba(130,103,255,.58); background: var(--accent-soft); }
.action-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 6px; color: var(--accent-2); background: rgba(130,103,255,.11); }
.action-icon svg { width: 13px; height: 13px; }
.action-copy { min-width: 0; }
.action-copy strong, .action-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-copy strong { color: var(--text-2); font-size: 9px; margin-bottom: 2px; }
.action-copy span { color: var(--text-3); font-size: 8px; }
.action-time { color: var(--text-3); font-size: 8px; }
.easing-preview { margin-top: 9px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--bg-0); }
.easing-preview canvas { width: 100%; height: 76px; display: block; }

/* Timeline */
.timeline-area { grid-area: timeline; border-top: 1px solid var(--line); background: #0d1016; display: grid; grid-template-rows: 36px minmax(0, 1fr); min-width: 0; min-height: 0; position: relative; z-index: 12; }
.timeline-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); padding: 0 8px; }
.timeline-transport { display: flex; align-items: center; gap: 4px; }
.transport-play { width: 27px; height: 27px; background: var(--accent); color: #fff; }
.transport-play:hover { background: var(--accent-2); }
.transport-play svg { width: 13px; height: 13px; }
.timecode { display: flex; align-items: center; gap: 5px; color: var(--text-3); margin-left: 4px; font-size: 9px; }
.timecode input { width: 50px; height: 24px; padding: 0 5px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; color: var(--text-2); text-align: right; font-size: 9px; }
.timeline-title { display: flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 10px; font-weight: 650; }
.timeline-options { justify-self: end; display: flex; align-items: center; gap: 4px; color: var(--text-3); font-size: 8px; }
.timeline-options label { display: flex; align-items: center; gap: 4px; margin-right: 6px; }
.timeline-options select { height: 24px; border: 1px solid var(--line); background: var(--bg-2); border-radius: 5px; color: var(--text-2); font-size: 8px; }
#timelineZoomLabel { width: 35px; text-align: center; }
.timeline-content { display: grid; grid-template-columns: 180px minmax(0,1fr); min-width: 0; min-height: 0; }
.timeline-label-column { border-right: 1px solid var(--line); min-width: 0; overflow: hidden; }
.timeline-label-header { height: 28px; border-bottom: 1px solid var(--line); color: var(--text-3); display: flex; align-items: center; padding: 0 11px; font-size: 8px; text-transform: uppercase; letter-spacing: .4px; }
.timeline-labels { min-height: 0; overflow: hidden; }
.timeline-label-row { height: 34px; border-bottom: 1px solid rgba(37,44,57,.5); display: flex; align-items: center; gap: 7px; padding: 0 9px; color: var(--text-3); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timeline-label-row.selected { color: var(--text); background: rgba(130,103,255,.07); }
.timeline-label-row svg { width: 12px; height: 12px; color: var(--text-3); }
.timeline-scroll { overflow: auto; min-width: 0; min-height: 0; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
.timeline-inner { position: relative; min-width: 100%; width: 100%; }
.timeline-ruler { height: 28px; position: relative; border-bottom: 1px solid var(--line); background: #0c0f15; cursor: pointer; min-width: 100%; }
.ruler-tick { position: absolute; bottom: 0; height: 7px; width: 1px; background: var(--line-strong); }
.ruler-tick.major { height: 11px; }
.ruler-label { position: absolute; top: 4px; transform: translateX(-50%); color: var(--text-3); font-size: 7px; pointer-events: none; }
.timeline-tracks { min-height: 34px; }
.timeline-track-row { position: relative; height: 34px; border-bottom: 1px solid rgba(37,44,57,.5); background-image: linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 10% 100%; }
.timeline-track-row.selected { background-color: rgba(130,103,255,.035); }
.action-clip { position: absolute; top: 5px; height: 23px; min-width: 14px; border: 1px solid rgba(130,103,255,.55); border-radius: 5px; background: linear-gradient(180deg, rgba(130,103,255,.32), rgba(91,70,190,.22)); color: #d8d0ff; display: flex; align-items: center; gap: 4px; padding: 0 7px; font-size: 8px; overflow: hidden; white-space: nowrap; cursor: grab; user-select: none; }
.action-clip:hover { border-color: var(--accent-2); background: linear-gradient(180deg, rgba(130,103,255,.46), rgba(91,70,190,.30)); }
.action-clip.selected { border-color: #c1b4ff; box-shadow: 0 0 0 1px rgba(193,180,255,.2); }
.action-clip.dragging { cursor: grabbing; opacity: .86; }
.action-clip::before { content: ""; width: 5px; height: 5px; transform: rotate(45deg); background: currentColor; flex: 0 0 auto; }
.action-resize { position: absolute; top: 0; bottom: 0; width: 6px; cursor: ew-resize; }
.action-resize.left { left: -1px; }
.action-resize.right { right: -1px; }
.playhead { position: absolute; top: 0; bottom: 0; width: 1px; background: #ff6f85; z-index: 8; pointer-events: none; left: 0; box-shadow: 0 0 4px rgba(255,111,133,.4); }
.playhead span { position: absolute; top: 0; left: -5px; width: 11px; height: 8px; background: #ff6f85; clip-path: polygon(0 0,100% 0,100% 55%,50% 100%,0 55%); }

/* Status */
.statusbar { grid-area: status; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 8px; border-top: 1px solid var(--line); background: #090b10; color: var(--text-3); font-size: 8px; }
.statusbar > span:first-child { display: flex; align-items: center; gap: 6px; }
.statusbar > span:nth-child(2) { justify-self: center; }
.statusbar > span:last-child { justify-self: end; }

/* Dialogs, menus and modals */
dialog { color: var(--text); }
dialog::backdrop { background: rgba(2,4,8,.72); backdrop-filter: blur(6px); }
.modal { width: min(900px, calc(100vw - 50px)); max-height: calc(100vh - 50px); padding: 0; border: 1px solid var(--line-strong); border-radius: 14px; background: #11151d; box-shadow: 0 30px 90px rgba(0,0,0,.55); overflow: hidden; }
.modal[open] { animation: modal-in .16s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.modal-header { min-height: 90px; padding: 20px 22px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(130,103,255,.055), transparent); }
.modal-header h2 { margin: 4px 0 4px; font-size: 21px; line-height: 1.2; letter-spacing: -.4px; }
.modal-header p { margin: 0; color: var(--text-3); font-size: 10px; }
.eyebrow { color: var(--accent-2); font-size: 8px; letter-spacing: 1px; font-weight: 800; }
.modal-close { flex: 0 0 auto; }
.popover-dialog { padding: 5px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg-2); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.popover-dialog::backdrop { background: transparent; }
.brand-menu-dialog { width: 260px; margin: 56px auto auto 8px; }
.menu-list { display: flex; flex-direction: column; gap: 2px; }
.menu-list button { min-height: 34px; display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 6px; padding: 0 8px; background: transparent; color: var(--text-2); border-radius: 6px; text-align: left; font-size: 10px; }
.menu-list button:hover { background: var(--bg-4); color: var(--text); }
.menu-list button svg { width: 14px; height: 14px; color: var(--text-3); }
.menu-list button kbd { color: var(--text-3); font-size: 8px; }
.menu-divider { height: 1px; background: var(--line); margin: 4px 3px; display: block; }
.danger-text { color: #f48794 !important; }
.template-modal { height: min(690px, calc(100vh - 50px)); }
.template-layout { display: grid; grid-template-columns: 170px minmax(0,1fr); min-height: 0; height: calc(100% - 90px); }
.template-categories { border-right: 1px solid var(--line); padding: 14px 8px; display: flex; flex-direction: column; gap: 3px; background: rgba(0,0,0,.08); }
.template-categories button { height: 34px; padding: 0 10px; text-align: left; border-radius: 7px; background: transparent; color: var(--text-3); font-size: 10px; }
.template-categories button:hover { color: var(--text-2); background: var(--bg-3); }
.template-categories button.active { color: var(--text); background: var(--accent-soft); }
.template-grid { overflow-y: auto; padding: 15px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px; align-content: start; }
.template-card { min-width: 0; background: transparent; text-align: left; color: var(--text-2); }
.template-thumb { aspect-ratio: 1.3; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; position: relative; margin-bottom: 7px; background: #0b0e13; transition: transform .15s, border-color .15s; }
.template-card:hover .template-thumb { transform: translateY(-2px); border-color: rgba(130,103,255,.7); }
.template-thumb canvas { width: 100%; height: 100%; display: block; }
.template-card strong { display: block; font-size: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.template-card small { display: block; color: var(--text-3); font-size: 8px; margin-top: 2px; }
.template-badge { position: absolute; top: 6px; right: 6px; padding: 3px 5px; border-radius: 4px; background: rgba(8,10,15,.72); color: #d9d3ff; font-size: 7px; border: 1px solid rgba(255,255,255,.09); }
.export-modal { width: min(940px, calc(100vw - 50px)); }
.export-layout { display: grid; grid-template-columns: 43% 57%; min-height: 470px; }
.export-preview-wrap { padding: 22px; border-right: 1px solid var(--line); background: #0b0e13; display: flex; flex-direction: column; justify-content: center; }
.export-preview-checker { width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background-color: #e6e6ea; background-image: linear-gradient(45deg,#cfd0d5 25%,transparent 25%),linear-gradient(-45deg,#cfd0d5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#cfd0d5 75%),linear-gradient(-45deg,transparent 75%,#cfd0d5 75%); background-size: 18px 18px; background-position: 0 0,0 9px,9px -9px,-9px 0; box-shadow: 0 12px 35px rgba(0,0,0,.25); }
.export-preview-checker canvas { width: 100%; height: 100%; display: block; object-fit: contain; }
.export-preview-meta { display: flex; justify-content: space-between; margin-top: 10px; color: var(--text-3); font-size: 9px; }
.export-settings { padding: 20px; overflow-y: auto; }
.export-format-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
.export-format { min-height: 78px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); color: var(--text-3); text-align: left; }
.export-format:hover { border-color: var(--line-strong); background: var(--bg-3); }
.export-format.active { border-color: var(--accent); background: var(--accent-soft); }
.format-badge { font-size: 7px; color: var(--accent-2); font-weight: 800; letter-spacing: .5px; }
.export-format strong { color: var(--text-2); font-size: 9px; }
.export-format small { font-size: 7px; }
.export-options { margin-top: 16px; }
.compatibility-note { margin: 14px 0; min-height: 38px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid rgba(98,214,155,.18); border-radius: 7px; background: rgba(98,214,155,.055); color: #9bcfb6; font-size: 9px; line-height: 1.4; }
.compatibility-note.warning { border-color: rgba(245,187,88,.25); background: rgba(245,187,88,.06); color: #d8bd88; }
.compatibility-icon { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(98,214,155,.13); }
.compatibility-icon svg { width: 12px; height: 12px; }
.export-progress-wrap { margin: 12px 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.progress-copy { display: flex; justify-content: space-between; color: var(--text-2); font-size: 9px; }
.progress-track { height: 5px; border-radius: 3px; background: var(--bg-0); margin: 8px 0; overflow: hidden; }
.progress-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--accent), var(--cyan)); border-radius: inherit; transition: width .12s linear; }
.shortcuts-modal { width: min(720px, calc(100vw - 50px)); }
.shortcuts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px; }
.shortcuts-grid section { border: 1px solid var(--line); border-radius: 9px; padding: 12px; background: rgba(255,255,255,.012); }
.shortcuts-grid h3 { margin: 0 0 9px; font-size: 10px; color: var(--text); }
.shortcuts-grid section > div { min-height: 29px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(37,44,57,.55); color: var(--text-3); font-size: 9px; }
kbd { font-family: inherit; }
.shortcuts-grid kbd { min-width: 23px; min-height: 20px; display: inline-grid; place-items: center; padding: 0 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--bg-2); color: var(--text-2); font-size: 8px; }
.canvas-size-dialog { width: 265px; margin: 95px auto auto calc(var(--left-w) + 60px); }
.size-menu { display: flex; flex-direction: column; gap: 2px; }
.size-menu > button { min-height: 46px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; background: transparent; border-radius: 6px; padding: 4px 7px; text-align: left; }
.size-menu > button:hover { background: var(--bg-4); }
.size-menu > button span:last-child { min-width: 0; }
.size-menu strong, .size-menu small { display: block; }
.size-menu strong { color: var(--text-2); font-size: 9px; }
.size-menu small { color: var(--text-3); font-size: 8px; margin-top: 2px; }
.size-icon { display: block; border: 1px solid var(--text-3); border-radius: 2px; justify-self: center; }
.size-icon.square { width: 20px; height: 20px; }
.size-icon.portrait { width: 13px; height: 23px; }
.size-icon.landscape { width: 25px; height: 15px; }
.size-icon.wide { width: 27px; height: 12px; }
.custom-size-row { display: flex; align-items: end; gap: 5px; padding: 7px; }
.custom-size-row label { color: var(--text-3); font-size: 8px; }
.custom-size-row input { width: 55px; height: 27px; margin-top: 3px; background: var(--bg-0); border: 1px solid var(--line); border-radius: 5px; font-size: 8px; padding: 0 5px; }
.custom-size-row > span { padding-bottom: 7px; color: var(--text-3); }
.confirm-modal { width: 390px; padding: 25px; text-align: center; }
.confirm-icon { width: 45px; height: 45px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 12px; background: rgba(255,101,119,.1); color: var(--danger); }
.confirm-icon svg { width: 23px; height: 23px; }
.confirm-modal h2 { margin: 0 0 7px; font-size: 17px; }
.confirm-modal p { margin: 0 0 18px; color: var(--text-3); font-size: 10px; line-height: 1.55; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Toasts */
.toast-region { position: fixed; right: 12px; bottom: calc(var(--timeline-h) + var(--status-h) + 12px); z-index: 200; display: flex; flex-direction: column; gap: 7px; pointer-events: none; }
.toast { width: 290px; min-height: 45px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid var(--line-strong); border-radius: 9px; background: rgba(22,27,37,.96); color: var(--text-2); box-shadow: 0 15px 40px rgba(0,0,0,.38); backdrop-filter: blur(12px); pointer-events: auto; animation: toast-in .2s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateX(15px); } }
.toast-icon { width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); }
.toast-icon svg { width: 13px; height: 13px; }
.toast.success .toast-icon { background: rgba(98,214,155,.1); color: var(--green); }
.toast.error .toast-icon { background: rgba(255,101,119,.1); color: var(--danger); }
.toast-copy strong, .toast-copy span { display: block; }
.toast-copy strong { color: var(--text); font-size: 9px; margin-bottom: 2px; }
.toast-copy span { color: var(--text-3); font-size: 8px; line-height: 1.35; }
.toast-close { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; background: transparent; color: var(--text-3); }
.toast-close:hover { background: var(--bg-4); color: var(--text); }
.toast-close svg { width: 12px; height: 12px; }

/* Empty / responsive */
.mobile-blocker { display: none; position: fixed; inset: 0; z-index: 999; background: radial-gradient(circle at 50% 35%, #1d1b3d, #090b10 60%); padding: 30px; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.mobile-blocker h1 { max-width: 400px; margin: 18px 0 8px; font-size: 25px; }
.mobile-blocker p { max-width: 380px; margin: 0; color: var(--text-3); font-size: 13px; line-height: 1.55; }

/* Scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2b3341; border: 2px solid transparent; background-clip: padding-box; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #3a4455; border: 2px solid transparent; background-clip: padding-box; }

@media (max-width: 1100px) {
  :root { --left-w: 260px; --right-w: 286px; }
  .brand-word { font-size: 13px; }
  .local-chip { display: none; }
  .template-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px), (max-height: 560px) {
  .app-shell { display: none; }
  .mobile-blocker { display: flex; }
}