:root{--bg:#1a1a1c;--bg-elevated:#242428;--bg-hover:#2e2e33;--border:#3a3a40;--text:#f2f2f4;--text-muted:#9a9aa3;--mint:#50dc78;--mint-dim:#3bb85f;--danger:#ff6b6b;--radius:12px;--tap:44px;color:var(--text);background-color:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.5}*,:before,:after{box-sizing:border-box}body{min-height:100dvh;margin:0}#root{min-height:100dvh}button{font:inherit;cursor:pointer}input[type=range]{accent-color:var(--mint);min-height:var(--tap)}a{color:var(--mint)}.app{flex-direction:column;gap:1.25rem;max-width:640px;min-height:100dvh;margin:0 auto;padding:1rem 1rem 2.5rem;display:flex}.app-header{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.app-title h1{letter-spacing:-.02em;margin:0;font-size:1.5rem;font-weight:700}.app-title p{color:var(--text-muted);margin:.25rem 0 0;font-size:.9rem}.brand-mark{width:var(--tap);height:var(--tap);background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;text-decoration:none;transition:border-color .15s,transform .15s;display:flex}.brand-mark:hover{border-color:var(--mint);transform:scale(1.04)}.brand-mark svg{width:28px;height:28px}.drop-zone{border:2px dashed var(--border);border-radius:var(--radius);text-align:center;background:var(--bg-elevated);padding:1.5rem 1rem;transition:border-color .15s,background .15s}.drop-zone.drag-over{border-color:var(--mint);background:var(--bg-hover)}.drop-zone label{min-height:var(--tap);background:var(--mint);color:#0d1a12;cursor:pointer;border-radius:10px;justify-content:center;align-items:center;padding:0 1.25rem;font-weight:600;display:inline-flex}.drop-zone label:hover{background:var(--mint-dim)}.drop-zone input{display:none}.drop-zone p{color:var(--text-muted);margin:.75rem 0 0;font-size:.85rem}.clip-list{flex-direction:column;gap:.75rem;margin:0;padding:0;list-style:none;display:flex}.clip-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);grid-template-columns:auto 1fr auto;align-items:start;gap:.75rem;padding:.75rem;display:grid}.clip-card.dragging{opacity:.85;border-color:var(--mint)}.clip-drag{min-width:var(--tap);min-height:var(--tap);color:var(--text-muted);cursor:grab;touch-action:none;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;display:flex}.clip-drag:active{cursor:grabbing}.clip-thumb{object-fit:cover;background:#000;border-radius:8px;width:72px;height:72px}.clip-body{min-width:0}.clip-name{white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;font-weight:600;overflow:hidden}.clip-meta{color:var(--text-muted);margin-top:.15rem;font-size:.8rem}.trim-block{margin-top:.65rem}.trim-block summary{cursor:pointer;color:var(--mint);min-height:var(--tap);align-items:center;font-size:.85rem;list-style:none;display:flex}.trim-block summary::-webkit-details-marker{display:none}.trim-sliders{flex-direction:column;gap:.35rem;margin-top:.5rem;display:flex}.trim-sliders label{color:var(--text-muted);justify-content:space-between;font-size:.75rem;display:flex}.clip-remove{min-width:var(--tap);min-height:var(--tap);color:var(--text-muted);background:0 0;border:none;border-radius:8px}.clip-remove:hover{color:var(--danger);background:#ff6b6b1a}.stitch-btn{border-radius:var(--radius);background:var(--mint);color:#0d1a12;letter-spacing:.02em;border:none;width:100%;min-height:52px;font-size:1.1rem;font-weight:700}.stitch-btn:hover:not(:disabled){background:var(--mint-dim)}.stitch-btn:disabled{opacity:.45;cursor:not-allowed}.status-panel{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}.status-panel h2{margin:0 0 .5rem;font-size:.9rem;font-weight:600}.status-message{color:var(--text-muted);margin:0 0 .75rem;font-size:.85rem}.progress-bar{background:var(--bg-hover);border-radius:4px;height:8px;overflow:hidden}.progress-fill{background:var(--mint);width:0%;height:100%;transition:width .2s}.download-row{flex-direction:column;gap:.5rem;margin-top:1rem;display:flex}.download-btn{min-height:var(--tap);border:1px solid var(--mint);color:var(--mint);background:0 0;border-radius:10px;font-weight:600}.download-btn:hover{background:#50dc781f}.offline-note{color:var(--text-muted);margin:0;font-size:.75rem;line-height:1.4}.error-text{color:var(--danger);margin:.5rem 0 0;font-size:.85rem}.empty-hint{text-align:center;color:var(--text-muted);padding:1rem;font-size:.9rem}