/* ==========================================================================
   首页科技蓝视觉皮肤（仅视觉，不改文案 / DOM / JS）
   全部规则作用域在 body[data-page="home"]，不影响其他页面。
   色板取自 Logo：主蓝 #2E6BE6 / 深蓝 #1D4FD7 / 亮蓝 #5EA8F7 / 青 #2FD4C4
   ========================================================================== */

body[data-page="home"] {
  --bg: #F4F8FD;
  --panel: #FFFFFF;
  --panel-soft: #EAF2FC;
  --text: #16233B;
  --muted: #5B6B84;
  --line: #D8E3F2;
  --accent: #2E6BE6;
  --accent-strong: #1D4FD7;
  --shadow: 0 18px 45px rgba(30, 79, 215, 0.12);
  background:
    linear-gradient(135deg, rgba(46, 107, 230, 0.05), transparent 35%),
    linear-gradient(180deg, #FAFCFF 0%, var(--bg) 100%);
}

/* ---------- Hero 区 ---------- */

body[data-page="home"] .hero {
  margin-top: 8px;
  /* 有界卡片：不再撑满整个视口高度 */
  min-height: min(640px, calc(100vh - 140px));
  padding: clamp(40px, 5vw, 64px);
  border-radius: 28px;
  background:
    radial-gradient(900px 420px at 88% -12%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, #2E6BE6 0%, #5EA8F7 100%);
  box-shadow: 0 24px 60px rgba(29, 79, 215, 0.22);
  overflow: hidden;
  /* 滚动封面效果重映射：JS 变量原始范围为 opacity 1→0.35 / scale 1→0.975
     （为原来的透明 Hero 设计），蓝色卡片重映射为 1→0 / 1→0.9；
     淡出在滚动进程约 62% 处完成（阈值 0.6），避免搜索后短页面
     或任何中间滚动位置残留半透明 Hero 残影 */
  opacity: max(0, calc((var(--home-hero-opacity, 1) - 0.6) / 0.4));
  transform: scale(calc(1 - (1 - var(--home-hero-scale, 1)) * 4));
}

/* 等距立方体装饰（内联 SVG，低透明度，不遮挡文字） */
body[data-page="home"] .hero::after {
  inset: 0;
  width: auto;
  height: auto;
  transform: none;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 460'%3E%3Cg transform='translate(170 130) scale(2.3)'%3E%3Cpolygon points='30,0 60,17 30,34 0,17' fill='%23FFFFFF' fill-opacity='0.95'/%3E%3Cpolygon points='0,17 30,34 30,68 0,51' fill='%23CFE4FD' fill-opacity='0.9'/%3E%3Cpolygon points='60,17 30,34 30,68 60,51' fill='%23A8CCF9' fill-opacity='0.85'/%3E%3C/g%3E%3Cg transform='translate(390 36) scale(1.35)' opacity='0.9'%3E%3Cpolygon points='30,0 60,17 30,34 0,17' fill='%23FFFFFF'/%3E%3Cpolygon points='0,17 30,34 30,68 0,51' fill='%23CFE4FD'/%3E%3Cpolygon points='60,17 30,34 30,68 60,51' fill='%23A8CCF9'/%3E%3C/g%3E%3Cg transform='translate(66 44) scale(0.9)' opacity='0.75'%3E%3Cpolygon points='30,0 60,17 30,34 0,17' fill='%23FFFFFF'/%3E%3Cpolygon points='0,17 30,34 30,68 0,51' fill='%23CFE4FD'/%3E%3Cpolygon points='60,17 30,34 30,68 60,51' fill='%23A8CCF9'/%3E%3C/g%3E%3Cg transform='translate(30 300) scale(1.1)' opacity='0.7'%3E%3Cpolygon points='30,0 60,17 30,34 0,17' fill='%23FFFFFF'/%3E%3Cpolygon points='0,17 30,34 30,68 0,51' fill='%23CFE4FD'/%3E%3Cpolygon points='60,17 30,34 30,68 60,51' fill='%23A8CCF9'/%3E%3C/g%3E%3Cg transform='translate(452 316) scale(0.66)' opacity='0.8'%3E%3Cpolygon points='30,0 60,17 30,34 0,17' fill='%23FFFFFF'/%3E%3Cpolygon points='0,17 30,34 30,68 0,51' fill='%23CFE4FD'/%3E%3Cpolygon points='60,17 30,34 30,68 60,51' fill='%23A8CCF9'/%3E%3C/g%3E%3Ccircle cx='496' cy='150' r='7' fill='%232FD4C4'/%3E%3Ccircle cx='472' cy='186' r='5' fill='%23BFE0FF'/%3E%3Ccircle cx='500' cy='222' r='4' fill='%232FD4C4' fill-opacity='0.85'/%3E%3Ccircle cx='60' cy='230' r='4' fill='%23BFE0FF'/%3E%3Ccircle cx='96' cy='258' r='3' fill='%232FD4C4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: min(46%, 520px) auto;
  opacity: 0.62;
  z-index: 0;
}

body[data-page="home"] .hero-copy,
body[data-page="home"] .hero-panel {
  position: relative;
  z-index: 1;
}

body[data-page="home"] .hero-copy h1 {
  color: #FFFFFF;
}

body[data-page="home"] .hero-copy .lead {
  color: rgba(255, 255, 255, 0.88);
}

body[data-page="home"] .format-tags span {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
}

/* Hero 指标卡：半透明白玻璃拟态 */
body[data-page="home"] .hero-panel {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body[data-page="home"] .hero-panel .metric {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body[data-page="home"] .hero-panel .metric strong {
  color: #FFFFFF;
}

body[data-page="home"] .hero-panel .metric span {
  color: rgba(255, 255, 255, 0.85);
}

/* Hero CTA：主按钮白底蓝字，次按钮透明描边 */
body[data-page="home"] .hero-actions .btn.large {
  background: #FFFFFF;
  color: #1D4FD7;
}

body[data-page="home"] .hero-actions .btn.large:hover {
  background: #EAF2FC;
  color: #1D4FD7;
}

body[data-page="home"] .hero-actions .btn.large.secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #FFFFFF;
}

body[data-page="home"] .hero-actions .btn.large.secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.9);
  color: #FFFFFF;
}

/* ---------- 顶栏滚动常驻（默认透明融入页面，滚动时淡入白底） ---------- */

body[data-page="home"] .topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  margin-inline: -16px;
  padding: 10px 16px;
  /* 复用 JS 滚动变量：--home-hero-opacity 从 1（顶部）到 0.35（滚完），映射为 0→1 */
  --topbar-solid: max(0, calc((1 - var(--home-hero-opacity, 1)) / 0.65));
  background: color-mix(in srgb, rgba(255, 255, 255, 0.92) calc(var(--topbar-solid) * 100%), transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--line) calc(var(--topbar-solid) * 100%), transparent);
  backdrop-filter: blur(calc(var(--topbar-solid) * 12px));
  -webkit-backdrop-filter: blur(calc(var(--topbar-solid) * 12px));
}

/* 移动端与减弱动效下 JS 不输出滚动变量：顶栏固定白底 */
@media (max-width: 920px), (prefers-reduced-motion: reduce) {
  body[data-page="home"] .topbar {
    --topbar-solid: 1;
  }
}

/* ---------- 按钮体系（首页作用域） ---------- */

body[data-page="home"] .btn.secondary {
  background: #EAF2FC;
  border: 1px solid #D8E3F2;
  color: #1D4FD7;
}

body[data-page="home"] .btn.secondary:hover {
  background: #DCE9FA;
  border-color: #C3D6F0;
  color: #1D4FD7;
}

body[data-page="home"] .btn.ghost:hover {
  background: #EAF2FC;
  color: var(--text);
}

/* ---------- 表单 / 弹窗组件 ---------- */

body[data-page="home"] input:focus,
body[data-page="home"] select:focus,
body[data-page="home"] textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46, 107, 230, 0.14);
}

body[data-page="home"] input:disabled {
  background: #F4F8FD;
}

body[data-page="home"] .tab {
  background: #EAF2FC;
  color: var(--muted);
}

body[data-page="home"] .tab.is-active {
  background: var(--accent);
  color: #FFFFFF;
}

body[data-page="home"] .icon-btn {
  background: #EAF2FC;
  color: var(--text);
}

body[data-page="home"] .modal-backdrop {
  background: rgba(15, 26, 48, 0.5);
}

body[data-page="home"] .notice {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(22, 35, 59, 0.78);
  color: rgba(240, 246, 255, 0.92);
}

body[data-page="home"] .notice.success {
  border-color: rgba(47, 212, 196, 0.45);
  color: #7DEDE2;
}

body[data-page="home"] .status.success {
  background: #EAF2FC;
}

/* ---------- 滑块验证码 ---------- */

body[data-page="home"] .captcha-scene {
  background: #EAF2FC;
}

body[data-page="home"] .captcha-hole {
  background: rgba(22, 35, 59, 0.22);
  box-shadow: inset 0 0 0 1px rgba(22, 35, 59, 0.12);
}

body[data-page="home"] .captcha-piece {
  box-shadow: 0 10px 22px rgba(29, 79, 215, 0.28);
}

body[data-page="home"] .captcha-slider {
  background: rgba(46, 107, 230, 0.1);
}

body[data-page="home"] .captcha-slider-fill {
  background: rgba(46, 107, 230, 0.28);
}

body[data-page="home"] .captcha-handle {
  box-shadow: 0 8px 20px rgba(29, 79, 215, 0.3);
}

/* ---------- 会员充值 / 购买弹窗 ---------- */

body[data-page="home"] .membership-summary span {
  background: #F4F8FD;
}

body[data-page="home"] .membership-plan.is-current {
  border-color: var(--accent);
  background: #EAF2FC;
}

body[data-page="home"] .membership-pay-panel {
  border-color: rgba(46, 107, 230, 0.16);
}

body[data-page="home"] .membership-pay-head {
  background: linear-gradient(135deg, rgba(46, 107, 230, 0.14), rgba(184, 121, 20, 0.1));
  border-bottom-color: rgba(46, 107, 230, 0.14);
}

body[data-page="home"] .membership-pay-summary {
  background: #F4F8FD;
}

body[data-page="home"] .membership-pay-qr {
  border-color: rgba(46, 107, 230, 0.18);
  box-shadow: 0 10px 26px rgba(30, 79, 215, 0.1);
}

body[data-page="home"] .membership-pay-status {
  border-color: rgba(46, 107, 230, 0.16);
  background: #EAF2FC;
}

body[data-page="home"] .membership-pay-status[data-state="loading"] {
  background: #F4F8FD;
}

body[data-page="home"] .membership-pay-status[data-state="success"] {
  border-color: rgba(46, 107, 230, 0.24);
  background: #DCEBFD;
}

body[data-page="home"] .purchase-basic strong {
  color: #16233B;
}

/* ---------- 公开案例区 ---------- */

body[data-page="home"] .showcase-panel {
  box-shadow: 0 -18px 46px rgba(30, 79, 215, 0.1), var(--shadow);
}

body[data-page="home"] .case-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

body[data-page="home"] .case-card:hover {
  transform: translateY(-4px);
  border-color: #C3D6F0;
  box-shadow: 0 18px 45px rgba(30, 79, 215, 0.12);
}

body[data-page="home"] .case-card:focus-visible {
  outline-color: rgba(46, 107, 230, 0.28);
}

body[data-page="home"] .sale-badge {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(47, 212, 196, 0.94);
  color: #FFFFFF;
}

body[data-page="home"] .sale-badge:hover {
  background: #2FD4C4;
}

body[data-page="home"] .case-thumb-description {
  background: linear-gradient(180deg, rgba(10, 23, 48, 0.18), rgba(10, 23, 48, 0.86));
}

/* ---------- 顶栏导航：去按钮化 + 尺寸统一 ---------- */

/* 统一基线：所有导航项同高 36px、同字号、同字重 */
body[data-page="home"] .topbar .nav-actions {
  gap: 6px;
}

body[data-page="home"] .topbar .nav-actions .btn,
body[data-page="home"] .topbar .nav-actions .tag {
  min-height: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

/* 用户名标签：纯静态文本，不再是胶囊 */
body[data-page="home"] .topbar .nav-actions .tag {
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 0 8px;
}

/* 次动作（充值 / 注册 / 我的模型）：文字链接，悬停才出现浅蓝底 */
body[data-page="home"] .topbar .nav-actions .btn.secondary {
  background: transparent;
  border: 0;
  color: var(--text);
}

body[data-page="home"] .topbar .nav-actions .btn.secondary:hover {
  background: #EAF2FC;
  border: 0;
  color: var(--accent-strong);
}

/* 退出：弱化为灰色文字，悬停提示危险色 */
body[data-page="home"] .topbar .nav-actions .btn.ghost {
  background: transparent;
  border: 0;
  color: var(--muted);
}

body[data-page="home"] .topbar .nav-actions .btn.ghost:hover {
  background: rgba(204, 51, 68, 0.08);
  color: #CC3344;
}

/* 主 CTA（登录 / 上传模型）：整行唯一的实心按钮，蓝色渐变 */
body[data-page="home"] .topbar .nav-actions .btn:not(.secondary):not(.ghost) {
  padding: 0 18px;
  background: linear-gradient(135deg, #2E6BE6, #1D4FD7);
  box-shadow: 0 6px 16px rgba(30, 79, 215, 0.25);
}

body[data-page="home"] .topbar .nav-actions .btn:not(.secondary):not(.ghost):hover {
  background: #1D4FD7;
}

/* ---------- 移动端适配 ---------- */

@media (max-width: 920px) {
  body[data-page="home"] .hero {
    padding: 40px 24px 32px;
    border-radius: 22px;
  }

  body[data-page="home"] .hero::after {
    display: none;
  }
}