.ea-breadcrumb-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ea-beta-badge {
    margin-left: 4px;
    font-size: 13px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--ea-brand-10, #f3f0ff);
    color: var(--ea-brand, #4D2EFD);
    display: flex;
    align-items: center;
    gap: 4px;
}
#ea-drilldown-panel {
    scroll-margin-bottom: 60px;
}
/* ═══════════════════════════════════════════════════════════════
   educator-admin.css
   Centralized styles for the Educator Admin dashboard components.
   Uses STEM Creative Games brand colors + Fluent Design principles.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ────────────────────────────────────────────── */
:root {
    --ea-font: "Poppins", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    /* Brand palette */
    --ea-blue:          #4D2EFD;
    --ea-blue-90:       #5e42fd;
    --ea-blue-70:       #8068fe;
    --ea-blue-50:       #a594fe;
    --ea-blue-30:       #c7befe;
    --ea-blue-10:       #efecff;
    --ea-green:         #7AFDB5;
    --ea-green-dark:    #2b9d5e;
    --ea-orange:        #FE920D;
    --ea-pink:          #F04FCD;
    --ea-white:         #ffffff;
    --ea-black:         #1b1b1f;

    /* Neutral ramp */
    --ea-neutral-2:     #fafafa;
    --ea-neutral-4:     #f5f5f5;
    --ea-neutral-6:     #efefef;
    --ea-neutral-10:    #e1e1e1;
    --ea-neutral-20:    #c8c8c8;
    --ea-neutral-40:    #9e9e9e;
    --ea-neutral-60:    #6e6e6e;
    --ea-neutral-80:    #484848;
    --ea-neutral-90:    #333333;

    /* Text */
    --ea-text:              #1e1e2d;

    /* Surfaces */
    --ea-surface:           var(--ea-neutral-2);
    --ea-surface-card:      var(--ea-white);
    --ea-surface-sidebar:   #fafafd;
    --ea-border:            #e6e9f2;
    --ea-border-subtle:     #f0f0f4;

    /* Shadows (Fluent depth) */
    --ea-shadow-2:   0 1px 2px rgba(0,0,0,.06);
    --ea-shadow-4:   0 2px 4px rgba(0,0,0,.07);
    --ea-shadow-8:   0 4px 8px rgba(0,0,0,.08);
    --ea-shadow-16:  0 8px 16px rgba(0,0,0,.08);
    --ea-shadow-28:  0 14px 28px rgba(0,0,0,.10);
    --ea-shadow-64:  0 32px 64px rgba(0,0,0,.12);

    /* Radii */
    --ea-radius-sm:  6px;
    --ea-radius-md:  10px;
    --ea-radius-lg:  14px;
    --ea-radius-xl:  20px;

    /* Layout */
    --ea-sidebar-w:            260px;
    --ea-sidebar-collapsed-w:  64px;
    --ea-topbar-h:             56px;

    /* ── Aliases for inline styles (map to brand vars from site.css) ── */
    --stemgreen-dark:  var(--ea-green-dark);
    --stemblue-50:     var(--ea-blue-50);
    --neutral-40:      var(--ea-neutral-40);
    --neutral-50:      var(--ea-neutral-60);
    --neutral-60:      var(--ea-neutral-60); 
}


/* ═══════════════════════════════════════════════════════════════
   ADMIN SHELL (app-level layout wrapper)
   ═══════════════════════════════════════════════════════════════ */
.ea-shell {
    display: grid;
    grid-template-columns: var(--ea-sidebar-w) 1fr;
    grid-template-rows: var(--ea-topbar-h) 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar content";
    height: 100vh;
    font-family: var(--ea-font);
    line-height: 1.5;
    color: var(--ea-black);
    background: var(--ea-surface);
    transition: grid-template-columns 200ms cubic-bezier(.4,0,.2,1);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}
.ea-shell.collapsed {
    grid-template-columns: var(--ea-sidebar-collapsed-w) 1fr;
}


/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
.ea-sidebar {
    grid-area: sidebar;
    background: var(--ea-surface-sidebar);
    border-right: 1px solid var(--ea-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 30;
    transition: width 200ms cubic-bezier(.4,0,.2,1);
}

/* Brand block */
.ea-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    min-height: var(--ea-topbar-h);
    flex-shrink: 0;
    overflow: hidden;
}
.ea-sidebar-brand .ea-logo {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: var(--ea-blue);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: .85rem;
    flex-shrink: 0;
}
.ea-sidebar-brand .ea-brand-logo {
    width: 34px; height: 34px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.ea-sidebar-brand .ea-brand-text { overflow: hidden; white-space: nowrap; }
.ea-sidebar-brand .ea-brand-full { flex-shrink: 0; line-height: 0; }
.ea-sidebar-brand .ea-brand-full svg { max-width: 100%; height: auto; }
.ea-sidebar-brand .ea-brand-mini { color:var(--stemblue); display: none; flex-shrink: 0; line-height: 0;  }
.ea-sidebar-brand h1 {
    font-family: var(--ea-font);
    font-size: .95rem;
    font-weight: 700; 
    line-height: 1.2;
    color: var(--ea-black);
    margin: 0;
}
.ea-sidebar-brand .ea-subtitle {
    font-size: .8225rem;
    color: var(--ea-neutral-60);
    font-weight: 500;
}

/* Collapsed state */
.ea-shell.collapsed .ea-brand-full { display: none; }
.ea-shell.collapsed .ea-brand-mini { display: block; }
.ea-shell.collapsed .ea-sidebar-brand { justify-content: center; padding: .85rem .5rem; }
.ea-shell.collapsed .ea-brand-text,
.ea-shell.collapsed .ea-nav-label,
.ea-shell.collapsed .ea-section-label, 
.ea-shell.collapsed .ea-sidebar-footer-text,
.ea-shell.collapsed .ea-nav-badge { display: none; }
.ea-shell.collapsed .ea-sidebar-footer { justify-content: center; flex-direction: column; gap: .4rem; padding: .75rem .5rem; }
.ea-shell.collapsed .ea-sidebar-footer .ea-avatar-sm { display: none; }
.ea-shell.collapsed .ea-signout-btn { margin-left: 0; }
.ea-shell.collapsed .ea-nav-item { justify-content: center; padding: .65rem; }
.ea-shell.collapsed .ea-nav-item svg { margin: 0; }

/* Scrollable nav area */
.ea-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    padding: .5rem .55rem;
    scrollbar-width: thin;
    scrollbar-color: var(--ea-neutral-20) transparent;
}
.ea-sidebar-scroll::-webkit-scrollbar { width: 6px; }
.ea-sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.ea-sidebar-scroll::-webkit-scrollbar-thumb { background: var(--ea-neutral-20); border-radius: 999px; }

/* Section labels */
.ea-section-label {
    font-family: var(--ea-font);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ea-neutral-40);
    padding: .8rem .55rem .35rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

/* Navigation groups */
.ea-nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ea-nav-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    border: none;
    background: transparent;
    color: var(--ea-neutral-80);
    font-family: var(--ea-font);
    font-size: .88rem;
    font-weight: 500;
    border-radius: var(--ea-radius-xl);
    cursor: pointer;
    width: 100%;
    text-align: left;
    position: relative;
    transition: background 120ms, color 120ms;
}
.ea-nav-item i { font-size: .9rem; flex-shrink: 0; width: 20px; text-align: center; }
.ea-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; color: inherit; }
.ea-nav-item:hover {
    background: var(--ea-blue-10);
    color: var(--ea-blue);
}
.ea-nav-item.active {
    background: var(--ea-blue);
    color: #fff;
    box-shadow: 0 4px 12px rgba(77,46,253,.28);
    font-weight: 600;
}
.ea-nav-badge {
    margin-left: auto;
    background: var(--ea-orange);
    color: #fff;
    font-size: .8225rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 999px;
    min-width: 1.5rem;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ea-nav-item.active .ea-nav-badge { background: rgba(255,255,255,.25); }

/* Footer */
.ea-sidebar-footer {
    position: relative;
    border-top: 1px solid var(--ea-border);
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-shrink: 0;
}
.ea-sidebar-footer .ea-avatar-sm {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--stemblue);
    color: var(--stemwhite);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .8225rem;
    flex-shrink: 0;
}
.ea-sidebar-footer-text { overflow: hidden; }
.ea-sidebar-footer-text .ea-name { font-size: .82rem; font-weight: 600; }
.ea-sidebar-footer-text .ea-role { font-size: .8225rem; color: var(--ea-neutral-40); }

/* Sign-out button */
.ea-signout-btn {
    margin-left: auto;
    width: 32px; height: 32px;
    border-radius: var(--ea-radius-xl);
    border: none;
    background: var(--stempink-50);
    color: var(--stemblack);
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity .15s ease;
}
.ea-signout-btn:hover { opacity: .85; }
.ea-signout-btn:active { opacity: .7; }

/* ─── Role Switcher (sidebar footer) ─── */
.ea-role-switcher {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: .8225rem;
    color: var(--ea-neutral-40);
    transition: color .15s ease;
}
.ea-role-switcher:hover { color: var(--stemblue); }
.ea-role-chevron {
    width: 12px; height: 12px;
    transition: transform .2s ease;
}
.ea-role-chevron.open { transform: rotate(180deg); }

.ea-role-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}
.ea-role-menu {
    position: fixed;
    bottom: 60px;
    left: 12px;
    width: calc(var(--ea-sidebar-w, 260px) - 24px);
    background: var(--ea-surface, #fff);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-lg, 10px);
    box-shadow: 0 -4px 16px rgba(0,0,0,.12);
    padding: .5rem;
    z-index: 1001;
    animation: ea-role-menu-in .15s ease;
}
@keyframes ea-role-menu-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ea-role-menu-header {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ea-neutral-40);
    padding: .25rem .5rem .35rem;
}
.ea-role-menu-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .5rem;
    border: none;
    border-radius: var(--ea-radius, 6px);
    background: none;
    cursor: pointer;
    font-size: .82rem;
    color: var(--ea-text);
    transition: background .12s ease;
    font-family: 'Poppins';
}
.ea-role-menu-item:hover { background: var(--ea-hover, rgba(0,0,0,.04)); }
.ea-role-menu-item.active {
    background: var(--stemblue-10, rgba(77,46,253,.08));
    font-weight: 600;
    color: var(--stemblue);
}
.ea-role-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.ea-role-check {
    margin-left: auto;
    width: 16px; height: 16px;
    color: var(--stemblue);
}

/* ─── Role Switch Card (settings page) ─── */
.ea-role-switch-card {
    padding: .5rem 0;
}
.ea-role-switch-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ea-text);
    margin-bottom: .25rem;
}
.ea-role-switch-title svg { flex-shrink: 0; color: var(--stemblue); }
.ea-role-switch-desc {
    font-size: .85rem;
    color: var(--ea-neutral-40);
    margin: 0 0 1rem;
}
.ea-role-switch-options {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.ea-role-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border: 1.5px solid var(--ea-border);
    border-radius: var(--ea-radius-xl, 20px);
    background: var(--ea-surface, #fff);
    font-size: .85rem;
    font-weight: 500;
    color: var(--ea-text);
    cursor: pointer;
    transition: all .15s ease;
}
.ea-role-switch-btn:hover:not(:disabled) {
    border-color: var(--stemblue);
    color: var(--stemblue);
    background: var(--stemblue-10, rgba(77,46,253,.06));
}
.ea-role-switch-btn.active {
    border-color: var(--stemblue);
    background: var(--stemblue-10, rgba(77,46,253,.08));
    color: var(--stemblue);
    font-weight: 600;
    cursor: default;
}
.ea-role-switch-btn:disabled { opacity: .7; cursor: default; }
.ea-role-switch-current {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--stemblue);
    color: #fff;
    padding: .1rem .4rem;
    border-radius: 4px;
}

/* ─── Settings Page ─── */
.ea-settings-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, var(--stemblue) 0%, #7c5cfc 100%);
    border-radius: var(--ea-radius-lg, 10px);
    margin-bottom: 1rem;
    color: #fff;
}
.ea-settings-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    border: 2px solid rgba(255,255,255,.4);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.15rem;
    flex-shrink: 0;
    color: #fff;
}
.ea-settings-hero-info { flex: 1; min-width: 0; }
.ea-settings-hero-name {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}
.ea-settings-hero-email {
    font-size: .85rem;
    opacity: .8;
    margin-top: .1rem;
}
.ea-settings-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: rgba(255,255,255,.2);
    padding: .25rem .65rem;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}
.ea-settings-hero-badge svg { width: 12px; height: 12px; }

.ea-settings-field {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--ea-border);
}
.ea-settings-field:last-child { border-bottom: none; }
.ea-settings-field-icon {
    width: 36px; height: 36px;
    border-radius: var(--ea-radius, 6px);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.ea-settings-field-icon svg { width: 16px; height: 16px; }
.ea-settings-field-text { flex: 1; min-width: 0; }
.ea-settings-field-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ea-neutral-40);
    margin-bottom: .15rem;
    line-height: 1.4;
}
.ea-settings-field-value {
    font-size: .9rem;
    font-weight: 500;
    color: var(--ea-text);
}
.ea-settings-note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .75rem 1rem;
    background: var(--stemblue-10, rgba(77,46,253,.06));
    border-radius: var(--ea-radius, 6px);
    font-size: .82rem;
    color: var(--ea-neutral-50, #666);
    margin-top: .75rem;
}
.ea-settings-note svg {
    width: 14px; height: 14px;
    flex-shrink: 0;
    margin-top: .1rem;
    color: var(--stemblue);
}


/* ═══════════════════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════════════════ */
.ea-topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1.25rem;
    background: var(--ea-surface-sidebar);
    border-bottom: 1px solid var(--ea-border);
    z-index: 20;
    font-family: var(--ea-font);
}
.ea-topbar-left { display: flex; align-items: center; gap: .75rem; flex: 1; }
.ea-topbar-right { display: flex; align-items: center; gap: .5rem; }

.ea-hamburger {
    width: 36px; height: 36px;
    border: 1px solid var(--ea-border);
    background: var(--ea-white);
    border-radius: var(--ea-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ea-neutral-60);
    transition: background 120ms;
}
.ea-hamburger:hover { background: var(--ea-blue-10); color: var(--ea-blue); }
.ea-hamburger svg { width: 18px; height: 18px; }

.ea-breadcrumb {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    color: var(--ea-neutral-40);
    justify-content: flex-start;
    width: auto;
    flex-grow: 0;
}
.ea-breadcrumb a { color: var(--ea-neutral-60); text-decoration: none; }
.ea-breadcrumb a:hover { color: var(--ea-blue); }
.ea-breadcrumb-link {
    color: var(--ea-blue);
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}
.ea-breadcrumb-link:hover { color: var(--ea-blue-dark, #3a1fd4); text-decoration: underline; }
.ea-breadcrumb .ea-sep { color: var(--ea-neutral-20); }
.ea-breadcrumb .ea-current { color: var(--ea-black); font-weight: 600; }

/* ── Breadcrumb Entity Picker (inline institution/district switcher) ── */
.ea-breadcrumb-divider {
    color: var(--ea-neutral-20);
    margin: 0 2px;
    font-weight: 300;
    user-select: none;
}
.ea-entity-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.ea-entity-picker-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: var(--ea-brand-10, #f3f0ff);
    border: 1px solid var(--ea-brand-20, #e0d9fe);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: .8rem;
    color: var(--ea-black);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
.ea-entity-picker-btn:hover {
    border-color: var(--ea-brand, #4D2EFD);
    background: #ece8ff;
    box-shadow: 0 1px 4px rgba(77,46,253,.1);
}
.ea-entity-picker-label {
    font-size: .7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ea-neutral-50, #6b7280);
    line-height: 1.4;
}
.ea-entity-picker-name {
    font-weight: 600;
    color: var(--ea-brand, #4D2EFD);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ea-entity-picker-chevron {
    color: var(--ea-neutral-50, #6b7280);
    flex-shrink: 0;
    transition: transform 0.2s;
}
.ea-entity-picker-chevron.open { transform: rotate(180deg); }
.ea-entity-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}
.ea-entity-picker-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--ea-neutral-10, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
    z-index: 1000;
    padding: .25rem 0;
}
.ea-entity-picker-menu-header {
    padding: .5rem .75rem;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ea-neutral-50, #9ca3af);
    border-bottom: 1px solid var(--ea-neutral-10, #e5e7eb);
}
.ea-entity-picker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .55rem .75rem;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: .84rem;
    color: var(--ea-black);
    transition: background .1s;
    text-align: left;
}
.ea-entity-picker-item:hover { background: var(--ea-brand-10, #f3f0ff); }
.ea-entity-picker-item.active { color: var(--ea-brand, #4D2EFD); font-weight: 600; }
.ea-entity-picker-item svg { flex-shrink: 0; color: var(--ea-brand, #4D2EFD); }
.ea-entity-picker-item-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.ea-search-bar {
    position: relative;
    width: 320px;
    margin-left: auto;
}
.ea-search-bar input {
    width: 100%;
    padding: .5rem .75rem .5rem 2.2rem;
    border: 1px solid var(--ea-border);
    border-radius: 999px;
    font-size: .85rem;
    font-family: var(--ea-font);
    background: var(--ea-neutral-4);
    color: var(--ea-black);
    transition: border-color 120ms, box-shadow 120ms;
}
.ea-search-bar input::placeholder { color: var(--ea-neutral-40); }
.ea-search-bar input:focus {
    outline: none;
    border-color: var(--ea-blue);
    box-shadow: 0 0 0 3px var(--ea-blue-10);
    background: #fff;
}
.ea-search-bar .ea-search-icon {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ea-neutral-40);
    pointer-events: none;
}
.ea-search-bar .ea-search-icon svg { width: 16px; height: 16px; }

/* ── Search results dropdown ── */
.ea-search-wrapper { position: relative; width: 320px; margin-left: auto; }
.ea-search-wrapper .ea-search-bar { width: 100%; margin-left: 0; }
.ea-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--ea-white);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-lg, 12px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    max-height: 380px;
    overflow-y: auto;
    z-index: 1000;
    padding: .25rem 0;
}
.ea-search-category {
    padding: .4rem .75rem .2rem;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ea-neutral-40);
}
.ea-search-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .45rem .75rem;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--ea-font);
    font-size: .85rem;
    color: var(--ea-black);
    transition: background 80ms;
}
.ea-search-item:hover, .ea-search-item.active { background: var(--ea-blue-10); }
.ea-search-item-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    background: var(--ea-neutral-4);
    color: var(--ea-neutral-60);
}
.ea-search-item-icon svg { width: 15px; height: 15px; }
.ea-search-item-text { display: flex; flex-direction: column; min-width: 0; }
.ea-search-item-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ea-search-item-subtitle {
    font-size: .75rem;
    color: var(--ea-neutral-40);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ea-search-empty {
    padding: 1rem;
    text-align: center;
    color: var(--ea-neutral-40);
    font-size: .85rem;
}
.ea-search-spinner {
    position: absolute;
    right: .7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    border: 2px solid var(--ea-border);
    border-top-color: var(--ea-blue);
    border-radius: 50%;
    animation: ea-spin .6s linear infinite;
}
@keyframes ea-spin { to { transform: translateY(-50%) rotate(360deg); } }

.ea-icon-btn {
    width: 36px; height: 36px;
    border: 1px solid var(--ea-border);
    background: var(--ea-white);
    border-radius: var(--ea-radius-xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ea-neutral-60);
    position: relative;
    transition: background 120ms;
}
.ea-icon-btn:hover { background: var(--ea-blue-10); color: var(--ea-blue); }
.ea-icon-btn svg { width: 18px; height: 18px; }
.ea-icon-btn .ea-badge-dot {
    position: absolute;
    top: 6px; right: 6px;
    width: 8px; height: 8px;
    background: var(--ea-orange);
    border: 2px solid var(--ea-white);
    border-radius: 50%;
}

/* Profile pill (used by DashboardShell for topbar user display) */
.ea-profile-pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .25rem .35rem .25rem .25rem;
}
.ea-profile-pill .ea-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ea-blue), var(--ea-pink));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8225rem;
}
.ea-profile-pill .ea-profile-name {
    font-size: .85rem;
    color: #344054;
}


/* ═══════════════════════════════════════════════════════════════
   CONTENT AREA
   ═══════════════════════════════════════════════════════════════ */
.ea-content {
    grid-area: content;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    padding: 1.25rem;
    background: var(--stemblue-10);
    font-family: var(--ea-font);
    scrollbar-width: thin;
    scrollbar-color: var(--ea-neutral-20) transparent;
}
.ea-content::-webkit-scrollbar { width: 6px; }
.ea-content::-webkit-scrollbar-track { background: transparent; }
.ea-content::-webkit-scrollbar-thumb { background: var(--ea-neutral-20); border-radius: 999px; }
.ea-content::-webkit-scrollbar-thumb:hover { background: var(--ea-neutral-40); }

@media (min-width: 1441px) {
    .ea-content {
        padding-left: var(--gutter-left);
        padding-right: var(--gutter-right);
    }
}
/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════════ */
.ea-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    gap: 1rem;
}
.ea-page-header h2 {
    font-family: var(--ea-font);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--stemblue);
    margin: 0;
}
.ea-page-header .ea-description {
    font-size: .88rem;
    color: var(--ea-neutral-60);
    margin-top: .15rem;
}
.ea-header-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
}


/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.ea-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border: 1px solid var(--ea-border);
    background: var(--ea-white);
    color: var(--ea-black);
    font-family: var(--ea-font);
    font-size: .84rem;
    font-weight: 600;
    border-radius: var(--ea-radius-xl);
    cursor: pointer;
    transition: all 120ms;
    white-space: nowrap;
}
.ea-btn:hover { background: var(--ea-neutral-4); }
.ea-btn svg { width: 16px; height: 16px; }

.ea-btn-primary {
    background: var(--ea-green);
    color: var(--ea-blue);
    border-color: var(--ea-green);
}
.ea-btn-primary:hover { background: #5dfca0; box-shadow: 0 4px 10px rgba(122,253,181,.35); }

.ea-btn-accent {
    background: var(--ea-green);
    color: #0d3f23;
    border-color: #a5fdd0;
}
.ea-btn-accent:hover { background: #68f5a5; }

.ea-btn-subtle {
    background: transparent;
    border-color: transparent;
    color: var(--ea-blue);
}
.ea-btn-subtle:hover { background: var(--ea-blue-10); }

.ea-btn-danger {
    background: #fff;
    border-color: #fca5a5;
    color: #dc2626;
}
.ea-btn-danger:hover { background: #fef2f2; }

.ea-btn-sm { padding: .35rem .6rem; font-size: .8225rem; }

.ea-btn-icon {
    padding: .4rem;
    width: 32px;
    height: 32px;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--ea-neutral-60);
    border-radius: var(--ea-radius-xl);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all 120ms;
}
.ea-btn-icon:hover { background: var(--ea-blue-10); color: var(--ea-blue); }
.ea-btn-icon.danger:hover { background: #fef2f2; color: #dc2626; }
.ea-btn-icon svg { width: 16px; height: 16px; }


/* ═══════════════════════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════════════════════ */
.ea-card {
    background: var(--ea-surface-card);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-lg);
    box-shadow: var(--ea-shadow-2);
    transition: box-shadow 180ms;
    display: flex;
    flex-direction: column;
}
.ea-card:hover { box-shadow: var(--ea-shadow-4); }
.ea-card-body {
    padding: 1rem 1.15rem;
    flex: 1 1 auto;
}
.ea-card-footer {
    padding: 1rem 1.15rem;
    padding-top: 0;
}

.ea-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .85rem 1.15rem;
    border-bottom: 1px solid var(--ea-border-subtle);
}
.ea-card-header h3 {
    font-family: var(--ea-font);
    font-size: .95rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--stemblue)
}
.ea-card-header h3 svg { width: 18px; height: 18px; color: var(--stemblue); }


/* ═══════════════════════════════════════════════════════════════
   METRIC CARD
   ═══════════════════════════════════════════════════════════════ */
.ea-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .85rem;
    margin-bottom: 1.25rem;
}

.ea-metric-card { position: relative; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.ea-metric-card .ea-card-body { position: relative; z-index: 1; }

.ea-metric-card .ea-accent-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
}
.ea-metric-card .ea-metric-icon {
    position: absolute;
    right: .9rem; top: .9rem;
    width: 40px; height: 40px;
    border-radius: var(--ea-radius-md);
    display: grid;
    place-items: center;
    z-index: 1;
}
.ea-metric-card .ea-metric-icon svg { width: 20px; height: 20px; }
.ea-metric-card .ea-metric-label {
    font-size: .8225rem;
    color: var(--ea-neutral-60);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.4;
}
.ea-metric-card .ea-metric-value {
    font-family: var(--ea-font);
    font-size: 1.75rem;
    font-weight: 800;
    margin: .15rem 0;
    line-height: 1.2;
}
.ea-metric-card .ea-metric-change {
    font-size: .76rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}
.ea-metric-card .ea-metric-change.positive { color: var(--ea-green-dark); }
.ea-metric-card .ea-metric-change.neutral  { color: var(--ea-neutral-40); }
.ea-metric-card .ea-metric-change.negative { color: #dc2626; }


/* ═══════════════════════════════════════════════════════════════
   DATA TABLE
   ═══════════════════════════════════════════════════════════════ */
.ea-table-wrapper { z-index: 0; overflow-x: auto; }

.ea-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .88rem;
    font-family: var(--ea-font);
}
.ea-data-table th {
    text-align: left;
    font-size: .84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--stemwhite);
    padding: .65rem .85rem;
    background: var(--stemblue);
    height: 3rem;
    position: sticky;
    top: 0;
    z-index: 1;
}
.ea-data-table th:first-child { border-radius: var(--ea-radius-sm) 0 0 0; }
.ea-data-table th:last-child  { border-radius: 0 var(--ea-radius-sm) 0 0; }
.ea-data-table td {
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--ea-border-subtle);
    vertical-align: middle;
}
.ea-data-table tr:last-child td { border-bottom: none; }
.ea-data-table tbody tr { transition: background 80ms; }
.ea-data-table tbody tr:hover { background: var(--ea-blue-10); }

.ea-cell-actions {
    display: flex;
    gap: .25rem;
    align-items: center;
}

/* Tooltip override for action-cell buttons sitting inside .ea-table-wrapper
   (which uses overflow-x: auto and would otherwise clip a centred tooltip
   on the rightmost column). Anchor the tooltip to the button's right edge
   so it grows leftward and stays inside the wrapper. Reset typography so
   it doesn't inherit any table-cell letter-spacing/text-transform. */
.ea-cell-actions button[data-title]::after {
    left: auto;
    right: 0;
    transform: none;
    font-family: var(--ea-font);
    font-weight: 500;
    font-size: .75rem;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
}

/* ─── Column Sort Indicators (shared by ea-data-table, ea-drilldown-table, std-table) ─── */
.ea-sortable,
.std-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    position: relative;
    padding-right: 20px !important;  /* fixed space for stacked arrows - no layout shift */
}

/* Both chevrons positioned absolutely, stacked vertically, hidden by default */
.ea-sort-icon,
.std-sort-icon {
    position: absolute;
    right: 6px;
    width: 10px !important;
    height: 6px !important;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.ea-sort-icon.sort-up,
.std-sort-icon.sort-up {
    top: calc(50% - 7px);
}
.ea-sort-icon.sort-down,
.std-sort-icon.sort-down {
    top: calc(50% + 1px);
}

/* Colors */
.ea-data-table .ea-sort-icon,
.std-table .std-sort-icon,
.ad-table .ea-sort-icon,
.ad-table-header .ea-sort-icon {
    fill: var(--stemgreen);
}
.sp-table .ea-sort-icon {
    fill: var(--stemwhite);
}
.ea-drilldown-table .ea-sort-icon {
    fill: var(--stemblue);
}

/* Hover: show both stacked chevrons faintly (unsorted columns only) */
.ea-sortable:not(.sort-asc):not(.sort-desc):hover .ea-sort-icon,
.std-sortable:not(.sort-asc):not(.sort-desc):hover .std-sort-icon {
    opacity: 0.4;
}

/* Active sort: highlight the active direction at full opacity, centered vertically */
.ea-sortable.sort-asc .ea-sort-icon.sort-up,
.ea-sortable.sort-desc .ea-sort-icon.sort-down,
.std-sortable.sort-asc .std-sort-icon.sort-up,
.std-sortable.sort-desc .std-sort-icon.sort-down {
    opacity: 1;
    top: calc(50% - 3px);
}

/* Sorted columns: keep the inactive chevron hidden even on hover */
.ea-sortable.sort-asc:hover .ea-sort-icon.sort-down,
.ea-sortable.sort-desc:hover .ea-sort-icon.sort-up,
.std-sortable.sort-asc:hover .std-sort-icon.sort-down,
.std-sortable.sort-desc:hover .std-sort-icon.sort-up {
    opacity: 0;
}


/* ═══════════════════════════════════════════════════════════════
   STATUS BADGE
   ═══════════════════════════════════════════════════════════════ */
/* Status badge - pill with dot indicator matching HTML prototype */
.ea-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-family: var(--ea-font);
    font-size: .8225rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.5;
    border: 1px solid transparent;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ea-badge::before {
    /*content: "";*/
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ea-badge-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.ea-badge-success::before { background: #10b981; }
.ea-badge-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.ea-badge-warning::before { background: #f59e0b; }
.ea-badge-danger  { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
.ea-badge-danger::before { background: #ef4444; }
.ea-badge-info    { color: var(--ea-blue); background: var(--ea-blue-10); border-color: var(--ea-blue-30); }
.ea-badge-info::before { background: var(--ea-blue); }
.ea-badge-neutral { color: var(--ea-neutral-60); background: var(--ea-neutral-4); border-color: var(--ea-neutral-10); }
.ea-badge-neutral::before { background: var(--ea-neutral-40); }


/* ═══════════════════════════════════════════════════════════════
   QUICK ACTIONS
   ═══════════════════════════════════════════════════════════════ */
.ea-quick-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    padding: 1rem 1.25rem;
}
.ea-quick-action-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
    padding: .85rem;
    border: 1px solid var(--ea-border-subtle);
    border-radius: 12px;
    background: var(--ea-white);
    cursor: pointer;
    font-family: var(--ea-font);
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transition: all .12s;
}
.ea-quick-action-btn:hover { box-shadow: var(--ea-shadow-8); transform: translateY(-1px); }
.ea-quick-action-btn.disabled {
    opacity: .5;
    pointer-events: none;
}
.ea-qa-tri {
    position: absolute; top: -20px; right: -35px;
    width: 120px; height: 80px;
    opacity: .08; pointer-events: none;
}
.ea-quick-action-btn .ea-qa-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    position: relative;
    z-index: 1;
}
.ea-quick-action-btn .ea-qa-icon svg { width: 16px; height: 16px; }
.ea-quick-action-btn .ea-qa-label { font-size: 0.9rem; font-weight: 600; color: var(--ea-black); position: relative; z-index: 1; }
.ea-quick-action-btn .ea-qa-desc  { font-size: .8225rem; color: var(--ea-neutral-40); position: relative; z-index: 1; }


/* ═══════════════════════════════════════════════════════════════
   ACTIVITY FEED
   ═══════════════════════════════════════════════════════════════ */
.ea-activity-feed { display: flex; flex-direction: column; }

.ea-activity-item {
    display: flex;
    gap: .65rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--ea-border-subtle);
    align-items: flex-start;
}
.ea-activity-item:last-child { border-bottom: none; }

.ea-activity-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-top: .4rem;
    flex-shrink: 0;
}
.ea-activity-text { font-size: .84rem; color: var(--ea-neutral-80); }
.ea-activity-text strong { color: var(--ea-black); }
.ea-activity-time { font-size: .8225rem; color: var(--ea-neutral-40); margin-top: .1rem; }


/* ═══════════════════════════════════════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════════════════════════════════════ */
.ea-progress-bar {
    height: 6px;
    background: var(--ea-neutral-6);
    border-radius: 999px;
    overflow: hidden;
    width: 100%;
}
.ea-progress-bar .ea-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 500ms cubic-bezier(.4,0,.2,1);
}


/* ═══════════════════════════════════════════════════════════════
   CHIPS / TAGS
   ═══════════════════════════════════════════════════════════════ */
.ea-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-family: var(--ea-font);
    font-size: .74rem;
    font-weight: 600;
    border: 1px solid;
}
.ea-chip-brand  { background: var(--ea-blue-10); color: var(--ea-blue); border-color: var(--ea-blue-30); }
.ea-chip-green  { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.ea-chip-blue   { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.ea-chip-orange { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.ea-chip-default{ background: #f3f4f6; color: #374151; border-color: #d1d5db; }


/* ═══════════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════════ */
.ea-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    padding: .75rem 1rem .25rem;
}
.ea-page-info {
    font-size: .8225rem;
    color: var(--ea-neutral-40);
    margin-right: .5rem;
}
.ea-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-xl);
    background: var(--ea-white);
    font-family: var(--ea-font);
    font-size: .82rem;
    font-weight: 600;
    color: var(--ea-neutral-60);
    cursor: pointer;
    transition: all 120ms;
}
.ea-page-btn:hover { background: var(--ea-blue-10); color: var(--ea-blue); border-color: var(--ea-blue-30); }
.ea-page-btn.active { background: var(--ea-blue); color: #fff; border-color: var(--ea-blue); }
.ea-page-btn:disabled { opacity: .4; cursor: not-allowed; }


/* ═══════════════════════════════════════════════════════════════
   CONTENT GRID HELPERS
   ═══════════════════════════════════════════════════════════════ */
.ea-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
}
.ea-span-full { grid-column: 1 / -1; }
.ea-span-wide { grid-column: span 2; }


/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */
.ea-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ea-neutral-40);
}
.ea-empty-state > svg { width: 48px; height: 48px; margin-bottom: .75rem; color: var(--ea-neutral-20); }
.ea-empty-state .ea-btn svg { width: 16px; height: 16px; margin-bottom: 0; color: inherit; }
.ea-empty-state h3  { color: var(--ea-neutral-60); font-size: 1.05rem; margin-bottom: .25rem; }
.ea-empty-state h4  { color: var(--ea-neutral-60); font-size: 1rem; margin-bottom: .25rem; }
.ea-empty-state p   { font-size: .85rem; margin: 0; }
.ea-empty-icon      { display: flex; justify-content: center; margin-bottom: .5rem; }
.ea-empty-icon svg  { width: 48px; height: 48px; color: var(--ea-neutral-20); }

/* Spacing utilities */
.ea-mt-md { margin-top: 1.25rem; }


/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */
.ea-form-row {
    display: flex;
    gap: .65rem;
    align-items: flex-end;
}
.ea-form-group { flex: 1; }
.ea-form-group label {
    display: block;
    font-family: var(--ea-font);
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-neutral-60);
    margin-bottom: .3rem;
}
.ea-form-control {
    width: 100%;
    padding: .5rem .7rem;
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-xl);
    font-family: var(--ea-font);
    font-size: .88rem;
    color: var(--ea-black);
    background: #fff;
    transition: border-color 120ms, box-shadow 120ms;
}
.ea-form-control:focus {
    outline: none;
    border-color: var(--ea-blue);
    box-shadow: 0 0 0 3px var(--ea-blue-10);
}
select.ea-form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236e6e6e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    padding-right: 2rem;
}


/* ═══════════════════════════════════════════════════════════════
   PANEL / VIEW TRANSITIONS
   ═══════════════════════════════════════════════════════════════ */
.ea-panel { display: none; animation: eaPanelIn 200ms ease-out; }
.ea-panel.active { display: block; }
@keyframes eaPanelIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
 

/* ═══════════════════════════════════════════════════════════════
   FOCUS MANAGEMENT 
   ═══════════════════════════════════════════════════════════════ */
.ea-shell button:focus-visible,
.ea-shell a:focus-visible,
.ea-shell input:focus-visible, 
.ea-shell select:focus-visible {
    /*outline: 2px solid var(--ea-blue);*/ 
    /*outline-offset: 2px;*/
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1400px) {
    .ea-metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .ea-content-grid { grid-template-columns: 1fr; }
    .ea-content-grid .ea-span-wide { grid-column: span 1; }
    .ea-search-bar { width: 200px; }
    .ea-search-wrapper { width: 200px; }
}

/* ── Compact laptops / small MacBooks - reduce content padding ── */
/* (now handled inside the 769–1400px sidebar-collapse block below) */

/* ── Tablet + small laptops - auto-collapse sidebar to icons ── */
@media (min-width: 769px) and (max-width: 1400px) {
    .ea-content { padding: .75rem; }
    .ea-shell:not(.sidebar-open) {
        grid-template-columns: var(--ea-sidebar-collapsed-w) 1fr;
    }
    .ea-shell:not(.sidebar-open) .ea-brand-full { display: none; }
    .ea-shell:not(.sidebar-open) .ea-brand-mini { display: block; }
    .ea-shell:not(.sidebar-open) .ea-sidebar-brand { justify-content: center; padding: .85rem .5rem; }
    .ea-shell:not(.sidebar-open) .ea-brand-text,
    .ea-shell:not(.sidebar-open) .ea-nav-label,
    .ea-shell:not(.sidebar-open) .ea-section-label,
    .ea-shell:not(.sidebar-open) .ea-sidebar-footer-text,
    .ea-shell:not(.sidebar-open) .ea-nav-badge { display: none; }
    .ea-shell:not(.sidebar-open) .ea-sidebar-footer { justify-content: center; flex-direction: column; gap: .4rem; padding: .75rem .5rem; }
    .ea-shell:not(.sidebar-open) .ea-sidebar-footer .ea-avatar-sm { display: none; }
    .ea-shell:not(.sidebar-open) .ea-signout-btn { margin-left: 0; }
    .ea-shell:not(.sidebar-open) .ea-nav-item { justify-content: center; padding: .65rem; }
    .ea-shell:not(.sidebar-open) .ea-nav-item svg { margin: 0; }
    .ea-topbar { padding: 0 .25rem; }
}

/* ── Mobile - sidebar becomes a slide-out drawer ── */
@media (max-width: 768px) {
    .ea-shell,
    .ea-shell.collapsed {
        grid-template-columns: 1fr;
        grid-template-areas: "topbar" "content";
    }

    /* Sidebar: off-canvas drawer */
    .ea-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--ea-sidebar-w);
        max-width: 85vw;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 250ms cubic-bezier(.4, 0, .2, 1);
        box-shadow: none;
    }

    /* Show drawer when sidebar-open is active */
    .ea-shell.sidebar-open .ea-sidebar {
        transform: translateX(0);
        box-shadow: var(--ea-shadow-64);
    }

    /* Restore full sidebar labels inside the drawer */
    .ea-shell.sidebar-open .ea-brand-full { display: block; }
    .ea-shell.sidebar-open .ea-brand-mini { display: none; }
    .ea-shell.sidebar-open .ea-brand-text,
    .ea-shell.sidebar-open .ea-nav-label,
    .ea-shell.sidebar-open .ea-section-label,
    .ea-shell.sidebar-open .ea-sidebar-footer-text,
    .ea-shell.sidebar-open .ea-nav-badge { display: revert; }
    .ea-shell.sidebar-open .ea-sidebar-brand { justify-content: flex-start; padding: .85rem 1rem; }
    .ea-shell.sidebar-open .ea-nav-item { justify-content: flex-start; padding: .55rem .75rem; }
    .ea-shell.sidebar-open .ea-sidebar-footer { flex-direction: row; padding: .75rem 1rem; }
    .ea-shell.sidebar-open .ea-sidebar-footer .ea-avatar-sm { display: flex; }

    /* Scrim / backdrop overlay */
    .ea-mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 99;
        background: rgba(0, 0, 0, .4);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }
    .ea-shell.sidebar-open .ea-mobile-overlay {
        display: block;
    }

    /* Content adjustments */
    .ea-metrics-grid { grid-template-columns: 1fr 1fr; }
    .ea-form-row { flex-direction: column; }
    .ea-search-bar { display: none; }
    .ea-search-wrapper { display: none; }
    .ea-content { padding: 1rem; }
}

/* ── Small phones ── */
@media (max-width: 480px) {
    .ea-metrics-grid { grid-template-columns: 1fr; }
    .ea-page-header { flex-direction: column; align-items: flex-start; }
    .ea-content { padding: .75rem; }
}


/* ═══════════════════════════════════════════════════════════════
   DELETE CONFIRMATION MODAL (as-dc-* prefix)
   Reusable across DeleteConfirmation component.
   ═══════════════════════════════════════════════════════════════ */

/* Confirm body */
.as-dc {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 2rem 1.5rem;
    gap: .5rem;
}

/* Danger icon circle */
.as-dc-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fef2f2;
    color: #dc2626;
    margin-bottom: .25rem;
}

.as-dc-icon svg {
    width: 28px;
    height: 28px;
}
.as-dc-icon.as-dc-icon-primary {
    background: #eef2ff;
    color: var(--ea-blue, #4D2EFD);
}

.as-dc h3 {
    font-family: var(--ea-font);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ea-black);
    margin: 0;
}

.as-dc p {
    font-family: var(--ea-font);
    font-size: .88rem;
    color: var(--ea-neutral-50);
    line-height: 1.55;
    margin: 0;
    max-width: 320px;
}

.as-dc-warning {
    font-size: .8225rem !important;
    color: #dc2626 !important;
    font-weight: 600;
    margin-top: .25rem !important;
}

/* Footer with actions */
.as-dc-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1.5rem;
    border-top: 1px solid var(--ea-border-subtle);
    background: var(--ea-neutral-2);
    border-radius: 0 0 var(--ea-radius-xl) var(--ea-radius-xl);
}

/* Busy state */
@keyframes as-dc-spin { to { transform: rotate(360deg); } }
.as-dc-busy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    gap: 1rem;
}
.as-dc-spinner {
    width: 36px;
    height: 36px;
    border: 4px solid #fef2f2;
    border-top: 4px solid #dc2626;
    border-radius: 50%;
    animation: as-dc-spin .7s linear infinite;
}
.as-dc-busy p {
    font-family: var(--ea-font);
    font-size: .88rem;
    color: var(--ea-neutral-60);
    font-weight: 500;
    margin: 0;
}

/* Success / error outcome */
.as-dc-outcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    gap: .75rem;
}
.as-dc-outcome-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}
.as-dc-outcome-icon svg { width: 28px; height: 28px; }
.as-dc-outcome-icon.success { background: #ecfdf5; color: #059669; }
.as-dc-outcome-icon.error { background: #fef2f2; color: #dc2626; }
.as-dc-outcome h3 {
    font-family: var(--ea-font);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ea-black);
    margin: 0;
}
.as-dc-outcome p {
    font-family: var(--ea-font);
    font-size: .88rem;
    color: var(--ea-neutral-60);
    line-height: 1.5;
    margin: 0;
    max-width: 320px;
}

/* Danger button variant for delete dialogs */
.as-btn-danger {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}
.as-btn-danger:hover {
    background: #b91c1c;
    box-shadow: 0 4px 12px rgba(220,38,38,.2);
}
.as-btn-danger:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(220,38,38,.15);
}
.as-btn-danger-outline {
    background: transparent;
    color: #dc2626;
    border-color: #dc2626;
}
.as-btn-danger-outline:hover {
    background: rgba(220,38,38,.08);
    box-shadow: 0 4px 12px rgba(220,38,38,.12);
}
.as-btn-danger-outline:active {
    transform: translateY(1px);
    background: rgba(220,38,38,.12);
}


/* ═══════════════════════════════════════════════════════════════
   LEGACY CONFIRM / DELETE MODAL (deprecated - use as-dc-* above)
   ═══════════════════════════════════════════════════════════════ */
.ea-confirm-modal {
    padding: 2rem 2.5rem;
    text-align: center;
    max-width: 420px;
    margin: 0 auto;
}
.ea-confirm-modal h3 {
    font-family: var(--ea-font);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ea-black);
    margin: 1rem 0 .5rem;
}
.ea-confirm-modal p {
    font-family: var(--ea-font);
    font-size: .95rem;
    color: var(--ea-neutral-50);
    line-height: 1.5;
}
.ea-confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: .25rem;
}
.ea-confirm-icon.danger {
    background: #fef2f2;
    color: #ef4444;
}
.ea-confirm-warning {
    color: #ef4444 !important;
    font-weight: 500;
    font-size: .85rem !important;
    margin-top: .75rem !important;
}
.ea-confirm-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.75rem;
}


/* ═══════════════════════════════════════════════════════════════
   OVERRIDES - additional button variants
   ═══════════════════════════════════════════════════════════════ */
.ea-btn-secondary {
    background: var(--ea-neutral-6);
    color: var(--ea-neutral-60);
}
.ea-btn-secondary:hover {
    background: var(--ea-neutral-10);
}
/* ═══════════════════════════════════════════════════════════════
   OVERRIDES - button variants matching HTML prototype
   ═══════════════════════════════════════════════════════════════ */
.ea-btn-accent {
    background: var(--ea-green);
    color: #0d3f23;
    border-color: #a5fdd0;
}
.ea-btn-accent:hover {
    background: #68f5a5;
}
.ea-btn-danger {
    background: #fff;
    border-color: #fca5a5;
    color: #dc2626;
}
.ea-btn-danger:hover {
    background: #fef2f2;
}
.ea-btn-icon {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ea-radius-xl);
    padding: .4rem;
    cursor: pointer;
    color: var(--ea-neutral-60);
    font-size: .95rem;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ea-btn-icon:hover {
    background: var(--ea-blue-10);
    color: var(--ea-blue);
    border-color: var(--ea-blue-10);
}
.ea-btn-icon.danger:hover {
    background: #fef2f2;
    color: #ef4444;
    border-color: #fef2f2;
}


/* (chip overrides removed - using primary CHIPS / TAGS section above) */


/* (duplicate empty state removed - using primary EMPTY STATE section above) */


/* ═══════════════════════════════════════════════════════════════
   CHART - Performance by Game (Reports view)
   ═══════════════════════════════════════════════════════════════ */

/* Date filter */
.ea-date-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--ea-border);
}

.ea-date-filter-presets {
    display: flex;
    gap: .3rem;
    background: var(--ea-neutral-05);
    border-radius: var(--ea-radius-sm);
    padding: .2rem;
}

.ea-date-btn {
    padding: .35rem .7rem;
    border: none;
    border-radius: var(--ea-radius-xl);
    background: transparent;
    font-family: var(--ea-font);
    font-size: .8225rem;
    font-weight: 500;
    color: var(--ea-neutral-50);
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}

.ea-date-btn:hover {
    color: var(--ea-neutral-70);
    background: var(--ea-neutral-10);
}

.ea-date-btn-active {
    background: #fff;
    color: var(--stemblue);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    font-weight: 600;
}

.ea-date-btn-active:hover {
    background: #fff;
    color: var(--stemblue);
}

.ea-date-custom {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ea-date-field {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.ea-date-field label {
    font-family: var(--ea-font);
    font-size: .8225rem;
    font-weight: 500;
    color: var(--ea-neutral-40);
}

.ea-date-field input[type="date"] {
    font-family: var(--ea-font);
    font-size: .8225rem;
    padding: .3rem .45rem;
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-xl);
    background: #fff;
    color: var(--ea-neutral-70);
    outline: none;
    transition: border-color .15s ease;
}

.ea-date-field input[type="date"]:focus {
    border-color: var(--stemblue);
    box-shadow: 0 0 0 2px rgba(77, 46, 253, 0.1);
}

.ea-date-range-label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--ea-font);
    font-size: .8225rem;
    font-weight: 500;
    color: var(--ea-neutral-40);
    margin-left: auto;
}

.ea-date-range-label svg {
    color: var(--ea-neutral-30);
}

@media (max-width: 600px) {
    .ea-date-filter {
        flex-direction: column;
        align-items: flex-start;
    }
    .ea-date-range-label {
        margin-left: 0;
    }
}

/* Summary stats row */
.ea-chart-summary {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ea-border-subtle);
}
.ea-chart-summary-item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.ea-chart-summary-value {
    font-family: var(--ea-font);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ea-black);
    line-height: 1.2;
}
.ea-chart-summary-label {
    font-family: var(--ea-font);
    font-size: .8225rem;
    color: var(--ea-neutral-40);
    font-weight: 500;
}

/* Chart container with Y-axis */
.ea-chart-container {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
}

/* Y-axis labels */
.ea-chart-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 2rem;
    min-width: 28px;
}
.ea-chart-y-axis span {
    font-family: var(--ea-font);
    font-size: .8225rem;
    color: var(--ea-neutral-30);
    font-weight: 600;
    line-height: 1;
}

/* Bar area */
.ea-chart-bars {
    flex: 1;
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    height: 200px;
    padding: 0 .25rem;
    border-left: 1px solid var(--ea-border-subtle);
    border-bottom: 1px solid var(--ea-border-subtle);
    position: relative;
    background-image:
        linear-gradient(to bottom, var(--ea-border-subtle) 1px, transparent 1px),
        linear-gradient(to bottom, var(--ea-border-subtle) 1px, transparent 1px);
    background-size: 100% 50%, 100% 100%;
    background-position: top, top;
    background-repeat: no-repeat, no-repeat;
}

/* Each column */
.ea-chart-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    height: 100%;
    justify-content: flex-end;
    min-width: 0;
}

/* Value label above bar */
.ea-chart-bar-value {
    font-family: var(--ea-font);
    font-size: .8225rem;
    font-weight: 700;
    color: var(--ea-black);
    line-height: 1;
}

/* Bar itself */
.ea-chart-bar {
    width: 100%;
    max-width: 56px;
    min-height: 8px;
    border-radius: 6px 6px 0 0;
    transition: height .4s ease, opacity .2s;
    opacity: .85;
}
.ea-chart-bar:hover {
    opacity: 1;
}

/* Game name under bar */
.ea-chart-label {
    font-family: var(--ea-font);
    font-size: .8225rem;
    color: var(--ea-neutral-50);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-weight: 500;
    padding-top: .35rem;
}

/* Legend */
.ea-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--ea-border-subtle);
}
.ea-chart-legend-item {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.ea-chart-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.ea-chart-legend-text {
    font-family: var(--ea-font);
    font-size: .8225rem;
    color: var(--ea-neutral-50);
    font-weight: 500;
}

.ea-chart-hint {
    text-align: center;
    font-size: .82rem;
    color: var(--ea-neutral-40);
    margin-top: .5rem;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   GAME SELECTOR PILLS
   ═══════════════════════════════════════════════════════════════ */
.ea-game-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--ea-border);
}

.ea-game-pills-label {
    font-family: var(--ea-font);
    font-size: .8225rem;
    font-weight: 500;
    color: var(--ea-neutral-40);
    margin-right: .25rem;
}

.ea-game-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    border: 1.5px solid var(--ea-border);
    background: #fff;
    font-family: var(--ea-font);
    font-size: .82rem;
    font-weight: 500;
    color: var(--ea-neutral-60);
    cursor: pointer;
    transition: all .15s ease;
}

.ea-game-pill:hover {
    border-color: var(--pill-color, var(--stemblue));
    color: var(--pill-color, var(--stemblue));
    background: color-mix(in srgb, var(--pill-color, var(--stemblue)) 8%, #fff);
}

.ea-game-pill-active {
    border-color: var(--pill-color, var(--stemblue));
    background: var(--pill-color, var(--stemblue));
    color: #fff;
}

.ea-game-pill-active:hover {
    background: color-mix(in srgb, var(--pill-color, var(--stemblue)) 85%, #000);
    color: #fff;
}

.ea-game-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: .05rem .35rem;
    border-radius: 999px;
    font-size: .8225rem;
    font-weight: 700;
    background: var(--ea-neutral-10);
    color: var(--ea-neutral-60);
}

.ea-game-pill-active .ea-game-pill-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   DRILL-DOWN PANEL
   ═══════════════════════════════════════════════════════════════ */
.ea-drilldown {
    margin-top: 1.5rem;
    border-top: 2px solid var(--ea-border);
    padding-top: 1.25rem;
    animation: eaDrillSlide .3s ease;
}

@keyframes eaDrillSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ea-drilldown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.ea-drilldown-title {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ea-drilldown-title h4 {
    margin: 0;
    font-family: var(--ea-font);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ea-neutral-90);
}

.ea-drilldown-title svg {
    color: var(--stemblue);
}

.ea-drilldown-close {
    background: var(--ea-neutral-05);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-sm);
    padding: .35rem;
    cursor: pointer;
    color: var(--ea-neutral-50);
    display: flex;
    align-items: center;
    transition: all .15s ease;
}

.ea-drilldown-close:hover {
    background: var(--ea-neutral-10);
    color: var(--ea-neutral-70);
}

.ea-drilldown-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.ea-drilldown-stat {
    background: var(--ea-neutral-05);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-sm);
    padding: .75rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.ea-drilldown-stat-value {
    font-family: var(--ea-font);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ea-neutral-90);
}

.ea-drilldown-stat-label {
    font-family: var(--ea-font);
    font-size: .8225rem;
    color: var(--ea-neutral-40);
    font-weight: 500;
}

.ea-text-green { color: #22C55E !important; }

.ea-drilldown-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.ea-drilldown-chart h5,
.ea-drilldown-table-wrap h5 {
    margin: 0 0 .6rem;
    font-family: var(--ea-font);
    font-size: .88rem;
    font-weight: 600;
    color: var(--ea-neutral-60);
}

.ea-drilldown-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ea-font);
    font-size: .85rem;
}

.ea-drilldown-table thead th {
    text-align: left;
    padding: .55rem .65rem;
    font-weight: 600;
    font-size: .8225rem;
    color: var(--ea-neutral-50);
    border-bottom: 2px solid var(--ea-border);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ea-drilldown-table tbody td {
    padding: .55rem .65rem;
    color: var(--ea-neutral-70);
    border-bottom: 1px solid var(--ea-border);
}

.ea-drilldown-table tbody tr:hover {
    background: var(--ea-neutral-05); 
}

/* Drilldown-specific badge overrides (base .ea-badge defined above) */
.ea-drilldown-table .ea-badge {
    justify-content: center;
    min-width: 2.5rem;
    padding: .15rem .45rem;
    font-weight: 600;
}

.ea-badge-green {
    background: #DCFCE7;
    color: #166534;
}

.ea-badge-blue {
    background: #DBEAFE;
    color: #1E40AF;
}

@media (max-width: 700px) {
    .ea-drilldown-body {
        grid-template-columns: 1fr;
    }
    .ea-drilldown-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ═══════════════════════════════════════════════════════════════
   CELL ACTIONS (inline action buttons in table rows)
   ═══════════════════════════════════════════════════════════════ */
.ea-cell-actions {
    display: flex;
    gap: .35rem;
    align-items: center;
}


/* ═══════════════════════════════════════════════════════════════
   HEADER CONTROLS (e.g. dropdown in page header)
   ═══════════════════════════════════════════════════════════════ */
.ea-header-controls {
    width: 260px;
    flex-shrink: 0;
    margin-left: auto;
}
.ea-header-controls .ea-dropdown--filter {
    width: 100%;
    display: block;
}
.ea-header-controls .ea-dropdown--filter .ea-dropdown-trigger {
    width: 100%;
}
.ea-header-controls .dropdown-wrapper,
.ea-header-controls .selected-item,
.ea-header-controls .dropdown-list,
.ea-header-controls .dropdown-item {
    border-radius: var(--ea-radius-xl);
    font-family: var(--ea-font);
}
.ea-header-controls .selected-item {
    border: 1px solid var(--ea-neutral-10);
    min-height: 2.5rem;
    font-size: .875rem;
}
.ea-header-controls .dropdown-list {
    border-color: var(--ea-neutral-10);
}
.ea-header-controls .dropdown-item:hover {
    background: var(--ea-blue-10);
}


/* ═══════════════════════════════════════════════════════════════
   SPAN HELPERS
   ═══════════════════════════════════════════════════════════════ */
.ea-span-1  { grid-column: span 1; }
.ea-span-full { grid-column: 1 / -1; }


/* ═══════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════ */
.ea-label {
    font-family: var(--ea-font);
    font-size: .8225rem;
    font-weight: 500;
    color: var(--ea-neutral-50);
    margin-bottom: .35rem;
    display: block;
}
.ea-input {
    font-family: var(--ea-font);
    font-size: .9rem;
    padding: .55rem .75rem;
    border: 1px solid var(--ea-neutral-10);
    border-radius: var(--ea-radius-xl);
    width: 100%;
    background: var(--ea-white);
    color: var(--ea-black);
    transition: border-color .15s ease;
}
.ea-input:focus {
    border-color: var(--ea-blue);
    outline: none;
    box-shadow: 0 0 0 3px var(--ea-blue-10);
}


/* ═══════════════════════════════════════════════════════════════
   MODAL DIALOG - Fluent override for Add/Edit forms
   Applied via Modal CssClass parameter.
   ═══════════════════════════════════════════════════════════════ */
.modal-dialog.as-modal-dialog {
    background: var(--ea-white);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-xl);
    box-shadow: var(--ea-shadow-64);
    padding: 0;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
}

@media (max-width: 560px) {
    .modal-dialog.as-modal-dialog {
        max-width: 100%;
        margin: .75rem;
        border-radius: var(--ea-radius-lg);
    }
}

@media (min-width: 561px) and (max-width: 1400px) {
    .modal-dialog.as-modal-dialog {
        max-width: 80vw;
    }
}

/* Wide variant for two-column modals (e.g. AddAssignment) */
.modal-dialog.as-modal-dialog-wide {
    max-width: 780px;
}

/* Medium variant for wizard modals (e.g. Support Request) */
.modal-dialog.as-modal-dialog-md {
    max-width: 600px;
}

/* Small variant for compact confirmation modals (e.g. Sign Out) */
.modal-dialog.as-modal-dialog-sm {
    max-width: 350px;
}

@media (max-width: 640px) {
    .modal-dialog.as-modal-dialog-wide,
    .modal-dialog.as-modal-dialog-md {
        max-width: 100%;
    }
}


/* ═══════════════════════════════════════════════════════════════
   SHARED MODAL-FORM STYLES (as-* prefix)
   Reusable across AddStudent, AddStudentGroup, AddAssignment, etc.
   ═══════════════════════════════════════════════════════════════ */

/* ─── HEADER ─────────────────────────────────────────────────── */
.as-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--ea-border-subtle);
    flex-shrink: 0;
}

.as-header-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--ea-radius-md);
    background: var(--ea-blue-10);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.as-header-icon svg {
    width: 22px;
    height: 22px;
    color: var(--ea-blue);
}

.as-header-text h2 {
    font-family: var(--ea-font);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--stemblue);
    line-height: 1.3;
    margin: 0;
}

.as-header-text p {
    font-family: var(--ea-font);
    font-size: .8225rem;
    color: var(--ea-neutral-60);
    margin-top: .1rem;
}


/* ─── FORM BODY ──────────────────────────────────────────────── */
.as-body {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.as-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.as-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.as-field.full-width {
    grid-column: 1 / -1;
}

.as-label {
    font-family: var(--ea-font);
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-neutral-60);
    display: flex;
    align-items: center;
    gap: .3rem;
}

.as-label .optional {
    font-weight: 400;
    color: var(--ea-neutral-40);
    font-size: .8225rem;
}

.as-label-hint {
    font-weight: 400;
    color: var(--ea-neutral-40);
    font-size: .75rem;
}


/* ─── INPUT / SELECT / TEXTAREA ──────────────────────────────── */
.as-input,
.as-textarea {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-xl);
    font-family: var(--ea-font);
    font-size: .88rem;
    color: var(--ea-black);
    background: var(--ea-white);
    transition: border-color 150ms, box-shadow 150ms;
    box-sizing: border-box;
}

.as-input::placeholder,
.as-textarea::placeholder {
    color: var(--ea-neutral-40);
}

.as-input:focus,
.as-textarea:focus {
    outline: none;
    border-color: var(--ea-blue);
    box-shadow: 0 0 0 3px var(--ea-blue-10);
}

.as-input:disabled,
.as-input[readonly] {
    background: var(--ea-neutral-4);
    color: var(--ea-neutral-40);
    cursor: not-allowed;
}

.as-textarea {
    resize: vertical;
    min-height: 72px;
    line-height: 1.5;
}

/* ═══ Shared Select ═══════════════════════════════════════════ */

.ea-select {
    width: 100%;
    padding: .6rem .75rem;
    padding-right: 2rem;
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-xl);
    font-family: var(--ea-font);
    font-size: .88rem;
    color: var(--ea-black);
    background: var(--ea-white);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236e6e6e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    cursor: pointer;
    transition: border-color 150ms, box-shadow 150ms;
    box-sizing: border-box;
}
.ea-select:focus {
    outline: none;
    border-color: var(--ea-blue);
    box-shadow: 0 0 0 3px var(--ea-blue-10);
}
.ea-select:disabled,
.ea-select[readonly] {
    background: var(--ea-neutral-4);
    color: var(--ea-neutral-40);
    cursor: not-allowed;
}

/* ── filter variant (compact, inline, not full-width) ── */
.ea-select--filter {
    width: auto;
    padding: .55rem .75rem;
    padding-right: 2rem;
    font-size: .82rem;
    background-color: var(--ea-surface-card);
}

/* ── inline-edit variant (task detail sidebar) ── */
.ea-select--inline {
    width: auto;
    padding: .35rem .5rem;
    padding-right: 1.8rem;
    border-width: 1.5px;
    border-color: var(--ea-blue);
    border-radius: var(--ea-radius-sm);
    font-size: .84rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234D2EFD' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-position: right .5rem center;
    box-shadow: 0 0 0 3px rgba(77, 46, 253, .08);
}

/* ── keyword variant (acceptance criteria And/But) ── */
.ea-select--keyword {
    width: 60px;
    padding: .4rem .35rem;
    padding-right: .35rem;
    font-size: .8225rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ea-neutral-50, #94a3b8);
    border-color: var(--ea-border-subtle, #e2e8f0);
    border-radius: 6px;
    appearance: auto;
    -webkit-appearance: auto;
    background-image: none;
}
.ea-select--keyword:focus { border-color: var(--ad-accent, #6366f1); }

/* ── pill variant (session switcher) ── */
.ea-select--pill {
    width: auto;
    display: inline-flex;
    align-items: center;
    padding: .35rem .75rem;
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-blue);
    background: var(--ea-blue-10);
    border-color: var(--ea-blue-30);
    appearance: auto;
    -webkit-appearance: auto;
    background-image: none;
}
.ea-select--pill:hover { background: var(--ea-blue-30); color: var(--ea-white); }
.ea-select--pill:focus { border-color: var(--ea-blue); box-shadow: 0 0 0 3px var(--ea-blue-10); }

/* Responsive: filter selects go full-width on small screens */
@media (max-width: 768px) {
    .ea-select--filter { width: 100%; }
}

/* ═══ End Shared Select ══════════════════════════════════════ */


/* ═══ Shared Dropdown (EaSelect) ═════════════════════════════ */

/* Wrapper / positioning context */
.ea-dropdown { position: relative; width: 100%; box-sizing: border-box; }

/* ── Trigger button ── */
.ea-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: .55rem .75rem;
    font-family: var(--ea-font);
    font-size: .88rem;
    font-weight: 400;
    color: var(--ea-text);
    background: var(--ea-white);
    border: 1px solid var(--ea-neutral-20);
    border-radius: var(--ea-radius-sm);
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.ea-dropdown-trigger:hover {
    border-color: var(--ea-blue);
}

.ea-dropdown-trigger:focus,
.ea-dropdown.open .ea-dropdown-trigger {
    outline: none;
    border-color: var(--ea-blue);
    box-shadow: 0 0 0 3px var(--ea-blue-10);
}

.ea-dropdown-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chevron */
.ea-dropdown-chevron {
    flex-shrink: 0;
    color: var(--ea-neutral-40);
    transition: transform .25s ease;
}

.ea-dropdown.open .ea-dropdown-chevron { transform: rotate(180deg); }

/* ── Menu panel ── */
.ea-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    right: 0;
    background: var(--ea-white);
    border: 1px solid var(--ea-blue-10);
    border-radius: var(--ea-radius-sm);
    box-shadow: 0 4px 12px rgba(77, 46, 253, 0.10);
    z-index: 10000;
    max-height: 16rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-width: 160px;
    box-sizing: border-box;
    max-width: 300px;
}

/* ── Individual option ── */
.ea-dropdown-option {
    padding: .55rem .75rem;
    font-family: var(--ea-font);
    font-size: .88rem;
    font-weight: 400;
    color: var(--ea-text);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .2s ease;
}

.ea-dropdown-option:hover { background: var(--ea-blue-10); }

.ea-dropdown-option.active {
    background: var(--ea-blue);
    color: var(--ea-white);
    font-weight: 600;
}

.ea-dropdown-option:first-child { border-radius: var(--ea-radius-sm) var(--ea-radius-sm) 0 0; }
.ea-dropdown-option:last-child  { border-radius: 0 0 var(--ea-radius-sm) var(--ea-radius-sm); }

/* ── Filter variant (compact, auto-width) ── */
.ea-dropdown--filter { width: auto; display: inline-block; }

.ea-dropdown--filter .ea-dropdown-trigger {
    padding: 0.5rem 0.875rem;
    font-size: 0.8225rem;
    background: var(--ea-surface-card);
    border-radius: var(--ea-radius-md);
}

.ea-dropdown--filter .ea-dropdown-menu {
    min-width: 140px;
    left: auto;
    right: 0;
}

.ea-dropdown--filter .ea-dropdown-option {
    padding: 0.625rem 0.875rem;
    font-size: 0.8225rem;
}

/* ── Inline variant (task detail) ── */
.ea-dropdown--inline { width: auto; display: inline-block; }

.ea-dropdown--inline .ea-dropdown-trigger {
    padding: 0.375rem 0.75rem;
    font-size: 0.8225rem;
    border-color: var(--ea-blue);
    border-radius: var(--ea-radius-sm);
    box-shadow: 0 1px 3px rgba(77, 46, 253, 0.08);
}

.ea-dropdown--inline .ea-dropdown-chevron { color: var(--ea-blue); }

.ea-dropdown--inline .ea-dropdown-option {
    padding: 0.5rem 0.75rem;
    font-size: 0.8225rem;
}

/* Disabled */
.ea-dropdown--disabled { opacity: 0.55; pointer-events: none; }

/* Responsive */
@media (max-width: 768px) {
    .ea-dropdown--filter { width: 50%; display: block; }
}

/* ═══ End Shared Dropdown ════════════════════════════════════ */
.as-hint {
    font-family: var(--ea-font);
    font-size: .8225rem;
    color: var(--ea-neutral-40);
    margin-top: .1rem;
    display: flex;
    align-items: center;
    gap: .25rem;
}

.as-hint.warning {
    color: var(--ea-orange);
}

.as-hint.error {
    color: #dc2626;
}


/* ─── DIVIDER ────────────────────────────────────────────────── */
.as-divider {
    border: none;
    border-top: 1px solid var(--ea-border-subtle);
    margin: .25rem 0;
}


/* ─── SECTION TITLE & READ-ONLY VALUES  (Fluent detail modals) ─ */
.as-section-title {
    font-family: var(--ea-font);
    font-size: .8225rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ea-neutral-40);
    margin: 0;
}

/* Fluent pattern: read-only values are plain text, NOT bordered inputs.
   The label–value pairing provides structure; containers are unnecessary. */
.as-value {
    font-family: var(--ea-font);
    font-size: .875rem;
    color: var(--ea-black);
    line-height: 1.45;
    word-break: break-word;
    padding: .15rem 0 0;
}

.as-value.as-mono {
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: .8225rem;
    color: var(--ea-neutral-60);
}

.as-value a {
    color: var(--ea-blue);
    text-decoration: none;
    font-weight: 500;
}

.as-value a:hover {
    text-decoration: underline;
}

/* ─── FLUENT BADGE TAGS (detail modals) ──────────────────────── */
.as-tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.as-tag {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-family: var(--ea-font);
    font-size: .8225rem;
    font-weight: 500;
    background: var(--ea-neutral-4);
    color: var(--ea-neutral-60);
    line-height: 1.4;
}

.as-tag-accent {
    background: rgba(99, 102, 241, .08);
    color: #5b5fc7;
}

/* ─── HEADER ICON COLOR VARIANTS ─────────────────────────────── */
.as-header-icon.ad-icon-purple { background: rgba(124, 77, 255, .1); }
.as-header-icon.ad-icon-purple svg { color: #7c4dff; }
.as-header-icon.ad-icon-danger { background: rgba(220, 38, 38, .1); }
.as-header-icon.ad-icon-danger svg { color: #dc2626; }
.as-header-icon.ad-icon-orange { background: rgba(254, 146, 13, .12); }
.as-header-icon.ad-icon-orange svg { color: var(--stemorange); }
.as-header-icon.ad-icon-green { background: rgba(16, 185, 129, .1); }
.as-header-icon.ad-icon-green svg { color: #10b981; }

/* SCG-XXXX: centered header modifier for the sign-out confirmation modal
   (signout-confirmation-fluent.html prototype, Variant B). Stacks icon
   above the title + body copy instead of the default horizontal layout. */
.as-header.as-header-centered {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    padding-bottom: 1.25rem;
}
.as-header.as-header-centered .as-header-text { align-items: center; }
.as-header.as-header-centered .as-header-text h2 { margin-bottom: .15rem; }


/* ─── CHECKBOX (Fluent selection card) ───────────────────────── */
.as-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .65rem .75rem;
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-sm);
    background: var(--ea-neutral-2);
    cursor: pointer;
    transition: all 150ms;
}

.as-checkbox-group:hover,
.as-checkbox-group.checked {
    border-color: var(--ea-blue-30);
    background: var(--ea-blue-10);
}

.as-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--ea-neutral-20);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    margin-top: 1px;
    transition: all 150ms;
    background: var(--ea-white);
}

.as-checkbox:checked {
    background: var(--ea-blue);
    border-color: var(--ea-blue);
}

.as-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.as-checkbox:focus-visible {
    outline: 2px solid var(--ea-blue);
    outline-offset: 2px;
}

.as-checkbox-content {
    flex: 1;
}

.as-checkbox-label {
    font-family: var(--ea-font);
    font-size: .85rem;
    font-weight: 600;
    color: var(--ea-black);
    cursor: pointer;
}

.as-checkbox-desc {
    font-family: var(--ea-font);
    font-size: .8225rem;
    color: var(--ea-neutral-40);
    margin-top: .15rem;
}


/* ─── FOOTER / ACTION BUTTONS ────────────────────────────────── */
.as-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .65rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--ea-border-subtle);
    background: var(--ea-neutral-2);
    border-radius: 0 0 var(--ea-radius-xl) var(--ea-radius-xl);
    flex-shrink: 0;
}

.as-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    border: 1px solid var(--ea-border);
    background: var(--ea-white);
    color: var(--ea-black);
    font-family: var(--ea-font);
    font-size: .85rem;
    font-weight: 600;
    border-radius: var(--ea-radius-xl);
    cursor: pointer;
    transition: all 140ms;
    white-space: nowrap;
}

.as-btn:hover {
    background: var(--ea-neutral-4);
}

.as-btn svg {
    width: 16px;
    height: 16px;
}

.as-btn-primary {
    background: var(--ea-green);
    color: var(--ea-blue);
    border-color: var(--ea-green);
}

.as-btn-primary:hover {
    background: #5dfca0;
    box-shadow: 0 4px 12px rgba(122, 253, 181, .35);
}

.as-btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(122, 253, 181, .3);
}

.as-btn-primary:disabled,
.as-btn-primary.disabled {
    background: #c7fedf;
    border-color: #c7fedf;
    color: var(--ea-blue-50);
    cursor: not-allowed;
    box-shadow: none;
}

.as-btn-primary:disabled:hover,
.as-btn-primary.disabled:hover {
    background: #c7fedf;
    box-shadow: none;
}

.as-btn-secondary {
    /*background: var(--ea-neutral-6);*/
    /*color: var(--ea-neutral-60);*/
    /*border-color: var(--ea-neutral-10);*/
    background: var(--stemgreen);
    color: var(--stemblack);
}

.as-btn-secondary:hover {
    background: var(--ea-neutral-10);
}

/* SCG-XXXX: pill + brand modifiers for the sign-out confirmation modal
   (signout-confirmation-fluent.html prototype, Variant B). Used by
   UserFooter, UserNavHeader, AdminSidebar and DashboardShell. */
.as-btn-pill {
    border-radius: var(--ea-radius-pill, 999px);
    padding: .6rem 1.3rem;
}

.as-btn-brand {
    background: var(--ea-blue);
    color: #fff;
    border-color: var(--ea-blue);
}

.as-btn-brand:hover {
    background: var(--ea-blue-90, #3d20e0);
    box-shadow: 0 4px 12px rgba(77, 46, 253, .22);
}

.as-btn-brand:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(77, 46, 253, .18);
}

.as-btn-brand:disabled,
.as-btn-brand.disabled {
    background: var(--ea-blue-30, #b8aafe);
    border-color: var(--ea-blue-30, #b8aafe);
    color: #fff;
    cursor: not-allowed;
    box-shadow: none;
}

/* Spinner inside button */
.as-btn .btn-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: as-spin .6s linear infinite;
}

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


/* ─── BUSY INDICATOR ─────────────────────────────────────────── */
.as-busy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    gap: 1rem;
}

.as-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--ea-blue-10);
    border-top: 4px solid var(--ea-blue);
    border-radius: 50%;
    animation: as-spin .7s linear infinite;
}

.as-busy p {
    font-family: var(--ea-font);
    font-size: .88rem;
    color: var(--ea-neutral-60);
    font-weight: 500;
}


/* ─── OUTCOME (success / error) ──────────────────────────────── */
.as-outcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    gap: .75rem;
}

.as-outcome-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.as-outcome-icon svg {
    width: 28px;
    height: 28px;
}

.as-outcome-icon.success {
    background: #ecfdf5;
    color: #059669;
}

.as-outcome-icon.error {
    background: #fef2f2;
    color: #dc2626;
}

.as-outcome h3 {
    font-family: var(--ea-font);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ea-black);
    margin: 0;
}

.as-outcome p {
    font-family: var(--ea-font);
    font-size: .88rem;
    color: var(--ea-neutral-60);
    line-height: 1.5;
    max-width: 320px;
    margin: 0;
}

.as-outcome .as-outcome-actions {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
}

.as-outcome-ref {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .85rem;
    background: var(--ea-blue-10, #e8f0fe);
    border-radius: var(--ea-radius-md, 8px);
    margin-top: .25rem;
}

.as-ref-label {
    font-family: var(--ea-font);
    font-size: .8225rem;
    color: var(--ea-neutral-60);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.as-ref-value {
    font-family: var(--ea-font);
    font-size: .88rem;
    color: var(--stemblue);
    font-weight: 700;
    letter-spacing: .02em;
}


/* ─── SHARED MODAL FOCUS & RESPONSIVE ────────────────────────── */
.as-modal-dialog button:focus-visible,
.as-modal-dialog input:focus-visible,
.as-modal-dialog select:focus-visible,
.as-modal-dialog textarea:focus-visible {
    /*outline: 2px solid var(--ea-blue);*/
    /*outline-offset: 2px;*/
}

@media (max-width: 560px) {
    .as-row {
        grid-template-columns: 1fr;
    }

    .as-header {
        padding: 1rem 1.15rem .85rem;
    }

    .as-body {
        padding: 1rem 1.15rem 1.25rem;
    }

    .as-footer {
        padding: .85rem 1.15rem;
    }
}


/* ═══════════════════════════════════════════════════════════════
   BROWSE GAMES - shared styles (bg-* prefix)
   Used by BrowseGames, BrowseGameCard, GameDetailView components
   ═══════════════════════════════════════════════════════════════ */

/* ── Filter bar ── */
.bg-filter-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.bg-search {
    flex: 1;
    min-width: 220px;
    max-width: 360px;
    position: relative;
}
.bg-search svg {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--ea-neutral-40);
}
.bg-search input {
    width: 100%;
    padding: .55rem .75rem .55rem 2.4rem;
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-xl);
    font-family: var(--ea-font);
    font-size: .84rem;
    background: var(--ea-white);
    outline: none;
    transition: border-color 120ms;
    box-sizing: border-box;
}
.bg-search input:focus {
    border-color: var(--ea-blue-30);
    box-shadow: 0 0 0 3px var(--ea-blue-10);
}
.bg-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .4rem .7rem;
    border: 1px solid var(--ea-border);
    border-radius: 999px;
    font-family: var(--ea-font);
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-neutral-60);
    background: var(--ea-white);
    cursor: pointer;
    transition: all 120ms;
}
.bg-filter-chip:hover {
    border-color: var(--ea-blue-30);
    background: var(--ea-blue-10);
    color: var(--ea-blue);
}
.bg-filter-chip.active {
    background: var(--ea-blue);
    color: #fff;
    border-color: var(--ea-blue);
}
.bg-count {
    margin-left: auto;
    font-size: .8225rem;
    color: var(--ea-neutral-40);
    font-weight: 600;
}

/* ── Game card grid ── */
.bg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1rem;
}

/* ── Card ── */
.bg-card {
    background: var(--ea-white);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-lg);
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transition: all 180ms;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.bg-card:hover {
    border-color: var(--ea-blue-30);
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    transform: translateY(-2px);
}

/* Card cover */
.bg-card-cover {
    position: relative;
    height: 260px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.bg-card-cover::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(transparent, rgba(0,0,0,.45));
}
.bg-card-heading {
    position: absolute;
    bottom: .75rem;
    left: .85rem;
    right: .85rem;
    z-index: 1;
    color: #fff;
}
.bg-card-heading-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--stemblue);
}
.bg-card-heading-sub {
    font-size: .8225rem;
    font-weight: 500;
    opacity: .85;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* Status badge */
.bg-card-status {
    position: absolute;
    top: .65rem;
    right: .65rem;
    z-index: 1;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.bg-card-status.published {
    background: rgba(122, 253, 181, .9);
    color: #064e3b;
}
.bg-card-status.coming-soon {
    background: rgba(254, 146, 13, .9);
    color: #fff;
}

/* Card body */
.bg-card-body {
    padding: .85rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.bg-card-desc {
    color: var(--ea-neutral-50);
    line-height: 1.5;
    margin: 0 0 .75rem;
    flex: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta tags - triangle-arrow style */
.bg-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
    align-items: center;
    justify-content: space-between;
}
.bg-tri-tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.bg-tri-point { display: flex; align-items: center; flex-shrink: 0; }
.bg-tri-point svg { width: 14px; height: 16px; }
.bg-tri-label {
    font-size: .88rem;
    font-weight: 700;
    color: var(--ea-black);
    white-space: nowrap;
}

/* Card footer */
.bg-card-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-top: .65rem;
    border-top: 1px solid var(--ea-border-subtle);
    justify-content: right;
}
.bg-btn-details {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .5rem .75rem;
    border: none;
    border-radius: var(--ea-radius-xl);
    background: var(--ea-blue);
    color: #fff;
    font-family: var(--ea-font);
    font-size: .85rem;
    max-width: 150px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms;
}
.bg-btn-details:hover { background: var(--ea-blue-90); }
.bg-btn-details svg { width: 14px; height: 14px; }
.bg-btn-details.coming-soon {
    background: var(--ea-neutral-6);
    color: var(--ea-neutral-40);
    cursor: default;
}
.bg-btn-assign {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: .5rem .65rem;
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-xl);
    background: var(--ea-white);
    color: var(--ea-neutral-60);
    font-family: var(--ea-font);
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 120ms;
}
.bg-btn-assign:hover {
    border-color: var(--ea-blue-30);
    color: var(--ea-blue);
    background: var(--ea-blue-10);
}
.bg-btn-assign svg { width: 14px; height: 14px; }

/* ── Empty state ── */
.bg-empty {
    text-align: center;
    padding: 4rem 2rem;
    grid-column: 1 / -1;
}
.bg-empty-icon {
    width: 56px; height: 56px;
    border-radius: var(--ea-radius-md);
    background: var(--ea-blue-10);
    display: inline-grid;
    place-items: center;
    margin-bottom: 1rem;
}
.bg-empty-icon svg { width: 28px; height: 28px; color: var(--ea-blue); }
.bg-empty h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .35rem; }
.bg-empty p  { font-size: .84rem; color: var(--ea-neutral-40); margin: 0; }

/* ── Loading skeleton ── */
.bg-skeleton {
    background: var(--ea-neutral-6);
    border-radius: var(--ea-radius-lg);
    overflow: hidden;
    position: relative;
    pointer-events: none;
}
.bg-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    animation: bg-shimmer 1.5s infinite;
}
@keyframes bg-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.bg-skeleton-cover { height: 160px; }
.bg-skeleton-body  { padding: .85rem; }
.bg-skeleton-line  { height: 12px; background: var(--ea-neutral-10); border-radius: 4px; margin-bottom: .5rem; }
.bg-skeleton-line.w60 { width: 60%; }
.bg-skeleton-line.w90 { width: 90%; }
.bg-skeleton-line.w40 { width: 40%; }

/* ── Detail view - Back link ── */
.bg-back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: 1rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ea-blue);
    cursor: pointer;
    text-decoration: none;
    transition: color 120ms;
    border: none;
    background: none;
    font-family: var(--ea-font);
    padding: 0;
}
.bg-back:hover { color: var(--ea-blue-90); }
.bg-back svg { width: 16px; height: 16px; }

/* ── Detail hero ── */
.bg-detail-hero {
    border-radius: var(--ea-radius-xl);
    overflow: hidden;
    position: relative;
    height: 220px;
    background-size: cover;
    background-position: center;
    margin-bottom: 1.5rem;
}
.bg-detail-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 40%, rgba(0,0,0,.6));
}
.bg-detail-hero-text {
    position: absolute;
    bottom: 1.25rem;
    left: 1.5rem;
    right: 1.5rem;
    z-index: 1;
    color: #fff;
}
.bg-detail-hero-text h1 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 .15rem;
    text-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.bg-detail-hero-text span {
    font-size: .85rem;
    font-weight: 500;
    opacity: .9;
    text-shadow: 0 1px 3px rgba(0,0,0,.25);
    display: none;
}
.bg-detail-hero .bg-card-status {
    position: absolute;
    top: 1rem; right: 1rem;
    z-index: 1;
}

/* ── Detail 2-col layout ── */
.bg-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 1.25rem;
    align-items: start;
}
.bg-detail-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Detail section cards ── */
.bg-detail-section {
    background: var(--ea-white);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-lg);
    padding: 1.25rem;
}
.bg-detail-section-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .85rem;
}
.bg-detail-section-header svg { width: 18px; height: 18px; color: var(--ea-blue); flex-shrink: 0; }
.bg-detail-section-header h3  { font-size: .95rem; font-weight: 700; margin: 0; color: var(--ea-black); }
.bg-detail-section p          { font-size: .9rem; color: var(--ea-neutral-60); line-height: 1.65; }

/* Learning outcomes list */
.bg-outcomes-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.bg-outcomes-list li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .88rem;
    color: var(--ea-neutral-60);
    line-height: 1.5;
}
.bg-outcomes-list li svg {
    width: 16px; height: 16px;
    color: var(--ea-green-dark);
    flex-shrink: 0;
    margin-top: .1rem;
}

/* Why Play grid */
.bg-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
}
.bg-why-card {
    padding: .85rem;
    background: var(--ea-neutral-2);
    border: 1px solid var(--ea-border-subtle);
    border-radius: var(--ea-radius-md);
}
.bg-why-card h4 { font-size: .88rem; font-weight: 700; margin: 0 0 .3rem; color: var(--ea-black); }
.bg-why-card p  { font-size: .84rem; color: var(--ea-neutral-50); line-height: 1.5; margin: 0; }

/* Topics tag cloud */
.bg-topics {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.bg-topic-tag {
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .8225rem;
    font-weight: 600;
    background: var(--ea-blue-10);
    color: var(--ea-blue);
    border: 1px solid var(--ea-blue-30);
}

/* ── Detail sidebar (sticky) ── */
.bg-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 1rem;
}

/* Action card */
.bg-action-card {
    background: var(--ea-white);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.bg-btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .65rem 1rem;
    border-radius: var(--ea-radius-xl);
    font-family: var(--ea-font);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 120ms;
    border: none;
}
.bg-btn-action svg { width: 16px; height: 16px; }
.bg-btn-action.primary      { background: var(--ea-green); color: var(--ea-blue); }
.bg-btn-action.primary:hover { background: #5dfca0; }
.bg-btn-action.secondary    { background: var(--ea-white); color: var(--ea-blue); border: 1px solid var(--ea-blue-30); }
.bg-btn-action.secondary:hover { background: var(--ea-blue-10); }
.bg-btn-action.play-green   { background: var(--ea-green); color: var(--ea-black); }
.bg-btn-action.play-green:hover { background: #5ee89a; }
.bg-btn-action:disabled     { opacity: .5; cursor: not-allowed; }

/* Meta info card */
.bg-meta-card {
    background: var(--ea-white);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-lg);
    padding: 1rem 1.25rem;
}
.bg-meta-card h4 {
    font-size: .8225rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ea-neutral-40);
    margin: 0 0 .75rem;
}
.bg-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45rem 0;
    border-bottom: 1px solid var(--ea-border-subtle);
}
.bg-meta-row:last-child { border-bottom: none; }
.bg-meta-row-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .88rem;
    color: var(--ea-neutral-50);
}
.bg-meta-row-label svg { width: 14px; height: 14px; color: var(--ea-neutral-40); }
.bg-meta-row-value {
    font-size: .88rem;
    font-weight: 700;
    color: var(--ea-black);
}

/* Curriculum alignment */
.bg-curriculum-note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .75rem;
    background: rgba(122, 253, 181, .08);
    border: 1px solid rgba(122, 253, 181, .3);
    border-radius: var(--ea-radius-sm);
    font-size: .85rem;
    color: var(--ea-neutral-60);
    line-height: 1.5;
}
.bg-curriculum-note svg {
    width: 16px; height: 16px;
    color: var(--ea-green-dark);
    flex-shrink: 0;
    margin-top: .1rem;
}

/* Action button - danger variant */
.bg-btn-action.danger {
    background: var(--ea-white);
    color: #c62828;
    border: 1px solid #f5c6cb;
}
.bg-btn-action.danger:hover { background: #fde8e8; }

/* Meta‑row value colour helpers */
.bg-meta-row-value.val-blue   { color: var(--ea-blue); }
.bg-meta-row-value.val-green  { color: var(--ea-green-dark); }
.bg-meta-row-value.val-pink   { color: var(--ea-pink); }
.bg-meta-row-value.val-orange { color: var(--ea-orange); }

/* ═══════════════════════════════════════════════════
   Assignment Detail  (ad-*)
   ═══════════════════════════════════════════════════ */

/* ── Page header (no longer used, kept for compat) ── */
.ad-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.ad-header-left {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.ad-header h1 {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
    color: var(--ea-black);
}

/* ── Single info card with tri motifs ── */
.ad-info-card {
    background: var(--ea-surface-card);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-xl);
    overflow: hidden;
    position: relative;
    padding: 1.35rem 1.5rem;
    margin-bottom: 1.25rem;
}
.ad-info-tri {
    position: absolute;
    top: -20px; right: -35px;
    width: 280px; height: 160px;
    pointer-events: none;
    opacity: .08;
}
.ad-info-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
    position: relative; z-index: 1;
}
.ad-info-identity {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.ad-info-avatar {
    width: 44px; height: 44px;
    border-radius: var(--ea-radius-lg);
    background: rgba(77, 46, 253, .08);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ad-info-avatar svg {
    width: 22px; height: 22px;
    color: var(--stempurple, #4D2EFD);
}
.ad-info-name-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.ad-info-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ea-black);
}
.ad-info-sub {
    font-size: .78rem;
    color: var(--ea-neutral-40);
    margin-top: .15rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
.ad-info-sub-sep {
    color: var(--ea-neutral-30);
}
.ad-info-sub strong {
    color: var(--ea-neutral-60);
}

/* Field strip */
.ad-info-fields {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--ea-border-subtle);
    position: relative; z-index: 1;
}
.ad-info-field {
    padding: .85rem 1.15rem .85rem 0;
    min-width: 0;
}
.ad-info-field + .ad-info-field {
    border-left: 1px solid var(--ea-border-subtle);
    padding-left: 1.15rem;
}
.ad-info-field-head {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .3rem;
}
.ad-info-field-head svg {
    width: 14px; height: 14px;
}
.ad-info-field-head span {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ea-neutral-40);
    font-weight: 600;
}
.ad-info-field-head.blue svg  { color: var(--stemblue, #3b82f6); }
.ad-info-field-head.green svg { color: var(--stemgreen-dark, #2b9d5e); }
.ad-info-field-head.orange svg { color: var(--stemorange, #FE920D); }
.ad-info-field-head.pink svg  { color: var(--stempink, #F04FCD); }

.ad-info-field-val {
    font-size: .92rem;
    font-weight: 700;
    color: var(--ea-black);
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ── Stat-card overrides (kept for compat) ── */
.ad-stat-cards .ssc-card  { min-height: 110px; }
.ad-stat-cards .ssc-value { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }

/* ── Info grid ── */
.ad-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.ad-info-item {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    min-width: 0;
}
.ad-info-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--ea-radius-lg);
    background: var(--ea-blue-10);
    color: var(--ea-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ad-info-icon svg { width: 18px; height: 18px; }
.ad-info-label {
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-neutral-50);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .15rem;
    line-height: 1.4;
}
.ad-info-value {
    font-size: .88rem;
    color: var(--ea-black);
    font-weight: 500;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

/* ── Description ── */
.ad-description {
    margin-top: 1.15rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--ea-border-subtle);
}
.ad-description-label {
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-neutral-50);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .35rem;
}
.ad-description p {
    font-size: .84rem;
    line-height: 1.65;
    color: var(--ea-neutral-60);
    margin: 0;
}

/* ── Section heading ── */
.ad-section-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ea-black);
    margin: 0 0 1rem;
}

/* ── Alert banner ── */
.ad-alert {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1rem;
    border-radius: var(--ea-radius-lg);
    font-size: .82rem;
    font-weight: 500;
    margin-bottom: 1rem;
}
.ad-alert svg { width: 16px; height: 16px; flex-shrink: 0; }
.ad-alert--success {
    background: #e8f9ee;
    border: 1px solid #b7ebc1;
    color: var(--ea-green-dark);
}
.ad-alert--error {
    background: #fde8e8;
    border: 1px solid #f5c6cb;
    color: #c62828;
}

/* ── Student table ── */
.ad-table-wrap {
    background: var(--ea-white);
    border: 1px solid var(--ea-border-subtle);
    border-radius: var(--ea-radius-xl);
    overflow: hidden;
    box-shadow: var(--ea-shadow-4);
}
.ad-table {
    width: 100%;
    border-collapse: collapse;
}
.ad-table thead th {
    font-size: .8225rem;
    font-weight: 700;
    color: var(--stemwhite);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .85rem 1rem;
    text-align: left;
    background: var(--stemblue);
    border-bottom: 1px solid var(--ea-border-subtle);
}
.ad-table thead th:first-child { padding-left: 1.25rem; }
.ad-table thead th:last-child  { text-align: right; padding-right: 1.25rem; }
.ad-table tbody tr {
    border-bottom: 1px solid var(--ea-border-subtle);
    transition: background .12s;
}
.ad-table tbody tr:last-child { border-bottom: none; }
.ad-table tbody tr:hover { background: var(--ea-neutral-2); }
.ad-table tbody tr.ad-row-clickable { cursor: pointer; }
.ad-table tbody tr.ad-row-clickable:hover { background: #eff6ff; }
.ad-table tbody td {
    padding: .85rem 1rem;
    font-size: .84rem;
    color: var(--ea-neutral-80);
    vertical-align: middle;
}
.ad-table tbody td:first-child { padding-left: 1.25rem; }
.ad-table tbody td:last-child  { text-align: right; padding-right: 1.25rem; }
.ad-student-name {
    font-weight: 600;
    color: var(--ea-black);
}
.ad-table-date {
    font-variant-numeric: tabular-nums;
    color: var(--ea-neutral-60);
}
.ad-table-sessions { font-weight: 600; color: var(--ea-neutral-80); }
.ad-table-grade    { font-weight: 700; color: var(--ea-blue); }
.ad-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

/* Report button */
.ad-btn-report {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .6rem;
    border-radius: var(--ea-radius-xl);
    font-family: var(--ea-font);
    font-size: .8225rem;
    font-weight: 600;
    background: transparent;
    color: var(--ea-neutral-60);
    border: 1px solid var(--ea-border);
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.ad-btn-report:hover {
    background: var(--ea-neutral-4);
    color: var(--ea-black);
}
.ad-btn-report svg { width: 14px; height: 14px; }

.ad-no-activity {
    font-size: .8225rem;
    color: var(--ea-neutral-40);
    font-style: italic;
}

/* ── Assessment status badges (small) ── */
.ad-assess-badge {
    /*display: inline-flex;*/
    display: none;
    align-items: center;
    gap: .25rem;
    padding: .15rem .5rem;
    border-radius: 100px;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}
.ad-assess-badge--released   { background: #e8f5e9; color: #1b5e20; }
.ad-assess-badge--submitted  { background: #e3f2fd; color: #1565c0; }
.ad-assess-badge--draft      { background: #fff3e0; color: #e65100; }
.ad-assess-badge--none       { background: var(--ea-neutral-6); color: var(--ea-neutral-50); }

/* ── Student progress card list (responsive alt to table) ── */
.ad-card-list { display: none; }
.ad-card-list .ad-card {
    background: var(--ea-white);
    border: 1px solid var(--ea-border-subtle);
    border-radius: var(--ea-radius-xl);
    padding: 1rem 1.125rem;
    box-shadow: var(--ea-shadow-4);
    position: relative;
    overflow: hidden;
    transition: box-shadow .15s;
}
.ad-card-list .ad-card:hover { box-shadow: var(--ea-shadow-8); }
.ad-card-list .ad-card + .ad-card { margin-top: .75rem; }

/* Brand triangle decoration (mono purple, V2) */
.ad-card .ad-card-tri {
    position: absolute;
    top: -25px;
    right: -50px;
    width: 180px;
    height: 120px;
    pointer-events: none;
    opacity: .15;
}

.ad-card .ad-card-header {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .65rem;
    position: relative;
    z-index: 1;
}
.ad-card .ad-card-header .ad-student-name { font-size: .92rem; }
.ad-card .ad-card-header .ad-icon-badge {
    width: 38px;
    height: 38px;
    border-radius: var(--ea-radius-lg);
    background: var(--ea-blue-10, #f0edff);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.ad-card .ad-card-header .ad-icon-badge svg { width: 18px; height: 18px; color: var(--ea-blue); }
.ad-card .ad-card-fields {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.ad-card .ad-card-field { display: flex; flex-direction: column; }
.ad-card .ad-card-field-label {
    font-size: .66rem;
    font-weight: 600;
    color: var(--ea-neutral-40);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .1rem;
}
.ad-card .ad-card-field-value {
    font-size: .82rem;
    color: var(--ea-neutral-80);
    font-weight: 500;
}
.ad-card .ad-card-divider {
    width: 1px;
    background: var(--ea-border-subtle);
    align-self: stretch;
}
.ad-card .ad-card-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .65rem;
    padding-top: .65rem;
    border-top: 1px solid var(--ea-border-subtle);
    position: relative;
    z-index: 1;
}

/* ── Empty state ── */
.ad-empty {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--ea-white);
    border: 1px solid var(--ea-border-subtle);
    border-radius: var(--ea-radius-xl);
    box-shadow: var(--ea-shadow-4);
}
.ad-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto .75rem;
    background: var(--ea-neutral-6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ea-neutral-40);
}
.ad-empty-icon svg { width: 22px; height: 22px; }
.ad-empty h3 {
    font-size: .92rem;
    font-weight: 700;
    color: var(--ea-black);
    margin: 0 0 .25rem;
}
.ad-empty p {
    font-size: .82rem;
    color: var(--ea-neutral-50);
    margin: 0;
}

/* ── Not Found state ── */
.ad-not-found {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--ea-white);
    border: 1px solid var(--ea-border-subtle);
    border-radius: var(--ea-radius-lg);
    max-width: 480px;
    margin: 4rem auto;
    box-shadow: var(--ea-shadow-16);
}
.ad-not-found-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    background: #fde8e8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c62828;
}
.ad-not-found-icon svg { width: 26px; height: 26px; }
.ad-not-found h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--stemblue);
    margin: 0 0 .35rem;
}
.ad-not-found p {
    font-size: .84rem;
    color: var(--ea-neutral-50);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

/* ── Release modal ── */
.ad-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(27, 27, 31, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 1rem;
}
.ad-modal {
    background: var(--ea-white);
    border-radius: var(--ea-radius-lg);
    max-width: 440px;
    width: 100%;
    padding: 1.5rem;
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.ad-modal h3 {
    margin: 0 0 .5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ea-black);
}
.ad-modal p {
    font-size: .84rem;
    color: var(--ea-neutral-60);
    line-height: 1.55;
    margin: 0 0 .5rem;
}
.ad-modal p:last-of-type { margin-bottom: 1.25rem; }
.ad-modal p strong { color: var(--ea-black); }
.ad-modal-hint {
    font-size: .8225rem !important;
    color: var(--ea-neutral-40) !important;
}
.ad-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
}

/* ── Loading skeleton ── */
.ad-skeleton {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.25rem;
    max-width: 100%;
}
.ad-skel-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.ad-skel-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ad-skel-bar {
    border-radius: var(--ea-radius-sm);
    background: linear-gradient(90deg, var(--ea-neutral-6) 25%, var(--ea-neutral-4) 50%, var(--ea-neutral-6) 75%);
    background-size: 200% 100%;
    animation: adShimmer 1.4s ease-in-out infinite;
}
@keyframes adShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.ad-skel-back    { height: 18px; width: 120px; margin-bottom: .5rem; border-radius: 4px;
                   background: linear-gradient(90deg, var(--ea-neutral-6) 25%, var(--ea-neutral-4) 50%, var(--ea-neutral-6) 75%);
                   background-size: 200% 100%; animation: adShimmer 1.4s ease-in-out infinite; }
.ad-skel-title   { height: 28px; width: 45%; margin-bottom: 1.25rem; border-radius: 6px;
                   background: linear-gradient(90deg, var(--ea-neutral-6) 25%, var(--ea-neutral-4) 50%, var(--ea-neutral-6) 75%);
                   background-size: 200% 100%; animation: adShimmer 1.4s ease-in-out infinite; }
.ad-skel-card    { height: 180px; width: 100%; border-radius: var(--ea-radius-lg); }
.ad-skel-table   { height: 340px; width: 100%; border-radius: var(--ea-radius-lg); }
.ad-skel-actions { height: 170px; width: 100%; border-radius: var(--ea-radius-lg); }
.ad-skel-meta    { height: 240px; width: 100%; border-radius: var(--ea-radius-lg); }


/* ═══════════════════════════════════════════════════════════════════════════
   STUDENT EVALUATION REPORT (ser-*)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Back link ── */
.ser-back { display:inline-flex; align-items:center; gap:.4rem; font-size:.84rem; font-weight:500; color:var(--ea-neutral-60); text-decoration:none; padding:1.5rem 0 .5rem; cursor:pointer; transition:color .15s; background:none; border:none; font-family:var(--ea-font); }
.ser-back:hover { color:var(--ea-blue); }
.ser-back svg { width:16px; height:16px; }

/* ── Page header ── */
.ser-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.ser-header-left { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.ser-header h1 { font-size:1.35rem; font-weight:800; margin:0; color:var(--ea-black); }
.ser-header-right { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }

/* Meta chips */
.ser-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .7rem; border-radius:100px; font-size:.8225rem; font-weight:600; letter-spacing:.02em; background:var(--ea-neutral-6); color:var(--ea-neutral-60); border:1px solid var(--ea-border); }
.ser-chip svg { width:12px; height:12px; opacity:.7; }

/* Session selector - now uses .ea-select.ea-select--pill */

/* ── Two-column layout ── */
.ser-layout { display:grid; grid-template-columns:1fr 320px; gap:1.5rem; align-items:start; }
.ser-content { min-width:0; }
.ser-sidebar { position:sticky; top:1.5rem; display:flex; flex-direction:column; gap:1rem; }

/* ── Grade hero card ── */
.ser-grade-hero { background:var(--ea-surface-card); border:1px solid var(--ea-border); border-radius:var(--ea-radius-lg); padding:1.5rem; box-shadow:var(--ea-shadow-4); margin-bottom:1.25rem; }
.ser-grade-hero-top { display:flex; align-items:center; gap:1.25rem; margin-bottom:1.25rem; }
.ser-grade-ring { width:96px; height:96px; position:relative; flex-shrink:0; }
.ser-grade-ring svg { width:96px; height:96px; }
.ser-grade-ring .ring-bg { fill:none; stroke:var(--ea-neutral-10); stroke-width:8; }
.ser-grade-ring .ring-fill { fill:none; stroke:var(--ea-blue); stroke-width:8; stroke-linecap:round; stroke-dasharray:251; stroke-dashoffset:251; transform:rotate(-90deg); transform-origin:center; transition:stroke-dashoffset .8s ease; }
.ser-grade-ring-label { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ser-grade-ring-pct { font-size:1.15rem; font-weight:800; color:var(--ea-black); line-height:1; }
.ser-grade-ring-letter { font-size:.8225rem; font-weight:700; color:var(--ea-blue); margin-top:2px; }
.ser-grade-info h2 { font-size:1rem; font-weight:700; margin:0 0 .25rem; color:var(--ea-black); }
.ser-grade-info p { font-size:.8225rem; color:var(--ea-neutral-60); margin:0; line-height:1.45; }

/* Score breakdown row */
.ser-grade-breakdown { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; }
.ser-grade-stat { background:var(--ea-blue-10); border-radius:var(--ea-radius-sm); padding:.65rem .75rem; text-align:center; }
.ser-grade-stat-value { font-size:1.15rem; font-weight:800; color:var(--ea-black); }
.ser-grade-stat-label { font-size:.8225rem; font-weight:600; color:var(--ea-neutral-60); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; line-height:1.4; }

/* Override tooltip badge */
.ser-override-badge { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .55rem; border-radius:100px; font-size:.68rem; font-weight:600; background:var(--ea-pink); color:var(--ea-white); cursor:help; }
.ser-override-badge svg { width:12px; height:12px; }

/* ── Tabs ── */
.ser-tabs { display:flex; gap:0; border-bottom:2px solid var(--ea-border); margin-bottom:1.25rem; }
.ser-tab { padding:.65rem 1rem; background:none; border:none; border-bottom:2.5px solid transparent; cursor:pointer; font-family:var(--ea-font); font-size:.82rem; font-weight:600; color:var(--ea-neutral-60); transition:all .15s; display:flex; align-items:center; gap:.35rem; position:relative; bottom:-2px; }
.ser-tab:hover { color:var(--ea-black); }
.ser-tab.active { color:var(--ea-blue); border-bottom-color:var(--ea-blue); }
.ser-tab svg { width:16px; height:16px; }

/* ── Tab panels ── */
.ser-panel { animation:serFadeIn .25s ease; }
@keyframes serFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* ── Puzzle cards ── */
.ser-puzzle-list { display:flex; flex-direction:column; gap:1rem; }
.ser-puzzle-card { background:var(--ea-surface-card); border:1px solid var(--ea-border); border-radius:var(--ea-radius-lg); box-shadow:var(--ea-shadow-2); overflow:hidden; transition:box-shadow .2s, border-color .2s; }
.ser-puzzle-card:hover { box-shadow:var(--ea-shadow-8); border-color:var(--ea-blue-30); }
.ser-puzzle-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; cursor:pointer; user-select:none; }
.ser-puzzle-header:hover { background:var(--ea-neutral-4); }
.ser-puzzle-name { font-size:.95rem; font-weight:700; color:var(--ea-black); }
.ser-puzzle-topic { display:inline-block; background:var(--ea-neutral-6); color:var(--ea-neutral-60); padding:.15rem .5rem; border-radius:100px; font-size:.8225rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-left:.5rem; line-height:1.4; }
.ser-puzzle-pct { font-size:1.1rem; font-weight:800; color:var(--ea-blue); display:flex; align-items:center; gap:.4rem; }
.ser-puzzle-chevron { width:18px; height:18px; color:var(--ea-neutral-40); transition:transform .2s; }
.ser-puzzle-card.open .ser-puzzle-chevron { transform:rotate(180deg); }
.ser-puzzle-body { padding:0 1.25rem 1.25rem; display:none; }
.ser-puzzle-card.open .ser-puzzle-body { display:block; }

/* Rubric scores row */
.ser-rubric-row { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-bottom:1rem; }
.ser-rubric-item { background:var(--ea-neutral-4); border-radius:var(--ea-radius-sm); padding:.65rem .75rem; }
.ser-rubric-label { font-size:.8225rem; font-weight:600; color:var(--ea-neutral-60); text-transform:uppercase; letter-spacing:.03em; margin-bottom:.3rem; line-height:1.4; }
.ser-rubric-score { font-size:1.15rem; font-weight:800; color:var(--ea-black); }
.ser-rubric-score span { font-size:.85rem; font-weight:500; color:var(--ea-neutral-40); }
.ser-rubric-bar { width:100%; height:5px; background:var(--ea-neutral-10); border-radius:3px; margin-top:.4rem; overflow:hidden; }
.ser-rubric-bar-fill { height:100%; background:linear-gradient(90deg, var(--ea-blue), var(--ea-blue-70)); border-radius:3px; transition:width .5s ease; }
.ser-rubric-level { font-size:.8225rem; color:var(--ea-neutral-40); margin-top:2px; }

/* Key quote */
.ser-quote { background:linear-gradient(135deg, var(--ea-blue-10) 0%, var(--ea-white) 100%); border-left:3px solid var(--ea-blue); border-radius:var(--ea-radius-sm); padding:.75rem 1rem; margin-bottom:.75rem; font-size:.82rem; font-style:italic; color:var(--ea-neutral-60); line-height:1.55; }

/* Strength / Growth chips */
.ser-insight { border-radius:var(--ea-radius-sm); padding:.65rem .85rem; margin-bottom:.5rem; font-size:.8225rem; line-height:1.5; color:var(--ea-black); }
.ser-insight-label { font-size:.8225rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.2rem; line-height:1.4; }
.ser-insight.strength { background:#e8f5e9; border-left:3px solid var(--ea-green-dark); }
.ser-insight.strength .ser-insight-label { color:var(--ea-green-dark); }
.ser-insight.growth { background:#fff4e5; border-left:3px solid var(--ea-orange); }
.ser-insight.growth .ser-insight-label { color:#c77500; }

/* Rationale expander */
.ser-rationale-toggle { background:none; border:none; cursor:pointer; font-family:var(--ea-font); font-size:.8225rem; font-weight:600; color:var(--ea-blue); display:flex; align-items:center; gap:.3rem; padding:.5rem 0 0; }
.ser-rationale-toggle:hover { text-decoration:underline; }
.ser-rationale-toggle svg { width:14px; height:14px; transition:transform .2s; }
.ser-rationale-content { margin-top:.5rem; display:flex; flex-direction:column; gap:.5rem; }
.ser-rationale-box { background:var(--ea-blue-10); border-left:3px solid var(--ea-blue-50); border-radius:var(--ea-radius-sm); padding:.6rem .8rem; font-size:.8225rem; color:var(--ea-neutral-60); line-height:1.55; }
.ser-rationale-box strong { color:var(--ea-black); }

/* ── Analysis panel ── */
.ser-analysis-grid { display:flex; flex-direction:column; gap:1rem; }
.ser-analysis-card { background:var(--ea-surface-card); border:1px solid var(--ea-border); border-radius:var(--ea-radius-lg); padding:1.25rem; box-shadow:var(--ea-shadow-2); }
.ser-analysis-card.trajectory { border-left:4px solid var(--ea-blue); }
.ser-analysis-card.strengths  { border-left:4px solid var(--ea-green-dark); }
.ser-analysis-card.challenges { border-left:4px solid var(--ea-orange); }
.ser-analysis-card.standout   { border-left:4px solid var(--ea-pink); }
.ser-analysis-header { display:flex; align-items:center; gap:.5rem; margin-bottom:.65rem; }
.ser-analysis-header svg { width:20px; height:20px; }
.ser-analysis-card.trajectory .ser-analysis-header svg { color:var(--ea-blue); }
.ser-analysis-card.strengths  .ser-analysis-header svg { color:var(--ea-green-dark); }
.ser-analysis-card.challenges .ser-analysis-header svg { color:var(--ea-orange); }
.ser-analysis-card.standout   .ser-analysis-header svg { color:var(--ea-pink); }
.ser-analysis-header h3 { font-size:.9rem; font-weight:700; margin:0; color:var(--ea-black); }
.ser-analysis-text { font-size:.82rem; color:var(--ea-neutral-60); line-height:1.55; margin:0; }
.ser-analysis-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.35rem; }
.ser-analysis-list li { padding:.45rem .65rem; background:var(--ea-neutral-4); border-radius:var(--ea-radius-sm); font-size:.8225rem; color:var(--ea-neutral-60); display:flex; align-items:start; gap:.4rem; }
.ser-analysis-list li::before { content:'•'; color:var(--ea-blue); font-weight:700; font-size:1rem; line-height:1; }

/* ── Feedback panel ── */
.ser-feedback-grid { display:flex; flex-direction:column; gap:1rem; }
.ser-feedback-card { background:var(--ea-surface-card); border:1px solid var(--ea-border); border-radius:var(--ea-radius-lg); padding:1.25rem; box-shadow:var(--ea-shadow-2); }
.ser-feedback-card.student-msg { background:linear-gradient(135deg,rgba(43,157,94,.06) 0%,rgba(77,46,253,.04) 100%); border:2px solid rgba(43,157,94,.25); }
.ser-feedback-card.teacher-msg { background:linear-gradient(135deg,rgba(77,46,253,.04) 0%,rgba(128,104,254,.04) 100%); border:2px solid var(--ea-border); }
.ser-feedback-header { display:flex; align-items:center; gap:.5rem; margin-bottom:.65rem; }
.ser-feedback-header svg { width:20px; height:20px; color:var(--ea-blue); }
.ser-feedback-card.student-msg .ser-feedback-header svg { color:var(--ea-green-dark); }
.ser-feedback-header h3 { font-size:.9rem; font-weight:700; margin:0; color:var(--ea-black); }
.ser-feedback-text { font-size:.82rem; color:var(--ea-neutral-60); line-height:1.6; margin:0; }
.ser-feedback-card.student-msg .ser-feedback-text { font-style:italic; }

/* Next steps / action items */
.ser-step-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.3rem; }
.ser-step-list li { display:flex; align-items:start; gap:.4rem; font-size:.8225rem; color:var(--ea-neutral-60); padding:.35rem 0; line-height:1.5; }
.ser-step-list li::before { content:'→'; color:var(--ea-blue); font-weight:700; }
.ser-action-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:.75rem; }
.ser-action-card { background:var(--ea-surface-card); border:1px solid var(--ea-border); border-radius:var(--ea-radius-md); padding:1rem; }
.ser-action-priority { display:inline-block; padding:.15rem .5rem; border-radius:100px; font-size:.8225rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.4rem; line-height:1.4; }
.ser-action-priority.high   { background:#ffebee; color:#d32f2f; }
.ser-action-priority.medium { background:#fff4e5; color:#c77500; }
.ser-action-priority.low    { background:#e3f2fd; color:#1565c0; }
.ser-action-card p { margin:0; font-size:.8225rem; color:var(--ea-neutral-60); line-height:1.5; }
.ser-action-card strong { color:var(--ea-black); }

/* ── Metadata panel ── */
.ser-meta-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; }
.ser-meta-card { background:var(--ea-surface-card); border:1px solid var(--ea-border); border-radius:var(--ea-radius-lg); box-shadow:var(--ea-shadow-2); overflow:hidden; }
.ser-meta-card-header { display:flex; align-items:center; gap:.5rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--ea-border); }
.ser-meta-card-header svg { width:18px; height:18px; color:var(--ea-blue); }
.ser-meta-card-header h3 { font-size:.85rem; font-weight:700; margin:0; color:var(--ea-black); }
.ser-meta-rows { padding:.5rem 1.1rem; }
.ser-meta-row { display:flex; justify-content:space-between; align-items:center; padding:.45rem 0; border-bottom:1px solid var(--ea-border-subtle); }
.ser-meta-row:last-child { border-bottom:none; }
.ser-meta-row-label { font-size:.8225rem; color:var(--ea-neutral-60); font-weight:500; }
.ser-meta-row-value { font-size:.82rem; font-weight:600; color:var(--ea-black); }

/* ── Educator assessment panel ── */
.ser-assess-card { background:var(--ea-surface-card); border:1px solid var(--ea-border); border-radius:var(--ea-radius-lg); padding:1.5rem; box-shadow:var(--ea-shadow-4); }
.ser-assess-title-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.ser-assess-title-row h2 { font-size:1rem; font-weight:700; margin:0; }
.ser-assess-badge { display:inline-flex; padding:.2rem .6rem; border-radius:100px; font-size:.68rem; font-weight:700; letter-spacing:.02em; }
.ser-assess-badge.not-started { background:var(--ea-neutral-6); color:var(--ea-neutral-60); }
.ser-assess-badge.in-progress { background:#fff4e5; color:#c77500; }
.ser-assess-badge.submitted   { background:var(--ea-blue-10); color:var(--ea-blue); }
.ser-assess-badge.released    { background:#e8f5e9; color:var(--ea-green-dark); }
.ser-assess-status { padding:.5rem .75rem; border-radius:var(--ea-radius-sm); font-size:.82rem; font-weight:500; margin-bottom:1rem; }
.ser-assess-status.success { background:rgba(43,157,94,.08); color:var(--ea-green-dark); border:1px solid rgba(43,157,94,.2); }
.ser-assess-status.error { background:rgba(211,47,47,.08); color:#d32f2f; border:1px solid rgba(211,47,47,.2); }
.ser-assess-meta { font-size:.8225rem; color:var(--ea-neutral-60); margin-bottom:1rem; }
.ser-field { margin-bottom:1rem; }
.ser-field label { display:block; font-size:.82rem; font-weight:600; color:var(--ea-black); margin-bottom:.35rem; }
.ser-textarea, .ser-input { width:100%; border:1px solid var(--ea-border); border-radius:var(--ea-radius-xl); padding:.6rem .75rem; font-family:var(--ea-font); font-size:.82rem; color:var(--ea-black); background:var(--ea-white); transition:border-color .15s, box-shadow .15s; resize:vertical; }
.ser-textarea:focus, .ser-input:focus { outline:none; border-color:var(--ea-blue); box-shadow:0 0 0 3px rgba(77,46,253,.12); }
.ser-textarea:disabled, .ser-input:disabled { background:var(--ea-neutral-4); color:var(--ea-neutral-40); cursor:not-allowed; }
.ser-override-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.ser-assess-actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:.5rem; }

/* Buttons */
.ser-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1.1rem; border-radius:var(--ea-radius-xl); font-family:var(--ea-font); font-size:.8225rem; font-weight:600; border:1.5px solid transparent; cursor:pointer; transition:all .15s; }
.ser-btn.primary { background:var(--ea-green); color:var(--ea-blue); border-color:var(--ea-green); }
.ser-btn.primary:hover { background:#5dfca0; box-shadow:var(--ea-shadow-8); }
.ser-btn.primary:disabled { opacity:.55; cursor:not-allowed; }
.ser-btn.secondary { background:var(--ea-white); color:var(--ea-blue); border-color:var(--ea-blue-30); }
.ser-btn.secondary:hover { background:var(--ea-blue-10); }
.ser-btn.secondary:disabled { opacity:.55; cursor:not-allowed; }
.ser-btn.danger { background:var(--ea-white); color:#d32f2f; border-color:rgba(211,47,47,.3); }
.ser-btn.danger:hover { background:#ffebee; }
.ser-btn svg { width:16px; height:16px; }

/* ── Sidebar cards ── */
.ser-action-sidebar { background:var(--ea-surface-card); border:1px solid var(--ea-border); border-radius:var(--ea-radius-lg); padding:1.1rem; display:flex; flex-direction:column; gap:.5rem; box-shadow:var(--ea-shadow-4); }
.ser-action-sidebar .ser-btn { width:100%; justify-content:center; }

/* Meta info card */
.ser-sidebar-meta { background:var(--ea-surface-card); border:1px solid var(--ea-border); border-radius:var(--ea-radius-lg); overflow:hidden; box-shadow:var(--ea-shadow-4); }
.ser-sidebar-meta-title { font-size:.8225rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ea-neutral-60); padding:.85rem 1.1rem .5rem; line-height:1.4; }
.ser-sidebar-meta-row { display:flex; justify-content:space-between; align-items:center; padding:.5rem 1.1rem; border-bottom:1px solid var(--ea-border-subtle); }
.ser-sidebar-meta-row:last-child { border-bottom:none; }
.ser-sidebar-meta-row-left { display:flex; align-items:center; gap:.4rem; font-size:.8225rem; color:var(--ea-neutral-60); }
.ser-sidebar-meta-row-left svg { width:14px; height:14px; opacity:.65; }
.ser-sidebar-meta-row-val { font-size:.82rem; font-weight:600; }
.ser-sidebar-meta-row-val.blue   { color:var(--ea-blue); }
.ser-sidebar-meta-row-val.green  { color:var(--ea-green-dark); }
.ser-sidebar-meta-row-val.pink   { color:var(--ea-pink); }
.ser-sidebar-meta-row-val.orange { color:var(--ea-orange); }

/* ── Achievement badges ── */
.ser-badges { display:flex; flex-direction:column; gap:.4rem; padding:.5rem 1.1rem .85rem; }
.ser-badge-item { display:flex; align-items:center; gap:.5rem; padding:.45rem .6rem; background:var(--ea-neutral-4); border-radius:var(--ea-radius-sm); }
.ser-badge-icon { font-size:1.1rem; line-height:1; }
.ser-badge-info { min-width:0; }
.ser-badge-name { font-size:.8225rem; font-weight:700; color:var(--ea-black); }
.ser-badge-reason { font-size:.8225rem; color:var(--ea-neutral-40); }

/* ── Missing evaluation prompt ── */
.ser-missing { background:var(--ea-surface-card); border:1px solid var(--ea-border); border-radius:var(--ea-radius-lg); padding:2rem; text-align:center; box-shadow:var(--ea-shadow-4); }
.ser-missing-icon { width:48px; height:48px; margin:0 auto .75rem; color:var(--ea-blue); }
.ser-missing h3 { font-size:1rem; font-weight:700; margin:0 0 .5rem; }
.ser-missing p { font-size:.82rem; color:var(--ea-neutral-60); margin:0 0 1rem; }
.ser-missing-actions { display:flex; justify-content:center; gap:.6rem; }

/* ── Loading skeleton ── */
.ser-skel-header { height:32px; width:260px; background:var(--ea-neutral-6); border-radius:var(--ea-radius-sm); margin-bottom:1.25rem; animation:serSkelPulse 1.2s ease infinite; }
.ser-skel-layout { display:grid; grid-template-columns:1fr 320px; gap:1.5rem; }
.ser-skel-main { display:flex; flex-direction:column; gap:1rem; }
.ser-skel-bar { background:var(--ea-neutral-6); border-radius:var(--ea-radius-md); animation:serSkelPulse 1.2s ease infinite; }
.ser-skel-hero { height:200px; }
.ser-skel-tabs { height:44px; }
.ser-skel-content { height:300px; }
.ser-skel-sidebar { display:flex; flex-direction:column; gap:1rem; }
.ser-skel-actions { height:140px; }
.ser-skel-meta { height:240px; }
@keyframes serSkelPulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }

/* ── SER Responsive ── */
@media (max-width:960px) {
    .ser-layout { grid-template-columns:1fr; }
    .ser-sidebar { position:static; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
    .ser-grade-breakdown { grid-template-columns:repeat(2,1fr); }
    .ser-skel-layout { grid-template-columns:1fr; }
}
@media (max-width:640px) {
    .ser-header { flex-direction:column; }
    .ser-tabs { overflow-x:auto; flex-wrap:nowrap; }
    .ser-grade-hero-top { flex-direction:column; text-align:center; }
    .ser-rubric-row { grid-template-columns:1fr; }
    .ser-override-row { grid-template-columns:1fr; }
}


/* ═══════════════════════════════════════════════════════════════
   GAME SESSION CARD (gs-*) - responsive alt for Player Activity table
   ═══════════════════════════════════════════════════════════════ */

/* Filter bar above table/cards */
.gs-filter-bar {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1rem;
}
.gs-filter-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ea-neutral-60);
    white-space: nowrap;
}

.gs-card-list { display: none; }
.gs-card-list .gs-card,
.gs-card-list .sm-card {
    background: var(--ea-white);
    border: 1px solid var(--ea-border-subtle);
    border-radius: var(--ea-radius-xl);
    padding: 1rem 1.125rem;
    box-shadow: var(--ea-shadow-4);
    position: relative;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transition: box-shadow .15s;
}
.gs-card-list .gs-card:hover,
.gs-card-list .sm-card:hover { box-shadow: var(--ea-shadow-8); }
.gs-card-list .gs-card + .gs-card,
.gs-card-list .sm-card + .sm-card { margin-top: .75rem; }

/* Brand triangle decoration (mono purple, V2) */
.gs-card .gs-card-tri {
    position: absolute;
    top: -25px;
    right: -50px;
    width: 180px;
    height: 120px;
    pointer-events: none;
    opacity: .15;
}

/* Header: game image + name/game + badge */
.gs-card .gs-card-header {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .65rem;
    position: relative;
    z-index: 1;
}
.gs-card .gs-card-name { font-size: .92rem; font-weight: 600; }
.gs-card .gs-card-game { font-size: .8rem; color: var(--ea-neutral-60); margin-top: .1rem; }
.gs-card .gs-game-img {
    width: 100px;
    height: 100px;
    border-radius: var(--ea-radius-lg);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    border: 1px solid var(--ea-border-subtle);
}
.gs-card .gs-game-img-fallback {
    background: var(--ea-blue-10, #f0edff);
    display: grid;
    place-items: center;
}
.gs-card .gs-game-img-fallback svg { width: 22px; height: 22px; color: var(--ea-blue); }

/* Stats row */
.gs-card .gs-card-fields {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.gs-card .gs-card-field { display: flex; flex-direction: column; }
.gs-card .gs-card-field-label {
    font-size: .66rem;
    font-weight: 600;
    color: var(--ea-neutral-40);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .1rem;
}
.gs-card .gs-card-field-value {
    font-size: .82rem;
    color: var(--ea-neutral-80);
    font-weight: 500;
}
.gs-card .gs-card-divider {
    width: 1px;
    background: var(--ea-border-subtle);
    align-self: stretch;
}

/* Footer */
.gs-card .gs-card-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .65rem;
    padding-top: .65rem;
    border-top: 1px solid var(--ea-border-subtle);
    position: relative;
    z-index: 1;
}
.gs-btn-report {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .65rem;
    border-radius: var(--ea-radius-xl);
    border: 1px solid var(--ea-border);
    background: var(--ea-white);
    font-family: var(--ea-font);
    font-size: .78rem;
    font-weight: 600;
    color: var(--ea-neutral-60);
    cursor: pointer;
    transition: all .12s;
}
.gs-btn-report:hover { background: var(--ea-blue-10); color: var(--ea-blue); border-color: var(--ea-blue-30); }
.gs-btn-report svg { width: 14px; height: 14px; }

/* Responsive: show cards, hide table wrapper */
@media (max-width: 1400px) {
    .gs-table-wrap { display: none; }
    .gs-card-list  { display: block; }
}
@media (max-width: 600px) {
    .gs-card .gs-card-fields { flex-direction: column; gap: .5rem; }
    .gs-card .gs-card-divider { width: 100%; height: 1px; }
    .gs-card-list .sm-card .sm-card-fields { flex-direction: column; gap: .5rem; }
    .gs-card-list .sm-card .sm-card-divider { width: 100%; height: 1px; }
}


/* ── Responsive ── */
@media (max-width: 1400px) {
    .bg-detail-layout { grid-template-columns: 1fr; }
    .bg-detail-sidebar { position: static; }
}
@media (max-width: 1600px) {
    .ad-table-wrap { display: none; }
    .ad-card-list  { display: block; }
}
@media (max-width: 900px) {
    .bg-why-grid { grid-template-columns: 1fr; }
    .ad-skeleton { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .bg-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .ad-info-grid { grid-template-columns: 1fr; }
    .ad-header { flex-direction: column; }
    .ad-card .ad-card-fields { grid-template-columns: 1fr; }
    .ad-info-fields { grid-template-columns: 1fr 1fr; }
    .ad-info-field:nth-child(3) { border-left: none; padding-left: 0; }
    .ad-info-field:nth-child(3),
    .ad-info-field:nth-child(4) { border-top: 1px solid var(--ea-border-subtle); }
}
@media (max-width: 400px) {
    .ad-info-fields { grid-template-columns: 1fr; }
    .ad-info-field + .ad-info-field { border-left: none; padding-left: 0; border-top: 1px solid var(--ea-border-subtle); }
}


/* ═══════════════════════════════════════════════════════════════════
   STUDENT DASHBOARD  (sd-*)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Welcome Hero ── */
.sd-hero {
    background: linear-gradient(135deg, var(--ea-blue), #593adc);
    border-radius: var(--ea-radius-xl);
    padding: 2rem 2.5rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
.sd-hero-triangles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.sd-hero-tri-orange {
    position: absolute; top: 5px; right: 0;
    width: 0; height: 0;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-right: 104px solid var(--ea-orange);
}
.sd-hero-tri-pink {
    position: absolute; bottom: -30px; right: 180px;
    width: 0; height: 0;
    border-top: 42px solid transparent;
    border-bottom: 42px solid transparent;
    border-right: 73px solid var(--ea-pink);
}
.sd-hero-tri-green {
    position: absolute; top: -25px; right: 380px;
    width: 0; height: 0;
    border-top: 72px solid transparent;
    border-bottom: 72px solid transparent;
    border-right: 125px solid var(--ea-green);
}
.sd-hero-tri-blue {
    position: absolute; bottom: -12px; right: 570px;
    width: 0; height: 0;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-right: 48px solid var(--ea-blue);
}
.sd-hero-tri-orange-sm {
    position: absolute; top: 8px; right: 700px;
    width: 0; height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 35px solid var(--ea-orange);
}
/* ── Triangle entry animations (play once on page load) ── */
@keyframes sd-hero-pop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes sd-hero-slide-right {
    0%   { transform: translateX(120px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
@keyframes sd-hero-fade-float {
    0%   { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes sd-hero-wipe {
    0%   { transform: scaleX(0); opacity: 0; }
    50%  { opacity: 1; }
    100% { transform: scaleX(1); opacity: 1; }
}
@keyframes sd-hero-scatter-right  { 0% { transform: translateX(140px);  opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes sd-hero-scatter-top    { 0% { transform: translateY(-100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes sd-hero-scatter-bottom { 0% { transform: translateY(80px);   opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes sd-hero-scatter-left   { 0% { transform: translateX(-100px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }

/* Variant: Pop-Scale (student dashboards) */
.sd-hero-anim-pop > .sd-hero-tri-orange    { animation: sd-hero-pop 0.45s cubic-bezier(.34,1.56,.64,1) 0.05s both; }
.sd-hero-anim-pop > .sd-hero-tri-green     { animation: sd-hero-pop 0.45s cubic-bezier(.34,1.56,.64,1) 0.18s both; }
.sd-hero-anim-pop > .sd-hero-tri-pink      { animation: sd-hero-pop 0.45s cubic-bezier(.34,1.56,.64,1) 0.30s both; }
.sd-hero-anim-pop > .sd-hero-tri-blue      { animation: sd-hero-pop 0.45s cubic-bezier(.34,1.56,.64,1) 0.40s both; }
.sd-hero-anim-pop > .sd-hero-tri-orange-sm { animation: sd-hero-pop 0.4s  cubic-bezier(.34,1.56,.64,1) 0.50s both; }

/* Variant: Slide-In from Right */
.sd-hero-anim-slide > .sd-hero-tri-orange    { animation: sd-hero-slide-right 0.6s cubic-bezier(.22,.61,.36,1) 0.05s both; }
.sd-hero-anim-slide > .sd-hero-tri-green     { animation: sd-hero-slide-right 0.6s cubic-bezier(.22,.61,.36,1) 0.15s both; }
.sd-hero-anim-slide > .sd-hero-tri-pink      { animation: sd-hero-slide-right 0.6s cubic-bezier(.22,.61,.36,1) 0.28s both; }
.sd-hero-anim-slide > .sd-hero-tri-blue      { animation: sd-hero-slide-right 0.6s cubic-bezier(.22,.61,.36,1) 0.38s both; }
.sd-hero-anim-slide > .sd-hero-tri-orange-sm { animation: sd-hero-slide-right 0.5s cubic-bezier(.22,.61,.36,1) 0.48s both; }

/* Variant: Fade-Float */
.sd-hero-anim-float > .sd-hero-tri-orange    { animation: sd-hero-fade-float 0.8s ease-out 0.08s both; }
.sd-hero-anim-float > .sd-hero-tri-green     { animation: sd-hero-fade-float 0.8s ease-out 0.20s both; }
.sd-hero-anim-float > .sd-hero-tri-pink      { animation: sd-hero-fade-float 0.8s ease-out 0.32s both; }
.sd-hero-anim-float > .sd-hero-tri-blue      { animation: sd-hero-fade-float 0.8s ease-out 0.42s both; }
.sd-hero-anim-float > .sd-hero-tri-orange-sm { animation: sd-hero-fade-float 0.7s ease-out 0.52s both; }

/* Variant: Scale-X Wipe */
.sd-hero-anim-wipe > .sd-hero-tri-orange    { transform-origin: right center; animation: sd-hero-wipe 0.5s ease-out 0.05s both; }
.sd-hero-anim-wipe > .sd-hero-tri-green     { transform-origin: right center; animation: sd-hero-wipe 0.5s ease-out 0.18s both; }
.sd-hero-anim-wipe > .sd-hero-tri-pink      { transform-origin: right center; animation: sd-hero-wipe 0.5s ease-out 0.30s both; }
.sd-hero-anim-wipe > .sd-hero-tri-blue      { transform-origin: right center; animation: sd-hero-wipe 0.5s ease-out 0.40s both; }
.sd-hero-anim-wipe > .sd-hero-tri-orange-sm { transform-origin: right center; animation: sd-hero-wipe 0.45s ease-out 0.50s both; }

/* Variant: Scatter */
.sd-hero-anim-scatter > .sd-hero-tri-orange    { animation: sd-hero-scatter-right  0.6s cubic-bezier(.22,.61,.36,1) 0.05s both; }
.sd-hero-anim-scatter > .sd-hero-tri-green     { animation: sd-hero-scatter-top    0.6s cubic-bezier(.22,.61,.36,1) 0.15s both; }
.sd-hero-anim-scatter > .sd-hero-tri-pink      { animation: sd-hero-scatter-bottom 0.6s cubic-bezier(.22,.61,.36,1) 0.28s both; }
.sd-hero-anim-scatter > .sd-hero-tri-blue      { animation: sd-hero-scatter-left   0.6s cubic-bezier(.22,.61,.36,1) 0.38s both; }
.sd-hero-anim-scatter > .sd-hero-tri-orange-sm { animation: sd-hero-scatter-top    0.5s cubic-bezier(.22,.61,.36,1) 0.48s both; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .sd-hero-triangles div { animation: none !important; }
}

.sd-hero-text { position: relative; z-index: 1; }
.sd-hero-title { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.35rem; }
.sd-hero-sub { font-size: 0.95rem; font-weight: 400; opacity: 0.85; }

/* ── Hero action controls (selects / filters inside the hero banner) ── */
.sd-hero .ea-page-header-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }

/* ── Stacked hero: actions wrap to a full-width row below the title ── */
.sd-hero.sd-hero-stacked { flex-wrap: wrap; overflow: visible; z-index: 2; }
.sd-hero.sd-hero-stacked .sd-hero-triangles { overflow: hidden; border-radius: inherit; }
.sd-hero.sd-hero-stacked .ea-page-header-actions { width: 100%; margin-left: 0; }
.sd-hero .ea-header-controls { width: auto; }
.sd-hero .ea-header-controls .selected-item,
.sd-hero .ea-header-controls .ea-dropdown-trigger {
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
    border-color: rgba(255,255,255,0.25);
    color: #fff;
}
.sd-hero .ea-header-controls .selected-item:hover,
.sd-hero .ea-header-controls .ea-dropdown-trigger:hover {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.4);
}
.sd-hero .ea-header-controls .ea-dropdown-chevron { color: rgba(255,255,255,0.7); }
.sd-hero .ea-header-controls .ea-dropdown-label { color: #fff; }

/* ── Learning Analytics controls inside the hero ── */
.sd-hero .la-period-pills {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.25);
    backdrop-filter: blur(6px);
}
.sd-hero .la-period-pill { color: rgba(255,255,255,0.7); }
.sd-hero .la-period-pill:hover { color: #fff; }
.sd-hero .la-period-pill.active { background: #fff; color: var(--ea-blue); }
.sd-hero .la-date-range {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.25);
    backdrop-filter: blur(6px);
    color: #fff;
}
.sd-hero .la-date-range:hover { border-color: rgba(255,255,255,0.5); }
.sd-hero .la-date-range svg { color: rgba(255,255,255,0.7); }

/* Date-range picker popup */
.la-date-range-wrap { position: relative; }
.la-date-popup {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    background: #fff;
    border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: var(--ea-radius-md);
    box-shadow: var(--ea-shadow-16);
    padding: 1rem;
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    z-index: 10002;
    color: #1e1e2d;
}
.la-date-popup label {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.25rem;
}
.la-date-popup input[type="date"] {
    font-family: var(--ea-font);
    font-size: 0.8225rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: var(--ea-radius-sm);
    color: #1e1e2d;
    background: #fff;
}
.la-date-popup input[type="date"]:focus {
    outline: none;
    border-color: var(--ea-blue);
    box-shadow: 0 0 0 2px rgba(77, 46, 253, 0.15);
}
.la-date-apply {
    font-family: var(--ea-font);
    font-size: 0.8225rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    background: var(--ea-blue);
    color: #fff;
    border: none;
    border-radius: var(--ea-radius-sm);
    cursor: pointer;
}
.la-date-apply:hover { opacity: 0.9; }

.sd-hero .la-filters .ea-dropdown--filter { width: 320px; }
.sd-hero .la-filters .ea-dropdown-trigger {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.25);
    backdrop-filter: blur(6px);
    color: #fff;
}
.sd-hero .la-filters .ea-dropdown-trigger:hover {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.4);
}
.sd-hero .la-filters .ea-dropdown-chevron { color: rgba(255,255,255,0.7); }
.sd-hero .la-filters .ea-dropdown-label { color: #fff; }
/* Dropdown menu: escape hero stacking context, reset inherited white text */
.sd-hero .ea-dropdown-menu {
    z-index: 10001;
    color: #1e1e2d;
    background: #fff;
}
.sd-hero .ea-dropdown-option { color: #1e1e2d !important; }
.sd-hero .ea-dropdown-option:hover { background: var(--ea-blue-10); color: #1e1e2d !important; }
.sd-hero .ea-dropdown-option.active { background: var(--ea-blue); color: #fff !important; }
.sd-hero .ea-btn-outline {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.25);
    backdrop-filter: blur(6px);
    color: #fff;
}
.sd-hero .ea-btn-outline:hover {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.4);
}

/* ── Browse Games hero wrapper (student) ── */
.sd-browse-hero { padding-bottom: 5rem; margin-bottom: 0; }

.sd-browse-hero-wrap .bg-filter-bar {
    position: relative; z-index: 2;
    margin-top: -3.5rem;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    margin-bottom: 1.25rem;
    background: transparent;
    padding: .5rem 0;
}
.sd-browse-hero-wrap .bg-search input {
    background: var(--stemwhite);
    border-color: rgba(255,255,255,.25);
    color: var(--ea-black);
}
.sd-browse-hero-wrap .bg-search input::placeholder { color: var(--ea-neutral-40); }
.sd-browse-hero-wrap .bg-search svg { color: var(--ea-neutral-40); }
.sd-browse-hero-wrap .bg-search input:focus {
    background: var(--stemwhite);
    border-color: var(--ea-blue-30);
    box-shadow: 0 0 0 3px rgba(255,255,255,.2);
}
.sd-browse-hero-wrap .bg-filter-chip {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.2);
    color: rgba(255,255,255,.85);
}
.sd-browse-hero-wrap .bg-filter-chip:hover {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.35);
    color: #fff;
}
.sd-browse-hero-wrap .bg-filter-chip.active {
    background: rgba(255,255,255,.92);
    border-color: transparent;
    color: var(--ea-blue);
}
.sd-browse-hero-wrap .bg-count { color: rgba(255,255,255,.7); }
    display: none;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--ea-radius-lg);
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    z-index: 1;
}
.sd-hero-badge svg { width: 16px; height: 16px; }

/* ── Metric Strip ── */
.sd-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.sd-metric {
    background: #fff;
    border-radius: var(--ea-radius-lg);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--ea-shadow-2);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: box-shadow 0.2s, transform 0.2s;
}
.sd-metric:hover { box-shadow: var(--ea-shadow-8); transform: translateY(-1px); }
.sd-metric-icon {
    width: 44px; height: 44px;
    border-radius: var(--ea-radius-md);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sd-metric-icon svg { width: 22px; height: 22px; }
.sd-metric-text { flex: 1; min-width: 0; }
.sd-metric-value { font-size: 1.75rem; font-weight: 700; color: var(--ea-black); line-height: 1.2; }
.sd-metric-label { font-size: .8225rem; color: var(--ea-neutral-40); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.4; }

/* ── Content Grid ── */
.sd-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.sd-span-full { grid-column: 1 / -1; }

/* ── Cards ── */
.sd-card {
    background: #fff;
    border-radius: var(--ea-radius-lg);
    box-shadow: var(--ea-shadow-2);
    overflow: hidden;
}
.sd-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--ea-neutral-6);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--stemblue);
}
.sd-card-header svg { width: 18px; height: 18px; color: var(--ea-blue); flex-shrink: 0; }
.sd-card-header-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.sd-card-body { padding: 1.25rem 1.5rem; }

/* ── Assignment Cards ── */
.sd-assignments-list { display: flex; flex-direction: column; gap: 0.75rem; }
.sd-assignment-card {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    padding: 0;
    border: 1px solid var(--ea-neutral-6);
    border-radius: var(--ea-radius-md);
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
    position: relative;
    background: var(--ea-white);
    min-height: 90px;
}
.sd-assignment-card:hover {
    border-color: var(--ea-blue-30);
    background: rgba(77, 46, 253, 0.02);
    box-shadow: var(--ea-shadow-4);
}
.sd-assignment-tri {
    position: absolute;
    top: -20px;
    right: -35px;
    width: 120px;
    height: 80px;
    opacity: .08;
    pointer-events: none;
    z-index: 0;
}
.sd-assignment-icon {
    width: 40px; height: 40px;
    border-radius: var(--ea-radius-sm);
    background: var(--ea-blue-10);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sd-assignment-icon svg { width: 20px; height: 20px; color: var(--ea-blue); }
.sd-assignment-cover {
    width: 110px;
    align-self: stretch;
    flex-shrink: 0;
    overflow: hidden;
    background: linear-gradient(135deg, #dbeafe 0%, #c4b5fd 100%);
    position: relative;
    z-index: 1;
}
.sd-assignment-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sd-assignment-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ea-neutral-40);
}
.sd-assignment-cover-placeholder svg { width: 24px; height: 24px; }
.sd-assignment-info { flex: 1; min-width: 0; padding: 1rem 0; position: relative; z-index: 1; }
.sd-assignment-title {
    font-weight: 600; font-size: 0.9rem; color: var(--ea-black);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sd-assignment-meta {
    display: flex; align-items: center; gap: 0.75rem;
    font-size: .8225rem; color: var(--ea-neutral-40); margin-top: 2px;
}
.sd-assignment-meta span { display: flex; align-items: center; gap: 4px; }
.sd-assignment-meta svg { width: 13px; height: 13px; }

/* Aligned date columns - fixed widths so they line up across rows regardless of game name length */
.sd-assignment-dates {
    display: flex; align-items: center; gap: 1.25rem;
    flex-shrink: 0;
    padding: 1rem 1.25rem;
    position: relative; z-index: 1;
}
.sd-assignment-date {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: .8225rem; color: var(--ea-neutral-50);
    white-space: nowrap;
}
.sd-assignment-date svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--ea-neutral-40); }
.sd-assignment-date-label { font-weight: 600; color: var(--ea-neutral-50); }
.sd-assignment-date-value { color: var(--ea-black); font-weight: 500; }
.sd-assignment-dates .sd-assignment-date:nth-child(1) { width: 140px; }
.sd-assignment-dates .sd-assignment-date:nth-child(2) { width: 220px; }

.sd-assignment-right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; padding: 1rem 1.25rem 1rem 0; position: relative; z-index: 1; }
@media (max-width: 900px) {
    .sd-assignment-dates { flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 0.5rem 1rem; }
    .sd-assignment-dates .sd-assignment-date:nth-child(1),
    .sd-assignment-dates .sd-assignment-date:nth-child(2) { width: auto; }
}
@media (max-width: 480px) { .sd-assignment-cover { width: 80px; } }

/* ── Status Tag ── */
.sd-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0.2rem 0.65rem; border-radius: 50px;
    font-size: .8225rem; font-weight: 600; white-space: nowrap;
}
.sd-tag-neutral   { background: var(--ea-neutral-6); color: var(--ea-neutral-60); }
.sd-tag-info      { background: rgba(77, 46, 253, 0.08); color: var(--ea-blue); }
.sd-tag-success   { background: rgba(43, 157, 94, 0.12); color: var(--ea-green-dark); }
.sd-tag-warning   { background: rgba(254, 146, 13, 0.12); color: var(--ea-orange); }
.sd-tag-danger    { background: rgba(220, 53, 69, 0.10); color: #dc3545; }
.sd-tag-submitted { background: rgba(240, 79, 205, 0.10); color: var(--ea-pink); }

/* ── View Button ── */
.sd-view-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: var(--ea-radius-xl);
    border: 1px solid var(--ea-neutral-10);
    background: #fff; color: var(--ea-neutral-60);
    cursor: pointer; transition: all 0.2s;
}
.sd-view-btn:hover { border-color: var(--ea-blue); color: var(--ea-blue); background: var(--ea-blue-10); }
.sd-view-btn svg { width: 16px; height: 16px; }

/* ── Session Row ── */
.sd-session-row {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--ea-neutral-4);
}
.sd-session-row:last-child { border-bottom: none; }
.sd-session-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sd-session-icon.completed    { background: rgba(43, 157, 94, 0.12); color: var(--ea-green-dark); }
.sd-session-icon.in-progress  { background: rgba(254, 146, 13, 0.12); color: var(--ea-orange); }
.sd-session-icon.not-finished { background: rgba(220, 53, 69, 0.10); color: #dc3545; }
.sd-session-icon.not-started  { background: var(--ea-neutral-6); color: var(--ea-neutral-40); }
.sd-session-icon svg { width: 16px; height: 16px; }
.sd-session-info { flex: 1; min-width: 0; }
.sd-session-game { font-weight: 600; font-size: .84rem; color: var(--ea-black); }
.sd-session-date { font-size: .8225rem; color: var(--ea-neutral-40); margin-top: 1px; }
.sd-session-right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.sd-session-duration {
    font-size: .8225rem; font-weight: 500; color: var(--ea-neutral-60);
    display: flex; align-items: center; gap: 4px;
}
.sd-session-duration svg { width: 13px; height: 13px; }

/* ── Filter Chips ── */
.sd-filter-bar { display: flex; align-items: center; gap: 0.5rem; }
.sd-filter-chip {
    padding: 0.3rem 0.85rem; border-radius: 50px;
    border: 1px solid var(--ea-neutral-10);
    background: #fff; color: var(--ea-neutral-60);
    font-family: var(--ea-font); font-size: .8225rem; font-weight: 500;
    cursor: pointer; transition: all 0.15s;
}
.sd-filter-chip:hover { border-color: var(--ea-blue-30); color: var(--ea-blue); }
.sd-filter-chip.active { background: var(--ea-blue); color: #fff; border-color: var(--ea-blue); }

/* ── Assignment Detail Modal ── */
.sd-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    animation: sdFadeIn 0.2s ease;
}
@keyframes sdFadeIn { from { opacity: 0; } to { opacity: 1; } }
.sd-modal {
    background: #fff;
    border-radius: var(--ea-radius-xl);
    box-shadow: var(--ea-shadow-16);
    width: 90%; max-width: 560px; max-height: 85vh;
    overflow-y: auto;
    animation: sdSlideUp 0.25s ease;
    position: relative;
}
@keyframes sdSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sd-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.5rem 1.75rem 1rem;
}
.sd-modal-title { font-size: 1.2rem; font-weight: 700; color: var(--ea-black); }
.sd-modal-close {
    width: 32px; height: 32px;
    border-radius: 50%; border: none;
    background: var(--ea-neutral-4); color: var(--ea-neutral-60);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.sd-modal-close:hover { background: var(--ea-neutral-10); color: var(--ea-black); }
.sd-modal-close svg { width: 16px; height: 16px; }
.sd-modal-body { padding: 0 1.75rem 1.5rem; }
.sd-modal-field { margin-bottom: 1.25rem; }
.sd-modal-label {
    font-size: .8225rem; font-weight: 600; color: var(--ea-neutral-40);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.35rem;
    line-height: 1.4;
}
.sd-modal-value { font-size: 0.9rem; color: var(--ea-neutral-80); line-height: 1.6; }
.sd-modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Grade highlight */
.sd-grade-card {
    display: flex; align-items: center; justify-content: center;
    padding: 1rem 1.25rem;
    border-radius: var(--ea-radius-md);
    background: rgba(43, 157, 94, 0.06);
    border: 1px solid rgba(43, 157, 94, 0.15);
    margin-bottom: 1.25rem;
}
.sd-grade-ring { width: 96px; height: 96px; flex-shrink: 0; }

/* Pending banner */
.sd-pending-banner {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: var(--ea-radius-md);
    background: rgba(254, 146, 13, 0.07);
    border: 1px solid rgba(254, 146, 13, 0.2);
    color: var(--ea-orange);
    font-size: 0.85rem; font-weight: 500;
    margin-bottom: 1.25rem;
}
.sd-pending-banner svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Modal actions */
.sd-modal-actions { display: flex; align-items: center; gap: 0.75rem; padding-top: 0.5rem; }

/* ─────────────────────────────────────────────────────────────
   Variant C - game-card style modal with stationery cluster motif
   ───────────────────────────────────────────────────────────── */
.sd-modal-c { overflow-x: hidden; }

/* Stationery cluster (mirrors AdminMetricCard / StationeryStatCard) */
.sd-modal-tri-layer {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 260px;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.sd-modal-tri-layer svg {
    position: absolute;
    right: 0; top: 0;
    width: 260px;
    height: 100%;
    display: block;
}

/* Header (C-variant) */
.sd-modal-header-c {
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem 1rem;
    position: relative;
    z-index: 1;
}
.sd-modal-thumb {
    width: 64px; height: 64px;
    border-radius: var(--ea-radius-md);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(77, 46, 253, 0.25);
    background: linear-gradient(135deg, var(--ea-blue), var(--ea-blue-light));
}
.sd-modal-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.sd-modal-thumb-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.sd-modal-thumb-placeholder svg { width: 28px; height: 28px; }
.sd-modal-header-text {
    flex: 1;
    min-width: 0;
    padding-right: 2.5rem;
}
.sd-modal-game {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.72rem; font-weight: 600;
    color: var(--ea-blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.3rem;
}
.sd-modal-game svg { width: 12px; height: 12px; }
.sd-modal-c .sd-modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ea-black);
}
.sd-modal-c .sd-modal-close {
    position: absolute;
    top: 1rem; right: 1rem;
    z-index: 2;
}

/* 4-cell info strip */
.sd-modal-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--ea-neutral-6);
    border-bottom: 1px solid var(--ea-neutral-6);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 1;
}
.sd-modal-cell {
    padding: 0.85rem 0.5rem;
    border-right: 1px solid var(--ea-neutral-6);
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    gap: 0.2rem;
    min-width: 0;
}
.sd-modal-cell:last-child { border-right: none; }
.sd-modal-cell-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(77, 46, 253, 0.1);
    color: var(--ea-blue);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 0.15rem;
}
.sd-modal-cell-icon svg { width: 14px; height: 14px; }
.sd-modal-cell-label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ea-neutral-50);
}
.sd-modal-cell-value {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ea-black);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.sd-modal-cell-value .sd-tag { font-size: 0.65rem; padding: 0.15rem 0.45rem; }

.sd-modal-c .sd-modal-body {
    position: relative;
    z-index: 1;
    padding: 1.25rem 1.5rem 1.5rem;
}

@media (max-width: 480px) {
    .sd-modal-strip { grid-template-columns: repeat(2, 1fr); }
    .sd-modal-cell:nth-child(2) { border-right: none; }
    .sd-modal-cell:nth-child(-n+2) { border-bottom: 1px solid var(--ea-neutral-6); }
    .sd-modal-tri-layer { width: 180px; }
    .sd-modal-tri-layer svg { width: 180px; }
    .sd-modal-header-text { padding-right: 2.25rem; }
}

/* ── Buttons ── */
.sd-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0.55rem 1.25rem;
    border-radius: var(--ea-radius-xl);
    font-family: var(--ea-font); font-size: .84rem; font-weight: 600;
    cursor: pointer; border: none; transition: all 0.2s;
}
.sd-btn-primary { background: var(--ea-green); color: var(--ea-blue); }
.sd-btn-primary:hover { background: #5dfca0; box-shadow: var(--ea-shadow-4); }
.sd-btn-secondary { background: var(--ea-neutral-4); color: var(--ea-neutral-80); border: 1px solid var(--ea-neutral-10); }
.sd-btn-secondary:hover { background: var(--ea-neutral-6); }
.sd-btn svg { width: 16px; height: 16px; }

/* ── Empty State ── */
.sd-empty { text-align: center; padding: 2.5rem 1rem; color: var(--ea-neutral-40); }
.sd-empty svg { width: 3rem; height: 3rem; margin-bottom: 0.75rem; opacity: 0.4; }
.sd-empty-title { font-weight: 600; font-size: 1rem; color: var(--ea-neutral-60); margin-bottom: 0.25rem; }
.sd-empty-text { font-size: 0.85rem; }

/* ── Pagination ── */
.sd-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 0.35rem; padding: 1rem 0 0.5rem;
}
.sd-page-btn {
    width: 32px; height: 32px;
    border-radius: var(--ea-radius-xl);
    border: 1px solid var(--ea-neutral-10);
    background: #fff; color: var(--ea-neutral-60);
    font-family: var(--ea-font); font-size: .82rem; font-weight: 500;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.sd-page-btn:hover { border-color: var(--ea-blue); color: var(--ea-blue); }
.sd-page-btn.active { background: var(--ea-blue); color: #fff; border-color: var(--ea-blue); }
.sd-page-btn:disabled { opacity: 0.35; cursor: default; }

/* ── View All link ── */
.sd-view-all {
    display: flex; align-items: center; gap: 4px;
    font-family: var(--ea-font); font-size: .8225rem; font-weight: 600;
    color: var(--ea-blue);
    cursor: pointer; background: none; border: none; padding: 0;
}
.sd-view-all:hover { text-decoration: underline; }
.sd-view-all svg { width: 14px; height: 14px; }

/* ── SD Responsive ── */
@media (max-width: 960px) {
    .sd-content-grid { grid-template-columns: 1fr; }
    .sd-hero { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
@media (max-width: 640px) {
    .sd-metrics { grid-template-columns: 1fr 1fr; }
    .sd-hero { padding: 1.5rem; }
    .sd-hero-title { font-size: 1.35rem; }
    .sd-modal-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .sd-metrics { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   GAME HISTORY - Player Card View  (gh-*)
   ════════════════════════════════════════════════════════════════ */

/* ── Banner Stats (inside sd-hero) ── */
.gh-banner-stats {
    position: relative; z-index: 1;
    display: flex; gap: 2rem;
    margin-left: auto;
}
.gh-banner-stat { text-align: center; }
.gh-banner-value {
    font-size: 1.75rem; font-weight: 900; line-height: 1;
    text-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.gh-banner-label {
    font-size: .68rem; font-weight: 600; opacity: .8;
    text-transform: uppercase; letter-spacing: .06em;
    margin-top: .15rem;
}

/* ── Session Card (horizontal) ── */
.gh-sessions { display: flex; flex-direction: column; gap: 1rem; }

.gh-session {
    display: flex;
    background: var(--ea-white);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-xl);
    overflow: hidden;
    position: relative;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
    transition: box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
}
.gh-session:hover {
    box-shadow: 0 6px 20px rgba(16, 24, 40, 0.10);
    transform: translateY(-2px);
}

/* ── Game Cover (Left) ── */
.gh-cover {
    width: 200px;
    min-height: 140px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    position: relative; overflow: hidden;
}
.gh-cover::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(transparent, rgba(0,0,0,.45));
}
.gh-cover-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 900; color: rgba(255,255,255,.6);
    text-align: center; padding: .5rem;
    z-index: 1;
}
.gh-cover-badge {
    position: absolute; top: .6rem; left: .6rem; z-index: 2;
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .2rem .5rem;
    border-radius: 999px;
    font-size: .65rem; font-weight: 700;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.gh-cover-badge svg { width: 10px; height: 10px; }
.gh-cover-badge.completed { background: rgba(122,253,181,.9); color: #064e3b; }
.gh-cover-badge.in-progress { background: rgba(254,146,13,.9); color: #fff; }
.gh-cover-badge.not-finished { background: rgba(239,68,68,.85); color: #fff; }
.gh-cover-badge.not-started { background: rgba(200,200,200,.85); color: #333; }

/* ── Session Body (Right) ── */
.gh-body {
    flex: 1;
    padding: 1.1rem 1.25rem;
    display: flex; flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.gh-game-title {
    font-size: .95rem; font-weight: 700;
    margin: 0 0 .1rem; color: var(--ea-black);
}
.gh-game-subtitle {
    font-size: .75rem; color: var(--ea-neutral-40);
    font-weight: 500; margin-bottom: .6rem;
}
.gh-meta {
    display: flex; gap: 1.25rem; flex-wrap: wrap;
    margin-bottom: .6rem;
}
.gh-meta-item {
    display: flex; align-items: center; gap: .3rem;
    font-size: .75rem; color: var(--ea-neutral-50);
}
.gh-meta-item svg { width: 13px; height: 13px; color: var(--ea-neutral-40); flex-shrink: 0; }
.gh-meta-item strong { font-weight: 600; color: var(--ea-black); }

/* ── Progress Bar ── */
.gh-progress-wrap {
    display: flex; align-items: center; gap: .65rem;
}
.gh-progress-bar {
    flex: 1; max-width: 180px;
    height: 7px; background: var(--ea-neutral-10);
    border-radius: 999px; overflow: hidden;
}
.gh-progress-fill {
    height: 100%; border-radius: 999px;
    transition: width 600ms ease;
}
.gh-progress-fill.complete { background: linear-gradient(90deg, #7AFDB5, #0d9f5f); }
.gh-progress-fill.partial  { background: linear-gradient(90deg, #FE920D, #f97316); }
.gh-progress-fill.low      { background: linear-gradient(90deg, #f87171, #ef4444); }
.gh-progress-fill.none     { background: var(--ea-neutral-20); }
.gh-progress-label { font-size: .75rem; font-weight: 700; }
.gh-progress-label.complete { color: var(--ea-green-dark); }
.gh-progress-label.partial  { color: var(--ea-orange); }
.gh-progress-label.low      { color: #ef4444; }
.gh-progress-label.none     { color: var(--ea-neutral-40); }

/* ── Session Aside (stationery triangles) ── */
.gh-aside {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 260px;
    pointer-events: none;
    overflow: hidden;
}
.gh-aside svg {
    position: absolute;
    right: 0; top: 0;
    width: 260px;
    height: 100%;
}

/* ── Empty State ── */
.gh-empty {
    text-align: center; padding: 3rem 2rem;
    background: var(--ea-white); border-radius: var(--ea-radius-xl);
    border: 2px dashed var(--ea-neutral-10);
}
.gh-empty svg { width: 64px; height: 64px; color: var(--ea-blue-30); margin-bottom: .75rem; }
.gh-empty h3 { font-size: 1.05rem; font-weight: 700; color: var(--ea-black); margin: 0 0 .25rem; }
.gh-empty p { font-size: .85rem; color: var(--ea-neutral-40); margin: 0; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .gh-banner-stats { flex-wrap: wrap; justify-content: center; gap: 1rem; margin-left: 0; }
    .gh-session { flex-direction: column; }
    .gh-cover { width: 100%; min-height: 120px; }
    .gh-aside { display: none; }
}


/* ════════════════════════════════════════════════════════════════
   EMBEDDED GAME PLAYER  (gp-*)
   ════════════════════════════════════════════════════════════════ */

/* ── Toolbar above the player ── */
.gp-toolbar {
    display: none;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: var(--ea-white);
    border: 1px solid var(--ea-neutral-90);
    border-radius: var(--ea-radius-12);
    margin-bottom: 1rem;
    box-shadow: var(--ea-shadow-2);
}
.gp-toolbar-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--ea-neutral-80);
    border-radius: var(--ea-radius-8);
    background: var(--ea-white);
    color: var(--ea-neutral-30);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.gp-toolbar-back:hover {
    background: var(--ea-neutral-95);
    color: var(--ea-black);
    border-color: var(--ea-neutral-60);
}
.gp-toolbar-back svg { width: 16px; height: 16px; }
.gp-toolbar-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ea-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gp-toolbar-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(77, 46, 253, 0.08);
    color: var(--ea-blue);
    font-size: .8225rem;
    font-weight: 600;
}
.gp-toolbar-badge svg { width: 14px; height: 14px; }

/* ── Exit Game Confirmation Modal ── */
.gp-exit-modal { max-width: 420px; }
.gp-exit-msg {
    color: var(--ea-neutral-60);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}
.gp-exit-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}
.gp-exit-btn {
    padding: 0.55rem 1.25rem;
    border-radius: var(--ea-radius-xl);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}
.gp-exit-btn--cancel {
    background: var(--ea-neutral-4);
    color: var(--ea-neutral-60);
}
.gp-exit-btn--cancel:hover {
    background: var(--ea-neutral-10);
    color: var(--ea-black);
}
.gp-exit-btn--confirm {
    background: #e74c3c;
    color: #fff;
}
.gp-exit-btn--confirm:hover {
    background: #c0392b;
}

/* ── Embedded override for .gameViewContainer ── */
.gv-embedded {
    width: 100% !important;
    border-radius: var(--ea-radius-12);
    overflow: hidden;
}
.gv-embedded .gameViewer {
}

/* ── When game viewer is embedded inside .ea-content ── */
.ea-content:has(.gv-embedded) {
    padding: 0;
    background-color: var(--stemblue-10);
}

/* ═══════════════════════════════════════════════════════════════
   PARENT DASHBOARD  (pd-*)
   Family Portal - reuses DashboardShell / ea-* layout tokens
   ═══════════════════════════════════════════════════════════════ */

/* ── Accent ── */
:root {
    --pd-teal: #0ea5a0;
    --pd-teal-bg: rgba(14, 165, 160, 0.10);
}

/* ── Metrics strip ── */
.pd-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.pd-metric {
    background: #fff;
    border-radius: var(--ea-radius-lg);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--ea-shadow-2);
    transition: box-shadow 0.2s, transform 0.2s;
}
.pd-metric:hover {
    box-shadow: var(--ea-shadow-8);
    transform: translateY(-1px);
}
.pd-metric-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pd-metric-icon svg { width: 22px; height: 22px; }
.pd-metric-value { font-size: 1.75rem; font-weight: 700; color: var(--ea-black); line-height: 1.2; }
.pd-metric-label { font-size: .8225rem; color: var(--ea-neutral-40); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.4; }

/* ── Content grid ── */
.pd-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.pd-span-full { grid-column: 1 / -1; }

/* ── Cards ── */
.pd-card {
    background: #fff;
    border-radius: var(--ea-radius-lg);
    box-shadow: var(--ea-shadow-2);
    overflow: hidden;
}
.pd-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--ea-neutral-6);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ea-black);
}
.pd-card-header svg { width: 18px; height: 18px; color: var(--ea-blue); flex-shrink: 0; }
.pd-card-header-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.pd-card-body { padding: 1.25rem 1.5rem; }

.pd-view-all {
    font-size: .8225rem;
    color: var(--ea-blue);
    cursor: pointer;
    font-weight: 600;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.pd-view-all:hover { text-decoration: underline; }
.pd-view-all svg { width: 14px; height: 14px; }

/* ── Empty state ── */
.pd-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--ea-neutral-40);
}
.pd-empty svg { width: 3rem; height: 3rem; margin-bottom: 0.75rem; opacity: 0.4; }
.pd-empty-title { font-weight: 600; font-size: 1rem; margin-bottom: 0.25rem; color: var(--ea-neutral-60); }
.pd-empty-text { font-size: 0.85rem; }

/* ── Player rows (overview card) ── */
.pd-player-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--ea-border);
}
.pd-player-row:last-child { border-bottom: none; }
.pd-player-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--pd-teal-bg);
    color: var(--pd-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8225rem;
    flex-shrink: 0;
}
.pd-player-name { font-weight: 600; font-size: 0.9rem; color: var(--ea-black); }
.pd-player-email { font-size: .8225rem; color: var(--ea-neutral-40); margin-top: 2px; }
.pd-player-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

/* ── Mini player cards (overview 2-up grid) ── */
.pd-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    padding: 1rem 1.25rem;
}
.pd-mini {
    border: 1px solid var(--ea-border-subtle);
    border-radius: 12px;
    padding: .85rem;
    position: relative;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    cursor: pointer;
    transition: all .12s;
}
.pd-mini:hover { box-shadow: var(--ea-shadow-8); transform: translateY(-1px); }
.pd-mini-tri {
    position: absolute; top: -20px; right: -35px;
    width: 120px; height: 80px;
    opacity: .08; pointer-events: none;
}
.pd-mini-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.pd-mini-avatar {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .7rem; color: #fff; flex-shrink: 0;
}
.pd-mini-name { font-weight: 600; font-size: .85rem; }
.pd-mini-game {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .15rem .55rem;
    border-radius: 6px;
    background: rgba(77, 46, 253, 0.06);
    font-size: .72rem; color: var(--stempurple); font-weight: 500;
    margin-bottom: .4rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pd-mini-game svg { width: 11px; height: 11px; flex-shrink: 0; }
.pd-mini-game.pd-mini-game-empty { opacity: .5; }
.pd-mini-bottom { display: flex; align-items: center; justify-content: space-between; }
.pd-mini-stat { font-size: .72rem; color: var(--ea-neutral-40); }
@media (max-width: 480px) { .pd-mini-grid { grid-template-columns: 1fr; } }

/* ── Quick action mini cards (overview 2-up grid) ── */
.pd-qa-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    padding: 1rem 1.25rem;
}
.pd-qa {
    border: 1px solid var(--ea-border-subtle);
    border-radius: 12px;
    padding: .85rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all .12s;
}
.pd-qa:hover { box-shadow: var(--ea-shadow-8); transform: translateY(-1px); }
.pd-qa.pd-qa-disabled { opacity: .5; pointer-events: none; }
.pd-qa-tri {
    position: absolute; top: -20px; right: -35px;
    width: 120px; height: 80px;
    opacity: .08; pointer-events: none;
}
.pd-qa-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: .5rem;
}
.pd-qa-icon svg { width: 18px; height: 18px; }
.pd-qa-label { font-weight: 600; font-size: .85rem; margin-bottom: .15rem; }
.pd-qa-desc { font-size: .72rem; color: var(--ea-neutral-40); line-height: 1.4; }
@media (max-width: 480px) { .pd-qa-grid { grid-template-columns: 1fr; } }

/* ── Session rows (game history) ── */
.pd-session-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--ea-border);
}
.pd-session-row:last-child { border-bottom: none; }
.pd-session-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pd-session-icon svg { width: 16px; height: 16px; }
.pd-session-icon.completed { background: rgba(43, 157, 94, 0.12); color: var(--ea-green-dark); }
.pd-session-icon.in-progress { background: rgba(254, 146, 13, 0.12); color: var(--ea-orange); }
.pd-session-icon.not-finished { background: rgba(231, 76, 60, 0.12); color: var(--ea-red); }
.pd-session-icon.not-started { background: var(--ea-body-bg); color: var(--ea-text-muted); }
.pd-session-game { font-weight: 600; font-size: 0.85rem; }
.pd-session-meta { font-size: .8225rem; color: var(--ea-text-muted); }
.pd-session-right { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.pd-session-duration {
    font-size: .8225rem;
    color: var(--ea-text-muted);
    display: flex;
    align-items: center;
    gap: .25rem;
}
.pd-session-duration svg { width: 13px; height: 13px; }

/* ── Wide banner session cards (Option C) ── */
.rs-c-list { display: flex; flex-direction: column; gap: .65rem; }
.rs-c-item {
    display: flex;
    align-items: stretch;
    gap: .85rem;
    border: 1px solid var(--ea-border-subtle);
    border-radius: 12px;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    background: var(--ea-white);
    cursor: pointer;
    transition: all .12s;
    position: relative;
}
.rs-c-item:hover { box-shadow: var(--ea-shadow-8); transform: translateY(-1px); }
.rs-c-tri {
    position: absolute; top: -20px; right: -35px;
    width: 120px; height: 80px;
    opacity: .08; pointer-events: none;
}
.rs-c-cover {
    width: 110px;
    min-height: 80px;
    flex-shrink: 0;
    overflow: hidden;
}
.rs-c-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rs-c-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #dbeafe 0%, #c4b5fd 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ea-neutral-40);
}
.rs-c-placeholder svg { width: 24px; height: 24px; }
.rs-c-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .65rem .75rem .65rem 0;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.rs-c-game { font-weight: 600; font-size: .88rem; color: var(--ea-black); margin-bottom: 4px; }
.rs-c-player { font-size: .8rem; color: var(--ea-text-muted); margin-bottom: 6px; }
.rs-c-footer { display: flex; align-items: center; gap: .75rem; }
.rs-c-date { font-size: .78rem; color: var(--ea-neutral-40); }
.rs-c-duration {
    font-size: .78rem;
    color: var(--ea-neutral-40);
    display: flex;
    align-items: center;
    gap: .2rem;
}
.rs-c-duration svg { width: 12px; height: 12px; }
@media (max-width: 480px) { .rs-c-cover { width: 80px; } }

/* ── Tags ── */
.pd-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.2rem 0.65rem;
    border-radius: 50px;
    font-size: .8225rem;
    font-weight: 600;
    white-space: nowrap;
}
.pd-tag-success { background: rgba(43, 157, 94, 0.12); color: var(--ea-green-dark); }
.pd-tag-warning { background: rgba(254, 146, 13, 0.12); color: var(--ea-orange); }
.pd-tag-info { background: var(--stemblue-10); color: var(--ea-blue); }
.pd-tag-neutral { background: var(--ea-body-bg); color: var(--ea-text-muted); }
.pd-tag-danger { background: rgba(231, 76, 60, 0.12); color: var(--ea-red); }

/* ── Player management table ── */
.pd-table { width: 100%; }
.pd-table-header {
    display: flex;
    align-items: center;
    padding: .6rem 1rem;
    background: var(--ea-body-bg);
    border-radius: 8px;
    margin-bottom: .5rem;
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pd-table-row {
    display: flex;
    align-items: center;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--ea-border);
    font-size: 0.9rem;
    transition: background var(--ea-transition);
}
.pd-table-row:hover { background: rgba(77, 46, 253, 0.03); }
.pd-table-row:last-child { border-bottom: none; }
.pd-col-name { width: 20%; display: flex; align-items: center; gap: .65rem; }
.pd-col-email { width: 25%; color: var(--ea-text-muted); font-size: 0.85rem; }
.pd-col-age { width: 10%; text-align: center; }
.pd-col-status { width: 15%; }
.pd-col-created { width: 15%; font-size: .8225rem; color: var(--ea-text-muted); }
.pd-col-actions { width: 15%; display: flex; justify-content: flex-end; gap: .35rem; }
.pd-action-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--ea-radius-xl);
    border: 1px solid var(--ea-border);
    background: var(--ea-card-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ea-text-muted);
    transition: all var(--ea-transition);
}
.pd-action-btn:hover { border-color: var(--ea-blue); color: var(--ea-blue); background: var(--stemblue-10); }
.pd-action-btn.danger:hover { border-color: var(--ea-red); color: var(--ea-red); background: rgba(231, 76, 60, .08); }
.pd-action-btn svg { width: 14px; height: 14px; }

/* ── Info banner ── */
.pd-info-banner {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    background: var(--stemblue-10);
    font-size: .82rem;
    line-height: 1.6;
    align-items: flex-start;
}
.pd-info-banner > svg { width: 20px; height: 20px; color: var(--ea-blue); flex-shrink: 0; margin-top: .15rem; }

/* ── Pagination ── */
.pd-pagination { display: flex; justify-content: center; gap: .35rem; padding-top: 1rem; }
.pd-page-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--ea-radius-xl);
    border: 1px solid var(--ea-border);
    background: var(--ea-card-bg);
    cursor: pointer;
    font-size: .8225rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ea-text-muted);
    transition: all var(--ea-transition);
}
.pd-page-btn:hover { border-color: var(--ea-blue); color: var(--ea-blue); }
.pd-page-btn.active { background: var(--ea-blue); color: #fff; border-color: var(--ea-blue); }
.pd-page-btn:disabled { opacity: .4; cursor: default; }

/* ── Game filter ── */
.pd-filter-bar { display: flex; gap: .35rem; }
.pd-filter-chip {
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .8225rem;
    font-weight: 600;
    border: 1px solid var(--ea-border);
    background: var(--ea-card-bg);
    color: var(--ea-text-muted);
    cursor: pointer;
    transition: all var(--ea-transition);
}
.pd-filter-chip.active { background: var(--ea-blue); color: #fff; border-color: var(--ea-blue); }
.pd-filter-chip:hover:not(.active) { border-color: var(--ea-blue); color: var(--ea-blue); }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .pd-content-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════
   ADMIN DASHBOARD (ad-* prefix)
   Styles for the Admin dashboard view - Blog, User, Beta panels.
   Uses shared design tokens from :root above.
   ═══════════════════════════════════════════════════════════════ */

/* ── Admin accent colour ── */
:root {
    --ad-accent:     #7c3aed;
    --ad-accent-90:  #8b5cf6;
    --ad-accent-50:  #a78bfa;
    --ad-accent-10:  #ede9fe;
    --ad-accent-bg:  rgba(124, 58, 237, .06);

    --ad-red:        #ef4444;
    --ad-red-bg:     rgba(239, 68, 68, .08);
    --ad-green:      #22c55e;
    --ad-green-bg:   rgba(34, 197, 94, .08);
    --ad-amber:      #f59e0b;
    --ad-amber-bg:   rgba(245, 158, 11, .08);
    --ad-blue:       #3b82f6;
    --ad-blue-bg:    rgba(59, 130, 246, .08);
}

/* ── Filter / search bar ── */
.ad-filter-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.ad-search-input {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1;
    min-width: 200px;
    padding: .55rem .85rem;
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-xl);
    background: var(--ea-surface-card);
    transition: border-color var(--ea-transition);
}
.ad-search-input svg { flex-shrink: 0; color: var(--ea-neutral-40); }
.ad-search-input input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: .82rem;
    font-family: var(--ea-font);
    color: var(--ea-black);
    padding: 0;
    min-width: 0;
}
.ad-search-input input::placeholder { color: var(--ea-neutral-40); }
.ad-search-input:focus-within { border-color: var(--ad-accent); box-shadow: 0 0 0 3px var(--ad-accent-10); }

/* ── Data table ── */
.ad-table {
    width: 100%;
    border: 1px solid var(--ea-border-subtle);
    border-radius: var(--ea-radius-md);
    overflow: hidden;
}
.ad-table-header {
    display: flex;
    align-items: center;
    padding: .6rem 1rem;
    background: var(--stemblue);
    font-size: .8225rem;
    font-weight: 700;
    color: var(--stemwhite);
    text-transform: uppercase;
    letter-spacing: .04em;
}
/* Reset data-column colors inside blue header so text stays white */
.ad-table-header > [class*="ad-col"] {
    box-sizing: border-box;
    color: var(--stemwhite) !important;
    overflow: visible;
    text-overflow: clip;
}
.ad-table-row {
    display: flex;
    align-items: center;
    padding: .75rem 1rem;
    background: var(--ea-surface-card);
    border-bottom: 1px solid var(--ea-border-subtle);
    font-size: .82rem;
    transition: background var(--ea-transition);
}
.ad-table-row:hover { background: var(--ad-accent-bg); }
.ad-table-row:last-child { border-bottom: none; }

/* Blog columns */
.ad-col-title { width: 30%; font-weight: 600; color: var(--ea-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }
.ad-col-author { width: 15%; color: var(--ea-neutral-60); font-size: .8225rem; }
.ad-col-category { width: 15%; }
.ad-col-status { width: 12%; }
.ad-col-date { width: 15%; font-size: .8225rem; color: var(--ea-neutral-60); }
.ad-col-actions { width: 13%; display: flex; justify-content: flex-end; gap: .35rem; }

/* User columns */
.ad-col-name { width: 20%; display: flex; align-items: center; gap: .65rem; font-weight: 600; color: var(--ea-black); }
.ad-col-email { width: 24%; color: var(--ea-neutral-60); font-size: .8225rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; }
.ad-col-role { width: 12%; }
.ad-col-verified { width: 10%; text-align: center; }
.ad-col-user-status { width: 12%; }
.ad-col-joined { width: 12%; font-size: .8225rem; color: var(--ea-neutral-60); }
.ad-col-user-actions { width: 20%; display: flex; justify-content: flex-end; gap: .35rem; }

/* Beta columns */
.ad-col-beta-name { width: 16%; display: flex; align-items: center; gap: .65rem; font-weight: 600; color: var(--ea-black); }
.ad-col-beta-email { width: 20%; color: var(--ea-neutral-60); font-size: .8225rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; }
.ad-col-beta-roles { width: 14%; }
.ad-col-beta-interests { width: 14%; }
.ad-col-beta-status { width: 10%; }
.ad-col-beta-date { width: 12%; font-size: .8225rem; color: var(--ea-neutral-60); }
.ad-col-beta-actions { width: 14%; display: flex; justify-content: flex-end; gap: .35rem; }

/* Vacancies table — wider title, dedicated applicants column */
.vac-table .ad-col-beta-name { width: 30%; }
.vac-table .ad-col-beta-roles { width: 22%; }
.vac-table .ad-col-beta-interests { width: 12%; }
.vac-table .ad-col-beta-date { width: 14%; }
.ad-col-vac-applicants { width: 12%; text-align: center; justify-content: center; }
.vac-table .ad-col-beta-actions { width: 10%; }
.ad-applicant-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 .5rem;
    border-radius: 999px;
    background: var(--ad-accent-bg);
    color: var(--ea-blue);
    font-weight: 700;
    font-size: .8rem;
}

/* ── Newsletter columns ── */
.ad-col-nl-subject { width: 30%; font-weight: 500; }
.ad-col-nl-status { width: 10%; }
.ad-col-nl-audience { width: 12%; font-size: .8225rem; color: var(--ea-neutral-60); }
.ad-col-nl-metric { width: 8%; font-size: .8225rem; font-weight: 600; color: var(--ea-neutral-80); text-align: center; }
.ad-col-nl-date { width: 12%; font-size: .8225rem; color: var(--ea-neutral-60); }
.ad-col-nl-actions { width: 20%; display: flex; justify-content: flex-end; gap: .35rem; }

/* ── Tab bar ── */
.ad-tab-bar {
    display: flex;
    gap: .25rem;
    border-bottom: 2px solid var(--ea-neutral-6);
    margin-bottom: 1.5rem;
    padding: 0;
}
.ad-tab {
    padding: .65rem 1.15rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ea-neutral-40);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .45rem;
    transition: color .15s, border-color .15s;
}
.ad-tab:hover { color: var(--ea-neutral-80); }
.ad-tab.active {
    color: #4D2EFD;
    border-bottom-color: #4D2EFD;
}
.ad-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    background: var(--ea-neutral-6);
    color: var(--ea-neutral-50);
}
.ad-tab.active .ad-tab-badge {
    background: rgba(77, 46, 253, .1);
    color: #4D2EFD;
}

/* ── Side panel (subscriber detail, etc.) ── */
.ad-side-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.3);
    z-index: 500;
}
.ad-side-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0,0,0,.12);
    z-index: 501;
    display: flex;
    flex-direction: column;
    animation: slideInRight .2s ease-out;
}
@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
.ad-side-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--ea-neutral-6);
}
.ad-side-panel-header h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.ad-side-panel-body { flex: 1; overflow-y: auto; padding: 1.5rem; }

/* Newsletter-specific detail helpers */
.nl-subscriber-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4D2EFD 0%, #7C5CFE 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 auto 1rem;
}
.nl-detail-rows { display: flex; flex-direction: column; gap: .75rem; }
.nl-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 0;
    border-bottom: 1px solid var(--ea-neutral-4);
    font-size: .85rem;
}
.nl-detail-label { color: var(--ea-neutral-40); font-weight: 500; }

/* ── Badges ── */
.ad-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.5;
    border: 1px solid transparent;
}
.ad-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ad-badge-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.ad-badge-success::before { background: #10b981; }
.ad-badge-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.ad-badge-warning::before { background: #f59e0b; }
.ad-badge-muted { background: var(--ea-neutral-6); color: var(--ea-neutral-60); border-color: var(--ea-neutral-10, #e5e5ea); }
.ad-badge-muted::before { background: var(--ea-neutral-40); }
.ad-badge-danger { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
.ad-badge-danger::before { background: #ef4444; }
.ad-badge-info { background: var(--ea-blue-10); color: var(--ea-blue); border-color: var(--ea-blue-30, rgba(77,46,253,.3)); }
.ad-badge-info::before { background: var(--ea-blue); }
.ad-badge-accent { background: var(--ad-accent-10); color: var(--ad-accent); border-color: transparent; }
.ad-badge-accent::before { background: var(--ad-accent); }

/* ── Icon buttons ── */
.ad-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--ea-radius-xl);
    border: 1px solid var(--ea-border);
    background: var(--ea-surface-card);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ea-neutral-60);
    transition: all var(--ea-transition);
}
.ad-icon-btn svg { width: 14px; height: 14px; }
.ad-icon-btn:hover { border-color: var(--ad-accent); color: var(--ad-accent); background: var(--ad-accent-10); }
.ad-icon-btn-danger:hover { border-color: var(--ad-red); color: var(--ad-red); background: var(--ad-red-bg); }
.ad-icon-btn-success:hover { border-color: var(--ad-green); color: var(--ad-green); background: var(--ad-green-bg); }
.ad-icon-btn-warning { color: #f57c00; }
.ad-icon-btn-warning:hover { border-color: #f57c00; color: #f57c00; background: rgba(255,152,0,.1); }

/* ── Pagination ── */
.ad-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    font-size: .8225rem;
    color: var(--ea-neutral-60);
}
.ad-pagination-info { font-size: .8225rem; }
.ad-pagination-controls { display: flex; gap: .35rem; }
.ad-page-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--ea-radius-xl);
    border: 1px solid var(--ea-border);
    background: var(--ea-surface-card);
    cursor: pointer;
    font-size: .8225rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ea-neutral-60);
    transition: all var(--ea-transition);
}
.ad-page-btn:hover { border-color: var(--ad-accent); color: var(--ad-accent); }
.ad-page-btn.active { background: var(--ad-accent); color: #fff; border-color: var(--ad-accent); }
.ad-page-btn:disabled { opacity: .4; cursor: default; pointer-events: none; }

/* ── Activity feed (overview) ── */
.ad-activity-feed { display: flex; flex-direction: column; }
.ad-activity-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--ea-border-subtle);
}
.ad-activity-item:last-child { border-bottom: none; }
.ad-activity-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--ea-radius-sm);
    background: var(--ad-accent-10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ad-activity-icon svg { width: 14px; height: 14px; color: var(--ad-accent); }
.ad-activity-body,
.ad-activity-content { flex: 1; min-width: 0; }
.ad-activity-title {
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-black);
    margin-bottom: .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ad-activity-meta { font-size: .8225rem; color: var(--ea-neutral-40); }
.ad-activity-link {
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ad-accent);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    transition: color var(--ea-transition);
}
.ad-activity-link:hover { color: var(--ad-accent-90); text-decoration: underline; }

/* ── System status (overview) ── */
.ad-status-grid { display: flex; flex-direction: column; gap: .5rem; }
.ad-status-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 0;
    border-bottom: 1px solid var(--ea-border-subtle);
    font-size: .8225rem;
}
.ad-status-item:last-child { border-bottom: none; }
.ad-status-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 500;
    color: var(--ea-black);
}
.ad-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ad-status-dot.green { background: var(--ad-green); }
.ad-status-dot.amber { background: var(--ad-amber); }
.ad-status-dot.red { background: var(--ad-red); }
.ad-status-value { font-size: .8225rem; color: var(--ea-neutral-60); }

/* ── Detail / modal panels ── */
.ad-detail-modal {
    max-width: 680px;
    padding: 1.5rem;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ad-detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--ea-border-subtle);
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}
.ad-detail-avatar {
    width: 50px;
    height: 50px;
    border-radius: var(--ea-radius-md);
    background: var(--ad-accent-10);
    color: var(--ad-accent);
    font-weight: 700;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ad-detail-title-group { flex: 1; min-width: 0; }
.ad-detail-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ea-black);
    margin-bottom: .15rem;
}
.ad-detail-subtitle { font-size: .8225rem; color: var(--ea-neutral-40); }
.ad-detail-body { display: flex; flex-direction: column; gap: 1.25rem; overflow-y: auto; flex: 1; min-height: 0; }
.ad-detail-section {
    border-top: 1px solid var(--ea-border-subtle);
    padding-top: 1rem;
}
.ad-detail-section:first-child { border-top: none; padding-top: 0; }
.ad-detail-section-title {
    font-size: .8225rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ea-neutral-40);
    margin-bottom: .75rem;
}
.ad-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.ad-detail-item {}
.ad-detail-label {
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-neutral-40);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: .2rem;
}
.ad-detail-value {
    font-size: .82rem;
    color: var(--ea-black);
    word-break: break-word;
}
.ad-detail-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ea-border-subtle);
    flex-shrink: 0;
}

/* ── Warning banner (disable user) ── */
.ad-warning-banner {
    display: flex;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: var(--ea-radius-sm);
    background: var(--ad-amber-bg);
    font-size: .8225rem;
    line-height: 1.5;
    color: #92400e;
    align-items: flex-start;
}
.ad-warning-banner svg { width: 18px; height: 18px; color: var(--ad-amber); flex-shrink: 0; margin-top: .1rem; }

/* ── Danger banner (delete user) ── */
.ad-danger-banner {
    display: flex;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: var(--ea-radius-sm);
    background: var(--ad-red-bg);
    font-size: .8225rem;
    line-height: 1.5;
    color: #991b1b;
    align-items: flex-start;
}
.ad-danger-banner svg { width: 18px; height: 18px; color: var(--ad-red); flex-shrink: 0; margin-top: .1rem; }
.ad-danger-banner ul { margin: .35rem 0; padding-left: 1.2rem; }
.ad-danger-banner li { margin-bottom: .15rem; }

/* ── Role editing (user detail modal) ── */
.as-label-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.as-btn-inline {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .5rem;
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ad-accent, #6366f1);
    background: transparent;
    border: 1px solid var(--ad-accent, #6366f1);
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.as-btn-inline:hover {
    background: var(--ad-accent, #6366f1);
    color: #fff;
}
.as-btn-inline svg { flex-shrink: 0; }
.as-role-edit-actions {
    display: flex;
    gap: .5rem;
    margin-top: .75rem;
}
.as-btn-sm {
    padding: .35rem .85rem;
    font-size: .8225rem;
}
.ad-inline-error {
    font-size: .8225rem;
    color: var(--ad-red, #ef4444);
    margin-bottom: .35rem;
}

/* ── Form elements inside modals ── */
.ad-form-group { display: flex; flex-direction: column; gap: .35rem; }
.ad-form-group label {
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-neutral-60);
}
.ad-textarea {
    width: 100%;
    min-height: 80px;
    padding: .6rem .85rem;
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-xl);
    font-family: var(--ea-font);
    font-size: .82rem;
    resize: vertical;
    outline: none;
    transition: border-color var(--ea-transition);
}
.ad-textarea:focus { border-color: var(--ad-accent); box-shadow: 0 0 0 3px var(--ad-accent-10); }

/* ── Tags ── */
.ad-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.ad-tag {
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 500;
    background: var(--ea-neutral-6);
    color: var(--ea-neutral-60);
}
.ad-tag-accent { background: var(--ad-accent-10); color: var(--ad-accent); }
.ad-tag-more {
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    background: var(--ea-neutral-10);
    color: var(--ea-neutral-60);
}

/* ── Monospace (IDs, codes) ── */
.ad-monospace {
    font-family: "SF Mono", "Cascadia Code", "Fira Code", monospace;
    font-size: .8225rem;
    background: var(--ea-neutral-4);
    padding: .1rem .35rem;
    border-radius: 3px;
    color: var(--ea-neutral-80);
}

/* ── Buttons ── */
.ad-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: var(--ea-radius-xl);
    font-family: var(--ea-font);
    font-size: .8225rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ea-transition);
    border: 1px solid var(--ea-border);
    background: var(--ea-surface-card);
    color: var(--ea-black);
}
.ad-btn:hover { border-color: var(--ad-accent); color: var(--ad-accent); }
.ad-btn svg { width: 14px; height: 14px; }

.ad-btn-accent {
    background: var(--ad-accent);
    color: #fff;
    border-color: var(--ad-accent);
}
.ad-btn-accent:hover { background: var(--ad-accent-90); border-color: var(--ad-accent-90); color: #fff; }

.ad-btn-danger {
    border-color: var(--ad-red);
    color: var(--ad-red);
    background: transparent;
}
.ad-btn-danger:hover { background: var(--ad-red-bg); }

.ad-btn-danger-filled {
    background: var(--ad-red);
    color: #fff;
    border-color: var(--ad-red);
}
.ad-btn-danger-filled:hover { background: #dc2626; border-color: #dc2626; color: #fff; }

.ad-btn-success {
    border-color: var(--ad-green);
    color: var(--ad-green);
    background: transparent;
}
.ad-btn-success:hover { background: var(--ad-green-bg); }

.ad-btn-success-filled {
    background: var(--ad-green);
    color: #fff;
    border-color: var(--ad-green);
}
.ad-btn-success-filled:hover { background: #16a34a; border-color: #16a34a; color: #fff; }

.ad-btn:disabled, .ad-btn-accent:disabled, .ad-btn-danger-filled:disabled, .ad-btn-success-filled:disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Close button (modal X) ── */
.ad-close-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--ea-radius-xl);
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ea-neutral-40);
    transition: all var(--ea-transition);
}
.ad-close-btn:hover { background: var(--ea-neutral-6); color: var(--ea-black); }

/* ── Blog editor wrapper ── */
.ad-editor-wrapper { padding: 0; min-height: 400px; }

/* ── Loading state ── */
.ad-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--ea-neutral-40);
    font-size: .85rem;
}

/* ── System card (settings placeholder) ── */
.ad-system-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    color: var(--ea-neutral-40);
}
.ad-system-card svg { width: 48px; height: 48px; margin-bottom: 1rem; opacity: .35; }
.ad-system-card h3 { font-size: 1rem; font-weight: 600; color: var(--ea-neutral-60); margin-bottom: .35rem; }
.ad-system-card p { font-size: .82rem; max-width: 320px; line-height: 1.5; }

/* ── Quick action cards (overview) ── */
.ad-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
}
.ad-quick-action {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1rem;
    border-radius: var(--ea-radius-md);
    border: 1px solid var(--ea-border);
    background: var(--ea-surface-card);
    cursor: pointer;
    transition: all var(--ea-transition);
}
.ad-quick-action:hover {
    border-color: var(--ad-accent);
    box-shadow: var(--ea-shadow-4);
    transform: translateY(-1px);
}
.ad-quick-action-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--ea-radius-sm);
    background: var(--ad-accent-10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ad-quick-action-icon svg { width: 16px; height: 16px; color: var(--ad-accent); }
.ad-quick-action-icon.pink { background: rgba(240, 79, 205, .08); }
.ad-quick-action-icon.pink svg { color: var(--ea-pink); }
.ad-quick-action-icon.green { background: var(--ad-green-bg); }
.ad-quick-action-icon.green svg { color: var(--ad-green); }
.ad-quick-action-icon.blue { background: var(--ad-blue-bg); }
.ad-quick-action-icon.blue svg { color: var(--ad-blue); }
.ad-quick-action-icon.amber { background: var(--ad-amber-bg); }
.ad-quick-action-icon.amber svg { color: var(--ad-amber); }
.ad-quick-action-label { font-size: .82rem; font-weight: 600; color: var(--ea-black); }

/* ── User avatar (tables, modals) ── */
.ad-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--ea-radius-sm);
    background: var(--ad-accent-10);
    color: var(--ad-accent);
    font-weight: 700;
    font-size: .68rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Empty state ── */
.ad-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    color: var(--ea-neutral-40);
}
.ad-empty-state p { font-size: .85rem; margin-bottom: 1rem; }

/* ── Overview content grid ── */
.ad-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ── Admin Responsive ── */
@media (max-width: 1200px) {
    .ad-quick-actions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
    .ad-content-grid { grid-template-columns: 1fr; }
    .ad-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .ad-quick-actions { grid-template-columns: 1fr; }
    .ad-filter-bar { flex-direction: column; }
    .ad-filter-bar .ad-search-input { width: 100%; }
    .ad-table-header,
    .ad-table-row { font-size: .8225rem; }
    .ad-col-category,
    .ad-col-date,
    .ad-col-joined { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   Blog Editor (be-*)
   Two-column Fluent editor layout: main card + sidebar panels.
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout grid ──────────────────────────────────────────────── */
.be-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1rem;
    align-items: start;
}

/* ── Main editor card ─────────────────────────────────────────── */
.be-card {
    background: var(--ea-surface-card);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-lg);
    box-shadow: var(--ea-shadow-4);
    overflow: hidden;
}

.be-card-body {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Form primitives ──────────────────────────────────────────── */
.be-form-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.be-form-label {
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-neutral-60);
}
.be-form-label .required { color: #dc2626; font-weight: 400; }
.be-form-label .optional { color: var(--ea-neutral-40); font-weight: 400; font-size: .8225rem; }

.be-form-input,
.be-form-textarea,
.be-form-select {
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-xl);
    font-family: var(--ea-font);
    font-size: .875rem;
    color: var(--ea-black);
    background: var(--ea-surface-card);
    transition: border-color 150ms, box-shadow 150ms;
}
.be-form-input::placeholder,
.be-form-textarea::placeholder { color: var(--ea-neutral-40); }
.be-form-input:focus,
.be-form-textarea:focus,
.be-form-select:focus {
    outline: none;
    border-color: var(--ea-blue);
    box-shadow: 0 0 0 3px var(--ea-blue-10);
}

.be-form-textarea { resize: vertical; min-height: 72px; line-height: 1.55; }
.be-form-hint { font-size: .8225rem; color: var(--ea-neutral-40); margin-top: .1rem; }

/* Title - large borderless underline input */
.be-input-title {
    width: 100%;
    padding: .6rem 0;
    border: none;
    border-bottom: 2px solid var(--ea-border);
    border-radius: 0;
    font-family: var(--ea-font);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ea-black);
    background: transparent;
    transition: border-color 150ms;
}
.be-input-title::placeholder { color: var(--ea-neutral-20); font-weight: 400; }
.be-input-title:focus {
    outline: none;
    border-bottom-color: var(--ea-blue);
}

/* Slug - inline display */
.be-slug-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8225rem;
}
.be-slug-prefix { color: var(--ea-neutral-40); white-space: nowrap; }
.be-slug-value {
    flex: 1;
    padding: .3rem .5rem;
    border: 1px solid var(--ea-border-subtle);
    border-radius: var(--ea-radius-sm);
    font-family: 'SF Mono', 'Cascadia Code', monospace;
    font-size: .8225rem;
    color: var(--ea-neutral-60);
    background: var(--ea-neutral-2);
}
.be-slug-value:focus {
    outline: none;
    border-color: var(--ea-blue);
    background: var(--ea-surface-card);
    color: var(--ea-black);
}

/* ── Sidebar ──────────────────────────────────────────────────── */
.be-sidebar {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.be-sidebar-card {
    background: var(--ea-surface-card);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-lg);
    box-shadow: var(--ea-shadow-2);
    overflow: hidden;
}

.be-sidebar-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--ea-border-subtle);
}

.be-sidebar-card-title {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ea-black);
    display: flex;
    align-items: center;
    gap: .4rem;
}
.be-sidebar-card-title svg { width: 16px; height: 16px; color: var(--ea-neutral-40); }

.be-sidebar-card-body {
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

/* ── Status badge ─────────────────────────────────────────────── */
.be-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .8225rem;
    font-weight: 500;
}
.be-status-badge.draft   { background: #fff8e1; color: #f57f17; }
.be-status-badge.published { background: #e8f5e9; color: #2e7d32; }

.be-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
}
.be-status-dot.draft      { background: #f57f17; }
.be-status-dot.published  { background: #2e7d32; }

/* ── Toggle switch ────────────────────────────────────────────── */
.be-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.be-toggle-label { font-size: .82rem; color: var(--ea-neutral-60); }

.be-toggle-switch {
    width: 40px; height: 22px; border-radius: 999px;
    background: var(--ea-neutral-10); border: none; cursor: pointer;
    position: relative; transition: 200ms ease;
    flex-shrink: 0;
}
.be-toggle-switch::after {
    content: "";
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: var(--ea-shadow-2);
    position: absolute; top: 3px; left: 3px;
    transition: 200ms ease;
}
.be-toggle-switch.on { background: var(--ea-blue); }
.be-toggle-switch.on::after { left: 21px; }

/* ── Stat rows ────────────────────────────────────────────────── */
.be-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .15rem 0;
}
.be-stat-label { font-size: .8225rem; color: var(--ea-neutral-40); }
.be-stat-value { font-size: .8225rem; font-weight: 500; color: var(--ea-black); }

/* ── Cover image preview ──────────────────────────────────────── */
.be-cover-preview {
    border-radius: var(--ea-radius-md);
    border: 1px solid var(--ea-border);
    overflow: hidden;
    position: relative;
    aspect-ratio: 16/9;
    background: var(--ea-neutral-4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.be-cover-preview img {
    width: 100%; height: 100%; object-fit: cover;
}
.be-cover-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    color: var(--ea-neutral-40);
    font-size: .8225rem;
}
.be-cover-preview-empty svg { width: 28px; height: 28px; color: var(--ea-neutral-20); }

/* ── Tag chips (blog editor) ──────────────────────────────────── */
.be-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .3rem 0;
}
.be-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .8225rem;
    font-weight: 500;
    background: var(--ea-neutral-4);
    color: var(--ea-neutral-60);
}
.be-tag-chip .be-tag-x {
    width: 14px; height: 14px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: var(--ea-neutral-40);
    cursor: pointer; font-size: .8225rem; transition: 100ms ease;
}
.be-tag-chip .be-tag-x:hover { background: var(--ea-neutral-6); color: var(--ea-black); }

.be-tag-add-input {
    width: 100%;
    padding: .35rem .6rem;
    border: 1px dashed var(--ea-border);
    border-radius: var(--ea-radius-xl);
    font-family: var(--ea-font);
    font-size: .8225rem;
    color: var(--ea-black);
    background: transparent;
}
.be-tag-add-input::placeholder { color: var(--ea-neutral-40); }
.be-tag-add-input:focus {
    outline: none;
    border-style: solid;
    border-color: var(--ea-blue);
}

/* ── Autosave indicator ───────────────────────────────────────── */
.be-autosave-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .8225rem;
    color: var(--ea-neutral-40);
}
.be-autosave-row svg { width: 14px; height: 14px; }
.be-autosave-row.saving { color: var(--ea-orange); }
.be-autosave-row.saved  { color: #2e7d32; }

/* ── Sidebar actions ──────────────────────────────────────────── */
.be-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.be-sidebar-actions .ea-btn { justify-content: center; width: 100%; }
.be-export-btn { background: transparent; border: 1px solid var(--ea-border, #e2e8f0); color: var(--ea-text, #1e1e2d); }
.be-export-btn:hover { background: var(--ea-blue-10, #f0eeff); border-color: var(--ea-blue, #4D2EFD); color: var(--ea-blue, #4D2EFD); }

/* ── Cover image upload ───────────────────────────────────────── */
.be-cover-input-row {
    display: flex;
    gap: .35rem;
    align-items: center;
}
.be-cover-input-row .be-form-input { flex: 1; }

.be-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ea-radius-sm, 6px);
    border: 1px solid var(--ea-border, #e2e8f0);
    background: var(--ea-surface, #fff);
    color: var(--ea-text-muted, #6b7280);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .15s, color .15s, background .15s;
}
.be-upload-btn:hover {
    border-color: var(--ea-blue, #4D2EFD);
    color: var(--ea-blue, #4D2EFD);
    background: var(--ea-blue-10, #f0eeff);
}

.be-upload-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--ea-border, #e2e8f0);
    border-top-color: var(--ea-blue, #4D2EFD);
    border-radius: 50%;
    animation: be-spin .6s linear infinite;
}
@keyframes be-spin { to { transform: rotate(360deg); } }

.be-upload-error {
    display: block;
    font-size: .75rem;
    color: var(--ea-red, #e53e3e);
    margin-top: .25rem;
}

/* ── Multimedia insert modal - source tabs ────────────────────── */
.mm-source-tabs {
    display: flex;
    gap: 0;
    border: 1px solid var(--ea-border, #e2e8f0);
    border-radius: var(--ea-radius-sm, 6px);
    overflow: hidden;
    margin-bottom: .75rem;
}
.mm-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .5rem .75rem;
    font-size: .8rem;
    font-weight: 500;
    background: var(--ea-surface, #fff);
    color: var(--ea-text-muted, #6b7280);
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.mm-tab + .mm-tab { border-left: 1px solid var(--ea-border, #e2e8f0); }
.mm-tab.active {
    background: var(--ea-blue-10, #f0eeff);
    color: var(--ea-blue, #4D2EFD);
}
.mm-tab:hover:not(.active) {
    background: var(--ea-neutral-05, #f7f7f8);
}

/* ── Upload drop zone ─────────────────────────────────────────── */
.mm-upload-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.5rem 1rem;
    border: 2px dashed var(--ea-border, #e2e8f0);
    border-radius: var(--ea-radius-sm, 6px);
    background: var(--ea-neutral-05, #f7f7f8);
    color: var(--ea-text-muted, #6b7280);
    text-align: center;
    transition: border-color .15s, background .15s;
    margin-bottom: .75rem;
}
.mm-upload-zone:hover,
.mm-upload-zone.drag-over {
    border-color: var(--ea-blue, #4D2EFD);
    background: var(--ea-blue-10, #f0eeff);
}
.mm-upload-text { font-size: .8rem; font-weight: 500; }
.mm-upload-hint { font-size: .7rem; color: var(--ea-text-muted, #6b7280); }
.mm-upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.mm-upload-zone.is-uploading .mm-upload-input {
    pointer-events: none;
}
.mm-upload-progress {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    color: var(--ea-blue, #4D2EFD);
}

/* ── Success / error states ───────────────────────────────────── */
.be-outcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 2rem;
}
/* ── Inline save toast ─────────────────────────────────────────── */
.be-save-toast {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1rem;
    border-radius: var(--ea-radius-sm);
    font-size: .82rem;
    font-weight: 500;
    margin-bottom: .75rem;
    animation: be-toast-in 200ms ease;
}
@keyframes be-toast-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.be-save-toast svg { flex-shrink: 0; }
.be-save-toast-success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}
.be-save-toast-error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* ── Back button (blog editor header) ─────────────────────────── */
.be-back-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .7rem;
    border-radius: var(--ea-radius-xl);
    border: 1px solid var(--ea-border);
    background: var(--ea-surface-card);
    color: var(--ea-neutral-60);
    font-family: var(--ea-font);
    font-size: .8225rem;
    cursor: pointer;
    transition: 140ms ease;
}
.be-back-btn:hover {
    background: var(--ea-neutral-4);
    color: var(--ea-black);
}
.be-back-btn svg { width: 16px; height: 16px; }

.be-page-header-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .15rem;
}

/* ── Editor card height - align content bottom with sidebar ──── */
.be-layout { align-items: stretch; }
.be-card { display: flex; flex-direction: column; }
.be-card-body { flex: 1; display: flex; flex-direction: column; }
.be-card-body .be-form-field:last-child { flex: 1; display: flex; flex-direction: column; }
.be-card-body .rich-text-editor { flex: 1; display: flex; flex-direction: column; overflow-y: auto; max-height: 70vh; }
.be-card-body .rich-text-content { flex: 1; min-height: 400px; }

/* ── RichTextEditor toolbar (Fluent override) ─────────────────── */
.be-card .rich-text-editor {
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-md);
    box-shadow: none;
    overflow: hidden;
    overflow-y: auto;
    background: var(--ea-surface-card);
}

.be-card .rich-text-toolbar {
    display: flex;
    align-items: center;
    gap: .15rem;
    padding: .4rem .6rem;
    background: var(--ea-neutral-2);
    border-bottom: 1px solid var(--ea-border);
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

.be-card .toolbar-sep {
    width: 1px;
    height: 20px;
    background: var(--ea-border);
    margin: 0 .3rem;
    flex-shrink: 0;
}

.be-card .toolbar-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--ea-radius-xl);
    background: transparent;
    color: var(--ea-neutral-60);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    font-family: var(--ea-font);
    padding: 0;
    transition: 100ms ease;
}
.be-card .toolbar-btn:hover {
    background: var(--ea-surface-card);
    border-color: var(--ea-border);
    color: var(--ea-black);
}
.be-card .toolbar-btn:active {
    background: var(--ea-blue-10);
    color: var(--ea-blue);
    border-color: rgba(77,46,253,.15);
    box-shadow: none;
}
.be-card .toolbar-btn svg {
    width: 16px;
    height: 16px;
}

.be-card .rich-text-content {
    padding: 1.25rem;
    font-size: .9rem;
    line-height: 1.7;
    color: var(--ea-black);
    max-height: none;
    overflow-y: visible;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .be-layout { grid-template-columns: 1fr; align-items: start; }
    .be-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .75rem;
    }
    .be-sidebar-actions {
        grid-column: 1 / -1;
    }
}
@media (max-width: 768px) {
    .be-sidebar { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   STUDENT DETAIL VIEW (std-)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page header ── */
.std-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 0 0;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.std-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.std-header h1 {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
    color: var(--ea-neutral-80);
}
.std-header-name-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.std-header-sub-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .25rem;
}
.std-header-email {
    font-size: .88rem;
    color: var(--ea-neutral-60);
}

/* ── Avatar ── */
.std-avatar-lg {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--stemblue), var(--ea-blue-70));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(77, 46, 253, 0.25);
}

/* ── Badges ── */
.std-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .7rem;
    border-radius: 100px;
    font-size: .8225rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}
.std-badge--active     { background: #e8f9ee; color: var(--stemgreen-dark); }
.std-badge--inactive   { background: var(--ea-neutral-6); color: var(--ea-neutral-60); }
.std-badge--disabled   { background: #fde8e8; color: #c62828; }
.std-badge--verified   { background: var(--stemblue-10); color: var(--stemblue); }
.std-badge--unverified { background: #fff4e0; color: #b5700a; }

/* ── Role badge ── */
.std-role-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .55rem;
    border-radius: 100px;
    font-size: .8225rem;
    font-weight: 600;
    letter-spacing: .02em;
    background: var(--stemblue-10);
    color: var(--stemblue);
    border: 1px solid rgba(77, 46, 253, 0.15);
}

/* ── Two-column layout ── */
.std-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.25rem;
    align-items: start;
}
.std-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.std-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 1rem;
}

/* ── Section card ── */
.std-section-card {
    background: var(--ea-white);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-lg);
    padding: 1.25rem;
}
.std-section-card-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .85rem;
}
.std-section-card-header svg { width: 18px; height: 18px; color: var(--stemblue); flex-shrink: 0; }
.std-section-card-header h3  { font-size: .95rem; font-weight: 700; margin: 0; color: var(--ea-neutral-80); }
.std-section-card p          { font-size: .9rem; color: var(--ea-neutral-60); line-height: 1.65; margin: 0; }

/* ── Info grid ── */
.std-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.std-info-item {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    min-width: 0;
}
.std-info-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--ea-radius-sm);
    background: var(--stemblue-10);
    color: var(--stemblue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.std-info-icon svg { width: 18px; height: 18px; }
.std-info-icon.green  { background: #e8f9ee; color: var(--stemgreen-dark); }
.std-info-icon.orange { background: #fff4e0; color: var(--stemorange); }
.std-info-icon.pink   { background: #fce4f6; color: var(--stempink); }
.std-info-label {
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-neutral-60);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .15rem;
    line-height: 1.4;
}
.std-info-value {
    font-size: .95rem;
    color: var(--ea-neutral-80);
    font-weight: 500;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}
.std-info-value.mono {
    font-family: monospace;
    font-size: .88rem;
}

/* ── Group chips ── */
.std-group-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.std-group-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .75rem;
    border-radius: 100px;
    font-size: .85rem;
    font-weight: 500;
    background: var(--stemblue-10);
    color: var(--stemblue);
    border: 1px solid rgba(77, 46, 253, 0.12);
    transition: all .15s;
}
.std-group-chip svg { width: 14px; height: 14px; }

/* ── Tabs ── */
.std-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 2px solid var(--ea-border-subtle);
    margin-bottom: 1rem;
}
.std-tab {
    padding: .6rem 1rem;
    font-family: var(--ea-font);
    font-size: .88rem;
    font-weight: 600;
    color: var(--ea-neutral-60);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.std-tab svg { width: 15px; height: 15px; }
.std-tab:hover { color: var(--stemblue); }
.std-tab.active {
    color: var(--stemblue);
    border-bottom-color: var(--stemblue);
}
.std-tab-count {
    background: var(--stemblue-10);
    color: var(--stemblue);
    font-size: .8225rem;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: 100px;
}

/* ── Tables ── */
.std-table-wrap {
    background: var(--ea-white);
    border: 1px solid var(--ea-border-subtle);
    border-radius: var(--ea-radius-lg);
    overflow: hidden;
    box-shadow: var(--ea-shadow-4);
}
.std-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .88rem;
    font-family: var(--ea-font);
}
.std-table thead th {
    text-align: left;
    font-size: .84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--stemwhite);
    padding: .65rem .85rem;
    background: var(--stemblue);
    height: 3rem;
    position: sticky;
    top: 0;
    z-index: 1;
}
.std-table thead th:first-child { border-radius: var(--ea-radius-sm) 0 0 0; padding-left: 1.25rem; }
.std-table thead th:last-child  { border-radius: 0 var(--ea-radius-sm) 0 0; text-align: right; padding-right: 1.25rem; }
.std-table tbody tr {
    transition: background 80ms;
}
.std-table tbody tr:last-child td { border-bottom: none; }
.std-table tbody tr:hover { background: var(--ea-blue-10); }
.std-table tbody td {
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--ea-border-subtle);
    vertical-align: middle;
}
.std-table tbody td:first-child { padding-left: 1.25rem; }
.std-table tbody td:last-child  { text-align: right; padding-right: 1.25rem; }

.std-table-name   { font-weight: 600; color: var(--ea-neutral-80); }
.std-table-date   { font-variant-numeric: tabular-nums; color: var(--ea-neutral-60); }
.std-table-grade  { font-weight: 700; color: var(--stemblue); }
.std-table-duration { font-weight: 600; color: var(--ea-neutral-80); }
.std-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}
.std-table-muted { font-size: .84rem; color: var(--ea-neutral-40); font-style: italic; }

/* ── Action card (sidebar) ── */
.std-action-card {
    background: var(--ea-white);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* ── Action buttons ── */
.std-btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .65rem 1rem;
    border-radius: var(--ea-radius-xl);
    font-family: var(--ea-font);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 120ms;
    border: none;
}
.std-btn-action svg { width: 16px; height: 16px; }
.std-btn-action.primary       { background: var(--ea-green); color: var(--ea-blue); }
.std-btn-action.primary:hover  { background: #5dfca0; }
.std-btn-action.secondary     { background: var(--ea-white); color: var(--stemblue); border: 1px solid var(--ea-blue-30); }
.std-btn-action.secondary:hover { background: var(--stemblue-10); }
.std-btn-action.accent        { background: var(--stemgreen); color: var(--ea-neutral-80); }
.std-btn-action.accent:hover  { background: #5ee89a; }
.std-btn-action.danger        { background: var(--ea-white); color: #c62828; border: 1px solid #f5c6cb; }
.std-btn-action.danger:hover  { background: #fde8e8; }
.std-btn-action:disabled      { opacity: .5; cursor: not-allowed; }

/* ── Inline buttons ── */
.std-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .85rem;
    border-radius: var(--ea-radius-xl);
    font-family: var(--ea-font);
    font-size: .85rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
    white-space: nowrap;
}
.std-btn:active { transform: scale(.97); }
.std-btn--primary { background: var(--ea-green); color: var(--ea-blue); }
.std-btn--primary:hover { background: #5dfca0; }
.std-btn--ghost { background: transparent; color: var(--ea-neutral-60); border: 1px solid var(--ea-border); }
.std-btn--ghost:hover { background: var(--ea-neutral-4); color: var(--ea-neutral-80); }
.std-btn--sm { padding: .3rem .6rem; font-size: .8225rem; }
.std-btn svg { width: 14px; height: 14px; }
.std-btn--danger { background: #c62828; color: var(--ea-white); }
.std-btn--danger:hover { background: #b71c1c; }
.std-btn--danger svg { width: 14px; height: 14px; }

/* ── Progress ring ── */
.std-progress-ring-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: .75rem 0 .5rem;
}
.std-progress-ring {
    position: relative;
    width: 90px;
    height: 90px;
}
.std-progress-ring svg {
    transform: rotate(-90deg);
    width: 90px;
    height: 90px;
}
.std-progress-ring circle {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
}
.std-progress-ring .ring-bg { stroke: var(--ea-neutral-6); }
.std-progress-ring .ring-fill {
    stroke: var(--stemblue);
    transition: stroke-dashoffset .6s ease;
}
.std-progress-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--stemblue);
}
.std-progress-legend {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.std-progress-legend-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: var(--ea-neutral-60);
}
.std-progress-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.std-progress-legend-dot.blue   { background: var(--stemblue); }
.std-progress-legend-dot.green  { background: var(--stemgreen-dark); }
.std-progress-legend-dot.orange { background: var(--stemorange); }
.std-progress-legend-dot.gray   { background: var(--ea-neutral-20); }

/* ── Empty state ── */
.std-empty {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--ea-white);
    border: 1px solid var(--ea-border-subtle);
    border-radius: var(--ea-radius-lg);
    box-shadow: var(--ea-shadow-4);
}
.std-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto .75rem;
    background: var(--ea-neutral-6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ea-neutral-40);
}
.std-empty-icon svg { width: 22px; height: 22px; }
.std-empty h3 { font-size: 1rem; font-weight: 700; color: var(--ea-neutral-80); margin: 0 0 .25rem; }
.std-empty p  { font-size: .88rem; color: var(--ea-neutral-60); margin: 0; }

/* ── Not Found state ── */
.std-not-found {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--ea-white);
    border: 1px solid var(--ea-border-subtle);
    border-radius: var(--ea-radius-lg);
    max-width: 480px;
    margin: 4rem auto;
    box-shadow: var(--ea-shadow-16);
}
.std-not-found-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    background: #fde8e8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c62828;
}
.std-not-found-icon svg { width: 26px; height: 26px; }
.std-not-found h2 { font-size: 1.1rem; font-weight: 700; color: var(--ea-neutral-80); margin: 0 0 .35rem; }
.std-not-found p  { font-size: .9rem; color: var(--ea-neutral-60); margin: 0 0 1.25rem; line-height: 1.5; }

/* ── Alert banner ── */
.std-alert {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1rem;
    border-radius: var(--ea-radius-sm);
    font-size: .88rem;
    font-weight: 500;
    margin-bottom: .5rem;
}
.std-alert--info {
    background: var(--stemblue-10);
    border: 1px solid rgba(77, 46, 253, 0.2);
    color: var(--stemblue);
}
.std-alert--warning {
    background: #fff4e0;
    border: 1px solid #fde0a7;
    color: #b5700a;
}
.std-alert svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Disable confirmation modal ── */
.std-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(27, 27, 31, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 1rem;
}
.std-modal {
    background: var(--ea-white);
    border-radius: var(--ea-radius-lg);
    max-width: 440px;
    width: 100%;
    padding: 1.5rem;
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.std-modal h3 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; color: var(--ea-neutral-80); }
.std-modal p  { font-size: .9rem; color: var(--ea-neutral-60); line-height: 1.55; margin: 0 0 .5rem; }
.std-modal p:last-of-type { margin-bottom: 1.25rem; }
.std-modal p strong { color: var(--ea-neutral-80); }
.std-modal-hint { font-size: .84rem !important; color: var(--ea-neutral-40) !important; }
.std-modal-footer { display: flex; justify-content: flex-end; gap: .6rem; }

/* ── Loading skeleton ── */
.std-skeleton {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.25rem;
}
.std-skel-main { display: flex; flex-direction: column; gap: 1.25rem; }
.std-skel-sidebar { display: flex; flex-direction: column; gap: 1rem; }
.std-skel-bar {
    border-radius: var(--ea-radius-sm);
    background: linear-gradient(90deg, var(--ea-neutral-6) 25%, var(--ea-neutral-4) 50%, var(--ea-neutral-6) 75%);
    background-size: 200% 100%;
    animation: stdShimmer 1.4s ease-in-out infinite;
}
@keyframes stdShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.std-skel-header  { height: 28px; width: 50%; margin-bottom: 1rem; }
.std-skel-card    { height: 200px; width: 100%; border-radius: var(--ea-radius-lg); }
.std-skel-table   { height: 340px; width: 100%; border-radius: var(--ea-radius-lg); }
.std-skel-actions { height: 170px; width: 100%; border-radius: var(--ea-radius-lg); }
.std-skel-meta    { height: 260px; width: 100%; border-radius: var(--ea-radius-lg); }

/* ── Section heading ── */
.std-section-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ea-neutral-80);
    margin: 0 0 1rem;
}

/* ── Pagination ── */
.std-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    padding: .75rem 1rem .25rem;
}
.std-pager-info {
    font-size: .8225rem;
    color: var(--ea-neutral-40);
    margin-right: .5rem;
    white-space: nowrap;
}
.std-pager-buttons {
    display: flex;
    align-items: center;
    gap: .25rem;
}
.std-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 .5rem;
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-xl);
    background: var(--ea-white);
    color: var(--ea-neutral-80);
    font-family: var(--ea-font);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s;
}
.std-pager-btn:hover:not(:disabled):not(.active) {
    background: var(--ea-blue-10);
    color: var(--ea-blue);
    border-color: var(--ea-blue-30);
}
.std-pager-btn.active {
    background: var(--ea-blue);
    border-color: var(--ea-blue);
    color: #fff;
}
.std-pager-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}
.std-pager-btn svg {
    width: 14px;
    height: 14px;
}
.std-pager-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    color: var(--ea-neutral-40);
    font-weight: 600;
    font-size: .82rem;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .std-layout { grid-template-columns: 1fr; }
    .std-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: .75rem;
    }
    .std-sidebar > * { flex: 1 1 280px; min-width: 0; }
    .std-skeleton { grid-template-columns: 1fr; }
    .std-table-wrap { overflow-x: auto; overflow-y: hidden; }
    .std-table { min-width: 650px; }
}
@media (max-width: 700px) {
    .std-info-grid { grid-template-columns: 1fr; }
    .std-sidebar { flex-direction: column; }
    .std-sidebar > * { flex: 1 1 auto; }
    .std-pager { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 500px) {
    .std-header { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .std-header-name-row h1 { font-size: 1rem; }
    .std-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .std-tabs::-webkit-scrollbar { display: none; }
    .std-section-card { padding: 1rem; }
    .std-info-item { gap: .5rem; }
    .std-info-icon { width: 32px; height: 32px; }
    .std-info-value { font-size: .82rem; }
}


/* ═══════════════════════════════════════════════════════════════════════
   REPORT A BUG - 3-STEP WIZARD
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Wizard shell (centers & constrains width) ── */
.rb-wizard-shell {
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ── Stepper ── */
.wiz-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 1.5rem;
    padding: 0 .25rem;
}

.wiz-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    transition: opacity 120ms;
}

.wiz-step.disabled { pointer-events: none; }

.wiz-step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--ea-neutral-20);
    background: var(--ea-white);
    display: grid;
    place-items: center;
    font-size: .8225rem;
    font-weight: 700;
    color: var(--ea-neutral-40);
    flex-shrink: 0;
    transition: all 200ms;
}

.wiz-step-label {
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-neutral-40);
    white-space: nowrap;
    transition: color 200ms;
}

/* Active step */
.wiz-step.active .wiz-step-num {
    border-color: var(--ea-blue);
    background: var(--ea-blue);
    color: #fff;
    box-shadow: 0 2px 8px rgba(77,46,253,.22);
}

.wiz-step.active .wiz-step-label {
    color: var(--ea-black);
}

/* Completed step */
.wiz-step.done .wiz-step-num {
    border-color: var(--ea-green-dark);
    background: #ecfdf5;
    color: var(--ea-green-dark);
}

.wiz-step.done .wiz-step-label {
    color: var(--ea-neutral-60);
}

/* Connector line */
.wiz-connector {
    flex: 1;
    height: 2px;
    background: var(--ea-neutral-10);
    margin: 0 .65rem;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.wiz-connector::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ea-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 350ms cubic-bezier(.4,0,.2,1);
}

.wiz-connector.filled::after {
    transform: scaleX(1);
}

/* ── Card ── */
.rb-card {
    background: var(--ea-white);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-xl);
    box-shadow: var(--ea-shadow-4);
    overflow: hidden;
}

/* ── Step heading inside card ── */
.wiz-panel-header {
    padding: 1.25rem 1.75rem .5rem;
}

.wiz-panel-header h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ea-black);
}

.wiz-panel-header p {
    font-size: .8225rem;
    color: var(--ea-neutral-60);
    margin-top: .15rem;
}

/* ── Form body ── */
.rb-body {
    padding: 1rem 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

/* ── Field ── */
.rb-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

/* ── Label ── */
.rb-label {
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-neutral-60);
    display: flex;
    align-items: center;
    gap: .3rem;
}

.rb-label svg { color: var(--ea-neutral-40); flex-shrink: 0; }

.rb-label .optional {
    font-weight: 400;
    color: var(--ea-neutral-40);
    font-size: .8225rem;
}

/* ── Input ── */
.rb-input {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-sm);
    font-family: var(--ea-font);
    font-size: .88rem;
    color: var(--ea-black);
    background: var(--ea-white);
    transition: border-color 150ms, box-shadow 150ms;
}

.rb-input::placeholder { color: var(--ea-neutral-40); }

.rb-input:focus {
    outline: none;
    border-color: var(--ea-blue);
    box-shadow: 0 0 0 3px var(--ea-blue-10);
}

/* ── Textarea ── */
.rb-textarea {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-sm);
    font-family: var(--ea-font);
    font-size: .88rem;
    color: var(--ea-black);
    background: var(--ea-white);
    resize: vertical;
    min-height: 80px;
    line-height: 1.55;
    transition: border-color 150ms, box-shadow 150ms;
}

.rb-textarea::placeholder { color: var(--ea-neutral-40); }

.rb-textarea:focus {
    outline: none;
    border-color: var(--ea-blue);
    box-shadow: 0 0 0 3px var(--ea-blue-10);
}

/* ── Severity pills ── */
.rb-severity-pills {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.rb-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .8rem;
    border: 1px solid var(--ea-border);
    border-radius: 999px;
    background: var(--ea-white);
    font-family: var(--ea-font);
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-neutral-60);
    cursor: pointer;
    transition: all 140ms;
    white-space: nowrap;
}

.rb-pill:hover {
    border-color: var(--ea-blue-30);
    background: var(--ea-blue-10);
    color: var(--ea-blue);
}

.rb-pill.active {
    background: var(--ea-blue);
    color: var(--ea-white);
    border-color: var(--ea-blue);
    box-shadow: 0 2px 8px rgba(77,46,253,.22);
}

.rb-pill.active .rb-pill-dot { border-color: rgba(255,255,255,.5); }

.rb-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    flex-shrink: 0;
}

.rb-pill-dot.low      { background: var(--sev-low); }
.rb-pill-dot.medium   { background: var(--sev-medium); }
.rb-pill-dot.high     { background: var(--sev-high); }
.rb-pill-dot.critical { background: var(--sev-critical); }
.rb-pill-dot.urgent   { background: var(--sev-critical); }

/* ── Hint & char count ── */
.rb-hint {
    font-size: .8225rem;
    color: var(--ea-neutral-40);
    margin-top: .1rem;
}

.rb-char-count {
    font-size: .8225rem;
    color: var(--ea-neutral-40);
    text-align: right;
    margin-top: .15rem;
}

.rb-char-count.over { color: #dc2626; font-weight: 600; }

/* ── Dropzone ── */
.rb-dropzone {
    border: 2px dashed var(--ea-neutral-20);
    border-radius: var(--ea-radius-md);
    background: var(--ea-neutral-2);
    padding: 1.75rem 1rem;
    text-align: center;
    transition: all 200ms;
    cursor: pointer;
    display: block;
}

.rb-dropzone:hover {
    border-color: var(--ea-blue-30);
    background: var(--ea-blue-10);
}

.rb-dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
}

.rb-dropzone-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ea-blue-10);
    color: var(--ea-blue);
    display: grid;
    place-items: center;
    margin-bottom: .35rem;
}

.rb-dropzone-icon svg { width: 22px; height: 22px; }

.rb-dropzone-text {
    font-size: .88rem;
    font-weight: 600;
    color: var(--ea-neutral-80);
}

.rb-dropzone-sub {
    font-size: .8225rem;
    color: var(--ea-neutral-40);
}

.rb-browse-link {
    color: var(--ea-blue);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rb-browse-link:hover { color: var(--ea-blue-90); }

.rb-dropzone-meta {
    font-size: .8225rem;
    color: var(--ea-neutral-40);
    margin-top: .15rem;
}

/* ── Attachment preview ── */
.rb-attachments {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .5rem;
}

.rb-attachment-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-sm);
    background: var(--ea-white);
    transition: all 140ms;
}

.rb-attachment-item:hover {
    border-color: var(--ea-blue-30);
    background: var(--ea-blue-10);
}

.rb-attachment-thumb {
    width: 36px;
    height: 36px;
    border-radius: var(--ea-radius-sm);
    background: var(--ea-neutral-4);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.rb-attachment-thumb svg { width: 18px; height: 18px; color: var(--ea-neutral-40); }

.rb-attachment-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.rb-attachment-name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ea-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rb-attachment-size {
    font-size: .8225rem;
    color: var(--ea-neutral-40);
}

.rb-attachment-remove {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--ea-radius-sm);
    color: var(--ea-neutral-40);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 120ms;
    flex-shrink: 0;
}

.rb-attachment-remove svg { width: 14px; height: 14px; }

.rb-attachment-remove:hover { background: #fef2f2; color: #dc2626; }

/* ── Review section (Step 3) ── */
.rb-review-section {
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-sm);
    overflow: hidden;
}

.rb-review-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--ea-border-subtle);
}

.rb-review-row:last-child { border-bottom: none; }

.rb-review-row-full {
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--ea-border-subtle);
}

.rb-review-row-full:last-child { border-bottom: none; }

.rb-review-label {
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-neutral-40);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rb-review-value {
    font-size: .85rem;
    font-weight: 600;
    color: var(--ea-black);
}

.rb-review-text {
    font-size: .85rem;
    color: var(--ea-neutral-80);
    line-height: 1.5;
    margin-top: .25rem;
    white-space: pre-wrap;
}

/* ── Environment banner ── */
.rb-env-banner {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .65rem .75rem;
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-sm);
    background: var(--ea-neutral-2);
}

.rb-env-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ea-blue-10);
    color: var(--ea-blue);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.rb-env-icon svg { width: 14px; height: 14px; }

.rb-env-text { display: flex; flex-direction: column; gap: .15rem; }

.rb-env-text strong {
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-black);
}

.rb-env-text span {
    font-size: .8225rem;
    color: var(--ea-neutral-40);
    line-height: 1.4;
}

/* ── Footer / Navigation ── */
.rb-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.75rem;
    border-top: 1px solid var(--ea-border-subtle);
    background: var(--ea-neutral-2);
}

.rb-footer-left,
.rb-footer-right {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.rb-step-indicator {
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-neutral-40);
}

/* ── Buttons ── */
.rb-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    border: 1px solid var(--ea-border);
    background: var(--ea-white);
    color: var(--ea-black);
    font-family: var(--ea-font);
    font-size: .85rem;
    font-weight: 600;
    border-radius: var(--ea-radius-xl);
    cursor: pointer;
    transition: all 140ms;
    white-space: nowrap;
}

.rb-btn:hover { background: var(--ea-neutral-4); }
.rb-btn svg   { width: 16px; height: 16px; }

.rb-btn-primary {
    background: var(--ea-green);
    color: var(--ea-blue);
    border-color: var(--ea-green);
}

.rb-btn-primary:hover {
    background: #5dfca0;
    box-shadow: 0 4px 12px rgba(122,253,181,.35);
}

.rb-btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(122,253,181,.3);
}

.rb-btn-secondary {
    background: var(--ea-neutral-6);
    color: var(--ea-neutral-60);
    border-color: var(--ea-neutral-10);
}

.rb-btn-secondary:hover { background: var(--ea-neutral-10); }

.rb-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--ea-neutral-60);
}

.rb-btn-ghost:hover {
    background: var(--ea-neutral-6);
    color: var(--ea-black);
}

.rb-btn[disabled] {
    opacity: .4;
    pointer-events: none;
}

/* ── Outcome states ── */
.rb-busy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1.5rem;
    gap: 1rem;
}

.rb-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--ea-blue-10);
    border-top: 4px solid var(--ea-blue);
    border-radius: 50%;
    animation: rbSpin .7s linear infinite;
}

@keyframes rbSpin { to { transform: rotate(360deg); } }

.rb-busy p {
    font-size: .88rem;
    color: var(--ea-neutral-60);
    font-weight: 500;
}

.rb-outcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
    gap: .75rem;
}

.rb-outcome-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.rb-outcome-icon svg { width: 28px; height: 28px; }

.rb-outcome-icon.success { background: #ecfdf5; color: #059669; }
.rb-outcome-icon.error   { background: #fef2f2; color: #dc2626; }

.rb-outcome h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ea-black);
}

.rb-outcome p {
    font-size: .88rem;
    color: var(--ea-neutral-60);
    line-height: 1.5;
    max-width: 340px;
}

.rb-outcome .rb-btn { margin-top: .5rem; }

.rb-outcome-ref {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .65rem;
    border: 1px solid var(--ea-border);
    border-radius: 999px;
    background: var(--ea-neutral-2);
    margin-top: .25rem;
}

.rb-ref-label {
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-neutral-40);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rb-ref-value {
    font-size: .8225rem;
    font-weight: 700;
    color: var(--ea-blue);
    font-family: "SF Mono", "Cascadia Code", "Fira Code", monospace;
}

/* ── Severity token variables ── */
:root {
    --sev-low:      #059669;
    --sev-medium:   #d97706;
    --sev-high:     #dc2626;
    --sev-critical: #7c3aed;
}

/* ═══════════════════════════════════════════════════════════
   BUG REPORT DETAIL VIEW
   ═══════════════════════════════════════════════════════════ */

/* ── Reference ID badge ── */
.bd-ref {
    font-family: "SF Mono", "Cascadia Code", "Fira Code", monospace;
    font-size: .8225rem;
    color: #6b7280;
    background: #f3f4f6;
    padding: .2rem .55rem;
    border-radius: 6px;
    font-weight: 500;
}

/* ── Severity badge ── */
.bd-sev {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8225rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: 6px;
}
.bd-sev-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.bd-sev--low       { color: var(--sev-low);      background: rgba(5,150,105,.08); }
.bd-sev--low .bd-sev-dot       { background: var(--sev-low); }
.bd-sev--medium    { color: var(--sev-medium);   background: rgba(217,119,6,.08); }
.bd-sev--medium .bd-sev-dot    { background: var(--sev-medium); }
.bd-sev--high      { color: var(--sev-high);     background: rgba(220,38,38,.08); }
.bd-sev--high .bd-sev-dot      { background: var(--sev-high); }
.bd-sev--critical  { color: var(--sev-critical); background: rgba(124,58,237,.08); }
.bd-sev--critical .bd-sev-dot  { background: var(--sev-critical); }
.bd-sev--urgent    { color: var(--sev-critical); background: rgba(124,58,237,.08); }
.bd-sev--urgent .bd-sev-dot    { background: var(--sev-critical); }

/* ── Info grid ── */
.bd-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.bd-info-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    min-width: 0;
}
.bd-info-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bd-info-icon svg {
    width: 16px;
    height: 16px;
    color: #6b7280;
}
.bd-info-label {
    font-size: .8225rem;
    color: #9ca3af;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .04em;
    margin-bottom: .15rem;
    line-height: 1.4;
}
.bd-info-value {
    font-size: .88rem;
    color: #111827;
    font-weight: 500;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

/* ── Section text ── */
.bd-section-text {
    font-size: .88rem;
    color: #374151;
    line-height: 1.7;
    white-space: pre-line;
    margin: 0;
}

/* ── Status field in sidebar ── */
.bd-status-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .5rem 0;
}
.bd-status-label {
    font-size: .8225rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Danger button ── */
.bd-btn-danger {
    color: #dc2626 !important;
    background: #fef2f2 !important;
    border-color: #fecaca !important;
}
.bd-btn-danger:hover {
    background: #fee2e2 !important;
}

/* ── GitHub button ── */
.bd-btn-github {
    color: white !important;
    background: #24292e !important;
    border-color: #24292e !important;
}
.bd-btn-github:hover {
    background: #1b1f23 !important;
}

/* ── Action card separator ── */
.bg-action-sep {
    height: 1px;
    background: #e5e7eb;
    margin: .25rem 0;
}

/* ═══ GITHUB ISSUE CREATION PANEL ═══ */
.gh-panel {
    background: white;
    border: 1.5px solid #d0d7de;
    border-radius: 12px;
    overflow: hidden;
    margin-top: .75rem;
}
.gh-panel-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.25rem;
    background: linear-gradient(135deg, #24292e, #1b1f23);
    color: white;
}
.gh-panel-header svg { width: 20px; height: 20px; }
.gh-panel-header h3 { font-size: .92rem; font-weight: 600; margin: 0; }

.gh-panel-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Fields */
.gh-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.gh-label {
    font-size: .8225rem;
    font-weight: 600;
    color: #24292e;
}
.gh-input {
    padding: .55rem .75rem;
    border: 1.5px solid #d0d7de;
    border-radius: 6px;
    font-size: .85rem;
    outline: none;
    transition: border-color .15s;
}
.gh-input:focus { border-color: #0969da; box-shadow: 0 0 0 3px rgba(9,105,218,.12); }
.gh-textarea {
    padding: .65rem .75rem;
    border: 1.5px solid #d0d7de;
    border-radius: 6px;
    font-size: .82rem;
    font-family: "SF Mono", "Cascadia Code", monospace;
    line-height: 1.55;
    resize: vertical;
    outline: none;
    transition: border-color .15s;
}
.gh-textarea:focus { border-color: #0969da; box-shadow: 0 0 0 3px rgba(9,105,218,.12); }
.gh-hint {
    font-size: .8225rem;
    color: #6b7280;
}

/* Tags / Labels */
.gh-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}
.gh-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8225rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 20px;
}
.gh-tag--bug     { background: #fef2f2; color: #dc2626; }
.gh-tag--copilot { background: #ecfdf5; color: #059669; }
.gh-tag--ui      { background: #eff6ff; color: #2563eb; }
.gh-tag--triage  { background: #f3f4f6; color: #6b7280; }
.gh-tag--remove {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    opacity: .6;
}
.gh-tag--remove:hover { opacity: 1; }
.gh-tag--remove svg { width: 12px; height: 12px; }
.gh-add-label {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .8225rem;
    font-weight: 500;
    color: #6b7280;
    background: none;
    border: 1.5px dashed #d0d7de;
    border-radius: 20px;
    padding: .2rem .5rem;
    cursor: pointer;
    transition: all .15s;
}
.gh-add-label svg { width: 12px; height: 12px; }
.gh-add-label:hover { border-color: #0969da; color: #0969da; }

/* Copilot / JIRA toggles */
.gh-copilot-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem;
    background: #f6f8fa;
    border: 1.5px solid #d0d7de;
    border-radius: 10px;
}
.gh-copilot-left {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.gh-copilot-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #24292e, #586069);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.gh-copilot-icon svg { width: 16px; height: 16px; }
.gh-copilot-icon.jira-icon {
    background: linear-gradient(135deg, #0052CC, #2684FF);
}
.gh-copilot-text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.gh-copilot-text strong { font-size: .82rem; color: #24292e; }
.gh-copilot-text span   { font-size: .8225rem; color: #6b7280; }

/* Toggle switch */
.gh-toggle {
    position: relative;
    width: 42px;
    height: 22px;
    cursor: pointer;
}
.gh-toggle input { opacity: 0; width: 0; height: 0; }
.gh-toggle-slider {
    position: absolute;
    inset: 0;
    background: #d0d7de;
    border-radius: 11px;
    transition: .25s;
}
.gh-toggle-slider::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    top: 3px;
    left: 3px;
    transition: .25s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.gh-toggle input:checked + .gh-toggle-slider { background: #059669; }
.gh-toggle input:checked + .gh-toggle-slider::before { transform: translateX(20px); }

/* Panel footer */
.gh-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.25rem;
    background: #f6f8fa;
    border-top: 1px solid #d0d7de;
}
.gh-footer-hint {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .8225rem;
    color: #6b7280;
}
.gh-footer-hint svg { width: 14px; height: 14px; }
.gh-btn-create {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.15rem;
    background: #1a7f37;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.gh-btn-create svg { width: 16px; height: 16px; }
.gh-btn-create:hover { background: #116329; }
.gh-btn-create:disabled { opacity: .65; cursor: wait; }

/* ═══ LINKED ISSUE BANNERS ═══ */
.gh-linked-banner {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.1rem;
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 10px;
    margin-top: .75rem;
}
.gh-linked-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #059669;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.gh-linked-icon svg { width: 16px; height: 16px; }
.gh-linked-info { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.gh-linked-title { font-size: .85rem; font-weight: 600; color: #111827; }
.gh-linked-sub   { font-size: .8225rem; color: #6b7280; }
.gh-linked-link {
    font-size: .8225rem;
    font-weight: 500;
    color: #0969da;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}
.gh-linked-link svg { width: 14px; height: 14px; }
.gh-linked-link:hover { text-decoration: underline; }

/* JIRA linked banner */
.jira-linked-banner {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.1rem;
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    border-radius: 10px;
    margin-top: .5rem;
}
.jira-linked-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0052CC, #2684FF);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.jira-linked-icon svg { width: 16px; height: 16px; }

/* ═══ ACTIVITY TIMELINE ═══ */
.bd-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: .5rem;
}
.bd-timeline::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 24px;
    bottom: 8px;
    width: 2px;
    background: #e5e7eb;
}
.bd-timeline-item {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .6rem 0;
    position: relative;
}
.bd-timeline-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}
.bd-timeline-dot svg { width: 14px; height: 14px; }
.bd-timeline-dot--created {
    background: #eff6ff;
    color: #2563eb;
}
.bd-timeline-dot--github {
    background: #24292e;
    color: white;
}
.bd-timeline-dot--jira {
    background: linear-gradient(135deg, #0052CC, #2684FF);
    color: white;
}
.bd-timeline-body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding-top: .2rem;
}
.bd-timeline-summary {
    font-size: .82rem;
    color: #374151;
    margin: 0;
}
.bd-timeline-time {
    font-size: .8225rem;
    color: #9ca3af;
    margin: 0;
}

/* ═══ BUG DETAIL RESPONSIVE ═══ */
@media (max-width: 768px) {
    .bd-info-grid { grid-template-columns: 1fr; }
    .gh-panel-footer { flex-direction: column; gap: .5rem; }
    .gh-copilot-toggle { flex-direction: column; gap: .5rem; align-items: flex-start; }
}

/* ── Responsive ── */
@media (max-width: 620px) {
    .rb-wizard-shell { padding: 0 .75rem; }
    .rb-body    { padding: 1rem 1.15rem 1.25rem; }
    .rb-footer  { padding: .85rem 1.15rem; }
    .wiz-step-label { display: none; }
    .wiz-stepper { justify-content: center; }
    .rb-severity-pills { gap: .25rem; }
    .rb-pill { padding: .35rem .55rem; font-size: .8225rem; }
}

/* ══════════════════════════════════════════════════════════════════
   SUPPORT TICKET DETAIL - additional elements
   ══════════════════════════════════════════════════════════════════ */

/* Reply button */
.st-btn-reply {
    color: #0078d4 !important;
    border: 1px solid rgba(0,120,212,.25);
    background: rgba(0,120,212,.05);
}
.st-btn-reply:hover {
    background: rgba(0,120,212,.1);
    border-color: rgba(0,120,212,.4);
}

/* Internal notes */
.st-notes-area {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.st-notes-input {
    width: 100%;
    border: 1px solid var(--card-border, #e5e7eb);
    border-radius: .5rem;
    padding: .65rem .85rem;
    font-size: .82rem;
    font-family: inherit;
    resize: vertical;
    background: var(--surface-bg, #fff);
    color: var(--text-primary, #111827);
    transition: border-color .15s;
}
.st-notes-input:focus {
    outline: none;
    border-color: var(--accent, #0078d4);
    box-shadow: 0 0 0 3px rgba(0,120,212,.1);
}
.st-notes-input::placeholder {
    color: var(--text-secondary, #6b7280);
}
.st-notes-save {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .85rem;
    font-size: .8225rem;
    font-weight: 600;
    border-radius: .4rem;
    border: none;
    background: var(--accent, #0078d4);
    color: #fff;
    cursor: pointer;
    transition: background .15s;
}
.st-notes-save:hover {
    background: #106ebe;
}

/* Saved notes list */
.st-saved-notes {
    margin-top: .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.st-note-item {
    padding: .65rem .85rem;
    background: var(--hover-bg, #f9fafb);
    border: 1px solid var(--card-border, #e5e7eb);
    border-radius: .5rem;
}
.st-note-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8225rem;
    color: var(--text-secondary, #6b7280);
    margin-bottom: .25rem;
}
.st-note-meta strong {
    color: var(--text-primary, #111827);
}
.st-note-text {
    margin: 0;
    font-size: .82rem;
    color: var(--text-primary, #111827);
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════
   USER SUPPORT - TICKET LIST + MODAL WIZARD
   ═══════════════════════════════════════════════════════════ */

/* ── Header bar ── */
.st-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.st-list-header-left {
    display: flex;
    align-items: baseline;
    gap: .75rem;
}
.st-list-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary, #111827);
}
.st-list-count {
    font-size: .82rem;
    color: var(--text-secondary, #6b7280);
    background: var(--stemblue-10, #f0f4ff);
    padding: .15rem .6rem;
    border-radius: 20px;
    font-weight: 500;
}

/* ── Ticket list (card-based) ── */
.st-ticket-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.st-ticket-card {
    background: var(--surface-card, #ffffff);
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
.st-ticket-card:hover {
    border-color: var(--stemblue-40, #6699dd);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.st-ticket-card.expanded {
    border-color: var(--stemblue-50, #4480cc);
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.st-ticket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem;
    gap: 1rem;
}
.st-ticket-main {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    flex: 1;
}
.st-ticket-title {
    font-weight: 600;
    font-size: .88rem;
    color: var(--text-primary, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-ticket-ref {
    font-size: .8225rem;
    color: var(--text-tertiary, #9ca3af);
    font-family: 'SF Mono', 'Fira Code', monospace;
    white-space: nowrap;
}
.st-ticket-meta {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-shrink: 0;
}
.st-ticket-cat {
    font-size: .8225rem;
    color: var(--text-secondary, #6b7280);
    background: var(--stemblue-10, #f0f4ff);
    padding: .15rem .5rem;
    border-radius: 6px;
    white-space: nowrap;
}
.st-ticket-date {
    font-size: .76rem;
    color: var(--text-tertiary, #9ca3af);
    white-space: nowrap;
}
.st-ticket-chevron {
    display: flex;
    align-items: center;
    color: var(--text-tertiary, #9ca3af);
    transition: transform .2s;
}
.st-ticket-card.expanded .st-ticket-chevron {
    transform: rotate(180deg);
}

/* ── Expanded detail panel ── */
.st-ticket-detail {
    border-top: 1px solid var(--border-light, #e5e7eb);
    padding: 1rem 1.25rem 1.25rem;
    background: var(--stemblue-5, #f8faff);
    border-radius: 0 0 10px 10px;
    animation: st-expand-in .25s ease-out;
}
@keyframes st-expand-in {
    from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
    to   { opacity: 1; max-height: 300px; }
}
.st-ticket-detail-grid {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.st-ticket-detail-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.st-ticket-detail-item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.st-detail-label {
    font-size: .8225rem;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.st-detail-value {
    font-size: .84rem;
    color: var(--text-primary, #111827);
    line-height: 1.45;
    margin: 0;
}

/* ── Support wizard modal - overrides base .modal-dialog ── */
.st-wizard-modal {
    max-width: 640px !important;
    width: 92vw !important;
    background: #f3f4f6 !important;
    padding: 0 !important;
    border-radius: 16px !important;
}
.st-modal-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.st-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid var(--ea-border, #e5e7eb);
    border-radius: 16px 16px 0 0;
}
.st-modal-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ea-black, #111827);
}
.st-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ea-neutral-40, #6b7280);
    padding: .35rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.st-modal-close:hover {
    background: var(--ea-neutral-4, #f3f4f6);
    color: var(--ea-black, #111827);
}
.st-modal-body {
    padding: 1rem 1.5rem 1.5rem;
    max-height: 72vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

/* Stepper inside modal - center it, add vertical breathing room */
.st-modal-body .wiz-stepper {
    justify-content: center;
    padding: .35rem 0 0;
    margin-bottom: 0;
}

/* The .rb-card inside the modal provides the white card look */
.st-modal-body .rb-card {
    border-radius: 14px;
}

/* Make sure .rb-body / .rb-footer keep prototype spacing inside card */
.st-modal-body .rb-body {
    padding: 1.25rem 1.5rem 1.5rem;
}
.st-modal-body .rb-footer {
    padding: .85rem 1.5rem;
    border-top: 1px solid var(--ea-border, #e5e7eb);
    background: #f9fafb;
}
.st-modal-body .wiz-panel-header {
    padding: 1.25rem 1.5rem 0;
}
.st-modal-body .rb-outcome {
    padding: 2.5rem 1.5rem;
}
.st-modal-body .rb-busy {
    padding: 2.5rem 1.5rem;
}

/* ── Conversation Thread ── */
.st-thread {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.st-thread-msg {
    display: flex;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: 10px;
    background: #f9fafb;
    border: 1px solid var(--ea-border, #e5e7eb);
}

.st-msg-admin {
    background: #f0f4ff;
    border-color: #d4ddee;
}

.st-msg-user {
    background: #f9fafb;
}

.st-msg-avatar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    color: #fff;
}

.st-msg-admin .st-msg-avatar {
    background: var(--ea-primary, #4f46e5);
}

.st-msg-user .st-msg-avatar {
    background: #6b7280;
}

.st-msg-content {
    flex: 1;
    min-width: 0;
}

.st-msg-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .3rem;
}

.st-msg-author {
    font-weight: 600;
    font-size: .85rem;
    color: var(--ea-text, #111827);
}

.st-msg-role {
    font-size: .8225rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .1rem .45rem;
    border-radius: 4px;
}

.st-role-admin {
    background: #e0e7ff;
    color: #4338ca;
}

.st-role-user {
    background: #f3f4f6;
    color: #6b7280;
}

.st-msg-time {
    font-size: .8225rem;
    color: #9ca3af;
    margin-left: auto;
}

.st-msg-body {
    font-size: .85rem;
    color: var(--ea-text-secondary, #374151);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.st-reply-count {
    font-size: .8225rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: .5rem;
}

.st-thread-empty {
    padding: 1.5rem;
    text-align: center;
    color: #9ca3af;
    font-size: .85rem;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px dashed var(--ea-border, #e5e7eb);
}

/* ── Reply Preview (inside modal) ── */
.st-reply-preview {
    margin-bottom: 1rem;
}

.st-reply-preview h4 {
    font-size: .8225rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: .5rem;
}

.st-reply-preview-msgs {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    max-height: 180px;
    overflow-y: auto;
    padding-right: .25rem;
}

.st-reply-preview-item {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .5rem .65rem;
    border-radius: 8px;
    background: #f3f4f6;
    font-size: .8225rem;
}

.st-reply-preview-item strong {
    font-weight: 600;
    color: var(--ea-text, #111827);
    white-space: nowrap;
}

.st-preview-text {
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Reply badge on collapsed ticket row ── */
.st-reply-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-primary, #4f46e5);
    background: #eef2ff;
    padding: .15rem .5rem;
    border-radius: 10px;
}

/* ── Spinner small (inline in button) ── */
.as-spinner-sm {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: as-spin .6s linear infinite;
}

/* ═══════════════════════════════════════════════════════
   LRS xAPI SESSION VIEW
   ═══════════════════════════════════════════════════════ */

/* ── Header ── */
.lrs-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.lrs-header-left h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 .25rem;
    color: var(--ea-black);
}
.lrs-header-left p {
    font-size: .85rem;
    color: var(--ea-neutral-60);
    margin: 0;
}
.lrs-header-actions {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}

/* ── Session info card ── */
.lrs-session-card {
    background: var(--ea-white);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--ea-shadow-4);
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.lrs-session-field { min-width: 140px; }
.lrs-session-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ea-neutral-40);
    margin-bottom: .25rem;
}
.lrs-session-value {
    font-size: .88rem;
    font-weight: 500;
    color: var(--ea-black);
}
.lrs-mono {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .8225rem;
    color: var(--ea-blue);
}
.lrs-link {
    color: var(--ea-blue);
    font-size: .76rem;
    word-break: break-all;
}

/* ── Stat chips ── */
.lrs-stats {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.lrs-stat {
    background: var(--ea-white);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-md);
    padding: .85rem 1.15rem;
    flex: 1;
    min-width: 140px;
    box-shadow: var(--ea-shadow-2);
    display: flex;
    align-items: center;
    gap: .75rem;
}
.lrs-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--ea-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lrs-stat-icon svg { width: 18px; height: 18px; }
.lrs-stat-icon.blue   { background: var(--ea-blue-10); color: var(--ea-blue); }
.lrs-stat-icon.green  { background: rgba(43,157,94,.1); color: var(--ea-green-dark); }
.lrs-stat-icon.orange { background: rgba(254,146,13,.1); color: var(--ea-orange); }
.lrs-stat-icon.pink   { background: rgba(240,79,205,.1); color: var(--ea-pink); }
.lrs-stat-icon.red    { background: rgba(229,57,53,.08); color: #e53935; }
.lrs-stat-number {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ea-black);
    line-height: 1;
}
.lrs-stat-label {
    font-size: .8225rem;
    font-weight: 500;
    color: var(--ea-neutral-60);
}

/* ── Toolbar (search + filter pills) ── */
.lrs-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.lrs-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--ea-white);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-md);
    padding: .5rem .75rem;
    flex: 1;
    min-width: 200px;
    transition: border-color .15s;
}
.lrs-search:focus-within { border-color: var(--ea-blue); }
.lrs-search svg { width: 16px; height: 16px; color: var(--ea-neutral-40); flex-shrink: 0; }
.lrs-search input {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--ea-font);
    font-size: .82rem;
    width: 100%;
    color: var(--ea-black);
}
.lrs-search input::placeholder { color: var(--ea-neutral-40); }

/* Filter pills */
.lrs-filters { display: flex; gap: .35rem; flex-wrap: wrap; }
.lrs-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .75rem;
    font-size: .8225rem;
    font-weight: 500;
    border-radius: 100px;
    border: 1px solid var(--ea-border);
    background: var(--ea-white);
    color: var(--ea-neutral-80);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    font-family: var(--ea-font);
}
.lrs-filter-pill:hover { border-color: var(--ea-blue-30); color: var(--ea-blue); }
.lrs-filter-pill.active {
    background: var(--ea-blue-10);
    border-color: var(--ea-blue-30);
    color: var(--ea-blue);
    font-weight: 600;
}
.lrs-filter-pill .count {
    background: var(--ea-neutral-6);
    padding: .1rem .4rem;
    border-radius: 100px;
    font-size: .68rem;
    font-weight: 600;
}
.lrs-filter-pill.active .count {
    background: var(--ea-blue-30);
    color: var(--ea-white);
}

/* ── Buttons ── */
.lrs-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1rem;
    font-family: var(--ea-font);
    font-size: .8225rem;
    font-weight: 600;
    border-radius: var(--ea-radius-xl);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.lrs-btn svg { width: 16px; height: 16px; }
.lrs-btn-primary {
    background: var(--ea-green);
    color: var(--ea-blue);
    border-color: var(--ea-green);
}
.lrs-btn-primary:hover { background: #5dfca0; }
.lrs-btn-secondary {
    background: var(--ea-white);
    color: var(--ea-neutral-80);
    border-color: var(--ea-border);
}
.lrs-btn-secondary:hover { border-color: var(--ea-blue-30); color: var(--ea-blue); }

/* ── Timeline table ── */
.lrs-table-card {
    background: var(--ea-white);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-lg);
    box-shadow: var(--ea-shadow-4);
    overflow: hidden;
}
.lrs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}
.lrs-table thead th {
    background: var(--stemblue);
    padding: .65rem 1rem;
    text-align: left;
    font-size: .84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--stemwhite);
    border-bottom: 1px solid var(--ea-border);
    white-space: nowrap;
    position: sticky;
    top: 0;
}
.lrs-table thead th:first-child { border-radius: var(--ea-radius-sm) 0 0 0; }
.lrs-table thead th:last-child  { border-radius: 0 var(--ea-radius-sm) 0 0; }
.lrs-table tbody tr {
    border-bottom: 1px solid var(--ea-border-subtle);
    transition: background .1s;
}
.lrs-table tbody tr:last-child { border-bottom: none; }
.lrs-table tbody tr:hover { background: var(--ea-neutral-2); }
.lrs-table tbody tr.expanded { background: var(--ea-blue-10); }
.lrs-table td { padding: .65rem 1rem; vertical-align: middle; }

/* Sequence number */
.lrs-seq {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .8225rem;
    color: var(--ea-neutral-40);
    font-weight: 500;
    min-width: 28px;
    text-align: center;
}

/* Timestamp */
.lrs-ts {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .76rem;
    color: var(--ea-neutral-60);
    white-space: nowrap;
}
.lrs-ts-relative {
    display: block;
    font-size: .68rem;
    color: var(--ea-neutral-40);
    margin-top: 1px;
}

/* Verb badge */
.lrs-verb {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .65rem;
    border-radius: 100px;
    font-size: .8225rem;
    font-weight: 600;
    white-space: nowrap;
}
.lrs-verb-launched    { background: var(--ea-blue-10);            color: var(--ea-blue); }
.lrs-verb-attempted   { background: rgba(254,146,13,.1);          color: #c27400; }
.lrs-verb-interacted  { background: rgba(240,79,205,.08);         color: #c040a4; }
.lrs-verb-progressed  { background: rgba(43,157,94,.08);          color: var(--ea-green-dark); }
.lrs-verb-completed   { background: rgba(43,157,94,.12);          color: var(--ea-green-dark); }
.lrs-verb-scored      { background: var(--ea-blue-10);            color: var(--ea-blue); }
.lrs-verb-passed      { background: rgba(43,157,94,.12);          color: var(--ea-green-dark); }
.lrs-verb-failed      { background: rgba(229,57,53,.08);          color: #e53935; }
.lrs-verb-answered    { background: rgba(77,46,253,.06);          color: var(--ea-blue-70); }
.lrs-verb-experienced { background: var(--ea-neutral-6);          color: var(--ea-neutral-80); }
.lrs-verb-terminated  { background: var(--ea-neutral-6);          color: var(--ea-neutral-60); }
.lrs-verb-suspended   { background: rgba(254,146,13,.08);         color: #c27400; }
.lrs-verb-resumed     { background: rgba(43,157,94,.06);          color: var(--ea-green-dark); }
.lrs-verb-viewed      { background: var(--ea-neutral-6);          color: var(--ea-neutral-80); }
.lrs-verb-mastered    { background: linear-gradient(135deg, var(--ea-blue-10), rgba(122,253,181,.12)); color: var(--ea-blue); }
.lrs-verb-asked       { background: rgba(77,46,253,.05);          color: var(--ea-blue-70); }
.lrs-verb-attended    { background: var(--ea-blue-10);            color: var(--ea-blue); }
.lrs-verb-commented   { background: var(--ea-neutral-6);          color: var(--ea-neutral-80); }
.lrs-verb-exited      { background: var(--ea-neutral-6);          color: var(--ea-neutral-60); }
.lrs-verb-preferred   { background: rgba(254,146,13,.06);         color: #c27400; }
.lrs-verb-registered  { background: var(--ea-blue-10);            color: var(--ea-blue); }
.lrs-verb-responded   { background: rgba(77,46,253,.06);          color: var(--ea-blue-70); }
.lrs-verb-shared      { background: rgba(240,79,205,.06);         color: #c040a4; }
.lrs-verb-voided      { background: rgba(229,57,53,.06);          color: #e53935; }
.lrs-verb-unknown     { background: var(--ea-neutral-6);          color: var(--ea-neutral-60); }

/* Object / target */
.lrs-obj {
    font-weight: 500;
    color: var(--ea-black);
}
.lrs-obj-type {
    font-size: .68rem;
    color: var(--ea-neutral-40);
    margin-top: 1px;
}

/* Result column */
.lrs-result-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .5rem;
    border-radius: var(--ea-radius-sm);
    font-size: .8225rem;
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
}
.lrs-result-tag.success { background: rgba(43,157,94,.08); color: var(--ea-green-dark); }
.lrs-result-tag.fail    { background: rgba(229,57,53,.08); color: #e53935; }
.lrs-result-tag.score   { background: var(--ea-blue-10); color: var(--ea-blue); }
.lrs-result-tag.neutral { background: var(--ea-neutral-6); color: var(--ea-neutral-60); }

/* Expand chevron */
.lrs-expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: .25rem;
    border-radius: var(--ea-radius-sm);
    color: var(--ea-neutral-40);
    transition: all .15s;
    display: flex;
}
.lrs-expand-btn:hover { background: var(--ea-neutral-6); color: var(--ea-blue); }
.lrs-expand-btn svg {
    width: 16px;
    height: 16px;
    transition: transform .2s;
}
.lrs-expand-btn.open svg { transform: rotate(90deg); }

/* ── Expanded detail row ── */
.lrs-detail-row td {
    padding: 0 1rem .75rem 3.5rem;
    background: var(--ea-neutral-2);
}
.lrs-detail-panel {
    background: var(--ea-white);
    border: 1px solid var(--ea-border-subtle);
    border-radius: var(--ea-radius-md);
    padding: 1rem 1.25rem;
    margin-top: .25rem;
}
.lrs-detail-tabs {
    display: flex;
    gap: .25rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--ea-border-subtle);
    padding-bottom: 0;
}
.lrs-detail-tab {
    padding: .4rem .75rem;
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-neutral-60);
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all .15s;
    font-family: var(--ea-font);
}
.lrs-detail-tab:hover { color: var(--ea-blue); }
.lrs-detail-tab.active {
    color: var(--ea-blue);
    border-bottom-color: var(--ea-blue);
}

/* JSON viewer */
.lrs-json {
    background: var(--ea-neutral-4);
    border: 1px solid var(--ea-border-subtle);
    border-radius: var(--ea-radius-sm);
    padding: .85rem 1rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .74rem;
    line-height: 1.6;
    color: var(--ea-neutral-80);
    overflow-x: auto;
    white-space: pre;
    max-height: 280px;
    overflow-y: auto;
}

/* Key-value pairs in detail */
.lrs-kv-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: .4rem .75rem;
    font-size: .8225rem;
}
.lrs-kv-key {
    font-weight: 600;
    color: var(--ea-neutral-60);
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .04em;
    padding-top: .15rem;
}
.lrs-kv-val { color: var(--ea-black); }

/* ── Timeline dot ── */
.lrs-timeline-col {
    position: relative;
    width: 3px;
    padding: 0;
}
.lrs-timeline-col::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ea-border);
    transform: translateX(-50%);
}
.lrs-timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ea-blue-30);
    border: 2px solid var(--ea-white);
    position: relative;
    z-index: 1;
    margin: 0 auto;
}
.lrs-timeline-dot.start { background: var(--ea-blue); width: 12px; height: 12px; }
.lrs-timeline-dot.end   { background: var(--ea-neutral-40); width: 12px; height: 12px; }
.lrs-timeline-dot.pass  { background: var(--ea-green-dark); }
.lrs-timeline-dot.fail  { background: #e53935; }
.lrs-timeline-dot.score { background: var(--ea-blue); }
.lrs-timeline-dot.interact { background: var(--ea-pink); }

/* ── Pagination ── */
.lrs-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    border-top: 1px solid var(--ea-border-subtle);
    font-size: .8225rem;
    color: var(--ea-neutral-60);
}
.lrs-pagination-pages {
    display: flex;
    gap: .25rem;
}
.lrs-page-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ea-radius-sm);
    border: 1px solid var(--ea-border);
    background: var(--ea-white);
    font-family: var(--ea-font);
    font-size: .76rem;
    font-weight: 500;
    color: var(--ea-neutral-60);
    cursor: pointer;
    transition: all .15s;
}
.lrs-page-btn:hover:not(:disabled) { border-color: var(--ea-blue-30); color: var(--ea-blue); }
.lrs-page-btn:disabled { opacity: .4; cursor: default; }
.lrs-page-btn.active {
    background: var(--ea-blue);
    color: var(--ea-white);
    border-color: var(--ea-blue);
}
.lrs-page-btn svg { width: 14px; height: 14px; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .lrs-header { flex-direction: column; }
    .lrs-session-card { flex-direction: column; gap: 1rem; }
    .lrs-stats { flex-direction: column; }
    .lrs-table { font-size: .76rem; }
    .lrs-table thead th,
    .lrs-table td { padding: .5rem .65rem; }
    .lrs-kv-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   WEBSITE FEEDBACK FORM (fb-* prefix)
   ═══════════════════════════════════════════════════════════════════════ */

.fb-card {
    background: var(--ea-white);
    border: 1px solid var(--ea-border);
    border-radius: 12px;
    padding: 2rem;
}

.fb-busy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 1rem;
    color: var(--ea-muted);
}

.fb-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--ea-border);
    border-top-color: var(--ea-blue);
    border-radius: 50%;
    animation: fb-spin .8s linear infinite;
}

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

.fb-outcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .75rem;
    padding: 2rem 1rem;
}

.fb-outcome h3 { margin: 0; font-size: 1.15rem; color: var(--ea-text); }
.fb-outcome p { margin: 0; color: var(--ea-muted); max-width: 400px; line-height: 1.5; }

.fb-outcome-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.fb-outcome-icon svg { width: 28px; height: 28px; }
.fb-outcome-icon.success { background: #ecfdf5; color: #059669; }
.fb-outcome-icon.error { background: #fef2f2; color: #dc2626; }

.fb-outcome-ref {
    display: flex; gap: .5rem; align-items: center;
    background: var(--ea-bg); border-radius: 8px; padding: .5rem 1rem;
    font-size: .82rem;
}
.fb-ref-label { color: var(--ea-muted); }
.fb-ref-value { font-weight: 600; font-family: 'SF Mono', 'Fira Code', monospace; color: var(--ea-blue); }

.fb-form-header { margin-bottom: 1.5rem; }
.fb-form-header h2 { margin: 0 0 .35rem; font-size: 1.2rem; color: var(--ea-text); }
.fb-form-header p { margin: 0; color: var(--ea-muted); font-size: .88rem; line-height: 1.45; }

.fb-question {
    padding: 1.25rem 0;
    border-top: 1px solid var(--ea-border);
}
.fb-question:first-of-type { border-top: none; }

.fb-label {
    display: block;
    font-weight: 600;
    font-size: .88rem;
    color: var(--ea-text);
    margin-bottom: .65rem;
}

.fb-required { color: #dc2626; }
.fb-optional { color: var(--ea-muted); font-weight: 400; font-size: .82rem; }

/* Stars */
.fb-star-row {
    display: flex;
    gap: .35rem;
}
.fb-star {
    background: none;
    border: none;
    cursor: pointer;
    padding: .15rem;
    color: var(--ea-border);
    transition: color .15s, transform .15s;
}
.fb-star svg { width: 28px; height: 28px; fill: none; }
.fb-star.filled { color: #f59e0b; }
.fb-star.filled svg { fill: #f59e0b; }
.fb-star:hover { transform: scale(1.15); }

/* Matrix */
.fb-matrix {
    display: grid;
    gap: 0;
    border: 1px solid var(--ea-border);
    border-radius: 8px;
    overflow: hidden;
    font-size: .82rem;
}
.fb-matrix-header {
    display: grid;
    grid-template-columns: 140px repeat(5, 1fr);
    background: var(--ea-bg);
    border-bottom: 1px solid var(--ea-border);
}
.fb-matrix-col-header {
    text-align: center;
    padding: .5rem .25rem;
    font-weight: 600;
    color: var(--ea-muted);
    font-size: .75rem;
}
.fb-matrix-row {
    display: grid;
    grid-template-columns: 140px repeat(5, 1fr);
    border-bottom: 1px solid var(--ea-border);
    align-items: center;
}
.fb-matrix-row:last-child { border-bottom: none; }
.fb-matrix-label {
    padding: .6rem .75rem;
    font-weight: 500;
    color: var(--ea-text);
}
.fb-matrix-cell {
    display: flex;
    justify-content: center;
    padding: .5rem 0;
}

/* Radio */
.fb-radio-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}
.fb-radio-wrapper input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.fb-radio-custom {
    width: 18px;
    height: 18px;
    border: 2px solid var(--ea-border);
    border-radius: 50%;
    display: inline-block;
    transition: border-color .15s;
    position: relative;
}
.fb-radio-wrapper input[type="radio"]:checked + .fb-radio-custom {
    border-color: var(--ea-blue);
}
.fb-radio-wrapper input[type="radio"]:checked + .fb-radio-custom::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ea-blue);
}

.fb-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

/* Button-based radio option (replaces native radio inputs) */
.fb-radio-option {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .85rem;
    border: 1px solid var(--ea-border);
    border-radius: 8px;
    background: var(--ea-white);
    font-size: .86rem;
    font-family: inherit;
    color: var(--ea-text);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.fb-radio-option:hover {
    border-color: var(--ea-blue);
    background: rgba(99,102,241,.04);
}
.fb-radio-option.fb-radio-selected {
    border-color: var(--ea-blue);
    background: rgba(99,102,241,.08);
}
.fb-radio-dot {
    width: 18px;
    height: 18px;
    border: 2px solid var(--ea-border);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    transition: border-color .15s;
}
.fb-radio-selected .fb-radio-dot {
    border-color: var(--ea-blue);
}
.fb-radio-selected .fb-radio-dot::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ea-blue);
}

/* InputRadio label styling */
.fb-radio-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .85rem;
    border: 1px solid var(--ea-border);
    border-radius: 8px;
    background: var(--ea-white);
    font-size: .86rem;
    color: var(--ea-text);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.fb-radio-label:hover {
    border-color: var(--ea-blue);
    background: rgba(99,102,241,.04);
}
.fb-radio-label:has(input:checked) {
    border-color: var(--ea-blue);
    background: rgba(99,102,241,.08);
}
.fb-radio-label input[type="radio"] {
    accent-color: var(--ea-blue);
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

/* Override Blazor InputRadio validation classes (green/red borders) */
.fb-radio-label input[type="radio"].valid,
.fb-radio-label input[type="radio"].modified,
.fb-radio-label input[type="radio"].invalid {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}
.fb-card .valid,
.fb-card .modified {
    outline: none;
    box-shadow: none;
}

/* Textarea */
.fb-textarea {
    display: block;
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--ea-border);
    border-radius: 8px;
    font-size: .86rem;
    font-family: inherit;
    color: var(--ea-text);
    resize: vertical;
    min-height: 80px;
}
.fb-textarea:focus {
    outline: none;
    border-color: var(--ea-blue);
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}

/* Actions */
.fb-actions {
    padding-top: 1.25rem;
    border-top: 1px solid var(--ea-border);
    display: flex;
    justify-content: flex-end;
}

.fb-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem 1.25rem;
    border: none;
    border-radius: var(--ea-radius-xl);
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
}
.fb-btn-primary {
    background: var(--ea-green);
    color: var(--ea-blue);
}
.fb-btn-primary:hover {
    background: #5dfca0;
    box-shadow: 0 2px 8px rgba(122,253,181,.35);
}
.fb-btn-secondary {
    background: var(--ea-bg);
    color: var(--ea-text);
    border: 1px solid var(--ea-border);
}
.fb-btn-secondary:hover { background: var(--ea-border); }

/* Validation */
.fb-invalid {
    border-left: 3px solid #dc2626;
    padding-left: calc(1.25rem - 3px);
}
.fb-error-msg {
    display: block;
    font-size: .78rem;
    color: #dc2626;
    margin-top: .4rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   FEEDBACK CHARTS PANEL (fbc-* prefix)
   ═══════════════════════════════════════════════════════════════════════ */

.fbc-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.fbc-stat-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: var(--ea-white);
    border: 1px solid var(--ea-border);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
}
.fbc-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fbc-stat-text {
    display: flex;
    flex-direction: column;
}
.fbc-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ea-text);
    line-height: 1.2;
}
.fbc-stat-label {
    font-size: .78rem;
    color: var(--ea-muted);
    margin-top: .15rem;
}
.fbc-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.fbc-grid-full {
    grid-column: 1 / -1;
}
.fbc-chart-wrap {
    min-height: 260px;
}

/* Word cloud */
.fbc-word-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem .85rem;
    padding: 1.25rem .75rem;
    min-height: 120px;
}
.fbc-word {
    display: inline-block;
    color: var(--ea-blue);
    font-weight: 600;
    line-height: 1.3;
    cursor: default;
    transition: transform .15s, opacity .15s;
    white-space: nowrap;
}
.fbc-word:hover {
    transform: scale(1.12);
    opacity: 1 !important;
}

@media (max-width: 1024px) {
    .fbc-stats-row { grid-template-columns: repeat(2, 1fr); }
    .fbc-chart-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .fbc-stats-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FEEDBACK RESPONSE DETAIL VIEW (fr-* prefix)
   ═══════════════════════════════════════════════════════════════════════ */

/* Star display (read-only) */
.fr-star-display {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.fr-star {
    width: 24px;
    height: 24px;
    fill: none;
    color: var(--ea-border);
}
.fr-star--filled {
    color: #f59e0b;
    fill: #f59e0b;
}
.fr-star-text {
    margin-left: .5rem;
    font-weight: 600;
    font-size: .88rem;
    color: var(--ea-muted);
}

/* Inline stars in table */
.fr-stars-inline {
    color: #f59e0b;
    letter-spacing: 1px;
    font-size: .85rem;
}

/* Rating grid (bar chart style) */
.fr-rating-grid {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.fr-rating-row {
    display: grid;
    grid-template-columns: 120px 1fr 90px;
    align-items: center;
    gap: .75rem;
}
.fr-rating-label {
    font-size: .84rem;
    font-weight: 500;
    color: var(--ea-text);
}
.fr-rating-bar-track {
    height: 8px;
    background: var(--ea-bg);
    border-radius: 4px;
    overflow: hidden;
}
.fr-rating-bar-fill {
    height: 100%;
    background: var(--ea-blue);
    border-radius: 4px;
    transition: width .3s ease;
}
.fr-rating-value {
    font-size: .78rem;
    color: var(--ea-muted);
    text-align: right;
}

/* Response items */
.fr-responses {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.fr-response-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .85rem 0;
    border-bottom: 1px solid var(--ea-border);
}
.fr-response-item:last-child { border-bottom: none; }
.fr-response-q {
    font-size: .86rem;
    color: var(--ea-text);
    font-weight: 500;
}
.fr-response-a {
    font-size: .86rem;
    color: var(--ea-muted);
    text-align: right;
}

/* Badges */
.fr-badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .65rem;
    border-radius: 20px;
    font-size: .76rem;
    font-weight: 600;
}
.fr-badge--yes { background: #ecfdf5; color: #059669; }
.fr-badge--no { background: #fef2f2; color: #dc2626; }
.fr-badge--na { background: var(--ea-bg); color: var(--ea-muted); }

/* NPS labels */
.fr-nps {
    display: inline-flex;
    align-items: center;
    padding: .2rem .65rem;
    border-radius: 20px;
    font-size: .76rem;
    font-weight: 600;
}
.fr-nps--promoter { background: #ecfdf5; color: #059669; }
.fr-nps--neutral { background: #fffbeb; color: #d97706; }
.fr-nps--detractor { background: #fef2f2; color: #dc2626; }

/* Responsive */
@media (max-width: 768px) {
    .fb-matrix-header,
    .fb-matrix-row { grid-template-columns: 100px repeat(5, 1fr); }
    .fb-matrix-col-header { font-size: .68rem; }
    .fb-matrix-label { font-size: .78rem; padding: .5rem; }
    .fb-card { padding: 1.25rem; }
    .fr-rating-row { grid-template-columns: 90px 1fr 70px; }
    .fr-response-item { flex-direction: column; align-items: flex-start; gap: .35rem; }
    .fr-response-a { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════
   TASK DETAIL VIEW
   ═══════════════════════════════════════════════════════════════ */

/* ── Add subtask form ── */
.td-add-subtask {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .65rem;
}
.td-add-subtask input {
    flex: 1;
    font-family: var(--ea-font);
    font-size: .84rem;
    padding: .45rem .65rem;
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-sm);
    outline: none;
    transition: border-color .15s;
}
.td-add-subtask input:focus { border-color: var(--ea-blue); box-shadow: 0 0 0 3px rgba(77, 46, 253, .08); }
.td-add-subtask input::placeholder { color: var(--ea-neutral-40); }

/* ── Test case JSON import ── */
.td-import-error {
    display: flex; align-items: center; gap: .45rem;
    padding: .55rem .75rem; border-radius: var(--ea-radius-sm);
    background: #fef2f2; color: #dc2626;
    font-size: .82rem; font-weight: 500; margin-bottom: .65rem;
    border: 1px solid #fecaca;
}
.td-import-success {
    display: flex; align-items: center; gap: .45rem;
    padding: .55rem .75rem; border-radius: var(--ea-radius-sm);
    background: #ecfdf5; color: #059669;
    font-size: .82rem; font-weight: 500; margin-bottom: .65rem;
    border: 1px solid #a7f3d0;
}
.td-import-preview { margin-top: .25rem; }
.td-import-preview-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .55rem;
}
.td-import-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-sm);
}
.td-import-table {
    width: 100%; border-collapse: collapse;
    font-size: .8225rem;
}
.td-import-table th {
    text-align: left; padding: .5rem .65rem;
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--ea-neutral-40);
    background: var(--ea-neutral-2);
    border-bottom: 1px solid var(--ea-border);
}
.td-import-table td {
    padding: .5rem .65rem;
    border-bottom: 1px solid var(--ea-border-subtle);
    vertical-align: top;
}
.td-import-table tbody tr:last-child td { border-bottom: none; }
.td-import-table tbody tr:hover { background: var(--ea-neutral-2); }
.td-import-row-selected { background: rgba(77, 46, 253, .04); }
.td-import-table input[type="checkbox"] {
    width: 15px; height: 15px; accent-color: var(--ea-blue);
    cursor: pointer; margin: 0;
}
.td-import-toolbar {
    display: flex; align-items: center; gap: .65rem;
    flex-wrap: wrap;
    margin-top: .65rem;
    padding: .55rem .75rem;
    background: var(--ea-neutral-2);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-sm);
}
.td-import-toolbar-count {
    font-size: .78rem; font-weight: 700; color: var(--ea-blue);
    white-space: nowrap;
}
.td-import-toolbar-action {
    display: flex; align-items: center; gap: .35rem;
}
.td-import-toolbar-label {
    display: flex; align-items: center; gap: .25rem;
    font-size: .75rem; font-weight: 600; color: var(--ea-neutral-60);
    white-space: nowrap;
}
.td-import-toolbar-select {
    font-size: .78rem !important;
    padding: .3rem .5rem !important;
    min-width: 140px;
    max-width: 200px;
}
.td-import-toolbar-apply {
    font-size: .72rem !important;
    padding: .3rem .55rem !important;
    font-weight: 600;
}
.td-import-toolbar-apply:disabled {
    opacity: .4; cursor: not-allowed;
}
.td-import-toolbar-divider {
    width: 1px; height: 22px;
    background: var(--ea-border);
    flex-shrink: 0;
}
.td-pr-link {
    display: inline-flex; align-items: center; gap: .3rem;
    color: var(--ea-blue); font-weight: 600; font-size: .8225rem;
    text-decoration: none; max-width: 200px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.td-pr-link:hover { text-decoration: underline; }
.td-pr-link::before {
    content: "";
    display: inline-block; width: 14px; height: 14px; flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Cpath d='M6 9v12'/%3E%3Cpath d='M18 9a9 9 0 0 0-9 9'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Cpath d='M6 9v12'/%3E%3Cpath d='M18 9a9 9 0 0 0-9 9'/%3E%3C/svg%3E") center/contain no-repeat;
}
.td-pr-edit-btn {
    background: none; border: none; cursor: pointer;
    color: var(--ea-neutral-40); padding: 2px;
    border-radius: 3px; display: inline-flex; align-items: center;
}
.td-pr-edit-btn:hover { color: var(--ea-blue); background: var(--ea-neutral-4); }
.td-json-example {
    font-family: "SF Mono", "Cascadia Code", "Fira Code", monospace;
    font-size: .75rem; line-height: 1.6;
    background: var(--ea-neutral-4);
    border: 1px solid var(--ea-border-subtle);
    border-radius: var(--ea-radius-sm);
    padding: .75rem; margin-top: .5rem;
    overflow-x: auto; white-space: pre;
    color: var(--ea-neutral-60);
}

/* ── Page header ── */
.td-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.td-header-left {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.td-header h1 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ea-black);
    margin: 0;
}
.td-ref {
    font-size: .8225rem;
    font-weight: 700;
    color: var(--ea-blue);
    font-family: "SF Mono", "Cascadia Code", "Fira Code", monospace;
    background: var(--ea-blue-10);
    padding: .15rem .5rem;
    border-radius: 999px;
}
.td-header-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
}

/* ── Badges ── */
.td-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .7rem;
    border-radius: 100px;
    font-size: .8225rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}
.td-badge--todo       { background: #f3f4f6; color: #6b7280; }
.td-badge--progress   { background: #eff6ff; color: #2563eb; }
.td-badge--review     { background: #fffbeb; color: #d97706; }
.td-badge--qa         { background: #ecfeff; color: #0891b2; }
.td-badge--done       { background: #ecfdf5; color: #059669; }
.td-badge-dot { width: 7px; height: 7px; border-radius: 50%; }

.td-priority {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .7rem;
    border-radius: 100px;
    font-size: .8225rem;
    font-weight: 600;
    white-space: nowrap;
}
.td-priority-dot { width: 7px; height: 7px; border-radius: 50%; }
.td-priority--low      { background: #ecfdf5; color: #059669; }
.td-priority--low .td-priority-dot { background: #059669; }
.td-priority--medium   { background: #fffbeb; color: #d97706; }
.td-priority--medium .td-priority-dot { background: #d97706; }
.td-priority--high     { background: #fef2f2; color: #dc2626; }
.td-priority--high .td-priority-dot { background: #dc2626; }
.td-priority--critical { background: #f5f3ff; color: #7c3aed; }
.td-priority--critical .td-priority-dot { background: #7c3aed; }

/* ── Buttons ── */
.td-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--ea-font);
    font-size: .8225rem;
    font-weight: 600;
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-xl);
    background: var(--ea-white);
    color: var(--ea-neutral-60);
    padding: .45rem .85rem;
    cursor: pointer;
    transition: all .15s;
}
.td-btn:hover { border-color: var(--ea-blue); color: var(--ea-blue); }
.td-btn svg { width: 14px; height: 14px; }
.td-btn-primary { background: var(--ea-green); border-color: var(--ea-green); color: var(--ea-blue); }
.td-btn-primary:hover { background: #5dfca0; }
.td-btn-danger { color: #dc2626; border-color: #fecaca; }
.td-btn-danger:hover { background: #fef2f2; border-color: #dc2626; }

/* ── Info grid ── */
.td-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.td-info-item {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .65rem .75rem;
    background: var(--ea-neutral-2);
    border-radius: var(--ea-radius-sm);
    min-width: 0;
}
.td-info-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--ea-radius-sm);
    background: var(--ea-blue-10);
    color: var(--ea-blue);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.td-info-icon svg { width: 16px; height: 16px; }
.td-info-label {
    font-size: .8225rem;
    font-weight: 600;
    color: var(--ea-neutral-40);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.4;
}
.td-info-value {
    font-size: .85rem;
    font-weight: 700;
    color: var(--ea-black);
    margin-top: .1rem;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

/* ── Subtasks ── */
.td-subtask-progress { display: flex; align-items: center; gap: .65rem; margin-bottom: .85rem; }
.td-progress-bar { flex: 1; height: 6px; background: var(--ea-neutral-6); border-radius: 999px; overflow: hidden; }
.td-progress-fill { height: 100%; background: var(--ea-blue); border-radius: 999px; transition: width .3s; }
.td-progress-label { font-size: .8225rem; font-weight: 700; color: var(--ea-neutral-50); white-space: nowrap; }

.td-subtask-list { list-style: none; display: flex; flex-direction: column; gap: .5rem; padding: 0; margin: 0; }
.td-subtask {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .75rem;
    border: 1px solid var(--ea-border-subtle);
    border-radius: var(--ea-radius-sm);
    transition: all .12s;
    cursor: pointer;
}
.td-subtask:hover { border-color: var(--ea-blue-30); background: var(--ea-blue-10); }
.td-subtask-check {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid var(--ea-neutral-20);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all .15s;
}
.td-subtask.done .td-subtask-check { background: #059669; border-color: #059669; color: white; }
.td-subtask.done .td-subtask-check svg { display: block; }
.td-subtask-check svg { display: none; width: 12px; height: 12px; }
.td-subtask-title { flex: 1; font-size: .84rem; font-weight: 500; color: var(--ea-black); }
.td-subtask.done .td-subtask-title { text-decoration: line-through; color: var(--ea-neutral-40); }
.td-subtask-assignee {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--ea-blue);
    color: white;
    font-size: .6rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* ── Activity timeline ── */
.td-timeline { display: flex; flex-direction: column; gap: 0; }
.td-timeline-item { display: flex; gap: .75rem; padding: .85rem 0; position: relative; }
.td-timeline-item + .td-timeline-item { border-top: 1px solid var(--ea-border-subtle); }
.td-timeline-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--ea-blue);
    color: white;
    font-size: .68rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.td-timeline-body { flex: 1; min-width: 0; }
.td-timeline-meta { display: flex; align-items: center; gap: .4rem; margin-bottom: .2rem; }
.td-timeline-author { font-size: .8225rem; font-weight: 600; color: var(--ea-black); }
.td-timeline-time { font-size: .8225rem; color: var(--ea-neutral-40); }
.td-timeline-text { font-size: .84rem; color: var(--ea-neutral-60); line-height: 1.55; }

/* ── Acceptance Criteria (Given/When/Then) ── */
.ac-list { display: flex; flex-direction: column; gap: .65rem; }
.ac-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .65rem .85rem;
    border-radius: 8px;
    border: 1px solid var(--ea-border-subtle, #e2e8f0);
    background: var(--ea-surface, #fff);
    transition: border-color .15s, background .15s;
}
.ac-item:hover { border-color: var(--ad-accent, #6366f1); }
.ac-item-met { background: rgba(5, 150, 105, .04); border-color: rgba(5, 150, 105, .25); }
.ac-toggle {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--ea-neutral-30, #cbd5e1);
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    margin-top: .15rem;
    transition: background .15s, border-color .15s;
}
.ac-toggle svg { display: none; width: 12px; height: 12px; }
.ac-item-met .ac-toggle { background: #059669; border-color: #059669; color: #fff; }
.ac-item-met .ac-toggle svg { display: block; }
.ac-body { flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.ac-scenario { font-size: .86rem; font-weight: 600; color: var(--ea-black, #1a1a2e); margin-bottom: .15rem; }
.ac-item-met .ac-scenario { text-decoration: line-through; color: var(--ea-neutral-40); }
.ac-clause { font-size: .84rem; color: var(--ea-neutral-70, #475569); line-height: 1.5; }
.ac-clause-indent { padding-left: 1.2rem; }
.ac-item-met .ac-clause { text-decoration: line-through; color: var(--ea-neutral-40); }
.ac-keyword-secondary {
    font-weight: 600;
    font-size: .8225rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ea-neutral-50, #94a3b8);
    margin-right: .35rem;
}
.ac-keyword {
    font-weight: 700;
    font-size: .8225rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ad-accent, #6366f1);
    margin-right: .35rem;
}
.ac-remove {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border: none; background: transparent;
    color: var(--ea-neutral-30);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
    opacity: 0; transition: opacity .15s, color .15s;
}
.ac-item:hover .ac-remove { opacity: 1; }
.ac-remove:hover { color: var(--ad-red, #ef4444); }
.ac-remove svg { width: 14px; height: 14px; }

/* AC form */
.ac-form {
    display: flex; flex-direction: column; gap: .5rem;
    padding: .75rem .85rem;
    border-radius: 8px;
    border: 1px dashed var(--ad-accent, #6366f1);
    background: var(--ad-accent-5, rgba(99,102,241,.03));
    margin-top: .5rem;
}
.ac-form-row { display: flex; align-items: center; gap: .5rem; }
.ac-form-label {
    flex-shrink: 0;
    width: 52px;
    font-weight: 700;
    font-size: .8225rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ad-accent, #6366f1);
}
.ac-form-label-wide { width: 72px; }
.ac-form-input {
    flex: 1;
    padding: .45rem .65rem;
    font-size: .84rem;
    border: 1px solid var(--ea-border-subtle, #e2e8f0);
    border-radius: 6px;
    background: var(--ea-surface, #fff);
    color: var(--ea-black, #1a1a2e);
    outline: none;
    transition: border-color .15s;
}
.ac-form-input:focus { border-color: var(--ad-accent, #6366f1); }
.ac-form-row-indent { padding-left: calc(52px + .5rem); }
.ac-form-actions { display: flex; gap: .5rem; margin-top: .25rem; }

/* AC clause add/remove buttons */
.ac-clause-add-btn, .ac-clause-remove-btn {
    flex-shrink: 0;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--ea-border-subtle, #e2e8f0);
    border-radius: 6px;
    background: transparent;
    color: var(--ea-neutral-40);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.ac-clause-add-btn:hover { color: var(--ad-accent, #6366f1); border-color: var(--ad-accent, #6366f1); }
.ac-clause-remove-btn:hover { color: var(--ad-red, #ef4444); border-color: var(--ad-red, #ef4444); }

/* AC add button */
.ac-add-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .82rem; font-weight: 600;
    color: var(--ad-accent, #6366f1);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: .3rem 0;
    margin-top: .35rem;
}
.ac-add-btn:hover { text-decoration: underline; }
.ac-add-btn svg { width: 16px; height: 16px; }

/* ── Comment box ── */
.td-comment-box { display: flex; gap: .65rem; margin-top: .5rem; padding-top: .85rem; border-top: 1px solid var(--ea-border-subtle); }
.td-comment-input { flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.td-comment-textarea {
    width: 100%;
    padding: .6rem .85rem;
    border: 1.5px solid var(--ea-border);
    border-radius: var(--ea-radius-sm);
    font-family: var(--ea-font);
    font-size: .84rem;
    color: var(--ea-black);
    resize: vertical;
    min-height: 70px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.td-comment-textarea:focus { border-color: var(--ea-blue); box-shadow: 0 0 0 3px rgba(77, 46, 253, .08); }
.td-comment-actions { display: flex; justify-content: flex-end; gap: .5rem; align-items: center; }

/* ── Comment Reactions (JIRA-style) ── */
.td-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .45rem; }
.td-reaction-chip {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .15rem .5rem;
    border: 1px solid var(--ea-border-subtle, #e2e8f0);
    border-radius: 20px;
    background: var(--ea-surface, #f8f9fc);
    cursor: pointer;
    font-size: .78rem;
    transition: border-color .15s, background .15s;
}
.td-reaction-chip:hover { border-color: var(--ea-blue, #4D2EFD); background: rgba(77, 46, 253, .05); }
.td-reaction-chip.mine { border-color: var(--ea-blue, #4D2EFD); background: rgba(77, 46, 253, .08); }
.td-reaction-emoji { font-size: .9rem; line-height: 1; }
.td-reaction-count { font-size: .72rem; font-weight: 600; color: var(--ea-neutral-60, #475569); }
.td-reaction-chip.mine .td-reaction-count { color: var(--ea-blue, #4D2EFD); }
.td-reaction-add-wrap { position: relative; }
.td-reaction-add-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border: 1px dashed var(--ea-border-subtle, #e2e8f0);
    border-radius: 50%;
    background: transparent;
    color: var(--ea-neutral-40, #94a3b8);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.td-reaction-add-btn:hover { border-color: var(--ea-blue, #4D2EFD); color: var(--ea-blue, #4D2EFD); background: rgba(77, 46, 253, .04); }
.td-reaction-picker {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .15rem;
    padding: .35rem .45rem;
    background: var(--ea-surface-elevated, #fff);
    border: 1px solid var(--ea-border, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
    z-index: 10;
    white-space: nowrap;
}
.td-reaction-picker-item {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    border: none; background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s, transform .12s;
}
.td-reaction-picker-item:hover { background: rgba(77, 46, 253, .08); transform: scale(1.2); }

/* ── Collapsible section header ── */
.td-collapsible-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    user-select: none;
    padding: .25rem 0;
}
.td-collapsible-header:hover .td-collapse-chevron {
    color: var(--ea-blue, #4D2EFD);
}
.td-collapse-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--ea-neutral-40, #94a3b8);
    transition: transform .2s ease, color .15s;
}
.td-collapse-chevron.expanded {
    transform: rotate(180deg);
}

/* ── Attachments grid ── */
.td-attachments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}
.td-attachment-card {
    position: relative;
    border: 1.5px solid var(--ea-border);
    border-radius: var(--ea-radius-sm);
    overflow: hidden;
    background: var(--ea-white);
    transition: box-shadow .15s, border-color .15s;
}
.td-attachment-card:hover {
    border-color: var(--ea-blue);
    box-shadow: 0 2px 8px rgba(77, 46, 253, .1);
}
.td-attachment-preview {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ea-neutral-2);
    overflow: hidden;
}
.td-attachment-preview img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.td-attachment-preview.td-attachment-video svg,
.td-attachment-preview.td-attachment-file svg {
    width: 32px; height: 32px;
    color: var(--ea-neutral-40);
}
.td-attachment-meta {
    padding: .5rem .65rem;
    display: flex; flex-direction: column; gap: .1rem;
}
.td-attachment-name {
    font-size: .8225rem; font-weight: 600;
    color: var(--ea-black);
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.td-attachment-name:hover { color: var(--ea-blue); }
.td-attachment-size {
    font-size: .75rem; color: var(--ea-neutral-40);
}
.td-attachment-remove {
    position: absolute; top: .35rem; right: .35rem;
    width: 22px; height: 22px;
    border: none; border-radius: 50%;
    background: rgba(0,0,0,.45); color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0;
    transition: opacity .15s, background .15s;
}
.td-attachment-remove svg { width: 12px; height: 12px; }
.td-attachment-card:hover .td-attachment-remove { opacity: 1; }
.td-attachment-remove:hover { background: var(--ea-red, #dc2626); }

/* ── Upload dropzone ── */
.td-upload-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border: 2px dashed var(--ea-border);
    border-radius: var(--ea-radius-sm);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.td-upload-dropzone:hover {
    border-color: var(--ea-blue);
    background: rgba(77, 46, 253, .03);
}
.td-upload-content {
    display: flex; flex-direction: column;
    align-items: center; gap: .25rem;
    font-size: .84rem; color: var(--ea-neutral-60);
}
.td-upload-hint { font-size: .75rem; color: var(--ea-neutral-40); }

/* ── Pending files ── */
.td-pending-files { display: flex; flex-direction: column; gap: .35rem; }
.td-pending-file {
    display: flex; align-items: center; gap: .5rem;
    padding: .35rem .6rem;
    background: var(--ea-neutral-2);
    border-radius: var(--ea-radius-sm);
    font-size: .8225rem;
}
.td-pending-file-name { font-weight: 600; color: var(--ea-black); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-pending-file-size { font-size: .75rem; color: var(--ea-neutral-40); }
.td-pending-file .td-attachment-remove {
    position: static; opacity: 1;
    width: 20px; height: 20px;
    background: transparent; color: var(--ea-neutral-40);
}
.td-pending-file .td-attachment-remove:hover { color: var(--ea-red, #dc2626); background: transparent; }

/* ── Comment attachments ── */
.td-comment-attachments {
    display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem;
}
.td-comment-attachment-thumb {
    display: block;
    width: 80px; height: 60px;
    border-radius: 6px; overflow: hidden;
    border: 1.5px solid var(--ea-border);
    transition: border-color .15s;
}
.td-comment-attachment-thumb:hover { border-color: var(--ea-blue); }
.td-comment-attachment-thumb img {
    width: 100%; height: 100%; object-fit: cover;
}
.td-comment-attachment-file {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .25rem .55rem;
    border: 1.5px solid var(--ea-border);
    border-radius: 6px;
    font-size: .8225rem; color: var(--ea-neutral-60);
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.td-comment-attachment-file:hover { border-color: var(--ea-blue); color: var(--ea-blue); }

/* ── Sidebar - Status flow ── */
.td-status-flow { display: flex; flex-direction: column; gap: .4rem; }
.td-status-btn {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .55rem;
    border: 1.5px solid var(--ea-border);
    border-radius: var(--ea-radius-sm);
    background: var(--ea-white);
    font-family: var(--ea-font);
    font-size: .8225rem; font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.td-status-btn svg { width: 15px; height: 15px; }
.td-status-btn--todo     { border-color: #6b7280; color: #6b7280; background: #f3f4f6; }
.td-status-btn--todo:hover { background: #6b7280; color: white; }
.td-status-btn--progress { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
.td-status-btn--progress:hover { background: #2563eb; color: white; }
.td-status-btn--review   { border-color: #d97706; color: #d97706; background: #fffbeb; }
.td-status-btn--review:hover { background: #d97706; color: white; }
.td-status-btn--qa       { border-color: #0891b2; color: #0891b2; background: #ecfeff; }
.td-status-btn--qa:hover { background: #0891b2; color: white; }
.td-status-btn--done     { border-color: #059669; color: #059669; background: #ecfdf5; }
.td-status-btn--done:hover { background: #059669; color: white; }

/* ── Sidebar - Action card ── */
.td-action-card {
    background: var(--ea-white);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-lg);
    padding: 1.25rem;
    display: flex; flex-direction: column;
    gap: .85rem;
}
.td-action-row { display: flex; align-items: center; justify-content: space-between; }
.td-action-label {
    font-size: .8225rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--ea-neutral-40);
}
.td-action-value { font-size: .84rem; font-weight: 600; color: var(--ea-black); }
.td-action-divider { border: none; border-top: 1px solid var(--ea-border-subtle); margin: 0; }

.td-assignee-row { display: flex; align-items: center; gap: .55rem; }
.td-assignee-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--ea-blue);
    color: var(--ea-white);
    font-size: .8225rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.td-assignee-name { font-size: .84rem; font-weight: 600; color: var(--ea-black); }

/* ── Labels ── */
.td-labels-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.td-label-tag {
    display: inline-flex; align-items: center; gap: .2rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .68rem; font-weight: 600;
    border: 1px solid var(--ea-blue-30);
    color: var(--ea-blue);
    background: var(--ea-blue-10);
}

/* ── Inline editing ── */
.td-inline-editable {
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--ea-radius-sm);
    padding: .15rem .35rem;
    margin: -.15rem -.35rem;
    transition: border-color .15s, background .15s;
}
.td-inline-editable:hover {
    border-color: var(--ea-border);
    background: var(--ea-neutral-2);
}
.td-inline-editor {
    width: 100%;
    padding: .35rem .5rem;
    border: 1.5px solid var(--ea-blue);
    border-radius: var(--ea-radius-sm);
    font-family: var(--ea-font);
    font-size: inherit;
    color: var(--ea-black);
    background: var(--ea-white);
    outline: none;
    box-shadow: 0 0 0 3px rgba(77, 46, 253, .08);
}
.td-inline-editor-textarea {
    width: 100%;
    padding: .5rem .65rem;
    border: 1.5px solid var(--ea-blue);
    border-radius: var(--ea-radius-sm);
    font-family: var(--ea-font);
    font-size: .88rem;
    color: var(--ea-black);
    background: var(--ea-white);
    outline: none;
    box-shadow: 0 0 0 3px rgba(77, 46, 253, .08);
    resize: vertical;
    min-height: 80px;
    line-height: 1.65;
}
.td-inline-actions {
    display: flex;
    gap: .35rem;
    margin-top: .35rem;
}
.td-inline-save, .td-inline-cancel {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .6rem;
    border-radius: var(--ea-radius-sm);
    font-family: var(--ea-font);
    font-size: .8225rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid;
}
.td-inline-save {
    background: var(--ea-blue);
    color: var(--ea-white);
    border-color: var(--ea-blue);
}
.td-inline-save:hover { background: var(--ea-blue-90); }
.td-inline-cancel {
    background: var(--ea-white);
    color: var(--ea-neutral-60);
    border-color: var(--ea-border);
}
.td-inline-cancel:hover { border-color: var(--ea-neutral-40); }

/* ── Responsive ── */
@media (max-width: 900px) {
    .td-info-grid { grid-template-columns: 1fr; }
}

/* ── Linked task card ── */
.td-linked-task {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem .75rem;
    background: var(--ea-neutral-2);
    border: 1px solid var(--ea-border-subtle);
    border-radius: var(--ea-radius-sm);
    cursor: pointer;
    transition: all .15s;
}
.td-linked-task:hover { border-color: var(--ea-blue-30); background: var(--ea-blue-10); }
.td-linked-task-icon {
    width: 28px; height: 28px;
    border-radius: var(--ea-radius-sm);
    display: grid; place-items: center; flex-shrink: 0;
}
.td-linked-task-icon svg { width: 14px; height: 14px; }
.td-linked-task-icon.bug { background: #fef2f2; color: #dc2626; }
.td-linked-task-icon.testcase { background: #ecfeff; color: #0891b2; }
.td-linked-task-icon.task { background: var(--ea-blue-10); color: var(--ea-blue); }
.td-linked-task-body { flex: 1; min-width: 0; }
.td-linked-task-ref {
    font-size: .7rem; font-weight: 600; color: var(--ea-neutral-40);
    font-family: "SF Mono", "Cascadia Code", "Fira Code", monospace;
}
.td-linked-task-title {
    font-size: .8225rem; font-weight: 600; color: var(--ea-black);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.td-linked-task-badge {
    font-size: .65rem; font-weight: 600; padding: .1rem .45rem;
    border-radius: 999px; white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════
   KANBAN BOARD  (kb-*)
   ═══════════════════════════════════════════════════════════════ */

/* ── Toolbar (search + filters) ── */
.kb-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    background: var(--ea-white);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-md);
    padding: .65rem 1rem;
    box-shadow: var(--ea-shadow-4);
    margin-bottom: 1.25rem;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

.kb-toolbar-left {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.kb-toolbar-right {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.kb-search {
    position: relative;
    min-width: 240px;
}
.kb-search input {
    width: 100%;
    padding: .5rem .85rem .5rem 2.2rem;
    border: 1.5px solid var(--ea-border);
    border-radius: 999px;
    font-size: .82rem;
    font-family: var(--ea-font);
    color: var(--ea-black);
    background: var(--ea-neutral-2);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.kb-search input:focus {
    border-color: var(--ea-blue);
    box-shadow: 0 0 0 3px rgba(77,46,253,.08);
    background: var(--ea-white);
}
.kb-search-icon {
    position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
    color: var(--ea-neutral-40); pointer-events: none;
}
.kb-search-icon svg { width: 14px; height: 14px; }

.kb-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .7rem;
    border: 1.5px solid var(--ea-border);
    border-radius: 999px;
    background: var(--ea-white);
    font-family: var(--ea-font);
    font-size: .8225rem;
    font-weight: 500;
    color: var(--ea-neutral-60);
    cursor: pointer;
    transition: all .15s;
}
.kb-filter-pill:hover { border-color: var(--ea-blue-30); background: var(--ea-blue-10); color: var(--ea-blue); }
.kb-filter-pill.active { border-color: var(--ea-blue); background: var(--ea-blue-10); color: var(--ea-blue); font-weight: 600; }

.kb-view-toggle {
    display: flex;
    border: 1.5px solid var(--ea-border);
    border-radius: var(--ea-radius-sm);
    overflow: hidden;
}
.kb-view-btn {
    border: none;
    background: var(--ea-white);
    padding: .4rem .6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--ea-neutral-40);
    transition: all .15s;
}
.kb-view-btn:hover { color: var(--ea-blue); background: var(--ea-blue-10); }
.kb-view-btn.active { background: var(--ea-blue); color: var(--ea-white); }
.kb-view-btn svg { width: 16px; height: 16px; }
.kb-view-btn + .kb-view-btn { border-left: 1.5px solid var(--ea-border); }

/* ── Board grid ── */
.kb-board {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    min-width: 1100px;
    max-width: 1600px;
    margin: 0 auto;
    overflow-x: auto;
}

/* ── Column ── */
.kb-column {
    background: var(--ea-neutral-4);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-lg);
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

.kb-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--ea-border);
    background: var(--ea-neutral-4);
}

.kb-column-title {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.kb-column-title h3 {
    font-size: .85rem;
    font-weight: 700;
    color: var(--ea-black);
}

.kb-column-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: .68rem;
    font-weight: 700;
}

.kb-column--todo .kb-column-count       { background: #f3f4f6; color: var(--status-todo, #6b7280); }
.kb-column--progress .kb-column-count   { background: #eff6ff; color: var(--status-progress, #2563eb); }
.kb-column--review .kb-column-count     { background: #fffbeb; color: var(--status-review, #d97706); }
.kb-column--qa .kb-column-count         { background: #ecfeff; color: var(--status-qa, #0891b2); }
.kb-column--done .kb-column-count       { background: #ecfdf5; color: var(--status-done, #059669); }

.kb-column-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.kb-column--todo .kb-column-dot     { background: var(--status-todo, #6b7280); }
.kb-column--progress .kb-column-dot { background: var(--status-progress, #2563eb); }
.kb-column--review .kb-column-dot   { background: var(--status-review, #d97706); }
.kb-column--qa .kb-column-dot       { background: var(--status-qa, #0891b2); }
.kb-column--done .kb-column-dot     { background: var(--status-done, #059669); }

.kb-column-add {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--ea-border);
    background: var(--ea-white);
    color: var(--ea-neutral-40);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
}
.kb-column-add:hover { border-color: var(--ea-blue); color: var(--ea-blue); background: var(--ea-blue-10); }
.kb-column-add svg { width: 14px; height: 14px; }

/* ── Card container (drag target) ── */
.kb-cards {
    flex: 1;
    padding: .65rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-height: 60px;
    transition: background .15s;
}

/* Highlight drop zone when dragging */
.kb-cards.drag-over {
    background: var(--ea-blue-10);
    border-radius: 0 0 var(--ea-radius-lg) var(--ea-radius-lg);
}

/* ── Empty column message ── */
.kb-empty {
    text-align: center;
    padding: 2rem .5rem;
    color: var(--ea-neutral-40);
    font-size: .8225rem;
    font-style: italic;
}

/* ── Task card ── */
.kb-card {
    background: var(--ea-white);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius-md);
    padding: .85rem;
    box-shadow: var(--ea-shadow-4);
    cursor: grab;
    transition: box-shadow .15s, border-color .15s, transform .15s;
    user-select: none;
}
.kb-card:hover {
    box-shadow: var(--ea-shadow-8);
    border-color: var(--ea-blue-30);
}
.kb-card:active { cursor: grabbing; }

/* ── Drag states ── */
.kb-card.dragging {
    opacity: .35;
}
.kb-card.kb-drop-before {
    border-top: 2.5px solid var(--ea-blue);
    margin-top: -1px;
}
.kb-card.kb-drop-after {
    border-bottom: 2.5px solid var(--ea-blue);
    margin-bottom: -1px;
}
.kb-card.drag-mirror {
    box-shadow: 0 8px 25px rgba(77, 46, 253, .18);
    border-color: var(--ea-blue);
    transform: rotate(2deg);
    opacity: .92;
}

/* ── Card top row (ID + type) ── */
.kb-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.kb-card-id {
    font-size: .68rem;
    font-weight: 700;
    font-family: "SF Mono", "Cascadia Code", "Fira Code", monospace;
    color: var(--ea-blue);
    background: var(--ea-blue-10);
    padding: .1rem .4rem;
    border-radius: 999px;
}

.kb-card-type {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kb-card-type svg { width: 12px; height: 12px; }
.kb-card-type.story  { background: #ecfdf5; color: #2b9d5e; }
.kb-card-type.task   { background: #eff6ff; color: #2563eb; }
.kb-card-type.bug    { background: #fef2f2; color: #dc2626; }
.kb-card-type.epic   { background: #f5f3ff; color: #7c3aed; }

/* ── Card title ── */
.kb-card-title {
    font-size: .84rem;
    font-weight: 600;
    color: var(--ea-black);
    line-height: 1.35;
    margin-bottom: .55rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Labels ── */
.kb-card-labels {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-bottom: .55rem;
}
.kb-card-label {
    font-size: .6rem;
    font-weight: 600;
    padding: .1rem .4rem;
    border-radius: 999px;
    border: 1px solid;
}
.kb-card-label--feature   { color: var(--ea-blue); border-color: var(--ea-blue-30); background: var(--ea-blue-10); }
.kb-card-label--bug       { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
.kb-card-label--ui        { color: #7c3aed; border-color: #ddd6fe; background: #f5f3ff; }
.kb-card-label--backend   { color: #0891b2; border-color: #a5f3fc; background: #ecfeff; }
.kb-card-label--docs      { color: #ca8a04; border-color: #fde68a; background: #fefce8; }
.kb-card-label--testcase  { color: #0891b2; border-color: #a5f3fc; background: #ecfeff; }
.kb-card-label--default   { color: var(--ea-neutral-60); border-color: var(--ea-neutral-10); background: var(--ea-neutral-4); }

/* ── Bottom row ── */
.kb-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kb-card-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ── Priority pill ── */
.kb-card-priority {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .8225rem;
    font-weight: 600;
}
.kb-card-priority-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.kb-card-priority.low      { color: #059669; }
.kb-card-priority.low .kb-card-priority-dot { background: #059669; }
.kb-card-priority.medium   { color: #d97706; }
.kb-card-priority.medium .kb-card-priority-dot { background: #d97706; }
.kb-card-priority.high     { color: #dc2626; }
.kb-card-priority.high .kb-card-priority-dot { background: #dc2626; }
.kb-card-priority.critical { color: #7c3aed; }
.kb-card-priority.critical .kb-card-priority-dot { background: #7c3aed; }

/* ── Story points ── */
.kb-card-points {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ea-neutral-4);
    font-size: .8225rem;
    font-weight: 700;
    color: var(--ea-neutral-60);
}

/* ── Due date ── */
.kb-card-due {
    font-size: .68rem;
    color: var(--ea-neutral-40);
}
.kb-card-due.overdue { color: #dc2626; font-weight: 600; }

/* ── Avatar ── */
.kb-card-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ea-blue);
    color: white;
    font-size: .6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kb-card-avatar.green  { background: #2b9d5e; }
.kb-card-avatar.orange { background: #FE920D; }
.kb-card-avatar.pink   { background: #F04FCD; }

/* ── Subtask progress (on card) ── */
.kb-card-subtask-bar {
    height: 4px;
    background: var(--ea-neutral-10);
    border-radius: 2px;
    margin-top: .5rem;
    overflow: hidden;
}
.kb-card-subtask-fill {
    height: 100%;
    background: #059669;
    border-radius: 2px;
    transition: width .2s;
}
.kb-card-subtask-text {
    font-size: .8225rem;
    color: var(--ea-neutral-40);
    margin-top: .15rem;
}

/* ── WIP limit warning ── */
.kb-wip-warning {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .65rem;
    margin: .5rem .65rem 0;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--ea-radius-sm);
    font-size: .8225rem;
    font-weight: 600;
    color: #d97706;
}
.kb-wip-warning svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Done column cards ── */
.kb-column--done .kb-card { opacity: .75; }
.kb-column--done .kb-card-title {
    text-decoration: line-through;
    color: var(--ea-neutral-40);
}

/* ── Sprint info banner ── */
.kb-sprint-info {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    color: var(--ea-neutral-50);
    margin-bottom: 1rem;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}
.kb-sprint-info strong {
    color: var(--ea-black);
    font-weight: 600;
}
.kb-sprint-info a {
    color: var(--ea-blue);
    text-decoration: none;
    font-weight: 500;
}
.kb-sprint-info a:hover { text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .kb-board { grid-template-columns: repeat(2, 1fr); min-width: unset; }
}
@media (max-width: 640px) {
    .kb-board { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SPRINT MANAGEMENT  (sp- prefix)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Tabs ── */
.sp-tabs {
    display: flex; gap: .25rem; background: var(--ea-neutral-4, #f5f5f5);
    padding: .25rem; border-radius: 10px; margin-bottom: 1.5rem; width: fit-content;
}
.sp-tab {
    padding: .5rem 1rem; border-radius: 6px; font-size: .8225rem; font-weight: 500;
    cursor: pointer; color: var(--ea-neutral-50, #6e6e6e); background: transparent;
    border: none; transition: all .15s; font-family: inherit;
}
.sp-tab.active {
    background: var(--ea-white, #fff); color: var(--ad-accent, #4D2EFD);
    font-weight: 600; box-shadow: 0 2px 4px rgba(0,0,0,.07);
}
.sp-tab:hover:not(.active) { color: var(--ea-black, #1b1b1f); }

/* ── Buttons ── */
.sp-btn {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .5rem 1rem; border-radius: var(--ea-radius-xl); font-size: .8225rem; font-weight: 600;
    cursor: pointer; border: none; font-family: inherit;
    transition: background .15s, box-shadow .15s, transform .1s;
}
.sp-btn:active { transform: scale(.97); }
.sp-btn svg { width: 14px; height: 14px; }
.sp-btn-primary { background: var(--ea-green, #7AFDB5); color: var(--ea-blue, #4D2EFD); }
.sp-btn-primary:hover { box-shadow: 0 2px 8px rgba(122, 253, 181, .35); }
.sp-btn-primary:disabled { opacity: .55; cursor: default; box-shadow: none; }
.sp-btn-outline {
    background: transparent; border: 1px solid var(--ea-border, #e6e9f2); color: var(--ea-neutral-60, #555);
}
.sp-btn-outline:hover { background: var(--ea-neutral-4, #f5f5f5); }
.sp-btn-ghost { background: transparent; color: var(--ea-neutral-50, #6e6e6e); }
.sp-btn-ghost:hover { background: var(--ea-neutral-6, #efefef); color: var(--ea-black, #1b1b1f); }
.sp-btn-danger { background: #fef2f2; color: #ef4444; border: 1px solid #fecaca; }
.sp-btn-danger:hover { background: #fee2e2; }
.sp-btn-success { background: #ecfdf5; color: #2b9d5e; border: 1px solid #a7f3d0; }
.sp-btn-success:hover { background: #d1fae5; }

/* ═══════════════════════════════════════════════════════════════
   ACTIVE SPRINT HERO CARD
   ═══════════════════════════════════════════════════════════════ */
.sp-hero {
    background: var(--ea-white, #fff); border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: var(--ea-radius, 16px); padding: 1.5rem; margin-bottom: 1.5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,.08);
    position: relative; overflow: hidden;
}

/* ── Stationery triangle background ── */
.sp-hero-triangles {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.sp-hero-triangles svg { position: absolute; width: 100%; height: 100%; }

.sp-hero-content { position: relative; z-index: 1; }
.sp-hero-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.sp-hero-left { flex: 1; }
.sp-hero-right { display: flex; gap: .75rem; align-items: flex-end; }

.sp-hero-badge {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .25rem .625rem; border-radius: 9999px;
    font-size: .8225rem; font-weight: 600; margin-bottom: .5rem;
}
.sp-hero-badge.active { background: #ecfdf5; color: #2b9d5e; }
.sp-hero-badge.active::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #10b981; }
.sp-hero-badge.planning { background: rgba(77,46,253,.1); color: var(--ea-blue, #4D2EFD); }
.sp-hero-badge.planning::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ea-blue, #4D2EFD); }

.sp-hero h2 { font-size: 1.125rem; font-weight: 700; margin-bottom: .25rem; }
.sp-hero-goal {
    font-size: .8225rem; color: var(--ea-neutral-50, #6e6e6e); line-height: 1.5;
    max-width: 520px; margin-bottom: .75rem;
}
.sp-hero-dates { font-size: .8225rem; color: var(--ea-neutral-40, #9e9e9e); display: flex; align-items: center; gap: .5rem; }
.sp-hero-dates svg { width: 14px; height: 14px; }

/* ── Triangle stat boxes inside sprint hero ── */
.sp-tri-stat {
    position: relative; overflow: hidden; text-align: center;
    padding: .65rem .75rem; border-radius: 12px; min-width: 90px;
    background: rgba(255,255,255,.88); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 1px 3px rgba(16,24,40,.06);
}
.sp-tri-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sp-tri-bg svg { position: absolute; width: 100%; height: 100%; }
.sp-tri-content { position: relative; z-index: 1; }
.sp-tri-value { font-family: var(--ea-font); font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.sp-tri-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ea-neutral-40, #98a2b3); margin-top: .15rem; line-height: 1.4; }

.sp-tri-blue .sp-tri-value { color: var(--stemblue, #4D2EFD); }
.sp-tri-green .sp-tri-value { color: var(--stemgreen-dark, #2b9d5e); }
.sp-tri-orange .sp-tri-value { color: var(--stemorange, #FE920D); }

/* ── Progress bar inside hero ── */
.sp-progress { margin-top: 1.25rem; }
.sp-progress-header { display: flex; justify-content: space-between; font-size: .8225rem; color: var(--ea-neutral-50, #6e6e6e); margin-bottom: .375rem; }
.sp-progress-track { height: 8px; background: var(--ea-neutral-6, #efefef); border-radius: 4px; overflow: hidden; }
.sp-progress-bar {
    height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, var(--ea-blue, #4D2EFD), #7AFDB5);
    transition: width .4s ease;
}

/* ═══════════════════════════════════════════════════════════════
   SPRINT LIST TABLE
   ═══════════════════════════════════════════════════════════════ */
.sp-table-wrap {
    background: var(--ea-white, #fff); border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,.07); margin-bottom: 1.5rem;
}
.sp-table { width: 100%; border-collapse: collapse; }
.sp-table th {
    text-align: left; padding: .85rem 1rem;
    font-size: .8225rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--stemwhite); line-height: 1.4;
    background: var(--stemblue); border-bottom: 1px solid var(--ea-border-subtle);
}
.sp-table th:first-child { padding-left: 1.25rem; }
.sp-table th:last-child  { text-align: right; padding-right: 1.25rem; }
.sp-table td {
    padding: .875rem 1rem; font-size: .8225rem;
    border-bottom: 1px solid var(--ea-border-subtle, #f0f0f4);
    vertical-align: middle;
}
.sp-table tr:last-child td { border-bottom: none; }
.sp-table tr:hover td { background: var(--ea-neutral-2, #fafafa); }

.sp-table-name { font-weight: 600; color: var(--ea-black, #1b1b1f); cursor: pointer; }
.sp-table-name:hover { color: var(--ea-blue, #4D2EFD); }

/* Status badges */
.sp-status-badge {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .125rem .5rem; border-radius: 9999px;
    font-size: .8225rem; font-weight: 600;
}
.sp-status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.sp-status--active { background: #ecfdf5; color: #059669; }
.sp-status--active::before { background: #10b981; }
.sp-status--planning { background: rgba(77,46,253,.1); color: var(--ea-blue, #4D2EFD); }
.sp-status--planning::before { background: var(--ea-blue, #4D2EFD); }
.sp-status--completed { background: var(--ea-neutral-6, #efefef); color: var(--ea-neutral-50, #6e6e6e); }
.sp-status--completed::before { background: var(--ea-neutral-40, #9e9e9e); }
.sp-status--future { background: #fefce8; color: #ca8a04; }
.sp-status--future::before { background: #eab308; }

/* Mini progress in table */
.sp-mini-progress { display: flex; align-items: center; gap: .5rem; }
.sp-mini-bar { width: 80px; height: 6px; background: var(--ea-neutral-6, #efefef); border-radius: 3px; overflow: hidden; }
.sp-mini-fill { height: 100%; border-radius: 3px; background: var(--ea-blue, #4D2EFD); transition: width .3s; }
.sp-mini-label { font-size: .8225rem; color: var(--ea-neutral-50, #6e6e6e); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════
   SPRINT DETAIL PANEL / BACKLOG VIEW
   ═══════════════════════════════════════════════════════════════ */
.sp-detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; }

/* Sprint backlog (left) */
.sp-backlog {
    background: var(--ea-white, #fff); border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: 14px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,.07);
}
.sp-backlog-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--ea-border, #e6e9f2);
}
.sp-backlog-header h3 { font-size: .875rem; font-weight: 700; }
.sp-backlog-header span { font-size: .8225rem; color: var(--ea-neutral-40, #9e9e9e); }

.sp-backlog-list { padding: .5rem; }

.sp-backlog-task {
    display: flex; align-items: center; gap: .75rem;
    padding: .625rem .75rem; border-radius: 6px;
    cursor: pointer; transition: background .12s; border: 1px solid transparent;
}
.sp-backlog-task:hover { background: var(--ea-neutral-4, #f5f5f5); border-color: var(--ea-border, #e6e9f2); }

.sp-backlog-task-type {
    width: 20px; height: 20px; border-radius: 4px;
    display: grid; place-items: center; flex-shrink: 0;
}
.sp-backlog-task-type svg { width: 12px; height: 12px; }
.sp-backlog-task-type.story  { background: #ecfdf5; color: #10b981; }
.sp-backlog-task-type.task   { background: rgba(77,46,253,.1); color: var(--ea-blue, #4D2EFD); }
.sp-backlog-task-type.bug    { background: #fef2f2; color: #ef4444; }
.sp-backlog-task-type.epic   { background: #f5f3ff; color: #8b5cf6; }

.sp-backlog-task-id { font-family: 'SF Mono', Consolas, monospace; font-size: .8225rem; color: var(--ea-neutral-40, #9e9e9e); min-width: 52px; }
.sp-backlog-task-title { flex: 1; font-size: .8225rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sp-backlog-task-priority {
    display: flex; align-items: center; gap: .25rem;
    font-size: .8225rem; font-weight: 600;
}
.sp-backlog-task-priority-dot { width: 6px; height: 6px; border-radius: 50%; }
.sp-backlog-task-priority.low .sp-backlog-task-priority-dot { background: #10b981; }
.sp-backlog-task-priority.medium .sp-backlog-task-priority-dot { background: #f59e0b; }
.sp-backlog-task-priority.high .sp-backlog-task-priority-dot { background: #ef4444; }
.sp-backlog-task-priority.critical .sp-backlog-task-priority-dot { background: #dc2626; }

.sp-backlog-task-points {
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(77,46,253,.1); color: var(--ea-blue, #4D2EFD);
    font-size: .8225rem; font-weight: 700;
    display: grid; place-items: center; flex-shrink: 0;
}

.sp-backlog-task-avatar {
    width: 24px; height: 24px; border-radius: 50%;
    color: #fff; font-size: .8225rem; font-weight: 600;
    display: grid; place-items: center; flex-shrink: 0;
}

.sp-backlog-task-status {
    padding: .125rem .375rem; border-radius: 4px;
    font-size: .8225rem; font-weight: 600; flex-shrink: 0;
}
.sp-backlog-task-status.todo     { background: #f3f4f6; color: #6b7280; }
.sp-backlog-task-status.progress { background: #dbeafe; color: #2563eb; }
.sp-backlog-task-status.review   { background: #fef3c7; color: #d97706; }
.sp-backlog-task-status.done     { background: #d1fae5; color: #059669; }

/* ── Right sidebar in detail view ── */
.sp-detail-sidebar { display: flex; flex-direction: column; gap: 1rem; }

/* Sprint info card */
.sp-info-card {
    background: var(--ea-white, #fff); border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: 14px; padding: 1.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,.07);
}
.sp-info-card h4 { font-size: .8225rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: .375rem; }
.sp-info-card h4 svg { width: 16px; height: 16px; color: var(--ea-neutral-40, #9e9e9e); }

.sp-info-row { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--ea-border-subtle, #f0f0f4); }
.sp-info-row:last-child { border-bottom: none; }
.sp-info-label { font-size: .8225rem; color: var(--ea-neutral-40, #9e9e9e); }
.sp-info-value { font-size: .8225rem; font-weight: 600; color: var(--ea-black, #1b1b1f); }

/* ═══════════════════════════════════════════════════════════════
   BURNDOWN CHART
   ═══════════════════════════════════════════════════════════════ */
.sp-chart-card {
    background: var(--ea-white, #fff); border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: 14px; padding: 1.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,.07);
}
.sp-chart-card h4 { font-size: .8225rem; font-weight: 700; margin-bottom: .75rem; }
.sp-chart { position: relative; width: 100%; height: 140px; }
.sp-chart svg { width: 100%; height: 100%; }
.sp-chart-ideal { stroke: var(--ea-neutral-20, #c8c8c8); stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; }
.sp-chart-actual { stroke: var(--ea-blue, #4D2EFD); stroke-width: 2; fill: none; }
.sp-chart-fill { fill: rgba(77,46,253,.1); opacity: .5; }
.sp-chart-grid { stroke: var(--ea-neutral-6, #efefef); stroke-width: 1; }
.sp-chart-label { font-size: .8225rem; fill: var(--ea-neutral-40, #9e9e9e); }

/* ═══════════════════════════════════════════════════════════════
   VELOCITY CHART
   ═══════════════════════════════════════════════════════════════ */
.sp-velocity { display: flex; gap: .625rem; align-items: flex-end; height: 100px; padding: .5rem 0; }
.sp-velocity-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.sp-velocity-bar {
    width: 100%; border-radius: 4px 4px 0 0;
    background: rgba(77,46,253,.3); transition: height .3s;
    position: relative;
}
.sp-velocity-bar.current { background: var(--ea-blue, #4D2EFD); }
.sp-velocity-bar-label {
    font-size: .8225rem; color: var(--ea-neutral-40, #9e9e9e);
    text-align: center; font-weight: 500;
}
.sp-velocity-bar-value {
    position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
    font-size: .8225rem; font-weight: 700; color: var(--ea-blue, #4D2EFD);
}

/* ═══════════════════════════════════════════════════════════════
   TIMELINE VIEW
   ═══════════════════════════════════════════════════════════════ */
.sp-timeline { padding: 1rem 0; }
.sp-timeline-header {
    display: flex; gap: .5rem; padding: .5rem 0; border-bottom: 2px solid var(--ea-border, #e6e9f2);
    margin-bottom: .75rem;
}
.sp-timeline-month {
    flex: 1; text-align: center; font-size: .8225rem; font-weight: 600;
    color: var(--ea-neutral-40, #9e9e9e); text-transform: uppercase; letter-spacing: .04em;
    line-height: 1.4;
}
.sp-timeline-row {
    display: flex; align-items: center; gap: .75rem;
    padding: .5rem 0; border-bottom: 1px solid var(--ea-border-subtle, #f0f0f4);
}
.sp-timeline-label {
    width: 160px; flex-shrink: 0; font-size: .8225rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-timeline-track { flex: 1; position: relative; height: 28px; }
.sp-timeline-bar {
    position: absolute; top: 4px; height: 20px; border-radius: 10px;
    font-size: .8225rem; font-weight: 600; color: #fff;
    display: flex; align-items: center; padding: 0 .625rem;
    white-space: nowrap;
}
.sp-timeline-bar.active   { background: linear-gradient(90deg, var(--ea-blue, #4D2EFD), #8068fe); }
.sp-timeline-bar.planning { background: linear-gradient(90deg, #c7befe, #a594fe); }
.sp-timeline-bar.completed { background: var(--ea-neutral-20, #c8c8c8); color: var(--ea-neutral-60, #525252); }
.sp-timeline-bar.future   { background: linear-gradient(90deg, #fde68a, #fbbf24); color: #92400e; }
.sp-timeline-today {
    position: absolute; top: -8px; bottom: -8px; width: 2px;
    background: #ef4444; z-index: 2;
}
.sp-timeline-today::before {
    content: 'Today'; position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
    font-size: .8225rem; color: #ef4444; font-weight: 600; white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   PLANNING VIEW - Two-panel layout
   ═══════════════════════════════════════════════════════════════ */
.sp-planning-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.sp-planning-panel {
    background: var(--ea-white, #fff); border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: 14px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,.07);
    min-height: 400px;
}
.sp-planning-panel-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--ea-border, #e6e9f2);
    background: var(--ea-neutral-4, #f5f5f5);
}
.sp-planning-panel-header h3 { font-size: .875rem; font-weight: 700; }
.sp-planning-panel-counter {
    font-size: .8225rem; color: var(--ea-neutral-40, #9e9e9e);
}
.sp-planning-panel-body { padding: .5rem; max-height: 500px; overflow-y: auto; }

.sp-planning-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 3rem 1rem; color: var(--ea-neutral-40, #9e9e9e); font-size: .8225rem;
}
.sp-planning-empty svg { width: 40px; height: 40px; margin-bottom: .5rem; opacity: .3; }

/* ── Capacity bar ── */
.sp-capacity-bar {
    display: flex; align-items: center; gap: .5rem;
    padding: .75rem 1.25rem; border-top: 1px solid var(--ea-border, #e6e9f2);
    background: var(--ea-neutral-4, #f5f5f5); font-size: .8225rem;
}
.sp-capacity-label { color: var(--ea-neutral-50, #6e6e6e); }
.sp-capacity-value { font-weight: 700; color: var(--ea-blue, #4D2EFD); }
.sp-capacity-track { flex: 1; height: 6px; background: var(--ea-neutral-10, #e1e1e1); border-radius: 3px; overflow: hidden; }
.sp-capacity-fill { height: 100%; border-radius: 3px; background: var(--ea-blue, #4D2EFD); transition: width .3s; }
.sp-capacity-fill.over { background: #ef4444; }

/* ── Create Sprint modal ── */
.sp-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.35);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.sp-modal {
    background: var(--ea-white, #fff); border-radius: 20px; width: 560px;
    max-height: 90vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,.15);
}
.sp-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--ea-border, #e6e9f2);
}
.sp-modal-header h3 { font-size: 1rem; font-weight: 700; }
.sp-modal-close {
    width: 28px; height: 28px; border-radius: 50%; border: none;
    background: var(--ea-neutral-4, #f5f5f5); cursor: pointer;
    display: grid; place-items: center; color: var(--ea-neutral-50, #6e6e6e);
    transition: background .15s;
}
.sp-modal-close:hover { background: var(--ea-neutral-10, #e1e1e1); }
.sp-modal-close svg { width: 14px; height: 14px; }
.sp-modal-body { padding: 1.5rem; }
.sp-form-group { margin-bottom: 1.25rem; }
.sp-form-label { display: block; font-size: .8225rem; font-weight: 600; margin-bottom: .375rem; color: var(--ea-neutral-60, #555); }
.sp-form-input,
.sp-form-textarea {
    width: 100%; padding: .625rem .75rem; border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: 10px; font-size: .8225rem;
    font-family: inherit; color: var(--ea-black, #1b1b1f);
    background: var(--ea-white, #fff);
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.sp-form-input:focus,
.sp-form-textarea:focus {
    outline: none; border-color: var(--ea-blue, #4D2EFD);
    box-shadow: 0 0 0 3px rgba(77, 46, 253, .1);
}
.sp-form-textarea { min-height: 80px; resize: vertical; }
.sp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.sp-form-hint { font-size: .8225rem; color: var(--ea-neutral-40, #9e9e9e); margin-top: .25rem; }
.sp-modal-footer {
    display: flex; justify-content: flex-end; gap: .5rem;
    padding: 1rem 1.5rem; border-top: 1px solid var(--ea-border, #e6e9f2);
}

/* ── Sprint responsive ── */
@media (max-width: 1024px) {
    .sp-detail-grid { grid-template-columns: 1fr; }
    .sp-planning-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .sp-hero-row { flex-direction: column; }
    .sp-form-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PROJECT MANAGEMENT  (pm- prefix)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Tabs ── */
.pm-tabs {
    display: flex; gap: .25rem; background: var(--ea-neutral-4, #f5f5f5);
    padding: .25rem; border-radius: 10px; margin-bottom: 1.5rem; width: fit-content;
}
.pm-tab {
    padding: .5rem 1rem; border-radius: 6px; font-size: .8225rem; font-weight: 500;
    cursor: pointer; color: var(--ea-neutral-50, #6e6e6e); background: transparent;
    border: none; transition: all .15s; font-family: inherit;
}
.pm-tab.active {
    background: var(--ea-white, #fff); color: var(--ad-accent, #4D2EFD);
    font-weight: 600; box-shadow: 0 2px 4px rgba(0,0,0,.07);
}

/* ── Project cards grid ── */
.pm-projects-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem; margin-bottom: 2rem;
}
.pm-project-card {
    background: var(--ea-white, #fff); border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: var(--ea-radius, 16px); overflow: hidden;
    box-shadow: 0 2px 6px rgba(16,24,40,.08);
    cursor: pointer; position: relative;
    transition: box-shadow .2s, transform .15s;
}
.pm-project-card:hover { box-shadow: 0 6px 20px rgba(16,24,40,.1); transform: translateY(-2px); }

/* ── Stationery triangle background ── */
.pm-card-triangles {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.pm-card-triangles svg { position: absolute; width: 100%; height: 100%; }

.pm-project-card-body { position: relative; z-index: 1; padding: 1.25rem; }
.pm-project-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .75rem; }
.pm-project-card-icon {
    width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 1.1rem;
}
.pm-project-card-badge {
    display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem;
    border-radius: 9999px; font-size: .8225rem; font-weight: 600;
}
.pm-project-card-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; }
.pm-badge--active   { background: #ecfdf5; color: #059669; }
.pm-badge--active::before   { background: #10b981; }
.pm-badge--planning { background: var(--ea-blue-10, #efecff); color: var(--ad-accent, #4D2EFD); }
.pm-badge--planning::before { background: var(--ad-accent, #4D2EFD); }
.pm-badge--completed { background: var(--ea-neutral-6, #efefef); color: var(--ea-neutral-50, #6e6e6e); }
.pm-badge--completed::before { background: var(--ea-neutral-40, #9e9e9e); }
.pm-badge--on-hold { background: #fef3c7; color: #d97706; }
.pm-badge--on-hold::before { background: #eab308; }

.pm-project-card h3 { font-size: .9375rem; font-weight: 700; margin-bottom: .25rem; }
.pm-project-card-desc {
    font-size: .8225rem; color: var(--ea-neutral-50, #6e6e6e); line-height: 1.5;
    margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Triangle stat boxes inside project cards ── */
.pm-project-card-stats { display: flex; gap: .5rem; margin-bottom: 1rem; }
.pm-tri-stat {
    position: relative; overflow: hidden; text-align: center;
    padding: .65rem .6rem; border-radius: 12px; min-width: 60px; flex: 1;
    background: #fff; border: 1px solid var(--ea-border, #e2e4ea);
    box-shadow: 0 1px 3px rgba(16,24,40,.06);
}
.pm-tri-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pm-tri-bg svg { position: absolute; width: 100%; height: 100%; }
.pm-tri-content { position: relative; z-index: 1; }
.pm-tri-value { font-family: var(--ea-font); font-size: 1.2rem; font-weight: 800; line-height: 1.1; }
.pm-tri-label { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ea-neutral-40, #98a2b3); margin-top: .15rem; line-height: 1.4; }

.pm-tri-blue .pm-tri-value { color: var(--stemblue, #4D2EFD); }
.pm-tri-green .pm-tri-value { color: var(--stemgreen-dark, #2b9d5e); }
.pm-tri-orange .pm-tri-value { color: var(--stemorange, #FE920D); }
.pm-tri-pink .pm-tri-value { color: var(--stempink, #F04FCD); }

.pm-project-card-progress { margin-bottom: .75rem; }
.pm-project-card-progress-header { display: flex; justify-content: space-between; font-size: .8225rem; color: var(--ea-neutral-50, #6e6e6e); margin-bottom: .25rem; }
.pm-project-card-progress-track { height: 6px; background: var(--ea-neutral-6, #efefef); border-radius: 3px; overflow: hidden; }
.pm-project-card-progress-bar { height: 100%; border-radius: 3px; transition: width .4s; }

.pm-project-card-footer { display: flex; justify-content: space-between; align-items: center; }
.pm-project-card-team { display: flex; }
.pm-project-card-avatar {
    width: 26px; height: 26px; border-radius: 50%; color: #fff;
    font-size: .8225rem; font-weight: 600; display: grid; place-items: center;
    border: 2px solid var(--ea-white, #fff); margin-left: -6px;
}
.pm-project-card-avatar:first-child { margin-left: 0; }
.pm-project-card-date { font-size: .8225rem; color: var(--ea-neutral-40, #9e9e9e); }

/* ── Detail stats ── */
.pm-detail-stats {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 1.5rem;
}
.pm-detail-stat {
    background: var(--ea-white, #fff); border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: 10px; padding: 1rem; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,.07);
}
.pm-detail-stat-value { font-size: 1.25rem; font-weight: 700; }
.pm-detail-stat-label { font-size: .8225rem; color: var(--ea-neutral-40, #9e9e9e); text-transform: uppercase; letter-spacing: .03em; margin-top: .125rem; }

/* ── Epic cards ── */
.pm-epic-list { display: flex; flex-direction: column; gap: 1rem; }
.pm-epic-card {
    background: var(--ea-white, #fff); border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: 14px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,.07);
}
.pm-epic-header {
    display: flex; align-items: center; gap: .75rem;
    padding: 1rem 1.25rem; cursor: pointer; transition: background .12s;
}
.pm-epic-header:hover { background: var(--ea-neutral-2, #fafafa); }
.pm-epic-icon {
    width: 32px; height: 32px; border-radius: 6px;
    background: #f5f3ff; color: #8b5cf6;
    display: grid; place-items: center; flex-shrink: 0;
}
.pm-epic-icon svg { width: 16px; height: 16px; }
.pm-epic-title-wrap { flex: 1; min-width: 0; }
.pm-epic-title-row { display: flex; align-items: center; gap: .5rem; }
.pm-epic-title { font-size: .875rem; font-weight: 700; }
.pm-epic-id { font-family: 'SF Mono', Consolas, monospace; font-size: .8225rem; color: var(--ea-neutral-40, #9e9e9e); }
.pm-epic-meta { display: flex; gap: .75rem; align-items: center; margin-top: .125rem; }
.pm-epic-meta-item { font-size: .8225rem; color: var(--ea-neutral-40, #9e9e9e); display: flex; align-items: center; gap: .25rem; }
.pm-epic-meta-item svg { width: 12px; height: 12px; }

.pm-epic-progress-col { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; width: 160px; }
.pm-epic-progress-track { flex: 1; height: 6px; background: var(--ea-neutral-6, #efefef); border-radius: 3px; overflow: hidden; }
.pm-epic-progress-fill { height: 100%; border-radius: 3px; }
.pm-epic-progress-label { font-size: .8225rem; font-weight: 600; color: var(--ea-neutral-50, #6e6e6e); min-width: 36px; text-align: right; }

.pm-epic-badge {
    padding: .125rem .5rem; border-radius: 9999px; font-size: .8225rem; font-weight: 600; flex-shrink: 0;
}
.pm-epic-badge.not-started { background: var(--ea-neutral-6, #efefef); color: var(--ea-neutral-50, #6e6e6e); }
.pm-epic-badge.in-progress { background: #dbeafe; color: #2563eb; }
.pm-epic-badge.done        { background: #d1fae5; color: #059669; }

.pm-epic-toggle {
    width: 24px; height: 24px; border: none; background: transparent;
    color: var(--ea-neutral-40, #9e9e9e); cursor: pointer; display: grid; place-items: center;
    transition: transform .2s;
}
.pm-epic-toggle svg { width: 16px; height: 16px; }
.pm-epic-toggle.open { transform: rotate(90deg); }

/* ── Epic body (task list) ── */
.pm-epic-body {
    border-top: 1px solid var(--ea-border, #e6e9f2); padding: .5rem .75rem;
    background: var(--ea-neutral-2, #fafafa);
}
.pm-epic-body.collapsed { display: none; }

.pm-epic-task {
    display: flex; align-items: center; gap: .625rem;
    padding: .5rem .75rem; border-radius: 6px; transition: background .12s; cursor: pointer;
}
.pm-epic-task:hover { background: var(--ea-white, #fff); }
.pm-epic-task-type {
    width: 18px; height: 18px; border-radius: 3px; display: grid; place-items: center; flex-shrink: 0;
}
.pm-epic-task-type svg { width: 10px; height: 10px; }
.pm-epic-task-type.story  { background: #ecfdf5; color: #10b981; }
.pm-epic-task-type.task   { background: var(--ea-blue-10, #efecff); color: var(--ad-accent, #4D2EFD); }
.pm-epic-task-type.bug    { background: #fef2f2; color: #ef4444; }

.pm-epic-task-id { font-family: 'SF Mono', Consolas, monospace; font-size: .8225rem; color: var(--ea-neutral-40, #9e9e9e); min-width: 50px; }
.pm-epic-task-title { flex: 1; font-size: .8225rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pm-epic-task-priority { display: flex; align-items: center; gap: .25rem; font-size: .8225rem; font-weight: 600; }
.pm-epic-task-priority-dot { width: 5px; height: 5px; border-radius: 50%; }
.pm-epic-task-priority.low .pm-epic-task-priority-dot    { background: #10b981; }
.pm-epic-task-priority.medium .pm-epic-task-priority-dot { background: #f59e0b; }
.pm-epic-task-priority.high .pm-epic-task-priority-dot   { background: #ef4444; }
.pm-epic-task-priority.critical .pm-epic-task-priority-dot { background: #dc2626; }

.pm-epic-task-pts {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--ea-blue-10, #efecff); color: var(--ad-accent, #4D2EFD);
    font-size: .8225rem; font-weight: 700; display: grid; place-items: center; flex-shrink: 0;
}
.pm-epic-task-avatar {
    width: 22px; height: 22px; border-radius: 50%; color: #fff;
    font-size: .8225rem; font-weight: 600; display: grid; place-items: center; flex-shrink: 0;
}
.pm-epic-task-status {
    padding: .0625rem .375rem; border-radius: 4px; font-size: .8225rem; font-weight: 600; flex-shrink: 0;
}
.pm-epic-task-status.todo     { background: #f3f4f6; color: #6b7280; }
.pm-epic-task-status.progress { background: #dbeafe; color: #2563eb; }
.pm-epic-task-status.review   { background: #fef3c7; color: #d97706; }
.pm-epic-task-status.done     { background: #d1fae5; color: #059669; }

.pm-epic-add-task {
    display: flex; align-items: center; gap: .375rem; padding: .5rem .75rem; margin: .375rem 0;
    font-size: .8225rem; color: var(--ea-neutral-40, #9e9e9e); cursor: pointer;
    border-radius: 6px; transition: background .12s, color .12s;
}
.pm-epic-add-task:hover { background: var(--ea-white, #fff); color: var(--ad-accent, #4D2EFD); }
.pm-epic-add-task svg { width: 14px; height: 14px; }

/* ── Breadcrumb ── */
.pm-breadcrumb { display: flex; align-items: center; gap: .375rem; margin-bottom: 1rem; }
.pm-breadcrumb-link {
    font-size: .8225rem; color: var(--ea-neutral-40, #9e9e9e); background: none; border: none;
    cursor: pointer; font-family: inherit; transition: color .15s; padding: 0;
}
.pm-breadcrumb-link:hover { color: var(--ad-accent, #4D2EFD); }
.pm-breadcrumb-sep { font-size: .8225rem; color: var(--ea-neutral-20, #c8c8c8); }
.pm-breadcrumb-current { font-size: .8225rem; font-weight: 600; }

/* ── Detail header ── */
.pm-detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; }
.pm-detail-title-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .25rem; }
.pm-detail-icon {
    width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 1.25rem;
}
.pm-detail-title-row h1 { font-size: 1.375rem; font-weight: 700; margin: 0; }
.pm-detail-desc { font-size: .8225rem; color: var(--ea-neutral-50, #6e6e6e); max-width: 640px; line-height: 1.5; margin-top: .25rem; }

/* ── Detail header actions ── */
.pm-page-header-actions { display: flex; gap: .5rem; align-items: center; }
.pm-btn-sm { padding: .375rem .75rem; font-size: .8225rem; }
.pm-btn svg { flex-shrink: 0; }
.pm-btn { display: inline-flex; align-items: center; gap: .375rem; }

/* ── Create Project modal ── */
.pm-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.35);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.pm-modal {
    background: var(--ea-white, #fff); border-radius: 20px; width: 560px;
    max-height: 90vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,.15);
}
.pm-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--ea-border, #e6e9f2);
}
.pm-modal-header h3 { font-size: 1rem; font-weight: 700; }
.pm-modal-close {
    width: 28px; height: 28px; border-radius: 50%; border: none;
    background: var(--ea-neutral-4, #f5f5f5); cursor: pointer;
    display: grid; place-items: center; color: var(--ea-neutral-50, #6e6e6e);
}
.pm-modal-close:hover { background: var(--ea-neutral-10, #e1e1e1); }
.pm-modal-close svg { width: 14px; height: 14px; }
.pm-modal-body { padding: 1.5rem; }
.pm-form-group { margin-bottom: 1.25rem; }
.pm-form-label { display: block; font-size: .8225rem; font-weight: 600; margin-bottom: .375rem; color: var(--ea-neutral-60, #555); }
.pm-form-input,
.pm-form-textarea {
    width: 100%; padding: .625rem .75rem; border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: 10px; font-size: .8225rem;
    font-family: inherit; color: var(--ea-black, #1b1b1f);
    background: var(--ea-white, #fff);
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.pm-form-input:focus,
.pm-form-textarea:focus {
    outline: none; border-color: var(--ea-blue, #4D2EFD);
    box-shadow: 0 0 0 3px rgba(77, 46, 253, .1);
}
.pm-form-textarea { min-height: 80px; resize: vertical; }
.pm-btn {
    padding: .5rem 1rem; border-radius: var(--ea-radius-xl); font-size: .8225rem; font-weight: 600;
    cursor: pointer; border: none; font-family: inherit; transition: background .15s, box-shadow .15s;
}
.pm-btn-primary {
    background: var(--ea-green, #7AFDB5); color: var(--ea-blue, #4D2EFD);
}
.pm-btn-primary:hover { background: #5dfca0; box-shadow: 0 2px 8px rgba(122, 253, 181, .35); }
.pm-btn-primary:disabled { opacity: .55; cursor: default; box-shadow: none; }
.pm-btn-outline {
    background: transparent; border: 1px solid var(--ea-border, #e6e9f2); color: var(--ea-neutral-60, #555);
}
.pm-btn-outline:hover { background: var(--ea-neutral-4, #f5f5f5); }
.pm-modal-footer {
    display: flex; justify-content: flex-end; gap: .5rem;
    padding: 1rem 1.5rem; border-top: 1px solid var(--ea-border, #e6e9f2);
}

.pm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.pm-form-color-swatches { display: flex; gap: .5rem; margin-top: .25rem; }
.pm-form-swatch {
    width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; transition: border-color .15s;
}
.pm-form-swatch:hover, .pm-form-swatch.selected { border-color: var(--ea-black, #1b1b1f); }

/* ── Hierarchy Tree View ── */
.pm-tree { padding: .5rem 0; }
.pm-tree-node { padding-left: 1.5rem; position: relative; }
.pm-tree-node::before {
    content: ''; position: absolute; top: 0; left: .75rem;
    width: 1px; height: 100%; background: var(--ea-border, #e6e9f2);
}
.pm-tree-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem; margin: .125rem 0;
    border-radius: 6px; cursor: pointer;
    transition: background .12s; position: relative;
}
.pm-tree-item::before {
    content: ''; position: absolute; top: 50%; left: -0.75rem;
    width: .75rem; height: 1px; background: var(--ea-border, #e6e9f2);
}
.pm-tree-item:hover { background: var(--ea-neutral-4, #f5f5f5); }

.pm-tree-icon {
    width: 20px; height: 20px; border-radius: 4px;
    display: grid; place-items: center; flex-shrink: 0;
}
.pm-tree-icon svg { width: 12px; height: 12px; }
.pm-tree-icon.project { background: rgba(77, 46, 253, .1); color: #4D2EFD; }
.pm-tree-icon.epic    { background: #f5f3ff; color: #8b5cf6; }
.pm-tree-icon.story   { background: #ecfdf5; color: #10b981; }
.pm-tree-icon.task    { background: rgba(77, 46, 253, .1); color: #4D2EFD; }
.pm-tree-icon.bug     { background: #fef2f2; color: #ef4444; }

.pm-tree-label { font-size: .8225rem; font-weight: 500; flex: 1; }
.pm-tree-label.project { font-weight: 700; }
.pm-tree-label.epic { font-weight: 600; }

.pm-tree-badge {
    padding: .0625rem .375rem; border-radius: 4px;
    font-size: .8225rem; font-weight: 600;
}

/* Root nodes have no left connector line */
.pm-tree > .pm-tree-node { padding-left: 0; }
.pm-tree > .pm-tree-node::before { display: none; }
.pm-tree > .pm-tree-node > .pm-tree-item::before { display: none; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .pm-projects-grid { grid-template-columns: 1fr; }
    .pm-detail-stats { grid-template-columns: repeat(3, 1fr); }
    .pm-epic-progress-col { display: none; }
}
@media (max-width: 640px) {
    .pm-detail-stats { grid-template-columns: repeat(2, 1fr); }
    .pm-form-row { grid-template-columns: 1fr; }
    .pm-detail-header { flex-direction: column; gap: .75rem; }
}

/* =================================================================
   Compact Rich-Text Editor  (.rte-compact)
   ================================================================= */
.rte-compact {
    border: 1px solid var(--border-subtle, #e0e0e0);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-primary, #fff);
    transition: border-color .15s;
}
.rte-compact:focus-within {
    border-color: var(--accent, #0078d4);
    box-shadow: 0 0 0 2px rgba(0, 120, 212, .15);
}

/* Toolbar */
.rte-compact-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: var(--bg-secondary, #f8f8f8);
    border-bottom: 1px solid var(--border-subtle, #e0e0e0);
    flex-wrap: wrap;
}
.rte-compact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary, #555);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.rte-compact-btn:hover {
    background: var(--hover-bg, #e8e8e8);
    color: var(--text-primary, #222);
}
.rte-compact-btn:active {
    background: var(--active-bg, #d0d0d0);
}
.rte-compact-sep {
    width: 1px;
    height: 18px;
    background: var(--border-subtle, #ddd);
    margin: 0 4px;
}

/* Editable area */
.rte-compact-content {
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary, #222);
    outline: none;
    overflow-y: auto;
    max-height: 300px;
}
.rte-compact-content:empty::before {
    content: attr(data-placeholder);
    color: var(--text-disabled, #aaa);
    pointer-events: none;
}

/* Rendered content styles inside compact editor */
.rte-compact-content h1,
.rte-compact-content h2,
.rte-compact-content h3 {
    margin: .5em 0 .25em;
    font-weight: 600;
}
.rte-compact-content h1 { font-size: 1.35em; }
.rte-compact-content h2 { font-size: 1.2em; }
.rte-compact-content h3 { font-size: 1.1em; }
.rte-compact-content p { margin: .35em 0; }
.rte-compact-content ul,
.rte-compact-content ol {
    margin: .35em 0;
    padding-left: 1.5em;
}
.rte-compact-content blockquote {
    border-left: 3px solid var(--accent, #0078d4);
    margin: .5em 0;
    padding: .25em .75em;
    color: var(--text-secondary, #555);
    background: var(--bg-secondary, #f8f8f8);
    border-radius: 0 4px 4px 0;
}
.rte-compact-content code {
    background: var(--code-bg, #f0f0f0);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'Cascadia Code', Consolas, monospace;
    font-size: .92em;
}
.rte-compact-content a {
    color: var(--accent, #0078d4);
    text-decoration: underline;
}

/* ── @mention dropdown ── */
.rte-mention-dropdown {
    position: fixed;
    z-index: 9999;
    background: var(--surface, #fff);
    border: 1px solid var(--ea-neutral-20, #e0e0e0);
    border-radius: 8px;
    box-shadow: 0 -4px 20px rgba(0,0,0,.12);
    min-width: 220px;
    max-width: 300px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
}
.rte-mention-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: .84rem;
    transition: background .1s;
}
.rte-mention-item:hover,
.rte-mention-item-active {
    background: var(--ea-accent-light, #e8f0fe);
}
.rte-mention-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--accent, #0078d4);
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    flex-shrink: 0;
}
.rte-mention-name {
    font-weight: 500;
    color: var(--ea-neutral-80, #333);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rte-mention-role {
    margin-left: auto;
    font-size: .8225rem;
    color: var(--ea-neutral-40, #888);
    white-space: nowrap;
}
/* Mention tag inside the editor */
.rte-mention-tag {
    display: inline;
    background: var(--ea-accent-light, #e8f0fe);
    color: var(--accent, #0078d4);
    font-weight: 600;
    font-size: .88em;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
    user-select: all;
}
/* Mention tag in rendered content (task detail / comments) */
.td-rich-content .rte-mention-tag {
    background: var(--ea-accent-light, #e8f0fe);
    color: var(--accent, #0078d4);
    font-weight: 600;
    font-size: .88em;
    padding: 1px 4px;
    border-radius: 4px;
}

/* ── Rich-content display (for rendered HTML in task detail / comments) ── */
.td-rich-content h1,
.td-rich-content h2,
.td-rich-content h3 {
    margin: .4em 0 .2em;
    font-weight: 600;
}
.td-rich-content h1 { font-size: 1.3em; }
.td-rich-content h2 { font-size: 1.15em; }
.td-rich-content h3 { font-size: 1.05em; }
.td-rich-content p { margin: .3em 0; }
.td-rich-content ul,
.td-rich-content ol {
    margin: .3em 0;
    padding-left: 1.5em;
}
.td-rich-content blockquote {
    border-left: 3px solid var(--accent, #0078d4);
    margin: .4em 0;
    padding: .2em .6em;
    color: var(--text-secondary, #555);
    background: var(--bg-secondary, #f8f8f8);
    border-radius: 0 4px 4px 0;
}
.td-rich-content code {
    background: var(--code-bg, #f0f0f0);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'Cascadia Code', Consolas, monospace;
    font-size: .92em;
}
.td-rich-content a {
    color: var(--accent, #0078d4);
    text-decoration: underline;
}
.td-rich-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}
.rte-compact-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* =================================================================
   Watchers  (.td-watchers-*)
   ================================================================= */
.td-watchers-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.td-watcher-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-secondary, #f5f5f5);
    border: 1px solid var(--border-subtle, #e0e0e0);
    border-radius: 16px;
    padding: 2px 10px 2px 3px;
    font-size: .8225rem;
    color: var(--text-primary, #333);
    transition: background .12s;
}
.td-watcher-chip:hover {
    background: var(--hover-bg, #eaeaea);
}
.td-watcher-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent, #0078d4);
    color: #fff;
    font-size: .8225rem;
    font-weight: 700;
}
.td-watcher-name {
    white-space: nowrap;
}
.td-watcher-remove {
    background: none;
    border: none;
    color: var(--text-disabled, #aaa);
    cursor: pointer;
    font-size: .85rem;
    padding: 0 2px;
    line-height: 1;
    margin-left: 2px;
    transition: color .12s;
}
.td-watcher-remove:hover {
    color: #dc2626;
}

/* =================================================================
   Task List - Epic Grouping  (.tl-*)
   ================================================================= */
.tl-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    cursor: pointer;
    white-space: nowrap;
    color: var(--text-secondary, #555);
    user-select: none;
}
.tl-group-toggle input[type="checkbox"] {
    accent-color: var(--accent, #0078d4);
    cursor: pointer;
}
.tl-epic-header {
    background: var(--bg-secondary, #f8f8f8);
    cursor: pointer;
    user-select: none;
}
.tl-epic-header td {
    padding: 8px 12px !important;
    font-size: .88rem;
    border-bottom: 1px solid var(--border-subtle, #e0e0e0);
}
.tl-epic-header:hover td {
    background: var(--hover-bg, #f0f0f0);
}
.tl-epic-toggle {
    display: inline-block;
    width: 16px;
    margin-right: 4px;
    color: var(--text-secondary, #666);
}
.tl-epic-count {
    margin-left: .5rem;
    font-weight: 400;
    font-size: .8225rem;
    color: var(--text-disabled, #999);
}
.tl-task-id {
    font-size: .8225rem;
    font-family: 'Cascadia Code', Consolas, monospace;
    color: var(--text-secondary, #666);
    white-space: nowrap;
}

/* ══════ Create-User Modal - Role picker cards ══════ */
.cu-required { color: var(--stemerror, #e53e3e); font-weight: 600; }
.cu-hint { font-size: .8225rem; color: var(--text-tertiary, #999); margin: 4px 0 10px; }

.cu-roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}
.cu-role-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border: 2px solid var(--border-default, #e0e0e0);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s;
    background: var(--surface-primary, #fff);
    text-align: center;
    user-select: none;
}
.cu-role-card:hover { border-color: var(--ad-accent, #6366f1); background: var(--ad-accent-5, rgba(99,102,241,.05)); }
.cu-role-card-selected {
    border-color: var(--ad-accent, #6366f1);
    background: var(--ad-accent-5, rgba(99,102,241,.06));
    box-shadow: 0 0 0 3px var(--ad-accent-15, rgba(99,102,241,.15));
}
.cu-role-card input[type="checkbox"] { display: none; }
.cu-role-icon {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.cu-role-icon svg { width: 20px; height: 20px; }
.cu-role-admin            { background: rgba(240,79,205,.12); color: var(--stempink, #f04fcd); }
.cu-role-districtadmin    { background: rgba(14,165,233,.12); color: #0ea5e9; }
.cu-role-institutionadmin { background: rgba(16,185,129,.12); color: #10b981; }
.cu-role-educator         { background: rgba(99,102,241,.12); color: var(--ad-accent, #6366f1); }
.cu-role-parent           { background: rgba(254,146,13,.12); color: var(--stemorange, #fe920d); }
.cu-role-student          { background: rgba(122,253,181,.15); color: var(--stemgreen-dark, #2ec662); }
.cu-role-label { font-size: .82rem; font-weight: 600; color: var(--text-primary, #1a1a2e); }

.ad-error-banner { border-left: 4px solid var(--stemerror, #e53e3e); background: rgba(229,62,62,.06); }
.ad-error-banner p { color: var(--stemerror, #e53e3e); }

/* ══════ Create-User Modal - Account setup mode cards ══════ */
.cu-mode-options { display: flex; gap: 12px; }
.cu-mode-card {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border: 2px solid var(--border-default, #e0e0e0);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s;
    background: var(--surface-primary, #fff);
    user-select: none;
}
.cu-mode-card:hover { border-color: var(--ad-accent, #6366f1); background: var(--ad-accent-5, rgba(99,102,241,.04)); }
.cu-mode-card-selected {
    border-color: var(--ad-accent, #6366f1);
    background: var(--ad-accent-5, rgba(99,102,241,.06));
    box-shadow: 0 0 0 3px var(--ad-accent-15, rgba(99,102,241,.15));
}
.cu-mode-card input[type="radio"] { display: none; }
.cu-mode-icon {
    width: 40px; height: 40px; min-width: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--ad-accent-10, rgba(99,102,241,.1));
    color: var(--ad-accent, #6366f1);
}
.cu-mode-text { display: flex; flex-direction: column; gap: 2px; }
.cu-mode-text strong { font-size: .88rem; color: var(--text-primary, #1a1a2e); }
.cu-mode-text span { font-size: .8225rem; color: var(--text-tertiary, #888); line-height: 1.4; }

/* Info & success banners */
.cu-info-banner {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    background: rgba(99,102,241,.06);
    border-left: 4px solid var(--ad-accent, #6366f1);
    border-radius: 6px;
}
.cu-info-banner svg { flex-shrink: 0; color: var(--ad-accent, #6366f1); margin-top: 1px; }
.cu-info-banner p { margin: 0 0 4px; font-size: .84rem; color: var(--text-secondary, #555); line-height: 1.5; }
.cu-info-banner p:last-child { margin-bottom: 0; }

.cu-success-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    background: rgba(46,198,98,.08);
    border-left: 4px solid var(--stemgreen-dark, #2ec662);
    border-radius: 6px;
}
.cu-success-banner svg { flex-shrink: 0; color: var(--stemgreen-dark, #2ec662); }
.cu-success-banner p { margin: 0; font-size: .88rem; color: var(--text-primary, #1a1a2e); font-weight: 500; }

.ad-icon-success { background: rgba(46,198,98,.12); color: var(--stemgreen-dark, #2ec662); }

/* ── Institution Detail Grid ── */
.as-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.as-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.as-detail-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.as-detail-value {
    font-size: .9rem;
    color: var(--text-primary, #1a1a2e);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════
   EDUCATOR GAME GUIDE  (eg-*)
   Styles for the EducatorGameGuide.razor component
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page heading ── */
.eg-page-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

/* ── Toolbar (back + assign) ── */
.eg-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.eg-toolbar .bg-back { margin-bottom: 0; }
.eg-page-heading-icon {
    width: 42px; height: 42px;
    background: rgba(77,46,253,.08);
    border-radius: var(--ea-radius-sm, 6px);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.eg-page-heading-icon svg { width: 22px; height: 22px; stroke: var(--ea-blue, #4D2EFD); }
.eg-page-heading-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ea-neutral-90, #1b1b1f);
    font-family: var(--ea-font, "Poppins", sans-serif);
}
.eg-page-heading-tagline {
    margin: 2px 0 0;
    font-size: .82rem;
    color: var(--ea-neutral-60, #666);
    font-weight: 400;
}

/* ── Header (reuses bg-detail-hero from GameDetailView) ── */
.eg-guide-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--ea-blue, #4D2EFD) !important;
    color: #fff !important;
    font-weight: 600;
}
.eg-print-btn {
    position: absolute;
    top: 1rem; right: 1rem;
    z-index: 1;
    color: #fff !important;
    border-color: rgba(255,255,255,.4) !important;
    background: rgba(255,255,255,.18) !important;
    backdrop-filter: blur(4px);
}
.eg-print-btn:hover { background: rgba(255,255,255,.3) !important; }

/* ── Quick info bar ── */
.eg-info-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.eg-info-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--ea-surface-card, #fff);
    border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: 100px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--ea-neutral-70, #555);
}
.eg-info-chip svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--ea-blue, #4D2EFD); }

/* ── Section note ── */
.eg-section-note {
    font-size: .88rem;
    color: var(--ea-neutral-50, #777);
    margin-bottom: 16px;
}

/* ── Room cards ── */
.eg-room-card {
    background: var(--ea-surface-card, #fff);
    border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: var(--ea-radius-md, 10px);
    padding: 20px;
    margin-bottom: 16px;
}
.eg-room-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}
.eg-room-number {
    width: 36px; height: 36px;
    background: var(--ea-blue, #4D2EFD);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    flex-shrink: 0;
}
.eg-room-title { font-size: 1.05rem; font-weight: 600; color: var(--ea-neutral-90, #1b1b1f); }
.eg-room-desc { font-size: .85rem; color: var(--ea-neutral-50, #777); margin-top: 2px; }

/* ── Subsection title ── */
.eg-subsection-title {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ea-neutral-50, #777);
    font-weight: 600;
    margin: 0 0 10px;
}

/* ── Narrative Flow Timeline ── */
.eg-flow {
    position: relative;
    padding-left: 52px;
    margin-bottom: 16px;
}
.eg-flow::before {
    content: '';
    position: absolute;
    left: 21px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ea-border, #e6e9f2);
}
.eg-flow-stop {
    position: relative;
    padding-bottom: 20px;
}
.eg-flow-stop:last-child { padding-bottom: 0; }
.eg-flow-dot {
    position: absolute;
    left: -52px;
    top: 0;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    z-index: 1;
}
.eg-flow-dot.find { background: linear-gradient(135deg, #f1f1f4 0%, #e6e9f2 100%); color: var(--ea-blue, #4D2EFD);}
.eg-flow-dot.read { background: linear-gradient(135deg, #f1f1f4 0%, #e6e9f2 100%); color: #f59e0b;}
.eg-flow-dot.solve { background: linear-gradient(135deg, #f1f1f4 0%, #e6e9f2 100%); color: #10b981; }
.eg-flow-dot.unlock { background: linear-gradient(135deg, #f1f1f4 0%, #e6e9f2 100%); color: #ef4444;  }
.eg-flow-dot.open { background: linear-gradient(135deg, #f1f1f4 0%, #e6e9f2 100%); color: #8b5cf6; }
.eg-flow-dot.collect { background: linear-gradient(135deg, #f1f1f4 0%, #e6e9f2 100%); color: #06b6d4; }
.eg-flow-dot.use { background: linear-gradient(135deg, #f1f1f4 0%, #e6e9f2 100%); color: #ec4899; }
.eg-flow-dot.inspect { background: linear-gradient(135deg, #f1f1f4 0%, #e6e9f2 100%); color: #6366f1; }

.eg-flow-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: var(--ea-radius-md, 10px);
    padding: 14px 16px;
    transition: box-shadow .15s;
}
.eg-flow-card:hover { box-shadow: 0 2px 12px rgba(77,46,253,.06); }
.eg-flow-card-img {
    width: 64px; height: 64px;
    border-radius: var(--ea-radius-sm, 6px);
    background: linear-gradient(135deg, #f1f1f4 0%, #e6e9f2 100%);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.eg-flow-card-img img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.eg-flow-card-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.eg-flow-card-name { font-weight: 600; font-size: .9rem; color: var(--ea-neutral-90, #1b1b1f); }
.eg-flow-card-desc { font-size: .82rem; color: var(--ea-neutral-60, #666); line-height: 1.55; }

.eg-flow-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.eg-flow-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .68rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 100px;
}
.eg-flow-tag.puzzle { background: rgba(77,46,253,.08); color: var(--ea-blue, #4D2EFD); }
.eg-flow-tag.input { background: rgba(245,158,11,.1); color: #b45309; }
.eg-flow-tag.narrative { background: rgba(16,185,129,.08); color: #047857; }
.eg-flow-tag.unlock { background: rgba(239,68,68,.06); color: #ef4444; }

.eg-flow-solve {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
    padding: 8px 12px;
    background: var(--ea-neutral-6, #f1f1f4);
    border-radius: var(--ea-radius-sm, 6px);
}
.eg-flow-solve-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ea-neutral-50, #777);
    font-weight: 600;
    flex-shrink: 0;
}
.eg-flow-solve code {
    font-family: "SF Mono", "Consolas", monospace;
    font-size: .84rem;
    color: var(--ea-neutral-90, #1b1b1f);
    font-weight: 600;
}
.eg-flow-objective {
    font-size: .76rem;
    color: var(--ea-neutral-50, #777);
    font-style: italic;
}

/* ── Callouts ── */
.eg-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--ea-radius-sm, 6px);
    font-size: .86rem;
    line-height: 1.55;
}
.eg-callout svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.eg-callout-amber {
    background: rgba(245, 158, 11, .08);
    border-left: 4px solid #f59e0b;
    margin-top: 1rem;
}
.eg-callout-amber svg { color: #f59e0b; }
.eg-callout-blue {
    background: rgba(77, 46, 253, .06);
    border-left: 4px solid var(--ea-blue, #4D2EFD);
}
.eg-callout-blue svg { color: var(--ea-blue, #4D2EFD); }

/* ── Rubric ── */
.eg-rubric-group {
    border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: var(--ea-radius-sm, 6px);
    overflow: hidden;
    margin-bottom: 12px;
}
.eg-rubric-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(77, 46, 253, .05);
    font-weight: 600;
    font-size: .88rem;
    color: var(--ea-neutral-90, #1b1b1f);
}
.eg-rubric-weight {
    font-size: .76rem;
    color: var(--ea-blue, #4D2EFD);
    font-weight: 600;
}
.eg-rubric-rows { padding: 4px 0; }
.eg-rubric-row {
    display: grid;
    grid-template-columns: 36px 150px 1fr;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    font-size: .82rem;
    border-bottom: 1px solid rgba(0,0,0,.04);
}
.eg-rubric-row:last-child { border-bottom: none; }
.eg-rubric-score {
    font-weight: 700;
    text-align: center;
    color: var(--ea-neutral-70, #555);
}
.eg-rubric-level {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: .72rem;
    font-weight: 600;
    text-align: center;
}
.eg-rubric-level.exemplary { background: rgba(16,185,129,.12); color: #047857; }
.eg-rubric-level.proficient { background: rgba(59,130,246,.1); color: #1d4ed8; }
.eg-rubric-level.developing { background: rgba(245,158,11,.12); color: #b45309; }
.eg-rubric-level.beginning { background: rgba(239,68,68,.1); color: #b91c1c; }
.eg-rubric-level.none { background: rgba(0,0,0,.06); color: var(--ea-neutral-50, #777); }

/* ── Formula box ── */
.eg-formula-box {
    padding: 14px 18px;
    background: var(--ea-neutral-6, #f1f1f4);
    border-radius: var(--ea-radius-sm, 6px);
    font-family: "SF Mono", "Consolas", monospace;
    font-size: .84rem;
    color: var(--ea-neutral-70, #555);
    margin-bottom: 16px;
}
.eg-formula-highlight {
    font-weight: 700;
    color: var(--ea-blue, #4D2EFD);
}

/* ── Scoring grid ── */
.eg-scoring-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.eg-scoring-box {
    text-align: center;
    padding: 16px;
    background: var(--ea-surface-card, #fff);
    border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: var(--ea-radius-md, 10px);
}
.eg-scoring-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ea-neutral-50, #777); font-weight: 600; margin-bottom: 4px; }
.eg-scoring-value { font-size: 1.5rem; font-weight: 700; color: var(--ea-blue, #4D2EFD); }
.eg-scoring-desc { font-size: .76rem; color: var(--ea-neutral-50, #777); margin-top: 2px; }

/* ── Grade bands ── */
.eg-grade-bands { display: flex; flex-direction: column; gap: 6px; }
.eg-grade-band {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-radius: var(--ea-radius-sm, 6px);
    font-size: .86rem;
    font-weight: 600;
}
.eg-band-label { font-weight: 600; }
.eg-band-range { font-weight: 500; opacity: .85; }
.eg-band-exemplary { background: rgba(16,185,129,.1); color: #047857; }
.eg-band-proficient { background: rgba(59,130,246,.1); color: #1d4ed8; }
.eg-band-developing { background: rgba(245,158,11,.1); color: #b45309; }
.eg-band-beginning { background: rgba(239,68,68,.08); color: #b91c1c; }

/* ── Puzzle type sidebar list ── */
.eg-puzzle-type-list { margin-top: 8px; }
.eg-puzzle-type-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0,0,0,.04);
    font-size: .84rem;
}
.eg-puzzle-type-row:last-child { border-bottom: none; }
.eg-puzzle-type { color: var(--ea-neutral-70, #555); }
.eg-puzzle-type-count {
    font-weight: 600;
    color: var(--ea-blue, #4D2EFD);
    font-size: .78rem;
    background: rgba(77, 46, 253, .08);
    padding: 1px 8px;
    border-radius: 100px;
}

/* ── Curriculum link ── */
.eg-curriculum-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .84rem;
    color: var(--ea-blue, #4D2EFD);
    font-weight: 500;
    text-decoration: none;
}
.eg-curriculum-link:hover { text-decoration: underline; }

/* ── Print media ── */
@media print {
    .bg-detail-hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .eg-print-btn { display: none !important; }
    .bg-back { display: none !important; }
    .eg-info-bar { display: none !important; }
    .bg-detail-sidebar { display: none !important; }
    .bg-detail-layout { grid-template-columns: 1fr !important; }
    .eg-room-card { break-inside: avoid; }
    .eg-rubric-group { break-inside: avoid; }
    .eg-grade-band { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .eg-rubric-level { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .eg-scoring-grid { grid-template-columns: 1fr; }
    .eg-rubric-row { grid-template-columns: 28px 80px 1fr; gap: 6px; font-size: .78rem; }
}


/* ════════════════════════════════════════════════════════════════════════════
   PARENT GUIDE - pg-* prefix (teal accent #0ea5a5)
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    --pg-teal: #0ea5a5;
    --pg-teal-dark: #0c8c8c;
    --pg-teal-bg: rgba(14, 165, 165, .08);
}

/* ── Page heading ── */
.pg-page-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.pg-page-heading-icon {
    width: 42px; height: 42px;
    background: var(--pg-teal-bg);
    border-radius: var(--ea-radius-sm, 6px);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pg-page-heading-icon svg { width: 22px; height: 22px; stroke: var(--pg-teal); }
.pg-page-heading-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ea-neutral-90, #1b1b1f);
    font-family: var(--ea-font, "Poppins", sans-serif);
}
.pg-page-heading-tagline {
    margin: 2px 0 0;
    font-size: .82rem;
    color: var(--ea-neutral-60, #666);
    font-weight: 400;
}

/* ── Hero badge & print ── */
.pg-parent-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--pg-teal) !important;
    color: #fff !important;
    font-weight: 600;
}
.pg-print-btn {
    position: absolute;
    top: 1rem; right: 1rem;
    z-index: 1;
    color: #fff !important;
    border-color: rgba(255,255,255,.4) !important;
    background: rgba(255,255,255,.18) !important;
    backdrop-filter: blur(4px);
}
.pg-print-btn:hover { background: rgba(255,255,255,.3) !important; }

/* ── Quick info bar ── */
.pg-info-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.pg-info-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--ea-surface-card, #fff);
    border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: 100px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--ea-neutral-70, #555);
}
.pg-info-chip svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--pg-teal); }

/* ── Section helpers ── */
.pg-section-intro {
    font-size: .92rem;
    color: var(--ea-neutral-70, #555);
    line-height: 1.65;
    margin-bottom: 16px;
}
.pg-section-note {
    font-size: .88rem;
    color: var(--ea-neutral-50, #777);
    margin-bottom: 16px;
}

/* ── Explore grid ── */
.pg-explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.pg-explore-card {
    background: var(--pg-teal-bg);
    border-radius: var(--ea-radius-md, 10px);
    padding: 14px 16px;
}
.pg-explore-card-title {
    font-size: .82rem;
    font-weight: 600;
    color: var(--pg-teal);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pg-explore-card-title svg { width: 15px; height: 15px; }
.pg-explore-card p {
    font-size: .8rem;
    color: var(--ea-neutral-60, #666);
    margin: 0;
    line-height: 1.55;
}

/* ── Room cards ── */
.pg-room-card {
    background: var(--ea-surface-card, #fff);
    border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: var(--ea-radius-md, 10px);
    padding: 20px;
    margin-bottom: 16px;
}
.pg-room-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}
.pg-room-number {
    width: 36px; height: 36px;
    background: var(--pg-teal);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    flex-shrink: 0;
}
.pg-room-title { font-size: 1.05rem; font-weight: 600; color: var(--ea-neutral-90, #1b1b1f); }
.pg-room-desc { font-size: .85rem; color: var(--ea-neutral-50, #777); margin-top: 2px; }
.pg-subsection-title {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ea-neutral-50, #777);
    font-weight: 600;
    margin: 0 0 10px;
}

/* ── Narrative Flow Timeline ── */
.pg-flow {
    position: relative;
    padding-left: 52px;
    margin-bottom: 16px;
}
.pg-flow::before {
    content: '';
    position: absolute;
    left: 21px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ea-border, #e6e9f2);
}
.pg-flow-stop {
    position: relative;
    padding-bottom: 20px;
}
.pg-flow-stop:last-child { padding-bottom: 0; }
.pg-flow-dot {
    position: absolute;
    left: -52px;
    top: 0;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    z-index: 1;
}
.pg-flow-dot.find   { background: linear-gradient(135deg, #f1f1f4 0%, #e6e9f2 100%); color: var(--pg-teal); }
.pg-flow-dot.read   { background: linear-gradient(135deg, #f1f1f4 0%, #e6e9f2 100%); color: #f59e0b; }
.pg-flow-dot.solve  { background: linear-gradient(135deg, #f1f1f4 0%, #e6e9f2 100%); color: #10b981; }
.pg-flow-dot.unlock { background: linear-gradient(135deg, #f1f1f4 0%, #e6e9f2 100%); color: #ef4444; }
.pg-flow-dot.open   { background: linear-gradient(135deg, #f1f1f4 0%, #e6e9f2 100%); color: #8b5cf6; }
.pg-flow-dot.collect { background: linear-gradient(135deg, #f1f1f4 0%, #e6e9f2 100%); color: #06b6d4; }
.pg-flow-dot.use    { background: linear-gradient(135deg, #f1f1f4 0%, #e6e9f2 100%); color: #ec4899; }
.pg-flow-dot.inspect { background: linear-gradient(135deg, #f1f1f4 0%, #e6e9f2 100%); color: #6366f1; }

.pg-flow-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: var(--ea-radius-md, 10px);
    padding: 14px 16px;
    transition: box-shadow .15s;
}
.pg-flow-card:hover { box-shadow: 0 2px 12px rgba(14,165,165,.06); }
.pg-flow-card-img {
    width: 64px; height: 64px;
    border-radius: var(--ea-radius-sm, 6px);
    background: linear-gradient(135deg, #f1f1f4 0%, #e6e9f2 100%);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.pg-flow-card-img img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.pg-flow-card-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.pg-flow-card-name { font-weight: 600; font-size: .9rem; color: var(--ea-neutral-90, #1b1b1f); }
.pg-flow-card-desc { font-size: .82rem; color: var(--ea-neutral-60, #666); line-height: 1.55; }

.pg-flow-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.pg-flow-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .68rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 100px;
}
.pg-flow-tag.puzzle    { background: var(--pg-teal-bg); color: var(--pg-teal); }
.pg-flow-tag.input     { background: rgba(245,158,11,.1); color: #b45309; }
.pg-flow-tag.narrative { background: rgba(16,185,129,.08); color: #047857; }
.pg-flow-tag.unlock    { background: rgba(239,68,68,.06); color: #ef4444; }

.pg-flow-objective {
    font-size: .76rem;
    color: var(--ea-neutral-50, #777);
    font-style: italic;
}

/* ── Conversation starters ── */
.pg-prompt-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pg-prompt-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--ea-surface-card, #fff);
    border: 1px solid var(--ea-border, #e6e9f2);
    border-radius: var(--ea-radius-md, 10px);
    padding: 14px 16px;
}
.pg-prompt-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pg-prompt-icon svg { width: 16px; height: 16px; }
.pg-prompt-icon.before { background: var(--pg-teal-bg); color: var(--pg-teal); }
.pg-prompt-icon.during { background: rgba(245,158,11,.1); color: #f59e0b; }
.pg-prompt-icon.after  { background: rgba(16,185,129,.08); color: #10b981; }
.pg-prompt-body { flex: 1; min-width: 0; }
.pg-prompt-when {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    color: var(--ea-neutral-50, #777);
    margin-bottom: 4px;
}
.pg-prompt-text {
    font-size: .88rem;
    color: var(--ea-neutral-70, #555);
    line-height: 1.55;
    font-style: italic;
}

/* ── Key vocabulary ── */
.pg-vocab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.pg-vocab-item {
    padding: 10px 14px;
    background: var(--ea-surface-bg, #f6f7fb);
    border-radius: var(--ea-radius-sm, 6px);
}
.pg-vocab-term {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ea-neutral-90, #1b1b1f);
    margin-bottom: 2px;
}
.pg-vocab-def {
    font-size: .78rem;
    color: var(--ea-neutral-60, #666);
    line-height: 1.5;
}

/* ── How to Help - tip rows ── */
.pg-tips {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pg-tip {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.pg-tip-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pg-tip-icon.do { background: rgba(16,185,129,.1); color: #10b981; }
.pg-tip-icon.avoid { background: rgba(239,68,68,.08); color: #ef4444; }
.pg-tip-icon svg { width: 16px; height: 16px; }
.pg-tip-body {
    flex: 1; min-width: 0;
}
.pg-tip-label {
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 2px;
}
.pg-tip-label.do { color: #10b981; }
.pg-tip-label.avoid { color: #ef4444; }
.pg-tip-text {
    font-size: .82rem;
    color: var(--ea-neutral-60, #666);
    line-height: 1.55;
}

/* ── Callout ── */
.pg-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--ea-radius-sm, 6px);
    font-size: .86rem;
    line-height: 1.55;
}
.pg-callout svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.pg-callout-teal {
    background: var(--pg-teal-bg);
    border-left: 4px solid var(--pg-teal);
    margin-top: 1rem;
}
.pg-callout-teal svg { color: var(--pg-teal); }

/* ── What to Expect timeline ── */
.pg-expect-timeline {
    position: relative;
    padding-left: 48px;
}
.pg-expect-timeline::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ea-border, #e6e9f2);
}
.pg-expect-step {
    position: relative;
    padding-bottom: 20px;
}
.pg-expect-step:last-child { padding-bottom: 0; }
.pg-expect-dot {
    position: absolute;
    left: -48px;
    top: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--pg-teal);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: .82rem;
    z-index: 1;
}
.pg-expect-body { padding-top: 2px; }
.pg-expect-title {
    font-weight: 600;
    font-size: .92rem;
    color: var(--ea-neutral-90, #1b1b1f);
    margin-bottom: 4px;
}
.pg-expect-desc {
    font-size: .84rem;
    color: var(--ea-neutral-60, #666);
    line-height: 1.55;
}

/* ── Puzzle type sidebar list ── */
.pg-puzzle-type-list { margin-top: 8px; }
.pg-puzzle-type-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0,0,0,.04);
    font-size: .84rem;
}
.pg-puzzle-type-row:last-child { border-bottom: none; }
.pg-puzzle-type { color: var(--ea-neutral-70, #555); }
.pg-puzzle-type-count {
    font-weight: 600;
    color: var(--pg-teal);
    font-size: .78rem;
    background: var(--pg-teal-bg);
    padding: 1px 8px;
    border-radius: 100px;
}

/* ── Parent guide print ── */
@media print {
    .pg-print-btn { display: none !important; }
    .pg-info-bar { display: none !important; }
    .pg-room-card { break-inside: avoid; }
    .pg-tip { break-inside: avoid; }
    .pg-prompt-card { break-inside: avoid; }
    .pg-expect-step { break-inside: avoid; }
    .pg-parent-badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .pg-expect-dot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .pg-room-number { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Parent guide responsive ── */
@media (max-width: 768px) {
    .pg-explore-grid, .pg-vocab-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   GAME MANAGEMENT - Admin Dashboard
   ══════════════════════════════════════════════════════════════════ */

/* Game table specifics */
.gm-row-cover {
    width: 56px; height: 38px;
    border-radius: 6px;
    background-size: cover; background-position: center;
    background-color: var(--ea-neutral-6, #efefef);
    flex-shrink: 0;
}
.gm-row-info { display: flex; align-items: center; gap: .65rem; }
.gm-row-info .gm-title { font-weight: 600; color: var(--ea-black, #1b1b1f); }
.gm-row-info .gm-subtitle { font-size: .72rem; color: var(--ea-neutral-40, #9e9e9e); margin-top: .05rem; }

/* Tags */
.gm-tag {
    display: inline-flex; align-items: center; gap: .2rem;
    padding: .12rem .45rem; border-radius: 999px;
    font-size: .68rem; font-weight: 600;
}
.gm-tag-subject { background: rgba(240, 79, 205, .1); color: var(--stempink, #F04FCD); }
.gm-tag-keystage { background: rgba(122, 253, 181, .15); color: var(--stemgreen-dark, #1a9955); }
.gm-tag-age { background: rgba(254, 146, 13, .1); color: #b45309; }
.gm-tag-duration { background: var(--ea-blue-10, #efecff); color: var(--ea-blue, #4D2EFD); }

/* Cell actions */
.gm-cell-actions { display: flex; gap: .25rem; align-items: center; }

/* Tab strip */
.gm-tab-strip {
    display: flex; gap: .15rem;
    border-bottom: 2px solid var(--ea-border, #e6e9f0);
    margin-bottom: 1rem;
}
.gm-tab-btn {
    padding: .6rem 1rem; border: none; background: transparent;
    font-size: .88rem; font-weight: 600; font-family: var(--ea-font);
    color: var(--ea-neutral-60, #6e6e6e); cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: color 120ms, border-color 120ms;
}
.gm-tab-btn:hover { color: var(--ea-blue); }
.gm-tab-btn.active { color: var(--ea-blue); border-bottom-color: var(--ea-blue); }
.gm-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 .3rem;
    border-radius: 999px; font-size: .65rem; font-weight: 700;
    margin-left: .35rem;
    background: var(--ea-neutral-6, #efefef); color: var(--ea-neutral-60, #6e6e6e);
}
.gm-tab-btn.active .gm-tab-count {
    background: var(--ea-blue-10, #efecff); color: var(--ea-blue);
}

/* Detail layout (editor two-column) */
.gm-detail-layout {
    display: grid; grid-template-columns: 1fr 360px;
    gap: 1.25rem; align-items: start;
}
.gm-detail-main { display: flex; flex-direction: column; gap: 1rem; }
.gm-detail-sidebar { display: flex; flex-direction: column; gap: 1rem; }

/* Section cards */
.gm-section-card {
    background: var(--ea-white, #fff);
    border: 1px solid var(--ea-border, #e6e9f0);
    border-radius: 14px; padding: 1.15rem;
}
.gm-section-card-header {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .85rem; padding-bottom: .65rem;
    border-bottom: 1px solid var(--ea-border-subtle, #f0f0f4);
}
.gm-section-card-header.gm-collapsible { cursor: pointer; user-select: none; }
.gm-section-card-header.gm-collapsible:hover { background: var(--ea-neutral-2, #fafafa); margin: -.35rem -.5rem .5rem; padding: .35rem .5rem .65rem; border-radius: 8px 8px 0 0; }
.gm-section-card-header .gm-chevron {
    margin-left: auto; width: 16px; height: 16px; color: var(--ea-neutral-40, #9e9e9e);
    transition: transform .2s ease; flex-shrink: 0;
}
.gm-section-card-header.gm-collapsed .gm-chevron { transform: rotate(-90deg); }
.gm-section-card-header.gm-collapsed { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.gm-section-body { }
.gm-section-body.gm-hidden { display: none; }
.gm-section-card-header svg { width: 18px; height: 18px; color: var(--ea-blue); flex-shrink: 0; }
.gm-section-card-header h4 { font-size: .92rem; font-weight: 700; }
.gm-section-card-header .gm-header-action { margin-left: auto; }

/* Form elements */
.gm-form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.gm-form-grid .gm-span-full { grid-column: 1 / -1; }
.gm-form-group { display: flex; flex-direction: column; }
.gm-form-group label {
    font-size: .78rem; font-weight: 600;
    color: var(--ea-neutral-60, #6e6e6e); margin-bottom: .35rem;
}
.gm-form-group label .gm-required { color: #dc2626; margin-left: .15rem; }
.gm-form-control {
    width: 100%; padding: .55rem .75rem;
    border: 1px solid var(--ea-border, #e6e9f0);
    border-radius: 6px; font-size: .88rem;
    font-family: var(--ea-font); color: var(--ea-black, #1b1b1f);
    background: #fff; transition: border-color 120ms, box-shadow 120ms;
}
.gm-form-control:focus {
    outline: none; border-color: var(--ea-blue);
    box-shadow: 0 0 0 3px var(--ea-blue-10, rgba(77,46,253,.08));
}
textarea.gm-form-control { resize: vertical; min-height: 80px; }
select.gm-form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236e6e6e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .7rem center;
    padding-right: 2rem;
}
.gm-form-hint { font-size: .72rem; color: var(--ea-neutral-40, #9e9e9e); margin-top: .25rem; }

/* Toggle switch */
.gm-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: .65rem 0; border-bottom: 1px solid var(--ea-border-subtle, #f0f0f4);
}
.gm-toggle-row:last-child { border-bottom: none; }
.gm-toggle-title { font-size: .88rem; font-weight: 600; color: var(--ea-black, #1b1b1f); }
.gm-toggle-desc { font-size: .74rem; color: var(--ea-neutral-40, #9e9e9e); }
.gm-toggle {
    position: relative; width: 44px; height: 24px; flex-shrink: 0;
}
.gm-toggle input { opacity: 0; width: 0; height: 0; }
.gm-toggle .gm-slider {
    position: absolute; inset: 0;
    background: var(--ea-neutral-20, #c8c8c8);
    border-radius: 999px; cursor: pointer; transition: background 200ms;
}
.gm-toggle .gm-slider::before {
    content: ""; position: absolute;
    width: 18px; height: 18px; left: 3px; bottom: 3px;
    background: #fff; border-radius: 50%; transition: transform 200ms;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.gm-toggle input:checked + .gm-slider { background: var(--ea-blue); }
.gm-toggle input:checked + .gm-slider::before { transform: translateX(20px); }

/* Behaviour toggles (inline row) */
.gm-behaviour-grid {
    display: flex; flex-wrap: wrap; gap: 1.5rem;
}
.gm-behaviour-item {
    display: flex; align-items: center; gap: .75rem;
    border: none; padding: .35rem 0;
}
.gm-behaviour-item .gm-toggle-title { font-size: .84rem; }

/* Room items list */
.gm-rooms-list { display: flex; flex-direction: column; gap: .5rem; }
.gm-room-item {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem .75rem; background: var(--ea-neutral-2, #fafafa);
    border-radius: 6px; border: 1px solid var(--ea-border-subtle, #f0f0f4);
    cursor: pointer; transition: background 120ms;
}
.gm-room-item:hover { background: var(--ea-blue-10, #efecff); }
.gm-room-item .gm-room-name { font-size: .84rem; font-weight: 600; flex: 1; }
.gm-room-item .gm-room-meta { font-size: .72rem; color: var(--ea-neutral-40, #9e9e9e); }

/* Why Play */
.gm-whyplay-list { display: flex; flex-direction: column; gap: .5rem; }
.gm-whyplay-item {
    padding: .65rem .75rem; background: var(--ea-neutral-2, #fafafa);
    border-radius: 6px; border: 1px solid var(--ea-border-subtle, #f0f0f4);
}
.gm-whyplay-item .gm-wp-title { font-size: .84rem; font-weight: 600; color: var(--ea-black, #1b1b1f); margin-bottom: .15rem; }
.gm-whyplay-item .gm-wp-desc { font-size: .78rem; color: var(--ea-neutral-60, #6e6e6e); }

/* Guide Content sub-sections */
.gm-gc-subsection { padding-top: .75rem; border-top: 1px solid var(--ea-border-subtle, #f0f0f4); }
.gm-gc-subsection:first-of-type { border-top: none; padding-top: 0; }
.gm-gc-subsection-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .5rem;
}
.gm-gc-subsection-header span {
    font-size: .84rem; font-weight: 600; color: var(--ea-black, #1b1b1f);
}

/* Learning outcomes */
.gm-outcomes-list { display: flex; flex-direction: column; gap: .35rem; }
.gm-outcomes-item { display: flex; align-items: center; gap: .5rem; }
.gm-outcome-item {
    display: flex; align-items: flex-start; gap: .5rem;
    font-size: .82rem; color: var(--ea-neutral-60, #6e6e6e); line-height: 1.45;
}
.gm-outcome-item svg { width: 16px; height: 16px; color: var(--stemgreen-dark, #1a9955); flex-shrink: 0; margin-top: .1rem; }

/* Props table within room editor */
.gm-props-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; }
.gm-props-table th {
    text-align: left; font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--ea-neutral-60, #6e6e6e); padding: .65rem .85rem;
    border-bottom: 2px solid var(--ea-border, #e6e9f0);
    background: var(--ea-neutral-2, #fafafa);
}
.gm-props-table td {
    padding: .7rem .85rem; border-bottom: 1px solid var(--ea-border-subtle, #f0f0f4);
    vertical-align: middle;
}
.gm-props-table tr:last-child td { border-bottom: none; }
.gm-props-table tbody tr { transition: background 80ms; cursor: pointer; }
.gm-props-table tbody tr:hover { background: var(--ea-blue-10, #efecff); }

/* Import dialog */
.gm-import-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 380px; }
.gm-import-source {
    padding: 1.15rem; border-right: 1px solid var(--ea-border, #e6e9f0);
    display: flex; flex-direction: column; gap: .75rem;
}
.gm-import-preview { padding: 1.15rem; overflow-y: auto; max-height: 480px; }
.gm-import-preview h5 {
    font-size: .82rem; font-weight: 700;
    color: var(--ea-neutral-80, #484848); margin-bottom: .6rem;
    text-transform: uppercase; letter-spacing: .04em;
}
.gm-json-textarea {
    width: 100%; flex: 1; min-height: 140px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: .78rem;
    border: 1px solid var(--ea-border, #e6e9f0); border-radius: 10px;
    padding: .65rem .75rem; resize: vertical; line-height: 1.5;
    background: var(--ea-neutral-2, #fafafa); color: var(--ea-neutral-80, #484848);
}
.gm-json-textarea:focus {
    outline: none; border-color: var(--ea-blue);
    box-shadow: 0 0 0 3px var(--ea-blue-10, rgba(77,46,253,.08));
}
.gm-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .75rem; margin-bottom: .85rem; }
.gm-preview-field { font-size: .82rem; }
.gm-preview-field .gm-pf-label {
    color: var(--ea-neutral-40, #9e9e9e); font-size: .74rem;
    text-transform: uppercase; letter-spacing: .03em;
}
.gm-preview-field .gm-pf-value { color: var(--ea-neutral-80, #484848); font-weight: 600; margin-top: 1px; }
.gm-preview-field.gm-span-full { grid-column: 1 / -1; }
.gm-preview-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; color: var(--ea-neutral-20, #c8c8c8); text-align: center;
}
.gm-preview-empty svg { width: 40px; height: 40px; margin-bottom: .5rem; }
.gm-preview-empty p { font-size: .84rem; margin: 0; }

/* Quick info sidebar */
.gm-quick-info { display: flex; flex-direction: column; gap: .5rem; font-size: .84rem; }
.gm-quick-info-row { display: flex; justify-content: space-between; }
.gm-quick-info-row .gm-qi-label { color: var(--ea-neutral-60, #6e6e6e); }
.gm-quick-info-row .gm-qi-value { font-weight: 600; }

/* Back nav link */
.gm-back-link {
    display: inline-flex; align-items: center; gap: .3rem;
    border: none; background: transparent; cursor: pointer;
    font-family: var(--ea-font); font-size: .84rem; font-weight: 500;
    color: var(--ea-neutral-40, #667085); padding: 0; margin-bottom: 1rem;
    transition: color 120ms;
}
.gm-back-link:hover { color: var(--ea-blue, #4D2EFD); }
.gm-back-link .ea-btn-subtle { color: inherit; }
.gm-back-link svg { width: 16px; height: 16px; }

/* Danger zone */
.gm-danger-card {
    border-color: #fca5a5;
}
.gm-danger-card .gm-section-card-header { border-bottom-color: #fef2f2; }
.gm-danger-card .gm-section-card-header svg { color: #dc2626; }
.gm-danger-card .gm-section-card-header h4 { color: #dc2626; }

/* ── WebGL Build Management ── */
.gm-build-active-card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; margin-top: 1.25rem;
    background: var(--stemwhite);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}
.gm-build-active-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--ea-blue, #4D2EFD);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.gm-build-blob-path {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: .75rem; color: var(--ea-neutral-40, #9e9e9e);
    background: var(--ea-neutral-2, #fafafa); padding: .2rem .45rem;
    border-radius: 5px; border: 1px solid var(--ea-border, #e6e9f0);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px;
}
.gm-build-table {
    width: 100%; border-collapse: collapse;
}
.gm-build-table th {
    text-align: left; font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--ea-neutral-40, #9e9e9e); padding: .5rem .75rem;
    border-bottom: 1px solid var(--ea-border, #e6e9f0);
}
.gm-build-table td {
    padding: .7rem .75rem; border-bottom: 1px solid var(--ea-border-subtle, #f0f0f4);
    font-size: .85rem; vertical-align: middle;
}
.gm-build-table tbody tr:last-child td { border-bottom: none; }
.gm-build-table tbody tr:hover { background: var(--ea-neutral-2, #fafafa); }
.gm-build-table tbody tr.expanded { background: var(--ea-blue-10, #efecff); }
.gm-build-detail-row:hover { background: transparent !important; }
.gm-build-files-table { margin: 0; }
.gm-build-files-table th { font-size: .68rem; padding: .35rem .75rem; }
.gm-build-files-table td { padding: .45rem .75rem; font-size: .82rem; }
.gm-build-version { font-weight: 600; font-variant-numeric: tabular-nums; }
.gm-build-date { color: var(--ea-neutral-40, #9e9e9e); font-size: .82rem; }
.gm-build-size { font-variant-numeric: tabular-nums; color: var(--ea-neutral-40, #9e9e9e); }
.gm-badge-active {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .15rem .55rem; border-radius: 999px;
    font-size: .72rem; font-weight: 600;
    background: #ecfdf3; color: #0e9c4b;
}
.gm-badge-active::before {
    content: ''; width: 6px; height: 6px;
    border-radius: 50%; background: #0e9c4b;
}
.gm-btn-set-active {
    font-size: .78rem; padding: .25rem .65rem;
    border: 1px solid var(--ea-border, #e6e9f0); border-radius: 999px;
    background: #fff; color: var(--ea-neutral-40, #9e9e9e);
    cursor: pointer; transition: all 120ms;
}
.gm-btn-set-active:hover {
    border-color: var(--ea-blue, #4D2EFD);
    color: var(--ea-blue, #4D2EFD);
}
.gm-build-empty {
    text-align: center; padding: 2rem;
    color: var(--ea-neutral-40, #9e9e9e);
}
.gm-build-empty svg {
    width: 48px; height: 48px;
    stroke: var(--ea-border, #e6e9f0);
    margin-bottom: .75rem;
}
.gm-build-empty p { margin: 0; font-size: .88rem; }
.gm-build-upload-btn {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .9rem; border-radius: 999px;
    font-size: .85rem; font-weight: 500;
    background: var(--ea-blue, #4D2EFD); color: #fff;
    border: none; cursor: pointer; transition: opacity 120ms;
    text-decoration: none;
}
.gm-build-upload-btn:hover { opacity: .88; }
.gm-build-upload-btn svg { stroke: #fff; }

/* ── Upload Section ── */
.gm-build-upload-section {
    margin-bottom: 1.25rem;
}
.gm-build-upload-info {
    display: flex; justify-content: space-between;
    padding: .4rem 0; font-size: .85rem;
    border-bottom: 1px solid var(--ea-border, #e6e9f0);
}
.gm-build-upload-info:last-of-type { border-bottom: none; }
.gm-build-upload-info span:first-child { color: var(--ea-neutral-40, #9e9e9e); }

/* Drop zone */
.gm-build-drop-zone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 2px dashed var(--ea-border, #e6e9f0);
    border-radius: 14px; padding: 2rem;
    text-align: center; color: var(--ea-neutral-40, #9e9e9e);
    transition: all 150ms; cursor: pointer;
    margin-top: 1rem;
}
.gm-build-drop-zone:hover, .gm-build-drop-zone.drag-over {
    border-color: var(--ea-blue, #4D2EFD);
    background: var(--ea-blue-10, #efecff);
    color: var(--ea-blue, #4D2EFD);
}
.gm-build-drop-zone svg {
    display: block;
    width: 40px; height: 40px; margin-bottom: .5rem;
    stroke: currentColor;
}
.gm-build-drop-zone h5 {
    margin: 0 0 .25rem; font-size: .95rem;
    color: var(--ea-neutral-70, #1f1f1f);
}
.gm-build-drop-zone p { margin: 0; font-size: .82rem; }
.gm-build-drop-zone .gm-file-types {
    font-size: .75rem; margin-top: .5rem;
    color: var(--ea-neutral-40, #9e9e9e);
}
.gm-build-drop-zone-browse {
    color: var(--ea-blue, #4D2EFD); font-weight: 500; cursor: pointer;
}

/* Per-file upload progress rows */
.gm-upload-file-row {
    display: flex; align-items: center; gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--ea-border-subtle, #f0f0f4);
}
.gm-upload-file-row:last-child { border-bottom: none; }
.gm-upload-file-row svg { flex-shrink: 0; }
.gm-upload-file-name {
    flex: 1; font-size: .85rem; font-weight: 500;
}
.gm-upload-file-size {
    font-size: .8rem; color: var(--ea-neutral-40, #9e9e9e);
    min-width: 5rem; text-align: right;
}
.gm-upload-file-status {
    font-size: .8rem; min-width: 5rem; text-align: right;
}
.gm-upload-file-status.done { color: #0e9c4b; }
.gm-upload-file-status.uploading { color: var(--ea-blue, #4D2EFD); }
.gm-upload-file-status.error { color: #d92d20; }

/* Upload progress track */
.gm-upload-progress-track {
    width: 100%; height: 4px;
    background: var(--ea-border, #e6e9f0);
    border-radius: 2px; overflow: hidden;
    margin-top: 1rem;
}
.gm-upload-progress-fill {
    height: 100%; background: var(--ea-blue, #4D2EFD);
    border-radius: 2px; transition: width 300ms ease;
}

/* Upload footer (total label + action buttons) */
.gm-upload-footer {
    display: flex; justify-content: space-between;
    align-items: center; margin-top: .75rem;
}
.gm-upload-footer-label {
    font-size: .82rem; color: var(--ea-neutral-40, #9e9e9e);
}
.gm-upload-footer-label.complete { color: #0e9c4b; }
.gm-upload-footer-actions {
    display: flex; gap: .5rem;
}

/* ── Storage Info Rows ── */
.gm-info-row {
    display: flex; justify-content: space-between;
    padding: .4rem 0; font-size: .85rem;
    border-bottom: 1px solid var(--ea-border, #e6e9f0);
}
.gm-info-row:last-child { border-bottom: none; }
.gm-info-row span:first-child { color: var(--ea-neutral-40, #9e9e9e); }

/* ── Version Settings Card ── */
.gm-version-card {
    background: var(--ea-blue-10, #efecff);
    border: 1.5px solid var(--ea-blue, #4D2EFD);
}
.gm-version-display {
    display: flex; align-items: center; gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.gm-version-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--ea-blue, #4D2EFD); display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
}
.gm-version-icon svg { stroke: white; }
.gm-version-label { font-size: .82rem; color: var(--ea-neutral-40, #667085); margin-bottom: .15rem; }
.gm-version-number {
    font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums;
    letter-spacing: -.02em; color: var(--ea-black, #1f1f1f);
}
.gm-version-controls {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
    margin-bottom: 1.25rem;
}
.gm-ver-control {
    background: #fff;
    border: 1px solid var(--ea-border, #e6e9f0);
    border-radius: 10px;
    padding: 1rem;
}
.gm-ver-control-label {
    font-size: .82rem; font-weight: 600; color: var(--ea-neutral-40, #667085);
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: .75rem;
}
.gm-ver-control-value {
    font-size: 2rem; font-weight: 700; color: var(--ea-black, #1f1f1f);
    font-variant-numeric: tabular-nums;
    margin-bottom: .75rem;
}
.gm-ver-control-actions { display: flex; gap: .5rem; }
.gm-ver-control-hint {
    font-size: .75rem; color: var(--ea-neutral-40, #667085); margin-top: .5rem;
    line-height: 1.4;
}
.gm-btn-bump {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .4rem .85rem; border-radius: 999px;
    font-size: .8rem; font-weight: 600;
    border: 1px solid var(--ea-border, #e6e9f0);
    background: #fff; color: var(--ea-black, #1f1f1f);
    cursor: pointer; transition: all 120ms;
}
.gm-btn-bump:hover {
    border-color: var(--ea-blue, #4D2EFD); color: var(--ea-blue, #4D2EFD);
    background: var(--ea-blue-10, #efecff);
}
.gm-next-build-preview {
    background: #fff;
    border: 1px dashed var(--ea-blue, #4D2EFD);
    border-radius: 10px;
    padding: .85rem 1rem;
    display: flex; align-items: center; justify-content: space-between;
}
.gm-next-version {
    font-size: 1.1rem; font-weight: 700;
    color: var(--ea-blue, #4D2EFD); font-variant-numeric: tabular-nums;
}
.gm-next-path {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: .72rem; color: var(--ea-neutral-40, #667085);
}

/* ── Build Notes ── */
.gm-build-notes {
    font-size: .78rem; color: var(--ea-neutral-40, #667085);
    max-width: 200px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
    display: block;
}

/* ── Upload Notes ── */
.gm-upload-notes { margin-top: 1rem; }
.gm-upload-notes label {
    display: block; font-size: .82rem; font-weight: 600;
    color: var(--ea-neutral-40, #667085); margin-bottom: .35rem;
}
.gm-upload-notes textarea {
    width: 100%; min-height: 72px; padding: .6rem .75rem;
    border: 1px solid var(--ea-border, #e6e9f0); border-radius: 10px;
    font-family: inherit; font-size: .85rem; color: var(--ea-black, #1f1f1f);
    background: #fff; resize: vertical;
    transition: border-color 120ms;
}
.gm-upload-notes textarea:focus {
    outline: none; border-color: var(--ea-blue, #4D2EFD);
    box-shadow: 0 0 0 3px rgba(77, 46, 253, .1);
}
.gm-upload-notes textarea::placeholder { color: var(--ea-neutral-40, #9e9e9e); }
.gm-upload-notes-hint {
    font-size: .72rem; color: var(--ea-neutral-40, #667085); margin-top: .25rem;
}

/* Build Preview Modal header */
.gm-preview-header {
    display: flex; align-items: center; gap: .75rem;
    height: 44px; padding: 0 .75rem 0 1rem;
    background: #111;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.gm-preview-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .75rem; font-weight: 600;
    color: #fff; background: var(--ea-blue, #4D2EFD);
    padding: .2rem .65rem; border-radius: 6px;
}
.gm-preview-title {
    flex: 1; font-size: .85rem; font-weight: 500;
    color: rgba(255,255,255,.8); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.gm-preview-header .game-modal-close {
    position: static; flex-shrink: 0;
}
.gm-preview-container {
    background: #000;
}
.gm-preview-actions {
    display: flex; align-items: center; gap: .5rem;
}
.gm-preview-action-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .75rem; font-weight: 500;
    color: rgba(255,255,255,.85); background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    padding: .25rem .7rem; border-radius: 6px;
    cursor: pointer; transition: all 120ms; white-space: nowrap;
}
.gm-preview-action-btn:hover {
    background: rgba(255,255,255,.2); color: #fff;
}
.gm-preview-action-primary {
    background: var(--ea-blue, #4D2EFD); border-color: var(--ea-blue, #4D2EFD);
    color: #fff;
}
.gm-preview-action-primary:hover {
    background: #3d22d4; border-color: #3d22d4;
}
.gm-preview-active-badge {
    display: inline-flex; align-items: center;
    font-size: .72rem; font-weight: 600; color: #34d399;
    background: rgba(52,211,153,.15); border: 1px solid rgba(52,211,153,.3);
    padding: .2rem .6rem; border-radius: 6px; white-space: nowrap;
}

/* Dialog styles */
.ea-dialog {
    background: var(--ea-white, #fff);
    border-radius: 14px;
    padding: 1.5rem;
    width: 100%;
    box-shadow: 0 24px 80px rgba(0,0,0,.2);
}
.ea-dialog h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.ea-dialog p { margin: 0 0 1rem; font-size: .9rem; color: var(--ea-neutral-40); }

/* Storage Info sidebar styles */
.gm-build-storage-info {
    background: var(--ea-blue-10, #efecff);
    border-color: transparent;
    padding: 1.25rem 1.5rem;
}

/* Responsive */
@media (max-width: 1200px) {
    .gm-detail-layout { grid-template-columns: 1fr; }
    .gm-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .gm-import-layout { grid-template-columns: 1fr; }
    .gm-import-source { border-right: none; border-bottom: 1px solid var(--ea-border); }
}

/* ═══════════════════════════════════════════════════════════════
   StationeryStatCard - KPI card with stationery triangle pattern
   ═══════════════════════════════════════════════════════════════ */

.ssc-card {
    background: #fff;
    border-radius: var(--ea-radius, 16px);
    padding: 1.35rem 1.25rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
    border: 1px solid var(--ea-border, #e2e4ea);
    position: relative;
    overflow: hidden;
    min-height: 145px;
    transition: box-shadow 0.2s, transform 0.2s;
}

.ssc-card:hover {
    box-shadow: 0 6px 20px rgba(16, 24, 40, 0.10);
    transform: translateY(-2px);
}

/* ── SVG triangle layer ── */
.ssc-triangles {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 260px;
    pointer-events: none;
    overflow: hidden;
}

.ssc-triangles svg {
    position: absolute;
    right: 0;
    top: 0;
    width: 260px;
    height: 100%;
}

/* ── Card content (sits above triangles) ── */
.ssc-content {
    position: relative;
    z-index: 1;
}

/* ── Icon container ── */
.ssc-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    margin-bottom: 0.85rem;
}

.ssc-icon svg {
    width: 20px;
    height: 20px;
}

/* ── Typography ── */
.ssc-label {
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ea-neutral-60, #667085);
}

.ssc-value {
    font-family: var(--ea-font);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
}

.ssc-change {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 0.2rem;
    color: var(--ea-neutral-60, #667085);
}

.ssc-change.positive { color: var(--stemgreen-dark, #2b9d5e); }
.ssc-change.negative { color: #ef4444; }
.ssc-change.neutral  { color: var(--ea-neutral-40, #98a2b3); }

/* ── Progress bar ── */
.ssc-progress {
    height: 4px;
    border-radius: 2px;
    background: #f0f1f4;
    margin-top: 0.5rem;
    overflow: hidden;
}

.ssc-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* ── Blue variant ── */
.ssc-blue .ssc-icon    { background: var(--stemblue-10, #F1EEFF); color: var(--stemblue, #4D2EFD); }
.ssc-blue .ssc-value   { color: var(--stemblue, #4D2EFD); }
.ssc-blue .ssc-progress-fill { background: var(--stemblue, #4D2EFD); }

/* ── Green variant ── */
.ssc-green .ssc-icon   { background: var(--stemgreen-10, #E4FFF0); color: var(--stemgreen-dark, #2b9d5e); }
.ssc-green .ssc-value  { color: var(--stemgreen-dark, #2b9d5e); }
.ssc-green .ssc-progress-fill { background: var(--stemgreen-dark, #2b9d5e); }

/* ── Orange variant ── */
.ssc-orange .ssc-icon  { background: var(--stemorange-10, #FFF4E7); color: var(--stemorange, #FE920D); }
.ssc-orange .ssc-value { color: var(--stemorange, #FE920D); }
.ssc-orange .ssc-progress-fill { background: var(--stemorange, #FE920D); }

/* ── Pink variant ── */
.ssc-pink .ssc-icon    { background: var(--stempink-10, #FEF1FB); color: var(--stempink, #F04FCD); }
.ssc-pink .ssc-value   { color: var(--stempink, #F04FCD); }
.ssc-pink .ssc-progress-fill  { background: var(--stempink, #F04FCD); }

/* ── Learning Analytics compact cards ── */
.la-stats-grid { gap: 1rem !important; margin-top: 1rem !important; align-items: stretch !important; }
.la-stats-grid .ssc-card { max-width: none; height: 100%; }
@media (max-width: 1400px) {
    .la-stats-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
    .la-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .la-stats-grid { grid-template-columns: 1fr !important; }
}

/* ── Blog Import Modal ── */
.ad-modal-content { padding: 1.5rem; font-family: 'Poppins', sans-serif; }
.ad-modal-content h3 { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 600; color: #1e1e2d; }
.ad-modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.5rem; }
.ad-text-danger { color: #dc2626; }
.ad-text-muted { color: #6b7280; font-size: 0.85rem; }
.ad-text-warning { color: #b45309; font-size: 0.85rem; }
.ad-import-warnings { background: #fffbeb; border: 1px solid #fde68a; border-radius: 0.5rem; padding: 0.75rem 1rem; margin-top: 0.75rem; }
.ad-import-preview { list-style: none; padding: 0; margin: 1rem 0; max-height: 240px; overflow-y: auto; }
.ad-import-preview li { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; font-size: 0.9rem; border-bottom: 1px solid rgba(0,0,0,0.05); }

/* ═══════════════════════════════════════════════════════════
   Student Management Cards  (sm-*)
   ═══════════════════════════════════════════════════════════ */
.sm-table-wrap { }
.sm-card-list { display: none; }
.sm-card-list .sm-card {
    background: var(--ea-white);
    border: 1px solid var(--ea-border-subtle);
    border-radius: var(--ea-radius-lg);
    padding: 1rem 1.125rem;
    box-shadow: var(--ea-shadow-4);
    position: relative;
    overflow: hidden;
    transition: box-shadow .15s;
}
.sm-card-list .sm-card:hover { box-shadow: var(--ea-shadow-8); }
.sm-card-list .sm-card + .sm-card { margin-top: .75rem; }

/* Brand triangle decoration (mono purple, V2) */
.sm-card .sm-card-tri {
    position: absolute;
    top: -25px;
    right: -50px;
    width: 180px;
    height: 120px;
    pointer-events: none;
    opacity: .15;
}

/* Header: avatar initials + name/username + badge */
.sm-card .sm-card-header {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .65rem;
    position: relative;
    z-index: 1;
}
.sm-card .sm-card-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ea-blue-10, #f0edff);
    color: var(--ea-blue);
    font-size: .82rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.sm-card .sm-card-avatar.sm-card-avatar-cover {
    width: 56px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, #dbeafe 0%, #c4b5fd 100%);
    padding: 0;
}
.sm-card .sm-card-avatar.sm-card-avatar-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Card variant with full-height game cover on the left */
.sm-card-list .sm-card.sm-card-with-cover {
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
}
.sm-card.sm-card-with-cover .sm-card-cover {
    flex-shrink: 0;
    width: 140px;
    align-self: stretch;
    background: linear-gradient(135deg, #dbeafe 0%, #c4b5fd 100%);
    overflow: hidden;
}
.sm-card.sm-card-with-cover .sm-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sm-card.sm-card-with-cover .sm-card-body {
    flex: 1;
    min-width: 0;
    padding: 1rem 1.125rem;
    display: flex;
    flex-direction: column;
}
.sm-card.sm-card-with-cover .sm-card-footer { margin-top: auto; }
@media (max-width: 600px) {
    .sm-card-list .sm-card.sm-card-with-cover { flex-direction: column; }
    .sm-card.sm-card-with-cover .sm-card-cover { width: 100%; height: 120px; }
}
.sm-card .sm-card-name { font-size: .92rem; font-weight: 600; }
.sm-card .sm-card-username { font-size: .8rem; color: var(--ea-neutral-60); margin-top: .1rem; }

/* Stats row */
.sm-card .sm-card-fields {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.sm-card .sm-card-field { display: flex; flex-direction: column; }
.sm-card .sm-card-field-label {
    font-size: .66rem;
    font-weight: 600;
    color: var(--ea-neutral-40);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .1rem;
}
.sm-card .sm-card-field-value {
    font-size: .82rem;
    color: var(--ea-neutral-80);
    font-weight: 500;
}
.sm-card .sm-card-divider {
    width: 1px;
    background: var(--ea-border-subtle);
    align-self: stretch;
}

/* Footer with action buttons */
.sm-card .sm-card-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .65rem;
    padding-top: .65rem;
    border-top: 1px solid var(--ea-border-subtle);
    position: relative;
    z-index: 1;
}
.sm-card-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--ea-blue-30, #c4b5fd);
    background: var(--ea-blue-10, #f0edff);
    font-family: var(--ea-font);
    font-size: .75rem;
    font-weight: 600;
    color: var(--ea-blue, #4D2EFD);
    cursor: pointer;
    transition: all .12s;
}
.sm-card-btn:hover { background: var(--ea-blue, #4D2EFD); color: #fff; border-color: var(--ea-blue, #4D2EFD); }
.sm-card-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.sm-card-btn-danger { color: var(--ea-red, #dc2626); background: #fef2f2; border-color: #fca5a5; }
.sm-card-btn-danger:hover { background: #dc2626; color: #fff; border-color: #dc2626; }

/* Responsive: show cards, hide table */
@media (max-width: 1400px) {
    .sm-table-wrap { display: none; }
    .sm-card-list  { display: block; }
}
@media (max-width: 600px) {
    .sm-card .sm-card-fields { flex-direction: column; gap: .5rem; }
    .sm-card .sm-card-divider { width: 100%; height: 1px; }
}