:root{
  color-scheme:light;
  --bg:#FFFDF9;
  --text:#2F3640;
  --muted:#6b7280;
  --card:#ffffff;
  --coral:#FF6B57;
  --coral-dark:#F2543D;
  --grad:linear-gradient(135deg,#FF7A59,#FF5E62);
  --radius:14px;
  --border:#EEEAE4;
  --shadow:0 4px 16px rgba(0,0,0,.04);
  --topbar-bg:rgba(255,253,249,.95);
  --input-bg:#fffdf9;
  --msg-bg:#FFF7F5;
  --msg-border:#F6E2DD;
  --tag-bg:#FFF1ED;
  --tag-text:#F2543D;
  --faint:#9aa0a6;
  --switch-off:#ddd;
  --link-underline:#d8d2ca;
  --btn-ghost-bg:#ffffff;
  --toast-bg:#2F3640;
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#17191D;
  --text:#E7E9EE;
  --text-strong:#F5F7FA;
  --muted:#9AA3B2;
  --muted-blue:#93A1B8;
  --card:#1D2025;
  --card-2:#22262C;
  --coral:#FF8A76;
  --coral-dark:#FFB3A3;
  --accent-line:rgba(255,138,118,.65);
  --grad:linear-gradient(135deg,#FF8A76,#FF6F61);
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.12);
  --shadow:0 1px 2px rgba(0,0,0,.28);
  --topbar-bg:rgba(23,25,29,.92);
  --input-bg:#22262C;
  --msg-bg:#22262C;
  --msg-border:rgba(255,255,255,.08);
  --tag-bg:rgba(255,138,118,.12);
  --tag-text:#FFB3A3;
  --faint:#7C8697;
  --switch-off:#3C434F;
  --link-underline:rgba(255,255,255,.24);
  --btn-ghost-bg:#1D2025;
  --toast-bg:#262B33;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Noto Sans SC","思源黑体","Microsoft YaHei",sans-serif;
  font-size:19px;
  font-weight:400;
  line-height:1.8;
}
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  gap:18px;
  min-height:64px;
  padding:0 32px;
  background:var(--topbar-bg);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(6px);
}
.brand{font-size:28px;font-weight:700;color:var(--text);text-decoration:none}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a{color:var(--muted);font-size:15px;font-weight:500;text-decoration:none;transition:color .2s}
.nav a:hover,.nav a:focus-visible{color:var(--coral);outline:none}
.lang-btn{
  min-width:56px;
  padding:7px 14px;
  font-size:15px;
  font-weight:700;
  color:var(--coral);
  background:var(--btn-ghost-bg);
  border:1.5px solid var(--coral);
  border-radius:999px;
  cursor:pointer;
  transition:background .2s,color .2s;
}
.lang-btn:hover,.lang-btn:focus-visible{background:var(--coral);color:#fff;outline:none}
.theme{position:relative;display:flex}
.theme-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  padding:0;
  color:var(--text);
  background:var(--btn-ghost-bg);
  border:1.5px solid var(--border);
  border-radius:999px;
  cursor:pointer;
  transition:background-color 250ms ease,color 250ms ease,border-color 250ms ease;
}
.theme-btn:hover,.theme-btn:focus-visible{border-color:var(--coral);color:var(--coral);outline:none}
.theme-btn svg{display:block}
.theme-btn .icon-moon{display:none}
[data-theme="dark"] .theme-btn .icon-sun{display:none}
[data-theme="dark"] .theme-btn .icon-moon{display:block}
.theme-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:30;
  min-width:150px;
  max-width:calc(100vw - 32px);
  margin:0;
  padding:6px;
  list-style:none;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.theme-menu[hidden]{display:none}
.theme-menu li{padding:9px 12px;border-radius:8px;font-size:15px;color:var(--muted);cursor:pointer}
.theme-menu li:hover{background:var(--tag-bg);color:var(--text)}
.theme-menu li.is-active{background:var(--tag-bg);color:var(--coral);font-weight:600}
main{
  width:calc(100% - 48px);
  max-width:920px;
  margin-left:auto;
  margin-right:auto;
  padding:0 0 40px;
  box-sizing:border-box;
}
section{scroll-margin-top:80px}
.hero{text-align:center;padding:36px 0 24px;width:100%;box-sizing:border-box}
.avatar{
  width:108px;
  height:108px;
  margin:0 auto 14px;
  border-radius:50%;
  background:linear-gradient(135deg,#FF7A59,#F2543D);
  color:#fff;
  font-size:46px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(255,107,87,.25);
}
[data-theme="dark"] .avatar{background:var(--grad);box-shadow:0 8px 22px rgba(0,0,0,.35)}
h1{margin:0 0 8px;font-size:36px;font-weight:700}
.tagline{max-width:560px;margin:0 auto 20px;color:var(--muted);font-size:18px;font-weight:400}
.btn{
  display:inline-block;
  border:none;
  position:relative;
  overflow:hidden;
  will-change:transform;
  padding:12px 28px;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  font-size:17px;
  cursor:pointer;
  transition:transform 220ms ease,box-shadow 250ms ease,background-color 250ms ease,color 250ms ease;
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(255,107,87,.25)}
.btn-primary:hover,.btn-primary:focus-visible{transform:translateY(-2px);outline:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(255,107,87,.32)}
[data-theme="dark"] .btn:hover{box-shadow:0 10px 24px rgba(0,0,0,.4)}
.btn:active{transform:translateY(-2px) scale(.96)}
.btn:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.btn:disabled,.btn[disabled]{opacity:.7;cursor:not-allowed;transform:none;box-shadow:none}
.btn .ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.45);
  transform:scale(0);
  opacity:.9;
  pointer-events:none;
  animation:btn-ripple 260ms ease-out forwards;
}
@keyframes btn-ripple{to{transform:scale(2.4);opacity:0}}
.card{
  width:100%;
  box-sizing:border-box;
  background:var(--card);
  border:1px solid var(--border);
  border-left:4px solid var(--coral);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 32px;
  margin-bottom:20px;
}
.card h2{margin:0 0 12px;font-size:28px;font-weight:700;color:var(--text)}
.card p{margin:0 0 10px;font-weight:400}
.card p:last-child{margin-bottom:0}
.sub-title{margin:18px 0 6px;font-size:17px;font-weight:600;color:var(--text)}
.card h2 + .sub-title{margin-top:0}
.sub-text{margin:0;color:var(--muted);font-weight:400}
.tag-list{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.tag-list li{padding:6px 16px;border-radius:999px;background:var(--tag-bg);color:var(--tag-text);font-size:16px;font-weight:500}
.email-line{color:var(--text);font-weight:500;word-break:break-all;text-decoration:underline;text-decoration-color:var(--link-underline)}
.email-line:hover{color:var(--coral-dark);text-decoration-color:var(--coral)}
.contact .btn{margin-top:14px;color:#fff}
.msg-form{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.msg-form label{font-weight:600}
.msg-form input,
.msg-form textarea{
  font:inherit;
  font-weight:400;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--input-bg);
  color:var(--text);
}
.msg-form input::placeholder,
.msg-form textarea::placeholder{color:var(--faint)}
.msg-form input:focus,
.msg-form textarea:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px rgba(255,107,87,.18)}
.msg-form textarea{resize:vertical}
.anon-wrap{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600}
.anon-wrap input{position:absolute;opacity:0;width:0;height:0}
.switch{width:48px;height:26px;flex:none;position:relative;background:var(--switch-off);border-radius:999px;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s}
.anon-wrap input:checked + .switch{background:var(--coral)}
.anon-wrap input:checked + .switch::after{transform:translateX(22px)}
.anon-wrap input:focus-visible + .switch{box-shadow:0 0 0 3px rgba(255,107,87,.25)}
.msg-form .btn{align-self:flex-start}
.msg-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.msg-item{background:var(--msg-bg);border:1px solid var(--msg-border);border-radius:10px;padding:12px 14px}
.msg-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.msg-name{font-weight:600;color:var(--coral-dark)}
.msg-time{color:var(--faint);font-size:13px;font-weight:400}
.msg-body{margin:0;font-weight:400;white-space:pre-wrap;word-break:break-word}
.msg-empty{color:var(--faint);text-align:center;padding:10px 0}
.clear-btn{margin-top:14px;padding:0;background:none;border:none;color:var(--faint);font-size:14px;text-decoration:underline;cursor:pointer}
.clear-btn:hover{color:var(--coral-dark)}
footer{text-align:center;color:var(--faint);font-size:15px;font-weight:400;padding:14px 20px 26px}
footer p{margin:4px 0}
.toast-wrap{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:60;pointer-events:none}
.toast{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border:none;
  border-radius:999px;
  background:var(--toast-bg);
  color:#fff;
  font-size:15px;
  font-weight:500;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
  opacity:0;
  transform:translateY(8px);
  transition:opacity 220ms ease,transform 220ms ease;
}
.toast.show{opacity:1;transform:translateY(0)}
.toast-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:none;border-radius:50%;background:rgba(255,255,255,.28);font-size:13px;font-weight:700;line-height:1}
.toast-success{background:#2E7D5B}
.toast-error{background:#C0392B}
*{scrollbar-color:var(--switch-off) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--switch-off);border-radius:999px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--coral);border:2px solid transparent;background-clip:content-box}
body,.topbar,.card,.email-line,.tag-list li,.msg-form input,.msg-form textarea,.msg-item,.theme-btn,.theme-menu,.theme-menu li{
  transition:background-color 250ms ease,color 250ms ease,border-color 250ms ease,box-shadow 250ms ease;
}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
@media (max-width:640px){
  .nav{display:none}
  body{font-size:17px}
  h1{font-size:30px}
  .avatar{width:92px;height:92px;font-size:40px}
  .hero{padding:28px 0 20px}
  .card{padding:20px 18px;margin-bottom:16px}
  .card h2{font-size:24px}
  .topbar{padding:0 16px}
}
@media (max-width:600px){
  main{width:calc(100% - 32px)}
  .hero{padding:28px 0 20px}
  .card{padding:22px 20px}
  .btn{min-height:44px;padding:12px 22px}
  .toast-wrap{left:16px;right:16px;bottom:20px;transform:none;align-items:center}
  .toast{max-width:calc(100vw - 32px);text-align:center}
}
@media (prefers-reduced-motion: reduce){
  .btn,.toast{transition:none}
  .btn:hover,.btn:active{transform:none}
  .btn .ripple{display:none}
  body,.topbar,.card,.email-line,.tag-list li,.msg-form input,.msg-form textarea,.msg-item,.theme-btn,.theme-menu,.theme-menu li{transition:none}
}
/* ---------- 深色模式细化 ---------- */
html{scroll-padding-top:105px}
main,
#top,
section{scroll-margin-top:88px}

[data-theme="dark"] .card{
  background:var(--card);
  border:1px solid var(--border-strong);
  border-left:4px solid var(--accent-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 1px 2px rgba(0,0,0,.28);
}
[data-theme="dark"] h1,
[data-theme="dark"] .card h2,
[data-theme="dark"] .sub-title{color:var(--text-strong)}
[data-theme="dark"] .card p,
[data-theme="dark"] .card li,
[data-theme="dark"] .sub-text{color:var(--text)}
[data-theme="dark"] .tagline{color:var(--muted-blue)}
[data-theme="dark"] .email-line{color:var(--text);text-decoration-color:var(--link-underline)}
[data-theme="dark"] .topbar{border-bottom-color:var(--border)}
[data-theme="dark"] .msg-item{background:var(--msg-bg);border-color:var(--msg-border)}
/* ---------- 鼠标互动：首屏柔光 ---------- */
body{overflow-x:clip}
.hero{position:relative}
.hero-glow{
  position:fixed;
  left:0;
  top:0;
  width:220px;
  height:220px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle, rgba(255,107,87,.42) 0%, rgba(255,107,87,.14) 40%, rgba(255,107,87,0) 72%);
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity 250ms ease,transform 180ms ease-out;
  z-index:0;
}
.hero-glow.is-on{opacity:1}
[data-theme="dark"] .hero-glow{
  background:radial-gradient(circle, rgba(255,138,118,.40) 0%, rgba(255,138,118,.13) 40%, rgba(255,138,118,0) 72%);
}
.hero > *:not(.hero-glow){position:relative;z-index:1}

/* ---------- 鼠标互动：卡片轻倾斜 ---------- */
.card.is-tiltable{
  will-change:transform;
  transform-origin:center center;
  transition:transform 250ms ease,box-shadow 250ms ease,background-color 250ms ease,border-color 250ms ease,color 250ms ease;
}
.card.is-tilting{transition:box-shadow 250ms ease}

@media (prefers-reduced-motion: reduce){
  .hero-glow{display:none}
  .card.is-tiltable{
  will-change:transform;
  transform-origin:center center;
  transition:none}
}
/* ---------- 分页：第一屏 ---------- */
.page-1{
  min-height:calc(100vh - 64px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:56px 0 80px;
  box-sizing:border-box;
}
.page-1 .avatar{width:176px;height:176px;font-size:72px;margin-bottom:34px}
.page-1 h1{font-size:46px;margin:0 0 16px}
.page-1 .tagline{font-size:20px;margin:0 auto 46px}
.next-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  padding:0;
  color:var(--coral);
  background:var(--btn-ghost-bg);
  border:1.5px solid var(--coral);
  border-radius:50%;
  cursor:pointer;
  transition:background-color 250ms ease,color 250ms ease,border-color 250ms ease;
}

.next-btn:hover,
.next-btn:focus-visible{background:var(--coral);color:#fff}
.next-btn:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.next-btn svg{width:22px;height:22px}
.next-btn{animation:arrow-breathe 2.6s ease-in-out infinite}
@keyframes arrow-breathe{
  0%,100%{transform:translateY(0) scale(1);opacity:.92}
  50%{transform:translateY(4px) scale(1.03);opacity:1}
}

/* ---------- 分页：第二屏淡入上滑 ---------- */
.page-2{transition:opacity 300ms ease,transform 300ms ease}
html.js-motion .page-2{opacity:0;transform:translateY(32px)}
html.js-motion .page-2.is-entered{opacity:1;transform:translateY(0)}

@media (max-width:640px){
  .page-1{min-height:calc(100vh - 64px);padding:40px 0 56px}
  .page-1 .avatar{width:132px;height:132px;font-size:54px;margin-bottom:26px}
  .page-1 h1{font-size:34px;margin:0 0 12px}
  .page-1 .tagline{font-size:18px;margin:0 auto 34px}
}
@media (prefers-reduced-motion: reduce){
  .next-btn{animation:none}
  .page-2{transition:none}
}
/* 柔光置于内容之下，整页可见 */
.hero-glow{
  position:fixed;
  left:0;
  top:0;
  width:220px;
  height:220px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle, rgba(255,107,87,.42) 0%, rgba(255,107,87,.14) 40%, rgba(255,107,87,0) 72%);
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity 250ms ease,transform 180ms ease-out;
  z-index:0;
}
.card,footer{position:relative;z-index:1}

/* ---------- 分页：第二屏到第三屏 ---------- */
.page-next{display:flex;justify-content:center;padding:4px 0 32px}
.page-3{transition:opacity 300ms ease,transform 300ms ease;padding-top:8px}
html.js-motion .page-3{opacity:0;transform:translateY(32px)}
html.js-motion .page-3.is-entered{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  .page-3{transition:none}
}
/* ---------- 更灵动的页面衔接 ---------- */
.page-2,
.page-3{
  transition:opacity 380ms cubic-bezier(.16,1,.3,1),transform 380ms cubic-bezier(.16,1,.3,1);
}
html.js-motion .page-2,
html.js-motion .page-3{opacity:0;transform:translateY(40px)}
html.js-motion .page-2.is-entered,
html.js-motion .page-3.is-entered{opacity:1;transform:translateY(0)}
.page-1{
  transition:opacity 320ms cubic-bezier(.22,.61,.36,1),transform 320ms cubic-bezier(.22,.61,.36,1);
}
html.js-motion .page-1.is-left{opacity:0;transform:translateY(-24px)}
@media (prefers-reduced-motion: reduce){
  .page-1{transition:none}
  html.js-motion .page-1.is-left{opacity:1;transform:none}
}
/* ---------- 第二屏到第三屏：更明显的翻页 ---------- */
.page-3{
  transform-origin:50% 0;
  transition:opacity 440ms cubic-bezier(.16,1,.3,1),transform 440ms cubic-bezier(.16,1,.3,1);
}
html.js-motion .page-3{opacity:0;transform:translateY(48px) scale(.985)}
html.js-motion .page-3.is-entered{opacity:1;transform:translateY(0) scale(1)}
.page-next{transition:opacity 320ms ease,transform 320ms ease}
.page-next.is-hidden{opacity:0;transform:translateY(10px);pointer-events:none}
@media (prefers-reduced-motion: reduce){
  .page-3{transition:none}
  .page-next{transition:none}
}
/* ---------- 第二屏到第三屏：与前面一致的翻页 ---------- */
.page-3{
  transform-origin:50% 0;
  transition:opacity 380ms cubic-bezier(.16,1,.3,1),transform 380ms cubic-bezier(.16,1,.3,1);
}
html.js-motion .page-3{opacity:0;transform:translateY(40px)}
html.js-motion .page-3.is-entered{opacity:1;transform:translateY(0)}
html.js-motion .page-2.is-left{opacity:0;transform:translateY(-24px)}
@media (prefers-reduced-motion: reduce){
  html.js-motion .page-2.is-left{opacity:1;transform:none}
}
/* ---------- 离散翻页：不露出下一页 ---------- */
html.js-motion .page{display:none}
html.js-motion .page.is-active{display:block}
html.js-motion .page.is-leaving{opacity:0;transform:translateY(-16px);transition-duration:200ms}
html.js-motion .page-next{display:none}
html.js-motion .page-next.is-active{display:block}
.page-1,.page-2,.page-3{transition:opacity 380ms cubic-bezier(.16,1,.3,1),transform 380ms cubic-bezier(.16,1,.3,1)}
html.js-motion .page-1.is-active:not(.is-entered),
html.js-motion .page-2.is-active:not(.is-entered),
html.js-motion .page-3.is-active:not(.is-entered){opacity:0;transform:translateY(40px)}
html.js-motion .page-1.is-active.is-entered,
html.js-motion .page-2.is-active.is-entered,
html.js-motion .page-3.is-active.is-entered{opacity:1;transform:translateY(0)}
.page-2,.page-3{padding-top:40px}
/* ---------- 修正：箭头居中 + 第一页视觉中心下移 ---------- */
html.js-motion .page-next.is-active{display:flex;justify-content:center}
.page-1{padding:120px 0 40px}
@media (max-width:640px){
  .page-1{padding:80px 0 32px}
}
/* ---------- 翻页手感：更慢、更重 ---------- */
html.js-motion .page-1,
html.js-motion .page-2,
html.js-motion .page-3{
  transition:opacity 620ms cubic-bezier(.4,0,.2,1),transform 680ms cubic-bezier(.4,0,.2,1);
}
html.js-motion .page-1.is-active:not(.is-entered),
html.js-motion .page-2.is-active:not(.is-entered),
html.js-motion .page-3.is-active:not(.is-entered){opacity:0;transform:translateY(90px)}
html.js-motion .page-1.is-active.is-entered,
html.js-motion .page-2.is-active.is-entered,
html.js-motion .page-3.is-active.is-entered{opacity:1;transform:translateY(0)}
html.js-motion .page.is-leaving{
  opacity:0;
  transform:translateY(-48px);
  transition-duration:340ms;
}
/* ---------- 停顿时的细微滑动 ---------- */
html.js-motion .page.is-active.is-armed{
  opacity:1;
  transform:translateY(-10px);
  transition:transform 460ms cubic-bezier(.33,0,.2,1);
}
html.js-motion .page.is-active.is-leaving{
  opacity:0;
  transform:translateY(-48px);
  transition:opacity 340ms cubic-bezier(.4,0,.6,1),transform 340ms cubic-bezier(.4,0,.6,1);
}
/* ---------- 第一页视觉中心再下移 ---------- */
.page-1{padding:170px 0 24px}
@media (max-width:640px){
  .page-1{padding:110px 0 24px}
}
@media (max-height:700px){
  .page-1{padding:100px 0 24px}
}
/* ---------- 第四屏：数字分身 ---------- */
.page-4{
  padding-top:40px;
  transition:opacity 620ms cubic-bezier(.4,0,.2,1),transform 680ms cubic-bezier(.4,0,.2,1);
}
html.js-motion .page-4.is-active:not(.is-entered){opacity:0;transform:translateY(90px)}
html.js-motion .page-4.is-active.is-entered{opacity:1;transform:translateY(0)}
.chat-log{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:320px;
  overflow-y:auto;
}
.chat-item{display:flex}
.chat-me{justify-content:flex-end}
.chat-bot{justify-content:flex-start}
.chat-bubble{
  max-width:78%;
  padding:10px 14px;
  border-radius:14px;
  font-size:16px;
  line-height:1.7;
  white-space:pre-wrap;
  word-break:break-word;
}
.chat-me .chat-bubble{background:var(--grad);color:#fff;border-bottom-right-radius:4px}
.chat-bot .chat-bubble{background:var(--msg-bg);border:1px solid var(--msg-border);color:var(--text);border-bottom-left-radius:4px}
.chat-typing{opacity:.7;letter-spacing:2px}
.chat-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{
  padding:6px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--btn-ghost-bg);
  color:var(--muted);
  font:inherit;
  font-size:14px;
  cursor:pointer;
  transition:color 250ms ease,border-color 250ms ease;
}
.chip:hover,
.chip:focus-visible{color:var(--coral);border-color:var(--coral);outline:none}
.chat-form{display:flex;gap:10px;margin-top:16px}
.chat-form input{
  flex:1;
  font:inherit;
  font-weight:400;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--input-bg);
  color:var(--text);
}
.chat-form input::placeholder{color:var(--faint)}
.chat-form input:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px rgba(255,107,87,.18)}
.agent-ball{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:40;
  width:56px;
  height:56px;
  border:none;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:var(--grad);
  cursor:pointer;
  box-shadow:0 8px 20px rgba(255,107,87,.35);
  transition:opacity 300ms ease,transform 300ms ease,box-shadow 250ms ease;
}
.agent-ball:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(255,107,87,.42)}
.agent-ball:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
html[data-page="page4"] .agent-ball{opacity:0;pointer-events:none;transform:scale(.9)}
@media (max-width:640px){
  .agent-ball{width:48px;height:48px;right:16px;bottom:16px}
  .chat-form{flex-direction:column}
  .chat-form .btn{width:100%}
  .chat-log{max-height:260px}
}
@media (prefers-reduced-motion: reduce){
  .agent-ball{transition:none}
}
/* ---------- 页脚反馈入口 + 弹窗 ---------- */
.footer-link{
  padding:0;
  border:none;
  background:none;
  color:var(--muted);
  font:inherit;
  font-size:14px;
  text-decoration:underline;
  cursor:pointer;
}
.footer-link:hover,
.footer-link:focus-visible{color:var(--coral);outline:none}
.feedback-modal{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.feedback-modal[hidden]{display:none}
.feedback-backdrop{position:absolute;inset:0;background:rgba(20,20,24,.45)}
.feedback-dialog{
  position:relative;
  z-index:1;
  width:100%;
  max-width:520px;
  max-height:86vh;
  overflow-y:auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
  padding:26px 28px;
}
.feedback-dialog h2{margin:0 0 6px;font-size:24px}
.feedback-close{
  position:absolute;
  top:12px;
  right:14px;
  width:32px;
  height:32px;
  border:none;
  border-radius:50%;
  background:none;
  color:var(--muted);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.feedback-close:hover,
.feedback-close:focus-visible{color:var(--coral);outline:none}
.feedback-form{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.feedback-form label{font-weight:600;font-size:15px}
.feedback-form textarea,
.feedback-form input{
  font:inherit;
  font-weight:400;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--input-bg);
  color:var(--text);
}
.feedback-form textarea{resize:vertical}
.feedback-form textarea::placeholder,
.feedback-form input::placeholder{color:var(--faint)}
.feedback-form textarea:focus,
.feedback-form input:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px rgba(255,107,87,.18)}
.rating{border:none;padding:0;margin:0}
.rating legend{padding:0;font-weight:600;font-size:15px}
.rating-row{display:flex;gap:8px;margin-top:8px}
.rating-dot{
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--btn-ghost-bg);
  color:var(--muted);
  font:inherit;
  font-size:15px;
  cursor:pointer;
  transition:color 250ms ease,border-color 250ms ease,background-color 250ms ease;
}
.rating-dot:hover,
.rating-dot:focus-visible{color:var(--coral);border-color:var(--coral);outline:none}
.rating-dot.is-on{background:var(--coral);border-color:var(--coral);color:#fff}
.feedback-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
html.feedback-open{overflow:hidden}
@media (max-width:640px){
  .feedback-modal{padding:16px}
  .feedback-dialog{padding:22px 18px;max-height:88vh}
}
/* ---------- 自定义鼠标 ---------- */
.cursor-dot,
.cursor-ring{
  position:fixed;
  left:0;
  top:0;
  pointer-events:none;
  z-index:70;
  opacity:0;
  will-change:transform;
}
.cursor-ring{
  width:26px;
  height:26px;
  margin:-13px 0 0 -13px;
  border:1px solid rgba(255,107,87,.45);
  border-radius:50%;
  transition:width 180ms ease,height 180ms ease,margin 180ms ease,background-color 220ms ease,border-color 220ms ease,opacity 200ms ease;
}
.cursor-ring.is-hover{
  width:46px;
  height:46px;
  margin:-23px 0 0 -23px;
  border-width:1.5px;
  background:rgba(255,107,87,.12);
}
html.cursor-on .cursor-dot,
html.cursor-on .cursor-ring{opacity:1}
@media (prefers-reduced-motion: reduce){
  .cursor-dot,
  .cursor-ring{transition:none}
}
/* ---------- 留言板与数字分身整体下移 ---------- */
.page-3,
.page-4{padding-top:118px}
@media (max-width:640px){
  .page-3,
  .page-4{padding-top:56px}
}
@media (max-height:700px){
  .page-3,
  .page-4{padding-top:40px}
}
/* ---------- 留言板与数字分身再往下移 ---------- */
.page-3,
.page-4{padding-top:185px}
@media (max-width:640px){
  .page-3,
  .page-4{padding-top:118px}
}
@media (max-height:760px){
  .page-3,
  .page-4{padding-top:105px}
}
/* ---------- 导航名字加大 ---------- */
@media (max-width:640px){
  .brand{font-size:23px}
}
/* ---------- 导航间距加大 ---------- */
@media (max-width:640px){
  .topbar{padding:0 20px}
  .nav{gap:18px}
}
/* ---------- 留言板上移 + 页脚独立成屏 ---------- */
.page-3,
.page-4{min-height:calc(100vh - 64px);box-sizing:border-box}
.page-3{padding-top:120px}
@media (max-width:640px){
  .page-3{padding-top:88px}
}
@media (max-height:760px){
  .page-3{padding-top:80px}
}
footer{padding-bottom:34px}
/* ---------- 只显示圆环，不显示系统箭头 ---------- */
/* ---------- 文字输入时隐藏圆环 ---------- */
html.cursor-text .cursor-ring{opacity:0}

/* ---------- 隐私备注 ---------- */
.privacy-note{margin:14px 0 0;color:var(--faint);font-size:13px;line-height:1.7}


/* ---------- 向上翻页：更温柔、无弹性 ---------- */
html.js-motion .page.is-active.is-armed-down{
  opacity:1;
  transform:translateY(6px);
  transition:transform 520ms cubic-bezier(.25,.1,.25,1);
}
html.js-motion .page.is-active.is-leaving-down{
  opacity:0;
  transform:translateY(34px);
  transition:opacity 420ms cubic-bezier(.25,.1,.25,1),transform 420ms cubic-bezier(.25,.1,.25,1);
}
html.js-motion .page.is-up{
  transition:opacity 620ms cubic-bezier(.25,.1,.25,1),transform 720ms cubic-bezier(.22,.61,.36,1);
}
html.js-motion .page.is-active.is-up:not(.is-entered){opacity:0;transform:translateY(56px)}
html.js-motion .page.is-active.is-up.is-entered{opacity:1;transform:translateY(0)}
/* ---------- 箭头：随翻页位移 ---------- */
.page-next{transition:opacity 320ms ease,transform 320ms ease}
.page-next.is-pulling{opacity:0;transform:translateY(10px)}
.page-next.is-arriving{opacity:0;transform:translateY(12px)}

/* ---------- 反馈：设备选择 ---------- */
.device-group{border:none;padding:0;margin:0}
.device-group legend{padding:0;font-weight:600;font-size:15px}
.device-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.device-chip.is-on{background:var(--coral);border-color:var(--coral);color:#fff}

/* ---------- 评分改为星形 ---------- */
.rating-dot{font-size:19px;line-height:1;color:var(--faint)}
.rating-dot.is-on{background:rgba(255,107,87,.12);border-color:var(--coral);color:var(--coral)}

/* ---------- 评分星星：无圆圈、更大 ---------- */
.rating-row{gap:4px}
.rating-dot{
  width:auto;
  height:auto;
  padding:4px 2px;
  border:none;
  border-radius:0;
  background:none;
  color:var(--faint);
  font-size:32px;
  line-height:1;
  cursor:pointer;
}
.rating-dot:hover{color:var(--coral);border:none;background:none}
.rating-dot.is-on{background:none;border:none;color:var(--coral)}
.rating-dot:focus-visible{outline:2px solid var(--coral);outline-offset:2px;border-radius:4px}
/* ---------- 留言改为聊天气泡 ---------- */
.msg-list{align-items:flex-start}
.msg-item{
  max-width:78%;
  border-radius:14px 14px 14px 4px;
  padding:10px 14px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.msg-head{gap:8px;margin-bottom:2px}
.msg-name{font-size:14px}
.msg-time{font-size:12px}
.msg-body{font-size:16px}
.msg-empty{width:100%}
@media (max-width:640px){
  .msg-item{max-width:88%}
}
/* ---------- 留言气泡：更圆润 + 自选颜色 ---------- */
.msg-item{
  border-radius:20px 20px 20px 6px;
  background:var(--bubble-bg,var(--msg-bg));
  border:1px solid var(--bubble-border,var(--msg-border));
}
.msg-item.color-coral{--bubble-bg:rgba(255,107,87,.14);--bubble-border:rgba(255,107,87,.34)}
.msg-item.color-amber{--bubble-bg:rgba(232,145,45,.15);--bubble-border:rgba(232,145,45,.34)}
.msg-item.color-sky{--bubble-bg:rgba(74,144,226,.14);--bubble-border:rgba(74,144,226,.34)}
.msg-item.color-mint{--bubble-bg:rgba(47,163,107,.14);--bubble-border:rgba(47,163,107,.34)}
.msg-item.color-lilac{--bubble-bg:rgba(139,92,246,.14);--bubble-border:rgba(139,92,246,.34)}

.msg-color{border:none;padding:0;margin:0}
.msg-color legend{padding:0;font-weight:600}
.color-row{display:flex;gap:10px;margin-top:8px}
.color-dot{
  width:26px;
  height:26px;
  padding:0;
  border:2px solid transparent;
  border-radius:50%;
  cursor:pointer;
  transition:transform 180ms ease,border-color 180ms ease;
}
.color-dot:hover{transform:scale(1.08)}
.color-dot[aria-pressed="true"]{transform:scale(1.08)}
.color-dot:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.color-dot[data-color="coral"]{background:#FF6B57}
.color-dot[data-color="amber"]{background:#E8912D}
.color-dot[data-color="sky"]{background:#4A90E2}
.color-dot[data-color="mint"]{background:#2FA36B}
.color-dot[data-color="lilac"]{background:#8B5CF6}
/* ---------- 颜色选项：同色光环，无黑框 ---------- */
.color-dot{
  border:none;
  box-shadow:0 0 0 0 transparent;
  transition:transform 180ms ease,box-shadow 200ms ease;
}
.color-dot:hover{transform:scale(1.1)}
.color-dot[aria-pressed="true"]{
  transform:scale(1.12);
  box-shadow:0 0 0 2px var(--card),0 0 0 4px currentColor;
}
.color-dot[data-color="coral"]{background:#FF6B57;color:#FF6B57}
.color-dot[data-color="amber"]{background:#E8912D;color:#E8912D}
.color-dot[data-color="sky"]{background:#4A90E2;color:#4A90E2}
.color-dot[data-color="mint"]{background:#2FA36B;color:#2FA36B}
.color-dot[data-color="lilac"]{background:#8B5CF6;color:#8B5CF6}
.color-dot:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* ---------- 留言板：先留言后输入 ---------- */
.board #msgList{margin:0 0 6px}
.board .clear-btn{margin:0 0 16px}
.board .msg-form{margin-top:4px}
.msg-more{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.msg-more[hidden]{display:none}
.msg-more.is-open{animation:msg-more-in 260ms ease-out}
@keyframes msg-more-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.rel-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.rel-chip.is-on{background:var(--coral);border-color:var(--coral);color:#fff}
.msg-rel-tag{color:var(--faint);font-size:12px;margin-left:6px}
/* ---------- 管理员模式 ---------- */
.admin-bar{display:flex;gap:14px;align-items:center;margin:0 0 16px}
.admin-bar[hidden]{display:none}
.msg-admin{
  margin-left:auto;
  padding:0;
  border:none;
  background:none;
  color:var(--faint);
  font:inherit;
  font-size:12px;
  text-decoration:underline;
  cursor:pointer;
}
.msg-admin:hover,
.msg-admin:focus-visible{color:var(--coral);outline:none}
/* ---------- 颜色选项：透明度和气泡一致 ---------- */
.color-dot{border-width:1px;border-style:solid}
.color-dot[data-color="coral"]{background:rgba(255,107,87,.14);border-color:rgba(255,107,87,.34);color:#FF6B57}
.color-dot[data-color="amber"]{background:rgba(232,145,45,.15);border-color:rgba(232,145,45,.34);color:#E8912D}
.color-dot[data-color="sky"]{background:rgba(74,144,226,.14);border-color:rgba(74,144,226,.34);color:#4A90E2}
.color-dot[data-color="mint"]{background:rgba(47,163,107,.14);border-color:rgba(47,163,107,.34);color:#2FA36B}
.color-dot[data-color="lilac"]{background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.34);color:#8B5CF6}
/* ---------- 与我的关系：与其他栏一致 ---------- */
.msg-rel{border:none;padding:0;margin:0}
.msg-rel legend{padding:0;font-weight:600}
/* ---------- 手机端点击不出现蓝色方块 ---------- */
*{-webkit-tap-highlight-color:transparent}
html{-webkit-tap-highlight-color:transparent}
button,a,input,textarea,label,summary{-webkit-tap-highlight-color:transparent}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible){outline:none}
/* ---------- 颜色选项：更好看、间距更一致 ---------- */
.msg-more{gap:16px}
.color-row{gap:12px;margin-top:10px}
.color-dot{
  width:30px;
  height:30px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.color-dot[aria-pressed="true"]{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 2px var(--card),0 0 0 4px currentColor;
}
/* ---------- 手机端：页脚紧凑 + 翻页轻快 ---------- */
@media (max-width:640px){
  footer{padding:8px 14px 12px;font-size:12px}
  footer p{margin:1px 0}
  .page-2{padding-top:20px}
  .page-3,
  .page-4{padding-top:52px}
  .page-1,.page-2,.page-3,.page-4{transition-duration:420ms}
  html.js-motion .page.is-active.is-leaving{transition-duration:240ms}
}