:root{
  --bg0:#070a1a; --bg1:#0d1230; --bg2:#161a3f;
  --ink:#eef1ff; --ink2:#a9b0d8; --ink3:#6f77a8;
  --acc:#8f7bff; --acc2:#5fd7ff; --warm:#ffb86b; --danger:#ff8a8a;
  --glass:rgba(255,255,255,.06); --glass2:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.12);
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --r:18px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg0)}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
#app{position:fixed;inset:0;display:flex;flex-direction:column}
.bg-aurora{position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:radial-gradient(45% 35% at 18% 12%,rgba(143,123,255,.30),transparent 70%),
             radial-gradient(40% 32% at 85% 20%,rgba(95,215,255,.20),transparent 70%),
             radial-gradient(50% 40% at 50% 95%,rgba(255,138,180,.16),transparent 70%);
  filter:blur(30px);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.12)}}

header{position:relative;z-index:2;padding:calc(env(safe-area-inset-top,0px) + 16px) 18px 10px;display:flex;align-items:center;gap:10px}
.logo{width:30px;height:30px;border-radius:10px;flex:0 0 auto;
  background:conic-gradient(from 200deg,var(--acc),var(--acc2),#ff8ab4,var(--acc));
  box-shadow:0 0 22px rgba(143,123,255,.55)}
.brand{font-size:17px;font-weight:700;letter-spacing:.5px}
.brand small{display:block;font-size:10.5px;font-weight:400;color:var(--ink3);letter-spacing:1.6px}
main{position:relative;z-index:1;flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:6px 16px 110px;scrollbar-width:none}
main::-webkit-scrollbar{display:none}

nav{position:absolute;left:0;right:0;bottom:0;z-index:20;padding:8px 2px calc(var(--safe-b) + 8px);
  background:linear-gradient(to top,rgba(7,10,26,.96),rgba(7,10,26,.72) 60%,transparent);
  display:flex;backdrop-filter:blur(14px)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0;color:var(--ink3);
  font-size:10px;cursor:pointer;transition:.22s;border:0;background:none;font-family:inherit}
.tab svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--ink)}
.tab.on svg{stroke:var(--acc2);filter:drop-shadow(0 0 7px rgba(95,215,255,.7))}

.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:16px;backdrop-filter:blur(12px);box-shadow:var(--shadow)}
.h1{font-size:22px;font-weight:700;line-height:1.35;margin:2px 0 6px}
.sub{color:var(--ink2);font-size:13.5px}
.tag{display:inline-block;font-size:11px;color:var(--acc2);border:1px solid rgba(95,215,255,.35);
  border-radius:99px;padding:2px 9px;margin-bottom:10px}
.btn{display:block;width:100%;border:0;border-radius:14px;padding:14px;font-size:15px;font-weight:600;
  font-family:inherit;cursor:pointer;background:linear-gradient(96deg,var(--acc),#6ea8ff);color:#fff;
  box-shadow:0 8px 26px rgba(120,110,255,.35);transition:.18s}
.btn:active{transform:scale(.98);opacity:.92}
.btn:disabled{opacity:.6}
.btn.ghost{background:var(--glass2);border:1px solid var(--line);color:var(--ink);box-shadow:none}
.btn.sm{padding:10px 14px;font-size:13.5px;border-radius:12px;width:auto;display:inline-block}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.entry{position:relative;border-radius:var(--r);padding:15px 14px 13px;border:1px solid var(--line);
  background:var(--glass);cursor:pointer;overflow:hidden;transition:.2s;min-height:104px;
  display:flex;flex-direction:column;justify-content:space-between}
.entry:active{transform:scale(.975)}
.entry .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;margin-bottom:8px;
  background:rgba(255,255,255,.08);border:1px solid var(--line)}
.entry .ic svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.entry b{font-size:15px;font-weight:650;display:block}
.entry span{font-size:11.5px;color:var(--ink3);line-height:1.45;display:block;margin-top:3px}
.entry:before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(70% 60% at 88% 6%,var(--g1,rgba(143,123,255,.35)),transparent 72%)}

/* ===== 问候卡 + 精灵 IP ===== */
.hello{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:16px 16px 12px;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(140deg,rgba(143,123,255,.16),rgba(95,215,255,.06) 60%,transparent);
  overflow:hidden;position:relative}
.hello:before{content:"";position:absolute;width:200px;height:200px;right:-70px;top:-90px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%)}
.helloTxt{flex:1;min-width:0;position:relative;z-index:1}
.helloTxt .h1{font-size:20px;margin:0 0 4px}
.helloTxt .sub{font-size:12.5px;line-height:1.6}
.spriteWrap{flex:0 0 auto;width:110px;text-align:center;position:relative;z-index:1;
  perspective:600px;perspective-origin:50% 45%}
.sprite3d{transform-style:preserve-3d;transition:transform .18s ease-out;display:block}
.sprite3d canvas{display:block}
.sprite2d{display:none;width:96px;height:96px;animation:bob 3.6s ease-in-out infinite}
.spriteName{font-size:10px;color:var(--ink3);letter-spacing:.5px;margin-top:2px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ===== 主按钮：动态流光 ===== */
.btn.flow{position:relative;overflow:hidden;
  background:linear-gradient(96deg,#7a63ff,#5f8dff 45%,#4fd6ff);background-size:220% 100%;
  animation:flowbg 6s ease-in-out infinite}
.btn.flow:after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);animation:shine 3.4s ease-in-out infinite}
@keyframes flowbg{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes shine{0%{left:-45%}55%,100%{left:120%}}

/* ===== 一分钟微治愈 ===== */
.quick60{display:flex;align-items:center;gap:12px;margin-top:12px;padding:14px 15px;
  border-radius:var(--r);cursor:pointer;transition:.2s;
  border:1px solid rgba(255,184,107,.34);
  background:linear-gradient(120deg,rgba(255,184,107,.16),rgba(255,138,180,.08) 70%,transparent)}
.quick60:active{transform:scale(.985)}
.q60ic{width:38px;height:38px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,184,107,.16);border:1px solid rgba(255,184,107,.3)}
.q60ic svg{width:20px;height:20px;stroke:var(--warm);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.q60tx{flex:1;min-width:0}
.q60tx b{display:block;font-size:15px;font-weight:650}
.q60tx span{display:block;font-size:11.5px;color:var(--ink3);line-height:1.5;margin-top:2px}
.q60go{flex:0 0 auto;font-size:12.5px;font-weight:600;color:var(--warm);
  border:1px solid rgba(255,184,107,.4);border-radius:99px;padding:5px 13px}

/* ===== 幻境预览轮播 ===== */
.secHead{display:flex;align-items:baseline;justify-content:space-between;margin:20px 2px 10px}
.secHead b{font-size:15px;font-weight:650}
.secHead span{font-size:11px;color:var(--ink3);letter-spacing:.3px}
.carousel{display:flex;gap:11px;overflow-x:auto;padding:2px 0 6px;scroll-snap-type:x mandatory;
  scrollbar-width:none;margin:0 -16px;padding-left:16px;padding-right:16px}
.carousel::-webkit-scrollbar{display:none}
.pvCard{flex:0 0 auto;width:132px;height:170px;border-radius:16px;scroll-snap-align:start;
  position:relative;overflow:hidden;cursor:pointer;border:1px solid var(--line);transition:.2s}
.pvCard:active{transform:scale(.97)}
.pvFx{position:absolute;inset:0}
.pvTx{position:absolute;left:0;right:0;bottom:0;padding:11px 12px 12px;
  background:linear-gradient(to top,rgba(6,9,24,.88),transparent);
  transform:translateZ(0)}
.pvTx b{display:block;font-size:14.5px;font-weight:650;letter-spacing:1px}
.pvTx span{display:block;font-size:10.5px;color:rgba(255,255,255,.55);margin-top:2px;line-height:1.4}
.pv-star .pvFx{background:radial-gradient(80% 60% at 50% 30%,rgba(90,70,190,.65),transparent 70%),linear-gradient(180deg,#0a0f2c,#141338)}
.pv-star .pvFx:after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(1.4px 1.4px at 20% 22%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 68% 15%,#cfe,transparent),
    radial-gradient(1.6px 1.6px at 42% 45%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 82% 52%,#fff,transparent),
    radial-gradient(1.3px 1.3px at 30% 66%,#dde,transparent),
    radial-gradient(1px 1px at 58% 78%,#fff,transparent);
  animation:twinkle 3.2s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.35}to{opacity:1}}
.pv-fire .pvFx{background:radial-gradient(70% 55% at 50% 70%,rgba(120,190,80,.42),transparent 72%),linear-gradient(180deg,#07160f,#0d1c22)}
.pv-fire .pvFx:after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(6px 6px at 30% 60%,rgba(210,255,140,.85),transparent 60%),
    radial-gradient(5px 5px at 62% 40%,rgba(255,255,190,.8),transparent 60%),
    radial-gradient(7px 7px at 48% 78%,rgba(190,255,150,.7),transparent 60%);
  animation:floaty 4.4s ease-in-out infinite alternate}
@keyframes floaty{from{transform:translate3d(0,0,0);opacity:.55}to{transform:translate3d(6px,-10px,0);opacity:1}}
.pv-blossom .pvFx{background:linear-gradient(180deg,rgba(255,150,190,.28),transparent 70%),linear-gradient(180deg,#2a1030,#3a1436)}
.pv-blossom .pvFx:after{content:"";position:absolute;inset:-20%;
  background-image:radial-gradient(7px 4px at 25% 15%,rgba(255,180,205,.9),transparent 60%),
    radial-gradient(6px 4px at 65% 30%,rgba(255,215,160,.85),transparent 60%),
    radial-gradient(7px 4px at 45% 55%,rgba(255,175,210,.8),transparent 60%),
    radial-gradient(6px 4px at 78% 70%,rgba(240,190,255,.8),transparent 60%);
  animation:fall 6s linear infinite}
@keyframes fall{from{transform:translateY(-24%)}to{transform:translateY(30%)}}
.pv-cloud .pvFx{background:linear-gradient(180deg,#1b2a52,#37507f 55%,#6d7fae)}
.pv-cloud .pvFx:after{content:"";position:absolute;inset:-10%;
  background-image:radial-gradient(60px 26px at 25% 55%,rgba(255,255,255,.4),transparent 65%),
    radial-gradient(80px 30px at 70% 70%,rgba(255,255,255,.3),transparent 65%),
    radial-gradient(50px 22px at 55% 40%,rgba(255,255,255,.28),transparent 65%);
  animation:driftc 9s linear infinite}
@keyframes driftc{from{transform:translateX(-14%)}to{transform:translateX(14%)}}
.pv-halo .pvFx{background:radial-gradient(50% 40% at 50% 45%,rgba(160,140,255,.6),transparent 70%),linear-gradient(180deg,#120f30,#1d1745)}
.pv-halo .pvFx:after{content:"";position:absolute;left:50%;top:45%;width:96px;height:96px;margin:-48px 0 0 -48px;
  border-radius:50%;border:1px solid rgba(190,205,255,.5);animation:halop 4s ease-out infinite}
@keyframes halop{0%{transform:scale(.35);opacity:.85}100%{transform:scale(1.5);opacity:0}}

/* ===== 日签 ===== */
.daily{background:linear-gradient(150deg,rgba(143,123,255,.24),rgba(95,215,255,.10) 55%,rgba(255,138,180,.12));
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:22px 20px;position:relative;overflow:hidden;margin-top:16px}
.daily:before{content:"";position:absolute;width:170px;height:170px;right:-60px;top:-70px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.10),transparent 68%)}
/* 日签背景：按日期程序化生成，每天一张不重样 */
.dailyBg{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:var(--r);
  opacity:.92;transition:opacity .5s}
.dailyIn{position:relative;z-index:1}
.daily p{text-shadow:0 2px 14px rgba(0,0,0,.55)}
.daily .from{text-shadow:0 1px 8px rgba(0,0,0,.5)}
.daily p{font-size:16.5px;line-height:1.95;margin:14px 0 12px;font-weight:300;letter-spacing:.6px}
.daily .from{font-size:11.5px;color:rgba(255,255,255,.55);letter-spacing:1.4px}
.dailyActs{display:flex;align-items:center;justify-content:space-between;gap:10px}
.miniBtn{flex:0 0 auto;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);
  color:#fff;font-size:11.5px;border-radius:99px;padding:5px 13px;cursor:pointer;font-family:inherit}
.moods{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.moodTag{font-size:11.5px;color:var(--acc2);border:1px solid rgba(95,215,255,.28);
  background:rgba(95,215,255,.07);border-radius:99px;padding:4px 11px}

/* AR 页 */
#arPage{position:fixed;inset:0;z-index:50;display:none;flex-direction:column;background:#04060f}
#arPage.on{display:flex}
#arStage{position:absolute;inset:0;overflow:hidden;background:#04060f}
#cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  filter:saturate(.78) brightness(.80) blur(.45px) contrast(1.04);transform:scale(1.06);transition:opacity .8s;opacity:0}
#cam.on{opacity:1}
#fallback{position:absolute;inset:0;z-index:0;transition:opacity .8s;
  background:radial-gradient(60% 45% at 50% 78%,rgba(90,70,160,.42),transparent 70%),
             radial-gradient(50% 40% at 20% 20%,rgba(40,80,140,.35),transparent 70%),
             linear-gradient(180deg,#080c1e 0%,#0d1230 55%,#1a1338 100%)}
#fallback:after{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.028) 0 2px,transparent 2px 9px)}
#arStage.cam-on #fallback{opacity:.18}
#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;z-index:2}
.arTop{position:relative;z-index:3;padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 0;
  display:flex;justify-content:space-between;align-items:flex-start}
.arHint{font-size:11.5px;color:rgba(255,255,255,.62);letter-spacing:.4px;display:flex;align-items:center;gap:6px}
.dot{width:6px;height:6px;border-radius:50%;background:#6ef0b0;box-shadow:0 0 9px #6ef0b0;animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}
.arMeta{display:flex;align-items:center;gap:10px}
#arFps{font-size:10.5px;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums}
.closeAr{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);color:#fff;font-size:17px;line-height:1;display:grid;place-items:center;cursor:pointer}
.arTitle{position:absolute;left:0;right:0;bottom:172px;z-index:3;text-align:center;pointer-events:none}
.arTitle h2{font-size:24px;font-weight:300;letter-spacing:5px;margin:0;color:rgba(255,255,255,.9);text-shadow:0 2px 26px rgba(0,0,0,.7)}
.arTitle p{font-size:12px;color:rgba(255,255,255,.5);letter-spacing:2px;margin:8px 0 0}
.arTip{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) scale(.94);z-index:3;
  font-size:12.5px;color:rgba(255,255,255,.8);letter-spacing:1px;padding:8px 16px;border-radius:99px;
  background:rgba(10,14,32,.5);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);
  opacity:0;transition:.5s;pointer-events:none;white-space:nowrap}
.arTip.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.arBar{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:14px 12px calc(var(--safe-b) + 14px);
  background:linear-gradient(to top,rgba(4,6,15,.9),transparent)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 4px 12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.72);padding:7px 14px;border-radius:99px;font-size:12.5px;cursor:pointer;transition:.2s;font-family:inherit}
.chip.on{background:rgba(255,255,255,.92);color:#10132b;border-color:transparent;font-weight:600}
.arActs{display:flex;gap:9px}
.arActs .btn{flex:1;font-size:13.5px;padding:12px}

/* AI 标识 */
.aiBar{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink3);letter-spacing:.2px;line-height:1.5;
  padding:8px 11px;border-radius:11px;background:rgba(95,215,255,.06);border:1px solid rgba(95,215,255,.18);margin-bottom:6px}
.aiBar i{font-style:normal;font-size:9.5px;font-weight:700;color:var(--acc2);border:1px solid rgba(95,215,255,.45);
  border-radius:4px;padding:0 4px;line-height:13px;flex:0 0 auto}

/* 聊天 */
.roleSel{display:flex;gap:8px;margin:10px 0 8px}
.roleSel div{flex:1;text-align:center;padding:11px 4px;border-radius:13px;border:1px solid var(--line);
  background:var(--glass);font-size:13px;color:var(--ink2);cursor:pointer;transition:.2s}
.roleSel div.on{background:linear-gradient(120deg,rgba(143,123,255,.34),rgba(95,215,255,.2));
  border-color:rgba(143,123,255,.6);color:#fff;font-weight:600}
.quickSwitch{margin:0 0 10px;font-size:12px;color:var(--ink3)}
.quickSwitch label{display:flex;align-items:center;gap:8px;cursor:pointer}
.quickSwitch input{width:16px;height:16px;accent-color:var(--warm);flex:0 0 auto}
#chat{display:flex;flex-direction:column;gap:12px;padding:6px 0 8px}
.msg{max-width:84%;padding:11px 14px;border-radius:16px;font-size:14.3px;line-height:1.72;
  animation:up .34s ease;word-break:break-word}
@keyframes up{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.msg.ai{align-self:flex-start;background:var(--glass);border:1px solid var(--line);border-bottom-left-radius:5px;position:relative}
.msg.ai:before{content:"AI";position:absolute;left:-4px;top:-8px;font-size:9px;letter-spacing:.5px;
  background:rgba(15,20,48,.95);border:1px solid rgba(95,215,255,.4);color:var(--acc2);
  border-radius:5px;padding:0 4px;line-height:13px;font-weight:600}
.msg.me{align-self:flex-end;background:linear-gradient(100deg,var(--acc),#5f8dff);border-bottom-right-radius:5px}
.srcTag{align-self:flex-start;font-size:10px;color:var(--ink3);margin:-6px 0 0 4px}
.typing{display:flex;gap:4px;padding:14px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink3);animation:bounce 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}
.quick{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.quick button{border:1px solid var(--line);background:var(--glass);color:var(--ink2);border-radius:99px;
  padding:7px 12px;font-size:12.5px;cursor:pointer;font-family:inherit}

/* 树洞 → AR 推荐卡 */
.recoCard{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:15px;margin-top:2px;
  border:1px solid rgba(95,215,255,.3);background:linear-gradient(120deg,rgba(95,215,255,.13),rgba(143,123,255,.09))}
.recoIc{width:32px;height:32px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;
  background:rgba(95,215,255,.16);border:1px solid rgba(95,215,255,.3)}
.recoIc svg{width:17px;height:17px;stroke:var(--acc2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.recoTx{flex:1;min-width:0}
.recoTip{font-size:12.5px;color:var(--ink2);line-height:1.6}
.recoName{font-size:13.5px;font-weight:600;margin-top:3px}
.recoName span{font-weight:400;font-size:11px;color:var(--ink3);margin-left:6px}
.recoGo{flex:0 0 auto;border:0;border-radius:99px;padding:7px 15px;font-size:12.5px;font-weight:600;
  color:#0d1230;background:linear-gradient(100deg,var(--acc2),#9fe8ff);cursor:pointer;font-family:inherit}

.inputBar{position:sticky;bottom:0;display:flex;gap:8px;padding:10px 0 calc(10px + var(--safe-b));
  background:linear-gradient(to top,var(--bg0) 55%,transparent)}
.inputBar input{flex:1;border:1px solid var(--line);background:var(--glass);border-radius:14px;padding:12px 15px;
  color:var(--ink);font-size:14.5px;outline:none;font-family:inherit}
.inputBar input::placeholder{color:var(--ink3)}
.send{border:0;border-radius:14px;padding:0 17px;background:linear-gradient(100deg,var(--acc),#5f8dff);
  color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}

/* 自测 */
.qMeta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink3);margin-bottom:8px}
.bar{height:4px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;margin-bottom:18px}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--acc),var(--acc2));
  transition:width .45s cubic-bezier(.4,0,.2,1)}
.qTitle{font-size:18px;font-weight:650;line-height:1.5;margin-bottom:16px}
.opt{display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:14px;border:1px solid var(--line);
  background:var(--glass);margin-bottom:9px;cursor:pointer;transition:.2s;font-size:14.3px}
.opt:active{transform:scale(.985)}
.opt.pick{border-color:rgba(143,123,255,.75);background:linear-gradient(120deg,rgba(143,123,255,.22),rgba(95,215,255,.1))}
.opt em{font-style:normal;width:22px;height:22px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-size:11.5px;color:var(--ink3)}
.opt.pick em{background:var(--acc);border-color:transparent;color:#fff}
.score{font-size:56px;font-weight:200;line-height:1;text-align:center;
  background:linear-gradient(180deg,#fff,var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.dim{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:13.5px}
.dim:last-child{border:0}
.dim span:last-child{color:var(--acc2);font-variant-numeric:tabular-nums}

/* 呼吸 + 白噪音 */
#breath{width:230px;height:230px;margin:22px auto 6px;position:relative;display:grid;place-items:center}
.ring{position:absolute;border-radius:50%;border:1px solid rgba(143,123,255,.28)}
.core{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.92),rgba(143,123,255,.55) 45%,rgba(95,215,255,.14) 78%);
  box-shadow:0 0 70px rgba(143,123,255,.55);transition:transform 1s cubic-bezier(.45,0,.25,1)}
.coreTxt{font-size:14px;color:#0d1230;font-weight:700}
#phaseTxt{text-align:center;font-size:19px;font-weight:300;letter-spacing:3px;margin-top:8px}
#countTxt{text-align:center;font-size:12px;color:var(--ink3);letter-spacing:1px;margin-top:4px}
.noise{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.noise div{padding:14px 6px;border-radius:14px;border:1px solid var(--line);background:var(--glass);
  text-align:center;font-size:13px;color:var(--ink2);cursor:pointer;transition:.2s}
.noise div.on{border-color:rgba(95,215,255,.6);background:linear-gradient(120deg,rgba(95,215,255,.22),rgba(143,123,255,.16));color:#fff}
.noise div small{display:block;font-size:10.5px;color:var(--ink3);margin-top:3px}
.checkin{display:flex;gap:6px;margin-top:12px}
.checkin i{flex:1;height:34px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid var(--line);
  display:grid;place-items:center;font-size:10px;color:var(--ink3);font-style:normal}
.checkin i.on{background:linear-gradient(140deg,rgba(143,123,255,.55),rgba(95,215,255,.35));color:#fff;border-color:transparent}

/* 通用 */
.sos{margin-top:14px;border-radius:var(--r);border:1px solid rgba(255,120,120,.35);background:rgba(255,90,90,.10);padding:14px}
.sos b{color:#ff9d9d;font-size:13.5px;display:block;margin-bottom:6px}
.sos p{margin:0;font-size:12.5px;color:var(--ink2);line-height:1.7}
.sos a{color:#ffbe9d;text-decoration:none;font-weight:600}
.note{font-size:11.5px;color:var(--ink3);line-height:1.75;margin-top:14px;padding:11px 13px;
  border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.row:last-child{border:0}
.row span{font-size:14px}
.row em{font-style:normal;font-size:12.5px;color:var(--ink3)}
.toast{position:fixed;left:50%;top:14%;transform:translateX(-50%);z-index:99;background:rgba(20,24,54,.96);
  border:1px solid var(--line);border-radius:12px;padding:10px 18px;font-size:13px;opacity:0;transition:.3s;
  pointer-events:none;max-width:80%;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(6px)}
.mask{position:fixed;inset:0;z-index:200;background:rgba(3,5,14,.74);display:none;align-items:center;justify-content:center;
  padding:26px;backdrop-filter:blur(4px)}
.mask.on{display:flex}
.modal{background:linear-gradient(160deg,#171c3e,#0d1230);border:1px solid var(--line);border-radius:20px;
  padding:22px 20px 18px;max-width:340px;width:100%;box-shadow:0 24px 70px rgba(0,0,0,.62);
  max-height:86vh;overflow-y:auto}
.modal h3{margin:0 0 10px;font-size:16.5px;font-weight:650}
.modal p{margin:0 0 18px;font-size:13.5px;color:var(--ink2);line-height:1.85}
.page{display:none;animation:fade .32s ease}
.page.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============ 疗愈音乐 ============ */
.musicBar{margin-top:10px;padding:12px 12px 10px;border-radius:var(--r);
  background:linear-gradient(140deg,rgba(143,123,255,.14),rgba(95,215,255,.07));
  border:1px solid var(--line)}
.mTracks{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.mTracks::-webkit-scrollbar{display:none}
.mTrack{flex:0 0 auto;min-width:92px;padding:10px 12px;border-radius:14px;cursor:pointer;
  background:var(--glass);border:1px solid var(--line);transition:.2s;position:relative;overflow:hidden}
.mTrack b{display:block;font-size:13.5px;font-weight:600;letter-spacing:.5px}
.mTrack span{display:block;font-size:10.5px;color:var(--ink3);margin-top:2px;white-space:nowrap}
.mTrack.on{background:linear-gradient(120deg,rgba(143,123,255,.38),rgba(95,215,255,.22));
  border-color:rgba(143,123,255,.55);box-shadow:0 0 18px rgba(143,123,255,.28)}
/* 播放中的均衡器 */
.mEq{display:flex;align-items:flex-end;gap:2px;height:11px;margin-bottom:6px}
.mEq i{width:2.5px;height:3px;border-radius:2px;background:var(--ink3);transition:.2s}
.mTrack.on .mEq i{background:linear-gradient(180deg,var(--acc2),var(--acc));animation:eq .9s ease-in-out infinite}
.mTrack.on .mEq i:nth-child(2){animation-delay:.18s}
.mTrack.on .mEq i:nth-child(3){animation-delay:.36s}
@keyframes eq{0%,100%{height:3px}50%{height:11px}}
/* 音量 */
.mVol{display:flex;align-items:center;gap:9px;margin-top:11px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
.mVolIc{width:15px;height:15px;flex:0 0 auto;stroke:var(--ink3);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mVol input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--acc),var(--acc2));outline:none}
.mVol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4);cursor:pointer}
.mVol input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff;cursor:pointer}

/* 全局悬浮音乐钮 */
.mFab{position:fixed;right:14px;bottom:calc(var(--safe-b) + 66px);z-index:30;
  display:flex;align-items:center;gap:6px;padding:8px 13px 8px 10px;border-radius:22px;
  background:rgba(13,18,48,.82);border:1px solid rgba(143,123,255,.42);
  backdrop-filter:blur(12px);box-shadow:var(--shadow);cursor:pointer;
  opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;transition:.28s}
.mFab.on{opacity:1;transform:none;pointer-events:auto}
.mFab svg{width:15px;height:15px;stroke:var(--acc2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mFabTxt{font-size:11.5px;color:var(--ink2);letter-spacing:.5px}
.mFab.on svg{animation:eq2 1.6s ease-in-out infinite}
@keyframes eq2{0%,100%{opacity:.55}50%{opacity:1}}

/* ===================== 心歌 · AI 现写一首 ===================== */
.songMoods{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 10px}
.songMoods>div{padding:7px 14px;border-radius:999px;font-size:12.5px;color:var(--ink2);
  background:var(--glass);border:1px solid var(--line);cursor:pointer;transition:.2s}
.songMoods>div.on{color:#0d1230;background:linear-gradient(135deg,var(--acc2),var(--acc));
  border-color:transparent;font-weight:600;box-shadow:0 4px 16px rgba(143,123,255,.35)}

.songInput{display:flex;gap:8px;margin-bottom:6px}
.songInput input{flex:1;min-width:0;padding:11px 14px;border-radius:14px;font-size:13.5px;
  border:1px solid var(--line);background:var(--glass);color:var(--ink);outline:none;font-family:inherit}
.songInput input::placeholder{color:var(--ink3)}
.songInput .btn{flex:0 0 auto;padding:0 16px;font-size:13px}
.btn.sm{padding:8px 14px;font-size:12.5px}

.songLoading{text-align:center;padding:34px 0}
.songWave{display:flex;justify-content:center;align-items:flex-end;gap:5px;height:38px}
.songWave i{width:4px;border-radius:3px;background:linear-gradient(to top,var(--acc),var(--acc2));
  animation:sw .9s ease-in-out infinite}
.songWave i:nth-child(1){height:14px;animation-delay:0s}
.songWave i:nth-child(2){height:24px;animation-delay:.08s}
.songWave i:nth-child(3){height:32px;animation-delay:.16s}
.songWave i:nth-child(4){height:20px;animation-delay:.24s}
.songWave i:nth-child(5){height:30px;animation-delay:.32s}
.songWave i:nth-child(6){height:18px;animation-delay:.4s}
.songWave i:nth-child(7){height:26px;animation-delay:.48s}
@keyframes sw{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.songLoadTxt{margin-top:14px;font-size:12.5px;color:var(--ink3);letter-spacing:.5px}

.songBox{margin-top:16px;border-radius:var(--r);padding:18px 16px 14px;
  background:linear-gradient(160deg,rgba(143,123,255,.16),rgba(95,215,255,.07));
  border:1px solid var(--line);box-shadow:var(--shadow)}
.songHead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.songTitle{font-size:18px;font-weight:700;letter-spacing:.5px}
.songMeta{font-size:11px;color:var(--ink3);flex:0 0 auto}
.songProgress{height:3px;border-radius:3px;background:rgba(255,255,255,.10);margin:14px 0 4px;overflow:hidden}
.songProgress i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .18s linear}

.songLyric{margin:14px 0 6px;height:212px;overflow-y:auto;scrollbar-width:none;
  display:flex;flex-direction:column;gap:9px;padding:4px 2px}
.songLyric::-webkit-scrollbar{display:none}
.songLyric .ln{font-size:15px;line-height:1.7;color:rgba(238,241,255,.32);transition:.35s;
  transform-origin:left center;padding-left:0}
.songLyric .ln.near{color:rgba(238,241,255,.55)}
.songLyric .ln.on{color:var(--ink);font-size:17px;font-weight:600;transform:translateX(4px);
  text-shadow:0 0 22px rgba(95,215,255,.55)}
.songLyric .sec{font-size:10.5px;color:var(--ink3);letter-spacing:2px;margin-top:6px}

.songCtrl{display:flex;gap:8px;margin-top:12px}
.songCtrl .btn{flex:1}
.songVoice{margin-top:12px;font-size:12px;color:var(--ink2);display:flex;flex-direction:column;gap:3px}
.songVoice label{display:flex;align-items:center;gap:7px;cursor:pointer}
.songVoice input{width:15px;height:15px;accent-color:var(--acc)}
.songVoiceTip{font-size:11px;color:var(--ink3);padding-left:22px}
.songBox .aiBar{margin-top:12px}

.songList{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.songList .it{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:12px;background:var(--glass);cursor:pointer;transition:.2s}
.songList .it:active{background:var(--glass2)}
.songList .it b{font-size:13.5px;font-weight:600}
.songList .it span{font-size:11px;color:var(--ink3)}
.songList .it em{font-size:11px;color:var(--acc2);font-style:normal;flex:0 0 auto}

/* ===================== 屿灵 · 真 3D 精灵 =====================
 * perspective 放在外层容器上，preserve-3d 放在角色本体上，
 * 浏览器自动处理近大远小与层间遮挡，这才是真 3D。               */
.sprite3d{perspective:430px;width:110px;height:116px;display:block}
.sprite3d canvas{display:none}
.spFloat{position:absolute;inset:0;transform-style:preserve-3d;
  animation:spBob 4.4s ease-in-out infinite}
@keyframes spBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

.spObj{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(0deg) rotateY(0deg);transition:transform .12s linear}

/* 背后大光晕（不参与深度，纯氛围） */
.spGlow{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(183,165,255,.30),rgba(95,215,255,.10) 45%,transparent 70%)}

/* 球体骨架：经线环绕 Y 轴、纬线环绕 X 轴，交错成球 */
.spCage{position:absolute;left:50%;top:44%;width:74px;height:74px;margin:-37px 0 0 -37px;
  transform-style:preserve-3d;animation:spSpin 19s linear infinite}
@keyframes spSpin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.spCage i{position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(196,182,255,.34);transform:rotateY(var(--a));
  box-shadow:inset 0 0 8px rgba(143,123,255,.22)}
.spCage i.lat{transform:rotateX(var(--b))}
.spCage i:nth-child(3n){border-color:rgba(95,215,255,.40)}

/* 球心实体 */
.spCore{position:absolute;left:50%;top:44%;width:70px;height:70px;margin:-35px 0 0 -35px;
  border-radius:50%;transform:translateZ(0);
  background:radial-gradient(circle at 33% 28%,#ffffff 0%,#ded4ff 22%,#9d8aff 55%,#5a63cf 82%,#3b3f8f 100%);
  box-shadow:0 0 24px rgba(143,123,255,.55),inset -7px -9px 20px rgba(38,28,88,.42),
             inset 5px 6px 14px rgba(255,255,255,.30)}

/* 脸：贴在球体前表面 */
.spFace{position:absolute;left:50%;top:44%;width:70px;height:70px;margin:-35px 0 0 -35px;
  transform:translateZ(35px);transform-style:preserve-3d;pointer-events:none}
.spFace .eye{position:absolute;top:31px;width:7px;height:9px;border-radius:50%;background:#232757;
  transition:height .08s}
.spFace .eye.l{left:20px} .spFace .eye.r{right:20px}
.spFace.blink .eye{height:1.6px;top:35px}
.spFace .mouth{position:absolute;left:50%;top:44px;width:12px;height:7px;margin-left:-6px;
  border-bottom:1.8px solid rgba(35,39,87,.75);border-radius:0 0 12px 12px}
.spFace .blush{position:absolute;top:38px;width:11px;height:6px;border-radius:50%;
  background:rgba(255,150,180,.42)}
.spFace .blush.l{left:11px} .spFace .blush.r{right:11px}

/* 双翼：绕 Y 轴扇动 */
.spWing{position:absolute;top:30px;width:38px;height:50px;transform-style:preserve-3d;
  background:linear-gradient(150deg,rgba(255,255,255,.42),rgba(95,215,255,.20) 55%,rgba(143,123,255,.10));
  border:1px solid rgba(255,255,255,.32);
  box-shadow:0 0 14px rgba(95,215,255,.28)}
.spWing.wl{left:-14px;border-radius:64% 46% 52% 58%/72% 66% 40% 44%;
  transform-origin:right center;animation:flapL 2.6s ease-in-out infinite}
.spWing.wr{right:-14px;border-radius:46% 64% 58% 52%/66% 72% 44% 40%;
  transform-origin:left center;animation:flapR 2.6s ease-in-out infinite}
@keyframes flapL{0%,100%{transform:translateZ(-8px) rotateY(-46deg)}
  50%{transform:translateZ(-8px) rotateY(-14deg)}}
@keyframes flapR{0%,100%{transform:translateZ(-8px) rotateY(46deg)}
  50%{transform:translateZ(-8px) rotateY(14deg)}}

/* 触角 */
.spAnt{position:absolute;top:2px;width:2px;height:26px;transform-origin:bottom center;
  background:linear-gradient(to top,rgba(255,255,255,.75),rgba(255,255,255,.15));
  transform:translateZ(6px)}
.spAnt.al{left:39%;transform:translateZ(6px) rotateZ(-15deg)}
.spAnt.ar{left:59%;transform:translateZ(6px) rotateZ(15deg)}
.spAnt i{position:absolute;top:-5px;left:-3px;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle,#fff,#9fe8ff 60%,rgba(95,215,255,.2));
  box-shadow:0 0 12px rgba(159,232,255,.95)}

/* 地面光环 + 投影：绕 X 轴放平，才像站在一个空间里 */
.spRing{position:absolute;left:50%;top:52%;width:92px;height:92px;margin:-46px 0 0 -46px;
  border-radius:50%;border:1.5px solid rgba(95,215,255,.42);
  box-shadow:0 0 20px rgba(95,215,255,.35),inset 0 0 20px rgba(143,123,255,.25);
  animation:spRingSpin 11s linear infinite}
@keyframes spRingSpin{from{transform:translateZ(-38px) rotateX(78deg) rotateZ(0)}
  to{transform:translateZ(-38px) rotateX(78deg) rotateZ(360deg)}}
.spShadow{position:absolute;left:50%;top:52%;width:66px;height:18px;margin:-9px 0 0 -33px;
  border-radius:50%;background:radial-gradient(ellipse,rgba(70,50,150,.55),transparent 72%);
  transform:translateZ(-42px) rotateX(80deg)}

/* ===================== 摄像头授权引导 ===================== */
.camAsk{position:absolute;inset:0;z-index:8;display:none;align-items:center;justify-content:center;
  padding:26px;background:rgba(4,6,15,.72);backdrop-filter:blur(6px)}
.camAsk.on{display:flex}
.camCard{max-width:320px;width:100%;text-align:center;padding:26px 22px 22px;border-radius:20px;
  background:linear-gradient(160deg,rgba(143,123,255,.20),rgba(10,14,34,.92));
  border:1px solid var(--line);box-shadow:var(--shadow)}
.camCard .camIco{width:46px;height:46px;stroke:var(--acc2);fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px;
  filter:drop-shadow(0 0 12px rgba(95,215,255,.6))}
.camCard b{display:block;font-size:16px;margin-bottom:8px}
.camCard p{font-size:12.5px;color:var(--ink2);line-height:1.85;margin:0 0 18px}
.camCard .btn{width:100%;margin-bottom:9px}
.camDenied{display:none;margin-top:6px;padding:10px 12px;border-radius:12px;font-size:11.5px;
  color:#ffd7a8;line-height:1.75;background:rgba(255,184,107,.10);border:1px solid rgba(255,184,107,.28);text-align:left}
.camDenied.on{display:block}
.arHint{cursor:pointer}
.arHint.on .dot{background:#6ef0b0;box-shadow:0 0 9px #6ef0b0}
.arHint.off .dot{background:#ffb86b;box-shadow:0 0 9px #ffb86b}

/* 实景画面不能太暗，否则用户根本看不出摄像头开了（主 filter 已在 #cam 统一设置） */