/* Unified visual layer for the static site.
   Keep this file deployment-friendly: no build step, no external dependency. */
:root {
  --site-bg: #f6f3ee;
  --site-bg-2: #ebe5db;
  --site-surface: #fffdf9;
  --site-surface-2: #f2eee7;
  --site-ink: #20242a;
  --site-muted: #64707d;
  --site-soft: #8b96a3;
  --site-line: rgba(35, 42, 50, 0.12);
  --site-line-strong: rgba(35, 42, 50, 0.2);
  --site-primary: #276b63;
  --site-primary-2: #3f8d83;
  --site-accent: #b87534;
  --site-danger: #b84d45;
  --site-radius: 14px;
  --site-radius-sm: 10px;
  --site-shadow: 0 22px 58px rgba(38, 45, 55, 0.11);
  --site-shadow-soft: 0 10px 28px rgba(38, 45, 55, 0.09);
  --site-font: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Map common page-local variables into the same visual system. */
  --bg: var(--site-bg);
  --bg-2: var(--site-bg-2);
  --surface: var(--site-surface);
  --surface-2: var(--site-surface-2);
  --surface-3: #e5ded2;
  --card: var(--site-surface);
  --text: var(--site-ink);
  --text-soft: var(--site-muted);
  --muted: var(--site-muted);
  --soft: var(--site-soft);
  --line: var(--site-line);
  --line-strong: var(--site-line-strong);
  --blue: var(--site-primary);
  --green: #2e7b59;
  --amber: var(--site-accent);
  --red: var(--site-danger);
  --violet: #6e5a91;
  --cyan: #2c7788;
  --brand: var(--site-primary);
  --brand-2: var(--site-primary-2);
  --accent: var(--site-accent);
  --radius: var(--site-radius);
  --shadow: var(--site-shadow);
  --shadow-soft: var(--site-shadow-soft);
  --primary-color: var(--site-primary);
  --primary-light: #4d998f;
  --primary-dark: #1f5a53;
  --accent-color: var(--site-accent);
  --success-color: #2e7b59;
  --warning-color: var(--site-accent);
  --error-color: var(--site-danger);
  --background-start: var(--site-bg);
  --background-end: var(--site-bg-2);
  --background-color: var(--site-bg);
  --surface-color: var(--site-surface);
  --secondary-color: #2e7b59;
  --secondary-hover: #276b63;
  --card-background: rgba(255, 253, 249, 0.82);
  --card-background-solid: var(--site-surface);
  --text-primary: var(--site-ink);
  --text-secondary: var(--site-muted);
  --text-muted: var(--site-soft);
  --border-color: var(--site-line);
  --glass-border: rgba(255, 255, 255, 0.65);
  --border-radius-sm: var(--site-radius-sm);
  --border-radius: var(--site-radius);
  --border-radius-lg: 22px;
}

body.site-modern {
  font-family: var(--site-font) !important;
  color: var(--site-ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(39, 107, 99, 0.12), transparent 30%),
    radial-gradient(circle at 90% 8%, rgba(184, 117, 52, 0.1), transparent 30%),
    linear-gradient(145deg, var(--site-bg), var(--site-bg-2)) !important;
  letter-spacing: 0;
}

body.site-modern.site-immersive {
  color: #f8fafc;
  background:
    linear-gradient(135deg, rgba(15, 23, 28, 0.74), rgba(18, 39, 42, 0.62)),
    url("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=2070&q=80") center/cover fixed !important;
}

body.site-modern.site-immersive .overlay {
  background: linear-gradient(135deg, rgba(8, 14, 18, 0.5), rgba(17, 37, 39, 0.62)) !important;
}

body.site-modern a {
  text-underline-offset: 3px;
}

body.site-modern .shell,
body.site-modern .container,
body.site-modern .wrap {
  max-width: min(1180px, calc(100% - 32px));
}

body.site-modern .brand-mark,
body.site-modern .command,
body.site-modern .section-title .icon,
body.site-modern .link-card,
body.site-modern .card,
body.site-modern .hero,
body.site-modern .hero-content,
body.site-modern .glass,
body.site-modern .step-card,
body.site-modern .subsection,
body.site-modern .yearly-package,
body.site-modern .promotion-banner,
body.site-modern .modal,
body.site-modern .login-box {
  border-radius: var(--site-radius) !important;
}

body.site-modern .command,
body.site-modern .link-card,
body.site-modern .card,
body.site-modern .step-card,
body.site-modern .yearly-package,
body.site-modern .modal,
body.site-modern .login-box {
  border-color: var(--site-line) !important;
  box-shadow: var(--site-shadow-soft) !important;
}

body.site-modern .link-card:hover,
body.site-modern .card:hover,
body.site-modern .step-card:hover,
body.site-modern .btn:hover,
body.site-modern .download-btn:hover,
body.site-modern .action-btn:hover {
  transform: translateY(-2px) !important;
}

body.site-modern .hero h1,
body.site-modern .header h1,
body.site-modern .logo,
body.site-modern .login-title {
  letter-spacing: 0 !important;
}

body.site-modern .btn-primary,
body.site-modern .login-btn,
body.site-modern .download-btn,
body.site-modern .collapse-toggle,
body.site-modern .filter.active,
body.site-modern .btn-accent,
body.site-modern .config-action-btn.primary {
  background: linear-gradient(135deg, var(--site-primary), var(--site-primary-2)) !important;
  box-shadow: 0 12px 26px rgba(39, 107, 99, 0.22) !important;
}

body.site-modern .btn-secondary,
body.site-modern .action-btn,
body.site-modern .filter,
body.site-modern .copy-btn {
  border-color: var(--site-line) !important;
}

body.site-modern .step-header,
body.site-modern .modal-header {
  background: linear-gradient(135deg, #275f58, #3d7f78) !important;
}

body.site-modern .promotion-banner {
  background: linear-gradient(135deg, #9a6532, #c08a4c) !important;
}

body.site-modern .side-nav {
  background: rgba(255, 253, 249, 0.88) !important;
  border-right-color: var(--site-line) !important;
  box-shadow: var(--site-shadow-soft);
}

body.site-modern .side-nav h3,
body.site-modern .nav-link.active,
body.site-modern .main-content h1,
body.site-modern .main-content h2,
body.site-modern .main-content h3 {
  color: var(--site-ink) !important;
}

body.site-modern .nav-link {
  color: var(--site-muted) !important;
}

body.site-modern .nav-link:hover,
body.site-modern .nav-link.active {
  background: rgba(39, 107, 99, 0.08) !important;
  border-left-color: var(--site-primary) !important;
}

body.site-modern .progress-bar {
  background: linear-gradient(90deg, var(--site-primary), var(--site-accent)) !important;
}

body.site-modern .platform,
body.site-modern .recommended-badge,
body.site-modern .os-info {
  border-radius: 999px !important;
}

body.site-modern img.tutorial-image,
body.site-modern .tutorial-image {
  border-radius: var(--site-radius-sm) !important;
  box-shadow: var(--site-shadow-soft) !important;
}

@media (prefers-color-scheme: dark) {
  :root {
    --site-bg: #111715;
    --site-bg-2: #19211f;
    --site-surface: #1f2825;
    --site-surface-2: #26312e;
    --site-ink: #eef3f0;
    --site-muted: #a9b5b0;
    --site-soft: #7f8d88;
    --site-line: rgba(255, 255, 255, 0.1);
    --site-line-strong: rgba(255, 255, 255, 0.18);
    --site-shadow: 0 22px 58px rgba(0, 0, 0, 0.34);
    --site-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.25);
  }
}

@media (max-width: 640px) {
  body.site-modern .shell,
  body.site-modern .container,
  body.site-modern .wrap {
    max-width: calc(100% - 24px);
  }

  body.site-modern .hero h1,
  body.site-modern .header h1 {
    font-size: clamp(1.8rem, 9vw, 2.4rem) !important;
  }
}