:root,
html.dark {
  color-scheme: dark;
  --ui-bg: #10100f;
  --ui-bg-deep: #080908;
  --ui-panel: #1a1b19;
  --ui-panel-soft: #20211e;
  --ui-panel-raised: #292a26;
  --ui-text: #f4e7d3;
  --ui-text-muted: #a9aaa4;
  --ui-text-soft: #cbc4b8;
  --ui-primary: #dd7950;
  --ui-primary-hover: #f09568;
  --ui-primary-active: #a64b30;
  --ui-accent: #6f9f8b;
  --ui-success: #72b894;
  --ui-warning: #d6a44f;
  --ui-error: #df7259;
  --ui-info: #8fa7c4;
  --ui-line: rgba(255, 238, 216, 0.1);
  --ui-line-strong: rgba(221, 121, 80, 0.3);
  --color-bg: var(--ui-bg);
  --color-bg-card: var(--ui-panel);
  --color-bg-elev: var(--ui-panel-soft);
  --color-text: var(--ui-text);
  --color-text-muted: var(--ui-text-muted);
  --color-text-soft: var(--ui-text-soft);
  --color-border: var(--ui-line);
  --color-border-strong: var(--ui-line-strong);
  --color-accent: var(--ui-primary);
  --color-accent-hover: var(--ui-primary-hover);
  --color-accent-soft: rgba(221, 121, 80, 0.14);
  --color-success: var(--ui-success);
  --o-black: var(--ui-bg-deep);
  --o-white: var(--ui-text);
  --o-cream: var(--ui-panel-soft);
  --o-text: var(--ui-text);
  --o-text-soft: var(--ui-text-soft);
  --o-muted: var(--ui-text-muted);
  --o-border: var(--ui-line);
  --o-border-soft: var(--ui-line);
  --o-green: var(--ui-primary);
  --o-green-deep: var(--ui-primary-active);
  --font-display: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-body: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

* { -webkit-tap-highlight-color: transparent; }
html { background: var(--ui-bg-deep); }
body {
  background:
    radial-gradient(circle at 76% 8%, rgba(111, 159, 139, 0.08), transparent 27rem),
    radial-gradient(circle at 38% 0%, rgba(221, 121, 80, 0.12), transparent 32rem),
    var(--ui-bg) !important;
  color: var(--ui-text) !important;
  font-family: var(--font-body) !important;
}
h1, h2, h3, h4, p, li, span, label, summary, figcaption { color: inherit; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(221, 121, 80, 0.36);
  outline-offset: 3px;
}

.nav-main, .nav {
  background: rgba(16, 16, 15, 0.84) !important;
  border-bottom: 1px solid var(--ui-line) !important;
  box-shadow: 0 1px 0 rgba(255, 238, 216, 0.02);
}
.nav-inner, .nav-in { max-width: 1200px; }
.nav-logo, .brand, .nav-links a, .nav-link-extra { color: var(--ui-text) !important; }
.nav-logo svg, .brand-mark, .mark { color: var(--ui-primary) !important; }
.nav-links, .links { color: var(--ui-text-muted) !important; }
.nav-links a:hover, .nav-links a.active, .links a:hover { color: var(--ui-text) !important; }
.nav-icon-btn, .icon-btn, .icon {
  color: var(--ui-text-soft) !important;
  background: rgba(255, 238, 216, 0.03) !important;
  border-color: var(--ui-line) !important;
}
.nav-icon-btn:hover, .icon-btn:hover, .icon:hover { background: rgba(255, 238, 216, 0.06) !important; }

.btn-primary, .btn-primary-new, .button, .btn:not(.btn-secondary):not(.btn-secondary-new):not(.ghost) {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-active)) !important;
  color: #fff4e7 !important;
  border-color: transparent !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 20px rgba(166, 75, 48, 0.18) !important;
}
.btn-primary:hover, .btn-primary-new:hover, .button:hover, .btn:not(.btn-secondary):not(.btn-secondary-new):not(.ghost):hover {
  background: var(--ui-primary-hover) !important;
  transform: translateY(-1px);
}
.btn-secondary, .btn-secondary-new, .button.secondary, .btn.ghost {
  background: var(--ui-panel-soft) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-line) !important;
}
.btn-secondary:hover, .btn-secondary-new:hover, .button.secondary:hover, .btn.ghost:hover {
  background: rgba(221, 121, 80, 0.1) !important;
  border-color: var(--ui-line-strong) !important;
}

.hero, .simple-hero, .hero-small, .section, .section-alt, .section-alt, .pricing-section, .features-section, .reviews-section, .trust-section, .faq-section {
  background-color: transparent !important;
  border-color: var(--ui-line) !important;
}
.hero::before, .hero::after, .hero-small::before { opacity: 0.35 !important; }
.hero-title, .hero h1, .hero-small h1, .section-title, .section-heading h2, .page-title, .hero-title-accent { color: var(--ui-text) !important; }
.hero-title-accent, .page-eyebrow, .section-eyebrow, .hero-eyebrow, .eyebrow, .category-eyebrow, .feature-icon, .plan-link, .category-link { color: var(--ui-primary) !important; }
.hero-sub, .hero-copy, .section-desc, .section-heading p, .page-lede, .page-meta, .hero-meta, .slogan, .category-variants, .category-from { color: var(--ui-text-muted) !important; }
.hero-eyebrow, .hero-meta, .eyebrow { border-color: var(--ui-line) !important; }

.card, .feature-cell, .feature-card, .review-card, .category-card, .price-card, .article, .tool, .capability, .info, .review, .promise-box, .faq-item, .faq details, .notice, .nav-tool-panel, .variant-card, .g-variant-card, .claude-variant, .cross-card {
  background: rgba(26, 27, 25, 0.92) !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
}
.card:hover, .feature-cell:hover, .feature-card:hover, .review-card:hover, .category-card:hover, .article:hover, .tool:hover, .variant-card:hover, .g-variant-card:hover, .claude-variant:hover, .cross-card:hover {
  background: var(--ui-panel-soft) !important;
  border-color: var(--ui-line-strong) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24) !important;
}
.category-logo, .feature-icon-wrap, .feature-icon, .logo-box, .avatar { background: rgba(111, 159, 139, 0.12) !important; color: var(--ui-accent) !important; }
.category-card::before { background: var(--ui-primary) !important; }
.category-card--gemini::before { background: var(--ui-accent) !important; }
.category-card--claude::before { background: var(--ui-primary) !important; }
.category-card--chatgpt .category-link, .category-card--grok .category-link { color: var(--ui-primary) !important; }
.category-card--gemini .category-link { color: var(--ui-accent) !important; }
.category-card--claude .category-link { color: var(--ui-primary-hover) !important; }
.g-variant-card--feat { border-color: var(--ui-primary) !important; box-shadow: 0 14px 32px rgba(221, 121, 80, 0.12) !important; }
.g-variant-card .g-price, .g-variant-card .g-price-main { color: var(--ui-primary) !important; }
.variant-card--feat { border-color: var(--ui-primary) !important; box-shadow: 0 14px 32px rgba(221, 121, 80, 0.12) !important; }
.variant-card .variant-badge { background: var(--ui-primary) !important; color: var(--ui-text) !important; }
.variant-card .variant-tag, .variant-card .variant-amt { color: var(--ui-primary) !important; }
.variant-card .variant-price { border-color: var(--ui-line) !important; }
.variant-card .variant-name { color: var(--ui-text) !important; }
.variant-card .variant-desc { color: var(--ui-text-muted) !important; }
.variant-card .variant-cta,
.g-variant-card .g-variant-cta {
  background: #fafafa !important;
  color: var(--ui-bg-deep) !important;
}
.variant-card .variant-cta:hover,
.g-variant-card .g-variant-cta:hover {
  background: var(--ui-primary-hover) !important;
  color: var(--ui-text) !important;
}
.variant-card--feat .variant-cta {
  background: var(--ui-primary) !important;
  color: var(--ui-text) !important;
}
.g-variant-card--feat .g-variant-cta {
  background: var(--gemini-gradient) !important;
  color: #fff !important;
}
.claude-variant {
  background: rgba(26, 27, 25, 0.92) !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-text) !important;
}
.claude-variant:hover { background: var(--ui-panel-soft) !important; border-color: var(--ui-line-strong) !important; }
.claude-variant--feat { background: var(--ui-bg-deep) !important; border-color: var(--ui-primary) !important; }
.claude-variant .claude-name,
.claude-variant .claude-price .amt { color: var(--ui-text) !important; }
.claude-variant .claude-tag,
.claude-variant .claude-name em,
.claude-variant .claude-feats li::before { color: var(--ui-primary) !important; }
.claude-variant .claude-tagline,
.claude-variant .claude-feats,
.claude-variant .claude-price .cur,
.claude-variant .claude-price .per { color: var(--ui-text-muted) !important; }
.claude-variant .claude-price { border-color: var(--ui-line) !important; }
.claude-variant .claude-cta { background: var(--ui-primary) !important; color: var(--ui-text) !important; }
.claude-variant .claude-cta:hover { background: var(--ui-primary-hover) !important; color: var(--ui-text) !important; }
.hero-eyebrow { background: rgba(26, 27, 25, 0.88) !important; }
.price-card.featured { border-color: var(--ui-primary) !important; box-shadow: 0 14px 32px rgba(221, 121, 80, 0.12) !important; }
.price-card .amount, .price-card strong { color: var(--ui-primary) !important; }
.features li::before, .category-feats li::before { border-color: var(--ui-accent) !important; }
.promises span::before, .trust-promise, .hero-trust-item { color: var(--ui-success) !important; }

.explainer, .trust-main, .promise-box { background: var(--ui-bg-deep) !important; }
.info, .contact-card, .hero-contact { border-color: var(--ui-line) !important; }
.info b, .step-num { color: var(--ui-primary) !important; }
.step-num { background: rgba(221, 121, 80, 0.14) !important; }
.promise-box { border: 1px solid var(--ui-line); }
.promise-box h3, .explainer h2 { color: var(--ui-text) !important; }
.promise-box p, .explainer p, .step-desc, .feature-desc, .quote, .review-content { color: var(--ui-text-muted) !important; }
.faq-q, .faq summary, .faq-item summary, .feature-title, .category-name, .article h2, .tool h2, .price-card h3 { color: var(--ui-text) !important; }
.faq-a, .faq p, .article p, .tool p, .feature-desc, .category-feats, .prose p, .prose li { color: var(--ui-text-muted) !important; }
.faq-item, .faq-item:first-child, .faq details { border-color: var(--ui-line) !important; }

.prose { color: var(--ui-text) !important; }
.prose strong, .prose h2, .prose h3, .prose h4, .prose blockquote { color: var(--ui-text) !important; }
.prose a { color: var(--ui-primary-hover) !important; }
.prose code { background: var(--ui-panel-soft) !important; color: var(--ui-text-soft) !important; }
.prose th { background: var(--ui-panel-soft) !important; }
.prose th, .prose td, .prose hr { border-color: var(--ui-line) !important; }

.footer, .footer-main { background: linear-gradient(180deg, var(--ui-panel), var(--ui-bg-deep)) !important; color: var(--ui-text-muted) !important; border-color: var(--ui-line) !important; }
.footer-logo, .footer-brand .footer-logo, .footer-col h4, .footer-bottom, .footer-bottom-inner { color: var(--ui-text) !important; }
.footer-col a, .footer-tagline, .footer-contact-static, .footer-bottom p { color: var(--ui-text-muted) !important; }
.footer-col a:hover { color: var(--ui-primary-hover) !important; }
.footer-wechat { background: var(--ui-panel-soft) !important; color: var(--ui-text) !important; }

.nav-main { height: 72px !important; min-height: 72px !important; padding: 0 !important; line-height: 1 !important; }
.nav-main .nav-inner { max-width: 1200px; height: 72px !important; margin: 0 auto; padding: 0 1.5rem !important; display: flex; align-items: center; gap: 1.5rem; line-height: 1 !important; }
.nav-main .nav-logo { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; color: var(--ui-text) !important; text-decoration: none; font-family: var(--font-body) !important; font-size: 1.05rem !important; font-weight: 700 !important; line-height: 1 !important; }
.nav-main .nav-logo svg { width: 22px; height: 22px; color: var(--ui-primary); }
.site-logo-image { display: block; width: 28px; height: 28px; flex-shrink: 0; object-fit: contain; }
.nav-main .nav-links { flex: 1; display: flex; align-items: center; gap: 1.5rem; margin-left: 1rem; overflow-x: auto; scrollbar-width: none; font-family: var(--font-body) !important; font-size: 0.9rem !important; line-height: 1.2 !important; }
.nav-main .nav-links::-webkit-scrollbar { display: none; }
.nav-main .nav-links a { white-space: nowrap; color: var(--ui-text-muted) !important; text-decoration: none; text-transform: none !important; letter-spacing: normal !important; }
.nav-main .nav-links a:hover, .nav-main .nav-links a.active { color: var(--ui-text) !important; }
.nav-main .nav-links a::before, .nav-main .nav-links a::after { content: none !important; display: none !important; }
.nav-main .nav-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; line-height: 1 !important; }
.footer-main { padding: 4rem 1.5rem 0; margin-top: 4rem; line-height: 1.6 !important; font-family: var(--font-body) !important; }
.footer-main .footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 3rem; padding-bottom: 3rem; }
.footer-main .footer-brand .footer-logo { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem !important; color: var(--ui-text) !important; text-decoration: none; font-family: var(--font-body) !important; font-size: 20px !important; font-style: normal !important; font-weight: 700 !important; line-height: 32px !important; }
.footer-main .footer-logo svg { width: 22px; height: 22px; color: var(--ui-primary); }
.footer-main .site-logo-image { width: 28px; height: 28px; }
.footer-main .footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.footer-main .footer-col { display: flex; flex-direction: column; gap: 0.75rem; line-height: 1.6 !important; }
.footer-main .footer-col h4 { margin: 0 0 0.25rem !important; color: var(--ui-text) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 19.2px !important; letter-spacing: 0.02em !important; }
.footer-main .footer-col a { color: var(--ui-text-muted) !important; font-size: 14px !important; line-height: 22.4px !important; }
.footer-main .footer-contact-static { font-size: 13px !important; line-height: 20.8px !important; }
.footer-main .footer-wechat { font-size: 13px !important; line-height: 20.8px !important; }
.footer-main .footer-tagline { margin: 0 !important; font-size: 14.4px !important; line-height: 23.04px !important; }
.footer-main .footer-bottom p { margin: 0 !important; font-size: 12.8px !important; line-height: 20.48px !important; }
.footer-main .footer-col a { text-decoration: none; }
.footer-main .footer-bottom { border-top: 1px solid var(--ui-line); padding: 1.5rem 0; }
.footer-main .footer-bottom-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.chatgpt-faq .faq-list { display: grid; gap: 0.85rem; max-width: 900px; }
.chatgpt-faq .faq-item,
.chatgpt-faq .faq-item:first-child { padding: 1.4rem 1.5rem; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-panel); }
.chatgpt-faq .faq-item:hover { border-color: var(--ui-line-strong); background: var(--ui-panel-soft); }
.chatgpt-faq .faq-item .faq-q { margin-bottom: 0.55rem; }
@media (min-width: 768px) {
  .footer-main .footer-inner { grid-template-columns: 1.4fr 2.6fr; gap: 4rem; }
}
@media (max-width: 720px) {
  .nav-main { height: 64px !important; min-height: 64px !important; }
  .nav-main .nav-inner { height: 64px !important; gap: 0.75rem; padding: 0 1rem !important; }
  .nav-main .nav-links { gap: 1rem; margin-left: 0; font-size: 0.85rem; }
  .nav-main .nav-actions .btn { padding: 0.5rem 0.7rem; font-size: 0.78rem; }
}

.nav-tool-panel { background: var(--ui-panel-raised) !important; border-color: var(--ui-line) !important; color: var(--ui-text) !important; border-radius: 16px !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4) !important; }
.nav-tool-panel::before { background: var(--ui-panel-raised) !important; border-color: var(--ui-line) !important; }
.nav-tool-item, .nav-tool-item-name { color: var(--ui-text) !important; }
.nav-tool-item-desc, .nav-tool-foot, .nav-tool-item.is-placeholder .nav-tool-item-name { color: var(--ui-text-muted) !important; }
.nav-tool-item-icon { background: var(--ui-panel-soft) !important; border-color: var(--ui-line) !important; color: var(--ui-accent) !important; }
.nav-tool-item:hover { background: rgba(221, 121, 80, 0.08) !important; }
.nav-tool-foot { border-color: var(--ui-line) !important; }

.toast { background: var(--ui-panel-raised) !important; border: 1px solid var(--ui-line-strong) !important; color: var(--ui-text) !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }