:root{color-scheme:dark;--bg-primary: #050816;--bg-secondary: #101827;--bg-tertiary: #162235;--bg-elevated: rgba(15, 23, 42, .9);--bg-glass: rgba(15, 23, 42, .72);--bg-muted: rgba(148, 163, 184, .08);--bg-overlay: rgba(2, 6, 23, .82);--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--accent-primary: #38bdf8;--accent-secondary: #6366f1;--accent-color: var(--accent-primary);--accent-gradient: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%);--border-color: rgba(148, 163, 184, .22);--border-highlight: rgba(148, 163, 184, .35);--success-color: #34d399;--danger-color: #f87171;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: 1rem;--radius-full: 9999px;--shadow-sm: 0 12px 30px -20px rgba(15, 23, 42, .8);--shadow-md: 0 20px 45px -25px rgba(15, 23, 42, .75);--shadow-lg: 0 30px 65px -30px rgba(2, 6, 23, .9);--transition-fast: .2s ease;--transition-normal: .3s ease}@font-face{font-family:Inter;src:url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap)}html{color-scheme:dark;min-width:320px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:radial-gradient(circle at top,rgba(56,189,248,.18),transparent 28%),radial-gradient(circle at bottom right,rgba(99,102,241,.14),transparent 24%),linear-gradient(180deg,#040814,#0b1120);color:var(--text-primary);width:100%;min-height:100vh;line-height:1.5;overflow-x:hidden;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;min-height:100vh;display:flex;flex-direction:column}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{border:1px solid transparent}button:disabled,input:disabled,textarea:disabled,select:disabled{cursor:not-allowed}input,textarea,select{width:100%;border-radius:var(--radius-md);border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background-color var(--transition-fast)}input::placeholder,textarea::placeholder{color:var(--text-muted)}textarea{resize:vertical}select option{background:#0f172a;color:var(--text-primary)}input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:none;border-color:#38bdf8a6;box-shadow:0 0 0 4px #38bdf829}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-secondary);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.glass{background:linear-gradient(180deg,#0f172ae0,#0f172ab8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-color);box-shadow:var(--shadow-md)}.gradient-text{background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}.btn-primary{background:var(--accent-gradient);color:#fff;padding:.75rem 1.5rem;border-radius:var(--radius-md);border:none;font-weight:600;cursor:pointer;transition:opacity var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);box-shadow:0 18px 40px -24px #38bdf8bf}.btn-primary:hover{opacity:.96;transform:translateY(-1px)}.container{width:min(1200px,100%);margin:0 auto;padding:0 var(--spacing-md) 4rem}.btn-primary,.btn-secondary,.btn-ghost,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;transition:transform var(--transition-fast),border-color var(--transition-fast),background-color var(--transition-fast),color var(--transition-fast),opacity var(--transition-fast)}.btn-secondary{background:#38bdf81f;color:var(--accent-primary);border:1px solid rgba(56,189,248,.22);padding:.75rem 1.25rem;border-radius:var(--radius-md)}.btn-ghost,.icon-button{background:var(--bg-muted);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:.75rem 1.25rem}.btn-secondary:hover,.btn-ghost:hover,.icon-button:hover{border-color:#38bdf859;background:#38bdf81f;transform:translateY(-1px)}.icon-button{width:44px;height:44px;padding:0;border-radius:var(--radius-full);color:var(--text-secondary)}.input-field{width:100%}.settings-overlay{background:var(--bg-overlay);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.app-shell{padding-top:1.5rem}.app-header{margin-bottom:2.5rem;display:flex;flex-direction:column;gap:1rem}.app-header-top{display:flex;justify-content:flex-end}.app-title{font-size:clamp(2.5rem,6vw,4rem);line-height:1;letter-spacing:-.04em}.app-toolbar{display:flex;justify-content:center}.mode-switcher{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem}.mode-button{min-width:180px;border-radius:var(--radius-full)}.main-layout{width:100%;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem;align-items:stretch}.modal-shell{width:min(960px,100%);margin:0 auto}.modal-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:2rem}.modal-actions{display:flex;flex-wrap:wrap;gap:.75rem}.scene-transition-bar{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.75rem 1rem}.scene-media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}.scene-column,.narration-column{min-width:0}.narration-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(220px,.9fr) minmax(220px,.95fr);gap:1rem;align-items:start}.segment-row{display:grid;grid-template-columns:90px minmax(0,1fr) 44px;gap:1rem;align-items:start}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.settings-tuning-row,.library-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.sticky-action{position:sticky;bottom:1rem;z-index:100;display:flex;justify-content:center;margin-top:2rem;padding-top:.75rem}.sticky-action .btn-primary{min-width:min(420px,100%);justify-content:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin{animation:spin 1s linear infinite}@media(max-width:900px){.scene-media-grid,.narration-grid,.segment-row,.settings-grid{grid-template-columns:1fr}}@media(max-width:720px){.container{padding:0 .75rem 2.5rem}.app-shell{padding-top:1rem}.modal-header,.settings-tuning-row,.library-header{flex-direction:column;align-items:stretch}.modal-actions,.mode-switcher{width:100%}.mode-button,.modal-actions>button,.modal-actions>a,.sticky-action .btn-primary{width:100%}}