/* ==========================================================================
   主题令牌（CSS 变量）
   —— 所有颜色与主题相关的样式均通过变量控制，方便主题扩展
   ========================================================================== */
:root{
    --bg:#060b18; --bg2:#0b1428; --panel:#0d1730; --panel2:#122043;
    --line:#1c2d52; --line-soft:rgba(96,165,250,.08);
    --text:#dbeafe; --dim:#7d93bd; --muted:#4c5f85;
    --gold:#22d3ee; --gold2:#0891b2;
    --primary:#3b82f6; --primary2:#1d4ed8;
    --ok:#34d399; --err:#f87171; --warn:#fbbf24;
    --shadow:rgba(0,0,0,.5);
    --glass:rgba(96,165,250,.06);
    --glass-strong:rgba(96,165,250,.12);
    --glass-brd:rgba(96,165,250,.16);
    --radius:14px; --radius-sm:9px;
    --topbar-h:54px; --panel-w:252px;
    --tick:all .22s cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;}
html,body{
    height:100%;margin:0;padding:0;overflow:hidden;
    background:var(--bg);color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
    -webkit-font-smoothing:antialiased;
}
button{outline:none!important;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}

/* ==========================================================================
   应用骨架
   ========================================================================== */
#app{display:flex;flex-direction:column;height:100%;}

#topbar{
    flex:0 0 var(--topbar-h);height:var(--topbar-h);
    display:flex;align-items:center;gap:10px;padding:0 14px;
    background:linear-gradient(180deg,var(--panel2),var(--panel));
    border-bottom:1px solid var(--line);position:relative;z-index:30;
    box-shadow:0 2px 20px -6px var(--shadow);width: 100%;
}
.brand{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;
    letter-spacing:.5px;white-space:nowrap;user-select:none;}
.brand .glyphicon{font-size:18px;color:var(--gold);
    filter:drop-shadow(0 0 8px rgba(34,211,238,.6));}
.brand em{font-style:normal;font-size:11px;font-weight:500;color:var(--dim);margin-left:4px;}
.now-playing{
    flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;
    padding:0 12px;font-size:12.5px;color:var(--dim);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.now-playing b{color:var(--text);font-weight:700;}
.np-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);
    box-shadow:0 0 10px var(--ok);flex:0 0 auto;transition:var(--tick);}
.np-dot.paused{background:var(--dim);box-shadow:none;}
.np-dot.playing{animation:dotPulse 1.6s ease-in-out infinite;}
@keyframes dotPulse{0%,100%{opacity:1;}50%{opacity:.45;}}
.tb-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto;}
.tb-btn{
    display:inline-flex;align-items:center;gap:6px;
    height:34px;padding:0 14px;border-radius:999px;
    border:1px solid var(--glass-brd);background:var(--glass);
    color:var(--text);font-size:12.5px;font-weight:600;cursor:pointer;
    transition:var(--tick);backdrop-filter:blur(8px);white-space:nowrap;
}
.tb-btn:hover{background:var(--glass-strong);border-color:var(--primary);transform:translateY(-1px);}
.tb-btn:active{transform:translateY(0);}
.tb-btn .glyphicon{font-size:12px;}
.tb-btn.icon-only{width:34px;padding:0;justify-content:center;}
.tb-btn.accent{background:linear-gradient(135deg,var(--primary),var(--primary2));
    border-color:transparent;color:#fff;box-shadow:0 6px 18px -6px rgba(59,130,246,.55);}
.tb-btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold2));
    border-color:transparent;color:#00222a;box-shadow:0 6px 18px -6px rgba(34,211,238,.6);}

#main{flex:1 1 auto;display:flex;min-height:0;overflow:hidden;}

#stage{flex:1 1 auto;position:relative;min-width:0;min-height:0;
    background:var(--bg);overflow:hidden;}
#cv{display:block;width:100%;height:100%;touch-action:none;}

/* ==========================================================================
   简谱字幕条（玻璃透明质感）
   ========================================================================== */
.jianpu-strip{
    position:absolute;left:0;right:0;
    height:48px;
    overflow:hidden;
    pointer-events:none;
    z-index:5;
    background:
            linear-gradient(180deg,
            rgba(255,255,255,.075) 0%,
            rgba(255,255,255,.035) 45%,
            rgba(255,255,255,.02) 100%);
    backdrop-filter:blur(14px) saturate(150%);
    -webkit-backdrop-filter:blur(14px) saturate(150%);
    border-top:1px solid rgba(255,255,255,.14);
    border-bottom:1px solid rgba(255,255,255,.05);
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.12),
            inset 0 -1px 0 rgba(0,0,0,.15),
            0 4px 24px -8px rgba(0,0,0,.5);
    transition:opacity .4s ease;
    will-change:opacity;
}
.jianpu-strip.hidden{opacity:0;}
.jianpu-track{
    position:absolute;left:0;top:0;height:100%;width:100%;
    will-change:transform;
}

.jp-token{
    position:absolute;
    top:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    height:32px;
    font-family:"SF Mono",Consolas,Monaco,monospace;
    font-weight:800;font-size:15px;
    line-height:1;
    color:rgba(219,234,254,.55);
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.10);
    border-radius:7px;
    transform:translate(-9999px,-50%);
    transform-origin:center;
    transition:
            transform .42s cubic-bezier(.34,1.05,.64,1),
            opacity .35s ease,
            background .3s ease,
            border-color .3s ease,
            color .3s ease,
            box-shadow .3s ease,
            font-size .3s ease;
    will-change:transform,opacity;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.jp-token .jp-deg{display:inline-block;}
.jp-token .jp-suffix{
    margin-left:1px;opacity:.85;font-size:11px;letter-spacing:-1px;
    font-family:-apple-system,"SF Pro Text",sans-serif;
}
.jp-token .jp-oct{
    position:absolute;left:0;right:0;text-align:center;
    font-size:9px;line-height:1;color:inherit;opacity:.75;
}
.jp-token .jp-oct.top{top:-5px;}
.jp-token .jp-oct.bot{bottom:-5px;}
.jp-token.u1{border-bottom:2px solid currentColor;}
.jp-token.u2{border-bottom:3px double currentColor;}
.jp-token.bar-token{
    background:transparent;border:none;box-shadow:none;
    color:rgba(255,255,255,.22);font-size:20px;font-weight:400;
}
.jp-token.rest-token{
    color:rgba(180,200,220,.55);
    background:rgba(255,255,255,.03);
    font-style:italic;
}

/* ★ 当前音符：标准呼吸灯效果（2.4s 周期，柔和不刺眼） */
.jp-token.current{
    color:#e0f7ff;
    background:linear-gradient(180deg,rgba(34,211,238,.32),rgba(8,145,178,.14));
    border-color:rgba(34,211,238,.75);
    z-index:3;
    animation:jpCurrentBreath 2.4s ease-in-out infinite;
}
@keyframes jpCurrentBreath{
    0%,100%{
        box-shadow:
                inset 0 1px 0 rgba(255,255,255,.30),
                0 0 14px rgba(34,211,238,.35),
                0 0 5px rgba(34,211,238,.28);
    }
    50%{
        box-shadow:
                inset 0 1px 0 rgba(255,255,255,.42),
                0 0 24px rgba(34,211,238,.72),
                0 0 10px rgba(34,211,238,.55);
    }
}
.jp-token.played{
    color:rgba(219,234,254,.14);
    background:rgba(255,255,255,.02);
    border-color:rgba(255,255,255,.05);
    box-shadow:none;
}
.jp-token.near{
    color:rgba(219,234,254,.72);
    background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
}
.jp-token.upcoming{color:rgba(219,234,254,.42);}
.jp-token.past{color:rgba(219,234,254,.28);}

/* ==========================================================================
   遮罩层
   ========================================================================== */
.overlay{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    z-index:10;padding:20px;text-align:center;
    background:radial-gradient(ellipse at 50% 40%,rgba(0,0,0,.55),rgba(0,0,0,.86));
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    opacity:1;transition:opacity .3s,visibility .3s;
}
.overlay.hide{opacity:0;visibility:hidden;pointer-events:none;}
.ov-card{
    max-width:560px;width:100%;padding:28px 30px;border-radius:22px;
    background:linear-gradient(180deg,var(--panel2),var(--panel));
    border:1px solid var(--glass-brd);
    box-shadow:0 40px 100px -25px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06);
    animation:ovPop .36s cubic-bezier(.34,1.4,.64,1);
}
@keyframes ovPop{from{transform:scale(.92) translateY(12px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}
.ov-card h3{margin:0 0 8px;font-size:22px;font-weight:800;color:var(--text);letter-spacing:.3px;}
.ov-card .sub{font-size:12.5px;color:var(--dim);margin-bottom:18px;line-height:1.85;}
.ov-card .sub b{color:var(--gold);font-weight:700;}
.ov-rules{
    text-align:left;background:var(--glass);border:1px solid var(--glass-brd);
    border-radius:12px;padding:14px 16px;margin:0 0 20px;
    font-size:12.5px;line-height:1.9;color:var(--dim);
}
.ov-rules .rl{display:flex;align-items:flex-start;gap:10px;padding:4px 0;}
.ov-rules .rl .ic{
    flex:0 0 auto;width:22px;height:22px;border-radius:6px;
    display:flex;align-items:center;justify-content:center;
    background:var(--glass-strong);font-size:12px;color:var(--gold);
}
.ov-rules .rl b{color:var(--text);font-weight:700;}
.ov-rules .rl .kbd{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:20px;height:19px;padding:0 6px;border-radius:5px;margin:0 2px;
    background:var(--glass-strong);border:1px solid var(--glass-brd);
    font-family:Consolas,monospace;font-size:11px;font-weight:700;color:var(--gold);
}
.ov-btn{
    display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 34px;
    border-radius:999px;border:none;cursor:pointer;font-size:14.5px;font-weight:800;
    background:linear-gradient(135deg,var(--gold),var(--gold2));color:#00222a;
    box-shadow:0 12px 30px -10px rgba(34,211,238,.7);transition:var(--tick);
}
.ov-btn:hover{transform:translateY(-2px);box-shadow:0 16px 38px -10px rgba(34,211,238,.85);}
.ov-btn:active{transform:translateY(0);}
.ov-btn .glyphicon{font-size:15px;}

#pauseOverlay .ov-card{max-width:400px;}
.pause-ico{
    font-size:58px;color:var(--gold);margin-bottom:10px;
    filter:drop-shadow(0 0 20px rgba(34,211,238,.5));
    animation:floatY 2.6s ease-in-out infinite;
}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

/* ==========================================================================
   结算卡：带 Bootstrap3 图标修饰的指标
   ========================================================================== */
#resultOverlay .ov-card{max-width:480px;}
.res-face{font-size:56px;line-height:1;margin-bottom:8px;
    animation:floatY 2.8s ease-in-out infinite;}
.res-acc{font-size:54px;font-weight:900;color:var(--gold);line-height:1.05;
    letter-spacing:-1px;font-variant-numeric:tabular-nums;
    text-shadow:0 0 40px rgba(34,211,238,.45);}
.res-acc small{font-size:22px;font-weight:700;opacity:.8;}
.res-enc{font-size:13px;color:var(--dim);margin:10px 0 20px;line-height:1.75;}

.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:22px;}
.res-cell{
    position:relative;
    padding:12px 6px 10px;border-radius:12px;
    background:var(--glass);border:1px solid var(--glass-brd);
    display:flex;flex-direction:column;align-items:center;gap:3px;
    transition:var(--tick);
}
.res-cell:hover{background:var(--glass-strong);border-color:var(--primary);}
.res-cell .rc-ico{
    font-size:16px;color:var(--dim);margin-bottom:1px;
    display:inline-flex;align-items:center;justify-content:center;
}
.res-cell b{display:block;font-size:21px;font-weight:800;color:var(--text);
    font-variant-numeric:tabular-nums;line-height:1.1;}
.res-cell b.g{color:var(--ok);} .res-cell b.r{color:var(--err);} .res-cell b.o{color:var(--gold);}
.res-cell span.rc-lab{
    font-size:10.5px;color:var(--dim);
    display:inline-flex;align-items:center;gap:3px;
}
.res-cell span.rc-lab .glyphicon{font-size:10px;}

.res-cell.rc-ok .rc-ico{color:var(--ok);}
.res-cell.rc-bad .rc-ico{color:var(--err);}
.res-cell.rc-notes .rc-ico{color:var(--primary);}
.res-cell.rc-combo .rc-ico{color:var(--warn);}
.res-cell.rc-speed .rc-ico{color:var(--gold);}
.res-cell.rc-time .rc-ico{color:var(--dim);}

.res-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.res-btns .tb-btn{height:40px;padding:0 24px;font-size:13.5px;}
.res-hint{margin-top:14px;font-size:11.5px;color:var(--muted);}
.res-hint .kbd{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:20px;height:18px;padding:0 6px;border-radius:5px;margin:0 3px;
    background:var(--glass-strong);border:1px solid var(--glass-brd);
    font-family:Consolas,monospace;font-size:10.5px;font-weight:700;color:var(--gold);
}

/* ==========================================================================
   右侧数据面板
   ========================================================================== */
#panel{
    flex:0 0 var(--panel-w);width:var(--panel-w);
    display:flex;flex-direction:column;gap:1px;
    background:var(--panel);border-left:1px solid var(--line);
    overflow-y:auto;overflow-x:hidden;
}
.pnl-sec{padding:15px 15px 16px;border-bottom:1px solid var(--line);}
.pnl-sec:last-child{border-bottom:none;}
.pnl-ttl{display:flex;align-items:center;gap:6px;
    font-size:10.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
    color:var(--muted);margin-bottom:12px;}
.pnl-ttl .glyphicon{font-size:11px;color:var(--dim);}

.hero-stat{text-align:center;padding:4px 0 6px;}
.hero-num{font-size:46px;font-weight:900;line-height:1;letter-spacing:-2px;
    color:var(--gold);font-variant-numeric:tabular-nums;
    text-shadow:0 0 34px rgba(34,211,238,.4);transition:var(--tick);}
.hero-num small{font-size:18px;font-weight:700;opacity:.7;}
.hero-lab{font-size:11px;color:var(--dim);margin-top:6px;letter-spacing:1.2px;}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.stat-cell{display:flex;flex-direction:column;gap:2px;
    padding:9px 10px;border-radius:var(--radius-sm);
    background:var(--glass);border:1px solid var(--line-soft);
    transition:var(--tick);}
.stat-cell.flash{background:rgba(34,211,238,.16);border-color:var(--gold);}
.stat-cell.flash-err{background:rgba(248,113,113,.16);border-color:var(--err);}
.stat-cell .sc-top{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--dim);}
.stat-cell .sc-top .glyphicon{font-size:10px;}
.stat-cell b{font-size:17px;font-weight:800;color:var(--text);
    font-variant-numeric:tabular-nums;line-height:1.15;}
.stat-cell b.g{color:var(--ok);} .stat-cell b.r{color:var(--err);} .stat-cell b.o{color:var(--gold);}

.prog-wrap{margin-top:4px;}
.prog-bar{height:7px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;}
.prog-fill{height:100%;width:0%;border-radius:4px;
    background:linear-gradient(90deg,var(--primary),var(--gold));
    transition:width .28s ease;}
.prog-meta{display:flex;justify-content:space-between;font-size:10.5px;
    color:var(--dim);margin-top:7px;font-variant-numeric:tabular-nums;}

.heat-row{display:flex;flex-direction:column;gap:6px;}
.heat-line{display:flex;align-items:center;gap:7px;font-size:11px;}
.heat-line .hk{
    width:36px;height:20px;border-radius:5px;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    font-family:Consolas,monospace;font-weight:800;font-size:10.5px;
    background:var(--glass);color:var(--dim);
}
.heat-line .hbar{flex:1 1 auto;height:6px;border-radius:3px;
    background:rgba(255,255,255,.07);overflow:hidden;}
.heat-line .hbar i{display:block;height:100%;border-radius:3px;
    transition:width .3s ease;}
.heat-line .hb-num{font-size:10.5px;color:var(--dim);width:34px;
    text-align:right;font-variant-numeric:tabular-nums;}
.pnl-empty{font-size:11.5px;color:var(--muted);text-align:center;
    padding:10px 0;line-height:1.75;}

/* ==========================================================================
   模态框 / 控件
   ========================================================================== */
.btn{transition:var(--tick);}
.modal-content{
    background:linear-gradient(180deg,var(--panel2),var(--panel));
    border:1px solid var(--glass-brd);border-radius:18px;color:var(--text);
    box-shadow:0 50px 110px -30px rgba(0,0,0,.9);overflow:hidden;
}
.modal-header{border-bottom:1px solid var(--line);padding:16px 20px;}
.modal-header .modal-title{font-size:16px;font-weight:800;color:var(--text);}
.modal-header .modal-title .glyphicon{color:var(--gold);margin-right:7px;}
.modal-header .close{color:var(--dim);opacity:.9;text-shadow:none;font-size:22px;margin-top:2px;}
.modal-header .close:hover{color:var(--err);}
.modal-body{padding:16px 20px;max-height:66vh;overflow-y:auto;}
.modal-footer{border-top:1px solid var(--line);padding:12px 20px;}
.modal-backdrop.in{opacity:.7;}

.search-box{position:relative;margin-bottom:12px;}
.search-box .glyphicon{position:absolute;left:14px;top:50%;transform:translateY(-50%);
    color:var(--dim);font-size:13px;pointer-events:none;}
.search-box input{
    width:100%;height:42px;padding:0 14px 0 38px;border-radius:999px;
    border:1px solid var(--glass-brd);background:rgba(0,0,0,.28);
    color:var(--text);font-size:13.5px;outline:none;transition:var(--tick);
}
.search-box input::placeholder{color:var(--muted);}
.search-box input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.18);}

.cat-scroll{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;margin-bottom:4px;}
.cat-pill{
    flex:0 0 auto;height:30px;padding:0 15px;border-radius:999px;
    display:inline-flex;align-items:center;gap:5px;
    border:1px solid var(--glass-brd);background:var(--glass);
    color:var(--dim);font-size:12.5px;font-weight:600;cursor:pointer;
    transition:var(--tick);white-space:nowrap;user-select:none;
}
.cat-pill:hover{border-color:var(--primary);color:var(--text);}
.cat-pill.on{background:linear-gradient(135deg,var(--primary),var(--primary2));
    border-color:transparent;color:#fff;box-shadow:0 6px 16px -6px rgba(59,130,246,.5);}

.song-list{display:flex;flex-direction:column;gap:6px;}
.song-item{
    display:flex;align-items:center;gap:11px;padding:10px 13px;
    border-radius:var(--radius-sm);border:1px solid var(--line-soft);
    background:var(--glass);cursor:pointer;transition:var(--tick);
}
.song-item:hover{background:rgba(59,130,246,.14);border-color:var(--primary);transform:translateX(3px);}
.song-item.on{background:linear-gradient(135deg,rgba(59,130,246,.28),rgba(59,130,246,.1));
    border-color:var(--primary);}
.song-item .si-ico{
    flex:0 0 auto;width:36px;height:36px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;font-size:18px;
    background:var(--glass-strong);
}
.song-item .si-txt{flex:1 1 auto;min-width:0;}
.song-item .si-txt b{display:block;font-size:13.5px;font-weight:700;color:var(--text);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.song-item .si-txt span{display:block;font-size:11px;color:var(--dim);margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.song-item .si-star{flex:0 0 auto;font-size:10.5px;color:var(--gold);letter-spacing:-1px;}

.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:13px 0;border-bottom:1px solid var(--line-soft);}
.set-row:last-child{border-bottom:none;}
.set-row .sr-label{font-size:13px;font-weight:600;color:var(--text);
    display:inline-flex;align-items:center;gap:6px;}
.set-row .sr-label .glyphicon{font-size:11px;color:var(--dim);}
.set-row .sr-desc{font-size:11px;color:var(--dim);margin-top:3px;line-height:1.5;}
.set-row .sr-ctrl{flex:0 0 auto;}

input[type=range]{
    -webkit-appearance:none;appearance:none;width:150px;height:5px;border-radius:3px;
    background:rgba(255,255,255,.14);outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:15px;height:15px;border-radius:50%;
    background:linear-gradient(135deg,var(--gold),var(--gold2));
    box-shadow:0 0 10px rgba(34,211,238,.6);cursor:pointer;
}
input[type=range]::-moz-range-thumb{
    width:15px;height:15px;border:none;border-radius:50%;
    background:linear-gradient(135deg,var(--gold),var(--gold2));
}
.switch{position:relative;display:inline-block;width:44px;height:24px;}
.switch input{opacity:0;width:0;height:0;}
.switch .slider{position:absolute;inset:0;border-radius:999px;cursor:pointer;
    background:rgba(255,255,255,.14);transition:var(--tick);}
.switch .slider:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;
    border-radius:50%;background:#fff;transition:var(--tick);}
.switch input:checked + .slider{background:linear-gradient(135deg,var(--gold),var(--gold2));}
.switch input:checked + .slider:before{transform:translateX(20px);}

.dropdown-menu{
    background:var(--panel2);border:1px solid var(--glass-brd);border-radius:12px;
    box-shadow:0 24px 60px -18px rgba(0,0,0,.85);padding:6px;min-width:175px;
}
.dropdown-menu > li > a{
    color:var(--dim);font-size:13px;border-radius:8px;padding:8px 12px;
    display:flex;align-items:center;gap:9px;transition:var(--tick);
}
.dropdown-menu > li > a:hover,.dropdown-menu > li > a:focus{
    background:rgba(59,130,246,.2);color:var(--text);
}
.dropdown-menu > li.active > a{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;}
.theme-swatch{width:15px;height:15px;border-radius:50%;flex:0 0 auto;
    border:2px solid rgba(255,255,255,.2);}

#toast{
    position:fixed;left:50%;bottom:38px;transform:translate(-50%,20px);
    padding:10px 22px;border-radius:999px;
    background:linear-gradient(135deg,var(--primary),var(--primary2));
    color:#fff;font-size:13px;font-weight:700;z-index:9999;
    box-shadow:0 16px 40px -10px rgba(59,130,246,.7);
    opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.34,1.4,.64,1);
}
#toast.show{opacity:1;transform:translate(-50%,0);}

/* 试听按钮激活态 */
.tb-btn.preview-on{
    background:linear-gradient(135deg,var(--gold),var(--gold2));
    border-color:transparent;color:#00222a;
    box-shadow:0 6px 18px -6px rgba(34,211,238,.7);
}

@media (max-width:1100px){
    :root{--panel-w:212px;}
    .hero-num{font-size:38px;}
    .stat-cell b{font-size:15px;}
}
@media (max-width:860px){
    #main{flex-direction:column;}
    #panel{
        flex:0 0 auto;width:100%;max-height:172px;flex-direction:row;
        border-left:none;border-top:1px solid var(--line);
        overflow-x:auto;overflow-y:hidden;
    }
    .pnl-sec{flex:0 0 auto;min-width:172px;
        border-bottom:none;border-right:1px solid var(--line);}
    .heat-sec{display:none;}
    #stage{min-height:300px;}
    .brand em{display:none;}
    .tb-btn .tbt-txt{display:none;}
    .tb-btn{padding:0 11px;}
}
@media (max-width:560px){
    .now-playing{display:none;}
    .res-grid{grid-template-columns:1fr 1fr;}
    .ov-card{padding:22px 20px;}
    .ov-card h3{font-size:18px;}
    .hero-num{font-size:32px;}
}