:root,:root[data-theme=dark]{--bg: #0b1120;--surface: #0f172a;--surface-raised: #1c2942;--surface-sunken: #080d18;--line: #24334d;--line-strong: #334155;--text: #f1f5f9;--text-muted: #94a3b8;--text-on-accent: #ffffff;--accent: #1c64f2;--accent-hover: #3b7bf5;--accent-quiet: #17233d;--accent-text: #93b4fb;--good: #0e9f6e;--warn: #f59e0b;--warn-bg: #3a2a08;--bad: #f05252;--bad-bg: #3a1414;color-scheme:dark}:root[data-theme=light]{--bg: #f8fafc;--surface: #ffffff;--surface-raised: #ffffff;--surface-sunken: #e2e8f0;--line: #e2e8f0;--line-strong: #cbd5e1;--text: #1e293b;--text-muted: #64748b;--text-on-accent: #ffffff;--accent: #1c64f2;--accent-hover: #1e429f;--accent-quiet: #e1effe;--accent-text: #1e429f;--good: #057a55;--warn: #b45309;--warn-bg: #fdf6b2;--bad: #c81e1e;--bad-bg: #fde8e8;color-scheme:light}:root{--tap: 88px;--radius: 8px;--radius-sm: 6px;--radius-panel: 14px}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}html,body,#root{height:100%;margin:0;overscroll-behavior:none;overflow:hidden}body{background:var(--bg);color:var(--text);font:16px/1.4 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}input{-webkit-user-select:text;user-select:text;font:inherit}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}.app{display:flex;flex-direction:column;height:100%;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.app__body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px;display:flex;flex-direction:column;gap:16px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-panel);padding:16px;flex:none}.panel--flex{flex:1;min-height:0;display:flex;flex-direction:column}.panel--plain{background:none;border:none;padding:0}.panel__title{margin:0 0 12px;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}.nowbar{display:flex;align-items:center;gap:16px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--line)}.nowbar__song{flex:1;min-width:0}.nowbar .transport{gap:10px}.nowbar .transport__btn{min-height:64px;min-width:64px;padding:0 18px}.nowbar .transport__btn span{font-size:14px}@media (max-width: 560px){.nowbar .transport__btn span{display:none}.nowbar .transport__btn{min-width:64px;padding:0}}.tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:68px;border-radius:var(--radius);color:var(--text-muted);font-size:15px;font-weight:600}.tab svg{width:24px;height:24px;fill:currentColor}.tab[aria-selected=true]{background:var(--accent-quiet);color:var(--accent-text)}.tab:active{background:var(--surface-raised)}.tab__count{font-variant-numeric:tabular-nums}.header{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface)}.header__mark{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em;font-size:20px}.header__mark svg{width:28px;height:28px}.header__wordmark{height:44px;width:auto;display:block}.header__spacer{flex:1}.header__help{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);color:var(--text-muted);font-size:15px}.header__help:active{background:var(--surface-raised)}.banner{display:flex;align-items:center;gap:12px;padding:14px 16px;font-weight:600;background:var(--surface-raised);border-bottom:1px solid var(--line)}.banner--warn{background:var(--warn-bg);color:var(--warn)}.banner--bad{background:var(--bad-bg);color:var(--bad)}.banner__dot{width:12px;height:12px;border-radius:50%;background:currentColor;flex:none;animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{50%{opacity:.25}}.banner__action{margin-left:auto;min-height:48px;padding:0 16px;border-radius:12px;border:1px solid currentColor;font-weight:700}.now{display:flex;flex-direction:column;gap:6px}.now__title{margin:0;font-size:clamp(26px,4vw,40px);font-weight:800;line-height:1.1;overflow-wrap:anywhere}.now__artist{margin:0;font-size:clamp(17px,2.2vw,22px);color:var(--text-muted)}.now__singer{margin:8px 0 0;font-size:18px;color:var(--accent);font-weight:700}.now__idle{color:var(--text-muted);font-size:22px;padding:12px 0}.progress{margin-top:14px;height:10px;border-radius:999px;background:var(--surface-raised);overflow:hidden}.progress__fill{height:100%;background:var(--accent);border-radius:999px;transition:width .4s linear}.progress__times{display:flex;justify-content:space-between;margin-top:6px;font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:14px}.transport{display:flex;gap:16px;align-items:stretch}.transport__btn{flex:1;min-height:var(--tap);min-width:var(--tap);border-radius:var(--radius);background:var(--surface-raised);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:16px;font-weight:700}.transport__btn svg{width:40px;height:40px;fill:currentColor}.transport__btn--primary{flex:1.6;background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}.transport__btn:not(:disabled):active{transform:scale(.97)}.stepper{display:flex;align-items:center;gap:12px;margin-bottom:12px}.stepper:last-child{margin-bottom:0}.stepper__label{width:78px;flex:none;font-weight:700;font-size:17px}.stepper__btn{width:var(--tap);height:var(--tap);flex:none;border-radius:var(--radius);background:var(--surface-raised);border:1px solid var(--line);font-size:34px;font-weight:700;line-height:1}.stepper__btn:not(:disabled):active{background:var(--accent);color:var(--text-on-accent)}.stepper__value{flex:1;text-align:center;font-size:30px;font-weight:800;font-variant-numeric:tabular-nums}.stepper__reset{min-height:52px;padding:0 16px;border-radius:12px;border:1px solid var(--line);color:var(--text-muted);font-weight:700}.slider{margin-bottom:18px}.slider:last-child{margin-bottom:0}.slider__head{display:flex;justify-content:space-between;font-weight:700;margin-bottom:8px;font-size:17px}.slider__value{color:var(--text-muted);font-variant-numeric:tabular-nums}.slider input[type=range]{width:100%;height:44px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent}.slider input[type=range]::-webkit-slider-runnable-track{height:14px;border-radius:999px;background:var(--surface-raised);border:1px solid var(--line)}.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:44px;height:44px;margin-top:-16px;border-radius:50%;background:var(--accent);border:3px solid var(--bg)}.slider input[type=range]::-moz-range-track{height:14px;border-radius:999px;background:var(--surface-raised)}.slider input[type=range]::-moz-range-thumb{width:44px;height:44px;border-radius:50%;background:var(--accent);border:3px solid var(--bg)}.list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}.list__empty{color:var(--text-muted);padding:24px 4px;font-size:17px}.row{display:flex;align-items:center;gap:12px;padding:12px;min-height:76px;border-radius:14px;background:var(--surface-raised);border:1px solid var(--line);margin-bottom:10px;position:relative;touch-action:pan-y}.row--dragging{border-color:var(--accent);opacity:.85;z-index:2}.row--pending{opacity:.5}.row__grip{width:44px;height:56px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:22px;cursor:grab;touch-action:none}.row__text{flex:1;min-width:0}.row__title{font-weight:700;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row__meta{color:var(--text-muted);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row__singer{color:var(--accent)}.row__actions{display:flex;gap:8px;flex:none}.row__btn{width:56px;height:56px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:20px;font-weight:700}.row__btn--danger:active{background:var(--bad);color:var(--text-on-accent)}.row__pending{color:var(--warn);font-size:14px;font-weight:700}.search__input{width:100%;min-height:64px;padding:0 18px;border-radius:16px;background:var(--surface-raised);border:1px solid var(--line);color:var(--text);font-size:20px;margin-bottom:12px}.search__input::placeholder{color:var(--text-muted)}.search__status{color:var(--text-muted);padding:12px 4px;font-size:16px}.row--tappable:active{border-color:var(--accent)}.toasts{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%);display:flex;flex-direction:column;gap:8px;z-index:40;pointer-events:none}.toast{padding:14px 22px;border-radius:999px;background:var(--surface-raised);border:1px solid var(--line);font-weight:700;font-size:17px;box-shadow:0 10px 30px #00000073}.toast--error{border-color:var(--bad);color:var(--bad)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:color-mix(in srgb,var(--surface-sunken) 92%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:24px}.overlay__card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px;max-width:520px;width:100%;text-align:center}.overlay__card--sheet{text-align:left;max-width:560px}.overlay__card--sheet .overlay__actions{margin-top:20px}.sheet__row{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--line)}.sheet__text{flex:1;min-width:0}.sheet__label{font-size:18px;font-weight:700}.sheet__hint{margin:4px 0 0;color:var(--text-muted);font-size:15px;line-height:1.45}.segmented{display:flex;gap:4px;padding:4px;background:var(--surface-sunken);border-radius:var(--radius)}.segmented__btn{min-height:52px;padding:0 18px;border-radius:var(--radius-sm);font-size:16px;font-weight:700;color:var(--text)}.segmented__btn[aria-pressed=true]{background:var(--accent);color:var(--text-on-accent)}.overlay__title{margin:0 0 10px;font-size:28px;font-weight:800}.overlay__text{margin:0 0 22px;color:var(--text-muted);font-size:18px;line-height:1.5}.overlay__count{font-size:52px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;margin-bottom:18px}.overlay__actions{display:flex;flex-direction:column;gap:12px}.btn{min-height:64px;padding:0 22px;border-radius:var(--radius);border:1px solid var(--line-strong);background:var(--surface-raised);font-size:18px;font-weight:700}.btn--primary{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}.field{width:100%;min-height:64px;padding:0 18px;border-radius:var(--radius);background:var(--surface-raised);border:1px solid var(--line-strong);color:var(--text);font-size:20px;margin-bottom:16px}.hint{color:var(--text-muted);font-size:14px;margin-top:10px}.locked{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:15px;padding:10px 0}.overlay__error{margin:-6px 0 16px;color:var(--bad);font-weight:700;font-size:16px}