/* =========================================================================
   AI 后台吐槽日志 · v2
   设计基调：多巴胺亮色 + 高级感。整体浅色底，靠宠物自己的品牌色驱动
   整页的强调色（--accent），切换宠物时全站颜色一起过渡。
   ========================================================================= */

:root{
  --bg:#f4f3f9;
  --bg-2:#ffffff;
  --ink:#15142b;
  --ink-2:#3b3a58;
  --sub:#6d6c88;
  --faint:#9a99b0;
  --line:rgba(21,20,43,.09);
  --line-2:rgba(21,20,43,.055);
  --card:#ffffff;
  --danger:#ff3f5f;

  /* 会被 JS 按当前宠物改写的强调色 */
  --accent:#ff6b7e;
  --accent-2:#ff9a6b;
  --accent-soft:#ffe9ec;
  --accent-deep:#8d1c2c;
  --accent-glow:rgba(255,107,126,.35);

  --topbar-h:76px;
  --r-lg:30px;
  --r-md:20px;
  --r-sm:13px;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow-card:0 26px 60px -34px rgba(21,20,43,.42), 0 4px 14px -8px rgba(21,20,43,.14);
  --shadow-lift:0 42px 80px -34px rgba(21,20,43,.5), 0 8px 22px -12px rgba(21,20,43,.2);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  font-size:15px;
  line-height:1.6;
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-locked{ overflow:hidden; }

img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,p{ margin:0; }
[hidden]{ display:none !important; }

::selection{ background:var(--accent); color:#fff; }

.ic{ width:1em; height:1em; flex:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; }

.kicker{ font:600 10.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.kicker--danger{ color:var(--danger); }

/* ---------------------------------------------------------------- 背景层 */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.16;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.aurora{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.aurora__b{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.55;
  transition:background 1s var(--ease), opacity 1s var(--ease);
}
.aurora .b1{ width:46vw; height:46vw; left:-8vw; top:-14vw; background:var(--accent-soft); }
.aurora .b2{ width:38vw; height:38vw; right:-6vw; top:12vh; background:var(--accent-soft); opacity:.42; }
.aurora .b3{ width:34vw; height:34vw; left:34vw; bottom:-16vw; background:color-mix(in srgb, var(--accent) 14%, #fff); opacity:.5; }

/* ---------------------------------------------------------------- 顶栏 */
.topbar{
  position:fixed; inset:0 0 auto; z-index:40; height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:0 clamp(16px,3vw,40px);
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 0 rgba(21,20,43,.05), 0 14px 36px -30px rgba(21,20,43,.5);
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
.brand__mark{
  display:grid; place-items:center; width:38px; height:38px; border-radius:13px;
  background:linear-gradient(140deg,var(--accent),var(--accent-2)); color:#fff;
  box-shadow:0 10px 24px -10px var(--accent-glow);
  transition:background .5s var(--ease), box-shadow .5s var(--ease);
}
.brand__mark svg{ width:19px; height:19px; }
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__text b{ font-size:15px; font-weight:700; letter-spacing:-.01em; }
.brand__text small{ font:400 10.5px var(--mono); color:var(--faint); }

.topbar__right{ display:flex; align-items:center; gap:9px; }

.live-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 13px; border-radius:999px;
  background:rgba(255,255,255,.9); border:1px solid var(--line);
  font:500 11px var(--mono); color:var(--sub); white-space:nowrap;
  transition:opacity .3s ease;
}
.live-pill__dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-glow);
  animation:pulseDot 2.2s ease-out infinite;
  transition:background .5s var(--ease);
}
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 var(--accent-glow); }
  70%{ box-shadow:0 0 0 9px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}

.tool-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:999px;
  background:rgba(255,255,255,.9); border:1px solid var(--line);
  font-size:12.5px; font-weight:600; color:var(--ink-2); white-space:nowrap;
  transition:transform .3s var(--ease), background .3s, border-color .3s, box-shadow .3s, color .3s;
}
.tool-btn .ic{ font-size:15px; }
.tool-btn:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 45%,transparent); box-shadow:0 12px 26px -16px rgba(21,20,43,.5); }
.tool-btn[aria-pressed="false"]{ color:var(--faint); }
.tool-btn--icon{ padding:9px; border-radius:12px; }
.tool-btn--ghost{ background:transparent; border-color:transparent; color:var(--sub); }
.tool-btn--ghost:hover{ background:rgba(255,255,255,.9); border-color:var(--line); }

.count-badge{
  min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  display:inline-grid; place-items:center;
  background:var(--danger); color:#fff; font:700 10.5px var(--mono); font-style:normal;
  transition:transform .3s var(--ease);
}
.count-badge.is-bump{ animation:bump .5s var(--ease); }
@keyframes bump{ 0%{transform:scale(1)} 40%{transform:scale(1.45)} 100%{transform:scale(1)} }

/* ---------------------------------------------------------------- 场景 */
.scene{ position:relative; z-index:1; }
.scene[hidden]{ display:none; }

/* ---------------------------------------------------------------- 首屏 */
.scene--home{ padding:calc(var(--topbar-h) + clamp(34px,6vh,74px)) clamp(16px,3vw,40px) 40px; }

.home-hero{ max-width:1400px; margin:0 auto; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 16px; border-radius:999px;
  background:rgba(255,255,255,.85); border:1px solid var(--line);
  font:600 10.5px var(--mono); letter-spacing:.18em; color:var(--accent-deep);
  box-shadow:0 10px 24px -18px rgba(21,20,43,.5);
  transition:color .5s var(--ease);
}
.eyebrow__dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); transition:background .5s var(--ease); }

.home-title{
  margin:22px 0 20px;
  font-size:clamp(40px,7.2vw,88px);
  line-height:1.02; letter-spacing:-.045em; font-weight:700;
}
.home-title em{
  font-style:normal; position:relative; white-space:nowrap;
  color:var(--sub);
}
.home-title strong{
  font-weight:700; white-space:nowrap;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:background .5s var(--ease);
}
.home-sub{ color:var(--sub); font-size:clamp(14.5px,1.15vw,17px); line-height:1.85; max-width:46ch; }

.home-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:30px; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  border:0; border-radius:999px; padding:15px 24px;
  font-size:14.5px; font-weight:650; letter-spacing:-.01em;
  transition:transform .34s var(--ease), box-shadow .34s var(--ease), background .4s, color .4s;
}
.btn .ic{ font-size:17px; }
.btn--primary{
  color:#fff; background:linear-gradient(130deg,var(--accent),var(--accent-2));
  box-shadow:0 20px 40px -18px var(--accent-glow), 0 2px 8px -4px rgba(21,20,43,.2);
}
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 30px 56px -20px var(--accent-glow), 0 4px 14px -6px rgba(21,20,43,.24); }
.btn:active{ transform:scale(.975); }
.btn--ghost{ background:rgba(255,255,255,.9); border:1px solid var(--line); color:var(--ink-2); }
.home-hint{ font-size:13px; color:var(--faint); }

/* ---- 首屏右侧：一段真实的输入 / 输出示例 ---- */
.home-hero__grid{ display:grid; gap:clamp(26px,3.6vw,54px); align-items:center; }
@media (min-width:1000px){ .home-hero__grid{ grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); } }

.hero-demo{ position:relative; }
.hero-demo__card{
  border-radius:26px; padding:20px 20px 22px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 40px 80px -42px rgba(21,20,43,.55), 0 8px 20px -14px rgba(21,20,43,.18);
  animation:demoFloat 6.6s ease-in-out infinite;
}
@keyframes demoFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -12px; } }
.hero-demo__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:13px; border-bottom:1px solid var(--line-2); }
.hero-demo__who{ display:inline-flex; align-items:center; gap:7px; font:600 10.5px var(--mono); letter-spacing:.14em; color:var(--faint); }
.hero-demo__who img{ width:24px; height:24px; object-fit:contain; }
.hero-demo__row{ margin-top:13px; }
.hero-demo__tag{ display:block; margin-bottom:6px; font:600 9.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.hero-demo__ask,
.hero-demo__reply,
.hero-demo__roast{ border-radius:14px; padding:11px 14px; font-size:12.8px; line-height:1.68; }
.hero-demo__ask{
  max-width:90%; margin-left:auto; text-align:left; color:#fff;
  background:linear-gradient(130deg,var(--accent),var(--accent-2));
  box-shadow:0 16px 30px -16px var(--accent-glow);
}
.hero-demo__reply{ background:#fff; border:1px solid var(--line); color:var(--ink-2); }
.hero-demo__roast{
  background:var(--accent-soft); color:var(--accent-deep); font-weight:600;
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
}

/* ---- 宠物卡片网格 ---- */
.pet-grid{
  max-width:1400px; margin:clamp(30px,5vh,54px) auto 0;
  display:grid; gap:clamp(12px,1.4vw,20px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:760px){ .pet-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1080px){ .pet-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); } }

.pet-card{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r-lg);
  padding:18px 18px 20px;
  aspect-ratio:4/5;
  display:flex; flex-direction:column; justify-content:flex-end;
  text-align:left;
  border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(165deg,var(--accent-soft) 0%,#fff 58%);
  box-shadow:var(--shadow-card);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.pet-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-lift); }
.pet-card:active{ transform:translateY(-4px) scale(.99); }
.pet-card::after{
  content:''; position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.4);
}
.pet-card__glow{
  position:absolute; left:50%; bottom:26%; z-index:0;
  width:118%; aspect-ratio:1; transform:translateX(-50%);
  border-radius:50%; filter:blur(34px); opacity:.5;
  background:radial-gradient(circle,var(--accent) 0%,transparent 66%);
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.pet-card:hover .pet-card__glow{ opacity:.8; transform:translateX(-50%) scale(1.08); }

.pet-card__art{
  position:absolute; left:50%; bottom:22%; z-index:2;
  width:82%; transform:translateX(-50%);
  filter:drop-shadow(0 22px 26px rgba(21,20,43,.24));
  transition:transform .6s var(--ease);
  animation:petFloat 5.2s ease-in-out infinite;
  animation-delay:var(--fd,0s);
}
.pet-card:hover .pet-card__art{ transform:translateX(-50%) translateY(-12px) scale(1.06); }
@keyframes petFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -12px; } }

.pet-card__shine{
  position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 46%,transparent 62%);
  transform:translateX(-120%);
  transition:transform .9s var(--ease);
}
.pet-card:hover .pet-card__shine{ transform:translateX(120%); }

.pet-card__body{ position:relative; z-index:5; display:block; }
.pet-card__en{ display:block; font:600 9.5px/1 var(--mono); letter-spacing:.2em; color:var(--accent-deep); opacity:.75; }
.pet-card__name{ display:block; margin:7px 0 5px; font-size:19px; font-weight:700; letter-spacing:-.02em; }
.pet-card__persona{ display:block; font-size:11.5px; color:var(--sub); line-height:1.5; }
.pet-card__go{
  margin-top:12px; display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:700; color:var(--accent-deep);
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.pet-card__go .ic{ font-size:14px; }
.pet-card:hover .pet-card__go{ opacity:1; transform:none; }

/* ---- 首屏页脚 ---- */
.home-foot{
  max-width:1400px; margin:clamp(26px,5vh,48px) auto 0;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid var(--line-2);
  font:400 11px var(--mono); color:var(--faint);
}
.home-foot__label{ color:var(--accent-deep); font-weight:600; letter-spacing:.16em; }
.home-foot__note{ margin-left:auto; }
.marquee{ flex:1; min-width:160px; overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.marquee__track{ display:flex; gap:16px; width:max-content; animation:marquee 30s linear infinite; }
.marquee__track i{ font-style:normal; opacity:.5; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------------------------------------------------------------- 实验室 */
.scene--lab{ height:100vh; padding:calc(var(--topbar-h) + 14px) clamp(12px,2vw,26px) 18px; display:flex; flex-direction:column; }

.lab-head{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:0 4px 14px;
}
.switcher{ display:flex; gap:8px; }
.switcher__item{
  position:relative; display:flex; align-items:center; gap:8px;
  padding:7px 14px 7px 7px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.8);
  font-size:12.5px; font-weight:600; color:var(--sub);
  transition:transform .35s var(--ease), background .35s, border-color .35s, color .35s, box-shadow .35s;
}
.switcher__item img{ width:26px; height:26px; object-fit:contain; }
.switcher__item:hover{ transform:translateY(-2px); color:var(--ink); border-color:color-mix(in srgb,var(--accent) 40%,transparent); }
.switcher__item.is-active{
  background:linear-gradient(130deg,var(--accent),var(--accent-2)); color:#fff; border-color:transparent;
  box-shadow:0 16px 30px -16px var(--accent-glow);
}
.switcher__item.is-active img{ filter:drop-shadow(0 3px 6px rgba(0,0,0,.3)); }

.lab-head__meta{ display:flex; align-items:center; gap:12px; font:500 11px var(--mono); color:var(--faint); }
.lab-head__index{ color:var(--accent-deep); font-weight:600; }
.lab-head__sep{ width:1px; height:12px; background:var(--line); }

.lab-grid{
  flex:1; min-height:0;
  display:grid; gap:clamp(12px,1.5vw,20px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:1024px){ .lab-grid{ grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr); } }

/* ---- 舞台 ---- */
.stage{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r-lg); min-height:0;
  display:flex; flex-direction:column;
  background:linear-gradient(158deg,var(--accent-soft) 0%,#fff 52%,#fff 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-card);
  transition:background .7s var(--ease);
}
.stage__halo{
  position:absolute; left:50%; top:46%; z-index:0; width:74%; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle,var(--accent) 0%,transparent 64%);
  opacity:.3; filter:blur(46px);
  transition:background .7s var(--ease); pointer-events:none;
}
.stage__grid{
  position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(21,20,43,.14) 1px,transparent 0);
  background-size:26px 26px;
  mask-image:radial-gradient(80% 70% at 50% 42%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 42%,#000,transparent 76%);
}
.stage__pet{
  position:relative; z-index:2; flex:1; min-height:0;
  display:grid; place-items:center; padding:16px 16px 0;
}
.stage__pet img{
  height:min(100%,50vh); width:auto; max-width:84%;
  object-fit:contain;
  filter:drop-shadow(0 34px 44px rgba(21,20,43,.28));
  animation:petFloat 5.4s ease-in-out infinite;
  transition:transform .5s var(--ease);
  cursor:pointer;
}
.stage__pet img:hover{ transform:scale(1.03); }

/* 反应动作：petFloat 用的是 translate，这里用 transform，两者可以同时跑
   —— 所以宠物可以在上下漂浮的同时抖一下，不会互相打断 */
.stage__pet.is-react img{ animation:petReact .78s var(--ease), petFloat 5.4s ease-in-out infinite; }
@keyframes petReact{
  0%{ transform:scale(1) rotate(0); }
  16%{ transform:scale(1.09) rotate(-3.5deg); }
  36%{ transform:scale(.95) rotate(3.5deg); }
  58%{ transform:scale(1.05) rotate(-2deg); }
  78%{ transform:scale(.98) rotate(1deg); }
  100%{ transform:scale(1) rotate(0); }
}
.stage__pet.is-swap img{ animation:petSwap .62s var(--ease), petFloat 5.4s ease-in-out infinite; }
@keyframes petSwap{
  from{ transform:scale(.78) translateY(18px); opacity:0; }
  to{ transform:none; opacity:1; }
}
.stage__shadow{
  position:absolute; left:50%; bottom:2%; width:44%; height:22px; transform:translateX(-50%);
  background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 45%,transparent),transparent 70%);
  filter:blur(9px); opacity:.55; border-radius:50%;
}

/* 内心 OS 气泡 */
.bubble{
  position:absolute; z-index:6; left:clamp(14px,4%,34px); top:clamp(14px,5%,30px);
  max-width:min(340px,58%);
  padding:14px 17px 15px; border-radius:20px 20px 20px 6px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 26px 54px -26px rgba(21,20,43,.5);
  opacity:0; transform:translateY(10px) scale(.96); transform-origin:left bottom;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events:none;
}
.bubble.is-show{ opacity:1; transform:none; }
.bubble::after{
  content:''; position:absolute; left:22px; bottom:-7px; width:14px; height:14px;
  background:inherit; border-right:inherit; border-bottom:inherit;
  border-radius:0 0 4px 0; transform:rotate(45deg);
}
.bubble__tag{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:7px;
  font:700 9.5px/1 var(--mono); letter-spacing:.18em; color:var(--accent-deep);
}
.bubble__tag::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.bubble p{ font-size:13.5px; line-height:1.72; color:var(--ink-2); }
.bubble strong{ color:var(--accent-deep); }

.stage__card{
  position:relative; z-index:5; flex:none;
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  padding:18px clamp(16px,3%,26px) 0;
  pointer-events:none;
}
.stage__en{ font:600 10px/1 var(--mono); letter-spacing:.22em; color:var(--accent-deep); opacity:.7; }
.stage__id h2{ margin:7px 0 5px; font-size:clamp(24px,2.6vw,34px); font-weight:700; letter-spacing:-.03em; }
.stage__id p{ font-size:12.5px; color:var(--sub); }
.stage__mood{ text-align:right; }
.stage__mood-label{ display:block; font:500 9.5px/1 var(--mono); letter-spacing:.16em; color:var(--faint); text-transform:uppercase; }
.stage__mood b{ display:block; margin-top:6px; font-size:13.5px; color:var(--ink-2); }

.stage__meter{
  position:relative; z-index:5; flex:none;
  display:flex; align-items:center; gap:12px;
  padding:16px clamp(16px,3%,26px) 18px;
  margin-top:14px; border-top:1px solid var(--line-2);
}
.stage__meter-label{ font:500 10px/1 var(--mono); letter-spacing:.14em; color:var(--faint); text-transform:uppercase; white-space:nowrap; }
.meter{ flex:1; height:8px; border-radius:99px; background:rgba(21,20,43,.08); overflow:hidden; }
.meter i{
  display:block; height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .7s var(--ease), background .5s var(--ease);
}
.stage__meter b{ font:700 14px var(--mono); color:var(--accent-deep); min-width:2.4em; text-align:right; }

.stage__poke{
  position:absolute; z-index:7; right:clamp(14px,3%,22px); top:clamp(14px,3%,22px);
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.9); background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:12.5px; font-weight:650; color:var(--ink-2);
  box-shadow:0 16px 32px -18px rgba(21,20,43,.5);
  transition:transform .34s var(--ease), box-shadow .34s var(--ease), color .3s;
}
.stage__poke .ic{ font-size:15px; color:var(--accent); transition:color .4s; }
.stage__poke:hover{ transform:translateY(-3px); box-shadow:0 24px 44px -20px rgba(21,20,43,.55); }
.stage__poke:active{ transform:scale(.96); }

/* ---- 吐槽工作台 ---- */
.roast{
  display:flex; flex-direction:column; min-height:0;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.roast__head{
  flex:none; display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:20px 22px 16px; border-bottom:1px solid var(--line-2);
}
.roast__head h3{ margin-top:7px; font-size:21px; font-weight:700; letter-spacing:-.02em; }
.roast__tools{ display:flex; gap:7px; }
.chip-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--line); background:#fff;
  font-size:12px; font-weight:600; color:var(--sub);
  transition:transform .3s var(--ease), color .3s, border-color .3s, box-shadow .3s;
}
.chip-btn .ic{ font-size:14px; }
.chip-btn:hover{ transform:translateY(-2px); color:var(--accent-deep); border-color:color-mix(in srgb,var(--accent) 45%,transparent); box-shadow:0 10px 22px -14px rgba(21,20,43,.5); }

.presets{ flex:none; padding:15px 22px 13px; border-bottom:1px solid var(--line-2); }
.presets__label{ display:block; margin-bottom:10px; font:500 10px/1 var(--mono); letter-spacing:.14em; color:var(--faint); text-transform:uppercase; }
.presets__row{ display:flex; flex-wrap:wrap; gap:7px; }
.preset{
  padding:8px 13px; border-radius:999px;
  border:1px dashed color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent-soft) 60%,#fff);
  font-size:12px; font-weight:600; color:var(--accent-deep);
  transition:transform .3s var(--ease), background .3s, border-style .3s, box-shadow .3s;
  animation:chipIn .45s var(--ease) backwards;
}
@keyframes chipIn{ from{ opacity:0; transform:translateY(8px); } }
.preset:hover{ transform:translateY(-2px); border-style:solid; background:#fff; box-shadow:0 12px 24px -14px rgba(21,20,43,.45); }

.messages{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:20px 22px; display:flex; flex-direction:column; gap:14px;
  scrollbar-width:thin;
}
.messages::-webkit-scrollbar{ width:8px; }
.messages::-webkit-scrollbar-thumb{ background:rgba(21,20,43,.16); border-radius:99px; border:2px solid transparent; background-clip:content-box; }

.msg{ max-width:88%; animation:msgIn .42s var(--ease) backwards; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(10px); } }
.msg__label{
  display:block; margin-bottom:6px;
  font:600 9.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
}
.msg__body{
  padding:12px 15px; border-radius:16px; font-size:13.5px; line-height:1.7;
}

.msg--user{ align-self:flex-end; text-align:right; }
.msg--user .msg__label{ color:var(--faint); }
.msg--user .msg__body{
  background:linear-gradient(130deg,var(--accent),var(--accent-2)); color:#fff;
  border-bottom-right-radius:5px;
  box-shadow:0 16px 30px -18px var(--accent-glow);
  text-align:left;
}

.msg--ai{ align-self:flex-start; }
.msg--ai .msg__label{ color:var(--faint); }
.msg--ai .msg__body{ background:#fff; border:1px solid var(--line); color:var(--ink-2); border-bottom-left-radius:5px; }

.msg--roast{ align-self:flex-start; }
.msg--roast .msg__label{ color:var(--accent-deep); }
.msg--roast .msg__body{
  background:color-mix(in srgb,var(--accent-soft) 75%,#fff);
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  color:var(--accent-deep); border-bottom-left-radius:5px;
  font-weight:600;
}
.msg__copy{
  display:inline-flex; align-items:center; gap:5px; margin-top:7px; margin-left:2px;
  padding:4px 9px; border-radius:8px; border:1px solid transparent; background:transparent;
  font:500 10.5px var(--mono); color:var(--faint);
  transition:color .25s, background .25s, border-color .25s;
}
.msg__copy:hover{ color:var(--accent-deep); background:rgba(255,255,255,.9); border-color:var(--line); }
.msg__copy .ic{ font-size:12px; }

.messages__hint{
  display:flex; align-items:flex-start; gap:10px;
  padding:13px 15px; border-radius:14px;
  border:1px dashed var(--line); color:var(--faint);
  font-size:12.2px; line-height:1.65;
}
.messages__hint .ic{ font-size:15px; color:var(--accent); flex:none; margin-top:2px; transition:color .5s var(--ease); }
.messages__hint b{ color:var(--ink-2); font-weight:650; }

.typing{ display:inline-flex; gap:5px; align-items:center; padding:15px 16px; }.typing i{
  width:7px; height:7px; border-radius:50%; background:var(--accent); opacity:.4;
  animation:typeDot 1.05s ease-in-out infinite;
}
.typing i:nth-child(2){ animation-delay:.15s; }
.typing i:nth-child(3){ animation-delay:.3s; }
@keyframes typeDot{ 0%,100%{ opacity:.32; transform:translateY(0); } 45%{ opacity:1; transform:translateY(-4px); } }

.composer{
  flex:none; display:flex; gap:8px; margin:0 22px;
  padding:6px; border-radius:18px;
  background:#fff; border:1px solid var(--line);
  box-shadow:inset 0 1px 2px rgba(21,20,43,.04);
  transition:border-color .3s, box-shadow .3s;
}
.composer:focus-within{ border-color:color-mix(in srgb,var(--accent) 55%,transparent); box-shadow:0 0 0 4px var(--accent-soft); }
.composer input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  padding:12px 14px; font:inherit; font-size:13.5px; color:var(--ink);
}
.composer input::placeholder{ color:var(--faint); }
.composer__send{
  display:inline-flex; align-items:center; gap:8px; border:0; border-radius:13px;
  padding:0 18px; font-size:13px; font-weight:650; color:#fff;
  background:linear-gradient(130deg,var(--accent),var(--accent-2));
  box-shadow:0 14px 26px -14px var(--accent-glow);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.composer__send .ic{ font-size:15px; }
.composer__send:hover{ transform:translateY(-2px); }
.composer__hint{ flex:none; padding:11px 22px 18px; font:400 10.5px var(--mono); color:var(--faint); }

/* ---------------------------------------------------------------- 后台抽屉 */
.scrim{
  position:fixed; inset:0; z-index:48;
  background:rgba(21,20,43,.34); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .4s ease;
}
.scrim.is-open{ opacity:1; }

.backstage{
  position:fixed; z-index:50; top:0; right:0; height:100vh; width:min(430px,94vw);
  display:flex; flex-direction:column;
  padding:22px 22px 20px;
  background:linear-gradient(165deg,#1b1030,#120d1c 62%);
  color:#f2ecff;
  border-left:1px solid rgba(255,255,255,.14);
  box-shadow:-40px 0 100px -30px rgba(8,4,18,.7);
  transform:translateX(103%);
  transition:transform .5s var(--ease);
}
.backstage.is-open{ transform:none; }
.backstage__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.13); }
.backstage__head h3{ margin:9px 0 3px; font-size:22px; font-weight:700; letter-spacing:-.02em; }
.backstage__head small{ font-size:11.5px; color:#a08cc4; }
.backstage .tool-btn{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.16); color:#e6dcff; }
.backstage .tool-btn:hover{ background:rgba(255,255,255,.18); }

.alert-banner{
  display:none; align-items:center; gap:9px; margin-top:16px;
  padding:11px 13px; border-radius:12px;
  background:rgba(255,63,95,.16); border:1px solid rgba(255,63,95,.5); color:#ff9db0;
  font:600 11px var(--mono);
}
.alert-banner.is-show{ display:flex; animation:alertPulse 1.1s ease-in-out infinite alternate; }
.alert-banner .ic{ font-size:15px; }
@keyframes alertPulse{ to{ box-shadow:0 0 26px rgba(255,63,95,.35); } }

.log-list{ flex:1; min-height:0; overflow-y:auto; padding:16px 2px; display:flex; flex-direction:column; gap:2px; }
.log-list::-webkit-scrollbar{ width:8px; }
.log-list::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
.log-empty{ display:grid; place-items:center; gap:8px; padding:52px 16px; text-align:center; color:#8b78ab; }
.log-empty .ic{ font-size:26px; opacity:.6; }
.log-empty p{ font-size:13.5px; color:#b7a4d6; }
.log-empty small{ font:400 11px var(--mono); }

.log-entry{
  position:relative; padding:13px 14px 14px; border-radius:14px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07);
  animation:msgIn .42s var(--ease) backwards;
}
.log-entry + .log-entry{ margin-top:9px; }
.log-entry::before{
  content:''; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:99px;
  background:var(--accent); box-shadow:0 0 14px var(--accent-glow);
}
.log-entry__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding-left:11px; }
.log-entry__time{ font:400 10px var(--mono); color:#8b78ab; }
.log-entry__pet{ font:700 9.5px var(--mono); letter-spacing:.14em; color:var(--accent); }
.log-entry__q{ margin:8px 0 6px; padding-left:11px; font-size:11.5px; color:#c6b6e2; }
.log-entry__r{ padding-left:11px; font-size:12.5px; line-height:1.65; color:#f0e6ff; }

.backstage__foot{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; border-top:1px solid rgba(255,255,255,.12);
  font:400 10px var(--mono); color:#8b78ab;
}

/* ---------------------------------------------------------------- 转场 */
.wipe{ position:fixed; inset:0; z-index:70; pointer-events:none; display:grid; place-items:center; }
.wipe span{
  position:absolute; left:var(--wx,50%); top:var(--wy,50%);
  width:14px; height:14px; border-radius:50%;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
  transform:translate(-50%,-50%) scale(0);
  transition:transform .62s var(--ease);
}
.wipe.is-run span{ transform:translate(-50%,-50%) scale(var(--ws,180)); }
.wipe img{
  position:relative; z-index:2; width:130px; opacity:0; transform:scale(.7);
  transition:opacity .34s ease .2s, transform .5s var(--ease) .2s;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.3));
}
.wipe.is-run img{ opacity:1; transform:scale(1); }

/* ---------------------------------------------------------------- 动效 & 响应式 */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease) var(--d,0ms), transform .7s var(--ease) var(--d,0ms); }
.js .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js .reveal{ opacity:1 !important; transform:none !important; }
}

/* 窄屏：整页滚动，对话区永远可达（修掉 v1 直接 display:none 的问题） */
@media (max-width:1023px){
  .scene--lab{ height:auto; min-height:100vh; padding-bottom:26px; }
  .lab-grid{ grid-template-columns:minmax(0,1fr); }
  .stage{ min-height:min(74vh,560px); }
  .stage__pet img{ height:min(100%,38vh); }
  .roast{ min-height:min(84vh,640px); }
  .messages{ max-height:46vh; }
  .live-pill{ display:none; }
}
@media (max-width:640px){
  :root{ --topbar-h:66px; --r-lg:24px; }
  .brand__text small{ display:none; }
  .tool-btn span{ display:none; }
  .tool-btn{ padding:9px 11px; }
  .lab-head__meta{ display:none; }
  .switcher{ overflow-x:auto; padding-bottom:4px; }
  .switcher__item{ padding:6px; }
  .switcher__item span{ display:none; }
  .switcher__item img{ width:30px; height:30px; }
  .composer__hint{ display:none; }
  .roast__head{ padding:16px 16px 12px; }
  .presets, .messages{ padding-left:16px; padding-right:16px; }
  .composer{ margin:0 16px 14px; }
  .home-foot__note{ margin-left:0; }
}