/* ============================================================
   MJ · 液态玻璃聊天室 — 浅色主题
   液态玻璃组件来自开源项目 GooseHyperGlass（glass.goose.cc.cd）
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden;font-family:-apple-system,"PingFang SC","HarmonyOS Sans SC","Helvetica Neue",sans-serif;background:#f4f7ff;color:#1a1f36}
:root{
  --blue:#4f7cff;--purple:#8a5cff;--pink:#ff5c9d;
  --txt:#1a1f36;--txt2:#5b6478;--txt3:#9aa3c0;
  --card:#ffffff;--line:#e8ecf7;
  --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
}

/* ===== 应用容器 ===== */
.app{position:relative;height:100%;width:100%;overflow:hidden}

/* ===== 浅色极光背景 ===== */
.bg-aurora{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}

/* ===== 聊天滚动视口 ===== */
.chat-scroll{position:absolute;inset:0;z-index:1;overflow:hidden;touch-action:pan-y}
.chat{padding:calc(78px + var(--safe-top)) 16px calc(140px + var(--safe-bottom));display:flex;flex-direction:column;gap:12px;will-change:transform}

/* ===== 消息 ===== */
.msg{display:flex;gap:9px;align-items:flex-end;max-width:82%;animation:msgIn .34s cubic-bezier(.2,.9,.3,1.2)}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
@keyframes msgIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.avatar{width:38px;height:38px;border-radius:12px;flex-shrink:0;object-fit:cover;background:#eef1f8;box-shadow:0 2px 10px rgba(80,100,180,.18)}
.bubble{padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.5;word-break:break-word;position:relative}
.msg.other .bubble{
  background:#ffffff;border:1px solid var(--line);
  border-top-left-radius:5px;color:var(--txt);
  box-shadow:0 4px 16px rgba(90,110,190,.08);
}
.msg.me .bubble{
  background:linear-gradient(135deg,#4f7cff,#8a5cff);
  border-top-right-radius:5px;color:#fff;
  box-shadow:0 8px 22px rgba(90,110,255,.28);
}
.msg .time{display:block;margin-top:5px;font-size:10px;color:var(--txt3);line-height:1;font-variant-numeric:tabular-nums}
.msg.me .time{text-align:right;color:rgba(255,255,255,.75)}
.msg .ticks{display:inline-flex;align-items:center;gap:1px;margin-left:4px;color:var(--txt3);font-size:12px}
.msg.me .ticks{color:rgba(255,255,255,.8)}
.msg .ticks.read{color:#8fd0ff}
.msg .ticks svg{width:13px;height:13px;fill:currentColor}

/* 日期分隔条 */
.day-div{display:flex;align-items:center;gap:10px;align-self:center;width:100%;max-width:340px;margin:2px 0}
.day-div::before,.day-div::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(90,110,190,.18),transparent)}
.day-div span{font-size:11px;color:var(--txt3);letter-spacing:.06em}

/* 正在输入… */
.typing-bubble{display:inline-flex;gap:5px;padding:15px 16px}
.typing-bubble i{width:7px;height:7px;border-radius:50%;background:#9fb0e0;animation:typing 1.1s infinite ease-in-out}
.typing-bubble i:nth-child(2){animation-delay:.16s}
.typing-bubble i:nth-child(3){animation-delay:.32s}
@keyframes typing{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-5px)}}

/* ===== 快捷回复 ===== */
.chips-row{position:absolute;left:12px;right:12px;bottom:calc(84px + var(--safe-bottom));z-index:1;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;pointer-events:none;padding-bottom:2px}
.chips-row::-webkit-scrollbar{display:none}
.chip{
  pointer-events:auto;flex-shrink:0;height:36px;padding:0 16px;border-radius:18px;
  border:1px solid rgba(79,124,255,.25);
  background:#ffffff;color:#4f6de8;font-size:13px;cursor:pointer;
  box-shadow:0 4px 14px rgba(90,110,190,.12);
  transition:transform .15s,background .15s,box-shadow .15s;
}
.chip:active{transform:scale(.94);background:#eef2ff;box-shadow:0 2px 8px rgba(90,110,190,.2)}

/* ===== 顶部导航栏（Mineradio 液态玻璃） ===== */
.navbar{
  position:absolute;top:0;left:0;right:0;z-index:2;
  height:calc(64px + var(--safe-top));padding-top:var(--safe-top);
  display:flex;align-items:center;padding-left:10px;padding-right:10px;
  background:rgba(255,255,255,.35);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.3);
  box-shadow:0 2px 14px rgba(90,110,190,.06);
}
/* 支持 SVG backdrop-filter 时切换成 Mineradio 折射玻璃（位移贴图 + 色差错开） */
html.control-glass-svg-ok .navbar{
  background:rgba(255,255,255,.18);
  backdrop-filter:url(#mineradio-control-glass-filter) saturate(1.4);
  -webkit-backdrop-filter:url(#mineradio-control-glass-filter) saturate(1.4);
}
.navbar .back{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:#5b6478}
.navbar .back svg{width:22px;height:22px;fill:currentColor}
.navbar .brand{flex:1;display:flex;align-items:center;gap:10px;margin-left:2px}
.navbar .brand .avatar{width:40px;height:40px;border-radius:13px;box-shadow:0 3px 12px rgba(255,90,130,.25)}
.navbar .brand-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.navbar .name{font-size:17px;font-weight:700;letter-spacing:.02em;color:var(--txt)}
.navbar .status{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--txt2)}
.navbar .status-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e;animation:statusPulse 2.4s infinite}
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:.45}}
.navbar .more{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:#5b6478;cursor:pointer}
.navbar .more svg{width:22px;height:22px;fill:currentColor}
.navbar .more:active{color:var(--blue)}

/* ===== 底部输入栏（浅色） ===== */
.inputbar{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  height:calc(66px + var(--safe-bottom));padding-bottom:var(--safe-bottom);
  display:flex;align-items:center;gap:10px;
  padding-left:14px;padding-right:14px;
  background:rgba(255,255,255,.94);
  border-top:1px solid var(--line);
  box-shadow:0 -2px 14px rgba(90,110,190,.05);
}
.inputbar input{
  flex:1;height:42px;border:0;border-radius:21px;outline:none;
  background:#f0f3fa;padding:0 18px;font-size:15px;color:var(--txt);caret-color:var(--blue);
  border:1px solid transparent;transition:all .2s;
}
.inputbar input::placeholder{color:#a6aec6}
.inputbar input:focus{background:#fff;border-color:#c8d6ff;box-shadow:0 0 0 3px rgba(79,124,255,.12)}

/* 液态玻璃发送键（背后铺一丢丢极光背景，肉眼几乎不可见，供玻璃折射检测） */
.send-wrap{position:relative;flex-shrink:0;display:flex;align-items:center}
.send-wrap::before{
  content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;z-index:0;
  background:url(bg-light.jpg) center/cover;opacity:.22;
}
.lg-send{position:relative;z-index:1;width:76px;height:46px;border-radius:23px;overflow:hidden}
html.no-lg2 .lg-send{display:none}

/* 发送键降级按钮 */
.send-fb{
  display:none;width:76px;height:42px;border:0;border-radius:21px;flex-shrink:0;
  background:#e5eaf7;color:#9aa3c0;font-size:15px;font-weight:600;cursor:pointer;transition:all .18s;
}
html.no-lg2 .send-fb{display:block}
.send-fb.ready{background:linear-gradient(135deg,#4f7cff,#8a5cff);color:#fff;box-shadow:0 6px 16px rgba(79,124,255,.35)}

/* ===== 旧版浏览器降级样式 ===== */
.legacy-mode .inputbar button{opacity:1 !important;cursor:pointer}
.legacy-mode .inputbar input{-webkit-appearance:none;appearance:none}
.legacy-mode .video-layer.fallback-mode{background:#000}
.legacy-mode .video-layer.fallback-mode video{width:100%;height:100%;object-fit:contain}

/* ===== 全屏特效视频层 ===== */
.video-layer{
  position:fixed;top:0;left:0;right:0;bottom:0;display:none;
  z-index:100;pointer-events:none;overflow:hidden;background:transparent;
}
.video-layer.always-top{z-index:99998}
.video-layer.show{display:block}
#glCanvas{position:absolute;top:50%;left:50%;pointer-events:none;display:block;transform-origin:center center}

/* ============================================================
   设置弹窗（浅色）
   ============================================================ */
.settings-modal{
  position:fixed;inset:0;z-index:99999;
  display:none;align-items:center;justify-content:center;
  background:rgba(35,45,90,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.settings-modal.show{display:flex}
.settings-panel{
  position:relative;width:92%;max-width:400px;max-height:92vh;overflow-y:auto;overscroll-behavior:contain;
  border-radius:22px;padding:18px;
  background:#ffffff;
  border:1px solid var(--line);
  box-shadow:0 24px 70px rgba(60,80,160,.25);
}
.settings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.settings-header .t{font-size:16px;font-weight:700;color:var(--txt)}
.settings-header .close{width:32px;height:32px;border:0;background:#f0f3fa;border-radius:10px;font-size:22px;line-height:1;color:var(--txt2);cursor:pointer}

.preview-wrap{display:flex;justify-content:center;margin:6px 0}
.phone-frame{position:relative;background:#f0f3fa;border:5px solid #2a2f45;border-radius:20px;overflow:hidden;box-shadow:0 8px 26px rgba(60,80,160,.18)}
.camera-hole{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:12px;height:12px;background:#000;border-radius:50%;z-index:10;box-shadow:0 0 0 1.5px #333}
#previewCanvas{position:absolute;top:50%;left:50%;transform-origin:center center;pointer-events:none;display:block}
.preview-hint{text-align:center;font-size:11px;color:var(--txt3);margin:4px 0 10px}

.preview-controls{display:flex;gap:8px;margin-bottom:12px}
.preview-controls button{
  flex:1;height:34px;border:0;border-radius:10px;
  background:#f0f3fa;color:var(--txt2);font-size:13px;font-weight:500;cursor:pointer;
  transition:all .15s;
}
.preview-controls button:active{background:#e4eafc}
.preview-controls button.active{background:linear-gradient(135deg,#4f7cff,#8a5cff);color:#fff;box-shadow:0 4px 14px rgba(79,124,255,.3)}

.sliders{display:flex;flex-direction:column;gap:12px}
.slider-row{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--txt2)}
.slider-row .label{width:40px;flex-shrink:0}

/* 液态玻璃滑块（背后铺一丢丢极光背景供折射） */
.slider-box{position:relative;flex:1;min-width:0;height:46px}
.slider-box::before{
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;z-index:0;
  background:url(bg-light.jpg) center/cover;opacity:.2;
}
.slider-box liquid-glass{position:absolute;inset:0;z-index:1;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#e8edff,#f0f4ff);border:1px solid rgba(180,195,240,.5)}
html.no-lg2 .slider-box::before{display:none}
html.no-lg2 .slider-box liquid-glass{display:none}

/* 原生滑块（仅无 WebGL2 时显示） */
.slider-box input[type=range]{display:none}
html.no-lg2 .slider-box input[type=range]{
  display:block;width:100%;height:100%;-webkit-appearance:none;appearance:none;
  background:#e6ebf7;border-radius:8px;outline:none;
}
html.no-lg2 .slider-box input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:linear-gradient(135deg,#4f7cff,#8a5cff);cursor:pointer;
  border:2px solid #fff;box-shadow:0 1px 5px rgba(60,80,160,.3);
}
.slider-row .val{width:52px;text-align:right;font-variant-numeric:tabular-nums;color:var(--txt);flex-shrink:0}
.step-btn{
  width:24px;height:24px;border:0;border-radius:7px;
  background:#eef2ff;color:var(--blue);font-size:16px;font-weight:700;
  line-height:1;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;
}
.step-btn:active{background:#dbe5ff}

/* ===== 液态玻璃开关（GooseHyperGlass single-toggle） ===== */
.toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 2px 6px;font-size:14px;color:var(--txt);
  border-top:1px solid var(--line);margin-top:8px;
}
.switch-box{position:relative;width:150px;height:92px;flex-shrink:0}
.switch-box::before{
  content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;z-index:0;
  background:url(bg-light.jpg) center/cover;opacity:.2;
}
.switch-box liquid-glass{position:absolute;inset:0;z-index:1;width:100%;height:100%;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,#e8edff,#f0f4ff)}
html.no-lg2 .switch-box liquid-glass{display:none}

/* 开关兜底：始终铺满可点，液态玻璃崩了也能操作 */
.switch-fb{
  display:none;position:absolute;inset:0;z-index:2;
  border-radius:24px;background:#e5eaf7;cursor:pointer;transition:background .25s;
}
.switch-fb .knob{position:absolute;top:6px;left:6px;width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(60,80,160,.3);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.switch-fb.on{background:linear-gradient(135deg,#4f7cff,#8a5cff)}
.switch-fb.on .knob{transform:translateX(46px)}

.settings-actions{display:flex;gap:10px;margin-top:16px}
.settings-actions button{flex:1;height:42px;border:0;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer}
#resetBtn{background:#f0f3fa;color:var(--txt2)}
#applyBtn{background:linear-gradient(135deg,#4f7cff,#8a5cff);color:#fff;box-shadow:0 6px 18px rgba(79,124,255,.3)}
#applyBtn:active{transform:scale(.97)}

/* ===== chip 内联 SVG 图标 ===== */
.chip{display:inline-flex;align-items:center;gap:5px}
.chip svg{width:15px;height:15px;flex-shrink:0}

/* ===== 图片发送按钮 ===== */
.img-btn{
  width:42px;height:42px;border:0;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:#f0f3fa;color:#5b6fd6;cursor:pointer;transition:all .15s;
}
.img-btn svg{width:21px;height:21px}
.img-btn:active{background:#e2e9ff}
.img-btn.disabled{opacity:.35;pointer-events:none;filter:grayscale(.6)}

/* 待发图片预览条 */
.img-preview-bar{
  position:absolute;left:0;right:0;bottom:calc(66px + var(--safe-bottom));z-index:3;
  padding:8px 14px;background:rgba(255,255,255,.96);border-top:1px solid var(--line);
}
.img-thumb{position:relative;width:64px;height:64px}
.img-thumb img{width:64px;height:64px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.img-del{
  position:absolute;top:-6px;right:-6px;width:20px;height:20px;border:0;border-radius:50%;
  background:#333;color:#fff;font-size:14px;line-height:1;cursor:pointer;
}

/* 消息里的附图 */
.msg .attach{max-width:200px;border-radius:12px;margin-top:6px;display:block;border:1px solid rgba(0,0,0,.06)}
/* AI 思考过程（灰字小字） */
.msg .reasoning{display:block;font-size:12px;color:var(--txt3);line-height:1.5;margin-bottom:6px;opacity:.85;border-left:2px solid #cdd7f5;padding-left:8px}

/* ===== AI 设置区 ===== */
.ai-section{margin-top:6px}
.ai-label{font-size:12px;color:var(--txt2);margin:12px 0 6px;display:flex;justify-content:space-between;align-items:center}
.mini-btn{
  border:1px solid rgba(79,124,255,.3);background:#f2f5ff;color:#4f6de8;
  font-size:11px;padding:3px 10px;border-radius:9px;cursor:pointer;
}
.mini-btn:active{background:#e2e9ff}
.provider-row{display:flex;gap:8px}
.provider-btn{
  flex:1;height:38px;border:1px solid var(--line);border-radius:12px;
  background:#f7f9ff;color:var(--txt2);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;
}
.provider-btn.active{
  background:linear-gradient(135deg,#4f7cff,#8a5cff);color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(79,124,255,.3);
}
.key-row{display:flex;gap:8px}
.key-row input{
  flex:1;height:40px;border:1px solid var(--line);border-radius:11px;outline:none;
  padding:0 12px;font-size:13px;font-family:ui-monospace,Menlo,monospace;background:#f7f9ff;color:var(--txt);
}
.key-row input:focus{border-color:#9db8ff;background:#fff}
.eye-btn{
  width:40px;height:40px;border:1px solid var(--line);border-radius:11px;
  background:#f7f9ff;color:var(--txt2);cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.eye-btn svg{width:19px;height:19px}
.model-sel{
  width:100%;height:40px;border:1px solid var(--line);border-radius:11px;outline:none;
  padding:0 10px;font-size:13px;background:#f7f9ff;color:var(--txt);
}
.ai-status{font-size:11px;color:var(--txt3);margin-top:5px;line-height:1.5}
.balance-line{
  margin-top:8px;font-size:12px;color:#2f9e6e;background:#eefaf3;
  border:1px solid #cdefdd;border-radius:10px;padding:7px 11px;
}
.balance-line.err{color:#c0392b;background:#fdeeee;border-color:#f5caca}

/* 流式速度滑块：背景条压扁成一条（居中扁条），速度越高越绚丽 */
.speed-box{height:40px}
.speed-box::before{
  top:50%;bottom:auto;transform:translateY(-50%);
  height:16px;border-radius:9px;
  background:linear-gradient(90deg,#cfe0ff,#e6d8ff);
  opacity:.25;transition:background .3s,opacity .3s;
}
.speed-box.s1::before{opacity:.15;background:linear-gradient(90deg,#e8eefc,#f0ebff)}
.speed-box.s2::before{opacity:.2;background:linear-gradient(90deg,#dfe8ff,#e9e0ff)}
.speed-box.s3::before{opacity:.25;background:linear-gradient(90deg,#d5e2ff,#dcdcff)}
.speed-box.s4::before{opacity:.3;background:linear-gradient(90deg,#c9e0ff,#d5d4ff)}
.speed-box.s5::before{opacity:.34;background:linear-gradient(90deg,#bfe4ff,#c9ccff)}
.speed-box.s6::before{opacity:.38;background:linear-gradient(90deg,#b5e8ff,#c3c0ff,#f0bfff)}
.speed-box.s7::before{opacity:.42;background:linear-gradient(90deg,#9fdcff,#b3a8ff,#f5a8d8)}
.speed-box.s8::before{opacity:.46;background:linear-gradient(90deg,#8fd8ff,#a89aff,#f89fd0,#ffb8a0)}
.speed-box.s9::before{opacity:.5;background:linear-gradient(90deg,#7fd4ff,#9a8cff,#ff9ed8,#ffc47f)}
.speed-box.s10::before{opacity:.55;background:linear-gradient(90deg,#7fd4ff,#9a8cff,#ff9ed8,#ffc47f,#c8ff9a)}
.speed-hint{font-size:11px;color:var(--txt2);margin-top:6px;text-align:center}
.speed-hint.hot{color:#d2457a;font-weight:600}

/* 停止生成按钮 */
.stop-fab{
  display:none;position:absolute;left:50%;bottom:calc(96px + var(--safe-bottom));transform:translateX(-50%);
  z-index:4;height:36px;padding:0 18px;border:0;border-radius:18px;cursor:pointer;
  background:#333;color:#fff;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.stop-fab.show{display:block}

/* ===== 设置区大按钮 ===== */
.action-col{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.action-btn{
  display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;
  border:1px solid rgba(79,124,255,.2);border-radius:13px;
  background:linear-gradient(135deg,#f5f8ff,#fdf5ff);color:var(--txt);
  font-size:14px;font-weight:600;cursor:pointer;
}
.action-btn svg{width:20px;height:20px;color:#6a7dff}
.action-btn:active{transform:scale(.98)}

/* ===== 音乐面板 ===== */
.music-panel{
  position:fixed;inset:0;z-index:100000;background:#f6f8ff;
  display:flex;flex-direction:column;
}
.music-panel.landscape{background:transparent}
.mp-header{display:flex;flex-direction:column;gap:10px;padding:calc(10px + var(--safe-top)) 12px 10px;align-items:stretch}
.mp-back{width:38px;height:38px;border:0;border-radius:12px;background:#eef2ff;color:#5b6fd6;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;align-self:flex-start}
.mp-back svg{width:20px;height:20px}
/* GooseHyperGlass 液滴搜索框：照搬官方 demo .frame.single 容器（shader 自己画 NASA 月亮图折射） */
.mp-search-wrap{position:relative;width:100%;height:190px;overflow:hidden;border-radius:24px;background:transparent;}
#mpGlassSearch{display:block;width:100%;height:100%;}
/* Siri 声纹覆盖层：录音中浮现 */
/* Siri 声纹：点麦克风后弹出的开源 siri-wave orb，原比例居中 */
.mp-siri{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:200px;height:200px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:5;border-radius:50%;overflow:hidden;}
.mp-siri.listening{opacity:1;pointer-events:auto;}
.mp-siri liquid-glass{display:block;width:100%;height:100%;}
html.no-lg2 #mpGlassSearch{display:none}
html.no-lg2 #mpSearch{display:block !important;flex:1;height:42px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:#fff;font-size:14px;outline:none}
/* 按钮全部移到搜索框下方 */
.mp-actions{display:flex;gap:8px;align-items:center}
.mp-header input{flex:1;height:38px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:#fff;font-size:14px;outline:none}
.mp-go{height:38px;padding:0 14px;border:0;border-radius:12px;background:linear-gradient(135deg,#4f7cff,#8a5cff);color:#fff;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0;font-size:13px}
.mp-tabs{display:flex;gap:8px;padding:0 12px 10px}
.mp-tabs button{flex:1;height:34px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--txt2);font-size:13px;cursor:pointer}
.mp-tabs button.active{background:linear-gradient(135deg,#4f7cff,#8a5cff);color:#fff;border-color:transparent}
.mp-list{flex:1;overflow-y:auto;padding:0 12px 150px}
.mp-empty{text-align:center;color:var(--txt3);padding:40px 0;font-size:13px}
.mp-item{
  display:flex;align-items:center;gap:11px;padding:10px;border-radius:13px;
  background:#fff;margin-bottom:7px;cursor:pointer;border:1px solid var(--line);
}
.mp-item:active{background:#eef2ff}
.mp-item img{width:44px;height:44px;border-radius:9px;object-fit:cover;background:#e6ebf7;flex-shrink:0}
.mp-item .blank-cover{width:44px;height:44px;border-radius:9px;background:linear-gradient(135deg,#dfe8ff,#f0e2ff);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#9fb0e0}
.mp-item .blank-cover svg{width:20px;height:20px}
.mp-item .info{flex:1;min-width:0}
.mp-item .name{font-size:14px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-item .artist{font-size:12px;color:var(--txt2);margin-top:2px}
.mp-item .artist a{color:var(--blue);text-decoration:none}
.vip-tag{color:#d4a017;font-weight:700;font-size:11px;margin-left:6px;border:1px solid #e8c86a;padding:0 5px;border-radius:5px;background:#fff8e1}

.mp-player{
  position:absolute;left:10px;right:10px;bottom:calc(10px + var(--safe-bottom));
  height:66px;border-radius:18px;background:rgba(255,255,255,.95);
  box-shadow:0 8px 30px rgba(80,100,200,.18);
  display:flex;align-items:center;gap:11px;padding:0 12px;
  border:1px solid var(--line);
}
.mp-disc{width:46px;height:46px;border-radius:50%;overflow:hidden;flex-shrink:0;border:3px solid #dfe6ff;animation:discSpin 6s linear infinite;animation-play-state:paused}
.mp-disc.playing{animation-play-state:running}
.mp-disc img{width:100%;height:100%;object-fit:cover}
.mp-meta{flex:1;min-width:0}
.mp-t{font-size:13px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-a{font-size:11px;color:var(--txt2);margin-top:2px}
.mp-play{width:42px;height:42px;border:0;border-radius:50%;background:linear-gradient(135deg,#4f7cff,#8a5cff);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mp-play svg{width:20px;height:20px}
@keyframes discSpin{to{transform:rotate(360deg)}}

/* 高级横屏模式 */
.music-panel.landscape .mp-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-content:start;padding:0 20px 120px}
.music-panel.landscape .mp-item{flex-direction:column;text-align:center;padding:14px}
.music-panel.landscape .mp-item img,.music-panel.landscape .mp-item .blank-cover{width:100%;aspect-ratio:1;height:auto}
.music-panel.landscape .mp-player{right:40%;left:20px}

/* 作者弹层 */
.artist-modal{position:fixed;inset:0;z-index:100001;background:rgba(30,40,90,.4);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center}
.artist-card{width:86%;max-width:340px;max-height:80vh;overflow-y:auto;background:#fff;border-radius:22px;padding:20px;position:relative;text-align:center}
.artist-x{position:absolute;top:10px;right:12px;width:30px;height:30px;border:0;background:#f0f3fa;border-radius:50%;font-size:18px;cursor:pointer;color:var(--txt2)}
.artist-card img.av{width:90px;height:90px;border-radius:50%;object-fit:cover;margin:8px auto;background:#e6ebf7}
.artist-name{font-size:17px;font-weight:700;color:var(--txt)}
.artist-sub{font-size:12px;color:var(--txt3);margin:12px 0 6px;text-align:left}
.artist-songs{text-align:left}
.artist-songs div{padding:7px 4px;font-size:13px;color:var(--txt2);border-top:1px solid var(--line)}

/* 致用户信 */
.letter-modal{position:fixed;inset:0;z-index:100001;background:rgba(30,40,90,.4);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}
#userModal{display:block;padding:0;background:#f5f7fc}
.letter-box{background:#fff;border-radius:22px;padding:26px 22px;max-width:420px;max-height:85vh;overflow-y:auto;position:relative}
.letter-x{position:absolute;right:16px;top:14px;font-size:24px;color:#999;cursor:pointer;line-height:1;z-index:1}
#userModal{display:block;padding:0;background:#f5f7fc}
#userModal .letter-box{max-width:none;max-height:none;height:100%;border-radius:0;padding:calc(60px + var(--safe-top)) 20px 40px;overflow-y:auto;background:#f5f7fc}
#userModal .letter-x{top:calc(20px + var(--safe-top));right:20px;color:#333;font-size:28px}
.letter-card{background:#fff;border-radius:22px;padding:26px 22px;max-width:420px;max-height:85vh;overflow-y:auto;position:relative}
.letter-card h3{margin:0 0 12px;color:var(--txt)}
.letter-card p{font-size:13.5px;line-height:1.8;color:#4a5468;margin:8px 0}
.letter-link{word-break:break-all}
.letter-link a{color:#4f7cff}

/* 频谱声波环（音乐节奏背景） */
.beat-ring{position:fixed;left:50%;top:50%;width:20vmin;height:20vmin;border-radius:50%;
  border:2px solid rgba(120,150,255,.35);transform:translate(-50%,-50%);pointer-events:none;z-index:1;opacity:0}

/* 音乐播放器控制区 */
.mp-ctrls{display:flex;align-items:center;gap:6px;flex-shrink:0}
.mp-ctrl{width:34px;height:34px;border:0;border-radius:50%;background:#eef2ff;color:#5b6fd6;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mp-ctrl svg{width:16px;height:16px}
.mp-ctrl:active{background:#dde5ff}
.mp-mode{height:30px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--txt2);font-size:11px;cursor:pointer;flex-shrink:0}
.mp-lyric{font-size:11px;color:var(--txt3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}

/* 进度条 */
.mp-progress{position:absolute;left:10px;right:10px;bottom:calc(78px + var(--safe-bottom));display:flex;align-items:center;gap:8px}
.mp-time{font-size:10px;color:var(--txt3);font-variant-numeric:tabular-nums;flex-shrink:0;min-width:32px;text-align:center}
.mp-bar{flex:1;height:20px;display:flex;align-items:center;cursor:pointer;position:relative;touch-action:none}
.mp-bar::before{content:'';position:absolute;left:0;right:0;top:50%;height:6px;background:#dfe6f7;border-radius:3px;transform:translateY(-50%)}
.mp-fill{position:relative;height:6px;width:0;background:linear-gradient(90deg,#4f7cff,#8a5cff);border-radius:3px;transition:width .1s linear}
.mp-fill::after{content:'';position:absolute;right:-6px;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(79,124,255,.5);transform:translateY(-50%)}
.mp-lg-slider{flex:1;height:28px;min-width:0}

/* 悬浮可拖碟片 */
.float-disc{position:fixed;z-index:99996;width:56px;height:56px;border-radius:50%;overflow:hidden;
  border:3px solid rgba(255,255,255,.85);box-shadow:0 6px 24px rgba(0,0,0,.3);cursor:pointer;
  animation:discSpin 6s linear infinite;animation-play-state:paused;background:#1a1f35}
.float-disc.playing{animation-play-state:running}
.float-disc img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes discSpin{to{transform:rotate(360deg)}}

/* 悬浮碟片展开的歌词条 */
.lyric-panel{position:fixed;left:16px;right:16px;bottom:calc(100px + var(--safe-bottom));z-index:99995;
  background:rgba(20,25,50,.88);backdrop-filter:blur(10px);border-radius:16px;padding:14px 18px;
  color:#fff;display:none;border:1px solid rgba(255,255,255,.12)}
.lyric-panel.show{display:block}
.lp-close{position:absolute;top:6px;right:10px;width:24px;height:24px;border:0;background:transparent;color:rgba(255,255,255,.6);font-size:18px;cursor:pointer}
.lp-text{font-size:15px;line-height:1.6;text-align:center;min-height:24px}

/* 背景大字歌词 */
.bg-lyric{position:fixed;left:0;right:0;top:38%;z-index:1;text-align:center;pointer-events:none;
  font-size:22px;font-weight:600;color:rgba(255,255,255,.85);text-shadow:0 2px 12px rgba(0,0,0,.6);
  opacity:0;transition:opacity .4s;padding:0 40px;line-height:1.5}

/* 全屏音乐模式 */
.full-player{position:fixed;inset:0;z-index:100002;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:20px 40px;background:transparent;touch-action:none}
.fp-left{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 40px}
.fp-right{flex:1;display:flex;align-items:center;justify-content:center}
.fp-close{position:absolute;top:calc(16px + var(--safe-top));right:20px;font-size:32px;color:#fff;cursor:pointer;z-index:10;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.fp-disc-wrap{width:280px;height:280px;display:flex;align-items:center;justify-content:center;margin-bottom:30px}
.fp-disc{width:260px;height:260px;border-radius:50%;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:fpSpin 20s linear infinite;animation-play-state:paused}
.fp-disc.playing{animation-play-state:running}
.fp-disc img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.fp-disc-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#333,#113);z-index:2;box-shadow:0 0 0 4px rgba(255,255,255,.15)}
@keyframes fpSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.fp-info{text-align:center;margin-bottom:20px;z-index:5}
.fp-title{font-size:22px;font-weight:700;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.4);max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-artist{font-size:14px;color:rgba(255,255,255,.8);margin-top:6px;text-shadow:0 1px 6px rgba(0,0,0,.3)}
.fp-lyric{font-size:24px;color:#fff;text-align:left;max-width:500px;min-height:44px;text-shadow:0 0 20px rgba(120,180,255,.6),0 1px 8px rgba(0,0,0,.4);margin:20px 0;z-index:5;transition:opacity .3s,transform .3s;letter-spacing:2px}
.fp-seek{display:flex;align-items:center;gap:10px;width:100%;max-width:400px;margin:10px 0;color:#fff;font-size:12px}
.fp-controls{display:flex;align-items:center;gap:30px;z-index:5;margin-top:10px}
.fp-controls button{background:rgba(255,255,255,.15);border:0;border-radius:50%;width:64px;height:64px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;backdrop-filter:blur(10px)}
.fp-controls #fpPlay{width:80px;height:80px;background:rgba(255,255,255,.25)}