/*
 * 控件层：naive-UI 风格（与控制台 dash 的 n-config-provider 保持一致）
 *
 * 为什么要单独一层：
 * 1. 之前按钮 / 顶栏等控件是"液态玻璃"自绘实现——依赖 backdrop-filter: url(#liquid_glass_filter)
 *    与 6 层 DOM 叠加，Firefox / Safari 支持度差，且主按钮的背景色其实来自玻璃着色层，
 *    一旦浏览器不支持就直接变成透明按钮（可用性问题）。
 * 2. 液态玻璃只保留在"内容卡片"上（视觉主体，用户喜欢），控件全部换成扁平、可靠、
 *    状态清晰的 naive-UI 交互语言：hover / active / focus / 选中态都有明确表现。
 * 3. 控件样式集中在本文件，改一处即可全站同步，避免散落在 10 个 CSS 文件里互相覆盖。
 *
 * 加载顺序：本文件必须在 layout.css 之后（靠后加载以覆盖旧规则）。
 */

:root {
  /* —— 与控制台一致的 naive-UI 主题（primaryColor #2489fd） —— */
  --n-primary: #2489fd;
  --n-primary-hover: #4aa2fe;
  --n-primary-pressed: #1d74d8;
  --n-primary-soft: rgba(36, 137, 253, 0.12);
  --n-primary-soft-hover: rgba(36, 137, 253, 0.2);
  --n-success: #18a058;

  --n-text-1: rgba(0, 0, 0, 0.88);
  --n-text-2: rgba(0, 0, 0, 0.65);
  --n-text-3: rgba(0, 0, 0, 0.45);

  --n-border: rgba(0, 0, 0, 0.1);
  --n-border-hover: rgba(0, 0, 0, 0.16);
  --n-divider: rgba(0, 0, 0, 0.06);
  --n-hover: rgba(0, 0, 0, 0.04);
  --n-active: rgba(0, 0, 0, 0.08);

  --n-radius: 3px;
  --n-radius-lg: 6px;
  --n-control-height: 32px;
  --n-control-height-lg: 40px;

  /* naive-UI 统一动效：0.2s + cubic-bezier(0.4, 0, 0.2, 1) */
  --n-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --n-dur: 0.2s;
}

:root[data-theme='dark'] {
  --n-text-1: rgba(255, 255, 255, 0.82);
  --n-text-2: rgba(255, 255, 255, 0.52);
  --n-text-3: rgba(255, 255, 255, 0.38);

  --n-border: rgba(255, 255, 255, 0.12);
  --n-border-hover: rgba(255, 255, 255, 0.2);
  --n-divider: rgba(255, 255, 255, 0.09);
  --n-hover: rgba(255, 255, 255, 0.06);
  --n-active: rgba(255, 255, 255, 0.1);

  --n-primary-soft: rgba(36, 137, 253, 0.22);
  --n-primary-soft-hover: rgba(36, 137, 253, 0.3);
}

/* 统一焦点环：键盘可达性，naive-UI 同样提供 focus ring */
.island a:focus-visible,
.island button:focus-visible,
.btn:focus-visible,
.demo__tabs button:focus-visible,
.demo__run:focus-visible,
.plan-card__btn:focus-visible,
.faq__item summary:focus-visible,
.security__dot:focus-visible,
.code-window__copy:focus-visible,
.promo-pop button:focus-visible,
.promo-pop a:focus-visible {
  outline: 2px solid var(--n-primary);
  outline-offset: 2px;
  border-radius: var(--n-radius);
}

/* ============================ 顶栏 ============================ */

.island {
  top: 12px;
  padding: 8px 12px;
  border-radius: var(--n-radius-lg);
  /* 初始状态：实心，保证任何浏览器下都有稳定可读的顶栏 */
  background: var(--surface-solid);
  border: 1px solid var(--n-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition:
    top var(--n-dur) var(--n-ease),
    background-color var(--n-dur) var(--n-ease),
    border-color var(--n-dur) var(--n-ease),
    box-shadow var(--n-dur) var(--n-ease),
    border-radius var(--n-dur) var(--n-ease);
}

/* 滚动后：半透明 + 模糊，保留沉浸感 */
.island.is-scrolled {
  top: 8px;
  background: color-mix(in srgb, var(--surface-solid) 72%, transparent);
  border-color: var(--n-divider);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
}

/* 不支持 backdrop-filter 的浏览器：退回实心，不做半透明 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .island.is-scrolled {
    background: var(--surface-solid);
  }
}

.island.is-open {
  border-radius: var(--n-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.island__inner {
  gap: 16px;
}

/* 导航项：naive-UI 菜单项语言（hover 底色 + 选中态） */
.island__link {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--n-radius);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--n-text-2);
  transition:
    color var(--n-dur) var(--n-ease),
    background-color var(--n-dur) var(--n-ease);
}

/* 去掉旧的自绘下划线（玻璃风格残留） */
.island__link::after {
  display: none;
}

.island__link:hover {
  color: var(--n-text-1);
  background: var(--n-hover);
}

.island__link:active {
  background: var(--n-active);
}

/* 当前区块（滚动定位） */
.island__link[aria-current='true'] {
  color: var(--n-primary);
  background: var(--n-primary-soft);
}

.island__actions {
  gap: 8px;
}

/* 图标按钮：naive-UI 文字/图标按钮（无边框，hover 出底色） */
.theme-toggle,
.island__lang,
.island__burger {
  width: 32px;
  height: 32px;
  /* 汉堡三杠：旧样式 padding 11px 在 32px 高度里会把内容盒压到 10px，三条杠被挤没了 */
  padding: 7px;
  /* 汉堡三杠：旧样式 padding 11px 在 32px 高度里会把内容盒压到 10px，三条杠被挤没了 */
  padding: 7px;
  border-radius: var(--n-radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--n-text-2);
  transform: none;
  box-shadow: none;
  transition:
    color var(--n-dur) var(--n-ease),
    background-color var(--n-dur) var(--n-ease),
    border-color var(--n-dur) var(--n-ease);
}

.theme-toggle:hover,
.island__lang:hover,
.island__burger:hover {
  color: var(--n-text-1);
  background: var(--n-hover);
  border-color: transparent;
  transform: none;
  box-shadow: none;
}

.theme-toggle:active,
.island__lang:active,
.island__burger:active {
  background: var(--n-active);
}

.island__lang {
  width: auto;
  padding: 0 8px;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.island__burger span {
  display: block;
  width: 100%;
  height: 2px;
  flex-shrink: 0;
  transition: transform var(--n-dur) var(--n-ease), opacity var(--n-dur) var(--n-ease);
}

/* 移动端菜单：naive-UI 下拉（快速淡入，不再逐条延迟） */
.island__menu {
  transition: grid-template-rows var(--n-dur) var(--n-ease), opacity var(--n-dur) var(--n-ease);
}

.island__menu-inner {
  gap: 0;
  padding: 4px 0 0;
}

.island__menu .island__link,
.island__menu .island__menu-cta {
  opacity: 1;
  transform: none;
  transition:
    color var(--n-dur) var(--n-ease),
    background-color var(--n-dur) var(--n-ease);
}

.island.is-open .island__menu .island__link,
.island.is-open .island__menu .island__menu-cta {
  opacity: 1;
  transform: none;
}

.island__menu .island__link {
  height: 34px;
  padding: 0 10px;
  border-radius: var(--n-radius);
  font-size: 0.875rem;
}

.island__menu .island__link:hover {
  color: var(--n-text-1);
  background: var(--n-hover);
}

/* ============================ 按钮 ============================ */

/* 主行动按钮（顶栏 CTA / 移动端菜单 CTA / 弹窗 CTA 共用） */
.island__cta,
.island__menu-cta,
.promo-pop__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--n-control-height);
  padding: 0 14px;
  border-radius: var(--n-radius);
  border: 1px solid var(--n-primary);
  background: var(--n-primary);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  filter: none;
  transform: none;
  box-shadow: none;
  transition:
    background-color var(--n-dur) var(--n-ease),
    border-color var(--n-dur) var(--n-ease),
    color var(--n-dur) var(--n-ease);
}

.island__cta:hover,
.island__menu-cta:hover,
.promo-pop__cta:hover {
  background: var(--n-primary-hover);
  border-color: var(--n-primary-hover);
  color: #fff;
  filter: none;
  transform: none;
  box-shadow: none;
}

.island__cta:active,
.island__menu-cta:active,
.promo-pop__cta:active {
  background: var(--n-primary-pressed);
  border-color: var(--n-primary-pressed);
}

.island__menu-cta {
  width: 100%;
  margin-top: 6px;
  height: 34px;
  text-align: center;
}

/* 主/次按钮 */
.btn {
  height: var(--n-control-height-lg);
  padding: 0 20px;
  border-radius: var(--n-radius);
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 500;
  transform: none;
  transition:
    background-color var(--n-dur) var(--n-ease),
    border-color var(--n-dur) var(--n-ease),
    color var(--n-dur) var(--n-ease);
}

.btn--primary {
  color: #fff;
  background: var(--n-primary);
  border-color: var(--n-primary);
  box-shadow: none;
}

.btn--primary:hover {
  color: #fff;
  background: var(--n-primary-hover);
  border-color: var(--n-primary-hover);
  transform: none;
  box-shadow: none;
}

.btn--primary:active {
  background: var(--n-primary-pressed);
  border-color: var(--n-primary-pressed);
}

.btn--ghost {
  color: var(--n-text-1);
  background: transparent;
  border-color: var(--n-border);
}

.btn--ghost:hover {
  color: var(--n-primary);
  background: var(--n-primary-soft);
  border-color: var(--n-primary);
  transform: none;
}

.btn--ghost:active {
  background: var(--n-primary-soft-hover);
}

.btn--lg {
  height: 44px;
  padding: 0 26px;
  font-size: 1rem;
}

/* ============================ 演示台控件 ============================ */

/* 挑战类型切换：naive-UI 可选中标签 */
.demo__tabs {
  gap: 6px;
}

.demo__tabs button {
  height: 28px;
  padding: 0 12px;
  border-radius: var(--n-radius);
  border: 1px solid var(--n-border);
  background: var(--surface-solid);
  color: var(--n-text-2);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 400;
  transform: none;
  transition:
    color var(--n-dur) var(--n-ease),
    background-color var(--n-dur) var(--n-ease),
    border-color var(--n-dur) var(--n-ease);
}

.demo__tabs button:hover {
  color: var(--n-primary);
  border-color: var(--n-primary);
  background: var(--n-hover);
  transform: none;
}

.demo__tabs button:active {
  background: var(--n-active);
}

.demo__tabs button[aria-selected='true'] {
  color: var(--n-primary);
  background: var(--n-primary-soft);
  border-color: var(--n-primary);
  font-weight: 500;
  transform: none;
}

/* 重置按钮：naive-UI 默认按钮 */
.demo__run {
  height: var(--n-control-height);
  padding: 0 14px;
  border-radius: var(--n-radius);
  border: 1px solid var(--n-border);
  background: var(--surface-solid);
  color: var(--n-text-1);
  font-family: var(--font-display);
  font-size: 0.85rem;
  transform: none;
  transition:
    color var(--n-dur) var(--n-ease),
    background-color var(--n-dur) var(--n-ease),
    border-color var(--n-dur) var(--n-ease);
}

.demo__run:hover {
  color: var(--n-primary);
  border-color: var(--n-primary);
  background: var(--n-primary-soft);
  transform: none;
}

.demo__run:active {
  background: var(--n-primary-soft-hover);
}

/* ============================ 安全机制步骤点 ============================ */

.security__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--n-primary-soft);
  background: transparent;
  cursor: pointer;
  transform: none;
  box-shadow: none;
  transition:
    background-color var(--n-dur) var(--n-ease),
    border-color var(--n-dur) var(--n-ease),
    transform var(--n-dur) var(--n-ease);
}

.security__dot:hover {
  border-color: var(--n-primary);
  background: var(--n-primary-soft);
}

.security__dot.is-active {
  background: var(--n-primary);
  border-color: var(--n-primary);
  transform: none;
  box-shadow: none;
}

/* ============================ 套餐卡片按钮 ============================ */

.plan-card__btn {
  height: 34px;
  padding: 0 16px;
  border-radius: var(--n-radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--plan-color);
  background: color-mix(in srgb, var(--plan-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--plan-color) 32%, transparent);
  transform: none;
  box-shadow: none;
  transition:
    background-color var(--n-dur) var(--n-ease),
    border-color var(--n-dur) var(--n-ease),
    color var(--n-dur) var(--n-ease);
}

.plan-card__btn:hover {
  background: var(--plan-color);
  border-color: var(--plan-color);
  color: #fff;
  transform: none;
  box-shadow: none;
}

.plan-card__btn:active {
  background: color-mix(in srgb, var(--plan-color) 82%, #000);
  border-color: color-mix(in srgb, var(--plan-color) 82%, #000);
}

/* ============================ FAQ 折叠项 ============================ */

.faq__item {
  border-radius: var(--n-radius-lg);
  border: 1px solid var(--n-border);
  background: var(--surface-solid);
  transform: none;
  transition:
    border-color var(--n-dur) var(--n-ease),
    background-color var(--n-dur) var(--n-ease);
}

.faq__item:hover {
  border-color: var(--n-border-hover);
  background: var(--n-hover);
  transform: none;
}

.faq__item summary {
  padding: 14px 18px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color var(--n-dur) var(--n-ease);
}

.faq__item summary::after {
  font-size: 1.1rem;
  color: var(--n-text-3);
  transition: transform var(--n-dur) var(--n-ease), color var(--n-dur) var(--n-ease);
}

.faq__item[open] summary::after {
  color: var(--n-primary);
}

.faq__item p {
  padding: 0 18px 16px;
}

/* ============================ 代码窗口复制按钮 ============================ */

.code-window__copy {
  height: 26px;
  padding: 0 10px;
  border-radius: var(--n-radius);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: #b9c4d9;
  font-size: 0.75rem;
  transform: none;
  transition:
    background-color var(--n-dur) var(--n-ease),
    border-color var(--n-dur) var(--n-ease),
    color var(--n-dur) var(--n-ease);
}

.code-window__copy:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
  transform: none;
}

.code-window__copy:active {
  background: rgba(255, 255, 255, 0.16);
}

.code-window__copy.is-copied {
  background: rgba(24, 160, 88, 0.18);
  border-color: rgba(24, 160, 88, 0.4);
  color: #6fdb9d;
}

/* ============================ 免费升级弹窗（naive-UI 模态框） ============================ */

.promo-pop {
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: opacity var(--n-dur) var(--n-ease), visibility var(--n-dur) var(--n-ease);
}

.promo-pop__card {
  max-width: 420px;
  padding: 28px 28px 22px;
  border-radius: var(--n-radius-lg);
  border: 1px solid var(--n-border);
  background: var(--surface-solid);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  transform: none;
  transition: none;
}

.promo-pop.is-open .promo-pop__card {
  transform: none;
}

.promo-pop__title {
  margin-top: 10px;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: normal;
}

.promo-pop__text {
  margin-top: 10px;
  font-size: 0.875rem;
  line-height: 1.7;
}

.promo-pop__cta {
  width: 100%;
  height: var(--n-control-height-lg);
  margin-top: 20px;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--n-radius);
}

.promo-pop__close {
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: var(--n-radius);
  color: var(--n-text-3);
  transform: none;
  transition:
    color var(--n-dur) var(--n-ease),
    background-color var(--n-dur) var(--n-ease);
}

.promo-pop__close:hover {
  background: var(--n-hover);
  color: var(--n-text-1);
  transform: none;
}

.promo-pop__dismiss {
  margin-top: 14px;
  font-size: 0.8rem;
}

.promo-pop__dismiss:hover {
  color: var(--n-text-2);
}

/* ============================ 加载动画跳过按钮 ============================ */

.loader__skip {
  padding: 0 12px;
  height: 30px;
  border-radius: var(--n-radius);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0;
  transition:
    background-color var(--n-dur) var(--n-ease),
    border-color var(--n-dur) var(--n-ease);
}

.loader__skip:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.36);
}

/* ============================ 内容卡片的交互收敛 ============================ */
/* 卡片保留液态玻璃视觉，但动效与状态向 naive-UI 收敛（无位移式悬浮） */

.ch-item,
.step,
.plan-card {
  transition:
    border-color var(--n-dur) var(--n-ease),
    background-color var(--n-dur) var(--n-ease),
    box-shadow var(--n-dur) var(--n-ease);
}

.ch-item:hover,
.step:hover {
  transform: none;
  box-shadow: 0 8px 20px -12px rgba(10, 20, 30, 0.3);
}

.plan-card:hover {
  transform: none;
  box-shadow: 0 8px 20px -12px rgba(10, 20, 30, 0.3);
}

.ch-item::before {
  transition: transform var(--n-dur) var(--n-ease);
}

/* 文字链接：naive-UI 链接色随 hover 变浅 */
.integration__desc a,
.cta-link {
  color: var(--n-primary);
  transition: color var(--n-dur) var(--n-ease);
}

.integration__desc a:hover,
.cta-link:hover {
  color: var(--n-primary-hover);
  text-decoration: none;
}

.footer__group a {
  transition: color var(--n-dur) var(--n-ease);
}

.footer__group a:hover {
  color: var(--n-primary);
}

/* 滚动渐显：收敛为 naive-UI 风格的短距离淡入 */
.reveal,
.reveal-left,
.reveal-right {
  transform: translateY(10px);
  transition:
    opacity var(--n-dur) var(--n-ease),
    transform var(--n-dur) var(--n-ease);
}

.reveal-left {
  transform: translateX(-10px);
}

.reveal-right {
  transform: translateX(10px);
}

/* ============================ 图标（Lucide 官方图标集） ============================ */
/* 统一走 Lucide：24×24 视框、2px 描边、currentColor 着色，随文字色变化 */

.icon {
  /* base.css 里有全局 svg { display: block }，图标必须显式改回行内，否则会独占一行 */
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.15em;
  stroke-width: 2;
}

/* 控件里的图标尺寸显式固定（本文件最后加载，优先级最高） */
.theme-toggle__icon {
  width: 18px;
  height: 18px;
}

.island__lang .icon {
  width: 14px;
  height: 14px;
}

.loader__skip .icon {
  width: 14px;
  height: 14px;
}

.promo-pop__close .icon {
  width: 15px;
  height: 15px;
}

.code-window__copy .icon {
  width: 14px;
  height: 14px;
  vertical-align: -0.2em;
}

/* 按钮内的箭头 */
.btn .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--n-dur) var(--n-ease);
}

.btn:hover .icon {
  transform: translateX(2px);
}

/* FAQ 折叠指示（替代原先 CSS 生成的 "+"） */
.faq__icon {
  width: 18px;
  height: 18px;
  color: var(--n-text-3);
  transition: transform var(--n-dur) var(--n-ease), color var(--n-dur) var(--n-ease);
}

.faq__item[open] .faq__icon {
  transform: rotate(45deg);
  color: var(--n-primary);
}

/* 四层防御要点（替代原先字符 ▸） */
.feat__icon {
  width: 15px;
  height: 15px;
  margin-right: 8px;
  color: var(--n-primary);
  vertical-align: -0.15em;
}

/* 套餐权益勾选（替代原先 CSS 画的边框对勾） */
.perk__icon {
  width: 15px;
  height: 15px;
  margin-right: 8px;
  color: var(--plan-color);
  vertical-align: -0.15em;
}

/* ============================ 三端自适应 ============================ */
/* 顶栏：平板以下收成图标 + 汉堡菜单，避免横向溢出 */

@media (max-width: 860px) {
  .island__nav {
    display: none;
  }

  .island__burger {
    display: flex;
  }

  .island__inner {
    gap: 10px;
  }
}

@media (max-width: 600px) {
  .island {
    padding: 6px 8px;
    top: 8px;
  }

  .island__logo-img {
    display: none;
  }

  .island__logo-icon {
    display: block;
  }

  .island__lang {
    padding: 0 6px;
  }
}

/* 小屏：标题、数据行与演示控件收敛，保证不溢出、不截断 */
@media (max-width: 480px) {
  :root {
    --fs-hero: clamp(1.9rem, 1.15rem + 4.6vw, 2.6rem);
  }

  .hero__stats {
    gap: 14px;
    margin-top: 44px;
  }

  .hero__stat + .hero__stat::before {
    display: none;
  }

  .hero__stat dt {
    font-size: 1.6rem;
  }

  .demo__tabs {
    gap: 4px;
  }

  .demo__tabs button {
    height: 26px;
    padding: 0 9px;
    font-size: 0.78rem;
  }

  .btn {
    height: 38px;
    padding: 0 16px;
  }
}