:root {
  --cc-brand: #229670;
  --cc-brand-rgb: 34, 150, 112;
  --cc-brand-strong: #167a5b;
  --cc-brand-dark: #0f5f47;
  --cc-brand-soft: #ddf5ec;
  --cc-brand-bg: #f0fbf7;
  --cc-brand-border: #a7e3cf;
  --cc-accent: #0ea5e9;
  --cc-success: #16a34a;
  --cc-warning: #f59e0b;
  --cc-danger: #dc2626;
  --cc-page-bg: linear-gradient(180deg, #f0fbf7 0%, #ffffff 46%, #edf8f4 100%);
  --cc-bg: var(--cc-page-bg);
  --cc-white: #ffffff;
  --cc-surface: #ffffff;
  --cc-surface-muted: #f7fbf9;
  --cc-border: rgba(15, 95, 71, .12);
  --cc-text: #0f172a;
  --cc-muted: #64748b;
  --cc-dark-bg: #08130f;
  --cc-dark-bg-rgb: 8, 19, 15;
  --cc-dark-page-bg:
    radial-gradient(900px 420px at 8% -10%, rgba(var(--cc-brand-rgb), .28), transparent 68%),
    radial-gradient(780px 380px at 92% 8%, rgba(167, 227, 207, .14), transparent 66%),
    linear-gradient(180deg, #08130f 0%, #0d1a15 46%, #07100d 100%);
  --cc-dark-surface: #101d18;
  --cc-dark-surface-strong: #172821;
  --cc-dark-text: #d8efe7;
  --cc-dark-muted: #91afa4;
  --cc-dark-border: rgba(167, 227, 207, .18);
  --cc-radius-sm: 10px;
  --cc-radius: 16px;
  --cc-radius-lg: 22px;
  --cc-card-radius: var(--cc-radius);
  --cc-section-gap: 32px;
  --cc-shadow: 0 10px 28px rgba(15, 95, 71, 0.08);
  --cc-shadow-hover: 0 16px 36px rgba(15, 95, 71, 0.13);
  --cc-hero-bg: radial-gradient(1200px 420px at 50% -55%, rgba(var(--cc-brand-rgb), .18), transparent) var(--cc-bg);
  --cc-blue: var(--cc-brand);
  --cc-blue-600: var(--cc-brand-strong);
  --cc-blue-700: var(--cc-brand-dark);
  --cc-breakpoint-sm: 480px;
  --cc-breakpoint-md: 768px;
  --cc-breakpoint-lg: 1024px;
  --cc-breakpoint-xl: 1440px;
}

.theme-default {
  --cc-bg: var(--cc-page-bg);
  --cc-surface: #ffffff;
  --cc-surface-muted: #f7fbf9;
  --cc-hero-bg: radial-gradient(1200px 420px at 50% -55%, rgba(var(--cc-brand-rgb), .18), transparent) var(--cc-bg);
}

.theme-game-dark {
  --cc-bg: var(--cc-dark-page-bg);
  --cc-surface: var(--cc-dark-surface);
  --cc-surface-muted: var(--cc-dark-surface-strong);
  --cc-border: var(--cc-dark-border);
  --cc-text: var(--cc-dark-text);
  --cc-muted: var(--cc-dark-muted);
  --cc-hero-bg: var(--cc-dark-page-bg);
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  line-height: 1.6;
  color: var(--cc-text);
  background: var(--cc-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

a {
  color: var(--cc-brand);
  text-decoration: none;
  transition: color .2s ease;
}

a:hover {
  color: var(--cc-brand-strong);
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

main {
  flex: 1 0 auto;
}

@media (max-width: 480px) {
  .container {
    padding: 0 12px;
  }
}