/* ════════════════════════════════════════════
   KANJI MASTER — style.css
   DARK: Night Neon  |  LIGHT: Clean White
   Font: Be Vietnam Pro (hỗ trợ tiếng Việt đầy đủ)
   ════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&family=Noto+Serif+JP:wght@400;700;900&display=swap');

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

/* ══════════════════════
   DARK THEME (default)
══════════════════════ */
:root {
  --bg:#0b0b1e; --bg2:#12122e;
  --nav-bg:rgba(11,11,30,.92); --nav-border:rgba(255,107,157,.18);
  --surface:rgba(255,255,255,.05); --surface2:rgba(255,255,255,.03);
  --surface-hover:rgba(255,255,255,.09); --border:rgba(255,255,255,.1);
  --border-accent:rgba(255,107,157,.35); --overlay:rgba(11,11,30,.95);
  --pink:#ff6b9d; --pink-dark:#c94b8b;
  --purple:#8b5cf6; --gold:#ffd700; --green:#22c55e; --red:#ef4444; --orange:#f97316;
  --text:#f0e6ef; --text-muted:rgba(240,230,239,.55); --text-dim:rgba(240,230,239,.3);
  --card-shadow:0 4px 24px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.04);
  --card-hover:0 12px 40px rgba(0,0,0,.6),0 0 24px rgba(255,107,157,.1);
  --btn-shadow:0 8px 28px rgba(255,107,157,.38);
  --hero-bg:radial-gradient(ellipse 90% 55% at 50% 0%,rgba(255,107,157,.2),transparent 65%);
  --hero-grad:linear-gradient(135deg,#fff 0%,#ffb3d1 45%,#ffd700 100%);
  --levels-bg:rgba(0,0,0,.3);
  --input-bg:rgba(255,255,255,.07); --input-border:rgba(255,255,255,.14);
  --btn-ghost-bg:rgba(255,255,255,.07); --btn-ghost-c:var(--text);
  --btn-sec-b:rgba(255,255,255,.22); --btn-sec-c:var(--text);
  --nav-btn-c:rgba(240,230,239,.6);
  --stat-bg:rgba(255,255,255,.05);
  --kc-kanji-c:#ffffff; --kc-kanji-fx:drop-shadow(0 0 30px rgba(255,107,157,.4));
  --kc-card-bg:rgba(255,255,255,.04); --kc-card-bd:rgba(255,107,157,.22);
  --kun-bg:rgba(139,92,246,.12); --kun-bd:rgba(139,92,246,.25); --kun-c:#c4b5fd;
  --on-bg:rgba(6,182,212,.09); --on-bd:rgba(6,182,212,.22); --on-c:#67e8f9;
  --hanviet-c:#ffd700;
  --meaning-bg:rgba(255,215,0,.07); --meaning-bd:rgba(255,215,0,.18); --meaning-c:var(--text);
  --example-bd:rgba(255,107,157,.3); --example-vn:#fbbf24; --example-bg:var(--surface);
  --radical-bg:var(--surface); --radical-c:rgba(255,255,255,.5);
  --badge-lv-bg:rgba(255,107,157,.16); --badge-lv-c:var(--pink);
  --badge-st-bg:rgba(255,255,255,.08); --badge-st-c:rgba(255,255,255,.65);
  --auth-bg:rgba(255,255,255,.05); --auth-bd:rgba(255,107,157,.2); --tab-bg:rgba(0,0,0,.4);
  --settings-bg:rgba(14,14,36,.97); --settings-hover:rgba(255,255,255,.06);
  --toggle-off:rgba(255,255,255,.18);
  --ad-bg:linear-gradient(135deg,rgba(255,107,157,.07),rgba(139,92,246,.07));
  --ad-bd:rgba(255,107,157,.22); --ad-c:rgba(255,179,204,.6);
  --progress:linear-gradient(90deg,var(--pink),var(--purple));
  --divider:1px solid rgba(255,255,255,.08);
  --pill-active-bg:linear-gradient(135deg,var(--pink),var(--pink-dark));
  --pill-active-c:#fff;
  --pill-mastered-bg:rgba(139,92,246,.15); --pill-mastered-bd:rgba(139,92,246,.3); --pill-mastered-c:#c4b5fd;
  --select-active-bg:rgba(255,107,157,.15); --select-active-bd:var(--pink); --select-active-c:var(--pink);
  --font:'Be Vietnam Pro',sans-serif; --font-jp:'Noto Serif JP',serif;
  --radius:16px; --radius-sm:10px; --nav-h:64px;
}

/* ════════════════════════════════════════════
   LIGHT THEME — Clean White (Mazii-style)
   Nền trắng, chữ tối, tương phản rõ
════════════════════════════════════════════ */
body.theme-light {
  --bg:#ffffff; --bg2:#f4f6f8;
  --nav-bg:#ffffff; --nav-border:#e2e8f0;
  --surface:#ffffff; --surface2:#f8fafc;
  --surface-hover:#f1f5f9; --border:#e2e8f0;
  --border-accent:#e91e63; --overlay:rgba(255,255,255,.97);
  --pink:#e91e63; --pink-dark:#c2185b;
  --purple:#7c3aed; --gold:#b45309; --green:#16a34a; --red:#dc2626; --orange:#ea580c;
  --text:#1e293b; --text-muted:#64748b; --text-dim:#94a3b8;
  --card-shadow:0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.05);
  --card-hover:0 4px 8px rgba(0,0,0,.08),0 12px 28px rgba(0,0,0,.1);
  --btn-shadow:0 4px 14px rgba(233,30,99,.3);
  --hero-bg:linear-gradient(160deg,#fff 0%,#fce4ec 50%,#ede9fe 100%);
  --hero-grad:linear-gradient(135deg,#1e293b 0%,#e91e63 55%,#b45309 100%);
  --levels-bg:#f8fafc;
  --input-bg:#ffffff; --input-border:#cbd5e1;
  --btn-ghost-bg:#f8fafc; --btn-ghost-c:#374151;
  --btn-sec-b:#cbd5e1; --btn-sec-c:#374151;
  --nav-btn-c:#475569;
  --stat-bg:#ffffff;
  --kc-kanji-c:#1e293b; --kc-kanji-fx:drop-shadow(0 2px 6px rgba(0,0,0,.15));
  --kc-card-bg:#ffffff; --kc-card-bd:#e2e8f0;
  /* Kunyomi: xanh dương như mazii */
  --kun-bg:#eff6ff; --kun-bd:#bfdbfe; --kun-c:#1d4ed8;
  /* Onyomi: đỏ/hồng như mazii */
  --on-bg:#fff1f2; --on-bd:#fecdd3; --on-c:#be123c;
  --hanviet-c:#92400e;
  --meaning-bg:#fefce8; --meaning-bd:#fde68a; --meaning-c:#1e293b;
  --example-bd:#e91e63; --example-vn:#9d174d; --example-bg:#fff5f8;
  --radical-bg:#f8fafc; --radical-c:#374151;
  --badge-lv-bg:#fce7f3; --badge-lv-c:#9d174d;
  --badge-st-bg:#f1f5f9; --badge-st-c:#475569;
  --auth-bg:#ffffff; --auth-bd:#e2e8f0; --tab-bg:#f1f5f9;
  --settings-bg:#ffffff; --settings-hover:#f8fafc;
  --toggle-off:#cbd5e1;
  --ad-bg:linear-gradient(135deg,#fce7f3,#ede9fe);
  --ad-bd:#f9a8d4; --ad-c:#9d174d;
  --progress:linear-gradient(90deg,var(--pink),var(--purple));
  --divider:1px solid #e2e8f0;
  /* FIX: active pills dùng màu đậm, chữ trắng */
  --pill-active-bg:linear-gradient(135deg,#e91e63,#c2185b);
  --pill-active-c:#ffffff;
  --pill-mastered-bg:#eff6ff; --pill-mastered-bd:#bfdbfe; --pill-mastered-c:#1d4ed8;
  --select-active-bg:#fce7f3; --select-active-bd:#e91e63; --select-active-c:#9d174d;
}

/* ════════════════
   BASE
════════════════ */
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--font); min-height:100vh; overflow-x:hidden;
  transition:background-color .35s,color .25s;
}
a { text-decoration:none; color:inherit; }
button { font-family:var(--font); cursor:pointer; }
input,textarea { font-family:var(--font); }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--pink); border-radius:4px; }

/* ════════════════
   ANIMATIONS
════════════════ */
@keyframes sakuraFall {
  0% { transform:translateY(-30px) rotate(0deg) translateX(0); opacity:0; }
  10% { opacity:.7; } 90% { opacity:.35; }
  100% { transform:translateY(110vh) rotate(720deg) translateX(60px); opacity:0; }
}
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin { to { transform:rotate(360deg); } }
.fade-up { animation:fadeUp .35s ease both; }

/* ════════════════
   SAKURA PETALS
════════════════ */
.sakura-wrap { position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;transition:opacity .4s; }
.sakura-wrap.sakura-off { opacity:0; }
.petal { position:absolute;top:-30px;font-size:14px;opacity:.65;animation:sakuraFall linear infinite; }
body:not(.theme-light) .petal { color:#ff9ac0; }
body.theme-light .petal { color:#f48fb1; }

/* ════════════════
   NAVBAR
════════════════ */
#navbar {
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--nav-h); background:var(--nav-bg);
  border-bottom:1px solid var(--nav-border);
  display:flex;align-items:center;justify-content:space-between;padding:0 24px;
  transition:background .3s,border-color .3s;
}
body:not(.theme-light) #navbar { backdrop-filter:blur(22px); }
body.theme-light #navbar { box-shadow:0 1px 0 #e2e8f0; }

.nav-brand { display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;flex-shrink:0; }
.nav-brand-title { font-weight:900;font-size:17px;letter-spacing:-.4px;background:var(--hero-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
.nav-brand-sub { font-size:9px;color:var(--text-dim);letter-spacing:2px;margin-top:-2px;text-transform:uppercase; }
.nav-links { display:flex;align-items:center;gap:4px; }
.nav-btn { background:transparent;color:var(--nav-btn-c);border:1px solid transparent;padding:7px 13px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;transition:all .2s;white-space:nowrap; }
.nav-btn:hover,.nav-btn.active { background:var(--badge-lv-bg);color:var(--pink);border-color:var(--border-accent); }
.nav-avatar { width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--purple));display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0; }
.btn-login { background:linear-gradient(135deg,var(--pink),var(--pink-dark));color:#fff;border:none;padding:8px 18px;border-radius:var(--radius-sm);font-size:13px;font-weight:700;transition:all .2s;white-space:nowrap;box-shadow:var(--btn-shadow); }
.btn-login:hover { transform:translateY(-1px);filter:brightness(1.08); }

.nav-settings-wrap { position:relative; }
.nav-settings-btn { width:34px;height:34px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--text-muted);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0; }
.nav-settings-btn:hover { background:var(--surface-hover);color:var(--pink); }
body.theme-light .nav-settings-btn { background:#f8fafc; }
.settings-dropdown { position:absolute;top:calc(100% + 10px);right:0;background:var(--settings-bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px;min-width:230px;z-index:300;animation:fadeUp .2s ease both;display:none; }
body:not(.theme-light) .settings-dropdown { backdrop-filter:blur(24px);box-shadow:0 8px 32px rgba(0,0,0,.5); }
body.theme-light .settings-dropdown { box-shadow:0 4px 6px rgba(0,0,0,.07),0 10px 24px rgba(0,0,0,.1); }
.settings-dropdown.open { display:block; }
.settings-dropdown-title { font-size:10px;font-weight:700;letter-spacing:2px;color:var(--text-dim);text-transform:uppercase;margin-bottom:8px;padding:0 2px; }
.settings-row { display:flex;align-items:center;justify-content:space-between;padding:9px 6px;border-radius:8px;cursor:pointer;transition:background .15s; }
.settings-row:hover { background:var(--settings-hover); }
.settings-row-label { font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px; }
.toggle { width:38px;height:21px;border-radius:11px;background:var(--toggle-off);position:relative;transition:background .2s;flex-shrink:0; }
.toggle.on { background:var(--pink); }
.toggle::after { content:'';position:absolute;width:15px;height:15px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .2s; }
.toggle.on::after { transform:translateX(17px); }
.settings-divider { height:1px;background:var(--border);margin:8px 0; }
.notif-status { font-size:11px;color:var(--text-dim);padding:4px 2px;text-align:center; }

/* Hamburger */
.nav-hamburger { display:none;flex-direction:column;gap:5px;width:36px;height:36px;padding:8px;background:transparent;border:none;cursor:pointer;border-radius:8px;flex-shrink:0; }
.nav-hamburger span { display:block;height:2px;background:var(--text);border-radius:2px;transition:all .25s; }
.nav-hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
.mobile-menu { display:none;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;background:var(--overlay);z-index:9999;flex-direction:column;padding:20px;gap:6px;overflow-y:auto;animation:fadeUp .25s ease both; }
body:not(.theme-light) .mobile-menu { backdrop-filter:blur(20px); }
.mobile-menu.open { display:flex; }
.mobile-menu .nav-btn { width:100%;text-align:left;padding:13px 16px;font-size:15px;border:1px solid var(--border);border-radius:var(--radius-sm); }
.mobile-menu-divider { height:1px;background:var(--border);margin:6px 0; }
.mobile-menu-user { display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface2);border-radius:var(--radius-sm);margin-bottom:6px;border:1px solid var(--border); }
.mobile-settings-title { font-size:10px;color:var(--text-dim);letter-spacing:2px;font-weight:700;text-transform:uppercase;padding:8px 14px 4px; }

/* ════════════════
   SHELL
════════════════ */
#app { position:relative;z-index:1;padding-top:var(--nav-h);min-height:100vh; }
.container { max-width:1100px;margin:0 auto;padding:0 24px; }
.container-sm { max-width:820px;margin:0 auto;padding:0 24px; }
.container-xs { max-width:620px;margin:0 auto;padding:0 24px; }
.grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.grid-5 { display:grid;grid-template-columns:repeat(5,1fr);gap:16px; }
.grid-auto { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px; }
.text-center { text-align:center; } .text-muted { color:var(--text-muted); }
.mb-4 { margin-bottom:16px; } .mb-6 { margin-bottom:24px; } .mt-4 { margin-top:16px; }
.spinner { width:40px;height:40px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--pink);animation:spin .8s linear infinite;margin:40px auto; }
.alert { padding:12px 14px;border-radius:var(--radius-sm);font-size:13px;margin-bottom:14px;font-weight:500; }
.alert-error { background:#fef2f2;border:1px solid #fecaca;color:#991b1b; }
.alert-success { background:#f0fdf4;border:1px solid #bbf7d0;color:#166534; }
body:not(.theme-light) .alert-error { background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);color:#fca5a5; }
body:not(.theme-light) .alert-success { background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.3);color:#86efac; }

/* ════════════════
   CARDS
════════════════ */
.card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--card-shadow); }
body.theme-light .card { background:#fff; }
.card-accent-pink { border-left:4px solid var(--pink); }
.card-accent-purple { border-left:4px solid var(--purple); }
body:not(.theme-light) .card-accent-pink { background:rgba(255,107,157,.04); }
body:not(.theme-light) .card-accent-purple { background:rgba(139,92,246,.04); }
body.theme-light .card-accent-pink { background:#fff; }
body.theme-light .card-accent-purple { background:#fff; }

/* ════════════════
   BUTTONS
════════════════ */
.btn { display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 24px;border-radius:var(--radius-sm);font-size:14px;font-weight:700;border:none;transition:all .2s;cursor:pointer;white-space:nowrap; }
.btn:disabled { opacity:.45;cursor:not-allowed;transform:none!important; }
.btn-primary { background:linear-gradient(135deg,var(--pink),var(--pink-dark));color:#fff;box-shadow:var(--btn-shadow); }
.btn-primary:hover { transform:translateY(-2px);filter:brightness(1.08); }
.btn-secondary { background:transparent;color:var(--btn-sec-c);border:1.5px solid var(--btn-sec-b); }
.btn-secondary:hover { border-color:var(--pink);color:var(--pink); }
body.theme-light .btn-secondary { background:#fff; }
.btn-purple { background:linear-gradient(135deg,var(--purple),#5b21b6);color:#fff;box-shadow:0 4px 14px rgba(124,58,237,.3); }
.btn-purple:hover { transform:translateY(-2px);filter:brightness(1.08); }
.btn-green { background:linear-gradient(135deg,var(--green),#15803d);color:#fff; }
.btn-ghost { background:var(--btn-ghost-bg);color:var(--btn-ghost-c);border:1px solid var(--border); }
.btn-ghost:hover { background:var(--surface-hover); }
body.theme-light .btn-ghost { background:#f8fafc;border-color:#e2e8f0;color:#374151; }
body.theme-light .btn-ghost:hover { background:#f1f5f9; }

/* ════════════════
   INPUTS
════════════════ */
.input-group { margin-bottom:14px; }
.input-label { display:block;font-size:13px;font-weight:600;color:var(--text-muted);margin-bottom:5px; }
.input { width:100%;background:var(--input-bg);border:1.5px solid var(--input-border);color:var(--text);padding:11px 14px;border-radius:var(--radius-sm);font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s; }
.input:focus { border-color:var(--pink); }
body:not(.theme-light) .input:focus { box-shadow:0 0 0 3px rgba(255,107,157,.12); }
body.theme-light .input:focus { box-shadow:0 0 0 3px rgba(233,30,99,.1); }
body.theme-light .input::placeholder { color:#94a3b8; }

/* ════════════════
   PROGRESS BAR
════════════════ */
.progress-bar { background:var(--border);border-radius:8px;height:7px;overflow:hidden; }
.progress-fill { height:100%;border-radius:8px;background:var(--progress);transition:width .5s ease; }

/* ════════════════
   AD BANNERS
════════════════ */

/* ════════════════
   HERO
════════════════ */
.hero { min-height:calc(100vh - var(--nav-h));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px;background:var(--hero-bg);position:relative; }
.hero>* { position:relative;z-index:1; }
.hero-icon { font-size:68px;margin-bottom:18px; }
body:not(.theme-light) .hero-icon { filter:drop-shadow(0 0 30px rgba(255,107,157,.5)); }
body.theme-light .hero-icon { filter:drop-shadow(0 4px 8px rgba(0,0,0,.1)); }
.hero-eyebrow { font-size:12px;color:var(--pink);letter-spacing:5px;font-weight:700;margin-bottom:14px;text-transform:uppercase; }
.hero-title { font-size:clamp(38px,7vw,76px);font-weight:900;line-height:1.1;margin-bottom:22px;background:var(--hero-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-2px; }
body.theme-light .hero-title { letter-spacing:-1px; }
.hero-desc { font-size:17px;color:var(--text-muted);max-width:560px;line-height:1.85;margin-bottom:38px; }
.hero-ctas { display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:56px; }
.hero-stats { display:flex;gap:44px;flex-wrap:wrap;justify-content:center; }
.stat-num { font-size:26px;font-weight:900;color:var(--gold); }
.stat-label { font-size:11px;color:var(--text-dim);margin-top:4px; }

/* ════════════════
   LEVELS
════════════════ */
.levels-section { padding:72px 24px;background:var(--levels-bg); }
body.theme-light .levels-section { background:#f8fafc;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0; }
.section-eyebrow { font-size:11px;color:var(--pink);letter-spacing:4px;margin-bottom:10px;font-weight:700; }
.section-title { font-size:36px;font-weight:900;color:var(--text); }
.level-card { background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:24px 14px;text-align:center;cursor:pointer;transition:all .28s;position:relative;overflow:hidden;box-shadow:var(--card-shadow); }
body:not(.theme-light) .level-card { background:rgba(255,255,255,.04); }
body.theme-light .level-card { background:#fff;border-color:#e2e8f0; }
.level-card:hover { transform:translateY(-6px);box-shadow:var(--card-hover); }
body.theme-light .level-card:hover { border-color:var(--pink); }
.level-card .level-count { position:absolute;top:10px;right:10px;background:var(--badge-lv-bg);color:var(--badge-lv-c);font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px; }

/* ════════════════
   FEATURES
════════════════ */
.features-section { padding:72px 24px; }
body.theme-light .features-section { background:#fff; }
.feature-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--card-shadow);transition:all .2s; }
body.theme-light .feature-card { background:#fff; }
.feature-card:hover { box-shadow:var(--card-hover);transform:translateY(-3px); }

/* ════════════════
   AUTH
════════════════ */
.auth-wrap { min-height:calc(100vh - var(--nav-h));display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--hero-bg); }
.auth-inner { display:flex;gap:56px;align-items:center;max-width:880px;width:100%;flex-wrap:wrap;justify-content:center; }
.auth-deco { text-align:center;flex:1;min-width:200px; }
.auth-deco-icon { font-size:76px;margin-bottom:18px; }
body:not(.theme-light) .auth-deco-icon { filter:drop-shadow(0 0 36px rgba(255,107,157,.5)); }
body.theme-light .auth-deco-icon { filter:drop-shadow(0 4px 10px rgba(0,0,0,.12)); }
.auth-form-wrap { background:var(--auth-bg);border:1px solid var(--auth-bd);border-radius:calc(var(--radius) + 4px);padding:36px;flex:1;min-width:300px;max-width:420px;box-shadow:var(--card-shadow); }
body:not(.theme-light) .auth-form-wrap { backdrop-filter:blur(20px); }
body.theme-light .auth-form-wrap { box-shadow:0 4px 6px rgba(0,0,0,.05),0 10px 30px rgba(0,0,0,.1); }
.auth-tabs { display:flex;margin-bottom:24px;background:var(--tab-bg);border-radius:var(--radius-sm);padding:4px; }
.auth-tab { flex:1;padding:9px;border-radius:calc(var(--radius-sm) - 2px);border:none;background:transparent;color:var(--text-muted);font-weight:700;font-size:13px;transition:all .2s; }
.auth-tab.active { background:linear-gradient(135deg,var(--pink),var(--pink-dark));color:#fff; }

/* ════════════════
   DASHBOARD
════════════════ */
.dashboard-grid { display:grid;grid-template-columns:1fr 310px;gap:22px;align-items:start; }
.stat-cards { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px; }
.stat-card { background:var(--stat-bg);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--card-shadow);transition:all .2s; }
body.theme-light .stat-card { background:#fff; }
.stat-card:hover { box-shadow:var(--card-hover); }
.stat-card-icon { font-size:22px;margin-bottom:7px; }
.stat-card-value { font-size:28px;font-weight:900; }
.stat-card-label { font-size:12px;color:var(--text-muted);margin-top:2px; }
.today-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px; }
.mastery-row { display:flex;gap:10px;margin-top:14px;flex-wrap:wrap; }
.mastery-box { flex:1;min-width:90px;border-radius:var(--radius);padding:14px;text-align:center; }
.mastery-val { font-size:24px;font-weight:900; }
.mastery-lbl { font-size:11px;color:var(--text-muted);margin-top:3px; }

/* ════════════════
   LESSON SETUP
════════════════ */
.level-select-grid { display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px; }
.level-select-card { background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);padding:14px 20px;text-align:center;cursor:pointer;transition:all .2s;min-width:110px;box-shadow:var(--card-shadow); }
body.theme-light .level-select-card { background:#fff;border-color:#e2e8f0; }
/* FIX: active state không bị trùng màu */
.level-select-card.active { border-color:var(--select-active-bd);background:var(--select-active-bg); }
.level-select-card.active .level-n-label { color:var(--select-active-c);font-weight:800; }
.level-select-card.active .level-char-label { color:var(--select-active-c); }

.wpd-grid { display:flex;gap:10px;margin-bottom:28px; }
.wpd-card { background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-sm);padding:14px 22px;text-align:center;cursor:pointer;transition:all .2s;box-shadow:var(--card-shadow); }
body.theme-light .wpd-card { background:#fff;border-color:#e2e8f0; }
.wpd-card.active { background:var(--select-active-bg);border-color:var(--select-active-bd); }
.wpd-num { font-size:24px;font-weight:900;color:var(--text); }
.wpd-card.active .wpd-num { color:var(--select-active-c); }
.wpd-lbl { font-size:11px;color:var(--text-muted);margin-top:3px; }

/* ════════════════
   LESSON VIEW — Word Pills
════════════════ */
.word-pills { display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px; }
.word-pill { background:var(--surface);border:1px solid var(--border);color:var(--text);padding:7px 13px;border-radius:var(--radius-sm);font-family:var(--font-jp);font-size:17px;font-weight:700;cursor:pointer;transition:all .2s; }
body.theme-light .word-pill { background:#fff;border-color:#e2e8f0;color:#1e293b; }
.word-pill:hover { border-color:var(--pink);color:var(--pink); }
/* FIX ACTIVE: dùng var để có thể override per-theme */
.word-pill.active { background:var(--pill-active-bg);border-color:transparent;color:var(--pill-active-c) !important; }
.word-pill.mastered { background:var(--pill-mastered-bg);border-color:var(--pill-mastered-bd);color:var(--pill-mastered-c) !important; }

.lesson-grid { display:grid;grid-template-columns:1fr 180px;max-width:1100px;margin:0 auto; }
.lesson-main { padding:22px; }
.lesson-sidebar { padding:22px 14px 22px 0;display:flex;flex-direction:column;gap:12px; }
.kc-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.lesson-nav { display:flex;justify-content:space-between;margin-top:18px;gap:10px; }

/* ════════════════════════════════════════════
   KANJI CARD — thiết kế sạch theo mazii style
════════════════════════════════════════════ */
.kc-card { background:var(--kc-card-bg);border:1px solid var(--kc-card-bd);border-radius:calc(var(--radius) + 4px);padding:28px;box-shadow:var(--card-shadow); }
body.theme-light .kc-card { background:#fff;border-color:#e2e8f0;box-shadow:0 2px 4px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06); }

/* 1. Kanji to */
.kc-kanji-wrap { text-align:center;padding:24px 0 12px;border-radius:var(--radius);margin-bottom:8px; }
body:not(.theme-light) .kc-kanji-wrap { background:rgba(255,255,255,.02); }
body.theme-light .kc-kanji-wrap { background:linear-gradient(180deg,#fce4ec 0%,#fff 50%); border-radius:12px; }
.kc-kanji-char { font-family:'Noto Serif JP',serif;font-size:120px;line-height:1;font-weight:900;color:var(--kc-kanji-c);filter:var(--kc-kanji-fx);user-select:none; }

/* 2. Âm Hán Việt */
.kc-hanviet { text-align:center;font-size:20px;font-weight:700;color:var(--hanviet-c);letter-spacing:4px;text-transform:uppercase;margin-bottom:10px; }
body.theme-light .kc-hanviet { color:#92400e;font-family:'Be Vietnam Pro',sans-serif; }

/* 3+4. Meta badges */
.kc-meta-row { display:flex;justify-content:center;gap:8px;margin-bottom:16px;flex-wrap:wrap; }
.kc-meta-chip { display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700; }
.kc-stroke { background:var(--badge-st-bg);border:1px solid var(--border);color:var(--badge-st-c); }
.kc-level-badge { background:var(--badge-lv-bg);border:1px solid var(--badge-lv-c);color:var(--badge-lv-c); }

/* Divider */
.kc-divider { border:none;border-top:var(--divider);margin:14px 0; }

/* 5+6. Reading rows — mazii style: xanh=kun, đỏ=on */
.kc-reading-row { display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:7px;border:1px solid var(--border); }
.kc-kun-row { background:var(--kun-bg);border-color:var(--kun-bd); }
.kc-on-row  { background:var(--on-bg); border-color:var(--on-bd); }
.kc-reading-label { font-size:10px;font-weight:700;letter-spacing:1px;min-width:60px;color:var(--text-dim);font-family:'Noto Serif JP',serif;text-transform:uppercase; }
body.theme-light .kc-kun-row .kc-reading-label { color:#1d4ed8; }
body.theme-light .kc-on-row  .kc-reading-label { color:#be123c; }
.kc-reading-val { font-family:'Noto Serif JP',serif;font-size:22px;font-weight:700;flex:1;letter-spacing:2px; }
.kc-kun-val { color:var(--kun-c); }
.kc-on-val  { color:var(--on-c); }
.kun-dot { opacity:.4;margin:0 1px; }

/* 7. Bộ thủ */
.kc-radical-row { display:flex;align-items:center;gap:12px;padding:9px 14px;border-radius:var(--radius-sm);margin-bottom:10px;border:1px solid var(--border); }
body.theme-light .kc-radical-row { background:#f8fafc;border-color:#e2e8f0; }
body:not(.theme-light) .kc-radical-row { background:var(--surface); }
.kc-radical-label { font-size:11px;color:var(--text-dim);font-weight:700;letter-spacing:1px;min-width:56px; }
.kc-radical-char { font-family:'Noto Serif JP',serif;font-size:24px;font-weight:700;color:var(--radical-c);letter-spacing:10px; }

/* 8. Nghĩa */
.kc-meaning-row { display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:4px;border:1px solid var(--meaning-bd);background:var(--meaning-bg); }
.kc-meaning-label { font-size:11px;color:var(--text-dim);font-weight:700;letter-spacing:1px;min-width:56px; }
.kc-meaning-val { font-size:20px;font-weight:800;color:var(--meaning-c);flex:1; }
body.theme-light .kc-meaning-val { color:#1e293b; }

/* 9+10. Compound sections */
.kc-section { margin-top:14px; }
.kc-section-title { display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:9px;color:var(--text-muted); }
.kc-section-badge { display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;font-size:11px;font-weight:700;font-family:'Noto Serif JP',serif;flex-shrink:0; }
.kc-badge-kun { background:var(--kun-bg);color:var(--kun-c);border:1px solid var(--kun-bd); }
.kc-badge-on  { background:var(--on-bg); color:var(--on-c); border:1px solid var(--on-bd); }
.kc-kun-title { color:var(--kun-c); }
.kc-on-title  { color:var(--on-c); }

/* Compound rows — table style */
.kc-compound-row { display:flex;align-items:flex-start;gap:12px;padding:10px 12px;margin-bottom:6px;border-bottom:1px solid var(--border);background:transparent; }
.kc-compound-row:last-child { border-bottom:none; }
body.theme-light .kc-compound-row { border-bottom-color:#f1f5f9; }
.kc-compound-row.kun .kc-compound-word { color:var(--kun-c); }
.kc-compound-row.on  .kc-compound-word { color:var(--on-c); }
.kc-compound-left  { display:flex;flex-direction:column;gap:2px;min-width:100px; }
.kc-compound-right { display:flex;flex-direction:column;gap:2px;flex:1; }
.kc-compound-word  { font-family:'Noto Serif JP',serif;font-size:19px;font-weight:700; }
.kc-compound-furi  { font-family:'Noto Serif JP',serif;font-size:12px;color:var(--text-dim); }
.kc-compound-hv    { font-size:12px;color:var(--hanviet-c);font-weight:600; }
body.theme-light .kc-compound-hv { color:#b45309; }
.kc-compound-mean  { font-size:13px;color:var(--text-muted); }

.speak-btn { background:transparent;border:none;cursor:pointer;font-size:15px;opacity:.5;transition:opacity .2s; }
.speak-btn:hover { opacity:1; }
.kc-speak { font-size:14px;flex-shrink:0;padding:2px;align-self:center; }

/* 11. Example sentences */
.kc-example-box { background:var(--example-bg);border-left:3px solid var(--example-bd);padding:12px 14px;margin-bottom:8px;border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
body.theme-light .kc-example-box { background:#fff5f8;border-left-color:#e91e63; }
.kc-example-inner { flex:1; }
.kc-example-jp   { font-family:'Noto Serif JP',serif;font-size:17px;color:var(--text);line-height:1.7;margin-bottom:3px;cursor:pointer; }
.kc-example-furi { font-family:'Noto Serif JP',serif;font-size:12px;color:var(--text-dim);margin-bottom:3px; }
.kc-example-vn   { font-size:13px;color:var(--example-vn);font-weight:600; }
.kc-hidden { display:none; }
.kc-furi-toggle { font-size:12px;color:var(--text-dim);background:transparent;border:none;cursor:pointer;font-family:var(--font);padding:3px 0;margin-top:3px;transition:color .2s; }
.kc-furi-toggle:hover { color:var(--pink); }

.btn-mastered { width:100%;padding:12px;border-radius:var(--radius-sm);font-size:14px;font-weight:700;border:2px solid;transition:all .25s;cursor:pointer;margin-top:8px; }
.btn-mastered.off { background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3);color:var(--green); }
.btn-mastered.on  { background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.15);color:var(--green); }
body.theme-light .btn-mastered.off { background:#f0fdf4;border-color:#86efac;color:#166534; }
body.theme-light .btn-mastered.on  { background:#dcfce7;border-color:#4ade80;color:#166534; }

/* ════════════════
   QUIZ
════════════════ */
.quiz-wrap { min-height:calc(100vh - var(--nav-h));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px; }
.quiz-box { width:100%;max-width:560px; }
.q-box { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;text-align:center;margin-bottom:18px;box-shadow:var(--card-shadow); }
body.theme-light .q-box { background:#fff;border-color:#e2e8f0; }
.q-eyebrow { font-size:12px;color:var(--text-dim);margin-bottom:14px; }
.q-text    { font-size:19px;font-weight:700;line-height:1.65;color:var(--text); }
.opts-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.opt-btn { background:var(--surface);border:1.5px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:15px;font-size:16px;font-weight:600;text-align:center;transition:all .2s;cursor:pointer;font-family:var(--font);box-shadow:var(--card-shadow); }
body.theme-light .opt-btn { background:#fff;border-color:#e2e8f0;color:#1e293b; }
.opt-btn:not(.answered):hover { border-color:var(--pink);color:var(--pink);background:var(--badge-lv-bg); }
body.theme-light .opt-btn:not(.answered):hover { background:#fce7f3;border-color:var(--pink);color:#9d174d; }
.opt-btn.correct { background:rgba(34,197,94,.1);border-color:var(--green);color:var(--green); }
.opt-btn.wrong   { background:rgba(239,68,68,.08);border-color:var(--red);color:var(--red); }
body.theme-light .opt-btn.correct { background:#f0fdf4;border-color:#86efac;color:#166534; }
body.theme-light .opt-btn.wrong   { background:#fff5f5;border-color:#fecaca;color:#991b1b; }
.timer-ring { width:44px;height:44px;border-radius:50%;border:3px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;position:relative;flex-shrink:0; }
body.theme-light .timer-ring { border-color:#e2e8f0; }
.quiz-result-score { font-size:72px;font-weight:900;background:var(--hero-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent; }

/* ════════════════════
   BOOKS SECTION
════════════════════ */
.books-section {
  padding: 72px 24px;
  background: var(--bg);
}
body.theme-light .books-section {
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.book-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all .25s;
  box-shadow: var(--card-shadow);
}
body.theme-light .book-card { background: #fff; border-color: #e2e8f0; }
.book-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-hover);
  border-color: var(--pink);
}

.book-img-wrap {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
}
body.theme-light .book-img-wrap { background: #f8fafc; }

.book-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.book-card:hover .book-img { transform: scale(1.04); }

/* Placeholder khi chưa có ảnh */
.book-img-wrap:not(:has(img[src*="book"])) {
  font-size: 48px;
}
.book-img-wrap::before {
  content: '📚';
  font-size: 48px;
  opacity: .3;
  position: absolute;
  pointer-events: none;
}
.book-img-wrap { position: relative; }
.book-img-wrap img { position: relative; z-index: 1; }

.book-info {
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
}

.book-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}

.book-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}

.book-btn {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pink);
  letter-spacing: .3px;
}
.book-card:hover .book-btn { text-decoration: underline; }

/* ════════════════
   RESPONSIVE
════════════════ */
@media(max-width:900px) { .grid-5 { grid-template-columns:repeat(3,1fr); } .books-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:768px) {
  .nav-links { display:none!important; } .nav-hamburger { display:flex; }
  .grid-5 { grid-template-columns:repeat(2,1fr); } .books-grid { grid-template-columns:repeat(2,1fr); }
  .dashboard-grid { grid-template-columns:1fr; }
  .dashboard-grid>div:last-child { display:none; }
  .lesson-grid { grid-template-columns:1fr; } .lesson-sidebar { display:none; }
  .grid-2 { grid-template-columns:1fr; } .today-grid { grid-template-columns:1fr; }
  .opts-grid { grid-template-columns:1fr; }
  .hero-title { font-size:38px; } .kc-kanji-char { font-size:96px; } .books-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .auth-deco { display:none; }
}
@media(max-width:480px) {
  .grid-5 { grid-template-columns:1fr 1fr; }
  .hero-title { font-size:30px; } .hero-stats { gap:20px; }
  .kc-kanji-char { font-size:80px; } .wpd-grid { flex-wrap:wrap; }
}