/* GENX ENGLISH LAB V1 — public, no-login learning + exam surface */
.english-page { --english-pink:#ff4081; --english-cyan:#18ffff; --english-green:#00ff41; }
.english-terminal { position:relative; }
.js .english-panel { display:none; }
.js .english-panel.is-active { display:block; }
.no-js .english-panel { display:block; margin-bottom:18px; }
.english-panel { animation:englishFade .22s ease; }
@keyframes englishFade { from{opacity:.18} to{opacity:1} }
.english-hero,.english-chapter-head,.english-exam-cta,.english-info-card,.english-question-card,.english-result-card,.english-review-card,.english-lesson-card { border:1px solid rgba(24,255,255,.22); border-radius:18px; background:rgba(10,14,16,.88); box-shadow:inset 0 0 28px rgba(24,255,255,.026); }
.english-hero { padding:26px; margin-bottom:18px; }
.english-hero h1,.english-chapter-head h1,.english-exam-head h1,.english-result-card h1,.english-review-head h1 { margin:0; font-family:"Orbitron","Kanit",sans-serif; line-height:1.28; }
.english-hero h1 { font-size:clamp(29px,4.4vw,46px); }
.english-hero h1 strong { color:var(--english-cyan); }
.english-hero p,.english-chapter-head p,.english-exam-cta p,.english-info-card p { color:#d4d4d4; }
.english-hero-actions,.english-result-actions,.english-exam-cta-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.english-primary-btn,.english-soft-btn,.english-submit-btn,.english-back-link,.english-reset-link { font:600 15px/1.2 "Kanit",sans-serif; cursor:pointer; }
.english-primary-btn,.english-soft-btn,.english-submit-btn { min-height:44px; padding:0 16px; border-radius:999px; }
.english-primary-btn { border:1px solid var(--english-cyan); background:var(--english-cyan); color:#001010; font-weight:700; box-shadow:0 0 12px rgba(24,255,255,.12); }
.english-primary-btn:hover,.english-primary-btn:focus-visible { box-shadow:0 0 20px rgba(24,255,255,.30); outline:none; }
.english-primary-btn:disabled,.english-soft-btn:disabled { opacity:.36; cursor:not-allowed; box-shadow:none; }
.english-soft-btn { border:1px solid rgba(24,255,255,.44); background:transparent; color:var(--english-cyan); }
.english-soft-btn:hover,.english-soft-btn:focus-visible { background:rgba(24,255,255,.07); outline:none; }
.english-menu-block { margin:18px 0; }
.english-section-label,.english-panel-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#8eaaa8; font:700 12px/1.3 "Courier Prime",monospace; letter-spacing:.55px; }
.english-section-label { padding:4px 4px 10px; }
.english-home-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.english-home-card { position:relative; display:grid; grid-template-columns:54px 1fr 24px; gap:14px; align-items:center; width:100%; padding:17px 18px; overflow:hidden; border:0; border-radius:16px; background:rgba(10,14,16,.62); color:#fff; text-align:left; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(24,255,255,.12); transition:background .2s ease,box-shadow .2s ease; }
.english-home-card::before { content:""; position:absolute; left:0; top:11px; bottom:11px; width:2px; background:rgba(255,64,129,.85); box-shadow:0 0 12px rgba(255,64,129,.45); }
.english-home-card:hover,.english-home-card:focus-visible { background:linear-gradient(118deg,rgba(24,255,255,.075),rgba(255,64,129,.045) 58%,rgba(10,14,16,.60)); box-shadow:inset 0 0 0 1px rgba(24,255,255,.22),0 0 16px rgba(24,255,255,.06); outline:none; }
.english-card-index { color:var(--english-pink); font:900 18px/1 "Orbitron",sans-serif; }
.english-card-copy strong { display:block; color:#fff; font-size:17px; }
.english-card-copy small { display:block; margin-top:3px; color:#9fa7a7; font-size:13px; }
.english-home-card>i { color:var(--english-cyan); opacity:.78; }
.english-exam-cta { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:24px; margin:18px 0; }
.english-exam-cta h2,.english-info-card h2 { margin:2px 0 8px; color:var(--english-cyan); font-size:26px; }
.english-exam-meta { display:flex; flex-wrap:wrap; gap:9px 16px; margin-top:14px; color:#9faeac; font-size:13px; }
.english-exam-meta i { color:var(--english-green); margin-right:5px; }
.english-exam-cta-actions { min-width:170px; flex-direction:column; margin-top:0; }
.english-info-card { padding:22px; }
.english-flow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0; color:#d8d8d8; }
.english-flow span { display:inline-flex; align-items:center; gap:8px; }
.english-flow b { color:var(--english-pink); font-family:"Orbitron",sans-serif; }
.english-flow i { color:#596866; font-size:11px; }
.english-panel-topline { min-height:38px; padding:5px 2px 9px; margin-bottom:14px; border-bottom:1px solid rgba(24,255,255,.12); }
.english-back-link,.english-reset-link { padding:6px 0; border:0; background:transparent; color:var(--english-cyan); }
.english-back-link:hover,.english-reset-link:hover { color:#fff; }
.english-chapter-head { padding:24px; margin-bottom:16px; }
.english-chapter-head h1 { color:#fff; font-size:clamp(28px,4vw,42px); }
.english-chapter-head p { margin:12px 0 0; }
.english-lesson-stack { display:flex; flex-direction:column; gap:14px; }
.english-lesson-card { padding:22px; }
.english-lesson-card h3 { margin:0 0 13px; color:var(--english-cyan); font-size:23px; }
.english-lesson-body p { margin:8px 0; color:#d5d5d5; }
.english-example { padding:8px 12px; border-left:2px solid rgba(255,64,129,.8); background:rgba(255,64,129,.035); color:#f1f1f1!important; font-family:"Courier Prime","Kanit",monospace; }
.english-code { margin:10px 0; padding:10px 13px; border-left:3px solid var(--english-cyan); background:#020505; color:#89e39f; font:700 14px/1.6 "Courier Prime",monospace; }
.english-keyword { color:#c7ffd0!important; }
.english-note { padding:10px 12px; border-radius:10px; background:rgba(255,64,129,.05); color:#d9c6cd!important; }
.english-numbered { padding-left:4px; }
.english-mini-label { margin:12px 0 6px; color:var(--english-pink); font:700 12px/1.3 "Courier Prime",monospace; letter-spacing:.5px; }
.english-table-wrap { width:100%; overflow-x:auto; margin:12px 0; }
.english-table { min-width:680px; font-size:14px; }
.english-table th { color:var(--english-cyan); }
.english-chapter-nav { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center; margin-top:16px; }
.english-chapter-nav>button:last-child { justify-self:end; }
.english-exam-head,.english-review-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.english-exam-head h1,.english-review-head h1 { font-size:clamp(25px,3.5vw,36px); }
.english-progress-wrap { margin-bottom:14px; padding:14px 16px; border:1px solid rgba(24,255,255,.14); border-radius:14px; background:rgba(8,12,13,.62); }
.english-progress-copy { display:flex; justify-content:space-between; gap:12px; color:#a8b6b5; font:700 12px/1.3 "Courier Prime",monospace; }
.english-progress-track,.english-result-bar { height:5px; margin-top:10px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.08); }
.english-progress-track>div,.english-result-bar>div { width:0; height:100%; background:linear-gradient(90deg,var(--english-cyan),var(--english-green)); transition:width .25s ease; }
.english-question-card,.english-review-card { padding:24px; }
.english-question-number { margin-bottom:10px; color:var(--english-pink); font:900 12px/1.3 "Orbitron",sans-serif; letter-spacing:.8px; }
.english-question-card h2,.english-review-card h2 { margin:0 0 18px; color:#f4f4f4; font-size:21px; line-height:1.65; white-space:pre-line; }
.english-options,.english-review-options { display:grid; gap:10px; }
.english-option { display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:start; width:100%; padding:13px 14px; border:1px solid rgba(255,255,255,.10); border-radius:13px; background:rgba(255,255,255,.018); color:#dedede; text-align:left; cursor:pointer; transition:border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.english-option:hover,.english-option:focus-visible { border-color:rgba(24,255,255,.40); background:rgba(24,255,255,.04); outline:none; }
.english-option.is-selected { border-color:rgba(24,255,255,.72); background:rgba(24,255,255,.075); box-shadow:inset 0 0 18px rgba(24,255,255,.025); }
.english-option-key { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid rgba(24,255,255,.30); border-radius:50%; color:var(--english-cyan); font:700 12px/1 "Orbitron",sans-serif; }
.english-exam-nav { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; margin-top:14px; }
.english-exam-nav>button:last-child { justify-self:end; }
.english-jump-wrap { display:flex; align-items:center; gap:7px; color:#8e9a99; font-size:12px; }
.english-jump-wrap select { padding:7px 8px; border:1px solid rgba(24,255,255,.25); border-radius:9px; background:#111619; color:#e8e8e8; }
.english-submit-zone { margin-top:14px; padding:18px; border:1px solid rgba(0,255,65,.24); border-radius:14px; background:rgba(0,255,65,.025); text-align:center; }
.english-submit-zone p { margin:0 0 10px; color:#a9cbb0; }
.english-submit-btn { border:1px solid var(--english-green); background:var(--english-green); color:#001b08; font-weight:800; }
.english-passage { margin-bottom:14px; padding:20px; border:1px solid rgba(255,64,129,.24); border-radius:16px; background:rgba(14,10,13,.82); color:#d8d8d8; white-space:pre-line; }
.english-passage::before { content:"READING PASSAGE"; display:block; margin-bottom:10px; color:var(--english-pink); font:700 11px/1.3 "Courier Prime",monospace; letter-spacing:.7px; }
.english-result-card { padding:28px; text-align:center; }
.english-score-ring { display:flex; align-items:baseline; justify-content:center; gap:5px; margin:26px auto 8px; }
.english-score-ring strong { color:var(--english-cyan); font:900 clamp(64px,12vw,104px)/.9 "Orbitron",sans-serif; text-shadow:0 0 22px rgba(24,255,255,.16); }
.english-score-ring span { color:#8a9997; font-size:20px; }
.english-result-grade { color:var(--english-green); font:900 18px/1.3 "Orbitron","Kanit",sans-serif; }
.english-result-bar { max-width:540px; height:7px; margin:18px auto 22px; }
.english-breakdown { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:620px; margin:0 auto; text-align:left; }
.english-breakdown-item { padding:13px 14px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.02); }
.english-breakdown-item span { display:block; color:#9ba6a5; font-size:12px; }
.english-breakdown-item strong { display:block; margin-top:3px; color:#fff; font-size:18px; }
.english-result-actions { justify-content:center; }
.english-review-filter { display:flex; align-items:center; gap:7px; color:#b0b7b6; font-size:13px; }
.english-review-filter input { accent-color:var(--english-cyan); }
.english-review-option { padding:12px 14px; border:1px solid rgba(255,255,255,.09); border-radius:12px; color:#d6d6d6; }
.english-review-option.is-correct { border-color:rgba(0,255,65,.50); background:rgba(0,255,65,.055); }
.english-review-option.is-wrong-user { border-color:rgba(255,64,129,.50); background:rgba(255,64,129,.055); }
.english-review-option small { display:block; margin-top:3px; color:#94a09e; }
.english-explanation { margin-top:18px; padding-top:16px; border-top:1px solid rgba(24,255,255,.12); }
.english-explanation>span { color:var(--english-green); font:700 11px/1.3 "Courier Prime",monospace; letter-spacing:.65px; }
.english-explanation>div { margin-top:8px; color:#d8d8d8; white-space:pre-line; }
#reviewPosition { color:#899997; font:700 12px/1.3 "Courier Prime",monospace; }
@media (max-width:720px){
 .english-hero,.english-chapter-head,.english-question-card,.english-review-card,.english-result-card,.english-lesson-card,.english-info-card,.english-exam-cta{padding:18px;border-radius:16px}
 .english-exam-cta{grid-template-columns:1fr}
 .english-exam-cta-actions{min-width:0;flex-direction:row}
 .english-home-card{grid-template-columns:44px 1fr 18px;padding:15px}
 .english-card-copy strong{font-size:15px}
 .english-card-copy small{font-size:12px}
 .english-flow{display:grid;grid-template-columns:1fr}
 .english-flow>i{display:none}
 .english-chapter-nav{grid-template-columns:1fr}
 .english-chapter-nav>button:last-child{justify-self:stretch}
 .english-chapter-nav .english-primary-btn,.english-chapter-nav .english-soft-btn{width:100%}
 .english-exam-head,.english-review-head{align-items:flex-start;flex-direction:column}
 .english-progress-copy{font-size:10px}
 .english-question-card h2,.english-review-card h2{font-size:18px}
 .english-exam-nav{grid-template-columns:1fr 1fr}
 .english-jump-wrap{grid-column:1/-1;grid-row:2;justify-content:center}
 .english-breakdown{grid-template-columns:1fr}
 .english-result-actions>*{width:100%}
 .english-exam-cta-actions>*{flex:1 1 140px}
}

.no-js .english-panel[data-panel="exam"],.no-js .english-panel[data-panel="result"],.no-js .english-panel[data-panel="review"]{display:none;}

/* =========================================================
   GENX ENGLISH LAB V1.1 — Navigation polish
   - Previous / Next controls use equal visual width.
   - Navigation rows get breathing room above the next divider/footer.
   - No movement on hover; existing glow-only interaction remains intact.
   ========================================================= */
.english-page {
  --english-nav-button-width: 220px;
}

.english-chapter-nav {
  margin: 16px 0 22px;
}
.english-exam-nav {
  margin: 14px 0 22px;
}

.english-chapter-nav > .english-primary-btn,
.english-chapter-nav > .english-soft-btn,
.english-exam-nav > .english-primary-btn,
.english-exam-nav > .english-soft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: var(--english-nav-button-width);
  max-width: 100%;
}

.english-chapter-nav > button:first-child,
.english-exam-nav > button:first-child {
  justify-self: start;
}
.english-chapter-nav > button:last-child,
.english-exam-nav > button:last-child {
  justify-self: end;
}

@media (max-width: 720px) {
  .english-chapter-nav,
  .english-exam-nav {
    margin-bottom: 18px;
  }
  .english-chapter-nav > .english-primary-btn,
  .english-chapter-nav > .english-soft-btn,
  .english-exam-nav > .english-primary-btn,
  .english-exam-nav > .english-soft-btn {
    width: 100%;
  }
}

/* =========================================================
   GENX ENGLISH LAB V1.2 — Footer breathing room
   - Keep the terminal footer divider visually separated from
     the final card / submit zone in every English Lab mode.
   - Scoped to English Lab only; no exam or navigation logic changes.
   ========================================================= */
.english-page .english-terminal > .seo-footer {
  margin-top: 20px;
}

@media (max-width: 720px) {
  .english-page .english-terminal > .seo-footer {
    margin-top: 16px;
  }
}