/* ══ Reset ══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ══ Design Tokens — Light ═════════════════════════════════════════ */
:root{
  --bg:#f7f3ee;--bg2:#ede8e1;--surface:#faf8f5;--card:#ffffff;
  --border:rgba(160,140,118,.17);--border-h:rgba(122,170,109,.44);
  --green:#7aaa6d;--green-d:#5d8c58;--brown:#c5956a;
  --blue:#9bb8d3;--rose:#d4a0a0;
  --text:#3a3028;--muted:#8a7d72;--light:#b5a898;
  --radius:20px;--radius-sm:14px;
  --shadow:0 4px 28px rgba(80,60,40,.07);--shadow-h:0 10px 42px rgba(80,60,40,.13);
  --glow-g:rgba(122,170,109,.25);--glow-b:rgba(197,149,106,.2);
  --blob1:rgba(190,218,175,.38);
  --blob2:rgba(225,205,182,.34);
  --blob3:rgba(180,207,226,.32);
  --blob4:rgba(215,195,170,.28);
  --blob5:rgba(210,180,180,.26);
  --mp-bg:rgba(255,252,248,.96);
  --nav-overlay:rgba(247,243,238,.93);
}

/* ══ Design Tokens — Dark ═══════════════════════════════════════════ */
[data-theme="dark"]{
  --bg:#16130f;--bg2:#1e1a14;--surface:#252018;--card:#2a2419;
  --border:rgba(255,240,210,.1);--border-h:rgba(122,170,109,.4);
  --text:#e8dcc8;--muted:#9a8c78;--light:#6a5e50;
  --shadow:0 4px 28px rgba(0,0,0,.25);--shadow-h:0 10px 42px rgba(0,0,0,.4);
  --glow-g:rgba(122,170,109,.3);--glow-b:rgba(197,149,106,.25);
  --blob1:rgba(122,170,109,.18);
  --blob2:rgba(197,149,106,.16);
  --blob3:rgba(100,140,180,.16);
  --blob4:rgba(180,140,110,.14);
  --blob5:rgba(160,120,130,.14);
  --mp-bg:rgba(30,24,18,.97);
  --nav-overlay:rgba(22,19,15,.94);
}

/* ══ Base ═══════════════════════════════════════════════════════════ */
html{scroll-behavior:smooth;height:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:'Noto Sans SC',system-ui,sans-serif;
  min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .4s, color .4s;
}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--green);border-radius:4px;opacity:.5}

/* ══ Theme Toggle ══════════════════════════════════════════════════ */
#theme-btn{
  position:fixed;top:18px;right:18px;z-index:200;
  width:40px;height:40px;border-radius:50%;
  background:var(--card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1.1rem;
  box-shadow:var(--shadow);transition:all .22s;
  user-select:none;-webkit-tap-highlight-color:transparent;
}
#theme-btn:active{transform:scale(0.96);}
#theme-btn:hover{
  transform:scale(1.05);
  border-color:var(--border-h);
  box-shadow:var(--shadow-h);
}

/* 新增沉浸模式按钮 */
#music-focus-toggle{
  position:fixed;top:18px;right:70px;z-index:200;
  width:40px;height:40px;border-radius:50%;
  background:var(--card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1.1rem;
  box-shadow:var(--shadow);transition:all .22s;
  user-select:none;-webkit-tap-highlight-color:transparent;
}
#music-focus-toggle:active{transform:scale(0.96);}
#music-focus-toggle:hover{
  transform:scale(1.05);
  border-color:var(--border-h);
  box-shadow:var(--shadow-h);
}

/* ══ BG Canvas ════════════════════════════════════════════════════ */
#bg-canvas{position:fixed;inset:0;pointer-events:none;z-index:0}
#star-canvas{position:fixed;inset:0;pointer-events:none;z-index:1}

/* ══ Page Layout ════════════════════════════════════════════════════ */
.page{
  position:relative;z-index:10;
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding: 80px 24px 220px;
  text-align:center;
}

/* ══ Avatar ══════════════════════════════════════════════════════════ */
.avatar-wrap{position:relative;width:120px;height:120px;margin:0 auto 28px}
.avatar-ring{
  position:absolute;inset:-4px;border-radius:50%;
  background:conic-gradient(var(--green),var(--brown),var(--blue),var(--rose),var(--green));
  animation:ring-spin 8s linear infinite;
}
@keyframes ring-spin{to{transform:rotate(360deg)}}
.avatar-inner{
  position:relative;z-index:1;
  width:120px;height:120px;border-radius:50%;
  background:linear-gradient(145deg,#ede6da,#d8cfc3);
  border:4px solid var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;box-shadow:var(--shadow);overflow:hidden;
  transition:background .4s;
}
.avatar-inner img{width:100%;height:100%;object-fit:cover;border-radius:50%}
[data-theme="dark"] .avatar-inner{background:linear-gradient(145deg,#2a2419,#1e1a14)}

/* ══ Name & Bio ══════════════════════════════════════════════════════ */
.hero-name{
  font-family:'Noto Serif SC',serif;
  font-size:clamp(2rem,6vw,3rem);font-weight:600;letter-spacing:.04em;
  color:var(--text);line-height:1.2;margin-bottom:8px;
  transition:color .4s;
}
.hero-name .typed-wrap{color:var(--brown);display:inline-block}
.cursor{
  display:inline-block;width:2px;height:.85em;
  background:var(--brown);margin-left:2px;
  animation:blink .9s step-end infinite;vertical-align:bottom;
}
@keyframes blink{50%{opacity:0}}
.hero-sub{
  font-size:clamp(.9rem,2.5vw,1.05rem);
  color:var(--muted);line-height:1.9;
  max-width:420px;margin:0 auto 32px;letter-spacing:.02em;
  transition:color .4s;
}

/* ══ Links Grid ═════════════════════════════════════════════════════ */
.links-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;margin-bottom:36px;
  width:100%;max-width:480px;
}
.link-card{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;border-radius:var(--radius-sm);
  background:var(--card);border:1px solid var(--border);
  text-decoration:none;color:var(--text);
  box-shadow:var(--shadow);transition:all .22s ease, background .4s, border-color .22s;
  cursor:pointer;position:relative;overflow:hidden;
  transform:translateY(0);
}
.link-card:hover{
  transform:translateY(-3px);box-shadow:var(--shadow-h);
  border-color:var(--border-h);
}
.link-card .l-icon{
  flex-shrink:0;width:28px;text-align:center;
  transition:transform .2s;
  display:flex;align-items:center;justify-content:center;
}
.link-card .l-icon img{
  width:1.2rem;height:1.2rem;object-fit:contain;
  display:block;
}
.link-card .l-label{font-size:.9rem;font-weight:500}
.link-card .l-arrow{font-size:.75rem;color:var(--light);margin-left:auto;transition:transform .2s,opacity .2s}
.link-card:hover .l-arrow{transform:translateX(3px);color:var(--green)}
.link-card:hover .l-icon{transform:scale(1.1)}

/* ══ Loading overlay ═══════════════════════════════════════════════ */
#nav-loading{
  position:fixed;inset:0;z-index:9999;
  background:var(--nav-overlay);
  backdrop-filter:blur(6px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;opacity:0;pointer-events:none;
  transition:opacity .25s;
}
#nav-loading.active{opacity:1;pointer-events:all}
.nl-icon{
  width:56px;height:56px;border-radius:50%;
  background:conic-gradient(var(--green),var(--brown),var(--blue),var(--rose),var(--green));
  animation:ring-spin 1.5s linear infinite;
  display:flex;align-items:center;justify-content:center;
}
.nl-icon-inner{
  width:42px;height:42px;border-radius:50%;
  background:var(--bg);display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
}
.nl-text{font-size:.85rem;color:var(--muted);letter-spacing:.04em}
.nl-dots::after{content:'';animation:nl-dots 1.5s infinite}
@keyframes nl-dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* ══ Footer ════════════════════════════════════════════════════════ */
.footer-hint{margin-top:auto;padding-top:12px;font-size:.76rem;color:var(--light);letter-spacing:.02em;line-height:2;transition:color .4s}
.footer-hint a{color:var(--brown);text-decoration:none}

/* ══ Quote Block — 突出一言 ═══════════════════════════════════════ */
.quote-block{
  margin: 28px auto 8px;
  max-width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  font-size: clamp(.95rem, 2.8vw, 1.12rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: .08em;
  line-height: 1.8;
  text-align: center;
  transition: color .4s;
  padding: 0 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.quote-mark{
  font-size: 1.6em;
  color: #ffffff;
  opacity: 0.8;
  line-height: 1;
  flex-shrink: 0;
  font-family: Georgia, 'Noto Sans SC', sans-serif;
  transform: translateY(0.1em);
  display: inline-block;
}

#random-quote{
  flex: 1;
  font-weight: 700;
  color: #ffffff;
}

/* ══ Toast ═══════════════════════════════════════════════════════════ */
.notif{
  position:fixed;bottom:130px;left:50%;transform:translateX(-50%) translateY(14px);
  z-index:600;background:var(--card);border:1px solid var(--border);
  border-radius:999px;padding:9px 24px;
  font-size:.82rem;color:var(--muted);box-shadow:var(--shadow);
  opacity:0;pointer-events:none;
  transition:all .38s cubic-bezier(.34,1.2,.64,1),background .4s,border-color .4s;
  white-space:nowrap;
}
.notif.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ══ Music Player ══════════════════════════════════════════════════ */
#music-player{
  position:fixed;
  bottom:0;left:50%;
  transform:translateX(-50%) translateY(0);
  z-index:500;
  width:min(520px,calc(100vw - 24px));
  background:var(--mp-bg);
  backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--border);
  border-radius:20px 20px 0 0;
  box-shadow:0 -4px 40px rgba(80,60,40,.12);
  padding:12px 18px 12px;
  transition:transform .42s cubic-bezier(.34,1.1,.64,1),background .4s;
  user-select:none;
  overflow:visible;
}
#music-player.slide-down{transform:translateX(-50%) translateY(calc(100% - 52px))}
@media (min-width: 768px){
  #music-player{
    left:auto;right:20px;bottom:20px;
    transform:translateX(0) translateY(0);
    border-radius:20px;
    width:min(320px,28vw);
    max-width:360px;
  }
  #music-player.slide-down{transform:translateX(0) translateY(calc(100% - 52px))}
}
@media (min-width: 1100px){
  #music-player{right:32px;bottom:32px;width:320px}
}
.mp-handle{
  width:36px;height:4px;border-radius:999px;
  background:var(--border);margin:0 auto 10px;cursor:pointer;transition:background .2s;
}
.mp-handle:hover{background:var(--green)}
.mp-header{display:flex;align-items:center;gap:12px;cursor:pointer}
.mp-cover{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
  background:linear-gradient(135deg,var(--green),var(--brown));position:relative;
}
.mp-disc{
  width:100%;height:100%;object-fit:cover;border-radius:12px;
  animation:disc-spin 12s linear infinite paused;
}
.mp-disc.spin{animation-play-state:running}
@keyframes disc-spin{to{transform:rotate(360deg)}}
.mp-cover-emoji{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.3rem;
}
.mp-info{flex:1;min-width:0}
.mp-title{font-size:.9rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .4s}
.mp-artist{font-size:.73rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .4s}
.mp-viz{display:flex;align-items:flex-end;gap:2px;height:18px;margin-right:2px}
.viz-bar{width:3px;background:var(--green);border-radius:2px;opacity:.5;transition:height .15s ease}
#mp-body{
  margin-top:10px;overflow:hidden;max-height:200px;
  transition:max-height .38s cubic-bezier(.22,1,.36,1),opacity .3s;opacity:1;
}
#mp-body.collapsed{max-height:0;opacity:0}
.mp-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-bottom:10px;
  padding:4px 0;
}
.mp-ctrl-btn, .mp-play-btn{position:relative;z-index:15;}
.mp-ctrl-btn{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--green),var(--green-d));
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 2px 10px var(--glow-g);
  transition:transform .15s,box-shadow .15s;
}
.mp-ctrl-btn:hover{transform:scale(1.12);box-shadow:0 4px 18px var(--glow-g)}
.mp-ctrl-btn svg{pointer-events:none;color:#fff}
.mp-play-btn{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--green),var(--green-d));
  display:flex;align-items:center;justify-content:center;color:#fff;border:none;cursor:pointer;
  box-shadow:0 3px 14px var(--glow-g);transition:transform .15s,box-shadow .15s;
  margin:0;
  flex-shrink:0;
}
.mp-play-btn:hover{transform:scale(1.1);box-shadow:0 6px 22px var(--glow-g)}
.mp-play-btn svg{pointer-events:none}
.mp-progress-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mp-time{font-size:.68rem;color:var(--light);min-width:32px}
.mp-time.right{text-align:right}
.mp-progress{flex:1;position:relative;padding:9px 0;margin:-9px 0;cursor:pointer;box-sizing:content-box}
.mp-track{height:4px;border-radius:999px;background:var(--bg2);position:relative}
.mp-bar{
  position:absolute;top:0;left:0;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--brown));width:0%;pointer-events:none;
}
.mp-thumb{
  position:absolute;top:50%;left:0%;width:13px;height:13px;border-radius:50%;
  background:var(--brown);border:2px solid #fff;
  box-shadow:0 1px 5px rgba(0,0,0,.2);
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .15s;
}
.mp-progress:hover .mp-thumb,.mp-progress.dragging .mp-thumb{opacity:1}
.mp-progress.dragging{cursor:grabbing}
.mp-vol-row{display:flex;align-items:center;gap:8px}
.mp-vol-icon{font-size:.82rem;color:var(--light)}
.mp-vol-slider{
  flex:1;-webkit-appearance:none;appearance:none;height:3px;border-radius:999px;
  background:var(--bg2);cursor:pointer;outline:none;
}
.mp-vol-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--green);cursor:pointer;
}

/* 播放模式按钮图标适配 */
#mp-mode {
  font-size: 1.1rem;
  line-height: 1;
}
#mp-mode span {
  display: inline-block;
}

/* ══ Animations ════════════════════════════════════════════════════ */
[data-anim]{will-change:opacity,transform}
[data-anim="fade-up"]{
  opacity:0;transform:translateY(28px);
  transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1);
}
[data-anim="fade-up"].anim-in{opacity:1;transform:translateY(0)}
[data-anim="scale-in"]{
  opacity:0;transform:scale(.86);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
}
[data-anim="scale-in"].anim-in{opacity:1;transform:scale(1)}
[data-delay="1"]{transition-delay:.08s!important}
[data-delay="2"]{transition-delay:.16s!important}
[data-delay="3"]{transition-delay:.24s!important}
[data-delay="4"]{transition-delay:.33s!important}
[data-delay="5"]{transition-delay:.42s!important}

/* ══ Mobile ════════════════════════════════════════════════════════ */
@media (max-width: 600px){
  .page{padding:40px 20px 190px}
  .avatar-wrap{width:100px;height:100px;margin-bottom:22px}
  .avatar-inner{width:100px;height:100px;font-size:2.4rem}
  .avatar-ring{inset:-3px}
  .links-grid{max-width:100%}
  #music-player{width:100%;border-radius:16px 16px 0 0;padding:10px 14px 10px}
  .footer-hint{margin-top:0;padding-top:8px}
  .quote-block{margin:20px auto 6px;font-size:.92rem}
}

@media (min-width: 1100px){
  .page{padding:80px 24px 240px}
  .links-grid{max-width:520px}
}

@media (max-height: 600px) and (orientation:landscape){
  .page{padding:24px 20px 110px}
  .avatar-wrap{width:72px;height:72px;margin-bottom:12px}
  .avatar-inner{width:72px;height:72px;font-size:1.8rem}
}

/* ===== 手机端收起播放器专用优化 ===== */
@media (max-width: 768px) {
  #music-player.slide-down {
    padding: 10px 12px !important;
    min-height: 74px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #music-player.slide-down .mp-header {
    gap: 10px;
    align-items: center;
  }
  #music-player.slide-down .mp-cover {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
  #music-player.slide-down .mp-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  #music-player.slide-down .mp-title {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    font-size: 0.85rem;
    line-height: 1.4;
  }
  #music-player.slide-down .mp-title::-webkit-scrollbar {
    display: none;
  }
  #music-player.slide-down .mp-artist {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.7rem;
  }
  #music-player.slide-down .mp-viz {
    display: flex;          /* 保持显示 */
    transform: scale(0.7);  /* 适当缩小以适应一行 */
    transform-origin: right center;
    margin-left: 4px;
  }
}

@media (max-width: 480px) {
  #music-player.slide-down {
    min-height: 68px;
    padding: 8px 10px !important;
  }
  #music-player.slide-down .mp-cover {
    width: 38px;
    height: 38px;
  }
  #music-player.slide-down .mp-title {
    font-size: 0.8rem;
  }
}

/* ===== 音乐沉浸模式 (优化版 — 平滑移动放大) ===== */

/* 基础播放器样式（确保有明确的初始定位值） */
#music-player {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  /* 其他样式保持不变 */
}

/* 沉浸模式下的播放器 — 平滑移动到屏幕中央并放大 */
body.music-focus #music-player {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  bottom: auto !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(560px, 90vw) !important;
  max-width: 640px !important;
  border-radius: 32px !important;
  padding: 28px 24px 32px !important;
  background: var(--mp-bg) !important;
  backdrop-filter: blur(32px) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--border) inset !important;
  
  /* 关键：过渡属性明细，避免 all 带来的不可预测变化 */
  transition: 
    top 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.05),
    left 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.05),
    bottom 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.05),
    right 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.05),
    transform 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.05),
    width 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.05),
    max-width 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.05),
    padding 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.05),
    border-radius 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.05),
    background 0.4s,
    box-shadow 0.5s !important;
}

/* 退出沉浸时的恢复动画 — 同样明确定义过渡属性 */
body:not(.music-focus) #music-player {
  transition: 
    top 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.05),
    left 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.05),
    bottom 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.05),
    right 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.05),
    transform 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.05),
    width 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.05),
    max-width 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.05),
    padding 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.05),
    border-radius 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.05),
    background 0.4s,
    box-shadow 0.5s;
}

/* 沉浸模式下隐藏页面主要内容 — 优化闪现问题 */
body.music-focus .page .avatar-wrap,
body.music-focus .page .hero-name,
body.music-focus .page .hero-sub,
body.music-focus .page .links-grid,
body.music-focus .page .quote-block,
body.music-focus .page .footer-hint {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-12px) scale(0.97) !important;
  /* 让 visibility 延迟到透明度动画结束后再切换，避免闪现 */
  transition: opacity 0.5s cubic-bezier(.4,0,.2,1),
              visibility 0s linear 0.5s,
              transform 0.5s cubic-bezier(.4,0,.2,1) !important;
}

/* 退出沉浸时的恢复动画 */
body:not(.music-focus) .page .avatar-wrap,
body:not(.music-focus) .page .hero-name,
body:not(.music-focus) .page .hero-sub,
body:not(.music-focus) .page .links-grid,
body:not(.music-focus) .page .quote-block,
body:not(.music-focus) .page .footer-hint {
  transition: opacity 0.5s cubic-bezier(.22,1,.36,1),
              visibility 0s linear 0s,
              transform 0.5s cubic-bezier(.22,1,.36,1) !important;
}

/* 确保隐藏区域内所有元素都不可交互 */
body.music-focus .page .avatar-wrap *,
body.music-focus .page .hero-name *,
body.music-focus .page .hero-sub *,
body.music-focus .page .links-grid *,
body.music-focus .page .quote-block *,
body.music-focus .page .footer-hint *,
body.music-focus .page a,
body.music-focus .page .link-card {
  pointer-events: none !important;
  cursor: default !important;
  user-select: none !important;
}

/* 沉浸时强制展开播放器主体 */
body.music-focus #mp-body {
  max-height: 300px !important;
  opacity: 1 !important;
  transition: max-height 0.4s ease, opacity 0.3s;
}

/* 播放器内部元素样式放大（封面、文字等） */
body.music-focus #music-player .mp-handle {
  display: none !important;
}

body.music-focus #music-player .mp-cover {
  width: 140px !important;
  height: 140px !important;
  border-radius: 28px !important;
  margin-right: 18px !important;
  transition: width 0.5s, height 0.5s, border-radius 0.5s;
}

body.music-focus #music-player .mp-cover-emoji {
  font-size: 3.2rem !important;
}

body.music-focus #music-player .mp-header {
  margin-bottom: 28px !important;
}

body.music-focus #music-player .mp-title {
  font-size: 1.4rem !important;
  white-space: normal !important;
  line-height: 1.3 !important;
}

body.music-focus #music-player .mp-artist {
  font-size: 0.95rem !important;
  margin-top: 6px !important;
}

body.music-focus #music-player .mp-controls {
  gap: 28px !important;
  margin: 20px 0 16px !important;
}

body.music-focus #music-player .mp-play-btn {
  width: 64px !important;
  height: 64px !important;
  transition: width 0.3s, height 0.3s;
}

body.music-focus #music-player .mp-play-btn svg {
  width: 28px !important;
  height: 28px !important;
}

body.music-focus #music-player .mp-ctrl-btn {
  width: 48px !important;
  height: 48px !important;
  transition: width 0.3s, height 0.3s;
}

body.music-focus #music-player .mp-progress-row {
  margin: 16px 0 12px !important;
}

body.music-focus #music-player .mp-time {
  font-size: 0.8rem !important;
}

/* 手机端适配 */
@media (max-width: 600px) {
  body.music-focus #music-player {
    padding: 20px 18px 24px !important;
    width: 92vw !important;
  }
  body.music-focus #music-player .mp-cover {
    width: 100px !important;
    height: 100px !important;
  }
  body.music-focus #music-player .mp-title {
    font-size: 1.1rem !important;
  }
}

/* 确保右上角按钮在沉浸时可点击 */
body.music-focus #theme-btn,
body.music-focus #music-focus-toggle {
  pointer-events: auto !important;
  z-index: 9999;
  cursor: pointer !important;
}

/* 沉浸时光标隐藏 */
body.music-focus {
  cursor: default;
}
body.music-focus #music-player,
body.music-focus #theme-btn,
body.music-focus #music-focus-toggle {
  cursor: auto;
}
body.music-focus #music-player a,
body.music-focus #music-player button {
  pointer-events: auto !important;
  cursor: pointer !important;
}

body.music-focus #music-player {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(560px, 90vw) !important;
  max-width: 640px !important;
  border-radius: 32px !important;
  padding: 28px 24px 32px !important;
  background: var(--mp-bg) !important;
  backdrop-filter: blur(32px) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--border) inset !important;
  transition: all 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.05) !important;
  bottom: auto !important;
  right: auto !important;
}

body.music-focus #music-player .mp-handle {
  display: none !important;
}

body.music-focus #music-player .mp-cover {
  width: 140px !important;
  height: 140px !important;
  border-radius: 28px !important;
  margin-right: 18px !important;
}

body.music-focus #music-player .mp-cover-emoji {
  font-size: 3.2rem !important;
}

body.music-focus #music-player .mp-header {
  margin-bottom: 28px !important;
}

body.music-focus #music-player .mp-title {
  font-size: 1.4rem !important;
  white-space: normal !important;
  line-height: 1.3 !important;
}

body.music-focus #music-player .mp-artist {
  font-size: 0.95rem !important;
  margin-top: 6px !important;
}

body.music-focus #music-player .mp-controls {
  gap: 28px !important;
  margin: 20px 0 16px !important;
}

body.music-focus #music-player .mp-play-btn {
  width: 64px !important;
  height: 64px !important;
}

body.music-focus #music-player .mp-play-btn svg {
  width: 28px !important;
  height: 28px !important;
}

body.music-focus #music-player .mp-ctrl-btn {
  width: 48px !important;
  height: 48px !important;
}

body.music-focus #music-player .mp-progress-row {
  margin: 16px 0 12px !important;
}

body.music-focus #music-player .mp-time {
  font-size: 0.8rem !important;
}

/* 沉浸中 #mp-body 强制展开 */
body.music-focus #mp-body {
  max-height: 300px !important;
  opacity: 1 !important;
}

@media (max-width: 600px) {
  body.music-focus #music-player {
    padding: 20px 18px 24px !important;
    width: 92vw !important;
  }
  body.music-focus #music-player .mp-cover {
    width: 100px !important;
    height: 100px !important;
  }
  body.music-focus #music-player .mp-title {
    font-size: 1.1rem !important;
  }
}