:root{--background:#0f1117;--foreground:#e8eaed;--surface:#1a1d27;--surface-hover:#242836;--border:#2e3344;--primary:#5b8def;--primary-hover:#4a7de0;--danger:#ef5b5b;--muted:#9aa3b2}html,body{max-width:100vw;min-height:100%;overflow-x:hidden}body{color:var(--foreground);background:var(--background);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box;margin:0;padding:0}button,input,select,textarea{font:inherit}.app{max-width:1400px;margin:0 auto;padding:2rem 1.5rem 3rem}.app-header{margin-bottom:2rem}.app-header-row{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.app-header h1{margin-bottom:.5rem;font-size:2rem}.app-header p{color:var(--muted)}.user-menu{flex-shrink:0;align-items:center;gap:.75rem;display:flex}.user-menu-label{color:var(--muted);font-size:.875rem}.btn-small{padding:.4rem .75rem;font-size:.8125rem}.auth-loading{background:var(--background);justify-content:center;align-items:center;min-height:100vh;display:flex}.login-screen{background:var(--background);justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.login-card{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:12px;flex-direction:column;gap:1rem;width:100%;max-width:400px;padding:2rem;display:flex}.login-card h1{font-size:1.75rem}.login-card p{color:var(--muted);font-size:.9375rem}.login-google-btn{width:100%}.login-access-denied{text-align:left;margin-bottom:0;font-size:.9375rem}.alert-error{border:1px solid var(--danger);color:#ffb4b4;background:#ef5b5b26;border-radius:8px;margin-bottom:1.5rem;padding:1rem}.transcription-cost-banner{color:var(--foreground);background:#5b8def1f;border:1px solid #5b8def59;border-radius:8px;margin-bottom:1.5rem;padding:.875rem 1rem;font-size:.875rem}.transcription-cost-banner p{color:var(--muted)}.uploader{border:2px dashed var(--border);text-align:center;cursor:pointer;background:var(--surface);border-radius:12px;padding:4rem 2rem;transition:border-color .2s,background .2s}.uploader:hover,.uploader-dragging{border-color:var(--primary);background:var(--surface-hover)}.uploader-title{margin-bottom:.5rem;font-size:1.125rem}.uploader-hint{color:var(--muted);font-size:.875rem}.status-panel{background:var(--surface);border-radius:12px;flex-direction:column;align-items:center;gap:1rem;padding:4rem 2rem;display:flex}.spinner{border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.editor-workspace{flex-direction:column;gap:1rem;display:flex}.editor-main{grid-template-columns:7fr 3fr;align-items:start;gap:1rem;display:grid}.editor-video-column{min-width:0}.editor-video-column .phone-preview-shell{height:100%;min-height:420px}.editor-style-column{flex-direction:column;gap:1rem;min-width:0;display:flex}.editor-style-column .style-panel{height:auto}.editor-footer{align-items:start;display:flex}.phone-preview-shell{border:1px solid var(--border);background:radial-gradient(circle at 50% 0,#5b8def14,#0000 55%),linear-gradient(#151820 0%,#0f1117 100%);border-radius:12px;justify-content:center;align-items:center;padding:2.5rem 1.5rem;display:flex}.phone-frame{background:linear-gradient(160deg,#454b57 0%,#2b303a 45%,#1e222b 100%);width:fit-content;position:relative;box-shadow:0 28px 56px #00000080,inset 0 1px #ffffff1a,inset 0 -1px #00000059}.phone-frame--portrait{border-radius:clamp(28px,12%,46px);padding:clamp(10px,3.5%,14px)}.phone-frame--landscape{border-radius:clamp(24px,10%,38px);padding:clamp(10px,3%,14px) clamp(12px,3.5%,16px)}.phone-screen{width:var(--screen-width,260px);height:var(--screen-height,460px);cursor:pointer;background:#000;position:relative;overflow:hidden}.phone-frame--portrait .phone-screen{border-radius:clamp(20px,8%,36px)}.phone-frame--landscape .phone-screen{border-radius:clamp(18px,7%,28px)}.phone-screen video{object-fit:fill;pointer-events:none;background:#000;width:100%;height:100%;display:block}.phone-media-controls{z-index:3;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.phone-media-control{aspect-ratio:1;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0000008c;border:none;border-radius:50%;justify-content:center;align-items:center;width:64px;min-width:64px;height:64px;min-height:64px;padding:0;transition:opacity .15s,transform .15s,background .15s;display:flex;position:absolute;box-shadow:0 8px 24px #00000059}.phone-media-control svg{fill:currentColor;flex-shrink:0;width:26px;height:26px;display:block}.phone-media-control:not(.phone-media-control--pause) svg{margin-left:3px}.phone-media-control--hidden,.phone-media-control--pause{opacity:0;visibility:hidden}.phone-frame:hover .phone-media-control--pause:not(.phone-media-control--hidden){opacity:1;visibility:visible}.phone-frame:hover .phone-media-control--pause:not(.phone-media-control--hidden):hover,.phone-frame:hover .phone-media-control:not(.phone-media-control--hidden):not(.phone-media-control--pause){background:#000000b8;transform:scale(1.05)}.phone-home-indicator{z-index:2;pointer-events:none;background:#ffffff61;border-radius:999px;width:min(108px,34%);height:4px;position:absolute;bottom:2%;left:50%;transform:translate(-50%)}.phone-home-indicator--landscape{width:4px;height:min(108px,34%);inset:50% 2% auto auto;transform:translateY(-50%)}.phone-button{z-index:1;background:linear-gradient(#5a606b 0%,#3a404a 100%);border-radius:2px;position:absolute}.phone-frame--portrait .phone-button--silent{width:3px;height:5%;min-height:18px;top:20%;left:-3px}.phone-frame--portrait .phone-button--volume-up{width:3px;height:10%;min-height:32px;top:28%;left:-3px}.phone-frame--portrait .phone-button--volume-down{width:3px;height:10%;min-height:32px;top:40%;left:-3px}.phone-frame--portrait .phone-button--power{width:3px;height:14%;min-height:44px;top:32%;right:-3px}.phone-frame--landscape .phone-button--silent,.phone-frame--landscape .phone-button--volume-up,.phone-frame--landscape .phone-button--volume-down{height:3px;top:-3px}.phone-frame--landscape .phone-button--silent{width:5%;min-width:18px;left:20%}.phone-frame--landscape .phone-button--volume-up{width:10%;min-width:32px;left:28%}.phone-frame--landscape .phone-button--volume-down{width:10%;min-width:32px;left:40%}.phone-frame--landscape .phone-button--power{width:14%;min-width:44px;height:3px;inset:auto auto -3px 32%}.subtitle-zone{pointer-events:none;z-index:1;justify-content:center;display:flex;position:absolute;top:10px;bottom:10px;left:50%;transform:translate(-50%)}.subtitle-zone--top{align-items:flex-start}.subtitle-zone--center{align-items:center}.subtitle-zone--bottom{align-items:flex-end}.subtitle-box{text-align:center;white-space:pre-wrap;box-sizing:border-box;border-radius:4px;width:100%;max-width:100%;padding:.4rem .8rem;line-height:1.3}.style-panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem}.style-panel h2{margin-bottom:1rem;font-size:1rem}.style-grid{gap:.75rem;display:grid}.style-grid label{color:var(--muted);flex-direction:column;gap:.35rem;font-size:.8125rem;display:flex}.style-grid input,.style-grid select{background:var(--background);border:1px solid var(--border);color:var(--foreground);border-radius:6px;padding:.5rem}.style-grid input[type=range].style-range{width:100%;min-width:0;height:1.25rem;accent-color:var(--primary);cursor:pointer;background:0 0;border:none;flex:1;padding:0}.style-slider-row{align-items:center;gap:.75rem;width:100%;display:flex}.style-slider-value{text-align:right;min-width:2.75rem;color:var(--foreground);font-variant-numeric:tabular-nums;flex-shrink:0;font-size:.8125rem}.style-toggle{justify-content:space-between;align-items:center;flex-direction:row!important}.style-toggle input[type=checkbox]{width:1rem;height:1rem;accent-color:var(--primary);cursor:pointer}.style-field-disabled,.color-field-disabled{opacity:.5}.color-picker{background:var(--background);border:1px solid var(--border);cursor:pointer;border-radius:6px;align-items:center;gap:.625rem;padding:.375rem .5rem;display:flex;position:relative}.color-picker:focus-within{border-color:var(--primary)}.color-swatch{border:1px solid var(--border);border-radius:4px;flex-shrink:0;width:1.75rem;height:1.75rem}.color-picker input[type=color]{opacity:0;cursor:pointer;border:none;width:100%;height:100%;padding:0;position:absolute;inset:0}.color-hex{color:var(--foreground);font-variant-numeric:tabular-nums;flex:1;font-size:.8125rem}.timeline-wrapper{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem}.timeline-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.timeline-header h2{font-size:1rem}.timeline-container{border:1px solid var(--border);background:var(--background);scrollbar-width:thin;scrollbar-color:#5b8def80 var(--surface);border-radius:8px;height:120px;position:relative;overflow:auto hidden}.timeline-container::-webkit-scrollbar{height:10px}.timeline-container::-webkit-scrollbar-track{background:var(--surface);border-radius:0 0 8px 8px}.timeline-container::-webkit-scrollbar-thumb{border:2px solid var(--surface);background:#5b8def59;border-radius:999px}.timeline-container::-webkit-scrollbar-thumb:hover{background:#5b8def99}.timeline-content{min-width:100%;height:100%;position:relative}.timeline-ruler{border-bottom:1px solid var(--border);background:var(--surface);cursor:pointer;height:28px;position:relative}.timeline-ruler-mark{border-left:1px solid var(--border);height:100%;color:var(--muted);align-items:center;padding-left:4px;font-size:.6875rem;display:flex;position:absolute;top:0}.timeline-track{height:calc(100% - 28px);position:relative;overflow:hidden}.timeline-spectrogram{z-index:0;pointer-events:none;object-fit:fill;height:100%;display:block;position:absolute;inset:0}.timeline-spectrogram--loading{opacity:0;background:linear-gradient(90deg,#141824e6 0%,#283250e6 50%,#141824e6 100%) 0 0/200% 100%;animation:1.4s ease-in-out infinite timeline-spectrogram-loading}.timeline-spectrogram--ready{opacity:.9}.timeline-spectrogram--error{opacity:0;background:#141824f2}@keyframes timeline-spectrogram-loading{0%{background-position:100% 0}to{background-position:-100% 0}}.timeline-block{border:1px solid var(--primary);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;z-index:1;background:#1418248c;border-radius:6px;align-items:stretch;height:56px;display:flex;position:absolute;top:12px;overflow:hidden}.timeline-block-active{background:#14182459;box-shadow:0 0 0 2px #5b8def66}.timeline-block-body{cursor:grab;flex:1;align-items:center;padding:0 4px;display:flex;overflow:hidden}.timeline-block-body:active{cursor:grabbing}.timeline-block-text{white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;overflow:hidden}.timeline-handle{cursor:ew-resize;background:#5b8def99;flex-shrink:0;width:8px}.timeline-handle:hover{background:var(--primary)}.timeline-playhead{pointer-events:auto;cursor:ew-resize;z-index:20;touch-action:none;background:0 0;width:16px;margin-left:-8px;position:absolute;top:0;bottom:0}.timeline-playhead:after{content:"";background:var(--danger);width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.timeline-playhead:before{content:"";border-left:6px solid #0000;border-right:6px solid #0000;border-top:8px solid var(--danger);pointer-events:none;position:absolute;top:0;left:50%;transform:translate(-50%)}.modal-backdrop{z-index:100;background:#0009;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-content{background:var(--surface);border:1px solid var(--border);border-radius:12px;width:100%;max-width:480px;padding:1.5rem}.modal-content h2{margin-bottom:.75rem;font-size:1.125rem}.modal-times{color:var(--muted);gap:1rem;margin-bottom:.75rem;font-size:.8125rem;display:flex}.modal-textarea{background:var(--background);border:1px solid var(--border);width:100%;color:var(--foreground);resize:vertical;border-radius:6px;margin-bottom:1rem;padding:.75rem}.modal-actions{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.modal-actions-right{gap:.5rem;display:flex}.btn-primary,.btn-secondary,.btn-danger{cursor:pointer;border:none;border-radius:6px;padding:.5rem 1rem;font-size:.875rem}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-hover)}.btn-secondary{background:var(--surface-hover);color:var(--foreground);border:1px solid var(--border);align-items:center;display:inline-flex}.btn-danger{color:#ffb4b4;border:1px solid var(--danger);background:#ef5b5b26}button:disabled{opacity:.5;cursor:not-allowed}.export-actions{flex-wrap:wrap;gap:.75rem;display:flex}@media (max-width:960px){.editor-main{grid-template-columns:1fr}.editor-video-column .phone-preview-shell{min-height:auto}}