:root {
    --bg-0: #07070c;
    --bg-1: #0e0e16;
    --bg-2: #161623;
    --bg-3: #1e1e30;
    --bg-4: #26263d;
    --accent: #6b5ce0;
    --accent-2: #9a86f5;
    --accent-glow: rgba(107, 92, 224, 0.18);
    --text: #eeeef5;
    --text-dim: #7a7a92;
    --text-faint: #4a4a60;
    --red: #f8556a;
    --amber: #ffb020;
    --green: #22d3a0;
    --border: rgba(255,255,255,0.06);
    --r: 14px;
    --r-sm: 9px;
    --skin: "";
}

/* ===== Seasonal Skins ===== */

/* Spring 🌸 */
[data-skin="spring"] {
    --bg-0: #E8F5E9;
    --bg-1: #F1F8E9;
    --bg-2: #FFFFFF;
    --bg-3: #F1F8E9;
    --bg-4: #E8F5E9;
    --accent: #66BB6A;
    --accent-2: #A5D6A7;
    --accent-glow: rgba(102,187,106,0.25);
    --text: #2E7D32;
    --text-dim: #689F38;
    --text-faint: #A5D6A7;
    --red: #FF8A65;
    --amber: #FF8A65;
    --green: #66BB6A;
    --border: rgba(102,187,106,0.12);
}

/* Summer 🌊 */
[data-skin="summer"] {
    --bg-0: #E3F2FD;
    --bg-1: #E1F5FE;
    --bg-2: #FFFFFF;
    --bg-3: #E3F2FD;
    --bg-4: #BBDEFB;
    --accent: #1E88E5;
    --accent-2: #64B5F6;
    --accent-glow: rgba(30,136,229,0.25);
    --text: #0D47A1;
    --text-dim: #1565C0;
    --text-faint: #64B5F6;
    --red: #FFB300;
    --amber: #FFB300;
    --green: #1E88E5;
    --border: rgba(30,136,229,0.12);
}

/* Autumn 🍂 */
[data-skin="autumn"] {
    --bg-0: #FFF8E1;
    --bg-1: #FFFDE7;
    --bg-2: #FFFFFF;
    --bg-3: #FFF8E1;
    --bg-4: #FFF3E0;
    --accent: #E65100;
    --accent-2: #FF8A65;
    --accent-glow: rgba(230,81,0,0.25);
    --text: #3E2723;
    --text-dim: #795548;
    --text-faint: #BCAAA4;
    --red: #E65100;
    --amber: #F9A825;
    --green: #F9A825;
    --border: rgba(230,81,0,0.12);
}

/* Winter ❄️ */
[data-skin="winter"] {
    --bg-0: #ECEFF1;
    --bg-1: #E0F7FA;
    --bg-2: #FFFFFF;
    --bg-3: #ECEFF1;
    --bg-4: #CFD8DC;
    --accent: #5C6BC0;
    --accent-2: #9FA8DA;
    --accent-glow: rgba(92,107,192,0.25);
    --text: #263238;
    --text-dim: #546E7A;
    --text-faint: #9FA8DA;
    --red: #26C6DA;
    --amber: #26C6DA;
    --green: #5C6BC0;
    --border: rgba(92,107,192,0.12);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;
    background:var(--bg-0);color:var(--text);min-height:100vh;overflow-x:hidden;
    -webkit-font-smoothing:antialiased;letter-spacing:-0.006em;
}
#app{max-width:480px;margin:0 auto;min-height:100vh;position:relative}

.screen{display:none;min-height:100vh;padding:20px 16px;padding-bottom:70px;animation:fade .4s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ===== Hero ===== */
.hero{text-align:center;padding:36px 0 16px;position:relative}

/* Top nav bar */
.top-nav{display:flex;align-items:center;gap:8px;padding:8px 0 12px}
.nav-logo{width:28px;height:28px}
.nav-title{font-size:18px;font-weight:700;flex:1;color:var(--accent-2);letter-spacing:-0.01em}
.nav-right{display:flex;align-items:center;gap:6px}

/* User bar (legacy, hidden if top-nav used) */
.user-bar{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px}
.logo-icon-img{width:60px;height:60px;position:relative}

/* Skin switcher */
.skin-switcher{display:flex;justify-content:center;gap:6px;margin-bottom:16px}
.skin-btn{
    width:36px;height:36px;border-radius:50%;background:var(--bg-2);border:2px solid var(--border);
    font-size:16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;
}
.skin-btn.active{border-color:var(--accent);box-shadow:0 0 8px var(--accent-glow)}
.nav-deco{width:100%;height:auto;max-height:80px;object-fit:cover;border-radius:0 0 var(--r) var(--r);margin-bottom:12px}
.track-icon-img{width:24px;height:24px}
.track-btn-icon{width:16px;height:16px;opacity:.7}
.logo-icon{font-size:44px;position:relative}
.hero h1{
    font-size:30px;font-weight:700;margin-top:6px;position:relative;color:var(--text);letter-spacing:-0.02em;
}
.subtitle{color:var(--text-dim);font-size:13px;margin-top:4px;position:relative}

/* ===== User bar ===== */
.user-bar{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px}
.user-greeting{font-size:12px;color:var(--text-dim)}

/* ===== Carousel ===== */
.carousel{position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:14px;height:140px}
.carousel-track{display:flex;transition:transform .4s ease;height:100%}
.carousel-slide{min-width:100%;height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:16px;text-align:center;cursor:pointer;position:relative;overflow:hidden}
.carousel-slide .cs-title{font-size:20px;font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3);z-index:1}
.carousel-slide .cs-sub{font-size:12px;color:rgba(255,255,255,.85);margin-top:4px;z-index:1}
.carousel-slide .cs-bg{position:absolute;inset:0;opacity:.9}
.carousel-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,0.35));pointer-events:none}
.carousel-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:2}
.carousel-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:all .3s}
.carousel-dot.active{background:#fff;width:16px;border-radius:3px}

/* ===== Feature pills ===== */
.feature-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.feature-pill{display:flex;align-items:center;gap:4px;background:var(--bg-2);border:1px solid var(--border);
    border-radius:8px;padding:6px 12px;font-size:12px;color:var(--text-dim);letter-spacing:0.01em;
    transition:all .2s cubic-bezier(0.16,1,0.3,1)}
.pill-icon{width:16px;height:16px;opacity:.7}

/* ===== VIP tag ===== */
.vip-tag{background:rgba(255,176,32,.18);color:var(--amber)}

/* ===== Feedback button ===== */
.feedback-btn{width:100%;padding:12px;border:1.5px solid var(--border);background:var(--bg-2);
    border-radius:var(--r-sm);color:var(--text-dim);font-size:14px;cursor:pointer;
    transition:all .2s;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:6px}
.feedback-btn:hover{border-color:var(--accent);color:var(--accent-2);background:var(--bg-3)}
.feedback-btn span{font-size:16px}

/* ===== Feedback modal ===== */
.feedback-modal{background:var(--bg-2);border-radius:var(--r);width:100%;max-width:340px;border:1px solid var(--border);overflow:hidden}
.feedback-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.feedback-header h2{font-size:16px;font-weight:700}
.feedback-body{padding:20px}
.feedback-textarea{width:100%;background:var(--bg-1);border:1px solid var(--border);border-radius:8px;
    padding:12px;color:var(--text);font-size:14px;outline:none;resize:none;margin-bottom:12px;font-family:inherit}
.feedback-textarea:focus{border-color:var(--accent)}

/* ===== Upload progress ===== */
.upload-progress-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:3000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .2s}
.upload-progress-card{background:var(--bg-2);border-radius:var(--r);padding:28px 24px;width:100%;max-width:320px;text-align:center;border:1px solid var(--border)}
.up-icon{font-size:32px;margin-bottom:10px}
.up-filename{font-size:14px;font-weight:600;margin-bottom:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-bar-wrap{width:100%;height:6px;background:var(--bg-4);border-radius:3px;overflow:hidden;margin-bottom:10px}
.up-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:3px;width:0%;transition:width .2s}
.up-text{font-size:12px;color:var(--text-dim)}
.user-btn{
    background:var(--bg-2);border:1px solid var(--border);color:var(--text-dim);
    padding:6px 16px;border-radius:8px;font-size:12px;cursor:pointer;transition:all .2s cubic-bezier(0.16,1,0.3,1);
}
.user-btn:hover{background:var(--bg-3);color:var(--text)}
.user-btn:active{transform:translateY(1px)}
.user-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.user-btn.primary:hover{background:var(--accent-2)}
.user-btn.primary:active{transform:translateY(1px)}

/* ===== Auth modal ===== */
.auth-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:2000;
    display:flex;align-items:center;justify-content:center;padding:20px;
    animation:fade .2s ease;
}
.auth-modal{
    background:var(--bg-2);border-radius:var(--r);width:100%;max-width:340px;
    border:1px solid var(--border);overflow:hidden;
}
.auth-tabs{display:flex;border-bottom:1px solid var(--border)}
.auth-tab{
    flex:1;padding:12px;background:none;border:none;color:var(--text-dim);
    font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;
}
.auth-tab.active{color:var(--accent-2);border-bottom:2px solid var(--accent)}
.auth-body{padding:20px}
.auth-input{
    width:100%;background:var(--bg-1);border:1px solid var(--border);
    border-radius:8px;padding:12px 14px;color:var(--text);font-size:14px;
    margin-bottom:12px;outline:none;transition:border .2s;
}
.auth-input:focus{border-color:var(--accent)}
.auth-submit{
    width:100%;padding:12px;border:none;border-radius:8px;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:transform .15s;
}
.auth-submit:active{transform:translateY(1px)}
.auth-error{color:var(--red);font-size:12px;margin-top:8px;text-align:center;min-height:16px}

/* ===== VIP modal ===== */
.vip-modal{
    background:var(--bg-2);border-radius:var(--r);width:100%;max-width:380px;
    border:1px solid var(--border);overflow:hidden;
}
.vip-header{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:20px 16px 12px;position:relative;
}
.vip-crown{font-size:28px}
.vip-header h2{font-size:20px;font-weight:700;letter-spacing:-0.01em}
.vip-close{
    position:absolute;right:12px;top:12px;background:none;border:none;
    color:var(--text-dim);font-size:18px;cursor:pointer;
}
.vip-body{padding:8px 20px 20px}
.vip-desc{font-size:13px;color:var(--text-dim);text-align:center;margin-bottom:16px}
.vip-plans{display:flex;flex-direction:column;gap:10px}
.vip-plan{
    background:var(--bg-1);border:2px solid var(--border);border-radius:12px;
    padding:16px;cursor:pointer;transition:all .2s;position:relative;
}
.vip-plan:hover{border-color:var(--accent)}
.vip-plan-hot{border-color:rgba(255,176,32,0.4)}
.vip-plan-hot:hover{border-color:var(--amber)}
.vip-plan-badge{
    position:absolute;top:-8px;right:12px;background:var(--amber);color:#000;
    font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;
}
.vip-plan-name{font-size:15px;font-weight:700;margin-bottom:6px}
.vip-plan-price{font-size:28px;font-weight:800;color:var(--accent-2);margin-bottom:8px}
.vip-plan-price small{font-size:13px;font-weight:400;color:var(--text-dim)}
.vip-plan-features{font-size:12px;color:var(--text-dim);line-height:1.8}
.vip-plan-hot .vip-plan-price{color:var(--amber)}

/* ===== Upload ===== */
.upload-area{
    border:1.5px dashed var(--border);border-radius:var(--r);padding:44px 20px;
    text-align:center;cursor:pointer;transition:all .3s cubic-bezier(0.16,1,0.3,1);background:var(--bg-2);
    margin-bottom:20px;position:relative;overflow:hidden;
}
.upload-area:hover,.upload-area.dragover{
    border-color:var(--accent);background:var(--bg-3);transform:translateY(-1px);
}
.upload-icon-img{width:48px;height:48px;margin-bottom:14px}
.upload-text{font-size:15px;font-weight:600;margin-bottom:6px;letter-spacing:-0.01em}
.upload-hint{font-size:11px;color:var(--text-faint);letter-spacing:0.02em}

/* ===== Model select ===== */
.model-select{margin-bottom:20px}
.section-label{display:block;font-size:13px;color:var(--text-dim);margin-bottom:10px;font-weight:600}
.model-options{display:flex;gap:10px}
.model-option{
    flex:1;background:var(--bg-2);border:1.5px solid transparent;border-radius:var(--r-sm);
    padding:14px 10px;cursor:pointer;transition:all .25s cubic-bezier(0.16,1,0.3,1);text-align:center;position:relative;
}
.model-option:active{transform:translateY(1px)}
.model-option.active{border-color:var(--accent);background:var(--bg-3)}
.model-icon{font-size:11px;margin-bottom:6px;opacity:.7}
.model-name{font-size:14px;font-weight:700;margin-bottom:2px;letter-spacing:-0.01em}
.model-desc{font-size:10px;color:var(--text-dim);margin-bottom:6px}
.model-tag{
    display:inline-block;font-size:9px;padding:1px 7px;border-radius:4px;
    background:rgba(107,92,224,0.12);color:var(--accent-2);font-weight:600;
}

/* ===== Feature grid ===== */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-bottom:20px}
.feature-card{
    background:var(--bg-2);border-radius:var(--r-sm);padding:14px 6px;
    display:flex;flex-direction:column;align-items:center;gap:5px;
    border:1px solid var(--border);transition:all .2s;
}
.feature-card:hover{background:var(--bg-3);border-color:var(--accent)}
.feature-icon{font-size:20px}
.feature-card span:last-child{font-size:11px;color:var(--text-dim)}

/* ===== Processing ===== */
.processing-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;text-align:center}
.wave-bars{display:flex;gap:3px;align-items:center;height:56px;margin-bottom:28px}
.wave-bars span{
    display:block;width:3px;height:14px;border-radius:2px;
    background:linear-gradient(180deg,var(--accent-2),var(--accent));
    animation:wave 1.1s ease-in-out infinite;
}
.wave-bars span:nth-child(1){animation-delay:0s}
.wave-bars span:nth-child(2){animation-delay:.08s}
.wave-bars span:nth-child(3){animation-delay:.16s}
.wave-bars span:nth-child(4){animation-delay:.24s}
.wave-bars span:nth-child(5){animation-delay:.32s}
.wave-bars span:nth-child(6){animation-delay:.4s}
.wave-bars span:nth-child(7){animation-delay:.32s}
.wave-bars span:nth-child(8){animation-delay:.24s}
.wave-bars span:nth-child(9){animation-delay:.16s}
.wave-bars span:nth-child(10){animation-delay:.08s}
@keyframes wave{0%,100%{height:10px;opacity:.4}50%{height:46px;opacity:1}}
.processing-container h2{font-size:20px;font-weight:700;margin-bottom:6px;letter-spacing:-0.01em}
.processing-filename{color:var(--text-dim);font-size:12px;margin-bottom:28px;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.progress-bar-container{width:100%;max-width:300px;height:6px;background:var(--bg-2);border-radius:3px;overflow:hidden;margin-bottom:10px}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:3px;transition:width .4s}
.progress-text{font-size:13px;color:var(--accent-2);font-weight:600;margin-bottom:2px}
.progress-message{font-size:12px;color:var(--text-dim)}

/* ===== Player header ===== */
.player-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:8px}
.icon-btn{
    width:36px;height:36px;border-radius:var(--r-sm);background:var(--bg-2);
    border:1px solid var(--border);color:var(--text-dim);font-size:16px;
    cursor:pointer;transition:all .2s;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
}
.btn-icon-img{width:20px;height:20px;opacity:.7}
.btn-icon-img-sm{width:18px;height:18px;opacity:.7}
.play-icon-img{width:24px;height:24px}
.player-title{font-size:14px;font-weight:600;text-align:center;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== Transport ===== */
.transport{background:var(--bg-2);border-radius:var(--r);padding:16px 16px 14px;margin-bottom:12px;border:1px solid var(--border)}
.time-row{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.time-display{font-size:11px;color:var(--text-dim);font-variant-numeric:tabular-nums;min-width:32px;text-align:center}
.seek-bar{flex:1;height:24px;position:relative;cursor:pointer;display:flex;align-items:center}
.seek-track{position:absolute;width:100%;height:5px;background:var(--bg-4);border-radius:3px}
.seek-progress{position:absolute;height:5px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:3px;width:0%;transition:width .1s linear}
.seek-handle{position:absolute;top:50%;left:0%;width:13px;height:13px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);transition:left .1s linear;z-index:3}
.ab-marker{position:absolute;top:50%;width:3px;height:20px;transform:translate(-50%,-50%);border-radius:2px;z-index:2}
.ab-a{background:var(--green)}
.ab-b{background:var(--red)}
.bookmark-markers{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none}
.bm-mark{position:absolute;top:3px;width:2px;height:18px;background:var(--amber);border-radius:1px;transform:translateX(-50%)}

.transport-buttons{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.ctrl-btn{
    width:36px;height:36px;border-radius:var(--r-sm);background:var(--bg-3);
    border:1px solid var(--border);color:var(--text-dim);font-size:15px;
    cursor:pointer;transition:all .2s cubic-bezier(0.16,1,0.3,1);display:flex;align-items:center;justify-content:center;
}
.ctrl-btn:hover{background:var(--bg-4);color:var(--text)}
.ctrl-btn:active{transform:translateY(1px)}
.ctrl-btn.active{background:var(--bg-4);border-color:var(--accent);color:var(--accent-2)}
.ctrl-btn-small{
    width:32px;height:32px;border-radius:8px;background:var(--bg-3);
    border:1px solid var(--border);color:var(--text-dim);font-size:12px;
    cursor:pointer;transition:all .2s cubic-bezier(0.16,1,0.3,1);display:flex;align-items:center;justify-content:center;
}
.ctrl-btn-small:hover{background:var(--bg-4);color:var(--text)}
.ctrl-btn-small:active{transform:translateY(1px)}
.play-btn{
    width:48px;height:48px;border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    border:none;color:#fff;font-size:18px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 3px 16px var(--accent-glow);transition:transform .15s;
}
.play-btn:active{transform:translateY(1px)}
.speed-select{
    background:var(--bg-3);color:var(--text-dim);border:1px solid var(--border);
    border-radius:7px;padding:5px 8px;font-size:11px;cursor:pointer;outline:none;
    -webkit-appearance:none;appearance:none;
}
.speed-select:focus{border-color:var(--accent)}

/* ===== EQ ===== */
.eq-panel{background:var(--bg-2);border-radius:var(--r);padding:14px 16px;margin-bottom:12px;border:1px solid var(--border)}
.eq-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.eq-title{font-size:12px;font-weight:600;color:var(--text-dim)}
.eq-toggle{
    background:rgba(107,92,224,0.10);border:1px solid var(--accent);color:var(--accent-2);
    padding:2px 10px;border-radius:5px;font-size:11px;cursor:pointer;transition:all .2s;
}
.eq-toggle.off{background:transparent;border-color:var(--border);color:var(--text-faint)}
.eq-bands{display:flex;justify-content:space-around;align-items:flex-end;height:80px}
.eq-band{display:flex;flex-direction:column;align-items:center;gap:6px}
.eq-band label{font-size:10px;color:var(--text-dim)}
.eq-slider.vertical{
    -webkit-appearance:none;appearance:none;
    width:80px;height:4px;background:var(--bg-4);border-radius:2px;outline:none;
    transform:rotate(-90deg);transform-origin:center;
}
.eq-slider.vertical::-webkit-slider-thumb{
    -webkit-appearance:none;width:14px;height:14px;background:var(--accent-2);
    border-radius:50%;cursor:pointer;
}
.eq-slider.vertical::-moz-range-thumb{
    width:14px;height:14px;background:var(--accent-2);border-radius:50%;
    cursor:pointer;border:none;
}

/* ===== Tracks ===== */
.tracks{display:flex;flex-direction:column;gap:10px;padding-bottom:40px}
.track{
    background:var(--bg-2);border-radius:var(--r-sm);padding:14px;
    border:1px solid var(--border);transition:all .25s;
}
.track.muted{opacity:.45}
.track.track-playing{border-color:var(--accent)}
.track-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.track-info{display:flex;align-items:center;gap:9px}
.track-icon{
    font-size:18px;width:34px;height:34px;display:flex;align-items:center;
    justify-content:center;border-radius:8px;background:rgba(255,255,255,0.04);
}
.track-name{font-size:14px;font-weight:600}
.track-actions{display:flex;gap:6px}
.track-btn{
    width:28px;height:28px;border-radius:7px;border:1px solid var(--border);
    background:transparent;color:var(--text-dim);font-size:10px;font-weight:700;
    cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;
}
.track-btn:hover{border-color:var(--text-dim)}
.track-btn.track-play{border-color:var(--border);color:var(--accent-2);font-size:11px}
.track-btn.track-play.playing{background:var(--accent);color:#fff;border-color:var(--accent)}
.track-btn.solo.active{background:var(--amber);color:#000;border-color:var(--amber)}
.track-download{
    width:28px;height:28px;border-radius:7px;border:1px solid var(--border);
    background:transparent;color:var(--text-dim);font-size:12px;cursor:pointer;
    transition:all .2s;display:flex;align-items:center;justify-content:center;
}
.track-download:hover{border-color:var(--accent);color:var(--accent-2)}

.track-waveform{display:flex;align-items:flex-end;justify-content:center;gap:1px;height:36px;margin-bottom:10px;padding:0 4px}
.wf-bar{flex:1;max-width:6px;height:3px;border-radius:1px;opacity:.12;transition:height .06s ease,opacity .06s ease}

.track-volume{display:flex;align-items:center;gap:8px}
.volume-icon{font-size:12px;opacity:.4}
.volume-slider{
    flex:1;-webkit-appearance:none;appearance:none;height:3px;
    background:var(--bg-4);border-radius:2px;outline:none;
}
.volume-slider::-webkit-slider-thumb{
    -webkit-appearance:none;width:14px;height:14px;background:var(--accent-2);
    border-radius:50%;cursor:pointer;
}
.volume-slider::-moz-range-thumb{
    width:14px;height:14px;background:var(--accent-2);border-radius:50%;
    cursor:pointer;border:none;
}

/* ===== Error toast ===== */
.error-toast{
    position:fixed;bottom:36px;left:50%;transform:translateX(-50%) translateY(80px);
    background:var(--red);color:#fff;padding:10px 22px;border-radius:var(--r-sm);
    font-size:13px;z-index:1000;opacity:0;transition:all .3s;max-width:90%;text-align:center;
}
.error-toast.show{transform:translateX(-50%) translateY(0);opacity:1}

.upload-area.uploading{pointer-events:none;opacity:.6}

/* ===== TabBar ===== */
.tabbar{
    position:fixed;bottom:0;left:50%;transform:translateX(-50%);
    width:100%;max-width:480px;display:flex;background:var(--bg-2);
    border-top:1px solid var(--border);z-index:100;
    padding-bottom:env(safe-area-inset-bottom,0px);
}
.tabbar-item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:8px 0;background:none;border:none;cursor:pointer;
    color:var(--text-faint);transition:color .2s;
}
.tabbar-item.active{color:var(--accent)}
.tabbar-icon{width:24px;height:24px;opacity:.5;transition:opacity .2s}
.tabbar-item.active .tabbar-icon{opacity:1}
.tabbar-item span{font-size:11px}

/* ===== History page ===== */
.history-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.history-page-header h2{font-size:20px;font-weight:700;letter-spacing:-0.01em}
.history-clear-all{
    background:transparent;border:1px solid var(--border);color:var(--text-dim);
    padding:5px 14px;border-radius:8px;font-size:12px;cursor:pointer;transition:all .2s;
}
.history-clear-all:hover{border-color:var(--red);color:var(--red)}
.history-page-list{display:flex;flex-direction:column;gap:10px;padding-bottom:80px}
.history-empty{text-align:center;padding:60px 0}
.empty-icon{width:120px;height:120px;opacity:.3;margin-bottom:12px}
.history-empty p{color:var(--text-faint);font-size:14px}
.history-card{
    display:flex;align-items:center;gap:12px;padding:14px 16px;
    background:var(--bg-2);border-radius:var(--r-sm);border:1px solid var(--border);
    cursor:pointer;transition:all .2s;
}
.history-card:hover{background:var(--bg-3);border-color:var(--accent)}
.history-card .hc-icon{font-size:20px;flex-shrink:0}
.history-card .hc-info{flex:1;min-width:0}
.history-card .hc-name{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-card .hc-meta{font-size:11px;color:var(--text-dim);margin-top:2px}
.history-card .hc-del{
    width:30px;height:30px;border-radius:8px;border:1px solid var(--border);
    background:transparent;color:var(--text-faint);font-size:14px;cursor:pointer;
    flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.history-card .hc-del:hover{border-color:var(--red);color:var(--red)}

/* ===== History ===== */
.history-section{margin-bottom:20px}
.history-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.history-clear{
    background:transparent;border:1px solid var(--border);color:var(--text-faint);
    padding:3px 10px;border-radius:5px;font-size:11px;cursor:pointer;transition:all .2s;
}
.history-clear:hover{border-color:var(--red);color:var(--red)}
.history-list{display:flex;flex-direction:column;gap:8px}
.history-item{
    display:flex;align-items:center;gap:10px;padding:12px 14px;
    background:var(--bg-2);border-radius:var(--r-sm);border:1px solid var(--border);
    cursor:pointer;transition:all .2s;
}
.history-item:hover{background:var(--bg-3);border-color:var(--accent)}
.history-item .hi-icon{font-size:20px;flex-shrink:0}
.history-item .hi-info{flex:1;min-width:0}
.history-item .hi-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-item .hi-meta{font-size:10px;color:var(--text-dim);margin-top:2px}
.history-item .hi-del{
    width:26px;height:26px;border-radius:6px;border:1px solid var(--border);
    background:transparent;color:var(--text-faint);font-size:12px;cursor:pointer;
    flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.history-item .hi-del:hover{border-color:var(--red);color:var(--red)}