/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-4r4vvroxd3] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── View-As banner ── */
.view-as-banner[b-4r4vvroxd3] {
    position: sticky;
    top: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(90deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 0.875rem;
    gap: 0.25rem;
}

.view-as-role-badge[b-4r4vvroxd3] {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.6rem;
    text-transform: uppercase;
}

main[b-4r4vvroxd3] {
    flex: 1;
}

.sidebar[b-4r4vvroxd3] {
    background-image: var(--sidebar-gradient);
}

.top-row[b-4r4vvroxd3] {
    background-color: var(--top-row-bg);
    border-bottom: 1px solid var(--top-row-border);
    justify-content: space-between;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.auth-shell[b-4r4vvroxd3] {
    gap: 1rem;
}

.session-summary[b-4r4vvroxd3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.session-label[b-4r4vvroxd3] {
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.session-user[b-4r4vvroxd3] {
    color: #111827;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-actions[b-4r4vvroxd3] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.theme-picker[b-4r4vvroxd3] {
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 0;
    text-transform: uppercase;
}

.theme-picker-select[b-4r4vvroxd3] {
    min-width: 10rem;
}

.profile-menu-button[b-4r4vvroxd3] {
    align-items: center;
    display: inline-flex;
    gap: 0.4rem;
}

.profile-menu-dropdown[b-4r4vvroxd3] {
    min-width: 15rem;
}

.session-actions form[b-4r4vvroxd3] {
    margin: 0;
}

.top-row-link[b-4r4vvroxd3] {
    border: 0;
    padding: 0;
}

    .top-row[b-4r4vvroxd3]  a, .top-row[b-4r4vvroxd3]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-4r4vvroxd3]  a:hover, .top-row[b-4r4vvroxd3]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-4r4vvroxd3]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-4r4vvroxd3] {
        height: auto;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .auth-shell[b-4r4vvroxd3] {
        align-items: flex-start;
        flex-direction: column;
    }

    .session-actions[b-4r4vvroxd3] {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .theme-picker-select[b-4r4vvroxd3] {
        min-width: 100%;
    }

    .profile-menu-dropdown[b-4r4vvroxd3] {
        min-width: 100%;
    }

    .top-row[b-4r4vvroxd3]  a, .top-row[b-4r4vvroxd3]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-4r4vvroxd3] {
        flex-direction: row;
    }

    .sidebar[b-4r4vvroxd3] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
    }

    .top-row[b-4r4vvroxd3] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-4r4vvroxd3]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-4r4vvroxd3], article[b-4r4vvroxd3] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-4r4vvroxd3] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-4r4vvroxd3] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-fdut5tyglo] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-fdut5tyglo] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-fdut5tyglo] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-fdut5tyglo] {
    font-size: 1.1rem;
}

.bi[b-fdut5tyglo] {
    margin-right: 0.75rem;
    font-size: 1rem;
    vertical-align: -0.125em;
}

.nav-item[b-fdut5tyglo] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-fdut5tyglo] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-fdut5tyglo] {
        padding-bottom: 1rem;
    }

    .nav-item[b-fdut5tyglo]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-fdut5tyglo]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-fdut5tyglo]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-fdut5tyglo] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-fdut5tyglo] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-fdut5tyglo] {
        display: none;
    }

    .nav-scrollable[b-fdut5tyglo] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Fill remaining sidebar height and scroll if needed */
        flex: 1;
        overflow-y: auto;
    }
}

/* ── Version badge at the bottom of the sidebar ── */
.nav-version[b-fdut5tyglo] {
    padding: 0.5rem 1rem 0.75rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.03em;
    text-align: center;
    user-select: none;
}

.nav-version .bi[b-fdut5tyglo] {
    font-size: 0.75rem;
    margin-right: 0.25rem;
}

@media (max-width: 640px) {
    .nav-version[b-fdut5tyglo] {
        display: none;
    }
}
/* /Components/Pages/AdminCostReport.razor.rz.scp.css */
.admin-cost-report-page[b-78gl2u22nl] {
    padding: 1.5rem;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.admin-eyebrow[b-78gl2u22nl] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.cost-report-header[b-78gl2u22nl] {
    margin-bottom: 1.5rem;
}

.cost-report-header h1[b-78gl2u22nl] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.cost-report-header p[b-78gl2u22nl] {
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* ── Filter card ────────────────────────────────────────────────────────── */

.filter-card[b-78gl2u22nl] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.filter-card .card-body[b-78gl2u22nl] {
    padding: 1rem 1.25rem;
}

/* ── Summary cards ──────────────────────────────────────────────────────── */

.summary-card[b-78gl2u22nl] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    text-align: center;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    height: 100%;
}

.summary-card:hover[b-78gl2u22nl] {
    box-shadow: var(--card-shadow);
    transform: translateY(-2px);
}

.summary-icon[b-78gl2u22nl] {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    line-height: 1;
}

.summary-value[b-78gl2u22nl] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 0.25rem;
    word-break: break-all;
}

.summary-label[b-78gl2u22nl] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */

.nav-tabs[b-78gl2u22nl] {
    border-color: var(--border-color);
}

.nav-tabs .nav-link[b-78gl2u22nl] {
    color: var(--text-secondary);
    border-color: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-tabs .nav-link:hover[b-78gl2u22nl] {
    color: var(--primary-color);
    border-color: transparent;
}

.nav-tabs .nav-link.active[b-78gl2u22nl] {
    color: var(--primary-color);
    background: var(--card-bg);
    border-color: var(--border-color) var(--border-color) var(--card-bg);
    font-weight: 600;
}

.nav-tabs .nav-link .badge[b-78gl2u22nl] {
    background: rgba(var(--primary-color-rgb), 0.15);
    color: var(--primary-color);
    font-size: 0.65rem;
}

/* ── Table ──────────────────────────────────────────────────────────────── */

.cost-report-table[b-78gl2u22nl] {
    width: 100%;
    margin-bottom: 0;
    background: var(--card-bg);
}

.cost-report-table th[b-78gl2u22nl] {
    background: rgba(var(--bg-secondary-rgb), 0.8);
    color: var(--text-primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.cost-report-table td[b-78gl2u22nl] {
    vertical-align: middle;
    border-color: var(--border-color);
    transition: background 0.2s ease;
}

.cost-report-table tbody tr:hover td[b-78gl2u22nl] {
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.04) 0%,
        rgba(var(--primary-color-rgb), 0.08) 100%);
}

.cost-report-table tfoot .table-foot-row td[b-78gl2u22nl] {
    border-top: 2px solid var(--border-color);
    background: rgba(var(--bg-secondary-rgb), 0.5);
    font-size: 0.875rem;
}

/* ── Cell content ───────────────────────────────────────────────────────── */

.row-name[b-78gl2u22nl] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.row-subject[b-78gl2u22nl] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.row-secondary[b-78gl2u22nl] {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.cost-value[b-78gl2u22nl] {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.token-value[b-78gl2u22nl] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.item-date[b-78gl2u22nl] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .summary-value[b-78gl2u22nl] {
        font-size: 1rem;
    }

    .nav-tabs .nav-link[b-78gl2u22nl] {
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }
}

@media (max-width: 575.98px) {
    .admin-cost-report-page[b-78gl2u22nl] {
        padding: 1rem;
    }

    .cost-report-header h1[b-78gl2u22nl] {
        font-size: 1.4rem;
    }

    .filter-card .card-body[b-78gl2u22nl] {
        padding: 0.875rem 1rem;
    }
}
/* /Components/Pages/AdminHints.razor.rz.scp.css */
.admin-hints-page[b-rwmmazdnu8] {
    padding: 1.5rem;
}

.admin-eyebrow[b-rwmmazdnu8] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.admin-hints-header[b-rwmmazdnu8] {
    margin-bottom: 1.5rem;
}

.admin-hints-header h1[b-rwmmazdnu8] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.admin-hints-header p[b-rwmmazdnu8] {
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* ── Table ────────────────────────────────────────────────────────────────── */

.admin-hints-table[b-rwmmazdnu8] {
    width: 100%;
    margin-bottom: 0;
    background: var(--card-bg);
}

.admin-hints-table th[b-rwmmazdnu8] {
    background: rgba(var(--bg-secondary-rgb), 0.8);
    color: var(--text-primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.admin-hints-table tbody tr:hover td[b-rwmmazdnu8] {
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.04) 0%,
        rgba(var(--primary-color-rgb), 0.08) 100%);
}

.admin-hints-table td[b-rwmmazdnu8] {
    vertical-align: middle;
    border-color: var(--border-color);
    transition: background 0.2s ease;
}

/* ── Cell content ──────────────────────────────────────────────────────────── */

.hint-preview-text[b-rwmmazdnu8] {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.4;
    max-width: 380px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hint-safety-badge[b-rwmmazdnu8] {
    font-size: 0.65rem;
    margin-top: 0.25rem;
}

.item-name[b-rwmmazdnu8] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.item-subject[b-rwmmazdnu8] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.item-student[b-rwmmazdnu8] {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.item-date[b-rwmmazdnu8] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.item-model[b-rwmmazdnu8] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-family: monospace;
    margin-top: 0.1rem;
}

.style-badge[b-rwmmazdnu8] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.token-count[b-rwmmazdnu8] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ── Action buttons ────────────────────────────────────────────────────────── */

.action-buttons[b-rwmmazdnu8] {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .admin-hints-page[b-rwmmazdnu8] {
        padding: 1rem;
    }

    .hint-preview-text[b-rwmmazdnu8] {
        max-width: 220px;
    }
}
/* /Components/Pages/AdminMonitoring.razor.rz.scp.css */
.admin-monitoring-page[b-9q3m61yqri] {
    padding: 1.5rem;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.admin-eyebrow[b-9q3m61yqri] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.monitoring-header[b-9q3m61yqri] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.monitoring-header h1[b-9q3m61yqri] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.monitoring-header p[b-9q3m61yqri] {
    color: var(--text-secondary);
    margin-bottom: 0;
}

.header-actions[b-9q3m61yqri] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ── Section cards ──────────────────────────────────────────────────────── */

.section-card[b-9q3m61yqri] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.section-card-header[b-9q3m61yqri] {
    background: rgba(var(--bg-secondary-rgb), 0.6);
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

.section-card .card-body[b-9q3m61yqri] {
    padding: 1.25rem;
}

/* ── Summary cards ──────────────────────────────────────────────────────── */

.summary-card[b-9q3m61yqri] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    text-align: center;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    height: 100%;
}

.summary-card:hover[b-9q3m61yqri] {
    box-shadow: var(--card-shadow);
    transform: translateY(-2px);
}

.summary-icon[b-9q3m61yqri] {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    line-height: 1;
}

.summary-value[b-9q3m61yqri] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 0.25rem;
    word-break: break-all;
}

.summary-label[b-9q3m61yqri] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Accent variants */
.summary-card.accent-total[b-9q3m61yqri] {
    border-color: rgba(var(--primary-color-rgb), 0.3);
    background: rgba(var(--primary-color-rgb), 0.04);
}

.summary-card.accent-total .summary-icon[b-9q3m61yqri] {
    color: var(--primary-color);
}

.summary-card.accent-recent[b-9q3m61yqri] {
    border-color: rgba(var(--success-color-rgb, 25, 135, 84), 0.3);
}

.summary-card.accent-recent .summary-icon[b-9q3m61yqri] {
    color: var(--success-color, #198754);
}

.summary-card.accent-success[b-9q3m61yqri] {
    border-color: rgba(var(--success-color-rgb, 25, 135, 84), 0.3);
    background: rgba(var(--success-color-rgb, 25, 135, 84), 0.05);
}

.summary-card.accent-success .summary-icon[b-9q3m61yqri],
.summary-card.accent-success .summary-value[b-9q3m61yqri] {
    color: var(--success-color, #198754);
}

.summary-card.accent-warning[b-9q3m61yqri] {
    border-color: rgba(var(--warning-color-rgb, 255, 193, 7), 0.4);
    background: rgba(var(--warning-color-rgb, 255, 193, 7), 0.06);
}

.summary-card.accent-warning .summary-icon[b-9q3m61yqri],
.summary-card.accent-warning .summary-value[b-9q3m61yqri] {
    color: var(--warning-color, #ffc107);
}

.summary-card.accent-danger[b-9q3m61yqri] {
    border-color: rgba(var(--danger-color-rgb, 220, 53, 69), 0.3);
    background: rgba(var(--danger-color-rgb, 220, 53, 69), 0.05);
}

.summary-card.accent-danger .summary-icon[b-9q3m61yqri],
.summary-card.accent-danger .summary-value[b-9q3m61yqri] {
    color: var(--danger-color, #dc3545);
}

/* ── Health tiles ───────────────────────────────────────────────────────── */

.health-tile[b-9q3m61yqri] {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    text-align: center;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.health-tile:hover[b-9q3m61yqri] {
    box-shadow: var(--card-shadow);
    transform: translateY(-2px);
}

.health-tile.healthy[b-9q3m61yqri] {
    border-color: rgba(var(--success-color-rgb, 25, 135, 84), 0.5);
    background: rgba(var(--success-color-rgb, 25, 135, 84), 0.05);
}

.health-tile.unhealthy[b-9q3m61yqri] {
    border-color: rgba(var(--danger-color-rgb, 220, 53, 69), 0.5);
    background: rgba(var(--danger-color-rgb, 220, 53, 69), 0.05);
}

.health-tile.info[b-9q3m61yqri] {
    border-color: rgba(var(--primary-color-rgb), 0.3);
    background: rgba(var(--primary-color-rgb), 0.04);
}

.health-icon[b-9q3m61yqri] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.health-tile.healthy .health-icon[b-9q3m61yqri] {
    color: var(--success-color, #198754);
}

.health-tile.unhealthy .health-icon[b-9q3m61yqri] {
    color: var(--danger-color, #dc3545);
}

.health-tile.info .health-icon[b-9q3m61yqri] {
    color: var(--primary-color);
}

.health-label[b-9q3m61yqri] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.health-status[b-9q3m61yqri] {
    font-size: 0.875rem;
    font-weight: 700;
}

.health-tile.healthy .health-status[b-9q3m61yqri] {
    color: var(--success-color, #198754);
}

.health-tile.unhealthy .health-status[b-9q3m61yqri] {
    color: var(--danger-color, #dc3545);
}

.health-tile.info .health-status[b-9q3m61yqri] {
    color: var(--primary-color);
}

/* ── Spinner animation ──────────────────────────────────────────────────── */

.spin[b-9q3m61yqri] {
    animation: spin 1s linear infinite;
}

@@keyframes spin {
    from[b-9q3m61yqri] { transform: rotate(0deg); }
    to[b-9q3m61yqri]   { transform: rotate(360deg); }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@@media (max-width: 767.98px) {
    .admin-monitoring-page[b-9q3m61yqri] {
        padding: 1rem;
    }

    .monitoring-header h1[b-9q3m61yqri] {
        font-size: 1.4rem;
    }

    .summary-value[b-9q3m61yqri] {
        font-size: 1.1rem;
    }

    .section-card .card-body[b-9q3m61yqri] {
        padding: 1rem;
    }
}

@@media (max-width: 575.98px) {
    .monitoring-header[b-9q3m61yqri] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-actions[b-9q3m61yqri] {
        justify-content: flex-end;
    }
}
/* /Components/Pages/AdminPromptConfigs.razor.rz.scp.css */
.admin-prompts-page[b-1vy5k5y81q] {
    padding: 2rem 0 3rem;
}

.admin-prompts-header[b-1vy5k5y81q] {
    margin-bottom: 1.5rem;
}

.admin-prompts-eyebrow[b-1vy5k5y81q] {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-prompts-header p[b-1vy5k5y81q] {
    color: var(--text-secondary);
    margin: 0.5rem 0 0;
}

/* ── Section cards ── */

.section-card[b-1vy5k5y81q] {
    border: 1px solid rgba(var(--primary-color-rgb), 0.12);
    box-shadow: var(--card-shadow);
}

/* ── Edit panel ── */

.edit-panel[b-1vy5k5y81q] {
    position: sticky;
    top: 1.25rem;
}

.empty-edit-state[b-1vy5k5y81q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
}

.empty-edit-icon[b-1vy5k5y81q] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.4;
}

.empty-edit-title[b-1vy5k5y81q] {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.35rem;
    color: var(--text-primary);
}

.empty-edit-hint[b-1vy5k5y81q] {
    font-size: 0.875rem;
    margin: 0;
}

.key-label[b-1vy5k5y81q] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.prompt-key-display[b-1vy5k5y81q] {
    font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.8rem;
    background: rgba(var(--bg-secondary-rgb), 0.9);
    border: 1px solid var(--border-color, rgba(0,0,0,0.12));
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    color: var(--text-primary);
    word-break: break-all;
}

.prompt-textarea[b-1vy5k5y81q] {
    font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.8rem;
    resize: vertical;
    min-height: 180px;
}

.placeholders-hint[b-1vy5k5y81q] {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.placeholders-hint code[b-1vy5k5y81q] {
    background: rgba(var(--primary-color-rgb), 0.08);
    border-radius: 3px;
    padding: 0 3px;
    font-size: 0.7rem;
}

/* ── Table ── */

.admin-prompts-table[b-1vy5k5y81q] {
    width: 100%;
    margin-bottom: 0;
    background: var(--card-bg);
}

.admin-prompts-table th[b-1vy5k5y81q] {
    background: rgba(var(--bg-secondary-rgb), 0.8);
    color: var(--text-primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color, rgba(0,0,0,0.1));
}

.admin-prompts-table tbody tr:hover td[b-1vy5k5y81q] {
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.05) 0%,
        rgba(var(--primary-color-rgb), 0.1) 100%);
}

.item-name[b-1vy5k5y81q] {
    font-weight: 600;
}

.item-key[b-1vy5k5y81q] {
    font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 0.1rem;
}

.item-preview[b-1vy5k5y81q] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
}

.item-date[b-1vy5k5y81q] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.action-buttons[b-1vy5k5y81q] {
    display: inline-flex;
    gap: 0.5rem;
}

/* ── Category badges ── */

.category-badge[b-1vy5k5y81q] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.category-system[b-1vy5k5y81q] {
    background: rgba(var(--primary-color-rgb), 0.12);
    color: rgb(var(--primary-color-rgb));
}

.category-style[b-1vy5k5y81q] {
    background: rgba(var(--success-color-rgb), 0.12);
    color: var(--success-color);
}

.category-user-prompt[b-1vy5k5y81q] {
    background: rgba(255, 160, 0, 0.14);
    color: #c77800;
}

.category-other[b-1vy5k5y81q] {
    background: rgba(var(--bg-secondary-rgb), 0.8);
    color: var(--text-secondary);
}

/* ── Filter tabs ── */

.filter-tabs .nav-link[b-1vy5k5y81q] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.85rem;
    border-radius: var(--border-radius-pill);
    color: var(--text-secondary);
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease;
}

.filter-tabs .nav-link:hover[b-1vy5k5y81q] {
    background: rgba(var(--primary-color-rgb), 0.08);
    color: rgb(var(--primary-color-rgb));
}

.filter-tabs .nav-link.active[b-1vy5k5y81q] {
    background: rgba(var(--primary-color-rgb), 0.14);
    color: rgb(var(--primary-color-rgb));
}

/* ── Responsive ── */

@media (max-width: 1199.98px) {
    .edit-panel[b-1vy5k5y81q] {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .admin-prompts-page[b-1vy5k5y81q] {
        padding-top: 1rem;
    }

    .item-preview[b-1vy5k5y81q] {
        max-width: 200px;
    }
}
/* /Components/Pages/AdminSubmissions.razor.rz.scp.css */
.admin-submissions-page[b-p74ww3xacp] {
    padding: 1.5rem;
}

.admin-eyebrow[b-p74ww3xacp] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.admin-submissions-header[b-p74ww3xacp] {
    margin-bottom: 1.5rem;
}

.admin-submissions-header h1[b-p74ww3xacp] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.admin-submissions-header p[b-p74ww3xacp] {
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* ── Table ────────────────────────────────────────────────────────────────── */

.admin-submissions-table[b-p74ww3xacp] {
    width: 100%;
    margin-bottom: 0;
    background: var(--card-bg);
}

.admin-submissions-table th[b-p74ww3xacp] {
    background: rgba(var(--bg-secondary-rgb), 0.8);
    color: var(--text-primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.admin-submissions-table tbody tr:hover td[b-p74ww3xacp] {
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.04) 0%,
        rgba(var(--primary-color-rgb), 0.08) 100%);
}

.admin-submissions-table td[b-p74ww3xacp] {
    vertical-align: middle;
    border-color: var(--border-color);
    transition: background 0.2s ease;
}

.item-name[b-p74ww3xacp] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.item-subject[b-p74ww3xacp] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.item-student[b-p74ww3xacp] {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.item-email[b-p74ww3xacp] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.item-date[b-p74ww3xacp] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ── Status badges ─────────────────────────────────────────────────────────── */

.status-badge[b-p74ww3xacp] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: var(--border-radius-pill, 50rem);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge-submitted[b-p74ww3xacp]   { background: rgba(13, 110, 253, 0.12); color: #0d6efd; }
.status-badge-processed[b-p74ww3xacp]   { background: rgba(25, 135,  84, 0.12); color: #198754; }
.status-badge-archived[b-p74ww3xacp]    { background: rgba(108, 117, 125, 0.12); color: #6c757d; }

.hint-count-badge[b-p74ww3xacp] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ── Action buttons ────────────────────────────────────────────────────────── */

.action-buttons[b-p74ww3xacp] {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
}

/* ── Detail panel ──────────────────────────────────────────────────────────── */

.detail-row td[b-p74ww3xacp] {
    padding: 0 !important;
    background: rgba(var(--bg-secondary-rgb), 0.4);
    border-top: none;
}

.detail-panel[b-p74ww3xacp] {
    padding: 1.25rem 1.5rem;
    border-top: 2px solid rgba(var(--primary-color-rgb), 0.2);
}

.detail-section-title[b-p74ww3xacp] {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.detail-text-content[b-p74ww3xacp] {
    font-size: 0.85rem;
    background: rgba(var(--bg-secondary-rgb), 0.6);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.875rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 240px;
    overflow-y: auto;
    color: var(--text-primary);
}

/* ── Hint detail cards ─────────────────────────────────────────────────────── */

.hint-detail-card[b-p74ww3xacp] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.875rem 1rem;
    margin-bottom: 0.625rem;
    transition: box-shadow 0.2s ease;
}

.hint-detail-card:hover[b-p74ww3xacp] {
    box-shadow: var(--card-shadow);
}

.hint-style-label[b-p74ww3xacp] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color);
}

.hint-model-label[b-p74ww3xacp] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-family: monospace;
}

.hint-text-preview[b-p74ww3xacp] {
    font-size: 0.875rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.hint-meta[b-p74ww3xacp] {
    display: flex;
    gap: 1rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .admin-submissions-page[b-p74ww3xacp] {
        padding: 1rem;
    }

    .detail-panel[b-p74ww3xacp] {
        padding: 1rem;
    }
}
/* /Components/Pages/AdminUsers.razor.rz.scp.css */
.admin-users-page[b-yvyjj2u1zg] {
    padding: 2rem 0 3rem;
}

.admin-users-header[b-yvyjj2u1zg] {
    margin-bottom: 1.5rem;
}

.admin-users-eyebrow[b-yvyjj2u1zg] {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-users-header p[b-yvyjj2u1zg] {
    color: var(--text-secondary);
    margin: 0.5rem 0 0;
}

.section-card[b-yvyjj2u1zg] {
    border: 1px solid rgba(var(--primary-color-rgb), 0.12);
    box-shadow: var(--card-shadow);
}

.admin-users-table[b-yvyjj2u1zg] {
    width: 100%;
    margin-bottom: 0;
    background: var(--card-bg);
}

.admin-users-table th[b-yvyjj2u1zg] {
    background: rgba(var(--bg-secondary-rgb), 0.8);
    color: var(--text-primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
}

.admin-users-table tbody tr:hover td[b-yvyjj2u1zg] {
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.05) 0%,
        rgba(var(--primary-color-rgb), 0.1) 100%);
}

.item-name[b-yvyjj2u1zg] {
    font-weight: 600;
}

.item-email[b-yvyjj2u1zg],
.item-date[b-yvyjj2u1zg] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.action-buttons[b-yvyjj2u1zg] {
    display: inline-flex;
    gap: 0.5rem;
}

.status-badge[b-yvyjj2u1zg] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    gap: 0.25rem;
    transition: all 0.3s ease;
}

.role-badge[b-yvyjj2u1zg] {
    background: rgba(var(--primary-color-rgb), 0.12);
    color: var(--text-primary);
}

.is-active[b-yvyjj2u1zg] {
    background: rgba(var(--success-color-rgb), 0.15);
    color: var(--success-color);
}

.is-inactive[b-yvyjj2u1zg] {
    background: rgba(var(--danger-color-rgb), 0.14);
    color: var(--danger-color);
}

@media (max-width: 767.98px) {
    .admin-users-page[b-yvyjj2u1zg] {
        padding-top: 1rem;
    }
}
/* /Components/Pages/AssignmentCreate.razor.rz.scp.css */
.assignment-create-page[b-m5717ysbpw] {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem;
    animation: fadeIn 0.3s ease;
}

.assignment-create-page h1[b-m5717ysbpw] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.assignment-create-page .card[b-m5717ysbpw] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
}

.assignment-create-page .card-body[b-m5717ysbpw] {
    padding: 1.5rem;
}

.assignment-create-page .form-label[b-m5717ysbpw] {
    color: var(--text-primary);
}

.assignment-create-page .form-text[b-m5717ysbpw] {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.assignment-create-page .form-control[b-m5717ysbpw] {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.assignment-create-page .form-control:focus[b-m5717ysbpw] {
    border-color: rgb(var(--primary-color-rgb));
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.15);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

@media (max-width: 575.98px) {
    .assignment-create-page[b-m5717ysbpw] {
        padding: 1rem;
    }

    .assignment-create-page .card-body[b-m5717ysbpw] {
        padding: 1.25rem;
    }
}

/* /Components/Pages/AssignmentReview.razor.rz.scp.css */
.assignment-review-page[b-wayjitg0sm] {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem;
    animation: fadeIn 0.3s ease;
}

.assignment-review-page h1[b-wayjitg0sm] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* ── Assignment details (collapsible) ─────────────────────────────────── */

.assignment-details[b-wayjitg0sm] {
    cursor: pointer;
}

.assignment-details-summary[b-wayjitg0sm] {
    list-style: none;
}

.assignment-details-summary[b-wayjitg0sm]::-webkit-details-marker {
    display: none;
}

.assignment-details-header[b-wayjitg0sm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.assignment-details-header h2[b-wayjitg0sm] {
    color: var(--text-primary);
}

.assignment-details-body[b-wayjitg0sm] {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

.assignment-section[b-wayjitg0sm] {
    margin-bottom: 1.25rem;
}

.assignment-section h5[b-wayjitg0sm] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.assignment-section-text[b-wayjitg0sm] {
    color: var(--text-secondary, var(--text-primary));
    font-size: 0.9375rem;
    white-space: pre-wrap;
    margin: 0;
}

.subject-badge[b-wayjitg0sm] {
    display: inline-block;
    background: rgba(var(--primary-color-rgb), 0.12);
    color: rgb(var(--primary-color-rgb));
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
}

.assignment-status-badge[b-wayjitg0sm] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.assignment-status-badge.status-active[b-wayjitg0sm] {
    background: rgba(var(--success-color-rgb), 0.12);
    color: rgb(var(--success-color-rgb));
}

.assignment-status-badge.status-draft[b-wayjitg0sm] {
    background: rgba(var(--warning-color-rgb), 0.12);
    color: rgb(var(--warning-color-rgb));
}

/* ── Attempt textarea ────────────────────────────────────────────────── */

.attempt-textarea[b-wayjitg0sm] {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
    resize: vertical;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.attempt-textarea:focus[b-wayjitg0sm] {
    border-color: rgb(var(--primary-color-rgb));
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.15);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* ── Review cards ────────────────────────────────────────────────────── */

.review-card[b-wayjitg0sm] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    animation: fadeIn 0.3s ease;
}

.review-card-header[b-wayjitg0sm] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.06), rgba(var(--primary-color-rgb), 0.1));
    border-bottom: 1px solid var(--border-color);
}

.review-date[b-wayjitg0sm],
.review-model[b-wayjitg0sm] {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.review-attempt-toggle[b-wayjitg0sm] {
    font-size: 0.8125rem;
    padding: 0;
    color: rgb(var(--primary-color-rgb));
    text-decoration: none;
    margin-left: auto;
}

.review-attempt-text[b-wayjitg0sm] {
    padding: 0.75rem 1.25rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
    color: var(--text-primary);
}

.review-attempt-text p[b-wayjitg0sm] {
    margin: 0.4rem 0 0;
    white-space: pre-wrap;
}

.review-card-body[b-wayjitg0sm] {
    padding: 1.25rem;
}

.review-card-footer[b-wayjitg0sm] {
    padding: 0 1.25rem 1.25rem;
}

@media (max-width: 575.98px) {
    .assignment-review-page[b-wayjitg0sm] {
        padding: 1rem;
    }

    .assignment-details-header[b-wayjitg0sm] {
        flex-direction: column;
    }

    .review-card-header[b-wayjitg0sm] {
        flex-direction: column;
        align-items: flex-start;
    }

    .review-attempt-toggle[b-wayjitg0sm] {
        margin-left: 0;
    }
}

/* ── Attachment zones ─────────────────────────────────────────────────── */

.section-attachments[b-wayjitg0sm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-height: 2rem;
}

.attachment-chip[b-wayjitg0sm] {
    background: rgba(var(--primary-color-rgb), 0.08);
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
    border-radius: var(--border-radius-pill, 1rem);
    padding: 0.2rem 0.5rem;
    font-size: 0.8125rem;
    transition: background 0.2s ease;
}

.attachment-chip a[b-wayjitg0sm] {
    color: var(--text-primary);
    text-decoration: none;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

.attachment-chip a:hover[b-wayjitg0sm] {
    text-decoration: underline;
    color: var(--primary-color);
}
/* /Components/Pages/Assignments.razor.rz.scp.css */
.assignments-page[b-p2bfdkv036] {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem;
    animation: fadeIn 0.3s ease;
}

.page-header[b-p2bfdkv036] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.page-header h1[b-p2bfdkv036] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.assignments-list[b-p2bfdkv036] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.assignment-card[b-p2bfdkv036] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.assignment-card:hover[b-p2bfdkv036] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.assignment-card-header[b-p2bfdkv036] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1.25rem 0.75rem;
    gap: 1rem;
}

.assignment-card-header h3[b-p2bfdkv036] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.4rem;
}

.subject-badge[b-p2bfdkv036] {
    display: inline-block;
    background: rgba(var(--primary-color-rgb), 0.12);
    color: rgb(var(--primary-color-rgb));
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
}

.assignment-status-badge[b-p2bfdkv036] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.assignment-status-badge.status-active[b-p2bfdkv036] {
    background: rgba(var(--success-color-rgb), 0.12);
    color: rgb(var(--success-color-rgb));
}

.assignment-status-badge.status-draft[b-p2bfdkv036] {
    background: rgba(var(--warning-color-rgb), 0.12);
    color: rgb(var(--warning-color-rgb));
}

.assignment-status-badge.status-archived[b-p2bfdkv036] {
    background: rgba(var(--text-muted-rgb, 128, 128, 128), 0.12);
    color: var(--text-muted);
}

.assignment-card-body[b-p2bfdkv036] {
    padding: 0 1.25rem 0.75rem;
    display: flex;
    gap: 1.5rem;
}

.assignment-date[b-p2bfdkv036],
.assignment-reviews[b-p2bfdkv036] {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
}

.assignment-card-footer[b-p2bfdkv036] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-color);
    background: rgba(var(--bg-secondary-rgb), 0.5);
}

.delete-confirm[b-p2bfdkv036] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: fadeIn 0.2s ease;
}

.delete-confirm-text[b-p2bfdkv036] {
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.empty-state[b-p2bfdkv036] {
    text-align: center;
    padding: 4rem 2rem;
    animation: fadeIn 0.3s ease;
}

.empty-icon[b-p2bfdkv036] {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.empty-state h2[b-p2bfdkv036] {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.empty-state p[b-p2bfdkv036] {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

@media (max-width: 767.98px) {
    .assignments-page[b-p2bfdkv036] {
        padding: 1rem;
    }

    .page-header[b-p2bfdkv036] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .page-header .btn[b-p2bfdkv036] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .page-header[b-p2bfdkv036] {
        flex-direction: column;
        align-items: flex-start;
    }

    .assignment-card-body[b-p2bfdkv036] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .assignment-card-footer[b-p2bfdkv036] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .assignment-card-footer .btn[b-p2bfdkv036] {
        flex: 1;
        min-width: 0;
    }
}

/* ── Class grouping ── */
.class-group[b-p2bfdkv036] {
    margin-bottom: 2rem;
}

.class-group-heading[b-p2bfdkv036] {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding: 0.4rem 0.75rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.05);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    display: flex;
    align-items: center;
}

@media (max-width: 575.98px) {
    .class-group-heading[b-p2bfdkv036] {
        font-size: 0.8rem;
    }
}
/* /Components/Pages/ClassDetail.razor.rz.scp.css */
.class-detail-page[b-p0c5yehzjn] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

/* ── Status Panels ── */
.status-panel[b-p0c5yehzjn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

.status-panel-loading[b-p0c5yehzjn] {
    background: rgba(var(--primary-color-rgb), 0.08);
    color: var(--text-primary);
}

.status-panel-error[b-p0c5yehzjn] {
    background: rgba(220, 53, 69, 0.1);
    color: var(--bs-danger);
    border: 1px solid rgba(220, 53, 69, 0.25);
}

.loading-spinner[b-p0c5yehzjn] {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid rgba(var(--primary-color-rgb), 0.2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-p0c5yehzjn 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-b-p0c5yehzjn {
    to { transform: rotate(360deg); }
}

/* ── Back Link ── */
.back-link[b-p0c5yehzjn] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.back-link:hover[b-p0c5yehzjn] {
    color: var(--primary-color);
}

/* ── Class Header ── */
.class-header-card[b-p0c5yehzjn] {
    background: var(--primary-gradient);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--card-shadow);
}

.class-header-inner[b-p0c5yehzjn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.class-header-title[b-p0c5yehzjn] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.class-header-meta[b-p0c5yehzjn] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.class-subject-chip[b-p0c5yehzjn],
.class-year-chip[b-p0c5yehzjn],
.class-teacher-chip[b-p0c5yehzjn] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.7rem;
    border-radius: var(--border-radius-pill, 20px);
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.class-teacher-chip.self-managed[b-p0c5yehzjn] {
    background: rgba(255, 255, 255, 0.15);
}

.class-header-desc[b-p0c5yehzjn] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    margin-top: 0.25rem;
}

/* ── Edit Form ── */
.edit-form-card[b-p0c5yehzjn] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    animation: fadeIn-b-p0c5yehzjn 0.2s ease;
}

.edit-form-title[b-p0c5yehzjn] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

/* ── Tabs ── */
.class-tabs[b-p0c5yehzjn] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.class-tabs[b-p0c5yehzjn]::-webkit-scrollbar {
    display: none;
}

.class-tab[b-p0c5yehzjn] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.class-tab:hover[b-p0c5yehzjn] {
    color: var(--primary-color);
}

.class-tab.active[b-p0c5yehzjn] {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

.tab-count[b-p0c5yehzjn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--primary-color-rgb), 0.12);
    color: var(--primary-color);
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.3rem;
}

/* ── Tab Content ── */
.tab-content-panel[b-p0c5yehzjn] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
}

.tab-header[b-p0c5yehzjn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.tab-section-title[b-p0c5yehzjn] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.tab-loading[b-p0c5yehzjn] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

.tab-empty[b-p0c5yehzjn] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 1.5rem 0;
    text-align: center;
}

/* ── Item List ── */
.item-list[b-p0c5yehzjn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.item-row[b-p0c5yehzjn] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary, rgba(var(--bg-secondary-rgb), 0.4));
    border: 1px solid var(--border-color);
    border-radius: calc(var(--border-radius) - 2px);
    text-decoration: none;
    color: inherit;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.item-row:hover[b-p0c5yehzjn] {
    background: rgba(var(--primary-color-rgb), 0.06);
    border-color: rgba(var(--primary-color-rgb), 0.3);
    transform: translateX(2px);
    color: inherit;
    text-decoration: none;
}

.item-row-main[b-p0c5yehzjn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.item-title[b-p0c5yehzjn] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}

.item-subject-tag[b-p0c5yehzjn] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    border-radius: var(--border-radius-pill, 20px);
    background: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.item-row-meta[b-p0c5yehzjn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.item-status-badge[b-p0c5yehzjn] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    border-radius: var(--border-radius-pill, 20px);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.status-submitted[b-p0c5yehzjn], .status-active[b-p0c5yehzjn] {
    background: rgba(25, 135, 84, 0.12);
    color: var(--bs-success, #198754);
}

.status-processed[b-p0c5yehzjn] {
    background: rgba(var(--primary-color-rgb), 0.12);
    color: var(--primary-color);
}

.status-archived[b-p0c5yehzjn], .status-draft[b-p0c5yehzjn] {
    background: rgba(108, 117, 125, 0.12);
    color: #6c757d;
}

.item-snippet[b-p0c5yehzjn] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 300px;
}

.item-date[b-p0c5yehzjn] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
    margin-left: auto;
}

.item-meta-pill[b-p0c5yehzjn] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    background: rgba(var(--bg-secondary-rgb), 0.6);
    border-radius: var(--border-radius-pill, 20px);
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

@keyframes fadeIn-b-p0c5yehzjn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
/* ── Join Code Panel ── */
.join-code-panel[b-p0c5yehzjn] {
    background: rgba(var(--primary-color-rgb), 0.04);
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
    border-radius: var(--border-radius);
    animation: fadeIn-b-p0c5yehzjn 0.2s ease;
}

.letter-spacing-wide[b-p0c5yehzjn] {
    letter-spacing: 0.2em;
    user-select: all;
}

[data-theme="dark"] .join-code-panel[b-p0c5yehzjn] {
    background: rgba(var(--primary-color-rgb), 0.08);
    border-color: rgba(var(--primary-color-rgb), 0.25);
}

/* ── Member Row ── */
.member-row[b-p0c5yehzjn] {
    /* inherits .item-row — override pointer and hover to suit non-link rows */
    cursor: default;
    text-decoration: none;
    color: inherit;
}

.member-row:hover[b-p0c5yehzjn] {
    background: rgba(var(--primary-color-rgb), 0.04);
    border-color: rgba(var(--primary-color-rgb), 0.2);
    transform: none;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
    .class-header-card[b-p0c5yehzjn] {
        padding: 1.1rem;
    }

    .class-header-title[b-p0c5yehzjn] {
        font-size: 1.35rem;
    }

    .tab-header[b-p0c5yehzjn] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .tab-header .btn[b-p0c5yehzjn] {
        width: 100%;
        justify-content: center;
    }

    .item-snippet[b-p0c5yehzjn] {
        max-width: 200px;
    }
}

@media (max-width: 575.98px) {
    .class-detail-page[b-p0c5yehzjn] {
        padding: 1rem 0.75rem;
    }

    .class-header-card[b-p0c5yehzjn] {
        padding: 1rem 0.875rem;
    }

    .class-header-title[b-p0c5yehzjn] {
        font-size: 1.15rem;
    }

    .class-header-meta[b-p0c5yehzjn] {
        gap: 0.35rem;
    }

    .class-subject-chip[b-p0c5yehzjn],
    .class-year-chip[b-p0c5yehzjn],
    .class-teacher-chip[b-p0c5yehzjn] {
        font-size: 0.72rem;
        padding: 0.15rem 0.5rem;
    }

    .class-tabs[b-p0c5yehzjn] {
        gap: 0;
    }

    .class-tab[b-p0c5yehzjn] {
        padding: 0.5rem 0.6rem;
        font-size: 0.8rem;
    }

    .tab-content-panel[b-p0c5yehzjn] {
        padding: 0.875rem 0.75rem;
    }

    .item-snippet[b-p0c5yehzjn] {
        display: none;
    }

    .item-date[b-p0c5yehzjn] {
        margin-left: 0;
        width: 100%;
    }

    .item-row-main[b-p0c5yehzjn] {
        flex-wrap: wrap;
    }

    .item-title[b-p0c5yehzjn] {
        font-size: 0.9rem;
        width: 100%;
    }

    /* Stack edit form action buttons */
    .edit-form-card .d-flex.gap-2[b-p0c5yehzjn] {
        flex-direction: column;
    }

    .edit-form-card .d-flex.gap-2 .btn[b-p0c5yehzjn] {
        width: 100%;
    }

    /* Owner action buttons in class header */
    .class-header-card .d-flex.gap-2[b-p0c5yehzjn] {
        flex-direction: column;
    }

    .class-header-card .d-flex.gap-2 .btn[b-p0c5yehzjn] {
        width: 100%;
    }
}
/* /Components/Pages/Help.razor.rz.scp.css */
.help-page[b-mcxhylhiqy] {
    max-width: 860px;
    margin: 0 auto;
    padding-bottom: 3rem;
}

/* ── Hero ─────────────────────────────────────────────── */
.help-hero[b-mcxhylhiqy] {
    background: var(--primary-gradient);
    border-radius: var(--border-radius);
    padding: 2rem 2.5rem;
    margin-bottom: 1.75rem;
    color: white;
}

.help-hero h1[b-mcxhylhiqy] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: white;
}

.help-hero-subtitle[b-mcxhylhiqy] {
    margin: 0;
    opacity: 0.9;
    font-size: 1rem;
}

/* ── Section nav pills ────────────────────────────────── */
.help-nav-pills[b-mcxhylhiqy] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.help-pill[b-mcxhylhiqy] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1.1rem;
    border-radius: var(--border-radius-pill, 50rem);
    border: 2px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.help-pill:hover[b-mcxhylhiqy] {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.help-pill.active[b-mcxhylhiqy] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* ── Intro card ──────────────────────────────────────── */
.help-intro-card[b-mcxhylhiqy] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: rgba(var(--primary-color-rgb), 0.07);
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
    border-radius: var(--border-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.help-intro-card-parent[b-mcxhylhiqy] {
    background: rgba(var(--success-color-rgb, 40, 167, 69), 0.07);
    border-color: rgba(var(--success-color-rgb, 40, 167, 69), 0.2);
}

.help-intro-icon[b-mcxhylhiqy] {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
    color: var(--primary-color);
}

.help-intro-card-parent .help-intro-icon[b-mcxhylhiqy] {
    color: var(--bs-success);
}

/* ── Accordion ───────────────────────────────────────── */
.help-accordion[b-mcxhylhiqy] {
    --bs-accordion-bg: var(--card-bg);
    --bs-accordion-border-color: var(--border-color);
    --bs-accordion-color: var(--text-primary);
    --bs-accordion-btn-color: var(--text-primary);
    --bs-accordion-btn-bg: var(--card-bg);
    --bs-accordion-active-bg: rgba(var(--primary-color-rgb), 0.06);
    --bs-accordion-active-color: var(--primary-color);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
}

.help-accordion .accordion-button:not(.collapsed)[b-mcxhylhiqy] {
    color: var(--primary-color);
    background-color: rgba(var(--primary-color-rgb), 0.06);
}

/* ── Steps list ──────────────────────────────────────── */
.help-steps[b-mcxhylhiqy] {
    padding-left: 1.4rem;
    margin-bottom: 0;
}

.help-steps li[b-mcxhylhiqy] {
    margin-bottom: 0.6rem;
    line-height: 1.6;
}

.help-steps li:last-child[b-mcxhylhiqy] {
    margin-bottom: 0;
}

/* ── Tip box ─────────────────────────────────────────── */
.help-tip[b-mcxhylhiqy] {
    background: rgba(var(--primary-color-rgb), 0.06);
    border-left: 3px solid var(--primary-color);
    border-radius: 0 var(--border-radius-sm, 4px) var(--border-radius-sm, 4px) 0;
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-top: 0.75rem;
}

/* ── Explanation style cards ─────────────────────────── */
.help-style-grid[b-mcxhylhiqy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.help-style-card[b-mcxhylhiqy] {
    background: var(--bg-secondary, var(--card-bg));
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.85rem;
    text-align: center;
    transition: border-color 0.2s, transform 0.2s;
}

.help-style-card:hover[b-mcxhylhiqy] {
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.help-style-icon[b-mcxhylhiqy] {
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
}

.help-style-name[b-mcxhylhiqy] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}

.help-style-desc[b-mcxhylhiqy] {
    font-size: 0.78rem;
    color: var(--text-muted, #6c757d);
    line-height: 1.4;
}

/* ── DL (definitions) ────────────────────────────────── */
.help-dl dt[b-mcxhylhiqy] {
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 1rem;
}

.help-dl dt:first-child[b-mcxhylhiqy] {
    margin-top: 0;
}

.help-dl dd[b-mcxhylhiqy] {
    margin-left: 0.5rem;
    color: var(--text-muted, #6c757d);
    line-height: 1.6;
    margin-bottom: 0;
}

/* ── Table ───────────────────────────────────────────── */
.help-table[b-mcxhylhiqy] {
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.help-table th[b-mcxhylhiqy] {
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(var(--bg-secondary-rgb), 0.5);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 575.98px) {
    .help-hero[b-mcxhylhiqy] {
        padding: 1.5rem 1.25rem;
    }

    .help-hero h1[b-mcxhylhiqy] {
        font-size: 1.4rem;
    }

    .help-style-grid[b-mcxhylhiqy] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/HintsFeature.razor.rz.scp.css */
.feature-detail-page[b-tchdstw9jr] {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.detail-hero[b-tchdstw9jr],
.detail-card[b-tchdstw9jr] {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(var(--primary-color-rgb), 0.12);
    padding: 1.5rem;
}

.detail-hero p[b-tchdstw9jr],
.detail-card p[b-tchdstw9jr],
.detail-card li[b-tchdstw9jr] {
    color: var(--text-secondary);
    line-height: 1.6;
}

.detail-grid[b-tchdstw9jr] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.detail-card h2[b-tchdstw9jr] {
    margin-bottom: 0.75rem;
}

.detail-card ul[b-tchdstw9jr],
.detail-card ol[b-tchdstw9jr] {
    margin-bottom: 0;
    padding-left: 1.2rem;
}

.actions[b-tchdstw9jr] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    .detail-hero[b-tchdstw9jr],
    .detail-card[b-tchdstw9jr] {
        padding: 1.25rem;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home-page[b-dyqpb85qog] {
    display: grid;
    gap: 2rem;
    margin: 1.5rem 0 2.5rem;
}

.hero-section[b-dyqpb85qog],
.overview-section[b-dyqpb85qog],
.closing-section[b-dyqpb85qog] {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    padding: 2rem;
}

.hero-section[b-dyqpb85qog] {
    text-align: center;
}

.hero-section h1[b-dyqpb85qog] {
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.subtitle[b-dyqpb85qog] {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 52rem;
    margin: 0 auto;
}

.cta-buttons[b-dyqpb85qog] {
    margin-top: 1.75rem;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.overview-section h2[b-dyqpb85qog],
.closing-section h2[b-dyqpb85qog] {
    margin-bottom: 1rem;
}

.overview-grid[b-dyqpb85qog] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.overview-card[b-dyqpb85qog] {
    border: 1px solid rgba(var(--primary-color-rgb), 0.15);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    background: linear-gradient(145deg, rgba(var(--bg-secondary-rgb), 0.75) 0%, rgba(var(--primary-color-rgb), 0.06) 100%);
}

.overview-card h3[b-dyqpb85qog] {
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
}

.overview-card p[b-dyqpb85qog],
.closing-section p[b-dyqpb85qog] {
    margin: 0;
    line-height: 1.6;
    color: var(--text-secondary);
}

.features-section[b-dyqpb85qog] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.feature-card[b-dyqpb85qog] {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
    padding: 1.5rem;
    display: grid;
    gap: 0.75rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover[b-dyqpb85qog] {
    transform: translateY(-3px);
    box-shadow: 0 1.25rem 2.75rem rgba(var(--primary-color-rgb), 0.12);
}

.feature-icon[b-dyqpb85qog] {
    font-size: 2rem;
}

.feature-card h3[b-dyqpb85qog] {
    margin: 0;
}

.feature-card p[b-dyqpb85qog] {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.feature-link[b-dyqpb85qog] {
    width: fit-content;
    text-decoration: none;
    font-weight: 600;
    color: rgb(var(--primary-color-rgb));
}

.feature-link:hover[b-dyqpb85qog],
.feature-link:focus[b-dyqpb85qog] {
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .hero-section[b-dyqpb85qog],
    .overview-section[b-dyqpb85qog],
    .closing-section[b-dyqpb85qog] {
        padding: 1.5rem;
    }

    .subtitle[b-dyqpb85qog] {
        font-size: 1rem;
    }
}
/* /Components/Pages/HomeworkAttempts.razor.rz.scp.css */
.attempts-page[b-7rbumuq014] {
    max-width: 800px;
    margin: 0 auto;
    animation: fadeIn-b-7rbumuq014 0.3s ease;
}

/* Page header */
.page-header[b-7rbumuq014] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-header h1[b-7rbumuq014] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.page-subtitle[b-7rbumuq014] {
    color: var(--text-secondary);
    margin-bottom: 0;
    font-size: 0.95rem;
}

/* Card header accent */
.attempts-card-header[b-7rbumuq014] {
    background: var(--primary-gradient);
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* Count badge in header */
.attempt-count-badge[b-7rbumuq014] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
    font-weight: 700;
    vertical-align: middle;
}

/* Textarea */
.attempt-textarea[b-7rbumuq014] {
    resize: vertical;
    min-height: 8rem;
    background: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.attempt-textarea:focus[b-7rbumuq014] {
    border-color: rgba(var(--primary-color-rgb), 0.6);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.15);
    background: var(--input-bg);
    color: var(--text-primary);
}

/* Empty state */
.empty-state[b-7rbumuq014] {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-secondary);
}

.empty-icon[b-7rbumuq014] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

/* Attempts list */
.attempts-list[b-7rbumuq014] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Individual attempt */
.attempt-item[b-7rbumuq014] {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    background: var(--card-bg);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    animation: slideIn-b-7rbumuq014 0.25s ease;
}

.attempt-item:hover[b-7rbumuq014] {
    box-shadow: var(--card-shadow);
    transform: translateY(-1px);
}

.attempt-meta[b-7rbumuq014] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.attempt-number[b-7rbumuq014] {
    font-weight: 600;
    font-size: 0.85rem;
    color: rgba(var(--primary-color-rgb), 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.attempt-date[b-7rbumuq014] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.attempt-text[b-7rbumuq014] {
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 0;
    white-space: pre-wrap;
}

/* Feedback panel */
.feedback-panel[b-7rbumuq014] {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: var(--border-radius);
    background: rgba(var(--primary-color-rgb), 0.05);
    border: 1px solid rgba(var(--primary-color-rgb), 0.15);
}

.feedback-header[b-7rbumuq014] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.correctness-badge[b-7rbumuq014] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.6rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(var(--primary-color-rgb), 0.15);
    color: rgba(var(--primary-color-rgb), 1);
}

.feedback-text[b-7rbumuq014] {
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.feedback-section[b-7rbumuq014] {
    margin-top: 0.75rem;
    color: var(--text-primary);
}

.feedback-section ul[b-7rbumuq014] {
    margin-top: 0.35rem;
    padding-left: 1.25rem;
}

.feedback-section li[b-7rbumuq014] {
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
}

.feedback-section p[b-7rbumuq014] {
    margin-top: 0.35rem;
    font-size: 0.9rem;
}

/* Status panels */
.status-panel[b-7rbumuq014] {
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-panel-loading[b-7rbumuq014] {
    background: rgba(var(--bg-secondary-rgb), 0.8);
    color: var(--text-secondary);
}

.status-panel-error[b-7rbumuq014] {
    background: rgba(var(--danger-color-rgb), 0.1);
    color: var(--danger-color);
    border: 1px solid rgba(var(--danger-color-rgb), 0.2);
}

.status-panel-success[b-7rbumuq014] {
    background: rgba(var(--success-color-rgb), 0.1);
    color: var(--success-color);
    border: 1px solid rgba(var(--success-color-rgb), 0.2);
}

.loading-spinner[b-7rbumuq014] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border-color);
    border-top-color: rgba(var(--primary-color-rgb), 1);
    border-radius: 50%;
    animation: spin-b-7rbumuq014 0.7s linear infinite;
    flex-shrink: 0;
}

/* Animations */
@keyframes fadeIn-b-7rbumuq014 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn-b-7rbumuq014 {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes spin-b-7rbumuq014 {
    to { transform: rotate(360deg); }
}

/* Card body padding */
.card-body[b-7rbumuq014] {
    padding: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .page-header[b-7rbumuq014] {
        flex-direction: column;
        align-items: flex-start;
    }

    .attempts-card-header[b-7rbumuq014] {
        padding: 0.875rem 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .card-body[b-7rbumuq014] {
        padding: 1.25rem;
    }

    .attempt-item[b-7rbumuq014] {
        padding: 1rem;
    }

    .attempt-meta[b-7rbumuq014] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pages/HomeworkHelp.razor.rz.scp.css */
.homework-help-page[b-acri3gvgyy] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* ── Homework image preview ─────────────────────────────────────────────── */

.homework-image-toggle[b-acri3gvgyy] {
    background: rgba(var(--primary-color-rgb), 0.07);
    border: 1px solid rgba(var(--primary-color-rgb), 0.3);
    border-radius: var(--border-radius-pill);
    color: rgb(var(--primary-color-rgb));
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.3rem 0.9rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.homework-image-toggle:hover[b-acri3gvgyy] {
    background: rgba(var(--primary-color-rgb), 0.13);
    border-color: rgba(var(--primary-color-rgb), 0.55);
}

.homework-image-panel[b-acri3gvgyy] {
    border-radius: var(--border-radius);
    overflow: hidden;
    line-height: 0;
}

.homework-image-full[b-acri3gvgyy] {
    display: block;
    max-width: 100%;
    max-height: 480px;
    object-fit: contain;
    border: 1px solid rgba(var(--primary-color-rgb), 0.15);
    border-radius: var(--border-radius);
    background: rgba(var(--bg-secondary-rgb), 0.4);
    touch-action: manipulation;
}

@media (max-width: 575.98px) {
    .homework-image-full[b-acri3gvgyy] {
        max-height: 300px;
    }
}

.status-panel[b-acri3gvgyy] {
    align-items: center;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 1rem;
    text-align: center;
}

.status-panel-loading[b-acri3gvgyy] {
    background: rgba(var(--bg-secondary-rgb), 0.5);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.status-panel-error[b-acri3gvgyy] {
    background: rgba(var(--danger-color-rgb), 0.08);
    border: 1px solid rgba(var(--danger-color-rgb), 0.3);
    color: var(--text-primary);
}

.status-panel-success[b-acri3gvgyy] {
    background: rgba(var(--success-color-rgb), 0.12);
    border: 1px solid rgba(var(--success-color-rgb), 0.35);
    color: var(--text-primary);
}

.hint-card[b-acri3gvgyy] {
    border: 1px solid rgba(var(--primary-color-rgb), 0.25);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.hint-card-latest[b-acri3gvgyy] {
    border-color: rgba(var(--primary-color-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.08);
}

/* ── Age-themed hint card variants ──────────────────────────────────────── */

/* Early Learner (5–8) — playful, warm, colourful */
.hint-card-early[b-acri3gvgyy] {
    border-color: #f59e0b;
    border-width: 2px;
    background: linear-gradient(160deg,
        rgba(251, 191, 36, 0.07) 0%,
        rgba(var(--card-bg), 1) 60%);
}

.hint-card-early .hint-age-banner[b-acri3gvgyy] {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 0.35rem 1rem;
    border-radius: calc(var(--border-radius) - 1px) calc(var(--border-radius) - 1px) 0 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    user-select: none;
}

/* Middle Learner (9–13) — encouraging, teal-accented */
.hint-card-middle[b-acri3gvgyy] {
    border-color: #14b8a6;
    border-width: 2px;
    background: linear-gradient(160deg,
        rgba(20, 184, 166, 0.06) 0%,
        rgba(var(--card-bg), 1) 60%);
}

.hint-card-middle .hint-age-banner[b-acri3gvgyy] {
    background: linear-gradient(90deg, #14b8a6, #2dd4bf);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 0.35rem 1rem;
    border-radius: calc(var(--border-radius) - 1px) calc(var(--border-radius) - 1px) 0 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    user-select: none;
}

/* Older Student (14+) — clean, academic, primary accent */
.hint-card-older[b-acri3gvgyy] {
    border-color: rgba(var(--primary-color-rgb), 0.35);
}

.hint-card-older .hint-age-banner[b-acri3gvgyy] {
    background: rgba(var(--primary-color-rgb), 0.07);
    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.14);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 0.3rem 1rem;
    border-radius: calc(var(--border-radius) - 1px) calc(var(--border-radius) - 1px) 0 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    user-select: none;
}

/* Apply card-body padding reset so the banner sits flush to the card edge */
.hint-card-early .card-body[b-acri3gvgyy],
.hint-card-middle .card-body[b-acri3gvgyy],
.hint-card-older .card-body[b-acri3gvgyy] {
    padding-top: 0;
}

.hint-age-banner-body[b-acri3gvgyy] {
    padding: 1.25rem 1.25rem 0;
}

/* ── Hints history section ──────────────────────────────────────────────── */

.hints-history[b-acri3gvgyy] {
    display: flex;
    flex-direction: column;
}

.hints-history-title[b-acri3gvgyy] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.hint-number[b-acri3gvgyy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--border-radius-pill);
    background: rgba(var(--primary-color-rgb), 0.12);
    color: var(--primary-color);
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hint-latest-badge[b-acri3gvgyy] {
    font-size: 0.7rem;
}

.hint-style-badge[b-acri3gvgyy] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--border-radius-pill);
    background: rgba(var(--bg-secondary-rgb), 0.8);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.25px;
}

.hint-text[b-acri3gvgyy] {
    line-height: 1.7;
}

.hint-timing[b-acri3gvgyy] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: var(--border-radius-pill);
    background: rgba(var(--primary-color-rgb), 0.12);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
}

.hint-feedback-panel[b-acri3gvgyy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--border-radius);
    background: rgba(var(--bg-secondary-rgb), 0.55);
}

.hint-feedback-title[b-acri3gvgyy] {
    font-weight: 600;
    color: var(--text-primary);
}

.hint-feedback-subtitle[b-acri3gvgyy] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

@media (max-width: 767.98px) {
    .hint-feedback-panel[b-acri3gvgyy] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Brain Type Quiz ────────────────────────────────────────────────────── */

.brain-quiz-card[b-acri3gvgyy] {
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.03) 0%,
        rgba(var(--bg-secondary-rgb), 0.4) 100%);
}

.brain-quiz-question-label[b-acri3gvgyy] {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.brain-quiz-q-number[b-acri3gvgyy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--border-radius-pill);
    background: rgba(var(--primary-color-rgb), 0.15);
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.quiz-option-grid[b-acri3gvgyy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.5rem;
}

.quiz-option-btn[b-acri3gvgyy] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--card-bg);
    color: var(--text-primary);
    text-align: left;
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.quiz-option-btn:hover[b-acri3gvgyy] {
    border-color: rgba(var(--primary-color-rgb), 0.5);
    background: rgba(var(--primary-color-rgb), 0.05);
    transform: translateY(-1px);
}

.quiz-option-selected[b-acri3gvgyy] {
    border-color: var(--primary-color) !important;
    background: rgba(var(--primary-color-rgb), 0.1) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.12);
}

.quiz-option-icon[b-acri3gvgyy] {
    font-size: 1.125rem;
    flex-shrink: 0;
    line-height: 1.4;
}

.quiz-option-text[b-acri3gvgyy] {
    line-height: 1.4;
}

/* ── Brain Type Result ──────────────────────────────────────────────────── */

.brain-quiz-result-card[b-acri3gvgyy] {
    border: 1px solid rgba(var(--success-color-rgb), 0.3);
    background: linear-gradient(135deg,
        rgba(var(--success-color-rgb), 0.05) 0%,
        rgba(var(--bg-secondary-rgb), 0.4) 100%);
}

.brain-quiz-result-label[b-acri3gvgyy] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.brain-quiz-result-title[b-acri3gvgyy] {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
}

.brain-quiz-result-icon[b-acri3gvgyy] {
    font-size: 3rem;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.9;
}

@media (max-width: 575.98px) {
    .quiz-option-grid[b-acri3gvgyy] {
        grid-template-columns: 1fr;
    }

    .brain-quiz-result-icon[b-acri3gvgyy] {
        font-size: 2rem;
    }
}
/* ── Whimsical hint generation loader ──────────────────────────────────── */

.hint-loading-panel[b-acri3gvgyy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem 2rem;
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.06) 0%,
        rgba(var(--bg-secondary-rgb), 0.8) 100%);
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
    text-align: center;
    animation: panel-pulse-b-acri3gvgyy 3s ease-in-out infinite;
}

@keyframes panel-pulse-b-acri3gvgyy {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0); }
    50%       { box-shadow: 0 0 0 6px rgba(var(--primary-color-rgb), 0.08); }
}

.hint-loading-emoji[b-acri3gvgyy] {
    font-size: 3.5rem;
    line-height: 1;
    user-select: none;
    animation: brain-float-b-acri3gvgyy 2s ease-in-out infinite;
}

@keyframes brain-float-b-acri3gvgyy {
    0%, 100% { transform: translateY(0)     rotate(-6deg) scale(1);   }
    50%       { transform: translateY(-14px) rotate(6deg)  scale(1.12); }
}

.hint-loading-dots[b-acri3gvgyy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hint-loading-dots span[b-acri3gvgyy] {
    display: block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--primary-color);
    animation: dot-bounce-b-acri3gvgyy 1.4s ease-in-out infinite;
}

.hint-loading-dots span:nth-child(2)[b-acri3gvgyy] { animation-delay: 0.2s; }
.hint-loading-dots span:nth-child(3)[b-acri3gvgyy] { animation-delay: 0.4s; }

@keyframes dot-bounce-b-acri3gvgyy {
    0%, 80%, 100% { transform: translateY(0);        opacity: 0.55; }
    40%           { transform: translateY(-0.875rem); opacity: 1; }
}

.hint-loading-message[b-acri3gvgyy] {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    animation: message-fadein-b-acri3gvgyy 0.4s ease-out;
}

@keyframes message-fadein-b-acri3gvgyy {
    from { opacity: 0; transform: translateY(0.3rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.hint-loading-sub[b-acri3gvgyy] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ── How hints work collapsible ─────────────────────────────────────────── */

.hint-how-it-works[b-acri3gvgyy] {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--card-bg);
    margin-bottom: 1rem;
}

.hint-how-it-works-summary[b-acri3gvgyy] {
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    user-select: none;
}

.hint-how-it-works-summary[b-acri3gvgyy]::-webkit-details-marker { display: none; }

.hint-how-it-works[open] .hint-how-it-works-summary[b-acri3gvgyy] {
    border-bottom: 1px solid var(--border-color);
    color: var(--primary-color);
}

.hint-how-it-works-body[b-acri3gvgyy] {
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    line-height: 1.65;
}

.hint-how-it-works-body ul[b-acri3gvgyy] {
    padding-left: 1.3rem;
    margin-bottom: 0;
}

.hint-how-it-works-body li[b-acri3gvgyy] {
    margin-bottom: 0.3rem;
}

/* ── Tab navigation ─────────────────────────────────────────────────────── */

.nav-tabs .nav-link[b-acri3gvgyy] {
    color: var(--text-secondary);
    font-weight: 600;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    transition: color 0.2s ease, background 0.2s ease;
}

.nav-tabs .nav-link:hover[b-acri3gvgyy] {
    color: var(--text-primary);
    background: rgba(var(--bg-secondary-rgb), 0.5);
    border-color: var(--border-color) var(--border-color) transparent;
}

.nav-tabs .nav-link.active[b-acri3gvgyy] {
    color: var(--primary-color);
    font-weight: 700;
    background: var(--card-bg);
    border-color: var(--border-color) var(--border-color) var(--card-bg);
}

.tab-pane[b-acri3gvgyy] {
    display: none;
    animation: fadeIn 0.2s ease;
}

.tab-pane.show.active[b-acri3gvgyy] {
    display: block;
}

/* ── Submit Answer tab — attempt form & history ─────────────────────────── */

.attempts-card-header[b-acri3gvgyy] {
    background: var(--primary-gradient);
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.attempt-count-badge[b-acri3gvgyy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
    font-weight: 700;
    vertical-align: middle;
}

.attempt-textarea[b-acri3gvgyy] {
    resize: vertical;
    min-height: 8rem;
    background: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.attempt-textarea:focus[b-acri3gvgyy] {
    border-color: rgba(var(--primary-color-rgb), 0.6);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.15);
    background: var(--input-bg);
    color: var(--text-primary);
}

.attempts-empty-state[b-acri3gvgyy] {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-secondary);
}

.attempts-empty-state .empty-icon[b-acri3gvgyy] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.attempts-list[b-acri3gvgyy] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.attempt-item[b-acri3gvgyy] {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    background: var(--card-bg);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    animation: slideIn-b-acri3gvgyy 0.25s ease;
}

.attempt-item:hover[b-acri3gvgyy] {
    box-shadow: var(--card-shadow);
    transform: translateY(-1px);
}

.attempt-meta[b-acri3gvgyy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.attempt-number[b-acri3gvgyy] {
    font-weight: 600;
    font-size: 0.85rem;
    color: rgba(var(--primary-color-rgb), 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.attempt-date[b-acri3gvgyy] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.attempt-text[b-acri3gvgyy] {
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 0;
    white-space: pre-wrap;
}

.feedback-panel[b-acri3gvgyy] {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: var(--border-radius);
    background: rgba(var(--primary-color-rgb), 0.05);
    border: 1px solid rgba(var(--primary-color-rgb), 0.15);
}

.feedback-header[b-acri3gvgyy] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.correctness-badge[b-acri3gvgyy] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.6rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(var(--primary-color-rgb), 0.15);
    color: rgba(var(--primary-color-rgb), 1);
}

.feedback-text[b-acri3gvgyy] {
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.feedback-section[b-acri3gvgyy] {
    margin-top: 0.75rem;
    color: var(--text-primary);
}

.feedback-section ul[b-acri3gvgyy] {
    margin-top: 0.35rem;
    padding-left: 1.25rem;
}

.feedback-section li[b-acri3gvgyy] {
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
}

.feedback-section p[b-acri3gvgyy] {
    margin-top: 0.35rem;
    font-size: 0.9rem;
}

@keyframes slideIn-b-acri3gvgyy {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* /Components/Pages/HomeworkSubmit.razor.rz.scp.css */
/* ── Submission tips banner ──────────────────────────────────────────────── */

.submit-tips-banner[b-cr1gsinv4j] {
    border: 1px solid rgba(var(--primary-color-rgb), 0.25);
    background: rgba(var(--primary-color-rgb), 0.06);
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-primary);
}

.submit-tips-banner-body[b-cr1gsinv4j] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
}

.submit-tips-icon[b-cr1gsinv4j] {
    color: var(--primary-color);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.submit-tips-help-link[b-cr1gsinv4j] {
    white-space: nowrap;
    color: var(--primary-color);
    font-weight: 500;
    text-decoration: none;
}

.submit-tips-help-link:hover[b-cr1gsinv4j] {
    text-decoration: underline;
}
/* /Components/Pages/LearningPlan.razor.rz.scp.css */
.learning-plan-page[b-zao5oox4tp] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* ── Card header ──────────────────────────────────────────────────────────── */

.plan-card-header[b-zao5oox4tp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--primary-gradient);
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.plan-card-header .text-muted[b-zao5oox4tp] {
    color: rgba(255, 255, 255, 0.75) !important;
}

.plan-meta[b-zao5oox4tp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */

.plan-empty-icon[b-zao5oox4tp] {
    font-size: 3rem;
    line-height: 1;
}

/* ── Steps list ───────────────────────────────────────────────────────────── */

.plan-section-label[b-zao5oox4tp] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.plan-steps[b-zao5oox4tp] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.plan-step[b-zao5oox4tp] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.plan-step-number[b-zao5oox4tp] {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-gradient);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.875rem;
}

.plan-step-content[b-zao5oox4tp] {
    flex: 1;
    padding-top: 0.25rem;
}

.plan-step-title[b-zao5oox4tp] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.plan-step-description[b-zao5oox4tp] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin-bottom: 0;
    line-height: 1.6;
}

/* ── Key concepts ─────────────────────────────────────────────────────────── */

.plan-concept-badge[b-zao5oox4tp] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius-pill);
    background: rgba(var(--primary-color-rgb), 0.1);
    color: rgb(var(--primary-color-rgb));
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid rgba(var(--primary-color-rgb), 0.25);
    transition: background 0.2s ease;
}

.plan-concept-badge:hover[b-zao5oox4tp] {
    background: rgba(var(--primary-color-rgb), 0.18);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    .learning-plan-page[b-zao5oox4tp] {
        padding: 1rem 0.75rem;
    }

    .plan-card-header[b-zao5oox4tp] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* ── Plan generation loader ───────────────────────────────────────────────── */

.plan-loading-panel[b-zao5oox4tp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem 2rem;
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.06) 0%,
        rgba(var(--bg-secondary-rgb), 0.8) 100%);
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
    text-align: center;
    animation: plan-panel-pulse-b-zao5oox4tp 3s ease-in-out infinite;
}

@keyframes plan-panel-pulse-b-zao5oox4tp {
    0%, 100% { box-shadow: 0 0 0 0   rgba(var(--primary-color-rgb), 0);    }
    50%       { box-shadow: 0 0 0 6px rgba(var(--primary-color-rgb), 0.08); }
}

.plan-loading-emoji[b-zao5oox4tp] {
    font-size: 3.5rem;
    line-height: 1;
    user-select: none;
    animation: plan-float-b-zao5oox4tp 2s ease-in-out infinite;
}

@keyframes plan-float-b-zao5oox4tp {
    0%, 100% { transform: translateY(0)     scale(1);    }
    50%       { transform: translateY(-14px) scale(1.12); }
}

.plan-loading-dots[b-zao5oox4tp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.plan-loading-dots span[b-zao5oox4tp] {
    display: block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--primary-color);
    animation: plan-dot-bounce-b-zao5oox4tp 1.4s ease-in-out infinite;
}

.plan-loading-dots span:nth-child(2)[b-zao5oox4tp] { animation-delay: 0.2s; }
.plan-loading-dots span:nth-child(3)[b-zao5oox4tp] { animation-delay: 0.4s; }

@keyframes plan-dot-bounce-b-zao5oox4tp {
    0%, 80%, 100% { transform: translateY(0);         opacity: 0.55; }
    40%           { transform: translateY(-0.875rem);  opacity: 1;    }
}

.plan-loading-message[b-zao5oox4tp] {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    animation: plan-message-fadein-b-zao5oox4tp 0.4s ease-out;
}

@keyframes plan-message-fadein-b-zao5oox4tp {
    from { opacity: 0; transform: translateY(0.3rem); }
    to   { opacity: 1; transform: translateY(0);      }
}

.plan-loading-sub[b-zao5oox4tp] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
}

/* /Components/Pages/LearningQuiz.razor.rz.scp.css */
/* ── Page Layout ─────────────────────────────────────────────────────────── */

.quiz-page[b-zyso8gkwl6] {
    max-width: 620px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    min-height: 80vh;
}

/* ── Type Selection Screen ───────────────────────────────────────────────── */

.quiz-select-screen[b-zyso8gkwl6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 2rem;
}

.quiz-select-header[b-zyso8gkwl6] {
    max-width: 420px;
}

.quiz-type-grid[b-zyso8gkwl6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    width: 100%;
    max-width: 500px;
    margin-bottom: 1rem;
}

.quiz-type-card[b-zyso8gkwl6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.5rem;
    padding: 1.5rem 1.25rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-lg, 0.75rem);
    background: var(--card-bg);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.quiz-type-card:hover[b-zyso8gkwl6] {
    border-color: var(--primary-color);
    box-shadow: 0 4px 20px rgba(var(--primary-color-rgb), 0.18);
    transform: translateY(-3px);
}

.quiz-type-icon[b-zyso8gkwl6] {
    font-size: 2rem;
    line-height: 1;
}

.quiz-type-title[b-zyso8gkwl6] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.quiz-type-desc[b-zyso8gkwl6] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.quiz-type-cta[b-zyso8gkwl6] {
    margin-top: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color);
}

/* ── In-Progress Screen ──────────────────────────────────────────────────── */

.quiz-inprogress-screen[b-zyso8gkwl6] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.quiz-top-bar[b-zyso8gkwl6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0;
}

.quiz-back-link[b-zyso8gkwl6] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-decoration: none;
    flex-shrink: 0;
}

.quiz-back-link:hover[b-zyso8gkwl6] {
    color: var(--text-primary);
}

.quiz-top-title[b-zyso8gkwl6] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    text-align: center;
    flex: 1;
    padding: 0 0.5rem;
}

.quiz-top-counter[b-zyso8gkwl6] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* Progress bar */

.quiz-progress-track[b-zyso8gkwl6] {
    width: 100%;
    height: 8px;
    border-radius: var(--border-radius-pill);
    background: rgba(var(--bg-secondary-rgb), 1);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.quiz-progress-fill[b-zyso8gkwl6] {
    height: 100%;
    border-radius: var(--border-radius-pill);
    background: var(--primary-gradient, var(--primary-color));
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Question card */

.quiz-question-card[b-zyso8gkwl6] {
    padding: 2rem 1.75rem;
    border-radius: var(--border-radius-lg, 0.75rem);
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.quiz-question-fading[b-zyso8gkwl6] {
    opacity: 0.55;
    transform: scale(0.99);
}

.quiz-question-text[b-zyso8gkwl6] {
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.55;
    margin-bottom: 1.75rem;
    text-align: center;
}

/* Options */

.quiz-options[b-zyso8gkwl6] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.quiz-opt-btn[b-zyso8gkwl6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid rgba(var(--primary-color-rgb), 0.25);
    border-radius: var(--border-radius);
    background: var(--card-bg);
    color: var(--text-primary);
    text-align: left;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.quiz-opt-btn:not(:disabled):hover[b-zyso8gkwl6] {
    border-color: rgba(var(--primary-color-rgb), 0.65);
    background: rgba(var(--primary-color-rgb), 0.06);
    box-shadow: 0 6px 18px rgba(var(--primary-color-rgb), 0.15);
    transform: translateY(-2px);
}

.quiz-opt-selected[b-zyso8gkwl6] {
    border-color: var(--primary-color) !important;
    background: rgba(var(--primary-color-rgb), 0.1) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.15);
}

.quiz-opt-advancing.quiz-opt-selected[b-zyso8gkwl6] {
    animation: opt-pulse-b-zyso8gkwl6 0.38s ease;
}

@keyframes opt-pulse-b-zyso8gkwl6 {
    0%   { transform: scale(1);    }
    50%  { transform: scale(1.02); }
    100% { transform: scale(1);    }
}

.quiz-opt-icon[b-zyso8gkwl6] {
    font-size: 1.375rem;
    flex-shrink: 0;
    line-height: 1;
}

.quiz-opt-text[b-zyso8gkwl6] {
    line-height: 1.4;
    font-weight: 500;
    flex: 1;
}



/* Navigation bar */

.quiz-nav-bar[b-zyso8gkwl6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0;
}

/* ── Result Screen ────────────────────────────────────────────────────────── */

.quiz-result-screen[b-zyso8gkwl6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.5rem 2rem;
    animation: result-slide-in-b-zyso8gkwl6 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes result-slide-in-b-zyso8gkwl6 {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1);     }
}

.quiz-result-confetti[b-zyso8gkwl6] {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 1.25rem;
    animation: confetti-pop-b-zyso8gkwl6 0.6s 0.25s both;
}

@keyframes confetti-pop-b-zyso8gkwl6 {
    0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
    70%  { transform: scale(1.25) rotate(6deg); }
    100% { transform: scale(1) rotate(0);       opacity: 1; }
}

.quiz-result-label[b-zyso8gkwl6] {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
}

.quiz-result-title[b-zyso8gkwl6] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.25;
}

.quiz-result-desc[b-zyso8gkwl6] {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 420px;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.quiz-result-actions[b-zyso8gkwl6] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 340px;
    margin-bottom: 1.5rem;
}

.quiz-skip-link[b-zyso8gkwl6] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.quiz-skip-link:hover[b-zyso8gkwl6] {
    color: var(--text-primary);
    text-decoration: underline;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    .quiz-type-grid[b-zyso8gkwl6] {
        grid-template-columns: 1fr;
    }

    .quiz-question-card[b-zyso8gkwl6] {
        padding: 1.5rem 1.25rem;
    }

    .quiz-question-text[b-zyso8gkwl6] {
        font-size: 1.0625rem;
    }

    .quiz-result-title[b-zyso8gkwl6] {
        font-size: 1.625rem;
    }

    .quiz-page[b-zyso8gkwl6] {
        padding: 1rem 0.75rem 2rem;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
.login-page[b-zxeay3ovjz] {
    min-height: calc(100vh - 8rem);
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at top left, rgba(var(--primary-color-rgb), 0.14), transparent 32%),
        linear-gradient(135deg, rgba(var(--bg-secondary-rgb), 0.92), rgba(var(--bg-secondary-rgb), 0.55));
}

.login-panel[b-zxeay3ovjz] {
    width: min(100%, 32rem);
    border: 0;
    border-radius: calc(var(--border-radius) * 1.25);
    box-shadow: var(--card-shadow);
}

.login-panel .card-body[b-zxeay3ovjz] {
    padding: 2rem;
}

.login-copy[b-zxeay3ovjz] {
    margin-bottom: 1.5rem;
}

.eyebrow[b-zxeay3ovjz] {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-copy h1[b-zxeay3ovjz] {
    margin: 0.4rem 0 0.75rem;
}

.login-copy p[b-zxeay3ovjz] {
    color: var(--text-secondary);
    margin: 0;
}

.example-users-section[b-zxeay3ovjz] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(var(--primary-color-rgb), 0.12);
}

.example-users-header h2[b-zxeay3ovjz] {
    font-size: 1rem;
    margin: 0;
}

.example-users-header p[b-zxeay3ovjz] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0.35rem 0 0;
}

.example-password[b-zxeay3ovjz] {
    margin-top: 0.9rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.example-password span[b-zxeay3ovjz] {
    color: var(--text-primary);
    font-family: Consolas, 'Courier New', monospace;
    font-weight: 700;
}

.example-user-list[b-zxeay3ovjz] {
    display: grid;
    gap: 0.75rem;
}

.example-user-item[b-zxeay3ovjz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(var(--primary-color-rgb), 0.12);
    border-radius: var(--border-radius);
    background: rgba(var(--bg-secondary-rgb), 0.55);
}

.example-user-meta[b-zxeay3ovjz] {
    min-width: 0;
}

.example-user-role[b-zxeay3ovjz] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.example-user-name[b-zxeay3ovjz] {
    color: var(--text-primary);
    font-weight: 600;
}

.example-user-email[b-zxeay3ovjz] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .login-panel .card-body[b-zxeay3ovjz] {
        padding: 1.5rem;
    }

    .example-user-item[b-zxeay3ovjz] {
        align-items: stretch;
        flex-direction: column;
    }
}
/* /Components/Pages/MyClasses.razor.rz.scp.css */
.my-classes-page[b-ftuu48upz3] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.page-header[b-ftuu48upz3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.page-header h1[b-ftuu48upz3] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* ── Create Form ── */
.create-form-card[b-ftuu48upz3] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    animation: fadeIn-b-ftuu48upz3 0.25s ease;
}

.create-form-title[b-ftuu48upz3] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

/* ── Year Level Groups ── */
.year-level-group[b-ftuu48upz3] {
    margin-bottom: 2rem;
}

.year-level-heading[b-ftuu48upz3] {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-secondary);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1rem;
}

/* ── Classes Grid ── */
.classes-grid[b-ftuu48upz3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* ── Class Card ── */
.class-card[b-ftuu48upz3] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.class-card:hover[b-ftuu48upz3],
.class-card:focus[b-ftuu48upz3] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.15);
    border-color: rgba(var(--primary-color-rgb), 0.4);
    outline: none;
}

.class-card-owned[b-ftuu48upz3] {
    border-left: 3px solid var(--primary-color);
}

.class-card-header[b-ftuu48upz3] {
    background: var(--primary-gradient);
    padding: 1rem 1rem 0.75rem;
}

.class-card-title-row[b-ftuu48upz3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.class-card-name[b-ftuu48upz3] {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    flex: 1;
}

.class-badge[b-ftuu48upz3] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: var(--border-radius-pill, 20px);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.class-badge-self[b-ftuu48upz3] {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.class-subject-pill[b-ftuu48upz3] {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 0.2rem 0.65rem;
    border-radius: var(--border-radius-pill, 20px);
    font-size: 0.8rem;
    font-weight: 500;
}

.class-card-body[b-ftuu48upz3] {
    padding: 0.75rem 1rem 0.9rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.class-description[b-ftuu48upz3] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.class-teacher[b-ftuu48upz3] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.class-enrolled[b-ftuu48upz3] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0;
    margin-top: 0.2rem;
}

.class-card-arrow[b-ftuu48upz3] {
    position: absolute;
    right: 1rem;
    bottom: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

.class-card:hover .class-card-arrow[b-ftuu48upz3] {
    transform: translateX(3px);
    color: var(--primary-color);
}

/* ── Empty State ── */
.empty-state[b-ftuu48upz3] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.empty-state-icon[b-ftuu48upz3] {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    color: var(--text-secondary);
    opacity: 0.5;
}

.empty-state h2[b-ftuu48upz3] {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

/* ── Status Panels (reuse from app) ── */
.status-panel[b-ftuu48upz3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

.status-panel-loading[b-ftuu48upz3] {
    background: rgba(var(--primary-color-rgb), 0.08);
    color: var(--text-primary);
}

.status-panel-error[b-ftuu48upz3] {
    background: rgba(220, 53, 69, 0.1);
    color: var(--bs-danger);
    border: 1px solid rgba(220, 53, 69, 0.25);
}

.loading-spinner[b-ftuu48upz3] {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid rgba(var(--primary-color-rgb), 0.2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-ftuu48upz3 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-b-ftuu48upz3 {
    to { transform: rotate(360deg); }
}

@keyframes fadeIn-b-ftuu48upz3 {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Join form (reuses .create-form-card) ── */
/* font-monospace letter-spacing for the code input */
.join-code-input[b-ftuu48upz3] {
    font-family: var(--bs-font-monospace, 'SFMono-Regular', Consolas, monospace);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    max-width: 200px;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
    .classes-grid[b-ftuu48upz3] {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

@media (max-width: 575.98px) {
    .my-classes-page[b-ftuu48upz3] {
        padding: 1rem 0.75rem;
    }

    .page-header[b-ftuu48upz3] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .page-header h1[b-ftuu48upz3] {
        font-size: 1.35rem;
    }

    .page-header .btn[b-ftuu48upz3] {
        width: 100%;
        justify-content: center;
    }

    .create-form-card[b-ftuu48upz3] {
        padding: 1rem 0.875rem;
    }

    .classes-grid[b-ftuu48upz3] {
        grid-template-columns: 1fr;
    }

    .year-level-heading[b-ftuu48upz3] {
        font-size: 0.85rem;
    }

    .class-card-header[b-ftuu48upz3] {
        padding: 0.75rem;
    }

    .class-card-body[b-ftuu48upz3] {
        padding: 0.6rem 0.75rem 0.75rem;
    }

    .class-card-name[b-ftuu48upz3] {
        font-size: 0.95rem;
    }

    /* Stack form buttons */
    .create-form-card .d-flex.gap-2[b-ftuu48upz3] {
        flex-direction: column;
    }

    .create-form-card .d-flex.gap-2 .btn[b-ftuu48upz3] {
        width: 100%;
    }
}
/* /Components/Pages/MyStudents.razor.rz.scp.css */
[b-oz7uuzywfw]::my-students-page {
    max-width: 1200px;
    margin: 0 auto;
}

.my-students-header[b-oz7uuzywfw] {
    margin-bottom: 2rem;
}

.my-students-eyebrow[b-oz7uuzywfw] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.my-students-header h1[b-oz7uuzywfw] {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.my-students-header p[b-oz7uuzywfw] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

.my-students-table[b-oz7uuzywfw] {
    width: 100%;
    margin-bottom: 0;
    background: var(--card-bg);
}

.my-students-table th[b-oz7uuzywfw] {
    background: rgba(var(--bg-secondary-rgb), 0.8);
    color: var(--text-primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
}

.my-students-table tbody tr:hover td[b-oz7uuzywfw] {
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.05) 0%,
        rgba(var(--primary-color-rgb), 0.1) 100%);
}

@media (max-width: 575.98px) {
    .my-students-header h1[b-oz7uuzywfw] {
        font-size: 1.5rem;
    }
}
/* /Components/Pages/ParentDashboard.razor.rz.scp.css */
.parent-dashboard-page[b-zrwukyqvyo] {
    max-width: 1100px;
    margin: 0 auto;
}

.page-header[b-zrwukyqvyo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-header h1[b-zrwukyqvyo] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.page-subtitle[b-zrwukyqvyo] {
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* Children grid */
.children-grid[b-zrwukyqvyo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
}

.child-card[b-zrwukyqvyo] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.2s ease;
}

.child-card:hover[b-zrwukyqvyo] {
    box-shadow: var(--card-shadow-hover, 0 4px 16px rgba(0, 0, 0, 0.12));
}

.child-card-header[b-zrwukyqvyo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--primary-gradient);
    border-radius: calc(var(--border-radius) - 1px) calc(var(--border-radius) - 1px) 0 0;
    padding: 1rem 1.25rem;
    color: #fff;
}

.child-name[b-zrwukyqvyo] {
    font-weight: 600;
    font-size: 1rem;
}

.child-grade[b-zrwukyqvyo] {
    color: rgba(255, 255, 255, 0.85);
}

/* Stats */
.stats-row[b-zrwukyqvyo] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.stat-item[b-zrwukyqvyo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.stat-value[b-zrwukyqvyo] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stat-value.correctness[b-zrwukyqvyo] {
    color: var(--success-color, #198754);
}

.stat-label[b-zrwukyqvyo] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Recent activity */
.recent-label[b-zrwukyqvyo],
.breakdown-label[b-zrwukyqvyo] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.recent-row[b-zrwukyqvyo] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Subject breakdown */
.subject-row[b-zrwukyqvyo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid var(--border-color);
}

.subject-row:last-child[b-zrwukyqvyo] {
    border-bottom: none;
}

.subject-name[b-zrwukyqvyo] {
    font-weight: 600;
    color: var(--text-primary);
}

.subject-stats[b-zrwukyqvyo] {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Homework panel table */
.parent-homework-table[b-zrwukyqvyo] {
    width: 100%;
    margin-bottom: 0;
    background: var(--card-bg);
}

.parent-homework-table th[b-zrwukyqvyo] {
    background: rgba(var(--bg-secondary-rgb), 0.8);
    color: var(--text-primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
}

.parent-homework-table tbody tr:hover td[b-zrwukyqvyo] {
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.05) 0%,
        rgba(var(--primary-color-rgb), 0.1) 100%);
}

.item-name[b-zrwukyqvyo] {
    font-weight: 600;
    color: var(--text-primary);
}

.item-date[b-zrwukyqvyo] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.status-badge[b-zrwukyqvyo] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.status-submitted[b-zrwukyqvyo] {
    background: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
}

.status-processed[b-zrwukyqvyo] {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.status-archived[b-zrwukyqvyo] {
    background: rgba(var(--bg-secondary-rgb), 0.5);
    color: var(--text-secondary);
}

.loading-spinner-sm[b-zrwukyqvyo] {
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-zrwukyqvyo 0.8s linear infinite;
}

@keyframes spin-b-zrwukyqvyo {
    to { transform: rotate(360deg); }
}

.homework-panel[b-zrwukyqvyo] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
}

.status-panel-empty[b-zrwukyqvyo] {
    text-align: center;
    padding: 2rem;
    background: var(--card-bg);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
}

.empty-icon[b-zrwukyqvyo] {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

/* ── Detail panel: problem + attempts ── */
.detail-section-label[b-zrwukyqvyo] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.detail-problem-text[b-zrwukyqvyo] {
    border-left: 3px solid var(--border-color);
    padding: 0.5rem 0.85rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
    background: rgba(var(--bg-secondary-rgb), 0.5);
    border-radius: 0 4px 4px 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.detail-attempts[b-zrwukyqvyo] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.attempt-item[b-zrwukyqvyo] {
    background: rgba(var(--bg-secondary-rgb), 0.5);
    border: 1px solid var(--border-color);
    border-radius: calc(var(--border-radius) - 2px);
    padding: 0.65rem 0.85rem;
}

.attempt-meta[b-zrwukyqvyo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.attempt-number[b-zrwukyqvyo] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.attempt-date[b-zrwukyqvyo] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: auto;
}

.attempt-score[b-zrwukyqvyo] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    border-radius: var(--border-radius-pill, 20px);
    font-size: 0.72rem;
    font-weight: 700;
}

.score-good[b-zrwukyqvyo] {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.score-ok[b-zrwukyqvyo] {
    background: rgba(var(--warning-color-rgb, 217, 119, 6), 0.12);
    color: var(--warning-color, #d97706);
}

.score-low[b-zrwukyqvyo] {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.attempt-text[b-zrwukyqvyo] {
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

.attempt-feedback[b-zrwukyqvyo] {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-style: italic;
    border-top: 1px solid var(--border-color);
    padding-top: 0.35rem;
}

/* ── Homework row — clickable + selected state ── */
.homework-row[b-zrwukyqvyo] {
    transition: background 0.15s ease;
}

.homework-row:hover td[b-zrwukyqvyo] {
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.04) 0%,
        rgba(var(--primary-color-rgb), 0.08) 100%);
}

.homework-row-selected td[b-zrwukyqvyo] {
    background: rgba(var(--primary-color-rgb), 0.08);
    border-left: 3px solid var(--primary-color);
}

/* ── Solution Panel ── */
.solution-panel[b-zrwukyqvyo] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem 1.5rem;
    animation: fadeIn-b-zrwukyqvyo 0.2s ease;
}

.solution-panel-header[b-zrwukyqvyo] {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
}

.solution-content[b-zrwukyqvyo] {
    background: rgba(var(--warning-color-rgb, 217, 119, 6), 0.04);
    border: 1px solid rgba(var(--warning-color-rgb, 217, 119, 6), 0.15);
    border-radius: calc(var(--border-radius) - 2px);
    padding: 1rem 1.25rem;
}

.solution-text[b-zrwukyqvyo] {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

[data-theme="dark"] .solution-content[b-zrwukyqvyo] {
    background: rgba(217, 119, 6, 0.08);
    border-color: rgba(217, 119, 6, 0.2);
}

@keyframes fadeIn-b-zrwukyqvyo {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767.98px) {
    .children-grid[b-zrwukyqvyo] {
        grid-template-columns: 1fr;
    }

    .solution-panel[b-zrwukyqvyo] {
        padding: 1rem;
    }
}
/* /Components/Pages/ParentDashboardFeature.razor.rz.scp.css */
.feature-detail-page[b-gzz4noo0lv] {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.detail-hero[b-gzz4noo0lv],
.detail-card[b-gzz4noo0lv] {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(var(--primary-color-rgb), 0.12);
    padding: 1.5rem;
}

.detail-hero p[b-gzz4noo0lv],
.detail-card p[b-gzz4noo0lv],
.detail-card li[b-gzz4noo0lv] {
    color: var(--text-secondary);
    line-height: 1.6;
}

.detail-grid[b-gzz4noo0lv] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.detail-card h2[b-gzz4noo0lv] {
    margin-bottom: 0.75rem;
}

.detail-card ul[b-gzz4noo0lv],
.detail-card ol[b-gzz4noo0lv] {
    margin-bottom: 0;
    padding-left: 1.2rem;
}

.actions[b-gzz4noo0lv] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    .detail-hero[b-gzz4noo0lv],
    .detail-card[b-gzz4noo0lv] {
        padding: 1.25rem;
    }
}
/* /Components/Pages/PersonalizedLearningFeature.razor.rz.scp.css */
.feature-detail-page[b-mhz2l3xklm] {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.detail-hero[b-mhz2l3xklm],
.detail-card[b-mhz2l3xklm] {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(var(--primary-color-rgb), 0.12);
    padding: 1.5rem;
}

.detail-hero p[b-mhz2l3xklm],
.detail-card p[b-mhz2l3xklm],
.detail-card li[b-mhz2l3xklm] {
    color: var(--text-secondary);
    line-height: 1.6;
}

.detail-grid[b-mhz2l3xklm] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.detail-card h2[b-mhz2l3xklm] {
    margin-bottom: 0.75rem;
}

.detail-card ul[b-mhz2l3xklm],
.detail-card ol[b-mhz2l3xklm] {
    margin-bottom: 0;
    padding-left: 1.2rem;
}

.actions[b-mhz2l3xklm] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    .detail-hero[b-mhz2l3xklm],
    .detail-card[b-mhz2l3xklm] {
        padding: 1.25rem;
    }
}
/* /Components/Pages/Profile.razor.rz.scp.css */
.profile-page[b-zcpomk95kj] {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.page-header[b-zcpomk95kj] {
    margin-bottom: 2rem;
}

.page-header h1[b-zcpomk95kj] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.page-subtitle[b-zcpomk95kj] {
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* Card */
.profile-card[b-zcpomk95kj] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg, 0.75rem);
    box-shadow: var(--card-shadow);
}

.profile-card-header[b-zcpomk95kj] {
    background: var(--primary-gradient);
    color: #fff;
    border-radius: var(--border-radius-lg, 0.75rem) var(--border-radius-lg, 0.75rem) 0 0;
    padding: 1rem 1.5rem;
}

.profile-card-header h2[b-zcpomk95kj] {
    color: #fff;
}

/* Identity block */
.profile-identity[b-zcpomk95kj] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--bg-secondary-rgb), 0.5);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.profile-name[b-zcpomk95kj] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.profile-email[b-zcpomk95kj] {
    font-size: 0.9rem;
}

/* Age group picker */
.age-group-options[b-zcpomk95kj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.age-group-card[b-zcpomk95kj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--card-bg);
    color: var(--text-primary);
}

.age-group-card:hover[b-zcpomk95kj] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.15);
}

.age-group-card.selected[b-zcpomk95kj] {
    border-color: var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.08);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.2);
}

.age-group-icon[b-zcpomk95kj] {
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
    line-height: 1;
}

.age-group-label[b-zcpomk95kj] {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.age-group-desc[b-zcpomk95kj] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* Learning style picker */
.learning-style-options[b-zcpomk95kj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

.learning-style-card[b-zcpomk95kj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--card-bg);
    color: var(--text-primary);
}

.learning-style-card:hover[b-zcpomk95kj] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.15);
}

.learning-style-card.selected[b-zcpomk95kj] {
    border-color: var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.08);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.2);
}

.learning-style-icon[b-zcpomk95kj] {
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
    line-height: 1;
}

.learning-style-label[b-zcpomk95kj] {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.learning-style-desc[b-zcpomk95kj] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* Status panels reuse */
.status-panel[b-zcpomk95kj] {
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius);
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-panel-loading[b-zcpomk95kj] {
    background: rgba(var(--bg-secondary-rgb), 0.7);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.status-panel-error[b-zcpomk95kj] {
    background: rgba(var(--danger-color-rgb), 0.08);
    border-color: rgba(var(--danger-color-rgb), 0.3);
    color: var(--danger-color, #dc3545);
    flex-direction: column;
    align-items: flex-start;
}

.status-panel-success[b-zcpomk95kj] {
    background: rgba(var(--success-color-rgb), 0.08);
    border-color: rgba(var(--success-color-rgb), 0.3);
    color: var(--success-color, #198754);
}

/* Form actions */
.form-actions[b-zcpomk95kj] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 0.5rem;
}

/* Responsive */
@media (max-width: 575.98px) {
    .age-group-options[b-zcpomk95kj],
    .learning-style-options[b-zcpomk95kj] {
        grid-template-columns: 1fr;
    }

    .profile-page[b-zcpomk95kj] {
        padding: 1rem 0.75rem;
    }
}

@media (max-width: 767.98px) {
    .age-group-options[b-zcpomk95kj],
    .learning-style-options[b-zcpomk95kj] {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Quiz Launch Panel ──────────────────────────────────────────────────── */

.quiz-launch-panel[b-zcpomk95kj] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.quiz-launch-btn[b-zcpomk95kj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--card-bg);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.quiz-launch-btn:hover[b-zcpomk95kj] {
    border-color: var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.05);
    box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.12);
    color: var(--text-primary);
}

.quiz-launch-btn-memory:hover[b-zcpomk95kj] {
    border-color: rgba(var(--primary-color-rgb), 0.6);
}

.quiz-launch-title[b-zcpomk95kj] {
    font-weight: 600;
    font-size: 0.9rem;
}

.quiz-launch-sub[b-zcpomk95kj] {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* ── Brain Type Quiz ─────────────────────────────────────────────────────── */

.profile-quiz-panel[b-zcpomk95kj] {
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
    border-radius: var(--border-radius);
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.03) 0%,
        rgba(var(--bg-secondary-rgb), 0.4) 100%);
    padding: 1.25rem;
}

.brain-quiz-question-label[b-zcpomk95kj] {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.brain-quiz-q-number[b-zcpomk95kj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--border-radius-pill);
    background: rgba(var(--primary-color-rgb), 0.15);
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.quiz-option-grid[b-zcpomk95kj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.5rem;
}

.quiz-option-btn[b-zcpomk95kj] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--card-bg);
    color: var(--text-primary);
    text-align: left;
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.quiz-option-btn:hover[b-zcpomk95kj] {
    border-color: rgba(var(--primary-color-rgb), 0.5);
    background: rgba(var(--primary-color-rgb), 0.05);
    transform: translateY(-1px);
}

.quiz-option-selected[b-zcpomk95kj] {
    border-color: var(--primary-color) !important;
    background: rgba(var(--primary-color-rgb), 0.1) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.12);
}

.quiz-option-icon[b-zcpomk95kj] {
    font-size: 1.125rem;
    flex-shrink: 0;
    line-height: 1.4;
}

.quiz-option-text[b-zcpomk95kj] {
    line-height: 1.4;
}

/* ── Brain Type Result ──────────────────────────────────────────────────── */

.profile-brain-result[b-zcpomk95kj] {
    border: 1px solid rgba(var(--success-color-rgb), 0.3);
    border-radius: var(--border-radius);
    background: linear-gradient(135deg,
        rgba(var(--success-color-rgb), 0.05) 0%,
        rgba(var(--bg-secondary-rgb), 0.4) 100%);
    padding: 1.25rem;
}

.brain-quiz-result-label[b-zcpomk95kj] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.brain-quiz-result-title[b-zcpomk95kj] {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
}

.brain-quiz-result-icon[b-zcpomk95kj] {
    font-size: 3rem;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.9;
}

@media (max-width: 575.98px) {
    .age-group-options[b-zcpomk95kj],
    .learning-style-options[b-zcpomk95kj] {
        grid-template-columns: 1fr;
    }

    .profile-page[b-zcpomk95kj] {
        padding: 1rem 0.75rem;
    }

    .quiz-option-grid[b-zcpomk95kj] {
        grid-template-columns: 1fr;
    }

    .brain-quiz-result-icon[b-zcpomk95kj] {
        font-size: 2rem;
    }
}

/* ── Memory Profile Quiz ────────────────────────────────────────────────── */

.memory-quiz-card[b-zcpomk95kj] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg, 0.75rem);
    box-shadow: var(--card-shadow);
}

.memory-quiz-card-header[b-zcpomk95kj] {
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.75) 0%,
        rgba(var(--primary-color-rgb), 1) 100%);
    color: #fff;
    border-radius: var(--border-radius-lg, 0.75rem) var(--border-radius-lg, 0.75rem) 0 0;
    padding: 1rem 1.5rem;
}

.memory-quiz-card-header h2[b-zcpomk95kj] {
    color: #fff;
}

.memory-quiz-panel[b-zcpomk95kj] {
    border: 1px solid rgba(var(--primary-color-rgb), 0.15);
    border-radius: var(--border-radius);
    background: linear-gradient(135deg,
        rgba(var(--bg-secondary-rgb), 0.5) 0%,
        rgba(var(--primary-color-rgb), 0.03) 100%);
    padding: 1.25rem;
}

/* ── Memory Profile Result ──────────────────────────────────────────────── */

.memory-profile-result[b-zcpomk95kj] {
    border: 1px solid rgba(var(--primary-color-rgb), 0.3);
    border-radius: var(--border-radius);
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.07) 0%,
        rgba(var(--bg-secondary-rgb), 0.4) 100%);
    padding: 1.25rem;
}

.memory-profile-label[b-zcpomk95kj] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.memory-profile-title[b-zcpomk95kj] {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
}

.memory-profile-icon[b-zcpomk95kj] {
    font-size: 3rem;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.9;
}

@media (max-width: 575.98px) {
    .memory-profile-icon[b-zcpomk95kj] {
        font-size: 2rem;
    }
}

/* ── Role badge ─────────────────────────────────────────────────────────────── */
.role-badge[b-zcpomk95kj] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: var(--border-radius-pill, 9999px);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(var(--primary-color-rgb), 0.12);
    color: var(--primary-color);
    border: 1px solid rgba(var(--primary-color-rgb), 0.25);
}

/* ── Parent child profile sections ──────────────────────────────────────────── */
.child-profile-section[b-zcpomk95kj] {
    padding-bottom: 0.25rem;
}

.child-profile-header[b-zcpomk95kj] {
    background: rgba(var(--bg-secondary-rgb), 0.4);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
}

.child-profile-summary[b-zcpomk95kj] {
    padding: 0.5rem 0;
}

.age-group-options-sm .age-group-card[b-zcpomk95kj],
.learning-style-options-sm .learning-style-card[b-zcpomk95kj] {
    padding: 0.5rem 0.75rem;
}

.age-group-options-sm .age-group-desc[b-zcpomk95kj],
.learning-style-options-sm .learning-style-desc[b-zcpomk95kj] {
    display: none;
}

/* ── Teacher class items ─────────────────────────────────────────────────────── */
.teacher-class-item[b-zcpomk95kj] {
    padding: 0.75rem 1rem;
    background: rgba(var(--bg-secondary-rgb), 0.4);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.teacher-class-item:hover[b-zcpomk95kj] {
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.05) 0%,
        rgba(var(--primary-color-rgb), 0.1) 100%);
}
/* /Components/Pages/Progress.razor.rz.scp.css */
.progress-page[b-orip7svwfb] {
    max-width: 900px;
    margin: 0 auto;
    animation: fadeIn-b-orip7svwfb 0.3s ease;
}

/* Page header */
.page-header[b-orip7svwfb] {
    margin-bottom: 1.75rem;
}

.page-header h1[b-orip7svwfb] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.page-subtitle[b-orip7svwfb] {
    color: var(--text-secondary);
    margin-bottom: 0;
    font-size: 0.95rem;
}

/* Stats grid */
.stats-grid[b-orip7svwfb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-orip7svwfb] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    padding: 1.25rem 1rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover[b-orip7svwfb] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--primary-color-rgb), 0.12);
}

.stat-card-highlight[b-orip7svwfb] {
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.08) 0%,
        rgba(var(--primary-color-rgb), 0.04) 100%);
    border-color: rgba(var(--primary-color-rgb), 0.25);
}

.stat-icon[b-orip7svwfb] {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.stat-value[b-orip7svwfb] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.stat-label[b-orip7svwfb] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

/* Two-column section grid */
.section-grid[b-orip7svwfb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Card header accent */
.progress-card-header[b-orip7svwfb] {
    background: var(--primary-gradient);
    color: #fff;
    padding: 0.875rem 1.25rem;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* Activity list */
.activity-list[b-orip7svwfb] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.activity-list li[b-orip7svwfb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.activity-dot[b-orip7svwfb] {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-homework[b-orip7svwfb] { background: rgba(var(--primary-color-rgb), 0.8); }
.dot-hint[b-orip7svwfb]     { background: rgba(var(--success-color-rgb), 0.8); }
.dot-attempt[b-orip7svwfb]  { background: rgba(var(--warning-color-rgb), 0.8); }

.activity-label[b-orip7svwfb] {
    flex: 1;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.activity-count[b-orip7svwfb] {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1.05rem;
    min-width: 2rem;
    text-align: right;
}

/* Subject table */
.admin-progress-table[b-orip7svwfb] {
    width: 100%;
    margin-bottom: 0;
    background: var(--card-bg);
}

.admin-progress-table th[b-orip7svwfb] {
    background: rgba(var(--bg-secondary-rgb), 0.8);
    color: var(--text-primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
    padding: 0.75rem 1rem;
}

.admin-progress-table td[b-orip7svwfb] {
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    border-color: var(--border-color);
    transition: background 0.15s ease;
}

.admin-progress-table tbody tr:hover td[b-orip7svwfb] {
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.04) 0%,
        rgba(var(--primary-color-rgb), 0.08) 100%);
}

.item-name[b-orip7svwfb] {
    font-weight: 500;
    color: var(--text-primary);
}

/* Status badges */
.status-badge[b-orip7svwfb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.65rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
    min-width: 2rem;
}

.badge-homework[b-orip7svwfb] { background: rgba(var(--primary-color-rgb), 0.12); color: rgba(var(--primary-color-rgb), 1); }
.badge-hint[b-orip7svwfb]     { background: rgba(var(--success-color-rgb), 0.12); color: var(--success-color); }
.badge-attempt[b-orip7svwfb]  { background: rgba(var(--warning-color-rgb), 0.12); color: var(--warning-color); }

/* Empty state */
.empty-state .empty-icon[b-orip7svwfb] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

/* Status panels */
.status-panel[b-orip7svwfb] {
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.status-panel-loading[b-orip7svwfb] {
    background: rgba(var(--bg-secondary-rgb), 0.8);
    color: var(--text-secondary);
}

.status-panel-error[b-orip7svwfb] {
    background: rgba(var(--danger-color-rgb), 0.1);
    color: var(--danger-color);
    border: 1px solid rgba(var(--danger-color-rgb), 0.2);
}

.loading-spinner[b-orip7svwfb] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border-color);
    border-top-color: rgba(var(--primary-color-rgb), 1);
    border-radius: 50%;
    animation: spin-b-orip7svwfb 0.7s linear infinite;
    flex-shrink: 0;
}

/* Card body default padding */
.card-body[b-orip7svwfb] {
    padding: 1.5rem;
}

/* Animations */
@keyframes fadeIn-b-orip7svwfb {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin-b-orip7svwfb {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 767.98px) {
    .stats-grid[b-orip7svwfb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .stats-grid[b-orip7svwfb] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .stat-value[b-orip7svwfb] {
        font-size: 1.6rem;
    }

    .card-body[b-orip7svwfb] {
        padding: 1.25rem;
    }

    .admin-progress-table th[b-orip7svwfb],
    .admin-progress-table td[b-orip7svwfb] {
        padding: 0.625rem 0.75rem;
    }
}
/* /Components/Pages/ProgressTrackingFeature.razor.rz.scp.css */
.feature-detail-page[b-hqg1jx73p6] {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.detail-hero[b-hqg1jx73p6],
.detail-card[b-hqg1jx73p6] {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(var(--primary-color-rgb), 0.12);
    padding: 1.5rem;
}

.detail-hero p[b-hqg1jx73p6],
.detail-card p[b-hqg1jx73p6],
.detail-card li[b-hqg1jx73p6] {
    color: var(--text-secondary);
    line-height: 1.6;
}

.detail-grid[b-hqg1jx73p6] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.detail-card h2[b-hqg1jx73p6] {
    margin-bottom: 0.75rem;
}

.detail-card ul[b-hqg1jx73p6],
.detail-card ol[b-hqg1jx73p6] {
    margin-bottom: 0;
    padding-left: 1.2rem;
}

.actions[b-hqg1jx73p6] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    .detail-hero[b-hqg1jx73p6],
    .detail-card[b-hqg1jx73p6] {
        padding: 1.25rem;
    }
}
/* /Components/Pages/StudentWorkView.razor.rz.scp.css */
.student-work-page[b-6bhdr79hez] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.student-work-header h1[b-6bhdr79hez] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.student-work-table[b-6bhdr79hez] {
    width: 100%;
    margin-bottom: 0;
    background: var(--card-bg);
}

.student-work-table th[b-6bhdr79hez] {
    background: rgba(var(--bg-secondary-rgb), 0.8);
    color: var(--text-primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
}

.student-work-table tbody tr:hover td[b-6bhdr79hez] {
    background: linear-gradient(135deg,
        rgba(var(--primary-color-rgb), 0.04) 0%,
        rgba(var(--primary-color-rgb), 0.08) 100%);
}

.status-panel[b-6bhdr79hez] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
}

.status-panel-loading[b-6bhdr79hez] {
    background: rgba(var(--primary-color-rgb), 0.08);
    color: var(--text-secondary);
}

.status-panel-error[b-6bhdr79hez] {
    background: rgba(var(--danger-color-rgb, 220, 53, 69), 0.1);
    color: var(--text-primary);
    flex-direction: column;
    align-items: flex-start;
}

.loading-spinner[b-6bhdr79hez] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(var(--primary-color-rgb), 0.3);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-6bhdr79hez 0.8s linear infinite;
}

@keyframes spin-b-6bhdr79hez {
    to { transform: rotate(360deg); }
}

@media (max-width: 575.98px) {
    .student-work-page[b-6bhdr79hez] {
        padding: 1rem;
    }
}
/* /Components/Pages/StudyNote.razor.rz.scp.css */
.study-note-page[b-zycj679ehm] {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem;
    animation: fadeIn-b-zycj679ehm 0.3s ease;
}

.subject-badge[b-zycj679ehm] {
    display: inline-block;
    background: rgba(var(--primary-color-rgb), 0.12);
    color: rgb(var(--primary-color-rgb));
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
}

.note-content-card .card-body[b-zycj679ehm] {
    padding: 1.5rem;
}

.note-content-text[b-zycj679ehm] {
    white-space: pre-wrap;
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 0.95rem;
}

.note-edit-textarea[b-zycj679ehm] {
    font-family: inherit;
    resize: vertical;
    min-height: 200px;
    line-height: 1.6;
}

.note-meta[b-zycj679ehm] {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

/* Q&A chat */
.qa-card .card-body[b-zycj679ehm] {
    padding: 1.5rem;
}

.qa-messages[b-zycj679ehm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 120px;
    max-height: 420px;
    overflow-y: auto;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
}

.qa-empty[b-zycj679ehm] {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
    padding: 1.5rem 0;
    margin: 0;
}

.qa-message[b-zycj679ehm] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-width: 80%;
}

.qa-message.msg-student[b-zycj679ehm] {
    align-self: flex-end;
    align-items: flex-end;
}

.qa-message.msg-assistant[b-zycj679ehm] {
    align-self: flex-start;
    align-items: flex-start;
}

.msg-bubble[b-zycj679ehm] {
    padding: 0.6rem 0.9rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.msg-student .msg-bubble[b-zycj679ehm] {
    background: var(--primary-gradient);
    color: #fff;
    border-bottom-right-radius: 0.25rem;
}

.msg-assistant .msg-bubble[b-zycj679ehm] {
    background: rgba(var(--bg-secondary-rgb), 0.7);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 0.25rem;
}

.msg-time[b-zycj679ehm] {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Typing indicator */
.msg-typing[b-zycj679ehm] {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    padding: 0.7rem 1rem;
}

.typing-dot[b-zycj679ehm] {
    width: 0.45rem;
    height: 0.45rem;
    background: var(--text-muted);
    border-radius: 50%;
    animation: typing-bounce-b-zycj679ehm 1.2s infinite;
}

.typing-dot:nth-child(2)[b-zycj679ehm] { animation-delay: 0.2s; }
.typing-dot:nth-child(3)[b-zycj679ehm] { animation-delay: 0.4s; }

@keyframes typing-bounce-b-zycj679ehm {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-5px); }
}

/* Input row */
.qa-input-row[b-zycj679ehm] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.qa-input[b-zycj679ehm] {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    resize: none;
    background: var(--input-bg, var(--card-bg));
    color: var(--text-primary);
    font-family: inherit;
    transition: border-color 0.2s;
}

.qa-input:focus[b-zycj679ehm] {
    outline: none;
    border-color: rgb(var(--primary-color-rgb));
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.15);
}

.qa-send-btn[b-zycj679ehm] {
    background: var(--primary-gradient);
    color: #fff;
    border: none;
    border-radius: var(--border-radius);
    width: 2.6rem;
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.qa-send-btn:disabled[b-zycj679ehm] {
    opacity: 0.55;
}

/* Status panels */
.status-panel[b-zycj679ehm] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

.status-panel-loading[b-zycj679ehm] {
    background: rgba(var(--primary-color-rgb), 0.08);
    color: var(--text-secondary);
}

.status-panel-error[b-zycj679ehm] {
    background: rgba(220, 53, 69, 0.08);
    color: var(--text-primary);
    flex-direction: column;
    align-items: flex-start;
}

.loading-spinner[b-zycj679ehm] {
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid rgba(var(--primary-color-rgb), 0.2);
    border-top-color: rgb(var(--primary-color-rgb));
    border-radius: 50%;
    animation: spin-b-zycj679ehm 0.8s linear infinite;
}

@keyframes spin-b-zycj679ehm {
    to { transform: rotate(360deg); }
}

@keyframes fadeIn-b-zycj679ehm {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 575.98px) {
    .study-note-page[b-zycj679ehm] {
        padding: 1rem;
    }

    .qa-message[b-zycj679ehm] {
        max-width: 95%;
    }
}
/* /Components/Pages/StudyNotes.razor.rz.scp.css */
.study-notes-page[b-ly0gk4pcti] {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem;
    animation: fadeIn-b-ly0gk4pcti 0.3s ease;
}

.page-header[b-ly0gk4pcti] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.page-header h1[b-ly0gk4pcti] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* Create form */
.create-form-card[b-ly0gk4pcti] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.create-form-title[b-ly0gk4pcti] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}

.note-textarea[b-ly0gk4pcti] {
    font-family: inherit;
    resize: vertical;
    min-height: 200px;
}

/* Notes grid */
.notes-grid[b-ly0gk4pcti] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.note-card[b-ly0gk4pcti] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.note-card:hover[b-ly0gk4pcti] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.note-card-header[b-ly0gk4pcti] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1.25rem 0.5rem;
    gap: 1rem;
}

.note-card-header h3[b-ly0gk4pcti] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.4rem;
}

.subject-badge[b-ly0gk4pcti] {
    display: inline-block;
    background: rgba(var(--primary-color-rgb), 0.12);
    color: rgb(var(--primary-color-rgb));
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
}

.note-date[b-ly0gk4pcti] {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.note-card-body[b-ly0gk4pcti] {
    padding: 0 1.25rem 0.75rem;
}

.note-snippet[b-ly0gk4pcti] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.note-card-footer[b-ly0gk4pcti] {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-color);
    gap: 0.5rem;
}

.delete-confirm[b-ly0gk4pcti] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.delete-confirm-text[b-ly0gk4pcti] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Empty state */
.empty-state[b-ly0gk4pcti] {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-icon[b-ly0gk4pcti] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.empty-state h2[b-ly0gk4pcti] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.empty-state p[b-ly0gk4pcti] {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Status panels */
.status-panel[b-ly0gk4pcti] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

.status-panel-loading[b-ly0gk4pcti] {
    background: rgba(var(--primary-color-rgb), 0.08);
    color: var(--text-secondary);
}

.status-panel-error[b-ly0gk4pcti] {
    background: rgba(220, 53, 69, 0.08);
    color: var(--text-primary);
    flex-direction: column;
    align-items: flex-start;
}

.loading-spinner[b-ly0gk4pcti] {
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid rgba(var(--primary-color-rgb), 0.2);
    border-top-color: rgb(var(--primary-color-rgb));
    border-radius: 50%;
    animation: spin-b-ly0gk4pcti 0.8s linear infinite;
}

@keyframes spin-b-ly0gk4pcti {
    to { transform: rotate(360deg); }
}

@keyframes fadeIn-b-ly0gk4pcti {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 575.98px) {
    .study-notes-page[b-ly0gk4pcti] {
        padding: 1rem;
    }

    .page-header[b-ly0gk4pcti] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .page-header h1[b-ly0gk4pcti] {
        font-size: 1.35rem;
    }

    .page-header .btn[b-ly0gk4pcti] {
        width: 100%;
        justify-content: center;
    }

    .create-form-card[b-ly0gk4pcti] {
        padding: 1rem 0.875rem;
    }

    .create-form-card .d-flex.gap-2[b-ly0gk4pcti] {
        flex-direction: column;
    }

    .create-form-card .d-flex.gap-2 .btn[b-ly0gk4pcti] {
        width: 100%;
    }

    .notes-grid[b-ly0gk4pcti] {
        grid-template-columns: 1fr;
    }

    .note-card-header[b-ly0gk4pcti] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .note-date[b-ly0gk4pcti] {
        font-size: 0.75rem;
    }
}

/* ── Class grouping ── */
.class-group[b-ly0gk4pcti] {
    margin-bottom: 2rem;
}

.class-group-heading[b-ly0gk4pcti] {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding: 0.4rem 0.75rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.05);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    display: flex;
    align-items: center;
}

@media (max-width: 575.98px) {
    .class-group-heading[b-ly0gk4pcti] {
        font-size: 0.8rem;
    }
}
/* /Components/Pages/StudyQuiz.razor.rz.scp.css */
.study-quiz-page[b-yg2zltrapc] {
    padding: 1.5rem;
    max-width: 780px;
    margin: 0 auto;
}

/* Status panels */
.status-panel[b-yg2zltrapc] {
    text-align: center;
    padding: 3rem 1.5rem;
    border-radius: var(--border-radius);
    color: var(--text-secondary);
}

.status-panel-loading[b-yg2zltrapc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.status-panel-error[b-yg2zltrapc] {
    background: rgba(220, 53, 69, 0.06);
    border: 1px solid rgba(220, 53, 69, 0.2);
    color: var(--text-primary);
}

.loading-spinner[b-yg2zltrapc] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-yg2zltrapc 0.7s linear infinite;
}

/* Header */
.quiz-header[b-yg2zltrapc] {
    margin-bottom: 1.5rem;
}

.back-link[b-yg2zltrapc] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

.back-link:hover[b-yg2zltrapc] {
    color: var(--primary-color);
}

.quiz-title-row h1[b-yg2zltrapc] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.quiz-meta[b-yg2zltrapc] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.meta-chip[b-yg2zltrapc] {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    background: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Questions list */
.questions-list[b-yg2zltrapc] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.question-card[b-yg2zltrapc] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    box-shadow: var(--card-shadow);
    animation: fadeIn-b-yg2zltrapc 0.2s ease;
}

.question-number[b-yg2zltrapc] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color);
    margin-bottom: 0.6rem;
}

.question-text[b-yg2zltrapc] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* Options */
.options-list[b-yg2zltrapc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.option-label[b-yg2zltrapc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.option-label:hover[b-yg2zltrapc] {
    border-color: var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.04);
}

.option-label.selected[b-yg2zltrapc] {
    border-color: var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.08);
}

.option-label input[type="radio"][b-yg2zltrapc] {
    display: none;
}

.option-key[b-yg2zltrapc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.option-label.selected .option-key[b-yg2zltrapc] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.option-text[b-yg2zltrapc] {
    font-size: 0.925rem;
    color: var(--text-primary);
    line-height: 1.4;
}

/* Submit bar */
.quiz-submit-bar[b-yg2zltrapc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    margin-top: 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    flex-wrap: wrap;
    gap: 0.75rem;
}

.answered-count[b-yg2zltrapc] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Score screen */
.score-screen[b-yg2zltrapc] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    animation: fadeIn-b-yg2zltrapc 0.3s ease;
}

.score-banner[b-yg2zltrapc] {
    text-align: center;
    padding: 2rem 1.5rem;
    border-radius: var(--border-radius);
    color: #fff;
}

.score-excellent[b-yg2zltrapc] {
    background: linear-gradient(135deg, #28a745, #20c997);
}

.score-good[b-yg2zltrapc] {
    background: linear-gradient(135deg, #fd7e14, #ffc107);
}

.score-needs-work[b-yg2zltrapc] {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
}

.score-number[b-yg2zltrapc] {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.score-label[b-yg2zltrapc] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    opacity: 0.9;
}

.score-pct[b-yg2zltrapc] {
    font-size: 1rem;
    opacity: 0.8;
}

/* Results list */
.results-list[b-yg2zltrapc] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.result-item[b-yg2zltrapc] {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background: var(--card-bg);
}

.result-correct[b-yg2zltrapc] {
    border-left: 4px solid #28a745;
}

.result-wrong[b-yg2zltrapc] {
    border-left: 4px solid #dc3545;
}

.result-number[b-yg2zltrapc] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 1.75rem;
    min-width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(var(--bg-secondary-rgb), 0.7);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    padding-top: 0.25rem;
}

.result-body[b-yg2zltrapc] {
    flex: 1;
    min-width: 0;
}

.result-question[b-yg2zltrapc] {
    font-size: 0.925rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.result-answer-row[b-yg2zltrapc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.825rem;
}

.result-icon[b-yg2zltrapc] {
    font-size: 1rem;
}

.answer-label[b-yg2zltrapc],
.correct-label[b-yg2zltrapc] {
    color: var(--text-secondary);
    font-weight: 500;
}

.answer-value[b-yg2zltrapc] {
    color: var(--text-primary);
    font-weight: 600;
}

.correct-value[b-yg2zltrapc] {
    color: #28a745;
}

.result-explanation[b-yg2zltrapc] {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.45;
}

/* Score actions */
.score-actions[b-yg2zltrapc] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Animations */
@keyframes fadeIn-b-yg2zltrapc {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spin-b-yg2zltrapc {
    to { transform: rotate(360deg); }
}

/* Dark theme */
[data-theme="dark"] .option-label:hover[b-yg2zltrapc] {
    background: rgba(var(--primary-color-rgb), 0.08);
}

[data-theme="dark"] .option-label.selected[b-yg2zltrapc] {
    background: rgba(var(--primary-color-rgb), 0.12);
}

/* Responsive */
@media (max-width: 767.98px) {
    .study-quiz-page[b-yg2zltrapc] {
        padding: 1rem;
    }

    .quiz-title-row h1[b-yg2zltrapc] {
        font-size: 1.3rem;
    }

    .score-number[b-yg2zltrapc] {
        font-size: 2.25rem;
    }
}

@media (max-width: 575.98px) {
    .question-card[b-yg2zltrapc] {
        padding: 1rem;
    }

    .result-item[b-yg2zltrapc] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .quiz-submit-bar[b-yg2zltrapc] {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

/* ── Question AI Chat Panel ───────────────────────────────────────── */

.qchat-toggle[b-yg2zltrapc] {
    margin-top: 1rem;
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.qchat-toggle:hover[b-yg2zltrapc],
.qchat-toggle-open[b-yg2zltrapc] {
    background: rgba(var(--primary-color-rgb), 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.qchat-panel[b-yg2zltrapc] {
    margin-top: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--card-bg);
    overflow: hidden;
    animation: fadeIn-b-yg2zltrapc 0.2s ease;
}

.qchat-messages[b-yg2zltrapc] {
    max-height: 280px;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    scroll-behavior: smooth;
}

.qchat-message[b-yg2zltrapc] {
    display: flex;
}

.qchat-mine[b-yg2zltrapc] {
    justify-content: flex-end;
}

.qchat-theirs[b-yg2zltrapc] {
    justify-content: flex-start;
}

.msg-bubble[b-yg2zltrapc] {
    max-width: 80%;
    padding: 0.5rem 0.875rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.qchat-mine .msg-bubble[b-yg2zltrapc] {
    background: var(--primary-color);
    color: #fff;
    border-bottom-right-radius: 0.25rem;
}

.qchat-theirs .msg-bubble[b-yg2zltrapc] {
    background: rgba(var(--bg-secondary-rgb), 0.8);
    color: var(--text-primary);
    border-bottom-left-radius: 0.25rem;
    border: 1px solid var(--border-color);
}

.qchat-empty[b-yg2zltrapc] {
    padding: 0.75rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

.qchat-typing[b-yg2zltrapc] {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.thinking-dots .dot-1[b-yg2zltrapc],
.thinking-dots .dot-2[b-yg2zltrapc],
.thinking-dots .dot-3[b-yg2zltrapc] {
    animation: dotPulse-b-yg2zltrapc 1.2s infinite;
    animation-fill-mode: both;
}

.thinking-dots .dot-2[b-yg2zltrapc] {
    animation-delay: 0.2s;
}

.thinking-dots .dot-3[b-yg2zltrapc] {
    animation-delay: 0.4s;
}

@keyframes dotPulse-b-yg2zltrapc {
    0%, 80%, 100% { opacity: 0.2; }
    40% { opacity: 1; }
}

.qchat-input-row[b-yg2zltrapc] {
    display: flex;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-top: 1px solid var(--border-color);
    background: rgba(var(--bg-secondary-rgb), 0.3);
}

.qchat-input-row .form-control[b-yg2zltrapc] {
    flex: 1;
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.qchat-input-row .form-control:focus[b-yg2zltrapc] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.15rem rgba(var(--primary-color-rgb), 0.2);
}

.qchat-input-row .btn[b-yg2zltrapc] {
    flex-shrink: 0;
}
/* /Components/Pages/StudyQuizzes.razor.rz.scp.css */
.study-quizzes-page[b-nadvpgivmb] {
    padding: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

/* Page header */
.page-header[b-nadvpgivmb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.page-header h1[b-nadvpgivmb] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* Generate form card */
.generate-form-card[b-nadvpgivmb] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 1.75rem;
    box-shadow: var(--card-shadow);
    animation: fadeIn-b-nadvpgivmb 0.2s ease;
}

.generate-form-title[b-nadvpgivmb] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}

/* Source tabs */
.source-tabs[b-nadvpgivmb] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.source-tab[b-nadvpgivmb] {
    padding: 0.45rem 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.source-tab:hover[b-nadvpgivmb] {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.source-tab.active[b-nadvpgivmb] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 500;
}

/* Segmented controls */
.segmented-control[b-nadvpgivmb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.seg-btn[b-nadvpgivmb] {
    padding: 0.4rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.seg-btn:hover[b-nadvpgivmb] {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.seg-btn.active[b-nadvpgivmb] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 600;
}

/* Status panels */
.status-panel[b-nadvpgivmb] {
    text-align: center;
    padding: 3rem 1.5rem;
    border-radius: var(--border-radius);
    color: var(--text-secondary);
}

.status-panel-loading[b-nadvpgivmb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.status-panel-error[b-nadvpgivmb] {
    background: rgba(220, 53, 69, 0.06);
    border: 1px solid rgba(220, 53, 69, 0.2);
    color: var(--text-primary);
}

.loading-spinner[b-nadvpgivmb] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-nadvpgivmb 0.7s linear infinite;
}

/* Empty state */
.empty-state[b-nadvpgivmb] {
    text-align: center;
    padding: 4rem 1.5rem;
    color: var(--text-secondary);
}

.empty-icon[b-nadvpgivmb] {
    font-size: 3rem;
    margin-bottom: 1rem;
    line-height: 1;
}

.empty-state h2[b-nadvpgivmb] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.empty-state p[b-nadvpgivmb] {
    max-width: 400px;
    margin: 0 auto 1.5rem;
}

/* Quiz grid */
.quizzes-grid[b-nadvpgivmb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.25rem;
}

.quiz-card[b-nadvpgivmb] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    animation: fadeIn-b-nadvpgivmb 0.25s ease;
}

.quiz-card:hover[b-nadvpgivmb] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--primary-color-rgb), 0.12);
}

.quiz-card-header[b-nadvpgivmb] {
    padding: 1.1rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quiz-card-header h3[b-nadvpgivmb] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    word-break: break-word;
}

.subject-badge[b-nadvpgivmb] {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    background: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 500;
}

.quiz-meta-badges[b-nadvpgivmb] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.meta-badge[b-nadvpgivmb] {
    padding: 0.2rem 0.6rem;
    background: rgba(var(--bg-secondary-rgb), 0.7);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
}

.format-badge[b-nadvpgivmb] {
    background: rgba(var(--primary-color-rgb), 0.08);
    border-color: rgba(var(--primary-color-rgb), 0.2);
    color: var(--primary-color);
}

.quiz-card-footer[b-nadvpgivmb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-color);
    background: rgba(var(--bg-secondary-rgb), 0.35);
    flex-wrap: wrap;
}

.quiz-date[b-nadvpgivmb] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    flex: 1;
    white-space: nowrap;
}

/* Delete confirmation */
.delete-confirm[b-nadvpgivmb] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.delete-confirm-text[b-nadvpgivmb] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Animations */
@keyframes fadeIn-b-nadvpgivmb {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spin-b-nadvpgivmb {
    to { transform: rotate(360deg); }
}

/* Dark theme */
[data-theme="dark"] .generate-form-card[b-nadvpgivmb] {
    background: var(--card-bg);
}

[data-theme="dark"] .source-tab[b-nadvpgivmb],
[data-theme="dark"] .seg-btn[b-nadvpgivmb] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

[data-theme="dark"] .source-tab.active[b-nadvpgivmb],
[data-theme="dark"] .seg-btn.active[b-nadvpgivmb] {
    background: var(--primary-color);
    color: #fff;
}

/* Responsive */
@media (max-width: 767.98px) {
    .study-quizzes-page[b-nadvpgivmb] {
        padding: 1rem;
    }

    .page-header[b-nadvpgivmb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .page-header h1[b-nadvpgivmb] {
        font-size: 1.35rem;
    }

    .page-header .btn[b-nadvpgivmb] {
        width: 100%;
        justify-content: center;
    }

    .quizzes-grid[b-nadvpgivmb] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .generate-form-card[b-nadvpgivmb] {
        padding: 1.1rem;
    }

    .generate-form-card .d-flex.gap-2[b-nadvpgivmb] {
        flex-direction: column;
    }

    .generate-form-card .d-flex.gap-2 .btn[b-nadvpgivmb] {
        width: 100%;
    }

    .source-tabs[b-nadvpgivmb] {
        flex-direction: column;
    }

    .segmented-control[b-nadvpgivmb] {
        flex-wrap: wrap;
    }

    .quiz-card-footer[b-nadvpgivmb] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .quiz-card-footer .btn[b-nadvpgivmb] {
        flex: 1;
        min-width: 0;
    }
}

/* ── Class grouping ── */
.class-group[b-nadvpgivmb] {
    margin-bottom: 2rem;
}

.class-group-heading[b-nadvpgivmb] {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding: 0.4rem 0.75rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.05);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    display: flex;
    align-items: center;
}

@media (max-width: 575.98px) {
    .class-group-heading[b-nadvpgivmb] {
        font-size: 0.8rem;
    }
}
/* /Components/Shared/AssignmentReviewConversationPanel.razor.rz.scp.css */
/* ── AssignmentReviewConversationPanel ───────────────────────────────────── */

.assignment-conversation-wrapper[b-p5473lv9dj] {
    margin-top: 1rem;
}

.assignment-conversation-toggle[b-p5473lv9dj] {
    background: rgba(var(--primary-color-rgb), 0.08);
    border: 1px dashed rgba(var(--primary-color-rgb), 0.4);
    color: rgb(var(--primary-color-rgb));
    border-radius: var(--border-radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.35rem 1rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.assignment-conversation-toggle:hover[b-p5473lv9dj] {
    background: rgba(var(--primary-color-rgb), 0.15);
    border-color: rgba(var(--primary-color-rgb), 0.6);
}

.assignment-conversation-toggle-active[b-p5473lv9dj] {
    background: rgba(var(--primary-color-rgb), 0.12);
    border-style: solid;
    border-color: rgba(var(--primary-color-rgb), 0.5);
}

.assignment-conversation-toggle-active:hover[b-p5473lv9dj] {
    background: rgba(var(--primary-color-rgb), 0.2);
    border-color: rgba(var(--primary-color-rgb), 0.75);
}

.assignment-conversation-panel[b-p5473lv9dj] {
    border: 1px solid rgba(var(--primary-color-rgb), 0.25);
    border-radius: var(--border-radius);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.assignment-conversation-header[b-p5473lv9dj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(var(--primary-color-rgb), 0.07);
    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.15);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.assignment-conversation-close[b-p5473lv9dj] {
    flex-shrink: 0;
}

.assignment-conversation-badge[b-p5473lv9dj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    background: rgb(var(--primary-color-rgb));
    color: #fff;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
}

.assignment-conversation-messages[b-p5473lv9dj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    max-height: 18rem;
    overflow-y: auto;
    background: var(--bg-secondary);
}

.assignment-conversation-empty[b-p5473lv9dj] {
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: center;
    padding: 1rem 0;
    margin: 0;
}

.assignment-conversation-message[b-p5473lv9dj] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.assignment-conversation-message.msg-student[b-p5473lv9dj] {
    align-items: flex-end;
}

.assignment-conversation-message.msg-assistant[b-p5473lv9dj] {
    align-items: flex-start;
}

.msg-bubble[b-p5473lv9dj] {
    max-width: 80%;
    padding: 0.5rem 0.875rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.msg-student .msg-bubble[b-p5473lv9dj] {
    background: rgb(var(--primary-color-rgb));
    color: #fff;
    border-bottom-right-radius: 0.25rem;
}

.msg-assistant .msg-bubble[b-p5473lv9dj] {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 0.25rem;
}

.msg-time[b-p5473lv9dj] {
    font-size: 0.6875rem;
    color: var(--text-muted);
    padding: 0 0.25rem;
}

.msg-typing[b-p5473lv9dj] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.875rem;
}

.typing-dot[b-p5473lv9dj] {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--text-muted);
    animation: typingPulse-b-p5473lv9dj 1.2s infinite;
}

.typing-dot:nth-child(2)[b-p5473lv9dj] { animation-delay: 0.2s; }
.typing-dot:nth-child(3)[b-p5473lv9dj] { animation-delay: 0.4s; }

@keyframes typingPulse-b-p5473lv9dj {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
    40% { opacity: 1; transform: scale(1); }
}

.assignment-conversation-error[b-p5473lv9dj] {
    background: rgba(var(--danger-color-rgb), 0.08);
    border-top: 1px solid rgba(var(--danger-color-rgb), 0.25);
    color: var(--text-primary);
    font-size: 0.8125rem;
    padding: 0.5rem 1rem;
}

.assignment-conversation-input-row[b-p5473lv9dj] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--card-bg);
}

.assignment-conversation-input[b-p5473lv9dj] {
    flex: 1;
    resize: none;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    transition: border-color 0.2s ease;
}

.assignment-conversation-input:focus[b-p5473lv9dj] {
    outline: none;
    border-color: rgb(var(--primary-color-rgb));
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.15);
}

.assignment-conversation-send[b-p5473lv9dj] {
    background: rgb(var(--primary-color-rgb));
    color: #fff;
    border-radius: var(--border-radius);
    padding: 0.5rem 0.875rem;
    font-size: 1rem;
    transition: opacity 0.2s ease;
}

.assignment-conversation-send:disabled[b-p5473lv9dj] {
    opacity: 0.45;
}

.assignment-conversation-send:not(:disabled):hover[b-p5473lv9dj] {
    opacity: 0.85;
}
/* /Components/Shared/DropZoneUpload.razor.rz.scp.css */
/* ── DropZoneUpload shared component ───────────────────────────────────── */

.drop-zone[b-krayngwl4w] {
    border: 2px dotted rgba(var(--primary-color-rgb), 0.45);
    border-radius: var(--border-radius);
    padding: 1.25rem 1rem;
    background: var(--bg-secondary);
    transition: border-color 0.2s ease, background 0.2s ease;
    cursor: default;
}

.drop-zone:hover[b-krayngwl4w],
.drop-zone.drag-over[b-krayngwl4w] {
    border-color: rgb(var(--primary-color-rgb));
    background: rgba(var(--primary-color-rgb), 0.05);
}

.drop-zone-hint[b-krayngwl4w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: center;
    pointer-events: none;
}

.drop-zone-hint i[b-krayngwl4w] {
    font-size: 1.75rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.drop-zone:hover .drop-zone-hint i[b-krayngwl4w],
.drop-zone.drag-over .drop-zone-hint i[b-krayngwl4w] {
    opacity: 1;
}

.drop-zone-hint span[b-krayngwl4w] {
    pointer-events: all;
}

.drop-zone-browse[b-krayngwl4w] {
    color: rgb(var(--primary-color-rgb));
    cursor: pointer;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.drop-zone-browse:hover[b-krayngwl4w] {
    opacity: 0.8;
}

.drop-zone-files[b-krayngwl4w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.staged-file-badge[b-krayngwl4w] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(var(--primary-color-rgb), 0.08);
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
    border-radius: var(--border-radius);
    padding: 0.2rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-remove[b-krayngwl4w] {
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
}

.btn-remove:hover[b-krayngwl4w] {
    color: var(--danger-color, #dc3545);
}
/* /Components/Shared/HintConversationPanel.razor.rz.scp.css */
/* ── HintConversationPanel ───────────────────────────────────────────────── */

.hint-conversation-wrapper[b-p8zy05xag3] {
    margin-top: 1rem;
}

/* ── Toggle button (collapsed state) ───────────────────────────────────── */

.hint-conversation-toggle[b-p8zy05xag3] {
    background: rgba(var(--primary-color-rgb), 0.08);
    border: 1px dashed rgba(var(--primary-color-rgb), 0.4);
    color: rgb(var(--primary-color-rgb));
    border-radius: var(--border-radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.35rem 1rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.hint-conversation-toggle:hover[b-p8zy05xag3] {
    background: rgba(var(--primary-color-rgb), 0.15);
    border-color: rgba(var(--primary-color-rgb), 0.6);
}

/* When prior conversation exists — solid border + slightly stronger background */
.hint-conversation-toggle-active[b-p8zy05xag3] {
    background: rgba(var(--primary-color-rgb), 0.12);
    border-style: solid;
    border-color: rgba(var(--primary-color-rgb), 0.5);
}

.hint-conversation-toggle-active:hover[b-p8zy05xag3] {
    background: rgba(var(--primary-color-rgb), 0.2);
    border-color: rgba(var(--primary-color-rgb), 0.75);
}

/* ── Panel (expanded state) ─────────────────────────────────────────────── */

.hint-conversation-panel[b-p8zy05xag3] {
    border: 1px solid rgba(var(--primary-color-rgb), 0.25);
    border-radius: var(--border-radius);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

/* ── Panel header ────────────────────────────────────────────────────────── */

.hint-conversation-header[b-p8zy05xag3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(var(--primary-color-rgb), 0.07);
    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.15);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.hint-conversation-close[b-p8zy05xag3] {
    flex-shrink: 0;
}

/* ── Learning style update banner ───────────────────────────────────────── */

.hint-conversation-style-update[b-p8zy05xag3] {
    background: rgba(var(--success-color-rgb), 0.1);
    border-bottom: 1px solid rgba(var(--success-color-rgb), 0.3);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    animation: fadeIn-b-p8zy05xag3 0.4s ease;
}

/* ── Message thread ─────────────────────────────────────────────────────── */

.hint-conversation-messages[b-p8zy05xag3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 340px;
    overflow-y: auto;
    padding: 1rem;
}

.hint-conversation-empty[b-p8zy05xag3] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-align: center;
    margin: 1rem 0;
}

/* ── Individual message ─────────────────────────────────────────────────── */

.hint-conversation-message[b-p8zy05xag3] {
    display: flex;
    flex-direction: column;
    max-width: 82%;
}

.msg-assistant[b-p8zy05xag3] {
    align-self: flex-start;
    align-items: flex-start;
}

.msg-student[b-p8zy05xag3] {
    align-self: flex-end;
    align-items: flex-end;
}

.msg-bubble[b-p8zy05xag3] {
    padding: 0.5rem 0.85rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    line-height: 1.55;
    word-break: break-word;
}

.msg-assistant .msg-bubble[b-p8zy05xag3] {
    background: rgba(var(--bg-secondary-rgb), 0.7);
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
    border-bottom-left-radius: 0.25rem;
    color: var(--text-primary);
}

.msg-student .msg-bubble[b-p8zy05xag3] {
    background: rgb(var(--primary-color-rgb));
    color: #fff;
    border-bottom-right-radius: 0.25rem;
}

.msg-time[b-p8zy05xag3] {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
    padding: 0 0.25rem;
}

/* ── Typing indicator ────────────────────────────────────────────────────── */

.msg-typing[b-p8zy05xag3] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 3rem;
}

.typing-dot[b-p8zy05xag3] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(var(--primary-color-rgb), 0.5);
    animation: typingBounce-b-p8zy05xag3 1.2s infinite ease-in-out;
}

.typing-dot:nth-child(1)[b-p8zy05xag3] { animation-delay: 0s; }
.typing-dot:nth-child(2)[b-p8zy05xag3] { animation-delay: 0.2s; }
.typing-dot:nth-child(3)[b-p8zy05xag3] { animation-delay: 0.4s; }

@keyframes typingBounce-b-p8zy05xag3 {
    0%, 60%, 100% { transform: translateY(0); }
    30%            { transform: translateY(-5px); }
}

/* ── Error banner ────────────────────────────────────────────────────────── */

.hint-conversation-error[b-p8zy05xag3] {
    background: rgba(var(--danger-color-rgb), 0.08);
    border-top: 1px solid rgba(var(--danger-color-rgb), 0.25);
    color: var(--text-primary);
    font-size: 0.8125rem;
    padding: 0.5rem 1rem;
}

/* ── Input row ───────────────────────────────────────────────────────────── */

.hint-conversation-input-row[b-p8zy05xag3] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(var(--primary-color-rgb), 0.12);
    background: var(--card-bg);
}

.hint-conversation-input[b-p8zy05xag3] {
    flex: 1;
    resize: none;
    border: 1px solid rgba(var(--primary-color-rgb), 0.25);
    border-radius: var(--border-radius);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    background: var(--card-bg);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hint-conversation-input:focus[b-p8zy05xag3] {
    outline: none;
    border-color: rgba(var(--primary-color-rgb), 0.6);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
}

.hint-conversation-input:disabled[b-p8zy05xag3] {
    opacity: 0.6;
}

.hint-conversation-send[b-p8zy05xag3] {
    background: rgb(var(--primary-color-rgb));
    border: none;
    border-radius: var(--border-radius);
    color: #fff;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.1s ease;
}

.hint-conversation-send:not(:disabled):hover[b-p8zy05xag3] {
    opacity: 0.88;
    transform: scale(1.06);
}

.hint-conversation-send:disabled[b-p8zy05xag3] {
    opacity: 0.45;
}

/* ── Badge ───────────────────────────────────────────────────────────────── */

.hint-conversation-badge[b-p8zy05xag3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--primary-color-rgb));
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    min-width: 1.2em;
    padding: 0.1em 0.4em;
    border-radius: var(--border-radius-pill);
}

/* ── Animations ─────────────────────────────────────────────────────────── */

@keyframes fadeIn-b-p8zy05xag3 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Dark theme ─────────────────────────────────────────────────────────── */

:global([data-theme="dark"]) .hint-conversation-panel[b-p8zy05xag3] {
    background: var(--card-bg);
    border-color: rgba(var(--primary-color-rgb), 0.3);
}

:global([data-theme="dark"]) .hint-conversation-input[b-p8zy05xag3] {
    background: var(--card-bg);
    color: var(--text-primary);
}

:global([data-theme="dark"]) .hint-conversation-close[b-p8zy05xag3] {
    filter: invert(1);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    .hint-conversation-messages[b-p8zy05xag3] {
        max-height: 260px;
    }

    .hint-conversation-message[b-p8zy05xag3] {
        max-width: 92%;
    }

    .hint-conversation-input-row[b-p8zy05xag3] {
        padding: 0.5rem 0.75rem;
    }
}
/* /Components/Shared/MarkdownDisplay.razor.rz.scp.css */
/* ── Markdown content ──────────────────────────────────────────────────── */

.markdown-content[b-66jd7zc1rb] {
    line-height: 1.7;
    color: var(--text-primary);
}

/* ::deep is required for all inner selectors because the child elements are
   injected as a MarkupString and do not receive Blazor's CSS scope attribute. */

.markdown-content[b-66jd7zc1rb]  p {
    margin-bottom: 0.75rem;
}

.markdown-content[b-66jd7zc1rb]  p:last-child {
    margin-bottom: 0;
}

.markdown-content[b-66jd7zc1rb]  ul,
.markdown-content[b-66jd7zc1rb]  ol {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.markdown-content[b-66jd7zc1rb]  li {
    margin-bottom: 0.25rem;
}

.markdown-content[b-66jd7zc1rb]  code {
    font-size: 0.875em;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    background: rgba(var(--primary-color-rgb), 0.08);
    color: var(--text-primary);
}

.markdown-content[b-66jd7zc1rb]  pre {
    background: rgba(var(--bg-secondary-rgb), 0.6);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem;
    overflow-x: auto;
    margin-bottom: 0.75rem;
}

.markdown-content[b-66jd7zc1rb]  pre code {
    background: none;
    padding: 0;
    font-size: 0.875rem;
}

.markdown-content[b-66jd7zc1rb]  strong {
    font-weight: 600;
    color: var(--text-primary);
}

/* ── Mermaid diagrams ───────────────────────────────────────────────────── */

.markdown-content[b-66jd7zc1rb]  .mermaid-diagram {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
    overflow-x: auto;
}

.markdown-content[b-66jd7zc1rb]  .mermaid-diagram svg {
    max-width: 100%;
    border-radius: var(--border-radius);
}

/* ── KaTeX display math ─────────────────────────────────────────────────── */

.markdown-content[b-66jd7zc1rb]  .katex-display {
    overflow-x: auto;
    padding: 0.5rem 0;
    margin: 0.5rem 0;
}