/* --- 1. GLOBAL --- */
body { background-color:#121212; color:#e0e0e0; font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; margin:0; padding:20px; line-height:1.6; }
.container { max-width:1100px; margin:0 auto; padding-bottom:100px; }

/* --- 2. HEADER & NAV --- */
header { border-bottom:2px solid #27ae60; padding-bottom:20px; margin-bottom:30px; display:flex; justify-content:space-between; align-items:center; }
h1 { margin:0; font-size:1.8rem; color:#fff; }
h2 { color:#2ecc71; margin-top:0; }
h3 { color:#f0f0f0; }
.level-badge { display:inline-block; background:#27ae60; color:#fff; font-size:0.8rem; font-weight:bold; padding:3px 10px; border-radius:12px; margin-bottom:6px; letter-spacing:0.5px; }
.subtitle { font-size:0.88rem; color:#aaa; margin-top:4px; }
.back-link { text-decoration:none; color:#888; border:1px solid #444; padding:5px 10px; border-radius:4px; font-size:0.9rem; transition:0.2s; white-space:nowrap; }
.back-link:hover { color:#fff; border-color:#fff; }
.nav-container { display:flex; gap:8px; margin-top:15px; flex-wrap:wrap; }
button.nav-btn { background:#1e1e1e; border:1px solid #333; color:#aaa; padding:10px 16px; cursor:pointer; border-radius:4px; transition:0.3s; font-weight:bold; font-size:0.95rem; }
button.nav-btn.active, button.nav-btn:hover { background:#27ae60; color:white; border-color:#27ae60; }

/* --- 3. SECTIONS --- */
.section-box { display:none; background:#1e1e1e; border:1px solid #333; border-top:4px solid #27ae60; border-radius:8px; padding:30px; margin-top:20px; margin-bottom:40px; animation:fadeIn 0.4s ease; }
.section-box.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);} }

/* --- 4. VOCABULARY --- */
.vocab-list-single { display:flex; flex-direction:column; gap:5px; max-width:850px; margin:0 auto; }
.vocab-category { color:#2ecc71; margin-top:28px; margin-bottom:5px; border-bottom:1px solid #444; padding-bottom:5px; text-transform:uppercase; font-size:0.95rem; letter-spacing:1px; }
.vocab-row { display:flex; align-items:center; padding:10px 15px; border-bottom:1px solid #2a2a2a; font-size:0.98rem; background:#222; border-radius:4px; gap:5px; }
.vocab-row:hover { background:#2a2a2a; border-left:3px solid #27ae60; }
.vocab-row span:first-child { font-weight:bold; width:185px; color:#fff; flex-shrink:0; }
.ipa { color:#f39c12; width:210px; flex-shrink:0; font-family:'Lucida Sans Unicode','Arial Unicode MS',sans-serif; font-size:0.88rem; }
.bg { color:#aaa; font-style:italic; margin-right:auto; flex:1; }
.speak-btn { background:none; border:none; cursor:pointer; font-size:1.2rem; margin-left:8px; transition:0.2s; color:#2ecc71; flex-shrink:0; padding:4px; }
.speak-btn:hover { transform:scale(1.15); }
.wide-speak { display:inline-block; margin-top:10px; background:#1a1a1a; border:1px solid #444; border-radius:4px; padding:6px 12px; font-size:0.9rem; color:#2ecc71; }
.context-note { background:#1a2a1a; padding:14px 18px; border-left:3px solid #2ecc71; color:#ccc; margin-bottom:25px; font-size:0.95rem; border-radius:0 4px 4px 0; }

/* --- 5. GRAMMAR --- */
.rule-box { margin-bottom:35px; background:#1a1a1a; border:1px solid #333; border-top:4px solid #27ae60; border-radius:8px; padding:20px 25px; }
.rule-part-header { display:flex; align-items:flex-start; gap:16px; margin-bottom:14px; }
.rule-part-num { background:#27ae60; color:#fff; font-weight:bold; font-size:1.1rem; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.rule-part-header h3 { color:#2ecc71; margin:0 0 4px; font-size:1.1rem; }
.rule-subtitle { font-size:0.82rem; color:#888; font-weight:normal; }
.rule-intro { color:#bbb; margin:0 0 18px; font-size:0.95rem; }

/* Linking word compare boxes */
.example-compare { display:flex; gap:15px; align-items:stretch; flex-wrap:wrap; margin:15px 0; }
.example-box { background:#252525; border:1px solid #3a3a3a; padding:14px 18px; border-radius:8px; flex:1; min-width:200px; }
.lw-because { border-color:#c0392b; background:#2a1a1a; }
.lw-so      { border-color:#2980b9; background:#1a2030; }
.ex-label { font-size:0.78rem; color:#888; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.example-box p { margin:0 0 6px; color:#ddd; font-size:0.95rem; }
.ex-note { color:#888 !important; font-size:0.83rem !important; font-style:italic; }
.arrow-box { font-size:2rem; color:#555; display:flex; align-items:center; flex-shrink:0; }

/* Linking word cards */
.lw-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.three-col { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.lw-card { background:#252525; border:1px solid #3a3a3a; border-radius:8px; padding:16px; }
.lw-badge { display:inline-block; font-weight:bold; font-size:1rem; padding:4px 14px; border-radius:20px; margin-bottom:10px; }
.lw-use { color:#888; font-size:0.85rem; font-style:italic; margin:0 0 10px; }
.lw-card ul { padding-left:18px; margin:0; color:#ccc; font-size:0.88rem; }
.lw-card ul li { margin-bottom:8px; line-height:1.5; }
.mini-tip { background:#1a1a1a; border-left:3px solid #f39c12; padding:6px 10px; margin-top:12px; font-size:0.82rem; color:#f39c12; border-radius:0 4px 4px 0; }

/* Card colour themes */
.because-card  { border-color:#c0392b; } .because-card .lw-badge { background:#3a1a1a; color:#e74c3c; }
.so-card       { border-color:#2980b9; } .so-card .lw-badge { background:#1a2a3a; color:#3498db; }
.when-card     { border-color:#27ae60; } .when-card .lw-badge { background:#1a3a1a; color:#2ecc71; }
.while-card    { border-color:#8e44ad; } .while-card .lw-badge { background:#2a1a3a; color:#9b59b6; }
.but-card      { border-color:#d35400; } .but-card .lw-badge { background:#2a1a00; color:#f39c12; }
.although-card { border-color:#16a085; } .although-card .lw-badge { background:#0a2520; color:#1abc9c; }
.however-card  { border-color:#7f8c8d; } .however-card .lw-badge { background:#1e2525; color:#95a5a6; }
.and-card      { border-color:#27ae60; } .and-card .lw-badge { background:#1a3a1a; color:#2ecc71; }
.addition-card { border-color:#f39c12; } .addition-card .lw-badge { background:#2a2a00; color:#f1c40f; }

.tip-box { background:#1a2a3a; border-left:3px solid #3498db; padding:10px 14px; border-radius:0 4px 4px 0; font-size:0.88rem; color:#8cc8ff; }

/* Grammar exercises */
.grammar-ex-block { background:#1e1e1e; border:1px solid #333; border-radius:8px; padding:16px 20px; }
.easy-ex { border-left:4px solid #2ecc71; }
.hard-ex { border-left:4px solid #f39c12; }
.ex-instructions { font-size:0.9rem; color:#ccc; margin-bottom:12px; }
.g-hint { font-size:0.8rem; color:#888; font-style:italic; }
.g-item { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:9px 12px; background:#222; border-radius:6px; margin-bottom:8px; font-size:0.92rem; color:#ddd; border:1px solid #2a2a2a; }
.g-item:hover { background:#252525; }
.g-select { background:#2a2a2a; border:1px solid #444; color:#fff; padding:4px 8px; border-radius:4px; font-size:0.9rem; cursor:pointer; transition:border-color 0.2s; }
.g-select:focus { outline:none; border-color:#27ae60; }
.g-input { background:#2a2a2a; border:1px solid #444; color:#fff; padding:5px 10px; border-radius:4px; width:160px; font-family:'Segoe UI',sans-serif; font-size:0.9rem; transition:border-color 0.2s; }
.g-input:focus { outline:none; border-color:#27ae60; }
.g-fb { font-size:0.88rem; font-weight:bold; margin-left:4px; }
.ex-btn-row { display:flex; align-items:center; gap:12px; margin-top:12px; }

/* Tables */
.pro-table { width:100%; border-collapse:collapse; background:#222; border:1px solid #333; font-size:0.9rem; margin-top:10px; }
.pro-table th { background:#1a1a1a; color:#2ecc71; padding:12px; text-align:left; border-bottom:2px solid #333; font-weight:600; }
.pro-table td { padding:11px 12px; border-bottom:1px solid #2a2a2a; color:#e0e0e0; vertical-align:top; }
.pro-table tr:hover { background:#2a2a2a; }

/* --- 6. READING --- */
.newspaper-container { border:2px solid #444; background:#1a1a1a; padding:25px; border-radius:8px; min-height:480px; }
.newspaper-page { display:none; animation:fadeIn 0.5s; }
.newspaper-page.active { display:block; }
.news-layout { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
.news-img { flex:0 0 100px; height:100px; background:#252525; border:1px solid #444; display:flex; align-items:center; justify-content:center; border-radius:8px; font-size:3rem; }
.news-content { flex:1; min-width:250px; }
.news-content h3 { color:#f39c12; margin-top:0; font-size:1.1rem; }
.news-content p { color:#ccc; font-size:0.95rem; line-height:1.75; margin:0 0 12px; }
.news-controls { display:flex; justify-content:center; align-items:center; margin-top:20px; }
.reading-quiz { background:#111; padding:20px; border-radius:6px; border-left:3px solid #f39c12; margin-top:10px; }
.reading-quiz h4 { color:#f39c12; margin:0 0 15px; }
.mc-q { margin-bottom:18px; }
.mc-q p { color:#e0e0e0; margin:0 0 8px; font-weight:bold; font-size:0.93rem; }
.mc-q label { display:block; padding:7px 12px; margin-bottom:4px; border-radius:4px; cursor:pointer; color:#ccc; border:1px solid #2a2a2a; transition:0.15s; font-size:0.9rem; }
.mc-q label:hover { background:#2a2a2a; border-color:#444; }
.mc-q label input[type="radio"] { margin-right:8px; accent-color:#27ae60; }
.correct-label { background:#1a3a1a !important; border-color:#2ecc71 !important; color:#2ecc71 !important; }
.wrong-label   { background:#3a1a1a !important; border-color:#e74c3c !important; color:#e74c3c !important; }
.show-correct  { background:#1a2a3a !important; border-color:#3498db !important; color:#3498db !important; }
.mc-fb { font-size:1rem; font-weight:bold; margin-left:5px; }
.fb-correct { color:#2ecc71; }
.fb-wrong   { color:#e74c3c; }
.score-display { font-weight:bold; color:#f39c12; margin-left:12px; font-size:0.95rem; }
.score-perfect { color:#2ecc71 !important; }

/* --- 7. CLOZE --- */
.cloze-container { background:#1a1a1a; border:1px solid #333; border-radius:8px; padding:25px; }
.cloze-title { color:#f39c12; margin-top:0; }
.cloze-text { font-size:1rem; color:#ccc; line-height:2.4; }
.cloze-text p { margin-bottom:18px; }
.cloze-select { background:#252525; border:2px solid #444; color:#fff; padding:3px 6px; border-radius:4px; font-size:0.9rem; cursor:pointer; transition:border-color 0.2s; margin:0 3px; min-width:110px; vertical-align:middle; }
.cloze-select:hover { border-color:#27ae60; }
.cloze-correct { border-color:#2ecc71 !important; background:#1a3a1a !important; color:#2ecc71 !important; }
.cloze-wrong   { border-color:#e74c3c !important; background:#3a1a1a !important; color:#e74c3c !important; }
.cloze-controls { display:flex; align-items:center; gap:12px; margin-top:20px; flex-wrap:wrap; }
.reset-btn { background:#333 !important; color:#ccc !important; }
.reset-btn:hover { background:#444 !important; }
.cloze-feedback-box { background:#1a1a1a; border:1px solid #444; border-radius:6px; padding:15px 20px; margin-top:15px; font-size:0.9rem; color:#ccc; }
.cloze-errors { padding-left:20px; margin:8px 0 0; }
.cloze-errors li { margin-bottom:6px; }
.cloze-errors em { color:#e74c3c; }
.cloze-errors strong { color:#2ecc71; }

/* --- 8. DRILLS --- */
.quiz-block { border:1px solid #2a2a2a; padding:18px 20px; border-radius:8px; background:#1a1a1a; margin-bottom:20px; }
.quiz-header { font-weight:bold; color:#f39c12; margin-bottom:12px; border-bottom:1px solid #333; padding-bottom:8px; font-size:0.95rem; }
.mini-quiz-item { margin-bottom:10px; padding:10px 14px; background:#222; border-radius:6px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; border:1px solid #2a2a2a; font-size:0.92rem; }
.mini-quiz-item:hover { background:#252525; }
.q-num  { color:#888; font-weight:bold; flex-shrink:0; min-width:22px; }
.q-text { color:#ddd; flex:1; min-width:200px; }
.quiz-input { background:#2a2a2a; border:1px solid #444; color:#fff; padding:5px 10px; border-radius:4px; width:150px; font-family:'Segoe UI',sans-serif; font-size:0.9rem; transition:border-color 0.2s; }
.quiz-input:focus { outline:none; border-color:#27ae60; }
.check-btn { background:#f39c12; color:#000; border:none; padding:7px 14px; border-radius:4px; cursor:pointer; font-weight:bold; transition:0.2s; flex-shrink:0; font-size:0.88rem; }
.check-btn:hover { background:#e67e22; color:white; }
.drill-feedback { font-size:0.88rem; font-style:italic; min-width:80px; }

/* --- 9. TENSE & GERUND --- */
.drill-instructions { font-size:0.9rem; color:#bbb; margin-bottom:12px; padding:8px 12px; background:#222; border-radius:4px; border-left:3px solid #555; }
.ex-btn { background:#2a2a2a; border:1px solid #555; color:#ccc; padding:6px 14px; border-radius:4px; cursor:pointer; font-size:0.88rem; transition:0.2s; font-weight:bold; }
.ex-btn:hover { background:#3a3a3a; border-color:#888; color:#fff; }

/* --- 10. RESPONSIVE --- */
@media (max-width:700px) {
    body { padding:12px; }
    h1 { font-size:1.3rem; }
    .section-box { padding:18px; }
    .lw-grid, .three-col { grid-template-columns:1fr; }
    .vocab-row { flex-wrap:wrap; }
    .ipa { width:100%; }
    .news-img { display:none; }
    .example-compare { flex-direction:column; }
    .pro-table { font-size:0.8rem; }
    .pro-table td, .pro-table th { padding:8px; }
}

/* --- 11. WARNING BOX (intro section) --- */
.warning-box { background:#2a1a00; border:1px solid #f39c12; border-radius:6px; padding:14px 18px; margin-top:15px; font-size:0.9rem; color:#f0c080; line-height:1.9; }
.warning-box em { color:#ddd; font-style:italic; }