* { box-sizing: border-box; }
        body { margin: 0; min-height: 100dvh; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; background: #000; color: #fff; }
        .container { width: min(100%, 430px); min-height: 100dvh; margin: 0 auto; padding: max(9px, env(safe-area-inset-top)) 16px max(9px, env(safe-area-inset-bottom)); background: linear-gradient(160deg, #254e3b 0, #121212 34%); display: flex; flex-direction: column; gap: 7px; }
        .library-header { position: relative; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding: 15px 18px 13px; overflow: hidden; border: 1px solid rgba(108, 219, 151, .62); border-radius: 14px 4px 14px 4px; background: linear-gradient(135deg, rgba(61, 125, 87, .62), rgba(14, 30, 23, .78)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.26); text-align: center; }
        .library-header::before { position: absolute; top: -30px; left: -10%; width: 55%; height: 90px; background: rgba(180, 255, 206, .12); content: ""; transform: rotate(-18deg); }
        .library-header::after { position: absolute; right: 10px; bottom: 8px; width: 36px; height: 3px; border-radius: 999px; background: #1ed760; box-shadow: 0 0 12px rgba(30, 215, 96, .8); content: ""; }
        #bookmark-toggle { position: absolute; z-index: 2; top: 7px; right: 10px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: rgba(201, 241, 214, .68); cursor: pointer; opacity: .75; }
        #bookmark-toggle svg { width: 16px; height: 16px; }
        #bookmark-toggle:hover, #bookmark-toggle:focus-visible { background: rgba(255,255,255,.1); color: #fff; opacity: 1; outline: 0; }
        .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
        .library-brand { position: relative; z-index: 1; width: 100%; height: 42px; }
        h1 { position: absolute; top: 3px; left: 50%; margin: 0; color: #f6fff9; font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive; font-size: 30px; font-weight: 700; letter-spacing: .02em; line-height: 1.05; white-space: nowrap; text-shadow: 2px 2px 0 rgba(30, 215, 96, .28), -1px -1px 0 rgba(255,255,255,.12); transform: translateX(-50%) rotate(-1deg); }
        .library-logo { position: absolute; top: -6px; left: -2%; width: 54px; height: 54px; object-fit: contain; border-radius: 50%; filter: grayscale(1) sepia(1) hue-rotate(83deg) saturate(2.2) brightness(1.15); mix-blend-mode: screen; opacity: .9; }
        .library-subtitle { position: relative; z-index: 1; margin: 7px 0 0; color: #c9f1d6; font-size: 11px; letter-spacing: .08em; }
        #now-playing { min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 700; text-align: left; overflow-wrap: anywhere; }
        .now-title { flex: 1 1 auto; min-width: 0; }
        .now-cover, .track-cover { width: 58px; height: 58px; flex: 0 0 58px; object-fit: cover; border-radius: 5px; background: #282828; }
        .now-cover { cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
        .now-cover:hover { transform: scale(1.04); box-shadow: 0 0 0 2px #1ed760; }
        .now-select { width: 24px; height: 24px; flex: 0 0 24px; }
        .now-search { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 1px solid #1688b8; border-radius: 7px; background: #181818; color: #fff; cursor: pointer; }
        .now-search:hover, .now-search:focus-visible { border-color: #1ed760; background: #282828; outline: 0; }
        .now-search svg { width: 18px; height: 18px; }
        .selected-list-button { min-height: 38px; padding: 0 10px; border: 1px solid #39745a; border-radius: 8px; background: #181818; color: #c9f1d6; font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
        .selected-list-button:hover, .selected-list-button:focus-visible { border-color: #1ed760; color: #fff; outline: 0; }
        .selected-list-button:disabled { border-color: #3b4b42; color: #69766f; cursor: not-allowed; }
        audio { width: 100%; margin: 0; }
        .lyrics-panel { min-height: 0; flex: 1 1 42dvh; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: #181818; }
        .lyrics-panel.is-collapsed { display: none; }
        .lyrics-heading { min-height: 48px; margin: 0; padding: 4px 10px 5px 5px; font-size: 13px; color: #b3b3b3; background: #282828; display: flex; align-items: center; gap: 8px; }
        .content-tabs { order: 5; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
        .content-tabs button { min-height: 30px; padding: 3px 7px; border: 1px solid #464646; border-radius: 7px; background: #181818; color: #b3b3b3; font: inherit; font-size: 11px; cursor: pointer; }
        .content-tabs button[aria-pressed="true"] { border-color: #1ed760; background: #24553a; color: #fff; }
        #lyrics-close { padding: 2px 0; border: 0; background: transparent; color: #b3b3b3; font: inherit; cursor: pointer; }
        #lyrics-close:hover { color: #fff; }
        .player-actions { display: none; gap: 10px; }
        #lyrics-panel.is-collapsed + .player-actions { display: flex; }
        .content-open-buttons { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
        .content-open-buttons button { min-width: 0; min-height: 44px; padding: 4px; border: 0; border-radius: 14px; background: #282828; color: #fff; font: inherit; font-size: 10px; font-weight: 700; line-height: 1.1; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
        .content-open-buttons button:hover, .content-open-buttons button:focus-visible { background: #3a3a3a; outline: 2px solid #1ed760; }
        .content-open-buttons svg { width: 15px; height: 15px; flex: 0 0 15px; }
        .content-button-icon { height: 15px; font-size: 15px; line-height: 15px; }
        .favorites-toggle { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items:center; padding: 0; border: 2px solid #ff3976; border-radius: 50%; background: radial-gradient(circle at 32% 25%, #3b3b3b, #171717 72%); color: #fff; box-shadow: 0 0 0 2px rgba(255,57,118,.1), inset 0 1px 0 rgba(255,255,255,.15), 0 4px 9px rgba(0,0,0,.28); cursor: pointer; transition: transform .18s ease, background .18s ease, color .18s ease; }
        .favorites-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        .favorites-toggle:hover, .favorites-toggle:focus-visible { color: #ff3976; transform: translateY(-1px) scale(1.04); outline: 0; }
        .favorites-toggle:disabled { border-color: #4b4b4b; color: #777; box-shadow: none; cursor: not-allowed; opacity: .72; }
        .favorites-toggle.is-playing { border-color: #1ed760; background: radial-gradient(circle at 32% 25%, #277d51, #123222 72%); color: #fff; box-shadow: 0 0 0 3px rgba(30,215,96,.14), 0 0 18px rgba(30,215,96,.35); }
        #lyrics { flex: 1; margin: 0; padding: 14px; overflow-y: auto; white-space: pre-wrap; text-align: left; line-height: 1.8; font-size: 15px; color: #fff; }
        #lyrics.empty { display: flex; align-items: center; justify-content: center; text-align: center; color: #b3b3b3; }
        .search-wrap { position: relative; }
        #track-search { width: 100%; min-height: 42px; padding: 10px 14px; border: 0; border-radius: 999px; outline: 0; background: #282828; color: #fff; font: inherit; }
        #track-search::placeholder { color: #b3b3b3; }
        #track-search:focus { box-shadow: 0 0 0 2px #1ed760; }
        #track-list { min-height: 0; max-height: 25dvh; overflow-y: auto; text-align: left; border-radius: 10px; background: #181818; }
        #lyrics-panel.is-collapsed ~ #track-list { flex: 1 1 auto; max-height: none; }
        .track-item { width: 100%; min-height: 80px; padding: 10px 14px; border: 0; border-bottom: 1px solid #282828; background: #181818; color: inherit; font: inherit; text-align: left; overflow-wrap: anywhere; display: flex; align-items: center; gap: 12px; }
        .track-item.is-filtered-out { display: none; }
        .track-select { width: 24px; height: 24px; flex: 0 0 24px; appearance: none; margin: 0; border: 2px solid #779688; border-radius: 7px; background: linear-gradient(145deg, #303a35, #151a18); box-shadow: inset 0 1px 2px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.08); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
        .track-select::after { display: block; color: #07160d; content: "✓"; font-size: 17px; font-weight: 900; line-height: 20px; text-align: center; opacity: 0; transform: scale(.45); transition: opacity .16s ease, transform .16s ease; }
        .track-select:hover { border-color: #d4f6df; transform: scale(1.06); }
        .track-select:focus-visible { outline: 2px solid #1ed760; outline-offset: 2px; }
        .track-select:checked { border-color: #54f290; background: linear-gradient(145deg, #7effad, #1ed760); }
        .track-select:checked::after { opacity: 1; transform: scale(1); }
        .track-play { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
        .track-title { line-height: 1.35; }
        .track-item:last-child { border-bottom: 0; }
        .track-item:active, .track-item:hover { background: #282828; }
        .track-item.active { color: #1ed760; font-weight: 700; background: #282828; }
        .message { padding: 14px; margin: 0; color: #ff8a8a; }
        .track-detail { position: fixed; z-index: 10; inset: 0; display: flex; justify-content: center; background: rgba(0, 0, 0, .78); overflow-y: auto; }
        .track-detail[hidden] { display: none; }
        .track-detail-card { width: min(100%, 430px); min-height: 100dvh; padding: max(122px, calc(env(safe-area-inset-top) + 110px)) 20px max(28px, env(safe-area-inset-bottom)); background: linear-gradient(160deg, #254e3b 0, #121212 38%); }
        .detail-fixed-controls { position: fixed; z-index: 12; top: 0; left: 50%; width: min(100%, 430px); margin: 0; padding: max(12px, env(safe-area-inset-top)) 20px 10px; background: linear-gradient(180deg, rgba(28,64,47,.99), rgba(18,36,28,.98)); box-shadow: 0 8px 18px rgba(0,0,0,.34); backdrop-filter: blur(10px); transform: translateX(-50%); }
        .detail-toolbar { display: flex; align-items: center; gap: 8px; }
        .detail-playback-controls { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; margin-top: 8px; }
        .detail-playback-controls button { min-height: 34px; padding: 3px 2px; border: 1px solid #39745a; border-radius: 8px; background: #181818; color: #d2e6d9; font: inherit; font-size: 10px; cursor: pointer; }
        .detail-playback-controls button:hover, .detail-playback-controls button:focus-visible { border-color: #1ed760; color: #fff; outline: 0; }
        .detail-playback-controls button[aria-pressed="true"] { border-color: #1ed760; background: #24553a; color: #fff; }
        #detail-back { min-height: 40px; padding: 0 15px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(0,0,0,.2); color: #fff; font: inherit; cursor: pointer; }
        .detail-toolbar #detail-back { margin-left: auto; }
        #detail-back:hover { border-color: #1ed760; color: #1ed760; }
        #detail-title { margin: 20px 0 14px; font-size: 21px; line-height: 1.4; text-align: center; }
        #detail-cover { display: block; width: min(100%, 330px); aspect-ratio: 1; margin: 0 auto 22px; object-fit: cover; border-radius: 10px; background: #282828; box-shadow: 0 14px 30px rgba(0,0,0,.38); }
        #detail-lyrics { margin: 0; padding: 18px; border-radius: 10px 10px 0 0; background: rgba(24,24,24,.92); color: #fff; white-space: pre-wrap; line-height: 1.85; text-align: left; }
        #detail-lyrics.empty { color: #b3b3b3; text-align: center; }
        .detail-about { margin: 0; padding: 18px; border-top: 2px dashed #597567; border-radius: 0 0 10px 10px; background: rgba(24,24,24,.92); }
        .detail-about h3 { margin: 0 0 12px; color: #c9f1d6; font-size: 17px; }
        #detail-description { margin: 0; color: #fff; white-space: pre-wrap; line-height: 1.85; text-align: left; }
        #detail-description.empty { color: #b3b3b3; text-align: center; }
        .search-dialog { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .72); }
        .search-dialog[hidden] { display: none; }
        .search-card { width: min(100%, 390px); max-height: min(78dvh, 560px); display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 12px; background: #181818; box-shadow: 0 18px 44px rgba(0,0,0,.55); }
        .search-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; font-size: 18px; }
        #search-close { padding: 5px 8px; border: 0; border-radius: 5px; background: transparent; color: #b3b3b3; font: inherit; cursor: pointer; }
        #search-close:hover { color: #fff; background: #282828; }
        #search-results { max-height: 48dvh; overflow-y: auto; border-radius: 8px; background: #121212; }
        .search-result { width: 100%; min-height: 54px; padding: 10px 12px; border: 0; border-bottom: 1px solid #282828; background: transparent; color: #fff; font: inherit; text-align: left; cursor: pointer; }
        .search-result:hover, .search-result:focus-visible { background: #282828; outline: 0; }
        .search-empty { margin: 0; padding: 16px 12px; color: #b3b3b3; }
        #selected-dialog { display: block; padding: 0; overflow: hidden; }
        #selected-dialog[hidden] { display: none; }
        #selected-dialog .search-card { width: 100%; height: 100dvh; max-height: none; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); border-radius: 0; }
        #selected-results { min-height: 0; flex: 1 1 auto; overflow-y: scroll; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; border-radius: 8px; background: #121212; }
        .selected-result { min-height: 70px; padding: 8px 12px; border-bottom: 1px solid #282828; display: flex; align-items: center; gap: 10px; }
        .selected-result:last-child { border-bottom: 0; }
        .selected-result .track-play { min-height: 54px; }
        @media (min-width: 431px) { body { padding: 20px; background: #121212; } .container { min-height: calc(100dvh - 40px); border-radius: 16px; box-shadow: 0 4px 18px rgba(0,0,0,.45); } }
    
.player-bar {display:flex;align-items:center;gap:8px}.player-bar audio{flex:1;min-width:0}.download-button{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;background:#1ed760;color:#10251a;border-radius:50%}.download-button[hidden]{display:none}.download-button svg,.offline-link svg{width:24px;height:24px;flex-shrink:0}.offline-link{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;color:#ffbad7;text-decoration:none;border:1px solid #975671;border-radius:10px;min-height:48px}.offline-link:focus-visible{outline:2px solid white;outline-offset:3px}

.save-offline:disabled{opacity:.35;cursor:default}#save-status{margin:0;color:#b5c6bc;font-size:11px;line-height:1.6}#save-status:empty{display:none}.lyrics-heading{flex-wrap:wrap}.player-actions{flex-wrap:wrap}.detail-toolbar{flex-wrap:wrap}
.download-folder-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0;color:#b5c6bc;font-size:12px;line-height:1.5}.download-folder-tools button{min-height:34px;padding:0 10px;border:1px solid #39745a;border-radius:7px;background:#181818;color:#c9f1d6;font:inherit;cursor:pointer}.download-folder-tools button:hover,.download-folder-tools button:focus-visible{border-color:#1ed760;color:#fff;outline:0}.download-folder-tools button:disabled{opacity:.5;cursor:wait}
.player-bar{gap:0;padding-right:3px;background:transparent;border-radius:24px;overflow:hidden;min-height:46px;color-scheme:dark}
.player-bar audio{width:0;height:46px;flex:1 1 0}
.player-bar .download-button,.saved-tracks-link{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;padding:0;border:1px solid #7d998044;border-radius:50%;background:#ffffff08;color:#d2e6d9;text-decoration:none;cursor:pointer}.saved-tracks-link{width:44px;height:44px;flex-basis:44px;border:2px solid #ff7eb6;background:linear-gradient(145deg,#b52f6b,#68203f);color:#fff;box-shadow:0 0 0 2px #ff7eb626,0 0 13px #ff5ca066}.saved-tracks-link[hidden]{display:none}
.player-bar .download-button svg{width:18px;height:18px}.saved-tracks-link svg{width:23px;height:23px}
.player-bar .download-button svg path,.saved-tracks-link svg path{stroke-width:2}
.player-bar .download-button:hover{background:#ffffff09;color:#e3e9e5}.saved-tracks-link:hover{border-color:#fff;background:linear-gradient(145deg,#d43f80,#812a50);color:#fff;transform:scale(1.05)}
.player-bar .download-button:focus-visible,.saved-tracks-link:focus-visible{outline:2px solid #737b77;outline-offset:-4px}
.player-bar .download-button.is-saved{color:#c5efd3}
.player-bar .download-button.is-saving svg{animation:save-pulse 1s ease-in-out infinite alternate}
@keyframes save-pulse{to{opacity:.3}}@media(prefers-reduced-motion:reduce){.player-bar .download-button.is-saving svg{animation:none;opacity:.4}}

.player-bar audio::-webkit-media-controls-panel{background:#181818}
.playback-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.playback-controls button{min-height:34px;padding:3px 2px;border:1px solid #39745a;border-radius:8px;background:#181818;color:#d2e6d9;font:inherit;font-size:10px;cursor:pointer}
.playback-controls button:hover,.playback-controls button:focus-visible{border-color:#1ed760;color:#fff;outline:0}
.playback-controls button[aria-pressed="true"]{border-color:#1ed760;background:#24553a;color:#fff}
.playback-controls button:disabled{opacity:.4;cursor:not-allowed}
.save-selected{display:grid;place-items:center;width:36px;height:44px;padding:0;border:0;border-radius:7px;background:transparent;color:#a4b6aa;cursor:pointer}.save-selected svg{width:17px;height:17px}.save-selected:hover{background:#ffffff09;color:#e3e9e5}.save-selected:disabled{opacity:.3;cursor:default}.save-selected:focus-visible{outline:2px solid #a1b8a9;outline-offset:1px}.save-selected[aria-busy="true"] svg{opacity:.5}.detail-save-status{font-size:12px;line-height:1.6;color:#b5c6bc}.detail-save-status:empty{display:none}


#selected-heading > span{flex:1}#selected-heading .save-selected{flex:0 0 44px;width:44px}
#selected-heading .save-selected{color:#d9f8e4;background:#24553a;border:1px solid #78ad8b;border-radius:9px}#selected-heading .save-selected svg{width:23px;height:23px}#selected-heading .save-selected svg path{stroke-width:2}#selected-heading .save-selected:hover{background:#326747;color:white}#batch-download-result{margin:0;font-size:13px;line-height:1.6}#batch-download-result a{display:inline-block;padding:9px 14px;border-radius:8px;background:#24553a;color:#e1ffec}#batch-download-result small{display:block;color:#b5c6bc;margin-top:5px}
#batch-next-server{min-height:44px;margin:8px 0;padding:9px 14px;border:1px solid #78ad8b;border-radius:8px;background:#24553a;color:#e1ffec;font:inherit;cursor:pointer}#batch-next-server:disabled{opacity:.4;cursor:default}
#batch-download-result [hidden]{display:none!important}

.track-duration{margin-left:auto;flex-shrink:0;color:#a38f99;font-size:10px;font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}

.search-result .track-duration{margin-left:8px}