/*
  Zhihe Growth public site theme
  Unified visual tone: technical blue + neutral white/gray.
  Loaded after page-level styles so old local colors are normalized without changing content.
*/
:root {
  --brand: #1f5ea8;
  --brand-dark: #153e75;
  --brand-deep: #102a4c;
  --brand-soft: #edf5ff;
  --brand-soft-2: #f6faff;
  --brand-line: #d7e6f7;
  --brand-line-2: #e5eef8;
  --ink: #122033;
  --muted: #536274;
  --muted-2: #718095;
  --surface: #ffffff;
  --surface-soft: #f7fbff;
  --shadow-soft: 0 18px 48px rgba(16, 42, 76, 0.08);
  --primary: var(--brand);
  --primary-dark: var(--brand-dark);
  --primary-light: #5b8fca;
  --bg-dark: var(--surface-soft);
  --bg-card: var(--brand-soft);
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --text-muted: var(--muted-2);
  --border: var(--brand-line);
  --gradient-1: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  --success: #2d73b9;
  --warning: #4b78a8;
  --danger: #6c83a1;
}

html {
  background: var(--surface-soft) !important;
}

body {
  color: var(--ink) !important;
  background: var(--surface-soft) !important;
}

a {
  color: var(--brand) !important;
}

a:hover {
  color: var(--brand-dark) !important;
}

.site-header,
body > header:not(.site-header) {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid var(--brand-line-2) !important;
  box-shadow: 0 10px 30px rgba(16, 42, 76, 0.05) !important;
}

.site-brand,
.brand,
.logo,
.panel-title,
.site-footer strong,
.footer h3,
.footer h4 {
  color: var(--brand-deep) !important;
}

.site-links a,
nav a,
.foot-links a {
  color: var(--muted) !important;
}

.site-links a.active,
.site-links a:hover,
nav a:hover,
.links a.active,
.links a:hover {
  color: var(--brand) !important;
}

.hero,
.page-title,
.page-hero {
  background: linear-gradient(180deg, var(--brand-soft) 0%, var(--surface-soft) 100%) !important;
  border-bottom: 1px solid var(--brand-line) !important;
}

.eyebrow,
.case-label,
.line-badge,
.mini-label {
  color: var(--brand) !important;
}

.eyebrow:before {
  background: var(--brand) !important;
}

h1,
h2,
h3,
.page-title h1,
.hero h1,
.case-card h2 {
  color: var(--brand-deep) !important;
}

p,
.lead,
.section-lead,
.card p,
.case-card p,
.faq-item p,
.question span,
.list,
.site-footer,
.footer p,
.footer li {
  color: var(--muted) !important;
}

.card,
.case-card,
.tool-card,
.hero-panel,
.point,
.step,
.article-link,
.structure-map a,
.list-grid a,
.asset-list a,
.summary-box,
.quote-example,
.progress-nav,
.floating-progress {
  background: var(--surface) !important;
  border-color: var(--brand-line) !important;
  box-shadow: var(--shadow-soft) !important;
}

.card h3,
.step h3,
.article-link,
.structure-map a,
.question strong,
.faq-item strong {
  color: var(--brand-deep) !important;
}

.btn,
.btn-primary,
.btn.primary,
.nav-cta,
button,
input[type="submit"] {
  border-radius: 8px !important;
}

.btn.primary,
.btn-primary,
.nav-cta,
.cta a,
button.primary,
button[type="submit"],
input[type="submit"] {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.btn:not(.primary):not(.btn-primary),
.btn-secondary {
  background: var(--surface) !important;
  border-color: var(--brand-line) !important;
  color: var(--brand-dark) !important;
}

.tag,
.pill,
.line-badge,
.mini-label,
.case-label {
  background: var(--brand-soft) !important;
  border-color: var(--brand-line) !important;
  color: var(--brand) !important;
}

.note,
.summary-box,
.quote-example {
  background: var(--brand-soft-2) !important;
  border-color: var(--brand-line) !important;
}

.note,
.summary-box {
  border-left-color: var(--brand) !important;
}

.warn,
.ok {
  background: var(--brand-soft-2) !important;
  border-left-color: var(--brand) !important;
}

table,
.result-table {
  background: var(--surface) !important;
}

th,
.result-table th {
  background: var(--brand-soft) !important;
  color: var(--brand-deep) !important;
}

td,
th,
.result-table td,
.result-table th {
  border-color: var(--brand-line) !important;
}

.progress-nav,
.floating-progress {
  border-left-color: var(--brand-line) !important;
}

.progress-dot {
  background: var(--brand) !important;
}

.metric strong,
.step b {
  color: var(--brand) !important;
}

.bar {
  background: #dfeaf7 !important;
}

.bar i,
.bar.gold i,
.bar.blue i,
.progress-bar-fill,
.score-fill {
  background: var(--brand) !important;
}

.cta,
.cta-band,
.footer,
.site-footer {
  background: var(--brand-deep) !important;
  border-color: var(--brand-deep) !important;
  color: #dcecff !important;
}

.site-footer p,
.site-footer a,
.footer p,
.footer li,
.footer a,
.cta p,
.cta-band p {
  color: #dcecff !important;
}

.site-footer strong,
.footer h3,
.footer h4 {
  color: #ffffff !important;
}

.input-group input,
input,
textarea,
select {
  border-color: var(--brand-line) !important;
  color: var(--ink) !important;
}

.input-group input:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(31, 94, 168, 0.14) !important;
}

@media (max-width: 980px) {
  .progress-nav {
    box-shadow: none !important;
  }
}

.result-tab.active,
.dimension-action,
.loading-step.active {
  color: var(--brand) !important;
}

.result-tab.active::after,
.chat-message.user .chat-bubble,
.recommendation-num {
  background: var(--brand) !important;
}

.loading-spinner {
  border-top-color: var(--brand) !important;
}

.ai-simulator,
.comparison-card,
.recommendation-item,
.cta-section,
.loading-overlay {
  background: var(--surface) !important;
  border-color: var(--brand-line) !important;
}

.simulator-header,
.chat-message.ai .chat-bubble {
  background: var(--brand-soft) !important;
}

.simulator-dot.red,
.simulator-dot.yellow,
.simulator-dot.green {
  background: var(--brand) !important;
}

.comparison-card.before,
.comparison-card.after {
  border-color: var(--brand-line) !important;
}

.comparison-card.before .comparison-header,
.comparison-card.after .comparison-header,
.chat-bubble .highlight-bad,
.chat-bubble .highlight-good,
.recommendation-item,
[style*="rgba(99,102,241"],
[style*="rgba(139,92,246"],
[style*="rgba(16,185,129"],
[style*="rgba(6,182,212"] {
  background: var(--brand-soft-2) !important;
  border-color: var(--brand-line) !important;
}

.comparison-card.before .comparison-header,
.comparison-card.after .comparison-header,
.chat-bubble .highlight-bad,
.chat-bubble .highlight-good,
.grade-good,
.grade-medium,
.grade-poor,
.dimension-score,
.platform-score,
[style*="var(--success)"],
[style*="var(--warning)"],
[style*="var(--danger)"] {
  color: var(--brand) !important;
}

.score-ring .progress {
  stroke: var(--brand) !important;
}

.icp,
.footer-icp {
  margin-top: 14px !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--muted-2) !important;
}

.footer .icp,
.footer-icp,
.site-footer .icp {
  color: #b8cbe1 !important;
}

.icp a,
.footer-icp a {
  color: inherit !important;
  text-decoration: none !important;
}