:root {
    color-scheme: light;
    --ink: #10182f;
    --muted: #617095;
    --line: #e5e4f5;
    --surface: #ffffff;
    --surface-soft: #f7f8ff;
    --purple: #6d3df5;
    --purple-dark: #1e1973;
    --indigo: #2d4ed8;
    --green: #10b981;
    --orange: #ff9f1c;
    --pink: #ff5c93;
    --shadow: 0 24px 70px rgba(59, 39, 135, .13);
    --soft-shadow: 0 14px 34px rgba(68, 62, 145, .10);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --font: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.global-loader {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: grid;
    place-items: center;
    background: rgba(12, 18, 38, .34);
    backdrop-filter: blur(5px);
}

.global-loader[hidden] {
    display: none;
}

.global-loader > div {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 190px;
    min-height: 68px;
    padding: 16px 22px;
    border: 1px solid rgba(214, 225, 246, .92);
    border-radius: 22px;
    color: #0f1a34;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 24px 80px rgba(24, 28, 68, .22);
    font-weight: 950;
}

.global-loader i {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #6d3df5, #2563eb);
    animation: global-loader-spin .85s linear infinite;
}

@keyframes global-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

.live-lesson-page,
.video-room-page,
.video-call-page {
    display: grid;
    gap: 18px;
}

.live-lesson-hero,
.video-room-header,
.video-call-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 34px 36px;
    border-radius: 26px;
    background: linear-gradient(135deg, #25118a 0%, #6d3df5 48%, #1777ff 100%);
    color: #fff;
    box-shadow: 0 24px 60px rgba(54, 42, 145, .18);
}

.live-lesson-hero span,
.video-room-header span,
.video-call-hero span,
.live-lesson-list-card header span {
    display: inline-flex;
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.live-lesson-hero h2,
.video-room-header h2,
.video-call-hero h2 {
    margin: 8px 0;
    font-size: 38px;
    line-height: 1.05;
}

.live-lesson-hero p,
.video-room-header p,
.video-call-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-weight: 700;
}

.live-lesson-hero-stats {
    min-width: 130px;
    padding: 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .18);
    text-align: center;
}

.live-lesson-hero-stats strong {
    display: block;
    font-size: 36px;
}

.live-lesson-hero-stats span {
    justify-content: center;
}

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

.live-lesson-summary-grid article,
.live-lesson-list-card,
.video-call-waiting {
    border: 1px solid #d8e2f5;
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

.live-lesson-summary-grid article {
    padding: 22px;
}

.live-lesson-summary-grid span,
.live-lesson-list-card header span {
    display: block;
    color: #6d58ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.live-lesson-summary-grid strong {
    display: block;
    margin: 12px 0 4px;
    color: #07122f;
    font-size: 34px;
}

.live-lesson-summary-grid small {
    color: var(--muted);
    font-weight: 800;
}

.live-lesson-list-card {
    padding: 24px;
}

.live-lesson-list-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.live-lesson-list-card h3 {
    margin: 6px 0 0;
    font-size: 26px;
}

.live-lesson-list {
    display: grid;
    gap: 12px;
}

.live-lesson-card {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) 190px auto;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid #d8e5fb;
    border-radius: 18px;
    background: #f8fbff;
}

.live-lesson-status {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 82px;
    border-radius: 16px;
    background: #eef4ff;
    color: #1d4ed8;
    font-weight: 900;
}

.live-lesson-card.live .live-lesson-status {
    background: #dcfce7;
    color: #047857;
}

.live-lesson-card.completed .live-lesson-status {
    background: #f0f3f8;
    color: #53627d;
}

.live-lesson-status i {
    font-size: 24px;
}

.live-lesson-main h4 {
    margin: 0 0 6px;
    font-size: 18px;
}

.live-lesson-main p,
.live-lesson-main small,
.live-lesson-meta span {
    display: block;
    margin: 0;
    color: #55668b;
    font-weight: 800;
}

.live-lesson-meta {
    display: grid;
    gap: 8px;
}

.live-lesson-actions a,
.video-room-actions a,
.video-call-actions button,
.video-call-banner a,
.video-call-banner button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 14px;
    background: #3165f5;
    color: #fff;
    font: inherit;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.video-room-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.video-room-actions a:last-child {
    background: rgba(255, 255, 255, .18);
}

.video-room-frame {
    min-height: calc(100vh - 260px);
    overflow: hidden;
    border: 1px solid #cddbf4;
    border-radius: 24px;
    background: #08122d;
    box-shadow: var(--shadow);
}

.video-room-frame iframe {
    display: block;
    width: 100%;
    height: calc(100vh - 260px);
    min-height: 560px;
    border: 0;
}

.video-call-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid #bcd4ff;
    border-radius: 18px;
    background: linear-gradient(135deg, #eff6ff, #f8fbff);
    box-shadow: var(--soft-shadow);
}

.video-call-banner.error {
    border-color: #fecaca;
    background: #fff1f2;
}

.video-call-banner > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.video-call-banner i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 20px;
}

.video-call-banner span span,
.video-call-banner strong,
.video-call-banner em {
    display: block;
}

.video-call-banner strong {
    color: #07122f;
}

.video-call-banner em {
    color: #617095;
    font-style: normal;
    font-weight: 800;
}

.video-call-banner button.danger,
.video-call-actions button.danger {
    background: #ef4444;
}

.video-call-hero.accepted {
    background: linear-gradient(135deg, #0f766e, #16a34a);
}

.video-call-hero.ringing {
    background: linear-gradient(135deg, #25118a, #6d3df5, #1777ff);
}

.video-call-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.video-call-waiting {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 44px 28px;
    text-align: center;
}

.video-call-waiting i {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 24px;
    background: #eef4ff;
    color: #3165f5;
    font-size: 32px;
}

.video-call-waiting strong {
    font-size: 24px;
}

.video-call-waiting span {
    color: var(--muted);
    font-weight: 800;
}

@media (max-width: 980px) {
    .live-lesson-hero,
    .video-room-header,
    .video-call-hero,
    .video-call-banner {
        align-items: stretch;
        flex-direction: column;
    }

    .live-lesson-summary-grid,
    .live-lesson-card {
        grid-template-columns: 1fr;
    }

    .video-room-frame,
    .video-room-frame iframe {
        min-height: 520px;
        height: 70vh;
    }
}

.study-desk-shell {
    display: grid;
    align-content: start;
    gap: 18px;
    min-height: calc(100vh - 48px);
}

.study-desk-command {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    height: 146px;
    min-height: 146px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 22px 24px;
    border: 1px solid #d8e1ef;
    border-radius: 22px;
    background: linear-gradient(135deg, #25118a 0%, #5722d4 48%, #1777ff 100%);
    color: #fff;
    box-shadow: 0 18px 42px rgba(31, 38, 135, .18);
}

.study-desk-title span,
.desk-card > span,
.material-item header span,
.question-card header span {
    display: inline-flex;
    color: #6d58ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.study-desk-title span {
    color: #d7ccff;
}

.study-desk-title h1 {
    margin: 6px 0;
    font-size: 32px;
    line-height: 1.05;
}

.study-desk-title p {
    max-width: 820px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
}

.study-desk-title .study-desk-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 820px;
    color: rgba(255, 255, 255, .86);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.study-desk-title .study-desk-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.study-desk-title .study-desk-breadcrumb a:hover {
    color: #fff;
    text-decoration: underline;
}

.study-desk-player {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(16px);
}

.study-desk-controls {
    display: flex;
    gap: 8px;
}

.desk-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.desk-icon.play { background: #16c784; }
.desk-icon.pause { background: #ffb020; }
.desk-icon.stop { background: #ef4444; }

.desk-icon:disabled {
    opacity: .42;
    cursor: not-allowed;
    filter: grayscale(.25);
}

.desk-timer {
    min-width: 150px;
}

.desk-timer span,
.desk-timer small {
    display: block;
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
}

.desk-timer strong {
    display: block;
    font-size: 26px;
    line-height: 1.1;
}

.study-desk-layout {
    display: grid;
    grid-template-columns: minmax(250px, 280px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.study-desk-tabs {
    position: sticky;
    top: 16px;
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid #d8e1ef;
    border-radius: 20px;
    background: #fff;
}

.study-desk-tab-group {
    display: grid;
    gap: 4px;
}

.study-desk-tab-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border-radius: 14px;
    padding: 9px 10px;
    color: #56657f;
    font-weight: 800;
    line-height: 1.25;
}

.study-desk-tabs button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    border-radius: 14px;
    padding: 9px 10px;
    background: transparent;
    color: #56657f;
    font-weight: 800;
    text-align: left;
    line-height: 1.25;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.study-desk-tabs button span,
.study-desk-tab-group-title span {
    display: inline-grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 12px;
}

.study-desk-tabs .study-desk-sub-tab {
    --desk-tab-accent: #6d5dfc;
    margin-left: 38px;
    width: calc(100% - 38px);
    padding: 7px 10px;
    font-size: calc(1em - 1px);
}

.study-desk-tabs .study-desk-sub-tab::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--desk-tab-accent);
    filter: drop-shadow(0 0 5px var(--desk-tab-accent));
}

.study-desk-tabs button.active {
    color: #11182d;
    background: linear-gradient(135deg, #f1edff, #e8f2ff);
}

.study-desk-tab-group.active .study-desk-tab-group-title {
    color: #11182d;
}

.study-desk-tabs .study-desk-sub-tab.active {
    color: var(--desk-tab-accent);
}

.study-desk-tabs .study-desk-sub-tab[data-desk-tab="notes"] {
    --desk-tab-accent: #f97316;
}

.study-desk-tabs .study-desk-sub-tab[data-desk-tab="memory-center"] {
    --desk-tab-accent: #6366f1;
}

.study-desk-tabs .study-desk-sub-tab[data-desk-tab="tips"] {
    --desk-tab-accent: #22c55e;
}

.study-desk-tabs .study-desk-sub-tab[data-desk-tab="traps"] {
    --desk-tab-accent: #ef4444;
}

.study-desk-tabs .study-desk-sub-tab[data-desk-tab="past-years"] {
    --desk-tab-accent: #a855f7;
}

.study-desk-tabs .study-desk-sub-tab[data-desk-tab="videos"] {
    --desk-tab-accent: #06b6d4;
}

.study-desk-tabs .study-desk-sub-tab[data-desk-tab="study-notes"] {
    --desk-tab-accent: #eab308;
}

.study-session-paused .study-desk-command {
    background: linear-gradient(135deg, #4c2a08 0%, #c66a00 48%, #ffb020 100%);
}

.study-desk-main,
.desk-pane {
    min-width: 0;
}

.desk-pane {
    --desk-pane-accent-a: #6d5dfc;
    --desk-pane-accent-b: #2f7cf6;
    display: none;
}

.desk-pane[data-desk-pane="how-to-study"] {
    --desk-pane-accent-a: #14b8a6;
    --desk-pane-accent-b: #22c55e;
}

.desk-pane[data-desk-pane="notes"] {
    --desk-pane-accent-a: #f97316;
    --desk-pane-accent-b: #fb923c;
}

.desk-pane[data-desk-pane="tips"] {
    --desk-pane-accent-a: #22c55e;
    --desk-pane-accent-b: #84cc16;
}

.desk-pane[data-desk-pane="traps"] {
    --desk-pane-accent-a: #ef4444;
    --desk-pane-accent-b: #f43f5e;
}

.desk-pane[data-desk-pane="past-years"] {
    --desk-pane-accent-a: #a855f7;
    --desk-pane-accent-b: #7c3aed;
}

.desk-pane[data-desk-pane="memory-center"] {
    --desk-pane-accent-a: #6366f1;
    --desk-pane-accent-b: #4f46e5;
}

.desk-pane[data-desk-pane="videos"] {
    --desk-pane-accent-a: #06b6d4;
    --desk-pane-accent-b: #0ea5e9;
}

.desk-pane[data-desk-pane="study-notes"] {
    --desk-pane-accent-a: #eab308;
    --desk-pane-accent-b: #f59e0b;
}

.desk-pane.active {
    display: block;
}

.study-session-locked .desk-pane[data-study-content-locked].active > * {
    display: none;
}

.study-session-locked .desk-pane[data-study-content-locked].active::before {
    content: attr(data-study-content-locked);
    display: block;
    min-height: 160px;
    border: 1px dashed #b8ccf4;
    border-radius: 20px;
    padding: 28px;
    background: linear-gradient(135deg, #f8fbff, #fff);
    color: #385174;
    font-weight: 900;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.desk-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
}

.desk-summary-note-card {
    margin-top: 16px;
}

.desk-card,
.material-item,
.question-card {
    border: 1px solid #d8e1ef;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.desk-card {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.desk-card h2 {
    margin: 0;
    color: #0d1730;
    font-size: 26px;
}

.desk-card p {
    margin: 0;
    color: #60708b;
}

.desk-card dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.desk-card dl div,
.answer-grid div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f6f8fc;
}

.desk-card dt,
.answer-grid span {
    color: #64748b;
    font-size: 12px;
}

.desk-card dd {
    margin: 0;
    color: #0d1730;
    font-weight: 900;
}

.study-time-card {
    align-content: start;
}

.study-time-card h2 {
    color: #3022a8;
}

.study-time-card dl div {
    align-items: center;
}

.study-time-card dd {
    text-align: right;
}

.study-time-card dd b {
    font-weight: 900;
}

.study-time-bar {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf2ff;
}

.study-time-bar i {
    display: block;
    width: var(--progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6d58ff, #2f66f6);
    box-shadow: 0 8px 18px rgba(47, 102, 246, .26);
    transition: width .25s ease;
}

.desk-progress-ring {
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
    margin: 4px auto;
    border-radius: 999px;
    background: conic-gradient(#6d58ff var(--progress), #e9eef7 0);
}

.desk-progress-ring b {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 999px;
    background: #fff;
    font-size: 24px;
}

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

.answer-grid div {
    display: grid;
}

.answer-grid strong {
    color: #11182d;
}

.question-practice {
    display: grid;
    gap: 14px;
}

.material-list,
.lesson-note-card-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.material-item,
.question-card {
    padding: 18px;
}

.material-item header,
.question-card header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.material-list .material-item,
.lesson-note-card-list .material-item {
    position: relative;
    display: flex;
    min-height: 230px;
    flex-direction: column;
    overflow: hidden;
}

.material-list .material-item::before,
.lesson-note-card-list .material-item::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--desk-pane-accent-a, #6d5dfc), var(--desk-pane-accent-b, #2f7cf6));
    opacity: .9;
}

.material-list .material-item header,
.lesson-note-card-list .material-item header {
    align-items: flex-start;
}

.material-list .material-item header > div,
.lesson-note-card-list .material-item header > div {
    min-width: 0;
}

.material-list .material-item header span,
.lesson-note-card-list .material-item header span {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 5px 9px;
    background: #eef2ff;
    color: #5b4bff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.material-list .material-item header .material-card-type-label,
.lesson-note-card-list .material-item header .material-card-type-label {
    display: none !important;
}

.material-item h3 {
    margin: 0;
    color: #11182d;
    line-height: 1.25;
}

.material-item small {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-weight: 800;
}

.material-card-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: auto;
}

.material-card-stats.single {
    grid-template-columns: 1fr;
}

.material-card-stats div {
    min-height: 70px;
    border: 1px solid #dbe7fb;
    border-radius: 16px;
    padding: 11px 12px;
    background: linear-gradient(135deg, #f8fbff, #fff);
}

.material-card-stats div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.material-card-stats span {
    display: block;
    color: #667895;
    font-size: 12px;
    font-weight: 900;
}

.material-card-stats strong {
    display: block;
    margin-top: 6px;
    color: #0f2c67;
    font-size: 20px;
    line-height: 1.15;
}

.lesson-video-card .material-card-stats strong b {
    color: inherit;
    font-size: inherit;
}

.video-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.video-card-meta span {
    border: 1px solid #dbe7fb;
    border-radius: 999px;
    padding: 7px 10px;
    color: #31548b;
    background: #f8fbff;
    font-size: 12px;
    font-weight: 900;
}

.material-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #edf2f7;
}

.material-understanding {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 950;
}

.material-understanding.is-good {
    background: #dcfce7;
    color: #067647;
}

.material-understanding.is-repeat {
    background: #fef3c7;
    color: #9a5b00;
}

.material-understanding.is-weak {
    background: #fee2e2;
    color: #ad1d1d;
}

.material-understanding.is-empty {
    background: #eef2ff;
    color: #4f5f7c;
}

.material-note-link {
    border: 1px solid #cfe0ff;
    border-radius: 999px;
    padding: 8px 11px;
    background: #fff;
    color: #255fd5;
    font-weight: 950;
    cursor: pointer;
}

.material-item .desk-link-button {
    white-space: nowrap;
}

.material-html {
    color: #26324a;
    line-height: 1.7;
}

.material-html figure.table,
.reader-dialog-content figure.table,
.reader-note-content figure.table,
.topic-chat-content figure.table,
.study-guide-content figure.table,
.study-guide-article-content figure.table {
    display: block;
    max-width: 100%;
    margin: 18px 0;
    overflow-x: auto;
}

.material-html table,
.reader-dialog-content table,
.reader-note-content table,
.topic-chat-content table,
.study-guide-content table,
.study-guide-article-content table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 18px 0;
    color: #13213b;
    font-size: .96em;
    line-height: 1.5;
}

.material-html figure.table table,
.reader-dialog-content figure.table table,
.reader-note-content figure.table table,
.topic-chat-content figure.table table,
.study-guide-content figure.table table,
.study-guide-article-content figure.table table {
    margin: 0;
}

.material-html th,
.material-html td,
.reader-dialog-content th,
.reader-dialog-content td,
.reader-note-content th,
.reader-note-content td,
.topic-chat-content th,
.topic-chat-content td,
.study-guide-content th,
.study-guide-content td,
.study-guide-article-content th,
.study-guide-article-content td {
    border: 1px solid #cbd5e1;
    padding: 10px 12px;
    vertical-align: top;
}

.material-html th,
.reader-dialog-content th,
.reader-note-content th,
.topic-chat-content th,
.study-guide-content th,
.study-guide-article-content th {
    background: #f1f5f9;
    color: #11182d;
    font-weight: 900;
}

.material-html tr:nth-child(even) td,
.reader-dialog-content tr:nth-child(even) td,
.reader-note-content tr:nth-child(even) td,
.topic-chat-content tr:nth-child(even) td,
.study-guide-content tr:nth-child(even) td,
.study-guide-article-content tr:nth-child(even) td {
    background: #f8fafc;
}

.focus-section-title {
    display: grid;
    gap: 4px;
}

.focus-section-title span,
.modal-kicker {
    color: #6d58ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.focus-section-title h3 {
    margin: 0;
    color: #11182d;
    font-size: 24px;
}

.question-practice-lock {
    border: 1px dashed #c9d8f4;
    border-radius: 8px;
    padding: 14px;
    background: #f8fbff;
    color: #385174;
}

.question-practice-lock strong {
    display: block;
    color: #17213a;
    font-size: 16px;
}

.question-practice-lock p {
    margin: 6px 0 0;
}

.question-summary-card {
    display: grid;
    gap: 18px;
    border: 1px solid #d8e1ef;
    border-radius: 8px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.question-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.question-summary-head div {
    display: grid;
    gap: 6px;
}

.question-summary-head span,
.question-summary-note span {
    color: #6d58ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.question-summary-head h2 {
    margin: 0;
    color: #11182d;
    font-size: 34px;
    line-height: 1;
}

.question-summary-head p {
    margin: 0;
    color: #60708b;
}

.question-summary-grid,
.question-summary-footer {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.question-summary-grid div,
.question-summary-footer div {
    display: grid;
    gap: 6px;
    min-height: 74px;
    padding: 14px;
    border: 1px solid #e4ebf7;
    border-radius: 8px;
    background: #f8fbff;
}

.question-summary-grid span,
.question-summary-footer span {
    color: #60708b;
    font-size: 12px;
    font-weight: 800;
}

.question-summary-grid strong {
    color: #06133a;
    font-size: 28px;
    line-height: 1;
}

.question-summary-footer strong {
    color: #06133a;
    font-size: 15px;
}

.question-summary-note {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-radius: 8px;
    background: #eef2ff;
    color: #334155;
}

.question-summary-note strong {
    color: #11182d;
    font-size: 16px;
}

.question-summary-note span {
    letter-spacing: 0;
    text-transform: none;
}

.question-preview-card {
    padding: 0;
    overflow: hidden;
}

.question-accordion-header {
    display: grid;
    width: 100%;
    gap: 12px;
    border: 0;
    padding: 18px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.question-accordion-header strong {
    color: #121a31;
    font-size: 17px;
    line-height: 1.45;
}

.question-card-image {
    max-width: 220px;
    max-height: 120px;
    border-radius: 8px;
    object-fit: contain;
    background: #f8fbff;
}

.question-status-strip,
.question-detail-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 5px 10px;
    background: #eef2ff;
    color: #3b4a75;
    font-size: 12px;
    font-weight: 900;
}

.status-pill.active,
.status-pill.success {
    background: #dcfce7;
    color: #047857;
}

.status-pill.passive {
    background: #e8edf5;
    color: #64748b;
}

.status-pill.danger {
    background: #fee2e2;
    color: #991b1b;
}

.study-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: clamp(10px, 3vh, 28px);
    background: rgba(15, 23, 42, .54);
    overflow: hidden;
}

.study-modal-backdrop[hidden] {
    display: none;
}

.study-modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(1120px, 100%);
    max-height: calc(100dvh - clamp(20px, 6vh, 56px));
    border: 1px solid #d8e1ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .26);
    overflow: hidden;
}

.study-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #e2e8f0;
    padding: clamp(14px, 2.2vh, 22px) clamp(16px, 2.6vw, 24px);
    min-height: 0;
}

.question-modal-title {
    display: grid;
    min-width: 0;
    gap: 10px;
}

.question-modal-prompt {
    color: #11182d;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.question-modal-prompt p {
    margin: 0 0 10px;
}

.question-modal-image {
    max-width: min(520px, 100%);
    max-height: 280px;
    border-radius: 8px;
    object-fit: contain;
    background: #f8fbff;
}

.btn-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid #d8e1ef;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    position: relative;
}

.btn-close::before,
.btn-close::after {
    content: "";
    position: absolute;
    top: 18px;
    left: 10px;
    width: 16px;
    height: 2px;
    background: #64748b;
}

.btn-close::before {
    transform: rotate(45deg);
}

.btn-close::after {
    transform: rotate(-45deg);
}

.question-detail-body {
    display: grid;
    gap: 16px;
    min-height: 0;
    padding: clamp(14px, 2vh, 20px) clamp(16px, 2.6vw, 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-choice-list {
    display: grid;
    gap: 10px;
}

.modal-choice-button {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    border: 1px solid #d8e1ef;
    border-radius: 8px;
    padding: 12px;
    background: #fff;
    color: #17213a;
    text-align: left;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.modal-choice-button > span:last-child {
    min-width: 0;
}

.choice-letter {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
    font-weight: 900;
}

.modal-choice-button.selected {
    border-color: #6d58ff;
    background: #f4f2ff;
}

.modal-choice-button.correct {
    border-color: #13b981;
    background: #dcfce7;
}

.modal-choice-button.wrong {
    border-color: #ef4444;
    background: #fee2e2;
}

.question-detail-notes {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    background: #f8fbff;
}

.question-detail-notes summary {
    cursor: pointer;
    font-weight: 900;
}

.study-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #e2e8f0;
    padding: 12px clamp(16px, 2.6vw, 24px);
    background: #f8fbff;
    min-height: 0;
}

.study-modal-footer .btn {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 14px;
    background: #fff;
    color: #17213a;
    font-weight: 900;
    cursor: pointer;
}

.study-modal-footer .btn-primary {
    border-color: #2f66f6;
    background: #2f66f6;
    color: #fff;
}

.study-modal-footer .btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.pause-modal {
    width: min(620px, 100%);
}

.pause-modal .study-modal-header p {
    margin: 0;
    color: #60708b;
    font-weight: 800;
}

.pause-modal-body {
    display: grid;
    gap: 16px;
    min-height: 0;
    overflow-y: auto;
    padding: clamp(16px, 2.6vw, 24px);
}

.pause-timer-card {
    display: grid;
    gap: 8px;
    place-items: center;
    border-radius: 8px;
    padding: 24px;
    color: #fff;
    background: linear-gradient(135deg, #25118a, #2f66f6);
}

.pause-timer-card span,
.pause-stat-grid span {
    color: inherit;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pause-timer-card strong {
    font-size: clamp(42px, 8vw, 68px);
    line-height: 1;
}

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

.pause-stat-grid div {
    display: grid;
    gap: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px;
    background: #f8fbff;
}

.pause-stat-grid span {
    color: #60708b;
}

.pause-stat-grid strong {
    color: #11182d;
    font-size: 20px;
}

.desk-media-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.desk-link-button,
.desk-action-row button,
.mini-exam-builder > .mini-exam-head button {
    border: 0;
    border-radius: 12px;
    padding: 11px 14px;
    background: #2f66f6;
    color: #fff;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.mini-exam-builder form {
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 12px;
}

.mini-exam-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.mini-exam-head > div {
    min-width: 0;
}

.mini-exam-modal {
    width: min(780px, 100%);
}

.mini-exam-builder .mini-exam-modal form {
    display: contents;
}

.mini-exam-modal-body {
    display: grid;
    gap: 16px;
    min-height: 0;
    padding: clamp(16px, 2.4vh, 24px);
    overflow-y: auto;
}

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

.mini-exam-form-grid label {
    min-width: 0;
}

.mini-exam-builder label {
    display: grid;
    gap: 6px;
    color: #60708b;
    font-weight: 800;
}

.mini-exam-builder input,
.mini-exam-builder select {
    width: 100%;
    border: 1px solid #d7dfeb;
    border-radius: 12px;
    padding: 11px 12px;
}

.desk-action-row {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
}

.mini-exam-result {
    min-height: 24px;
    color: #4b5874;
}

.mini-exam-result a {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    color: #2f66f6;
    font-weight: 900;
}

.question-text {
    color: #11182d;
    font-size: 17px;
    line-height: 1.65;
}

.question-image {
    max-width: 100%;
    border-radius: 14px;
    margin-top: 12px;
}

.choice-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.choice-list button {
    border: 1px solid #d8e1ef;
    border-radius: 14px;
    padding: 13px 14px;
    background: #fff;
    color: #26324a;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.choice-list button.correct {
    border-color: #13b981;
    background: #dcfce7;
    color: #065f46;
}

.choice-list button.wrong {
    border-color: #ef4444;
    background: #fee2e2;
    color: #991b1b;
}

.question-result {
    display: none;
    margin-top: 14px;
    padding: 14px;
    border-radius: 14px;
}

.question-result.success,
.question-result.danger {
    display: grid;
    gap: 6px;
}

.question-result.success {
    background: #dcfce7;
    color: #065f46;
}

.question-result.danger {
    background: #fee2e2;
    color: #991b1b;
}

.muted-card {
    min-height: 220px;
    align-content: center;
}

.topic-chat-pane,
.advisor-pane,
.feedback-review-pane {
    display: grid;
    gap: 14px;
}

.material-html.compact {
    display: none;
}

.material-item > .reader-tools[hidden] {
    display: none;
}

@media (max-width: 1320px) {
    .material-list,
    .lesson-note-card-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

.reader-tools {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}

.reader-stat-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid #edf2f7;
    padding-top: 10px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.reader-stat-line span {
    border: 1px solid #dbe7fb;
    border-radius: 999px;
    padding: 6px 10px;
    background: #f8fbff;
}

.reader-stat-line b {
    color: #123f91;
}

.reader-modal {
    position: fixed;
    inset: 0;
    z-index: 180;
    display: grid;
    place-items: center;
    padding: 22px;
}

.reader-modal[hidden] {
    display: none;
}

.reader-assessment-modal {
    position: fixed;
    inset: 0;
    z-index: 230;
    display: grid;
    place-items: center;
    padding: 22px;
}

.reader-assessment-modal[hidden] {
    display: none;
}

.reader-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 13, 34, .58);
    backdrop-filter: blur(8px);
}

.reader-assessment-dialog {
    position: relative;
    display: grid;
    gap: 14px;
    width: min(430px, 94vw);
    border: 1px solid #d8e1ef;
    border-radius: 24px;
    padding: 26px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(12, 20, 48, .32);
    animation: reader-modal-in .18s ease both;
}

.reader-assessment-dialog span {
    color: #6d58ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.reader-assessment-dialog h2 {
    margin: 0;
    color: #0d1730;
    font-size: 24px;
    line-height: 1.15;
}

.reader-assessment-dialog p {
    margin: 0;
    color: #64748b;
    font-weight: 800;
}

.reader-assessment-actions {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

.reader-assessment-actions button,
.reader-assessment-cancel {
    width: 100%;
    border-radius: 16px;
    padding: 15px 16px;
    font-weight: 950;
    cursor: pointer;
}

.reader-assessment-actions button {
    border: 1px solid #d8e1ef;
    color: #102147;
    background: linear-gradient(135deg, #fff, #f8fbff);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.reader-assessment-actions button:hover,
.reader-assessment-actions button:focus-visible {
    border-color: #6d58ff;
    color: #3b2dd8;
    background: linear-gradient(135deg, #eef2ff, #e8f0ff);
}

.reader-assessment-cancel {
    border: 1px solid transparent;
    color: #64748b;
    background: transparent;
}

.reader-dialog {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(1280px, 96vw);
    max-height: min(860px, 92vh);
    overflow: hidden;
    border: 1px solid #d8e1ef;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(12, 20, 48, .28);
    animation: reader-modal-in .22s ease both;
}

.reader-dialog-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #e4eaf5;
    padding: 20px 22px;
}

.reader-dialog-head span {
    color: #6d58ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.reader-dialog-head h2 {
    margin: 4px 0;
    font-size: 24px;
    line-height: 1.1;
}

.reader-dialog-head small {
    color: #64748b;
    font-weight: 800;
}

.reader-dialog-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reader-dialog-status > span {
    border-radius: 999px;
    padding: 8px 12px;
    color: #123f91;
    background: #eef4ff;
    letter-spacing: 0;
    text-transform: none;
}

.reader-close-button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #d8e1ef;
    border-radius: 999px;
    color: #22314c;
    background: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.reader-dialog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 0;
    min-height: 0;
}

.reader-dialog-content,
.reader-dialog-tools {
    min-height: 0;
    overflow: auto;
    padding: 22px;
}

.reader-dialog-content {
    color: #13213b;
    font-size: 18px;
    line-height: 1.72;
}

.reader-dialog-content :where(h1, h2, h3) {
    color: #0d1730;
    line-height: 1.18;
}

.video-embed-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid #d8e1ef;
    border-radius: 18px;
    background: #0f172a;
    box-shadow: 0 16px 34px rgba(12, 20, 48, .14);
}

.video-embed-frame iframe,
.video-embed-frame video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #0f172a;
}

.reader-dialog-tools {
    border-left: 1px solid #e4eaf5;
    background: #f8fbff;
}

.reader-dialog-tools .reader-tools {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

@keyframes reader-modal-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.status-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.status-choice-grid button {
    border: 1px solid #d8e1ef;
    border-radius: 18px;
    padding: 16px 12px;
    background: linear-gradient(135deg, #fff, #f8fbff);
    color: #26324a;
    font-weight: 950;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
    cursor: pointer;
}

.status-choice-grid button.selected {
    border-color: #6d58ff;
    background: linear-gradient(135deg, #eef2ff, #e8f0ff);
    color: #3b2dd8;
    box-shadow: inset 0 0 0 1px rgba(109, 88, 255, .35), 0 12px 28px rgba(79, 70, 229, .12);
}

.student-note-box,
.topic-chat-composer,
.advisor-composer,
.feedback-composer {
    display: grid;
    gap: 10px;
}

.student-note-box textarea,
.reader-note-input textarea,
.topic-chat-composer textarea,
.advisor-composer textarea,
.feedback-composer textarea,
.feedback-composer input,
.feedback-form-grid select {
    width: 100%;
    border: 1px solid #d8e1ef;
    border-radius: 14px;
    padding: 12px 14px;
    color: #11182d;
    background: #fff;
}

.reader-note-input {
    display: grid;
    gap: 10px;
}

.reader-note-history {
    display: grid;
    gap: 10px;
    max-height: 230px;
    overflow-y: auto;
    padding-right: 2px;
}

.reader-note-item {
    display: grid;
    gap: 8px;
    border: 1px solid #dbe5f4;
    border-radius: 14px;
    padding: 12px;
    background: #fff;
}

.reader-note-item header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.reader-note-actions {
    display: inline-flex;
    gap: 6px;
}

.reader-note-actions button,
.material-note-count-button {
    border: 1px solid #d8e5ff;
    border-radius: 10px;
    background: #fff;
    color: #315bff;
    font-weight: 900;
    cursor: pointer;
}

.reader-note-actions button {
    width: 34px;
    height: 34px;
}

.material-note-count-button {
    padding: 0;
    min-width: 28px;
}

.reader-note-item strong {
    color: #101b33;
    font-size: 13px;
    font-weight: 950;
}

.reader-note-item span,
.reader-note-item small {
    color: #667594;
    font-size: 12px;
    font-weight: 850;
}

.reader-note-item p {
    margin: 0;
    color: #26324a;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.reader-note-content {
    color: #26324a;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.reader-note-content > :first-child {
    margin-top: 0;
}

.reader-note-content > :last-child {
    margin-bottom: 0;
}

.reader-note-item audio {
    width: 100%;
}

.reader-audio-note {
    display: grid;
    gap: 12px;
    border: 1px dashed #b8c8e4;
    border-radius: 16px;
    padding: 12px;
    background: #f8fbff;
}

.reader-audio-note > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.reader-audio-note strong {
    color: #101b33;
    font-size: 14px;
    font-weight: 950;
}

.reader-audio-note small {
    color: #667594;
    font-size: 12px;
    font-weight: 850;
}

.reader-audio-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.user-notes-modal {
    z-index: 2700;
}

.user-notes-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(1040px, calc(100vw - 32px));
    max-height: min(820px, calc(100vh - 32px));
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 28px 90px rgba(15, 23, 42, .28);
    overflow: hidden;
}

.user-notes-body {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(360px, 1.2fr);
    min-height: 0;
    border-top: 1px solid #dce6f5;
}

.user-notes-list-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    background: #f7faff;
    border-right: 1px solid #dce6f5;
}

.user-notes-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 0;
    color: #15213b;
    font-size: 14px;
    font-weight: 950;
}

.desk-link-button.compact {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
}

.user-notes-list {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 0;
    padding: 14px 22px 22px;
    overflow-y: auto;
}

.user-notes-form {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 14px;
    min-height: 0;
    padding: 22px;
    overflow-y: auto;
}

.user-notes-composer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.user-notes-composer-head small {
    display: block;
    margin-bottom: 3px;
    color: #6a5cff;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.user-notes-composer-head strong {
    display: block;
    color: #15213b;
    font-size: 22px;
    font-weight: 950;
}

.user-note-mode-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 6px;
    border: 1px solid #dce6f5;
    border-radius: 16px;
    background: #f7faff;
}

.user-note-mode-tabs button {
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #5d6d8c;
    font: inherit;
    font-weight: 950;
    cursor: pointer;
}

.user-note-mode-tabs button.selected {
    background: #fff;
    color: #285bf6;
    box-shadow: 0 10px 24px rgba(45, 91, 246, .12);
}

.user-note-mode-panel {
    min-height: 0;
}

.user-note-editor-field {
    display: grid;
    gap: 9px;
    color: #15213b;
    font-weight: 900;
}

.user-notes-form textarea {
    width: 100%;
    min-height: 240px;
    border: 1px solid #d8e1ef;
    border-radius: 14px;
    padding: 12px 14px;
}

.user-notes-form .ck-editor__editable {
    min-height: 240px;
    max-height: 420px;
}

.user-note-mode-panel .reader-audio-note {
    min-height: 300px;
    align-content: center;
    padding: 28px;
    border-style: solid;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fbff, #eef5ff);
}

.user-note-mode-panel .reader-audio-note p {
    margin: 0;
    color: #667594;
    font-size: 14px;
    font-weight: 800;
}

.user-note-mode-panel .reader-audio-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}

.user-notes-list .reader-note-item {
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.user-notes-list .reader-note-item:hover,
.user-notes-list .reader-note-item.selected {
    border-color: #6a5cff;
    box-shadow: 0 14px 34px rgba(70, 91, 255, .14);
    transform: translateY(-1px);
}

.user-notes-list .reader-note-content {
    display: -webkit-box;
    max-height: 6.2em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.user-notes-list .reader-note-content :is(h1, h2, h3, h4, p, ul, ol) {
    margin-top: 0;
    margin-bottom: 4px;
    font-size: inherit;
    line-height: 1.45;
}

.study-notes-list-pane {
    display: grid;
    gap: 18px;
}

.study-desk-content-head {
    display: grid;
    gap: 4px;
    margin: 0 0 14px;
}

.study-desk-content-head span {
    display: block;
    color: var(--desk-pane-accent-a, #6d58ff);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.study-desk-content-head h2 {
    margin: 0;
    color: #101b33;
    font-size: 24px;
    line-height: 1.15;
}

.study-desk-content-head p {
    margin: 0;
    color: #5f6d87;
    font-size: 14px;
    font-weight: 800;
}

.study-notes-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.study-notes-list-head span {
    display: block;
    color: #6d58ff;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.study-notes-list-head h2 {
    margin: 4px 0 4px;
    color: #101b33;
    font-size: 24px;
}

.study-notes-list-head p {
    margin: 0;
    color: #5f6d87;
    font-size: 14px;
    font-weight: 800;
}

.study-notes-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.study-note-list-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dbe5f4;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #f8fbff);
    box-shadow: 0 12px 26px rgba(12, 20, 48, .05);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.study-note-list-item::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--desk-pane-accent-a, #eab308), var(--desk-pane-accent-b, #f59e0b));
    opacity: .9;
}

.study-note-list-item:hover {
    border-color: #6a5cff;
    box-shadow: 0 16px 34px rgba(70, 91, 255, .12);
    transform: translateY(-1px);
}

.study-note-list-main {
    display: grid;
    gap: 7px;
    width: 100%;
    border: 0;
    border-radius: 18px 0 0 18px;
    padding: 14px 16px;
    background: transparent;
    color: #13213b;
    text-align: left;
    cursor: pointer;
}

.study-note-list-main:focus-visible,
.study-note-action:focus-visible {
    outline: 3px solid rgba(79, 102, 255, .22);
    outline-offset: 2px;
}

.study-note-list-main span {
    width: fit-content;
    border-radius: 999px;
    padding: 5px 10px;
    background: #eef2ff;
    color: #5b43ff;
    font-size: 12px;
    font-weight: 950;
}

.study-note-list-main strong {
    color: #101b33;
    font-size: 17px;
    line-height: 1.25;
}

.study-note-list-main small {
    color: #60708d;
    font-size: 12px;
    font-weight: 800;
}

.study-note-list-main p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #33425f;
    font-size: 14px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.study-note-list-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px;
    border-left: 1px solid #dbe5f4;
}

.study-note-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #cfe0f7;
    border-radius: 12px;
    padding: 9px 12px;
    background: #fff;
    color: #315baf;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.study-note-action:hover {
    border-color: #7c8cff;
    background: #eef2ff;
}

.study-note-action.danger {
    border-color: #fecaca;
    background: #fff5f5;
    color: #dc2626;
}

.study-note-action.danger:hover {
    border-color: #f87171;
    background: #fee2e2;
}

.study-note-view-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(820px, calc(100vw - 32px));
    max-height: min(760px, calc(100vh - 40px));
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 32px 80px rgba(8, 15, 35, .28);
    animation: reader-modal-in .22s ease both;
}

.study-note-view-body {
    min-height: 260px;
    overflow: auto;
    padding: 24px;
    color: #13213b;
    font-size: 17px;
    line-height: 1.65;
}

.study-note-view-body audio {
    display: block;
    width: 100%;
    margin-top: 16px;
}

.user-notes-form footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 2px;
}

@media (max-width: 860px) {
    .user-notes-body {
        grid-template-columns: 1fr;
    }

    .user-notes-list {
        max-height: 260px;
        border-right: 0;
        border-bottom: 1px solid #dce6f5;
    }

    .study-notes-list-head {
        display: grid;
    }

    .study-note-list-item {
        grid-template-columns: 1fr;
    }

    .study-note-list-main {
        border-radius: 18px 18px 0 0;
    }

    .study-note-list-actions {
        justify-content: flex-end;
        border-top: 1px solid #dbe5f4;
        border-left: 0;
    }
}

.desk-link-button.ghost {
    border: 1px solid #cfe0f7;
    background: #fff;
    color: #315baf;
}

.topic-chat-composer,
.advisor-composer,
.feedback-composer {
    padding: 16px;
    border: 1px solid #d8e1ef;
    border-radius: 18px;
    background: #fff;
}

.topic-chat-composer button,
.advisor-composer button,
.feedback-composer button {
    justify-self: end;
    border: 0;
    border-radius: 12px;
    padding: 11px 16px;
    background: #2f66f6;
    color: #fff;
    font-weight: 900;
}

.topic-chat-list,
.advisor-thread-list,
.feedback-review-list,
.mini-exam-existing {
    display: grid;
    gap: 12px;
}

.topic-chat-message,
.advisor-thread-card,
.feedback-review-card,
.mini-exam-existing article {
    border: 1px solid #d8e1ef;
    border-radius: 18px;
    padding: 15px;
    background: #fff;
}

.topic-chat-message.user {
    margin-left: 10%;
    background: #eef2ff;
    border-color: #c7d2fe;
}

.topic-chat-message.assistant {
    margin-right: 10%;
    background: #f8fafc;
}

.topic-chat-content,
.topic-chat-message p,
.advisor-message p,
.feedback-review-card p {
    margin: 6px 0 0;
    color: #334155;
    line-height: 1.55;
}

.topic-chat-content :where(h1, h2, h3) {
    margin: 10px 0 8px;
    color: #101b33;
    line-height: 1.18;
}

.topic-chat-content :where(p, ul, ol) {
    margin: 8px 0;
}

.topic-chat-content :where(ul, ol) {
    padding-left: 22px;
}

.topic-chat-content :where(strong, b) {
    color: #0f2c67;
}

.topic-chat-content > :first-child {
    margin-top: 0;
}

.topic-chat-content > :last-child {
    margin-bottom: 0;
}

.advisor-thread-card.unread {
    border-color: #6d58ff;
}

.advisor-thread-card header,
.feedback-review-card header,
.mini-exam-existing article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.mini-exam-existing .desk-link-button {
    white-space: nowrap;
}

.advisor-thread-card header strong,
.feedback-review-card header strong,
.mini-exam-existing strong {
    display: block;
    color: #11182d;
}

.advisor-thread-card header span,
.feedback-review-card header span,
.feedback-review-card small,
.mini-exam-existing span,
.mini-exam-existing small {
    color: #64748b;
    font-size: 12px;
}

.advisor-message-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.advisor-message {
    padding: 10px 12px;
    border-radius: 14px;
    background: #f8fafc;
}

.advisor-message.own {
    background: #eef2ff;
}

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

.feedback-answer-box {
    margin-top: 10px;
    padding: 12px;
    border-radius: 14px;
    background: #ecfdf5;
    color: #065f46;
}

.mini-page,
.mini-focus-page {
    display: grid;
    gap: 18px;
}

.mini-hero,
.mini-focus-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    border-radius: 22px;
    padding: clamp(26px, 4vw, 44px);
    color: #fff;
    background: linear-gradient(135deg, #35158f, #7b3df4 48%, #2478ff);
    box-shadow: 0 24px 70px rgba(72, 61, 245, .18);
}

.mini-hero span,
.mini-focus-hero span,
.mini-list-card header span,
.mini-stat-card span,
.mini-builder-dialog header span,
.mini-tree-panel header strong,
.mini-question-meta span {
    color: inherit;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mini-hero h2,
.mini-focus-hero h2 {
    margin: 8px 0 6px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
}

.mini-hero p,
.mini-focus-hero p {
    margin: 0;
    max-width: 760px;
    color: rgba(255, 255, 255, .86);
    font-size: 18px;
    font-weight: 800;
}

.mini-primary-action,
.mini-list-card header select,
.mini-builder-dialog footer button,
.mini-session-nav button,
.mini-session-nav a {
    border: 1px solid #d8e1ef;
    border-radius: 14px;
    padding: 12px 16px;
    color: #16223a;
    background: #fff;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.mini-primary-action,
.mini-builder-dialog footer button[type="submit"] {
    border: 0;
    color: #fff;
    background: #2f66f6;
}

.mini-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.mini-stat-card,
.mini-list-card,
.mini-builder-dialog,
.mini-question-card,
.mini-analysis-panel {
    border: 1px solid #d8e1ef;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(15, 23, 42, .06);
}

.mini-stat-card {
    display: grid;
    gap: 8px;
    padding: 20px;
}

.mini-stat-card span,
.mini-list-card header span {
    color: #6d58ff;
}

.mini-stat-card strong {
    color: #07142f;
    font-size: 34px;
}

.mini-stat-card small {
    color: #60708b;
    font-weight: 800;
}

.mini-stat-split {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mini-stat-split b {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 7px 10px;
    border: 1px solid #dbe7fb;
    border-radius: 999px;
    color: #0f2a58;
    background: #f5f8ff;
    font-size: 13px;
    font-weight: 900;
}

.mini-stat-split i {
    color: #4f6cff;
}

.mini-list-card {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.mini-list-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mini-list-card h3 {
    margin: 4px 0 0;
    font-size: 26px;
}

.mini-session-list {
    display: grid;
    gap: 12px;
}

.mini-session-list article {
    display: grid;
    grid-template-columns: 104px minmax(0, 1.35fr) minmax(360px, .95fr) auto;
    align-items: center;
    gap: 16px;
    border: 1px solid #dbe7fb;
    border-radius: 16px;
    padding: 16px;
    background: #f8fbff;
}

.mini-row-state {
    display: grid;
    justify-items: center;
    gap: 7px;
    min-width: 0;
    padding: 10px 8px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 900;
}

.mini-row-state i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 999px;
    font-size: 17px;
}

.mini-row-state span {
    margin: 0;
    color: inherit;
}

.mini-row-state.completed {
    color: #047857;
    background: #e9fff5;
}

.mini-row-state.completed i {
    background: #c9fbe5;
}

.mini-row-state.waiting {
    color: #7c4a03;
    background: #fff7e8;
}

.mini-row-state.waiting i {
    background: #ffedc2;
}

.mini-session-list article strong,
.mini-row-score b {
    color: #07142f;
    font-size: 17px;
}

.mini-session-list article span,
.mini-session-list article small,
.mini-row-score span {
    display: block;
    margin-top: 4px;
    color: #60708b;
    font-size: 13px;
    font-weight: 800;
}

.mini-row-score {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
}

.mini-row-percent,
.mini-row-metrics span {
    display: grid;
    align-content: center;
    min-height: 58px;
    border: 1px solid #dbe7fb;
    border-radius: 14px;
    background: #fff;
}

.mini-row-percent {
    justify-items: center;
}

.mini-row-percent b {
    font-size: 20px;
}

.mini-row-percent span {
    margin: 0;
    font-size: 11px;
}

.mini-row-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.mini-row-metrics span {
    gap: 2px;
    padding: 8px 10px;
}

.mini-row-metrics b {
    font-size: 18px;
    line-height: 1;
}

.mini-row-metrics em {
    color: #60708b;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.mini-row-metrics .correct b {
    color: #047857;
}

.mini-row-metrics .wrong b {
    color: #dc2626;
}

.mini-row-metrics .empty b {
    color: #475569;
}

.mini-row-pending-total,
.mini-row-pending-note {
    display: grid;
    align-content: center;
    min-height: 58px;
    border: 1px solid #dbe7fb;
    border-radius: 14px;
    background: #fff;
}

.mini-row-pending-total {
    justify-items: center;
}

.mini-row-pending-total b {
    color: #07142f;
    font-size: 20px;
}

.mini-row-pending-total span {
    margin: 0;
    font-size: 11px;
}

.mini-row-pending-note {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: #7c4a03;
    background: #fffaf0;
}

.mini-row-pending-note i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 999px;
    background: #ffedc2;
}

.mini-row-pending-note span,
.mini-row-pending-note strong,
.mini-row-pending-note em {
    display: block;
    min-width: 0;
}

.mini-row-pending-note span {
    margin: 0;
}

.mini-row-pending-note strong {
    color: #7c4a03;
    font-size: 13px;
    font-weight: 900;
}

.mini-row-pending-note em {
    color: #8a6426;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.mini-row-actions {
    display: flex;
    gap: 8px;
}

.mini-row-actions a,
.mini-row-actions button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #cfe0ff;
    border-radius: 12px;
    color: #2458ee;
    background: #fff;
    text-decoration: none;
    cursor: pointer;
}

.mini-builder-modal {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(9, 13, 34, .58);
    backdrop-filter: blur(8px);
}

.mini-builder-modal[hidden] {
    display: none;
}

.mini-builder-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(1220px, 96vw);
    max-height: min(850px, 92vh);
    overflow: hidden;
    animation: reader-modal-in .2s ease both;
}

.mini-builder-dialog > header,
.mini-builder-dialog footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e4eaf5;
    padding: 20px 24px;
}

.mini-builder-dialog > header button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #d8e1ef;
    border-radius: 999px;
    background: #fff;
    color: #22314c;
}

.mini-builder-dialog h2 {
    margin: 4px 0 0;
    font-size: 30px;
}

.mini-builder-dialog form {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
}

.mini-builder-body {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(520px, 1fr) minmax(320px, 420px);
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    overflow: auto;
    padding: 20px 24px;
}

.mini-filter-grid {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    align-content: start;
    grid-template-columns: 1fr;
    gap: 12px;
    border: 1px solid #d8e1ef;
    border-radius: 18px;
    padding: 16px;
    background: #fff;
}

.mini-filter-grid label,
.mini-tree-row label {
    display: grid;
    gap: 6px;
    color: #60708b;
    font-weight: 900;
}

.mini-filter-grid input,
.mini-filter-grid select {
    width: 100%;
    border: 1px solid #d8e1ef;
    border-radius: 12px;
    padding: 12px;
    color: #16223a;
    background: #fff;
    font-weight: 800;
}

.mini-tree-panel {
    display: grid;
    grid-column: 1;
    grid-row: 1 / span 2;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 560px;
    border: 1px solid #d8e1ef;
    border-radius: 18px;
    overflow: hidden;
    background: #f8fbff;
}

.mini-tree-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #e4eaf5;
    padding: 16px;
}

.mini-tree-panel h3 {
    margin: 0 0 4px;
    font-size: 22px;
}

.mini-tree-panel p {
    margin: 0;
    color: #60708b;
    font-weight: 800;
}

.mini-tree-panel header strong {
    color: #6d58ff;
}

.mini-tree-scroll {
    min-height: 0;
    max-height: none;
    overflow: auto;
    padding: 12px 16px 18px;
}

.mini-tree-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mini-tree-list.branch {
    margin-left: 18px;
    padding-left: 16px;
    border-left: 2px solid #cfe0ff;
}

.mini-tree-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    padding: 8px;
}

.mini-tree-row:hover {
    background: #eef4ff;
}

.mini-tree-row button {
    border: 0;
    background: transparent;
    color: #31548b;
}

.mini-tree-list li.collapsed > .mini-tree-list {
    display: none;
}

.mini-tree-list li.collapsed > .mini-tree-row [data-mini-tree-toggle] i {
    transform: rotate(-90deg);
}

.mini-tree-row label {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    color: #082251;
}

.mini-tree-row small {
    display: block;
    color: #60708b;
    font-size: 12px;
}

.mini-preview {
    display: grid;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    gap: 8px;
    border: 1px dashed #a9c5fb;
    border-radius: 14px;
    padding: 14px;
    background: #f7fbff;
}

.mini-builder-dialog footer {
    border-top: 1px solid #e4eaf5;
    border-bottom: 0;
    justify-content: flex-end;
}

.mini-builder-dialog footer span {
    margin-right: auto;
    color: #60708b;
    font-weight: 800;
}

.mini-focus-control {
    display: grid;
    gap: 8px;
    min-width: 260px;
    border-radius: 22px;
    padding: 18px;
    background: rgba(255, 255, 255, .14);
}

.mini-focus-control strong {
    color: #fff;
    font-size: 34px;
}

.mini-focus-control div {
    display: flex;
    gap: 8px;
}

.mini-focus-control button {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: rgba(255, 255, 255, .22);
}

.mini-focus-control button:disabled {
    opacity: .42;
    cursor: not-allowed;
    filter: grayscale(.35);
}

.mini-focus-control [data-mini-session-action="start"] {
    background: #16c784;
}

.mini-focus-control [data-mini-session-action="finish"] {
    background: #ef4444;
}

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

.mini-focus-layout > .mini-question-map {
    display: none;
}

.mini-question-map {
    display: grid;
    align-content: start;
    gap: 8px;
    border: 1px solid #d8e1ef;
    border-radius: 18px;
    padding: 14px;
    background: #fff;
}

.mini-question-map button {
    border: 1px solid #dbe7fb;
    border-radius: 12px;
    padding: 10px 0;
    color: #37527c;
    background: #f8fbff;
    font-weight: 900;
}

.mini-question-map button.active {
    color: #fff;
    background: #6d58ff;
}

.mini-question-map button.answered {
    border-color: #16c784;
}

.mini-question-stage {
    display: grid;
    gap: 14px;
    min-width: 0;
}

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

.mini-question-meta span {
    border-radius: 999px;
    padding: 7px 10px;
    color: #31548b;
    background: #eef4ff;
}

.mini-question-card {
    display: grid;
    gap: 18px;
    padding: clamp(18px, 3vw, 28px);
}

.mini-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mini-choice-grid button {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border: 1px solid #d8e1ef;
    border-radius: 16px;
    padding: 14px;
    color: #21304b;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.mini-choice-grid button.selected {
    border-color: #6d58ff;
    background: #eef2ff;
}

.mini-choice-grid button span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 999px;
    color: #4f46e5;
    background: #eef2ff;
    font-weight: 900;
}

.mini-session-nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.mini-analysis-panel {
    padding: 16px;
}

.mini-session-intro {
    display: grid;
    gap: 12px;
    align-content: start;
    max-width: 560px;
    border: 1px solid #d8e1ef;
    border-radius: 22px;
    padding: 24px;
    background: #fff;
    box-shadow: 0 18px 36px rgba(24, 35, 74, .08);
}

.mini-session-intro span,
.mini-analysis-head span {
    color: #6d58ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.mini-session-intro h3,
.mini-analysis-head h3 {
    margin: 0;
    color: #07142f;
    font-size: 24px;
}

.mini-session-intro p,
.mini-analysis-head p {
    margin: 0;
    color: #536887;
}

.mini-session-intro button {
    justify-self: start;
    border: 0;
    border-radius: 14px;
    padding: 14px 18px;
    color: #fff;
    background: #356bff;
    font-weight: 900;
}

.mini-solve-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(15, 23, 42, .56);
}

.mini-solve-modal[hidden] {
    display: none;
}

.swal2-container {
    z-index: 3000 !important;
}

.mini-solve-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(1180px, 100%);
    max-height: min(860px, calc(100vh - 44px));
    overflow: hidden;
    border: 1px solid #d6e1f2;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 28px 70px rgba(10, 18, 38, .24);
}

.mini-solve-dialog > header,
.mini-solve-dialog > footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    background: #fff;
}

.mini-solve-dialog > header {
    border-bottom: 1px solid #dbe4f3;
}

.mini-solve-dialog > footer {
    justify-content: flex-end;
    border-top: 1px solid #dbe4f3;
}

.mini-solve-dialog > header h3 {
    margin: 2px 0 0;
    color: #07142f;
    font-size: 22px;
}

.mini-solve-dialog > header span {
    color: #6d58ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.mini-solve-timer {
    margin-left: auto;
    border-radius: 16px;
    padding: 10px 14px;
    color: #193465;
    background: #eef4ff;
    text-align: right;
}

.mini-solve-timer strong {
    display: block;
    font-size: 24px;
}

.mini-solve-dialog [data-mini-modal-close] {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #d7e2f2;
    border-radius: 999px;
    color: #4f6384;
    background: #fff;
}

.mini-solve-body {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    min-height: 0;
    overflow: auto;
    padding: 18px 22px;
    background: linear-gradient(180deg, #f8fbff, #fff);
}

.mini-solve-modal.mini-state-planned .mini-solve-body {
    grid-template-columns: 1fr;
    background: #111c33;
}

.mini-solve-modal.mini-state-planned .mini-solve-map {
    display: none;
}

.mini-solve-map {
    display: grid;
    align-content: start;
    gap: 8px;
    position: sticky;
    top: 0;
}

.mini-solve-map button {
    border: 1px solid #dbe7fb;
    border-radius: 12px;
    padding: 10px 0;
    color: #37527c;
    background: #fff;
    font-weight: 900;
}

.mini-solve-map button.active {
    color: #fff;
    background: #6d58ff;
}

.mini-solve-map button.answered {
    border-color: #34d399;
    color: #065f46;
    background: #d1fae5;
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .18);
}

.mini-solve-map button.answered::after {
    content: "✓";
    margin-left: 5px;
    font-size: 12px;
}

.mini-solve-map button.active.answered {
    border-color: #6d58ff;
    color: #fff;
    background: #6d58ff;
}

.mini-solve-map button.correct {
    border-color: #22c55e;
    color: #047857;
    background: #dcfce7;
}

.mini-solve-map button.wrong {
    border-color: #ef4444;
    color: #b91c1c;
    background: #fee2e2;
}

.mini-solve-map button.empty {
    color: #64748b;
    background: #f1f5f9;
}

.mini-solve-stage {
    min-width: 0;
}

.mini-prep-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    gap: 10px 28px;
    min-height: 360px;
    border: 1px solid #2a3956;
    border-radius: 8px;
    padding: 28px;
    color: #fff;
    background: #111c33;
}

.mini-prep-card span {
    color: #c7d2fe;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.mini-prep-card h3 {
    margin: 0;
    font-size: 28px;
}

.mini-prep-card p {
    grid-column: 1;
    max-width: 760px;
    margin: 0;
    color: #dbe7ff;
    line-height: 1.55;
}

.mini-prep-card .mini-prep-warning {
    color: #fecaca;
    font-weight: 800;
}

.mini-prep-card button {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
    border: 0;
    border-radius: 8px;
    padding: 13px 18px;
    color: #fff;
    background: #070d2f;
    font-weight: 900;
    cursor: pointer;
}

.mini-choice-grid button.correct {
    border-color: #22c55e;
    background: #dcfce7;
}

.mini-choice-grid button.wrong {
    border-color: #ef4444;
    background: #fee2e2;
}

.mini-question-meta span.correct {
    color: #047857;
    background: #dcfce7;
}

.mini-question-meta span.wrong {
    color: #b91c1c;
    background: #fee2e2;
}

.mini-question-meta span.empty {
    color: #64748b;
    background: #f1f5f9;
}

.mini-question-solution {
    display: grid;
    gap: 8px;
    border: 1px solid #dbe7fb;
    border-radius: 16px;
    padding: 14px;
    background: #f8fbff;
}

.mini-question-solution.correct {
    border-color: #86efac;
    background: #f0fdf4;
}

.mini-question-solution.wrong {
    border-color: #fca5a5;
    background: #fff1f2;
}

.mini-question-solution p {
    margin: 0;
}

.mini-solution-text {
    color: #243655;
}

.mini-solve-dialog > footer button {
    border: 1px solid #d6e1f2;
    border-radius: 12px;
    padding: 11px 14px;
    color: #1d2f50;
    background: #fff;
    font-weight: 900;
}

.mini-solve-dialog > footer button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.mini-solve-dialog > footer button.danger {
    border-color: #ef4444;
    color: #fff;
    background: #ef4444;
}

.mini-analysis-panel {
    display: grid;
    gap: 16px;
}

.mini-analysis-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #d8e1ef;
    border-radius: 20px;
    padding: 18px;
    background: #fff;
}

.mini-analysis-score {
    display: grid;
    min-width: 88px;
    height: 88px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #6d58ff;
    font-size: 28px;
    font-weight: 900;
}

.mini-analysis-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.mini-analysis-stats div {
    border: 1px solid #d8e1ef;
    border-radius: 16px;
    padding: 14px;
    background: #fff;
}

.mini-analysis-stats strong {
    display: block;
    color: #07142f;
    font-size: 24px;
}

.mini-analysis-stats span {
    color: #60718e;
    font-weight: 800;
}

.mini-analysis-list {
    display: grid;
    gap: 14px;
}

.mini-analysis-list > article {
    border: 1px solid #d8e1ef;
    border-radius: 18px;
    padding: 16px;
    background: #fff;
}

.mini-analysis-list > article > header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.mini-analysis-list > article.correct > header span {
    color: #047857;
}

.mini-analysis-list > article.wrong > header span {
    color: #b91c1c;
}

@media (max-width: 1180px) {
    .mini-builder-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .mini-tree-panel,
    .mini-filter-grid,
    .mini-preview {
        grid-column: auto;
        grid-row: auto;
    }

    .mini-tree-panel {
        min-height: 420px;
    }

    .mini-filter-grid,
    .mini-dashboard-grid,
    .mini-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mini-session-list article {
        grid-template-columns: 92px minmax(0, 1fr) auto;
    }

    .mini-row-score {
        grid-column: 2 / -1;
    }
}

@media (max-width: 760px) {
    .mini-hero,
    .mini-focus-hero,
    .mini-list-card header {
        align-items: stretch;
        flex-direction: column;
    }

    .mini-dashboard-grid,
    .mini-filter-grid,
    .mini-session-list article,
    .mini-focus-layout,
    .mini-choice-grid {
        grid-template-columns: 1fr;
    }

    .mini-question-map {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .mini-row-state {
        justify-items: start;
    }

    .mini-row-score {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .mini-row-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .desk-card-grid,
    .question-summary-grid,
    .question-summary-footer,
    .mini-exam-builder form,
    .mini-exam-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .study-desk-command,
    .study-desk-layout {
        grid-template-columns: 1fr;
    }

    .study-desk-command {
        height: 146px;
        min-height: 146px;
    }

    .study-desk-tabs {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .study-desk-tab-group {
        grid-column: 1 / -1;
    }

    .choice-list,
    .desk-card-grid,
    .question-summary-grid,
    .question-summary-footer,
    .pause-stat-grid,
    .mini-exam-builder form,
    .mini-exam-form-grid,
    .feedback-form-grid,
    .status-choice-grid {
        grid-template-columns: 1fr;
    }

    .mini-exam-head {
        align-items: stretch;
        flex-direction: column;
    }

    .question-summary-head {
        align-items: stretch;
        flex-direction: column;
    }

    .study-modal-backdrop {
        padding: 8px;
    }

    .study-modal {
        width: 100%;
        max-height: calc(100dvh - 16px);
    }

    .study-modal-header,
    .study-modal-footer {
        padding-inline: 14px;
    }

    .study-modal-footer {
        flex-wrap: wrap;
    }

    .study-modal-footer .btn {
        flex: 1 1 140px;
    }

    .question-modal-prompt {
        font-size: 17px;
    }

    .modal-choice-button {
        grid-template-columns: 32px minmax(0, 1fr);
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body.modal-open {
    overflow: hidden;
}

body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 72% 0%, rgba(126, 87, 255, .12), transparent 34%),
        linear-gradient(135deg, #eef5ff 0%, #fbfbff 42%, #fff7ec 100%);
    font-family: var(--font);
    font-size: 16px;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

.login-body {
    min-height: 100vh;
    background:
        linear-gradient(120deg, rgba(249, 251, 255, .88), rgba(235, 246, 250, .9)),
        radial-gradient(circle at 13% 72%, rgba(15, 23, 42, .09), transparent 23rem),
        radial-gradient(circle at 41% 28%, rgba(20, 184, 166, .18), transparent 18rem),
        radial-gradient(circle at 78% 82%, rgba(109, 61, 245, .12), transparent 24rem),
        linear-gradient(135deg, #f8faff 0%, #eef8f7 100%);
    overflow-x: hidden;
}

.login-shell {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    overflow: auto;
    position: relative;
    width: 100%;
}

.login-shell::before,
.login-shell::after {
    content: "";
    pointer-events: none;
    position: fixed;
}

.login-shell::before {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .5), transparent),
        radial-gradient(circle, rgba(20, 184, 166, .16), transparent 62%);
    filter: blur(2px);
    inset: 0;
}

.login-shell::after {
    background-image:
        linear-gradient(rgba(16, 24, 47, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 24, 47, .055) 1px, transparent 1px);
    background-size: 64px 64px;
    inset: 0;
    mask-image: linear-gradient(120deg, transparent, #000 20%, transparent 72%);
    opacity: .28;
}

.login-stage {
    align-items: center;
    display: grid;
    gap: clamp(28px, 4vw, 72px);
    grid-template-columns: minmax(360px, .92fr) minmax(360px, .52fr);
    margin: 0 auto;
    max-width: 1320px;
    min-height: 100vh;
    padding: clamp(24px, 4vw, 56px);
    position: relative;
    width: min(100%, 1320px);
    z-index: 1;
}

.login-visual {
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 6vh, 70px);
    justify-content: center;
    min-height: 100%;
    min-width: 0;
    padding: clamp(28px, 4vw, 62px) clamp(18px, 3vw, 48px);
    position: relative;
}

.login-visual::before,
.login-visual::after {
    border: 1px solid rgba(1, 0, 52, .15);
    border-radius: 50%;
    content: "";
    position: absolute;
}

.login-visual::before {
    background: rgba(20, 184, 166, .13);
    height: 18rem;
    right: clamp(1rem, 8vw, 6rem);
    top: clamp(3rem, 8vw, 6rem);
    width: 18rem;
}

.login-visual::after {
    background: rgba(1, 0, 52, .08);
    bottom: 8rem;
    height: 24rem;
    left: -8rem;
    width: 24rem;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.login-brand > span {
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    border-radius: 22px;
    background: linear-gradient(145deg, #7c4dff, #20d2a0);
    box-shadow: 0 15px 32px rgba(109, 61, 245, .25);
    font-size: 38px;
}

.login-brand-logo {
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(1, 0, 52, .12);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(1, 0, 52, .1);
    display: block;
    max-height: 8.2rem;
    max-width: 12rem;
    object-fit: contain;
    padding: .55rem .8rem;
    position: relative;
    z-index: 1;
}

.login-brand p,
.section-kicker {
    margin: 0 0 3px;
    color: var(--purple);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.login-visual-copy {
    position: relative;
    z-index: 1;
}

.login-visual-copy h2 {
    color: #0e1531;
    font-size: clamp(2.8rem, 5.5vw, 5.9rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: .93;
    margin: 0 0 1rem;
    max-width: 11ch;
}

.login-visual-copy p:last-child {
    color: rgba(16, 24, 47, .66);
    font-size: 1.04rem;
    line-height: 1.65;
    margin: 0;
    max-width: 34rem;
}

.login-visual-metrics {
    align-items: center;
    backdrop-filter: blur(18px);
    background: rgba(255, 255, 255, .58);
    border: 1px solid rgba(1, 0, 52, .12);
    border-radius: 18px;
    box-shadow: 0 22px 58px rgba(1, 0, 52, .1);
    display: flex;
    justify-content: space-between;
    margin-top: clamp(4px, 2vh, 24px);
    max-width: 28rem;
    padding: 1rem 1.15rem;
    position: relative;
    z-index: 1;
}

.login-visual-metrics span {
    color: rgba(16, 24, 47, .64);
    font-weight: 800;
}

.login-visual-metrics strong {
    color: #010034;
    font-size: 1.55rem;
    font-weight: 950;
}

.login-panel {
    align-self: center;
    backdrop-filter: blur(24px);
    background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .62));
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 28px;
    box-shadow: 0 26px 76px rgba(1, 0, 52, .14);
    justify-self: center;
    max-width: 420px;
    min-height: min(82vh, 46rem);
    min-width: 0;
    padding: clamp(32px, 4.5vw, 64px);
    width: 100%;
}

.login-language-row {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.login-language-row select {
    appearance: none;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(1, 0, 52, .12);
    border-radius: 9px;
    color: #0e1531;
    cursor: default;
    font-weight: 900;
    min-height: 32px;
    padding: 0 28px 0 12px;
}

.login-brand h1,
.welcome-copy h1,
.panel-card h2 {
    margin: 0;
}

.login-panel h1 {
    color: #010034;
    font-size: clamp(2rem, 4vw, 2.7rem);
    line-height: 1.05;
    margin: 0 0 .55rem;
}

.login-lead {
    color: rgba(16, 24, 47, .62);
    font-weight: 700;
    line-height: 1.55;
    margin: 0 0 1.8rem;
}

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

.login-form label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-weight: 800;
}

.login-form input {
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(1, 0, 52, .16);
    border-radius: 14px;
    color: #111827;
    min-height: 3.15rem;
    outline: none;
    padding: 0 16px;
    width: 100%;
}

.login-form input:focus {
    border-color: rgba(20, 184, 166, .82);
    box-shadow: 0 0 0 .22rem rgba(20, 184, 166, .18);
}

.password-field {
    display: block;
    position: relative;
}

.password-field input {
    padding-right: 44px;
}

.password-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    color: #3d4663;
    cursor: pointer;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    min-height: 0;
    padding: 0;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    background: rgba(1, 0, 52, .06);
    color: #010034;
    filter: none;
    transform: translateY(-50%);
}

.password-toggle:focus-visible {
    outline: 3px solid rgba(20, 184, 166, .24);
    outline-offset: 2px;
}

.login-form button:not(.password-toggle) {
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #010034, #00566b);
    box-shadow: 0 16px 34px rgba(1, 0, 52, .22);
    font-weight: 900;
    min-height: 3.15rem;
    cursor: pointer;
}

.login-form button:not(.password-toggle):hover {
    filter: saturate(1.05) brightness(1.03);
    transform: translateY(-1px);
}

.login-register-open {
    background: rgba(255, 255, 255, .82) !important;
    border: 1px solid rgba(1, 0, 52, .16) !important;
    box-shadow: none !important;
    color: #18213c !important;
}

.login-register-modal {
    align-items: center;
    background: rgba(12, 18, 38, .54);
    backdrop-filter: blur(5px);
    display: none;
    inset: 0;
    justify-content: center;
    padding: 22px;
    position: fixed;
    z-index: 1600;
}

.login-register-modal.is-open {
    display: flex;
}

.login-register-dialog {
    background: #fff;
    border: 1px solid #dbe3f4;
    border-radius: 0;
    box-shadow: 0 28px 80px rgba(12, 18, 38, .28);
    max-height: min(92vh, 760px);
    max-width: 560px;
    overflow: auto;
    padding: 28px 30px 30px;
    position: relative;
    width: min(100%, 560px);
}

.login-register-close {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe3f4;
    color: #172033;
    cursor: pointer;
    display: inline-flex;
    font-size: 22px;
    height: 40px;
    justify-content: center;
    position: absolute;
    right: 30px;
    top: 30px;
    width: 40px;
}

.login-register-dialog h2 {
    color: #172033;
    font-size: 28px;
    line-height: 1.1;
    margin: 0 54px 8px 0;
}

.login-register-dialog > p {
    color: #5c6a86;
    font-weight: 700;
    margin: 0 0 24px;
}

.login-register-form {
    display: grid;
    gap: 16px;
}

.login-register-form label:not(.login-register-check) {
    color: #354158;
    display: grid;
    gap: 8px;
    font-weight: 900;
}

.login-register-form input:not([type="checkbox"]) {
    background: #fff;
    border: 1px solid #d7dfed;
    border-radius: 0;
    color: #172033;
    min-height: 46px;
    outline: none;
    padding: 0 14px;
    width: 100%;
}

.login-register-form .iti {
    width: 100%;
}

.login-register-check {
    align-items: flex-start;
    color: #48546d;
    display: flex;
    gap: 12px;
    font-weight: 900;
    line-height: 1.4;
}

.login-register-check input {
    flex: 0 0 auto;
    margin-top: 4px;
}

.login-register-status {
    display: none;
    border-radius: 0;
    font-weight: 900;
    line-height: 1.45;
    padding: 13px 14px;
}

.login-register-status.is-error {
    display: block;
    background: #fff1f2;
    border: 1px solid #fda4af;
    color: #be123c;
}

.login-register-status.is-success {
    display: block;
    background: #ecfdf5;
    border: 1px solid #86efac;
    color: #047857;
}

.login-register-form button[type="submit"] {
    background: #e32235;
    border: 0;
    border-radius: 0;
    color: #fff;
    cursor: pointer;
    font-weight: 950;
    min-height: 48px;
}

.login-register-form button[type="submit"]:disabled {
    cursor: wait;
    opacity: .72;
}

.alert-danger {
    border: 1px solid #fecdd3;
    border-radius: 18px;
    margin: 0 0 18px;
    padding: 14px 16px;
    color: #9f1239;
    background: #fff1f2;
    font-weight: 900;
}

@media (max-width: 820px) {
    .login-shell {
        min-height: 100dvh;
        padding: .75rem;
    }

    .login-stage {
        gap: 0;
        grid-template-columns: minmax(0, 1fr);
        min-height: 100dvh;
        padding: 0;
        width: 100%;
    }

    .login-visual {
        background: rgba(255, 255, 255, .46);
        border: 1px solid rgba(1, 0, 52, .1);
        border-bottom: 0;
        border-radius: 24px 24px 0 0;
        gap: .85rem;
        justify-content: flex-start;
        min-height: 0;
        overflow: hidden;
        padding: 1rem;
    }

    .login-visual::before {
        height: 10rem;
        right: -4rem;
        top: -3rem;
        width: 10rem;
    }

    .login-visual::after {
        bottom: auto;
        height: 12rem;
        left: -5rem;
        top: 5rem;
        width: 12rem;
    }

    .login-visual-copy h2 {
        font-size: clamp(1.85rem, 8.5vw, 2.45rem);
        line-height: .98;
        max-width: 100%;
    }

    .login-visual-copy p:last-child {
        display: none;
    }

    .login-visual-metrics {
        border-radius: 14px;
        margin-top: 0;
        max-width: none;
        padding: .72rem .85rem;
    }

    .login-brand-logo {
        max-height: 4.8rem;
        max-width: 9.5rem;
    }

    .login-panel {
        border-radius: 0 0 24px 24px;
        border-top: 0;
        box-shadow: 0 18px 42px rgba(1, 0, 52, .12);
        justify-self: stretch;
        max-width: none;
        min-height: 0;
        padding: 1rem;
        width: 100%;
    }

    .login-language-row {
        flex-wrap: wrap;
        gap: .5rem;
    }
}

.learning-shell {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    min-height: 100vh;
    transition: grid-template-columns .36s cubic-bezier(.22, 1, .36, 1);
}

.learning-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    width: 270px;
    min-width: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 24px 16px;
    color: #fff;
    background:
        radial-gradient(circle at 35% 10%, rgba(109, 78, 255, .95), transparent 30%),
        linear-gradient(180deg, #3a1cc5 0%, #16206e 70%, #17266f 100%);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .12);
    transition:
        width .36s cubic-bezier(.22, 1, .36, 1),
        padding .36s cubic-bezier(.22, 1, .36, 1),
        opacity .24s ease,
        transform .36s cubic-bezier(.22, 1, .36, 1);
}

.learning-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 70px;
    margin: 0 4px 22px;
}

.brand-logo {
    display: block;
    width: min(190px, 100%);
    height: auto;
    max-height: 58px;
    object-fit: contain;
}

.brand-mascot {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 18px;
    background: rgba(255, 255, 255, .14);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
    font-size: 34px;
}

.learning-brand strong {
    color: #fff;
    font-size: 23px;
    font-weight: 900;
}

.learning-menu {
    display: grid;
    gap: 6px;
}

.learning-menu a {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 42px;
    border-radius: 17px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, .92);
    font-weight: 900;
}

.learning-menu a i {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    font-size: 18px;
}

.learning-menu a:hover,
.learning-menu a.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(158, 99, 255, .96), rgba(115, 73, 255, .8));
    box-shadow: 0 14px 30px rgba(15, 10, 70, .24);
}

.learning-menu em {
    display: grid;
    min-width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(145deg, #ff5b7a, #ff2f63);
    font-size: 13px;
    font-style: normal;
}

.learning-info-links {
    display: grid;
    gap: 7px;
    margin: 16px 2px 18px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 22px;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.learning-info-links a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 36px;
    border-radius: 14px;
    padding: 6px 8px;
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}

.learning-info-links a:hover,
.learning-info-links a.active {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

.learning-info-links i {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 10px;
    color: #bbf7d0;
    background: rgba(22, 163, 74, .18);
    font-size: 14px;
}

.info-page-shell {
    display: grid;
    gap: 22px;
}

.info-hero,
.info-story-card,
.info-step-section {
    border: 1px solid #dbe7ff;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 22px 56px rgba(30, 45, 100, .08);
}

.info-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    overflow: hidden;
    padding: 34px;
    background:
        radial-gradient(circle at 82% 18%, rgba(32, 157, 255, .18), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #f3f6ff 58%, #eefbff 100%);
}

.info-hero h2,
.info-story-card h2,
.info-step-section h2 {
    margin: 0;
    color: #07112f;
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.05;
}

.info-hero p,
.info-story-card p,
.info-step-section p {
    max-width: 760px;
    margin: 16px 0 0;
    color: #60708e;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.72;
}

.info-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.info-hero-actions a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    border-radius: 16px;
    padding: 0 18px;
    color: #fff;
    background: linear-gradient(135deg, #674cff, #1e8bff);
    font-weight: 900;
    box-shadow: 0 18px 36px rgba(42, 97, 255, .22);
}

.info-hero-actions a + a {
    color: #2342a5;
    background: #eef4ff;
    box-shadow: none;
}

.info-hero-panel {
    display: grid;
    gap: 10px;
    align-self: stretch;
    border-radius: 24px;
    padding: 20px;
    color: #fff;
    background: linear-gradient(145deg, #32148c, #126ff4);
    box-shadow: 0 24px 48px rgba(18, 57, 170, .22);
}

.info-hero-panel strong {
    font-size: 28px;
    font-weight: 900;
}

.info-hero-panel span {
    display: flex;
    align-items: center;
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 15px;
    padding: 0 14px;
    background: rgba(255, 255, 255, .12);
    font-weight: 900;
}

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

.info-feature-card {
    border: 1px solid #dbe7ff;
    border-radius: 22px;
    padding: 22px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(30, 45, 100, .06);
}

.info-feature-card i {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 15px;
    color: #2f64ff;
    background: #eef4ff;
    font-size: 22px;
}

.info-feature-card h3 {
    margin: 18px 0 10px;
    color: #07112f;
    font-size: 20px;
    font-weight: 900;
}

.info-feature-card p {
    margin: 0;
    color: #60708e;
    font-weight: 700;
    line-height: 1.65;
}

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

.social-account-card {
    display: grid;
    gap: 18px;
    align-content: start;
    min-height: 310px;
    border: 1px solid #dbe7ff;
    border-radius: 24px;
    padding: 24px;
    background: linear-gradient(180deg, #fff, #f8fbff);
    box-shadow: 0 18px 40px rgba(32, 54, 103, .08);
}

.social-account-card.linkedin {
    border-top: 5px solid #0a66c2;
}

.social-account-card.instagram {
    border-top: 5px solid #e1306c;
}

.social-account-card.facebook {
    border-top: 5px solid #1877f2;
}

.social-account-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #6548ff, #2387ff);
    font-size: 26px;
}

.social-account-card h3 {
    margin: 8px 0 10px;
    color: #07112f;
    font-size: 26px;
    font-weight: 900;
}

.social-account-card p:not(.section-kicker) {
    margin: 0;
    color: #60708e;
    font-weight: 700;
    line-height: 1.65;
}

.social-account-card > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    align-self: end;
    min-height: 48px;
    border-radius: 16px;
    color: #fff;
    background: #3267f6;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(50, 103, 246, .2);
}

.info-story-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 28px;
    padding: 28px;
}

.info-story-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-content: center;
}

.info-story-metrics span {
    display: grid;
    gap: 6px;
    border: 1px solid #dbe7ff;
    border-radius: 18px;
    padding: 18px;
    background: #f7faff;
}

.info-story-metrics b {
    color: #2e52d9;
    font-size: 24px;
    font-weight: 900;
}

.info-story-metrics small {
    color: #60708e;
    font-weight: 800;
}

.info-step-section {
    padding: 28px;
}

.info-step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.info-step-grid article {
    border: 1px solid #dbe7ff;
    border-radius: 20px;
    padding: 20px;
    background: linear-gradient(180deg, #fff, #f8fbff);
}

.info-step-grid span {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    color: #5d42ff;
    background: #f0edff;
    font-weight: 900;
}

.info-step-grid h3 {
    margin: 16px 0 8px;
    color: #07112f;
    font-size: 20px;
    font-weight: 900;
}

.info-step-grid p {
    margin: 0;
    font-size: 15px;
}

@media (max-width: 1024px) {
    .info-hero,
    .info-story-card {
        grid-template-columns: 1fr;
    }

    .info-feature-grid,
    .social-account-grid,
    .info-step-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .info-hero,
    .info-story-card,
    .info-step-section {
        border-radius: 22px;
        padding: 20px;
    }

    .info-feature-grid,
    .social-account-grid,
    .info-step-grid,
    .info-story-metrics {
        grid-template-columns: 1fr;
    }
}

.sidebar-wisdom {
    position: relative;
    min-height: 260px;
    margin-top: auto;
    border-radius: 32px;
    padding: 24px 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 80%, rgba(31, 210, 156, .65), transparent 32%),
        radial-gradient(circle at 20% 90%, rgba(255, 198, 87, .55), transparent 25%),
        rgba(0, 0, 0, .12);
}

.sidebar-wisdom p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #fff;
    text-align: center;
    font-weight: 900;
}

.sidebar-wisdom > span {
    display: block;
    margin-top: 5px;
    text-align: center;
}

.sidebar-hill {
    position: absolute;
    right: -18px;
    bottom: -28px;
    left: -18px;
    height: 126px;
    border-radius: 55% 55% 0 0;
    background: linear-gradient(145deg, #0aa67c, #1d8fda);
}

.sidebar-hill strong {
    position: absolute;
    left: 50%;
    bottom: 48px;
    transform: translateX(-50%);
    font-size: 64px;
}

.learning-main {
    min-width: 0;
    padding: 26px;
    transition: padding .36s cubic-bezier(.22, 1, .36, 1);
}

.learning-topbar {
    position: relative;
    z-index: 120;
    display: grid;
    grid-template-columns: 58px minmax(220px, 1fr) minmax(250px, 360px) auto;
    align-items: center;
    gap: 18px;
    max-height: 120px;
    margin-bottom: 28px;
    opacity: 1;
    overflow: visible;
    transform: translateY(0);
    transition:
        max-height .34s cubic-bezier(.22, 1, .36, 1),
        margin-bottom .34s cubic-bezier(.22, 1, .36, 1),
        opacity .2s ease,
        transform .34s cubic-bezier(.22, 1, .36, 1);
}

body.study-focus-mode {
    overflow-x: hidden;
}

body.study-focus-mode .learning-shell {
    grid-template-columns: 0 minmax(0, 1fr);
}

body.study-focus-mode .learning-sidebar {
    width: 0;
    padding-right: 0;
    padding-left: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-36px);
}

body.study-focus-mode .learning-main {
    padding: 14px 20px 26px;
}

body.study-focus-mode .learning-topbar {
    max-height: 0;
    margin-bottom: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-24px);
}

body.study-focus-mode .study-desk-shell {
    min-height: calc(100vh - 40px);
}

.menu-button,
.round-action {
    border: 0;
    cursor: pointer;
}

.menu-button {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 20px;
    color: var(--purple-dark);
    background: #f0ebff;
    font-size: 30px;
}

.welcome-copy h1 {
    font-size: 28px;
    line-height: 1.05;
    font-weight: 900;
}

.welcome-copy p {
    margin: 5px 0 0;
    color: var(--muted);
    font-weight: 800;
}

.level-progress {
    display: grid;
    gap: 8px;
}

.level-progress div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    font-weight: 900;
}

.level-progress span {
    color: #1f18a8;
}

.level-progress-track {
    position: relative;
    display: block;
    width: 100%;
    height: 16px;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(90deg, #e8e3ff, #edf5ff);
    box-shadow: inset 0 0 0 1px rgba(109, 61, 245, .12);
}

.level-progress-track i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    width: max(8px, min(100%, var(--reward-progress, 0%)));
    border-radius: 999px;
    background: linear-gradient(90deg, #6d3df5, #2563eb);
    box-shadow: 0 0 18px rgba(109, 61, 245, .36);
}

.level-progress-track[aria-valuenow="0"] i {
    width: 0;
}

.level-progress small {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.round-action {
    position: relative;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--soft-shadow);
    font-size: 25px;
}

.round-action span {
    position: absolute;
    top: -5px;
    right: -4px;
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: #ff4264;
    font-size: 12px;
    font-weight: 900;
}

.ai-top-menu {
    position: relative;
}

.ai-top-menu summary {
    list-style: none;
}

.ai-top-menu summary::-webkit-details-marker {
    display: none;
}

.round-action.ai {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #5b35f5, #16a3ff);
    cursor: pointer;
}

.round-action.ai i {
    font-size: 24px;
}

.ai-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 145;
    display: grid;
    min-width: 285px;
    border: 1px solid rgba(132, 126, 192, .22);
    border-radius: 20px;
    padding: 10px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 55px rgba(36, 22, 111, .18);
}

.ai-dropdown header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 12px;
}

.ai-dropdown header strong {
    color: var(--ink);
    font-size: 17px;
    font-weight: 900;
}

.ai-dropdown header small {
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
}

.ai-dropdown > div {
    display: grid;
    gap: 6px;
}

.ai-dropdown a {
    display: flex;
    align-items: center;
    gap: 11px;
    border-radius: 14px;
    padding: 12px;
    color: var(--ink);
    font-weight: 900;
    text-decoration: none;
}

.ai-dropdown a span {
    flex: 1 1 auto;
}

.ai-dropdown a em {
    display: grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    padding: 0 8px;
    color: #fff;
    background: #ff4264;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.ai-dropdown a i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 12px;
    color: #315efb;
    background: #e9efff;
}

.ai-dropdown a:hover,
.ai-dropdown a:focus-visible {
    color: var(--primary);
    background: #eef3ff;
}

.message-menu {
    position: relative;
}

.message-menu summary {
    list-style: none;
}

.message-menu summary::-webkit-details-marker {
    display: none;
}

.message-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 140;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(390px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 120px));
    border: 1px solid rgba(132, 126, 192, .22);
    border-radius: 22px;
    padding: 10px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 55px rgba(36, 22, 111, .18);
}

.message-dropdown header,
.message-dropdown footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
}

.message-dropdown header strong {
    font-size: 17px;
    font-weight: 900;
}

.message-dropdown header small {
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
}

.message-dropdown-list {
    display: grid;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}

.message-dropdown-list p {
    margin: 0;
    border-radius: 14px;
    padding: 18px 12px;
    color: var(--muted);
    background: #f7f9ff;
    font-weight: 800;
}

.message-dropdown-list a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(132, 126, 192, .16);
    border-radius: 16px;
    padding: 11px;
    color: var(--ink);
    background: #f8fbff;
    text-decoration: none;
}

.message-dropdown-list a.unread {
    border-color: rgba(79, 70, 229, .28);
    background: #eef3ff;
}

.message-dropdown-list a > i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 12px;
    color: var(--primary);
    background: #e9efff;
}

.message-dropdown-list span,
.message-dropdown-list strong,
.message-dropdown-list em {
    min-width: 0;
}

.message-dropdown-list strong,
.message-dropdown-list em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-dropdown-list strong {
    font-size: 14px;
    font-weight: 900;
}

.message-dropdown-list em {
    margin-top: 3px;
    color: #657491;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.message-dropdown-list small {
    color: #657491;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.message-dropdown footer {
    border-top: 1px solid rgba(132, 126, 192, .16);
    margin-top: 10px;
    padding: 12px 0 0;
}

.message-dropdown footer .message-all-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border-radius: 14px;
    padding: 13px 14px;
    color: #fff;
    background: linear-gradient(135deg, #365df6, #6d3df5);
    box-shadow: 0 14px 28px rgba(54, 93, 246, .22);
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

.message-dropdown footer .message-all-link:hover,
.message-dropdown footer .message-all-link:focus-visible {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.profile-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
    cursor: pointer;
    user-select: none;
}

.profile-menu {
    position: relative;
}

.profile-menu summary {
    list-style: none;
}

.profile-menu summary::-webkit-details-marker {
    display: none;
}

.profile-chip > i {
    margin-left: 2px;
    color: var(--muted);
    font-size: 14px;
    transition: transform .2s ease;
}

.profile-menu[open] .profile-chip > i {
    transform: rotate(180deg);
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 140;
    display: grid;
    min-width: 220px;
    border: 1px solid rgba(132, 126, 192, .22);
    border-radius: 18px;
    padding: 8px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 55px rgba(36, 22, 111, .18);
}

.profile-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    padding: 12px 14px;
    color: var(--ink);
    font-weight: 900;
    text-decoration: none;
}

.profile-dropdown a:hover,
.profile-dropdown a:focus-visible {
    background: #eef3ff;
    color: var(--primary);
}

.profile-dropdown a:last-child {
    color: #ef4444;
}

.profile-dropdown a:last-child:hover,
.profile-dropdown a:last-child:focus-visible {
    background: #fff1f2;
}

.profile-avatar {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #60a5fa, #f59e0b);
    font-size: 30px;
}

.profile-chip strong,
.profile-chip small {
    display: block;
}

.profile-chip strong {
    font-weight: 900;
}

.profile-chip small {
    color: var(--muted);
    font-weight: 800;
}

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

.metric-card {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 142px;
    border: 1px solid rgba(132, 126, 192, .18);
    border-radius: var(--radius-lg);
    padding: 22px;
    background: var(--surface);
    box-shadow: var(--soft-shadow);
}

.metric-card.violet { background: linear-gradient(135deg, #f2ebff, #fff); }
.metric-card.green { background: linear-gradient(135deg, #e9fbf4, #fff); }
.metric-card.amber { background: linear-gradient(135deg, #fff4dc, #fff); }
.metric-card.blue { background: linear-gradient(135deg, #e8f4ff, #fff); }
.metric-card.pink { background: linear-gradient(135deg, #ffeaf4, #fff); }

.metric-icon {
    display: grid;
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .74);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), 0 14px 24px rgba(38, 32, 92, .10);
    font-size: 38px;
}

.metric-card strong {
    display: block;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
}

.metric-card p {
    margin: 8px 0 7px;
    font-weight: 900;
}

.metric-card small {
    color: #079455;
    font-weight: 900;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .9fr);
    gap: 20px;
}

.panel-card {
    border: 1px solid rgba(122, 116, 176, .18);
    border-radius: var(--radius-xl);
    padding: 24px;
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--soft-shadow);
}

.rewards-page {
    display: grid;
    gap: 18px;
}

.messages-page {
    display: grid;
    gap: 18px;
}

.messages-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    border-radius: 28px;
    padding: 34px;
    color: #fff;
    background: linear-gradient(135deg, #3b1a96, #2563eb);
    box-shadow: 0 22px 55px rgba(43, 31, 130, .2);
}

.messages-hero.compact {
    padding: 28px 34px;
}

.messages-hero span,
.messages-panel-head span {
    color: #7b61ff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.messages-hero span {
    color: #dcd7ff;
}

.messages-hero h2 {
    margin: 8px 0;
    font-size: 36px;
    line-height: 1;
    font-weight: 900;
}

.messages-hero p {
    margin: 0;
    max-width: 640px;
    color: rgba(255, 255, 255, .84);
    font-weight: 900;
}

.messages-hero > strong {
    display: grid;
    min-width: 120px;
    min-height: 90px;
    place-items: center;
    border-radius: 22px;
    color: #172554;
    background: rgba(255, 255, 255, .82);
    font-size: 34px;
}

.messages-hero > strong small {
    color: #62729c;
    font-size: 12px;
    text-transform: uppercase;
}

.messages-hero > a {
    border-radius: 16px;
    padding: 13px 18px;
    color: var(--primary);
    background: #fff;
    font-weight: 900;
    text-decoration: none;
}

.messages-panel {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.messages-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.messages-panel-head h3 {
    margin: 6px 0 0;
    font-size: 26px;
}

.messages-panel-head small {
    color: var(--muted);
    font-weight: 900;
}

.messages-list {
    display: grid;
    gap: 12px;
}

.message-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(132, 126, 192, .2);
    border-radius: 18px;
    padding: 16px;
    color: var(--ink);
    background: #f8fbff;
    text-decoration: none;
}

.message-row.unread {
    border-color: rgba(79, 70, 229, .35);
    background: #eef3ff;
}

.message-row-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 16px;
    color: var(--primary);
    background: #e8efff;
}

.message-row strong,
.message-row em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-row strong {
    font-size: 16px;
    font-weight: 900;
}

.message-row em {
    margin-top: 4px;
    color: #657491;
    font-style: normal;
    font-weight: 800;
}

.message-row small {
    color: #657491;
    font-weight: 900;
    white-space: nowrap;
}

.message-detail-card {
    display: grid;
    gap: 18px;
    padding: 24px;
}

.message-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.message-detail-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 9px 12px;
    color: #24335b;
    background: #edf3ff;
    font-weight: 900;
}

.message-detail-body {
    min-height: 180px;
    border: 1px solid rgba(132, 126, 192, .18);
    border-radius: 18px;
    padding: 20px;
    color: #172554;
    background: #f8fbff;
    font-size: 17px;
    line-height: 1.65;
    font-weight: 800;
}

.message-action-link {
    justify-self: start;
    border-radius: 14px;
    padding: 12px 16px;
    color: #fff;
    background: var(--primary);
    font-weight: 900;
    text-decoration: none;
}

.rewards-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 180px;
    border-radius: 26px;
    padding: clamp(24px, 4vw, 42px);
    color: #fff;
    background: linear-gradient(135deg, #34138f 0%, #7c3aed 48%, #2f80ff 100%);
    box-shadow: 0 26px 60px rgba(70, 49, 190, .22);
}

.rewards-hero span,
.rewards-level-card span,
.rewards-stat-card span {
    color: #7357ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rewards-hero span {
    color: rgba(255, 255, 255, .82);
}

.rewards-hero h2 {
    margin: 8px 0;
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1;
}

.rewards-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, .86);
    font-size: 18px;
    font-weight: 900;
}

.rewards-hero-score {
    display: grid;
    min-width: 170px;
    place-items: center;
    border-radius: 26px;
    padding: 24px;
    color: #150c5c;
    background: rgba(255, 255, 255, .78);
}

.rewards-hero-score strong {
    font-size: 42px;
    line-height: 1;
}

.rewards-hero-score small {
    color: #7357ff;
    font-weight: 900;
}

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

.rewards-grid {
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
}

.rewards-level-card,
.rewards-stat-card {
    display: grid;
    gap: 12px;
    border: 1px solid #d8e1ef;
    border-radius: 22px;
    padding: 22px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .06);
}

.rewards-level-card strong,
.rewards-stat-card strong {
    color: #06102b;
    font-size: 34px;
}

.rewards-level-card small,
.rewards-stat-card small {
    color: #60708b;
    font-weight: 900;
}

.rewards-progress {
    height: 12px;
    border-radius: 999px;
    background: #e9e4fb;
    overflow: hidden;
}

.rewards-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7c3aed, #2f80ff);
}

.rewards-source-list,
.rewards-log-list {
    display: grid;
    gap: 12px;
}

.rewards-source-list div,
.rewards-log-row {
    display: grid;
    gap: 4px;
    border: 1px solid #dbe5f4;
    border-radius: 18px;
    padding: 16px;
    background: #f8fbff;
}

.rewards-source-list div {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.rewards-source-list span,
.rewards-log-row strong {
    color: #11182d;
    font-weight: 900;
}

.rewards-source-list strong,
.rewards-log-row b {
    color: #2563eb;
    font-size: 18px;
    font-weight: 900;
}

.rewards-source-list small,
.rewards-log-row small {
    color: #60708b;
    font-weight: 800;
}

.rewards-log-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.profile-page {
    display: grid;
    gap: 18px;
}

.profile-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 18px;
    align-items: center;
    border-radius: 22px;
    padding: 28px;
    color: #fff;
    background: linear-gradient(135deg, #3b18a4, #6d3df5 48%, #2878ff);
    box-shadow: 0 22px 48px rgba(61, 56, 171, .2);
}

.profile-hero-card span,
.profile-section-head span {
    color: #7357ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.profile-hero-card > div > span {
    color: rgba(255, 255, 255, .76);
}

.profile-hero-card h2 {
    margin: 8px 0;
    font-size: 38px;
    font-weight: 900;
}

.profile-hero-card p {
    max-width: 720px;
    color: rgba(255, 255, 255, .84);
    font-weight: 800;
}

.profile-hero-card aside {
    display: grid;
    gap: 8px;
    border-radius: 20px;
    padding: 20px;
    color: #071533;
    background: rgba(255, 255, 255, .9);
}

.profile-hero-card aside strong {
    font-size: 36px;
    font-weight: 900;
}

.profile-hero-card aside i {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6d3df5 var(--profile-progress, 0%), #e8e7f7 0);
}

.profile-hero-card aside small {
    color: #60708b;
    font-weight: 800;
}

.profile-alert,
.profile-security-alert,
.profile-workspace-card,
.profile-section-card {
    border: 1px solid #d8e1ef;
    border-radius: 22px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .06);
}

.profile-alert {
    padding: 14px 18px;
    font-weight: 900;
}

.profile-alert.success {
    color: #087443;
    background: #e9fbf4;
}

.profile-alert.danger,
.profile-password-result.error {
    color: #b42318;
    background: #fff1f0;
}

.profile-security-alert {
    display: grid;
    gap: 4px;
    padding: 16px 18px;
    text-align: left;
    color: #8a2a0a;
    background: #fff7ed;
}

.profile-security-alert strong {
    color: #9a3412;
}

.profile-workspace-card {
    display: grid;
    gap: 20px;
    padding: 20px;
}

.profile-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border: 1px solid #dbe6f7;
    border-radius: 18px;
    padding: 8px;
    background: #f7faff;
}

.profile-tabs button {
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 0 18px;
    color: #30405f;
    background: transparent;
    font-weight: 900;
    cursor: pointer;
}

.profile-tabs button:hover,
.profile-tabs button:focus-visible,
.profile-tabs button.active {
    border-color: #bcd0ff;
    color: #06102b;
    background: #e8f0ff;
    box-shadow: 0 10px 24px rgba(50, 104, 246, .12);
}

.profile-content {
    display: grid;
    gap: 16px;
}

.profile-section-card {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.profile-section-card[hidden] {
    display: none;
}

.profile-section-head h3 {
    margin-top: 6px;
    color: #06102b;
    font-size: 24px;
    font-weight: 900;
}

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

.profile-status-grid-compact {
    max-width: 760px;
}

.profile-form-grid label {
    display: grid;
    gap: 8px;
}

.profile-form-grid label > span,
.profile-field > span,
.profile-check-field > span {
    color: #60708b;
    font-weight: 900;
}

.profile-form-grid input,
.profile-form-grid select,
.profile-form-grid textarea,
.profile-field input,
.profile-field select,
.profile-field textarea,
.day-card input,
.lesson-level-row select {
    width: 100%;
    min-height: 48px;
    border: 1px solid #d7e1ef;
    border-radius: 14px;
    padding: 0 14px;
    color: #071533;
    background: #fff;
    font-weight: 800;
}

.profile-form-grid textarea,
.profile-field textarea {
    padding-block: 12px;
    resize: vertical;
}

.profile-field,
.profile-check-field {
    display: grid;
    gap: 8px;
}

.profile-check-field {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-height: 48px;
    border: 1px solid #d7e1ef;
    border-radius: 14px;
    padding: 0 14px;
    background: #f8fbff;
}

.profile-check-field input {
    width: 16px;
    height: 16px;
}

.span-2 {
    grid-column: 1 / -1;
}

.profile-form-grid input:disabled {
    color: #60708b;
    background: #f4f7fb;
}

.profile-form-grid small,
.security-action-card small,
.password-rules-card span {
    color: #60708b;
    font-weight: 800;
}

.profile-actions {
    display: flex;
    justify-content: flex-end;
}

.primary-action,
.secondary-action {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 0 18px;
    font-weight: 900;
}

.primary-action {
    color: #fff;
    background: #3268f6;
}

.secondary-action {
    color: #30405f;
    background: #fff;
    border-color: #d7e1ef;
}

.security-action-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid #d7e1ef;
    border-radius: 18px;
    padding: 18px;
    background: #f8fbff;
}

.security-action-card div {
    display: grid;
    gap: 4px;
}

.security-action-card strong {
    color: #06102b;
    font-size: 18px;
}

.password-rules-card {
    display: grid;
    gap: 6px;
    border: 1px dashed #b9c8e5;
    border-radius: 16px;
    padding: 16px;
    background: #fbfdff;
}

.password-rules-card strong {
    color: #06102b;
}

.password-rules-card.compact {
    padding: 12px;
}

.profile-status-grid article {
    display: grid;
    gap: 8px;
    border: 1px solid #d7e1ef;
    border-radius: 16px;
    padding: 16px;
    background: #f8fbff;
}

.profile-status-grid span {
    color: #60708b;
    font-size: 12px;
    font-weight: 900;
}

.profile-status-grid strong {
    color: #06102b;
    font-size: 20px;
}

.profile-status-grid small {
    color: #60708b;
    font-weight: 800;
    line-height: 1.45;
}

.profile-showcase-grid {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 18px;
}

.profile-preview-card {
    overflow: hidden;
    border: 1px solid #d7e1ef;
    border-radius: 20px;
    background: #fff;
}

.profile-cover-strip {
    height: 92px;
    background: linear-gradient(135deg, #371197, #236df7);
}

.profile-preview-body {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 0 18px 22px;
    text-align: center;
}

.profile-preview-body img {
    width: 88px;
    height: 88px;
    margin-top: -44px;
    border: 5px solid #fff;
    border-radius: 28px;
    object-fit: cover;
    background: #eef4ff;
}

.profile-preview-body strong {
    color: #06102b;
    font-size: 20px;
    font-weight: 900;
}

.profile-preview-body span {
    color: #60708b;
    font-weight: 800;
}

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

.weekly-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(140px, 1fr));
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.day-card {
    display: grid;
    gap: 10px;
    border: 1px solid #d7e1ef;
    border-radius: 16px;
    padding: 14px;
    background: #f8fbff;
}

.day-card strong {
    color: #06102b;
    font-weight: 900;
}

.day-card label {
    display: grid;
    gap: 6px;
}

.day-card span {
    color: #60708b;
    font-size: 12px;
    font-weight: 900;
}

.lesson-level-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.lesson-level-row {
    display: grid;
    gap: 8px;
    border: 1px solid #d7e1ef;
    border-radius: 16px;
    padding: 12px;
    background: #f8fbff;
}

.lesson-level-row span {
    color: #06102b;
    font-weight: 900;
}

.account-close-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #fecaca;
    border-radius: 18px;
    padding: 18px;
    color: #7f1d1d;
    background: #fff7f7;
}

.account-close-card div {
    display: grid;
    gap: 4px;
}

.account-close-card strong {
    color: #991b1b;
    font-size: 18px;
}

.account-close-card span {
    color: #9f3a3a;
    font-weight: 800;
}

.danger-action {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #ef4444;
    border-radius: 14px;
    padding: 0 18px;
    color: #fff;
    background: #ef4444;
    font-weight: 900;
}

.closure-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
}

.profile-password-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(15, 23, 42, .58);
}

.profile-password-modal[hidden] {
    display: none;
}

.profile-password-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(560px, 100%);
    max-height: min(720px, calc(100vh - 48px));
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .28);
}

.profile-password-dialog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #d8e1ef;
    padding: 22px 24px;
}

.profile-password-dialog header span {
    color: #7357ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.profile-password-dialog header h3 {
    margin-top: 6px;
    color: #06102b;
    font-size: 26px;
    font-weight: 900;
}

.profile-password-dialog header button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #d7e1ef;
    border-radius: 50%;
    color: #30405f;
    background: #fff;
    font-size: 20px;
}

.profile-password-dialog form {
    display: grid;
    gap: 14px;
    overflow-y: auto;
    padding: 22px 24px 24px;
}

.profile-password-dialog label {
    display: grid;
    gap: 8px;
}

.profile-password-dialog label span {
    color: #60708b;
    font-weight: 900;
}

.profile-password-dialog input {
    min-height: 48px;
    border: 1px solid #d7e1ef;
    border-radius: 14px;
    padding: 0 14px;
    color: #071533;
    font-weight: 800;
}

.profile-password-result {
    border-radius: 14px;
    padding: 12px 14px;
    color: #30405f;
    background: #f4f7fb;
    font-weight: 900;
}

.profile-password-result.success {
    color: #087443;
    background: #e9fbf4;
}

.profile-password-dialog footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.rewards-log-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 16px;
    color: #2563eb;
    background: #eaf2ff;
    font-size: 22px;
    font-weight: 900;
}

.reward-toast {
    border-radius: 18px !important;
    color: #102047 !important;
    box-shadow: 0 18px 45px rgba(38, 99, 235, .2) !important;
}

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

.card-head h2,
.quick-card h2 {
    font-size: 22px;
    font-weight: 900;
}

.card-head button,
.card-head a {
    border: 1px solid #e8e7f7;
    border-radius: 16px;
    padding: 10px 16px;
    color: var(--ink);
    background: #fff;
    font-weight: 900;
}

.card-head a {
    border: 0;
    color: var(--purple);
}

.chart-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    align-items: center;
    gap: 18px;
}

.chart-wrap svg {
    width: 100%;
    height: auto;
}

.grid-lines line {
    stroke: #e7eaf6;
    stroke-width: 2;
}

.chart-days text {
    fill: #617095;
    font-size: 17px;
    font-weight: 800;
}

.success-ring {
    display: grid;
    justify-items: center;
    gap: 8px;
}

.success-ring div {
    display: grid;
    width: 92px;
    height: 92px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle, #fff 0 50%, transparent 52%),
        conic-gradient(#7446f7 var(--ring-percent, 0%), #ede8ff 0);
    font-size: 24px;
    font-weight: 900;
    color: #071533;
}

.success-ring strong {
    text-align: center;
    font-weight: 900;
}

.success-ring span {
    color: #079455;
    font-weight: 900;
}

.announcement-card {
    background: linear-gradient(135deg, #fff6df, #fff);
}

.announcement-list {
    display: grid;
    gap: 12px;
}

.announcement-list a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border-radius: 17px;
    padding: 16px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 12px 26px rgba(185, 123, 33, .08);
}

.announcement-list span {
    display: grid;
    min-width: 50px;
    height: 38px;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #ffc247, #ff8a00);
    font-weight: 900;
}

.announcement-list span.purple {
    background: linear-gradient(135deg, #8b5cf6, #6d3df5);
}

.announcement-list span.green {
    background: linear-gradient(135deg, #22c55e, #0ea85b);
}

.announcement-list strong,
.announcement-list small {
    grid-column: 2;
}

.announcement-list small {
    color: var(--muted);
    font-weight: 800;
}

.announcement-list i {
    grid-column: 3;
    grid-row: 1 / span 2;
    color: #ff8a00;
}

.leaderboard-card {
    grid-column: 1;
}

.leaderboard-card table {
    width: 100%;
    border-collapse: collapse;
}

.leaderboard-card th,
.leaderboard-card td {
    border-bottom: 1px solid #edf0f8;
    padding: 13px 8px;
    text-align: left;
    font-weight: 800;
}

.leaderboard-card th {
    color: #62709a;
    font-size: 14px;
}

.leaderboard-card mark {
    border-radius: 12px;
    padding: 5px 11px;
    color: #087443;
    background: #d9fbee;
    font-weight: 900;
}

.topic-table-link {
    color: var(--ink);
    font-weight: 900;
    text-decoration: none;
}

.topic-table-link:hover {
    color: var(--primary);
}

.table-icon-link {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #d8e3ff;
    border-radius: 11px;
    color: var(--primary);
    background: #f7faff;
    text-decoration: none;
}

.table-icon-link:hover {
    border-color: #9bb7ff;
    background: #eef4ff;
}

.student-avatar {
    margin-right: 9px;
}

.dashboard-calendar-card {
    grid-column: 1;
}

.dashboard-study-card {
    grid-column: 1;
}

.dashboard-calendar-list {
    display: grid;
    gap: 10px;
}

.dashboard-calendar-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 14px;
    border: 1px solid #e4e9f7;
    border-radius: 16px;
    padding: 12px 14px;
    color: var(--ink);
    background: #fbfcff;
    box-shadow: 0 12px 24px rgba(47, 64, 120, .05);
}

.dashboard-calendar-row:hover {
    border-color: #cbd8ff;
    background: #f7f9ff;
}

.dashboard-calendar-row time {
    display: grid;
    gap: 3px;
    border-radius: 14px;
    padding: 10px 8px;
    text-align: center;
    color: #25468f;
    background: #eef4ff;
    font-weight: 900;
}

.dashboard-calendar-row time strong {
    font-size: 18px;
    line-height: 1;
}

.dashboard-calendar-row time span {
    font-size: 12px;
    color: #5d6f9b;
}

.dashboard-calendar-row > span {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.dashboard-calendar-row > span strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 900;
}

.dashboard-calendar-row > span small {
    color: #637198;
    font-weight: 900;
}

.dashboard-calendar-row i {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #d8e2ff;
    border-radius: 12px;
    color: #2f66ff;
    background: #fff;
    font-size: 17px;
}

.dashboard-study-row time {
    color: #135e42;
    background: #eafbf4;
}

.dashboard-study-row i {
    border-color: #c9f4df;
    color: #079455;
}

.quick-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f4efff, #ffffff);
}

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

.quick-grid a {
    display: grid;
    min-height: 116px;
    place-items: center;
    border: 1px solid #edeafd;
    border-radius: 18px;
    padding: 12px;
    text-align: center;
    background: #fff;
    box-shadow: 0 10px 22px rgba(80, 65, 151, .08);
    font-size: 14px;
    font-weight: 900;
}

.quick-grid i {
    color: var(--purple);
    font-size: 34px;
}

.coach-bubble {
    position: absolute;
    right: 24px;
    bottom: 18px;
    display: grid;
    width: 150px;
    gap: 2px;
    border-radius: 999px 999px 20px 999px;
    padding: 18px 20px;
    color: var(--purple);
    background: #fff;
    box-shadow: var(--soft-shadow);
    font-weight: 900;
}

.coach-bubble span {
    font-size: 14px;
}

.coach-bubble em {
    position: absolute;
    right: -18px;
    bottom: -66px;
    font-size: 96px;
    font-style: normal;
}

.coming-soon {
    min-height: 420px;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
}

.coming-soon > span {
    font-size: 80px;
}

.coming-soon h2 {
    margin: 5px 0 8px;
    font-size: 38px;
}

.coming-soon p:last-child {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    font-weight: 800;
}

.reports-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.reports-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 190px;
    padding: 34px 38px;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(120deg, #32128f 0%, #7344f4 48%, #1687ff 100%);
    box-shadow: 0 18px 45px rgba(49, 18, 143, 0.18);
}

.reports-hero span,
.report-panel-head span,
.report-stat span,
.report-advice span {
    display: block;
    color: #6d4cff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.reports-hero span {
    color: rgba(255, 255, 255, 0.82);
}

.reports-hero h2 {
    margin: 10px 0 8px;
    font-size: 42px;
    line-height: 1;
}

.reports-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    font-weight: 800;
}

.reports-hero aside {
    min-width: 156px;
    padding: 22px;
    border-radius: 22px;
    text-align: center;
    color: #121a32;
    background: rgba(255, 255, 255, 0.82);
}

.reports-hero aside strong {
    display: block;
    font-size: 36px;
    line-height: 1;
}

.reports-hero aside span {
    margin-top: 8px;
    color: #8a94ad;
}

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

.reports-tabs {
    position: sticky;
    top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid #d8e4f6;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 40px rgba(29, 43, 86, 0.06);
}

.reports-tabs button {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    width: 100%;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    color: #60708e;
    background: #f4f7fc;
    font: inherit;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.reports-tabs button i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    color: #315efb;
    background: #e9efff;
}

.reports-tabs button.active {
    color: #07132d;
    background: #e8efff;
}

.reports-tabs button.active i {
    color: #fff;
    background: #315efb;
}

.reports-tabs button:hover {
    transform: translateX(2px);
}

.reports-content {
    min-width: 0;
}

.report-loading {
    display: grid;
    place-items: center;
    min-height: 260px;
    padding: 32px;
    border: 1px dashed #bfd2f4;
    border-radius: 20px;
    color: #61708d;
    background: rgba(255, 255, 255, 0.82);
    text-align: center;
}

.report-loading i {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    border-radius: 16px;
    color: #315efb;
    background: #e9efff;
    animation: report-spin 900ms linear infinite;
}

.report-loading strong {
    color: #07132d;
    font-size: 18px;
}

.report-loading span {
    margin-top: 6px;
    font-weight: 800;
}

@keyframes report-spin {
    to {
        transform: rotate(360deg);
    }
}

.report-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.report-stat,
.report-advice,
.report-table-card {
    border: 1px solid #d8e4f6;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 42px rgba(27, 43, 82, 0.06);
}

.report-stat {
    min-height: 142px;
    padding: 22px;
}

.report-stat strong {
    display: block;
    margin: 22px 0 10px;
    color: #07132d;
    font-size: 34px;
    line-height: 1;
}

.report-stat small,
.report-panel-head p,
.report-table-card td small,
.report-exam-list small {
    color: #61708d;
    font-size: 13px;
    font-weight: 800;
}

.report-advice {
    padding: 22px;
}

.report-advice p {
    margin: 10px 0 0;
    color: #16213a;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.55;
}

.report-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 24px 12px;
}

.report-panel-head h3 {
    margin: 8px 0 6px;
    color: #07132d;
    font-size: 26px;
}

.report-panel-head p {
    margin: 0;
    max-width: 780px;
}

.report-panel-head > a,
.report-session-list a,
.report-exam-list a,
.table-icon-link {
    text-decoration: none;
}

.report-panel-head > a {
    flex: 0 0 auto;
    padding: 12px 16px;
    border: 1px solid #cfe0ff;
    border-radius: 13px;
    color: #315efb;
    background: #f7faff;
    font-weight: 900;
}

.report-table-card {
    overflow: hidden;
}

.report-table-card table {
    width: 100%;
    border-collapse: collapse;
}

.report-table-card th,
.report-table-card td {
    padding: 16px 20px;
    border-top: 1px solid #e4ebf7;
    color: #07132d;
    font-weight: 900;
    text-align: left;
    vertical-align: middle;
}

.report-table-card th {
    color: #64728d;
    background: #f7faff;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.topic-table-link {
    display: block;
    max-width: 520px;
    color: #07132d;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.report-table-card td small {
    display: block;
    margin-top: 4px;
}

.report-table-card mark {
    display: inline-flex;
    min-width: 58px;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    color: #007a3d;
    background: #d9f9e8;
    font-weight: 900;
}

.report-table-card mark.warning {
    color: #a34100;
    background: #fff0d9;
}

.table-icon-link {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid #cfe0ff;
    border-radius: 12px;
    color: #315efb;
    background: #fff;
}

.report-session-list,
.report-exam-list {
    display: grid;
    gap: 12px;
    padding: 0 24px 24px;
}

.report-session-list a,
.report-exam-list a {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid #d8e4f6;
    border-radius: 16px;
    color: #07132d;
    background: #f8fbff;
}

.report-exam-list a {
    grid-template-columns: minmax(0, 1fr) 110px 1fr;
}

.report-session-list time,
.report-session-list span,
.report-exam-list span {
    color: #315efb;
    font-weight: 900;
}

.report-session-list strong,
.report-exam-list strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dersgen-ai-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dersgen-ai-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 190px;
    padding: 34px 38px;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(120deg, #25106f 0%, #7044f5 48%, #10a8ff 100%);
    box-shadow: 0 18px 45px rgba(49, 18, 143, 0.18);
}

.dersgen-ai-hero span,
.dersgen-ai-panel header span {
    display: block;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.dersgen-ai-hero h2 {
    margin: 10px 0 8px;
    font-size: 42px;
    line-height: 1;
}

.dersgen-ai-hero p {
    max-width: 780px;
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    font-weight: 800;
}

.dersgen-ai-hero aside {
    min-width: 180px;
    padding: 20px;
    border-radius: 22px;
    text-align: center;
    color: #121a32;
    background: rgba(255, 255, 255, 0.84);
}

.dersgen-ai-hero aside strong {
    display: block;
    font-size: 20px;
}

.dersgen-ai-hero aside span {
    margin-top: 6px;
    color: #8a94ad;
}

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

.dersgen-ai-tabs {
    position: sticky;
    top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid #d8e4f6;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 40px rgba(29, 43, 86, 0.06);
}

.dersgen-ai-tabs button {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    width: 100%;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    color: #60708e;
    background: #f4f7fc;
    font: inherit;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.dersgen-ai-tabs button i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 11px;
    color: #315efb;
    background: #e9efff;
}

.dersgen-ai-tabs button span {
    flex: 1 1 auto;
    min-width: 0;
}

.dersgen-ai-tabs button em {
    display: grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    padding: 0 8px;
    color: #fff;
    background: #ff4264;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.dersgen-ai-tabs button.active {
    color: #07132d;
    background: #e8efff;
}

.dersgen-ai-tabs button.active i {
    color: #fff;
    background: #315efb;
}

.dersgen-ai-tabs button.active em {
    color: #315efb;
    background: #fff;
}

.dersgen-ai-panel {
    min-width: 0;
    border: 1px solid #d8e4f6;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 42px rgba(27, 43, 82, 0.06);
    overflow: hidden;
}

.dersgen-ai-panel header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    border-bottom: 1px solid #e4ebf7;
}

.dersgen-ai-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.dersgen-ai-actions[hidden] {
    display: none !important;
}

.dersgen-ai-panel header span {
    color: #6d4cff;
}

.dersgen-ai-panel h3 {
    margin: 8px 0 6px;
    color: #07132d;
    font-size: 28px;
}

.dersgen-ai-panel p {
    max-width: 820px;
    margin: 0;
    color: #61708d;
    font-weight: 800;
}

.dersgen-ai-panel textarea {
    display: block;
    width: 100%;
    min-height: 620px;
    padding: 24px;
    border: 0;
    outline: 0;
    resize: vertical;
    color: #101a31;
    background: #fbfdff;
    font: 800 14px/1.65 Consolas, "Courier New", monospace;
    white-space: pre;
}

.dersgen-ai-panel textarea[hidden] {
    display: none !important;
}

.dersgen-ai-history {
    margin: 0;
    padding: 22px 24px 24px;
    border-top: 1px solid #e4ebf7;
    background: #fff;
}

@media (max-width: 980px) {
    .dersgen-ai-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 28px;
    }

    .dersgen-ai-shell {
        grid-template-columns: 1fr;
    }

    .dersgen-ai-tabs {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dersgen-ai-hero h2 {
        font-size: 34px;
    }

    .dersgen-ai-tabs {
        grid-template-columns: 1fr;
    }

    .dersgen-ai-panel header {
        flex-direction: column;
    }
}

@media (max-width: 1180px) {
    .report-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-table-card {
        overflow-x: auto;
    }
}

@media (max-width: 920px) {
    .reports-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 28px;
    }

    .reports-shell {
        grid-template-columns: 1fr;
    }

    .reports-tabs {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reports-tabs button:hover {
        transform: none;
    }

    .report-panel-head,
    .report-session-list a,
    .report-exam-list a {
        grid-template-columns: 1fr;
    }

    .report-session-list strong,
    .report-exam-list strong {
        white-space: normal;
    }
}

@media (max-width: 640px) {
    .reports-hero h2 {
        font-size: 34px;
    }

    .report-grid,
    .reports-tabs {
        grid-template-columns: 1fr;
    }

    .report-panel-head {
        flex-direction: column;
    }
}

.settings-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 18px;
    border-radius: 22px;
    padding: 34px 36px;
    background: linear-gradient(135deg, #34128f 0%, #7c3aed 52%, #1d7df2 100%);
    color: #fff;
    box-shadow: 0 24px 70px rgba(91, 60, 200, .22);
}

.settings-hero span,
.settings-card .section-kicker {
    color: #6c48ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.settings-hero span {
    color: #e8e2ff;
}

.settings-hero h2 {
    margin: 8px 0 8px;
    font-size: 32px;
    line-height: 1.1;
}

.settings-hero p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, .84);
    font-weight: 800;
}

.settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 720px);
    gap: 18px;
}

.settings-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 22px;
}

.settings-card-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 16px;
    background: #fff1f2;
    color: #e11d48;
    font-size: 24px;
}

.settings-card h3 {
    margin: 5px 0 8px;
    color: #11182d;
    font-size: 22px;
}

.settings-card p {
    margin: 0;
    color: #53617f;
    font-weight: 800;
    line-height: 1.55;
}

.settings-result {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.settings-result[hidden] {
    display: none;
}

.settings-result div {
    border: 1px solid #e2e8f6;
    border-radius: 14px;
    padding: 12px;
    background: #f8fbff;
}

.settings-result dt {
    color: #63708e;
    font-size: 12px;
    font-weight: 900;
}

.settings-result dd {
    margin: 5px 0 0;
    color: #0f1b34;
    font-size: 18px;
    font-weight: 900;
}

.settings-danger-action {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    border: 0;
    border-radius: 14px;
    padding: 13px 18px;
    background: #ef4444;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(239, 68, 68, .22);
}

.settings-danger-action:hover {
    background: #dc2626;
}

.settings-danger-action:disabled {
    cursor: wait;
    opacity: .72;
}

.settings-danger-action.is-loading i {
    animation: settings-spin .85s linear infinite;
}

@keyframes settings-spin {
    to {
        transform: rotate(360deg);
    }
}

.lessons-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
    align-items: end;
    gap: 20px;
    border: 1px solid rgba(122, 116, 176, .18);
    border-radius: 34px;
    margin-bottom: 18px;
    padding: 30px;
    color: #fff;
    background:
        radial-gradient(circle at 87% 18%, rgba(255, 255, 255, .18), transparent 24%),
        linear-gradient(135deg, #6d3df5 0%, #2346c7 54%, #17206d 100%);
    box-shadow: var(--shadow);
}

.lessons-hero .section-kicker {
    color: #ffe08a;
}

.lessons-hero h2 {
    margin: 0 0 8px;
    font-size: 42px;
    font-weight: 900;
}

.lessons-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 18px;
    font-weight: 800;
}

.lessons-hero aside {
    display: grid;
    gap: 5px;
    border-radius: 24px;
    padding: 20px;
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.lessons-hero aside strong {
    font-size: 22px;
    font-weight: 900;
}

.lessons-hero aside span {
    color: rgba(255, 255, 255, .78);
    font-weight: 800;
}

.lesson-home,
.lesson-notes-page {
    display: grid;
    gap: 18px;
}

.lesson-home-hero,
.lesson-notes-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(122, 116, 176, .18);
    border-radius: 30px;
    padding: 28px;
    background: linear-gradient(135deg, rgba(109, 61, 245, .14), rgba(30, 144, 255, .12));
    box-shadow: var(--shadow);
}

.lesson-home-hero {
    display: block;
}

.lesson-home-hero h2,
.lesson-notes-head h2 {
    margin: 0 0 8px;
    color: #0f1b34;
    font-size: 34px;
    font-weight: 900;
}

.lesson-home-hero p,
.lesson-notes-head p {
    max-width: 720px;
    margin: 0;
    color: #5b6785;
    font-weight: 800;
    line-height: 1.55;
}

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

.lesson-home-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 270px;
    border: 1px solid #dbe6fb;
    border-radius: 24px;
    padding: 24px;
    background: #fff;
    color: #0f1b34;
    text-decoration: none;
    box-shadow: var(--shadow);
}

.lesson-home-card:hover {
    border-color: rgba(47, 100, 255, .42);
    transform: translateY(-2px);
}

.lesson-home-card > span {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 16px;
    background: #eef4ff;
    color: #2f64ff;
    font-size: 24px;
}

.lesson-home-card strong {
    font-size: 24px;
    font-weight: 900;
}

.lesson-home-card small {
    color: #5c6785;
    font-weight: 800;
    line-height: 1.45;
}

.lesson-home-card em {
    width: fit-content;
    border-radius: 999px;
    padding: 8px 12px;
    background: #eef4ff;
    color: #1f4ed8;
    font-style: normal;
    font-weight: 900;
}

.outline-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #cfe0ff;
    border-radius: 16px;
    padding: 12px 16px;
    background: #fff;
    color: #2f64ff;
    font-weight: 900;
    text-decoration: none;
}

.outline-action:hover {
    background: #f1f6ff;
}

.lesson-home-card-primary {
    color: #fff;
    background: linear-gradient(135deg, #6236eb, #1d9bf0);
}

.lesson-home-card-primary > span,
.lesson-home-card-primary em {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.lesson-home-card-primary small {
    color: rgba(255, 255, 255, .82);
}

.lesson-home-lesson-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.lesson-home-lesson-actions a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    padding: 10px 13px;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    text-decoration: none;
    font-weight: 900;
}

.lesson-home-lesson-actions a:hover {
    background: rgba(255, 255, 255, .24);
}

.lesson-home-lesson-actions b,
.lesson-home-lesson-actions small {
    color: inherit;
}

.lesson-home-lesson-actions small {
    opacity: .84;
}

.lesson-home-list {
    display: grid;
    gap: 9px;
}

.lesson-home-list a,
.lesson-note-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #e3ebfb;
    border-radius: 16px;
    padding: 12px 14px;
    background: #f8fbff;
    color: #0f1b34;
    text-decoration: none;
}

.lesson-home-list a:hover,
.lesson-note-row:hover {
    border-color: rgba(47, 100, 255, .4);
    background: #f1f6ff;
}

.lesson-home-list b,
.lesson-note-row strong {
    display: block;
    color: #0f1b34;
    font-weight: 900;
}

.lesson-home-list small,
.lesson-note-row small {
    color: #65718d;
    font-weight: 800;
}

.lesson-home-more {
    align-self: end;
    width: fit-content;
    color: #2f64ff;
    font-weight: 900;
    text-decoration: none;
}

.lesson-notes-list {
    display: grid;
    gap: 12px;
}

.lesson-note-row {
    border-radius: 20px;
    padding: 18px 20px;
    background: #fff;
}

.lesson-note-row span {
    display: grid;
    gap: 6px;
}

.lesson-note-row em {
    color: #33415f;
    font-style: normal;
    font-weight: 700;
}

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

@media (max-width: 720px) {
    .lesson-home-hero,
    .lesson-notes-head {
        align-items: stretch;
        flex-direction: column;
        border-radius: 22px;
        padding: 20px;
    }

    .lesson-home-hero h2,
    .lesson-notes-head h2 {
        font-size: 28px;
    }

    .lesson-home-card {
        min-height: 0;
        border-radius: 20px;
        padding: 18px;
    }

    .lesson-note-row {
        align-items: flex-start;
    }
}

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

.lesson-summary-grid article {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    border: 1px solid rgba(122, 116, 176, .16);
    border-radius: 24px;
    padding: 18px;
    background: rgba(255, 255, 255, .9);
    box-shadow: var(--soft-shadow);
}

.lesson-summary-grid i {
    grid-row: span 2;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #3b82f6);
    font-size: 23px;
}

.lesson-summary-grid strong {
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
}

.lesson-summary-grid span {
    color: var(--muted);
    font-weight: 900;
}

.lessons-panel {
    padding: 0;
    overflow: hidden;
}

.lessons-head {
    margin: 0;
    padding: 24px 26px;
    border-bottom: 1px solid #edf0fa;
    background: linear-gradient(135deg, #ffffff, #f7f5ff);
}

.lesson-tree-tools {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.lesson-tree-tools button {
    border: 1px solid #e4e1fb;
    border-radius: 15px;
    padding: 10px 14px;
    color: var(--purple);
    background: #fff;
    font-weight: 900;
    cursor: pointer;
}

.lesson-tree-view {
    padding: 20px 26px 28px;
    overflow-x: auto;
}

.lesson-tree-list {
    display: grid;
    gap: 10px;
    min-width: 820px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lesson-tree-branch {
    position: relative;
    margin: 10px 0 0 25px;
    padding-left: 24px;
}

.lesson-tree-branch::before {
    content: "";
    position: absolute;
    top: -4px;
    bottom: 8px;
    left: 0;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(109, 61, 245, .28), rgba(59, 130, 246, .06));
}

.lesson-tree-item {
    display: grid;
}

.lesson-tree-item.collapsed > .lesson-tree-branch {
    display: none;
}

.lesson-tree-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid #e9e8f7;
    border-radius: 19px;
    padding: 12px 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(74, 63, 145, .06);
}

.lesson-tree-row:hover {
    border-color: #cfc7ff;
    box-shadow: 0 14px 30px rgba(74, 63, 145, .10);
}

.lesson-tree-row.section {
    background: linear-gradient(135deg, #f5efff, #fff);
}

.lesson-tree-row.lesson {
    background: linear-gradient(135deg, #ecfbff, #fff);
}

.lesson-tree-toggle,
.lesson-tree-toggle-placeholder {
    width: 30px;
    height: 30px;
}

.lesson-tree-toggle {
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 12px;
    color: var(--purple);
    background: #f2edff;
    cursor: pointer;
}

.lesson-tree-toggle i {
    transition: transform .18s ease;
}

.lesson-tree-item.expanded > .lesson-tree-row .lesson-tree-toggle i {
    transform: rotate(90deg);
}

.lesson-tree-node {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.lesson-tree-kind {
    display: inline-grid;
    min-width: 82px;
    place-items: center;
    border-radius: 999px;
    padding: 7px 10px;
    color: #4c1d95;
    background: #efe7ff;
    font-size: 12px;
    font-weight: 900;
}

.lesson-tree-kind.lesson {
    color: #0369a1;
    background: #e0f2fe;
}

.lesson-tree-kind.topic {
    color: #047857;
    background: #dffbee;
}

.lesson-tree-kind.subtopic {
    color: #92400e;
    background: #fff3d7;
}

.lesson-tree-node strong,
.lesson-tree-node small {
    display: block;
}

.lesson-tree-node strong {
    color: var(--ink);
    font-size: 16px;
    font-weight: 900;
}

.lesson-tree-node small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.lesson-tree-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    white-space: nowrap;
}

.lesson-tree-meta > span:not(.lesson-status) {
    border-radius: 999px;
    padding: 7px 10px;
    color: #4f5d7c;
    background: #f4f6fb;
    font-size: 13px;
    font-weight: 900;
}

.lesson-tree-meta b {
    color: var(--ink);
}

.lesson-status {
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 900;
}

.lesson-status.active {
    color: #047857;
    background: #dffbee;
}

.lesson-status.passive {
    color: #64748b;
    background: #eef2f7;
}

.lesson-empty {
    border: 1px dashed #cfc7ff;
    border-radius: 22px;
    padding: 28px;
    color: var(--muted);
    background: #fbfaff;
    font-weight: 800;
}

.lesson-workspace {
    display: grid;
    grid-template-columns: clamp(330px, 24vw, 390px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    min-height: calc(100vh - 132px);
}

.lesson-sidebar {
    position: sticky;
    top: 18px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: calc(100vh - 132px);
    min-height: 620px;
    padding: 0;
    overflow: hidden;
    border-radius: 8px;
}

.lesson-sidebar-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #edf0fa;
    padding: 18px 18px 12px;
    background: #fff;
}

.lesson-sidebar-head strong,
.lesson-sidebar-head span {
    display: block;
}

.lesson-sidebar-head strong {
    font-size: 16px;
    font-weight: 900;
}

.lesson-sidebar-head span {
    max-width: 170px;
    margin-top: 3px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
}

.lesson-sidebar-head em {
    color: var(--purple-dark);
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.lesson-filter {
    display: grid;
    gap: 6px;
    margin-top: 14px;
    max-width: 250px;
}

.lesson-filter span {
    margin: 0;
    color: #677895;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.lesson-filter select {
    width: 100%;
    min-height: 40px;
    border: 1px solid #d8e4f6;
    border-radius: 14px;
    padding: 0 42px 0 16px;
    color: #0b1b3b;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23143b7b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
    box-shadow: 0 8px 22px rgba(43, 71, 124, 0.06);
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    appearance: none;
    cursor: pointer;
}

.lesson-filter select:focus {
    border-color: #6d5dfc;
    box-shadow: 0 0 0 4px rgba(109, 93, 252, 0.14);
    outline: 0;
}

.lesson-sidebar-scroll {
    min-height: 0;
    overflow: auto;
    padding: 14px 14px 18px;
}

.lesson-workspace .lesson-tree-list {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.lesson-workspace .lesson-tree-branch {
    margin: 3px 0 0 8px;
    padding-left: 12px;
}

.lesson-workspace .lesson-tree-branch::before {
    top: 2px;
    bottom: 8px;
    background: #d6e2fb;
}

.lesson-workspace .lesson-tree-row {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 4px;
    border: 0;
    border-radius: 8px;
    padding: 4px 6px;
    background: transparent;
    box-shadow: none;
}

.lesson-workspace .lesson-tree-row:hover,
.lesson-workspace .lesson-tree-row.selected {
    background: #f0f5ff;
    box-shadow: none;
}

.lesson-workspace .lesson-tree-row.selected .lesson-tree-label strong {
    color: #123f91;
}

.lesson-workspace .lesson-tree-toggle,
.lesson-workspace .lesson-tree-toggle-placeholder {
    width: 18px;
    height: 26px;
}

.lesson-workspace .lesson-tree-toggle {
    border-radius: 6px;
    color: #123f91;
    background: transparent;
    font-size: 11px;
}

.lesson-workspace .lesson-tree-toggle:hover {
    background: #e7efff;
}

.lesson-tree-label {
    display: grid;
    gap: 2px;
    width: 100%;
    min-width: 0;
    border: 0;
    padding: 5px 3px;
    color: var(--ink);
    text-align: left;
    background: transparent;
    cursor: pointer;
}

.lesson-tree-label strong {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #0a2558;
    font-size: 13px;
    line-height: 1.22;
    font-weight: 900;
}

.lesson-tree-label small {
    color: #48628e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 800;
}

@media (max-width: 1380px) {
    .lesson-workspace {
        grid-template-columns: clamp(315px, 27vw, 360px) minmax(0, 1fr);
    }
}

.lesson-detail-area {
    min-width: 0;
}

.lesson-detail-pane {
    display: none;
}

.lesson-detail-pane.active {
    display: block;
}

.lesson-topic-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #edf0fa;
    margin-bottom: 14px;
    padding-bottom: 18px;
}

.lesson-topic-head h2 {
    margin: 0 0 5px;
    font-size: 24px;
    line-height: 1.12;
    font-weight: 900;
}

.lesson-topic-head p:not(.section-kicker) {
    margin: 0;
    color: #31446a;
    font-weight: 800;
}

.topic-metrics {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.topic-metrics span {
    border: 1px solid #dce6f8;
    border-radius: 999px;
    padding: 8px 11px;
    color: #385174;
    background: #f8fbff;
    font-size: 13px;
    font-weight: 900;
}

.lesson-overview-grid {
    display: grid;
    grid-template-columns: minmax(260px, .95fr) minmax(260px, 1fr) minmax(260px, 1fr) minmax(230px, .8fr);
    gap: 14px;
}

.study-card {
    border: 1px solid #dbe5f4;
    border-radius: 8px;
    padding: 16px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 14px 32px rgba(59, 39, 135, .07);
}

.study-card h3 {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 900;
}

.card-topic-intro {
    display: flex;
    min-height: 450px;
    overflow: hidden;
    flex-direction: column;
}

.topic-intro-content {
    color: #14223e;
    font-weight: 400;
    line-height: 1.6;
}

.topic-intro-content strong,
.topic-intro-content b {
    font-weight: 400;
}

.topic-intro-content h1,
.topic-intro-content h2,
.topic-intro-content h3,
.topic-intro-content h4 {
    margin: 0 0 12px;
    color: #111c35;
    line-height: 1.24;
}

.topic-intro-content p {
    margin: 0 0 12px;
}

.topic-intro-content table {
    width: 100%;
    margin: 14px 0;
    border-collapse: collapse;
}

.topic-intro-content th,
.topic-intro-content td {
    border: 1px solid #d5dfef;
    padding: 9px 10px;
    vertical-align: top;
}

.topic-intro-content th {
    background: #f3f6fc;
    color: #071739;
    font-weight: 500;
}

.topic-intro-preview {
    position: relative;
    max-height: 300px;
    overflow: hidden;
    flex: 1 1 auto;
}

.topic-intro-preview::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 64px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
}

.topic-intro-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    margin-top: auto;
    border: 0;
    border-radius: 8px;
    background: #316bff;
    color: #fff;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(49, 107, 255, .18);
}

.topic-intro-more:hover {
    background: #2157dc;
}

.topic-intro-modal[hidden] {
    display: none;
}

.topic-intro-modal {
    position: fixed;
    z-index: 12000;
    inset: 0;
    display: grid;
    align-items: start;
    justify-items: center;
    padding: 56px 18px 18px;
}

.topic-intro-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 13, 34, .58);
    backdrop-filter: blur(7px);
}

.topic-intro-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(860px, 100%);
    max-height: calc(100vh - 82px);
    overflow: hidden;
    border: 1px solid #d9e3f3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(11, 23, 54, .26);
}

.topic-intro-dialog header,
.topic-intro-dialog footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid #dce5f2;
}

.topic-intro-dialog footer {
    justify-content: flex-end;
    border-top: 1px solid #dce5f2;
    border-bottom: 0;
}

.topic-intro-dialog header span {
    color: #7259ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.topic-intro-dialog header h2 {
    margin: 4px 0 0;
    color: #111c35;
    font-size: 24px;
    line-height: 1.18;
}

.topic-intro-dialog header small {
    display: block;
    margin-top: 5px;
    color: #657492;
    font-weight: 900;
}

.topic-intro-dialog button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid #d5dfef;
    border-radius: 10px;
    padding: 0 16px;
    background: #fff;
    color: #183156;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.topic-intro-dialog header button {
    width: 42px;
    padding: 0;
}

.topic-intro-modal-body {
    max-height: calc(100vh - 250px);
    overflow: auto;
    padding: 24px 28px;
}

.card-title-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.card-title-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    color: #1d4ed8;
    background: #e9f1ff;
}

.lesson-progress-ring {
    position: relative;
    display: grid;
    align-content: center;
    width: 136px;
    height: 136px;
    gap: 8px;
    place-items: center;
    border-radius: 50%;
    margin: 22px auto 20px;
    background: conic-gradient(#6d58ff calc(var(--progress, 0) * 1%), #dcebff 0);
    box-shadow: 0 16px 34px rgba(87, 104, 255, .12);
}

.lesson-progress-ring::before {
    content: "";
    position: absolute;
    inset: 13px;
    border-radius: inherit;
    background: #fff;
    box-shadow: inset 0 0 0 8px #f3f8ff;
}

.lesson-progress-ring strong,
.lesson-progress-ring span {
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
}

.lesson-progress-ring strong {
    font-size: 26px;
    line-height: 1;
    font-weight: 900;
}

.lesson-progress-ring span {
    font-size: 12px;
    font-weight: 900;
}

.progress-breakdown,
.answer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.answer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 12px 0 0;
}

.progress-breakdown div,
.answer-grid div,
.study-insight,
.material-placeholder,
.topic-plan-empty {
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    padding: 12px;
    background: #f8fbff;
}

.card-level .progress-breakdown {
    grid-template-columns: repeat(3, minmax(74px, 1fr));
    gap: 8px;
}

.card-level .progress-breakdown div {
    display: grid;
    align-content: center;
    min-height: 64px;
    padding: 10px;
}

.card-level .progress-breakdown span {
    line-height: 1.15;
}

.card-level .progress-breakdown strong {
    margin-top: 4px;
    font-size: 18px;
    line-height: 1.1;
    white-space: nowrap;
    letter-spacing: 0;
}

.card-level > p {
    margin-top: 2px;
    color: #182744;
    line-height: 1.45;
}

.progress-breakdown span,
.answer-grid span,
.study-insight span,
.material-placeholder span,
.topic-plan-empty span {
    display: block;
    color: #617095;
    font-size: 12px;
    font-weight: 800;
}

.progress-breakdown strong,
.answer-grid strong,
.study-insight strong,
.material-placeholder strong,
.topic-plan-empty strong {
    display: block;
    color: #071739;
    font-weight: 900;
}

.topic-plan-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.topic-plan-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    padding: 9px 10px;
    background: #fff;
}

.topic-plan-row > span {
    min-width: 0;
    color: #4c5d82;
    font-size: 12px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.topic-plan-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.topic-plan-actions button {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #d8e1ef;
    border-radius: 8px;
    background: #f8fbff;
    color: #315bdc;
    cursor: pointer;
}

.topic-plan-actions button:hover {
    border-color: #9db7ff;
    background: #eef4ff;
}

.topic-plan-actions [data-delete-lesson-calendar] {
    color: #dc2626;
}

.topic-plan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    margin-top: 12px;
    border: 0;
    border-radius: 8px;
    background: #4f86f7;
    color: #fff;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(47, 102, 246, .18);
}

.topic-plan-button:hover {
    background: #326df2;
}

.summary-metric strong {
    display: block;
    margin-bottom: 2px;
    color: #123f91;
    font-size: 28px;
    font-weight: 900;
}

.summary-metric span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.lesson-study-progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 12px 0 2px;
}

.lesson-study-progress i {
    display: block;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(90deg, #6d58ff var(--progress), #edf2ff 0);
}

.lesson-study-progress span {
    color: #123f91;
    font-size: 12px;
    font-weight: 900;
}

.summary-pair {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #edf0fa;
    margin-top: 12px;
    padding-top: 12px;
    font-weight: 900;
}

.summary-pair span {
    color: #617095;
}

.study-desk-button {
    display: grid;
    min-height: 42px;
    place-items: center;
    border-radius: 8px;
    margin-top: 14px;
    color: #fff;
    background: #4f8df7;
    font-weight: 900;
}

.empty-line {
    border-radius: 8px;
    margin-top: 14px;
    padding: 12px;
    color: #31446a;
    background: #f8fbff;
    font-weight: 800;
    white-space: pre-line;
}

.study-insight-list {
    display: grid;
    gap: 10px;
}

.card-materials {
    grid-column: span 2;
}

.card-ai-context {
    grid-column: 1 / -1;
}

.ai-context-copy {
    max-width: 920px;
    margin: -4px 0 14px;
    color: #4e6288;
    font-weight: 800;
}

.ai-context-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.ai-context-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border: 1px solid #cddbf4;
    border-radius: 8px;
    padding: 0 14px;
    background: #f8fbff;
    color: #17366f;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.ai-context-actions button:first-child {
    border-color: #3165f5;
    background: #3165f5;
    color: #fff;
}

.ai-context-actions button:disabled {
    cursor: wait;
    opacity: .68;
}

.ai-context-status {
    border: 1px solid #d4e1f6;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #f8fbff;
    color: #17366f;
    font-weight: 900;
}

.ai-context-status.pending {
    border-color: #cddbf4;
    color: #516080;
}

.ai-context-status.saved {
    border-color: #b7f0d1;
    background: #edfff5;
    color: #08784e;
}

.ai-context-status.error {
    border-color: #ffc7c7;
    background: #fff1f1;
    color: #b10f22;
}

.card-ai-context textarea {
    display: block;
    width: 100%;
    min-height: 260px;
    resize: vertical;
    border: 1px solid #cddbf4;
    border-radius: 8px;
    padding: 14px;
    background: #fbfdff;
    color: #0b1736;
    font: 800 14px/1.55 var(--font);
    outline: none;
}

.card-ai-context textarea:focus {
    border-color: #6d58ff;
    box-shadow: 0 0 0 4px rgba(109, 88, 255, .14);
}

.ai-prompt-history {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.ai-prompt-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #071533;
    font-weight: 900;
}

.ai-prompt-history-head span {
    border-radius: 999px;
    padding: 6px 10px;
    background: #edf4ff;
    color: #2450a8;
    font-size: 12px;
}

.ai-prompt-list {
    display: grid;
    gap: 10px;
}

.ai-prompt-item {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 34px;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: 1px solid #d4e1f6;
    border-radius: 8px;
    padding: 12px;
    background: #f8fbff;
    color: #071533;
    text-align: left;
    cursor: pointer;
}

.ai-prompt-item:hover {
    border-color: #6d58ff;
    background: #f2f5ff;
}

.ai-prompt-item span,
.ai-prompt-item em {
    min-width: 0;
}

.ai-prompt-item strong,
.ai-prompt-item small,
.ai-prompt-item em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-prompt-item strong {
    font-weight: 900;
}

.ai-prompt-item small,
.ai-prompt-item em {
    color: #58709a;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.ai-prompt-item i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #cbdaf5;
    border-radius: 8px;
    color: #3165f5;
}

.ai-prompt-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(8, 17, 38, .62);
}

.ai-prompt-modal[hidden] {
    display: none;
}

.ai-prompt-modal-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(980px, 100%);
    max-height: min(760px, calc(100vh - 44px));
    border: 1px solid #d4e1f6;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(8, 17, 38, .28);
    overflow: hidden;
}

.ai-prompt-modal-head,
.ai-prompt-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid #dbe6f7;
}

.ai-prompt-modal-foot {
    justify-content: flex-end;
    border-top: 1px solid #dbe6f7;
    border-bottom: 0;
}

.ai-prompt-modal-head span {
    color: #6d58ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ai-prompt-modal-head h2 {
    margin: 5px 0 0;
    color: #071533;
    font-size: 28px;
}

.ai-prompt-modal-head small {
    display: block;
    margin-top: 5px;
    color: #58709a;
    font-weight: 800;
}

.ai-prompt-modal-head button,
.ai-prompt-modal-foot button {
    border: 1px solid #cbdaf5;
    border-radius: 8px;
    padding: 10px 14px;
    background: #fff;
    color: #17366f;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.ai-prompt-modal-head button {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
}

.ai-prompt-modal-body {
    display: grid;
    gap: 18px;
    min-height: 0;
    overflow: auto;
    padding: 20px 22px;
}

.ai-prompt-modal.snapshot-answer-modal .ai-prompt-modal-body {
    align-content: start;
}

.ai-prompt-modal-body h3 {
    margin: 0 0 10px;
    color: #071533;
    font-size: 18px;
}

.ai-prompt-modal-body pre {
    overflow: auto;
    max-height: 340px;
    border: 1px solid #d4e1f6;
    border-radius: 8px;
    margin: 0;
    padding: 14px;
    background: #f8fbff;
    color: #0b1736;
    font: 800 13px/1.55 var(--font);
    white-space: pre-wrap;
    word-break: break-word;
}

.ai-prompt-response {
    display: grid;
    gap: 8px;
}

.ai-answer-waiting {
    display: grid;
    justify-items: center;
    gap: 12px;
    min-height: 360px;
    padding: 58px 22px;
    border: 1px dashed #b9c9ff;
    border-radius: 14px;
    color: #14244a;
    background: linear-gradient(180deg, #f7faff 0%, #fff 100%);
    text-align: center;
}

.ai-answer-waiting strong {
    color: #071533;
    font-size: 24px;
    font-weight: 900;
}

.ai-answer-waiting p {
    max-width: 520px;
    margin: 0;
    color: #5b6d91;
    font-weight: 800;
}

.ai-answer-orbit {
    position: relative;
    width: 82px;
    height: 82px;
    border-radius: 999px;
    background: #eef4ff;
    box-shadow: inset 0 0 0 10px #e0eaff;
}

.ai-answer-orbit::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: inherit;
    border: 6px solid transparent;
    border-top-color: #6d58ff;
    border-right-color: #2f6bff;
    animation: ai-answer-spin 1s linear infinite;
}

.ai-answer-orbit span {
    position: absolute;
    bottom: -18px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #6d58ff;
    animation: ai-answer-dot 1.15s ease-in-out infinite;
}

.ai-answer-orbit span:nth-child(1) {
    left: 24px;
}

.ai-answer-orbit span:nth-child(2) {
    left: 38px;
    animation-delay: .16s;
}

.ai-answer-orbit span:nth-child(3) {
    left: 52px;
    animation-delay: .32s;
}

@keyframes ai-answer-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ai-answer-dot {
    0%,
    80%,
    100% {
        opacity: .35;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-7px);
    }
}

.ai-prompt-response strong {
    color: #2450a8;
    font-size: 12px;
}

.ai-prompt-response-html {
    border: 1px solid #d4e1f6;
    border-radius: 10px;
    padding: 18px 20px;
    background: #ffffff;
    color: #0b1736;
    font: 700 14px/1.65 var(--font);
}

.ai-prompt-response-html h1,
.ai-prompt-response-html h2,
.ai-prompt-response-html h3,
.ai-prompt-response-html h4 {
    margin: 18px 0 8px;
    color: #061739;
    line-height: 1.25;
}

.ai-prompt-response-html h1:first-child,
.ai-prompt-response-html h2:first-child,
.ai-prompt-response-html h3:first-child,
.ai-prompt-response-html h4:first-child,
.ai-prompt-response-html p:first-child {
    margin-top: 0;
}

.ai-prompt-response-html p {
    margin: 0 0 12px;
}

.ai-prompt-response-html ul,
.ai-prompt-response-html ol {
    margin: 8px 0 14px 22px;
    padding: 0;
}

.ai-prompt-response-html li {
    margin: 5px 0;
}

.ai-prompt-response-html blockquote {
    margin: 12px 0;
    border-left: 4px solid #7c5cff;
    padding: 8px 0 8px 14px;
    color: #52617c;
    background: #f7f4ff;
}

.ai-context-error-line {
    color: #b10f22;
    background: #fff1f1;
}

.material-placeholder {
    max-width: 380px;
    margin-top: 10px;
}

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

.material-type-grid .material-placeholder {
    max-width: none;
    margin-top: 0;
}

.calendar-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 170px;
    border-radius: var(--radius-xl);
    padding: 28px;
    color: #fff;
    background: linear-gradient(135deg, #2a138f 0%, #6335ec 48%, #1478ff 100%);
    box-shadow: var(--shadow);
}

.calendar-hero span,
.study-calendar-side header span,
.calendar-modal-panel header span,
.calendar-toolbar-note span {
    color: #7259ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.calendar-hero span {
    color: #ddd5ff;
}

.calendar-hero h2 {
    margin: 8px 0;
    font-size: 34px;
    line-height: 1.05;
}

.calendar-hero p {
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-weight: 800;
}

.calendar-hero-stats {
    display: grid;
    min-width: 150px;
    place-items: center;
    border-radius: 22px;
    padding: 18px;
    color: #1b1c64;
    background: rgba(255, 255, 255, .84);
}

.calendar-hero-stats strong {
    font-size: 38px;
    line-height: 1;
}

.study-calendar-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;
    align-items: start;
    margin-top: 18px;
}

.study-calendar-board,
.study-calendar-side {
    min-width: 0;
    border: 1px solid #d8e1ef;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .06);
}

.study-calendar-board {
    padding: 18px;
}

.calendar-toolbar-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.calendar-toolbar-note strong {
    color: #11182d;
    font-size: 22px;
}

.full-calendar-shell {
    min-width: 0;
    border: 1px solid #d8e1ef;
    border-radius: 18px;
    padding: 12px;
    background: #fbfcff;
}

.full-calendar-host {
    min-height: 500px;
    color: #11182d;
}

.full-calendar-host .fc {
    font-family: inherit;
}

.full-calendar-host .fc .fc-toolbar {
    gap: 10px;
    flex-wrap: wrap;
}

.full-calendar-host .fc .fc-toolbar-title {
    color: #10182f;
    font-size: 22px;
    font-weight: 900;
}

.full-calendar-host .fc .fc-button {
    border: 1px solid #d8e1ef;
    border-radius: 8px;
    background: #fff;
    color: #203052;
    font-weight: 900;
    box-shadow: none;
}

.full-calendar-host .fc .fc-button:hover,
.full-calendar-host .fc .fc-button-primary:not(:disabled).fc-button-active {
    border-color: #7c6cff;
    background: #f1edff;
    color: #3c22b9;
}

.full-calendar-host .fc-theme-standard td,
.full-calendar-host .fc-theme-standard th,
.full-calendar-host .fc-theme-standard .fc-scrollgrid {
    border-color: #e4e9f4;
}

.full-calendar-host .fc-col-header-cell-cushion,
.full-calendar-host .fc-daygrid-day-number,
.full-calendar-host .fc a {
    color: #23324f;
    font-weight: 800;
    text-decoration: none;
}

.full-calendar-host .fc-day-today {
    background: #f2f0ff !important;
}

.full-calendar-host .fc-event {
    border: 0;
    border-radius: 8px;
    padding: 3px 5px;
    font-weight: 900;
}

.full-calendar-missing {
    display: grid;
    min-height: 360px;
    place-items: center;
    border: 1px dashed #ffb020;
    border-radius: 14px;
    padding: 20px;
    color: #9a5a00;
    background: #fff8e8;
    text-align: center;
}

.study-calendar-side {
    position: sticky;
    top: 16px;
    display: grid;
    gap: 14px;
    padding: 18px;
}

.study-calendar-side > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.study-calendar-side h3 {
    margin: 4px 0 0;
    color: #11182d;
    font-size: 22px;
}

.calendar-history-toggle {
    flex: 0 0 auto;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 8px 10px;
    background: #fff1f2;
    color: #be123c;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.calendar-history-toggle:hover,
.calendar-history-toggle.is-active {
    border-color: #fb7185;
    background: #ffe4e6;
    color: #9f1239;
}

.calendar-entry-list {
    display: grid;
    gap: 10px;
}

.calendar-entry {
    display: grid;
    gap: 10px;
    width: 100%;
    border: 1px solid #dfe6f4;
    border-radius: 16px;
    padding: 12px;
    background: #fbfcff;
    color: #17213a;
    text-align: left;
}

.calendar-entry > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.calendar-entry:hover {
    border-color: #9a8cff;
    background: #f6f3ff;
}

.calendar-entry.is-expired {
    border-color: #fecdd3;
    background: #fff7f7;
}

.calendar-entry.is-expired:hover {
    border-color: #fb7185;
    background: #fff1f2;
}

.calendar-entry time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    border-radius: 14px;
    padding: 7px 10px;
    background: #eef4ff;
    color: #233c91;
}

.calendar-entry.is-expired time {
    background: #ffe4e6;
    color: #be123c;
}

.calendar-entry time strong {
    flex: 0 0 auto;
    font-size: 16px;
}

.calendar-entry time span,
.calendar-entry small,
.calendar-entry em {
    color: #617095;
    font-size: 12px;
    font-weight: 800;
}

.calendar-entry > span {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.calendar-entry > span strong {
    display: -webkit-box;
    color: #11182d;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.28;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.calendar-entry em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-entry-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.calendar-entry-actions button,
.calendar-entry-actions a {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #d8e1ef;
    border-radius: 8px;
    background: #fff;
    color: #315bdc;
    text-decoration: none;
    cursor: pointer;
}

.calendar-entry-actions button:hover,
.calendar-entry-actions a:hover {
    border-color: #9db7ff;
    background: #eef4ff;
}

.calendar-entry.is-expired .calendar-entry-actions button,
.calendar-entry.is-expired .calendar-entry-actions a {
    border-color: #fecaca;
    color: #be123c;
}

.calendar-entry.is-expired .calendar-entry-actions button:hover,
.calendar-entry.is-expired .calendar-entry-actions a:hover {
    border-color: #fb7185;
    background: #ffe4e6;
}

.calendar-modal {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(21, 18, 59, .50);
}

.calendar-modal[hidden] {
    display: none;
}

.calendar-modal-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(860px, 100%);
    max-height: min(760px, calc(100vh - 48px));
    overflow: hidden;
    border: 1px solid #d8e1ef;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .24);
}

.calendar-modal-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e4e9f4;
    padding: 22px 24px;
}

.calendar-modal-panel h2 {
    margin: 4px 0 0;
    color: #11182d;
    font-size: 28px;
}

.calendar-modal-panel header button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #d8e1ef;
    border-radius: 50%;
    background: #fff;
    color: #203052;
}

.calendar-modal-panel form {
    display: grid;
    gap: 14px;
    min-height: 0;
    overflow: auto;
    padding: 22px 24px 0;
}

.calendar-modal-panel label {
    display: grid;
    gap: 7px;
    color: #203052;
    font-weight: 900;
}

.calendar-modal-panel label span {
    color: #bb4f00;
    font-size: 12px;
    font-weight: 900;
}

.calendar-field-help {
    display: block;
    color: #667797;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.calendar-modal-panel input,
.calendar-modal-panel select,
.calendar-modal-panel textarea {
    width: 100%;
    border: 1px solid #d8e1ef;
    border-radius: 8px;
    padding: 11px 12px;
    background: #fff;
    color: #182236;
    font: inherit;
    font-weight: 800;
}

.calendar-modal-panel textarea {
    resize: vertical;
}

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

.calendar-modal-panel footer {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #e4e9f4;
    margin: 8px -24px 0;
    padding: 16px 24px;
    background: #fff;
}

.calendar-modal-panel footer span {
    margin-right: auto;
    color: #617095;
    font-weight: 900;
}

.calendar-modal-panel footer button {
    border: 1px solid #d8e1ef;
    border-radius: 8px;
    padding: 11px 16px;
    background: #fff;
    color: #203052;
    font-weight: 900;
}

.calendar-modal-panel footer .primary {
    border-color: #2f66f6;
    color: #fff;
    background: #2f66f6;
}

.calendar-modal-panel footer .calendar-delete {
    margin-right: auto;
    border-color: #fecaca;
    color: #b91c1c;
    background: #fff1f2;
}

.mobile-backdrop {
    display: none;
}

@media (max-width: 1280px) {
    .metric-grid {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }

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

    .leaderboard-card,
    .dashboard-calendar-card,
    .dashboard-study-card {
        grid-column: auto;
    }

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

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

    .study-calendar-side {
        position: relative;
        top: auto;
    }

    .card-materials {
        grid-column: auto;
    }
}

@media (max-width: 980px) {
    .rewards-hero,
    .rewards-summary-grid,
    .rewards-grid {
        grid-template-columns: 1fr;
    }

    .rewards-hero {
        display: grid;
    }

    .rewards-hero-score {
        justify-items: start;
        place-items: start;
    }

    .learning-shell {
        grid-template-columns: 1fr;
    }

    .learning-sidebar {
        position: fixed;
        z-index: 100;
        width: min(310px, 86vw);
        transform: translateX(-105%);
        transition: transform .2s ease;
    }

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

    body.sidebar-open .mobile-backdrop {
        position: fixed;
        inset: 0;
        z-index: 90;
        display: block;
        background: rgba(21, 18, 59, .42);
    }

    .learning-topbar {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .level-progress,
    .topbar-actions {
        grid-column: 1 / -1;
    }

    .message-dropdown {
        right: -64px;
        max-height: min(480px, calc(100vh - 100px));
    }

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

    .lessons-hero,
    .lesson-summary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .lessons-hero > div {
        grid-column: 1 / -1;
    }

    .lesson-workspace {
        grid-template-columns: 1fr;
    }

    .lesson-sidebar {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
    }

    .lesson-sidebar-scroll {
        max-height: 420px;
    }
}

@media (max-width: 680px) {
    .learning-main {
        padding: 16px;
    }

    .learning-topbar {
        display: flex;
        align-items: center;
        gap: 8px;
        max-height: none;
        margin-bottom: 18px;
    }

    .welcome-copy,
    .level-progress {
        display: none;
    }

    .menu-button {
        flex: 0 0 auto;
        width: 46px;
        height: 46px;
        border-radius: 16px;
        font-size: 26px;
    }

    .topbar-actions {
        grid-column: auto;
        justify-content: flex-end;
        gap: 7px;
        min-width: 0;
        margin-left: auto;
    }

    .round-action {
        width: 44px;
        height: 44px;
        border-radius: 15px;
        font-size: 21px;
        box-shadow: 0 12px 22px rgba(36, 22, 111, .12);
    }

    .profile-chip {
        min-width: 0;
        gap: 0;
    }

    .profile-chip > div,
    .profile-chip > i {
        display: none;
    }

    .profile-avatar {
        width: 44px;
        height: 44px;
        font-size: 24px;
    }

    .metric-grid,
    .quick-grid,
    .chart-wrap,
    .lessons-hero,
    .lesson-summary-grid {
        grid-template-columns: 1fr;
    }

    .metric-card {
        min-height: 118px;
    }

    .announcement-list a {
        grid-template-columns: 1fr;
    }

    .announcement-list strong,
    .announcement-list small,
    .announcement-list i {
        grid-column: auto;
        grid-row: auto;
    }

    .leaderboard-card {
        overflow-x: auto;
    }

    .leaderboard-card table {
        min-width: 640px;
    }

    .dashboard-calendar-row {
        grid-template-columns: 1fr auto;
    }

    .dashboard-calendar-row time {
        grid-column: 1 / -1;
        justify-items: start;
        text-align: left;
    }

    .coach-bubble {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 18px;
    }

    .coach-bubble em {
        display: none;
    }

    .lessons-hero {
        padding: 24px;
    }

    .lessons-hero h2 {
        font-size: 34px;
    }

    .lessons-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .lesson-tree-view {
        padding: 16px;
    }

    .lesson-topic-head {
        display: grid;
    }

    .lesson-overview-grid {
        grid-template-columns: 1fr;
    }

    .calendar-hero,
    .calendar-form-row {
        grid-template-columns: 1fr;
    }

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

    .calendar-modal {
        padding: 12px;
    }

    .calendar-modal-panel h2 {
        font-size: 23px;
    }

    .progress-breakdown,
    .answer-grid {
        grid-template-columns: 1fr;
    }
}

.study-guide-hero {
    align-items: center;
    background: linear-gradient(135deg, #fff 0%, #eef6ff 52%, #f3f0ff 100%);
    border: 1px solid rgba(90, 112, 150, .16);
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(42, 58, 92, .08);
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 22px;
    padding: 28px;
}

.study-guide-hero h2 {
    color: #12192f;
    font-size: 34px;
    line-height: 1.1;
    margin: 4px 0 10px;
}

.study-guide-hero p:last-child {
    color: #63708d;
    font-weight: 700;
    margin: 0;
    max-width: 720px;
}

.study-guide-hero-icon {
    align-items: center;
    background: #3157f6;
    border-radius: 22px;
    color: #fff;
    display: grid;
    font-size: 34px;
    height: 78px;
    justify-items: center;
    width: 78px;
}

.study-guide-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.study-guide-card {
    background: #fff;
    border: 1px solid rgba(90, 112, 150, .16);
    border-radius: 20px;
    box-shadow: 0 14px 38px rgba(42, 58, 92, .07);
    min-width: 0;
    overflow: hidden;
}

.study-guide-card > img {
    aspect-ratio: 16 / 9;
    display: block;
    object-fit: cover;
    width: 100%;
}

.study-guide-card-body {
    display: grid;
    gap: 12px;
    padding: 20px;
}

.study-guide-meta {
    align-items: center;
    color: #66728e;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 800;
    gap: 8px;
}

.study-guide-meta em {
    background: #edf4ff;
    border-radius: 999px;
    color: #3157f6;
    font-style: normal;
    padding: 5px 9px;
}

.study-guide-card h3 {
    color: #12192f;
    font-size: 20px;
    line-height: 1.25;
    margin: 0;
}

.study-guide-card p {
    color: #59667f;
    font-weight: 650;
    line-height: 1.65;
    margin: 0;
}

.study-guide-read-link {
    align-items: center;
    border-top: 1px solid rgba(90, 112, 150, .14);
    color: #3157f6;
    display: inline-flex;
    font-weight: 900;
    gap: 8px;
    padding-top: 12px;
    text-decoration: none;
}

.study-guide-read-link:hover {
    color: #173bd4;
}

.study-guide-content {
    color: #2f3a50;
    line-height: 1.7;
    margin-top: 12px;
    overflow-wrap: anywhere;
}

.study-guide-content img,
.study-guide-content iframe {
    border-radius: 14px;
    height: auto;
    max-width: 100%;
}

.study-guide-article {
    background: #fff;
    border: 1px solid rgba(90, 112, 150, .16);
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(42, 58, 92, .08);
    margin: 0 auto;
    max-width: 960px;
    overflow: hidden;
}

.study-guide-back {
    align-items: center;
    color: #3157f6;
    display: inline-flex;
    font-weight: 900;
    gap: 8px;
    margin: 22px 24px 0;
    text-decoration: none;
}

.study-guide-back:hover {
    color: #173bd4;
}

.study-guide-article-head {
    display: grid;
    gap: 14px;
    padding: 24px 32px 28px;
}

.study-guide-article-head h1 {
    color: #12192f;
    font-size: 38px;
    line-height: 1.12;
    margin: 0;
}

.study-guide-article-head p {
    color: #59667f;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.65;
    margin: 0;
}

.study-guide-article-image {
    aspect-ratio: 16 / 8;
    display: block;
    object-fit: cover;
    width: 100%;
}

.study-guide-article-content {
    font-size: 17px;
    padding: 30px 32px 38px;
}

.study-guide-article-content h1,
.study-guide-article-content h2,
.study-guide-article-content h3 {
    color: #12192f;
    line-height: 1.25;
}

.study-guide-article-content p,
.study-guide-article-content li {
    color: #36425b;
}

.empty-state-card {
    align-items: center;
    background: #fff;
    border: 1px dashed rgba(90, 112, 150, .28);
    border-radius: 20px;
    color: #66728e;
    display: grid;
    gap: 10px;
    justify-items: center;
    padding: 36px;
    text-align: center;
}

.empty-state-card i {
    color: #3157f6;
    font-size: 34px;
}

.empty-state-card strong {
    color: #12192f;
    font-size: 18px;
}

@media (max-width: 680px) {
    .study-guide-hero {
        grid-template-columns: 1fr;
        padding: 22px;
    }

    .study-guide-hero h2 {
        font-size: 28px;
    }

    .study-guide-hero-icon {
        height: 62px;
        width: 62px;
    }

    .study-guide-article-head,
    .study-guide-article-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .study-guide-article-head h1 {
        font-size: 28px;
    }
}