/* MUNGO Privacy Portal —— 与主站 (website/) 视觉对齐：
 *   - mango 暖琥珀调色板（与 website/src/styles/global.css 完全一致）
 *   - 自托管 Inter + Noto Sans SC（CSP font-src 'self'，零 Google 依赖，照顾中国大陆访问）
 *   - 浅/深色：语义色走 CSS 变量，[data-theme="dark"] 整体覆盖；橙色 accent 两态保留
 * 纯静态站，无构建步骤。 */

/* ---- 自托管字体 ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/inter-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-sans-sc-chinese-simplified-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/noto-sans-sc-chinese-simplified-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/noto-sans-sc-chinese-simplified-700-normal.woff2') format('woff2');
}

:root {
  /* mango 调色板（与主站一致） */
  --mango-50: #fff9f0;
  --mango-100: #fff3e0;
  --mango-200: #ffe0b2;
  --mango-300: #ffcc80;
  --mango-400: #ffb74d;
  --mango-500: #ff9800;
  --mango-600: #fb8c00;
  --mango-700: #f57c00;
  --mango-800: #ef6c00;
  --mango-900: #e65100;
  --brand-bg: #f2f1e1;

  /* 语义色 —— 浅色默认 */
  --bg: var(--brand-bg);
  --surface: #ffffff;
  --surface-alt: var(--mango-50);
  --border: var(--mango-100);
  --border-strong: var(--mango-200);
  --text: #18181b;
  --text-muted: #52525b;
  --text-faint: #71717a;
  --heading: var(--mango-900);
  --link: var(--mango-700);
  --link-hover: var(--mango-900);
  --accent: var(--mango-500);
  --accent-hover: var(--mango-600);
  --on-accent: #ffffff;
  --focus-ring: rgba(255, 152, 0, 0.25);
  --shadow: rgba(0, 0, 0, 0.08);
  --error-bg: #fef2f2;
  --error-border: #fecaca;
  --error-text: #b91c1c;
}

/* 暗色 = zinc 暖中性灰体系（与主站深色一致）：页面 zinc-900 / 面 zinc-800 / 边框 zinc-700 /
 * 文字 zinc-50..400 / 链接与强调用更亮的 mango-400。橙色 CTA 与白字两态不变。 */
[data-theme='dark'] {
  --bg: #18181b; /* zinc-900 */
  --surface: #27272a; /* zinc-800 */
  --surface-alt: #27272a;
  --border: #3f3f46; /* zinc-700 */
  --border-strong: #3f3f46;
  --text: #fafafa; /* zinc-50 */
  --text-muted: #d4d4d8; /* zinc-300 */
  --text-faint: #a1a1aa; /* zinc-400 */
  --heading: #fafafa;
  --link: var(--mango-400);
  --link-hover: var(--mango-300);
  --focus-ring: rgba(255, 183, 77, 0.25);
  --shadow: rgba(0, 0, 0, 0.5);
  --error-bg: #3f1d1d;
  --error-border: #7f1d1d;
  --error-text: #fca5a5;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family:
    'Inter', 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Microsoft YaHei', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition:
    background-color 0.3s,
    color 0.3s;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--link-hover);
}

/* ---- header ---- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 17px;
  color: var(--link);
  text-decoration: none;
}
.brand:hover {
  color: var(--accent);
}
.brand-icon {
  width: 28px;
  height: 28px;
  flex: none;
}
.brand-sub {
  font-weight: 600;
  color: var(--text-muted);
}
.nav {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lang-switch {
  display: inline-flex;
  align-items: stretch;
  height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  color: var(--text-muted);
  text-decoration: none;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.lang-switch a + a {
  border-left: 1px solid var(--border-strong);
}
.lang-switch a:hover {
  background: var(--surface-alt);
  color: var(--link);
}
[data-theme='dark'] .lang-switch a:hover {
  background: var(--surface);
}
.lang-switch a.active {
  background: var(--accent);
  color: var(--on-accent);
}
.lang-switch a.active:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}

/* ---- theme toggle ---- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--link);
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.theme-toggle:hover {
  background: var(--surface-alt);
}
[data-theme='dark'] .theme-toggle:hover {
  background: var(--surface);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
}
.theme-toggle .icon-sun {
  display: none;
}
.theme-toggle .icon-moon {
  display: block;
}
[data-theme='dark'] .theme-toggle .icon-sun {
  display: block;
}
[data-theme='dark'] .theme-toggle .icon-moon {
  display: none;
}

/* ---- main ---- */
.main {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px;
}

.hero h1 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--heading);
}

.lead {
  font-size: 17px;
  color: var(--text-muted);
}

/* ---- cards ---- */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 32px 0;
}
@media (min-width: 640px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
  .card.primary {
    grid-column: 1 / -1;
  }
}

.card {
  display: block;
  padding: 20px 24px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
}
.card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px var(--shadow);
  transform: translateY(-1px);
}
.card.primary {
  background: var(--surface-alt);
  border-color: var(--accent);
}
[data-theme='dark'] .card.primary {
  background: var(--surface);
}
.card h2 {
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--heading);
}
.card p {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}

.footer {
  text-align: center;
  margin: 48px 0 24px;
  color: var(--text-faint);
  font-size: 13px;
}

/* ---- form ---- */
.form {
  background: var(--surface);
  padding: 24px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  margin: 24px 0;
}
.field {
  margin-bottom: 20px;
}
.field label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--heading);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.field textarea {
  resize: vertical;
  min-height: 80px;
}
.hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-faint);
}

/* ---- buttons ---- */
.btn-primary,
button.btn-primary {
  display: inline-block;
  padding: 12px 24px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s;
  text-align: center;
}
.btn-primary:hover,
button.btn-primary:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary,
a.btn-secondary {
  display: inline-block;
  padding: 12px 24px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  margin-left: 12px;
  transition: background-color 0.15s;
}
.btn-secondary:hover {
  background: var(--surface-alt);
}
[data-theme='dark'] .btn-secondary:hover {
  background: var(--surface);
}

/* ---- alert ---- */
.alert {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
}
.alert.error {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
}

/* ---- confirmed page ---- */
.confirmed {
  text-align: center;
  padding: 32px 0;
}
.confirmed .icon {
  font-size: 64px;
  margin-bottom: 16px;
}
.confirmed h1 {
  font-size: 32px;
  color: var(--heading);
}
.info-box {
  text-align: left;
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 20px 24px;
  margin: 24px auto;
  max-width: 600px;
}
[data-theme='dark'] .info-box {
  background: var(--surface);
}
.info-box p {
  margin: 0 0 8px;
}
.info-box ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
.info-box li {
  margin-bottom: 4px;
  color: var(--text-muted);
}