* { box-sizing: border-box; }

:root {
    --bg: #edf2f7;
    --panel: #fff;
    --soft: #f8fafc;
    --line: #d8e0ea;
    --line-strong: #c5cfdb;
    --text: #172033;
    --muted: #64748b;
    --brand: #155e75;
    --brand-dark: #0f4f63;
    --green: #0f766e;
    --amber: #b45309;
    --red: #b91c1c;
    --blue: #2563eb;
    --violet: #6d28d9;
    --shadow: 0 18px 40px rgba(15, 23, 42, .08);
    --shadow-soft: 0 10px 24px rgba(15, 23, 42, .06);
}

html:has(body.app-modal-open),
body.app-modal-open {
    overflow: hidden;
}

body.account-settings-body .student-dashboard-shell {
    min-height: 100vh;
    background: #f5f6f8;
}

.account-settings-page {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding-top: calc(var(--student-home-marquee-height) + var(--student-home-nav-height) + 26px);
    padding-bottom: 42px;
}

.account-settings-hero {
    min-height: 184px;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: 24px;
    border: 1px solid #d8dde6;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(20, 28, 40, .07);
}

.account-settings-avatar,
.account-avatar-preview {
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: #20242a;
    color: #ffffff;
    font-size: 34px;
    font-weight: 950;
}

.account-settings-avatar img,
.account-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-settings-hero h1 {
    margin: 5px 0;
    color: #15181d;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 950;
    letter-spacing: 0;
}

.account-settings-hero span,
.account-settings-panel-head span {
    color: #667085;
    font-size: 12px;
    font-weight: 850;
}

.account-settings-hero p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    font-weight: 760;
}

.account-settings-hero button,
.account-settings-submit,
.account-avatar-uploader button {
    height: 38px;
    border: 1px solid #20242a;
    border-radius: 8px;
    padding: 0 16px;
    color: #ffffff;
    background: #20242a;
    font-weight: 850;
    cursor: pointer;
}

.account-settings-submit.secondary,
.account-avatar-uploader button:first-of-type,
.account-settings-hero button {
    color: #20242a;
    background: #ffffff;
}

.account-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 18px;
    margin-top: 18px;
}

.account-settings-side {
    display: grid;
    gap: 18px;
    align-content: start;
}

.account-settings-panel {
    padding: 20px;
    border: 1px solid #d8dde6;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(20, 28, 40, .05);
}

.account-settings-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.account-settings-panel-head h2 {
    margin: 4px 0 0;
    color: #15181d;
    font-size: 22px;
    font-weight: 950;
}

.account-settings-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.account-settings-form.compact {
    grid-template-columns: 1fr;
}

.account-settings-form label {
    display: grid;
    gap: 7px;
}

.account-settings-form label span {
    color: #667085;
    font-size: 12px;
    font-weight: 850;
}

.account-settings-form input {
    height: 42px;
    min-width: 0;
    border: 1px solid #d8dde6;
    border-radius: 8px;
    padding: 0 12px;
    color: #15181d;
    background: #ffffff;
    font: inherit;
}

.account-settings-form input[readonly] {
    color: #667085;
    background: #f5f6f8;
}

.account-settings-form input:focus {
    border-color: #20242a;
    outline: 0;
}

.account-settings-form-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
}

.account-settings-action {
    width: 128px;
    height: 34px;
    min-width: 128px;
    border: 1px solid #20242a;
    border-radius: 8px;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
}

.account-settings-action.primary,
.account-settings-action.secondary {
    color: #20242a;
    background: #ffffff;
    box-shadow: none;
}

.account-settings-action:hover {
    color: #ffffff;
    background: #20242a;
}

.account-settings-submit {
    justify-self: stretch;
    min-width: 132px;
}

.account-settings-form.compact .account-settings-submit {
    grid-column: 1 / -1;
}

.account-avatar-uploader {
    display: grid;
    gap: 12px;
}

.account-avatar-preview {
    width: 112px;
    height: 112px;
    font-size: 38px;
}

.account-settings-redesign {
    width: min(1040px, calc(100% - 40px));
}

.account-settings-profile-card,
.account-settings-clean-panel {
    border: 1px solid #d8dde6;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(20, 28, 40, .07);
}

.account-settings-profile-card {
    min-height: 170px;
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: 24px;
}

.account-settings-round-avatar {
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 4px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    background: #20242a;
    box-shadow: 0 14px 32px rgba(20, 28, 40, .18);
    cursor: pointer;
}

.account-settings-round-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-settings-round-avatar span {
    font-size: 34px;
    font-weight: 950;
}

.account-settings-profile-main > span {
    color: #667085;
    font-size: 12px;
    font-weight: 850;
}

.account-settings-profile-main h1 {
    margin: 6px 0;
    color: #15181d;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 950;
    letter-spacing: 0;
}

.account-settings-profile-main p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    font-weight: 760;
}

.account-settings-profile-actions {
    display: flex;
    gap: 8px;
    align-self: end;
}

.account-settings-profile-actions button {
    height: 34px;
    border: 1px solid #20242a;
    border-radius: 8px;
    padding: 0 14px;
    color: #20242a;
    background: #ffffff;
    font-weight: 850;
    cursor: pointer;
}

.account-settings-profile-actions button:last-child {
    color: #ffffff;
    background: #20242a;
}

.account-settings-clean-panel {
    margin-top: 18px;
    padding: 20px;
}

.account-settings-modal-panel .account-avatar-uploader,
.account-settings-modal-form {
    padding: 18px;
}

.account-settings-modal-panel .account-avatar-preview {
    width: 132px;
    height: 132px;
    border-radius: 50%;
}

@media (max-width: 880px) {
    .account-settings-page {
        width: min(100% - 28px, 680px);
    }

    .account-settings-hero,
    .account-settings-grid,
    .account-settings-form {
        grid-template-columns: 1fr;
    }

    .account-settings-hero {
        justify-items: start;
    }

    .account-settings-profile-card {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .account-settings-profile-actions {
        align-self: auto;
        flex-wrap: wrap;
    }
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .08), transparent 34rem),
        linear-gradient(180deg, #f8fbff 0%, var(--bg) 42%);
    color: var(--text);
    font-family: Arial, "Microsoft YaHei", sans-serif;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

.layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 20px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 20px;
    background: rgba(255, 255, 255, .94);
    border-right: 1px solid var(--line);
    box-shadow: 8px 0 24px rgba(15, 23, 42, .04);
    backdrop-filter: blur(14px);
}

.brand, .user-mini, .topbar, .top-actions, .panel-head, .toolbar, .row-actions {
    display: flex;
    align-items: center;
}

.brand { gap: 12px; }
.brand-mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand), var(--blue));
    color: #fff;
    font-weight: 800;
}
.brand-name { font-size: 18px; font-weight: 800; }
.brand-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }

.side-nav {
    min-height: 0;
    overflow: auto;
    display: grid;
    align-content: start;
    gap: 8px;
}

.side-nav a {
    min-height: 42px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #334155;
    font-weight: 800;
}

.side-nav a:hover, .side-nav a.active {
    border-color: #b6d7e2;
    background: linear-gradient(135deg, #e8f5f8, #eef2ff);
    color: var(--brand);
    box-shadow: 0 8px 18px rgba(21, 94, 117, .08);
}

.user-mini {
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
}

.sidebar-tools {
    display: grid;
    gap: 10px;
}

.lang-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--soft);
}

.lang-switch button {
    min-height: 30px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.lang-switch button.active {
    background: var(--brand);
    color: #fff;
}

.avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-weight: 800;
}

.user-mini strong, .user-mini span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-mini span, .muted, .meta, .hint { color: var(--muted); font-size: 12px; }

.main {
    min-width: 0;
    padding: 26px;
}

.topbar {
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    padding: 18px;
    border: 1px solid rgba(216, 224, 234, .9);
    border-radius: 8px;
    background: rgba(255,255,255,.78);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(14px);
}

.topbar h1 { font-size: 26px; line-height: 1.25; }
.topbar p { margin-top: 6px; color: var(--muted); }
.top-actions { justify-content: flex-end; gap: 10px; }

.search {
    width: 320px;
    height: 40px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: var(--panel);
    color: var(--muted);
    font-size: 12px;
}
.search input { min-width: 0; border: 0; outline: 0; }

.primary, .secondary, .text-btn, .small-btn {
    min-height: 38px;
    border-radius: 7px;
    font-weight: 800;
}
.primary { border: 1px solid var(--brand); background: linear-gradient(135deg, var(--brand), var(--blue)); color: #fff; padding: 0 14px; box-shadow: 0 10px 20px rgba(21, 94, 117, .18); }
.primary:hover { filter: brightness(.96); }
.secondary { border: 1px solid #b6d7e2; background: var(--panel); color: var(--brand); padding: 0 14px; }
.text-btn { border: 0; background: transparent; color: var(--brand); }
.small-btn { min-height: 32px; border: 1px solid var(--line-strong); background: #fff; color: var(--brand); padding: 0 10px; font-size: 12px; }
.danger-btn { border-color: #fecaca; color: var(--red); }
button:disabled { opacity: .58; cursor: progress; }

.metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.metric, .panel, .row-card, .table-card, .question-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow-soft);
}

.metric {
    padding: 16px;
    display: grid;
    gap: 8px;
    position: relative;
    overflow: hidden;
}
.metric:before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--blue), var(--green));
}
.metric span { color: var(--muted); font-size: 12px; }
.metric strong { font-size: 28px; line-height: 1; }

.grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
    gap: 14px;
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.master-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .42fr);
    gap: 14px;
}

.panel {
    padding: 18px;
    margin-bottom: 14px;
}
.panel-head, .toolbar {
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.panel h2 { font-size: 17px; }

.toolbar {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
}

.segmented {
    display: inline-grid;
    grid-auto-flow: column;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--soft);
}
.segmented button {
    min-height: 32px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    padding: 0 12px;
    color: #475569;
    font-weight: 800;
}
.segmented button.active { background: var(--brand); color: #fff; }

.table-card { overflow: hidden; }
.data-row {
    min-height: 68px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    transition: background .16s ease, transform .16s ease;
}
.data-row:hover { background: #f8fbff; }
.data-row:last-child { border-bottom: 0; }
.row-title { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-actions { justify-content: flex-end; flex-wrap: wrap; gap: 8px; }

.pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #e8f5f8;
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
}
.pill.green { background: #dcfce7; color: #166534; }
.pill.amber { background: #fef3c7; color: var(--amber); }
.pill.red { background: #fee2e2; color: var(--red); }

.detail-list { display: grid; gap: 0; }
.detail-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.detail-item:last-child { border-bottom: 0; }
.detail-item span:first-child { color: var(--muted); }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.form-grid label { display: grid; gap: 6px; color: #334155; font-size: 13px; font-weight: 800; }
.form-grid input, .form-grid select, .form-grid textarea {
    min-width: 0;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    padding: 9px 10px;
    background: #fff;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .search input:focus {
    outline: 2px solid rgba(37, 99, 235, .18);
    border-color: var(--blue);
}
.form-grid textarea { min-height: 96px; resize: vertical; }
.full { grid-column: 1 / -1; }

.progress-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 44px;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}
.bar { height: 10px; border-radius: 999px; background: #dbeafe; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--green); }

.question-card { padding: 14px; display: grid; gap: 10px; }
.option-list { display: grid; gap: 8px; }
.option-list label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--soft);
}

/* Student dashboard prototype style */
.student-home {
    background: #f5f6f8;
}

.student-home-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid rgba(32,36,42,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 18px 44px rgba(32,36,42,.10);
}

.student-home-top h1 {
    font-size: 30px;
}

.student-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-search {
    width: 300px;
    min-height: 42px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid rgba(32,36,42,.14);
    border-radius: 8px;
    background: #fff;
    color: #667085;
    font-size: 13px;
    font-weight: 800;
}

.student-search input {
    min-width: 0;
    border: 0;
    outline: 0;
}

.student-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.student-metric-card {
    padding: 16px;
    border: 1px solid rgba(32,36,42,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 14px 34px rgba(47,123,112,.09);
}

.student-metric-card span,
.student-metric-card small {
    display: block;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.student-metric-card strong {
    display: block;
    margin: 9px 0 5px;
    color: #15181d;
    font-size: 30px;
    line-height: 1;
}

.student-dashboard-grid,
.student-content-grid,
.student-bottom-grid {
    display: grid;
    gap: 14px;
}

.student-dashboard-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, .6fr);
}

.student-content-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
}

.student-bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.student-continue-panel {
    min-height: 310px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 20px;
    padding: 24px;
    border: 1px solid rgba(47,123,112,.15);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(232,246,242,.94));
    box-shadow: 0 20px 48px rgba(47,123,112,.13);
    overflow: hidden;
}

.student-panel-copy h2 {
    margin: 8px 0 8px;
    font-size: 28px;
}

.student-progress-main {
    margin: 26px 0 18px;
}

.student-progress-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #667085;
    font-weight: 800;
}

.student-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.student-learning-visual {
    position: relative;
    min-height: 240px;
}

.student-visual-card {
    position: absolute;
    inset: 22px 20px auto auto;
    width: 154px;
    height: 110px;
    border: 1px solid rgba(32,36,42,.14);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(47,123,112,.13);
}

.student-visual-card span {
    display: block;
    height: 10px;
    margin: 18px;
    border-radius: 999px;
    background: rgba(32,36,42,.14);
}

.student-visual-card strong {
    display: grid;
    width: 54px;
    height: 54px;
    margin: 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #20242a;
    color: #fff;
}

.student-visual-person {
    position: absolute;
    left: 24px;
    bottom: 10px;
    width: 118px;
    height: 154px;
    border-radius: 56px 56px 34px 34px;
    background: linear-gradient(180deg, #7bc0b4 0 38%, #20242a 38% 100%);
    box-shadow: 0 18px 36px rgba(32,36,42,.14);
}

.student-visual-person:before {
    content: "";
    position: absolute;
    top: -34px;
    left: 29px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f0c9a9;
    box-shadow: inset 0 -8px 0 rgba(32,36,42,.14);
}

.student-course-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.student-course-card {
    display: grid;
    gap: 10px;
    min-height: 178px;
    padding: 14px;
    border: 1px solid rgba(47,123,112,.13);
    border-radius: 10px;
    background: rgba(255,255,255,.86);
    color: inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

.student-course-card h3 {
    font-size: 16px;
}

.student-course-card p,
.student-course-card small {
    color: #667085;
    font-weight: 800;
}

.student-task-list {
    display: grid;
    gap: 10px;
}

.student-task-item,
.student-notice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(47,123,112,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.74);
}

.student-task-item strong,
.student-task-item span,
.student-notice strong,
.student-notice span {
    display: block;
}

.student-task-item span,
.student-notice span {
    margin-top: 4px;
    color: #667085;
    font-size: 12px;
}

.student-trend-bars {
    height: 240px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.student-trend-bars div {
    min-width: 0;
    display: grid;
    gap: 8px;
    text-align: center;
}

.student-trend-bars span {
    align-self: end;
    display: block;
    min-height: 12px;
    border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, #7bc0b4, #20242a);
}

.student-trend-bars strong {
    color: #181818;
    font-size: 12px;
}

.student-trend-bars small {
    overflow: hidden;
    color: #667085;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--bg);
}
.auth-card {
    width: min(460px, 100%);
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.92);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}
.auth-card h1 { font-size: 25px; margin-bottom: 8px; }
.auth-card p { color: var(--muted); margin-bottom: 18px; }

.toast {
    position: fixed;
    top: 28px;
    left: 50%;
    z-index: 60;
    width: max-content;
    max-width: min(460px, calc(100vw - 32px));
    display: none;
    transform: translateX(-50%) translateY(-8px);
    padding: 12px 18px;
    border: 1px solid rgba(32,36,42,.14);
    border-radius: 10px;
    background: rgba(255,255,255,.96);
    color: #263b37;
    box-shadow: 0 18px 44px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.82);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
}
.toast.show {
    display: block;
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.command-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.insight {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(135deg, #ffffff, #f8fbff);
    box-shadow: var(--shadow-soft);
}
.insight span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; }
.insight strong { display: block; margin-top: 8px; font-size: 20px; }

.action-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    display: inline-block;
    margin-right: 6px;
}

.empty-state {
    padding: 28px;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    background: var(--soft);
}

@media (max-width: 1080px) {
    body { overflow: auto; }
    .layout { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; grid-template-rows: auto auto; }
    .side-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .user-mini { display: none; }
    .metrics, .grid-2, .grid-3, .master-detail { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .main, .sidebar { padding: 14px; }
    .topbar, .top-actions, .toolbar { align-items: stretch; flex-direction: column; }
    .search { width: 100%; }
    .side-nav, .segmented, .form-grid, .data-row, .detail-item { grid-template-columns: 1fr; }
    .row-actions { justify-content: flex-start; }
}

/* Industrial authentication workspace */
body.auth-shell {
    min-height: 100vh;
    background:
        linear-gradient(115deg, rgba(14, 116, 144, .16), transparent 38%),
        linear-gradient(245deg, rgba(22, 163, 74, .12), transparent 36%),
        linear-gradient(180deg, #f7fafc 0%, #e8eef5 100%);
}

.industrial-auth {
    width: 100%;
    min-height: 100vh;
    grid-template-columns: minmax(360px, 1fr) minmax(360px, 520px);
    gap: 24px;
    align-items: stretch;
    padding: 32px;
}

.auth-hero-panel,
.industrial-card {
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.84);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.auth-hero-panel {
    min-height: 640px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 26px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(17,24,39,.90), rgba(21,94,117,.88)),
        linear-gradient(180deg, rgba(255,255,255,.10), transparent);
    color: #fff;
}

.auth-hero-panel.register-hero {
    background:
        linear-gradient(135deg, rgba(20,83,45,.90), rgba(21,94,117,.86)),
        linear-gradient(180deg, rgba(255,255,255,.10), transparent);
}

.auth-brand {
    width: max-content;
    color: #fff;
}

.auth-brand .brand-sub,
.auth-hero-copy p,
.workflow-step small {
    color: rgba(255,255,255,.72);
}

.auth-hero-copy {
    align-self: center;
    max-width: 640px;
}

.auth-hero-copy h1 {
    max-width: 12ch;
    margin-bottom: 16px;
    font-size: clamp(42px, 7vw, 84px);
    line-height: .96;
    letter-spacing: 0;
}

.auth-hero-copy p {
    max-width: 560px;
    font-size: 18px;
    line-height: 1.6;
}

.workflow-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.workflow-step {
    min-height: 118px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    background: rgba(255,255,255,.10);
}

.workflow-step.active {
    background: rgba(255,255,255,.18);
}

.workflow-step span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    font-size: 12px;
    font-weight: 900;
}

.workflow-step strong {
    font-size: 16px;
}

.industrial-card {
    width: 100%;
    align-self: center;
    padding: 26px;
}

.register-card {
    align-self: stretch;
    overflow: auto;
}

.auth-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.auth-card-head strong,
.auth-card-head span {
    display: block;
}

.auth-card-head strong {
    font-size: 22px;
}

.auth-card-head span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.auth-card-head .lang-switch {
    width: 112px;
    flex: 0 0 auto;
}

.auth-form {
    gap: 14px;
}

.auth-form label {
    font-size: 12px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.auth-form input,
.auth-form select {
    min-height: 46px;
}

.auth-submit {
    min-height: 48px;
    margin-top: 4px;
}

.auth-status {
    min-height: 42px;
    display: flex;
    align-items: center;
    margin-top: 16px;
    padding: 0 14px;
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 12px;
    background: rgba(255,255,255,.60);
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.auth-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 980px) {
    .industrial-auth {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .auth-hero-panel {
        min-height: 520px;
    }
}

/* Student homepage final visual pass: independent from legacy dashboard components. */
body.student-dashboard-body {
    color: #142320;
    background: #f4faf8;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Microsoft YaHei", sans-serif;
}

body.student-dashboard-body a {
    text-decoration: none;
}

.student-dashboard-shell {
    grid-template-columns: 252px minmax(0, 1fr);
}

.student-home-sidebar {
    padding: 34px 16px 22px;
    border-right: 1px solid #d8e7e3;
    background: linear-gradient(180deg, #f8fcfb 0%, #eef8f5 100%);
    box-shadow: none;
}

.student-home-brand {
    min-height: 54px;
    padding: 0 12px;
    color: #00736d;
}

.student-home-logo {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: #00877f;
    box-shadow: 0 10px 22px rgba(0,135,127,.18);
}

.student-home-nav {
    gap: 14px;
    padding-top: 22px;
}

.student-home-nav a {
    min-height: 52px;
    gap: 14px;
    padding: 0 20px;
    border-radius: 8px;
    color: #2c3f45;
    font-size: 17px;
    font-weight: 800;
}

.student-home-nav a.active {
    background: linear-gradient(180deg, #079a91, #00877f);
    color: #fff;
    box-shadow: 0 12px 24px rgba(0,135,127,.18);
}

.student-home-user {
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.student-dashboard-body .student-home {
    padding: 30px 32px 34px;
}

.student-home-top {
    min-height: 60px;
    align-items: center;
    margin-bottom: 28px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.student-home-top h1 {
    color: #111827;
    font-size: 30px;
    font-weight: 900;
}

.student-top-actions {
    gap: 26px;
}

.student-search {
    width: 392px;
    min-height: 52px;
    grid-template-columns: 24px minmax(0, 1fr);
    padding: 0 18px;
    border-color: #cfdde1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

.student-page-lang {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #41535a;
    font-weight: 800;
}

.student-page-lang button {
    border: 0;
    background: transparent;
    color: inherit;
    font-weight: 800;
}

.student-page-lang button.active {
    color: #00877f;
}

.student-avatar-link span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #dcefeb;
    color: #00736d;
    font-weight: 900;
    overflow: hidden;
}

.teacher-detail-inline-create {
    height: 38px;
    padding: 0 18px;
    border: 1px solid #111111;
    border-radius: 8px;
    background: #111111;
    color: #ffffff;
    font-weight: 850;
    cursor: pointer;
}

.teacher-detail-inline-create:hover {
    background: #2b2b2b;
}

.detail-quiz-basic-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
}

#detailQuizModal .teacher-detail-dialog-panel {
    width: min(720px, calc(100vw - 32px));
}

#detailQuizModal .teacher-detail-dialog-head {
    padding: 20px 20px 14px;
    background: linear-gradient(135deg, #ffffff, #f4faf8);
}

#detailQuizModal .teacher-detail-dialog-head span {
    color: #00877f;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.detail-quiz-basic-form label {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #edf0f4;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}

.detail-quiz-basic-form label span {
    color: #475467;
    font-size: 12px;
    font-weight: 900;
}

.detail-quiz-basic-form input,
.detail-quiz-basic-form select,
.detail-quiz-basic-form textarea {
    width: 100%;
    border: 1px solid #d8e1df;
    border-radius: 10px;
    background: #f8fbfa;
    color: #111827;
    font-weight: 800;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.detail-quiz-basic-form input,
.detail-quiz-basic-form select {
    height: 42px;
}

.detail-quiz-basic-form textarea {
    min-height: 108px;
    padding: 12px;
    resize: vertical;
}

.detail-quiz-basic-form input:focus,
.detail-quiz-basic-form select:focus,
.detail-quiz-basic-form textarea:focus {
    border-color: #00877f;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 135, 127, .12);
    outline: 0;
}

.detail-quiz-basic-form .full {
    grid-column: 1 / -1;
}

.detail-quiz-basic-form .teacher-detail-dialog-actions {
    padding-top: 2px;
}

.detail-quiz-basic-form .teacher-detail-dialog-actions button {
    min-width: 88px;
    height: 38px;
    border-radius: 10px;
}

.detail-quiz-basic-form #detailQuizModalSubmit {
    border-color: #20242a;
    background: #20242a;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(15, 23, 42, .12);
}

.detail-quiz-basic-form #detailQuizModalSubmit:hover {
    border-color: #111111;
    background: #111111;
}

.teacher-exam-edit-action {
    background: #111111;
    color: #ffffff;
}

 .teacher-exam-status-actions {
    display: inline-flex;
    align-items: center;
}

.teacher-exam-status-actions[hidden] {
    display: none;
}

.teacher-publish-switch {
    width: 96px;
    height: 36px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px 0 34px;
    border: 1px solid rgba(17, 17, 17, .16);
    border-radius: 999px;
    background: #e4e7ec;
    color: #475467;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, .14), 0 10px 22px rgba(15, 23, 42, .06);
    transition: border-color .22s ease, background .28s cubic-bezier(.22, 1, .36, 1), color .22s ease, box-shadow .22s ease, transform .22s ease, padding .28s cubic-bezier(.22, 1, .36, 1);
}

.teacher-publish-switch:hover {
    border-color: #111111;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, .14), 0 14px 28px rgba(15, 23, 42, .10);
    transform: translateY(-1px);
}

.teacher-publish-switch:disabled {
    cursor: progress;
    opacity: .76;
    transform: none;
}

.teacher-publish-switch-knob {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .18);
    transition: transform .32s cubic-bezier(.22, 1.2, .36, 1), box-shadow .28s ease;
}

.teacher-publish-switch.is-on {
    justify-content: flex-start;
    padding: 0 34px 0 10px;
    border-color: #111111;
    color: #ffffff;
    background: #111111;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22), 0 14px 28px rgba(15, 23, 42, .14);
}

.teacher-publish-switch.is-on .teacher-publish-switch-knob {
    transform: translateX(62px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .24);
}

.teacher-publish-switch-text {
    position: relative;
    z-index: 1;
    white-space: nowrap;
    transition: color .22s ease;
}

.teacher-question-preview-dialog {
    width: min(1040px, calc(100vw - 34px));
    max-width: 1040px;
}

.teacher-question-builder {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr);
    gap: 14px;
    align-items: start;
}

.teacher-question-builder[hidden],
.teacher-question-type-picker[hidden],
.teacher-question-type-page[hidden] {
    display: none;
}

.teacher-question-common-card,
.teacher-question-type-page,
.teacher-question-analysis-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(17, 17, 17, .12);
    border-radius: 8px;
    background: #ffffff;
}

.teacher-question-common-card {
    grid-row: span 2;
}

.teacher-question-common-card > div:first-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.teacher-question-common-card label,
.teacher-question-type-page label,
.teacher-question-analysis-card label {
    display: grid;
    gap: 7px;
}

.teacher-question-common-card label span,
.teacher-question-type-page label span,
.teacher-question-analysis-card label span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.teacher-question-common-card input,
.teacher-question-common-card textarea,
.teacher-question-type-page input,
.teacher-question-type-page select,
.teacher-question-type-page textarea,
.teacher-question-analysis-card textarea {
    width: 100%;
    border: 1px solid rgba(17, 17, 17, .14);
    border-radius: 8px;
    background: #f8faf9;
    color: #111111;
    font: inherit;
    outline: none;
    padding: 10px 11px;
}

.teacher-question-common-card textarea,
.teacher-question-analysis-card textarea,
.teacher-question-type-page textarea {
    min-height: 74px;
    resize: vertical;
}

.teacher-question-page-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 2px;
}

.teacher-question-page-head span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.teacher-question-page-head strong {
    color: #111111;
    font-size: 18px;
    font-weight: 950;
}

.teacher-question-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.teacher-question-checks,
.teacher-question-judge {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.teacher-question-checks label,
.teacher-question-judge label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(17, 17, 17, .14);
    border-radius: 8px;
    background: #f8faf9;
    color: #111111;
    font-weight: 850;
}

.teacher-question-type-picker {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 0 4px;
}

.teacher-question-type-title {
    grid-column: 1 / -1;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 6px;
}

.teacher-question-type-title span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.teacher-question-type-title strong {
    color: #111111;
    font-size: 20px;
    font-weight: 950;
}

.teacher-question-image-control button {
    height: 40px;
    border: 1px solid #111111;
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    font-weight: 850;
    cursor: pointer;
}

.teacher-question-type-picker button {
    min-height: 118px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(17, 17, 17, .14);
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    text-align: left;
    cursor: pointer;
}

.teacher-question-type-picker button strong {
    font-size: 18px;
    font-weight: 950;
}

.teacher-question-type-picker button span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.teacher-question-type-picker button:hover {
    border-color: #111111;
    background: #f6f8f7;
}

.teacher-question-image-control button:hover {
    background: #111111;
    color: #ffffff;
}

.teacher-question-preview-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 10px;
}

.teacher-question-preview-form[data-current-question-type="SINGLE_CHOICE"] {
    border-top: 4px solid #111111;
}

.teacher-question-preview-form[data-current-question-type="MULTIPLE_CHOICE"] {
    border-top: 4px solid #2f6f5e;
}

.teacher-question-preview-form[data-current-question-type="TRUE_FALSE"] {
    border-top: 4px solid #7b5b2e;
}

.teacher-question-preview-form[data-current-question-type="FILL_BLANK"] {
    border-top: 4px solid #385f8f;
}

.teacher-question-preview-form[data-current-question-type="SHORT_ANSWER"] {
    border-top: 4px solid #6a4a7a;
}

.teacher-question-preview-form .full {
    grid-column: 1 / -1;
}

.teacher-question-preview-form textarea {
    min-height: 96px;
    resize: vertical;
}

.teacher-question-image-control {
    display: grid;
    gap: 8px;
}

.teacher-question-image-actions,
.teacher-option-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.teacher-question-image-actions .ghost,
.teacher-option-tools .ghost {
    border-color: #d5dae1;
    background: #f6f8fa;
    color: #4d5662;
}

.teacher-question-image-actions .ghost:hover,
.teacher-option-tools .ghost:hover {
    border-color: #cb4040;
    background: #fff1f1;
    color: #8f1f1f;
}

.teacher-question-option-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
    padding: 9px;
    border: 1px solid rgba(17, 17, 17, .12);
    border-radius: 8px;
    background: #ffffff;
}

.teacher-question-option-card label {
    margin: 0;
}

.teacher-question-option-card button {
    height: 36px;
    padding: 0 12px;
    border: 1px solid #111111;
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    font-weight: 850;
    cursor: pointer;
}

.teacher-question-option-card button:hover {
    background: #111111;
    color: #ffffff;
}

.teacher-question-option-card small {
    color: var(--muted);
    font-size: 12px;
}

.teacher-question-image-control > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.teacher-question-image-control small {
    color: var(--muted);
    font-size: 12px;
}

.teacher-question-image-preview {
    width: min(280px, 100%);
    border: 1px solid rgba(17, 17, 17, .1);
    border-radius: 8px;
    background: #f7f8fa;
    overflow: hidden;
}

.teacher-question-image-preview img {
    width: 100%;
    max-height: 180px;
    display: block;
    object-fit: contain;
    background: #ffffff;
}

.teacher-question-image-preview.option-preview {
    width: 100%;
    margin-top: 2px;
}

.teacher-question-answer-preview {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid rgba(17, 17, 17, .12);
    border-radius: 8px;
    background: #f6f8f7;
}

.teacher-question-answer-preview strong {
    color: #111111;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.teacher-question-answer-preview span,
.teacher-question-answer-preview p {
    margin: 0;
    color: #26312f;
    font-size: 14px;
    line-height: 1.55;
}

@media (max-width: 820px) {
    .teacher-question-preview-dialog {
        width: min(96vw, 760px);
    }

    .teacher-question-builder {
        grid-template-columns: 1fr;
    }

    .teacher-question-common-card {
        grid-row: auto;
    }

    .teacher-question-option-grid {
        grid-template-columns: 1fr;
    }
}

.teacher-exam-edit-body .student-exam-actions {
    display: none;
}

[data-current-avatar].has-avatar-image {
    padding: 0;
    overflow: hidden;
}

[data-current-avatar].has-avatar-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.student-summary-grid {
    gap: 16px;
    margin-bottom: 22px;
}

.student-metric-card {
    min-height: 128px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    border-color: #d8e7e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15,23,42,.06);
}

.student-metric-card i {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ddf0ec;
    color: #00877f;
    font-style: normal;
    font-size: 24px;
}

.student-metric-card strong {
    margin: 8px 0 4px;
    font-size: 30px;
}

.student-dashboard-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr);
    gap: 18px;
    margin-bottom: 18px;
}

.student-content-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
    gap: 18px;
    margin-bottom: 18px;
}

.student-bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.student-card,
.student-continue-panel {
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15,23,42,.06);
}

.student-card {
    padding: 18px;
}

.student-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.student-card-head h2,
.student-continue-panel h2 {
    color: #101828;
    font-size: 19px;
    font-weight: 900;
}

.student-card-head a {
    color: #00877f;
    font-size: 13px;
    font-weight: 900;
}

.student-continue-panel {
    min-height: 314px;
    grid-template-columns: 315px minmax(0, 1fr);
    padding: 26px;
    background: #fff;
}

.student-learning-visual {
    order: -1;
    min-height: 220px;
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.08)),
        linear-gradient(135deg, #e8f5f2 0%, #dcefeb 100%);
    overflow: hidden;
}

.student-learning-visual:before {
    content: "";
    position: absolute;
    inset: auto 18px 16px;
    height: 54px;
    border-radius: 50%;
    background: rgba(32,36,42,.06);
}

.student-visual-card {
    display: block;
    top: 26px;
    right: 22px;
    width: 132px;
    height: 92px;
    border-color: rgba(47,123,112,.13);
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(32,36,42,.10);
}

.student-visual-card strong {
    width: 46px;
    height: 46px;
    background: #00877f;
}

.student-visual-person {
    display: block;
    left: 48px;
    bottom: 20px;
    width: 104px;
    height: 128px;
    border-radius: 52px 52px 30px 30px;
    background:
        linear-gradient(180deg, #1f2937 0 18%, transparent 18%),
        linear-gradient(180deg, #7bc0b4 0 42%, #00877f 42% 100%);
}

.student-visual-person:after {
    content: "";
    position: absolute;
    left: 72px;
    bottom: 28px;
    width: 76px;
    height: 44px;
    border: 3px solid rgba(0,135,127,.42);
    border-radius: 6px;
    background: rgba(255,255,255,.82);
}

.student-section-label {
    display: inline-flex;
    margin-bottom: 18px;
    color: #111827;
    font-size: 18px;
    font-weight: 900;
}

.student-panel-copy h2 {
    margin: 0 0 10px;
    font-size: 24px;
}

.student-muted {
    color: #667085;
    font-size: 14px;
    font-weight: 700;
}

.student-line-progress {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5ecea;
}

.student-line-progress span,
.student-line-progress b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #00877f;
}

.student-main-btn,
.student-ghost-btn {
    min-width: 142px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-weight: 900;
}

.student-main-btn {
    background: #00877f;
    color: #fff;
}

.student-ghost-btn {
    border: 1px solid #00877f;
    color: #00736d;
}

.student-course-grid {
    gap: 16px;
}

.student-course-card {
    min-height: 258px;
    gap: 8px;
    padding: 12px;
    border-color: #d8e7e3;
    border-radius: 8px;
    background: #fff;
}

.student-course-cover {
    height: 92px;
    margin: -1px -1px 4px;
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(0,135,127,.18), rgba(0,135,127,.05)),
        #e8f4f1;
}

.student-course-card > span {
    width: max-content;
    padding: 3px 8px;
    border-radius: 4px;
    background: #00877f;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.student-task-item,
.student-notice {
    min-height: 66px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    padding: 10px 12px;
    border-color: #e0e9e7;
    border-radius: 7px;
    background: #fff;
}

.student-task-item i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #ddf0ec;
    color: #00877f;
    font-style: normal;
}

.student-task-item a {
    color: #00877f;
    font-size: 12px;
    font-weight: 900;
}

.student-select {
    min-height: 34px;
    border: 1px solid #d8e7e3;
    border-radius: 6px;
    background: #fff;
    color: #667085;
    font-weight: 800;
}

.student-empty {
    padding: 18px;
    border-radius: 8px;
    background: #f6faf9;
    color: #667085;
    font-weight: 800;
    text-align: center;
}

/* Rebuilt student course page */
.student-course-page .student-home-top {
    margin-bottom: 26px;
}

.student-course-toolbar {
    display: grid;
    grid-template-columns: minmax(420px, max-content) minmax(320px, 1fr);
    gap: 22px;
    margin-bottom: 18px;
}

.student-course-tabs,
.student-category-filter {
    min-height: 56px;
    display: flex;
    align-items: center;
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15,23,42,.05);
}

.student-course-tabs {
    gap: 10px;
    padding: 8px 10px;
}

.student-course-tabs button {
    min-width: 104px;
    min-height: 40px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #667085;
    font-size: 15px;
    font-weight: 900;
}

.student-course-tabs button.active {
    background: #00877f;
    color: #fff;
    box-shadow: 0 10px 20px rgba(0,135,127,.18);
}

.student-category-filter {
    justify-content: flex-start;
    padding: 0 16px;
}

.student-category-filter select {
    min-width: 120px;
    height: 36px;
    border: 1px solid #d8e7e3;
    border-radius: 6px;
    background: #fff;
    color: #667085;
    font-weight: 800;
}

.student-course-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(380px, .75fr);
    gap: 18px;
    margin-bottom: 20px;
}

.student-featured-course {
    min-height: 270px;
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 22px;
    padding: 18px;
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15,23,42,.06);
}

.student-featured-copy {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 12px;
}

.student-featured-copy > div:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
}

.student-featured-copy h2 {
    font-size: 26px;
    font-weight: 900;
}

.student-featured-copy p,
.student-featured-copy small {
    color: #667085;
    font-weight: 800;
}

.student-featured-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 4px;
}

.student-plan-card {
    min-height: 270px;
}

.student-course-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.student-course-page-card {
    position: relative;
    min-height: 250px;
    display: grid;
    gap: 9px;
    padding: 14px;
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15,23,42,.05);
}

.student-status-tag {
    width: max-content;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid rgba(0,135,127,.22);
    background: #e6f5f2;
    color: #00877f;
    font-size: 12px;
    font-weight: 900;
}

.course-menu {
    position: absolute;
    top: 14px;
    right: 16px;
    color: #667085;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

.student-course-page-card h3 {
    color: #111827;
    font-size: 19px;
    font-weight: 900;
}

.student-course-page-card p,
.student-course-page-card small {
    color: #667085;
    font-weight: 800;
}

.student-course-progress-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 10px;
    align-items: center;
}

.student-course-progress-row strong {
    color: #667085;
    font-size: 13px;
}

.student-course-page-card .student-ghost-btn {
    justify-self: end;
    min-width: 112px;
    min-height: 38px;
}

.student-course-page-card .student-course-cover,
.student-featured-course .student-course-cover {
    min-height: 110px;
    margin: 0;
    border-radius: 6px;
}

.student-featured-course .student-course-cover {
    min-height: 230px;
}

.student-course-cover.cover-0 {
    background:
        linear-gradient(135deg, rgba(0,135,127,.14), rgba(255,255,255,.22)),
        repeating-linear-gradient(0deg, transparent 0 24px, rgba(0,135,127,.08) 25px 26px),
        #e8f4f1;
}

.student-course-cover.cover-1 {
    background:
        linear-gradient(135deg, rgba(0,135,127,.16), transparent),
        linear-gradient(45deg, transparent 35%, rgba(0,135,127,.18) 36% 42%, transparent 43%),
        #e9f5f2;
}

.student-course-cover.cover-2 {
    background:
        radial-gradient(circle at 70% 38%, rgba(0,135,127,.28) 0 18px, transparent 19px),
        linear-gradient(135deg, rgba(0,135,127,.13), rgba(255,255,255,.35)),
        #e8f4f1;
}

.student-course-cover.cover-3 {
    background:
        linear-gradient(135deg, rgba(0,70,76,.20), transparent),
        linear-gradient(0deg, rgba(0,135,127,.18) 0 34%, transparent 35%),
        #e8f4f1;
}

.student-course-cover.cover-4 {
    background:
        radial-gradient(circle at 70% 45%, rgba(0,135,127,.35) 0 34px, transparent 35px),
        linear-gradient(90deg, rgba(0,70,76,.18), transparent),
        #e6f2ef;
}

.student-course-cover.cover-5 {
    background:
        linear-gradient(135deg, rgba(0,135,127,.15), transparent),
        repeating-linear-gradient(90deg, rgba(0,135,127,.12) 0 12px, transparent 13px 28px),
        #edf7f5;
}

.student-task-item time {
    color: #f97316;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 700px) {
    .workflow-board {
        grid-template-columns: 1fr;
    }

    .auth-card-head {
        align-items: stretch;
        flex-direction: column;
    }

    .auth-card-head .lang-switch {
        width: 100%;
    }

    .auth-hero-copy h1 {
        font-size: 44px;
    }
}

/* Final enterprise cartoon auth pages */
body.auth-product-shell {
    min-height: 100vh;
    overflow: hidden;
    background: #f5f6f8;
}

body.auth-product-shell:before {
    display: none;
}

.auth-product-page {
    min-height: 100vh;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 60vw) minmax(420px, 1fr);
    background:
        linear-gradient(90deg, transparent 0%, transparent 50%, rgba(245,246,248,.18) 60%, rgba(245,246,248,.62) 72%, #f5f6f8 100%),
        #f5f6f8;
}

.auth-visual {
    min-height: 100vh;
    background-image: url("../images/auth/auth-learning-left.png");
    background-size: cover;
    background-position: center left;
    background-repeat: no-repeat;
}

.auth-visual:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 46%;
    width: 28%;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(245,246,248,0) 0%,
            rgba(245,246,248,.05) 26%,
            rgba(245,246,248,.32) 56%,
            rgba(245,246,248,.76) 82%,
            #f5f6f8 100%);
}

.auth-product-page:after {
    content: none;
}

.auth-lang-switch {
    position: absolute;
    top: 34px;
    right: 52px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #111827;
    font-size: 15px;
    font-weight: 800;
}

.auth-lang-switch button {
    border: 0;
    padding: 0;
    background: transparent;
    color: #111827;
    font-weight: 800;
    transition: color .16s ease;
}

.auth-lang-switch button.active {
    color: #20242a;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

.auth-lang-switch button:hover {
    color: #20242a;
}

.auth-form-zone {
    position: relative;
    z-index: 3;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 82px 52px 44px 28px;
    background: linear-gradient(90deg, rgba(245,246,248,0), rgba(245,246,248,.78) 30%, #f5f6f8 56%);
    overflow-y: auto;
}

.enterprise-auth-card {
    width: min(470px, 100%);
    padding: 38px 34px 32px;
    border: 1px solid rgba(32,36,42,.14);
    border-radius: 10px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 22px 48px rgba(32,36,42,.12), inset 0 1px 0 rgba(255,255,255,.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.register-enterprise-card {
    width: min(500px, 100%);
    padding-top: 32px;
    padding-bottom: 28px;
}

.auth-product-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    color: #20242a;
}

.auth-logo-mark {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(32,36,42,.14);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
        linear-gradient(180deg, #3a3f46 0%, #20242a 100%);
    color: #fff;
    box-shadow: 0 12px 24px rgba(20,28,40,.18), inset 0 1px 0 rgba(255,255,255,.28);
}

.auth-logo-mark svg {
    width: 34px;
    height: 34px;
    display: block;
}

.auth-logo-mark path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.auth-logo-mark .logo-cap {
    fill: rgba(255,255,255,.14);
}

.auth-product-brand strong {
    font-size: 23px;
    line-height: 1;
    letter-spacing: 0;
    font-weight: 900;
}

.enterprise-auth-card h1 {
    margin-bottom: 28px;
    text-align: center;
    color: #15181d;
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: 0;
}

.enterprise-auth-form {
    display: grid;
    gap: 16px;
}

.auth-inline-message {
    display: none;
    align-items: flex-start;
    gap: 10px;
    margin: -12px 0 18px;
    padding: 11px 13px;
    border: 1px solid rgba(32,36,42,.14);
    border-radius: 8px;
    background: rgba(32,36,42,.05);
    color: #181818;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
    box-shadow: inset 3px 0 0 #20242a;
}

.auth-inline-message:before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    margin-top: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(32,36,42,.10);
}

.auth-inline-message.show {
    display: flex;
}

.auth-inline-message.is-error {
    border-color: rgba(217,45,32,.18);
    background: rgba(217,45,32,.06);
    color: #b42318;
    box-shadow: inset 3px 0 0 #d92d20;
}

.auth-inline-message.is-success {
    border-color: rgba(32,36,42,.16);
    background: rgba(32,36,42,.06);
    color: #181818;
    box-shadow: inset 3px 0 0 #20242a;
}

.enterprise-auth-form label {
    display: grid;
    gap: 8px;
    color: #20242a;
    font-size: 14px;
    font-weight: 900;
}

.auth-input-wrap {
    min-height: 48px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    border: 1px solid rgba(32,36,42,.16);
    border-radius: 7px;
    background: rgba(255,255,255,.94);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.auth-input-wrap:focus-within {
    border-color: #20242a;
    box-shadow: 0 0 0 3px rgba(32,36,42,.12);
    transform: translateY(-1px);
}

.auth-input-wrap.is-invalid {
    border-color: #d92d20;
    box-shadow: 0 0 0 3px rgba(217,45,32,.10);
}

.auth-input-wrap.is-invalid .auth-input-icon {
    color: #d92d20;
}

.auth-input-icon {
    width: 19px;
    height: 19px;
    justify-self: center;
    color: #667085;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: color .16s ease, transform .16s ease;
}

.auth-input-wrap:focus-within .auth-input-icon {
    color: #20242a;
    transform: scale(1.04);
}

.auth-input-wrap input {
    width: 100%;
    min-width: 0;
    height: 46px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #15181d;
    font-size: 14px;
}

.auth-input-wrap input::placeholder {
    color: #98a2b3;
}

.auth-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
}

.auth-check {
    display: inline-flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 8px !important;
    color: #667085 !important;
    font-weight: 700 !important;
}

.auth-check input {
    width: 17px;
    height: 17px;
    accent-color: #20242a;
}

.auth-form-row a,
.auth-bottom-link a {
    color: #20242a;
    font-weight: 800;
    transition: color .16s ease, text-decoration-color .16s ease;
}

.auth-form-row a:hover,
.auth-bottom-link a:hover {
    color: #181818;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.auth-primary-btn {
    width: 100%;
    min-height: 52px;
    border: 1px solid #16a34a;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
        linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow: 0 14px 28px rgba(22,163,74,.24), inset 0 1px 0 rgba(255,255,255,.28);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease;
}

.auth-primary-btn:before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    transition: transform .42s ease;
}

.auth-primary-btn:hover {
    transform: translateY(-1px);
    border-color: #15803d;
    box-shadow: 0 17px 34px rgba(22,163,74,.30), inset 0 1px 0 rgba(255,255,255,.32);
    filter: brightness(1.02);
}

.auth-primary-btn:hover:before {
    transform: translateX(110%);
}

.auth-primary-btn:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(22,163,74,.22), inset 0 2px 6px rgba(0,0,0,.18);
}

.auth-primary-btn:focus-visible {
    outline: 3px solid rgba(22,163,74,.20);
    outline-offset: 3px;
}

.auth-primary-btn:disabled {
    opacity: .72;
    cursor: progress;
    transform: none;
}

.auth-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    margin: 24px 0 18px;
    color: #667085;
    font-weight: 800;
}

.auth-divider:before,
.auth-divider:after {
    content: "";
    height: 1px;
    background: rgba(32,36,42,.14);
}

.auth-bottom-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #667085;
    font-size: 15px;
    font-weight: 800;
}

.register-enterprise-card .auth-bottom-link {
    margin-top: 22px;
}

.register-vertical-form {
    gap: 12px;
}

.register-vertical-form .auth-input-wrap {
    min-height: 44px;
}

.register-vertical-form .auth-input-wrap input {
    height: 42px;
}

.role-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 36px;
    row-gap: 10px;
    margin: 0;
    padding: 1px 0 0;
    border: 0;
    overflow: visible;
}

.role-selector legend {
    margin-bottom: 0;
    color: #20242a;
    font-size: 14px;
    font-weight: 800;
}

.role-selector legend {
    width: 100%;
}

.role-selector label {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #667085;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none;
    transition: color .16s ease;
    overflow: visible;
}

.role-selector input {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0;
    appearance: auto;
    -webkit-appearance: radio;
    accent-color: #20242a;
}

.role-option-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    color: #667085;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: color .16s ease;
}

.role-selector label:hover {
    color: #20242a;
}

.role-selector label:focus-within {
    outline: 3px solid rgba(32,36,42,.14);
    outline-offset: 2px;
    border-radius: 6px;
}

.role-selector label:has(input:checked) {
    color: #181818;
}

.role-selector label:has(input:checked) .role-option-icon {
    color: #20242a;
}

@media (max-width: 980px) {
    .auth-product-page {
        grid-template-columns: 1fr;
    }

    .auth-visual {
        min-height: 300px;
        background-position: center;
    }

    .auth-visual:after {
        inset: 180px 0 auto;
        width: auto;
        height: 180px;
        background: linear-gradient(180deg, rgba(245,246,248,0), #f5f6f8 82%);
    }

    .auth-form-zone {
        min-height: auto;
        padding: 24px 18px 34px;
    }

    .auth-lang-switch {
        top: 18px;
        right: 18px;
        padding: 8px 10px;
        border-radius: 7px;
        background: rgba(255,255,255,.82);
    }
}

@media (max-width: 560px) {
    .enterprise-auth-card {
        padding: 28px 20px 24px;
    }

    .enterprise-auth-card h1 {
        font-size: 30px;
    }

    .auth-product-brand strong {
        font-size: 20px;
    }
}

/* Apple-style glass UI refresh */
:root {
    --bg: #eef3f8;
    --panel: rgba(255, 255, 255, .72);
    --soft: rgba(255, 255, 255, .48);
    --line: rgba(15, 23, 42, .10);
    --line-strong: rgba(15, 23, 42, .16);
    --text: #111827;
    --muted: #667085;
    --brand: #0a84ff;
    --brand-dark: #0066cc;
    --green: #2e9f6e;
    --amber: #b7791f;
    --red: #d92d20;
    --blue: #0a84ff;
    --violet: #6e56cf;
    --radius: 18px;
    --radius-sm: 12px;
    --glass: rgba(255, 255, 255, .64);
    --glass-strong: rgba(255, 255, 255, .82);
    --shadow: 0 28px 80px rgba(15, 23, 42, .14);
    --shadow-soft: 0 14px 40px rgba(15, 23, 42, .09);
}

body {
    background:
        linear-gradient(135deg, rgba(10, 132, 255, .16), transparent 32%),
        linear-gradient(225deg, rgba(46, 159, 110, .12), transparent 34%),
        linear-gradient(180deg, #fbfdff 0%, #edf3f8 54%, #e7eef6 100%);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Arial, "Microsoft YaHei", sans-serif;
    letter-spacing: 0;
}

body:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 75%);
}

.sidebar, .topbar, .panel, .metric, .row-card, .table-card, .question-card, .toolbar, .auth-card, .insight, .glass-card {
    border: 1px solid rgba(255,255,255,.72);
    background: var(--glass);
    box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.78);
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
}

.sidebar {
    padding: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.48));
    border-right-color: rgba(255,255,255,.78);
}

.brand {
    padding: 10px;
    border-radius: 20px;
}

.brand:hover {
    background: rgba(255,255,255,.54);
}

.brand-mark {
    border-radius: 14px;
    background: linear-gradient(145deg, #111827, #3b82f6);
    box-shadow: 0 14px 30px rgba(10, 132, 255, .24);
}

.side-nav a {
    min-height: 42px;
    position: relative;
    gap: 10px;
    padding: 0 12px 0 14px;
    border-radius: 14px;
    color: #344054;
    font-size: 13px;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease;
}

.side-nav a:before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(52,64,84,.25);
    box-shadow: 0 0 0 4px rgba(52,64,84,.05);
}

.side-nav a:hover, .side-nav a.active {
    background: rgba(255,255,255,.78);
    border-color: rgba(10,132,255,.22);
    color: #0b5cad;
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(10,132,255,.12), inset 0 1px 0 rgba(255,255,255,.72);
}

.side-nav a:hover:before, .side-nav a.active:before {
    background: #0a84ff;
    box-shadow: 0 0 0 4px rgba(10,132,255,.12);
}

.nav-section {
    margin: 14px 8px 4px;
    color: rgba(52,64,84,.58);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.nav-section:first-child {
    margin-top: 2px;
}

.user-mini, .lang-switch, .segmented {
    border-radius: 16px;
    border-color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.56);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.lang-switch button, .segmented button {
    border-radius: 12px;
}

.lang-switch button.active, .segmented button.active {
    background: #111827;
    box-shadow: 0 10px 22px rgba(17,24,39,.18);
}

.main {
    padding: 30px;
}

body.exam-lock .layout {
    display: block;
}

body.exam-lock .sidebar {
    display: none;
}

body.exam-lock .main {
    width: min(1480px, 100%);
    margin: 0 auto;
    padding: 24px;
}

body.exam-lock .exam-hero {
    top: 12px;
}

body.exam-lock .exam-status,
body.exam-lock .answer-dock {
    top: 116px;
}

.topbar {
    border-radius: 24px;
    padding: 22px 24px;
    margin-bottom: 22px;
}

.topbar h1 {
    font-size: 30px;
    letter-spacing: 0;
}

.eyebrow {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.panel, .metric, .row-card, .table-card, .question-card, .toolbar, .auth-card, .insight {
    border-radius: var(--radius);
}

.panel {
    padding: 20px;
}

.metric {
    min-height: 126px;
}

.metric:before {
    height: 100%;
    width: 4px;
    inset: 0 auto 0 0;
    background: linear-gradient(180deg, #0a84ff, #34c759);
}

.metric strong {
    font-size: 32px;
    letter-spacing: 0;
}

.search, .form-grid input, .form-grid select, .form-grid textarea {
    border-radius: 14px;
    border-color: rgba(15,23,42,.12);
    background: rgba(255,255,255,.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.primary, .secondary, .text-btn, .small-btn {
    border-radius: 999px;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    line-height: 1;
}

.primary {
    border-color: #111827;
    background: linear-gradient(180deg, #1f2937, #111827);
    box-shadow: 0 18px 36px rgba(17,24,39,.22), inset 0 1px 0 rgba(255,255,255,.18);
}

.secondary, .small-btn {
    background: rgba(255,255,255,.72);
    border-color: rgba(10,132,255,.20);
    color: #0b5cad;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.small-btn.primary-action {
    border-color: rgba(17,24,39,.9);
    background: linear-gradient(180deg, #1f2937, #111827);
    color: #fff;
    box-shadow: 0 12px 24px rgba(17,24,39,.16), inset 0 1px 0 rgba(255,255,255,.18);
}

.row-actions .small-btn {
    min-width: 74px;
}

.primary:hover, .secondary:hover, .small-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.75);
}

.data-row {
    min-height: 74px;
    border-color: rgba(15,23,42,.08);
}

.data-row:hover {
    background: rgba(255,255,255,.58);
}

.pill {
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid rgba(10,132,255,.14);
    background: rgba(10,132,255,.10);
}

.pill.green { background: rgba(52,199,89,.13); color: #1f7a4d; border-color: rgba(52,199,89,.18); }
.pill.amber { background: rgba(255,204,0,.18); color: #8a5a00; border-color: rgba(255,204,0,.22); }
.pill.red { background: rgba(255,59,48,.12); color: #b42318; border-color: rgba(255,59,48,.18); }

.empty-state {
    border-radius: var(--radius);
    background: rgba(255,255,255,.54);
    border-color: rgba(15,23,42,.14);
}

/* Modern quiz workspace */
.exam-main {
    padding-bottom: 48px;
}

.exam-hero {
    position: sticky;
    top: 18px;
    z-index: 8;
}

.exam-actions {
    flex-wrap: wrap;
}

.exam-timer {
    min-width: 96px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.78);
    background: rgba(17,24,39,.88);
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 18px 40px rgba(17,24,39,.22), inset 0 1px 0 rgba(255,255,255,.18);
}

.auto-save-status {
    min-width: 86px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.exam-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
}

.exam-content {
    min-width: 0;
    display: grid;
    gap: 16px;
}

.exam-status {
    position: sticky;
    top: 112px;
    z-index: 6;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 20px;
}

.exam-status strong {
    display: block;
    margin-top: 4px;
    font-size: 22px;
}

.exam-progress {
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(15,23,42,.08);
    box-shadow: inset 0 1px 2px rgba(15,23,42,.08);
}

.exam-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0a84ff, #34c759);
    transition: width .22s ease;
}

.exam-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.legend-dot {
    width: 8px;
    height: 8px;
    display: inline-block;
    margin-right: 6px;
    border-radius: 50%;
    background: rgba(15,23,42,.22);
}

.legend-dot.answered { background: #34c759; }
.legend-dot.current { background: #0a84ff; }
.legend-dot.flagged { background: #ff9f0a; }

.exam-question-list {
    display: grid;
    gap: 18px;
}

.exam-question {
    scroll-margin-top: 190px;
    padding: 24px;
    border-radius: 24px;
}

.exam-question.flagged {
    border-color: rgba(255,159,10,.45);
    box-shadow: 0 18px 44px rgba(255,159,10,.12), inset 0 1px 0 rgba(255,255,255,.78);
}

.question-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.question-index {
    display: inline-flex;
    margin-bottom: 8px;
    color: #0b5cad;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.exam-question h2 {
    font-size: 21px;
    line-height: 1.42;
    letter-spacing: 0;
}

.question-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.question-meta span {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(15,23,42,.06);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.exam-options {
    gap: 10px;
}

.exam-options label {
    position: relative;
    grid-template-columns: auto auto minmax(0, 1fr);
    min-height: 56px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.58);
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.exam-options label:hover {
    transform: translateY(-1px);
    border-color: rgba(10,132,255,.28);
    background: rgba(255,255,255,.84);
    box-shadow: 0 14px 30px rgba(15,23,42,.08);
}

.exam-options label:has(input:checked) {
    border-color: rgba(10,132,255,.48);
    background: rgba(10,132,255,.10);
    box-shadow: 0 16px 34px rgba(10,132,255,.12), inset 0 1px 0 rgba(255,255,255,.82);
}

.exam-options input {
    width: 18px;
    height: 18px;
    accent-color: #0a84ff;
}

.option-key {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(10,132,255,.10);
    color: #0b5cad;
    font-weight: 900;
}

.exam-question textarea {
    width: 100%;
    min-height: 118px;
    resize: vertical;
    padding: 14px;
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 18px;
    background: rgba(255,255,255,.62);
    outline: 0;
}

.exam-question textarea:focus {
    border-color: rgba(10,132,255,.45);
    box-shadow: 0 0 0 4px rgba(10,132,255,.12);
}

.answer-dock {
    position: sticky;
    top: 112px;
    padding: 18px;
    border-radius: 24px;
}

.answer-dock-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.answer-dock-head h2 {
    font-size: 18px;
}

.answer-dock-head p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.answer-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.answer-metrics div {
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.58);
    border: 1px solid rgba(255,255,255,.72);
}

.answer-metrics span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.answer-metrics strong {
    display: block;
    margin-top: 6px;
    font-size: 18px;
}

.answer-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin: 14px 0 16px;
}

.answer-chip {
    position: relative;
    aspect-ratio: 1;
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 14px;
    background: rgba(255,255,255,.62);
    color: #475467;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
    transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.answer-chip:hover {
    transform: translateY(-1px);
}

.answer-chip.answered {
    background: rgba(52,199,89,.14);
    border-color: rgba(52,199,89,.34);
    color: #1f7a4d;
}

.answer-chip.current {
    background: #0a84ff;
    border-color: #0a84ff;
    color: #fff;
    box-shadow: 0 12px 26px rgba(10,132,255,.28);
}

.answer-chip.flagged {
    border-color: rgba(255,159,10,.58);
}

.answer-chip.flagged:after {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff9f0a;
}

.answer-dock-footer {
    display: grid;
    gap: 10px;
}

.answer-dock-footer .secondary {
    width: 100%;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1180px) {
    .exam-shell { grid-template-columns: 1fr; }
    .answer-dock { position: static; }
    .answer-grid { grid-template-columns: repeat(8, minmax(40px, 1fr)); }
}

@media (max-width: 700px) {
    .main { padding: 16px; }
    .topbar { border-radius: 20px; }
    .exam-hero, .exam-status { position: static; }
    .exam-status { grid-template-columns: 1fr; }
    .question-top { grid-template-columns: 1fr; }
    .answer-grid { grid-template-columns: repeat(5, minmax(40px, 1fr)); }
    .exam-question { padding: 18px; }
}

/* Keep final auth pages independent from the global glass theme above. */
body.auth-product-shell {
    background: #f5f6f8;
}

body.auth-product-shell .auth-card.enterprise-auth-card {
    border: 1px solid rgba(32,36,42,.14);
    border-radius: 10px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 22px 48px rgba(32,36,42,.12), inset 0 1px 0 rgba(255,255,255,.82);
}

body.auth-product-shell .auth-product-brand {
    border-radius: 0;
    padding: 0;
}

body.auth-product-shell .auth-logo-mark {
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
        linear-gradient(180deg, #3a3f46 0%, #20242a 100%);
    box-shadow: 0 12px 24px rgba(20,28,40,.18), inset 0 1px 0 rgba(255,255,255,.28);
}

body.auth-product-shell .auth-primary-btn {
    border-radius: 8px;
}

/* Fully rebuilt student homepage */
body.student-dashboard-body {
    min-height: 100vh;
    overflow-x: hidden;
    background: #f5f6f8;
}

body.student-dashboard-body:before {
    display: none;
}

.student-dashboard-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 246px minmax(0, 1fr);
    background: #f5f6f8;
}

.student-home-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 24px;
    padding: 26px 18px;
    border-right: 1px solid rgba(32,36,42,.12);
    background: rgba(255,255,255,.74);
    box-shadow: 14px 0 38px rgba(32,36,42,.05);
}

.student-home-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #181818;
}

.student-home-logo {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(180deg, #3a3f46, #20242a);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(20,28,40,.18);
}

.student-home-brand strong {
    font-size: 17px;
    line-height: 1.2;
}

.student-home-nav {
    display: grid;
    align-content: start;
    gap: 8px;
}

.student-home-nav a {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    border-radius: 8px;
    color: #667085;
    font-size: 14px;
    font-weight: 850;
}

.student-home-nav a:hover,
.student-home-nav a.active {
    background: rgba(32,36,42,.10);
    color: #181818;
}

.student-home-user {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(47,123,112,.13);
    border-radius: 10px;
    background: rgba(255,255,255,.82);
}

.student-home-user > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #20242a;
    color: #fff;
    font-weight: 900;
}

.student-home-user strong,
.student-home-user small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-home-user small {
    color: #667085;
    font-weight: 800;
}

body.student-dashboard-body .student-home {
    min-width: 0;
    padding: 28px;
    background: #f5f6f8;
}

body.student-dashboard-body .primary,
body.student-dashboard-body .secondary,
body.student-dashboard-body .small-btn,
body.student-dashboard-body .text-btn {
    border-radius: 8px;
}

body.student-dashboard-body .primary {
    border-color: #20242a;
    background: linear-gradient(180deg, #3a3f46, #20242a);
    box-shadow: 0 14px 28px rgba(32,36,42,.16);
}

body.student-dashboard-body .secondary,
body.student-dashboard-body .small-btn {
    border-color: rgba(32,36,42,.14);
    color: #181818;
}

body.student-dashboard-body .panel {
    border: 1px solid rgba(47,123,112,.13);
    border-radius: 10px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 16px 38px rgba(47,123,112,.09);
}

body.student-dashboard-body .bar {
    background: rgba(47,123,112,.12);
}

body.student-dashboard-body .bar span {
    background: #20242a;
}

@media (max-width: 1080px) {
    .student-dashboard-shell {
        grid-template-columns: 1fr;
    }

    .student-home-sidebar {
        position: static;
        height: auto;
    }

    .student-dashboard-grid,
    .student-content-grid,
    .student-bottom-grid,
    .student-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* Final course page override: keep the rebuilt course page independent from old table/list pages. */
body.student-dashboard-body .student-course-page {
    padding: 28px 30px 34px;
    background: #f5f6f8;
}

body.student-dashboard-body .student-course-page .student-home-top {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.student-dashboard-body .student-course-page .student-home-top h1 {
    color: #1f3430;
    font-size: 32px;
    font-weight: 900;
}

body.student-dashboard-body .student-course-page .student-search {
    width: 360px;
    min-height: 44px;
    border-color: #d8e7e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

body.student-dashboard-body .student-course-toolbar {
    display: grid;
    grid-template-columns: minmax(460px, max-content) minmax(240px, 1fr);
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
}

body.student-dashboard-body .student-course-tabs,
body.student-dashboard-body .student-category-filter {
    min-height: 56px;
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15,23,42,.05);
}

body.student-dashboard-body .student-course-tabs {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
}

body.student-dashboard-body .student-course-tabs button {
    min-width: 104px;
    min-height: 40px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #667085;
    font-size: 15px;
    font-weight: 900;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

body.student-dashboard-body .student-course-tabs button:hover {
    background: #eef7f5;
    color: #006c66;
}

body.student-dashboard-body .student-course-tabs button.active {
    background: #00877f;
    color: #fff;
    box-shadow: 0 10px 20px rgba(0,135,127,.18);
}

body.student-dashboard-body .student-category-filter {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 16px;
}

body.student-dashboard-body .student-category-filter select {
    width: 168px;
    height: 38px;
    border: 1px solid #d8e7e3;
    border-radius: 6px;
    background: #fff;
    color: #667085;
    font-weight: 850;
}

body.student-dashboard-body .student-course-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(360px, .75fr);
    gap: 18px;
    margin-bottom: 20px;
}

body.student-dashboard-body .student-featured-course,
body.student-dashboard-body .student-plan-card,
body.student-dashboard-body .student-course-page-card {
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15,23,42,.055);
}

body.student-dashboard-body .student-featured-course {
    min-height: 270px;
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 22px;
    padding: 18px;
}

body.student-dashboard-body .student-featured-copy {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 12px;
}

body.student-dashboard-body .student-featured-copy h2 {
    color: #111827;
    font-size: 26px;
    font-weight: 900;
}

body.student-dashboard-body .student-featured-copy p,
body.student-dashboard-body .student-featured-copy small,
body.student-dashboard-body .student-course-page-card p,
body.student-dashboard-body .student-course-page-card small {
    color: #667085;
    font-weight: 800;
}

body.student-dashboard-body .student-course-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

body.student-dashboard-body .student-course-page-card {
    position: relative;
    min-height: 250px;
    display: grid;
    gap: 9px;
    padding: 14px;
}

body.student-dashboard-body .student-course-page-card h3 {
    color: #111827;
    font-size: 19px;
    font-weight: 900;
}

body.student-dashboard-body .student-status-tag {
    width: max-content;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid rgba(0,135,127,.22);
    background: #e6f5f2;
    color: #00877f;
    font-size: 12px;
    font-weight: 900;
}

body.student-dashboard-body .student-course-page-card .student-ghost-btn,
body.student-dashboard-body .student-featured-actions .student-ghost-btn,
body.student-dashboard-body .student-featured-actions .student-main-btn {
    border-radius: 7px;
    font-weight: 900;
}

body.student-dashboard-body .student-course-page-card .student-ghost-btn {
    justify-self: end;
    min-width: 112px;
    min-height: 38px;
}

body.student-dashboard-body .student-course-join-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
    padding: 22px;
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .055);
}

body.student-dashboard-body .student-course-join-panel span,
body.student-dashboard-body .student-course-section-head span {
    color: #00877f;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.student-dashboard-body .student-course-join-panel h2,
body.student-dashboard-body .student-course-section-head h2 {
    margin-top: 6px;
    color: #111827;
    font-size: 24px;
    font-weight: 950;
}

body.student-dashboard-body .student-course-join-panel p {
    margin-top: 7px;
    color: #667085;
    font-weight: 800;
}

body.student-dashboard-body .student-course-join-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 10px;
}

body.student-dashboard-body .student-course-join-form input {
    min-width: 0;
    height: 48px;
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: #f8fbfa;
    color: #111827;
    font-size: 15px;
    font-weight: 850;
    padding: 0 14px;
    outline: 0;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

body.student-dashboard-body .student-course-join-form input:focus {
    border-color: #00877f;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 135, 127, .10);
}

body.student-dashboard-body .student-course-join-form button {
    height: 48px;
    border: 0;
    border-radius: 8px;
    background: #111827;
    color: #ffffff;
    font-size: 15px;
    font-weight: 950;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

body.student-dashboard-body .student-course-join-form button:hover {
    background: #00877f;
    box-shadow: 0 12px 22px rgba(0, 135, 127, .18);
    transform: translateY(-1px);
}

body.student-dashboard-body .student-course-filter-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 18px;
}

body.student-dashboard-body .student-course-filter-row .student-category-filter {
    width: 240px;
}

body.student-dashboard-body .student-course-section {
    margin-top: 22px;
}

body.student-dashboard-body .student-course-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

body.student-dashboard-body .student-course-section-head strong {
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: #ffffff;
    color: #00877f;
    font-size: 18px;
    font-weight: 950;
}

body.student-dashboard-body .student-course-page-grid .student-empty {
    grid-column: 1 / -1;
}

@media (max-width: 1180px) {
    body.student-dashboard-body .student-course-hero-grid,
    body.student-dashboard-body .student-course-page-grid {
        grid-template-columns: 1fr;
    }

    body.student-dashboard-body .student-course-join-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body.student-dashboard-body .student-course-page .student-home-top,
    body.student-dashboard-body .student-course-toolbar,
    body.student-dashboard-body .student-featured-course {
        grid-template-columns: 1fr;
    }

    body.student-dashboard-body .student-course-page .student-home-top {
        align-items: stretch;
        flex-direction: column;
    }

    body.student-dashboard-body .student-course-tabs {
        flex-wrap: wrap;
    }

    body.student-dashboard-body .student-course-page .student-search {
        width: 100%;
    }

    body.student-dashboard-body .student-course-join-form {
        grid-template-columns: 1fr;
    }

    body.student-dashboard-body .student-course-filter-row,
    body.student-dashboard-body .student-course-filter-row .student-category-filter {
        width: 100%;
    }
}

/* Final course detail page: matches the student course detail prototype. */
body.student-dashboard-body .student-course-detail-page {
    padding: 28px 30px 34px;
    background: #f5f6f8;
}

body.student-dashboard-body .student-course-detail-page .student-home-top {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.student-dashboard-body .student-course-detail-page .student-home-top h1 {
    margin: 0;
    color: #1f3430;
    font-size: 32px;
    font-weight: 900;
}

.student-course-crumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    color: #667085;
    font-size: 13px;
    font-weight: 850;
}

.student-course-crumb a {
    color: #667085;
}

.student-course-crumb strong {
    max-width: 360px;
    overflow: hidden;
    color: #667085;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.student-dashboard-body .student-course-detail-page .student-search {
    width: 340px;
    min-height: 44px;
    border-color: #d8e7e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

.student-course-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 344px;
    gap: 18px;
}

.student-course-detail-left,
.student-course-detail-right {
    display: grid;
    gap: 18px;
    align-content: start;
}

.student-course-detail-hero {
    min-height: 300px;
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 24px;
    padding: 18px;
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15,23,42,.055);
}

.student-detail-cover {
    position: relative;
    min-height: 264px;
    overflow: hidden;
    border-radius: 7px;
    background:
        radial-gradient(circle at 76% 28%, rgba(0,135,127,.28) 0 38px, transparent 39px),
        linear-gradient(135deg, rgba(0,135,127,.13), rgba(255,255,255,.35)),
        repeating-linear-gradient(0deg, transparent 0 26px, rgba(0,135,127,.08) 27px 28px),
        #e8f4f1;
}

.student-detail-cover:before {
    content: "";
    position: absolute;
    left: 42px;
    bottom: 36px;
    width: 132px;
    height: 86px;
    border: 3px solid #00877f;
    border-radius: 8px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 16px 30px rgba(0,135,127,.12);
}

.student-detail-cover:after {
    content: "";
    position: absolute;
    right: 44px;
    bottom: 36px;
    width: 86px;
    height: 126px;
    border-radius: 46px 46px 28px 28px;
    background: linear-gradient(180deg, #95d4ca 0 38%, #00877f 38% 100%);
    box-shadow: 0 18px 36px rgba(0,135,127,.18);
}

.student-detail-cover span {
    position: absolute;
    left: 40px;
    top: 34px;
    z-index: 1;
    padding: 8px 11px;
    border: 1px solid rgba(0,135,127,.20);
    border-radius: 6px;
    background: rgba(255,255,255,.82);
    color: #00736d;
    font-size: 12px;
    font-weight: 900;
}

.student-course-detail-copy {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 14px;
}

.student-detail-title-line {
    display: flex;
    align-items: center;
    gap: 12px;
}

.student-detail-title-line h2 {
    margin: 0;
    color: #111827;
    font-size: 30px;
    font-weight: 900;
}

.student-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #667085;
    font-size: 14px;
    font-weight: 850;
}

.student-course-detail-copy p {
    margin: 0;
    color: #667085;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.75;
}

.student-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 4px;
}

.student-detail-actions .student-main-btn,
.student-detail-actions .student-ghost-btn {
    min-width: 126px;
    min-height: 42px;
    border-radius: 7px;
    font-weight: 900;
}

.student-detail-section {
    padding: 18px;
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15,23,42,.05);
}

.student-detail-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.student-detail-tabs button {
    min-width: 92px;
    min-height: 36px;
    border: 0;
    border-radius: 7px;
    background: #eef7f5;
    color: #667085;
    font-weight: 900;
}

.student-detail-tabs button.active {
    background: #00877f;
    color: #fff;
}

.student-detail-list,
.student-side-list,
.student-timeline-list {
    display: grid;
    gap: 10px;
}

.student-chapter-item,
.student-material-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 12px;
    border: 1px solid #e0e9e7;
    border-radius: 7px;
    background: #fff;
    color: inherit;
}

.student-chapter-item i,
.student-material-item i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #ddf0ec;
    color: #00877f;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.student-chapter-item strong,
.student-material-item strong {
    display: block;
    overflow: hidden;
    color: #111827;
    font-size: 15px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-chapter-item span,
.student-material-item span {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-chapter-item em {
    color: #98a9a5;
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
}

.student-chapter-item em.done,
.student-material-item b {
    color: #00877f;
}

.student-material-item b {
    font-size: 12px;
}

.student-teacher-card {
    padding: 16px;
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15,23,42,.05);
}

.student-teacher-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.student-teacher-avatar {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #20242a;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
}

.student-teacher-row h2 {
    margin: 0;
    color: #111827;
    font-size: 18px;
    font-weight: 900;
}

.student-teacher-row p {
    margin: 4px 0 0;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.student-detail-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.student-detail-stats article {
    min-height: 66px;
    display: grid;
    place-items: center;
    border: 1px solid #e0e9e7;
    border-radius: 7px;
    background: #f8fbfa;
}

.student-detail-stats strong,
.student-detail-stats span {
    display: block;
}

.student-detail-stats strong {
    color: #111827;
    font-size: 20px;
    font-weight: 900;
}

.student-detail-stats span {
    color: #667085;
    font-size: 12px;
    font-weight: 850;
}

.student-timeline-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.student-timeline-item > span {
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 50%;
    background: #00877f;
}

.student-timeline-item strong {
    color: #111827;
    font-size: 14px;
    font-weight: 900;
}

.student-timeline-item p {
    margin: 4px 0 0;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

@media (max-width: 1180px) {
    .student-course-detail-layout,
    .student-course-detail-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body.student-dashboard-body .student-course-detail-page .student-home-top {
        align-items: stretch;
        flex-direction: column;
    }

    body.student-dashboard-body .student-course-detail-page .student-search {
        width: 100%;
    }

    .student-detail-tabs {
        flex-wrap: wrap;
    }
}

/* Student quiz page: use the same top-navigation shell as the current student pages. */
body.student-quiz-body .student-dashboard-shell {
    display: block;
    background: transparent;
}

body.student-quiz-body .student-quiz-page {
    min-height: 100vh;
    padding: calc(var(--student-home-marquee-height) + var(--student-home-nav-height) + 32px) clamp(28px, 3.2vw, 52px) 52px;
    background: #f4f4f4;
}

body.student-quiz-body .student-quiz-toolbar {
    margin-bottom: 20px;
}

body.student-quiz-body .student-quiz-toolbar.compact {
    grid-template-columns: minmax(220px, 320px);
}

body.student-quiz-body .student-quiz-filter {
    min-height: 42px;
    padding: 0 12px;
    border-color: #d4d4d4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

body.student-quiz-body .student-quiz-filter select {
    width: 100%;
    height: 34px;
    border: 0;
    background: transparent;
    color: #242424;
    font-size: 13px;
    font-weight: 850;
    outline: 0;
}

body.student-quiz-body .student-quiz-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.student-quiz-body .student-quiz-stats article {
    min-height: 86px;
    place-items: start;
    align-content: center;
    gap: 6px;
    padding: 16px;
    border-color: #d4d4d4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

body.student-quiz-body .student-quiz-stats strong {
    color: #111111;
    font-size: clamp(24px, 2.2vw, 34px);
    font-weight: 950;
    line-height: 1;
}

body.student-quiz-body .student-quiz-stats span {
    color: #60646c;
    font-size: 12px;
    font-weight: 850;
}

body.student-quiz-body .student-quiz-section {
    gap: 16px;
    margin-bottom: 30px;
}

body.student-quiz-body .student-quiz-section-head span {
    color: #7a7f87;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: none;
}

body.student-quiz-body .student-quiz-section-head h2 {
    color: #111111;
    font-size: clamp(22px, 2.2vw, 32px);
    font-weight: 950;
}

body.student-quiz-body .student-quiz-section-head small {
    min-width: 42px;
    height: 30px;
    border-color: #d4d4d4;
    background: #ffffff;
    color: #111111;
    box-shadow: none;
}

body.student-quiz-body .student-quiz-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

body.student-quiz-body .student-quiz-card {
    min-height: 0;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 16px;
    overflow: visible;
    border-color: #d8d8d8;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.student-quiz-body .student-quiz-card:hover {
    border-color: #bdbdbd;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .08);
    transform: translateY(-2px);
}

body.student-quiz-body .student-quiz-paper-mark {
    position: relative;
    width: 58px;
    min-height: 76px;
    align-self: stretch;
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    background:
        linear-gradient(90deg, transparent 0 18px, rgba(17, 17, 17, .05) 19px 20px, transparent 21px),
        repeating-linear-gradient(180deg, transparent 0 18px, rgba(17, 17, 17, .08) 19px 20px),
        #fbfbfb;
}

body.student-quiz-body .student-quiz-paper-mark:before {
    content: "";
    position: absolute;
    top: 9px;
    right: 9px;
    width: 14px;
    height: 14px;
    border-top: 1px solid #d7d7d7;
    border-right: 1px solid #d7d7d7;
    border-radius: 0 6px 0 0;
    background: linear-gradient(135deg, #eeeeee 0 50%, transparent 51%);
}

body.student-quiz-body .student-quiz-paper-mark span,
body.student-quiz-body .student-quiz-paper-mark i,
body.student-quiz-body .student-quiz-paper-mark b {
    position: absolute;
    left: 12px;
    right: 12px;
    height: 5px;
    border-radius: 999px;
    background: #111111;
}

body.student-quiz-body .student-quiz-paper-mark span {
    top: 28px;
}

body.student-quiz-body .student-quiz-paper-mark i {
    top: 42px;
    right: 20px;
}

body.student-quiz-body .student-quiz-paper-mark b {
    top: 56px;
    right: 28px;
}

body.student-quiz-body .student-quiz-card h3 {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    max-height: 24px;
    color: #111111;
    font-size: 18px;
    font-weight: 950;
    line-height: 1.25;
    -webkit-line-clamp: 1;
}

body.student-quiz-body .student-quiz-card-body {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .42fr) auto;
    align-items: center;
    gap: 16px;
    padding: 0;
}

body.student-quiz-body .student-quiz-card-main {
    min-width: 0;
    display: grid;
    gap: 6px;
}

body.student-quiz-body .student-quiz-card-top {
    min-width: 0;
    align-items: flex-start;
}

body.student-quiz-body .student-quiz-card-top small {
    min-width: 0;
    overflow: hidden;
    color: #7a7f87;
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.student-quiz-body .student-quiz-card-body > small {
    min-height: 0;
    display: -webkit-box;
    overflow: hidden;
    color: #60646c;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

body.student-quiz-body .student-quiz-card-main > small {
    min-height: 0;
    display: -webkit-box;
    overflow: hidden;
    color: #60646c;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

body.student-quiz-body .student-quiz-card-meta {
    min-width: 0;
    display: grid;
    gap: 5px;
}

body.student-quiz-body .student-quiz-card-meta span {
    min-width: 0;
    overflow: hidden;
    color: #555b63;
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.student-quiz-body .student-quiz-card-action {
    display: flex;
    justify-content: flex-end;
}

body.student-quiz-body .student-mini-btn {
    min-width: 82px;
    min-height: 32px;
    border-color: #111111;
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    font-size: 13px;
    font-weight: 900;
}

body.student-quiz-body .student-mini-btn.primary {
    background: #111111;
    color: #ffffff;
}

body.student-quiz-body .student-mini-btn:hover {
    background: #111111;
    color: #ffffff;
}

body.student-quiz-body .student-mini-btn.primary:hover {
    background: #ffffff;
    color: #111111;
}

body.student-quiz-body .student-mini-btn.disabled {
    border-color: #d7d7d7;
    background: #f1f1f1;
    color: #858585;
}

body.teacher-quiz-body .teacher-quiz-page {
    background: #f4f4f4;
}

body.teacher-quiz-body .teacher-quiz-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 18px;
}

body.teacher-quiz-body .teacher-quiz-create-button,
body.teacher-quiz-body .teacher-question-primary,
body.teacher-quiz-body .teacher-question-add {
    display: inline-grid;
    place-items: center;
    min-height: 38px;
    border: 1px solid #111111;
    border-radius: 8px;
    background: #111111;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

body.teacher-quiz-body .teacher-quiz-create-button {
    min-width: 108px;
    padding: 0 18px;
}

body.teacher-quiz-body .teacher-quiz-create-button:hover,
body.teacher-quiz-body .teacher-question-primary:hover,
body.teacher-quiz-body .teacher-question-add:hover {
    background: #ffffff;
    color: #111111;
    transform: translateY(-1px);
}

body.teacher-quiz-body .teacher-quiz-stats {
    margin-bottom: 30px;
}

body.teacher-quiz-body .teacher-quiz-card .student-quiz-card-body {
    grid-template-columns: minmax(0, 1fr) minmax(160px, .28fr) auto;
}

body.teacher-quiz-body .teacher-quiz-card-actions {
    gap: 8px;
    align-items: center;
}

body.teacher-quiz-body .student-mini-btn.danger {
    border-color: #d8d8d8;
    background: #ffffff;
    color: #b42318;
}

body.teacher-quiz-body .student-mini-btn.danger:hover {
    border-color: #b42318;
    background: #fff4f3;
    color: #b42318;
}

body.teacher-quiz-body .teacher-quiz-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    padding: clamp(14px, 2vw, 26px);
}

body.teacher-quiz-body .teacher-quiz-modal.open {
    display: grid;
    place-items: center;
}

body.teacher-quiz-body .teacher-quiz-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(17, 17, 17, .38);
}

body.teacher-quiz-body .teacher-quiz-editor {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100vw - 28px));
    max-height: calc(100vh - 34px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 28px 70px rgba(15, 23, 42, .22);
}

body.teacher-quiz-body .teacher-quiz-editor-head {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    border-bottom: 1px solid #e5e5e5;
    background: #ffffff;
}

body.teacher-quiz-body .teacher-quiz-editor-head span,
body.teacher-quiz-body .teacher-question-bank-head span {
    color: #7a7f87;
    font-size: 12px;
    font-weight: 850;
}

body.teacher-quiz-body .teacher-quiz-editor-head h2 {
    margin: 3px 0 0;
    color: #111111;
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 950;
    line-height: 1.1;
}

body.teacher-quiz-body .teacher-quiz-close {
    width: 38px;
    height: 38px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    font-size: 24px;
    line-height: 1;
}

body.teacher-quiz-body .teacher-quiz-editor-body {
    min-height: 0;
    display: grid;
    gap: 14px;
    overflow: auto;
    padding: 18px 22px 22px;
    background: #f7f7f7;
}

body.teacher-quiz-body .teacher-quiz-basic-panel,
body.teacher-quiz-body .teacher-question-bank,
body.teacher-quiz-body .teacher-question-editor-panel {
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

body.teacher-quiz-body .teacher-quiz-basic-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
}

body.teacher-quiz-body .teacher-quiz-field-grid,
body.teacher-quiz-body .teacher-question-grid,
body.teacher-quiz-body .teacher-question-options {
    display: grid;
    gap: 10px;
}

body.teacher-quiz-body .teacher-quiz-field-grid {
    grid-template-columns: 1.35fr .7fr .65fr .65fr .9fr .9fr;
}

body.teacher-quiz-body .teacher-question-grid {
    grid-template-columns: 120px 1fr 1.35fr;
}

body.teacher-quiz-body .teacher-question-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.teacher-quiz-body .teacher-quiz-basic-panel input,
body.teacher-quiz-body .teacher-quiz-basic-panel textarea,
body.teacher-quiz-body .teacher-question-editor-panel input,
body.teacher-quiz-body .teacher-question-editor-panel textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    font-size: 13px;
    font-weight: 800;
    outline: 0;
    padding: 0 12px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

body.teacher-quiz-body .teacher-quiz-basic-panel textarea,
body.teacher-quiz-body .teacher-question-editor-panel textarea {
    min-height: 74px;
    resize: vertical;
    padding: 11px 12px;
    line-height: 1.5;
}

body.teacher-quiz-body .teacher-question-editor-panel .teacher-question-text {
    min-height: 120px;
}

body.teacher-quiz-body .teacher-quiz-basic-panel input:focus,
body.teacher-quiz-body .teacher-quiz-basic-panel textarea:focus,
body.teacher-quiz-body .teacher-question-editor-panel input:focus,
body.teacher-quiz-body .teacher-question-editor-panel textarea:focus {
    border-color: #111111;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, .07);
}

body.teacher-quiz-body .teacher-quiz-basic-panel ::placeholder,
body.teacher-quiz-body .teacher-question-editor-panel ::placeholder {
    color: #a1a1aa;
    font-weight: 750;
}

body.teacher-quiz-body .teacher-quiz-status-group,
body.teacher-quiz-body .teacher-question-type-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.teacher-quiz-body .teacher-quiz-status-group button,
body.teacher-quiz-body .teacher-question-type-row button,
body.teacher-quiz-body .teacher-question-secondary {
    min-height: 36px;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    background: #ffffff;
    color: #555b63;
    font-size: 13px;
    font-weight: 900;
    padding: 0 14px;
}

body.teacher-quiz-body .teacher-quiz-status-group button.active,
body.teacher-quiz-body .teacher-question-type-row button.active {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
}

body.teacher-quiz-body .teacher-question-shell {
    min-height: 520px;
    display: grid;
    grid-template-columns: minmax(240px, .33fr) minmax(0, 1fr);
    gap: 14px;
}

body.teacher-quiz-body .teacher-question-bank {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

body.teacher-quiz-body .teacher-question-bank-head {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #e5e5e5;
}

body.teacher-quiz-body .teacher-question-bank-head strong {
    display: block;
    margin-top: 2px;
    color: #111111;
    font-size: 17px;
    font-weight: 950;
}

body.teacher-quiz-body .teacher-question-add {
    min-width: 66px;
    min-height: 34px;
}

body.teacher-quiz-body .teacher-question-list {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 8px;
    overflow: auto;
    padding: 12px;
}

body.teacher-quiz-body .teacher-question-item {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    border: 1px solid #dedede;
    border-radius: 8px;
    background: #ffffff;
    padding: 9px;
    text-align: left;
}

body.teacher-quiz-body .teacher-question-item.active {
    border-color: #111111;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, .06);
}

body.teacher-quiz-body .teacher-question-item strong {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #f1f1f1;
    color: #111111;
    font-size: 13px;
    font-weight: 950;
}

body.teacher-quiz-body .teacher-question-item span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

body.teacher-quiz-body .teacher-question-item b,
body.teacher-quiz-body .teacher-question-item i {
    color: #111111;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

body.teacher-quiz-body .teacher-question-item em {
    min-width: 0;
    overflow: hidden;
    color: #667085;
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.teacher-quiz-body .teacher-question-editor-panel {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 14px;
}

body.teacher-quiz-body .teacher-question-options.hidden {
    display: none;
}

body.teacher-quiz-editor-body .teacher-quiz-editor-page {
    display: grid;
    gap: 16px;
}

body.teacher-quiz-editor-body .teacher-quiz-editor-page-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 2px;
}

body.teacher-quiz-editor-body .teacher-editor-back {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
}

body.teacher-quiz-editor-body .teacher-quiz-editor-page-head span {
    color: #7a7f87;
    font-size: 12px;
    font-weight: 850;
}

body.teacher-quiz-editor-body .teacher-quiz-editor-page-head h2 {
    margin: 3px 0 0;
    color: #111111;
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 950;
    line-height: 1.1;
}

body.teacher-quiz-editor-body .teacher-quiz-editor-page-grid {
    display: grid;
    gap: 14px;
}

body.teacher-quiz-editor-body .teacher-editor-info-panel,
body.teacher-quiz-editor-body .teacher-editor-question-shell {
    box-shadow: none;
}

body.teacher-quiz-editor-body .teacher-editor-question-shell {
    min-height: calc(100vh - var(--student-home-marquee-height) - var(--student-home-nav-height) - 250px);
}

body.teacher-quiz-editor-body .teacher-editor-question-panel {
    min-height: 620px;
}

body.teacher-quiz-editor-body .teacher-question-image-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

body.teacher-quiz-editor-body .teacher-image-upload {
    min-height: 36px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #111111;
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    font-size: 13px;
    font-weight: 900;
    padding: 0 14px;
    cursor: pointer;
}

body.teacher-quiz-editor-body .teacher-image-upload input {
    display: none;
}

body.teacher-quiz-editor-body .teacher-question-image-row span {
    color: #7a7f87;
    font-size: 12px;
    font-weight: 800;
}

body.teacher-quiz-editor-body .teacher-question-preview {
    min-height: 0;
    margin: 0;
}

body.teacher-quiz-editor-body .teacher-question-preview:empty {
    display: none;
}

body.teacher-quiz-editor-body .teacher-question-preview img {
    width: min(420px, 100%);
    max-height: 220px;
    display: block;
    object-fit: cover;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    background: #f4f4f4;
}

body.teacher-quiz-body .teacher-question-editor-actions,
body.teacher-quiz-body .teacher-quiz-editor-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

body.teacher-quiz-body .teacher-quiz-editor-foot {
    position: sticky;
    bottom: -22px;
    margin: 0 -22px -22px;
    padding: 14px 22px;
    border-top: 1px solid #e5e5e5;
    background: #ffffff;
}

@media (max-width: 1060px) {
    body.teacher-quiz-body .teacher-quiz-field-grid,
    body.teacher-quiz-body .teacher-question-shell {
        grid-template-columns: 1fr;
    }

    body.teacher-quiz-body .teacher-quiz-card .student-quiz-card-body {
        grid-template-columns: 1fr;
        align-items: start;
    }

    body.teacher-quiz-body .teacher-quiz-card-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    body.teacher-quiz-body .teacher-question-grid,
    body.teacher-quiz-body .teacher-question-options {
        grid-template-columns: 1fr;
    }

    body.teacher-quiz-body .teacher-quiz-editor {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
    }

    body.teacher-quiz-body .teacher-quiz-editor-body {
        padding: 12px;
    }
}

.student-quiz-toolbar {
    display: grid;
    grid-template-columns: minmax(520px, max-content) minmax(220px, 1fr);
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
}

.student-quiz-toolbar.compact {
    grid-template-columns: minmax(220px, max-content);
    justify-content: end;
}

.student-quiz-tabs,
.student-quiz-filter {
    min-height: 56px;
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15,23,42,.05);
}

.student-quiz-tabs {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
}

.student-quiz-tabs button {
    min-width: 104px;
    min-height: 40px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #667085;
    font-size: 15px;
    font-weight: 900;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.student-quiz-tabs button:hover {
    background: #eef7f5;
    color: #006c66;
}

.student-quiz-tabs button.active {
    background: #00877f;
    color: #fff;
    box-shadow: 0 10px 20px rgba(0,135,127,.18);
}

.student-quiz-filter {
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.student-quiz-filter select {
    width: 168px;
    height: 38px;
    border: 1px solid #d8e7e3;
    border-radius: 6px;
    background: #fff;
    color: #667085;
    font-weight: 850;
}

.student-quiz-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 344px;
    gap: 18px;
}

.student-quiz-overview-strip {
    margin-bottom: 18px;
}

.student-quiz-section {
    display: grid;
    gap: 14px;
    margin-bottom: 22px;
}

.student-quiz-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.student-quiz-section-head span {
    color: #667085;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.student-quiz-section-head h2 {
    margin: 4px 0 0;
    color: #1f3430;
    font-size: 24px;
    font-weight: 950;
}

.student-quiz-section-head small {
    min-width: 42px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid #d8e7e3;
    border-radius: 999px;
    background: #ffffff;
    color: #00877f;
    font-weight: 950;
}

.student-quiz-left,
.student-quiz-right {
    display: grid;
    gap: 18px;
    align-content: start;
}

.student-quiz-hero,
.student-quiz-side-card,
.student-quiz-card {
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15,23,42,.055);
}

.student-quiz-hero {
    min-height: 270px;
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 24px;
    padding: 18px;
}

.student-quiz-visual {
    position: relative;
    min-height: 234px;
    overflow: hidden;
    border-radius: 7px;
    background:
        radial-gradient(circle at 74% 28%, rgba(0,135,127,.28) 0 38px, transparent 39px),
        linear-gradient(135deg, rgba(0,135,127,.13), rgba(255,255,255,.35)),
        repeating-linear-gradient(0deg, transparent 0 25px, rgba(0,135,127,.08) 26px 27px),
        #e8f4f1;
}

.student-quiz-visual:before {
    content: "";
    position: absolute;
    left: 34px;
    top: 58px;
    width: 148px;
    height: 112px;
    border: 3px solid #00877f;
    border-radius: 10px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 16px 30px rgba(0,135,127,.12);
}

.student-quiz-visual:after {
    content: "A+";
    position: absolute;
    right: 42px;
    bottom: 40px;
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #00877f;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    box-shadow: 0 18px 36px rgba(0,135,127,.18);
}

.student-quiz-visual span {
    position: absolute;
    left: 42px;
    top: 34px;
    z-index: 1;
    padding: 8px 11px;
    border: 1px solid rgba(0,135,127,.20);
    border-radius: 6px;
    background: rgba(255,255,255,.82);
    color: #00736d;
    font-size: 12px;
    font-weight: 900;
}

.student-quiz-hero-copy {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 14px;
}

.student-quiz-hero-copy p {
    margin: 0;
    color: #667085;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.75;
}

.student-quiz-countdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.student-quiz-countdown article {
    min-height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid #e0e9e7;
    border-radius: 7px;
    background: #f8fbfa;
}

.student-quiz-countdown strong,
.student-quiz-countdown span {
    display: block;
}

.student-quiz-countdown strong {
    color: #111827;
    font-size: 19px;
    font-weight: 900;
}

.student-quiz-countdown span {
    color: #667085;
    font-size: 12px;
    font-weight: 850;
}

.student-quiz-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.student-quiz-card {
    min-height: 212px;
    display: grid;
    gap: 10px;
    padding: 16px;
}

.student-quiz-card-top,
.student-quiz-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.student-quiz-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #ddf0ec;
    color: #00877f;
    font-weight: 900;
}

.student-quiz-card h3 {
    margin: 0;
    color: #111827;
    font-size: 19px;
    font-weight: 900;
}

.student-quiz-card p,
.student-quiz-card small,
.student-quiz-card-foot span {
    margin: 0;
    color: #667085;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

.student-mini-btn {
    min-width: 96px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #00877f;
    border-radius: 7px;
    background: #fff;
    color: #00736d;
    font-size: 13px;
    font-weight: 900;
}

.student-mini-btn.primary {
    background: #00877f;
    color: #fff;
}

.student-mini-btn.disabled {
    border-color: #e1e3e7;
    background: #f4f5f7;
    color: #8a9099;
    cursor: not-allowed;
    pointer-events: none;
}

.student-quiz-side-card {
    padding: 16px;
}

.student-quiz-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.student-quiz-stats article {
    min-height: 82px;
    display: grid;
    place-items: center;
    border: 1px solid #e0e9e7;
    border-radius: 7px;
    background: #f8fbfa;
}

.student-quiz-stats strong,
.student-quiz-stats span {
    display: block;
}

.student-quiz-stats strong {
    color: #111827;
    font-size: 24px;
    font-weight: 900;
}

.student-quiz-stats span {
    color: #667085;
    font-size: 12px;
    font-weight: 850;
}

.student-quiz-task-list,
.student-quiz-timeline {
    display: grid;
    gap: 10px;
}

.student-quiz-task {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 10px 12px;
    border: 1px solid #e0e9e7;
    border-radius: 7px;
    background: #fff;
}

.student-quiz-task i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #ddf0ec;
    color: #00877f;
    font-style: normal;
    font-weight: 900;
}

.student-quiz-task strong,
.student-quiz-trend strong {
    display: block;
    overflow: hidden;
    color: #111827;
    font-size: 14px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-quiz-task span,
.student-quiz-trend p {
    display: block;
    margin: 4px 0 0;
    overflow: hidden;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-quiz-task b {
    color: #f97316;
    font-size: 12px;
}

.student-quiz-trend {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.student-quiz-trend > span {
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 50%;
    background: #00877f;
}

@media (max-width: 1180px) {
    .student-quiz-layout,
    .student-quiz-hero,
    .student-quiz-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body.student-quiz-body .student-quiz-page {
        padding-top: calc(var(--student-home-marquee-height) + var(--student-home-nav-height) + 20px);
        padding-left: 20px;
        padding-right: 20px;
    }

    body.student-quiz-body .student-quiz-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.student-quiz-body .student-quiz-card {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 14px;
        padding: 14px;
    }

    body.student-quiz-body .student-quiz-paper-mark {
        width: 54px;
        min-height: 72px;
    }

    body.student-quiz-body .student-quiz-card-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    body.student-quiz-body .student-quiz-card-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.student-quiz-body .student-quiz-card-action {
        justify-content: flex-start;
    }

    .student-quiz-toolbar {
        grid-template-columns: 1fr;
    }

    .student-quiz-tabs {
        flex-wrap: wrap;
    }
}

/* Final full-screen student exam page. */
body.student-exam-body {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: #eef5f3;
    color: #172621;
}

body.student-exam-body:before {
    display: none;
}

.student-exam-shell {
    min-height: 100vh;
    display: grid;
    grid-template-rows: 72px minmax(0, 1fr);
}

.student-exam-topbar {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr) 420px;
    align-items: center;
    gap: 18px;
    padding: 0 28px;
    border-bottom: 1px solid #cfdfdb;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15,23,42,.055);
}

.student-exam-brand {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    color: #181818;
}

.student-exam-brand > span {
    grid-row: span 2;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #1f7a70;
    color: #fff;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(31,122,112,.20);
}

.student-exam-brand strong,
.student-exam-brand small {
    display: block;
}

.student-exam-brand strong {
    overflow: hidden;
    color: #172621;
    font-size: 16px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-exam-brand small {
    margin-top: 2px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.student-exam-title {
    min-width: 0;
    text-align: center;
}

.student-exam-title h1 {
    margin: 0;
    overflow: hidden;
    color: #111827;
    font-size: 21px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-exam-title p {
    margin: 4px 0 0;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.student-exam-top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.student-exam-pill,
.student-exam-exit {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 900;
}

.student-exam-pill {
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #d8e7e3;
    background: #f8fbfa;
    color: #667085;
}

.student-exam-pill strong {
    color: #006f67;
}

.student-exam-exit {
    justify-content: center;
    min-width: 92px;
    border: 1px solid #e8c4a8;
    background: #fffaf6;
    color: #d45b07;
}

.student-exam-body-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 332px;
    gap: 18px;
    padding: 20px 26px 24px;
}

.student-exam-main {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 16px;
}

.student-exam-summary,
.student-exam-question-panel,
.student-exam-dock,
.student-exam-notice {
    border: 1px solid #d5e3df;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(15,23,42,.045);
}

.student-exam-summary {
    display: grid;
    grid-template-columns: 1.35fr repeat(4, minmax(0, .7fr));
    gap: 10px;
    padding: 12px;
}

.student-exam-summary article {
    min-height: 64px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 10px 12px;
    border: 1px solid #e0e9e7;
    border-radius: 7px;
    background: #f9fcfb;
}

.student-exam-summary span {
    color: #667085;
    font-size: 12px;
    font-weight: 850;
}

.student-exam-summary strong {
    overflow: hidden;
    color: #111827;
    font-size: 18px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-exam-question-panel {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    padding: 24px;
}

.student-exam-question-stage {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.student-exam-question-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e1ebe8;
}

.student-exam-question-label {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    width: max-content;
    padding: 0 10px;
    border: 1px solid rgba(31,122,112,.24);
    border-radius: 5px;
    background: #eaf6f3;
    color: #006f67;
    font-size: 13px;
    font-weight: 900;
}

.student-exam-question-head h2 {
    max-width: 850px;
    margin: 14px 0 0;
    color: #111827;
    font-size: 25px;
    line-height: 1.48;
    font-weight: 900;
}

.student-exam-question-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    color: #667085;
    font-size: 13px;
    font-weight: 850;
}

.student-exam-mark {
    min-width: 92px;
    height: 38px;
    border: 1px solid #d8e7e3;
    border-radius: 7px;
    background: #fff;
    color: #667085;
    font-weight: 900;
}

.student-exam-mark.active {
    border-color: #e8c4a8;
    background: #fffaf6;
    color: #d45b07;
}

.student-exam-question-content {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 13px;
    padding: 20px 0;
    overflow: hidden;
}

.student-exam-options {
    display: grid;
    gap: 13px;
}

.student-exam-option {
    min-height: 68px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 12px 15px;
    border: 1px solid #e0e9e7;
    border-radius: 8px;
    background: #fff;
    color: #667085;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.student-exam-option:has(input:checked) {
    border-color: rgba(31,122,112,.38);
    background: #edf8f5;
    color: #172621;
    box-shadow: inset 0 0 0 1px rgba(31,122,112,.13);
}

.student-exam-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.student-exam-option-key {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #ddf0ec;
    color: #006f67;
    font-weight: 900;
}

.student-exam-question-content textarea {
    width: 100%;
    height: 118px;
    padding: 14px;
    border: 1px dashed #cddeda;
    border-radius: 8px;
    background: #fbfdfc;
    color: #172621;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.7;
    resize: none;
}

.student-exam-question-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid #e1ebe8;
}

.student-exam-btn {
    min-width: 116px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px solid #1f7a70;
    background: #fff;
    color: #006f67;
    font-weight: 900;
}

.student-exam-btn.primary {
    background: #1f7a70;
    color: #fff;
    box-shadow: 0 12px 22px rgba(31,122,112,.20);
}

.student-exam-btn.neutral {
    border-color: #d8e7e3;
    color: #667085;
}

.student-exam-btn.warn {
    border-color: #e8c4a8;
    color: #d45b07;
}

.student-exam-btn:disabled {
    opacity: .46;
    cursor: not-allowed;
}

.student-exam-dock {
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: 14px;
    padding: 16px;
}

.student-exam-timer {
    min-height: 108px;
    display: grid;
    place-items: center;
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: linear-gradient(180deg, #fbfdfc, #f5faf8);
    text-align: center;
}

.student-exam-timer strong {
    display: block;
    color: #111827;
    font-size: 38px;
    font-weight: 900;
    line-height: 1;
}

.student-exam-timer span {
    display: block;
    margin-top: 8px;
    color: #667085;
    font-size: 12px;
    font-weight: 850;
}

.student-exam-progress-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #667085;
    font-size: 13px;
    font-weight: 900;
}

.student-exam-progress {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(31,122,112,.12);
}

.student-exam-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #1f7a70;
}

.student-exam-notice {
    display: grid;
    gap: 8px;
    padding: 12px;
    background: #fbfdfc;
}

.student-exam-notice strong {
    color: #111827;
    font-size: 14px;
    font-weight: 900;
}

.student-exam-notice span {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.55;
}

.student-exam-actions {
    display: grid;
    gap: 10px;
}

.student-exam-actions .student-exam-btn {
    width: 100%;
}

.student-exam-empty {
    place-self: center;
    max-width: 460px;
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
}

.student-exam-empty[hidden],
.student-exam-question-stage[hidden] {
    display: none !important;
}

.student-exam-empty strong {
    color: #111827;
    font-size: 22px;
}

.student-exam-empty p {
    margin: 0;
    color: #667085;
    font-weight: 800;
    line-height: 1.6;
}

/* Quiz attempt page, paper-style layout aligned with the current course detail UI. */
body.student-exam-body {
    overflow: hidden;
    background: #ece7e1;
    color: #2c2035;
}

.student-exam-shell {
    max-width: 1420px;
    margin: 0 auto;
    padding: 16px 18px 18px;
    grid-template-rows: 54px minmax(0, 1fr);
}

.student-exam-topbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 54px;
    gap: 18px;
    padding: 0 20px;
    border: 0;
    border-radius: 9px 9px 0 0;
    background: #242326;
    box-shadow: none;
}

.student-exam-brand {
    color: #ffffff;
}

.student-exam-brand > span {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f5f5f7;
    color: #242326;
    font-size: 13px;
    box-shadow: none;
}

.student-exam-brand strong {
    color: #ffffff;
    font-size: 14px;
}

.student-exam-brand small,
.student-exam-title p,
.student-exam-pill {
    display: none;
}

.student-exam-title {
    text-align: left;
}

.student-exam-title h1 {
    color: #ffffff;
    font-size: 15px;
}

.student-exam-top-actions {
    gap: 8px;
}

.student-exam-exit {
    min-width: 86px;
    min-height: 34px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

.student-exam-body-grid {
    grid-template-columns: minmax(0, 1fr) 268px;
    gap: 16px;
    padding: 0;
}

.student-exam-main {
    gap: 0;
}

.student-exam-summary {
    display: none;
}

.student-exam-question-panel {
    height: calc(100vh - 88px);
    min-height: calc(100vh - 88px);
    padding: 26px 22px 22px;
    border: 0;
    border-radius: 0 0 8px 8px;
    background: #fbf9f7;
    box-shadow: 0 20px 44px rgba(41, 36, 31, .12);
}

.student-exam-question-stage {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
    padding: 0;
}

.student-exam-paper {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 22px;
    overflow: auto;
    padding: 0 4px 18px;
    scroll-padding-top: 14px;
}

.student-exam-paper-section {
    width: 100%;
    max-width: 1080px;
    display: grid;
    gap: 14px;
    margin: 0 auto;
}

.student-exam-paper-section > h2 {
    margin: 0;
    color: #3b2a44;
    font-size: 18px;
    font-weight: 900;
}

.student-exam-question-card {
    display: grid;
    gap: 16px;
    padding: 20px;
    border: 1px solid #ebe3df;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(41, 36, 31, .06);
    scroll-margin-top: 14px;
}

.student-exam-question-card.current {
    border-color: #3a234a;
    box-shadow: 0 14px 30px rgba(58, 35, 74, .12);
}

.student-exam-question-head {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0 0 20px;
    border-bottom: 0;
}

.student-exam-question-head,
.student-exam-question-content,
.student-exam-question-foot {
    width: 100%;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

.student-exam-question-label {
    min-height: 26px;
    padding: 0 11px;
    border: 0;
    border-radius: 999px;
    background: #2b2b30;
    color: #ffffff;
    font-size: 12px;
}

.student-exam-question-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.student-exam-question-tags .student-review-topic {
    margin-left: 0;
}

.student-exam-question-title {
    max-width: none;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    color: #2d2138;
    font-family: "Times New Roman", "Songti SC", "SimSun", serif;
    font-size: 20px;
    line-height: 1.5;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.student-exam-question-title > div {
    min-width: min(100%, 360px);
    flex: 1 1 420px;
}

.student-exam-question-no,
.student-exam-question-title em {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-style: normal;
    line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.student-exam-question-no {
    min-width: 28px;
    padding: 0 9px;
    background: #242326;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
}

.student-exam-question-title em {
    padding: 0 10px;
    border: 1px solid #eadfda;
    background: #fbf7f4;
    color: #6b6073;
    font-size: 12px;
    font-weight: 900;
}

.student-rich-text {
    display: grid;
    gap: 10px;
    min-width: 0;
    font-family: "Times New Roman", "Songti SC", "SimSun", serif;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.student-rich-text p,
.student-rich-text ul,
.student-rich-text ol,
.student-rich-text h1,
.student-rich-text h2,
.student-rich-text h3,
.student-rich-text h4,
.student-rich-text h5,
.student-rich-text h6 {
    margin: 0;
}

.student-rich-text ul,
.student-rich-text ol {
    padding-left: 20px;
}

.student-rich-text li + li {
    margin-top: 5px;
}

.student-rich-text h1,
.student-rich-text h2,
.student-rich-text h3,
.student-rich-text h4,
.student-rich-text h5,
.student-rich-text h6 {
    color: #2d2138;
    font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 1.04em;
    font-weight: 900;
    line-height: 1.45;
}

.student-rich-text code,
.student-rich-text kbd {
    padding: 2px 6px;
    border: 1px solid #e6ded8;
    border-radius: 5px;
    background: #fbf7f4;
    color: #51335f;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .92em;
}

.student-rich-text pre {
    margin: 0;
    overflow: auto;
    padding: 12px;
    border: 1px solid #e6ded8;
    border-radius: 8px;
    background: #fbf7f4;
}

.student-rich-text pre code {
    padding: 0;
    border: 0;
    background: transparent;
}

.student-rich-text table {
    width: min(560px, 100%);
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 8px;
    font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
}

.student-rich-text th,
.student-rich-text td {
    padding: 8px 10px;
    border: 1px solid #e6ded8;
    background: #fffdfb;
    text-align: left;
}

.student-rich-text th,
.student-rich-text tr:first-child td {
    background: #f5efea;
    font-weight: 900;
}

.student-rich-math {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0 2px;
    color: inherit;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 650;
    white-space: normal;
}

.student-rich-math.block {
    width: fit-content;
    margin: 4px 0;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 1.05em;
}

.student-rich-text .katex {
    max-width: 100%;
    font-size: 1.03em;
}

.student-rich-text .katex-display {
    max-width: 100%;
    margin: 6px 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0;
}

.student-rich-text .katex-display > .katex {
    display: inline-block;
    min-width: max-content;
}

.student-rich-math-error {
    color: #9d2d2d;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .92em;
}

.student-math-frac {
    display: inline-grid;
    grid-template-rows: auto auto;
    align-items: center;
    margin: 0 3px;
    text-align: center;
    line-height: 1.1;
}

.student-math-frac span:first-child {
    padding: 0 4px 2px;
    border-bottom: 1px solid currentColor;
}

.student-math-frac span:last-child {
    padding-top: 2px;
}

.student-math-root {
    display: inline-flex;
    align-items: flex-start;
    gap: 2px;
}

.student-math-root span {
    padding: 0 3px;
    border-top: 1px solid currentColor;
}

.student-rich-inline-image {
    width: min(520px, 100%);
    display: block;
    margin-top: 10px;
    border: 1px solid #e7dfda;
    border-radius: 8px;
    background: #ffffff;
}

.student-exam-question-meta {
    color: #756b7d;
    font-size: 13px;
}

.student-exam-question-media {
    width: min(560px, 100%);
    margin: 16px 0 0;
    overflow: hidden;
    border: 1px solid #e7dfda;
    border-radius: 8px;
    background: #ffffff;
}

.student-exam-question-media img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.student-exam-mark {
    min-width: 88px;
    height: 32px;
    border-color: #3a234a;
    border-radius: 999px;
    background: #ffffff;
    color: #3a234a;
    font-size: 12px;
}

.student-review-body .student-exam-question-panel {
    min-height: 0;
}

.student-review-score strong {
    color: #24172d;
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1;
    letter-spacing: 0;
}

.student-review-score span {
    margin-top: 6px;
    color: #5f5367;
    font-size: 13px;
    font-weight: 900;
}

.student-review-legend {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #ebe3df;
    border-radius: 8px;
    background: #fffdfb;
    color: #6f6475;
    font-size: 12px;
    font-weight: 800;
}

.student-review-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.student-review-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.student-review-legend i.correct {
    background: #2f7d55;
}

.student-review-legend i.partial {
    background: #c79528;
}

.student-review-legend i.wrong {
    background: #c75656;
}

.student-review-card.correct {
    border-color: rgba(47, 125, 85, .34);
}

.student-review-card.partial {
    border-color: rgba(199, 149, 40, .42);
}

.student-review-card.wrong {
    border-color: rgba(199, 86, 86, .34);
}

.student-review-result-pill {
    min-width: 76px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.student-review-result-pill.correct {
    background: #e7f5ee;
    color: #236443;
}

.student-review-result-pill.partial {
    background: #fff5d8;
    color: #806015;
}

.student-review-result-pill.wrong {
    background: #fdeaea;
    color: #9b3838;
}

.student-review-option {
    cursor: default;
}

.student-review-option:has(input:checked) {
    box-shadow: none;
}

.student-review-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.student-review-option.right {
    border-color: #2f7d55;
    background: #f1faf5;
    color: #236443;
}

.student-review-option.right .student-exam-option-key {
    border-color: #2f7d55;
    background: #2f7d55;
    box-shadow: inset 0 0 0 5px #ffffff;
}

.student-review-option.missed {
    border-color: #c79528;
    background: #fffaf0;
    color: #806015;
}

.student-review-option.missed .student-exam-option-key {
    border-color: #c79528;
    background: #c79528;
    box-shadow: inset 0 0 0 5px #ffffff;
}

.student-review-option.wrong {
    border-color: #c75656;
    background: #fff2f2;
    color: #9b3838;
}

.student-review-option.wrong .student-exam-option-key {
    border-color: #c75656;
    background: #c75656;
    box-shadow: inset 0 0 0 5px #ffffff;
}

.student-review-topic {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 0 10px;
    border: 1px solid #eadfda;
    border-radius: 999px;
    background: #fffaf6;
    color: #6b6073;
    font-size: 12px;
    font-weight: 900;
}

.student-review-answer-grid {
    display: grid;
    gap: 12px;
    margin-top: 2px;
}

.student-review-answer-block {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #ebe3df;
    border-radius: 8px;
    background: #fffdfb;
}

.student-review-answer-block.mine {
    background: #fffaf4;
}

.student-review-answer-block.mine.correct {
    border-color: rgba(47, 125, 85, .42);
    background: #f1faf5;
}

.student-review-answer-block.mine.partial {
    border-color: rgba(199, 149, 40, .48);
    background: #fffaf0;
}

.student-review-answer-block.mine.wrong {
    border-color: rgba(199, 86, 86, .42);
    background: #fff2f2;
}

.student-review-answer-block.correct-answer {
    background: #f5fbf8;
}

.student-review-answer-block.explanation {
    background: #fbfaf8;
}

.student-review-answer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.student-review-answer-head span {
    color: #372940;
    font-size: 13px;
    font-weight: 900;
}

.student-review-answer-body {
    display: grid;
    gap: 10px;
    min-width: 0;
    color: #33263c;
    font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
    font-size: 16px;
    line-height: 1.58;
}

.student-review-muted {
    margin: 0;
    color: #958a99;
    font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 13px;
}

.student-review-answer-image {
    width: min(520px, 100%);
    margin: 0;
    overflow: hidden;
    border: 1px solid #e7dfda;
    border-radius: 8px;
    background: #ffffff;
}

.student-review-answer-image img {
    width: 100%;
    display: block;
    object-fit: contain;
    background: #fff;
}

.student-exam-question-content {
    gap: 14px;
    padding: 0;
    overflow: visible;
}

.student-exam-options {
    gap: 14px;
}

.student-exam-option {
    min-height: 72px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 22px;
    border-color: #e7e0dc;
    border-radius: 6px;
    background: #ffffff;
    color: #33283d;
    font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
    font-size: 16px;
    font-weight: 650;
}

.student-exam-option-body {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.student-exam-option-image {
    width: min(260px, 100%);
    aspect-ratio: 16 / 9;
    display: block;
    overflow: hidden;
    border: 1px solid #eadfda;
    border-radius: 7px;
    background: #fbf9f7;
    object-fit: cover;
}

.student-exam-option:has(input:checked) {
    border-color: #3a234a;
    background: #fbf7ff;
    box-shadow: inset 0 0 0 1px rgba(58, 35, 74, .16);
}

.student-exam-option-key {
    width: 21px;
    height: 21px;
    border: 1.5px solid #2d2138;
    border-radius: 50%;
    background: #ffffff;
    color: transparent;
    font-size: 0;
}

.student-exam-option:has(input:checked) .student-exam-option-key {
    border-color: #3a234a;
    box-shadow: inset 0 0 0 5px #ffffff;
    background: #3a234a;
}

.student-review-option.right,
.student-review-option.right:has(input:checked) {
    border-color: #2f7d55;
    background: #f1faf5;
    color: #236443;
}

.student-review-option.right .student-exam-option-key,
.student-review-option.right:has(input:checked) .student-exam-option-key {
    border-color: #2f7d55;
    background: #2f7d55;
    box-shadow: inset 0 0 0 5px #ffffff;
}

.student-review-option.missed,
.student-review-option.missed:has(input:checked) {
    border-color: #c79528;
    background: #fffaf0;
    color: #806015;
}

.student-review-option.missed .student-exam-option-key,
.student-review-option.missed:has(input:checked) .student-exam-option-key {
    border-color: #c79528;
    background: #c79528;
    box-shadow: inset 0 0 0 5px #ffffff;
}

.student-review-option.wrong,
.student-review-option.wrong:has(input:checked) {
    border-color: #c75656;
    background: #fff2f2;
    color: #9b3838;
}

.student-review-option.wrong .student-exam-option-key,
.student-review-option.wrong:has(input:checked) .student-exam-option-key {
    border-color: #c75656;
    background: #c75656;
    box-shadow: inset 0 0 0 5px #ffffff;
}

.student-exam-question-content textarea {
    min-height: 160px;
    border-color: #e4dcd8;
    background: #ffffff;
    font-family: inherit;
}

.student-answer-mode {
    width: fit-content;
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(64px, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid #e4dcd8;
    border-radius: 999px;
    background: #f8f3ef;
}

.student-answer-mode button {
    min-height: 30px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #756b7d;
    font-size: 13px;
    font-weight: 900;
}

.student-answer-mode button.active {
    background: #242326;
    color: #ffffff;
    box-shadow: 0 6px 12px rgba(36, 35, 38, .14);
}

.student-answer-upload {
    display: grid;
    gap: 12px;
}

.student-answer-upload label {
    width: fit-content;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid #d9d0ca;
    border-radius: 999px;
    background: #fffdfb;
    color: #3a234a;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.student-answer-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.student-answer-upload figure {
    width: min(360px, 100%);
    display: grid;
    gap: 8px;
    margin: 0;
}

.student-answer-upload img {
    width: 100%;
    display: block;
    border: 1px solid #e7dfda;
    border-radius: 8px;
    background: #ffffff;
}

.student-answer-upload button {
    width: fit-content;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid #f0bddb;
    border-radius: 999px;
    background: #fff4fa;
    color: #b31872;
    font-size: 12px;
    font-weight: 900;
}

.student-exam-fill-input {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid #e4dcd8;
    border-radius: 6px;
    background: #ffffff;
    color: #2d2138;
    font: inherit;
    font-size: 15px;
    font-weight: 760;
}

.student-exam-question-foot {
    position: static;
    margin-top: 0;
    padding: 16px 0 0;
    border-top: 1px solid #e8e0dc;
    background: #fbf9f7;
}

.student-exam-btn {
    min-height: 38px;
    border-radius: 999px;
    border-color: #3a234a;
    color: #3a234a;
    font-size: 13px;
}

.student-exam-btn.primary {
    background: #242326;
    color: #ffffff;
    box-shadow: none;
}

.student-exam-btn.warn {
    border-color: #f3bddf;
    background: #ffe1f2;
    color: #bf1d79;
}

.student-exam-dock {
    height: calc(100vh - 88px);
    max-height: calc(100vh - 88px);
    min-height: 0;
    align-self: start;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 14px;
    padding: 18px 16px 16px;
    border: 1px solid #e3ddd8;
    border-radius: 8px;
    background: #fffdfb;
    box-shadow: 0 20px 44px rgba(41, 36, 31, .12);
}

.student-exam-timer {
    min-height: auto;
    display: flex;
    justify-content: space-between;
    padding: 0 2px 12px;
    border: 0;
    border-bottom: 1px solid #ece5e1;
    border-radius: 0;
    background: transparent;
}

.student-exam-timer strong {
    color: #3b2a44;
    font-size: 15px;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.student-exam-timer span {
    margin-top: 0;
    color: #756b7d;
}

.student-exam-progress-head,
.student-exam-notice {
    display: none;
}

.student-exam-progress {
    height: 8px;
    background: #efe9e5;
}

.student-exam-progress span {
    background: #242326;
}

.student-exam-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.student-exam-actions #reviewBtn {
    display: none;
}

.student-exam-actions .student-exam-btn {
    min-width: 0;
    min-height: 36px;
}

.student-exam-actions #submitBtn {
    background: #242326;
    color: #ffffff;
}

@media (max-width: 1080px) {
    body.student-exam-body {
        overflow: auto;
    }

    .student-exam-topbar,
    .student-exam-body-grid {
        grid-template-columns: 1fr;
    }

    .student-exam-shell {
        min-height: auto;
        padding: 12px;
    }

    .student-exam-body-grid {
        gap: 12px;
    }

    .student-exam-question-panel,
    .student-exam-dock {
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .student-exam-dock {
        height: auto;
        order: -1;
    }

    .student-exam-question-stage {
        height: auto;
        overflow: visible;
    }

    .student-exam-paper {
        overflow: visible;
        padding-right: 0;
    }

    .student-exam-question-card {
        padding: 16px;
    }

    .student-exam-top-actions {
        justify-content: center;
    }

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

/* Final alignment pass for the grouped quiz attempt layout. */
body.student-exam-body {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

.student-exam-shell {
    width: 100%;
    max-width: 1420px;
    height: 100vh;
    min-height: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: 54px minmax(0, 1fr);
    gap: 0;
    padding: 16px 18px 18px;
}

.student-exam-topbar {
    min-width: 0;
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.15fr) auto;
}

.student-exam-body-grid {
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) clamp(236px, 20vw, 286px);
    align-items: stretch;
    padding: 0;
}

.student-exam-main {
    min-height: 0;
}

.student-exam-question-panel,
.student-exam-dock {
    height: 100%;
    min-height: 0;
    max-height: none;
    box-sizing: border-box;
}

.student-exam-question-panel {
    overflow: hidden;
}

.student-exam-paper {
    padding: 0 6px 18px 0;
}

.student-exam-question-card {
    width: 100%;
    box-sizing: border-box;
}

.student-exam-question-card .student-exam-question-head,
.student-exam-question-card .student-exam-question-content {
    max-width: none;
    margin: 0;
}

.student-exam-question-card .student-exam-question-head {
    align-items: start;
}

.student-exam-question-card .student-exam-question-content {
    width: 100%;
}

.student-exam-dock {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
}

.student-exam-question-foot {
    width: 100%;
    max-width: 1080px;
    box-sizing: border-box;
}

.student-answer-card {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

.student-answer-card-head {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ece5e1;
}

.student-answer-card-head h2 {
    margin: 0;
    overflow: hidden;
    color: #3b2a44;
    font-size: 15px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-answer-card-head strong {
    min-width: 48px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f5efea;
    color: #6b6073;
    font-size: 12px;
    font-weight: 900;
}

.student-answer-card-list {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 16px;
    overflow: auto;
    padding: 0 2px 2px 0;
}

.student-answer-group {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.student-answer-group + .student-answer-group {
    padding-top: 14px;
    border-top: 1px solid #ece5e1;
}

.student-answer-group-head {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.student-answer-group-head span {
    overflow: hidden;
    color: #3b2a44;
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-answer-group-head small {
    width: 24px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid #e7ded8;
    border-radius: 999px;
    background: #fffaf6;
    color: #7f7388;
    font-size: 11px;
    font-weight: 900;
}

.student-answer-numbers {
    display: grid;
    grid-template-columns: repeat(5, minmax(28px, 1fr));
    gap: 8px;
}

.student-answer-chip {
    width: 100%;
    aspect-ratio: 1;
    min-width: 0;
    display: grid;
    place-items: center;
    border: 1px solid #ddd4ce;
    border-radius: 50%;
    background: #ffffff;
    color: #4b4055;
    font-size: clamp(11px, 1.15vw, 16px);
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.student-answer-chip:hover {
    transform: translateY(-1px);
    border-color: #3a234a;
}

.student-answer-chip.done {
    border-color: #3a234a;
    background: #f3edf7;
    color: #3a234a;
}

.student-answer-chip.current {
    border-color: #242326;
    background: #242326;
    color: #ffffff;
    box-shadow: 0 8px 14px rgba(36, 35, 38, .18);
}

.student-answer-chip.flagged {
    border-color: #efacd7;
    background: #ffe8f5;
    color: #b31872;
}

.student-answer-chip.review.correct {
    border-color: #2f7d55;
    background: #e7f5ee;
    color: #236443;
}

.student-answer-chip.review.partial {
    border-color: #c79528;
    background: #fff5d8;
    color: #806015;
}

.student-answer-chip.review.wrong {
    border-color: #c75656;
    background: #fdeaea;
    color: #9b3838;
}

.student-answer-chip.review.current {
    color: #ffffff;
    box-shadow: 0 8px 14px rgba(36, 35, 38, .18);
}

.student-answer-chip.review.correct.current {
    background: #2f7d55;
}

.student-answer-chip.review.partial.current {
    background: #c79528;
}

.student-answer-chip.review.wrong.current {
    background: #c75656;
}

/* Final exam header refresh: align the top bar with the student course style. */
.student-exam-shell {
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(10px, 1.5vh, 18px);
}

.student-exam-topbar {
    min-height: clamp(54px, 7vh, 68px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) max-content;
    gap: clamp(10px, 1.6vw, 20px);
    padding: clamp(8px, 1.2vh, 12px) clamp(12px, 1.6vw, 20px);
    border: 1px solid #e5ddd8;
    border-radius: 12px;
    background: #fffdfb;
    box-shadow: 0 14px 32px rgba(41, 36, 31, .08);
}

.student-exam-brand {
    color: #30243a;
}

.student-exam-brand > span {
    width: clamp(28px, 3.2vw, 36px);
    height: clamp(28px, 3.2vw, 36px);
    border-radius: clamp(7px, .8vw, 10px);
    background: #242326;
    color: #ffffff;
    font-size: 13px;
    box-shadow: 0 10px 20px rgba(36, 35, 38, .14);
}

.student-exam-brand strong {
    color: #2d2138;
    font-size: 14px;
}

.student-exam-brand small {
    display: block;
    color: #817787;
    font-size: 11px;
}

.student-exam-title {
    text-align: center;
}

.student-exam-title h1 {
    color: #2d2138;
    font-size: 17px;
}

.student-exam-title p {
    display: block;
    margin-top: 3px;
    color: #8a808f;
    font-size: 11px;
}

.student-exam-top-actions {
    gap: clamp(6px, 1vw, 12px);
}

.student-exam-pill {
    min-height: clamp(30px, 4.2vh, 36px);
    display: inline-flex;
    padding-inline: clamp(8px, 1vw, 12px);
    border: 1px solid #ebe2dd;
    background: #fbf7f4;
    color: #756b7d;
}

.student-exam-pill strong {
    color: #3b2a44;
}

.student-exam-exit {
    min-width: clamp(78px, 8vw, 96px);
    min-height: clamp(30px, 4.2vh, 36px);
    padding-inline: clamp(10px, 1.2vw, 14px);
    border: 1px solid #3a234a;
    background: #ffffff;
    color: #3a234a;
}

.student-exam-exit:hover {
    background: #242326;
    color: #ffffff;
}

.student-exam-question-panel,
.student-exam-dock {
    border-radius: 10px;
}

.student-exam-brand.student-aww-wordmark {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    color: #202020;
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 950;
    letter-spacing: 0;
}

/* Fluid exam layout: large regions scale with the viewport instead of fixed widths. */
.student-exam-shell {
    max-width: none;
    padding: clamp(10px, 1.6vw, 20px);
}

.student-exam-body-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 1.15fr);
    gap: clamp(10px, 1.4vw, 18px);
}

.student-exam-topbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .9fr);
}

.student-exam-main,
.student-exam-question-panel,
.student-exam-dock,
.student-exam-question-stage,
.student-exam-paper,
.student-answer-card,
.student-answer-card-list {
    min-width: 0;
}

.student-exam-question-panel {
    padding: clamp(16px, 2vw, 28px);
}

.student-exam-dock {
    padding: clamp(12px, 1.4vw, 18px);
}

.student-exam-paper-section,
.student-exam-question-head,
.student-exam-question-content,
.student-exam-question-foot {
    max-width: none;
}

.student-exam-paper {
    gap: clamp(14px, 1.8vw, 24px);
    padding-right: clamp(0px, .6vw, 8px);
}

.student-exam-question-card {
    padding: clamp(14px, 1.6vw, 22px);
    gap: clamp(12px, 1.2vw, 18px);
}

.student-exam-question-head {
    gap: clamp(10px, 1.2vw, 18px);
    padding-bottom: clamp(12px, 1.4vw, 20px);
}

.student-exam-options {
    gap: clamp(10px, 1.2vw, 14px);
}

.student-exam-option {
    min-height: clamp(58px, 7vh, 76px);
    grid-template-columns: clamp(26px, 3vw, 36px) minmax(0, 1fr);
    gap: clamp(10px, 1.2vw, 16px);
    padding: clamp(12px, 1.4vw, 20px);
}

.student-answer-card {
    gap: clamp(10px, 1.2vw, 14px);
}

.student-answer-card-list {
    gap: clamp(12px, 1.4vw, 18px);
}

.student-answer-numbers {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(6px, .8vw, 10px);
}

@media (max-width: 1240px) {
    .student-exam-body-grid {
        grid-template-columns: minmax(0, 3.2fr) minmax(0, 1fr);
    }

    .student-exam-topbar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr);
    }
}

@media (max-width: 1080px) {
    body.student-exam-body {
        height: auto;
        min-height: 100vh;
        overflow: auto;
    }

    .student-exam-shell {
        height: auto;
        min-height: 100vh;
        grid-template-rows: auto auto;
    }

    .student-exam-topbar {
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: auto;
        padding: 12px 14px;
    }

    .student-exam-title {
        grid-column: 1 / -1;
        order: 3;
    }

    .student-exam-body-grid {
        height: auto;
        grid-template-columns: 1fr;
    }

    .student-exam-dock {
        order: -1;
        overflow: visible;
    }

    .student-answer-card {
        overflow: visible;
    }

    .student-answer-card-list {
        max-height: 172px;
    }

    .student-answer-numbers {
        grid-template-columns: repeat(5, 32px);
        justify-content: start;
    }

}

/* Final student learning analytics page. */
body.student-dashboard-body .student-analytics-page {
    padding: 28px 30px 34px;
    background: #f5f6f8;
}

body.student-dashboard-body .student-analytics-page .student-home-top {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.student-dashboard-body .student-analytics-page .student-home-top h1 {
    margin: 0;
    color: #1f3430;
    font-size: 32px;
    font-weight: 900;
}

body.student-dashboard-body .student-analytics-page .student-home-top p {
    margin: 6px 0 0;
    color: #667085;
    font-size: 14px;
    font-weight: 850;
}

.student-analytics-filter {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: #fff;
    color: #667085;
    box-shadow: 0 10px 24px rgba(15,23,42,.04);
    font-size: 14px;
    font-weight: 900;
}

.student-analytics-filter select {
    width: 170px;
    height: 34px;
    border: 1px solid #d8e7e3;
    border-radius: 6px;
    background: #fff;
    color: #667085;
    font-weight: 850;
}

.student-analytics-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.student-analytics-metrics article,
.student-analytics-hero,
.student-analytics-card {
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15,23,42,.055);
}

.student-analytics-metrics article {
    min-height: 112px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 18px;
}

.student-analytics-metrics span {
    color: #667085;
    font-size: 12px;
    font-weight: 850;
}

.student-analytics-metrics strong {
    color: #111827;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
}

.student-analytics-metrics small {
    color: #00877f;
    font-size: 12px;
    font-weight: 900;
}

.student-analytics-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 344px;
    gap: 18px;
}

.student-analytics-left,
.student-analytics-right {
    display: grid;
    gap: 18px;
    align-content: start;
}

.student-analytics-hero {
    min-height: 310px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 22px;
    padding: 18px;
}

.student-analytics-chart {
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 16px;
}

.student-analytics-bars {
    height: 220px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
    padding: 12px 8px 0;
    border-bottom: 1px solid #d8e7e3;
}

.student-analytics-bars > div {
    min-width: 0;
    display: grid;
    gap: 6px;
    justify-items: center;
    align-items: end;
}

.student-analytics-bars i {
    width: 100%;
    max-width: 42px;
    display: block;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #3a3f46, #00877f);
}

.student-analytics-bars strong,
.student-analytics-bars span {
    color: #667085;
    font-size: 12px;
    font-weight: 900;
}

.student-analytics-bars span {
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-analytics-line-chart {
    min-height: 220px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 8px 4px 0;
    overflow-x: auto;
    border-bottom: 1px solid #d8e7e3;
}

.student-analytics-line-chart svg {
    width: 100%;
    min-width: max(100%, calc(var(--score-point-count, 6) * 72px));
    height: 190px;
    overflow: visible;
}

.student-analytics-line-chart .grid line {
    stroke: #d8e7e3;
    stroke-width: 1;
}

.student-analytics-line-chart polyline,
.student-analytics-line-chart .score-segment {
    fill: none;
    stroke: #00877f;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.student-analytics-line-chart circle {
    fill: #fff;
    stroke: #00877f;
    stroke-width: 4;
}

.student-analytics-line-chart .score-point-link {
    cursor: pointer;
}

.student-analytics-line-chart .score-point-link:hover circle {
    fill: #00877f;
    stroke: #ffffff;
}

.student-analytics-line-labels {
    display: grid;
    grid-template-columns: repeat(var(--score-point-count, 6), minmax(0, 1fr));
    gap: 8px;
    min-width: max(100%, calc(var(--score-point-count, 6) * 72px));
}

.student-analytics-line-labels span,
.student-analytics-line-labels a {
    min-width: 0;
    display: grid;
    gap: 2px;
    justify-items: center;
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
}

.student-analytics-line-labels b,
.student-analytics-line-labels em {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-analytics-line-labels b {
    color: #00877f;
}

.student-analytics-line-labels em {
    font-style: normal;
}

.student-analytics-radar {
    position: relative;
    min-height: 258px;
    overflow: hidden;
    border: 1px solid #e0e9e7;
    border-radius: 7px;
    background:
        radial-gradient(circle at center, transparent 0 32px, rgba(0,135,127,.08) 33px 34px, transparent 35px 66px, rgba(0,135,127,.08) 67px 68px, transparent 69px 100px, rgba(0,135,127,.08) 101px 102px, transparent 103px),
        linear-gradient(90deg, transparent 49.5%, rgba(0,135,127,.12) 50%, transparent 50.5%),
        linear-gradient(0deg, transparent 49.5%, rgba(0,135,127,.12) 50%, transparent 50.5%),
        #f8fbfa;
}

.student-analytics-radar:before {
    content: "";
    position: absolute;
    left: 82px;
    top: 45px;
    width: 150px;
    height: 150px;
    clip-path: polygon(50% 0, 92% 26%, 78% 84%, 28% 92%, 5% 42%);
    background: rgba(0,135,127,.30);
    border: 2px solid #00877f;
}

.student-analytics-radar span {
    position: absolute;
    color: #667085;
    font-size: 12px;
    font-weight: 900;
}

.student-analytics-radar .r1 { left: 132px; top: 18px; }
.student-analytics-radar .r2 { right: 28px; top: 98px; }
.student-analytics-radar .r3 { right: 74px; bottom: 28px; }
.student-analytics-radar .r4 { left: 52px; bottom: 42px; }
.student-analytics-radar .r5 { left: 28px; top: 98px; }

.student-analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.student-analytics-card {
    padding: 16px;
}

.student-analytics-list,
.student-analytics-progress-list,
.student-analytics-timeline {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.student-analytics-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 10px 12px;
    border: 1px solid #e0e9e7;
    border-radius: 7px;
    background: #fff;
}

.student-analytics-row i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #ddf0ec;
    color: #00877f;
    font-style: normal;
    font-weight: 900;
}

.student-analytics-row strong,
.student-analytics-row span {
    display: block;
}

.student-analytics-row strong {
    overflow: hidden;
    color: #111827;
    font-size: 14px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-analytics-row span {
    margin-top: 4px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.student-analytics-row b {
    color: #00877f;
    font-size: 13px;
}

.student-analytics-weak-group,
.student-weak-topic-group {
    display: grid;
    gap: 8px;
}

.student-analytics-weak-group .student-analytics-row strong,
.student-analytics-weak-group .student-analytics-row span,
.student-weak-topic-row strong,
.student-weak-topic-row span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.student-wrong-question-list {
    display: grid;
    gap: 6px;
    padding: 0 0 2px 48px;
}

.student-wrong-question-list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .9fr);
    align-items: center;
    gap: 3px;
    padding: 8px 10px;
    border: 1px solid #e8eeec;
    border-radius: 7px;
    background: #fbfdfc;
    color: inherit;
    text-decoration: none;
}

.student-wrong-question-list a:hover {
    border-color: rgba(0, 135, 127, .35);
    background: #f0faf7;
}

.student-wrong-question-list strong,
.student-wrong-question-list span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-wrong-question-list strong {
    color: #20242a;
    font-size: 12px;
    font-weight: 900;
}

.student-wrong-question-list span {
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    text-align: right;
}

.student-analytics-progress-row {
    display: grid;
    gap: 8px;
}

.student-analytics-progress-row > div {
    display: flex;
    justify-content: space-between;
    color: #667085;
    font-size: 13px;
    font-weight: 900;
}

.student-analytics-progress-row p {
    height: 10px;
    margin: 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0,135,127,.12);
}

.student-analytics-progress-row i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #00877f;
}

.student-analytics-time-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 10px;
}

.student-analytics-time-row:before {
    content: "";
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 50%;
    background: #00877f;
}

.student-analytics-time-row strong {
    display: block;
    color: #111827;
    font-size: 14px;
    font-weight: 900;
}

.student-analytics-time-row span {
    display: block;
    margin-top: 4px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

@media (max-width: 1180px) {
    .student-analytics-layout,
    .student-analytics-hero,
    .student-analytics-grid,
    .student-analytics-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body.student-dashboard-body .student-analytics-page .student-home-top {
        align-items: stretch;
        flex-direction: column;
    }

    .student-analytics-filter {
        width: 100%;
    }
}

/* Unified enterprise style for the remaining admin, teacher, and account pages. */
body > .layout {
    background:
        radial-gradient(circle at 12% 12%, rgba(0, 135, 127, .08), transparent 28rem),
        linear-gradient(180deg, #f7fbfa 0%, #edf7f4 100%);
    color: #1f2d2a;
    font-family: Inter, Arial, "Microsoft YaHei", sans-serif;
}

body > .layout {
    grid-template-columns: 260px minmax(0, 1fr);
    background: #edf7f4;
}

body > .layout .sidebar {
    padding: 22px 18px;
    border-right: 1px solid rgba(0, 135, 127, .12);
    background: linear-gradient(180deg, #ffffff 0%, #f2faf7 100%);
    box-shadow: 16px 0 38px rgba(0, 87, 78, .08);
}

body > .layout .brand {
    min-height: 62px;
    padding: 10px;
    border: 1px solid rgba(0, 135, 127, .10);
    border-radius: 8px;
    background: rgba(255, 255, 255, .86);
}

body > .layout .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #00877f;
    box-shadow: 0 12px 24px rgba(0, 135, 127, .18);
}

body > .layout .brand-name {
    color: #172c28;
    font-size: 17px;
    letter-spacing: 0;
}

body > .layout .brand-sub,
body > .layout .nav-section,
body > .layout .muted,
body > .layout .meta,
body > .layout .hint {
    color: #667085;
}

body > .layout .nav-section {
    margin: 12px 8px 4px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

body > .layout .side-nav {
    gap: 5px;
    padding-right: 2px;
}

body > .layout .side-nav a {
    min-height: 40px;
    gap: 9px;
    padding: 0 11px;
    border-radius: 7px;
    color: #667085;
    font-size: 14px;
    letter-spacing: 0;
}

body > .layout .side-nav a:before {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 7px;
    background: rgba(0, 135, 127, .08);
    color: #00877f;
    font-size: 13px;
    font-weight: 900;
}

body > .layout .side-nav a[href*="dashboard"]:before { content: "⌂"; }
body > .layout .side-nav a[href*="user-list"]:before { content: "人"; }
body > .layout .side-nav a[href*="course"]:before { content: "课"; }
body > .layout .side-nav a[href*="material"]:before { content: "材"; }
body > .layout .side-nav a[href*="quiz"]:before { content: "测"; }
body > .layout .side-nav a[href*="question"]:before { content: "题"; }
body > .layout .side-nav a[href*="score"]:before,
body > .layout .side-nav a[href*="analytics"]:before { content: "析"; }
body > .layout .side-nav a[href*="profile"]:before { content: "账"; }

body > .layout .side-nav a:hover,
body > .layout .side-nav a.active {
    border-color: rgba(0, 135, 127, .14);
    background: #e4f4ef;
    color: #006d66;
    box-shadow: none;
}

body > .layout .side-nav a:hover:before,
body > .layout .side-nav a.active:before {
    background: #00877f;
    color: #fff;
}

body > .layout .sidebar-tools {
    gap: 12px;
}

body > .layout .lang-switch {
    border-color: rgba(0, 135, 127, .16);
    border-radius: 7px;
    background: #e8f6f2;
}

body > .layout .lang-switch button {
    border-radius: 5px;
    color: #667085;
}

body > .layout .lang-switch button.active {
    background: #00877f;
    color: #fff;
}

body > .layout .user-mini {
    border-color: rgba(0, 135, 127, .12);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 87, 78, .07);
}

body > .layout .avatar {
    background: #00877f;
}

body > .layout .main {
    padding: 24px;
    background: #edf7f4;
}

body > .layout .topbar {
    min-height: 92px;
    align-items: center;
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid rgba(0, 135, 127, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 18px 42px rgba(0, 87, 78, .08);
}

body > .layout .topbar h1 {
    color: #172c28;
    font-size: 28px;
    line-height: 1.18;
    letter-spacing: 0;
}

body > .layout .topbar p {
    color: #667085;
    font-size: 13px;
    font-weight: 800;
}

body > .layout .top-actions {
    flex-wrap: wrap;
}

body > .layout .search {
    width: 300px;
    height: 42px;
    border-color: rgba(0, 135, 127, .16);
    border-radius: 7px;
    background: #fff;
    color: #667085;
    font-weight: 800;
}

body > .layout .search input,
body > .layout .search input::placeholder {
    color: #667085;
}

body > .layout .primary,
body > .layout .secondary,
body > .layout .small-btn,
body > .layout .text-btn {
    border-radius: 7px;
    letter-spacing: 0;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

body > .layout .primary {
    border-color: #007c75;
    background: #00877f;
    color: #fff;
    box-shadow: 0 14px 28px rgba(0, 135, 127, .20);
}

body > .layout .secondary,
body > .layout .small-btn {
    border-color: rgba(0, 135, 127, .18);
    background: #fff;
    color: #007c75;
}

body > .layout .primary:hover,
body > .layout .secondary:hover,
body > .layout .small-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(0, 87, 78, .10);
}

body > .layout .text-btn {
    color: #00877f;
}

body > .layout .danger-btn {
    border-color: #f5c7c7;
    color: #b42318;
}

body > .layout .metrics {
    gap: 16px;
    margin-bottom: 16px;
}

body > .layout .metric,
body > .layout .panel,
body > .layout .row-card,
body > .layout .table-card,
body > .layout .question-card,
body > .layout .toolbar {
    border-color: rgba(0, 135, 127, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 16px 34px rgba(0, 87, 78, .07);
}

body > .layout .metric {
    min-height: 112px;
    padding: 18px;
}

body > .layout .metric:before {
    height: 4px;
    background: #00877f;
}

body > .layout .metric span {
    color: #667085;
    font-weight: 900;
}

body > .layout .metric strong {
    color: #172c28;
    font-size: 32px;
}

body > .layout .panel {
    padding: 18px;
}

body > .layout .panel-head {
    min-height: 34px;
    margin-bottom: 14px;
}

body > .layout .panel h2 {
    color: #172c28;
    font-size: 18px;
    letter-spacing: 0;
}

body > .layout .grid-2,
body > .layout .master-detail {
    gap: 16px;
}

body > .layout .master-detail {
    grid-template-columns: minmax(0, 1fr) 392px;
}

body > .layout .data-row {
    min-height: 74px;
    padding: 14px 16px;
    border-color: rgba(0, 135, 127, .10);
}

body > .layout .data-row:hover {
    background: #f3fbf8;
}

body > .layout .row-title {
    color: #172c28;
    font-size: 14px;
}

body > .layout .pill {
    border-radius: 999px;
    background: #e1f3ee;
    color: #007c75;
}

body > .layout .pill.amber {
    background: #fff6dc;
    color: #9a6200;
}

body > .layout .pill.red {
    background: #fee9e7;
    color: #b42318;
}

body > .layout .segmented {
    border-color: rgba(0, 135, 127, .16);
    border-radius: 7px;
    background: #e8f6f2;
}

body > .layout .segmented button {
    border-radius: 5px;
}

body > .layout .segmented button.active {
    background: #00877f;
}

body > .layout .form-grid {
    gap: 14px;
}

body > .layout .form-grid label {
    color: #667085;
    font-size: 13px;
    letter-spacing: 0;
}

body > .layout .form-grid input,
body > .layout .form-grid select,
body > .layout .form-grid textarea {
    min-height: 42px;
    border-color: rgba(0, 135, 127, .17);
    border-radius: 7px;
    background: #fff;
    color: #172c28;
}

body > .layout .form-grid textarea {
    min-height: 112px;
}

body > .layout .form-grid input:focus,
body > .layout .form-grid select:focus,
body > .layout .form-grid textarea:focus,
body > .layout .search input:focus {
    border-color: #00877f;
    outline: 3px solid rgba(0, 135, 127, .12);
}

body > .layout .detail-item {
    border-color: rgba(0, 135, 127, .10);
}

body > .layout .detail-item span:first-child {
    color: #667085;
    font-weight: 900;
}

body > .layout .progress-row {
    grid-template-columns: minmax(120px, .32fr) minmax(0, 1fr) 54px;
}

body > .layout .bar {
    height: 10px;
    background: rgba(0, 135, 127, .12);
}

body > .layout .bar span {
    background: #00877f;
}

body > .layout .question-card {
    margin-bottom: 12px;
}

body > .layout .action-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

body > .layout .empty-state {
    border-color: rgba(0, 135, 127, .12);
    background: #f7fbfa;
    color: #667085;
}

@media (max-width: 1120px) {
    body > .layout .metrics,
    body > .layout .grid-2,
    body > .layout .master-detail {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    body > .layout {
        grid-template-columns: 1fr;
    }

    body > .layout .sidebar {
        position: static;
        height: auto;
    }

    body > .layout .topbar,
    body > .layout .top-actions {
        align-items: stretch;
        flex-direction: column;
    }

    body > .layout .search {
        width: 100%;
    }
}

/* Full page rebuild components for admin, teacher, and account workspaces. */
.enterprise-main {
    padding: 28px 30px 34px;
}

.enterprise-top {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.enterprise-top h1 {
    color: #1f3430;
    font-size: 32px;
    font-weight: 900;
    line-height: 1.18;
}

.enterprise-top p {
    margin-top: 6px;
    color: #667085;
    font-size: 14px;
    font-weight: 850;
}

.enterprise-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.enterprise-search {
    width: 310px;
    min-height: 42px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: #fff;
    color: #667085;
    font-weight: 850;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

.enterprise-search span {
    color: #00877f;
    font-weight: 900;
}

.enterprise-search input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #667085;
}

.enterprise-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.enterprise-metric,
.enterprise-card,
.enterprise-wide {
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .055);
}

.enterprise-metric {
    min-height: 108px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 18px;
}

.enterprise-metric span {
    color: #667085;
    font-size: 12px;
    font-weight: 850;
}

.enterprise-metric strong {
    color: #111827;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
}

.enterprise-metric small {
    color: #00877f;
    font-size: 12px;
    font-weight: 900;
}

.enterprise-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 344px;
    gap: 18px;
}

.enterprise-left,
.enterprise-right {
    display: grid;
    gap: 18px;
    align-content: start;
}

.enterprise-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.enterprise-card,
.enterprise-wide {
    min-width: 0;
    padding: 16px;
}

.enterprise-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.enterprise-head h2,
.enterprise-head h3 {
    margin: 0;
    color: #111827;
    font-size: 20px;
    font-weight: 900;
}

.enterprise-head a,
.enterprise-head span {
    color: #00877f;
    font-size: 13px;
    font-weight: 900;
}

.enterprise-list {
    display: grid;
    gap: 10px;
}

.enterprise-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid #e0e9e7;
    border-radius: 7px;
    background: #fff;
}

.enterprise-row i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #ddf0ec;
    color: #00877f;
    font-style: normal;
    font-weight: 900;
}

.enterprise-row strong,
.enterprise-row span {
    display: block;
}

.enterprise-row strong {
    overflow: hidden;
    color: #111827;
    font-size: 14px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enterprise-row span {
    margin-top: 4px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.enterprise-row b,
.enterprise-row .small-btn {
    min-width: 64px;
    justify-self: end;
}

.teacher-quiz-record {
    width: 100%;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.teacher-quiz-record.active,
.teacher-quiz-record:hover {
    border-color: rgba(0, 135, 127, .42);
    background: #f0faf7;
}

.enterprise-bars {
    height: 230px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
    padding: 12px 8px 0;
    border-bottom: 1px solid #d8e7e3;
}

.enterprise-bars div {
    display: grid;
    gap: 6px;
    justify-items: center;
    align-items: end;
}

.enterprise-bars i {
    width: 100%;
    max-width: 42px;
    display: block;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #3a3f46, #00877f);
}

.enterprise-bars span {
    color: #667085;
    font-size: 12px;
    font-weight: 900;
}

.enterprise-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.enterprise-mini {
    min-height: 104px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 14px;
    border: 1px solid #e0e9e7;
    border-radius: 7px;
    background: #f8fbfa;
}

.enterprise-mini strong {
    color: #111827;
    font-size: 22px;
    font-weight: 900;
}

.enterprise-mini span {
    color: #667085;
    font-size: 12px;
    font-weight: 850;
}

.enterprise-progress-list {
    display: grid;
    gap: 14px;
}

.enterprise-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: #667085;
    font-size: 13px;
    font-weight: 900;
}

.enterprise-progress {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0, 135, 127, .12);
}

.enterprise-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #00877f;
}

.enterprise-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.enterprise-form label {
    display: grid;
    gap: 7px;
    color: #667085;
    font-size: 13px;
    font-weight: 900;
}

.enterprise-form input,
.enterprise-form select,
.enterprise-form textarea {
    min-width: 0;
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid #d8e7e3;
    border-radius: 7px;
    background: #f8fbfa;
    color: #111827;
    font-weight: 850;
}

.enterprise-form textarea {
    min-height: 96px;
    resize: vertical;
}

.enterprise-form .full {
    grid-column: 1 / -1;
}

.material-upload-hint {
    padding: 10px 12px;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    background: #f7f7f7;
    color: #60646c;
    font-size: 12px;
    font-weight: 820;
    overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
    .enterprise-layout,
    .enterprise-grid-2,
    .enterprise-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .enterprise-main {
        padding: 18px;
    }

    .enterprise-top,
    .enterprise-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .enterprise-search {
        width: 100%;
    }
}

/* Profile page: simplified implementation based on the approved account design. */
.profile-design-hero {
    min-height: 170px;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) 180px;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
}

.profile-design-photo {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(180deg, #2f9389, #00877f);
    color: #fff;
    font-size: 42px;
    font-weight: 900;
    box-shadow: 0 20px 38px rgba(0, 135, 127, .20);
}

.profile-design-copy {
    min-width: 0;
}

.profile-design-copy h2 {
    margin: 0;
    overflow: hidden;
    color: #111827;
    font-size: 28px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-design-copy p {
    margin-top: 8px;
    color: #667085;
    font-size: 13px;
    font-weight: 850;
}

.profile-design-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.profile-design-tags span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #e1f3ee;
    color: #006d66;
    font-size: 12px;
    font-weight: 900;
}

.profile-design-cardmark {
    height: 132px;
    display: grid;
    place-items: center;
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(0, 135, 127, .14) 50%, transparent 50%),
        linear-gradient(rgba(0, 135, 127, .14) 50%, transparent 50%);
    background-size: 18px 18px;
    color: #006d66;
    font-weight: 900;
}

.profile-design-status {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.profile-design-status .enterprise-mini strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.student-dashboard-body .profile-page .enterprise-metrics,
body.student-dashboard-body .profile-page .enterprise-layout {
    margin-bottom: 18px;
}

body.student-dashboard-body .profile-page .enterprise-wide,
body.student-dashboard-body .profile-page .enterprise-card,
body.student-dashboard-body .profile-page .enterprise-metric {
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .055);
}

body.student-dashboard-body .profile-page .enterprise-form input {
    border-color: #d8e7e3;
    background: #f8fbfa;
}

body.student-dashboard-body .profile-page .student-main-btn.full,
body.student-dashboard-body .profile-page .student-ghost-btn.full {
    width: 100%;
    border: 1px solid #00877f;
}

@media (max-width: 1180px) {
    .profile-design-hero {
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .profile-design-cardmark {
        display: none;
    }
}

@media (max-width: 760px) {
    .profile-design-hero,
    .profile-design-status {
        grid-template-columns: 1fr;
    }

    .profile-design-photo {
        width: 88px;
        height: 88px;
        font-size: 32px;
    }
}

/* Color-only refresh: keep the existing component structure and spacing. */
body.student-dashboard-body,
.student-dashboard-shell,
body.student-dashboard-body .student-home {
    background: #f5f7fb;
    color: #172033;
}

.student-home-sidebar {
    border-color: #d8e1ea;
    background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
}

.student-home-brand {
    color: #17324d;
}

.student-home-logo,
.student-home-user > span,
.student-main-btn,
.student-mini-btn.primary,
body.student-dashboard-body .primary {
    background: #087f7a;
    color: #ffffff;
}

.student-home-nav a {
    color: #425466;
}

.student-home-nav a:hover,
.student-home-nav a.active {
    background: #e8f6f4;
    color: #056a66;
}

.student-home-user,
.student-search,
.student-metric-card,
.student-card,
.student-continue-panel,
body.student-dashboard-body .panel,
body.student-dashboard-body .student-featured-course,
body.student-dashboard-body .student-plan-card,
body.student-dashboard-body .student-course-page-card,
body.student-dashboard-body .student-analytics-card,
body.student-dashboard-body .student-quiz-card,
body.student-dashboard-body .student-quiz-side-card,
body.student-dashboard-body .profile-page .enterprise-wide,
body.student-dashboard-body .profile-page .enterprise-card,
body.student-dashboard-body .profile-page .enterprise-metric {
    border-color: #d8e1ea;
    background: #ffffff;
}

.student-home-top {
    border-color: #d8e1ea;
    background: rgba(255, 255, 255, .92);
}

.student-home-top h1,
.student-card-head h2,
.student-continue-panel h2,
.student-metric-card strong {
    color: #172033;
}

.student-home-top p,
.student-card p,
.student-card small,
.student-metric-card span,
.student-metric-card small,
.student-muted,
.student-home-user small {
    color: #667085;
}

.student-card-head a,
.student-page-lang button.active,
.student-ghost-btn,
.student-mini-btn,
body.student-dashboard-body .secondary,
body.student-dashboard-body .small-btn {
    color: #087f7a;
}

.student-ghost-btn,
.student-mini-btn,
body.student-dashboard-body .secondary,
body.student-dashboard-body .small-btn {
    border-color: #cbd5e1;
    background: #ffffff;
}

.student-page-lang {
    color: #425466;
}

.student-avatar-link span,
.student-metric-card i {
    background: #eef4ff;
    color: #2563eb;
}

.student-status-tag {
    background: #eef4ff;
    color: #2563eb;
}

.student-learning-visual,
.student-quiz-visual,
.student-detail-cover,
.profile-design-cardmark {
    border-color: #d8e1ea;
    background: linear-gradient(135deg, #e8f6f4 0%, #eef4ff 100%);
    color: #056a66;
}

body > .layout {
    background: #f5f7fb;
    color: #172033;
}

body > .layout .sidebar {
    border-color: #d8e1ea;
    background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
}

body > .layout .brand {
    border-color: #d8e1ea;
    background: #ffffff;
}

body > .layout .brand-mark,
body > .layout .side-nav a:hover:before,
body > .layout .side-nav a.active:before,
body > .layout .primary,
body > .layout .primary-action {
    background: #087f7a;
    color: #ffffff;
}

body > .layout .brand-name,
body > .layout .topbar h1,
body > .layout .panel-head h2 {
    color: #172033;
}

body > .layout .side-nav a {
    color: #425466;
}

body > .layout .side-nav a:hover,
body > .layout .side-nav a.active {
    border-color: #b8d9d7;
    background: #e8f6f4;
    color: #056a66;
}

body > .layout .main,
body > .layout .topbar,
body > .layout .panel,
body > .layout .metric,
body > .layout .row-card,
body > .layout .table-card,
body > .layout .question-card,
body > .layout .toolbar,
body > .layout .auth-card,
body > .layout .insight {
    border-color: #d8e1ea;
    background: #ffffff;
}

body > .layout .brand-sub,
body > .layout .nav-section,
body > .layout .muted,
body > .layout .meta,
body > .layout .hint,
body > .layout .topbar p {
    color: #667085;
}

body > .layout a,
body > .layout .secondary,
body > .layout .small-btn {
    color: #087f7a;
}

/* Homepage top layout: clean Awwwards-inspired structure without heavy effects. */
body.student-home-body {
    --student-home-marquee-height: 48px;
    --student-home-nav-height: clamp(68px, 5.4vw, 86px);
    background: #f4f4f4;
    color: #111111;
}

.student-home-body .student-dashboard-shell {
    display: block;
    background: transparent;
}

body.student-dashboard-body .student-dashboard-home {
    min-height: 100vh;
    padding: calc(var(--student-home-marquee-height) + var(--student-home-nav-height)) 0 0;
    background: transparent;
}

.student-aww-marquee {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    height: var(--student-home-marquee-height);
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid #dddddd;
    background: #e9e9e9;
    white-space: nowrap;
}

.student-aww-track {
    display: flex;
    min-width: max-content;
    align-items: center;
    gap: 34px;
    color: #242424;
    font-size: 14px;
    animation: studentTicker 24s linear infinite;
}

.student-aww-track span:nth-child(odd) {
    font-weight: 900;
}

.student-aww-track span:nth-child(even):before {
    content: "☺";
    margin-right: 16px;
}

.student-aww-top {
    position: fixed;
    top: var(--student-home-marquee-height);
    left: 0;
    right: 0;
    z-index: 89;
    min-height: var(--student-home-nav-height);
    height: var(--student-home-nav-height);
    display: grid;
    grid-template-columns: clamp(48px, 4vw, 70px) minmax(180px, .55fr) minmax(360px, 2.15fr) minmax(112px, .35fr);
    align-items: center;
    gap: clamp(14px, 1.6vw, 28px);
    margin: 0;
    padding: 0 clamp(24px, 3vw, 52px);
    border: 0;
    background: #f4f4f4;
    box-shadow: none;
    box-sizing: border-box;
}

.student-aww-wordmark {
    color: #202020;
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 950;
    letter-spacing: 0;
}

.student-aww-links {
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.6vw, 28px);
}

.student-aww-links a {
    position: relative;
    padding: 8px 0;
    color: #60646c;
    font-size: 14px;
    font-weight: 850;
}

.student-aww-links a:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    height: 2px;
    border-radius: 999px;
    background: #111111;
    opacity: 0;
    transform: scaleX(.35);
    transition: opacity .18s ease, transform .18s ease;
}

.student-aww-links a:hover,
.student-aww-links a.active {
    color: #111111;
}

.student-aww-links a:hover:after,
.student-aww-links a.active:after {
    opacity: 1;
    transform: scaleX(1);
}

.student-aww-top .student-top-actions {
    grid-column: 3 / 5;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: center;
    gap: clamp(10px, 1.2vw, 18px);
    min-width: 0;
}

.student-aww-top .student-search {
    width: min(760px, 48vw);
    max-width: none;
    min-height: 44px;
    justify-self: center;
    border: 0;
    border-radius: 8px;
    background: #e9e9e9;
    box-shadow: none;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.student-aww-top .student-search:focus-within {
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(17, 17, 17, .10);
    transform: translateY(-1px);
}

.student-aww-search {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 0 16px;
}

.student-aww-search > span {
    color: #60646c;
    font-size: 22px;
    line-height: 1;
}

.student-aww-search input {
    width: 100%;
    min-width: 0;
    height: 44px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111111;
    font-size: 14px;
    font-weight: 650;
}

.student-aww-search input::placeholder {
    color: #9a9a9a;
    opacity: 1;
}

.student-top-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(16px, 1.4vw, 24px);
    min-width: max-content;
}

.student-aww-top .student-page-lang {
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #41535a;
    box-shadow: none;
}

.student-aww-top .student-page-lang button {
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #8a8f98;
    opacity: 1;
    font-weight: 850;
}

.student-aww-top .student-page-lang button.active {
    background: transparent;
    color: #111111;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.student-aww-top .student-avatar-link span {
    width: clamp(38px, 3.1vw, 44px);
    height: clamp(38px, 3.1vw, 44px);
    border-radius: 50%;
    background: #111111;
    color: #ffffff;
    box-shadow: none;
}

.student-account-menu {
    position: relative;
    display: grid;
    place-items: center;
    padding: 6px 0;
}

.student-account-menu:after {
    content: "";
    position: absolute;
    top: 100%;
    right: -8px;
    width: 128px;
    height: 10px;
}

.student-account-dropdown {
    position: absolute;
    top: 100%;
    right: -8px;
    z-index: 40;
    min-width: 124px;
    display: grid;
    gap: 3px;
    padding: 6px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 12px 24px rgba(17, 17, 17, .08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease;
}

.student-account-menu:hover .student-account-dropdown,
.student-account-menu:focus-within .student-account-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.student-account-dropdown a,
.student-account-dropdown button {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #242424;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.student-account-dropdown a:before,
.student-account-dropdown button:before {
    width: 22px;
    height: 22px;
    display: block;
    flex: 0 0 auto;
    background: transparent;
    background-color: #3f454b;
    content: "";
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 19px 19px;
    mask-size: 19px 19px;
}

.student-account-dropdown .settings:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2015.5A3.5%203.5%200%201%200%2012%208.5a3.5%203.5%200%200%200%200%207Z'/%3E%3Cpath%20d='M19.4%2015a1.65%201.65%200%200%200%20.33%201.82l.06.06a2%202%200%201%201-2.83%202.83l-.06-.06a1.65%201.65%200%200%200-1.82-.33%201.65%201.65%200%200%200-1%201.51V21a2%202%200%201%201-4%200v-.09a1.65%201.65%200%200%200-1-1.51%201.65%201.65%200%200%200-1.82.33l-.06.06a2%202%200%201%201-2.83-2.83l.06-.06A1.65%201.65%200%200%200%204.6%2015a1.65%201.65%200%200%200-1.51-1H3a2%202%200%201%201%200-4h.09a1.65%201.65%200%200%200%201.51-1%201.65%201.65%200%200%200-.33-1.82l-.06-.06a2%202%200%201%201%202.83-2.83l.06.06A1.65%201.65%200%200%200%208.92%204.6H9a1.65%201.65%200%200%200%201-1.51V3a2%202%200%201%201%204%200v.09a1.65%201.65%200%200%200%201%201.51h.08a1.65%201.65%200%200%200%201.82-.33l.06-.06a2%202%200%201%201%202.83%202.83l-.06.06A1.65%201.65%200%200%200%2019.4%209c.38.3.92.47%201.51.47H21a2%202%200%201%201%200%204h-.09c-.59%200-1.13.17-1.51.53Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2015.5A3.5%203.5%200%201%200%2012%208.5a3.5%203.5%200%200%200%200%207Z'/%3E%3Cpath%20d='M19.4%2015a1.65%201.65%200%200%200%20.33%201.82l.06.06a2%202%200%201%201-2.83%202.83l-.06-.06a1.65%201.65%200%200%200-1.82-.33%201.65%201.65%200%200%200-1%201.51V21a2%202%200%201%201-4%200v-.09a1.65%201.65%200%200%200-1-1.51%201.65%201.65%200%200%200-1.82.33l-.06.06a2%202%200%201%201-2.83-2.83l.06-.06A1.65%201.65%200%200%200%204.6%2015a1.65%201.65%200%200%200-1.51-1H3a2%202%200%201%201%200-4h.09a1.65%201.65%200%200%200%201.51-1%201.65%201.65%200%200%200-.33-1.82l-.06-.06a2%202%200%201%201%202.83-2.83l.06.06A1.65%201.65%200%200%200%208.92%204.6H9a1.65%201.65%200%200%200%201-1.51V3a2%202%200%201%201%204%200v.09a1.65%201.65%200%200%200%201%201.51h.08a1.65%201.65%200%200%200%201.82-.33l.06-.06a2%202%200%201%201%202.83%202.83l-.06.06A1.65%201.65%200%200%200%2019.4%209c.38.3.92.47%201.51.47H21a2%202%200%201%201%200%204h-.09c-.59%200-1.13.17-1.51.53Z'/%3E%3C/svg%3E");
}

.student-account-dropdown .logout:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4'/%3E%3Cpath%20d='M16%2017l5-5-5-5'/%3E%3Cpath%20d='M21%2012H9'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4'/%3E%3Cpath%20d='M16%2017l5-5-5-5'/%3E%3Cpath%20d='M21%2012H9'/%3E%3C/svg%3E");
}

.student-account-dropdown a:hover,
.student-account-dropdown button:hover {
    background: #eeeeee;
}

.student-aww-hero {
    position: relative;
    min-height: 320px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    align-items: center;
    gap: clamp(24px, 3.5vw, 52px);
    padding: clamp(24px, 3.5vw, 40px) clamp(28px, 3.2vw, 52px);
}

.student-aww-follow {
    position: absolute;
    top: clamp(32px, 3.8vw, 52px);
    left: clamp(28px, 3.2vw, 52px);
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    font-weight: 850;
}

.student-aww-profile {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 18px;
}

.student-aww-avatar {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #111111;
    color: #ffffff;
    font-size: 0;
}

.student-aww-profile h1 {
    color: #111111;
    font-size: clamp(34px, 3.5vw, 46px);
    font-weight: 900;
    letter-spacing: 0;
}

.student-aww-profile p {
    margin-top: 8px;
    color: #60646c;
    font-size: 14px;
    font-weight: 800;
}

.student-aww-actions {
    position: absolute;
    top: clamp(88px, 7.2vw, 126px);
    right: clamp(28px, 3.2vw, 52px);
    display: flex;
    gap: 12px;
}

.student-aww-actions a {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #111111;
    font-size: 20px;
}

.student-aww-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 84px 0 0;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
}

.student-aww-stats .student-metric-card {
    min-height: 108px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 18px 14px;
    border: 0;
    border-right: 1px solid #d4d4d4;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

.student-aww-stats .student-metric-card:last-child {
    border-right: 0;
}

.student-aww-stats .student-metric-card i {
    display: none;
}

.student-aww-stats .student-metric-card span,
.student-aww-stats .student-metric-card small {
    color: #60646c;
    font-size: 11px;
    font-weight: 850;
}

.student-aww-stats .student-metric-card strong {
    margin: 14px 0 6px;
    color: #111111;
    font-size: 26px;
}

.student-dashboard-home .student-dashboard-grid,
.student-dashboard-home .student-content-grid,
.student-dashboard-home .student-bottom-grid {
    padding: 0 clamp(28px, 3.2vw, 52px);
}

.student-dashboard-recommend {
    display: grid;
    gap: 18px;
    padding: 0 clamp(28px, 3.2vw, 52px) 56px;
}

.student-dashboard-recommend .student-card-head {
    align-items: flex-end;
    padding-bottom: 0;
}

.student-dashboard-recommend .student-card-head span {
    display: block;
    margin-bottom: 6px;
    color: #60646c;
    font-size: 12px;
    font-weight: 900;
}

.student-dashboard-course-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.student-dashboard-home .student-card,
.student-dashboard-home .student-continue-panel {
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
}

.student-dashboard-home .student-continue-panel {
    background: #111111;
    color: #ffffff;
}

.student-dashboard-home .student-continue-panel h2,
.student-dashboard-home .student-continue-panel .student-section-label,
.student-dashboard-home .student-progress-head {
    color: #ffffff;
}

.student-dashboard-home .student-continue-panel .student-muted {
    color: #cccccc;
}

.student-dashboard-home .student-main-btn {
    background: #ffffff;
    color: #111111;
}

.student-dashboard-home .student-ghost-btn {
    border-color: rgba(255, 255, 255, .34);
    background: transparent;
    color: #ffffff;
}

.student-dashboard-home .student-card-head h2 {
    color: #111111;
}

.student-dashboard-home .student-count-pill,
.student-dashboard-home .student-course-card,
.student-dashboard-home .student-task-item,
.student-dashboard-home .student-notice {
    border-color: #d4d4d4;
    background: #f8fafc;
}

@keyframes studentTicker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .student-aww-track {
        animation: none;
    }
}

@media (max-width: 1180px) {
    .student-aww-top,
    .student-aww-hero,
    .student-dashboard-home .student-dashboard-grid,
    .student-dashboard-home .student-content-grid,
    .student-dashboard-home .student-bottom-grid,
    .student-dashboard-recommend {
        padding-left: 24px;
        padding-right: 24px;
    }

    .student-aww-hero {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .student-aww-stats {
        margin-top: 0;
    }
}

@media (max-width: 760px) {
    .student-wrong-question-list a {
        grid-template-columns: 1fr;
    }

    .student-wrong-question-list span {
        text-align: left;
    }

    body.student-home-body {
        --student-home-nav-height: 210px;
    }

    .student-aww-top {
        grid-template-columns: 1fr;
        gap: 14px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .student-aww-links {
        flex-wrap: wrap;
    }

    .student-aww-top .student-top-actions {
        grid-column: auto;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .student-aww-top .student-search {
        max-width: none;
    }

    .student-top-tools {
        justify-content: flex-start;
    }

    .student-aww-hero {
        min-height: auto;
        padding-top: 34px;
    }

    .student-aww-follow,
    .student-aww-actions {
        position: static;
        width: fit-content;
    }

    .student-aww-profile {
        margin-top: 20px;
    }

    .student-aww-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-aww-stats .student-metric-card:nth-child(2) {
        border-right: 0;
    }

    .student-aww-stats .student-metric-card:nth-child(-n+2) {
        border-bottom: 1px solid #d4d4d4;
    }

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

/* Course center current-style override: replace the old sidebar/green course layout. */
body.student-course-body .student-dashboard-shell {
    display: block;
    background: transparent;
}

body.student-course-body .student-course-page {
    min-height: 100vh;
    padding: calc(var(--student-home-marquee-height) + var(--student-home-nav-height) + 32px) clamp(28px, 3.2vw, 52px) 52px;
    background: #f4f4f4;
}

body.student-course-body .student-course-join-panel,
body.student-course-body .student-course-page-card,
body.student-course-body .student-course-section-head strong {
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
}

body.student-course-body .student-course-join-panel {
    padding: clamp(20px, 2.4vw, 32px);
}

body.student-course-body .student-course-join-panel span,
body.student-course-body .student-course-section-head span {
    color: #60646c;
    letter-spacing: 0;
    text-transform: none;
}

body.student-course-body .student-course-join-panel h2,
body.student-course-body .student-course-section-head h2,
body.student-course-body .student-course-page-card h3 {
    color: #111111;
}

body.student-course-body .student-course-join-panel p,
body.student-course-body .student-course-page-card p,
body.student-course-body .student-course-page-card small {
    color: #60646c;
}

body.student-course-body .student-course-join-form input {
    border: 0;
    border-radius: 8px;
    background: #eeeeee;
    color: #111111;
    box-shadow: none;
}

body.student-course-body .student-course-join-form input:focus {
    border: 0;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(17, 17, 17, .10);
}

body.student-course-body .student-course-join-form button {
    background: #111111;
    color: #ffffff;
    box-shadow: none;
}

body.student-course-body .student-course-join-form button:hover {
    background: #242424;
    box-shadow: 0 14px 28px rgba(17, 17, 17, .16);
}

body.student-course-body .student-status-tag {
    border: 1px solid #d4d4d4;
    background: #f8fafc;
    color: #111111;
}

body.student-course-body .student-line-progress {
    background: #eeeeee;
}

body.student-course-body .student-line-progress span {
    background: #111111;
}

body.student-course-body .student-course-page-card .student-ghost-btn {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
}

body.student-course-body .student-course-page-card .student-ghost-btn:hover {
    background: #ffffff;
    color: #111111;
}

body.student-course-body .student-course-page-grid {
    gap: 18px;
}

body.student-course-body .student-course-page-card {
    min-height: 0;
    display: grid;
    grid-template-rows: 128px minmax(0, 1fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.student-course-body .student-course-page-card:hover {
    border-color: #bdbdbd;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .08);
    transform: translateY(-2px);
}

body.student-course-body .student-course-page-card .student-course-cover {
    width: 100%;
    height: 128px;
    min-height: 128px;
    border-radius: 0;
    background:
        radial-gradient(circle at 18% 28%, rgba(255, 255, 255, .72) 0 10%, transparent 11%),
        linear-gradient(135deg, #ececec 0%, #d8dde2 48%, #f7f7f7 100%);
    box-shadow: none;
}

body.student-course-body .student-course-page-card:nth-child(3n + 2) .student-course-cover {
    background:
        radial-gradient(circle at 78% 22%, rgba(255, 255, 255, .74) 0 9%, transparent 10%),
        linear-gradient(135deg, #f2f2f2 0%, #d6d1c8 52%, #ffffff 100%);
}

body.student-course-body .student-course-page-card:nth-child(3n) .student-course-cover {
    background:
        radial-gradient(circle at 24% 72%, rgba(255, 255, 255, .7) 0 10%, transparent 11%),
        linear-gradient(135deg, #eeeeee 0%, #d3d8d3 48%, #fafafa 100%);
}

body.student-course-body .student-course-card-body {
    min-width: 0;
    display: grid;
    gap: 12px;
    padding: 16px;
}

body.student-course-body .student-course-card-top,
body.student-course-body .student-course-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.student-course-body .student-course-card-top small {
    min-width: 0;
    overflow: hidden;
    color: #7a7f87;
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.student-course-body .student-course-page-card h3 {
    min-height: 48px;
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
}

body.student-course-body .student-course-page-card p {
    min-height: 44px;
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.student-course-body .student-course-card-foot {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #eeeeee;
}

body.student-course-body .student-course-card-foot > span {
    min-width: 0;
    overflow: hidden;
    color: #60646c;
    font-size: 13px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.student-course-body .student-course-page-card .student-course-progress-row,
body.student-course-body .student-course-page-card .student-line-progress {
    display: none;
}

body.student-course-body .student-course-page-card .student-ghost-btn {
    min-width: 86px;
    min-height: 36px;
    justify-self: auto;
    border-radius: 8px;
    font-size: 13px;
}

body.student-course-body .student-course-join-panel {
    width: 100%;
    grid-template-columns: minmax(110px, 150px) minmax(260px, 420px);
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
}

body.student-course-body .student-course-join-panel h2 {
    margin: 0;
    font-size: 16px;
}

body.student-course-body .student-course-join-form {
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 8px;
}

body.student-course-body .student-course-section-head .student-course-join-form {
    width: min(420px, 46vw);
    display: grid;
    flex: 0 1 420px;
    margin-left: auto;
}

.student-course-join-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.student-course-join-modal.open {
    display: flex;
}

.student-course-join-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .42);
}

.student-course-join-dialog {
    position: relative;
    z-index: 1;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(17, 24, 39, .18);
}

.student-course-join-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #eeeeee;
}

.student-course-join-head span {
    color: #60646c;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.student-course-join-head h2 {
    margin: 4px 0 0;
    color: #111111;
    font-size: 22px;
    font-weight: 950;
}

.student-course-join-head button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    font-size: 24px;
    font-weight: 950;
    line-height: 0;
    cursor: pointer;
}

body.student-course-body .student-course-join-preview,
body.student-course-detail-body .student-course-join-preview {
    padding: 18px 20px 20px;
}

body.student-course-body .student-course-join-preview article,
body.student-course-detail-body .student-course-join-preview article {
    display: grid;
    gap: 18px;
    min-height: 0;
}

body.student-course-body .student-course-join-preview small,
body.student-course-body .student-course-join-preview span,
body.student-course-body .student-course-join-preview p,
body.student-course-body .student-course-join-preview strong,
body.student-course-detail-body .student-course-join-preview small,
body.student-course-detail-body .student-course-join-preview span,
body.student-course-detail-body .student-course-join-preview p,
body.student-course-detail-body .student-course-join-preview strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.student-course-body .student-course-join-preview small,
body.student-course-body .student-course-join-preview span,
body.student-course-detail-body .student-course-join-preview small,
body.student-course-detail-body .student-course-join-preview span {
    color: #60646c;
    font-size: 12px;
    font-weight: 820;
    white-space: nowrap;
}

body.student-course-body .student-course-join-preview strong,
body.student-course-detail-body .student-course-join-preview strong {
    margin-top: 4px;
    color: #111111;
    font-size: 18px;
    font-weight: 950;
    white-space: nowrap;
}

body.student-course-body .student-course-join-preview p,
body.student-course-detail-body .student-course-join-preview p {
    margin: 6px 0 0;
    color: #3d434b;
    font-size: 13px;
    font-weight: 760;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.student-course-body .student-course-preview-actions,
body.student-course-detail-body .student-course-preview-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

body.student-course-body .student-course-preview-actions .student-main-btn:disabled,
body.student-course-detail-body .student-course-preview-actions .student-main-btn:disabled {
    border-color: #d8d8d8;
    background: #f2f2f2;
    color: #8a9099;
    cursor: not-allowed;
}

body.public-course-home-body {
    background: #f4f4f4;
}

.public-course-home {
    min-height: 100vh;
    padding: calc(var(--student-home-marquee-height) + var(--student-home-nav-height) + 32px) clamp(28px, 3.2vw, 52px) 52px;
}

.public-course-home-top .student-top-actions {
    width: min(680px, 52vw);
}

.public-course-home-top .student-search {
    flex: 1 1 auto;
}

.public-course-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px;
    min-height: 260px;
    padding: clamp(26px, 4vw, 52px);
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .74) 46%, rgba(255, 255, 255, .44) 100%),
        url('../images/auth/online-learning-crayon.png');
    background-color: #ffffff;
    background-size: cover;
    background-position: center;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
}

.public-course-hero span,
.public-course-section-head span {
    color: #60646c;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.public-course-hero h1 {
    max-width: 760px;
    margin: 8px 0 0;
    color: #111111;
    font-size: clamp(34px, 5vw, 68px);
    font-weight: 950;
    line-height: .98;
}

.public-course-hero p {
    max-width: 720px;
    margin: 18px 0 0;
    color: #3d434b;
    font-size: 16px;
    font-weight: 760;
    line-height: 1.6;
}

.public-course-hero-actions,
.public-course-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.public-course-section {
    margin-top: 28px;
}

.public-course-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.public-course-section-head h2 {
    margin: 6px 0 0;
    color: #111111;
    font-size: 28px;
    font-weight: 950;
}

.public-course-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.public-course-filters button {
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    background: #ffffff;
    color: #3d434b;
    font-size: 13px;
    font-weight: 880;
    cursor: pointer;
}

.public-course-filters button.active {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
}

.public-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 20px;
}

.public-course-grid .student-empty {
    grid-column: 1 / -1;
}

.public-course-card {
    display: grid;
    grid-template-rows: 180px auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
}

.public-course-cover {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 22px 24px;
    text-decoration: none;
    overflow: hidden;
    background: linear-gradient(135deg, #20262e 0%, #35404d 56%, #596675 100%);
}

.public-course-cover.cover-1,
.public-course-cover.cover-4 {
    background: linear-gradient(135deg, #2d333b 0%, #46515f 56%, #657282 100%);
}

.public-course-cover.cover-2,
.public-course-cover.cover-5 {
    background: linear-gradient(135deg, #332e2b 0%, #514841 56%, #72665c 100%);
}

.public-course-cover small,
.public-course-cover h3,
.public-course-cover p {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: #ffffff;
}

.public-course-cover small {
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.public-course-cover h3 {
    margin: 0;
    font-size: 23px;
    font-weight: 920;
    line-height: 1.16;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.public-course-cover p {
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-size: 13px;
    font-weight: 760;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.public-course-card-body {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.public-course-card-body > div {
    min-width: 0;
}

.public-course-card-body span {
    display: block;
    color: #60646c;
    font-size: 12px;
    font-weight: 820;
}

.public-course-card-body strong {
    display: block;
    margin-top: 3px;
    color: #111111;
    font-size: 14px;
    font-weight: 920;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-course-card-actions {
    justify-content: space-between;
}

@media (max-width: 760px) {
    .public-course-home {
        padding-top: calc(var(--student-home-marquee-height) + var(--student-home-nav-height) + 20px);
    }

    .public-course-home-top .student-top-actions {
        width: 100%;
    }

    .public-course-hero,
    .public-course-section-head {
        grid-template-columns: 1fr;
        display: grid;
    }

    .public-course-hero-actions,
    .public-course-filters {
        justify-content: flex-start;
    }
}

body.student-course-body .student-course-join-form input,
body.student-course-body .student-course-join-form button {
    height: 34px;
    font-size: 13px;
}

body.student-course-body .student-course-page-grid {
    grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
    gap: 20px;
}

body.student-course-body .student-course-page-card {
    grid-template-rows: 160px 84px;
    border-color: #d8d8d8;
    box-shadow: none;
    cursor: pointer;
}

body.student-course-body .student-course-page-card .student-course-cover {
    height: 160px;
    min-height: 160px;
    display: grid;
    align-content: start;
    gap: 7px;
    overflow: hidden;
    padding: 20px 24px;
    background:
        radial-gradient(circle at 78% 56%, rgba(255, 255, 255, .10) 0 18%, transparent 19%),
        linear-gradient(135deg, #252b33 0%, #465260 58%, #7a8591 100%);
}

body.student-course-body .student-course-cover.cover-1,
body.student-course-body .student-course-cover.cover-4 {
    background:
        radial-gradient(circle at 78% 56%, rgba(255, 255, 255, .10) 0 18%, transparent 19%),
        linear-gradient(135deg, #343b45 0%, #586473 58%, #8993a0 100%);
}

body.student-course-body .student-course-cover.cover-2,
body.student-course-body .student-course-cover.cover-5 {
    background:
        radial-gradient(circle at 78% 56%, rgba(255, 255, 255, .10) 0 18%, transparent 19%),
        linear-gradient(135deg, #3a3632 0%, #635b53 58%, #92877b 100%);
}

body.student-course-body .student-course-page-card .student-course-cover.cover-0 {
    background:
        radial-gradient(circle at 78% 56%, rgba(255, 255, 255, .07) 0 18%, transparent 19%),
        linear-gradient(135deg, #20262e 0%, #35404d 56%, #596675 100%);
}

body.student-course-body .student-course-page-card .student-course-cover.cover-1 {
    background:
        radial-gradient(circle at 78% 56%, rgba(255, 255, 255, .07) 0 18%, transparent 19%),
        linear-gradient(135deg, #2d333b 0%, #46515f 56%, #657282 100%);
}

body.student-course-body .student-course-page-card .student-course-cover.cover-2 {
    background:
        radial-gradient(circle at 78% 56%, rgba(255, 255, 255, .07) 0 18%, transparent 19%),
        linear-gradient(135deg, #332e2b 0%, #514841 56%, #72665c 100%);
}

body.student-course-body .student-course-page-card .student-course-cover.cover-3 {
    background:
        radial-gradient(circle at 78% 56%, rgba(255, 255, 255, .07) 0 18%, transparent 19%),
        linear-gradient(135deg, #26312f 0%, #3f4e4a 56%, #60706a 100%);
}

body.student-course-body .student-course-page-card .student-course-cover.cover-4 {
    background:
        radial-gradient(circle at 78% 56%, rgba(255, 255, 255, .07) 0 18%, transparent 19%),
        linear-gradient(135deg, #302f36 0%, #494b57 56%, #686d7a 100%);
}

body.student-course-body .student-course-page-card .student-course-cover.cover-5 {
    background:
        radial-gradient(circle at 78% 56%, rgba(255, 255, 255, .07) 0 18%, transparent 19%),
        linear-gradient(135deg, #2d2b28 0%, #4a433d 56%, #6c6258 100%);
}

body.student-course-body .student-course-card-body {
    position: relative;
    display: grid;
    grid-template-rows: 84px;
    min-width: 0;
    padding: 0;
}

body.student-course-body .student-course-cover > small,
body.student-course-body .student-course-cover > h3,
body.student-course-body .student-course-cover > p {
    min-width: 0;
    max-width: 100%;
    font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
    overflow: hidden;
}

body.student-course-body .student-course-cover > small {
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.student-course-body .student-course-page-card h3 {
    min-height: 0;
    max-height: 52px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}

body.student-course-body .student-course-page-card p {
    min-height: 0;
    max-height: 37px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}

body.student-course-body .teacher-course-id-chip {
    justify-self: start;
    max-width: 100%;
    height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    cursor: copy;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.student-course-body .teacher-course-id-chip:hover {
    background: rgba(255, 255, 255, .22);
}

body.student-course-body .student-course-card-foot {
    min-height: 84px;
    margin: 0;
    padding: 0 16px;
    border-top: 0;
    background: #ffffff;
}

body.student-course-body .student-course-card-foot > span {
    color: #2b3137;
    font-size: 14px;
    font-weight: 800;
}

body.student-course-body .student-course-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    cursor: default;
}

body.student-course-body .student-course-menu-wrap {
    position: relative;
    flex: 0 0 auto;
}

body.student-course-body .student-course-text-btn,
body.student-course-body .student-course-dots {
    min-height: 34px;
    border: 0;
    background: transparent;
    color: #242424;
    font: inherit;
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
}

body.student-course-body .student-course-dots {
    width: 28px;
    padding: 0;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 1;
}

body.student-course-body .student-course-menu {
    position: absolute;
    right: 0;
    bottom: 36px;
    z-index: 120;
    min-width: 112px;
    display: grid;
    gap: 2px;
    padding: 6px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 32px rgba(15, 23, 42, .12);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .14s ease, transform .14s ease;
}

body.student-course-body .student-course-menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

body.student-course-body .student-course-menu button {
    min-height: 32px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #242424;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    text-align: left;
    cursor: pointer;
}

body.student-course-body .student-course-menu button:hover {
    background: #eeeeee;
}

@media (max-width: 760px) {
    body.student-course-body .student-course-page {
        padding-top: calc(var(--student-home-marquee-height) + var(--student-home-nav-height) + 20px);
        padding-left: 20px;
        padding-right: 20px;
    }

    body.student-course-body .student-course-join-form {
        grid-template-columns: 1fr;
    }

    body.student-course-body .student-course-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    body.student-course-body .student-course-section-head .student-course-join-form {
        width: 100%;
        margin-left: 0;
    }
}

/* Course detail current-style override. */
body.student-course-detail-body .student-dashboard-shell {
    display: block;
    background: transparent;
}

body.student-course-detail-body .student-course-detail-modern {
    min-height: 100vh;
    padding: calc(var(--student-home-marquee-height) + var(--student-home-nav-height) + 32px) clamp(28px, 3.2vw, 52px) 52px;
    background: #f4f4f4;
}

.student-detail-back-link {
    min-height: 34px;
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 0 12px;
    border: 1px solid #dedede;
    border-radius: 6px;
    background: #ffffff;
    color: #343a42;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.student-detail-back-link:before {
    content: "<";
    width: 8px;
    height: 8px;
    border-left: 2px solid #6d747d;
    border-bottom: 2px solid #6d747d;
    color: transparent;
    font-size: 0;
    transform: rotate(45deg);
}

.student-detail-back-link:hover {
    border-color: #c9ced6;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .07);
    transform: translateY(-1px);
}

.student-detail-overview {
    display: block;
}

.student-detail-cover-modern {
    min-height: 236px;
    display: grid;
    align-content: space-between;
    gap: 26px;
    overflow: hidden;
    position: relative;
    padding: clamp(24px, 3vw, 36px);
    border: 0;
    border-radius: 8px;
    background:
        radial-gradient(circle at 78% 56%, rgba(255, 255, 255, .07) 0 18%, transparent 19%),
        linear-gradient(135deg, #20262e 0%, #35404d 56%, #596675 100%);
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .07);
}

.student-detail-cover-modern:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px) 0 0 / 24px 24px;
}

.student-detail-cover-modern span {
    width: max-content;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .76);
    font-size: 13px;
    font-weight: 850;
}

.student-detail-cover-modern h1 {
    max-width: 760px;
    margin: 0;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
    font-size: clamp(32px, 3.5vw, 48px);
    line-height: 1.08;
}

.student-detail-cover-modern.detail-cover-1 {
    background:
        radial-gradient(circle at 78% 56%, rgba(255, 255, 255, .07) 0 18%, transparent 19%),
        linear-gradient(135deg, #2d333b 0%, #46515f 56%, #657282 100%);
}

.student-detail-cover-modern.detail-cover-2 {
    background:
        radial-gradient(circle at 78% 56%, rgba(255, 255, 255, .07) 0 18%, transparent 19%),
        linear-gradient(135deg, #332e2b 0%, #514841 56%, #72665c 100%);
}

.student-detail-cover-modern.detail-cover-3 {
    background:
        radial-gradient(circle at 78% 56%, rgba(255, 255, 255, .07) 0 18%, transparent 19%),
        linear-gradient(135deg, #26312f 0%, #3f4e4a 56%, #60706a 100%);
}

.student-detail-cover-modern.detail-cover-4 {
    background:
        radial-gradient(circle at 78% 56%, rgba(255, 255, 255, .07) 0 18%, transparent 19%),
        linear-gradient(135deg, #302f36 0%, #494b57 56%, #686d7a 100%);
}

.student-detail-cover-modern.detail-cover-5 {
    background:
        radial-gradient(circle at 78% 56%, rgba(255, 255, 255, .07) 0 18%, transparent 19%),
        linear-gradient(135deg, #2d2b28 0%, #4a433d 56%, #6c6258 100%);
}

.student-detail-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    max-width: 820px;
}

.student-detail-facts article,
.student-detail-panel-modern,
.student-detail-tabs-modern {
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
}

.student-detail-facts article {
    min-height: 66px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .12);
    box-shadow: none;
    backdrop-filter: blur(10px);
}

.student-detail-facts span,
.student-detail-section-title span {
    color: #60646c;
    font-size: 12px;
    font-weight: 900;
}

.student-detail-cover-modern .student-detail-facts span {
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, .68);
    font-size: 11px;
}

.student-detail-facts strong {
    color: #ffffff;
    font-size: 16px;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.student-detail-cover-modern.is-locked .student-detail-facts {
    display: none;
}

.student-detail-locked-preview {
    max-width: 680px;
    margin: 0 auto;
}

.student-detail-tabs-modern {
    display: flex;
    width: max-content;
    max-width: 100%;
    gap: 6px;
    margin-top: 22px;
    padding: 5px;
    border-color: #e4e4e4;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
}

.student-detail-tabs-modern button {
    min-height: 34px;
    padding: 0 18px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #68707a;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.student-detail-tabs-modern button.active {
    background: #20242a;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(32, 36, 42, .16);
}

.student-detail-panel-modern {
    margin-top: 16px;
    padding: clamp(18px, 2.4vw, 28px);
    overflow: visible;
}

.student-detail-panel-modern[hidden] {
    display: none;
}

.student-detail-section-title {
    display: grid;
    gap: 6px;
    margin-bottom: 18px;
}

.student-detail-section-title h2 {
    margin: 0;
    color: #111111;
    font-size: 26px;
    font-weight: 950;
}

.student-analysis-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 14px;
}

.student-analysis-toolbar span {
    color: #60646c;
    font-size: 12px;
    font-weight: 900;
}

.student-analysis-toolbar select {
    min-width: 150px;
    height: 36px;
    border: 1px solid #d8dde6;
    border-radius: 8px;
    background: #ffffff;
    color: #20242a;
    font-size: 13px;
    font-weight: 850;
}

.student-detail-intro-text {
    max-width: 920px;
    margin: 0 0 20px;
    color: #4f565f;
    font-size: 15px;
    font-weight: 760;
    line-height: 1.8;
}

.student-detail-meta-grid,
.student-detail-analysis-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.student-detail-meta-grid article,
.student-detail-analysis-grid article {
    min-height: 86px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 14px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    background: #f8fafc;
}

.student-detail-meta-grid span,
.student-detail-analysis-grid span {
    color: #60646c;
    font-size: 12px;
    font-weight: 850;
}

.student-detail-meta-grid strong,
.student-detail-analysis-grid strong {
    color: #111111;
    font-size: 18px;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.student-detail-resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

#detailMaterialList.student-detail-resource-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

#detailQuizList.student-detail-resource-grid {
    grid-template-columns: 1fr;
    gap: 0;
}

.student-material-row-modern {
    min-height: 84px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    align-items: center;
    column-gap: 14px;
    padding: 0 18px 0 0;
    border: 1px solid #e6e9ee;
    border-radius: 10px;
    background: #ffffff;
    color: inherit;
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
}

.student-material-row-modern:has(.student-material-menu) {
    grid-template-columns: minmax(0, 1fr) 36px 32px;
}

.student-material-file-open {
    min-width: 0;
    min-height: 84px;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 14px 8px 14px 18px;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.student-material-download {
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8dde6;
    border-radius: 7px;
    color: #20242c;
    background: #ffffff;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
    transition: border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.student-material-download:hover {
    border-color: #20242a;
    color: #ffffff;
    background: #20242a;
}

.student-material-download-icon {
    justify-self: end;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 10px;
    border-color: #d7dde6;
    color: #1f2937;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 6px 14px rgba(15, 23, 42, .06);
}

.student-material-download-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.student-material-download-icon:hover {
    border-color: #98a2b3;
    color: #111827;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .10);
}

.student-material-file-open:hover strong {
    color: #000000;
}

.student-material-row-modern strong,
.student-material-row-modern span,
.student-material-row-modern small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-material-row-modern strong {
    color: #20242c;
    font-size: 17px;
    font-weight: 900;
}

.student-material-row-modern span {
    margin-top: 5px;
    color: #737985;
    font-size: 12px;
    font-weight: 760;
}

.student-material-row-modern small {
    margin-top: 4px;
    color: #60646c;
    font-size: 12px;
    font-weight: 760;
}

.student-material-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    color: #8a8f99;
    font-size: 13px;
    font-weight: 850;
}

.student-material-path button {
    border: 0;
    background: transparent;
    color: #3f68b0;
    cursor: pointer;
    font: inherit;
    padding: 0;
}

.student-material-path button:hover {
    color: #234f96;
}

.student-material-browser {
    display: grid;
    gap: 10px;
    overflow: visible;
}

.teacher-detail-material-tools {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: -6px;
}

.teacher-detail-material-tools[hidden] {
    display: none;
}

.teacher-detail-material-action {
    width: 108px;
    height: 34px;
    border: 1px solid #cfd6df;
    border-radius: 7px;
    min-width: 108px;
    padding: 0 12px;
    color: #20242a;
    background: #ffffff;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

.teacher-detail-material-action:hover {
    border-color: #20242a;
    color: #ffffff;
    background: #20242a;
}

#detailUploadFileBtn {
    border-color: #cfd6df;
    color: #20242a;
    background: #ffffff;
}

#detailUploadFileBtn:hover {
    border-color: #20242a;
    color: #ffffff;
    background: #20242a;
}

.teacher-detail-material-action:disabled {
    cursor: wait;
    opacity: .62;
}

.student-material-folder-card {
    min-height: 84px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    padding: 0 14px 0 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    text-align: left;
    position: relative;
    z-index: 1;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.student-material-folder-open {
    min-width: 0;
    min-height: 84px;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 14px 8px 14px 18px;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.student-material-folder-card:hover {
    border-color: #cfd8e6;
    box-shadow: 0 12px 28px rgba(28, 35, 46, .08);
}

.student-material-folder-card i {
    width: 50px;
    height: 38px;
    display: block;
    position: relative;
    border-radius: 7px 7px 5px 5px;
    background: linear-gradient(180deg, #e3c16f 0%, #c49b43 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36);
}

.student-material-folder-card i:before {
    content: "";
    position: absolute;
    left: 4px;
    top: -7px;
    width: 21px;
    height: 11px;
    border-radius: 7px 7px 0 0;
    background: #eccd83;
}

.student-material-folder-card strong,
.student-material-folder-card span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-material-folder-card strong {
    color: #20242c;
    font-size: 17px;
    font-weight: 900;
}

.student-material-folder-card span {
    margin-top: 5px;
    color: #737985;
    font-size: 12px;
    font-weight: 760;
}

.student-material-menu {
    position: relative;
    justify-self: end;
    align-self: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    display: grid;
    place-items: center;
    z-index: 2;
}

.student-material-menu-trigger {
    width: 28px;
    height: 30px;
    border: 0;
    border-radius: 7px;
    padding: 0;
    color: #20242c;
    background: transparent;
    font-size: 18px;
    font-weight: 850;
    letter-spacing: 1px;
    line-height: 1;
    cursor: pointer;
}

.teacher-quiz-more-button,
.student-material-menu-trigger.teacher-quiz-more-button {
    position: relative;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 0;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    color: #242326;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
    transition: color .18s ease, transform .18s ease;
}

body.student-course-body .student-material-menu-trigger.teacher-quiz-more-button.student-course-dots {
    min-height: 0;
    width: 32px;
    height: 32px;
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
}

.teacher-quiz-more-button::before,
.student-material-menu-trigger.teacher-quiz-more-button::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    display: block;
    border-radius: 999px;
    background: currentColor;
    box-shadow: -7px 0 0 currentColor, 7px 0 0 currentColor;
    transform: translate(-50%, -50%);
}

.teacher-quiz-more-button:hover,
.teacher-quiz-more-button.is-open,
.student-material-menu.is-open .student-material-menu-trigger.teacher-quiz-more-button {
    color: #111111;
    transform: none;
}

.teacher-quiz-actions-menu,
.student-material-action-menu {
    position: fixed;
    z-index: 20000;
    min-width: 112px;
    display: grid;
    gap: 4px;
    padding: 6px;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
}

.teacher-quiz-actions-menu[hidden],
.student-material-action-menu[hidden] {
    display: none;
}

.teacher-quiz-actions-menu button,
.student-material-action-menu button {
    width: 100%;
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    padding: 0 10px;
    background: transparent;
    color: #242326;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.teacher-quiz-actions-menu button:hover,
.student-material-action-menu button:hover {
    background: #f4f4f4;
}

.teacher-quiz-actions-menu [data-menu-delete],
.teacher-quiz-actions-menu [data-global-menu-action="delete"],
.teacher-quiz-actions-menu [data-quiz-panel-action="delete"],
.student-material-action-menu [data-global-menu-action="delete"],
.student-material-action-menu [data-quiz-panel-action="delete"] {
    color: #b42318;
}

.teacher-detail-dialog {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 6000;
    place-items: center;
    padding: 20px;
}

.teacher-detail-dialog.is-open {
    display: grid;
}

.teacher-detail-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .34);
    backdrop-filter: blur(3px);
}

.teacher-detail-dialog-panel {
    width: min(420px, 100%);
    position: relative;
    z-index: 1;
    border: 1px solid rgba(24, 24, 24, .1);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
    overflow: hidden;
}

.teacher-detail-dialog-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 18px 12px;
    border-bottom: 1px solid #edf0f4;
}

.teacher-detail-dialog-head div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.teacher-detail-dialog-head span,
.teacher-detail-dialog-form label {
    color: #667085;
    font-size: 12px;
    font-weight: 850;
}

.teacher-detail-dialog-head strong {
    overflow: hidden;
    color: #181818;
    font-size: 18px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-detail-dialog-head button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    color: #667085;
    background: #f4f6f9;
    font-weight: 900;
    cursor: pointer;
}

.teacher-detail-dialog-form {
    display: grid;
    gap: 10px;
    padding: 16px 18px 18px;
}

.teacher-detail-dialog-form input,
.teacher-detail-dialog-form select {
    height: 40px;
    border: 1px solid #d8dde6;
    border-radius: 8px;
    padding: 0 12px;
    color: #181818;
    background: #ffffff;
    font: inherit;
}

.teacher-detail-dialog-form input:focus,
.teacher-detail-dialog-form select:focus {
    border-color: #181818;
    outline: 0;
}

.teacher-detail-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.teacher-detail-dialog-actions button {
    height: 34px;
    border: 1px solid #d8dde6;
    border-radius: 8px;
    padding: 0 14px;
    color: #1f2937;
    background: #ffffff;
    font-weight: 850;
    cursor: pointer;
}

.teacher-detail-dialog-actions button.primary {
    border-color: #181818;
    color: #ffffff;
    background: #181818;
}

.teacher-detail-dialog-actions .danger-btn {
    border-color: #fda29b;
    color: #b42318;
    background: #fff5f5;
}

#detailFolderModal .teacher-detail-dialog-actions button {
    min-width: 96px;
    height: 38px;
    padding: 0 18px;
}

.material-preview-dialog {
    z-index: 6200;
}

.material-preview-panel {
    width: min(1240px, calc(100vw - 32px));
    height: min(820px, calc(100vh - 32px));
    max-height: calc(100vh - 32px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(224, 228, 236, .96);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 28px 90px rgba(15, 23, 42, .20);
}

.material-preview-head {
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 64px;
    padding: 14px 18px;
    border-bottom: 1px solid #edf0f4;
    background: #ffffff;
}

.material-preview-head #materialPreviewTitle {
    display: block;
    min-width: 0;
    max-width: min(820px, 70vw);
    overflow: hidden;
    color: #181818;
    font-size: 17px;
    font-weight: 950;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-preview-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8dde6;
    border-radius: 10px;
    background: #ffffff;
    color: #667085;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.material-preview-close:hover {
    border-color: #20242a;
    background: #20242a;
    color: #ffffff;
    transform: translateY(-1px);
}

.material-preview-body {
    min-height: 0;
    display: grid;
    padding: 18px;
    background:
        radial-gradient(circle at top left, rgba(24, 24, 24, .04), transparent 30%),
        linear-gradient(180deg, #f7f8fa 0%, #eef1f5 100%);
}

.material-preview-shell {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    gap: 14px;
}

.material-preview-shell.is-image {
    grid-template-rows: auto minmax(0, 1fr);
}

.material-preview-surface {
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: grid;
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .08);
}

.material-preview-frame,
.material-preview-html,
.material-preview-text,
.material-preview-audio,
.material-preview-fallback {
    width: 100%;
    height: 100%;
}

.material-preview-frame {
    border: 0;
    background: #ffffff;
}

object.material-preview-frame {
    display: block;
}

.material-preview-shell.is-media .material-preview-surface {
    place-items: center;
    padding: 18px;
    background: #101114;
}

.material-preview-shell.is-media video {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    background: #000000;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .26);
}

.material-preview-shell.is-media video.is-landscape-fit {
    width: 100%;
    height: auto;
}

.material-preview-shell.is-media video.is-portrait-fit {
    width: auto;
    height: 100%;
}

.material-preview-shell.is-media video.is-measured-fit {
    max-width: none;
    max-height: none;
}

.material-preview-media-fallback {
    width: min(520px, 100%);
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    color: #ffffff;
    text-align: center;
}

.material-preview-media-fallback[hidden] {
    display: none;
}

.material-preview-media-fallback strong {
    font-size: 16px;
    font-weight: 900;
}

.material-preview-media-fallback span {
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    line-height: 1.6;
}

.material-preview-image-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

.material-preview-icon-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8dde6;
    border-radius: 10px;
    background: #ffffff;
    color: #475467;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.material-preview-icon-btn svg,
.material-preview-close svg,
.material-preview-slider-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.material-preview-icon-btn:hover {
    border-color: #20242a;
    background: #f8fafc;
    color: #181818;
    transform: translateY(-1px);
}

.material-preview-icon-btn.is-active {
    border-color: #20242a;
    background: #20242a;
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(15, 23, 42, .14);
}

.material-preview-slider-wrap {
    min-width: 220px;
    flex: 1 1 360px;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid #e4e7ec;
    border-radius: 999px;
    background: #f8fafc;
    color: #667085;
}

.material-preview-slider-btn {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    color: #475467;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.material-preview-slider-btn:hover {
    background: #20242a;
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(15, 23, 42, .14);
    transform: translateY(-1px);
}

.material-preview-zoom-range {
    width: 100%;
    min-width: 120px;
    accent-color: #20242a;
    cursor: pointer;
}

.material-preview-scale-value {
    flex: 0 0 auto;
    min-width: 68px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 999px;
    background: #f5f6f8;
    color: #475467;
    font-size: 12px;
    font-weight: 900;
}

.material-preview-image-scroll {
    overflow: auto;
    place-items: center;
    padding: 18px;
    background:
        linear-gradient(45deg, rgba(148, 163, 184, .13) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(148, 163, 184, .13) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, .13) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, .13) 75%),
        #ffffff;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-size: 20px 20px;
}

.material-preview-image-scroll img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    object-fit: contain;
    transform-origin: center center;
    transition: transform .18s ease, width .18s ease, max-width .18s ease, max-height .18s ease;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .18);
}

.material-preview-image-scroll img.is-fit {
    width: auto;
    height: auto;
}

.material-preview-html {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: #ffffff;
}

.material-preview-html-tabs {
    display: inline-flex;
    gap: 8px;
    padding: 12px 14px 0;
    border-bottom: 1px solid #edf0f4;
    background: #ffffff;
}

.material-preview-html-tab {
    height: 36px;
    padding: 0 14px;
    border: 1px solid #d8dde6;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    background: #f8fafc;
    color: #475467;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}

.material-preview-html-tab.is-active {
    background: #ffffff;
    color: #181818;
}

.material-preview-html-panels {
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.material-preview-html-panel {
    display: none;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.material-preview-html-panel.is-active {
    display: grid;
    min-height: 0;
}

.material-preview-html-panel[data-html-panel="code"] {
    background: #ffffff;
}

.material-preview-html-panel[data-html-panel="code"] .material-preview-text,
.material-preview-html-panel[data-html-panel="code"] .material-preview-code {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.material-preview-audio,
.material-preview-fallback {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    padding: 36px;
    text-align: center;
}

.material-preview-audio strong,
.material-preview-fallback strong {
    color: #181818;
    font-size: 20px;
    font-weight: 950;
}

.material-preview-audio span,
.material-preview-fallback span {
    max-width: 580px;
    color: #667085;
    font-size: 13px;
    font-weight: 760;
    line-height: 1.7;
}

.material-preview-audio audio {
    width: min(620px, 100%);
    margin-top: 6px;
}

.material-preview-text {
    margin: 0;
    overflow: auto;
    padding: 20px 22px;
    color: #20242c;
    background: #ffffff;
    font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

.material-preview-code {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    background: #fbfcfe;
    color: #172033;
    font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    tab-size: 4;
}

.material-preview-code.is-loading {
    display: grid;
    place-items: center;
    padding: 32px;
    color: #64748b;
}

.material-preview-code-bar {
    min-width: 0;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 16px;
    border-bottom: 1px solid #d8e0ea;
    background: #ffffff;
    color: #64748b;
    letter-spacing: 0;
}

.material-preview-code-bar span,
.material-preview-code-bar em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-preview-code-bar span {
    color: #172033;
    font-size: 12px;
    font-weight: 900;
}

.material-preview-code-bar em {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    font-weight: 760;
}

.material-preview-code-scroll {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 14px 0 18px;
    scrollbar-color: #cbd5e1 #f8fafc;
    scrollbar-width: thin;
}

.material-preview-code-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.material-preview-code-scroll::-webkit-scrollbar-track {
    background: #f8fafc;
}

.material-preview-code-scroll::-webkit-scrollbar-thumb {
    border: 2px solid #f8fafc;
    border-radius: 999px;
    background: #cbd5e1;
}

.material-preview-code .code-line {
    width: max-content;
    min-width: 100%;
    display: grid;
    grid-template-columns: 64px max-content;
    gap: 16px;
    padding: 0 24px 0 0;
}

.material-preview-code .code-line:hover {
    background: #f1f5f9;
}

.material-preview-code .line-no {
    position: sticky;
    left: 0;
    z-index: 1;
    padding-right: 14px;
    border-right: 1px solid #d8e0ea;
    background: #fbfcfe;
    color: #94a3b8;
    font-size: 12px;
    text-align: right;
    user-select: none;
}

.material-preview-code code {
    white-space: pre;
    color: #172033;
}

.material-preview-code .syntax-keyword {
    color: #7c3aed;
    font-weight: 800;
}

.material-preview-code .syntax-string {
    color: #b45309;
}

.material-preview-code .syntax-comment {
    color: #64748b;
    font-style: italic;
}

.material-preview-code .syntax-number {
    color: #dc2626;
}

.material-preview-code .syntax-tag {
    color: #2563eb;
    font-weight: 800;
}

.material-preview-code .syntax-attr {
    color: #0f766e;
}

@media (max-width: 760px) {
    .material-preview-panel {
        width: calc(100vw - 18px);
        height: calc(100vh - 18px);
        border-radius: 16px;
    }

    .material-preview-head {
        min-height: 58px;
        padding: 12px 14px;
    }

    .material-preview-head #materialPreviewTitle {
        max-width: calc(100vw - 90px);
        font-size: 15px;
    }

    .material-preview-body {
        padding: 10px;
    }

    .material-preview-image-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .material-preview-slider-wrap {
        min-width: 0;
        flex: 1 1 100%;
    }

    .material-preview-icon-btn {
        flex: 1 1 44px;
    }

    .material-preview-scale-value {
        align-self: center;
    }
}

.teacher-detail-dialog-panel.teacher-question-preview-dialog {
    width: min(980px, calc(100vw - 40px));
    max-width: 980px;
    max-height: calc(100vh - 44px);
    overflow: auto;
}

.teacher-question-preview-dialog .teacher-detail-dialog-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #ffffff;
}

.teacher-question-preview-dialog .teacher-question-type-picker,
.teacher-question-preview-dialog .teacher-question-builder {
    padding: 16px 18px 18px;
}

.teacher-question-preview-dialog .teacher-question-builder {
    grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr);
}

.teacher-question-preview-dialog .teacher-question-analysis-card,
.teacher-question-preview-dialog .teacher-detail-dialog-actions {
    grid-column: 2;
}

.teacher-question-preview-dialog .teacher-question-option-card {
    min-width: 0;
}

.teacher-question-preview-dialog .teacher-question-option-card button {
    width: 100%;
    height: 36px;
    border: 1px solid #181818;
    border-radius: 8px;
    background: #ffffff;
    color: #181818;
    font-weight: 850;
    cursor: pointer;
}

.teacher-question-preview-dialog .teacher-question-option-card button:hover {
    background: #181818;
    color: #ffffff;
}

@media (max-width: 900px) {
    .teacher-detail-dialog-panel.teacher-question-preview-dialog {
        width: min(96vw, 760px);
    }

    .teacher-question-preview-dialog .teacher-question-builder {
        grid-template-columns: 1fr;
    }

    .teacher-question-preview-dialog .teacher-question-common-card,
    .teacher-question-preview-dialog .teacher-question-analysis-card,
    .teacher-question-preview-dialog .teacher-detail-dialog-actions {
        grid-column: 1;
    }

    .teacher-question-preview-dialog .teacher-question-type-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .teacher-detail-dialog {
        padding: 10px;
    }

    .teacher-detail-dialog-panel.teacher-question-preview-dialog {
        width: 100%;
        max-height: calc(100vh - 20px);
    }

    .teacher-question-preview-dialog .teacher-question-type-picker {
        grid-template-columns: 1fr;
    }

    .teacher-question-common-card > div:first-child,
    .teacher-question-option-grid {
        grid-template-columns: 1fr;
    }
}

.student-material-row-modern .student-material-file-icon {
    --file-accent: #6f86d8;
    width: 46px;
    height: 52px;
    display: block;
    position: relative;
    border: 1px solid color-mix(in srgb, var(--file-accent) 42%, #dfe4ea);
    border-radius: 7px 7px 4px 4px;
    background: #ffffff;
    color: #ffffff;
    font-style: normal;
    padding: 0;
    box-shadow: 0 8px 16px rgba(25, 32, 44, .08);
}

.student-material-row-modern .student-material-file-icon:before {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    border-style: solid;
    border-width: 0 15px 15px 0;
    border-color: transparent var(--file-accent) transparent transparent;
    opacity: .9;
}

.student-material-row-modern .student-material-file-icon em {
    width: 24px;
    height: 20px;
    position: absolute;
    left: 10px;
    top: 11px;
    display: block;
    border-radius: 5px;
    background: color-mix(in srgb, var(--file-accent) 14%, #ffffff);
}

.student-material-row-modern .student-material-file-icon span {
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -1px;
    height: 19px;
    display: grid;
    place-items: center;
    border-radius: 0 0 4px 4px;
    background: var(--file-accent);
    color: #ffffff;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0;
}

.student-material-row-modern .student-material-file-icon[data-type="PDF"] {
    --file-accent: #cf5555;
}

.student-material-row-modern .student-material-file-icon[data-type="PDF"] em:before,
.student-material-row-modern .student-material-file-icon[data-type="PDF"] em:after {
    content: "";
    position: absolute;
    left: 5px;
    right: 5px;
    height: 2px;
    border-radius: 2px;
    background: var(--file-accent);
}

.student-material-row-modern .student-material-file-icon[data-type="PDF"] em:before {
    top: 7px;
    box-shadow: 0 5px 0 var(--file-accent), 0 10px 0 var(--file-accent);
}

.student-material-row-modern .student-material-file-icon[data-type="VIDEO"] {
    --file-accent: #3f8b72;
}

.student-material-row-modern .student-material-file-icon[data-type="VIDEO"] em:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 6px;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent var(--file-accent);
}

.student-material-row-modern .student-material-file-icon[data-type="AUDIO"] {
    --file-accent: #ba5a86;
}

.student-material-row-modern .student-material-file-icon[data-type="AUDIO"] em:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 5px;
    width: 7px;
    height: 12px;
    border-radius: 2px;
    background: var(--file-accent);
    box-shadow: 8px 3px 0 -2px var(--file-accent), 13px 1px 0 -3px var(--file-accent);
}

.student-material-row-modern .student-material-file-icon[data-type="WORD"] {
    --file-accent: #5877cf;
}

.student-material-row-modern .student-material-file-icon[data-type="PPT"] {
    --file-accent: #c86945;
}

.student-material-row-modern .student-material-file-icon[data-type="PPT"] em:before {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    width: 16px;
    height: 12px;
    border: 2px solid var(--file-accent);
    border-radius: 3px;
}

.student-material-row-modern .student-material-file-icon[data-type="PPT"] em:after {
    content: "";
    position: absolute;
    left: 11px;
    top: 17px;
    width: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--file-accent);
    box-shadow: -3px 3px 0 var(--file-accent), 3px 3px 0 var(--file-accent);
}

.student-material-row-modern .student-material-file-icon[data-type="WORD"] em:before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    width: 16px;
    height: 3px;
    border-radius: 3px;
    background: var(--file-accent);
    box-shadow: 0 6px 0 color-mix(in srgb, var(--file-accent) 70%, #ffffff), 0 12px 0 color-mix(in srgb, var(--file-accent) 45%, #ffffff);
}

.student-material-row-modern .student-material-file-icon[data-type="EXCEL"] {
    --file-accent: #438c56;
}

.student-material-row-modern .student-material-file-icon[data-type="EXCEL"] em {
    background-image: linear-gradient(var(--file-accent) 1px, transparent 1px), linear-gradient(90deg, var(--file-accent) 1px, transparent 1px);
    background-size: 8px 8px;
}

.student-material-row-modern .student-material-file-icon[data-type="IMAGE"] {
    --file-accent: #c97b43;
}

.student-material-row-modern .student-material-file-icon[data-type="IMAGE"] em:before {
    content: "";
    position: absolute;
    left: 5px;
    bottom: 5px;
    width: 17px;
    height: 10px;
    clip-path: polygon(0 100%, 36% 42%, 55% 68%, 78% 24%, 100% 100%);
    background: var(--file-accent);
}

.student-material-row-modern .student-material-file-icon[data-type="IMAGE"] em:after {
    content: "";
    position: absolute;
    right: 5px;
    top: 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--file-accent);
}

.student-material-row-modern .student-material-file-icon[data-type="ZIP"] {
    --file-accent: #7562bd;
}

.student-material-row-modern .student-material-file-icon[data-type="ZIP"] em:before {
    content: "";
    position: absolute;
    left: 11px;
    top: 3px;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: repeating-linear-gradient(180deg, var(--file-accent) 0 3px, transparent 3px 5px);
}

.student-material-row-modern .student-material-file-icon[data-type="FILE"] {
    --file-accent: #747d89;
}

.student-material-row-modern .student-material-file-icon[data-type="FILE"] em:before {
    content: "";
    position: absolute;
    left: 6px;
    top: 7px;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--file-accent);
    box-shadow: 0 6px 0 color-mix(in srgb, var(--file-accent) 58%, #ffffff);
}

#detailMaterialList .student-material-row-modern .student-material-file-icon span {
    margin-top: 0;
    color: #ffffff;
}

.student-detail-resource-card {
    min-height: 108px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    background: #ffffff;
    color: inherit;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.student-detail-resource-card:hover {
    border-color: #c8c8c8;
    box-shadow: 0 16px 32px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.student-detail-resource-card i {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #111111;
    color: #ffffff;
    font-size: 12px;
    font-style: normal;
    font-weight: 950;
}

.student-detail-resource-card strong,
.student-detail-resource-card span,
.student-detail-resource-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-detail-resource-card strong {
    color: #111111;
    font-size: 15px;
    font-weight: 950;
}

.student-detail-resource-card span,
.student-detail-resource-card small {
    margin-top: 5px;
    color: #60646c;
    font-size: 12px;
    font-weight: 820;
}

.student-course-test-board {
    display: grid;
    grid-template-columns: minmax(280px, .86fr) minmax(320px, 1fr);
    gap: 18px;
    align-items: stretch;
}

.student-course-test-map {
    min-height: 270px;
    position: relative;
    overflow: hidden;
    border: 1px solid #e0e3e8;
    border-radius: 8px;
    background: #fbfcfd;
}

.student-test-blob {
    position: absolute;
    border: 1.5px solid;
    opacity: .94;
}

.student-test-blob.blob-a {
    width: 57%;
    height: 46%;
    left: 7%;
    top: 8%;
    border-color: #83a963;
    border-radius: 48% 52% 46% 54%;
    background: rgba(205, 225, 184, .68);
    transform: rotate(12deg);
}

.student-test-blob.blob-b {
    width: 42%;
    height: 45%;
    right: 7%;
    top: 10%;
    border-color: #d5a26f;
    border-radius: 50% 48% 54% 46%;
    background: rgba(249, 215, 181, .62);
    transform: rotate(-7deg);
}

.student-test-blob.blob-c {
    width: 72%;
    height: 48%;
    left: 10%;
    bottom: 8%;
    border-color: #7396bf;
    border-radius: 46% 54% 44% 56%;
    background: rgba(203, 220, 240, .64);
    transform: rotate(3deg);
}

.student-quiz-map-node {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 128px;
    color: #29313a;
    font-size: 11px;
    font-weight: 850;
}

.student-quiz-map-node i {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid #236eb7;
    border-radius: 50%;
    background: #3b8bd6;
    color: #ffffff;
    font-size: 7px;
    font-style: normal;
    font-weight: 950;
}

.student-quiz-map-node b {
    overflow: hidden;
    color: #39414b;
    font-size: 10px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-quiz-map-node.node-0 {
    left: 23%;
    top: 23%;
}

.student-quiz-map-node.node-1 {
    left: 45%;
    top: 36%;
}

.student-quiz-map-node.node-2 {
    right: 18%;
    top: 35%;
}

.student-quiz-map-node.node-3 {
    left: 28%;
    bottom: 24%;
}

.student-quiz-map-node.node-4 {
    right: 29%;
    bottom: 15%;
}

.student-course-test-list {
    display: grid;
    gap: 10px;
}

.student-course-test-card {
    min-height: 86px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid #e2e5e9;
    border-radius: 8px;
    background: #ffffff;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.student-course-test-card:hover {
    border-color: #ccd4df;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .07);
    transform: translateY(-1px);
}

.student-course-test-card > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eef4fb;
    color: #2f72b9;
    font-size: 13px;
    font-style: normal;
    font-weight: 950;
}

.student-course-test-card strong,
.student-course-test-card span,
.student-course-test-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-course-test-card strong {
    color: #20242a;
    font-size: 15px;
    font-weight: 950;
}

.student-course-test-card span,
.student-course-test-card small {
    margin-top: 4px;
    color: #68707a;
    font-size: 12px;
    font-weight: 780;
}

.student-course-test-card a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 5px;
    background: #20242a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.student-course-test-card a:hover {
    background: #313842;
}

.student-course-test-list-modern {
    width: 100%;
    display: grid;
    gap: 10px;
}

.student-course-test-row {
    min-height: 84px;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) minmax(128px, auto);
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.student-course-test-row:hover {
    border-color: #cfd8e6;
    box-shadow: 0 12px 28px rgba(28, 35, 46, .08);
    transform: translateY(-1px);
}

.student-course-test-type {
    display: grid;
    justify-items: center;
}

.student-course-test-type i {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd928 0%, #f7bd00 100%);
    color: #ffffff;
    font-style: normal;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 20px rgba(244, 187, 0, .18);
}

.student-course-test-type i span {
    width: 22px;
    height: 26px;
    display: block;
    position: relative;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(122, 92, 0, .08);
}

.student-course-test-type i span:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 7px;
    width: 9px;
    height: 2px;
    border-radius: 2px;
    background: #f2bd00;
    box-shadow: 0 6px 0 #f2bd00, 0 12px 0 #f2bd00;
}

.student-course-test-type i span:after {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    width: 3px;
    height: 3px;
    border: 1.6px solid #f2bd00;
    border-radius: 2px;
    box-shadow: 0 6px 0 -1px #ffffff, 0 6px 0 0 #f2bd00, 0 12px 0 -1px #ffffff, 0 12px 0 0 #f2bd00;
}

.student-course-test-main {
    min-width: 0;
}

.student-course-test-title-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-course-test-main strong {
    min-width: 0;
    display: block;
    flex: 0 1 auto;
    overflow: hidden;
    color: #20242a;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-course-test-main span {
    display: block;
    overflow: hidden;
    margin-top: 6px;
    color: #606873;
    font-size: 12px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-course-test-title-row .student-course-test-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    overflow: visible;
    text-overflow: clip;
}

.student-course-test-row .student-course-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: nowrap;
    justify-self: end;
    min-width: max-content;
}

.student-course-test-row .student-material-menu {
    flex: 0 0 auto;
}

.student-course-edit-questions {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 1px solid #20242a;
    border-radius: 8px;
    background: #20242a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .10);
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.student-course-edit-questions:hover {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .16);
    transform: translateY(-1px);
}

.student-course-test-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.student-course-test-status {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    font-style: normal;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    border: 1px solid #d7dce3;
    background: #f7f8fa;
    color: #5b6470;
}

.student-course-test-status.is-published,
.student-course-test-status.has-score {
    border-color: #dfc56d;
    background: #fff7d8;
    color: #80610c;
}

.student-course-test-status.is-grading {
    border-color: #d6dbe2;
    background: #f4f5f7;
    color: #7b838f;
}

.student-course-test-status.is-open,
.student-course-test-status.is-pending {
    border-color: #c8ddd2;
    background: #f5fbf8;
    color: #3a755d;
}

.student-course-test-status.is-closed {
    border-color: #e1e3e7;
    background: #f4f5f7;
    color: #8a9099;
}

.student-course-test-score {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    margin-left: 0;
    border: 1px solid #d6dbe2;
    border-radius: 4px;
    background: #ffffff;
    color: #4c5561;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    justify-self: end;
    transition: border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.student-course-test-score:hover {
    border-color: #bfc8d4;
    color: #20242a;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

span.student-course-test-score {
    cursor: default;
}

.student-course-test-score.has-score {
    border-color: #dfc56d;
    background: #fff7d8;
    color: #80610c;
}

.student-course-test-score.is-submitted {
    border-color: #c8ddd2;
    background: #f5fbf8;
    color: #3a755d;
}

.student-course-test-score.is-open {
    border-color: #d9dde3;
    background: #f7f8fa;
    color: #6f7680;
}

.student-course-test-score.is-open:hover {
    border-color: #c9ced6;
    background: #eef0f3;
    color: #4f5660;
}

.student-course-test-score.is-closed {
    border-color: #e1e3e7;
    background: #f4f5f7;
    color: #8a9099;
}

.student-course-test-score.is-grading {
    border-color: #e1e3e7;
    background: #f4f5f7;
    color: #8a9099;
    cursor: not-allowed;
}

.teacher-grading-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.teacher-grading-dock {
    gap: 14px;
}

.teacher-grading-nav {
    min-width: 116px;
}

.teacher-grading-overview-card {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.teacher-grading-overview-list {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 10px;
    overflow: auto;
}

.teacher-grading-overview-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #eceff3;
}

.teacher-grading-overview-row:last-child {
    border-bottom: 0;
}

.teacher-grading-overview-row.active {
    background: #fafbfc;
    box-shadow: inset 3px 0 0 #111111;
    padding-left: 10px;
    padding-right: 2px;
}

.teacher-grading-overview-row strong,
.teacher-grading-overview-row span {
    display: block;
}

.teacher-grading-overview-row strong {
    color: #111111;
    font-size: 13px;
    font-weight: 900;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.teacher-grading-overview-row span {
    margin-top: 4px;
    color: #707987;
    font-size: 12px;
    font-weight: 750;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.teacher-grading-overview-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.teacher-grading-head-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.teacher-manual-grade-box {
    display: grid;
    gap: 4px;
    justify-items: end;
}

.teacher-manual-grade-box input,
.student-review-score strong,
.student-review-result-pill,
.student-course-test-score,
#answeredCount,
#answerCardCount,
#summaryQuestions,
#summaryMarks,
#timer {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.teacher-manual-grade-box label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.teacher-manual-grade-box span {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.teacher-manual-grade-box small {
    color: #8a9099;
    font-size: 11px;
    font-weight: 750;
}

.teacher-manual-grade-input {
    width: 88px;
    height: 34px;
    border: 1px solid #d7dce3;
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
    outline: 0;
}

.teacher-manual-grade-input:focus {
    border-color: #111111;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, .06);
}

@media (max-width: 980px) {
    .teacher-grading-grid {
        grid-template-columns: 1fr;
    }
}

.student-detail-analysis-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.student-detail-analysis-columns section {
    min-width: 0;
    padding: 16px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    background: #ffffff;
}

.student-detail-analysis-columns h3 {
    margin: 0 0 12px;
    color: #111111;
    font-size: 17px;
    font-weight: 950;
}

.student-detail-mini-list {
    display: grid;
    gap: 10px;
}

.student-analysis-scroll-window {
    max-height: 420px;
    overflow-y: auto;
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    background: #ffffff;
}

.student-analysis-scroll-window.score-window {
    max-height: 520px;
}

.student-analysis-scroll-window.weak-window,
.student-analysis-scroll-window.ranking-window {
    max-height: 460px;
}

.student-analysis-scroll-window::-webkit-scrollbar {
    width: 8px;
}

.student-analysis-scroll-window::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #cbd5dc;
}

.student-analysis-scroll-window .student-analytics-line-chart {
    margin-bottom: 4px;
}

.student-score-panel-split {
    display: grid;
    gap: 12px;
}

.student-detail-mini-list > .student-score-panel-split {
    min-height: 0;
    padding: 0;
    border-bottom: 0;
}

.student-score-panel-block {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.student-score-panel-block > strong {
    color: #111111;
    font-size: 13px;
    font-weight: 950;
}

.student-score-chart-window,
.student-score-record-window {
    min-width: 0;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    background: #ffffff;
}

.student-score-chart-window {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px;
}

.student-score-record-window {
    max-height: 300px;
    overflow-y: auto;
    display: grid;
    gap: 0;
    padding: 0 12px;
}

.student-score-chart-window::-webkit-scrollbar,
.student-score-record-window::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.student-score-chart-window::-webkit-scrollbar-thumb,
.student-score-record-window::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #cbd5dc;
}

.student-detail-mini-list > div {
    min-height: 48px;
    display: grid;
    gap: 4px;
    padding: 10px 0;
    border-bottom: 1px solid #eeeeee;
}

.student-detail-mini-list > div:last-child {
    border-bottom: 0;
}

.student-detail-mini-list strong,
.student-detail-mini-list span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-detail-mini-list strong {
    color: #111111;
    font-size: 14px;
    font-weight: 900;
}

.student-detail-mini-list span {
    color: #60646c;
    font-size: 12px;
    font-weight: 820;
}

.student-score-history-row,
.student-weak-topic-row,
.student-detail-student-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
}

.student-score-history-row > div,
.student-weak-topic-row > div {
    min-width: 0;
}

.teacher-detail-quiz-record {
    width: 100%;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.teacher-detail-quiz-record.active,
.teacher-detail-quiz-record:hover {
    background: #f0faf7;
}

.student-detail-student-row {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    cursor: pointer;
}

.student-detail-student-row:hover {
    background: #f8fafc;
}

.student-detail-student-avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, .12);
    border-radius: 50%;
    background: #f4f6f5;
    color: #111111;
    font-size: 15px;
    font-weight: 950;
}

.student-detail-student-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.student-detail-student-avatar.has-image span {
    display: none;
}

.student-detail-student-info {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.student-score-history-row b,
.student-weak-topic-row b {
    color: #20242a;
    font-size: 15px;
    font-weight: 950;
}

.student-score-history-row i,
.student-weak-topic-row i {
    display: none;
}

.student-score-expand-btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: stretch;
    border: 1px solid #d8dde6;
    border-radius: 8px;
    background: #ffffff;
    color: #20242a;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.student-score-expand-btn:hover {
    border-color: #20242a;
    background: #f8fafc;
}

.student-wrong-question-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.student-wrong-question-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 10px 0;
    border-top: 1px solid #eeeeee;
}

.student-wrong-question-main {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.student-wrong-question-main strong {
    color: #111111;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
}

.student-wrong-question-main span {
    color: #60646c;
    font-size: 12px;
    font-weight: 820;
}

.student-wrong-question-item > button {
    align-self: start;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #d8dde6;
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.student-wrong-question-item > button:hover {
    border-color: #111111;
    background: #f8fafc;
}

.student-wrong-question-records {
    grid-column: 1 / -1;
    display: none;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid #eeeeee;
    border-radius: 8px;
    background: #fbfcfd;
}

.student-wrong-question-item.is-open .student-wrong-question-records {
    display: grid;
}

.student-wrong-question-records a {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.student-wrong-question-records span {
    min-width: 0;
    overflow: hidden;
    color: #60646c;
    font-size: 12px;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-wrong-question-records b {
    color: #111111;
    font-size: 12px;
    font-weight: 950;
}

/* Admin management console */
.admin-console-page {
    background: #f7faf9;
}

.admin-console-hero {
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    padding: 22px;
    background:
        radial-gradient(circle at 88% 14%, rgba(0, 135, 127, .14), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f7faf9 100%);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .06);
}

.admin-console-kicker {
    color: #00877f;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .1em;
}

.admin-module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.admin-module-card {
    min-height: 104px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 16px;
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    background: #ffffff;
    color: inherit;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.admin-module-card:hover,
.admin-module-card.active {
    transform: translateY(-2px);
    border-color: rgba(0, 135, 127, .36);
    box-shadow: 0 18px 36px rgba(0, 135, 127, .08);
}

.admin-module-card span {
    color: #00877f;
    font-size: 12px;
    font-weight: 950;
}

.admin-module-card strong {
    color: #111827;
    font-size: 18px;
    font-weight: 950;
}

.admin-module-card small {
    color: #667085;
    font-size: 12px;
    font-weight: 820;
}

.admin-console-panel {
    scroll-margin-top: 24px;
}

.admin-console-page .enterprise-metric,
.admin-console-page .enterprise-wide,
.admin-console-page .enterprise-card {
    border-color: #d8e7e3;
}

@media (max-width: 1180px) {
    .admin-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .admin-module-grid,
    .admin-console-actions {
        grid-template-columns: 1fr;
    }

    .admin-console-actions,
    .admin-console-hero {
        display: grid;
    }
}

body .teacher-score-analysis-page {
    background: #f7faf9;
}

.teacher-score-hero {
    border: 1px solid #d8e7e3;
    border-radius: 8px;
    padding: 20px;
    background:
        radial-gradient(circle at 88% 10%, rgba(0, 135, 127, .14), transparent 28%),
        #ffffff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .055);
}

.teacher-score-hero h1 {
    margin-top: 6px;
}

.teacher-score-filters {
    align-items: stretch;
}

.teacher-score-filters .enterprise-search {
    background: #fbfcfe;
}

.teacher-score-layout .enterprise-wide,
.teacher-score-layout .enterprise-card,
.teacher-score-analysis-page .enterprise-metric {
    border-color: #d8e7e3;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .055);
}

.teacher-score-distribution .teacher-distribution-card {
    min-height: 116px;
}

.teacher-distribution-card i {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf2f7;
}

.teacher-distribution-card i em {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #20242a, #00877f);
}

@media (max-width: 930px) {
    .teacher-score-hero,
    .teacher-score-filters {
        display: grid;
    }

    .teacher-score-filters .enterprise-search,
    .teacher-score-filters button {
        width: 100%;
    }
}

@media (max-width: 1180px) {
    .student-detail-overview,
    .student-detail-analysis-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body.student-course-detail-body .student-course-detail-modern {
        padding-top: calc(var(--student-home-marquee-height) + var(--student-home-nav-height) + 20px);
        padding-left: 20px;
        padding-right: 20px;
    }

    .student-detail-facts,
    .student-detail-meta-grid,
    .student-detail-analysis-grid {
        grid-template-columns: 1fr;
    }

    .student-detail-tabs-modern {
        flex-wrap: wrap;
    }

    .student-course-test-board {
        grid-template-columns: 1fr;
    }

    .student-course-test-map {
        min-height: 220px;
    }

    .student-course-test-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .student-course-test-card a {
        grid-column: 2;
        width: max-content;
    }

    .student-course-test-row {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 14px;
        padding: 16px 14px;
    }

    .student-course-test-type i {
        width: 44px;
        height: 44px;
    }

    .student-course-test-type b {
        font-size: 12px;
    }

    .student-course-test-main strong {
        font-size: 17px;
    }

    .student-course-test-main span {
        margin-top: 10px;
        white-space: normal;
    }

    .student-course-test-row .student-course-actions {
        grid-column: 2;
        justify-self: start;
    }

    .student-course-test-score {
        width: max-content;
        margin-left: 0;
    }
}

.student-analysis-panel {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.student-analysis-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background:
        radial-gradient(circle at 92% 18%, rgba(0, 135, 127, .12), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f7faf9 100%);
}

.student-analysis-kicker {
    color: #00877f;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.student-analysis-hero h2 {
    margin: 6px 0 8px;
    color: #111111;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 950;
    letter-spacing: -.03em;
}

.student-analysis-hero p {
    max-width: 620px;
    margin: 0;
    color: #60646c;
    font-size: 14px;
    font-weight: 780;
    line-height: 1.65;
}

.student-analysis-toolbar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #d8dde6;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .04);
}

.student-analysis-toolbar span {
    color: #60646c;
    font-size: 12px;
    font-weight: 900;
}

.student-analysis-toolbar select {
    min-width: 150px;
    height: 34px;
    border: 0;
    border-radius: 6px;
    background: #f5f7f8;
    color: #20242a;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 850;
}

.student-detail-analysis-grid {
    gap: 14px;
}

.student-detail-analysis-grid article,
.student-analysis-metric {
    position: relative;
    overflow: hidden;
    min-height: 112px;
    border-color: #dde5ea;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .055);
}

.student-detail-analysis-grid article::after,
.student-analysis-metric::after {
    content: "";
    position: absolute;
    right: -22px;
    top: -22px;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: rgba(0, 135, 127, .1);
}

.student-analysis-metric.is-dark::after { background: rgba(17, 17, 17, .1); }
.student-analysis-metric.is-blue::after { background: rgba(37, 99, 235, .12); }
.student-analysis-metric.is-amber::after { background: rgba(180, 83, 9, .13); }
.student-analysis-metric.is-green::after { background: rgba(0, 135, 127, .12); }

.student-detail-analysis-grid span {
    position: relative;
    z-index: 1;
    color: #60646c;
    font-size: 12px;
    font-weight: 900;
}

.student-detail-analysis-grid strong {
    position: relative;
    z-index: 1;
    color: #111111;
    font-size: 30px;
    line-height: 1;
}

.student-detail-analysis-grid small {
    position: relative;
    z-index: 1;
    color: #00877f;
    font-size: 12px;
    font-weight: 900;
}

.student-detail-analysis-columns {
    align-items: start;
}

.student-detail-analysis-columns section,
.student-analysis-card {
    padding: 0;
    overflow: hidden;
    border-color: #dde5ea;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

.student-analysis-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 0;
}

.student-detail-analysis-columns h3 {
    margin: 0;
    color: #111111;
    font-size: 18px;
    font-weight: 950;
}

.student-analysis-card-head span {
    color: #00877f;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.student-analysis-card > .student-detail-mini-list,
.student-analysis-card > .student-analysis-scroll-window,
.student-analysis-card #detailProgressList,
.student-analysis-card #detailRankingList,
.student-analysis-card #detailWeakList,
.student-analysis-card #detailAdvantageList {
    padding: 14px 16px 16px;
}

.student-analysis-scroll-window {
    border-color: #e4e9ee;
    background: #fbfcfe;
}

.student-score-history-row,
.student-weak-topic-row {
    min-height: 64px;
    padding: 12px;
    border: 1px solid #e5eaef;
    border-radius: 8px;
    background: #ffffff;
}

.student-score-history-row b,
.student-weak-topic-row b,
.student-analysis-score-badge,
.student-analysis-risk-badge {
    min-width: 58px;
    justify-self: end;
    padding: 6px 9px;
    border-radius: 999px;
    background: #eef8f5;
    color: #00877f;
    font-size: 12px;
    font-weight: 950;
    text-align: center;
}

.student-analysis-risk-badge {
    background: #fff3e7;
    color: #b45309;
}

.student-score-history-row i,
.student-weak-topic-row i {
    grid-column: 1 / -1;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f6;
}

.student-score-history-row i em,
.student-weak-topic-row i em {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #20242a, #00877f);
}

.student-analysis-rank-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
}

.student-analysis-rank-row > em {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #20242a;
    color: #ffffff;
    font-style: normal;
    font-size: 12px;
    font-weight: 950;
}

.teacher-detail-quiz-record {
    border: 1px solid #e5eaef;
    border-radius: 8px;
    background: #ffffff;
}

.teacher-detail-quiz-record.active,
.teacher-detail-quiz-record:hover {
    border-color: rgba(0, 135, 127, .36);
    background: #f0faf7;
    box-shadow: 0 12px 24px rgba(0, 135, 127, .08);
}

@media (max-width: 760px) {
    .student-analysis-hero {
        display: grid;
    }

    .student-analysis-toolbar {
        width: 100%;
        justify-content: space-between;
    }

    .student-analysis-toolbar select {
        min-width: 0;
        flex: 1;
    }
}

/* Teacher modern pages: current top-nav visual system, replacing old enterprise layout. */
body.teacher-modern-body {
    background: #f4f4f4;
}

/* Course detail analysis redesign: shared student/teacher analytics surface. */
.student-detail-panel-modern.student-analysis-panel {
    padding: 0;
    overflow: hidden;
    border-color: #e6e8ec;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .06);
}

.student-analysis-panel .student-analysis-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    margin: 0;
    padding: 24px 26px 22px;
    border: 0;
    border-bottom: 1px solid #eceff3;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.student-analysis-panel .student-analysis-kicker {
    color: #6b7280;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: none;
}

.student-analysis-panel .student-analysis-hero h2 {
    margin: 7px 0 6px;
    color: #111827;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 950;
    line-height: 1.16;
    letter-spacing: 0;
}

.student-analysis-panel .student-analysis-hero p {
    max-width: 720px;
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    font-weight: 760;
    line-height: 1.7;
}

.student-analysis-panel .student-analysis-toolbar {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 4px 4px 4px 12px;
    border: 1px solid #e1e5eb;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

.student-analysis-panel .student-analysis-toolbar span {
    color: #6b7280;
    font-size: 12px;
    font-weight: 850;
}

.student-analysis-panel .student-analysis-toolbar select {
    min-width: 150px;
    height: 34px;
    border: 1px solid #e6e8ec;
    border-radius: 7px;
    background: #f8fafc;
    color: #111827;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 850;
}

.student-analysis-panel .student-detail-analysis-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 0 26px;
    border-bottom: 1px solid #eceff3;
}

.student-analysis-panel .student-detail-analysis-grid article,
.student-analysis-panel .student-analysis-metric {
    min-height: 116px;
    display: grid;
    align-content: center;
    gap: 9px;
    padding: 18px 20px;
    border: 0;
    border-right: 1px solid #eceff3;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.student-analysis-panel .student-detail-analysis-grid article:last-child,
.student-analysis-panel .student-analysis-metric:last-child {
    border-right: 0;
}

.student-analysis-panel .student-detail-analysis-grid article::after,
.student-analysis-panel .student-analysis-metric::after {
    display: none;
}

.student-analysis-panel .student-detail-analysis-grid span {
    color: #6b7280;
    font-size: 12px;
    font-weight: 850;
}

.student-analysis-panel .student-detail-analysis-grid strong {
    color: #111827;
    font-size: 30px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0;
}

.student-analysis-panel .student-detail-analysis-grid small {
    color: #4b5563;
    font-size: 12px;
    font-weight: 780;
}

.student-analysis-panel .student-detail-analysis-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(360px, .88fr);
    gap: 18px;
    align-items: start;
    margin: 0;
    padding: 22px 26px 26px;
    background: #fafbfc;
}

.student-analysis-panel .student-detail-analysis-columns section,
.student-analysis-panel .student-analysis-card {
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

.student-analysis-panel .student-analysis-card-wide {
    grid-row: span 2;
}

.student-analysis-panel.is-student-compact-analysis .student-analysis-hero,
.student-analysis-panel.is-student-compact-analysis .student-detail-analysis-grid,
.student-analysis-panel.is-teacher-analysis .student-analysis-hero,
.student-analysis-panel.is-teacher-analysis .student-detail-analysis-grid {
    display: none;
}

.student-analysis-panel.is-student-compact-analysis .student-detail-analysis-columns,
.student-analysis-panel.is-teacher-analysis .student-detail-analysis-columns {
    grid-template-columns: minmax(0, 1.34fr) minmax(360px, .86fr);
    padding-top: 26px;
}

.student-analysis-panel.is-student-compact-analysis .student-analysis-card-wide,
.student-analysis-panel.is-teacher-analysis .student-analysis-card-wide {
    grid-row: auto;
}

.student-analysis-panel .student-analysis-card-head {
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid #eef1f4;
    background: #ffffff;
}

.student-analysis-panel .student-detail-analysis-columns h3 {
    margin: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 950;
    line-height: 1.25;
    letter-spacing: 0;
}

.student-analysis-panel .student-analysis-card-head span {
    color: #6b7280;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.student-analysis-panel .student-record-mode-tabs {
    --active-index: 0;
    justify-self: end;
    position: relative;
    display: inline-grid;
    grid-template-columns: repeat(2, 82px);
    gap: 4px;
    padding: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f8fafc;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
}

.student-analysis-panel .student-record-mode-tabs::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 82px;
    height: calc(100% - 8px);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .10);
    transform: translateX(calc(var(--active-index) * 86px));
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}

.student-analysis-panel .student-record-mode-tabs button {
    position: relative;
    z-index: 1;
    min-height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #6b7280;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
    transition: color .18s ease;
}

.student-analysis-panel #detailProgressMeta {
    display: none;
}

.student-analysis-panel .student-record-mode-tabs button.active {
    color: #111827;
}

.student-analysis-panel .student-insight-switch-card {
    align-self: stretch;
    min-width: 0;
}

.student-analysis-panel .student-insight-switch-head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px;
}

.student-analysis-panel .student-insight-tabs {
    --active-index: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f8fafc;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
}

.student-analysis-panel .student-insight-tabs::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc((100% - 16px) / 3);
    height: calc(100% - 8px);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .10);
    transform: translateX(calc(var(--active-index) * (100% + 4px)));
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}

.student-analysis-panel .student-insight-tabs button {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 34px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #6b7280;
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: color .18s ease;
}

.student-analysis-panel .student-insight-tabs button.active {
    color: #111827;
}

.student-analysis-panel .student-insight-slider {
    overflow: hidden;
    padding: 16px 18px 18px;
}

.student-analysis-panel .student-insight-track {
    display: block;
    min-width: 0;
}

.student-analysis-panel .student-insight-pane {
    display: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.student-analysis-panel .student-insight-slider[data-student-insight-active="ranking"] [data-student-insight-pane="ranking"],
.student-analysis-panel .student-insight-slider[data-student-insight-active="advantage"] [data-student-insight-pane="advantage"],
.student-analysis-panel .student-insight-slider[data-student-insight-active="weak"] [data-student-insight-pane="weak"] {
    display: block;
}

.student-analysis-panel .student-insight-pane > .student-detail-mini-list {
    min-width: 0;
    padding: 0;
}

.student-analysis-panel .student-topic-scope-tabs {
    --active-index: 0;
    position: relative;
    justify-self: end;
    width: max-content;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 88px);
    gap: 4px;
    margin: 0 0 12px auto;
    padding: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f8fafc;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
}

.student-analysis-panel .student-topic-scope-tabs[hidden] {
    display: none !important;
}

.student-analysis-panel .student-topic-scope-tabs::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 88px;
    height: calc(100% - 8px);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .10);
    transform: translateX(calc(var(--active-index) * 92px));
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}

.student-analysis-panel .student-topic-scope-tabs button {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 30px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #6b7280;
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: color .18s ease;
}

.student-analysis-panel .student-topic-scope-tabs button.active {
    color: #111827;
}

.student-analysis-panel .student-insight-pane .student-analysis-scroll-window {
    max-height: 438px;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 2px;
}

.student-analysis-panel .student-analysis-rank-row.is-current {
    border-color: #111827;
    background: #f9fafb;
}

.student-analysis-panel .student-analysis-card > .student-detail-mini-list,
.student-analysis-panel .student-analysis-card > .student-analysis-scroll-window,
.student-analysis-panel .student-analysis-card #detailProgressList,
.student-analysis-panel .student-analysis-card #detailRankingList,
.student-analysis-panel .student-analysis-card #detailWeakList,
.student-analysis-panel .student-analysis-card #detailAdvantageList {
    padding: 16px 18px 18px;
}

.student-analysis-panel .student-analysis-scroll-window {
    max-height: 430px;
    overflow-y: auto;
    display: grid;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.student-analysis-panel .student-analysis-scroll-window.score-window {
    max-height: 520px;
}

.student-analysis-panel .student-analysis-scroll-window.ranking-window,
.student-analysis-panel .student-analysis-scroll-window.weak-window {
    max-height: 438px;
}

.student-analysis-panel .student-score-panel-split {
    display: grid;
    gap: 14px;
}

.student-analysis-panel .student-score-panel-block {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.student-analysis-panel .student-score-panel-block > strong {
    color: #374151;
    font-size: 13px;
    font-weight: 950;
}

.student-analysis-panel .student-score-chart-window,
.student-analysis-panel .student-score-record-window {
    min-width: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
}

.student-analysis-panel .student-score-chart-window {
    min-height: 292px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 18px 18px 14px;
}

.student-analysis-panel .student-score-record-window {
    max-height: 306px;
    overflow-y: auto;
    display: grid;
    gap: 8px;
    padding: 12px;
}

.student-analysis-panel .student-analytics-line-chart {
    min-height: 250px;
    gap: 12px;
    padding: 0;
    overflow: visible;
    border-bottom: 0;
}

.student-analysis-panel .student-analytics-line-chart svg {
    height: 210px;
}

.student-analysis-panel .student-analytics-line-chart .grid line {
    stroke: #e5e7eb;
}

.student-analysis-panel .student-analytics-line-chart .score-segment,
.student-analysis-panel .student-analytics-line-chart polyline {
    stroke: #111827;
    stroke-width: 3;
}

.student-analysis-panel .student-analytics-line-chart circle {
    fill: #ffffff;
    stroke: #111827;
    stroke-width: 3;
}

.student-analysis-panel .student-analytics-line-chart .score-point-link:hover circle {
    fill: #111827;
    stroke: #ffffff;
}

.student-analysis-panel .student-analytics-line-labels {
    gap: 10px;
}

.student-analysis-panel .student-analytics-line-labels a {
    color: #6b7280;
}

.student-analysis-panel .student-analytics-line-labels b {
    color: #111827;
    font-size: 12px;
}

.student-analysis-panel .student-score-history-row,
.student-analysis-panel .student-weak-topic-row,
.student-analysis-panel .teacher-detail-quiz-record {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 62px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e7eaf0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
    overflow: visible;
}

.student-analysis-panel .student-score-history-row + .student-score-history-row,
.student-analysis-panel .student-weak-topic-row + .student-weak-topic-row,
.student-analysis-panel .teacher-detail-quiz-record + .teacher-detail-quiz-record {
    margin-top: 0;
}

.student-analysis-panel .student-score-history-row strong,
.student-analysis-panel .student-weak-topic-row strong {
    display: block;
    min-width: 0;
    max-width: 100%;
    color: #111827;
    font-size: 14px;
    font-weight: 920;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}

.student-analysis-panel .student-score-history-row span,
.student-analysis-panel .student-weak-topic-row span {
    display: block;
    min-width: 0;
    max-width: 100%;
    color: #6b7280;
    font-size: 12px;
    font-weight: 760;
    white-space: normal;
}

.student-analysis-panel .student-score-history-row > div,
.student-analysis-panel .student-weak-topic-row > div {
    min-width: 0;
}

.student-analysis-panel .student-score-history-row b,
.student-analysis-panel .student-weak-topic-row b,
.student-analysis-panel .student-analysis-score-badge,
.student-analysis-panel .student-analysis-risk-badge {
    min-width: 58px;
    justify-self: end;
    align-self: start;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 12px;
    font-weight: 950;
    text-align: center;
    white-space: nowrap;
}

.student-analysis-panel .student-topic-stat-row {
    align-items: center;
}

.student-analysis-panel .student-topic-stat-row > div {
    align-self: center;
}

.student-analysis-panel .student-topic-stat-row > b.student-topic-ratio-text {
    min-width: 48px !important;
    justify-self: end !important;
    align-self: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.student-analysis-panel .student-analysis-risk-badge {
    color: #9a3412;
    border-color: #fed7aa;
    background: #fff7ed;
}

.student-analysis-panel .student-score-history-row i,
.student-analysis-panel .student-weak-topic-row i {
    display: none;
}

.student-analysis-panel .student-analysis-rank-row {
    grid-template-columns: 26px 38px minmax(0, 1fr) max-content;
    align-items: center;
}

.student-analysis-panel .student-analysis-rank-row > b.student-ranking-score-text {
    min-width: 54px !important;
    justify-self: end !important;
    align-self: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.student-analysis-panel .student-analysis-rank-row > em {
    width: 22px;
    height: 22px;
    align-self: center;
    justify-self: center;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f3f4f6;
    color: #374151;
    font-style: normal;
    font-size: 11px;
    font-weight: 950;
}

.student-analysis-panel .student-analysis-rank-row .student-detail-student-avatar {
    width: 38px;
    height: 38px;
    font-size: 13px;
    border-width: 2px;
}

.student-analysis-panel .student-analysis-rank-row.rank-1 .student-detail-student-avatar {
    border-color: #d97706;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .28), 0 8px 18px rgba(217, 119, 6, .18);
}

.student-analysis-panel .student-analysis-rank-row.rank-2 .student-detail-student-avatar {
    border-color: #64748b;
    box-shadow: 0 0 0 4px rgba(148, 163, 184, .32), 0 8px 18px rgba(100, 116, 139, .16);
}

.student-analysis-panel .student-analysis-rank-row.rank-3 .student-detail-student-avatar {
    border-color: #92400e;
    box-shadow: 0 0 0 4px rgba(180, 83, 9, .3), 0 8px 18px rgba(146, 64, 14, .16);
}

.student-analysis-panel .teacher-detail-quiz-record {
    width: 100%;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.student-analysis-panel .teacher-detail-quiz-record.active,
.student-analysis-panel .teacher-detail-quiz-record:hover {
    border-color: #111827;
    background: #f9fafb;
    box-shadow: none;
}

.student-analysis-panel .student-wrong-question-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.student-analysis-panel .student-wrong-question-item {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 10px 12px;
    padding: 12px 14px;
    border: 1px solid #e7eaf0;
    border-radius: 8px;
    background: #ffffff;
}

.student-analysis-panel .student-wrong-question-main {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.student-analysis-panel .student-wrong-question-main strong {
    color: #111827;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.48;
    white-space: normal;
    overflow-wrap: anywhere;
}

.student-analysis-panel .student-wrong-question-main span {
    color: #6b7280;
    font-size: 12px;
    font-weight: 760;
}

.student-analysis-panel .student-wrong-question-item > button {
    align-self: start;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid #d7dce3;
    border-radius: 7px;
    background: #ffffff;
    color: #111827;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.student-analysis-panel .student-wrong-question-item > button:hover {
    border-color: #111827;
    background: #f9fafb;
}

.student-analysis-panel .student-wrong-question-records {
    min-width: 0;
    max-width: 100%;
    grid-column: 1 / -1;
    display: none;
    gap: 8px;
    padding: 10px;
    border: 1px solid #eef1f4;
    border-radius: 8px;
    background: #fafbfc;
}

.student-analysis-panel .student-wrong-question-item.is-open .student-wrong-question-records {
    display: grid;
}

.student-analysis-panel .student-wrong-question-records a {
    min-width: 0;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 7px;
    color: inherit;
    text-decoration: none;
}

.student-analysis-panel .student-wrong-question-records a:hover {
    background: #ffffff;
}

.student-analysis-panel .student-wrong-question-records span {
    min-width: 0;
    overflow: hidden;
    color: #6b7280;
    font-size: 12px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-analysis-panel .student-wrong-question-records b {
    color: #111827;
    font-size: 12px;
    font-weight: 950;
}

.student-analysis-panel .student-empty {
    min-height: 92px;
    display: grid;
    place-items: center;
    border: 1px dashed #d7dce3;
    border-radius: 8px;
    background: #ffffff;
    color: #6b7280;
    font-size: 13px;
    font-weight: 850;
}

.student-analysis-panel .student-analysis-scroll-window::-webkit-scrollbar,
.student-analysis-panel .student-score-chart-window::-webkit-scrollbar,
.student-analysis-panel .student-score-record-window::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.student-analysis-panel .student-analysis-scroll-window::-webkit-scrollbar-thumb,
.student-analysis-panel .student-score-chart-window::-webkit-scrollbar-thumb,
.student-analysis-panel .student-score-record-window::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #cfd6df;
}

@media (max-width: 1180px) {
    .student-analysis-panel .student-detail-analysis-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-analysis-panel .student-detail-analysis-grid article,
    .student-analysis-panel .student-analysis-metric {
        border-bottom: 1px solid #eceff3;
    }

    .student-analysis-panel .student-detail-analysis-grid article:nth-child(2n),
    .student-analysis-panel .student-analysis-metric:nth-child(2n) {
        border-right: 0;
    }

    .student-analysis-panel .student-detail-analysis-grid article:nth-last-child(-n + 2),
    .student-analysis-panel .student-analysis-metric:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .student-analysis-panel .student-detail-analysis-columns {
        grid-template-columns: 1fr;
    }

    .student-analysis-panel .student-analysis-card-wide {
        grid-row: auto;
    }
}

@media (max-width: 760px) {
    .student-analysis-panel .student-analysis-hero {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .student-analysis-panel .student-analysis-toolbar {
        width: 100%;
        justify-content: space-between;
    }

    .student-analysis-panel .student-analysis-toolbar select {
        min-width: 0;
        flex: 1;
    }

    .student-analysis-panel .student-detail-analysis-grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .student-analysis-panel .student-detail-analysis-grid article,
    .student-analysis-panel .student-analysis-metric,
    .student-analysis-panel .student-detail-analysis-grid article:nth-child(2n),
    .student-analysis-panel .student-analysis-metric:nth-child(2n),
    .student-analysis-panel .student-detail-analysis-grid article:nth-last-child(-n + 2),
    .student-analysis-panel .student-analysis-metric:nth-last-child(-n + 2) {
        border-right: 0;
        border-bottom: 1px solid #eceff3;
    }

    .student-analysis-panel .student-detail-analysis-grid article:last-child,
    .student-analysis-panel .student-analysis-metric:last-child {
        border-bottom: 0;
    }

    .student-analysis-panel .student-detail-analysis-columns {
        padding: 18px 20px 22px;
    }

    .student-analysis-panel .student-wrong-question-item {
        grid-template-columns: 1fr;
    }

    .student-analysis-panel .student-wrong-question-item > button {
        justify-self: start;
    }
}

body.teacher-modern-body .student-dashboard-shell {
    display: block;
    background: transparent;
}

body.teacher-course-body .student-dashboard-shell {
    display: block;
    background: transparent;
}

body.teacher-course-body .teacher-course-create-button {
    min-width: 112px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #111111;
    border-radius: 8px;
    background: #111111;
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

body.teacher-course-body .teacher-course-create-button:hover {
    background: #ffffff;
    color: #111111;
    box-shadow: 0 14px 28px rgba(17, 17, 17, .12);
}

body.teacher-material-body .teacher-material-panel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

body.teacher-material-body .teacher-material-panel,
body.teacher-material-body .teacher-material-card {
    min-width: 0;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
}

body.teacher-material-body .teacher-material-panel {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 18px;
}

body.teacher-material-body .teacher-material-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.teacher-material-body .teacher-material-panel-head span {
    color: #60646c;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

body.teacher-material-body .teacher-material-panel-head strong {
    color: #111111;
    font-size: 13px;
    font-weight: 950;
}

body.teacher-material-body .teacher-material-panel p,
body.teacher-material-body .teacher-material-path {
    margin: 0;
    color: #60646c;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

body.teacher-material-body .teacher-material-form {
    display: grid;
    gap: 10px;
}

body.teacher-material-body .teacher-material-form input,
body.teacher-material-body .teacher-material-form select {
    width: 100%;
    min-width: 0;
    height: 42px;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 820;
}

body.teacher-material-body .teacher-material-form input[type="file"] {
    height: auto;
    min-height: 42px;
    padding: 9px 12px;
}

body.teacher-material-body .teacher-material-form button {
    min-height: 40px;
}

body.teacher-material-body .teacher-material-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

body.teacher-material-body .teacher-material-grid .student-empty {
    grid-column: 1 / -1;
}

body.teacher-material-body .teacher-material-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
}

body.teacher-material-body .teacher-material-card small,
body.teacher-material-body .teacher-material-card span,
body.teacher-material-body .teacher-material-card strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.teacher-material-body .teacher-material-card small,
body.teacher-material-body .teacher-material-card span {
    color: #60646c;
    font-size: 12px;
    font-weight: 820;
}

body.teacher-material-body .teacher-material-card strong {
    margin: 4px 0;
    color: #111111;
    font-size: 15px;
    font-weight: 950;
}

body.teacher-material-body .teacher-material-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 980px) {
    body.teacher-material-body .teacher-material-panel-grid {
        grid-template-columns: 1fr;
    }

    body.teacher-material-body .teacher-material-card {
        grid-template-columns: 1fr;
    }
}

.teacher-course-modal {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: none;
    place-items: center;
    padding: 24px;
}

.teacher-course-modal.open {
    display: grid;
}

.teacher-course-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, .28);
}

.teacher-course-modal-panel {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    display: grid;
    gap: 18px;
    padding: 20px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .16);
}

.teacher-course-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.teacher-course-modal-head span {
    color: #7a7f87;
    font-size: 12px;
    font-weight: 850;
}

.teacher-course-modal-head h2 {
    margin: 4px 0 0;
    color: #111111;
    font-size: 26px;
    font-weight: 950;
}

.teacher-course-modal-head button {
    width: 32px;
    height: 32px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    font: inherit;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
}

.teacher-course-modal-form {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(140px, .8fr);
    gap: 12px;
}

.teacher-course-modal-form label {
    min-width: 0;
    display: grid;
    gap: 6px;
    color: #60646c;
    font-size: 12px;
    font-weight: 850;
}

.teacher-course-modal-form label.full,
.teacher-course-modal-form .full {
    grid-column: 1 / -1;
}

.teacher-course-modal-form input,
.teacher-course-modal-form select,
.teacher-course-modal-form textarea {
    width: 100%;
    min-height: 38px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    outline: 0;
    padding: 0 10px;
}

.teacher-course-modal-form textarea {
    min-height: 96px;
    padding-top: 10px;
    line-height: 1.5;
    resize: vertical;
}

.teacher-course-status-group {
    width: 168px;
    min-height: 38px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #f5f5f5;
}

.teacher-course-status-group button {
    min-width: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #60646c;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.teacher-course-status-group button.active {
    background: #111111;
    color: #ffffff;
}

.teacher-course-modal-form input:focus,
.teacher-course-modal-form select:focus,
.teacher-course-modal-form textarea:focus {
    border-color: #111111;
}

.teacher-course-modal-submit {
    grid-column: 1 / -1;
    min-height: 38px;
    border: 1px solid #111111;
    border-radius: 8px;
    background: #111111;
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.teacher-modern-page {
    min-height: 100vh;
    padding: calc(var(--student-home-marquee-height) + var(--student-home-nav-height) + 32px) clamp(28px, 3.2vw, 52px) 52px;
    background: #f4f4f4;
}

.teacher-modern-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.teacher-modern-hero span,
.teacher-modern-section-head span {
    color: #7a7f87;
    font-size: 12px;
    font-weight: 850;
}

.teacher-modern-hero h1 {
    margin: 6px 0 0;
    color: #111111;
    font-size: clamp(34px, 5vw, 72px);
    font-weight: 950;
    letter-spacing: 0;
    line-height: .95;
}

.teacher-modern-hero p {
    max-width: 640px;
    margin: 14px 0 0;
    color: #555b63;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.6;
}

.teacher-modern-primary,
.teacher-modern-link,
.teacher-modern-actions button {
    min-height: 36px;
    border: 1px solid #111111;
    border-radius: 8px;
    background: #111111;
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.teacher-modern-primary {
    min-width: 112px;
    padding: 0 18px;
}

.teacher-modern-primary:hover,
.teacher-modern-actions button:hover {
    background: #ffffff;
    color: #111111;
    box-shadow: 0 14px 28px rgba(17, 17, 17, .12);
}

.teacher-modern-primary.full {
    width: 100%;
}

.teacher-modern-link {
    min-width: 72px;
    background: #ffffff;
    color: #111111;
}

.teacher-modern-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.teacher-modern-metrics .enterprise-metric {
    min-height: 86px;
    padding: 16px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

.teacher-modern-metrics .enterprise-metric strong {
    color: #111111;
    font-size: clamp(24px, 2.2vw, 34px);
}

.teacher-modern-metrics .enterprise-metric span,
.teacher-modern-metrics .enterprise-metric small {
    color: #60646c;
}

.teacher-modern-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: 22px;
    align-items: start;
}

.teacher-modern-section,
.teacher-modern-panel {
    min-width: 0;
    display: grid;
    gap: 16px;
}

.teacher-modern-panel {
    padding: 18px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

.teacher-modern-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.teacher-modern-section-head h2 {
    margin: 4px 0 0;
    color: #111111;
    font-size: clamp(22px, 2.2vw, 32px);
    font-weight: 950;
}

.teacher-modern-section-head small {
    min-width: 42px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0 12px;
    border: 1px solid #d4d4d4;
    border-radius: 999px;
    background: #ffffff;
    color: #111111;
    font-size: 12px;
    font-weight: 900;
}

.teacher-modern-list {
    display: grid;
    gap: 12px;
}

.teacher-modern-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) minmax(170px, .28fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.teacher-modern-row:hover {
    border-color: #bdbdbd;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .08);
    transform: translateY(-2px);
}

.teacher-modern-mark,
.teacher-modern-quiz-mark {
    position: relative;
    width: 58px;
    min-height: 76px;
    align-self: stretch;
    overflow: hidden;
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    background: #fbfbfb;
}

.teacher-modern-mark:before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 2px solid #111111;
    border-radius: 50%;
}

.teacher-modern-mark span,
.teacher-modern-mark i {
    position: absolute;
    left: 17px;
    right: 17px;
    height: 5px;
    border-radius: 999px;
    background: #111111;
}

.teacher-modern-mark span {
    bottom: 22px;
}

.teacher-modern-mark i {
    bottom: 12px;
}

.teacher-modern-quiz-mark {
    background:
        linear-gradient(90deg, transparent 0 18px, rgba(17, 17, 17, .05) 19px 20px, transparent 21px),
        repeating-linear-gradient(180deg, transparent 0 18px, rgba(17, 17, 17, .08) 19px 20px),
        #fbfbfb;
}

.teacher-modern-quiz-mark span,
.teacher-modern-quiz-mark i,
.teacher-modern-quiz-mark b {
    position: absolute;
    left: 12px;
    right: 12px;
    height: 5px;
    border-radius: 999px;
    background: #111111;
}

.teacher-modern-quiz-mark span {
    top: 28px;
}

.teacher-modern-quiz-mark i {
    top: 42px;
    right: 20px;
}

.teacher-modern-quiz-mark b {
    top: 56px;
    right: 28px;
}

.teacher-modern-row-main {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.teacher-modern-row-top {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.teacher-modern-row-top small {
    min-width: 0;
    overflow: hidden;
    color: #7a7f87;
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-modern-row h3 {
    min-width: 0;
    max-height: 24px;
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #111111;
    font-size: 18px;
    font-weight: 950;
    line-height: 1.25;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.teacher-modern-row p {
    min-width: 0;
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #60646c;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.teacher-modern-row-meta {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.teacher-modern-row-meta span {
    min-width: 0;
    overflow: hidden;
    color: #555b63;
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-modern-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.teacher-modern-actions button {
    min-width: 58px;
    min-height: 32px;
    padding: 0 10px;
    background: #ffffff;
    color: #111111;
}

.teacher-modern-actions button.danger {
    border-color: #c9c9c9;
    color: #8a1f1f;
}

.teacher-modern-filter {
    min-height: 38px;
    display: grid;
    grid-template-columns: auto minmax(80px, 110px);
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #ffffff;
}

.teacher-modern-filter span {
    color: #60646c;
    font-size: 12px;
    font-weight: 850;
}

.teacher-modern-filter input {
    width: 100%;
    height: 28px;
    border: 0;
    background: transparent;
    color: #111111;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    outline: 0;
}

.teacher-modern-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.teacher-modern-form label {
    min-width: 0;
    display: grid;
    gap: 6px;
    color: #60646c;
    font-size: 12px;
    font-weight: 850;
}

.teacher-modern-form label.full {
    grid-column: 1 / -1;
}

.teacher-modern-form input,
.teacher-modern-form select,
.teacher-modern-form textarea {
    width: 100%;
    min-height: 38px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    background: #ffffff;
    color: #111111;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    outline: 0;
    padding: 0 10px;
}

.teacher-modern-form textarea {
    min-height: 92px;
    resize: vertical;
    padding-top: 10px;
    line-height: 1.5;
}

.teacher-modern-form input:focus,
.teacher-modern-form select:focus,
.teacher-modern-form textarea:focus {
    border-color: #111111;
}

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

    .teacher-modern-row {
        grid-template-columns: 58px minmax(0, 1fr) auto;
    }

    .teacher-modern-row-meta {
        grid-column: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .teacher-detail-material-tools {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .teacher-modern-page {
        padding-top: calc(var(--student-home-marquee-height) + var(--student-home-nav-height) + 20px);
        padding-left: 20px;
        padding-right: 20px;
    }

    .teacher-modern-hero,
    .teacher-modern-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .teacher-modern-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teacher-modern-row {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }

    .teacher-modern-mark,
    .teacher-modern-quiz-mark {
        width: 54px;
        min-height: 72px;
    }

    .teacher-modern-row-meta,
    .teacher-modern-actions {
        grid-column: 2;
    }

    .teacher-modern-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .teacher-modern-form {
        grid-template-columns: 1fr;
    }

    .teacher-course-modal {
        padding: 16px;
    }

    .teacher-course-modal-form {
        grid-template-columns: 1fr;
    }

    .teacher-course-status-group {
        width: 100%;
    }
}

/* Student home compact greeting override */
body.student-dashboard-body.student-home-body .student-aww-hero {
    min-height: 240px;
    align-items: center;
    gap: 18px;
    padding-top: 12px;
    padding-bottom: 18px;
}

body.student-dashboard-body.student-home-body .student-aww-profile {
    margin-top: 0;
    gap: 14px;
}

body.student-dashboard-body.student-home-body .student-aww-profile h1 {
    margin: 0;
    line-height: 1.08;
}

body.student-dashboard-body.student-home-body .student-summary-grid.student-aww-stats {
    align-self: center;
    margin-top: 0;
}

@media (max-width: 1180px) {
    body.student-dashboard-body.student-home-body .student-aww-hero {
        gap: 18px;
        padding-top: 12px;
        padding-bottom: 18px;
    }
}

@media (max-width: 760px) {
    body.student-dashboard-body.student-home-body .student-aww-hero {
        padding-top: 14px;
    }

    body.student-dashboard-body.student-home-body .student-aww-profile {
        margin-top: 0;
    }
}

/* Student quiz page background alignment */
body.student-dashboard-body.student-home-body.student-quiz-body,
body.student-dashboard-body.student-home-body.student-quiz-body .student-dashboard-shell,
body.student-dashboard-body.student-home-body.student-quiz-body .student-home.student-quiz-page {
    background: #f4f4f4;
}

body.student-course-body .student-course-join-preview,
body.student-dashboard-body .student-course-join-preview,
body.student-course-detail-body .student-course-join-preview {
    padding: 22px;
}

body.student-course-body .student-course-join-preview article,
body.student-dashboard-body .student-course-join-preview article,
body.student-course-detail-body .student-course-join-preview article {
    gap: 20px;
}

body.student-course-body .student-course-join-preview article > div:first-child,
body.student-dashboard-body .student-course-join-preview article > div:first-child,
body.student-course-detail-body .student-course-join-preview article > div:first-child {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    background: #ffffff;
}

body.student-course-body .student-course-join-title,
body.student-dashboard-body .student-course-join-title,
body.student-course-detail-body .student-course-join-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: start;
    gap: 12px;
}

body.student-course-body .student-course-join-title strong,
body.student-dashboard-body .student-course-join-title strong,
body.student-course-detail-body .student-course-join-title strong {
    min-width: 0;
}

body.student-course-body .student-course-join-title small,
body.student-dashboard-body .student-course-join-title small,
body.student-course-detail-body .student-course-join-title small {
    justify-self: end;
    margin-top: 2px;
}

body.student-course-body .student-course-join-meta,
body.student-dashboard-body .student-course-join-meta,
body.student-course-detail-body .student-course-join-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.student-course-body .student-course-join-meta span,
body.student-dashboard-body .student-course-join-meta span,
body.student-course-detail-body .student-course-join-meta span {
    min-width: 0;
    display: grid;
    gap: 5px;
    padding: 10px 12px;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    background: #f8fafc;
    color: #374151;
    line-height: 1.35;
}

body.student-course-body .student-course-join-meta b,
body.student-dashboard-body .student-course-join-meta b,
body.student-course-detail-body .student-course-join-meta b {
    color: #6b7280;
    font-size: 11px;
    font-weight: 900;
}

body.student-course-body .student-course-join-preview small,
body.student-course-body .student-course-join-preview span,
body.student-course-body .student-course-join-preview p,
body.student-course-body .student-course-join-preview strong,
body.student-dashboard-body .student-course-join-preview small,
body.student-dashboard-body .student-course-join-preview span,
body.student-dashboard-body .student-course-join-preview p,
body.student-dashboard-body .student-course-join-preview strong,
body.student-course-detail-body .student-course-join-preview small,
body.student-course-detail-body .student-course-join-preview span,
body.student-course-detail-body .student-course-join-preview p,
body.student-course-detail-body .student-course-join-preview strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

body.student-course-body .student-course-join-preview small,
body.student-dashboard-body .student-course-join-preview small,
body.student-course-detail-body .student-course-join-preview small {
    width: max-content;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid #e1e5eb;
    border-radius: 999px;
    background: #f8fafc;
    color: #4b5563;
    font-size: 12px;
    font-weight: 900;
}

body.student-course-body .student-course-join-preview strong,
body.student-dashboard-body .student-course-join-preview strong,
body.student-course-detail-body .student-course-join-preview strong {
    margin: 0;
    color: #111827;
    font-size: 20px;
    font-weight: 950;
    line-height: 1.35;
}

body.student-course-body .student-course-join-preview span,
body.student-dashboard-body .student-course-join-preview span,
body.student-course-detail-body .student-course-join-preview span {
    color: #6b7280;
    font-size: 13px;
    font-weight: 820;
    line-height: 1.65;
}

body.student-course-body .student-course-join-preview p,
body.student-dashboard-body .student-course-join-preview p,
body.student-course-detail-body .student-course-join-preview p {
    margin: 0;
    color: #374151;
    font-size: 14px;
    font-weight: 760;
    line-height: 1.75;
    display: block;
    -webkit-line-clamp: unset;
}

body.student-course-body .student-course-preview-actions,
body.student-dashboard-body .student-course-preview-actions,
body.student-course-detail-body .student-course-preview-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.student-course-body .student-course-preview-actions .student-main-btn,
body.student-dashboard-body .student-course-preview-actions .student-main-btn,
body.student-course-detail-body .student-course-preview-actions .student-main-btn,
body.student-course-body .student-course-preview-actions .student-ghost-btn,
body.student-dashboard-body .student-course-preview-actions .student-ghost-btn,
body.student-course-detail-body .student-course-preview-actions .student-ghost-btn {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    border-radius: 7px;
    text-decoration: none;
}

body.student-course-body .student-course-preview-actions .student-main-btn,
body.student-dashboard-body .student-course-preview-actions .student-main-btn,
body.student-course-detail-body .student-course-preview-actions .student-main-btn {
    border: 1px solid #111827;
    background: #111827;
    color: #ffffff;
}

body.student-course-body .student-course-preview-actions .student-ghost-btn,
body.student-dashboard-body .student-course-preview-actions .student-ghost-btn,
body.student-course-detail-body .student-course-preview-actions .student-ghost-btn {
    border: 1px solid #d7dce3;
    background: #ffffff;
    color: #111827;
}

body.student-course-body .student-course-preview-actions .student-main-btn:disabled,
body.student-dashboard-body .student-course-preview-actions .student-main-btn:disabled,
body.student-course-detail-body .student-course-preview-actions .student-main-btn:disabled {
    border-color: #d7dce3;
    background: #f3f4f6;
    color: #9aa1ab;
}

@media (max-width: 560px) {
    body.student-course-body .student-course-preview-actions,
    body.student-dashboard-body .student-course-preview-actions,
    body.student-course-detail-body .student-course-preview-actions {
        grid-template-columns: 1fr;
    }

    body.student-course-body .student-course-join-meta,
    body.student-dashboard-body .student-course-join-meta,
    body.student-course-detail-body .student-course-join-meta {
        grid-template-columns: 1fr;
    }
}

/* Unified small dialog system. Change this block to update small popups together. */
.teacher-detail-dialog:not(.material-preview-dialog).is-open,
.teacher-course-modal.open,
.student-course-join-modal.open,
#teacherQuestionTypeModal.teacher-detail-dialog.is-open,
#teacherQuestionModal.teacher-detail-dialog.is-open {
    display: grid !important;
    place-items: center !important;
    padding: 20px !important;
}

.teacher-detail-dialog:not(.material-preview-dialog) .teacher-detail-dialog-backdrop,
.teacher-course-modal-backdrop,
.student-course-join-backdrop,
#teacherQuestionTypeModal .teacher-detail-dialog-backdrop,
#teacherQuestionModal .teacher-detail-dialog-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(17, 24, 39, .34) !important;
    backdrop-filter: blur(3px) !important;
}

.teacher-detail-dialog:not(.material-preview-dialog) .teacher-detail-dialog-panel,
.teacher-course-modal-panel,
.student-course-join-dialog,
#teacherQuestionTypeModal .teacher-detail-dialog-panel,
#teacherQuestionModal .teacher-detail-dialog-panel {
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    border: 1px solid rgba(24, 24, 24, .10) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22) !important;
}

.teacher-detail-dialog:not(.material-preview-dialog) .teacher-detail-dialog-head,
.teacher-course-modal-head,
.student-course-join-head,
#teacherQuestionTypeModal .teacher-detail-dialog-head,
#teacherQuestionModal .teacher-detail-dialog-head {
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid #edf0f4 !important;
    background: #ffffff !important;
}

.teacher-detail-dialog:not(.material-preview-dialog) .teacher-detail-dialog-head > div,
.teacher-course-modal-head > div,
.student-course-join-head > div,
#teacherQuestionTypeModal .teacher-detail-dialog-head > div,
#teacherQuestionModal .teacher-detail-dialog-head > div {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
}

.teacher-detail-dialog:not(.material-preview-dialog) .teacher-detail-dialog-head span,
.teacher-course-modal-head span,
.student-course-join-head span,
#teacherQuestionTypeModal .teacher-detail-dialog-head span,
#teacherQuestionModal .teacher-detail-dialog-head span {
    color: #667085 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.teacher-detail-dialog:not(.material-preview-dialog) .teacher-detail-dialog-head strong,
.teacher-course-modal-head h2,
.student-course-join-head h2,
#teacherQuestionTypeModal .teacher-detail-dialog-head strong,
#teacherQuestionModal .teacher-detail-dialog-head strong {
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #111827 !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.teacher-detail-dialog:not(.material-preview-dialog) .teacher-detail-dialog-head > button,
.teacher-course-modal-head > button,
.student-course-join-head > button,
#teacherQuestionTypeModal .teacher-detail-dialog-head > button,
#teacherQuestionModal .teacher-detail-dialog-head > button {
    position: relative !important;
    flex: 0 0 auto !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #d8dde6 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #667085 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.teacher-detail-dialog:not(.material-preview-dialog) .teacher-detail-dialog-head > button::before,
.teacher-detail-dialog:not(.material-preview-dialog) .teacher-detail-dialog-head > button::after,
.teacher-course-modal-head > button::before,
.teacher-course-modal-head > button::after,
.student-course-join-head > button::before,
.student-course-join-head > button::after,
#teacherQuestionTypeModal .teacher-detail-dialog-head > button::before,
#teacherQuestionTypeModal .teacher-detail-dialog-head > button::after,
#teacherQuestionModal .teacher-detail-dialog-head > button::before,
#teacherQuestionModal .teacher-detail-dialog-head > button::after {
    content: "" !important;
    position: absolute !important;
    width: 16px !important;
    height: 2.4px !important;
    border-radius: 999px !important;
    background: currentColor !important;
}

.teacher-detail-dialog:not(.material-preview-dialog) .teacher-detail-dialog-head > button::before,
.teacher-course-modal-head > button::before,
.student-course-join-head > button::before,
#teacherQuestionTypeModal .teacher-detail-dialog-head > button::before,
#teacherQuestionModal .teacher-detail-dialog-head > button::before {
    transform: rotate(45deg) !important;
}

.teacher-detail-dialog:not(.material-preview-dialog) .teacher-detail-dialog-head > button::after,
.teacher-course-modal-head > button::after,
.student-course-join-head > button::after,
#teacherQuestionTypeModal .teacher-detail-dialog-head > button::after,
#teacherQuestionModal .teacher-detail-dialog-head > button::after {
    transform: rotate(-45deg) !important;
}

.teacher-detail-dialog:not(.material-preview-dialog) .teacher-detail-dialog-head > button svg,
#teacherQuestionTypeModal .teacher-detail-dialog-head > button svg,
#teacherQuestionModal .teacher-detail-dialog-head > button svg {
    display: none !important;
}

.teacher-detail-dialog:not(.material-preview-dialog) .teacher-detail-dialog-head > button:hover,
.teacher-course-modal-head > button:hover,
.student-course-join-head > button:hover,
#teacherQuestionTypeModal .teacher-detail-dialog-head > button:hover,
#teacherQuestionModal .teacher-detail-dialog-head > button:hover {
    border-color: #111827 !important;
    background: #111827 !important;
    color: #ffffff !important;
}

.teacher-detail-dialog-form,
.teacher-course-modal-form,
.account-settings-modal-form,
#teacherQuestionModal .teacher-question-builder {
    background: #ffffff;
}

body.teacher-course-body .student-course-page-card .student-course-cover {
    position: relative;
}

body.teacher-course-body .student-course-cover > .teacher-course-cover-title-row {
    min-width: 0;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: start;
    gap: 10px;
}

body.teacher-course-body .teacher-course-cover-title-row h3 {
    min-width: 0;
    min-height: 0;
    max-height: 52px;
    margin: 0;
    overflow: hidden;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}

body.teacher-course-body .teacher-course-cover-title-row .teacher-course-id-chip {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    max-width: 132px;
}

body.teacher-course-body .student-course-cover > p.teacher-course-cover-desc {
    min-height: 0;
    height: 38px;
    max-height: 38px;
    margin: 0;
    overflow: hidden;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 19px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
}