:root{
  --bg:#1a1a1a;
  --fg:#f0e6d2;
  --soft:#999;
  --line:#333;
  --red:#c0392b;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:Georgia,"Songti SC","Noto Serif SC",serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.wrap{max-width:520px;margin:0 auto;padding:48px 22px 60px}

/* 加载屏：与页面同底色、弱化文字 */
.loading{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  color:var(--soft);font-size:13px;letter-spacing:.2em;opacity:.55
}

/* 唱片 */
.record{
  width:200px;height:200px;border-radius:50%;margin:0 auto 28px;
  background:radial-gradient(circle,var(--red) 0 16%,#1a1a1a 16% 20%,#2a2a2a 20% 22%,#1a1a1a 22% 100%);
  position:relative;box-shadow:0 10px 40px rgba(0,0,0,.6);cursor:pointer;
  transition:box-shadow .3s
}
.record.spinning{animation:spin 12s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.record::before{
  content:"";position:absolute;inset:20px;border-radius:50%;
  background:repeating-radial-gradient(circle,#1e1e1e 0 1px,#262626 1px 3px);pointer-events:none
}
.label{
  position:absolute;inset:30% 30%;border-radius:50%;overflow:hidden;
  background:var(--bg) center/cover no-repeat;pointer-events:none;
  display:flex;align-items:center;justify-content:center
}
.label img{width:100%;height:100%;object-fit:cover}
.label::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.18),transparent 55%);pointer-events:none}
.hole{
  position:absolute;width:7px;height:7px;background:var(--bg);border-radius:50%;
  top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none
}
h1{text-align:center;font-size:28px;font-weight:700;letter-spacing:.05em}
.sub{text-align:center;font-size:11px;color:var(--soft);letter-spacing:.3em;margin:6px 0 28px}

/* 文章 / 曲目 */
.section-title{font-size:12px;color:var(--soft);letter-spacing:.25em;margin:30px 0 6px;display:flex;align-items:center;gap:10px}
.section-title::after{content:"";flex:1;height:1px;background:var(--line)}
.track{
  display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);
  cursor:pointer;transition:background .15s
}
.track:hover{background:rgba(255,255,255,.03);padding-left:8px}
.track .n{font-size:13px;color:var(--soft);width:24px;flex:none}
.track .body{flex:1;min-width:0}
.track .t{font-size:15px;font-weight:600}
.track .d{
  font-size:12px;color:var(--soft);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis   /* 一行自适应截断 */
}
.track .len{font-size:12px;color:var(--soft);flex:none}
.track.playing .t{color:var(--red)}

/* 收款码 */
.qr{margin-top:28px;text-align:center;padding:18px;border:1px solid var(--line)}
.qrgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qrbox{display:flex;flex-direction:column;align-items:center}
.qrbox .q{width:96px;height:96px;background:#ddd center/cover no-repeat;position:relative;cursor:pointer;transition:transform .2s;border-radius:4px}
.qrbox .q:hover{transform:scale(1.05)}
.qrbox h5{font-size:12px;font-weight:600;margin-top:8px}
.qrbox span{font-size:9px;color:var(--soft);letter-spacing:.15em}

/* 更多收款 */
.more{margin-top:22px;border:1px solid var(--line);padding:16px}
.pay-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line)}
.pay-item:last-child{border-bottom:none}
.pay-item .pi-main{flex:1;min-width:0}
.pay-item .pi-label{font-size:14px}
.pay-item a.pi-label{color:var(--fg);text-decoration:none}
.pay-item a.pi-label:hover{color:var(--red)}
.pay-item .pi-sub{font-size:11px;color:var(--soft);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.copy-btn{
  flex:none;font-size:11px;color:var(--red);background:none;border:1px solid var(--red);
  border-radius:4px;padding:4px 10px;cursor:pointer;letter-spacing:.1em;font-family:inherit
}
.copy-btn:hover{background:var(--red);color:#fff}

/* 感谢名单 */
.sp{margin-top:22px;text-align:center;padding:16px;border:1px solid var(--line)}
.sp h3{font-size:12px;color:var(--soft);letter-spacing:.2em;margin-bottom:10px}
.sp p{font-size:13px;line-height:2}
.sp b{color:var(--red)}
.detail-link{
  display:inline-block;margin-top:10px;font-size:11px;color:var(--red);
  text-decoration:none;letter-spacing:.15em;transition:opacity .2s
}
.detail-link:hover{opacity:.7;text-decoration:underline}

.foot{text-align:center;margin-top:28px;font-size:10px;color:#444;letter-spacing:.3em}

/* 通用弹层 */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:999;align-items:center;justify-content:center;padding:20px}
.modal.show{display:flex}
.modal .mc{background:#fff;padding:16px;border-radius:6px;position:relative;max-width:92vw;max-height:90vh;overflow:auto}
.modal .mq{width:260px;height:260px;background:#1a1a1a center/cover no-repeat;border-radius:6px}
.modal .close{position:absolute;top:-32px;right:0;color:#fff;font-size:20px;cursor:pointer;background:none;border:none}
.modal h4{color:#1a1a1a;font-size:15px;margin:12px 0 4px;text-align:center}
.modal .tk-list{list-style:none;min-width:260px}
.modal .tk-list li{display:flex;justify-content:space-between;gap:16px;padding:9px 4px;border-bottom:1px solid #eee;font-size:13px;color:#333}
.modal .tk-list li:last-child{border-bottom:none}
.modal .tk-list .tk-name{font-weight:600;color:#1a1a1a}
.modal .tk-list .tk-meta{color:#888;font-size:11px;text-align:right;flex:none}
.modal .tk-note{color:#666;font-size:11px;margin-top:2px}

/* 文章页 */
.post{max-width:680px;margin:0 auto;padding:48px 22px 60px}
.post .back{display:inline-block;font-size:12px;color:var(--soft);text-decoration:none;letter-spacing:.1em;margin-bottom:18px}
.post .back:hover{color:var(--red)}
.post h1{text-align:left;font-size:26px;margin-bottom:8px}
.post .meta{color:var(--soft);font-size:12px;letter-spacing:.1em;margin-bottom:24px}
.post .content{font-size:15px;line-height:1.9;color:var(--fg)}
.post .content img{max-width:100%}
.post .loading{color:var(--soft)}

@media (max-width:375px){
  .record{width:160px;height:160px}
  h1{font-size:24px}
  .qrbox .q{width:80px;height:80px}
}