@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) { cursor: pointer; }
}

:root { --ink:#f5f5f7; --muted:rgba(235,235,245,.6); --placeholder:rgba(235,235,245,.42); --panel:#1c1c1e; --fill:#2c2c2e; --line:rgba(84,84,88,.45); --coral:#ff375f; --lavender:#64d2ff; --night:#000; --glass:rgba(22,22,24,.72); --pop:rgba(44,44,46,.92); --hover:#3a3a3c; --input:#1c1c1e; --avatar:#3a3a3c; color-scheme:dark; }
:root[data-theme="light"] { --ink:#1d1d1f; --muted:rgba(60,60,67,.62); --placeholder:rgba(60,60,67,.48); --panel:#fff; --fill:#e8e8ed; --line:rgba(60,60,67,.18); --coral:#ff2d55; --lavender:#007aff; --night:#f2f2f7; --glass:rgba(255,255,255,.72); --pop:rgba(255,255,255,.94); --hover:#d8d8dd; --input:#f2f2f7; --avatar:#d1d1d6; color-scheme:light; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--night); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button { color:inherit; }
a { color:inherit; text-decoration:none; }
.icon { width:20px; height:20px; flex:0 0 auto; }
.icon-search { width:22px; height:22px; }
.app-shell { min-height:100vh; background:var(--night); overflow:hidden; }
.topbar { height:56px; padding:0 clamp(18px,4vw,48px); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:28px; position:relative; z-index:20; background:var(--glass); backdrop-filter:blur(20px); }
.brand { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:650; letter-spacing:-.03em; }
.brand-mark { width:28px; height:28px; border-radius:8px; background:var(--coral); display:grid; place-items:center; position:relative; }
.brand-mark::before,.brand-mark::after,.brand-mark span { content:""; display:block; width:3px; background:#fff; border-radius:3px; position:absolute; }
.brand-mark::before { height:10px; transform:translateX(-6px); }
.brand-mark span { height:17px; }
.brand-mark::after { height:7px; transform:translateX(6px); }
.nav-links { display:flex; gap:22px; height:100%; align-items:center; margin-left:8px; }
.nav-links a { font-size:13px; color:var(--muted); height:100%; display:flex; align-items:center; position:relative; font-weight:500; }
.nav-links a.active { color:var(--ink); }
.nav-links a.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--coral); }
.top-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
.solo-badge, .settings-entry { height:32px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 12px; background:var(--fill); border:0; border-radius:999px; color:var(--ink); font-size:13px; font-weight:560; cursor:pointer; line-height:1; text-decoration:none; white-space:nowrap; box-sizing:border-box; }
.solo-badge:hover, .settings-entry:hover, .settings-entry.open { background:var(--hover); }
.settings-entry .icon { width:14px; height:14px; }
.online-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#30d158; margin-right:6px; }
.youtube-status { height:34px; display:flex; align-items:center; gap:7px; border:1px solid rgba(255,70,70,.22); background:rgba(255,0,0,.07); border-radius:5px; padding:0 10px; color:#d3c8ca; font-size:10px; }
.youtube-status>span { width:17px; height:17px; border-radius:4px; display:grid; place-items:center; background:#f00; color:#fff; font-size:8px; }
.icon-button { width:36px; height:36px; display:grid; place-items:center; background:transparent; border:0; color:#9695a4; cursor:pointer; }
.avatar { width:32px; height:32px; border-radius:50%; background:var(--avatar); border:0; display:grid; place-items:center; font-size:13px; font-weight:650; cursor:pointer; color:var(--ink); }
.avatar.open { outline:2px solid var(--coral); outline-offset:2px; }
.avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.account-wrap { position:relative; }
.account-pop { position:absolute; top:calc(100% + 8px); right:0; z-index:40; width:min(320px, calc(100vw - 32px)); max-height:min(72vh, 560px); overflow:auto; padding:12px; background:var(--pop); backdrop-filter:blur(24px); border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.profile-card { display:flex; align-items:center; gap:12px; padding:6px 4px 12px; }
.profile-avatar-edit { position:relative; width:56px; height:56px; flex:0 0 56px; border:0; border-radius:50%; padding:0; overflow:hidden; background:var(--avatar); color:var(--ink); cursor:pointer; display:grid; place-items:center; font-size:20px; font-weight:700; }
.profile-avatar-edit img { width:100%; height:100%; object-fit:cover; }
.profile-avatar-edit em { position:absolute; left:0; right:0; bottom:0; padding:3px 0 4px; background:rgba(0,0,0,.45); color:#fff; font-size:9px; font-style:normal; font-weight:650; }
.profile-name { flex:1; min-width:0; display:grid; gap:6px; }
.profile-name span { color:var(--muted); font-size:12px; }
.profile-name input { width:100%; border:0; border-radius:10px; background:var(--input); color:var(--ink); padding:10px 12px; font-size:16px; font-weight:650; }
.login-icons { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:4px 0 8px; }
.login-icon { display:grid; justify-items:center; gap:6px; border:0; background:transparent; color:var(--muted); cursor:pointer; padding:6px 0; }
.login-icon b { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--fill); color:var(--ink); font-size:11px; font-weight:800; letter-spacing:.02em; position:relative; }
.login-icon small { font-size:10px; }
.login-icon.open b, .login-icon:hover b { background:var(--hover); }
.login-icon.ready b::after { content:""; position:absolute; top:4px; right:4px; width:7px; height:7px; border-radius:50%; background:#30d158; box-shadow:0 0 0 2px var(--pop); }
.login-icon:nth-child(3) b { background:#ff2d55; color:#fff; }
.avatar-crop-modal { width:min(380px, calc(100vw - 32px)); padding:16px; border-radius:18px; background:var(--pop); border:1px solid var(--line); box-shadow:0 24px 60px rgba(0,0,0,.28); display:grid; gap:14px; }
.avatar-crop-modal .modal-head h2 { font-size:20px; }
.crop-view { width:280px; height:280px; margin:0 auto; border-radius:50%; overflow:hidden; position:relative; background:#111; cursor:grab; touch-action:none; box-shadow:0 0 0 1px var(--line); }
.crop-view:active { cursor:grabbing; }
.crop-view img { position:absolute; left:50%; top:50%; max-width:none; transform-origin:center center; user-select:none; pointer-events:none; }
.crop-zoom { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; color:var(--muted); font-size:13px; }
.crop-zoom input { accent-color:var(--coral); }
.bench-pop { width:min(360px, calc(100vw - 32px)); }
.account-pop-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:4px 6px 10px; }
.account-pop-head strong { font-size:15px; font-weight:650; }
.account-pop-head small { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-pop .settings-block { padding:12px 4px 4px; }
.account-pop .settings-block input { padding:10px 12px; font-size:15px; border-radius:10px; background:var(--input); border:0; }
.account-pop .sing-button { min-height:34px; padding:0 14px; border-radius:999px; }
.bench-pop .settings-tools { padding-top:4px; }
.bench-pop .studio-tool { min-height:52px; border:0; border-radius:12px; background:var(--input); }
.account-pop.lan-pop { width:min(392px, calc(100vw - 24px)); left:auto; right:0; transform:translateX(-36px); }
.lan-pop .lan-entry, .lan-pop .lan-form, .lan-pop .lan-lobby { margin-top:4px; gap:8px; }
.lan-pop .lan-entry>p { color:var(--muted); font-size:12px; line-height:1.5; margin:0 0 6px; }
.lan-pop .lan-choice { border:0; background:var(--input); border-radius:12px; padding:12px; color:var(--ink); }
.lan-pop .lan-choice:hover { transform:none; border:0; background:var(--hover); }
.lan-pop .lan-choice strong { font-size:14px; font-weight:650; }
.lan-pop .lan-choice small { color:var(--muted); font-size:12px; }
.lan-pop .lan-form label>span { color:var(--muted); font-size:12px; }
.lan-pop .lan-form input { border:0; background:var(--input); border-radius:10px; color:var(--ink); padding:10px 12px; font-size:15px; }
.lan-pop .lan-form input:focus { box-shadow:0 0 0 3px rgba(255,55,95,.28); border:0; }
.lan-pop .lan-status { border:0; background:var(--input); border-radius:10px; color:var(--muted); font-size:12px; }
.lan-pop .lan-status.show { color:var(--ink); }
.lan-pop .lan-room-head { border:0; background:var(--input); border-radius:12px; padding:10px 12px; }
.lan-pop .lan-room-head strong { font-family:inherit; font-size:20px; letter-spacing:.08em; color:var(--ink); }
.lan-pop .lan-room-head span, .lan-pop .lan-room-head small { color:var(--muted); }
.lan-pop .lan-invite, .lan-pop .lan-audio-panel, .lan-pop .lan-song-state, .lan-pop .lan-roster { border:0; background:var(--input); border-radius:12px; }
.lan-pop .lan-invite button { border:0; background:var(--fill); color:var(--ink); border-radius:999px; font-size:12px; }
.lan-pop .lan-mode-buttons button { border:0; background:var(--fill); color:var(--muted); border-radius:10px; }
.lan-pop .lan-mode-buttons button b { color:var(--ink); }
.lan-pop .modal-actions { margin-top:8px; display:flex; gap:8px; justify-content:flex-end; }
.lan-pop .ghost-button { margin-left:0; }
.search-band { padding:16px clamp(18px,6vw,64px) 14px; display:block; background:transparent; border-bottom:1px solid var(--line); }
.idle-home .topbar { background:transparent; border-bottom:0; }
.idle-home .brand { visibility:hidden; }
.idle-home .nav-links { display:none; }
.idle-home .discover { display:none; }
.idle-home .search-band { flex:1; min-height:0; display:flex; align-items:flex-start; justify-content:center; border:0; padding:22vh 24px 8px; transition:padding .5s cubic-bezier(.22,1,.36,1); }
.idle-home.search-docked .search-band { padding-top:10px; }
.app-shell.idle-home { display:flex; flex-direction:column; }
.start-hero { width:100%; }
.idle-home .start-hero { width:min(640px, calc(100vw - 32px)); }
.start-logo { display:none; }
.idle-home .start-logo { display:flex; flex-direction:column; align-items:center; gap:12px; margin:0 0 40px; transition:margin .5s cubic-bezier(.22,1,.36,1), gap .4s ease; }
.idle-home.search-docked .start-logo { margin-bottom:18px; gap:0; }
.idle-home .start-brand { display:flex; align-items:center; gap:18px; transform-origin:top center; transition:transform .5s cubic-bezier(.22,1,.36,1), gap .45s ease; }
.idle-home.search-docked .start-brand { transform:scale(.48); gap:12px; }
.idle-home .start-logo .brand-mark { width:72px; height:72px; border-radius:20px; }
.idle-home.search-docked .score-history { opacity:0; pointer-events:none; }
.home-leaving .start-logo .brand-mark { visibility:hidden; }
.home-leaving .search-band,
.home-leaving .score-history { opacity:0; pointer-events:none; transition:opacity .2s ease; }
.home-leaving .start-logo,
.home-leaving .start-brand,
.home-leaving .search-band { transition:opacity .2s ease; }
.home-leaving .start-logo strong,
.home-leaving .start-logo small { opacity:0; }
.brand-mark-fly { position:fixed; z-index:120; pointer-events:none; margin:0; transform-origin:top left; animation:mark-dock .4s cubic-bezier(.22,1,.28,1) forwards; will-change:transform; contain:layout style; }
.brand-mark-fly::before,
.brand-mark-fly::after,
.brand-mark-fly span { width:11%; border-radius:999px; background:#fff; }
.brand-mark-fly::before { height:36%; transform:translateX(-180%); }
.brand-mark-fly span { height:61%; }
.brand-mark-fly::after { height:25%; transform:translateX(180%); }
@keyframes mark-dock {
  from { transform:translate3d(0,0,0) scale(1); }
  to { transform:translate3d(var(--tx), var(--ty), 0) scale(var(--ts)); }
}
.studio-enter .studio,
.studio-enter .analysis-bar { animation:studio-rise .32s cubic-bezier(.22,1,.28,1) both; }
@keyframes studio-rise {
  from { opacity:0; transform:translate3d(0,14px,0); }
  to { opacity:1; transform:none; }
}
.idle-home .start-logo .brand-mark::before,
.idle-home .start-logo .brand-mark::after,
.idle-home .start-logo .brand-mark span { width:8px; border-radius:6px; }
.idle-home .start-logo .brand-mark::before { height:26px; transform:translateX(-16px); }
.idle-home .start-logo .brand-mark span { height:44px; }
.idle-home .start-logo .brand-mark::after { height:18px; transform:translateX(16px); }
.idle-home .start-logo strong { font-size:56px; font-weight:650; letter-spacing:-.045em; line-height:1; }
.idle-home .start-logo small { color:var(--muted); font-size:15px; font-weight:500; letter-spacing:.01em; max-height:28px; overflow:hidden; transition:opacity .28s ease, max-height .4s ease, margin .4s ease; }
.idle-home.search-docked .start-logo small { opacity:0; max-height:0; margin:0; }
.idle-home .search-wrap { width:100%; max-width:none; margin:0; }
.idle-home .search-box { height:56px; border-radius:28px; padding-left:22px; background:var(--panel); border:1px solid var(--line); box-shadow:0 1px 6px rgba(32,33,36,.1); }
.idle-home .search-box:focus-within { box-shadow:0 2px 14px rgba(32,33,36,.16); }
.idle-home .search-box input { font-size:18px; padding:0 14px; }
.idle-home .search-submit { margin:6px; border-radius:22px; padding:0 22px; font-size:16px; }
.idle-home .search-results { top:64px; border-radius:22px; max-height:min(52vh, 480px); }
.eyebrow { color:var(--coral); font-size:10px; font-weight:780; letter-spacing:.18em; display:flex; align-items:center; gap:7px; text-transform:uppercase; }
.eyebrow .icon { width:14px; }
.search-copy h1 { font-weight:700; font-size:clamp(32px,4vw,48px); letter-spacing:-.04em; line-height:1.05; margin:15px 0 13px; }
.search-copy p { color:var(--muted); margin:0; font-size:15px; }
.search-wrap { position:relative; max-width:720px; margin:0 auto; }
.search-box { height:44px; border:0; background:var(--fill); border-radius:12px; display:flex; align-items:center; padding-left:16px; }
.search-box input { flex:1; min-width:0; color:var(--ink); background:transparent; border:0; outline:0; padding:0 12px; font-size:17px; }
.search-box input::placeholder { color:var(--placeholder); }
.clear { border:0; background:transparent; color:var(--muted); font-size:20px; cursor:pointer; }
.search-submit { align-self:stretch; border:0; margin:4px; padding:0 16px; background:var(--coral); border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; color:#fff; }
.quick-picks { display:flex; gap:9px; align-items:center; margin-top:12px; color:#747481; font-size:10px; }
.quick-picks button { background:transparent; border:0; color:#aaa9b5; font-size:10px; cursor:pointer; padding:0; }
.quick-picks button+button::before { content:"·"; margin-right:9px; color:#4d4d59; }
.search-results { position:absolute; z-index:30; top:52px; left:0; right:0; background:var(--pop); backdrop-filter:blur(24px); border:1px solid var(--line); border-radius:14px; padding:6px; box-shadow:0 20px 50px rgba(0,0,0,.2); max-height:min(420px, 70vh); overflow:auto; }
.results-head { display:flex; justify-content:space-between; align-items:center; padding:10px 12px 8px; color:var(--muted); font-size:12px; font-weight:600; }
.results-head>span { display:flex; align-items:center; gap:8px; }
.results-head small { color:rgba(235,235,245,.4); font-weight:500; }
.history-clear { width:28px; height:28px; border:0; border-radius:8px; background:transparent; color:var(--muted); display:grid; place-items:center; cursor:pointer; }
.history-clear .icon { width:15px; height:15px; }
.history-clear:hover { color:var(--coral); background:var(--fill); }
.result-row { width:100%; display:grid; grid-template-columns:48px 1fr auto; gap:12px; align-items:center; text-align:left; border:0; background:transparent; padding:8px 10px; border-radius:10px; cursor:pointer; }
.result-row:hover { background:rgba(255,255,255,.08); }
.result-cover { width:48px; height:36px; border-radius:8px; display:grid; place-items:center; background-size:cover; background-position:center; overflow:hidden; }
.result-cover .icon { width:15px; }
.result-row strong,.result-row small { display:block; }
.result-row strong { font-size:15px; font-weight:560; }
.result-row small { color:var(--muted); font-size:12px; margin-top:2px; }
.result-add { color:var(--coral); font-size:22px; padding:8px; }
.result-add .icon { width:15px; height:15px; }
.empty-result { padding:22px 12px; text-align:center; color:var(--muted); font-size:13px; }
.empty-result p { margin:0; }
.empty-result a { display:inline-flex; margin-top:12px; padding:8px 12px; border:0; border-radius:999px; color:#fff; background:var(--coral); }
.studio { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,.75fr); gap:18px; align-items:stretch; padding:18px clamp(18px,4vw,48px) 12px; max-width:1500px; margin:0 auto; }
.studio .video-column { min-width:0; display:flex; flex-direction:column; }
.section-label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; letter-spacing:.04em; font-weight:600; text-transform:uppercase; margin-bottom:9px; }
.section-label>span { color:var(--coral); }
.video-card { aspect-ratio:16/8.45; background:#000; border:0; position:relative; overflow:hidden; border-radius:16px; isolation:isolate; }
.video-card iframe { width:100%; height:100%; border:0; display:block; }
.youtube-host,.youtube-host>div { width:100%; height:100%; position:absolute; inset:0; z-index:0; }
.youtube-host iframe { width:100%!important; height:100%!important; z-index:0; }
.video-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:#111; color:var(--muted); }
.video-empty>.icon { width:30px; height:30px; color:var(--coral); margin-bottom:5px; }
.video-empty strong { color:var(--ink); font-size:17px; font-weight:600; }
.video-empty span { font-size:13px; }
.video-overlay-tag { position:absolute; z-index:5; pointer-events:none; top:12px; right:12px; background:rgba(28,28,30,.78); border:0; color:var(--muted); font-size:10px; letter-spacing:.08em; padding:6px 10px; border-radius:999px; backdrop-filter:blur(12px); }
.video-overlay-tag.youtube { border-color:rgba(255,65,65,.28); color:#ffb0b0; }
.countdown { position:absolute; inset:0; z-index:18; background:rgba(8,9,16,.45); display:grid; place-content:center; text-align:center; }
.countdown span { font-family:Georgia,serif; font-size:92px; line-height:1; color:#fff; text-shadow:0 0 40px rgba(255,102,112,.55); }
.countdown small { margin-top:11px; color:#b9b6c5; font-size:11px; letter-spacing:.12em; }
.live-overlay { position:absolute; top:11px; left:11px; z-index:32; padding:7px 10px; background:rgba(13,14,23,.78); border:1px solid rgba(255,255,255,.14); border-radius:4px; font-size:9px; letter-spacing:.13em; color:#ff8b93; }
.live-overlay strong { color:#fff; margin-left:8px; }
.live-overlay.waiting { color:#eab96a; border-color:rgba(234,185,106,.28); }
.live-overlay.waiting .live-dot { background:#eab96a; box-shadow:0 0 8px #eab96a; }
.live-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--coral); margin-right:5px; box-shadow:0 0 8px var(--coral); }
.track-meta { min-height:56px; display:flex; align-items:center; gap:13px; padding:12px 0 0; }
.track-cover { width:58px; height:44px; border-radius:10px; display:grid; place-items:center; background:#000; }
.track-cover span { width:25px; height:25px; border-radius:50%; background:rgba(0,0,0,.45); display:grid; place-items:center; }
.track-cover .icon { width:13px; }
.track-meta h2 { font-size:17px; font-weight:650; margin:0 0 4px; letter-spacing:-.02em; }
.track-meta p { font-size:13px; margin:0; color:var(--muted); }
.track-source { border:0; color:var(--muted); background:var(--fill); padding:6px 10px; border-radius:999px; font-size:11px; margin-left:8px; }
.ghost-button { margin-left:auto; background:var(--fill); border:0; color:var(--ink); border-radius:999px; padding:8px 12px; font-size:13px; font-weight:560; cursor:pointer; }
.intro-detection { min-height:40px; margin-top:10px; padding:10px 12px; display:flex; align-items:center; gap:10px; border:0; border-radius:12px; background:var(--panel); color:var(--muted); font-size:12px; }
.intro-detection>span { color:#eab96a; font-weight:700; letter-spacing:.09em; white-space:nowrap; }
.intro-detection>span i { display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:#eab96a; box-shadow:0 0 8px rgba(234,185,106,.6); }
.intro-detection b { font-weight:500; white-space:nowrap; }
.intro-detection b strong { color:#e7e3df; font-size:9px; margin-left:3px; }
.intro-detection em { margin-left:auto; color:#aaa8b4; font-style:normal; white-space:nowrap; }
.skip-intro-button { height:30px; flex:0 0 auto; display:flex; align-items:center; gap:5px; padding:0 10px; border:0; border-radius:999px; background:var(--fill); color:var(--ink); font-size:12px; font-weight:560; cursor:pointer; }
.skip-intro-button .icon { width:12px; height:12px; }
.skip-intro-button:hover:not(:disabled) { background:var(--hover); }
.skip-intro-button.lock-lyric { color:#fff; background:#30d158; }
.skip-intro-button.lock-lyric:hover:not(:disabled) { background:#28c64c; }
.lyrics-card { margin-top:0; background:var(--panel); border:0; border-radius:16px; min-height:0; height:auto; align-self:stretch; contain:size; display:flex; flex-direction:column; overflow:hidden; }
.lyrics-head { padding:16px 16px 12px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); flex:0 0 auto; }
.lyrics-head .section-label { margin-bottom:9px; }
.lyrics-head h2 { margin:0; font-size:20px; font-weight:650; letter-spacing:-.02em; }
.lyrics-actions { display:flex; gap:6px; }
.lyrics-mode { border:0; background:var(--fill); color:var(--ink); font-size:12px; display:flex; align-items:center; gap:5px; border-radius:999px; padding:7px 10px; font-weight:560; }
.lyrics-mode .icon { width:13px; height:13px; }
.lyrics-scroll { padding:8px 16px 10px; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:flex-start; gap:2px; overflow-y:auto; }
.lyrics-state { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#858492; gap:8px; }
.lyrics-state>.icon { width:25px; height:25px; color:#757482; }
.lyrics-state strong { color:var(--ink); font-size:13px; }
.lyrics-state small { max-width:260px; line-height:1.55; font-size:9px; }
.lyrics-state button { margin-top:6px; border:1px solid var(--line); border-radius:4px; padding:7px 10px; background:#27293d; color:#d4d1d7; font-size:9px; cursor:pointer; }
.lyrics-state>div { display:flex; gap:6px; }
.lyrics-loader { width:24px; height:24px; border:2px solid #3d3d4d; border-top-color:var(--coral); border-radius:50%; animation:spin .85s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.lyric-line { display:grid; grid-template-columns:36px 1fr; align-items:center; min-height:42px; opacity:.38; transform:scale(.97); transform-origin:left center; transition:opacity .24s ease,transform .24s ease,filter .24s ease; }
.lyric-line time { color:#777684; font-size:9px; font-variant-numeric:tabular-nums; }
.lyric-line p { margin:0; font-size:13px; line-height:1.4; transition:font-size .24s ease,color .24s ease; }
.lyric-line.past { opacity:.22; }
.lyric-line.upcoming { opacity:.42; }
.lyric-line.current { opacity:1; min-height:64px; transform:scale(1); filter:none; }
.lyric-line.current time { color:var(--coral); }
.lyric-line.current p { color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif; font-size:22px; font-weight:600; line-height:1.25; text-shadow:none; }
.lyric-line.current p::before { content:"正在唱"; display:block; margin-bottom:4px; color:var(--coral); font-family:-apple-system,BlinkMacSystemFont,sans-serif; font-size:8px; font-weight:700; letter-spacing:.14em; text-shadow:none; }
.lyric-line.neighbor { opacity:1; min-height:52px; transform:scale(1); }
.lyric-line.neighbor time { color:#eab96a; }
.lyric-line.neighbor p { color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif; font-size:18px; font-weight:600; line-height:1.25; text-shadow:none; }
.lyric-line.neighbor.prev p::before { content:"上一句"; display:block; margin-bottom:3px; color:#eab96a; font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-size:8px; font-weight:700; letter-spacing:.14em; text-shadow:none; }
.lyric-line.neighbor.next p::before { content:"下一句"; display:block; margin-bottom:3px; color:#eab96a; font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-size:8px; font-weight:700; letter-spacing:.14em; text-shadow:none; }
.lyrics-mode.ready { border-color:rgba(234,185,106,.4); color:#f0ece9; background:rgba(234,185,106,.1); }
.lyrics-foot { flex:0 0 auto; margin-top:auto; min-height:32px; border-top:1px solid var(--line); padding:6px 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--muted); font-size:11px; }
.lyrics-foot>span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lyrics-foot button { border:0; background:transparent; color:#aaa9b4; font-size:9px; cursor:pointer; }
.pulse-dot { width:5px; height:5px; display:inline-block; border-radius:50%; background:#67e6a6; margin-right:5px; }
.pulse-dot.estimated { background:#eab96a; box-shadow:none; }
.sync-badge { flex:0 0 auto; border:1px solid var(--line); border-radius:999px; padding:4px 7px; color:#9998a5; }
.sync-badge.exact { color:#67e6a6; border-color:rgba(103,230,166,.25); }
.sync-badge.estimated { color:#eab96a; border-color:rgba(234,185,106,.25); }
.sync-badge.manual { color:#bba7ff; border-color:rgba(187,167,255,.25); }
.ultrastar-match { min-height:40px; margin-top:10px; padding:10px 12px; display:flex; align-items:center; flex-wrap:wrap; gap:10px; border:0; border-radius:12px; background:var(--panel); color:var(--muted); font-size:12px; }
.ultrastar-match>span { display:flex; align-items:center; gap:6px; color:var(--muted); white-space:nowrap; font-weight:600; }
.ultrastar-match>span i { width:6px; height:6px; border-radius:50%; background:#636366; }
.ultrastar-match>b { color:var(--ink); font-size:13px; font-weight:560; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.ultrastar-match>em { margin-left:auto; color:var(--muted); font-style:normal; white-space:nowrap; font-size:12px; }
.ultrastar-match>a { color:#0a84ff; text-decoration:none; white-space:nowrap; }
.ultrastar-match.searching>span i { background:#ffd60a; animation:pulse 1.1s infinite; }
.ultrastar-match.matched { background:rgba(48,209,88,.1); }
.ultrastar-match.matched>span i { background:#30d158; }
.ultrastar-match.timing { background:rgba(255,214,10,.08); }
.ultrastar-match.timing>span i { background:#ffd60a; }
.ultrastar-match.ai { background:rgba(10,132,255,.08); }
.ultrastar-match.ai>span { color:#64d2ff; }
.ultrastar-match.ai>span i { background:#0a84ff; }
.ultrastar-match.ai.searching>span i { background:#ffd60a; }
.ultrastar-match.mismatch { background:rgba(255,214,10,.08); }
.ultrastar-match.error>span i { background:var(--coral); }
.ultrastar-match .ghost-button { margin-left:0; }
.ultrastar-match .chart-source-list { width:100%; margin:2px 0 0; }
.chart-actions { display:flex; align-items:center; gap:6px; margin-left:auto; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.chart-switch-modal { width:min(520px,100%); }
.chart-search-error { border-left-color:#ff6670; background:rgba(255,102,112,.08); color:#efb4b8; }
.chart-pick-list { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; max-height:220px; overflow:auto; }
.chart-pick-list button { width:100%; text-align:left; border:1px solid var(--line); border-radius:5px; background:#141522; color:#f0ece9; padding:10px 12px; }
.chart-pick-list button:hover { border-color:rgba(187,167,255,.4); background:#1a1c2e; }
.chart-pick-list strong, .chart-pick-list small { display:block; }
.chart-pick-list strong { font-size:12px; font-weight:650; }
.chart-pick-list small { margin-top:4px; color:#8d8c99; font-size:9px; }
.chart-source-list { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.chart-source-list li { display:flex; align-items:center; gap:6px; border:0; border-radius:999px; padding:5px 10px; background:var(--fill); }
.chart-source-list b { font-size:11px; font-weight:600; color:var(--ink); }
.chart-source-list em { font-style:normal; font-size:11px; color:var(--muted); }
.chart-source-list .matched { background:rgba(48,209,88,.14); }
.chart-source-list .matched em { color:#30d158; }
.chart-source-list .requires_login em, .chart-source-list .requires_verify em, .chart-source-list .unavailable em { color:#ffd60a; }
.offset-steps { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; color:#777684; font-size:8px; }
.offset-steps-label { white-space:nowrap; }
.offset-buttons { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.offset-steps button, .offset-buttons button { min-height:28px; padding:0 8px; border:1px solid var(--line); border-radius:4px; background:#141522; color:#d8d6de; font-size:9px; font-weight:700; }
.offset-steps button:hover, .offset-buttons button:hover { border-color:rgba(187,167,255,.4); color:#fff; }
.offset-steps strong { font-size:9px; color:#aaa9b4; white-space:nowrap; }
.lx-source { min-height:38px; margin-top:8px; padding:8px 10px; display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:4px; background:#171926; color:#7e7d8a; font-size:8px; }
.lx-source>span { display:flex; align-items:center; gap:6px; color:#9ecbff; white-space:nowrap; }
.lx-source>span i { width:6px; height:6px; border-radius:50%; background:#5b8def; }
.lx-source>b { color:#c9d7ea; font-size:9px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.lx-source>em { margin-left:auto; color:#7e8aa0; font-style:normal; white-space:nowrap; }
.lx-source>a { color:#9ecbff; text-decoration:none; white-space:nowrap; }
.lx-source.searching>span i { background:#eab96a; animation:pulse 1.1s infinite; }
.lx-source.ready { border-color:rgba(94,167,255,.28); background:rgba(94,167,255,.05); }
.lx-source.ready>span i { background:#6aa8ff; }
.lx-source.error>span i { background:#ff6670; }
.song-identify { min-height:40px; margin-top:10px; padding:10px 12px; display:flex; align-items:center; gap:12px; border:0; border-radius:12px; background:var(--panel); color:var(--muted); font-size:12px; }
.song-identify>span { display:flex; align-items:center; gap:6px; color:var(--coral); white-space:nowrap; font-weight:600; }
.song-identify>span i { width:6px; height:6px; border-radius:50%; background:var(--coral); }
.song-identify>b { color:var(--ink); font-size:13px; font-weight:560; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.song-identify>em { margin-left:auto; color:var(--muted); font-style:normal; white-space:nowrap; }
.song-identify.catalog { background:rgba(48,209,88,.1); }
.song-identify.catalog>span { color:#30d158; }
.song-identify.catalog>span i { background:#30d158; }
.song-identify.catalog>b { color:var(--ink); }
.song-identify.manual { background:rgba(10,132,255,.1); }
.song-identify.manual>span { color:#64d2ff; }
.song-identify.manual>span i { background:#0a84ff; }
.lx-play { flex:0 0 auto; height:28px; padding:0 10px; border:1px solid rgba(94,167,255,.35); border-radius:4px; background:rgba(94,167,255,.12); color:#d7e7ff; font-size:9px; font-weight:700; }
.lx-play:disabled { opacity:.45; }
.lx-audio { position:absolute; width:0; height:0; opacity:0; pointer-events:none; }
.lx-results { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
.lx-row { min-height:44px; padding:7px 9px; display:flex; flex-direction:column; align-items:flex-start; gap:2px; border:1px solid var(--line); border-radius:4px; background:#141522; color:#d8d6de; text-align:left; cursor:pointer; }
.lx-row strong { font-size:10px; font-weight:700; }
.lx-row small { color:#8b8a96; font-size:8px; }
.lx-row em { color:#8fb4e8; font-size:8px; font-style:normal; }
.lx-row:hover:not(:disabled) { border-color:rgba(94,167,255,.35); }
.lx-row.active { border-color:rgba(94,167,255,.5); background:rgba(94,167,255,.08); }
.lx-row:disabled { opacity:.55; cursor:wait; }
@media (max-width: 720px) {
  .lx-source { flex-wrap:wrap; gap:8px; }
  .lx-source>em { margin-left:0; }
  .lx-results { grid-template-columns:1fr; }
}
.studio-tools { margin:0 auto 14px; width:calc(100% - 8vw); max-width:1372px; display:flex; align-items:stretch; gap:8px; }
.studio-tools input[type="file"] { display:none; }
.studio-tool { min-width:0; flex:1; min-height:52px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; text-align:left; padding:10px 12px; border:0; border-radius:12px; background:var(--fill); color:var(--ink); cursor:pointer; }
.studio-tool>.icon, .studio-tool-mark { grid-row:1 / span 2; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:rgba(10,132,255,.16); color:#64d2ff; }
.studio-tool>.icon { box-sizing:border-box; padding:6px; }
.studio-tool > .studio-tool-mark { font-size:10px; font-weight:700; letter-spacing:.02em; }
.studio-tool-mark.youtube { background:rgba(255,55,95,.16); color:var(--coral); }
.studio-tool>span:not(.studio-tool-mark) { line-height:1.2; font-size:13px; font-weight:600; }
.studio-tool small { grid-column:2; color:var(--muted); font-size:11px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-tool.ready { background:rgba(48,209,88,.12); }
.studio-tool:disabled { opacity:.45; cursor:not-allowed; }
.studio-tool-clear { width:36px; flex:0 0 auto; border:1px solid var(--line); border-radius:5px; background:#181a2a; color:#9998a5; font-size:18px; cursor:pointer; }
.settings-modal { width:min(440px,100%); max-height:min(86vh,740px); overflow:auto; background:var(--panel); border:0; box-shadow:0 24px 60px rgba(0,0,0,.5); border-radius:18px; padding:24px; }
.settings-modal .modal-head h2 { font-size:22px; font-weight:650; letter-spacing:-.02em; margin:8px 0 0; }
.settings-tools { display:grid; gap:8px; padding-top:12px; }
.settings-tools .studio-tool { width:100%; flex:none; }
.settings-block { border-top:1px solid var(--line); padding:16px 0 4px; }
.settings-block:first-of-type { border-top:0; padding-top:12px; }
.settings-block-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.settings-block-head span { font-size:13px; font-weight:700; }
.settings-block-head small { color:#777684; font-size:9px; }
.settings-block>p { margin:8px 0 12px; color:#8f8e9b; font-size:10px; line-height:1.55; }
.settings-block label { display:block; margin-top:11px; }
.settings-block label>span { display:block; color:#b8b6c0; font-size:10px; margin-bottom:6px; }
.settings-block input { width:100%; border:0; border-radius:12px; background:var(--fill); color:var(--ink); padding:12px; outline:0; font-size:15px; }
.settings-block input:focus { box-shadow:0 0 0 3px rgba(255,55,95,.35); }
.settings-actions { margin-top:12px; display:flex; gap:8px; }
.settings-block .reference-pipeline { justify-content:flex-start; margin:4px 0 10px; }
.reference-import { margin:0 auto 14px; padding:16px 17px; width:calc(100% - 8vw); max-width:1372px; display:grid; grid-template-columns:minmax(280px,1.15fr) minmax(330px,.95fr) auto; gap:20px; align-items:center; border:1px solid var(--line); border-radius:5px; background:linear-gradient(105deg,rgba(187,167,255,.075),rgba(24,26,42,.96) 40%); }
.reference-import.has-file { border-color:rgba(187,167,255,.28); }
.reference-intro { display:flex; align-items:center; gap:12px; min-width:0; }
.reference-icon { flex:0 0 auto; width:39px; height:39px; border-radius:4px; display:grid; place-items:center; color:#c5b7ff; background:rgba(187,167,255,.11); }
.reference-icon .icon { width:18px; }
.reference-intro h2 { margin:3px 0 3px; font-family:Georgia,"Times New Roman",serif; font-size:19px; font-weight:500; }
.reference-intro p { margin:0; max-width:490px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#8f8e9b; font-size:9px; }
.reference-intro small { display:block; margin-top:4px; color:#b0aeb9; font-size:8px; }
.reference-pipeline { display:flex; align-items:center; justify-content:center; gap:8px; color:#646371; font-size:8px; white-space:nowrap; }
.reference-pipeline span { border:1px solid var(--line); border-radius:999px; padding:5px 8px; }
.reference-pipeline span.complete { color:#6de3aa; border-color:rgba(109,227,170,.27); background:rgba(109,227,170,.055); }
.reference-pipeline b { color:#eab96a; font-weight:600; }
.reference-pipeline i { width:16px; height:1px; background:#343648; }
.reference-actions { display:grid; grid-template-columns:auto auto; justify-content:end; align-items:center; gap:6px; }
.reference-actions input { display:none; }
.reference-upload,.reference-remove { min-height:36px; border-radius:4px; padding:0 12px; display:flex; align-items:center; justify-content:center; gap:6px; font-size:9px; cursor:pointer; }
.reference-upload { color:#eee9ff; border:1px solid rgba(187,167,255,.34); background:rgba(187,167,255,.12); }
.reference-upload .icon { width:14px; }
.reference-remove { border:1px solid var(--line); color:#9998a5; background:transparent; }
.reference-actions>small { grid-column:1/-1; color:#656472; font-size:7px; text-align:right; }
.analysis-bar { margin:0 auto 18px; padding:16px; width:calc(100% - 8vw); max-width:1372px; border:0; background:var(--panel); display:grid; grid-template-columns:1fr minmax(330px,1.05fr) auto; gap:14px; align-items:center; border-radius:16px; }
.analysis-title { display:flex; align-items:center; gap:11px; }
.analysis-icon { position:relative; width:36px; height:36px; flex:0 0 36px; color:var(--coral); background:rgba(255,55,95,.12); border-radius:10px; }
.analysis-icon .icon { position:absolute; left:50%; top:50%; width:18px; height:18px; margin:0; transform:translate(-50%,-50%); display:block; }
.analysis-title strong,.analysis-title span { display:block; }
.analysis-title strong { font-size:15px; font-weight:650; margin-bottom:2px; }
.analysis-title div>span { color:var(--muted); font-size:12px; }
.analysis-controls { display:grid; gap:7px; }
.range-preview { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; color:#777684; font-size:8px; }
.range-preview strong { font-size:9px; color:#aaa9b4; }
.mini-track { height:3px; min-width:90px; background:#303244; position:relative; }
.mini-track i { position:absolute; top:0; bottom:0; background:var(--coral); }
.range-preview input[type="range"] { width:100%; min-width:100px; accent-color:var(--coral); }
.range-preview label { white-space:nowrap; }
.mic-sensitivity input[type="range"] { accent-color:#bba7ff; }
.mic-sensitivity strong { min-width:48px; text-align:right; color:#c5b7ff; }
.detection-standard { color:#636270; font-size:8px; line-height:1.35; }
.analyze-button,.sing-button { min-height:40px; border-radius:999px; padding:0 16px; font-size:15px; font-weight:600; display:flex; align-items:center; gap:6px; cursor:pointer; }
.analyze-button { background:var(--fill); border:0; }
.sing-button { background:var(--coral); border:0; color:#fff; justify-content:center; }
a.sing-button { display:inline-flex; width:fit-content; }
.sing-button:disabled { background:var(--fill); color:var(--muted); cursor:not-allowed; }
.analyze-button .icon,.sing-button .icon { width:15px; }
.stop-button { min-height:40px; border-radius:999px; padding:0 16px; font-size:15px; font-weight:600; display:flex; align-items:center; gap:6px; cursor:pointer; background:rgba(255,55,95,.16); border:0; color:var(--coral); }
.stop-button .icon { width:14px; }
.pitch-highway { margin: 0 auto 14px; width: calc(100% - 8vw); max-width: 1372px; height: 248px; border: 1px solid var(--line); background: #0c0d18; border-radius: 5px; overflow: hidden; position: relative; box-shadow: 0 10px 40px rgba(0,0,0,.28); }
.pitch-highway canvas { display: block; width: 100%; height: 100%; }
.pitch-highway.overlay { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; height: 33.333%; min-height: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; z-index: 20; pointer-events: none; transform: translateZ(0); }
.stage-lyrics { flex: 0 0 32%; height: 32%; width: 100%; z-index: 6; padding: 16px 88px 14px 168px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #12131f; border-bottom: 1px solid var(--line); position: relative; }
.stage-esc { position: absolute; top: 12px; left: 20px; color: rgba(245,242,238,.55); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.lyric-neighbor-toggle { position: absolute; top: 10px; right: 20px; z-index: 8; border: 1px solid rgba(234,185,106,.35); background: rgba(18,19,31,.72); color: #e7d7a6; border-radius: 999px; padding: 6px 10px; font-size: 10px; font-weight: 700; cursor: pointer; }
.lyric-neighbor-toggle.on { border-color: rgba(234,185,106,.7); background: rgba(234,185,106,.16); color: #fff; }
.stage-lyrics.neighbors-on > small,
.stage-lyrics.neighbors-on > em { color: #fff; opacity: 1; font-weight: 600; text-shadow: 0 0 16px rgba(234,185,106,.28); }
.stage-lyrics.neighbors-on > small::before,
.stage-lyrics.neighbors-on > em::before { display: block; margin-bottom: 2px; color: #eab96a; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.stage-lyrics.neighbors-on > small::before { content: "上一句"; }
.stage-lyrics.neighbors-on > em::before { content: "下一句"; }
.stage-scores { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.stage-score { min-width: 108px; text-align: left; }
.stage-score small { display: block; color: var(--player, #8a8896); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.stage-score strong { display: block; margin-top: 2px; color: var(--player, #fff); font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px, 5vw, 64px); font-weight: 500; line-height: .9; transform-origin: left center; transition: color .15s ease, text-shadow .15s ease; }
.stage-scores.live .stage-score strong { color: var(--player, #ffd6d9); }
.stage-scores.wait .stage-score strong { color: #c5c3ce; }
.stage-score.hit strong { color: #fff; text-shadow: 0 0 16px var(--player, rgba(255,102,112,.95)), 0 0 36px var(--player, rgba(255,102,112,.55)); animation: score-hit .42s ease-out; }
.stage-score:not(.hit) strong { opacity: .55; transition: opacity .6s ease; }
@keyframes score-hit {
  0% { transform: scale(1.18); filter: brightness(1.45); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); filter: brightness(1); }
}
.stage-lyrics > small, .stage-lyrics > em { display: block; max-width: 90%; color: #9c9ba8; font-size: clamp(14px, 1.8vw, 20px); font-style: normal; min-height: 1.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-lyrics > strong { display: -webkit-box; max-width: 92%; min-height: 2.5em; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 4.2vw, 52px); font-weight: 600; line-height: 1.25; text-shadow: 0 0 22px rgba(255,102,112,.22); overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.stage-pause { position: absolute; left: 50%; top: 42%; z-index: 28; width: 78px; height: 78px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(8,9,16,.68); color: #fff; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity .2s ease; cursor: pointer; }
.stage-pause .icon { width: 28px; height: 28px; }
.stage-pause.visible, .stage-pause.paused { opacity: 1; pointer-events: auto; }
.app-shell.is-singing { overflow: hidden; height: 100vh; position: relative; }
.app-shell.is-singing .search-band, .app-shell.is-singing .discover, .app-shell.is-singing .topbar { display: none; }
.app-shell.is-singing .studio.singing-stage { display: flex; flex-direction: column; height: 100vh; min-height: 100vh; padding: 0; max-width: none; }
.app-shell.is-singing .video-column { flex: 1; min-height: 0; display: flex; flex-direction: column; height: auto; }
.app-shell.is-singing .video-card { flex: 1; aspect-ratio: auto; min-height: 0; height: auto; border: 0; border-radius: 0; }
.app-shell.is-singing .video-card iframe { position:absolute; inset:0; z-index:0; }
.app-shell.is-singing .youtube-host, .app-shell.is-singing .youtube-host > div { pointer-events: none; }
.app-shell.is-singing .analysis-bar { position: absolute; top: 12px; right: 14px; left: auto; bottom: auto; z-index: 40; margin: 0; width: auto; max-width: none; padding: 6px; background:#10111d; backdrop-filter:none; overflow:hidden; grid-template-columns:auto; gap:0; }
.app-shell.is-singing .analysis-title,
.app-shell.is-singing .analysis-controls,
.app-shell.is-singing .meter,
.app-shell.is-singing .sync-nudge,
.app-shell.is-singing .sing-actions { display: none; }
.app-shell.is-singing .stop-button { min-height:36px; padding:0 14px; position:relative; z-index:1; -webkit-appearance:none; appearance:none; outline:0; box-shadow:none; background:#3a1724; }
.app-shell.is-singing .stop-button:focus-visible { box-shadow:0 0 0 2px rgba(255,55,95,.5) inset; }
.app-shell.is-singing .score-history { display: none; }
.sync-nudge { display: none; }
.sync-nudge .offset-steps-label { color: #8a8896; font-size: 9px; font-weight: 700; }
.sync-nudge .lock-now { border: 1px solid rgba(103,230,166,.28); background: rgba(103,230,166,.1); color: #d8efe4; border-radius: 4px; padding: 0 9px; font-size: 10px; font-weight: 720; }
.sync-nudge .lock-now.neighbor-btn { border-color: rgba(234,185,106,.35); background: rgba(234,185,106,.1); color: #e7d7a6; }
.sync-nudge .lock-now.neighbor-btn.on { border-color: rgba(234,185,106,.7); background: rgba(234,185,106,.18); color: #fff; }
.sync-nudge button { border: 0; background: transparent; color: #d8d6de; font-size: 10px; font-weight: 700; cursor: pointer; padding: 0 8px; height: 28px; }
.sync-nudge strong { min-width: 52px; text-align: center; font-size: 10px; color: #ffb3b8; }
.mic-setup-status { font-size: 11px; color: #8a8896; margin-top: 8px; }
.mic-setup-status.ok { color: #6de3aa; }
.mic-setup-status.bad { color: #ff8d95; }
.mic-setup-status.wait { color: #eab96a; }
.mic-modal > p { color: #9695a2; font-size: 11px; line-height: 1.6; margin: 8px 0 14px; }
.mic-tabs { display: flex; gap: 6px; margin: 12px 0 4px; }
.mic-tabs button { flex: 1; min-height: 36px; border: 1px solid var(--line); border-radius: 4px; background: #141522; color: #b8b6c0; font-size: 11px; font-weight: 700; cursor: pointer; }
.mic-tabs button.active { border-color: rgba(255,102,112,.4); background: rgba(255,102,112,.14); color: #fff; }
.mic-list { display: grid; gap: 8px; margin: 12px 0; }
.mic-list button { display: grid; gap: 8px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: #141522; color: #eee; cursor: pointer; }
.mic-list button.active { border-color: rgba(255,102,112,.45); background: rgba(255,102,112,.1); }
.mic-list strong { font-size: 13px; }
.iphone-join { display: grid; grid-template-columns: 140px 1fr; gap: 14px; align-items: center; }
.iphone-join img { width: 140px; height: 140px; border-radius: 8px; background: #141522; }
.iphone-join a { display: block; margin: 8px 0; color: #c5b7ff; font-size: 10px; word-break: break-all; }
.remote-code { display: block; font-family: Georgia, serif; font-size: 22px; letter-spacing: .08em; }
.remote-mic { min-height: 100vh; display: grid; place-content: center; gap: 12px; padding: 32px 20px; text-align: center; background: #10111d; }
.remote-mic h1 { font-family: Georgia, serif; font-size: 36px; margin: 0; }
.remote-mic p { color: #b8b6c0; font-size: 15px; line-height: 1.5; max-width: 22em; margin: 0 auto; }
.remote-mic .remote-code { font-size: 42px; }
.remote-meter, .mic-switcher-meter { height: 8px; border-radius: 99px; background: #2a2c40; overflow: hidden; }
.remote-meter i, .mic-switcher-meter i { display: block; height: 100%; background: linear-gradient(90deg, #6de3aa, var(--coral)); }
.remote-mic .sing-button { justify-self: center; min-width: 220px; justify-content: center; }
.remote-mic small { color: #8a8896; }
.remote-hangup { justify-self: center; margin-top: 8px; }
.remote-sensitivity { width: min(330px, calc(100vw - 40px)); margin: 2px auto 0; padding: 14px 16px 12px; border: 1px solid #303246; border-radius: 16px; background: #171826; text-align: left; }
.remote-sensitivity-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 9px; color: #d7d5df; font-size: 14px; }
.remote-sensitivity-title strong { color: #fff; font-variant-numeric: tabular-nums; }
.remote-sensitivity input[type="range"] { width: 100%; min-height: 32px; margin: 0; accent-color: var(--coral); touch-action: pan-y; }
.remote-sensitivity-scale { display: flex; justify-content: space-between; color: #747280; font-size: 11px; line-height: 1; }
.score-best { display: block; margin-top: 8px; color: #8a8896; font-size: 11px; font-style: normal; }
.score-roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 8px 0 4px; }
.score-player { padding: 10px 8px; border: 1px solid color-mix(in srgb, var(--player) 45%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--player) 10%, #141522); }
.score-player small { display: block; color: var(--player); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.score-player strong { display: block; margin-top: 4px; font-family: Georgia, serif; font-size: 48px; line-height: .9; color: var(--player); }
.score-player.failed strong { filter: saturate(1.1); }
.seat-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.seat-list li { display: flex; align-items: center; gap: 8px; color: var(--player); font-size: 12px; font-weight: 700; }
.seat-list em { color: #8a8896; font-style: normal; font-weight: 500; font-size: 10px; margin-left: auto; }
.seat-list i { width: 10px; height: 10px; border-radius: 50%; background: var(--player); }
.remote-seat { display: block; font-size: 22px; }
.score-history { display:none; }
.idle-home .score-history { display:block; width:min(460px, calc(100vw - 48px)); margin:0 auto 32px; padding:0; }
.idle-home .score-history ol { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.idle-home .score-history li { display:grid; grid-template-columns:88px 1fr auto; gap:10px; align-items:center; padding:5px 2px; background:transparent; color:var(--muted); opacity:.62; }
.idle-home .score-history li em { font-style:normal; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.idle-home .score-history li span { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.idle-home .score-history li strong { font-size:12px; font-weight:600; color:var(--muted); }
.difficulty-menu { position: relative; margin-left: auto; }
.difficulty-button { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--fill); color: var(--ink); font-size: 13px; font-weight: 560; cursor: pointer; }
.difficulty-button.open, .difficulty-button:hover { background: var(--hover); }
.difficulty-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; width: 220px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--pop); backdrop-filter: blur(20px); box-shadow: 0 16px 40px rgba(0,0,0,.2); display: grid; gap: 4px; }
.difficulty-pop button { display: grid; gap: 2px; text-align: left; border: 0; border-radius: 5px; padding: 8px 10px; background: transparent; color: #d8d6de; cursor: pointer; }
.difficulty-pop button strong, .difficulty-pop button small { display: block; }
.difficulty-pop button strong { font-size: 11px; }
.difficulty-pop button small { font-size: 9px; color: #8a8896; }
.difficulty-pop button:hover, .difficulty-pop button.active { background: rgba(255,102,112,.14); }
.difficulty-pop button.active strong { color: #ffb3b8; }
.app-shell.is-singing .live-overlay { top: 12px; left: 12px; bottom: auto; }
.sing-actions { display:flex; flex-direction:column; align-items:stretch; gap:8px; min-width:176px; }
.game-diff { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:16px; background:var(--fill); }
.game-diff-option { display:grid; justify-items:center; gap:3px; border:0; border-radius:12px; padding:8px 6px 7px; background:transparent; color:var(--muted); cursor:pointer; }
.game-diff-option em { font-style:normal; font-size:9px; font-weight:800; letter-spacing:.14em; }
.game-diff-option strong { font-size:14px; font-weight:750; color:var(--ink); letter-spacing:.02em; }
.game-diff-stars { display:flex; gap:2px; height:8px; align-items:center; }
.game-diff-stars i { width:7px; height:7px; background:currentColor; opacity:.28; clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.game-diff-option.normal .game-diff-stars i:first-child { opacity:1; }
.game-diff-option.original .game-diff-stars i { opacity:.45; }
.game-diff-option.original .game-diff-stars i:nth-child(-n+3) { opacity:1; }
.game-diff-option.active { color:#fff; }
.game-diff-option.active strong { color:#fff; }
.game-diff-option.active .game-diff-stars i { opacity:1; background:#fff; }
.game-diff-option.normal.active { background:linear-gradient(180deg,#5ac8fa,#007aff); box-shadow:0 8px 18px rgba(0,122,255,.32); }
.game-diff-option.original.active { background:linear-gradient(180deg,#ff8a3d,#ff2d55); box-shadow:0 8px 18px rgba(255,45,85,.38); }
.sing-actions .sing-button, .sing-actions .continue-button { width:100%; justify-content:center; min-height:44px; }
.continue-button { min-height: 40px; border-radius: 999px; padding: 0 16px; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; cursor: pointer; background: var(--fill); border: 0; color: var(--ink); }
.continue-button .icon { width: 14px; }
.session-actions { display: flex; align-items: center; gap: 10px; justify-self: end; }
.stop-button kbd { margin-left: 6px; border: 1px solid rgba(255,102,112,.35); border-radius: 3px; padding: 1px 5px; font-size: 8px; letter-spacing: .08em; color: #ffb3b8; }
.analysis-bar.is-live { border-color: rgba(255,102,112,.32); box-shadow: 0 0 35px rgba(255,102,112,.08); }
.meter { height:38px; width:150px; border-radius:4px; background:#25273a; border:1px solid var(--line); position:relative; overflow:hidden; }
.meter span { position:absolute; left:0; bottom:0; top:0; background:linear-gradient(90deg,#6e57c3,var(--coral)); opacity:.78; transition:width .08s linear; }
.meter i { position:absolute; inset:0; display:grid; place-items:center; font-style:normal; font-weight:800; font-size:12px; }
.score-confetti { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.score-board { position: relative; z-index: 2; width: min(420px, 100%); text-align: center; background: #1d1f31; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 30px 90px rgba(0,0,0,.55); border-radius: 12px; padding: 32px 28px 26px; }
.score-board .eyebrow { color: #ff8d95; letter-spacing: .16em; font-size: 10px; font-weight: 700; }
.score-board h2 { font-family: Georgia, serif; font-size: 28px; font-weight: 500; margin: 10px 0 18px; }
.score-board > strong { display: block; font-family: Georgia, serif; font-size: 84px; line-height: .9; color: #fff; text-shadow: 0 0 28px rgba(255,102,112,.28); }
.score-board.passed > strong { color: #6de3aa; text-shadow: 0 0 28px rgba(109,227,170,.45); }
.score-board.failed > strong { color: #ff6670; text-shadow: 0 0 28px rgba(255,102,112,.5); }
.score-board.excellent > strong { color: #6de3aa; text-shadow: 0 0 28px rgba(109,227,170,.55), 0 0 48px rgba(255,209,102,.28); }
.score-board > b { display: block; margin-top: 14px; font-size: 12px; color: #d8d6de; }
.score-board > p { margin: 8px 0 22px; color: #8a8896; font-size: 12px; }
.score-actions { display: flex; justify-content: center; align-items: center; gap: 10px; }
.score-retry { min-height: 42px; min-width: 132px; border: 0; border-radius: 4px; background: var(--coral); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.score-done { min-height: 42px; min-width: 132px; border: 0; border-radius: 4px; background: var(--coral); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.score-retry + .score-done { background: #2a2c40; border: 1px solid rgba(255,255,255,.14); }
.discover { padding:4px clamp(18px,4vw,48px) 70px; max-width:1500px; margin:0 auto; }
.discover h2 { font-size:22px; font-weight:650; letter-spacing:-.02em; margin:7px 0 18px; }
.song-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.song-tile { display:flex; flex-direction:column; text-align:left; padding:0; border:0; background:transparent; cursor:pointer; }
.tile-cover { height:110px; border-radius:14px; margin-bottom:10px; position:relative; display:flex; align-items:flex-start; justify-content:space-between; padding:10px; background-size:cover; background-position:center; overflow:hidden; }
.tile-cover em { font-style:normal; font-size:12px; opacity:.7; }
.tile-cover i { align-self:flex-end; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:rgba(0,0,0,.5); }
.tile-cover .icon { width:14px; }
.song-tile strong { font-size:14px; font-weight:600; margin-bottom:4px; }
.song-tile small { font-size:12px; color:var(--muted); }
.toast { position:fixed; z-index:50; right:24px; bottom:24px; border:0; background:var(--pop); backdrop-filter:blur(20px); box-shadow:0 16px 40px rgba(0,0,0,.2); border-radius:14px; padding:12px 14px; font-size:13px; display:flex; align-items:center; gap:16px; cursor:pointer; }
.toast span { color:var(--muted); font-size:16px; }
.modal-backdrop { position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.52); display:grid; place-items:center; padding:20px; backdrop-filter:blur(16px); }
.lyrics-modal { width:min(650px,100%); background:var(--panel); border:0; box-shadow:0 24px 60px rgba(0,0,0,.25); border-radius:18px; padding:24px; }
.login-modal,.match-modal { width:min(440px,100%); background:var(--panel); border:0; box-shadow:0 24px 60px rgba(0,0,0,.25); border-radius:18px; padding:24px; }
.login-modal .modal-head h2,.match-modal .modal-head h2 { font-size:22px; font-weight:650; letter-spacing:-.02em; margin:8px 0 0; }
.qr-frame { width:240px; height:240px; margin:23px auto 14px; display:grid; place-items:center; background:#fff; border-radius:9px; padding:8px; }
.qr-frame img { width:100%; height:100%; display:block; }
.login-message { display:block; text-align:center; font-size:12px; }
.login-note { color:#8f8e9b; font-size:9px; line-height:1.65; text-align:center; margin:10px 20px 15px; }
.mobile-login-link { display:block; text-align:center; color:#fb7299; font-size:10px; margin:10px 0; }
.refresh-qr { display:block; margin:0 auto; border:0; background:transparent; color:#9695a2; font-size:9px; cursor:pointer; }
.login-success { padding:30px 8px 6px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.login-check { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:rgba(61,187,125,.13); color:#67e6a6; font-size:26px; margin-bottom:13px; }
.login-success strong { font-size:15px; }
.login-success p { color:#92919e; font-size:10px; line-height:1.65; max-width:310px; }
.logout-button { margin-top:12px; border:1px solid rgba(255,102,112,.25); background:rgba(255,102,112,.08); color:#ff8d95; border-radius:5px; padding:9px 12px; font-size:10px; cursor:pointer; }
.match-modal>p { color:#9695a2; font-size:10px; line-height:1.7; margin:17px 0; }
.es-verify-modal { width:min(420px,100%); }
.es-verify-modal>p { color:var(--muted); font-size:13px; line-height:1.55; margin:0 0 14px; }
.es-verify-modal label { display:block; margin:0 0 10px; }
.es-verify-modal label>span { display:block; color:var(--muted); font-size:12px; margin-bottom:6px; }
.es-verify-modal input { width:100%; border:0; background:var(--input); border-radius:10px; color:var(--ink); padding:10px 12px; font-size:15px; }
.match-modal>label { display:block; margin-top:13px; }
.match-modal>label>span { display:flex; align-items:center; justify-content:space-between; color:#b8b6c0; font-size:10px; margin-bottom:7px; }
.match-modal>label b { color:var(--coral); font-size:8px; font-weight:650; }
.match-modal>label small { color:#777684; font-size:8px; }
.match-modal>label input { width:100%; border:1px solid rgba(255,255,255,.12); border-radius:5px; background:#141522; color:#f0ece9; padding:11px 12px; outline:0; font-size:12px; }
.match-modal>label input:focus { border-color:rgba(255,102,112,.55); }
.manual-warning { margin-top:15px; border-left:2px solid #eab96a; background:rgba(234,185,106,.06); color:#aaa596; padding:9px 11px; font-size:8px; line-height:1.55; }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; }
.modal-head h2 { font-size:22px; font-weight:650; letter-spacing:-.02em; margin:8px 0 0; }
.modal-head>button { border:0; background:transparent; color:var(--muted); font-size:25px; cursor:pointer; }
.lyrics-modal>p { color:#9998a6; font-size:11px; line-height:1.7; }
.lyrics-modal textarea { width:100%; min-height:235px; resize:vertical; border:1px solid rgba(255,255,255,.12); border-radius:5px; background:#141522; color:#e8e5e3; padding:14px; font:11px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace; outline:0; }
.lyrics-modal textarea:focus { border-color:rgba(255,102,112,.55); }
.start-field { display:flex; align-items:center; gap:9px; margin-top:13px; font-size:10px; color:#9a99a6; }
.start-field input { width:80px; border:1px solid var(--line); background:#151624; color:#fff; border-radius:4px; padding:7px 9px; outline:0; }
.modal-actions { margin-top:18px; display:flex; justify-content:flex-end; gap:9px; }
.modal-actions .ghost-button { margin-left:0; }
@media (max-width:900px) { .nav-links{display:none}.search-band{padding-top:22px}.studio{grid-template-columns:1fr}.lyrics-card{margin-top:0;min-height:360px}.studio-tools{flex-wrap:wrap}.studio-tool{flex:1 1 220px}.analysis-bar{grid-template-columns:1fr 1fr}.meter{width:auto}.song-grid{grid-template-columns:repeat(2,1fr)}.pitch-highway{width:auto;margin:0 16px 12px;height:196px}.pitch-highway.overlay{width:100%;margin:0;height:33.333%;min-height:0}.app-shell.is-singing .studio.singing-stage{padding:0;height:100vh;min-height:100vh}.app-shell.is-singing .analysis-bar{grid-template-columns:auto;margin:0;width:auto}.stage-lyrics strong{font-size:22px}.mic-setup{grid-template-columns:1fr;width:auto;margin:0 16px 12px} }
@media (max-width:560px) { .topbar{height:62px;padding:0 16px}.solo-badge{display:none}.youtube-status{font-size:0;padding:0 7px}.youtube-status>span{font-size:9px}.search-box input{width:calc(100% - 35px);flex:none}.search-submit{width:100%;height:40px;margin:10px 0 0}.search-results{top:108px}.quick-picks{flex-wrap:wrap}.studio{padding:20px 16px}.video-card{aspect-ratio:16/9}.track-source{display:none}.intro-detection{flex-wrap:wrap;gap:7px 12px}.intro-detection em{width:auto;margin-left:0}.skip-intro-button{margin-left:auto}.lyrics-actions{flex-direction:column}.studio-tools{margin:0 16px 12px;width:auto}.analysis-bar{margin:0 16px 30px;width:auto;grid-template-columns:1fr}.app-shell.is-singing .analysis-bar{margin:0;width:auto;grid-template-columns:auto}.analysis-controls{order:2}.analyze-button,.sing-button,.stop-button{justify-content:center}.session-summary{width:auto;margin:-14px 16px 28px;grid-template-columns:auto auto 1fr}.session-summary button{display:none}.discover{padding:4px 16px 55px}.song-grid{grid-template-columns:1fr 1fr}.tile-cover{height:88px}.lyrics-modal,.login-modal,.match-modal,.chart-switch-modal,.settings-modal{padding:18px}.qr-frame{width:210px;height:210px}.pitch-highway{height:168px;margin:0 16px 12px} }
@media (max-width:560px) { .ultrastar-match,.song-identify{flex-wrap:wrap;gap:6px 10px}.ultrastar-match>em,.song-identify>em{margin-left:0}.chart-actions,.offset-steps{margin-left:0;width:100%} }
@media (prefers-reduced-motion:reduce) { *{scroll-behavior:auto!important;transition:none!important} }


/* Multiplayer final ranking */
.score-board.party { width: min(640px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; }
.versus-result { display: grid; gap: 14px; }
.winner-callout { border: 1px solid rgba(255,209,102,.3); background: linear-gradient(135deg, rgba(255,209,102,.12), rgba(255,102,112,.08)); border-radius: 10px; padding: 14px 16px; }
.winner-callout.tie { border-color: rgba(196,168,255,.28); background: rgba(196,168,255,.08); }
.winner-callout small { display: block; color: #f0c36e; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.winner-callout.tie small { color: #c4a8ff; }
.winner-callout strong { display: block; margin-top: 4px; font-family: Georgia, serif; font-size: 28px; font-weight: 500; color: #fff; }
.winner-callout span { display: block; margin-top: 5px; color: #aaa8b4; font-size: 11px; font-variant-numeric: tabular-nums; }
.score-roster.versus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.score-player { position: relative; }
.score-player.winner { border-color: color-mix(in srgb, var(--player) 75%, white 10%); box-shadow: 0 0 28px color-mix(in srgb, var(--player) 18%, transparent); }
.score-player em { display: block; margin-top: 8px; color: #93919f; font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: .08em; }
.score-player.winner em { color: var(--player); }
.multiplayer-results { display: grid; gap: 18px; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.podium-player { min-width: 0; border: 1px solid color-mix(in srgb, var(--player) 42%, transparent); background: color-mix(in srgb, var(--player) 9%, #141522); border-radius: 10px; padding: 12px 10px; }
.podium-player.place-1 { padding-top: 17px; padding-bottom: 17px; border-color: color-mix(in srgb, var(--player) 72%, white 8%); box-shadow: 0 12px 30px color-mix(in srgb, var(--player) 14%, transparent); }
.podium-player > span { display: block; color: var(--player); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.podium-player > strong { display: block; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #f4f1ef; }
.podium-player > b { display: block; margin-top: 7px; font-family: Georgia, serif; font-size: 36px; line-height: 1; color: var(--player); }
.full-ranking { border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: #171824; overflow: hidden; text-align: left; }
.ranking-title { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ranking-title span { color: #d8d6de; font-size: 10px; font-weight: 750; letter-spacing: .08em; }
.ranking-title small { color: #777684; font-size: 9px; }
.full-ranking ol { list-style: none; padding: 0; margin: 0; max-height: 230px; overflow-y: auto; }
.full-ranking li { display: grid; grid-template-columns: 28px 7px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 39px; padding: 7px 13px; border-bottom: 1px solid rgba(255,255,255,.055); }
.full-ranking li:last-child { border-bottom: 0; }
.rank-number { color: #aaa8b4; font-size: 10px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.full-ranking li:nth-child(-n+3) .rank-number { color: var(--player); }
.full-ranking li > i { width: 7px; height: 7px; border-radius: 50%; background: var(--player); box-shadow: 0 0 10px color-mix(in srgb, var(--player) 45%, transparent); }
.full-ranking li > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #e4e1df; }
.full-ranking li > b { color: var(--player); font-family: Georgia, serif; font-size: 20px; font-variant-numeric: tabular-nums; }

@media (max-width:560px) {
  .score-board.party { padding: 24px 16px 20px; }
  .winner-callout strong { font-size: 24px; }
  .podium { gap: 7px; }
  .podium-player { padding: 10px 7px; }
  .podium-player.place-1 { padding-top: 14px; padding-bottom: 14px; }
  .podium-player > strong { font-size: 10px; }
  .podium-player > b { font-size: 30px; }
  .full-ranking ol { max-height: 190px; }
}

/* Full desktop LAN multiplayer */
.solo-badge { background:transparent; cursor:pointer; transition:border-color .18s ease, color .18s ease, background .18s ease; }
.solo-badge:hover,.solo-badge.lan-active { border-color:rgba(109,227,170,.45); color:#dff8eb; background:rgba(109,227,170,.07); }
.lan-modal { width:min(760px,100%); max-height:calc(100vh - 40px); overflow:auto; background:#1d1f31; border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 90px rgba(0,0,0,.6); border-radius:12px; padding:24px; }
.lan-entry { display:grid; gap:12px; margin-top:18px; }
.lan-entry>p { margin:0 0 4px; color:#9695a2; font-size:11px; line-height:1.7; }
.lan-choice { width:100%; text-align:left; display:grid; gap:5px; border:1px solid rgba(255,255,255,.1); background:#151724; border-radius:9px; padding:15px 16px; color:#f0ece9; cursor:pointer; transition:transform .15s ease,border-color .15s ease,background .15s ease; }
.lan-choice:hover { transform:translateY(-1px); border-color:rgba(255,102,112,.38); background:#191b2a; }
.lan-choice strong { font-size:13px; }
.lan-choice small { color:#8e8d9a; font-size:10px; line-height:1.55; }
.lan-form { display:grid; gap:14px; margin-top:18px; }
.lan-form label { display:grid; gap:7px; }
.lan-form label>span { color:#aaa8b4; font-size:10px; }
.lan-form input { width:100%; border:1px solid rgba(255,255,255,.12); border-radius:6px; background:#141522; color:#f4f1ef; padding:11px 12px; outline:0; }
.lan-form input:focus { border-color:rgba(255,102,112,.5); }
.lan-status { min-height:34px; padding:9px 11px; border:1px solid rgba(255,255,255,.07); border-radius:6px; background:#151724; color:#858491; font-size:10px; line-height:1.5; }
.lan-status.show { color:#c8c7d0; }
.lan-lobby { display:grid; gap:14px; margin-top:18px; }
.lan-room-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 15px; border:1px solid rgba(255,255,255,.09); border-radius:9px; background:linear-gradient(135deg,#151724,#191a2a); }
.lan-room-head>div:first-child { display:flex; align-items:baseline; gap:10px; min-width:0; }
.lan-room-head small { color:#777684; font-size:9px; text-transform:uppercase; letter-spacing:.12em; }
.lan-room-head strong { font-family:Georgia,serif; font-size:25px; letter-spacing:.1em; color:#fff; }
.lan-room-head span { color:#9493a0; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lan-phase { flex:0 0 auto; border:1px solid rgba(109,227,170,.22); border-radius:999px; padding:6px 9px; color:#8ee8b9; background:rgba(109,227,170,.07); font-size:9px; font-weight:750; }
.lan-phase.phase-singing,.lan-phase.phase-countdown { color:#ffb3b8; border-color:rgba(255,102,112,.3); background:rgba(255,102,112,.08); }
.lan-phase.phase-waiting { color:#f0c36e; border-color:rgba(240,195,110,.28); background:rgba(240,195,110,.07); }
.lan-invite { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px 12px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:#141522; }
.lan-invite>div { min-width:0; display:grid; gap:4px; }
.lan-invite small { color:#777684; font-size:9px; }
.lan-invite code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#c7c5d0; font-size:10px; }
.lan-invite button { border:1px solid rgba(255,255,255,.12); background:#232538; color:#ddd9d6; border-radius:5px; padding:8px 11px; font-size:9px; cursor:pointer; }
.lan-invite button:disabled { opacity:.45; cursor:not-allowed; }
.lan-audio-panel { border:1px solid rgba(255,255,255,.09); border-radius:9px; padding:13px; background:#171925; }
.lan-audio-panel>div:first-child { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.lan-audio-panel strong { font-size:11px; }
.lan-audio-panel small,.lan-audio-panel p { color:#848390; font-size:9px; }
.lan-audio-panel p { margin:9px 1px 0; line-height:1.55; }
.lan-mode-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lan-mode-buttons button { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:9px; text-align:left; border:1px solid rgba(255,255,255,.09); border-radius:7px; background:#131522; color:#aaa8b4; padding:10px 11px; cursor:pointer; }
.lan-mode-buttons button b { color:#dedbe0; font-size:10px; }
.lan-mode-buttons button span { color:#7f7e8b; font-size:9px; }
.lan-mode-buttons button.active { border-color:rgba(255,102,112,.42); background:rgba(255,102,112,.08); }
.lan-mode-buttons button.active b { color:#ff9fa6; }
.lan-mode-buttons button:disabled { cursor:default; }
.lan-song-state { display:grid; grid-template-columns:54px minmax(0,1fr); gap:12px; align-items:center; padding:11px 12px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:#151724; }
.lan-song-state .track-cover { width:54px; height:42px; border-radius:5px; }
.lan-song-state>div:last-child { min-width:0; display:grid; gap:3px; }
.lan-song-state small { color:#777684; font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.lan-song-state strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.lan-song-state span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#898895; font-size:9px; }
.lan-roster { border:1px solid rgba(255,255,255,.09); border-radius:9px; background:#141522; overflow:hidden; }
.lan-roster-title { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.07); }
.lan-roster-title strong { font-size:10px; }
.lan-roster-title small { color:#777684; font-size:9px; }
.lan-roster ul { list-style:none; margin:0; padding:0; max-height:285px; overflow:auto; }
.lan-roster li { display:grid; grid-template-columns:28px minmax(130px,1fr) minmax(130px,.8fr) auto auto; gap:10px; align-items:center; min-height:52px; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.055); }
.lan-roster li:last-child { border-bottom:0; }
.lan-face { width:28px; height:28px; border-radius:50%; overflow:hidden; background:var(--player); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:700; box-shadow:0 0 0 2px color-mix(in srgb,var(--player) 45%,transparent); }
.lan-face img { width:100%; height:100%; object-fit:cover; }
.lan-roster li.reconnecting .lan-face,.lan-roster li.connecting .lan-face { animation:lan-pulse 1s ease-in-out infinite; }
.lan-roster li.disconnected { opacity:.55; }
.lan-roster li.disconnected .lan-face { filter:grayscale(.6); }
.lan-roster li>div:nth-of-type(1) { min-width:0; display:grid; gap:3px; }
.lan-roster li>div:nth-of-type(1) strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.lan-roster li>div:nth-of-type(1) small { color:#858491; font-size:8px; }
.lan-roster li.degraded>div:nth-of-type(1) small { color:#e8bd70; }
.lan-metrics { min-width:0; display:grid; gap:2px; text-align:right; }
.lan-metrics b { color:#d6d3d8; font-size:9px; font-variant-numeric:tabular-nums; }
.lan-metrics small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#6f6e7b; font-size:8px; }
.lan-ready-state { display:grid; gap:2px; text-align:center; }
.lan-ready-state span { color:#9b99a6; font-size:9px; }
.lan-ready-state b { color:#7d7c89; font-size:8px; white-space:nowrap; }
.lan-kick { border:0; background:transparent; color:#a8787d; font-size:8px; cursor:pointer; padding:5px; }
.lan-kick:hover { color:#ff8d95; }
.lan-network-warning { border-left:2px solid #eab96a; border-radius:4px; background:rgba(234,185,106,.07); color:#c9b88e; padding:9px 11px; font-size:9px; line-height:1.55; }
.lan-lobby-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:9px; }
.lan-lobby-actions .ghost-button { margin-left:0; }
.ghost-button.danger { color:#c8888d; border-color:rgba(255,102,112,.2); }
.lan-lobby-actions .sing-button.ready { background:#416f5b; }
.lan-live-rank { position:absolute; right:18px; top:18px; z-index:4; width:min(220px,28vw); border:1px solid rgba(255,255,255,.11); border-radius:8px; background:rgba(10,11,18,.72); backdrop-filter:blur(9px); padding:9px; pointer-events:none; }
.lan-live-rank>span { display:block; color:#aaa8b4; font-size:8px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.lan-live-rank>small { display:block; margin-top:5px; color:#d3b571; font-size:8px; line-height:1.45; }
.lan-live-rank ol { list-style:none; margin:7px 0 0; padding:0; display:grid; gap:4px; }
.lan-live-rank li { display:grid; grid-template-columns:17px 6px minmax(0,1fr) auto; align-items:center; gap:6px; min-height:20px; }
.lan-live-rank li>b { color:#777684; font-size:8px; text-align:center; }
.lan-live-rank li>i { width:6px; height:6px; border-radius:50%; background:var(--player); }
.lan-live-rank li>strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#d8d5d9; font-size:8px; }
.lan-live-rank li>em { color:var(--player); font:700 12px/1 Georgia,serif; font-style:normal; }
.lan-live-rank.suppressed { border-color:rgba(234,185,106,.2); }
.lan-waiting { width:min(430px,100%); display:grid; justify-items:center; gap:10px; text-align:center; background:#1d1f31; border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 90px rgba(0,0,0,.55); border-radius:12px; padding:30px 26px; }
.lan-waiting h2 { margin:3px 0 0; font:500 26px/1.15 Georgia,serif; }
.lan-waiting p { margin:0; color:#b8b6c0; font-size:10px; }
.lan-waiting small { color:#777684; font-size:9px; line-height:1.5; }
@keyframes lan-pulse { 50% { opacity:.35; transform:scale(.78); } }

@media (max-width:900px) {
  .lan-modal { width:min(680px,100%); }
  .lan-roster li { grid-template-columns:28px minmax(110px,1fr) minmax(105px,.75fr) auto; }
  .lan-kick { grid-column:2 / -1; justify-self:end; margin-top:-7px; }
  .lan-live-rank { width:min(210px,34vw); }
}
@media (max-width:620px) {
  .lan-modal { padding:18px; }
  .lan-room-head { align-items:flex-start; }
  .lan-room-head>div:first-child { display:grid; gap:3px; }
  .lan-invite { grid-template-columns:1fr; }
  .lan-invite button { justify-self:start; }
  .lan-mode-buttons { grid-template-columns:1fr; }
  .lan-roster li { grid-template-columns:28px minmax(0,1fr) auto; }
  .lan-metrics { grid-column:2; text-align:left; }
  .lan-ready-state { grid-column:3; grid-row:1 / span 2; }
  .lan-kick { grid-column:2 / -1; }
  .lan-live-rank { right:8px; top:8px; width:170px; }
}
.lan-tool.ready { border-color:rgba(109,227,170,.34); background:rgba(109,227,170,.055); }


/* LAN join handshake / invite-link clarity */
.lan-invite-target { display:grid; gap:5px; padding:12px 14px; border:1px solid rgba(90,208,255,.28); background:rgba(90,208,255,.07); border-radius:8px; }
.lan-invite-target small { color:#8ecfe7; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.lan-invite-target strong { color:#f4f1ef; font-size:15px; }
.lan-invite-target span { color:#aaa8b4; font-size:10px; line-height:1.55; }
.lan-handshake-status { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid rgba(90,208,255,.2); background:rgba(90,208,255,.06); border-radius:8px; }
.lan-handshake-status .lyrics-loader { flex:0 0 auto; }
.lan-handshake-status div { display:grid; gap:3px; }
.lan-handshake-status strong { font-size:11px; color:#dcecf2; }
.lan-handshake-status small { font-size:9px; line-height:1.5; color:#8f9da4; }

/* ============ Helper Page ============ */
.helper-page { min-height:100vh; background:var(--night); padding:clamp(24px,6vw,64px) clamp(16px,4vw,32px); }
.helper-container { max-width:640px; margin:0 auto; display:grid; gap:32px; }
.helper-header { display:grid; gap:10px; }
.helper-header .eyebrow { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:650; }
.helper-header h1 { font-size:28px; font-weight:700; letter-spacing:-.02em; margin:0; }
.helper-subtitle { font-size:14px; color:var(--muted); line-height:1.6; margin:0; }
.helper-section { display:grid; gap:16px; }
.helper-section h2 { font-size:17px; font-weight:650; letter-spacing:-.01em; margin:0; padding-bottom:8px; border-bottom:1px solid var(--line); }
.helper-loading, .helper-status-loading { padding:32px; text-align:center; color:var(--muted); font-size:14px; }
.helper-auth-required { max-width:400px; margin:80px auto; padding:40px 32px; background:var(--panel); border:1px solid var(--line); border-radius:16px; display:grid; gap:16px; text-align:center; }
.helper-auth-required h2 { font-size:22px; font-weight:700; margin:0; }
.helper-auth-required p { font-size:14px; color:var(--muted); margin:0; line-height:1.6; }
.helper-status-card { padding:20px; background:var(--panel); border:1px solid var(--line); border-radius:14px; }
.helper-status-card.paired { border-color:rgba(48,209,88,.25); background:rgba(48,209,88,.04); }
.helper-status-card.unpaired { border-style:dashed; }
.helper-status-card.unpaired p { margin:0 0 8px; font-size:14px; }
.helper-hint { font-size:12px; color:var(--muted); margin:0; }
.helper-download-actions { display:flex; flex-wrap:wrap; gap:10px; }
.helper-download-actions .helper-download-button { margin-top:0; }
.helper-download-actions .helper-download-current { border-color:var(--coral); color:var(--coral); }
.helper-status-indicator { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.helper-status-indicator .online-dot { width:10px; height:10px; border-radius:50%; background:#636366; }
.helper-status-indicator .online-dot.online { background:#30d158; box-shadow:0 0 0 3px rgba(48,209,88,.18); }
.helper-status-indicator .online-dot.offline { background:#ff453a; }
.helper-status-indicator strong { font-size:15px; font-weight:650; }
.helper-status-details { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:13px; margin:0; }
.helper-status-details dt { color:var(--muted); font-weight:500; }
.helper-status-details dd { margin:0; font-weight:500; }
.helper-pairing-display { padding:24px; background:var(--panel); border:1px solid var(--line); border-radius:14px; display:grid; gap:14px; text-align:center; }
.helper-pairing-label { font-size:13px; color:var(--muted); margin:0; }
.helper-pairing-code { display:block; font-family:"SF Mono","Fira Code",monospace; font-size:clamp(28px,5vw,40px); font-weight:700; letter-spacing:.12em; padding:18px 24px; background:var(--fill); border:2px dashed var(--coral); border-radius:12px; color:var(--ink); user-select:all; word-break:break-all; }
.helper-pairing-countdown { font-size:13px; color:var(--lavender); font-weight:600; margin:0; font-variant-numeric:tabular-nums; }
.helper-pairing-hint { font-size:12px; color:var(--muted); margin:0; }
.helper-pairing-action { padding:20px; background:var(--panel); border:1px solid var(--line); border-radius:14px; display:grid; gap:14px; }
.helper-pairing-action p { font-size:14px; color:var(--muted); margin:0; line-height:1.6; }
.helper-error { font-size:13px; color:#ff453a; padding:10px 14px; background:rgba(255,69,58,.08); border:1px solid rgba(255,69,58,.2); border-radius:8px; margin:0; }
.helper-steps { padding-left:24px; display:grid; gap:16px; margin:0; font-size:14px; line-height:1.6; }
.helper-steps li { display:grid; gap:6px; }
.helper-steps li strong { font-size:14px; font-weight:600; }
.helper-steps li p { margin:0; font-size:13px; color:var(--muted); }
.helper-footer { padding-top:16px; border-top:1px solid var(--line); display:flex; justify-content:center; }