@import url("https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&display=swap");

:root {
    --ink: #20294a;
    --muted: #69748d;
    --paper: #ffffff;
    --line: #e3e9f4;
    --bg: #f8fbff;
    --soft-yellow: #fff6d9;
    --soft-pink: #fff0f7;
    --soft-blue: #eefdff;
    --soft-green: #effff5;
    --blue: #5698ff;
    --pink: #f06bac;
    --yellow: #f8bd45;
    --green: #4fc983;
    --teal: #20bfc1;
    --purple: #7467e8;
    --coral: #ff7566;
    --shadow: 0 14px 34px rgba(32, 41, 74, 0.10);
    --shadow-hover: 0 20px 45px rgba(32, 41, 74, 0.16);
    --radius: 8px;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: auto; }
body {
    min-height: 100vh;
    margin: 0;
    font-family: "Sarabun", system-ui, sans-serif;
    color: var(--ink);
    background: linear-gradient(180deg, #fffdf8 0%, #f7fbff 48%, #fff9fc 100%);
    line-height: 1.65;
}
body.public-page {
    display: flex;
    flex-direction: column;
}
body.public-page main {
    flex: 1 0 auto;
    padding-bottom: 34px;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
img, svg { max-width: 100%; }
.container { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.icon { width: 1.12em; height: 1.12em; flex: 0 0 auto; }

.site-header,
.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(32, 41, 74, 0.06);
    backdrop-filter: blur(14px);
}

.header-inner {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.brand-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--pink), var(--purple));
    box-shadow: 0 10px 22px rgba(116, 103, 232, 0.22);
}

.brand strong { display: block; font-weight: 800; color: var(--ink); line-height: 1.2; }
.brand small { display: block; color: var(--muted); font-size: 0.82rem; line-height: 1.3; }

.main-nav { display: flex; align-items: center; gap: 8px; }
.main-nav a,
.admin-sidebar a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius);
    color: #4f5b75;
    font-weight: 800;
    transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.main-nav a:hover,
.main-nav a.is-active,
.admin-sidebar a:hover,
.admin-sidebar a.is-active {
    transform: translateY(-1px);
    background: var(--soft-yellow);
    color: var(--ink);
    box-shadow: 0 8px 18px rgba(32, 41, 74, 0.08);
}
.main-nav .teacher-link {
    color: #fff;
    background: linear-gradient(135deg, #2d3368, var(--purple));
}
.icon-button.mobile-menu-button { display: none; }

.home-hero { padding: 42px 0 20px; }
.home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) 270px 320px;
    grid-template-areas: "intro teacher preview";
    gap: 18px;
    align-items: stretch;
}
.hero-intro,
.teacher-panel,
.lesson-preview,
.home-metrics > div,
.module-card,
.flow-step,
.lesson-row,
.content-panel,
.side-panel,
.document-card,
.quiz-form,
.result-card,
.admin-card,
.admin-form,
.login-card,
.empty-state,
.notice-card,
.question-card,
.resource-item,
.quiz-link,
.result-item,
.search-box {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.hero-intro {
    grid-area: intro;
    min-height: 380px;
    padding: 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.hero-intro::before,
.hero-intro::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 7px;
    background: linear-gradient(90deg, var(--pink), var(--yellow), var(--teal), var(--purple));
}
.hero-intro::before { top: 0; }
.hero-intro::after { bottom: 0; opacity: .5; }
.eyebrow,
.section-kicker,
.pill {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--radius);
    background: var(--soft-blue);
    color: #2b4e7f;
    font-weight: 800;
    font-size: .92rem;
}
.hero-intro h1 {
    margin: 16px 0 10px;
    max-width: 680px;
    font-size: clamp(2.1rem, 4.5vw, 3.75rem);
    line-height: 1.08;
    letter-spacing: 0;
}
.hero-intro p {
    margin: 0;
    max-width: 620px;
    color: var(--muted);
    font-size: 1.08rem;
    font-weight: 600;
}
.hero-actions,
.form-actions,
.result-actions,
.quick-actions,
.submit-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 22px;
}

.button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.button.primary { color: #fff; background: linear-gradient(135deg, var(--coral), var(--pink)); }
.button.secondary { color: var(--ink); background: var(--soft-blue); border-color: #d5eef9; }
.button.light, .button.ghost { color: var(--ink); background: #fff; border-color: var(--line); }
.button.large { min-height: 46px; padding-inline: 18px; }

.teacher-panel {
    grid-area: teacher;
    padding: 14px;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 12px;
    background: linear-gradient(180deg, #fff, var(--soft-pink));
    transition: transform .18s ease, box-shadow .18s ease;
}
.teacher-panel:hover,
.lesson-preview:hover,
.module-card:hover,
.flow-step:hover,
.resource-item:hover,
.quiz-link:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}
.teacher-photo-wrap {
    min-height: 230px;
    overflow: hidden;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
}
.teacher-photo-wrap img {
    width: 100%;
    height: 100%;
    min-height: 230px;
    object-fit: cover;
    object-position: center top;
}
.teacher-panel span,
.lesson-preview span { color: var(--muted); font-weight: 800; font-size: .9rem; }
.teacher-panel strong { display: block; margin-top: 2px; font-size: 1.1rem; }
.teacher-panel small { display: block; color: var(--muted); font-weight: 700; }

.lesson-preview {
    grid-area: preview;
    overflow: hidden;
    display: grid;
    grid-template-rows: 190px minmax(0, 1fr);
}
.preview-visual {
    position: relative;
    min-height: 190px;
    overflow: hidden;
}
.preview-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 56%, rgba(23, 33, 63, .32));
    pointer-events: none;
}
.lesson-preview img { width: 100%; height: 100%; min-height: 190px; object-fit: cover; }
.preview-orbit {
    position: absolute;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    min-height: 34px;
    padding: 6px 9px;
    border-radius: var(--radius);
    color: #fff;
    text-shadow: 0 1px 10px rgba(23, 33, 63, .28);
    font-weight: 900;
    font-size: .8rem;
    box-shadow: 0 12px 26px rgba(23, 33, 63, .18);
    animation: floatBadge 3.4s ease-in-out infinite;
}
.lesson-preview .preview-orbit {
    color: #fff;
}
.orbit-code { right: 14px; bottom: 18px; background: linear-gradient(135deg, var(--purple), var(--pink)); }
.orbit-data { left: 16px; bottom: 34px; background: linear-gradient(135deg, var(--blue), var(--teal)); animation-delay: .3s; }
.orbit-safe { right: 74px; top: 18px; background: linear-gradient(135deg, var(--green), var(--teal)); animation-delay: .6s; }
.preview-content {
    padding: 16px;
    display: grid;
    gap: 10px;
    align-content: start;
}
.preview-content span { display: inline-flex; align-items: center; gap: 6px; }
.preview-content .preview-orbit {
    color: #fff;
}
.preview-content strong { display: block; margin: 0; font-size: 1.18rem; line-height: 1.25; }
.preview-content p {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
    line-height: 1.45;
}
.preview-kicker { width: fit-content; }
.preview-steps {
    display: grid;
    gap: 7px;
}
.preview-steps span {
    min-height: 34px;
    padding: 7px 9px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(79, 140, 255, .14);
    color: #43506e;
    font-weight: 900;
    box-shadow: 0 6px 16px rgba(23, 33, 63, .05);
}
.preview-steps b {
    color: var(--tech-blue);
    font-size: .78rem;
}
.mini-progress { height: 9px; overflow: hidden; background: #edf2f8; border-radius: 999px; }
.mini-progress i {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--green), var(--yellow), var(--pink));
    transform-origin: left center;
    animation: progressRun 2.8s linear infinite;
}
.preview-bottom {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}
.preview-bottom span {
    justify-content: center;
    min-height: 32px;
    padding: 6px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #eafdff, #f4f0ff);
    color: #244a86;
    font-size: .78rem;
    font-weight: 900;
    border: 1px solid rgba(79, 140, 255, .13);
}
.preview-bottom .icon { width: 1em; height: 1em; }

.home-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 20px;
}
.home-metrics > div {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 84px;
    border-style: solid;
    border-width: 2px;
}
.home-metrics span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-weight: 800; }
.home-metrics strong { font-size: 2rem; line-height: 1; }
.home-metrics div:nth-child(1) { border-color: #9dccff; }
.home-metrics div:nth-child(2) { border-color: #f8a3cf; }
.home-metrics div:nth-child(3) { border-color: #f7cf71; }
.home-metrics div:nth-child(4) { border-color: #8ee4aa; }
.home-metrics div:nth-child(1) strong { color: var(--blue); }
.home-metrics div:nth-child(2) strong { color: var(--pink); }
.home-metrics div:nth-child(3) strong { color: var(--yellow); }
.home-metrics div:nth-child(4) strong { color: var(--green); }

.page-section { padding: 42px 0; }
.section-heading,
.page-title,
.admin-title {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;
}
.section-heading h2,
.page-title h1,
.admin-title h1 {
    margin: 10px 0 0;
    color: var(--ink);
    line-height: 1.16;
}
.section-heading h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
.page-title h1, .admin-title h1 { font-size: clamp(1.65rem, 3vw, 2.35rem); }
.page-title p, .admin-title p { margin: 6px 0 0; color: var(--muted); }
.heading-copy p {
    max-width: 680px;
    margin: 8px 0 0;
    color: var(--muted);
    font-weight: 700;
}
.text-link { color: #2d5fb4; font-weight: 800; }

.learning-map-section {
    position: relative;
    isolation: isolate;
}
.learning-map-section::before {
    content: "";
    position: absolute;
    inset: 18px -18px auto;
    height: 240px;
    z-index: -1;
    border-radius: var(--radius);
    background:
        linear-gradient(90deg, rgba(86, 152, 255, .08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(32, 191, 193, .08) 1px, transparent 1px),
        linear-gradient(135deg, rgba(238, 253, 255, .9), rgba(255, 240, 247, .72));
    background-size: 32px 32px, 32px 32px, auto;
    pointer-events: none;
}
.module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.module-card {
    --card-accent: var(--blue);
    --card-accent-2: var(--teal);
    --card-soft: #f2fbff;
    min-height: 360px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid color-mix(in srgb, var(--card-accent) 24%, #dfe7f4);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .84)) padding-box,
        linear-gradient(135deg, color-mix(in srgb, var(--card-accent) 62%, white), color-mix(in srgb, var(--card-accent-2) 62%, white)) border-box;
    box-shadow: 0 16px 34px rgba(32, 41, 74, .09);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
}
.module-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--card-accent) 10%, transparent) 1px, transparent 1px),
        linear-gradient(0deg, color-mix(in srgb, var(--card-accent-2) 10%, transparent) 1px, transparent 1px),
        linear-gradient(145deg, var(--card-soft), #fff 56%);
    background-size: 34px 34px, 34px 34px, auto;
    border: 0;
    pointer-events: none;
}
.module-card::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -30px;
    width: 118px;
    height: 118px;
    z-index: -1;
    border: 22px solid color-mix(in srgb, var(--card-accent) 16%, transparent);
    transform: rotate(18deg);
    pointer-events: none;
}
.module-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--card-accent) 46%, #fff);
    box-shadow: 0 26px 54px rgba(32, 41, 74, .16);
    filter: saturate(1.04);
}
.module-circuit {
    position: absolute;
    top: 18px;
    right: 16px;
    width: 94px;
    height: 36px;
    opacity: .8;
    pointer-events: none;
}
.module-circuit::before,
.module-circuit::after,
.module-circuit i,
.module-circuit b {
    content: "";
    position: absolute;
    display: block;
    background: color-mix(in srgb, var(--card-accent) 52%, #fff);
}
.module-circuit::before {
    top: 17px;
    left: 0;
    width: 88px;
    height: 3px;
}
.module-circuit::after {
    top: 7px;
    right: 0;
    width: 11px;
    height: 11px;
    border-radius: 3px;
    box-shadow:
        -24px 10px 0 color-mix(in srgb, var(--card-accent-2) 58%, #fff),
        -48px 0 0 color-mix(in srgb, var(--yellow) 70%, #fff),
        -72px 10px 0 color-mix(in srgb, var(--pink) 58%, #fff);
}
.module-circuit i {
    top: 8px;
    left: 18px;
    width: 3px;
    height: 12px;
}
.module-circuit b {
    top: 17px;
    right: 22px;
    width: 3px;
    height: 13px;
}
.module-topline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    min-height: 36px;
}
.module-index {
    width: fit-content;
    padding: 5px 9px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .74);
    border: 1px solid color-mix(in srgb, var(--card-accent) 25%, #dfe7f4);
    color: color-mix(in srgb, var(--card-accent) 72%, var(--ink));
    font-weight: 900;
    font-size: .78rem;
    letter-spacing: .04em;
}
.module-standard {
    margin-right: 82px;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 900;
    line-height: 1.25;
    text-align: right;
}
.module-command {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--card-accent) 18%, #dfe7f4);
    background: rgba(255, 255, 255, .68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.module-command em {
    display: block;
    color: var(--muted);
    font-size: .76rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
}
.module-command strong {
    display: block;
    color: var(--ink);
    font-weight: 900;
    line-height: 1.2;
}
.module-icon,
.lesson-icon,
.unit-badge,
.doc-icon,
.result-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    color: #fff;
    background: linear-gradient(135deg, var(--card-accent), var(--card-accent-2));
    box-shadow: 0 12px 24px color-mix(in srgb, var(--card-accent) 28%, transparent);
}
.module-card small,
.lesson-body span,
.document-head span,
.quiz-head span,
.result-card > span { color: var(--muted); font-weight: 800; font-size: .86rem; }
.module-card h3 { margin: 0; color: var(--ink); font-size: 1.12rem; line-height: 1.28; }
.module-card p { margin: 0; color: var(--muted); font-weight: 700; font-size: .93rem; }
.module-meta-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
}
.module-meta-row span {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    border-radius: var(--radius);
    color: #41506f;
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(32, 41, 74, .08);
    font-size: .82rem;
    font-weight: 900;
}
.module-meta-row .icon { width: 1em; height: 1em; color: var(--card-accent); }
.module-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.module-tags i {
    padding: 4px 7px;
    border-radius: var(--radius);
    color: color-mix(in srgb, var(--card-accent) 72%, var(--ink));
    background: color-mix(in srgb, var(--card-accent) 11%, #fff);
    border: 1px solid color-mix(in srgb, var(--card-accent) 18%, #fff);
    font-style: normal;
    font-size: .75rem;
    font-weight: 900;
}
.module-signal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
}
.module-signal span {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(32, 41, 74, .08);
}
.module-signal b {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--card-accent), var(--card-accent-2));
    transform-origin: left center;
    animation: progressRun 3s linear infinite;
}
.module-signal em {
    color: var(--muted);
    font-style: normal;
    font-size: .76rem;
    font-weight: 900;
}
.card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 42px;
    padding: 9px 10px 9px 12px;
    border-radius: var(--radius);
    color: #fff;
    font-weight: 900;
    background: linear-gradient(135deg, var(--ink), color-mix(in srgb, var(--card-accent) 58%, var(--ink)));
    box-shadow: 0 14px 26px color-mix(in srgb, var(--card-accent) 18%, transparent);
}
.card-cta .icon {
    width: 1.15em;
    height: 1.15em;
}
.module-card.theme-sky { --card-accent: #4f8cff; --card-accent-2: #24c7dc; --card-soft: #eef8ff; }
.module-card.theme-rose { --card-accent: #ec62a7; --card-accent-2: #8f7cff; --card-soft: #fff2fa; }
.module-card.theme-amber { --card-accent: #f4b53f; --card-accent-2: #ff7f6e; --card-soft: #fff8df; }
.module-card.theme-mint { --card-accent: #4fc983; --card-accent-2: #28bfc7; --card-soft: #f0fff7; }
.module-card.theme-lavender { --card-accent: #8f7cff; --card-accent-2: #24c7dc; --card-soft: #f5f3ff; }
.theme-sky .lesson-icon,
.theme-sky .unit-badge { background: var(--blue); color: #fff; }
.theme-rose .lesson-icon,
.theme-rose .unit-badge { background: var(--pink); color: #fff; }
.theme-amber .lesson-icon,
.theme-amber .unit-badge { background: var(--yellow); color: #fff; }
.theme-mint .lesson-icon,
.theme-mint .unit-badge { background: var(--green); color: #fff; }
.theme-lavender .lesson-icon,
.theme-lavender .unit-badge { background: var(--purple); color: #fff; }
.theme-coral .lesson-icon,
.theme-coral .unit-badge { background: var(--coral); color: #fff; }
.theme-sky { color: var(--blue); }
.theme-rose { color: var(--pink); }
.theme-amber { color: var(--yellow); }
.theme-mint { color: var(--green); }
.theme-lavender { color: var(--purple); }
.theme-coral { color: var(--coral); }

.flow-section {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 8px 0 50px;
    isolation: isolate;
}
.flow-section::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 56px;
    height: 3px;
    z-index: -1;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), var(--pink), var(--yellow), var(--green));
    opacity: .28;
}
.flow-step {
    --flow-a: var(--blue);
    --flow-b: var(--teal);
    min-height: 210px;
    padding: 18px;
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: start;
    gap: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: color-mix(in srgb, var(--flow-a) 36%, #ffffff);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--flow-a) 7%, transparent) 1px, transparent 1px),
        linear-gradient(0deg, color-mix(in srgb, var(--flow-b) 6%, transparent) 1px, transparent 1px),
        linear-gradient(145deg, rgba(255, 255, 255, .98), color-mix(in srgb, var(--flow-a) 8%, #ffffff));
    background-size: 28px 28px, 28px 28px, auto;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.flow-step::before {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -34px;
    width: 120px;
    height: 120px;
    border-radius: 28px;
    border: 22px solid color-mix(in srgb, var(--flow-a) 11%, transparent);
    transform: rotate(18deg);
}
.flow-step::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 72px;
    height: 30px;
    opacity: .72;
    background:
        linear-gradient(90deg, var(--flow-a) 0 18px, transparent 18px 28px, var(--flow-b) 28px 46px, transparent 46px 56px, color-mix(in srgb, var(--yellow) 85%, #fff) 56px 72px);
    border-radius: 999px;
    transform: rotate(4deg);
}
.flow-step:nth-child(1) { --flow-a: var(--blue); --flow-b: var(--teal); }
.flow-step:nth-child(2) { --flow-a: var(--pink); --flow-b: var(--purple); }
.flow-step:nth-child(3) { --flow-a: var(--yellow); --flow-b: var(--coral); }
.flow-step:nth-child(4) { --flow-a: var(--green); --flow-b: var(--teal); }
.flow-number {
    width: fit-content;
    padding: 4px 9px;
    border-radius: 999px;
    color: color-mix(in srgb, var(--flow-a) 74%, var(--ink));
    background: rgba(255, 255, 255, .72);
    border: 1px solid color-mix(in srgb, var(--flow-a) 28%, #ffffff);
    font-weight: 900;
    font-size: .78rem;
    letter-spacing: .04em;
}
.flow-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    color: #fff;
    background: linear-gradient(135deg, var(--flow-a), var(--flow-b));
    box-shadow: 0 14px 26px color-mix(in srgb, var(--flow-a) 24%, transparent);
}
.flow-icon .icon {
    width: 1.24em;
    height: 1.24em;
}
.flow-step strong {
    display: block;
    margin-top: 2px;
    color: var(--ink);
    font-size: 1.12rem;
    line-height: 1.25;
}
.flow-step small {
    min-height: 52px;
    display: block;
    color: var(--muted);
    font-weight: 800;
    line-height: 1.42;
}
.flow-step em {
    width: fit-content;
    position: relative;
    z-index: 1;
    padding: 5px 9px;
    border-radius: var(--radius);
    color: color-mix(in srgb, var(--flow-a) 68%, var(--ink));
    background: color-mix(in srgb, var(--flow-a) 10%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--flow-a) 16%, #ffffff);
    font-size: .78rem;
    font-style: normal;
    font-weight: 900;
}
.flow-step i {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(32, 41, 74, .08);
}
.flow-step i::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--flow-a), var(--flow-b));
    transform-origin: left center;
    animation: progressRun 3.2s linear infinite;
}

.page-banner {
    padding: 38px 0 28px;
    background: linear-gradient(135deg, #fff, #eefbff);
    border-bottom: 1px solid var(--line);
}
.lesson-list { display: grid; gap: 12px; }
.lesson-row {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid color-mix(in srgb, currentColor 38%, #ffffff);
    background: #fff;
}
.lesson-number {
    width: 36px; height: 36px; display: grid; place-items: center;
    border-radius: var(--radius); background: #f7f9fd; font-weight: 800;
}
.lesson-body h2 { margin: 2px 0; font-size: 1.2rem; line-height: 1.25; }
.lesson-body p { margin: 0; color: var(--muted); }

.unit-hero {
    padding: 28px 0;
    background: linear-gradient(135deg, #fff, #f2fbff);
    border-bottom: 1px solid var(--line);
}
.unit-hero-inner { display: grid; gap: 16px; }
.back-link {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 13px 8px 11px;
    border-radius: var(--radius);
    color: #244a86;
    font-weight: 900;
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(234,253,255,.86));
    border: 1px solid rgba(79, 140, 255, .20);
    box-shadow: 0 12px 26px rgba(79, 140, 255, .12);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.back-link:hover {
    transform: translateY(-2px);
    border-color: rgba(24, 189, 197, .34);
    background: linear-gradient(135deg, #eafdff, #f4f0ff);
    box-shadow: var(--tech-glow);
}
.back-link .icon {
    width: 1.05em;
    height: 1.05em;
    color: var(--tech-blue);
}
.unit-hero-main { display: flex; align-items: center; gap: 14px; }
.unit-hero-main span {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: var(--radius);
    color: #244a86;
    font-weight: 900;
    background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(234,253,255,.78));
    border: 1px solid rgba(79, 140, 255, .18);
    box-shadow: 0 8px 18px rgba(23, 33, 63, .06);
}
.unit-hero-main span::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--tech-blue), var(--tech-cyan));
    box-shadow: 0 0 0 4px rgba(79, 140, 255, .10);
}
.unit-hero-main h1 { margin: 2px 0; line-height: 1.16; font-size: clamp(1.7rem, 3.5vw, 2.6rem); }
.unit-hero-main p { margin: 0; color: var(--muted); font-weight: 700; }
.unit-hero-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.unit-hero-stats span {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 10px; border-radius: var(--radius);
    background: #fff; border: 1px solid var(--line); font-weight: 800;
}

.unit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}
.content-panel,
.side-panel,
.document-card,
.quiz-form { padding: 18px; }
.content-panel h2,
.side-panel h2,
.document-card h2 {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 12px; color: var(--ink);
}
.content-panel h2:not(:first-child),
.document-card h2 { margin-top: 24px; }
.learning-content h3 {
    margin: 20px 0 8px;
    padding-left: 10px;
    border-left: 4px solid var(--yellow);
}
.learning-content p { margin: 0 0 12px; }
.content-list, .check-list, .task-list { padding-left: 1.25rem; }
.panel-note { margin: -4px 0 12px; color: var(--muted); font-weight: 700; }
.side-stack, .resource-list { display: grid; gap: 10px; }
.quiz-link, .resource-item, .result-item {
    display: flex; gap: 10px; align-items: flex-start; padding: 12px;
}
.quiz-link, .resource-item {
    border-style: solid;
    border-width: 2px;
}
.quiz-link span, .resource-item > span {
    width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: var(--radius); color: #fff; background: var(--teal);
}
.quiz-link strong, .resource-item strong, .result-item strong { display: block; line-height: 1.25; }
.quiz-link small, .resource-item small { display: block; color: var(--muted); }
.two-column-section {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 0;
}

.reading-page { max-width: 900px; }
.toolbar-line { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.document-card { margin-top: 10px; }
.document-head { display: flex; gap: 12px; margin-bottom: 18px; }
.document-head h1 { margin: 2px 0; line-height: 1.18; }
.document-head p { margin: 0; color: var(--muted); }
.download-card {
    display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
    margin: 14px 0 20px; padding: 12px;
    background: var(--soft-blue); border: 1px solid #d9eef7; border-radius: var(--radius);
}
.download-card > span {
    width: 40px; height: 40px; display: grid; place-items: center;
    color: #fff; background: var(--teal); border-radius: var(--radius);
}
.download-card strong { display: block; }
.download-card small { color: var(--muted); font-weight: 700; }
.answer-space { margin-top: 18px; padding: 12px; background: #fffdf5; border: 1px solid #eadca9; border-radius: var(--radius); }
.answer-space div { min-height: 42px; border-bottom: 1px solid #d8e0ec; }

.quiz-page { max-width: 840px; }
.quiz-form { overflow: hidden; padding: 0 0 6px; }
.quiz-head { padding: 18px 20px; color: #fff; background: linear-gradient(135deg, #5565d8, #20bfc1); }
.quiz-head span, .quiz-head h1, .quiz-head p { color: #fff; }
.quiz-head h1 { margin: 4px 0; font-size: 1.35rem; line-height: 1.2; }
.quiz-head p { margin: 0; font-weight: 700; }
.student-box { display: grid; grid-template-columns: 1fr 190px; gap: 10px; padding: 16px 18px 0; }
.question-card {
    margin: 18px;
    padding: 18px;
    position: relative;
    border-width: 2px;
    border-style: solid;
    box-shadow: 0 10px 24px rgba(32, 41, 74, .08);
}
.question-card legend {
    width: 100%;
    padding: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 800;
    line-height: 1.45;
}
.question-count {
    min-width: 58px;
    display: inline-grid;
    place-items: center;
    padding: 5px 8px;
    border-radius: 999px;
    color: #fff;
    font-size: .9rem;
    line-height: 1.2;
    box-shadow: 0 8px 18px rgba(32, 41, 74, .12);
}
.question-text {
    display: block;
    flex: 1;
    padding-top: 4px;
    color: var(--ink);
    font-size: 1.02rem;
}
.question-tone-1 { border-color: #9dccff; background: linear-gradient(180deg, #ffffff, #f4fbff); }
.question-tone-2 { border-color: #f8a3cf; background: linear-gradient(180deg, #ffffff, #fff5fb); }
.question-tone-3 { border-color: #f7cf71; background: linear-gradient(180deg, #ffffff, #fffaf0); }
.question-tone-4 { border-color: #8ee4aa; background: linear-gradient(180deg, #ffffff, #f4fff8); }
.question-tone-1 .question-count { background: linear-gradient(135deg, var(--blue), var(--teal)); }
.question-tone-2 .question-count { background: linear-gradient(135deg, var(--pink), var(--coral)); }
.question-tone-3 .question-count { background: linear-gradient(135deg, var(--yellow), #ff9867); }
.question-tone-4 .question-count { background: linear-gradient(135deg, var(--green), var(--teal)); }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.choice-option {
    min-height: 58px;
    position: relative;
    display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center;
    padding: 10px 12px; border: 1px solid #dce5f2; border-radius: var(--radius); background: #fff; cursor: pointer;
    box-shadow: 0 6px 16px rgba(32, 41, 74, .05);
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.choice-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.choice-letter {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 8px 16px rgba(32, 41, 74, .12);
    transition: transform .16s ease, box-shadow .16s ease;
}
.choice-option:nth-child(1) .choice-letter { background: linear-gradient(135deg, var(--blue), #7bc7ff); }
.choice-option:nth-child(2) .choice-letter { background: linear-gradient(135deg, var(--pink), #ff8dc8); }
.choice-option:nth-child(3) .choice-letter { background: linear-gradient(135deg, var(--yellow), #ff9f68); }
.choice-option:nth-child(4) .choice-letter { background: linear-gradient(135deg, var(--green), var(--teal)); }
.choice-text {
    color: #36405d;
    font-weight: 700;
    line-height: 1.42;
}
.choice-option:hover {
    transform: translateY(-2px);
    border-color: #9ed9ed;
    background: #f8feff;
    box-shadow: 0 12px 24px rgba(32, 41, 74, .09);
}
.choice-option:focus-within { outline: 3px solid rgba(32, 191, 193, .15); }
.choice-option:has(input:checked) { border-color: var(--teal); background: var(--soft-blue); }
.choice-option:has(input:checked) .choice-letter {
    transform: scale(1.08);
    box-shadow: 0 10px 18px rgba(32, 191, 193, .22);
}
.submit-row { justify-content: flex-end; padding: 0 18px 18px; }

.result-page { max-width: 720px; }
.result-card { padding: 28px; text-align: center; }
.result-icon { margin: 0 auto 12px; background: var(--green); }
.score-meter {
    width: min(230px, 100%); margin: 18px auto 6px; padding: 16px;
    background: var(--soft-yellow); border-radius: var(--radius);
}
.score-meter strong { font-size: 3rem; color: var(--coral); }
.percent { color: var(--teal); font-weight: 800; }

.search-box { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px; margin-bottom: 20px; }
.search-results { display: grid; gap: 10px; }
.result-item { display: block; padding: 12px; }
.result-item span { color: var(--teal); font-weight: 800; }
.result-item p { margin: 4px 0 0; color: var(--muted); }
.empty-state, .notice-card { padding: 28px; text-align: center; }
.setup-card { text-align: left; }

input, textarea, select {
    width: 100%; min-height: 40px; padding: 9px 10px;
    border: 1px solid #cfd8e8; border-radius: var(--radius); background: #fff; color: var(--ink);
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 3px solid rgba(32, 191, 193, .15); border-color: var(--teal); }
label { display: grid; gap: 6px; color: #37415b; font-weight: 800; }
pre { overflow: auto; background: #20294a; color: #eef7ff; padding: 12px; border-radius: var(--radius); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

.site-footer {
    flex-shrink: 0;
    margin-top: 0; background: #fff; border-top: 1px solid var(--line);
}
.footer-grid {
    min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.footer-grid p { margin: 3px 0 0; color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px; color: #315a9d; font-weight: 800; }

.admin-body {
    background:
        radial-gradient(circle at 10% 8%, rgba(32, 191, 193, .12), transparent 24%),
        radial-gradient(circle at 92% 16%, rgba(236, 95, 163, .10), transparent 22%),
        linear-gradient(180deg, #f9fdff 0%, #f7fbff 52%, #fffaff 100%);
}
.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(79, 140, 255, .14);
}
.admin-shell { display: grid; grid-template-columns: 250px 1fr; min-height: calc(100vh - 68px); }
.admin-sidebar {
    position: sticky; top: 68px; height: calc(100vh - 68px);
    padding: 16px; background: rgba(255, 255, 255, .86); border-right: 1px solid rgba(79, 140, 255, .14);
    display: flex; flex-direction: column; gap: 16px;
    box-shadow: 12px 0 30px rgba(32, 41, 74, .04);
}
.admin-sidebar nav { display: grid; gap: 8px; }
.sidebar-logout {
    width: 100%; min-height: 40px; display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 12px; border: 1px solid #ffd0d0; border-radius: var(--radius);
    background: #fff5f5; color: #bd3d3d; font-weight: 800; cursor: pointer;
}
.admin-page { width: min(1320px, calc(100% - 36px)); margin: 0 auto; padding: 30px 0; }
.admin-title.with-action { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.admin-dashboard { display: grid; gap: 20px; }
.admin-dashboard-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 16px;
    align-items: stretch;
    padding: 22px;
    border: 1px solid rgba(79, 140, 255, .16);
    border-radius: 24px;
    background:
        radial-gradient(circle at 92% 14%, rgba(236, 95, 163, .16), transparent 28%),
        radial-gradient(circle at 5% 10%, rgba(32, 191, 193, .18), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(240,250,255,.9));
    box-shadow: 0 24px 54px rgba(32, 41, 74, .09);
}
.admin-dashboard-hero::after {
    content: "</>";
    position: absolute;
    right: 268px;
    bottom: -26px;
    color: rgba(79, 140, 255, .08);
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
}
.admin-hero-copy {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    gap: 10px;
}
.admin-hero-copy h1 {
    margin: 0;
    color: var(--tech-navy);
    font-size: clamp(1.85rem, 3.2vw, 2.55rem);
    line-height: 1.08;
}
.admin-hero-copy p {
    max-width: 760px;
    margin: 0;
    color: #637391;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.55;
}
.admin-hero-status {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 16px;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--tech-blue), var(--tech-violet) 58%, var(--pink));
    box-shadow: 0 22px 44px rgba(79, 140, 255, .24);
}
.admin-hero-status > span,
.admin-hero-status a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-weight: 900;
}
.admin-hero-status strong {
    font-size: 3rem;
    line-height: 1;
}
.admin-hero-status small {
    color: rgba(255,255,255,.82);
    font-weight: 800;
}
.admin-hero-status a {
    justify-content: center;
    margin-top: 6px;
    padding: 9px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.16);
}
.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.dashboard-metric {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    min-height: 116px;
    padding: 16px;
    border: 1px solid rgba(79, 140, 255, .15);
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--metric-a) 18%, transparent), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,253,255,.92));
    box-shadow: 0 18px 36px rgba(32, 41, 74, .08);
}
.dashboard-metric::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -28px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 16px solid color-mix(in srgb, var(--metric-a) 14%, transparent);
}
.dashboard-metric > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--metric-a), var(--metric-b));
    box-shadow: 0 12px 24px color-mix(in srgb, var(--metric-a) 24%, transparent);
}
.dashboard-metric strong {
    display: block;
    color: var(--tech-navy);
    font-size: 2.15rem;
    line-height: 1;
}
.dashboard-metric p {
    margin: 5px 0 2px;
    color: var(--ink);
    font-weight: 900;
}
.dashboard-metric small {
    color: #637391;
    font-weight: 800;
    line-height: 1.35;
}
.metric-sky, .metric-blue { --metric-a: var(--tech-blue); --metric-b: var(--tech-cyan); }
.metric-violet { --metric-a: var(--tech-violet); --metric-b: var(--pink); }
.metric-pink { --metric-a: var(--pink); --metric-b: var(--coral); }
.metric-amber { --metric-a: var(--yellow); --metric-b: var(--coral); }
.metric-mint { --metric-a: var(--green); --metric-b: var(--teal); }
.admin-workbench,
.admin-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    gap: 18px;
    align-items: start;
}
.admin-panel {
    padding: 18px;
    border: 1px solid rgba(79, 140, 255, .16);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,253,255,.92)),
        rgba(255,255,255,.94);
    box-shadow: 0 20px 46px rgba(32, 41, 74, .08);
}
.admin-panel-head {
    display: grid;
    gap: 4px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(79, 140, 255, .12);
}
.admin-panel-head.inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.admin-panel-head span,
.admin-panel-head a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #315a9d;
    font-weight: 900;
}
.admin-panel-head h2 {
    margin: 0;
    color: var(--tech-navy);
    font-size: 1.45rem;
    line-height: 1.2;
}
.admin-panel-head a {
    padding: 8px 10px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eafdff, #f4f0ff);
    border: 1px solid rgba(79, 140, 255, .16);
    white-space: nowrap;
}
.admin-action-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.admin-action-group {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 12px;
    border: 1px solid rgba(79, 140, 255, .12);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(242,250,255,.48));
}
.admin-action-group h3 {
    margin: 0;
    color: #315a9d;
    font-size: .95rem;
    font-weight: 900;
}
.admin-action-list {
    display: grid;
    gap: 10px;
}
.dashboard-action {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    min-height: 68px;
    padding: 11px;
    border: 1px solid rgba(79, 140, 255, .16);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(242,250,255,.88));
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dashboard-action:hover {
    transform: translateY(-2px);
    border-color: rgba(79, 140, 255, .32);
    box-shadow: 0 16px 30px rgba(32, 41, 74, .10);
}
.dashboard-action > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, var(--tech-blue), var(--tech-cyan));
}
.dashboard-action.is-primary > span {
    background: linear-gradient(135deg, var(--tech-violet), var(--pink));
}
.dashboard-action strong {
    display: block;
    color: var(--tech-navy);
    line-height: 1.2;
}
.dashboard-action small {
    color: #637391;
    font-weight: 800;
}
.dashboard-action em {
    color: #8aa2c6;
    transform: rotate(180deg);
}
.admin-unit-monitor,
.submission-timeline {
    display: grid;
    gap: 10px;
}
.admin-unit-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid rgba(79, 140, 255, .16);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(247,252,255,.86));
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.admin-unit-row:hover {
    transform: translateY(-2px);
    border-color: rgba(79, 140, 255, .30);
    box-shadow: 0 14px 28px rgba(32, 41, 74, .08);
}
.admin-unit-row > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--tech-blue), var(--tech-cyan));
}
.admin-unit-row.theme-rose > span { background: linear-gradient(135deg, var(--pink), var(--tech-violet)); }
.admin-unit-row.theme-amber > span { background: linear-gradient(135deg, var(--yellow), var(--coral)); }
.admin-unit-row.theme-mint > span { background: linear-gradient(135deg, var(--green), var(--teal)); }
.admin-unit-row.theme-lavender > span { background: linear-gradient(135deg, var(--tech-violet), var(--tech-cyan)); }
.admin-unit-row strong {
    display: block;
    color: var(--tech-navy);
    line-height: 1.2;
}
.unit-stat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.unit-stat-pills small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 25px;
    padding: 3px 8px;
    border-radius: 999px;
    color: #58708f;
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
    background: #eef7ff;
    border: 1px solid rgba(79, 140, 255, .13);
}
.unit-stat-pills small b {
    color: var(--tech-navy);
}
.admin-unit-row i {
    display: block;
    overflow: hidden;
    height: 7px;
    margin-top: 9px;
    border-radius: 999px;
    background: #e9f0fb;
}
.admin-unit-row i b {
    display: block;
    width: var(--unit-bar);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--tech-cyan), var(--tech-blue), var(--pink));
}
.submission-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(79, 140, 255, .16);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(244,253,255,.86));
}
.submission-item > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--green));
}
.submission-item strong,
.submission-item p,
.submission-item small {
    display: block;
}
.submission-item strong { color: var(--tech-navy); }
.submission-item p {
    margin: 2px 0;
    color: #43506e;
    font-weight: 900;
    line-height: 1.25;
}
.submission-item small {
    color: #637391;
    font-weight: 800;
}
.empty-state.compact {
    padding: 22px;
    min-height: 110px;
    display: grid;
    place-items: center;
}
.stat-grid, .admin-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.stat-card { padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat-card strong { display: block; font-size: 2rem; line-height: 1; }
.stat-card span { color: var(--muted); font-weight: 800; }
.quick-actions { margin: 0 0 18px; }
.admin-card { padding: 18px; }
.admin-card h2 { margin-top: 0; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.data-table th, .data-table td { text-align: left; padding: 11px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table th { background: #f8fbff; font-weight: 800; }
.data-table small { display: block; color: var(--muted); }
.actions { display: flex; gap: 8px; align-items: center; }
.icon-button {
    width: 40px; height: 40px; display: inline-grid; place-items: center;
    border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); cursor: pointer;
}
.icon-button.danger { color: #bd3d3d; border-color: #ffd0d0; background: #fff8f8; }
.inline-form { display: inline; }
.status, .score-badge {
    display: inline-block; padding: 4px 8px; border-radius: var(--radius); font-weight: 800; background: #edf2f8; color: var(--muted);
}
.status.ok { background: #e9fff2; color: #168253; }
.admin-form, .login-card { display: grid; gap: 14px; padding: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.check-field { grid-template-columns: auto 1fr; align-items: center; align-content: end; }
.check-field input { width: auto; min-height: auto; }
.choice-editor { display: grid; gap: 8px; }
.choice-edit-row { grid-template-columns: auto 90px 1fr; align-items: center; }
.choice-edit-row input[type="radio"] { width: auto; min-height: auto; }
.login-page {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 68px);
    display: grid;
    place-items: center;
    padding: clamp(24px, 4vw, 48px) 16px;
    background:
        radial-gradient(circle at 12% 16%, rgba(32, 191, 193, .13), transparent 26%),
        radial-gradient(circle at 86% 18%, rgba(116, 103, 232, .13), transparent 25%),
        linear-gradient(180deg, #f9fdff 0%, #f4f8ff 55%, #fff9fd 100%);
}
.login-page::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .58;
    background:
        linear-gradient(90deg, rgba(79, 140, 255, .06) 1px, transparent 1px),
        linear-gradient(0deg, rgba(32, 191, 193, .05) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
}
.login-shell {
    position: relative;
    z-index: 1;
    width: min(1040px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    gap: 22px;
    align-items: stretch;
}
.login-intro,
.login-card-modern {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(79, 140, 255, .16);
    border-radius: 28px;
    box-shadow: 0 26px 70px rgba(23, 33, 63, .13);
}
.login-intro {
    min-height: 520px;
    display: grid;
    align-content: center;
    gap: 20px;
    padding: clamp(26px, 4vw, 42px);
    color: #fff;
    background:
        radial-gradient(circle at 90% 12%, rgba(32, 191, 193, .35), transparent 30%),
        radial-gradient(circle at 12% 86%, rgba(240, 107, 172, .22), transparent 28%),
        linear-gradient(135deg, #17213f 0%, #244a86 58%, #6158d7 100%);
}
.login-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.74), transparent 86%);
}
.login-intro::after {
    content: "</>";
    position: absolute;
    right: 26px;
    bottom: 18px;
    color: rgba(255, 255, 255, .10);
    font: 900 clamp(4rem, 9vw, 7rem) ui-monospace, SFMono-Regular, Menlo, monospace;
    line-height: 1;
}
.login-intro > * { position: relative; z-index: 1; }
.login-intro .section-kicker {
    width: fit-content;
    color: #eafdff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .18);
    box-shadow: none;
}
.login-intro h1 {
    max-width: 560px;
    margin: 0;
    font-size: clamp(2rem, 4.6vw, 3.35rem);
    line-height: 1.06;
    letter-spacing: 0;
}
.login-intro p {
    max-width: 600px;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.7;
}
.login-feature-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 4px;
}
.login-feature-list span {
    min-height: 82px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 18px;
    color: #fff;
    font-weight: 900;
    background: rgba(255, 255, 255, .10);
    backdrop-filter: blur(10px);
}
.login-feature-list .icon {
    color: #77edf2;
}
.login-home-button,
.login-back-link {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    padding: 9px 13px;
    border-radius: 14px;
    font-weight: 900;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.login-home-button {
    margin-top: 4px;
    color: #17213f;
    background: #fff;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .16);
}
.login-home-button:hover,
.login-back-link:hover {
    transform: translateY(-2px);
}
.login-card { width: min(430px, 100%); text-align: center; }
.login-card-modern {
    width: 100%;
    align-self: center;
    display: grid;
    gap: 16px;
    padding: clamp(22px, 3vw, 30px);
    text-align: left;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,253,255,.94));
}
.login-card-modern::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 7px;
    background: linear-gradient(90deg, var(--tech-cyan), var(--tech-blue), var(--tech-violet), var(--pink));
}
.login-back-link {
    color: #315a9d;
    background: linear-gradient(135deg, #eafdff, #f4f0ff);
    border: 1px solid rgba(79, 140, 255, .16);
}
.login-lock {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg, var(--tech-blue), var(--tech-violet) 58%, var(--pink));
    box-shadow: 0 18px 38px rgba(79, 140, 255, .28);
}
.login-lock .icon { width: 30px; height: 30px; }
.login-title {
    display: grid;
    gap: 5px;
}
.login-title span {
    color: #315a9d;
    font-size: .92rem;
    font-weight: 900;
}
.login-title h2 {
    margin: 0;
    color: var(--tech-navy);
    font-size: clamp(1.85rem, 3vw, 2.35rem);
    line-height: 1.1;
}
.login-title p {
    margin: 0;
    color: #637391;
    font-weight: 800;
    line-height: 1.55;
}
.login-card label { text-align: left; }
.login-card-modern label {
    gap: 8px;
    color: #273657;
}
.login-card-modern input {
    min-height: 52px;
    padding: 12px 14px;
    border-color: rgba(79, 140, 255, .24);
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.login-card-modern input::placeholder {
    color: #9aa6ba;
    font-weight: 700;
}
.login-card-modern .button {
    width: 100%;
    min-height: 54px;
    margin-top: 4px;
    border-radius: 16px;
    font-size: 1.05rem;
}
.alert.error { padding: 10px; border-radius: var(--radius); background: #ffe8e8; color: #9e2222; }
.settings-preview { display: grid; grid-template-columns: 220px 1fr; gap: 14px; }
.settings-preview img { width: 100%; height: 190px; object-fit: cover; object-position: center top; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
.form-hint { margin: 0; color: var(--muted); font-weight: 700; }

.unit-accordion-list {
    display: grid;
    gap: 16px;
}
.unit-accordion {
    overflow: hidden;
    border-radius: var(--radius);
    background: rgba(255,255,255,.96);
    border: 1px solid color-mix(in srgb, currentColor 30%, #ffffff);
    box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}
.unit-accordion:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}
.unit-accordion summary {
    list-style: none;
    cursor: pointer;
    min-height: 106px;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background:
        linear-gradient(90deg, color-mix(in srgb, currentColor 12%, transparent), transparent 58%),
        #fff;
}
.unit-accordion summary::-webkit-details-marker { display: none; }
.unit-summary-text { display: grid; gap: 2px; min-width: 0; }
.unit-summary-text small {
    color: var(--muted);
    font-weight: 800;
}
.unit-summary-text strong {
    color: var(--ink);
    font-size: 1.18rem;
    line-height: 1.25;
}
.unit-summary-text em {
    color: var(--muted);
    font-style: normal;
    font-weight: 700;
}
.accordion-cue {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--teal));
    box-shadow: 0 10px 18px rgba(86, 152, 255, .22);
    transition: transform .2s ease;
}
.theme-sky .accordion-cue { background: linear-gradient(135deg, var(--blue), var(--teal)); }
.theme-rose .accordion-cue { background: linear-gradient(135deg, var(--pink), var(--coral)); }
.theme-amber .accordion-cue { background: linear-gradient(135deg, var(--yellow), #ff9867); }
.theme-mint .accordion-cue { background: linear-gradient(135deg, var(--green), var(--teal)); }
.theme-lavender .accordion-cue { background: linear-gradient(135deg, var(--purple), var(--pink)); }
.theme-coral .accordion-cue { background: linear-gradient(135deg, var(--coral), var(--yellow)); }
.unit-accordion[open] .accordion-cue { transform: rotate(90deg); }
.unit-path-panel {
    display: grid;
    gap: 12px;
    padding: 0 18px 18px;
}
.unit-study-layout,
.topic-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}
.unit-intro-card {
    grid-column: 1 / -1;
    background: linear-gradient(180deg, #fff, #f8fdff);
}
.unit-intro-card h3 { margin-bottom: 6px; }
.study-roadmap {
    grid-column: 1 / -1;
    padding: 18px;
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, currentColor 28%, #ffffff);
    background:
        linear-gradient(135deg, color-mix(in srgb, currentColor 10%, transparent), transparent 44%),
        rgba(255,255,255,.95);
    box-shadow: var(--shadow);
}
.roadmap-list {
    display: grid;
    gap: 12px;
}
.path-step {
    min-height: 78px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 8px 22px rgba(32, 41, 74, .07);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.path-topic:hover,
.path-quiz:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, currentColor 38%, var(--line));
    box-shadow: var(--shadow);
}
.path-marker {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--teal));
    font-weight: 900;
    box-shadow: 0 10px 18px rgba(86, 152, 255, .22);
}
.path-step:nth-child(3n + 1) .path-marker { background: linear-gradient(135deg, var(--coral), var(--pink)); }
.path-step:nth-child(3n + 2) .path-marker { background: linear-gradient(135deg, var(--blue), var(--teal)); }
.path-step:nth-child(3n + 3) .path-marker { background: linear-gradient(135deg, var(--yellow), var(--green)); }
.path-step strong {
    display: block;
    color: var(--ink);
    font-size: 1.05rem;
    line-height: 1.25;
}
.path-step p {
    margin: 3px 0 0;
    color: var(--muted);
    font-weight: 700;
}
.path-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #315a9d;
    font-weight: 900;
    white-space: nowrap;
}
.path-quiz {
    background: linear-gradient(135deg, #fff7fb, #f1fdff);
}
.path-quiz.final {
    background: linear-gradient(135deg, #fff8e6, #f2fff7);
}
.path-quiz.summary {
    background: linear-gradient(135deg, #f3f0ff, #fff4fa);
}
.unit-path-actions { text-align: right; }
.topic-hero {
    background: linear-gradient(135deg, #fff, #f8fbff);
}
.topic-reader {
    padding: 20px;
}
.topic-nav {
    position: sticky;
    top: 86px;
}
.topic-mini-link {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.topic-mini-link span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--purple), var(--pink));
    font-weight: 900;
}
.topic-mini-link strong {
    line-height: 1.25;
}
.topic-mini-link:hover,
.topic-mini-link.is-active {
    transform: translateY(-2px);
    background: var(--soft-blue);
    box-shadow: 0 10px 18px rgba(32, 41, 74, .08);
}
.external-link-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.external-link-buttons.compact {
    margin-top: 8px;
}
.embedded-video-section {
    display: grid;
    gap: 16px;
    margin-top: 22px;
    width: min(100%, 620px);
    max-width: 620px;
    justify-items: stretch;
}
.embedded-video-section.compact {
    margin-top: 12px;
}
.video-embed-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(91, 140, 255, .24);
    border-radius: 18px;
    background:
        radial-gradient(circle at 8% 0%, rgba(66, 211, 200, .2), transparent 34%),
        radial-gradient(circle at 92% 12%, rgba(236, 95, 163, .15), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(245, 251, 255, .92));
    box-shadow: 0 22px 46px rgba(32, 41, 74, .11);
}
.video-embed-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(91, 140, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 140, 255, .08) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .4), transparent 72%);
}
.video-embed-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.video-embed-head > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--teal));
    box-shadow: 0 12px 22px rgba(37, 194, 216, .25);
}
.video-embed-head small {
    display: block;
    color: var(--blue-dark);
    font-weight: 900;
}
.video-embed-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.08rem;
    line-height: 1.25;
}
.video-frame {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 14px;
    background: #0f1832;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 30px rgba(32, 41, 74, .18);
    aspect-ratio: 16 / 9;
}
.video-frame video,
.video-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #0f1832;
    object-fit: contain;
}
.external-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--radius);
    color: var(--btn-text);
    background: linear-gradient(135deg, var(--btn-start), var(--btn-end));
    font-weight: 900;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--btn-start) 22%, transparent);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.external-button:hover {
    transform: translateY(-3px) scale(1.02);
    filter: saturate(1.08);
    box-shadow: 0 18px 32px color-mix(in srgb, var(--btn-start) 28%, transparent);
}
.topic-resource-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}
.resource-preview-title {
    width: 100%;
    color: var(--muted);
    font-weight: 900;
    font-size: .82rem;
}
.resource-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1.25;
}
.resource-chip .icon { width: 1em; height: 1em; }
.activity-chip {
    color: #9c3b65;
    background: #fff0f7;
}
.worksheet-chip {
    color: #247780;
    background: #eefdff;
}
.topic-resource-section {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.topic-resource-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.topic-resource-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 10px 24px rgba(32, 41, 74, .07);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.topic-resource-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}
.topic-resource-card > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    color: #fff;
}
.activity-resource {
    background: linear-gradient(135deg, #fff, #fff6fb);
}
.activity-resource > span {
    background: linear-gradient(135deg, var(--pink), var(--coral));
}
.worksheet-resource {
    background: linear-gradient(135deg, #fff, #f2feff);
}
.worksheet-resource > span {
    background: linear-gradient(135deg, var(--teal), var(--blue));
}
.topic-resource-card small {
    display: block;
    color: var(--muted);
    font-weight: 900;
}
.topic-resource-card strong {
    display: block;
    color: var(--ink);
    line-height: 1.25;
}
.topic-resource-card p {
    margin: 4px 0 0;
    color: var(--muted);
    font-weight: 700;
}
.topic-resource-card em {
    grid-column: 2;
    color: #315a9d;
    font-style: normal;
    font-weight: 900;
}
.summary-callout {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #fff6d9, #fff0f7);
    border: 1px solid #ffe1a7;
    box-shadow: var(--shadow);
}
.summary-callout > span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--yellow), var(--pink));
}
.summary-callout strong { display: block; font-size: 1.08rem; }
.summary-callout p { margin: 2px 0 0; color: var(--muted); font-weight: 700; }
.link-editor {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #f7fbff, #fff7fb);
    border: 1px solid var(--line);
}
.link-editor strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
}
.link-edit-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr 82px 82px 92px;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
}
.link-edit-row input[type="color"] {
    min-height: 42px;
    padding: 4px;
}

.unit-stat-section {
    position: relative;
    isolation: isolate;
}
.unit-stat-section::before {
    content: "";
    position: absolute;
    inset: 16px -18px auto;
    height: 260px;
    z-index: -1;
    border-radius: var(--radius);
    background:
        linear-gradient(90deg, rgba(79, 140, 255, .07) 1px, transparent 1px),
        linear-gradient(0deg, rgba(24, 189, 197, .07) 1px, transparent 1px),
        linear-gradient(135deg, rgba(234, 253, 255, .82), rgba(255, 240, 250, .60));
    background-size: 34px 34px, 34px 34px, auto;
}
.unit-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.unit-stat-card {
    --stat-a: var(--blue);
    --stat-b: var(--teal);
    min-height: 330px;
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 16px;
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--stat-a) 30%, #ffffff);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--stat-a) 6%, transparent) 1px, transparent 1px),
        linear-gradient(0deg, color-mix(in srgb, var(--stat-b) 6%, transparent) 1px, transparent 1px),
        linear-gradient(145deg, rgba(255,255,255,.98), color-mix(in srgb, var(--stat-a) 8%, #ffffff));
    background-size: 30px 30px, 30px 30px, auto;
    box-shadow: var(--shadow);
}
.unit-stat-card::after {
    content: "";
    position: absolute;
    right: -34px;
    top: -34px;
    width: 125px;
    height: 125px;
    border-radius: 38px;
    border: 24px solid color-mix(in srgb, var(--stat-a) 12%, transparent);
    transform: rotate(20deg);
}
.unit-stat-card.theme-sky { --stat-a: var(--blue); --stat-b: var(--teal); }
.unit-stat-card.theme-rose { --stat-a: var(--pink); --stat-b: var(--purple); }
.unit-stat-card.theme-amber { --stat-a: var(--yellow); --stat-b: var(--coral); }
.unit-stat-card.theme-mint { --stat-a: var(--green); --stat-b: var(--teal); }
.unit-stat-card.theme-lavender { --stat-a: var(--purple); --stat-b: var(--teal); }
.unit-stat-head {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    align-items: center;
}
.unit-stat-head > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    color: #fff;
    background: linear-gradient(135deg, var(--stat-a), var(--stat-b));
    box-shadow: 0 12px 24px color-mix(in srgb, var(--stat-a) 24%, transparent);
}
.unit-stat-head small {
    display: block;
    color: var(--muted);
    font-weight: 900;
}
.unit-stat-head strong {
    display: block;
    color: var(--ink);
    line-height: 1.25;
}
.unit-stat-main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 4px 10px;
    padding: 13px;
    border-radius: var(--radius);
    background: rgba(255,255,255,.74);
    border: 1px solid color-mix(in srgb, var(--stat-a) 18%, #ffffff);
}
.unit-stat-main span {
    color: var(--muted);
    font-weight: 900;
}
.unit-stat-main strong {
    grid-row: span 2;
    color: color-mix(in srgb, var(--stat-a) 72%, var(--ink));
    font-size: 2.25rem;
    line-height: .9;
}
.unit-stat-main small {
    color: var(--muted);
    font-weight: 900;
}
.unit-stat-bars {
    display: grid;
    gap: 10px;
}
.stat-line {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px 8px;
    align-items: center;
}
.stat-line span,
.stat-line strong {
    color: #43506e;
    font-size: .86rem;
    font-weight: 900;
}
.stat-line i {
    grid-column: 1 / -1;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(32, 41, 74, .08);
}
.stat-line b {
    display: block;
    width: var(--stat-width);
    min-width: 6px;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--stat-a), var(--stat-b));
}
.unit-stat-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding: 9px 12px;
    border-radius: var(--radius);
    color: #fff;
    background: linear-gradient(135deg, var(--tech-navy), color-mix(in srgb, var(--stat-a) 62%, var(--tech-navy)));
    font-weight: 900;
    box-shadow: 0 14px 26px color-mix(in srgb, var(--stat-a) 18%, transparent);
}

.worksheet-submit-card {
    margin-top: 22px;
    padding: 16px;
    border-radius: var(--radius);
    border: 1px solid rgba(79, 140, 255, .16);
    background:
        linear-gradient(90deg, rgba(79, 140, 255, .05) 1px, transparent 1px),
        linear-gradient(0deg, rgba(24, 189, 197, .05) 1px, transparent 1px),
        linear-gradient(135deg, #ffffff, #effcff);
    background-size: 30px 30px, 30px 30px, auto;
}
.submit-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.submit-card-head > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    color: #fff;
    background: linear-gradient(135deg, var(--tech-blue), var(--tech-cyan));
}
.submit-card-head strong { display: block; font-size: 1.08rem; }
.submit-card-head p { margin: 2px 0 0; color: var(--muted); font-weight: 700; }
.worksheet-submit-form { display: grid; gap: 12px; }
.alert.success {
    padding: 10px;
    border-radius: var(--radius);
    background: #e9fff2;
    color: #168253;
    font-weight: 900;
    margin-bottom: 12px;
}

/* Tech classroom theme refresh */
:root {
    --ink: #17213f;
    --muted: #64708d;
    --line: #d8e6f6;
    --bg: #f4fbff;
    --soft-yellow: #fff5cd;
    --soft-pink: #fff0fa;
    --soft-blue: #eafdff;
    --soft-green: #edfff5;
    --blue: #4f8cff;
    --pink: #f06bac;
    --yellow: #f8bd45;
    --green: #45c878;
    --teal: #18bdc5;
    --purple: #7467e8;
    --coral: #ff7566;
    --tech-navy: #17213f;
    --tech-cyan: #18bdc5;
    --tech-blue: #4f8cff;
    --tech-violet: #7467e8;
    --tech-glow: 0 18px 48px rgba(79, 140, 255, .16);
    --shadow: 0 16px 36px rgba(23, 33, 63, .10);
    --shadow-hover: 0 24px 56px rgba(23, 33, 63, .16);
}

body {
    background:
        radial-gradient(circle at 12% 9%, rgba(24, 189, 197, .14), transparent 25%),
        radial-gradient(circle at 88% 18%, rgba(116, 103, 232, .13), transparent 24%),
        radial-gradient(circle at 72% 82%, rgba(240, 107, 172, .10), transparent 26%),
        linear-gradient(90deg, rgba(79, 140, 255, .055) 1px, transparent 1px),
        linear-gradient(0deg, rgba(24, 189, 197, .055) 1px, transparent 1px),
        linear-gradient(180deg, #f9fdff 0%, #f3fbff 50%, #fff8fd 100%);
    background-size: auto, auto, auto, 42px 42px, 42px 42px, auto;
}

.site-header,
.admin-topbar {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .93), rgba(240, 253, 255, .92)),
        rgba(255, 255, 255, .92);
    border-bottom: 1px solid rgba(79, 140, 255, .18);
    box-shadow: 0 10px 30px rgba(23, 33, 63, .08);
}

.brand-mark {
    position: relative;
    background: linear-gradient(135deg, var(--tech-blue), var(--tech-violet) 55%, var(--tech-cyan));
    box-shadow: 0 14px 28px rgba(79, 140, 255, .24);
}
.brand-mark::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: calc(var(--radius) - 2px);
}
.brand strong { color: var(--tech-navy); }
.brand small { color: #637391; }

.main-nav a,
.admin-sidebar a {
    color: #43506e;
    background: rgba(255, 255, 255, .45);
}
.main-nav a:hover,
.main-nav a.is-active,
.admin-sidebar a:hover,
.admin-sidebar a.is-active {
    background: linear-gradient(135deg, #eafdff, #f4f0ff);
    color: var(--tech-navy);
    box-shadow: 0 10px 24px rgba(79, 140, 255, .12);
}
.main-nav a.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--tech-blue), var(--tech-violet) 62%, var(--pink));
    box-shadow: 0 14px 30px rgba(79, 140, 255, .26);
}
.main-nav .teacher-link {
    color: #43506e;
    background: rgba(255, 255, 255, .45);
    box-shadow: none;
}
.main-nav .teacher-link:hover {
    color: var(--tech-navy);
    background: linear-gradient(135deg, #eafdff, #f4f0ff);
    box-shadow: 0 10px 24px rgba(79, 140, 255, .12);
}

.hero-intro,
.teacher-panel,
.lesson-preview,
.home-metrics > div,
.flow-step,
.lesson-row,
.content-panel,
.side-panel,
.document-card,
.quiz-form,
.result-card,
.admin-card,
.admin-form,
.login-card,
.empty-state,
.notice-card,
.question-card,
.resource-item,
.quiz-link,
.result-item,
.search-box,
.unit-accordion,
.study-roadmap,
.topic-resource-card,
.summary-callout,
.link-editor {
    border-color: rgba(79, 140, 255, .16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 253, 255, .90)),
        rgba(255, 255, 255, .94);
    box-shadow: var(--shadow);
}

.hero-intro {
    background:
        linear-gradient(90deg, rgba(24, 189, 197, .10) 1px, transparent 1px),
        linear-gradient(0deg, rgba(79, 140, 255, .10) 1px, transparent 1px),
        radial-gradient(circle at 92% 18%, rgba(116, 103, 232, .18), transparent 24%),
        linear-gradient(135deg, #ffffff 0%, #effcff 58%, #fff5fb 100%);
    background-size: 34px 34px, 34px 34px, auto, auto;
}
.hero-intro::before {
    height: 8px;
    background: linear-gradient(90deg, var(--tech-blue), var(--tech-cyan), var(--green), var(--yellow), var(--pink), var(--tech-violet));
}
.hero-intro::after {
    left: auto;
    right: 24px;
    bottom: 22px;
    width: 116px;
    height: 74px;
    opacity: .58;
    border-radius: var(--radius);
    background:
        linear-gradient(90deg, transparent 0 18px, rgba(79, 140, 255, .32) 18px 21px, transparent 21px 48px, rgba(24, 189, 197, .30) 48px 51px, transparent 51px),
        linear-gradient(0deg, transparent 0 18px, rgba(116, 103, 232, .22) 18px 21px, transparent 21px 48px, rgba(79, 140, 255, .22) 48px 51px, transparent 51px);
    background-size: 58px 38px;
}
.eyebrow,
.section-kicker,
.pill {
    background: linear-gradient(135deg, #eafdff, #f4f0ff);
    color: #244a86;
    border: 1px solid rgba(79, 140, 255, .16);
    box-shadow: 0 8px 18px rgba(79, 140, 255, .08);
}
.hero-intro h1,
.section-heading h2,
.page-title h1,
.admin-title h1,
.unit-hero-main h1,
.document-head h1 {
    color: var(--tech-navy);
}
.button.primary {
    background: linear-gradient(135deg, var(--tech-blue), var(--tech-violet) 62%, var(--pink));
    box-shadow: 0 14px 28px rgba(79, 140, 255, .22);
}
.button.secondary {
    color: #173f75;
    background: linear-gradient(135deg, #eafdff, #f3f0ff);
    border-color: rgba(79, 140, 255, .22);
}
.button.light,
.button.ghost {
    background: rgba(255, 255, 255, .82);
    border-color: rgba(79, 140, 255, .18);
}

.teacher-panel {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 240, 250, .88)),
        radial-gradient(circle at 90% 12%, rgba(240, 107, 172, .16), transparent 28%);
}
.teacher-photo-wrap {
    border-color: rgba(116, 103, 232, .18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72);
}
.lesson-preview {
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,252,255,.92));
}
.preview-content {
    background:
        linear-gradient(90deg, rgba(24, 189, 197, .08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(79, 140, 255, .08) 1px, transparent 1px);
    background-size: 28px 28px;
}
.mini-progress i {
    background: linear-gradient(90deg, var(--tech-cyan), var(--tech-blue), var(--tech-violet), var(--pink));
}

.home-metrics > div {
    position: relative;
    overflow: hidden;
    border-width: 1px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(248, 253, 255, .86)),
        linear-gradient(90deg, rgba(79, 140, 255, .08), transparent);
}
.home-metrics > div::after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: -20px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 14px solid rgba(79, 140, 255, .09);
}
.home-metrics span,
.flow-step small,
.unit-summary-text small,
.panel-note,
.document-head p,
.result-item p {
    color: #637391;
}

.page-banner,
.unit-hero,
.topic-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 86% 18%, rgba(116, 103, 232, .18), transparent 24%),
        linear-gradient(90deg, rgba(79, 140, 255, .08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(24, 189, 197, .08) 1px, transparent 1px),
        linear-gradient(135deg, #ffffff, #ecfbff 70%, #fff4fb);
    background-size: auto, 38px 38px, 38px 38px, auto;
    border-bottom: 1px solid rgba(79, 140, 255, .16);
}
.page-banner::after,
.unit-hero::after {
    content: "</>";
    position: absolute;
    right: max(22px, calc((100vw - 1120px) / 2));
    top: 18px;
    color: rgba(79, 140, 255, .12);
    font: 900 clamp(3rem, 8vw, 6rem) ui-monospace, SFMono-Regular, Menlo, monospace;
    pointer-events: none;
}
.lessons-banner {
    padding: 30px 0 24px;
}
.lessons-banner .page-title {
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    margin-bottom: 0;
}
.lessons-banner .section-kicker {
    font-size: .9rem;
    padding: 8px 12px;
}
.lessons-banner .page-title h1 {
    margin: 0;
    max-width: none;
    font-size: clamp(1.3rem, 1.55vw, 1.8rem);
    line-height: 1.12;
    white-space: nowrap;
}
.lessons-banner .page-title p {
    margin: 0;
    max-width: 680px;
    font-size: clamp(.9rem, 1vw, 1rem);
    line-height: 1.58;
    font-weight: 700;
}
.unit-accordion .lesson-number {
    color: #fff;
}
.unit-hero-stats span,
.download-card,
.answer-space {
    background: rgba(255, 255, 255, .78);
    border-color: rgba(79, 140, 255, .16);
    box-shadow: 0 8px 18px rgba(23, 33, 63, .06);
}

.lesson-row,
.path-step,
.topic-mini-link,
.quiz-link,
.resource-item,
.result-item,
.choice-option,
.download-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,253,255,.94));
    border-color: rgba(79, 140, 255, .16);
}
.lesson-row:hover,
.path-topic:hover,
.path-quiz:hover,
.topic-mini-link:hover,
.resource-item:hover,
.quiz-link:hover,
.result-item:hover {
    border-color: rgba(24, 189, 197, .32);
    box-shadow: var(--tech-glow);
}
.lesson-number,
.path-marker,
.topic-mini-link span,
.quiz-link span,
.resource-item > span,
.download-card > span,
.doc-icon,
.result-icon {
    color: #fff;
    background: linear-gradient(135deg, var(--tech-blue), var(--tech-cyan));
    box-shadow: 0 12px 22px rgba(79, 140, 255, .22);
}

.unit-accordion summary,
.study-roadmap {
    background:
        linear-gradient(90deg, color-mix(in srgb, currentColor 12%, transparent), transparent 62%),
        linear-gradient(90deg, rgba(79, 140, 255, .06) 1px, transparent 1px),
        #fff;
    background-size: auto, 30px 30px, auto;
}
.unit-accordion[open] {
    border-color: color-mix(in srgb, currentColor 42%, #ffffff);
    box-shadow: var(--shadow-hover);
}
.path-quiz {
    background: linear-gradient(135deg, #fff7fb, #eafdff);
}
.path-quiz.final {
    background: linear-gradient(135deg, #fff8df, #edfff5);
}
.path-quiz.summary {
    background: linear-gradient(135deg, #f4f0ff, #fff2fa);
}

.learning-content h3 {
    border-left-color: var(--tech-cyan);
    color: #244a86;
}
.learning-content code,
pre code {
    color: inherit;
}
pre {
    background:
        linear-gradient(90deg, rgba(24, 189, 197, .10) 1px, transparent 1px),
        linear-gradient(0deg, rgba(79, 140, 255, .10) 1px, transparent 1px),
        #17213f;
    background-size: 28px 28px;
}

.quiz-head {
    background:
        linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.10) 1px, transparent 1px),
        linear-gradient(135deg, var(--tech-navy), var(--tech-blue), var(--tech-cyan));
    background-size: 30px 30px, 30px 30px, auto;
}
.question-card {
    border-width: 1px;
    background:
        linear-gradient(90deg, rgba(79, 140, 255, .05) 1px, transparent 1px),
        linear-gradient(0deg, rgba(24, 189, 197, .05) 1px, transparent 1px),
        linear-gradient(180deg, #ffffff, #f8fdff);
    background-size: 30px 30px;
}
.choice-option:has(input:checked) {
    border-color: var(--tech-cyan);
    background: linear-gradient(135deg, #eafdff, #f4f0ff);
}
.score-meter {
    background: linear-gradient(135deg, #eafdff, #fff5cd);
    border: 1px solid rgba(79, 140, 255, .15);
}

.topic-resource-card,
.summary-callout,
.link-editor {
    background:
        linear-gradient(90deg, rgba(79, 140, 255, .04) 1px, transparent 1px),
        linear-gradient(0deg, rgba(24, 189, 197, .04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,253,255,.94));
    background-size: 30px 30px;
}
.activity-resource > span {
    background: linear-gradient(135deg, var(--pink), var(--tech-violet));
}
.worksheet-resource > span {
    background: linear-gradient(135deg, var(--tech-cyan), var(--tech-blue));
}

.site-footer {
    background:
        linear-gradient(90deg, rgba(79, 140, 255, .07) 1px, transparent 1px),
        linear-gradient(0deg, rgba(24, 189, 197, .06) 1px, transparent 1px),
        linear-gradient(135deg, #ffffff, #effcff);
    background-size: 34px 34px, 34px 34px, auto;
    border-top: 1px solid rgba(79, 140, 255, .18);
}
.footer-links a,
.text-link {
    color: #2d5fb4;
}

.admin-body {
    background:
        radial-gradient(circle at 12% 10%, rgba(24, 189, 197, .12), transparent 24%),
        radial-gradient(circle at 88% 18%, rgba(236, 95, 163, .10), transparent 24%),
        linear-gradient(180deg, #f9fdff 0%, #f6fbff 52%, #fffaff 100%);
    background-size: auto;
}
.admin-sidebar {
    background:
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(241,252,255,.88));
    border-right-color: rgba(79, 140, 255, .16);
}
.data-table th {
    background: linear-gradient(135deg, #eafdff, #f4f0ff);
    color: #233b72;
}
.stat-card {
    border-color: rgba(79, 140, 255, .16);
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,253,255,.92));
}
.icon-button {
    border-color: rgba(79, 140, 255, .18);
    background: rgba(255, 255, 255, .78);
}

.login-card.login-card-modern {
    border-color: rgba(79, 140, 255, .18);
    background:
        linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,253,255,.94));
    box-shadow: 0 26px 70px rgba(23, 33, 63, .13);
}

@keyframes progressPulse {
    0%, 100% { filter: brightness(1); transform: translateX(0); }
    50% { filter: brightness(1.12); transform: translateX(5px); }
}

@keyframes progressRun {
    0% { transform: scaleX(0); filter: brightness(1); }
    78% { transform: scaleX(1); filter: brightness(1.08); }
    100% { transform: scaleX(1); filter: brightness(1.08); }
}

@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 1080px) {
    .home-hero-grid { grid-template-columns: 1fr 280px; grid-template-areas: "intro intro" "teacher preview"; }
    .module-grid, .unit-stat-grid, .dashboard-metrics { grid-template-columns: repeat(2, 1fr); }
    .flow-section, .home-metrics, .stat-grid, .admin-stats { grid-template-columns: repeat(2, 1fr); }
    .unit-layout, .unit-study-layout, .topic-layout, .two-column-section, .admin-dashboard-hero, .admin-workbench, .admin-dashboard-grid { grid-template-columns: 1fr; }
    .login-shell { width: min(760px, 100%); grid-template-columns: 1fr; }
    .login-intro { min-height: auto; }
    .admin-dashboard-hero::after { right: 18px; opacity: .55; }
    .topic-nav { position: static; }
    .link-edit-row { grid-template-columns: 1fr 1fr; }
    .admin-shell { grid-template-columns: 1fr; }
    .admin-sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .admin-sidebar nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .container, .admin-page { width: min(100% - 24px, 1120px); }
    .icon-button.mobile-menu-button { display: inline-grid; }
    .main-nav {
        display: none; position: absolute; left: 12px; right: 12px; top: 72px;
        padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-hover);
    }
    .main-nav.is-open { display: grid; }
    .main-nav a { width: 100%; }
    .login-page { padding: 18px 12px 28px; }
    .login-intro,
    .login-card-modern { border-radius: 22px; }
    .login-intro { padding: 24px; }
    .login-feature-list { grid-template-columns: 1fr; }
    .login-feature-list span { min-height: 58px; }
    .home-hero { padding-top: 24px; }
    .home-hero-grid { grid-template-columns: 1fr; grid-template-areas: "intro" "teacher" "preview"; }
    .hero-intro { min-height: auto; padding: 22px; }
    .teacher-photo-wrap, .teacher-photo-wrap img { min-height: 190px; }
    .lesson-preview { grid-template-rows: 180px auto; }
    .lesson-preview img { height: 180px; }
    .section-heading, .page-title, .admin-title, .admin-title.with-action, .footer-grid, .toolbar-line { display: grid; align-items: stretch; }
    .lessons-banner .page-title { grid-template-columns: 1fr; gap: 12px; }
    .lessons-banner .page-title h1 { font-size: 1.45rem; white-space: normal; }
    .lessons-banner .page-title p { font-size: .98rem; }
    .unit-accordion summary { grid-template-columns: 1fr auto; }
    .unit-accordion summary .lesson-icon,
    .unit-accordion summary .lesson-number { display: none; }
    .unit-summary-text strong { font-size: 1.06rem; }
    .unit-summary-text em { font-size: .94rem; }
    .unit-hero-main { align-items: flex-start; }
    .unit-hero-main h1 { font-size: 1.38rem; line-height: 1.2; }
    .document-head { display: grid; grid-template-columns: 1fr; }
    .document-head h1 { font-size: 1.38rem; line-height: 1.2; }
    .path-step, .summary-callout { grid-template-columns: auto 1fr; }
    .path-step .button, .path-go, .summary-callout .button { grid-column: 2; justify-self: start; }
    .lesson-row { grid-template-columns: auto 1fr; }
    .lesson-row .lesson-body { grid-column: 1 / -1; }
    .lesson-row .button { grid-column: 1 / -1; }
    .question-card { margin: 14px 12px; padding: 14px; }
    .question-card legend { display: grid; gap: 8px; }
    .student-box, .choice-grid, .download-card, .search-box, .form-grid, .choice-edit-row, .settings-preview, .topic-resource-grid { grid-template-columns: 1fr; }
    .admin-action-groups { grid-template-columns: 1fr; }
    .admin-dashboard-hero { padding: 18px; border-radius: 22px; }
    .admin-hero-copy h1 { font-size: 1.8rem; }
    .admin-hero-status strong { font-size: 2.35rem; }
    .link-edit-row { grid-template-columns: 1fr; }
    .admin-sidebar nav { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
    .home-metrics, .module-grid, .unit-stat-grid, .flow-section, .stat-grid, .admin-stats, .dashboard-metrics { grid-template-columns: 1fr; }
    .hero-intro h1 { font-size: 2rem; }
    .login-intro h1 { font-size: 1.85rem; }
    .login-card-modern { padding: 18px; }
    .login-home-button,
    .login-back-link { width: 100%; }
    .content-panel, .side-panel, .document-card, .admin-card, .admin-form, .result-card, .admin-panel { padding: 14px; }
    .dashboard-action { grid-template-columns: auto 1fr; }
    .dashboard-action em { display: none; }
    .admin-panel-head.inline { display: grid; }
    .admin-sidebar nav { grid-template-columns: 1fr; }
}

@media print {
    .site-header, .site-footer, .toolbar-line .print-button, .back-link { display: none !important; }
    body { background: #fff; }
    .page-section { padding: 0; }
    .document-card { box-shadow: none; border: 0; padding: 0; }
}