:root {
  --green: #22c55e;
  --green-light: #dcfce7;
  --red: #ef4444;
  --red-light: #fef2f2;
  --yellow: #f59e0b;
  --yellow-light: #fffbeb;
  --blue: #4f46e5;
  --blue-light: #eef2ff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.1);
  --transition: 0.2s ease;
  --max-w: 1100px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif;
}

/* ═══ RESET ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--gray-50);color:var(--gray-800);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--blue);text-decoration:none}
button{cursor:pointer;font-family:inherit;font-size:inherit}
input,select{font-family:inherit;font-size:inherit}

/* ═══ TOP BAR ═══ */
.topbar{display:flex;align-items:center;gap:16px;padding:10px 20px;background:#fff;border-bottom:1px solid var(--gray-200);position:sticky;top:0;z-index:100;box-shadow:var(--shadow)}
.logo{font-size:1.15rem;font-weight:700;color:var(--gray-900);white-space:nowrap}
.search-box{flex:1;max-width:360px;position:relative}
.search-box input{width:100%;padding:8px 14px;border:1px solid var(--gray-300);border-radius:20px;outline:none;background:var(--gray-50);transition:var(--transition)}
.search-box input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px var(--blue-light)}
.search-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow-lg);max-height:320px;overflow-y:auto;display:none;z-index:200}
.search-dropdown.show{display:block}
.search-dropdown .sr-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;cursor:pointer;transition:var(--transition);border-bottom:1px solid var(--gray-100)}
.search-dropdown .sr-item:hover{background:var(--blue-light)}
.search-dropdown .sr-item:last-child{border-bottom:none}
.search-dropdown .sr-word{font-weight:600}
.search-dropdown .sr-def{font-size:.85rem;color:var(--gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.top-nav{display:flex;gap:8px}
.top-nav a{padding:6px 12px;border-radius:6px;color:var(--gray-600);font-size:.9rem;transition:var(--transition)}
.top-nav a:hover{background:var(--gray-100);color:var(--gray-900)}
.user-area{display:flex;align-items:center;gap:8px;margin-left:auto}
.username-label{font-size:.85rem;color:var(--gray-600);font-weight:500}
.icon-btn{background:none;border:none;font-size:1.1rem;padding:4px 8px;border-radius:6px;transition:var(--transition);color:var(--gray-600)}
.icon-btn:hover{background:var(--gray-100);color:var(--gray-900)}

/* ═══ SIDENAV ═══ */
.sidenav{width:200px;position:fixed;top:56px;left:0;bottom:0;background:#fff;border-right:1px solid var(--gray-200);padding:16px 10px;overflow-y:auto;z-index:50}
.nav-item{display:block;padding:10px 14px;border-radius:8px;color:var(--gray-600);font-size:.9rem;transition:var(--transition);margin-bottom:2px}
.nav-item:hover,.nav-item.active{background:var(--blue-light);color:var(--blue)}

/* ═══ BOTTOM NAV (mobile) ═══ */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--gray-200);justify-content:space-around;padding:8px 0;z-index:100}
.bottom-nav a{font-size:1.3rem;padding:4px 16px;color:var(--gray-500);transition:var(--transition)}
.bottom-nav a.active{color:var(--blue)}

/* ═══ MAIN ═══ */
#main-content{margin-left:200px;margin-top:56px;padding:0 0 80px;min-height:calc(100vh - 56px)}

/* ═══ AUTH PAGES ═══ */
.auth-page{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 56px);padding:20px}
.auth-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:40px;width:100%;max-width:420px}
.auth-card h2{text-align:center;margin-bottom:24px;font-size:1.5rem;color:var(--gray-900)}
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:6px;font-size:.9rem;font-weight:500;color:var(--gray-700)}
.form-group input{width:100%;padding:10px 14px;border:1px solid var(--gray-300);border-radius:8px;outline:none;transition:var(--transition)}
.form-group input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border:none;border-radius:8px;font-weight:600;transition:var(--transition)}
.btn-primary{background:var(--blue);color:#fff;width:100%}
.btn-primary:hover{filter:brightness(1.1)}
.btn-sm{padding:6px 14px;font-size:.85rem;border-radius:6px}
.btn-outline{background:#fff;border:1px solid var(--gray-300);color:var(--gray-700)}
.btn-outline:hover{background:var(--gray-100)}
.btn-green{background:var(--green);color:#fff}
.btn-red{background:var(--red);color:#fff}
.btn-ghost{background:none;color:var(--gray-600)}
.btn-ghost:hover{background:var(--gray-100)}
.auth-link{text-align:center;margin-top:16px;font-size:.9rem;color:var(--gray-500)}

/* ═══ DASHBOARD ═══ */
.page{padding:24px;max-width:var(--max-w);margin:0 auto}
.page h1{font-size:1.5rem;margin-bottom:20px;color:var(--gray-900)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:24px}
.card{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card h3{font-size:.85rem;color:var(--gray-500);margin-bottom:8px;text-transform:uppercase;letter-spacing:.03em}
.card .value{font-size:2rem;font-weight:700;color:var(--gray-900)}
.card .sub{font-size:.85rem;color:var(--gray-400);margin-top:4px}
.countdown-banner{background:linear-gradient(135deg,var(--blue),#7c3aed);color:#fff;border-radius:var(--radius);padding:20px 24px;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.countdown-banner .cd-days{font-size:3rem;font-weight:800}
.countdown-banner .cd-label{font-size:1rem;opacity:.9}
.countdown-banner .cd-hint{font-size:.85rem;opacity:.7}
.quick-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.quick-actions .btn{padding:12px 24px;font-size:1rem}

/* ═══ LEARN PAGE ═══ */
.learn-container{max-width:720px;margin:0 auto;padding:24px}
.learn-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:40px;text-align:center;min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;user-select:none}
.learn-card .word-big{font-size:3rem;font-weight:700;color:var(--gray-900);margin-bottom:8px}
.learn-card .phonetic{font-size:1.1rem;color:var(--gray-500);margin-bottom:16px}
.learn-card .btn-speak{font-size:1.5rem;background:none;border:1px solid var(--gray-300);border-radius:50%;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:20px;transition:var(--transition)}
.learn-card .btn-speak:hover{background:var(--blue-light);border-color:var(--blue)}
.learn-card .card-back{display:none;width:100%}
.learn-card.flipped .card-front{display:none}
.learn-card.flipped .card-back{display:block}
.learn-card .definition{font-size:1.3rem;color:var(--gray-800);margin-bottom:12px;font-weight:600}
.learn-card .example{margin:12px 0;padding:12px 16px;background:var(--gray-50);border-radius:8px;font-size:.95rem;color:var(--gray-600);text-align:left}
.learn-card .example .label{font-size:.8rem;color:var(--gray-400);display:block;margin-bottom:4px}
.learn-card .root-affix{margin:12px 0;padding:12px 16px;background:var(--yellow-light);border-radius:8px;font-size:.9rem;color:var(--gray-700);cursor:pointer;text-align:left}
.learn-card .root-affix .label{font-size:.8rem;color:var(--yellow);display:block;margin-bottom:4px}
.learn-card .root-affix .content{display:none}
.learn-card .root-affix.open .content{display:block}
.learn-feedback{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap;justify-content:center}
.learn-feedback button{padding:12px 28px;border-radius:8px;font-weight:600;font-size:1rem;border:none;transition:var(--transition)}
.learn-feedback .btn-know{background:var(--green);color:#fff}
.learn-feedback .btn-vague{background:var(--yellow);color:#fff}
.learn-feedback .btn-forgot{background:var(--red);color:#fff}
.learn-nav{display:flex;justify-content:space-between;align-items:center;margin-top:20px}
.learn-progress{font-size:.9rem;color:var(--gray-500)}
.learn-badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:.8rem;font-weight:600;margin:0 4px}
.badge-new{background:var(--blue-light);color:var(--blue)}
.badge-review{background:var(--yellow-light);color:var(--yellow)}
.badge-mastered{background:var(--green-light);color:var(--green)}
.tag-freq{display:inline-block;padding:2px 8px;border-radius:10px;font-size:.75rem;font-weight:600;margin:4px 2px}
.freq-super_high{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.freq-high{background:#fffbeb;color:#d97706;border:1px solid #fde68a}
.freq-medium{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0}
.tag-topic{display:inline-block;padding:2px 8px;border-radius:10px;font-size:.75rem;margin:4px 2px;background:var(--gray-100);color:var(--gray-600);border:1px solid var(--gray-200)}

/* ═══ WORD DETAIL ═══ */
.word-detail{max-width:720px;margin:0 auto;padding:24px}
.word-detail .wd-header{text-align:center;margin-bottom:24px}
.word-detail .wd-word{font-size:3rem;font-weight:700;color:var(--gray-900)}
.word-detail .wd-phonetic{font-size:1.1rem;color:var(--gray-500);margin:8px 0}
.word-detail .wd-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.word-detail .wd-section{background:#fff;border-radius:var(--radius);padding:20px;margin-bottom:16px;box-shadow:var(--shadow)}
.word-detail .wd-section h3{font-size:.95rem;color:var(--gray-500);margin-bottom:12px;text-transform:uppercase;letter-spacing:.03em}
.word-detail .syn-link,.ant-link{display:inline-block;padding:4px 12px;margin:2px;border-radius:12px;background:var(--gray-100);color:var(--gray-700);font-size:.9rem;transition:var(--transition)}
.word-detail .syn-link:hover{background:var(--blue-light);color:var(--blue)}
.word-detail .book-tag{display:inline-block;padding:3px 10px;margin:2px;border-radius:12px;background:var(--green-light);color:var(--green);font-size:.85rem}

/* ═══ QUIZ ═══ */
.quiz-container{max-width:640px;margin:0 auto;padding:24px}
.quiz-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:32px}
.quiz-card .quiz-question{font-size:1.4rem;font-weight:600;text-align:center;margin-bottom:24px;color:var(--gray-900);min-height:60px;display:flex;align-items:center;justify-content:center}
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quiz-options button{padding:14px 20px;border:2px solid var(--gray-200);border-radius:var(--radius);background:#fff;font-size:1rem;transition:var(--transition);text-align:center;cursor:pointer}
.quiz-options button:hover{border-color:var(--blue);background:var(--blue-light)}
.quiz-options button.correct{border-color:var(--green);background:var(--green-light);color:var(--green)}
.quiz-options button.wrong{border-color:var(--red);background:var(--red-light);color:var(--red)}
.quiz-result{text-align:center;padding:20px;border-radius:var(--radius);margin-top:16px;font-weight:600}
.quiz-result.good{background:var(--green-light);color:var(--green)}
.quiz-result.bad{background:var(--red-light);color:var(--red)}

/* ═══ SPELL ═══ */
.spell-container{max-width:540px;margin:0 auto;padding:24px}
.spell-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:32px;text-align:center}
.spell-card .spell-hint{font-size:1.2rem;color:var(--gray-700);margin-bottom:20px}
.spell-card input{width:100%;padding:14px;border:2px solid var(--gray-200);border-radius:var(--radius);font-size:1.2rem;text-align:center;outline:none;transition:var(--transition);letter-spacing:2px}
.spell-card input:focus{border-color:var(--blue)}
.spell-card input.correct-input{border-color:var(--green);background:var(--green-light)}
.spell-card input.wrong-input{border-color:var(--red);background:var(--red-light)}
.spell-feedback{margin-top:16px;font-weight:600;min-height:28px}

/* ═══ WORD LIST / WRONGBOOK / COLLECTIONS ═══ */
.word-list{max-width:800px;margin:0 auto;padding:24px}
.word-list .wl-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.word-list .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.word-list .filters select,.word-list .filters button{padding:6px 12px;border:1px solid var(--gray-300);border-radius:6px;background:#fff;font-size:.85rem}
.word-item{background:#fff;border-radius:var(--radius);padding:14px 18px;margin-bottom:8px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;transition:var(--transition);cursor:pointer;flex-wrap:wrap;gap:8px}
.word-item:hover{box-shadow:var(--shadow-lg)}
.word-item .wi-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.word-item .wi-word{font-weight:700;font-size:1.05rem;color:var(--gray-900)}
.word-item .wi-phonetic{font-size:.85rem;color:var(--gray-400)}
.word-item .wi-def{font-size:.9rem;color:var(--gray-600)}
.word-item .wi-errors{font-size:.8rem;padding:3px 8px;border-radius:10px;background:var(--red-light);color:var(--red);white-space:nowrap}

/* ═══ STATISTICS ═══ */
.stats-page{max-width:900px;margin:0 auto;padding:24px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.stats-card{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);text-align:center}
.stats-card .s-val{font-size:2rem;font-weight:700;color:var(--gray-900)}
.stats-card .s-label{font-size:.85rem;color:var(--gray-500);margin-top:4px}
.chart-container{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:16px}
.chart-container h3{margin-bottom:12px;font-size:1rem;color:var(--gray-700)}
#trend-chart{width:100%;height:300px}

/* ═══ SETTINGS ═══ */
.settings-page{max-width:600px;margin:0 auto;padding:24px}
.settings-group{background:#fff;border-radius:var(--radius);padding:20px;margin-bottom:16px;box-shadow:var(--shadow)}
.settings-group h3{margin-bottom:16px;font-size:1rem;color:var(--gray-700)}
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--gray-100);flex-wrap:wrap;gap:8px}
.setting-row:last-child{border-bottom:none}
.setting-row label{font-weight:500;color:var(--gray-700)}
.setting-row input[type="number"],.setting-row input[type="date"],.setting-row select{padding:6px 10px;border:1px solid var(--gray-300);border-radius:6px;width:140px}

/* ═══ MODAL ═══ */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:300;display:flex;align-items:center;justify-content:center}
.modal{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:24px;max-width:480px;width:90%;max-height:80vh;overflow-y:auto}
.modal h3{margin-bottom:16px}

/* ═══ TOAST ═══ */
.toast{position:fixed;top:20px;right:20px;z-index:500;padding:12px 20px;border-radius:8px;font-weight:600;font-size:.9rem;box-shadow:var(--shadow-lg);transform:translateX(120%);transition:transform .3s ease;max-width:360px}
.toast.show{transform:translateX(0)}
.toast.success{background:var(--green);color:#fff}
.toast.error{background:var(--red);color:#fff}
.toast.info{background:var(--blue);color:#fff}

/* ═══ MISC ═══ */
.empty-state{text-align:center;padding:60px 20px;color:var(--gray-400)}
.empty-state .icon{font-size:3rem;margin-bottom:12px}
.empty-state p{font-size:1.1rem}
.progress-bar{height:8px;background:var(--gray-200);border-radius:4px;overflow:hidden;margin:8px 0}
.progress-bar .fill{height:100%;background:var(--blue);border-radius:4px;transition:width .5s ease}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:20px}
.pagination button{padding:6px 14px;border:1px solid var(--gray-300);border-radius:6px;background:#fff;transition:var(--transition)}
.pagination button:hover{background:var(--gray-100)}
.pagination button.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.kbd{display:inline-block;padding:2px 6px;border-radius:4px;background:var(--gray-100);border:1px solid var(--gray-300);font-size:.8rem;font-family:monospace}
.synonym-row{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
.hidden{display:none !important}
.text-center{text-align:center}
.mt-16{margin-top:16px}
.gap-8{gap:8px}
.flex-wrap{flex-wrap:wrap}

/* ═══ RESPONSIVE ═══ */
@media (max-width:1023px){
  .sidenav{display:none}
  #main-content{margin-left:0}
}
@media (max-width:767px){
  .top-nav{display:none}
  .search-box{max-width:200px}
  .bottom-nav{display:flex}
  #main-content{padding-bottom:70px}
  .learn-card{padding:24px}
  .learn-card .word-big{font-size:2rem}
  .quiz-options{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .topbar .username-label{display:none}
}