/* kolcrm.com theme tokens (from their _next CSS) → 达人星球入口站 */
:root {
  --bg: 248 250 252;
  --surface: 255 255 255;
  --text-1: 15 23 42;
  --text-2: 100 116 139;
  --border: 226 232 240;
  --cyan: 6 182 212;
  --red: 254 44 85;
  --radius-btn: 6px;
  --radius-surface: 8px;
  --shadow-surface: 0 1px 3px 0 rgba(0,0,0,.07), 0 1px 2px -1px rgba(0,0,0,.05);
  --shadow-hover: 0 4px 12px 0 rgba(0,0,0,.1);
}
.dark {
  --bg: 2 6 23;
  --surface: 15 23 42;
  --text-1: 248 250 252;
  --text-2: 148 163 184;
  --border: 30 41 59;
  --cyan: 34 211 238;
  --red: 255 75 110;
}
*, *::before, *::after { box-sizing: border-box; border: 0 solid rgb(var(--border)); }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: rgb(var(--text-1));
  background: rgb(var(--bg));
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
.hidden { display: none !important; }
.min-h-dvh { min-height: 100dvh; }
.max-w-6xl { max-width: 72rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid rgb(var(--border));
  background: rgb(var(--surface) / 0.8);
  backdrop-filter: blur(8px);
}
.site-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 72rem; margin: 0 auto;
  padding: 0.75rem 1rem;
}
@media (min-width: 640px) { .site-header-inner { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .site-header-inner { padding-left: 2rem; padding-right: 2rem; } }
.brand-word { font-size: 1rem; font-weight: 600; }
@media (min-width: 640px) { .brand-word { font-size: 1.125rem; } }
.nav-desktop { display: none; align-items: center; gap: 1.5rem; font-size: 0.875rem; color: rgb(var(--text-2)); }
@media (min-width: 768px) { .nav-desktop { display: flex; } }
.nav-desktop a:hover { color: rgb(var(--text-1)); }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.25rem; width: 2.25rem; border-radius: var(--radius-btn);
  background: transparent; cursor: pointer; color: rgb(var(--text-2));
}
.icon-btn:hover { background: rgb(var(--surface)); }
.lang-btn {
  display: inline-flex; align-items: center; gap: 0.25rem;
  height: 2rem; padding: 0 0.5rem; border-radius: var(--radius-btn);
  background: transparent; cursor: pointer; color: rgb(var(--text-2));
  font-size: 0.75rem; font-weight: 500;
}
.lang-btn:hover { background: rgb(var(--surface)); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  white-space: nowrap; border-radius: var(--radius-btn); font-weight: 500;
  transition: opacity .15s, background .15s, border-color .15s;
  cursor: pointer; border: 1px solid transparent;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-cyan { background: rgb(var(--cyan)); color: #fff; border-color: transparent; }
.btn-cyan:hover { opacity: .9; }
.btn-outline {
  background: rgb(var(--surface)); border-color: rgb(var(--border)); color: rgb(var(--text-1));
}
.btn-outline:hover { background: rgb(var(--bg)); }
.btn-ghost { background: transparent; color: rgb(var(--text-1)); }
.btn-ghost:hover { background: rgb(var(--surface)); }
.btn-sm { height: 2rem; padding: 0 0.75rem; font-size: 0.875rem; }
.btn-md { height: 2.25rem; padding: 0 1rem; font-size: 0.875rem; }
.btn-lg { height: 2.75rem; padding: 0 1.5rem; font-size: 1rem; }
.btn-login-nav { display: none; }
@media (min-width: 640px) { .btn-login-nav { display: inline-flex; } }
.menu-btn { display: inline-flex; }
@media (min-width: 768px) { .menu-btn { display: none; } }
.mobile-nav {
  display: none; flex-direction: column; gap: 0.5rem;
  padding: 0.75rem 1rem 1rem; border-top: 1px solid rgb(var(--border));
  background: rgb(var(--surface));
}
.mobile-nav.open { display: flex; }
.mobile-nav a { padding: 0.5rem 0; color: rgb(var(--text-2)); font-size: 0.875rem; }

/* footer */
.site-footer {
  border-top: 1px solid rgb(var(--border));
  background: rgb(var(--bg));
}
.site-footer-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 1rem; width: 100%; max-width: 72rem; margin: 0 auto;
  padding: 2rem 1rem;
}
@media (min-width: 640px) {
  .site-footer-inner { flex-direction: row; padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .site-footer-inner { padding-left: 2rem; padding-right: 2rem; }
}
.site-footer nav { display: flex; gap: 1.5rem; font-size: 0.875rem; color: rgb(var(--text-2)); }
.site-footer nav a:hover { color: rgb(var(--text-1)); }
.site-footer .copy { font-size: 0.75rem; color: rgb(var(--text-2)); }

/* cards */
.card {
  border-radius: var(--radius-surface);
  border: 1px solid rgb(var(--border));
  background: rgb(var(--surface));
  color: rgb(var(--text-1));
  box-shadow: var(--shadow-surface);
}
.card:hover { box-shadow: var(--shadow-hover); }
.card-pad { padding: 1.5rem; }

.text-2 { color: rgb(var(--text-2)); }
.text-cyan { color: rgb(var(--cyan)); }
.text-coral { color: rgb(var(--red)); }
.bg-cyan-soft { background: rgb(var(--cyan) / 0.1); color: rgb(var(--cyan)); }