/* ============================================================
   SQLISM — CERTIFICATION (hub, exam, public certificate page)
   Pages: certification.php, certification-exam.php, certificate.php
   All three put class="ct-page" on <body>. Tokens live on .ct-page;
   every element rule is scoped to .ct-main so nothing leaks into
   the shared navbar/footer (lesson learned on the Skill Check page).
   Certificate artwork itself: /assets/css/certificate.css.
   ============================================================ */

.ct-page {
    --ct-bg: #f4f2ec;
    --ct-surface: #ffffff;
    --ct-surface-2: #f8f7f3;
    --ct-text: #10142a;
    --ct-soft: #475069;
    --ct-muted: #6b7189;
    --ct-line: rgba(16, 20, 42, 0.10);
    --ct-line-2: rgba(16, 20, 42, 0.16);
    --ct-violet: #6d4aff;
    --ct-violet-soft: rgba(109, 74, 255, 0.10);
    --ct-gold-1: #fbbf24;
    --ct-gold-2: #d97706;
    --ct-ok: #15803d;
    --ct-ok-soft: rgba(22, 163, 74, 0.12);
    --ct-warn: #b45309;
    --ct-warn-soft: rgba(217, 119, 6, 0.13);
    --ct-bad: #dc2626;
    --ct-bad-soft: rgba(220, 38, 38, 0.10);
    --ct-li: #0a66c2;
    --ct-shadow: 0 1px 2px rgba(16, 20, 42, 0.05), 0 14px 34px -20px rgba(16, 20, 42, 0.30);
    --ct-ease: cubic-bezier(0.22, 1, 0.36, 1);
    margin: 0;
    background: var(--ct-bg);
    color: var(--ct-text);
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
[data-theme="dark"] .ct-page {
    --ct-bg: #070a14;
    --ct-surface: #10162a;
    --ct-surface-2: #0c1222;
    --ct-text: #eef1f8;
    --ct-soft: #b5bdd2;
    --ct-muted: #8b93ab;
    --ct-line: rgba(255, 255, 255, 0.08);
    --ct-line-2: rgba(255, 255, 255, 0.15);
    --ct-violet: #a48dff;
    --ct-violet-soft: rgba(164, 141, 255, 0.14);
    --ct-ok: #4ade80;
    --ct-ok-soft: rgba(74, 222, 128, 0.13);
    --ct-warn: #fbbf24;
    --ct-warn-soft: rgba(251, 191, 36, 0.13);
    --ct-bad: #f87171;
    --ct-bad-soft: rgba(248, 113, 113, 0.13);
    --ct-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -22px rgba(0, 0, 0, 0.8);
}
/* Navbar's hidden guest tooltip sits off-canvas on desktop */
html:has(> body.ct-page) { overflow-x: hidden; }
.ct-page [hidden] { display: none !important; }

.ct-main { max-width: 1180px; margin: 0 auto; padding: 0 16px 72px; box-sizing: border-box; }
.ct-main *, .ct-main *::before, .ct-main *::after { box-sizing: border-box; }
.ct-main h1, .ct-main h2, .ct-main h3 { color: var(--ct-text); letter-spacing: -0.02em; }
/* Excludes the site breadcrumb (breadcrumb.js prepends it into <main>):
   it must keep breadcrumb.css's own link colours. */
.ct-main a:not(.breadcrumb-link) { color: inherit; }
.ct-main p { line-height: 1.6; }
.ct-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; letter-spacing: 0.01em; }
.ct-muted { color: var(--ct-muted); font-weight: 500; }
.ct-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------- buttons ---------------- */
.ct-main .ct-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 46px; padding: 0 20px;
    border-radius: 12px; border: 1px solid transparent;
    font: inherit; font-size: 0.95rem; font-weight: 700;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: transform .18s var(--ct-ease), box-shadow .18s, background .18s, border-color .18s, color .18s;
}
.ct-main .ct-btn:disabled { opacity: .6; cursor: not-allowed; }
.ct-main .ct-btn:focus-visible { outline: 3px solid var(--ct-violet); outline-offset: 2px; }
.ct-main .ct-btn--sm { min-height: 38px; padding: 0 14px; font-size: 0.86rem; border-radius: 10px; }
.ct-main .ct-btn--lg { min-height: 54px; padding: 0 26px; font-size: 1.02rem; }
.ct-main .ct-btn--primary { color: #fff; background: linear-gradient(135deg, #7c5cff, #5b3df5); box-shadow: 0 12px 26px -14px rgba(91, 61, 245, 0.85); }
.ct-main .ct-btn--primary:hover:not(:disabled) { transform: translateY(-1px); color: #fff; }
.ct-main .ct-btn--gold { color: #422006; background: linear-gradient(135deg, var(--ct-gold-1), var(--ct-gold-2)); box-shadow: 0 12px 26px -14px rgba(217, 119, 6, 0.8); }
.ct-main .ct-btn--gold:hover { transform: translateY(-1px); color: #422006; }
.ct-main .ct-btn--linkedin { color: #fff; background: var(--ct-li); box-shadow: 0 12px 26px -14px rgba(10, 102, 194, 0.85); }
.ct-main .ct-btn--linkedin:hover { background: #004182; color: #fff; transform: translateY(-1px); }
.ct-main .ct-btn--outline { color: var(--ct-text); background: var(--ct-surface); border-color: var(--ct-line-2); }
.ct-main .ct-btn--outline:hover { border-color: var(--ct-violet); color: var(--ct-violet); }
.ct-main .ct-btn--ghost { color: var(--ct-text); background: var(--ct-surface-2); border-color: var(--ct-line); }
.ct-main .ct-btn--ghost:hover:not(:disabled) { border-color: var(--ct-violet); color: var(--ct-violet); }
.ct-main .ct-btn--glass { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); }
.ct-main .ct-btn--glass:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.ct-main .ct-btn.is-done { border-color: var(--ct-ok); color: var(--ct-ok); }

/* ---------------- shared bits ---------------- */
.ct-main .ct-card {
    background: var(--ct-surface);
    border: 1px solid var(--ct-line);
    border-radius: 18px;
    box-shadow: var(--ct-shadow);
    padding: clamp(18px, 2.6vw, 28px);
}
.ct-main .ct-card > h2 { margin: 0 0 14px; font-size: 1.12rem; display: flex; align-items: center; gap: 10px; }
.ct-main .ct-card > h2 i { color: var(--ct-violet); }
.ct-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 13px; border-radius: 999px;
    font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    color: #fde68a; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.32);
}
.ct-eyebrow--dark { color: var(--ct-violet); background: var(--ct-violet-soft); border-color: transparent; }
.ct-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ct-violet); }
.ct-grad { background: linear-gradient(90deg, #fde68a, #fbbf24 45%, #a3e635); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ct-main .ct-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ct-main .ct-chips li {
    padding: 4px 10px; border-radius: 999px;
    font-size: 0.78rem; font-weight: 650;
    color: var(--ct-soft); background: var(--ct-surface-2); border: 1px solid var(--ct-line);
}
.ct-main .ct-chips li b { color: var(--ct-violet); margin-left: 3px; }
.ct-main .ct-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 0.75rem; font-weight: 800; white-space: nowrap;
}
.ct-pill--ok { color: var(--ct-ok); background: var(--ct-ok-soft); }
.ct-pill--ready { color: var(--ct-violet); background: var(--ct-violet-soft); }
.ct-pill--wait { color: var(--ct-warn); background: var(--ct-warn-soft); }
.ct-pill--lock { color: var(--ct-muted); background: var(--ct-surface-2); border: 1px solid var(--ct-line); }
.ct-main .ct-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ct-violet); font-weight: 700; text-decoration: none; }
.ct-main .ct-link:hover { text-decoration: underline; }
.ct-main .ct-notice {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 18px; padding: 14px 18px; border-radius: 14px;
    color: var(--ct-warn); background: var(--ct-warn-soft); font-weight: 600;
}

/* ============================================================
   HUB
   ============================================================ */
.ct-hero {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(24px, 4vw, 56px); align-items: center;
    margin: clamp(16px, 3vw, 30px) 0 34px;
    padding: clamp(28px, 4.5vw, 60px);
    border-radius: 26px;
    color: #eef1f8;
    background:
        radial-gradient(110% 120% at 0% 0%, rgba(251, 191, 36, 0.16), transparent 55%),
        radial-gradient(100% 120% at 100% 100%, rgba(124, 92, 255, 0.30), transparent 55%),
        linear-gradient(150deg, #0b1026, #0a0d1a 60%, #120f2b);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 40px 90px -42px rgba(10, 13, 26, 0.6);
}
.ct-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(120% 90% at 30% 0%, #000 40%, transparent 85%);
            mask-image: radial-gradient(120% 90% at 30% 0%, #000 40%, transparent 85%);
}
.ct-hero__copy, .ct-hero__art { position: relative; min-width: 0; }
.ct-main .ct-hero h1 { margin: 18px 0 14px; font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.07; font-weight: 800; color: #fff; letter-spacing: -0.035em; }
.ct-hero__copy > p { margin: 0 0 24px; color: rgba(226, 232, 255, 0.78); font-size: 1.05rem; max-width: 560px; }
.ct-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ct-hero__facts { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ct-hero__facts li { flex: 1 1 120px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.10); }
.ct-hero__facts strong { display: block; font-size: 1.35rem; font-weight: 800; color: #fff; }
.ct-hero__facts span { font-size: 0.78rem; font-weight: 600; color: rgba(226, 232, 255, 0.65); }
.ct-hero__mine { margin: 18px 0 0 !important; color: #bbf7d0 !important; font-weight: 600; font-size: .95rem !important; }
.ct-hero__mine a { color: #fff; }
.ct-hero__cert { transform: perspective(1400px) rotateY(-9deg) rotateX(3deg) rotate(-1deg); transition: transform .6s var(--ct-ease); }
.ct-hero:hover .ct-hero__cert { transform: perspective(1400px) rotateY(-3deg) rotateX(1deg) rotate(0deg); }
.ct-float {
    position: absolute; display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: 999px;
    font-size: 0.82rem; font-weight: 800; white-space: nowrap;
    box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.6);
    animation: ct-bob 5s ease-in-out infinite;
}
.ct-float--li { left: -10px; bottom: 8%; color: #fff; background: var(--ct-li); }
.ct-float--ok { left: 18px; top: -14px; color: #14532d; background: #bbf7d0; animation-delay: -2.5s; }
@keyframes ct-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.ct-section { margin: 0 0 48px; }
.ct-section__head { max-width: 680px; margin: 0 auto 26px; text-align: center; }
.ct-main .ct-section__head h2 { margin: 10px 0 8px; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; }
.ct-section__head p { margin: 0; color: var(--ct-soft); }

.ct-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: none; }
.ct-steps li {
    position: relative; padding: 24px 20px 20px; border-radius: 18px;
    background: var(--ct-surface); border: 1px solid var(--ct-line); box-shadow: var(--ct-shadow);
}
.ct-steps li > i { font-size: 1.4rem; color: var(--ct-violet); }
.ct-steps li:last-child > i { color: var(--ct-li); }
.ct-steps__n {
    position: absolute; top: 18px; right: 18px;
    width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
    font-size: 0.8rem; font-weight: 800; color: var(--ct-muted); background: var(--ct-surface-2); border: 1px solid var(--ct-line);
}
.ct-main .ct-steps h3 { margin: 14px 0 6px; font-size: 1.02rem; }
.ct-steps p { margin: 0; color: var(--ct-soft); font-size: 0.92rem; }

.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 16px; }
.ct-tile {
    display: flex; flex-direction: column; gap: 6px;
    padding: 20px; border-radius: 18px;
    background: var(--ct-surface); border: 1px solid var(--ct-line); box-shadow: var(--ct-shadow);
    transition: transform .25s var(--ct-ease), border-color .25s;
}
.ct-tile:hover { transform: translateY(-3px); border-color: var(--ct-line-2); }
.ct-tile--earned { border-color: rgba(22, 163, 74, 0.35); background: linear-gradient(180deg, var(--ct-ok-soft), var(--ct-surface) 45%); }
.ct-tile--ready, .ct-tile--in_progress { border-color: rgba(109, 74, 255, 0.35); }
.ct-tile__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ct-tile__icon {
    width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
    font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, #7c5cff, #22d3ee);
}
.ct-tile--earned .ct-tile__icon { background: linear-gradient(135deg, var(--ct-gold-1), var(--ct-gold-2)); color: #422006; }
.ct-main .ct-tile h3 { margin: 4px 0 0; font-size: 1.05rem; line-height: 1.3; }
.ct-tile__path { margin: 0 0 8px !important; color: var(--ct-muted); font-size: 0.85rem; font-weight: 600; }
.ct-tile__cta { margin-top: auto; padding-top: 14px; }
.ct-tile__note { display: inline-flex; align-items: center; gap: 7px; color: var(--ct-warn); font-weight: 700; font-size: 0.88rem; }

.ct-procta {
    display: flex; align-items: center; gap: 18px; margin-top: 22px;
    padding: 20px 24px; border-radius: 18px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(217, 119, 6, 0.06));
    border: 1px solid rgba(217, 119, 6, 0.3);
}
.ct-procta > div { flex: 1; }
.ct-main .ct-procta h3 { margin: 0 0 4px; font-size: 1.05rem; }
.ct-procta p { margin: 0; color: var(--ct-soft); font-size: 0.92rem; }
.ct-procta__icon { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.2rem; color: #422006; background: linear-gradient(135deg, var(--ct-gold-1), var(--ct-gold-2)); }

.ct-two { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; }
.ct-main dl { margin: 0; }
.ct-main dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--ct-line-2); }
.ct-main dl > div:last-child { border-bottom: 0; }
.ct-main dt { color: var(--ct-muted); font-weight: 600; font-size: 0.9rem; flex: none; }
.ct-main dd { margin: 0; text-align: right; font-weight: 650; font-size: 0.92rem; min-width: 0; overflow-wrap: anywhere; }
.ct-main dd a { color: var(--ct-violet); text-decoration: none; }
.ct-verifybox p { margin: 0 0 14px; color: var(--ct-soft); }

.ct-lookup__form { display: flex; gap: 10px; width: 100%; }
.ct-lookup__form input {
    flex: 1; min-width: 0; height: 48px; padding: 0 14px;
    border-radius: 12px; border: 1.5px solid var(--ct-line-2);
    background: var(--ct-surface-2); color: var(--ct-text);
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.ct-lookup__form input::placeholder { color: var(--ct-muted); opacity: .7; }
.ct-lookup__form input:focus { outline: none; border-color: var(--ct-violet); box-shadow: 0 0 0 4px var(--ct-violet-soft); }

.ct-faq { max-width: 820px; margin-left: auto; margin-right: auto; }
.ct-faq details {
    margin-bottom: 10px; border-radius: 14px;
    background: var(--ct-surface); border: 1px solid var(--ct-line);
}
.ct-faq summary { cursor: pointer; padding: 16px 20px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.ct-faq summary::-webkit-details-marker { display: none; }
.ct-faq summary::after { content: '+'; font-weight: 800; color: var(--ct-violet); font-size: 1.2rem; line-height: 1; }
.ct-faq details[open] summary::after { content: '–'; }
.ct-faq details p { margin: 0; padding: 0 20px 18px; color: var(--ct-soft); }

/* ============================================================
   PUBLIC CERTIFICATE PAGE
   ============================================================ */
.ct-verified {
    display: flex; align-items: center; gap: 14px;
    margin: clamp(16px, 3vw, 28px) 0 22px; padding: 14px 18px;
    border-radius: 16px;
    color: var(--ct-text);
    background: var(--ct-ok-soft); border: 1px solid rgba(22, 163, 74, 0.32);
}
.ct-verified__icon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: #16a34a; font-size: 1.1rem; }
.ct-verified strong { display: block; color: var(--ct-ok); font-size: 1rem; }
.ct-verified span { color: var(--ct-soft); font-size: 0.92rem; }
.ct-cert-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.ct-cert-stage { position: sticky; top: 90px; }
.ct-side { display: grid; gap: 16px; }
.ct-actions { display: grid; gap: 10px; }
.ct-actions__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ct-actions .ct-btn { width: 100%; }
.ct-hint { margin: 4px 0 0; font-size: 0.82rem; color: var(--ct-muted); }
.ct-hint i { color: var(--ct-warn); margin-right: 4px; }
.ct-what p { margin: 0 0 12px; color: var(--ct-soft); font-size: 0.92rem; }
.ct-earn { text-align: center; background: linear-gradient(180deg, var(--ct-violet-soft), var(--ct-surface) 60%); }
.ct-earn__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #422006; background: linear-gradient(135deg, var(--ct-gold-1), var(--ct-gold-2)); font-size: 1.2rem; }
.ct-main .ct-earn h2 { justify-content: center; margin: 12px 0 6px; }
.ct-earn p { margin: 0 0 14px; color: var(--ct-soft); font-size: 0.92rem; }

.ct-lookup {
    max-width: 640px; margin: clamp(30px, 6vw, 70px) auto; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.ct-lookup__icon { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 1.6rem; color: #fff; background: linear-gradient(135deg, #7c5cff, #22d3ee); }
.ct-main .ct-lookup h1 { margin: 6px 0 0; font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; }
.ct-lookup p { margin: 0; color: var(--ct-soft); }
.ct-lookup p a { color: var(--ct-violet); }

/* ============================================================
   EXAM
   ============================================================ */
.ct-exam-hero { position: relative; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: clamp(16px, 3vw, 28px) 0 20px; }
.ct-back { flex-basis: 100%; display: inline-flex; align-items: center; gap: 8px; color: var(--ct-muted) !important; font-weight: 600; text-decoration: none; font-size: 0.9rem; }
.ct-back:hover { color: var(--ct-violet) !important; }
.ct-exam-hero__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.4rem; color: #fff; background: linear-gradient(135deg, #7c5cff, #22d3ee); flex: none; }
.ct-main .ct-exam-hero h1 { margin: 8px 0 0; font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 800; }

.ct-gate { max-width: 640px; margin: 10px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ct-gate > i { font-size: 1.8rem; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; color: var(--ct-violet); background: var(--ct-violet-soft); }
.ct-gate--pro > i { color: #422006; background: linear-gradient(135deg, var(--ct-gold-1), var(--ct-gold-2)); }
.ct-gate--ok > i { color: var(--ct-ok); background: var(--ct-ok-soft); }
.ct-main .ct-gate h2 { margin: 6px 0 0; font-size: 1.4rem; }
.ct-gate p { margin: 0 0 8px; color: var(--ct-soft); }

.ct-exam-rules { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; }
.ct-rulelist { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.ct-rulelist li { display: flex; gap: 14px; }
.ct-rulelist i { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--ct-violet); background: var(--ct-violet-soft); }
.ct-rulelist strong { display: block; }
.ct-rulelist span { color: var(--ct-soft); font-size: 0.9rem; }
.ct-skillmix > span { display: block; margin-bottom: 8px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ct-muted); }
.ct-startform p { margin: -6px 0 16px; color: var(--ct-soft); font-size: 0.92rem; }
.ct-label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 0.88rem; }
.ct-input {
    width: 100%; height: 50px; padding: 0 14px; margin-bottom: 14px;
    border-radius: 12px; border: 1.5px solid var(--ct-line-2);
    background: var(--ct-surface-2); color: var(--ct-text); font: inherit; font-size: 1.02rem; font-weight: 600;
}
.ct-input:focus { outline: none; border-color: var(--ct-violet); box-shadow: 0 0 0 4px var(--ct-violet-soft); }
.ct-check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; font-size: 0.9rem; color: var(--ct-soft); cursor: pointer; }
.ct-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: #6d4aff; flex: none; }
.ct-formerr { margin: 0 0 12px !important; padding: 10px 12px; border-radius: 10px; color: var(--ct-bad) !important; background: var(--ct-bad-soft); font-weight: 600; font-size: 0.9rem; }
.ct-startform .ct-btn { width: 100%; }

/* live exam */
.ct-exambar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin: 0 0 16px; padding: 12px 16px;
    border-radius: 16px;
    background: var(--ct-surface); border: 1px solid var(--ct-line); box-shadow: var(--ct-shadow);
}
.ct-exambar__title { display: flex; align-items: center; gap: 8px; font-weight: 800; min-width: 0; flex: 1 1 200px; }
.ct-exambar__title i { color: var(--ct-violet); }
.ct-exambar__title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-exambar__progress { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; color: var(--ct-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.ct-exambar__track { width: 120px; height: 7px; border-radius: 99px; background: var(--ct-surface-2); border: 1px solid var(--ct-line); overflow: hidden; }
.ct-exambar__track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7c5cff, #22d3ee); transition: width .3s; }
.ct-timer {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums;
    color: var(--ct-text); background: var(--ct-surface-2); border: 1px solid var(--ct-line);
}
.ct-timer.is-low { color: var(--ct-warn); background: var(--ct-warn-soft); border-color: transparent; }
.ct-timer.is-critical { color: #fff; background: #dc2626; animation: ct-pulse 1s ease-in-out infinite; }
@keyframes ct-pulse { 50% { opacity: .75; } }
/* Keep focus on the exam: hide the site's floating widgets while it runs */
body.ct-exam-live #global-share, body.ct-exam-live .scroll-top, body.ct-exam-live .ct-exam-hero { display: none !important; }
body.ct-exam-live .ct-exambar { margin-top: clamp(16px, 3vw, 28px); }

.ct-exam__grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.ct-q__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ct-q__num { font-weight: 800; font-size: 0.95rem; }
.ct-q__num small { color: var(--ct-muted); font-weight: 600; }
.ct-q__area { padding: 4px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; color: var(--ct-violet); background: var(--ct-violet-soft); }
.ct-flag {
    margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 10px; cursor: pointer;
    font: inherit; font-size: 0.82rem; font-weight: 700;
    color: var(--ct-muted); background: transparent; border: 1px solid var(--ct-line-2);
}
.ct-flag:hover { color: var(--ct-warn); border-color: var(--ct-warn); }
.ct-flag.is-on { color: var(--ct-warn); background: var(--ct-warn-soft); border-color: transparent; }
.ct-main .ct-q__text { margin: 0 0 16px; font-size: clamp(1.08rem, 2.2vw, 1.28rem); font-weight: 700; line-height: 1.5; outline: none; }
.ct-code {
    margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; overflow-x: auto;
    background: #0b1026; color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.06);
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.9rem; line-height: 1.6;
}
.ct-code code { white-space: pre; }
.ct-opts { display: grid; gap: 10px; }
.ct-opt {
    display: flex; align-items: flex-start; gap: 14px; width: 100%;
    padding: 14px 16px; text-align: left; cursor: pointer;
    font: inherit; font-size: 0.97rem; line-height: 1.5; color: var(--ct-text);
    background: var(--ct-surface); border: 1.5px solid var(--ct-line-2); border-radius: 14px;
    transition: border-color .15s, background .15s;
}
.ct-opt:hover { border-color: var(--ct-violet); }
.ct-opt:focus-visible { outline: 3px solid var(--ct-violet); outline-offset: 2px; }
.ct-opt.is-on { border-color: var(--ct-violet); background: var(--ct-violet-soft); box-shadow: 0 0 0 3px var(--ct-violet-soft); }
.ct-opt__key {
    flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
    font-size: 0.82rem; font-weight: 800; color: var(--ct-muted); background: var(--ct-surface-2); border: 1px solid var(--ct-line);
}
.ct-opt.is-on .ct-opt__key { color: #fff; background: #6d4aff; border-color: #6d4aff; }
.ct-opt__text { padding-top: 2px; min-width: 0; overflow-wrap: anywhere; }
.ct-opt__text.is-code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.88rem; }
.ct-q__nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
.ct-q__hint { margin: 12px 0 0; text-align: right; font-size: 0.78rem; color: var(--ct-muted); }
@media (hover: none) { .ct-q__hint { display: none; } }

.ct-nav { position: sticky; top: 84px; }
.ct-main .ct-nav h3 { margin: 0 0 12px; font-size: 0.95rem; }
.ct-nav__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ct-nav__q {
    aspect-ratio: 1; border-radius: 9px; cursor: pointer;
    font: inherit; font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--ct-soft); background: var(--ct-surface-2); border: 1.5px solid var(--ct-line);
    position: relative;
}
.ct-nav__q.is-answered { color: #fff; background: #6d4aff; border-color: #6d4aff; }
.ct-nav__q.is-flagged::after { content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; border: 2px solid var(--ct-surface); }
.ct-nav__q.is-current { outline: 2.5px solid var(--ct-text); outline-offset: 1px; }
.ct-nav__legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 0.8rem; color: var(--ct-muted); }
.ct-nav__legend li { display: flex; align-items: center; gap: 8px; }
.ct-nav__legend i { width: 14px; height: 14px; border-radius: 4px; background: var(--ct-surface-2); border: 1.5px solid var(--ct-line); }
.ct-nav__legend i.is-answered { background: #6d4aff; border-color: #6d4aff; }
.ct-nav__legend i.is-flagged { background: #f59e0b; border-color: #f59e0b; border-radius: 50%; }
.ct-nav__name { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--ct-line-2); font-size: 0.82rem; color: var(--ct-muted); overflow-wrap: anywhere; }
.ct-nav__name b { color: var(--ct-text); }

.ct-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(5, 8, 20, 0.6); backdrop-filter: blur(4px); }
.ct-modal__box { width: 100%; max-width: 460px; padding: 26px; border-radius: 20px; background: var(--ct-surface); border: 1px solid var(--ct-line); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6); }
.ct-main .ct-modal__box h2 { margin: 0 0 10px; font-size: 1.3rem; }
.ct-modal__box p { margin: 0 0 20px; color: var(--ct-soft); }
.ct-modal__actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.ct-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1001;
    max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px;
    color: #fff; background: #1f2937; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
    font-weight: 600; font-size: 0.92rem;
}
.ct-grading { max-width: 520px; margin: 30px auto; text-align: center; }
.ct-main .ct-grading h2 { margin: 18px 0 6px; justify-content: center; }
.ct-grading p { margin: 0; color: var(--ct-soft); }
.ct-spinner { width: 54px; height: 54px; margin: 0 auto; border-radius: 50%; border: 5px solid var(--ct-violet-soft); border-top-color: #6d4aff; animation: ct-spin 0.9s linear infinite; }
@keyframes ct-spin { to { transform: rotate(360deg); } }

/* results */
.ct-result { position: relative; overflow: hidden; display: flex; align-items: center; gap: clamp(20px, 4vw, 44px); }
.ct-result--pass { background: linear-gradient(135deg, rgba(251, 191, 36, 0.10), var(--ct-surface) 50%); border-color: rgba(217, 119, 6, 0.3); }
.ct-result__copy { position: relative; min-width: 0; }
.ct-main .ct-result h2 { margin: 10px 0 8px; font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; }
.ct-result p { margin: 0 0 10px; color: var(--ct-soft); }
.ct-result__id { font-size: 0.92rem; }
.ct-result__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ct-ring { position: relative; flex: none; width: 150px; height: 150px; }
.ct-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ct-ring__bg { fill: none; stroke: var(--ct-surface-2); stroke-width: 11; }
.ct-ring__fg { fill: none; stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset 1s var(--ct-ease); }
.ct-ring.is-pass .ct-ring__fg { stroke: #16a34a; }
.ct-ring.is-fail .ct-ring__fg { stroke: #f59e0b; }
.ct-ring__num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ct-ring__num strong { font-size: 2.2rem; font-weight: 800; line-height: 1; }
.ct-ring__num span { font-size: 0.8rem; color: var(--ct-muted); margin-top: 4px; }
.ct-confetti { position: absolute; inset: 0; pointer-events: none; }
.ct-confetti i {
    position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: 0;
    animation: ct-fall 2.8s ease-in forwards;
}
.ct-confetti i:nth-child(4n+1) { background: #a3e635; }
.ct-confetti i:nth-child(4n+2) { background: #22d3ee; }
.ct-confetti i:nth-child(4n+3) { background: #7c5cff; }
.ct-confetti i:nth-child(4n)   { background: #fbbf24; }
@keyframes ct-fall { 0% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 420px; rotate: 540deg; } }
.ct-confetti i:nth-child(1) { left: 33.1%; animation-delay: 0.14s; animation-duration: 2.98s; transform: rotate(-51deg); }
.ct-confetti i:nth-child(2) { left: 80.8%; animation-delay: 0.08s; animation-duration: 2.9s; transform: rotate(56deg); }
.ct-confetti i:nth-child(3) { left: 50.7%; animation-delay: 0.03s; animation-duration: 2.72s; transform: rotate(-52deg); }
.ct-confetti i:nth-child(4) { left: 25.1%; animation-delay: 0.5s; animation-duration: 2.27s; transform: rotate(12deg); }
.ct-confetti i:nth-child(5) { left: 13.9%; animation-delay: 0.2s; animation-duration: 2.95s; transform: rotate(-53deg); }
.ct-confetti i:nth-child(6) { left: 57.4%; animation-delay: 0.36s; animation-duration: 3.37s; transform: rotate(-55deg); }
.ct-confetti i:nth-child(7) { left: 55.4%; animation-delay: 0.12s; animation-duration: 2.7s; transform: rotate(9deg); }
.ct-confetti i:nth-child(8) { left: 13.3%; animation-delay: 0.28s; animation-duration: 3.18s; transform: rotate(-37deg); }
.ct-confetti i:nth-child(9) { left: 11.9%; animation-delay: 0.51s; animation-duration: 2.43s; transform: rotate(-48deg); }
.ct-confetti i:nth-child(10) { left: 54.6%; animation-delay: 0.06s; animation-duration: 2.27s; transform: rotate(-34deg); }
.ct-confetti i:nth-child(11) { left: 49.7%; animation-delay: 0.48s; animation-duration: 3.13s; transform: rotate(-1deg); }
.ct-confetti i:nth-child(12) { left: 58.2%; animation-delay: 0.41s; animation-duration: 2.56s; transform: rotate(41deg); }
.ct-confetti i:nth-child(13) { left: 19.3%; animation-delay: 0.7s; animation-duration: 2.3s; transform: rotate(-22deg); }
.ct-confetti i:nth-child(14) { left: 52.4%; animation-delay: 0.79s; animation-duration: 3.08s; transform: rotate(-24deg); }
.ct-confetti i:nth-child(15) { left: 60.5%; animation-delay: 0.07s; animation-duration: 2.81s; transform: rotate(-39deg); }
.ct-confetti i:nth-child(16) { left: 74.7%; animation-delay: 0.14s; animation-duration: 2.79s; transform: rotate(-55deg); }
.ct-confetti i:nth-child(17) { left: 94.4%; animation-delay: 0.07s; animation-duration: 2.87s; transform: rotate(41deg); }
.ct-confetti i:nth-child(18) { left: 86.0%; animation-delay: 0.28s; animation-duration: 3.03s; transform: rotate(16deg); }
.ct-confetti i:nth-child(19) { left: 49.7%; animation-delay: 0.72s; animation-duration: 2.28s; transform: rotate(-49deg); }
.ct-confetti i:nth-child(20) { left: 92.7%; animation-delay: 0.43s; animation-duration: 3.0s; transform: rotate(-53deg); }
.ct-confetti i:nth-child(21) { left: 72.2%; animation-delay: 0.28s; animation-duration: 2.89s; transform: rotate(27deg); }
.ct-confetti i:nth-child(22) { left: 80.9%; animation-delay: 0.26s; animation-duration: 2.66s; transform: rotate(25deg); }
.ct-confetti i:nth-child(23) { left: 35.3%; animation-delay: 0.85s; animation-duration: 2.63s; transform: rotate(18deg); }
.ct-confetti i:nth-child(24) { left: 13.2%; animation-delay: 0.05s; animation-duration: 3.12s; transform: rotate(-44deg); }
.ct-confetti i:nth-child(25) { left: 72.9%; animation-delay: 0.36s; animation-duration: 3.3s; transform: rotate(3deg); }
.ct-confetti i:nth-child(26) { left: 9.7%; animation-delay: 0.4s; animation-duration: 2.86s; transform: rotate(53deg); }
.ct-confetti i:nth-child(27) { left: 15.1%; animation-delay: 0.39s; animation-duration: 2.86s; transform: rotate(30deg); }
.ct-breakdown { margin-top: 16px; }
.ct-main .ct-breakdown h3 { margin: 0 0 14px; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; }
.ct-breakdown h3 i { color: var(--ct-violet); }
.ct-breakdown ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ct-breakdown li { display: grid; grid-template-columns: minmax(130px, 32%) 1fr 48px 64px; align-items: center; gap: 12px; font-size: 0.9rem; }
.ct-bd__name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-bd__track { height: 9px; border-radius: 99px; background: var(--ct-surface-2); border: 1px solid var(--ct-line); overflow: hidden; }
.ct-bd__fill { display: block; height: 100%; border-radius: inherit; }
.ct-bd__fill--good { background: #16a34a; }
.ct-bd__fill--mid { background: #f59e0b; }
.ct-bd__fill--low { background: #ef4444; }
.ct-bd__val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-main .ct-bd__link { color: var(--ct-violet); font-weight: 700; text-decoration: none; font-size: 0.85rem; }

/* ---------------- responsive ---------------- */
@media (max-width: 1000px) {
    .ct-hero { grid-template-columns: 1fr; }
    .ct-hero__art { max-width: 640px; margin: 0 auto; width: 100%; }
    .ct-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ct-cert-layout { grid-template-columns: 1fr; }
    .ct-cert-stage { position: static; }
    .ct-exam__grid { grid-template-columns: 1fr; }
    .ct-nav { position: static; order: -1; }
    .ct-nav__grid { grid-template-columns: repeat(10, 1fr); }
    .ct-nav__legend { grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 16px; }
}
@media (max-width: 760px) {
    .ct-two, .ct-exam-rules { grid-template-columns: 1fr; }
    .ct-procta { flex-direction: column; align-items: flex-start; }
    .ct-result { flex-direction: column; text-align: center; }
    .ct-result__actions { justify-content: center; }
    .ct-breakdown li { grid-template-columns: 1fr 44px 56px; row-gap: 5px; }
    .ct-bd__track { grid-column: 1 / -1; grid-row: 2; }
    .ct-exambar__track { display: none; }
}
@media (max-width: 560px) {
    .ct-steps { grid-template-columns: 1fr; }
    .ct-hero { padding: 26px 18px; border-radius: 20px; }
    .ct-hero__actions .ct-btn, .ct-result__actions .ct-btn, .ct-procta .ct-btn { width: 100%; }
    .ct-float { display: none; }
    .ct-lookup__form { flex-direction: column; }
    .ct-nav__grid { grid-template-columns: repeat(6, 1fr); }
    .ct-exambar { gap: 10px; padding: 10px 12px; }
    .ct-exambar__title { flex-basis: 100%; }
    .ct-exambar__progress { flex: 1; }
    .ct-exambar #ctOpenSubmit span { display: none; }
    .ct-q__nav .ct-btn { flex: 1; }
    .ct-actions__row { grid-template-columns: 1fr; }
    .ct-main dl > div { flex-direction: column; gap: 2px; }
    .ct-main dd { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    .ct-page *, .ct-page *::before, .ct-page *::after { animation: none !important; transition: none !important; }
}

/* ---------------- PRINT (certificate page → Save as PDF) ---------------- */
@media print {
    body.ct-page > *:not(.ct-main) { display: none !important; }
    .ct-main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
    .ct-main > *:not(.ct-cert-layout) { display: none !important; }
    .ct-cert-layout { display: block !important; }
    .ct-side { display: none !important; }
    .ct-cert-stage { position: static !important; }
}