/* Light-theme compatibility layer for legacy subpage styles */
.page-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.page-hero,
.api-hero,
.tutorial-hero,
.membership-hero,
.page-header {
  margin-top: var(--header-height);
  color: var(--color-text-main) !important;
  background:
    radial-gradient(circle at 18% 25%, rgba(21, 94, 239, .1), transparent 28rem),
    radial-gradient(circle at 82% 10%, rgba(98, 70, 234, .08), transparent 25rem),
    #f7f9fd !important;
  border-bottom: 1px solid var(--color-border);
}

.page-hero::before,
.api-hero::before,
.tutorial-hero::before,
.membership-hero::before,
.page-header::before {
  opacity: .28 !important;
}

.page-hero h1,
.api-hero h1,
.tutorial-hero h1,
.membership-hero h1,
.page-header h1 {
  color: #101828 !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #101828 !important;
  letter-spacing: -.05em;
}

.hero-subtitle,
.page-subtitle,
.pricing-subtitle,
.section-subtitle,
.section-intro {
  color: var(--color-text-muted) !important;
}

.hero-stats,
.tutorial-stats,
.hero-features {
  color: #26364f;
}

.page-hero .stat-item,
.tutorial-stats .stat-item,
.hero-features .feature-badge,
.hero-features .feature-highlight {
  color: #33435c !important;
  background: rgba(255, 255, 255, .82) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-sm);
}

.page-hero .stat-number { color: var(--color-primary) !important; }
.page-hero .stat-label { color: #647189 !important; }
.breadcrumb { color: #7a879a !important; }
.breadcrumb a { color: var(--color-primary) !important; }

/* Grok 4.5 article */
.timeline,
.performance-comparison,
.use-cases {
  background: #eef3f9 !important;
}

.core-features,
.architecture {
  background: #f8fafc !important;
}

.timeline h2,
.core-features h2,
.performance-comparison h2,
.architecture h2,
.use-cases h2 {
  color: #101828 !important;
  letter-spacing: -.04em;
}

.timeline-content,
.feature-card,
.chart-container,
.case-card {
  background: #fff !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.timeline-date {
  color: var(--color-primary) !important;
  background: #fff !important;
  border-color: #b9cbe6 !important;
}

.timeline-container::before { background: var(--gradient-primary) !important; }
.timeline-content h3,
.feature-card h3,
.chart-container h3,
.arch-item h3,
.case-card h3 { color: #16233b !important; }
.timeline-content p,
.feature-card > p,
.arch-item p,
.case-card p { color: #627087 !important; }
.feature-details li { color: #43516a !important; }

.feature-card .feature-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: var(--color-primary);
  background: #edf3ff;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 850;
}

.comparison-charts { grid-template-columns: repeat(3, 1fr) !important; }
.section-note { max-width: 760px; margin: -28px auto 32px; color: #6b778c; text-align: center; font-size: 13px; }
.bar-label,
.bar-value { color: #35435b !important; }
.bar-fill { background: #e6ecf4 !important; }
.bar-fill.grok4::before { background: var(--gradient-primary) !important; }
.arch-item { background: #fff !important; border: 1px solid var(--color-border) !important; box-shadow: var(--shadow-sm); }
.arch-item code { color: #155eef; background: #edf3ff; padding: 2px 5px; border-radius: 5px; }

.official-sources {
  padding: 22px 0;
  background: #fff;
  border-block: 1px solid var(--color-border);
}

.official-sources .container { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.official-sources strong { color: #25334b; font-size: 12px; }
.official-sources a { color: var(--color-primary); font-size: 12px; font-weight: 750; }
.official-sources span { margin-left: auto; color: #7c889b; font-size: 11px; }
.cta-section { color: #fff !important; background: linear-gradient(135deg, #155eef, #6047dd) !important; }
.cta-section h2 { color: #fff !important; }
.cta-section p { color: rgba(255,255,255,.75) !important; }
.cta-section .primary-button { color: #155eef !important; background: #fff !important; }
.cta-section .secondary-button { color: #fff !important; background: transparent !important; border-color: rgba(255,255,255,.4) !important; }

/* API */
.api-overview,
.api-docs,
.sdk-tools { background: #f8fafc !important; }
.quick-start,
.api-pricing { background: #eef3f9 !important; }
.api-overview h2,
.quick-start h2,
.api-docs h2,
.api-pricing h2,
.sdk-tools h2 { color: #101828 !important; }
.overview-card,
.step-content,
.pricing-card,
.tool-card {
  background: #fff !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-sm) !important;
}
.overview-card h3,
.step-content h3,
.pricing-card h3,
.tool-card h3 { color: #17243b !important; }
.overview-card > p,
.overview-card li,
.step-content p,
.pricing-card li,
.tool-card p { color: #647087 !important; }
.overview-card .card-icon,
.sdk-tools .tool-icon { color: #155eef; background: #edf3ff; }
.doc-section h3 {
  color: #101828 !important;
  background: none !important;
  -webkit-text-fill-color: #101828 !important;
}
.doc-section h4 { color: #155eef !important; }
.doc-section > p { color: #647087; }
.endpoint { background: #fff !important; border-color: var(--color-border) !important; }
.endpoint .url { color: #25344d !important; }
.params-table table { background: #fff !important; border-color: var(--color-border) !important; }
.params-table th { color: #155eef !important; background: #f1f5fb !important; }
.params-table td { color: #536078 !important; border-color: #e3e9f1 !important; }
.params-table code { color: #155eef !important; background: #edf3ff !important; }
.pricing-card.featured { background: #fff !important; border: 2px solid #8aaef3 !important; }
.pricing-card .amount { color: #155eef !important; background: none !important; -webkit-text-fill-color: #155eef !important; }
.pricing-card .unit,
.pricing-card .currency { color: #6f7b90 !important; }
.pricing-note { background: #fff8e8 !important; border: 1px solid #f3dfac !important; }
.pricing-note p { color: #8a6416 !important; }
.tool-link { color: #155eef !important; border-color: #cad8ea !important; }
.tool-link:hover { color: #fff !important; background: #155eef !important; }
.code-block,
.code-tabs { background: #101828 !important; border: 1px solid #26344e !important; }
.code-block code,
.code-block pre { color: #dbe6f5 !important; }
.doc-note { margin-top: 12px; color: #6e7a8e; font-size: 12px; }
.tool-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tool-chip-list span { padding: 8px 11px; color: #315071; background: #edf3fb; border: 1px solid #d6e1ee; border-radius: 999px; font-size: 12px; font-weight: 700; }

/* Tutorial */
.tutorial-nav {
  top: var(--header-height) !important;
  background: rgba(255,255,255,.94) !important;
  border-block: 1px solid var(--color-border);
  box-shadow: 0 8px 22px rgba(23,43,77,.04);
}
.nav-tab { color: #526079 !important; background: #f2f5fa !important; border-color: #dde5f0 !important; }
.nav-tab:hover { color: #155eef !important; background: #eaf1ff !important; border-color: #c9d9ef !important; }
.nav-tab.active { color: #fff !important; background: var(--gradient-primary) !important; }
.tutorial-content { background: #f8fafc; }
.content-section h2 { color: #101828 !important; }
.step-card,
.tutorial-content .feature-card,
.best-practices,
.advanced-card,
.tip-category,
.faq-category {
  background: #fff !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-sm) !important;
}
.step-content h3,
.tutorial-content .feature-card h3,
.best-practices h3,
.practice-item h4,
.card-header h3,
.card-content h4,
.faq-category h3,
.faq-question h4 { color: #17243b !important; }
.step-content p,
.step-content li,
.tutorial-content .feature-card p,
.practice-item p,
.card-content p,
.card-content li,
.faq-answer p { color: #607087 !important; }
.tip-box { background: #fff7e7 !important; border-color: #f2dfa8 !important; }
.tip-box p { color: #7a5b18 !important; }
.success-box { background: #eaf8f4 !important; border-color: #bee9de !important; }
.success-box p { color: #176b5d !important; }
.chat-example { background: #eef3f9 !important; border: 1px solid var(--color-border) !important; }
.chat-message.assistant .message-content { color: #34435a !important; background: #fff !important; border: 1px solid #dce4ef; }
.example-list,
.example,
.usage-example,
.scenario-item,
.role-item,
.role-example,
.tip-example,
.faq-item { background: #f6f8fb !important; border-color: #e0e7f0 !important; }
.example-item,
.example-input,
.example-output { color: #5d6b82 !important; }
.card-header { background: #f4f7fb !important; border-bottom-color: #e1e8f1 !important; }
.language-tag { color: #33435b !important; background: #edf2f8 !important; border-color: #d8e2ee !important; }
.example-request { color: #275946 !important; background: #e9f7f2 !important; border-color: #c7eadf !important; }
.faq-answer { background: #fff !important; }
.help-section { background: linear-gradient(135deg, #155eef, #6047dd) !important; border-radius: 24px; }
.help-content h2 { color: #fff !important; }
.help-content p { color: rgba(255,255,255,.78) !important; }
.help-section .primary-button { color: #155eef !important; background: #fff !important; }
.help-section .secondary-button { color: #fff !important; background: transparent !important; border-color: rgba(255,255,255,.45) !important; }

/* Membership */
.membership-plans,
.membership-benefits,
.upgrade-comparison,
.membership-faq { background: #f8fafc !important; }
.membership-benefits,
.membership-faq { background: #eef3f9 !important; }
.section-header h2,
.membership-plans h2,
.membership-benefits h2,
.upgrade-comparison h2,
.membership-faq h2 { color: #101828 !important; }
.section-header p { color: #647087 !important; }
.plan-card,
.benefit-card,
.upgrade-comparison .comparison-table,
.membership-faq .faq-item {
  color: #101828;
  background: #fff !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-sm) !important;
}
.plan-card.popular { border: 2px solid #86aaf2 !important; }
.plan-header { background: #f6f8fb !important; }
.plan-header h3,
.plan-price .amount,
.amount-cny,
.plan-features h4,
.benefit-card h3,
.detail-item { color: #17243b !important; }
.plan-description,
.plan-price .currency,
.plan-price .period,
.plan-features li,
.plan-note,
.benefit-card p { color: #647087 !important; }
.plan-price-cny { background: #edf3ff !important; border: 1px solid #d6e2f5 !important; }
.popular-badge { background: var(--gradient-primary) !important; }
.benefit-icon { color: #155eef; background: #edf3ff !important; }
.benefit-details { background: #f6f8fb; }
.upgrade-comparison .comparison-table th { color: #17243b !important; background: #eef3f9 !important; }
.upgrade-comparison .comparison-table td { color: #5f6d83 !important; border-color: #e1e8f1 !important; }
.upgrade-comparison .comparison-table tr:hover td { background: #f7f9fc !important; }
.membership-faq .faq-question h4 { color: #17243b !important; }
.membership-faq .faq-answer { background: #f6f8fb !important; }
.join-membership { background: linear-gradient(135deg, #edf3ff, #f3efff) !important; }
.join-content h2 { color: #101828 !important; }
.join-content p { color: #647087 !important; }
.plan-context-note { max-width: 900px; margin: 30px auto 0; padding: 20px 22px; color: #54627a; background: #eef3f9; border: 1px solid #dce5f0; border-radius: 16px; }
.plan-context-note strong { color: #1a2942; }
.plan-context-note p { margin-top: 5px; font-size: 13px; }
.membership-plans-current { grid-template-columns: repeat(2, minmax(0, 420px)) !important; justify-content: center; }

/* Recharge */
.pricing-plans,
.price-comparison,
.faq,
.contact-service { background: #f8fafc !important; }
.recharge-process { background: #eef3f9 !important; }
.pricing-plans h2,
.recharge-process h2,
.price-comparison h2,
.faq h2,
.contact-service h2 { color: #101828 !important; }
.plan-card-compact {
  background: #fff !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-md) !important;
}
.plan-title-group h3,
.price-value-large,
.step-content h3 { color: #17243b !important; }
.plan-description p,
.price-period,
.step-content p { color: #647087 !important; }
.plan-badge-small,
.feature-tag { color: #155eef !important; background: #edf3ff !important; border-color: #d4e1f5 !important; }
.price-value-large.highlight { color: #155eef !important; background: none !important; -webkit-text-fill-color: #155eef !important; }
.savings-info { background: #eaf8f4 !important; border-color: #c5eade !important; }
.savings-text { color: #176c5d !important; }
.service-highlights .highlight-item { color: #506078 !important; }
.plan-guarantee .guarantee-item { color: #45536b !important; background: #fff !important; border-color: var(--color-border) !important; }
.process-steps::before { background: #d5dfec !important; }
.step-number { color: #155eef !important; background: #fff !important; border-color: #b9cbe5 !important; }
.price-comparison .comparison-table { background: #fff !important; border: 1px solid var(--color-border) !important; box-shadow: var(--shadow-sm); }
.price-comparison th { color: #17243b !important; background: #eef3f9 !important; }
.price-comparison td { color: #5b6980 !important; border-color: #e1e8f1 !important; }
.price-comparison td.highlight,
.price-comparison th.highlight { color: #155eef !important; background: #edf3ff !important; }
.recharge-faq .faq-list { display: grid; gap: 10px; max-width: 900px; margin: 0 auto; }
.recharge-faq details { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-sm); }
.recharge-faq summary { padding: 18px 48px 18px 20px; color: #1b2941; cursor: pointer; font-weight: 750; list-style: none; }
.recharge-faq summary::-webkit-details-marker { display: none; }
.recharge-faq details p { padding: 0 20px 18px; color: #647087; font-size: 14px; }
.contact-service .contact-content {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 60px;
  max-width: 920px;
  margin: 0 auto;
  padding: 40px !important;
  background: #eef3f9 !important;
  border: 1px solid var(--color-border);
  border-radius: 24px;
}
.qr-copy > p { margin-top: 12px; color: #647087; }
.qr-copy a { color: #155eef; font-weight: 750; }
.service-features { margin-top: 24px; }
.service-features .feature { color: #41516a !important; background: #fff !important; border: 1px solid #dbe4ef; }
.inline-qr-card { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px; background: #fff; border: 1px solid var(--color-border); border-radius: 18px; box-shadow: var(--shadow-sm); }
.inline-qr-card img { width: 240px; aspect-ratio: 1; object-fit: contain; border-radius: 12px; }
.inline-qr-card strong { color: #1b2941; font-size: 14px; }
.inline-qr-card span { color: #778398; font-size: 11px; }

/* Simple content pages */
.simple-hero {
  margin-top: var(--header-height);
  padding: 112px 0 82px;
  background:
    radial-gradient(circle at 16% 20%, rgba(21,94,239,.1), transparent 28rem),
    radial-gradient(circle at 84% 0, rgba(98,70,234,.08), transparent 25rem),
    #f7f9fd;
  border-bottom: 1px solid var(--color-border);
}
.simple-hero.compact-hero { padding-block: 82px 62px; }
.simple-hero h1 { max-width: 800px; color: #101828; font-size: clamp(42px, 6vw, 68px); line-height: 1.05; letter-spacing: -.06em; }
.simple-hero p { max-width: 760px; margin-top: 18px; color: #607087; font-size: 17px; }
.simple-section { padding: 90px 0; }
.tinted-section { background: #eef3f9; border-block: 1px solid var(--color-border); }
.section-intro-simple { max-width: 800px; margin-bottom: 36px; }
.section-intro-simple h2,
.two-column-panel h2,
.qr-contact-panel h2 { color: #101828; font-size: clamp(32px,4vw,46px); line-height: 1.15; letter-spacing: -.05em; }
.section-intro-simple p { margin-top: 13px; color: #647087; }
.info-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.info-grid.four-columns { grid-template-columns: repeat(4,1fr); }
.info-grid article { min-height: 230px; padding: 26px; background: #fff; border: 1px solid var(--color-border); border-radius: 20px; box-shadow: var(--shadow-sm); }
.info-grid article > span,
.sitemap-grid > a > span { color: #9ba8bb; font-size: 11px; font-weight: 850; }
.info-grid h3 { margin-top: 38px; color: #17243b; font-size: 19px; }
.info-grid p { margin-top: 8px; color: #68758b; font-size: 13px; }
.two-column-panel,
.qr-contact-panel { display: grid; grid-template-columns: 1fr 360px; align-items: center; gap: 90px; }
.check-list { margin-top: 24px; }
.check-list li { position: relative; padding: 8px 0 8px 24px; color: #4f5e76; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: #08a88a; font-weight: 900; }
.fact-card { padding: 28px; background: #fff; border: 1px solid var(--color-border); border-radius: 22px; box-shadow: var(--shadow-sm); }
.fact-card span,
.fact-card strong { display: block; }
.fact-card span { color: #7b879a; font-size: 11px; }
.fact-card strong { margin-top: 6px; color: #155eef; font-size: 30px; }
.fact-card p { margin: 12px 0; color: #637087; font-size: 13px; }
.fact-card a { color: #155eef; font-size: 12px; font-weight: 800; }
.qr-contact-panel > div:first-child > p { margin: 14px 0 24px; color: #647087; }
.qr-contact-panel a { color: #155eef; font-weight: 750; }
.sitemap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.sitemap-grid > a { min-height: 210px; padding: 26px; background: #fff; border: 1px solid var(--color-border); border-radius: 20px; box-shadow: var(--shadow-sm); }
.sitemap-grid > a:hover { border-color: #b7c9e2; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.sitemap-grid h2 { margin-top: 34px; color: #17243b; font-size: 20px; }
.sitemap-grid p { margin-top: 7px; color: #67748a; font-size: 13px; }

.error-page { min-height: 100vh; padding: calc(var(--header-height) + 60px) 24px 60px; display: grid; place-items: center; background: radial-gradient(circle at 50% 10%, rgba(21,94,239,.1), transparent 34rem), #f7f9fd; }
.error-panel { max-width: 700px; text-align: center; }
.error-number { display: block; color: #155eef; font-size: clamp(92px,18vw,180px); font-weight: 900; line-height: .9; letter-spacing: -.09em; opacity: .14; }
.error-panel h1 { margin-top: -8px; color: #101828; font-size: clamp(32px,5vw,48px); letter-spacing: -.05em; }
.error-panel > p { margin: 16px auto 0; color: #647087; }
.error-actions { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }
.error-links { display: flex; justify-content: center; gap: 20px; margin-top: 28px; }
.error-links a { color: #5d6b82; font-size: 12px; font-weight: 700; }

@media (max-width: 980px) {
  .comparison-charts { grid-template-columns: 1fr !important; }
  .info-grid.four-columns { grid-template-columns: 1fr 1fr; }
  .sitemap-grid { grid-template-columns: 1fr 1fr; }
  .two-column-panel,
  .qr-contact-panel { grid-template-columns: 1fr 300px; gap: 50px; }
}

@media (max-width: 760px) {
  .official-sources span { width: 100%; margin-left: 0; }
  .membership-plans-current { grid-template-columns: 1fr !important; }
  .contact-service .contact-content { grid-template-columns: 1fr; padding: 28px 20px !important; }
  .inline-qr-card { justify-self: center; }
  .simple-hero { padding: 82px 0 60px; }
  .simple-section { padding: 66px 0; }
  .two-column-panel,
  .qr-contact-panel { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 560px) {
  .info-grid,
  .info-grid.four-columns,
  .sitemap-grid { grid-template-columns: 1fr; }
  .info-grid article,
  .sitemap-grid > a { min-height: 180px; }
  .error-actions { flex-direction: column; }
  .error-links { flex-wrap: wrap; }
}