:root {
    --sd-navy: #0b2d5c;
    --sd-navy-hover: #123f75;
    --sd-navy-soft: #eef4fa;
    --sd-coral: #e9664a;
    --sd-coral-dark: #bd4c36;
    --sd-coral-soft: #fff2ed;
    --sd-blue: #2f6fa5;
    --sd-blue-soft: #e9f3fb;
    --sd-canvas: #f5f8fb;
    --sd-surface: #ffffff;
    --sd-border: #dbe5ee;
    --sd-text: #172338;
    --sd-muted: #66758a;

    --admin-bg: var(--sd-canvas);
    --admin-surface: var(--sd-surface);
    --admin-sidebar-hover: var(--sd-navy-soft);
    --admin-sidebar-active: #e4eef8;
    --admin-text: var(--sd-text);
    --admin-muted: var(--sd-muted);
    --admin-border: var(--sd-border);
    --admin-border-soft: #e6edf3;

    --student-bg: var(--sd-canvas);
    --student-surface: var(--sd-surface);
    --student-surface-soft: #f9fbfd;
    --student-text: var(--sd-text);
    --student-text-soft: #3c4c61;
    --student-muted: var(--sd-muted);
    --student-border: var(--sd-border);
    --student-border-strong: #cbd9e6;
    --student-primary: var(--sd-navy);
    --student-primary-hover: var(--sd-navy-hover);
    --student-info-bg: var(--sd-navy-soft);
    --student-info: #24598e;
}

/* =========================================================
   2026 UNIFIED EXPERIENCE — shared visual language
   ========================================================= */

:root {
    --sd-ink: #081f42;
    --sd-ink-2: #123e70;
    --sd-sky: #4f91d8;
    --sd-sky-soft: #eaf3fc;
    --sd-mint: #2ca58d;
    --sd-coral: #ef7057;
    --sd-canvas: #f3f7fb;
    --sd-surface: rgba(255, 255, 255, 0.96);
    --sd-border: #dbe6f0;
    --sd-text: #11213a;
    --sd-muted: #6d7f95;
    --sd-radius: 18px;
    --sd-shadow: 0 14px 40px rgba(20, 55, 92, 0.07), 0 2px 8px rgba(20, 55, 92, 0.035);
}

html { scroll-behavior: smooth; }

body {
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 96% 2%, rgba(79, 145, 216, .10), transparent 28rem),
        var(--sd-canvas);
    color: var(--sd-text);
    -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }

/* Admin: elegant navigation rail and polished work surfaces */
.admin-layout { --admin-sidebar-width: 248px; }

.admin-sidebar {
    padding: 24px 16px 18px;
    border-right: 1px solid rgba(219, 230, 240, .9);
    background:
        radial-gradient(circle at 15% 3%, rgba(79, 145, 216, .09), transparent 10rem),
        rgba(255, 255, 255, .96);
    box-shadow: 8px 0 30px rgba(30, 63, 99, .025);
}

.admin-brand { padding-bottom: 28px; }
.admin-brand img { width: 128px; filter: drop-shadow(0 8px 14px rgba(11, 45, 92, .08)); }

.admin-nav-label {
    margin: 10px 0 7px;
    color: #91a0b3;
    font-size: 10px;
    letter-spacing: .12em;
}

.admin-nav { gap: 5px; }

.admin-nav a {
    position: relative;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #53647a;
    font-size: 14px;
    font-weight: 650;
}

.admin-nav a svg { color: #93a3b6; }

.admin-nav a:hover {
    border-color: #e3edf6;
    background: #f4f8fc;
    transform: translateX(2px);
}

.admin-nav a.active {
    border-color: #d6e5f4;
    background: linear-gradient(135deg, #e7f1fb, #f1f7fd);
    color: var(--sd-ink);
    box-shadow: inset 3px 0 var(--sd-sky), 0 7px 18px rgba(41, 91, 144, .07);
}

.admin-nav a.active svg { color: #255d96; }

.admin-logout button {
    border: 1px solid transparent;
    border-radius: 12px;
}

.admin-main {
    padding: 40px clamp(24px, 3vw, 48px) 70px;
    background:
        radial-gradient(circle at 92% 0%, rgba(79, 145, 216, .10), transparent 24rem),
        var(--sd-canvas);
}

.admin-header { margin-bottom: 30px; }
.admin-header h1 { color: var(--sd-ink); font-size: clamp(28px, 3vw, 40px); font-weight: 780; letter-spacing: -.04em; }
.admin-header p { color: var(--sd-muted); font-size: 15px; }

.admin-card, .admin-section,
.admin-page-card, .admin-form-card, .admin-detail-card,
.admin-test-panel, .admin-question-panel {
    border-color: var(--sd-border) !important;
    border-radius: var(--sd-radius) !important;
    background: var(--sd-surface) !important;
    box-shadow: var(--sd-shadow) !important;
}

.admin-card { min-height: 142px; padding: 24px; }
.admin-card::before { width: 4px; background: linear-gradient(180deg, var(--sd-sky), #71b1eb); }
.admin-card:nth-child(even)::before { background: linear-gradient(180deg, var(--sd-coral), #f3a28f); }
.admin-card-label { color: #728298; font-size: 12px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.admin-card-value { color: var(--sd-ink); font-size: 34px; }
.admin-section { padding: 28px; }

.admin-main input:not([type="checkbox"]):not([type="radio"]),
.admin-main select, .admin-main textarea {
    border-color: #ccdbe8 !important;
    border-radius: 11px !important;
    background: #fff !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
}

.admin-main input:focus, .admin-main select:focus, .admin-main textarea:focus {
    border-color: var(--sd-sky) !important;
    box-shadow: 0 0 0 4px rgba(79, 145, 216, .12) !important;
    outline: none;
}

.admin-main table { border-collapse: separate; border-spacing: 0; }
.admin-main th { background: #f6f9fc; color: #63758b !important; }
.admin-main tr:hover td { background: #f8fbfe; }

/* Student: jewel-like floating navbar */
.student-page {
    background:
        radial-gradient(circle at 8% 0%, rgba(239, 112, 87, .06), transparent 22rem),
        radial-gradient(circle at 94% 4%, rgba(79, 145, 216, .10), transparent 24rem),
        var(--sd-canvas);
}

.student-navbar {
    top: 10px;
    width: min(1200px, calc(100% - 28px));
    margin: 10px auto 0;
    border: 1px solid rgba(211, 225, 238, .92);
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 14px 36px rgba(16, 51, 89, .09);
    backdrop-filter: blur(20px) saturate(150%);
}

.student-navbar-inner { width: 100%; min-height: 70px; padding: 0 13px 0 8px; gap: 22px; }
.student-navbar-brand img { width: 85px; height: 58px; filter: drop-shadow(0 6px 11px rgba(11, 45, 92, .08)); }
.student-navbar-links { justify-content: center; gap: 6px; }

.student-navbar-links a {
    position: relative;
    min-height: 42px;
    padding: 9px 13px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #5c6e84;
}

.student-navbar-links a:hover {
    border-color: #e0eaf3;
    background: #f3f8fc;
    transform: translateY(-1px);
}

.student-navbar-links a.active {
    border-color: #d4e4f3;
    background: linear-gradient(135deg, #e4f0fb, #f2f7fc);
    color: var(--sd-ink);
    box-shadow: 0 6px 16px rgba(31, 83, 135, .08);
}

.student-navbar-links a.active::after {
    position: absolute;
    right: 14px;
    bottom: 4px;
    left: 14px;
    height: 2px;
    border-radius: 99px;
    background: var(--sd-sky);
    content: "";
}

.student-navbar-profile-link { border: 1px solid #e1eaf2; background: #f8fbfd; border-radius: 12px; }
.student-navbar-avatar { background: linear-gradient(135deg, var(--sd-ink), #28649f); box-shadow: 0 5px 12px rgba(11, 45, 92, .18); }
.student-navbar-logout { border: 1px solid #e8edf2; background: #fff; }

.student-container { width: min(1180px, calc(100% - 48px)); padding-top: 44px; }
.student-page-eyebrow, .student-test-eyebrow { color: #567ea8; letter-spacing: .12em; }
.student-page-header h1, .student-test-page-header h1 { color: var(--sd-ink); font-weight: 780; letter-spacing: -.04em; }

.student-panel, .student-stat-card, .student-next-lesson,
.student-lesson-card, .student-homework-card, .student-content-card,
.student-detail-card, .student-test-panel, .student-test-card,
.student-test-summary-card, .student-test-start-card {
    border-color: var(--sd-border) !important;
    border-radius: var(--sd-radius) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: var(--sd-shadow) !important;
}

.student-next-lesson {
    overflow: hidden;
    background:
        radial-gradient(circle at 94% 20%, rgba(255,255,255,.13), transparent 9rem),
        linear-gradient(135deg, var(--sd-ink), #1f5c96) !important;
    color: #fff;
}

.student-next-lesson h2, .student-next-lesson p, .student-next-lesson .student-next-topic { color: #fff; }
.student-stat-card { position: relative; overflow: hidden; padding: 23px; }
.student-stat-card::after { position:absolute; right:-25px; bottom:-35px; width:90px; height:90px; border-radius:50%; background:rgba(79,145,216,.09); content:""; }
.student-stat-value { color: var(--sd-ink); font-size: 32px; }
.student-panel { padding: 28px; }

.student-btn, .student-test-button {
    min-height: 43px;
    border-radius: 11px !important;
    font-weight: 700;
}

.student-btn-primary, .student-test-button-primary {
    background: linear-gradient(135deg, var(--sd-ink), #235f99) !important;
    box-shadow: 0 8px 18px rgba(11,45,92,.17);
}

.student-input, .student-textarea, .student-test-answer-input {
    border-color: #ccdae7 !important;
    border-radius: 11px !important;
}

/* Public pages */
.public-home {
    background:
        radial-gradient(circle at 87% 16%, rgba(239, 112, 87, .10), transparent 24rem),
        radial-gradient(circle at 12% 3%, rgba(79, 145, 216, .10), transparent 20rem),
        linear-gradient(180deg, #fbfdff, var(--sd-canvas));
}

.public-navbar {
    position: sticky;
    top: 12px;
    z-index: 30;
    width: min(1160px, calc(100% - 28px));
    min-height: 74px;
    margin-top: 12px;
    padding: 0 14px 0 8px;
    border: 1px solid rgba(215, 228, 240, .9);
    border-radius: 18px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 14px 38px rgba(20,55,92,.08);
    backdrop-filter: blur(18px) saturate(150%);
}

.public-logo { width: 82px; height: 68px; }
.public-button { border-radius: 11px; font-weight: 700; }
.public-button-primary { background: linear-gradient(135deg, var(--sd-ink), #245f98); }

.hero { padding: 88px 0 112px; gap: 76px; }
.hero-badge { padding: 8px 13px; border-radius: 999px; font-size: 12px; letter-spacing: .03em; text-transform: none; }
.hero h1 { color: var(--sd-ink); font-size: clamp(50px, 7vw, 78px); letter-spacing: -.055em; }
.hero-description { color: var(--sd-muted); font-size: 18px; }
.hero-logo-card {
    position: relative;
    min-height: 440px;
    overflow: hidden;
    border-radius: 32px;
    background:
        radial-gradient(circle at 75% 20%, rgba(239,112,87,.14), transparent 10rem),
        radial-gradient(circle at 20% 80%, rgba(79,145,216,.16), transparent 11rem),
        rgba(255,255,255,.88);
}
.hero-logo-card::before { position:absolute; inset:20px; border:1px solid rgba(79,145,216,.14); border-radius:24px; content:""; }
.hero-logo { position: relative; filter: drop-shadow(0 20px 28px rgba(11,45,92,.12)); }
.features-section { background: rgba(255,255,255,.78); backdrop-filter: blur(10px); }
.features-grid { gap: 20px; }
.feature-card { min-height: 190px; padding: 28px; border-radius: 18px; box-shadow: var(--sd-shadow); }
.feature-card h3 { font-size: 20px; }

/* Refined sign-in experience */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 8% 10%, rgba(79,145,216,.14), transparent 26rem), radial-gradient(circle at 95% 90%, rgba(239,112,87,.10), transparent 24rem), var(--sd-canvas); }
.login-shell { display: grid; grid-template-columns: 1.05fr .95fr; width: min(980px, 100%); min-height: 610px; overflow: hidden; border: 1px solid var(--sd-border); border-radius: 28px; background: #fff; box-shadow: 0 30px 80px rgba(11,45,92,.13); }
.login-visual { position: relative; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; padding: 54px; background: linear-gradient(145deg, #081f42, #174d80); color:#fff; }
.login-visual::before { position:absolute; inset:0; background: radial-gradient(circle at 20% 15%, rgba(106,170,229,.32), transparent 15rem), radial-gradient(circle at 90% 90%, rgba(239,112,87,.25), transparent 17rem); content:""; }
.login-visual > * { position:relative; z-index:1; }
.login-kicker { margin-bottom:18px; color:#a9d1f3; font-size:11px; font-weight:800; letter-spacing:.18em; }
.login-visual h1 { margin:0; font-size:clamp(34px,4vw,48px); line-height:1.08; letter-spacing:-.045em; }
.login-visual p { max-width:430px; margin:20px 0 0; color:#d7e5f3; font-size:16px; line-height:1.7; }
.login-orbit { position:absolute; border:1px solid rgba(255,255,255,.14); border-radius:50%; }
.login-orbit-one { top:-90px; right:-70px; width:300px; height:300px; }
.login-orbit-two { top:-28px; right:-8px; width:170px; height:170px; }
.login-card { display:flex; flex-direction:column; justify-content:center; padding:54px; }
.login-heading { margin-bottom:30px; }
.login-logo-link { display:inline-flex; margin-bottom:12px; line-height:0; }
.login-logo { display:block; width:96px; height:96px; object-fit:contain; }
.login-eyebrow { color:#4a7cad; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.login-heading h2 { margin:8px 0 7px; color:var(--sd-ink); font-size:28px; letter-spacing:-.035em; }
.login-heading p { margin:0; color:var(--sd-muted); font-size:14px; line-height:1.6; }
.login-field { margin-bottom:18px; }
.login-field label { display:block; margin-bottom:7px; color:#33475f; font-size:13px; font-weight:700; }
.login-field input { width:100%; min-height:48px; padding:12px 14px; border:1px solid #cbd9e6; border-radius:11px; color:var(--sd-text); outline:none; transition:.18s ease; }
.login-field input:focus { border-color:var(--sd-sky); box-shadow:0 0 0 4px rgba(79,145,216,.12); }
.login-submit { width:100%; min-height:48px; margin-top:3px; border:0; border-radius:11px; background:linear-gradient(135deg,var(--sd-ink),#235f99); color:#fff; font-weight:750; cursor:pointer; box-shadow:0 10px 22px rgba(11,45,92,.18); transition:.18s ease; }
.login-submit:hover { transform:translateY(-1px); box-shadow:0 14px 28px rgba(11,45,92,.22); }
.login-back { align-self:center; margin-top:22px; color:#6d7f95; font-size:13px; font-weight:650; }
.login-back:hover { color:var(--sd-ink); }

@media (max-width: 900px) {
    .admin-main { padding-top: 82px; }
    .student-navbar { top: 8px; }
    .student-navbar-inner { min-height: 64px; }
    body.student-menu-open .student-navbar-actions { top: 282px; }
    .login-shell { grid-template-columns:1fr; max-width:560px; }
    .login-visual { min-height:250px; padding:36px; }
    .login-card { padding:38px; }
}

@media (max-width: 620px) {
    .public-navbar { min-height:66px; }
    .public-logo { width:70px; height:58px; }
    .hero { padding-top:55px; }
    .hero-logo-card { min-height:320px; border-radius:24px; }
    .student-navbar { width:calc(100% - 16px); margin-top:8px; border-radius:15px; }
    .student-container { width:calc(100% - 24px); }
    .student-panel { padding:20px; }
    .login-page { padding:14px; }
    .login-shell { border-radius:22px; }
    .login-visual { min-height:220px; padding:28px; }
    .login-visual h1 { font-size:31px; }
    .login-card { padding:30px 24px; }
}

body {
    background: var(--sd-canvas);
    color: var(--sd-text);
}

::selection {
    background: #cfe0f1;
    color: var(--sd-navy);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(233, 102, 74, 0.28);
    outline-offset: 2px;
}

.alert {
    border-color: #f3cfc3;
    background: var(--sd-coral-soft);
    color: #713728;
}

/* Public landing page */
.public-home {
    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(233, 102, 74, 0.10),
            transparent 24rem
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            var(--sd-canvas) 100%
        );
}

.public-button-primary,
.application-submit,
.account-button {
    border-color: var(--sd-navy);
    background:
        linear-gradient(
            135deg,
            var(--sd-navy) 0%,
            #174d80 100%
        );
    box-shadow: 0 8px 20px rgba(11, 45, 92, 0.14);
    transition:
        transform 170ms ease,
        box-shadow 170ms ease,
        background 170ms ease;
}

.public-button-primary:hover,
.application-submit:hover,
.account-button:hover {
    background:
        linear-gradient(
            135deg,
            var(--sd-navy-hover) 0%,
            #1d5c94 100%
        );
    box-shadow: 0 11px 24px rgba(11, 45, 92, 0.19);
}

.application-submit:hover {
    transform: translateY(-1px);
}

.public-button-secondary {
    border-color: #c8d7e5;
    background: rgba(255, 255, 255, 0.86);
    color: var(--sd-navy);
}

.public-button-secondary:hover {
    border-color: #9fb7cd;
    background: var(--sd-navy-soft);
}

.hero-badge {
    border-color: #f2c9bd;
    background: var(--sd-coral-soft);
    color: var(--sd-coral-dark);
}

.hero h1,
.features-header h2,
.feature-card h3,
.application-header h1,
.account-card h1 {
    color: var(--sd-navy);
}

.hero-description,
.features-header p,
.feature-card p,
.public-footer-inner,
.application-header p,
.account-description {
    color: var(--sd-muted);
}

.hero-logo-card {
    border-color: #d6e2ed;
    box-shadow:
        0 28px 70px rgba(11, 45, 92, 0.10),
        0 8px 22px rgba(233, 102, 74, 0.05);
}

.features-section,
.public-footer {
    border-color: var(--sd-border);
    background: rgba(255, 255, 255, 0.90);
}

.feature-card {
    position: relative;
    overflow: hidden;
    border-color: var(--sd-border);
    box-shadow: 0 8px 24px rgba(11, 45, 92, 0.035);
    transition:
        transform 190ms ease,
        border-color 190ms ease,
        box-shadow 190ms ease;
}

.feature-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--sd-navy);
    content: "";
}

.feature-card:nth-child(2)::before {
    background: var(--sd-coral);
}

.feature-card:nth-child(3)::before {
    background: var(--sd-blue);
}

.feature-card:nth-child(1) {
    background:
        linear-gradient(
            180deg,
            var(--sd-navy-soft) 0%,
            #ffffff 46%
        );
}

.feature-card:nth-child(2) {
    background:
        linear-gradient(
            180deg,
            var(--sd-coral-soft) 0%,
            #ffffff 46%
        );
}

.feature-card:nth-child(3) {
    background:
        linear-gradient(
            180deg,
            var(--sd-blue-soft) 0%,
            #ffffff 46%
        );
}

.feature-card:hover {
    transform: translateY(-3px);
    border-color: #c4d5e4;
    box-shadow: 0 15px 34px rgba(11, 45, 92, 0.09);
}

.public-footer-motto {
    color: var(--sd-navy);
}

/* Application form */
.application-page {
    background:
        radial-gradient(
            circle at 12% 12%,
            rgba(11, 45, 92, 0.075),
            transparent 22rem
        ),
        radial-gradient(
            circle at 88% 88%,
            rgba(233, 102, 74, 0.075),
            transparent 22rem
        ),
        var(--sd-canvas);
}

.application-card,
.account-card {
    border: 1px solid var(--sd-border);
    background: var(--sd-surface);
    box-shadow: 0 18px 48px rgba(11, 45, 92, 0.08);
}

.application-info,
.account-notice {
    border-color: #cbdcec;
    background: var(--sd-navy-soft);
    color: #315371;
}

.application-label,
.account-label {
    color: #304257;
}

.application-input,
.application-select,
.application-textarea,
.account-input {
    border-color: #cbd7e2;
    background: #ffffff;
    color: var(--sd-text);
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.application-input:focus,
.application-select:focus,
.application-textarea:focus,
.account-input:focus {
    border-color: #4979a8;
    box-shadow: 0 0 0 3px rgba(11, 45, 92, 0.09);
}

.application-footer,
.account-help,
.account-eyebrow {
    color: #7b899a;
}

/* Account pages */
.account-page {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(11, 45, 92, 0.09),
            transparent 28rem
        ),
        var(--sd-canvas);
}

/* Student area */
.student-navbar {
    border-color: rgba(203, 217, 230, 0.9);
    background: rgba(255, 255, 255, 0.94);
}

.student-navbar-links a:hover,
.student-navbar-profile-link:hover {
    background: var(--sd-navy-soft);
    color: var(--sd-navy);
}

.student-navbar-links a.active {
    background: #e4eef8;
    color: var(--sd-navy);
}

.student-navbar-links a.active svg,
.student-navbar-links a:hover svg {
    color: #315f8d;
}

.student-navbar-avatar,
.student-profile-avatar,
.student-btn-primary {
    border-color: var(--sd-navy);
    background:
        linear-gradient(
            135deg,
            var(--sd-navy) 0%,
            #174d80 100%
        );
}

.student-btn-primary:hover {
    background: var(--sd-navy-hover);
}

.student-next-label::before {
    background: var(--sd-coral);
    box-shadow: 0 0 0 4px var(--sd-coral-soft);
}

.student-stat-card,
.student-lesson-card,
.student-homework-card,
.student-content-card {
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.student-stat-card:hover,
.student-lesson-card:hover,
.student-homework-card:hover,
.student-content-card:hover {
    border-color: #c3d5e5;
    box-shadow: 0 13px 30px rgba(11, 45, 92, 0.075);
}

.student-stat-card:nth-child(odd) .student-stat-icon,
.student-content-card:nth-child(odd) .student-content-icon {
    background: var(--sd-navy-soft);
    color: var(--sd-navy);
}

.student-stat-card:nth-child(even) .student-stat-icon,
.student-content-card:nth-child(even) .student-content-icon {
    background: var(--sd-coral-soft);
    color: var(--sd-coral-dark);
}

.student-input:focus,
.student-textarea:focus {
    border-color: #4979a8;
    box-shadow: 0 0 0 3px rgba(11, 45, 92, 0.09);
}

/* Admin area */
.admin-sidebar {
    border-color: var(--sd-border);
}

.admin-nav a:hover,
.admin-nav a:hover svg {
    color: var(--sd-navy);
}

.admin-nav a.active,
.admin-nav a.active svg {
    color: var(--sd-navy);
}

.admin-header h1,
.admin-card-value,
.admin-section h2 {
    color: var(--sd-navy);
}

.admin-card,
.admin-section {
    box-shadow: 0 10px 28px rgba(11, 45, 92, 0.045);
}

.admin-card {
    position: relative;
    overflow: hidden;
}

.admin-card::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--sd-blue);
    content: "";
}

.admin-card:nth-child(even)::before {
    background: var(--sd-coral);
}

/* Motion and interaction polish */
.public-button,
.student-btn,
.admin-nav a,
.account-button,
.application-submit {
    transition:
        color 170ms ease,
        background 170ms ease,
        border-color 170ms ease,
        box-shadow 170ms ease,
        transform 170ms ease;
}

@keyframes sd-fade-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sd-soft-arrival {
    from {
        opacity: 0;
        transform: scale(0.985);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .hero-content,
    .application-card,
    .account-card,
    .student-page-header,
    .admin-header {
        animation: sd-fade-up 480ms ease-out backwards;
    }

    .hero-logo-card {
        animation: sd-soft-arrival 560ms 80ms ease-out backwards;
    }

    .feature-card,
    .student-stat-card,
    .admin-card {
        animation: sd-fade-up 430ms ease-out backwards;
    }

    .feature-card:nth-child(2),
    .student-stat-card:nth-child(2),
    .admin-card:nth-child(2) {
        animation-delay: 70ms;
    }

    .feature-card:nth-child(3),
    .student-stat-card:nth-child(3),
    .admin-card:nth-child(3) {
        animation-delay: 140ms;
    }

    .feature-card:nth-child(4),
    .student-stat-card:nth-child(4),
    .admin-card:nth-child(4) {
        animation-delay: 210ms;
    }
}

/* Daily question — public, account-free practice */
.daily-question-section {
    padding: 28px 0 96px;
}

.daily-question-wrap {
    display: grid;
    grid-template-columns: minmax(260px, .7fr) minmax(420px, 1.3fr);
    align-items: center;
    gap: clamp(40px, 7vw, 90px);
    width: min(1120px, 92%);
    margin: 0 auto;
}

.daily-question-kicker {
    display: inline-flex;
    margin-bottom: 14px;
    color: #4f7fac;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
}

.daily-question-intro h2 {
    margin: 0;
    color: var(--sd-ink);
    font-size: clamp(34px, 4vw, 48px);
    letter-spacing: -.045em;
}

.daily-question-intro p {
    margin: 16px 0 22px;
    color: var(--sd-muted);
    font-size: 16px;
    line-height: 1.7;
}

.daily-question-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.daily-question-meta span {
    padding: 7px 10px;
    border: 1px solid #d7e4ef;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #536c85;
    font-size: 11px;
    font-weight: 750;
}

.daily-question-card {
    position: relative;
    overflow: hidden;
    padding: clamp(26px, 4vw, 42px);
    border: 1px solid #d7e4ef;
    border-radius: 26px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 24px 65px rgba(11,45,92,.10);
}

.daily-question-card::before {
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--sd-sky), var(--sd-mint), var(--sd-coral));
    content: "";
}

.daily-question-number {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    margin-bottom: 20px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--sd-ink), #296aa8);
    color: #fff;
    font-size: 23px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(11,45,92,.18);
}

.daily-question-prompt {
    margin: 0 0 24px;
    color: var(--sd-ink);
    font-size: clamp(20px, 2.4vw, 27px);
    font-weight: 730;
    line-height: 1.4;
    letter-spacing: -.025em;
}

.daily-options { display: grid; gap: 10px; }
.daily-options-two { grid-template-columns: 1fr 1fr; }
.daily-option { position: relative; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 9px 14px; border: 1px solid #d6e2ed; border-radius: 13px; background: #fbfdff; color: #334a63; font-size: 14px; font-weight: 650; cursor: pointer; transition: .18s ease; }
.daily-option:hover { border-color: #9fc3e2; background: #f1f7fc; transform: translateX(2px); }
.daily-option input { position: absolute; opacity: 0; pointer-events: none; }
.daily-option:has(input:checked) { border-color: #5d96c9; background: #eaf3fb; color: var(--sd-ink); box-shadow: 0 0 0 3px rgba(79,145,216,.10); }
.daily-option-letter { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; border-radius:9px; background:#eaf1f7; color:#47719a; font-size:12px; font-weight:850; }
.daily-option:has(input:checked) .daily-option-letter { background:var(--sd-ink); color:#fff; }
.daily-fill-label { display:block; margin-bottom:7px; color:#486078; font-size:12px; font-weight:750; }
.daily-fill-input { width:100%; min-height:52px; padding:13px 15px; border:1px solid #cbd9e6; border-radius:12px; color:var(--sd-text); outline:none; }
.daily-name-input { width:100%; min-height:46px; margin-bottom:15px; padding:11px 14px; border:1px solid #cbd9e6; border-radius:11px; color:var(--sd-text); outline:none; }
.daily-name-input:focus { border-color:var(--sd-sky); box-shadow:0 0 0 4px rgba(79,145,216,.12); }
.daily-fill-input:focus { border-color:var(--sd-sky); box-shadow:0 0 0 4px rgba(79,145,216,.12); }
.daily-question-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; }
.daily-submit { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:47px; padding:11px 17px; border:0; border-radius:12px; background:linear-gradient(135deg,var(--sd-ink),#235f99); color:#fff; font-weight:750; cursor:pointer; box-shadow:0 9px 20px rgba(11,45,92,.17); transition:.18s ease; }
.daily-submit:hover { transform:translateY(-1px); box-shadow:0 13px 25px rgba(11,45,92,.22); }
.daily-note { color:#8a99aa; font-size:11px; font-weight:650; }
.daily-feedback { display:flex; flex-direction:column; gap:4px; margin-top:18px; padding:14px 16px; border:1px solid; border-radius:12px; font-size:13px; line-height:1.55; }
.daily-feedback.is-correct { border-color:#a7ddcf; background:#edf9f5; color:#176a58; }
.daily-feedback.is-wrong { border-color:#f1c0b5; background:#fff3ef; color:#98422f; }
.daily-feedback.is-warning { border-color:#ead79d; background:#fff9e8; color:#7c641d; }
.daily-share-box { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px 20px; margin-top:18px; padding:17px; border:1px solid #cbdcec; border-radius:14px; background:linear-gradient(135deg,#edf5fc,#f8fbfe); }
.daily-share-box div { display:flex; flex-direction:column; gap:3px; }
.daily-share-box strong { color:var(--sd-ink); font-size:14px; }
.daily-share-box span { color:#647a91; font-size:12px; line-height:1.5; }
.daily-share-button { min-height:42px; padding:9px 14px; border:1px solid #b8d1e7; border-radius:10px; background:#fff; color:#174d80; font-weight:750; cursor:pointer; }
.daily-share-status { grid-column:1/-1; }

.challenge-page { min-height:100vh; padding:22px; background:radial-gradient(circle at 10% 10%,rgba(79,145,216,.14),transparent 25rem),radial-gradient(circle at 90% 90%,rgba(239,112,87,.10),transparent 23rem),var(--sd-canvas); }
.challenge-brand { display:block; width:90px; margin:0 auto 12px; }
.challenge-brand img { width:100%; }
.challenge-shell { width:min(760px,100%); margin:0 auto 60px; }
.challenge-heading { max-width:650px; margin:0 auto 28px; text-align:center; }
.challenge-heading h1 { margin:0; color:var(--sd-ink); font-size:clamp(30px,5vw,46px); line-height:1.12; letter-spacing:-.045em; }
.challenge-heading p { color:var(--sd-muted); line-height:1.65; }
.challenge-card { max-width:680px; margin:0 auto; }
.challenge-card .daily-question-meta { margin-bottom:20px; }
.challenge-submit { width:100%; margin-top:22px; }
.challenge-scoreboard { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:15px; margin-top:24px; padding:20px; border-radius:16px; background:#f4f8fc; }
.challenge-player { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; text-align:center; }
.challenge-player span { max-width:100%; overflow:hidden; color:#52677d; font-size:13px; font-weight:750; text-overflow:ellipsis; }
.challenge-player strong { padding:8px 13px; border-radius:999px; font-size:13px; }
.challenge-player strong.won { background:#daf3eb; color:#176a58; }
.challenge-player strong.lost { background:#ffe5df; color:#98422f; }
.challenge-versus { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--sd-ink); color:#fff; font-size:11px; font-weight:850; }
.challenge-home-link { display:block; margin-top:20px; color:#245f98; font-size:13px; font-weight:750; text-align:center; }
.daily-admin-panel .ui-table td { vertical-align:middle; }
.daily-admin-rate { display:inline-block; width:72px; height:7px; margin-right:8px; overflow:hidden; border-radius:99px; background:#e4edf5; vertical-align:middle; }
.daily-admin-rate i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--sd-sky),var(--sd-mint)); }

/* Quiz Arena */
.home-arena-section{width:min(1120px,92%);margin:0 auto;padding:0 0 90px}.home-arena-card{display:grid;grid-template-columns:1.4fr .8fr auto;align-items:center;gap:32px;padding:38px;border-radius:26px;background:radial-gradient(circle at 90% 10%,rgba(239,112,87,.22),transparent 16rem),linear-gradient(135deg,#081f42,#174d80);box-shadow:0 24px 60px rgba(11,45,92,.16);color:#fff}.home-arena-card h2{margin:4px 0 10px;font-size:30px;letter-spacing:-.04em}.home-arena-card p{margin:0;color:#cbdced;line-height:1.6}.home-arena-points{display:flex;flex-direction:column;gap:8px}.home-arena-points span{color:#dce9f5;font-size:13px;font-weight:700}.home-arena-card .daily-submit{background:#fff!important;color:var(--sd-ink);white-space:nowrap}
.arena-page{min-height:100vh;padding:22px;background:radial-gradient(circle at 10% 10%,rgba(79,145,216,.15),transparent 25rem),radial-gradient(circle at 90% 90%,rgba(239,112,87,.10),transparent 22rem),var(--sd-canvas)}.arena-landing{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:70px;width:min(1050px,100%);margin:20px auto 70px}.arena-copy h1{margin:0;color:var(--sd-ink);font-size:clamp(42px,6vw,68px);line-height:1.02;letter-spacing:-.055em}.arena-copy p{max-width:600px;color:var(--sd-muted);font-size:17px;line-height:1.7}.arena-rules{display:flex;flex-wrap:wrap;gap:9px}.arena-rules span{padding:9px 12px;border:1px solid #d3e1ed;border-radius:99px;background:#fff;color:#4e657c;font-size:12px;font-weight:750}.arena-actions{display:flex;flex-direction:column;gap:14px}.arena-form,.arena-join,.arena-join-card{padding:30px;border:1px solid var(--sd-border);border-radius:22px;background:#fff;box-shadow:var(--sd-shadow)}.arena-form h2,.arena-join-card h1{margin:0 0 20px;color:var(--sd-ink)}.arena-form>label,.arena-join-card label{display:flex;flex-direction:column;gap:7px;color:#40566e;font-size:12px;font-weight:750}.arena-form input,.arena-join input,.arena-join-card input,#arena-fill input{min-height:48px;padding:12px 14px;border:1px solid #cbd9e6;border-radius:11px;font:inherit}.arena-form fieldset{display:flex;gap:10px;margin:18px 0;border:0;padding:0}.arena-form legend{margin-bottom:8px;color:#40566e;font-size:12px;font-weight:750}.arena-choice input{position:absolute;opacity:0}.arena-choice span{display:block;padding:10px 15px;border:1px solid #ccdae7;border-radius:10px;cursor:pointer}.arena-choice:has(input:checked) span{border-color:var(--sd-sky);background:var(--sd-sky-soft);color:var(--sd-ink)}.arena-form small{display:block;margin-top:12px;color:#8090a2}.arena-join{padding:20px 24px}.arena-join h3{margin:0 0 10px;color:var(--sd-ink);font-size:15px}.arena-join div{display:flex;gap:8px}.arena-join input{flex:1;text-transform:uppercase}.arena-join button,#arena-fill button{padding:0 16px;border:0;border-radius:10px;background:var(--sd-ink);color:#fff;font-weight:750}.arena-join-card{width:min(480px,100%);margin:60px auto}.arena-join-card form{display:flex;flex-direction:column;gap:18px}
.arena-room{width:min(1100px,100%);margin:20px auto 60px}.arena-room>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.arena-room h1{margin:0;color:var(--sd-ink);font-size:38px;letter-spacing:.1em}.arena-status{margin-bottom:14px;color:#698097;font-size:13px;font-weight:750}.arena-grid{display:grid;grid-template-columns:1fr 280px;gap:18px}.arena-stage,.arena-grid aside{min-height:420px;padding:30px;border:1px solid var(--sd-border);border-radius:22px;background:#fff;box-shadow:var(--sd-shadow)}.arena-grid aside h3{margin:0 0 16px;color:var(--sd-ink)}.arena-grid ol{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}.arena-grid li{display:flex;justify-content:space-between;gap:10px;padding:11px;border-radius:10px;background:#f4f8fc;color:#425970;font-size:13px}.arena-grid li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.arena-grid li b{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:8px;border-radius:7px;background:#e1ecf6;color:#32628e}.arena-lobby,.arena-finish,.arena-answered{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:350px;text-align:center}.arena-lobby span{color:var(--sd-ink);font-size:30px;font-weight:800}.arena-lobby p,.arena-lobby small{color:var(--sd-muted)}.arena-stage h2{margin:28px 0;color:var(--sd-ink);font-size:26px;line-height:1.4}.arena-timer{position:relative;height:10px;border-radius:99px;background:#e7eef5}.arena-timer i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--sd-mint),var(--sd-sky),var(--sd-coral));transition:width .3s}.arena-timer strong{position:absolute;top:16px;right:0;color:var(--sd-ink);font-size:13px}.arena-options{display:grid;grid-template-columns:1fr 1fr;gap:11px}.arena-options button{display:flex;align-items:center;gap:12px;min-height:58px;padding:12px;border:1px solid #d4e1ec;border-radius:13px;background:#f9fcfe;color:#334b63;font:inherit;font-weight:700;text-align:left;cursor:pointer}.arena-options button:hover{border-color:var(--sd-sky);background:var(--sd-sky-soft)}.arena-options b{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:9px;background:#e4eef7;color:#35638e}.arena-answered{color:var(--sd-ink);font-size:24px;font-weight:800}.arena-answered small{margin-top:8px;color:var(--sd-muted);font-size:13px;font-weight:500}.arena-finish{font-size:48px}.arena-finish h2{margin:12px}.arena-finish p,.arena-finish a{font-size:15px}.arena-finish a{color:#246099;font-weight:750}#arena-fill{display:flex;gap:8px}#arena-fill input{flex:1}
@media(max-width:850px){.home-arena-card{grid-template-columns:1fr}.arena-landing{grid-template-columns:1fr;gap:35px}.arena-grid{grid-template-columns:1fr}.arena-grid aside{min-height:0}.arena-options{grid-template-columns:1fr}}@media(max-width:520px){.home-arena-card{padding:26px}.arena-page{padding:12px}.arena-stage,.arena-grid aside{padding:20px}.arena-room>header{align-items:flex-start}.arena-room h1{font-size:30px}.arena-copy h1{font-size:42px}}

/* Circular logo presentation — the brand mark is round */
.hero-logo-card {
    width: min(100%, 460px);
    aspect-ratio: 1;
    min-height: 0;
    justify-self: center;
    padding: 44px;
    border-radius: 50%;
}

.hero-logo-card::before {
    inset: 22px;
    border-radius: 50%;
}

.public-logo-link,
.student-navbar-brand a,
.login-logo-link,
.challenge-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(211, 225, 238, .9);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 20px rgba(11, 45, 92, .08);
}

.public-logo-link { width: 62px; height: 62px; }
.public-logo { width: 58px; height: 58px; }
.student-navbar-brand a { width: 56px; height: 56px; }
.student-navbar-brand img { width: 54px; height: 54px; }
.login-logo-link { width: 100px; height: 100px; }
.login-logo { width: 96px; height: 96px; }
.challenge-brand { width: 86px; height: 86px; padding: 3px; }
.challenge-brand img { width: 100%; height: 100%; object-fit: contain; }

.admin-brand a {
    width: 132px;
    height: 132px;
    flex: 0 0 132px;
    overflow: hidden;
    border: 1px solid rgba(211, 225, 238, .9);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 24px rgba(11, 45, 92, .08);
}

.admin-brand img { width: 124px; height: 124px; object-fit: contain; }

/* The PNG itself has a white square canvas; mask the bitmap, not just its card. */
.hero-logo,
.public-logo,
.student-navbar-brand img,
.admin-brand img,
.login-logo,
.challenge-brand img {
    border-radius: 50%;
    clip-path: circle(48% at 50% 50%);
}

@media (max-width: 620px) {
    .hero-logo-card { width: min(86vw, 360px); padding: 32px; }
    .public-logo-link { width: 54px; height: 54px; }
    .public-logo { width: 50px; height: 50px; }
}

@media (max-width: 820px) {
    .daily-question-wrap { grid-template-columns:1fr; gap:28px; }
    .daily-question-section { padding-bottom:70px; }
}

@media (max-width: 520px) {
    .daily-question-card { border-radius:20px; }
    .daily-options-two { grid-template-columns:1fr; }
    .daily-question-footer { align-items:stretch; flex-direction:column; }
    .daily-submit { width:100%; }
    .daily-note { text-align:center; }
}