/* JobRojgar Online Exam - public and student pages (/online-exam, results, /student/exams).
   Scoped to .oe so nothing leaks into the rest of the site. Follows the site's dark mode
   (html[data-theme="dark"]). */
.oe {
    --oe-brand: #f16330;
    --oe-brand-dark: #c2410c;
    --oe-ink: #1f2937;
    --oe-muted: #4b5563;
    --oe-line: #e5e7eb;
    --oe-card: #ffffff;
    --oe-soft: #fff7ed;
    --oe-ok: #15803d;
    --oe-bad: #b91c1c;
    --oe-info: #1d4ed8;
    max-width: 1140px;
    margin: 0 auto;
    /* The site header (#header) is fixed-top and 80px tall, and joblayout adds no offset for it. */
    padding: 104px 16px 40px;
    color: var(--oe-ink);
}
/* _StudentLayout already pushes its body below the header. */
.oe.oe-in-dash { padding-top: 24px; }
@media (max-width: 991px) {
    .oe { padding-top: 80px; }
    .oe.oe-in-dash { padding-top: 16px; }
}
html[data-theme="dark"] .oe {
    --oe-ink: #e5e7eb;
    --oe-muted: #a1a1aa;
    --oe-line: #374151;
    --oe-card: #1f2937;
    --oe-soft: #2a1d14;
    --oe-ok: #4ade80;
    --oe-bad: #f87171;
    --oe-info: #93c5fd;
}
.oe *, .oe *::before, .oe *::after { box-sizing: border-box; }
.oe a:focus-visible, .oe button:focus-visible, .oe input:focus-visible, .oe select:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.oe h1 { font-size: 28px; font-weight: 800; margin: 0 0 6px; color: var(--oe-ink); }
.oe h2 { font-size: 20px; font-weight: 700; margin: 24px 0 10px; color: var(--oe-ink); }
.oe-lead { color: var(--oe-muted); margin: 0 0 18px; max-width: 760px; }
.oe-crumbs { font-size: 13px; color: var(--oe-muted); margin-bottom: 10px; }
.oe-crumbs a { color: var(--oe-muted); }
.oe-card { background: var(--oe-card); border: 1px solid var(--oe-line); border-radius: 12px; padding: 18px; }
.oe-muted { color: var(--oe-muted); }

/* Category chips + filters */
.oe-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.oe-cats a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--oe-line); border-radius: 999px; background: var(--oe-card); color: var(--oe-ink); font-weight: 600; font-size: 14px; text-decoration: none; min-height: 40px; }
.oe-cats a[aria-current="page"] { background: var(--oe-brand); border-color: var(--oe-brand); color: #fff; }
.oe-cats small { font-weight: 400; opacity: .8; }
.oe-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 18px; }
.oe-filters label { display: flex; flex-direction: column; font-size: 13px; color: var(--oe-muted); gap: 4px; }
.oe-filters input, .oe-filters select { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--oe-line); border-radius: 8px; background: var(--oe-card); color: var(--oe-ink); min-height: 42px; }
.oe-filters input[type="search"] { min-width: 240px; }

/* Buttons */
.oe-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--oe-line); background: var(--oe-card); color: var(--oe-ink); font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; min-height: 44px; }
.oe-btn:hover { text-decoration: none; }
.oe-btn-primary { background: var(--oe-brand); border-color: var(--oe-brand); color: #fff !important; }
.oe-btn-primary:hover { background: var(--oe-brand-dark); border-color: var(--oe-brand-dark); }
.oe-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Exam cards */
.oe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 0; margin: 0; list-style: none; }
.oe-exam { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.oe-exam h3 { font-size: 17px; font-weight: 700; margin: 0; line-height: 1.35; }
.oe-exam h3 a { color: var(--oe-ink); text-decoration: none; }
.oe-exam h3 a:hover { color: var(--oe-brand-dark); text-decoration: underline; }
.oe-exam p { margin: 0; color: var(--oe-muted); font-size: 14px; }
.oe-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.oe-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--oe-soft); color: var(--oe-brand-dark); border: 1px solid transparent; }
.oe-tag-live { background: #dcfce7; color: #166534; }
.oe-tag-soon { background: #dbeafe; color: #1e40af; }
.oe-tag-closed { background: #f3f4f6; color: #374151; }
html[data-theme="dark"] .oe-tag { border-color: var(--oe-line); }
.oe-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; }
.oe-stats div { background: var(--oe-soft); border-radius: 8px; padding: 6px 8px; text-align: center; }
.oe-stats dt { font-size: 11.5px; color: var(--oe-muted); font-weight: 400; }
.oe-stats dd { margin: 0; font-weight: 700; font-size: 15px; }
.oe-exam .oe-btn { margin-top: auto; }
.oe-empty { text-align: center; padding: 40px 16px; color: var(--oe-muted); }
.oe-pager { display: flex; gap: 8px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

/* Exam page */
.oe-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.oe-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 0 0 6px; }
.oe-facts div { background: var(--oe-soft); border-radius: 10px; padding: 10px 12px; }
.oe-facts dt { font-size: 12px; color: var(--oe-muted); font-weight: 400; }
.oe-facts dd { margin: 0; font-size: 18px; font-weight: 800; }
.oe table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.oe th, .oe td { padding: 9px 8px; border-bottom: 1px solid var(--oe-line); text-align: left; }
.oe th { font-weight: 700; }
.oe-table-wrap { overflow-x: auto; }
.oe-instructions li { margin-bottom: 6px; }
.oe-start { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 12px; }
.oe-start label.oe-field { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.oe-start select { font: inherit; padding: 9px 10px; border: 1px solid var(--oe-line); border-radius: 8px; background: var(--oe-card); color: var(--oe-ink); min-height: 44px; }
.oe-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.oe-agree input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.oe-alert { border-radius: 10px; padding: 12px 14px; font-size: 14.5px; border: 1px solid; }
.oe-alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.oe-alert-warn { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.oe-alert-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
html[data-theme="dark"] .oe-alert { background: transparent; color: var(--oe-ink); }
.oe-description { line-height: 1.7; }

/* Result */
.oe-score { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.oe-score-big { font-size: 46px; font-weight: 800; color: var(--oe-brand-dark); line-height: 1; }
.oe-score-big small { font-size: 20px; color: var(--oe-muted); font-weight: 600; }
.oe-pass { font-weight: 800; padding: 4px 12px; border-radius: 999px; }
.oe-pass-yes { background: #dcfce7; color: #166534; }
.oe-pass-no { background: #fee2e2; color: #991b1b; }
.oe-bar { height: 8px; border-radius: 999px; background: var(--oe-line); overflow: hidden; min-width: 80px; }
.oe-bar span { display: block; height: 100%; background: var(--oe-brand); }
.oe-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Review */
.oe-review { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.oe-q-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.oe-q-head h2 { margin: 0; font-size: 16px; }
.oe-q-text { white-space: pre-wrap; margin-bottom: 10px; }
.oe-q-image { max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 10px; }
.oe-opts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.oe-opts li { border: 1px solid var(--oe-line); border-radius: 8px; padding: 8px 10px; display: flex; gap: 8px; align-items: flex-start; }
.oe-opts li.is-key { border-color: var(--oe-ok); background: rgba(21, 128, 61, .08); }
.oe-opts li.is-wrong { border-color: var(--oe-bad); background: rgba(185, 28, 28, .07); }
.oe-opts img { max-width: 220px; height: auto; display: block; margin-top: 6px; }
.oe-opt-note { margin-left: auto; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.oe-outcome-ok { color: var(--oe-ok); font-weight: 700; }
.oe-outcome-bad { color: var(--oe-bad); font-weight: 700; }
.oe-explain { margin-top: 10px; padding: 10px 12px; border-left: 4px solid var(--oe-info); background: rgba(29, 78, 216, .06); border-radius: 0 8px 8px 0; white-space: pre-wrap; }
.oe-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
    .oe-layout { grid-template-columns: 1fr; }
    .oe-start { position: static; }
    .oe h1 { font-size: 23px; }
    .oe-filters input[type="search"] { min-width: 0; width: 100%; }
    .oe-filters label { flex: 1 1 100%; }
}
@media (max-width: 420px) {
    .oe-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Phase 6: ranks and leaderboards */
.oe-rank { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; padding: 12px 16px; border-left: 4px solid var(--oe-brand); background: var(--oe-soft); border-radius: 0 10px 10px 0; margin-bottom: 14px; }
.oe-rank strong { font-size: 18px; }
.oe-board tr.is-you td, .oe-board tr.is-you th { background: var(--oe-soft); font-weight: 700; }
.oe-rank-no { font-weight: 800; color: var(--oe-brand-dark); }
.oe-board tbody tr:nth-child(-n+3) .oe-rank-no { font-size: 17px; }

/* Phase 7: practice */
.oe-practice-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.oe-stack { display: flex; flex-direction: column; gap: 12px; }
.oe-inline { display: flex; flex-wrap: wrap; gap: 12px; }
.oe-inline-form { display: inline; margin: 0; }
.oe label.oe-field { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 14px; }
.oe label.oe-field select, .oe label.oe-field input { font: inherit; font-weight: 400; padding: 9px 10px; border: 1px solid var(--oe-line); border-radius: 8px; background: var(--oe-card); color: var(--oe-ink); min-height: 44px; }
.oe-weak { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.oe-weak li { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.oe-practice-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.oe-pnum { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--oe-line); background: var(--oe-card); color: var(--oe-ink); font-weight: 700; cursor: pointer; }
.oe-pnum.is-current { outline: 3px solid var(--oe-brand); outline-offset: 1px; }
.oe-pnum.is-right { background: #dcfce7; border-color: #16a34a; color: #14532d; }
.oe-pnum.is-wrong { background: #fee2e2; border-color: #dc2626; color: #7f1d1d; }
.oe-pnum.is-done { background: #e0e7ff; border-color: #4f46e5; color: #312e81; }
.oe-pq h2 { margin-top: 0; font-size: 18px; }
.oe-pq h2:focus { outline: none; }
.oe-popts { border: 0; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 8px; }
.oe-popt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--oe-line); border-radius: 10px; padding: 10px 12px; cursor: pointer; min-height: 44px; }
.oe-popt input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.oe-popt img { display: block; max-width: 220px; height: auto; margin-top: 6px; }
.oe-popt.is-chosen { border-color: var(--oe-brand); background: var(--oe-soft); }
.oe-popt.is-key { border-color: var(--oe-ok); background: rgba(21, 128, 61, .08); }
.oe-popt.is-wrong { border-color: var(--oe-bad); background: rgba(185, 28, 28, .07); }
.oe-pfeedback:empty { display: none; }
.oe-pfeedback { margin: 6px 0; }
@media (max-width: 900px) { .oe-practice-grid { grid-template-columns: 1fr; } }

/* Phase 8: performance */
.oe-chart { position: relative; height: 280px; margin-bottom: 12px; }
.oe-chart-sm { height: 220px; }
.oe-insights { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.oe-insight { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 12px; border-left: 4px solid var(--oe-info); background: rgba(29, 78, 216, .05); border-radius: 0 10px 10px 0; }
.oe-insight.is-good { border-left-color: var(--oe-ok); background: rgba(21, 128, 61, .06); }
.oe-insight.is-warn { border-left-color: var(--oe-brand); background: var(--oe-soft); }
.oe-insight > span:nth-child(2) { flex: 1 1 260px; }
.oe-slow { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.oe-slow li { display: flex; flex-direction: column; }
.oe-slow-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.oe details > summary { cursor: pointer; font-weight: 600; margin: 6px 0; }


/* Category chip row: one scrollable line with arrows (/online-exam) */
.oe-hub-cats { position: relative; display: flex; align-items: center; margin-bottom: 14px; }
.oe-hub-chips { position: relative; display: flex; gap: 6px; margin: 0; padding: 2px; list-style: none; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; flex: 1 1 auto; }
.oe-hub-chips::-webkit-scrollbar { display: none; }
.oe-hub-cats.fade-end .oe-hub-chips { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
.oe-hub-cats.fade-start .oe-hub-chips { -webkit-mask-image: linear-gradient(to left, #000 88%, transparent); mask-image: linear-gradient(to left, #000 88%, transparent); }
.oe-hub-cats.fade-start.fade-end .oe-hub-chips { -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.oe-hub-chips li { flex: 0 0 auto; }
.oe-hub-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--oe-line); border-radius: 999px; background: var(--oe-card); color: var(--oe-ink); font-weight: 600; font-size: 13.5px; text-decoration: none; white-space: nowrap; min-height: 36px; }
.oe-hub-chips a:hover { border-color: var(--oe-brand); text-decoration: none; }
.oe-hub-chips a small { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--oe-soft); color: var(--oe-brand-dark); }
.oe-hub-chips a.is-empty { color: var(--oe-muted); font-weight: 500; }
.oe-hub-chips a.is-empty small { background: transparent; color: var(--oe-muted); font-weight: 400; padding: 0; }
.oe-hub-chips a[aria-current="page"] { background: var(--oe-brand); border-color: var(--oe-brand); color: #fff; }
.oe-hub-chips a[aria-current="page"] small { background: rgba(255, 255, 255, .25); color: #fff; }
.oe-hub-arrow { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--oe-line); background: var(--oe-card); color: var(--oe-ink); font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 0 2px; }
.oe-hub-arrow:hover { border-color: var(--oe-brand); color: var(--oe-brand-dark); }
.oe-hub-arrow.is-prev { margin-right: 6px; }
.oe-hub-arrow.is-next { margin-left: 6px; }

/* /online-exam: hero */
.oe-ex-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; padding: 22px 26px; margin-bottom: 16px; border-radius: 16px; color: #fff; background: radial-gradient(circle at 100% 0, rgba(241, 99, 48, .55), transparent 55%), linear-gradient(120deg, #1e1b4b 0%, #312e81 55%, #4338ca 100%); box-shadow: 0 10px 30px rgba(30, 27, 75, .18); }
.oe-ex-hero h1 { color: #fff; font-size: 27px; margin: 8px 0 6px; line-height: 1.25; }
.oe-ex-hero-main > p { margin: 0 0 14px; color: rgba(255, 255, 255, .82); font-size: 15px; max-width: 680px; }
.oe-ex-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 12.5px; font-weight: 600; }
.oe-ex-pill i { color: #4ade80; }
.oe-ex-search { position: relative; display: flex; max-width: 620px; margin: 0 0 12px; background: #fff; border-radius: 12px; padding: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.oe-ex-search > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #6b7280; pointer-events: none; }
.oe-ex-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; color: #1f2937; padding: 9px 10px 9px 36px; min-height: 42px; }
.oe-ex-search input:focus { outline: none; }
.oe-ex-search:focus-within { box-shadow: 0 0 0 3px rgba(241, 99, 48, .55); }
.oe-ex-search button { flex: none; border: 0; border-radius: 9px; background: var(--oe-brand); color: #fff; font-weight: 700; font-size: 15px; padding: 0 22px; cursor: pointer; }
.oe-ex-search button:hover { background: var(--oe-brand-dark); }
.oe-ex-links { display: flex; flex-wrap: wrap; gap: 6px; }
.oe-ex-links a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none; min-height: 34px; }
.oe-ex-links a:hover { background: rgba(255, 255, 255, .14); color: #fff; text-decoration: none; }
.oe .oe-ex-links a:focus-visible, .oe .oe-ex-search button:focus-visible { outline-color: #fff; }
.oe-ex-hero-stats { display: grid; grid-auto-flow: column; gap: 10px; margin: 0; }
.oe-ex-hero-stats div { min-width: 104px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); text-align: center; }
.oe-ex-hero-stats dt { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .75); }
.oe-ex-hero-stats dd { margin: 2px 0 0; font-size: 26px; font-weight: 800; line-height: 1.1; }

/* /online-exam: results bar */
.oe-ex-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin-bottom: 14px; scroll-margin-top: 96px; }
.oe-ex-count { margin: 0; font-size: 15px; color: var(--oe-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.oe-ex-count strong { color: var(--oe-ink); font-size: 18px; }
.oe-ex-clear { font-size: 13px; font-weight: 600; color: var(--oe-brand-dark); }
.oe-ex-modes { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--oe-card); border: 1px solid var(--oe-line); overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.oe-ex-modes::-webkit-scrollbar { display: none; }
.oe-ex-modes a { flex: none; padding: 6px 12px; border-radius: 7px; font-size: 13.5px; font-weight: 600; color: var(--oe-muted); text-decoration: none; white-space: nowrap; }
.oe-ex-modes a:hover { color: var(--oe-ink); background: var(--oe-soft); text-decoration: none; }
.oe-ex-modes a[aria-current="page"] { background: var(--oe-ink); color: var(--oe-card); }

/* /online-exam: exam cards */
.oe-ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; padding: 0; margin: 0; list-style: none; }
.oe-ex-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; background: var(--oe-card); border: 1px solid var(--oe-line); border-radius: 14px; overflow: hidden; transition: box-shadow .2s, transform .2s, border-color .2s; }
.oe-ex-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--oe-brand); }
.oe-ex-card.is-soon::before { background: #6366f1; }
.oe-ex-card:hover { transform: translateY(-2px); border-color: rgba(241, 99, 48, .45); box-shadow: 0 12px 28px rgba(15, 23, 42, .09); }
.oe-ex-top { display: flex; align-items: center; gap: 10px; }
.oe-ex-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--oe-soft); color: var(--oe-brand-dark); font-size: 18px; }
.oe-ex-kind { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.oe-ex-kind, .oe-ex-kind a { font-size: 13.5px; font-weight: 700; color: var(--oe-ink); text-decoration: none; }
.oe-ex-kind a:hover { color: var(--oe-brand-dark); text-decoration: underline; }
.oe-ex-kind span { font-size: 12.5px; font-weight: 500; color: var(--oe-muted); }
.oe-ex-status { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.oe-ex-status.is-live { background: rgba(21, 128, 61, .1); color: var(--oe-ok); }
.oe-ex-status.is-soon { background: rgba(99, 102, 241, .12); color: #4f46e5; }
html[data-theme="dark"] .oe-ex-status.is-soon { color: #a5b4fc; }
.oe-ex-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 rgba(21, 128, 61, .5); animation: oe-ex-pulse 1.8s infinite; }
@keyframes oe-ex-pulse { 0% { box-shadow: 0 0 0 0 rgba(21, 128, 61, .45); } 70% { box-shadow: 0 0 0 7px rgba(21, 128, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); } }
@media (prefers-reduced-motion: reduce) { .oe-ex-dot { animation: none; } .oe-ex-card, .oe-ex-card:hover { transform: none; } }
.oe-ex-card h3 { font-size: 18px; font-weight: 800; margin: 0; line-height: 1.3; }
.oe-ex-card h3 a { color: var(--oe-ink); text-decoration: none; }
.oe-ex-card h3 a:hover { color: var(--oe-brand-dark); }
.oe-ex-desc { margin: -4px 0 0; font-size: 14px; color: var(--oe-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.oe-ex-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid var(--oe-line); border-radius: 10px; }
.oe-ex-facts div { padding: 8px 6px; text-align: center; }
.oe-ex-facts div + div { border-left: 1px solid var(--oe-line); }
.oe-ex-facts dt { font-size: 11.5px; font-weight: 500; color: var(--oe-muted); }
.oe-ex-facts dt i { color: var(--oe-brand); }
.oe-ex-facts dd { margin: 0; font-size: 18px; font-weight: 800; }
.oe-ex-facts dd small { font-size: 12px; font-weight: 600; color: var(--oe-muted); }
.oe-ex-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.oe-ex-flags li { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 6px; font-size: 12.5px; font-weight: 600; background: var(--oe-soft); color: var(--oe-muted); }
.oe-ex-flags li.is-ok { background: rgba(21, 128, 61, .09); color: var(--oe-ok); }
.oe-ex-flags li.is-warn { background: rgba(185, 28, 28, .08); color: var(--oe-bad); }
.oe-ex-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--oe-line); }
.oe-ex-when { font-size: 12.5px; color: var(--oe-muted); }
.oe-ex-foot .oe-btn { padding: 8px 16px; min-height: 40px; font-size: 14.5px; }
.oe-ex-foot .oe-btn i { font-size: 12px; }

.oe-ex-empty { text-align: center; padding: 36px 16px; }
.oe-ex-empty .oe-px-icon { margin-bottom: 8px; }
.oe-ex-empty p { margin: 0 0 6px; }
.oe-ex-empty p:last-child { margin-top: 14px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.oe-ex-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }

/* Exam names (sub-categories): a second, lighter chip row on a category page */
.oe-hub-cats.is-sub { margin-top: -4px; padding: 8px 10px; border: 1px dashed var(--oe-line); border-radius: 12px; background: var(--oe-card); }
.oe-hub-label { flex: none; margin-right: 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--oe-muted); white-space: nowrap; }
.oe-hub-cats.is-sub .oe-hub-chips a { min-height: 32px; padding: 4px 11px; font-size: 13px; border-radius: 8px; }
.oe-hub-cats.is-sub .oe-hub-chips a[aria-current="page"] { background: var(--oe-ink); border-color: var(--oe-ink); color: var(--oe-card); }
.oe-hub-cats.is-sub .oe-hub-chips a[aria-current="page"] small { background: rgba(255, 255, 255, .2); color: inherit; }

/* Category > exam name on an exam card */
.oe-ex-kind .oe-ex-path { display: block; font-size: 13.5px; font-weight: 700; color: var(--oe-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oe-ex-path i { margin: 0 4px; color: var(--oe-muted); }

/* "Browse by exam" on /online-exam */
.oe-br { margin-top: 28px; }
.oe-br-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.oe-br-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.oe-br-head { display: flex; align-items: center; gap: 10px; color: var(--oe-ink); text-decoration: none; }
.oe-br-head:hover { text-decoration: none; color: var(--oe-brand-dark); }
.oe-br-head > span:nth-child(2) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.oe-br-head b { font-size: 15.5px; }
.oe-br-head small { font-size: 12.5px; color: var(--oe-muted); }
.oe-br-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.oe-br-list a { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--oe-ink); background: var(--oe-soft); text-decoration: none; }
.oe-br-list a:hover { background: var(--oe-brand); color: #fff; text-decoration: none; }
.oe-br-list a small { font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 999px; background: var(--oe-brand); color: #fff; }
.oe-br-all { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--oe-brand-dark); }
@media (max-width: 640px) {
    .oe-hub-label { display: none; }
    .oe-br-grid { grid-template-columns: 1fr; }
}
.oe-ex-more .oe-px-tile { height: 100%; }

@media (max-width: 900px) {
    .oe-ex-hero { grid-template-columns: 1fr; padding: 20px; }
    .oe-ex-hero-stats { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
    .oe-ex-more { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .oe-ex-hero { padding: 18px 16px; border-radius: 14px; }
    .oe-ex-hero h1 { font-size: 22px; }
    .oe-ex-hero-stats div { min-width: 0; padding: 8px; }
    .oe-ex-hero-stats dd { font-size: 20px; }
    .oe-ex-search button { padding: 0 14px; }
    .oe-hub-arrow { display: none !important; }
    .oe-ex-grid { grid-template-columns: 1fr; }
}

/* Shared bits for the hub pages (practice, PYQ, current affairs, leaderboard) */
.oe [hidden] { display: none !important; }
.oe-px-gap { margin-bottom: 14px; }
.oe-px-after { margin-top: 18px; }
.oe-section-title { font-size: 18px !important; margin: 4px 0 12px !important; }

.oe-px-icon { flex: none; width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; background: var(--oe-soft); color: var(--oe-brand-dark); }
.oe-px-icon.is-bad { background: rgba(185, 28, 28, .09); color: var(--oe-bad); }
.oe-px-icon.is-warn { background: rgba(217, 119, 6, .12); color: #b45309; }
.oe-px-icon.is-info { background: rgba(29, 78, 216, .09); color: var(--oe-info); }
.oe-px-icon.is-ok { background: rgba(21, 128, 61, .09); color: var(--oe-ok); }
.oe-px-icon.is-dark { background: rgba(79, 70, 229, .1); color: #4f46e5; }
html[data-theme="dark"] .oe-px-icon.is-warn { color: #fbbf24; }
html[data-theme="dark"] .oe-px-icon.is-dark { color: #a5b4fc; }

.oe-px-tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--oe-ink); text-decoration: none; height: 100%; }
.oe-px-tile > div { flex: 1 1 auto; min-width: 0; }
.oe-px-tile h2 { font-size: 15.5px; font-weight: 700; margin: 0 0 2px; }
.oe-px-tile p { margin: 0; font-size: 13px; color: var(--oe-muted); }
.oe-px-tile .oe-btn { padding: 8px 16px; min-height: 40px; font-size: 14px; }
.oe-px-tile.is-link { transition: border-color .15s, transform .15s; }
.oe-px-tile.is-link:hover { border-color: var(--oe-brand); text-decoration: none; color: var(--oe-ink); transform: translateY(-1px); }
.oe-px-chev { font-size: 22px; color: var(--oe-muted); }

/* A highlighted one-line call to action (mixed PYQ, full-month quiz, your rank) */
.oe-feature { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 16px; border-color: rgba(241, 99, 48, .35); background: linear-gradient(100deg, var(--oe-soft), var(--oe-card) 70%); }
.oe-feature > div { flex: 1 1 auto; min-width: 0; }
.oe-feature h2 { font-size: 17px; margin: 0 0 2px; }
.oe-feature p { margin: 0; font-size: 14px; color: var(--oe-muted); }
.oe-feature .oe-btn { white-space: nowrap; }

/* Hero period links on the leaderboard: the current one is filled */
.oe-ex-links a.is-on { background: #fff; color: #312e81; border-color: #fff; }
.oe-ex-links a.is-on:hover { background: #fff; color: #312e81; }

/* /online-exam/practice */
.oe-px-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.oe-px-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.oe-px-build h2 { margin: 0 0 14px; font-size: 19px; }
.oe-px-build h2 i { color: var(--oe-brand); margin-right: 4px; }
#oeTopicForm { counter-reset: oe-px-step; }
.oe-px-step { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; counter-increment: oe-px-step; }
.oe-px-step legend { font-size: 14.5px; font-weight: 700; color: var(--oe-ink); margin: 0 0 8px; border: 0; width: auto; display: flex; align-items: center; gap: 8px; }
.oe-px-step legend .oe-muted { font-weight: 400; }
.oe-px-num { width: 22px; height: 22px; border-radius: 50%; background: var(--oe-brand); color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.oe-px-num::before { content: counter(oe-px-step); }
.oe-px-filter { position: relative; display: block; margin: 0 0 8px; max-width: 320px; }
.oe-px-filter i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--oe-muted); }
.oe-px-filter input { width: 100%; font: inherit; font-size: 14px; padding: 7px 10px 7px 32px; border: 1px solid var(--oe-line); border-radius: 8px; background: var(--oe-card); color: var(--oe-ink); min-height: 38px; }
.oe-px-subjects { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.oe-px-subject { position: relative; margin: 0; cursor: pointer; }
.oe-px-subject input, .oe-px-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.oe-px-subject > span { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; height: 100%; padding: 10px 12px; border: 1px solid var(--oe-line); border-radius: 10px; background: var(--oe-card); transition: border-color .15s, background .15s; }
.oe-px-avatar { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 15px; background: var(--oe-soft); color: var(--oe-brand-dark); }
.oe-px-subject b { font-size: 14px; font-weight: 700; color: var(--oe-ink); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.oe-px-subject small { font-size: 12px; color: var(--oe-muted); }
.oe-px-subject:hover > span { border-color: var(--oe-brand); }
.oe-px-subject input:checked + span { border-color: var(--oe-brand); background: var(--oe-soft); box-shadow: inset 0 0 0 1px var(--oe-brand); }
.oe-px-subject input:checked + span .oe-px-avatar { background: var(--oe-brand); color: #fff; }
.oe-px-subject input:focus-visible + span, .oe-px-seg input:focus-visible + span { outline: 3px solid #2563eb; outline-offset: 2px; }
.oe-px-none { margin: 8px 0 0; font-size: 14px; }
.oe-px-row { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.oe-px-row > .oe-field, .oe-px-row > .oe-px-step { flex: 1 1 200px; }
.oe-px-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.oe-px-seg label { position: relative; margin: 0; cursor: pointer; }
.oe-px-seg span { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; min-height: 38px; padding: 6px 14px; border: 1px solid var(--oe-line); border-radius: 999px; background: var(--oe-card); font-size: 14px; font-weight: 600; color: var(--oe-ink); }
.oe-px-seg label:hover span { border-color: var(--oe-brand); }
.oe-px-seg input:checked + span { background: var(--oe-brand); border-color: var(--oe-brand); color: #fff; }
.oe-px-go { width: 100%; font-size: 16px; }
.oe-px-go-inline { display: none; margin-top: 4px; }

.oe-px-aside { display: flex; flex-direction: column; gap: 12px; align-self: stretch; }
.oe-px-aside h2 { font-size: 17px; margin: 0 0 10px; }
.oe-px-summary { position: sticky; top: 96px; order: 2; }
.oe-px-summary dl { margin: 0 0 14px; }
.oe-px-summary dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--oe-line); font-size: 14px; }
.oe-px-summary dt { color: var(--oe-muted); font-weight: 400; }
.oe-px-summary dd { margin: 0; font-weight: 700; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.oe-px-summary dd.is-missing { color: var(--oe-brand-dark); font-weight: 600; }
.oe-px-note { margin: 10px 0 0; font-size: 12.5px; color: var(--oe-muted); text-align: center; }
.oe-px-signin { text-align: center; order: 1; }
.oe-px-signin .oe-px-icon { margin-bottom: 8px; }
.oe-px-signin p { font-size: 13.5px; color: var(--oe-muted); margin: 0 0 12px; }
.oe-px-signin .oe-btn { width: 100%; }

.oe-px-progress { order: 1; padding: 14px; }
.oe-px-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.oe-px-progress-head a { font-size: 13.5px; font-weight: 600; color: var(--oe-brand-dark); }
.oe-px-acc { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.oe-px-ring { --p: 0; flex: none; width: 70px; height: 70px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: conic-gradient(var(--oe-ok) calc(var(--p) * 1%), var(--oe-line) 0); }
.oe-px-ring span { width: 54px; height: 54px; border-radius: 50%; background: var(--oe-card); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.oe-px-stats { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.oe-px-stats div { background: var(--oe-soft); border-radius: 8px; padding: 6px 4px; text-align: center; }
.oe-px-stats dt { font-size: 11.5px; color: var(--oe-muted); font-weight: 400; }
.oe-px-stats dd { margin: 0; font-size: 17px; font-weight: 800; }
.oe-px-mine-item { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--oe-line); padding: 10px 0 0; margin-top: 10px; }
.oe-px-mine-item > div { flex: 1 1 auto; min-width: 0; }
.oe-px-mine-item h3 { font-size: 14.5px; font-weight: 700; margin: 0 0 2px; }
.oe-px-mine-item p { margin: 0; font-size: 12.5px; color: var(--oe-muted); }
.oe-px-mine-item .oe-px-icon { width: 36px; height: 36px; font-size: 16px; }
.oe-px-mine-item .oe-btn { white-space: nowrap; padding: 6px 12px; min-height: 36px; font-size: 13.5px; }
.oe-px-weak { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 0; padding: 0; list-style: none; }
.oe-px-weak li { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--oe-soft); color: var(--oe-ink); }
.oe-px-weak b { color: var(--oe-bad); }

/* /online-exam/pyq */
.oe-pq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.oe-pq-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--oe-card); border: 1px solid var(--oe-line); border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.oe-pq-card:hover { border-color: rgba(241, 99, 48, .45); box-shadow: 0 8px 20px rgba(15, 23, 42, .07); }
.oe-pq-year, .oe-ca-cal { flex: none; width: 58px; border-radius: 10px; overflow: hidden; text-align: center; border: 1px solid var(--oe-line); background: var(--oe-card); }
.oe-pq-year small, .oe-ca-cal small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--oe-brand); padding: 2px 0; }
.oe-pq-year b, .oe-ca-cal b { display: block; font-size: 16px; font-weight: 800; padding: 5px 0 6px; color: var(--oe-ink); }
.oe-pq-body { flex: 1 1 auto; min-width: 0; }
.oe-pq-body h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 6px; line-height: 1.3; }
.oe-pq-card .oe-btn { padding: 8px 14px; min-height: 40px; font-size: 14px; }

/* /online-exam/current-affairs */
.oe-ca-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.oe-ca-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; transition: border-color .15s; }
.oe-ca-card:hover { border-color: rgba(241, 99, 48, .45); }
.oe-ca-card > div { flex: 1 1 auto; min-width: 0; }
.oe-ca-card h3 { font-size: 15px; font-weight: 700; margin: 0 0 2px; }
.oe-ca-card p { margin: 0; font-size: 13px; color: var(--oe-muted); }
.oe-ca-card .oe-btn { padding: 7px 14px; min-height: 38px; font-size: 14px; }

/* /online-exam/leaderboard */
.oe-lb-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; background: rgba(79, 70, 229, .12); color: #4338ca; }
html[data-theme="dark"] .oe-lb-avatar { color: #c7d2fe; }
.oe-lb-avatar.is-you { background: var(--oe-brand); color: #fff; font-size: 13px; }
.oe-lb-avatar.is-sm { width: 30px; height: 30px; font-size: 12px; }
.oe-lb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; margin: 0 0 16px; padding: 0; list-style: none; }
.oe-lb-place { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px 16px; text-align: center; border-radius: 14px; background: var(--oe-card); border: 1px solid var(--oe-line); }
.oe-lb-place.is-gold { order: 2; padding-top: 28px; border-color: #f59e0b; box-shadow: 0 10px 26px rgba(245, 158, 11, .18); }
.oe-lb-place.is-silver { order: 1; }
.oe-lb-place.is-bronze { order: 3; }
.oe-lb-place.is-you { background: var(--oe-soft); }
.oe-lb-medal { position: absolute; top: -14px; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; box-shadow: 0 4px 10px rgba(0, 0, 0, .15); }
.is-gold .oe-lb-medal { background: linear-gradient(135deg, #fbbf24, #d97706); }
.is-silver .oe-lb-medal { background: linear-gradient(135deg, #d1d5db, #6b7280); }
.is-bronze .oe-lb-medal { background: linear-gradient(135deg, #f59e0b, #92400e); }
.is-gold .oe-lb-avatar { width: 56px; height: 56px; font-size: 18px; background: rgba(245, 158, 11, .16); color: #b45309; }
.oe-lb-name { font-size: 15.5px; color: var(--oe-ink); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.oe-lb-rank { font-size: 12px; font-weight: 700; color: var(--oe-muted); text-transform: uppercase; letter-spacing: .04em; }
.oe-lb-points { font-size: 13.5px; color: var(--oe-muted); }
.oe-lb-points b { font-size: 22px; color: var(--oe-brand-dark); }
.oe-lb-sub { font-size: 12.5px; color: var(--oe-muted); }
.oe-lb-me .oe-lb-avatar { width: 48px; height: 48px; }
.oe-lb-table .oe-board tbody tr:nth-child(-n+3) .oe-rank-no { font-size: inherit; }
.oe-lb-who { display: inline-flex; align-items: center; gap: 8px; }
.oe-lb-acc { display: inline-flex; align-items: center; gap: 8px; }
.oe-lb-acc .oe-bar { min-width: 60px; width: 60px; height: 6px; }
.oe-lb-acc .oe-bar span { background: var(--oe-ok); }

@media (max-width: 900px) {
    .oe-px-layout { grid-template-columns: 1fr; }
    .oe-px-summary { display: none; }
    .oe-px-go-inline { display: inline-flex; }
}
@media (max-width: 760px) {
    .oe-px-quick { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .oe-px-subjects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oe-feature { flex-wrap: wrap; }
    .oe-feature form, .oe-feature > .oe-btn { width: 100%; }
    .oe-feature .oe-btn { width: 100%; }
    .oe-pq-grid { grid-template-columns: 1fr; }
    .oe-pq-card { flex-wrap: wrap; }
    .oe-pq-card form { width: 100%; }
    .oe-pq-card .oe-btn { width: 100%; }
    .oe-lb-podium { gap: 8px; }
    .oe-lb-place { padding: 16px 6px 12px; }
    .oe-lb-points b { font-size: 18px; }
    .oe-lb-sub { display: none; }
}

/* Practice screen: standalone full page (Views/Practice/Session.cshtml, no site layout) */
.oe-pf-body { margin: 0; min-height: 100vh; background: #f4f5fb; font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 15.5px; line-height: 1.5; }
html[data-theme="dark"] .oe-pf-body { background: #111827; }
.oe.oe-pf { max-width: none; margin: 0; padding: 0; min-height: 100vh; display: flex; flex-direction: column; }
.oe-pf-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; padding: 8px 18px; background: var(--oe-card); border-bottom: 1px solid var(--oe-line); box-shadow: 0 2px 12px rgba(15, 23, 42, .06); }
.oe-pf-logo { flex: none; display: inline-flex; }
.oe-pf-logo img { height: 36px; width: auto; display: block; }
html[data-theme="dark"] .oe-pf-logo img { background: #fff; border-radius: 6px; padding: 2px 4px; }
.oe-pf-title { flex: 1 1 auto; min-width: 0; padding-left: 14px; border-left: 1px solid var(--oe-line); }
.oe .oe-pf-title h1 { font-size: 17px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oe-pf-title span { display: block; font-size: 12.5px; color: var(--oe-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oe-pf-progress { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 120px; }
.oe-pf-progress > span:first-child { font-size: 13px; font-weight: 700; color: var(--oe-ink); }
.oe-pf-meter { display: block; width: 120px; height: 6px; border-radius: 999px; background: var(--oe-line); overflow: hidden; }
.oe-pf-meter span { display: block; height: 100%; width: 0; background: var(--oe-brand); transition: width .3s; }
.oe-pf-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.oe-pf-actions form { margin: 0; }
.oe-pf-actions .oe-btn { min-height: 40px; padding: 8px 16px; font-size: 14.5px; }
.oe-pf-icon { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--oe-line); background: var(--oe-card); color: var(--oe-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; text-decoration: none; }
.oe-pf-icon:hover { border-color: var(--oe-brand); color: var(--oe-brand-dark); text-decoration: none; }

.oe-pf-main { flex: 1 1 auto; width: 100%; max-width: 1240px; margin: 0 auto; padding: 18px; }
.oe-pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.oe-pf-grid > .oe-pq { padding: 22px 24px; min-height: 60vh; display: flex; flex-direction: column; }
.oe-pf-grid > .oe-pq .oe-q-text { font-size: 17px; line-height: 1.6; margin-bottom: 16px; }
.oe-pf-grid > .oe-pq .oe-popt { font-size: 15.5px; padding: 12px 14px; transition: border-color .15s, background .15s; }
.oe-pf-grid > .oe-pq .oe-popt:hover { border-color: var(--oe-brand); }
.oe-pf-grid > .oe-pq .oe-actions { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--oe-line); }
.oe-pf-side { position: sticky; top: 76px; background: var(--oe-card); border: 1px solid var(--oe-line); border-radius: 12px; padding: 14px; max-height: calc(100vh - 96px); overflow: auto; }
.oe-pf-side-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.oe-pf-side .oe-practice-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; margin: 0 0 12px; }
.oe-pf-side .oe-pnum { width: auto; }
.oe-pf-legend { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--oe-line); display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 12.5px; color: var(--oe-muted); }
.oe-pf-legend li { display: flex; align-items: center; gap: 6px; }
.oe-pf-legend b { margin-left: auto; color: var(--oe-ink); }
.oe-pnum.oe-pf-dot { width: 14px; height: 14px; border-radius: 4px; padding: 0; cursor: default; flex: none; }
.oe-pf-keys { margin: 10px 0 0; font-size: 11.5px; color: var(--oe-muted); }

/* Full-screen guard: covers (and hides) the questions until the student is in full screen */
.oe-pf-guarded .oe-pf-main { visibility: hidden; }
.oe-pf-guard { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.oe-pf-guard-box { width: 100%; max-width: 440px; text-align: center; padding: 26px 24px 20px; border-radius: 16px; background: #fff; color: #1f2937; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); font-family: 'Open Sans', system-ui, sans-serif; }
html[data-theme="dark"] .oe-pf-guard-box { background: #1f2937; color: #e5e7eb; }
.oe-pf-guard-box .oe-px-icon { width: 54px; height: 54px; font-size: 24px; border-radius: 14px; margin-bottom: 10px; background: #fff7ed; color: #c2410c; }
.oe-pf-guard-box h2 { font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.oe-pf-guard-box p { margin: 0 0 18px; font-size: 14.5px; color: #4b5563; line-height: 1.55; }
html[data-theme="dark"] .oe-pf-guard-box p { color: #a1a1aa; }
.oe-pf-guard-box .oe-btn { width: 100%; font-size: 16px; min-height: 48px; border-radius: 10px; background: #f16330; border-color: #f16330; color: #fff; font-weight: 700; cursor: pointer; }
.oe-pf-guard-box .oe-btn:hover { background: #c2410c; border-color: #c2410c; }
.oe-pf-guard-leave { display: inline-block; margin-top: 12px; font-size: 13px; color: #6b7280; }
.oe-pf-nocopy .oe-pf-main { -webkit-user-select: none; user-select: none; }
.oe-pf-nocopy .oe-pf-main input { -webkit-user-select: text; user-select: text; }

@media (max-width: 900px) {
    .oe-pf-grid { grid-template-columns: 1fr; }
    .oe-pf-side { position: static; max-height: none; order: -1; padding: 10px; }
    .oe-pf-side .oe-practice-nav { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
    .oe-pf-side .oe-pnum { flex: none; width: 40px; }
    .oe-pf-legend, .oe-pf-keys { display: none; }
    .oe-pf-grid > .oe-pq { min-height: 0; padding: 16px; }
}
@media (max-width: 640px) {
    .oe-pf-bar { gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
    .oe-pf-logo { display: none; }
    .oe-pf-title { flex: 1 1 0; padding-left: 0; border-left: 0; }
    .oe-pf-actions { gap: 6px; }
    .oe .oe-pf-title h1 { font-size: 15px; }
    .oe-pf-title span, .oe-pf-wide { display: none; }
    .oe-pf-progress { order: 5; flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; min-width: 0; }
    .oe-pf-meter { flex: 1 1 auto; width: auto; margin-left: 10px; }
    .oe-pf-main { padding: 10px; }
    .oe-pf-grid > .oe-pq .oe-actions .oe-btn { flex: 1 1 auto; }
}

/* Result page: "Your study plan" (strong / can improve / weak subjects, topics to work on) */
.oe-sp { margin-top: 16px; }
.oe-sp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.oe-sp-head h2 { margin: 0 !important; font-size: 20px; }
.oe-sp-head p { margin: 2px 0 0; color: var(--oe-muted); font-size: 14px; }
.oe-sp-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.oe-sp-col { border-radius: 12px; padding: 12px 14px; border: 1px solid var(--oe-line); }
.oe-sp-col h3 { margin: 0 0 8px; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.oe-sp-col.is-strong { background: rgba(21, 128, 61, .06); border-color: rgba(21, 128, 61, .25); }
.oe-sp-col.is-strong h3 { color: var(--oe-ok); }
.oe-sp-col.is-average { background: rgba(217, 119, 6, .06); border-color: rgba(217, 119, 6, .25); }
.oe-sp-col.is-average h3 { color: #b45309; }
.oe-sp-col.is-weak { background: rgba(185, 28, 28, .05); border-color: rgba(185, 28, 28, .22); }
.oe-sp-col.is-weak h3 { color: var(--oe-bad); }
html[data-theme="dark"] .oe-sp-col.is-average h3 { color: #fbbf24; }
.oe-sp-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.oe-sp-col li { display: flex; flex-direction: column; font-size: 14px; }
.oe-sp-col li span { font-size: 12.5px; color: var(--oe-muted); }
.oe-sp-col p { margin: 0; font-size: 13px; }
.oe-sp-sub { display: flex; align-items: center; gap: 8px; font-size: 16px !important; margin: 18px 0 10px !important; }
.oe-sp-sub i { color: var(--oe-brand); }
.oe-sp-topics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; counter-reset: oe-sp; }
.oe-sp-topic { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px 44px; border: 1px solid var(--oe-line); border-radius: 12px; background: var(--oe-card); counter-increment: oe-sp; }
.oe-sp-topic::before { content: counter(oe-sp); position: absolute; left: 12px; top: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--oe-brand); color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.oe-sp-topic-head { display: flex; justify-content: space-between; gap: 10px; }
.oe-sp-topic-head b { font-size: 15px; margin-right: 6px; }
.oe-sp-topic-head p { margin: 4px 0 0; font-size: 13px; color: var(--oe-bad); }
.oe-sp-acc { flex: none; width: 70px; text-align: right; }
.oe-sp-acc strong { display: block; font-size: 16px; }
.oe-sp-acc .oe-bar { min-width: 0; height: 6px; }
.oe-sp-acc .oe-bar span { background: var(--oe-bad); }
.oe-sp-read > span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--oe-muted); }
.oe-sp-read ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.oe-sp-read li { font-size: 13px; padding: 3px 9px; border-radius: 6px; background: var(--oe-soft); }
.oe-sp-read li i { color: var(--oe-brand-dark); margin-right: 3px; }
.oe-sp-topic form { margin-top: auto; }
.oe-sp-btn { min-height: 38px !important; padding: 7px 14px !important; font-size: 14px !important; }
.oe-sp-tips { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
@media (max-width: 760px) { .oe-sp-cols { grid-template-columns: 1fr; } .oe-sp-topics { grid-template-columns: 1fr; } }