:root{--bg1:#0f1526;--bg2:#1a2340;--card:#1d2850;--card-line:#2e3d6e;--gold:#ffd24d;--gold-soft:#ffec9e;--text:#f2f5ff;--muted:#9aa7cf;--red:#ff6b6b;--green:#4ade80;--violet:#8b7cf6;--radius:16px}
*{box-sizing:border-box;margin:0;padding:0}html{min-height:100%}body{font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC","Source Han Sans SC",sans-serif;background:radial-gradient(1200px 600px at 85% -10%,rgba(139,124,246,.16),transparent 60%),radial-gradient(900px 500px at -10% 10%,rgba(255,210,77,.10),transparent 55%),linear-gradient(160deg,var(--bg1),var(--bg2));color:var(--text);min-height:100vh;padding:24px 40px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}a{color:var(--gold-soft);text-underline-offset:3px}button,input,select,a{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--gold-soft);outline-offset:4px}[hidden]{display:none!important}
.topbar,main,footer{max-width:1840px;margin-inline:auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:196px}.brand{display:flex;align-items:center;gap:18px;min-width:0}.brand-mark{flex:none;width:60px;height:60px;border-radius:16px;background:linear-gradient(145deg,#2b3a6e,#1d2850);border:1px solid var(--card-line);display:grid;place-items:center}.brand h1{font-size:40px;font-weight:800;letter-spacing:2px;background:linear-gradient(180deg,#fff,var(--gold-soft));background-clip:text;-webkit-background-clip:text;color:transparent;line-height:1.25}.sub{margin-top:10px;font-size:16px;color:var(--muted);letter-spacing:1px}.sub b{color:var(--gold)}.entry-note{margin-top:18px;font-size:14px;color:var(--muted)}.entry-note a{margin-left:12px}.qr-card{flex:none;width:180px;min-height:196px;padding:6px 9px;background:rgba(255,255,255,.06);border:1px solid var(--card-line);border-radius:var(--radius);text-align:center}.qr-title{font-size:16px;line-height:20px;color:var(--gold);font-weight:700;margin-bottom:2px}#qrBox{width:160px;height:160px;background:#fff;display:grid;place-items:center;color:#1a2244;font-size:12px}#qrBox canvas{display:block;width:160px;height:160px}
.control{min-height:120px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:rgba(255,255,255,.05);border:1px solid var(--card-line);border-radius:var(--radius);padding:14px 22px;position:relative}.timer-wrap{display:flex;align-items:center;gap:28px}.timer-label{font-size:14px;line-height:1.5;color:var(--muted)}.timer-num{font-size:56px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--gold);min-width:94px}.timer-num.urgent{color:var(--red)}.state-summary{display:flex;flex-direction:column;align-items:flex-start;gap:5px}.round-label{font-size:13px;color:var(--muted)}.state-tag{padding:5px 14px;border-radius:999px;font-size:14px;font-weight:700;background:rgba(255,255,255,.08);color:var(--muted);line-height:1.5}.state-tag.live{background:rgba(74,222,128,.16);color:var(--green)}.state-tag.done{background:rgba(255,107,107,.16);color:var(--red)}.total-wrap{padding-left:24px;border-left:1px solid var(--card-line)}.total-num{font-size:36px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--gold-soft);line-height:1.2}.progress{position:absolute;left:22px;right:22px;bottom:8px;height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}.progress>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--violet))}
.section-title{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:12px 0;min-height:28px}.section-title h2{font-size:22px;font-weight:800;letter-spacing:2px}.hint{font-size:14px;color:var(--muted)}.rank-note{font-size:14px;color:var(--gold);font-weight:600}.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}.card{position:relative;min-width:0;min-height:188px;background:linear-gradient(170deg,#222e5c,#1a2244);border:1px solid var(--card-line);border-radius:var(--radius);padding:13px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:border-color .2s,box-shadow .2s}.card.dimmed{opacity:.62}.card.top1{border-color:#ff9f43;box-shadow:0 0 0 2px rgba(255,159,67,.45),0 8px 28px rgba(255,159,67,.18)}.card.top2{border-color:#c9d4ee;box-shadow:0 0 0 2px rgba(201,212,238,.35),0 8px 24px rgba(201,212,238,.1)}.card.top3{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,210,77,.35),0 8px 24px rgba(255,210,77,.12)}.rank-badge{position:absolute;top:-11px;left:12px;width:30px;height:30px;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:14px;font-weight:800;box-shadow:0 3px 8px rgba(0,0,0,.3)}.top1 .rank-badge,.top2 .rank-badge,.top3 .rank-badge{display:flex}.top1 .rank-badge{background:linear-gradient(145deg,#ffe08a,#ff9f43);color:#3d2400}.top2 .rank-badge{background:linear-gradient(145deg,#f4f7ff,#b9c6ea);color:#232c4a}.top3 .rank-badge{background:linear-gradient(145deg,#f0c8a8,#c97f4e);color:#3a2410}.card-no{font-size:14px;line-height:20px;font-weight:800;color:var(--gold);letter-spacing:1px;border:1px solid rgba(255,210,77,.4);border-radius:8px;padding:1px 10px;margin-bottom:7px}.card-name{font-size:24px;font-weight:800;line-height:1.3;overflow-wrap:anywhere;max-width:100%}.card-song{margin-top:5px;font-size:16px;line-height:23px;color:var(--muted);overflow-wrap:anywhere}.card-song::before{content:"《";color:#7a87b8}.card-song::after{content:"》";color:#7a87b8}.heat{margin-top:auto;padding-top:9px;display:flex;align-items:center;gap:7px}.heat svg{width:22px;height:22px}.heat-num{font-size:48px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--gold-soft);line-height:1}.heat-num.pop{animation:pop .45s ease}@keyframes pop{0%{transform:scale(1.35);color:#fff}100%{transform:scale(1)}}
.vote-btn{margin-top:12px;width:100%;min-height:48px;border:1px solid rgba(255,210,77,.45);border-radius:10px;background:rgba(255,210,77,.14);color:var(--gold);font-size:15px;font-weight:700;padding:10px 3px}.vote-btn:hover{background:rgba(255,210,77,.26)}.vote-btn.voted{background:rgba(74,222,128,.12);color:var(--green);border-color:rgba(74,222,128,.45)}.vote-btn:disabled:not(.voted){background:#2a3357;color:#a1acce;border-color:#465176}
.admin-controls{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}.duration-label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:4px}.duration-label select{height:40px;border:1px solid var(--card-line);border-radius:8px;background:#1b2448;color:var(--text);padding:6px}.btn-primary,.btn-secondary,.btn-danger,.btn-quiet{border-radius:10px;min-height:42px;padding:10px 16px;font-size:14px;font-weight:700;border:1px solid transparent;line-height:1.4}.btn-primary{background:linear-gradient(145deg,#ffdf7a,var(--gold));color:#332b00}.btn-secondary,.btn-quiet{background:#26345d;border-color:#46599b;color:var(--text)}.btn-danger{background:rgba(255,107,107,.14);border-color:rgba(255,107,107,.5);color:#ffb2b2}.btn-quiet{background:transparent}.btn-primary:disabled,.btn-secondary:disabled,.btn-danger:disabled,.btn-quiet:disabled{opacity:.55}.notice{background:#1b2c45;border:1px solid #456786;border-radius:10px;padding:10px 14px;line-height:1.6;font-size:14px;margin-top:12px;overflow-wrap:anywhere}.notice.warning{background:#322638;border-color:#9a6476;color:#ffd3d8}.retry-button{margin-top:8px;width:100%}footer{margin-top:16px;font-size:12px;line-height:24px;color:var(--muted);text-align:center;letter-spacing:1px}
#toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(14px);max-width:calc(100vw - 32px);background:#1b2448;border:1px solid #46599b;color:var(--text);padding:12px 20px;border-radius:12px;font-size:15px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:99;box-shadow:0 10px 30px rgba(0,0,0,.35)}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}#toast.warn{border-color:var(--red);color:#ffb2b2}
dialog{margin:auto;width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #596ba8;border-radius:16px;background:#1b2448;color:var(--text);padding:24px;box-shadow:0 24px 90px #0008}dialog::backdrop{background:#080f23c9}dialog h2{font-size:22px;margin-bottom:12px}dialog p{font-size:15px;line-height:1.8;overflow-wrap:anywhere}dialog label{display:block;font-size:14px;color:var(--muted);margin-top:18px}dialog input{width:100%;min-height:48px;margin-top:7px;padding:10px;border-radius:8px;border:1px solid #596ba8;background:#101a35;color:var(--text)}.dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:22px}.dialog-actions button{min-height:48px;flex:1}.dialog-error{color:#ffb2b2;min-height:0;margin-top:10px}.dialog-error:empty{display:none}.not-found main{max-width:600px;margin:20vh auto}.not-found h1{margin-bottom:16px}.not-found a{display:inline-block;margin-top:20px}
@media(max-width:1400px){.brand h1{font-size:34px}.timer-wrap{gap:18px}.control{padding-inline:18px}.admin-controls{gap:6px}.btn-primary,.btn-secondary,.btn-danger,.btn-quiet{padding-inline:12px}.card-name{font-size:21px}}
@media(max-width:1100px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}.control{align-items:flex-start}.admin-controls{width:100%;padding-bottom:8px}.topbar{gap:16px}.brand h1{font-size:30px}.brand-mark{display:none}}
@media(max-width:860px){body{padding:20px}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.brand h1{font-size:26px}.entry-note a{display:block;margin:6px 0 0}.sub{line-height:1.6}.timer-wrap{gap:16px}.total-wrap{padding-left:16px}.card-name{font-size:20px}}
@media(max-width:640px){body{padding:18px 12px 28px}.topbar{align-items:flex-start;gap:12px}.brand h1{font-size:23px;letter-spacing:.5px}.sub{font-size:13px}.entry-note{font-size:12px;margin-top:10px}.screen .qr-card{width:180px}.screen .topbar{flex-wrap:wrap}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.section-title{gap:8px;margin-block:18px}.section-title h2{font-size:19px}.hint,.rank-note{font-size:12px}.control{padding:12px 12px 20px;min-height:122px}.timer-num{font-size:42px;min-width:70px}.timer-label{font-size:12px}.timer-wrap{gap:12px;width:100%}.state-tag{font-size:12px;padding:4px 9px}.round-label{font-size:12px}.total-wrap{margin-left:auto;padding-left:12px}.total-num{font-size:28px}.progress{left:12px;right:12px}.card{padding:13px 10px;min-height:188px}.card-name{font-size:18px;line-height:24px}.card-song{font-size:13px;line-height:20px}.heat-num{font-size:40px}.admin-controls{gap:8px}.admin-controls button{min-height:44px}.state-summary #timerSub{max-width:150px}dialog{padding:22px 18px}}
.mobile{max-width:680px;margin:auto;padding:18px 12px max(28px,env(safe-area-inset-bottom))}.mobile .topbar{min-height:76px}.mobile .brand h1{font-size:24px;letter-spacing:.5px}.mobile .sub{font-size:13px;margin-top:5px}.mobile .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mobile .control{min-height:126px;margin-top:8px;padding:12px 12px 19px;gap:4px}.mobile .timer-wrap{width:100%;gap:12px}.mobile .timer-num{font-size:42px;min-width:70px}.mobile .total-num{font-size:28px}.mobile .total-wrap{margin-left:auto;padding-left:12px}.mobile .state-tag{font-size:12px;padding:4px 9px}.mobile .timer-label,.mobile .round-label{font-size:12px}.mobile .card{min-height:238px;padding:14px 10px}.mobile .card-name{font-size:18px;line-height:24px;min-height:48px;display:flex;align-items:center;justify-content:center}.mobile .card-song{font-size:13px;line-height:20px;min-height:40px;display:flex;align-items:center;justify-content:center}.mobile .card-song::before,.mobile .card-song::after{display:none}.mobile .heat-num{font-size:36px}.mobile .heat{padding-top:8px}.mobile .section-title{gap:6px;margin-block:18px}.mobile .section-title h2{font-size:19px}.mobile .hint{font-size:12px}.mobile .progress{left:12px;right:12px}.mobile footer{font-size:11px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}