:root{color-scheme:dark;--bg:#0a0a0d;--surface:#15151b;--surface2:#202028;--line:#2a2a32;--text:#f2f2f4;--muted:#a6a6b0;--accent:#d6d2e2;--rose:#c9a1ce}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:radial-gradient(ellipse at 50% 30%,#24202f 0%,#0b0b0d 65%);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text)}button,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #d9bde9;outline-offset:3px}button:disabled{opacity:.42;cursor:default}[hidden]{display:none!important}
.app-shell{width:min(100%,480px);height:100dvh;min-height:400px;margin:auto;background:var(--bg);display:flex;flex-direction:column;overflow:hidden;position:relative;box-shadow:0 0 70px #0008}
.app-header{flex:none;display:flex;align-items:center;justify-content:space-between;padding:23px 21px 13px;padding-top:max(22px,env(safe-area-inset-top));background:var(--bg);z-index:2}
.wordmark{font-size:23px;font-weight:850;letter-spacing:.22em;border:0;padding:0;background:transparent;line-height:1}.wordmark-dot{color:#bc91c3}.studio-label{font-size:9px;letter-spacing:.19em;color:#888892}.header-right{display:flex;align-items:center;gap:14px}.icon-button{border:1px solid #3a3a44;background:#1c1c22;min-width:38px;min-height:33px;padding:5px 9px;border-radius:10px;font-size:11px;font-weight:750;letter-spacing:.08em}
.page-content{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 19px 26px;scrollbar-width:thin;scrollbar-color:#34343a transparent}.eyebrow{font-size:9px;font-weight:800;color:#a5a5b0;letter-spacing:.19em;text-transform:uppercase}.page-title{font-size:29px;font-weight:800;line-height:1.12;letter-spacing:-.055em;margin:9px 0 19px}.subheading{font-size:14px;font-weight:750;letter-spacing:-.026em}.lead{font-size:12px;line-height:1.7;color:#b4b4bf;margin:8px 0 20px}.caption{font-size:11px;line-height:1.55;color:var(--muted)}.hint{border:1px solid #303039;border-radius:14px;padding:14px 15px;background:#17171d;color:#b7b6c1;font-size:11px;line-height:1.68;margin:16px 0}
.hero{height:225px;width:100%;border-radius:18px;border:1px solid #ffffff24;padding:22px;background:radial-gradient(circle at 83% 15%,#bd8ca0 0%,#684f81 34%,#352542 66%,#191522 100%);overflow:hidden;text-align:left;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between}
.hero:before{content:"";position:absolute;border-radius:50%;width:260px;height:260px;right:-80px;top:-110px;border:1px solid #ffffff30;box-shadow:0 0 0 32px #ffffff0a,0 0 0 69px #ffffff0a,0 0 0 100px #ffffff08}.hero:after{content:"";position:absolute;right:-100px;bottom:-152px;width:290px;height:240px;border-radius:50%;background:#c695b870;filter:blur(50px)}.hero>*{position:relative;z-index:1}.hero-top{font-size:10px;font-weight:700;letter-spacing:.15em;color:#f5dbe9}.hero-name{font-size:45px;line-height:.95;font-weight:900;letter-spacing:-.077em}.hero-foot{display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px}.hero-pill{font-weight:800;font-size:11px;color:#25202a;background:#f5f0f5;padding:10px 14px;border-radius:30px}.hero-note{font-size:11px;color:#f3e7ee}
.section-head{margin:24px 0 12px;display:flex;align-items:center;justify-content:space-between}.text-button{border:0;background:none;color:#a9a9b6;font-size:11px;padding:6px}.album-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.album-card{border:0;background:none;text-align:left;padding:0;min-width:0}.cover{width:100%;aspect-ratio:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left;padding:15px;border:1px solid #ffffff21;border-radius:13px;position:relative;overflow:hidden;isolation:isolate}.cover:before{content:"";position:absolute;top:-43%;left:-46%;width:120%;height:115%;border:1px solid #ffffff40;border-radius:50%;transform:rotate(26deg);box-shadow:30px 35px 0 #ffffff09,60px 70px 0 #ffffff07}.cover:after{content:"";position:absolute;inset:auto -25% -55% 20%;height:75%;border-radius:50%;background:#ffffff16;filter:blur(26px);z-index:-1}.cover.rose{background:linear-gradient(145deg,#aa789a,#704275 43%,#30253f 82%,#1e1b2c)}.cover.blue{background:linear-gradient(145deg,#7991ba,#3a4f77 45%,#1b263c 86%)}.cover.graphite{background:linear-gradient(145deg,#727785,#3b3c4b 47%,#17181f 90%)}.cover.amber{background:linear-gradient(145deg,#a2735d,#5f3940 50%,#252029)}.cover.indigo{background:linear-gradient(145deg,#6f608f,#323351 48%,#171a29)}.cover-title{font-size:clamp(19px,6vw,28px);line-height:.97;letter-spacing:-.07em;font-weight:900;overflow-wrap:anywhere;text-shadow:0 2px 12px #0005}.cover-meta{position:relative;margin-top:8px;font-size:10px;letter-spacing:.18em;font-weight:650;color:#ffffffb9}.album-label{font-size:12px;font-weight:750;margin-top:8px;line-height:1.3}.album-sub{font-size:11px;margin-top:3px;color:#92929f}.album-card .cover-title{position:relative}.album-card small{color:#b3b3bc;font-size:10px}.status-chip{margin-top:6px;display:inline-block;font-size:9px;color:#ded1e6;background:#2d2934;border-radius:5px;padding:4px 6px}
.artist-row{width:100%;display:flex;align-items:center;gap:12px;margin:0 0 9px;padding:12px;background:#17171d;border:1px solid #2a2a33;border-radius:13px;text-align:left}.avatar{flex:none;width:49px;height:49px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:850;letter-spacing:-.05em;border:1px solid #ffffff18}.avatar.rose{background:linear-gradient(140deg,#af7f9d,#442b55)}.avatar.blue{background:linear-gradient(140deg,#8393b5,#263554)}.avatar.amber{background:linear-gradient(140deg,#b27b60,#4d2a3b)}.avatar.indigo{background:linear-gradient(140deg,#7377a1,#29263e)}.avatar.graphite{background:linear-gradient(140deg,#92939e,#353543)}.artist-name{font-size:13px;font-weight:750}.artist-tag{font-size:11px;color:#9999a6;margin-top:4px}.arrow{color:#858592;font-size:24px;margin-left:auto}
.back-button{border:0;background:none;padding:6px 0 11px;font-size:12px;color:#b6b5c1}.detail-cover{width:100%;max-height:265px;aspect-ratio:1.4;border-radius:16px;margin:2px 0 17px}.detail-cover .cover-title{font-size:43px}.detail-heading{display:flex;align-items:center;gap:10px;justify-content:space-between}.detail-heading h1{font-size:26px;font-weight:820;letter-spacing:-.05em;margin:0}.favorite{border:1px solid #40404b;min-width:41px;height:41px;border-radius:50%;background:#1d1d24;font-size:22px;flex:none}.favorite.active{color:#e3a8c8}.artist-banner{min-height:165px;padding:25px;border-radius:16px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;margin:2px 0 18px;border:1px solid #ffffff1e;background:linear-gradient(140deg,#3f3c50,#17171e)}.artist-banner.rose{background:linear-gradient(140deg,#875e84,#27202f)}.artist-banner.blue{background:linear-gradient(140deg,#586c8f,#20283c)}.artist-banner.amber{background:linear-gradient(140deg,#8c5a51,#272029)}.artist-banner.indigo{background:linear-gradient(140deg,#626085,#1d1b2c)}.artist-banner.graphite{background:linear-gradient(140deg,#676773,#202025)}.artist-banner h1{font-size:32px;font-weight:850;letter-spacing:-.06em;margin:8px 0 0}.track-list{margin-top:10px}.track-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid #282831;min-height:66px}.track-main{display:flex;align-items:center;flex:1;min-width:0;gap:12px;border:0;background:none;text-align:left;padding:11px 2px}.track-number{flex:none;color:#777884;width:21px;text-align:center;font-size:12px}.track-details{flex:1;min-width:0}.track-title{font-size:12px;font-weight:700;line-height:1.4;display:block;overflow-wrap:anywhere}.track-sub{font-size:10px;color:#90909b;display:block;margin-top:4px}.track-ctrl{font-size:18px;color:#c8c0d0;flex:none;width:21px}.import-button{border:1px solid #40404d;background:#21212b;border-radius:9px;font-size:11px;min-width:35px;height:34px;padding:5px 8px;flex:none}.import-button.loaded{border-color:#55655c;color:#c3e5ce;background:#19251c}
.mini-player{padding:9px 13px;flex:none;background:#24222b;display:flex;align-items:center;gap:10px;border-top:1px solid #3d3744;min-height:65px}.mini-art{width:44px;height:44px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none;background:linear-gradient(140deg,#906b9b,#312639)}.mini-info{flex:1;min-width:0;text-align:left;border:0;background:none;padding:0}.mini-name{font-size:12px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.mini-sub{font-size:10px;margin-top:5px;color:#aaa4b1;display:block}.mini-button{height:40px;min-width:38px;background:none;border:0;font-size:22px}.mini-progress{height:2px;background:#ffffff1b;position:absolute;left:0;right:0;top:0}.mini-progress>span{background:#e5d6e9;height:100%;display:block;width:0%}
.bottom-nav{padding:6px 8px max(9px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #272730;background:#101014;flex:none;z-index:3}.nav-item{border:0;background:none;color:#878792;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:51px;font-size:10px}.nav-item.active{color:#f1edf6}.nav-icon{font-size:24px;line-height:1}
.player-sheet{position:absolute;z-index:6;inset:0;background:linear-gradient(160deg,#2a2430,#0c0c10 51%,#09090c);overflow:auto;padding:23px 24px max(30px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;min-height:0}.sheet-top{width:100%;display:flex;align-items:center;justify-content:space-between;margin-bottom:27px}.sheet-top button{border:0;background:none;font-size:22px;padding:5px}.sheet-cover{width:min(100%,290px);aspect-ratio:1;border-radius:19px;box-shadow:0 15px 50px #0009;margin:0 auto 23px}.sheet-cover .cover-title{font-size:45px}.sheet-info{width:100%;text-align:left}.sheet-info h2{font-size:21px;letter-spacing:-.04em;margin:0 0 4px;overflow-wrap:anywhere}.sheet-info p{font-size:12px;color:#aba3b0;margin:0 0 18px}.seekbar{width:100%;accent-color:#e2d4e7;cursor:pointer}.time-row{display:flex;justify-content:space-between;color:#9f99a4;font-size:10px;margin-top:6px;width:100%}.player-controls{display:flex;align-items:center;justify-content:center;gap:29px;width:100%;margin:29px 0 18px}.player-controls button{border:0;background:none;font-size:28px;min-width:40px;min-height:40px}.player-controls .main-play{background:#f3eef5;color:#19141d;border-radius:50%;width:64px;height:64px;font-size:25px;font-weight:700}.sheet-note{font-size:11px;color:#a6a0ae;text-align:center;line-height:1.65;margin-top:10px}.status{display:inline-block;font-size:10px;border:1px solid #55475d;padding:5px 7px;border-radius:8px;color:#d9c6e1}
.search-box{width:100%;border:1px solid #393942;border-radius:13px;padding:14px 15px;background:#1a1a22;color:#f4f4f6;margin:0 0 19px;font-size:13px}.search-box::placeholder{color:#888895}.empty{font-size:13px;line-height:1.7;color:#aba9b6;padding:22px 14px;border:1px dashed #42414a;border-radius:14px;margin-top:15px}.toast{position:absolute;bottom:155px;left:22px;right:22px;z-index:9;background:#e3dce6;color:#19141c;font-size:12px;font-weight:600;line-height:1.5;padding:13px;border-radius:12px;box-shadow:0 8px 36px #0009;text-align:center}.songsearch{font-size:11px;color:#aaa9b6}
@media(min-width:520px){body{padding:18px}.app-shell{height:min(900px,calc(100dvh - 36px));border-radius:29px;border:1px solid #45434d}.cover-title{font-size:27px}}
@media(max-height:650px){.hero{height:175px}.sheet-cover{width:min(100%,210px)}.player-controls{margin:15px 0}}