:root {
    --liri-primary: #2F65F6;
    --liri-primary-dark: #1746D4;
    --liri-primary-light: #EAF1FF;
    --liri-secondary: #22C7B8;
    --liri-accent: #FFB13B;
    --liri-success: #20B486;
    --liri-warning: #F5A524;
    --liri-danger: #E94B5F;
    --liri-text: #14213D;
    --liri-text-muted: #667085;
    --liri-border: #E4ECF7;
    --liri-surface: #FFFFFF;
    --liri-background: #F5F9FF;
    --liri-radius-sm: 12px;
    --liri-radius-md: 18px;
    --liri-radius-lg: 26px;
    --liri-shadow-sm: 0 8px 24px rgba(20, 33, 61, 0.06);
    --liri-shadow-md: 0 18px 48px rgba(20, 33, 61, 0.10);
    --ai-primary: var(--liri-primary);
    --ai-primary-hover: var(--liri-primary-dark);
    --ai-primary-soft: var(--liri-primary-light);
    --ai-teal: var(--liri-secondary);
    --ai-accent: var(--liri-accent);
    --ai-teal-soft: #E8FAF8;
    --ai-success: #22B68A;
    --ai-success-soft: #E9F8F2;
    --ai-warning: var(--liri-warning);
    --ai-warning-soft: #FFF6DC;
    --ai-danger: var(--liri-danger);
    --ai-danger-soft: #FDECEF;
    --ai-info: #3B82F6;
    --ai-info-soft: #EAF2FF;
    --ai-navy: var(--liri-text);
    --ai-text: #1D2939;
    --ai-text-secondary: var(--liri-text-muted);
    --ai-text-muted: #98A2B3;
    --ai-border: var(--liri-border);
    --ai-background: var(--liri-background);
    --ai-surface: var(--liri-surface);
    --ai-sidebar: var(--liri-surface);
    --ai-brand-gradient: linear-gradient(135deg, var(--liri-primary) 0%, #3984F6 50%, var(--liri-secondary) 100%);
    --ai-shadow-sm: var(--liri-shadow-sm);
    --ai-shadow-md: var(--liri-shadow-md);
    --ai-radius-sm: var(--liri-radius-sm);
    --ai-radius-md: var(--liri-radius-md);
    --ai-radius-lg: var(--liri-radius-lg);
    --ai-sidebar-width: 292px;
    --ai-sidebar-collapsed-width: 84px;
}

html {
    overflow-x: hidden;
}

body {
    background: var(--ai-background);
    color: var(--ai-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    overflow-x: hidden;
}

.auth-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 8%, rgba(79, 99, 233, 0.13), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(25, 182, 165, 0.12), transparent 28%),
        linear-gradient(135deg, #F1F5FF 0%, #F8FBFF 48%, #FFFFFF 100%) !important;
}

.auth-topbar {
    border-bottom: 1px solid rgba(228, 233, 242, 0.86) !important;
    background: rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(14px);
}

.auth-main {
    width: min(100%, 520px);
    margin: 0 auto;
    padding: clamp(32px, 7vh, 72px) 16px 48px;
}

.auth-heading {
    margin-bottom: 20px;
    text-align: center;
}

.auth-heading h1 {
    color: var(--ai-navy);
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 800;
    letter-spacing: 0;
}

.auth-heading p {
    color: var(--ai-text-secondary);
}

.auth-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: var(--ai-radius-lg) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 24px 64px rgba(31, 42, 68, 0.12) !important;
}

.auth-card .card-body {
    padding: clamp(20px, 4vw, 32px);
}

.auth-card .form-label {
    color: var(--ai-navy);
    font-weight: 700;
}

.auth-card .form-control {
    min-height: 48px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 18px 0;
    color: var(--ai-text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--ai-border);
}

.auth-help {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ai-border);
    color: var(--ai-text-secondary);
    font-size: 14px;
    text-align: center;
}

a,
button,
.btn {
    touch-action: manipulation;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
    outline: 3px solid rgba(79, 99, 233, 0.24);
    outline-offset: 2px;
}

.app-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 8%, rgba(47, 101, 246, 0.08), transparent 28%),
        radial-gradient(circle at 85% 0%, rgba(34, 199, 184, 0.08), transparent 24%),
        var(--ai-background);
}

.app-sidebar {
    width: var(--ai-sidebar-width);
    background: var(--ai-sidebar);
    border-right: 1px solid var(--ai-border);
    box-shadow: var(--ai-shadow-sm);
    color: var(--ai-text);
    min-height: 0;
    transition: transform 180ms ease, width 180ms ease;
}

.sidebar-fixed {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1060;
    border-radius: 0;
    overflow: hidden;
}

.brand-row {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 44px;
    gap: 12px;
    align-items: start !important;
    border-bottom: 1px solid var(--ai-border);
    min-height: 120px;
    padding: 22px 18px !important;
}

.brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: var(--ai-brand-gradient);
    box-shadow: 0 14px 28px rgba(47, 101, 246, 0.24);
    flex: 0 0 46px;
}

.brand-mark-image {
    overflow: visible;
    background: transparent;
    box-shadow: none;
}

.brand-owl {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(47, 101, 246, 0.14));
}

.brand-mark-sm .brand-owl {
    width: 38px;
    height: 38px;
}

.brand-mark-sm {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 10px;
}

.brand-copy .fw-bold {
    color: var(--ai-navy);
    font-size: 22px;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.brand-copy .text-muted,
.brand-descriptor {
    color: var(--ai-text-secondary) !important;
    font-size: 13px;
    font-weight: 700;
    margin-top: 3px;
}

.brand-tagline {
    max-width: 180px;
    color: #7A8699;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    margin-top: 7px;
}

.brand-row .desktop-collapse-btn {
    margin-left: 0 !important;
    align-self: start;
    position: relative;
    z-index: 1070;
}

.desktop-collapse-btn,
.mobile-menu-btn {
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--ai-radius-sm);
    color: var(--ai-text-secondary);
    background: var(--ai-surface);
    border-color: var(--ai-border) !important;
}

.desktop-collapse-btn:hover,
.mobile-menu-btn:hover {
    color: var(--ai-primary);
    background: var(--ai-primary-soft);
}

.sidebar-nav-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 12px 0;
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 transparent;
}

.sidebar-nav {
    padding: 0 12px 12px;
}

.sidebar-section {
    padding: 14px 10px 6px;
    margin-top: 2px;
    color: var(--ai-text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 2px 0;
    padding: 10px 12px;
    border-radius: 14px;
    color: #475467;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.sidebar-link:hover {
    background: #F5F8FF;
    color: var(--ai-primary);
    text-decoration: none;
    transform: none;
}

.sidebar-link.active {
    background: var(--ai-brand-gradient);
    color: #FFFFFF;
    box-shadow: 0 14px 28px rgba(47, 101, 246, 0.22);
}

.nav-count-badge {
    min-width: 22px;
    height: 22px;
    margin-left: auto;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EF4444;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(239, 68, 68, 0.22);
}

.sidebar-link.active .nav-count-badge {
    background: rgba(255, 255, 255, 0.92);
    color: var(--ai-primary);
}

.sidebar-link.logout {
    color: #B4232E;
}

.sidebar-link.logout:hover {
    background: var(--ai-danger-soft);
    color: #B4232E;
}

.sidebar-link-footer {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
}

.sidebar-icon {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 22px;
    color: currentColor;
    font-size: 14px;
    opacity: 0.9;
}

.sidebar-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sidebar-account {
    border-top: 1px solid var(--ai-border);
    padding: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), #FFFFFF);
}

.liri-sidebar-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid #D8E8FF;
    border-radius: 20px;
    background: linear-gradient(135deg, #F7FBFF, #ECF8FF);
}

.liri-sidebar-mascot {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.liri-sidebar-card-title {
    color: var(--ai-navy);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.2;
}

.liri-sidebar-card-copy {
    color: var(--ai-text-secondary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    margin-top: 3px;
}

.sidebar-account-card {
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px 12px;
    text-align: left;
    border-radius: 14px;
    cursor: pointer;
}

.sidebar-account-card:hover,
.sidebar-account-card:focus-visible {
    background: #F6F8FC;
    outline: 0;
}

.sidebar-account-menu {
    position: relative;
}

.sidebar-account-chevron {
    margin-left: auto;
    color: var(--ai-text-secondary);
    font-size: 11px;
}

.sidebar-account-dropdown {
    display: none;
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: calc(100% + 8px);
    z-index: 1060;
    padding: 8px;
    border: 1px solid var(--ai-border);
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 18px 45px rgba(31, 42, 68, 0.16);
}

.sidebar-account-menu.show .sidebar-account-dropdown {
    display: block;
}

.sidebar-account-dropdown .dropdown-item {
    border-radius: 10px;
    padding: 9px 10px;
    color: var(--ai-text);
    font-size: 13px;
    font-weight: 700;
}

.sidebar-account-dropdown .dropdown-item:hover {
    background: var(--ai-primary-soft);
    color: var(--ai-primary);
}

.sidebar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    flex: 0 0 36px;
    background: var(--ai-teal-soft);
    color: #0E8177;
}

.sidebar-account-copy {
    min-width: 0;
}

.sidebar-account-name {
    color: var(--ai-text);
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-account-role {
    color: var(--ai-text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.mobile-sidebar-header {
    min-height: 64px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ai-border);
}

.sidebar-close-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ai-text-secondary);
    opacity: 1;
}

.app-main {
    margin-left: var(--ai-sidebar-width);
    min-height: 100vh;
    padding: 28px 32px 36px;
    transition: margin-left 180ms ease;
}

.app-topbar {
    min-height: 76px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--ai-border);
    box-shadow: 0 10px 30px rgba(20, 33, 61, 0.055);
    backdrop-filter: blur(12px);
    overflow: visible;
    position: relative;
    z-index: 1035;
}

.topbar-spacer {
    min-height: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

.topbar-mobile-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ai-navy);
    font-weight: 850;
    text-decoration: none;
}

.topbar-mobile-brand span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-profile {
    min-height: 58px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-left: 18px;
    border-left: 1px solid var(--ai-border);
    max-width: min(100%, 360px);
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    touch-action: manipulation;
}

.topbar-profile-menu {
    position: relative;
}

.topbar-profile:hover,
.topbar-profile:focus-visible {
    background: rgba(79, 99, 233, 0.06);
    outline: none;
}

.topbar-profile.dropdown-toggle::after {
    display: none;
}

.topbar-notification {
    position: relative;
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 14px;
    color: var(--ai-navy);
    background: transparent;
}

.topbar-notification span {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 9px;
    height: 9px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: var(--ai-danger);
}

.topbar-avatar {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: #FFFFFF;
    background: linear-gradient(135deg, #9AB6FF, #22C7B8);
    box-shadow: 0 8px 18px rgba(20, 33, 61, 0.14);
    overflow: hidden;
    flex: 0 0 44px;
}

.topbar-avatar img,
.sidebar-avatar img,
.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topbar-profile-copy {
    min-width: 150px;
    max-width: 220px;
    overflow: hidden;
}

.topbar-profile-name {
    color: var(--ai-navy);
    font-size: 15px;
    font-weight: 850;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-profile-role {
    color: var(--ai-text-secondary);
    font-size: 13px;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-chevron {
    color: var(--ai-primary);
    font-size: 13px;
}

.topbar-profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 230px;
    padding: 8px;
    border: 1px solid var(--ai-border);
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: var(--ai-shadow-md);
    z-index: 1060;
}

.topbar-profile-dropdown .dropdown-item {
    min-height: 42px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    color: var(--ai-navy);
    font-weight: 750;
}

.topbar-profile-dropdown .dropdown-item:hover {
    background: var(--ai-primary-soft);
    color: var(--ai-primary);
}

.profile-avatar {
    width: 112px;
    height: 112px;
    display: inline-grid;
    place-items: center;
    border-radius: 32px;
    color: #FFFFFF;
    background: var(--ai-brand-gradient);
    box-shadow: var(--ai-shadow-md);
    overflow: hidden;
    font-size: 42px;
}

.profile-card {
    overflow: hidden;
}

.profile-card::before {
    content: "";
    display: block;
    height: 72px;
    background:
        radial-gradient(circle at 22% 0%, rgba(255,255,255,0.44), transparent 28%),
        var(--ai-brand-gradient);
}

.profile-card .card-body {
    margin-top: -48px;
}

.settings-brand-preview {
    min-height: 190px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-lg);
    background:
        radial-gradient(circle at 15% 15%, rgba(79, 99, 233, 0.08), transparent 32%),
        #FFFFFF;
}

.settings-brand-preview img {
    max-width: min(80%, 180px);
    max-height: 170px;
    object-fit: contain;
}

.form-select {
    width: 100%;
    min-height: 44px;
    display: block;
    padding: 0.55rem 2.2rem 0.55rem 0.85rem;
    border: 1px solid #D7DEE9;
    border-radius: 12px;
    color: var(--ai-navy);
    background-color: #FFFFFF;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.45;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #687693 50%),
        linear-gradient(135deg, #687693 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.form-select:focus {
    border-color: var(--ai-primary);
    box-shadow: 0 0 0 0.2rem rgba(79, 99, 233, 0.14);
    outline: none;
}

.app-topbar .text-muted {
    color: var(--ai-text-secondary) !important;
}

.page-title {
    color: var(--ai-navy);
    font-size: 30px;
    font-weight: 850;
    letter-spacing: 0;
}

.content-wrap {
    max-width: 100%;
}

.content-wrap .card,
.ai-metric,
.metric-card,
.report-card {
    border: 1px solid var(--ai-border);
    border-radius: 22px;
    background: var(--ai-surface);
    box-shadow: 0 10px 28px rgba(20, 33, 61, 0.052);
}

.content-wrap .card:hover {
    box-shadow: var(--ai-shadow-sm);
}

.content-wrap .card .card-header {
    background: var(--ai-surface);
    border-bottom: 1px solid var(--ai-border);
}

.content-wrap > .card,
.content-wrap > .row,
.content-wrap > .ai-hero {
    margin-bottom: 16px;
}

.content-wrap .card-header {
    padding: 16px 18px;
}

.content-wrap .card-header .fw-semibold,
.content-wrap .card-header.fw-semibold {
    color: var(--ai-navy);
    font-size: 16px;
    font-weight: 700 !important;
}

.content-wrap .card-body {
    color: var(--ai-text);
}

.content-wrap .form-label {
    color: var(--ai-text);
    font-size: 13px;
    font-weight: 700;
}

.content-wrap .form-text {
    color: var(--ai-text-secondary);
    font-size: 12px;
}

.content-wrap .form-control,
.content-wrap .form-select {
    border-color: #D9E2EF;
    color: var(--ai-text);
    min-height: 42px;
}

.content-wrap textarea.form-control {
    min-height: auto;
}

.content-wrap .form-control:focus,
.content-wrap .form-select:focus {
    border-color: #8E9BFF;
    box-shadow: 0 0 0 0.2rem rgba(79, 99, 233, 0.12);
}

.content-wrap .alert {
    border-radius: var(--ai-radius-md);
    border-width: 1px;
}

.content-wrap .alert-info {
    color: #17456F;
    background: var(--ai-info-soft);
    border-color: #C9DCF9;
}

.content-wrap .alert-warning {
    color: #6B4A00;
    background: var(--ai-warning-soft);
    border-color: #F5DE99;
}

.content-wrap .alert-danger {
    color: #8F1F2B;
    background: var(--ai-danger-soft);
    border-color: #F4C5CC;
}

.content-wrap .table {
    color: var(--ai-text);
}

.content-wrap .table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--ai-border);
    color: var(--ai-text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.content-wrap .table td {
    border-top: 1px solid #EEF2F7;
    color: var(--ai-text);
    font-size: 14px;
    vertical-align: middle;
}

.content-wrap .table tbody tr:hover {
    background: #FAFBFF;
}

.content-wrap .table-warning,
.content-wrap .table-warning > th,
.content-wrap .table-warning > td {
    background-color: var(--ai-warning-soft) !important;
}

.badge {
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 0.35em 0.62em;
}

.text-bg-primary {
    color: var(--ai-primary) !important;
    background: var(--ai-primary-soft) !important;
}

.text-bg-secondary {
    color: #475467 !important;
    background: #F1F5F9 !important;
}

.text-bg-success {
    color: #06745F !important;
    background: var(--ai-success-soft) !important;
}

.text-bg-warning {
    color: #7A5200 !important;
    background: var(--ai-warning-soft) !important;
}

.text-bg-light {
    color: var(--ai-text-secondary) !important;
    background: #F8FAFC !important;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 10px;
    font-weight: 700;
}

.btn-sm {
    min-height: 34px;
}

.btn-outline-secondary {
    color: #475467;
    border-color: #CDD6E3;
    background: #FFFFFF;
}

.btn-outline-secondary:hover {
    color: var(--ai-text);
    border-color: #B8C2D3;
    background: #F8FAFC;
}

.btn-outline-danger {
    color: #B4232E;
    border-color: #F4C5CC;
    background: #FFFFFF;
}

.btn-outline-danger:hover {
    color: #FFFFFF;
    border-color: var(--ai-danger);
    background: var(--ai-danger);
}

.btn-danger {
    background: var(--ai-danger) !important;
    border-color: var(--ai-danger) !important;
}

.modal {
    z-index: 5010 !important;
}

.modal-backdrop {
    z-index: 5000 !important;
}

.modal-content {
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-lg);
    box-shadow: 0 24px 72px rgba(31, 42, 68, 0.18);
    overflow: hidden;
}

.modal-header,
.modal-footer {
    border-color: var(--ai-border);
}

.modal-title {
    color: var(--ai-navy);
    font-size: 18px;
    font-weight: 700;
}

.ai-actionbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 16px;
}

.ai-filter-card {
    margin-bottom: 16px;
}

.student-filter-row,
.student-quiz-filter-row,
.attempt-filter-row,
.teacher-attempt-filters,
.admin-attempt-filters,
.quiz-filter-grid,
.quiz-filter-actions {
    display: grid;
    gap: 12px !important;
    align-items: end;
}

.student-filter-row {
    grid-template-columns: minmax(260px, 320px) minmax(260px, 1fr) auto;
}

.student-quiz-filter-row {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
}

.student-quiz-filter-search {
    grid-column: 1 / -1;
}

.student-quiz-filter-actions {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 8px;
}

.attempt-filter-row {
    grid-template-columns: minmax(240px, 1fr) 170px 170px auto;
}

.teacher-attempt-filters,
.admin-attempt-filters {
    grid-template-columns: minmax(180px, 1fr) minmax(160px, 0.85fr) 150px 150px auto;
}

.teacher-filter-search,
.admin-filter-search {
    grid-column: 1 / -1;
}

.quiz-filter-grid {
    grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1.2fr) minmax(160px, 0.75fr) minmax(160px, 0.75fr);
}

.quiz-filter-actions {
    grid-template-columns: minmax(260px, 1fr) auto;
    margin-top: 12px;
}

.ai-mini-stat {
    height: 100%;
    padding: 14px;
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-md);
    background: #FFFFFF;
    box-shadow: var(--ai-shadow-sm);
}

.ai-mini-stat .h4,
.ai-mini-stat .h6 {
    color: var(--ai-navy);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.report-card,
.metric-card,
.ai-metric {
    min-height: 108px;
}

.report-card .text-muted,
.metric-card .text-muted,
.ai-metric .text-muted {
    color: var(--ai-text-secondary) !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.report-value,
.metric-card .value,
.ai-metric .value {
    color: var(--ai-navy);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.12;
    font-variant-numeric: tabular-nums;
}

.report-bar,
.bar-track,
.ai-bar {
    height: 9px;
    border-radius: 999px;
    background: #EDF1F6;
    overflow: hidden;
}

.report-bar span,
.bar-track span,
.ai-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ai-teal), var(--ai-primary));
}

.content-wrap pre,
.passage-preview,
.feedback-box {
    color: var(--ai-text);
    border-color: var(--ai-border) !important;
    border-radius: var(--ai-radius-md) !important;
    background: #FFFFFF !important;
    overflow-wrap: anywhere;
}

.border.rounded {
    border-color: var(--ai-border) !important;
    border-radius: var(--ai-radius-md) !important;
}

.dashboard-metrics {
    align-items: stretch;
}

.ai-stat-card {
    min-height: 116px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-lg);
    background: var(--ai-surface);
    box-shadow: var(--ai-shadow-sm);
}

.ai-stat-icon {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 42px;
    border-radius: 12px;
    font-size: 16px;
}

.ai-stat-icon-primary {
    color: var(--ai-primary);
    background: var(--ai-primary-soft);
}

.ai-stat-icon-teal {
    color: #0E8177;
    background: var(--ai-teal-soft);
}

.ai-stat-icon-info {
    color: var(--ai-info);
    background: var(--ai-info-soft);
}

.ai-stat-icon-warning {
    color: #946200;
    background: var(--ai-warning-soft);
}

.ai-stat-label {
    color: var(--ai-text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ai-stat-value {
    margin-top: 2px;
    color: var(--ai-navy);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.ai-data-card {
    overflow: hidden;
}

.ai-data-card .card-header {
    padding: 16px 18px;
}

.ai-data-card .card-body {
    padding: 18px;
}

.ai-card-title {
    color: var(--ai-navy);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.ai-card-subtitle {
    margin-top: 2px;
    color: var(--ai-text-secondary);
    font-size: 13px;
    font-weight: 400;
}

.ai-table {
    color: var(--ai-text);
}

.ai-table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--ai-border);
    color: var(--ai-text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.ai-table td {
    border-top: 1px solid #EEF2F7;
    color: var(--ai-text);
    font-size: 14px;
}

.ai-table tbody tr:hover {
    background: #FAFBFF;
}

.ai-empty-row,
.ai-empty-state {
    padding: 20px !important;
    color: var(--ai-text-secondary);
    font-size: 14px;
    text-align: center;
}

.ai-student-hero {
    border: 1px solid rgba(79, 99, 233, 0.18);
    background:
        linear-gradient(135deg, rgba(79, 99, 233, 0.96), rgba(34, 184, 167, 0.94)),
        var(--ai-brand-gradient);
    border-radius: var(--ai-radius-lg);
    box-shadow: 0 12px 28px rgba(31, 42, 68, 0.12);
}

.ai-student-hero::before {
    height: 0;
}

.ai-eyebrow {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ai-hero-copy {
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
}

.ai-profile-card .card-body {
    padding: 18px;
}

.ai-profile-list {
    display: grid;
    gap: 14px;
}

.ai-profile-value {
    margin-top: 3px;
    color: var(--ai-text);
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.lesson-card {
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-lg);
    background: linear-gradient(180deg, #FFFFFF, #FBFCFE);
    box-shadow: var(--ai-shadow-sm);
    transition: box-shadow 150ms ease, border-color 150ms ease;
}

.lesson-card:hover {
    border-color: #C9D1FF;
    box-shadow: 0 10px 28px rgba(31, 42, 68, 0.08);
}

.lesson-card-complete {
    border-color: #BFEFE4 !important;
    background: linear-gradient(180deg, #F6FFFB, #FFFFFF) !important;
    box-shadow: 0 12px 30px rgba(34, 184, 167, 0.10) !important;
}

.lesson-card-complete .lesson-progress-bar > span {
    background: linear-gradient(90deg, #22C3A6, #0D9F82);
}

.guided-next-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(47, 101, 246, 0.16);
    border-radius: var(--ai-radius-md);
    background: linear-gradient(135deg, rgba(239, 245, 255, 0.96), rgba(255, 255, 255, 0.98));
    box-shadow: 0 14px 34px rgba(47, 101, 246, 0.08);
}

.guided-stepper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
}

.guided-stepper-hero {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    max-width: 760px;
}

.guided-step {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--ai-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--ai-navy);
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(25, 35, 58, 0.05);
}

.guided-step:hover {
    color: var(--ai-primary);
    text-decoration: none;
    transform: translateY(-1px);
}

.guided-step-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    flex: 0 0 14px;
    background: #CBD5E1;
    box-shadow: inset 0 0 0 4px #F8FAFC;
}

.guided-step-label {
    display: block;
    min-width: 0;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
}

.guided-step-detail {
    display: block;
    color: var(--ai-text-secondary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.guided-step.complete {
    border-color: rgba(42, 199, 105, 0.22);
    background: #F0FDF4;
}

.guided-step.complete .guided-step-dot {
    background: #2AC769;
}

.guided-step.current,
.guided-step.active-step {
    border-color: rgba(47, 101, 246, 0.32);
    background: linear-gradient(135deg, #EFF5FF, #FFFFFF);
    box-shadow: 0 16px 34px rgba(47, 101, 246, 0.12);
}

.guided-step.current .guided-step-dot,
.guided-step.active-step .guided-step-dot {
    background: var(--ai-primary);
}

.guided-step.upcoming {
    color: #64748B;
}

.guided-stepper-hero .guided-step {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    box-shadow: none;
}

.guided-stepper-hero .guided-step.complete {
    background: rgba(42, 199, 105, 0.25);
}

.guided-stepper-hero .guided-step.current {
    background: rgba(255, 255, 255, 0.28);
}

.guided-stepper-hero .guided-step-dot {
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.7);
}

.program-journey {
    display: grid;
    gap: 10px;
}

.program-step {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-lg);
    background: #FFFFFF;
    box-shadow: var(--ai-shadow-sm);
}

.program-step-index {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    background: #EEF2FF;
    color: var(--ai-primary);
    font-weight: 900;
}

.program-step.complete {
    border-color: rgba(42, 199, 105, 0.26);
    background: linear-gradient(180deg, #F6FFFB, #FFFFFF);
}

.program-step.complete .program-step-index {
    background: #DCFCE7;
    color: #15803D;
}

.program-step.current {
    border-color: rgba(47, 101, 246, 0.35);
    box-shadow: 0 18px 42px rgba(47, 101, 246, 0.12);
}

.program-step.locked {
    color: #64748B;
    background: #F8FAFC;
}

.program-step-title {
    color: var(--ai-navy);
    font-weight: 900;
}

.program-step-meta,
.program-current {
    color: var(--ai-text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.program-flow-arrow {
    display: grid;
    place-items: center;
    color: #94A3B8;
}

.assigned-component-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.assigned-component {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid var(--ai-border);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--ai-text-secondary);
    font-size: 12px;
    font-weight: 800;
}

.assigned-component.complete {
    border-color: rgba(42, 199, 105, 0.24);
    background: #F0FDF4;
    color: #166534;
}

.assigned-component.current {
    border-color: rgba(47, 101, 246, 0.26);
    background: var(--ai-primary-soft);
    color: var(--ai-primary);
}

.assigned-component.upcoming {
    background: #F8FAFC;
}

.task-hero {
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.22), transparent 22%),
        linear-gradient(135deg, #10215F 0%, #315CF6 54%, #1DB6A4 100%);
}

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

.task-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
    font-weight: 800;
}

.task-hero-meta strong {
    color: #FFFFFF;
}

.task-journey {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-lg);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--ai-shadow-sm);
}

.task-card .lesson-card {
    border-color: #D8E8FF;
    background:
        linear-gradient(180deg, #FFFFFF, #F8FBFF);
    box-shadow: 0 14px 34px rgba(31, 42, 68, 0.055);
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.task-card .lesson-card:hover {
    transform: translateY(-2px);
    border-color: rgba(47, 101, 246, 0.28);
    box-shadow: 0 20px 46px rgba(31, 42, 68, 0.09);
}

.task-card .lesson-card-complete {
    border-color: rgba(42, 199, 105, 0.28);
    background: linear-gradient(180deg, #F4FFF9, #FFFFFF);
}

.formal-item-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.assessment-mini-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--ai-border);
    border-radius: 14px;
    color: var(--ai-text);
    text-decoration: none;
    background: #FFFFFF;
}

.assessment-mini-card:hover {
    color: var(--ai-primary);
    text-decoration: none;
    border-color: rgba(47, 101, 246, 0.26);
}

.assessment-mini-card small {
    display: block;
    color: var(--ai-text-secondary);
    font-weight: 700;
}

.milestone-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(42, 199, 105, 0.24);
    border-radius: var(--ai-radius-lg);
    background: linear-gradient(135deg, #16A34A, #2563EB);
    color: #FFFFFF;
    box-shadow: 0 22px 58px rgba(37, 99, 235, 0.18);
}

.milestone-kicker {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.milestone-card p {
    color: rgba(255, 255, 255, 0.86);
}

.milestone-burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.milestone-burst span {
    position: absolute;
    width: 8px;
    height: 16px;
    border-radius: 3px;
    background: #FDE68A;
    opacity: 0;
    animation: milestone-pop 900ms ease-out 1;
}

.milestone-burst span:nth-child(1) { left: 12%; top: 20%; background: #FDE68A; animation-delay: 30ms; }
.milestone-burst span:nth-child(2) { left: 34%; top: 10%; background: #A7F3D0; animation-delay: 80ms; }
.milestone-burst span:nth-child(3) { left: 58%; top: 18%; background: #BFDBFE; animation-delay: 120ms; }
.milestone-burst span:nth-child(4) { right: 18%; top: 14%; background: #FBCFE8; animation-delay: 160ms; }
.milestone-burst span:nth-child(5) { right: 8%; top: 34%; background: #FDE68A; animation-delay: 200ms; }

@keyframes milestone-pop {
    0% { opacity: 0; transform: translateY(18px) rotate(0deg); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-44px) rotate(160deg); }
}

.lesson-progress {
    padding-top: 12px;
    border-top: 1px solid var(--ai-border);
}

.lesson-progress-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #E9EEF6;
}

.lesson-progress-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ai-brand-gradient);
}

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

.lesson-score-grid > div,
.quiz-score-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #E3EAF4;
    border-radius: 12px;
    background: #F8FAFD;
}

.lesson-score-grid span,
.lesson-score-grid small,
.lesson-score-grid strong,
.quiz-score-grid span,
.quiz-score-grid small,
.quiz-score-grid strong {
    display: block;
}

.lesson-score-grid span,
.quiz-score-grid span {
    color: var(--ai-text-secondary);
    font-size: 11px;
    font-weight: 750;
}

.lesson-score-grid strong,
.quiz-score-grid strong {
    margin-top: 2px;
    color: var(--ai-navy);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

.lesson-score-grid small,
.quiz-score-grid small {
    margin-top: 1px;
    color: var(--ai-text-secondary);
    font-size: 10px;
}

.passage-tile,
.quiz-tile,
.quiz-card,
.attempt-card {
    border: 1px solid var(--ai-border) !important;
    border-radius: var(--ai-radius-lg) !important;
    background: linear-gradient(180deg, #FFFFFF, #FBFCFE) !important;
    box-shadow: var(--ai-shadow-sm) !important;
}

.attempt-row-practice {
    box-shadow: inset 4px 0 0 var(--ai-teal);
}

.attempt-row-quiz {
    box-shadow: inset 4px 0 0 var(--ai-primary);
}

.attempt-card {
    padding: 16px;
}

.attempt-card.practice {
    border-left: 5px solid var(--ai-teal) !important;
}

.attempt-card.quiz {
    border-left: 5px solid var(--ai-primary) !important;
}

.quiz-tile:hover,
.quiz-card:hover,
.attempt-card:hover {
    box-shadow: 0 10px 28px rgba(31, 42, 68, 0.08) !important;
    transform: none !important;
}

.quiz-tile.ready,
.quiz-card.completed {
    border-color: #BFEFE4 !important;
    background: linear-gradient(180deg, #F6FFFB, #FFFFFF) !important;
}

.quiz-count,
.attempt-score {
    display: inline-grid;
    min-width: 42px;
    min-height: 38px;
    place-items: center;
    border-radius: var(--ai-radius-sm);
    color: var(--ai-primary) !important;
    background: var(--ai-primary-soft) !important;
    padding: 7px 10px;
    text-align: center;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.quiz-icon {
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--ai-radius-md);
    color: #FFFFFF;
    background: var(--ai-brand-gradient) !important;
    box-shadow: 0 10px 24px rgba(79, 99, 233, 0.2) !important;
}

.reading-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.liri-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    color: #50618C;
    font-size: 13px;
    font-weight: 650;
}

.liri-breadcrumb a {
    color: #50618C;
    text-decoration: none;
}

.liri-breadcrumb strong {
    color: var(--ai-navy);
}

.liri-breadcrumb i {
    font-size: 11px;
}

.liri-segmented {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--ai-border);
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: var(--ai-shadow-sm);
}

.liri-segmented a {
    min-width: 96px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border-radius: 999px;
    color: var(--ai-text);
    font-weight: 800;
    text-decoration: none;
}

.liri-segmented a.active {
    color: #FFFFFF;
    background: var(--ai-brand-gradient);
    box-shadow: 0 10px 20px rgba(47, 101, 246, 0.18);
}

.reader-stage {
    position: relative;
    min-height: 68vh;
    overflow: hidden;
    border: 1px solid #DCE7F7;
    border-radius: 30px;
    border-color: var(--ai-border) !important;
    background: var(--ai-surface) !important;
    box-shadow: 0 16px 46px rgba(20, 33, 61, 0.07) !important;
}

.reader-stage::before {
    display: none;
}

.reader-hero,
.settings-hero,
.student-hero,
.ai-hero {
    background:
        linear-gradient(135deg, rgba(79, 99, 233, 0.96), rgba(34, 184, 167, 0.94)),
        var(--ai-brand-gradient) !important;
    border-color: rgba(79, 99, 233, 0.18) !important;
    border-radius: var(--ai-radius-lg) !important;
    box-shadow: 0 12px 28px rgba(31, 42, 68, 0.12) !important;
}

.reader-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    padding: 22px !important;
    color: var(--ai-navy);
    overflow: hidden;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.reader-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 18px;
    align-items: start;
}

.reader-main-panel {
    min-width: 0;
}

.reader-context-panel {
    display: grid;
    gap: 14px;
}

.reader-side-card {
    border: 1px solid var(--ai-border);
    border-radius: 22px;
    background: #FFFFFF;
    box-shadow: var(--ai-shadow-sm);
    padding: 16px;
}

.reader-side-title {
    color: var(--ai-navy);
    font-size: 14px;
    font-weight: 850;
}

.reader-side-count {
    color: var(--ai-text-secondary);
    font-size: 13px;
    font-weight: 700;
    margin-top: 4px;
}

.reader-item-list {
    display: grid;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
}

.reader-item-list li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 9px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: var(--ai-text-secondary);
    background: #F7FAFF;
}

.reader-item-list li span {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ai-primary);
    background: var(--ai-primary-soft);
    font-size: 12px;
    font-weight: 850;
}

.reader-item-list li strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.reader-item-list li.current {
    border-color: #BFD5FF;
    color: var(--ai-navy);
    background: #EEF5FF;
}

.reader-item-list li.done span {
    color: #FFFFFF;
    background: var(--ai-success);
}

.reader-tip-card {
    background: linear-gradient(135deg, #FFF9EA, #FFFFFF);
    border-color: #FFE7A7;
}

.reader-tip-card p,
.reader-mascot-card p {
    color: var(--ai-text-secondary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    margin: 8px 0 0;
}

.reader-mascot-card {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    background: linear-gradient(135deg, #F6FBFF, #EEF8FF);
}

.reader-side-mascot {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.reader-hero-copy {
    min-width: 0;
}

.reader-hero-copy h2,
.reader-hero-copy .small {
    overflow-wrap: anywhere;
}

.reader-hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    min-width: min(100%, 296px);
}

.reader-meter-wrap {
    grid-column: 1 / -1;
    width: min(100%, 260px);
}

.settings-hero {
    min-height: 130px;
}

.student-hero {
    min-height: 120px;
}

.reader-hero .text-muted,
.reader-hero .small.text-muted {
    color: var(--ai-text-secondary) !important;
}

.settings-hero .text-muted,
.student-hero .text-muted,
.ai-hero .text-muted {
    color: rgba(255, 255, 255, 0.78) !important;
}

.reader-item {
    min-height: 260px;
    display: grid;
    place-items: center;
    border: 1px solid #D8E5F7;
    border-radius: 28px;
    background:
        radial-gradient(circle at 12% 10%, rgba(47, 101, 246, 0.06), transparent 26%),
        #FFFFFF;
    padding: clamp(28px, 4vw, 52px);
    font-size: clamp(34px, 4.8vw, 64px);
    line-height: 1.35;
    text-align: center;
    font-weight: 800;
    border-color: #D8E5F7 !important;
    color: var(--ai-navy) !important;
    box-shadow: inset 0 0 0 1px #F7FAFF, var(--ai-shadow-sm) !important;
}

.reader-item.reader-item-passage {
    max-height: min(52vh, 520px);
    display: block;
    overflow: auto;
    padding: clamp(24px, 3vw, 38px);
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.75;
    text-align: left;
    font-weight: 650;
}

.reader-item .word {
    display: inline-block;
    margin: 0.08em 0.12em;
    padding: 0.02em 0.04em;
    border-radius: 8px;
}

.reader-item .word-ok {
    color: #0D7B5F;
    background: #E8FAF3;
}

.reader-item .word-bad {
    color: #B72537;
    background: #FFF1F3;
}

.reader-item .letter-bad {
    color: var(--ai-danger);
    background: #FFE0E5;
    border-radius: 5px;
    padding: 0 0.04em;
}

.reader-item .letter-ok {
    color: inherit;
}

.reader-stat {
    min-width: 134px;
    max-width: none;
    flex: 0 0 auto;
    border: 0;
    border-radius: var(--ai-radius-md);
    background: transparent;
    padding: 11px 14px;
    text-align: right;
    white-space: nowrap;
}

.reader-stat strong {
    display: block;
    font-size: 21px;
    line-height: 1.15;
    white-space: nowrap;
}

.reader-progress-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 7px;
    border-radius: 999px;
    background: #D7DEE9;
    transition: width 0.18s ease, background-color 0.18s ease;
}

.reader-progress-dot.done {
    background: var(--ai-accent);
}

.reader-progress-dot.active {
    width: 28px;
    background: var(--ai-primary);
}

.reader-meter {
    height: 9px;
    border-radius: 999px;
    background: #E8EEF9;
    overflow: hidden;
}

.reader-meter > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--ai-primary);
    transition: width 0.2s ease;
}

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

.voice-settings {
    color: var(--ai-primary);
    font-weight: 700;
    text-decoration: none;
}

.empty-transcript {
    display: inline-block;
    color: var(--ai-muted);
    font-weight: 700;
}

.reader-actions {
    padding: 15px;
    border-color: var(--ai-border) !important;
    background: #FFFFFF !important;
    border-radius: var(--ai-radius-md) !important;
}

.listen-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: -82px;
    position: relative;
    z-index: 2;
}

.listen-panel .btn-outline-primary {
    min-height: 46px;
    padding-inline: 26px;
    border-radius: 999px;
    background: #F4F8FF !important;
    border-color: #D8E5FF !important;
    color: var(--ai-primary) !important;
    font-weight: 850;
    box-shadow: 0 10px 24px rgba(47, 101, 246, 0.08);
}

.listen-panel .btn-outline-secondary,
.listen-panel .voice-settings {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    text-decoration: none;
}

.reader-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.record-orb {
    position: relative;
    width: 94px;
    height: 94px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 94px;
    border: 0;
    border-radius: 50%;
    color: #FFFFFF;
    background: var(--ai-brand-gradient);
    box-shadow: 0 18px 38px rgba(47, 101, 246, 0.26);
    cursor: pointer;
}

.record-orb:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.record-icon {
    position: relative;
    z-index: 2;
    font-size: 30px;
}

.record-wave {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    pointer-events: none;
}

.record-wave span {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(47, 101, 246, 0.22);
    border-radius: 50%;
    opacity: 0;
}

.is-recording .record-wave span {
    animation: liri-record-pulse 1.8s ease-out infinite;
}

.is-recording .record-wave span:nth-child(2) {
    animation-delay: 0.35s;
}

.is-recording .record-wave span:nth-child(3) {
    animation-delay: 0.7s;
}

.is-recording .record-orb {
    background: linear-gradient(135deg, #E94B5F, #FFB13B);
    box-shadow: 0 18px 38px rgba(233, 75, 95, 0.22);
}

.is-processing .record-orb {
    background: linear-gradient(135deg, #6B7C93, #2F65F6);
}

.is-complete .record-orb {
    background: linear-gradient(135deg, #20B486, #22C7B8);
}

.is-error .record-orb {
    background: linear-gradient(135deg, #E94B5F, #B4232E);
}

.record-title {
    color: var(--ai-navy);
    font-size: 17px;
    font-weight: 850;
}

.record-copy {
    min-width: 0;
}

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

.reader-other-items {
    margin-top: 16px;
    padding: 18px 20px;
    border: 1px solid #E0E9F6;
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0 12px 32px rgba(20, 33, 61, 0.055);
}

.reader-other-title {
    color: var(--ai-navy);
    font-size: 15px;
    font-weight: 850;
    margin-bottom: 12px;
}

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

.reader-other-card {
    min-height: 64px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 18px;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #E2EAF7;
    border-radius: 16px;
    color: var(--ai-navy);
    background: #FFFFFF;
    text-decoration: none;
}

.reader-other-card:hover,
.reader-other-card.active {
    color: var(--ai-primary);
    border-color: #BFD4FF;
    background: #F7FAFF;
    text-decoration: none;
}

.reader-other-icon {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    color: #FFFFFF;
    background: var(--ai-brand-gradient);
}

.reader-other-card strong,
.reader-other-card small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reader-other-card small {
    color: var(--ai-text-secondary);
    font-size: 12px;
    font-weight: 650;
    margin-top: 2px;
}

@keyframes liri-record-pulse {
    0% {
        transform: scale(0.72);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.22);
        opacity: 0;
    }
}

.feedback-card {
    overflow: hidden;
    border-radius: var(--ai-radius-md);
}

.feedback-card .card-header {
    background: var(--ai-navy) !important;
    color: #FFFFFF !important;
}

.settings-preview {
    min-height: 110px;
    display: grid;
    place-items: center;
    padding: 16px;
    color: #FFFFFF;
    font-size: 32px;
    font-weight: 800;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: var(--ai-radius-md);
    border-color: rgba(255, 255, 255, 0.36) !important;
    background: rgba(255, 255, 255, 0.16) !important;
}

.table-light {
    --bs-table-bg: #F8FAFC;
}

.btn-primary {
    background: var(--ai-primary) !important;
    border-color: var(--ai-primary) !important;
    box-shadow: 0 8px 18px rgba(79, 99, 233, 0.18);
}

.btn-primary:hover {
    background: var(--ai-primary-hover) !important;
    border-color: var(--ai-primary-hover) !important;
}

.btn-outline-primary {
    color: var(--ai-primary) !important;
    border-color: #B9C1FF !important;
    background: #FFFFFF !important;
}

.btn-outline-primary:hover {
    color: #FFFFFF !important;
    background: var(--ai-primary) !important;
    border-color: var(--ai-primary) !important;
}

.mobile-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1050;
    width: min(86vw, 300px);
    max-width: 100%;
    transform: translateX(-105%);
    border-radius: 0;
}

.mobile-sidebar.show {
    transform: translateX(0);
}

.sidebar-backdrop {
    background: rgba(15, 23, 42, 0.42);
}

.mobile-sidebar-handle {
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    z-index: 1080;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--ai-border);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--ai-shadow-md);
}

body.sidebar-collapsed .sidebar-fixed {
    width: var(--ai-sidebar-collapsed-width);
}

body.sidebar-collapsed .app-main {
    margin-left: var(--ai-sidebar-collapsed-width);
}

body.sidebar-collapsed .sidebar-fixed .brand-copy,
body.sidebar-collapsed .sidebar-fixed .sidebar-section,
body.sidebar-collapsed .sidebar-fixed .sidebar-label,
body.sidebar-collapsed .sidebar-fixed .sidebar-account-copy,
body.sidebar-collapsed .sidebar-fixed .liri-sidebar-card {
    display: none;
}

body.sidebar-collapsed .sidebar-fixed .brand-mark {
    display: none;
}

body.sidebar-collapsed .sidebar-fixed .brand-row {
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center !important;
    min-height: 72px;
    padding: 14px 12px !important;
}

body.sidebar-collapsed .sidebar-fixed .desktop-collapse-btn {
    position: static;
    margin-left: 0 !important;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    color: #FFFFFF;
    background: var(--ai-brand-gradient);
    border-color: transparent !important;
    box-shadow: 0 12px 26px rgba(79, 99, 233, 0.22);
}

body.sidebar-collapsed .sidebar-fixed .sidebar-nav {
    padding: 0 10px 12px;
}

body.sidebar-collapsed .sidebar-fixed .sidebar-link {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
}

body.sidebar-collapsed .sidebar-fixed .sidebar-account-card {
    justify-content: center;
    padding: 8px 0;
}

body.sidebar-collapsed .sidebar-fixed .sidebar-account-chevron {
    display: none;
}

body.sidebar-collapsed .sidebar-fixed .sidebar-account-dropdown {
    left: calc(100% + 10px);
    right: auto;
    bottom: 0;
    min-width: 190px;
}

@media (max-width: 991.98px) {
    .app-main {
        margin-left: 0;
        padding: 16px;
    }

    .sidebar-fixed {
        display: none;
    }

    .app-topbar {
        min-height: 64px;
        padding-left: 58px !important;
        border-radius: var(--ai-radius-md);
    }

    .mobile-sidebar-handle {
        display: flex;
    }

    .page-title {
        font-size: 24px;
    }

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

.student-bottom-nav,
.student-install-prompt {
    display: none;
}

.student-install-prompt[hidden] {
    display: none !important;
}

.portal-student .student-install-prompt[hidden] {
    display: none !important;
}

.portal-student .student-install-prompt {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #CFE7FF;
    border-radius: var(--ai-radius-lg);
    background: linear-gradient(135deg, #FFFFFF, #F4FBFF);
    box-shadow: var(--ai-shadow-sm);
}

.portal-student .student-install-prompt:not([hidden]) {
    display: flex;
}

.portal-student .student-install-prompt strong,
.portal-student .student-install-prompt span {
    display: block;
}

.portal-student .student-install-prompt span {
    color: var(--ai-text-secondary);
    font-size: 13px;
}

@media (max-width: 991.98px) {
    .portal-student {
        background:
            radial-gradient(circle at 15% 6%, rgba(79, 99, 233, 0.10), transparent 30%),
            radial-gradient(circle at 85% 12%, rgba(25, 182, 165, 0.10), transparent 24%),
            var(--ai-background);
    }

    .portal-student .app-main {
        padding: max(14px, env(safe-area-inset-top)) 16px calc(82px + env(safe-area-inset-bottom));
    }

    .portal-student .app-topbar {
        padding-left: 16px !important;
        min-height: 58px;
    }

    .topbar-mobile-brand span:last-child {
        display: none;
    }

    .topbar-profile {
        gap: 10px;
        padding-left: 10px;
        max-width: 100%;
    }

    .topbar-profile-copy {
        min-width: 0;
        max-width: 180px;
    }

    .portal-student .mobile-sidebar-handle,
    .portal-student .mobile-sidebar {
        display: none !important;
    }

    .portal-student .page-title {
        font-size: 21px;
    }

    .portal-student .student-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1045;
        width: 100%;
        max-width: none;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 3px;
        padding: 7px max(8px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
        border: 0;
        border-top: 1px solid rgba(205, 214, 227, 0.88);
        border-radius: 0;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 -6px 22px rgba(31, 42, 68, 0.10);
        backdrop-filter: blur(18px);
        transition: opacity 180ms ease, transform 180ms ease;
    }

    .portal-student.page-read .student-bottom-nav {
        opacity: 0;
        pointer-events: none;
        transform: translateY(calc(100% + 2px));
    }

    .portal-student.page-read.student-reading-nav-visible .student-bottom-nav,
    .portal-student.page-read .student-bottom-nav:focus-within {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .portal-student .student-bottom-link {
        position: relative;
        min-height: 50px;
        display: grid;
        place-items: center;
        gap: 3px;
        padding: 6px 2px;
        border-radius: 16px;
        color: var(--ai-text-secondary);
        font-size: 10.5px;
        font-weight: 800;
        line-height: 1.1;
        text-align: center;
        text-decoration: none;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .portal-student .student-bottom-icon {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
        opacity: 0.9;
    }

    .portal-student .student-bottom-link:active {
        transform: scale(0.97);
        background: rgba(79, 99, 233, 0.08);
    }

    .portal-student .student-bottom-link.active {
        color: var(--ai-primary);
        background: var(--ai-primary-soft);
        box-shadow: inset 0 0 0 1px rgba(79, 99, 233, 0.10);
    }

    .portal-student .student-bottom-link.active .student-bottom-icon {
        stroke-width: 2.2;
        opacity: 1;
    }

    .portal-student .bottom-nav-badge {
        position: absolute;
        top: 4px;
        right: calc(50% - 22px);
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #FFFFFF;
        border-radius: 999px;
        background: #EF4444;
        color: #FFFFFF;
        font-size: 10px;
        font-weight: 900;
        line-height: 1;
        box-shadow: 0 8px 16px rgba(239, 68, 68, 0.24);
    }

    .portal-student .ai-student-hero,
    .portal-student .student-hero,
    .portal-student .settings-hero,
    .portal-student .ai-hero {
        border-radius: 18px !important;
    }

    .portal-student.page-dashboard .ai-student-hero {
        padding: 22px !important;
    }

    .portal-student.page-dashboard .ai-student-hero .btn,
    .portal-student.page-lessons .ai-hero .btn,
    .portal-student.page-lesson .quiz-tile .btn,
    .portal-student.page-quizzes .quiz-card .btn {
        min-height: 46px;
    }

    .portal-student.page-dashboard .ai-student-hero .btn {
        width: 100%;
        margin-top: 4px;
    }

    .portal-student.page-dashboard .ai-data-card .table-responsive {
        border-radius: var(--ai-radius-md);
    }

    .portal-student .dashboard-metrics {
        row-gap: 10px;
    }

    .portal-student .ai-stat-card,
    .portal-student .metric-card {
        min-height: auto;
    }

    .portal-student .lesson-card,
    .portal-student .passage-tile,
    .portal-student .quiz-card,
    .portal-student .quiz-tile,
    .portal-student .attempt-card {
        border-radius: 18px !important;
    }

    .portal-student .lesson-card .fw-semibold,
    .portal-student .quiz-card h3,
    .portal-student .passage-tile h3,
    .portal-student .attempt-card .fw-semibold {
        overflow-wrap: anywhere;
    }

    .portal-student .lesson-card .badge,
    .portal-student .quiz-card .badge,
    .portal-student .quiz-tile .badge {
        white-space: normal;
        text-align: left;
    }

    .portal-student .quiz-tile .d-flex.flex-wrap.gap-2,
    .portal-student .quiz-card .d-flex.flex-wrap.gap-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }

    .portal-student .quiz-card .d-flex.flex-wrap.gap-2 .btn:last-child {
        grid-column: 1 / -1;
    }

    .portal-student .attempt-filter-row {
        grid-template-columns: 1fr 1fr;
    }

    .portal-student .attempt-filter-search,
    .portal-student .attempt-filter-actions {
        grid-column: 1 / -1;
    }

    .portal-student .attempt-filter-actions .btn {
        min-height: 46px;
    }

    .portal-student.page-performance .metric-card {
        padding: 14px;
    }

    .portal-student.page-performance .metric-card .value {
        font-size: 24px;
    }

    .portal-student.page-performance .table-responsive {
        border-radius: var(--ai-radius-md);
    }

    .portal-student.page-settings .settings-preview {
        min-height: 92px;
        font-size: clamp(24px, 8vw, 34px);
    }
}

@media (max-width: 767.98px) {
    .guided-next-card {
        align-items: stretch;
        flex-direction: column;
    }

    .guided-next-card .btn {
        width: 100%;
    }

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

    .guided-step {
        min-height: 50px;
        padding: 9px 10px;
    }

    .guided-step-detail {
        display: none;
    }

    .program-step {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .program-step .btn {
        grid-column: 1 / -1;
        width: 100%;
    }

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

    .milestone-card .btn {
        width: 100%;
    }

    .portal-student.page-read .app-main {
        padding: max(10px, env(safe-area-inset-top)) 10px calc(88px + env(safe-area-inset-bottom));
    }

    .portal-student.page-read .app-topbar {
        display: flex;
        min-height: 52px;
        margin-bottom: 8px !important;
        padding-inline: 12px !important;
        border-radius: 16px;
    }

    .portal-student.page-read .topbar-profile {
        display: none;
    }

    .portal-student.page-read .content-wrap {
        width: 100%;
    }

    .portal-student.page-read .content-wrap > .mb-3.d-flex {
        display: grid !important;
        grid-template-columns: 1fr auto;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    .portal-student.page-read .content-wrap > .mb-3.d-flex > .d-flex {
        min-width: 0;
        overflow-x: auto;
        padding-bottom: 2px;
        white-space: nowrap;
    }

    .portal-student.page-read .content-wrap > .mb-3.d-flex .btn,
    .portal-student.page-read .content-wrap > .mb-3.d-flex .badge {
        min-height: 44px;
        align-items: center;
    }

    .portal-student.page-read .reader-stage {
        min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 126px);
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto auto;
        gap: 10px;
        padding: 12px !important;
        border-radius: 0;
        border-width: 0;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible;
    }

    .portal-student.page-read .reader-stage::before {
        display: none;
    }

    .portal-student.page-read .reader-hero {
        margin-bottom: 0 !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .portal-student.page-read .reader-workspace {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .portal-student.page-read .reader-other-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portal-student.page-read .reader-context-panel {
        order: 2;
    }

    .portal-student.page-read .reader-item-list {
        display: none;
    }

    .portal-student.page-read .reader-hero-copy .small:not(.text-muted) {
        display: none;
    }

    .portal-student.page-read .reader-hero-copy h2 {
        font-size: 18px;
    }

    .portal-student.page-read .reader-hero-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .portal-student.page-read .reader-stat {
        max-width: none;
        padding: 9px 10px;
        text-align: left;
    }

    .portal-student.page-read [data-dots] {
        margin-bottom: 0 !important;
        min-height: 18px;
        overflow-x: auto;
        white-space: nowrap;
    }

    .portal-student.page-read .reader-item {
        min-height: clamp(300px, 52dvh, 520px);
        align-content: center;
        width: 100%;
        margin-bottom: 0 !important;
        padding: 22px 18px !important;
        border-width: 1px;
        border-radius: 18px;
        font-size: clamp(30px, 11vw, 46px);
        line-height: 1.28;
        font-weight: 800;
        text-align: center;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        box-shadow: inset 0 0 0 1px #F7FBFA, var(--ai-shadow-sm) !important;
    }

    .portal-student.page-read .reader-item.reader-item-passage {
        font-size: clamp(16px, 5vw, 18px);
        line-height: 1.68;
        font-weight: 500;
        text-align: left;
    }

    .portal-student.page-read .listen-panel,
    .portal-student.page-read .reader-actions {
        margin-bottom: 0 !important;
        border-radius: 18px !important;
    }

    .portal-student.page-read .listen-panel .d-flex {
        align-items: stretch !important;
    }

    .portal-student.page-read .listen-panel .d-flex > .d-flex {
        width: 100%;
    }

    .portal-student.page-read .listen-panel .btn,
    .portal-student.page-read .reader-actions .btn {
        min-height: 48px;
    }

    .portal-student.page-read .reader-actions {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
    }

    .portal-student.page-read .reader-actions [data-stop] {
        grid-column: 1 / -1;
    }

    .portal-student.page-read .record-orb {
        width: 76px;
        height: 76px;
        flex-basis: 76px;
    }

    .portal-student.page-read .record-icon {
        font-size: 24px;
    }

    .portal-student.page-read .listen-panel {
        margin-top: -70px;
    }

    .portal-student.page-read .feedback-card {
        margin-top: 2px;
    }

    .portal-student.page-read .feedback-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .portal-student .app-main {
        padding-inline: 12px;
    }

    .portal-student .app-topbar {
        margin-bottom: 12px !important;
    }

    .portal-student .content-wrap > .card,
    .portal-student .content-wrap > .row,
    .portal-student .content-wrap > .ai-hero {
        margin-bottom: 12px;
    }

    .portal-student .ai-hero .d-flex.justify-content-between,
    .portal-student .student-hero .d-flex.justify-content-between,
    .portal-student .passage-tile > .d-flex.justify-content-between,
    .portal-student .quiz-card > .d-flex.justify-content-between {
        display: grid !important;
        grid-template-columns: 1fr;
        text-align: left !important;
    }

    .portal-student .ai-hero .text-end,
    .portal-student .student-hero .text-end {
        text-align: left !important;
    }

    .portal-student .quiz-tile .d-flex.flex-wrap.gap-2,
    .portal-student .quiz-card .d-flex.flex-wrap.gap-2 {
        grid-template-columns: 1fr;
    }

    .portal-student .quiz-tile .btn,
    .portal-student .quiz-card .btn {
        width: 100%;
    }

    .portal-student .student-install-prompt {
        display: grid;
        grid-template-columns: 1fr;
    }

    .portal-student.page-dashboard .ai-data-card .table th:first-child,
    .portal-student.page-dashboard .ai-data-card .table td:first-child {
        display: none;
    }

    .portal-student.page-dashboard .ai-data-card .table th,
    .portal-student.page-dashboard .ai-data-card .table td {
        white-space: normal;
    }

    .portal-student.page-dashboard .ai-data-card .table td {
        font-size: 13px;
    }
}

@media (max-width: 767.98px) {
    .student-filter-row,
    .student-quiz-filter-row {
        grid-template-columns: 1fr;
    }

    .attempt-filter-row,
    .teacher-attempt-filters,
    .admin-attempt-filters {
        grid-template-columns: 1fr 1fr;
    }

    .attempt-filter-search,
    .attempt-filter-actions,
    .teacher-filter-search,
    .teacher-filter-actions,
    .admin-filter-search,
    .admin-filter-actions {
        grid-column: 1 / -1;
    }

    .reader-hero {
        grid-template-columns: 1fr;
        padding: 14px !important;
    }

    .reader-hero-meta {
        width: 100%;
        min-width: 0;
        justify-content: stretch;
    }

    .topbar-profile-copy {
        display: none;
    }

    .topbar-profile {
        border-left: 0;
        padding-left: 0;
    }

    .reader-meter-wrap {
        width: 100%;
    }

    .portal-student.page-read .listen-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 48px 48px;
        gap: 10px;
        margin-top: -54px;
        padding: 0 6px;
    }

    .portal-student.page-read .listen-panel .btn-outline-primary {
        width: 100%;
        min-width: 0;
        padding-inline: 14px;
        white-space: nowrap;
    }

    .portal-student.page-read .listen-panel .btn-outline-secondary,
    .portal-student.page-read .listen-panel .voice-settings {
        width: 48px;
        min-width: 48px;
        height: 48px;
        padding: 0;
    }

    .portal-student.page-read .reader-step-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .portal-student.page-read .reader-step-nav .btn {
        min-height: 48px;
    }
}

@media (max-width: 575.98px) {
    body {
        font-size: 14px;
    }

    .app-main {
        padding: 12px;
    }

    .app-topbar {
        margin-bottom: 16px !important;
    }

    .page-title {
        font-size: 20px;
    }

    .ai-stat-card {
        min-height: 104px;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 14px;
    }

    .ai-stat-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .ai-stat-value {
        font-size: 26px;
    }

    .ai-data-card .card-header {
        align-items: flex-start !important;
        padding: 14px;
    }

    .ai-data-card .card-body {
        padding: 14px;
    }

    .feedback-split {
        grid-template-columns: 1fr;
    }

    .reader-item {
        padding: 20px !important;
    }

    .reader-stat {
        min-width: 0;
        flex: 1 1 100px;
        text-align: left;
    }

    .reader-actions .record-orb {
        width: 76px;
    }

    .student-filter-row,
    .student-quiz-filter-row,
    .quiz-filter-grid,
    .quiz-filter-actions {
        grid-template-columns: 1fr;
    }

    .student-quiz-filter-actions,
    .quiz-filter-actions .d-flex {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .student-quiz-filter-actions .btn,
    .quiz-filter-actions .btn {
        width: 100%;
    }

    .attempt-filter-row,
    .teacher-attempt-filters,
    .admin-attempt-filters {
        grid-template-columns: 1fr 1fr;
    }

    .attempt-filter-search,
    .attempt-filter-actions,
    .teacher-filter-search,
    .teacher-filter-actions,
    .admin-filter-search,
    .admin-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .milestone-burst {
        display: none;
    }
}

.student-lesson-filter-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 240px));
    gap: 12px;
    align-items: end;
    justify-content: start;
}

.student-lesson-filter-row > div {
    min-width: 0;
}

.student-lesson-filter-row .form-label {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 800;
    color: var(--ai-text-secondary);
}

.lesson-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lesson-filter-chip {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid var(--ai-border);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--ai-text-secondary);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.lesson-filter-chip:hover,
.lesson-filter-chip.active {
    border-color: rgba(79, 99, 233, 0.26);
    background: var(--ai-primary-soft);
    color: var(--ai-primary);
    text-decoration: none;
}

.reader-item.reader-item-passage {
    max-height: min(48vh, 520px);
    align-content: start;
    place-items: start stretch;
    overflow-y: auto;
    overscroll-behavior: contain;
    text-align: left;
}

.comprehension-stage,
.comprehension-result {
    background: #FFFFFF;
    border: 1px solid var(--ai-border);
    border-radius: 18px;
    box-shadow: 0 18px 46px rgba(31, 42, 68, 0.08);
}

.comprehension-card {
    display: none;
    min-height: 360px;
    padding: 24px;
    border: 1px solid var(--ai-border);
    border-radius: 18px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);
}

.comprehension-card.active {
    display: block;
}

.comprehension-options {
    display: grid;
    gap: 12px;
}

.comprehension-option {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 58px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--ai-border);
    border-radius: 14px;
    background: #FFFFFF;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.comprehension-option:hover,
.comprehension-option:has(input:checked) {
    border-color: rgba(79, 99, 233, 0.5);
    box-shadow: 0 12px 28px rgba(79, 99, 233, 0.12);
    transform: translateY(-1px);
}

.comprehension-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--ai-primary-soft);
    color: var(--ai-primary);
    font-weight: 900;
}

.comprehension-option:has(input:checked) .choice-key {
    background: var(--ai-primary);
    color: #FFFFFF;
}

.comprehension-score {
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
    color: var(--ai-text);
}

.comprehension-review-item {
    padding: 16px;
    border: 1px solid var(--ai-border);
    border-left-width: 5px;
    border-radius: 14px;
    background: #FFFFFF;
}

.comprehension-review-item.is-correct {
    border-left-color: var(--ai-success);
}

.comprehension-review-item.is-wrong {
    border-left-color: var(--ai-danger);
}

@media (max-width: 991.98px) {
    .student-lesson-filter-row {
        grid-template-columns: 1fr;
    }

    .portal-student.page-read .reader-stage {
        grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    }

    .portal-student.page-read .reader-actions {
        position: sticky;
        top: max(8px, env(safe-area-inset-top));
        z-index: 20;
        box-shadow: 0 14px 32px rgba(31, 42, 68, 0.14);
    }

    .portal-student.page-read .reader-item.reader-item-passage {
        min-height: clamp(260px, 42dvh, 430px);
        max-height: 46dvh;
        overflow-y: auto;
        padding-bottom: 28px !important;
    }

    .portal-student.page-read .reader-item:not(.reader-item-passage) {
        min-height: clamp(230px, 42dvh, 460px);
    }

    .comprehension-card {
        min-height: 420px;
        padding: 18px;
    }
}

@media (max-width: 575.98px) {
    .lesson-filter-chip {
        flex: 1 1 calc(50% - 8px);
    }

    .reader-other-grid {
        grid-template-columns: 1fr;
    }
}
.portal-student.page-read .reader-item.reader-item-passage {
    display: block !important;
    height: 46vh;
    height: 46dvh;
    min-height: 0 !important;
    max-height: 520px !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    scrollbar-gutter: stable;
}