/* ==========================================================================
   product.v1.css — 公开页浅色产品主题（2026-10-27 官网修订）
   - 作用域：仅 <body class="product-page"> 的四张公开页加载本文件；
     stats / inbox / dicts-admin 三张后台页不引用，保持原深色外观。
   - 策略：不改 style.v1x / feedback.v3 / dicts.v1 基础文件，在此按
     令牌 + 组件两层覆盖。渐变令牌改为单一品牌蓝，让既有的
     logo / 按钮 / 步骤圆点等渐变使用点自动变纯色。
   - 设计令牌见 docs/superpowers/specs/2026-10-27-website-content-refresh-design.md §6
   ========================================================================== */

/* ---------- 0. 令牌（浅色） ---------- */
body.product-page {
  --bg-0: #f6f7f9;
  --bg-1: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --border-soft: #e2e8f0;
  --border-strong: #cbd5e1;
  --text-primary: #182230;
  --text-secondary: #566273;
  --text-muted: #8a94a6;
  --accent-1: #2563eb; /* 品牌蓝（hover 见 --accent-hover） */
  --accent-2: #2563eb;
  --gradient-accent: linear-gradient(135deg, #2563eb 0%, #2563eb 100%);
  --gradient-accent-hover: linear-gradient(135deg, #1d4ed8 0%, #1d4ed8 100%);
  --shadow-soft: 0 12px 30px rgba(16, 24, 40, 0.06);
  --shadow-glow: 0 12px 30px rgba(16, 24, 40, 0.06);
  background: var(--bg-0);
  color: var(--text-primary);
}
body.product-page ::selection { background: #bfdbfe; }

/* 隐藏状态保护：成功卡 / 表单切换依赖 hidden 属性 */
.product-page [hidden] { display: none !important; }

/* 背景装饰（网格 + 光晕）整体退场 */
.product-page .bg-decoration { display: none; }

/* ---------- 1. 导航 ---------- */
.product-page .nav.scrolled {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: var(--border-soft);
}
.product-page .nav-logo {
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
}
.product-page .brand-mark {
  background: none;
  -webkit-text-fill-color: var(--accent-1);
  color: var(--accent-1);
}
.product-page .nav-links a:hover { color: var(--accent-1); }
/* 移动端展开菜单：浅色面板（body 上挂 nav-menu-open） */
.product-page.nav-menu-open .nav-links {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--border-soft);
}

/* ---------- 2. 按钮 ---------- */
.product-page .btn-primary {
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.22);
}
.product-page .btn-primary:hover {
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
}
.product-page .btn-secondary {
  background: #ffffff;
  color: var(--text-primary);
}
.product-page .btn-secondary:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

/* ---------- 3. Hero（颜色层；布局见 home.v1.css） ---------- */
.product-page .hero h1 {
  filter: none; /* 去掉旧标题外发光 */
}
.product-page .hero h1 .gradient-text,
.product-page .home-accent {
  background: none;
  -webkit-text-fill-color: var(--accent-1);
  color: var(--accent-1);
}
.product-page .version-badge {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #475569;
}
.product-page .version-badge strong { color: #1d4ed8; }

/* ---------- 4. 卡片家族（功能 / 配置 / 下载 / 词库 / 表单） ---------- */
.product-page .feature-card,
.product-page .detail-card,
.product-page .config-card,
.product-page .download-card,
.product-page .fb-card,
.product-page .dt-card,
.product-page .step-card {
  background: #ffffff;
  border-color: var(--border-soft);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-soft);
}
.product-page .feature-card:hover,
.product-page .detail-card:hover {
  border-color: var(--border-strong);
  background: #ffffff;
}
.product-page .feature-icon {
  background: #eff6ff;
  box-shadow: none;
}
.product-page .feature-icon svg { color: var(--accent-1); }
.product-page .detail-card h4 .num { color: var(--accent-1); }
.product-page .detail-card code,
.product-page .platform-step code {
  background: #eff6ff;
  color: #1d4ed8;
}
.product-page .download-platform { background: #f8fafc; }
.product-page .platform-version { color: #1d4ed8; }

/* ---------- 5. 轮播 ---------- */
.product-page .carousel-track {
  background: #f1f5f9;
  border-color: var(--border-soft);
}
.product-page .carousel-arrow {
  background: #ffffff;
  color: var(--text-secondary);
}
.product-page .carousel-arrow:hover { color: var(--accent-1); }
.product-page .carousel-dots button { background: var(--border-strong); }
.product-page .carousel-dots button.active { background: var(--accent-1); }

/* ---------- 6. 配置卡 ---------- */
.product-page .config-item .label .icon { color: var(--accent-1); }
.product-page .config-item .value { color: var(--text-secondary); }

/* ---------- 7. FAQ / 页脚 ---------- */
.product-page .faq-answer-inner code {
  background: #f1f5f9;
  border: 1px solid var(--border-soft);
  color: #1e293b;
}
.product-page .footer-feedback a {
  color: var(--accent-1);
  border-bottom-color: rgba(37, 99, 235, 0.35);
}
.product-page .footer-feedback a:hover { color: #1d4ed8; }
.product-page .footer-feedback strong { color: #1d4ed8; }

/* ---------- 8. 下载确认弹窗（遮罩保持深色，卡片转浅） ---------- */
.product-page .modal-card {
  background: #ffffff;
  color: var(--text-primary);
}
.product-page .modal-info { background: #f8fafc; }
.product-page .modal-info-row span { color: #64748b; }

/* ---------- 9. 表单（feedback / dicts-upload 共用 fb-* 骨架） ---------- */
.product-page .fb-head p,
.product-page .dt-head p { color: var(--text-secondary); }
.product-page .fb-label em { color: #dc2626; }
.product-page .fb-input {
  background: #ffffff;
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.product-page .fb-input::placeholder { color: #94a3b8; }
.product-page .fb-input:focus {
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
/* 分段选择：常规段（使用平台）整条浅灰底；chip 换行段（问题大类）必须透明容器，
   否则灰色圆角大底板 + overflow:visible 会形成「chip 溢出底板」的观感 */
.product-page .fb-seg:not(.fb-seg-wrap) { background: #f1f5f9; }
.product-page .fb-seg-wrap { background: transparent; }
.product-page .fb-seg-btn { background: transparent; }
.product-page .fb-seg-wrap .fb-seg-btn { background: #ffffff; }
/* 选中态：与上面的 wrap 白底同优先级并列，且必须排在其后——
   否则等优先级下白底规则覆盖选中蓝底，只剩白字（白字白底看不见） */
.product-page .fb-seg-btn.active,
.product-page .fb-seg-wrap .fb-seg-btn.active {
  background: var(--accent-1);
  color: #ffffff;
}
.product-page .fb-drop {
  background: #ffffff;
  border-color: var(--border-strong);
  color: #64748b;
}
.product-page .fb-drop:hover,
.product-page .fb-drop:focus-visible,
.product-page .fb-drop-over {
  border-color: var(--accent-1);
  color: #334155;
  background: #eff6ff;
}
.product-page .fb-thumb { background: #f1f5f9; }
/* 删除按钮浮在图片上：保持深色小圆钮，键盘聚焦时也要可见 */
.product-page .fb-thumb-del:focus-visible { opacity: 1; }
.product-page .fb-log-pill,
.product-page .dt-file-pill {
  background: #ffffff;
  color: var(--text-secondary);
}
.product-page .fb-log-pill button,
.product-page .dt-file-pill button {
  background: #f1f5f9;
  color: #475569;
}
.product-page .fb-progress-error { color: #b42318; }
.product-page .fb-done-icon {
  color: #15803d;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

/* ---------- 10. 词库页专属 ---------- */
.product-page .dt-badge-zip {
  color: #92400e;
  border-color: rgba(217, 119, 6, 0.35);
  background: #fffbeb;
}
.product-page .dt-badge-tsv {
  color: #166534;
  border-color: rgba(22, 163, 74, 0.35);
  background: #f0fdf4;
}
.product-page .dt-card-file code {
  background: #f1f5f9;
  border-color: var(--border-soft);
  color: #334155;
}
.product-page .dt-card-shot { background: #f1f5f9; }
.product-page .dt-empty a { color: var(--accent-1); }
.product-page .dt-notice {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.product-page .dt-notice ul { color: var(--text-secondary); }

/* ---------- 11. 键盘焦点可见性（全站统一描边） ---------- */
.product-page :is(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 2px;
}