/* 手机投票页样式 —— 霓虹竖版 */
:root{
    --blue:#39b6ff; --blue2:#2f7bff;
    --pink:#ff4fa3; --pink2:#ff2e97;
    --gold:#ffd15c; --purple:#b06cff; --green:#3ef0a8;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:clamp(15px,4.3vw,21px)}
body{
    font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif;color:#fff;
    background:#05060c center top/cover no-repeat fixed;min-height:100vh;
}
#app{max-width:30rem;margin:0 auto;min-height:100vh;padding:1.2rem 1rem 2rem;
    display:flex;flex-direction:column;gap:1rem}

.m-round{align-self:center;font-size:1.3rem;font-weight:800;letter-spacing:.2rem;
    padding:.35rem 1.6rem;border-radius:2rem;border:.1rem solid rgba(176,108,255,.7);
    background:rgba(30,16,60,.4);text-shadow:0 0 .8rem rgba(176,108,255,.9)}

.m-cd{align-self:center;display:flex;align-items:center;gap:.6rem;
    padding:.5rem 1.6rem;border-radius:1rem;border:.1rem solid rgba(255,79,163,.5);
    background:rgba(20,10,30,.5)}
.m-cd .lbl{font-size:1rem;color:#cfd6f5}
.m-cd .num{font-size:2.4rem;font-weight:900;font-variant-numeric:tabular-nums;
    background:linear-gradient(180deg,#fff,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.m-cd .u{font-size:1rem;color:#cfd6f5}
.m-cd.voting .num{background:linear-gradient(180deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}

.m-card{display:flex;gap:1rem;align-items:center;border-radius:1.1rem;padding:1rem;
    background:linear-gradient(180deg,rgba(20,24,48,.5),rgba(8,10,22,.55));
    border:.12rem solid var(--cc,#5a6cff);box-shadow:0 0 1.2rem var(--glow,rgba(80,120,255,.4))}
.m-card.a{--cc:var(--blue);--glow:rgba(57,182,255,.45)}
.m-card.b{--cc:var(--pink);--glow:rgba(255,79,163,.45)}
.m-card.solo{--cc:var(--purple);--glow:rgba(176,108,255,.45);flex-direction:column;text-align:center;padding:1.3rem}
.m-card.chosen{box-shadow:0 0 1.8rem var(--glow),0 0 2.6rem var(--glow);border-width:.2rem}
.m-card img{width:5.6rem;height:5.6rem;border-radius:.8rem;object-fit:cover;flex-shrink:0;
    border:.1rem solid var(--cc);background:#12162e}
.m-card.solo img{width:11rem;height:11rem}
.m-info{flex:1;min-width:0}
.m-title{font-size:1.5rem;font-weight:800;color:#fff;text-shadow:0 0 .6rem var(--cc)}
.m-card.solo .m-title{font-size:1.9rem}
.m-song{font-size:1.05rem;color:#c7cdf0;margin-top:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-song .mus{color:var(--cc)}
.m-votes{margin-top:.4rem;font-size:1rem;color:#aeb6da}
.m-votes b{font-size:1.6rem;color:#fff;font-variant-numeric:tabular-nums}
.m-card.solo .m-votes b{font-size:2.2rem;color:var(--gold)}
.m-check{font-size:1.4rem;color:var(--green)}

.m-btns{display:flex;gap:.9rem;margin-top:.4rem}
.m-btns.col{flex-direction:column}
.m-btn{flex:1;border:0;cursor:pointer;font-family:inherit;font-size:1.6rem;font-weight:800;
    padding:1rem;border-radius:1rem;color:#fff;position:relative;transition:.12s;letter-spacing:.1rem}
.m-btn:active{transform:scale(.97)}
.m-btn:disabled{opacity:.5;cursor:not-allowed}
.m-btn.a{background:linear-gradient(135deg,#ffcf4d,#ff9a3d);color:#3a2600;box-shadow:0 0 1.2rem rgba(255,180,60,.5)}
.m-btn.b{background:linear-gradient(135deg,var(--pink),#c13bff);box-shadow:0 0 1.2rem rgba(255,79,163,.5)}
.m-btn.vote{background:linear-gradient(135deg,var(--pink),var(--purple));box-shadow:0 0 1.2rem rgba(255,79,163,.5)}
.m-btn.abstain{background:transparent;border:.12rem solid rgba(255,255,255,.35);color:#cfd6f5;box-shadow:none}
.m-btn .ic{margin-right:.4rem}

/* 状态/提示卡 */
.m-panel{border-radius:1.1rem;padding:2rem 1.2rem;text-align:center;
    background:rgba(10,12,26,.55);border:.1rem solid rgba(255,255,255,.12)}
.m-panel .big{font-size:1.7rem;font-weight:800;margin-bottom:.6rem}
.m-panel .sub{font-size:1.1rem;color:#aeb6da}
.m-panel .ic{font-size:3rem;display:block;margin-bottom:.6rem}
.m-tip{align-self:center;font-size:.95rem;color:#8b93b8;letter-spacing:.2rem;margin-top:.4rem}
.badge-voted{align-self:center;padding:.4rem 1.4rem;border-radius:2rem;font-size:1.1rem;font-weight:700;
    background:rgba(62,240,168,.15);color:var(--green);border:.1rem solid rgba(62,240,168,.5)}

/* 决赛/排名简版 */
.m-fin{display:flex;align-items:center;gap:.8rem;border-radius:.9rem;padding:.8rem;margin-top:.6rem;
    border:.1rem solid rgba(255,255,255,.15);background:rgba(10,12,26,.5)}
.m-fin img{width:3.4rem;height:3.4rem;border-radius:.6rem;object-fit:cover}
.m-fin .fn{flex:1;font-weight:700}
.m-fin .fv{font-size:1.5rem;font-weight:900;color:var(--gold)}
.m-fin.top{border-color:var(--gold);box-shadow:0 0 1rem rgba(255,209,92,.4)}

/* toast */
#toast{position:fixed;left:50%;bottom:2.5rem;transform:translateX(-50%) translateY(2rem);
    background:rgba(0,0,0,.85);color:#fff;padding:.8rem 1.6rem;border-radius:2rem;font-size:1.1rem;
    opacity:0;transition:.25s;pointer-events:none;z-index:100;max-width:80vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.ok{border:.1rem solid rgba(62,240,168,.6)}
#toast.err{border:.1rem solid rgba(255,107,138,.6)}