/* ═══════════════════════════════════════════════════
   SERU Auth — Centred card design
   Unique layout, nothing like reference screenshots
════════════════════════════════════════════════════ */

*,*::before,*::after { box-sizing: border-box; }

.seru-auth-page {
    min-height: calc(100vh - 68px);
    background: #f3f4f6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    width: 100%;
    margin: 0 !important;
}

/* Force full width escape from most theme content wrappers */
.entry-content .seru-auth-page,
.page-content .seru-auth-page,
.post-content .seru-auth-page {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* ── Brand strip at top of card ──────────────────── */
.seru-auth-card {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    overflow: hidden;
}

.seru-auth-card__top {
    /* Force background even if theme strips it */
    background-color: #1a56db !important;
    background: #1a56db;
    padding: 28px 32px 24px;
    position: relative;
    overflow: hidden;
}
.seru-auth-card__top::after {
    content: '';
    position: absolute;
    bottom: -40px; right: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}

.seru-auth-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.seru-auth-brand__mark {
    width: 28px; height: 28px;
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.seru-auth-brand__mark svg { width: 16px; height: 16px; }
.seru-auth-brand__name {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.seru-auth-card__top h1 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}
.seru-auth-card__top p {
    font-size: 14px;
    color: rgba(255,255,255,0.72);
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Plan badge — only shows if plan selected */
.seru-auth-plan-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 9px 12px;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    position: relative;
    z-index: 1;
}
.seru-auth-plan-notice__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #86efac;
    flex-shrink: 0;
    animation: seru-pulse 2s infinite;
}
@keyframes seru-pulse {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* ── Form body ───────────────────────────────────── */
.seru-auth-card__body {
    padding: 28px 32px 32px;
}

/* Switch tabs — login/register toggle */
.seru-auth-switch {
    display: flex;
    background: #f3f4f6;
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 24px;
}
.seru-auth-switch__btn {
    flex: 1;
    padding: 8px;
    border: none;
    background: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    text-align: center;
    display: block;
}
.seru-auth-switch__btn--active,
.seru-auth-switch__btn:hover {
    background: #fff;
    color: #111827;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ── Fields ──────────────────────────────────────── */
.seru-field { margin-bottom: 16px; }
.seru-field__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 5px;
}
.seru-field__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.seru-field__row .seru-field__label { margin-bottom: 0; }
.seru-field__link {
    font-size: 12px;
    color: #1a56db;
    font-weight: 500;
    text-decoration: none;
}
.seru-field__link:hover { text-decoration: underline; }

.seru-field__input-wrap { position: relative; }
.seru-field__input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 9px;
    font-size: 14px;
    color: #111827;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    -webkit-appearance: none;
}
.seru-field__input:focus {
    border-color: #1a56db;
    box-shadow: 0 0 0 3px rgba(26,86,219,0.08);
}
.seru-field__input::placeholder { color: #c4c4c4; }
.seru-field__input-wrap .seru-field__input { padding-right: 42px; }
.seru-field__toggle {
    position: absolute; right: 11px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    cursor: pointer; color: #c4c4c4; padding: 2px;
    display: flex; align-items: center;
    transition: color 0.15s;
}
.seru-field__toggle:hover { color: #6b7280; }
.seru-field__toggle svg { width: 16px; height: 16px; }
.seru-field__hint { font-size: 11px; color: #9ca3af; margin-top: 3px; }

/* ── Checkbox ────────────────────────────────────── */
.seru-field--checkbox { margin-bottom: 20px; }
.seru-checkbox { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.seru-checkbox input[type=checkbox] { display: none; }
.seru-checkbox__box {
    width: 17px; height: 17px;
    border: 1.5px solid #d1d5db;
    border-radius: 5px;
    flex-shrink: 0;
    margin-top: 1px;
    transition: all 0.15s;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
}
.seru-checkbox input:checked ~ .seru-checkbox__box {
    background: #1a56db; border-color: #1a56db;
}
.seru-checkbox input:checked ~ .seru-checkbox__box::after {
    content: '✓'; color: #fff; font-size: 10px; font-weight: 800;
}
.seru-checkbox__label { font-size: 13px; color: #374151; line-height: 1.5; }
.seru-checkbox__label a { color: #1a56db; text-decoration: none; font-weight: 500; }
.seru-checkbox__label a:hover { text-decoration: underline; }

/* ── Submit button ───────────────────────────────── */
.seru-auth-btn {
    width: 100%;
    padding: 13px;
    background: #1a56db;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    margin-top: 6px;
    box-shadow: 0 2px 8px rgba(26,86,219,0.25);
    letter-spacing: normal;
    text-transform: none;
}
.seru-auth-btn:hover   { background: #1e40af; box-shadow: 0 4px 12px rgba(26,86,219,0.3); }
.seru-auth-btn:active  { transform: scale(0.98); }
.seru-auth-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

/* ── Divider ─────────────────────────────────────── */
.seru-auth-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 20px 0; font-size: 12px; color: #9ca3af;
}
.seru-auth-divider::before,
.seru-auth-divider::after {
    content: ''; flex: 1; height: 1px; background: #e5e7eb;
}

/* ── Alerts ──────────────────────────────────────── */
.seru-auth-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #b91c1c;
    margin-bottom: 16px;
    line-height: 1.5;
}
.seru-auth-error a { color: #b91c1c; font-weight: 600; }
.seru-auth-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #15803d;
    margin-bottom: 16px;
    line-height: 1.5;
}
.seru-auth-success a { color: #15803d; font-weight: 600; }

/* ── Footer note ─────────────────────────────────── */
.seru-auth-footer {
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    margin-top: 18px;
    line-height: 1.6;
}
.seru-auth-footer a { color: #6b7280; text-decoration: none; }
.seru-auth-footer a:hover { color: #1a56db; }

/* ── Back link (forgot/reset pages) ─────────────── */
.seru-auth-back {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; color: #6b7280; text-decoration: none;
    margin-top: 20px;
    transition: color 0.15s;
}
.seru-auth-back:hover { color: #1a56db; }

/* ── Spinner ─────────────────────────────────────── */
.seru-spinner { width: 17px; height: 17px; animation: seru-spin 0.75s linear infinite; }
@keyframes seru-spin { to { transform: rotate(360deg); } }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 520px) {
    .seru-auth-page {
        padding: 20px 16px 40px;
        justify-content: flex-start;
        background: #f3f4f6;
        align-items: stretch;
    }
    .seru-auth-card {
        border-radius: 14px;
        box-shadow: 0 2px 16px rgba(0,0,0,0.08);
        max-width: 100%;
        width: 100%;
    }
    .seru-auth-card__top { padding: 24px 20px 20px; }
    .seru-auth-card__body { padding: 22px 20px 28px; }
}

/* ═══════════════════════════════════════════════════
   SERU Exams Stylesheet v3
   Site bg: #f3f4f6 | Brand: #1a56db
════════════════════════════════════════════════════ */

:root {
    --s-blue:        #1a56db;
    --s-blue-dark:   #1e40af;
    --s-blue-light:  #eff6ff;
    --s-blue-mid:    #dbeafe;
    --s-green:       #16a34a;
    --s-green-bg:    #f0fdf4;
    --s-green-ring:  #86efac;
    --s-red:         #dc2626;
    --s-red-bg:      #fef2f2;
    --s-red-ring:    #fca5a5;
    --s-amber:       #d97706;
    --s-amber-bg:    #fffbeb;
    --s-amber-ring:  #fcd34d;
    --s-border:      #e5e7eb;
    --s-border-dark: #d1d5db;
    --s-bg:          #f3f4f6;
    --s-white:       #ffffff;
    --s-text:        #111827;
    --s-text-mid:    #374151;
    --s-muted:       #6b7280;
    --s-radius:      12px;
    --s-shadow:      0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --s-shadow-md:   0 4px 12px rgba(0,0,0,0.08);
}

/* ── Reset ───────────────────────────────────────── */
.seru-exam-wrap *, .seru-dashboard *, .seru-pricing *, .seru-gate * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.seru-exam-wrap, .seru-dashboard, .seru-pricing, .seru-gate {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--s-text);
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════
   TOP BAR
══════════════════════════════════════════════════ */
.seru-topbar {
    background: var(--s-white);
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius);
    padding: 14px 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    box-shadow: var(--s-shadow);
}
.seru-topbar__left  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seru-topbar__label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--s-blue); }
.seru-topbar__sep   { color: var(--s-border-dark); font-size: 14px; }
.seru-topbar__title { font-size: 15px; font-weight: 600; color: var(--s-text); }
.seru-topbar__free  { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: #dcfce7; color: #166534; }
.seru-topbar__right { display: flex; align-items: center; }
.seru-timer-wrap    { display: flex; align-items: center; gap: 6px; background: var(--s-bg); padding: 7px 14px; border-radius: 8px; border: 1px solid var(--s-border); }
.seru-timer-icon    { width: 14px; height: 14px; color: var(--s-muted); flex-shrink: 0; }
.seru-timer         { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--s-text); }
.seru-timer--waiting { font-size: 12px; font-weight: 500; color: var(--s-muted); }
.seru-timer--warn   { color: var(--s-red); }

/* ══════════════════════════════════════════════════
   PROGRESS
══════════════════════════════════════════════════ */
.seru-progress-wrap  { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.seru-progress-track { flex: 1; background: var(--s-border); border-radius: 6px; height: 8px; overflow: hidden; }
.seru-progress-fill  { height: 8px; background: linear-gradient(90deg, var(--s-blue), #60a5fa); border-radius: 6px; transition: width 0.4s ease; }
.seru-progress-text  { font-size: 13px; font-weight: 600; color: var(--s-text-mid); white-space: nowrap; }
.seru-progress-pct   { font-size: 13px; font-weight: 700; color: var(--s-blue); min-width: 38px; text-align: right; }

/* ══════════════════════════════════════════════════
   TIP BAR
══════════════════════════════════════════════════ */
.seru-tip-bar {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--s-amber-bg);
    border: 1px solid var(--s-amber-ring);
    border-left: 4px solid var(--s-amber);
    border-radius: 0 var(--s-radius-sm, 8px) var(--s-radius-sm, 8px) 0;
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #78350f;
    line-height: 1.6;
}
.seru-tip-bar__icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

/* ══════════════════════════════════════════════════
   QUESTION CARD
══════════════════════════════════════════════════ */
.seru-q-card {
    background: var(--s-white);
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius);
    padding: 28px;
    box-shadow: var(--s-shadow);
    margin-bottom: 10px;
}
.seru-q-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--s-border);
}
.seru-q-num-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--s-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.seru-topic-tag {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: capitalize;
    margin-left: auto;
}
.seru-topic-tag--safeguarding { background: #fce7f3; color: #9d174d; }
.seru-topic-tag--equality     { background: #ede9fe; color: #5b21b6; }
.seru-topic-tag--licensing    { background: #dbeafe; color: #1e40af; }
.seru-topic-tag--safety       { background: #dcfce7; color: #166534; }

.seru-q-passage {
    font-size: 14px;
    line-height: 1.75;
    color: var(--s-text-mid);
    background: #f8fafc;
    border-left: 4px solid var(--s-blue);
    padding: 14px 18px;
    border-radius: 0 10px 10px 0;
    margin-bottom: 20px;
}
.seru-q-text {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 600;
    color: var(--s-text);
    margin-bottom: 22px;
}

/* ── Options ─────────────────────────────────────── */
.seru-options { display: flex; flex-direction: column; gap: 10px; }
.seru-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border: 2px solid var(--s-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--s-white);
    user-select: none;
    width: 100%;
}
.seru-option:hover:not(.seru-option--correct):not(.seru-option--wrong) {
    border-color: var(--s-blue);
    background: var(--s-blue-light);
}
.seru-option--selected { border-color: var(--s-blue); background: var(--s-blue-light); }
.seru-option--correct  { border-color: var(--s-green); background: var(--s-green-bg); cursor: default; }
.seru-option--wrong    { border-color: var(--s-red);   background: var(--s-red-bg);   cursor: default; }

.seru-option__radio {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--s-border-dark);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    transition: all 0.15s;
    background: var(--s-white);
}
.seru-option--selected .seru-option__radio { border-color: var(--s-blue); background: var(--s-blue); }
.seru-option--selected .seru-option__radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; display: block; }
.seru-option--correct  .seru-option__radio { border-color: var(--s-green); background: var(--s-green); color: #fff; }
.seru-option--correct  .seru-option__radio::after { content: '✓'; color: #fff; font-size: 12px; }
.seru-option--wrong    .seru-option__radio { border-color: var(--s-red);   background: var(--s-red);   color: #fff; }
.seru-option--wrong    .seru-option__radio::after { content: '✕'; color: #fff; font-size: 12px; }

.seru-option__label { font-size: 15px; line-height: 1.5; color: var(--s-text); flex: 1; }
.seru-option--correct .seru-option__label { color: #166534; font-weight: 500; }
.seru-option--wrong   .seru-option__label { color: #991b1b; }

/* ── Fill in blank ───────────────────────────────── */
.seru-fitb {
    display: flex; flex-wrap: wrap;
    align-items: center; gap: 6px;
    font-size: 16px; line-height: 2.6;
    color: var(--s-text);
}
.seru-select {
    font-size: 14px; padding: 7px 12px;
    border-radius: 8px; border: 2px solid var(--s-border-dark);
    background: var(--s-white); color: var(--s-text);
    cursor: pointer; font-weight: 600;
    transition: border-color 0.15s;
}
.seru-select:focus { outline: none; border-color: var(--s-blue); }
.seru-select--correct { border-color: var(--s-green); background: var(--s-green-bg); color: #166534; }
.seru-select--wrong   { border-color: var(--s-red);   background: var(--s-red-bg);   color: #991b1b; }

/* ══════════════════════════════════════════════════
   BOTTOM NAV
══════════════════════════════════════════════════ */
.seru-bottom-nav {
    background: var(--s-white);
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    box-shadow: var(--s-shadow);
    margin-bottom: 10px;
}
.seru-bottom-nav__spacer { flex: 1; }
.seru-bottom-nav__stats  { font-size: 13px; color: var(--s-muted); display: flex; gap: 14px; }
.seru-bottom-nav__stats strong { color: var(--s-text); }

.seru-bottom-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px;
    border-radius: 9px; font-size: 14px; font-weight: 700;
    cursor: pointer; transition: all 0.15s;
    border: 2px solid transparent; white-space: nowrap;
}
.seru-bottom-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.seru-bottom-btn:active  { transform: scale(0.97); }
.seru-bottom-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

.seru-bottom-btn--ghost  { background: var(--s-white); border-color: var(--s-border-dark); color: var(--s-text-mid); }
.seru-bottom-btn--ghost:hover:not(:disabled) { background: var(--s-bg); }

.seru-bottom-btn--flag   { background: var(--s-white); border-color: var(--s-amber-ring); color: var(--s-amber); }
.seru-bottom-btn--flag:hover { background: var(--s-amber-bg); }
.seru-bottom-btn--flag.is-flagged { background: var(--s-amber-bg); border-color: var(--s-amber); }

.seru-bottom-btn--next   { background: var(--s-blue); border-color: var(--s-blue); color: #fff; box-shadow: 0 2px 6px rgba(26,86,219,0.25); }
.seru-bottom-btn--next:hover { background: var(--s-blue-dark); }

.seru-bottom-btn--submit { background: var(--s-green); border-color: var(--s-green); color: #fff; box-shadow: 0 2px 6px rgba(22,163,74,0.25); }
.seru-bottom-btn--submit:hover { background: #15803d; }

.seru-bottom-btn--review { background: var(--s-white); border-color: var(--s-border-dark); color: var(--s-text); }
.seru-bottom-btn--review:hover { background: var(--s-bg); }

/* ══════════════════════════════════════════════════
   QUESTION NAVIGATOR (always below nav)
══════════════════════════════════════════════════ */
.seru-navigator-wrap {
    background: var(--s-white);
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius);
    padding: 18px 20px;
    box-shadow: var(--s-shadow);
}
.seru-navigator-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--s-border);
}
.seru-navigator-title {
    font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--s-muted);
}
.seru-navigator-legend { display: flex; gap: 16px; flex-wrap: wrap; }
.seru-legend-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--s-muted); font-weight: 500; }
.seru-legend-dot  { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.seru-legend-dot--current  { background: var(--s-blue); }
.seru-legend-dot--answered { background: #93c5fd; }
.seru-legend-dot--flagged  { background: var(--s-amber-ring); }
.seru-legend-dot--correct  { background: var(--s-green); }
.seru-legend-dot--wrong    { background: var(--s-red); }

.seru-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 6px;
}
.seru-nav-btn {
    aspect-ratio: 1;
    border-radius: 8px;
    border: 1.5px solid var(--s-border);
    background: var(--s-white);
    font-size: 13px; font-weight: 600;
    color: var(--s-muted);
    cursor: pointer;
    transition: all 0.12s;
    display: flex; align-items: center; justify-content: center;
}
.seru-nav-btn:hover              { border-color: var(--s-blue); color: var(--s-blue); background: var(--s-blue-light); }
.seru-nav-btn--current           { background: var(--s-blue); border-color: var(--s-blue); color: #fff; }
.seru-nav-btn--answered          { background: #dbeafe; border-color: #93c5fd; color: var(--s-blue-dark); }
.seru-nav-btn--flagged           { background: var(--s-amber-bg); border-color: var(--s-amber-ring); color: var(--s-amber); }
.seru-nav-btn--correct           { background: var(--s-green-bg); border-color: var(--s-green-ring); color: var(--s-green); }
.seru-nav-btn--wrong             { background: var(--s-red-bg); border-color: var(--s-red-ring); color: var(--s-red); }

/* ══════════════════════════════════════════════════
   RESULTS
══════════════════════════════════════════════════ */
.seru-result-wrap {
    background: var(--s-white);
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius);
    padding: 36px 28px;
    text-align: center;
    box-shadow: var(--s-shadow);
    margin-bottom: 10px;
}
.seru-result-circle {
    width: 130px; height: 130px;
    border-radius: 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    margin: 0 auto 20px;
    border: 7px solid var(--s-border);
}
.seru-result-circle.pass { border-color: var(--s-green); background: var(--s-green-bg); }
.seru-result-circle.fail { border-color: var(--s-red);   background: var(--s-red-bg); }
.seru-result-pct     { font-size: 38px; font-weight: 900; line-height: 1; }
.seru-result-pct-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; margin-top: 3px; }
.seru-result-title   { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.seru-result-sub     { font-size: 14px; color: var(--s-muted); margin-bottom: 20px; }
.seru-result-pill    { display: inline-block; font-size: 14px; font-weight: 700; padding: 8px 22px; border-radius: 24px; margin-bottom: 24px; }
.pass-pill { background: #dcfce7; color: #166534; }
.fail-pill { background: #fef2f2; color: #991b1b; }
.seru-result-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px; max-width: 380px;
    margin: 0 auto 24px;
}
.seru-result-stat { background: var(--s-bg); border: 1px solid var(--s-border); border-radius: 10px; padding: 14px; }
.seru-result-stat__num { font-size: 26px; font-weight: 800; }
.seru-result-stat__lbl { font-size: 12px; color: var(--s-muted); margin-top: 3px; font-weight: 500; }
.seru-result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* Next / complete box */
.seru-next-box {
    background: var(--s-blue-light);
    border: 1.5px solid var(--s-blue-mid);
    border-radius: var(--s-radius);
    padding: 22px; margin-bottom: 16px; text-align: center;
}
.seru-next-box h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.seru-next-box p  { font-size: 14px; color: var(--s-text-mid); margin-bottom: 16px; }

/* Upsell */
.seru-upsell { margin-bottom: 16px; }
.seru-upsell h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.seru-upsell p  { font-size: 14px; color: var(--s-muted); margin-bottom: 20px; }

/* ══════════════════════════════════════════════════
   SHARED COMPONENTS
══════════════════════════════════════════════════ */

/* Buttons */
.seru-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 22px; border-radius: 9px;
    border: 2px solid var(--s-border-dark);
    background: var(--s-white); color: var(--s-text);
    cursor: pointer; font-size: 14px; font-weight: 700;
    text-decoration: none; transition: all 0.15s;
}
.seru-btn:hover       { background: var(--s-bg); }
.seru-btn:disabled    { opacity: 0.4; cursor: not-allowed; }
.seru-btn--primary    { background: var(--s-blue); border-color: var(--s-blue); color: #fff; box-shadow: 0 2px 6px rgba(26,86,219,0.2); }
.seru-btn--primary:hover { background: var(--s-blue-dark); }
.seru-btn--warning    { background: var(--s-amber-bg); border-color: var(--s-amber-ring); color: #92400e; }

/* Pills */
.seru-pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.pass { background: #dcfce7; color: #166534; }
.fail { background: #fef2f2; color: #991b1b; }

/* Gate */
.seru-gate { text-align: center; padding: 56px 24px; max-width: 460px; margin: 0 auto; }
.seru-gate__icon { font-size: 52px; margin-bottom: 16px; }
.seru-gate h2    { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.seru-gate p     { font-size: 15px; color: var(--s-muted); margin-bottom: 24px; line-height: 1.6; }
.seru-gate__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.seru-gate__sub  { font-size: 13px; color: var(--s-muted); }

/* Pricing */
.seru-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 24px 0; }
.seru-pricing__card { background: var(--s-white); border: 2px solid var(--s-border); border-radius: 14px; padding: 24px 20px; display: flex; flex-direction: column; transition: all 0.2s; box-shadow: var(--s-shadow); }
.seru-pricing__card:hover { border-color: var(--s-blue); transform: translateY(-3px); box-shadow: var(--s-shadow-md); }
.seru-pricing__card--featured { border-color: var(--s-blue); background: var(--s-blue-light); }
.seru-pricing__body   { flex: 1; }
.seru-pricing__title  { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.seru-pricing__desc   { font-size: 13px; color: var(--s-muted); line-height: 1.55; margin-bottom: 16px; }
.seru-pricing__price  { font-size: 32px; font-weight: 800; margin-bottom: 12px; }
.seru-pricing__divider { border: none; border-top: 1px solid var(--s-border); margin-bottom: 14px; }
.seru-pricing__btn { display: block; width: 100%; padding: 12px; border-radius: 9px; background: var(--s-blue); color: #fff; font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; border: none; cursor: pointer; transition: background 0.15s; }
.seru-pricing__btn:hover { background: var(--s-blue-dark); }
.seru-pricing__login-note { text-align: center; font-size: 13px; color: var(--s-muted); margin-top: 10px; }
.seru-pricing--compact .seru-pricing__price { font-size: 26px; }

/* Dashboard */
.seru-dashboard__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--s-border); }
.seru-dashboard__header h2 { font-size: 24px; font-weight: 700; }
.seru-dashboard__sub  { font-size: 14px; color: var(--s-muted); }
.seru-dashboard__exams { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 36px; }
.seru-dashboard__history h3 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.seru-dashboard__empty { color: var(--s-muted); font-size: 14px; }
.seru-dashboard__stats { display: flex; gap: 12px; }

/* Exam cards */
.seru-exam-card { background: var(--s-white); border: 2px solid var(--s-border); border-radius: var(--s-radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--s-shadow); transition: all 0.2s; }
.seru-exam-card:hover { border-color: #93c5fd; transform: translateY(-2px); }
.seru-exam-card--passed { border-color: var(--s-green-ring); }
.seru-exam-card__num    { font-size: 11px; color: var(--s-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.seru-exam-card__title  { font-size: 15px; font-weight: 700; }
.seru-exam-card__score  { display: flex; align-items: center; gap: 8px; }
.seru-exam-card__pct    { font-size: 24px; font-weight: 800; }
.seru-exam-card__label  { font-size: 13px; color: var(--s-muted); font-weight: 500; }
.seru-exam-card__label--new { color: var(--s-blue); font-weight: 600; }
.seru-exam-card__detail { font-size: 12px; color: var(--s-muted); }
.seru-exam-card__btn    { margin-top: auto; width: 100%; }

/* Table */
.seru-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.seru-table th { text-align: left; padding: 10px 14px; background: var(--s-bg); border-bottom: 2px solid var(--s-border); font-weight: 700; font-size: 11px; color: var(--s-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.seru-table td { padding: 13px 14px; border-bottom: 1px solid var(--s-border); vertical-align: middle; }
.seru-table tr:last-child td { border-bottom: none; }
.seru-table tr:hover td { background: var(--s-bg); }

/* Alert */
.seru-alert { padding: 14px 18px; border-radius: 10px; font-size: 14px; margin-bottom: 20px; font-weight: 500; }
.seru-alert--success { background: #dcfce7; color: #166534; border: 1px solid var(--s-green-ring); }

/* Search / input */
.seru-search-wrap { margin-bottom: 18px; }
.seru-input { padding: 10px 16px; border: 2px solid var(--s-border); border-radius: 9px; font-size: 14px; width: 100%; max-width: 340px; transition: border-color 0.15s; }
.seru-input:focus { outline: none; border-color: var(--s-blue); }

/* Student rows */
.seru-student__name  { font-weight: 600; }
.seru-student__email { font-size: 12px; color: var(--s-muted); margin-top: 2px; }
.seru-results-mini   { display: flex; gap: 4px; flex-wrap: wrap; }
.seru-result-chip    { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.seru-muted          { color: var(--s-muted); }

/* ═══════════════════════════════════════════════════
   SERU Page wrapper — hides theme content padding
════════════════════════════════════════════════════ */
.seru-custom-page .entry-title,
.seru-custom-page .page-title,
.seru-custom-page h1.wp-block-post-title { display: none !important; }

.seru-page-wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}

.seru-page-wrap--wide {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}

/* Dashboard header */
.seru-dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
    gap: 12px;
}
.seru-dash-header__left h1 {
    font-size: 24px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}
.seru-dash-header__left p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}
.seru-dash-header__right { display: flex; align-items: center; gap: 10px; }

/* Membership banner */
.seru-membership-banner {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}
.seru-membership-banner__info { display: flex; align-items: center; gap: 12px; }
.seru-membership-banner__icon {
    width: 40px; height: 40px;
    background: #1a56db;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.seru-membership-banner__icon svg { width: 20px; height: 20px; color: #fff; }
.seru-membership-banner__title { font-size: 15px; font-weight: 700; color: #1e3a8a; }
.seru-membership-banner__sub   { font-size: 13px; color: #3b82f6; margin-top: 2px; }
.seru-membership-banner--warn  { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: #fcd34d; }
.seru-membership-banner--warn .seru-membership-banner__icon { background: #d97706; }
.seru-membership-banner--warn .seru-membership-banner__title { color: #92400e; }
.seru-membership-banner--warn .seru-membership-banner__sub   { color: #d97706; }

/* Exam cards grid */
.seru-exam-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 40px;
}

/* Logout link */
.seru-logout-link {
    font-size: 13px;
    color: #6b7280;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
}
.seru-logout-link:hover { color: #dc2626; }

/* No membership state */
.seru-no-membership {
    text-align: center;
    padding: 48px 24px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    margin-bottom: 32px;
}
.seru-no-membership__icon { font-size: 48px; margin-bottom: 16px; }
.seru-no-membership h2    { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.seru-no-membership p     { font-size: 15px; color: #6b7280; margin-bottom: 24px; line-height: 1.6; }

/* Section heading */
.seru-section-heading {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9ca3af;
    margin-bottom: 14px;
}

/* History table wrapper */
.seru-history-wrap {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════
   COUNTDOWN TIMER BANNER
════════════════════════════════════════════════════ */
.seru-dash-alert {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; border-radius: 10px;
    font-size: 14px; font-weight: 500; margin-bottom: 20px;
}
.seru-dash-alert svg { width: 18px; height: 18px; flex-shrink: 0; }
.seru-dash-alert--success { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }

.seru-timer-banner {
    background: linear-gradient(135deg, #1e3a8a 0%, #1a56db 100%);
    border-radius: 14px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
    color: #fff;
}
.seru-timer-banner--warn {
    background: linear-gradient(135deg, #92400e, #d97706);
}
.seru-timer-banner__label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: rgba(255,255,255,0.7);
    margin-bottom: 10px;
}
.seru-timer-banner__label svg { width: 14px; height: 14px; }

.seru-timer-banner__countdown {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.seru-countdown-block { text-align: center; }
.seru-countdown-num {
    display: block;
    font-size: 42px; font-weight: 900;
    line-height: 1; color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.seru-countdown-lbl {
    display: block;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: rgba(255,255,255,0.6);
    margin-top: 2px;
}
.seru-countdown-sep {
    font-size: 36px; font-weight: 300;
    color: rgba(255,255,255,0.4);
    line-height: 1; margin-bottom: 14px;
}
.seru-countdown-sep--small {
    font-size: 14px; font-weight: 500;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0; letter-spacing: 0.03em;
}
.seru-timer-banner__date {
    font-size: 13px; color: rgba(255,255,255,0.55);
}

/* Free exam card badge */
.seru-exam-card--free { position: relative; }
.seru-exam-card__badge {
    position: absolute; top: -1px; right: -1px;
    background: #16a34a; color: #fff;
    font-size: 11px; font-weight: 700;
    padding: 3px 10px; border-radius: 0 10px 0 8px;
    text-transform: uppercase; letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════
   EXAM PAGE WRAPPER
════════════════════════════════════════════════════ */
.seru-exam-page-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}

/* User bar above exam */
.seru-exam-user-bar {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 0;
}
.seru-exam-user-bar__inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.seru-exam-user-bar__name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}
.seru-exam-user-bar__name svg {
    width: 14px; height: 14px;
    color: #9ca3af;
    flex-shrink: 0;
}
.seru-exam-user-bar__link {
    font-size: 13px;
    color: #1a56db;
    text-decoration: none;
    font-weight: 500;
}
.seru-exam-user-bar__link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════
   DEQPCO TOPBAR — plugin owned, no WP theme
════════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }

.seru-body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f3f4f6;
    color: #111827;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.deq-topbar {
    background: #0a0a0a;
    border-bottom: 1px solid #1f1f1f;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.deq-topbar__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    height: 68px;
    display: flex;
    align-items: center;
    gap: 32px;
}

/* Logo */
.deq-topbar__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.deq-topbar__logo-text {
    font-size: 18px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Nav */
.deq-topbar__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.deq-topbar__nav-link {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 8px;
    transition: all 0.15s;
}
.deq-topbar__nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* Exam title in centre */
.deq-topbar__exam-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right side */
.deq-topbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.deq-topbar__user {
    display: flex;
    align-items: center;
    gap: 9px;
}
.deq-topbar__avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.deq-topbar__username {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}
.deq-topbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
    cursor: pointer;
    border: none;
    white-space: nowrap;
}
.deq-topbar__btn--ghost {
    color: rgba(255,255,255,0.65);
    background: transparent;
}
.deq-topbar__btn--ghost:hover { color: #fff; background: rgba(255,255,255,0.08); }
.deq-topbar__btn--primary {
    background: #22c55e;
    color: #fff;
    box-shadow: 0 2px 8px rgba(34,197,94,0.3);
}
.deq-topbar__btn--primary:hover { background: #16a34a; }

/* Main content */
.seru-main-content {
    flex: 1;
}

/* Footer */
.deq-footer {
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 16px 24px;
    margin-top: auto;
}
.deq-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #9ca3af;
    flex-wrap: wrap;
    gap: 8px;
}
.deq-footer__links { display: flex; gap: 16px; }
.deq-footer__links a { color: #9ca3af; text-decoration: none; }
.deq-footer__links a:hover { color: #374151; }

/* Remove old exam topbar/userbar — no longer needed */
.seru-exam-topbar,
.seru-exam-user-bar { display: none !important; }

/* Exam page wrap */
.seru-exam-page-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}

@media (max-width: 768px) {
    .deq-topbar__nav { display: none; }
    .deq-topbar__username { display: none; }
    .deq-topbar__inner { padding: 0 16px; gap: 12px; }
}