:root{
  /* Q版糖果色系 */
  --c-pink:#FF8FCF;
  --c-pink-light:#FFB8E8;
  --c-blue:#7DD8FF;
  --c-blue-light:#B8ECFF;
  --c-yellow:#FFD54F;
  --c-yellow-light:#FFE99A;
  --c-bg:#FFF5FA;
  --c-text:#6B5B8A;
  --c-green:#7EDCB5;
  --c-orange:#FFB067;
  --c-purple:#C5A3FF;

  /* 超圆润圆角（Q版必备） */
  --radius-xl:32px;
  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:12px;
  --radius-xs:8px;

  /* 多层糖果阴影 */
  --shadow-card:
    0 2px 4px rgba(255, 143, 207, 0.12),
    0 8px 24px rgba(255, 143, 207, 0.15),
    0 16px 40px rgba(125, 216, 255, 0.10);
  --shadow-btn:
    0 4px 0 rgba(0, 0, 0, 0.08),
    0 6px 20px rgba(255, 143, 207, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.7);
  --shadow-float:
    0 6px 20px rgba(255, 143, 207, 0.22),
    0 16px 44px rgba(125, 216, 255, 0.20),
    0 28px 64px rgba(255, 213, 79, 0.15);
  --shadow-glow:
    0 0 20px rgba(255, 143, 207, 0.4),
    0 0 40px rgba(125, 216, 255, 0.25);
  --shadow-inner:inset 0 3px 12px rgba(107, 91, 138, 0.08);

  /* 糖果色边框 */
  --border:2px solid rgba(255, 255, 255, 0.75);
  --border-rainbow:2px solid;
  --border-soft:1px solid rgba(255, 255, 255, 0.5);
  
  /* 平滑过渡（不跳跃） */
  --trans:250ms ease-out;
  --trans-fast:150ms ease-out;
  --trans-smooth:300ms ease;
  --container:1200px;
  
  /* 玻璃态效果 */
  --glass-bg:rgba(255, 255, 255, 0.82);
  --glass-blur:blur(16px) saturate(180%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--c-text);
  /* 全站背景（按需求使用 bg_head.jpg）：
     用伪元素承载图片，避免影响内容层的背景渐变与可读性 */
  background: var(--c-bg);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:url("../bg_head.jpg");
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:fixed;
  opacity:1;
  filter:saturate(1.1) brightness(1);
  z-index:-2;
  pointer-events:none;
}
body::after{
  /* 极轻微氛围层（不影响背景清晰度） */
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle 1200px at 15% 10%, rgba(140,226,255,.08), transparent 55%),
    radial-gradient(circle 1000px at 85% 5%, rgba(255,224,102,.06), transparent 50%),
    radial-gradient(ellipse 1400px 800px at 50% 90%, rgba(255,158,216,.05), transparent 65%);
  z-index:-1;
  pointer-events:none;
  animation:atmosphereShift 20s ease-in-out infinite alternate;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}

.container{max-width:var(--container);margin:0 auto;padding:0 16px}
.muted{opacity:.85}
.small{font-size:14px}
.hidden{display:none !important}
.sr-only{
  position:absolute !important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:-999px;top:12px;
  background: #fff;
  padding:10px 12px;
  border-radius:12px;
  box-shadow:var(--shadow-card);
  z-index:9999;
}
.skip-link:focus{left:12px}

.page-progress{
  position:fixed;top:0;left:0;right:0;height:4px;
  background:transparent;z-index:9999;
}
.page-progress__bar{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--c-blue),var(--c-pink),var(--c-yellow));
  box-shadow:0 0 12px rgba(255,158,216,.55);
  transition:width 260ms ease;
}

.card{
  background:
    linear-gradient(145deg, 
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 248, 252, 0.92) 50%,
      rgba(255, 255, 255, 0.95) 100%
    );
  border:3px solid rgba(255, 255, 255, 0.9);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  padding:24px;
  position:relative;
  overflow:hidden;
  transition:all var(--trans);
}
.card::before{
  /* 顶部高光条 */
  content:"";
  position:absolute;
  top:0;left:20%;right:20%;
  height:4px;
  background:linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.9),
    transparent
  );
  border-radius:0 0 4px 4px;
  pointer-events:none;
}
.card::after{
  /* 彩虹边框光晕 */
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:var(--radius-xl);
  background:linear-gradient(135deg, 
    var(--c-pink-light), 
    var(--c-blue-light), 
    var(--c-yellow-light),
    var(--c-pink-light)
  );
  z-index:-1;
  opacity:0;
  transition:opacity var(--trans-fast);
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-float);
  border-color:rgba(255, 255, 255, 1);
}
.card:hover::after{
  opacity:0.4;
}
.card--soft{
  background:
    linear-gradient(145deg,
      rgba(255, 248, 252, 0.98) 0%,
      rgba(255, 255, 255, 0.95) 50%,
      rgba(184, 236, 255, 0.3) 100%
    );
  border:2px solid rgba(255, 255, 255, 0.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.main-nav{
  position:sticky;top:0;z-index:1000;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 245, 250, 0.92) 50%,
      rgba(255, 255, 255, 0.95) 100%
    );
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg, 
    var(--c-pink-light), 
    var(--c-blue-light), 
    var(--c-yellow-light),
    var(--c-pink-light)
  ) 1;
  box-shadow:
    0 4px 20px rgba(255, 143, 207, 0.12),
    0 8px 32px rgba(125, 216, 255, 0.10),
    inset 0 -2px 0 rgba(255, 255, 255, 0.8);
}
.nav-container{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;min-height:64px;
}
.logo{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;
}
.logo-badge{
  width:52px;
  height:52px;
  border-radius:var(--radius-md);
  object-fit:cover;
  display:block;
  box-shadow:
    0 3px 12px rgba(255, 143, 207, 0.25),
    0 6px 20px rgba(125, 216, 255, 0.18);
  border:3px solid rgba(255, 255, 255, 0.9);
  background:linear-gradient(135deg,
    var(--c-pink-light) 0%,
    var(--c-yellow-light) 100%
  );
  transition:all var(--trans);
}
.logo-badge:hover{
  transform:translateY(-2px);
  box-shadow:
    0 5px 16px rgba(255, 143, 207, 0.32),
    0 10px 28px rgba(125, 216, 255, 0.25);
}
.logo-badge--small{
  width:44px;
  height:44px;
  border-radius:var(--radius-sm);
}
.logo-text{
  font-weight:900;
  font-size:20px;
  letter-spacing:1px;
  background:linear-gradient(135deg, var(--c-pink), var(--c-purple), var(--c-blue));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:none;
  filter:drop-shadow(0 2px 4px rgba(255, 143, 207, 0.3));
}
.logo-text{font-weight:900;letter-spacing:.5px}

.nav-menu{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.nav-menu a{
  padding:12px 20px;
  border-radius:var(--radius-lg);
  font-weight:700;
  font-size:15px;
  letter-spacing:0.5px;
  position:relative;
  transition:all var(--trans);
  border:2px solid transparent;
}
.nav-menu a::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--c-blue-light), var(--c-pink-light), var(--c-yellow-light));
  opacity:0;
  z-index:-1;
  transition:opacity var(--trans-fast);
}
.nav-menu a:hover::before{
  opacity:1;
}
.nav-menu a:hover{
  transform:translateY(-2px);
  background:rgba(255, 255, 255, 0.9);
  box-shadow:
    0 4px 12px rgba(255, 143, 207, 0.2),
    0 8px 20px rgba(125, 216, 255, 0.15);
}
.nav-menu a.active{
  background:
    linear-gradient(135deg,
      var(--c-pink-light) 0%,
      var(--c-yellow-light) 100%
    );
  box-shadow:
    0 4px 0 rgba(255, 143, 207, 0.25),
    0 6px 16px rgba(255, 143, 207, 0.30),
    inset 0 2px 0 rgba(255, 255, 255, 0.7);
  border:2px solid rgba(255, 255, 255, 0.8);
  color:var(--c-text);
}

.nav-actions{display:flex;align-items:center;gap:8px}
.mobile-menu-btn{
  display:none;
  width:44px;height:44px;border-radius:14px;
  border:var(--border);
  background:rgba(255,255,255,.75);
  cursor:pointer;
  transition:transform var(--trans), box-shadow var(--trans);
}
.mobile-menu-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-btn)}

.tiny-btn,.icon-btn,.btn-ghost{
  border:var(--border);
  background:rgba(255,255,255,.75);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  transition:transform var(--trans), box-shadow var(--trans), background var(--trans);
}
.tiny-btn:hover,.icon-btn:hover,.btn-ghost:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-btn);
  background:rgba(255,255,255,.92);
}
.icon-btn{width:42px;height:42px;padding:0;display:grid;place-items:center}

.hero-banner{
  position:relative;
  padding:26px 0 18px;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;

}
.banner-content{
  position:relative;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:center;
}
.hero-left h1{
  margin:0 0 14px;
  font-size:38px;
  font-weight:900;
  letter-spacing:.8px;
  line-height:1.2;
  background:linear-gradient(135deg,
    var(--c-text) 0%,
    rgba(90,74,114,.85) 50%,
    rgba(90,74,114,.92) 100%
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:none;
  filter:drop-shadow(0 2px 4px rgba(255,158,216,.15))
         drop-shadow(0 4px 12px rgba(140,226,255,.12))
         drop-shadow(0 8px 24px rgba(255,224,102,.08));
}
.hero-subtitle{margin:0 0 14px;font-size:16px;line-height:1.6}
.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.badge{
  padding:12px 20px;
  border-radius:999px;
  background:
    linear-gradient(145deg,
      var(--c-pink-light) 0%,
      var(--c-pink) 100%
    );
  border:2px solid rgba(255, 255, 255, 0.85);
  font-weight:800;
  font-size:14px;
  letter-spacing:.5px;
  color:#fff;
  text-shadow:0 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow:
    0 3px 0 rgba(255, 143, 207, 0.3),
    0 4px 12px rgba(255, 143, 207, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
  transition:all var(--trans);
  cursor:default;
}
.badge:hover{
  transform:translateY(-2px);
  box-shadow:
    0 4px 0 rgba(255, 143, 207, 0.3),
    0 6px 16px rgba(255, 143, 207, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.6);
}
.badge--blue{
  background:
    linear-gradient(145deg,
      var(--c-blue-light) 0%,
      var(--c-blue) 100%
    );
  box-shadow:
    0 3px 0 rgba(125, 216, 255, 0.3),
    0 4px 12px rgba(125, 216, 255, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
}
.badge--yellow{
  background:
    linear-gradient(145deg,
      var(--c-yellow-light) 0%,
      var(--c-yellow) 100%
    );
  color:var(--c-text);
  box-shadow:
    0 2px 6px rgba(255,224,102,.22),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.hero-anchors{display:flex;gap:10px;flex-wrap:wrap}
.link-pill{
  padding:10px 12px;border-radius:999px;
  background:rgba(255,255,255,.75);
  border:var(--border);
  transition:transform var(--trans), box-shadow var(--trans);
}
.link-pill:hover{transform:translateY(-1px);box-shadow:var(--shadow-btn)}

.banner-characters{
  position:relative;
  width:min(360px, 100%);
  margin-left:auto;
  padding:16px;
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(140,226,255,.25), rgba(255,255,255,.75));
  border:var(--border);
  box-shadow:var(--shadow-float);
}
.character-img{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.55);
}
.sparkles .sparkle{
  position:absolute;
  color:rgba(255,224,102,.95);
  text-shadow:0 8px 18px rgba(255,224,102,.35);
  font-size:18px;
}
.sparkles .s1{top:8px;left:14px}
.sparkles .s2{top:22px;right:18px}
.sparkles .s3{bottom:10px;left:30px}

.banner-decoration .cloud{
  position:absolute;
  width:120px;height:46px;border-radius:999px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(140,226,255,.35);
  box-shadow:0 12px 25px rgba(140,226,255,.16);
}
.banner-decoration .cloud::before,
.banner-decoration .cloud::after{
  content:"";
  position:absolute;
  background:inherit;border:inherit;border-radius:999px;
}
.banner-decoration .cloud::before{width:52px;height:52px;left:12px;top:-20px}
.banner-decoration .cloud::after{width:64px;height:64px;right:12px;top:-28px}
.banner-decoration .c1{left:5%;top:24px}
.banner-decoration .c2{right:6%;top:58px;transform:scale(.92)}
.banner-decoration .star{
  position:absolute;color:rgba(255,224,102,.9);
  text-shadow:0 10px 18px rgba(255,224,102,.25);
  font-size:18px;
}
.banner-decoration .st1{left:18%;top:88px}
.banner-decoration .st2{right:20%;top:126px}

.page-hero{
  padding:26px 0 14px;
}
.page-hero h1{margin:0 0 8px;font-size:28px}
.crumbs{display:flex;gap:8px;align-items:center;opacity:.9;font-size:14px}
.crumbs a{border-bottom:1px dashed rgba(90,74,114,.35)}
.page-body{padding:14px 16px 30px}

.noscript{
  margin:14px 0;
  padding:12px 14px;
  border-radius:var(--radius-md);
  background:rgba(255,179,102,.18);
  border:1px solid rgba(255,179,102,.35);
}

/* 视频与下载合并区域 */
.video-download-section{
  margin:18px auto 14px;
  padding:28px;
  overflow:visible !important;
}
.video-download-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:32px;
  align-items:start;
  overflow:visible;
}
.video-area{
  min-width:0;
}
.download-area{
  display:flex;
  flex-direction:column;
  gap:20px;
  position:relative;
  overflow:visible;
}
/* 悬浮装饰图片 - 吸附在右上角 */
.floating-mascot{
  position:absolute;
  top:-90px;
  right:-70px;
  width:150px;
  height:auto;
  filter:drop-shadow(0 8px 20px rgba(255, 143, 207, 0.4))
         drop-shadow(0 16px 40px rgba(125, 216, 255, 0.3));
  animation:mascotStick 3s ease-in-out infinite;
  z-index:100;
  pointer-events:none;
  transform-origin:top right;
}
/* 吸附效果：轻微晃动 */
@keyframes mascotStick{
  0%,100%{
    transform:translate(0, 0) rotate(0deg) scale(1);
  }
  25%{
    transform:translate(-2px, 1px) rotate(-2deg) scale(0.98);
  }
  50%{
    transform:translate(0, -2px) rotate(1deg) scale(1);
  }
  75%{
    transform:translate(1px, 1px) rotate(-1deg) scale(0.99);
  }
}
.section-title h2{
  margin:0 0 16px;
  font-size:24px;
  font-weight:900;
}
.section-title p{margin:0 0 12px}

.video-player{
  border-radius:var(--radius-lg);
  border:2px solid rgba(255,255,255,.65);
  background:
    linear-gradient(135deg,
      rgba(140,226,255,.35) 0%,
      rgba(180,220,255,.28) 50%,
      rgba(255,158,216,.22) 100%
    );
  box-shadow:
    0 4px 16px rgba(140,226,255,.15),
    0 8px 32px rgba(255,158,216,.12),
    inset 0 2px 0 rgba(255,255,255,.5);
  overflow:hidden;
  cursor:pointer;
  min-height:220px;
  position:relative;
  transition:all var(--trans);
}
.video-player:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.85);
  box-shadow:
    0 6px 20px rgba(140,226,255,.22),
    0 12px 40px rgba(255,158,216,.18),
    inset 0 2px 0 rgba(255,255,255,.6);
}
.video-player--large{
  min-height:360px;
}
.video-player--embed{
  cursor:default;
  aspect-ratio:16/9;
  min-height:0;
  padding:0;
}
.video-player--embed iframe{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  border:none;
  border-radius:var(--radius-lg);
}
.video-placeholder{
  position:absolute;inset:0;
  display:grid;place-items:center;
  gap:10px;
  text-align:center;
  padding:18px;
}
.play-btn{
  width:90px;height:90px;
  border-radius:var(--radius-xl);
  border:4px solid rgba(255, 255, 255, 0.95);
  background:
    linear-gradient(145deg,
      var(--c-pink) 0%,
      var(--c-pink-light) 50%,
      var(--c-yellow) 100%
    );
  color:#fff;
  font-size:36px;
  cursor:pointer;
  box-shadow:
    0 6px 0 rgba(255, 143, 207, 0.35),
    0 10px 28px rgba(255, 143, 207, 0.4),
    0 16px 44px rgba(255, 213, 79, 0.28),
    inset 0 3px 0 rgba(255, 255, 255, 0.7);
  transition:all var(--trans);
  position:relative;
}
.play-btn::before{
  content:"";
  position:absolute;
  top:8px;left:20%;right:20%;
  height:4px;
  background:linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.9),
    transparent
  );
  border-radius:2px;
  pointer-events:none;
}
.play-btn:hover{
  transform:translateY(-3px);
  box-shadow:
    0 8px 0 rgba(255, 143, 207, 0.38),
    0 14px 32px rgba(255, 143, 207, 0.45),
    0 20px 48px rgba(255, 213, 79, 0.32);
}
.play-btn:active{
  transform:scale(1.05);
}
.video-playing{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  padding:14px;
}
.video-playing__bar{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:999px;
  background:rgba(255,255,255,.75);
  border:var(--border);
}
.dot{width:10px;height:10px;border-radius:50%;background:var(--c-green)}

.features-slider .slider-container{
  position:relative;
  border-radius:var(--radius-lg);
  border:var(--border);
  background:rgba(255,255,255,.60);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  min-width:0;
}

/* 首页：游戏特色独立模块（从视频区下方单独展示） */
.features-section{
  margin:14px auto 14px;
  padding:16px;
}
.features-section .slider-container{
  position:relative;
  border-radius:var(--radius-lg);
  border:var(--border);
  background:rgba(255,255,255,.60);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  min-width:0;
}
.slider-track{
  display:flex;
  gap:12px;
  padding:14px;
  will-change:transform;
  transition:transform 320ms ease;
}
.feature-card{
  min-width:280px;
  border-radius:var(--radius-xl);
  border:3px solid rgba(255, 255, 255, 0.9);
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 248, 252, 0.95) 50%,
      rgba(184, 236, 255, 0.35) 100%
    );
  box-shadow:
    0 4px 0 rgba(255, 143, 207, 0.15),
    0 8px 24px rgba(255, 143, 207, 0.18),
    0 12px 36px rgba(125, 216, 255, 0.12),
    inset 0 2px 0 rgba(255, 255, 255, 0.7);
  padding:24px;
  transition:all var(--trans);
  position:relative;
  overflow:hidden;
}
.feature-card::before{
  content:"";
  position:absolute;
  top:0;left:20%;right:20%;
  height:4px;
  background:linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.9),
    transparent
  );
  border-radius:0 0 4px 4px;
  pointer-events:none;
}
.feature-card::after{
  content:"";
  position:absolute;
  bottom:-50%;right:-50%;
  width:150px;height:150px;
  background:radial-gradient(circle, 
    rgba(255, 143, 207, 0.15), 
    transparent 70%
  );
  pointer-events:none;
  transition:all var(--trans);
}
.feature-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255, 255, 255, 1);
  box-shadow:
    0 6px 0 rgba(255, 143, 207, 0.18),
    0 12px 28px rgba(255, 143, 207, 0.24),
    0 18px 40px rgba(125, 216, 255, 0.16);
}
.feature-card:hover::after{
  bottom:-35%;right:-35%;
  opacity:0.8;
}
.feature-card h3{
  margin:14px 0 10px;
  font-size:20px;
  font-weight:900;
  letter-spacing:.5px;
  background:linear-gradient(135deg, var(--c-text), var(--c-purple));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.feature-card p{
  margin:0;
  line-height:1.7;
  color:var(--c-text);
  opacity:.88;
}
.feature-icon{
  width:64px;height:64px;
  border-radius:var(--radius-lg);
  display:grid;place-items:center;
  background:
    linear-gradient(145deg,
      var(--c-yellow-light) 0%,
      var(--c-yellow) 100%
    );
  border:3px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 4px 0 rgba(255, 213, 79, 0.35),
    0 6px 16px rgba(255, 213, 79, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.6);
  font-size:32px;
  transition:all var(--trans);
}
.feature-card:hover .feature-icon{
  transform:translateY(-2px);
  box-shadow:
    0 5px 0 rgba(255, 213, 79, 0.38),
    0 8px 20px rgba(255, 213, 79, 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.7);
}
.slider-controls{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:14px 16px;
  border-top:2px solid rgba(255, 255, 255, 0.5);
  background:
    linear-gradient(180deg,
      rgba(255, 248, 252, 0.85) 0%,
      rgba(255, 255, 255, 0.80) 100%
    );
}
.prev-btn,.next-btn{
  width:48px;height:48px;
  border-radius:var(--radius-md);
  border:2px solid rgba(255, 255, 255, 0.85);
  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(184, 236, 255, 0.4) 100%
    );
  cursor:pointer;
  font-size:24px;
  font-weight:bold;
  color:var(--c-text);
  box-shadow:
    0 3px 0 rgba(125, 216, 255, 0.2),
    0 4px 12px rgba(125, 216, 255, 0.18);
  transition:all var(--trans);
}
.prev-btn:hover,.next-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 4px 0 rgba(125, 216, 255, 0.25),
    0 6px 16px rgba(125, 216, 255, 0.25);
}
.dots{display:flex;gap:8px;align-items:center}
.dot-btn{
  width:10px;height:10px;border-radius:999px;
  border:1px solid rgba(90,74,114,.22);
  background:rgba(90,74,114,.10);
  cursor:pointer;
  transition:transform var(--trans), background var(--trans);
}
.dot-btn.active{background:linear-gradient(135deg,var(--c-blue),var(--c-pink));border-color:rgba(255,158,216,.35);transform:scale(1.15)}

/* 按钮垂直堆叠（右侧栏） */
.button-stack{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.download-tips{
  padding:20px;
  border-radius:var(--radius-lg);
  background:
    linear-gradient(135deg,
      rgba(255, 248, 252, 0.95) 0%,
      rgba(184, 236, 255, 0.25) 100%
    );
  border:2px solid rgba(255, 255, 255, 0.8);
}
.download-tips .tip-item{
  margin:8px 0;
  font-size:14px;
  line-height:1.6;
  color:var(--c-text);
  opacity:0.9;
}
.download-tips .tip-item:first-child{margin-top:0}
.download-tips .tip-item:last-child{margin-bottom:0}

.cta-buttons{margin:14px 0 18px}
.button-container{
  display:flex;gap:14px;align-items:stretch;justify-content:center;
}
.btn-download,.btn-register{
  flex:1;
  min-width:0;
  padding:24px 28px;
  border-radius:var(--radius-xl);
  border:3px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.12),
    0 8px 24px rgba(255, 143, 207, 0.35),
    inset 0 3px 0 rgba(255, 255, 255, 0.7);
  display:flex;flex-direction:column;gap:10px;
  align-items:center;
  position:relative;
  overflow:hidden;
  transition:all var(--trans);
  cursor:pointer;
}
.btn-download::before,
.btn-register::before{
  /* 顶部高光弧 */
  content:"";
  position:absolute;
  top:8px;left:15%;right:15%;
  height:3px;
  background:linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.85),
    transparent
  );
  border-radius:2px;
  pointer-events:none;
}
.btn-download::after,
.btn-register::after{
  /* 闪光扫过效果 */
  content:"";
  position:absolute;
  top:-50%;left:-50%;
  width:50%;height:200%;
  background:linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform:rotate(25deg) translateX(-200%);
  transition:transform 0.6s ease;
  pointer-events:none;
}
.btn-download{
  background:
    linear-gradient(145deg,
      var(--c-pink) 0%,
      var(--c-pink-light) 40%,
      var(--c-yellow) 100%
    );
}
.btn-register{
  background:
    linear-gradient(145deg,
      var(--c-blue) 0%,
      var(--c-blue-light) 40%,
      var(--c-purple) 100%
    );
}
.btn-download:hover,
.btn-register:hover{
  transform:translateY(-3px);
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.1),
    0 12px 28px rgba(255, 143, 207, 0.35),
    0 20px 44px rgba(125, 216, 255, 0.25);
  border-color:rgba(255, 255, 255, 1);
}
.btn-download:hover::after,
.btn-register:hover::after{
  transform:rotate(25deg) translateX(400%);
}
.btn-download:active,
.btn-register:active{
  transform:translateY(-1px);
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.12),
    0 6px 16px rgba(255, 143, 207, 0.3);
}
.btn-download:hover::after,
.btn-register:hover::after{
  transform:translate(-50%, -50%) scale(1);
}
.btn-download:active,
.btn-register:active{
  transform:translateY(-2px) scale(0.98);
}
.btn-icon{
  font-size:28px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.1));
}
.btn-label{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
}
/* 下载按钮：左侧图标 + 右侧文案（更像“按钮图标”） */
.btn-download{
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  text-align:left;
}
.btn-download .btn-label{
  align-items:flex-start;
}
.btn-download .btn-icon{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.18) 45%,
      rgba(255, 255, 255, 0.10) 100%
    );
  box-shadow:
    0 6px 16px rgba(255, 143, 207, 0.25),
    0 10px 24px rgba(125, 216, 255, 0.18),
    inset 0 2px 0 rgba(255,255,255,.55);
}
.btn-register{
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  text-align:left;
}
.btn-register .btn-label{
  align-items:flex-start;
}
.btn-register .btn-icon{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.18) 45%,
      rgba(255, 255, 255, 0.10) 100%
    );
  box-shadow:
    0 6px 16px rgba(125, 216, 255, 0.22),
    0 10px 24px rgba(186, 140, 255, 0.18),
    inset 0 2px 0 rgba(255,255,255,.55);
}
.btn-icon-img{
  width:60px;
  height:60px;
  object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.16));
  border-radius: 12px;
}
.btn-text{
  font-weight:900;
  font-size:20px;
  letter-spacing:.5px;
}
.btn-subtext{
  font-size:14px;
  opacity:.92;
  font-weight:600;
}

.cta-note{
  margin-top:12px;
  padding:14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.cta-note__left h3{margin:0 0 6px;font-size:18px}
.cta-note__left p{margin:0;line-height:1.6}

.main-layout{
  display:grid;
  grid-template-columns: 7fr 3fr;
  gap:14px;
  align-items:start;
  margin-bottom:26px;
}

.ranking-section{padding:14px}
.section-header{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  margin-bottom:16px;
}
.section-header h2{
  margin:0;
  font-size:26px;
  font-weight:900;
  letter-spacing:.5px;
  background:linear-gradient(135deg,
    var(--c-text) 0%,
    rgba(90,74,114,.85) 100%
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 2px 4px rgba(255,158,216,.12));
}
.section-header--compact h2{font-size:22px}
.update-time{
  font-size:13px;
  opacity:.80;
  font-weight:600;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(90,74,114,.08);
}

.ranking-table-container{margin-top:14px}
.table-scroll{
  overflow:auto;
  border-radius:var(--radius-md);
  border:2px solid rgba(255,255,255,.65);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,249,253,.88) 100%
    );
  box-shadow:
    0 2px 8px rgba(140,226,255,.08),
    inset 0 1px 0 rgba(255,255,255,.5);
}
.ranking-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:560px;
}
.ranking-table th,.ranking-table td{
  padding:14px 16px;
  border-bottom:1px solid rgba(90,74,114,.06);
  text-align:left;
  transition:background var(--trans-fast);
}
.ranking-table th{
  background:
    linear-gradient(180deg,
      rgba(140,226,255,.32) 0%,
      rgba(140,226,255,.25) 100%
    );
  font-size:14px;
  font-weight:800;
  letter-spacing:.3px;
  color:rgba(90,74,114,.95);
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.ranking-table th:first-child{
  border-top-left-radius:14px;
}
.ranking-table th:last-child{
  border-top-right-radius:14px;
}
.ranking-table tbody tr{
  transition:all var(--trans-fast);
}
.ranking-table tbody tr:hover{
  background:
    linear-gradient(90deg,
      rgba(255,158,216,.15) 0%,
      rgba(255,224,102,.12) 100%
    );
  transform:scale(1.005);
}
.ranking-actions{
  display:flex;align-items:center;justify-content:right;gap:10px;
  margin-top:10px;
}
.view-all-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.75);
  border:var(--border);
  transition:transform var(--trans), box-shadow var(--trans);
}
.view-all-link:hover{transform:translateY(-1px);box-shadow:var(--shadow-btn)}

.class-mage,.class-warrior,.class-ranger{
  display:inline-block;
  padding:6px 10px;border-radius:999px;
  font-size:14px;font-weight:800;
  border:1px solid rgba(90,74,114,.10);
}
.class-mage{background:rgba(140,226,255,.28)}
.class-warrior{background:rgba(255,179,102,.28)}
.class-ranger{background:rgba(163,228,201,.35)}

.sidebar{display:flex;flex-direction:column;gap:14px}
.widget{padding:14px}
/* 标题与"查看全部"按钮横向布局 */
.widget-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.widget h3{
  margin:0 0 10px;
  font-size:18px;
}
.widget-header h3{
  margin-bottom:0;
}
.widget-icon{margin-right:6px}
.news-list,.events-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.news-list a,.events-list a{
  display:grid;grid-template-columns: 1fr auto auto;
  align-items:center;gap:10px;
  padding:10px 12px;border-radius:16px;
  background:rgba(255,255,255,.70);
  border:var(--border);
  transition:transform var(--trans), box-shadow var(--trans);
}
.news-list a:hover,.events-list a:hover{transform:translateY(-1px);box-shadow:var(--shadow-btn)}
.news-title,.event-title{font-weight:800}
.news-date,.event-date{font-size:14px;opacity:.85}
.new-badge,.hot-badge{
  font-size:11px;
  font-weight:900;
  letter-spacing:.5px;
  padding:6px 10px;
  border-radius:999px;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.75);
  box-shadow:
    0 2px 6px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow:0 1px 2px rgba(0,0,0,.15);
  transition:all var(--trans-fast);
}
.new-badge{
  background:linear-gradient(135deg,
    rgba(255,158,216,.98) 0%,
    rgba(255,224,102,.95) 100%
  );
}
.hot-badge{
  background:linear-gradient(135deg,
    rgba(255,179,102,.98) 0%,
    rgba(255,158,216,.95) 100%
  );
}
.new-badge:hover,.hot-badge:hover{
  transform:scale(1.08);
  box-shadow:
    0 3px 10px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.45);
}
.widget-more{
  display:inline-flex;
  align-items:center;
  opacity:.85;
  font-size:14px;
  color:var(--c-text);
  border-bottom:1px dashed rgba(90,74,114,.35);
  white-space:nowrap;
  transition:all var(--trans);
}
.widget-more:hover{
  opacity:1;
  color:var(--c-pink);
  border-bottom-color:var(--c-pink);
  transform:translateX(3px);
}

.group-info{
  background:rgba(255,255,255,.70);
  border:var(--border);
  border-radius:16px;
  padding:12px;
}
.group-number{margin-bottom:10px}
.group-status{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.status-badge{
  padding:6px 10px;border-radius:999px;font-weight:900;
  background:rgba(163,228,201,.40);
  border:1px solid rgba(163,228,201,.55);
}
.join-group-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;
  padding:12px 12px;border-radius:16px;
  background:linear-gradient(135deg, rgba(140,226,255,.85), rgba(255,158,216,.60));
  border:1px solid rgba(255,255,255,.55);
  box-shadow:var(--shadow-btn);
  font-weight:900;
  transition:transform var(--trans), box-shadow var(--trans);
}
.join-group-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-float)}

.main-footer{
  margin-top:40px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.85) 0%,
      rgba(255,249,253,.90) 100%
    );
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:2px solid rgba(255,255,255,.55);
  box-shadow:
    0 -2px 12px rgba(255,158,216,.06),
    0 -8px 24px rgba(140,226,255,.04);
}
.footer-content{
  display:grid;
  grid-template-columns: 1fr 2fr auto;
  gap:14px;
  padding:18px 16px;
  align-items:start;
}
.footer-logo p{margin:10px 0 0;opacity:.9}
.footer-links{display:grid;grid-template-columns: repeat(3, minmax(120px, 1fr));gap:14px}
.link-group h4{margin:0 0 10px;font-size:16px}
.link-group a{
  display:block;
  padding:6px 0;
  opacity:.88;

}
.link-group a:hover{opacity:1;border-bottom-color:rgba(90,74,114,.35)}
.social-links{display:flex;flex-direction:column;gap:10px}
.social-icon{
  border:var(--border);
  background:rgba(255,255,255,.75);
  padding:10px 12px;border-radius:16px;
  cursor:pointer;
  transition:transform var(--trans), box-shadow var(--trans);
}
.social-icon:hover{transform:translateY(-1px);box-shadow:var(--shadow-btn)}
.footer-bottom{
  padding:10px 16px 18px;
  text-align:center;
  font-size:14px;
  opacity:.9;
}
.footer-bottom p{margin:6px 0}

/* 列表页工具栏 */
.toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:12px;
}
.search input{
  width:min(360px, 70vw);
  padding:10px 12px;
  border-radius:16px;
  border:var(--border);
  background:rgba(255,255,255,.75);
  outline:none;
}
.search input:focus{box-shadow:var(--shadow-btn);border-color:rgba(255,158,216,.35)}
.select{
  padding:10px 12px;border-radius:16px;border:var(--border);
  background:rgba(255,255,255,.75);
}

.page-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.list-item{
  padding:12px 12px;
  border-radius:var(--radius-lg);
  border:var(--border);
  background:rgba(255,255,255,.70);
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
.list-item__title{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.list-item__main p{margin:0;line-height:1.6}
.list-item__meta{white-space:nowrap;opacity:.9;font-size:14px}
.pill{
  font-size:12px;font-weight:900;
  padding:6px 8px;border-radius:999px;
  color:#fff;
}
.pill--new{background:linear-gradient(135deg,var(--c-pink),var(--c-yellow))}
.pill--hot{background:linear-gradient(135deg,var(--c-orange),var(--c-pink))}

/* 分段按钮 */
.segmented{
  display:inline-flex;
  padding:6px;
  border-radius:18px;
  border:var(--border);
  background:rgba(255,255,255,.70);
  gap:6px;
}
.seg{
  padding:10px 12px;border-radius:14px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  transition:background var(--trans), transform var(--trans), box-shadow var(--trans);
}
.seg:hover{transform:translateY(-1px)}
.seg.active{
  background:linear-gradient(135deg, rgba(140,226,255,.55), rgba(255,158,216,.35));
  border-color:rgba(255,158,216,.25);
  box-shadow:0 10px 18px rgba(255,158,216,.12);
}

/* 画廊 */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.gallery-item{
  position:relative;
  border-radius:var(--radius-lg);
  border:var(--border);
  overflow:hidden;
  background:rgba(255,255,255,.70);
  box-shadow:0 10px 22px rgba(255,158,216,.12);
  transition:transform var(--trans), box-shadow var(--trans);
}
.gallery-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-float)}
.gallery-item img{
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit:cover;
}
.gallery-item__meta{
  position:absolute;left:10px;right:10px;bottom:10px;
  display:flex;gap:8px;align-items:center;
  padding:8px 10px;border-radius:14px;
  background:rgba(255,255,255,.78);
  border:var(--border);
}
.gallery-item__meta .tag{
  font-weight:900;font-size:12px;
  padding:6px 8px;border-radius:999px;
  background:rgba(140,226,255,.25);
  border:1px solid rgba(140,226,255,.35);
}
.gallery-item__meta .title{font-weight:800;font-size:14px}

/* 模态框 */
.modal{
  position:fixed;inset:0;z-index:3000;
  display:grid;place-items:center;
}
.modal__backdrop{
  position:absolute;inset:0;
  background:rgba(90,74,114,.35);
  backdrop-filter: blur(3px);
}
.modal__panel{
  position:relative;
  width:min(580px, calc(100vw - 32px));
  border-radius:var(--radius-lg);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,249,253,.96) 100%
    );
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:2px solid rgba(255,255,255,.75);
  box-shadow:
    0 8px 28px rgba(255,158,216,.20),
    0 16px 48px rgba(140,226,255,.18),
    0 24px 72px rgba(0,0,0,.08);
  overflow:hidden;
}
.modal__header{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 14px;
  background:linear-gradient(135deg, rgba(140,226,255,.30), rgba(255,158,216,.22));
}
.modal__header h3{margin:0;font-size:18px}
.modal__tabs{
  display:flex;gap:8px;
  padding:10px 12px;
  background:rgba(255,249,253,.85);
  border-bottom:1px solid rgba(90,74,114,.08);
}
.tab{
  flex:1;
  border:var(--border);
  background:rgba(255,255,255,.70);
  border-radius:16px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:900;
}
.tab.active{
  background:linear-gradient(135deg, rgba(255,158,216,.45), rgba(255,224,102,.35));
  border-color:rgba(255,158,216,.25);
}
.modal__body{padding:14px}

.form{display:flex;flex-direction:column;gap:10px}
.form-row{display:flex;flex-direction:column;gap:8px}
.form-label{
  font-weight:800;
  font-size:14px;
  letter-spacing:.3px;
  color:rgba(90,74,114,.95);
}
.form-row input{
  padding:14px 16px;
  border-radius:var(--radius-md);
  border:2px solid rgba(255,255,255,.60);
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,249,253,.88) 100%
    );
  outline:none;
  transition:all var(--trans);
  box-shadow:
    0 2px 6px rgba(140,226,255,.06),
    inset 0 1px 2px rgba(90,74,114,.04);
}
.form-row input:hover{
  border-color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.96);
}
.form-row input:focus{
  border-color:rgba(255,158,216,.55);
  background:rgba(255,255,255,.98);
  box-shadow:
    0 2px 8px rgba(255,158,216,.18),
    0 6px 20px rgba(140,226,255,.12),
    inset 0 1px 0 rgba(255,255,255,.8);
  transform:translateY(-1px);
}
.form-row--inline{flex-direction:row;align-items:center}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.btn-primary{
  border:2px solid rgba(255,255,255,.70);
  background:
    linear-gradient(135deg,
      rgba(255,158,216,.98) 0%,
      rgba(255,224,102,.95) 100%
    );
  color:#fff;
  font-weight:900;
  font-size:16px;
  letter-spacing:.5px;
  padding:14px 24px;
  border-radius:var(--radius-md);
  cursor:pointer;
  box-shadow:
    0 2px 8px rgba(255,158,216,.28),
    0 6px 18px rgba(255,224,102,.22),
    inset 0 -2px 0 rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.5);
  transition:all var(--trans);
  position:relative;
  overflow:hidden;
}
.btn-primary::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.35), transparent);
  pointer-events:none;
}
.btn-primary:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:
    0 4px 14px rgba(255,158,216,.35),
    0 10px 28px rgba(255,224,102,.28),
    inset 0 -2px 0 rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.6);
  border-color:rgba(255,255,255,.85);
}
.btn-primary:active{
  transform:translateY(-1px) scale(0.98);
}
.form-hint{margin:6px 0 0}

/* 灯箱 */
.lightbox{
  position:fixed;inset:0;z-index:3500;
  display:grid;place-items:center;
}
.lightbox__backdrop{
  position:absolute;inset:0;
  background:rgba(90,74,114,.45);
  backdrop-filter: blur(4px);
}
.lightbox__panel{
  position:relative;
  width:min(980px, calc(100vw - 26px));
  max-height: min(86vh, 760px);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.92);
  border:var(--border);
  box-shadow:var(--shadow-float);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.lightbox__top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 12px;
  background:linear-gradient(135deg, rgba(140,226,255,.30), rgba(255,158,216,.22));
}
.lightbox__title{font-weight:900}
.lightbox__actions{display:flex;gap:8px}
.lightbox__body{
  padding:12px;
  overflow:auto;
  display:grid;
  place-items:center;
}
.lightbox__body img{max-height:60vh;border-radius:16px;border:var(--border)}
.lightbox__bottom{padding:10px 12px;border-top:1px solid rgba(90,74,114,.08)}

/* Toast */
.toast{
  position:fixed;
  left:50%;bottom:18px;transform:translateX(-50%);
  min-width:min(520px, calc(100vw - 26px));
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.92);
  border:var(--border);
  box-shadow:var(--shadow-float);
  z-index:5000;
}

/* 可访问性 */
:focus-visible{outline:3px solid rgba(140,226,255,.65);outline-offset:2px;border-radius:12px}