:root{--bg: #0f172a;--surface: #1e293b;--surface-2: #334155;--text: #f8fafc;--muted: #94a3b8;--primary: #f97316;--primary-text: #0f172a;--danger: #ef4444;--ok: #22c55e;--warn: #eab308;--border: #334155}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button{background:var(--surface-2);color:var(--text);border:1px solid var(--border);padding:.55rem .9rem;border-radius:8px;font:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--primary);color:var(--primary-text);border-color:transparent;font-weight:600}button.danger{background:var(--danger);border-color:transparent}button.link{background:transparent;border:none;padding:.25rem .5rem;color:var(--muted)}button.link.danger{color:var(--danger)}input{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.6rem .75rem;font:inherit;width:100%}.shell{display:flex;flex-direction:column;min-height:100vh}.topbar{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:10}.brand{color:var(--text);text-decoration:none;font-weight:700;letter-spacing:.02em}.upload-badge{margin-left:auto;color:var(--warn);font-variant-numeric:tabular-nums}.hamburger{width:40px;height:40px;padding:0;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:transparent;border:1px solid var(--border)}.hamburger span{width:18px;height:2px;background:var(--text);border-radius:2px}.drawer{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;z-index:20}.drawer-panel{position:absolute;top:0;left:0;bottom:0;width:min(80vw,320px);background:var(--surface);padding:1rem;display:flex;flex-direction:column;gap:.5rem;box-shadow:4px 0 20px #0006}.drawer-user{color:var(--muted);padding:.5rem .25rem;font-size:.85rem}.drawer-item{text-align:left;padding:.75rem .5rem;border-radius:8px;background:transparent;border:1px solid transparent;color:var(--text);text-decoration:none}.drawer-item:hover{background:var(--surface-2)}.drawer-item.primary{background:var(--primary);color:var(--primary-text);font-weight:600}.main{padding:1rem;max-width:760px;width:100%;margin:0 auto}.loading,.empty,.muted{color:var(--muted)}.error{color:var(--danger);padding:.5rem}.warn{background:#eab30826;border:1px solid var(--warn);color:var(--warn);padding:.6rem .8rem;border-radius:8px;margin-bottom:1rem}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:1rem}.login-card{background:var(--surface);padding:1.5rem;border-radius:12px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:.5rem;border:1px solid var(--border)}.login-card h1{margin:0 0 .25rem}.login-card label{color:var(--muted);font-size:.85rem;margin-top:.5rem}.login-card button{margin-top:1rem}.home-head{display:flex;align-items:baseline;justify-content:space-between}.home-head h2{margin:0}.recipe-list{list-style:none;padding:0;margin:1rem 0;display:flex;flex-direction:column;gap:.5rem}.recipe-list a{display:block;padding:.9rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text);text-decoration:none}.recipe-title{font-weight:600}.recipe-meta{font-size:.8rem;color:var(--muted);margin-top:.25rem}.editor-head{display:flex;gap:.5rem;align-items:center;margin-bottom:1rem}.recipe-title-input{font-size:1.1rem;font-weight:600}.steps{display:flex;flex-direction:column;gap:1rem}.add-step{width:100%;margin-top:1rem}.step-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.85rem;display:flex;flex-direction:column;gap:.75rem}.step-head{display:flex;gap:.5rem;align-items:center}.step-seq{color:var(--muted);font-variant-numeric:tabular-nums;min-width:2.25rem}.step-title-input{flex:1}.step-actions{display:flex;gap:.25rem}.step-actions button{padding:.4rem .55rem}.step-body{display:flex;flex-direction:column;gap:.5rem}.media-row{display:flex;flex-direction:column;gap:.35rem}.media-label{font-size:.8rem;color:var(--muted)}.media-label .req{color:var(--danger);margin-left:.25rem}.media-cell{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.thumb-video{width:100%;max-width:320px;border-radius:8px;background:#000}.asmr-list{display:flex;flex-wrap:wrap;gap:.5rem}.clip-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .55rem;background:var(--surface-2);border-radius:999px;font-size:.85rem}.clip-name{color:var(--muted)}.badge{font-size:.75rem;padding:.15rem .5rem;border-radius:999px}.badge.uploading{background:#eab30833;color:var(--warn)}.badge.queued{background:var(--surface-2);color:var(--muted)}.badge.failed{background:#ef444433;color:var(--danger)}.badge.done{background:#22c55e33;color:var(--ok)}.badge.pending{background:var(--surface-2);color:var(--muted)}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;z-index:30;display:grid;place-items:center;padding:1rem}.modal-panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem;max-width:480px;width:100%}.modal-panel h3{margin:0 0 .75rem}.step-caption-input{width:100%;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.5rem .6rem;font:inherit;resize:vertical}.recipe-config{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.75rem;margin-bottom:1rem;display:flex;flex-direction:column;gap:.6rem}.config-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.config-row select{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.4rem .5rem}.seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}.seg button{border:none;border-radius:0;background:transparent;padding:.4rem .8rem}.seg .seg-on{background:var(--primary);color:var(--primary-text);font-weight:600}.render-panel{margin-top:1.5rem;padding:.85rem;background:var(--surface);border:1px solid var(--border);border-radius:12px}.render-panel h3{margin:0 0 .5rem}.render-list{list-style:none;padding:0;margin:.75rem 0 0;display:flex;flex-direction:column;gap:.4rem}.render-item{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.4rem .55rem;background:var(--surface-2);border-radius:8px}.render-time{color:var(--muted);font-size:.8rem}.render-status-queued{background:var(--surface);color:var(--muted);padding:.15rem .5rem;border-radius:999px}.render-status-running{background:#eab30833;color:var(--warn);padding:.15rem .5rem;border-radius:999px}.render-status-ready{background:#22c55e33;color:var(--ok);padding:.15rem .5rem;border-radius:999px}.render-status-failed{background:#ef444433;color:var(--danger);padding:.15rem .5rem;border-radius:999px}.render-item a.link{color:var(--primary);text-decoration:underline}.bgm-page{max-width:760px}.bgm-uploader{display:grid;grid-template-columns:1.4fr 1.4fr auto auto;gap:.5rem;margin:1rem 0}.bgm-uploader select,.bgm-uploader input[type=file]{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.4rem .5rem}.bgm-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.5rem}.bgm-item{display:grid;grid-template-columns:2fr 3fr auto;align-items:center;gap:.6rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.6rem .8rem}.bgm-item audio{width:100%}@media (max-width: 600px){.bgm-uploader,.bgm-item{grid-template-columns:1fr}}.recorder-hint{padding:.25rem .5rem;background:var(--surface-2);border-radius:6px;font-size:.85rem}.editor.editor-fit{height:calc(100dvh - 56px);display:flex;flex-direction:column;padding:0 .75rem;gap:.4rem;overflow:hidden}.editor-fit-head{flex:0 0 auto;padding:.4rem .25rem 0;display:flex;align-items:center;justify-content:space-between;gap:.5rem}.head-controls{display:flex;gap:.4rem}.recipe-title-link{font-size:.95rem;font-weight:600;text-decoration:none;color:var(--text)}.editor-fit-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.step-editor{flex:1 1 auto;min-height:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.6rem .75rem .65rem;display:flex;flex-direction:column;gap:.5rem}.step-preview{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:.4rem}.preview-frame{flex:1 1 auto;min-height:0;position:relative;width:100%;background:#000;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}.preview-frame video{max-width:100%;max-height:100%;width:auto;height:auto;display:block;background:#000;transition:transform 80ms linear}.step-title-text{flex:1 1 auto;font-size:.95rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.step-menu-btn{background:transparent;border:1px solid var(--border);font-size:1.1rem;width:36px;height:36px;border-radius:8px;padding:0}.step-menu-wrap{position:relative}.step-menu{position:absolute;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--border);border-radius:10px;min-width:180px;padding:.4rem;z-index:25;display:flex;flex-direction:column;gap:.15rem;box-shadow:0 8px 24px #00000073}.step-menu-item{text-align:left;background:transparent;border:0;padding:.55rem .6rem;border-radius:6px;color:var(--text)}.step-menu-item:hover{background:var(--surface-2)}.step-menu-item.danger{color:var(--danger)}.step-menu-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:24}.caption-panel textarea{width:100%;resize:vertical;min-height:6em;background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.6rem;font:inherit}.modal-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.75rem}.advance-hint{display:flex;align-items:center;justify-content:space-between;font-size:.85rem;padding-top:.25rem}.trim-slider{-webkit-user-select:none;user-select:none;touch-action:none}.trim-rail{position:relative;height:56px;margin:.5rem 0 .25rem;cursor:pointer}.trim-rail-bg{position:absolute;left:0;right:0;top:22px;height:12px;background:var(--surface-2);border-radius:6px}.trim-rail-selected{position:absolute;top:22px;height:12px;background:var(--primary);border-radius:6px}.trim-playhead{position:absolute;top:14px;bottom:14px;width:2px;background:#fff;pointer-events:none;transform:translate(-1px)}.trim-handle{position:absolute;top:6px;bottom:6px;width:16px;margin-left:-8px;background:var(--text);border:2px solid var(--primary);border-radius:6px;cursor:ew-resize;touch-action:none;display:flex;align-items:flex-end;justify-content:center}.trim-handle:before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--primary);border-radius:1px;box-shadow:4px 0 0 var(--primary)}.trim-handle-time{position:absolute;top:-1.4rem;font-size:.72rem;color:var(--muted);white-space:nowrap}.trim-readout{font-size:.78rem}.audio-block{background:var(--surface-2);border:2px solid transparent;border-radius:10px;padding:.6rem;display:flex;flex-direction:column;gap:.5rem}.audio-block.audio-short{border-color:var(--danger);box-shadow:0 0 0 2px #ef44442e}.audio-block audio{width:100%}.badge.audio-warn{background:#ef44442e;color:var(--danger);margin-left:.4rem}.audio-offset-slider{display:flex;flex-direction:column;gap:.35rem}.audio-offset-rail{position:relative;height:8px;background:var(--surface);border-radius:4px;overflow:hidden}.audio-offset-block{position:absolute;top:0;bottom:0;background:var(--primary);border-radius:4px;opacity:.85}.audio-offset-slider input[type=range]{width:100%;accent-color:var(--primary)}.audio-offset-row{display:flex;justify-content:space-between;align-items:center;font-size:.78rem}.preview-controls{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.25rem 0}.preview-controls .muted{font-size:.8rem}.zoom-slider{display:flex;gap:.6rem;align-items:center}.zoom-slider input[type=range]{flex:1;accent-color:var(--primary)}.thumb-strip{flex:0 0 auto;background:var(--bg);padding:.35rem 0 .4rem;margin:0;z-index:5}.thumb-strip-fit{padding-top:.25rem}.thumb-rail{display:flex;gap:.4rem;padding:0 .25rem;overflow-x:auto;scrollbar-width:thin}.thumb{flex:0 0 auto;width:56px;height:70px;background:var(--surface);border:2px solid var(--border);border-radius:8px;padding:0;position:relative;overflow:hidden;cursor:pointer}.thumb video{width:100%;height:100%;object-fit:cover;display:block}.thumb-empty{width:100%;height:100%;display:grid;place-items:center;color:var(--muted);font-size:.6rem;background:var(--surface-2)}.thumb-seq{position:absolute;left:4px;bottom:3px;background:#000000b3;color:#fff;font-size:.62rem;padding:.05rem .3rem;border-radius:4px}.thumb-active{border-color:var(--primary);box-shadow:0 0 0 2px #f9731659}.thumb-add{display:grid;place-items:center;background:var(--surface-2);color:var(--primary);font-size:1.1rem;font-weight:700}.settings-page{padding:.75rem;max-width:760px;margin:0 auto}.settings-head{display:flex;flex-direction:column;gap:.25rem;margin-bottom:1rem}.settings-head h2{margin:.25rem 0 0}.settings-section{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.85rem;margin-bottom:.85rem;display:flex;flex-direction:column;gap:.5rem}.settings-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.settings-section .help-text{font-size:.85rem}.danger-section{border-color:#ef444466}.editor-fit{gap:.25rem;padding:0 .5rem}.editor-fit .step-editor{padding:.45rem .55rem;gap:.35rem;border-radius:10px}.editor-fit .step-head{gap:.4rem}.editor-fit .step-menu-btn{width:30px;height:30px;font-size:1rem}.editor-fit .step-seq{min-width:1.8rem;font-size:.85rem}.editor-fit .step-title-text{font-size:.85rem}.editor-fit button{padding:.32rem .6rem;border-radius:6px;font-size:.85rem}.editor-fit button.tiny{padding:.22rem .55rem;font-size:.78rem}.editor-fit .preview-controls{padding:0;gap:.35rem}.editor-fit .preview-controls .muted{font-size:.72rem}.editor-fit .trim-slider{-webkit-user-select:none;user-select:none}.editor-fit .trim-rail{height:28px;margin:.15rem 0 .05rem;touch-action:none}.editor-fit .trim-rail-bg,.editor-fit .trim-rail-selected{top:12px;height:4px;border-radius:3px}.editor-fit .trim-handle{top:0;bottom:0;width:28px;margin-left:-14px;border-radius:6px;border-width:0;background:transparent;touch-action:none}.editor-fit .trim-handle:before{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:6px;margin-left:-3px;background:var(--primary);border-radius:3px;box-shadow:0 0 0 2px #0006}.editor-fit .trim-handle-time{display:none}.editor-fit .trim-playhead{top:4px;bottom:4px}.editor-fit .trim-readout{font-size:.7rem}.preview-frame{position:relative}.right-controls{position:absolute;top:8px;right:6px;bottom:8px;width:52px;display:flex;flex-direction:column;align-items:center;gap:.5rem;pointer-events:auto;z-index:2}.zoom-vertical{flex:1 1 auto;width:26px;display:flex;flex-direction:column;align-items:center}.icon-btn{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:#0009;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:1.4rem;line-height:1;padding:0;display:grid;place-items:center;cursor:pointer}.icon-btn:hover{background:#000000bf}.icon-btn-danger{background:#ef4444b3;border-color:#ffffff59}.icon-btn-danger:hover{background:#ef4444e6}.icon-btn-record{background:#f97316d9;border-color:#ffffff59}.icon-btn-record:hover{background:#f97316}.zoom-vertical input[type=range]{flex:1 1 auto;-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical;writing-mode:vertical-lr;width:18px;background:transparent;accent-color:var(--primary);margin:0}.zoom-readout{font-size:.62rem;color:#fff;background:#0000008c;padding:.05rem .3rem;border-radius:4px;margin-top:.15rem}.empty-video-slot{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;background:var(--surface-2);border:2px dashed var(--border);border-radius:12px;padding:1rem}.editor-fit .record-cta,.record-cta{font-size:1.05rem!important;font-weight:700!important;padding:.85rem 1.6rem!important;border-radius:999px!important;letter-spacing:.02em;box-shadow:0 6px 18px #f9731640}.record-hint{font-size:.78rem}.editor-fit .record-cta-mid,.record-cta-mid{font-size:.92rem!important;font-weight:600!important;padding:.5rem 1rem!important;border-radius:999px!important;align-self:flex-start}.record-row{display:flex;flex-direction:row;align-items:center;gap:.6rem}.editor-fit .audio-block{padding:.4rem .55rem;gap:.25rem;border-radius:8px;border-width:1px}.editor-fit .audio-block .media-label{font-size:.78rem}.editor-fit .audio-block audio{width:100%;height:28px}.editor-fit .audio-block .media-cell{gap:.4rem;align-items:center}.editor-fit .badge.audio-warn{font-size:.65rem;padding:.05rem .4rem}.editor-fit .audio-offset-rail{height:5px}.editor-fit .audio-offset-slider input[type=range]{height:18px}.editor-fit .audio-offset-row{font-size:.7rem}.editor-fit .badge{font-size:.68rem;padding:.05rem .4rem}.editor-fit .step-editor .link.danger{font-size:.72rem;padding:.1rem .3rem}.recorder{display:flex;flex-direction:column;gap:.75rem}.recorder-preview{width:100%;border-radius:10px;background:#000;aspect-ratio:9/16;max-height:60vh;object-fit:cover}.recorder-audio-hint{color:var(--muted);padding:1rem 0;text-align:center}.recorder-controls{display:flex;gap:.5rem;align-items:center;justify-content:flex-end}.rec-dot{color:var(--danger);margin-right:auto;font-variant-numeric:tabular-nums}