/* =========================================================
   SATlang — COMPLETE WEBSITE DESIGN
   File 2 of 5: styles.css
========================================================= */

/* =========================
   1. COLOR PALETTE
========================= */

:root {
    --navy: #173b63;
    --navy-dark: #102d4c;
    --navy-light: #28577f;

    --sky-blue: #7ccbeb;
    --sky-blue-dark: #4da9cd;
    --light-blue: #ddf3fc;
    --extra-light-blue: #f3fbfe;

    --lavender: #c9c7f4;
    --light-lavender: #eeedff;

    --pink: #f3b6cf;
    --light-pink: #fde7f0;

    --green: #76c9a7;
    --light-green: #eaf9f3;

    --red: #ef8c96;
    --light-red: #fff0f2;

    --yellow: #f6cf75;
    --light-yellow: #fff8dc;

    --cream: #fffdf8;
    --white: #ffffff;

    --text-dark: #193550;
    --text-medium: #627d96;
    --text-light: #8ca0b2;

    --border: #dceaf3;
    --border-light: #edf4f8;

    --shadow-small: 0 6px 18px rgba(23, 59, 99, 0.07);
    --shadow-medium: 0 12px 30px rgba(23, 59, 99, 0.11);
    --shadow-large: 0 22px 55px rgba(23, 59, 99, 0.17);

    --sidebar-width: 250px;
    --topbar-height: 72px;

    --radius-small: 12px;
    --radius-medium: 18px;
    --radius-large: 26px;
    --radius-round: 999px;
}

/* =========================================================
   SATLANG SIMPLE LOADING SCREEN — FINAL OVERRIDE
========================================================= */

#loading-screen.loading-screen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    min-height: 100vh !important;
    padding: 30px !important;
    background: #fffdf8 !important;
    text-align: center !important;
}

#loading-screen .loading-brand {
    display: block !important;
    padding: 26px 42px !important;
    background: #f4f6f7 !important;
    border: 2px solid #e1e7eb !important;
    border-radius: 28px !important;
    box-shadow: 0 10px 0 #e1e7eb, 0 25px 55px rgba(23, 59, 99, 0.12) !important;
    font-family: "Fredoka", sans-serif !important;
    font-size: clamp(4rem, 10vw, 7rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -5px !important;
    white-space: nowrap !important;
}

#loading-screen .loading-brand .brand-sat {
    color: #173b63 !important;
}

#loading-screen .loading-brand .brand-lang {
    color: #76c7e7 !important;
}

#loading-screen .loading-slogan {
    margin: 54px 0 0 !important;
    color: #173b63 !important;
    font-family: "Fredoka", sans-serif !important;
    font-size: clamp(1.2rem, 3vw, 1.6rem) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

#loading-screen .loading-message {
    margin: 14px 0 0 !important;
    color: #94a3af !important;
    font-family: "Nunito", sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
}

@media (max-width: 600px) {
    #loading-screen .loading-brand {
        padding: 21px 28px !important;
        border-radius: 22px !important;
        font-size: 4rem !important;
        letter-spacing: -3px !important;
    }

    #loading-screen .loading-slogan {
        margin-top: 40px !important;
        font-size: 1.1rem !important;
    }
}

/* =========================
   2. RESET
========================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;

    background: var(--cream);
    color: var(--text-dark);

    font-family: "Nunito", Arial, sans-serif;
    line-height: 1.5;
}

body.modal-open {
    overflow: hidden;
}

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

button {
    color: inherit;
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

a {
    color: inherit;
}

img,
iframe,
video {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3,
h4,
p {
    overflow-wrap: break-word;
}

h1,
h2,
h3,
.brand,
.mobile-brand {
    font-family: "Fredoka", "Nunito", sans-serif;
}

.hidden {
    display: none !important;
}

/* =========================
   3. ACCESSIBILITY
========================= */

.skip-link {
    position: fixed;
    top: -80px;
    left: 20px;
    z-index: 5000;

    padding: 12px 18px;
    border-radius: var(--radius-small);

    background: var(--navy);
    color: var(--white);

    font-weight: 900;
    text-decoration: none;
}

.skip-link:focus {
    top: 20px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(124, 203, 235, 0.65);
    outline-offset: 3px;
}

/* =========================
   4. MAIN LAYOUT
========================= */

.app-layout {
    display: flex;
    min-height: 100vh;
}

.main-area {
    width: calc(100% - var(--sidebar-width));
    min-height: 100vh;
    margin-left: var(--sidebar-width);
}

.main-content {
    width: 100%;
    max-width: 1280px;
    min-height: calc(100vh - var(--topbar-height));

    margin: 0 auto;
    padding: 40px clamp(22px, 4vw, 58px) 80px;
}

/* =========================
   5. SIDEBAR
========================= */

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;

    display: flex;
    flex-direction: column;

    width: var(--sidebar-width);
    padding: 26px 18px;

    overflow-y: auto;

    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(124, 203, 235, 0.14),
            transparent 30%
        ),
        var(--navy);

    color: var(--white);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;

    width: fit-content;
    padding: 0;

    border: 0;
    background: transparent;

    color: var(--white);
    font-size: 24px;
    font-weight: 700;
}

.brand-logo {
    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;

    border-radius: 15px;

    background: linear-gradient(
        145deg,
        var(--sky-blue),
        var(--pink)
    );

    box-shadow: 0 6px 0 var(--navy-dark);

    color: var(--navy);
    font-weight: 700;
}

.brand-name span,
.mobile-brand span {
    color: #f7e8c5;
}

.main-navigation {
    display: flex;
    flex-direction: column;
    gap: 7px;

    margin-top: 44px;
}

.nav-button {
    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;
    padding: 12px 13px;

    border: 0;
    border-radius: 14px;

    background: transparent;
    color: #c7d9e8;

    font-size: 14px;
    font-weight: 800;
    text-align: left;

    transition:
        background 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.nav-button:hover {
    background: rgba(255, 255, 255, 0.09);
    color: var(--white);
    transform: translateX(2px);
}

.nav-button.active {
    background: rgba(255, 255, 255, 0.13);
    box-shadow: inset 3px 0 var(--sky-blue);

    color: var(--white);
}

.nav-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;

    width: 23px;

    font-size: 18px;
}

.navigation-counter {
    display: grid;
    place-items: center;

    min-width: 23px;
    height: 23px;
    margin-left: auto;
    padding: 0 6px;

    border-radius: var(--radius-round);

    background: var(--pink);
    color: var(--navy);

    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.sidebar-progress {
    margin-top: auto;
    padding: 15px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 17px;

    background: rgba(255, 255, 255, 0.07);
}

.sidebar-progress-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 10px;

    font-size: 12px;
}

.sidebar-progress small {
    display: block;
    margin-top: 8px;

    color: #b9ccdd;
    font-size: 11px;
}

/* =========================
   6. PROGRESS BARS
========================= */

.progress-track {
    width: 100%;
    height: 9px;

    overflow: hidden;

    border-radius: var(--radius-round);
    background: rgba(124, 203, 235, 0.2);
}

.progress-fill {
    display: block;

    width: 0;
    height: 100%;

    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--sky-blue),
        var(--lavender)
    );

    transition: width 400ms ease;
}

.card .progress-track {
    background: var(--light-blue);
}

/* =========================
   7. TOP BAR
========================= */

.topbar {
    position: sticky;
    top: 0;
    z-index: 800;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    min-height: var(--topbar-height);
    padding: 10px clamp(22px, 4vw, 58px);

    border-bottom: 1px solid var(--border);

    background: rgba(255, 253, 248, 0.91);
    backdrop-filter: blur(12px);
}

.mobile-menu-button,
.mobile-brand {
    display: none;
}

.language-switcher {
    display: flex;
    align-items: center;
    gap: 5px;
}

.language-icon {
    margin-right: 4px;
    color: var(--text-medium);
}

.language-button {
    padding: 8px 11px;

    border: 0;
    border-radius: 11px;

    background: transparent;
    color: var(--text-medium);

    font-size: 13px;
    font-weight: 900;

    transition:
        background 180ms ease,
        color 180ms ease;
}

.language-button:hover {
    background: var(--extra-light-blue);
    color: var(--navy);
}

.language-button.active {
    background: var(--light-blue);
    color: var(--navy);
}

.language-coming-soon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px dashed #c9dce7;
    color: #7890a5;
}

.language-soon-badge {
    padding: 2px 6px;
    border-radius: 999px;
    background: #eef7fb;
    color: #59839b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

@media (max-width: 1180px) and (min-width: 721px) {
    .language-button {
        padding: 8px;
        font-size: 12px;
    }

    .language-soon-badge {
        display: none;
    }
}

.student-avatar {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;
    margin-left: 18px;

    border: 3px solid var(--white);
    border-radius: 50%;

    background: var(--pink);
    box-shadow: 0 0 0 1px var(--border);

    color: var(--navy);
    font-family: "Fredoka", sans-serif;
    font-weight: 700;
}

/* =========================
   8. GENERAL COMPONENTS
========================= */

.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-large);

    background: var(--white);
    box-shadow: var(--shadow-small);
}

.primary-button,
.secondary-button,
.text-button,
.danger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 44px;
    padding: 11px 17px;

    border-radius: 14px;

    font-weight: 900;
    text-decoration: none;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.primary-button {
    border: 0;

    background: var(--navy);
    box-shadow: 0 5px 0 var(--navy-dark);

    color: var(--white);
}

.primary-button:hover {
    background: var(--navy-light);
}

.primary-button:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 var(--navy-dark);
}

.secondary-button {
    border: 1px solid var(--border);

    background: var(--white);
    color: var(--navy);
}

.secondary-button:hover {
    border-color: var(--sky-blue);
    background: var(--extra-light-blue);
}

.text-button {
    min-height: auto;
    padding: 5px;

    border: 0;
    background: transparent;
    color: var(--sky-blue-dark);
}

.danger-button {
    border: 1px solid #f3b4ba;

    background: var(--light-red);
    color: #b5505b;
}

.page-heading {
    margin-bottom: 28px;
}

.eyebrow {
    display: block;

    margin-bottom: 7px;

    color: #5792ad;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.page-heading h1 {
    margin: 0;

    color: var(--navy);
    font-size: clamp(32px, 4vw, 43px);
    line-height: 1.1;
    letter-spacing: -1px;
}

.page-heading p {
    max-width: 670px;
    margin: 10px 0 0;

    color: var(--text-medium);
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    margin: 38px 0 17px;
}

.section-heading h2 {
    margin: 3px 0 0;
    color: var(--navy);
    font-size: 24px;
}

.section-heading p {
    margin: 5px 0 0;
    color: var(--text-medium);
}

.empty-state {
    padding: 60px 25px;
    text-align: center;
}

.empty-state-icon {
    display: grid;
    place-items: center;

    width: 65px;
    height: 65px;
    margin: 0 auto 15px;

    border-radius: 50%;

    background: var(--light-green);
    color: #3d9b77;

    font-size: 30px;
    font-weight: 900;
}

.empty-state h2 {
    color: var(--navy);
}

.empty-state p {
    max-width: 520px;
    margin-right: auto;
    margin-left: auto;

    color: var(--text-medium);
}

/* =========================
   9. HOME HERO
========================= */

.home-hero {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    min-height: 320px;
    padding: clamp(28px, 5vw, 48px);

    overflow: hidden;

    border-radius: 32px;

    background:
        radial-gradient(
            circle at 76% 18%,
            rgba(255, 255, 255, 0.75),
            transparent 15%
        ),
        linear-gradient(
            125deg,
            var(--light-blue),
            #edf8fd 55%,
            #dedcfb
        );
}

.home-hero::before,
.home-hero::after {
    position: absolute;
    color: rgba(255, 255, 255, 0.9);
    content: "✦";
}

.home-hero::before {
    top: 25px;
    right: 31%;
    font-size: 47px;
}

.home-hero::after {
    right: 19%;
    bottom: 25px;
    font-size: 25px;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 12px;

    border-radius: var(--radius-round);

    background: var(--white);
    color: #587e98;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.home-hero h1 {
    max-width: 610px;
    margin: 18px 0 9px;

    color: var(--navy);
    font-size: clamp(36px, 5vw, 53px);
    line-height: 1.05;
    letter-spacing: -1.7px;
}

.home-hero p {
    max-width: 590px;
    margin: 0 0 22px;

    color: var(--text-medium);
    font-size: 17px;
}

.progress-circle {
    --progress: 0deg;

    position: relative;
    z-index: 2;

    display: grid;
    place-items: center;
    flex-shrink: 0;

    width: 185px;
    height: 185px;
    margin-right: 3%;

    border-radius: 50%;

    background: conic-gradient(
        var(--sky-blue) var(--progress),
        rgba(255, 255, 255, 0.63) 0
    );

    box-shadow: 0 18px 40px rgba(23, 59, 99, 0.14);
}

.progress-circle::before {
    position: absolute;
    inset: 16px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.93);

    content: "";
}

.progress-circle-content {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.progress-circle strong {
    color: var(--navy);
    font-size: 39px;
}

.progress-circle span {
    color: var(--text-medium);
    font-size: 12px;
    font-weight: 800;
}

/* =========================
   10. STAT CARDS
========================= */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;

    margin-top: 20px;
}

.stat-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 14px;

    padding: 20px;
}

.stat-card-icon {
    display: grid;
    place-items: center;
    grid-row: 1 / 3;

    width: 48px;
    height: 48px;

    border-radius: 15px;

    font-size: 22px;
}

.stat-card.blue .stat-card-icon {
    background: var(--light-blue);
}

.stat-card.pink .stat-card-icon {
    background: var(--light-pink);
}

.stat-card.lavender .stat-card-icon {
    background: var(--light-lavender);
}

.stat-card.green .stat-card-icon {
    background: var(--light-green);
}

.stat-card strong {
    font-size: 24px;
}

.stat-card span {
    color: var(--text-medium);
    font-size: 13px;
}

/* =========================
   11. DOMAIN CARDS
========================= */

.domain-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.domain-card {
    padding: 20px;

    border: 1px solid var(--border);
    border-radius: 21px;

    background: var(--white);
    box-shadow: var(--shadow-small);

    text-align: left;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.domain-card:hover {
    border-color: var(--sky-blue);
    box-shadow: var(--shadow-medium);
    transform: translateY(-4px);
}

.domain-card-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;
    margin-bottom: 14px;

    border-radius: 14px;

    color: var(--white);
    font-size: 19px;
    font-style: normal;
    font-weight: 900;
}

.domain-card small {
    color: var(--text-medium);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.domain-card h3 {
    min-height: 42px;
    margin: 5px 0;

    color: var(--navy);
    font-size: 16px;
    line-height: 1.3;
}

.domain-card p {
    margin: 0 0 14px;

    color: var(--text-medium);
    font-size: 12px;
}

/* =========================
   12. DASHBOARD
========================= */

.dashboard-summary {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
}

.dashboard-main-progress {
    display: flex;
    align-items: center;
    gap: 25px;

    padding: 27px;
}

.dashboard-ring {
    --progress: 0deg;

    position: relative;

    display: grid;
    place-items: center;
    flex-shrink: 0;

    width: 135px;
    height: 135px;

    border-radius: 50%;

    background: conic-gradient(
        var(--sky-blue) var(--progress),
        var(--light-blue) 0
    );
}

.dashboard-ring::before {
    position: absolute;
    inset: 14px;

    border-radius: 50%;
    background: var(--white);

    content: "";
}

.dashboard-ring-content {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.dashboard-ring strong {
    font-size: 28px;
}

.dashboard-ring span {
    color: var(--text-medium);
    font-size: 11px;
}

.dashboard-progress-information {
    flex: 1;
}

.dashboard-progress-information h2 {
    margin: 0;
    color: var(--navy);
}

.dashboard-progress-information p {
    color: var(--text-medium);
}

.dashboard-small-card {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 25px;
}

.dashboard-small-card-icon {
    font-size: 25px;
}

.dashboard-small-card strong {
    margin-top: 14px;
    font-size: 34px;
}

.dashboard-small-card span {
    color: var(--text-medium);
    font-size: 13px;
}

.domain-progress-card {
    margin-top: 17px;
    padding: 26px;
}

.domain-progress-card h2 {
    margin-top: 0;
    color: var(--navy);
}

.domain-progress-item {
    margin-top: 18px;
}

.domain-progress-label {
    display: flex;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 7px;

    font-size: 13px;
    font-weight: 800;
}

.domain-progress-label span:last-child {
    color: var(--text-medium);
}

/* =========================
   13. STUDY PLANS
========================= */

.study-plan-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 13px;
}

.study-plan-option {
    display: flex;
    flex-direction: column;
    gap: 6px;

    padding: 20px;

    border: 1px solid var(--border);
    border-radius: 19px;

    background: var(--white);
    color: var(--text-dark);

    text-align: left;

    transition:
        border-color 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}

.study-plan-option:hover {
    border-color: var(--sky-blue);
    transform: translateY(-2px);
}

.study-plan-option.selected {
    border: 2px solid var(--sky-blue);
    background: var(--light-blue);
}

.study-plan-icon {
    font-size: 22px;
}

.study-plan-option strong {
    color: var(--navy);
    font-size: 16px;
}

.study-plan-option small {
    color: var(--text-medium);
}

.sat-date-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    margin-top: 18px;
    padding: 24px 27px;
}

.sat-date-card h2 {
    margin: 0;
    color: var(--navy);
}

.sat-date-card p {
    margin: 5px 0 0;
    color: var(--text-medium);
}

.sat-date-input,
.setting-input,
.setting-select {
    min-height: 44px;
    padding: 10px 13px;

    border: 1px solid var(--border);
    border-radius: 13px;

    background: var(--cream);
    color: var(--navy);

    font-weight: 800;
}

.study-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;

    margin-top: 18px;
}

.study-setting-card {
    padding: 23px;
}

.study-setting-card label {
    display: block;
    margin-bottom: 8px;

    color: var(--navy);
    font-weight: 900;
}

.study-setting-card p {
    margin: 0 0 13px;
    color: var(--text-medium);
    font-size: 13px;
}

.study-setting-card select,
.study-setting-card input {
    width: 100%;
}

.weekly-calendar {
    margin-top: 18px;
    padding: 25px;
}

.weekly-calendar h2 {
    margin-top: 0;
    color: var(--navy);
}

.calendar-day {
    display: grid;
    grid-template-columns: 75px 1fr auto;
    gap: 15px;

    padding: 14px 7px;

    border-top: 1px solid var(--border-light);
}

.calendar-day-name {
    font-weight: 900;
}

.calendar-day-task {
    color: var(--text-dark);
}

.calendar-day-time {
    color: var(--text-medium);
    font-size: 13px;
}

.calendar-day.rest-day {
    margin: 0 -8px;
    padding-right: 15px;
    padding-left: 15px;

    border-radius: 12px;
    background: #f7fafc;

    color: var(--text-light);
}

/* =========================
   14. FILTER BUTTONS
========================= */

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 20px;
}

.filter-button {
    min-height: 37px;
    padding: 8px 14px;

    border: 1px solid var(--border);
    border-radius: var(--radius-round);

    background: var(--white);
    color: var(--text-medium);

    font-size: 12px;
    font-weight: 900;
}

.filter-button:hover {
    border-color: var(--sky-blue);
    color: var(--navy);
}

.filter-button.selected {
    border-color: var(--navy);
    background: var(--navy);
    color: var(--white);
}

/* =========================
   15. LESSON LIBRARY
========================= */

.lesson-domain-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.lesson-domain-grid.single-domain-view {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 1120px;
}

.domain-detail-back {
    margin: 0 0 18px;
}

.lesson-library-domain-grid .domain-card {
    min-height: 220px;
}

.desmos-guide {
    margin: 22px 0 28px;
    padding: clamp(20px, 3vw, 30px);
    border: 2px solid var(--border);
    border-radius: 26px;
    background: linear-gradient(145deg, #f7fbff 0%, #fffdf8 70%);
    box-shadow: 0 8px 24px rgba(23, 59, 99, 0.08);
}

.desmos-guide-heading {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
}

.desmos-guide-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: var(--navy);
    color: var(--white);
    box-shadow: 0 5px 0 var(--navy-dark);
    font: 800 18px "Nunito", sans-serif;
}

.desmos-guide-heading small {
    color: var(--navy-light);
    font-weight: 900;
    letter-spacing: 0.13em;
}

.desmos-guide-heading h2 {
    margin: 3px 0 7px;
    color: var(--navy);
    font: 700 clamp(25px, 4vw, 36px) "Fredoka", sans-serif;
}

.desmos-guide-heading p {
    max-width: 850px;
    margin: 0;
    color: var(--text-medium);
    line-height: 1.55;
}

.desmos-video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.desmos-video-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--white);
}

.desmos-video-card .video-frame {
    display: block;
    border-radius: 0;
}

.desmos-video-copy {
    padding: 15px 16px 17px;
}

.desmos-video-copy h3 {
    margin: 0 0 5px;
    color: var(--navy);
    font-size: 16px;
    line-height: 1.35;
}

.desmos-video-copy p {
    margin: 0 0 11px;
    color: var(--text-medium);
    font-size: 13px;
    font-weight: 800;
}

.desmos-video-copy a {
    color: var(--navy-light);
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
}

.desmos-video-copy a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 900px) {
    .desmos-video-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .desmos-guide-heading {
        display: block;
    }

    .desmos-guide-icon {
        margin-bottom: 16px;
    }
}

.lesson-domain {
    overflow: hidden;
}

.lesson-domain-heading {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 20px;

    border-bottom: 1px solid var(--border);
}

.lesson-domain-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;

    width: 42px;
    height: 42px;

    border-radius: 14px;

    color: var(--white);
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
}

.lesson-domain-title {
    flex: 1;
}

.lesson-domain-title small {
    color: var(--text-medium);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.lesson-domain-title h2 {
    margin: 3px 0 0;

    color: var(--navy);
    font-size: 18px;
}

.lesson-domain-count {
    color: var(--text-medium);
    font-size: 12px;
    font-weight: 800;
}

.topic-group-heading {
    margin: 0;
    padding: 18px 16px 9px;
    border-bottom: 1px solid var(--border-light);
    background: #f7fbfd;
    color: var(--navy);
    font-size: 0.96rem;
    font-weight: 800;
}

.topic-row {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 13px 16px;

    border-bottom: 1px solid var(--border-light);

    transition: background 160ms ease;
}

.topic-row:last-child {
    border-bottom: 0;
}

.topic-row:hover {
    background: var(--extra-light-blue);
}

.topic-row.completed {
    background: var(--light-green);
}

.topic-checkbox {
    position: relative;
    flex-shrink: 0;

    width: 21px;
    height: 21px;

    border: 2px solid #a9becd;
    border-radius: 7px;

    appearance: none;
    background: var(--white);
}

.topic-checkbox:checked {
    border-color: var(--green);
    background: var(--green);
}

.topic-checkbox:checked::after {
    position: absolute;
    top: -2px;
    left: 3px;

    color: var(--white);
    content: "✓";

    font-size: 15px;
    font-weight: 900;
}

.topic-information {
    display: flex;
    flex: 1;
    flex-direction: column;

    cursor: pointer;
}

.topic-information strong {
    font-size: 13px;
}

.topic-information small {
    margin-top: 3px;

    color: var(--text-medium);
    font-size: 10px;
}

.topic-row.completed .topic-information strong {
    color: #688477;
    text-decoration: line-through;
}

.open-topic-button {
    display: grid;
    place-items: center;
    flex-shrink: 0;

    width: 34px;
    height: 34px;

    border: 0;
    border-radius: 10px;

    background: transparent;
    color: var(--text-light);

    font-size: 24px;
}

.open-topic-button:hover {
    background: var(--light-blue);
    color: var(--navy);
}

/* =========================
   16. LESSON MODAL CONTENT
========================= */

.lesson-label {
    display: inline-flex;

    padding: 6px 11px;

    border-radius: var(--radius-round);

    background: var(--light-blue);
    color: #3e86a5;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.lesson-modal-header h2 {
    margin: 13px 0 5px;

    color: var(--navy);
    font-size: clamp(27px, 5vw, 38px);
}

.lesson-domain-name {
    color: var(--text-medium);
}

.lesson-content-section {
    margin-top: 25px;
}

.lesson-content-section h3 {
    margin-bottom: 8px;
    color: var(--navy);
}

.lesson-content-section p,
.lesson-content-section li {
    color: var(--text-medium);
}

.lesson-example {
    padding: 20px;

    border-left: 5px solid var(--sky-blue);
    border-radius: 0 16px 16px 0;

    background: var(--extra-light-blue);
}

.lesson-media-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;

    margin-top: 25px;
}

.lesson-media-card {
    padding: 21px;
}

.lesson-media-icon {
    display: grid;
    place-items: center;

    width: 47px;
    height: 47px;

    border-radius: 15px;

    background: var(--light-blue);

    font-size: 23px;
}

.lesson-media-card h3 {
    color: var(--navy);
}

.lesson-media-card p {
    min-height: 42px;

    color: var(--text-medium);
    font-size: 13px;
}

.video-frame {
    width: 100%;
    aspect-ratio: 16 / 9;

    border: 0;
    border-radius: 17px;

    background: var(--navy);
}

.media-placeholder {
    display: grid;
    place-items: center;

    min-height: 170px;
    padding: 24px;

    border: 2px dashed var(--border);
    border-radius: 17px;

    background: var(--extra-light-blue);
    color: var(--text-medium);

    text-align: center;
}

.lesson-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 26px;
}

/* =========================
   17. PRACTICE
========================= */

.practice-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 20px;
}

.practice-toolbar .filter-row {
    margin-bottom: 0;
}

.question-card {
    width: 100%;
    max-width: 850px;
    padding: clamp(22px, 4vw, 34px);
}

.question-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    color: var(--text-medium);
    font-size: 12px;
}

.question-domain-label {
    padding: 6px 10px;

    border-radius: var(--radius-round);

    background: var(--light-blue);
    color: #478ba8;

    font-weight: 900;
}

.question-card h2 {
    margin: 25px 0;

    color: var(--navy);
    font-size: clamp(19px, 3vw, 23px);
    line-height: 1.5;
}

.answer-list {
    display: grid;
    gap: 11px;
}

.answer-option {
    display: flex;
    align-items: center;
    gap: 13px;

    width: 100%;
    padding: 14px;

    border: 1px solid var(--border);
    border-radius: 15px;

    background: var(--white);
    color: var(--text-dark);

    text-align: left;

    transition:
        border-color 150ms ease,
        background 150ms ease;
}

.answer-option:hover:not(:disabled) {
    border-color: var(--sky-blue);
    background: var(--extra-light-blue);
}

.answer-letter {
    display: grid;
    place-items: center;
    flex-shrink: 0;

    width: 31px;
    height: 31px;

    border-radius: 9px;

    background: #edf5fa;

    font-weight: 900;
}

.answer-option.selected {
    border: 2px solid var(--sky-blue);
    background: var(--extra-light-blue);
}

.answer-option.correct {
    border: 2px solid var(--green);
    background: var(--light-green);
}

.answer-option.incorrect {
    border: 2px solid var(--red);
    background: var(--light-red);
}

.answer-result-icon {
    margin-left: auto;
    font-size: 20px;
}

.question-action-row {
    display: flex;
    gap: 10px;

    margin-top: 20px;
}

.answer-feedback {
    margin-top: 20px;
    padding: 20px;

    border-radius: 17px;
}

.answer-feedback.correct {
    background: var(--light-green);
}

.answer-feedback.incorrect {
    background: var(--light-red);
}

.answer-feedback h3 {
    margin-top: 0;
}

.answer-feedback p {
    color: var(--text-medium);
    font-size: 13px;
    line-height: 1.7;
}

/* =========================
   18. RANDOM TEST
========================= */

.test-progress-information {
    display: flex;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 10px;

    color: var(--text-medium);
    font-size: 13px;
    font-weight: 800;
}

.test-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin: 20px 0;
}

.test-question-number {
    display: grid;
    place-items: center;

    width: 35px;
    height: 35px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--white);

    font-size: 12px;
    font-weight: 900;
}

.test-question-number.current {
    border-color: var(--navy);
    background: var(--navy);
    color: var(--white);
}

.test-question-number.answered {
    border-color: var(--sky-blue);
    background: var(--light-blue);
}

.desmos-launch-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 48px;
    margin-left: auto;
    padding: 0 20px;

    border: 2px solid #2f9e78;
    border-radius: 14px;

    background: #edfff8;
    color: #126647;

    font-weight: 850;
    text-decoration: none;
}

.desmos-launch-button:hover,
.desmos-launch-button:focus-visible {
    background: #d9f8ec;
    box-shadow: 0 5px 0 #b9e8d7;
    transform: translateY(-1px);
}

.desmos-launch-button span {
    font-size: 22px;
    line-height: 1;
}

@media (max-width: 640px) {
    .desmos-launch-button {
        width: 100%;
        margin-left: 0;
    }
}

.test-results-score {
    padding: 28px;

    border-radius: 22px;

    background: linear-gradient(
        125deg,
        var(--light-blue),
        var(--light-lavender)
    );

    text-align: center;
}

.test-results-score strong {
    display: block;

    color: var(--navy);
    font-size: 48px;
}

.test-results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;

    margin-top: 18px;
}

/* =========================
   19. MISTAKE REVIEW
========================= */

.mistake-list {
    display: grid;
    gap: 15px;
}

.mistake-card {
    padding: 24px;
}

.mistake-card-label {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #bd5e69;

    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.mistake-card h3 {
    margin: 14px 0;
    color: var(--navy);
}

.mistake-card p {
    color: var(--text-medium);
    font-size: 13px;
    line-height: 1.7;
}

.mistake-answer-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;

    margin: 17px 0;
}

.mistake-answer-box {
    padding: 15px;

    border-radius: 14px;
}

.mistake-answer-box.student-answer {
    background: var(--light-red);
}

.mistake-answer-box.correct-answer {
    background: var(--light-green);
}

.mistake-answer-box small {
    display: block;
    margin-bottom: 4px;

    font-weight: 900;
}

.mistake-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 18px;
}

/* =========================
   20. RESOURCES
========================= */

.resource-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.resource-card {
    padding: 24px;
}

.resource-card-icon {
    display: grid;
    place-items: center;

    width: 50px;
    height: 50px;

    border-radius: 16px;

    background: var(--light-blue);

    font-size: 25px;
}

.resource-card:nth-child(2) .resource-card-icon {
    background: var(--light-pink);
}

.resource-card:nth-child(3) .resource-card-icon {
    background: var(--light-lavender);
}

.resource-card h2 {
    color: var(--navy);
}

.resource-card p {
    min-height: 43px;
    color: var(--text-medium);
    font-size: 13px;
}

.formula-list {
    margin-top: 18px;
    padding: 25px;
}

.formula-list h2 {
    margin-top: 0;
    color: var(--navy);
}

.formula-row {
    display: flex;
    justify-content: space-between;
    gap: 25px;

    padding: 14px 0;

    border-top: 1px solid var(--border-light);
}

.formula-row span {
    color: var(--text-medium);
}

.formula-row strong {
    color: var(--navy);
    text-align: right;
}

/* =========================
   21. DAILY VOCABULARY
========================= */

.vocabulary-card {
    margin-top: 28px;
    overflow: hidden;
}

.vocabulary-heading {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 22px;
}

.vocabulary-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;

    width: 50px;
    height: 50px;

    border-radius: 16px;

    background: var(--light-pink);

    font-size: 24px;
}

.vocabulary-title {
    flex: 1;
}

.vocabulary-title h2 {
    margin: 3px 0 0;
    color: var(--navy);
}

.vocabulary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    border-top: 1px solid var(--border);
}

.vocabulary-word {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 14px 18px;

    border-bottom: 1px solid var(--border-light);
}

.vocabulary-word:nth-child(odd) {
    border-right: 1px solid var(--border-light);
}

.vocabulary-number {
    display: grid;
    place-items: center;
    flex-shrink: 0;

    width: 27px;
    height: 27px;

    border-radius: 9px;

    background: var(--light-blue);

    font-size: 11px;
    font-weight: 900;
}

.vocabulary-information {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.vocabulary-information strong {
    color: var(--navy);
}

.vocabulary-information span {
    color: var(--text-medium);
    font-size: 12px;
}

.vocabulary-example {
    margin-top: 4px;
    color: var(--text-light) !important;
    font-style: italic;
}

/* =========================
   22. MODALS
========================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;

    display: grid;
    place-items: center;

    padding: 20px;

    background: rgba(10, 32, 53, 0.61);
    backdrop-filter: blur(5px);
}

.modal-card {
    position: relative;

    width: min(920px, 100%);
    max-height: calc(100vh - 40px);
    padding: clamp(23px, 4vw, 38px);

    overflow-y: auto;

    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 28px;

    background: var(--cream);
    box-shadow: var(--shadow-large);
}

.modal-close-button {
    position: sticky;
    top: 0;
    z-index: 5;
    float: right;

    display: grid;
    place-items: center;

    width: 39px;
    height: 39px;

    border: 0;
    border-radius: 50%;

    background: var(--white);
    box-shadow: var(--shadow-small);

    color: var(--navy);
    font-size: 26px;
    line-height: 1;
}

.modal-close-button:hover {
    background: var(--light-red);
    color: #ad4f59;
}

/* =========================
   23. TOAST MESSAGES
========================= */

.toast-container {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 5000;

    display: flex;
    flex-direction: column;
    gap: 9px;
}

.toast {
    max-width: 330px;
    padding: 13px 16px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--white);
    box-shadow: var(--shadow-medium);

    color: var(--navy);
    font-size: 13px;
    font-weight: 800;

    animation: toast-in 250ms ease both;
}

.toast.success {
    border-color: #a4dbc5;
    background: var(--light-green);
}

.toast.error {
    border-color: #efb1b8;
    background: var(--light-red);
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

/* =========================
   24. LOADING AND NOSCRIPT
========================= */

.loading-screen {
    display: grid;
    place-items: center;

    min-height: 65vh;

    text-align: center;
}

.loading-logo {
    display: grid;
    place-items: center;

    width: 75px;
    height: 75px;

    border-radius: 24px;

    background: linear-gradient(
        145deg,
        var(--sky-blue),
        var(--pink)
    );

    box-shadow: 0 8px 0 var(--navy-dark);

    color: var(--navy);
    font-family: "Fredoka", sans-serif;
    font-size: 34px;
    font-weight: 700;

    animation: loading-float 1.3s ease-in-out infinite alternate;
}

.loading-screen h1 {
    margin-bottom: 0;
    color: var(--navy);
}

.loading-screen p {
    margin-top: -10px;
    color: var(--text-medium);
}

@keyframes loading-float {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-8px);
    }
}

.noscript-message {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: grid;
    place-content: center;

    padding: 30px;

    background: var(--cream);
    color: var(--navy);

    text-align: center;
}

/* =========================
   25. MOBILE SIDEBAR OVERLAY
========================= */

.sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;

    border: 0;
    background: rgba(10, 32, 53, 0.5);
}

/* =========================
   26. TABLET
========================= */

@media (max-width: 1050px) {
    :root {
        --sidebar-width: 82px;
    }

    .sidebar {
        align-items: center;
        padding-right: 13px;
        padding-left: 13px;
    }

    .brand-name,
    .nav-button span:not(.nav-icon):not(.navigation-counter),
    .sidebar-progress {
        display: none;
    }

    .brand {
        justify-content: center;
    }

    .brand-logo {
        margin: 0;
    }

    .nav-button {
        justify-content: center;
        padding: 12px 8px;
    }

    .navigation-counter {
        position: absolute;
        margin: -26px 0 0 24px;
    }

    .domain-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-summary {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-main-progress {
        grid-column: 1 / -1;
    }

    .study-plan-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =========================
   27. PHONE
========================= */

@media (max-width: 720px) {
    :root {
        --topbar-height: 64px;
    }

    .sidebar {
        width: min(285px, 84vw);
        padding: 24px 18px;

        align-items: stretch;

        transform: translateX(-105%);
        transition: transform 220ms ease;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .brand-name,
    .nav-button span:not(.nav-icon):not(.navigation-counter),
    .sidebar-progress {
        display: initial;
    }

    .sidebar-progress {
        display: block;
    }

    .nav-button {
        justify-content: flex-start;
        padding: 12px 13px;
    }

    .navigation-counter {
        position: static;
        margin: 0 0 0 auto;
    }

    .main-area {
        width: 100%;
        margin-left: 0;
    }

    .topbar {
        justify-content: space-between;
        padding: 9px 15px;
    }

    .mobile-menu-button {
        display: grid;
        place-items: center;

        width: 39px;
        height: 39px;

        border: 0;
        border-radius: 12px;

        background: var(--light-blue);
        color: var(--navy);

        font-size: 20px;
        font-weight: 900;
    }

    .mobile-brand {
        display: block;

        padding: 0;

        border: 0;
        background: transparent;

        color: var(--navy);

        font-size: 18px;
        font-weight: 700;
    }

    .language-icon,
    .student-avatar {
        display: none;
    }

    .language-switcher {
        gap: 2px;
    }

    .language-button {
        width: 35px;
        padding: 7px;

        overflow: hidden;

        font-size: 0;
        white-space: nowrap;
    }

    .language-button::first-letter {
        font-size: 18px;
    }

    .language-soon-badge {
        display: none;
    }

    .main-content {
        padding: 25px 15px 55px;
    }

    .home-hero {
        align-items: flex-start;

        min-height: 375px;
        padding: 29px;
    }

    .home-hero h1 {
        font-size: 36px;
    }

    .home-hero p {
        max-width: 100%;
        font-size: 15px;
    }

    .progress-circle {
        position: absolute;
        right: 20px;
        bottom: 18px;

        width: 112px;
        height: 112px;
        margin: 0;
    }

    .progress-circle::before {
        inset: 10px;
    }

    .progress-circle strong {
        font-size: 25px;
    }

    .progress-circle span {
        display: none;
    }

    .stat-grid,
    .dashboard-summary,
    .resource-grid {
        grid-template-columns: 1fr;
    }

    .domain-grid {
        display: flex;

        padding-bottom: 9px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .domain-card {
        flex: 0 0 225px;
        scroll-snap-align: start;
    }

    .dashboard-main-progress {
        flex-direction: column;
        align-items: flex-start;
    }

    .study-plan-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sat-date-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .study-settings-grid,
    .lesson-domain-grid,
    .lesson-media-grid,
    .vocabulary-grid,
    .mistake-answer-comparison,
    .test-results-grid {
        grid-template-columns: 1fr;
    }

    .vocabulary-word:nth-child(odd) {
        border-right: 0;
    }

    .calendar-day {
        grid-template-columns: 52px 1fr;
    }

    .calendar-day-time {
        grid-column: 2;
    }

    .practice-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .formula-row {
        flex-direction: column;
        gap: 4px;
    }

    .formula-row strong {
        text-align: left;
    }

    .modal-overlay {
        align-items: end;
        padding: 0;
    }

    .modal-card {
        width: 100%;
        max-height: 92vh;

        border-radius: 27px 27px 0 0;
    }

    .toast-container {
        right: 12px;
        bottom: 12px;
        left: 12px;
    }

    .toast {
        max-width: none;
    }
}

/* =========================
   28. VERY SMALL PHONES
========================= */

@media (max-width: 410px) {
    .study-plan-grid {
        grid-template-columns: 1fr;
    }

    .home-hero {
        padding: 24px;
    }

    .question-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .lesson-actions,
    .mistake-actions,
    .question-action-row {
        flex-direction: column;
    }

    .lesson-actions button,
    .lesson-actions a,
    .mistake-actions button,
    .question-action-row button {
        width: 100%;
    }
}

/* =========================
   29. REDUCED MOTION
========================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* =========================================================
   FINAL SATlang ICON AND DESIGN CORRECTIONS
========================================================= */

/* Remove default button appearance from lesson-topic titles */

.topic-information {
    display: flex;
    flex: 1;
    flex-direction: column;

    min-width: 0;
    padding: 0;

    border: 0;
    background: transparent;
    color: var(--text-dark);

    font-family: "Nunito", sans-serif;
    text-align: left;
}

.topic-information:hover {
    color: var(--navy);
}

/* Consistent Lucide outline icons */

.nav-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;

    width: 34px;
    height: 34px;

    border-radius: 11px;

    color: #9bdcf3;

    transition:
        color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

.nav-icon svg {
    display: block;

    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-button:hover .nav-icon {
    background: rgba(124, 203, 235, 0.12);
    color: #dff5fd;
    transform: scale(1.04);
}

.nav-button.active .nav-icon {
    background: rgba(124, 203, 235, 0.2);
    color: #ffffff;

    box-shadow:
        inset 0 0 0 1px rgba(155, 220, 243, 0.16),
        0 4px 12px rgba(7, 32, 55, 0.15);
}

/* Mobile menu icon */

.mobile-menu-button svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
}

/* Language icon */

.language-icon {
    display: grid;
    place-items: center;
}

.language-icon svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Modal close icons */

.modal-close-button svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
}

.modal-close-button {
    float: right;

    width: 40px;
    height: 40px;
}

/* Cute rounded typography */

.brand,
.mobile-brand,
.home-hero h1,
.page-heading h1,
.section-heading h2,
.domain-card h3,
.lesson-domain-title h2,
.lesson-modal-header h2,
.card h2,
.card h3 {
    font-family: "Fredoka", "Nunito", sans-serif;
}

/* Consistent pastel card design */

.card,
.domain-card,
.lesson-domain,
.question-card,
.resource-card,
.mistake-card {
    border-color: var(--border);
    border-radius: 22px;
}

/* Cute navy gradient buttons */

.primary-button {
    background: linear-gradient(
        135deg,
        var(--navy),
        var(--navy-light)
    );
}

/* Blue and lavender progress bars */

.progress-fill {
    background: linear-gradient(
        90deg,
        var(--sky-blue),
        var(--lavender)
    );
}

/* Softer hover effect */

.card,
.domain-card,
.topic-row,
.answer-option,
.study-plan-option {
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease,
        background 180ms ease;
}

/* Preserve sidebar layout on tablets */

@media (max-width: 1050px) and (min-width: 721px) {
    .nav-icon {
        width: 40px;
        height: 40px;
    }

    .nav-button {
        padding: 8px;
    }
}

/* Mobile navigation */

@media (max-width: 720px) {
    .nav-icon {
        width: 35px;
        height: 35px;
    }

    .nav-button {
        gap: 11px;
    }
}
/* =========================================================
   CREAM SATlang LOGO
========================================================= */

.brand-logo {
    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;

    border: 2px solid #fff2d8;
    border-radius: 15px;

    /* One solid creamy color—no multicolor gradient */
    background: #f3dfb9;

    box-shadow:
        0 6px 0 var(--navy-dark),
        0 10px 18px rgba(10, 38, 65, 0.2);

    color: var(--navy);

    font-family: "Fredoka", sans-serif;
    font-weight: 700;
}
/* =========================================================
   PROFILE AVATAR COLOR PALETTE
========================================================= */

.avatar-picker-wrapper {
    position: relative;
    margin-left: 18px;
}

.avatar-picker-wrapper .student-avatar {
    margin-left: 0;

    border: 3px solid var(--white);
    background: var(
        --selected-avatar-color,
        var(--pink)
    );

    color: var(
        --selected-avatar-text,
        var(--navy)
    );

    transition:
        transform 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.avatar-picker-wrapper .student-avatar:hover {
    transform: translateY(-2px) scale(1.04);

    box-shadow:
        0 0 0 1px var(--border),
        0 7px 16px rgba(
            23,
            59,
            99,
            0.16
        );
}

.avatar-color-palette {
    position: absolute;
    top: calc(100% + 13px);
    right: 0;
    z-index: 2000;

    width: 220px;
    padding: 16px;

    border: 1px solid var(--border);
    border-radius: 18px;

    background: var(--cream);
    box-shadow: var(--shadow-large);
}

.avatar-color-palette::before {
    position: absolute;
    top: -7px;
    right: 14px;

    width: 14px;
    height: 14px;

    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);

    background: var(--cream);

    content: "";
    transform: rotate(45deg);
}

.avatar-palette-title {
    display: block;

    margin-bottom: 12px;

    color: var(--navy);
    font-family: "Fredoka", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.avatar-color-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.avatar-color-option {
    width: 36px;
    height: 36px;

    border: 3px solid var(--white);
    border-radius: 50%;

    box-shadow:
        0 0 0 1px var(--border),
        0 4px 8px rgba(
            23,
            59,
            99,
            0.1
        );

    transition:
        transform 160ms ease,
        box-shadow 160ms ease;
}

.avatar-color-option:hover {
    transform: scale(1.12);
}

.avatar-color-option.selected {
    box-shadow:
        0 0 0 3px var(--navy),
        0 5px 10px rgba(
            23,
            59,
            99,
            0.18
        );
}

@media (max-width: 720px) {
    .avatar-picker-wrapper {
        display: none;
    }
}
/* =========================================================
   REAL SAT STUDY CALENDAR
========================================================= */

.real-calendar-card {
    margin-top: 20px;
    padding: clamp(20px, 4vw, 30px);
}

.real-calendar-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    margin-bottom: 25px;
}

.real-calendar-heading h2 {
    margin: 4px 0 6px;

    color: var(--navy);
    font-size: 27px;
}

.real-calendar-heading p {
    max-width: 650px;
    margin: 0;

    color: var(--text-medium);
}

.calendar-countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    min-width: 145px;
    min-height: 105px;
    padding: 15px;

    border-radius: 22px;

    background: linear-gradient(
        145deg,
        var(--navy),
        var(--navy-light)
    );

    color: var(--white);
    text-align: center;

    box-shadow:
        0 7px 0 var(--navy-dark),
        0 12px 25px rgba(
            23,
            59,
            99,
            0.15
        );
}

.calendar-countdown strong {
    font-family: "Fredoka", sans-serif;
    font-size: 38px;
    line-height: 1;
}

.calendar-countdown span {
    margin-top: 7px;
    font-size: 12px;
    font-weight: 900;
}

.calendar-countdown.no-date {
    max-width: 230px;

    background: var(--light-blue);
    box-shadow: none;

    color: var(--navy);
}

.calendar-countdown.no-date svg {
    width: 27px;
    margin-bottom: 5px;
}

.calendar-month-toolbar {
    display: grid;
    grid-template-columns: 43px 1fr 43px;
    align-items: center;
    gap: 15px;

    margin-bottom: 17px;
}

.calendar-month-toolbar h3 {
    margin: 0;

    color: var(--navy);

    font-family: "Fredoka", sans-serif;
    font-size: 24px;
    text-align: center;
    text-transform: capitalize;
}

.calendar-navigation-button {
    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;

    border: 1px solid var(--border);
    border-radius: 13px;

    background: var(--white);
    color: var(--navy);

    transition:
        background 160ms ease,
        transform 160ms ease;
}

.calendar-navigation-button:hover {
    background: var(--light-blue);
    transform: scale(1.05);
}

.calendar-navigation-button svg {
    width: 20px;
    height: 20px;
}

.calendar-weekday-grid,
.calendar-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-weekday-grid {
    margin-bottom: 7px;
}

.calendar-weekday-grid span {
    padding: 9px 4px;

    color: var(--text-medium);

    font-size: 11px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.calendar-days-grid {
    gap: 7px;
}

.calendar-day-button {
    position: relative;

    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    min-width: 0;
    min-height: 79px;
    padding: 10px;

    border: 1px solid var(--border);
    border-radius: 15px;

    background: var(--white);
    color: var(--navy);

    font-weight: 900;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}

.calendar-day-button:not(:disabled):hover {
    z-index: 2;

    border-color: var(--sky-blue);
    background: var(--extra-light-blue);

    box-shadow: var(--shadow-small);
    transform: translateY(-2px);
}

.calendar-day-number {
    display: grid;
    place-items: center;

    width: 27px;
    height: 27px;

    border-radius: 9px;
}

.calendar-day-button.past-day {
    background: #f7f8f8;
    color: #93a3ae;
}

.calendar-day-button.outside-month {
    opacity: 0.38;
}

.calendar-day-button.future-day {
    cursor: default;
}

.calendar-day-button.today {
    border: 2px solid var(--sky-blue);
    background: var(--light-blue);
    color: var(--navy);
}

.calendar-day-button.today
.calendar-day-number {
    background: var(--sky-blue);
}

.calendar-day-button.completed-day {
    border-color: var(--green);
    background: var(--light-green);
    color: #327a60;
}

.calendar-complete-check {
    position: absolute;
    right: 8px;
    bottom: 8px;

    display: grid;
    place-items: center;

    width: 23px;
    height: 23px;

    border-radius: 50%;

    background: var(--green);
    color: var(--white);

    font-size: 13px;
}

.calendar-day-button.exam-day {
    border: 2px solid var(--navy);

    background: linear-gradient(
        145deg,
        var(--navy),
        var(--navy-light)
    );

    color: var(--white);

    box-shadow:
        0 5px 0 var(--navy-dark);
}

.calendar-day-button.exam-day
.calendar-day-number {
    background: rgba(
        255,
        255,
        255,
        0.12
    );
}

.calendar-exam-label {
    position: absolute;
    right: 8px;
    bottom: 8px;

    padding: 4px 7px;

    border-radius: 8px;

    background: var(--cream);
    color: var(--navy);

    font-size: 9px;
    letter-spacing: 0.08em;
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;

    margin-top: 18px;
    padding-top: 17px;

    border-top: 1px solid var(--border-light);
}

.calendar-legend span {
    display: flex;
    align-items: center;
    gap: 7px;

    color: var(--text-medium);
    font-size: 11px;
    font-weight: 800;
}

.legend-color {
    display: block;

    width: 14px;
    height: 14px;

    border: 1px solid var(--border);
    border-radius: 5px;
}

.legend-color.today {
    border-color: var(--sky-blue);
    background: var(--light-blue);
}

.legend-color.complete {
    border-color: var(--green);
    background: var(--light-green);
}

.legend-color.exam {
    border-color: var(--navy);
    background: var(--navy);
}

.legend-color.past {
    background: #f1f3f4;
}

@media (max-width: 720px) {
    .real-calendar-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .calendar-countdown {
        width: 100%;
        min-height: 90px;
    }

    .calendar-day-button {
        min-height: 58px;
        padding: 5px;
        border-radius: 11px;
    }

    .calendar-day-number {
        width: 23px;
        height: 23px;
        font-size: 11px;
    }

    .calendar-complete-check {
        right: 4px;
        bottom: 4px;

        width: 18px;
        height: 18px;

        font-size: 10px;
    }

    .calendar-exam-label {
        right: 3px;
        bottom: 3px;

        padding: 2px 4px;
        font-size: 7px;
    }

    .calendar-days-grid {
        gap: 3px;
    }
}
/* =========================================================
   CALENDAR + WEEKLY SCHEDULE LAYOUT
========================================================= */

.calendar-schedule-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(280px, 0.75fr);

    align-items: start;
    gap: 20px;

    margin: 20px 0 42px;
}

/* Remove old spacing because the wrapper controls it */

.calendar-schedule-layout
.real-calendar-card,
.calendar-schedule-layout
.weekly-calendar {
    width: 100%;
    margin: 0;
}

/* Keep the weekly schedule visible while scrolling */

.calendar-schedule-layout
.weekly-calendar {
    position: sticky;
    top: 92px;

    padding: 22px;
}

/* Weekly schedule title */

.calendar-schedule-layout
.weekly-calendar h2 {
    margin: 0;

    color: var(--navy);
    font-size: 22px;
}

/* Description below weekly title */

.weekly-schedule-description {
    margin: 5px 0 17px;

    color: var(--text-medium);
    font-size: 12px;
}

/* Make each weekly row compact */

.calendar-schedule-layout
.calendar-day {
    display: grid;
    grid-template-columns: 52px 1fr;

    gap: 7px;

    padding: 12px 5px;
}

.calendar-schedule-layout
.calendar-day-name {
    color: var(--navy);
    font-size: 12px;
}

.calendar-schedule-layout
.calendar-day-task {
    font-size: 12px;
}

.calendar-schedule-layout
.calendar-day-time {
    grid-column: 2;

    font-size: 11px;
}

/* Rest day */

.calendar-schedule-layout
.calendar-day.rest-day {
    margin: 0 -5px;
    padding-right: 10px;
    padding-left: 10px;

    background: var(--light-blue);
}

/* Tablet */

@media (max-width: 1100px) {
    .calendar-schedule-layout {
        grid-template-columns: 1fr;
    }

    .calendar-schedule-layout
    .weekly-calendar {
        position: static;
    }
}

/* Phone */

@media (max-width: 720px) {
    .calendar-schedule-layout {
        gap: 15px;
        margin-bottom: 34px;
    }
}
/* =========================================================
   WEEKLY SCHEDULE FONT AND SPACING FIX
========================================================= */

/* Give the weekly schedule more width */

.calendar-schedule-layout {
    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(350px, 0.9fr);
}

/* Use the cleaner Nunito font throughout the schedule */

.calendar-schedule-layout
.weekly-calendar,
.calendar-schedule-layout
.weekly-calendar h2,
.calendar-schedule-layout
.calendar-day-name,
.calendar-schedule-layout
.calendar-day-task,
.calendar-schedule-layout
.calendar-day-time {
    font-family: "Nunito", sans-serif;
}

/* Schedule title */

.calendar-schedule-layout
.weekly-calendar h2 {
    font-size: 21px;
    font-weight: 900;
}

/* Fix Wednesday and other long weekday names */

.calendar-schedule-layout
.calendar-day {
    display: grid;

    grid-template-columns:
        minmax(100px, 115px)
        minmax(0, 1fr);

    column-gap: 14px;
    row-gap: 5px;

    align-items: start;

    padding: 15px 6px;
}

/* Weekday */

.calendar-schedule-layout
.calendar-day-name {
    min-width: 0;

    color: var(--navy);

    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;

    white-space: nowrap;
}

/* Daily activity */

.calendar-schedule-layout
.calendar-day-task {
    min-width: 0;

    color: var(--text-dark);

    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;

    overflow-wrap: anywhere;
}

/* Study time */

.calendar-schedule-layout
.calendar-day-time {
    grid-column: 2;

    color: var(--text-medium);

    font-size: 12px;
    font-weight: 700;
}

/* Rest-day spacing */

.calendar-schedule-layout
.calendar-day.rest-day {
    margin: 0;

    padding-right: 12px;
    padding-left: 12px;
}

/* Stack earlier when there is not enough room */

@media (max-width: 1180px) {
    .calendar-schedule-layout {
        grid-template-columns: 1fr;
    }

    .calendar-schedule-layout
    .weekly-calendar {
        position: static;
    }
}

/* Phone layout */

@media (max-width: 520px) {
    .calendar-schedule-layout
    .calendar-day {
        grid-template-columns:
            minmax(85px, 100px)
            minmax(0, 1fr);

        column-gap: 10px;
    }

    .calendar-schedule-layout
    .calendar-day-name,
    .calendar-schedule-layout
    .calendar-day-task {
        font-size: 13px;
    }
}
/* =========================================================
   TOPIC NOTES CARD
========================================================= */

/* Three cards: video, PDFs, and notes */

.lesson-media-grid {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

/* Notes accent */

.notes-media-icon {
    background: var(--light-lavender);
    color: #7772c8;
}

.notes-media-icon svg {
    width: 25px;
    height: 25px;

    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lesson-pdf-preview {
    width: 100%;
    min-height: 360px;
    margin: 10px 0 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--extra-light-blue);
}

.lesson-pdf-open {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 18px;
}

.personal-notes-heading {
    margin: 4px 0 10px;
    color: var(--navy);
    font-size: 1rem;
}

/* Keep all three media cards aligned */

.lesson-media-card {
    display: flex;
    flex-direction: column;
}

.lesson-media-card
.media-placeholder {
    flex: 1;
}

.lesson-media-card
.secondary-button {
    width: fit-content;
    margin-top: auto;
}

/* Tablet */

@media (max-width: 1050px) {
    .lesson-media-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .lesson-notes-card {
        grid-column: 1 / -1;
    }
}

/* Phone */

@media (max-width: 720px) {
    .lesson-media-grid {
        grid-template-columns: 1fr;
    }

    .lesson-notes-card {
        grid-column: auto;
    }

    .lesson-pdf-preview {
        min-height: 300px;
    }
}
/* SATlang clean loading screen. This final block intentionally overrides old experiments. */
#loading-screen.loading-screen{position:fixed!important;inset:0!important;z-index:9999!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:100vw!important;min-height:100vh!important;padding:30px!important;background:#fffdf8!important;text-align:center!important}
#loading-screen .loading-brand{display:block!important;padding:26px 42px!important;background:#f4f6f7!important;border:2px solid #e1e7eb!important;border-radius:28px!important;box-shadow:0 10px 0 #e1e7eb,0 25px 55px rgba(23,59,99,.12)!important;font-family:"Fredoka",sans-serif!important;font-size:clamp(4rem,10vw,7rem)!important;font-weight:700!important;line-height:1!important;letter-spacing:-5px!important;white-space:nowrap!important}
#loading-screen .loading-brand .brand-sat{color:#173b63!important}#loading-screen .loading-brand .brand-lang{color:#76c7e7!important}
#loading-screen .loading-slogan{margin:54px 0 0!important;color:#173b63!important;font-family:"Fredoka",sans-serif!important;font-size:clamp(1.2rem,3vw,1.6rem)!important;font-weight:600!important;line-height:1.3!important}
#loading-screen .loading-message{margin:14px 0 0!important;color:#94a3af!important;font-family:"Nunito",sans-serif!important;font-size:.9rem!important;font-weight:700!important}
@media(max-width:600px){#loading-screen .loading-brand{padding:21px 28px!important;border-radius:22px!important;font-size:4rem!important;letter-spacing:-3px!important}#loading-screen .loading-slogan{margin-top:40px!important;font-size:1.1rem!important}}

/* Three-level PDF resources */
.lesson-pdf-levels-card{display:flex;flex-direction:column;align-items:stretch}
.section-practice-pdfs{padding:24px 30px 28px;border-top:1px solid var(--border);background:linear-gradient(180deg,var(--extra-light-blue),rgba(255,255,255,.82))}
.section-practice-pdfs-heading{display:flex;align-items:center;gap:14px}
.section-practice-pdfs-heading .lesson-media-icon{flex:0 0 auto}
.section-practice-pdfs-heading h3{margin:0;color:var(--navy)}
.section-practice-pdfs-heading p{margin:5px 0 0;color:var(--text-light)}
.section-pdf-groups{display:grid;gap:16px;margin-top:18px}
.section-pdf-group{padding:16px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.78)}
.section-pdf-group h4{margin:0 0 12px}
.section-pdf-set-list{display:grid;gap:10px}
.section-pdf-set-row{display:grid;grid-template-columns:minmax(105px,.55fr) minmax(130px,1fr) minmax(130px,1fr);align-items:center;gap:10px;padding:10px;border-radius:13px;background:var(--extra-light-blue)}
.section-pdf-set-row strong{color:var(--navy)}
.section-pdf-set-row .compact-button{width:100%;justify-content:center;text-align:center}
.section-pdf-set-row .explanation-button{background:#eef8fc}
.section-pdf-missing{display:inline-flex;align-items:center;color:var(--text-light);background:#f4f7f9;border:1px dashed var(--border);border-radius:12px;font-weight:700}
.section-pdf-empty{margin:0;color:var(--text-light)}
.pdf-level-list{display:grid;gap:12px;margin-top:14px}
.pdf-level-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;background:var(--extra-light-blue);border:1px solid var(--border);border-radius:14px}
.pdf-level-row.is-empty{color:var(--text-light)}
.pdf-level-badge{min-width:88px;padding:7px 11px;border-radius:999px;font-weight:900;text-align:center}
.pdf-level-badge.easy{color:#267b60;background:#eaf9f3}
.pdf-level-badge.medium{color:#8a6418;background:#fff8dc}
.pdf-level-badge.hard{color:#a84f5b;background:#fff0f2}
.compact-button{padding:9px 13px!important;font-size:.88rem!important}
@media(max-width:520px){.section-practice-pdfs{padding:20px}.section-practice-pdfs-heading{align-items:flex-start}.section-pdf-set-row{grid-template-columns:1fr 1fr}.section-pdf-set-row strong{grid-column:1/-1}.pdf-level-row{align-items:flex-start;flex-direction:column}.compact-button{width:100%;justify-content:center}}

/* Personal lesson notes */
.lesson-personal-notes {
    width: 100%;
    min-height: 150px;
    margin: 12px 0 14px;
    padding: 16px 18px;
    resize: vertical;
    border: 2px solid #d9eaf2;
    border-radius: 18px;
    background: #fffdf8;
    color: #173b63;
    font: inherit;
    line-height: 1.6;
}

.lesson-personal-notes:focus {
    border-color: #72c6e6;
    outline: 3px solid rgba(114, 198, 230, 0.2);
}

.lesson-notes-card .text-button {
    display: inline-flex;
    margin-top: 12px;
}

.home-hero.home-hero-minimal {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    padding: 28px 32px;
}

.home-hero-minimal .primary-button {
    margin: 0;
}

.playlist-card {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(320px, 1.2fr);
    gap: 28px;
    align-items: center;
    margin-top: 24px;
    padding: 28px;
}

.playlist-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.playlist-copy h2,
.playlist-copy p {
    margin: 0;
}

.playlist-badge {
    display: inline-flex;
    padding: 6px 11px;
    border-radius: 999px;
    background: #e7f6fc;
    color: #173b63;
    font-size: 0.82rem;
    font-weight: 700;
}

.playlist-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 18px;
    background: #eaf3f8;
}

.lesson-video-list {
    display: grid;
    gap: 8px;
    width: 100%;
    max-height: 270px;
    margin-top: 14px;
    padding-right: 4px;
    overflow-y: auto;
}

.lesson-video-item {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.lesson-video-item span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--extra-light-blue);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 800;
}

.lesson-video-item strong {
    font-size: 0.88rem;
    line-height: 1.3;
}

.lesson-video-item:hover,
.lesson-video-item.active {
    border-color: var(--sky-blue);
    background: #f2fbff;
}

.lesson-video-item.active span {
    background: var(--primary);
    color: #ffffff;
}

@media (max-width: 760px) {
    .playlist-card {
        grid-template-columns: 1fr;
        padding: 20px;
    }
}

/* =========================================================
   ABOUT SATLANG
========================================================= */

.about-page {
    width: min(1080px, 100%);
    margin: 0 auto;
    padding: 10px 0 48px;
}

.about-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(34px, 6vw, 68px);
    border: 1px solid #cfe5ef;
    border-radius: 36px;
    background:
        radial-gradient(circle at 92% 12%, rgba(124, 203, 235, 0.34) 0 88px, transparent 89px),
        linear-gradient(135deg, #f0faff 0%, #fffdf7 68%);
    box-shadow: 0 18px 48px rgba(23, 59, 99, 0.09);
}

.about-eyebrow {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #dff4fc;
    color: #39779a;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.11em;
}

.about-hero h1 {
    max-width: 780px;
    margin: 0 0 20px;
    color: #173b63;
    font-size: clamp(2.4rem, 6vw, 5.2rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.about-hero p {
    max-width: 780px;
    margin: 0;
    color: #5d7b99;
    font-size: clamp(1.05rem, 2vw, 1.28rem);
    line-height: 1.75;
}

.about-story-card,
.about-info-card,
.about-project-note {
    border: 1px solid #d5e8f1;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(23, 59, 99, 0.07);
}

.about-story-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    margin-top: 26px;
    padding: clamp(28px, 5vw, 48px);
    border-radius: 30px;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.about-info-card {
    padding: 34px;
    border-radius: 28px;
}

.about-card-icon {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 18px;
    background: #fff0c8;
    color: #9a6a0a;
}

.about-card-icon.sky {
    background: #dff4fc;
    color: #347da3;
}

.about-card-icon.purple {
    background: #ece9ff;
    color: #6c61ca;
}

.about-card-icon svg {
    width: 27px;
    height: 27px;
}

.about-story-card h2,
.about-info-card h2 {
    margin: 0 0 13px;
    color: #173b63;
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.about-story-card p,
.about-info-card p,
.about-project-note p {
    margin: 0;
    color: #617f9e;
    font-size: 1.04rem;
    line-height: 1.75;
}

.about-project-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 24px;
    padding: 30px 34px;
    border-radius: 26px;
    border-left: 7px solid #76c9a7;
}

.about-project-note strong {
    flex: 0 0 auto;
    color: #173b63;
    font-size: 1.12rem;
}

@media (max-width: 760px) {
    .about-page {
        padding-top: 0;
    }

    .about-hero {
        padding: 32px 24px;
        border-radius: 26px;
    }

    .about-story-card,
    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-story-card,
    .about-info-card {
        padding: 26px 22px;
    }

    .about-project-note {
        align-items: flex-start;
        flex-direction: column;
        padding: 26px 22px;
    }
}

/* Compact complete SAT formula sheet */
.formula-modal-card {
    width: min(1420px, 96vw);
    max-width: 1420px;
    padding: clamp(26px, 4vw, 52px);
    background: #fffdf8;
}

.formula-sheet-heading {
    margin-bottom: 30px;
}

.formula-sheet-heading h1 {
    max-width: 1100px;
    margin-bottom: 10px;
    font-size: clamp(2.3rem, 5vw, 4.4rem);
    line-height: 1.02;
}

.formula-domain-section {
    margin: 0 0 28px;
    padding: clamp(24px, 3vw, 40px);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(23, 59, 99, 0.05);
}

.formula-domain-section > h2 {
    margin: 0 0 22px;
    color: var(--navy);
    font-family: "Fredoka", "Nunito", sans-serif;
    font-size: clamp(1.55rem, 2.5vw, 2.15rem);
}

.formula-sheet-rows {
    border-top: 1px solid #e4eef3;
}

.formula-sheet-row {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(270px, 1.2fr);
    align-items: center;
    gap: 18px;
    min-height: 76px;
    padding: 14px 4px;
    border-bottom: 1px solid #e4eef3;
}

.formula-sheet-row.has-mini-diagram {
    grid-template-columns: minmax(190px, .9fr) minmax(230px, 1.15fr) 170px;
    min-height: 118px;
}

.formula-sheet-name {
    color: #65809b;
    font-size: 0.96rem;
    font-weight: 600;
}

.formula-sheet-expression {
    color: var(--navy);
    font-family: "Nunito", sans-serif;
    font-size: clamp(0.92rem, 1.35vw, 1.06rem);
    font-weight: 700;
    text-align: right;
}

.math-fraction {
    display: inline-grid;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: stretch;
    min-width: 2.5em;
    margin: 0 0.18em;
    vertical-align: middle;
    line-height: 1.12;
    text-align: center;
}

.math-fraction > span {
    display: block;
    padding: 0.08em 0.25em;
    white-space: nowrap;
}

.math-fraction > span:last-child {
    border-top: 2px solid currentColor;
}

.formula-mini-diagram {
    display: grid;
    place-items: center;
    width: 170px;
    height: 96px;
    overflow: hidden;
    border: 1px solid #dcebf2;
    border-radius: 16px;
    background: #f8fcfe;
}

.formula-mini-diagram .formula-visual {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 3px;
}

.formula-mini-diagram svg {
    display: block;
    width: 158px;
    height: 88px;
}

.formula-mini-diagram .compact-triangle svg {
    width: 145px;
    height: 96px;
    overflow: visible;
}

.formula-mini-diagram .compact-triangle text {
    font-size: 8.5px;
    font-weight: 700;
}

.formula-mini-diagram .compact-triangle .diagram-shape {
    fill: rgba(118, 199, 231, 0.08);
    stroke-width: 3;
    stroke-linejoin: round;
}

.formula-mini-diagram .compact-triangle .right-angle-marker {
    stroke-width: 2.5;
}

.diagram-shape,
.diagram-circle,
.diagram-circle-muted,
.diagram-side {
    fill: rgba(118, 199, 231, 0.10);
    stroke: #173b63;
    stroke-width: 5;
}

.diagram-circle,
.diagram-circle-muted {
    fill: rgba(118, 199, 231, 0.08);
}

.diagram-radius,
.diagram-diameter,
.coordinate-axis,
.right-angle-marker,
.angle-arc {
    fill: none;
    stroke: #173b63;
    stroke-width: 4;
}

.diagram-arc-highlight {
    fill: none;
    stroke: #76c7e7;
    stroke-width: 9;
    stroke-linecap: round;
}

.diagram-sector {
    fill: rgba(118, 199, 231, 0.38);
    stroke: #76c7e7;
    stroke-width: 4;
}

.diagram-center-point {
    fill: #173b63;
}

.diagram-side-highlight,
.diagram-side-highlight-pink,
.diagram-side-highlight-lavender {
    stroke-width: 9;
}

.diagram-side-highlight { stroke: #76c7e7; }
.diagram-side-highlight-pink { stroke: #efb7d3; }
.diagram-side-highlight-lavender { stroke: #aaa4e8; }

.formula-mini-diagram text {
    fill: #173b63;
    font-family: "Nunito", sans-serif;
    font-weight: 900;
}

.formula-mini-diagram .diagram-ratio-box {
    display: none;
}

.formula-mini-diagram .diagram-ratio-box rect {
    fill: #ffffff;
    stroke: #dcebf2;
}

@media (max-width: 760px) {
    .formula-modal-card {
        width: 100%;
        padding: 24px 18px 38px;
    }

    .formula-domain-section {
        padding: 22px 18px;
    }

    .formula-sheet-row,
    .formula-sheet-row.has-mini-diagram {
        grid-template-columns: 1fr;
        gap: 7px;
        min-height: 0;
        padding: 17px 0;
    }

    .formula-sheet-expression {
        text-align: left;
        overflow-wrap: anywhere;
    }

    .formula-mini-diagram {
        width: 150px;
        height: 86px;
        margin-top: 5px;
    }

    .formula-mini-diagram svg {
        width: 140px;
        height: 78px;
    }
}

/* =========================
   SATLANG ACCOUNTS
========================= */

.account-area { display:flex; align-items:center; gap:10px; }
.account-button {
    display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:9px 15px;
    border:2px solid #dcebf2; border-radius:14px; background:#fff; color:var(--navy);
    font:800 14px "Nunito",sans-serif; transition:transform 160ms ease,border-color 160ms ease,background 160ms ease;
}
.account-button:hover { transform:translateY(-1px); border-color:var(--sky-blue); background:#f7fcff; }
.account-button.signed-in { border-color:#bfe8d7; background:#f1fcf7; }
.account-button svg { width:18px; height:18px; }
.auth-modal-card { width:min(94vw,600px); max-height:92vh; overflow-y:auto; padding:34px; border:2px solid #dcebf2; background:#fffdf8; }
.auth-heading { display:flex; align-items:center; gap:16px; padding-right:42px; margin-bottom:24px; }
.auth-logo,.auth-user-badge {
    display:grid; place-items:center; flex:0 0 auto; width:58px; height:58px; border-radius:19px;
    background:var(--navy); color:#fff; box-shadow:0 5px 0 var(--navy-dark); font:900 30px "Fredoka",sans-serif;
}
.auth-eyebrow { margin:0 0 3px; color:#5f7892; font-size:13px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.auth-heading h2 { margin:0; color:var(--navy); font:700 clamp(25px,4vw,34px) "Fredoka",sans-serif; }
.auth-heading p:last-child { margin:5px 0 0; color:#5f7892; line-height:1.45; }
.auth-tabs,.auth-method-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:5px; border-radius:15px; background:#eaf5fa; }
.auth-tab,.auth-method-tab {
    display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px;
    border:0; border-radius:11px; background:transparent; color:#5f7892; font:900 14px "Nunito",sans-serif;
}
.auth-tab.active,.auth-method-tab.active { background:#fff; color:var(--navy); box-shadow:0 2px 8px rgba(23,59,99,.1); }
.auth-method-tab svg { width:17px; height:17px; }
.auth-social-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:17px; }
.auth-provider-button {
    display:flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:10px 12px;
    border:2px solid #dcebf2; border-radius:14px; background:#fff; color:var(--navy); font:800 14px "Nunito",sans-serif;
}
.auth-provider-button:hover { border-color:var(--sky-blue); }
.provider-mark { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; font:900 17px Arial,sans-serif; }
.apple-mark { color:#111; background:#f1f1f1; font-size:12px; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:17px 0; color:#8095a9; font-size:13px; font-weight:800; }
.auth-divider::before,.auth-divider::after { content:""; flex:1; height:1px; background:#dcebf2; }
.auth-form { display:grid; gap:8px; margin-top:18px; }
#auth-name-field { gap:8px; }
#auth-name-field:not(.hidden) { display:grid; }
.auth-sat-field { display:grid; gap:9px; margin:8px 0 4px; padding:15px; border:2px solid #dcebf2; border-radius:15px; }
.auth-sat-field legend { padding:0 5px; color:var(--navy); font-size:14px; font-weight:900; }
.auth-choice { display:flex!important; align-items:center; gap:10px; min-height:42px; padding:9px 11px; border:2px solid #e3eef3; border-radius:12px; background:#fff; cursor:pointer; }
.auth-choice:has(input:checked) { border-color:var(--sky-blue); background:#f3fbff; }
.auth-choice input { width:18px!important; min-height:18px!important; margin:0; padding:0; accent-color:var(--navy); }
.auth-choice span { color:var(--navy); font-size:14px; font-weight:800; }
.auth-score-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:3px; }
.auth-score-fields>div { display:grid; gap:7px; }
.auth-form label { color:var(--navy); font-size:14px; font-weight:900; }
.auth-form input {
    width:100%; min-height:48px; padding:11px 13px; border:2px solid #dcebf2; border-radius:13px;
    background:#fff; color:var(--navy); font:700 16px "Nunito",sans-serif; outline:none;
}
.auth-form input:focus { border-color:var(--sky-blue); box-shadow:0 0 0 3px rgba(124,203,235,.2); }
.auth-primary-button,.auth-secondary-button {
    min-height:48px; margin-top:8px; padding:11px 18px; border:0; border-radius:14px;
    background:var(--navy); color:#fff; box-shadow:0 4px 0 var(--navy-dark); font:900 15px "Nunito",sans-serif;
}
.auth-primary-button:disabled,.auth-provider-button:disabled { cursor:wait; opacity:.65; }
.auth-link-button {
    justify-self:center; border:0; background:transparent; color:var(--navy-light);
    font:800 14px "Nunito",sans-serif; text-decoration:underline; text-underline-offset:3px;
}
.auth-help { margin:0 0 5px; color:#6a8299; font-size:13px; }
.auth-message { min-height:22px; margin:15px 0 0; color:#5f7892; font-size:14px; font-weight:800; text-align:center; }
.auth-message.error { color:#b23a48; }
.auth-message.success { color:#24724f; }
.auth-profile { padding:18px 0 6px; text-align:center; }
.auth-profile-name-form { width:100%; margin:14px 0 4px; text-align:left; }
.auth-profile-name-form label { display:block; margin-bottom:7px; color:var(--navy); font-size:14px; font-weight:900; }
.auth-profile-name-form>div { display:flex; gap:9px; }
.auth-profile-name-form input { flex:1; min-width:0; padding:11px 13px; border:2px solid #d9eaf2; border-radius:12px; color:var(--navy); font:700 15px "Nunito",sans-serif; }
.auth-profile-name-form .auth-primary-button { width:auto; margin:0; padding:10px 15px; white-space:nowrap; }
.auth-user-badge { margin:0 auto 17px; }
.auth-profile h3 { margin:0; color:var(--navy); font:700 28px "Fredoka",sans-serif; }
.auth-profile>p { margin:5px 0; color:#617b94; }
@media (max-width:520px) { .auth-profile-name-form>div { flex-direction:column; } .auth-profile-name-form .auth-primary-button { width:100%; } .auth-score-fields { grid-template-columns:1fr; } }
.auth-success-note { margin:18px auto!important; padding:11px 14px; border-radius:13px; background:#eaf8f1; color:#24724f!important; font-weight:800; }

@media (max-width:760px) {
    .account-button span { display:none; }
    .account-button { width:42px; padding:8px; justify-content:center; }
    .auth-modal-card { padding:28px 18px; }
    .auth-heading { align-items:flex-start; }
    .auth-logo { width:48px; height:48px; border-radius:15px; }
    .auth-social-grid { grid-template-columns:1fr; }
}

/* =========================
   PRIVATE SITE ANALYTICS
========================= */

.analytics-page { max-width:1180px; margin:0 auto; }
.analytics-page h1 { margin:5px 0 8px; color:var(--navy); font:700 clamp(34px,5vw,54px) "Fredoka",sans-serif; }
.analytics-intro { max-width:760px; margin:0 0 26px; color:#5f7892; font-size:17px; line-height:1.55; }
.analytics-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-bottom:22px; }
.analytics-stat-card,.analytics-panel {
    border:2px solid #dcebf2; border-radius:22px; background:#fff; box-shadow:0 7px 22px rgba(23,59,99,.06);
}
.analytics-stat-card { display:grid; gap:5px; min-height:138px; padding:22px; align-content:center; }
.analytics-stat-card strong { color:var(--navy); font:700 38px "Fredoka",sans-serif; }
.analytics-stat-card span { color:#617b94; font-size:14px; font-weight:900; line-height:1.3; }
.analytics-panels { display:grid; grid-template-columns:1.35fr 1fr; gap:18px; }
.analytics-panel { padding:24px; }
.analytics-panel h2 { margin:0 0 16px; color:var(--navy); font:700 23px "Fredoka",sans-serif; }
.analytics-list { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.analytics-list li { display:flex; justify-content:space-between; gap:20px; padding:12px 2px; border-bottom:1px solid #e4eff4; color:#496985; font-weight:800; }
.analytics-list li:last-child { border-bottom:0; }
.analytics-list strong { color:var(--navy); }
.analytics-daily-panel { margin-top:18px; }
.analytics-bars { display:flex; align-items:flex-end; gap:10px; min-height:210px; padding-top:22px; overflow-x:auto; }
.analytics-bar-item { display:grid; grid-template-rows:22px 130px 22px; gap:6px; align-items:end; min-width:44px; height:190px; text-align:center; color:#617b94; }
.analytics-bar-item strong { align-self:center; color:var(--navy); font-size:13px; }
.analytics-bar { display:block; width:30px; max-height:130px; margin:0 auto; border-radius:10px 10px 4px 4px; background:#f2b15f; }
.analytics-bar-item small { align-self:start; font-weight:800; }
.analytics-loading { margin-top:24px; padding:26px; border:2px solid #dcebf2; border-radius:20px; background:#fff; color:#617b94; line-height:1.6; }
.analytics-student-panel { margin-top:18px; }
.analytics-panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.analytics-panel-heading h2 { margin-top:4px; }
.analytics-panel-heading>span { padding:7px 11px; border-radius:999px; background:#fff3dc; color:#8a5c20; font-size:13px; font-weight:900; white-space:nowrap; }
.analytics-privacy-note { margin:-4px 0 18px; color:#6b8298; font-size:14px; }
.analytics-table-wrap { overflow-x:auto; border:1px solid #e1edf3; border-radius:15px; }
.analytics-table { width:100%; min-width:980px; border-collapse:collapse; color:#496985; font-size:14px; }
.analytics-table th,.analytics-table td { padding:13px 14px; border-bottom:1px solid #e5eff4; text-align:left; white-space:nowrap; }
.analytics-table th { background:#f3f9fc; color:var(--navy); font-size:12px; font-weight:900; letter-spacing:.025em; text-transform:uppercase; }
.analytics-table tbody tr:last-child td { border-bottom:0; }
.analytics-table tbody tr:hover { background:#fffaf0; }
.analytics-table td strong { color:var(--navy); }
@media (max-width:1050px) {
    .analytics-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:700px) {
    .analytics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .analytics-panels { grid-template-columns:1fr; }
    .analytics-stat-card { min-height:116px; padding:17px; }
    .analytics-stat-card strong { font-size:32px; }
    .analytics-panel-heading { display:grid; }
}