:root {
    /* Legacy aliases remain available to backoffice and older templates. */
    --avva-navy: #0B1033;
    --avva-blue: #2563EB;
    --avva-purple: #6C3CFF;
    --avva-green: #00C896;
    --avva-orange: #FF8A00;
    --avva-pink: #FF2D6F;
    --avva-turquoise: #00B2B3;
    --avva-yellow: #FFC400;
    --avva-charcoal: #111827;
    --avva-gray-dark: #374151;
    --avva-gray: #6B7280;
    --avva-gray-light: #E5E7EB;
    --avva-background: #F5F7FA;
    --avva-white: #FFFFFF;
    --avva-radius-sm: 8px;
    --avva-radius-md: 14px;
    --avva-radius-lg: 20px;
    --avva-shadow-sm: 0 2px 8px rgba(11, 16, 51, .08);
    --avva-shadow-md: 0 12px 28px rgba(11, 16, 51, .12);
    --avva-space-1: .25rem;
    --avva-space-2: .5rem;
    --avva-space-3: .75rem;
    --avva-space-4: 1rem;
    --avva-space-5: 1.25rem;
    --avva-space-6: 1.5rem;
    --avva-space-7: 1.75rem;
    --avva-space-8: 2rem;
    --avva-border: var(--avva-gray-light);
    --avva-focus-ring: 0 0 0 3px rgba(37, 99, 235, .18);
    --avva-text-xs: .72rem;
    --avva-text-sm: .82rem;
    --avva-text-md: .95rem;
    --avva-text-lg: 1.15rem;
    --avva-line-tight: 1.15;
    --avva-line-normal: 1.45;

    /* AVVA UI 2.0 foundation. Keep this layer explicit so public/student
       surfaces can adopt the mature palette without changing admin colors. */
    --avva-ink: #182033;
    --avva-navy-ui2: #101A35;
    --avva-blue-ui2: #1D5FD1;
    --avva-blue-hover-ui2: #174EAD;
    --avva-blue-soft: #EAF2FF;
    --avva-canvas: #F6F8FB;
    --avva-surface: #FFFFFF;
    --avva-text: #20283A;
    --avva-muted: #667085;
    --avva-line: #DCE3EC;
    --avva-success: #1F7A55;
    --avva-success-soft: #E9F6EF;
    --avva-warning: #A56418;
    --avva-warning-soft: #FFF4E5;
    --avva-danger: #B63B46;
    --avva-danger-soft: #FCECEE;
    --avva-legacy-purple: var(--avva-purple);
    --avva-legacy-pink: var(--avva-pink);
    --avva-legacy-orange: var(--avva-orange);
    --avva-legacy-turquoise: var(--avva-turquoise);
    --avva-ui2-radius-control: 8px;
    --avva-ui2-radius-card: 12px;
    --avva-ui2-radius-panel: 16px;
    --avva-ui2-radius-marketing: 20px;
    --avva-ui2-shadow-subtle: 0 8px 24px rgba(24, 32, 51, .08);
    --avva-ui2-space-1: 4px;
    --avva-ui2-space-2: 8px;
    --avva-ui2-space-3: 12px;
    --avva-ui2-space-4: 16px;
    --avva-ui2-space-5: 24px;
    --avva-ui2-space-6: 32px;
    --avva-ui2-space-7: 48px;
    --avva-ui2-space-8: 64px;
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body.avva-ui {
    background: var(--avva-background);
    color: var(--avva-charcoal);
    font-family: Inter, system-ui, -apple-system, sans-serif;
}

/* Opt public/student shells into UI 2.0 semantics without rewriting the
   legacy variables consumed by unrelated admin templates. */
body.avva-public-shell,
body.avva-student-shell {
    /* Safe aliases: these names are already used by the target shells, while
       the root values above remain stable for unrelated admin templates. */
    --avva-navy: #101A35;
    --avva-blue: #1D5FD1;
    --avva-blue-hover: #174EAD;
    --avva-background: #F6F8FB;
    --avva-white: #FFFFFF;
    --avva-charcoal: #20283A;
    --avva-gray: #667085;
    --avva-gray-light: #DCE3EC;
    --avva-green: #1F7A55;
    --avva-ui2-bg: var(--avva-canvas);
    --avva-ui2-surface: var(--avva-surface);
    --avva-ui2-ink: var(--avva-ink);
    --avva-ui2-navy: var(--avva-navy-ui2);
    --avva-ui2-action: var(--avva-blue-ui2);
    --avva-ui2-action-hover: var(--avva-blue-hover-ui2);
    --avva-ui2-border: var(--avva-line);
    --avva-ui2-body: var(--avva-text);
    --avva-ui2-secondary: var(--avva-muted);
}

.avva-icon {
    display: inline-block;
    flex: 0 0 auto;
    height: 1em;
    vertical-align: -.125em;
    width: 1em;
}

.avva-icon--16 { height: 16px; width: 16px; }
.avva-icon--20 { height: 20px; width: 20px; }
.avva-icon--24 { height: 24px; width: 24px; }
.avva-icon--32 { height: 32px; width: 32px; }

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

.avva-heading { color: var(--avva-navy); font-family: Poppins, sans-serif; font-weight: 700; }
.avva-card { background: var(--avva-white); border: 1px solid var(--avva-gray-light); border-radius: var(--avva-radius-md); box-shadow: var(--avva-shadow-sm); padding: var(--avva-space-6); }
.avva-btn,
.avva-btn:visited,
.avva-btn:hover,
.avva-btn:focus,
.avva-btn:active { text-decoration: none; }
.avva-btn { align-items: center; border: 0; border-radius: var(--avva-radius-sm); cursor: pointer; display: inline-flex; font-family: inherit; font-weight: 700; gap: var(--avva-space-2); justify-content: center; min-height: 44px; padding: .7rem 1rem; transition: transform .2s ease, box-shadow .2s ease; }
.avva-btn:hover { box-shadow: var(--avva-shadow-md); transform: translateY(-1px); }
.avva-btn-primary { background: var(--avva-blue); color: var(--avva-white); }
.avva-btn-secondary { background: var(--avva-navy); color: var(--avva-white); }
.avva-btn-success { background: var(--avva-green); color: var(--avva-navy); }
.avva-btn-outline { background: var(--avva-white); border: 1px solid var(--avva-blue); color: var(--avva-blue); }
.avva-input { background: var(--avva-white); border: 1px solid var(--avva-gray-light); border-radius: var(--avva-radius-sm); color: var(--avva-charcoal); min-height: 44px; padding: .7rem .9rem; width: 100%; }
.avva-input:focus { border-color: var(--avva-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); outline: 0; }
.avva-btn:focus-visible, .avva-input:focus-visible, .avva-btn-link:focus-visible { box-shadow: var(--avva-focus-ring); outline: 0; }
.avva-badge { border-radius: 999px; display: inline-flex; font-size: .75rem; font-weight: 700; padding: .3rem .65rem; }
.avva-badge-success { background: rgba(0, 200, 150, .14); color: #00785a; }
.avva-badge-info { background: rgba(37, 99, 235, .12); color: #1749b5; }
.avva-alert { border-radius: var(--avva-radius-sm); padding: var(--avva-space-4); }
.avva-alert-info { background: #EAF1FF; color: #1749b5; }
.avva-progress { background: var(--avva-gray-light); border-radius: 999px; height: 8px; overflow: hidden; }
.avva-progress > span { background: linear-gradient(90deg, var(--avva-blue), var(--avva-purple)); border-radius: inherit; display: block; height: 100%; }

/* Reusable AVVA product primitives. Keep page composition in the consuming view. */
.avva-page-header { align-items: flex-end; display: flex; gap: var(--avva-space-6); justify-content: space-between; margin-bottom: var(--avva-space-6); min-width: 0; }
.avva-page-header-content { min-width: 0; }
.avva-page-header h2, .avva-page-header h3 { color: var(--avva-navy); font-family: Poppins, sans-serif; font-size: clamp(1.55rem, 2vw, 2rem); font-weight: 700; line-height: var(--avva-line-tight); margin: 0; }
.avva-page-header p { color: var(--avva-gray); font-size: var(--avva-text-md); line-height: var(--avva-line-normal); margin: .45rem 0 0; }
.avva-page-header .avva-breadcrumb { align-items: center; color: var(--avva-gray); display: flex; flex-wrap: wrap; font-size: var(--avva-text-sm); gap: .45rem; margin-top: .6rem; }
.avva-page-header .avva-breadcrumb strong { color: var(--avva-charcoal); font-weight: 700; }
.avva-page-header-actions { align-items: center; display: flex; flex: 0 0 auto; gap: var(--avva-space-2); }

.avva-stat-grid { display: grid; gap: var(--avva-space-4); grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: var(--avva-space-6); }
.avva-stat { background: var(--avva-white); border: 1px solid var(--avva-border); border-radius: var(--avva-radius-md); box-shadow: var(--avva-shadow-sm); display: flex; flex-direction: column; gap: .7rem; min-width: 0; padding: var(--avva-space-4); }
.avva-stat-top { align-items: flex-start; display: flex; gap: .65rem; justify-content: space-between; min-width: 0; }
.avva-stat-icon { align-items: center; background: #eaf1ff; border-radius: 10px; color: var(--avva-blue); display: inline-flex; flex: 0 0 32px; font-size: .82rem; height: 32px; justify-content: center; width: 32px; }
.avva-stat-icon-green { background: #e6f6ef; color: #147a52; }
.avva-stat-icon-orange { background: #fff2df; color: #b45d00; }
.avva-stat-icon-purple { background: #f0ebff; color: #5b32d6; }
.avva-stat-label { color: var(--avva-gray); font-size: var(--avva-text-xs); font-weight: 800; line-height: var(--avva-line-normal); }
.avva-stat-value { color: var(--avva-navy); font-size: clamp(1.2rem, 1.5vw, 1.55rem); font-weight: 800; line-height: var(--avva-line-tight); overflow-wrap: anywhere; }
.avva-stat-context { color: var(--avva-gray); font-size: var(--avva-text-xs); line-height: var(--avva-line-normal); margin: -.35rem 0 0; }

.avva-panel { background: var(--avva-white); border: 1px solid var(--avva-border); border-radius: var(--avva-radius-md); box-shadow: var(--avva-shadow-sm); min-width: 0; overflow: hidden; }
.avva-panel-header { align-items: flex-start; border-bottom: 1px solid var(--avva-border); display: flex; gap: var(--avva-space-4); justify-content: space-between; padding: var(--avva-space-5) var(--avva-space-6); }
.avva-panel-header h3, .avva-panel-header h4 { color: var(--avva-navy); font-size: var(--avva-text-lg); font-weight: 800; line-height: var(--avva-line-tight); margin: 0; }
.avva-panel-header p { color: var(--avva-gray); font-size: var(--avva-text-sm); margin: .35rem 0 0; }
.avva-panel-body { min-width: 0; padding: var(--avva-space-6); }
.avva-panel-body-flush { padding: 0; }
.avva-panel-meta { color: var(--avva-gray); font-size: var(--avva-text-sm); font-weight: 700; }

.avva-status-list { display: flex; flex-direction: column; }
.avva-status-row { align-items: center; border-bottom: 1px solid #eef1f5; display: flex; gap: .75rem; justify-content: space-between; min-height: 58px; padding: .65rem 0; }
.avva-status-row:last-child { border-bottom: 0; }
.avva-status-label { align-items: center; color: var(--avva-gray-dark); display: flex; font-size: var(--avva-text-sm); gap: .6rem; min-width: 0; }
.avva-status-dot { align-items: center; border-radius: 50%; display: inline-flex; flex: 0 0 30px; font-size: .75rem; height: 30px; justify-content: center; width: 30px; }
.avva-status-dot-success { background: #e6f6ef; color: #147a52; }
.avva-status-dot-info { background: #eaf1ff; color: var(--avva-blue); }
.avva-status-dot-purple { background: #f0ebff; color: #5b32d6; }
.avva-status-value { font-size: var(--avva-text-md); font-weight: 800; }
.avva-status-value-success { color: #147a52; }
.avva-status-value-info { color: var(--avva-blue); }
.avva-status-value-purple { color: #5b32d6; }

.avva-table-shell { min-width: 0; overflow: hidden; }
.avva-table-shell .avva-table-scroll { max-width: 100%; overflow-x: auto; }
.avva-table-shell .avva-table { border-collapse: collapse; margin: 0; min-width: 760px; width: 100%; }
.avva-table-shell .avva-table th { background: var(--avva-background); border-bottom: 1px solid var(--avva-border); color: var(--avva-gray); font-size: var(--avva-text-xs); font-weight: 800; letter-spacing: .04em; padding: .8rem var(--avva-space-5); text-align: left; text-transform: uppercase; white-space: nowrap; }
.avva-table-shell .avva-table td { border-bottom: 1px solid #eef1f5; color: var(--avva-charcoal); font-size: var(--avva-text-sm); padding: .85rem var(--avva-space-5); vertical-align: middle; }
.avva-table-shell .avva-table tbody tr:last-child td { border-bottom: 0; }
.avva-table-shell .avva-table tbody tr:hover td { background: #fafcff; }
.avva-table-shell .avva-table td strong { color: var(--avva-navy); font-weight: 800; }
.avva-table-shell .avva-table td small { color: var(--avva-gray); font-size: var(--avva-text-xs); }
.avva-table-shell .avva-table .avva-row-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.avva-table-shell .avva-table .avva-row-action { align-items: center; border: 1px solid var(--avva-border); border-radius: var(--avva-radius-sm); display: inline-flex; height: 38px; justify-content: center; min-width: 38px; padding: 0 .65rem; }
.avva-table-shell .avva-table .avva-row-action-primary { color: var(--avva-blue); }
.avva-table-shell .avva-table .avva-row-action-success { color: #147a52; }
.avva-table-shell .avva-table .avva-row-action:hover { background: var(--avva-background); }

.avva-empty-state { align-items: center; color: var(--avva-gray); display: flex; flex-direction: column; gap: .45rem; justify-content: center; min-height: 210px; padding: var(--avva-space-8); text-align: center; }
.avva-empty-state-icon { align-items: center; border: 1px solid var(--avva-border); border-radius: 50%; color: var(--avva-blue); display: inline-flex; font-size: 1.15rem; height: 44px; justify-content: center; margin-bottom: .35rem; width: 44px; }
.avva-empty-state strong { color: var(--avva-navy); font-size: var(--avva-text-md); }
.avva-empty-state p { font-size: var(--avva-text-sm); line-height: var(--avva-line-normal); margin: 0; }

@media (max-width: 1199px) { .avva-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .avva-page-header { align-items: flex-start; flex-direction: column; gap: var(--avva-space-4); } .avva-page-header-actions { width: 100%; } .avva-page-header-actions .avva-btn { width: 100%; } .avva-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .avva-page-header { margin-bottom: var(--avva-space-5); } .avva-page-header h2, .avva-page-header h3 { font-size: 1.5rem; } .avva-stat-grid { gap: var(--avva-space-3); margin-bottom: var(--avva-space-5); } .avva-stat { gap: .55rem; padding: .8rem; } .avva-stat-icon { flex-basis: 28px; height: 28px; width: 28px; } .avva-stat-label { font-size: .68rem; } .avva-stat-value { font-size: 1.15rem; } .avva-panel-header { padding: var(--avva-space-4); } .avva-panel-body { padding: var(--avva-space-4); } .avva-panel-body-flush { padding: 0; } .avva-empty-state { min-height: 180px; padding: var(--avva-space-6); } }

@media (min-width: 768px) {
    .avva-card { padding: var(--avva-space-8); }
}