/**
 * eap-perfect-theme.css
 * Perfect Aptitude Portal — Unified Design System
 * Mirrors theme.css exactly so portal feels like "homepage expanded into a dashboard".
 */

/* ─── 1. Design Tokens (mirrors theme.css :root) ─────────────────────── */
:root {
    /* ── Core palette (identical to website theme.css) ── */
    --pa-bg:            #f8fbff;
    --pa-surface:       #ffffff;
    --pa-surface-soft:  #f1f5f9;
    --pa-surface-2:     #f8fbff;
    --pa-surface-3:     #f1f5f9;
    --pa-primary:       #3b82f6;
    --pa-primary-dark:  #1d4ed8;
    --pa-primary-light: #eff6ff;
    --pa-secondary:     #10b981;
    --pa-accent:        #f97316;
    --pa-success:       #10b981;
    --pa-success-dark:  #047857;
    --pa-warning:       #f59e0b;
    --pa-warning-dark:  #b45309;
    --pa-danger:        #dc2626;
    --pa-danger-dark:   #991b1b;
    --pa-text:          #0f172a;
    --pa-muted:         #64748b;
    --pa-border:        #e2e8f0;
    --pa-border-solid:  #e2e8f0;
    --pa-border-focus:  #3b82f6;

    /* ── Radius scale ── */
    --pa-radius:        12px;
    --pa-radius-sm:     8px;
    --pa-radius-md:     12px;
    --pa-radius-lg:     16px;
    --pa-radius-full:   9999px;

    /* ── Shadows ── */
    --pa-shadow-xs:     0 1px 2px rgba(15, 23, 42, 0.04);
    --pa-shadow:        0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
    --pa-shadow-sm:     0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
    --pa-shadow-md:     0 8px 16px -2px rgba(0,0,0,0.08);
    --pa-shadow-lg:     0 20px 25px -5px rgba(15,23,42,0.10), 0 10px 10px -5px rgba(15,23,42,0.04);

    /* ── Motion ── */
    --pa-ease:          240ms cubic-bezier(0.4, 0, 0.2, 1);
    --pa-transition:    all 0.2s cubic-bezier(0.4,0,0.2,1);

    /* ── Sidebar (blue active, matches website primary) ── */
    --pa-sidebar-bg:              #ffffff;
    --pa-sidebar-text:            #64748b;
    --pa-sidebar-text-active:     #3b82f6;
    --pa-sidebar-item-hover:      #f1f5f9;
    --pa-sidebar-item-active:     rgba(59, 130, 246, 0.08);
    --pa-sidebar-divider:         #e2e8f0;
    --pa-sidebar-width:           260px;

    /* ── eap- → pa- forward-compat aliases ── */
    --eap-bg:               var(--pa-bg);
    --eap-surface:          var(--pa-surface);
    --eap-surface-2:        var(--pa-surface-soft);
    --eap-surface-3:        var(--pa-surface-soft);
    --eap-border:           var(--pa-border);
    --eap-border-solid:     var(--pa-border-solid);
    --eap-text-primary:     var(--pa-text);
    --eap-text-secondary:   var(--pa-muted);
    --eap-text-muted:       var(--pa-muted);
    --eap-primary:          var(--pa-primary);
    --eap-primary-dark:     var(--pa-primary-dark);
    --eap-primary-hover:    var(--pa-primary-dark);
    --eap-font:             'Inter', system-ui, sans-serif;

    /* ── Legacy shorthand aliases (used by eap-admin-shim.css & eap-global-admin.css) ── */
    --r-sm:       var(--pa-radius-sm);
    --r-md:       var(--pa-radius-md);
    --r-lg:       var(--pa-radius-lg);
    --ease:       var(--pa-ease);
    --shadow-xs:  var(--pa-shadow-xs);
    --shadow-sm:  var(--pa-shadow-sm);
    --shadow-md:  var(--pa-shadow-md);

    /* ── Named colour aliases (legacy) ── */
    --eap-emerald:  var(--pa-success);
    --eap-amber:    var(--pa-warning);
    --eap-coral:    var(--pa-danger);
    --eap-mint:     var(--pa-success);
    --eap-yellow:   var(--pa-warning);
    --eap-blue:     var(--pa-primary);
    --eap-blue-dark: var(--pa-primary-dark);
}

/* ─── 2. Base Reset ───────────────────────────────────────────────────── */
.eap-viewport-shell,
.eap-portal-shell {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--pa-bg);
    color: var(--pa-text);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

/* ─── 3. Layout Shell ────────────────────────────────────────────────── */
.eap-portal-shell {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.eap-shell-inner,
.eap-dashboard-app-wrap {
    display: flex;
    flex-direction: row;
    flex: 1;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
}

.eap-main {
    flex: 1;
    background: var(--pa-bg);
    padding: 32px;
    overflow-y: auto;
    box-sizing: border-box;
    min-width: 0;
}

/* ─── 4. Sidebar — clean white, matches homepage nav ─────────────────── */
.eap-sidebar,
.eap-portal-shell .eap-sidebar {
    width: 240px;
    min-width: 240px;
    background: var(--pa-surface) !important;
    border-right: 1px solid var(--pa-border) !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    padding: 0;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Override all role-specific sidebar colors */
body.pa-role-institution .eap-sidebar,
body.pa-role-teacher .eap-sidebar,
body.pa-role-student .eap-sidebar,
body.pa-role-admin .eap-sidebar,
.pa-role-institution .eap-sidebar,
.pa-role-teacher .eap-sidebar,
.pa-role-student .eap-sidebar {
    background: var(--pa-surface) !important;
    border-right: 1px solid var(--pa-border) !important;
    box-shadow: 2px 0 8px rgba(0,0,0,0.04) !important;
}

.eap-sidebar-top,
.eap-portal-shell .eap-sidebar-top {
    padding: 20px 16px 16px;
    border-bottom: 1px solid var(--pa-border);
}

.eap-sidebar-logo,
.eap-logo-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--pa-text) !important;
    letter-spacing: -0.02em;
}

.eap-logo-sub {
    font-size: 11px;
    color: var(--pa-muted) !important;
    font-weight: 500;
}

/* Nav Links */
.eap-sidebar-nav {
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.eap-nav-link,
.eap-portal-shell .eap-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--pa-radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--pa-muted) !important;
    text-decoration: none !important;
    transition: var(--pa-transition);
    background: transparent;
    border: none;
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
}

.eap-nav-link:hover,
.eap-portal-shell .eap-nav-link:hover {
    background: var(--pa-surface-soft) !important;
    color: var(--pa-text) !important;
}

.eap-nav-link.active,
.eap-nav-link[aria-current="page"],
.eap-portal-shell .eap-nav-link.active {
    background: rgba(59, 130, 246, 0.08) !important;
    color: var(--pa-primary) !important;
    font-weight: 600;
}

/* Override role-specific nav active colors */
body.pa-role-institution .eap-nav-link.active,
body.pa-role-teacher .eap-nav-link.active,
body.pa-role-student .eap-nav-link.active {
    background: rgba(59, 130, 246, 0.08) !important;
    color: var(--pa-primary) !important;
}

.eap-sidebar-footer,
.eap-portal-shell .eap-sidebar-footer {
    padding: 12px 8px 16px;
    border-top: 1px solid var(--pa-border);
}

.eap-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--pa-radius-sm);
    color: var(--pa-text) !important;
}

.eap-sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--pa-text) !important;
}

.eap-sidebar-user-role {
    font-size: 11px;
    color: var(--pa-muted) !important;
}

.eap-sidebar-logout,
.eap-portal-shell .eap-sidebar-logout {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--pa-radius-sm);
    font-size: 12px;
    font-weight: 600;
    color: var(--pa-muted) !important;
    text-decoration: none !important;
    transition: var(--pa-transition);
}

.eap-sidebar-logout:hover {
    background: rgba(220,38,38,0.06) !important;
    color: var(--pa-danger) !important;
}

/* ─── 5. Topbar ─────────────────────────────────────────────────────── */
.eap-topbar,
.eap-portal-shell .eap-topbar {
    background: var(--pa-surface) !important;
    border-bottom: 1px solid var(--pa-border) !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    box-sizing: border-box;
    gap: 16px;
}

/* User chip styling */
.eap-user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--pa-surface) !important;
    color: var(--pa-text) !important;
    border: 1px solid var(--pa-border) !important;
    border-radius: 9999px !important;
    padding: 6px 14px 6px 10px !important;
    box-shadow: var(--pa-shadow) !important;
    transition: var(--pa-transition) !important;
}
.eap-user-chip:hover {
    border-color: var(--pa-primary) !important;
    box-shadow: var(--pa-shadow-md) !important;
}
.eap-user-chip-avatar { line-height: 0; }
.eap-avatar-img,
.eap-user-chip-avatar img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: block;
    border: 1px solid var(--pa-border);
}
.eap-user-chip-info { display: flex; flex-direction: column; }
.eap-user-chip-name {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--pa-text) !important;
    white-space: nowrap;
    line-height: 1.2;
}
.eap-user-chip-role {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--pa-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

/* Kicker & Badges styling */
.eap-shell-kicker {
    display: inline-flex;
    align-items: center;
    background: rgba(59, 130, 246, 0.1);
    color: var(--pa-primary);
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 8px;
    vertical-align: middle;
}
.eap-role-badge {
    display: inline-flex;
    align-items: center;
    background: var(--pa-surface-soft);
    color: var(--pa-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 9999px;
    border: 1px solid var(--pa-border);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

/* Override role topbar gradients */
body.pa-role-institution .eap-topbar,
body.pa-role-teacher .eap-topbar,
body.pa-role-student .eap-topbar,
.pa-role-institution .eap-topbar,
.pa-role-teacher .eap-topbar,
.pa-role-student .eap-topbar {
    background: var(--pa-surface) !important;
    border-bottom: 1px solid var(--pa-border) !important;
    border-bottom-width: 1px !important;
}

.eap-page-title,
.eap-topbar h1 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--pa-text) !important;
    -webkit-text-fill-color: var(--pa-text) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    letter-spacing: -0.01em;
    margin: 0;
}

/* ─── 6. Cards — matches pa-card exactly ──────────────────────────── */
.eap-card,
.pa-card,
.eap-widget,
.eap-portal-shell .eap-card {
    background: var(--pa-surface) !important;
    border: 1px solid var(--pa-border) !important;
    border-left: 1px solid var(--pa-border) !important;
    border-left-width: 1px !important;
    border-radius: var(--pa-radius) !important;
    padding: 20px !important;
    box-shadow: var(--pa-shadow) !important;
    transition: var(--pa-transition);
    box-sizing: border-box;
}

.eap-card:hover,
.eap-widget:hover {
    transform: translateY(-1px);
    box-shadow: var(--pa-shadow-md) !important;
}

/* Card Title */
.eap-card-title,
.eap-widget-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--pa-text) !important;
    margin: 0 0 2px 0;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* Role card overrides — remove colored left borders */
body.pa-role-institution .eap-card,
body.pa-role-teacher .eap-card,
body.pa-role-student .eap-card,
body.pa-role-institution .pa-card,
body.pa-role-teacher .pa-card,
body.pa-role-student .pa-card {
    border-left: 1px solid var(--pa-border) !important;
    border-left-width: 1px !important;
    background: var(--pa-surface) !important;
    box-shadow: var(--pa-shadow) !important;
}

body.pa-role-institution .eap-card:hover,
body.pa-role-teacher .eap-card:hover,
body.pa-role-student .eap-card:hover {
    border-left-color: var(--pa-border) !important;
    box-shadow: var(--pa-shadow-md) !important;
}

/* ─── 7. Stat / KPI Cards ────────────────────────────────────────── */
.eap-kpi-card,
.eap-stat-card {
    background: var(--pa-surface);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    padding: 20px;
    box-shadow: var(--pa-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--pa-transition);
    box-sizing: border-box;
}

.eap-kpi-card:hover,
.eap-stat-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--pa-shadow-md);
}

.eap-metric-value {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--pa-text) !important;
    line-height: 1;
}

.eap-metric-label {
    font-size: 12px !important;
    color: var(--pa-muted) !important;
    font-weight: 500;
    margin-top: 4px;
}

/* ─── 8. Grid System ─────────────────────────────────────────────── */
.eap-dashboard-grid,
.eap-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}

.eap-col-12 { grid-column: span 12; }
.eap-col-8  { grid-column: span 8; }
.eap-col-6  { grid-column: span 6; }
.eap-col-4  { grid-column: span 4; }
.eap-col-3  { grid-column: span 3; }

@media (max-width: 1024px) {
    .eap-col-4 { grid-column: span 6; }
    .eap-col-3 { grid-column: span 6; }
}
@media (max-width: 768px) {
    .eap-dashboard-grid { gap: 14px; }
    .eap-main { padding: 16px; }
    .eap-col-3,.eap-col-4,.eap-col-6,.eap-col-8 { grid-column: span 12; }
}

/* ─── 9. Buttons — matches pa-button exactly ─────────────────────── */
.eap-btn,
.pa-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--pa-radius-sm);
    border: none;
    cursor: pointer;
    transition: var(--pa-transition);
    text-decoration: none !important;
    text-align: center;
    box-sizing: border-box;
    line-height: 1.4;
    gap: 6px;
    white-space: nowrap;
}

.eap-btn--primary, .pa-button-primary {
    background: var(--pa-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(59,130,246,0.25) !important;
}
.eap-btn--primary:hover, .pa-button-primary:hover {
    background: var(--pa-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59,130,246,0.35) !important;
}

.eap-btn--secondary, .pa-button-secondary {
    background: var(--pa-surface-soft) !important;
    color: var(--pa-text) !important;
    border: 1px solid var(--pa-border) !important;
    box-shadow: none !important;
}
.eap-btn--secondary:hover, .pa-button-secondary:hover {
    background: var(--pa-border) !important;
}

.eap-btn--success, .pa-button-success {
    background: var(--pa-success) !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(16,185,129,0.25) !important;
}
.eap-btn--success:hover, .pa-button-success:hover {
    filter: brightness(0.92);
    transform: translateY(-1px);
}

.eap-btn--danger, .pa-button-danger {
    background: var(--pa-danger) !important;
    color: #fff !important;
}

.eap-btn--sm { padding: 6px 12px; font-size: 12px; }
.eap-btn--lg { padding: 12px 28px; font-size: 15px; }

/* ─── 10. Badges ─────────────────────────────────────────────────── */
.eap-badge, .pa-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.eap-badge--primary,  .pa-badge-primary  { background: rgba(59,130,246,0.1);  color: var(--pa-primary); }
.eap-badge--success,  .pa-badge-success  { background: rgba(16,185,129,0.1);  color: var(--pa-success); }
.eap-badge--warning,  .pa-badge-warning  { background: rgba(245,158,11,0.1);  color: var(--pa-warning); }
.eap-badge--danger,   .pa-badge-danger   { background: rgba(220,38,38,0.1);   color: var(--pa-danger); }
.eap-badge--muted                        { background: var(--pa-surface-soft); color: var(--pa-muted);   border: 1px solid var(--pa-border); }

/* ─── 11. Tables ─────────────────────────────────────────────────── */
.eap-table, .pa-table {
    width: 100%;
    border-collapse: collapse;
}
.eap-table th, .pa-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--pa-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--pa-border);
    background: var(--pa-surface-soft);
}
.eap-table td, .pa-table td {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--pa-text) !important;
    border-bottom: 1px solid var(--pa-border);
    vertical-align: middle;
}
.eap-table tr:last-child td, .pa-table tr:last-child td { border-bottom: none; }
.eap-table tr:hover td { background: var(--pa-surface-soft); }

/* ─── 12. Forms ──────────────────────────────────────────────────── */
.eap-portal-shell input[type=text],
.eap-portal-shell input[type=email],
.eap-portal-shell input[type=tel],
.eap-portal-shell input[type=url],
.eap-portal-shell input[type=password],
.eap-portal-shell input[type=number],
.eap-portal-shell select,
.eap-portal-shell textarea,
.pa-input, .pa-select {
    width: 100%;
    padding: 9px 13px;
    font-size: 13px;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-sm);
    background: var(--pa-surface);
    color: var(--pa-text);
    transition: var(--pa-transition);
    box-sizing: border-box;
    font-family: inherit;
}
.eap-portal-shell input:focus,
.eap-portal-shell select:focus,
.eap-portal-shell textarea:focus {
    outline: none;
    border-color: var(--pa-primary);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.eap-portal-shell label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--pa-text);
    margin-bottom: 5px;
}
.eap-portal-shell small {
    font-size: 11px;
    color: var(--pa-muted);
    display: block;
    margin-top: 3px;
}

/* ─── 13. Tabs — matches pa-tabs ─────────────────────────────────── */
.eap-tabs, .pa-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--pa-border);
    margin-bottom: 20px;
}
.eap-tab, .pa-tab {
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pa-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: var(--pa-transition);
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    margin-bottom: -1px;
}
.eap-tab.active, .pa-tab.active,
.eap-tab-btn.active {
    color: var(--pa-primary) !important;
    border-bottom-color: var(--pa-primary) !important;
}

/* ─── 14. Empty States ───────────────────────────────────────────── */
.eap-empty-state, .pa-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
    color: var(--pa-muted);
}
.eap-empty-state .dashicons,
.pa-empty-state .dashicons {
    font-size: 40px;
    width: 40px;
    height: 40px;
    color: var(--pa-border);
    margin-bottom: 12px;
}
.eap-empty-state p, .pa-empty-state p {
    font-size: 13px;
    color: var(--pa-muted);
    margin: 0;
    max-width: 360px;
}

/* ─── 15. Alerts ─────────────────────────────────────────────────── */
.eap-alert, .pa-alert {
    padding: 12px 16px;
    border-radius: var(--pa-radius-sm);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-sizing: border-box;
}
.eap-alert--success, .pa-alert-success { background: rgba(16,185,129,0.05); border-color: rgba(16,185,129,0.2); color: #047857; }
.eap-alert--warning, .pa-alert-warning { background: rgba(245,158,11,0.05); border-color: rgba(245,158,11,0.2); color: #92400e; }
.eap-alert--danger,  .pa-alert-danger  { background: rgba(220,38,38,0.05);  border-color: rgba(220,38,38,0.2);  color: #991b1b; }
.eap-alert--info                       { background: rgba(59,130,246,0.05); border-color: rgba(59,130,246,0.2); color: #1e40af; }

/* ─── 16. Status Pills ───────────────────────────────────────────── */
.eap-status-pill, .pa-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}
.eap-status-pill.emerald, .pa-status--success { background: rgba(16,185,129,0.1); color: #059669; }
.eap-status-pill.blue,    .pa-status--info    { background: rgba(59,130,246,0.1); color: #2563eb; }
.eap-status-pill.amber,   .pa-status--warning { background: rgba(245,158,11,0.1); color: #d97706; }
.eap-status-pill.red,     .pa-status--danger  { background: rgba(220,38,38,0.1);  color: #dc2626; }

/* ─── 17. Section Headers (page-level) ───────────────────────────── */
.eap-section-header {
    margin-bottom: 20px;
}
.eap-section-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--pa-text);
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}
.eap-section-subtitle {
    font-size: 13px;
    color: var(--pa-muted);
    margin: 0;
}

/* ─── 18. Role colour accents (subtle, not the whole sidebar) ─────── */
.eap-role-accent-bar {
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--pa-primary);
    width: 100%;
}
body.pa-role-teacher   .eap-role-accent-bar { background: var(--pa-secondary); }
body.pa-role-student   .eap-role-accent-bar { background: var(--pa-accent); }
body.pa-role-institution .eap-role-accent-bar { background: var(--pa-primary); }

/* ─── 19. Utility helpers ─────────────────────────────────────────── */
.u-text-muted  { color: var(--pa-muted) !important; }
.u-text-primary { color: var(--pa-text) !important; }
.u-text-accent  { color: var(--pa-primary) !important; }
.u-mt-sm { margin-top: 8px; }
.u-mt-xs { margin-top: 4px; }
.u-mt-md { margin-top: 16px; }
.u-mt-lg { margin-top: 24px; }
.u-m-0 { margin: 0 !important; }
.u-mb-sm { margin-bottom: 8px; }
.u-mb-xs { margin-bottom: 4px; }
.u-mb-md { margin-bottom: 16px; }
.u-mb-lg { margin-bottom: 24px; }
.u-mr-xs { margin-right: 4px; }
.u-p-sm { padding: 8px; }
.u-p-md { padding: 16px; }
.u-pl-md { padding-left: 16px; }
.u-flex    { display: flex; align-items: center; }
.u-flex-gap { gap: 12px; }
.u-flex-gap-sm { gap: 8px; }
.u-flex-gap-md { gap: 16px; }
.u-wrap { flex-wrap: wrap; }
.u-between { justify-content: space-between; }
.u-hidden { display: none !important; }
.u-font-semibold { font-weight: 600; }
.u-text-xs { font-size: 12px; }
.u-text-sm { font-size: 14px; }
.u-block { display: block; }
.u-border { border: 1px solid var(--pa-border); }
.u-rounded-md { border-radius: 8px; }
.u-bg-primary { background: var(--pa-surface-soft); }
.u-line-tight { line-height: 1; }
.u-maxw-220 { max-width: 220px; }
.u-maxw-full { max-width: 100%; }

.eap-dashboard-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: end;
}

.eap-dashboard-control-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.eap-dashboard-control-stack {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.eap-dashboard-subtext {
    color: var(--eap-subtext);
    font-size: 12px;
}

.eap-dashboard-section--spaced {
    margin-top: 20px;
}

.eap-dashboard-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.eap-dashboard-divider {
    margin: 18px 0;
    border-color: rgba(255, 255, 255, 0.12);
}

.eap-dashboard-diagnostic {
    margin-top: 16px;
}

.eap-conv-telemetry-panel {
    padding: 15px;
    background: var(--eap-surface-2);
    border: 1px solid var(--eap-border);
    border-radius: 12px;
    margin-bottom: 12px;
}

.eap-conv-action-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.eap-conv-table-shell {
    background: var(--eap-surface-2);
    border: 1px solid var(--eap-border);
    border-radius: 12px;
    overflow: hidden;
}

.eap-conv-inline-note {
    margin: 0;
    font-size: 11px;
    color: var(--eap-text-muted);
}

.eap-conv-status-note {
    margin: 0;
    font-size: 12px;
    color: var(--eap-text-muted);
}

.eap-debug-panel {
    margin-top: 24px;
    padding: 16px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
}

.eap-debug-row {
    margin: 4px 0;
}

.eap-debug-list {
    margin: 8px 0 0;
}

.eap-widget-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.eap-widget-note {
    font-size: 11px;
    color: var(--eap-text-muted);
    margin: 0;
}

.eap-widget-history {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.eap-widget-history-item {
    border: 1px solid var(--eap-border);
    border-radius: 6px;
    padding: 10px 12px;
}

.eap-widget-history-head {
    justify-content: space-between;
    margin-bottom: 4px;
}

.eap-widget-status-label {
    text-transform: uppercase;
}

.eap-widget-status-label--new {
    color: #f59e0b;
}

.eap-widget-status-label--acknowledged {
    color: #3b82f6;
}

.eap-widget-status-label--answered {
    color: #22c55e;
}

.eap-widget-status-label--closed {
    color: #9ca3af;
}

.eap-widget-scorecard {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 6px;
}

.eap-widget-scorecard--success {
    background: var(--eap-surface-alt, #f0fdf4);
    border-left: 3px solid #22c55e;
}

.eap-widget-scorecard--info {
    background: var(--eap-surface-alt, #eff6ff);
    border-left: 3px solid #3b82f6;
}

.eap-widget-readable {
    line-height: 1.6;
}

.eap-empty-state--spaced {
    margin-bottom: 12px;
}

.eap-widget-feedback {
    display: none;
    margin-top: 6px;
}

.eap-widget-feedback--explanation {
    margin-top: 4px;
}

.eap-widget-quiz-item {
    border: 1px solid var(--eap-border);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.eap-widget-quiz-options label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    cursor: pointer;
    font-size: 13px;
}

.eap-livehub-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 24px;
    padding: 15px;
    background: #fbfdff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.eap-livehub-meta-item {
    flex: 1;
    min-width: 150px;
}

.eap-livehub-meta-item--wide {
    min-width: 180px;
}

.eap-livehub-action-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.eap-livehub-empty-state {
    text-align: center;
    max-width: 500px;
    padding: 40px;
}

.eap-livehub-alert {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid #dbe5f0;
    border-radius: 10px;
    background: #f8fafc;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* ─── 20. Progress bar ───────────────────────────────────────────── */
.eap-progress, .pa-progress {
    width: 100%;
    height: 6px;
    background: var(--pa-surface-soft);
    border-radius: 9999px;
    overflow: hidden;
}
.eap-progress-bar, .pa-progress-bar {
    height: 100%;
    background: var(--pa-primary);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* ─── 21. Page hero (dashboard top area) ─────────────────────────── */
.eap-page-hero {
    background: radial-gradient(circle at top right, rgba(59,130,246,0.06), transparent);
    border-bottom: 1px solid var(--pa-border);
    padding: 20px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    box-sizing: border-box;
}
.eap-page-hero h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--pa-text);
    margin: 0;
    letter-spacing: -0.02em;
}
.eap-page-hero p {
    font-size: 13px;
    color: var(--pa-muted);
    margin: 4px 0 0;
}

/* Shared portal shell/layout primitives moved from runtime inline injection */
.eap-viewport-shell {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0;
    background: #f8fbff;
    color: #0f172a;
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.wp-admin .eap-viewport-shell {
    position: relative;
    height: auto;
    min-height: calc(100vh - 32px);
    overflow: visible;
}

.eap-join-status {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #0f172a;
}

.eap-join-status--pending {
    border-left: 4px solid #f59e0b;
}

.eap-join-status--rejected {
    border-left: 4px solid #dc2626;
}

.eap-join-status p {
    margin: 8px 0 0;
    color: #64748b;
}

.eap-join-status strong {
    color: #0f172a;
    font-weight: 700;
}

/* Portal template fallback states */
.eap-portal-fallback {
    max-width: 780px;
    margin: 40px auto;
    padding: 24px;
    border-radius: 12px;
    font: 14px/1.5 system-ui, sans-serif;
}

.eap-portal-fallback__title {
    display: block;
    margin-bottom: 8px;
}

.eap-portal-fallback__message {
    margin: 0;
}

.eap-portal-fallback--error {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #7f1d1d;
}

.eap-portal-fallback--neutral {
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
}

body.eap-portal-template:not(.eap-layout-fullbleed) {
    background: #f8fbff;
}

body.eap-portal-template:not(.eap-layout-fullbleed) #page {
    width: 100%;
    max-width: 100%;
}

body.eap-portal-template:not(.eap-layout-fullbleed) .eap-viewport-shell {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* ─── 22. Unified Premium Shell Layout & Glassmorphism overrides ───────────────── */
.eap-portal-shell .eap-shell-inner {
    display: flex;
    flex-direction: row;
    flex: 1;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    gap: 20px;
    padding: 20px;
    background: var(--pa-bg);
}

.eap-portal-shell .eap-sidebar {
    border-radius: 16px !important;
    border: 1px solid var(--pa-border) !important;
    box-shadow: var(--pa-shadow) !important;
    background: var(--pa-surface) !important;
    overflow: hidden;
}

.eap-portal-shell .eap-main {
    flex: 1;
    background: transparent !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.eap-portal-shell .eap-topbar {
    border: 1px solid var(--pa-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--pa-shadow) !important;
    background: var(--pa-surface) !important;
    padding: 18px 24px !important;
    height: auto !important;
    min-height: 60px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px;
}

.eap-portal-shell .eap-content {
    border-radius: 16px !important;
    border: 1px solid var(--pa-border) !important;
    background: var(--pa-surface) !important;
    box-shadow: var(--pa-shadow) !important;
    padding: 24px !important;
    box-sizing: border-box;
    width: 100%;
}

/* ─── 23. Operational & scoped Institution Admin Dashboard Styles ───────────── */
.eap-viewport-shell[data-eap-role="institution_admin"] {
    --eap-inst-bg: var(--pa-bg);
    --eap-inst-surface: var(--pa-surface);
    --eap-inst-surface-soft: var(--pa-surface-soft);
    --eap-inst-sidebar: var(--pa-surface);
    --eap-inst-sidebar-dark: var(--pa-surface-soft);
    --eap-inst-text: var(--pa-text);
    --eap-inst-subtext: var(--pa-muted);
    --eap-inst-border: var(--pa-border);
    --eap-inst-primary: var(--pa-primary);
    --eap-inst-success: var(--pa-success);
    --eap-inst-warning: var(--pa-warning);
    --eap-inst-danger: var(--pa-danger);
    --eap-inst-radius: var(--pa-radius);
    --eap-inst-shadow-sm: var(--pa-shadow);
    --eap-inst-shadow-md: var(--pa-shadow-md);
    --eap-inst-space-1: 8px;
    --eap-inst-space-2: 12px;
    --eap-inst-space-3: 16px;
    --eap-inst-space-4: 20px;
    --eap-inst-space-5: 24px;
    --eap-inst-fs-1: 12px;
    --eap-inst-fs-2: 13px;
    --eap-inst-fs-3: 14px;
    --eap-inst-fs-4: 16px;
    --eap-inst-fs-5: 20px;
}

/* Override institution admin specific colors for unified theme */
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 42px;
    padding: 10px 14px !important;
    color: var(--pa-muted) !important;
    border-radius: var(--pa-radius-sm) !important;
    font-weight: 500 !important;
}

.eap-viewport-shell[data-eap-role="institution_admin"] .eap-nav-link:hover {
    background: var(--pa-surface-soft) !important;
    color: var(--pa-text) !important;
}

.eap-viewport-shell[data-eap-role="institution_admin"] .eap-nav-link.active {
    background: rgba(59, 130, 246, 0.08) !important;
    color: var(--pa-primary) !important;
    font-weight: 700 !important;
}

.eap-viewport-shell[data-eap-role="institution_admin"] .eap-sidebar-user {
    background: var(--pa-surface-soft) !important;
    border: 1px solid var(--pa-border) !important;
    color: var(--pa-text) !important;
}

.eap-viewport-shell[data-eap-role="institution_admin"] .eap-sidebar-logout {
    color: var(--pa-muted) !important;
}

.eap-viewport-shell[data-eap-role="institution_admin"] .eap-sidebar-logout:hover {
    color: var(--pa-danger) !important;
    background: rgba(220, 38, 38, 0.06) !important;
}

/* Operational grid & card styles */
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 20px !important;
}

.eap-viewport-shell[data-eap-role="institution_admin"] .eap-dashboard-grid > .eap-widget,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-dashboard-grid > .eap-card {
    grid-column: auto !important;
    min-width: 0;
}

.eap-viewport-shell[data-eap-role="institution_admin"] .eap-dashboard-grid > .eap-col-12,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-dashboard-grid > .eap-inst-module-card {
    grid-column: 1 / -1 !important;
}

/* Embedded admin panels inside dashboard cards */
.eap-portal-shell .eap-inst-module-frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 700px;
    flex: 1;
}

.eap-portal-shell .eap-inst-iframe {
    width: 100%;
    height: 100%;
    min-height: 700px;
    border: none;
    flex: 1;
    display: block;
    background: var(--pa-surface);
}

.eap-portal-shell .eap-inst-module-card .eap-card-body {
    padding: 0;
    overflow: hidden;
}

@media (max-width: 768px) {
    .eap-portal-shell .eap-inst-module-frame,
    .eap-portal-shell .eap-inst-iframe {
        min-height: 560px;
    }
}

/* Table styling inside dashboard modules */
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-table-scroll,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-staff-table-wrap,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-students-table-wrap,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-join-table-wrap {
    border: 1px solid var(--pa-border) !important;
    border-radius: 12px !important;
    background: var(--pa-surface) !important;
    overflow-x: auto;
    box-shadow: var(--pa-shadow) !important;
}

.eap-viewport-shell[data-eap-role="institution_admin"] .eap-table,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-staff-table,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-students-table,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-join-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}

.eap-viewport-shell[data-eap-role="institution_admin"] .eap-table thead th,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-staff-table thead th,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-students-table thead th,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-join-table thead th {
    background: var(--pa-surface-soft) !important;
    color: var(--pa-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid var(--pa-border) !important;
}

.eap-viewport-shell[data-eap-role="institution_admin"] .eap-table td,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-staff-table td,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-students-table td,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-join-table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--pa-border) !important;
    background: var(--pa-surface) !important;
    color: var(--pa-text) !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}

.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-staff-table tbody tr:hover td,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-students-table tbody tr:hover td,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-join-table tbody tr:hover td {
    background: var(--pa-surface-soft) !important;
}

/* Sub-headings, kickers and titles */
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-staff-module__header,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-students-module__header,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-join-module__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--pa-border);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--pa-surface) 0%, var(--pa-surface-soft) 100%);
    margin-bottom: 16px;
}

.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-staff-module__title,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-students-module__title,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-join-module__title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--pa-text);
}

.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-staff-module__subtitle,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-students-module__subtitle,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-join-module__subtitle {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--pa-muted);
    line-height: 1.4;
}

/* KPI count badges */
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-staff-kpi,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-students-kpi,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-join-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--pa-border);
    border-radius: 8px;
    background: var(--pa-surface);
    min-width: 100px;
}

.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-staff-kpi span,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-students-kpi span,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-join-kpi span {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pa-muted);
}

.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-staff-kpi strong,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-students-kpi strong,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-join-kpi strong {
    font-size: 20px;
    font-weight: 800;
    color: var(--pa-text);
    line-height: 1.1;
}

/* operational forms */
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-actions,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-perm-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* empty operational states */
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-staff-empty,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-students-empty,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-join-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px !important;
    background: var(--pa-surface-soft) !important;
    border-radius: 12px;
    text-align: center;
    color: var(--pa-muted);
}

.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-staff-empty .dashicons,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-students-empty .dashicons,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-join-empty .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    color: var(--pa-border);
}

.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-staff-empty strong,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-students-empty strong,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-join-empty strong {
    font-size: 14px;
    color: var(--pa-text);
    margin-bottom: 4px;
}

.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-staff-empty p,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-students-empty p,
.eap-viewport-shell[data-eap-role="institution_admin"] .eap-inst-join-empty p {
    font-size: 12px;
    color: var(--pa-muted);
    max-width: 320px;
    margin: 0;
}

/* auth and onboarding surfaces */
.eap-join-shell {
    background: linear-gradient(135deg, #f8fbff 0%, #edf4fe 100%);
    min-height: 100vh;
    padding: 60px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eap-join-status-card {
    width: 100%;
    max-width: 500px;
    background: #fff;
    padding: 2.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.eap-join-status-card--left { text-align: left; }
.eap-join-status-card--center { text-align: center; }

.eap-join-status-title {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin-top: 0;
    margin-bottom: 12px;
}

.eap-join-status-text {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 0;
    line-height: 1.5;
}

.eap-admin-diagnostic-card {
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    max-width: 600px;
    margin: 40px auto;
    color: #333;
    font-family: sans-serif;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.eap-admin-diagnostic-title {
    color: #e11d48;
    margin-top: 0;
}

.eap-admin-diagnostic-list {
    background: #f8fafc;
    padding: 16px 32px;
    border-radius: 8px;
}

.eap-login-root.eap-auth-shell {
    width: min(1180px, calc(100vw - 40px));
    margin: 28px auto 52px !important;
    padding: 0 !important;
    background:
        radial-gradient(circle at 18% 12%, rgba(77, 124, 254, 0.12), transparent 30%),
        linear-gradient(180deg, #f7fbff 0%, #ffffff 72%) !important;
    border: 1px solid #e3ebf7 !important;
    border-radius: 8px !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08) !important;
    overflow: hidden;
}

.eap-login-root .eap-auth-inner {
    max-width: none !important;
    margin: 0 !important;
    padding: 34px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.eap-login-root .eap-auth-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.06fr) minmax(360px, 0.94fr) !important;
    gap: 28px !important;
    align-items: stretch !important;
    text-align: left !important;
}

.eap-login-root .eap-auth-hero {
    min-height: 486px;
    padding: 44px;
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(30, 64, 175, 0.84)),
        url("https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1200&q=70");
    background-size: cover;
    background-position: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.eap-login-root .eap-auth-kicker {
    width: fit-content;
    margin: 0 0 18px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.eap-login-root .eap-auth-hero-title {
    max-width: 610px;
    margin: 0 0 16px !important;
    color: #fff !important;
    font-size: 44px;
    line-height: 1.08;
    font-weight: 900;
}

.eap-login-root .eap-auth-hero-copy {
    max-width: 560px;
    margin: 0 0 24px !important;
    color: #e5edf9 !important;
    font-size: 16px;
    line-height: 1.65;
}

.eap-login-root .eap-auth-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}

.eap-login-root .eap-auth-hero-points span {
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.eap-login-root .eap-auth-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.eap-login-root .eap-auth-hero-btn {
    min-height: 42px;
    padding: 11px 18px !important;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none !important;
}

.eap-login-root .eap-auth-card {
    padding: 34px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid #dce7f4 !important;
    border-radius: 8px !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10) !important;
}

.eap-auth-card--signup { max-width: 480px; margin: auto; }
.eap-login-root .eap-auth-card--login {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.eap-auth-head,
.eap-login-root .eap-auth-login-head { margin-bottom: 22px; text-align: left; }
.eap-login-root .eap-auth-title { font-size: 28px; font-weight: 900; color: #0f172a; margin: 0 0 8px; }
.eap-login-root .eap-auth-subtitle { font-size: 14px; color: #64748b; margin: 0; }

.eap-login-root .eap-auth-form { display: grid; gap: 15px; }
.eap-login-root .eap-auth-login-form { width: 100%; }
.eap-login-root .eap-auth-label { font-size: 13px; font-weight: 800; color: #1e293b; margin-bottom: 7px; display: block; }
.eap-login-root .eap-auth-input {
    width: 100%;
    min-height: 46px;
    padding: 12px 13px;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #0f172a;
    font-size: 15px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.eap-login-root .eap-auth-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14) !important;
    outline: none;
}

.eap-login-root .eap-auth-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: 13px; }
.eap-login-root .eap-auth-checkbox { display: flex; align-items: center; gap: 7px; color: #475569; font-weight: 700; white-space: nowrap; }
.eap-login-root .eap-auth-link { color: #2563eb; text-decoration: none; font-weight: 800; }
.eap-login-root .eap-auth-link:hover { text-decoration: underline; }
.eap-auth-link--strong { font-weight: 800; }
.eap-auth-link--success { color: #059669; font-weight: 800; }
.eap-auth-link--spaced { margin: 0 8px; }

.eap-login-root .eap-auth-submit {
    width: 100%;
    min-height: 48px;
    margin-top: 4px;
    padding: 13px !important;
    font-size: 14px;
    font-weight: 900;
    border-radius: 8px !important;
}
.eap-login-root .eap-auth-secondary-link {
    min-height: 44px;
    padding: 12px !important;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    border-radius: 8px !important;
    text-decoration: none !important;
}
.eap-auth-footer-note { margin-top: 20px; }

.eap-auth-alert {
    background-color: #fef2f2;
    border: 1px solid #fee2e2;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

.eap-auth-alert-icon { color: #ef4444; font-size: 18px; font-weight: 700; }
.eap-auth-alert-text { color: #991b1b; font-size: 13px; font-weight: 500; line-height: 1.4; }

.eap-login-root .eap-auth-need-access {
    margin-top: 24px;
    text-align: left;
    border-top: 1px solid #e2e8f0;
    padding-top: 16px;
    font-size: 13px;
    color: #64748b;
}

.eap-login-root .eap-auth-role-section {
    text-align: left;
    margin-top: 4px;
    padding: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}
.eap-login-root .eap-auth-role-title { font-size: 22px; font-weight: 900; color: #0f172a; margin: 0 0 8px; }
.eap-login-root .eap-auth-role-subtitle { font-size: 14px; color: #64748b; margin: 0 0 20px; max-width: none; }
.eap-login-root .eap-auth-role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.eap-login-root .eap-auth-role-card {
    min-height: 188px;
    padding: 18px !important;
    background: #f8fbff !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #dce7f4 !important;
    text-align: left;
}

.eap-login-root .eap-auth-role-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-bottom: 13px;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}
.eap-auth-role-icon--student { background: #3b82f6; }
.eap-auth-role-icon--teacher { background: #10b981; }
.eap-auth-role-icon--institute { background: #4f46e5; }
.eap-login-root .eap-auth-role-card-title { font-size: 16px; font-weight: 900; color: #0f172a; margin: 0 0 8px; }
.eap-login-root .eap-auth-role-card-copy { font-size: 13px; color: #475569; line-height: 1.5; margin: 0 0 16px; }
.eap-login-root .eap-auth-role-cta { width: 100%; padding: 10px 14px !important; font-size: 13px; font-weight: 800; border-radius: 8px !important; text-decoration: none !important; }
.eap-auth-role-cta--institute { background-color: #4f46e5 !important; }

.eap-login-root .eap-auth-trust {
    text-align: left;
    margin-top: 0;
    border-top: 0;
    padding: 22px 24px;
    border-radius: 8px;
    background: #f8fbff;
    border: 1px solid #e2e8f0;
}
.eap-login-root .eap-auth-trust-title { font-size: 13px; font-weight: 900; color: #334155; text-transform: uppercase; margin: 0 0 16px; }
.eap-login-root .eap-auth-trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.eap-login-root .eap-auth-trust-item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.eap-login-root .eap-auth-trust-check { font-size: 16px; font-weight: 900; }
.eap-auth-trust-check--blue { color: #3b82f6; }
.eap-auth-trust-check--green { color: #10b981; }
.eap-auth-trust-check--orange { color: #f97316; }
.eap-login-root .eap-auth-trust-label { font-size: 13px; font-weight: 800; color: #0f172a; }

.eap-login-root .eap-auth-badge-row { display: flex; justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
.eap-login-root .eap-auth-badge { padding: 6px 10px; font-size: 11px; border-radius: 999px; }

.eap-login-root .eap-auth-support { text-align: center; margin-top: 2px; font-size: 13px; color: #64748b; }

.eap-join-already-text {
    color: var(--eap-text-secondary, #475569);
}

.eap-join-already-inst {
    color: var(--eap-text-primary, #0f172a);
}

.eap-join-already-text--spaced {
    margin-top: 8px;
}

.eap-join-search-form {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.eap-join-search-group {
    flex: 1;
}

.eap-join-search-submit {
    align-self: flex-end;
}

.eap-join-search-empty {
    color: var(--eap-text-secondary, #475569);
    margin-top: 16px;
}

.eap-join-search-results {
    margin-top: 20px;
}

.eap-join-request-form {
    display: inline;
}

.eap-join-how-list {
    color: var(--eap-text-secondary);
    line-height: 2;
    margin: 0;
    padding-left: 20px;
}

.eap-inst-link-note {
    color: var(--eap-text-secondary, #475569);
    margin: 0 0 16px;
}

.eap-join-status--flush {
    margin: 0;
}

.eap-join-status--spaced {
    margin: 0 0 16px;
}

.eap-live-room-wrap {
    padding: 20px;
}

.eap-live-room-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.eap-live-room-title {
    margin: 0;
    color: #fff;
}

.eap-live-room-code {
    margin: 5px 0 0;
    color: #94a3b8;
    font-size: 14px;
}

.eap-live-transcript {
    height: 450px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.eap-live-transcript-empty {
    color: #64748b;
    text-align: center;
    padding-top: 150px;
}

.eap-live-panel {
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 12px;
}

.eap-live-panel--status {
    border: 1px solid rgba(56, 189, 248, 0.25);
    background: rgba(14, 116, 144, 0.18);
}

.eap-live-panel--health {
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.35);
}

.eap-live-panel-kicker {
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin-bottom: 8px;
}

.eap-live-panel-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.eap-live-launch-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    min-height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: #e2e8f0;
    background: rgba(51, 65, 85, 0.45);
}

.eap-live-launch-state {
    font-size: 13px;
    color: #e2e8f0;
    font-weight: 600;
}

.eap-live-panel-detail {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}

.eap-live-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    font-size: 12px;
    color: #e2e8f0;
}

.eap-live-controls {
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.eap-live-control-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.eap-recording-indicator {
    display: none;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-weight: 700;
    font-size: 12px;
}

.eap-recording-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
}

.eap-live-recording-state {
    display: flex;
    flex-direction: column;
    min-width: 220px;
}

.eap-live-recording-kicker {
    font-size: 11px;
    color: #94a3b8;
    letter-spacing: 0.05em;
}

.eap-live-recording-text {
    font-size: 13px;
    color: #e2e8f0;
}

.eap-live-teacher-fallback {
    display: none;
    width: 100%;
}

.eap-live-form-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
}

.eap-live-input {
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    padding: 10px;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
}

.eap-live-input--single {
    min-height: 36px;
    padding: 0 10px;
}

.eap-live-input--id {
    width: 120px;
    min-height: 36px;
    padding: 0 10px;
}

.eap-live-input--textarea {
    flex: 1;
    min-width: 260px;
}

.eap-live-teacher-reply-wrap {
    width: 100%;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    padding-top: 10px;
}

.eap-live-subtle-status {
    width: 100%;
    font-size: 12px;
    color: #94a3b8;
}

.eap-live-student-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eap-live-student-hint {
    color: #94a3b8;
    font-size: 13px;
}

.eap-live-microphone-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.eap-live-language-form {
    align-items: center;
}

.eap-live-language-label {
    font-size: 12px;
    color: #cbd5e1;
    letter-spacing: 0.03em;
}

.eap-live-hint {
    font-size: 11px;
    color: #94a3b8;
}

.eap-live-exit-link {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.eap-peer-chat-panel {
    margin-top: 14px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.eap-peer-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.eap-peer-chat-title {
    margin: 0;
    color: #e2e8f0;
    font-size: 15px;
}

.eap-peer-chat-unread {
    display: none;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 7px;
    margin-left: 6px;
    vertical-align: middle;
}

.eap-peer-chat-status {
    color: #94a3b8;
}

.eap-peer-chat-messages {
    max-height: 240px;
    overflow-y: auto;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.eap-peer-chat-empty {
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
}

.eap-peer-chat-form {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.eap-peer-chat-input {
    flex: 1;
    min-width: 260px;
}

.eap-teacher-question-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.eap-teacher-question-empty {
    color: #94a3b8;
    font-size: 13px;
}

.eap-teacher-question-item {
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.25);
}

.eap-teacher-question-pick {
    all: unset;
    cursor: pointer;
    display: block;
    width: 100%;
    color: #e2e8f0;
    font-size: 13px;
}

.eap-teacher-question-id {
    color: #93c5fd;
}

.eap-live-analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.eap-live-analytics-card {
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.eap-live-analytics-title {
    margin: 0 0 10px;
    color: #e2e8f0;
    font-size: 15px;
}

.eap-inst-home-kpi-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

.eap-pb-lg {
    padding-bottom: 24px;
}

.eap-license-activate-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.eap-license-activate-input {
    width: 100%;
    max-width: 320px;
    padding: 8px 12px;
    border: 1px solid var(--eap-border);
    border-radius: var(--r-sm);
}

.eap-teacher-session-action-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.eap-teacher-no-action {
    color: #64748b;
    font-size: 12px;
}

.eap-teacher-performance--summary {
    background-color: rgba(59, 130, 246, 0.06);
}

.eap-teacher-performance--mcq {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--eap-border, #e5e7eb);
    border-radius: 8px;
    background: rgba(34, 197, 94, 0.06);
}

.eap-teacher-performance-title {
    display: block;
    margin-bottom: 4px;
}

.eap-teacher-performance-copy {
    margin: 0;
    font-size: 13px;
}

.eap-teacher-item-status {
    max-width: 160px;
}

.eap-teacher-student-ids {
    max-width: 220px;
}

.eap-alert-spaced {
    margin: 20px;
}

.eap-student-answer-state--answered {
    color: var(--eap-emerald);
    font-weight: 600;
}

.eap-student-answer-state--pending {
    color: var(--eap-amber);
}

.eap-student-mcq-option--stacked {
    display: block;
    margin-bottom: 6px;
}

.eap-student-mcq-radio {
    margin-right: 8px;
}

.eap-layout-diag-title {
    font-weight: 700;
    margin-bottom: 8px;
    color: #93c5fd;
}

.eap-layout-diag-divider {
    border: none;
    border-top: 1px solid rgba(148, 163, 184, 0.3);
    margin: 10px 0;
}

.eap-layout-diag-subtitle {
    font-weight: 700;
    margin-bottom: 6px;
}

.eap-layout-diag-line {
    white-space: normal;
}

.eap-inst-profile-cover {
    overflow: hidden;
}

.eap-inst-profile-cover-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.eap-teacher-status-badge--live,
.eap-teacher-status-badge--active,
.eap-teacher-status-badge--in-progress {
    background-color: #ef4444;
}

.eap-teacher-status-badge--scheduled,
.eap-teacher-status-badge--upcoming {
    background-color: #1d4ed8;
}

.eap-teacher-status-badge--completed,
.eap-teacher-status-badge--ended,
.eap-teacher-status-badge--done {
    background-color: #166534;
}

.eap-teacher-status-badge--cancelled,
.eap-teacher-status-badge--canceled {
    background-color: #475569;
}

.eap-teacher-status-tag--pending_approval {
    --eap-teacher-status: #7c3aed;
}

.eap-teacher-status-tag--new {
    --eap-teacher-status: #b45309;
}

.eap-teacher-status-tag--acknowledged {
    --eap-teacher-status: #1d4ed8;
}

.eap-teacher-status-tag--answered,
.eap-teacher-status-tag--completed,
.eap-teacher-status-tag--published {
    --eap-teacher-status: #166534;
}

.eap-teacher-status-tag--closed,
.eap-teacher-status-tag--draft,
.eap-teacher-status-tag--pending,
.eap-teacher-status-tag--uploaded,
.eap-teacher-status-tag--queued {
    --eap-teacher-status: #475569;
}

.eap-teacher-status-tag--review,
.eap-teacher-status-tag--processing,
.eap-teacher-status-tag--retrying {
    --eap-teacher-status: #b45309;
}

.eap-teacher-status-tag--failed,
.eap-teacher-status-tag--blocked,
.eap-teacher-status-tag--cancelled {
    --eap-teacher-status: #ef4444;
}

/* media responsive behavior */
@media (max-width: 960px) {
    .eap-auth-grid { grid-template-columns: 1fr; }
    .eap-auth-card { padding: 28px 20px; }
    .eap-auth-trust-grid { gap: 16px; }

    .eap-login-root.eap-auth-shell {
        width: min(100%, calc(100vw - 24px));
        margin: 18px auto 34px !important;
    }

    .eap-login-root .eap-auth-inner {
        padding: 18px;
        gap: 18px;
    }

    .eap-login-root .eap-auth-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .eap-login-root .eap-auth-hero {
        min-height: 360px;
        padding: 30px;
    }

    .eap-login-root .eap-auth-hero-title {
        font-size: 34px;
    }

    .eap-login-root .eap-auth-role-grid,
    .eap-login-root .eap-auth-trust-grid {
        grid-template-columns: 1fr !important;
    }

    .eap-login-root .eap-auth-role-card {
        min-height: 0;
    }

    .eap-portal-shell .eap-shell-inner {
        flex-direction: column !important;
        padding: 12px !important;
        gap: 12px !important;
    }
    
    .eap-portal-shell .eap-sidebar {
        width: 100% !important;
        min-width: 0 !important;
    }
    
    .eap-portal-shell .eap-topbar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 16px !important;
    }
    
    .eap-portal-shell .eap-topbar-right {
        margin-left: 0 !important;
        display: flex;
        justify-content: flex-end;
    }
}