:root { --background: 225 24% 5%; --foreground: 210 25% 96%; --primary: 262 83% 58%; --primary-foreground: 0 0% 100%; --secondary: 217 91% 60%; --secondary-foreground: 0 0% 100%; --muted: 220 20% 15%; --muted-foreground: 218 13% 70%; --destructive: 0 84% 60%; --border: 220 20% 21%; --card: 220 23% 10%; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --transition-fast: 140ms ease; }
.dark { --background: 225 24% 5%; --foreground: 210 25% 96%; --primary: 262 83% 58%; --secondary: 217 91% 60%; --muted: 220 20% 15%; --muted-foreground: 218 13% 70%; --border: 220 20% 21%; --card: 220 23% 10%; }
* { box-sizing: border-box; } html, body, #root { min-height: 100%; height: 100%; } body { margin: 0; background: #090b0f; color: hsl(var(--foreground)); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow: hidden; } button, input, select, textarea { font: inherit; color: inherit; } button { transition: background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast); } button:hover { transform: translateY(-1px); } button:disabled { opacity: .55; cursor: not-allowed; }
.glass { background: linear-gradient(135deg, hsl(var(--card) / .86), hsl(var(--card) / .62)); backdrop-filter: blur(18px); border: 1px solid hsl(var(--border)); }
.editor-shell { background: #090b0f; } .panel-card { background: #151922; border: 1px solid #262b36; } .soft-panel { background: #11141b; border: 1px solid #242936; }
.preview-workspace { background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.045), transparent 34%), linear-gradient(180deg,#0d1016,#090b0f); }
.preview-stage-shadow { box-shadow: 0 28px 80px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.12); }
.safe-guide { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 0 28px rgba(255,255,255,.018); }
.timeline-row { background-color: #0e1117; background-image: linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 96px 100%; }
.clip { box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 8px 18px rgba(0,0,0,.32); }
.video-thumb-strip { background-image: repeating-linear-gradient(90deg, #202838 0 30px, #151b27 30px 34px, #263046 34px 62px, #111722 62px 66px); }
.video-thumb-strip:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 45%, rgba(0,0,0,.32)); }
.waveform { background: linear-gradient(180deg, transparent 0 35%, rgba(125,211,252,.72) 35% 42%, transparent 42% 48%, rgba(125,211,252,.55) 48% 56%, transparent 56% 100%), repeating-linear-gradient(90deg, rgba(125,211,252,.75) 0 2px, transparent 2px 7px); mask-image: linear-gradient(to top, transparent 4%, black 18%, black 82%, transparent 96%); }
.key-diamond { width: 8px; height: 8px; transform: rotate(45deg); background: #f5c542; border: 1px solid rgba(0,0,0,.35); }
.scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; } .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(126,135,149,.38); border-radius: 999px; } .scrollbar-thin::-webkit-scrollbar-track { background: rgba(15,17,21,.35); }