:root { color-scheme: light; --app-bg:#eef4ff; --ink:#020617; --ink-soft:#64748b; --muted:#64748b; --line:#e2e8f0; --line-strong:#cbd5e1; --soft:#f8fafc; --slate-950:#020617; --slate-900:#0f172a; --slate-800:#1e293b; --slate-700:#334155; --slate-600:#475569; --slate-500:#64748b; --slate-300:#cbd5e1; --slate-200:#e2e8f0; --slate-100:#f1f5f9; --slate-50:#f8fafc; --blue:#2563eb; --blue-700:#1d4ed8; --blue-600:#2563eb; --blue-500:#3b82f6; --blue-200:#bfdbfe; --blue-100:#dbeafe; --blue-50:#eff6ff; --cyan-600:#0891b2; --emerald-700:#047857; --emerald-600:#059669; --emerald-100:#d1fae5; --emerald-50:#ecfdf5; --amber-900:#78350f; --amber-100:#fef3c7; --amber-50:#fffbeb; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: radial-gradient(circle at top left, rgba(59,130,246,.18), transparent 32rem), linear-gradient(135deg,var(--blue-100) 0%,var(--slate-50) 44%,#e0f2fe 100%); color: var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.candidate-page { min-height: 100dvh; }
.app-shell { width: 100%; min-height: 100dvh; background: linear-gradient(180deg,#f8fafc 0%,#eef4ff 100%); display: flex; flex-direction: column; }
.appbar { position: sticky; top: 0; z-index: 20; background: rgba(248,250,252,.92); border-bottom: 1px solid rgba(148,163,184,.25); backdrop-filter: blur(18px); padding-top: max(.45rem, env(safe-area-inset-top)); }
.appbar-inner { width: min(100%, 1120px); margin: 0 auto; padding: .55rem 1rem .8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; min-width: 0; color: inherit; text-decoration: none; }
.brand-copy { display: grid; min-width: 0; }
.brand-copy strong { font-weight: 900; letter-spacing: -.03em; }
.brand-copy small { color: var(--muted); font-weight: 700; }
.ew-logo { width: 2.4rem; height: 2.4rem; border-radius: 1rem; display: grid; place-items: center; color: #fff; font-weight: 950; letter-spacing: -.05em; background: linear-gradient(135deg,var(--blue-600) 0%,var(--cyan-600) 100%); box-shadow: 0 10px 18px rgba(37,99,235,.24); }
.app-content { flex: 1; width: min(100%, 1120px); margin: 0 auto; padding: 1rem; }
.app-content.narrow { width: min(100%, 680px); }
.app-content.narrow form, .app-content.narrow .glass-card, .app-content.narrow .info-card { width: 100%; max-width: 100%; min-width: 0; }
.app-content.narrow .input, .app-content.narrow .btn { min-width: 0; }
[data-otp-resend-button] { white-space: normal; }
.app-content.with-bottom { padding-bottom: 14rem; }
.app-content.with-nav { padding-bottom: 8.5rem; }
.app-grid { display: grid; gap: 1rem; }
.stack { display: grid; gap: 1rem; }
.stack > * { grid-area: auto !important; }
.screen-heading, .hero-copy { margin: .5rem 0 1.25rem; }
.screen-heading h1, .hero-copy h1 { margin: .35rem 0 0; font-size: clamp(2rem, 7vw, 3.6rem); line-height: .96; font-weight: 950; letter-spacing: -.055em; }
.screen-heading p, .hero-copy p, .muted { margin: .55rem 0 0; color: var(--muted); line-height: 1.55; font-weight: 600; }
.pill { display: inline-flex; align-items: center; gap: .45rem; width: fit-content; border-radius: 999px; background: var(--blue-50); color: var(--blue-700); padding: .45rem .75rem; font-size: .78rem; font-weight: 900; box-shadow: inset 0 0 0 1px var(--blue-100); }
.pill:before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; }
.glass-card, .choice-card, .course-card, .question-card, .next-card, .certificate-card { background: rgba(255,255,255,.9); border: 1px solid rgba(226,232,240,.95); box-shadow: 0 16px 34px rgba(15,23,42,.07); }
.choice-card, .course-card, .mini-card, .step-card, .help-card { color: inherit; text-decoration: none; }
.choice-card { border-radius: 2rem; padding: 1.25rem; display: grid; gap: .8rem; transition: transform .16s ease, box-shadow .16s ease; }
.choice-card:active, .course-card:active, .step-card:active { transform: scale(.99); }
.choice-card strong { font-size: 1.45rem; line-height: 1.05; font-weight: 950; letter-spacing: -.04em; }
.choice-card p, .course-card p, .mini-card span, .help-card span { color: var(--muted); font-weight: 600; line-height: 1.45; }
.choice-icon { width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border-radius: 1.25rem; background: var(--blue-600); color: #fff; font-weight: 950; box-shadow: 0 12px 22px rgba(37,99,235,.2); }
.choice-icon.success { background: var(--emerald-600); box-shadow: 0 12px 22px rgba(5,150,105,.14); }
.action-grid { display: grid; gap: 1rem; }
.action-grid.two { grid-template-columns: 1fr; }
.help-card { display: grid; gap: .25rem; border-radius: 1.5rem; background: #0f172a; color: #fff; padding: 1rem; }
.help-card span { color: #cbd5e1; }
.back-link, .secondary-link { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--blue-700); font-weight: 900; text-decoration: none; }
.btn.btn-primary { border-color: var(--blue-600); background-color: var(--blue-600); color: #fff; box-shadow: none; }
.btn.btn-primary:hover, .btn.btn-primary:focus-visible { border-color: var(--blue-700); background-color: var(--blue-700); color: #fff; }
.btn.btn-primary:active { border-color: var(--blue-700); background-color: var(--blue-700); transform: scale(.99); }
.btn.btn-outline { border-color: var(--line-strong); color: var(--slate-800); background-color: transparent; }
.btn.btn-outline:hover, .btn.btn-outline:focus-visible { border-color: var(--blue-200); background-color: var(--blue-50); color: var(--blue-700); }
.btn.btn-ghost { color: var(--slate-500); }
.btn.btn-ghost:hover, .btn.btn-ghost:focus-visible { background-color: var(--slate-100); color: var(--slate-700); }
.bottom-action { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 30; margin: 0 auto; width: min(100%, 680px); background: rgba(255,255,255,.96); border-top: 1px solid rgba(148,163,184,.28); box-shadow: 0 -18px 30px rgba(15,23,42,.08); padding: .8rem 1rem calc(.85rem + env(safe-area-inset-bottom)); backdrop-filter: blur(16px); }
.attempt-shell .bottom-action { padding-top: .55rem; padding-bottom: calc(.6rem + env(safe-area-inset-bottom)); }
.attempt-shell .app-content.with-bottom { padding-bottom: 8.25rem; }
.attempt-action-grid { display: grid; grid-template-columns: .9fr .78fr 1.12fr; gap: .45rem; align-items: stretch; }
.attempt-action-grid .btn { min-height: 3.1rem; padding-left: .45rem; padding-right: .45rem; white-space: normal; font-size: .82rem; line-height: 1.05; font-weight: 950; }
.tap-target { min-height: 3.5rem; }
.step-strip { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-weight: 900; }
.step-dot { width: .5rem; height: .5rem; border-radius: 999px; background: #cbd5e1; }
.step-dot.active { background: var(--blue-600); transform: scale(1.14); }
.info-card { border-radius: 1.5rem; padding: 1rem; border: 1px solid; display: grid; gap: .25rem; }
.info-card strong { font-weight: 950; }
.info-card p { margin: 0; line-height: 1.45; font-weight: 650; }
.tone-info { color: #1e3a8a; background: var(--blue-50); border-color: var(--blue-100); }
.tone-warning { color: var(--amber-900); background: var(--amber-50); border-color: var(--amber-100); }
.tone-success { color: #065f46; background: var(--emerald-50); border-color: var(--emerald-100); }
.status-badge { width: fit-content; border-radius: 999px; background: #e2e8f0; color: #334155; padding: .35rem .65rem; font-size: .75rem; font-weight: 900; text-transform: capitalize; }
.status-badge.success { background: var(--emerald-50); color: var(--emerald-700); box-shadow: inset 0 0 0 1px var(--emerald-100); }
.status-badge.warn { background: var(--amber-50); color: var(--amber-900); box-shadow: inset 0 0 0 1px var(--amber-100); }
.status-badge.danger { background: #fef2f2; color: #991b1b; box-shadow: inset 0 0 0 1px #fee2e2; }
.fact-list { display: grid; gap: .65rem; }
.fact-list.compact { gap: .45rem; }
.fact-item { display: flex; justify-content: space-between; gap: 1rem; align-items: center; border-radius: 1.15rem; background: rgba(255,255,255,.74); border: 1px solid var(--line); padding: .9rem 1rem; }
.fact-item span { color: var(--muted); font-weight: 750; }
.fact-item strong { text-align: right; font-weight: 950; }
.section-label { display: block; margin-bottom: .55rem; font-size: .78rem; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; font-weight: 950; }
.detail-card { display: grid; gap: .85rem; border-radius: 1.5rem; background: rgba(255,255,255,.86); border: 1px solid var(--line); padding: 1rem; box-shadow: 0 12px 24px rgba(15,23,42,.05); }
.detail-card p { margin: 0; color: var(--muted); font-weight: 650; line-height: 1.5; }
.detail-card-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.detail-card-header strong { font-size: 1.08rem; font-weight: 950; }
.next-card, .course-card, .certificate-card { border-radius: 2rem; padding: 1.25rem; display: grid; gap: .75rem; }
.next-card h2, .course-card strong, .certificate-card h2 { margin: 0; font-size: 1.5rem; line-height: 1.08; font-weight: 950; letter-spacing: -.04em; }
.mini-card { border-radius: 1.5rem; background: rgba(255,255,255,.78); border: 1px solid var(--line); padding: 1rem; display: grid; gap: .25rem; }
.mini-card strong { font-size: 1.1rem; font-weight: 950; }
.checklist { display: grid; gap: .75rem; }
.step-card { display: grid; grid-template-columns: 3.2rem 1fr; gap: .85rem; align-items: center; border-radius: 1.4rem; background: rgba(255,255,255,.82); border: 1px solid var(--line); padding: .85rem; }
.step-card > span { min-height: 3rem; border-radius: 1rem; display: grid; place-items: center; background: var(--blue-100); color: var(--blue-700); font-size: .8rem; font-weight: 950; }
.step-card strong { font-weight: 950; }
.step-card p { margin: .15rem 0 0; color: var(--muted); font-weight: 650; }
.content-text { white-space: pre-wrap; line-height: 1.65; font-weight: 600; }
.instruction-list { border-radius: 1.5rem; background: #fff; border: 1px solid var(--line); padding: 1rem; }
.instruction-list strong { font-weight: 950; }
.instruction-list ul { margin: .65rem 0 0; padding-left: 1.25rem; color: var(--muted); font-weight: 650; line-height: 1.55; }
.question-map { display: grid; gap: .8rem; border-radius: 1.5rem; background: #fff; border: 1px solid var(--line); padding: 1rem; }
.question-map-header { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
.question-map-header strong { font-weight: 950; }
.question-map-header span, .question-map-note { color: var(--muted); font-weight: 700; }
.question-jump-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); gap: .45rem; }
.question-jump { min-height: 3rem; display: grid; place-items: center; border-radius: 1rem; background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100); text-decoration: none; font-weight: 950; }
.question-jump:hover, .question-jump:focus-visible { background: var(--blue-100); color: var(--blue-700); outline: 2px solid rgba(37,99,235,.35); outline-offset: 2px; }
.question-map-note { margin: 0; font-size: .9rem; line-height: 1.45; }
.app-nav { position: static; z-index: 25; width: min(100%, 760px); margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: .35rem; padding: .55rem .75rem calc(.65rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid rgba(148,163,184,.28); backdrop-filter: blur(16px); }
.app-nav a { min-height: 3rem; display: grid; place-items: center; border-radius: 1rem; color: var(--muted); font-weight: 900; text-decoration: none; }
.app-nav a.active { background: var(--blue-100); color: var(--blue-700); }
.attempt-shell { min-height: 100dvh; background: linear-gradient(180deg,#f8fafc,#eef4ff); }
.attempt-bar { position: sticky; top: 0; z-index: 20; background: rgba(248,250,252,.94); border-bottom: 1px solid rgba(148,163,184,.25); backdrop-filter: blur(18px); padding: .9rem 1rem; display: grid; gap: .45rem; }
.attempt-bar h1 { margin: 0; font-size: 1.2rem; font-weight: 950; }
.attempt-bar p { margin: 0; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 900; }
.timer { justify-self: end; grid-row: 1 / span 2; padding: .55rem .8rem; border-radius: 1rem; background: var(--slate-950); color: #fff; font-weight: 950; }
.attempt-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: .8rem; font-weight: 900; }
.question-card { border-radius: 2rem; padding: 1.25rem; }
.question-card > p { margin: 0; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 900; }
.question-card h2 { margin: .7rem 0 1.25rem; font-size: clamp(1.45rem, 5vw, 2.2rem); line-height: 1.1; font-weight: 950; letter-spacing: -.04em; }
.option-list { display: grid; gap: .8rem; }
.option-card { min-height: 3.75rem; display: flex; align-items: center; gap: .75rem; border-radius: 1.2rem; background: #fff; border: 2px solid #e2e8f0; padding: .9rem; font-weight: 850; }
.option-card.selected, .option-card:focus-within { border-color: rgba(37,99,235,.55); box-shadow: 0 0 0 2px rgba(37,99,235,.45), 0 10px 24px rgba(37,99,235,.08); }
.save-status { margin-top: 1rem; border-radius: 1.25rem; padding: .9rem 1rem; font-weight: 900; }
.save-status.saved { background: var(--emerald-50); color: #065f46; border: 1px solid var(--emerald-100); }
.save-status.unsaved { background: var(--amber-50); color: var(--amber-900); border: 1px solid var(--amber-100); }
.save-status.neutral { background: var(--blue-50); color: #1e3a8a; border: 1px solid var(--blue-100); }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
.hidden { display: none; }
.otp-input { font-variant-numeric: tabular-nums; }
@media (min-width: 760px) { .action-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); } .app-shell { background: rgba(248,250,252,.78); } .app-content { padding: 1.4rem; } .bottom-action { border-radius: 1.5rem 1.5rem 0 0; } }
@media (max-width: 380px) { .app-content { padding-left: .75rem; padding-right: .75rem; } .card-body { padding: 1rem; } .screen-heading h1, .hero-copy h1 { font-size: 1.85rem; } }
@media (max-width: 430px) and (max-height: 720px) {
  [data-title="Enter OTP"] .appbar-inner { padding-top: .35rem; padding-bottom: .45rem; }
  [data-title="Enter OTP"] .ew-logo { width: 2.15rem; height: 2.15rem; border-radius: .85rem; }
  [data-title="Enter OTP"] .app-content { padding-top: .55rem; padding-bottom: .75rem; }
  [data-title="Enter OTP"] .back-link { min-height: 2rem; }
  [data-title="Enter OTP"] .screen-heading { margin: .15rem 0 .7rem; }
  [data-title="Enter OTP"] .screen-heading h1 { font-size: 1.65rem; }
  [data-title="Enter OTP"] .screen-heading p { margin-top: .3rem; line-height: 1.35; }
  [data-title="Enter OTP"] .stack { gap: .7rem; }
  #otp-form .card-body { padding: .85rem; gap: .6rem; }
  #otp-form .otp-input { min-height: 3rem; }
  #otp-form .tap-target { min-height: 3.15rem; }
  #otp-form + .info-card { padding: .75rem; gap: .2rem; }
  #otp-form + .info-card p { font-size: .9rem; line-height: 1.3; }
  [data-otp-resend-button] { min-height: 2.75rem; }
  [data-title="Enter OTP"] .secondary-link { min-height: 2.25rem; }
}
@media (min-width: 980px) {
  .app-content.narrow { width: min(100%, 1120px); display: grid; grid-template-columns: minmax(300px,.82fr) minmax(420px,1fr); column-gap: clamp(2.5rem,6vw,5.5rem); align-items: start; }
  .app-content.narrow > .back-link { grid-column: 1 / -1; width: fit-content; }
  .app-content.narrow > .screen-heading { grid-column: 1; position: sticky; top: 6.5rem; margin-top: 1rem; }
  .app-content.narrow > :not(.back-link):not(.screen-heading) { grid-column: 2; }
  .app-content.with-bottom { padding-bottom: 1.5rem; }
  .app-content.with-nav { padding-bottom: 1.5rem; }
  .bottom-action { position: static; transform: none; width: min(100%, 1120px); display: grid; grid-template-columns: minmax(300px,.82fr) minmax(420px,1fr); column-gap: clamp(2.5rem,6vw,5.5rem); background: transparent; border: 0; box-shadow: none; backdrop-filter: none; padding: 0 1.4rem 2rem; }
  .bottom-action > * { grid-column: 2; }
  .app-nav { position: static; width: min(100%, 1120px); grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto 2rem; border: 1px solid rgba(148,163,184,.22); border-radius: 1.5rem; box-shadow: none; padding: .55rem; }
  .attempt-shell .app-content.narrow { width: min(100%, 1120px); display: block; }
  .attempt-shell .question-card { width: min(100%, 920px); margin: 0 auto; }
  .attempt-shell #attempt-save { width: min(100%, 920px); margin-left: auto; margin-right: auto; }
  .attempt-shell .bottom-action { display: block; width: min(100%, 920px); padding-left: 0; padding-right: 0; }
  .attempt-shell .bottom-action > * { grid-column: auto; }
  .mode-home .app-content.narrow { min-height: calc(100dvh - 5rem); grid-template-columns: minmax(360px,.85fr) minmax(520px,1.15fr); align-content: center; }
  .mode-home .app-content.narrow > .hero-copy { grid-column: 1; grid-row: 1; }
  .mode-home .app-content.narrow > .action-grid { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .mode-home .app-content.narrow > .help-card { grid-column: 1; grid-row: 2; align-self: start; }
}
@media (min-width: 1120px) { .app-content.app-grid { grid-template-columns: minmax(0,1fr); } .screen-heading h1, .hero-copy h1 { max-width: 720px; } .app-nav { box-shadow: 0 -18px 30px rgba(15,23,42,.06); } }