:root{--bg: #0b0c10;--panel: #101218;--text: #eaf2f8;--muted: #9fb3c8;--accent: #6aa9ff;--accent-2: #34d399;--danger: #ef4444}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}.container{max-width:1080px;margin:0 auto;padding:20px}.card{background:var(--panel);border:1px solid #1f2430;border-radius:16px;padding:16px;box-shadow:0 6px 24px #00000040}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:8px}button,input[type=file],input[type=range],select{background:#151a22;color:var(--text);border:1px solid #2a3242;padding:8px 12px;border-radius:10px}button.primary{background:var(--accent);color:#081018;border:none}button.success{background:var(--accent-2);color:#04120e;border:none}button.danger{background:var(--danger);color:#fff;border:none}h1,h2{margin:0 0 12px}.subtitle{color:var(--muted);font-size:14px}.list{max-height:400px;overflow:auto;padding:8px;border:1px solid #1f2430;border-radius:10px;background:#0f121a}.line{padding:6px 8px;border-radius:8px;cursor:pointer}.line:hover{background:#151a22}.line.active{background:#1a2130;border:1px solid #263042}.time{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);width:66px;display:inline-block}.text{white-space:pre-wrap}.small{font-size:12px;color:var(--muted)}.range-group{display:flex;align-items:center;gap:8px}.range-group input[type=range]{width:200px}.footer{margin-top:12px;font-size:12px;color:var(--muted)}.tabbar{position:fixed;left:0;right:0;bottom:0;height:56px;background:#0e1016;border-top:1px solid #1f2430;display:grid;grid-template-columns:repeat(4,1fr)}.tabitem{border:0;background:transparent;color:var(--muted);font-weight:600}.tabitem.active{color:var(--text)}.container{padding-bottom:76px}.progress{position:relative;height:16px;width:100%;border-radius:999px;-webkit-user-select:none;user-select:none}.progress-track{position:absolute;top:0;right:0;bottom:0;left:0;background:#1a2130;border:1px solid #2a3242;border-radius:999px}.progress-played{position:absolute;left:0;top:0;bottom:0;background:#3b82f6;border-radius:999px 0 0 999px}.progress-ab{position:absolute;top:-2px;bottom:-2px;background:#34d39933;border:1px solid rgba(52,211,153,.7);border-radius:8px;pointer-events:none}.progress-knob{position:absolute;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:#3b82f6;box-shadow:0 0 0 2px #0b0c10}.progress.dragging .progress-knob{box-shadow:0 0 0 4px #3b82f659}