/* EnglishGate Vocabulary Design v2
   Presentation-only vocabulary upgrade for the real student experience.
   Preserves vocabulary content, pronunciation, click-to-meaning behavior,
   grading, answer state, progress, navigation, and teacher/admin views. */

:root{
  --eg-vocab-primary:#2563EB;
  --eg-vocab-accent:#7C3AED;
  --eg-vocab-text:#0F172A;
  --eg-vocab-muted:#64748B;
  --eg-vocab-bg:#F8FAFC;
  --eg-vocab-card:#FFFFFF;
  --eg-vocab-border:#E2E8F0;
  --eg-vocab-success:#16A34A;
  --eg-vocab-error:#DC2626;
  --eg-vocab-shadow:0 8px 24px rgba(15,23,42,.05);
}

body.englishgate-student-mode .eg-vocabulary-page{color:var(--eg-vocab-text)!important}
body.englishgate-student-mode .eg-vocabulary-page button:focus-visible,
body.englishgate-student-mode .eg-vocabulary-page a:focus-visible,
body.englishgate-student-mode .eg-vocabulary-page input:focus-visible,
body.englishgate-student-mode .eg-vocabulary-page textarea:focus-visible,
body.englishgate-student-mode .eg-vocabulary-page select:focus-visible{outline:3px solid rgba(37,99,235,.25)!important;outline-offset:2px!important}

body.englishgate-student-mode .eg-vocabulary-page .eg-skill-hero{border:1px solid var(--eg-vocab-border)!important;border-radius:18px!important;background:var(--eg-vocab-card)!important;box-shadow:var(--eg-vocab-shadow)!important}
body.englishgate-student-mode .eg-vocabulary-page .eg-skill-kicker{color:var(--eg-vocab-accent)!important;font-weight:900!important;letter-spacing:.07em!important}
body.englishgate-student-mode .eg-vocabulary-page .eg-skill-hero h1{color:var(--eg-vocab-text)!important;letter-spacing:-.028em!important;line-height:1.15!important}
body.englishgate-student-mode .eg-vocabulary-page .eg-skill-hero p{color:var(--eg-vocab-muted)!important;line-height:1.6!important}
body.englishgate-student-mode .eg-vocabulary-page .eg-question-count{border:1px solid #DDD6FE!important;border-radius:999px!important;background:#F5F3FF!important;color:#6D28D9!important;font-weight:800!important}

body.englishgate-student-mode .eg-vocab-reference{border:1px solid var(--eg-vocab-border)!important;border-radius:18px!important;background:var(--eg-vocab-card)!important;box-shadow:var(--eg-vocab-shadow)!important}
body.englishgate-student-mode .eg-vocab-reference .eg-panel-heading small{color:var(--eg-vocab-accent)!important;font-weight:900!important;letter-spacing:.06em!important;text-transform:uppercase!important}
body.englishgate-student-mode .eg-vocab-reference .eg-panel-heading h2{color:var(--eg-vocab-text)!important;letter-spacing:-.02em!important}
body.englishgate-student-mode .eg-vocab-reference .eg-panel-heading p{color:var(--eg-vocab-muted)!important;line-height:1.55!important}
body.englishgate-student-mode .eg-vocab-reference-grid{display:grid!important;gap:10px!important}
body.englishgate-student-mode .eg-vocab-reference-card{position:relative!important;padding:14px 14px 14px 48px!important;border:1px solid var(--eg-vocab-border)!important;border-radius:14px!important;background:#fff!important;box-shadow:none!important}
body.englishgate-student-mode .eg-vocab-reference-card>span:first-child{position:absolute!important;left:13px!important;top:13px!important;width:26px!important;height:26px!important;display:grid!important;place-items:center!important;border-radius:8px!important;background:#F5F3FF!important;color:#6D28D9!important;font-size:.75rem!important;font-weight:900!important}
body.englishgate-student-mode .eg-vocab-reference-card strong{display:block!important;margin-bottom:4px!important;color:var(--eg-vocab-text)!important;font-size:1rem!important;line-height:1.25!important}
body.englishgate-student-mode .eg-vocab-reference-card p{margin:0!important;color:#334155!important;font-size:.92rem!important;line-height:1.5!important}
body.englishgate-student-mode .eg-vocab-reference-card small{display:block!important;margin-top:7px!important;color:var(--eg-vocab-muted)!important;font-size:.84rem!important;line-height:1.45!important}
body.englishgate-student-mode .eg-vocab-reference-card button,
body.englishgate-student-mode .eg-vocabulary-page [data-pronounce],
body.englishgate-student-mode .eg-vocabulary-page [data-vocab-pronounce]{min-width:44px!important;min-height:44px!important;border:1px solid var(--eg-vocab-border)!important;border-radius:11px!important;background:#fff!important;color:var(--eg-vocab-primary)!important}
body.englishgate-student-mode .eg-vocabulary-page .eg-tip-card{border:1px solid #DDD6FE!important;border-radius:14px!important;background:#FAF5FF!important;color:#4C1D95!important}

body.englishgate-student-mode .eg-vocabulary-page .eg-task-panel{border:1px solid var(--eg-vocab-border)!important;border-radius:18px!important;background:var(--eg-vocab-card)!important;box-shadow:var(--eg-vocab-shadow)!important}
body.englishgate-student-mode .eg-vocabulary-page .eg-task-panel-head{border-bottom-color:var(--eg-vocab-border)!important}
body.englishgate-student-mode .eg-vocabulary-page .eg-task-panel-head small{color:var(--eg-vocab-accent)!important;font-weight:900!important;letter-spacing:.06em!important}
body.englishgate-student-mode .eg-vocabulary-page .eg-task-panel-head h2{color:var(--eg-vocab-text)!important;letter-spacing:-.02em!important}
body.englishgate-student-mode .eg-vocabulary-page .eg-task-panel-head>span{color:var(--eg-vocab-muted)!important}
body.englishgate-student-mode .eg-vocabulary-page .core-group-head{margin-top:18px!important;padding:9px 11px!important;border:1px solid var(--eg-vocab-border)!important;border-radius:11px!important;background:#F8FAFC!important;color:#334155!important}
body.englishgate-student-mode .eg-vocabulary-page .core-group-head span{font-weight:850!important}
body.englishgate-student-mode .eg-vocabulary-page .core-group-head strong{color:var(--eg-vocab-muted)!important;font-size:.78rem!important}

body.englishgate-student-mode .eg-vocabulary-page .vocab-core-card,
body.englishgate-student-mode .eg-vocabulary-page .guided-question{border:1px solid var(--eg-vocab-border)!important;border-radius:15px!important;background:#fff!important;box-shadow:none!important}
body.englishgate-student-mode .eg-vocabulary-page .vocab-core-card .question-stage span,
body.englishgate-student-mode .eg-vocabulary-page .guided-question .question-stage span{color:#6D28D9!important;font-size:.74rem!important;font-weight:900!important;letter-spacing:.03em!important}
body.englishgate-student-mode .eg-vocabulary-page .vocab-core-card>p,
body.englishgate-student-mode .eg-vocabulary-page .guided-question>p{color:var(--eg-vocab-text)!important;font-size:1.04rem!important;line-height:1.5!important}
body.englishgate-student-mode .eg-vocabulary-page .mcq-picker,
body.englishgate-student-mode .eg-vocabulary-page .mcq-options{display:grid!important;gap:9px!important}
body.englishgate-student-mode .eg-vocabulary-page .mcq-picker label,
body.englishgate-student-mode .eg-vocabulary-page .mcq-option,
body.englishgate-student-mode .eg-vocabulary-page label:has(input[type="radio"]),
body.englishgate-student-mode .eg-vocabulary-page label:has(input[type="checkbox"]){min-height:52px!important;border:1px solid var(--eg-vocab-border)!important;border-radius:12px!important;background:#fff!important;color:#1E293B!important;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease!important}
body.englishgate-student-mode .eg-vocabulary-page .mcq-picker label:hover,
body.englishgate-student-mode .eg-vocabulary-page .mcq-option:hover,
body.englishgate-student-mode .eg-vocabulary-page label:has(input[type="radio"]):hover,
body.englishgate-student-mode .eg-vocabulary-page label:has(input[type="checkbox"]):hover{border-color:#C4B5FD!important;background:#FAFAFF!important}
body.englishgate-student-mode .eg-vocabulary-page .mcq-picker label:has(input:checked),
body.englishgate-student-mode .eg-vocabulary-page .mcq-option:has(input:checked),
body.englishgate-student-mode .eg-vocabulary-page label:has(input[type="radio"]:checked),
body.englishgate-student-mode .eg-vocabulary-page label:has(input[type="checkbox"]:checked){border-color:#8B5CF6!important;background:#F5F3FF!important;box-shadow:0 0 0 3px rgba(124,58,237,.07)!important}

body.englishgate-student-mode .eg-vocabulary-page .core-exact-entry{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;align-items:stretch!important}
body.englishgate-student-mode .eg-vocabulary-page .core-exact-entry input{min-height:50px!important;border:1px solid #CBD5E1!important;border-radius:12px!important;background:#fff!important;color:var(--eg-vocab-text)!important;font-size:1rem!important}
body.englishgate-student-mode .eg-vocabulary-page .core-exact-entry button{min-height:50px!important;border:1px solid #C4B5FD!important;border-radius:12px!important;background:#fff!important;color:#6D28D9!important;font-weight:800!important}
body.englishgate-student-mode .eg-vocabulary-page .core-inline-feedback{margin-top:9px!important;line-height:1.45!important;font-weight:750!important}
body.englishgate-student-mode .eg-vocabulary-page .is-correct,
body.englishgate-student-mode .eg-vocabulary-page .correct,
body.englishgate-student-mode .eg-vocabulary-page [class*="feedback"][class*="good"]{border-color:#BBF7D0!important;background:#F0FDF4!important;color:#166534!important}
body.englishgate-student-mode .eg-vocabulary-page .is-wrong,
body.englishgate-student-mode .eg-vocabulary-page .incorrect,
body.englishgate-student-mode .eg-vocabulary-page [class*="feedback"][class*="bad"]{border-color:#FECACA!important;background:#FEF2F2!important;color:#991B1B!important}
body.englishgate-student-mode .eg-vocabulary-page .skill-action-row .primary-btn,
body.englishgate-student-mode .eg-vocabulary-page #checkActivity{min-height:50px!important;border-radius:12px!important;background:var(--eg-vocab-primary)!important;color:#fff!important;font-weight:850!important}

body.englishgate-student-mode .a1-context-vocab-runner{width:min(720px,100%)!important;max-width:720px!important;margin:0 auto!important}
body.englishgate-student-mode .vocab-runner-card{border:1px solid var(--eg-vocab-border)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--eg-vocab-shadow)!important}
body.englishgate-student-mode .vocab-progress-row{display:flex!important;align-items:center!important;gap:12px!important}
body.englishgate-student-mode .vocab-progress-track{height:7px!important;border-radius:999px!important;background:#E2E8F0!important;overflow:hidden!important}
body.englishgate-student-mode .vocab-progress-track>span{background:var(--eg-vocab-accent)!important;border-radius:999px!important}
body.englishgate-student-mode .vocab-progress-row>strong,
body.englishgate-student-mode [data-vocab-progress-text]{color:var(--eg-vocab-muted)!important;font-size:.82rem!important;white-space:nowrap!important}
body.englishgate-student-mode .vocab-question-slide{color:var(--eg-vocab-text)!important}
body.englishgate-student-mode .vocab-question-meta{color:var(--eg-vocab-muted)!important;font-size:.78rem!important}
body.englishgate-student-mode .vocab-question-meta span:first-child{color:var(--eg-vocab-accent)!important;font-weight:900!important}
body.englishgate-student-mode .vocab-question-heading h1{margin-bottom:8px!important;color:var(--eg-vocab-text)!important;font-size:clamp(1.25rem,4.5vw,1.7rem)!important;line-height:1.3!important;letter-spacing:-.022em!important}
body.englishgate-student-mode .vocab-question-heading p{color:var(--eg-vocab-muted)!important;line-height:1.5!important}
body.englishgate-student-mode .vocab-runner-nav{display:grid!important;grid-template-columns:auto minmax(140px,1fr)!important;gap:10px!important;border-top:1px solid var(--eg-vocab-border)!important}
body.englishgate-student-mode .vocab-prev-btn,
body.englishgate-student-mode .vocab-next-btn{min-height:50px!important;border-radius:12px!important;font-weight:800!important}
body.englishgate-student-mode .vocab-prev-btn{border:1px solid #CBD5E1!important;background:#fff!important;color:#334155!important}
body.englishgate-student-mode .vocab-next-btn{background:var(--eg-vocab-primary)!important;color:#fff!important}
body.englishgate-student-mode .vocab-next-btn:disabled{opacity:.45!important;box-shadow:none!important}

body.englishgate-student-mode .eg-vocabulary-page [data-vocab-word],
body.englishgate-student-mode .eg-vocabulary-page [data-word],
body.englishgate-student-mode .eg-vocabulary-page .vocab-word{text-decoration-thickness:1px!important;text-underline-offset:3px!important}

@media(max-width:980px){body.englishgate-student-mode .eg-vocabulary-page .eg-skill-layout{gap:16px!important}}
@media(max-width:760px){
  body.englishgate-student-mode .eg-vocabulary-page .eg-skill-hero,
  body.englishgate-student-mode .eg-vocab-reference,
  body.englishgate-student-mode .eg-vocabulary-page .eg-task-panel,
  body.englishgate-student-mode .vocab-runner-card{border-radius:15px!important;box-shadow:none!important}
  body.englishgate-student-mode .eg-vocab-reference-card{padding:13px 12px 13px 45px!important;border-radius:12px!important}
  body.englishgate-student-mode .eg-vocabulary-page .vocab-core-card,
  body.englishgate-student-mode .eg-vocabulary-page .guided-question{border-radius:13px!important}
  body.englishgate-student-mode .eg-vocabulary-page .core-exact-entry{grid-template-columns:1fr!important}
  body.englishgate-student-mode .eg-vocabulary-page .core-exact-entry button{width:100%!important}
  body.englishgate-student-mode .vocab-runner-nav{position:sticky!important;bottom:0!important;z-index:3!important;padding-top:10px!important;padding-bottom:calc(8px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.985)!important}
}
@media(max-width:390px){
  body.englishgate-student-mode .vocab-runner-nav{grid-template-columns:1fr 1.25fr!important}
  body.englishgate-student-mode .vocab-prev-btn span{display:none!important}
  body.englishgate-student-mode .vocab-question-heading h1{font-size:1.2rem!important}
}
@media(prefers-reduced-motion:reduce){
  body.englishgate-student-mode .eg-vocabulary-page *,body.englishgate-student-mode .eg-vocabulary-page *::before,body.englishgate-student-mode .eg-vocabulary-page *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}