/* ============================================================
   雾水 · 水墨最终对齐层 v5（20261013）
   www.huaxu.xin 产品子页 → 主页「雾水·水墨」设计语言
   · 令牌/字体/顶栏/光标/按钮/卡片/弹窗/页脚全量重定
   · 亮色 = 宣纸（#f5f4ef），暗色 = 墨夜（#0e1316）
   · 本层最后加载，负责压过 app.css 与各页内联样式
   挂载：hashguard / prompt / yike / convert / beadweaver
   ============================================================ */

/* ─────────────────────────────────────────
   1. 设计令牌（墨夜默认）
   ───────────────────────────────────────── */
:root {
  /* 新语义名（水墨） */
  --paper: #0e1316;
  --surface: #161e23;
  --ink: #e7ebee;
  --ink-soft: #94a0a8;
  --ink-faint: #6b757d;
  --accent-ink: #6fb8ab;
  --accent-deep: #8fcabf;
  --accent-mist: #5d82ad;
  --accent-soft: rgba(111, 184, 171, 0.16);
  --line: rgba(255, 255, 255, 0.09);
  --serif: "Smiley Sans Oblique", "Noto Serif SC", "Songti SC", serif;
  --sans: "Smiley Sans Oblique", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 34px rgba(0, 0, 0, .35);
  --shadow-hover: 0 6px 16px rgba(0, 0, 0, .45), 0 26px 60px rgba(0, 0, 0, .5);
  --btn-primary-bg: #6fb8ab;
  --btn-primary-fg: #10201d;
  /* 旧名桥接（页面与 app.css 仍在消费） */
  --bg-deep: #0e1316;
  --bg-card: #161e23;
  --bg-card-hover: #1b252b;
  --text-primary: #e7ebee;
  --text-secondary: #94a0a8;
  --text-muted: #6b757d;
  --accent-teal: #6fb8ab;
  --accent-bronze: #6fb8ab;
  --accent-bronze-light: #8fcabf;
  --accent-gold: #5d82ad;
  --border-subtle: rgba(255, 255, 255, 0.09);
  --border-accent: rgba(111, 184, 171, 0.30);
  --nav-border: rgba(255, 255, 255, 0.14);
  --glow-primary: rgba(111, 184, 171, 0.14);
  --glow-secondary: rgba(93, 130, 173, 0.10);
  --bar-from: #6fb8ab;
  --bar-to: #5d82ad;
  --glass-accent: rgba(111, 184, 171, 0.14);
  --glass-blur: 20px;
  --glass-saturate: 1.6;
  --glass-fill: rgba(22, 30, 35, 0.42);
  --glass-fill-strong: rgba(26, 36, 42, 0.55);
  --glass-edge-top: rgba(255, 255, 255, 0.14);
  --glass-edge-bottom: rgba(0, 0, 0, 0.30);
  --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 34%, rgba(255, 255, 255, 0) 55%);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 34px rgba(0, 0, 0, .35);
  --glass-card: rgba(22, 30, 35, 0.55);
  --glass-card-hover: rgba(27, 37, 43, 0.92);
}

/* ─────────────────────────────────────────
   2. 设计令牌（宣纸日间）
   ───────────────────────────────────────── */
body.day-mode {
  --paper: #f5f4ef;
  --surface: #fffffe;
  --ink: #1f242a;
  --ink-soft: #5d6670;
  --ink-faint: #8c949d;
  --accent-ink: #2f7068;
  --accent-deep: #245a53;
  --accent-mist: #6f9bd1;
  --accent-soft: rgba(47, 112, 104, 0.10);
  --line: rgba(20, 28, 30, 0.10);
  --shadow-soft: 0 1px 2px rgba(20, 28, 30, .04), 0 8px 30px rgba(20, 28, 30, .06);
  --shadow-hover: 0 6px 14px rgba(20, 28, 30, .08), 0 22px 50px rgba(20, 28, 30, .12);
  --btn-primary-bg: #2f7068;
  --btn-primary-fg: #ffffff;
  --bg-deep: #f5f4ef;
  --bg-card: #fffffe;
  --bg-card-hover: #ffffff;
  --text-primary: #1f242a;
  --text-secondary: #5d6670;
  --text-muted: #8c949d;
  --accent-teal: #2f7068;
  --accent-bronze: #2f7068;
  --accent-bronze-light: #245a53;
  --accent-gold: #6f9bd1;
  --border-subtle: rgba(20, 28, 30, 0.10);
  --border-accent: rgba(47, 112, 104, 0.28);
  --nav-border: rgba(20, 28, 30, 0.12);
  --glow-primary: rgba(47, 112, 104, 0.10);
  --glow-secondary: rgba(111, 155, 209, 0.08);
  --bar-from: #2f7068;
  --bar-to: #6f9bd1;
  --glass-accent: rgba(47, 112, 104, 0.12);
  --glass-blur: 24px;
  --glass-saturate: 1.9;
  --glass-fill: rgba(255, 255, 255, 0.55);
  --glass-fill-strong: rgba(255, 255, 255, 0.72);
  --glass-edge-top: rgba(255, 255, 255, 0.9);
  --glass-edge-bottom: rgba(47, 112, 104, 0.12);
  --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.14) 34%, rgba(255, 255, 255, 0) 55%);
  --glass-shadow: 0 1px 2px rgba(20, 28, 30, .04), 0 8px 30px rgba(20, 28, 30, .06);
  --glass-card: rgba(255, 255, 255, 0.62);
  --glass-card-hover: rgba(255, 255, 255, 0.92);
}

/* 日间背景重定（宣纸晕染：墨青 × 雾蓝） */
body.day-mode {
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(47, 112, 104, .10), transparent 60%),
    radial-gradient(900px 600px at 8% 108%, rgba(111, 155, 209, .08), transparent 58%),
    #f5f4ef !important;
  background-attachment: fixed;
}
html { background: #0e1316; }
body { background-color: var(--bg-deep); }

/* ─────────────────────────────────────────
   3. 字体与排版（主页刻度）
   ───────────────────────────────────────── */
body {
  font-size: 16px;
  line-height: 1.75;
  font-family: var(--sans);
}
h1, h2, h3, h4 {
  font-family: var(--serif) !important;
  font-weight: 700 !important;
}
.hero-title, .section-title, .formula-title,
.nav-logo-text, .feature-title, .product-name,
.card-head h2, .cl-ver, .yk-title, .panel-title-serif {
  font-family: var(--serif) !important;
}
.hero-title { font-weight: 700 !important; letter-spacing: .02em !important; }
.nav-logo-text { font-size: 21px; letter-spacing: .04em; }
.nav.scrolled .nav-logo-text { font-size: 18px; }
.nav-links a { font-size: 15px; }
.nav.scrolled .nav-links a { font-size: 14px; }
.section-title { font-size: clamp(22px, 3.4vw, 30px); }
.section-link, .more-link { font-size: 14px; }
.feature-title { font-size: 22px; }
.product-name { font-size: 19px; }
.beta-badge { font-size: 12px; padding: 2px 10px; }
.btn { font-size: 15px; }
.footer-brand-text { font-size: 17px; }

/* ─────────────────────────────────────────
   4. 顶栏（对齐主页：滚动毛玻璃 + 下划线导航）
   ───────────────────────────────────────── */
.nav, .appbar {
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none !important;
}
.nav.scrolled, .appbar.scrolled {
  background: color-mix(in srgb, var(--bg-deep) 74%, transparent) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}
/* 取消旧版“收缩胶囊”形变，回到主页整宽顶栏 */
.appbar.scrolled {
  position: sticky; top: 0;
  max-width: none !important; margin: 0 !important;
  padding: 0 24px !important;
  height: 56px !important;
  border-radius: 0 !important;
}
.nav-links a, .appbar .brand { color: var(--text-secondary); }
.nav-links a:hover { color: var(--text-primary); }
.nav-links a::after { background: var(--accent-ink) !important; }
.nav-cta {
  background: var(--accent-soft) !important;
  border: 1px solid var(--border-accent) !important;
  color: var(--accent-ink) !important;
  border-radius: 999px !important;
}
.nav-cta:hover { border-color: var(--accent-ink) !important; }
.beta-badge {
  background: var(--accent-soft) !important;
  border: 1px solid var(--border-accent) !important;
  color: var(--accent-ink) !important;
}
.appbar .brand svg { color: var(--accent-ink) !important; filter: none !important; }
.appbar .brand small { color: var(--text-muted) !important; }
.appbar .stat {
  background: var(--glass-fill) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}
.dropdown-menu {
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-soft) !important;
}
.dropdown-item:hover { background: var(--accent-soft) !important; }

/* 主题/语言按钮：主页圆角方钮 */
.theme-toggle {
  border-radius: 12px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.theme-toggle:hover {
  border-color: var(--accent-ink) !important;
  color: var(--accent-ink) !important;
  transform: none !important;
  box-shadow: none !important;
}
.lang-toggle {
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
}
/* 去掉旧版水滴泡泡装饰 */
.btn::after, .btn::before, .theme-toggle::after, .theme-toggle::before,
.back-home::after, .back-home::before { display: none !important; }
.btn:active, .theme-toggle:active, .back-home:active {
  transform: none !important; border-radius: inherit !important;
}

/* ─────────────────────────────────────────
   5. 自定义光标（与主页完全一致：青圈 + 圆点）
   ───────────────────────────────────────── */
:root { --cursor-size: 28px; --cursor-size-hover: 56px; }
.custom-cursor {
  border: 1.5px solid var(--accent-bronze) !important;
  border-radius: 50%;
  background: transparent !important;
  transition: width .3s cubic-bezier(.25,.46,.45,.94), height .3s cubic-bezier(.25,.46,.45,.94), border-color .3s ease, background-color .3s ease !important;
}
.custom-cursor.hovering {
  border-color: #ecb1ac !important;
  background: rgba(236,177,172,0.10) !important;
}
.custom-cursor-dot {
  width: 4px !important; height: 4px !important;
  background: var(--accent-bronze-light) !important;
}

/* ─────────────────────────────────────────
   6. 英雄区（主页文案层级）
   ───────────────────────────────────────── */
.hero .hero-eyebrow {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: var(--accent-ink) !important;
  -webkit-text-fill-color: var(--accent-ink) !important;
  font-size: 13px !important;
  letter-spacing: .22em !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  margin-bottom: 18px !important;
  text-shadow: none !important;
}
.hero .hero-title {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  background: none !important;
  font-size: clamp(36px, 5.4vw, 64px) !important;
  letter-spacing: .02em !important;
  line-height: 1.22 !important;
  text-shadow: none !important;
}
.hero .hero-title span,
.hero-title .grad-text {
  color: var(--accent-ink) !important;
  -webkit-text-fill-color: var(--accent-ink) !important;
  background: none !important;
}
.hero .hero-sub {
  color: var(--text-secondary) !important;
  -webkit-text-fill-color: var(--text-secondary) !important;
  font-size: clamp(16px, 1.5vw, 19px) !important;
  line-height: 1.85 !important;
  text-shadow: none !important;
}
.grad-text {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.hero-pills .pill {
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: none !important;
}
.hero-pills .pill:hover { transform: translateY(-4px); border-color: var(--border-accent) !important; }
.hero-pills .pill b {
  background: none !important;
  -webkit-text-fill-color: var(--accent-ink) !important;
  color: var(--accent-ink) !important;
  font-family: var(--mono);
}
.hero-pills .pill span { color: var(--text-muted); }
.hero-meta-item { color: var(--text-muted) !important; }
.hero-meta-item svg { stroke: var(--accent-ink) !important; }

/* ─────────────────────────────────────────
   7. 按钮系统（主页圆角 12 + 墨青主色）
   ───────────────────────────────────────── */
.btn {
  border-radius: 12px !important;
  background: var(--glass-fill) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  backdrop-filter: blur(12px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
  box-shadow: none !important;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .25s, color .25s, background .25s !important;
}
.btn:hover {
  background: var(--glass-fill-strong) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent-ink) !important;
  transform: translateY(-2px) !important;
}
.btn.primary, .btn.btn-primary, .hero-cta {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-fg) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-soft) !important;
}
.btn.primary:hover, .btn.btn-primary:hover, .hero-cta:hover {
  filter: brightness(1.05) !important;
  box-shadow: var(--shadow-hover) !important;
  color: var(--btn-primary-fg) !important;
}
.btn.accent { background: var(--accent-mist) !important; color: #fff !important; border-radius: 12px !important; }
.btn.outline {
  background: transparent !important;
  border: 1px solid var(--border-accent) !important;
  color: var(--accent-ink) !important;
}
.btn.outline:hover { background: var(--accent-soft) !important; border-color: var(--accent-ink) !important; }
.btn.icon { background: transparent !important; border: none !important; color: var(--text-secondary) !important; }
.btn.icon:hover { background: var(--accent-soft) !important; color: var(--accent-ink) !important; box-shadow: none !important; }

/* ─────────────────────────────────────────
   8. 卡片系统（全站统一 · 与易课/主页 .card 一致）
   纸面质感 / 18 圆角 / 柔影 / 悬停上浮 + 墨青描边 + 斜向流光
   ───────────────────────────────────────── */
.card, .glass,
.card.glass,
#root .card, #root .glass,
.feature-card, .product-card, .friend-card,
body:not(.day-mode) .card, body:not(.day-mode) .glass,
body.day-mode .card, body.day-mode .glass {
  position: relative;
  overflow: hidden;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--surface) 30%, transparent) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .4s, background .45s !important;
}
body.day-mode .card, body.day-mode .glass,
body.day-mode .feature-card, body.day-mode .product-card, body.day-mode .friend-card {
  background: color-mix(in srgb, var(--surface) 62%, transparent) !important;
}
.card:hover, .glass:hover,
#root .card:hover, #root .glass:hover,
.feature-card:hover, .product-card:hover, .friend-card:hover,
body:not(.day-mode) .card:hover, body:not(.day-mode) .glass:hover,
body.day-mode .card:hover, body.day-mode .glass:hover,
body.day-mode .feature-card:hover, body.day-mode .product-card:hover {
  transform: translateY(-7px) !important;
  border-color: color-mix(in srgb, var(--accent-ink) 38%, var(--border-subtle)) !important;
  box-shadow: var(--shadow-hover) !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
}
/* 卡片悬停流光扫条：按要求移除，保持纸面纯净 */
/* 头部条：统一细分隔线（去掉旧渐变） */
.card-head { background: transparent !important; border-bottom: 1px solid var(--border-subtle) !important; }
.card-head .ico { color: var(--accent-ink) !important; }
.card-head h2 { color: var(--text-primary) !important; font-family: var(--serif) !important; }
/* 取消旧版 3D 倾斜与加重阴影，与易课/主页一致 */
.tilt { transform: none !important; }
.card.raised { box-shadow: var(--shadow-soft) !important; }

/* ─────────────────────────────────────────
   9. 页脚（主页三行式）
   ───────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--border-subtle) !important;
  color: var(--text-faint) !important;
}
.foot b { color: var(--text-secondary) !important; }
.footer-links a, .foot a { color: var(--text-faint) !important; }
.footer-links a:hover, .foot a:hover { color: var(--accent-ink) !important; }

/* ─────────────────────────────────────────
   10. 细节：选择高亮 / 滚动条 / 焦点
   ───────────────────────────────────────── */
::selection { background: var(--accent-soft); color: var(--accent-deep); }
body.day-mode ::selection { background: var(--accent-soft); color: var(--accent-deep); }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-faint) 42%, transparent); }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent-ink) 55%, transparent); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* ─────────────────────────────────────────
   11. 清理：不渲染多余的旧装饰层
   ───────────────────────────────────────── */
.spotlight,
.hero-dot-canvas-wrap { display: none !important; }

/* ─────────────────────────────────────────
   12. 转换器（convert）专属微调
   ───────────────────────────────────────── */
.cv-btn, .cv-btn-mini { border-radius: 12px !important; }
.cv-dz { border-radius: 18px !important; border-color: var(--border-accent) !important; }

/* ─────────────────────────────────────────
   13. hero-meta 基础布局兜底（与主页同款）
   ───────────────────────────────────────── */
.hero-meta {
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 26px 0 30px;
}
.hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--text-muted);
}
.hero-meta-item svg { width: 16px; height: 16px; stroke: var(--accent-ink); fill: none; stroke-width: 1.5; }

/* ─────────────────────────────────────────
   14. 转换器（convert）卡片对齐
   ───────────────────────────────────────── */
.cv-item, .cv-mat-card {
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-soft) !important;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .3s !important;
}
.cv-item:hover, .cv-mat-card:hover {
  transform: translateY(-4px) !important;
  border-color: color-mix(in srgb, var(--accent-ink) 35%, var(--border-subtle)) !important;
  box-shadow: var(--shadow-hover) !important;
}
.cv-item.done { border-color: color-mix(in srgb, var(--accent-ink) 45%, transparent) !important; }
.cv-item.error { border-color: rgba(181, 82, 74, .5) !important; }
.cv-panel {
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-hover) !important;
}
.cv-panel-head { border-bottom: 1px solid var(--border-subtle) !important; }

/* 全站按钮扫光条一并禁用（与主页去高光条保持一致） */
.btn.primary::after, .btn.accent::after, .btn-primary::after, .btn-ghost::after,
#root .btn-primary::after, #root .btn-ghost::after, .hero-cta::after {
  display: none !important;
}

/* ROSE-CURSOR-COVER：鼠标设备上全量隐藏系统指针（触屏保持自动恢复） */
@media (hover: hover) and (pointer: fine) {
  a, button, [data-hover], [role="button"], [onclick], [tabindex], summary, select, option, label, .dropdown-item, .cate-chip, .nav-cta, .nav-pill, .theme-toggle, .lang-toggle, .product-card, .post-item, .friend-card, .feature-card, .chip, .tag, .card, .dropzone, .tbl-wrap, input, textarea, select, label, .cl-head, .cl-toggle {
    cursor: none !important;
  }
}