:root{
  --bg:#f6f7f4;
  --surface:#fff;
  --surface-2:#eef3ee;
  --text:#10201d;
  --muted:#6b776f;
  --line:#dfe5df;
  --accent:#35cdb8;
  --accent-2:#dff8f3;
  --shadow:0 8px 30px rgba(22,59,45,.08);
  --radius:24px;
  --player-h:92px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
body{padding-bottom:var(--player-h)}
button,input{font:inherit}
button{cursor:pointer}
.app-shell{min-height:calc(100vh - var(--player-h));display:flex}
.sidebar{width:270px;background:var(--surface);border-right:1px solid var(--line);padding:28px 18px;display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:var(--player-h);z-index:20}
.brand{display:flex;align-items:center;gap:12px;padding:4px 12px 28px}

.brand-logo-wrap{display:flex;align-items:center;justify-content:flex-start;width:100%;padding:0 6px 22px}
.brand-logo{display:block;width:172px;height:172px;object-fit:contain;border-radius:24px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.10))}
.brand-mark,.cover{background:var(--accent);color:white;display:grid;place-items:center;font-weight:800;letter-spacing:-.04em}
.cover img{width:100%;height:100%;object-fit:cover;display:block}

.nav{display:grid;gap:5px}
.nav-item{border:0;background:transparent;text-align:left;padding:12px 14px;border-radius:14px;color:var(--text);font-weight:650}
.nav-item:hover,.nav-item.active{background:var(--accent-2);color:var(--text)}
.sidebar-divider{height:1px;background:var(--line);margin:18px 12px}
.add-button{border:0;background:var(--accent);color:#fff;border-radius:14px;padding:13px 16px;font-weight:750;box-shadow:var(--shadow);margin-bottom:15px}
.sidebar-foot{margin-top:auto;display:grid;gap:10px}
.storage-card{background:var(--surface-2);border-radius:16px;padding:13px 14px}
.storage-top{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:700}
.storage-bar{height:7px;background:#d8e1db;border-radius:999px;overflow:hidden;margin:10px 0 8px}.storage-bar>div{height:100%;width:0;background:var(--accent);border-radius:999px;transition:.2s}
.storage-note{font-size:11px;color:var(--muted);line-height:1.45}
.main{margin-left:270px;width:calc(100% - 270px);min-width:0}
.topbar{position:sticky;top:0;z-index:15;background:rgba(246,247,244,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(223,229,223,.8);height:76px;display:flex;align-items:center;gap:18px;padding:0 28px}
.search-wrap{max-width:620px;width:100%;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:0 15px;height:46px}.search-wrap input{border:0;outline:0;width:100%;background:transparent;color:var(--text)}.search-icon{font-size:22px;color:var(--muted)}
.top-actions{margin-left:auto;display:flex;gap:10px;align-items:center}.icon-button,.avatar,.mobile-menu{border:1px solid var(--line);background:var(--surface);color:var(--text);height:42px;border-radius:13px;padding:0 13px}.avatar{width:46px;height:46px;padding:0;border-radius:50%;font-size:12px;font-weight:800;overflow:hidden;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);box-shadow:0 4px 14px rgba(10,25,18,.08)}.mobile-menu{display:none}
.page{padding:32px 34px 28px;max-width:1300px;margin:0 auto}
.hero{background:var(--surface);border:1px solid var(--line);border-radius:30px;padding:34px;display:grid;grid-template-columns:1.35fr .65fr;gap:20px;box-shadow:var(--shadow)}
.eyebrow{text-transform:uppercase;letter-spacing:.11em;font-size:10px;font-weight:800;color:var(--muted)}
.hero h1{font-size:48px;line-height:.98;letter-spacing:-.055em;margin:10px 0 14px;max-width:600px}.hero p{color:var(--muted);font-size:15px;line-height:1.6;max-width:650px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.pill-btn{border:0;border-radius:14px;padding:12px 16px;font-weight:800;background:var(--accent);color:#fff}.pill-btn.secondary{background:var(--accent-2);color:var(--text)}
.hero-card{background:var(--accent-2);border-radius:24px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;min-height:240px}.hero-card .cover-lg{width:100%;aspect-ratio:1;border-radius:20px;background:linear-gradient(140deg,var(--accent),#244f3f);color:#fff;display:grid;place-items:center;font-size:42px;font-weight:900;letter-spacing:-.08em}
.section{margin-top:28px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:14px}.section-head h2{margin:0;font-size:25px;letter-spacing:-.04em}.section-head span{font-size:12px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:14px;min-width:0}.card-cover{aspect-ratio:1;border-radius:16px;background:var(--surface-2);display:grid;place-items:center;font-weight:900;color:var(--accent);font-size:28px;margin-bottom:12px}.card-title{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.track-list{display:grid;gap:6px}.track{display:grid;grid-template-columns:46px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px;border-radius:16px}.track:hover{background:var(--surface)}.track-cover{width:46px;height:46px;border-radius:13px;background:var(--accent-2);display:grid;place-items:center;font-size:13px;font-weight:900;overflow:hidden}.track-cover.has-cover{background:var(--surface-2)}.track-cover img{width:100%;height:100%;display:block;object-fit:cover}.track-main{min-width:0}.track-name{font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-artist{font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-meta{font-size:12px;color:var(--muted)}.track-actions{display:flex;gap:5px}.ghost-btn{border:0;background:transparent;color:var(--muted);padding:8px;border-radius:10px}.ghost-btn:hover{background:var(--surface-2);color:var(--text)}
.empty{border:1px dashed #cfd8d1;background:rgba(255,255,255,.65);padding:36px;border-radius:20px;text-align:center}.empty h3{margin:0 0 8px}.empty p{margin:0;color:var(--muted);font-size:13px}
.player{position:fixed;left:0;right:0;bottom:0;height:108px;background:rgba(255,255,255,.98);backdrop-filter:blur(22px);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(240px,1fr) minmax(440px,1.65fr) minmax(240px,1fr);align-items:center;gap:24px;padding:10px 22px 12px;z-index:50;box-shadow:0 -10px 35px rgba(10,25,18,.06)}
.now-playing{display:flex;gap:12px;align-items:center;min-width:0}.cover.small{width:62px;height:62px;border-radius:14px;flex:0 0 auto;font-size:13px;overflow:hidden}.cover.small.has-cover{background:var(--surface-2)}.cover.small img{width:100%;height:100%;display:block;object-fit:cover}.now-meta{min-width:0}.track-title{font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.track-artist{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.player-center{min-width:0;display:flex;flex-direction:column;justify-content:center}.player-controls{display:flex;justify-content:center;align-items:center;gap:10px;height:50px}.player-btn,.play-main{border:0;background:transparent;color:var(--text);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:.16s ease}.player-btn:hover{background:var(--surface-2);transform:translateY(-1px)}.player-tool{font-size:21px;font-weight:700}.play-main{width:52px;height:52px;background:var(--text);color:var(--surface);border:1px solid var(--text);box-shadow:0 8px 20px rgba(10,25,18,.14)}.play-main:hover{transform:scale(1.05);box-shadow:0 10px 24px rgba(10,25,18,.18)}.play-main .play-icon,.play-main .pause-icon{display:grid;place-items:center;width:100%;height:100%}.play-main svg{width:21px;height:21px;fill:currentColor}.play-main .play-icon{padding-left:2px}.play-main:active{transform:scale(.98)}
.progress-row{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;align-items:center;gap:10px;font-size:10px;color:var(--muted);margin-top:2px}.digital-time{font-family:"SFMono-Regular","Roboto Mono","Courier New",monospace;font-variant-numeric:tabular-nums;letter-spacing:.08em;font-weight:800;font-size:10px;color:var(--text);text-align:center;background:var(--surface-2);border-radius:6px;padding:4px 5px;min-width:40px}.progress-row input,.player-right input{width:100%;accent-color:var(--accent)}#progress{-webkit-appearance:none;appearance:none;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent) 0%,var(--surface-2) 0%,var(--surface-2) 100%);outline:none;cursor:pointer}#progress::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);box-shadow:0 2px 7px rgba(0,0,0,.18)}#progress::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);box-shadow:0 2px 7px rgba(0,0,0,.18)}
.player-right{display:flex;align-items:center;gap:10px;justify-content:flex-end}.volume-control{display:flex;align-items:center;gap:8px;min-width:150px;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.volume-btn{border:0;background:transparent;color:var(--text);width:30px;height:30px;border-radius:9px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}.volume-btn:hover{background:var(--surface-2)}.volume-btn svg{width:18px;height:18px;fill:currentColor}.player-right #volume{width:105px;max-width:none;height:4px;margin:0}#volume{-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,var(--accent) 0%,var(--accent) 100%,var(--surface-2) 100%,var(--surface-2) 100%);border-radius:999px;outline:none;cursor:pointer}#volume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--text);border:2px solid var(--surface);box-shadow:0 1px 5px rgba(0,0,0,.18)}#volume::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--text);border:2px solid var(--surface);box-shadow:0 1px 5px rgba(0,0,0,.18)}
.toast{position:fixed;left:50%;transform:translate(-50%,20px);bottom:110px;background:var(--accent);color:#fff;padding:11px 16px;border-radius:14px;font-size:13px;opacity:0;pointer-events:none;transition:.22s;z-index:100}.toast.show{opacity:1;transform:translate(-50%,0)}
.modal-backdrop{position:fixed;inset:0;background:rgba(8,18,13,.32);backdrop-filter:blur(4px);z-index:80}.modal{position:fixed;right:24px;top:88px;width:min(470px,calc(100vw - 30px));background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:20px;z-index:90;box-shadow:0 30px 80px rgba(0,0,0,.18)}.modal-head{display:flex;justify-content:space-between;align-items:flex-start}.modal-head h2{margin:6px 0 0;font-size:26px}.close-btn{border:0;background:var(--surface-2);border-radius:12px;width:36px;height:36px;font-size:22px;color:var(--text)}.settings-list{margin-top:15px}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}.setting-row strong{display:block}.setting-row small{display:block;color:var(--muted);margin-top:4px}.setting-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}.text-btn{border:0;background:var(--accent-2);color:var(--text);padding:9px 11px;border-radius:11px;font-weight:750}
.dark{--bg:#0c1110;--surface:#141b18;--surface-2:#1a2721;--text:#edf7f0;--muted:#a3b1a8;--line:#2a3931;--accent:#bceccf;--accent-2:#153426}.dark .topbar{background:rgba(12,17,16,.92)}.dark .add-button{color:#0c1110}.dark .play-main{color:#0c1110;background:var(--accent);border-color:var(--accent)}.dark .play-main svg{fill:#0c1110}.dark .modal-backdrop{background:rgba(0,0,0,.52)}
@media(max-width:980px){.sidebar{width:230px}.main{margin-left:230px;width:calc(100% - 230px)}.hero{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.player{grid-template-columns:1fr 1.2fr}.player-right{display:none}}
@media(max-width:760px){:root{--player-h:94px}.sidebar{transform:translateX(-105%);transition:.22s;width:280px;bottom:0;box-shadow:0 20px 50px rgba(0,0,0,.14)}.sidebar.open{transform:translateX(0)}.main{margin-left:0;width:100%}.topbar{padding:0 15px}.mobile-menu{display:block}.search-wrap{min-width:0}.page{padding:22px 15px}.hero{padding:24px;border-radius:24px}.hero h1{font-size:40px}.cards{grid-template-columns:1fr 1fr}.track{grid-template-columns:46px minmax(0,1fr) auto}.track-meta{display:none}.player{padding:9px 12px 8px;grid-template-columns:110px 1fr;gap:8px}.player-center{order:2}.now-playing{order:1}.player-right{display:none}.progress-row{grid-template-columns:38px minmax(0,1fr) 38px}.digital-time{font-size:9px;padding:3px 4px}.player-controls{gap:5px}.player-tool{width:31px;height:31px;font-size:19px}.play-main{width:44px;height:44px}.play-main svg{width:19px;height:19px}.brand{padding-top:15px}}
@media(max-width:480px){.hero h1{font-size:34px}.cards{grid-template-columns:1fr}.top-actions{display:none}.section-head h2{font-size:22px}.player-center{display:block}.now-playing .now-meta{display:none}.player{grid-template-columns:58px 1fr;padding-left:9px;padding-right:9px}.volume-control{display:none}.cover.small{width:52px;height:52px;border-radius:12px}.player-controls{gap:2px}.progress-row{grid-template-columns:34px minmax(0,1fr) 34px;gap:7px}.digital-time{font-size:8px}}
\n\n.update-banner{position:fixed;right:22px;bottom:calc(var(--player-h) + 22px);z-index:60;display:flex;align-items:center;gap:18px;padding:14px 16px;border:1px solid var(--line);background:var(--surface);box-shadow:0 14px 40px rgba(0,0,0,.14);border-radius:18px;max-width:min(420px,calc(100vw - 32px));}\n.update-banner[hidden]{display:none}\n.update-banner strong,.update-banner span{display:block}\n.update-banner span{font-size:13px;color:var(--muted);margin-top:2px}\n.update-banner .pill-btn{padding:10px 14px;white-space:nowrap}\n@media (max-width:720px){.update-banner{left:16px;right:16px;bottom:calc(var(--player-h) + 12px);justify-content:space-between}}\n

.avatar{overflow:hidden;padding:0}
.avatar img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}
.cover.small:not(.has-cover) img{object-fit:cover}

.file-input{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;left:-10000px;top:auto;}
.avatar{align-self:center;transform:translateY(0);}
.avatar img{object-position:center center;}
@media(max-width:480px){.avatar{width:42px;height:42px;margin-top:0;}.topbar{min-height:76px;align-items:center;}}


/* v1.0.7: avatar alignment and scrollable sidebar */
.sidebar{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:thin;}
.sidebar::-webkit-scrollbar{width:7px}.sidebar::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}.sidebar::-webkit-scrollbar-track{background:transparent}
.avatar{transform:translateY(-4px)}
@media(max-width:480px){.avatar{transform:translateY(-4px)}}


/* v1.0.8: iPhone safe-area + professional full-screen player */
:root{--ios-top:env(safe-area-inset-top,0px);--ios-bottom:env(safe-area-inset-bottom,0px)}
.topbar{padding-top:var(--ios-top)}
.avatar{transform:translateY(-6px)}
.full-player{position:fixed;inset:0;z-index:120;background:linear-gradient(180deg,var(--bg) 0%,var(--surface) 100%);padding:calc(16px + var(--ios-top)) 20px calc(18px + var(--ios-bottom));display:flex;flex-direction:column;align-items:center;overflow:auto;overscroll-behavior:contain}
.full-player[hidden]{display:none}
.full-player-head{width:min(720px,100%);display:flex;align-items:center;justify-content:space-between;min-height:44px}
.full-player-close,.full-player-queue{border:0;background:var(--surface-2);color:var(--text);width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:23px;border:1px solid var(--line)}
.full-player-art-wrap{width:min(82vw,460px);margin:clamp(14px,4vh,42px) auto 24px;display:flex;justify-content:center}
.full-player-art{width:100%;aspect-ratio:1;border-radius:30px;overflow:hidden;background:var(--surface-2);box-shadow:0 24px 70px rgba(10,25,18,.16);border:1px solid var(--line)}
.full-player-art img{width:100%;height:100%;display:block;object-fit:cover}
.full-player-meta{width:min(720px,100%);text-align:left}
.full-player-title{font-size:clamp(24px,4vw,34px);font-weight:900;letter-spacing:-.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.full-player-artist{margin-top:7px;color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.full-player-progress{width:min(720px,100%);margin-top:24px}
#fullProgress{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent) 0%,var(--surface-2) 0%,var(--surface-2) 100%);outline:none}
#fullProgress::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);box-shadow:0 3px 10px rgba(0,0,0,.18)}
#fullProgress::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);box-shadow:0 3px 10px rgba(0,0,0,.18)}
.full-player-times{display:flex;justify-content:space-between;margin-top:10px}
.full-player-controls{width:min(620px,100%);display:flex;justify-content:center;align-items:center;gap:clamp(8px,3vw,18px);margin:18px 0 24px}
.full-tool,.full-play{border:0;display:grid;place-items:center;background:transparent;color:var(--text);width:48px;height:48px;border-radius:50%;font-size:25px}
.full-tool.large{font-size:36px}
.full-play{width:72px;height:72px;background:var(--text);color:var(--surface);box-shadow:0 14px 30px rgba(10,25,18,.18)}
.full-play svg{width:27px;height:27px;fill:currentColor}
.full-play .play-icon{padding-left:3px;display:grid;place-items:center}
.full-player-bottom{width:min(560px,100%);display:flex;align-items:center;gap:12px;margin-top:auto;padding-bottom:4px}
.full-volume-btn{border:0;background:transparent;color:var(--text);width:34px;height:34px;border-radius:9px}
#fullVolume{-webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent) 100%,var(--surface-2) 100%,var(--surface-2) 100%)}
#fullVolume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:var(--text);border:2px solid var(--surface)}
#fullVolume::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--text);border:2px solid var(--surface)}
.full-queue-label{font-size:11px;color:var(--muted);min-width:56px;text-align:right}
.player{bottom:calc(var(--ios-bottom) + 8px);border-radius:20px 20px 0 0}
body{padding-bottom:calc(var(--player-h) + var(--ios-bottom) + 8px)}
@media(max-width:760px){
  .topbar{height:calc(76px + var(--ios-top));align-items:center;padding-left:15px;padding-right:12px}
  .top-actions{display:flex}
  .top-actions .icon-button{display:none}
  .avatar{width:42px;height:42px;margin-top:0;transform:translateY(-6px)}
  .player{bottom:calc(var(--ios-bottom) + 8px);}
  .player .now-playing,.player .player-center{transform:translateY(-4px)}
}
@media(max-width:480px){
  .full-player{padding-left:16px;padding-right:16px}
  .full-player-art-wrap{width:min(82vw,360px);margin-top:20px}
  .full-player-meta{padding:0 2px}
  .full-player-controls{margin-top:14px}
  .full-player-bottom{margin-top:12px}
}

/* v1.0.9: iPhone sidebar scrolling + balanced bottom mini-player */
.sidebar{
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
  scrollbar-width:thin;
  min-height:0;
}
@media(max-width:760px){
  .sidebar{
    height:100dvh;
    max-height:100dvh;
    padding-bottom:calc(22px + var(--ios-bottom));
  }
  .player{
    left:10px;
    right:10px;
    bottom:0;
    width:auto;
    border-radius:20px;
    padding-bottom:calc(8px + var(--ios-bottom));
    box-shadow:0 -10px 35px rgba(10,25,18,.08), 0 2px 18px rgba(10,25,18,.05);
  }
  body{padding-bottom:calc(var(--player-h) + 12px + var(--ios-bottom));}
}
@media(max-width:480px){
  .sidebar{height:100dvh;max-height:100dvh;}
  .player{left:8px;right:8px;border-radius:20px;padding-bottom:calc(7px + var(--ios-bottom));}
}

/* v1.1.0: likes + playlists */
.like-btn{font-size:19px;line-height:1;color:var(--muted);transition:transform .12s ease,color .12s ease,background .12s ease;position:relative;z-index:3;touch-action:manipulation}
.like-btn:hover{transform:scale(1.08)}
.like-btn.liked{color:#e33434;background:rgba(227,52,52,.08)}
.playlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin-top:16px}
.playlist-card{border:1px solid var(--line);background:var(--surface);border-radius:22px;padding:0;text-align:left;overflow:hidden;color:var(--text);cursor:pointer;box-shadow:0 10px 30px rgba(10,25,18,.05);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.playlist-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(10,25,18,.1);border-color:var(--accent)}
.playlist-cover{height:150px;display:grid;place-items:center;font-size:58px;font-weight:900;background:linear-gradient(135deg,var(--accent-2),var(--surface-2))}
.playlist-card-main{padding:14px 15px 16px}.playlist-card-main strong{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-card-main span{display:block;margin-top:5px;color:var(--muted);font-size:12px}
.playlist-head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.pill-btn.danger{background:rgba(227,52,52,.08);color:#d72f2f;border-color:rgba(227,52,52,.16)}
.back-btn{border:0;background:transparent;color:var(--muted);font:inherit;font-weight:750;padding:0;cursor:pointer}
.playlist-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);backdrop-filter:blur(5px);z-index:110}.playlist-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,calc(100vw - 26px));max-height:min(82vh,780px);overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:26px;z-index:120;padding:20px;box-shadow:0 30px 90px rgba(0,0,0,.25)}.playlist-modal[hidden],.playlist-modal-backdrop[hidden]{display:none}
.playlist-name-label{display:block;margin-top:15px;font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.playlist-name-input{width:100%;box-sizing:border-box;margin-top:7px;padding:13px 14px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:14px;font:inherit;outline:none}.playlist-name-input:focus{border-color:var(--accent)}
.playlist-select-head{display:flex;justify-content:space-between;align-items:center;margin:17px 0 8px}.playlist-track-picker{max-height:45vh;overflow:auto;border:1px solid var(--line);border-radius:18px;padding:7px;-webkit-overflow-scrolling:touch}.playlist-pick-row{display:grid;grid-template-columns:22px 46px minmax(0,1fr);align-items:center;gap:10px;padding:8px;border-radius:14px;cursor:pointer}.playlist-pick-row:hover{background:var(--surface-2)}.playlist-pick-row input{width:18px;height:18px;accent-color:var(--accent)}.playlist-pick-cover .cover.small{width:46px;height:46px;border-radius:12px}.playlist-pick-row strong,.playlist-pick-row small{display:block}.playlist-pick-row small{margin-top:3px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:15px}
@media(max-width:600px){.playlist-grid{grid-template-columns:1fr 1fr}.playlist-modal{padding:15px;border-radius:22px}.playlist-track-picker{max-height:42vh}.playlist-head-actions{justify-content:flex-end}.playlist-head-actions .pill-btn{padding:9px 11px;font-size:12px}}
@media(max-width:420px){.playlist-grid{grid-template-columns:1fr}.playlist-card{display:grid;grid-template-columns:100px 1fr}.playlist-cover{height:100%;min-height:100px;font-size:38px}.playlist-card-main{align-self:center}}


/* v1.1.1: centered home branding + cat play/pause controls */
.hero-brand-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;min-height:260px;overflow:hidden}
.home-brand-logo{width:min(240px,72%);height:auto;display:block;margin:0 auto;object-fit:contain;filter:drop-shadow(0 18px 28px rgba(10,25,18,.14))}
.cat-control{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:inherit;overflow:hidden}
.cat-state{position:absolute;inset:7%;width:86%;height:86%;object-fit:cover;border-radius:50%;transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1),filter .42s ease;will-change:opacity,transform,filter;backface-visibility:hidden}.cat-state-play{filter:saturate(.98) brightness(.99)}.cat-state-pause{filter:saturate(.98) brightness(1)}
.cat-state-play{opacity:0;transform:scale(.92)}
.cat-state-pause{opacity:1;transform:scale(1)}
.cat-control.is-playing .cat-state-play{opacity:1;transform:scale(1)}
.cat-control.is-playing .cat-state-pause{opacity:0;transform:scale(.96)}
.cat-control.is-paused .cat-state-play{opacity:0;transform:scale(.96)}
.cat-control.is-paused .cat-state-pause{opacity:1;transform:scale(1)}
.play-main,.full-play{padding:0;display:grid;place-items:center}
.cat-control.full-cat-control .cat-state{inset:7%;width:86%;height:86%}
@media(max-width:760px){.hero-brand-card{min-height:220px}.home-brand-logo{width:min(210px,70vw)}}
@media(max-width:480px){.hero-brand-card{min-height:200px;padding:18px}.home-brand-logo{width:min(190px,68vw)}}

/* v1.1.3: smoother animated cat states for every platform */
@media (prefers-reduced-motion: reduce){.cat-state{transition:none!important}}

/* v1.2.6 final dark-mode player control visibility */
.dark .player-controls .player-btn,
.dark .player-controls .player-tool {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  opacity: 1 !important;
}
.dark .player-controls .player-btn svg,
.dark .player-controls .player-tool svg {
  fill: #000 !important;
  stroke: #000 !important;
}


/* SpatyCat v1.3.3 Update button polish */
#installBtn{border-radius:999px;padding:10px 16px;font-weight:700;display:inline-flex;align-items:center;gap:6px;cursor:pointer;min-width:84px;justify-content:center;}
#installBtn:disabled{opacity:.65;cursor:wait;}
.update-banner{display:none !important;}