/* ============================================================
   AI加工 — 全站共享样式
   Design System: Outfit + Noto Sans SC + JetBrains Mono
   Copper (#c8956c) / Dark (#0a0908/#1a1815) / Warm white (#faf8f5)
   ============================================================ */

/* --- CSS Variables --- */
:root {
  --copper: #c8956c;
  --copper-dark: #b8845c;
  --copper-light: #daa06d;
  --dark-1: #0a0908;
  --dark-2: #1a1815;
  --warm-white: #faf8f5;
  --text-light: #f0ece8;
  --text-muted: #bbb;
  --text-dim: #888;
  --text-dimmer: #666;
  --font-main: 'Outfit', 'Noto Sans SC', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* --- Reset --- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-main); background:var(--warm-white); -webkit-font-smoothing:antialiased; }
button { font-family:inherit; cursor:pointer; }
a { color:inherit; text-decoration:none; }
.container { max-width:1200px; margin:0 auto; padding:0 32px; }
img { max-width:100%; height:auto; }

/* 隐藏旧版 style.css 导航残留 */
.navbar, .mobile-menu-btn { display:none !important; }

/* --- NAV --- */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(26,24,21,0.85); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(200,149,108,0.08);
}
.nav-inner {
  max-width:1340px; margin:0 auto; padding:0 48px;
  display:flex; align-items:center; justify-content:space-between; height:68px;
}
.nav-logo { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.nav-logo img { height:36px; }
.nav-links { display:flex; align-items:center; gap:32px; }
.nav-links a { color:#bbb; font-size:16px; font-weight:500; text-decoration:none; transition:color 0.2s; }
.nav-links a:hover { color:var(--text-light); }
.active-link { color:var(--copper) !important; }
.nav-cta {
  background:linear-gradient(135deg, var(--copper), var(--copper-dark)); color:#fff !important;
  padding:10px 24px; border-radius:8px; font-size:16px; font-weight:600;
  text-decoration:none; transition:all 0.2s; white-space:nowrap; border:none;
}
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(200,149,108,0.35); color:#fff; }
.nav-lang { color:var(--text-dim); font-size:14px; flex-shrink:0; }
.nav-lang a { color:var(--text-dim); text-decoration:none; transition:color 0.2s; }
.nav-lang a:hover { color:var(--text-light); }
.nav-lang .active { color:var(--text-light); }
.nav-lang .nav-divider { margin:0 4px; }
.nav-mobile-extras { display:none; }
.nav-toggle {
  display:none; background:none; border:none;
  color:var(--text-light); font-size:24px; padding:4px; line-height:1;
}

/* --- FOOTER --- */
.site-footer {
  padding:48px 32px 32px; background:var(--dark-2);
}
.footer-grid {
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1fr 2.5fr;
  gap:48px; padding-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.footer-cols-row {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;
}
.footer-brand { flex-shrink:0; }
.footer-brand img { height:32px; margin-bottom:12px; display:block; }
.footer-brand p { font-size:14px; color:var(--text-dimmer); line-height:1.8; }
.footer-col h4 {
  font-size:14px; font-weight:700; color:#999;
  margin-bottom:16px; letter-spacing:1px;
}
.footer-col a {
  display:block; color:var(--text-dimmer); text-decoration:none;
  font-size:14px; margin-bottom:10px; transition:color 0.2s;
}
.footer-col a:hover { color:var(--copper); }
.footer-legal {
  max-width:1100px; margin:20px auto 0;
  display:flex; justify-content:space-between; flex-wrap:wrap;
  gap:8px; font-size:13px; color:#555;
}
.footer-legal a { color:#555; text-decoration:none; }
.footer-legal a:hover { color:var(--copper); }

/* --- MODAL --- */
.modal {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  z-index:1000; background:rgba(0,0,0,0.6); backdrop-filter:blur(8px);
  justify-content:center; align-items:center;
}
.modal.show { display:flex; }
.toast {
  position:fixed; top:20px; left:50%; transform:translateX(-50%);
  background:var(--dark-2); color:var(--text-light); padding:12px 24px; border-radius:8px;
  font-size:14px; z-index:1100; display:none; box-shadow:0 4px 20px rgba(0,0,0,0.3);
}
.toast.show { display:block; }
.modal-content {
  background:var(--dark-2); color:#e8e0d8;
  border-radius:16px; border:1px solid rgba(200,149,108,0.15);
  box-shadow:0 24px 80px rgba(0,0,0,0.5);
  max-width:560px; width:92%;
}
.modal-header {
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid rgba(200,149,108,0.1);
  padding:24px 28px;
}
.modal-header h3 { color:var(--text-light); font-family:var(--font-main); font-size:20px; font-weight:700; }
.modal-header .close-btn {
  color:var(--text-dim); font-size:24px; background:none;
  border:none; cursor:pointer; transition:color 0.2s;
}
.modal-header .close-btn:hover { color:var(--text-light); }
.modal-body { padding:24px 28px; }
.modal-body .form-row {
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;
}
.modal-body .form-group { display:flex; flex-direction:column; gap:6px; }
#betaModal .modal-content {
  background:#fff; color:#1f2937;
  border:1px solid #e5e7eb;
  box-shadow:0 24px 80px rgba(0,0,0,0.15);
  max-height:calc(100vh - 32px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
#betaModal .modal-header {
  border-bottom:1px solid #e5e7eb;
  flex-shrink:0;
}
#betaModal .modal-header h3 { color:#1f2937; }
#betaModal .modal-header .close-btn { color:#9ca3af; }
#betaModal .modal-header .close-btn:hover { color:#1f2937; }
#betaModal .modal-body {
  overflow-y:auto;
}
#betaModal .institution-support-card {
  background:linear-gradient(135deg, #eef2ff 0%, #f4f0ff 100%);
  border-left:5px solid #7c3aed;
  border-radius:12px;
  padding:18px 20px;
  margin-bottom:22px;
}
#betaModal .institution-support-card h4 {
  color:#5b21b6;
  font-size:18px;
  line-height:1.4;
  font-weight:700;
  margin:0 0 10px;
}
#betaModal .institution-support-card p {
  color:#475569;
  font-size:14px;
  line-height:1.7;
  margin:0;
}
#betaModal .beta-tip { color:#6b7280; font-size:14px; line-height:1.6; margin-bottom:20px; }
#betaModal label { color:#374151; font-size:13px; font-weight:600; display:block; }
#betaModal .required { color:#e74c3c; }
#betaModal .optional { color:#6b7280; font-weight:400; font-size:12px; }
#betaModal input, #betaModal select {
  background:#f9fafb; border:1px solid #d1d5db;
  color:#1f2937; border-radius:8px; padding:10px 12px;
  font-size:14px; font-family:var(--font-main);
  width:100%; transition:border-color 0.2s;
}
#betaModal input::placeholder { color:#9ca3af; }
#betaModal input:focus, #betaModal select:focus {
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.1);
  outline:none;
}
#betaModal select option { background:#fff; color:#1f2937; }
#betaModal .btn-primary.btn-full {
  background:linear-gradient(135deg, #2563eb, #1d4ed8);
  color:#fff; border:none; border-radius:10px;
  padding:14px; font-size:16px; font-weight:600; width:100%;
  cursor:pointer; transition:all 0.2s; margin-top:16px;
}
#betaModal .btn-primary.btn-full:hover {
  transform:translateY(-1px); box-shadow:0 6px 20px rgba(37,99,235,0.3);
}
#betaModal .field-hint { color:#6b7280; font-size:12px; min-height:18px; margin-top:4px; }

/* --- ANIMATIONS --- */
.fade-up {
  opacity:0; transform:translateY(20px);
  transition:opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-up-d1 { transition-delay:0.1s; }
.fade-up-d2 { transition-delay:0.2s; }
.fade-up-d3 { transition-delay:0.3s; }
.fade-up-d4 { transition-delay:0.4s; }
.fade-up-d5 { transition-delay:0.5s; }
.fade-up-d6 { transition-delay:0.6s; }
.fade-up-d7 { transition-delay:0.7s; }

/* ============================================================
   RESPONSIVE — TABLET (<=1024px)
   ============================================================ */
@media (max-width:1024px) {
  .nav-inner { padding:0 24px; }
  .nav-links { gap:18px; }
  .nav-links a { font-size:14px; }
  .nav-cta { padding:8px 18px; font-size:14px; }
  .footer-grid { gap:32px; }
}

/* ============================================================
   RESPONSIVE — MOBILE (<=768px)
   ============================================================ */
@media (max-width:768px) {
  /* Nav mobile */
  .nav-inner { height:56px; padding:0 16px; }
  .nav-logo img { height:28px; }
  .nav-links { display:none; }
  .nav-lang { display:none; }
  .nav > .nav-inner > .nav-cta { display:none; }
  .nav-toggle { display:block; }
  .nav-overlay {
    display:none; position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.5); z-index:98;
  }
  .nav-overlay.show { display:block; }
  .nav-links.open {
    display:flex !important; flex-direction:column; align-items:stretch;
    position:absolute; top:56px; left:0; right:0;
    background:var(--dark-2); box-shadow:0 20px 60px rgba(0,0,0,0.5);
    padding:8px 24px 24px; gap:0; z-index:99; overflow-y:auto;
    border-radius:0 0 16px 16px;
  }
  .nav-links.open a {
    display:block; padding:18px 0; font-size:17px; color:#bbb;
    border-bottom:1px solid rgba(255,255,255,0.06);
    text-align:left !important;
  }
  .nav-links.open a:last-of-type { border-bottom:none; }
  .nav-links.open a:hover, .nav-links.open a.active-link { color:var(--copper); }
  .nav-links.open .nav-mobile-extras {
    display:flex; flex-direction:column; gap:14px;
    padding-top:16px; border-top:1px solid rgba(255,255,255,0.08);
    margin-top:8px;
  }
  .nav-mobile-extras .nav-mobile-lang {
    color:var(--text-dimmer); font-size:13px;
    display:flex; align-items:center; gap:8px;
  }
  .nav-mobile-extras .nav-mobile-lang .active { color:var(--text-light); font-weight:600; }
  .nav-mobile-extras .nav-mobile-lang a { display:inline; padding:0; border:none; font-size:13px; color:var(--text-dimmer); }
  .nav-links.open .nav-mobile-extras .nav-cta {
    display:block; text-align:center !important; padding:14px; border-radius:10px;
    font-size:15px; font-weight:600; border:none; width:100%;
  }

  /* Footer mobile */
  .site-footer { padding:32px 16px 24px; }
  .footer-grid { grid-template-columns:1fr; gap:24px; }
  .footer-brand { text-align:center; }
  .footer-brand img { margin:0 auto 12px; }
  .footer-cols-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
  .footer-col h4 { font-size:12px; white-space:nowrap; margin-bottom:12px; }
  .footer-col a { font-size:12px; white-space:nowrap; }
  .footer-legal {
    flex-direction:column; text-align:center; gap:6px;
    font-size:11px; line-height:1.6; padding-bottom:48px;
  }
  .footer-legal span { word-break:break-all; }

  /* Modal mobile */
  .modal-content { width:95%; }
  .modal-body .form-row { grid-template-columns:1fr; gap:12px; }
  .modal-header { padding:20px; }
  .modal-body { padding:20px; }
}

/* ============================================================
   RESPONSIVE — SMALL PHONE (<=380px)
   ============================================================ */
@media (max-width:380px) {
  .footer-grid { grid-template-columns:1fr; }
}

/* ============================================================
   注册成功弹窗
   ============================================================ */
#betaSuccessModal .modal-content {
  background:#fff; color:#1f2937;
  border:1px solid #e5e7eb;
  box-shadow:0 24px 80px rgba(0,0,0,0.15);
  max-width:440px; min-width:320px; width:92%;
}
#betaSuccessModal .modal-header { border-bottom:1px solid #e5e7eb; }
#betaSuccessModal .modal-header h3 { color:#1f2937; }
#betaSuccessModal .modal-header .close-btn { color:#9ca3af; }
#betaSuccessModal .modal-header .close-btn:hover { color:#1f2937; }
#betaSuccessModal .beta-success-body { padding:28px 28px 32px; text-align:center; color:#1f2937; }
#betaSuccessModal .beta-success-icon { display:flex; justify-content:center; margin:4px 0 18px; }
#betaSuccessModal .beta-success-desc { font-size:15px; line-height:1.75; color:#1f2937; margin:0 0 22px; }
#betaSuccessModal .btn-full {
  display:block; width:100%; padding:12px 16px;
  font-size:15px; font-weight:600; border-radius:8px;
  background:#2563eb; color:#fff; border:none; cursor:pointer; transition:background .2s;
}
#betaSuccessModal .btn-full:hover { background:#1d4ed8; }
#betaSuccessModal .beta-success-countdown { margin-top:14px; font-size:12px; color:#6b7280; min-height:18px; }