:root {
  --ink:#17223b;
  --muted:#7a8294;
  --line:#e8eaf0;
  --soft:#f7f7fa;
  --pink:#ff315f;
  --pink-soft:#fff0f4;
  --navy:#20314f;
  --white:#fff;
  --shadow:0 18px 55px rgba(32,49,79,.12);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--ink);background:#f3f5f8}
button{font:inherit}
.shell{min-height:100vh;display:grid;place-items:center;padding:24px}
.app{width:min(100%,420px);min-height:760px;background:linear-gradient(180deg,#fff 0%,#fffafd 100%);border-radius:30px;box-shadow:var(--shadow);overflow:hidden;position:relative}
.screen{min-height:760px;padding:24px 22px 28px;display:flex;flex-direction:column;gap:20px}
.hero{background:linear-gradient(160deg,#eef3ff 0%,#fff3f8 52%,#fff 100%)}
.topbar{display:flex;align-items:center;justify-content:space-between;min-height:32px}
.brand{font-size:12px;font-weight:700;color:var(--pink);background:var(--pink-soft);padding:6px 10px;border-radius:999px}
.progress{display:flex;gap:7px;align-items:center;justify-content:center;flex:1}
.progress span{width:8px;height:8px;border-radius:50%;background:#e0e3e9}
.progress span.on{background:var(--pink)}
.back{width:36px;height:36px;border:0;background:transparent;border-radius:50%;font-size:24px;color:var(--ink);cursor:pointer}
.kicker{font-size:13px;color:var(--muted);font-weight:600}
h1,h2,h3,p{margin:0}
h1{font-size:31px;line-height:1.16;letter-spacing:-.5px}
h2{font-size:26px;line-height:1.25}
h3{font-size:16px}
.lede{color:var(--muted);line-height:1.7;font-size:14px}
.radar-mark{height:160px;display:grid;place-items:center;position:relative}
.radar{width:116px;height:116px;border:1px solid #dfe3eb;border-radius:50%;position:relative;display:grid;place-items:center}
.radar:before,.radar:after{content:"";position:absolute;border:1px solid #e9ebf0;border-radius:50%}
.radar:before{width:78px;height:78px}.radar:after{width:40px;height:40px}
.radar-dot{width:12px;height:12px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 9px rgba(255,49,95,.12)}
.radar-line{position:absolute;width:54px;height:1px;background:linear-gradient(90deg,var(--pink),transparent);transform-origin:left center;transform:rotate(-28deg);left:58px;top:58px}
.stat{display:inline-flex;align-self:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:13px;color:var(--muted)}
.stack{display:grid;gap:12px}
.btn{border:0;border-radius:16px;padding:15px 18px;font-weight:750;cursor:pointer;transition:.15s transform,.15s opacity;display:flex;align-items:center;justify-content:center;gap:8px}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--pink);color:#fff}
.btn-dark{background:var(--navy);color:#fff}
.btn-secondary{background:#fff;color:var(--ink);border:1px solid #cfd4df}
.btn-ghost{background:var(--soft);color:var(--ink)}
.small{padding:11px 14px;border-radius:13px;font-size:14px}
.recent{margin-top:auto}
.recent-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:0;background:#f2f4f8;color:#4d566b;border-radius:999px;padding:8px 12px;font-size:13px}
.option-grid{display:grid;gap:10px}
.option-grid.cols-2{grid-template-columns:1fr 1fr}
.option{padding:15px 14px;border:1px solid var(--line);background:#fafbfc;border-radius:14px;color:var(--ink);font-weight:650;cursor:pointer;text-align:center}
.option.selected{border-color:var(--pink);background:var(--pink-soft);color:#df1645}
.pill-grid{display:flex;gap:10px;flex-wrap:wrap}
.pill{border:1px solid var(--line);background:#fafbfc;border-radius:999px;padding:10px 15px;font-size:14px;cursor:pointer}
.pill.selected{background:var(--pink-soft);border-color:#ffc0cf;color:#df1645;font-weight:700}
.spacer{flex:1}
.footer-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;margin-top:auto}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px}
.artist-card{display:grid;gap:16px}
.episode{display:inline-flex;width:max-content;background:#eef2ff;color:#5c6aa0;border-radius:999px;padding:6px 9px;font-size:12px;font-weight:700}
.artist-name{font-size:29px;font-weight:850;line-height:1.15}
.tags{display:flex;gap:7px;flex-wrap:wrap}.tag{background:#f1f3f6;border-radius:999px;padding:7px 10px;font-size:12px;color:#596174}
.reason{display:grid;gap:8px}.reason p{line-height:1.7;font-size:14px;color:#424b60}
.signal-list{display:flex;flex-wrap:wrap;gap:8px}.signal{font-size:12px;background:#fff5e8;color:#9a6112;border-radius:9px;padding:7px 9px}
.subscriber{font-size:12px;color:var(--muted);padding-top:4px}
.song-list{display:grid;gap:11px}.song{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;background:#f8f9fb;border:1px solid #eef0f3;border-radius:15px;padding:14px}.song-no{font-size:17px;font-weight:850;color:#a2a8b5}.song-title{font-weight:800;margin-bottom:5px}.song-comment{font-size:13px;color:#666f82;line-height:1.55}
.notice{background:#fff8e9;border:1px solid #ffe4a8;color:#8c641e;border-radius:14px;padding:12px 14px;font-size:12px;line-height:1.6}
.empty{display:grid;place-items:center;text-align:center;gap:12px;min-height:420px}.empty .emoji{font-size:48px}
.finish{display:grid;place-items:center;text-align:center;gap:16px;flex:1}.finish-icon{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--pink-soft);font-size:34px}
.micro{font-size:12px;color:#a0a6b3;line-height:1.6;text-align:center}
@media(max-width:500px){.shell{padding:0}.app{width:100%;min-height:100vh;border-radius:0}.screen{min-height:100vh;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}}