/* FunnyHub 风格壳层：深底 #101018、荧光绿 #d8ff62、16px 圆角。
   只覆盖配色 token 和页头/页脚/主按钮，不动 styles.css 里的表单与结果结构，
   输入框、结果面板、错误提示的对比度保持原样。加载顺序必须排在 styles.css 之后。 */

:root {
  --fh-bg: #101018;
  --fh-bar: #0b0b10;
  --fh-panel: #171722;
  --fh-lime: #d8ff62;
  --fh-ink: #15151b;
  --fh-text-dim: #b9b9c6;
  --fh-line: rgba(216, 255, 98, 0.16);

  /* 复用工具站原有变量名，避免两套 CSS 混写 */
  --navy-950: var(--fh-bar);
  --navy-900: var(--fh-bg);
  --navy-850: var(--fh-panel);
  --navy-800: #1e1e2a;
  --mint-400: var(--fh-lime);
  --mint-100: #f4ffd9;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 16px;
}

/* ---------- 页头 ---------- */
.site-header {
  background: var(--fh-bar);
  border-bottom: 1px solid var(--fh-line);
}

.header-inner {
  min-height: 64px;
}

.brand-mark {
  border-color: transparent;
  border-radius: 10px;
  background: var(--fh-lime);
  color: var(--fh-ink);
  font-weight: 800;
}

/* 品牌 lockup 拆成两段可点：FunnyHub → 站根，Tools → /tools/ */
.brand-home,
.brand-sub {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.brand-home {
  color: #fff;
}

.brand-accent {
  color: var(--fh-lime);
}

.brand-sep {
  color: #4a4a58;
  font-weight: 400;
}

.brand-sub {
  color: var(--fh-text-dim);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.brand-home:hover,
.brand-sub:hover {
  color: var(--fh-lime);
}

.site-nav {
  gap: 4px;
}

.site-nav a {
  color: var(--fh-text-dim);
  border-radius: 999px;
}

.site-nav a[aria-current="page"] {
  background: var(--fh-lime);
  color: var(--fh-ink);
}

.nav-fh {
  margin-left: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--fh-lime);
  color: var(--fh-ink);
  font-weight: 700;
}

.nav-fh::after {
  content: "\2192";
  margin-left: 6px;
}

/* ---------- 深色区块与主按钮 ---------- */
.hero,
.tool-hero,
.products-hero {
  background: var(--fh-bg);
}

.results-panel {
  border-color: var(--fh-line);
  background: var(--fh-panel);
}

.product-strip-inner {
  background: var(--fh-panel);
}

.eyebrow {
  border-color: var(--fh-line);
  background: rgba(216, 255, 98, 0.08);
  color: var(--fh-lime);
}

.results-kicker {
  color: var(--fh-lime);
}

.button {
  border-radius: 12px;
  background: var(--fh-lime);
  color: var(--fh-ink);
}

.button-secondary {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--border-strong);
}

.button-light {
  background: #fff;
  color: var(--fh-ink);
}

/* 待启用的商品按钮必须保持灰色，不能被上面的 .button 覆盖 */
.button-disabled,
.button[aria-disabled="true"] {
  border-color: var(--border);
  background: #e8edf2;
  color: #5a6b7c;
}

/* ---------- 页脚 ---------- */
.site-footer {
  border-top: 1px solid var(--fh-line);
  background: var(--fh-bar);
  color: var(--fh-text-dim);
}

.footer-brand {
  color: #fff;
}

.footer-brand .brand-accent {
  color: var(--fh-lime);
}

.footer-text,
.footer-meta {
  color: #8f8f9e;
}

.footer-links a {
  color: var(--fh-text-dim);
}

.footer-contact-note {
  color: #6f6f7e;
}

/* 深色区域用荧光绿焦点环；浅色表单区继续沿用原来的琥珀色，保证可见。 */
.site-header :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--fh-lime);
}

@media (hover: hover) {
  .site-nav a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
  }

  .nav-fh:hover {
    background: var(--fh-lime);
    color: var(--fh-ink);
    filter: brightness(0.94);
  }

  .button:not([aria-disabled="true"]):hover {
    background: #c9f04f;
  }

  .button-secondary:not([aria-disabled="true"]):hover {
    background: #eaf0f6;
  }

  .footer-links a:hover {
    color: var(--fh-lime);
  }
}

@media (min-width: 480px) {
  .brand-sub {
    font-size: 0.9rem;
  }
}