:root{color-scheme:dark;--bg: #0b0b12;--bg2: #141422;--card: rgba(255, 255, 255, .06);--card-border: rgba(255, 255, 255, .1);--text: #f7f7fb;--muted: #9a9ab0;--accent: #ff4d6d;--accent2: #ff8fa3;--good: #5eead4;--warn: #fbbf24;--danger: #fb7185;--shadow: 0 20px 60px rgba(0, 0, 0, .45);--radius: 18px;--font: "SF Pro Display", "PingFang SC", "Noto Sans SC", system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;height:100%}body{font-family:var(--font);background:radial-gradient(1200px 600px at 10% -10%,rgba(255,77,109,.22),transparent 55%),radial-gradient(900px 500px at 100% 0%,rgba(99,102,241,.18),transparent 50%),var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer;border:none;background:none;color:inherit}a{color:inherit}.app-shell{min-height:100%;display:flex;flex-direction:column}.page{width:min(960px,100%);margin:0 auto;padding:20px 16px 40px;flex:1}.hero{text-align:center;padding:36px 8px 20px}.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:#ff4d6d1f;border:1px solid rgba(255,77,109,.35);color:var(--accent2);font-size:13px;margin-bottom:16px}.hero h1{margin:0 0 8px;font-size:clamp(32px,8vw,48px);letter-spacing:.04em;line-height:1.15}.hero p{margin:0 auto;max-width:34em;color:var(--muted);line-height:1.6}.cover-wrap{width:min(220px,55vw);aspect-ratio:1;margin:28px auto 8px;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.12)}.cover-wrap img{width:100%;height:100%;object-fit:cover;display:block}.card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:18px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow)}.card+.card{margin-top:14px}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.field label{font-size:13px;color:var(--muted)}.field input{width:100%;padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#00000047;color:var(--text);outline:none}.field input:focus{border-color:#ff4d6d99;box-shadow:0 0 0 3px #ff4d6d26}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:14px;font-weight:600;transition:transform .12s ease,opacity .12s ease,background .12s ease;-webkit-user-select:none;user-select:none}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#ff4d6d,#c9184a);color:#fff;width:100%;box-shadow:0 10px 30px #ff4d6d47}.btn-secondary{background:#ffffff14;border:1px solid rgba(255,255,255,.12);width:100%}.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.14);color:var(--muted);min-height:40px;padding:0 12px;font-size:13px}.btn-danger{background:#fb718526;border:1px solid rgba(251,113,133,.35);color:#fecdd3}.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.btn-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.hint{font-size:12px;color:var(--muted);line-height:1.5;margin-top:10px}.tips{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px}.tips li{padding:12px 14px;border-radius:14px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);color:var(--muted);font-size:14px;line-height:1.5}.tips strong{color:var(--text)}.room-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.room-title{min-width:0}.room-title h1{margin:0;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-title .sub{color:var(--muted);font-size:12px;margin-top:2px}.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;background:#ffffff14;color:var(--muted)}.pill.host{background:#ff4d6d26;color:var(--accent2)}.pill.live{background:#5eead41f;color:var(--good)}.player-card{text-align:center;padding:20px 16px 16px}.player-cover{width:min(180px,46vw);aspect-ratio:1;margin:0 auto 14px;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow)}.player-cover img{width:100%;height:100%;object-fit:cover;display:block}.player-cover.spinning img{animation:spin 18s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.song-meta h2{margin:0;font-size:22px}.song-meta p{margin:4px 0 0;color:var(--muted);font-size:14px}.progress-wrap{margin:18px 0 8px}.progress-bar{position:relative;height:36px;display:flex;align-items:center;touch-action:none;user-select:none;-webkit-user-select:none;cursor:default;will-change:contents}.progress-bar.interactive{cursor:grab}.progress-bar.scrubbing{cursor:grabbing}.progress-bar.interactive:hover .progress-track,.progress-bar.scrubbing .progress-track{height:12px}.progress-track{position:relative;width:100%;height:8px;border-radius:999px;background:#ffffff1f;overflow:visible;transition:height .1s ease}.progress-bar .fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,#ff4d6d,#ff8fa3);border-radius:inherit;transform-origin:left center;transform:scaleX(0);transition:none;pointer-events:none;will-change:transform}.progress-bar .thumb{position:absolute;left:0;top:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#fff;border:2px solid #ff4d6d;box-shadow:0 2px 12px #0006;transform:translate3d(0,-50%,0) scale(.9);pointer-events:none;z-index:2;will-change:transform;transition:none}.progress-bar:focus-visible{outline:none}.progress-bar:focus-visible .progress-track{box-shadow:0 0 0 3px #ff4d6d59}.time-row{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}.controls .btn{min-width:72px}.markers{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}.lyrics-card{position:relative;height:min(42vh,360px);overflow:hidden;padding:0}.lyrics-scroll{height:100%;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}.lyrics-inner{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28% 16px;transition:transform .35s ease;will-change:transform}.lyric-line{text-align:center;font-size:17px;line-height:1.45;color:#ffffff47;transition:color .2s ease,transform .2s ease,font-size .2s ease;max-width:22em}.lyric-line.active{color:#fff;font-size:22px;font-weight:700;transform:scale(1.04);text-shadow:0 0 24px rgba(255,77,109,.45)}.lyric-line.near{color:#ffffff9e}.lyric-empty{color:var(--muted);text-align:center;padding:40px 16px}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:14px;color:var(--muted)}.member-list{display:flex;flex-wrap:wrap;gap:8px}.member-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);font-size:13px}.member-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--good)}.member-chip.host .dot{background:var(--accent)}.chat-list{display:flex;flex-direction:column;gap:8px;max-height:160px;overflow:auto;margin-bottom:10px}.chat-item{font-size:13px;line-height:1.4}.chat-item .who{color:var(--accent2);margin-right:6px}.chat-item .text{color:#ffffffd9}.chat-form{display:flex;gap:8px}.chat-form input{flex:1;min-width:0;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#00000047;color:var(--text);outline:none}.banner{padding:10px 12px;border-radius:12px;font-size:13px;margin-bottom:12px;line-height:1.45}.banner.warn{background:#fbbf241f;border:1px solid rgba(251,191,36,.35);color:#fde68a}.banner.info{background:#5eead41a;border:1px solid rgba(94,234,212,.28);color:#99f6e4}.banner.error{background:#fb71851f;border:1px solid rgba(251,113,133,.35);color:#fecdd3}.qr-box{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px}.qr-box canvas,.qr-box svg{border-radius:12px;background:#fff;padding:10px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:flex-end;justify-content:center;z-index:50;padding:16px}.modal{width:min(420px,100%);background:#161625;border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:18px;box-shadow:var(--shadow)}.modal h3{margin:0 0 12px;font-size:18px}.tv-page{min-height:100%;display:flex;flex-direction:column;background:#000;color:#fff;padding:24px}.tv-top{display:flex;justify-content:space-between;align-items:center;opacity:.7;font-size:16px}.tv-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center}.tv-title{font-size:clamp(20px,3vw,32px);opacity:.55;letter-spacing:.08em}.tv-lyric{font-size:clamp(36px,7vw,72px);font-weight:800;line-height:1.35;max-width:16em;text-shadow:0 0 40px rgba(255,77,109,.35);min-height:1.35em}.tv-next{font-size:clamp(18px,3vw,28px);color:#ffffff59;min-height:1.4em}.tv-progress{height:6px;background:#ffffff1f;border-radius:999px;overflow:hidden;width:min(720px,80vw);margin:0 auto 28px}.tv-progress .fill{height:100%;background:linear-gradient(90deg,#ff4d6d,#ff8fa3);width:0%}.tv-footer{display:flex;justify-content:space-between;color:#ffffff73;font-size:14px}.footer-note{text-align:center;color:var(--muted);font-size:12px;padding:24px 12px 8px}.lyrics-page{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;background:radial-gradient(900px 480px at 50% -10%,rgba(255,77,109,.22),transparent 55%),#0a0a10;color:var(--text);z-index:20}.lyrics-top{flex-shrink:0;display:grid;grid-template-columns:72px 1fr 72px;align-items:center;gap:8px;padding:12px 14px;padding-top:max(12px,env(safe-area-inset-top));border-bottom:1px solid rgba(255,255,255,.06);background:#0a0a10b8;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.lyrics-back{font-size:14px;color:var(--muted);text-decoration:none;padding:8px 0}.lyrics-title{text-align:center;min-width:0}.lyrics-title .t{font-size:16px;font-weight:700}.lyrics-title .s{font-size:12px;color:var(--muted);margin-top:2px}.lyrics-follow{justify-self:end;min-height:32px;padding:0 10px;border-radius:999px;font-size:12px;border:1px solid rgba(255,255,255,.14);color:var(--muted);background:#ffffff0a}.lyrics-follow.on{color:var(--accent2);border-color:#ff4d6d73;background:#ff4d6d1f}.lyrics-scroller{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;scroll-behavior:auto;padding:0 20px;scrollbar-width:none}.lyrics-scroller::-webkit-scrollbar{display:none}.lyrics-pad{height:38vh;pointer-events:none}.lyrics-empty{text-align:center;color:var(--muted);padding:40px 16px}.lyrics-row{display:block;width:100%;text-align:center;padding:14px 8px;border:none;background:transparent;color:#ffffff47;font-size:18px;line-height:1.55;font-weight:500;transition:color .25s ease,transform .25s ease,font-size .25s ease,text-shadow .25s ease;cursor:pointer;-webkit-tap-highlight-color:transparent}.lyrics-row.near{color:#ffffff8c}.lyrics-row.active{color:#fff;font-size:24px;font-weight:700;transform:scale(1.03);text-shadow:0 0 28px rgba(255,77,109,.4)}.lyrics-resume{position:absolute;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%);z-index:5;min-height:40px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:#141420e0;color:#fff;font-size:13px;font-weight:600;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 30px #00000059}@media(min-width:768px){.lyrics-row{font-size:22px;padding:16px 12px}.lyrics-row.active{font-size:30px}}@media(min-width:768px){.room-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;align-items:start}.lyrics-card{height:min(56vh,520px)}.lyric-line{font-size:20px}.lyric-line.active{font-size:28px}}