@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@300;400;500;600;700&family=ZCOOL+QingKe+HuangYou&display=swap');

:root {
  /* Dark theme (default) */
  --ink:       #0E0D20;
  --surface:   #151428;
  --card:      #1C1B35;
  --border:    rgba(212,168,78,0.25);
  --gold:      #D4A84E;
  --gold-dim:  rgba(212,168,78,0.6);
  --gold-glow: rgba(212,168,78,0.15);
  --vermilion: #C26A4A;
  --jade:      #5CA08A;
  --sky:       #6A90C2;
  --text:      #F2EDD8;
  --text-dim:  rgba(242,237,216,0.72);
  --text-faint:rgba(242,237,216,0.40);
  --r: 18px;
  /* Nav bg helpers (used for overriding hardcoded rgba) */
  --nav-bg-from: rgba(14,13,32,0.95);
  --nav-bg-scroll: rgba(14,13,32,0.92);
  --overlay-bg: rgba(14,13,32,0.97);
  --locked-bg: rgba(14,13,32,0.6);
  --footer-bg: rgba(14,13,32,0.8);
  --filter-bg: rgba(21,20,40,0.7);
  --footer-sep: rgba(255,255,255,0.06);
  --input-bg: rgba(255,255,255,0.06);
  --chip-bg: rgba(255,255,255,0.04);
  --chip-border: rgba(255,255,255,0.1);
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --ink:        #F5F0E8;
  --surface:    #EDE8D8;
  --card:       #E6E0CB;
  --border:     rgba(160,118,32,0.30);
  --gold:       #A87820;
  --gold-dim:   rgba(168,120,32,0.65);
  --gold-glow:  rgba(168,120,32,0.12);
  --vermilion:  #A84830;
  --jade:       #3A6B56;
  --sky:        #3A5C8C;
  --text:       #1E1A30;
  --text-dim:   rgba(30,26,48,0.70);
  --text-faint: rgba(30,26,48,0.40);
  --nav-bg-from: rgba(245,240,232,0.96);
  --nav-bg-scroll: rgba(245,240,232,0.94);
  --overlay-bg: rgba(245,240,232,0.97);
  --locked-bg: rgba(237,232,216,0.72);
  --footer-bg: rgba(237,232,216,0.9);
  --filter-bg: rgba(237,232,216,0.9);
  --footer-sep: rgba(30,26,48,0.08);
  --input-bg: rgba(255,255,255,0.55);
  --chip-bg: rgba(30,26,48,0.04);
  --chip-border: rgba(30,26,48,0.12);
}

/* Smooth theme transitions */
body, nav, footer,
.form-card, .feature-card, .testimonial-card, .article-card,
.name-card, .sidebar-card, .sidebar-widget, .cta-card,
.login-form-panel, .tab-bar, .element-chip, .style-card,
.field input, .field select, .field textarea,
.filter-bar-wrap, .loading-overlay, .result-overlay,
.login-field input, .phone-prefix {
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease;
}

/* Starfield: subtle in light mode */
[data-theme="light"] #starfield { opacity: 0.05; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Serif SC', 'STSong', '宋体', serif;
  background: var(--ink);
  color: var(--text);
  overflow-x: hidden;
  min-height: 100vh;
}

#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Shared section/heading styles */
.section-eyebrow {
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--gold-dim);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.section-title {
  font-family: 'Ma Shan Zheng', cursive;
  font-size: 38px;
  letter-spacing: 0.1em;
  line-height: 1.3;
}
.section-title em {
  font-style: normal;
  color: var(--gold);
}
.section-desc {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  line-height: 1.8;
}
.form-header {
  text-align: center;
  margin-bottom: 56px;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,168,78,0.6); }
  50% { box-shadow: 0 0 0 5px rgba(212,168,78,0); }
}