*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--c-bg:#000;--c-surface:rgba(18,18,18,0.92);--c-border:rgba(255,255,255,0.12);--c-text:#fff;--c-sub:rgba(255,255,255,0.6);--c-accent:#ff3b30;--c-accent-glow:rgba(255,59,48,0.4);--c-btn:rgba(255,255,255,0.15);--c-btn-hover:rgba(255,255,255,0.25);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--bottom-bar-h:120px;--top-bar-h:64px}
html,body{width:100%;height:100%;overflow:hidden;background:var(--c-bg);color:var(--c-text);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
#app{width:100%;height:100%;position:relative}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity 0.28s cubic-bezier(0.4,0,0.2,1);background:var(--c-bg)}
.screen.active{opacity:1;pointer-events:all}
#camera-view{overflow:hidden}
#preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
#top-bar{position:absolute;top:0;left:0;right:0;height:var(--top-bar-h);padding:calc(var(--safe-top) + 12px) 20px 12px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to bottom,rgba(0,0,0,0.5) 0%,transparent 100%);z-index:10}
#rec-timer{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);border-radius:20px;padding:4px 12px}
#rec-timer.hidden{display:none}
.rec-dot{width:8px;height:8px;border-radius:50%;background:var(--c-accent);animation:blink 1.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.2}}
#timer-display{font-size:13px;font-weight:600;letter-spacing:0.5px;color:var(--c-text);font-variant-numeric:tabular-nums}
.icon-btn{width:40px;height:40px;border:none;border-radius:50%;background:var(--c-btn);backdrop-filter:blur(12px);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s,transform 0.12s;flex-shrink:0}
.icon-btn:active{transform:scale(0.9);background:var(--c-btn-hover)}
.icon-btn svg{width:20px;height:20px;fill:var(--c-text)}
#zoom-container{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:10}
#zoom-labels{display:flex;flex-direction:column;align-items:center}
#zoom-labels span{font-size:10px;color:var(--c-sub);font-weight:500;line-height:2}
#zoom-slider{-webkit-appearance:slider-vertical;appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;width:32px;height:140px;background:transparent;cursor:pointer;outline:none}
#zoom-slider::-webkit-slider-runnable-track{width:3px;background:rgba(255,255,255,0.25);border-radius:2px}
#zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid rgba(255,255,255,0.8);box-shadow:0 2px 8px rgba(0,0,0,0.4);margin-left:-9px}
#bottom-bar{position:absolute;bottom:0;left:0;right:0;height:calc(var(--bottom-bar-h) + var(--safe-bottom));padding:20px 40px calc(var(--safe-bottom) + 20px);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to top,rgba(0,0,0,0.65) 0%,transparent 100%);z-index:10}
#btn-record{width:72px;height:72px;border-radius:50%;border:3px solid #fff;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 0.15s;flex-shrink:0}
#btn-record:active{transform:scale(0.93)}
.record-inner{display:block;width:54px;height:54px;border-radius:50%;background:var(--c-accent);transition:width 0.22s cubic-bezier(0.4,0,0.2,1),height 0.22s cubic-bezier(0.4,0,0.2,1),border-radius 0.22s cubic-bezier(0.4,0,0.2,1)}
#btn-record.recording .record-inner{width:28px;height:28px;border-radius:6px;background:var(--c-accent)}
#btn-record.recording{border-color:rgba(255,255,255,0.6);animation:record-pulse 2s ease-in-out infinite}
@keyframes record-pulse{0%{box-shadow:0 0 0 0 var(--c-accent-glow)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
.gallery-btn{width:52px;height:52px;border-radius:10px;overflow:hidden;border:2px solid rgba(255,255,255,0.3)}
#gallery-thumb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.1)}
#gallery-thumb img{width:100%;height:100%;object-fit:cover}
#gallery-thumb svg{width:24px;height:24px;fill:#fff}
.snapshot-btn{width:52px;height:52px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 0.12s}
.snapshot-btn:active{transform:scale(0.88)}
.snapshot-ring{width:44px;height:44px;border-radius:50%;border:2.5px solid rgba(255,255,255,0.85);background:rgba(255,255,255,0.15);backdrop-filter:blur(4px)}
#gallery-view,#editor-view{background:#0a0a0a;overflow:hidden}
#gallery-header,#editor-header{padding:calc(var(--safe-top) + 16px) 16px 12px;display:flex;align-items:center;gap:12px;background:var(--c-surface);border-bottom:1px solid var(--c-border);flex-shrink:0;backdrop-filter:blur(20px)}
#gallery-header h1,#editor-header h1{font-size:18px;font-weight:600;flex:1}
.spacer{flex:1}
.text-btn{background:transparent;border:none;color:#0a84ff;font-size:15px;font-weight:500;cursor:pointer;padding:4px 8px}
#gallery-tabs,#editor-tabs{display:flex;background:var(--c-surface);border-bottom:1px solid var(--c-border);flex-shrink:0}
.tab,.etab{flex:1;padding:11px;border:none;background:transparent;color:var(--c-sub);font-size:14px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;transition:color 0.15s,border-color 0.15s}
.tab.active,.etab.active{color:var(--c-text);border-bottom-color:#0a84ff}
#gallery-content{flex:1;overflow:hidden;position:relative}
.tab-panel{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px;opacity:0;pointer-events:none;transition:opacity 0.2s}
.tab-panel.active{opacity:1;pointer-events:all}
#video-list{display:flex;flex-direction:column;gap:10px}
.video-card{background:var(--c-surface);border-radius:14px;overflow:hidden;border:1px solid var(--c-border)}
.video-card-thumb{width:100%;aspect-ratio:16/9;background:#1a1a1a;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center}
.video-card-thumb video{width:100%;height:100%;object-fit:cover}
.play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.3)}
.play-overlay svg{width:48px;height:48px;fill:rgba(255,255,255,0.9);filter:drop-shadow(0 2px 8px rgba(0,0,0,0.5))}
.video-card-info{padding:12px;display:flex;align-items:center;justify-content:space-between}
.video-card-meta{display:flex;flex-direction:column;gap:2px}
.video-card-meta span:first-child{font-size:14px;font-weight:500}
.video-card-meta span:last-child{font-size:12px;color:var(--c-sub)}
.video-card-actions{display:flex;gap:8px}
.mini-btn{padding:6px 12px;border-radius:8px;border:1px solid var(--c-border);background:var(--c-btn);color:var(--c-text);font-size:12px;font-weight:500;cursor:pointer}
.mini-btn.danger{border-color:rgba(255,59,48,0.4);color:#ff3b30}
#snapshot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.snap-item{aspect-ratio:1;overflow:hidden;position:relative;cursor:pointer;background:#111}
.snap-item img{width:100%;height:100%;object-fit:cover}
#editor-player{background:#000;flex-shrink:0;display:flex;align-items:center;justify-content:center}
#editor-video{width:100%;max-height:220px;object-fit:contain}
#editor-panels{flex:1;overflow:hidden;position:relative}
.epanel{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px;opacity:0;pointer-events:none;transition:opacity 0.2s;display:flex;flex-direction:column;gap:16px}
.epanel.active{opacity:1;pointer-events:all}
#trim-timeline{background:rgba(255,255,255,0.05);border-radius:10px;padding:20px 12px}
#trim-track{position:relative;height:44px;background:rgba(255,255,255,0.1);border-radius:8px}
#trim-range{position:absolute;top:0;bottom:0;background:rgba(10,132,255,0.3);border-top:2px solid #0a84ff;border-bottom:2px solid #0a84ff}
.trim-handle{position:absolute;top:-4px;bottom:-4px;width:14px;background:#0a84ff;border-radius:4px;cursor:ew-resize;z-index:2;touch-action:none}
#trim-handle-start{left:0;border-radius:6px 2px 2px 6px}
#trim-handle-end{right:0;border-radius:2px 6px 6px 2px}
#trim-playhead{position:absolute;top:-6px;bottom:-6px;width:2px;background:#fff;border-radius:1px;left:0;pointer-events:none;z-index:3}
#trim-times{display:flex;justify-content:space-between;padding:6px 2px 0}
#trim-times span{font-size:12px;color:var(--c-sub);font-variant-numeric:tabular-nums}
#subtitle-list{display:flex;flex-direction:column;gap:8px;flex:1;overflow-y:auto}
#subtitle-status{padding:8px 0}
#sub-status-text{font-size:13px;color:var(--c-sub)}
.subtitle-item{background:rgba(255,255,255,0.05);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;border:1px solid var(--c-border)}
.subtitle-time{font-size:11px;color:#0a84ff;font-variant-numeric:tabular-nums;font-weight:500}
.subtitle-text{font-size:14px;color:var(--c-text);background:transparent;border:none;outline:none;width:100%;resize:none;font-family:inherit;line-height:1.4}
.audio-option{background:rgba(255,255,255,0.05);border-radius:12px;padding:14px 16px;border:1px solid var(--c-border)}
.toggle-label{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:15px}
.toggle{position:relative;display:inline-block;width:48px;height:28px}
.toggle input{display:none}
.slider-toggle{position:absolute;inset:0;background:rgba(255,255,255,0.15);border-radius:28px;transition:background 0.2s;cursor:pointer}
.slider-toggle::before{content:'';position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform 0.2s cubic-bezier(0.4,0,0.2,1);box-shadow:0 1px 4px rgba(0,0,0,0.3)}
.toggle input:checked + .slider-toggle{background:#30d158}
.toggle input:checked + .slider-toggle::before{transform:translateX(20px)}
#audio-progress{padding:8px 0}
#audio-progress.hidden{display:none}
.progress-bar{height:4px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden;margin-bottom:8px}
.progress-fill{height:100%;background:#0a84ff;border-radius:2px;width:0%;transition:width 0.3s ease}
#audio-status{font-size:13px;color:var(--c-sub)}
.action-btn{padding:14px 20px;border-radius:12px;border:none;background:#0a84ff;color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:background 0.15s,transform 0.12s;text-align:center}
.action-btn:active{background:#0066cc;transform:scale(0.98)}
.action-btn.full{width:100%}
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center}
.modal.hidden{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px)}
.modal-box{position:relative;z-index:1;width:100%;max-width:480px;background:#1c1c1e;border-radius:20px 20px 0 0;padding:0 0 calc(var(--safe-bottom) + 16px);box-shadow:0 -8px 40px rgba(0,0,0,0.6);animation:slide-up 0.3s cubic-bezier(0.4,0,0.2,1)}
@keyframes slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-header{padding:18px 20px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--c-border)}
.modal-header h2{font-size:16px;font-weight:600}
.modal-body{padding:16px 20px;display:flex;flex-direction:column;gap:20px}
.setting-group{display:flex;flex-direction:column;gap:10px}
.setting-group label{font-size:13px;color:var(--c-sub);font-weight:500;text-transform:uppercase;letter-spacing:0.5px}
.option-pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:8px 16px;border-radius:20px;border:1px solid var(--c-border);background:rgba(255,255,255,0.06);color:var(--c-text);font-size:14px;font-weight:500;cursor:pointer}
.pill.active{background:#0a84ff;border-color:#0a84ff}
#camera-select{background:rgba(255,255,255,0.08);border:1px solid var(--c-border);border-radius:10px;color:var(--c-text);font-size:14px;padding:10px 12px;width:100%;outline:none;appearance:none}
.modal-box .action-btn{margin:4px 20px 0;width:calc(100% - 40px)}
#toast-container{position:fixed;top:calc(var(--safe-top) + 80px);left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;pointer-events:none;align-items:center}
.toast{background:rgba(30,30,30,0.95);backdrop-filter:blur(12px);color:#fff;padding:10px 18px;border-radius:20px;font-size:13px;font-weight:500;box-shadow:0 4px 20px rgba(0,0,0,0.4);animation:toast-in 0.25s cubic-bezier(0.4,0,0.2,1) forwards;white-space:nowrap}
.toast.out{animation:toast-out 0.25s cubic-bezier(0.4,0,0.2,1) forwards}
.toast.success{border-left:3px solid #30d158}
.toast.error{border-left:3px solid var(--c-accent)}
@keyframes toast-in{from{opacity:0;transform:scale(0.85) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes toast-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.85)}}
#processing-overlay{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center}
#processing-overlay.hidden{display:none}
.processing-box{background:var(--c-surface);border-radius:20px;padding:32px 40px;display:flex;flex-direction:column;align-items:center;gap:16px;border:1px solid var(--c-border)}
.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,0.1);border-top-color:#0a84ff;border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#processing-text{font-size:14px;color:var(--c-sub);text-align:center}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:12px;color:var(--c-sub)}
.empty-state svg{width:48px;height:48px;fill:var(--c-sub);opacity:0.5}
.empty-state p{font-size:15px}
@media(orientation:landscape){#bottom-bar{padding:12px 60px calc(var(--safe-bottom) + 12px)}#zoom-container{right:auto;left:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}}