:root{font-family:Inter,Noto Sans SC,Microsoft YaHei,system-ui,sans-serif;color:#e8eef7;background:#101925;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px}button{font:inherit}.shell{max-width:1000px;margin:0 auto;padding:40px 28px 80px}.topbar{display:flex;align-items:center;gap:16px}.brand-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#83d8c0,#a5bdff);color:#152435;font-size:28px;font-weight:700}.eyebrow{color:#89d9c2;font-size:11px;font-weight:700;letter-spacing:.16em}h1{margin:3px 0 0;font-size:22px;line-height:1.2}.client-version{margin-left:auto;color:#9aaabd;font-size:13px}.welcome{margin-top:60px;padding:48px;border:1px solid #2d4053;border-radius:28px;background:radial-gradient(circle at 90% 10%,#2d5159 0,transparent 35%),#1a2b3a}.welcome h2{margin:12px 0;font-size:clamp(34px,5vw,52px)}.welcome p{max-width:590px;margin:0;color:#afbdce;line-height:1.8}.status-card{display:flex;align-items:center;gap:16px;margin-top:22px;padding:24px;border:1px solid #2d4053;border-radius:20px;background:#1a2837}.status-dot{width:11px;height:11px;flex:none;border-radius:50%;background:#e5bd68;box-shadow:0 0 0 6px #e5bd681c}.status-dot.online{background:#83d8c0;box-shadow:0 0 0 6px #83d8c01c}.status-dot.offline{background:#e58e8e;box-shadow:0 0 0 6px #e58e8e1c}.status-copy{flex:1;min-width:0}.status-copy h3{margin:0 0 4px;font-size:17px}.status-copy p{margin:0;color:#aebed0;line-height:1.5}.status-card button{flex:none;min-height:44px;padding:0 18px;border:1px solid #8dd9c4;border-radius:11px;background:transparent;color:#a9ead8;cursor:pointer}.status-card button:hover:not(:disabled){background:#244838}.status-card button:disabled{opacity:.5;cursor:default}.auth-card{margin-top:22px;padding:28px;border:1px solid #2d4053;border-radius:20px;background:#1a2837}.auth-card h3{margin:8px 0 12px;font-size:21px}.auth-card p{margin:0;color:#aebed0}.auth-card form{max-width:480px}.auth-fields{display:grid;gap:14px;margin:20px 0}.auth-fields label{display:grid;gap:7px;color:#cbd7e4;font-size:14px}.auth-fields input{width:100%;min-height:44px;padding:9px 12px;border:1px solid #52677b;border-radius:10px;background:#101925;color:#e8eef7;font:inherit}.auth-fields input:focus-visible,.auth-card button:focus-visible{outline:2px solid #89d9c2;outline-offset:2px}.auth-card button{min-height:44px;padding:0 22px;border:0;border-radius:11px;background:#89d9c2;color:#152435;font-weight:700;cursor:pointer}.auth-card button:disabled{opacity:.5;cursor:default}.auth-signed-in{display:flex;align-items:center;justify-content:space-between;gap:20px}.auth-card .auth-error{margin-top:16px;color:#ffc3c3}.search-card{margin-top:22px;padding:28px;border:1px solid #2d4053;border-radius:20px;background:#1a2837}.search-heading{display:flex;align-items:end;justify-content:space-between;gap:20px}.search-heading h2{margin:8px 0 0;font-size:23px}.source-tabs{display:flex;border-bottom:1px solid #476070}.source-tabs button{min-height:42px;padding:0 16px;border:0;border-bottom:3px solid #89d9c2;background:transparent;color:#baf3df;font:inherit;font-weight:700}.source-tabs button[aria-selected=false]{border-bottom-color:transparent;color:#a8bac5}.search-hint{color:#cbd7e4;font-size:14px;margin:10px 0 0}.search-controls{margin-top:24px}.search-controls label{display:block;margin-bottom:8px;color:#cbd7e4;font-size:14px}.search-controls>div{display:flex;gap:10px}.search-controls input{flex:1;min-width:0;min-height:46px;padding:9px 12px;border:1px solid #52677b;border-radius:10px;background:#101925;color:#e8eef7;font:inherit}.search-controls button,.search-results button{min-height:44px;padding:0 20px;border:0;border-radius:10px;background:#89d9c2;color:#152435;font:inherit;font-weight:700;cursor:pointer}.search-controls button:disabled,.search-results button:disabled{opacity:.5;cursor:default}.search-controls input:focus-visible,.search-card button:focus-visible,.preview-player audio:focus-visible{outline:2px solid #89d9c2;outline-offset:2px}.search-error{margin:18px 0 0;color:#ffc3c3}.search-empty{margin:22px 0 0;color:#aebed0}.search-results{margin-top:24px}.search-count{margin:0 0 12px;color:#aebed0;font-size:13px}.search-results ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}.search-results li{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px;padding:12px 14px;border:1px solid #34485b;border-radius:12px;background:#142333}.search-results li div{display:grid;gap:5px;min-width:0}.search-results li strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-results li span{color:#aebed0;font-size:13px}.preview-player{margin-top:20px;padding:16px;border:1px solid #476070;border-radius:12px;background:#142333}.preview-player p{margin:0 0 12px}.preview-player audio{display:block;width:100%}.library-card,.settings-card{margin-top:22px;padding:28px;border:1px solid #2d4053;border-radius:20px;background:#1a2837}.settings-card h2{margin:8px 0 18px;font-size:23px}.settings-card button{min-height:42px;border:1px solid #52677b;border-radius:9px;padding:8px 12px;background:#24384b;color:#e8eef7;font:inherit;cursor:pointer}.settings-card button:disabled{opacity:.45;cursor:default}.library-header,.playlist-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.library-header h2{margin:8px 0 0;font-size:23px}.library-summary,.library-list span,.playlist-card p{color:#aebed0}.library-device-setting{margin-top:18px;color:#cbd7e4}.library-device-setting label{display:inline-flex;align-items:center;gap:8px;cursor:pointer}.library-device-setting input{width:18px;height:18px}.cache-setting{margin-top:18px;padding-top:18px;border-top:1px solid #2d4053;display:flex;flex-direction:column;align-items:flex-start;gap:10px}.cache-setting p{margin:0}.device-setting{margin-top:18px;padding-top:18px;border-top:1px solid #2d4053;display:flex;flex-direction:column;align-items:flex-start;gap:10px}.device-setting p{margin:0}.device-list{display:grid;gap:8px;list-style:none;padding:0;margin:0;width:100%}.device-list li{display:grid;gap:4px;border:1px solid #34485b;border-radius:12px;padding:12px}.device-list button{justify-self:start;min-height:42px;border:1px solid #52677b;border-radius:9px;padding:8px 12px;background:#24384b;color:#e8eef7;font:inherit;cursor:pointer}.device-list button:disabled{opacity:.45;cursor:default}.device-name{font-weight:600}.diagnostics-setting{margin-top:18px;padding-top:18px;border-top:1px solid #2d4053;display:flex;flex-direction:column;align-items:flex-start;gap:10px}.diagnostics-setting p,.diagnostics-setting h3{margin:0}.diagnostics-setting h3{font-size:16px}.diagnostics-list{display:grid;gap:8px;list-style:none;padding:0;margin:0;width:100%}.diagnostics-list li{display:grid;gap:4px;border:1px solid #34485b;border-radius:12px;padding:10px;overflow-wrap:anywhere}.diagnostics-paused{color:#ffc46b;font-weight:600}.about-setting{display:flex;flex-direction:column;gap:10px}.about-setting p{margin:0;overflow-wrap:anywhere}.about-setting a{color:#89d9c2}.update-card{display:flex;align-items:center;gap:16px;margin-top:22px;padding:20px 24px;border:1px solid #6f8aa1;border-radius:20px;background:#24384b}.update-card.incompatible{border-color:#e58e8e;background:#3a2632}.update-card h3{margin:0 0 4px;font-size:17px}.update-card p{margin:0;color:#d7e2ee;line-height:1.5}.update-card button{flex:none;min-height:44px;padding:0 18px;border:1px solid #8dd9c4;border-radius:11px;background:transparent;color:#a9ead8;font:inherit;cursor:pointer}.compact-library .library-list{gap:4px}.compact-library .library-list li{padding:6px 10px}.playlist-create{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:22px 0}.playlist-create input,.library-actions select{min-height:42px;border:1px solid #52677b;border-radius:9px;padding:8px;background:#101925;color:#e8eef7;font:inherit}.library-card button{min-height:42px;border:1px solid #52677b;border-radius:9px;padding:8px 12px;background:#24384b;color:#e8eef7;font:inherit;cursor:pointer}.library-card button:disabled{opacity:.45;cursor:default}.library-list{display:grid;gap:8px;list-style:none;padding:0}.library-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #34485b;border-radius:12px;padding:12px}.library-list li>div:first-child{display:grid;gap:4px;min-width:0}.library-list strong{overflow:hidden;text-overflow:ellipsis}.library-actions{display:flex;flex-wrap:wrap;gap:6px}.catalog-browser{display:grid;gap:12px;margin-top:12px}.catalog-browser button{min-height:42px;border:1px solid #52677b;border-radius:9px;padding:8px 12px;background:#24384b;color:#e8eef7;font:inherit;cursor:pointer}.catalog-browser button:disabled{opacity:.45;cursor:default}.catalog-browser input{min-height:42px;border:1px solid #52677b;border-radius:9px;padding:8px;background:#101925;color:#e8eef7;font:inherit}.catalog-replace{display:inline-flex;align-items:center;min-height:42px;border:1px solid #52677b;border-radius:9px;padding:8px 12px;background:#24384b;cursor:pointer}.catalog-replace input{width:0;height:0;opacity:0;position:absolute}.catalog-preview{margin-top:22px;padding-top:14px;border-top:1px solid #2d4053}.catalog-preview h3{margin:0 0 10px}.playlist-card{margin-top:14px;padding:16px;border:1px solid #34485b;border-radius:12px}.playlist-heading h4{margin:0}.library-card button:focus-visible,.library-card input:focus-visible,.library-card select:focus-visible{outline:2px solid #89d9c2;outline-offset:2px}.player-card{margin-top:22px;padding:28px;border:1px solid #2d4053;border-radius:20px;background:#1a2837}.player-card h2{margin:8px 0 18px;font-size:23px}.player-card button,.player-card select,.player-card input{min-height:42px;border:1px solid #52677b;border-radius:9px;padding:8px 12px;background:#24384b;color:#e8eef7;font:inherit}.player-card button{cursor:pointer}.player-card button:disabled{opacity:.45;cursor:default}.player-current{display:flex;align-items:center;gap:18px}.player-current img{flex:none;border-radius:12px}.player-current strong{font-size:20px}.player-current p{color:#aebed0}.player-controls,.lyric-offset{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:16px 0}.player-controls label,.lyric-offset label{display:inline-flex;align-items:center;gap:8px}.player-card audio{display:block;width:100%}.lyrics-panel,.history-panel{margin-top:20px;border-top:1px solid #34485b;padding-top:12px}.lyrics-lines{max-height:280px;overflow-y:auto;padding:8px 16px;border-radius:12px;background:#142333}.lyrics-lines p{margin:8px 0;color:#aebed0}.lyrics-lines .active-lyric{color:#a5e8d2;font-weight:700}.history-panel ol{max-height:260px;overflow-y:auto;padding-left:24px}.history-panel li{margin:5px 0}@media(max-width:640px){.shell{padding:24px 16px 48px}.welcome{margin-top:36px;padding:32px 24px}.status-card{align-items:flex-start;flex-wrap:wrap}.status-card button{margin-left:27px}.auth-signed-in{align-items:flex-start;flex-direction:column}.search-card{padding:22px 16px}.search-heading{align-items:flex-start;flex-direction:column;gap:14px}.search-controls>div{flex-direction:column}.search-results li{align-items:flex-start}.search-results button{padding:0 12px}.library-card,.settings-card,.player-card{padding:22px 16px}.library-list li,.playlist-heading{align-items:flex-start;flex-direction:column}}.song-unavailable{display:inline-block;margin-left:.5rem;padding:0 .45rem;border-radius:999px;background:#fef3c7;color:#92400e;font-size:.75rem;font-weight:600;cursor:help}
