/* ========================================================================
   CHINESE HOMOPHONE HELPER — PREMIUM DESIGN SYSTEM
   ========================================================================
   Design inspiration: Du Chinese, HelloChinese, Duolingo
   Palette: Deep Indigo + Warm Amber
   ======================================================================== */

/* ---- CSS Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Inter','Noto Sans SC',system-ui,-apple-system,sans-serif;line-height:1.6;overflow-x:hidden;transition:background .3s,color .3s}
button,input,select,textarea,a{touch-action:manipulation}
img{max-width:100%;display:block}
a{text-decoration:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input{font-family:inherit}
ul{list-style:none}

/* ---- Design Tokens ----
   Indigo-primary scheme, warm accent
   Dark mode is default, light mode is toggle
*/
:root{
  /* Core colors */
  --bg:#0a0f1e;
  --bg-alt:#111827;
  --bg-card:#1a2236;
  --bg-hover:#1f2a45;
  --text:#e8edf5;
  --text-secondary:#8896b0;
  --text-muted:#5a6880;

  /* Accent palette */
  --accent:#f59e0b;       /* amber-500 */
  --accent-light:#fbbf24; /* amber-400 */
  --accent-dark:#d97706;  /* amber-600 */
  --accent-glow:rgba(245,158,11,0.3);

  /* Brand */
  --primary:#6366f1;      /* indigo-500 */
  --primary-dark:#4f46e5; /* indigo-600 */
  --primary-light:#818cf8;/* indigo-400 */
  --primary-subtle:rgba(99,102,241,0.1);

  /* UI */
  --border:rgba(255,255,255,0.08);
  --border-light:rgba(255,255,255,0.12);
  --radius:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --shadow:0 4px 24px rgba(0,0,0,0.3);
  --shadow-lg:0 8px 40px rgba(0,0,0,0.4);
  --shadow-glow:0 0 30px var(--accent-glow);

  /* Typography */
  --font-sans:'Inter','Noto Sans SC',system-ui,-apple-system,sans-serif;

  /* Layout */
  --max-width:1100px;
  --header-h:70px;
}

/* ---- Light Theme ---- */
[data-theme="light"]{
  --bg:#f8fafc;
  --bg-alt:#f1f5f9;
  --bg-card:#ffffff;
  --bg-hover:#f8fafc;
  --text:#0f172a;
  --text-secondary:#475569;
  --text-muted:#94a3b8;
  --border:rgba(0,0,0,0.08);
  --border-light:rgba(0,0,0,0.12);
  --shadow:0 4px 24px rgba(0,0,0,0.08);
  --shadow-lg:0 8px 40px rgba(0,0,0,0.12);
}

/* ========================================================================
   HEADER
   ======================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--header-h);
  background:rgba(10,15,30,0.8);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
  transition:background .3s;
}
[data-theme="light"] .site-header{
  background:rgba(248,250,252,0.85);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
}
.header-inner{
  max-width:var(--max-width);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  height:100%;padding:0 20px;
}

/* Logo */
.header-logo{display:flex;align-items:center;gap:8px;}
.logo-icon{font-size:1.5rem;line-height:1;}
.logo-text{font-size:1.1rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* Nav */
.header-nav{display:flex;align-items:center;gap:8px;}

/* Theme toggle */
.theme-btn{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--bg-card);
  border:1px solid var(--border);font-size:1.1rem;
  transition:all .2s;
}
.theme-btn:hover{background:var(--bg-hover);transform:scale(1.05);}

/* Quest button */
.quest-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 14px;border-radius:8px;font-size:.85rem;font-weight:600;
  background:linear-gradient(135deg,#d4a843,#8b6914);color:#1a1a2e;
  border:1px solid rgba(212,168,67,0.4);text-decoration:none;
  transition:all .3s ease;white-space:nowrap;
}
.quest-btn:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 4px 16px rgba(212,168,67,0.3);
  color:#1a1a2e;
}
.quest-icon{font-size:1rem;}
@media(max-width:640px){
  .quest-text{display:none;}
  .quest-btn{padding:6px 10px;}
}

/* PWA Install button */
.install-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 14px;border-radius:8px;font-size:.85rem;font-weight:600;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;
  border:1px solid rgba(37,99,235,0.3);cursor:pointer;
  transition:all .3s ease;white-space:nowrap;
}
.install-btn:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 4px 16px rgba(37,99,235,0.35);
}
.install-icon{font-size:1.1rem;}
.install-btn::after{
  content: '';display:inline-block;width:6px;height:6px;
  border-radius:50%;background:#4ade80;
  margin-left:2px;animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:0.4;transform:scale(0.5);}
}
@media(max-width:640px){
  .install-text{display:none;}
  .install-btn{padding:6px 10px;border-radius:50%;min-width:38px;}
}

/* Language dropdown */
.lang-dropdown{position:relative;}
.lang-current{
  padding:6px 12px;border-radius:8px;font-size:.85rem;
  background:var(--bg-card);color:var(--text);border:1px solid var(--border);
  transition:all .2s;
}
.lang-current:hover{border-color:var(--border-light);background:var(--bg-hover);}
.lang-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:100;
  background:var(--bg-card);border:1px solid var(--border);border-radius:10px;
  padding:6px;min-width:120px;
  display:none;box-shadow:var(--shadow-lg);
}
.lang-menu.open{display:block;}
.lang-opt{
  display:block;width:100%;text-align:left;
  padding:8px 14px;border-radius:6px;font-size:.85rem;
  color:var(--text-secondary);transition:all .15s;
}
.lang-opt:hover,.lang-opt.active{background:var(--primary-subtle);color:var(--text);}

/* Auth buttons */
.auth-buttons{display:flex;align-items:center;gap:8px;}
.btn-text{
  padding:8px 14px;border-radius:8px;font-size:.85rem;font-weight:500;
  color:var(--text-secondary);transition:all .2s;
}
.btn-text:hover{color:var(--text);background:var(--bg-hover);}
.btn-primary{
  padding:8px 20px;border-radius:10px;font-size:.85rem;font-weight:600;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;transition:all .2s;box-shadow:0 2px 10px var(--accent-glow);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px var(--accent-glow);}
.btn-primary:active{transform:translateY(0);}

.btn-outline{
  padding:8px 20px;border-radius:10px;font-size:.85rem;font-weight:500;
  border:1px solid var(--border);color:var(--text-secondary);transition:all .2s;
}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:rgba(245,158,11,0.05);}

.auth-profile{display:flex;align-items:center;gap:10px;}
.profile-email{font-size:.82rem;color:var(--text-secondary);}
.mobile-menu-btn{display:none;font-size:1.3rem;padding:6px;position:relative;z-index:1002;}

.mobile-menu{
  position:fixed;inset:0;z-index:1001;
  background:var(--bg-card);
  backdrop-filter:blur(12px);
  display:flex;flex-direction:column;
  padding:calc(var(--header-h) + 10px) 24px 24px;
  transform:translateX(100%);
  transition:transform .3s ease;
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu .lang-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px;}
.mobile-menu .lang-opt{padding:10px 14px;border-radius:10px;font-size:.9rem;font-weight:500;border:1px solid var(--border);text-align:center;transition:all .15s;}
.mobile-menu .lang-opt.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.mobile-menu .mobile-auth{display:flex;gap:10px;margin-bottom:20px;}
.mobile-menu .mobile-auth button{flex:1;padding:12px;border-radius:10px;font-size:.95rem;font-weight:600;}
.mobile-menu .mobile-links{display:flex;flex-direction:column;gap:4px;}
.mobile-menu .mobile-links a{padding:12px 14px;border-radius:10px;font-size:.9rem;color:var(--text-secondary);transition:all .15s;}
.mobile-menu .mobile-links a:hover{background:var(--bg-hover);color:var(--text);}

/* ========================================================================
   HERO SECTION
   ======================================================================== */
.hero-section{
  position:relative;min-height:85vh;
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--header-h) + 40px) 20px 60px;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(99,102,241,0.15) 0%,transparent 70%),
             radial-gradient(ellipse 60% 50% at 70% 70%,rgba(245,158,11,0.06) 0%,transparent 60%),
             radial-gradient(ellipse 50% 40% at 30% 60%,rgba(99,102,241,0.08) 0%,transparent 60%);
  pointer-events:none;
}
.hero-content{
  position:relative;z-index:2;
  text-align:center;max-width:680px;width:100%;
  animation:heroFadeIn 1s ease-out;
}
@keyframes heroFadeIn{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}

/* Stats */
.hero-stats{
  display:flex;justify-content:center;gap:30px;
  margin-bottom:24px;
  animation:heroFadeIn 1s ease-out .15s both;
}
.stat-item{text-align:center;}
.stat-num{
  display:block;font-size:1.6rem;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent-light));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1.2;
}
.stat-label{font-size:.75rem;color:var(--text-muted);font-weight:500;letter-spacing:.5px;text-transform:uppercase;}

/* Title */
.hero-title{
  font-size:clamp(2rem,5vw,3.2rem);font-weight:900;line-height:1.15;
  margin-bottom:12px;letter-spacing:-0.02em;
  animation:heroFadeIn 1s ease-out .3s both;
}
.text-accent{
  background:linear-gradient(135deg,var(--accent),var(--accent-light));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-subtitle{
  font-size:1.05rem;color:var(--text-secondary);
  margin-bottom:32px;font-weight:400;
  animation:heroFadeIn 1s ease-out .45s both;
}

/* Search */
.hero-search{
  display:flex;gap:0;max-width:520px;margin:0 auto;
  border-radius:14px;overflow:hidden;
  box-shadow:0 4px 30px rgba(0,0,0,0.3);
  animation:heroFadeIn 1s ease-out .55s both;
}
.hero-input{
  flex:1;padding:16px 20px;font-size:1rem;
  background:var(--bg-card);color:var(--text);
  border:2px solid var(--border);border-right:none;
  border-radius:14px 0 0 14px;outline:none;
  transition:border-color .3s;
}
.hero-input:focus{border-color:var(--accent);}
.hero-input::placeholder{color:var(--text-muted);}
.hero-search-btn{
  padding:16px 28px;font-size:.95rem;font-weight:600;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;border:none;
  border-radius:0 14px 14px 0;
  transition:all .25s;white-space:nowrap;
}
.hero-search-btn:hover{background:linear-gradient(135deg,var(--accent-light),var(--accent));}

.hero-hint{
  margin-top:16px;font-size:.82rem;color:var(--text-muted);
  animation:heroFadeIn 1s ease-out .65s both;
}

/* ---- Hero search results ---- */
.hero-result{display:none;margin-top:16px;text-align:left;animation:heroFadeIn .4s ease-out;}
.hero-result[style*="block"]{display:block;}
.hero-result-inner{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:20px 24px;
  box-shadow:var(--shadow);
}
.hr-top{display:flex;align-items:baseline;gap:12px;margin-bottom:6px;}
.hr-word{font-size:1.4rem;font-weight:700;}
.hr-pinyin{font-size:.85rem;color:var(--text-secondary);}
.hr-phonetic{font-size:.85rem;color:var(--accent);margin-bottom:4px;}
.hr-en{font-size:.8rem;color:var(--text-muted);margin-bottom:12px;}
.hr-actions{display:flex;gap:8px;margin-top:12px;}
.hr-btn{font-size:.8rem;padding:6px 14px;}
.hr-btn.saved{color:var(--accent);border-color:var(--accent);}

/* ========================================================================
   SECTION COMMON
   ======================================================================== */
.section{
  max-width:var(--max-width);margin:0 auto;
  padding:70px 20px;
}
.section-title{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-bottom:40px;
}
.section-title h2{
  font-size:1.6rem;font-weight:800;letter-spacing:-0.01em;
}
.title-icon{font-size:1.3rem;}

/* ========================================================================
   DEMO SECTION
   ======================================================================== */
.demo-section{text-align:center;}
.demo-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-bottom:40px;
}
.demo-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:30px 20px;
  text-align:center;position:relative;
  transition:all .3s;
}
.demo-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--border-light);}
.demo-step{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;font-size:.75rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.demo-icon{font-size:2.2rem;margin-bottom:12px;}
.demo-card h3{font-size:1rem;font-weight:600;margin-bottom:6px;}
.demo-card p{font-size:.85rem;color:var(--text-secondary);}

.demo-live{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:30px;max-width:500px;margin:0 auto;
}
.demo-live-label{font-size:.82rem;color:var(--text-muted);margin-bottom:10px;}
.demo-live-word{font-size:2rem;font-weight:800;margin-bottom:2px;}
.demo-live-trans{font-size:.85rem;color:var(--text-muted);margin-bottom:4px;font-weight:500;}
.demo-live-pinyin{font-size:1rem;color:var(--text-secondary);margin-bottom:10px;}
.demo-live-phonetic{font-size:.85rem;color:var(--accent);margin-bottom:16px;line-height:1.5;}
.demo-live-actions{display:flex;justify-content:center;gap:12px;}

/* ========================================================================
   QUICK SEARCH
   ======================================================================== */
.quick-categories{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:24px;
}
.cat-btn{
  padding:8px 18px;border-radius:20px;font-size:.82rem;font-weight:500;
  background:var(--bg-card);color:var(--text-secondary);border:1px solid var(--border);
  transition:all .2s;
}
.cat-btn:hover,.cat-btn.active{
  border-color:var(--accent);color:var(--accent);
  background:rgba(245,158,11,0.08);
}
.quick-words{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:8px;
}
.quick-word-btn{
  padding:10px 8px;border-radius:10px;font-size:.9rem;font-weight:500;
  background:var(--bg-card);color:var(--text);border:1px solid var(--border);
  transition:all .2s;text-align:center;line-height:1.3;
}
.quick-word-btn:hover{
  border-color:var(--accent);background:rgba(245,158,11,0.05);transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
}
.quick-trans{display:block;font-size:.65rem;color:var(--text-muted);margin-top:2px;font-weight:400;}

.quick-result{
  margin-top:20px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;
}
.quick-result .qr-word{font-size:1.5rem;font-weight:700;}
.quick-result .qr-pinyin{font-size:.9rem;color:var(--text-secondary);margin:4px 0 8px;}
.quick-result .qr-phonetic{font-size:.85rem;color:var(--accent);line-height:1.6;}
.quick-result .qr-actions{display:flex;gap:10px;margin-top:14px;}

/* ========================================================================
   FEATURES SECTION
   ======================================================================== */
.features-section{text-align:center;}
.features-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
}
.feature-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:32px 24px;text-align:center;
  transition:all .3s;
}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--border-light);}
.feature-icon{font-size:2.5rem;margin-bottom:10px;}
.feature-card h3{font-size:1.15rem;font-weight:700;margin-bottom:6px;}
.feature-card>p{font-size:.85rem;color:var(--text-secondary);margin-bottom:16px;}

.feature-preview.small{
  background:var(--bg);border-radius:var(--radius);
  padding:16px;margin-bottom:16px;min-height:60px;
}
.mini-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:10px;padding:12px;max-width:120px;margin:0 auto;
  font-weight:600;font-size:.9rem;
}
.mini-quiz{font-size:.82rem;color:var(--text-secondary);}
.mini-options{display:flex;gap:6px;margin-top:8px;justify-content:center;}
.mini-opt{padding:4px 10px;border-radius:6px;font-size:.78rem;background:var(--bg-card);border:1px solid var(--border);}
.mini-opt.wrong{text-decoration:line-through;opacity:.5;}
.mini-phrase{text-align:center;}
.mini-phrase-cn{font-size:1rem;font-weight:600;}
.mini-phrase-trans{font-size:.7rem;color:var(--text-muted);margin-bottom:2px;}
.mini-phrase-phonetic{font-size:.75rem;color:var(--accent);}
.mini-speak-btn{background:none;border:none;font-size:1rem;cursor:pointer;color:var(--text-muted);transition:all .2s;padding:2px 6px;border-radius:6px;}
.mini-speak-btn:hover{color:var(--accent);background:var(--bg-hover);}
.feature-btn{
  padding:10px 24px;border-radius:10px;font-size:.85rem;font-weight:600;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;transition:all .2s;
}
.feature-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(99,102,241,0.3);}

/* ========================================================================
   AFFILIATE / REFERRAL
   ======================================================================== */
.affiliate-section{padding:30px 20px;}
.affiliate-card{
  max-width:var(--max-width);margin:0 auto;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);
  padding:32px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.affiliate-content{flex:1;}
.affiliate-content .section-title{margin-bottom:12px;}
.affiliate-desc{font-size:.92rem;color:var(--text-secondary);margin-bottom:20px;line-height:1.5;}
.affiliate-steps{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.affi-step{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--text);}
.affi-step-num{
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-light));
  color:#fff;font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.affiliate-btn{font-size:.88rem;padding:10px 24px;}
.affiliate-commission{
  display:flex;align-items:center;gap:16px;
  background:var(--bg);border-radius:var(--radius-lg);padding:20px 24px;
  flex-shrink:0;
}
.comm-item{text-align:center;}
.comm-amount{display:block;font-size:1.5rem;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent-light));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.comm-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;}
.comm-arrow{font-size:1.2rem;color:var(--text-muted);}

/* ========================================================================
   SOCIAL PROOF
   ======================================================================== */
.proof-section{text-align:center;}
.proof-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.proof-item{
  padding:24px;
}
.proof-num{
  display:block;font-size:1.8rem;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent-light));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:4px;
}
.proof-label{font-size:.8rem;color:var(--text-muted);font-weight:500;}

/* ========================================================================
   CTA / PRICING
   ======================================================================== */
.cta-section{text-align:center;}
.cta-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:50px 30px;
}
.cta-card h2{font-size:1.6rem;font-weight:800;margin-bottom:10px;}
.cta-card>p{font-size:.95rem;color:var(--text-secondary);margin-bottom:32px;}

.cta-pricing{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:580px;margin:0 auto;
}
.pricing-card{
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:24px;text-align:center;
  transition:all .3s;position:relative;
}
.pricing-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.pricing-card.featured{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),var(--shadow-lg);
}
.pricing-badge{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  padding:4px 16px;border-radius:20px;font-size:.7rem;font-weight:700;text-transform:uppercase;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;
  letter-spacing:1px;
}
.pricing-name{font-size:.9rem;font-weight:600;margin-bottom:4px;}
.pricing-price{font-size:2.2rem;font-weight:900;line-height:1;}
.pricing-sub{font-size:.78rem;color:var(--text-muted);margin-bottom:16px;}
.pricing-features{text-align:left;margin-bottom:20px;}
.pricing-features li{font-size:.82rem;color:var(--text-secondary);padding:4px 0;}
.pricing-btn{width:100%;padding:12px;border-radius:10px;font-size:.9rem;font-weight:600;}

/* ========================================================================
   MODAL
   ======================================================================== */
.modal-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;
  animation:modalFade .2s;
}
.modal-overlay.open{display:flex;}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
.modal-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:32px;width:100%;max-width:400px;
  position:relative;animation:modalSlide .25s ease-out;
}
@keyframes modalSlide{from{transform:scale(.95)translateY(10px);opacity:0}to{transform:scale(1)translateY(0);opacity:1}}
.modal-close{
  position:absolute;top:14px;right:18px;
  font-size:1.2rem;color:var(--text-muted);
  transition:color .2s;
}
.modal-close:hover{color:var(--text);}
.modal-tabs{display:flex;gap:8px;margin-bottom:24px;}
.modal-tab{
  flex:1;padding:10px;border-radius:10px;font-size:.9rem;font-weight:600;
  color:var(--text-muted);transition:all .2s;
}
.modal-tab.active{background:var(--primary-subtle);color:var(--text);}
.modal-forms{overflow:hidden;}
.modal-form{display:none;animation:fadeIn .2s;}
.modal-form.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:.82rem;font-weight:500;color:var(--text-secondary);margin-bottom:6px;}
.form-group input{
  width:100%;padding:12px 14px;border-radius:10px;font-size:.9rem;
  background:var(--bg);color:var(--text);border:1px solid var(--border);
  outline:none;transition:border-color .2s;
}
.form-group input:focus{border-color:var(--accent);}
.form-btn{width:100%;padding:12px;border-radius:10px;font-size:.9rem;font-weight:600;margin-top:4px;}
.form-error{font-size:.8rem;color:#ef4444;margin-top:10px;min-height:1.2em;}
.code-input-row{display:flex;gap:8px;align-items:stretch;}
.code-input{flex:1;padding:12px 14px;border-radius:10px;font-size:.9rem;background:var(--bg);color:var(--text);border:1px solid var(--border);outline:none;text-align:center;font-family:monospace;letter-spacing:.2em;transition:border-color .2s;}
.code-input:focus{border-color:var(--accent);}
.code-send-btn{padding:12px 16px;border-radius:10px;font-size:.82rem;font-weight:600;background:var(--accent);color:#fff;border:none;cursor:pointer;white-space:nowrap;transition:opacity .2s;}
.code-send-btn:disabled{opacity:.5;cursor:not-allowed;}
.code-msg{font-size:.75rem;margin-top:4px;min-height:1.1em;}

/* ========================================================================
   FOOTER
   ======================================================================== */
.site-footer{
  border-top:1px solid var(--border);
  padding:30px 20px;
}
.footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;justify-content:space-between;align-items:center;}
.footer-links{display:flex;gap:20px;}
.footer-links a{font-size:.8rem;color:var(--text-muted);transition:color .2s;}
.footer-links a:hover{color:var(--text);}
.footer-copy{font-size:.78rem;color:var(--text-muted);}

/* ---- CULTURE / CHENGYU SECTION ---- */
.culture-section{background:var(--bg-card);border-top:1px solid var(--border);scroll-margin-top:var(--header-h);}
.culture-inner{max-width:720px;margin:0 auto;}
.culture-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:32px;margin-bottom:16px;}
.culture-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px;font-size:.85rem;color:var(--text-muted);}
.culture-nav-btn{background:var(--bg-hover);border:none;border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:1.1rem;color:var(--text);display:flex;align-items:center;justify-content:center;transition:all .2s;}
.culture-nav-btn:hover{background:var(--accent);color:#fff;}
.culture-nav-btn:disabled{opacity:.3;cursor:default;}
.culture-head{text-align:center;margin-bottom:20px;}
.culture-head .chengyu-zh{font-size:1.6rem;font-weight:800;color:var(--text);}
.culture-head .chengyu-py{font-size:.9rem;color:var(--brand);margin-top:4px;}
.culture-head .chengyu-en{font-size:.95rem;color:var(--accent);font-weight:600;margin-top:6px;}
.culture-head .chengyu-ph{font-size:.88rem;color:var(--text-muted);margin-top:4px;}
.culture-head .chengyu-lock{display:inline-block;margin-top:8px;padding:3px 14px;border-radius:20px;font-size:.8rem;background:#fef3c7;color:#d97706;}
.culture-head .chengyu-free{display:inline-block;margin-top:8px;padding:3px 14px;border-radius:20px;font-size:.8rem;background:#d1fae5;color:#059669;}
.culture-divider{border:none;border-top:1px solid var(--border);margin:16px 0;}
.culture-label{font-size:.78rem;color:var(--text-muted);font-weight:600;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;}
.culture-text{font-size:.9rem;line-height:1.7;color:var(--text);margin-bottom:12px;}
.culture-text-en{font-size:.88rem;line-height:1.65;color:var(--text-secondary);margin-bottom:12px;}
.culture-example{background:var(--bg-hover);border-radius:10px;padding:12px 16px;margin:8px 0;font-size:.88rem;}
.culture-example-cn{font-weight:600;color:var(--text);margin-bottom:4px;}

/* ---- DISPLAY MODE TOGGLE ---- */
.dm-btn{padding:4px 12px;border-radius:6px;font-size:.78rem;border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;transition:all .15s;}
.dm-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.dm-btn:hover{border-color:var(--accent);}
.culture-example-en{color:var(--text-secondary);font-size:.85rem;}
.culture-related{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.culture-related .tag{background:var(--bg-hover);border-radius:8px;padding:4px 12px;font-size:.82rem;color:var(--text-secondary);}
.culture-dots{display:flex;justify-content:center;gap:6px;margin-top:8px;}
.culture-dots .dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:all .2s;}
.culture-dots .dot.active{background:var(--accent);width:20px;border-radius:4px;}
.culture-unlock{text-align:center;padding:32px;border:2px dashed var(--border);border-radius:var(--radius-xl);margin-top:12px;}
.culture-unlock .lock-icon{font-size:2.5rem;margin-bottom:12px;}
.culture-unlock p{font-size:.9rem;color:var(--text-secondary);margin-bottom:16px;}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media(max-width:860px){
  .header-nav .auth-buttons,.header-nav .lang-dropdown{display:none;}
  .mobile-menu-btn{display:block;}
  .hero-title{font-size:1.8rem;}
  .demo-grid{grid-template-columns:1fr;}
  .features-grid{grid-template-columns:1fr;}
  .proof-grid{grid-template-columns:repeat(2,1fr);}
  .cta-pricing{grid-template-columns:1fr;max-width:340px;}
  .affiliate-card{flex-direction:column;text-align:center;}
  .affiliate-commission{width:100%;justify-content:center;}
  .footer-inner{flex-direction:column;gap:12px;}
}


/* ====== Chengyu card images ====== */
.chengyu-img-wrap {
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.chengyu-img {
  width: 100%;
  max-height: 500px;
  object-fit: contain;
  display: block;
  background: var(--bg-card);
}

/* ====== Premium culture section styles (added by add_soul) ====== */
.culture-section-premium {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  scroll-margin-top: var(--header-h);
}
.culture-subtitle-premium {
  font-size: .92rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.culture-card-premium {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  margin-bottom: 16px;
}
.culture-head-premium {
  text-align: center;
  margin-bottom: 20px;
}
.culture-head-premium .chengyu-zh {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
}
.culture-head-premium .chengyu-py {
  font-size: .9rem;
  color: var(--brand);
  margin-top: 4px;
}
.culture-head-premium .chengyu-en {
  font-size: .95rem;
  color: var(--accent);
  font-weight: 600;
  margin-top: 6px;
}

/* ====== Sound wave animation for TTS button ====== */
.sound-wave {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 16px;
}
.sound-wave span {
  display: inline-block;
  width: 3px;
  height: 100%;
  background: currentColor;
  border-radius: 2px;
  animation: wave 1s ease-in-out infinite;
}
.sound-wave span:nth-child(2) { animation-delay: 0.1s; }
.sound-wave span:nth-child(3) { animation-delay: 0.2s; }
.sound-wave span:nth-child(4) { animation-delay: 0.3s; }
.sound-wave span:nth-child(5) { animation-delay: 0.4s; }
@keyframes wave {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

@media(max-width:640px){
  .hero-section{min-height:auto;padding-top:calc(var(--header-h) + 30px);padding-bottom:40px;}
  .hero-stats{gap:20px;}
  .hero-search{flex-direction:column;border-radius:14px;}
  .hero-input{border-radius:14px 14px 0 0;border-right:2px solid var(--border);border-bottom:none;}
  .hero-search-btn{border-radius:0 0 14px 14px;padding:14px;}
  .section{padding:40px 16px;}
}

/* ---- RESULT OVERLAY ---- */
.result-overlay{position:fixed;inset:0;z-index:1500;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px;}
.result-overlay.open{display:flex;}
.result-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:32px;width:100%;max-width:520px;max-height:80vh;overflow-y:auto;position:relative;}
.result-close{position:absolute;top:14px;right:18px;font-size:1.2rem;color:var(--text-muted);}
.result-card h3{font-size:1.2rem;font-weight:700;margin-bottom:16px;}
.result-card .word-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px;border-radius:10px;border:1px solid var(--border);margin-bottom:8px;transition:all .15s;}
.result-card .word-row:hover{background:var(--bg-hover);}
.speak-mini{background:none;border:none;font-size:.9rem;cursor:pointer;color:var(--text-muted);padding:2px 6px;border-radius:6px;flex-shrink:0;transition:all .15s;}
.speak-mini:hover{color:var(--accent);background:var(--bg-hover);}
.result-card .word-cn{font-weight:600;}
.result-card .word-en{font-size:.82rem;color:var(--text-secondary);font-weight:500;}
.result-card .word-phonetic{font-size:.78rem;color:var(--accent);}

/* ---- FAVORITES ---- */
.fav-card{max-width:560px;}
.fav-list{display:flex;flex-direction:column;gap:8px;}
.fav-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;border-radius:12px;border:1px solid var(--border);
  background:var(--bg-card);transition:all .15s;cursor:pointer;
}
.fav-item:hover{background:var(--bg-hover);border-color:var(--accent);transform:translateX(4px);}
.fav-main{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0;}
.fav-main .word-cn{font-weight:600;font-size:.95rem;}
.fav-main .word-en{font-size:.82rem;color:var(--text-secondary);}
.fav-main .word-phonetic{font-size:.78rem;}
.fav-actions{display:flex;gap:6px;flex-shrink:0;margin-left:8px;}
.fav-action-btn{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--border);
  background:var(--bg);font-size:.85rem;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;
}
.fav-action-btn:hover{background:var(--bg-hover);border-color:var(--accent);}
.fav-del:hover{color:#ef4444;border-color:#ef4444;}

/* ---- PROFILE ---- */
.profile-card{text-align:center;padding:10px 0;}
.profile-avatar{
  width:56px;height:56px;border-radius:50%;margin:0 auto 8px;
  background:var(--primary-subtle);color:var(--accent);
  font-size:1.4rem;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px;}
.ps-item{background:var(--bg);border-radius:12px;padding:12px 8px;border:1px solid var(--border);}
.ps-val{display:block;font-size:1.1rem;font-weight:700;color:var(--accent);}
.ps-lbl{display:block;font-size:.7rem;color:var(--text-muted);margin-top:4px;}

/* ---- SPEAK MINI ---- */

/* ---- CONFETTI ---- */
.confetti-container{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden;}
.confetti-piece{position:absolute;animation:confettiFall 3s ease-in forwards;}
@keyframes confettiFall{
  0%{opacity:1;transform:translateY(-10px) rotate(0deg) scale(1)}
  50%{opacity:1}
  80%{opacity:.7}
  100%{opacity:0;transform:translateY(100vh) rotate(720deg) scale(.3)}
}

/* ---- UTILITIES ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* ---- Mobile responsive ---- */
@media (max-width:768px){
  .site-header{height:auto;padding:8px 0;}
  .header-inner{flex-wrap:wrap;gap:8px;padding:0 12px;}
  .header-nav{gap:6px;}
  .hero-section{padding:100px 16px 40px;}
  .hero-title{font-size:1.6rem;}
  .hero-sub{font-size:0.95rem;}
  .search-box{flex-direction:column;gap:10px;}
  .search-box input{width:100%;font-size:16px;}
  .search-box button{width:100%;}
  .main-grid{grid-template-columns:1fr!important;gap:12px!important;padding:0 12px!important;}
  .sidebar,.right-col{display:none;}
  .content{grid-column:1!important;}
  .quick-words{grid-template-columns:repeat(2,1fr);}
  .auth-modal-content{width:92%;padding:24px 20px;margin:60px auto;}
  .footer-inner{flex-direction:column;gap:12px;padding:20px 12px;}
  .footer-links{flex-wrap:wrap;gap:8px;}
  .daily-sentence{padding:16px;}
  .results-list .word-card{padding:12px;}
  .locked-overlay{padding:20px;font-size:0.9rem;}
  .pay-section{padding:24px 12px;}
  .pay-cards{grid-template-columns:1fr;}
  .srs-panel{padding:16px;margin:12px;}
  .unlock-modal .modal-box{width:92%;padding:24px 16px;}
  .features-grid{grid-template-columns:1fr;}
  .auth-buttons .btn-text{font-size:14px;padding:6px 10px;}
  .auth-buttons .header-signup{font-size:14px;padding:6px 14px;}
}

/* course button */
.course-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 14px;border-radius:8px;font-size:.85rem;font-weight:600;
  background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;
  border:1px solid rgba(102,126,234,0.4);cursor:pointer;
  transition:all .3s ease;white-space:nowrap;font-family:inherit;
}
.course-btn:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 4px 16px rgba(102,126,234,0.3);
}
.course-icon{font-size:1rem;}
.course-text{font-size:0.85rem;}
@media(max-width:640px){
  .course-text{display:none;}
  .course-btn{padding:6px 10px;}
}