.mdcat-quiz {
    max-width: 760px;
    margin: 24px auto;
    padding: 20px;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    background: #fff;
    color: #1d2327;
}

.mdcat-quiz[hidden],
.mdcat-quiz [hidden] {
    display: none !important;
}

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

.mdcat-quiz__timer {
    min-width: 86px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #f6f7f7;
    font-weight: 700;
    text-align: center;
}

.mdcat-quiz__timer--warning {
    background: #fcf0f1;
    color: #b32d2e;
}

.mdcat-quiz__progress {
    font-size: 14px;
    color: #50575e;
}

.mdcat-quiz__message {
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: #f6f7f7;
}

.mdcat-quiz__message[data-type="success"] {
    background: #edfaef;
    color: #0a6624;
}

.mdcat-quiz__message[data-type="error"] {
    background: #fcf0f1;
    color: #b32d2e;
}

.mdcat-quiz__start {
    margin-top: 16px;
}

.mdcat-quiz__start-button,
.mdcat-quiz__option {
    cursor: pointer;
}

.mdcat-quiz__loading {
    margin: 14px 0;
    color: #50575e;
}

.mdcat-quiz--busy {
    opacity: 0.88;
}

.mdcat-quiz__question-card {
    margin-top: 14px;
}

.mdcat-quiz__question-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.mdcat-quiz__bookmark {
    padding: 7px 10px;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
    background: #fff;
    color: #1d2327;
    cursor: pointer;
    font-size: 13px;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.mdcat-quiz__bookmark:hover:not(:disabled),
.mdcat-quiz__bookmark:focus:not(:disabled) {
    border-color: #2271b1;
    outline: none;
}

.mdcat-quiz__bookmark.is-active {
    border-color: #2271b1;
    background: #e7f2fb;
    color: #135e96;
}

.mdcat-quiz__bookmark:disabled {
    cursor: progress;
    opacity: 0.72;
}

.mdcat-quiz__question-text {
    margin: 0 0 16px;
    font-size: 20px;
    line-height: 1.45;
}

.mdcat-quiz__options {
    display: grid;
    gap: 10px;
}

.mdcat-quiz__option {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
    background: #fff;
    color: #1d2327;
    text-align: left;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.mdcat-quiz__option:hover:not(:disabled),
.mdcat-quiz__option:focus:not(:disabled) {
    border-color: #2271b1;
    outline: none;
}

.mdcat-quiz__option:disabled {
    cursor: not-allowed;
    opacity: 0.82;
}

.mdcat-quiz__option.is-correct {
    border-color: #198754;
    background: #198754;
    color: #fff;
}

.mdcat-quiz__option.is-wrong {
    border-color: #dc3545;
    background: #dc3545;
    color: #fff;
}

.mdcat-quiz__result-card {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    background: #f6f7f7;
    text-align: center;
}

.mdcat-quiz__result-card h3 {
    margin: 0 0 12px;
}

.mdcat-quiz__score {
    margin-bottom: 14px;
    font-size: 32px;
    font-weight: 700;
}

.mdcat-quiz__summary {
    display: flex;
    justify-content: center;
    gap: 18px;
    color: #50575e;
}

.mdcat-quiz__review-button {
    margin-top: 16px;
    padding: 10px 14px;
    border: 1px solid #2271b1;
    border-radius: 6px;
    background: #2271b1;
    color: #fff;
    cursor: pointer;
}

.mdcat-quiz__review-button:hover,
.mdcat-quiz__review-button:focus {
    background: #135e96;
    border-color: #135e96;
}

@media (max-width: 600px) {
    .mdcat-quiz {
        margin: 16px 0;
        padding: 16px;
    }

    .mdcat-quiz__header,
    .mdcat-quiz__summary {
        align-items: stretch;
        flex-direction: column;
    }

    .mdcat-quiz__timer {
        width: 100%;
    }
}

.mdcat-attempt-history {
    max-width: 980px;
    margin: 24px auto;
    color: #1d2327;
}

.mdcat-attempt-history__loading,
.mdcat-attempt-history__message {
    padding: 14px;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    background: #fff;
}

.mdcat-attempt-history__message[data-type="empty"] {
    color: #50575e;
}

.mdcat-attempt-history__message[data-type="error"] {
    border-color: #f0c2c4;
    background: #fcf0f1;
    color: #b32d2e;
}

.mdcat-attempt-history__table-wrap {
    overflow-x: auto;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    background: #fff;
}

.mdcat-attempt-history__table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.mdcat-attempt-history__table th,
.mdcat-attempt-history__table td {
    padding: 12px 14px;
    border-bottom: 1px solid #dcdcde;
    text-align: left;
    vertical-align: top;
}

.mdcat-attempt-history__table th {
    background: #f6f7f7;
    font-weight: 700;
}

.mdcat-attempt-history__table tr:last-child td {
    border-bottom: 0;
}

.mdcat-review {
    display: grid;
    gap: 16px;
    text-align: left;
}

.mdcat-review__header {
    padding: 18px;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    background: #f6f7f7;
}

.mdcat-review__header h3 {
    margin: 0 0 8px;
}

.mdcat-review__score {
    font-size: 24px;
    font-weight: 700;
}

.mdcat-review__question {
    padding: 16px;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    background: #fff;
}

.mdcat-review__question.is-correct {
    border-left: 4px solid #198754;
}

.mdcat-review__question.is-wrong {
    border-left: 4px solid #dc3545;
}

.mdcat-review__question-title {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.45;
}

.mdcat-review__options {
    display: grid;
    gap: 8px;
}

.mdcat-review__option {
    padding: 10px 12px;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    background: #fff;
}

.mdcat-review__option.is-selected-correct {
    border-color: #198754;
    background: #edfaef;
}

.mdcat-review__option.is-selected-wrong {
    border-color: #dc3545;
    background: #fcf0f1;
}

.mdcat-review__option.is-correct-answer {
    border-color: #198754;
    box-shadow: inset 4px 0 0 #198754;
}

.mdcat-review__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    color: #50575e;
    font-size: 14px;
}

.mdcat-review__explanation {
    margin-top: 12px;
    padding: 12px;
    border-radius: 6px;
    background: #f6f7f7;
}

.mdcat-performance {
    max-width: 980px;
    margin: 24px auto;
    color: #1d2327;
}

.mdcat-performance__loading,
.mdcat-performance__message {
    padding: 14px;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    background: #fff;
}

.mdcat-performance__message[data-type="empty"] {
    color: #50575e;
}

.mdcat-performance__message[data-type="error"] {
    border-color: #f0c2c4;
    background: #fcf0f1;
    color: #b32d2e;
}

.mdcat-performance__content {
    display: grid;
    gap: 18px;
}

.mdcat-performance__section {
    padding: 18px;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    background: #fff;
}

.mdcat-performance__section h3 {
    margin: 0 0 14px;
}

.mdcat-performance__table-wrap {
    overflow-x: auto;
}

.mdcat-performance__table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}

.mdcat-performance__table th,
.mdcat-performance__table td {
    padding: 12px 14px;
    border-bottom: 1px solid #dcdcde;
    text-align: left;
    vertical-align: top;
}

.mdcat-performance__table th {
    background: #f6f7f7;
    font-weight: 700;
}

.mdcat-performance__table tr:last-child td {
    border-bottom: 0;
}

.mdcat-performance__label {
    display: inline-block;
    min-width: 72px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.mdcat-performance__label--strong {
    background: #edfaef;
    color: #0a6624;
}

.mdcat-performance__label--average {
    background: #fff4e5;
    color: #8a4b00;
}

.mdcat-performance__label--weak {
    background: #fcf0f1;
    color: #b32d2e;
}

.mdcat-revision-list {
    max-width: 980px;
    margin: 24px auto;
    color: #1d2327;
}

.mdcat-revision-list__loading,
.mdcat-revision-list__message {
    padding: 14px;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    background: #fff;
}

.mdcat-revision-list__message[data-type="empty"] {
    color: #50575e;
}

.mdcat-revision-list__message[data-type="error"] {
    border-color: #f0c2c4;
    background: #fcf0f1;
    color: #b32d2e;
}

.mdcat-revision-list__items {
    display: grid;
    gap: 14px;
}

.mdcat-revision-card {
    padding: 16px;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    background: #fff;
}

.mdcat-revision-card__title {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.45;
}

.mdcat-revision-card__meta {
    margin-bottom: 12px;
    color: #50575e;
    font-size: 14px;
}

.mdcat-revision-card__options {
    display: grid;
    gap: 8px;
}

.mdcat-revision-card__option {
    padding: 10px 12px;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    background: #fff;
}

.mdcat-revision-card__option.is-correct-answer {
    border-color: #198754;
    background: #edfaef;
    box-shadow: inset 4px 0 0 #198754;
}

.mdcat-revision-card__explanation {
    margin-top: 12px;
    padding: 12px;
    border-radius: 6px;
    background: #f6f7f7;
}

.mdcat-revision-card__wrong-count {
    display: inline-block;
    margin-top: 12px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #fcf0f1;
    color: #b32d2e;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 600px) {
    .mdcat-revision-list {
        margin: 16px 0;
    }

    .mdcat-revision-card {
        padding: 14px;
    }
}

/* =============================================
   Dashboard
   ============================================= */

.mdcat-dashboard {
    max-width: 1100px;
    margin: 24px auto;
    color: #1d2327;
}

.mdcat-dashboard[hidden],
.mdcat-dashboard [hidden] {
    display: none !important;
}

.mdcat-dashboard__loading {
    padding: 28px 20px;
    border: 1px solid #dcdcde;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    color: #50575e;
    font-size: 15px;
}

.mdcat-dashboard__message {
    padding: 18px 20px;
    border: 1px solid #dcdcde;
    border-radius: 12px;
    background: #fff;
    text-align: center;
}

.mdcat-dashboard__message[data-type="empty"] {
    color: #50575e;
    background: #f6f7f7;
}

.mdcat-dashboard__message[data-type="error"] {
    border-color: #f0c2c4;
    background: #fcf0f1;
    color: #b32d2e;
}

.mdcat-dashboard__content {
    display: grid;
    gap: 24px;
}

/* Section Titles */

.mdcat-dashboard__section-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: #1d2327;
}

/* =============================================
   Progress Hub Container
   ============================================= */

.mdcat-dashboard__progress-hub {
    background: #fff;
    border: 1px solid #e2e4e7;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.mdcat-dashboard__progress-hub > .mdcat-dashboard__section {
    border-bottom: 1px solid #f0f0f1;
}

.mdcat-dashboard__progress-hub > .mdcat-dashboard__section:last-child {
    border-bottom: none;
}

/* Override individual section backgrounds within the hub */
.mdcat-dashboard__progress-hub .mdcat-dashboard__section--overall-progress {
    background: linear-gradient(180deg, #f8f5fc, #fff);
    border-bottom-color: #e8eaed;
}

.mdcat-dashboard__progress-hub .mdcat-dashboard__section--continue-learning {
    background: #fff;
    border-bottom-color: #e8eaed;
}

/* Responsive hub */
@media (max-width: 600px) {
    .mdcat-dashboard__progress-hub {
        border-radius: 12px;
    }
}

/* =============================================
   Stats Cards Grid
   ============================================= */

.mdcat-dashboard__stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.mdcat-dashboard__stat-card {
    position: relative;
    padding: 20px 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e4e7;
    text-align: center;
    transition: transform 220ms ease, box-shadow 220ms ease;
    overflow: hidden;
}

.mdcat-dashboard__stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 12px 12px 0 0;
}

.mdcat-dashboard__stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.mdcat-dashboard__stat-card--attempts::before {
    background: linear-gradient(135deg, #2271b1, #4f94cd);
}

.mdcat-dashboard__stat-card--accuracy::before {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.mdcat-dashboard__stat-card--correct::before {
    background: linear-gradient(135deg, #198754, #34d399);
}

.mdcat-dashboard__stat-card--wrong::before {
    background: linear-gradient(135deg, #dc3545, #f87171);
}

.mdcat-dashboard__stat-card--bookmarks::before {
    background: linear-gradient(135deg, #e67e22, #f59e0b);
}

.mdcat-dashboard__stat-icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 8px;
}

.mdcat-dashboard__stat-value {
    font-size: 28px;
    font-weight: 800;
    color: #1d2327;
    line-height: 1.2;
    margin-bottom: 4px;
}

.mdcat-dashboard__stat-label {
    font-size: 13px;
    color: #50575e;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* =============================================
   Performance Snapshot
   ============================================= */

.mdcat-dashboard__section--snapshot {
    padding: 20px;
    border: 1px solid #e2e4e7;
    border-radius: 12px;
    background: #fff;
}

.mdcat-dashboard__snapshot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.mdcat-dashboard__subject-list {
    padding: 16px;
    border-radius: 10px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

.mdcat-dashboard__subject-list--strong {
    border-left: 4px solid #198754;
}

.mdcat-dashboard__subject-list--weak {
    border-left: 4px solid #dc3545;
}

.mdcat-dashboard__subject-heading {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: #1d2327;
}

.mdcat-dashboard__subject-empty {
    margin: 0;
    color: #50575e;
    font-size: 14px;
    font-style: italic;
}

.mdcat-dashboard__subject-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.mdcat-dashboard__subject-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e2e4e7;
    transition: border-color 160ms ease;
}

.mdcat-dashboard__subject-item:hover {
    border-color: #c3c4c7;
}

.mdcat-dashboard__subject-name {
    font-size: 14px;
    font-weight: 500;
    color: #1d2327;
}

.mdcat-dashboard__subject-accuracy {
    font-size: 14px;
    font-weight: 700;
    min-width: 48px;
    text-align: right;
}

.mdcat-dashboard__subject-list--strong .mdcat-dashboard__subject-accuracy {
    color: #198754;
}

.mdcat-dashboard__subject-list--weak .mdcat-dashboard__subject-accuracy {
    color: #dc3545;
}

/* =============================================
   Quick Actions
   ============================================= */

.mdcat-dashboard__section--actions {
    padding: 20px;
    border: 1px solid #e2e4e7;
    border-radius: 12px;
    background: #fff;
}

.mdcat-dashboard__actions-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.mdcat-dashboard__action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 12px;
    border: 1px solid #e2e4e7;
    border-radius: 10px;
    background: #f8f9fa;
    text-decoration: none;
    color: #1d2327;
    transition: transform 220ms ease, box-shadow 220ms ease, background-color 160ms ease, border-color 160ms ease;
    cursor: pointer;
    text-align: center;
}

.mdcat-dashboard__action-card:hover,
.mdcat-dashboard__action-card:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
    background: #fff;
    border-color: #2271b1;
    outline: none;
    color: #1d2327;
    text-decoration: none;
}

.mdcat-dashboard__action-icon {
    font-size: 26px;
    line-height: 1;
}

.mdcat-dashboard__action-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

/* =============================================
   Recent Activity
   ============================================= */

.mdcat-dashboard__section--activity {
    padding: 20px;
    border: 1px solid #e2e4e7;
    border-radius: 12px;
    background: #fff;
}

.mdcat-dashboard__activity-empty {
    margin: 0;
    padding: 16px 0;
    color: #50575e;
    font-size: 14px;
    text-align: center;
    font-style: italic;
}

.mdcat-dashboard__activity-table-wrap {
    overflow-x: auto;
    border: 1px solid #e2e4e7;
    border-radius: 10px;
}

.mdcat-dashboard__activity-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

.mdcat-dashboard__activity-table th,
.mdcat-dashboard__activity-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #e9ecef;
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
}

.mdcat-dashboard__activity-table th {
    background: #f8f9fa;
    font-weight: 700;
    font-size: 13px;
    color: #50575e;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.mdcat-dashboard__activity-table tr:last-child td {
    border-bottom: 0;
}

.mdcat-dashboard__activity-table tbody tr {
    transition: background-color 160ms ease;
}

.mdcat-dashboard__activity-table tbody tr:hover {
    background: #f8f9fa;
}

/* =============================================
   Dashboard Responsive Breakpoints
   ============================================= */

@media (max-width: 768px) {
    .mdcat-dashboard__stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .mdcat-dashboard__snapshot-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .mdcat-dashboard {
        margin: 16px 0;
    }

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

    .mdcat-dashboard__stat-card {
        padding: 16px 12px;
    }

    .mdcat-dashboard__stat-icon {
        font-size: 22px;
    }

    .mdcat-dashboard__stat-value {
        font-size: 22px;
    }

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

    .mdcat-dashboard__action-card {
        padding: 16px 10px;
    }

    .mdcat-dashboard__section--snapshot,
    .mdcat-dashboard__section--actions,
    .mdcat-dashboard__section--activity {
        padding: 16px;
    }

    .mdcat-dashboard__section-title {
        font-size: 16px;
    }
}

/* =============================================
   Streak Widget (Standalone + Dashboard)
   ============================================= */

.mdcat-streak {
    max-width: 1100px;
    margin: 24px auto;
    color: #1d2327;
}

.mdcat-streak[hidden],
.mdcat-streak [hidden] {
    display: none !important;
}

.mdcat-streak__loading {
    padding: 28px 20px;
    border: 1px solid #dcdcde;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    color: #50575e;
    font-size: 15px;
}

.mdcat-streak__message {
    padding: 18px 20px;
    border: 1px solid #dcdcde;
    border-radius: 12px;
    background: #fff;
    text-align: center;
}

.mdcat-streak__message[data-type="empty"] {
    color: #50575e;
    background: #f6f7f7;
}

.mdcat-streak__message[data-type="error"] {
    border-color: #f0c2c4;
    background: #fcf0f1;
    color: #b32d2e;
}

.mdcat-streak__cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.mdcat-streak__card {
    position: relative;
    padding: 20px 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e4e7;
    text-align: center;
    transition: transform 220ms ease, box-shadow 220ms ease;
    overflow: hidden;
}

.mdcat-streak__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 12px 12px 0 0;
}

.mdcat-streak__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.mdcat-streak__card--current::before {
    background: linear-gradient(135deg, #f97316, #ef4444);
}

.mdcat-streak__card--longest::before {
    background: linear-gradient(135deg, #eab308, #f59e0b);
}

.mdcat-streak__card--total::before {
    background: linear-gradient(135deg, #2271b1, #4f94cd);
}

.mdcat-streak__card--last-active::before {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.mdcat-streak__card-icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 8px;
}

.mdcat-streak__card-value {
    font-size: 28px;
    font-weight: 800;
    color: #1d2327;
    line-height: 1.2;
    margin-bottom: 2px;
}

.mdcat-streak__card-suffix {
    font-size: 12px;
    color: #50575e;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.mdcat-streak__card-label {
    font-size: 13px;
    color: #50575e;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Dashboard Streak Section */

.mdcat-dashboard__section--streak {
    padding: 20px;
    border: 1px solid #e2e4e7;
    border-radius: 12px;
    background: #fff;
}

/* =============================================
   Streak Responsive Breakpoints
   ============================================= */

@media (max-width: 768px) {
    .mdcat-streak__cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .mdcat-streak {
        margin: 16px 0;
    }

    .mdcat-streak__card {
        padding: 16px 12px;
    }

    .mdcat-streak__card-icon {
        font-size: 22px;
    }

    .mdcat-streak__card-value {
        font-size: 22px;
    }

    .mdcat-dashboard__section--streak {
        padding: 16px;
    }
}

/* =============================================
   Overall Progress Hero Widget
   ============================================= */

.mdcat-overall-progress {
    text-align: center;
}

.mdcat-overall-progress__header {
    margin-bottom: 20px;
}

.mdcat-overall-progress__title {
    font-size: 18px;
    font-weight: 700;
    color: #1d2327;
    margin: 0;
}

.mdcat-overall-progress__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.mdcat-overall-progress__percentage-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.mdcat-overall-progress__percentage-value {
    font-size: 48px;
    font-weight: 800;
    color: #1d2327;
    line-height: 1;
    letter-spacing: -1px;
}

.mdcat-overall-progress__percentage-label {
    font-size: 14px;
    font-weight: 500;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mdcat-overall-progress__bar-wrapper {
    width: 100%;
    max-width: 480px;
}

.mdcat-progress__bar-track--overall {
    height: 14px;
    border-radius: 7px;
    margin-bottom: 10px;
}

.mdcat-progress__bar-fill--overall {
    background: linear-gradient(135deg, #7b1fa2, #512da8);
    border-radius: 7px;
}

.mdcat-overall-progress__count {
    font-size: 13px;
    font-weight: 500;
    color: #50575e;
}

/* Dashboard overall progress section */
.mdcat-dashboard__section--overall-progress {
    padding: 32px 24px;
    background: linear-gradient(180deg, #fafbfc, #fff);
}

/* =============================================
   Overall Progress Responsive
   ============================================= */

@media (max-width: 600px) {
    .mdcat-overall-progress__percentage-value {
        font-size: 36px;
    }

    .mdcat-overall-progress__title {
        font-size: 16px;
    }

    .mdcat-dashboard__section--overall-progress {
        padding: 24px 16px;
    }
}

/* =============================================
   Continue Learning Card
   ============================================= */

.mdcat-continue-learning {
    background: #fff;
    border: 1px solid #e2e4e7;
    border-radius: 12px;
    padding: 24px;
}

.mdcat-continue-learning__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 12px;
}

.mdcat-continue-learning__heading {
    font-size: 18px;
    font-weight: 700;
    color: #1d2327;
    margin: 0;
}

.mdcat-continue-learning__progress-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: linear-gradient(135deg, #7b1fa2, #512da8);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 20px;
    white-space: nowrap;
}

.mdcat-continue-learning__breadcrumb {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
}

.mdcat-continue-learning__breadcrumb-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mdcat-continue-learning__breadcrumb-label {
    font-size: 11px;
    font-weight: 600;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mdcat-continue-learning__breadcrumb-value {
    font-size: 14px;
    font-weight: 500;
    color: #1d2327;
}

.mdcat-continue-learning__breadcrumb-value--highlight {
    font-weight: 700;
    color: #2271b1;
}

.mdcat-continue-learning__breadcrumb-separator {
    font-size: 18px;
    color: #c3c4c7;
    font-weight: 300;
    line-height: 1;
    padding-top: 12px;
}

.mdcat-continue-learning__resume-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #2e7d32, #1b5e20);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.mdcat-continue-learning__resume-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

.mdcat-continue-learning__resume-btn:active {
    transform: translateY(0);
}

/* Completed state */
.mdcat-continue-learning--completed {
    text-align: center;
    background: linear-gradient(180deg, #f1f8e9, #fff);
    border-color: #c5e1a5;
}

.mdcat-continue-learning__icon {
    font-size: 48px;
    margin-bottom: 12px;
    line-height: 1;
}

.mdcat-continue-learning--completed .mdcat-continue-learning__heading {
    color: #2e7d32;
    margin-bottom: 8px;
}

.mdcat-continue-learning__message {
    font-size: 14px;
    color: #50575e;
    margin: 0;
}

/* Dashboard continue learning section */
.mdcat-dashboard__section--continue-learning {
    padding: 24px;
}

/* Inside hub: flatten continue learning card */
.mdcat-dashboard__progress-hub .mdcat-continue-learning {
    border: none;
    border-radius: 0;
    padding: 0;
}

/* =============================================
   Continue Learning Responsive
   ============================================= */

@media (max-width: 600px) {
    .mdcat-continue-learning {
        padding: 16px;
    }

    .mdcat-continue-learning__heading {
        font-size: 16px;
    }

    .mdcat-continue-learning__breadcrumb {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }

    .mdcat-continue-learning__breadcrumb-separator {
        display: none;
    }

    .mdcat-continue-learning__resume-btn {
        width: 100%;
        justify-content: center;
    }

    .mdcat-dashboard__section--continue-learning {
        padding: 16px;
    }
}

/* =============================================
   Subject Progress Tracking
   ============================================= */

.mdcat-subject-progress__loading,
.mdcat-subject-progress__message {
    padding: 20px;
    text-align: center;
    color: #50575e;
    font-size: 14px;
}

.mdcat-subject-progress__message[data-type="error"] {
    color: #8a2424;
}

.mdcat-progress__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mdcat-progress__subject {
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #e2e4e7;
    border-radius: 10px;
    transition: box-shadow 200ms ease, transform 200ms ease;
}

.mdcat-progress__subject:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.mdcat-progress__subject-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 12px;
}

.mdcat-progress__subject-name {
    font-size: 15px;
    font-weight: 600;
    color: #1d2327;
}

.mdcat-progress__subject-stat {
    font-size: 13px;
    color: #757575;
    white-space: nowrap;
}

.mdcat-progress__bar-track {
    width: 100%;
    height: 10px;
    background: #f0f0f1;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 8px;
}

.mdcat-progress__bar-fill {
    height: 100%;
    background: linear-gradient(135deg, #2271b1, #135e96);
    border-radius: 5px;
    transition: width 600ms cubic-bezier(0.25, 0.8, 0.25, 1);
    min-width: 0;
}

.mdcat-progress__subject-percentage {
    font-size: 13px;
    font-weight: 500;
    color: #50575e;
}

.mdcat-progress__empty {
    text-align: center;
    color: #757575;
    font-size: 14px;
    padding: 16px 0;
    margin: 0;
}

/* Dashboard progress section spacing */
.mdcat-dashboard__section--progress {
    padding: 24px;
}

.mdcat-dashboard__section--progress .mdcat-progress__subject {
    border-color: #e8eaed;
}

/* Inside hub: flatten subject cards */
.mdcat-dashboard__progress-hub .mdcat-progress__subject {
    border-radius: 8px;
}

.mdcat-dashboard__progress-hub .mdcat-progress__list {
    gap: 16px;
}

/* =============================================
   Subject Progress Responsive
   ============================================= */

@media (max-width: 600px) {
    .mdcat-progress__subject {
        padding: 14px 16px;
    }

    .mdcat-progress__subject-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .mdcat-progress__subject-name {
        font-size: 14px;
    }

    .mdcat-dashboard__section--progress {
        padding: 16px;
    }
}

/* =============================================
   Chapter Progress Tracking
   ============================================= */

.mdcat-chapter-progress__groups {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mdcat-chapter-progress__group {
    background: #fff;
    border: 1px solid #e2e4e7;
    border-radius: 12px;
    overflow: hidden;
}

.mdcat-chapter-progress__group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e2e4e7;
    gap: 12px;
}

.mdcat-chapter-progress__group-name {
    font-size: 15px;
    font-weight: 700;
    color: #1d2327;
}

.mdcat-chapter-progress__group-count {
    font-size: 13px;
    color: #757575;
    white-space: nowrap;
}

.mdcat-chapter-progress__chapter-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mdcat-chapter-progress__chapter {
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f1;
    transition: background 200ms ease;
}

.mdcat-chapter-progress__chapter:last-child {
    border-bottom: none;
}

.mdcat-chapter-progress__chapter:hover {
    background: #fafbfc;
}

.mdcat-chapter-progress__chapter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 12px;
}

.mdcat-chapter-progress__chapter-name {
    font-size: 14px;
    font-weight: 500;
    color: #1d2327;
}

.mdcat-chapter-progress__chapter-stat {
    font-size: 12px;
    color: #757575;
    white-space: nowrap;
}

.mdcat-chapter-progress__chapter-percentage {
    font-size: 12px;
    font-weight: 500;
    color: #50575e;
    margin-top: 4px;
}

/* Chapter bars use teal gradient to distinguish from subject bars */
.mdcat-progress__bar-fill--chapter {
    background: linear-gradient(135deg, #00897b, #00695c);
}

/* Dashboard chapter progress section spacing */
.mdcat-dashboard__section--chapter-progress {
    padding: 24px;
}

/* Inside hub: flatten chapter groups */
.mdcat-dashboard__progress-hub .mdcat-chapter-progress__groups {
    gap: 20px;
}

.mdcat-dashboard__progress-hub .mdcat-chapter-progress__group {
    border-radius: 8px;
}

/* =============================================
   Chapter Progress Responsive
   ============================================= */

@media (max-width: 600px) {
    .mdcat-chapter-progress__group-header {
        padding: 12px 16px;
    }

    .mdcat-chapter-progress__chapter {
        padding: 12px 16px;
    }

    .mdcat-chapter-progress__chapter-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .mdcat-chapter-progress__group-name {
        font-size: 14px;
    }

    .mdcat-dashboard__section--chapter-progress {
        padding: 16px;
    }
}

/* =============================================
   Access Gate (Login Required / Access Denied)
   ============================================= */

.mdcat-access-gate {
    max-width: 520px;
    margin: 40px auto;
    padding: 40px 32px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e2e4e7;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.mdcat-access-gate:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
}

.mdcat-access-gate__icon {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 16px;
}

.mdcat-access-gate__title {
    font-size: 22px;
    font-weight: 700;
    color: #1d2327;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.mdcat-access-gate__message {
    font-size: 15px;
    color: #50575e;
    margin: 0 0 24px 0;
    line-height: 1.6;
}

.mdcat-access-gate__button {
    display: inline-block;
    padding: 12px 36px;
    background: linear-gradient(135deg, #2271b1, #135e96);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
    box-shadow: 0 2px 8px rgba(34, 113, 177, 0.25);
}

.mdcat-access-gate__button:hover {
    background: linear-gradient(135deg, #135e96, #0a4b78);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(34, 113, 177, 0.35);
}

.mdcat-access-gate__button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(34, 113, 177, 0.20);
}

.mdcat-access-gate--denied {
    border-color: #f0c2c4;
    background: #fff;
}

.mdcat-access-gate--denied .mdcat-access-gate__title {
    color: #8a2424;
}

.mdcat-access-gate--denied .mdcat-access-gate__message {
    margin-bottom: 0;
}

/* =============================================
   Access Gate Responsive
   ============================================= */

@media (max-width: 600px) {
    .mdcat-access-gate {
        margin: 20px 0;
        padding: 28px 20px;
    }

    .mdcat-access-gate__icon {
        font-size: 36px;
    }

    .mdcat-access-gate__title {
        font-size: 18px;
    }

    .mdcat-access-gate__button {
        display: block;
        padding: 12px 20px;
    }
}