/* =====================================================================
   examina.io — Design System 2026 ("Modern EdTech")
   Standalone stylesheet. Pages using this MUST NOT load Bootstrap 3 or
   the legacy Color Admin theme (css/style.min.css, css2/style.min.css).
   ===================================================================== */

/* ------------------------------ Tokens ------------------------------ */
:root {
    --ex-teal: #00acac;
    --ex-teal-dark: #008a8a;
    --ex-teal-darker: #00726f;
    --ex-blue: #348fe2;
    --ex-blue-dark: #2f7fc9;
    --ex-gradient: linear-gradient(135deg, #00acac 0%, #348fe2 100%);
    --ex-amber: #f59c1a;
    --ex-amber-dark: #c87c0c;

    --ex-heading: #1e293b;
    --ex-body: #475569;
    --ex-muted: #64748b;
    --ex-faint: #94a3b8;

    --ex-white: #ffffff;
    --ex-slate: #1e293b;
    --ex-slate-deep: #172033;
    --ex-border: #edf2f7;
    --ex-border-strong: #dbe3ec;
    --ex-soft-teal: #f0f9f9;
    --ex-soft-blue: #f0f7ff;
    --ex-soft-grey: #f8fafc;

    --ex-danger: #d64545;
    --ex-danger-soft: #fdf2f2;
    --ex-success: #0f9d58;
    --ex-success-soft: #f0faf5;
    --ex-warning-soft: #fff8e8;

    --ex-radius-sm: 10px;
    --ex-radius: 16px;
    --ex-radius-lg: 24px;
    --ex-radius-pill: 999px;

    --ex-shadow-sm: 0 1px 2px rgba(30, 41, 59, .06), 0 1px 3px rgba(30, 41, 59, .05);
    --ex-shadow: 0 4px 16px rgba(30, 41, 59, .07);
    --ex-shadow-lg: 0 18px 45px rgba(30, 41, 59, .12);

    --ex-font-display: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --ex-font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --ex-nav-height: 72px;
}

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

/* Bootstrap 3 (still loaded on /home pages for modal/dropdown plumbing) sets
   html{font-size:10px}, which silently shrinks every rem-based size to 62.5%.
   Pin the root so rem always means 16px. */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--ex-font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ex-body);
    background: var(--ex-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    font-family: var(--ex-font-display);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--ex-heading);
}

h1 { font-size: 2.75rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.175rem; }
h5 { font-size: 1rem; }
h6 { font-size: .9rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--ex-teal-darker);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover, a:focus { color: var(--ex-teal-dark); text-decoration: underline; }

img { max-width: 100%; height: auto; }

hr { border: 0; border-top: 1px solid var(--ex-border); margin: 2rem 0; }

small { font-size: .85em; }

code, kbd, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

:focus-visible {
    outline: 3px solid var(--ex-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

.ex-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ex-skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 200;
    background: var(--ex-white); color: var(--ex-heading);
    padding: 10px 18px; border-radius: var(--ex-radius-pill);
    box-shadow: var(--ex-shadow); font-weight: 600;
    transition: top .2s ease;
}
.ex-skip-link:focus { top: 12px; text-decoration: none; }

/* ----------------------- Billing-period control ---------------------- */
.ex-period-control {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    max-width: 100%;
    text-align: start;
}
.ex-period-control__label {
    padding-inline: 5px;
    color: var(--ex-muted);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
}
html:not([dir="rtl"]) .ex-period-control__label {
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ex-period-control__options {
    display: inline-flex;
    min-height: 44px;
    padding: 5px;
    border: 1px solid var(--ex-border-strong);
    border-radius: var(--ex-radius-pill);
    background: var(--ex-white);
    box-shadow: var(--ex-shadow-sm);
}
.ex-period-control__option {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 20px;
    border: 0;
    border-radius: var(--ex-radius-pill);
    background: transparent;
    color: var(--ex-muted);
    cursor: pointer;
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease;
}
.ex-period-control__option:hover { color: var(--ex-teal-darker); }
.ex-period-control__option.is-selected {
    background: var(--ex-soft-teal);
    color: var(--ex-teal-darker);
    font-weight: 800;
}
.ex-period-control__saving {
    padding: 2px 8px;
    border-radius: var(--ex-radius-pill);
    background: var(--ex-success-soft);
    color: var(--ex-success);
    font-size: .66rem;
    font-weight: 800;
    line-height: 1.4;
}
html:not([dir="rtl"]) .ex-period-control__saving { text-transform: uppercase; }
[data-billing-period-content][hidden] { display: none !important; }
.ex-period-control--compact { gap: 4px; }
.ex-period-control--compact .ex-period-control__label { font-size: .64rem; }
.ex-period-control--compact .ex-period-control__options { min-height: 44px; padding: 4px; }
.ex-period-control--compact .ex-period-control__option {
    min-height: 44px;
    padding: 7px 14px;
    font-size: .76rem;
}

@media (max-width: 480px) {
    .ex-period-control { width: 100%; }
    .ex-period-control__options { width: 100%; }
    .ex-period-control__option { flex: 1 1 0; padding-inline: 12px; }
}

/* ----------------------------- Layout ------------------------------- */
.ex-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}
.ex-container--narrow { max-width: 900px; }
.ex-container--wide { max-width: 1320px; }

.ex-section { padding: 88px 0; }
.ex-section--tight { padding: 56px 0; }
.ex-section--tint { background: var(--ex-soft-teal); }
.ex-section--tint-blue { background: var(--ex-soft-blue); }
.ex-section--grey { background: var(--ex-soft-grey); }
.ex-section--dark { background: var(--ex-slate); color: rgba(255, 255, 255, .82); }
.ex-section--dark h1, .ex-section--dark h2, .ex-section--dark h3, .ex-section--dark h4 { color: #fff; }

.ex-section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.ex-section-head p { color: var(--ex-muted); font-size: 1.05rem; }

.ex-grid { display: grid; gap: 24px; }
.ex-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ex-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ex-grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.ex-stack > * + * { margin-top: 16px; }
.ex-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ex-row--between { justify-content: space-between; }
.ex-row--center { justify-content: center; }
.ex-spacer { flex: 1 1 auto; }

.ex-text-center { text-align: center; }
.ex-muted { color: var(--ex-muted); }
.ex-faint { color: var(--ex-faint); }
.ex-danger { color: var(--ex-danger); }
.ex-mb-0 { margin-bottom: 0 !important; }
.ex-mt-24 { margin-top: 24px; }
.ex-mt-32 { margin-top: 32px; }
.ex-mb-24 { margin-bottom: 24px; }
.ex-mb-32 { margin-bottom: 32px; }

/* ------------------------------ Brand ------------------------------- */
.ex-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ex-font-display);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -.02em;
    color: var(--ex-heading);
    text-decoration: none;
    line-height: 1;
}
.ex-brand:hover, .ex-brand:focus { text-decoration: none; color: var(--ex-heading); }
.ex-brand__mark { width: 38px; height: 38px; flex: 0 0 38px; display: block; }
.ex-brand__name { color: var(--ex-teal); }
.ex-brand__tld { color: var(--ex-heading); }
.ex-brand--sm { font-size: 1.1rem; }
.ex-brand--sm .ex-brand__mark { width: 30px; height: 30px; flex-basis: 30px; }
.ex-brand--lg { font-size: 1.75rem; }
.ex-brand--lg .ex-brand__mark { width: 50px; height: 50px; flex-basis: 50px; }
.ex-brand--onDark, .ex-brand--onDark:hover, .ex-brand--onDark:focus { color: #fff; }
.ex-brand--onDark .ex-brand__tld { color: #fff; }
.ex-brand--onDark .ex-brand__name { color: #6fd4d4; }

/* ----------------------------- Buttons ------------------------------ */
.ex-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: var(--ex-radius-pill);
    font-family: var(--ex-font-body);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.ex-btn:hover, .ex-btn:focus { text-decoration: none; }
.ex-btn:active { transform: translateY(1px); }
.ex-btn[disabled], .ex-btn.is-disabled { opacity: .55; cursor: not-allowed; transform: none; }

.ex-btn--primary { background: var(--ex-gradient); color: #fff; box-shadow: 0 6px 18px rgba(0, 172, 172, .28); }
.ex-btn--primary:hover, .ex-btn--primary:focus { color: #fff; box-shadow: 0 10px 26px rgba(0, 172, 172, .36); }

.ex-btn--secondary { background: #fff; color: var(--ex-heading); border-color: var(--ex-border-strong); box-shadow: var(--ex-shadow-sm); }
.ex-btn--secondary:hover, .ex-btn--secondary:focus { color: var(--ex-heading); border-color: var(--ex-teal); }

.ex-btn--ghost { background: transparent; color: var(--ex-heading); }
.ex-btn--ghost:hover, .ex-btn--ghost:focus { background: var(--ex-soft-teal); color: var(--ex-teal-darker); }

.ex-btn--onDark { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .28); }
.ex-btn--onDark:hover, .ex-btn--onDark:focus { background: rgba(255, 255, 255, .2); color: #fff; }

.ex-btn--amber { background: var(--ex-amber); color: #241a05; }
.ex-btn--amber:hover, .ex-btn--amber:focus { background: var(--ex-amber-dark); color: #fff; }

.ex-btn--danger { background: var(--ex-danger); color: #fff; }
.ex-btn--danger:hover, .ex-btn--danger:focus { background: #b93636; color: #fff; }

.ex-btn--lg { padding: 16px 34px; font-size: 1.02rem; }
.ex-btn--sm { padding: 9px 18px; font-size: .85rem; }
.ex-btn--block { display: flex; width: 100%; }

/* ------------------------------ Forms ------------------------------- */
.ex-field { margin-bottom: 18px; }

.ex-label {
    display: block;
    margin-bottom: 7px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ex-muted);
}

.ex-input, .ex-select, .ex-textarea {
    display: block;
    width: 100%;
    padding: 13px 16px;
    font-family: var(--ex-font-body);
    font-size: .98rem;
    line-height: 1.4;
    color: var(--ex-heading);
    background: var(--ex-white);
    border: 1px solid var(--ex-border-strong);
    border-radius: var(--ex-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.ex-input::placeholder, .ex-textarea::placeholder { color: var(--ex-faint); }
.ex-input:focus, .ex-select:focus, .ex-textarea:focus {
    border-color: var(--ex-teal);
    box-shadow: 0 0 0 4px rgba(0, 172, 172, .14);
    outline: none;
}
.ex-textarea { min-height: 130px; resize: vertical; }

.ex-select {
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M8 11.5 3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px;
}

.ex-input.parsley-error, .ex-select.parsley-error, .ex-textarea.parsley-error {
    border-color: var(--ex-danger);
    box-shadow: 0 0 0 4px rgba(214, 69, 69, .12);
}
.parsley-errors-list {
    list-style: none;
    margin: 7px 0 0;
    padding: 0;
    font-size: .82rem;
    color: var(--ex-danger);
}

.ex-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .92rem;
    color: var(--ex-body);
    cursor: pointer;
}
.ex-check input[type="checkbox"], .ex-check input[type="radio"] {
    width: 18px; height: 18px; margin: 2px 0 0;
    accent-color: var(--ex-teal);
    flex: 0 0 18px;
    cursor: pointer;
}

.ex-help { margin-top: 6px; font-size: .84rem; color: var(--ex-muted); }

.ex-form-grid { display: grid; gap: 0 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex-form-grid--full { grid-column: 1 / -1; }

/* ------------------------------ Alerts ------------------------------ */
.ex-alert {
    padding: 14px 18px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid transparent;
    font-size: .93rem;
    margin-bottom: 18px;
}
.ex-alert--danger { background: var(--ex-danger-soft); border-color: #f3c9c9; color: #96302f; }
.ex-alert--success { background: var(--ex-success-soft); border-color: #bfe5d1; color: #14663f; }
.ex-alert--warning { background: var(--ex-warning-soft); border-color: #f0dba8; color: #77551a; }
.ex-alert--info { background: var(--ex-soft-blue); border-color: #cfe2f8; color: #1d4f80; }

/* ------------------------- Cards & surfaces ------------------------- */
.ex-card {
    background: var(--ex-white);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-lg);
    box-shadow: var(--ex-shadow-sm);
    padding: 28px;
}
.ex-card--flat { box-shadow: none; }
.ex-card--raised { box-shadow: var(--ex-shadow); }
.ex-card--tint { background: var(--ex-soft-teal); border-color: transparent; }
.ex-card__title { margin-bottom: 6px; }
.ex-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--ex-border);
}
.ex-card__head h2, .ex-card__head h3 { margin: 0; }

.ex-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: var(--ex-radius);
    background: var(--ex-soft-teal);
    color: var(--ex-teal-darker);
    font-size: 1.3rem;
    margin-bottom: 16px;
}
.ex-icon-chip--blue { background: var(--ex-soft-blue); color: #1d4f80; }
.ex-icon-chip--gradient { background: var(--ex-gradient); color: #fff; }

/* ------------------------- Badges & pills --------------------------- */
.ex-eyebrow {
    display: inline-block;
    padding: 7px 16px;
    border-radius: var(--ex-radius-pill);
    background: var(--ex-soft-teal);
    color: var(--ex-teal-darker);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.ex-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--ex-radius-pill);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .02em;
    background: var(--ex-soft-grey);
    color: var(--ex-muted);
}
.ex-badge--teal { background: var(--ex-soft-teal); color: var(--ex-teal-darker); }
.ex-badge--blue { background: var(--ex-soft-blue); color: #1d4f80; }
.ex-badge--amber { background: #fdf3e2; color: #8a5a06; }
.ex-badge--danger { background: var(--ex-danger-soft); color: #96302f; }
.ex-badge--success { background: var(--ex-success-soft); color: #14663f; }

/* ------------------------------ Navbar ------------------------------ */
.ex-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--ex-border);
}
.ex-nav__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: var(--ex-nav-height);
}
/* Same reasoning as .ld-nav in pages/landing.css: items keep their words
   whole and the spacing between them absorbs a longer translation, rather than
   a label breaking mid-word or the bar silently growing to two rows. */
.ex-nav__links {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(1px, 0.32vw, 4px);
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}
.ex-nav__link {
    display: block;
    white-space: nowrap;
    padding: 9px clamp(6px, 1.1vw, 14px);
    border-radius: var(--ex-radius-pill);
    font-size: clamp(.7rem, 1.02vw, .82rem);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ex-muted);
}
.ex-nav__link:hover, .ex-nav__link:focus { background: var(--ex-soft-teal); color: var(--ex-teal-darker); text-decoration: none; }
.ex-nav__link.is-active { color: var(--ex-teal-darker); background: var(--ex-soft-teal); }
.ex-nav__cta { margin-left: clamp(4px, 0.63vw, 8px); white-space: nowrap; }
.ex-nav__toggle {
    display: none;
    margin-left: auto;
    padding: 10px;
    background: transparent;
    border: 1px solid var(--ex-border-strong);
    border-radius: var(--ex-radius-sm);
    cursor: pointer;
    color: var(--ex-heading);
}
.ex-nav__toggle span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; }
.ex-nav__toggle span + span { margin-top: 4px; }

/* ------------------------------ Footer ------------------------------
   Centered composition per the approved landing mock. */
.ex-footer {
    background: #0f172a;
    color: #94a3b8;
    padding: 80px 0;
    border-top: 1px solid #1e293b;
    font-size: .875rem;
}
.ex-footer__inner { text-align: center; }
.ex-footer__brand { margin-bottom: 40px; }
.ex-footer__brand span { text-transform: uppercase; font-size: 1.5rem; }
.ex-footer__copy {
    font-size: .875rem;
    margin: 0 auto 48px;
    max-width: 576px;
    line-height: 1.65;
    color: #94a3b8;
}
.ex-footer__copy a { color: #2dd4bf; }
.ex-footer__copy a:hover, .ex-footer__copy a:focus { color: #fff; text-decoration: none; }
.ex-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 32px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
}
.ex-footer__links a { color: #94a3b8; transition: color .2s; }
.ex-footer__links a:hover, .ex-footer__links a:focus { color: #fff; text-decoration: none; }

.ex-footer--compact {
    background: transparent;
    color: var(--ex-muted);
    text-align: center;
    padding: 32px 0 40px;
}
.ex-footer--compact a { color: var(--ex-teal-darker); }
.ex-footer--compact .ex-brand { margin-bottom: 10px; }
.ex-footer--compact p { font-size: .85rem; margin: 0; }

/* --------------------- Centered card page shell --------------------- */
/* The tint lives on <body> (class added by the page) so it always paints the whole
   canvas — an inner container only covers its own box, which leaves bare white below
   the fold whenever the content is taller than the viewport. */
body.ex-body--tint {
    background-color: var(--ex-soft-teal);
    background-image: radial-gradient(circle at 15% 15%, rgba(52, 143, 226, .10), transparent 45%),
                      radial-gradient(circle at 85% 80%, rgba(0, 172, 172, .12), transparent 45%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.ex-centered {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: transparent;
}
.ex-centered__inner { width: 100%; max-width: 460px; }
.ex-centered__inner--wide { max-width: 720px; }
.ex-centered__brand { display: flex; justify-content: center; margin-bottom: 22px; }

.ex-panel {
    background: var(--ex-white);
    border-radius: var(--ex-radius-lg);
    box-shadow: var(--ex-shadow-lg);
    padding: 36px;
}
.ex-panel__head { text-align: center; margin-bottom: 26px; }
.ex-panel__head h1 { font-size: 1.75rem; margin-bottom: 6px; }
.ex-panel__head p { color: var(--ex-muted); margin: 0; }

/* Status pages (thanks / approval / activation) — ported from the mock */
.ex-status-card {
    background: #fff;
    border-radius: 40px;
    padding: 60px 40px;
    border: 1px solid rgba(0, 0, 0, .05);
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, .08);
    width: 100%;
    max-width: 500px;
    text-align: center;
}
.ex-status-card h1 { font-size: 1.875rem; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
.ex-status-card__lead {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ex-teal-darker);
    margin-bottom: 24px;
}
.ex-status-card__body { color: var(--ex-muted); line-height: 1.65; margin-bottom: 40px; }
.ex-status-card__body p { margin: 0; }

.ex-status-icon {
    width: 100px; height: 100px;
    margin: 0 auto 32px;
    border-radius: 50%;
    background: var(--ex-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 172, 172, .25);
}
.ex-status-icon svg { width: 48px; height: 48px; }

.ex-status-footer { margin-top: 48px; text-align: center; color: var(--ex-faint); font-size: .875rem; }
.ex-status-footer p { margin: 0; }
.ex-status-footer__links {
    display: flex; justify-content: center; gap: 16px; margin-top: 8px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
}
.ex-status-footer__links a { color: var(--ex-faint); }
.ex-status-footer__links a:hover { color: var(--ex-teal-darker); text-decoration: none; }
.ex-status-icon--danger { background: linear-gradient(135deg, #e06060 0%, #d64545 100%); box-shadow: 0 12px 30px rgba(214, 69, 69, .28); }

/* --------------------------- Error pages ----------------------------
   Ported from the approved mock: content sits directly on the tinted
   canvas (no card), with blurred colour blobs behind it. */
.ex-error-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
}
.ex-blob {
    position: absolute;
    width: 384px; height: 384px;
    border-radius: 50%;
    filter: blur(64px);
    opacity: .5;
    pointer-events: none;
}
.ex-blob--tr { top: -96px; right: -96px; background: #dbeafe; }
.ex-blob--bl { bottom: -96px; left: -96px; background: #ccfbf1; }

.ex-error { position: relative; z-index: 1; text-align: center; max-width: 672px; }
.ex-error__brand { margin-bottom: 48px; display: flex; justify-content: center; }
.ex-error__figure { position: relative; }
.ex-error__code {
    font-family: var(--ex-font-display);
    font-size: clamp(7rem, 20vw, 13.75rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.05em;
    opacity: .9;
    background: var(--ex-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0;
}
.ex-error__code--word { font-size: clamp(2.5rem, 9vw, 5rem); letter-spacing: -.02em; }
.ex-error__badge {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    padding: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: var(--ex-shadow);
    color: var(--ex-amber);
    display: flex;
}
.ex-error__badge svg { width: 36px; height: 36px; }
.ex-error__title {
    font-size: clamp(1.875rem, 5vw, 3rem);
    font-weight: 800;
    color: #0f172a;
    margin: 16px 0 24px;
}
.ex-error__desc {
    color: #64748b;
    font-size: clamp(1.125rem, 2vw, 1.25rem);
    line-height: 1.65;
    margin: 0 auto 40px;
    max-width: 512px;
}
.ex-error__actions { display: flex; align-items: center; justify-content: center; gap: 16px; }
.ex-error__meta {
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid rgba(226, 232, 240, .5);
}
.ex-error__meta p {
    font-size: .75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin: 0;
}
.ex-error-footer {
    position: absolute;
    bottom: 32px;
    width: 100%;
    text-align: center;
    padding: 0 24px;
}
.ex-error-footer p { color: #94a3b8; font-size: 13px; font-weight: 500; margin: 0; }

@media (max-width: 575px) {
    .ex-error__actions { flex-direction: column; }
    .ex-error__actions .ex-btn { width: 100%; }
    .ex-error__meta { margin-top: 48px; padding-top: 28px; }
    .ex-error-footer { position: static; margin-top: 40px; }
}

/* --------------- Examinee sign-in (ported from the mock) ------------- */
.ex-brandbar {
    position: sticky; top: 0; z-index: 50;
    height: 8px;
    background: linear-gradient(90deg, #14b8a6 0%, #3b82f6 50%, #14b8a6 100%);
}
.ex-examinee { min-height: 100vh; display: flex; flex-direction: column; }
.ex-examinee__main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.ex-orglogo {
    width: 96px; height: 96px;
    margin: 0 auto 32px;
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--ex-shadow-sm);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.ex-orglogo img { width: 64px; height: 64px; object-fit: contain; }

.ex-card-login {
    background: #fff;
    border-radius: var(--ex-radius-lg);
    padding: 40px 32px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .05), 0 10px 10px -5px rgba(0, 0, 0, .02);
}
.ex-card-login__head { text-align: center; margin-bottom: 32px; }
.ex-card-login__head h1 { font-size: 1.875rem; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
.ex-card-login__head p { color: var(--ex-muted); font-weight: 500; margin: 0; }

.ex-input--bordered {
    background: #f8fafc;
    border: 2px solid var(--ex-border);
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 16px;
}
.ex-input--bordered:focus { border-color: var(--ex-teal); }
.ex-label--wide { font-size: 13px; letter-spacing: .1em; margin-left: 4px; }

.ex-pw-wrap { position: relative; }
.ex-pw-wrap .ex-input { padding-right: 48px; }
.ex-pw-toggle {
    position: absolute; right: 16px; top: 50%;
    transform: translateY(-50%);
    background: none; border: 0; cursor: pointer;
    color: var(--ex-faint); padding: 4px;
    display: flex;
}
.ex-pw-toggle:hover { color: var(--ex-teal-darker); }
.ex-pw-toggle svg { width: 20px; height: 20px; }

.ex-secure-note {
    margin-top: 32px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: var(--ex-faint);
}
.ex-secure-note svg { width: 16px; height: 16px; }
.ex-secure-note span { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }

.ex-alert--locked {
    background: #fffbeb;
    border-color: #fef3c7;
    border-radius: var(--ex-radius);
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 32px;
}
.ex-alert--locked svg { width: 20px; height: 20px; color: var(--ex-amber); flex: 0 0 20px; margin-top: 2px; }
.ex-alert--locked h4 {
    color: #78350f; font-size: .875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; margin: 0 0 4px;
}
.ex-alert--locked p { color: #b45309; font-size: .875rem; margin: 0; }

/* Organization-selectable examinee login variants (login-v2 / login-v3) */
.ex-split__aside--photo { background-size: cover; background-position: center; }
.ex-split__aside--photo::after {
    content: '';
    position: absolute; inset: 0;
    width: auto; height: auto;
    border-radius: 0;
    filter: none;
    background: linear-gradient(135deg, rgba(0, 172, 172, .82) 0%, rgba(52, 143, 226, .82) 100%);
}
.ex-split__aside--photo::before { display: none; }
.ex-orglogo--wide { width: auto; min-width: 96px; max-width: 220px; padding: 12px 20px; }
.ex-orglogo--wide img { width: auto; max-width: 180px; height: auto; max-height: 72px; }
/* Name fallback when no logo is uploaded. The base tile is a fixed 96px square
   with overflow:hidden, which clips anything longer than a word or two. */
.ex-orglogo--text {
    width: auto; min-width: 96px; max-width: 260px;
    height: auto; min-height: 96px;
    padding: 16px 22px;
}
.ex-orgname {
    font-family: var(--ex-font-display); font-weight: 700; font-size: 1.1rem;
    color: var(--ex-heading);
    text-align: center; line-height: 1.3; overflow-wrap: anywhere;
}

.ex-cover {
    position: relative;
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 40px 24px;
    background-size: cover;
    background-position: center;
}
.ex-cover::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, .72) 0%, rgba(15, 23, 42, .55) 100%);
}
.ex-cover > * { position: relative; z-index: 1; }

/* ------------------------- Branding banner -------------------------- */
.ex-exam-banner {
    border-radius: var(--ex-radius);
    padding: 18px 22px;
    margin-bottom: 20px;
    background: var(--ex-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--ex-shadow);
}
.ex-exam-banner img { max-height: 44px; width: auto; border-radius: 8px; }
.ex-exam-banner__name { font-family: var(--ex-font-display); font-weight: 700; font-size: 1.05rem; }

/* ------------------------------ Tables ------------------------------ */
.ex-table-wrap {
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-lg);
    overflow: hidden;
    background: var(--ex-white);
}
.ex-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.ex-table th {
    text-align: left;
    padding: 15px 20px;
    background: var(--ex-soft-grey);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ex-muted);
    border-bottom: 1px solid var(--ex-border);
    white-space: nowrap;
}
.ex-table td { padding: 16px 20px; border-bottom: 1px solid var(--ex-border); color: var(--ex-body); vertical-align: middle; }
.ex-table tr:last-child td { border-bottom: 0; }
.ex-table tbody tr:hover { background: var(--ex-soft-teal); }
.ex-table__scroll { overflow-x: auto; }

/* ------------------------------ Modal ------------------------------- */
.ex-modal-backdrop {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(15, 23, 42, .55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.ex-modal {
    background: #fff;
    border-radius: var(--ex-radius-lg);
    box-shadow: var(--ex-shadow-lg);
    width: 100%;
    max-width: 520px;
    overflow: hidden;
}
.ex-modal__head { padding: 22px 26px; border-bottom: 1px solid var(--ex-border); display: flex; align-items: center; justify-content: space-between; }
.ex-modal__head h3 { margin: 0; font-size: 1.15rem; }
.ex-modal__body { padding: 26px; }
.ex-modal__foot { padding: 18px 26px; border-top: 1px solid var(--ex-border); display: flex; justify-content: flex-end; gap: 10px; background: var(--ex-soft-grey); }
.ex-modal__close { background: none; border: 0; font-size: 1.4rem; line-height: 1; color: var(--ex-faint); cursor: pointer; padding: 4px 8px; }
.ex-modal__close:hover { color: var(--ex-heading); }

/* ------------------------------ Toasts ------------------------------ */
.ex-toasts {
    position: fixed;
    top: 20px; right: 20px;
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: min(380px, calc(100vw - 40px));
}
.ex-toast {
    position: relative;
    background: var(--ex-slate);
    color: #fff;
    border-radius: var(--ex-radius);
    box-shadow: var(--ex-shadow-lg);
    padding: 16px 44px 16px 18px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;
}
.ex-toast.is-visible { opacity: 1; transform: translateY(0); }
.ex-toast__title { font-family: var(--ex-font-display); font-weight: 700; font-size: .98rem; margin-bottom: 3px; }
.ex-toast__text { font-size: .89rem; color: rgba(255, 255, 255, .82); line-height: 1.5; }
.ex-toast__close {
    position: absolute; top: 10px; right: 12px;
    background: none; border: 0; cursor: pointer;
    color: rgba(255, 255, 255, .6); font-size: 1.3rem; line-height: 1; padding: 2px 6px;
}
.ex-toast__close:hover { color: #fff; }
.ex-toast--danger { background: #93312f; }
.ex-toast--success { background: #14663f; }

/* ------------------- Split layout (auth pages) -----------------------
   Ported from the approved mock: 60/40 split, gradient value-prop panel
   on the left with blurred blobs and a framed app preview, plain white
   form column on the right in three regions (brand / form / legal). */
.ex-split { display: flex; min-height: 100vh; }

.ex-split__aside {
    flex: 0 0 60%;
    background: var(--ex-gradient);
    color: #fff;
    padding: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.ex-split__aside::before,
.ex-split__aside::after {
    content: '';
    position: absolute;
    width: 384px; height: 384px;
    border-radius: 50%;
    filter: blur(64px);
    pointer-events: none;
}
.ex-split__aside::before { top: -96px; left: -96px; background: rgba(255, 255, 255, .10); }
.ex-split__aside::after { bottom: -96px; right: -96px; background: rgba(96, 165, 250, .20); }
.ex-split__aside-inner { position: relative; z-index: 1; max-width: 512px; }
.ex-split__aside h2 {
    color: #fff;
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 32px;
}
.ex-split__aside h2 .ex-hl { color: #99f6e4; }
.ex-split__aside p {
    color: rgba(240, 253, 250, .9);
    font-size: 1.125rem;
    line-height: 1.65;
    margin-bottom: 48px;
}
.ex-split__aside .ex-eyebrow {
    background: rgba(255, 255, 255, .1);
    color: #ccfbf1;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    letter-spacing: .14em;
    margin-bottom: 32px;
}
.ex-split__media-frame {
    border-radius: 32px;
    overflow: hidden;
    border: 6px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35);
}
.ex-split__media { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; opacity: .9; }

.ex-split__main {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    padding: 64px;
    background: var(--ex-white);
}
.ex-split__brand { margin-bottom: auto; }
.ex-split__content { width: 100%; max-width: 384px; margin: 48px auto; }
.ex-split__form--wide { max-width: 520px; }
.ex-split__head { margin-bottom: 40px; }
.ex-split__head h1 { font-size: 1.875rem; font-weight: 800; color: #0f172a; margin-bottom: 12px; }
.ex-split__head p { color: var(--ex-muted); margin: 0; }
.ex-split__alt {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #f1f5f9;
    text-align: center;
}
.ex-split__alt p { color: var(--ex-muted); margin: 0; }
.ex-split__alt a { font-weight: 700; color: var(--ex-teal-darker); }
.ex-split__legal { margin-top: auto; text-align: center; }
.ex-split__legal p {
    font-size: 11px;
    font-weight: 700;
    color: var(--ex-faint);
    text-transform: uppercase;
    letter-spacing: .2em;
    margin: 0;
}

/* Soft-filled inputs with a leading icon, per the mock */
.ex-input-group { position: relative; }
.ex-input-group__icon {
    position: absolute;
    left: 20px; top: 0; bottom: 0;
    display: flex; align-items: center;
    color: var(--ex-faint);
    pointer-events: none;
}
.ex-input-group__icon svg { width: 18px; height: 18px; }
.ex-input-group .ex-input { padding: 16px 24px 16px 48px; }
.ex-input--soft {
    background: #f8fafc;
    border-color: #f1f5f9;
    border-radius: var(--ex-radius);
    padding: 16px 24px;
}
.ex-form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ex-link-strong { font-size: .875rem; font-weight: 700; color: var(--ex-teal-darker); }

/* ------------------- Admin shell (ported from the mock) --------------- */
.ex-app { min-height: 100vh; background: var(--ex-soft-grey); display: flex; flex-direction: column; }
.ex-app__body { flex: 1 0 auto; }
.ex-app__top {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
    height: 57px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
}
.ex-app__body { display: flex; align-items: flex-start; padding-left: 280px; padding-top: 57px; }
/* Fixed rather than sticky: a sticky panel is only one viewport tall, so its white
   column stops partway down whenever the main content is longer than the screen. */
.ex-app__side {
    position: fixed;
    top: 57px; left: 0; bottom: 0;
    width: 280px;
    overflow-y: auto;
    background: #fff;
    border-right: 1px solid #f1f5f9;
    padding: 32px 16px;
    z-index: 40;
}
.ex-app__main { flex: 1 1 auto; min-width: 0; padding: 32px; }
.ex-app__main > .ex-page-head { margin-bottom: 26px; }

/* Customer sandbox environment markers. Amber communicates TEST state without
   replacing the product's teal/blue visual identity. */
.ex-sandbox-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 11px; border-radius: var(--ex-radius-pill);
    background: var(--ex-warning-soft); color: #8a5a06;
    border: 1px solid #f0dba8;
    font-size: 10px; font-weight: 800; letter-spacing: .09em;
}
.ex-sandbox-badge > span { width: 7px; height: 7px; border-radius: 50%; background: var(--ex-amber); }
.ex-sandbox-banner {
    position: fixed; z-index: 45; top: 57px; left: 280px; right: 0;
    min-height: 46px; padding: 10px 32px;
    display: flex; align-items: center; gap: 12px;
    background: var(--ex-warning-soft); color: #6f4d14;
    border-bottom: 1px solid #f0dba8; font-size: .82rem;
}
.ex-sandbox-banner svg { width: 20px; height: 20px; flex: none; color: var(--ex-amber-dark); }
.ex-sandbox-banner strong { color: #5f410f; }
.ex-sandbox-banner a { margin-left: auto; color: #6f4d14; font-weight: 800; white-space: nowrap; }
.ex-app--sandbox .ex-app__body { padding-top: 103px; }
.ex-login-sandbox-banner {
    min-height: 48px; padding: 9px 24px;
    display: flex; align-items: center; justify-content: center; gap: 14px;
    background: var(--ex-warning-soft); color: #6f4d14;
    border-bottom: 1px solid #f0dba8; font-size: .84rem;
}
.ex-login-sandbox-banner strong { color: #5f410f; }
.ex-login-sandbox-banner > a { margin-left: 12px; color: #6f4d14; font-weight: 800; }

.ex-handoff { min-height: calc(100vh - 52px); display: grid; place-items: center; padding: 40px 20px; background: var(--ex-soft-grey); }
.ex-handoff > .ex-brand { position: absolute; top: 82px; left: 36px; }
.ex-handoff__card { width: min(100%, 540px); padding: 44px; text-align: center; border: 1px solid var(--ex-border); border-radius: 24px; background: #fff; box-shadow: var(--ex-shadow-lg); }
.ex-handoff__card h1 { margin: 20px 0 10px; color: var(--ex-heading); font-family: var(--ex-font-display); font-size: clamp(1.8rem, 5vw, 2.5rem); }
.ex-handoff__card p { max-width: 420px; margin: 0 auto 26px; color: var(--ex-muted); line-height: 1.65; }
.ex-handoff__spinner { display: block; width: 54px; height: 54px; margin: 0 auto 20px; border: 5px solid var(--ex-soft-teal); border-top-color: var(--ex-teal); border-radius: 50%; animation: ex-handoff-spin .8s linear infinite; }
@keyframes ex-handoff-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ex-handoff__spinner { animation: none; border-top-color: var(--ex-soft-teal); } }
@media (max-width: 640px) { .ex-handoff > .ex-brand { top: 70px; left: 20px; } .ex-handoff__card { padding: 34px 22px; } }

.ex-page-head h1 { font-size: 1.9rem; margin-bottom: 4px; }
.ex-page-head p { color: var(--ex-muted); margin: 0; }

.ex-side-user {
    display: flex; align-items: center; gap: 16px;
    padding: 16px; margin: 0 8px 40px;
    border-radius: var(--ex-radius);
    background: var(--ex-soft-grey);
}
.ex-side-user__avatar {
    width: 40px; height: 40px; flex: 0 0 40px;
    border-radius: 12px;
    background: var(--ex-gradient);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .875rem;
    object-fit: cover;
}
.ex-side-user__name { font-weight: 700; color: #0f172a; font-size: .875rem; line-height: 1.3; }
.ex-side-user__role {
    font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--ex-teal-darker); font-weight: 700;
}

.ex-side-label {
    font-size: 10px; font-weight: 700; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ex-faint);
    padding: 0 16px; margin-bottom: 16px;
}
.ex-side-nav { list-style: none; margin: 0 0 20px; padding: 0; }
.ex-side-nav li { margin-bottom: 4px; }
.ex-side-nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-radius: var(--ex-radius-pill);
    color: var(--ex-body);
    font-weight: 500;
    font-size: .875rem;
    transition: all .2s;
}
.ex-side-nav a:hover, .ex-side-nav a:focus { background: #f1f5f9; color: var(--ex-heading); text-decoration: none; }
/* Mock: active item is a soft teal tint, not a gradient pill */
.ex-side-nav li.is-active > a { background: var(--ex-soft-teal); color: var(--ex-teal); font-weight: 600; box-shadow: none; }
/* Centres the glyph rather than letting the inline SVG sit on the text baseline.
   Baseline alignment left the 20px icon at the top of a 26px line box, so every
   icon rode about 3px high and the label read as sitting low against it. */
.ex-side-nav__icon {
    width: 20px;
    flex: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}
.ex-side-nav__icon svg { display: block; }
.ex-side-nav .ex-sub { list-style: none; margin: 4px 0; padding: 0 16px 0 48px; }
.ex-side-nav .ex-sub a { padding: 4px 0; font-size: .75rem; color: var(--ex-muted); font-weight: 500; }
.ex-side-nav .ex-sub a:hover { background: transparent; color: var(--ex-teal-darker); }
.ex-side-nav .ex-sub li.is-active > a { background: transparent; color: var(--ex-teal-darker); font-weight: 700; }

.ex-app__bell {
    position: relative;
    background: none; border: 0; cursor: pointer;
    color: var(--ex-faint); padding: 6px;
    display: flex; margin-left: auto;
}
.ex-app__bell:hover { color: var(--ex-muted); }
.ex-app__bell svg { width: 20px; height: 20px; }
.ex-app__bell-dot {
    position: absolute; top: 2px; right: 2px;
    width: 8px; height: 8px;
    background: #ef4444;
    border: 2px solid #fff;
    border-radius: 50%;
}
.ex-app__divider { width: 1px; height: 32px; background: #f1f5f9; }

.ex-user-menu { position: relative; margin-left: auto; }
.ex-user-menu__btn {
    display: flex; align-items: center; gap: 12px;
    background: none; border: 0; cursor: pointer;
    padding: 4px; border-radius: var(--ex-radius-pill);
    font-family: var(--ex-font-body); text-align: left;
}
.ex-user-menu__btn img {
    width: 36px; height: 36px; border-radius: 50%;
    border: 2px solid var(--ex-soft-teal);
    object-fit: cover;
}
.ex-user-menu__name { display: block; font-size: .75rem; font-weight: 700; color: #0f172a; line-height: 1; }
.ex-user-menu__role {
    display: block;
    font-size: 10px; color: var(--ex-faint); font-weight: 500;
    text-transform: uppercase; letter-spacing: .06em; margin-top: 4px;
}
.ex-user-menu__list {
    position: absolute; right: 0; top: calc(100% + 12px);
    min-width: 192px;
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: var(--ex-radius);
    box-shadow: var(--ex-shadow-lg);
    list-style: none; margin: 0; padding: 0;
    overflow: hidden;
    display: none;
}
.ex-user-menu__list.is-open { display: block; }
.ex-user-menu__list a {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    color: var(--ex-body); font-size: .875rem; font-weight: 500;
}
.ex-user-menu__list a:hover { background: var(--ex-soft-grey); text-decoration: none; }
.ex-user-menu__list a.is-danger { color: #dc2626; }
.ex-user-menu__list a.is-danger:hover { background: #fef2f2; }
.ex-user-menu__divider { height: 1px; background: #f8fafc; }
/* A heading inside the user menu, for the language group. Not a link, so it
   is skipped by keyboard navigation the way a label should be. */
.ex-user-menu__section { padding: 8px 14px 4px; font-size: 11px; font-weight: 700;
    color: #94a3b8; }

/* The heading is #{common.language.label}, so it arrives translated — and this
   is the one menu a reader opens precisely because they are not reading
   English. The tracking would pull the letters of "اللغة" out of their joins,
   and the uppercase does nothing in Arabic, so the label would lose in Arabic
   the very separation the treatment exists to give it. Held to the scripts it
   works in; the size, weight and colour still set it apart everywhere. */
html:not([dir="rtl"]) .ex-user-menu__section {
    text-transform: uppercase; letter-spacing: .04em;
}
.ex-user-menu__list a.is-selected { font-weight: 700; }

.ex-stat {
    background: #fff;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius);
    padding: 20px 22px;
}
.ex-stat__label { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ex-muted); }
.ex-stat__value { font-family: var(--ex-font-display); font-size: 1.9rem; font-weight: 700; color: var(--ex-heading); line-height: 1.15; margin-top: 4px; }
.ex-stat__meta { font-size: .82rem; color: var(--ex-muted); margin-top: 2px; }

.ex-empty {
    text-align: center;
    padding: 56px 24px;
    color: var(--ex-muted);
    background: #fff;
    border: 1px dashed var(--ex-border-strong);
    border-radius: var(--ex-radius-lg);
}

/* =====================================================================
   Legacy bridge — admin (/home) pages only.
   These pages keep jQuery + Bootstrap 3 JS + Parsley + bootbox + gritter
   for behaviour (modals, dropdowns, AJAX CRUD). Bootstrap's CSS is still
   loaded there for modal/dropdown plumbing, so the rules below restyle
   those widgets into the 2026 design language. Marketing, auth, examinee
   and error pages load no Bootstrap at all and never hit this section.
   ===================================================================== */

/* Bootstrap 3 modals */
.modal-content {
    border: 0;
    border-radius: var(--ex-radius-lg);
    box-shadow: var(--ex-shadow-lg);
    font-family: var(--ex-font-body);
    color: var(--ex-body);
}
.modal-header {
    padding: 22px 26px;
    border-bottom: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-lg) var(--ex-radius-lg) 0 0;
}
.modal-header .modal-title {
    font-family: var(--ex-font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ex-heading);
}
.modal-header .close {
    font-size: 1.5rem;
    color: var(--ex-faint);
    opacity: 1;
    text-shadow: none;
}
.modal-header .close:hover { color: var(--ex-heading); }
.modal-body { padding: 26px; }
.modal-footer {
    padding: 18px 26px;
    border-top: 1px solid var(--ex-border);
    background: var(--ex-soft-grey);
    border-radius: 0 0 var(--ex-radius-lg) var(--ex-radius-lg);
}
.modal-body .control-label,
.ex-legacy-form .control-label {
    display: block;
    margin-bottom: 7px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ex-muted);
}

/* Bootstrap 3 form controls that live inside legacy modals */
.modal .form-control,
.ex-app .form-control,
.ex-legacy-form .form-control,
.ex-legacy-form select,
.ex-legacy-form textarea {
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 13px 16px;
    font-family: var(--ex-font-body);
    font-size: .98rem;
    color: var(--ex-heading);
    background: var(--ex-white);
    border: 1px solid var(--ex-border-strong);
    border-radius: var(--ex-radius-sm);
    box-shadow: none;
}
.modal .form-control:focus,
.ex-app .form-control:focus,
.ex-legacy-form .form-control:focus {
    border-color: var(--ex-teal);
    box-shadow: 0 0 0 4px rgba(0, 172, 172, .14);
}

/* Bootstrap 3 buttons still emitted by legacy scripts (bootbox, modals) */
.modal .btn,
.bootbox .btn,
.ex-app .btn,
.ex-legacy-form .btn {
    padding: 11px 22px;
    border: 1px solid transparent;
    border-radius: var(--ex-radius-pill);
    font-family: var(--ex-font-body);
    font-size: .9rem;
    font-weight: 700;
    text-shadow: none;
    box-shadow: none;
}
.modal .btn-inverse, .bootbox .btn-primary, .ex-app .btn-inverse,
.ex-legacy-form .btn-success {
    background: var(--ex-gradient);
    color: #fff;
}
.modal .btn-white, .modal .btn-default,
.bootbox .btn-default, .ex-app .btn-white, .ex-app .btn-default {
    background: #fff;
    color: var(--ex-heading);
    border-color: var(--ex-border-strong);
}

/* Circular icon actions in admin tables. The page scripts inject rows carrying these
   legacy classes, so they must stay styled here rather than being renamed in markup. */
.ex-app .btn-icon.btn-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    padding: 0;
    border-radius: 50%;
    font-size: .85rem;
}
.ex-app .btn-icon.btn-circle + .btn-icon.btn-circle { margin-left: 6px; }
.ex-app .btn-danger { background: var(--ex-danger-soft); color: #96302f; border-color: transparent; }
.ex-app .btn-danger:hover { background: var(--ex-danger); color: #fff; }
.ex-app .btn-warning { background: #fdf3e2; color: #8a5a06; border-color: transparent; }
.ex-app .btn-warning:hover { background: var(--ex-amber); color: #241a05; }
.ex-app .btn-success { background: var(--ex-gradient); color: #fff; border-color: transparent; }
.ex-app .btn-success:hover { color: #fff; }

/* Bootstrap 3 dropdowns (exam pickers, user menus) */
.ex-app .dropdown-menu {
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius);
    box-shadow: var(--ex-shadow-lg);
    padding: 8px;
    font-family: var(--ex-font-body);
}
.ex-app .dropdown-menu > li > a {
    padding: 10px 14px;
    border-radius: var(--ex-radius-sm);
    color: var(--ex-body);
    font-size: .92rem;
    font-weight: 600;
}
.ex-app .dropdown-menu > li > a:hover,
.ex-app .dropdown-menu > li > a:focus {
    background: var(--ex-soft-teal);
    color: var(--ex-teal-darker);
}

/* bootbox dialogs */
.bootbox .modal-content { border-radius: var(--ex-radius-lg); }

/* Spinner used by home/app/base.js (was provided by the Color Admin theme) */
.spinner-small {
    display: inline-block;
    width: 18px; height: 18px;
    vertical-align: middle;
    border: 2px solid rgba(0, 172, 172, .25);
    border-top-color: var(--ex-teal);
    border-radius: 50%;
    animation: ex-spin .7s linear infinite;
}
@keyframes ex-spin { to { transform: rotate(360deg); } }


/* ---------------------- Legal pages (terms / privacy) ----------------
   The article markup keeps its original class names so the long-form legal
   copy stays untouched; only the styling moves to the 2026 system. */
.legal-skip {
    position: absolute; left: 12px; top: -60px; z-index: 200;
    background: #fff; color: var(--ex-heading);
    padding: 10px 18px; border-radius: var(--ex-radius-pill);
    box-shadow: var(--ex-shadow); font-weight: 600;
}
.legal-skip:focus { top: 12px; text-decoration: none; }

.legal-hero {
    background: var(--ex-gradient);
    color: #fff;
    padding: 80px 0;
    text-align: center;
}
.legal-hero h1 { color: #fff; font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 800; margin-bottom: 12px; }
.legal-hero p { color: rgba(240, 253, 250, .9); font-size: 1.125rem; max-width: 640px; margin: 0 auto; }

.legal-content { background: var(--ex-soft-grey); padding: 64px 0 88px; }
.legal-layout {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.legal-toc {
    flex: 0 0 280px;
    position: sticky;
    top: 96px;
    background: #fff;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-lg);
    box-shadow: var(--ex-shadow-sm);
    padding: 24px;
}
.legal-toc h2 {
    font-size: 10px; font-weight: 700; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ex-faint); margin-bottom: 16px;
}
.legal-toc ol, .legal-toc ul { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal-toc li { margin-bottom: 2px; }
.legal-toc a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--ex-radius-sm);
    font-size: .875rem;
    color: var(--ex-body);
}
.legal-toc a:hover, .legal-toc a:focus { background: var(--ex-soft-teal); color: var(--ex-teal-darker); text-decoration: none; }

.legal-card {
    flex: 1 1 auto;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-lg);
    box-shadow: var(--ex-shadow-sm);
    padding: 48px;
}
.legal-card section + section { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--ex-border); }
.legal-card h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: 16px; }
.legal-card h3 { font-size: 1.05rem; margin: 24px 0 10px; }
.legal-card p, .legal-card li { color: var(--ex-body); }
.legal-card ul, .legal-card ol { padding-left: 22px; }
.legal-card li { margin-bottom: 8px; }
.legal-meta { color: var(--ex-muted); font-size: .9rem; }

@media (max-width: 991px) {
    .legal-layout { flex-direction: column; gap: 24px; }
    .legal-toc { position: static; flex: 1 1 auto; width: 100%; }
    .legal-card { padding: 32px 24px; }
}

/* ---------------------------- Responsive ---------------------------- */
@media (max-width: 991px) {
    .ex-grid--3, .ex-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ex-split { flex-direction: column; min-height: 0; }
    .ex-split__aside { flex: 0 0 auto; padding: 44px 32px; }
    .ex-split__main { padding: 32px 24px 48px; }
    .ex-app__body { padding-left: 0; }
    .ex-app__side {
        z-index: 95;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--ex-shadow-lg);
    }
    .ex-app__side.is-open { transform: translateX(0); }
    .ex-app__main { padding: 24px 18px 40px; }
    .ex-sandbox-banner { left: 0; padding: 10px 18px; }
}

/* 1079, not 767: the row collapses where the *longest* supported language stops
   fitting, not where English does. Eight labels did not fit on one line at 820px
   in any language — they were simply running off the end of the container rather
   than reporting it. Re-measure when a language or a nav item is added. */
@media (max-width: 1079px) {
    body { font-size: 15px; }
    h1 { font-size: 2.1rem; }
    h2 { font-size: 1.6rem; }
    .ex-section { padding: 56px 0; }
    .ex-container { padding: 0 18px; }
    .ex-grid--2, .ex-grid--3, .ex-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .ex-form-grid { grid-template-columns: minmax(0, 1fr); }
    .ex-nav__toggle { display: block; }
    .ex-nav__links {
        display: none;
        position: absolute;
        left: 0; right: 0; top: var(--ex-nav-height);
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 14px 18px 20px;
        background: #fff;
        border-bottom: 1px solid var(--ex-border);
        box-shadow: var(--ex-shadow);
    }
    .ex-nav__links.is-open { display: flex; }
    .ex-nav__link { padding: 12px 14px; }
    .ex-nav__cta { margin: 8px 0 0; }
    .ex-panel { padding: 26px 22px; }
    .ex-footer__top, .ex-footer__bottom { flex-direction: column; align-items: flex-start; }
    .ex-sandbox-banner { align-items: flex-start; }
    .ex-sandbox-banner a { display: none; }
    .ex-app__top .ex-sandbox-badge { margin-left: auto; }
    .ex-app__top .ex-user-menu { display: none; }
}

@media print {
    .ex-nav, .ex-footer, .ex-app__side, .ex-app__top { display: none !important; }
    body { background: #fff; }
}

/* Legacy Bootstrap-grid forms kept verbatim (request a quote) */
.ex-legacy-form .row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.ex-legacy-form [class^="col-"] { padding: 0 8px; flex: 1 1 100%; min-width: 0; }
.ex-legacy-form .col-md-6 { flex: 1 1 calc(50% - 16px); }
.ex-legacy-form .col-md-4 { flex: 1 1 calc(33.333% - 16px); }
.ex-legacy-form .m-b-15 { margin-bottom: 16px; }
.ex-legacy-form .btn-block { width: 100%; display: flex; }
.ex-legacy-form .info-tip { color: var(--ex-faint); margin-right: 4px; }
.ex-legacy-form .hidden { display: none; }
.ex-legacy-form .all-done {
    display: inline-flex; align-items: center; justify-content: center;
    width: 88px; height: 88px; border-radius: 50%;
    background: var(--ex-gradient); color: #fff; font-size: 40px;
    box-shadow: 0 10px 25px rgba(0, 172, 172, .25);
}
@media (max-width: 767px) {
    .ex-legacy-form .col-md-6, .ex-legacy-form .col-md-4 { flex: 1 1 100%; }
}

/* --------------- Marketing pricing tables & accordions ---------------
   plans.html and the landing pricing section keep their original markup
   (dynamic Thymeleaf pricing model + Bootstrap collapse), restyled here. */
.ex-marketing-hero {
    background: var(--ex-gradient);
    color: #fff;
    padding: 88px 0 72px;
    text-align: center;
}
.ex-marketing-hero h1 { color: #fff; font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 800; margin-bottom: 12px; }
.ex-marketing-hero p { color: rgba(240, 253, 250, .9); font-size: 1.125rem; margin: 0; }

/* Plan cards */
.pricing-table { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pricing-table > li { display: flex; }
.pricing-container {
    display: flex; flex-direction: column; width: 100%;
    background: #fff;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-lg);
    box-shadow: var(--ex-shadow-sm);
    overflow: hidden;
}
.pricing-table h3 {
    margin: 0; padding: 18px 20px;
    font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ex-muted); background: var(--ex-soft-grey);
    text-align: center;
}
.pricing-table .price { padding: 26px 20px 18px; text-align: center; }
.pricing-table .price-figure { display: block; }
.pricing-table .price-number {
    display: block;
    font-family: var(--ex-font-display);
    font-size: 2.1rem; font-weight: 800; line-height: 1.05;
    color: var(--ex-heading);
}
.pricing-table .price-tenure { display: block; font-size: .8rem; color: var(--ex-muted); margin-top: 4px; }
.pricing-table ul.features { list-style: none; margin: 0; padding: 0 20px 20px; flex: 1 1 auto; }
.pricing-table ul.features li {
    padding: 9px 0; font-size: .88rem; color: var(--ex-body);
    border-bottom: 1px solid var(--ex-border);
}
.pricing-table ul.features li:last-child { border-bottom: 0; }
.pricing-table .footer { padding: 0 20px 24px; }
.pricing-table .footer .btn, .pricing-table .footer .ex-btn { width: 100%; display: flex; }

.pricing-table li.highlight .pricing-container {
    border-color: transparent;
    box-shadow: 0 18px 45px rgba(0, 172, 172, .22);
    transform: translateY(-8px);
}
.pricing-table li.highlight h3 { background: var(--ex-gradient); color: #fff; }
.pricing-table li.highlight .price-number { color: var(--ex-teal-darker); }
.pricing-table li.custom-plan h3 { background: var(--ex-amber); color: #241a05 !important; }

/* Comparison tables */
.pricing-tbl { width: 100%; border-collapse: collapse; background: #fff; font-size: .9rem; }
.pricing-tbl th, .pricing-tbl td { padding: 14px 16px; border-bottom: 1px solid var(--ex-border); text-align: center; }
.pricing-tbl th:first-child, .pricing-tbl td:first-child { text-align: left; }
.pricing-tbl thead th {
    background: var(--ex-soft-grey);
    font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ex-muted);
}
.pricing-tbl.lg-cell { box-shadow: none; margin: 0; }

/* Bootstrap collapse accordions (comparison sections + FAQ) */
.panel-group { margin: 0; }
.panel-group .panel {
    background: #fff;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius) !important;
    box-shadow: var(--ex-shadow-sm);
    margin-bottom: 12px;
    overflow: hidden;
}
.panel-group .panel-heading { padding: 0; background: transparent; border: 0; }
.panel-group .panel-title { margin: 0; font-size: 1rem; font-family: var(--ex-font-display); }
.panel-group .panel-title a {
    display: block; padding: 18px 22px;
    font-weight: 700; color: var(--ex-heading); text-decoration: none;
}
.panel-group .panel-title a:hover { color: var(--ex-teal-darker); text-decoration: none; }
.panel-group .panel-body { padding: 0 22px 22px; color: var(--ex-body); border: 0 !important; }
.panel-collapse.collapse { display: none; }
.panel-collapse.collapse.in { display: block; }
.panel-collapse.collapsing { position: relative; height: 0; overflow: hidden; transition: height .3s ease; }

@media (max-width: 1199px) { .pricing-table { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    .pricing-table { grid-template-columns: minmax(0, 1fr); }
    .pricing-table li.highlight .pricing-container { transform: none; }
}

/* ------------- Marketing page compatibility (plans / landing) ---------
   These pages keep their original Bootstrap-grid section markup so the
   dynamic pricing content is untouched; scoped so the admin shell, which
   also loads Bootstrap, is unaffected. */
body:not(.ex-app) .container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}
body:not(.ex-app) .content { padding: 72px 0; }
body:not(.ex-app) .content.bg-silver,
body:not(.ex-app) .content.bg-silver-lighter { background: var(--ex-soft-grey); }
body:not(.ex-app) .content.bg-black-darker,
body:not(.ex-app) .content.bg-black { background: var(--ex-slate); color: rgba(255, 255, 255, .82); }
body:not(.ex-app) .content.bg-black-darker h1,
body:not(.ex-app) .content.bg-black-darker h2,
body:not(.ex-app) .content.bg-black h2 { color: #fff; }

body:not(.ex-app) .content-title {
    text-align: center;
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    font-weight: 800;
    margin-bottom: 12px;
}
body:not(.ex-app) .content-desc {
    text-align: center;
    color: var(--ex-muted);
    font-size: 1.05rem;
    max-width: 720px;
    margin: 0 auto 48px;
}

body:not(.ex-app) .row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
body:not(.ex-app) [class*="col-md-"],
body:not(.ex-app) [class*="col-sm-"] { padding: 0 12px; flex: 1 1 100%; min-width: 0; }
body:not(.ex-app) .col-md-6 { flex: 1 1 calc(50% - 24px); }
body:not(.ex-app) .col-md-4 { flex: 1 1 calc(33.333% - 24px); }
body:not(.ex-app) .col-md-3 { flex: 1 1 calc(25% - 24px); }
body:not(.ex-app) .col-md-12 { flex: 1 1 100%; }
body:not(.ex-app) .text-center { text-align: center; }
body:not(.ex-app) .m-b-20 { margin-bottom: 20px; }
body:not(.ex-app) .m-b-40 { margin-bottom: 40px; }
body:not(.ex-app) .p-b-40 { padding-bottom: 40px; }

@media (max-width: 767px) {
    body:not(.ex-app) .col-md-6,
    body:not(.ex-app) .col-md-4,
    body:not(.ex-app) .col-md-3 { flex: 1 1 100%; }
}

/* -------------- Landing page hero & legacy marketing buttons --------- */
body:not(.ex-app) .content.has-bg { position: relative; overflow: hidden; padding: 0; }
body:not(.ex-app) .content-bg { position: absolute; inset: 0; }
body:not(.ex-app) .content-bg img { width: 100%; height: 100%; object-fit: cover; }
body:not(.ex-app) .content.has-bg::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0, 172, 172, .88) 0%, rgba(52, 143, 226, .88) 100%);
}
body:not(.ex-app) .content.has-bg > .container { position: relative; z-index: 1; }

body:not(.ex-app) .home-content {
    text-align: center;
    padding: 140px 0 120px;
    color: #fff;
}
body:not(.ex-app) .home-content h1 {
    color: #fff;
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    margin-bottom: 16px;
}
body:not(.ex-app) .home-content h3 {
    color: rgba(240, 253, 250, .95);
    font-size: clamp(1.1rem, 2.4vw, 1.5rem);
    font-weight: 600;
    margin-bottom: 20px;
}
body:not(.ex-app) .home-content p {
    color: rgba(240, 253, 250, .9);
    font-size: 1.05rem;
    max-width: 680px;
    margin: 0 auto 32px;
}
body:not(.ex-app) .home-content .btn + .btn { margin-left: 12px; }

/* Legacy theme buttons still used across the marketing markup */
body:not(.ex-app) .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 30px;
    border: 1px solid transparent;
    border-radius: var(--ex-radius-pill);
    font-family: var(--ex-font-body);
    font-size: .95rem; font-weight: 700; line-height: 1.2;
    text-decoration: none; cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
}
body:not(.ex-app) .btn:hover { text-decoration: none; }
body:not(.ex-app) .btn.btn-theme,
body:not(.ex-app) .btn.btn-success {
    background: var(--ex-gradient); color: #fff;
    box-shadow: 0 6px 18px rgba(0, 172, 172, .28);
}
body:not(.ex-app) .content.has-bg .btn.btn-theme { background: #fff; color: var(--ex-teal-darker); }
body:not(.ex-app) .btn.btn-outline {
    background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6);
}
body:not(.ex-app) .btn.btn-outline:hover { background: rgba(255, 255, 255, .14); color: #fff; }
body:not(.ex-app) .btn.btn-custom { background: var(--ex-amber); color: #241a05; }
body:not(.ex-app) .btn-block { width: 100%; display: flex; }
body:not(.ex-app) .btn-lg { padding: 16px 34px; font-size: 1.02rem; }

/* ------------------------- Exam calculator ---------------------------
   client/static/js/calculator.js dispatches on each key's FIRST class
   name (number/operator/function/...), so the markup keeps its original
   classes and only the presentation is redefined here. Materialize is
   no longer loaded. */
.calc-page { background: var(--ex-soft-grey); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.calc-container {
    width: 100%;
    max-width: 720px;
    background: #fff;
    border-radius: var(--ex-radius-lg);
    box-shadow: var(--ex-shadow-lg);
    padding: 20px;
    overflow: hidden;
}
.calc-page.calc-compact .calc-container { max-width: 340px; }

#screen {
    background: var(--ex-slate);
    border-radius: var(--ex-radius);
    padding: 18px 20px;
    margin-bottom: 16px;
    text-align: right;
    color: #fff;
}
#screen #top {
    min-height: 20px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .85rem;
    color: rgba(255, 255, 255, .55);
    word-break: break-all;
}
#screen #bottom {
    font-family: var(--ex-font-display);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.2;
    word-break: break-all;
}

.calc-cell-container { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.calc-page.calc-compact .calc-cell-container { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.calc-cell {
    display: flex; align-items: center; justify-content: center;
    min-height: 48px;
    padding: 6px 4px;
    border-radius: 12px;
    background: var(--ex-soft-grey);
    color: var(--ex-heading);
    font-family: var(--ex-font-body);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, transform .1s ease;
}
.calc-cell:hover { background: #eef2f7; }
.calc-cell:active { transform: translateY(1px); }
.calc-cell.number { background: #fff; border: 1px solid var(--ex-border); font-size: 1.05rem; font-weight: 700; }
.calc-cell.number:hover { background: var(--ex-soft-grey); }
.calc-cell.function, .calc-cell.constant, .calc-cell.paren { background: var(--ex-soft-teal); color: var(--ex-teal-darker); font-size: .82rem; }
.calc-cell.operator { background: var(--ex-soft-blue); color: #1d4f80; }
.calc-cell.modifier { background: #fff; border: 1px solid var(--ex-border); }
.calc-cell.command { background: var(--ex-danger-soft); color: #96302f; }
.calc-cell.command#equals { background: var(--ex-gradient); color: #fff; font-size: 1.15rem; }
#deg, #rad { font-size: .78rem; }
#deg.inactive, #rad.inactive { opacity: .45; }

@media (max-width: 767px) {
    .calc-cell-container { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .calc-cell { min-height: 44px; font-size: .85rem; }
}
.video-container video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.slider-wrapper .range-bar {
    width: calc(100% - 60px);
    margin-right: 30px;
    margin-left: 30px;
}

/* ------------- plans.html comparison grid (ul.price-ul) --------------
   plans.html builds its comparison as a list of columns (one <li> per
   plan, plus a leading label column), not a <table>. Rendered here as a
   6-column grid with aligned feature rows. */
.price-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-lg);
    overflow: hidden;
    background: #fff;
}
.price-ul > li { display: flex; flex-direction: column; border-right: 1px solid var(--ex-border); }
.price-ul > li:last-child { border-right: 0; }

.price-ul .panel-heading {
    padding: 22px 16px;
    text-align: center;
    background: var(--ex-soft-grey);
    border-bottom: 1px solid var(--ex-border);
    min-height: 208px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}
.price-ul .price-first-heading .panel-heading { text-align: left; align-items: flex-start; }
.price-ul .price-first-heading h3 { font-size: 1.05rem; margin: 0; }
.price-ul .price-first-heading p { font-size: .8rem; color: var(--ex-muted); margin: 0; }

.price-ul .price-label {
    font-size: .78rem; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ex-muted); margin: 0;
}
.price-ul .price-foreword { font-size: .74rem; color: var(--ex-faint); }
.price-ul .price-figure { display: flex; align-items: baseline; justify-content: center; gap: 2px; }
.price-ul .price-amount {
    font-family: var(--ex-font-display);
    font-size: 1.65rem; font-weight: 800; color: var(--ex-heading); line-height: 1.1;
}
.price-ul .price-marker { font-size: .8rem; color: var(--ex-faint); }
.price-ul .price-button { margin-top: auto; width: 100%; }
.price-ul .price-button a {
    display: block; width: 100%;
    padding: 10px 14px;
    border-radius: var(--ex-radius-pill);
    background: var(--ex-gradient); color: #fff;
    font-size: .82rem; font-weight: 700; text-align: center;
}
.price-ul .price-button a:hover { color: #fff; text-decoration: none; }

/* Highlight the recommended tier, and keep the Flexible plan on amber */
.price-ul .panel-success .panel-heading { background: var(--ex-gradient); }
.price-ul .panel-success .price-label,
.price-ul .panel-success .price-amount,
.price-ul .panel-success .price-foreword,
.price-ul .panel-success .price-marker { color: #fff; }
.price-ul .panel-success .price-button a { background: #fff; color: var(--ex-teal-darker); }
.price-ul .panel-default .price-button a { background: var(--ex-amber); color: #241a05; }

.price-ul .list-group { list-style: none; margin: 0; padding: 0; }
.price-ul .list-group-item {
    padding: 13px 16px;
    min-height: 48px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: .85rem;
    color: var(--ex-body);
    border-bottom: 1px solid var(--ex-border);
    text-align: center;
}
.price-ul .price-first-heading .list-group-item { justify-content: flex-start; text-align: left; font-weight: 600; }
.price-ul .list-group-item:last-child { border-bottom: 0; }
.comparison-label { display: none; }
.price-ul .fa-check, .price-ul .fa-times { color: var(--ex-teal); }
.price-ul .fa-times { color: var(--ex-faint); }

@media (max-width: 991px) {
    .price-ul { grid-template-columns: minmax(0, 1fr); border-radius: var(--ex-radius); }
    .price-ul > li { border-right: 0; border-bottom: 1px solid var(--ex-border); }
    .price-ul .price-first-heading { display: none; }
    .price-ul .list-group-item { justify-content: space-between; text-align: left; }
    .comparison-label { display: inline; font-weight: 600; color: var(--ex-muted); }
}

/* --------- Toggle switches (replacing the Switchery plugin) -----------
   settings.html marks these inputs data-render="switchery"; the legacy
   plugin hid the checkbox and injected its own widget. That plugin is no
   longer loaded, so the native input is styled as the switch itself and
   keeps its id/checked state for settings.js. */
input[type="checkbox"][data-render="switchery"] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block !important;
    position: relative;
    width: 46px;
    height: 26px;
    margin: 0;
    vertical-align: middle;
    background: #cbd5e1;
    border: 0;
    border-radius: var(--ex-radius-pill);
    cursor: pointer;
    transition: background-color .2s ease;
    flex: 0 0 46px;
}
input[type="checkbox"][data-render="switchery"]::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
    transition: transform .2s ease;
}
input[type="checkbox"][data-render="switchery"]:checked { background: var(--ex-teal); }
input[type="checkbox"][data-render="switchery"]:checked::after { transform: translateX(20px); }
input[type="checkbox"][data-render="switchery"]:disabled { opacity: .5; cursor: not-allowed; }

/* Plain checkboxes on admin pages (developer key scopes, etc.) */
.ex-app input[type="checkbox"]:not([data-render="switchery"]),
.ex-app input[type="radio"] { width: 16px; height: 16px; accent-color: var(--ex-teal); cursor: pointer; }

/* -------------------- Billing page (home/billing) -------------------- */
.billing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px 24px;
}
.billing-grid > div {
    padding: 14px 16px;
    background: var(--ex-soft-grey);
    border-radius: var(--ex-radius-sm);
}
.billing-label {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ex-muted);
    margin-bottom: 6px;
}
.billing-value {
    font-family: var(--ex-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ex-heading);
    line-height: 1.25;
    word-break: break-word;
}
.billing-status {
    display: inline-block;
    padding: 3px 12px;
    border-radius: var(--ex-radius-pill);
    font-family: var(--ex-font-body);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    background: var(--ex-soft-blue);
    color: #1d4f80;
}
.billing-status-active { background: var(--ex-success-soft); color: #14663f; }
.billing-status-grace { background: #fdf3e2; color: #8a5a06; }
.billing-status-suspended,
.billing-status-cancelled { background: var(--ex-danger-soft); color: #96302f; }
.billing-meta { font-size: .85rem; color: var(--ex-muted); }
.billing-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.billing-inline-form .form-control { width: auto; min-width: 180px; }

/* Legacy Bootstrap alerts still emitted by the billing/settings templates */
.ex-app .alert {
    padding: 14px 18px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid transparent;
    font-size: .93rem;
}
.ex-app .alert-warning { background: var(--ex-warning-soft); border-color: #f0dba8; color: #77551a; }
.ex-app .alert-info { background: var(--ex-soft-blue); border-color: #cfe2f8; color: #1d4f80; }
.ex-app .alert-danger { background: var(--ex-danger-soft); border-color: #f3c9c9; color: #96302f; }
.ex-app .alert-success { background: var(--ex-success-soft); border-color: #bfe5d1; color: #14663f; }
.ex-app .m-t-15 { margin-top: 15px; }
.ex-app .m-b-0 { margin-bottom: 0; }

/* Legacy "h1.page-header > small" heading used by the /home pages */
.ex-app h1.page-header {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--ex-heading);
    margin: 0 0 26px;
    padding: 0;
    border: 0;
}
.ex-app h1.page-header small {
    display: block;
    margin-top: 6px;
    font-family: var(--ex-font-body);
    font-size: .95rem;
    font-weight: 500;
    color: var(--ex-muted);
}
.ex-app .pull-right { float: right; }
.ex-app .pull-left { float: left; }

.ex-side-nav__chev { margin-left: auto; color: #cbd5e1; flex: 0 0 12px; }
.ex-side-nav__chev svg { width: 12px; height: 12px; display: block; }

/* Admin footer strip (mock: bg-white border-t, offset past the sidebar) */
.ex-app__foot {
    background: #fff;
    border-top: 1px solid #f1f5f9;
    padding: 24px 32px;
    margin-left: 280px;
}
.ex-app__foot-inner {
    max-width: 1152px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.ex-app__foot-links { display: flex; gap: 24px; }
.ex-app__foot-links a { color: #94a3b8; transition: color .2s; }
.ex-app__foot-links a:hover, .ex-app__foot-links a:focus { color: #0d9488; text-decoration: none; }
@media (max-width: 991px) {
    .ex-app__foot { margin-left: 0; }
    .ex-app__foot-inner { flex-direction: column; }
}

/* ---------------------------- Language switcher ---------------------------- */
.ex-lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 100%;
    font-size: .82rem;
}

.ex-lang__label {
    font-weight: 700;
    color: var(--ex-muted);
}

.ex-lang__option {
    padding: 3px 10px;
    border-radius: var(--ex-radius-pill);
    color: var(--ex-muted);
    text-decoration: none;
}

.ex-lang__option:hover,
.ex-lang__option:focus { background: var(--ex-soft-grey); color: var(--ex-heading); text-decoration: none; }

.ex-lang__option.is-selected {
    background: var(--ex-soft-teal);
    color: var(--ex-teal-darker);
    font-weight: 700;
}

/* Each option is written in its own language, so an Arabic option inside an
   English page still needs to read right to left within its own box. */
.ex-lang__option[lang="ar"] { direction: rtl; unicode-bidi: isolate; }


/* ============================== Cookie consent ============================= */
/* Reject and Accept are deliberately the same control with different colours:
   same size, same padding, same position in the row. Making one quieter than
   the other is the pattern regulators have been fining, and it is the kind of
   thing that drifts back in through a well-meant style tweak - so they share a
   rule rather than each having their own. */
.ex-consent {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1000;
    background: #fff;
    border-top: 1px solid var(--ex-border);
    box-shadow: 0 -12px 40px rgba(30, 41, 59, .16);
    padding: 20px 0;
}
.ex-consent__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.ex-consent__copy { flex: 1 1 420px; }
.ex-consent__heading { margin: 0 0 4px; font-size: 1rem; font-weight: 800; }
.ex-consent__body { margin: 0; font-size: .875rem; color: var(--ex-muted); line-height: 1.6; }
.ex-consent__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* The two answers, sized by one rule so neither can be demoted on its own. */
.ex-consent__actions .ex-btn { min-width: 132px; justify-content: center; }
.ex-consent__manage {
    background: none; border: 0; padding: 8px 4px; font: inherit;
    font-size: .8125rem; color: var(--ex-teal-darker);
    text-decoration: underline; cursor: pointer;
}

.ex-consent-prefs {
    position: fixed; inset: 0; z-index: 1001;
    background: rgba(15, 23, 42, .5);
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.ex-consent-prefs[hidden] { display: none; }
.ex-consent-prefs__panel {
    background: #fff; border-radius: 16px; padding: 28px;
    max-width: 560px; width: 100%; max-height: 80vh; overflow-y: auto;
}
.ex-consent-prefs__panel h2 { margin: 0 0 8px; font-size: 1.125rem; font-weight: 800; }
.ex-consent-prefs__category { padding: 16px 0; border-bottom: 1px solid var(--ex-border); }
.ex-consent-prefs__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ex-consent-prefs__name { font-weight: 700; font-size: .9375rem; }
.ex-consent-prefs__always { font-size: .8125rem; color: var(--ex-muted); }
.ex-consent-prefs__description { margin: 6px 0 0; font-size: .8125rem; color: var(--ex-muted); line-height: 1.6; }
.ex-consent-prefs__actions { display: flex; gap: 12px; justify-content: flex-end; padding-top: 20px; }
.ex-footer__consent { font-size: .8125rem; text-decoration: underline; }

@media (max-width: 640px) {
    .ex-consent__actions { width: 100%; }
    /* Still equal to each other, just stacked. */
    .ex-consent__actions .ex-btn { flex: 1 1 0; min-width: 0; }
}