:root {
  --primary: #2563eb;
  --primary-light: #dbeafe;
  --primary-dark: #1e40af;
  --accent: #f59e0b;
  --accent-light: #fef3c7;
  --success: #10b981;
  --danger: #ef4444;
  --bg: #f0f4f8;
  --card-bg: #ffffff;
  --text: #1e293b;
  --text-light: #64748b;
  --border: #e2e8f0;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --radius: 12px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
.navbar {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex; align-items: center; padding: 0 12px;
  height: 56px; box-shadow: 0 2px 12px rgba(37,99,235,0.3);
}
.navbar .logo { color:#fff; font-size:16px; font-weight:700; white-space:nowrap; margin-right:8px; display:flex; align-items:center; gap:6px; flex-shrink:0; }
.navbar .logo span { font-size:20px; }
.nav-toggle { display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer; margin-left:auto; padding:4px 8px; }
.nav-tabs { display:flex; gap:3px; flex:1; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.nav-tabs::-webkit-scrollbar { display:none; }
.nav-tab { color:rgba(255,255,255,0.8); background:transparent; border:none; padding:6px 12px; border-radius:8px; cursor:pointer; font-size:13px; white-space:nowrap; transition:all 0.2s; flex-shrink:0; }
.nav-tab:hover { background:rgba(255,255,255,0.15); color:#fff; }
.nav-tab.active { background:rgba(255,255,255,0.25); color:#fff; font-weight:600; }
.progress-badge { color:#fff; font-size:12px; background:rgba(255,255,255,0.2); padding:4px 10px; border-radius:20px; white-space:nowrap; margin-left:8px; flex-shrink:0; }

.main { padding:72px 12px 40px; max-width:1200px; margin:0 auto; width:100%; }

.page { display:none; animation:fadeIn 0.3s; }
.page.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }

.card { background:var(--card-bg); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-bottom:16px; width:100%; overflow:hidden; }
.card-title { font-size:18px; font-weight:700; margin-bottom:12px; color:var(--primary-dark); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.hero { background:linear-gradient(135deg,#2563eb,#7c3aed); border-radius:16px; padding:24px 20px; color:#fff; margin-bottom:20px; }
.hero h1 { font-size:22px; margin-bottom:8px; line-height:1.3; }
.hero p { font-size:14px; opacity:0.9; max-width:700px; }
.hero .stats { display:flex; gap:16px; margin-top:16px; flex-wrap:wrap; }
.hero .stat { text-align:center; min-width:60px; }
.hero .stat .num { font-size:24px; font-weight:800; }
.hero .stat .label { font-size:12px; opacity:0.8; }

.unit-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }

.unit-card { background:var(--card-bg); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); cursor:pointer; transition:all 0.3s; border-left:4px solid var(--primary); position:relative; }
.unit-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.unit-card .unit-num { font-size:12px; color:var(--text-light); font-weight:600; text-transform:uppercase; }
.unit-card .unit-title { font-size:16px; font-weight:700; margin:4px 0 6px; }
.unit-card .unit-topic { font-size:13px; color:var(--text-light); }
.unit-card .unit-grammar { font-size:11px; background:var(--primary-light); color:var(--primary-dark); padding:4px 8px; border-radius:6px; display:inline-block; margin-top:6px; }
.unit-card .unit-progress { position:absolute; top:12px; right:12px; font-size:11px; color:var(--success); font-weight:600; }

.week-card { border-left:4px solid var(--accent); }

.cctable { width:100%; border-collapse:collapse; font-size:14px; }
.cctable th,.cctable td { padding:8px 10px; text-align:left; border-bottom:1px solid var(--border); }
.cctable th { background:var(--bg); font-weight:600; color:var(--text-light); white-space:nowrap; }
.cctable td .task { font-weight:500; }
.cctable td .detail { color:var(--text-light); font-size:13px; }

.section-tabs { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.section-tab { padding:6px 14px; border-radius:8px; border:1px solid var(--border); background:#fff; cursor:pointer; font-size:13px; transition:all 0.2s; }
.section-tab.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.section-tab:hover:not(.active) { background:var(--primary-light); }

.vocab-table { width:100%; border-collapse:collapse; font-size:14px; }
.vocab-table th,.vocab-table td { padding:8px 10px; text-align:left; border-bottom:1px solid var(--border); }
.vocab-table th { background:var(--bg); font-weight:600; }
.vocab-table .word { font-weight:600; color:var(--primary-dark); }
.vocab-table .phonetic { color:var(--text-light); font-style:italic; }
.vocab-table tr.memorized { opacity:0.4; }
.vocab-table tr.memorized .word { text-decoration:line-through; }
.mem-btn { padding:4px 10px; border-radius:6px; border:1px solid var(--border); background:#fff; cursor:pointer; font-size:12px; transition:all 0.2s; }
.mem-btn:hover { background:var(--success); color:#fff; border-color:var(--success); }
.mem-btn.memorized { background:var(--success); color:#fff; border-color:var(--success); }

.grammar-card { background:#fff; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-bottom:12px; border-left:4px solid var(--accent); }
.grammar-card h3 { color:var(--primary-dark); margin-bottom:12px; font-size:16px; }
.grammar-card .formula { background:var(--accent-light); padding:10px 14px; border-radius:8px; font-family:'Courier New',monospace; font-size:13px; margin:8px 0; }
.grammar-card .example { background:var(--primary-light); padding:8px 12px; border-radius:8px; margin:6px 0; font-size:13px; }
.grammar-card .tip { background:#ecfdf5; padding:8px 12px; border-radius:8px; margin:6px 0; font-size:13px; border-left:3px solid var(--success); }
.grammar-card .warn { background:#fef2f2; padding:8px 12px; border-radius:8px; margin:6px 0; font-size:13px; border-left:3px solid var(--danger); }

.quiz-question { background:#fff; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-bottom:16px; }
.quiz-question .q-num { font-size:12px; color:var(--text-light); font-weight:600; }
.quiz-question .q-text { font-size:15px; margin:8px 0 12px; }
.quiz-opt { display:block; padding:10px 14px; margin:6px 0; border:2px solid var(--border); border-radius:8px; cursor:pointer; transition:all 0.2s; font-size:14px; }
.quiz-opt:hover { border-color:var(--primary); background:var(--primary-light); }
.quiz-opt.correct { border-color:var(--success); background:#ecfdf5; }
.quiz-opt.wrong { border-color:var(--danger); background:#fef2f2; }
.quiz-opt.selected { border-color:var(--primary); background:var(--primary-light); }
.quiz-feedback { margin-top:8px; padding:8px 12px; border-radius:6px; font-size:13px; display:none; }
.quiz-feedback.show { display:block; }
.quiz-feedback.correct { background:#ecfdf5; color:#065f46; }
.quiz-feedback.wrong { background:#fef2f2; color:#991b1b; }
.quiz-score { text-align:center; font-size:20px; font-weight:700; padding:20px; }

.progress-bar { width:100%; height:20px; background:var(--border); border-radius:10px; overflow:hidden; margin:8px 0; }
.progress-bar .fill { height:100%; background:linear-gradient(90deg,var(--primary),var(--success)); border-radius:10px; transition:width 0.5s; }
.progress-item { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); }
.progress-item .label { font-size:14px; }
.progress-item .value { font-size:14px; font-weight:600; color:var(--primary); }

.phrase-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:8px; }
.phrase-item { background:var(--primary-light); padding:10px 14px; border-radius:8px; font-size:14px; }
.phrase-item .en { font-weight:600; color:var(--primary-dark); }
.phrase-item .cn { color:var(--text-light); font-size:13px; }

.reading-box { background:#fffbeb; border-left:4px solid var(--accent); padding:14px 16px; border-radius:8px; margin:12px 0; }
.reading-box h4 { color:var(--accent); margin-bottom:8px; }

.reading-text { background:#f8fafc; border:1px solid var(--border); border-radius:10px; padding:16px; margin:12px 0; line-height:1.9; font-size:14px; max-height:400px; overflow-y:auto; }
.reading-text h4 { color:var(--primary-dark); margin:8px 0 4px; font-size:15px; }
.reading-text p { margin:6px 0; text-indent:2em; }
.translation-text { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:10px; padding:16px; margin:12px 0; line-height:1.9; font-size:14px; }
.translation-text h4 { color:#15803d; margin-bottom:8px; }
.translation-text p { margin:6px 0; text-indent:2em; }

.word-analysis { margin:12px 0; }
.word-item { background:#fff; border:1px solid var(--border); border-radius:8px; padding:10px 14px; margin:6px 0; display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; }
.word-item .word { font-weight:700; color:var(--primary-dark); font-size:15px; flex-shrink:0; }
.word-item .pos { background:var(--accent-light); color:var(--accent); padding:2px 8px; border-radius:4px; font-size:12px; font-weight:600; flex-shrink:0; }
.word-item .meaning { color:var(--text); font-size:14px; flex:1; }
.word-item .tense { background:#f0fdf4; color:#15803d; padding:2px 8px; border-radius:4px; font-size:12px; flex-shrink:0; }

.sentence-analysis { margin:12px 0; }
.sentence-item { background:#fff; border-left:3px solid var(--primary); padding:10px 14px; margin:6px 0; border-radius:0 8px 8px 0; }
.sentence-item .en { font-weight:600; font-size:14px; margin-bottom:4px; }
.sentence-item .cn { color:var(--text-light); font-size:13px; }
.sentence-item .analysis { background:var(--primary-light); padding:6px 10px; border-radius:6px; margin-top:6px; font-size:13px; }

.exam-tips { margin:12px 0; }
.exam-tip { background:#ecfdf5; border-left:3px solid var(--success); padding:10px 14px; margin:6px 0; border-radius:0 8px 8px 0; font-size:14px; }

.checklist-item { display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.checklist-item .checkbox { width:20px; height:20px; border:2px solid var(--border); border-radius:4px; flex-shrink:0; margin-top:2px; transition:all 0.2s; }
.checklist-item.done .checkbox { background:var(--success); border-color:var(--success); position:relative; }
.checklist-item.done .checkbox::after { content:''; position:absolute; top:2px; left:6px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.checklist-item.done .text { opacity:0.5; text-decoration:line-through; }
.checklist-item .text { font-size:14px; }

.back-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:var(--primary-light); color:var(--primary-dark); border:none; border-radius:8px; cursor:pointer; font-size:14px; margin-bottom:16px; transition:all 0.2s; }
.back-btn:hover { background:var(--primary); color:#fff; }

.unit-selector { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.unit-pill { padding:6px 14px; border-radius:20px; border:2px solid var(--border); background:#fff; cursor:pointer; font-size:13px; font-weight:600; transition:all 0.2s; }
.unit-pill.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.unit-pill:hover:not(.active) { border-color:var(--primary); }

.tip-box { background:#ecfdf5; border-left:4px solid var(--success); padding:14px 18px; border-radius:8px; margin:12px 0; }
.tip-box strong { color:#065f46; }
.muted { color:var(--text-light); font-size:14px; }
.mb { margin-bottom:12px; }
.tips-list p { font-size:14px; line-height:2; }

.btn-danger { padding:8px 20px; background:var(--danger); color:#fff; border:none; border-radius:8px; cursor:pointer; font-size:14px; }
.btn-danger:hover { opacity:0.85; }
.btn-primary { padding:8px 20px; background:var(--primary); color:#fff; border:none; border-radius:8px; cursor:pointer; font-size:14px; }

.table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ======= MOBILE ====== */
@media (max-width:768px) {
  .nav-toggle { display:block; }
  .nav-tabs { 
    display:none; 
    position:fixed; top:56px; left:0; right:0; 
    background:var(--primary-dark); 
    flex-direction:column; 
    padding:8px 12px; 
    box-shadow:0 4px 12px rgba(0,0,0,0.2); 
    z-index:999; 
    max-height:calc(100vh - 56px); 
    overflow-y:auto;
  }
  .nav-tabs.open { display:flex; }
  .nav-tab { padding:10px 16px; font-size:14px; border-radius:6px; }
  .main { padding:64px 8px 40px; }
  .hero { padding:20px 16px; }
  .hero h1 { font-size:18px; }
  .hero .stats { gap:12px; }
  .hero .stat .num { font-size:20px; }
  .card { padding:12px; }
  .unit-grid { grid-template-columns:1fr; }
  .phrase-list { grid-template-columns:1fr; }
  .section-tabs { gap:4px; }
  .section-tab { padding:6px 10px; font-size:12px; }
  .vocab-table { font-size:13px; }
  .vocab-table th,.vocab-table td { padding:6px 8px; }
  .table-wrap { width:100%; overflow-x:auto; }
  .cctable { min-width:600px; }
  .reading-text { font-size:13px; padding:12px; }
  .translation-text { font-size:13px; padding:12px; }
  .word-item { flex-direction:column; gap:4px; }
  .unit-selector { gap:4px; }
  .unit-pill { padding:5px 10px; font-size:12px; }
}

@media (max-width:480px) {
  .hero h1 { font-size:16px; }
  .hero p { font-size:13px; }
  .hero .stat { min-width:50px; }
  .hero .stat .num { font-size:18px; }
  .card-title { font-size:16px; }
  .quiz-opt { padding:8px 10px; font-size:13px; }
}

/* Smooth scrolling */
html { scroll-behavior:smooth; }

/* Selection color */
::selection { background:var(--primary-light); color:var(--primary-dark); }

/* Focus styles for accessibility */
button:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }