/* =====================================================================
   CORE / GLOBAL
   Consolidated into assets/css/app.css
   ===================================================================== */

@font-face {
    font-family: PioneerSans;
    src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: PioneerSans;
    src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap
}

:root {
    /* Colors */
    --bg: #f4f7f6;
    --surface: #ffffff;
    --surface-2: #edf2f0;
    --surface-3: #e2e9e7;
    --text: #141c1a;
    --muted: #576b66;
    --border: #d2e0dc;
    --accent: #0f7c6e;
    --accent-strong: #0a5c51;
    --accent-soft: #e3f2ef;
    --danger: #d93843;
    --danger-soft: #fce8e9;
    --warning: #b37415;
    --warning-soft: #fdf2df;
    --success: #1b8a47;
    --success-soft: #e1f6eb;
    --info: #2173db;
    --info-soft: #e6f0fc;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(27, 59, 52, 0.05);
    --shadow: 0 4px 6px -1px rgba(27, 59, 52, 0.05), 0 2px 4px -1px rgba(27, 59, 52, 0.03);
    --shadow-md: 0 10px 15px -3px rgba(27, 59, 52, 0.05), 0 4px 6px -2px rgba(27, 59, 52, 0.03);
    --shadow-lg: 0 20px 25px -5px rgba(27, 59, 52, 0.05), 0 10px 10px -5px rgba(27, 59, 52, 0.02);

    /* Radii */
    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-Index */
    --z-base: 1;
    --z-header: 40;
    --z-sidebar: 50;
    --z-dropdown: 60;
    --z-overlay: 70;
    --z-modal: 80;
    --z-toast: 90;

    /* Layout */
    --sidebar: 260px;
}

html[data-theme=dark] {
    --bg: #0f1514;
    --surface: #141c1a;
    --surface-2: #1c2623;
    --surface-3: #24332f;
    --text: #f0f5f4;
    --muted: #94a8a3;
    --border: #2c3d39;
    --accent: #25b8a5;
    --accent-strong: #3cdbc7;
    --accent-soft: #123d37;
    --danger: #ef6972;
    --danger-soft: #4a1f22;
    --warning: #eab45c;
    --warning-soft: #423218;
    --success: #3fc977;
    --success-soft: #143d23;
    --info: #6ba7f2;
    --info-soft: #1b3557;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

@media(prefers-color-scheme:dark) {
    html[data-theme=system] {
        --bg: #0f1514;
        --surface: #141c1a;
        --surface-2: #1c2623;
        --surface-3: #24332f;
        --text: #f0f5f4;
        --muted: #94a8a3;
        --border: #2c3d39;
        --accent: #25b8a5;
        --accent-strong: #3cdbc7;
        --accent-soft: #123d37;
        --danger: #ef6972;
        --danger-soft: #4a1f22;
        --warning: #eab45c;
        --warning-soft: #423218;
        --success: #3fc977;
        --success-soft: #143d23;
        --info: #6ba7f2;
        --info-soft: #1b3557;

        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
        --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    }
}

* {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--border) 75%, var(--muted) 25%) transparent;
}

/* ── Modern Custom Scrollbars (Webkit / Chrome / Edge / Safari) ── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--border) 70%, var(--muted) 30%);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent) 70%, var(--muted) 30%);
    border: 1.5px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

html {
    color-scheme: light dark;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 15px/1.55 PioneerSans, Segoe UI, sans-serif;
}

a {
    color: inherit;
    text-decoration: none
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit
}

button,
a {
    touch-action: manipulation
}

img {
    max-width: 100%
}

h1,
h2,
h3,
p {
    margin-top: 0
}

h1 {
    font-size: clamp(1.75rem, 3vw, 2.55rem);
    line-height: 1.08;
    letter-spacing: -.035em;
    margin-bottom: .55rem
}

h2 {
    font-size: 1.18rem;
    line-height: 1.25;
    margin-bottom: .35rem
}

h3 {
    font-size: 1rem
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.skip-link {
    position: fixed;
    left: 1rem;
    top: -5rem;
    z-index: 100;
    background: var(--text);
    color: var(--surface);
    padding: .7rem 1rem;
    border-radius: 8px
}

.skip-link:focus {
    top: 1rem
}

.app-shell {
    min-height: 100dvh
}

/* ══════════════════════════════════════════════════════════════════════════
   GALILEO-STYLE SIDEBAR COLLAPSE & EXPAND MECHANISM
══════════════════════════════════════════════════════════════════════════ */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar, 250px);
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 12px 10px 14px;
    display: flex;
    flex-direction: column;
    z-index: var(--z-sidebar);
    transition: width 0.22s cubic-bezier(0.2, 0, 0, 1), padding 0.22s cubic-bezier(0.2, 0, 0, 1), transform 0.22s cubic-bezier(0.2, 0, 0, 1);
    box-sizing: border-box;
    contain: layout;
}

/* Galileo Sidebar Header */
.sidebar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0 12px 0 !important;
    min-height: 36px !important;
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 10px !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.sidebar-header .brand,
.brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    text-decoration: none !important;
    color: var(--text) !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    overflow: hidden !important;
    transition: opacity 0.15s ease !important;
}

.brand:hover {
    opacity: 0.88;
}

.brand-logo,
.brand img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 4px rgba(107, 32, 215, 0.15) !important;
}

.brand-text,
.brand>span {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.brand-text strong,
.brand strong {
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    letter-spacing: -0.01em !important;
}

/* Galileo Panel-Left Toggle Button */
.sidebar-toggle-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--muted) !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    transition: all 0.15s cubic-bezier(0.2, 0, 0, 1) !important;
}

.sidebar-toggle-btn:hover {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.sidebar-toggle-btn:active {
    transform: scale(0.96) !important;
}

.sidebar-toggle-icon {
    width: 19px !important;
    height: 19px !important;
    transition: transform 0.2s ease !important;
}

/* Navigation List */
.nav-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--border) 60%, transparent) transparent;
}

.nav-list::-webkit-scrollbar {
    width: 4px;
}

.nav-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--border) 60%, transparent);
    border-radius: 9999px;
}

.sidebar:hover .nav-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--muted) 40%, transparent);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 38px;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.88rem;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
}

.nav-link:hover {
    background: var(--surface-2);
    color: var(--text);
}

.nav-link.active {
    background: var(--surface-2);
    color: var(--text);
    font-weight: 700;
}

.nav-glyph {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.sidebar-footer {
    margin-top: auto;
    border-top: 1px solid var(--border);
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--border) 60%, transparent) transparent;
}

.nav-list::-webkit-scrollbar {
    width: 4px;
}

.nav-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--border) 60%, transparent);
    border-radius: 9999px;
}

.sidebar:hover .nav-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--muted) 40%, transparent);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
    position: relative;
}

.nav-link:hover {
    background: var(--surface-2);
    color: var(--text);
}

.nav-link:active {
    transform: translateY(1px);
}

.nav-link.active {
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 700;
}

.nav-glyph {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    background: transparent;
    font-size: .72rem;
}

.nav-link.active .nav-glyph {
    background: transparent;
}

/* ─── Expandable Learning Tools Group ─────────────────────────────── */
.nav-group {
    margin: 2px 0;
    width: 100%;
}

.nav-group > summary.nav-link {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

.nav-group > summary::-webkit-details-marker,
.nav-group > summary::marker {
    display: none !important;
}

.nav-chevron {
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: var(--muted);
    transition: transform var(--transition-base, 0.2s ease);
}

.nav-group[open] > summary .nav-chevron {
    transform: rotate(180deg);
}

.nav-sublist {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 4px 0 6px 20px;
    padding-left: 12px;
    border-left: 2px solid var(--border);
    animation: sublistFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.nav-sublink {
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--radius-sm, 8px);
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}

.nav-sublink:hover {
    background: var(--surface-2);
    color: var(--text);
    transform: translateX(2px);
}

.nav-sublink.active {
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   GALILEO COLLAPSED RAIL MODE (60px)
══════════════════════════════════════════════════════════════════════════ */
html.sidebar-collapsed .sidebar,
body.sidebar-collapsed .sidebar,
.sidebar.collapsed {
    width: 60px;
    padding: 12px 6px 14px;
}

html.sidebar-collapsed .app-frame,
body.sidebar-collapsed .app-frame {
    margin-left: 60px;
}

html.sidebar-collapsed .sidebar-header {
    justify-content: center;
    padding: 2px 0 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}

html.sidebar-collapsed .brand {
    display: none !important;
}

html.sidebar-collapsed .sidebar-toggle-btn {
    width: 34px;
    height: 34px;
}

html.sidebar-collapsed .nav-link,
body.sidebar-collapsed .nav-link,
.sidebar.collapsed .nav-link {
    justify-content: center;
    padding: 8px 0;
    width: 100%;
    min-height: 38px;
}

html.sidebar-collapsed .nav-link span:not(.nav-glyph),
html.sidebar-collapsed .nav-chevron,
html.sidebar-collapsed .nav-sublist,
body.sidebar-collapsed .nav-link span:not(.nav-glyph),
body.sidebar-collapsed .nav-chevron,
body.sidebar-collapsed .nav-sublist,
.sidebar.collapsed .nav-link span:not(.nav-glyph),
.sidebar.collapsed .nav-chevron,
.sidebar.collapsed .nav-sublist {
    display: none !important;
}

/* ─── Spotify-Style Popover Tooltips ─────────────────────────────── */
html.sidebar-collapsed .nav-link:hover::after,
body.sidebar-collapsed .nav-link:hover::after,
.sidebar.collapsed .nav-link:hover::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: #181422;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    animation: spotifyTooltipFade 0.18s cubic-bezier(0.2, 0, 0, 1);
}

html.sidebar-collapsed .nav-link:hover::before,
body.sidebar-collapsed .nav-link:hover::before,
.sidebar.collapsed .nav-link:hover::before {
    content: '';
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    border-width: 5px 6px 5px 0;
    border-style: solid;
    border-color: transparent #181422 transparent transparent;
    z-index: 101;
    pointer-events: none;
}

@keyframes spotifyTooltipFade {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-6px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0) scale(1);
    }
}

.sidebar-footer {
    margin-top: auto;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    display: grid;
    gap: 3px;
}

.app-frame {
    margin-left: var(--sidebar);
    min-height: 100dvh;
    transition: margin-left var(--transition-base, 0.25s ease);
}

/* ─── Topbar Navigation Header ───────────────────────────────────────── */
.topbar {
    height: 66px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 var(--space-8, 32px);
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.global-search {
    width: min(520px, 45vw);
    height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-2);
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 0 12px 0 14px;
    color: var(--muted);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.global-search:focus-within {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft), 0 4px 12px rgba(107, 32, 215, 0.08);
}

.global-search .search-icon {
    width: 17px;
    height: 17px;
    color: var(--muted);
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.global-search:focus-within .search-icon {
    color: var(--accent);
}

.global-search input {
    border: 0;
    outline: 0;
    background: transparent;
    width: 100%;
    height: 100%;
    font-size: 0.9rem;
    color: var(--text);
}

.global-search input::placeholder {
    color: var(--muted);
    opacity: 0.85;
}

.global-search kbd {
    font-size: 0.68rem;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.top-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-button {
    position: relative;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.icon-button:hover {
    background: var(--surface);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(107, 32, 215, 0.12);
}

.icon-button.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.icon-button svg {
    width: 18px;
    height: 18px;
    transition: transform 0.18s ease;
}

.icon-button:hover svg {
    transform: scale(1.08);
}

.count {
    position: absolute;
    right: -4px;
    top: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    background: var(--danger, #ef4444);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    border: 2px solid var(--surface);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
    line-height: 1;
}

.profile-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 14px 4px 5px;
    border-radius: 9999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-chip:hover,
.profile-dropdown-wrap.is-open .profile-chip {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 4px 14px -2px rgba(107, 32, 215, 0.15);
    transform: translateY(-1px);
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-strong);
    display: grid;
    place-items: center;
    font-weight: 700;
}

.avatar.small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.profile-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
}

.profile-copy strong {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text);
}

.profile-copy small {
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 600;
    margin-top: 1px;
}

.mobile-menu {
    display: none
}

.main-content {
    padding: 36px 38px 72px;
    max-width: 1520px;
    margin: 0 auto
}

.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px
}

.page-heading p {
    color: var(--muted);
    margin: 0;
    max-width: 700px
}

.heading-actions {
    display: flex;
    gap: 10px
}

.alert {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 15px;
    border-radius: var(--radius-sm);
    margin: 0 0 20px;
    border: 1px solid var(--border);
    background: var(--surface)
}

.alert-danger {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border))
}

.alert-warning {
    background: var(--warning-soft);
    color: var(--warning)
}

.alert-success {
    background: var(--accent-soft);
    color: var(--accent-strong)
}

.alert button {
    border: 0;
    background: transparent;
    font-size: 1.2rem;
    cursor: pointer
}

.emergency-banner {
    background: var(--danger-soft);
    border-left: 4px solid var(--danger);
    padding: 16px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 24px
}

.emergency-banner p {
    margin: .3rem 0 0
}

.today-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(240px, .8fr);
    gap: 18px;
    margin-bottom: 36px
}

.today-primary,
.today-aside {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px
}

.today-aside {
    display: grid;
    grid-template-columns: 1fr;
    align-content: center
}

.summary-number {
    padding: 18px 10px
}

.summary-number+.summary-number {
    border-top: 1px solid var(--border)
}

.summary-number span {
    font-size: 2.45rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.05em
}

.summary-number p {
    color: var(--muted);
    margin: .45rem 0 0
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 18px
}

.section-title p {
    color: var(--muted);
    margin: 0
}

.section-title>a {
    color: var(--accent-strong);
    font-weight: 700;
    font-size: .82rem
}

.timeline {
    display: grid
}

.timeline-row {
    display: grid;
    grid-template-columns: 74px 3px 1fr;
    gap: 16px;
    align-items: center;
    padding: 13px 0
}

.timeline-row time {
    font-size: .78rem;
    font-weight: 700;
    color: var(--muted)
}

.event-line {
    align-self: stretch;
    border-radius: 2px;
    background: var(--accent)
}

.timeline-row span:last-child {
    display: grid
}

.timeline-row small {
    color: var(--muted);
    margin-top: 2px
}

.content-section {
    margin-top: 36px
}

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

.course-grid.large {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.course-card {
    --course-accent: var(--accent);
    position: relative;
    overflow: hidden;
    min-height: 240px;
    padding: 21px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 0 transparent;
    transition: transform .2s, box-shadow .2s, border-color .2s
}

.course-card:before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--course-accent)
}

.course-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--course-accent) 38%, var(--border))
}

.course-kicker {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .65rem;
    font-weight: 700;
    color: var(--muted)
}

.course-card h3 {
    font-size: 1.12rem;
    margin: 18px 0 7px
}

.course-card p {
    font-size: .82rem;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: .7rem;
    margin-top: auto
}

.progress {
    height: 5px;
    background: var(--surface-3);
    border-radius: 4px;
    overflow: hidden;
    margin: 7px 0 13px
}

.progress span {
    display: block;
    height: 100%;
    background: var(--course-accent, var(--accent));
    border-radius: inherit
}

.card-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: var(--accent-strong);
    font-size: .8rem
}

.card-link b {
    font-size: 1.25rem
}

.task-list,
.attention-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden
}

.task-row {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) auto 56px;
    gap: 15px;
    align-items: center;
    padding: 16px 20px
}

.task-row+.task-row {
    border-top: 1px solid var(--border)
}

.task-row:hover {
    background: var(--surface-2)
}

.task-row span:nth-child(2) {
    display: grid
}

.task-row small {
    color: var(--muted)
}

.task-priority {
    width: 4px;
    height: 38px;
    background: var(--warning);
    border-radius: 3px
}

.task-priority.overdue {
    background: var(--danger)
}

.task-due {
    font-size: .76rem;
    color: var(--muted)
}

.task-due.danger {
    color: var(--danger)
}

.task-row>b {
    font-size: .75rem;
    color: var(--accent-strong)
}

.attention-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px
}

.attention-list a+a {
    border-top: 1px solid var(--border)
}

.attention-list span {
    display: grid
}

.attention-list small {
    color: var(--muted)
}

.attention-list b {
    color: var(--warning);
    font-size: .78rem
}

.announcement-list {
    display: grid;
    gap: 10px
}

.announcement {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 17px
}

.announcement>span {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: .64rem;
    font-weight: 700;
    color: var(--muted)
}

.announcement h3 {
    margin-bottom: 4px
}

.announcement p {
    margin: 0 0 4px;
    color: var(--muted)
}

.announcement small {
    color: var(--muted)
}

.announcement.priority-emergency {
    border-left: 4px solid var(--danger)
}

.announcement.priority-important {
    border-left: 4px solid var(--warning)
}

.empty-state {
    text-align: center;
    padding: 45px 24px;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius)
}

.empty-mark {
    display: block;
    width: 46px;
    height: 5px;
    border-radius: 5px;
    background: var(--accent);
    margin: 0 auto 20px
}

.empty-state p {
    color: var(--muted);
    max-width: 520px;
    margin: 0 auto 18px
}

.filter-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-bottom: 18px;
    padding-bottom: 2px
}

.filter {
    white-space: nowrap;
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 8px 13px;
    border-radius: 9px;
    color: var(--muted);
    font-weight: 700;
    font-size: .75rem;
    cursor: pointer
}

.filter.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff
}

.course-hero {
    --course-accent: var(--accent);
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 34px;
    overflow: hidden
}

.course-hero:after {
    content: "";
    position: absolute;
    right: -120px;
    top: -200px;
    width: 380px;
    height: 380px;
    border: 80px solid color-mix(in srgb, var(--course-accent) 12%, transparent);
    border-radius: 50%
}

.course-hero>a,
.course-hero>span {
    position: relative;
    z-index: 1;
    font-size: .72rem;
    color: var(--muted);
    margin-right: 12px
}

.course-hero h1 {
    position: relative;
    z-index: 1;
    margin: 18px 0 8px;
    max-width: 700px
}

.course-hero>p {
    position: relative;
    z-index: 1;
    color: var(--muted);
    max-width: 670px
}

.hero-progress {
    position: relative;
    z-index: 1;
    max-width: 420px;
    margin-top: 26px
}

.hero-progress>span {
    font-size: .76rem
}

.hero-progress strong {
    font-size: 1rem;
    margin-right: 4px
}

.course-tabs,
.workspace-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--border);
    margin: 18px 0 28px;
    overflow-x: auto
}

.course-tabs a,
.workspace-tabs a {
    padding: 12px 2px 10px;
    color: var(--muted);
    font-weight: 700;
    font-size: .78rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap
}

.course-tabs a.active,
.workspace-tabs a.active {
    color: var(--accent-strong);
    border-color: var(--accent)
}

.course-content {
    max-width: 1050px
}

.module-list {
    display: grid;
    gap: 12px
}

.module {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden
}

.module summary {
    list-style: none;
    cursor: pointer;
    padding: 17px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.module summary::-webkit-details-marker {
    display: none
}

.module summary span {
    display: grid
}

.module summary small {
    color: var(--muted);
    font-size: .69rem
}

.module summary b {
    color: var(--muted);
    font-size: .72rem
}

.module-items {
    border-top: 1px solid var(--border)
}

.content-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 20px
}

.content-row+.content-row {
    border-top: 1px solid var(--border)
}

.content-row.done {
    opacity: .72
}

.content-type {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    background: var(--surface-2);
    border-radius: 8px;
    font-weight: 700;
    font-size: .68rem
}

.content-row span:nth-child(2) {
    display: grid
}

.content-row small {
    color: var(--muted)
}

.status-label {
    display: inline-flex;
    width: max-content;
    background: var(--surface-2);
    color: var(--muted);
    padding: 4px 8px;
    border-radius: 7px;
    text-transform: capitalize;
    font-size: .68rem;
    font-weight: 700
}

.btn {
    border: 1px solid transparent;
    border-radius: 9px;
    min-height: 40px;
    padding: 9px 15px;
    font-weight: 700;
    font-size: .78rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: transform .15s, background .15s
}

.btn:active {
    transform: translateY(1px)
}

.btn-primary {
    background: var(--accent);
    color: #fff
}

.btn-primary:hover {
    background: var(--accent-strong)
}

.btn-secondary {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text)
}

.btn-muted {
    background: var(--surface-2);
    color: var(--muted)
}

.btn-small {
    min-height: 32px;
    padding: 5px 10px;
    font-size: .68rem
}

.btn-full {
    width: 100%
}

.btn:disabled {
    opacity: .55;
    cursor: not-allowed
}

.assignment-layout,
.manage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr);
    gap: 20px
}

.assignment-brief,
.submission-panel,
.form-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px
}

.assignment-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 30px
}

.assignment-meta span {
    display: grid;
    padding: 14px;
    background: var(--surface-2)
}

.assignment-meta small {
    color: var(--muted)
}

.prose {
    white-space: normal;
    line-height: 1.75;
    color: var(--text)
}

.submission-success {
    display: grid;
    background: var(--accent-soft);
    color: var(--accent-strong);
    padding: 16px;
    border-radius: var(--radius-sm);
    margin: 14px 0 20px
}

.submission-success small {
    margin-top: 5px
}

.stack-form {
    display: grid;
    gap: 15px
}

.stack-form label,
.inline-create label,
.grade-form label,
.settings-form label {
    display: grid;
    gap: 6px;
    font-size: .76rem;
    font-weight: 700
}

.stack-form label small {
    font-weight: 400;
    color: var(--muted)
}

input,
textarea,
select {
    width: 100%;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 9px;
    padding: 10px 11px;
    outline: 0
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft)
}

textarea {
    resize: vertical
}

.check-row {
    display: flex !important;
    grid-template-columns: auto 1fr !important;
    align-items: flex-start;
    gap: 9px !important;
    font-weight: 400 !important
}

.check-row input {
    width: auto;
    margin-top: 4px
}

.form-two,
.form-three {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
}

.form-three {
    grid-template-columns: repeat(3, 1fr)
}

.calendar-month {
    margin-bottom: 28px
}

.calendar-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden
}

.calendar-row {
    display: grid;
    grid-template-columns: 50px 90px 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px 18px
}

.calendar-row+.calendar-row {
    border-top: 1px solid var(--border)
}

.calendar-row time {
    display: grid;
    text-align: center
}

.calendar-row time strong {
    font-size: 1.25rem
}

.calendar-row time small,
.calendar-row span:last-child small {
    color: var(--muted)
}

.calendar-row span:last-child {
    display: grid
}

.calendar-type {
    text-align: center;
    background: var(--surface-2);
    padding: 5px 7px;
    border-radius: 7px;
    font-size: .65rem;
    font-weight: 700
}

.grade-section {
    margin-bottom: 30px
}

.grade-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden
}

.grade-row {
    display: grid;
    grid-template-columns: 1fr 110px 90px;
    align-items: center;
    gap: 16px;
    padding: 16px 20px
}

.grade-row+.grade-row {
    border-top: 1px solid var(--border)
}

.grade-row span:first-child {
    display: grid
}

.grade-row small {
    color: var(--muted)
}

.grade-row b {
    color: var(--accent-strong)
}

.attendance-summary {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 20px
}

.attendance-ring {
    --attendance: 0;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center;
    background: radial-gradient(circle, var(--surface) 62%, transparent 63%), conic-gradient(var(--accent) calc(var(--attendance)*1%), var(--surface-3) 0)
}

.attendance-ring strong {
    font-size: 2.25rem
}

.attendance-ring span {
    color: var(--muted);
    font-size: .74rem
}

.attendance-counts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border)
}

.attendance-counts div {
    background: var(--surface);
    display: grid;
    place-content: center;
    padding: 16px
}

.attendance-counts span {
    font-size: 1.65rem;
    font-weight: 700
}

.attendance-counts small {
    color: var(--muted)
}

.messages-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: 620px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden
}

.conversation-list {
    border-right: 1px solid var(--border);
    padding: 8px
}

.conversation {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 11px;
    border-radius: var(--radius-sm)
}

.conversation.active,
.conversation:hover {
    background: var(--surface-2)
}

.conversation>span:last-child {
    display: grid;
    min-width: 0
}

.conversation small {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--muted)
}

.message-thread {
    display: flex;
    flex-direction: column;
    min-width: 0
}

.message-history {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: auto;
    max-height: 560px
}

.message {
    max-width: 72%;
    align-self: flex-start;
    background: var(--surface-2);
    border-radius: 4px var(--radius-sm) var(--radius-sm) var(--radius-sm);
    padding: 12px
}

.message.mine {
    align-self: flex-end;
    background: var(--accent-soft);
    border-radius: var(--radius-sm) 4px var(--radius-sm) var(--radius-sm)
}

.message p {
    margin: 3px 0
}

.message time {
    font-size: .64rem;
    color: var(--muted)
}

.message-compose {
    margin-top: auto;
    border-top: 1px solid var(--border);
    padding: 14px;
    display: flex;
    gap: 10px
}

.message-compose textarea {
    min-height: 46px
}

.notification-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden
}

.notification-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 13px;
    align-items: center;
    padding: 14px 18px
}

.notification-row+.notification-row {
    border-top: 1px solid var(--border)
}

.notification-row.unread {
    background: var(--accent-soft)
}

.notification-category {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--surface-2);
    font-size: .68rem;
    font-weight: 700
}

.notification-row span:nth-child(2) {
    display: grid
}

.notification-row small,
.notification-row time {
    color: var(--muted);
    font-size: .72rem
}

.course-selector {
    display: grid;
    gap: 6px;
    max-width: 600px;
    margin-bottom: 22px;
    font-size: .75rem;
    font-weight: 700
}

.inline-create {
    display: grid;
    grid-template-columns: 100px 1fr 1.5fr 1fr auto auto;
    gap: 9px;
    align-items: end;
    padding: 15px;
    background: var(--surface-2);
    border-top: 1px solid var(--border)
}

.grading-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 18px
}

.grading-nav {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    height: max-content
}

.grading-nav a {
    display: grid;
    padding: 11px;
    border-radius: 9px
}

.grading-nav a.active {
    background: var(--accent-soft);
    color: var(--accent-strong)
}

.grading-nav small {
    color: var(--muted)
}

.grading-list {
    display: grid;
    gap: 12px
}

.grading-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px
}

.grading-card header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 17px
}

.grading-card header span:first-child {
    display: grid
}

.grading-card small {
    color: var(--muted)
}

.grade-form {
    display: grid;
    grid-template-columns: 120px 150px 140px minmax(240px, 1fr) auto;
    gap: 10px;
    align-items: end
}

.attendance-register {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px
}

.attendance-register>div {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 12px;
    align-items: center;
    padding: 12px 16px
}

.attendance-register>div+div {
    border-top: 1px solid var(--border)
}

.attendance-register span {
    display: grid
}

.attendance-register small {
    color: var(--muted)
}

.admin-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 28px
}

.admin-metrics div {
    display: grid;
    padding: 25px
}

.admin-metrics div+div {
    border-left: 1px solid var(--border)
}

.admin-metrics strong {
    font-size: 2.1rem;
    letter-spacing: -.04em
}

.admin-metrics span {
    color: var(--muted)
}

.system-map {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap
}

.system-map span {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 12px 15px;
    border-radius: 10px
}

.system-map span.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent)
}

.system-map b {
    color: var(--muted)
}

.data-table-wrap {
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius)
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px
}

th,
td {
    text-align: left;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border)
}

th {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    background: var(--surface-2)
}

td small {
    display: block;
    color: var(--muted)
}

.integration-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.integration-grid article {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px
}

.integration-grid header {
    display: flex;
    justify-content: space-between;
    gap: 10px
}

.integration-grid p {
    color: var(--muted)
}

.health {
    height: max-content;
    padding: 4px 8px;
    border-radius: 7px;
    font-size: .65rem;
    font-weight: 700
}

.health-healthy {
    background: var(--accent-soft);
    color: var(--accent-strong)
}

.health-failed,
.health-unavailable {
    background: var(--danger-soft);
    color: var(--danger)
}

.settings-form,
.settings-grid {
    display: grid;
    gap: 16px
}

.settings-form section,
.settings-grid section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px
}

.settings-grid {
    grid-template-columns: 1fr 1fr
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px
}

.theme-choice {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    cursor: pointer
}

.theme-choice.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft)
}

.theme-preview {
    display: block;
    height: 80px;
    border-radius: 7px;
    background: linear-gradient(90deg, #eef3f1 30%, #fbfcfc 30%);
    border: 1px solid #d7e0dd;
    margin-bottom: 8px
}

.theme-preview.dark {
    background: linear-gradient(90deg, #101816 30%, #1c2926 30%);
    border-color: #30413d
}

.theme-preview.system {
    background: linear-gradient(135deg, #fbfcfc 49%, #16201e 51%)
}

.profile-details {
    margin: 0
}

.profile-details div {
    display: grid;
    grid-template-columns: 120px 1fr;
    padding: 10px 0
}

.profile-details div+div {
    border-top: 1px solid var(--border)
}

.profile-details dt {
    color: var(--muted)
}

.profile-details dd {
    margin: 0;
    font-weight: 700
}

.search-results,
.resource-grid {
    display: grid;
    gap: 10px
}

.search-results a {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 4px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 15px
}

.search-results span {
    grid-row: 1/3;
    color: var(--accent-strong);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase
}

.search-results small {
    color: var(--muted)
}

.resource-grid {
    grid-template-columns: repeat(3, 1fr)
}

.resource-grid a {
    display: grid;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px
}

.resource-grid a>span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent-strong);
    border-radius: 9px;
    font-weight: 700;
    margin-bottom: 22px
}

.resource-grid small {
    color: var(--muted)
}

.help-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.help-grid details {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 17px
}

.help-grid summary {
    font-weight: 700;
    cursor: pointer
}

.help-grid p {
    color: var(--muted);
    margin: 10px 0 0
}

.setup-state {
    max-width: 660px;
    min-height: 100dvh;
    margin: auto;
    padding: 80px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start
}

.setup-state img {
    width: 180px;
    margin-bottom: 40px
}

.setup-state p {
    color: var(--muted);
    font-size: 1.05rem
}

.setup-state code {
    background: var(--surface-2);
    padding: 12px;
    border-radius: 8px
}

.auth-page {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1.1fr .9fr
}

.auth-brand {
    background: #0b5148;
    color: #edf7f4;
    padding: clamp(36px, 6vw, 84px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden
}

.auth-brand:after {
    content: "";
    position: absolute;
    width: 540px;
    height: 540px;
    border: 110px solid rgba(255, 255, 255, .055);
    border-radius: 50%;
    right: -260px;
    bottom: -250px
}

.auth-brand img {
    width: 210px;
    filter: brightness(0) invert(1);
    position: relative;
    z-index: 1
}

.auth-brand div {
    position: relative;
    z-index: 1;
    max-width: 650px
}

.auth-brand div>span {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .68rem
}

.auth-brand h1 {
    font-size: clamp(2.3rem, 5vw, 4.8rem);
    max-width: 760px;
    margin: 20px 0
}

.auth-brand p {
    font-size: 1.05rem;
    max-width: 500px;
    color: #c8e3dd
}

.auth-brand small {
    position: relative;
    z-index: 1;
    color: #b9d9d2
}

.auth-panel {
    display: grid;
    place-items: center;
    padding: 40px;
    background: var(--bg)
}

.auth-card {
    width: min(440px, 100%)
}

.auth-card h2 {
    font-size: 1.7rem
}

.auth-card>p {
    color: var(--muted);
    margin-bottom: 24px
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: .72rem;
    margin: 20px 0
}

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

.config-note {
    display: block;
    color: var(--muted);
    margin-top: 8px
}

.auth-help {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    font-size: .75rem;
    color: var(--accent-strong)
}

.mobile-nav {
    display: none
}

@media(max-width:1180px) {
    .course-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .course-grid.large {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .inline-create {
        grid-template-columns: 1fr 1fr
    }

    .grade-form {
        grid-template-columns: repeat(3, 1fr)
    }

    .feedback-field {
        grid-column: 1/-1
    }

    .integration-grid {
        grid-template-columns: 1fr
    }

    .profile-copy {
        display: none
    }
}

@media(max-width:860px) {
    :root {
        --sidebar: 0px
    }

    .sidebar {
        transform: translateX(-102%);
        width: 270px;
        transition: transform .22s
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow)
    }

    .app-frame {
        margin-left: 0
    }

    .mobile-menu {
        display: grid
    }

    .mobile-menu span {
        width: 17px;
        height: 2px;
        background: var(--text);
        margin: 1.5px
    }

    .topbar {
        padding: 0 16px
    }

    .global-search {
        width: auto;
        flex: 1
    }

    .global-search kbd {
        display: none
    }

    .main-content {
        padding: 24px 16px 90px
    }

    .mobile-nav {
        position: fixed;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        inset: auto 0 0;
        background: var(--surface);
        border-top: 1px solid var(--border);
        padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        z-index: 25
    }

    .mobile-nav a {
        display: grid;
        place-items: center;
        font-weight: 700;
        color: var(--muted)
    }

    .mobile-nav a>span {
        width: 28px;
        height: 24px;
        display: grid;
        place-items: center;
        background: var(--surface-2);
        border-radius: 7px;
        font-size: .65rem
    }

    .mobile-nav small {
        font-size: .62rem;
        margin-top: 3px
    }

    .today-layout,
    .assignment-layout,
    .manage-grid,
    .settings-grid {
        grid-template-columns: 1fr
    }

    .today-aside {
        grid-template-columns: 1fr 1fr
    }

    .summary-number+.summary-number {
        border-top: 0;
        border-left: 1px solid var(--border)
    }

    .messages-layout {
        grid-template-columns: 240px 1fr
    }

    .grading-layout {
        grid-template-columns: 1fr
    }

    .grading-nav {
        display: flex;
        overflow-x: auto
    }

    .grading-nav a {
        min-width: 180px
    }

    .attendance-summary {
        grid-template-columns: 200px 1fr
    }

    .admin-metrics {
        grid-template-columns: repeat(2, 1fr)
    }

    .admin-metrics div:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--border)
    }

    .admin-metrics div:nth-child(4) {
        border-top: 1px solid var(--border)
    }

    .resource-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:620px) {
    .main-content {
        padding-top: 20px
    }

    .page-heading {
        display: block;
        margin-bottom: 22px
    }

    .heading-actions {
        margin-top: 14px
    }

    .course-grid,
    .course-grid.large {
        grid-template-columns: 1fr
    }

    .course-card {
        min-height: 210px
    }

    .today-layout {
        grid-template-columns: 1fr
    }

    .today-primary,
    .today-aside {
        padding: 18px
    }

    .task-row {
        grid-template-columns: 4px 1fr auto;
        padding: 14px
    }

    .task-due {
        grid-column: 2/4
    }

    .task-row>b {
        display: none
    }

    .assignment-meta {
        grid-template-columns: 1fr
    }

    .assignment-meta span+span {
        border-top: 1px solid var(--border)
    }

    .course-hero {
        padding: 24px
    }

    .course-hero:after {
        display: none
    }

    .content-row {
        grid-template-columns: 32px 1fr
    }

    .content-row>form,
    .content-row>.status-label {
        grid-column: 2
    }

    .calendar-row {
        grid-template-columns: 45px 1fr
    }

    .calendar-type {
        display: none
    }

    .grade-row {
        grid-template-columns: 1fr auto
    }

    .grade-row>span:last-child {
        grid-column: 1/3
    }

    .attendance-summary {
        grid-template-columns: 1fr
    }

    .attendance-ring {
        width: 190px;
        margin: auto
    }

    .messages-layout {
        display: block
    }

    .conversation-list {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        max-height: 220px;
        overflow: auto
    }

    .message-thread {
        min-height: 480px
    }

    .message {
        max-width: 88%
    }

    .notification-row {
        grid-template-columns: 34px 1fr
    }

    .notification-row time {
        grid-column: 2
    }

    .inline-create,
    .grade-form {
        grid-template-columns: 1fr
    }

    .form-two,
    .form-three {
        grid-template-columns: 1fr
    }

    .attendance-register>div {
        grid-template-columns: 1fr 120px
    }

    .admin-metrics {
        grid-template-columns: 1fr 1fr
    }

    .system-map {
        display: grid;
        grid-template-columns: 1fr
    }

    .system-map b {
        transform: rotate(90deg);
        text-align: center
    }

    .data-table-wrap {
        margin: 0 -16px;
        border-radius: 0
    }

    .theme-options {
        grid-template-columns: 1fr
    }

    .resource-grid,
    .help-grid {
        grid-template-columns: 1fr
    }

    .search-results a {
        grid-template-columns: 1fr
    }

    .search-results span {
        grid-row: auto
    }

    .auth-page {
        grid-template-columns: 1fr
    }

    .auth-brand {
        min-height: 42dvh;
        padding: 32px
    }

    .auth-brand img {
        width: 150px
    }

    .auth-brand h1 {
        font-size: 2.25rem
    }

    .auth-brand small {
        display: none
    }

    .auth-panel {
        padding: 32px 20px
    }

    .profile-chip {
        display: none
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important
    }
}

.logout-form {
    margin: 0
}

.logout-form button {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left
}

.submission-history {
    display: grid;
    gap: 10px;
    margin: 18px 0
}

.submission-attempt,
.quiz-question {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px
}

.submission-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px
}

.submission-files a {
    color: var(--accent-strong);
    font-weight: 700;
    font-size: .75rem
}

.quiz-list {
    display: grid;
    gap: 12px
}

.quiz-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: grid;
    gap: 10px
}

.quiz-options {
    display: grid;
    gap: 8px;
    margin-top: 12px
}

.quiz-options label {
    display: flex;
    align-items: flex-start;
    gap: 9px
}

.quiz-options input {
    width: auto;
    margin-top: 5px
}

.quiz-result {
    background: var(--accent-soft);
    color: var(--accent-strong);
    padding: 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px
}

.brand img {
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 7px 18px rgba(51, 17, 87, .2)
}

.setup-state img {
    border-radius: 28%;
    box-shadow: 0 18px 44px rgba(51, 17, 87, .2)
}

.auth-brand img {
    filter: none;
    border-radius: 28%;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .24)
}

.accounts-grid {
    grid-template-columns: minmax(0, 1fr) 320px
}

.inline-password-form {
    display: flex;
    gap: .5rem;
    min-width: 260px
}

.inline-password-form input {
    min-width: 0
}

.access-pending {
    background: var(--warning-soft);
    color: var(--warning)
}

.access-ready {
    background: var(--accent-soft);
    color: var(--accent-strong)
}

.lecturer-method {
    display: inline-flex;
    padding: .32rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700
}

.lecturer-method.internal {
    background: #e9f1ff;
    color: #244f91
}

.lecturer-method.external {
    background: #f4edff;
    color: #68409a
}

.account-setup {
    display: grid;
    grid-template-columns: minmax(0, 620px) 280px;
    gap: 1.5rem;
    align-items: start;
    max-width: 940px
}

.account-setup-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem
}

.account-summary {
    padding: 1.5rem;
    border-radius: var(--radius);
    background: linear-gradient(145deg, #083e39, #0d6b5f);
    color: #fff;
    box-shadow: var(--shadow)
}

.account-summary>span,
.account-summary>small {
    display: block;
    color: #c9e6df
}

.account-summary>strong {
    display: block;
    font-size: 1.25rem;
    margin: .35rem 0
}

.account-summary ul {
    padding-left: 1.15rem;
    margin: 1.4rem 0 0;
    color: #e7f5f1
}

.account-summary li+li {
    margin-top: .65rem
}

@media(max-width:900px) {

    .accounts-grid,
    .account-setup {
        grid-template-columns: 1fr
    }

    .inline-password-form {
        min-width: 220px
    }

    .account-summary {
        order: -1
    }
}

@media(max-width:620px) {
    body {
        overflow-x: hidden
    }

    .auth-card,
    .auth-brand>div {
        min-width: 0;
        max-width: 100%
    }

    .auth-brand h1 {
        overflow-wrap: anywhere
    }

    .auth-panel {
        min-width: 0
    }
}

@media(max-width:620px) {
    body {
        min-width: 320px;
        background: var(--bg)
    }

    .auth-page {
        display: block;
        min-height: 100dvh;
        background: var(--bg)
    }

    .auth-brand {
        min-height: auto;
        padding: max(24px, env(safe-area-inset-top)) 20px 16px;
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 16px;
        align-items: center;
        background: var(--bg);
        color: var(--text);
        border-bottom: 1px solid var(--border);
        overflow: visible
    }

    .auth-brand:after {
        display: none
    }

    .auth-brand img {
        width: 76px;
        height: 76px;
        border-radius: 21px;
        box-shadow: 0 12px 28px rgba(51, 17, 87, .22)
    }

    .auth-brand div {
        max-width: none
    }

    .auth-brand div>span {
        display: block;
        color: var(--accent-strong);
        font-size: .65rem;
        letter-spacing: .09em;
        font-weight: 700
    }

    .auth-brand h1 {
        margin: 5px 0 0;
        font-size: clamp(1.45rem, 7vw, 1.8rem);
        line-height: 1.08;
        letter-spacing: -.025em
    }

    .auth-brand p {
        display: none
    }

    .auth-panel {
        display: block;
        padding: 24px 20px max(32px, env(safe-area-inset-bottom));
        background: var(--bg)
    }

    .auth-card {
        width: 100%;
        max-width: 440px;
        margin: 0 auto
    }

    .auth-card h2 {
        font-size: 1.5rem;
        margin-bottom: 7px
    }

    .auth-card>p {
        font-size: .9rem;
        line-height: 1.5;
        margin-bottom: 22px
    }

    .auth-card .stack-form {
        gap: 16px
    }

    .auth-card input {
        min-height: 50px;
        padding: 12px 13px
    }

    .auth-card .btn {
        min-height: 48px;
        font-size: .82rem
    }

    .auth-divider {
        margin: 19px 0
    }

    .auth-help {
        justify-content: center;
        margin-top: 22px;
        font-size: .8rem
    }
}

@media(max-width:360px) {
    .auth-brand {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 14px;
        padding-left: 16px;
        padding-right: 16px
    }

    .auth-brand img {
        width: 64px;
        height: 64px;
        border-radius: 18px
    }

    .auth-brand h1 {
        font-size: 1.4rem
    }

    .auth-panel {
        padding-left: 16px;
        padding-right: 16px
    }
}

.readiness-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px
}

.readiness-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface)
}

.readiness-item>span {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-weight: 800
}

.readiness-item>div {
    display: grid;
    min-width: 0
}

.readiness-item small {
    color: var(--muted)
}

.readiness-item.ready>span {
    background: var(--accent-soft);
    color: var(--accent-strong)
}

.readiness-item.attention>span {
    background: var(--warning-soft);
    color: var(--warning)
}

@media(max-width:760px) {
    .readiness-list {
        grid-template-columns: 1fr
    }
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 28px
}

.admin-workbench {
    display: grid;
    gap: 4px
}

.journey-map {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    padding: 16px;
    margin-bottom: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius)
}

.journey-map span {
    white-space: nowrap;
    padding: 10px 13px;
    background: var(--surface-2);
    border-radius: 9px;
    font-size: .75rem;
    font-weight: 700
}

.journey-map span.active {
    background: var(--accent);
    color: #fff
}

.journey-map b {
    color: var(--muted)
}

.attendance-history {
    display: grid;
    gap: 10px;
    margin-top: 22px
}

.attendance-history-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
    align-items: start;
    gap: 16px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm)
}

.attendance-history-row>span {
    display: grid
}

.attendance-history-row small {
    color: var(--muted)
}

.review-form {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto auto;
    gap: 7px;
    align-items: center;
    min-width: 390px
}

.review-form select {
    min-width: 110px
}

@media(max-width:1100px) {
    .admin-form-grid {
        grid-template-columns: 1fr 1fr
    }

    .admin-form-grid>section:last-child {
        grid-column: 1/-1
    }
}

@media(max-width:760px) {
    .admin-form-grid {
        grid-template-columns: 1fr
    }

    .admin-form-grid>section:last-child {
        grid-column: auto
    }

    .attendance-history-row {
        grid-template-columns: 1fr
    }

    .review-form {
        grid-template-columns: 1fr;
        min-width: 230px
    }

    .journey-map {
        margin-left: -16px;
        margin-right: -16px;
        border-radius: 0
    }

    .admin-metrics strong {
        font-size: 1.55rem
    }
}

/* Pioneer LMS 2026 visual system */
:root {
    --bg: #f5f3fb;
    --surface: #fff;
    --surface-2: #f4f1fa;
    --surface-3: #ebe6f4;
    --text: #241c31;
    --muted: #746c80;
    --border: #e8e2ef;
    --accent: #a52df4;
    --accent-strong: #7d1fc4;
    --accent-soft: #f0ddff;
    --danger: #c43d63;
    --danger-soft: #fde8ef;
    --warning: #a96513;
    --warning-soft: #fff0d9;
    --shadow: 0 18px 48px rgba(53, 31, 80, .08);
    --radius: 22px;
    --radius-sm: 14px;
    --sidebar: 270px
}

html[data-theme=dark] {
    --bg: #15101d;
    --surface: #201829;
    --surface-2: #2a2035;
    --surface-3: #362842;
    --text: #fbf7ff;
    --muted: #bfb3ca;
    --border: #3b2d48;
    --accent: #c36bff;
    --accent-strong: #daa4ff;
    --accent-soft: #422656;
    --danger: #ff8baa;
    --danger-soft: #4b2633;
    --warning: #f0bd72;
    --warning-soft: #46351f;
    --shadow: 0 20px 54px rgba(0, 0, 0, .26)
}

@media(prefers-color-scheme:dark) {
    html[data-theme=system] {
        --bg: #15101d;
        --surface: #201829;
        --surface-2: #2a2035;
        --surface-3: #362842;
        --text: #fbf7ff;
        --muted: #bfb3ca;
        --border: #3b2d48;
        --accent: #c36bff;
        --accent-strong: #daa4ff;
        --accent-soft: #422656;
        --danger: #ff8baa;
        --danger-soft: #4b2633;
        --warning: #f0bd72;
        --warning-soft: #46351f;
        --shadow: 0 20px 54px rgba(0, 0, 0, .26)
    }
}

body {
    background: var(--bg);
    letter-spacing: -.006em
}

.sidebar {
    padding: 26px 18px 20px;
    border-right: 0;
    box-shadow: 7px 0 34px rgba(65, 42, 93, .045)
}

.brand {
    padding: 3px 8px 32px
}

.brand img {
    width: 44px;
    height: 44px;
    border-radius: 14px
}

.brand strong {
    font-size: 1.12rem
}

.brand small {
    font-size: .7rem;
    letter-spacing: .03em
}

.nav-list {
    gap: 5px
}

.nav-link {
    min-height: 46px;
    border-radius: 14px;
    padding: 9px 11px;
    font-size: .86rem
}

.nav-link:hover {
    transform: translateX(2px)
}

.nav-link.active {
    background: linear-gradient(100deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 54%, var(--surface)));
    color: var(--accent-strong)
}

.nav-glyph {
    border-radius: 10px;
    background: transparent;
    border: none;
}

.nav-link.active .nav-glyph {
    border-color: transparent;
    background: transparent;
}

.sidebar-footer {
    border-top: 0;
    padding-top: 18px
}

.topbar {
    height: 82px;
    padding: 0 38px;
    border-bottom: 0;
    background: color-mix(in srgb, var(--bg) 88%, transparent)
}

.global-search {
    width: min(720px, 58vw);
    height: 48px;
    border-radius: 999px;
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 8px 24px rgba(54, 36, 77, .035);
    padding: 0 16px
}

.global-search:focus-within {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 80%, transparent)
}

.search-mark {
    position: relative;
    display: block;
    width: 17px;
    height: 17px;
    border: 1.8px solid var(--muted);
    border-radius: 50%
}

.search-mark:after {
    content: "";
    position: absolute;
    width: 7px;
    height: 1.8px;
    background: var(--muted);
    right: -5px;
    bottom: -2px;
    transform: rotate(45deg);
    border-radius: 2px
}

.global-search kbd {
    border-radius: 8px;
    background: var(--surface-2)
}

.icon-button {
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 6px 20px rgba(54, 36, 77, .04)
}

.avatar {
    border-radius: 50%;
    background: linear-gradient(145deg, var(--accent-soft), #d7ecff)
}

.main-content {
    padding: 38px 42px 78px;
    max-width: 1580px
}

.page-heading {
    margin-bottom: 32px
}

.page-heading p {
    font-size: .9rem
}

.btn {
    border-radius: 12px;
    min-height: 43px;
    padding: 10px 17px
}

.btn-primary {
    background: var(--accent);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 22%, transparent)
}

.btn-primary:hover {
    background: var(--accent-strong);
    transform: translateY(-1px)
}

.dashboard-intro {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin: 0 0 28px
}

.dashboard-intro h1 {
    font-size: clamp(1.9rem, 3.2vw, 2.8rem);
    margin: 5px 0 6px
}

.dashboard-intro p {
    margin: 0;
    color: var(--muted)
}

.eyebrow,
.hero-label {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .67rem;
    font-weight: 700;
    color: var(--accent-strong)
}

.dashboard-bento {
    display: grid;
    grid-template-columns: minmax(0, 2.15fr) minmax(300px, .9fr);
    gap: 18px;
    align-items: stretch
}

.dashboard-main {
    display: grid;
    gap: 18px
}

.learning-hero {
    min-height: 310px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(220px, .7fr);
    align-items: center;
    gap: 20px;
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
    border-radius: 28px;
    background: linear-gradient(110deg, color-mix(in srgb, var(--accent-soft) 52%, var(--surface)) 0%, var(--surface) 58%, color-mix(in srgb, #f5e6ff 55%, var(--surface)) 100%);
    box-shadow: var(--shadow)
}

.learning-hero:before {
    content: "";
    position: absolute;
    inset: auto -90px -160px auto;
    width: 390px;
    height: 390px;
    border-radius: 50%;
    border: 74px solid color-mix(in srgb, var(--accent) 8%, transparent);
    z-index: -1
}

.learning-hero h2 {
    font-size: clamp(1.8rem, 3.4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -.045em;
    max-width: 660px;
    margin: 12px 0 16px
}

.learning-hero p {
    max-width: 590px;
    color: var(--muted);
    margin-bottom: 25px
}

.hero-orbit {
    position: relative;
    width: min(240px, 100%);
    aspect-ratio: 1;
    margin: auto;
    border: 22px solid color-mix(in srgb, var(--accent) 10%, transparent);
    border-radius: 50%;
    display: grid;
    place-items: center
}

.hero-orbit:before,
.hero-orbit:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent)
}

.hero-orbit:before {
    inset: 21px
}

.hero-orbit:after {
    inset: -38px
}

.orbit-core {
    width: 122px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface);
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-strong);
    box-shadow: 0 18px 40px rgba(86, 37, 121, .14)
}

.orbit-dot {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 15px;
    box-shadow: 0 9px 20px rgba(70, 42, 98, .12)
}

.dot-one {
    background: #8de7af;
    left: -6px;
    top: 28px;
    transform: rotate(-12deg)
}

.dot-two {
    background: #ffc768;
    right: -4px;
    top: 8px;
    transform: rotate(15deg)
}

.dot-three {
    background: #6ed9ea;
    right: 8px;
    bottom: 19px;
    transform: rotate(-8deg)
}

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

.metric-card {
    min-height: 184px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 14px 36px rgba(55, 32, 81, .055);
    display: grid;
    align-content: space-between;
    text-decoration: none !important;
    color: var(--text) !important;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.22s cubic-bezier(0.2, 0, 0, 1), border-color 0.22s ease !important;
}

.metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(107, 32, 215, 0.12);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.metric-card:active {
    transform: scale(0.98);
}

.metric-card small {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
}

.metric-card>strong {
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -.05em;
    color: var(--text);
}

.metric-card>span:last-child {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 500;
    transition: color 0.15s ease, transform 0.15s ease;
}

.metric-card:hover>span:last-child {
    color: var(--accent);
}

.metric-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #91e5ac;
    color: #1d6d3c;
    font-weight: 700;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.metric-card:hover .metric-icon {
    transform: scale(1.1);
}

.metric-gold .metric-icon {
    background: #ffd37e;
    color: #885c0e
}

.metric-blue .metric-icon {
    background: #99d9ff;
    color: #125a8a
}

.metric-purple .metric-icon {
    background: #d5b3ff;
    color: #591f9b
}

.metric-mint {
    background: linear-gradient(145deg, color-mix(in srgb, #e7fff0 70%, var(--surface)), var(--surface) 70%)
}

.metric-gold {
    background: linear-gradient(145deg, color-mix(in srgb, #fff6df 70%, var(--surface)), var(--surface) 70%)
}

.metric-blue {
    background: linear-gradient(145deg, color-mix(in srgb, #e4f4ff 70%, var(--surface)), var(--surface) 70%)
}

.metric-purple {
    background: linear-gradient(145deg, color-mix(in srgb, #f3e8ff 70%, var(--surface)), var(--surface) 70%)
}

.date-strip .date-pill,
.date-strip>span {
    display: grid;
    place-items: center;
    min-height: 64px;
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none !important;
    color: var(--text) !important;
    background: var(--surface);
    transition: all 0.18s cubic-bezier(0.2, 0, 0, 1);
    cursor: pointer;
}

.date-strip .date-pill:hover,
.date-strip>span:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(107, 32, 215, 0.12);
}

.date-strip .date-pill.active,
.date-strip>span.active {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
    color: var(--accent-strong) !important;
}

.intro-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap
}

.progress-card {
    place-items: center;
    cursor: pointer;
}

.progress-ring {
    --progress: 0;
    width: 134px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--accent) calc(var(--progress)*1%), var(--surface-3) 0);
    position: relative
}

.progress-ring:before {
    content: "";
    position: absolute;
    inset: 12px;
    background: var(--surface);
    border-radius: 50%
}

.progress-ring>span {
    position: relative;
    z-index: 1;
    text-align: center;
    display: grid
}

.progress-ring strong {
    font-size: 1.7rem
}

.progress-ring small {
    font-size: .7rem
}

.events-card {
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: 28px;
    background: var(--surface);
    box-shadow: var(--shadow)
}

.date-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
    margin: 24px 0
}

.date-strip>span {
    display: grid;
    place-items: center;
    min-height: 64px;
    border: 1px solid var(--border);
    border-radius: 14px
}

.date-strip small {
    font-size: .66rem;
    color: var(--muted)
}

.date-strip strong {
    font-size: .9rem
}

.date-strip .active {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
    color: var(--accent-strong)
}

.event-stack {
    display: grid;
    gap: 8px
}

.event-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 9px;
    border-radius: 16px
}

.event-item:hover {
    background: var(--surface-2)
}

.event-item>span:last-child {
    display: grid;
    min-width: 0
}

.event-item strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.event-item small {
    color: var(--muted);
    font-size: .7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.event-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: #eee7ff;
    color: #7444c6;
    font-weight: 700
}

.event-tone-2 .event-icon {
    background: #fff0e4;
    color: #d47225
}

.event-tone-3 .event-icon {
    background: #e1f8ff;
    color: #2585a5
}

.event-tone-4 .event-icon {
    background: #e6f8f0;
    color: #188b66
}

.events-card .empty-state {
    padding: 28px 14px;
    border: 0;
    background: var(--surface-2)
}

.content-section {
    margin-top: 28px
}

.section-title>a {
    color: var(--accent-strong)
}

.course-grid {
    gap: 18px
}

.course-card {
    min-height: 250px;
    padding: 24px;
    border-radius: 22px;
    box-shadow: 0 12px 32px rgba(55, 32, 81, .05)
}

.course-card:before {
    inset: 0 0 auto;
    width: auto;
    height: 7px;
    background: var(--course-accent)
}

.course-card:hover {
    transform: translateY(-4px)
}

.course-card h3 {
    font-size: 1.08rem;
    margin-top: 24px
}

.task-list,
.attention-list,
.calendar-list,
.grade-list,
.notification-list,
.messages-layout,
.attendance-summary,
.form-panel,
.assignment-brief,
.submission-panel,
.course-hero,
.module,
.quiz-card,
.data-table-wrap {
    border-radius: var(--radius);
    box-shadow: 0 12px 34px rgba(55, 32, 81, .045)
}

.task-row:hover {
    background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface))
}

.filter {
    border-radius: 999px;
    padding: 8px 16px
}

.announcement {
    border-radius: 18px;
    padding: 20px
}

.empty-state {
    border-radius: 22px
}

.course-hero {
    padding: 40px
}

.account-summary {
    background: linear-gradient(145deg, #4e116e, #9b2fe8)
}

.auth-brand {
    background: #170b23
}

.auth-brand:after {
    border-color: rgba(201, 112, 255, .1)
}

.auth-brand p,
.auth-brand small {
    color: #d9cce1
}

.auth-panel {
    background: var(--bg)
}

@media(max-width:1180px) {
    .dashboard-bento {
        grid-template-columns: 1fr
    }

    .events-card {
        display: grid;
        grid-template-columns: minmax(180px, .36fr) 1fr;
        column-gap: 24px
    }

    .events-card>.section-title {
        grid-column: 1/-1
    }

    .event-stack {
        grid-column: 2
    }

    .date-strip {
        grid-column: 1;
        margin: 0
    }

    .metric-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:860px) {
    .topbar {
        height: 72px
    }

    .main-content {
        padding: 28px 18px 96px
    }

    .dashboard-intro {
        align-items: flex-start
    }

    .learning-hero {
        grid-template-columns: 1fr minmax(180px, .45fr);
        min-height: 280px
    }

    .events-card {
        grid-template-columns: 1fr
    }

    .events-card>.section-title,
    .event-stack,
    .date-strip {
        grid-column: auto
    }

    .date-strip {
        margin: 20px 0
    }

    .mobile-nav {
        border-top: 0;
        box-shadow: 0 -12px 35px rgba(52, 32, 78, .11);
        border-radius: 20px 20px 0 0
    }

    .mobile-nav a>span {
        border-radius: 10px
    }

    .sidebar {
        border-radius: 0 24px 24px 0
    }
}

@media(max-width:680px) {
    .dashboard-intro {
        display: block
    }

    .dashboard-intro>.btn {
        margin-top: 18px
    }

    .learning-hero {
        display: block;
        min-height: 0;
        padding: 28px
    }

    .learning-hero h2 {
        font-size: 2rem
    }

    .hero-orbit {
        display: none
    }

    .metric-grid {
        grid-template-columns: 1fr 1fr
    }

    .progress-card {
        grid-column: 1/-1;
        min-height: 170px
    }

    .metric-card {
        min-height: 164px;
        padding: 20px
    }

    .events-card {
        padding: 20px
    }

    .date-strip {
        gap: 5px
    }

    .date-strip>span {
        min-height: 58px
    }

    .content-section {
        margin-top: 32px
    }

    .auth-brand {
        background: var(--bg)
    }

    .auth-brand div>span {
        color: var(--accent-strong)
    }
}

@media(max-width:390px) {
    .metric-grid {
        grid-template-columns: 1fr
    }

    .progress-card {
        grid-column: auto
    }

    .dashboard-intro h1 {
        font-size: 1.85rem
    }

    .learning-hero h2 {
        font-size: 1.72rem
    }

    .date-strip>span:nth-child(5) {
        display: none
    }

    .date-strip {
        grid-template-columns: repeat(4, 1fr)
    }
}

/* Product-wide bento components */
.page-heading {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    align-items: center;
    padding: 30px 32px;
    border: 1px solid color-mix(in srgb, var(--accent) 11%, var(--border));
    border-radius: 26px;
    background: linear-gradient(112deg, color-mix(in srgb, var(--accent-soft) 36%, var(--surface)), var(--surface) 58%);
    box-shadow: 0 15px 40px rgba(55, 32, 81, .055)
}

.page-heading:after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -72px;
    top: -118px;
    width: 270px;
    height: 270px;
    border: 42px solid color-mix(in srgb, var(--accent) 7%, transparent);
    border-radius: 50%
}

.page-heading h1 {
    margin-bottom: 8px
}

.page-heading p {
    font-size: .88rem
}

.heading-actions {
    position: relative;
    z-index: 1;
    flex-wrap: wrap
}

.workspace-tabs,
.course-tabs {
    gap: 5px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(55, 32, 81, .04);
    margin: 18px 0 28px
}

.workspace-tabs a,
.course-tabs a {
    padding: 10px 14px;
    border: 0;
    border-radius: 11px
}

.workspace-tabs a.active,
.course-tabs a.active {
    border: 0;
    background: var(--accent-soft);
    color: var(--accent-strong)
}

.filter-row {
    gap: 7px
}

.filter {
    box-shadow: 0 5px 15px rgba(55, 32, 81, .025)
}

.filter:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    color: var(--accent-strong)
}

.form-panel,
.assignment-brief,
.submission-panel,
.settings-grid>section,
.settings-form>section,
.integration-grid>article,
.grading-card,
.quiz-card {
    border-color: var(--border);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 14px 38px rgba(55, 32, 81, .05)
}

.form-panel {
    padding: 27px
}

.form-panel>summary {
    cursor: pointer;
    list-style: none;
    padding: 3px 0
}

.form-panel>summary::-webkit-details-marker {
    display: none
}

.form-panel>summary:after {
    content: "+";
    float: right;
    color: var(--accent-strong);
    font-size: 1.25rem
}

.form-panel[open]>summary:after {
    content: "−"
}

.form-panel>summary+form {
    margin-top: 22px
}

.form-panel>p,
.settings-grid p,
.integration-grid p {
    color: var(--muted)
}

.admin-form-grid>*,
.manage-grid>*,
.assignment-layout>*,
.settings-grid>*,
.integration-grid>*,
.stack-form,
.stack-form label,
.form-two>*,
.form-three>* {
    min-width: 0
}

.stack-form select,
.stack-form input,
.stack-form textarea {
    max-width: 100%
}

input,
textarea,
select {
    min-width: 0;
    min-height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-2) 52%, var(--surface));
    transition: border-color .15s, box-shadow .15s, background .15s
}

textarea {
    min-height: 96px
}

input:hover,
textarea:hover,
select:hover {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border))
}

input:focus,
textarea:focus,
select:focus {
    background: var(--surface);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 82%, transparent)
}

input[type=checkbox],
input[type=radio] {
    min-height: 0;
    accent-color: var(--accent)
}

input[type=file] {
    padding: 9px;
    background: var(--surface-2)
}

.data-table-wrap {
    overflow: auto;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 14px 38px rgba(55, 32, 81, .05)
}

table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%
}

th {
    padding: 13px 17px;
    background: color-mix(in srgb, var(--accent-soft) 32%, var(--surface));
    color: var(--muted);
    font-size: .68rem;
    letter-spacing: .045em;
    text-transform: uppercase;
    white-space: nowrap
}

td {
    padding: 15px 17px
}

tbody tr {
    transition: background .15s
}

tbody tr:hover {
    background: color-mix(in srgb, var(--accent-soft) 23%, var(--surface))
}

td strong,
td small {
    display: block
}

td small {
    color: var(--muted);
    margin-top: 3px
}

.data-table-wrap code {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--accent-strong)
}

.admin-metrics {
    gap: 14px;
    border: 0;
    background: transparent;
    margin-bottom: 28px
}

.admin-metrics div {
    min-height: 138px;
    align-content: space-between;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 12px 32px rgba(55, 32, 81, .045)
}

.admin-metrics div+div {
    border-left: 1px solid var(--border)
}

.admin-metrics div:nth-child(4n+1) {
    background: linear-gradient(145deg, color-mix(in srgb, #e8fff1 62%, var(--surface)), var(--surface))
}

.admin-metrics div:nth-child(4n+2) {
    background: linear-gradient(145deg, color-mix(in srgb, #fff4dc 62%, var(--surface)), var(--surface))
}

.admin-metrics div:nth-child(4n+3) {
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 48%, var(--surface)), var(--surface))
}

.admin-metrics div:nth-child(4n+4) {
    background: linear-gradient(145deg, color-mix(in srgb, #e7f8ff 62%, var(--surface)), var(--surface))
}

.admin-metrics strong {
    font-size: 2rem;
    letter-spacing: -.05em
}

.admin-metrics span {
    color: var(--muted);
    font-size: .76rem
}

.course-hero {
    min-height: 310px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(112deg, color-mix(in srgb, var(--accent-soft) 45%, var(--surface)), var(--surface) 64%)
}

.course-hero:after {
    border-color: color-mix(in srgb, var(--accent) 9%, transparent)
}

.course-hero h1 {
    font-size: clamp(2rem, 4vw, 3.25rem)
}

.course-content {
    max-width: none
}

.module-list {
    gap: 14px
}

.module summary {
    padding: 20px 22px
}

.module[open] summary {
    background: color-mix(in srgb, var(--accent-soft) 24%, var(--surface))
}

.content-row {
    padding: 15px 22px
}

.content-type,
.notification-category {
    background: var(--accent-soft);
    color: var(--accent-strong);
    border-radius: 10px
}

.assignment-layout,
.manage-grid,
.accounts-grid {
    gap: 22px
}

.assignment-meta {
    border-radius: 16px;
    background: transparent;
    border: 0;
    gap: 9px
}

.assignment-meta span {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
    padding: 16px
}

.assignment-meta span:nth-child(2) {
    background: color-mix(in srgb, #fff4dc 58%, var(--surface))
}

.assignment-meta span:nth-child(3) {
    background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface))
}

.submission-success {
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
    border-radius: 16px
}

.submission-attempt,
.quiz-question {
    border-radius: 16px
}

.submission-files a {
    padding: 7px 10px;
    border-radius: 9px;
    background: var(--accent-soft)
}

.calendar-month>h2,
.grade-section>h2 {
    margin: 0 0 12px 8px
}

.calendar-row {
    grid-template-columns: 58px 100px minmax(0, 1fr);
    padding: 17px 20px
}

.calendar-row time {
    min-height: 52px;
    place-content: center;
    border-radius: 15px;
    background: var(--accent-soft);
    color: var(--accent-strong)
}

.calendar-type {
    border-radius: 999px;
    padding: 7px 10px
}

.grade-row {
    padding: 18px 22px
}

.grade-row>b {
    display: inline-grid;
    place-items: center;
    min-width: 62px;
    min-height: 38px;
    border-radius: 12px;
    background: var(--accent-soft)
}

.attendance-summary {
    padding: 30px
}

.attendance-ring {
    box-shadow: inset 0 0 0 1px var(--border)
}

.attendance-counts {
    gap: 10px;
    background: transparent
}

.attendance-counts div {
    min-height: 110px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--surface-2)
}

.attendance-history-row {
    border-radius: 18px;
    padding: 18px
}

.attendance-history-row>summary {
    cursor: pointer
}

.attendance-register {
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(55, 32, 81, .045)
}

.messages-layout {
    border-radius: 25px
}

.conversation-list {
    padding: 12px;
    background: color-mix(in srgb, var(--surface-2) 48%, var(--surface))
}

.conversation {
    padding: 12px;
    border-radius: 15px
}

.conversation.active {
    background: var(--accent-soft);
    color: var(--accent-strong)
}

.message-history {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 14%, var(--surface)), var(--surface))
}

.message {
    padding: 13px 15px;
    border-radius: 6px 17px 17px 17px
}

.message.mine {
    border-radius: 17px 6px 17px 17px
}

.message-compose {
    padding: 16px;
    background: var(--surface)
}

.notification-row {
    padding: 17px 20px
}

.notification-row.unread {
    background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface))
}

.notification-row:hover {
    background: var(--surface-2)
}

.grading-layout {
    gap: 22px
}

.grading-nav {
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(55, 32, 81, .045)
}

.grading-nav a {
    padding: 13px;
    border-radius: 13px
}

.grading-card {
    padding: 23px
}

.grade-form {
    padding-top: 5px
}

.inline-create {
    padding: 18px;
    background: color-mix(in srgb, var(--accent-soft) 22%, var(--surface));
    border-radius: 0 0 20px 20px
}

.integration-grid {
    gap: 18px
}

.integration-grid>article {
    padding: 25px
}

.integration-grid article header {
    align-items: center
}

.health,
.status-label,
.lecturer-method {
    border-radius: 999px;
    padding: 5px 10px
}

.health-healthy {
    background: #e5f8ed;
    color: #247448
}

.health-unavailable,
.health-failed {
    background: var(--danger-soft);
    color: var(--danger)
}

.system-map,
.journey-map {
    gap: 9px;
    padding: 20px;
    border-radius: 22px;
    box-shadow: 0 12px 32px rgba(55, 32, 81, .04)
}

.system-map span,
.journey-map span {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2)
}

.system-map span.active,
.journey-map span.active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff
}

.settings-grid {
    gap: 22px
}

.settings-grid>section,
.settings-form>section {
    padding: 27px
}

.settings-form {
    gap: 18px
}

.theme-options {
    gap: 12px
}

.theme-choice {
    border-radius: 18px;
    padding: 13px
}

.theme-choice.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft)
}

.theme-preview {
    border-radius: 12px
}

.profile-details div {
    padding: 14px 0
}

.profile-details dd {
    font-weight: 700
}

.resource-grid,
.help-grid {
    gap: 16px
}

.resource-grid>a,
.help-grid>details,
.search-results>a {
    border: 1px solid var(--border);
    border-radius: 21px;
    background: var(--surface);
    box-shadow: 0 12px 32px rgba(55, 32, 81, .045);
    transition: transform .18s, border-color .18s, box-shadow .18s
}

.resource-grid>a {
    padding: 23px
}

.resource-grid>a:hover,
.search-results>a:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
    box-shadow: var(--shadow)
}

.resource-grid>a>span,
.search-results>a>span {
    background: var(--accent-soft);
    color: var(--accent-strong);
    border-radius: 11px
}

.help-grid>details {
    padding: 0 22px
}

.help-grid summary {
    padding: 21px 0;
    cursor: pointer;
    color: var(--text)
}

.help-grid details[open] {
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 25%, var(--surface)), var(--surface))
}

.help-grid details p {
    padding-bottom: 20px;
    color: var(--muted)
}

.search-results {
    gap: 12px
}

.search-results>a {
    padding: 19px 21px
}

.readiness-list {
    gap: 13px
}

.readiness-item {
    padding: 17px;
    border-radius: 18px;
    box-shadow: 0 9px 25px rgba(55, 32, 81, .035)
}

.account-setup {
    gap: 22px
}

.account-summary {
    border-radius: 24px
}

.setup-state {
    border-radius: 26px;
    background: var(--surface);
    box-shadow: var(--shadow)
}

.admin-workbench {
    width: 100%;
    min-width: 0;
    max-width: 100%
}

.admin-workbench>*,
.content-section {
    min-width: 0;
    max-width: 100%
}

.admin-workbench .data-table-wrap {
    width: 100%;
    min-width: 0
}

@media(max-width:860px) {
    .page-heading {
        padding: 25px
    }

    .workspace-tabs,
    .course-tabs {
        border-radius: 15px
    }

    .admin-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .admin-metrics div:nth-child(n) {
        border: 1px solid var(--border)
    }

    .data-table-wrap {
        max-width: 100%;
        overflow-x: auto
    }

    .assignment-layout,
    .manage-grid,
    .accounts-grid {
        grid-template-columns: 1fr
    }

    .course-hero {
        min-height: 260px
    }
}

@media(max-width:620px) {
    .page-heading {
        display: block;
        padding: 22px;
        margin-bottom: 22px
    }

    .page-heading:after {
        right: -110px
    }

    .page-heading h1 {
        font-size: 1.75rem
    }

    .heading-actions {
        margin-top: 17px
    }

    .heading-actions>* {
        width: 100%
    }

    .heading-actions .btn {
        width: 100%
    }

    .workspace-tabs,
    .course-tabs {
        margin-left: -2px;
        margin-right: -2px;
        padding: 5px
    }

    .workspace-tabs a,
    .course-tabs a {
        padding: 9px 12px
    }

    .admin-metrics {
        gap: 10px
    }

    .admin-metrics div {
        min-height: 120px;
        padding: 18px
    }

    .admin-metrics strong {
        font-size: 1.7rem
    }

    .data-table-wrap {
        margin: 0;
        border-radius: 18px
    }

    .form-panel,
    .assignment-brief,
    .submission-panel,
    .settings-grid>section,
    .settings-form>section,
    .integration-grid>article {
        padding: 20px
    }

    .assignment-meta {
        gap: 8px
    }

    .assignment-meta span+span {
        border-top: 1px solid var(--border)
    }

    .calendar-row {
        grid-template-columns: 52px minmax(0, 1fr);
        padding: 14px
    }

    .calendar-row time {
        min-height: 50px
    }

    .messages-layout {
        border-radius: 20px
    }

    .message-compose {
        align-items: end
    }

    .resource-grid>a {
        padding: 19px
    }

    .help-grid>details {
        padding: 0 18px
    }

    .course-hero {
        padding: 25px;
        min-height: 230px
    }

    .course-hero h1 {
        font-size: 2rem
    }
}

/* Shared application top bar and persistent announcements */
.topbar-context {
    display: grid;
    min-width: 145px;
    line-height: 1.15
}

.topbar-context small {
    color: var(--muted);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

.topbar-context strong {
    margin-top: 4px;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.topbar .global-search {
    flex: 1;
    width: auto;
    max-width: 720px
}

.announcements-section>.section-title {
    align-items: center
}

.announcements-section>.section-title .status-label {
    background: var(--accent-soft);
    color: var(--accent-strong)
}

.announcement-empty {
    min-height: 132px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--accent-soft) 34%, var(--surface)), var(--surface));
    border: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius: 18px
}

.announcement-empty-mark {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 800
}

.announcement-empty h3 {
    margin: 0 0 4px
}

.announcement-empty p {
    margin: 0;
    color: var(--muted);
    max-width: 650px
}

@media(max-width:1020px) and (min-width:621px) {
    .topbar-context {
        display: none
    }
}

@media(max-width:620px) {
    .topbar-context {
        min-width: 0;
        margin-right: auto
    }

    .topbar-context small {
        display: none
    }

    .topbar-context strong {
        font-size: .86rem;
        max-width: 42vw
    }

    .announcement-empty {
        align-items: flex-start;
        padding: 20px
    }

    .announcement-empty-mark {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        border-radius: 14px
    }

    .announcement {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .announcement>span {
        width: max-content
    }
}

/* Tabler icon system */
.ui-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: currentColor
}

.nav-glyph .ui-icon {
    width: 18px;
    height: 18px
}

.icon-button>.ui-icon {
    width: 20px;
    height: 20px
}

.avatar>.ui-icon {
    width: 19px;
    height: 19px
}

.search-icon {
    width: 18px;
    height: 18px;
    color: var(--muted)
}

.metric-icon .ui-icon {
    width: 23px;
    height: 23px
}

.event-icon .ui-icon {
    width: 22px;
    height: 22px
}

.content-type .ui-icon,
.notification-category .ui-icon {
    width: 18px;
    height: 18px
}

.announcement-empty-mark .ui-icon {
    width: 24px;
    height: 24px
}

.card-link b {
    display: grid;
    place-items: center
}

.card-link b .ui-icon {
    width: 18px;
    height: 18px
}

.resource-grid a>span .ui-icon {
    width: 19px;
    height: 19px
}

.mobile-nav a>span .ui-icon {
    width: 17px;
    height: 17px
}

.mobile-menu>.ui-icon {
    width: 21px;
    height: 21px
}

/* Complete learning and assessment workflows */
.learning-view {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start
}

.learning-body {
    min-height: 320px;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm)
}

.learning-body>.status-label {
    margin-bottom: 20px
}

.learning-body .prose {
    font-size: 1rem;
    line-height: 1.75;
    white-space: normal
}

.learning-body>p:last-child {
    margin-top: 26px
}

.content-row a {
    color: inherit;
    text-decoration: none
}

.content-row a:hover {
    text-decoration: underline;
    text-underline-offset: 3px
}

.row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px
}

.row-actions form,
.assignment-admin-list form {
    margin: 0
}

.assignment-admin-list {
    display: grid;
    gap: 12px
}

.assignment-admin-list .quiz-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px
}

.assignment-admin-list .quiz-card h2,
.assignment-admin-list .quiz-card small {
    margin: 0
}

@media(max-width:860px) {
    .learning-view {
        grid-template-columns: 1fr
    }

    .learning-body {
        min-height: 0;
        padding: 22px
    }

    .assignment-admin-list .quiz-card {
        grid-template-columns: 1fr
    }

    .assignment-admin-list .quiz-card form,
    .assignment-admin-list .quiz-card button {
        width: 100%
    }
}

/* ==========================================================================
   Pioneer LMS - Premium UI/UX Design System Upgrade 2026
   ========================================================================== */

/* Typography & Font Family Override */
body {
    font-family: 'Plus Jakarta Sans', PioneerSans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Light Theme Tokens */
:root {
    --bg: #f6f5fb;
    --surface: #ffffff;
    --surface-2: #f2edf9;
    --surface-3: #e6def2;
    --text: #1d1829;
    --muted: #6b6377;
    --border: #e6e0f0;
    --accent: #8b5cf6;
    --accent-strong: #6d28d9;
    --accent-soft: #f0eafd;
    --danger: #e11d48;
    --danger-soft: #ffe4e6;
    --warning: #d97706;
    --warning-soft: #fef3c7;
    --shadow: 0 12px 32px -4px rgba(109, 40, 217, 0.07), 0 4px 12px -2px rgba(0, 0, 0, 0.03);
    --shadow-hover: 0 20px 40px -6px rgba(109, 40, 217, 0.12), 0 8px 16px -4px rgba(0, 0, 0, 0.04);
    --radius: 20px;
    --radius-sm: 12px;
    --sidebar: 260px;
}

/* Dark Theme Tokens */
html[data-theme="dark"] {
    --bg: #0b0713;
    --surface: #140d21;
    --surface-2: #1e1430;
    --surface-3: #2a1b42;
    --text: #f5f3ff;
    --muted: #9d8ec0;
    --border: #2d1d44;
    --accent: #a855f7;
    --accent-strong: #c084fc;
    --accent-soft: rgba(168, 85, 247, 0.18);
    --danger: #fb7185;
    --danger-soft: rgba(251, 113, 133, 0.18);
    --warning: #fbbf24;
    --warning-soft: rgba(251, 191, 36, 0.18);
    --shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 24px 60px rgba(0, 0, 0, 0.65);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --bg: #0b0713;
        --surface: #140d21;
        --surface-2: #1e1430;
        --surface-3: #2a1b42;
        --text: #f5f3ff;
        --muted: #9d8ec0;
        --border: #2d1d44;
        --accent: #a855f7;
        --accent-strong: #c084fc;
        --accent-soft: rgba(168, 85, 247, 0.18);
        --danger: #fb7185;
        --danger-soft: rgba(251, 113, 133, 0.18);
        --warning: #fbbf24;
        --warning-soft: rgba(251, 191, 36, 0.18);
        --shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
        --shadow-hover: 0 24px 60px rgba(0, 0, 0, 0.65);
    }
}

/* Sidebar Navigation Aesthetics */
.sidebar {
    background: var(--surface) !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.06) !important;
    padding: 24px 16px 20px !important;
}

.brand {
    padding: 6px 12px 28px !important;
    gap: 14px !important;
}

.brand img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3) !important;
    transition: transform 0.2s ease;
}

.brand:hover img {
    transform: scale(1.05) rotate(-3deg);
}

.brand strong {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    letter-spacing: -0.02em !important;
}

.brand small {
    font-size: 0.72rem !important;
    color: var(--muted) !important;
    font-weight: 500 !important;
}

.nav-list {
    gap: 6px !important;
}

.nav-link {
    min-height: 46px !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: var(--muted) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
}

.nav-link:hover {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    transform: translateX(3px) !important;
}

.nav-link.active {
    background: var(--accent-soft) !important;
    color: var(--accent-strong) !important;
    font-weight: 700 !important;
}

.nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 4px;
    background: var(--accent);
    border-radius: 0 4px 4px 0;
}

.nav-glyph {
    border-radius: 10px;
    background: transparent;
    border: none;
    transition: all 0.2s ease;
}

.nav-link.active .nav-glyph {
    background: transparent;
    border-color: transparent;
    color: var(--accent-strong);
}

/* Topbar Header & Global Search */
.topbar {
    height: 80px !important;
    background: color-mix(in srgb, var(--bg) 85%, transparent) !important;
    backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0 38px !important;
}

.global-search {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
    height: 46px !important;
    padding: 0 16px !important;
}

.global-search:focus-within {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent) !important;
    transform: translateY(-1px);
}

.global-search input {
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    color: var(--text) !important;
}

.global-search kbd {
    background: var(--surface-2) !important;
    color: var(--muted) !important;
    border: 1px solid var(--border) !important;
    font-weight: 600 !important;
    font-size: 0.68rem !important;
    border-radius: 6px !important;
    padding: 2px 7px !important;
}

.icon-button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
}

.icon-button:hover {
    background: var(--surface-2) !important;
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border)) !important;
    transform: translateY(-2px) !important;
    color: var(--accent-strong) !important;
}

.count {
    background: var(--danger) !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.45) !important;
}

/* User Profile Chip */
.profile-chip {
    padding: 4px 14px 4px 4px !important;
    border-radius: 999px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
}

.profile-chip:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border)) !important;
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.2) !important;
    transform: translateY(-1px) !important;
}

.avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.82rem !important;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.35) !important;
    letter-spacing: 0.02em !important;
}

.profile-copy strong {
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
}

.profile-copy small {
    font-size: 0.7rem !important;
    color: var(--muted) !important;
    font-weight: 500 !important;
}

/* Dashboard Intro & Header Toggles */
.dashboard-intro {
    margin-bottom: 32px !important;
}

.eyebrow {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    color: var(--accent-strong) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.eyebrow::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
}

.dashboard-intro h1 {
    font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    color: var(--text) !important;
    margin: 6px 0 8px !important;
}

.dashboard-intro p {
    font-size: 0.95rem !important;
    color: var(--muted) !important;
}

.intro-actions {
    display: flex !important;
    gap: 8px !important;
    background: var(--surface) !important;
    padding: 5px !important;
    border-radius: 999px !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

.intro-actions .btn {
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    min-height: 38px !important;
    transition: all 0.2s ease !important;
}

.intro-actions .btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(168, 85, 247, 0.35) !important;
    border: 0 !important;
}

.intro-actions .btn-secondary {
    background: transparent !important;
    border: 0 !important;
    color: var(--muted) !important;
}

.intro-actions .btn-secondary:hover {
    color: var(--text) !important;
    background: var(--surface-2) !important;
}

/* Metric Bento Grid & Cards */
.metric-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 32px !important;
}

.metric-card {
    min-height: 175px !important;
    padding: 22px 24px !important;
    border-radius: 20px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.metric-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-hover) !important;
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border)) !important;
}

.metric-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    display: grid !important;
    place-items: center !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.2s ease !important;
}

.metric-card:hover .metric-icon {
    transform: scale(1.1) rotate(-4deg) !important;
}

/* Light Mode Stat Cards */
.metric-mint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), var(--surface) 60%) !important;
}

.metric-mint .metric-icon {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
}

.metric-blue {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.05), var(--surface) 60%) !important;
}

.metric-blue .metric-icon {
    background: #f0f9ff !important;
    color: #0284c7 !important;
    border: 1px solid #bae6fd !important;
}

.metric-gold {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), var(--surface) 60%) !important;
}

.metric-gold .metric-icon {
    background: #fffbeb !important;
    color: #d97706 !important;
    border: 1px solid #fde68a !important;
}

.metric-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.05), var(--surface) 60%) !important;
}

.metric-purple .metric-icon {
    background: #f5f3ff !important;
    color: #7c3aed !important;
    border: 1px solid #ddd6fe !important;
}

/* Dark Mode Stat Card Overrides */
html[data-theme="dark"] .metric-mint,
html[data-theme="dark"] .metric-blue,
html[data-theme="dark"] .metric-gold,
html[data-theme="dark"] .metric-purple,
html[data-theme="dark"] .metric-card {
    background: var(--surface) !important;
}

html[data-theme="dark"] .metric-mint .metric-icon {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #34d399 !important;
    border: 1px solid rgba(52, 211, 153, 0.3) !important;
    box-shadow: 0 0 16px rgba(52, 211, 153, 0.2) !important;
}

html[data-theme="dark"] .metric-blue .metric-icon {
    background: rgba(56, 189, 248, 0.16) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.2) !important;
}

html[data-theme="dark"] .metric-gold .metric-icon {
    background: rgba(251, 191, 36, 0.16) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.2) !important;
}

html[data-theme="dark"] .metric-purple .metric-icon {
    background: rgba(168, 85, 247, 0.16) !important;
    color: #c084fc !important;
    border: 1px solid rgba(192, 132, 252, 0.3) !important;
    box-shadow: 0 0 16px rgba(192, 132, 252, 0.2) !important;
}

.metric-card small {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--muted) !important;
    text-transform: capitalize !important;
    letter-spacing: -0.01em !important;
}

.metric-card>strong {
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    color: var(--text) !important;
    margin: 12px 0 6px !important;
}

.metric-card>span:last-child {
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    color: var(--muted) !important;
}

/* Data Table Wrap & Section Styling */
.content-section {
    margin-top: 36px !important;
}

.section-title {
    margin-bottom: 20px !important;
}

.section-title h2 {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--text) !important;
}

.section-title p {
    font-size: 0.86rem !important;
    color: var(--muted) !important;
}

.section-title>a {
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    color: var(--accent-strong) !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    background: var(--accent-soft) !important;
    transition: all 0.2s ease !important;
}

.section-title>a:hover {
    background: var(--accent) !important;
    color: #ffffff !important;
}

.data-table-wrap {
    border-radius: 20px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden !important;
}

table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

th {
    padding: 15px 20px !important;
    background: var(--surface-2) !important;
    color: var(--muted) !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--border) !important;
}

td {
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: 0.88rem !important;
    color: var(--text) !important;
    vertical-align: middle !important;
}

tbody tr:last-child td {
    border-bottom: 0 !important;
}

tbody tr {
    transition: background 0.15s ease !important;
}

tbody tr:hover {
    background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface)) !important;
}

/* Status & Health Pill Badges with Live Pulsing Dot */
.health,
.status-label {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    text-transform: capitalize !important;
}

/* Light Mode Health Badges */
.health-healthy,
.status-healthy,
.status-active {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
}

.health-healthy::before,
.status-healthy::before,
.status-active::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    margin-right: 7px;
    box-shadow: 0 0 8px #22c55e;
}

.health-unavailable,
.health-failed,
.status-failing,
.status-error {
    background: #ffe4e6 !important;
    color: #be123c !important;
    border: 1px solid #fecdd3 !important;
}

.health-unavailable::before,
.health-failed::before,
.status-failing::before,
.status-error::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f43f5e;
    margin-right: 7px;
    box-shadow: 0 0 8px #f43f5e;
}

/* Dark Mode Health Badges Override */
html[data-theme="dark"] .health-healthy,
html[data-theme="dark"] .status-healthy,
html[data-theme="dark"] .status-active {
    background: rgba(34, 197, 94, 0.16) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(74, 222, 128, 0.3) !important;
}

html[data-theme="dark"] .health-healthy::before,
html[data-theme="dark"] .status-healthy::before,
html[data-theme="dark"] .status-active::before {
    background: #4ade80 !important;
    box-shadow: 0 0 10px #4ade80 !important;
}

html[data-theme="dark"] .health-unavailable,
html[data-theme="dark"] .health-failed,
html[data-theme="dark"] .status-failing,
html[data-theme="dark"] .status-error {
    background: rgba(244, 63, 94, 0.16) !important;
    color: #fb7185 !important;
    border: 1px solid rgba(251, 113, 133, 0.3) !important;
}

html[data-theme="dark"] .health-unavailable::before,
html[data-theme="dark"] .health-failed::before,
html[data-theme="dark"] .status-failing::before,
html[data-theme="dark"] .status-error::before {
    background: #fb7185 !important;
    box-shadow: 0 0 10px #fb7185 !important;
}

/* Audit Log Action Chips */
.data-table-wrap code {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 11px !important;
    border-radius: 8px !important;
    font-family: 'JetBrains Mono', Consolas, Monaco, monospace !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    border: 1px solid #cbd5e1 !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    transition: transform 0.15s ease !important;
}

.data-table-wrap code:hover {
    transform: translateY(-1px) !important;
}

/* Dark Mode Audit Log Code Chips */
html[data-theme="dark"] .data-table-wrap code {
    background: rgba(168, 85, 247, 0.14) !important;
    color: #e9d5ff !important;
    border: 1px solid rgba(168, 85, 247, 0.32) !important;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.1) !important;
}

/* Course & Bento Grid Enhancements */
.course-card {
    border-radius: 20px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.course-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-hover) !important;
}

/* Buttons Polish */
.btn {
    border-radius: 12px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3) !important;
}

.btn-primary:hover {
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.45) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   DASHBOARD ALIGNMENT & ANIMATION SYSTEM FIX – All Roles
   Fixes: metric-grid columns, intro layout, card animations, responsive
   ========================================================================== */

/* ─── Entrance Animation Keyframes ─────────────────────────────────── */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(168, 85, 247, 0);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(168, 85, 247, 0.12);
    }
}

/* ─── Dashboard Intro – consistent across ALL roles ─────────────────── */
.dashboard-intro {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 24px !important;
    margin: 0 0 32px !important;
    animation: fadeUp 0.45s cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

.dashboard-intro>div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Single-button variant (student / lecturer) */
.dashboard-intro>.btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* Two-button pill variant (admin / coordinator) */
.intro-actions {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 5px 5px 5px !important;
    border-radius: 999px !important;
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    flex-wrap: nowrap !important;
}

.intro-actions .btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    padding: 8px 20px !important;
    font-size: 0.83rem !important;
    font-weight: 700 !important;
    min-height: 38px !important;
    transition: all 0.2s ease !important;
}

.intro-actions .btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
    color: #fff !important;
    box-shadow: 0 5px 16px rgba(139, 92, 246, 0.32) !important;
    border: 0 !important;
}

.intro-actions .btn-secondary {
    background: transparent !important;
    border: 0 !important;
    color: var(--muted) !important;
    box-shadow: none !important;
}

.intro-actions .btn-secondary:hover {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

/* ─── Metric Grid – Flexible auto-fit base ───────────────────────────── */
/*
  We override the hard-coded repeat(4,1fr) with auto-fit so the grid
  works for both 3-card (student/lecturer inside .dashboard-main)
  and 4-card (admin/coordinator standalone) layouts.
*/
.metric-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 32px !important;
}

/* Force 4-column layout for admin/coordinator (standalone grid, not inside .dashboard-main) */
section.metric-grid,
.content-section .metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* 3-column metric grid when inside .dashboard-main (student/lecturer hero container) */
.dashboard-main .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* ─── Metric Card Entrance Stagger ─────────────────────────────────── */
.metric-card {
    animation: scaleIn 0.45s cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

.metric-card:nth-child(1) {
    animation-delay: 0.05s !important;
}

.metric-card:nth-child(2) {
    animation-delay: 0.12s !important;
}

.metric-card:nth-child(3) {
    animation-delay: 0.19s !important;
}

.metric-card:nth-child(4) {
    animation-delay: 0.26s !important;
}

/* ─── Metric Card Layout – always use space-between columns ─────────── */
.metric-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 180px !important;
    padding: 22px 24px !important;
    border-radius: 20px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Metric card header row: icon pinned at top */
.metric-card>.metric-icon {
    margin-bottom: auto !important;
}

/* Metric card value */
.metric-card>strong {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    color: var(--text) !important;
    margin: 10px 0 4px !important;
    display: block !important;
}

/* Metric card subtitle */
.metric-card>small {
    font-size: 0.79rem !important;
    font-weight: 700 !important;
    color: var(--muted) !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    display: block !important;
}

.metric-card>span:last-child {
    font-size: 0.76rem !important;
    font-weight: 500 !important;
    color: var(--muted) !important;
    display: block !important;
}

/* ─── Dashboard Bento Layout ─────────────────────────────────────────── */
.dashboard-bento {
    display: grid !important;
    grid-template-columns: minmax(0, 2.1fr) minmax(290px, .92fr) !important;
    gap: 20px !important;
    align-items: stretch !important;
    margin-bottom: 10px !important;
    animation: fadeIn 0.4s ease both !important;
    animation-delay: 0.1s !important;
}

.dashboard-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    min-width: 0 !important;
}

/* ─── Learning Hero ───────────────────────────────────────────────────── */
.learning-hero {
    animation: scaleIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.05s both !important;
}

/* ─── Events Card – full height ──────────────────────────────────────── */
.events-card {
    display: flex !important;
    flex-direction: column !important;
    animation: fadeUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both !important;
}

.events-card .event-stack {
    flex: 1 !important;
    display: grid !important;
    align-content: start !important;
    gap: 8px !important;
}

/* ─── Section Title Links – consistent pill style ────────────────────── */
.section-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
}

/* ─── Attention List – proper flexbox alignment ──────────────────────── */
.attention-list a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 22px !important;
    gap: 16px !important;
    transition: background 0.15s ease !important;
}

.attention-list a:hover {
    background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface)) !important;
}

.attention-list span {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.attention-list small {
    font-size: 0.75rem !important;
    color: var(--muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.attention-list b {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: var(--warning) !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    background: var(--warning-soft) !important;
}

/* ─── Course Grid animation ──────────────────────────────────────────── */
.course-card {
    animation: fadeUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

.course-card:nth-child(1) {
    animation-delay: 0.05s !important;
}

.course-card:nth-child(2) {
    animation-delay: 0.1s !important;
}

.course-card:nth-child(3) {
    animation-delay: 0.15s !important;
}

.course-card:nth-child(4) {
    animation-delay: 0.2s !important;
}

/* ─── Content Section entrance ───────────────────────────────────────── */
.content-section {
    margin-top: 36px !important;
    animation: fadeUp 0.45s ease both !important;
    animation-delay: 0.15s !important;
}

/* ─── Emergency Banner ───────────────────────────────────────────────── */
.emergency-banner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 18px 22px !important;
    border-left: 4px solid var(--danger) !important;
    border-radius: 16px !important;
    background: var(--danger-soft) !important;
    margin-bottom: 24px !important;
    animation: fadeIn 0.3s ease both !important;
}

.emergency-banner strong {
    color: var(--danger) !important;
    font-weight: 800 !important;
}

.emergency-banner p {
    margin: 4px 0 0 !important;
    font-size: 0.88rem !important;
    color: var(--danger) !important;
    opacity: 0.85 !important;
}

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

/* Coordinator/admin 4-col → 2-col at 1100px */
@media (max-width: 1100px) {

    section.metric-grid,
    .content-section .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Bento collapses to single column at 1100px */
@media (max-width: 1100px) {
    .dashboard-bento {
        grid-template-columns: 1fr !important;
    }

    .dashboard-main .metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .events-card {
        display: grid !important;
        grid-template-columns: minmax(160px, .35fr) 1fr !important;
        column-gap: 24px !important;
    }

    .events-card>.section-title {
        grid-column: 1 / -1 !important;
    }

    .events-card .date-strip {
        grid-column: 1 !important;
        margin: 0 !important;
    }

    .events-card .event-stack {
        grid-column: 2 !important;
    }
}

/* Small tablets: metric grids go 2-col */
@media (max-width: 860px) {
    .dashboard-intro {
        align-items: flex-start !important;
    }

    section.metric-grid,
    .content-section .metric-grid,
    .dashboard-main .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .events-card {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .events-card>.section-title,
    .events-card .date-strip,
    .events-card .event-stack {
        grid-column: auto !important;
    }

    .events-card .date-strip {
        margin: 20px 0 !important;
    }
}

/* Phones: stack intro, 2-col metric → 1-col */
@media (max-width: 680px) {
    .dashboard-intro {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 18px !important;
    }

    .intro-actions {
        align-self: stretch !important;
        justify-content: center !important;
    }

    section.metric-grid,
    .content-section .metric-grid,
    .dashboard-main .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .progress-card {
        grid-column: 1 / -1 !important;
    }
}

/* Very small phones: 1-col */
@media (max-width: 420px) {

    section.metric-grid,
    .content-section .metric-grid,
    .dashboard-main .metric-grid {
        grid-template-columns: 1fr !important;
    }

    .progress-card {
        grid-column: auto !important;
    }
}

/* ─── Dark Mode: metric card glass effect ────────────────────────────── */
html[data-theme="dark"] .metric-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .metric-card:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border)) !important;
    box-shadow: 0 0 0 1px var(--border), 0 24px 48px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .metric-mint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), var(--surface) 70%) !important;
}

html[data-theme="dark"] .metric-blue {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), var(--surface) 70%) !important;
}

html[data-theme="dark"] .metric-gold {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), var(--surface) 70%) !important;
}

html[data-theme="dark"] .metric-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), var(--surface) 70%) !important;
}

/* ─── Dark Mode: Learning hero gradient ──────────────────────────────── */
html[data-theme="dark"] .learning-hero {
    background: linear-gradient(110deg,
            color-mix(in srgb, var(--accent-soft) 40%, var(--surface)) 0%,
            var(--surface) 55%,
            color-mix(in srgb, rgba(168, 85, 247, 0.12) 60%, var(--surface)) 100%) !important;
}

/* ─── Dark Mode: Events card ─────────────────────────────────────────── */
html[data-theme="dark"] .events-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

/* ─── Dark Mode: data table row hover ───────────────────────────────── */
html[data-theme="dark"] tbody tr:hover {
    background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)) !important;
}

/* ─── Dark Mode: section title link pill ────────────────────────────── */
html[data-theme="dark"] .section-title>a {
    background: var(--accent-soft) !important;
    color: var(--accent-strong) !important;
}

/* ─── Reduce motion: strip all animations ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .dashboard-intro,
    .dashboard-bento,
    .metric-card,
    .events-card,
    .learning-hero,
    .content-section,
    .course-card {
        animation: none !important;
    }
}

/* Staff workspace controls: shared filters, lifecycle actions and pagination. */
.staff-toolbar{margin:0 0 16px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm)}
.staff-toolbar form{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.staff-toolbar label{display:grid;gap:5px;min-width:145px;color:var(--muted);font-size:.72rem;font-weight:700}
.staff-toolbar label>span{padding-left:2px}
.staff-toolbar input,.staff-toolbar select{min-height:40px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);padding:8px 10px}
.staff-toolbar .staff-search{position:relative;display:flex;align-items:center;flex:1 1 260px;min-width:220px}
.staff-toolbar .staff-search .ui-icon{position:absolute;left:11px;width:16px;height:16px;color:var(--muted);pointer-events:none}
.staff-toolbar .staff-search input{width:100%;padding-left:35px}
.announcement-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,390px);gap:18px;align-items:start}
.announcement-reader{max-width:980px}
.staff-announcement-list .announcement{transform:none!important;box-shadow:var(--shadow-sm)}
.staff-announcement-list .announcement-head{gap:16px}
.announcement-row-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.row-more{position:relative}
.row-more summary{list-style:none;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);cursor:pointer}
.row-more summary::-webkit-details-marker{display:none}
.row-more summary .ui-icon{width:17px;height:17px}
.row-more>div{position:absolute;z-index:25;right:0;top:calc(100% + 6px);min-width:190px;padding:6px;border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:0 14px 35px rgb(15 23 42 / .14)}
.row-more form{margin:0}
.row-more button{width:100%;border:0;border-radius:7px;background:transparent;color:var(--text);padding:9px 10px;text-align:left;font:inherit;cursor:pointer}
.row-more button:hover,.row-more button:focus-visible{background:var(--surface-soft)}
.row-more button.danger{color:var(--danger,#b42318)}
.announcement-schedule-note{display:flex;align-items:center;gap:6px;margin:12px 0 0;color:var(--muted);font-size:.75rem}
.announcement-schedule-note .ui-icon{width:15px;height:15px}
.announcement-editor{position:sticky;top:88px;margin:0}
.announcement-editor>header{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.announcement-editor>header>span{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--accent)}
.announcement-editor>header .ui-icon{width:17px;height:17px}
.announcement-editor>header h2{margin:0;font-size:1rem}
.announcement-editor>header p{margin:3px 0 0;color:var(--muted);font-size:.72rem;line-height:1.45}
.form-context{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px;border-radius:9px;background:var(--surface-soft)}
.form-context small{grid-column:1;color:var(--muted)}
.form-context strong{grid-column:1}
.form-context .status-label{grid-column:2;grid-row:1 / span 2;align-self:center}
.form-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.status-label.status-draft,.status-label.status-unpublished{background:var(--surface-soft);color:var(--muted)}
.status-label.status-published{background:var(--success-soft);color:var(--success)}
.status-label.status-archived{background:color-mix(in srgb,var(--text) 8%,var(--surface));color:var(--muted)}
.staff-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.staff-pagination p{margin:0;color:var(--muted);font-size:.72rem}
.staff-pagination>div{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.staff-pagination a,.staff-pagination>div>span{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 9px;border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.72rem;text-decoration:none}
.staff-pagination a:hover,.staff-pagination a[aria-current="page"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}
.staff-pagination>div>span[aria-disabled="true"]{opacity:.45}
.staff-pagination .staff-pagination-gap{border-color:transparent;padding:0 2px;min-width:auto}
.staff-pagination .ui-icon{width:14px;height:14px}

@media (max-width:1024px){.announcement-workspace{grid-template-columns:1fr}.announcement-editor{position:static}.announcement-reader{max-width:none}}
@media (max-width:768px){.staff-toolbar form{align-items:stretch}.staff-toolbar label,.staff-toolbar .staff-search{flex:1 1 210px}.staff-pagination{align-items:flex-start;flex-direction:column}.staff-pagination>div{justify-content:flex-start}.announcement-list.standalone .announcement-head{align-items:flex-start}.announcement-row-actions{width:100%;justify-content:flex-end}}
@media (max-width:480px){.staff-toolbar{padding:10px}.staff-toolbar label,.staff-toolbar .staff-search,.staff-toolbar .btn{width:100%;flex-basis:100%}.staff-toolbar .btn{justify-content:center}.announcement-list.standalone .announcement{padding:18px}.announcement-row-actions{justify-content:space-between}.announcement-row-actions .btn{flex:1;justify-content:center}.staff-pagination a,.staff-pagination>div>span{min-width:32px;height:32px;padding:0 7px}.form-actions>*{flex:1;justify-content:center}}

/* ==========================================================================
   TOPBAR + SIDEBAR SYSTEM — Unified UI/UX Upgrade 2026
   - Anti-Flicker instant persistence (html.sidebar-collapsed)
   - Venom-styled liquid collapse button beside brand logo
   - Desktop: icon rail (68px) with hover tooltips
   - Mobile: full slide-in drawer with animated hamburger & frosted overlay
   - Glassmorphic topbar with scroll-shrink & glowing search
   ========================================================================== */

/* ─── CSS Variables ─────────────────────────────────────────────────── */
:root {
    --sidebar-expanded: 260px;
    --sidebar-collapsed: 68px;
    --topbar-height: 76px;
    --topbar-shrunk-height: 62px;
    --topbar-transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.3s ease,
        backdrop-filter 0.3s ease,
        box-shadow 0.3s ease;
    --sidebar-transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── No Transitions helper for zero-flicker init ────────────────────── */
.no-transitions,
.no-transitions * {
    transition: none !important;
}

/* ─── Sidebar Base Structure ─────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-expanded) !important;
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 50 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    padding: 20px 12px 18px !important;
    background: var(--surface) !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.05) !important;
    transition: var(--sidebar-transition) !important;
    overflow: visible !important;
}

/* App Frame margin follows sidebar */
.app-frame {
    margin-left: var(--sidebar-expanded) !important;
    transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ─── Brand Row ──────────────────────────────────────────────────────── */
.sidebar-header .brand,
.brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    text-decoration: none !important;
    color: var(--text) !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    overflow: hidden !important;
    transition: gap 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.brand-logo,
.brand img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 4px rgba(107, 32, 215, 0.15) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.brand:hover .brand-logo,
.brand:hover img {
    transform: scale(1.05) !important;
}

.brand-text,
.brand>span {
    display: flex !important;
    align-items: center !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.brand-text strong,
.brand strong {
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    letter-spacing: -0.01em !important;
}



/* ─── Navigation List & Links ────────────────────────────────────────── */
.nav-list {
    flex: 1 1 auto !important;
    display: grid !important;
    align-content: start !important;
    gap: 4px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
}

.nav-list::-webkit-scrollbar {
    display: none !important;
}

.nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    color: var(--muted) !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    text-decoration: none !important;
    position: relative !important;
    width: 100% !important;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}

.nav-link:hover {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    transform: translateX(3px) !important;
}

.nav-link.active {
    background: var(--accent-soft) !important;
    color: var(--accent-strong) !important;
    font-weight: 700 !important;
}

.nav-link.active::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 20% !important;
    height: 60% !important;
    width: 3.5px !important;
    background: var(--accent) !important;
    border-radius: 0 4px 4px 0 !important;
}

.nav-glyph {
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    color: currentColor !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nav-glyph svg {
    width: 20px !important;
    height: 20px !important;
    color: currentColor !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease !important;
}

.nav-link.active .nav-glyph {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--accent-strong) !important;
}

.nav-link>span:last-child {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    transition: opacity 0.2s ease, max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    max-width: 180px !important;
}

/* ─── Icon Hover Micro-Interactions ──────────────────────────────────── */
.nav-link:hover .nav-glyph svg {
    transform: scale(1.15) !important;
}

.nav-link[href*="settings"]:hover .nav-glyph svg {
    transform: rotate(90deg) scale(1.12) !important;
}

.nav-link[href*="logout"]:hover .nav-glyph svg,
.logout-form:hover button .nav-glyph svg {
    transform: translateX(3px) scale(1.1) !important;
}

.nav-link[href*="messages"]:hover .nav-glyph svg {
    transform: scale(1.18) rotate(-4deg) !important;
}

.nav-link[href*="dashboard"]:hover .nav-glyph svg {
    transform: translateY(-2px) scale(1.12) !important;
}

.nav-link[href*="courses"]:hover .nav-glyph svg {
    transform: rotate(6deg) scale(1.12) !important;
}

.nav-link[href*="calendar"]:hover .nav-glyph svg {
    transform: translateY(-1px) scale(1.12) !important;
}

/* Sidebar Footer */
.sidebar-footer {
    margin-top: auto !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--border) !important;
    display: grid !important;
    gap: 4px !important;
}

.sidebar-footer .nav-link {
    width: 100% !important;
}

.logout-form {
    margin: 0 !important;
    width: 100% !important;
}

.logout-form button.nav-link {
    border: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
    font-family: inherit !important;
    text-align: left !important;
}

/* ══════════════════════════════════════════════════════════
   INSTANT ANTI-FLICKER COLLAPSED STATE (Desktop)
   Clean single-pill icon squircle without double borders
   ═══════════════════════════════════════════════════════════ */
html.sidebar-collapsed .sidebar,
body.sidebar-collapsed .sidebar,
.sidebar.collapsed {
    width: var(--sidebar-collapsed) !important;
    padding: 20px 10px 18px !important;
    align-items: center !important;
}

html.sidebar-collapsed .app-frame,
body.sidebar-collapsed .app-frame,
.sidebar.collapsed~.app-frame {
    margin-left: var(--sidebar-collapsed) !important;
}

html.sidebar-collapsed .brand,
body.sidebar-collapsed .brand,
.sidebar.collapsed .brand {
    justify-content: center !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    padding: 2px 0 22px !important;
}

html.sidebar-collapsed .brand-text,
html.sidebar-collapsed .brand>span,
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .brand>span,
.sidebar.collapsed .brand-text,
.sidebar.collapsed .brand>span {
    opacity: 0 !important;
    max-width: 0 !important;
    pointer-events: none !important;
    transform: translateX(-10px) !important;
}

/* Rotate chevron icon in collapsed mode */
html.sidebar-collapsed .desktop-collapse-btn .collapse-icon,
body.sidebar-collapsed .desktop-collapse-btn .collapse-icon,
.sidebar.collapsed .desktop-collapse-btn .collapse-icon {
    transform: rotate(180deg) !important;
}

/* Nav links in collapsed mode: sleek single squircle */
html.sidebar-collapsed .nav-list,
body.sidebar-collapsed .nav-list,
.sidebar.collapsed .nav-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
}

html.sidebar-collapsed .nav-link,
body.sidebar-collapsed .nav-link,
.sidebar.collapsed .nav-link {
    display: grid !important;
    place-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: 1.5px solid transparent !important;
    color: var(--muted) !important;
    align-self: center !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
}

html.sidebar-collapsed .nav-glyph,
body.sidebar-collapsed .nav-glyph,
.sidebar.collapsed .nav-glyph {
    background: transparent !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    box-shadow: none !important;
    color: inherit !important;
}

html.sidebar-collapsed .nav-glyph svg,
body.sidebar-collapsed .nav-glyph svg,
.sidebar.collapsed .nav-glyph svg {
    width: 20px !important;
    height: 20px !important;
}

html.sidebar-collapsed .nav-link:hover,
body.sidebar-collapsed .nav-link:hover,
.sidebar.collapsed .nav-link:hover {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    transform: scale(1.08) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
}

html.sidebar-collapsed .nav-link.active,
body.sidebar-collapsed .nav-link.active,
.sidebar.collapsed .nav-link.active {
    background: var(--accent-soft) !important;
    color: var(--accent-strong) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

html.sidebar-collapsed .nav-link.active .nav-glyph,
body.sidebar-collapsed .nav-link.active .nav-glyph,
.sidebar.collapsed .nav-link.active .nav-glyph {
    color: var(--accent-strong) !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.sidebar-collapsed .nav-link.active::before,
body.sidebar-collapsed .nav-link.active::before,
.sidebar.collapsed .nav-link.active::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: -10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3.5px !important;
    height: 24px !important;
    background: var(--accent) !important;
    border-radius: 0 4px 4px 0 !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5) !important;
}

html.sidebar-collapsed .nav-link>span:last-child,
body.sidebar-collapsed .nav-link>span:last-child,
.sidebar.collapsed .nav-link>span:last-child {
    opacity: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    pointer-events: none !important;
}

/* Footer in collapsed mode */
html.sidebar-collapsed .sidebar-footer,
body.sidebar-collapsed .sidebar-footer,
.sidebar.collapsed .sidebar-footer {
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

html.sidebar-collapsed .sidebar-footer .nav-link,
html.sidebar-collapsed .sidebar-footer button.nav-link,
body.sidebar-collapsed .sidebar-footer .nav-link,
body.sidebar-collapsed .sidebar-footer button.nav-link,
.sidebar.collapsed .sidebar-footer .nav-link,
.sidebar.collapsed .sidebar-footer button.nav-link {
    display: grid !important;
    place-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: 1.5px solid transparent !important;
    color: var(--muted) !important;
}

html.sidebar-collapsed .sidebar-footer .nav-link:hover,
html.sidebar-collapsed .sidebar-footer button.nav-link:hover,
body.sidebar-collapsed .sidebar-footer .nav-link:hover,
body.sidebar-collapsed .sidebar-footer button.nav-link:hover,
.sidebar.collapsed .sidebar-footer .nav-link:hover,
.sidebar.collapsed .sidebar-footer button.nav-link:hover {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    transform: scale(1.08) !important;
}

html.sidebar-collapsed .sidebar-footer .nav-link.active,
body.sidebar-collapsed .sidebar-footer .nav-link.active,
.sidebar.collapsed .sidebar-footer .nav-link.active {
    background: var(--accent-soft) !important;
    color: var(--accent-strong) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.sidebar-collapsed .sidebar-footer .nav-link.active::before,
body.sidebar-collapsed .sidebar-footer .nav-link.active::before,
.sidebar.collapsed .sidebar-footer .nav-link.active::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: -10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3.5px !important;
    height: 24px !important;
    background: var(--accent) !important;
    border-radius: 0 4px 4px 0 !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5) !important;
}

html.sidebar-collapsed .sidebar-footer .nav-link>span:last-child,
html.sidebar-collapsed .sidebar-footer button.nav-link>span:last-child,
body.sidebar-collapsed .sidebar-footer .nav-link>span:last-child,
body.sidebar-collapsed .sidebar-footer button.nav-link>span:last-child,
.sidebar.collapsed .sidebar-footer .nav-link>span:last-child,
.sidebar.collapsed .sidebar-footer button.nav-link>span:last-child {
    opacity: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    pointer-events: none !important;
}

/* ─── Floating Glass Tooltips in Collapsed Mode ──────────────────────── */
@media (min-width: 861px) {

    html.sidebar-collapsed .nav-link::after,
    body.sidebar-collapsed .nav-link::after,
    .sidebar.collapsed .nav-link::after {
        content: attr(data-label) !important;
        position: absolute !important;
        left: calc(100% + 12px) !important;
        top: 50% !important;
        transform: translateY(-50%) translateX(-8px) scale(0.95) !important;
        background: color-mix(in srgb, var(--surface) 92%, black) !important;
        color: var(--text) !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em !important;
        white-space: nowrap !important;
        padding: 6px 12px !important;
        border-radius: 10px !important;
        border: 1px solid var(--border) !important;
        backdrop-filter: blur(12px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
        z-index: 100 !important;
    }

    html.sidebar-collapsed .nav-link:hover::after,
    body.sidebar-collapsed .nav-link:hover::after,
    .sidebar.collapsed .nav-link:hover::after {
        opacity: 1 !important;
        transform: translateY(-50%) translateX(0) scale(1) !important;
    }
}

/* ══════════════════════════════════════════════════════════
   TOPBAR RESTYLE & ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
.topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    height: var(--topbar-height) !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 32px !important;
    background: color-mix(in srgb, var(--bg) 84%, transparent) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 50%, transparent),
        0 8px 32px -8px rgba(0, 0, 0, 0.05) !important;
    transition: var(--topbar-transition) !important;
}

.topbar.scrolled {
    height: var(--topbar-shrunk-height) !important;
    background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
    box-shadow: 0 2px 20px -4px rgba(0, 0, 0, 0.09) !important;
}

/* Global Search */
.global-search {
    position: relative !important;
    flex: 1 !important;
    max-width: 680px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 999px !important;
    padding: 0 14px 0 16px !important;
    color: var(--muted) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

.global-search:focus-within {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent),
        0 4px 20px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-1px) !important;
}

.global-search input {
    flex: 1 !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    color: var(--text) !important;
    padding: 0 !important;
    min-width: 0 !important;
}

.search-icon,
.global-search>svg:first-of-type {
    width: 18px !important;
    height: 18px !important;
    color: var(--muted) !important;
    flex-shrink: 0 !important;
    transition: color 0.2s ease !important;
}

.global-search:focus-within .search-icon,
.global-search:focus-within>svg:first-of-type {
    color: var(--accent) !important;
}

.global-search kbd {
    flex-shrink: 0 !important;
    font-family: inherit !important;
    font-size: 0.67rem !important;
    font-weight: 700 !important;
    color: var(--muted) !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    padding: 2px 7px !important;
    letter-spacing: 0.03em !important;
    transition: opacity 0.2s ease !important;
}

.global-search:focus-within kbd {
    opacity: 0 !important;
}

/* Top Actions */
.top-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

.icon-button {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 14px !important;
    background: var(--surface) !important;
    color: var(--muted) !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    text-decoration: none !important;
}

.icon-button:hover {
    background: var(--surface-2) !important;
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border)) !important;
    color: var(--accent-strong) !important;
    transform: translateY(-2px) scale(1.04) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

/* ─── Theme Toggle Button (Sun ↔ Moon) ───────────────────────────────── */
.theme-toggle-btn {
    position: relative !important;
    overflow: hidden !important;
}

.theme-toggle-btn .theme-icon {
    width: 20px !important;
    height: 20px !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.25s ease,
        color 0.2s ease !important;
}

/* Light mode: Moon is visible, Sun is hidden */
html:not([data-theme="dark"]) .theme-toggle-btn .sun-icon {
    display: none !important;
}

html:not([data-theme="dark"]) .theme-toggle-btn .moon-icon {
    display: block !important;
    color: var(--muted) !important;
}

/* Dark mode: Sun is visible, Moon is hidden */
html[data-theme="dark"] .theme-toggle-btn .sun-icon {
    display: block !important;
    color: #fbbf24 !important;
}

html[data-theme="dark"] .theme-toggle-btn .moon-icon {
    display: none !important;
}

.theme-toggle-btn:hover .theme-icon {
    transform: rotate(20deg) scale(1.12) !important;
}

.theme-toggle-btn:active .theme-icon {
    transform: rotate(-30deg) scale(0.9) !important;
}

/* ─── Notification Button & Animated Bell ────────────────────────────── */
.notification-button {
    position: relative !important;
    overflow: visible !important;
}

.notification-button .bell-icon {
    width: 21px !important;
    height: 21px !important;
    color: var(--muted) !important;
    transform-origin: 50% 15% !important;
    transition: color 0.25s ease, transform 0.25s ease !important;
    display: block !important;
}

.notification-button:hover .bell-icon {
    color: var(--accent-strong) !important;
    animation: bellRing 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
}

.notification-button:hover .bell-clapper {
    animation: clapperWiggle 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
    transform-origin: 50% 85% !important;
}

/* Bell Harmonic Ring Keyframes */
@keyframes bellRing {
    0% {
        transform: rotate(0deg) scale(1);
    }

    12% {
        transform: rotate(16deg) scale(1.1);
    }

    24% {
        transform: rotate(-14deg) scale(1.1);
    }

    36% {
        transform: rotate(12deg);
    }

    48% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(7deg);
    }

    72% {
        transform: rotate(-4deg);
    }

    84% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}

@keyframes clapperWiggle {
    0% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-2.5px);
    }

    30% {
        transform: translateX(2.5px);
    }

    45% {
        transform: translateX(-1.8px);
    }

    60% {
        transform: translateX(1.2px);
    }

    75% {
        transform: translateX(-0.6px);
    }

    100% {
        transform: translateX(0);
    }
}

/* Notification Count Badge */
.count {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    display: grid !important;
    place-items: center !important;
    border: 2px solid var(--surface) !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.45) !important;
    animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
    z-index: 2 !important;
}

.count::after {
    content: '' !important;
    position: absolute !important;
    inset: -3px !important;
    border-radius: 50% !important;
    border: 2px solid #ef4444 !important;
    opacity: 0 !important;
    animation: badgeRing 2.4s ease-in-out 0.8s infinite !important;
}

@keyframes badgePop {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes badgeRing {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(2.4);
    }
}

.profile-chip {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 5px 14px 5px 5px !important;
    border-radius: 999px !important;
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    cursor: pointer !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    text-decoration: none !important;
}

.profile-chip:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border)) !important;
    box-shadow: 0 6px 22px rgba(139, 92, 246, 0.18) !important;
    transform: translateY(-1px) !important;
}

.avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 0.8rem !important;
    display: grid !important;
    place-items: center !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.38) !important;
    letter-spacing: 0.03em !important;
    transition: transform 0.2s ease !important;
}

.profile-chip:hover .avatar {
    transform: scale(1.08) rotate(-5deg) !important;
}

.profile-chip.active {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent) !important;
}

.avatar.avatar-image {
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
}

[data-avatar-image][hidden],
[data-avatar-fallback][hidden] {
    display: none !important;
}

.profile-copy {
    display: grid !important;
    line-height: 1.2 !important;
}

.profile-copy strong {
    font-size: 0.83rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    white-space: nowrap !important;
}

.profile-copy small {
    font-size: 0.69rem !important;
    color: var(--muted) !important;
    font-weight: 500 !important;
}

/* ══════════════════════════════════════════════════════════
   DESKTOP VS MOBILE DISPLAY RULES
   ═══════════════════════════════════════════════════════════ */

/* DESKTOP RULES (≥ 861px) */
@media (min-width: 861px) {

    /* Hide mobile menu button completely on desktop */
    .mobile-menu {
        display: none !important;
    }

    /* Hide mobile bottom navigation on desktop */
    .mobile-nav {
        display: none !important;
    }

    /* Show desktop collapse button */
    .desktop-collapse-btn {
        display: grid !important;
    }
}

/* MOBILE RULES (≤ 860px) */
@media (max-width: 860px) {

    /* Show mobile menu hamburger */
    .mobile-menu {
        display: grid !important;
        order: 1 !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
        border: 1.5px solid var(--border) !important;
        background: var(--surface) !important;
        place-items: center !important;
        cursor: pointer !important;
        color: var(--text) !important;
        flex-shrink: 0 !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    }

    .mobile-menu .ui-icon {
        width: 20px !important;
        height: 20px !important;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease !important;
    }

    .mobile-menu:hover {
        background: var(--surface-2) !important;
        border-color: color-mix(in srgb, var(--accent) 40%, var(--border)) !important;
        transform: scale(1.05) !important;
    }

    .mobile-menu.is-open {
        background: var(--accent-soft) !important;
        border-color: var(--accent) !important;
        color: var(--accent-strong) !important;
        box-shadow: 0 0 16px rgba(168, 85, 247, 0.25) !important;
    }

    .mobile-menu.is-open .ui-icon {
        transform: rotate(90deg) scale(1.1) !important;
        color: var(--accent-strong) !important;
    }

    /* Hide desktop collapse button on mobile */
    .desktop-collapse-btn {
        display: none !important;
    }

    /* Sidebar becomes a full slide-in drawer on mobile (above everything) */
    .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: 290px !important;
        height: 100dvh !important;
        transform: translateX(-105%) !important;
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 100 !important;
        padding: 24px 18px 24px !important;
        border-radius: 0 24px 24px 0 !important;
        background: var(--surface) !important;
        box-shadow: none !important;
        align-items: flex-start !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .sidebar.open {
        transform: translateX(0) !important;
        box-shadow: 14px 0 55px rgba(0, 0, 0, 0.35) !important;
    }

    .sidebar .brand {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 2px 4px 24px !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .sidebar .brand-logo,
    .sidebar .brand img {
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
    }

    .sidebar .brand-text,
    .sidebar .brand>span {
        display: grid !important;
        opacity: 1 !important;
        max-width: 200px !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    /* Reset collapsed styles on mobile — always show full labels */
    html.sidebar-collapsed .sidebar,
    body.sidebar-collapsed .sidebar,
    .sidebar.collapsed {
        width: 290px !important;
        padding: 24px 18px 24px !important;
        align-items: flex-start !important;
    }

    html.sidebar-collapsed .brand,
    body.sidebar-collapsed .brand,
    .sidebar.collapsed .brand {
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 2px 4px 24px !important;
    }

    html.sidebar-collapsed .brand-text,
    html.sidebar-collapsed .brand>span,
    body.sidebar-collapsed .brand-text,
    body.sidebar-collapsed .brand>span,
    .sidebar.collapsed .brand-text,
    .sidebar.collapsed .brand>span {
        opacity: 1 !important;
        max-width: 200px !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    html.sidebar-collapsed .nav-link,
    body.sidebar-collapsed .nav-link,
    .sidebar.collapsed .nav-link {
        justify-content: flex-start !important;
        padding: 9px 12px !important;
        gap: 11px !important;
        width: 100% !important;
    }

    html.sidebar-collapsed .nav-link>span:last-child,
    body.sidebar-collapsed .nav-link>span:last-child,
    .sidebar.collapsed .nav-link>span:last-child {
        opacity: 1 !important;
        max-width: 180px !important;
        flex: 1 1 auto !important;
        pointer-events: auto !important;
    }

    html.sidebar-collapsed .nav-glyph,
    body.sidebar-collapsed .nav-glyph,
    .sidebar.collapsed .nav-glyph {
        width: 28px !important;
        height: 28px !important;
    }

    html.sidebar-collapsed .sidebar-footer,
    body.sidebar-collapsed .sidebar-footer,
    .sidebar.collapsed .sidebar-footer {
        align-items: stretch !important;
    }

    html.sidebar-collapsed .sidebar-footer .nav-link,
    html.sidebar-collapsed .sidebar-footer button.nav-link,
    body.sidebar-collapsed .sidebar-footer .nav-link,
    body.sidebar-collapsed .sidebar-footer button.nav-link,
    .sidebar.collapsed .sidebar-footer .nav-link,
    .sidebar.collapsed .sidebar-footer button.nav-link {
        justify-content: flex-start !important;
        padding: 9px 12px !important;
        gap: 11px !important;
        width: 100% !important;
    }

    html.sidebar-collapsed .sidebar-footer .nav-link>span:last-child,
    html.sidebar-collapsed .sidebar-footer button.nav-link>span:last-child,
    body.sidebar-collapsed .sidebar-footer .nav-link>span:last-child,
    body.sidebar-collapsed .sidebar-footer button.nav-link>span:last-child,
    .sidebar.collapsed .sidebar-footer .nav-link>span:last-child,
    .sidebar.collapsed .sidebar-footer button.nav-link>span:last-child {
        opacity: 1 !important;
        max-width: 180px !important;
        flex: 1 1 auto !important;
        pointer-events: auto !important;
    }

    /* App Frame is full width on mobile */
    .app-frame,
    html.sidebar-collapsed .app-frame,
    body.sidebar-collapsed .app-frame,
    .sidebar.collapsed~.app-frame {
        margin-left: 0 !important;
    }

    /* ─── Topbar on Mobile: Single Balanced Row ─────────────────────── */
    .topbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding: 0 14px !important;
        height: 64px !important;
        width: 100% !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 40 !important;
    }

    .global-search {
        display: flex !important;
        order: 2 !important;
        flex: 1 1 auto !important;
        height: 40px !important;
        max-width: none !important;
        min-width: 0 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 0 !important;
        padding: 0 10px 0 12px !important;
        border-radius: 999px !important;
    }

    .global-search input {
        font-size: 0.8rem !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .global-search kbd {
        display: none !important;
    }

    .top-actions {
        display: flex !important;
        order: 3 !important;
        align-items: center !important;
        gap: 8px !important;
        margin-left: 0 !important;
        flex-shrink: 0 !important;
    }

    .top-actions .notification-button,
    .top-actions .theme-toggle-btn {
        display: grid !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
        flex-shrink: 0 !important;
    }

    .top-actions .profile-chip {
        display: flex !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        flex-shrink: 0 !important;
    }

    .top-actions .profile-chip .avatar {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
    }

    .profile-copy {
        display: none !important;
    }

    .main-content {
        padding: 24px 16px 96px !important;
    }
}

/* ─── Mobile Backdrop Overlay (below sidebar drawer, above topbar) ───── */
.sidebar-overlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    z-index: 90 !important;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    transition: background 0.3s ease, backdrop-filter 0.3s ease !important;
}

.sidebar-overlay.visible {
    display: block !important;
    background: rgba(10, 5, 20, 0.6) !important;
    backdrop-filter: blur(5px) !important;
}

/* ─── Mobile Bottom Navigation Dock ──────────────────────────────────── */
.mobile-nav {
    position: fixed !important;
    display: none;
    grid-template-columns: repeat(4, 1fr) !important;
    inset: auto 0 0 !important;
    background: color-mix(in srgb, var(--surface) 95%, transparent) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) 8px !important;
    z-index: 25 !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.08) !important;
}

@media (max-width: 860px) {
    .mobile-nav {
        display: grid !important;
    }
}

.mobile-nav a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    font-weight: 600 !important;
    color: var(--muted) !important;
    padding: 6px 4px !important;
    border-radius: 12px !important;
    transition: color 0.2s ease, background 0.2s ease !important;
    text-decoration: none !important;
}

.mobile-nav a:hover,
.mobile-nav a.active {
    color: var(--accent-strong) !important;
    background: var(--accent-soft) !important;
}

.mobile-nav a>span {
    width: 32px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    background: var(--surface-2) !important;
    border-radius: 10px !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}

.mobile-nav a.active>span {
    background: color-mix(in srgb, var(--accent) 18%, var(--surface)) !important;
    transform: scale(1.08) !important;
}

.mobile-nav small {
    font-size: 0.62rem !important;
    letter-spacing: 0.01em !important;
    margin-top: 1px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   7. TEACHING WORKSPACE & COURSE MANAGEMENT (/manage)
═══════════════════════════════════════════════════════════════════════ */

/* ─── Hero Page Heading ──────────────────────────────────────────────── */
.page-heading {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
    padding: 28px 32px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden !important;
}

.page-heading:before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 5px !important;
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%) !important;
    border-radius: 20px 0 0 20px !important;
}

.page-heading:after {
    content: "" !important;
    position: absolute !important;
    right: -50px !important;
    top: -50px !important;
    width: 240px !important;
    height: 240px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 70%) !important;
    pointer-events: none !important;
}

.page-heading h1 {
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: var(--text) !important;
    margin: 0 0 6px !important;
    line-height: 1.18 !important;
}

.page-heading p {
    font-size: 0.92rem !important;
    color: var(--muted) !important;
    margin: 0 !important;
    max-width: 680px !important;
    line-height: 1.5 !important;
}

.heading-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

/* ─── Workspace & Course Tabs ────────────────────────────────────────── */
.workspace-tabs,
.course-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    margin-bottom: 24px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03) !important;
}

.workspace-tabs::-webkit-scrollbar,
.course-tabs::-webkit-scrollbar {
    display: none !important;
}

.workspace-tabs a,
.course-tabs a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 18px !important;
    border-radius: 12px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: var(--muted) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.workspace-tabs a:hover,
.course-tabs a:hover {
    color: var(--text) !important;
    background: var(--surface-2) !important;
    transform: translateY(-1px) !important;
}

.workspace-tabs a.active,
.course-tabs a.active {
    background: var(--accent) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.35) !important;
}

/* ─── Course Selector ────────────────────────────────────────────────── */
.course-selector {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.course-selector select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 16px center !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 14px !important;
    padding: 13px 44px 13px 18px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
    max-width: 680px !important;
    width: 100% !important;
}

.course-selector select:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border)) !important;
    background-color: var(--surface-2) !important;
}

.course-selector select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    outline: none !important;
}

/* ─── Course Cards & Grid ────────────────────────────────────────────── */
.course-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 32px !important;
}

.course-grid.large {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
}

.course-card {
    position: relative !important;
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    color: var(--text) !important;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
    min-height: 240px !important;
}

.course-card:before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--course-accent, var(--accent)) 0%, var(--accent-strong) 100%) !important;
    border-radius: 20px 20px 0 0 !important;
}

.course-card:hover {
    transform: translateY(-4px) !important;
    border-color: color-mix(in srgb, var(--course-accent, var(--accent)) 45%, var(--border)) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08), 0 0 24px rgba(168, 85, 247, 0.15) !important;
}

.card-top-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.course-kicker {
    display: inline-flex !important;
    align-self: flex-start !important;
    padding: 4px 10px !important;
    background: var(--accent-soft) !important;
    color: var(--accent-strong) !important;
    border-radius: 8px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* Circular Progress Ring */
.progress-ring-badge {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
}

.circular-chart {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    transform: rotate(-90deg) !important;
}

.circle-bg {
    fill: none !important;
    stroke: var(--surface-3) !important;
    stroke-width: 3.5 !important;
}

.circle {
    fill: none !important;
    stroke: var(--course-accent, var(--accent)) !important;
    stroke-width: 3.5 !important;
    stroke-linecap: round !important;
    transition: stroke-dasharray 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ring-text {
    position: absolute !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    line-height: 1 !important;
}

.course-card h3 {
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 0 0 8px !important;
    color: var(--text) !important;
    transition: color 0.2s ease !important;
}

.course-card:hover h3 {
    color: var(--accent-strong) !important;
}

.course-card p {
    font-size: 0.85rem !important;
    color: var(--muted) !important;
    line-height: 1.5 !important;
    margin: 0 0 18px !important;
    flex: 1 1 auto !important;
}

.progress-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.75rem !important;
    color: var(--muted) !important;
    margin-bottom: 6px !important;
    margin-top: auto !important;
}

.progress-meta strong {
    color: var(--text) !important;
    font-weight: 700 !important;
}

.progress {
    height: 6px !important;
    background: var(--surface-3) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
}

.progress span {
    display: block !important;
    height: 100% !important;
    background: linear-gradient(90deg, var(--course-accent, var(--accent)) 0%, var(--accent-strong) 100%) !important;
    border-radius: 999px !important;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    color: var(--accent-strong) !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--border) !important;
}

.card-link b {
    display: grid !important;
    place-items: center !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.course-card:hover .card-link b {
    transform: translateX(5px) !important;
}

/* ─── 2-Column Workspace Grid ────────────────────────────────────────── */
.manage-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
    margin-bottom: 36px !important;
}

@media (max-width: 1024px) {
    .manage-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ─── Form Panels & Stack Forms ──────────────────────────────────────── */
.form-panel {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 20px !important;
    padding: 26px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    position: sticky !important;
    top: 88px !important;
}

.form-panel h2 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin: 0 0 6px !important;
    color: var(--text) !important;
}

.form-panel>p {
    font-size: 0.85rem !important;
    color: var(--muted) !important;
    margin: 0 0 18px !important;
    line-height: 1.5 !important;
}

.stack-form {
    display: grid !important;
    gap: 16px !important;
}

.stack-form label {
    display: grid !important;
    gap: 6px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
}

.stack-form label small {
    font-weight: 400 !important;
    color: var(--muted) !important;
}

.form-two {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.form-three {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
}

@media (max-width: 640px) {

    .form-two,
    .form-three {
        grid-template-columns: 1fr !important;
    }
}

.check-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
}

.check-row input {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--accent) !important;
    cursor: pointer !important;
}

/* ─── Module & Content Accordions ────────────────────────────────────── */
.module-list {
    display: grid !important;
    gap: 14px !important;
}

.module {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.module:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border)) !important;
}

.module summary {
    list-style: none !important;
    cursor: pointer !important;
    padding: 16px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: var(--surface) !important;
    user-select: none !important;
}

.module summary::-webkit-details-marker {
    display: none !important;
}

.module summary span {
    display: grid !important;
    gap: 2px !important;
}

.module summary strong {
    font-size: 1rem !important;
    color: var(--text) !important;
}

.module summary small {
    font-size: 0.75rem !important;
    color: var(--muted) !important;
    text-transform: capitalize !important;
}

.module summary b {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: var(--accent-strong) !important;
    background: var(--accent-soft) !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
}

.module-items {
    border-top: 1px solid var(--border) !important;
    background: var(--surface-2) !important;
}

.content-row {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 13px 20px !important;
    border-bottom: 1px solid var(--border) !important;
    transition: background 0.15s ease !important;
}

.content-row:last-child {
    border-bottom: 0 !important;
}

.content-row:hover {
    background: color-mix(in srgb, var(--accent) 5%, var(--surface)) !important;
}

.content-type {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    color: var(--accent-strong) !important;
}

.content-row span:nth-child(2) {
    display: grid !important;
    gap: 2px !important;
}

.content-row strong a {
    color: var(--text) !important;
    text-decoration: none !important;
    font-size: 0.92rem !important;
    transition: color 0.18s ease !important;
}

.content-row strong a:hover {
    color: var(--accent-strong) !important;
}

.content-row small {
    font-size: 0.75rem !important;
    color: var(--muted) !important;
    text-transform: capitalize !important;
}

.inline-create {
    display: grid !important;
    grid-template-columns: 110px 1.2fr 1.5fr 1fr auto auto auto !important;
    gap: 10px !important;
    align-items: end !important;
    padding: 18px 20px !important;
    background: var(--surface) !important;
    border-top: 1px solid var(--border) !important;
}

@media (max-width: 860px) {
    .inline-create {
        grid-template-columns: 1fr !important;
    }
}

/* ─── Quiz & Assignment Cards ────────────────────────────────────────── */
.quiz-list,
.assignment-admin-list {
    display: grid !important;
    gap: 14px !important;
}

.quiz-card {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 18px !important;
    padding: 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

.quiz-card:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border)) !important;
    transform: translateY(-2px) !important;
}

.quiz-card h2 {
    font-size: 1.15rem !important;
    margin: 0 !important;
}

.quiz-card h2 a {
    color: var(--text) !important;
    text-decoration: none !important;
    transition: color 0.18s ease !important;
}

.quiz-card h2 a:hover {
    color: var(--accent-strong) !important;
}

.quiz-card small {
    color: var(--muted) !important;
    font-size: 0.8rem !important;
}

.status-label {
    display: inline-flex !important;
    width: max-content !important;
    background: var(--surface-2) !important;
    color: var(--muted) !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    text-transform: capitalize !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
}

/* ─── Grading Workspace ──────────────────────────────────────────────── */
.grading-layout {
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    gap: 20px !important;
    align-items: start !important;
}

@media (max-width: 860px) {
    .grading-layout {
        grid-template-columns: 1fr !important;
    }
}

.grading-nav {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 18px !important;
    padding: 10px !important;
    display: grid !important;
    gap: 4px !important;
}

.grading-nav a {
    display: grid !important;
    gap: 3px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    color: var(--text) !important;
    transition: background 0.18s ease, transform 0.18s ease !important;
}

.grading-nav a:hover {
    background: var(--surface-2) !important;
}

.grading-nav a.active {
    background: var(--accent-soft) !important;
    color: var(--accent-strong) !important;
    font-weight: 700 !important;
}

.grading-nav a small {
    color: var(--muted) !important;
    font-size: 0.74rem !important;
}

.grading-list {
    display: grid !important;
    gap: 16px !important;
}

.grading-card {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 18px !important;
    padding: 22px 24px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03) !important;
}

.grading-card header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 18px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--border) !important;
}

.grading-card header span:first-child {
    display: grid !important;
    gap: 2px !important;
}

.grading-card header strong {
    font-size: 1.05rem !important;
    color: var(--text) !important;
}

.grading-card header small {
    color: var(--muted) !important;
    font-size: 0.78rem !important;
}

.grade-form {
    display: grid !important;
    grid-template-columns: 120px 160px 140px minmax(220px, 1fr) auto !important;
    gap: 12px !important;
    align-items: end !important;
}

@media (max-width: 1024px) {
    .grade-form {
        grid-template-columns: 1fr 1fr !important;
    }

    .grade-form .feedback-field {
        grid-column: 1 / -1 !important;
    }
}

/* ─── Attendance Register ────────────────────────────────────────────── */
.attendance-register {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 18px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
}

.attendance-register>div {
    display: grid !important;
    grid-template-columns: 1fr 160px !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--border) !important;
}

.attendance-register>div:last-child {
    border-bottom: 0 !important;
}

.attendance-register>div:hover {
    background: var(--surface-2) !important;
}

.attendance-register span {
    display: grid !important;
    gap: 2px !important;
}

.attendance-register strong {
    font-size: 0.95rem !important;
    color: var(--text) !important;
}

.attendance-register small {
    color: var(--muted) !important;
    font-size: 0.75rem !important;
}

.attendance-register select {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    cursor: pointer !important;
}

/* ─── Announcements List ─────────────────────────────────────────────── */
.announcement-list {
    display: grid !important;
    gap: 12px !important;
}

.announcement {
    display: grid !important;
    grid-template-columns: 90px 1fr !important;
    gap: 18px !important;
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
}

.announcement:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border)) !important;
}

.announcement>span {
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    color: var(--muted) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--surface-2) !important;
    border-radius: 10px !important;
    height: 36px !important;
}

.announcement.priority-emergency {
    border-left: 4px solid var(--danger) !important;
}

.announcement.priority-emergency>span {
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
}

.announcement.priority-important {
    border-left: 4px solid var(--warning) !important;
}

.announcement.priority-important>span {
    background: var(--warning-soft) !important;
    color: var(--warning) !important;
}

.announcement h3 {
    font-size: 1.05rem !important;
    margin: 0 0 6px !important;
    color: var(--text) !important;
}

.announcement p {
    font-size: 0.88rem !important;
    color: var(--muted) !important;
    margin: 0 0 8px !important;
    line-height: 1.55 !important;
}

.announcement small {
    font-size: 0.76rem !important;
    color: var(--muted) !important;
}

/* ─── Buttons & Controls ─────────────────────────────────────────────── */
.btn {
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    font-size: 0.84rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
}

.btn:hover {
    transform: translateY(-1px) !important;
}

.btn:active {
    transform: translateY(1px) !important;
}

.btn-primary {
    background: var(--accent) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.3) !important;
}

.btn-primary:hover {
    background: var(--accent-strong) !important;
    box-shadow: 0 6px 22px rgba(168, 85, 247, 0.45) !important;
}

.btn-secondary {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.btn-secondary:hover {
    background: var(--surface-2) !important;
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border)) !important;
}

.btn-muted {
    background: var(--surface-2) !important;
    color: var(--muted) !important;
}

.btn-muted:hover {
    color: var(--text) !important;
}

.btn-small {
    min-height: 34px !important;
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
    border-radius: 9px !important;
}

/* ─── Keyboard Shortcuts Modal ──────────────────────────────────────── */
.shortcuts-modal {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    max-width: 480px !important;
    width: 90% !important;
    margin: auto !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35) !important;
    overflow: hidden !important;
}

.shortcuts-modal::backdrop {
    background: rgba(10, 5, 20, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.shortcuts-card {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 20px !important;
    padding: 24px 28px !important;
}

.shortcuts-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--border) !important;
}

.shortcuts-header h2 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    margin: 0 !important;
}

.shortcuts-header .ui-icon {
    width: 22px !important;
    height: 22px !important;
    color: var(--accent) !important;
}

.shortcuts-header .close-shortcuts {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
}

.shortcuts-grid {
    display: grid !important;
    gap: 10px !important;
}

.shortcut-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    background: var(--surface-2) !important;
    border-radius: 12px !important;
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}

.shortcut-item kbd {
    display: inline-block !important;
    padding: 3px 8px !important;
    font-size: 0.76rem !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    background: var(--surface) !important;
    color: var(--accent-strong) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* ─── Dark Mode Overrides ────────────────────────────────────────────── */
html[data-theme="dark"] .sidebar {
    background: var(--surface) !important;
    box-shadow: 4px 0 40px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .desktop-collapse-btn {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .desktop-collapse-btn:hover {
    background: var(--surface-3) !important;
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4) !important;
}

html[data-theme="dark"] .sidebar-overlay.visible {
    background: rgba(0, 0, 0, 0.75) !important;
}

html[data-theme="dark"] .mobile-nav {
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .page-heading {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .course-card {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] .form-panel {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
}

/* ─── v5 Feature Modules ────────────────────────────────────────────── */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.filter {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.filter:hover,
.filter.active {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent-strong);
}

.manage-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 960px) {
    .manage-grid {
        grid-template-columns: 1fr;
    }
}

.resource-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.resource-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    gap: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.resource-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.resource-meta {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
}

.resource-meta .ui-icon {
    width: 38px;
    height: 38px;
    padding: 8px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    flex-shrink: 0;
}

.resource-meta strong {
    display: block;
    font-size: 1.02rem;
    color: var(--text);
    margin-bottom: 4px;
}

.resource-meta small {
    display: block;
    color: var(--muted);
    font-size: 0.82rem;
    margin-bottom: 6px;
}

.resource-meta p {
    font-size: 0.9rem;
    color: var(--text);
    margin: 4px 0 0;
    line-height: 1.45;
}

.resource-meta details {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--muted);
}

.resource-meta summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--accent);
}

.resource-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.meeting-card {
    border-left: 4px solid var(--accent);
}

.meeting-card.upcoming {
    border-left-color: #10b981;
    background: linear-gradient(to right, var(--accent-soft), var(--surface));
}

.announcement-list.standalone {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 900px;
}

.announcement.read {
    opacity: 0.78;
}

.announcement.unread {
    border-left: 4px solid var(--accent);
}

.announcement-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.announcement-head h2 {
    font-size: 1.15rem;
    margin: 4px 0;
}

.announcement-body {
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--text);
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.profile-avatar {
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent);
    margin-bottom: 16px;
}

.profile-avatar-frame {
    min-width: 120px;
    min-height: 120px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
}

.profile-avatar-frame .profile-avatar {
    margin-bottom: 0;
}

.avatar-placeholder.large {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--accent);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.profile-dl {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px 16px;
    font-size: 0.92rem;
    margin-bottom: 20px;
}

.profile-dl dt {
    font-weight: 600;
    color: var(--muted);
}

.profile-dl dd {
    margin: 0;
    color: var(--text);
}

/* ─── Topbar Profile Dropdown Flyout Card (Solid & Crisp) ─────────────── */
.profile-dropdown-wrap {
    position: relative;
    display: inline-flex;
}

button.profile-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px 4px 6px;
    border-radius: 9999px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

button.profile-chip:hover,
.profile-dropdown-wrap.is-open button.profile-chip {
    background: var(--surface-2);
    border-color: var(--accent);
    box-shadow: 0 4px 16px -2px rgba(107, 32, 215, 0.15);
    transform: translateY(-1px);
}

.profile-dropdown-chevron {
    width: 14px;
    height: 14px;
    color: var(--muted);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
    margin-left: 2px;
}

.profile-dropdown-wrap.is-open .profile-dropdown-chevron {
    transform: rotate(180deg);
    color: var(--accent);
}

/* ── Crisp & Solid Profile Popup Card (Zero background bleed) ── */
.profile-popup-card {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 340px;
    max-width: calc(100vw - 28px);
    background: var(--surface, #ffffff);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 20px 50px -10px rgba(107, 32, 215, 0.22),
                0 10px 24px -4px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.2s;
}

html[data-theme="dark"] .profile-popup-card {
    background: #171322;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 28px 70px -10px rgba(0, 0, 0, 0.75);
}

.profile-dropdown-wrap.is-open .profile-popup-card {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ── Popup Card Header ── */
.popup-card-header {
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.popup-avatar-ring {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    padding: 2.5px;
    background: linear-gradient(135deg, #8b5cf6, #ec4899, #3b82f6);
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3);
    flex-shrink: 0;
}

.popup-avatar-ring img,
.popup-avatar-ring .popup-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid var(--surface);
    box-sizing: border-box;
}

.popup-avatar-placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #8b5cf6, #6b20d7);
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
}

.popup-user-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.popup-user-name {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.popup-legal-name {
    margin: 2px 0 4px 0;
    font-size: 0.78rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popup-badge-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    margin-top: 4px;
}

/* ── ID & Email Chips Stack ── */
.popup-chips-stack {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.popup-info-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.82rem;
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.popup-info-chip:hover {
    background: var(--surface-3);
    border-color: var(--accent);
    color: var(--accent);
}

.popup-info-chip.copied {
    border-color: var(--success) !important;
    color: var(--success) !important;
    background: var(--success-soft) !important;
}

.popup-info-chip .chip-icon {
    display: flex;
    align-items: center;
    color: var(--muted);
    flex-shrink: 0;
}

.popup-info-chip .chip-icon svg {
    width: 14px;
    height: 14px;
}

.popup-info-chip .chip-content {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.popup-info-chip .chip-action {
    color: var(--muted);
    display: flex;
    align-items: center;
}

.popup-info-chip .chip-action svg {
    width: 13px;
    height: 13px;
}

/* ── Nav Items ── */
.popup-nav-section {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--surface);
}

.popup-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
    transition: all 0.15s ease;
}

.popup-nav-item:hover {
    background: var(--surface-2);
    transform: translateX(3px);
}

.popup-nav-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.popup-nav-item:nth-child(2) .popup-nav-icon {
    background: #fef3c7;
    color: #d97706;
}

.popup-nav-item:nth-child(3) .popup-nav-icon {
    background: #d1fae5;
    color: #059669;
}

html[data-theme="dark"] .popup-nav-item:nth-child(2) .popup-nav-icon {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

html[data-theme="dark"] .popup-nav-item:nth-child(3) .popup-nav-icon {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.popup-nav-icon svg {
    width: 17px;
    height: 17px;
}

.popup-nav-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.popup-nav-text strong {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.25;
}

.popup-nav-text small {
    font-size: 0.73rem;
    color: var(--muted);
    margin-top: 1px;
}

.popup-item-arrow {
    color: var(--muted);
    opacity: 0.5;
    width: 14px;
    height: 14px;
    transition: all 0.15s ease;
}

.popup-nav-item:hover .popup-item-arrow {
    opacity: 1;
    transform: translateX(3px);
    color: var(--accent);
}

/* ── Footer ── */
.popup-card-footer {
    padding: 10px 14px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}

.popup-logout-form {
    margin: 0;
}

.popup-logout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--danger, #ef4444);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.popup-logout-btn svg {
    width: 15px;
    height: 15px;
}

.popup-logout-btn:hover {
    background: var(--danger-soft, #fee2e2);
    border-color: var(--danger, #ef4444);
}

/* ─── Modern Clean Profile Styles ────────────────────────────────────── */
.profile-page-container {
    max-width: 1000px;
    margin: 0 auto 40px auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Top Profile Hero Banner ── */
.profile-hero-banner {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.hero-banner-content {
    padding: 26px 30px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.hero-avatar-wrap {
    position: relative;
    width: 88px;
    height: 88px;
    flex-shrink: 0;
}

.hero-avatar-ring {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #8b5cf6, #ec4899, #3b82f6);
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.hero-avatar-ring:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 22px rgba(139, 92, 246, 0.45);
}

.hero-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--surface);
    display: block;
    box-sizing: border-box;
}

.hero-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #8b5cf6, #6b20d7);
    color: #ffffff;
    font-size: 2.1rem;
    font-weight: 700;
    border: 2px solid var(--surface);
    box-sizing: border-box;
}

.hero-avatar-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #ffffff;
    border: 2px solid var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.hero-avatar-badge svg {
    width: 14px;
    height: 14px;
}

.hero-info-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.hero-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-display-name {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.role-badge {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 9999px;
    background: var(--accent-soft);
    color: var(--accent);
    white-space: nowrap;
    line-height: 1.2;
    vertical-align: middle;
}

.role-badge svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.status-pill {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 9999px;
    background: var(--surface-2);
    color: var(--text);
    white-space: nowrap;
    line-height: 1.2;
    vertical-align: middle;
}

.status-pill.status-active {
    background: var(--success-soft);
    color: var(--success);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    display: inline-block;
    flex-shrink: 0;
}

.hero-legal-name {
    margin: 0;
    font-size: 0.86rem;
    color: var(--muted);
    line-height: 1.4;
}

.hero-legal-name span {
    color: var(--text);
    font-weight: 600;
}

.hero-chips-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 0.82rem;
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.hero-chip:not(.hero-chip-muted):hover {
    background: var(--surface);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 2px 8px rgba(107, 32, 215, 0.12);
}

.hero-chip.copied {
    border-color: var(--success) !important;
    color: var(--success) !important;
    background: var(--success-soft) !important;
}

.hero-chip-muted {
    cursor: default;
}

.hero-chip-icon {
    display: flex;
    align-items: center;
    color: var(--muted);
}

.hero-chip-icon svg {
    width: 14px;
    height: 14px;
}

.hero-chip-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 500;
}

.hero-chip-val {
    font-weight: 600;
}

.hero-chip-copy {
    display: flex;
    align-items: center;
    color: var(--muted);
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.hero-chip:hover .hero-chip-copy {
    opacity: 1;
    color: var(--accent);
}

.hero-chip-copy svg {
    width: 12px;
    height: 12px;
}

@media (max-width: 768px) {
    .hero-banner-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 20px;
    }
}

/* ── Main Section Cards ── */
.profile-sections-stack {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.profile-section-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px);
    padding: 26px 30px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.section-title-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.section-title-icon svg {
    width: 18px;
    height: 18px;
}

.section-heading {
    margin: 0 0 3px 0;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--text);
}

.section-desc {
    margin: 0;
    font-size: 0.86rem;
    color: var(--muted);
    line-height: 1.45;
}

/* ── Clean Rows Key-Value List ── */
.clean-rows-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
}

.clean-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
}

.clean-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.clean-row-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
}

.clean-row-label strong {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.clean-row-label small {
    font-size: 0.8rem;
    color: var(--muted);
}

.clean-row-content {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.clean-value-text {
    font-size: 0.9rem;
    color: var(--text);
    text-align: right;
}

.clean-badge-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.86rem;
    font-weight: 600;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: 6px;
    color: var(--text);
    letter-spacing: 0.5px;
}

.inline-edit-form {
    width: 100%;
    max-width: 360px;
}

.inline-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.clean-input,
.clean-select,
.clean-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.88rem;
    font-family: inherit;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.clean-input:focus,
.clean-select:focus,
.clean-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.clean-textarea {
    resize: vertical;
}

/* ── Clean Forms & Tables ── */
.clean-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-top: 1px solid var(--border);
    padding-top: 18px;
}

.form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text);
}

.form-actions-bar {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.requests-history-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.sub-heading {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.clean-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.clean-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.86rem;
}

.clean-table th {
    padding: 10px 14px;
    background: var(--surface-2);
    font-weight: 600;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.clean-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.clean-table tr:last-child td {
    border-bottom: none;
}

.status-badge-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.pill-success {
    background: var(--success-soft);
    color: var(--success);
}

.pill-danger {
    background: var(--danger-soft);
    color: var(--danger);
}

.pill-pending {
    background: var(--warning-soft, #fef3c7);
    color: var(--warning, #b45309);
}

@media (max-width: 768px) {
    .profile-header-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .profile-section-card {
        padding: 20px;
    }

    .clean-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .clean-row-content {
        justify-content: flex-start;
        width: 100%;
    }

    .clean-value-text {
        text-align: left;
    }

    .inline-edit-form {
        max-width: 100%;
    }

    .form-row-2col {
        grid-template-columns: 1fr;
    }
}

/* ─── Profile Avatar Editable Frame ───────────────────────────────────── */
.profile-avatar-editable {
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.profile-avatar-editable:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2) !important;
}

.profile-avatar-editable:hover .avatar-hover-overlay {
    opacity: 1 !important;
}

.profile-avatar-editable:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* ─── Generic Cropper & Action Modals ─────────────────────────────────── */
.cropper-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.cropper-modal.is-open {
    display: flex;
    animation: cropperFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cropper-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 20, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    z-index: 1;
}

.cropper-modal-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 660px;
    max-height: 90vh;
    background: var(--surface, #ffffff);
    color: var(--text, #141c1a);
    border: 1px solid var(--border, #d2e0dc);
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cropperModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cropper-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2, #edf2f0);
}

.cropper-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--text);
}

.cropper-modal-title h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.cropper-modal-title svg {
    color: var(--accent);
    flex-shrink: 0;
}

.cropper-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cropper-modal-close:hover {
    background: var(--surface-3, #e2e9e7);
    color: var(--text);
}

.cropper-modal-body {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 22px;
    padding: 22px;
    overflow-y: auto;
    align-items: start;
    background: var(--surface);
}

/* Main Cropper Panel & Viewport */
.cropper-main-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.cropper-viewport-container {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    border: 2px solid var(--border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    background: #090d14;
}

.cropper-viewport {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: #0b0f15;
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 16px 16px;
    cursor: grab;
    user-select: none;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cropper-viewport.is-panning {
    cursor: grabbing;
}

#cropperSourceImg {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: none !important;
    max-height: none !important;
    pointer-events: none;
    user-select: none;
    transform-origin: center center;
    will-change: transform;
    transition: none;
}

.cropper-crop-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
    height: 240px;
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(9, 13, 20, 0.68);
    border: 2.5px solid rgba(255, 255, 255, 0.9);
    pointer-events: none;
    box-sizing: border-box;
}

.cropper-grid {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.35;
}

.cropper-grid span:nth-child(1) { position: absolute; left: 33.33%; top: 0; bottom: 0; width: 1px; background: #fff; }
.cropper-grid span:nth-child(2) { position: absolute; left: 66.66%; top: 0; bottom: 0; width: 1px; background: #fff; }
.cropper-grid span:nth-child(3) { position: absolute; top: 33.33%; left: 0; right: 0; height: 1px; background: #fff; }
.cropper-grid span:nth-child(4) { position: absolute; top: 66.66%; left: 0; right: 0; height: 1px; background: #fff; }

.cropper-hint-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
}

.cropper-hint-bar svg {
    color: var(--accent);
    flex-shrink: 0;
}

/* Side Panel Controls & Live Preview */
.cropper-side-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.cropper-live-preview-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}

.cropper-live-preview-box label {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--muted);
    margin: 0;
}

.cropper-preview-avatar {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: #090d14;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cropperPreviewCanvas {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
}

.cropper-controls {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cropper-control-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cropper-zoom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.cropper-zoom-badge {
    font-size: 0.74rem;
    font-weight: 700;
    background: var(--accent-soft);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: 9999px;
}

.cropper-zoom-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

#cropperZoomSlider {
    flex: 1;
    accent-color: var(--accent);
    height: 6px;
    cursor: pointer;
    background: var(--surface-3);
    border-radius: 3px;
}

#cropperZoomOut,
#cropperZoomIn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.15s ease;
}

#cropperZoomOut:hover,
#cropperZoomIn:hover {
    background: var(--surface-3);
    border-color: var(--accent);
    color: var(--accent);
}

.cropper-control-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

#cropperRotateBtn,
#cropperResetBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
}

#cropperRotateBtn:hover,
#cropperResetBtn:hover {
    background: var(--surface-3);
    border-color: var(--accent);
    color: var(--accent);
}

/* Modal Footer */
.cropper-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

#cropperApplyBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.cropper-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cropperSpin 0.6s linear infinite;
    display: inline-block;
}

/* ─── Avatar Action Choice Modal ─────────────────────────────────────── */
.avatar-action-card {
    max-width: 400px;
}

.avatar-action-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: var(--surface);
}

.avatar-action-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: all 0.18s ease;
    width: 100%;
    font-family: inherit;
}

.avatar-action-btn:hover {
    border-color: var(--accent);
    background: var(--surface-2);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.avatar-action-btn svg {
    flex-shrink: 0;
}

.avatar-action-upload svg {
    color: var(--accent);
}

.avatar-action-remove:hover {
    border-color: var(--danger);
    background: var(--danger-soft, #fce8e9);
}

.avatar-action-remove svg {
    color: var(--danger);
}

.avatar-action-btn strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.avatar-action-btn small {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 400;
}

/* ─── Confirm Remove Modal ───────────────────────────────────────────── */
.confirm-remove-card {
    max-width: 400px;
}

.confirm-remove-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 20px;
    background: var(--surface);
    gap: 10px;
}

.confirm-remove-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--danger-soft);
    color: var(--danger);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.confirm-remove-content h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
}

.confirm-remove-content p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.45;
}

.confirm-remove-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
}

/* Animations */
@keyframes cropperModalPop {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes cropperFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Mobile Responsive */
@media (max-width: 640px) {
    .cropper-modal {
        padding: 12px;
    }
    .cropper-modal-body {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }
    .cropper-side-panel {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .cropper-live-preview-box {
        width: 100%;
        flex-direction: row;
        justify-content: space-around;
    }
    .cropper-controls {
        width: 100%;
    }
}

/* ─── Reduced Motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .sidebar,
    .app-frame,
    .desktop-collapse-btn,
    .desktop-collapse-btn .collapse-icon,
    .desktop-collapse-btn .venom-glow,
    .mobile-menu,
    .mobile-menu .ui-icon,
    .topbar,
    .global-search,
    .nav-link,
    .brand-text,
    .workspace-tabs a,
    .course-card,
    .btn {
        transition: none !important;
        animation: none !important;
    }
}

/* --- Phase 3 UI Hardening --- */
.js-search-input {
    transition: box-shadow 0.2s, border-color 0.2s;
}

.js-search-input:focus {
    box-shadow: 0 0 0 3px var(--accent-soft);
    border-color: var(--accent);
    outline: none;
}

button.loading {
    position: relative;
    pointer-events: none;
}

.confirm-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.confirm-dialog-content {
    animation: dialogIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dialogIn {
    0% {
        transform: translateY(10px) scale(0.98);
        opacity: 0;
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Mobile table card layout */
@media (max-width: 600px) {
    .table-responsive {
        border: 0;
    }

    .table-responsive table {
        display: block;
        width: 100%;
    }

    .table-responsive thead {
        display: none;
    }

    .table-responsive tbody {
        display: block;
        width: 100%;
    }

    .table-responsive tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 1rem;
        background: var(--surface-1);
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        padding: 0.75rem;
    }

    .table-responsive td {
        display: grid;
        grid-template-columns: 120px 1fr;
        padding: 0.5rem 0;
        border: none;
        align-items: center;
    }

    .table-responsive td:before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .table-responsive td:not(:last-child) {
        border-bottom: 1px solid var(--border-color);
    }
}

/* ============================================================== */
/* MILESTONE 2: Dashboards, Forms, Tables, Cards                  */
/* ============================================================== */

/* Phase 6: Dashboards */
.metric-card {
    padding: var(--space-5) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
}

.metric-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow) !important;
}

.dashboard-bento {
    gap: var(--space-6) !important;
}

/* Phase 7: Forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea,
.form-control {
    border-radius: var(--radius) !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    padding: var(--space-2) var(--space-3) !important;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus,
.form-control:focus {
    background: var(--surface) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    outline: none !important;
}

/* Phase 8: Tables */
.table,
table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.table th,
table th {
    background: var(--surface-2) !important;
    color: var(--muted) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
    padding: var(--space-3) var(--space-4) !important;
    border-bottom: 1px solid var(--border) !important;
}

.table td,
table td {
    padding: var(--space-3) var(--space-4) !important;
    border-bottom: 1px solid var(--border) !important;
    transition: background var(--transition-fast) !important;
}

.table tbody tr:hover td,
table tbody tr:hover td {
    background: var(--surface-2) !important;
}

/* Phase 9: Cards and Content */
.course-card,
.metric-card,
.dashboard-main>section,
.events-card {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    transition: transform var(--transition-base), box-shadow var(--transition-base) !important;
}

.course-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-md) !important;
}

.content-section {
    margin-bottom: var(--space-8) !important;
}

/* ============================================================== */
/* MILESTONE 3: Dialogs, Auth, Interactions, Accessibility        */
/* ============================================================== */

/* Phase 10: Dialogs & Dropdowns */
dialog,
.modal {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    animation: modal-enter var(--transition-base) forwards;
}

@keyframes modal-enter {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

dialog::backdrop,
.modal-backdrop {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(4px) !important;
}

.dropdown-menu {
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
}

.dropdown-item {
    transition: background var(--transition-fast) !important;
}

.dropdown-item:hover {
    background: var(--surface-2) !important;
}

/* Phase 11: Authentication Pages */
.auth-container,
.login-box {
    background: var(--surface) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: var(--space-8) !important;
    border: 1px solid var(--border) !important;
}

/* Phase 12: Micro-Interactions */
.btn,
button {
    border-radius: var(--radius) !important;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.btn:active,
button:active {
    transform: scale(0.97) !important;
}

a {
    transition: color var(--transition-fast) !important;
}

/* Phase 13: Accessibility Pass */
*:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    border-color: var(--accent) !important;
}

/* ============================================================== */
/* MILESTONE 4: Responsive Adjustments & Polish                   */
/* ============================================================== */

/* Phase 14: Responsive Mobile Layouts */
@media (max-width: 768px) {

    /* Stack bento boxes and grids */
    .dashboard-bento,
    .metric-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-4) !important;
    }

    /* Make tables horizontally scrollable if not already */
    .table-responsive {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Reduce heavy paddings on auth container */
    .auth-container,
    .login-box {
        padding: var(--space-4) !important;
        border-radius: var(--radius) !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
    }

    /* Condense general content spacing */
    .content-section {
        margin-bottom: var(--space-6) !important;
    }

    /* Modal adjustments */
    dialog,
    .modal {
        width: 90% !important;
        max-width: none !important;
        padding: var(--space-4) !important;
    }
}

/* ==============================================================
   UI modernization consolidation
   This final layer normalizes the legacy theme generations above.
   ============================================================== */
:root {
    color-scheme: light;
    --bg: #f7f7fa;
    --surface: #ffffff;
    --surface-2: #f2f1f6;
    --surface-3: #e8e5ed;
    --text: #211d27;
    --muted: #655e6d;
    --border: #ddd9e3;
    --accent: #742a82;
    --accent-strong: #581e64;
    --accent-soft: #f3eaf5;
    --danger: #b4233b;
    --danger-soft: #fcecef;
    --warning: #9a5b08;
    --warning-soft: #fff3dc;
    --success: #177245;
    --success-soft: #e7f6ed;
    --info: #245da8;
    --info-soft: #eaf1fb;
    --shadow-sm: 0 1px 2px rgba(45, 28, 51, .05);
    --shadow: 0 10px 28px rgba(45, 28, 51, .08);
    --shadow-md: 0 18px 42px rgba(45, 28, 51, .11);
    --shadow-lg: 0 28px 68px rgba(32, 18, 38, .16);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --control-height: 44px;
    --content-width: 1500px;
    --transition-fast: 150ms cubic-bezier(.2, .8, .2, 1);
    --transition-base: 240ms cubic-bezier(.2, .8, .2, 1);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #121015;
    --surface: #1a171e;
    --surface-2: #242028;
    --surface-3: #302a35;
    --text: #f5f1f7;
    --muted: #b8afbd;
    --border: #3a3440;
    --accent: #b768c0;
    --accent-strong: #d28bd9;
    --accent-soft: #36213b;
    --danger: #ff8394;
    --danger-soft: #421f27;
    --warning: #f1bd68;
    --warning-soft: #3f321d;
    --success: #71d19b;
    --success-soft: #193b2a;
    --info: #82b5f4;
    --info-soft: #1d324d;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .28);
    --shadow: 0 12px 30px rgba(0, 0, 0, .28);
    --shadow-md: 0 20px 48px rgba(0, 0, 0, .35);
    --shadow-lg: 0 30px 72px rgba(0, 0, 0, .48);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        color-scheme: dark;
        --bg: #121015;
        --surface: #1a171e;
        --surface-2: #242028;
        --surface-3: #302a35;
        --text: #f5f1f7;
        --muted: #b8afbd;
        --border: #3a3440;
        --accent: #b768c0;
        --accent-strong: #d28bd9;
        --accent-soft: #36213b;
        --danger: #ff8394;
        --danger-soft: #421f27;
        --warning: #f1bd68;
        --warning-soft: #3f321d;
        --success: #71d19b;
        --success-soft: #193b2a;
        --info: #82b5f4;
        --info-soft: #1d324d;
    }
}

html {
    min-width: 0;
    background: var(--bg);
    scroll-behavior: smooth;
}

body {
    min-width: 0;
    background: var(--bg) !important;
    color: var(--text);
    font-family: PioneerSans, "Segoe UI", Arial, sans-serif !important;
    font-size: 15px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font: inherit;
}

.main-content {
    width: min(100%, var(--content-width));
    margin-inline: auto;
}

.venom-glow {
    display: none !important;
}

.collapse-icon,
.theme-icon,
.bell-icon {
    width: 20px;
    height: 20px;
}

.desktop-collapse-btn,
.icon-button,
.password-toggle,
.alert [data-dismiss] {
    min-width: var(--control-height);
    min-height: var(--control-height);
}

.btn {
    min-height: var(--control-height) !important;
    border-radius: var(--radius) !important;
    padding: 10px 16px !important;
    box-shadow: none !important;
}

.btn:hover {
    transform: translateY(-1px) !important;
}

.btn:active {
    transform: translateY(0) scale(.98) !important;
}

.btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

.btn-primary:hover {
    background: var(--accent-strong) !important;
    border-color: var(--accent-strong) !important;
    box-shadow: none !important;
}

.btn.loading {
    opacity: .72;
    cursor: wait;
}

.btn.loading::after {
    content: "";
    width: 15px;
    height: 15px;
    margin-left: 9px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ui-spin .7s linear infinite;
}

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

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
    min-height: var(--control-height) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

textarea {
    min-height: 120px !important;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 86%, transparent);
    opacity: 1;
}

label {
    color: var(--text);
}

.auth-page {
    width: 100%;
    min-height: 100dvh;
    grid-template-columns: minmax(330px, 44%) minmax(440px, 56%);
    background: var(--bg);
}

.auth-brand {
    min-height: 100dvh;
    padding: clamp(36px, 5vw, 72px) !important;
    background: linear-gradient(150deg, #211226 0%, #4d1c58 100%) !important;
    color: #fbf7fc;
}

.auth-brand::after {
    width: min(58vw, 720px);
    height: min(58vw, 720px);
    right: -35%;
    bottom: -42%;
    border-color: rgba(255, 255, 255, .065);
}

.auth-brand img {
    width: clamp(96px, 11vw, 150px);
    height: auto;
    filter: none;
    border-radius: 26%;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .25);
}

.auth-brand h1 {
    max-width: 11ch;
    margin: 18px 0 16px;
    font-size: clamp(2.4rem, 4.5vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.auth-brand p {
    color: #e2d5e6;
    font-size: clamp(.95rem, 1.3vw, 1.08rem);
}

.auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(28px, 6vw, 80px);
    background: var(--bg);
}

.auth-card {
    width: min(480px, 100%);
    padding: clamp(26px, 4vw, 42px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.auth-card-heading {
    margin-bottom: 26px;
}

.auth-card-heading h2 {
    margin: 5px 0 8px;
    font-size: clamp(1.7rem, 3vw, 2rem);
    letter-spacing: -.025em;
}

.auth-card-heading p {
    margin: 0;
    color: var(--muted);
}

.auth-kicker {
    color: var(--accent-strong);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.auth-form {
    gap: 8px !important;
}

.auth-form>label,
.field-label-row label {
    margin-top: 8px;
    font-size: .82rem;
    font-weight: 700;
}

.field-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
}

.field-label-row a,
.auth-help a {
    color: var(--accent-strong);
    font-size: .8rem;
    font-weight: 700;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.password-field {
    position: relative;
}

.password-field input {
    width: 100%;
    padding-right: 88px !important;
}

.password-toggle {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding-inline: 11px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
}

.password-toggle svg {
    width: 17px;
    height: 17px;
}

.auth-form .btn {
    margin-top: 12px;
}

.auth-divider {
    margin: 24px 0 18px;
}

.config-note {
    display: block;
    margin-top: 10px;
    color: var(--muted);
    line-height: 1.45;
}

.alert {
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    transition: opacity var(--transition-base), transform var(--transition-base) !important;
}

.alert.is-leaving {
    opacity: 0;
    transform: translateY(-8px);
}

.alert [data-dismiss] {
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: currentColor;
    cursor: pointer;
}

.alert [data-dismiss] svg {
    width: 18px;
    height: 18px;
}

.confirm-dialog {
    width: min(440px, calc(100vw - 32px));
    max-width: none !important;
    padding: 0 !important;
    overflow: hidden;
}

.confirm-dialog-content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    padding: 24px;
    background: var(--surface);
}

.confirm-dialog-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    background: var(--warning-soft);
    color: var(--warning);
}

.confirm-dialog-icon svg {
    width: 21px;
    height: 21px;
}

.confirm-dialog-copy h2 {
    margin: 0 0 6px;
    font-size: 1.1rem;
}

.confirm-dialog-copy p {
    margin: 0;
    color: var(--muted);
}

.confirm-dialog-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

.empty-state {
    padding: clamp(30px, 5vw, 54px) 24px !important;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.empty-mark {
    display: grid !important;
    place-items: center;
    width: 50px !important;
    height: 50px !important;
    margin: 0 auto 14px;
    border-radius: var(--radius) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-strong);
}

.empty-mark::before,
.empty-mark::after {
    content: none !important;
}

.empty-mark svg {
    width: 24px;
    height: 24px;
}

.data-table-wrap {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--surface);
}

.data-table-wrap table {
    min-width: 680px;
    margin: 0 !important;
}

.data-table-wrap th {
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
}

.data-table-wrap td {
    vertical-align: top;
}

.course-tabs,
.workspace-tabs {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.course-tabs a,
.workspace-tabs a,
.filter {
    min-height: var(--control-height);
    white-space: nowrap;
}

*:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

@media (max-width: 900px) {
    .auth-page {
        display: block;
    }

    .auth-brand {
        min-height: auto;
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: center;
        gap: 22px;
        padding: max(24px, env(safe-area-inset-top)) clamp(20px, 5vw, 44px) 24px !important;
    }

    .auth-brand::after {
        display: none;
    }

    .auth-brand img {
        width: 92px;
    }

    .auth-brand h1 {
        max-width: none;
        margin: 5px 0 7px;
        font-size: clamp(1.65rem, 5vw, 2.3rem);
    }

    .auth-brand p {
        margin: 0;
        font-size: .9rem;
    }

    .auth-panel {
        padding: clamp(24px, 6vw, 52px) 20px max(36px, env(safe-area-inset-bottom));
    }

    .auth-card {
        padding: clamp(24px, 5vw, 36px);
    }
}

@media (max-width: 620px) {
    .auth-brand {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 16px;
        background: var(--surface) !important;
        color: var(--text);
        border-bottom: 1px solid var(--border);
    }

    .auth-brand img {
        width: 72px;
        box-shadow: var(--shadow);
    }

    .auth-brand div>span {
        color: var(--accent-strong);
    }

    .auth-brand h1 {
        font-size: clamp(1.45rem, 7vw, 1.8rem);
    }

    .auth-brand p {
        display: none;
    }

    .auth-panel {
        padding-inline: 16px;
    }

    .auth-card {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .page-heading,
    .dashboard-intro,
    .section-title {
        align-items: flex-start !important;
    }

    .heading-actions,
    .page-heading .heading-actions .btn {
        width: 100%;
    }

    .confirm-dialog-content {
        padding: 20px;
    }

    .confirm-dialog-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 380px) {
    .auth-brand {
        grid-template-columns: 62px minmax(0, 1fr);
        padding-inline: 14px !important;
    }

    .auth-brand img {
        width: 62px;
    }

    .field-label-row {
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

@media (forced-colors: active) {

    .btn,
    .nav-link,
    .status-label,
    input,
    select,
    textarea {
        border: 1px solid ButtonText !important;
    }
}

.nav-group {
    margin: 2px 0;
}

.nav-group>summary {
    list-style: none;
    cursor: pointer;
}

.nav-group>summary::-webkit-details-marker {
    display: none;
}

.nav-chevron {
    width: 16px;
    height: 16px;
    margin-left: auto;
    transition: transform var(--transition-fast);
}

.nav-group[open] .nav-chevron {
    transform: rotate(180deg);
}

.nav-sublist {
    display: grid;
    gap: 2px;
    margin: 3px 0 8px 46px;
    padding-left: 12px;
    border-left: 1px solid var(--border);
}

.nav-sublink {
    min-height: 36px;
    display: flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
}

.nav-sublink:hover,
.nav-sublink.active {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

html.sidebar-collapsed .nav-group,
body.sidebar-collapsed .nav-group,
.sidebar.collapsed .nav-group {
    width: 100%;
}

html.sidebar-collapsed .nav-group>summary,
body.sidebar-collapsed .nav-group>summary,
.sidebar.collapsed .nav-group>summary {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    min-width: 42px !important;
    margin-inline: auto;
}

html.sidebar-collapsed .nav-group>summary>span:nth-child(2),
html.sidebar-collapsed .nav-group .nav-chevron,
html.sidebar-collapsed .nav-sublist,
body.sidebar-collapsed .nav-group>summary>span:nth-child(2),
body.sidebar-collapsed .nav-group .nav-chevron,
body.sidebar-collapsed .nav-sublist,
.sidebar.collapsed .nav-group>summary>span:nth-child(2),
.sidebar.collapsed .nav-group .nav-chevron,
.sidebar.collapsed .nav-sublist {
    display: none !important;
}

.mobile-nav a.active {
    color: var(--accent-strong) !important;
}

.certificate-card {
    border-color: color-mix(in srgb, var(--accent) 25%, var(--border)) !important;
    background: linear-gradient(145deg, var(--surface), var(--accent-soft)) !important;
}

.certificate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.section-divider {
    margin: 30px 0;
    border: 0;
    border-top: 1px solid var(--border);
}

.spaced-form,
.spaced-table,
.analytics-panel {
    margin-top: 20px !important;
}

.single-column {
    grid-template-columns: minmax(0, 1fr) !important;
}

.analytics-summary {
    margin-bottom: 30px;
}

.grade-chart {
    display: flex;
    align-items: flex-end;
    gap: clamp(10px, 3vw, 24px);
    height: 180px;
    margin-top: 10px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}

.grade-chart-item {
    height: 100%;
    min-width: 34px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.grade-chart-bar {
    width: min(42px, 70%);
    height: var(--bar-height);
    min-height: 3px;
    border-radius: 7px 7px 2px 2px;
    background: var(--accent);
}

.grade-chart-item span {
    margin-top: 9px;
    font-weight: 700;
}

.grade-chart-item small,
.grading-rubric small,
.rubric-score span {
    color: var(--muted);
}

.grading-rubric {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.grading-rubric h4 {
    margin: 0 0 12px;
}

.grading-rubric-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}

.grading-rubric-row>div:first-child {
    min-width: 0;
    flex: 1;
}

.grading-rubric-row small {
    display: block;
}

.rubric-score {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rubric-score input {
    width: 82px;
}

.narrow-panel {
    max-width: 660px;
    margin-inline: auto;
}

.list-search {
    margin-bottom: 16px;
}

.list-search input {
    width: 100%;
}

.centered-button {
    text-align: center;
}

.resource-type {
    margin-right: 8px;
}

.resource-type.syllabus {
    background: var(--info-soft) !important;
    color: var(--info) !important;
}

.resource-type.lesson-plan {
    background: var(--accent-soft) !important;
    color: var(--accent-strong) !important;
}

.resource-type.classwork {
    background: var(--success-soft) !important;
    color: var(--success) !important;
}

/* Standalone announcements use a header/body document structure, not the
   compact two-column dashboard announcement pattern defined earlier. */
.announcement-list.standalone {
    width: 100%;
    max-width: none;
}

.announcement-list.standalone .announcement {
    display: block !important;
    grid-template-columns: none !important;
    min-width: 0;
}

.announcement-list.standalone .announcement-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
    margin-bottom: 14px;
}

.announcement-list.standalone .announcement-head>div,
.announcement-list.standalone .announcement-body {
    min-width: 0;
}

.announcement-list.standalone .announcement-head h2 {
    margin: 7px 0 5px;
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.announcement-list.standalone .announcement-head small {
    display: block;
    line-height: 1.5;
}

.announcement-list.standalone .announcement-head form {
    flex: 0 0 auto;
}

.announcement-list.standalone .announcement-body {
    max-width: 78ch;
    margin: 0 !important;
    color: var(--text) !important;
}

@media (max-width: 620px) {

    .course-grid,
    .course-grid.large {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .grading-rubric-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .rubric-score {
        width: 100%;
    }

    .rubric-score input {
        flex: 1;
    }

    .announcement-list.standalone .announcement {
        padding: 16px !important;
    }

    .announcement-list.standalone .announcement-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .announcement-list.standalone .announcement-head form,
    .announcement-list.standalone .announcement-head .btn {
        width: 100%;
    }
}

/* Campus launch stabilization: calendar, attendance and low-jank controls */
html {
    scroll-behavior: auto;
}

.nav-link,
.filter,
.btn,
.icon-button,
.calendar-event-chip {
    transition-property: background-color, border-color, color, box-shadow, opacity, transform !important;
    transition-duration: var(--transition-fast) !important;
}

.calendar-controls,
.calendar-view-switch,
.calendar-month-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.calendar-controls {
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.calendar-view-switch .filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.calendar-month-nav strong {
    min-width: 150px;
    text-align: center;
    font-size: 1rem;
}

.calendar-board {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.calendar-weekdays,
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.calendar-weekdays span {
    padding: 10px 12px;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.calendar-day {
    min-width: 0;
    min-height: 132px;
    padding: 9px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.calendar-day:nth-child(7n) {
    border-right: 0;
}

.calendar-day.is-outside {
    background: color-mix(in srgb, var(--surface-2) 65%, var(--surface));
    color: var(--muted);
}

.calendar-day>header {
    display: flex;
    justify-content: flex-end;
    min-height: 28px;
}

.calendar-day>header time {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    font-size: .82rem;
    font-weight: 700;
}

.calendar-day.is-today>header time {
    background: var(--accent);
    color: #fff;
}

.calendar-mobile-weekday {
    display: none;
}

.calendar-day-events {
    display: grid;
    gap: 5px;
}

.calendar-event-chip {
    display: grid;
    gap: 1px;
    min-width: 0;
    padding: 6px 7px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--text);
    text-decoration: none;
}

.calendar-event-chip:hover,
.calendar-event-chip:focus-visible {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.calendar-event-chip time {
    color: var(--muted);
    font-size: .68rem;
}

.calendar-event-chip strong {
    overflow: hidden;
    font-size: .76rem;
    line-height: 1.25;
    text-overflow: ellipsis;
}

.calendar-event-chip.type-assignment {
    background: var(--warning-soft);
}

.calendar-event-chip.type-quiz {
    background: var(--info-soft);
}

.calendar-event-chip.type-class,
.calendar-event-chip.type-meeting {
    background: var(--success-soft);
}

a.calendar-row {
    grid-template-columns: 58px 100px minmax(0, 1fr) 20px;
    color: var(--text);
    text-decoration: none;
}

a.calendar-row:hover,
a.calendar-row:focus-visible {
    background: var(--surface-2);
}

.calendar-row-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.calendar-row-copy strong,
.calendar-row-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-row-arrow {
    width: 18px;
    height: 18px;
    color: var(--muted);
}

.calendar-event-detail {
    max-width: 760px;
    padding: clamp(22px, 4vw, 36px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.calendar-event-detail dl {
    display: grid;
    gap: 0;
    margin: 22px 0;
}

.calendar-event-detail dl>div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}

.calendar-event-detail dt {
    color: var(--muted);
    font-weight: 600;
}

.calendar-event-detail dd {
    margin: 0;
    font-weight: 650;
}

.attendance-register-heading {
    align-items: flex-start;
    margin-top: 18px;
}

.attendance-register.is-finalized>div {
    grid-template-columns: minmax(0, 1fr) auto;
}

@media (min-width: 1100px) {
    .workspace-tabs {
        gap: 4px !important;
        padding-inline: 6px !important;
    }

    .workspace-tabs a {
        padding-inline: clamp(10px, 1vw, 15px) !important;
        font-size: .84rem !important;
    }
}

@media (max-width: 780px) {

    .calendar-controls,
    .calendar-month-nav {
        align-items: stretch;
    }

    .calendar-controls {
        display: grid;
    }

    .calendar-month-nav {
        display: grid;
        grid-template-columns: 44px 1fr auto 44px;
    }

    .calendar-month-nav strong {
        min-width: 0;
        align-self: center;
    }

    .calendar-board {
        overflow-x: auto;
    }

    .calendar-weekdays,
    .calendar-grid {
        min-width: 760px;
    }

    .calendar-event-detail dl>div {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

/* Teaching authoring and lesson-plan workspace refinement */
.lesson-plans-layout,
.content-builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 380px);
    gap: 28px;
    align-items: start;
}

.lesson-plans-library,
.content-builder {
    min-width: 0;
}

.lesson-plans-title {
    margin-bottom: 16px;
}

.lesson-plans-title p {
    margin: 3px 0 0;
    color: var(--muted);
}

.lesson-plan-list {
    display: grid;
    gap: 16px;
}

.lesson-plan-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 12px 32px rgba(55, 32, 81, .045);
}

.lesson-plan-card-header {
    display: grid;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
}

.lesson-plan-identity {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.lesson-plan-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.lesson-plan-icon .ui-icon {
    width: 21px;
    height: 21px;
}

.lesson-plan-identity h3 {
    margin: 0 0 7px;
    font-size: 1.08rem;
    line-height: 1.35;
}

.lesson-plan-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 14px;
    color: var(--muted);
    font-size: .78rem;
}

.lesson-plan-meta>span:not(.status-label) {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.lesson-plan-meta .ui-icon {
    width: 15px;
    height: 15px;
}

.lesson-plan-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    margin-left: 56px;
}

.lesson-plan-actions form {
    margin: 0;
}

.btn-danger-outline {
    border-color: color-mix(in srgb, var(--danger) 32%, var(--border));
    background: transparent;
    color: var(--danger);
}

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

.lesson-plan-description {
    max-width: 76ch;
    padding: 0 24px 22px 80px;
    color: var(--text);
    font-size: .94rem;
    line-height: 1.65;
}

.lesson-plan-outcomes {
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--accent-soft) 16%, var(--surface));
}

.lesson-plan-outcomes summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 24px;
    cursor: pointer;
    list-style: none;
    color: var(--accent-strong);
    font-size: .86rem;
    font-weight: 750;
}

.lesson-plan-outcomes summary::-webkit-details-marker {
    display: none;
}

.lesson-plan-outcomes summary span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lesson-plan-outcomes summary .ui-icon {
    width: 18px;
    height: 18px;
}

.lesson-plan-outcomes summary small {
    color: var(--muted);
    font-weight: 600;
}

.lesson-plan-outcomes>div {
    max-width: 76ch;
    padding: 2px 24px 22px;
    color: var(--text);
    font-size: .92rem;
    line-height: 1.68;
}

.lesson-plan-composer,
.section-create-panel {
    position: sticky;
    top: 96px;
}

.lesson-plan-composer>h2,
.section-create-panel>h2 {
    margin: 6px 0 7px;
}

.lesson-plan-composer>p,
.section-create-panel>p {
    margin: 0 0 22px;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.55;
}

.lesson-plan-composer input[type="file"] {
    min-height: 52px;
    padding: 6px;
    color: var(--muted);
}

.lesson-plan-composer input[type="file"]::file-selector-button {
    min-height: 38px;
    margin-right: 10px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.content-module-list {
    gap: 18px;
}

.content-module {
    border-radius: 22px;
    box-shadow: 0 12px 32px rgba(55, 32, 81, .04);
}

.content-module>summary {
    padding: 21px 23px;
}

.content-module>summary span {
    display: grid;
    gap: 4px;
}

.content-module>summary small {
    width: max-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--success-soft);
    color: var(--success);
    font-size: .67rem;
    font-weight: 750;
    text-transform: capitalize;
}

.content-item-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 16px 22px;
}

.content-item-row>span:nth-child(2) {
    min-width: 0;
}

.content-item-row>span:nth-child(2) small {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 5px;
}

.content-item-row>span:nth-child(2) small span {
    position: relative;
}

.content-item-row>span:nth-child(2) small span+span:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -7px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
}

.content-item-actions,
.section-builder-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.content-item-actions form,
.section-builder-actions form {
    margin: 0;
}

.section-builder-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.section-builder-toolbar strong {
    color: var(--muted);
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.section-builder-toolbar form {
    margin: 0;
}

.content-item-form {
    display: block !important;
    grid-template-columns: none !important;
    align-items: initial !important;
    gap: 0 !important;
    padding: 22px !important;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: color-mix(in srgb, var(--accent-soft) 14%, var(--surface));
}

.content-item-form-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr);
    gap: 20px;
    align-items: end;
    margin-bottom: 18px;
}

.content-item-form-heading h3 {
    margin: 5px 0 0;
    font-size: 1rem;
}

.content-item-form-heading p {
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.5;
}

.content-item-fields {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 14px;
}

.content-item-fields label {
    display: grid;
    gap: 7px;
    min-width: 0;
    font-size: .76rem;
    font-weight: 750;
}

.content-item-body,
.content-item-url {
    grid-column: 1 / -1;
}

.content-item-fields input,
.content-item-fields select,
.content-item-fields textarea {
    width: 100%;
    min-width: 0;
}

.content-item-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.content-item-options>div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.content-item-options .check-row {
    display: flex;
    gap: 9px;
    margin: 0;
}

@media (max-width: 1100px) {

    .lesson-plans-layout,
    .content-builder-layout {
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 20px;
    }
}

@media (min-width: 861px) and (max-width: 1450px) {
    .workspace-tabs {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        overflow-x: visible;
    }

    .workspace-tabs a {
        min-width: 0;
        text-align: center;
    }
}

@media (max-width: 920px) {

    .lesson-plans-layout,
    .content-builder-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .lesson-plan-composer,
    .section-create-panel {
        position: static;
    }
}

@media (max-width: 620px) {
    .lesson-plan-card-header {
        display: grid;
        padding: 19px;
    }

    .lesson-plan-actions,
    .lesson-plan-actions form,
    .lesson-plan-actions .btn {
        width: 100%;
    }

    .lesson-plan-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-left: 0;
    }

    .lesson-plan-description {
        padding: 0 19px 19px;
    }

    .lesson-plan-outcomes summary,
    .lesson-plan-outcomes>div {
        padding-left: 19px;
        padding-right: 19px;
    }

    .content-item-row {
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 15px 17px;
    }

    .content-item-row form {
        grid-column: auto;
    }

    .content-item-actions {
        grid-column: 2;
        flex-wrap: wrap;
    }

    .section-builder-toolbar,
    .content-item-options,
    .content-item-form-heading {
        align-items: stretch;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .content-item-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .content-item-fields>* {
        grid-column: 1;
    }

    .content-item-options .btn {
        width: 100%;
    }
}

/* Help Page Styles */
.help-container {
    max-width: 900px;
    margin: 0 auto;
}

.help-search {
    margin-bottom: 40px;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper .search-icon {
    position: absolute;
    left: 16px;
    color: var(--muted);
    display: grid;
    place-items: center;
}

.search-input-wrapper input {
    width: 100%;
    padding: 18px 24px 18px 52px;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 1.5);
    background: var(--surface);
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.search-input-wrapper input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 0 0 4px var(--accent-soft);
    transform: translateY(-2px);
}

.help-sections {
    display: grid;
    gap: 40px;
}

.help-category {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 1.5);
    padding: 28px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.help-category:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.category-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.category-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent) 20%, transparent));
    color: var(--accent-strong);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.5);
}

.category-header h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.help-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

@media (max-width: 768px) {
    .help-grid {
        grid-template-columns: 1fr;
    }
}

.help-grid details {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    overflow: hidden;
    margin: 0;
    transition: all 0.3s ease;
}

.help-grid details:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.help-grid details[open] {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.help-grid summary {
    padding: 18px 20px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.help-grid summary::-webkit-details-marker {
    display: none;
}

.help-grid summary::after {
    content: "+";
    font-size: 1.4rem;
    color: var(--muted);
    font-weight: 400;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
    display: inline-block;
}

.help-grid details[open] summary::after {
    content: "+";
    transform: rotate(45deg);
    color: var(--accent-strong);
}

.help-grid summary:hover {
    background: color-mix(in srgb, var(--text) 3%, var(--surface-2));
}

.help-grid details[open] summary:hover {
    background: var(--surface);
}

.details-content {
    padding: 0 20px 20px;
    color: var(--muted);
    line-height: 1.6;
    animation: fadeSlideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform-origin: top;
}

@keyframes fadeSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-10px) scaleY(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

.details-content p {
    margin: 0;
}

.help-contact-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent) 15%, transparent));
    border-radius: calc(var(--radius) * 1.5);
    padding: 32px 40px;
    margin-top: 32px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

.help-contact-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%);
    pointer-events: none;
}

.help-contact-card .contact-info {
    position: relative;
    z-index: 1;
}

.help-contact-card .contact-info h3 {
    margin: 0 0 8px 0;
    color: var(--accent-strong);
    font-size: 1.35rem;
    font-weight: 700;
}

.help-contact-card .contact-info p {
    margin: 0;
    color: color-mix(in srgb, var(--accent-strong) 80%, transparent);
    font-size: 1.05rem;
}

.help-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 0;
    cursor: pointer;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

.help-btn:hover {
    background: var(--accent-strong);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent);
}

@media (max-width: 640px) {
    .help-contact-card {
        flex-direction: column;
        text-align: center;
        gap: 24px;
        padding: 32px 24px;
    }
}
/* Auth pages (Rich Look) */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90vh;
    padding: 24px;
    background: linear-gradient(135deg, #170c3d, #2a1b54, #170c3d);
    position: relative;
    overflow: hidden;
}

.login-page::before {
    content: '';
    position: absolute;
    width: 150vw;
    height: 150vw;
    background: radial-gradient(circle, rgba(144, 97, 249, 0.15) 0%, transparent 60%);
    top: -50vw;
    left: -25vw;
    pointer-events: none;
    animation: authPulse 15s ease-in-out infinite alternate;
}

@keyframes authPulse {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.1) translate(5%, 5%); }
}

.login-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 48px 40px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2), 
                inset 0 1px 0 rgba(255,255,255,0.5);
    position: relative;
    z-index: 1;
    animation: authSlideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes authSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.login-brand {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo {
    max-width: 140px;
    height: auto;
    margin-bottom: 24px;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.1));
}

.login-brand h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #170c3d;
    margin: 0 0 12px 0;
    letter-spacing: -0.5px;
}

.login-brand p {
    color: #645b73;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 28px;
}

.auth-form label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #21172d;
    margin-bottom: -12px;
}

.auth-form input {
    padding: 14px 16px;
    border: 2px solid #e9e2eb;
    border-radius: 12px;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    background: #fff;
    color: #21172d;
}

.auth-form input:focus {
    outline: none;
    border-color: #9061f9;
    box-shadow: 0 0 0 4px rgba(144, 97, 249, 0.1);
}

.btn-full {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
    padding: 14px 24px;
    font-size: 1.05rem;
    border-radius: 12px;
}

.config-note {
    font-size: 0.85rem;
    color: #887f96;
    text-align: center;
    margin-bottom: 28px;
    display: block;
    line-height: 1.4;
}

.login-card .btn-primary {
    background: linear-gradient(135deg, #7e4de0, #9061f9);
    border: none;
    box-shadow: 0 8px 16px rgba(126, 77, 224, 0.25);
}

.login-card .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px rgba(126, 77, 224, 0.35);
}

.login-card .btn-secondary {
    background: #f2edf9;
    color: #7e4de0;
    border: none;
}

.login-card .btn-secondary:hover {
    background: #e6def2;
}

/* ══════════════════════════════════════════════════════════════
   STAGE 2: Modernized Dashboard Design System
   Refined alignment, spacing, cards, typography & responsiveness
   ══════════════════════════════════════════════════════════════ */

/* ── Dashboard Intro / Header ──────────────────────────────── */
.dashboard-intro {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 20px !important;
    margin-bottom: 24px !important;
    padding-bottom: 4px !important;
}

.dashboard-intro .eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.76rem !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--accent) !important;
    margin-bottom: 6px !important;
}

.dashboard-intro h1 {
    font-size: clamp(1.8rem, 2.5vw, 2.4rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.15 !important;
    margin: 0 0 6px 0 !important;
    color: var(--text) !important;
}

.dashboard-intro p {
    font-size: 0.92rem !important;
    color: var(--muted) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    font-weight: 450 !important;
}

.dashboard-intro > .btn {
    align-self: flex-end !important;
    flex-shrink: 0 !important;
    height: 44px !important;
    padding: 0 20px !important;
    border-radius: 11px !important;
    font-size: 0.9rem !important;
    font-weight: 650 !important;
}

/* ── Emergency Announcement Banner ─────────────────────────── */
.emergency-banner {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 20px !important;
    border-radius: 14px !important;
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #991b1b !important;
    margin-bottom: 22px !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.08) !important;
}

.emergency-banner strong {
    font-size: 0.92rem !important;
    font-weight: 750 !important;
}

.emergency-banner p {
    margin: 0 !important;
    font-size: 0.88rem !important;
}

/* ── Dashboard Bento Layout ────────────────────────────────── */
.dashboard-bento {
    display: grid !important;
    grid-template-columns: minmax(0, 1.85fr) minmax(310px, 0.95fr) !important;
    gap: 22px !important;
    align-items: stretch !important;
    margin-bottom: 28px !important;
}

.dashboard-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    min-width: 0 !important;
}

/* ── Learning Hero Banner ──────────────────────────────────── */
.learning-hero {
    min-height: auto !important;
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.45fr) auto !important;
    align-items: center !important;
    gap: 24px !important;
    padding: clamp(24px, 3.2vw, 36px) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
    border-radius: 22px !important;
    background: linear-gradient(130deg, color-mix(in srgb, var(--accent) 7%, var(--surface)) 0%, var(--surface) 55%, color-mix(in srgb, var(--accent) 4%, var(--surface)) 100%) !important;
    box-shadow: var(--shadow-sm) !important;
}

.learning-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: auto -80px -140px auto !important;
    width: 340px !important;
    height: 340px !important;
    border-radius: 50% !important;
    border: 60px solid color-mix(in srgb, var(--accent) 6%, transparent) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

.learning-hero .hero-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.72rem !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--accent) !important;
    margin-bottom: 8px !important;
}

.learning-hero h2 {
    font-size: clamp(1.45rem, 2.1vw, 1.95rem) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.03em !important;
    max-width: 600px !important;
    margin: 0 0 10px 0 !important;
    color: var(--text) !important;
}

.learning-hero p {
    font-size: 0.91rem !important;
    color: var(--muted) !important;
    line-height: 1.55 !important;
    margin: 0 0 20px 0 !important;
    max-width: 520px !important;
}

.learning-hero .btn {
    height: 42px !important;
    padding: 0 18px !important;
    border-radius: 11px !important;
    font-size: 0.88rem !important;
    font-weight: 650 !important;
    margin-right: 8px !important;
    margin-bottom: 6px !important;
}

.learning-hero .btn-primary {
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(15, 124, 110, 0.2) !important;
}

.learning-hero .btn-primary:hover {
    background: var(--accent-strong) !important;
    border-color: var(--accent-strong) !important;
    box-shadow: 0 5px 16px rgba(15, 124, 110, 0.28) !important;
    transform: translateY(-1px) !important;
}

.learning-hero .btn-secondary {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

.learning-hero .btn-secondary:hover {
    background: var(--surface-2) !important;
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border)) !important;
}

/* Hero Progress Orbit */
.hero-orbit {
    position: relative !important;
    width: 130px !important;
    height: 130px !important;
    border-radius: 50% !important;
    border: 14px solid color-mix(in srgb, var(--accent) 12%, transparent) !important;
    display: grid !important;
    place-items: center !important;
    flex-shrink: 0 !important;
    margin: auto !important;
}

.hero-orbit::before {
    content: "" !important;
    position: absolute !important;
    inset: 6px !important;
    border-radius: 50% !important;
    border: 1px dashed color-mix(in srgb, var(--accent) 25%, transparent) !important;
}

.hero-orbit::after {
    display: none !important;
}

.orbit-core {
    width: 78px !important;
    height: 78px !important;
    aspect-ratio: 1 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: var(--surface) !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    color: var(--accent) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
    border: 2px solid color-mix(in srgb, var(--accent) 25%, var(--border)) !important;
}

.orbit-dot {
    position: absolute !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.dot-one {
    background: #10b981 !important;
    left: -4px !important;
    top: 24px !important;
    transform: none !important;
}

.dot-two {
    background: #f59e0b !important;
    right: -2px !important;
    top: 14px !important;
    transform: none !important;
}

.dot-three {
    background: #06b6d4 !important;
    right: 8px !important;
    bottom: 12px !important;
    transform: none !important;
}

/* ── Metric Grid & Cards ───────────────────────────────────── */
.metric-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

.metric-card {
    min-height: 136px !important;
    padding: 18px 20px !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-sm) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    text-decoration: none !important;
    color: var(--text) !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.metric-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border)) !important;
}

.metric-card:active {
    transform: translateY(0) scale(0.99) !important;
}

.metric-icon {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    flex-shrink: 0 !important;
    transition: transform 0.18s ease !important;
}

.metric-icon .ui-icon {
    width: 20px !important;
    height: 20px !important;
}

.metric-card:hover .metric-icon {
    transform: scale(1.08) !important;
}

.metric-card small {
    color: var(--muted) !important;
    font-size: 0.8rem !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
}

.metric-card > strong {
    font-size: 2rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    color: var(--text) !important;
    margin: 6px 0 6px 0 !important;
}

.metric-card > span:last-child {
    color: var(--muted) !important;
    font-size: 0.77rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: color 0.15s ease !important;
}

.metric-card:hover > span:last-child {
    color: var(--accent) !important;
}

/* Card Tint Variations */
.metric-mint {
    background: linear-gradient(145deg, color-mix(in srgb, #10b981 7%, var(--surface)), var(--surface) 75%) !important;
}
.metric-mint .metric-icon {
    background: #d1fae5 !important;
    color: #065f46 !important;
}

.metric-gold {
    background: linear-gradient(145deg, color-mix(in srgb, #f59e0b 7%, var(--surface)), var(--surface) 75%) !important;
}
.metric-gold .metric-icon {
    background: #fef3c7 !important;
    color: #92400e !important;
}

.metric-blue {
    background: linear-gradient(145deg, color-mix(in srgb, #3b82f6 7%, var(--surface)), var(--surface) 75%) !important;
}
.metric-blue .metric-icon {
    background: #dbeafe !important;
    color: #1e40af !important;
}

.metric-purple {
    background: linear-gradient(145deg, color-mix(in srgb, #8b5cf6 7%, var(--surface)), var(--surface) 75%) !important;
}
.metric-purple .metric-icon {
    background: #ede9fe !important;
    color: #5b21b6 !important;
}

/* Progress Ring Card */
.progress-card {
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
}

.progress-ring {
    --progress: 0;
    width: 108px !important;
    aspect-ratio: 1 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: conic-gradient(var(--accent) calc(var(--progress)*1%), var(--surface-3) 0) !important;
    position: relative !important;
}

.progress-ring::before {
    content: "" !important;
    position: absolute !important;
    inset: 9px !important;
    background: var(--surface) !important;
    border-radius: 50% !important;
}

.progress-ring > span {
    position: relative !important;
    z-index: 1 !important;
    text-align: center !important;
    display: grid !important;
    gap: 1px !important;
}

.progress-ring strong {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: var(--text) !important;
    line-height: 1 !important;
}

.progress-ring small {
    font-size: 0.68rem !important;
    font-weight: 650 !important;
    color: var(--muted) !important;
}

/* ── Events / Coming Up Card (Right Sidebar Widget) ────────── */
.events-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 22px !important;
    padding: 22px !important;
    box-shadow: var(--shadow-sm) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.events-card .section-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin-bottom: 0 !important;
}

.events-card .section-title h2 {
    font-size: 1.15rem !important;
    font-weight: 750 !important;
    color: var(--text) !important;
    margin: 0 !important;
    letter-spacing: -0.02em !important;
}

.events-card .section-title p {
    font-size: 0.76rem !important;
    color: var(--muted) !important;
    margin: 2px 0 0 0 !important;
}

.events-card .section-title a {
    font-size: 0.8rem !important;
    font-weight: 650 !important;
    color: var(--accent) !important;
    text-decoration: none !important;
}

.events-card .section-title a:hover {
    text-decoration: underline !important;
}

/* Date Strip */
.date-strip {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 6px !important;
    padding: 4px !important;
    background: var(--surface-2) !important;
    border-radius: 14px !important;
}

.date-strip .date-pill {
    min-height: 52px !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: var(--muted) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
}

.date-strip .date-pill small {
    font-size: 0.67rem !important;
    font-weight: 650 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
}

.date-strip .date-pill strong {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    line-height: 1.15 !important;
    margin-top: 3px !important;
}

.date-strip .date-pill:hover:not(.active) {
    background: color-mix(in srgb, var(--surface) 65%, transparent) !important;
    color: var(--text) !important;
}

.date-strip .date-pill.active {
    background: var(--surface) !important;
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border)) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.date-strip .date-pill.active small,
.date-strip .date-pill.active strong {
    color: var(--accent) !important;
}

/* Event Items */
.events-card .event-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 1 !important;
}

.event-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: var(--surface-2) !important;
    border: 1px solid transparent !important;
    text-decoration: none !important;
    color: var(--text) !important;
    transition: all 0.15s ease !important;
}

.event-item:hover {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    transform: translateX(2px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.event-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: grid !important;
    place-items: center !important;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface)) !important;
    color: var(--accent) !important;
    flex-shrink: 0 !important;
}

.event-icon .ui-icon {
    width: 16px !important;
    height: 16px !important;
}

.event-item span:last-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

.event-item strong {
    font-size: 0.84rem !important;
    font-weight: 650 !important;
    color: var(--text) !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.event-item small {
    font-size: 0.73rem !important;
    color: var(--muted) !important;
}

/* Empty State inside Events */
.events-card .empty-state {
    padding: 24px 16px !important;
    text-align: center !important;
}

.events-card .empty-state h2 {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    margin: 8px 0 4px 0 !important;
}

.events-card .empty-state p {
    font-size: 0.78rem !important;
    color: var(--muted) !important;
}

/* ── Content Sections (Global Dashboard Sections) ──────────── */
.content-section {
    margin-top: 32px !important;
}

.content-section .section-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
}

.content-section .section-title h2 {
    font-size: 1.3rem !important;
    font-weight: 780 !important;
    letter-spacing: -0.025em !important;
    color: var(--text) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.content-section .section-title p {
    font-size: 0.85rem !important;
    color: var(--muted) !important;
    margin: 3px 0 0 0 !important;
    font-weight: 450 !important;
}

.content-section .section-title a {
    font-size: 0.82rem !important;
    font-weight: 650 !important;
    color: var(--accent) !important;
    text-decoration: none !important;
}

.content-section .section-title a:hover {
    text-decoration: underline !important;
}

/* ── Course Grid & Course Cards ────────────────────────────── */
.course-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 18px !important;
}

.course-card {
    --course-accent: var(--accent);
    position: relative !important;
    overflow: hidden !important;
    min-height: 220px !important;
    padding: 22px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-top: 3px solid var(--course-accent) !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: var(--shadow-sm) !important;
    text-decoration: none !important;
    color: var(--text) !important;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.course-card::before {
    display: none !important;
}

.course-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-md) !important;
    border-color: color-mix(in srgb, var(--course-accent) 40%, var(--border)) !important;
    border-top-color: var(--course-accent) !important;
}

.course-kicker {
    font-size: 0.68rem !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--muted) !important;
    display: block !important;
    margin-bottom: 6px !important;
}

.course-card h3 {
    font-size: 1.1rem !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
    color: var(--text) !important;
    margin: 0 0 6px 0 !important;
    letter-spacing: -0.02em !important;
}

.course-card p {
    font-size: 0.83rem !important;
    color: var(--muted) !important;
    line-height: 1.45 !important;
    margin: 0 0 16px 0 !important;
    flex-grow: 1 !important;
}

.course-card .progress-meta {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 0.72rem !important;
    font-weight: 650 !important;
    color: var(--muted) !important;
    margin-bottom: 5px !important;
    margin-top: auto !important;
}

.course-card .progress {
    height: 5px !important;
    background: var(--surface-3) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin: 0 0 12px 0 !important;
}

.course-card .progress span {
    display: block !important;
    height: 100% !important;
    background: var(--course-accent) !important;
    border-radius: inherit !important;
}

.course-card .card-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.81rem !important;
    font-weight: 700 !important;
    color: var(--accent) !important;
}

.course-card .card-link b {
    font-size: 1rem !important;
}

/* ── Certificate Cards ─────────────────────────────────────── */
.certificate-card {
    border-top: 3px solid #8b5cf6 !important;
}

.certificate-actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 14px !important;
}

.certificate-actions .btn {
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 0.8rem !important;
    border-radius: 8px !important;
}

/* ── Task List & Rows ──────────────────────────────────────── */
.task-list {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm) !important;
}

.task-row {
    display: grid !important;
    grid-template-columns: 4px minmax(0, 1fr) auto 64px !important;
    gap: 16px !important;
    align-items: center !important;
    padding: 13px 18px !important;
    border-bottom: 1px solid var(--border) !important;
    text-decoration: none !important;
    color: var(--text) !important;
    transition: background 0.15s ease !important;
}

.task-row:last-child {
    border-bottom: none !important;
}

.task-row:hover {
    background: var(--surface-2) !important;
}

.task-priority {
    width: 4px !important;
    height: 30px !important;
    border-radius: 4px !important;
    background: var(--warning) !important;
}

.task-priority.overdue {
    background: var(--danger) !important;
}

.task-row span:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.task-row strong {
    font-size: 0.88rem !important;
    font-weight: 650 !important;
    color: var(--text) !important;
}

.task-row small {
    font-size: 0.74rem !important;
    color: var(--muted) !important;
}

.task-due {
    font-size: 0.77rem !important;
    font-weight: 600 !important;
    color: var(--muted) !important;
}

.task-due.danger {
    color: var(--danger) !important;
}

.task-row > b {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--accent) !important;
    padding: 5px 12px !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface)) !important;
    transition: all 0.15s ease !important;
}

.task-row:hover > b {
    background: var(--accent) !important;
    color: #ffffff !important;
}

/* ── Attention List (Lecturer/Coordinator) ──────────────────── */
.attention-list {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm) !important;
}

.attention-list a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--border) !important;
    text-decoration: none !important;
    color: var(--text) !important;
    transition: background 0.15s ease !important;
}

.attention-list a:last-child {
    border-bottom: none !important;
}

.attention-list a:hover {
    background: var(--surface-2) !important;
}

.attention-list strong {
    font-size: 0.88rem !important;
    font-weight: 650 !important;
    color: var(--text) !important;
}

.attention-list small {
    font-size: 0.75rem !important;
    color: var(--muted) !important;
    margin-top: 2px !important;
}

.attention-list b {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #b45309 !important;
    background: #fef3c7 !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
}

/* ── Readiness List (Staff Operations) ─────────────────────── */
.readiness-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 12px !important;
}

.readiness-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 13px 16px !important;
    border-radius: 14px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
}

.readiness-item.ready span {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #d1fae5 !important;
    color: #065f46 !important;
    display: grid !important;
    place-items: center !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
}

.readiness-item.attention span {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #fee2e2 !important;
    color: #991b1b !important;
    display: grid !important;
    place-items: center !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
}

.readiness-item strong {
    font-size: 0.86rem !important;
    font-weight: 650 !important;
    color: var(--text) !important;
    display: block !important;
}

.readiness-item small {
    font-size: 0.74rem !important;
    color: var(--muted) !important;
    display: block !important;
}

/* ── Announcements Section ─────────────────────────────────── */
.announcement-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)) !important;
    gap: 16px !important;
}

.announcement {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-shadow: var(--shadow-sm) !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.announcement:hover {
    box-shadow: var(--shadow) !important;
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border)) !important;
}

.announcement > span:first-child {
    display: inline-block !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
    font-size: 0.68rem !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    width: max-content !important;
}

.announcement.priority-important > span:first-child {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}

.announcement.priority-emergency > span:first-child {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5 !important;
}

.announcement.priority-normal > span:first-child {
    background: #e0f2fe !important;
    color: #075985 !important;
    border: 1px solid #bae6fd !important;
}

.announcement h3 {
    font-size: 1.05rem !important;
    font-weight: 750 !important;
    color: var(--text) !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.015em !important;
}

.announcement p {
    font-size: 0.86rem !important;
    color: var(--muted) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    flex-grow: 1 !important;
}

.announcement small {
    font-size: 0.74rem !important;
    color: var(--muted) !important;
    margin-top: 4px !important;
    display: block !important;
    font-weight: 500 !important;
}

.announcement-empty {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 24px 28px !important;
    background: var(--surface) !important;
    border: 1px dashed var(--border) !important;
    border-radius: 16px !important;
}

.announcement-empty-mark {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: var(--surface-2) !important;
    display: grid !important;
    place-items: center !important;
    color: var(--muted) !important;
    flex-shrink: 0 !important;
}

.announcement-empty h3 {
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    margin: 0 0 3px 0 !important;
}

.announcement-empty p {
    font-size: 0.84rem !important;
    color: var(--muted) !important;
    margin: 0 !important;
}

/* ── Responsive Adaptations for Dashboard ──────────────────── */
@media (max-width: 1080px) {
    .dashboard-bento {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .events-card {
        max-width: none !important;
    }
}

@media (max-width: 768px) {
    .dashboard-intro {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
        margin-bottom: 18px !important;
    }

    .dashboard-intro > .btn {
        align-self: stretch !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .learning-hero {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 20px !important;
    }

    .learning-hero .hero-orbit {
        margin: 0 auto !important;
    }

    .metric-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .metric-card {
        min-height: 124px !important;
        padding: 14px 16px !important;
    }

    .metric-card > strong {
        font-size: 1.65rem !important;
    }

    .content-section {
        margin-top: 24px !important;
    }

    .content-section .section-title {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        margin-bottom: 14px !important;
    }

    .course-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .announcement-list {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .metric-grid {
        grid-template-columns: 1fr !important;
    }

    .date-strip {
        gap: 4px !important;
    }

    .date-strip .date-pill {
        min-height: 48px !important;
    }

    .task-row {
        grid-template-columns: 4px minmax(0, 1fr) auto !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }

    .task-row > b {
        display: none !important;
    }
}

/* ── Dark Mode Refinements for Dashboard ───────────────────── */
html[data-theme=dark] .emergency-banner {
    background: #3b1414 !important;
    border-color: #7f1d1d !important;
    color: #fca5a5 !important;
}

html[data-theme=dark] .announcement.priority-important > span:first-child {
    background: #3b1e08 !important;
    color: #fcd34d !important;
    border-color: #78350f !important;
}

html[data-theme=dark] .announcement.priority-emergency > span:first-child {
    background: #3b1414 !important;
    color: #fca5a5 !important;
    border-color: #7f1d1d !important;
}

html[data-theme=dark] .announcement.priority-normal > span:first-child {
    background: #082f49 !important;
    color: #7dd3fc !important;
    border-color: #0369a1 !important;
}

html[data-theme=dark] .metric-mint .metric-icon {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}

html[data-theme=dark] .metric-gold .metric-icon {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}

html[data-theme=dark] .metric-blue .metric-icon {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

html[data-theme=dark] .metric-purple .metric-icon {
    background: rgba(139, 92, 246, 0.2) !important;
    color: #a78bfa !important;
}

html[data-theme=dark] .attention-list b {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}

html[data-theme=dark] .readiness-item.ready span {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}

html[data-theme=dark] .readiness-item.attention span {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

/* ── Content Section Empty States ─────────────────────────── */
.content-section .empty-state {
    padding: 36px 24px !important;
    border-radius: 18px !important;
    border: 1px dashed color-mix(in srgb, var(--border) 80%, var(--accent)) !important;
    background: var(--surface) !important;
    text-align: center !important;
}

.content-section .empty-state .empty-mark {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: var(--surface-2) !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 auto 14px auto !important;
    color: var(--muted) !important;
}

.content-section .empty-state .empty-mark .ui-icon {
    width: 22px !important;
    height: 22px !important;
}

.content-section .empty-state h2 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
    color: var(--text) !important;
}

.content-section .empty-state p {
    font-size: 0.86rem !important;
    color: var(--muted) !important;
    max-width: 460px !important;
    margin: 0 auto !important;
}


/* =====================================================================
   RESPONSIVE SHELL
   Consolidated into assets/css/app.css
   ===================================================================== */

/*
 * Pioneer LMS — Responsive Shell Stabilisation v2
 * ------------------------------------------------
 * Purpose: keep the existing Pioneer LMS visual language and core flows,
 * while making the global shell reliable on laptop, tablet and phone.
 * This file intentionally avoids a desktop redesign.
 */

/* ---------- Global shell safety ---------- */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.app-shell,
.app-frame,
.main-content,
.topbar,
.topbar > *,
.page-heading,
.page-heading > * {
    min-width: 0;
}

.main-content {
    overflow-x: clip;
}

/* A dedicated mobile close control is added in layout.php. */
.sidebar-mobile-close {
    display: none;
}

/* ---------- Medium desktop / tablet landscape ---------- */
@media (min-width: 861px) and (max-width: 1100px) {
    :root {
        --sidebar-expanded: 224px;
    }

    .sidebar {
        width: var(--sidebar-expanded) !important;
    }

    .app-frame {
        margin-left: var(--sidebar-expanded) !important;
    }

    html.sidebar-collapsed .app-frame,
    body.sidebar-collapsed .app-frame,
    .sidebar.collapsed ~ .app-frame {
        margin-left: var(--sidebar-collapsed) !important;
    }

    .topbar {
        padding-inline: 20px !important;
        gap: 12px !important;
    }

    .global-search {
        max-width: 460px !important;
    }

    .profile-copy {
        display: none !important;
    }

    button.profile-chip {
        padding: 4px !important;
    }
}

/* ---------- Phone / portrait tablet ---------- */
@media (max-width: 860px) {
    body {
        min-width: 320px;
    }

    /* Drawer: responsive width, safe areas, no desktop-collapse state leakage. */
    .sidebar,
    html.sidebar-collapsed .sidebar,
    body.sidebar-collapsed .sidebar,
    .sidebar.collapsed {
        width: min(88vw, 320px) !important;
        max-width: 320px !important;
        height: 100dvh !important;
        padding:
            max(14px, env(safe-area-inset-top))
            14px
            max(14px, env(safe-area-inset-bottom)) !important;
        border-radius: 0 18px 18px 0 !important;
        overscroll-behavior: contain;
    }

    .sidebar-header {
        width: 100% !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 2px 10px !important;
        margin-bottom: 4px !important;
        border-bottom: 1px solid var(--border) !important;
        flex-shrink: 0 !important;
    }

    .sidebar .brand,
    html.sidebar-collapsed .brand,
    body.sidebar-collapsed .brand,
    .sidebar.collapsed .brand {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        gap: 10px !important;
    }

    .sidebar .brand-logo,
    .sidebar .brand img {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
    }

    .sidebar .brand-text,
    .sidebar .brand > span {
        min-width: 0 !important;
        max-width: none !important;
    }

    .sidebar-toggle-btn {
        display: none !important;
    }

    .sidebar-mobile-close {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        color: var(--muted);
        cursor: pointer;
    }

    .sidebar-mobile-close:hover,
    .sidebar-mobile-close:focus-visible {
        background: var(--surface-2);
        color: var(--text);
        outline: none;
    }

    .sidebar-mobile-close .ui-icon {
        width: 19px;
        height: 19px;
    }

    .nav-list {
        width: 100% !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 6px 0 10px !important;
        scrollbar-gutter: auto;
    }

    .sidebar .nav-link,
    html.sidebar-collapsed .nav-link,
    body.sidebar-collapsed .nav-link,
    .sidebar.collapsed .nav-link {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: flex-start !important;
        padding: 8px 10px !important;
        gap: 10px !important;
        border-radius: 10px !important;
    }

    .sidebar .nav-glyph,
    html.sidebar-collapsed .nav-glyph,
    body.sidebar-collapsed .nav-glyph,
    .sidebar.collapsed .nav-glyph {
        width: 28px !important;
        height: 28px !important;
        flex: 0 0 28px !important;
    }

    .sidebar .nav-link > span:last-child,
    html.sidebar-collapsed .nav-link > span:last-child,
    body.sidebar-collapsed .nav-link > span:last-child,
    .sidebar.collapsed .nav-link > span:last-child {
        min-width: 0 !important;
        max-width: none !important;
        opacity: 1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .nav-group,
    .nav-sublist {
        width: 100% !important;
    }

    .nav-sublink {
        min-height: 40px !important;
        padding-block: 9px !important;
    }

    .sidebar-footer,
    html.sidebar-collapsed .sidebar-footer,
    body.sidebar-collapsed .sidebar-footer,
    .sidebar.collapsed .sidebar-footer {
        width: 100% !important;
        flex: 0 0 auto !important;
        padding-top: 10px !important;
        margin-top: 0 !important;
        border-top: 1px solid var(--border) !important;
    }

    /* Topbar becomes two deliberate rows rather than squeezing everything. */
    .topbar,
    .topbar.scrolled {
        min-height: 108px !important;
        height: auto !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-content: center !important;
        align-items: center !important;
        justify-content: space-between !important;
        column-gap: 8px !important;
        row-gap: 8px !important;
        padding:
            max(8px, env(safe-area-inset-top))
            12px
            10px !important;
    }

    .mobile-menu {
        order: 1 !important;
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
        border-radius: 10px !important;
        transform: none !important;
    }

    .mobile-menu:hover,
    .mobile-menu:active,
    .mobile-menu.is-open {
        transform: none !important;
    }

    .top-actions {
        order: 2 !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        gap: 6px !important;
    }

    .top-actions > .icon-button,
    .top-actions .theme-toggle-btn,
    .top-actions .chat-button,
    .top-actions .notification-button {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        border-radius: 10px !important;
        transform: none !important;
    }

    .top-actions > .icon-button:hover,
    .top-actions > .icon-button:active {
        transform: none !important;
    }

    .top-actions .profile-chip {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: 50% !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .top-actions .profile-chip:hover,
    .profile-dropdown-wrap.is-open .profile-chip {
        transform: none !important;
    }

    .top-actions .profile-chip .avatar-wrapper,
    .top-actions .profile-chip .avatar,
    .top-actions .profile-chip .avatar-image {
        width: 34px !important;
        height: 34px !important;
    }

    .profile-copy,
    .profile-dropdown-chevron {
        display: none !important;
    }

    .global-search {
        order: 3 !important;
        flex: 1 0 100% !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border-radius: 11px !important;
        transform: none !important;
    }

    .global-search:focus-within {
        transform: none !important;
    }

    .global-search input {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 0.84rem !important;
    }

    .global-search kbd {
        display: none !important;
    }

    /* Popup stays fully inside the phone viewport. */
    .profile-dropdown-wrap {
        position: static !important;
    }

    .profile-popup-card {
        position: fixed !important;
        top: calc(max(8px, env(safe-area-inset-top)) + 54px) !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - 78px - env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        border-radius: 16px !important;
    }

    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px 14px calc(88px + env(safe-area-inset-bottom)) !important;
        overflow-x: clip !important;
    }

    /* Global page-heading guard so actions don't overflow on narrow screens. */
    .page-heading {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding: 18px !important;
        border-radius: 16px !important;
    }

    .page-heading > div:first-child,
    .page-heading .heading-actions {
        width: 100% !important;
        min-width: 0 !important;
    }

    .page-heading h1,
    .page-heading p {
        overflow-wrap: anywhere;
    }

    .heading-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .heading-actions > .btn,
    .page-heading .heading-actions .btn {
        flex: 1 1 150px !important;
        width: auto !important;
        min-width: 0 !important;
        justify-content: center !important;
    }

    /* Bottom navigation: flatter, safe-area aware, and not oversized. */
    .mobile-nav {
        min-height: 66px !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important;
        border-radius: 14px 14px 0 0 !important;
    }

    .mobile-nav a {
        min-width: 0 !important;
        min-height: 50px !important;
        padding: 4px 2px !important;
        gap: 2px !important;
        border-radius: 10px !important;
    }

    .mobile-nav a > span {
        width: 30px !important;
        height: 26px !important;
        border-radius: 8px !important;
    }

    .mobile-nav small {
        width: 100% !important;
        min-width: 0 !important;
        font-size: clamp(.56rem, 2.6vw, .64rem) !important;
        line-height: 1.1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    .sidebar-overlay.visible {
        background: rgba(10, 5, 20, .48) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }
}

/* ---------- Very narrow phones ---------- */
@media (max-width: 390px) {
    .topbar,
    .topbar.scrolled {
        padding-inline: 10px !important;
    }

    .top-actions {
        gap: 4px !important;
    }

    .top-actions > .icon-button,
    .top-actions .theme-toggle-btn,
    .top-actions .chat-button,
    .top-actions .notification-button,
    .top-actions .profile-chip,
    .mobile-menu {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    .top-actions .profile-chip .avatar-wrapper,
    .top-actions .profile-chip .avatar,
    .top-actions .profile-chip .avatar-image {
        width: 32px !important;
        height: 32px !important;
    }

    .main-content {
        padding-inline: 10px !important;
    }

    .page-heading {
        padding: 16px 14px !important;
    }
}

/* ---------- Landscape phone: reclaim vertical room ---------- */
@media (max-width: 860px) and (max-height: 520px) and (orientation: landscape) {
    .topbar,
    .topbar.scrolled {
        min-height: 56px !important;
        flex-wrap: nowrap !important;
        padding-block: 7px !important;
    }

    .global-search {
        order: 2 !important;
        flex: 1 1 auto !important;
        width: auto !important;
        height: 38px !important;
    }

    .top-actions {
        order: 3 !important;
    }

    .main-content {
        padding-top: 14px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar-overlay,
    .mobile-menu,
    .profile-popup-card {
        transition-duration: .01ms !important;
    }
}


/* =====================================================================
   DASHBOARD UI — route scoped
   Consolidated into assets/css/app.css
   ===================================================================== */

/*
 * Pioneer LMS — Dashboard UI/UX refinement v1
 * ------------------------------------------------------------
 * Dashboard-only presentation layer.
 * No routes, forms, permissions, queries or business logic changed.
 */

/* ---------- Page rhythm ---------- */
body[data-route="dashboard"] .main-content{
    --dash-gap: 20px;
}

body[data-route="dashboard"] .dashboard-intro{
    margin: 0 0 22px !important;
    padding: 2px 2px 0 !important;
    align-items: center !important;
}

body[data-route="dashboard"] .dashboard-intro > div{
    min-width: 0 !important;
}

body[data-route="dashboard"] .dashboard-intro .eyebrow{
    width: max-content !important;
    margin: 0 0 7px !important;
    padding: 5px 9px !important;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border)) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--accent) 6%, var(--surface)) !important;
    color: var(--accent) !important;
    font-size: .68rem !important;
    line-height: 1 !important;
    letter-spacing: .055em !important;
}

body[data-route="dashboard"] .dashboard-intro h1{
    margin-bottom: 5px !important;
    font-size: clamp(1.75rem, 2.25vw, 2.25rem) !important;
    line-height: 1.12 !important;
}

body[data-route="dashboard"] .dashboard-intro p{
    max-width: 700px !important;
    font-size: .9rem !important;
}

body[data-route="dashboard"] .dashboard-intro > .btn{
    min-height: 42px !important;
    height: 42px !important;
    padding-inline: 17px !important;
    border-radius: 11px !important;
    white-space: nowrap !important;
}

/* ---------- Emergency notice ---------- */
body[data-route="dashboard"] .emergency-banner{
    position: relative !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 3px 14px !important;
    padding: 13px 16px 13px 19px !important;
    margin-bottom: 18px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

body[data-route="dashboard"] .emergency-banner::before{
    content: "" !important;
    position: absolute !important;
    inset: 9px auto 9px 7px !important;
    width: 3px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    opacity: .7 !important;
}

body[data-route="dashboard"] .emergency-banner strong, body[data-route="dashboard"] .emergency-banner p{
    min-width: 0 !important;
}

/* ---------- Primary dashboard composition ---------- */
body[data-route="dashboard"] .dashboard-bento{
    grid-template-columns: minmax(0, 1.72fr) minmax(292px, .78fr) !important;
    gap: var(--dash-gap) !important;
    align-items: start !important;
    margin-bottom: 30px !important;
}

body[data-route="dashboard"] .dashboard-main{
    gap: var(--dash-gap) !important;
}

/* ---------- Learning / teaching hero ---------- */
body[data-route="dashboard"] .learning-hero{
    min-height: 236px !important;
    grid-template-columns: minmax(0, 1fr) 128px !important;
    gap: clamp(22px, 3vw, 42px) !important;
    padding: clamp(25px, 3.2vw, 36px) !important;
    border-radius: 20px !important;
    border-color: color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
    background:
        radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 16rem),
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface) 56%) !important;
    box-shadow: 0 1px 2px rgba(20, 45, 40, .035), 0 10px 30px rgba(20, 45, 40, .04) !important;
}

body[data-route="dashboard"] .learning-hero::before{
    inset: auto -118px -170px auto !important;
    width: 360px !important;
    height: 360px !important;
    border-width: 58px !important;
    opacity: .75 !important;
}

body[data-route="dashboard"] .learning-hero > div:first-child{
    min-width: 0 !important;
}

body[data-route="dashboard"] .learning-hero .hero-label{
    width: max-content !important;
    margin-bottom: 10px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--accent) 9%, var(--surface)) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border)) !important;
    font-size: .67rem !important;
    line-height: 1 !important;
}

body[data-route="dashboard"] .learning-hero h2{
    max-width: 620px !important;
    margin-bottom: 9px !important;
    font-size: clamp(1.5rem, 2.05vw, 1.95rem) !important;
    line-height: 1.18 !important;
}

body[data-route="dashboard"] .learning-hero p{
    max-width: 590px !important;
    margin-bottom: 18px !important;
    font-size: .89rem !important;
}

body[data-route="dashboard"] .learning-hero .btn{
    min-height: 40px !important;
    height: 40px !important;
    padding-inline: 16px !important;
    margin: 0 7px 6px 0 !important;
    border-radius: 10px !important;
}

body[data-route="dashboard"] .learning-hero .btn-primary{
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

body[data-route="dashboard"] .learning-hero .btn:hover{
    transform: translateY(-1px) !important;
}

/* Progress summary — intentionally quiet, not decorative. */
body[data-route="dashboard"] .hero-orbit{
    width: 118px !important;
    height: 118px !important;
    border: 10px solid color-mix(in srgb, var(--accent) 11%, var(--surface-2)) !important;
    background: color-mix(in srgb, var(--accent) 3%, var(--surface)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 9%, var(--border)) !important;
}

body[data-route="dashboard"] .hero-orbit::before{
    inset: 5px !important;
    border-style: solid !important;
    border-color: color-mix(in srgb, var(--accent) 10%, var(--border)) !important;
}

body[data-route="dashboard"] .orbit-core{
    width: 72px !important;
    height: 72px !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 1.42rem !important;
}

body[data-route="dashboard"] .orbit-dot{
    display: none !important;
}

/* ---------- Summary cards ---------- */
body[data-route="dashboard"] .dashboard-main > .metric-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

body[data-route="dashboard"] .main-content > .metric-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

body[data-route="dashboard"] .metric-card{
    min-height: 126px !important;
    padding: 16px 17px !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

body[data-route="dashboard"] .metric-card:hover{
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 22px rgba(20, 45, 40, .065) !important;
}

body[data-route="dashboard"] .metric-card .metric-icon{
    width: 34px !important;
    height: 34px !important;
    margin-bottom: 8px !important;
    border-radius: 9px !important;
}

body[data-route="dashboard"] .metric-card .metric-icon .ui-icon{
    width: 18px !important;
    height: 18px !important;
}

body[data-route="dashboard"] .metric-card > strong{
    margin: 4px 0 !important;
    font-size: 1.82rem !important;
}

body[data-route="dashboard"] .metric-card small{
    font-size: .76rem !important;
}

body[data-route="dashboard"] .metric-card > span:last-child{
    font-size: .72rem !important;
}

body[data-route="dashboard"] .progress-card{
    min-height: 126px !important;
}

body[data-route="dashboard"] .progress-ring{
    width: 92px !important;
}

body[data-route="dashboard"] .progress-ring::before{
    inset: 8px !important;
}

body[data-route="dashboard"] .progress-ring strong{
    font-size: 1.25rem !important;
}

body[data-route="dashboard"] .progress-ring small{
    max-width: 62px !important;
    font-size: .62rem !important;
    line-height: 1.15 !important;
}

/* ---------- Schedule ---------- */
body[data-route="dashboard"] .events-card{
    position: sticky !important;
    top: 86px !important;
    min-width: 0 !important;
    padding: 19px !important;
    gap: 13px !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

body[data-route="dashboard"] .events-card .section-title{
    align-items: center !important;
}

body[data-route="dashboard"] .events-card .section-title h2{
    font-size: 1.08rem !important;
}

body[data-route="dashboard"] .events-card .section-title a, body[data-route="dashboard"] .content-section .section-title a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 5px 9px !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface)) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border)) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

body[data-route="dashboard"] .events-card .section-title a:hover, body[data-route="dashboard"] .content-section .section-title a:hover{
    background: color-mix(in srgb, var(--accent) 11%, var(--surface)) !important;
    border-color: color-mix(in srgb, var(--accent) 20%, var(--border)) !important;
    text-decoration: none !important;
}

body[data-route="dashboard"] .date-strip{
    gap: 5px !important;
    padding: 4px !important;
    border-radius: 12px !important;
}

body[data-route="dashboard"] .date-strip .date-pill{
    min-height: 49px !important;
    border-radius: 9px !important;
}

body[data-route="dashboard"] .date-strip .date-pill small{
    font-size: .61rem !important;
}

body[data-route="dashboard"] .date-strip .date-pill strong{
    font-size: .98rem !important;
}

body[data-route="dashboard"] .events-card .event-stack{
    gap: 7px !important;
}

body[data-route="dashboard"] .event-item{
    gap: 10px !important;
    padding: 9px 10px !important;
    border-radius: 10px !important;
}

body[data-route="dashboard"] .event-item:hover{
    transform: none !important;
}

body[data-route="dashboard"] .event-icon{
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
}

body[data-route="dashboard"] .event-item strong{
    font-size: .8rem !important;
}

body[data-route="dashboard"] .event-item small{
    font-size: .69rem !important;
}

/* ---------- Secondary sections ---------- */
body[data-route="dashboard"] .content-section{
    margin-top: 30px !important;
}

body[data-route="dashboard"] .dashboard-main > .content-section:first-child{
    margin-top: 0 !important;
}

body[data-route="dashboard"] .content-section .section-title{
    align-items: center !important;
    margin-bottom: 14px !important;
}

body[data-route="dashboard"] .content-section .section-title h2{
    font-size: 1.18rem !important;
}

body[data-route="dashboard"] .content-section .section-title p{
    margin-top: 2px !important;
    font-size: .8rem !important;
}

/* ---------- Courses ---------- */
body[data-route="dashboard"] .course-grid{
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)) !important;
    gap: 14px !important;
}

body[data-route="dashboard"] .course-card{
    min-height: 202px !important;
    padding: 19px !important;
    border-radius: 15px !important;
    border-top-width: 2px !important;
    box-shadow: none !important;
}

body[data-route="dashboard"] .course-card:hover{
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 22px rgba(20, 45, 40, .06) !important;
}

body[data-route="dashboard"] .course-card h3{
    font-size: 1.02rem !important;
}

body[data-route="dashboard"] .course-card p{
    margin-bottom: 13px !important;
    font-size: .79rem !important;
}

body[data-route="dashboard"] .course-card .progress{
    height: 4px !important;
    margin-bottom: 10px !important;
}

body[data-route="dashboard"] .course-card .card-link{
    font-size: .77rem !important;
}

/* ---------- Tasks ---------- */
body[data-route="dashboard"] .task-list, body[data-route="dashboard"] .attention-list{
    border-radius: 14px !important;
    box-shadow: none !important;
}

body[data-route="dashboard"] .task-row{
    grid-template-columns: 4px minmax(0, 1fr) auto auto !important;
    gap: 13px !important;
    padding: 12px 15px !important;
}

body[data-route="dashboard"] .task-priority{
    height: 28px !important;
}

body[data-route="dashboard"] .task-row strong, body[data-route="dashboard"] .attention-list strong{
    font-size: .84rem !important;
}

body[data-route="dashboard"] .task-row small, body[data-route="dashboard"] .attention-list small{
    font-size: .71rem !important;
}

body[data-route="dashboard"] .task-row > b{
    min-width: 52px !important;
    padding: 5px 9px !important;
    font-size: .72rem !important;
}

body[data-route="dashboard"] .attention-list a{
    gap: 14px !important;
    padding: 12px 16px !important;
}

/* ---------- Operational / coordinator dashboard ---------- */
body[data-route="dashboard"] .readiness-list{
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 10px !important;
}

body[data-route="dashboard"] .readiness-item{
    padding: 12px 13px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

body[data-route="dashboard"] .readiness-item strong{
    font-size: .82rem !important;
}

body[data-route="dashboard"] .readiness-item small{
    font-size: .7rem !important;
}

/* ---------- Announcements ---------- */
body[data-route="dashboard"] .announcements-section{
    padding-bottom: 8px !important;
}

body[data-route="dashboard"] .announcement-list{
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 12px !important;
}

body[data-route="dashboard"] .announcement{
    min-width: 0 !important;
    padding: 16px !important;
    gap: 8px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

body[data-route="dashboard"] .announcement:hover{
    box-shadow: none !important;
    transform: none !important;
}

body[data-route="dashboard"] .announcement > span:first-child{
    padding: 3px 8px !important;
    font-size: .62rem !important;
}

body[data-route="dashboard"] .announcement h3{
    font-size: .96rem !important;
}

body[data-route="dashboard"] .announcement p{
    font-size: .8rem !important;
}

body[data-route="dashboard"] .announcement small{
    font-size: .68rem !important;
}

body[data-route="dashboard"] .announcement-empty{
    padding: 20px !important;
    border-radius: 14px !important;
}

/* ---------- Empty states on dashboard ---------- */
body[data-route="dashboard"] .content-section .empty-state, body[data-route="dashboard"] .events-card .empty-state{
    box-shadow: none !important;
}

/* ---------- Tablet / smaller laptop ---------- */
@media (max-width: 1180px) {
    body[data-route="dashboard"] .dashboard-bento{
        grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr) !important;
        gap: 16px !important;
    }

    body[data-route="dashboard"] .learning-hero{
        grid-template-columns: minmax(0, 1fr) 105px !important;
        min-height: 222px !important;
        padding: 26px !important;
    }

    body[data-route="dashboard"] .hero-orbit{
        width: 102px !important;
        height: 102px !important;
    }

    body[data-route="dashboard"] .orbit-core{
        width: 64px !important;
        height: 64px !important;
        font-size: 1.25rem !important;
    }
}

@media (max-width: 1030px) {
    body[data-route="dashboard"] .dashboard-bento{
        grid-template-columns: 1fr !important;
    }

    body[data-route="dashboard"] .events-card{
        position: static !important;
    }

    body[data-route="dashboard"] .main-content > .metric-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body[data-route="dashboard"] .events-card .event-stack{
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ---------- Phone / portrait tablet ---------- */
@media (max-width: 860px) {
    body[data-route="dashboard"] .main-content{
        --dash-gap: 13px;
    }

    body[data-route="dashboard"] .dashboard-intro{
        gap: 10px !important;
        margin-bottom: 15px !important;
        padding-inline: 1px !important;
    }

    body[data-route="dashboard"] .dashboard-intro h1{
        font-size: clamp(1.55rem, 7vw, 1.9rem) !important;
    }

    body[data-route="dashboard"] .dashboard-intro p{
        font-size: .82rem !important;
        line-height: 1.45 !important;
    }

    body[data-route="dashboard"] .dashboard-intro > .btn{
        width: 100% !important;
        align-self: stretch !important;
        justify-content: center !important;
    }

    body[data-route="dashboard"] .emergency-banner{
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        padding: 12px 13px 12px 17px !important;
    }

    body[data-route="dashboard"] .dashboard-bento{
        gap: 13px !important;
        margin-bottom: 22px !important;
    }

    /* Keep the hero compact rather than turning it into a very tall card. */
    body[data-route="dashboard"] .learning-hero{
        min-height: 0 !important;
        grid-template-columns: minmax(0, 1fr) 82px !important;
        align-items: start !important;
        gap: 13px !important;
        padding: 18px !important;
        border-radius: 16px !important;
    }

    body[data-route="dashboard"] .learning-hero h2{
        font-size: clamp(1.25rem, 5.8vw, 1.55rem) !important;
        line-height: 1.16 !important;
    }

    body[data-route="dashboard"] .learning-hero p{
        margin-bottom: 14px !important;
        font-size: .79rem !important;
        line-height: 1.45 !important;
    }

    body[data-route="dashboard"] .learning-hero .hero-label{
        margin-bottom: 8px !important;
        font-size: .6rem !important;
    }

    body[data-route="dashboard"] .learning-hero .btn{
        min-height: 38px !important;
        height: 38px !important;
        padding-inline: 13px !important;
        font-size: .77rem !important;
    }

    body[data-route="dashboard"] .hero-orbit{
        width: 78px !important;
        height: 78px !important;
        border-width: 7px !important;
        margin: 2px 0 0 auto !important;
    }

    body[data-route="dashboard"] .hero-orbit::before{
        inset: 3px !important;
    }

    body[data-route="dashboard"] .orbit-core{
        width: 52px !important;
        height: 52px !important;
        font-size: 1.05rem !important;
    }

    body[data-route="dashboard"] .dashboard-main > .metric-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    body[data-route="dashboard"] .dashboard-main > .metric-grid .progress-card{
        grid-column: 1 / -1 !important;
        min-height: 94px !important;
    }

    body[data-route="dashboard"] .metric-card{
        min-height: 112px !important;
        padding: 13px 14px !important;
        border-radius: 14px !important;
    }

    body[data-route="dashboard"] .metric-card .metric-icon{
        width: 30px !important;
        height: 30px !important;
        margin-bottom: 6px !important;
    }

    body[data-route="dashboard"] .metric-card > strong{
        font-size: 1.55rem !important;
    }

    body[data-route="dashboard"] .metric-card small{
        font-size: .7rem !important;
    }

    body[data-route="dashboard"] .metric-card > span:last-child{
        font-size: .66rem !important;
    }

    body[data-route="dashboard"] .progress-ring{
        width: 76px !important;
    }

    body[data-route="dashboard"] .progress-ring strong{
        font-size: 1.08rem !important;
    }

    body[data-route="dashboard"] .progress-ring small{
        font-size: .56rem !important;
    }

    body[data-route="dashboard"] .events-card{
        padding: 15px !important;
        border-radius: 15px !important;
        gap: 11px !important;
    }

    body[data-route="dashboard"] .events-card .section-title h2{
        font-size: 1rem !important;
    }

    body[data-route="dashboard"] .events-card .event-stack{
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    body[data-route="dashboard"] .event-item{
        padding: 9px !important;
    }

    body[data-route="dashboard"] .content-section{
        margin-top: 24px !important;
    }

    body[data-route="dashboard"] .content-section .section-title{
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    body[data-route="dashboard"] .content-section .section-title > div{
        min-width: 0 !important;
    }

    body[data-route="dashboard"] .content-section .section-title h2{
        font-size: 1.05rem !important;
    }

    body[data-route="dashboard"] .content-section .section-title p{
        font-size: .73rem !important;
    }

    body[data-route="dashboard"] .content-section .section-title a{
        flex: 0 0 auto !important;
        min-height: 28px !important;
        padding: 4px 8px !important;
        font-size: .7rem !important;
    }

    body[data-route="dashboard"] .course-grid{
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body[data-route="dashboard"] .course-card{
        min-height: 178px !important;
        padding: 16px !important;
        border-radius: 14px !important;
    }

    body[data-route="dashboard"] .course-card h3{
        font-size: .95rem !important;
    }

    body[data-route="dashboard"] .course-card p{
        font-size: .74rem !important;
    }

    body[data-route="dashboard"] .task-row{
        grid-template-columns: 4px minmax(0, 1fr) auto !important;
        gap: 10px !important;
        padding: 11px 12px !important;
    }

    body[data-route="dashboard"] .task-row > b{
        display: none !important;
    }

    body[data-route="dashboard"] .task-due{
        max-width: 86px !important;
        text-align: right !important;
        font-size: .68rem !important;
        line-height: 1.25 !important;
    }

    body[data-route="dashboard"] .main-content > .metric-grid{
        gap: 9px !important;
    }

    body[data-route="dashboard"] .announcement-list{
        grid-template-columns: 1fr !important;
    }

    body[data-route="dashboard"] .announcement{
        padding: 14px !important;
    }
}

/* ---------- Very narrow phones ---------- */
@media (max-width: 430px) {
    body[data-route="dashboard"] .learning-hero{
        grid-template-columns: 1fr !important;
    }

    body[data-route="dashboard"] .hero-orbit{
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        width: 68px !important;
        height: 68px !important;
        opacity: .98 !important;
    }

    body[data-route="dashboard"] .orbit-core{
        width: 46px !important;
        height: 46px !important;
        font-size: .93rem !important;
    }

    body[data-route="dashboard"] .learning-hero h2{
        padding-right: 66px !important;
    }

    body[data-route="dashboard"] .learning-hero p, body[data-route="dashboard"] .learning-hero .btn{
        position: relative !important;
        z-index: 2 !important;
    }

    body[data-route="dashboard"] .dashboard-main > .metric-grid, body[data-route="dashboard"] .main-content > .metric-grid{
        grid-template-columns: 1fr !important;
    }

    body[data-route="dashboard"] .dashboard-main > .metric-grid .progress-card{
        grid-column: auto !important;
    }

    body[data-route="dashboard"] .metric-card, body[data-route="dashboard"] .progress-card{
        min-height: 98px !important;
    }

    body[data-route="dashboard"] .metric-card:not(.progress-card){
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        column-gap: 10px !important;
        align-items: center !important;
    }

    body[data-route="dashboard"] .metric-card:not(.progress-card) .metric-icon{
        grid-row: 1 / 3 !important;
        margin: 0 !important;
    }

    body[data-route="dashboard"] .metric-card:not(.progress-card) small{
        align-self: end !important;
    }

    body[data-route="dashboard"] .metric-card:not(.progress-card) > strong{
        grid-row: 1 / 3 !important;
        grid-column: 3 !important;
        margin: 0 !important;
        font-size: 1.45rem !important;
    }

    body[data-route="dashboard"] .metric-card:not(.progress-card) > span:last-child{
        grid-column: 2 !important;
        align-self: start !important;
    }

    body[data-route="dashboard"] .date-strip .date-pill{
        min-height: 46px !important;
    }

    body[data-route="dashboard"] .content-section .section-title{
        align-items: flex-start !important;
    }

    body[data-route="dashboard"] .content-section .section-title p{
        display: none !important;
    }
}

/* ---------- Dark theme ---------- */
body[data-route="dashboard"] html[data-theme=dark] .learning-hero, body[data-route="dashboard"] html[data-theme=dark] .metric-card, body[data-route="dashboard"] html[data-theme=dark] .events-card, body[data-route="dashboard"] html[data-theme=dark] .course-card, body[data-route="dashboard"] html[data-theme=dark] .announcement, body[data-route="dashboard"] html[data-theme=dark] .readiness-item{
    box-shadow: none !important;
}

/* ---------- Motion accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
    body[data-route="dashboard"] .metric-card, body[data-route="dashboard"] .course-card, body[data-route="dashboard"] .event-item, body[data-route="dashboard"] .learning-hero .btn{
        transition: none !important;
        transform: none !important;
    }
}


/* =====================================================================
   Dashboard UI/UX v2
   Interactive day schedule + compact announcement rail.
   Presentation only; calendar/announcement routes and data flows unchanged.
   ===================================================================== */

body[data-route="dashboard"] .dashboard-side{
    position: sticky;
    top: 86px;
    min-width: 0;
    display: grid;
    gap: 14px;
    align-self: start;
}

body[data-route="dashboard"] .dashboard-side > .events-card{
    position: static !important;
    top: auto !important;
}

body[data-route="dashboard"] .date-strip .date-pill{
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    padding: 0 !important;
    font: inherit !important;
    outline: 0 !important;
}

body[data-route="dashboard"] .date-strip .date-pill:focus-visible{
    outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent) !important;
    outline-offset: 2px !important;
}

body[data-route="dashboard"] .date-strip .date-pill[aria-pressed="true"]{
    background: var(--surface) !important;
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border)) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
}

body[data-route="dashboard"] .date-strip .date-pill[aria-pressed="true"] small, body[data-route="dashboard"] .date-strip .date-pill[aria-pressed="true"] strong{
    color: var(--accent) !important;
}

body[data-route="dashboard"] .schedule-stage{
    min-height: 132px;
    display: grid;
}

body[data-route="dashboard"] .schedule-stage > *{
    grid-area: 1 / 1;
}

body[data-route="dashboard"] .event-item[hidden]{
    display: none !important;
}

body[data-route="dashboard"] .schedule-empty{
    min-height: 132px;
    padding: 18px 14px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    text-align: center;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--muted);
}

body[data-route="dashboard"] .schedule-empty[hidden]{
    display: none !important;
}

body[data-route="dashboard"] .schedule-empty-icon{
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-bottom: 3px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    color: var(--accent);
}

body[data-route="dashboard"] .schedule-empty-icon .ui-icon{
    width: 18px;
    height: 18px;
}

body[data-route="dashboard"] .schedule-empty strong{
    color: var(--text);
    font-size: .82rem;
}

body[data-route="dashboard"] .schedule-empty p{
    max-width: 220px;
    margin: 0;
    font-size: .69rem;
    line-height: 1.4;
}

body[data-route="dashboard"] .dashboard-announcements-card{
    min-width: 0;
    padding: 17px;
    display: grid;
    gap: 11px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
}

body[data-route="dashboard"] .dashboard-announcements-card .section-title{
    margin: 0 !important;
    align-items: center !important;
}

body[data-route="dashboard"] .dashboard-announcements-card .section-title h2{
    margin: 0 !important;
    color: var(--text);
    font-size: 1rem !important;
    letter-spacing: -.02em;
}

body[data-route="dashboard"] .dashboard-announcements-card .section-title p{
    margin: 2px 0 0 !important;
    color: var(--muted);
    font-size: .7rem !important;
}

body[data-route="dashboard"] .dashboard-announcements-card .section-title a{
    min-height: 28px !important;
    padding: 4px 8px !important;
    display: inline-flex;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
    color: var(--accent);
    font-size: .7rem;
    font-weight: 700;
    text-decoration: none;
}

body[data-route="dashboard"] .dashboard-announcement-list{
    min-width: 0;
    display: grid;
    gap: 7px;
}

body[data-route="dashboard"] .dashboard-announcement-item{
    min-width: 0;
    display: grid;
    grid-template-columns: 7px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 10px 9px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: inherit;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease;
}

body[data-route="dashboard"] .dashboard-announcement-item:hover{
    background: var(--surface-2);
    border-color: var(--border);
    text-decoration: none;
}

body[data-route="dashboard"] .dashboard-announcement-dot{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #87909d;
}

body[data-route="dashboard"] .dashboard-announcement-item.priority-important .dashboard-announcement-dot{
    background: #c47a00;
}

body[data-route="dashboard"] .dashboard-announcement-item.priority-emergency .dashboard-announcement-dot{
    background: #d23a45;
}

body[data-route="dashboard"] .dashboard-announcement-item.priority-normal .dashboard-announcement-dot{
    background: #3a82bd;
}

body[data-route="dashboard"] .dashboard-announcement-copy{
    min-width: 0;
    display: grid;
    gap: 3px;
}

body[data-route="dashboard"] .dashboard-announcement-meta{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted);
}

body[data-route="dashboard"] .dashboard-announcement-meta b{
    color: var(--muted);
    font-size: .58rem;
    font-weight: 750;
    letter-spacing: .045em;
    text-transform: uppercase;
}

body[data-route="dashboard"] .dashboard-announcement-meta time{
    flex: 0 0 auto;
    font-size: .61rem;
}

body[data-route="dashboard"] .dashboard-announcement-copy > strong{
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-route="dashboard"] .dashboard-announcement-arrow{
    color: var(--accent);
    font-size: .85rem;
    transition: transform .16s ease;
}

body[data-route="dashboard"] .dashboard-announcement-item:hover .dashboard-announcement-arrow{
    transform: translateX(2px);
}

body[data-route="dashboard"] .dashboard-announcement-empty{
    min-height: 78px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 11px;
    background: var(--surface-2);
    color: var(--muted);
}

body[data-route="dashboard"] .dashboard-announcement-empty > span{
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

body[data-route="dashboard"] .dashboard-announcement-empty .ui-icon{
    width: 17px;
    height: 17px;
}

body[data-route="dashboard"] .dashboard-announcement-empty div{
    min-width: 0;
    display: grid;
    gap: 2px;
}

body[data-route="dashboard"] .dashboard-announcement-empty strong{
    color: var(--text);
    font-size: .77rem;
}

body[data-route="dashboard"] .dashboard-announcement-empty small{
    font-size: .66rem;
    line-height: 1.35;
}

@media (max-width: 1030px) {
    body[data-route="dashboard"] .dashboard-side{
        position: static;
        top: auto;
        grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
        align-items: start;
    }

    body[data-route="dashboard"] .dashboard-side .events-card .event-stack{
        display: flex !important;
        grid-template-columns: none !important;
    }
}

@media (max-width: 760px) {
    body[data-route="dashboard"] .dashboard-side{
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body[data-route="dashboard"] .dashboard-announcements-card{
        padding: 15px;
        border-radius: 16px;
    }

    body[data-route="dashboard"] .schedule-stage, body[data-route="dashboard"] .schedule-empty{
        min-height: 112px;
    }
}

@media (max-width: 430px) {
    body[data-route="dashboard"] .events-card{
        padding: 15px !important;
    }

    body[data-route="dashboard"] .date-strip{
        gap: 3px !important;
    }

    body[data-route="dashboard"] .date-strip .date-pill{
        min-height: 45px !important;
    }

    body[data-route="dashboard"] .date-strip .date-pill small{
        font-size: .57rem !important;
    }

    body[data-route="dashboard"] .date-strip .date-pill strong{
        font-size: .9rem !important;
    }

    body[data-route="dashboard"] .dashboard-announcement-item{
        padding-inline: 7px;
    }
}


/* ---------- Login skeleton → real dashboard handoff ----------
   The generic app stylesheet animates dashboard blocks from opacity:0.
   After the login skeleton this creates a blank content flash. When the
   login transition sets the one-time handoff flag, render the destination
   dashboard at its final geometry immediately. */
body[data-route="dashboard"] html.login-skeleton-handoff .dashboard-intro, body[data-route="dashboard"] html.login-skeleton-handoff .dashboard-bento, body[data-route="dashboard"] html.login-skeleton-handoff .learning-hero, body[data-route="dashboard"] html.login-skeleton-handoff .metric-card, body[data-route="dashboard"] html.login-skeleton-handoff .events-card, body[data-route="dashboard"] html.login-skeleton-handoff .dashboard-announcements-card, body[data-route="dashboard"] html.login-skeleton-handoff .content-section, body[data-route="dashboard"] html.login-skeleton-handoff .course-card{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}


/* =====================================================================
   MY COURSES UI — route scoped
   Consolidated into assets/css/app.css
   ===================================================================== */

/*
 * Pioneer LMS — My Courses UI v3
 * Uses ONLY the global LMS design tokens. No per-course colour themes.
 */

body[data-route="courses"] .courses-page{
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: 4px 0 38px;
}

/* ---------- Page heading ---------- */
body[data-route="courses"] .courses-page-intro{
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 28px;
}

body[data-route="courses"] .courses-page-intro > div:first-child{ min-width: 0; }

body[data-route="courses"] .courses-page-eyebrow{
    margin-bottom: 7px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--accent);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
body[data-route="courses"] .courses-page-eyebrow .ui-icon{ width: 16px; height: 16px; }

body[data-route="courses"] .courses-page-intro h1{
    margin: 0;
    color: var(--text);
    font-size: clamp(2rem, 3vw, 2.65rem);
    font-weight: 760;
    line-height: 1.08;
    letter-spacing: -.045em;
}

body[data-route="courses"] .courses-page-intro p{
    max-width: 700px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.55;
}

/* ---------- Summary ---------- */
body[data-route="courses"] .courses-summary{
    min-width: 288px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

body[data-route="courses"] .courses-summary > span{
    min-width: 88px;
    padding: 10px 14px 9px;
    display: grid;
    place-items: center;
    gap: 1px;
    text-align: center;
}
body[data-route="courses"] .courses-summary > span + span{ border-left: 1px solid var(--border); }
body[data-route="courses"] .courses-summary strong{
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 780;
    line-height: 1.1;
}
body[data-route="courses"] .courses-summary small{
    color: var(--muted);
    font-size: .61rem;
    font-weight: 700;
}

/* ---------- Search and filters ---------- */
body[data-route="courses"] .courses-toolbar{
    margin-bottom: 14px;
    padding: 9px;
    display: grid;
    grid-template-columns: minmax(280px, 520px) auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

body[data-route="courses"] .courses-search{
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
}
body[data-route="courses"] .courses-search > .ui-icon{
    position: absolute;
    z-index: 1;
    left: 13px;
    width: 17px;
    height: 17px;
    color: var(--muted);
    pointer-events: none;
}
body[data-route="courses"] .courses-search input{
    width: 100%;
    height: 42px;
    padding: 0 40px !important;
    border: 1px solid var(--border) !important;
    border-radius: 11px !important;
    outline: 0;
    background: var(--surface) !important;
    color: var(--text) !important;
    font: inherit;
    font-size: .78rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
body[data-route="courses"] .courses-search input::placeholder{ color: var(--muted); opacity: .72; }
body[data-route="courses"] .courses-search input:focus{
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}
body[data-route="courses"] .courses-search button{
    position: absolute;
    right: 6px;
    width: 30px;
    height: 30px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
body[data-route="courses"] .courses-search button:hover{ background: var(--surface-2); color: var(--text); }
body[data-route="courses"] .courses-search button .ui-icon{ width: 14px; height: 14px; }

body[data-route="courses"] .courses-filters{
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 3px;
    padding: 3px;
    border-radius: 10px;
    background: var(--surface-2);
}
body[data-route="courses"] .courses-filter{
    min-height: 34px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .69rem;
    font-weight: 720;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
body[data-route="courses"] .courses-filter > span{
    min-width: 19px;
    height: 18px;
    padding: 0 5px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 6%, transparent);
    font-size: .56rem;
}
body[data-route="courses"] .courses-filter:hover{ color: var(--text); }
body[data-route="courses"] .courses-filter.active{
    background: var(--surface);
    color: var(--accent);
    box-shadow: 0 1px 5px rgba(45,28,51,.07);
}
body[data-route="courses"] .courses-filter.active > span{ background: var(--accent-soft); color: var(--accent); }
body[data-route="courses"] .courses-filter:focus-visible{ outline: 3px solid color-mix(in srgb, var(--accent) 18%, transparent); outline-offset: 2px; }

body[data-route="courses"] .courses-results-meta{
    min-height: 26px;
    margin: 0 2px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: .66rem;
}
body[data-route="courses"] .courses-results-meta span:first-child{ color: var(--text); font-weight: 750; }

/* ---------- Course grid ---------- */
body[data-route="courses"] .courses-library-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

body[data-route="courses"] .courses-library-card{
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
body[data-route="courses"] .courses-library-card:hover{
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
    box-shadow: var(--shadow);
}
body[data-route="courses"] .courses-library-card[hidden]{ display: none !important; }

body[data-route="courses"] .courses-library-card-link{
    height: 100%;
    min-height: 288px;
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

/* Global-theme header — intentionally no course-specific colour. */
body[data-route="courses"] .courses-card-header{
    min-height: 58px;
    padding: 11px 13px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 34%, var(--surface)));
}

body[data-route="courses"] .courses-card-mark{
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 82%, var(--accent-soft));
    color: var(--accent);
}
body[data-route="courses"] .courses-card-mark .ui-icon{ width: 18px; height: 18px; }

body[data-route="courses"] .courses-card-tags{
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
}
body[data-route="courses"] .courses-card-cohort, body[data-route="courses"] .courses-card-role{
    max-width: 100%;
    padding: 3px 7px;
    overflow: hidden;
    border-radius: 7px;
    background: color-mix(in srgb, var(--surface) 78%, var(--accent-soft));
    color: var(--muted);
    font-size: .55rem;
    font-weight: 760;
    letter-spacing: .055em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
body[data-route="courses"] .courses-card-role{ color: var(--accent); }

body[data-route="courses"] .courses-card-status{
    min-height: 24px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: .56rem;
    font-weight: 760;
    white-space: nowrap;
}
body[data-route="courses"] .courses-card-status.is-completed{
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
    background: color-mix(in srgb, var(--accent-soft) 68%, var(--surface));
    color: var(--accent);
}
body[data-route="courses"] .courses-card-status.is-progress{
    border-color: color-mix(in srgb, var(--info) 24%, var(--border));
    background: color-mix(in srgb, var(--info-soft) 62%, var(--surface));
    color: var(--info);
}
body[data-route="courses"] .courses-card-status.is-not-started{
    background: var(--surface-2);
    color: var(--muted);
}

body[data-route="courses"] .courses-card-body{
    min-height: 230px;
    padding: 14px;
    display: flex;
    flex-direction: column;
}
body[data-route="courses"] .courses-card-copy{ min-width: 0; }
body[data-route="courses"] .courses-card-body h2{
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 0;
    color: var(--text);
    font-size: .96rem;
    font-weight: 760;
    line-height: 1.28;
    letter-spacing: -.025em;
}
body[data-route="courses"] .courses-card-body p{
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: 2.7em;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: .69rem;
    line-height: 1.42;
}

body[data-route="courses"] .courses-card-progress{ margin-top: auto; padding-top: 14px; }
body[data-route="courses"] .courses-progress-head{
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: .62rem;
    font-weight: 680;
}
body[data-route="courses"] .courses-progress-head strong{ color: var(--text); font-size: .67rem; font-weight: 780; }
body[data-route="courses"] .courses-card-progress .progress{
    height: 5px !important;
    margin: 0 !important;
    overflow: hidden;
    border-radius: 999px !important;
    background: var(--surface-3) !important;
}
body[data-route="courses"] .courses-card-progress .progress > span{
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent) !important;
}

body[data-route="courses"] .courses-card-footer{
    margin-top: 12px;
    padding-top: 11px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid var(--border);
}
body[data-route="courses"] .courses-last-activity{
    min-width: 0;
    display: grid;
    gap: 1px;
}
body[data-route="courses"] .courses-last-activity small{ color: var(--muted); font-size: .58rem; }
body[data-route="courses"] .courses-last-activity strong{
    overflow: hidden;
    color: var(--text);
    font-size: .64rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body[data-route="courses"] .courses-open-label{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--accent);
    font-size: .66rem;
    font-weight: 770;
}
body[data-route="courses"] .courses-open-label .ui-icon{
    width: 14px;
    height: 14px;
    transition: transform var(--transition-fast);
}
body[data-route="courses"] .courses-library-card:hover .courses-open-label .ui-icon{ transform: translateX(2px); }

/* ---------- Empty states ---------- */
body[data-route="courses"] .courses-filter-empty, body[data-route="courses"] .courses-no-access{
    min-height: 240px;
    padding: 34px 20px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    border: 1px dashed var(--border);
    border-radius: 16px;
    background: var(--surface);
    text-align: center;
}
body[data-route="courses"] .courses-filter-empty[hidden]{ display: none !important; }
body[data-route="courses"] .courses-filter-empty > span, body[data-route="courses"] .courses-no-access > span{
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
}
body[data-route="courses"] .courses-filter-empty .ui-icon, body[data-route="courses"] .courses-no-access .ui-icon{ width: 20px; height: 20px; }
body[data-route="courses"] .courses-filter-empty h2, body[data-route="courses"] .courses-no-access h2{ margin: 0; color: var(--text); font-size: .98rem; }
body[data-route="courses"] .courses-filter-empty p, body[data-route="courses"] .courses-no-access p{ max-width: 460px; margin: 0; color: var(--muted); font-size: .75rem; }
body[data-route="courses"] .courses-no-access{ grid-template-columns: auto minmax(0, 520px); text-align: left; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
    body[data-route="courses"] .courses-library-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body[data-route="courses"] .courses-page-intro{ gap: 20px; }
}

/* ---------- Mobile / small tablet ---------- */
@media (max-width: 760px) {
    body[data-route="courses"] .courses-page{ padding: 2px 0 92px; }

    body[data-route="courses"] .courses-page-intro{
        margin-bottom: 15px;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 14px;
    }
    body[data-route="courses"] .courses-page-eyebrow{ margin-bottom: 5px; font-size: .66rem; }
    body[data-route="courses"] .courses-page-intro h1{ font-size: clamp(1.85rem, 9vw, 2.2rem); }
    body[data-route="courses"] .courses-page-intro p{ margin-top: 6px; font-size: .8rem; line-height: 1.45; }

    body[data-route="courses"] .courses-summary{
        min-width: 0;
        width: 100%;
        border-radius: 13px;
    }
    body[data-route="courses"] .courses-summary > span{ min-width: 0; padding: 9px 6px 8px; }
    body[data-route="courses"] .courses-summary strong{ font-size: .96rem; }
    body[data-route="courses"] .courses-summary small{ font-size: .58rem; }

    body[data-route="courses"] .courses-toolbar{
        margin-bottom: 13px;
        padding: 7px;
        grid-template-columns: 1fr;
        gap: 7px;
        border-radius: 14px;
    }
    body[data-route="courses"] .courses-search input{ height: 42px; font-size: .78rem; }
    body[data-route="courses"] .courses-filters{
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    body[data-route="courses"] .courses-filter{ width: 100%; min-width: 0; padding: 0 5px; font-size: .66rem; }

    body[data-route="courses"] .courses-results-meta{ margin-bottom: 7px; font-size: .63rem; }
    body[data-route="courses"] .courses-results-meta span:last-child{ display: none; }

    body[data-route="courses"] .courses-library-grid{ grid-template-columns: 1fr; gap: 11px; }

    body[data-route="courses"] .courses-library-card{ border-radius: 15px; }
    body[data-route="courses"] .courses-library-card:hover{ transform: none; box-shadow: var(--shadow-sm); }
    body[data-route="courses"] .courses-library-card-link{ min-height: 0; }

    /* No coloured side rail. A simple global-theme header row. */
    body[data-route="courses"] .courses-card-header{
        min-height: 52px;
        padding: 9px 11px;
        grid-template-columns: 32px minmax(0, 1fr) auto;
        gap: 8px;
        background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
    }
    body[data-route="courses"] .courses-card-mark{ width: 32px; height: 32px; border-radius: 9px; }
    body[data-route="courses"] .courses-card-mark .ui-icon{ width: 17px; height: 17px; }
    body[data-route="courses"] .courses-card-status{ min-height: 22px; padding-inline: 7px; font-size: .53rem; }
    body[data-route="courses"] .courses-card-cohort, body[data-route="courses"] .courses-card-role{ padding: 3px 6px; font-size: .51rem; }

    body[data-route="courses"] .courses-card-body{ min-height: 0; padding: 12px 12px 11px; }
    body[data-route="courses"] .courses-card-body h2{ font-size: .94rem; line-height: 1.26; }
    body[data-route="courses"] .courses-card-body p{ min-height: 0; margin-top: 5px; font-size: .66rem; line-height: 1.38; }
    body[data-route="courses"] .courses-card-progress{ margin-top: 13px; padding-top: 0; }
    body[data-route="courses"] .courses-progress-head{ margin-bottom: 5px; }
    body[data-route="courses"] .courses-card-progress .progress{ height: 4px !important; }
    body[data-route="courses"] .courses-card-footer{ margin-top: 10px; padding-top: 9px; }
    body[data-route="courses"] .courses-open-label{ font-size: .63rem; }
}

@media (max-width: 420px) {
    body[data-route="courses"] .courses-page-intro h1{ font-size: 1.9rem; }
    body[data-route="courses"] .courses-page-intro p{ font-size: .76rem; }
    body[data-route="courses"] .courses-toolbar{ padding: 6px; }
    body[data-route="courses"] .courses-filter{ gap: 4px; font-size: .62rem; }
    body[data-route="courses"] .courses-filter > span{ min-width: 18px; height: 17px; padding-inline: 4px; }
    body[data-route="courses"] .courses-card-header{ grid-template-columns: 30px minmax(0, 1fr) auto; padding: 8px 10px; }
    body[data-route="courses"] .courses-card-mark{ width: 30px; height: 30px; }
    body[data-route="courses"] .courses-card-status{ padding-inline: 6px; }
    body[data-route="courses"] .courses-card-body{ padding: 11px 10px 10px; }
    body[data-route="courses"] .courses-card-footer{ gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    body[data-route="courses"] .courses-library-card, body[data-route="courses"] .courses-open-label .ui-icon, body[data-route="courses"] .courses-filter, body[data-route="courses"] .courses-search input{ transition: none !important; }
}


/* =====================================================================
   INVISIBLE SCROLLBARS
   Consolidated into assets/css/app.css
   ===================================================================== */

/*
 * Pioneer LMS — Invisible Scrollbars
 * Scrolling remains functional with mouse wheel, trackpad, touch,
 * keyboard and horizontal swipe. Only the visible scrollbar is hidden.
 */

html,
body,
* {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track,
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
}

.nav-list,
.app-frame,
#main-content,
.data-table-wrap,
.course-tabs,
.workspace-tabs,
.morph-skeleton-overlay,
.morph-content,
.sidebar,
.sidebar-inner {
    scrollbar-gutter: auto !important;
}

.nav-list,
.data-table-wrap,
.course-tabs,
.workspace-tabs,
.morph-skeleton-overlay,
.app-frame,
#main-content {
    -webkit-overflow-scrolling: touch;
}


/* =====================================================================
   SIDEBAR UI
   Consolidated into assets/css/app.css
   ===================================================================== */

/* =====================================================================
   Pioneer LMS — Sidebar UI v1
   Clean navigation refinement using the existing global theme tokens.
   No route, permission, collapse, or mobile drawer logic is changed.
   ===================================================================== */

/* Preserve existing shell geometry so dashboard/login skeleton alignment
   and app-frame positioning remain unchanged. */
:root {
    --sidebar-expanded: 260px;
    --sidebar-collapsed: 68px;
}

.sidebar {
    padding: 14px 12px 14px !important;
    background: var(--surface) !important;
    border-right: 1px solid color-mix(in srgb, var(--border) 88%, transparent) !important;
    box-shadow: 2px 0 18px rgba(40, 24, 46, .035) !important;
}

/* ---------- Brand ---------- */
.sidebar-header {
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 4px 12px !important;
    margin: 0 0 8px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent) !important;
    flex: 0 0 auto !important;
}

.sidebar-header .brand {
    min-width: 0 !important;
    gap: 10px !important;
}

.sidebar .brand-logo,
.sidebar .brand img {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 13%, transparent) !important;
    transform: none !important;
}

.sidebar .brand:hover .brand-logo,
.sidebar .brand:hover img {
    transform: none !important;
}

.sidebar .brand-text {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
    align-content: center !important;
}

.sidebar .brand-text strong {
    color: var(--text) !important;
    font-size: .92rem !important;
    font-weight: 750 !important;
    line-height: 1.1 !important;
    letter-spacing: -.015em !important;
}

.sidebar .brand-text small {
    display: block !important;
    color: var(--muted) !important;
    font-size: .61rem !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    letter-spacing: .025em !important;
}

.sidebar-toggle-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex: 0 0 34px !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: var(--surface) !important;
    color: var(--muted) !important;
    box-shadow: none !important;
    transform: none !important;
}

.sidebar-toggle-btn:hover,
.sidebar-toggle-btn:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--border)) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-strong) !important;
    transform: none !important;
    outline: 0 !important;
}

.sidebar-toggle-icon {
    width: 17px !important;
    height: 17px !important;
}

/* ---------- Navigation hierarchy ---------- */
.nav-list {
    padding: 4px 0 10px !important;
    gap: 3px !important;
}

.sidebar-section-label {
    margin: 10px 10px 5px !important;
    color: color-mix(in srgb, var(--muted) 78%, transparent) !important;
    font-size: .61rem !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    letter-spacing: .095em !important;
    text-transform: uppercase !important;
    user-select: none !important;
}

.sidebar-section-label:first-child {
    margin-top: 4px !important;
}

.sidebar-tools-label {
    margin-top: 15px !important;
}

.sidebar .nav-link {
    min-height: 42px !important;
    gap: 10px !important;
    padding: 5px 8px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: var(--muted) !important;
    font-size: .82rem !important;
    font-weight: 620 !important;
    transform: none !important;
    box-shadow: none !important;
    transition: background .16s ease, color .16s ease, border-color .16s ease !important;
}

.sidebar .nav-link:hover {
    border-color: color-mix(in srgb, var(--border) 82%, transparent) !important;
    background: var(--surface-2) !important;
    color: var(--text) !important;
    transform: none !important;
}

.sidebar .nav-link.active {
    border-color: color-mix(in srgb, var(--accent) 12%, var(--border)) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-strong) !important;
    font-weight: 720 !important;
    box-shadow: none !important;
}

.sidebar .nav-link.active::before {
    left: -1px !important;
    top: 50% !important;
    width: 3px !important;
    height: 20px !important;
    border-radius: 0 4px 4px 0 !important;
    background: var(--accent) !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
}

.sidebar .nav-glyph {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: currentColor !important;
    transition: background .16s ease, color .16s ease !important;
}

.sidebar .nav-glyph svg {
    width: 18px !important;
    height: 18px !important;
    transform: none !important;
    transition: none !important;
}

.sidebar .nav-link:hover .nav-glyph svg,
.sidebar .nav-link[href*="settings"]:hover .nav-glyph svg,
.sidebar .nav-link[href*="logout"]:hover .nav-glyph svg,
.sidebar .logout-form:hover button .nav-glyph svg,
.sidebar .nav-link[href*="dashboard"]:hover .nav-glyph svg,
.sidebar .nav-link[href*="courses"]:hover .nav-glyph svg,
.sidebar .nav-link[href*="calendar"]:hover .nav-glyph svg {
    transform: none !important;
}

.sidebar .nav-link.active .nav-glyph {
    background: color-mix(in srgb, var(--accent) 9%, var(--surface)) !important;
    color: var(--accent-strong) !important;
}

.sidebar .nav-link > span:last-child {
    font-weight: inherit !important;
}

/* ---------- Learning tools ---------- */
.sidebar .nav-group {
    margin: 0 !important;
    padding: 0 !important;
}

.sidebar .nav-group > summary.nav-link {
    cursor: pointer !important;
    list-style: none !important;
}

.sidebar .nav-group[open] > summary.nav-link {
    color: var(--text) !important;
    background: color-mix(in srgb, var(--surface-2) 70%, transparent) !important;
}

.sidebar .nav-group[open] > summary.nav-link:has(+ .nav-sublist .nav-sublink.active) {
    color: var(--accent-strong) !important;
    background: var(--accent-soft) !important;
}

.sidebar .nav-chevron {
    width: 15px !important;
    height: 15px !important;
    margin-left: auto !important;
    color: var(--muted) !important;
    transition: transform .18s ease !important;
}

.sidebar .nav-sublist {
    position: relative !important;
    display: grid !important;
    gap: 2px !important;
    margin: 4px 0 5px 38px !important;
    padding: 2px 0 2px 12px !important;
    border-left: 1px solid color-mix(in srgb, var(--border) 82%, transparent) !important;
}

.sidebar .nav-sublink {
    min-height: 32px !important;
    padding: 7px 9px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 8px !important;
    color: var(--muted) !important;
    font-size: .73rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

.sidebar .nav-sublink:hover {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

.sidebar .nav-sublink.active {
    background: var(--accent-soft) !important;
    color: var(--accent-strong) !important;
    font-weight: 720 !important;
}

/* ---------- Footer ---------- */
.sidebar-footer {
    gap: 2px !important;
    padding-top: 10px !important;
    border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent) !important;
}

.sidebar-footer .nav-link {
    min-height: 40px !important;
}

.sidebar-footer .logout-form button.nav-link:hover {
    border-color: color-mix(in srgb, var(--danger) 12%, var(--border)) !important;
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
}

/* ---------- Collapsed desktop rail ---------- */
@media (min-width: 861px) {
    html.sidebar-collapsed .sidebar,
    body.sidebar-collapsed .sidebar,
    .sidebar.collapsed {
        padding: 14px 10px !important;
    }

    html.sidebar-collapsed .sidebar-header,
    body.sidebar-collapsed .sidebar-header,
    .sidebar.collapsed .sidebar-header {
        width: 100% !important;
        min-height: 52px !important;
        padding: 0 0 10px !important;
        justify-content: center !important;
    }

    html.sidebar-collapsed .brand,
    body.sidebar-collapsed .brand,
    .sidebar.collapsed .brand {
        display: none !important;
    }

    html.sidebar-collapsed .sidebar-toggle-btn,
    body.sidebar-collapsed .sidebar-toggle-btn,
    .sidebar.collapsed .sidebar-toggle-btn {
        display: grid !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    html.sidebar-collapsed .sidebar-section-label,
    body.sidebar-collapsed .sidebar-section-label,
    .sidebar.collapsed .sidebar-section-label {
        display: none !important;
    }

    html.sidebar-collapsed .nav-list,
    body.sidebar-collapsed .nav-list,
    .sidebar.collapsed .nav-list {
        gap: 4px !important;
    }

    html.sidebar-collapsed .nav-link,
    body.sidebar-collapsed .nav-link,
    .sidebar.collapsed .nav-link,
    html.sidebar-collapsed .sidebar-footer .nav-link,
    body.sidebar-collapsed .sidebar-footer .nav-link,
    .sidebar.collapsed .sidebar-footer .nav-link {
        width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 11px !important;
        border-color: transparent !important;
    }

    html.sidebar-collapsed .nav-link:hover,
    body.sidebar-collapsed .nav-link:hover,
    .sidebar.collapsed .nav-link:hover {
        background: var(--surface-2) !important;
        transform: none !important;
    }

    html.sidebar-collapsed .nav-link.active,
    body.sidebar-collapsed .nav-link.active,
    .sidebar.collapsed .nav-link.active {
        background: var(--accent-soft) !important;
        color: var(--accent-strong) !important;
    }

    html.sidebar-collapsed .nav-link.active::before,
    body.sidebar-collapsed .nav-link.active::before,
    .sidebar.collapsed .nav-link.active::before {
        left: -10px !important;
        width: 3px !important;
        height: 20px !important;
        box-shadow: none !important;
    }

    html.sidebar-collapsed .nav-glyph,
    body.sidebar-collapsed .nav-glyph,
    .sidebar.collapsed .nav-glyph {
        width: 28px !important;
        height: 28px !important;
        background: transparent !important;
    }

    html.sidebar-collapsed .nav-link.active .nav-glyph,
    body.sidebar-collapsed .nav-link.active .nav-glyph,
    .sidebar.collapsed .nav-link.active .nav-glyph {
        background: transparent !important;
    }

    html.sidebar-collapsed .nav-group,
    body.sidebar-collapsed .nav-group,
    .sidebar.collapsed .nav-group {
        width: auto !important;
    }
}

/* ---------- Mobile drawer ---------- */
@media (max-width: 860px) {
    .sidebar,
    html.sidebar-collapsed .sidebar,
    body.sidebar-collapsed .sidebar,
    .sidebar.collapsed {
        width: min(86vw, 300px) !important;
        max-width: 300px !important;
        padding:
            max(12px, env(safe-area-inset-top))
            12px
            max(12px, env(safe-area-inset-bottom)) !important;
        border-radius: 0 16px 16px 0 !important;
        box-shadow: 14px 0 38px rgba(24, 17, 28, .14) !important;
    }

    .sidebar-header {
        min-height: 54px !important;
        padding: 0 2px 10px !important;
        margin-bottom: 3px !important;
    }

    .sidebar .brand-logo,
    .sidebar .brand img {
        width: 36px !important;
        height: 36px !important;
        flex-basis: 36px !important;
    }

    .sidebar .brand-text strong {
        font-size: .9rem !important;
    }

    .sidebar .brand-text small {
        font-size: .59rem !important;
    }

    .sidebar-mobile-close {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
        border-radius: 9px !important;
        background: var(--surface-2) !important;
        border-color: transparent !important;
    }

    .nav-list {
        padding: 4px 0 8px !important;
    }

    .sidebar-section-label {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }

    .sidebar .nav-link,
    html.sidebar-collapsed .nav-link,
    body.sidebar-collapsed .nav-link,
    .sidebar.collapsed .nav-link {
        min-height: 42px !important;
        padding: 5px 8px !important;
        gap: 9px !important;
        border-radius: 10px !important;
    }

    .sidebar .nav-sublist {
        margin-left: 36px !important;
    }

    .sidebar-footer,
    html.sidebar-collapsed .sidebar-footer,
    body.sidebar-collapsed .sidebar-footer,
    .sidebar.collapsed .sidebar-footer {
        padding-top: 8px !important;
        gap: 1px !important;
    }
}

@media (max-height: 700px) and (min-width: 861px) {
    .sidebar-section-label {
        margin-top: 6px !important;
        margin-bottom: 3px !important;
    }

    .sidebar-tools-label {
        margin-top: 9px !important;
    }

    .sidebar .nav-link {
        min-height: 38px !important;
    }

    .sidebar .nav-sublink {
        min-height: 29px !important;
        padding-block: 5px !important;
    }

    .sidebar-footer .nav-link {
        min-height: 36px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar *,
    .sidebar *::before,
    .sidebar *::after {
        transition: none !important;
    }
}

/* =====================================================================
   SIDEBAR COLLAPSED BRAND / EXPAND REVEAL
   - Expanded sidebar keeps the existing brand + toggle layout.
   - Collapsed rail shows the Pioneer logo by default.
   - Hover/focus on the top brand slot reveals the existing expand button.
   ===================================================================== */
@media (min-width: 861px) {
    html.sidebar-collapsed .sidebar-header,
    body.sidebar-collapsed .sidebar-header,
    .sidebar.collapsed .sidebar-header {
        position: relative !important;
        width: 100% !important;
        min-height: 52px !important;
        padding: 0 0 10px !important;
        display: grid !important;
        place-items: center !important;
        overflow: visible !important;
    }

    /* Keep the real Pioneer logo visible in collapsed mode. */
    html.sidebar-collapsed .sidebar-header .brand,
    body.sidebar-collapsed .sidebar-header .brand,
    .sidebar.collapsed .sidebar-header .brand {
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: grid !important;
        place-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        overflow: visible !important;
        border-radius: 12px !important;
        transform: translateX(-50%) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transition: opacity .16s ease, transform .18s ease, background .16s ease !important;
    }

    html.sidebar-collapsed .sidebar-header .brand-logo,
    html.sidebar-collapsed .sidebar-header .brand img,
    body.sidebar-collapsed .sidebar-header .brand-logo,
    body.sidebar-collapsed .sidebar-header .brand img,
    .sidebar.collapsed .sidebar-header .brand-logo,
    .sidebar.collapsed .sidebar-header .brand img {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
        border-radius: 10px !important;
        opacity: 1 !important;
        transform: scale(1) !important;
        transition: opacity .16s ease, transform .18s cubic-bezier(.2,.8,.2,1) !important;
    }

    /* Brand text remains hidden in the icon rail. */
    html.sidebar-collapsed .sidebar-header .brand-text,
    html.sidebar-collapsed .sidebar-header .brand > span,
    body.sidebar-collapsed .sidebar-header .brand-text,
    body.sidebar-collapsed .sidebar-header .brand > span,
    .sidebar.collapsed .sidebar-header .brand-text,
    .sidebar.collapsed .sidebar-header .brand > span {
        display: none !important;
        opacity: 0 !important;
        max-width: 0 !important;
        pointer-events: none !important;
    }

    /* Same existing toggle button is layered over the logo, hidden at rest. */
    html.sidebar-collapsed .sidebar-header .sidebar-toggle-btn,
    body.sidebar-collapsed .sidebar-header .sidebar-toggle-btn,
    .sidebar.collapsed .sidebar-header .sidebar-toggle-btn {
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        margin: 0 !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 12px !important;
        border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
        background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)) !important;
        color: var(--accent-strong) !important;
        box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 11%, transparent) !important;
        transform: translateX(-50%) scale(.82) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
        transition: opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1), visibility 0s linear .2s !important;
        z-index: 3 !important;
    }

    /* Hovering/focusing the top slot cross-fades logo -> expand button. */
    html.sidebar-collapsed .sidebar-header:hover .brand,
    html.sidebar-collapsed .sidebar-header:focus-within .brand,
    body.sidebar-collapsed .sidebar-header:hover .brand,
    body.sidebar-collapsed .sidebar-header:focus-within .brand,
    .sidebar.collapsed .sidebar-header:hover .brand,
    .sidebar.collapsed .sidebar-header:focus-within .brand {
        opacity: 0 !important;
        transform: translateX(-50%) scale(.84) !important;
        pointer-events: none !important;
    }

    html.sidebar-collapsed .sidebar-header:hover .sidebar-toggle-btn,
    html.sidebar-collapsed .sidebar-header:focus-within .sidebar-toggle-btn,
    body.sidebar-collapsed .sidebar-header:hover .sidebar-toggle-btn,
    body.sidebar-collapsed .sidebar-header:focus-within .sidebar-toggle-btn,
    .sidebar.collapsed .sidebar-header:hover .sidebar-toggle-btn,
    .sidebar.collapsed .sidebar-header:focus-within .sidebar-toggle-btn {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(-50%) scale(1) !important;
        transition-delay: 0s !important;
    }

    html.sidebar-collapsed .sidebar-header .sidebar-toggle-btn:hover,
    html.sidebar-collapsed .sidebar-header .sidebar-toggle-btn:focus-visible,
    body.sidebar-collapsed .sidebar-header .sidebar-toggle-btn:hover,
    body.sidebar-collapsed .sidebar-header .sidebar-toggle-btn:focus-visible,
    .sidebar.collapsed .sidebar-header .sidebar-toggle-btn:hover,
    .sidebar.collapsed .sidebar-header .sidebar-toggle-btn:focus-visible {
        background: var(--accent-soft) !important;
        border-color: color-mix(in srgb, var(--accent) 30%, var(--border)) !important;
        color: var(--accent-strong) !important;
        box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 14%, transparent) !important;
    }
}


/* =====================================================================
   COLLAPSED SIDEBAR — LEARNING TOOLS FLY-OUT
   Keeps the narrow icon rail clean while making the grouped learning
   destinations fully usable without expanding the whole sidebar.
   ===================================================================== */
@media (min-width: 861px) {
    html.sidebar-collapsed .sidebar .nav-group > summary.nav-link,
    body.sidebar-collapsed .sidebar .nav-group > summary.nav-link,
    .sidebar.collapsed .nav-group > summary.nav-link {
        cursor: pointer !important;
    }

    /* Native submenu stays hidden inside the rail; JS renders the fly-out. */
    html.sidebar-collapsed .sidebar .nav-group .nav-sublist,
    body.sidebar-collapsed .sidebar .nav-group .nav-sublist,
    .sidebar.collapsed .nav-group .nav-sublist {
        display: none !important;
    }

    html.sidebar-collapsed .sidebar .nav-group > summary.nav-link[aria-expanded="true"],
    body.sidebar-collapsed .sidebar .nav-group > summary.nav-link[aria-expanded="true"],
    .sidebar.collapsed .nav-group > summary.nav-link[aria-expanded="true"] {
        border-color: color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
        background: var(--accent-soft) !important;
        color: var(--accent-strong) !important;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent) !important;
    }
}

.sidebar-learning-flyout {
    position: fixed;
    z-index: 1600;
    width: min(238px, calc(100vw - 24px));
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 97%, transparent);
    box-shadow:
        0 18px 46px rgba(31, 20, 42, .15),
        0 2px 8px rgba(31, 20, 42, .06);
    opacity: 0;
    transform: translateX(-6px) scale(.985);
    transform-origin: left center;
    pointer-events: none;
    transition: opacity .14s ease, transform .16s cubic-bezier(.2,.75,.25,1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.sidebar-learning-flyout.is-open {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

.sidebar-learning-flyout-heading {
    padding: 9px 10px 8px;
    display: grid;
    gap: 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.sidebar-learning-flyout-heading > span {
    color: var(--text);
    font-size: .78rem;
    font-weight: 760;
    letter-spacing: -.01em;
}

.sidebar-learning-flyout-heading > small {
    color: var(--muted);
    font-size: .63rem;
    line-height: 1.35;
}

.sidebar-learning-flyout-menu {
    padding-top: 6px;
    display: grid;
    gap: 3px;
}

.sidebar-learning-flyout-link {
    min-height: 38px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--text);
    font-size: .73rem;
    font-weight: 640;
    line-height: 1.25;
    text-decoration: none;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.sidebar-learning-flyout-link:hover,
.sidebar-learning-flyout-link:focus-visible {
    outline: 0;
    border-color: color-mix(in srgb, var(--accent) 10%, var(--border));
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
    color: var(--accent-strong);
}

.sidebar-learning-flyout-link.active {
    border-color: color-mix(in srgb, var(--accent) 14%, var(--border));
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 740;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-learning-flyout {
        transition: none !important;
    }
}

/* =====================================================================
   TOPBAR SEARCH — clean unified search surface
   Current live baseline refinement.
   Search behavior/routes remain unchanged.
   ===================================================================== */

.topbar .global-search {
    position: relative !important;
    flex: 1 1 420px !important;
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    min-width: 260px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 9px 0 14px !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent) !important;
    border-radius: 13px !important;
    background: color-mix(in srgb, var(--surface) 96%, var(--bg)) !important;
    color: var(--muted) !important;

    box-shadow:
        0 1px 2px rgba(22, 18, 31, .025),
        0 4px 14px rgba(22, 18, 31, .025) !important;

    transform: none !important;
    overflow: hidden !important;

    transition:
        border-color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease !important;
}

.topbar .global-search:hover {
    border-color: color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
    background: var(--surface) !important;
}

.topbar .global-search:focus-within {
    border-color: color-mix(in srgb, var(--accent) 64%, var(--border)) !important;
    background: var(--surface) !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent),
        0 5px 18px rgba(22, 18, 31, .045) !important;
    transform: none !important;
}

/* Make the input visually part of the search surface — never a second box. */
.topbar .global-search input,
.topbar .global-search input[type="search"] {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    color: var(--text) !important;
    font: inherit !important;
    font-size: .86rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    appearance: none;
    -webkit-appearance: none;
}

.topbar .global-search input:hover,
.topbar .global-search input:focus {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.topbar .global-search input::placeholder {
    color: color-mix(in srgb, var(--muted) 82%, transparent) !important;
    opacity: 1 !important;
    font-weight: 450 !important;
}

/* Preserve the browser clear affordance but keep it visually quiet. */
.topbar .global-search input::-webkit-search-decoration {
    display: none;
}

.topbar .global-search input::-webkit-search-cancel-button {
    cursor: pointer;
    opacity: .48;
}

.topbar .global-search .search-icon,
.topbar .global-search > svg:first-of-type {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    color: color-mix(in srgb, var(--muted) 92%, transparent) !important;
    stroke-width: 2 !important;
    transition: color .18s ease !important;
}

.topbar .global-search:focus-within .search-icon,
.topbar .global-search:focus-within > svg:first-of-type {
    color: var(--accent) !important;
}

/* Keyboard shortcut should look like a quiet hint, not another button. */
.topbar .global-search kbd {
    flex: 0 0 auto !important;
    min-width: 44px !important;
    height: 26px !important;
    padding: 0 7px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid color-mix(in srgb, var(--border) 92%, transparent) !important;
    border-radius: 7px !important;
    background: var(--surface-2) !important;
    box-shadow: none !important;

    color: color-mix(in srgb, var(--muted) 92%, transparent) !important;
    font-family: inherit !important;
    font-size: .65rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;

    opacity: 1 !important;
    transition:
        opacity .15s ease,
        border-color .15s ease,
        color .15s ease !important;
}

.topbar .global-search:focus-within kbd {
    opacity: .58 !important;
    border-color: color-mix(in srgb, var(--accent) 16%, var(--border)) !important;
}

/* Medium desktop/tablet: keep search useful without taking over the topbar. */
@media (min-width: 861px) and (max-width: 1180px) {
    .topbar .global-search {
        flex-basis: 320px !important;
        max-width: 460px !important;
        min-width: 220px !important;
    }
}

/* Mobile keeps the approved two-row topbar, with a cleaner search row. */
@media (max-width: 860px) {
    .topbar .global-search {
        order: 3 !important;
        flex: 1 0 100% !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 13px !important;

        border-radius: 12px !important;
        background: var(--surface) !important;
        box-shadow: 0 1px 3px rgba(22, 18, 31, .025) !important;
        transform: none !important;
    }

    .topbar .global-search input,
    .topbar .global-search input[type="search"] {
        font-size: .84rem !important;
    }

    .topbar .global-search kbd {
        display: none !important;
    }

    .topbar .global-search .search-icon,
    .topbar .global-search > svg:first-of-type {
        width: 18px !important;
        height: 18px !important;
        flex-basis: 18px !important;
    }
}

/* Narrow phones: let the placeholder breathe without increasing topbar height. */
@media (max-width: 390px) {
    .topbar .global-search {
        height: 42px !important;
        padding-inline: 12px !important;
        gap: 9px !important;
    }

    .topbar .global-search input,
    .topbar .global-search input[type="search"] {
        font-size: .81rem !important;
    }
}

/* Landscape phone keeps search inline but uses the same clean styling. */
@media (max-width: 860px) and (max-height: 520px) and (orientation: landscape) {
    .topbar .global-search {
        order: 2 !important;
        flex: 1 1 auto !important;
        width: auto !important;
        height: 40px !important;
        border-radius: 11px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .topbar .global-search,
    .topbar .global-search *,
    .topbar .global-search *::before,
    .topbar .global-search *::after {
        transition-duration: .01ms !important;
    }
}

/* =====================================================================
   TOPBAR ALIGNMENT & SPACING — v2
   Balanced shell alignment without changing any topbar functionality.
   ===================================================================== */

/* Desktop: one stable center line for search + actions + profile. */
@media (min-width: 861px) {
    .topbar,
    .topbar.scrolled {
        height: 76px !important;
        min-height: 76px !important;
        padding: 0 42px !important;
        gap: 20px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        background: color-mix(in srgb, var(--bg) 91%, transparent) !important;
        border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent) !important;
        box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 35%, transparent) !important;
    }

    .topbar .mobile-menu {
        display: none !important;
    }

    .topbar .global-search {
        flex: 0 1 720px !important;
        width: clamp(360px, 46vw, 720px) !important;
        max-width: 720px !important;
        min-width: 300px !important;
        height: 46px !important;

        margin: 0 !important;
        padding: 0 10px 0 15px !important;
        gap: 11px !important;

        border-radius: 14px !important;
        border-width: 1px !important;
        box-shadow: 0 2px 8px rgba(22, 18, 31, .025) !important;
    }

    .topbar .global-search input,
    .topbar .global-search input[type="search"] {
        font-size: .88rem !important;
        line-height: 1.25 !important;
    }

    .topbar .global-search kbd {
        height: 27px !important;
        min-width: 46px !important;
        padding-inline: 8px !important;
        border-radius: 7px !important;
    }

    .topbar .top-actions {
        flex: 0 0 auto !important;
        margin-left: auto !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
    }

    .topbar .top-actions > .icon-button,
    .topbar .top-actions .theme-toggle-btn,
    .topbar .top-actions .chat-button,
    .topbar .top-actions .notification-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        flex: 0 0 44px !important;

        border-width: 1px !important;
        border-radius: 13px !important;
        box-shadow: 0 2px 8px rgba(22, 18, 31, .028) !important;
        transform: none !important;
    }

    .topbar .top-actions > .icon-button:hover,
    .topbar .top-actions .theme-toggle-btn:hover,
    .topbar .top-actions .chat-button:hover,
    .topbar .top-actions .notification-button:hover {
        transform: none !important;
        box-shadow: 0 4px 12px rgba(22, 18, 31, .045) !important;
    }

    .topbar .top-actions .icon-button svg,
    .topbar .top-actions .theme-icon,
    .topbar .top-actions .chat-icon,
    .topbar .top-actions .bell-icon {
        width: 20px !important;
        height: 20px !important;
    }

    /* Keep profile height aligned with the search and icon controls. */
    .topbar .profile-dropdown-wrap {
        height: 46px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .topbar button.profile-chip,
    .topbar .profile-chip {
        min-height: 46px !important;
        height: 46px !important;
        padding: 4px 14px 4px 5px !important;
        gap: 10px !important;

        display: inline-flex !important;
        align-items: center !important;

        border-width: 1px !important;
        box-shadow: 0 2px 8px rgba(22, 18, 31, .028) !important;
        transform: none !important;
    }

    .topbar button.profile-chip:hover,
    .topbar .profile-dropdown-wrap.is-open button.profile-chip,
    .topbar .profile-chip:hover {
        transform: none !important;
        box-shadow: 0 4px 12px rgba(22, 18, 31, .05) !important;
    }

    .topbar .profile-chip .avatar-wrapper,
    .topbar .profile-chip .avatar,
    .topbar .profile-chip .avatar-image {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
    }

    .topbar .profile-chip:hover .avatar {
        transform: none !important;
    }

    .topbar .profile-copy {
        min-width: 78px !important;
        display: grid !important;
        align-content: center !important;
        gap: 1px !important;
        line-height: 1.15 !important;
    }

    .topbar .profile-copy strong {
        margin: 0 !important;
        font-size: .82rem !important;
        line-height: 1.15 !important;
    }

    .topbar .profile-copy small {
        margin: 0 !important;
        font-size: .69rem !important;
        line-height: 1.15 !important;
    }

    /* Notification number should not disturb the control's alignment. */
    .topbar .count {
        top: -5px !important;
        right: -5px !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 4px !important;
        font-size: .62rem !important;
        line-height: 1 !important;
        border-width: 2px !important;
    }
}

/* Mid-size desktop / landscape tablet: give search room without crowding actions. */
@media (min-width: 861px) and (max-width: 1180px) {
    .topbar,
    .topbar.scrolled {
        padding-inline: 24px !important;
        gap: 14px !important;
    }

    .topbar .global-search {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: 520px !important;
        min-width: 220px !important;
    }

    .topbar .top-actions {
        gap: 7px !important;
    }

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

    .topbar button.profile-chip,
    .topbar .profile-chip {
        width: 44px !important;
        min-width: 44px !important;
        padding: 4px !important;
        justify-content: center !important;
    }
}

/* Mobile: preserve the approved two-row layout, but align both rows cleanly. */
@media (max-width: 860px) {
    .topbar,
    .topbar.scrolled {
        min-height: 104px !important;
        height: auto !important;
        padding:
            max(9px, env(safe-area-inset-top))
            12px
            10px !important;

        column-gap: 8px !important;
        row-gap: 9px !important;
        align-items: center !important;
        align-content: center !important;
    }

    .topbar .mobile-menu {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        flex: 0 0 40px !important;
        border-radius: 11px !important;
    }

    .topbar .top-actions {
        gap: 6px !important;
        align-items: center !important;
    }

    .topbar .top-actions > .icon-button,
    .topbar .top-actions .theme-toggle-btn,
    .topbar .top-actions .chat-button,
    .topbar .top-actions .notification-button,
    .topbar .top-actions .profile-chip {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .topbar .top-actions .profile-chip {
        padding: 2px !important;
    }

    .topbar .top-actions .profile-chip .avatar-wrapper,
    .topbar .top-actions .profile-chip .avatar,
    .topbar .top-actions .profile-chip .avatar-image {
        width: 34px !important;
        height: 34px !important;
    }

    .topbar .global-search {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 44px !important;
        margin: 0 !important;

        padding: 0 13px !important;
        gap: 10px !important;

        border-radius: 12px !important;
    }

    .topbar .global-search input,
    .topbar .global-search input[type="search"] {
        font-size: .84rem !important;
    }
}

@media (max-width: 390px) {
    .topbar,
    .topbar.scrolled {
        padding-inline: 10px !important;
        column-gap: 6px !important;
    }

    .topbar .top-actions {
        gap: 4px !important;
    }

    .topbar .mobile-menu,
    .topbar .top-actions > .icon-button,
    .topbar .top-actions .theme-toggle-btn,
    .topbar .top-actions .chat-button,
    .topbar .top-actions .notification-button,
    .topbar .top-actions .profile-chip {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    .topbar .global-search {
        height: 42px !important;
    }
}



/* =====================================================================
   INDIVIDUAL COURSE PAGE — UI/UX v2
   Global Pioneer theme only. Scoped to .course-page-v2.
   ===================================================================== */

.course-page-v2{width:min(1180px,100%);margin:0 auto;display:grid;gap:18px}
.course-page-back{width:max-content;display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.78rem;font-weight:700;text-decoration:none;transition:color .16s ease}
.course-page-back:hover{color:var(--accent);text-decoration:none}.course-page-back .ui-icon{width:16px;height:16px}
.course-overview-card{min-width:0;padding:clamp(26px,3.5vw,42px);display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:clamp(28px,4vw,54px);align-items:center;border:1px solid var(--border);border-radius:22px;background:radial-gradient(circle at 92% 10%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 17rem),var(--surface);box-shadow:0 10px 32px rgba(28,21,40,.035);overflow:hidden}
.course-overview-copy{min-width:0}.course-overview-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:15px}
.course-overview-cohort,.course-overview-state{min-height:26px;padding:4px 9px;display:inline-flex;align-items:center;border-radius:999px;font-size:.65rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.course-overview-cohort{background:var(--surface-2);color:var(--muted)}
.course-overview-state{border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border));background:color-mix(in srgb,var(--accent) 7%,var(--surface));color:var(--accent)}
.course-overview-state.is-completed{background:color-mix(in srgb,var(--success,#198754) 8%,var(--surface));border-color:color-mix(in srgb,var(--success,#198754) 18%,var(--border));color:var(--success,#198754)}
.course-overview-state.is-role{background:color-mix(in srgb,var(--accent) 7%,var(--surface));color:var(--accent)}
.course-overview-copy h1{max-width:760px;margin:0;color:var(--text);font-size:clamp(2rem,4vw,3.1rem);line-height:1.04;letter-spacing:-.045em}
.course-overview-copy>p{max-width:720px;margin:15px 0 0;color:var(--muted);font-size:.92rem;line-height:1.6}
.course-overview-stats{margin-top:26px;display:flex;align-items:stretch;flex-wrap:wrap;gap:0}
.course-overview-stats>span{min-width:104px;padding:0 22px;display:grid;gap:4px;border-left:1px solid var(--border)}
.course-overview-stats>span:first-child{padding-left:0;border-left:0}.course-overview-stats small{color:var(--muted);font-size:.67rem;font-weight:650}.course-overview-stats strong{color:var(--text);font-size:1.15rem;line-height:1}
.course-progress-panel{min-width:0;padding:20px;display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;align-items:center;border:1px solid color-mix(in srgb,var(--accent) 12%,var(--border));border-radius:18px;background:color-mix(in srgb,var(--accent) 3.5%,var(--surface))}
.course-progress-ring{--course-progress:0%;width:104px;height:104px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,var(--surface) 59%,transparent 60%),conic-gradient(var(--accent) var(--course-progress),var(--border) 0)}
.course-progress-ring>span{display:grid;justify-items:center;gap:2px}.course-progress-ring strong{color:var(--text);font-size:1.45rem;line-height:1}.course-progress-ring small{color:var(--muted);font-size:.61rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.course-progress-copy{min-width:0;display:grid;gap:7px}.course-progress-copy>strong{color:var(--text);font-size:.83rem;line-height:1.35}.course-progress-copy>p{margin:0;color:var(--muted);font-size:.71rem;line-height:1.45}
.course-continue-btn{width:max-content!important;min-height:39px!important;margin-top:4px;padding:8px 12px!important;gap:6px!important;border-radius:10px!important;font-size:.72rem!important}.course-continue-btn .ui-icon{width:15px;height:15px}
.course-teaching-panel{grid-template-columns:48px minmax(0,1fr)}.course-teaching-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent)}.course-teaching-icon .ui-icon{width:24px;height:24px}
.course-page-tabs{min-width:0;padding:5px;display:flex;align-items:center;gap:3px;overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.course-page-tabs a{min-height:38px;padding:8px 13px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:10px;color:var(--muted);font-size:.76rem;font-weight:700;text-decoration:none;transition:background .16s ease,color .16s ease}
.course-page-tabs a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}.course-page-tabs a.active{background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent)}
.course-learning-v2{min-width:0;display:grid;gap:18px;scroll-margin-top:92px}.course-section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px}.course-section-heading>div{min-width:0}
.course-section-eyebrow{display:block;margin-bottom:4px;color:var(--accent);font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.course-section-heading h2{margin:0;color:var(--text);font-size:1.25rem;letter-spacing:-.025em}.course-section-heading p{margin:4px 0 0;color:var(--muted);font-size:.76rem}
.course-section-count{flex:0 0 auto;min-height:30px;padding:5px 9px;display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);font-size:.68rem;font-weight:700}
.course-module-list{display:grid;gap:10px}.course-module-v2{min-width:0;border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden;transition:border-color .16s ease,box-shadow .16s ease}
.course-module-v2[open]{border-color:color-mix(in srgb,var(--accent) 17%,var(--border));box-shadow:0 7px 22px rgba(28,21,40,.035)}
.course-module-v2>summary{min-height:72px;padding:13px 16px;display:grid;grid-template-columns:40px minmax(0,1fr) auto 20px;gap:12px;align-items:center;cursor:pointer;list-style:none;user-select:none}.course-module-v2>summary::-webkit-details-marker{display:none}
.course-module-number{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));color:var(--accent);font-size:.7rem;font-weight:800}
.course-module-title{min-width:0;display:grid;gap:2px}.course-module-title small{color:var(--muted);font-size:.59rem;font-weight:700;letter-spacing:.045em;text-transform:uppercase}.course-module-title strong{min-width:0;overflow:hidden;color:var(--text);font-size:.86rem;text-overflow:ellipsis;white-space:nowrap}.course-module-title em{color:var(--muted);font-size:.64rem;font-style:normal}
.course-module-total{color:var(--muted);font-size:.67rem;font-weight:700}.course-module-chevron{width:17px;height:17px;color:var(--muted);transition:transform .18s ease}.course-module-v2[open] .course-module-chevron{transform:rotate(180deg)}
.course-module-items{padding:0 12px 12px;display:grid;gap:5px}.course-content-item{min-width:0;min-height:58px;padding:8px 9px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid transparent;border-radius:11px;background:var(--surface-2);transition:border-color .15s ease,background .15s ease}
.course-content-item:hover{border-color:var(--border);background:var(--surface)}.course-content-item.is-complete{background:color-mix(in srgb,var(--accent) 2.5%,var(--surface-2))}
.course-content-link{min-width:0;display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center;color:inherit;text-decoration:none}.course-content-link:hover{text-decoration:none}
.course-content-icon{width:38px;height:38px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 10%,var(--border));border-radius:10px;background:var(--surface);color:var(--accent)}.course-content-icon .ui-icon{width:19px;height:19px}
.course-content-copy{min-width:0;display:grid;gap:3px}.course-content-copy strong{min-width:0;overflow:hidden;color:var(--text);font-size:.78rem;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.course-content-link:hover .course-content-copy strong{color:var(--accent)}.course-content-copy small{color:var(--muted);font-size:.65rem}
.course-content-action{flex:0 0 auto}.course-content-action form{margin:0}.course-complete-btn,.course-item-status{min-height:31px;padding:5px 9px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--muted);font:inherit;font-size:.64rem;font-weight:700;white-space:nowrap}
.course-complete-btn{cursor:pointer}.course-complete-btn:hover:not(:disabled){border-color:color-mix(in srgb,var(--accent) 25%,var(--border));color:var(--accent)}.course-complete-btn.is-complete,.course-complete-btn:disabled,.course-item-status.is-complete{border-color:color-mix(in srgb,var(--accent) 13%,var(--border));background:color-mix(in srgb,var(--accent) 7%,var(--surface));color:var(--accent);cursor:default}.course-complete-btn .ui-icon{width:13px;height:13px}
.course-module-empty{padding:18px 12px;color:var(--muted);font-size:.72rem;text-align:center}
.course-quizzes-v2{margin-top:10px;display:grid;gap:12px}.course-section-heading-small h2{font-size:1.1rem}.course-quiz-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.course-quiz-row{min-width:0;min-height:72px;padding:12px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:11px;align-items:center;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:inherit;text-decoration:none;transition:border-color .16s ease,box-shadow .16s ease}.course-quiz-row:hover{border-color:color-mix(in srgb,var(--accent) 22%,var(--border));box-shadow:0 6px 20px rgba(28,21,40,.035);text-decoration:none}
.course-quiz-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));color:var(--accent)}.course-quiz-icon .ui-icon{width:20px;height:20px}
.course-quiz-copy{min-width:0;display:grid;gap:3px}.course-quiz-copy strong{overflow:hidden;color:var(--text);font-size:.77rem;text-overflow:ellipsis;white-space:nowrap}.course-quiz-copy small{color:var(--muted);font-size:.64rem}
.course-quiz-action{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-size:.65rem;font-weight:750;white-space:nowrap}.course-quiz-action .ui-icon{width:14px;height:14px}
@media (max-width:920px){.course-overview-card{grid-template-columns:1fr;gap:22px}.course-progress-panel{width:100%;max-width:520px}}
@media (max-width:680px){
.course-page-v2{gap:14px}.course-overview-card{padding:20px 17px;border-radius:18px}.course-overview-copy h1{font-size:clamp(1.75rem,8vw,2.3rem)}.course-overview-copy>p{margin-top:11px;font-size:.84rem;line-height:1.5}
.course-overview-stats{margin-top:19px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--border);border-radius:12px;overflow:hidden}.course-overview-stats>span,.course-overview-stats>span:first-child{min-width:0;padding:11px 7px;justify-items:center;border-left:1px solid var(--border)}.course-overview-stats>span:first-child{border-left:0}.course-overview-stats small{font-size:.58rem;text-align:center}.course-overview-stats strong{font-size:1rem}
.course-progress-panel{max-width:none;padding:14px;grid-template-columns:78px minmax(0,1fr);gap:13px;border-radius:14px}.course-progress-ring{width:78px;height:78px}.course-progress-ring strong{font-size:1.15rem}.course-progress-copy>p{display:none}.course-continue-btn{min-height:36px!important;margin-top:2px}
.course-page-tabs{margin-inline:-1px;border-radius:12px}.course-page-tabs a{min-height:36px;padding-inline:11px;font-size:.71rem}.course-section-heading{align-items:center}.course-section-heading h2{font-size:1.1rem}.course-section-heading p{font-size:.7rem}
.course-module-v2>summary{min-height:66px;padding:11px 12px;grid-template-columns:36px minmax(0,1fr) 18px;gap:9px}.course-module-number{width:36px;height:36px;border-radius:10px}.course-module-total{display:none}.course-module-title strong{font-size:.8rem}.course-module-items{padding:0 8px 8px}
.course-content-item{min-height:60px;padding:8px;grid-template-columns:minmax(0,1fr);gap:7px}.course-content-link{grid-template-columns:36px minmax(0,1fr);gap:9px}.course-content-icon{width:36px;height:36px}.course-content-copy strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.course-content-action{padding-left:45px}.course-complete-btn,.course-item-status{min-height:29px;padding:4px 8px}
.course-quiz-list{grid-template-columns:1fr}.course-quiz-row{grid-template-columns:36px minmax(0,1fr) 15px;min-height:64px;padding:10px}.course-quiz-icon{width:36px;height:36px}.course-quiz-action{font-size:0;gap:0}.course-quiz-action .ui-icon{width:15px;height:15px}
}
@media (max-width:420px){.course-overview-meta{margin-bottom:11px}.course-overview-cohort,.course-overview-state{min-height:24px;font-size:.59rem}.course-progress-panel{grid-template-columns:68px minmax(0,1fr)}.course-progress-ring{width:68px;height:68px}.course-progress-ring strong{font-size:1.02rem}.course-progress-ring small{font-size:.52rem}.course-section-count{display:none}}
@media (prefers-reduced-motion:reduce){.course-page-v2 *,.course-page-v2 *::before,.course-page-v2 *::after{transition-duration:.01ms!important}}



/* =====================================================================
   TASKS PAGE — UI/UX v2
   Global Pioneer theme only. Scoped to .tasks-page-v2.
   ===================================================================== */

.tasks-page-v2{
    width:min(1180px,100%);
    margin:0 auto;
    display:grid;
    gap:18px;
}

.tasks-page-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
}

.tasks-heading-copy{min-width:0}

.tasks-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:7px;
    color:var(--accent);
    font-size:.67rem;
    font-weight:800;
    letter-spacing:.075em;
    text-transform:uppercase;
}

.tasks-eyebrow .ui-icon{width:16px;height:16px}

.tasks-heading-copy h1{
    margin:0;
    color:var(--text);
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.02;
    letter-spacing:-.045em;
}

.tasks-heading-copy p{
    max-width:680px;
    margin:10px 0 0;
    color:var(--muted);
    font-size:.87rem;
    line-height:1.55;
}

.tasks-calendar-link{
    flex:0 0 auto;
    min-height:42px!important;
    padding:8px 12px!important;
    gap:7px!important;
    border-radius:11px!important;
    font-size:.72rem!important;
}

.tasks-calendar-link .ui-icon{width:16px;height:16px}

.tasks-summary{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.tasks-summary article{
    min-width:0;
    min-height:84px;
    padding:15px 16px;
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid var(--border);
    border-radius:15px;
    background:var(--surface);
    box-shadow:0 5px 18px rgba(28,21,40,.025);
}

.tasks-summary article.has-alert{
    border-color:color-mix(in srgb,var(--danger,#d64545) 18%,var(--border));
}

.tasks-summary-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:color-mix(in srgb,var(--accent) 7%,var(--surface));
    color:var(--accent);
}

.tasks-summary article.has-alert .tasks-summary-icon{
    background:color-mix(in srgb,var(--danger,#d64545) 8%,var(--surface));
    color:var(--danger,#d64545);
}

.tasks-summary-icon .ui-icon{width:19px;height:19px}

.tasks-summary article>div{
    min-width:0;
    display:grid;
    gap:2px;
}

.tasks-summary strong{
    color:var(--text);
    font-size:1.25rem;
    line-height:1;
}

.tasks-summary small{
    color:var(--muted);
    font-size:.67rem;
    font-weight:650;
}

.tasks-workspace{
    min-width:0;
    display:grid;
    gap:13px;
}

.tasks-toolbar{
    min-width:0;
    padding:5px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
}

.tasks-filter-tabs{
    min-width:0;
    display:flex;
    align-items:center;
    gap:3px;
    overflow-x:auto;
}

.tasks-filter-tabs a{
    min-height:38px;
    padding:7px 10px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
    border-radius:10px;
    color:var(--muted);
    font-size:.72rem;
    font-weight:700;
    text-decoration:none;
    transition:background .15s ease,color .15s ease;
}

.tasks-filter-tabs a:hover{
    background:var(--surface-2);
    color:var(--text);
    text-decoration:none;
}

.tasks-filter-tabs a.active{
    background:color-mix(in srgb,var(--accent) 9%,var(--surface));
    color:var(--accent);
}

.tasks-filter-tabs b{
    min-width:22px;
    height:22px;
    padding:0 6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:color-mix(in srgb,var(--muted) 8%,var(--surface));
    color:inherit;
    font-size:.62rem;
}

.tasks-filter-tabs a.active b{
    background:color-mix(in srgb,var(--accent) 11%,var(--surface));
}

.tasks-result-count{
    flex:0 0 auto;
    padding-right:9px;
    color:var(--muted);
    font-size:.67rem;
    font-weight:650;
    white-space:nowrap;
}

.tasks-list-v2{
    display:grid;
    gap:8px;
}

.task-card-v2{
    min-width:0;
    min-height:88px;
    padding:11px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 180px 74px;
    gap:12px;
    align-items:center;
    border:1px solid var(--border);
    border-radius:15px;
    background:var(--surface);
    transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}

.task-card-v2:hover{
    border-color:color-mix(in srgb,var(--accent) 18%,var(--border));
    box-shadow:0 7px 22px rgba(28,21,40,.035);
}

.task-card-v2.is-overdue{
    border-color:color-mix(in srgb,var(--danger,#d64545) 18%,var(--border));
}

.task-card-main{
    min-width:0;
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:12px;
    align-items:center;
    color:inherit;
    text-decoration:none;
}

.task-card-main:hover{text-decoration:none}

.task-card-icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:color-mix(in srgb,var(--accent) 7%,var(--surface));
    color:var(--accent);
}

.task-card-v2.is-overdue .task-card-icon{
    background:color-mix(in srgb,var(--danger,#d64545) 7%,var(--surface));
    color:var(--danger,#d64545);
}

.task-card-icon .ui-icon{width:21px;height:21px}

.task-card-copy{
    min-width:0;
    display:grid;
    gap:3px;
}

.task-card-meta{
    min-width:0;
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
}

.task-card-meta b{
    max-width:100%;
    overflow:hidden;
    color:var(--muted);
    font-size:.61rem;
    font-weight:750;
    letter-spacing:.035em;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-transform:uppercase;
}

.task-card-meta em{
    min-height:20px;
    padding:3px 6px;
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    background:color-mix(in srgb,var(--accent) 7%,var(--surface));
    color:var(--accent);
    font-size:.55rem;
    font-style:normal;
    font-weight:750;
}

.task-card-copy>strong{
    min-width:0;
    overflow:hidden;
    color:var(--text);
    font-size:.84rem;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.task-card-main:hover .task-card-copy>strong{color:var(--accent)}

.task-card-copy>small{
    overflow:hidden;
    color:var(--muted);
    font-size:.65rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.task-card-deadline{
    min-width:0;
    display:grid;
    justify-items:start;
    gap:6px;
    padding-left:12px;
    border-left:1px solid var(--border);
}

.task-status-badge{
    min-height:23px;
    padding:3px 7px;
    display:inline-flex;
    align-items:center;
    border:1px solid color-mix(in srgb,var(--accent) 13%,var(--border));
    border-radius:999px;
    background:color-mix(in srgb,var(--accent) 6%,var(--surface));
    color:var(--accent);
    font-size:.57rem;
    font-weight:800;
    letter-spacing:.035em;
    text-transform:uppercase;
}

.task-status-badge.is-overdue{
    border-color:color-mix(in srgb,var(--danger,#d64545) 18%,var(--border));
    background:color-mix(in srgb,var(--danger,#d64545) 7%,var(--surface));
    color:var(--danger,#d64545);
}

.task-status-badge.is-completed{
    border-color:color-mix(in srgb,var(--success,#198754) 18%,var(--border));
    background:color-mix(in srgb,var(--success,#198754) 7%,var(--surface));
    color:var(--success,#198754);
}

.task-card-deadline time{
    display:grid;
    gap:2px;
}

.task-card-deadline time strong{
    color:var(--text);
    font-size:.7rem;
    line-height:1.2;
}

.task-card-deadline time small{
    color:var(--muted);
    font-size:.59rem;
    line-height:1.25;
}

.task-card-action{
    min-height:38px;
    padding:7px 9px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    border:1px solid color-mix(in srgb,var(--accent) 12%,var(--border));
    border-radius:10px;
    background:color-mix(in srgb,var(--accent) 5%,var(--surface));
    color:var(--accent);
    font-size:.65rem;
    font-weight:750;
    text-decoration:none;
}

.task-card-action:hover{
    background:color-mix(in srgb,var(--accent) 9%,var(--surface));
    text-decoration:none;
}

.task-card-action .ui-icon{width:14px;height:14px}

.tasks-empty-state{
    min-height:260px;
    padding:32px 20px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:7px;
    border:1px dashed color-mix(in srgb,var(--accent) 18%,var(--border));
    border-radius:16px;
    background:color-mix(in srgb,var(--accent) 1.5%,var(--surface));
    text-align:center;
}

.tasks-empty-icon{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    margin-bottom:3px;
    border-radius:13px;
    background:color-mix(in srgb,var(--accent) 7%,var(--surface));
    color:var(--accent);
}

.tasks-empty-icon .ui-icon{width:23px;height:23px}

.tasks-empty-state h2{
    margin:0;
    color:var(--text);
    font-size:1rem;
}

.tasks-empty-state p{
    max-width:360px;
    margin:0;
    color:var(--muted);
    font-size:.72rem;
    line-height:1.5;
}

.tasks-empty-state .btn{margin-top:6px}

@media (max-width:900px){
    .tasks-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
    .task-card-v2{grid-template-columns:minmax(0,1fr) 155px 62px}
    .task-card-action span{display:none}
}

@media (max-width:680px){
    .tasks-page-v2{gap:14px}
    .tasks-page-header{align-items:flex-start}
    .tasks-heading-copy h1{font-size:2rem}
    .tasks-heading-copy p{font-size:.8rem}
    .tasks-calendar-link{min-height:38px!important;padding:7px 9px!important}
    .tasks-calendar-link{font-size:0!important}
    .tasks-calendar-link .ui-icon{width:18px;height:18px}
    .tasks-summary{gap:7px}
    .tasks-summary article{min-height:72px;padding:11px 12px;gap:10px;border-radius:13px}
    .tasks-summary-icon{width:34px;height:34px;flex-basis:34px}
    .tasks-summary-icon .ui-icon{width:17px;height:17px}
    .tasks-summary strong{font-size:1.08rem}
    .tasks-summary small{font-size:.61rem}
    .tasks-toolbar{display:grid;gap:6px;padding:5px}
    .tasks-filter-tabs{width:100%}
    .tasks-filter-tabs a{flex:1 0 auto;justify-content:center;min-height:36px;padding:6px 8px}
    .tasks-result-count{padding:3px 7px 5px}
    .task-card-v2{
        min-height:0;
        padding:11px;
        grid-template-columns:minmax(0,1fr) 36px;
        gap:9px;
        align-items:start;
    }
    .task-card-main{grid-template-columns:38px minmax(0,1fr);gap:10px}
    .task-card-icon{width:38px;height:38px;border-radius:10px}
    .task-card-icon .ui-icon{width:19px;height:19px}
    .task-card-copy>strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
    .task-card-copy>small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
    .task-card-deadline{
        grid-column:1/-1;
        padding:9px 0 0 48px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        border-left:0;
        border-top:1px solid var(--border);
    }
    .task-card-deadline time{justify-items:end;text-align:right}
    .task-card-action{
        grid-column:2;
        grid-row:1;
        width:36px;
        height:36px;
        min-height:36px;
        padding:0;
        border-radius:9px;
    }
}

@media (max-width:420px){
    .tasks-summary article{padding:10px}
    .tasks-summary-icon{display:none}
    .tasks-summary article>div{justify-items:center;width:100%}
    .tasks-summary small{text-align:center}
    .tasks-filter-tabs a span{font-size:.66rem}
    .tasks-filter-tabs b{min-width:20px;height:20px;padding-inline:5px}
    .task-card-deadline{padding-left:0}
}

@media (prefers-reduced-motion:reduce){
    .tasks-page-v2 *,
    .tasks-page-v2 *::before,
    .tasks-page-v2 *::after{transition-duration:.01ms!important}
}



/* =====================================================================
   ASSIGNMENT PAGE — UI/UX v2
   Global Pioneer theme only. Scoped to .assignment-page-v2.
   ===================================================================== */

.assignment-page-v2{width:min(1180px,100%);margin:0 auto;display:grid;gap:18px}
.assignment-back{width:max-content;display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.78rem;font-weight:700;text-decoration:none}.assignment-back:hover{color:var(--accent);text-decoration:none}.assignment-back .ui-icon{width:16px;height:16px}
.assignment-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.assignment-heading-copy{min-width:0}.assignment-heading-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}.assignment-heading-meta>span:first-child{color:var(--accent);font-size:.65rem;font-weight:800;letter-spacing:.055em;text-transform:uppercase}.assignment-state{min-height:24px;padding:3px 8px;display:inline-flex;align-items:center;border:1px solid color-mix(in srgb,var(--accent) 16%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--accent) 6%,var(--surface));color:var(--accent);font-size:.58rem;font-weight:800;letter-spacing:.035em;text-transform:uppercase}.assignment-state.is-overdue{border-color:color-mix(in srgb,var(--danger,#d64545) 20%,var(--border));background:color-mix(in srgb,var(--danger,#d64545) 7%,var(--surface));color:var(--danger,#d64545)}.assignment-state.is-submitted{border-color:color-mix(in srgb,var(--success,#198754) 20%,var(--border));background:color-mix(in srgb,var(--success,#198754) 7%,var(--surface));color:var(--success,#198754)}
.assignment-heading-copy h1{max-width:850px;margin:0;color:var(--text);font-size:clamp(2rem,4vw,3rem);line-height:1.04;letter-spacing:-.045em}.assignment-heading-copy>p{margin:8px 0 0;color:var(--muted);font-size:.8rem}.assignment-brief-download{flex:0 0 auto;min-height:42px!important;padding:8px 12px!important;gap:7px!important;border-radius:11px!important;font-size:.72rem!important}.assignment-brief-download .ui-icon{width:16px;height:16px}
.assignment-summary-v2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.assignment-summary-v2 article{min-width:0;min-height:92px;padding:14px 15px;display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;align-items:center;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:0 5px 18px rgba(28,21,40,.025)}.assignment-summary-v2 article.is-alert{border-color:color-mix(in srgb,var(--danger,#d64545) 18%,var(--border))}.assignment-summary-v2 article>span{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));color:var(--accent)}.assignment-summary-v2 article.is-alert>span{background:color-mix(in srgb,var(--danger,#d64545) 8%,var(--surface));color:var(--danger,#d64545)}.assignment-summary-v2 article>span .ui-icon{width:19px;height:19px}.assignment-summary-v2 article>div{min-width:0;display:grid;gap:2px}.assignment-summary-v2 small{color:var(--muted);font-size:.6rem;font-weight:650}.assignment-summary-v2 strong{overflow:hidden;color:var(--text);font-size:.8rem;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.assignment-summary-v2 em{overflow:hidden;color:var(--muted);font-size:.58rem;font-style:normal;text-overflow:ellipsis;white-space:nowrap}
.assignment-extension-note{padding:13px 15px;display:flex;align-items:flex-start;gap:11px;border:1px solid color-mix(in srgb,var(--success,#198754) 18%,var(--border));border-radius:13px;background:color-mix(in srgb,var(--success,#198754) 5%,var(--surface))}.assignment-extension-note>span{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--success,#198754) 10%,var(--surface));color:var(--success,#198754)}.assignment-extension-note .ui-icon{width:17px;height:17px}.assignment-extension-note div{min-width:0;display:grid;gap:2px}.assignment-extension-note strong{color:var(--text);font-size:.76rem}.assignment-extension-note p{margin:0;color:var(--muted);font-size:.68rem;line-height:1.45}
.assignment-workspace-v2{min-width:0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);gap:16px;align-items:start}.assignment-brief-v2,.submission-panel-v2{min-width:0;padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 7px 24px rgba(28,21,40,.025)}.submission-panel-v2{position:sticky;top:94px}
.assignment-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--border)}.assignment-section-title>div{min-width:0;display:grid;gap:2px}.assignment-section-title span{color:var(--accent);font-size:.59rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.assignment-section-title h2{margin:0;color:var(--text);font-size:1.03rem;letter-spacing:-.02em}.assignment-section-title>b{flex:0 0 auto;min-height:25px;padding:4px 7px;display:inline-flex;align-items:center;border-radius:8px;background:var(--surface-2);color:var(--muted);font-size:.59rem;font-weight:700}
.assignment-instructions-v2{color:var(--text);font-size:.81rem;line-height:1.72;overflow-wrap:anywhere}.assignment-instructions-v2 p:first-child{margin-top:0}.assignment-requirements-v2{margin-top:22px;padding-top:15px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--border)}.assignment-requirements-v2>div{min-width:0;padding:0 14px;border-left:1px solid var(--border);display:grid;gap:4px}.assignment-requirements-v2>div:first-child{padding-left:0;border-left:0}.assignment-requirements-v2 small{color:var(--muted);font-size:.6rem}.assignment-requirements-v2 strong{overflow:hidden;color:var(--text);font-size:.71rem;text-overflow:ellipsis;white-space:nowrap}
.submission-latest-v2{padding:12px;display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center;border:1px solid color-mix(in srgb,var(--success,#198754) 15%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--success,#198754) 5%,var(--surface));margin-bottom:12px}.submission-latest-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--success,#198754) 10%,var(--surface));color:var(--success,#198754)}.submission-latest-icon .ui-icon{width:19px;height:19px}.submission-latest-v2>div{min-width:0;display:grid;gap:2px}.submission-latest-v2 strong{color:var(--text);font-size:.74rem}.submission-latest-v2 p{margin:0;color:var(--muted);font-size:.64rem}.submission-latest-v2 small{color:var(--muted);font-size:.59rem}
.submission-history-v2{margin-bottom:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);overflow:hidden}.submission-history-v2>summary{min-height:42px;padding:9px 11px;display:grid;grid-template-columns:minmax(0,1fr) auto 16px;gap:8px;align-items:center;list-style:none;cursor:pointer}.submission-history-v2>summary::-webkit-details-marker{display:none}.submission-history-v2>summary span{color:var(--text);font-size:.68rem;font-weight:750}.submission-history-v2>summary b{color:var(--muted);font-size:.59rem;font-weight:700}.submission-history-v2>summary .ui-icon{width:15px;height:15px;color:var(--muted);transition:transform .16s ease}.submission-history-v2[open]>summary .ui-icon{transform:rotate(180deg)}.submission-history-list-v2{padding:0 8px 8px;display:grid;gap:7px}.submission-attempt-v2{padding:10px;border:1px solid var(--border);border-radius:9px;background:var(--surface)}.submission-attempt-v2 header{display:flex;align-items:center;justify-content:space-between;gap:8px}.submission-attempt-v2 header strong{color:var(--text);font-size:.68rem}.submission-attempt-v2 header span{color:var(--accent);font-size:.57rem;font-weight:750;text-transform:uppercase}.submission-attempt-v2>small{display:block;margin-top:2px;color:var(--muted);font-size:.58rem}.submission-attempt-v2>p{margin:8px 0 0;color:var(--text);font-size:.67rem;line-height:1.5}.submission-files-v2{margin-top:8px;display:grid;gap:5px}.submission-files-v2 a{min-width:0;min-height:34px;padding:6px 8px;display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:7px;align-items:center;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);font-size:.62rem;text-decoration:none}.submission-files-v2 a:hover{border-color:color-mix(in srgb,var(--accent) 20%,var(--border));color:var(--accent);text-decoration:none}.submission-files-v2 .ui-icon{width:14px;height:14px}.submission-files-v2 a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.submission-files-v2 a small{color:var(--muted);font-size:.56rem}
.assignment-submit-form-v2{display:grid;gap:12px}.assignment-field-v2{display:grid;gap:6px}.assignment-field-v2>span{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--text);font-size:.67rem;font-weight:700}.assignment-field-v2>span small{color:var(--muted);font-size:.56rem;font-weight:500}.assignment-field-v2 textarea{min-height:116px!important;resize:vertical}.assignment-upload-v2{position:relative;min-height:128px;padding:18px 15px;display:grid;place-items:center;align-content:center;gap:5px;border:1px dashed color-mix(in srgb,var(--accent) 25%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--accent) 2.5%,var(--surface));text-align:center;cursor:pointer}.assignment-upload-v2:hover{background:color-mix(in srgb,var(--accent) 5%,var(--surface));border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}.assignment-upload-v2 input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.assignment-upload-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}.assignment-upload-icon .ui-icon{width:19px;height:19px}.assignment-upload-v2 strong{color:var(--text);font-size:.72rem}.assignment-upload-v2 small{max-width:290px;color:var(--muted);font-size:.59rem;line-height:1.4}
.assignment-declaration-v2{padding:10px 11px;display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);cursor:pointer}.assignment-declaration-v2 input{margin-top:2px}.assignment-declaration-v2 span{color:var(--muted);font-size:.62rem;line-height:1.45}.assignment-submit-button{width:100%!important;min-height:42px!important;gap:7px!important;border-radius:10px!important}.assignment-submit-button .ui-icon{width:16px;height:16px}.assignment-submit-note{margin:-4px 0 0;color:var(--muted);font-size:.57rem;text-align:center}
.assignment-attempts-used{padding:13px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;border:1px solid var(--border);border-radius:11px;background:var(--surface-2)}.assignment-attempts-used>span{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--surface);color:var(--muted)}.assignment-attempts-used .ui-icon{width:17px;height:17px}.assignment-attempts-used div{display:grid;gap:3px}.assignment-attempts-used strong{color:var(--text);font-size:.7rem}.assignment-attempts-used p{margin:0;color:var(--muted);font-size:.61rem;line-height:1.4}
@media(max-width:980px){.assignment-summary-v2{grid-template-columns:repeat(2,minmax(0,1fr))}.assignment-workspace-v2{grid-template-columns:1fr}.submission-panel-v2{position:static}}
@media(max-width:680px){.assignment-page-v2{gap:14px}.assignment-page-header{align-items:flex-start}.assignment-heading-copy h1{font-size:2rem}.assignment-brief-download{min-width:40px!important;width:40px!important;height:40px!important;padding:0!important;font-size:0!important;display:grid!important;place-items:center!important}.assignment-brief-download .ui-icon{width:18px;height:18px}.assignment-summary-v2{gap:7px}.assignment-summary-v2 article{min-height:74px;padding:10px 11px;grid-template-columns:32px minmax(0,1fr);gap:8px;border-radius:12px}.assignment-summary-v2 article>span{width:32px;height:32px}.assignment-summary-v2 article>span .ui-icon{width:16px;height:16px}.assignment-summary-v2 strong{font-size:.7rem}.assignment-summary-v2 small,.assignment-summary-v2 em{font-size:.54rem}.assignment-brief-v2,.submission-panel-v2{padding:15px;border-radius:15px}.assignment-section-title{margin-bottom:13px;padding-bottom:11px}.assignment-instructions-v2{font-size:.76rem;line-height:1.62}.assignment-requirements-v2{grid-template-columns:1fr;gap:0;margin-top:17px}.assignment-requirements-v2>div,.assignment-requirements-v2>div:first-child{padding:9px 0;border-left:0;border-top:1px solid var(--border)}.assignment-requirements-v2>div:first-child{border-top:0}.assignment-upload-v2{min-height:116px}.submission-panel-v2{order:1}.assignment-brief-v2{order:2}}
@media(max-width:420px){.assignment-summary-v2 article{grid-template-columns:1fr;justify-items:center;text-align:center}.assignment-summary-v2 article>span{display:none}.assignment-summary-v2 strong{white-space:normal}.assignment-heading-copy>p{font-size:.72rem}.assignment-extension-note{padding:11px}.assignment-field-v2>span{align-items:flex-start;flex-direction:column;gap:2px}}
@media(prefers-reduced-motion:reduce){.assignment-page-v2 *,.assignment-page-v2 *::before,.assignment-page-v2 *::after{transition-duration:.01ms!important}}



/* =====================================================================
   GRADES PAGE — UI/UX v2
   Global Pioneer theme only. Scoped to .grades-page-v2.
   ===================================================================== */

.grades-page-v2{
    width:min(1180px,100%);
    margin:0 auto;
    display:grid;
    gap:18px;
}

.grades-page-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
}

.grades-page-header>div{min-width:0}

.grades-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:7px;
    color:var(--accent);
    font-size:.67rem;
    font-weight:800;
    letter-spacing:.075em;
    text-transform:uppercase;
}

.grades-eyebrow .ui-icon{width:16px;height:16px}

.grades-page-header h1{
    margin:0;
    color:var(--text);
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.02;
    letter-spacing:-.045em;
}

.grades-page-header p{
    max-width:680px;
    margin:10px 0 0;
    color:var(--muted);
    font-size:.87rem;
    line-height:1.55;
}

.grades-tasks-link{
    flex:0 0 auto;
    min-height:42px!important;
    padding:8px 12px!important;
    gap:7px!important;
    border-radius:11px!important;
    font-size:.72rem!important;
}

.grades-tasks-link .ui-icon{width:16px;height:16px}

.grades-summary{
    display:grid;
    grid-template-columns:1.35fr repeat(3,minmax(0,1fr));
    gap:10px;
}

.grades-summary article{
    min-width:0;
    min-height:104px;
    padding:17px 18px;
    display:grid;
    align-content:center;
    gap:4px;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--surface);
    box-shadow:0 5px 18px rgba(28,21,40,.025);
}

.grades-summary .grades-summary-primary{
    grid-template-columns:44px minmax(0,1fr);
    align-items:center;
    align-content:center;
    column-gap:13px;
    background:
        radial-gradient(circle at 96% 8%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 10rem),
        var(--surface);
}

.grades-summary-icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:color-mix(in srgb,var(--accent) 8%,var(--surface));
    color:var(--accent);
}

.grades-summary-icon .ui-icon{width:22px;height:22px}

.grades-summary small{
    color:var(--muted);
    font-size:.65rem;
    font-weight:700;
}

.grades-summary strong{
    color:var(--text);
    font-size:1.45rem;
    line-height:1;
}

.grades-summary p{
    margin:0;
    color:var(--muted);
    font-size:.62rem;
    line-height:1.3;
}

.grades-course-list{
    display:grid;
    gap:12px;
}

.grade-course-card{
    min-width:0;
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--surface);
    overflow:hidden;
    box-shadow:0 7px 24px rgba(28,21,40,.025);
}

.grade-course-header{
    min-width:0;
    padding:16px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    border-bottom:1px solid var(--border);
    background:color-mix(in srgb,var(--accent) 1.8%,var(--surface));
}

.grade-course-copy{
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
}

.grade-course-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:color-mix(in srgb,var(--accent) 8%,var(--surface));
    color:var(--accent);
}

.grade-course-icon .ui-icon{width:20px;height:20px}

.grade-course-copy>div{
    min-width:0;
    display:grid;
    gap:2px;
}

.grade-course-copy small,
.grade-course-average small{
    color:var(--muted);
    font-size:.59rem;
    font-weight:750;
    letter-spacing:.045em;
    text-transform:uppercase;
}

.grade-course-copy h2{
    margin:0;
    overflow:hidden;
    color:var(--text);
    font-size:.96rem;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.grade-course-copy p{
    margin:0;
    color:var(--muted);
    font-size:.64rem;
}

.grade-course-average{
    flex:0 0 auto;
    min-width:112px;
    padding-left:16px;
    display:grid;
    justify-items:end;
    gap:3px;
    border-left:1px solid var(--border);
}

.grade-course-average strong{
    color:var(--accent);
    font-size:1.15rem;
    line-height:1;
}

.grade-result-list{
    padding:8px;
    display:grid;
    gap:6px;
}

.grade-result-row{
    min-width:0;
    padding:11px 12px 10px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 150px;
    grid-template-areas:
        "main score"
        "progress progress";
    column-gap:18px;
    row-gap:10px;
    align-items:center;
    border:1px solid transparent;
    border-radius:12px;
    background:var(--surface-2);
    transition:border-color .15s ease,background .15s ease;
}

.grade-result-row:hover{
    border-color:var(--border);
    background:var(--surface);
}

.grade-result-main{
    grid-area:main;
    min-width:0;
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:10px;
    align-items:center;
}

.grade-result-index{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:var(--surface);
    color:var(--accent);
    border:1px solid color-mix(in srgb,var(--accent) 10%,var(--border));
}

.grade-result-index .ui-icon{width:18px;height:18px}

.grade-result-copy{
    min-width:0;
    display:grid;
    gap:2px;
}

.grade-result-copy small{
    color:var(--muted);
    font-size:.56rem;
    font-weight:750;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.grade-result-copy strong{
    overflow:hidden;
    color:var(--text);
    font-size:.79rem;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.grade-result-copy p{
    margin:0;
    overflow:hidden;
    color:var(--muted);
    font-size:.64rem;
    line-height:1.35;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.grade-result-score{
    grid-area:score;
    min-width:0;
    display:grid;
    justify-items:end;
    gap:2px;
}

.grade-code{
    min-height:22px;
    padding:3px 7px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid color-mix(in srgb,var(--accent) 15%,var(--border));
    border-radius:999px;
    background:color-mix(in srgb,var(--accent) 7%,var(--surface));
    color:var(--accent);
    font-size:.58rem;
    font-weight:800;
    letter-spacing:.035em;
    text-transform:uppercase;
}

.grade-result-score>strong{
    color:var(--text);
    font-size:1rem;
    line-height:1.1;
}

.grade-result-score>small{
    color:var(--muted);
    font-size:.59rem;
}

.grade-result-progress{
    grid-area:progress;
    width:100%;
    height:5px;
    overflow:hidden;
    border-radius:999px;
    background:var(--border);
}

.grade-result-progress>span{
    --grade-progress:0%;
    display:block;
    width:var(--grade-progress);
    height:100%;
    border-radius:inherit;
    background:var(--accent);
}

.grades-empty-state{
    min-height:330px;
    padding:36px 22px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:8px;
    border:1px dashed color-mix(in srgb,var(--accent) 18%,var(--border));
    border-radius:18px;
    background:color-mix(in srgb,var(--accent) 1.5%,var(--surface));
    text-align:center;
}

.grades-empty-icon{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    margin-bottom:3px;
    border-radius:14px;
    background:color-mix(in srgb,var(--accent) 8%,var(--surface));
    color:var(--accent);
}

.grades-empty-icon .ui-icon{width:24px;height:24px}

.grades-empty-state h2{
    margin:0;
    color:var(--text);
    font-size:1.05rem;
}

.grades-empty-state p{
    max-width:400px;
    margin:0;
    color:var(--muted);
    font-size:.74rem;
    line-height:1.5;
}

.grades-empty-state .btn{margin-top:6px}

@media (max-width:900px){
    .grades-summary{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .grades-summary .grades-summary-primary{
        grid-column:span 2;
    }
}

@media (max-width:680px){
    .grades-page-v2{gap:14px}

    .grades-page-header{align-items:flex-start}

    .grades-page-header h1{font-size:2rem}

    .grades-page-header p{font-size:.8rem}

    .grades-tasks-link{
        min-width:40px!important;
        width:40px!important;
        min-height:40px!important;
        height:40px!important;
        padding:0!important;
        font-size:0!important;
        border-radius:10px!important;
    }

    .grades-tasks-link .ui-icon{width:18px;height:18px}

    .grades-summary{gap:7px}

    .grades-summary article{
        min-height:82px;
        padding:12px 13px;
        border-radius:13px;
    }

    .grades-summary .grades-summary-primary{
        grid-template-columns:38px minmax(0,1fr);
    }

    .grades-summary-icon{
        width:38px;
        height:38px;
    }

    .grades-summary-icon .ui-icon{width:19px;height:19px}

    .grades-summary strong{font-size:1.18rem}

    .grade-course-card{border-radius:15px}

    .grade-course-header{
        padding:13px 14px;
        gap:10px;
    }

    .grade-course-icon{
        width:38px;
        height:38px;
        flex-basis:38px;
    }

    .grade-course-copy h2{font-size:.83rem}

    .grade-course-average{
        min-width:86px;
        padding-left:10px;
    }

    .grade-course-average strong{font-size:1rem}

    .grade-result-list{padding:6px}

    .grade-result-row{
        grid-template-columns:minmax(0,1fr) auto;
        column-gap:10px;
        padding:10px;
    }

    .grade-result-main{
        grid-template-columns:34px minmax(0,1fr);
        gap:9px;
    }

    .grade-result-index{
        width:34px;
        height:34px;
    }

    .grade-result-copy strong{
        font-size:.74rem;
        white-space:normal;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
    }

    .grade-result-copy p{
        white-space:normal;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
    }

    .grade-result-score>small{display:none}
}

@media (max-width:420px){
    .grades-summary article{
        justify-items:center;
        text-align:center;
    }

    .grades-summary .grades-summary-primary{
        grid-template-columns:1fr;
        justify-items:center;
    }

    .grades-summary-icon{display:none}

    .grade-course-icon{display:none}

    .grade-course-average{
        min-width:76px;
    }

    .grade-result-index{display:none}

    .grade-result-main{
        grid-template-columns:1fr;
    }

    .grade-result-row{
        grid-template-columns:minmax(0,1fr) 72px;
    }
}

@media (prefers-reduced-motion:reduce){
    .grades-page-v2 *,
    .grades-page-v2 *::before,
    .grades-page-v2 *::after{
        transition-duration:.01ms!important;
    }
}



/* =====================================================================
   ATTENDANCE PAGE — UI/UX v2
   Global Pioneer theme only. Scoped to .attendance-page-v2.
   ===================================================================== */

.attendance-page-v2{
    width:min(1180px,100%);
    margin:0 auto;
    display:grid;
    gap:18px;
}

.attendance-page-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
}

.attendance-page-header>div{min-width:0}

.attendance-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:7px;
    color:var(--accent);
    font-size:.67rem;
    font-weight:800;
    letter-spacing:.075em;
    text-transform:uppercase;
}

.attendance-eyebrow .ui-icon{width:16px;height:16px}

.attendance-page-header h1{
    margin:0;
    color:var(--text);
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.02;
    letter-spacing:-.045em;
}

.attendance-page-header p{
    max-width:700px;
    margin:10px 0 0;
    color:var(--muted);
    font-size:.87rem;
    line-height:1.55;
}

.attendance-calendar-link{
    flex:0 0 auto;
    min-height:42px!important;
    padding:8px 12px!important;
    gap:7px!important;
    border-radius:11px!important;
    font-size:.72rem!important;
}

.attendance-calendar-link .ui-icon{width:16px;height:16px}

.attendance-overview-v2{
    display:grid;
    grid-template-columns:minmax(330px,1.2fr) minmax(0,2fr);
    gap:10px;
}

.attendance-overall-card{
    min-width:0;
    min-height:158px;
    padding:20px;
    display:grid;
    grid-template-columns:108px minmax(0,1fr);
    gap:18px;
    align-items:center;
    border:1px solid var(--border);
    border-radius:18px;
    background:
        radial-gradient(circle at 95% 8%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 13rem),
        var(--surface);
    box-shadow:0 7px 24px rgba(28,21,40,.028);
}

.attendance-ring-v2{
    --attendance-progress:0%;
    width:108px;
    height:108px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:
        radial-gradient(circle,var(--surface) 59%,transparent 60%),
        conic-gradient(var(--accent) var(--attendance-progress),var(--border) 0);
}

.attendance-ring-v2>span{
    display:grid;
    justify-items:center;
    gap:2px;
}

.attendance-ring-v2 strong{
    color:var(--text);
    font-size:1.5rem;
    line-height:1;
}

.attendance-ring-v2 small{
    color:var(--muted);
    font-size:.58rem;
    font-weight:750;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.attendance-overall-copy{
    min-width:0;
    display:grid;
    gap:4px;
}

.attendance-overall-copy>small{
    color:var(--accent);
    font-size:.6rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.attendance-overall-copy h2{
    margin:0;
    color:var(--text);
    font-size:1.7rem;
    line-height:1;
}

.attendance-overall-copy p{
    margin:3px 0 0;
    color:var(--muted);
    font-size:.68rem;
    line-height:1.45;
}

.attendance-stat-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.attendance-stat-card{
    min-width:0;
    min-height:74px;
    padding:14px 15px;
    display:flex;
    align-items:center;
    gap:11px;
    border:1px solid var(--border);
    border-radius:15px;
    background:var(--surface);
    box-shadow:0 5px 18px rgba(28,21,40,.022);
}

.attendance-stat-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:color-mix(in srgb,var(--accent) 7%,var(--surface));
    color:var(--accent);
}

.attendance-stat-card.is-absent .attendance-stat-icon{
    background:color-mix(in srgb,var(--danger,#d64545) 7%,var(--surface));
    color:var(--danger,#d64545);
}

.attendance-stat-card.is-late .attendance-stat-icon{
    background:color-mix(in srgb,#c88700 8%,var(--surface));
    color:#a96f00;
}

.attendance-stat-card.is-excused .attendance-stat-icon{
    background:color-mix(in srgb,var(--muted) 8%,var(--surface));
    color:var(--muted);
}

.attendance-stat-icon .ui-icon{width:19px;height:19px}

.attendance-stat-card>div{
    min-width:0;
    display:grid;
    gap:2px;
}

.attendance-stat-card strong{
    color:var(--text);
    font-size:1.16rem;
    line-height:1;
}

.attendance-stat-card small{
    color:var(--muted);
    font-size:.64rem;
    font-weight:650;
}

.attendance-meta-strip{
    min-width:0;
    padding:12px 16px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
}

.attendance-meta-strip>span{
    min-width:0;
    padding:0 16px;
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:7px;
    border-left:1px solid var(--border);
}

.attendance-meta-strip>span:first-child{border-left:0}

.attendance-meta-strip strong{
    color:var(--text);
    font-size:.9rem;
}

.attendance-meta-strip small{
    color:var(--muted);
    font-size:.64rem;
    font-weight:650;
}

.attendance-course-section,
.attendance-history-section{
    min-width:0;
    display:grid;
    gap:12px;
}

.attendance-section-heading{
    min-width:0;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
}

.attendance-section-heading>div{
    min-width:0;
    display:grid;
    gap:3px;
}

.attendance-section-heading>div>span{
    color:var(--accent);
    font-size:.6rem;
    font-weight:800;
    letter-spacing:.075em;
    text-transform:uppercase;
}

.attendance-section-heading h2{
    margin:0;
    color:var(--text);
    font-size:1.15rem;
    letter-spacing:-.025em;
}

.attendance-section-heading p{
    margin:0;
    color:var(--muted);
    font-size:.7rem;
}

.attendance-section-heading>small{
    flex:0 0 auto;
    min-height:29px;
    padding:5px 9px;
    display:inline-flex;
    align-items:center;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--surface);
    color:var(--muted);
    font-size:.64rem;
    font-weight:700;
}

.attendance-course-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.attendance-course-card{
    min-width:0;
    padding:15px;
    display:grid;
    gap:13px;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--surface);
    box-shadow:0 6px 20px rgba(28,21,40,.022);
}

.attendance-course-card>header{
    min-width:0;
    display:grid;
    grid-template-columns:40px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
}

.attendance-course-icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:color-mix(in srgb,var(--accent) 7%,var(--surface));
    color:var(--accent);
}

.attendance-course-icon .ui-icon{width:19px;height:19px}

.attendance-course-card>header>div:not(.attendance-course-percent){
    min-width:0;
    display:grid;
    gap:2px;
}

.attendance-course-card>header small{
    color:var(--muted);
    font-size:.58rem;
    font-weight:700;
}

.attendance-course-card>header>div>strong{
    overflow:hidden;
    color:var(--text);
    font-size:.78rem;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.attendance-course-percent{
    min-width:72px;
    display:grid;
    justify-items:end;
    gap:2px;
}

.attendance-course-percent strong{
    color:var(--accent);
    font-size:1rem;
}

.attendance-course-progress{
    height:5px;
    overflow:hidden;
    border-radius:999px;
    background:var(--border);
}

.attendance-course-progress>span{
    --course-attendance:0%;
    display:block;
    width:var(--course-attendance);
    height:100%;
    border-radius:inherit;
    background:var(--accent);
}

.attendance-course-counts{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
}

.attendance-course-counts>span{
    min-width:0;
    padding:8px 5px;
    display:grid;
    justify-items:center;
    gap:2px;
    border-left:1px solid var(--border);
}

.attendance-course-counts>span:first-child{border-left:0}

.attendance-course-counts b{
    color:var(--text);
    font-size:.76rem;
}

.attendance-course-counts small{
    color:var(--muted);
    font-size:.55rem;
}

.attendance-history-v2{
    display:grid;
    gap:8px;
}

.attendance-session-card{
    min-width:0;
    border:1px solid var(--border);
    border-radius:15px;
    background:var(--surface);
    overflow:hidden;
    transition:border-color .15s ease,box-shadow .15s ease;
}

.attendance-session-card[open]{
    border-color:color-mix(in srgb,var(--accent) 16%,var(--border));
    box-shadow:0 7px 22px rgba(28,21,40,.03);
}

.attendance-session-card>summary{
    min-height:70px;
    padding:12px 14px;
    display:grid;
    grid-template-columns:9px minmax(0,1fr) auto 18px;
    gap:11px;
    align-items:center;
    cursor:pointer;
    list-style:none;
    user-select:none;
}

.attendance-session-card>summary::-webkit-details-marker{display:none}

.attendance-session-status-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--muted);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--muted) 8%,transparent);
}

.attendance-session-status-dot.is-present{
    background:var(--accent);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 9%,transparent);
}

.attendance-session-status-dot.is-late{
    background:#b77a00;
    box-shadow:0 0 0 4px color-mix(in srgb,#b77a00 10%,transparent);
}

.attendance-session-status-dot.is-absent{
    background:var(--danger,#d64545);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--danger,#d64545) 9%,transparent);
}

.attendance-session-status-dot.is-excused{
    background:var(--muted);
}

.attendance-session-main{
    min-width:0;
    display:grid;
    gap:2px;
}

.attendance-session-main small{
    overflow:hidden;
    color:var(--muted);
    font-size:.58rem;
    font-weight:750;
    letter-spacing:.035em;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-transform:uppercase;
}

.attendance-session-main strong{
    overflow:hidden;
    color:var(--text);
    font-size:.79rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.attendance-session-main em{
    color:var(--muted);
    font-size:.62rem;
    font-style:normal;
}

.attendance-session-badges{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    flex-wrap:wrap;
}

.attendance-status-badge,
.attendance-request-badge{
    min-height:23px;
    padding:3px 7px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--surface-2);
    color:var(--muted);
    font-size:.56rem;
    font-weight:800;
    letter-spacing:.03em;
    text-transform:uppercase;
    white-space:nowrap;
}

.attendance-status-badge.is-present{
    border-color:color-mix(in srgb,var(--accent) 15%,var(--border));
    background:color-mix(in srgb,var(--accent) 7%,var(--surface));
    color:var(--accent);
}

.attendance-status-badge.is-absent{
    border-color:color-mix(in srgb,var(--danger,#d64545) 18%,var(--border));
    background:color-mix(in srgb,var(--danger,#d64545) 7%,var(--surface));
    color:var(--danger,#d64545);
}

.attendance-status-badge.is-late{
    border-color:color-mix(in srgb,#b77a00 18%,var(--border));
    background:color-mix(in srgb,#b77a00 7%,var(--surface));
    color:#9b6800;
}

.attendance-request-badge{
    color:var(--accent);
    border-color:color-mix(in srgb,var(--accent) 14%,var(--border));
    background:color-mix(in srgb,var(--accent) 5%,var(--surface));
}

.attendance-request-badge.is-approved{
    color:var(--success,#198754);
    border-color:color-mix(in srgb,var(--success,#198754) 17%,var(--border));
    background:color-mix(in srgb,var(--success,#198754) 6%,var(--surface));
}

.attendance-request-badge.is-rejected{
    color:var(--danger,#d64545);
    border-color:color-mix(in srgb,var(--danger,#d64545) 17%,var(--border));
    background:color-mix(in srgb,var(--danger,#d64545) 6%,var(--surface));
}

.attendance-session-chevron{
    width:16px;
    height:16px;
    color:var(--muted);
    transition:transform .18s ease;
}

.attendance-session-card[open] .attendance-session-chevron{
    transform:rotate(180deg);
}

.attendance-correction-panel{
    padding:14px;
    display:grid;
    gap:14px;
    border-top:1px solid var(--border);
    background:var(--surface-2);
}

.attendance-correction-copy{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:10px;
    align-items:start;
}

.attendance-correction-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:var(--surface);
    color:var(--accent);
    border:1px solid color-mix(in srgb,var(--accent) 10%,var(--border));
}

.attendance-correction-icon .ui-icon{width:18px;height:18px}

.attendance-correction-copy>div{
    min-width:0;
    display:grid;
    gap:3px;
}

.attendance-correction-copy strong{
    color:var(--text);
    font-size:.75rem;
}

.attendance-correction-copy p{
    max-width:700px;
    margin:0;
    color:var(--muted);
    font-size:.65rem;
    line-height:1.45;
}

.attendance-correction-form{
    display:grid;
    grid-template-columns:180px minmax(0,1fr) minmax(220px,.7fr) auto;
    gap:10px;
    align-items:end;
}

.attendance-form-field{
    min-width:0;
    display:grid;
    gap:5px;
}

.attendance-form-field>span{
    color:var(--text);
    font-size:.62rem;
    font-weight:700;
}

.attendance-form-field>span small{
    color:var(--muted);
    font-weight:600;
}

.attendance-form-field select,
.attendance-form-field textarea,
.attendance-form-field input{
    width:100%;
    min-height:40px;
    margin:0;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
    color:var(--text);
    font:inherit;
    font-size:.7rem;
    box-shadow:none;
}

.attendance-form-field select,
.attendance-form-field input{
    padding:0 10px;
}

.attendance-form-field textarea{
    min-height:72px;
    padding:9px 10px;
    resize:vertical;
}

.attendance-form-field select:focus,
.attendance-form-field textarea:focus,
.attendance-form-field input:focus{
    outline:0;
    border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent);
}

.attendance-submit-correction{
    min-height:40px!important;
    padding:8px 11px!important;
    gap:6px!important;
    border-radius:10px!important;
    font-size:.67rem!important;
    white-space:nowrap;
}

.attendance-submit-correction .ui-icon{width:14px;height:14px}

.attendance-empty-state{
    min-height:300px;
    padding:34px 20px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:8px;
    border:1px dashed color-mix(in srgb,var(--accent) 18%,var(--border));
    border-radius:18px;
    background:color-mix(in srgb,var(--accent) 1.5%,var(--surface));
    text-align:center;
}

.attendance-empty-icon{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:color-mix(in srgb,var(--accent) 8%,var(--surface));
    color:var(--accent);
}

.attendance-empty-icon .ui-icon{width:24px;height:24px}

.attendance-empty-state h2{
    margin:0;
    color:var(--text);
    font-size:1rem;
}

.attendance-empty-state p{
    max-width:410px;
    margin:0;
    color:var(--muted);
    font-size:.72rem;
    line-height:1.5;
}

@media (max-width:980px){
    .attendance-overview-v2{
        grid-template-columns:1fr;
    }

    .attendance-stat-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

    .attendance-stat-card{
        min-height:72px;
    }

    .attendance-correction-form{
        grid-template-columns:160px minmax(0,1fr);
    }

    .attendance-reason-field{
        grid-column:2;
        grid-row:1 / span 2;
    }

    .attendance-evidence-field{
        grid-column:1;
    }

    .attendance-submit-correction{
        grid-column:2;
        width:max-content;
        justify-self:end;
    }
}

@media (max-width:720px){
    .attendance-page-v2{gap:14px}

    .attendance-page-header{align-items:flex-start}

    .attendance-page-header h1{font-size:2rem}

    .attendance-page-header p{font-size:.8rem}

    .attendance-calendar-link{
        width:40px!important;
        min-width:40px!important;
        height:40px!important;
        min-height:40px!important;
        padding:0!important;
        font-size:0!important;
        border-radius:10px!important;
    }

    .attendance-calendar-link .ui-icon{width:18px;height:18px}

    .attendance-overall-card{
        min-height:132px;
        padding:15px;
        grid-template-columns:86px minmax(0,1fr);
        gap:14px;
        border-radius:15px;
    }

    .attendance-ring-v2{
        width:86px;
        height:86px;
    }

    .attendance-ring-v2 strong{font-size:1.22rem}

    .attendance-overall-copy h2{font-size:1.35rem}

    .attendance-overall-copy p{font-size:.63rem}

    .attendance-stat-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;
    }

    .attendance-stat-card{
        min-height:66px;
        padding:11px 12px;
        border-radius:13px;
    }

    .attendance-stat-icon{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

    .attendance-stat-icon .ui-icon{width:17px;height:17px}

    .attendance-stat-card strong{font-size:1rem}

    .attendance-meta-strip{
        padding:10px 7px;
    }

    .attendance-meta-strip>span{
        padding:0 7px;
        display:grid;
        justify-items:center;
        gap:1px;
        text-align:center;
    }

    .attendance-meta-strip small{font-size:.56rem}

    .attendance-course-grid{
        grid-template-columns:1fr;
    }

    .attendance-section-heading{
        align-items:center;
    }

    .attendance-section-heading h2{font-size:1.05rem}

    .attendance-section-heading p{font-size:.65rem}

    .attendance-session-card>summary{
        min-height:68px;
        padding:11px 12px;
        grid-template-columns:8px minmax(0,1fr) 18px;
        gap:9px;
    }

    .attendance-session-badges{
        grid-column:2 / 3;
        justify-content:flex-start;
    }

    .attendance-session-chevron{
        grid-column:3;
        grid-row:1 / span 2;
    }

    .attendance-session-main strong{
        white-space:normal;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
    }

    .attendance-correction-panel{
        padding:12px;
    }

    .attendance-correction-form{
        grid-template-columns:1fr;
        gap:9px;
    }

    .attendance-reason-field,
    .attendance-evidence-field,
    .attendance-submit-correction{
        grid-column:auto;
        grid-row:auto;
    }

    .attendance-submit-correction{
        width:100%;
        justify-self:stretch;
    }
}

@media (max-width:430px){
    .attendance-overall-card{
        grid-template-columns:72px minmax(0,1fr);
    }

    .attendance-ring-v2{
        width:72px;
        height:72px;
    }

    .attendance-ring-v2 strong{font-size:1.03rem}

    .attendance-overall-copy p{display:none}

    .attendance-stat-icon{display:none}

    .attendance-stat-card{
        justify-content:center;
        text-align:center;
    }

    .attendance-stat-card>div{
        justify-items:center;
        width:100%;
    }

    .attendance-course-icon{display:none}

    .attendance-course-card>header{
        grid-template-columns:minmax(0,1fr) auto;
    }

    .attendance-course-counts small{font-size:.5rem}

    .attendance-section-heading>small{display:none}

    .attendance-correction-icon{display:none}

    .attendance-correction-copy{
        grid-template-columns:1fr;
    }
}

@media (prefers-reduced-motion:reduce){
    .attendance-page-v2 *,
    .attendance-page-v2 *::before,
    .attendance-page-v2 *::after{
        transition-duration:.01ms!important;
    }
}



/* =====================================================================
   ATTENDANCE HISTORY — TIMELINE & DIALOG v3
   Compact register, truthful empty-course state, focused corrections.
   ===================================================================== */

.attendance-page-v3 .attendance-meta-strip-v3{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.attendance-page-v3 .attendance-course-card.is-unrecorded{
    background:color-mix(in srgb,var(--muted) 1.5%,var(--surface));
}

.attendance-page-v3 .attendance-course-percent.is-empty strong,
.attendance-page-v3 .attendance-course-percent.is-empty small{
    color:var(--muted);
}

.attendance-page-v3 .attendance-course-progress.is-empty{
    position:relative;
    background:color-mix(in srgb,var(--muted) 10%,var(--surface));
}

.attendance-page-v3 .attendance-course-progress.is-empty::after{
    content:'No attendance recorded yet';
    position:absolute;
    inset:auto 0 8px;
    display:none;
}

.attendance-history-section-v3{
    margin-top:2px;
}

.attendance-history-timeline{
    display:grid;
    gap:16px;
}

.attendance-history-month{
    min-width:0;
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    gap:16px;
    align-items:start;
}

.attendance-history-month-header{
    position:sticky;
    top:92px;
    padding:8px 0;
    display:grid;
    gap:3px;
}

.attendance-history-month-header strong{
    color:var(--text);
    font-size:.75rem;
    line-height:1.25;
}

.attendance-history-month-header span{
    color:var(--muted);
    font-size:.6rem;
    font-weight:650;
}

.attendance-history-month-list{
    position:relative;
    min-width:0;
    display:grid;
    gap:7px;
}

.attendance-history-month-list::before{
    content:'';
    position:absolute;
    top:33px;
    bottom:33px;
    left:29px;
    width:1px;
    background:var(--border);
    pointer-events:none;
}

.attendance-timeline-row{
    position:relative;
    z-index:1;
    min-width:0;
    min-height:74px;
    padding:10px 11px;
    display:grid;
    grid-template-columns:58px minmax(0,1fr) auto 128px;
    gap:12px;
    align-items:center;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
    box-shadow:0 4px 16px rgba(28,21,40,.02);
    transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}

.attendance-timeline-row:hover{
    border-color:color-mix(in srgb,var(--accent) 16%,var(--border));
    box-shadow:0 7px 20px rgba(28,21,40,.03);
}

.attendance-date-tile{
    width:58px;
    height:54px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:1px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--surface-2);
}

.attendance-date-tile strong{
    color:var(--text);
    font-size:1rem;
    line-height:1;
}

.attendance-date-tile small{
    color:var(--accent);
    font-size:.55rem;
    font-weight:800;
    letter-spacing:.055em;
}

.attendance-timeline-main{
    min-width:0;
    display:grid;
    gap:2px;
}

.attendance-timeline-main>small{
    overflow:hidden;
    color:var(--muted);
    font-size:.57rem;
    font-weight:750;
    letter-spacing:.035em;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-transform:uppercase;
}

.attendance-timeline-main>strong{
    overflow:hidden;
    color:var(--text);
    font-size:.79rem;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.attendance-timeline-main>span{
    color:var(--muted);
    font-size:.62rem;
}

.attendance-timeline-status{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    flex-wrap:wrap;
}

.attendance-status-badge.is-not-marked{
    color:var(--muted);
    border-color:var(--border);
    background:var(--surface-2);
}

.attendance-history-action{
    min-height:36px;
    padding:7px 9px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid color-mix(in srgb,var(--accent) 12%,var(--border));
    border-radius:9px;
    background:color-mix(in srgb,var(--accent) 5%,var(--surface));
    color:var(--accent);
    font:inherit;
    font-size:.63rem;
    font-weight:750;
    cursor:pointer;
    white-space:nowrap;
}

.attendance-history-action:hover{
    border-color:color-mix(in srgb,var(--accent) 22%,var(--border));
    background:color-mix(in srgb,var(--accent) 8%,var(--surface));
}

.attendance-history-action .ui-icon{
    width:14px;
    height:14px;
}

.attendance-correction-dialog{
    width:min(620px,calc(100vw - 28px));
    max-width:620px;
    max-height:min(760px,calc(100dvh - 28px));
    margin:auto;
    padding:0;
    overflow:auto;
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--surface);
    color:var(--text);
    box-shadow:0 26px 80px rgba(22,18,31,.2);
}

.attendance-correction-dialog::backdrop{
    background:rgba(20,17,28,.42);
    backdrop-filter:blur(3px);
}

.attendance-dialog-shell{
    min-width:0;
    display:grid;
}

.attendance-dialog-header{
    padding:18px 18px 15px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 36px;
    gap:14px;
    align-items:start;
    border-bottom:1px solid var(--border);
}

.attendance-dialog-header>div{
    min-width:0;
    display:grid;
    gap:3px;
}

.attendance-dialog-header>div>span{
    color:var(--accent);
    font-size:.59rem;
    font-weight:800;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.attendance-dialog-header h3{
    margin:0;
    color:var(--text);
    font-size:1.05rem;
    line-height:1.3;
}

.attendance-dialog-header p{
    margin:0;
    color:var(--muted);
    font-size:.65rem;
    line-height:1.4;
}

.attendance-dialog-close{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--surface-2);
    color:var(--muted);
    cursor:pointer;
}

.attendance-dialog-close:hover{
    color:var(--text);
    background:var(--surface);
}

.attendance-dialog-close .ui-icon{width:17px;height:17px}

.attendance-dialog-current{
    padding:12px 18px;
    display:flex;
    align-items:center;
    gap:18px;
    border-bottom:1px solid var(--border);
    background:var(--surface-2);
}

.attendance-dialog-current>div{
    display:flex;
    align-items:center;
    gap:7px;
}

.attendance-dialog-current small{
    color:var(--muted);
    font-size:.61rem;
    font-weight:700;
}

.attendance-existing-request{
    margin:14px 18px 0;
    padding:11px 12px;
    border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border));
    border-radius:11px;
    background:color-mix(in srgb,var(--accent) 5%,var(--surface));
}

.attendance-existing-request.is-approved{
    border-color:color-mix(in srgb,var(--success,#198754) 16%,var(--border));
    background:color-mix(in srgb,var(--success,#198754) 5%,var(--surface));
}

.attendance-existing-request.is-rejected{
    border-color:color-mix(in srgb,var(--danger,#d64545) 16%,var(--border));
    background:color-mix(in srgb,var(--danger,#d64545) 5%,var(--surface));
}

.attendance-existing-request>div{
    display:grid;
    gap:3px;
}

.attendance-existing-request strong{
    color:var(--text);
    font-size:.69rem;
}

.attendance-existing-request p{
    margin:0;
    color:var(--muted);
    font-size:.62rem;
    line-height:1.45;
}

.attendance-dialog-form{
    padding:16px 18px 18px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.attendance-dialog-field{
    min-width:0;
    display:grid;
    gap:5px;
}

.attendance-dialog-field>span{
    color:var(--text);
    font-size:.63rem;
    font-weight:700;
}

.attendance-dialog-field>span small{
    color:var(--muted);
    font-weight:600;
}

.attendance-dialog-field select,
.attendance-dialog-field textarea,
.attendance-dialog-field input{
    width:100%;
    margin:0;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
    color:var(--text);
    font:inherit;
    font-size:.7rem;
    box-shadow:none;
}

.attendance-dialog-field select,
.attendance-dialog-field input{
    min-height:42px;
    padding:0 10px;
}

.attendance-dialog-field textarea{
    min-height:112px;
    padding:10px;
    resize:vertical;
}

.attendance-dialog-field select:focus,
.attendance-dialog-field textarea:focus,
.attendance-dialog-field input:focus{
    outline:0;
    border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent);
}

.attendance-dialog-reason{
    grid-column:1/-1;
}

.attendance-dialog-actions{
    grid-column:1/-1;
    padding-top:4px;
    display:flex;
    justify-content:flex-end;
    gap:8px;
}

.attendance-dialog-actions .btn{
    min-height:39px!important;
    padding:8px 11px!important;
    gap:6px!important;
    border-radius:10px!important;
    font-size:.67rem!important;
}

.attendance-dialog-actions .ui-icon{width:14px;height:14px}

@media (max-width:900px){
    .attendance-page-v3 .attendance-meta-strip-v3{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:0;
    }

    .attendance-page-v3 .attendance-meta-strip-v3>span:nth-child(3){
        border-left:0;
        border-top:1px solid var(--border);
        padding-top:10px;
        margin-top:10px;
    }

    .attendance-page-v3 .attendance-meta-strip-v3>span:nth-child(4){
        border-top:1px solid var(--border);
        padding-top:10px;
        margin-top:10px;
    }

    .attendance-history-month{
        grid-template-columns:1fr;
        gap:7px;
    }

    .attendance-history-month-header{
        position:static;
        padding:0 2px;
        display:flex;
        align-items:center;
        justify-content:space-between;
    }

    .attendance-timeline-row{
        grid-template-columns:54px minmax(0,1fr) auto;
    }

    .attendance-timeline-status{
        grid-column:2;
        justify-content:flex-start;
    }

    .attendance-history-action{
        grid-column:3;
        grid-row:1 / span 2;
        align-self:center;
    }
}

@media (max-width:680px){
    .attendance-page-v3 .attendance-meta-strip-v3{
        padding:10px 8px;
    }

    .attendance-page-v3 .attendance-meta-strip-v3>span{
        padding-inline:8px;
        display:grid;
        justify-items:center;
        gap:2px;
    }

    .attendance-history-timeline{
        gap:14px;
    }

    .attendance-history-month-list::before{
        left:25px;
    }

    .attendance-timeline-row{
        grid-template-columns:50px minmax(0,1fr) 36px;
        gap:9px;
        padding:9px;
        border-radius:12px;
    }

    .attendance-date-tile{
        width:50px;
        height:50px;
        border-radius:10px;
    }

    .attendance-timeline-main>strong{
        white-space:normal;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
    }

    .attendance-timeline-status{
        grid-column:1/-1;
        padding-left:59px;
        justify-content:flex-start;
    }

    .attendance-history-action{
        grid-column:3;
        grid-row:1;
        width:36px;
        height:36px;
        min-height:36px;
        padding:0;
    }

    .attendance-history-action span{
        display:none;
    }

    .attendance-correction-dialog{
        width:calc(100vw - 18px);
        max-height:calc(100dvh - 18px);
        border-radius:15px;
    }

    .attendance-dialog-header{
        padding:15px 14px 12px;
    }

    .attendance-dialog-current{
        padding:10px 14px;
        align-items:flex-start;
        flex-direction:column;
        gap:7px;
    }

    .attendance-existing-request{
        margin:12px 14px 0;
    }

    .attendance-dialog-form{
        padding:14px;
        grid-template-columns:1fr;
        gap:10px;
    }

    .attendance-dialog-reason,
    .attendance-dialog-actions{
        grid-column:1;
    }

    .attendance-dialog-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .attendance-dialog-actions .btn{
        width:100%!important;
    }
}

@media (max-width:420px){
    .attendance-timeline-status{
        padding-left:0;
    }

    .attendance-status-badge,
    .attendance-request-badge{
        font-size:.52rem;
    }

    .attendance-dialog-actions{
        grid-template-columns:1fr;
    }
}

@media (prefers-reduced-motion:reduce){
    .attendance-timeline-row,
    .attendance-history-action{
        transition-duration:.01ms!important;
    }
}


/* =====================================================================
   CALENDAR PAGE — UI/UX v2
   Compact schedule workspace. Scoped to .calendar-page-v2.
   ===================================================================== */

.calendar-page-v2{width:min(1180px,100%);margin:0 auto;display:grid;gap:16px}
.calendar-page-header-v2{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.calendar-page-header-v2>div{min-width:0}
.calendar-page-eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:7px;color:var(--accent);font-size:.67rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}
.calendar-page-eyebrow .ui-icon{width:16px;height:16px}
.calendar-page-header-v2 h1{margin:0;color:var(--text);font-size:clamp(2rem,4vw,3rem);line-height:1.02;letter-spacing:-.045em}
.calendar-page-header-v2 p{max-width:700px;margin:10px 0 0;color:var(--muted);font-size:.87rem;line-height:1.55}
.calendar-jump-today{flex:0 0 auto;min-height:40px!important;padding:8px 11px!important;gap:6px!important;border-radius:11px!important;font-size:.71rem!important}
.calendar-jump-today .ui-icon{width:16px;height:16px}

.calendar-toolbar-v2{min-width:0;padding:5px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:0 4px 16px rgba(28,21,40,.022)}
.calendar-view-switch-v2{min-width:0;display:flex;align-items:center;gap:3px;overflow-x:auto}
.calendar-view-switch-v2 a{min-height:38px;padding:7px 13px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:10px;color:var(--muted);font-size:.72rem;font-weight:750;text-decoration:none;transition:background .15s ease,color .15s ease}
.calendar-view-switch-v2 a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.calendar-view-switch-v2 a.active{background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent)}
.calendar-period-nav-v2{min-width:205px;display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:7px;align-items:center}
.calendar-period-nav-v2>div,.calendar-period-label-v2{min-width:0;display:grid;justify-items:center;gap:1px}
.calendar-period-nav-v2 small,.calendar-period-label-v2 small{color:var(--muted);font-size:.53rem;font-weight:750;letter-spacing:.05em;text-transform:uppercase}
.calendar-period-nav-v2 strong,.calendar-period-label-v2 strong{max-width:100%;overflow:hidden;color:var(--text);font-size:.72rem;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.calendar-period-arrow{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);text-decoration:none}
.calendar-period-arrow:hover{border-color:color-mix(in srgb,var(--accent) 20%,var(--border));background:color-mix(in srgb,var(--accent) 5%,var(--surface));color:var(--accent);text-decoration:none}
.calendar-period-arrow .ui-icon{width:16px;height:16px}
.calendar-period-label-v2{min-width:190px;padding:0 8px;justify-items:end}

.calendar-insight-strip-v2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden}
.calendar-insight-strip-v2>div{min-width:0;min-height:62px;padding:10px 16px;display:flex;align-items:center;justify-content:center;gap:7px;border-left:1px solid var(--border)}
.calendar-insight-strip-v2>div:first-child{border-left:0}
.calendar-insight-strip-v2 strong{color:var(--text);font-size:1rem;line-height:1}
.calendar-insight-strip-v2 span{color:var(--muted);font-size:.65rem;font-weight:650}

.calendar-legend-v2{min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.calendar-legend-label{margin-right:2px;color:var(--muted);font-size:.61rem;font-weight:700}
.calendar-legend-chip{min-height:25px;padding:4px 7px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:.59rem;font-weight:700}
.calendar-legend-chip i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.calendar-legend-chip b{min-width:17px;height:17px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));color:var(--accent);font-size:.53rem}

/* Month view */
.calendar-month-board-v2{min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:17px;background:var(--surface);box-shadow:0 7px 24px rgba(28,21,40,.025)}
.calendar-weekdays-v2{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--border);background:var(--surface-2)}
.calendar-weekdays-v2 span{min-height:34px;display:grid;place-items:center;color:var(--muted);font-size:.59rem;font-weight:800;letter-spacing:.045em;text-transform:uppercase}
.calendar-month-grid-v2{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.calendar-day-v2{min-width:0;min-height:132px;padding:8px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface)}
.calendar-day-v2:nth-child(7n){border-right:0}
.calendar-day-v2:nth-last-child(-n+7){border-bottom:0}
.calendar-day-v2.is-outside{background:color-mix(in srgb,var(--surface-2) 55%,var(--surface));opacity:.58}
.calendar-day-v2>header{min-height:27px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.calendar-day-date-v2{display:flex;align-items:center;gap:5px}
.calendar-mobile-weekday-v2{display:none}
.calendar-day-date-v2 time{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;color:var(--muted);font-size:.67rem;font-weight:750}
.calendar-day-v2.is-today .calendar-day-date-v2 time{background:var(--accent);color:#fff}
.calendar-day-count-v2{min-width:20px;height:20px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));color:var(--accent);font-size:.53rem;font-weight:800}
.calendar-day-events-v2{display:grid;gap:4px}
.calendar-event-chip-v2{min-width:0;padding:6px 7px;display:grid;grid-template-columns:6px minmax(0,1fr);gap:6px;align-items:start;border:1px solid transparent;border-radius:8px;background:color-mix(in srgb,var(--accent) 5%,var(--surface));color:inherit;text-decoration:none;transition:border-color .14s ease,background .14s ease}
.calendar-event-chip-v2:hover{border-color:color-mix(in srgb,var(--accent) 18%,var(--border));background:color-mix(in srgb,var(--accent) 8%,var(--surface));text-decoration:none}
.calendar-event-dot-v2{width:6px;height:6px;margin-top:5px;border-radius:50%;background:var(--accent)}
.calendar-event-chip-copy-v2{min-width:0;display:grid;gap:2px}
.calendar-event-chip-copy-v2 strong{overflow:hidden;color:var(--text);font-size:.62rem;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.calendar-event-chip-copy-v2 small{overflow:hidden;color:var(--muted);font-size:.52rem;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.calendar-event-chip-v2 em{display:none}

/* Agenda / Today / Week */
.calendar-agenda-v2{display:grid;gap:15px}
.calendar-agenda-group-v2{min-width:0;display:grid;gap:8px}
.calendar-agenda-group-v2>header{display:flex;align-items:end;justify-content:space-between;gap:14px;padding-inline:2px}
.calendar-agenda-group-v2>header>div{min-width:0;display:grid;gap:1px}
.calendar-agenda-group-v2>header small{color:var(--muted);font-size:.59rem;font-weight:700;text-transform:uppercase;letter-spacing:.045em}
.calendar-agenda-group-v2>header h2{margin:0;color:var(--text);font-size:1.02rem;letter-spacing:-.02em}
.calendar-agenda-group-v2>header>span{min-width:27px;height:27px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);font-size:.59rem;font-weight:800}
.calendar-agenda-list-v2{padding:6px;display:grid;gap:5px;border:1px solid var(--border);border-radius:15px;background:var(--surface)}
.calendar-agenda-row-v2{min-width:0;min-height:72px;padding:9px 10px;display:grid;grid-template-columns:42px 38px minmax(0,1fr) 24px;gap:10px;align-items:center;border:1px solid transparent;border-radius:11px;background:var(--surface-2);color:inherit;text-decoration:none;transition:border-color .14s ease,background .14s ease}
.calendar-agenda-row-v2:hover{border-color:var(--border);background:var(--surface);text-decoration:none}
.calendar-agenda-row-v2>time{min-width:0;display:grid;justify-items:center;gap:1px}
.calendar-agenda-row-v2>time strong{color:var(--text);font-size:.94rem;line-height:1}
.calendar-agenda-row-v2>time small{color:var(--muted);font-size:.55rem;font-weight:750;text-transform:uppercase}
.calendar-agenda-icon-v2{width:38px;height:38px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 10%,var(--border));border-radius:10px;background:var(--surface);color:var(--accent)}
.calendar-agenda-icon-v2 .ui-icon{width:18px;height:18px}
.calendar-agenda-copy-v2{min-width:0;display:grid;gap:2px}
.calendar-agenda-meta-v2{min-width:0;display:flex;align-items:center;gap:7px}
.calendar-agenda-meta-v2 b{color:var(--accent);font-size:.55rem;font-weight:800;letter-spacing:.035em;text-transform:uppercase}
.calendar-agenda-meta-v2 em{color:var(--muted);font-size:.56rem;font-style:normal}
.calendar-agenda-copy-v2>strong{min-width:0;overflow:hidden;color:var(--text);font-size:.77rem;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.calendar-agenda-copy-v2>small{min-width:0;overflow:hidden;color:var(--muted);font-size:.61rem;text-overflow:ellipsis;white-space:nowrap}
.calendar-agenda-arrow-v2{width:24px;height:24px;display:grid;place-items:center;color:var(--muted)}
.calendar-agenda-arrow-v2 .ui-icon{width:15px;height:15px}
.calendar-agenda-row-v2:hover .calendar-agenda-arrow-v2{color:var(--accent)}

.calendar-empty-v2{min-height:260px;padding:34px 22px;display:grid;place-items:center;align-content:center;gap:7px;border:1px dashed color-mix(in srgb,var(--accent) 18%,var(--border));border-radius:16px;background:color-mix(in srgb,var(--accent) 1.5%,var(--surface));text-align:center}
.calendar-empty-v2>span{width:46px;height:46px;display:grid;place-items:center;margin-bottom:3px;border-radius:13px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}
.calendar-empty-v2>span .ui-icon{width:22px;height:22px}
.calendar-empty-v2 h2{margin:0;color:var(--text);font-size:1rem}
.calendar-empty-v2 p{max-width:400px;margin:0;color:var(--muted);font-size:.72rem;line-height:1.5}

@media (max-width:900px){
    .calendar-toolbar-v2{align-items:stretch;flex-direction:column}
    .calendar-period-nav-v2,.calendar-period-label-v2{width:100%;min-width:0}
    .calendar-period-label-v2{min-height:34px;justify-items:center}
    .calendar-day-v2{min-height:118px;padding:6px}
    .calendar-event-chip-v2{padding:5px}
    .calendar-event-chip-copy-v2 strong{font-size:.58rem}
    .calendar-event-chip-copy-v2 small{font-size:.49rem}
}

@media (max-width:680px){
    .calendar-page-v2{gap:13px}
    .calendar-page-header-v2{align-items:flex-start}
    .calendar-page-header-v2 h1{font-size:2rem}
    .calendar-page-header-v2 p{font-size:.8rem}
    .calendar-jump-today{min-width:40px!important;width:40px!important;min-height:40px!important;height:40px!important;padding:0!important;font-size:0!important}
    .calendar-jump-today .ui-icon{width:18px;height:18px}
    .calendar-toolbar-v2{padding:5px;gap:7px}
    .calendar-view-switch-v2{width:100%}
    .calendar-view-switch-v2 a{flex:1 0 auto;min-height:36px;padding:6px 9px;font-size:.68rem}
    .calendar-period-nav-v2{grid-template-columns:36px minmax(0,1fr) 36px}
    .calendar-period-arrow{width:36px;height:34px}
    .calendar-insight-strip-v2{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:12px}
    .calendar-insight-strip-v2>div{min-height:52px;padding:8px 10px;border-left:1px solid var(--border);border-bottom:1px solid var(--border)}
    .calendar-insight-strip-v2>div:nth-child(odd){border-left:0}
    .calendar-insight-strip-v2>div:nth-last-child(-n+2){border-bottom:0}
    .calendar-insight-strip-v2 strong{font-size:.9rem}
    .calendar-insight-strip-v2 span{font-size:.59rem}
    .calendar-legend-v2{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
    .calendar-legend-label,.calendar-legend-chip{flex:0 0 auto}

    .calendar-month-board-v2{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
    .calendar-weekdays-v2{display:none}
    .calendar-month-grid-v2{display:grid;grid-template-columns:1fr;gap:8px}
    .calendar-day-v2,.calendar-day-v2:nth-child(7n),.calendar-day-v2:nth-last-child(-n+7){display:none;min-height:0;padding:10px;border:1px solid var(--border);border-radius:13px;background:var(--surface);opacity:1}
    .calendar-day-v2.has-events,.calendar-day-v2.is-today{display:block}
    .calendar-day-v2.is-outside:not(.has-events){display:none}
    .calendar-day-v2>header{min-height:34px;margin-bottom:5px}
    .calendar-day-date-v2{gap:8px}
    .calendar-mobile-weekday-v2{display:inline;color:var(--text);font-size:.72rem;font-weight:750}
    .calendar-day-date-v2 time{width:27px;height:27px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted)}
    .calendar-day-v2.is-today .calendar-day-date-v2 time{border-color:var(--accent);background:var(--accent);color:#fff}
    .calendar-day-events-v2{gap:5px}
    .calendar-event-chip-v2{min-height:54px;padding:8px 9px;grid-template-columns:7px minmax(0,1fr) auto;align-items:center;border:1px solid var(--border);background:var(--surface-2)}
    .calendar-event-dot-v2{margin-top:0}
    .calendar-event-chip-copy-v2 strong{font-size:.7rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
    .calendar-event-chip-copy-v2 small{font-size:.57rem}
    .calendar-event-chip-v2 em{display:inline-flex;align-items:center;min-height:22px;padding:3px 6px;border-radius:999px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));color:var(--accent);font-size:.51rem;font-style:normal;font-weight:800;text-transform:uppercase;white-space:nowrap}

    .calendar-agenda-v2{gap:12px}
    .calendar-agenda-group-v2>header h2{font-size:.9rem}
    .calendar-agenda-list-v2{padding:5px}
    .calendar-agenda-row-v2{min-height:68px;grid-template-columns:36px minmax(0,1fr) 22px;gap:9px;padding:9px}
    .calendar-agenda-row-v2>time{align-self:start;padding-top:3px}
    .calendar-agenda-icon-v2{display:none}
    .calendar-agenda-copy-v2>strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
    .calendar-agenda-copy-v2>small{white-space:normal;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
}

@media (max-width:420px){
    .calendar-page-header-v2 p{max-width:290px}
    .calendar-view-switch-v2 a{padding-inline:7px;font-size:.64rem}
    .calendar-legend-label{display:none}
    .calendar-insight-strip-v2>div{justify-content:flex-start;padding-inline:12px}
    .calendar-event-chip-v2 em{display:none}
    .calendar-agenda-meta-v2{gap:5px;flex-wrap:wrap}
}

@media (prefers-reduced-motion:reduce){
    .calendar-page-v2 *,.calendar-page-v2 *::before,.calendar-page-v2 *::after{transition-duration:.01ms!important}
}



/* =====================================================================
   MESSAGES PAGE — UI/UX v2
   Two-pane academic inbox. Scoped to .messages-page-v2.
   ===================================================================== */
.messages-page-v2{width:min(1220px,100%);margin:0 auto;display:grid;gap:16px}
.messages-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:22px}
.messages-page-header>div{min-width:0}.messages-eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:7px;color:var(--accent);font-size:.67rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.messages-eyebrow .ui-icon{width:16px;height:16px}
.messages-page-header h1{margin:0;color:var(--text);font-size:clamp(2rem,4vw,3rem);line-height:1.02;letter-spacing:-.045em}.messages-page-header p{max-width:680px;margin:10px 0 0;color:var(--muted);font-size:.87rem;line-height:1.55}
.messages-new-btn{flex:0 0 auto;min-height:42px!important;padding:8px 12px!important;gap:7px!important;border-radius:11px!important;font-size:.72rem!important}.messages-new-btn .ui-icon{width:16px;height:16px}
.messages-shell-v2{min-width:0;height:min(720px,calc(100vh - 185px));min-height:560px;display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);border:1px solid var(--border);border-radius:18px;background:var(--surface);overflow:hidden;box-shadow:0 10px 30px rgba(28,21,40,.03)}
.messages-inbox-panel{min-width:0;min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--border);background:color-mix(in srgb,var(--surface-2) 32%,var(--surface))}
.messages-inbox-header{min-height:68px;padding:14px 15px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}.messages-inbox-header>div{min-width:0;display:grid;gap:2px}.messages-inbox-header strong{color:var(--text);font-size:.9rem}.messages-inbox-header span{color:var(--muted);font-size:.62rem}.messages-inbox-header>b{min-height:24px;padding:4px 7px;display:inline-flex;align-items:center;border-radius:999px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent);font-size:.58rem;font-weight:800;white-space:nowrap}
.messages-search-box{height:38px;margin:0 12px 10px;padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--muted);transition:border-color .15s ease,box-shadow .15s ease}.messages-search-box:focus-within{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)}.messages-search-box .ui-icon{width:16px;height:16px;flex:0 0 16px}.messages-search-box input{width:100%;height:100%;padding:0!important;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;color:var(--text);font:inherit;font-size:.7rem}.messages-search-box input::placeholder{color:var(--muted)}
.messages-conversation-list{min-height:0;padding:2px 8px 10px;display:grid;align-content:start;gap:4px;overflow-y:auto}
.message-conversation-card{position:relative;min-width:0;min-height:72px;padding:10px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:9px;align-items:center;border:1px solid transparent;border-radius:12px;color:inherit;text-decoration:none;transition:background .15s ease,border-color .15s ease}.message-conversation-card:hover{background:var(--surface);border-color:var(--border);text-decoration:none}.message-conversation-card.active{background:color-mix(in srgb,var(--accent) 7%,var(--surface));border-color:color-mix(in srgb,var(--accent) 15%,var(--border))}
.message-conversation-avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--surface);color:var(--muted);border:1px solid var(--border)}.message-conversation-card.active .message-conversation-avatar,.message-conversation-card.is-unread .message-conversation-avatar{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 13%,var(--border));background:color-mix(in srgb,var(--accent) 6%,var(--surface))}.message-conversation-avatar .ui-icon{width:18px;height:18px}
.message-conversation-copy{min-width:0;display:grid;gap:4px}.message-conversation-topline{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:7px}.message-conversation-topline strong{min-width:0;overflow:hidden;color:var(--text);font-size:.72rem;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.message-conversation-card.is-unread .message-conversation-topline strong{font-weight:800}.message-conversation-topline time{flex:0 0 auto;color:var(--muted);font-size:.55rem}.message-conversation-preview{min-width:0;overflow:hidden;color:var(--muted);font-size:.62rem;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.message-conversation-card.is-unread .message-conversation-preview{color:color-mix(in srgb,var(--text) 70%,var(--muted))}
.message-unread-count{min-width:20px;height:20px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--accent);color:#fff;font-size:.56rem;font-weight:800}
.messages-search-empty,.messages-inbox-empty{padding:28px 16px;display:grid;justify-items:center;gap:6px;color:var(--muted);text-align:center}.messages-search-empty .ui-icon,.messages-inbox-empty>span{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--accent) 6%,var(--surface));color:var(--accent)}.messages-inbox-empty strong{color:var(--text);font-size:.76rem}.messages-inbox-empty p{max-width:210px;margin:0;font-size:.64rem;line-height:1.45}
.messages-thread-panel{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--surface)}
.messages-thread-header{min-width:0;min-height:68px;padding:10px 15px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 96%,var(--surface-2))}.messages-thread-avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent);font-size:.7rem;font-weight:800}.messages-thread-title{min-width:0;display:grid;gap:3px}.messages-thread-title strong{overflow:hidden;color:var(--text);font-size:.8rem;text-overflow:ellipsis;white-space:nowrap}.messages-thread-title span{overflow:hidden;color:var(--muted);font-size:.61rem;text-overflow:ellipsis;white-space:nowrap}.messages-thread-count{min-height:28px;padding:5px 8px;display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:8px;color:var(--muted);font-size:.59rem;font-weight:700;white-space:nowrap}.messages-mobile-back{display:none}
.messages-history-v2{min-width:0;min-height:0;padding:16px clamp(14px,2.5vw,28px);display:flex;flex-direction:column;gap:7px;overflow-y:auto;background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 35%,var(--surface)),var(--surface))}
.message-day-separator{display:flex;align-items:center;gap:10px;margin:8px 0}.message-day-separator::before,.message-day-separator::after{content:"";height:1px;flex:1;background:var(--border)}.message-day-separator span{padding:0 4px;color:var(--muted);font-size:.56rem;font-weight:700;white-space:nowrap}
.message-bubble-row{width:100%;display:flex;align-items:flex-end;gap:8px}.message-bubble-row.mine{justify-content:flex-end}.message-bubble-avatar{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));color:var(--accent);font-size:.56rem;font-weight:800;border:1px solid color-mix(in srgb,var(--accent) 10%,var(--border))}
.message-bubble-v2{max-width:min(72%,640px);padding:9px 11px 7px;display:grid;gap:4px;border:1px solid var(--border);border-radius:13px 13px 13px 4px;background:var(--surface);box-shadow:0 2px 8px rgba(28,21,40,.02)}.message-bubble-row.mine .message-bubble-v2{border-color:color-mix(in srgb,var(--accent) 15%,var(--border));border-radius:13px 13px 4px 13px;background:color-mix(in srgb,var(--accent) 8%,var(--surface))}.message-bubble-v2 strong{color:var(--accent);font-size:.59rem}.message-bubble-v2 p{margin:0;color:var(--text);font-size:.72rem;line-height:1.48;overflow-wrap:anywhere}.message-bubble-v2 time{justify-self:end;color:var(--muted);font-size:.53rem}
.messages-compose-v2{min-width:0;padding:10px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:end;border-top:1px solid var(--border);background:var(--surface)}.messages-compose-field{min-width:0;padding:8px 10px;display:grid;gap:3px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);transition:border-color .15s ease,box-shadow .15s ease}.messages-compose-field:focus-within{border-color:color-mix(in srgb,var(--accent) 40%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 7%,transparent)}.messages-compose-field textarea{width:100%;min-height:24px;max-height:120px;padding:0!important;resize:none;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;color:var(--text);font:inherit;font-size:.71rem;line-height:1.4}.messages-compose-field textarea::placeholder{color:var(--muted)}.messages-compose-field small{color:var(--muted);font-size:.53rem}.messages-send-btn{min-width:80px;min-height:48px!important;padding:8px 12px!important;gap:6px!important;border-radius:11px!important;font-size:.68rem!important}.messages-send-btn .ui-icon{width:15px;height:15px}
.messages-thread-empty,.messages-no-thread{min-height:100%;padding:30px;display:grid;place-items:center;align-content:center;gap:7px;text-align:center}.messages-thread-empty>span,.messages-no-thread>span{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));color:var(--accent)}.messages-thread-empty strong,.messages-no-thread h2{margin:0;color:var(--text);font-size:.9rem}.messages-thread-empty p,.messages-no-thread p{max-width:330px;margin:0;color:var(--muted);font-size:.67rem;line-height:1.45}
.message-new-dialog{width:min(560px,calc(100vw - 28px));max-width:560px;padding:0;border:0;border-radius:18px;background:transparent;color:var(--text);overflow:visible}.message-new-dialog::backdrop{background:rgba(22,18,31,.38);backdrop-filter:blur(4px)}.message-new-card{overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 24px 70px rgba(22,18,31,.18)}.message-new-card>header{padding:16px 17px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border-bottom:1px solid var(--border)}.message-new-card>header>div{min-width:0;display:flex;gap:11px}.message-new-icon{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}.message-new-card h2{margin:0;color:var(--text);font-size:.95rem}.message-new-card header p{margin:3px 0 0;color:var(--muted);font-size:.64rem;line-height:1.4}.message-new-form{padding:16px 17px;display:grid;gap:12px}.message-new-form label{display:grid;gap:6px;color:var(--text);font-size:.65rem;font-weight:700}.message-new-form select,.message-new-form input,.message-new-form textarea{width:100%;border-radius:10px}.message-new-form textarea{min-height:115px;resize:vertical}.message-new-form footer{padding-top:3px;display:flex;justify-content:flex-end;gap:8px}.message-new-form footer .btn{min-height:39px!important;border-radius:10px!important;font-size:.68rem!important}.message-new-form footer .ui-icon{width:14px;height:14px}
@media(max-width:900px){.messages-shell-v2{grid-template-columns:minmax(250px,300px) minmax(0,1fr)}.message-bubble-v2{max-width:82%}}
@media(max-width:680px){.messages-page-v2{gap:13px}.messages-page-header{align-items:flex-start}.messages-page-header h1{font-size:2rem}.messages-page-header p{font-size:.8rem}.messages-new-btn{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;font-size:0!important;border-radius:10px!important}.messages-new-btn .ui-icon{width:18px;height:18px}.messages-shell-v2{height:calc(100dvh - 205px);min-height:500px;grid-template-columns:1fr;border-radius:15px}.messages-inbox-panel{border-right:0}.messages-page-v2.show-inbox-first .messages-thread-panel{display:none}.messages-page-v2.has-explicit-thread .messages-inbox-panel{display:none}.messages-thread-panel{grid-column:1}.messages-mobile-back{width:max-content;display:inline-flex;align-items:center;gap:3px;color:var(--muted);font-size:.62rem;font-weight:750;text-decoration:none}.messages-mobile-back .ui-icon{width:15px;height:15px}.messages-thread-header{grid-template-columns:auto 34px minmax(0,1fr);min-height:62px;padding:9px 11px;gap:8px}.messages-thread-avatar{width:34px;height:34px}.messages-thread-count{display:none}.messages-history-v2{padding:12px 10px}.message-bubble-v2{max-width:86%;font-size:.7rem}.messages-compose-v2{padding:8px;gap:7px}.messages-compose-field{padding:7px 9px}.messages-compose-field small{display:none}.messages-send-btn{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;padding:0!important;font-size:0!important}.messages-send-btn .ui-icon{width:17px;height:17px}.message-new-dialog{width:calc(100vw - 20px)}.message-new-form footer .btn{flex:1}.message-new-card>header,.message-new-form{padding-inline:14px}}
@media(max-width:390px){.messages-shell-v2{height:calc(100dvh - 195px)}.message-conversation-card{min-height:68px;padding:9px}.message-bubble-v2{max-width:90%}}
@media(prefers-reduced-motion:reduce){.messages-page-v2 *,.messages-page-v2 *::before,.messages-page-v2 *::after{transition-duration:.01ms!important}}

/* =====================================================================
   MESSAGES PAGE — WHATSAPP-STYLE V3
   Familiar chat interaction, Pioneer LMS visual language.
   ===================================================================== */

.messages-page-v3{width:min(1360px,100%);margin:0 auto;display:grid;gap:12px}
.wa-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.wa-page-header>div{min-width:0}
.wa-page-eyebrow{display:inline-flex;align-items:center;gap:6px;margin-bottom:4px;color:var(--accent);font-size:.61rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.wa-page-eyebrow .ui-icon{width:15px;height:15px}
.wa-page-header h1{margin:0;color:var(--text);font-size:clamp(1.8rem,3vw,2.45rem);line-height:1.02;letter-spacing:-.04em}
.wa-page-header p{margin:6px 0 0;color:var(--muted);font-size:.77rem}
.wa-new-chat-primary{min-height:40px;padding:8px 13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:11px;background:var(--accent);color:#fff;font:inherit;font-size:.69rem;font-weight:750;cursor:pointer;box-shadow:0 5px 16px color-mix(in srgb,var(--accent) 20%,transparent)}
.wa-new-chat-primary .ui-icon{width:15px;height:15px}

.wa-shell{height:min(760px,calc(100dvh - 165px));min-height:590px;display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 10px 34px rgba(28,21,40,.04)}
.wa-inbox{min-width:0;min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--surface)}
.wa-inbox-header{min-height:64px;padding:12px 14px 9px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:color-mix(in srgb,var(--surface-2) 40%,var(--surface))}
.wa-inbox-header h2{margin:0;color:var(--text);font-size:1rem;line-height:1.15}
.wa-inbox-header>div:first-child{display:grid;gap:2px}.wa-inbox-header span{color:var(--muted);font-size:.58rem}
.wa-inbox-actions{display:flex;align-items:center;gap:7px}.wa-inbox-actions>b{min-width:22px;height:22px;padding:0 6px;display:grid;place-items:center;border-radius:999px;background:var(--accent);color:#fff;font-size:.57rem}
.wa-icon-btn{width:34px;height:34px;min-width:34px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;transition:background .15s ease,color .15s ease}
.wa-icon-btn:hover{background:var(--surface-2);color:var(--text)}.wa-icon-btn .ui-icon{width:18px;height:18px}

.wa-chat-search{height:38px;margin:7px 9px;padding:0 11px;display:flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:10px;background:var(--surface-2);color:var(--muted);transition:border-color .15s ease,box-shadow .15s ease}
.wa-chat-search:focus-within{border-color:color-mix(in srgb,var(--accent) 35%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 7%,transparent)}
.wa-chat-search .ui-icon{width:16px;height:16px;flex:0 0 16px}.wa-chat-search input{width:100%;height:100%;padding:0!important;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;color:var(--text);font:inherit;font-size:.69rem}
.wa-chat-search input::placeholder{color:var(--muted)}

.wa-chat-list{min-height:0;overflow-y:auto;padding:0 6px 9px;display:grid;align-content:start}
.wa-chat-row{min-width:0;min-height:70px;padding:8px 8px;display:grid;grid-template-columns:46px minmax(0,1fr);gap:10px;align-items:center;border-radius:10px;color:inherit;text-decoration:none;transition:background .14s ease}
.wa-chat-row:hover{background:var(--surface-2);text-decoration:none}.wa-chat-row.active{background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.wa-avatar{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent);font-size:.68rem;font-weight:800}
.wa-avatar img,.wa-message-avatar img{width:100%;height:100%;object-fit:cover;display:block}.wa-avatar>span{display:grid;place-items:center;width:100%;height:100%}
.wa-chat-copy{min-width:0;display:grid;gap:2px}.wa-chat-top,.wa-chat-bottom{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px}
.wa-chat-top strong{min-width:0;overflow:hidden;color:var(--text);font-size:.75rem;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.wa-chat-row.is-unread .wa-chat-top strong{font-weight:850}
.wa-chat-top time{flex:0 0 auto;color:var(--muted);font-size:.54rem}.wa-chat-row.is-unread .wa-chat-top time{color:var(--accent);font-weight:700}
.wa-chat-preview{min-width:0;overflow:hidden;color:var(--muted);font-size:.62rem;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.wa-chat-preview b{color:inherit;font-weight:700}
.wa-chat-copy>small{min-width:0;overflow:hidden;color:color-mix(in srgb,var(--muted) 82%,transparent);font-size:.52rem;text-overflow:ellipsis;white-space:nowrap}
.wa-unread{min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:var(--accent);color:#fff;font-size:.54rem}
.wa-search-empty[hidden],.wa-thread-search-empty[hidden],.wa-thread-search[hidden],.wa-reply-composer[hidden],.wa-selected-files[hidden],.wa-emoji-popover[hidden],.wa-attach-popover[hidden],.wa-edit-form[hidden]{display:none!important}
.wa-search-empty,.wa-empty-list{padding:34px 14px;display:grid;justify-items:center;gap:6px;color:var(--muted);text-align:center}.wa-search-empty>.ui-icon,.wa-empty-list>span{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 7%,var(--surface));color:var(--accent)}
.wa-empty-list strong{color:var(--text);font-size:.75rem}.wa-empty-list p{max-width:220px;margin:0;font-size:.62rem;line-height:1.45}

.wa-thread{min-width:0;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;background:color-mix(in srgb,var(--surface-2) 26%,var(--surface))}
.wa-thread-header{min-width:0;min-height:64px;padding:9px 12px;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;border-bottom:1px solid var(--border);background:var(--surface)}
.wa-thread-avatar{width:42px;height:42px;flex-basis:42px}.wa-thread-person{min-width:0;display:grid;gap:2px}.wa-thread-person strong{overflow:hidden;color:var(--text);font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.wa-thread-person span{overflow:hidden;color:var(--muted);font-size:.57rem;text-overflow:ellipsis;white-space:nowrap}
.wa-thread-actions{display:flex;align-items:center;gap:3px}.wa-mobile-back{display:none;color:var(--muted);text-decoration:none}
.wa-thread-search{min-height:46px;padding:6px 10px;display:grid;grid-template-columns:18px minmax(0,1fr) 34px;gap:8px;align-items:center;border-bottom:1px solid var(--border);background:var(--surface)}
.wa-thread-search>.ui-icon{width:17px;height:17px;color:var(--muted)}.wa-thread-search input{width:100%;height:34px;padding:0 8px!important;border:0!important;outline:0!important;background:var(--surface-2)!important;box-shadow:none!important;border-radius:8px;color:var(--text);font:inherit;font-size:.67rem}

.wa-message-history{min-width:0;min-height:0;padding:14px clamp(12px,2vw,24px) 18px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;background:
radial-gradient(circle at 15% 20%,color-mix(in srgb,var(--accent) 2.3%,transparent) 0 1px,transparent 1.5px) 0 0/24px 24px,
color-mix(in srgb,var(--surface-2) 36%,var(--surface))}
.wa-day-separator{display:flex;justify-content:center;margin:7px 0 6px}.wa-day-separator span{padding:5px 9px;border:1px solid color-mix(in srgb,var(--border) 80%,transparent);border-radius:7px;background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--muted);font-size:.53rem;font-weight:700;box-shadow:0 2px 7px rgba(28,21,40,.025)}
.wa-message-row{width:100%;display:flex;align-items:flex-end;gap:7px}.wa-message-row.mine{justify-content:flex-end}
.wa-message-avatar{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent);font-size:.51rem;font-weight:800}.wa-message-avatar>span{display:grid;place-items:center;width:100%;height:100%}
.wa-bubble{position:relative;max-width:min(72%,670px);min-width:92px;padding:7px 9px 5px;border:1px solid color-mix(in srgb,var(--border) 82%,transparent);border-radius:10px 10px 10px 2px;background:var(--surface);box-shadow:0 1px 3px rgba(28,21,40,.035)}
.wa-message-row.mine .wa-bubble{border-color:color-mix(in srgb,var(--accent) 14%,var(--border));border-radius:10px 10px 2px 10px;background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.wa-bubble-content{display:grid;gap:4px}.wa-sender-name{padding-right:20px;color:var(--accent);font-size:.57rem}.wa-bubble p{margin:0;padding-right:13px;color:var(--text);font-size:.71rem;line-height:1.46;overflow-wrap:anywhere}
.wa-message-meta{justify-self:end;display:inline-flex;align-items:center;gap:4px;margin-top:1px;color:var(--muted);font-size:.49rem;line-height:1}.wa-message-meta em{font-style:normal}.wa-delivery-tick{color:var(--accent);font-size:.58rem;letter-spacing:-.12em;padding-right:2px}
.wa-message-menu{position:absolute;top:2px;right:3px;z-index:5}.wa-message-menu>summary{width:24px;height:22px;display:grid;place-items:center;list-style:none;border-radius:50%;color:var(--muted);cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease}.wa-bubble:hover .wa-message-menu>summary,.wa-message-menu[open]>summary{opacity:1;background:color-mix(in srgb,var(--surface) 76%,transparent)}.wa-message-menu>summary::-webkit-details-marker{display:none}.wa-message-menu>summary .ui-icon{width:14px;height:14px}
.wa-message-menu>div{position:absolute;top:24px;right:0;min-width:112px;padding:4px;display:grid;gap:2px;border:1px solid var(--border);border-radius:9px;background:var(--surface);box-shadow:0 10px 30px rgba(28,21,40,.15)}
.wa-message-menu button{width:100%;min-height:31px;padding:5px 8px;display:flex;align-items:center;gap:7px;border:0;border-radius:6px;background:transparent;color:var(--text);font:inherit;font-size:.61rem;text-align:left;cursor:pointer}.wa-message-menu button:hover{background:var(--surface-2)}.wa-message-menu button .ui-icon{width:14px;height:14px;color:var(--muted)}
.wa-reply-quote{min-width:0;padding:6px 8px;display:grid;gap:2px;border-left:3px solid var(--accent);border-radius:6px;background:color-mix(in srgb,var(--surface-2) 76%,transparent)}.wa-message-row.mine .wa-reply-quote{background:color-mix(in srgb,var(--surface) 55%,transparent)}.wa-reply-quote strong{color:var(--accent);font-size:.55rem}.wa-reply-quote span{overflow:hidden;color:var(--muted);font-size:.57rem;text-overflow:ellipsis;white-space:nowrap}
.wa-attachment-stack{display:grid;gap:5px}.wa-media-image{display:block;overflow:hidden;border-radius:7px}.wa-media-image img{display:block;max-width:100%;width:auto;max-height:320px;object-fit:cover;border-radius:7px}.wa-media-video{display:block;width:min(420px,100%);max-height:320px;border-radius:7px;background:#000}.wa-media-audio{width:min(360px,100%);height:38px}
.wa-file-attachment{min-width:220px;padding:7px 8px;display:grid;grid-template-columns:34px minmax(0,1fr) 18px;gap:8px;align-items:center;border-radius:8px;background:color-mix(in srgb,var(--surface-2) 80%,var(--surface));color:inherit;text-decoration:none}.wa-message-row.mine .wa-file-attachment{background:color-mix(in srgb,var(--surface) 62%,transparent)}.wa-file-attachment:hover{text-decoration:none}.wa-file-attachment>span:first-child{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}.wa-file-attachment>span:first-child .ui-icon{width:17px;height:17px}.wa-file-attachment>span:nth-child(2){min-width:0;display:grid;gap:2px}.wa-file-attachment strong{overflow:hidden;color:var(--text);font-size:.61rem;text-overflow:ellipsis;white-space:nowrap}.wa-file-attachment small{color:var(--muted);font-size:.51rem}.wa-file-attachment>.ui-icon{width:16px;height:16px;color:var(--muted)}
.wa-edit-form{min-width:260px;display:grid;gap:6px}.wa-edit-form textarea{width:100%;min-height:64px;padding:8px!important;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border))!important;border-radius:7px!important;background:var(--surface)!important;color:var(--text)!important;font:inherit;font-size:.68rem;line-height:1.4;resize:vertical}.wa-edit-form footer{display:flex;justify-content:flex-end;gap:5px}.wa-edit-form button{min-height:28px;padding:4px 8px;border:0;border-radius:6px;background:var(--surface-2);color:var(--text);font:inherit;font-size:.57rem;font-weight:700;cursor:pointer}.wa-edit-form button[type=submit]{background:var(--accent);color:#fff}

.wa-thread-empty,.wa-no-thread{min-height:100%;display:grid;place-items:center;align-content:center;gap:7px;padding:28px;text-align:center}.wa-thread-empty>span,.wa-no-thread>span{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}.wa-thread-empty>span .ui-icon,.wa-no-thread>span .ui-icon{width:25px;height:25px}.wa-thread-empty strong,.wa-no-thread h2{margin:0;color:var(--text);font-size:.9rem}.wa-thread-empty p,.wa-no-thread p{max-width:330px;margin:0;color:var(--muted);font-size:.65rem;line-height:1.45}.wa-thread-search-empty{align-self:center;margin:12px auto;padding:7px 10px;border-radius:8px;background:var(--surface);color:var(--muted);font-size:.6rem}

.wa-composer{position:relative;min-width:0;padding:7px 9px 8px;border-top:1px solid var(--border);background:var(--surface)}
.wa-compose-row{display:grid;grid-template-columns:auto minmax(0,1fr) 42px;gap:6px;align-items:end}.wa-compose-tools{display:flex;align-items:center;align-self:end;padding-bottom:1px}.wa-compose-icon{width:36px;height:36px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}.wa-compose-icon:hover{background:var(--surface-2);color:var(--text)}.wa-compose-icon .ui-icon{width:19px;height:19px}
.wa-compose-field{min-width:0;min-height:40px;padding:8px 11px;display:flex;align-items:center;border:1px solid var(--border);border-radius:20px;background:var(--surface-2)}.wa-compose-field:focus-within{border-color:color-mix(in srgb,var(--accent) 30%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 6%,transparent)}.wa-compose-field textarea{width:100%;min-height:22px;max-height:120px;padding:0!important;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;color:var(--text);font:inherit;font-size:.69rem;line-height:1.45;resize:none}
.wa-send-button{width:40px;height:40px;min-width:40px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:var(--accent);color:#fff;cursor:pointer;box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 20%,transparent)}.wa-send-button .ui-icon{width:17px;height:17px}
.wa-popover-wrap{position:relative}.wa-emoji-popover,.wa-attach-popover{position:absolute;bottom:45px;left:0;z-index:30;border:1px solid var(--border);background:var(--surface);box-shadow:0 16px 42px rgba(28,21,40,.15)}
.wa-emoji-popover{width:232px;padding:7px;display:grid;grid-template-columns:repeat(6,1fr);gap:2px;border-radius:11px}.wa-emoji-popover button{width:34px;height:34px;border:0;border-radius:7px;background:transparent;font-size:1rem;cursor:pointer}.wa-emoji-popover button:hover{background:var(--surface-2)}
.wa-attach-popover{width:245px;padding:6px;border-radius:11px;display:grid;gap:2px}.wa-attach-popover label{min-height:48px;padding:6px 7px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:center;border-radius:8px;cursor:pointer}.wa-attach-popover label:hover{background:var(--surface-2)}.wa-attach-popover label>span:first-child{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}.wa-attach-popover label>span:first-child .ui-icon{width:17px;height:17px}.wa-attach-popover label>span:nth-child(2){display:grid;gap:1px}.wa-attach-popover strong{color:var(--text);font-size:.62rem}.wa-attach-popover small{color:var(--muted);font-size:.51rem}
.wa-reply-composer{margin:0 43px 6px 78px;padding:6px 7px 6px 9px;display:flex;align-items:center;justify-content:space-between;gap:9px;border-left:3px solid var(--accent);border-radius:7px;background:var(--surface-2)}.wa-reply-composer>span{min-width:0;display:grid;gap:2px}.wa-reply-composer strong{color:var(--accent);font-size:.56rem}.wa-reply-composer small{overflow:hidden;color:var(--muted);font-size:.55rem;text-overflow:ellipsis;white-space:nowrap}
.wa-selected-files{margin:0 43px 6px 78px;display:flex;gap:5px;overflow-x:auto}.wa-file-chip{max-width:210px;min-height:29px;padding:4px 5px 4px 8px;display:flex;align-items:center;gap:5px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--muted);font-size:.54rem;white-space:nowrap}.wa-file-chip span{max-width:150px;overflow:hidden;text-overflow:ellipsis}.wa-file-chip button{width:20px;height:20px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}.wa-file-chip button:hover{background:var(--surface);color:var(--text)}.wa-file-chip button .ui-icon{width:12px;height:12px}

.wa-new-dialog{width:min(520px,calc(100vw - 24px));max-width:520px;padding:0;border:0;border-radius:16px;background:transparent;color:var(--text);overflow:visible}.wa-new-dialog::backdrop{background:rgba(22,18,31,.42);backdrop-filter:blur(4px)}.wa-new-dialog-card{overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 25px 70px rgba(22,18,31,.2)}
.wa-new-dialog-card>header{padding:14px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border)}.wa-new-dialog-card>header>div{display:flex;align-items:center;gap:10px}.wa-new-dialog-card>header>div>span{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}.wa-new-dialog-card>header>div>span .ui-icon{width:18px;height:18px}.wa-new-dialog-card h2{margin:0;color:var(--text);font-size:.88rem}.wa-new-dialog-card header p{margin:2px 0 0;color:var(--muted);font-size:.58rem}
.wa-new-dialog-card form{padding:14px 15px;display:grid;gap:10px}.wa-new-dialog-card form>label{display:grid;gap:5px;color:var(--text);font-size:.61rem;font-weight:700}.wa-new-dialog-card select,.wa-new-dialog-card input,.wa-new-dialog-card textarea{width:100%;border-radius:9px}.wa-new-dialog-card textarea{min-height:96px;resize:vertical}
.wa-new-attachments{display:grid;gap:6px}.wa-new-attachments>span{color:var(--text);font-size:.61rem;font-weight:700}.wa-new-attachments>div:nth-child(2){display:flex;flex-wrap:wrap;gap:5px}.wa-new-upload-btn{min-height:32px;padding:5px 8px;display:inline-flex!important;align-items:center;gap:5px!important;border:1px solid var(--border);border-radius:8px;color:var(--muted)!important;font-size:.56rem!important;font-weight:700!important;cursor:pointer}.wa-new-upload-btn:hover{border-color:color-mix(in srgb,var(--accent) 20%,var(--border));color:var(--accent)!important}.wa-new-upload-btn .ui-icon{width:14px;height:14px}
.wa-new-dialog-card footer{padding-top:3px;display:flex;justify-content:flex-end;gap:7px}.wa-new-dialog-card footer .btn{min-height:38px!important;border-radius:9px!important;font-size:.64rem!important}.wa-new-dialog-card footer .ui-icon{width:14px;height:14px}

@media(max-width:1000px){.wa-shell{grid-template-columns:minmax(270px,315px) minmax(0,1fr)}.wa-bubble{max-width:80%}}
@media(max-width:680px){
.messages-page-v3{gap:8px}.wa-page-header{display:none}.wa-shell{height:calc(100dvh - 119px);min-height:480px;grid-template-columns:1fr;border-radius:0;border-left:0;border-right:0}.wa-inbox{border-right:0}
.messages-page-v3.show-inbox-first .wa-thread{display:none}.messages-page-v3.has-explicit-thread .wa-inbox{display:none}
.wa-inbox-header{min-height:58px;padding:9px 11px}.wa-chat-search{margin:6px 8px}.wa-chat-list{padding-inline:4px}.wa-chat-row{min-height:68px;padding:7px}
.wa-thread-header{min-height:58px;grid-template-columns:32px 38px minmax(0,1fr) auto;padding:7px 8px;gap:7px}.wa-mobile-back{width:32px;height:32px;display:grid;place-items:center;border-radius:50%}.wa-mobile-back:hover{background:var(--surface-2)}.wa-mobile-back .ui-icon{width:18px;height:18px}.wa-thread-avatar{width:36px;height:36px;flex-basis:36px}.wa-thread-person strong{font-size:.73rem}.wa-thread-person span{font-size:.53rem}
.wa-message-history{padding:10px 7px 13px}.wa-message-avatar{display:none}.wa-bubble{max-width:88%;font-size:.69rem}.wa-bubble p{font-size:.68rem}.wa-message-menu>summary{opacity:.6}.wa-media-image img{max-height:260px}.wa-file-attachment{min-width:190px}
.wa-composer{padding:6px}.wa-compose-row{grid-template-columns:auto minmax(0,1fr) 40px;gap:4px}.wa-compose-icon{width:32px;height:36px}.wa-compose-tools .wa-popover-wrap:first-child{display:none}.wa-compose-field{min-height:40px;padding:7px 10px}.wa-send-button{width:38px;height:38px;min-width:38px}
.wa-reply-composer,.wa-selected-files{margin-left:36px;margin-right:42px}.wa-attach-popover{left:-38px;bottom:43px}.wa-new-dialog{width:calc(100vw - 16px)}.wa-new-dialog-card form,.wa-new-dialog-card>header{padding-inline:12px}
}
@media(max-width:390px){.wa-chat-row{grid-template-columns:42px minmax(0,1fr);gap:8px}.wa-avatar{width:40px;height:40px}.wa-bubble{max-width:92%}.wa-file-attachment{min-width:170px}.wa-thread-person span{max-width:180px}}
@media(prefers-reduced-motion:reduce){.messages-page-v3 *,.messages-page-v3 *::before,.messages-page-v3 *::after{transition-duration:.01ms!important}}

/* =====================================================================
   MESSAGES V4 — DIRECT PEER AVATAR + PRIVATE PHOTO FALLBACK
   ===================================================================== */
.messages-page-v3 .wa-avatar,
.messages-page-v3 .wa-message-avatar{
    position:relative;
    isolation:isolate;
}

.messages-page-v3 .wa-avatar-fallback{
    position:absolute;
    inset:0;
    z-index:0;
    display:grid!important;
    place-items:center;
    width:100%;
    height:100%;
}

.messages-page-v3 img[data-private-avatar]{
    position:absolute;
    inset:0;
    z-index:1;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    opacity:0;
    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
    transition:opacity .12s ease;
}

.messages-page-v3 img[data-private-avatar].is-loaded{
    opacity:1;
}

img.avatar-image,
img.profile-avatar,
img.avatar-img,
[data-avatar-image]{
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
}


/* =====================================================================
   MESSAGES V5 — COMPACT COMPOSER + ATTACHMENT PIN
   Keeps the small inbox compose action; removes the large page CTA.
   ===================================================================== */
.messages-page-v3 .wa-page-header{align-items:flex-start}
.messages-page-v3 .wa-page-header .wa-new-chat-primary{display:none!important}
.messages-page-v3 .wa-no-thread .wa-new-chat-primary{display:none!important}

.messages-page-v3 .wa-composer{
    padding:8px 10px 9px!important;
    background:var(--surface)!important;
}
.messages-page-v3 .wa-compose-row-v5{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) 42px!important;
    gap:7px!important;
    align-items:end!important;
}
.messages-page-v3 .wa-attach-wrap{
    align-self:end;
}
.messages-page-v3 .wa-attach-button{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    border:1px solid var(--border)!important;
    border-radius:50%!important;
    background:var(--surface-2)!important;
    color:var(--muted)!important;
}
.messages-page-v3 .wa-attach-button:hover,
.messages-page-v3 .wa-attach-button[aria-expanded="true"]{
    border-color:color-mix(in srgb,var(--accent) 25%,var(--border))!important;
    background:color-mix(in srgb,var(--accent) 7%,var(--surface))!important;
    color:var(--accent)!important;
}
.messages-page-v3 .wa-attach-button .ui-icon{
    width:19px!important;
    height:19px!important;
}

.messages-page-v3 .wa-compose-field-v5{
    min-height:42px!important;
    height:auto!important;
    padding:5px 5px 5px 13px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 34px!important;
    gap:5px!important;
    align-items:end!important;
    border:1px solid var(--border)!important;
    border-radius:21px!important;
    background:var(--surface-2)!important;
}
.messages-page-v3 .wa-compose-field-v5:focus-within{
    border-color:color-mix(in srgb,var(--accent) 28%,var(--border))!important;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 6%,transparent)!important;
}
.messages-page-v3 .wa-compose-field-v5 textarea{
    width:100%!important;
    min-height:30px!important;
    height:30px;
    max-height:110px!important;
    padding:5px 0 3px!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    outline:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:var(--text)!important;
    font:inherit!important;
    font-size:.69rem!important;
    line-height:1.4!important;
    resize:none!important;
    overflow-y:auto!important;
}
.messages-page-v3 .wa-emoji-wrap{
    align-self:end;
}
.messages-page-v3 .wa-emoji-button{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    border-radius:50%!important;
    color:var(--muted)!important;
}
.messages-page-v3 .wa-emoji-button:hover{
    background:var(--surface)!important;
    color:var(--accent)!important;
}
.messages-page-v3 .wa-emoji-button .ui-icon{
    width:17px!important;
    height:17px!important;
}
.messages-page-v3 .wa-send-button{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    align-self:end!important;
}
.messages-page-v3 .wa-attach-popover{
    left:0!important;
    bottom:50px!important;
    width:260px!important;
}
.messages-page-v3 .wa-emoji-popover{
    right:0!important;
    left:auto!important;
    bottom:42px!important;
}
.messages-page-v3 .wa-reply-composer,
.messages-page-v3 .wa-selected-files{
    margin-left:49px!important;
    margin-right:49px!important;
}

@media(max-width:680px){
    .messages-page-v3 .wa-composer{padding:7px 7px 8px!important}
    .messages-page-v3 .wa-compose-row-v5{grid-template-columns:38px minmax(0,1fr) 38px!important;gap:5px!important}
    .messages-page-v3 .wa-attach-button,
    .messages-page-v3 .wa-send-button{width:38px!important;height:38px!important;min-width:38px!important}
    .messages-page-v3 .wa-compose-field-v5{min-height:38px!important;padding:3px 4px 3px 11px!important;grid-template-columns:minmax(0,1fr) 32px!important}
    .messages-page-v3 .wa-compose-field-v5 textarea{min-height:28px!important;height:28px;padding:4px 0 2px!important;font-size:.68rem!important}
    .messages-page-v3 .wa-emoji-button{width:30px!important;height:30px!important;min-width:30px!important}
    .messages-page-v3 .wa-attach-popover{left:0!important;bottom:45px!important;width:min(260px,calc(100vw - 28px))!important}
    .messages-page-v3 .wa-reply-composer,
    .messages-page-v3 .wa-selected-files{margin-left:43px!important;margin-right:43px!important}
}

/* =====================================================================
   MESSAGES V6 — FIXED CHAT VIEWPORT + ALWAYS-VISIBLE COMPOSER
   Prevents large media/messages from pushing the sending area off-screen.
   ===================================================================== */

/*
 * Flex is intentional here. The previous four-row grid depended on the
 * optional thread-search row being present. When search was hidden, the
 * history could land in an auto-sized row and grow with large attachments,
 * pushing the composer below the visible chat shell.
 */
.messages-page-v3 .wa-thread{
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;

    display:flex!important;
    flex-direction:column!important;
}

.messages-page-v3 .wa-thread-header,
.messages-page-v3 .wa-thread-search{
    flex:0 0 auto!important;
}

.messages-page-v3 .wa-message-history{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
}

.messages-page-v3 .wa-composer{
    position:relative!important;
    z-index:20!important;
    flex:0 0 auto!important;
    min-height:0!important;
    box-shadow:0 -1px 0 color-mix(in srgb,var(--border) 70%,transparent)!important;
}

/* Keep the empty-thread state centred when the thread uses flex layout. */
.messages-page-v3 .wa-no-thread{
    flex:1 1 auto!important;
    min-height:0!important;
}

/* Media should read like a chat preview, not a full-page banner. */
.messages-page-v3 .wa-attachment-stack{
    max-width:100%!important;
}

.messages-page-v3 .wa-media-image{
    width:max-content!important;
    max-width:min(480px,100%)!important;
    overflow:hidden!important;
    border-radius:9px!important;
    background:var(--surface-2)!important;
}

.messages-page-v3 .wa-media-image img{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:100%!important;
    max-height:280px!important;
    object-fit:contain!important;
    border-radius:9px!important;
}

.messages-page-v3 .wa-media-video{
    width:min(480px,100%)!important;
    max-height:280px!important;
    object-fit:contain!important;
}

@supports selector(.wa-bubble:has(.wa-media-image)){
    .messages-page-v3 .wa-bubble:has(.wa-media-image),
    .messages-page-v3 .wa-bubble:has(.wa-media-video){
        max-width:min(68%,520px)!important;
    }
}

/* Avoid a large attachment forcing horizontal overflow in narrow threads. */
.messages-page-v3 .wa-bubble,
.messages-page-v3 .wa-bubble-content,
.messages-page-v3 .wa-attachment-stack{
    min-width:0!important;
}

@media(max-width:680px){
    .messages-page-v3 .wa-message-history{
        padding-bottom:12px!important;
    }

    .messages-page-v3 .wa-media-image{
        max-width:min(82vw,390px)!important;
    }

    .messages-page-v3 .wa-media-image img,
    .messages-page-v3 .wa-media-video{
        max-height:240px!important;
    }

    @supports selector(.wa-bubble:has(.wa-media-image)){
        .messages-page-v3 .wa-bubble:has(.wa-media-image),
        .messages-page-v3 .wa-bubble:has(.wa-media-video){
            max-width:92%!important;
        }
    }
}

@media(max-width:390px){
    .messages-page-v3 .wa-media-image img,
    .messages-page-v3 .wa-media-video{
        max-height:210px!important;
    }
}

/* =====================================================================
   MESSAGES V7 — CONVERSATION INFO DRAWER
   Participant profile + search + Media / Links / Documents.
   ===================================================================== */
.messages-page-v3 .wa-thread{position:relative!important}
.messages-page-v3 .wa-thread-actions{display:flex;align-items:center;gap:3px}
.messages-page-v3 .wa-info-backdrop{position:absolute;inset:0;z-index:54;background:rgba(20,16,28,.18);backdrop-filter:blur(1px)}
.messages-page-v3 .wa-info-panel{position:absolute;top:0;right:0;bottom:0;z-index:55;width:min(360px,92%);min-width:0;display:flex;flex-direction:column;border-left:1px solid var(--border);background:var(--surface);box-shadow:-18px 0 42px rgba(25,18,36,.12);overflow:hidden}
.messages-page-v3 .wa-info-header{flex:0 0 auto;min-height:64px;padding:9px 12px;display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center;border-bottom:1px solid var(--border);background:var(--surface)}
.messages-page-v3 .wa-info-header>strong{color:var(--text);font-size:.86rem}
.messages-page-v3 .wa-info-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 14px 22px;display:grid;align-content:start;gap:16px}
.messages-page-v3 .wa-info-profile{display:grid;justify-items:center;text-align:center;gap:5px;padding:4px 8px 14px;border-bottom:1px solid var(--border)}
.messages-page-v3 .wa-info-avatar{width:82px;height:82px;flex-basis:82px;margin-bottom:5px;border:1px solid var(--border);font-size:1.25rem;box-shadow:0 6px 18px rgba(28,21,40,.07)}
.messages-page-v3 .wa-info-profile h2{margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:1.08rem}
.messages-page-v3 .wa-info-profile p{margin:0;color:var(--muted);font-size:.68rem;line-height:1.4}
.messages-page-v3 .wa-info-role{margin-top:4px;min-height:24px;padding:3px 8px;display:inline-flex;align-items:center;border-radius:999px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent);font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.messages-page-v3 .wa-info-search-action{width:100%;min-height:58px;padding:9px 10px;display:grid;grid-template-columns:34px minmax(0,1fr) 17px;gap:9px;align-items:center;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer}
.messages-page-v3 .wa-info-search-action:hover{background:var(--surface-2)}
.messages-page-v3 .wa-info-search-action>span:first-child{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}
.messages-page-v3 .wa-info-search-action>span:nth-child(2){min-width:0;display:grid;gap:2px}
.messages-page-v3 .wa-info-search-action strong{font-size:.72rem}.messages-page-v3 .wa-info-search-action small{color:var(--muted);font-size:.59rem;line-height:1.3}.messages-page-v3 .wa-info-search-action>.ui-icon{width:16px;height:16px;color:var(--muted)}
.messages-page-v3 .wa-info-shared{display:grid;gap:10px}.messages-page-v3 .wa-info-shared>header{display:flex;align-items:end;justify-content:space-between}.messages-page-v3 .wa-info-shared h3{margin:0;color:var(--text);font-size:.8rem}.messages-page-v3 .wa-info-shared p{margin:2px 0 0;color:var(--muted);font-size:.59rem}
.messages-page-v3 .wa-info-tabs{padding:3px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.messages-page-v3 .wa-info-tabs button{min-width:0;min-height:34px;padding:5px 6px;display:flex;align-items:center;justify-content:center;gap:5px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:inherit;font-size:.61rem;font-weight:750;cursor:pointer}
.messages-page-v3 .wa-info-tabs button.active{background:var(--surface);color:var(--accent);box-shadow:0 1px 4px rgba(25,18,36,.06)}
.messages-page-v3 .wa-info-tabs b{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:color-mix(in srgb,currentColor 7%,transparent);font-size:.53rem}
.messages-page-v3 .wa-info-tab-panel{min-width:0}.messages-page-v3 .wa-info-empty{min-height:110px;display:grid;place-items:center;align-content:center;gap:7px;border:1px dashed var(--border);border-radius:12px;color:var(--muted);font-size:.65rem;text-align:center}.messages-page-v3 .wa-info-empty .ui-icon{width:24px;height:24px;opacity:.65}
.messages-page-v3 .wa-info-media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.messages-page-v3 .wa-info-media-tile{position:relative;aspect-ratio:1;min-width:0;overflow:hidden;display:grid;place-items:center;align-content:center;gap:4px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:var(--accent);text-decoration:none}.messages-page-v3 .wa-info-media-tile:hover{border-color:color-mix(in srgb,var(--accent) 25%,var(--border));text-decoration:none}.messages-page-v3 .wa-info-media-tile img{width:100%;height:100%;object-fit:cover}.messages-page-v3 .wa-info-media-tile>.ui-icon{width:22px;height:22px}.messages-page-v3 .wa-info-media-tile strong{font-size:.56rem}.messages-page-v3 .wa-info-media-tile>span{position:absolute;right:4px;bottom:4px;padding:2px 4px;border-radius:5px;background:rgba(15,12,20,.7);color:#fff;font-size:.48rem}.messages-page-v3 .wa-info-media-tile:not(.is-image)>span{position:static;background:transparent;color:var(--muted)}
.messages-page-v3 .wa-info-link-list,.messages-page-v3 .wa-info-document-list{display:grid;gap:5px}.messages-page-v3 .wa-info-link-row,.messages-page-v3 .wa-info-document-row{min-width:0;min-height:58px;padding:8px;display:grid;grid-template-columns:34px minmax(0,1fr) 16px;gap:8px;align-items:center;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:inherit;text-decoration:none}.messages-page-v3 .wa-info-link-row:hover,.messages-page-v3 .wa-info-document-row:hover{background:var(--surface-2);text-decoration:none}.messages-page-v3 .wa-info-item-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}.messages-page-v3 .wa-info-item-icon .ui-icon{width:17px;height:17px}.messages-page-v3 .wa-info-link-row>span:nth-child(2),.messages-page-v3 .wa-info-document-row>span:nth-child(2){min-width:0;display:grid;gap:1px}.messages-page-v3 .wa-info-link-row strong,.messages-page-v3 .wa-info-document-row strong{overflow:hidden;color:var(--text);font-size:.66rem;text-overflow:ellipsis;white-space:nowrap}.messages-page-v3 .wa-info-link-row small,.messages-page-v3 .wa-info-document-row small{overflow:hidden;color:var(--muted);font-size:.54rem;text-overflow:ellipsis;white-space:nowrap}.messages-page-v3 .wa-info-link-row em,.messages-page-v3 .wa-info-document-row em{color:var(--muted);font-size:.5rem;font-style:normal}.messages-page-v3 .wa-info-link-row>.ui-icon,.messages-page-v3 .wa-info-document-row>.ui-icon{width:15px;height:15px;color:var(--muted)}
.messages-page-v3 .wa-info-conversation-meta{padding-top:2px;display:grid;gap:7px}.messages-page-v3 .wa-info-conversation-meta>div{padding:9px;display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:start;border-radius:10px;background:var(--surface-2)}.messages-page-v3 .wa-info-conversation-meta>div>span{width:30px;height:30px;display:grid;place-items:center;color:var(--accent)}.messages-page-v3 .wa-info-conversation-meta .ui-icon{width:17px;height:17px}.messages-page-v3 .wa-info-conversation-meta p{margin:0;display:grid;gap:2px}.messages-page-v3 .wa-info-conversation-meta strong{color:var(--text);font-size:.64rem}.messages-page-v3 .wa-info-conversation-meta small{color:var(--muted);font-size:.54rem;line-height:1.35}
@media(max-width:680px){.messages-page-v3 .wa-info-panel{width:100%;max-width:none;border-left:0}.messages-page-v3 .wa-info-backdrop{display:none!important}.messages-page-v3 .wa-info-header{min-height:58px}.messages-page-v3 .wa-info-scroll{padding:14px 12px 20px}.messages-page-v3 .wa-info-avatar{width:76px;height:76px;flex-basis:76px}.messages-page-v3 .wa-info-media-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* =====================================================================
   MESSAGES V8 — HEADER PROFILE OPENS CONVERSATION INFO
   Avatar + name in the active chat header is the Conversation Info trigger.
   ===================================================================== */

.messages-page-v3 .wa-thread-header{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
}

.messages-page-v3 .wa-thread-profile-trigger{
    min-width:0;
    width:max-content;
    max-width:100%;
    min-height:50px;
    padding:4px 8px 4px 4px;

    display:flex;
    align-items:center;
    gap:10px;

    border:0;
    border-radius:12px;
    background:transparent;
    color:inherit;
    font:inherit;
    text-align:left;

    cursor:pointer;
    -webkit-tap-highlight-color:transparent;

    transition:
        background-color .16s ease,
        box-shadow .16s ease;
}

.messages-page-v3 .wa-thread-profile-trigger:hover{
    background:color-mix(in srgb,var(--accent) 5%,transparent);
}

.messages-page-v3 .wa-thread-profile-trigger:focus-visible{
    outline:0;
    background:color-mix(in srgb,var(--accent) 6%,transparent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);
}

.messages-page-v3 .wa-thread-profile-trigger .wa-thread-avatar{
    flex:0 0 42px;
}

.messages-page-v3 .wa-thread-profile-trigger .wa-thread-person{
    min-width:0;
    display:grid;
    gap:2px;
}

.messages-page-v3 .wa-thread-profile-trigger .wa-thread-person strong,
.messages-page-v3 .wa-thread-profile-trigger .wa-thread-person span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.messages-page-v3 .wa-thread-actions{
    align-self:center;
}

@media(max-width:680px){
    .messages-page-v3 .wa-thread-header{
        grid-template-columns:32px minmax(0,1fr) auto!important;
        gap:6px!important;
    }

    .messages-page-v3 .wa-thread-profile-trigger{
        min-height:44px;
        padding:3px 6px 3px 3px;
        gap:8px;
        border-radius:10px;
    }

    .messages-page-v3 .wa-thread-profile-trigger .wa-thread-avatar{
        width:36px;
        height:36px;
        flex-basis:36px;
    }
}

@media(max-width:390px){
    .messages-page-v3 .wa-thread-profile-trigger{
        max-width:calc(100vw - 112px);
    }
}

/* =====================================================================
   MESSAGES V9 — CONVERSATION INFO DEFAULT CLOSED
   The drawer must never render until the profile header is clicked.
   ===================================================================== */

/* Author CSS previously set display:flex on the info drawer, which could
   override the native [hidden] rendering behavior. Keep hidden authoritative. */
.messages-page-v3 .wa-info-panel[hidden],
.messages-page-v3 .wa-info-backdrop[hidden]{
    display:none!important;
}

/* Hidden tab/search panels should follow the same predictable rule. */
.messages-page-v3 [data-info-panel][hidden],
.messages-page-v3 [data-thread-search-panel][hidden]{
    display:none!important;
}

/* =====================================================================
   MESSAGES V10 — SEARCH, ICONS & ALIGNMENT
   Compact search toolbar, navigable results, proper composer icons.
   ===================================================================== */

.messages-page-v3{
    gap:10px!important;
}

.messages-page-v3 .wa-page-header{
    min-height:74px;
    align-items:flex-end;
}

.messages-page-v3 .wa-shell{
    border-radius:17px!important;
}

.messages-page-v3 .wa-inbox-header,
.messages-page-v3 .wa-thread-header{
    min-height:62px!important;
}

/* Inbox search: one aligned surface with a real clear action. */
.messages-page-v3 .wa-chat-search-v10{
    height:42px!important;
    margin:8px 9px!important;
    padding:0 8px 0 11px!important;
    display:grid!important;
    grid-template-columns:18px minmax(0,1fr) 28px!important;
    gap:8px!important;
    align-items:center!important;

    border:1px solid var(--border)!important;
    border-radius:12px!important;
    background:var(--surface)!important;
    color:var(--muted)!important;
    box-shadow:0 1px 3px rgba(28,21,40,.02)!important;
}

.messages-page-v3 .wa-chat-search-v10:focus-within{
    border-color:color-mix(in srgb,var(--accent) 36%,var(--border))!important;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 7%,transparent)!important;
}

.messages-page-v3 .wa-chat-search-v10>.ui-icon{
    width:17px!important;
    height:17px!important;
}

.messages-page-v3 .wa-chat-search-v10 input{
    min-width:0;
    font-size:.69rem!important;
}

.messages-page-v3 .wa-search-clear{
    width:28px;
    height:28px;
    min-width:28px;
    padding:0;
    display:grid;
    place-items:center;

    border:0;
    border-radius:50%;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
}

.messages-page-v3 .wa-search-clear:hover{
    background:var(--surface-2);
    color:var(--text);
}

.messages-page-v3 .wa-search-clear .ui-icon{
    width:15px;
    height:15px;
}

.messages-page-v3 .wa-search-clear[hidden]{
    display:none!important;
}

/* Active conversation header: profile and search action share the same line cleanly. */
.messages-page-v3 .wa-thread-header{
    padding:7px 11px!important;
}

.messages-page-v3 .wa-thread-profile-trigger{
    min-height:46px!important;
    border-radius:11px!important;
}

.messages-page-v3 .wa-thread-actions .wa-icon-btn{
    width:38px;
    height:38px;
    min-width:38px;
    border-radius:10px;
}

.messages-page-v3 .wa-thread-actions .wa-icon-btn:hover{
    background:color-mix(in srgb,var(--accent) 7%,var(--surface));
    color:var(--accent);
}

/* Conversation search toolbar. */
.messages-page-v3 .wa-thread-search-v10{
    min-height:52px!important;
    padding:6px 9px!important;

    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    gap:8px!important;
    align-items:center!important;

    border-bottom:1px solid var(--border)!important;
    background:color-mix(in srgb,var(--surface-2) 35%,var(--surface))!important;
}

.messages-page-v3 .wa-thread-search-field{
    min-width:0;
    height:38px;
    padding:0 6px 0 10px;

    display:grid;
    grid-template-columns:17px minmax(0,1fr) 28px;
    gap:8px;
    align-items:center;

    border:1px solid var(--border);
    border-radius:11px;
    background:var(--surface);
    color:var(--muted);

    transition:border-color .15s ease,box-shadow .15s ease;
}

.messages-page-v3 .wa-thread-search-field:focus-within{
    border-color:color-mix(in srgb,var(--accent) 38%,var(--border));
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 7%,transparent);
}

.messages-page-v3 .wa-thread-search-field>.ui-icon{
    width:17px;
    height:17px;
    color:var(--muted);
}

.messages-page-v3 .wa-thread-search-field input{
    width:100%;
    min-width:0;
    height:36px;
    padding:0!important;

    border:0!important;
    border-radius:0!important;
    outline:0!important;
    background:transparent!important;
    box-shadow:none!important;

    color:var(--text);
    font:inherit;
    font-size:.69rem!important;
}

.messages-page-v3 .wa-thread-search-count{
    min-width:56px;
    padding:0 2px;
    color:var(--muted);
    font-size:.59rem;
    font-weight:700;
    text-align:center;
    white-space:nowrap;
}

.messages-page-v3 .wa-thread-search-count.is-empty{
    color:var(--danger,#d64545);
}

.messages-page-v3 .wa-thread-search-actions{
    display:flex;
    align-items:center;
    gap:2px;
}

.messages-page-v3 .wa-search-nav,
.messages-page-v3 .wa-search-close{
    width:32px;
    height:32px;
    min-width:32px;
    padding:0;

    display:grid;
    place-items:center;

    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
}

.messages-page-v3 .wa-search-nav:hover:not(:disabled),
.messages-page-v3 .wa-search-close:hover{
    background:var(--surface);
    color:var(--text);
}

.messages-page-v3 .wa-search-nav:disabled{
    opacity:.32;
    cursor:default;
}

.messages-page-v3 .wa-search-nav .ui-icon,
.messages-page-v3 .wa-search-close .ui-icon{
    width:16px;
    height:16px;
}

.messages-page-v3 .wa-search-nav.is-prev .ui-icon{
    transform:rotate(180deg);
}

.messages-page-v3 .wa-search-close{
    margin-left:3px;
    border-left:1px solid transparent;
}

/* Search keeps message context visible and highlights only the hits. */
.messages-page-v3 .wa-message-row.is-search-match .wa-bubble{
    border-color:color-mix(in srgb,var(--accent) 32%,var(--border))!important;
}

.messages-page-v3 .wa-message-row.is-search-current .wa-bubble{
    border-color:color-mix(in srgb,var(--accent) 68%,var(--border))!important;
    box-shadow:
        0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent),
        0 5px 16px rgba(28,21,40,.05)!important;
}

.messages-page-v3 .wa-message-row.is-search-current .wa-bubble-content{
    position:relative;
}

/* Cleaner chat-list selection/alignment. */
.messages-page-v3 .wa-chat-list{
    padding:0 7px 10px!important;
}

.messages-page-v3 .wa-chat-row{
    min-height:72px!important;
    padding:8px 9px!important;
    border-radius:12px!important;
}

.messages-page-v3 .wa-chat-row.active{
    background:color-mix(in srgb,var(--accent) 7%,var(--surface))!important;
    box-shadow:inset 3px 0 0 color-mix(in srgb,var(--accent) 68%,transparent);
}

/* Composer: ensure real paperclip/smile icons are visible and centered. */
.messages-page-v3 .wa-composer{
    padding:7px 9px 8px!important;
    background:var(--surface)!important;
}

.messages-page-v3 .wa-compose-row-v5{
    align-items:center!important;
}

.messages-page-v3 .wa-attach-button,
.messages-page-v3 .wa-emoji-button{
    color:var(--muted)!important;
}

.messages-page-v3 .wa-attach-button:hover,
.messages-page-v3 .wa-emoji-button:hover{
    background:color-mix(in srgb,var(--accent) 7%,var(--surface))!important;
    color:var(--accent)!important;
}

.messages-page-v3 .wa-attach-button .ui-icon,
.messages-page-v3 .wa-emoji-button .ui-icon{
    display:block!important;
    width:18px!important;
    height:18px!important;
    color:currentColor!important;
    stroke:currentColor;
}

.messages-page-v3 .wa-send-button{
    box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 16%,transparent)!important;
}

@media(max-width:680px){
    .messages-page-v3{
        gap:8px!important;
    }

    .messages-page-v3 .wa-page-header{
        min-height:auto;
    }

    .messages-page-v3 .wa-thread-search-v10{
        grid-template-columns:minmax(0,1fr) auto!important;
        gap:5px!important;
        padding:5px 6px!important;
    }

    .messages-page-v3 .wa-thread-search-count{
        position:absolute;
        right:112px;
        z-index:1;
        min-width:48px;
        pointer-events:none;
    }

    .messages-page-v3 .wa-thread-search-field{
        padding-right:54px;
    }

    .messages-page-v3 .wa-thread-search-actions{
        grid-column:2;
    }

    .messages-page-v3 .wa-chat-search-v10{
        margin:7px 8px!important;
    }
}

@media(max-width:390px){
    .messages-page-v3 .wa-thread-search-count{
        display:none;
    }

    .messages-page-v3 .wa-thread-search-field{
        padding-right:6px;
    }

    .messages-page-v3 .wa-search-nav,
    .messages-page-v3 .wa-search-close{
        width:30px;
        height:30px;
        min-width:30px;
    }
}

@media(prefers-reduced-motion:reduce){
    .messages-page-v3 .wa-message-row.is-search-current .wa-bubble{
        scroll-behavior:auto;
    }
}

/* =====================================================================
   MESSAGES V11 — MOBILE MESSENGER + REACTIONS + MEDIA POLISH
   Full mobile thread flow, compact media bubbles, action sheet + reactions.
   ===================================================================== */
.messages-page-v3 .wa-bubble.has-attachments{overflow:visible!important}
.messages-page-v3 .wa-bubble.media-only{width:max-content!important;max-width:min(62%,500px)!important;min-width:0!important;padding:3px!important;border-radius:12px 12px 12px 3px!important;background:var(--surface)!important}
.messages-page-v3 .wa-message-row.mine .wa-bubble.media-only{border-radius:12px 12px 3px 12px!important;background:color-mix(in srgb,var(--accent) 7%,var(--surface))!important}
.messages-page-v3 .wa-bubble.media-only .wa-attachment-stack{margin:0!important;gap:3px!important}
.messages-page-v3 .wa-bubble.media-only .wa-media-image,.messages-page-v3 .wa-bubble.media-only .wa-media-video{width:auto!important;max-width:min(460px,100%)!important;border:0!important;border-radius:9px!important;background:transparent!important;box-shadow:none!important}
.messages-page-v3 .wa-bubble.media-only .wa-media-image img,.messages-page-v3 .wa-bubble.media-only .wa-media-video{display:block!important;max-width:100%!important;max-height:320px!important;border-radius:9px!important;object-fit:contain!important}
.messages-page-v3 .wa-bubble.media-only .wa-message-meta{position:absolute!important;right:8px!important;bottom:7px!important;z-index:3!important;min-height:20px!important;padding:3px 6px!important;border-radius:999px!important;background:rgba(20,18,24,.56)!important;color:#fff!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important}
.messages-page-v3 .wa-bubble.media-only .wa-delivery-tick{color:#fff!important}

.messages-page-v3 .wa-reaction-summary{position:absolute;left:8px;bottom:-16px;z-index:6;display:flex;align-items:center;gap:3px}
.messages-page-v3 .wa-message-row.mine .wa-reaction-summary{left:auto;right:8px}
.messages-page-v3 .wa-reaction-summary[hidden]{display:none!important}
.messages-page-v3 .wa-reaction-summary button{min-width:30px;height:25px;padding:2px 6px;display:inline-flex;align-items:center;justify-content:center;gap:3px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:.72rem;cursor:pointer;box-shadow:0 2px 6px rgba(28,21,40,.06)}
.messages-page-v3 .wa-reaction-summary button.mine{border-color:color-mix(in srgb,var(--accent) 30%,var(--border));background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.messages-page-v3 .wa-reaction-summary b{color:var(--muted);font-size:.5rem;font-weight:750}
.messages-page-v3 .wa-message-row:has(.wa-reaction-summary:not([hidden])){margin-bottom:13px}

.messages-page-v3 .wa-message-actions-sheet{min-width:208px;padding:7px;display:grid;gap:6px;border:1px solid var(--border);border-radius:13px;background:var(--surface);box-shadow:0 12px 34px rgba(20,16,28,.15)}
.messages-page-v3 .wa-quick-reactions{padding:3px 2px 7px;display:grid;grid-template-columns:repeat(6,1fr);gap:2px;border-bottom:1px solid var(--border)}
.messages-page-v3 .wa-quick-reactions button{width:30px;height:30px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;font-size:1rem;cursor:pointer;transition:background .14s ease,transform .14s ease}
.messages-page-v3 .wa-quick-reactions button:hover,.messages-page-v3 .wa-quick-reactions button.selected{background:color-mix(in srgb,var(--accent) 9%,var(--surface));transform:scale(1.08)}
.messages-page-v3 .wa-message-action-list{display:grid;gap:1px}
.messages-page-v3 .wa-message-action-list>button{min-height:36px;padding:7px 9px;display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;align-items:center;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;font-size:.65rem;font-weight:650;text-align:left;cursor:pointer}
.messages-page-v3 .wa-message-action-list>button:hover{background:var(--surface-2)}
.messages-page-v3 .wa-message-action-list .ui-icon{width:17px;height:17px;color:var(--muted)}

.messages-page-v3 .wa-edit-form{min-width:min(420px,58vw);display:grid;gap:7px}
.messages-page-v3 .wa-edit-form textarea{width:100%;min-height:76px;max-height:180px;resize:vertical;padding:9px 10px!important;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border))!important;border-radius:9px!important;background:var(--surface)!important;color:var(--text)!important;font:inherit!important;font-size:.69rem!important;line-height:1.45!important;outline:0!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 6%,transparent)!important}
.messages-page-v3 .wa-edit-form footer{display:flex;justify-content:flex-end;gap:6px}
.messages-page-v3 .wa-edit-form footer button{min-height:32px;padding:5px 9px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--muted);font:inherit;font-size:.61rem;font-weight:700;cursor:pointer}
.messages-page-v3 .wa-edit-form footer .wa-edit-save{border-color:var(--accent);background:var(--accent);color:#fff}
.messages-page-v3 .wa-edit-form footer .ui-icon{width:14px;height:14px}

.messages-page-v3 .wa-attach-popover label>span:first-child{display:grid!important;place-items:center!important}
.messages-page-v3 .wa-attach-popover label>span:first-child .ui-icon{display:block!important;width:21px!important;height:21px!important;color:currentColor!important}

@media(max-width:680px){
    body[data-route="messages"] .topbar{display:none!important}
    body[data-route="messages"] .main-content{height:calc(100dvh - 72px - env(safe-area-inset-bottom))!important;min-height:0!important;padding:0!important;overflow:hidden!important}
    body.messages-thread-open[data-route="messages"] .main-content{height:100dvh!important}
    body.messages-thread-open[data-route="messages"] .mobile-nav{display:none!important}
    body[data-route="messages"] .messages-page-v3{width:100%!important;height:100%!important;min-height:0!important;margin:0!important;gap:0!important}
    body[data-route="messages"] .wa-shell{width:100%!important;height:100%!important;min-height:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}

    .messages-page-v3.show-inbox-first .wa-inbox{display:flex!important}
    .messages-page-v3.show-inbox-first .wa-thread{display:none!important}
    .messages-page-v3.has-explicit-thread .wa-inbox{display:none!important}
    .messages-page-v3.has-explicit-thread .wa-thread{display:flex!important;width:100%!important;height:100%!important}

    .messages-page-v3 .wa-inbox-header{min-height:68px!important;padding:12px 14px 8px!important;background:var(--surface)!important}
    .messages-page-v3 .wa-inbox-header h2{font-size:1.18rem!important;letter-spacing:-.02em}
    .messages-page-v3 .wa-chat-search-v10{height:44px!important;margin:6px 12px 8px!important;border:0!important;border-radius:12px!important;background:var(--surface-2)!important;box-shadow:none!important}
    .messages-page-v3 .wa-chat-list{padding:0 8px 12px!important}
    .messages-page-v3 .wa-chat-row{min-height:74px!important;padding:8px 10px!important;border-radius:12px!important;box-shadow:none!important}
    .messages-page-v3 .wa-chat-row.active{box-shadow:none!important}

    .messages-page-v3 .wa-thread-header{position:relative!important;z-index:30!important;min-height:60px!important;padding:max(7px,env(safe-area-inset-top)) 8px 7px!important;grid-template-columns:34px minmax(0,1fr) 36px!important;gap:5px!important;background:var(--surface)!important;box-shadow:0 1px 0 var(--border)!important}
    .messages-page-v3 .wa-mobile-back{width:34px!important;height:34px!important}
    .messages-page-v3 .wa-thread-profile-trigger{width:100%!important;max-width:100%!important;min-height:44px!important;padding:2px!important;gap:8px!important}
    .messages-page-v3 .wa-thread-profile-trigger .wa-thread-avatar{width:38px!important;height:38px!important;flex-basis:38px!important}
    .messages-page-v3 .wa-thread-person strong{font-size:.75rem!important}
    .messages-page-v3 .wa-thread-person span{max-width:210px!important;font-size:.53rem!important}
    .messages-page-v3 .wa-thread-actions .wa-icon-btn{width:34px!important;height:34px!important;min-width:34px!important;border-radius:50%!important}

    .messages-page-v3 .wa-message-history{flex:1 1 auto!important;min-height:0!important;padding:10px 8px 18px!important;gap:3px!important;overscroll-behavior-y:contain!important}
    .messages-page-v3 .wa-message-avatar{display:none!important}
    .messages-page-v3 .wa-bubble{max-width:85%!important;border-radius:8px 8px 8px 2px!important;padding:6px 8px 5px!important;box-shadow:0 1px 2px rgba(28,21,40,.07)!important}
    .messages-page-v3 .wa-message-row.mine .wa-bubble{border-radius:8px 8px 2px 8px!important}
    .messages-page-v3 .wa-bubble p{font-size:.72rem!important;line-height:1.42!important}
    .messages-page-v3 .wa-bubble.media-only{max-width:88%!important;padding:3px!important;border-radius:10px 10px 10px 2px!important}
    .messages-page-v3 .wa-message-row.mine .wa-bubble.media-only{border-radius:10px 10px 2px 10px!important}
    .messages-page-v3 .wa-bubble.media-only .wa-media-image,.messages-page-v3 .wa-bubble.media-only .wa-media-video{max-width:min(82vw,390px)!important}
    .messages-page-v3 .wa-bubble.media-only .wa-media-image img,.messages-page-v3 .wa-bubble.media-only .wa-media-video{width:100%!important;max-height:265px!important;object-fit:cover!important}
    .messages-page-v3 .wa-reaction-summary{bottom:-14px}

    .messages-page-v3 .wa-message-menu>summary{opacity:.45!important}
    .messages-page-v3 .wa-message-menu[open]::before{content:"";position:fixed;inset:0;z-index:998;background:rgba(16,13,20,.28);backdrop-filter:blur(1px)}
    .messages-page-v3 .wa-message-menu[open] .wa-message-actions-sheet{position:fixed!important;left:10px!important;right:10px!important;bottom:max(12px,env(safe-area-inset-bottom))!important;z-index:999!important;min-width:0!important;padding:10px!important;border-radius:18px!important;box-shadow:0 16px 48px rgba(10,8,14,.24)!important}
    .messages-page-v3 .wa-quick-reactions{grid-template-columns:repeat(6,1fr)!important;padding:3px 2px 9px!important}
    .messages-page-v3 .wa-quick-reactions button{width:42px!important;height:42px!important;justify-self:center!important;font-size:1.32rem!important}
    .messages-page-v3 .wa-message-action-list>button{min-height:44px!important;grid-template-columns:22px minmax(0,1fr)!important;font-size:.71rem!important}
    .messages-page-v3 .wa-message-action-list .ui-icon{width:20px!important;height:20px!important}

    .messages-page-v3 .wa-composer{flex:0 0 auto!important;padding:6px 7px calc(6px + env(safe-area-inset-bottom))!important;border-top:1px solid var(--border)!important;background:var(--surface)!important;box-shadow:0 -4px 18px rgba(28,21,40,.035)!important}
    .messages-page-v3 .wa-compose-row-v5{grid-template-columns:40px minmax(0,1fr) 42px!important;gap:6px!important}
    .messages-page-v3 .wa-attach-button,.messages-page-v3 .wa-send-button{width:40px!important;height:40px!important;min-width:40px!important}
    .messages-page-v3 .wa-send-button{width:42px!important;height:42px!important;min-width:42px!important;border-radius:50%!important}
    .messages-page-v3 .wa-compose-field-v5{min-height:42px!important;border-radius:22px!important}
    .messages-page-v3 .wa-compose-field-v5 textarea{min-height:40px!important;padding:10px 38px 9px 13px!important;font-size:.72rem!important}
    .messages-page-v3 .wa-emoji-button{right:5px!important;bottom:5px!important;width:32px!important;height:32px!important}

    .messages-page-v3 .wa-attach-popover{position:fixed!important;left:12px!important;right:12px!important;bottom:calc(62px + env(safe-area-inset-bottom))!important;z-index:1200!important;width:auto!important;min-width:0!important;padding:14px 10px 12px!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;border:1px solid var(--border)!important;border-radius:18px!important;background:var(--surface)!important;box-shadow:0 16px 46px rgba(12,9,18,.2)!important}
    .messages-page-v3 .wa-attach-popover[hidden]{display:none!important}
    .messages-page-v3 .wa-attach-popover label{min-width:0!important;min-height:92px!important;padding:8px 4px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:7px!important;border-radius:13px!important;text-align:center!important}
    .messages-page-v3 .wa-attach-popover label:hover{background:var(--surface-2)!important}
    .messages-page-v3 .wa-attach-popover label>span:first-child{width:46px!important;height:46px!important;border-radius:50%!important;background:color-mix(in srgb,var(--accent) 9%,var(--surface))!important;color:var(--accent)!important}
    .messages-page-v3 .wa-attach-popover label>span:first-child .ui-icon{width:22px!important;height:22px!important}
    .messages-page-v3 .wa-attach-popover label>span:nth-child(2){min-width:0!important;display:grid!important;justify-items:center!important;gap:2px!important}
    .messages-page-v3 .wa-attach-popover label strong{font-size:.61rem!important;white-space:normal!important}
    .messages-page-v3 .wa-attach-popover label small{display:none!important}

    .messages-page-v3 .wa-edit-form{min-width:min(78vw,380px)!important}
    .messages-page-v3 .wa-edit-form textarea{min-height:92px!important;font-size:.72rem!important}
    .messages-page-v3 .wa-thread-search-v10{position:relative!important;z-index:25!important}
}

@media(max-width:390px){
    .messages-page-v3 .wa-bubble{max-width:89%!important}
    .messages-page-v3 .wa-bubble.media-only{max-width:92%!important}
    .messages-page-v3 .wa-quick-reactions button{width:38px!important;height:38px!important;font-size:1.18rem!important}
}

/* =====================================================================
   MESSAGES V12 — MOBILE VIEWPORT / COMPOSER HARD FIX
   Open conversations own the phone viewport so the composer cannot fall
   below the visible screen when browser chrome or large media changes size.
   ===================================================================== */
@media(max-width:680px){
    body.messages-thread-open[data-route="messages"]{
        overflow:hidden!important;
        overscroll-behavior:none!important;
    }

    body.messages-thread-open[data-route="messages"] .app-shell,
    body.messages-thread-open[data-route="messages"] .page-shell,
    body.messages-thread-open[data-route="messages"] .main-content{
        min-height:0!important;
        height:var(--messages-viewport-height,100dvh)!important;
        max-height:var(--messages-viewport-height,100dvh)!important;
        overflow:hidden!important;
    }

    body.messages-thread-open[data-route="messages"] .messages-page-v3,
    body.messages-thread-open[data-route="messages"] .wa-shell{
        position:static!important;
        width:100%!important;
        height:100%!important;
        min-height:0!important;
        max-height:100%!important;
        overflow:hidden!important;
    }

    body.messages-thread-open[data-route="messages"] .wa-thread{
        position:fixed!important;
        inset:0!important;
        z-index:950!important;

        width:100vw!important;
        height:var(--messages-viewport-height,100dvh)!important;
        min-height:0!important;
        max-height:var(--messages-viewport-height,100dvh)!important;

        display:grid!important;
        grid-template-rows:auto auto minmax(0,1fr) auto!important;
        grid-template-columns:minmax(0,1fr)!important;

        overflow:hidden!important;
        background:color-mix(in srgb,var(--surface-2) 36%,var(--surface))!important;
    }

    body.messages-thread-open[data-route="messages"] .wa-thread-header{
        grid-row:1!important;
        position:relative!important;
        top:auto!important;
        flex:none!important;
    }

    body.messages-thread-open[data-route="messages"] .wa-thread-search{
        grid-row:2!important;
        position:relative!important;
        flex:none!important;
    }

    body.messages-thread-open[data-route="messages"] .wa-message-history{
        grid-row:3!important;
        min-height:0!important;
        height:auto!important;
        max-height:none!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior-y:contain!important;

        /* Leave breathing room for reaction chips and the last media item. */
        padding-bottom:24px!important;
        scroll-padding-top:16px!important;
        scroll-padding-bottom:28px!important;
    }

    body.messages-thread-open[data-route="messages"] .wa-composer{
        grid-row:4!important;
        position:relative!important;
        left:auto!important;
        right:auto!important;
        bottom:auto!important;
        z-index:40!important;

        width:100%!important;
        min-width:0!important;
        min-height:54px!important;
        max-height:min(42vh,220px)!important;
        flex:none!important;

        padding:6px 7px max(6px,env(safe-area-inset-bottom))!important;
        overflow:visible!important;
        border-top:1px solid var(--border)!important;
        background:var(--surface)!important;
        box-shadow:0 -6px 24px rgba(14,11,19,.07)!important;
    }

    body.messages-thread-open[data-route="messages"] .wa-reply-composer,
    body.messages-thread-open[data-route="messages"] .wa-selected-files{
        max-height:64px!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
    }

    body.messages-thread-open[data-route="messages"] .wa-compose-row-v5{
        width:100%!important;
        align-items:center!important;
    }

    body.messages-thread-open[data-route="messages"] .wa-compose-field-v5{
        min-width:0!important;
        overflow:hidden!important;
    }

    body.messages-thread-open[data-route="messages"] .wa-compose-field-v5 textarea{
        max-height:108px!important;
        overflow-y:auto!important;
    }

    /* Keep overlays inside the fixed mobile workspace. */
    body.messages-thread-open[data-route="messages"] .wa-info-panel,
    body.messages-thread-open[data-route="messages"] .wa-info-backdrop{
        position:fixed!important;
        z-index:1300!important;
    }

    body.messages-thread-open[data-route="messages"] .wa-attach-popover,
    body.messages-thread-open[data-route="messages"] .wa-emoji-popover{
        z-index:1400!important;
    }
}

@media(max-width:390px){
    body.messages-thread-open[data-route="messages"] .wa-composer{
        min-height:52px!important;
    }

    body.messages-thread-open[data-route="messages"] .wa-message-history{
        padding-inline:6px!important;
    }
}

/* =====================================================================
   MESSAGES V13 — MOBILE GESTURES / EMOJI / ACTION SHEET
   Swipe right = reply. Long press = compact reaction/actions card.
   ===================================================================== */

/* Cleaner media-only bubble on all layouts. */
.messages-page-v3 .wa-bubble.media-only{
    border-color:transparent!important;
    box-shadow:none!important;
}
.messages-page-v3 .wa-bubble.media-only .wa-media-image,
.messages-page-v3 .wa-bubble.media-only .wa-media-video{
    overflow:hidden!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
}

@media(max-width:680px){
    /* Mobile does not need the desktop down-arrow action affordance. */
    .messages-page-v3 .wa-message-menu>summary{
        display:none!important;
    }

    .messages-page-v3 .wa-bubble{
        touch-action:pan-y!important;
        -webkit-touch-callout:none!important;
        user-select:none!important;
        -webkit-user-select:none!important;
        transform:translateX(var(--wa-swipe-x,0px));
        transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .14s ease!important;
        will-change:transform;
    }

    .messages-page-v3 .wa-message-row.is-swiping-reply{
        position:relative;
    }

    .messages-page-v3 .wa-message-row.is-swiping-reply::before{
        content:"↩";
        position:absolute;
        left:7px;
        top:50%;
        z-index:1;
        width:30px;
        height:30px;
        display:grid;
        place-items:center;
        border-radius:50%;
        background:color-mix(in srgb,var(--accent) 9%,var(--surface));
        color:var(--accent);
        font-size:1rem;
        font-weight:800;
        opacity:.72;
        transform:translateY(-50%) scale(.9);
        transition:opacity .12s ease,transform .12s ease,background .12s ease;
        pointer-events:none;
    }

    .messages-page-v3 .wa-message-row.is-reply-ready::before{
        opacity:1;
        transform:translateY(-50%) scale(1);
        background:color-mix(in srgb,var(--accent) 16%,var(--surface));
    }

    /*
     * Long press opens a compact WhatsApp-like reaction/action card.
     * No giant full-height white panel.
     */
    .messages-page-v3 .wa-message-menu[open]::before{
        content:""!important;
        position:fixed!important;
        inset:0!important;
        z-index:1498!important;
        background:rgba(18,15,22,.16)!important;
        backdrop-filter:none!important;
        -webkit-backdrop-filter:none!important;
    }

    .messages-page-v3 .wa-message-menu[open] .wa-message-actions-sheet{
        position:fixed!important;
        left:50%!important;
        right:auto!important;
        top:auto!important;
        bottom:calc(68px + env(safe-area-inset-bottom))!important;
        z-index:1499!important;

        width:min(350px,calc(100vw - 20px))!important;
        min-width:0!important;
        max-height:none!important;
        padding:7px!important;

        display:grid!important;
        gap:5px!important;

        border:1px solid color-mix(in srgb,var(--border) 92%,transparent)!important;
        border-radius:16px!important;
        background:var(--surface)!important;
        box-shadow:0 14px 38px rgba(12,9,18,.22)!important;

        transform:translateX(-50%)!important;
        overflow:hidden!important;
    }

    .messages-page-v3 .wa-quick-reactions{
        min-width:0!important;
        padding:2px 2px 6px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:space-between!important;
        gap:2px!important;
        border-bottom:1px solid var(--border)!important;
        overflow-x:auto!important;
        scrollbar-width:none!important;
    }

    .messages-page-v3 .wa-quick-reactions::-webkit-scrollbar{
        display:none!important;
    }

    .messages-page-v3 .wa-quick-reactions button{
        width:38px!important;
        height:38px!important;
        min-width:38px!important;
        flex:0 0 38px!important;
        padding:0!important;
        font-size:1.22rem!important;
        transform:none!important;
    }

    .messages-page-v3 .wa-message-action-list{
        display:flex!important;
        align-items:center!important;
        gap:4px!important;
    }

    .messages-page-v3 .wa-message-action-list>button{
        min-width:0!important;
        min-height:38px!important;
        padding:6px 8px!important;
        flex:1 1 0!important;

        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        gap:6px!important;

        border-radius:9px!important;
        font-size:.65rem!important;
        text-align:center!important;
    }

    .messages-page-v3 .wa-message-action-list .ui-icon{
        width:17px!important;
        height:17px!important;
        flex:0 0 17px!important;
    }

    /* Emoji control becomes an accessible mobile bottom sheet. */
    body.messages-thread-open[data-route="messages"] .wa-emoji-popover{
        position:fixed!important;
        left:8px!important;
        right:8px!important;
        bottom:calc(62px + env(safe-area-inset-bottom))!important;
        z-index:1600!important;

        width:auto!important;
        max-height:min(290px,42dvh)!important;
        padding:10px!important;

        display:grid!important;
        grid-template-columns:repeat(6,minmax(0,1fr))!important;
        gap:5px!important;

        border:1px solid var(--border)!important;
        border-radius:18px!important;
        background:var(--surface)!important;
        box-shadow:0 16px 46px rgba(12,9,18,.22)!important;

        overflow-y:auto!important;
        overscroll-behavior:contain!important;
    }

    body.messages-thread-open[data-route="messages"] .wa-emoji-popover[hidden]{
        display:none!important;
    }

    body.messages-thread-open[data-route="messages"] .wa-emoji-popover button{
        width:100%!important;
        min-width:0!important;
        height:42px!important;
        display:grid!important;
        place-items:center!important;
        border-radius:10px!important;
        font-size:1.25rem!important;
    }

    /* Media should look like WhatsApp media, not a bordered card. */
    .messages-page-v3 .wa-bubble.media-only{
        padding:2px!important;
        border:0!important;
        background:transparent!important;
        box-shadow:none!important;
    }

    .messages-page-v3 .wa-message-row.mine .wa-bubble.media-only{
        background:transparent!important;
    }

    .messages-page-v3 .wa-bubble.media-only .wa-media-image,
    .messages-page-v3 .wa-bubble.media-only .wa-media-video{
        border-radius:9px!important;
        background:#111!important;
    }

    .messages-page-v3 .wa-bubble.media-only .wa-media-image img,
    .messages-page-v3 .wa-bubble.media-only .wa-media-video{
        border-radius:9px!important;
    }

    /* Keep reactions tucked close to the bubble. */
    .messages-page-v3 .wa-reaction-summary{
        bottom:-12px!important;
    }

    .messages-page-v3 .wa-reaction-summary button{
        min-width:29px!important;
        height:23px!important;
        padding:2px 6px!important;
        box-shadow:0 2px 7px rgba(28,21,40,.08)!important;
    }
}

@media(max-width:390px){
    .messages-page-v3 .wa-message-menu[open] .wa-message-actions-sheet{
        width:calc(100vw - 14px)!important;
        bottom:calc(62px + env(safe-area-inset-bottom))!important;
        border-radius:15px!important;
    }

    .messages-page-v3 .wa-quick-reactions button{
        width:35px!important;
        height:35px!important;
        min-width:35px!important;
        flex-basis:35px!important;
        font-size:1.12rem!important;
    }

    body.messages-thread-open[data-route="messages"] .wa-emoji-popover{
        left:6px!important;
        right:6px!important;
        grid-template-columns:repeat(6,minmax(0,1fr))!important;
        gap:3px!important;
    }

    body.messages-thread-open[data-route="messages"] .wa-emoji-popover button{
        height:39px!important;
        font-size:1.15rem!important;
    }
}

/* =====================================================================
   MESSAGES V14 — ALIGNMENT / MOBILE ARROW / LIVE CHAT
   Reaction alignment, contained action menus, live composer feedback.
   ===================================================================== */

/* Reaction badges behave as one compact WhatsApp-like pill. */
.messages-page-v3 .wa-reaction-summary{
    left:10px!important;
    bottom:-12px!important;
    min-height:25px!important;
    padding:1px 4px!important;

    display:inline-flex!important;
    align-items:center!important;
    gap:1px!important;

    border:1px solid color-mix(in srgb,var(--border) 94%,transparent)!important;
    border-radius:999px!important;
    background:var(--surface)!important;
    box-shadow:0 2px 8px rgba(20,16,28,.10)!important;
}

.messages-page-v3 .wa-message-row.mine .wa-reaction-summary{
    left:auto!important;
    right:10px!important;
}

.messages-page-v3 .wa-reaction-summary button{
    min-width:0!important;
    width:auto!important;
    height:21px!important;
    padding:0 3px!important;
    gap:2px!important;

    border:0!important;
    border-radius:999px!important;
    background:transparent!important;
    box-shadow:none!important;
    font-size:.72rem!important;
}

.messages-page-v3 .wa-reaction-summary button.mine{
    background:color-mix(in srgb,var(--accent) 8%,transparent)!important;
}

.messages-page-v3 .wa-reaction-summary b{
    font-size:.5rem!important;
}

/* Desktop action menu uses viewport coordinates set by JavaScript, so it cannot hide behind the inbox edge. */
@media(min-width:681px){
    .messages-page-v3 .wa-message-menu[open] .wa-message-actions-sheet{
        position:fixed!important;
        left:var(--wa-menu-left,12px)!important;
        top:var(--wa-menu-top,80px)!important;
        right:auto!important;
        bottom:auto!important;
        z-index:1800!important;
        width:220px!important;
        min-width:220px!important;
    }
}

/* Composer live-send state. */
.messages-page-v3 .wa-composer.is-sending .wa-send-button{
    opacity:.72;
    cursor:wait;
}

.messages-page-v3 .wa-composer.is-sending .wa-send-button .ui-icon{
    animation:wa-send-pulse .75s ease-in-out infinite alternate;
}

.messages-page-v3 .wa-compose-error{
    margin:0 0 5px;
    padding:6px 9px;
    border:1px solid color-mix(in srgb,var(--danger,#d64545) 20%,var(--border));
    border-radius:9px;
    background:color-mix(in srgb,var(--danger,#d64545) 6%,var(--surface));
    color:var(--danger,#d64545);
    font-size:.63rem;
    font-weight:650;
}

.messages-page-v3 .wa-compose-error[hidden]{
    display:none!important;
}

@keyframes wa-send-pulse{
    from{transform:translateX(-1px);opacity:.72}
    to{transform:translateX(2px);opacity:1}
}

@media(max-width:680px){
    /* Bring back a small, properly aligned arrow on mobile. Long press still works too. */
    .messages-page-v3 .wa-message-menu>summary{
        display:grid!important;
        width:22px!important;
        height:22px!important;
        top:0!important;
        right:0!important;
        opacity:.48!important;
        background:transparent!important;
    }

    .messages-page-v3 .wa-message-menu[open]>summary{
        opacity:.85!important;
        background:color-mix(in srgb,var(--surface) 75%,transparent)!important;
    }

    .messages-page-v3 .wa-message-menu>summary .ui-icon{
        width:13px!important;
        height:13px!important;
    }

    /* Mobile sent messages also swipe LEFT -> RIGHT, but with a shorter travel so they stay on-screen. */
    .messages-page-v3 .wa-message-row.mine.is-swiping-reply .wa-bubble{
        max-width:calc(91% - 10px)!important;
    }

    .messages-page-v3 .wa-message-row.mine.is-swiping-reply::before{
        left:auto!important;
        right:calc(100% - 38px)!important;
    }

    /* Action sheet remains compact and above the composer. */
    .messages-page-v3 .wa-message-menu[open] .wa-message-actions-sheet{
        bottom:calc(70px + env(safe-area-inset-bottom))!important;
        width:min(352px,calc(100vw - 16px))!important;
        max-width:calc(100vw - 16px)!important;
    }

    .messages-page-v3 .wa-quick-reactions{
        justify-content:center!important;
        gap:4px!important;
    }

    .messages-page-v3 .wa-quick-reactions button{
        width:39px!important;
        height:39px!important;
        min-width:39px!important;
        flex-basis:39px!important;
    }

    /* Reaction pill hugs bubble edge without floating too far into the next message. */
    .messages-page-v3 .wa-reaction-summary{
        bottom:-11px!important;
        left:8px!important;
    }

    .messages-page-v3 .wa-message-row.mine .wa-reaction-summary{
        left:auto!important;
        right:8px!important;
    }

    /* Keyboard safe area and live-send error stay visible above home indicator. */
    .messages-page-v3 .wa-composer{
        padding-bottom:max(7px,env(safe-area-inset-bottom))!important;
    }

    .messages-page-v3 .wa-compose-error{
        margin-inline:3px;
    }
}

@media(max-width:390px){
    .messages-page-v3 .wa-message-menu[open] .wa-message-actions-sheet{
        width:calc(100vw - 12px)!important;
        max-width:calc(100vw - 12px)!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .messages-page-v3 .wa-composer.is-sending .wa-send-button .ui-icon{
        animation:none!important;
    }
}


/* =====================================================================
   MESSAGES V17 — RELIABLE LIVE MESSAGING / PRESENCE / RECEIPTS / DRAFTS
   ===================================================================== */
.messages-page-v3 .wa-thread-person{align-content:center!important}
.messages-page-v3 .wa-thread-subline{display:block;line-height:1.15}
.messages-page-v3 .wa-thread-presence{display:block;min-height:13px;margin-top:1px;color:var(--muted);font-size:.57rem;font-weight:650;line-height:1.15}
.messages-page-v3 .wa-thread-presence.is-online,.messages-page-v3 .wa-thread-presence:has(+*){color:var(--accent)}
.messages-page-v3 .wa-thread-presence.is-online::before{content:"";display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:var(--success,#198754);vertical-align:1px}
.messages-page-v3 .wa-info-presence{display:block;margin-top:5px;color:var(--muted);font-size:.66rem;font-weight:650}

.messages-page-v3 .wa-chat-top-meta{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto}
.messages-page-v3 .wa-chat-pref-icon{width:14px;height:14px;display:inline-grid;place-items:center;color:var(--muted);font-style:normal}
.messages-page-v3 .wa-chat-pref-icon .ui-icon{width:13px;height:13px}
.messages-page-v3 .wa-chat-row.is-pinned .wa-chat-pref-icon:first-child{color:var(--accent)}
.messages-page-v3 .wa-chat-row.is-muted{opacity:.86}
.messages-page-v3 .wa-list-tick{margin-right:3px;color:var(--muted);font-size:.66rem;font-weight:800;letter-spacing:-.1em}
.messages-page-v3 .wa-list-tick.is-read{color:var(--accent)}
.messages-page-v3 .wa-chat-typing{color:var(--accent);font-size:.67rem;font-style:normal;font-weight:750}
.messages-page-v3 .wa-draft-label{color:var(--danger,#d64545)!important;font-weight:800!important}
.messages-page-v3 .wa-chat-row.has-draft .wa-chat-preview{color:var(--muted)}

.messages-page-v3 .wa-info-preferences{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.messages-page-v3 .wa-info-preferences>button{min-width:0;padding:11px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:center;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer}
.messages-page-v3 .wa-info-preferences>button:hover{border-color:color-mix(in srgb,var(--accent) 22%,var(--border));background:color-mix(in srgb,var(--accent) 3%,var(--surface))}
.messages-page-v3 .wa-info-preferences>button.is-active{border-color:color-mix(in srgb,var(--accent) 26%,var(--border));background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.messages-page-v3 .wa-info-preferences>button>span:first-child{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--surface-2);color:var(--accent)}
.messages-page-v3 .wa-info-preferences .ui-icon{width:17px;height:17px}
.messages-page-v3 .wa-info-preferences>button>span:last-child{min-width:0;display:grid;gap:2px}
.messages-page-v3 .wa-info-preferences strong{font-size:.68rem}.messages-page-v3 .wa-info-preferences small{color:var(--muted);font-size:.57rem;line-height:1.3}

.messages-page-v3 .wa-unread-marker{position:relative;display:flex;align-items:center;justify-content:center;margin:13px 0 15px;color:var(--accent);font-size:.61rem;font-weight:800;text-transform:uppercase;letter-spacing:.035em}
.messages-page-v3 .wa-unread-marker::before,.messages-page-v3 .wa-unread-marker::after{content:"";height:1px;flex:1;background:color-mix(in srgb,var(--accent) 18%,var(--border))}
.messages-page-v3 .wa-unread-marker span{padding:5px 10px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border));border-radius:999px;background:var(--surface);white-space:nowrap}
.messages-page-v3 .wa-new-messages-jump{position:absolute;right:18px;bottom:76px;z-index:24;min-height:36px;padding:7px 11px;display:inline-flex;align-items:center;gap:6px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));border-radius:999px;background:var(--surface);color:var(--accent);box-shadow:0 8px 24px rgba(20,15,28,.12);font:inherit;font-size:.63rem;font-weight:800;cursor:pointer}
.messages-page-v3 .wa-new-messages-jump[hidden]{display:none!important}
.messages-page-v3 .wa-new-messages-jump .ui-icon{width:15px;height:15px}

.messages-page-v3 .wa-delivery-tick{display:inline-flex;align-items:center;min-width:14px;color:var(--muted);font-size:.64rem;font-weight:850;letter-spacing:-.12em}
.messages-page-v3 .wa-delivery-tick.is-read{color:var(--accent)}
.messages-page-v3 .wa-delivery-tick.is-sending{letter-spacing:0;animation:waSendingPulse 1s ease-in-out infinite}
.messages-page-v3 .wa-delivery-tick.is-failed{letter-spacing:0;color:var(--danger,#d64545)}
@keyframes waSendingPulse{50%{opacity:.45}}

.messages-page-v3 .wa-message-row.is-pending .wa-bubble{opacity:.78}
.messages-page-v3 .wa-message-row.is-failed .wa-bubble{border-color:color-mix(in srgb,var(--danger,#d64545) 45%,var(--border))!important;background:color-mix(in srgb,var(--danger,#d64545) 4%,var(--surface))!important}
.messages-page-v3 .wa-message-retry{min-height:27px;margin:5px 7px 7px;padding:4px 9px;border:1px solid color-mix(in srgb,var(--danger,#d64545) 30%,var(--border));border-radius:8px;background:var(--surface);color:var(--danger,#d64545);font:inherit;font-size:.6rem;font-weight:800;cursor:pointer}
.messages-page-v3 .wa-message-retry[hidden]{display:none!important}
.messages-page-v3 .wa-optimistic-files{display:grid;gap:3px;margin-bottom:4px}
.messages-page-v3 .wa-optimistic-files span{max-width:300px;overflow:hidden;color:var(--muted);font-size:.61rem;text-overflow:ellipsis;white-space:nowrap}

.messages-page-v3 .wa-deleted-message{display:inline-flex!important;align-items:center;gap:6px!important;margin:2px 0!important;color:var(--muted)!important;font-size:.69rem!important;font-style:italic}
.messages-page-v3 .wa-deleted-message .ui-icon{width:15px;height:15px}
.messages-page-v3 .wa-message-row.is-deleted .wa-bubble{background:color-mix(in srgb,var(--muted) 3%,var(--surface))!important;border-style:dashed!important}
.messages-page-v3 .wa-delete-action{color:var(--muted)!important}.messages-page-v3 .wa-delete-action.is-danger{color:var(--danger,#d64545)!important}

/* Full-screen media viewer. */
.wa-media-viewer{position:fixed;inset:0;z-index:5000;display:grid;grid-template-columns:64px minmax(0,1fr) 64px;grid-template-rows:60px minmax(0,1fr) 56px;align-items:center;background:rgba(8,6,12,.94);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.wa-media-viewer[hidden]{display:none!important}
.wa-media-viewer>header{grid-column:1/-1;align-self:stretch;padding:8px 14px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;border-bottom:1px solid rgba(255,255,255,.1)}
.wa-media-viewer>header .wa-icon-btn{color:#fff;border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
.wa-media-viewer>header strong{min-width:0;overflow:hidden;font-size:.76rem;text-overflow:ellipsis;white-space:nowrap}.wa-media-viewer>header span{font-size:.65rem;color:rgba(255,255,255,.7)}
.wa-media-viewer-stage{grid-column:2;grid-row:2;width:100%;height:100%;display:grid;place-items:center;overflow:hidden;touch-action:none}
.wa-media-viewer-stage img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center;transition:transform .12s ease;user-select:none;-webkit-user-drag:none}
.wa-media-viewer-nav{width:44px;height:44px;place-self:center;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}.wa-media-viewer-nav[hidden]{visibility:hidden}.wa-media-viewer-nav .ui-icon{width:20px;height:20px}
.wa-media-viewer-zoom{grid-column:1/-1;grid-row:3;justify-self:center;display:flex;gap:5px;padding:5px;border-radius:999px;background:rgba(255,255,255,.08)}
.wa-media-viewer-zoom button{min-width:36px;height:34px;padding:0 10px;border:0;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:.68rem;cursor:pointer}
body.media-viewer-open{overflow:hidden!important}

@media(max-width:680px){
  .messages-page-v3 .wa-info-preferences{grid-template-columns:1fr}
  .messages-page-v3 .wa-new-messages-jump{right:12px;bottom:calc(72px + env(safe-area-inset-bottom));min-height:34px;padding:6px 10px}
  .messages-page-v3 .wa-unread-marker{margin:10px 4px 12px;font-size:.56rem}
  .messages-page-v3 .wa-unread-marker span{padding:4px 8px}
  .messages-page-v3 .wa-message-retry{margin:4px 6px 6px}
  .messages-page-v3 .wa-thread-person .wa-thread-subline{font-size:.59rem}
  .messages-page-v3 .wa-thread-presence{font-size:.54rem}
  .wa-media-viewer{grid-template-columns:42px minmax(0,1fr) 42px;grid-template-rows:56px minmax(0,1fr) calc(52px + env(safe-area-inset-bottom))}
  .wa-media-viewer>header{padding:7px 8px}.wa-media-viewer-nav{width:36px;height:36px}.wa-media-viewer-stage{grid-column:1/-1;padding:0 4px}.wa-media-viewer-nav{z-index:2}.wa-media-viewer-nav.is-prev{grid-column:1}.wa-media-viewer-nav.is-next{grid-column:3}.wa-media-viewer-zoom{align-self:start}
}

@media(prefers-reduced-motion:reduce){.messages-page-v3 .wa-delivery-tick.is-sending{animation:none}.wa-media-viewer-stage img{transition:none}}

@media(max-width:680px){
  .messages-page-v3 .wa-message-menu[open] .wa-message-action-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important}
  .messages-page-v3 .wa-message-menu[open] .wa-message-action-list>button{width:100%!important;min-width:0!important;justify-content:flex-start!important;padding-inline:10px!important}
  .messages-page-v3 .wa-message-menu[open] .wa-message-action-list>button:last-child:nth-child(odd){grid-column:1/-1}
}

/* =====================================================================
   NOTIFICATIONS CENTER — UI/UX v18
   Scoped notification inbox with live refresh, search and soft dismissal.
   ===================================================================== */

.notifications-page-v18{
    width:min(1180px,100%);
    margin:0 auto;
    display:grid;
    gap:18px;
}

.notifications-header-v18{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:22px;
}

.notifications-header-v18>div{min-width:0}

.notifications-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:7px;
    color:var(--accent);
    font-size:.66rem;
    font-weight:800;
    letter-spacing:.075em;
    text-transform:uppercase;
}

.notifications-eyebrow .ui-icon{width:16px;height:16px}

.notifications-header-v18 h1{
    margin:0;
    color:var(--text);
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.02;
    letter-spacing:-.045em;
}

.notifications-header-v18 p{
    max-width:690px;
    margin:10px 0 0;
    color:var(--muted);
    font-size:.86rem;
    line-height:1.55;
}

.notifications-settings-link{
    flex:0 0 auto;
    min-height:42px!important;
    padding:8px 12px!important;
    gap:7px!important;
    border-radius:11px!important;
    font-size:.7rem!important;
}

.notifications-settings-link .ui-icon{width:16px;height:16px}

.notifications-summary-v18{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
}

.notifications-summary-v18 article{
    min-width:0;
    min-height:82px;
    padding:14px 15px;
    display:flex;
    align-items:center;
    gap:11px;
    border:1px solid var(--border);
    border-radius:15px;
    background:var(--surface);
    box-shadow:0 5px 18px rgba(28,21,40,.025);
}

.notifications-summary-v18 article.is-primary{
    background:
        radial-gradient(circle at 94% 8%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 9rem),
        var(--surface);
    border-color:color-mix(in srgb,var(--accent) 15%,var(--border));
}

.notifications-summary-v18 article>span{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:color-mix(in srgb,var(--accent) 7%,var(--surface));
    color:var(--accent);
}

.notifications-summary-v18 article>span .ui-icon{width:19px;height:19px}

.notifications-summary-v18 article>div{
    min-width:0;
    display:grid;
    gap:2px;
}

.notifications-summary-v18 strong{
    color:var(--text);
    font-size:1.22rem;
    line-height:1;
}

.notifications-summary-v18 small{
    color:var(--muted);
    font-size:.64rem;
    font-weight:650;
}

.notifications-workspace-v18{
    min-width:0;
    display:grid;
    gap:10px;
}

.notifications-toolbar-v18{
    min-width:0;
    padding:5px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border:1px solid var(--border);
    border-radius:15px;
    background:var(--surface);
}

.notifications-filter-v18{
    min-width:0;
    display:flex;
    align-items:center;
    gap:3px;
    overflow-x:auto;
    scrollbar-width:none;
}

.notifications-filter-v18::-webkit-scrollbar{display:none}

.notifications-filter-v18 a{
    min-height:38px;
    padding:7px 9px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex:0 0 auto;
    border-radius:10px;
    color:var(--muted);
    font-size:.7rem;
    font-weight:700;
    text-decoration:none;
    transition:background .15s ease,color .15s ease;
}

.notifications-filter-v18 a:hover{
    background:var(--surface-2);
    color:var(--text);
    text-decoration:none;
}

.notifications-filter-v18 a.active{
    background:color-mix(in srgb,var(--accent) 9%,var(--surface));
    color:var(--accent);
}

.notifications-filter-v18 b{
    min-width:21px;
    height:21px;
    padding:0 5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:color-mix(in srgb,var(--muted) 8%,var(--surface));
    color:inherit;
    font-size:.58rem;
}

.notifications-filter-v18 a.active b{
    background:color-mix(in srgb,var(--accent) 11%,var(--surface));
}

.notifications-toolbar-actions{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
}

.notifications-search-v18{
    width:min(280px,28vw);
    height:38px;
    padding:0 6px 0 10px;
    display:grid;
    grid-template-columns:17px minmax(0,1fr) 27px;
    gap:7px;
    align-items:center;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface-2);
    color:var(--muted);
    transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}

.notifications-search-v18:focus-within{
    border-color:color-mix(in srgb,var(--accent) 35%,var(--border));
    background:var(--surface);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 7%,transparent);
}

.notifications-search-v18>.ui-icon{width:16px;height:16px}

.notifications-search-v18 input{
    min-width:0;
    width:100%;
    height:36px;
    padding:0!important;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:var(--text);
    font:inherit;
    font-size:.68rem!important;
}

.notifications-search-v18 button{
    width:27px;
    height:27px;
    padding:0;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
}

.notifications-search-v18 button:hover{
    background:var(--surface);
    color:var(--text);
}

.notifications-search-v18 button[hidden]{display:none!important}
.notifications-search-v18 button .ui-icon{width:14px;height:14px}

.notifications-action-btn{
    min-height:38px!important;
    padding:7px 9px!important;
    gap:5px!important;
    border-radius:10px!important;
    font-size:.64rem!important;
    white-space:nowrap;
}

.notifications-action-btn .ui-icon{width:14px;height:14px}

.notifications-live-note{
    min-height:24px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    padding-inline:5px;
    color:var(--muted);
    font-size:.59rem;
    font-weight:650;
}

.notifications-live-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--success,#198754);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--success,#198754) 10%,transparent);
}

.notifications-live-note.is-reconnecting .notifications-live-dot{
    background:var(--warning,#d99400);
    box-shadow:none;
}

.notifications-results-v18{
    min-width:0;
    display:grid;
    gap:15px;
}

.notification-time-group{
    display:grid;
    gap:7px;
}

.notification-time-group>header{
    padding:0 5px;
    display:flex;
    align-items:center;
    gap:7px;
}

.notification-time-group>header h2{
    margin:0;
    color:var(--text);
    font-size:.72rem;
    font-weight:800;
}

.notification-time-group>header span{
    min-width:20px;
    height:20px;
    padding:0 5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:var(--surface-2);
    color:var(--muted);
    font-size:.56rem;
    font-weight:700;
}

.notification-center-list{
    display:grid;
    gap:6px;
}

.notification-card-v18{
    min-width:0;
    min-height:76px;
    padding:7px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:6px;
    align-items:center;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
    box-shadow:0 3px 12px rgba(28,21,40,.02);
    transition:border-color .15s ease,box-shadow .15s ease,background .15s ease,opacity .15s ease,transform .15s ease;
}

.notification-card-v18:hover{
    border-color:color-mix(in srgb,var(--accent) 17%,var(--border));
    box-shadow:0 6px 20px rgba(28,21,40,.035);
}

.notification-card-v18.is-unread{
    border-color:color-mix(in srgb,var(--accent) 20%,var(--border));
    background:
        linear-gradient(90deg,color-mix(in srgb,var(--accent) 5%,var(--surface)),var(--surface) 38%);
}

.notification-card-v18.is-removing{
    opacity:0;
    transform:translateX(8px);
}

.notification-card-main{
    min-width:0;
    padding:4px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    gap:11px;
    align-items:center;
    color:inherit;
    text-decoration:none;
}

.notification-card-main:hover{text-decoration:none}

.notification-card-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:color-mix(in srgb,var(--accent) 7%,var(--surface));
    color:var(--accent);
}

.notification-card-icon .ui-icon{width:20px;height:20px}

.notification-card-icon.type-messages{
    background:color-mix(in srgb,var(--accent) 9%,var(--surface));
}

.notification-card-icon.type-system{
    background:var(--surface-2);
    color:var(--muted);
}

.notification-card-copy{
    min-width:0;
    display:grid;
    gap:2px;
}

.notification-card-meta{
    min-width:0;
    display:flex;
    align-items:center;
    gap:6px;
}

.notification-card-meta b{
    color:var(--muted);
    font-size:.56rem;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.notification-card-meta i{
    min-height:18px;
    padding:2px 6px;
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    background:color-mix(in srgb,var(--accent) 10%,var(--surface));
    color:var(--accent);
    font-size:.52rem;
    font-style:normal;
    font-weight:800;
}

.notification-card-copy>strong{
    min-width:0;
    overflow:hidden;
    color:var(--text);
    font-size:.78rem;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.notification-card-main:hover .notification-card-copy>strong{color:var(--accent)}

.notification-card-copy>small{
    min-width:0;
    overflow:hidden;
    color:var(--muted);
    font-size:.64rem;
    line-height:1.35;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.notification-card-copy time{
    color:var(--muted);
    font-size:.56rem;
    line-height:1.2;
}

.notification-card-actions{
    padding-right:4px;
    display:flex;
    align-items:center;
    gap:3px;
    opacity:.45;
    transition:opacity .15s ease;
}

.notification-card-v18:hover .notification-card-actions,
.notification-card-v18:focus-within .notification-card-actions{
    opacity:1;
}

.notification-mini-action{
    width:32px;
    height:32px;
    min-width:32px;
    padding:0;
    display:grid;
    place-items:center;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
}

.notification-mini-action:hover{
    background:var(--surface-2);
    color:var(--text);
}

.notification-mini-action .ui-icon{width:15px;height:15px}

.notifications-empty-v18,
.notifications-search-empty{
    min-height:260px;
    padding:32px 18px;
    place-items:center;
    align-content:center;
    gap:7px;
    border:1px dashed color-mix(in srgb,var(--accent) 16%,var(--border));
    border-radius:16px;
    background:color-mix(in srgb,var(--accent) 1.2%,var(--surface));
    text-align:center;
}

.notifications-empty-v18{display:grid}
.notifications-search-empty{display:grid}
.notifications-search-empty[hidden]{display:none!important}

.notifications-empty-v18>span,
.notifications-search-empty>span{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:color-mix(in srgb,var(--accent) 7%,var(--surface));
    color:var(--accent);
}

.notifications-empty-v18>span .ui-icon,
.notifications-search-empty>span .ui-icon{width:22px;height:22px}

.notifications-empty-v18 h2,
.notifications-search-empty strong{
    margin:0;
    color:var(--text);
    font-size:.92rem;
}

.notifications-empty-v18 p,
.notifications-search-empty small{
    max-width:390px;
    margin:0;
    color:var(--muted);
    font-size:.68rem;
    line-height:1.45;
}

@media(max-width:980px){
    .notifications-toolbar-v18{
        display:grid;
        grid-template-columns:1fr;
    }

    .notifications-filter-v18{width:100%}

    .notifications-toolbar-actions{
        width:100%;
        justify-content:flex-start;
    }

    .notifications-search-v18{
        flex:1 1 auto;
        width:auto;
        max-width:none;
    }
}

@media(max-width:680px){
    .notifications-page-v18{gap:14px}

    .notifications-header-v18{
        align-items:flex-start;
    }

    .notifications-header-v18 h1{font-size:2rem}
    .notifications-header-v18 p{font-size:.78rem}

    .notifications-settings-link{
        width:40px!important;
        min-width:40px!important;
        height:40px!important;
        min-height:40px!important;
        padding:0!important;
        font-size:0!important;
        border-radius:10px!important;
    }

    .notifications-settings-link .ui-icon{width:18px;height:18px}

    .notifications-summary-v18{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;
    }

    .notifications-summary-v18 article{
        min-height:68px;
        padding:10px 11px;
        border-radius:13px;
    }

    .notifications-summary-v18 article>span{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

    .notifications-summary-v18 article>span .ui-icon{width:17px;height:17px}
    .notifications-summary-v18 strong{font-size:1.05rem}
    .notifications-summary-v18 small{font-size:.59rem}

    .notifications-toolbar-v18{
        padding:5px;
        gap:5px;
        border-radius:13px;
    }

    .notifications-filter-v18 a{
        min-height:35px;
        padding:6px 8px;
        font-size:.65rem;
    }

    .notifications-toolbar-actions{
        display:grid;
        grid-template-columns:1fr auto auto;
        gap:5px;
    }

    .notifications-search-v18{
        min-width:0;
        width:100%;
        height:36px;
    }

    .notifications-action-btn{
        width:36px!important;
        min-width:36px!important;
        height:36px!important;
        min-height:36px!important;
        padding:0!important;
        font-size:0!important;
    }

    .notifications-action-btn .ui-icon{width:16px;height:16px}

    .notifications-live-note{justify-content:flex-start}

    .notification-card-v18{
        min-height:72px;
        padding:6px;
        border-radius:13px;
    }

    .notification-card-main{
        grid-template-columns:38px minmax(0,1fr);
        gap:9px;
    }

    .notification-card-icon{
        width:38px;
        height:38px;
        border-radius:10px;
    }

    .notification-card-icon .ui-icon{width:18px;height:18px}

    .notification-card-copy>strong{
        font-size:.73rem;
        white-space:normal;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
    }

    .notification-card-copy>small{
        white-space:normal;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
    }

    .notification-card-actions{
        opacity:1;
        align-self:start;
        padding-top:4px;
        padding-right:1px;
    }

    .notification-mini-action{
        width:30px;
        height:30px;
        min-width:30px;
    }
}

@media(max-width:420px){
    .notifications-toolbar-actions{
        grid-template-columns:1fr auto auto;
    }

    .notifications-filter-v18 a{
        gap:4px;
    }

    .notifications-filter-v18 b{
        min-width:19px;
        height:19px;
        padding-inline:4px;
    }

    .notification-card-v18{
        grid-template-columns:minmax(0,1fr) 30px;
    }

    .notification-card-actions{
        display:grid;
        gap:2px;
    }

    .notification-card-meta i{
        display:none;
    }
}

@media(prefers-reduced-motion:reduce){
    .notifications-page-v18 *,
    .notifications-page-v18 *::before,
    .notifications-page-v18 *::after{
        transition-duration:.01ms!important;
    }
}

\n\n/* =====================================================================\n   NOTIFICATIONS CENTER — POLISH v19\n   Denser desktop feed, clearer hierarchy and reliable action feedback.\n   ===================================================================== */\n.notifications-page-v19{\n    width:min(1240px,100%);\n    gap:14px;\n}\n\n.notifications-page-v19 .notifications-header-v18{\n    align-items:center;\n    padding-bottom:2px;\n}\n\n.notifications-page-v19 .notifications-header-v18 h1{\n    font-size:clamp(2rem,3vw,2.65rem);\n}\n\n.notifications-page-v19 .notifications-header-v18 p{\n    margin-top:7px;\n    font-size:.8rem;\n}\n\n.notifications-header-actions-v19{\n    display:flex;\n    align-items:center;\n    justify-content:flex-end;\n    gap:8px;\n    flex:0 0 auto;\n}\n\n.notifications-page-v19 .notifications-live-note{\n    min-height:36px;\n    padding:0 10px;\n    justify-content:center;\n    border:1px solid var(--border);\n    border-radius:999px;\n    background:var(--surface);\n    font-size:.61rem;\n    white-space:nowrap;\n}\n\n.notifications-page-v19 .notifications-live-note.is-reconnecting{\n    color:var(--warning,#b77900);\n    border-color:color-mix(in srgb,var(--warning,#d99400) 22%,var(--border));\n    background:color-mix(in srgb,var(--warning,#d99400) 5%,var(--surface));\n}\n\n.notifications-page-v19 .notifications-summary-v18{\n    gap:8px;\n}\n\n.notifications-page-v19 .notifications-summary-v18 article{\n    min-height:70px;\n    padding:11px 13px;\n    border-radius:14px;\n}\n\n.notifications-page-v19 .notifications-summary-v18 article>span{\n    width:34px;\n    height:34px;\n    flex-basis:34px;\n    border-radius:10px;\n}\n\n.notifications-page-v19 .notifications-summary-v18 article>span .ui-icon{width:17px;height:17px}\n.notifications-page-v19 .notifications-summary-v18 strong{font-size:1.08rem}\n.notifications-page-v19 .notifications-summary-v18 small{font-size:.61rem}\n\n.notifications-page-v19 .notifications-workspace-v18{gap:12px}\n\n.notifications-page-v19 .notifications-toolbar-v18{\n    padding:6px;\n    border-radius:14px;\n    box-shadow:0 4px 16px rgba(28,21,40,.025);\n}\n\n.notifications-page-v19 .notifications-filter-v18 a{\n    min-height:36px;\n    padding:6px 9px;\n    border-radius:9px;\n    font-size:.67rem;\n}\n\n.notifications-page-v19 .notifications-filter-v18 a.active{\n    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent);\n}\n\n.notifications-page-v19 .notifications-results-v18{gap:13px}\n.notifications-page-v19 .notification-time-group{gap:6px}\n.notifications-page-v19 .notification-center-list{gap:5px}\n\n.notifications-page-v19 .notification-time-group>header{\n    min-height:26px;\n    padding:0 7px;\n}\n\n.notifications-page-v19 .notification-time-group>header h2{font-size:.69rem}\n\n.notifications-page-v19 .notification-card-v18{\n    min-height:62px;\n    padding:5px 6px;\n    grid-template-columns:minmax(0,1fr) 66px;\n    border-radius:12px;\n    box-shadow:none;\n}\n\n.notifications-page-v19 .notification-card-v18.is-unread{\n    border-color:color-mix(in srgb,var(--accent) 24%,var(--border));\n    background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 5.5%,var(--surface)),var(--surface) 28%);\n    box-shadow:inset 3px 0 0 color-mix(in srgb,var(--accent) 78%,transparent);\n}\n\n.notifications-page-v19 .notification-card-main{\n    min-height:50px;\n    padding:3px 5px;\n    grid-template-columns:36px minmax(0,1fr);\n    gap:10px;\n}\n\n.notifications-page-v19 .notification-card-icon{\n    width:36px;\n    height:36px;\n    border-radius:10px;\n}\n.notifications-page-v19 .notification-card-icon .ui-icon{width:17px;height:17px}\n\n.notifications-page-v19 .notification-card-copy{gap:1px}\n\n.notifications-page-v19 .notification-card-topline{\n    min-width:0;\n    display:flex;\n    align-items:center;\n    justify-content:space-between;\n    gap:10px;\n}\n\n.notifications-page-v19 .notification-card-meta{gap:6px}\n.notifications-page-v19 .notification-card-meta b{font-size:.54rem}\n\n.notifications-page-v19 .notification-unread-dot{\n    width:6px;\n    height:6px;\n    flex:0 0 6px;\n    padding:0;\n    display:block;\n    border-radius:50%;\n    background:var(--accent);\n    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent);\n}\n\n.notifications-page-v19 .notification-card-topline time{\n    flex:0 0 auto;\n    color:var(--muted);\n    font-size:.54rem;\n    font-weight:600;\n}\n\n.notifications-page-v19 .notification-card-copy>strong{\n    font-size:.76rem;\n    line-height:1.25;\n}\n\n.notifications-page-v19 .notification-card-copy>small{\n    font-size:.61rem;\n    line-height:1.28;\n}\n\n.notifications-page-v19 .notification-card-copy>time{display:none}\n\n.notifications-page-v19 .notification-card-actions{\n    width:62px;\n    padding-right:1px;\n    justify-content:flex-end;\n    gap:2px;\n    opacity:.72;\n}\n\n.notifications-page-v19 .notification-mini-action{\n    width:29px;\n    height:29px;\n    min-width:29px;\n    border-radius:8px;\n}\n\n.notifications-page-v19 .notification-mini-action.is-read-action:hover{\n    background:color-mix(in srgb,var(--accent) 8%,var(--surface));\n    color:var(--accent);\n}\n\n.notifications-page-v19 .notification-card-v18:hover .notification-card-actions,\n.notifications-page-v19 .notification-card-v18:focus-within .notification-card-actions{opacity:1}\n\n@media(max-width:980px){\n    .notifications-page-v19 .notifications-header-v18{align-items:flex-start}\n    .notifications-header-actions-v19{align-items:flex-start}\n}\n\n@media(max-width:680px){\n    .notifications-page-v19{gap:12px}\n    .notifications-page-v19 .notifications-header-v18{gap:10px}\n    .notifications-page-v19 .notifications-header-v18 h1{font-size:1.85rem}\n    .notifications-page-v19 .notifications-header-v18 p{font-size:.72rem;line-height:1.42}\n    .notifications-header-actions-v19{gap:5px}\n    .notifications-page-v19 .notifications-live-note{\n        min-height:38px;\n        width:38px;\n        padding:0;\n        font-size:0;\n    }\n    .notifications-page-v19 .notifications-live-dot{width:7px;height:7px}\n    .notifications-page-v19 .notifications-summary-v18{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}\n    .notifications-page-v19 .notifications-summary-v18 article{\n        min-height:61px;\n        padding:8px 6px;\n        display:grid;\n        place-items:center;\n        gap:4px;\n        text-align:center;\n    }\n    .notifications-page-v19 .notifications-summary-v18 article>span{width:29px;height:29px;flex-basis:29px}\n    .notifications-page-v19 .notifications-summary-v18 article>span .ui-icon{width:15px;height:15px}\n    .notifications-page-v19 .notifications-summary-v18 strong{font-size:.9rem}\n    .notifications-page-v19 .notifications-summary-v18 small{font-size:.52rem}\n    .notifications-page-v19 .notifications-toolbar-v18{gap:6px}\n    .notifications-page-v19 .notification-card-v18{\n        min-height:66px;\n        grid-template-columns:minmax(0,1fr) 31px;\n        padding:5px;\n    }\n    .notifications-page-v19 .notification-card-main{\n        grid-template-columns:34px minmax(0,1fr);\n        gap:8px;\n    }\n    .notifications-page-v19 .notification-card-icon{width:34px;height:34px}\n    .notifications-page-v19 .notification-card-topline{gap:6px}\n    .notifications-page-v19 .notification-card-copy>strong{font-size:.71rem}\n    .notifications-page-v19 .notification-card-copy>small{font-size:.59rem;-webkit-line-clamp:1}\n    .notifications-page-v19 .notification-card-actions{\n        width:30px;\n        display:grid;\n        justify-items:center;\n        align-self:center;\n        gap:1px;\n    }\n    .notifications-page-v19 .notification-mini-action{width:28px;height:28px;min-width:28px}\n}\n\n@media(max-width:420px){\n    .notifications-page-v19 .notifications-summary-v18{grid-template-columns:repeat(2,minmax(0,1fr))}\n    .notifications-page-v19 .notifications-summary-v18 article{display:flex;text-align:left;place-items:initial;padding:8px 9px}\n}\n

/* =====================================================================
   TOPBAR NOTIFICATION CARD — V20
   Recent notifications flyout, visually aligned with the profile card.
   ===================================================================== */
.notification-dropdown-wrap{
    position:relative;
    display:inline-flex;
}

.notification-dropdown-wrap.is-open .notification-button{
    background:var(--surface-2);
    border-color:color-mix(in srgb,var(--accent) 48%,var(--border));
    color:var(--accent);
    box-shadow:0 4px 16px -2px rgba(107,32,215,.14);
}

.notification-popup-card{
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    width:390px;
    max-width:calc(100vw - 28px);
    background:var(--surface,#fff);
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:0 20px 50px -10px rgba(107,32,215,.20),0 10px 24px -4px rgba(0,0,0,.11);
    z-index:1002;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px) scale(.97);
    transform-origin:top right;
    pointer-events:none;
    transition:opacity .18s cubic-bezier(.16,1,.3,1),transform .18s cubic-bezier(.16,1,.3,1),visibility .18s;
}

html[data-theme="dark"] .notification-popup-card{
    background:#171322;
    border-color:rgba(255,255,255,.12);
    box-shadow:0 28px 70px -10px rgba(0,0,0,.72);
}

.notification-dropdown-wrap.is-open .notification-popup-card{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

.notification-popup-header{
    min-height:74px;
    padding:14px 15px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    align-items:center;
    gap:11px;
    background:var(--surface-2);
    border-bottom:1px solid var(--border);
}

.notification-popup-header-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:13px;
    color:var(--accent);
    background:color-mix(in srgb,var(--accent) 9%,var(--surface));
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent);
}
.notification-popup-header-icon .ui-icon{width:19px;height:19px}

.notification-popup-heading{
    min-width:0;
    display:grid;
    gap:2px;
}
.notification-popup-heading strong{
    color:var(--text);
    font-size:.86rem;
    line-height:1.2;
    letter-spacing:-.01em;
}
.notification-popup-heading small{
    color:var(--muted);
    font-size:.62rem;
    font-weight:600;
}

.notification-popup-mark-all{
    min-height:31px;
    padding:0 9px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--accent);
    font:inherit;
    font-size:.58rem;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
}
.notification-popup-mark-all:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 8%,transparent)}
.notification-popup-mark-all:disabled{opacity:.38;cursor:default}

.notification-popup-list{
    max-height:min(430px,62vh);
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-width:none;
    background:var(--surface);
}
.notification-popup-list::-webkit-scrollbar{display:none}

.notification-popup-item{
    position:relative;
    min-height:67px;
    padding:9px 13px;
    display:grid;
    grid-template-columns:38px minmax(0,1fr) 8px;
    align-items:center;
    gap:10px;
    color:inherit;
    text-decoration:none;
    border-bottom:1px solid color-mix(in srgb,var(--border) 78%,transparent);
    transition:background .16s ease;
}
.notification-popup-item:last-child{border-bottom:0}
.notification-popup-item:hover{background:var(--surface-2)}
.notification-popup-item.is-unread{
    background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),var(--surface) 62%);
}
.notification-popup-item.is-unread::before{
    content:"";
    position:absolute;
    left:0;
    top:10px;
    bottom:10px;
    width:3px;
    border-radius:0 4px 4px 0;
    background:var(--accent);
}

.notification-popup-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:var(--accent);
    background:color-mix(in srgb,var(--accent) 8%,var(--surface-2));
}
.notification-popup-icon.type-messages{color:var(--accent)}
.notification-popup-icon.type-system{color:var(--muted)}
.notification-popup-icon .ui-icon{width:17px;height:17px}

.notification-popup-copy{
    min-width:0;
    display:grid;
    gap:3px;
}
.notification-popup-item-top{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}
.notification-popup-item-top strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--text);
    font-size:.71rem;
    line-height:1.25;
}
.notification-popup-item-top time{
    flex:0 0 auto;
    color:var(--muted);
    font-size:.53rem;
    font-weight:700;
}
.notification-popup-copy>small{
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    color:var(--muted);
    font-size:.6rem;
    line-height:1.38;
}
.notification-popup-unread-dot{
    width:7px;
    height:7px;
    display:block;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent);
}

.notification-popup-empty{
    min-height:176px;
    padding:26px 20px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:7px;
    text-align:center;
}
.notification-popup-empty>span{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:var(--accent);
    background:color-mix(in srgb,var(--accent) 8%,var(--surface-2));
}
.notification-popup-empty strong{font-size:.76rem;color:var(--text)}
.notification-popup-empty small{font-size:.61rem;color:var(--muted)}

.notification-popup-footer{
    padding:8px;
    background:var(--surface-2);
    border-top:1px solid var(--border);
}
.notification-popup-footer a{
    min-height:39px;
    padding:0 11px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border-radius:11px;
    color:var(--accent);
    text-decoration:none;
    font-size:.65rem;
    font-weight:800;
    transition:background .15s ease;
}
.notification-popup-footer a:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.notification-popup-footer .ui-icon{width:15px;height:15px}

@media(max-width:680px){
    .notification-popup-card{
        position:fixed;
        top:calc(64px + env(safe-area-inset-top));
        left:8px;
        right:8px;
        width:auto;
        max-width:none;
        max-height:calc(100dvh - 76px - env(safe-area-inset-top));
        border-radius:17px;
        transform-origin:top right;
    }
    .notification-popup-header{
        min-height:68px;
        padding:11px 12px;
        grid-template-columns:39px minmax(0,1fr) auto;
        gap:9px;
    }
    .notification-popup-header-icon{width:39px;height:39px;border-radius:12px}
    .notification-popup-list{max-height:calc(100dvh - 190px - env(safe-area-inset-top))}
    .notification-popup-item{min-height:64px;padding:8px 11px;grid-template-columns:36px minmax(0,1fr) 7px;gap:9px}
    .notification-popup-icon{width:36px;height:36px}
    .notification-popup-item-top strong{font-size:.69rem}
    .notification-popup-copy>small{font-size:.59rem}
}

@media(max-width:390px){
    .notification-popup-mark-all{font-size:.54rem;padding:0 6px}
    .notification-popup-heading strong{font-size:.8rem}
    .notification-popup-heading small{font-size:.58rem}
}

/* =====================================================================
   TOPBAR NOTIFICATION CARD — V21 COMPACT / BELL-ANCHORED
   Profile-card scale, dense recent feed and safer desktop positioning.
   ===================================================================== */
@media(min-width:681px){
    .notification-dropdown-wrap{
        position:relative!important;
    }

    .notification-popup-card{
        position:absolute!important;
        top:calc(100% + 10px)!important;
        right:0!important;
        left:auto!important;
        width:340px!important;
        max-width:calc(100vw - 24px)!important;
        border-radius:18px!important;
        transform-origin:top right!important;
    }

    .notification-popup-header{
        min-height:60px!important;
        padding:10px 12px!important;
        grid-template-columns:36px minmax(0,1fr) auto!important;
        gap:9px!important;
    }

    .notification-popup-header-icon{
        width:36px!important;
        height:36px!important;
        border-radius:11px!important;
    }

    .notification-popup-header-icon .ui-icon{
        width:17px!important;
        height:17px!important;
    }

    .notification-popup-heading strong{
        font-size:.78rem!important;
    }

    .notification-popup-heading small{
        font-size:.56rem!important;
    }

    .notification-popup-mark-all{
        min-height:28px!important;
        padding:0 7px!important;
        font-size:.54rem!important;
        border-radius:8px!important;
    }

    .notification-popup-list{
        max-height:310px!important;
    }

    .notification-popup-item{
        min-height:54px!important;
        padding:7px 10px!important;
        grid-template-columns:34px minmax(0,1fr) 7px!important;
        gap:8px!important;
    }

    .notification-popup-item.is-unread::before{
        top:7px!important;
        bottom:7px!important;
        width:2px!important;
    }

    .notification-popup-icon{
        width:34px!important;
        height:34px!important;
        border-radius:10px!important;
    }

    .notification-popup-icon .ui-icon{
        width:15px!important;
        height:15px!important;
    }

    .notification-popup-avatar{
        font-size:.68rem!important;
        font-weight:800!important;
        letter-spacing:-.02em!important;
        color:var(--accent)!important;
        background:linear-gradient(145deg,
            color-mix(in srgb,var(--accent) 12%,var(--surface)),
            color-mix(in srgb,var(--accent) 5%,var(--surface-2)))!important;
        box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent)!important;
    }

    .notification-popup-copy{
        gap:1px!important;
    }

    .notification-popup-item-top{
        gap:6px!important;
    }

    .notification-popup-item-top strong{
        font-size:.65rem!important;
        font-weight:750!important;
    }

    .notification-popup-item-top time{
        font-size:.49rem!important;
    }

    .notification-popup-copy>small{
        font-size:.55rem!important;
        line-height:1.28!important;
        -webkit-line-clamp:1!important;
    }

    .notification-popup-unread-dot{
        width:6px!important;
        height:6px!important;
        box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 8%,transparent)!important;
    }

    .notification-popup-footer{
        padding:6px!important;
    }

    .notification-popup-footer a{
        min-height:34px!important;
        padding:0 9px!important;
        border-radius:9px!important;
        font-size:.59rem!important;
    }
}

@media(max-width:680px){
    .notification-popup-card{
        top:calc(60px + env(safe-area-inset-top))!important;
        left:10px!important;
        right:10px!important;
        width:auto!important;
        max-width:none!important;
        border-radius:16px!important;
    }

    .notification-popup-list{
        max-height:min(360px,calc(100dvh - 178px - env(safe-area-inset-top)))!important;
    }

    .notification-popup-item{
        min-height:58px!important;
        padding:7px 10px!important;
    }

    .notification-popup-avatar{
        font-size:.68rem!important;
        font-weight:800!important;
    }
}


/* =====================================================================
   PROFILE & SETTINGS V22 — ACCOUNT COMMAND CENTER
   ===================================================================== */

.profile-page-container{
    max-width:1120px;
}
.profile-command-bar{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}
.profile-command-item{
    min-width:0;
    display:flex;
    align-items:center;
    gap:11px;
    padding:13px 14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
    color:var(--text);
    text-decoration:none;
    box-shadow:var(--shadow-sm);
    transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.profile-command-item:hover{
    transform:translateY(-1px);
    border-color:color-mix(in srgb,var(--accent) 38%,var(--border));
    box-shadow:0 8px 20px rgba(31,24,48,.07);
}
.profile-command-item.is-primary{
    background:color-mix(in srgb,var(--accent) 6%,var(--surface));
    border-color:color-mix(in srgb,var(--accent) 24%,var(--border));
}
.profile-command-icon{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:var(--accent-soft);
    color:var(--accent);
}
.profile-command-icon svg{width:17px;height:17px}
.profile-command-item span:last-child{min-width:0;display:grid;gap:2px}
.profile-command-item strong{font-size:.84rem;line-height:1.2}
.profile-command-item small{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.profile-overview-strip{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--surface);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
}
.profile-overview-item{
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    border-right:1px solid var(--border);
}
.profile-overview-item:last-child{border-right:0}
.profile-overview-item>span{
    width:31px;height:31px;flex:0 0 31px;display:grid;place-items:center;
    border-radius:9px;background:var(--surface-2);color:var(--muted);
}
.profile-overview-item>span svg{width:15px;height:15px}
.profile-overview-item>div{min-width:0;display:grid;gap:2px}
.profile-overview-item small{font-size:.7rem;color:var(--muted)}
.profile-overview-item strong{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-overview-item.has-attention>span{background:var(--accent-soft);color:var(--accent)}

.profile-section-card[id]{scroll-margin-top:92px}

/* Settings command center */
.account-settings-v22{
    max-width:1120px;
    margin:0 auto 42px;
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    gap:18px;
    align-items:start;
}
.settings-account-rail{
    position:sticky;
    top:92px;
    display:grid;
    gap:12px;
}
.settings-account-card,
.settings-section-nav,
.settings-panel-v22{
    border:1px solid var(--border);
    background:var(--surface);
    box-shadow:var(--shadow-sm);
}
.settings-account-card{
    padding:18px;
    border-radius:18px;
    display:grid;
    justify-items:center;
    text-align:center;
    gap:9px;
}
.settings-account-avatar{
    width:70px;height:70px;border-radius:50%;overflow:hidden;
    display:grid;place-items:center;
    background:var(--accent-soft);color:var(--accent);
    font-size:1.25rem;font-weight:800;
    border:3px solid color-mix(in srgb,var(--accent) 18%,var(--surface));
}
.settings-account-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.settings-account-copy{min-width:0;display:grid;gap:2px}
.settings-account-copy strong{font-size:.96rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:205px}
.settings-account-copy small{font-size:.74rem;color:var(--muted)}
.settings-account-status,
.settings-detail-status{
    display:inline-flex;align-items:center;gap:6px;
    font-size:.71rem;font-weight:700;color:var(--success);
}
.settings-account-status i,
.settings-detail-status i{width:6px;height:6px;border-radius:50%;background:var(--success)}
.settings-view-profile{width:100%;justify-content:center;margin-top:3px}

.settings-section-nav{
    border-radius:16px;
    padding:6px;
    display:grid;
    gap:2px;
}
.settings-section-nav>a{
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    gap:9px;
    align-items:center;
    min-height:48px;
    padding:7px 9px;
    border-radius:10px;
    color:var(--text);
    text-decoration:none;
    border:1px solid transparent;
}
.settings-section-nav>a:hover,
.settings-section-nav>a.is-active{
    background:color-mix(in srgb,var(--accent) 6%,var(--surface));
    border-color:color-mix(in srgb,var(--accent) 18%,transparent);
}
.settings-section-nav>a>svg{width:16px;height:16px;color:var(--muted);justify-self:center}
.settings-section-nav>a.is-active>svg{color:var(--accent)}
.settings-section-nav span{display:grid;gap:1px;min-width:0}
.settings-section-nav strong{font-size:.78rem}
.settings-section-nav small{font-size:.66rem;color:var(--muted)}

.settings-content-stack{display:grid;gap:14px;min-width:0}
.settings-panel-v22{
    border-radius:18px;
    padding:20px;
    scroll-margin-top:92px;
}
.settings-panel-head{
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    padding-bottom:16px;
    border-bottom:1px solid var(--border);
}
.settings-panel-icon{
    width:38px;height:38px;display:grid;place-items:center;border-radius:11px;
    color:var(--accent);background:var(--accent-soft);
}
.settings-panel-icon svg{width:18px;height:18px}
.settings-panel-head h2{margin:0 0 2px;font-size:1rem}
.settings-panel-head p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.4}
.settings-panel-state{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:26px;padding:0 9px;border-radius:999px;
    background:var(--surface-2);color:var(--muted);
    font-size:.68rem;font-weight:700;white-space:nowrap;
}
.settings-panel-state.is-ready{background:var(--success-soft);color:var(--success)}
.settings-edit-profile-link{font-size:.76rem;font-weight:700;color:var(--accent);text-decoration:none}

.theme-options-v22{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:16px;
}
.theme-choice-v22{
    position:relative;
    min-width:0;
    display:grid;
    grid-template-columns:54px minmax(0,1fr) 22px;
    align-items:center;
    gap:10px;
    min-height:72px;
    padding:10px;
    text-align:left;
    border:1px solid var(--border);
    border-radius:13px;
    background:var(--surface);
    color:var(--text);
    cursor:pointer;
}
.theme-choice-v22:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
.theme-choice-v22.selected{
    border-color:var(--accent);
    background:color-mix(in srgb,var(--accent) 5%,var(--surface));
    box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 10%,transparent);
}
.theme-choice-v22 .theme-preview{width:54px;height:42px;border-radius:8px;margin:0}
.theme-choice-copy{display:grid;gap:2px;min-width:0}
.theme-choice-copy strong{font-size:.82rem}
.theme-choice-copy small{font-size:.68rem;color:var(--muted)}
.theme-choice-check{
    width:20px;height:20px;display:grid;place-items:center;border-radius:50%;
    background:var(--surface-2);color:transparent;font-size:.7rem;font-weight:800;
}
.theme-choice-v22.selected .theme-choice-check{background:var(--accent);color:#fff}

.settings-action-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:18px;
    align-items:center;
    padding:17px 0;
}
.settings-action-copy{display:grid;gap:4px;min-width:0}
.settings-action-copy strong{font-size:.86rem}
.settings-action-copy small{font-size:.75rem;color:var(--muted);line-height:1.45}
.settings-action-copy .config-note{margin:4px 0 0;font-size:.7rem}
.settings-inline-link-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    border-top:1px solid var(--border);
    padding-top:14px;
}
.settings-inline-link-row>span{display:flex;align-items:center;gap:10px;min-width:0}
.settings-inline-link-row>span>svg{width:17px;height:17px;color:var(--accent);flex:0 0 17px}
.settings-inline-link-row>span>span{display:grid;gap:2px}
.settings-inline-link-row strong{font-size:.8rem}
.settings-inline-link-row small{font-size:.68rem;color:var(--muted)}

.settings-security-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    padding:16px 0;
}
.settings-security-grid article{
    display:flex;align-items:center;gap:10px;
    min-width:0;padding:12px;
    border:1px solid var(--border);border-radius:12px;background:var(--surface-2);
}
.settings-security-grid article>span{
    width:31px;height:31px;display:grid;place-items:center;flex:0 0 31px;
    border-radius:9px;background:var(--surface);color:var(--accent);
}
.settings-security-grid article>span svg{width:15px;height:15px}
.settings-security-grid article>div{min-width:0;display:grid;gap:2px}
.settings-security-grid small{font-size:.65rem;color:var(--muted)}
.settings-security-grid strong{font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.settings-panel-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:2px}

.settings-account-details-v22{
    margin:0;
    padding-top:5px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.settings-account-details-v22>div{
    display:grid;
    grid-template-columns:125px minmax(0,1fr);
    gap:12px;
    align-items:center;
    min-height:48px;
    border-bottom:1px solid var(--border);
    padding:0 6px;
}
.settings-account-details-v22>div:nth-last-child(-n+2){border-bottom:0}
.settings-account-details-v22 dt{font-size:.7rem;color:var(--muted)}
.settings-account-details-v22 dd{margin:0;font-size:.78rem;font-weight:600;min-width:0;overflow-wrap:anywhere}

@media(max-width:980px){
    .profile-command-bar,.profile-overview-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
    .profile-overview-item:nth-child(2){border-right:0}
    .profile-overview-item:nth-child(-n+2){border-bottom:1px solid var(--border)}
    .account-settings-v22{grid-template-columns:210px minmax(0,1fr)}
    .theme-options-v22,.settings-security-grid{grid-template-columns:1fr}
}

@media(max-width:760px){
    .profile-page-container{gap:14px;margin-bottom:22px}
    .profile-command-bar{grid-template-columns:1fr 1fr;gap:8px}
    .profile-command-item{padding:10px}
    .profile-command-item small{display:none}
    .profile-overview-strip{grid-template-columns:1fr 1fr}
    .profile-overview-item{padding:11px 12px}
    .profile-overview-item strong{font-size:.76rem}

    .account-settings-v22{display:block;margin-bottom:22px}
    .settings-account-rail{position:static;display:block;margin-bottom:12px}
    .settings-account-card{
        grid-template-columns:52px minmax(0,1fr) auto;
        justify-items:stretch;text-align:left;padding:12px 14px;gap:10px;
    }
    .settings-account-avatar{width:52px;height:52px;grid-row:1 / span 2}
    .settings-account-copy{align-self:end}
    .settings-account-copy strong{max-width:none}
    .settings-account-status{align-self:start}
    .settings-view-profile{grid-column:2 / -1;width:max-content;margin:0;padding-inline:10px;min-height:32px}
    .settings-section-nav{
        margin-top:9px;
        display:flex;
        gap:5px;
        overflow-x:auto;
        scrollbar-width:none;
        padding:5px;
    }
    .settings-section-nav::-webkit-scrollbar{display:none}
    .settings-section-nav>a{grid-template-columns:22px auto;min-width:max-content;min-height:38px;padding:5px 9px}
    .settings-section-nav small{display:none}
    .settings-panel-v22{padding:14px;border-radius:15px}
    .settings-panel-head{grid-template-columns:34px minmax(0,1fr) auto;gap:9px;padding-bottom:12px}
    .settings-panel-icon{width:34px;height:34px}
    .settings-panel-head p{font-size:.7rem}
    .theme-options-v22{grid-template-columns:1fr;margin-top:12px}
    .theme-choice-v22{min-height:62px;grid-template-columns:48px minmax(0,1fr) 20px}
    .theme-choice-v22 .theme-preview{width:48px;height:36px}
    .settings-action-row{grid-template-columns:1fr;gap:10px;padding:13px 0}
    .settings-action-row .btn{width:100%;justify-content:center}
    .settings-inline-link-row{align-items:flex-start;flex-direction:column}
    .settings-inline-link-row .btn{width:100%;justify-content:center}
    .settings-security-grid{padding:12px 0}
    .settings-account-details-v22{grid-template-columns:1fr}
    .settings-account-details-v22>div{grid-template-columns:105px minmax(0,1fr)}
    .settings-account-details-v22>div:nth-last-child(-n+2){border-bottom:1px solid var(--border)}
    .settings-account-details-v22>div:last-child{border-bottom:0}
}

@media(max-width:430px){
    .profile-command-bar{grid-template-columns:1fr}
    .profile-overview-strip{grid-template-columns:1fr}
    .profile-overview-item{border-right:0!important;border-bottom:1px solid var(--border)!important}
    .profile-overview-item:last-child{border-bottom:0!important}
    .settings-panel-head{grid-template-columns:34px minmax(0,1fr)}
    .settings-panel-head>.settings-panel-state,
    .settings-panel-head>.settings-edit-profile-link{grid-column:2;justify-self:start}
    .settings-account-card{grid-template-columns:48px minmax(0,1fr)}
    .settings-account-status{grid-column:2}
    .settings-view-profile{grid-column:2}
}


/* =====================================================================
   LEARNING TOOLS V23
   ===================================================================== */
.learning-tools-v23{display:grid;gap:18px}
.learning-hub-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:8px 2px 0}
.learning-hub-hero h1{margin:7px 0 6px;font-size:clamp(1.8rem,2.4vw,2.55rem);letter-spacing:-.04em}
.learning-hub-hero p{margin:0;max-width:700px;color:var(--muted);line-height:1.6}
.learning-hub-eyebrow{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.learning-hub-eyebrow .ui-icon{width:16px;height:16px}
.learning-hub-hero-actions{display:flex;gap:9px;flex-wrap:wrap}
.learning-hub-hero-actions .btn{display:inline-flex;align-items:center;gap:7px}
.learning-hub-hero-actions .ui-icon{width:17px;height:17px}

.learning-hub-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.learning-hub-summary article{display:flex;align-items:center;gap:12px;min-height:82px;padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}
.learning-hub-summary article>span{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent)}
.learning-hub-summary .ui-icon{width:20px;height:20px}
.learning-hub-summary strong{display:block;font-size:1.45rem;line-height:1}
.learning-hub-summary small{display:block;margin-top:5px;color:var(--muted);font-weight:650}

.learning-hub-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.learning-hub-shortcuts>a{display:grid;grid-template-columns:40px 1fr 18px;grid-template-rows:auto auto;column-gap:11px;align-items:center;padding:13px 14px;border:1px solid var(--border);border-radius:15px;background:var(--surface);color:var(--text);text-decoration:none;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.learning-hub-shortcuts>a:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 34%,var(--border));box-shadow:var(--shadow-sm)}
.learning-hub-shortcuts>a>span{grid-row:1/3;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--surface-soft);color:var(--accent)}
.learning-hub-shortcuts strong{font-size:.86rem}
.learning-hub-shortcuts small{color:var(--muted);font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.learning-hub-shortcuts>a>.ui-icon:last-child{grid-column:3;grid-row:1/3;width:16px;height:16px;color:var(--muted)}

.learning-hub-workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:14px;align-items:start}
.learning-hub-main{min-width:0;border:1px solid var(--border);border-radius:18px;background:var(--surface);padding:14px}
.learning-hub-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:9px}
.learning-hub-search{height:42px;display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:center;padding:0 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}
.learning-hub-search:focus-within{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}
.learning-hub-search .ui-icon{width:17px;height:17px;color:var(--muted)}
.learning-hub-search input{min-width:0;border:0;outline:0;background:transparent;color:var(--text)}
.learning-hub-toolbar select{height:42px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);padding:0 11px}

.learning-hub-filters{display:flex;gap:5px;overflow-x:auto;margin:11px 0 6px;padding-bottom:2px;scrollbar-width:none}
.learning-hub-filters::-webkit-scrollbar{display:none}
.learning-hub-filters button{flex:0 0 auto;display:flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:.75rem;font-weight:750;cursor:pointer}
.learning-hub-filters button b{min-width:20px;height:20px;display:grid;place-items:center;border-radius:999px;background:var(--surface-soft);font-size:.68rem}
.learning-hub-filters button.active{background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent)}
.learning-hub-result-meta{text-align:right;color:var(--muted);font-size:.72rem;margin:0 3px 8px}

.learning-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.learning-tool-card{position:relative;display:flex;flex-direction:column;min-height:224px;padding:13px;border:1px solid var(--border);border-radius:15px;background:var(--surface);overflow:hidden}
.learning-tool-card[hidden]{display:none!important}
.learning-tool-card.is-saved{border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
.learning-tool-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.learning-tool-type{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--surface-soft);color:var(--accent)}
.learning-tool-type .ui-icon{width:19px;height:19px}
.learning-bookmark-btn{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer}
.learning-bookmark-btn:hover,.learning-bookmark-btn.active{background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent)}
.learning-bookmark-btn .ui-icon{width:18px;height:18px}
.learning-tool-course{margin-top:11px;color:var(--accent);font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.055em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.learning-tool-card h2{margin:5px 0 5px;font-size:.95rem;line-height:1.25}
.learning-tool-card p{margin:0;color:var(--muted);font-size:.75rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.learning-tool-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.learning-tool-meta span{display:inline-flex;align-items:center;gap:3px;padding:3px 6px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.64rem;font-weight:700}
.learning-tool-meta .is-complete{color:#16855b;background:color-mix(in srgb,#22c55e 10%,var(--surface))}
.learning-tool-meta .ui-icon{width:12px;height:12px}
.learning-tool-open{margin-top:auto;padding-top:11px;display:flex;align-items:center;justify-content:space-between;gap:7px;color:var(--accent);font-size:.75rem;font-weight:800;text-decoration:none}
.learning-tool-open .ui-icon{width:15px;height:15px}
.learning-hub-empty{padding:42px 18px;text-align:center;color:var(--muted)}
.learning-hub-empty>span{width:48px;height:48px;margin:auto;display:grid;place-items:center;border-radius:15px;background:var(--surface-soft);color:var(--accent)}
.learning-hub-empty h2{color:var(--text);margin:10px 0 4px;font-size:1rem}
.learning-hub-empty p{margin:0;font-size:.8rem}

.learning-hub-side{display:grid;gap:11px;position:sticky;top:92px}
.learning-hub-progress-card,.learning-hub-recent{border:1px solid var(--border);border-radius:17px;background:var(--surface);padding:14px}
.learning-hub-side-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.learning-hub-side-title small{display:block;color:var(--muted);font-size:.66rem;font-weight:750;text-transform:uppercase;letter-spacing:.06em}
.learning-hub-side-title h2{margin:3px 0 0;font-size:.94rem}
.learning-hub-side-title>span{min-width:34px;height:28px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent);font-size:.76rem;font-weight:800}
.learning-hub-progress-line{height:7px;margin:13px 0 8px;border-radius:999px;background:var(--surface-soft);overflow:hidden}
.learning-hub-progress-line span{display:block;width:var(--learning-progress,0%);height:100%;border-radius:inherit;background:var(--accent)}
.learning-hub-progress-card p{margin:0 0 9px;color:var(--muted);font-size:.73rem;line-height:1.45}
.learning-hub-progress-card>a{display:flex;align-items:center;justify-content:space-between;color:var(--accent);text-decoration:none;font-size:.74rem;font-weight:800}
.learning-hub-progress-card>a .ui-icon{width:14px;height:14px}
.learning-recent-list{display:grid;margin-top:9px}
.learning-recent-list>a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 0;border-top:1px solid var(--border);color:var(--text);text-decoration:none}
.learning-recent-list>a:first-child{border-top:0}
.learning-recent-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--surface-soft);color:var(--accent)}
.learning-recent-icon .ui-icon{width:16px;height:16px}
.learning-recent-list strong{display:block;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.76rem}
.learning-recent-list small{display:block;max-width:170px;margin-top:2px;color:var(--muted);font-size:.65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.learning-recent-list time{color:var(--muted);font-size:.63rem}
.learning-recent-empty{padding:18px 4px 4px;text-align:center;color:var(--muted)}
.learning-recent-empty span{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--surface-soft);color:var(--accent)}
.learning-recent-empty p{font-size:.72rem;line-height:1.45}

@media(max-width:1180px){
    .learning-hub-workspace{grid-template-columns:1fr}
    .learning-hub-side{position:static;grid-template-columns:1fr 1fr}
    .learning-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:850px){
    .learning-hub-hero{align-items:flex-start;flex-direction:column}
    .learning-hub-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
    .learning-hub-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
    .learning-tools-v23{gap:12px}
    .learning-hub-hero{padding-top:0;gap:12px}
    .learning-hub-hero h1{font-size:1.55rem}
    .learning-hub-hero-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
    .learning-hub-hero-actions .btn{justify-content:center;padding-inline:8px}
    .learning-hub-summary{gap:7px}
    .learning-hub-summary article{min-height:68px;padding:10px 11px;border-radius:13px}
    .learning-hub-summary article>span{width:35px;height:35px;border-radius:10px}
    .learning-hub-summary strong{font-size:1.15rem}
    .learning-hub-summary small{font-size:.65rem}
    .learning-hub-shortcuts{grid-template-columns:1fr;gap:7px}
    .learning-hub-shortcuts>a{padding:10px 11px}
    .learning-hub-main{padding:9px;border-radius:14px}
    .learning-hub-toolbar{grid-template-columns:1fr}
    .learning-hub-grid{grid-template-columns:1fr;gap:8px}
    .learning-tool-card{min-height:188px;padding:11px;border-radius:13px}
    .learning-hub-side{grid-template-columns:1fr}
    .learning-hub-result-meta{text-align:left}
}


/* =====================================================================
   GLOBAL SEARCH V25 — ROLE-AWARE INSTANT SUGGESTIONS
   ===================================================================== */
.global-search-v25{border-radius:13px!important;overflow:visible!important;isolation:isolate}
.global-search-v25.is-open{z-index:180!important;border-color:color-mix(in srgb,var(--accent) 54%,var(--border))!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent),0 10px 30px rgba(18,13,28,.08)!important;transform:none!important}
.global-search-v25 .global-search-clear{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.global-search-v25 .global-search-clear[hidden]{display:none!important}
.global-search-v25 .global-search-clear:hover{background:var(--surface-2);color:var(--text)}
.global-search-v25 .global-search-clear .ui-icon{width:15px;height:15px}
.global-search-v25:focus-within>kbd,.global-search-v25.is-open>kbd{opacity:0!important;pointer-events:none}

.global-search-panel{position:absolute;top:calc(100% + 9px);left:0;right:0;z-index:181;padding:10px;border:1px solid color-mix(in srgb,var(--border) 92%,transparent);border-radius:16px;background:var(--surface);box-shadow:0 18px 48px rgba(18,13,28,.16);color:var(--text);overflow:hidden}
.global-search-panel[hidden]{display:none!important}
.global-search-filter-row{display:flex;gap:5px;overflow-x:auto;padding:1px 1px 8px;scrollbar-width:none}
.global-search-filter-row::-webkit-scrollbar{display:none}
.global-search-filter-row button{height:30px;display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;padding:0 9px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:.69rem;font-weight:750;cursor:pointer}
.global-search-filter-row button b{min-width:18px;height:18px;display:grid;place-items:center;padding:0 4px;border-radius:999px;background:var(--surface-2);font-size:.61rem;color:inherit}
.global-search-filter-row button:hover{background:var(--surface-2);color:var(--text)}
.global-search-filter-row button.active{background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent)}
.global-search-filter-row button.active b{background:color-mix(in srgb,var(--accent) 13%,var(--surface));color:var(--accent)}
.global-search-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 6px 7px;border-top:1px solid var(--border);color:var(--muted);font-size:.66rem;font-weight:700}
.global-search-panel-head small{font-size:.61rem;font-weight:650;color:var(--muted)}
.global-search-results{display:grid;max-height:390px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.global-search-result{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:55px;padding:7px 8px;border-radius:10px;color:var(--text);text-decoration:none;outline:0}
.global-search-result:hover,.global-search-result.is-active{background:color-mix(in srgb,var(--accent) 7%,var(--surface-2))}
.global-search-result.is-active{box-shadow:inset 3px 0 var(--accent)}
.global-search-result-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--surface-2);color:var(--accent)}
.global-search-result-icon svg{width:17px;height:17px}
.global-search-result-icon.is-courses{color:#3b62c4;background:color-mix(in srgb,#3b82f6 10%,var(--surface))}
.global-search-result-icon.is-learning{color:#8a4aa0;background:color-mix(in srgb,#a855f7 9%,var(--surface))}
.global-search-result-icon.is-files{color:#316a9f;background:color-mix(in srgb,#0ea5e9 9%,var(--surface))}
.global-search-result-icon.is-assignments{color:#a15d14;background:color-mix(in srgb,#f59e0b 10%,var(--surface))}
.global-search-result-icon.is-quizzes{color:#16805b;background:color-mix(in srgb,#22c55e 10%,var(--surface))}
.global-search-result-copy{min-width:0;display:grid;gap:2px}
.global-search-result-copy strong{font-size:.76rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.global-search-result-copy small{font-size:.65rem;line-height:1.25;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.global-search-result-type{max-width:94px;padding:4px 7px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:.59rem;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.global-search-state{min-height:108px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--muted);text-align:center}
.global-search-state[hidden]{display:none!important}
.global-search-state>.ui-icon{width:22px;height:22px;color:var(--accent)}
.global-search-state strong{font-size:.73rem;color:var(--text)}
.global-search-state small{font-size:.65rem}
.global-search-spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:global-search-spin .7s linear infinite}
@keyframes global-search-spin{to{transform:rotate(360deg)}}
.global-search-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 5px 1px;border-top:1px solid var(--border);color:var(--muted);font-size:.58rem}
.global-search-footer span{display:flex;align-items:center;gap:3px}
.global-search-footer kbd{display:inline-grid!important;place-items:center!important;min-width:20px!important;height:20px!important;padding:0 4px!important;border:1px solid var(--border)!important;border-radius:5px!important;background:var(--surface-2)!important;color:var(--muted)!important;font-size:.56rem!important;opacity:1!important}
.global-search-v25:focus-within .global-search-footer kbd{opacity:1!important;pointer-events:auto!important}

.search-page-v25{max-width:980px;margin:0 auto;display:grid;gap:15px}
.search-page-head{padding:4px 2px 2px}
.search-page-eyebrow{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.search-page-eyebrow .ui-icon{width:15px;height:15px}
.search-page-head h1{margin:6px 0 5px;font-size:clamp(1.75rem,3vw,2.4rem);letter-spacing:-.04em}
.search-page-head p{margin:0;color:var(--muted)}
.search-page-bar{display:grid;grid-template-columns:minmax(0,1fr) 180px auto;gap:8px;padding:9px;border:1px solid var(--border);border-radius:15px;background:var(--surface)}
.search-page-bar label{height:42px;display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:center;padding:0 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft)}
.search-page-bar label .ui-icon{width:17px;height:17px;color:var(--muted)}
.search-page-bar input{min-width:0;border:0;outline:0;background:transparent;color:var(--text)}
.search-page-bar select{height:42px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);padding:0 10px}
.search-page-meta{color:var(--muted);font-size:.76rem}
.search-page-meta strong{color:var(--text)}
.search-page-results{display:grid;gap:7px}
.search-page-result{display:grid;grid-template-columns:42px minmax(0,1fr) 18px;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--border);border-radius:13px;background:var(--surface);color:var(--text);text-decoration:none}
.search-page-result:hover{border-color:color-mix(in srgb,var(--accent) 28%,var(--border));background:color-mix(in srgb,var(--accent) 3%,var(--surface))}
.search-page-result-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:var(--surface-2);color:var(--accent)}
.search-page-result-icon .ui-icon{width:19px;height:19px}
.search-page-result-copy{min-width:0;display:grid;gap:2px}
.search-page-result-copy small{color:var(--accent);font-size:.61rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.search-page-result-copy strong{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-page-result-copy span{color:var(--muted);font-size:.69rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-page-result>.ui-icon{width:16px;height:16px;color:var(--muted)}
.search-page-empty{min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted)}
.search-page-empty>.ui-icon{width:30px;height:30px;color:var(--accent)}
.search-page-empty h2{margin:9px 0 4px;color:var(--text);font-size:1rem}
.search-page-empty p{margin:0;font-size:.76rem}

@media(max-width:860px){
    .global-search-panel{position:fixed;top:66px;left:8px;right:8px;width:auto;max-height:calc(100dvh - 78px);padding:9px;border-radius:14px}
    .global-search-results{max-height:calc(100dvh - 210px)}
    .global-search-result{grid-template-columns:34px minmax(0,1fr) auto;min-height:52px;padding:7px}
    .global-search-result-icon{width:34px;height:34px}
    .global-search-result-type{max-width:76px}
    .global-search-footer{display:none}
}
@media(max-width:620px){
    .global-search-v25{padding-inline:10px!important;gap:7px!important}
    .global-search-v25 input{font-size:.76rem!important}
    .global-search-filter-row{padding-bottom:7px}
    .global-search-filter-row button{height:29px;font-size:.66rem}
    .global-search-panel-head small{display:none}
    .global-search-result-type{display:none}
    .global-search-result{grid-template-columns:34px minmax(0,1fr)}
    .search-page-bar{grid-template-columns:1fr;padding:8px}
    .search-page-bar .btn{width:100%}
    .search-page-result{grid-template-columns:38px minmax(0,1fr) 16px;padding:9px}
    .search-page-result-icon{width:38px;height:38px}
}


/* =====================================================================
   LECTURER DASHBOARD V26
   Clean, task-first lecturer workspace
   ===================================================================== */
.lecturer-dashboard-v26{display:grid;gap:14px}
.lecturer-home-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:4px 2px 2px}
.lecturer-home-header h1{margin:5px 0 5px;font-size:clamp(1.65rem,2.25vw,2.25rem);letter-spacing:-.035em}
.lecturer-home-header p{margin:0;color:var(--muted);font-size:.86rem}
.lecturer-home-header .btn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.lecturer-home-header .btn .ui-icon{width:16px;height:16px}

.lecturer-summary-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow-sm)}
.lecturer-summary-strip>a{min-width:0;display:flex;align-items:center;gap:11px;padding:14px 16px;color:var(--text);text-decoration:none;border-left:1px solid var(--border);transition:background .14s ease}
.lecturer-summary-strip>a:first-child{border-left:0}
.lecturer-summary-strip>a:hover{background:var(--surface-soft)}
.lecturer-summary-strip>a>span{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}
.lecturer-summary-strip>a.has-attention>span{background:color-mix(in srgb,#f59e0b 12%,var(--surface));color:#b76b00}
.lecturer-summary-strip .ui-icon{width:18px;height:18px}
.lecturer-summary-strip strong{display:block;font-size:1.18rem;line-height:1}
.lecturer-summary-strip small{display:block;margin-top:4px;color:var(--muted);font-size:.68rem;font-weight:650}

.lecturer-quick-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border:1px solid var(--border);border-radius:15px;background:var(--surface)}
.lecturer-quick-context{display:flex;align-items:center;gap:12px;min-width:0}
.lecturer-quick-context>div{min-width:92px}
.lecturer-quick-context small{display:block;color:var(--muted);font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.065em}
.lecturer-quick-context strong{display:block;margin-top:2px;font-size:.78rem}
.lecturer-quick-context label{min-width:0}
.lecturer-quick-context select{height:36px;max-width:300px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:var(--text);padding:0 28px 0 10px;font-size:.73rem}
.lecturer-quick-actions nav{display:flex;align-items:center;gap:4px}
.lecturer-quick-actions nav a{display:flex;align-items:center;gap:6px;height:36px;padding:0 9px;border-radius:9px;color:var(--muted);text-decoration:none;font-size:.7rem;font-weight:750;white-space:nowrap}
.lecturer-quick-actions nav a:hover{background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}
.lecturer-quick-actions nav span{display:grid;place-items:center}
.lecturer-quick-actions nav .ui-icon{width:15px;height:15px}

.lecturer-work-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.78fr);gap:12px;align-items:start}
.lecturer-work-main,.lecturer-work-side{display:grid;gap:12px}
.lecturer-panel{min-width:0;padding:13px 14px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.lecturer-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:9px}
.lecturer-panel-head small{display:block;color:var(--muted);font-size:.61rem;font-weight:800;text-transform:uppercase;letter-spacing:.065em}
.lecturer-panel-head h2{margin:3px 0 0;font-size:.92rem}
.lecturer-panel-head>a{color:var(--accent);text-decoration:none;font-size:.68rem;font-weight:800}

.lecturer-timeline{display:grid}
.lecturer-timeline>a{display:grid;grid-template-columns:66px 12px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:53px;padding:6px 0;color:var(--text);text-decoration:none;border-top:1px solid var(--border)}
.lecturer-timeline>a:first-child{border-top:0}
.lecturer-timeline>a.is-past{opacity:.64}
.lecturer-timeline time{font-size:.68rem;color:var(--muted);font-weight:700}
.lecturer-timeline-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent)}
.lecturer-timeline strong{display:block;font-size:.76rem}
.lecturer-timeline small{display:block;margin-top:2px;color:var(--muted);font-size:.65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lecturer-timeline>a>b{padding:4px 7px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.6rem}

.lecturer-submission-list{display:grid}
.lecturer-submission-list>a{display:grid;grid-template-columns:34px minmax(0,1fr) auto 42px;gap:9px;align-items:center;min-height:52px;padding:7px 0;border-top:1px solid var(--border);color:var(--text);text-decoration:none}
.lecturer-submission-list>a:first-child{border-top:0}
.lecturer-avatar-mini{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent);font-size:.7rem;font-weight:850}
.lecturer-submission-list strong{display:block;font-size:.74rem}
.lecturer-submission-list small{display:block;margin-top:2px;color:var(--muted);font-size:.63rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lecturer-submission-state{padding:4px 7px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.59rem;font-weight:800;white-space:nowrap}
.lecturer-submission-state.needs-grade{background:color-mix(in srgb,#f59e0b 10%,var(--surface));color:#a96200}
.lecturer-submission-state.is-reviewed{background:color-mix(in srgb,#22c55e 9%,var(--surface));color:#16855b}
.lecturer-submission-list time{color:var(--muted);font-size:.61rem;text-align:right}

.lecturer-upcoming-list,.lecturer-activity-list{display:grid}
.lecturer-upcoming-list>a,.lecturer-activity-list>a{display:grid;align-items:center;gap:8px;min-height:48px;padding:7px 0;border-top:1px solid var(--border);color:var(--text);text-decoration:none}
.lecturer-upcoming-list>a:first-child,.lecturer-activity-list>a:first-child{border-top:0}
.lecturer-upcoming-list>a{grid-template-columns:32px minmax(0,1fr) auto}
.lecturer-upcoming-list>a>span:first-child,.lecturer-activity-list>a>span:first-child{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--accent)}
.lecturer-upcoming-list .ui-icon,.lecturer-activity-list .ui-icon{width:15px;height:15px}
.lecturer-upcoming-list strong,.lecturer-activity-list strong{display:block;font-size:.7rem}
.lecturer-upcoming-list small,.lecturer-activity-list small{display:block;margin-top:2px;color:var(--muted);font-size:.61rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lecturer-due{text-align:right}
.lecturer-due b{display:block;font-size:.66rem}
.lecturer-due small{font-size:.56rem}
.lecturer-activity-list>a{grid-template-columns:32px minmax(0,1fr) 34px}
.lecturer-activity-list time{color:var(--muted);font-size:.58rem;text-align:right}

.lecturer-calm-empty{display:flex;align-items:center;gap:10px;min-height:68px;padding:8px 2px;color:var(--muted)}
.lecturer-calm-empty>span{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:11px;background:var(--surface-soft);color:var(--accent)}
.lecturer-calm-empty .ui-icon{width:18px;height:18px}
.lecturer-calm-empty strong{display:block;color:var(--text);font-size:.75rem}
.lecturer-calm-empty small{display:block;margin-top:2px;font-size:.64rem}
.lecturer-calm-empty>a{margin-left:auto;color:var(--accent);text-decoration:none;font-size:.65rem;font-weight:800}
.lecturer-calm-empty.compact{min-height:58px}

.lecturer-courses-section{padding:14px;border:1px solid var(--border);border-radius:17px;background:var(--surface)}
.lecturer-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:11px}
.lecturer-section-head small{display:block;color:var(--muted);font-size:.61rem;font-weight:800;text-transform:uppercase;letter-spacing:.065em}
.lecturer-section-head h2{margin:3px 0 2px;font-size:.98rem}
.lecturer-section-head p{margin:0;color:var(--muted);font-size:.67rem}
.lecturer-section-head>a{display:flex;align-items:center;gap:5px;color:var(--accent);font-size:.66rem;font-weight:800;text-decoration:none}
.lecturer-section-head>a .ui-icon{width:14px;height:14px}
.lecturer-course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.lecturer-course-card{padding:11px;border:1px solid var(--border);border-radius:13px;background:var(--surface-soft)}
.lecturer-course-card-head{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;align-items:center}
.lecturer-course-card-head>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--surface);color:var(--accent)}
.lecturer-course-card-head .ui-icon{width:16px;height:16px}
.lecturer-course-card-head small{display:block;color:var(--muted);font-size:.57rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lecturer-course-card-head h3{margin:2px 0 0;font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lecturer-course-card-head>b{padding:3px 6px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:.53rem;text-transform:capitalize}
.lecturer-course-card-head>b.status-active{color:#16855b}
.lecturer-course-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:11px 0 9px}
.lecturer-course-metrics>span{min-width:0;padding:7px 5px;border-radius:8px;background:var(--surface)}
.lecturer-course-metrics small{display:block;color:var(--muted);font-size:.52rem;white-space:nowrap}
.lecturer-course-metrics strong{display:block;margin-top:2px;font-size:.7rem}
.lecturer-course-metrics strong.attention{color:#b76b00}
.lecturer-course-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px;border-top:1px solid var(--border)}
.lecturer-course-card-foot span{min-width:0}
.lecturer-course-card-foot small,.lecturer-course-card-foot b{font-size:.57rem;color:var(--muted)}
.lecturer-course-card-foot b{color:#a96200}
.lecturer-course-card-foot>a{display:flex;align-items:center;gap:4px;color:var(--accent);font-size:.6rem;font-weight:800;text-decoration:none}
.lecturer-course-card-foot>a .ui-icon{width:12px;height:12px}

.lecturer-announcement-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;border:1px solid var(--border);border-radius:13px;background:var(--surface)}
.lecturer-announcement-strip>div{display:flex;align-items:center;gap:9px;min-width:0}
.lecturer-announcement-strip>div>span{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}
.lecturer-announcement-strip .ui-icon{width:15px;height:15px}
.lecturer-announcement-strip small{display:block;color:var(--muted);font-size:.57rem}
.lecturer-announcement-strip strong{display:block;margin-top:1px;font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lecturer-announcement-strip>a{flex:0 0 auto;color:var(--accent);font-size:.62rem;font-weight:800;text-decoration:none}

@media(max-width:1120px){
    .lecturer-work-grid{grid-template-columns:1fr}
    .lecturer-work-side{grid-template-columns:1fr 1fr}
    .lecturer-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .lecturer-quick-actions{align-items:flex-start;flex-direction:column}
    .lecturer-quick-actions nav{width:100%;overflow-x:auto;scrollbar-width:none}
    .lecturer-quick-actions nav::-webkit-scrollbar{display:none}
}
@media(max-width:760px){
    .lecturer-home-header{align-items:flex-start;flex-direction:column;gap:11px}
    .lecturer-home-header .btn{width:100%;justify-content:center}
    .lecturer-summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
    .lecturer-summary-strip>a:nth-child(3){border-left:0;border-top:1px solid var(--border)}
    .lecturer-summary-strip>a:nth-child(4){border-top:1px solid var(--border)}
    .lecturer-quick-context{width:100%;align-items:flex-start;flex-direction:column;gap:6px}
    .lecturer-quick-context>div{min-width:0}
    .lecturer-quick-context label,.lecturer-quick-context select{width:100%;max-width:none}
    .lecturer-work-side{grid-template-columns:1fr}
    .lecturer-course-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
    .lecturer-dashboard-v26{gap:10px}
    .lecturer-summary-strip>a{padding:11px 10px}
    .lecturer-summary-strip>a>span{width:32px;height:32px;flex-basis:32px}
    .lecturer-summary-strip strong{font-size:1rem}
    .lecturer-quick-actions{padding:9px}
    .lecturer-quick-actions nav a{height:34px;padding:0 8px}
    .lecturer-panel{padding:10px;border-radius:13px}
    .lecturer-timeline>a{grid-template-columns:54px 10px minmax(0,1fr)}
    .lecturer-timeline>a>b{display:none}
    .lecturer-submission-list>a{grid-template-columns:32px minmax(0,1fr) auto}
    .lecturer-submission-list time{display:none}
    .lecturer-submission-state{font-size:.54rem}
    .lecturer-courses-section{padding:10px;border-radius:14px}
    .lecturer-section-head{align-items:flex-start;flex-direction:column}
    .lecturer-course-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
    .lecturer-announcement-strip{align-items:flex-start;flex-direction:column}
}

/* =====================================================================
   LECTURER DASHBOARD V27 — APPLE-INSPIRED RICH UI
   Visual polish only. Existing lecturer workflows/data are unchanged.
   ===================================================================== */
.lecturer-dashboard-v26{
    position:relative;
    gap:18px;
    isolation:isolate;
}
.lecturer-dashboard-v26::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:-56px;
    right:-7%;
    width:540px;
    height:360px;
    pointer-events:none;
    border-radius:50%;
    background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 11%,transparent) 0%,transparent 70%);
    filter:blur(18px);
    opacity:.7;
}

/* Hero */
.lecturer-home-header{
    position:relative;
    overflow:hidden;
    align-items:center;
    min-height:144px;
    padding:25px 27px;
    border:1px solid color-mix(in srgb,var(--border) 78%,transparent);
    border-radius:26px;
    background:
        linear-gradient(135deg,color-mix(in srgb,var(--surface) 96%,var(--accent) 4%),color-mix(in srgb,var(--surface) 99%,transparent)),
        var(--surface);
    box-shadow:0 18px 55px rgba(21,26,35,.07),0 2px 8px rgba(21,26,35,.025);
}
.lecturer-home-header::after{
    content:"";
    position:absolute;
    width:310px;
    height:310px;
    right:-105px;
    top:-145px;
    border-radius:50%;
    background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent),transparent 68%);
    pointer-events:none;
}
.lecturer-home-header>div{position:relative;z-index:1;max-width:760px}
.lecturer-home-header .eyebrow{
    display:inline-flex;
    align-items:center;
    width:max-content;
    padding:6px 10px;
    border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border));
    border-radius:999px;
    background:color-mix(in srgb,var(--accent) 7%,var(--surface));
    color:var(--accent);
    font-size:.65rem;
    font-weight:800;
    letter-spacing:.075em;
    text-transform:uppercase;
}
.lecturer-home-header h1{
    margin:13px 0 6px;
    font-size:clamp(2rem,3vw,2.75rem);
    line-height:1.03;
    letter-spacing:-.052em;
}
.lecturer-home-header p{
    max-width:680px;
    font-size:.9rem;
    line-height:1.55;
}
.lecturer-home-header .btn{
    position:relative;
    z-index:1;
    min-height:46px;
    padding:0 18px;
    border-radius:14px;
    box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 23%,transparent);
    transition:transform .18s ease,box-shadow .18s ease;
}
.lecturer-home-header .btn:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 32px color-mix(in srgb,var(--accent) 27%,transparent);
}

/* Metrics — one premium grouped surface */
.lecturer-summary-strip{
    gap:0;
    border-color:color-mix(in srgb,var(--border) 78%,transparent);
    border-radius:20px;
    background:color-mix(in srgb,var(--surface) 96%,transparent);
    box-shadow:0 12px 34px rgba(21,26,35,.045);
    backdrop-filter:blur(18px) saturate(125%);
    -webkit-backdrop-filter:blur(18px) saturate(125%);
}
.lecturer-summary-strip>a{
    min-height:86px;
    padding:17px 19px;
    border-left-color:color-mix(in srgb,var(--border) 68%,transparent);
}
.lecturer-summary-strip>a:hover{background:color-mix(in srgb,var(--accent) 4.5%,var(--surface))}
.lecturer-summary-strip>a>span{
    width:42px;
    height:42px;
    flex-basis:42px;
    border:1px solid color-mix(in srgb,var(--accent) 12%,var(--border));
    border-radius:13px;
    background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 11%,var(--surface)),var(--surface));
    box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 50%,transparent);
}
.lecturer-summary-strip strong{font-size:1.35rem;letter-spacing:-.035em}
.lecturer-summary-strip small{margin-top:5px;font-size:.69rem}

/* Action dock */
.lecturer-quick-actions{
    min-height:68px;
    padding:11px 13px 11px 16px;
    border-color:color-mix(in srgb,var(--border) 76%,transparent);
    border-radius:19px;
    background:color-mix(in srgb,var(--surface) 95%,transparent);
    box-shadow:0 10px 30px rgba(21,26,35,.04);
    backdrop-filter:blur(16px) saturate(120%);
    -webkit-backdrop-filter:blur(16px) saturate(120%);
}
.lecturer-quick-context{gap:15px}
.lecturer-quick-context>div{min-width:98px}
.lecturer-quick-context small{font-size:.6rem}
.lecturer-quick-context strong{font-size:.8rem}
.lecturer-quick-context select{
    height:40px;
    max-width:330px;
    padding-left:12px;
    border-color:color-mix(in srgb,var(--border) 78%,transparent);
    border-radius:12px;
    background:color-mix(in srgb,var(--surface-2) 58%,var(--surface));
    font-weight:650;
}
.lecturer-quick-actions nav{gap:5px}
.lecturer-quick-actions nav a{
    height:40px;
    padding:0 11px;
    border:1px solid transparent;
    border-radius:12px;
    color:var(--text);
    background:transparent;
    transition:background .15s ease,border-color .15s ease,transform .15s ease,color .15s ease;
}
.lecturer-quick-actions nav a:hover{
    transform:translateY(-1px);
    border-color:color-mix(in srgb,var(--accent) 13%,var(--border));
    background:color-mix(in srgb,var(--accent) 6%,var(--surface));
}

/* Work panels */
.lecturer-work-grid{gap:16px;grid-template-columns:minmax(0,1.55fr) minmax(300px,.72fr)}
.lecturer-work-main,.lecturer-work-side{gap:16px}
.lecturer-panel{
    padding:18px 19px;
    border-color:color-mix(in srgb,var(--border) 76%,transparent);
    border-radius:22px;
    background:color-mix(in srgb,var(--surface) 97%,transparent);
    box-shadow:0 12px 38px rgba(21,26,35,.045),0 1px 3px rgba(21,26,35,.025);
}
.lecturer-panel-head{align-items:center;padding-bottom:12px}
.lecturer-panel-head small{font-size:.59rem;letter-spacing:.085em}
.lecturer-panel-head h2{margin-top:4px;font-size:1rem;letter-spacing:-.018em}
.lecturer-panel-head>a{
    padding:6px 9px;
    border-radius:9px;
    background:color-mix(in srgb,var(--accent) 6%,transparent);
    font-size:.65rem;
}
.lecturer-panel-head>a:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}

.lecturer-calm-empty{
    min-height:88px;
    margin-top:2px;
    padding:14px;
    border:1px solid color-mix(in srgb,var(--border) 65%,transparent);
    border-radius:15px;
    background:linear-gradient(145deg,color-mix(in srgb,var(--surface-2) 48%,var(--surface)),var(--surface));
}
.lecturer-calm-empty>span{
    width:42px;
    height:42px;
    flex-basis:42px;
    border:1px solid color-mix(in srgb,var(--accent) 10%,var(--border));
    background:var(--surface);
}
.lecturer-calm-empty strong{font-size:.78rem}
.lecturer-calm-empty small{margin-top:3px;line-height:1.45}
.lecturer-calm-empty>a{
    padding:6px 10px;
    border-radius:9px;
    background:color-mix(in srgb,var(--accent) 7%,transparent);
}

/* Submission & activity rows */
.lecturer-submission-list>a,
.lecturer-upcoming-list>a,
.lecturer-activity-list>a{
    border-top-color:color-mix(in srgb,var(--border) 65%,transparent);
    transition:background .14s ease,transform .14s ease;
}
.lecturer-submission-list>a{min-height:59px;padding:9px 8px;margin:0 -8px;border-radius:12px}
.lecturer-submission-list>a:first-child{border-top:0}
.lecturer-submission-list>a:hover,
.lecturer-upcoming-list>a:hover,
.lecturer-activity-list>a:hover{background:color-mix(in srgb,var(--accent) 4%,var(--surface));transform:translateX(1px)}
.lecturer-avatar-mini{
    width:36px;
    height:36px;
    border:1px solid color-mix(in srgb,var(--accent) 12%,var(--border));
    background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface));
}
.lecturer-submission-list strong,.lecturer-upcoming-list strong,.lecturer-activity-list strong{font-weight:750}
.lecturer-submission-state{padding:5px 8px}
.lecturer-submission-state.needs-grade{box-shadow:inset 0 0 0 1px color-mix(in srgb,#f59e0b 18%,transparent)}
.lecturer-submission-state.is-reviewed{box-shadow:inset 0 0 0 1px color-mix(in srgb,#22c55e 14%,transparent)}

.lecturer-upcoming-list>a,.lecturer-activity-list>a{min-height:54px;padding:8px 6px;margin:0 -6px;border-radius:11px}
.lecturer-upcoming-list>a>span:first-child,.lecturer-activity-list>a>span:first-child{
    width:34px;
    height:34px;
    border:1px solid color-mix(in srgb,var(--accent) 10%,var(--border));
    background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 8%,var(--surface)),var(--surface));
}

/* Course overview — use the full canvas instead of leaving blank space */
.lecturer-courses-section{
    padding:19px;
    border-color:color-mix(in srgb,var(--border) 76%,transparent);
    border-radius:22px;
    background:color-mix(in srgb,var(--surface) 97%,transparent);
    box-shadow:0 12px 38px rgba(21,26,35,.045);
}
.lecturer-section-head{margin-bottom:15px}
.lecturer-section-head h2{font-size:1.05rem;letter-spacing:-.018em}
.lecturer-section-head p{margin-top:3px;font-size:.69rem}
.lecturer-section-head>a{
    padding:7px 10px;
    border-radius:10px;
    background:color-mix(in srgb,var(--accent) 6%,transparent);
}
.lecturer-course-grid{grid-template-columns:1fr;gap:10px}
.lecturer-course-card{
    display:grid;
    grid-template-columns:minmax(260px,1.15fr) minmax(430px,1.85fr);
    grid-template-areas:"head metrics" "foot foot";
    align-items:center;
    gap:14px 24px;
    padding:17px 18px 13px;
    border-color:color-mix(in srgb,var(--border) 72%,transparent);
    border-radius:17px;
    background:linear-gradient(135deg,color-mix(in srgb,var(--surface-2) 42%,var(--surface)),var(--surface));
    box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent);
}
.lecturer-course-card-head{grid-area:head;grid-template-columns:44px minmax(0,1fr) auto;gap:11px}
.lecturer-course-card-head>span{
    width:44px;
    height:44px;
    border:1px solid color-mix(in srgb,var(--accent) 13%,var(--border));
    border-radius:13px;
    background:var(--surface);
    box-shadow:0 5px 16px rgba(21,26,35,.045);
}
.lecturer-course-card-head .ui-icon{width:19px;height:19px}
.lecturer-course-card-head small{font-size:.61rem}
.lecturer-course-card-head h3{margin-top:3px;font-size:.9rem;letter-spacing:-.015em}
.lecturer-course-card-head>b{padding:5px 8px;border:1px solid color-mix(in srgb,var(--border) 72%,transparent);font-size:.56rem}
.lecturer-course-card-head>b.status-active{background:color-mix(in srgb,var(--success) 8%,var(--surface));border-color:color-mix(in srgb,var(--success) 15%,var(--border))}
.lecturer-course-metrics{grid-area:metrics;gap:7px;margin:0}
.lecturer-course-metrics>span{
    padding:10px 9px;
    border:1px solid color-mix(in srgb,var(--border) 62%,transparent);
    border-radius:11px;
    background:color-mix(in srgb,var(--surface) 92%,transparent);
}
.lecturer-course-metrics small{font-size:.56rem}
.lecturer-course-metrics strong{margin-top:4px;font-size:.82rem;letter-spacing:-.02em}
.lecturer-course-card-foot{grid-area:foot;margin-top:0;padding-top:10px;border-top-color:color-mix(in srgb,var(--border) 62%,transparent)}
.lecturer-course-card-foot>a{padding:5px 8px;border-radius:8px;background:color-mix(in srgb,var(--accent) 6%,transparent)}

/* Announcement */
.lecturer-announcement-strip{
    min-height:58px;
    padding:11px 14px;
    border-color:color-mix(in srgb,var(--border) 74%,transparent);
    border-radius:17px;
    background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 4%,var(--surface)),var(--surface));
    box-shadow:0 8px 25px rgba(21,26,35,.035);
}
.lecturer-announcement-strip>div>span{
    width:36px;
    height:36px;
    border:1px solid color-mix(in srgb,var(--accent) 12%,var(--border));
    border-radius:11px;
    background:var(--surface);
}
.lecturer-announcement-strip strong{font-size:.74rem}

/* Dark-theme refinement */
html[data-theme=dark] .lecturer-home-header,
html[data-theme=dark] .lecturer-summary-strip,
html[data-theme=dark] .lecturer-quick-actions,
html[data-theme=dark] .lecturer-panel,
html[data-theme=dark] .lecturer-courses-section,
html[data-theme=dark] .lecturer-announcement-strip{
    box-shadow:0 18px 48px rgba(0,0,0,.24),0 1px 0 rgba(255,255,255,.025) inset;
}
@media(prefers-color-scheme:dark){
    html[data-theme=system] .lecturer-home-header,
    html[data-theme=system] .lecturer-summary-strip,
    html[data-theme=system] .lecturer-quick-actions,
    html[data-theme=system] .lecturer-panel,
    html[data-theme=system] .lecturer-courses-section,
    html[data-theme=system] .lecturer-announcement-strip{
        box-shadow:0 18px 48px rgba(0,0,0,.24),0 1px 0 rgba(255,255,255,.025) inset;
    }
}

@media(max-width:1120px){
    .lecturer-home-header{min-height:132px}
    .lecturer-course-card{grid-template-columns:1fr;grid-template-areas:"head" "metrics" "foot";gap:11px}
}
@media(max-width:760px){
    .lecturer-dashboard-v26{gap:13px}
    .lecturer-home-header{min-height:0;padding:20px;border-radius:21px}
    .lecturer-home-header h1{font-size:1.85rem}
    .lecturer-home-header .btn{width:100%;justify-content:center}
    .lecturer-summary-strip{border-radius:18px}
    .lecturer-summary-strip>a{min-height:76px;padding:13px 14px}
    .lecturer-quick-actions{border-radius:17px}
    .lecturer-panel,.lecturer-courses-section{border-radius:19px}
    .lecturer-course-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:520px){
    .lecturer-home-header{padding:18px 16px}
    .lecturer-home-header .eyebrow{font-size:.58rem}
    .lecturer-home-header h1{font-size:1.6rem}
    .lecturer-home-header p{font-size:.78rem}
    .lecturer-summary-strip>a{min-height:70px;padding:11px 10px}
    .lecturer-summary-strip>a>span{width:35px;height:35px;flex-basis:35px}
    .lecturer-summary-strip strong{font-size:1.08rem}
    .lecturer-quick-actions{padding:10px}
    .lecturer-panel{padding:14px}
    .lecturer-course-card{padding:14px}
    .lecturer-course-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
    .lecturer-announcement-strip{border-radius:15px}
}


/* =====================================================================
   COURSE MANAGEMENT V28
   Rich, calm lecturer course workspace
   ===================================================================== */
.course-workspace-v28{
    --course-v28-radius:18px;
    --course-v28-soft:color-mix(in srgb,var(--surface) 86%,var(--surface-soft));
    display:grid;
    gap:14px;
}
.course-workspace-v28::before{
    content:"";
    position:fixed;
    inset:76px 0 auto var(--sidebar-width,68px);
    height:250px;
    z-index:-1;
    pointer-events:none;
    background:
        radial-gradient(circle at 20% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 52%),
        linear-gradient(180deg,color-mix(in srgb,var(--surface-soft) 46%,transparent),transparent);
}
.course-workspace-head{
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:28px;
    min-height:132px;
    padding:22px 24px;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--border) 80%,transparent);
    border-radius:22px;
    background:
        radial-gradient(circle at 92% 14%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 34%),
        linear-gradient(135deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--surface-soft) 84%,var(--surface)));
    box-shadow:0 18px 50px rgba(30,20,40,.055),inset 0 1px 0 rgba(255,255,255,.45);
}
.course-workspace-title{min-width:0}
.course-workspace-kicker{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--accent);
    font-size:.66rem;
    font-weight:850;
    letter-spacing:.075em;
    text-transform:uppercase;
}
.course-workspace-kicker .ui-icon{width:15px;height:15px}
.course-workspace-title h1{
    margin:8px 0 5px;
    font-size:clamp(1.65rem,2.2vw,2.28rem);
    letter-spacing:-.042em;
    line-height:1.05;
}
.course-workspace-title p{
    margin:0;
    max-width:720px;
    color:var(--muted);
    font-size:.77rem;
    line-height:1.5;
}
.course-workspace-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.course-workspace-name-row h1{margin-bottom:4px}
.course-status-pill{
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-height:24px;
    padding:0 8px;
    border:1px solid color-mix(in srgb,var(--border) 80%,transparent);
    border-radius:999px;
    background:color-mix(in srgb,var(--surface) 88%,transparent);
    color:var(--muted);
    font-size:.58rem;
    font-weight:800;
    text-transform:capitalize;
    box-shadow:0 2px 10px rgba(20,15,30,.035);
}
.course-status-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.78}
.course-status-pill.status-active{color:#16855b;background:color-mix(in srgb,#22c55e 8%,var(--surface))}
.course-status-pill.status-draft{color:#9a6500;background:color-mix(in srgb,#f59e0b 8%,var(--surface))}
.course-status-pill.status-completed{color:#52708c;background:color-mix(in srgb,#64748b 8%,var(--surface))}

.course-workspace-head-actions{
    display:flex;
    align-items:flex-end;
    gap:9px;
    flex:0 0 auto;
}
.course-workspace-selector{
    display:grid;
    gap:5px;
    min-width:290px;
}
.course-workspace-selector>span{
    color:var(--muted);
    font-size:.58rem;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.course-workspace-selector select{
    width:100%;
    height:42px;
    border:1px solid color-mix(in srgb,var(--border) 88%,transparent);
    border-radius:12px;
    background:color-mix(in srgb,var(--surface) 90%,transparent);
    color:var(--text);
    padding:0 34px 0 12px;
    font-size:.72rem;
    box-shadow:0 5px 18px rgba(26,18,36,.035);
}
.course-workspace-preview{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
}
.course-workspace-preview .ui-icon{width:14px;height:14px}

.course-workspace-tabs{
    display:flex;
    align-items:center;
    gap:3px;
    overflow-x:auto;
    padding:5px;
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    border-radius:14px;
    background:color-mix(in srgb,var(--surface) 88%,transparent);
    box-shadow:0 9px 30px rgba(28,18,40,.035);
    scrollbar-width:none;
}
.course-workspace-tabs::-webkit-scrollbar{display:none}
.course-workspace-tabs a{
    flex:0 0 auto;
    height:34px;
    display:inline-flex;
    align-items:center;
    padding:0 11px;
    border-radius:9px;
    color:var(--muted);
    text-decoration:none;
    font-size:.67rem;
    font-weight:760;
    transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.course-workspace-tabs a:hover{color:var(--text);background:var(--surface-soft)}
.course-workspace-tabs a.active{
    color:var(--accent);
    background:var(--surface);
    box-shadow:0 3px 12px rgba(28,18,40,.07),inset 0 0 0 1px color-mix(in srgb,var(--accent) 15%,var(--border));
}

.course-workspace-filterbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) 150px auto;
    align-items:center;
    gap:8px;
    padding:9px;
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    border-radius:14px;
    background:var(--surface);
}
.course-workspace-filterbar label{
    height:38px;
    display:grid;
    grid-template-columns:17px 1fr;
    align-items:center;
    gap:7px;
    padding:0 11px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface-soft);
}
.course-workspace-filterbar label:focus-within{
    border-color:color-mix(in srgb,var(--accent) 48%,var(--border));
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent);
}
.course-workspace-filterbar label .ui-icon{width:16px;height:16px;color:var(--muted)}
.course-workspace-filterbar input{min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:.72rem}
.course-workspace-filterbar select{
    height:38px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
    color:var(--text);
    padding:0 10px;
    font-size:.7rem;
}
.course-workspace-filterbar>span{
    min-width:54px;
    text-align:right;
    color:var(--muted);
    font-size:.62rem;
    font-weight:720;
}

/* Course portfolio */
.course-portfolio-v28{
    padding:16px;
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    border-radius:20px;
    background:var(--surface);
    box-shadow:0 14px 38px rgba(28,18,40,.035);
}
.course-portfolio-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:12px;
}
.course-portfolio-head small{
    display:block;
    color:var(--muted);
    font-size:.59rem;
    font-weight:830;
    letter-spacing:.065em;
    text-transform:uppercase;
}
.course-portfolio-head h2{margin:3px 0 0;font-size:.98rem;letter-spacing:-.02em}
.course-portfolio-head>span{
    padding:5px 8px;
    border-radius:999px;
    background:var(--surface-soft);
    color:var(--muted);
    font-size:.61rem;
    font-weight:760;
}
.course-portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.course-portfolio-card{
    padding:15px;
    border:1px solid color-mix(in srgb,var(--border) 86%,transparent);
    border-radius:16px;
    background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-soft) 58%,var(--surface)));
    box-shadow:0 8px 24px rgba(24,18,34,.035);
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.course-portfolio-card:hover{
    transform:translateY(-1px);
    border-color:color-mix(in srgb,var(--accent) 25%,var(--border));
    box-shadow:0 14px 30px rgba(30,20,40,.055);
}
.course-portfolio-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.course-portfolio-icon{
    width:38px;height:38px;
    display:grid;place-items:center;
    border-radius:11px;
    background:color-mix(in srgb,var(--accent) 8%,var(--surface));
    color:var(--accent);
}
.course-portfolio-icon .ui-icon{width:18px;height:18px}
.course-portfolio-card>small{display:block;margin-top:12px;color:var(--muted);font-size:.61rem}
.course-portfolio-card h2{margin:4px 0 12px;font-size:.9rem;line-height:1.25}
.course-portfolio-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
    padding:8px;
    border-radius:11px;
    background:color-mix(in srgb,var(--surface-soft) 76%,transparent);
}
.course-portfolio-stats span{padding:3px 6px;border-left:1px solid var(--border)}
.course-portfolio-stats span:first-child{border-left:0}
.course-portfolio-stats strong{display:block;font-size:.82rem}
.course-portfolio-stats strong.attention{color:#b76b00}
.course-portfolio-stats small{display:block;margin-top:2px;color:var(--muted);font-size:.53rem}
.course-portfolio-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:11px;
    padding-top:10px;
    border-top:1px solid var(--border);
}
.course-portfolio-foot>span{color:var(--muted);font-size:.57rem}
.course-portfolio-foot a{
    display:flex;align-items:center;gap:4px;
    color:var(--accent);text-decoration:none;
    font-size:.62rem;font-weight:830;
}
.course-portfolio-foot .ui-icon{width:12px;height:12px}

/* Overview */
.course-overview-v28{display:grid;gap:12px}
.course-overview-metrics{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    border-radius:17px;
    background:var(--surface);
    box-shadow:0 10px 32px rgba(28,18,40,.035);
}
.course-overview-metrics article{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:78px;
    padding:13px 15px;
    border-left:1px solid var(--border);
}
.course-overview-metrics article:first-child{border-left:0}
.course-overview-metrics article>span{
    width:36px;height:36px;flex:0 0 36px;
    display:grid;place-items:center;
    border-radius:11px;
    background:color-mix(in srgb,var(--accent) 8%,var(--surface));
    color:var(--accent);
}
.course-overview-metrics article.needs-attention>span{background:color-mix(in srgb,#f59e0b 10%,var(--surface));color:#b76b00}
.course-overview-metrics .ui-icon{width:17px;height:17px}
.course-overview-metrics strong{display:block;font-size:1.06rem;line-height:1}
.course-overview-metrics strong em{font-style:normal;color:var(--muted);font-size:.66rem}
.course-overview-metrics small{display:block;margin-top:5px;color:var(--muted);font-size:.61rem}

.course-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.course-overview-panel{
    padding:14px;
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    border-radius:17px;
    background:var(--surface);
    box-shadow:0 10px 30px rgba(28,18,40,.03);
}
.course-overview-panel-head{
    display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    margin-bottom:10px;
}
.course-overview-panel-head small{
    display:block;color:var(--muted);
    font-size:.57rem;font-weight:830;letter-spacing:.06em;text-transform:uppercase;
}
.course-overview-panel-head h2{margin:3px 0 0;font-size:.86rem}
.course-overview-panel-head>a{color:var(--accent);text-decoration:none;font-size:.61rem;font-weight:820}
.course-readiness-list{display:grid;gap:9px}
.course-readiness-list>div{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    padding:9px 10px;
    border-radius:11px;
    background:var(--surface-soft);
}
.course-readiness-list span strong{display:block;font-size:.7rem}
.course-readiness-list span small{display:block;margin-top:2px;color:var(--muted);font-size:.59rem}
.course-readiness-list>div>b{font-size:.66rem;color:var(--accent)}
.course-readiness-bar{
    grid-column:1/-1;
    height:5px;
    overflow:hidden;
    border-radius:999px;
    background:color-mix(in srgb,var(--border) 70%,transparent);
}
.course-readiness-bar i{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.course-readiness-list>.course-readiness-plain{align-items:center}
.course-readiness-plain>a{color:var(--accent);text-decoration:none;font-size:.6rem;font-weight:820}
.course-overview-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.course-overview-actions>a{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:8px;
    align-items:center;
    padding:9px;
    border:1px solid var(--border);
    border-radius:11px;
    color:var(--text);
    text-decoration:none;
    transition:background .14s ease,border-color .14s ease;
}
.course-overview-actions>a:hover{background:var(--surface-soft);border-color:color-mix(in srgb,var(--accent) 22%,var(--border))}
.course-overview-actions>a>span{grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));color:var(--accent)}
.course-overview-actions .ui-icon{width:16px;height:16px}
.course-overview-actions strong{font-size:.67rem}
.course-overview-actions small{color:var(--muted);font-size:.55rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.course-overview-list{display:grid}
.course-overview-list>a{
    display:grid;
    grid-template-columns:31px minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    min-height:46px;
    padding:6px 0;
    border-top:1px solid var(--border);
    color:var(--text);
    text-decoration:none;
}
.course-overview-list>a:first-child{border-top:0}
.course-overview-list>a>span:first-child{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--accent)}
.course-overview-list .ui-icon{width:14px;height:14px}
.course-overview-list strong{display:block;font-size:.68rem}
.course-overview-list small{display:block;margin-top:2px;color:var(--muted);font-size:.56rem}
.course-overview-list time{color:var(--muted);font-size:.57rem}
.course-overview-empty{
    display:grid;
    place-items:center;
    min-height:90px;
    padding:16px;
    border:1px dashed var(--border);
    border-radius:12px;
    color:var(--muted);
    text-align:center;
    font-size:.66rem;
}

/* Learners */
.course-learners-v28{
    padding:15px;
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    border-radius:18px;
    background:var(--surface);
    box-shadow:0 12px 34px rgba(28,18,40,.035);
}
.course-learners-toolbar{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    padding-bottom:11px;
}
.course-learners-toolbar small{display:block;color:var(--muted);font-size:.58rem;font-weight:830;text-transform:uppercase;letter-spacing:.06em}
.course-learners-toolbar h2{margin:3px 0 2px;font-size:.94rem}
.course-learners-toolbar p{margin:0;color:var(--muted);font-size:.63rem}
.course-learner-search{
    width:min(340px,42%);
    height:39px;
    display:grid;
    grid-template-columns:17px 1fr;
    align-items:center;
    gap:7px;
    padding:0 11px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--surface-soft);
}
.course-learner-search:focus-within{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)}
.course-learner-search .ui-icon{width:16px;height:16px;color:var(--muted)}
.course-learner-search input{min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:.7rem}
.course-learners-summary{
    display:flex;align-items:center;gap:8px;
    padding:8px 10px;
    border-radius:11px;
    background:var(--surface-soft);
    margin-bottom:9px;
}
.course-learners-summary>span{margin-right:auto}
.course-learners-summary strong{font-size:.75rem}
.course-learners-summary small{margin-left:4px;color:var(--muted);font-size:.58rem}
.course-learners-summary>a{display:flex;align-items:center;gap:4px;color:var(--accent);text-decoration:none;font-size:.59rem;font-weight:820}
.course-learners-summary .ui-icon{width:12px;height:12px}
.course-learner-table-wrap{overflow-x:auto}
.course-learner-table-head,.course-learner-row{
    min-width:760px;
    display:grid;
    grid-template-columns:minmax(240px,1.7fr) minmax(150px,1fr) 100px 100px 90px;
    gap:10px;
    align-items:center;
}
.course-learner-table-head{
    min-height:32px;
    padding:0 10px;
    color:var(--muted);
    font-size:.55rem;
    font-weight:830;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.course-learner-row{
    min-height:66px;
    padding:8px 10px;
    border-top:1px solid var(--border);
}
.course-learner-row[hidden]{display:none!important}
.course-learner-row:hover{background:color-mix(in srgb,var(--surface-soft) 55%,transparent)}
.course-learner-identity{display:flex;align-items:center;gap:9px;min-width:0}
.course-learner-identity>span{
    width:34px;height:34px;flex:0 0 34px;
    display:grid;place-items:center;
    border-radius:50%;
    background:color-mix(in srgb,var(--accent) 9%,var(--surface));
    color:var(--accent);
    font-size:.68rem;font-weight:850;
}
.course-learner-identity strong{display:block;font-size:.69rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.course-learner-identity small{display:block;margin-top:2px;color:var(--muted);font-size:.57rem}
.course-learner-progress strong,.course-learner-stat strong{display:block;font-size:.7rem}
.course-learner-progress>div{height:4px;margin:4px 0;border-radius:999px;background:var(--surface-soft);overflow:hidden}
.course-learner-progress>div i{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.course-learner-progress small,.course-learner-stat small{color:var(--muted);font-size:.54rem}
.course-learners-empty{padding:18px;text-align:center;color:var(--muted);font-size:.65rem}

/* Existing management content: richer surfaces, calmer hierarchy */
.course-workspace-v28 .manage-grid{
    gap:12px;
    align-items:start;
}
.course-workspace-v28 .manage-grid>section,
.course-workspace-v28 .content-builder{
    min-width:0;
    padding:14px;
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    border-radius:18px;
    background:var(--surface);
    box-shadow:0 10px 30px rgba(28,18,40,.03);
}
.course-workspace-v28 .form-panel{
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    border-radius:17px;
    background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-soft) 48%,var(--surface)));
    box-shadow:0 10px 28px rgba(28,18,40,.03);
}
.course-workspace-v28 .content-builder-layout{grid-template-columns:minmax(0,1fr) 320px}
.course-workspace-v28 .section-create-panel{position:sticky;top:92px}
.course-workspace-v28 .section-title h2{font-size:.9rem;letter-spacing:-.015em}
.course-workspace-v28 .section-title p{font-size:.64rem;color:var(--muted)}
.course-workspace-v28 .content-module{
    border-color:color-mix(in srgb,var(--border) 84%,transparent);
    border-radius:14px;
    background:color-mix(in srgb,var(--surface) 97%,var(--surface-soft));
    overflow:hidden;
    box-shadow:0 5px 16px rgba(30,20,40,.025);
}
.course-workspace-v28 .content-module>summary{min-height:52px;padding:10px 12px}
.course-workspace-v28 .content-row{
    min-height:48px;
    padding:8px 10px;
}
.course-workspace-v28 .content-item-form{
    margin:8px;
    border-radius:12px;
    background:var(--surface-soft);
}
.course-workspace-v28 .assignment-admin-list,
.course-workspace-v28 .quiz-list{
    display:grid;
    gap:7px;
}
.course-workspace-v28 .quiz-card{
    margin:0;
    padding:11px 12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:color-mix(in srgb,var(--surface) 96%,var(--surface-soft));
    box-shadow:none;
}
.course-workspace-v28 .quiz-card h2{font-size:.78rem;margin:5px 0}
.course-workspace-v28 .quiz-card small{font-size:.6rem}
.course-workspace-v28 .grading-layout{
    gap:10px;
}
.course-workspace-v28 .grading-nav,
.course-workspace-v28 .grading-list{
    border-radius:16px;
}
.course-workspace-v28 .grading-card{
    border-radius:14px;
    box-shadow:0 7px 20px rgba(28,18,40,.025);
}
.course-workspace-v28 .attendance-register>div{
    border-radius:10px;
}
.course-workspace-v28 .announcement{
    border-radius:13px;
    box-shadow:none;
}
.course-workspace-v28 .announcement h3{font-size:.76rem}
.course-workspace-v28 .announcement p{font-size:.64rem;line-height:1.5}
.course-workspace-v28 input,
.course-workspace-v28 select,
.course-workspace-v28 textarea{
    transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
.course-workspace-v28 input:focus,
.course-workspace-v28 select:focus,
.course-workspace-v28 textarea:focus{
    border-color:color-mix(in srgb,var(--accent) 48%,var(--border));
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent);
}

/* Dark mode depth */
[data-theme="dark"] .course-workspace-head{
    box-shadow:0 20px 50px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035);
}
[data-theme="dark"] .course-portfolio-card,
[data-theme="dark"] .course-overview-panel,
[data-theme="dark"] .course-learners-v28{
    box-shadow:0 12px 32px rgba(0,0,0,.12);
}

@media(max-width:1120px){
    .course-workspace-head{align-items:flex-start;flex-direction:column;min-height:0}
    .course-workspace-head-actions{width:100%}
    .course-workspace-selector{flex:1;min-width:0}
    .course-overview-grid{grid-template-columns:1fr}
    .course-portfolio-grid{grid-template-columns:1fr}
    .course-workspace-v28 .content-builder-layout{grid-template-columns:1fr}
    .course-workspace-v28 .section-create-panel{position:static}
}
@media(max-width:760px){
    .course-workspace-v28{gap:10px}
    .course-workspace-head{padding:17px;border-radius:18px}
    .course-workspace-head-actions{align-items:stretch;flex-direction:column}
    .course-workspace-selector{width:100%}
    .course-workspace-preview{justify-content:center}
    .course-workspace-tabs{border-radius:12px}
    .course-workspace-filterbar{grid-template-columns:1fr 120px}
    .course-workspace-filterbar>span{grid-column:1/-1;text-align:left;padding-left:2px}
    .course-overview-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
    .course-overview-metrics article:nth-child(3){border-left:0;border-top:1px solid var(--border)}
    .course-overview-metrics article:nth-child(4){border-top:1px solid var(--border)}
    .course-learners-toolbar{align-items:flex-start;flex-direction:column}
    .course-learner-search{width:100%}
}
@media(max-width:520px){
    .course-workspace-head{padding:14px}
    .course-workspace-title h1{font-size:1.45rem}
    .course-workspace-tabs a{height:32px;padding:0 9px;font-size:.63rem}
    .course-workspace-filterbar{grid-template-columns:1fr}
    .course-workspace-filterbar select{width:100%}
    .course-portfolio-v28,.course-learners-v28{padding:10px;border-radius:14px}
    .course-overview-metrics article{padding:10px}
    .course-overview-actions{grid-template-columns:1fr}
    .course-overview-panel{padding:11px;border-radius:14px}
    .course-learners-summary{align-items:flex-start;flex-wrap:wrap}
    .course-learners-summary>span{width:100%;margin-right:0}
}


/* =====================================================================
   GRADING WORKSPACE V29
   Split review workspace: inbox / learner work / grading decision
   ===================================================================== */
.grading-workspace-v29{display:grid;gap:12px}
.grading-v29-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:2px 2px 4px}
.grading-v29-kicker{display:block;color:var(--accent);font-size:.61rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.grading-v29-assignment h2{margin:4px 0 3px;font-size:1.05rem;letter-spacing:-.015em}
.grading-v29-assignment p{margin:0;color:var(--muted);font-size:.68rem}
.grading-v29-assignment p strong{color:var(--text)}
.grading-v29-assignment-picker{display:grid;gap:4px;min-width:min(340px,38vw)}
.grading-v29-assignment-picker>span{color:var(--muted);font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.grading-v29-assignment-picker select{height:39px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text);padding:0 32px 0 11px;font-size:.72rem;box-shadow:var(--shadow-sm)}

.grading-v29-filters{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--surface) 93%,transparent);box-shadow:var(--shadow-sm)}
.grading-v29-search{width:min(330px,34vw);height:36px;display:grid;grid-template-columns:16px minmax(0,1fr);align-items:center;gap:7px;padding:0 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft)}
.grading-v29-search:focus-within{border-color:color-mix(in srgb,var(--accent) 44%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)}
.grading-v29-search .ui-icon{width:15px;height:15px;color:var(--muted)}
.grading-v29-search input{min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:.7rem}
.grading-v29-filter-tabs{display:flex;align-items:center;gap:3px;overflow-x:auto;scrollbar-width:none}
.grading-v29-filter-tabs::-webkit-scrollbar{display:none}
.grading-v29-filter-tabs button{height:32px;display:flex;align-items:center;gap:5px;padding:0 9px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:.65rem;font-weight:750;white-space:nowrap;cursor:pointer}
.grading-v29-filter-tabs button:hover{background:var(--surface-soft);color:var(--text)}
.grading-v29-filter-tabs button.active{background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent)}
.grading-v29-filter-tabs b{min-width:18px;height:18px;display:grid;place-items:center;border-radius:999px;background:var(--surface);font-size:.57rem}

.grading-v29-layout{display:grid;grid-template-columns:260px minmax(0,1fr) 330px;gap:10px;align-items:start}
.grading-v29-inbox,.grading-v29-review,.grading-v29-decision{min-width:0;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}
.grading-v29-inbox{overflow:hidden;position:sticky;top:88px;max-height:calc(100dvh - 112px)}
.grading-v29-inbox-head{height:50px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 11px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface-soft) 60%,var(--surface))}
.grading-v29-inbox-head strong{display:block;font-size:.72rem}
.grading-v29-inbox-head small{display:block;margin-top:2px;color:var(--muted);font-size:.58rem}
.grading-v29-live-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px color-mix(in srgb,#22c55e 10%,transparent)}
.grading-v29-student-list{max-height:calc(100dvh - 162px);overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
.grading-v29-student-list::-webkit-scrollbar{display:none}
.grading-v29-student{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:62px;padding:8px 10px;border-bottom:1px solid var(--border);color:var(--text);text-decoration:none;transition:background .12s ease,box-shadow .12s ease}
.grading-v29-student:last-child{border-bottom:0}
.grading-v29-student[hidden]{display:none!important}
.grading-v29-student:hover{background:var(--surface-soft)}
.grading-v29-student.active{background:color-mix(in srgb,var(--accent) 7%,var(--surface));box-shadow:inset 3px 0 0 var(--accent)}
.grading-v29-avatar{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent);font-size:.68rem;font-weight:850}
.grading-v29-avatar.large{width:42px;height:42px;font-size:.8rem}
.grading-v29-student-copy{min-width:0}
.grading-v29-student-copy strong{display:block;font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grading-v29-student-copy small{display:block;margin-top:2px;color:var(--muted);font-size:.56rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grading-v29-row-meta{text-align:right}
.grading-v29-row-meta b{display:inline-flex;padding:3px 5px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.51rem;font-weight:800;text-transform:capitalize}
.grading-v29-row-meta b.state-pending{color:#a96200;background:color-mix(in srgb,#f59e0b 10%,var(--surface))}
.grading-v29-row-meta b.state-graded{color:#53627a}
.grading-v29-row-meta b.state-published{color:#16855b;background:color-mix(in srgb,#22c55e 10%,var(--surface))}
.grading-v29-row-meta time{display:block;margin-top:4px;color:var(--muted);font-size:.52rem}
.grading-v29-no-results{padding:24px 10px;text-align:center;color:var(--muted);font-size:.65rem}

.grading-v29-review{padding:13px}
.grading-v29-review-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.grading-v29-review-person{display:flex;align-items:center;gap:10px;min-width:0}
.grading-v29-review-person>div{min-width:0}
.grading-v29-review-person small{display:block;color:var(--muted);font-size:.57rem;font-weight:750;text-transform:uppercase;letter-spacing:.06em}
.grading-v29-review-person h3{margin:2px 0 1px;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grading-v29-review-person p{margin:0;color:var(--muted);font-size:.61rem}
.grading-v29-review-nav{display:flex;align-items:center;gap:5px}
.grading-v29-review-nav>a,.grading-v29-review-nav>.disabled{width:31px;height:31px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);text-decoration:none}
.grading-v29-review-nav>.disabled{opacity:.35}
.grading-v29-review-nav .ui-icon{width:15px;height:15px}
.grading-v29-review-nav>span:not(.disabled){min-width:38px;text-align:center;color:var(--muted);font-size:.59rem;font-weight:700}

.grading-v29-submission-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:10px 0}
.grading-v29-submission-meta>span{min-width:0;display:grid;grid-template-columns:16px 1fr;grid-template-rows:auto auto;column-gap:6px;padding:8px;border-radius:10px;background:var(--surface-soft);color:var(--muted);font-size:.57rem}
.grading-v29-submission-meta .ui-icon{grid-row:1/3;width:15px;height:15px;color:var(--accent)}
.grading-v29-submission-meta b{color:var(--text);font-size:.57rem}
.grading-v29-submission-meta .is-late{background:color-mix(in srgb,#f59e0b 8%,var(--surface));color:#a96200}
.grading-v29-submission-meta .is-late .ui-icon{color:#b76b00}
.grading-v29-submission-meta .has-extension{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}

.grading-v29-extension{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px;padding:9px 10px;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border));border-radius:10px;background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.grading-v29-extension>span{color:var(--accent)}
.grading-v29-extension .ui-icon{width:16px;height:16px}
.grading-v29-extension strong{display:block;font-size:.65rem}
.grading-v29-extension p{margin:2px 0 0;color:var(--muted);font-size:.6rem}

.grading-v29-preview{padding:11px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--surface-soft) 35%,var(--surface))}
.grading-v29-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:9px}
.grading-v29-section-head small{display:block;color:var(--muted);font-size:.55rem;text-transform:uppercase;font-weight:800;letter-spacing:.06em}
.grading-v29-section-head h4{margin:2px 0 0;font-size:.78rem}
.grading-v29-section-head>span{color:var(--muted);font-size:.57rem}
.grading-v29-written{padding:10px;border-radius:10px;background:var(--surface)}
.grading-v29-written-label{display:flex;align-items:center;gap:5px;margin-bottom:7px;color:var(--muted);font-size:.57rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.grading-v29-written-label .ui-icon{width:14px;height:14px;color:var(--accent)}
.grading-v29-written .prose{max-height:300px;overflow:auto;color:var(--text);font-size:.7rem;line-height:1.55}
.grading-v29-files{display:grid;gap:6px;margin-top:8px}
.grading-v29-files>a{display:grid;grid-template-columns:34px minmax(0,1fr) 18px;align-items:center;gap:8px;padding:8px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);text-decoration:none}
.grading-v29-files>a>span:first-child{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--accent)}
.grading-v29-files .ui-icon{width:15px;height:15px}
.grading-v29-files strong{display:block;font-size:.64rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grading-v29-files small{display:block;margin-top:2px;color:var(--muted);font-size:.54rem}
.grading-v29-inline-empty{padding:24px 10px;text-align:center;color:var(--muted);font-size:.63rem}

.grading-v29-assignment-context,.grading-v29-attempt-history{margin-top:9px;border:1px solid var(--border);border-radius:11px;background:var(--surface)}
.grading-v29-assignment-context summary,.grading-v29-attempt-history summary{min-height:39px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px;list-style:none;cursor:pointer;font-size:.63rem;font-weight:800}
.grading-v29-assignment-context summary::-webkit-details-marker,.grading-v29-attempt-history summary::-webkit-details-marker{display:none}
.grading-v29-assignment-context summary>span,.grading-v29-attempt-history summary>span{display:flex;align-items:center;gap:6px}
.grading-v29-assignment-context summary .ui-icon,.grading-v29-attempt-history summary .ui-icon{width:14px;height:14px;color:var(--accent)}
.grading-v29-assignment-context[open] summary>.ui-icon:last-child{transform:rotate(180deg)}
.grading-v29-assignment-context>div{padding:0 10px 10px}
.grading-v29-assignment-context h4{margin:1px 0 5px;font-size:.7rem}
.grading-v29-assignment-context p{margin:0;color:var(--muted);font-size:.63rem;line-height:1.5}
.grading-v29-attempt-history summary>b{min-width:20px;height:20px;display:grid;place-items:center;border-radius:999px;background:var(--surface-soft);font-size:.55rem}
.grading-v29-attempt-history>div{padding:0 9px 8px}
.grading-v29-attempt-history a,.grading-v29-history-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px;border-top:1px solid var(--border);color:var(--text);text-decoration:none}
.grading-v29-attempt-history a.current{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.grading-v29-attempt-history strong,.grading-v29-history-row strong{display:block;font-size:.61rem}
.grading-v29-attempt-history small,.grading-v29-history-row small{display:block;margin-top:2px;color:var(--muted);font-size:.53rem}
.grading-v29-attempt-history a>span:last-child,.grading-v29-history-row>span:last-child{color:var(--muted);font-size:.55rem}

.grading-v29-decision{position:sticky;top:88px;padding:12px}
.grading-v29-decision-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.grading-v29-decision-head small{display:block;color:var(--muted);font-size:.55rem;text-transform:uppercase;font-weight:800;letter-spacing:.06em}
.grading-v29-decision-head h3{margin:2px 0 0;font-size:.82rem}
.grading-v29-save-state{max-width:145px;padding:4px 7px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.54rem;font-weight:750;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grading-v29-save-state.is-saving{color:#a96200}
.grading-v29-save-state.is-saved{color:#16855b;background:color-mix(in srgb,#22c55e 9%,var(--surface))}
.grading-v29-save-state.is-local{color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.grading-v29-save-state.is-error{color:#b42318;background:color-mix(in srgb,#ef4444 8%,var(--surface))}

.grading-v29-form{display:grid;gap:10px;margin-top:10px}
.grading-v29-form>label>span,.grading-v29-field-title>span{display:block;margin-bottom:5px;color:var(--muted);font-size:.58rem;font-weight:800}
.grading-v29-form input,.grading-v29-form select,.grading-v29-form textarea{width:100%;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:var(--text);outline:0}
.grading-v29-form input,.grading-v29-form select{height:37px;padding:0 9px}
.grading-v29-form textarea{padding:9px;resize:vertical;line-height:1.45}
.grading-v29-form input:focus,.grading-v29-form select:focus,.grading-v29-form textarea:focus{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)}
.grading-v29-form label>small{display:block;margin-top:4px;color:var(--muted);font-size:.53rem;line-height:1.4}
.grading-v29-score-field>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px}
.grading-v29-score-field>div strong{color:var(--muted);font-size:.64rem}
.grading-v29-percent{display:grid;gap:6px;padding:9px;border-radius:10px;background:var(--surface-soft)}
.grading-v29-percent>span{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.grading-v29-percent small{display:block;color:var(--muted);font-size:.53rem}
.grading-v29-percent strong{font-size:.9rem}
.grading-v29-percent>div{height:6px;border-radius:999px;background:color-mix(in srgb,var(--border) 70%,transparent);overflow:hidden}
.grading-v29-percent i{display:block;width:var(--grade-percent,0%);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#ffffff));transition:width .18s ease}
.grading-v29-feedback small{text-align:right}
.grading-v29-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.grading-v29-actions .btn{min-width:0;padding-inline:8px}
.grading-v29-actions .grading-v29-publish{grid-column:1/-1;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#6d28d9))}
.grading-v29-shortcuts{display:grid;gap:4px;padding-top:4px;border-top:1px solid var(--border);color:var(--muted);font-size:.51rem}
.grading-v29-shortcuts span{display:flex;align-items:center;gap:5px}
.grading-v29-shortcuts .ui-icon{width:13px;height:13px}
.grading-v29-shortcuts kbd{padding:2px 4px;border:1px solid var(--border);border-radius:4px;background:var(--surface-soft);font:inherit;color:var(--text)}

.grading-v29-rubric{display:grid;gap:6px}
.grading-v29-field-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
.grading-v29-field-title>b{font-size:.62rem}
.grading-v29-rubric>label{display:grid;grid-template-columns:minmax(0,1fr) 88px;align-items:center;gap:8px;padding:7px;border:1px solid var(--border);border-radius:9px}
.grading-v29-rubric>label strong{display:block;font-size:.6rem}
.grading-v29-rubric>label small{display:block;margin-top:2px;color:var(--muted);font-size:.51rem}
.grading-v29-rubric-input{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px}
.grading-v29-rubric-input input{height:33px;text-align:right}
.grading-v29-rubric-input em{font-style:normal;color:var(--muted);font-size:.53rem}

.grading-v29-empty{padding:12px;border:1px solid var(--border);border-radius:15px;background:var(--surface)}

@media(max-width:1260px){
    .grading-v29-layout{grid-template-columns:230px minmax(0,1fr)}
    .grading-v29-decision{grid-column:2;position:static}
    .grading-v29-review{grid-column:2}
    .grading-v29-inbox{grid-row:1/3}
}
@media(max-width:900px){
    .grading-v29-toolbar{align-items:flex-start;flex-direction:column}
    .grading-v29-assignment-picker{width:100%;min-width:0}
    .grading-v29-filters{align-items:stretch;flex-direction:column}
    .grading-v29-search{width:100%}
    .grading-v29-layout{grid-template-columns:1fr}
    .grading-v29-inbox,.grading-v29-review,.grading-v29-decision{grid-column:auto;grid-row:auto;position:static;max-height:none}
    .grading-v29-student-list{max-height:310px}
    .grading-v29-submission-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
    .grading-workspace-v29{gap:8px}
    .grading-v29-toolbar{padding-inline:0}
    .grading-v29-assignment h2{font-size:.92rem}
    .grading-v29-filter-tabs{width:100%}
    .grading-v29-filter-tabs button{padding-inline:7px}
    .grading-v29-inbox,.grading-v29-review,.grading-v29-decision{border-radius:13px}
    .grading-v29-review{padding:9px}
    .grading-v29-review-head{align-items:flex-start}
    .grading-v29-review-person h3{font-size:.78rem}
    .grading-v29-review-nav>span:not(.disabled){display:none}
    .grading-v29-submission-meta{gap:4px}
    .grading-v29-submission-meta>span{padding:7px}
    .grading-v29-rubric>label{grid-template-columns:1fr}
    .grading-v29-rubric-input{width:110px}
    .grading-v29-actions{grid-template-columns:1fr}
    .grading-v29-actions .grading-v29-publish{grid-column:auto}
}


/* =====================================================================
   ATTENDANCE MANAGEMENT V30
   Clean lecturer register workspace
   ===================================================================== */
.attendance-workspace-v30{display:grid;gap:11px}
.attendance-v30-header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:2px 1px 3px}
.attendance-v30-kicker{display:block;color:var(--accent);font-size:.6rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.attendance-v30-header h2{margin:4px 0 3px;font-size:1.08rem;letter-spacing:-.018em}
.attendance-v30-header p{margin:0;color:var(--muted);font-size:.67rem}
.attendance-v30-header-actions{display:flex;align-items:center;gap:7px}
.attendance-v30-session-nav{display:flex;align-items:center;gap:4px}
.attendance-v30-session-nav>a,.attendance-v30-session-nav>.disabled{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);text-decoration:none;box-shadow:var(--shadow-sm)}
.attendance-v30-session-nav>.disabled{opacity:.35}
.attendance-v30-session-nav .ui-icon{width:15px;height:15px}
.attendance-v30-session-nav>span:not(.disabled){min-width:38px;text-align:center;color:var(--muted);font-size:.58rem;font-weight:750}
.attendance-v30-new-register{position:relative}
.attendance-v30-new-register>summary{height:35px;display:flex;align-items:center;gap:6px;padding:0 11px;border-radius:10px;background:var(--accent);color:white;font-size:.65rem;font-weight:800;list-style:none;cursor:pointer;box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 18%,transparent)}
.attendance-v30-new-register>summary::-webkit-details-marker{display:none}
.attendance-v30-new-register>summary .ui-icon{width:14px;height:14px}
.attendance-v30-new-form{position:absolute;z-index:20;right:0;top:43px;width:min(360px,88vw);display:grid;gap:9px;padding:12px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:0 20px 48px rgba(20,24,40,.16);backdrop-filter:blur(22px)}
.attendance-v30-new-form>div{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.attendance-v30-new-form label{display:grid;gap:4px;color:var(--muted);font-size:.57rem;font-weight:750}
.attendance-v30-new-form input,.attendance-v30-new-form textarea{width:100%;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:var(--text);padding:8px;outline:0;font-size:.67rem}
.attendance-v30-new-form input{height:36px}
.attendance-v30-new-form input:focus,.attendance-v30-new-form textarea:focus{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)}

.attendance-v30-session-tools{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:7px;border:1px solid var(--border);border-radius:13px;background:var(--surface);box-shadow:var(--shadow-sm)}
.attendance-v30-session-select{height:35px;min-width:min(350px,38vw);display:grid;grid-template-columns:16px minmax(0,1fr);align-items:center;gap:6px;padding:0 9px;border-radius:9px;background:var(--surface-soft);color:var(--muted)}
.attendance-v30-session-select .ui-icon{width:15px;height:15px}
.attendance-v30-session-select select{min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:.66rem}
.attendance-v30-session-filters{display:flex;align-items:center;gap:3px;overflow:auto;scrollbar-width:none}
.attendance-v30-session-filters::-webkit-scrollbar{display:none}
.attendance-v30-session-filters button{height:31px;display:flex;align-items:center;gap:5px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:.61rem;font-weight:750;white-space:nowrap;cursor:pointer}
.attendance-v30-session-filters button:hover{background:var(--surface-soft);color:var(--text)}
.attendance-v30-session-filters button.active{background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent)}
.attendance-v30-session-filters b{min-width:18px;height:18px;display:grid;place-items:center;border-radius:999px;background:var(--surface);font-size:.52rem}
.attendance-v30-session-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:1px;scrollbar-width:none}
.attendance-v30-session-strip::-webkit-scrollbar{display:none}
.attendance-v30-session-strip>a{position:relative;flex:0 0 auto;min-width:170px;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:7px;padding:8px 9px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text);text-decoration:none}
.attendance-v30-session-strip>a[hidden]{display:none!important}
.attendance-v30-session-strip>a.active{border-color:color-mix(in srgb,var(--accent) 35%,var(--border));background:color-mix(in srgb,var(--accent) 5%,var(--surface));box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 8%,transparent)}
.attendance-v30-session-strip time{color:var(--accent);font-size:.65rem;font-weight:850}
.attendance-v30-session-strip strong{display:block;font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attendance-v30-session-strip small{display:block;margin-top:2px;color:var(--muted);font-size:.52rem;white-space:nowrap}
.attendance-v30-session-strip i{position:absolute;right:6px;top:6px;width:6px;height:6px;border-radius:50%;background:#f59e0b}

.attendance-v30-summary{display:grid;grid-template-columns:minmax(180px,1.35fr) repeat(5,minmax(84px,.7fr));gap:0;border:1px solid var(--border);border-radius:15px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow-sm)}
.attendance-v30-summary-main{padding:12px 14px;border-right:1px solid var(--border)}
.attendance-v30-status{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:999px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent);font-size:.54rem;font-weight:800}
.attendance-v30-status.is-finalized{background:var(--surface-soft);color:var(--muted)}
.attendance-v30-status .ui-icon{width:12px;height:12px}
.attendance-v30-summary-main>strong{display:block;margin-top:7px;font-size:1.35rem;letter-spacing:-.025em}
.attendance-v30-summary-main>small{display:block;color:var(--muted);font-size:.55rem}
.attendance-v30-summary-main>div{height:5px;margin-top:8px;border-radius:999px;background:color-mix(in srgb,var(--border) 70%,transparent);overflow:hidden}
.attendance-v30-summary-main i{display:block;width:var(--attendance-percent,0%);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 58%,#fff));transition:width .18s ease}
.attendance-v30-summary-stat{display:flex;flex-direction:column;justify-content:center;padding:11px;border-left:1px solid var(--border)}
.attendance-v30-summary-main+.attendance-v30-summary-stat{border-left:0}
.attendance-v30-summary-stat small{color:var(--muted);font-size:.54rem}
.attendance-v30-summary-stat strong{margin-top:3px;font-size:.95rem}
.attendance-v30-summary-stat.stat-present strong{color:#16855b}.attendance-v30-summary-stat.stat-absent strong{color:#b42318}.attendance-v30-summary-stat.stat-late strong{color:#a96200}

.attendance-v30-content-grid{display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:10px;align-items:start}
.attendance-v30-sheet,.attendance-v30-side>section,.attendance-v30-corrections{border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:var(--shadow-sm)}
.attendance-v30-sheet{min-width:0;padding:11px}
.attendance-v30-sheet-head,.attendance-v30-side-head{display:flex;align-items:flex-start;justify-content:space-between;gap:9px}
.attendance-v30-sheet-head{padding:1px 1px 9px}
.attendance-v30-sheet-head small,.attendance-v30-side-head small,.attendance-v30-corrections-head small{display:block;color:var(--muted);font-size:.53rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.attendance-v30-sheet-head h3,.attendance-v30-side-head h3,.attendance-v30-corrections-head h3{margin:2px 0 0;font-size:.76rem}
.attendance-v30-save-state,.attendance-v30-side-head>span{max-width:150px;padding:4px 7px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.52rem;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attendance-v30-save-state.is-dirty{color:#a96200;background:color-mix(in srgb,#f59e0b 9%,var(--surface))}.attendance-v30-save-state.is-saving{color:#a96200}.attendance-v30-save-state.is-saved{color:#16855b;background:color-mix(in srgb,#22c55e 8%,var(--surface))}.attendance-v30-save-state.is-error{color:#b42318;background:color-mix(in srgb,#ef4444 8%,var(--surface))}.attendance-v30-save-state.is-local{color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.attendance-v30-row-tools{display:grid;grid-template-columns:minmax(190px,1fr) auto auto;align-items:center;gap:6px;padding:7px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft)}
.attendance-v30-search{height:33px;display:grid;grid-template-columns:15px minmax(0,1fr);align-items:center;gap:6px;padding:0 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.attendance-v30-search .ui-icon{width:14px;height:14px;color:var(--muted)}
.attendance-v30-search input{min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:.63rem}
.attendance-v30-row-filters{display:flex;gap:2px;overflow:auto;scrollbar-width:none}.attendance-v30-row-filters::-webkit-scrollbar{display:none}
.attendance-v30-row-filters button{height:29px;padding:0 7px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:.56rem;font-weight:750;cursor:pointer;white-space:nowrap}
.attendance-v30-row-filters button.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)}
.attendance-v30-bulk{height:29px;display:flex;align-items:center;gap:4px;padding:0 8px;border:0;border-radius:7px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent);font-size:.56rem;font-weight:800;cursor:pointer;white-space:nowrap}.attendance-v30-bulk .ui-icon{width:13px;height:13px}
.attendance-v30-list{display:grid;margin-top:7px}
.attendance-v30-row{display:grid;grid-template-columns:34px minmax(140px,1.2fr) minmax(120px,.85fr) auto;align-items:center;gap:8px;min-height:58px;padding:7px 5px;border-top:1px solid var(--border);outline:0}
.attendance-v30-row:first-child{border-top:0}.attendance-v30-row[hidden]{display:none!important}.attendance-v30-row:focus{border-radius:9px;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 3%,var(--surface))}
.attendance-v30-avatar{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent);font-size:.66rem;font-weight:850}
.attendance-v30-person{min-width:0}.attendance-v30-person strong{display:block;font-size:.65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attendance-v30-person small{display:block;margin-top:2px;color:var(--muted);font-size:.53rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attendance-v30-history{min-width:0}.attendance-v30-history b{display:flex;align-items:center;gap:4px;color:#a96200;font-size:.53rem}.attendance-v30-history b .ui-icon{width:12px;height:12px}.attendance-v30-history small{color:var(--muted);font-size:.52rem}
.attendance-v30-status-control{display:flex;gap:3px;margin:0;padding:0;border:0}.attendance-v30-status-control label{cursor:pointer}.attendance-v30-status-control input{position:absolute;opacity:0;pointer-events:none}.attendance-v30-status-control span{width:31px;height:31px;display:grid;place-items:center;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--muted);font-size:.58rem;font-weight:850;transition:.12s ease}.attendance-v30-status-control label:hover span{border-color:color-mix(in srgb,var(--accent) 25%,var(--border));color:var(--text)}
.attendance-v30-status-control input[value="present"]:checked+span{background:color-mix(in srgb,#22c55e 11%,var(--surface));border-color:color-mix(in srgb,#22c55e 28%,var(--border));color:#16855b}.attendance-v30-status-control input[value="absent"]:checked+span{background:color-mix(in srgb,#ef4444 9%,var(--surface));border-color:color-mix(in srgb,#ef4444 24%,var(--border));color:#b42318}.attendance-v30-status-control input[value="late"]:checked+span{background:color-mix(in srgb,#f59e0b 10%,var(--surface));border-color:color-mix(in srgb,#f59e0b 28%,var(--border));color:#a96200}.attendance-v30-status-control input[value="excused"]:checked+span{background:color-mix(in srgb,var(--accent) 9%,var(--surface));border-color:color-mix(in srgb,var(--accent) 24%,var(--border));color:var(--accent)}
.attendance-v30-readonly-status{justify-self:end;display:flex;align-items:center;gap:4px;padding:5px 7px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.55rem;font-weight:800}.attendance-v30-readonly-status .ui-icon{width:12px;height:12px}.attendance-v30-readonly-status.status-present{color:#16855b}.attendance-v30-readonly-status.status-absent{color:#b42318}.attendance-v30-readonly-status.status-late{color:#a96200}.attendance-v30-readonly-status.status-excused{color:var(--accent)}
.attendance-v30-no-results{padding:22px;text-align:center;color:var(--muted);font-size:.61rem}
.attendance-v30-form-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:9px;border-top:1px solid var(--border)}
.attendance-v30-form-foot>div{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:var(--muted);font-size:.5rem}.attendance-v30-form-foot kbd{padding:2px 4px;border:1px solid var(--border);border-radius:4px;background:var(--surface-soft);color:var(--text);font:inherit}.attendance-v30-form-foot>div>small{width:100%}

.attendance-v30-side{display:grid;gap:8px;position:sticky;top:88px}.attendance-v30-side>section{padding:10px}
.attendance-v30-note-card form{display:grid;gap:7px;margin-top:8px}.attendance-v30-note-card textarea{width:100%;padding:8px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:var(--text);resize:vertical;outline:0;font-size:.62rem;line-height:1.45}.attendance-v30-note-card>p{margin:8px 0 0;color:var(--muted);font-size:.61rem;line-height:1.5}.attendance-v30-note-card textarea:focus{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)}
.attendance-v30-readiness-line{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-size:.58rem}.attendance-v30-readiness-line span{color:var(--muted)}.attendance-v30-readiness>form{margin-top:9px}.attendance-v30-readiness>form .btn{width:100%}.attendance-v30-readiness>small{display:block;margin-top:6px;color:var(--muted);font-size:.52rem;line-height:1.4}
.attendance-v30-finalized-message{display:flex;align-items:flex-start;gap:7px;margin-top:8px;padding:8px;border-radius:9px;background:var(--surface-soft);color:var(--muted)}.attendance-v30-finalized-message>.ui-icon{width:15px;height:15px;color:var(--accent);flex:0 0 auto}.attendance-v30-finalized-message p{margin:0}.attendance-v30-finalized-message strong{display:block;color:var(--text);font-size:.6rem}.attendance-v30-finalized-message small{display:block;margin-top:2px;font-size:.52rem;line-height:1.4}
.attendance-v30-history-card>div:last-child{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px}.attendance-v30-history-card>div:last-child span{padding:7px;border-radius:8px;background:var(--surface-soft)}.attendance-v30-history-card b{display:block;font-size:.72rem}.attendance-v30-history-card small{display:block;margin-top:1px;color:var(--muted);font-size:.49rem}

.attendance-v30-corrections{padding:11px}.attendance-v30-corrections-head{display:flex;align-items:flex-start;justify-content:space-between;gap:9px;padding-bottom:8px}.attendance-v30-corrections-head p{margin:2px 0 0;color:var(--muted);font-size:.56rem}.attendance-v30-corrections-head>span{min-width:24px;height:24px;display:grid;place-items:center;border-radius:999px;background:color-mix(in srgb,#f59e0b 10%,var(--surface));color:#a96200;font-size:.57rem;font-weight:850}
.attendance-v30-correction-list{display:grid;gap:6px}.attendance-v30-correction-list article{display:grid;grid-template-columns:minmax(170px,.8fr) minmax(220px,1.1fr) minmax(240px,1fr);align-items:center;gap:10px;padding:9px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft)}
.attendance-v30-correction-person{display:flex;align-items:center;gap:8px;min-width:0}.attendance-v30-correction-person strong{display:block;font-size:.62rem}.attendance-v30-correction-person small{display:block;margin-top:2px;color:var(--muted);font-size:.52rem}
.attendance-v30-correction-request small{color:var(--muted);font-size:.5rem}.attendance-v30-correction-request strong{display:block;margin-top:1px;font-size:.62rem}.attendance-v30-correction-request p{margin:2px 0 0;color:var(--muted);font-size:.54rem;line-height:1.35}.attendance-v30-correction-request a{display:inline-block;margin-top:3px;color:var(--accent);font-size:.52rem;font-weight:750;text-decoration:none}
.attendance-v30-correction-list form{display:grid;gap:5px}.attendance-v30-correction-list form input{height:32px;padding:0 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:.57rem}.attendance-v30-correction-list form>div{display:flex;justify-content:flex-end;gap:5px}.attendance-v30-correction-list form .btn{min-height:30px;padding:0 9px;font-size:.55rem}
.attendance-v30-empty{padding:10px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}

@media(max-width:1180px){.attendance-v30-content-grid{grid-template-columns:1fr}.attendance-v30-side{grid-template-columns:repeat(3,1fr);position:static}.attendance-v30-summary{grid-template-columns:1.2fr repeat(5,.7fr)}.attendance-v30-correction-list article{grid-template-columns:1fr 1fr}.attendance-v30-correction-list form{grid-column:1/-1}}
@media(max-width:900px){.attendance-v30-header{align-items:flex-start;flex-direction:column}.attendance-v30-header-actions{width:100%;justify-content:space-between}.attendance-v30-session-tools{align-items:stretch;flex-direction:column}.attendance-v30-session-select{width:100%;min-width:0}.attendance-v30-summary{grid-template-columns:repeat(3,1fr)}.attendance-v30-summary-main{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--border)}.attendance-v30-summary-stat{border-top:0}.attendance-v30-summary-main+.attendance-v30-summary-stat{border-left:0}.attendance-v30-row-tools{grid-template-columns:1fr}.attendance-v30-bulk{justify-self:start}.attendance-v30-row{grid-template-columns:34px minmax(0,1fr) auto}.attendance-v30-history{display:none}.attendance-v30-side{grid-template-columns:1fr}.attendance-v30-correction-list article{grid-template-columns:1fr}}
@media(max-width:560px){.attendance-workspace-v30{gap:8px}.attendance-v30-header-actions{align-items:flex-start}.attendance-v30-new-form{position:fixed;left:10px;right:10px;top:90px;width:auto;max-height:calc(100dvh - 110px);overflow:auto}.attendance-v30-session-nav>span:not(.disabled){display:none}.attendance-v30-session-filters{width:100%}.attendance-v30-summary{grid-template-columns:repeat(2,1fr)}.attendance-v30-summary-main{grid-column:1/-1}.attendance-v30-row{grid-template-columns:30px minmax(0,1fr);gap:6px;padding-block:9px}.attendance-v30-avatar{width:29px;height:29px}.attendance-v30-status-control,.attendance-v30-readonly-status{grid-column:1/-1;justify-self:stretch;margin-left:36px}.attendance-v30-status-control span{width:100%;min-width:43px}.attendance-v30-status-control label{flex:1}.attendance-v30-readonly-status{justify-content:center}.attendance-v30-form-foot{align-items:stretch;flex-direction:column}.attendance-v30-form-foot .btn{width:100%}.attendance-v30-new-form>div{grid-template-columns:1fr}.attendance-v30-correction-list form>div .btn{flex:1}}


/* =====================================================================
   QUIZ MANAGEMENT V31
   Rich, calm assessment studio for lecturer course management
   ===================================================================== */
.quiz-workspace-v31{display:grid;gap:13px}
.quiz-v31-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:2px 2px 0}
.quiz-v31-kicker{display:block;color:var(--accent);font-size:.59rem;font-weight:850;letter-spacing:.085em;text-transform:uppercase}
.quiz-v31-header h2{margin:4px 0 4px;font-size:1.12rem;letter-spacing:-.025em}
.quiz-v31-header p{margin:0;color:var(--muted);font-size:.68rem}
.quiz-v31-header>.btn{display:inline-flex;align-items:center;gap:6px;min-height:38px;white-space:nowrap}
.quiz-v31-header>.btn .ui-icon{width:15px;height:15px}

.quiz-v31-summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:hidden;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--surface) 95%,transparent);box-shadow:0 12px 30px rgba(15,23,42,.045)}
.quiz-v31-summary>button,.quiz-v31-summary-static{min-width:0;min-height:64px;display:flex;align-items:center;gap:9px;padding:10px 12px;border:0;border-left:1px solid var(--border);background:transparent;color:var(--text);text-align:left}
.quiz-v31-summary>button:first-child{border-left:0}
.quiz-v31-summary>button{cursor:pointer;transition:background .14s ease,color .14s ease}
.quiz-v31-summary>button:hover,.quiz-v31-summary>button.active{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.quiz-v31-summary>button.active{color:var(--accent)}
.quiz-v31-summary>button>span,.quiz-v31-summary-static>span{width:31px;height:31px;flex:0 0 31px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--accent)}
.quiz-v31-summary .ui-icon{width:15px;height:15px}
.quiz-v31-summary strong{display:block;font-size:.92rem;line-height:1}
.quiz-v31-summary small{display:block;margin-top:4px;color:var(--muted);font-size:.55rem;font-weight:700}

.quiz-v31-layout{display:grid;grid-template-columns:276px minmax(0,1fr);gap:11px;align-items:start}
.quiz-v31-library{position:sticky;top:88px;min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 16px 36px rgba(15,23,42,.045)}
.quiz-v31-library-head{height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 11px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,color-mix(in srgb,var(--surface-soft) 55%,var(--surface)),var(--surface))}
.quiz-v31-library-head strong{display:block;font-size:.72rem}
.quiz-v31-library-head small{display:block;margin-top:2px;color:var(--muted);font-size:.54rem}
.quiz-v31-library-head>a{width:31px;height:31px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--accent);text-decoration:none}
.quiz-v31-library-head>a .ui-icon{width:14px;height:14px}
.quiz-v31-search{height:34px;display:grid;grid-template-columns:15px minmax(0,1fr);align-items:center;gap:6px;margin:9px 9px 6px;padding:0 9px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft)}
.quiz-v31-search:focus-within{border-color:color-mix(in srgb,var(--accent) 42%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 7%,transparent)}
.quiz-v31-search .ui-icon{width:14px;height:14px;color:var(--muted)}
.quiz-v31-search input{min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:.65rem}
.quiz-v31-filter-chips{display:flex;gap:3px;padding:0 9px 8px;overflow-x:auto;scrollbar-width:none}
.quiz-v31-filter-chips::-webkit-scrollbar{display:none}
.quiz-v31-filter-chips button{height:26px;padding:0 7px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:.56rem;font-weight:750;cursor:pointer;white-space:nowrap}
.quiz-v31-filter-chips button:hover{background:var(--surface-soft);color:var(--text)}
.quiz-v31-filter-chips button.active{background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent)}
.quiz-v31-library-list{max-height:calc(100dvh - 226px);overflow:auto;scrollbar-width:none}
.quiz-v31-library-list::-webkit-scrollbar{display:none}
.quiz-v31-library-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:62px;padding:8px 9px;border-top:1px solid var(--border);color:var(--text);text-decoration:none;transition:background .13s ease,box-shadow .13s ease}
.quiz-v31-library-item[hidden]{display:none!important}
.quiz-v31-library-item:hover{background:var(--surface-soft)}
.quiz-v31-library-item.active{background:color-mix(in srgb,var(--accent) 6%,var(--surface));box-shadow:inset 3px 0 0 var(--accent)}
.quiz-v31-library-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--accent) 7%,var(--surface-soft));color:var(--accent)}
.quiz-v31-library-icon .ui-icon{width:15px;height:15px}
.quiz-v31-library-copy{min-width:0}
.quiz-v31-library-copy strong{display:block;font-size:.65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quiz-v31-library-copy small{display:block;margin-top:3px;color:var(--muted);font-size:.52rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quiz-v31-state{display:inline-flex;align-items:center;justify-content:center;min-height:21px;padding:0 6px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.5rem;font-weight:850;white-space:nowrap}
.quiz-v31-state.state-open{background:color-mix(in srgb,#22c55e 10%,var(--surface));color:#16855b}
.quiz-v31-state.state-scheduled{background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent)}
.quiz-v31-state.state-draft{background:color-mix(in srgb,#f59e0b 9%,var(--surface));color:#9a6208}
.quiz-v31-state.state-closed{background:color-mix(in srgb,#64748b 9%,var(--surface));color:#64748b}
.quiz-v31-no-results,.quiz-v31-library-empty{padding:22px 10px;text-align:center;color:var(--muted);font-size:.6rem}

.quiz-v31-main{min-width:0;display:grid;gap:11px}
.quiz-v31-current-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 14px;border:1px solid var(--border);border-radius:16px;background:
    radial-gradient(circle at 93% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 34%),
    var(--surface);box-shadow:0 16px 38px rgba(15,23,42,.045)}
.quiz-v31-current-title{display:flex;align-items:center;gap:11px;min-width:0}
.quiz-v31-current-icon{width:43px;height:43px;flex:0 0 43px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 11%,var(--surface)),color-mix(in srgb,var(--accent) 4%,var(--surface)));color:var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.42)}
.quiz-v31-current-icon .ui-icon{width:20px;height:20px}
.quiz-v31-current-title>div:last-child{min-width:0}
.quiz-v31-mode{display:inline-flex;margin-left:5px;color:var(--muted);font-size:.52rem;font-weight:750}
.quiz-v31-current-title h3{margin:5px 0 2px;font-size:1rem;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quiz-v31-current-title p{margin:0;color:var(--muted);font-size:.58rem}
.quiz-v31-current-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}
.quiz-v31-current-actions form{margin:0}
.quiz-v31-current-actions .btn{min-height:34px;display:inline-flex;align-items:center;gap:5px;padding-inline:9px;font-size:.61rem}
.quiz-v31-current-actions .btn .ui-icon{width:13px;height:13px}

.quiz-v31-current-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.quiz-v31-current-metrics>div{display:flex;align-items:center;gap:8px;min-height:58px;padding:8px 11px;border-left:1px solid var(--border)}
.quiz-v31-current-metrics>div:first-child{border-left:0}
.quiz-v31-current-metrics>div>span{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--accent)}
.quiz-v31-current-metrics .ui-icon{width:14px;height:14px}
.quiz-v31-current-metrics p{margin:0}
.quiz-v31-current-metrics small{display:block;color:var(--muted);font-size:.52rem}
.quiz-v31-current-metrics strong{display:block;margin-top:2px;font-size:.78rem}

.quiz-v31-tabs{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.quiz-v31-tabs a{height:34px;display:flex;align-items:center;gap:6px;padding:0 10px;border-radius:9px;color:var(--muted);font-size:.62rem;font-weight:800;text-decoration:none}
.quiz-v31-tabs a:hover{background:var(--surface-soft);color:var(--text)}
.quiz-v31-tabs a.active{background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent)}
.quiz-v31-tabs .ui-icon{width:14px;height:14px}
.quiz-v31-tabs b{min-width:19px;height:19px;display:grid;place-items:center;border-radius:999px;background:var(--surface-soft);font-size:.53rem}

.quiz-v31-create{padding:15px;border:1px solid var(--border);border-radius:17px;background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 32%),
    var(--surface);box-shadow:0 18px 40px rgba(15,23,42,.045)}
.quiz-v31-create-intro{display:flex;align-items:flex-start;gap:11px;padding-bottom:13px;border-bottom:1px solid var(--border)}
.quiz-v31-create-intro>span{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent)}
.quiz-v31-create-intro .ui-icon{width:20px;height:20px}
.quiz-v31-create-intro small{display:block;color:var(--accent);font-size:.56rem;font-weight:850;text-transform:uppercase;letter-spacing:.07em}
.quiz-v31-create-intro h3{margin:3px 0 3px;font-size:.93rem}
.quiz-v31-create-intro p{max-width:680px;margin:0;color:var(--muted);font-size:.63rem;line-height:1.45}
.quiz-v31-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:13px}
.quiz-v31-form.compact{display:grid;grid-template-columns:1fr;gap:9px;margin-top:0}
.quiz-v31-form>label,.quiz-v31-form-grid>label,.quiz-v31-question-form>label{display:grid;gap:5px}
.quiz-v31-form label>span,.quiz-v31-question-form label>span{color:var(--muted);font-size:.56rem;font-weight:800}
.quiz-v31-field-wide{grid-column:1/-1}
.quiz-v31-form input,.quiz-v31-form select,.quiz-v31-form textarea,.quiz-v31-question-form input,.quiz-v31-question-form textarea{width:100%;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:var(--text);outline:0}
.quiz-v31-form input,.quiz-v31-form select,.quiz-v31-question-form input{height:37px;padding:0 9px}
.quiz-v31-form textarea,.quiz-v31-question-form textarea{padding:8px 9px;resize:vertical;line-height:1.45}
.quiz-v31-form input:focus,.quiz-v31-form select:focus,.quiz-v31-form textarea:focus,.quiz-v31-question-form input:focus,.quiz-v31-question-form textarea:focus{border-color:color-mix(in srgb,var(--accent) 43%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 7%,transparent)}
.quiz-v31-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;grid-column:1/-1}
.quiz-v31-form.compact .quiz-v31-form-grid{grid-column:auto}
.quiz-v31-form-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:3px}
.quiz-v31-form-actions>span{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:.56rem}
.quiz-v31-form-actions .ui-icon{width:14px;height:14px;color:#16855b}

.quiz-v31-builder-grid{display:grid;grid-template-columns:318px minmax(0,1fr);gap:10px;align-items:start}
.quiz-v31-settings,.quiz-v31-question-builder,.quiz-v31-external{min-width:0;padding:12px;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:0 12px 30px rgba(15,23,42,.035)}
.quiz-v31-settings{position:sticky;top:88px}
.quiz-v31-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.quiz-v31-panel-head small{display:block;color:var(--muted);font-size:.53rem;font-weight:850;text-transform:uppercase;letter-spacing:.065em}
.quiz-v31-panel-head h3{margin:2px 0 0;font-size:.78rem}
.quiz-v31-panel-head>span:not(.quiz-v31-points){width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--accent)}
.quiz-v31-panel-head .ui-icon{width:14px;height:14px}
.quiz-v31-points{padding:4px 7px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.54rem;font-weight:800}
.quiz-v31-readiness{display:grid;gap:5px;margin:10px 0}
.quiz-v31-readiness>div{display:grid;grid-template-columns:31px minmax(0,1fr);align-items:center;gap:7px;padding:7px;border-radius:9px;background:var(--surface-soft)}
.quiz-v31-readiness>div>span{width:29px;height:29px;display:grid;place-items:center;border-radius:8px;background:var(--surface);color:var(--muted)}
.quiz-v31-readiness>div>span.ready{color:#16855b}
.quiz-v31-readiness>div>span.attention{color:#a96200}
.quiz-v31-readiness .ui-icon{width:14px;height:14px}
.quiz-v31-readiness p{margin:0}
.quiz-v31-readiness strong{display:block;font-size:.6rem}
.quiz-v31-readiness small{display:block;margin-top:2px;color:var(--muted);font-size:.52rem}

.quiz-v31-lock-note{display:flex;align-items:flex-start;gap:8px;margin:10px 0;padding:9px;border:1px solid color-mix(in srgb,#f59e0b 20%,var(--border));border-radius:10px;background:color-mix(in srgb,#f59e0b 5%,var(--surface));color:#8a5a08}
.quiz-v31-lock-note>.ui-icon{width:16px;height:16px;flex:0 0 16px;margin-top:1px}
.quiz-v31-lock-note strong{display:block;font-size:.62rem}
.quiz-v31-lock-note p{margin:2px 0 0;color:var(--muted);font-size:.55rem;line-height:1.4}

.quiz-v31-question-list{display:grid;gap:8px;margin-top:10px}
.quiz-v31-question-card{border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--surface-soft) 38%,var(--surface));overflow:hidden}
.quiz-v31-question-card>header{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:start;gap:8px;padding:10px}
.quiz-v31-question-number{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--surface);color:var(--accent);font-size:.62rem;font-weight:900}
.quiz-v31-question-card>header small{display:block;color:var(--muted);font-size:.51rem;font-weight:750}
.quiz-v31-question-card h4{margin:2px 0 0;font-size:.67rem;line-height:1.35}
.quiz-v31-question-lock{display:flex;align-items:center;gap:4px;padding:4px 6px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:.5rem;font-weight:800}
.quiz-v31-question-lock .ui-icon{width:11px;height:11px}
.quiz-v31-option-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:0 10px 9px 48px}
.quiz-v31-option-preview>span{min-width:0;display:flex;align-items:center;gap:5px;padding:6px 7px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--muted);font-size:.55rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quiz-v31-option-preview>span.correct{border-color:color-mix(in srgb,#22c55e 25%,var(--border));background:color-mix(in srgb,#22c55e 5%,var(--surface));color:#16855b}
.quiz-v31-option-preview i{font-style:normal;font-weight:900}
.quiz-v31-explanation{margin:0 10px 9px 48px;padding:7px 8px;border-radius:8px;background:var(--surface);color:var(--muted);font-size:.54rem;line-height:1.4}
.quiz-v31-explanation strong{color:var(--text)}
.quiz-v31-question-card>footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border-top:1px solid var(--border);background:var(--surface)}
.quiz-v31-question-move,.quiz-v31-question-actions{display:flex;align-items:center;gap:4px}
.quiz-v31-question-move form,.quiz-v31-question-actions form{margin:0}
.quiz-v31-question-move button{width:27px;height:27px;border:1px solid var(--border);border-radius:7px;background:var(--surface-soft);color:var(--muted);cursor:pointer}
.quiz-v31-question-move button:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 25%,var(--border))}
.quiz-v31-question-actions details{position:relative}
.quiz-v31-question-actions details>summary,.quiz-v31-text-action{height:27px;display:flex;align-items:center;gap:4px;padding:0 7px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:.53rem;font-weight:800;cursor:pointer;list-style:none}
.quiz-v31-question-actions details>summary::-webkit-details-marker{display:none}
.quiz-v31-question-actions details>summary:hover,.quiz-v31-text-action:hover{background:var(--surface-soft);color:var(--text)}
.quiz-v31-text-action .ui-icon{width:12px;height:12px}
.quiz-v31-text-action.danger{color:#a33a32}
.quiz-v31-answer-count{color:var(--muted);font-size:.52rem}
.quiz-v31-question-actions details[open]{width:100%}
.quiz-v31-question-actions details[open] .quiz-v31-question-form.edit{position:absolute;z-index:15;right:0;bottom:34px;width:min(480px,70vw);max-height:70vh;overflow:auto;padding:11px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 20px 55px rgba(15,23,42,.18)}

.quiz-v31-question-form{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:8px}
.quiz-v31-question-form>label:first-of-type,.quiz-v31-option-editor,.quiz-v31-add-option,.quiz-v31-question-form>label:last-of-type,.quiz-v31-question-form>.btn{grid-column:1/-1}
.quiz-v31-small-field{grid-column:2}
.quiz-v31-option-editor{display:grid;gap:5px}
.quiz-v31-option-row{display:grid;grid-template-columns:76px minmax(0,1fr) 28px;align-items:center;gap:5px}
.quiz-v31-correct-radio{height:34px;display:flex!important;align-items:center;justify-content:center;gap:5px;padding:0 6px;border:1px solid var(--border);border-radius:8px;background:var(--surface-soft);cursor:pointer}
.quiz-v31-correct-radio input{width:13px!important;height:13px!important;padding:0!important}
.quiz-v31-correct-radio span{margin:0!important;font-size:.5rem!important}
.quiz-v31-option-row>input{height:34px!important}
.quiz-v31-option-row>button{width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:1rem;cursor:pointer}
.quiz-v31-option-row>button:hover{background:color-mix(in srgb,#ef4444 8%,var(--surface));color:#b42318}
.quiz-v31-option-row>button:disabled{opacity:.25;cursor:not-allowed}
.quiz-v31-add-option{justify-self:start;border:0;background:transparent;color:var(--accent);font-size:.55rem;font-weight:800;cursor:pointer}
.quiz-v31-question-form label span small{font-weight:600;color:var(--muted)}
.quiz-v31-add-question{margin-top:10px;border:1px dashed color-mix(in srgb,var(--accent) 25%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--accent) 2%,var(--surface))}
.quiz-v31-add-question>summary{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px;list-style:none;cursor:pointer}
.quiz-v31-add-question>summary::-webkit-details-marker{display:none}
.quiz-v31-add-question>summary>span{display:flex;align-items:center;gap:5px;color:var(--accent);font-size:.62rem;font-weight:850}
.quiz-v31-add-question>summary .ui-icon{width:14px;height:14px}
.quiz-v31-add-question>summary small{color:var(--muted);font-size:.51rem}
.quiz-v31-add-question>.quiz-v31-question-form{padding:0 10px 10px}
.quiz-v31-question-empty{display:flex;align-items:center;gap:9px;margin-top:10px;padding:18px 10px;border-radius:10px;background:var(--surface-soft)}
.quiz-v31-question-empty>span{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--surface);color:var(--accent)}
.quiz-v31-question-empty .ui-icon{width:16px;height:16px}
.quiz-v31-question-empty strong{display:block;font-size:.64rem}
.quiz-v31-question-empty small{display:block;margin-top:2px;color:var(--muted);font-size:.54rem;line-height:1.4}

.quiz-v31-external{display:flex;align-items:flex-start;gap:12px;padding:20px}
.quiz-v31-external-icon{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent)}
.quiz-v31-external-icon .ui-icon{width:21px;height:21px}
.quiz-v31-external small{display:block;color:var(--accent);font-size:.55rem;font-weight:850;text-transform:uppercase;letter-spacing:.07em}
.quiz-v31-external h3{margin:4px 0 4px;font-size:.9rem}
.quiz-v31-external p{max-width:650px;margin:0 0 10px;color:var(--muted);font-size:.62rem;line-height:1.5}

.quiz-v31-attempts{display:grid;gap:10px}
.quiz-v31-attempt-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.quiz-v31-attempt-summary>div{min-width:0;padding:10px 12px;border-left:1px solid var(--border)}
.quiz-v31-attempt-summary>div:first-child{border-left:0}
.quiz-v31-attempt-summary small{display:block;color:var(--muted);font-size:.53rem;font-weight:750}
.quiz-v31-attempt-summary strong{display:block;margin-top:2px;font-size:.9rem}
.quiz-v31-attempt-summary span{display:block;margin-top:2px;color:var(--muted);font-size:.5rem}
.quiz-v31-attempt-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.quiz-v31-attempt-tools>label{width:min(330px,38vw);height:34px;display:grid;grid-template-columns:15px minmax(0,1fr);align-items:center;gap:6px;padding:0 9px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft)}
.quiz-v31-attempt-tools>label .ui-icon{width:14px;height:14px;color:var(--muted)}
.quiz-v31-attempt-tools>label input{min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:.63rem}
.quiz-v31-attempt-tools>div{display:flex;gap:3px;overflow-x:auto;scrollbar-width:none}
.quiz-v31-attempt-tools button{height:30px;display:flex;align-items:center;gap:4px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:.56rem;font-weight:750;white-space:nowrap;cursor:pointer}
.quiz-v31-attempt-tools button.active{background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}
.quiz-v31-attempt-tools button b{min-width:18px;height:18px;display:grid;place-items:center;border-radius:999px;background:var(--surface-soft);font-size:.5rem}

.quiz-v31-attempt-layout{display:grid;grid-template-columns:285px minmax(0,1fr);gap:9px;align-items:start}
.quiz-v31-attempt-list,.quiz-v31-attempt-detail{min-width:0;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.quiz-v31-attempt-list{max-height:calc(100dvh - 220px);overflow:auto;scrollbar-width:none}
.quiz-v31-attempt-list::-webkit-scrollbar{display:none}
.quiz-v31-attempt-list>a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:59px;padding:7px 9px;border-top:1px solid var(--border);color:var(--text);text-decoration:none}
.quiz-v31-attempt-list>a:first-child{border-top:0}
.quiz-v31-attempt-list>a[hidden]{display:none!important}
.quiz-v31-attempt-list>a:hover{background:var(--surface-soft)}
.quiz-v31-attempt-list>a.active{background:color-mix(in srgb,var(--accent) 6%,var(--surface));box-shadow:inset 3px 0 0 var(--accent)}
.quiz-v31-attempt-avatar{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 9%,var(--surface-soft));color:var(--accent);font-size:.66rem;font-weight:850}
.quiz-v31-attempt-avatar.large{width:40px;height:40px;font-size:.76rem}
.quiz-v31-attempt-list a>span:nth-child(2){min-width:0}
.quiz-v31-attempt-list a>span:nth-child(2) strong{display:block;font-size:.63rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quiz-v31-attempt-list a>span:nth-child(2) small{display:block;margin-top:2px;color:var(--muted);font-size:.51rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quiz-v31-attempt-score{text-align:right}
.quiz-v31-attempt-score strong{display:block;font-size:.64rem}
.quiz-v31-attempt-score.pass strong{color:#16855b}
.quiz-v31-attempt-score.below strong{color:#a96200}
.quiz-v31-attempt-score small{display:block;margin-top:2px;color:var(--muted);font-size:.49rem}
.quiz-v31-attempt-no-results{padding:22px 9px;text-align:center;color:var(--muted);font-size:.58rem}

.quiz-v31-attempt-detail{padding:12px}
.quiz-v31-attempt-detail>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.quiz-v31-attempt-person{display:flex;align-items:center;gap:9px;min-width:0}
.quiz-v31-attempt-person>div{min-width:0}
.quiz-v31-attempt-person small{display:block;color:var(--muted);font-size:.52rem;font-weight:750;text-transform:uppercase;letter-spacing:.05em}
.quiz-v31-attempt-person h3{margin:2px 0;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quiz-v31-attempt-person p{margin:0;color:var(--muted);font-size:.53rem}
.quiz-v31-attempt-nav{display:flex;align-items:center;gap:4px}
.quiz-v31-attempt-nav>a,.quiz-v31-attempt-nav>span{width:29px;height:29px;display:grid;place-items:center;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);text-decoration:none}
.quiz-v31-attempt-nav>span{opacity:.35}
.quiz-v31-attempt-nav .ui-icon{width:14px;height:14px}
.quiz-v31-attempt-nav b{min-width:36px;text-align:center;color:var(--muted);font-size:.53rem}
.quiz-v31-result-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0;padding:12px;border-radius:11px;background:var(--surface-soft)}
.quiz-v31-result-hero.pass{background:color-mix(in srgb,#22c55e 6%,var(--surface))}
.quiz-v31-result-hero.below{background:color-mix(in srgb,#f59e0b 6%,var(--surface))}
.quiz-v31-result-hero>div:first-child small{display:block;color:var(--muted);font-size:.53rem}
.quiz-v31-result-hero>div:first-child strong{display:block;margin-top:2px;font-size:1rem}
.quiz-v31-result-hero em{font-style:normal;color:var(--muted);font-size:.64rem}
.quiz-v31-result-hero>div:last-child{text-align:right}
.quiz-v31-result-hero>div:last-child strong{display:block;font-size:1.05rem}
.quiz-v31-result-hero.pass>div:last-child strong{color:#16855b}
.quiz-v31-result-hero.below>div:last-child strong{color:#a96200}
.quiz-v31-result-hero>div:last-child span{display:block;margin-top:2px;color:var(--muted);font-size:.51rem}
.quiz-v31-answer-review{display:grid;gap:7px}
.quiz-v31-answer-review>article{padding:9px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.quiz-v31-answer-review>article.correct{border-left:3px solid #22c55e}
.quiz-v31-answer-review>article.incorrect{border-left:3px solid #f59e0b}
.quiz-v31-answer-review article>header{display:grid;grid-template-columns:27px minmax(0,1fr) auto;align-items:start;gap:7px}
.quiz-v31-answer-review article>header>span{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:var(--surface-soft);color:var(--accent);font-size:.55rem;font-weight:850}
.quiz-v31-answer-review article>header small{display:block;color:var(--muted);font-size:.49rem}
.quiz-v31-answer-review article h4{margin:2px 0 0;font-size:.62rem;line-height:1.35}
.quiz-v31-answer-review article>header>b{padding:3px 6px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.49rem}
.quiz-v31-answer-review article.correct>header>b{color:#16855b;background:color-mix(in srgb,#22c55e 8%,var(--surface))}
.quiz-v31-answer-review article.incorrect>header>b{color:#a96200;background:color-mix(in srgb,#f59e0b 8%,var(--surface))}
.quiz-v31-answer-lines{display:grid;gap:4px;margin-top:7px;padding-left:34px}
.quiz-v31-answer-lines p{display:grid;grid-template-columns:90px minmax(0,1fr);gap:7px;margin:0;padding:5px 7px;border-radius:7px;background:var(--surface-soft)}
.quiz-v31-answer-lines span{color:var(--muted);font-size:.5rem}
.quiz-v31-answer-lines strong{font-size:.54rem;font-weight:750}
.quiz-v31-answer-explanation{margin:6px 0 0 34px;color:var(--muted);font-size:.52rem;line-height:1.4}
.quiz-v31-attempt-empty{display:flex;align-items:center;gap:9px;padding:25px 13px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.quiz-v31-attempt-empty>span{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--surface-soft);color:var(--accent)}
.quiz-v31-attempt-empty .ui-icon{width:18px;height:18px}
.quiz-v31-attempt-empty strong{display:block;font-size:.68rem}
.quiz-v31-attempt-empty small{display:block;margin-top:2px;color:var(--muted);font-size:.56rem}

[data-theme="dark"] .quiz-v31-summary,
[data-theme="dark"] .quiz-v31-current-head,
[data-theme="dark"] .quiz-v31-create{box-shadow:0 16px 42px rgba(0,0,0,.16)}

@media(max-width:1180px){
    .quiz-v31-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
    .quiz-v31-summary>button:nth-child(4){border-left:0;border-top:1px solid var(--border)}
    .quiz-v31-summary>button:nth-child(n+4),.quiz-v31-summary-static{border-top:1px solid var(--border)}
    .quiz-v31-builder-grid{grid-template-columns:280px minmax(0,1fr)}
    .quiz-v31-current-head{align-items:flex-start;flex-direction:column}
    .quiz-v31-current-actions{justify-content:flex-start}
}
@media(max-width:940px){
    .quiz-v31-layout{grid-template-columns:1fr}
    .quiz-v31-library{position:static}
    .quiz-v31-library-list{max-height:250px}
    .quiz-v31-builder-grid{grid-template-columns:1fr}
    .quiz-v31-settings{position:static}
    .quiz-v31-attempt-layout{grid-template-columns:1fr}
    .quiz-v31-attempt-list{max-height:280px}
}
@media(max-width:700px){
    .quiz-v31-header{align-items:flex-start;flex-direction:column;gap:10px}
    .quiz-v31-header>.btn{width:100%;justify-content:center}
    .quiz-v31-current-metrics,.quiz-v31-attempt-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
    .quiz-v31-current-metrics>div:nth-child(3),.quiz-v31-attempt-summary>div:nth-child(3){border-left:0;border-top:1px solid var(--border)}
    .quiz-v31-current-metrics>div:nth-child(4),.quiz-v31-attempt-summary>div:nth-child(4){border-top:1px solid var(--border)}
    .quiz-v31-form{grid-template-columns:1fr}
    .quiz-v31-field-wide,.quiz-v31-form-actions{grid-column:auto}
    .quiz-v31-form-grid{grid-column:auto}
    .quiz-v31-form-actions{align-items:flex-start;flex-direction:column}
    .quiz-v31-form-actions .btn{width:100%}
    .quiz-v31-attempt-tools{align-items:stretch;flex-direction:column}
    .quiz-v31-attempt-tools>label{width:100%}
    .quiz-v31-option-preview{grid-template-columns:1fr}
}
@media(max-width:520px){
    .quiz-workspace-v31{gap:9px}
    .quiz-v31-summary{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:13px}
    .quiz-v31-summary>button,.quiz-v31-summary-static{min-height:56px;padding:8px}
    .quiz-v31-summary>button:nth-child(odd),.quiz-v31-summary-static:nth-child(odd){border-left:0}
    .quiz-v31-summary>button:nth-child(n+3),.quiz-v31-summary-static:nth-child(n+3){border-top:1px solid var(--border)}
    .quiz-v31-current-head{padding:10px;border-radius:13px}
    .quiz-v31-current-title{align-items:flex-start}
    .quiz-v31-current-icon{width:38px;height:38px;flex-basis:38px}
    .quiz-v31-current-title h3{font-size:.86rem}
    .quiz-v31-current-actions{width:100%}
    .quiz-v31-current-actions .btn{flex:1;justify-content:center}
    .quiz-v31-current-actions form{flex:1}
    .quiz-v31-current-actions form .btn{width:100%}
    .quiz-v31-tabs{overflow-x:auto;scrollbar-width:none}
    .quiz-v31-tabs::-webkit-scrollbar{display:none}
    .quiz-v31-settings,.quiz-v31-question-builder,.quiz-v31-create,.quiz-v31-attempt-detail{padding:9px;border-radius:12px}
    .quiz-v31-form-grid{grid-template-columns:1fr}
    .quiz-v31-question-card>header{grid-template-columns:28px minmax(0,1fr)}
    .quiz-v31-question-lock{grid-column:2}
    .quiz-v31-option-preview{padding-left:10px}
    .quiz-v31-explanation{margin-left:10px}
    .quiz-v31-question-card>footer{align-items:flex-start;flex-direction:column}
    .quiz-v31-question-actions{width:100%;flex-wrap:wrap}
    .quiz-v31-question-actions details[open] .quiz-v31-question-form.edit{position:fixed;left:10px;right:10px;bottom:10px;width:auto;max-height:82dvh}
    .quiz-v31-question-form{grid-template-columns:1fr}
    .quiz-v31-question-form>label:first-of-type,.quiz-v31-option-editor,.quiz-v31-add-option,.quiz-v31-question-form>label:last-of-type,.quiz-v31-question-form>.btn,.quiz-v31-small-field{grid-column:auto}
    .quiz-v31-option-row{grid-template-columns:68px minmax(0,1fr) 26px}
    .quiz-v31-attempt-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
    .quiz-v31-attempt-detail>header{align-items:flex-start}
    .quiz-v31-attempt-nav b{display:none}
    .quiz-v31-result-hero{align-items:flex-start;flex-direction:column}
    .quiz-v31-result-hero>div:last-child{text-align:left}
    .quiz-v31-answer-lines{padding-left:0}
    .quiz-v31-answer-lines p{grid-template-columns:1fr}
    .quiz-v31-answer-explanation{margin-left:0}
}
\n\n/* =====================================================================\n   QUIZ MANAGEMENT V31 — CLEAN ALIGNMENT PASS\n   Removes repeated visual layers and aligns the library/editor workspace.\n   ===================================================================== */\n.quiz-workspace-v31{gap:10px}\n.quiz-v31-header{align-items:center;padding:2px 1px 1px}\n.quiz-v31-header h2{margin:3px 0 2px;font-size:1.02rem}\n.quiz-v31-header p{font-size:.63rem}\n.quiz-v31-header>.btn{min-height:36px;padding-inline:13px;border-radius:10px}\n\n/* One compact status/filter strip instead of multiple filter layers. */\n.quiz-v31-summary{border-radius:12px;box-shadow:none}\n.quiz-v31-summary>button,.quiz-v31-summary-static{min-height:50px;gap:7px;padding:7px 10px}\n.quiz-v31-summary>button>span,.quiz-v31-summary-static>span{width:26px;height:26px;flex-basis:26px;border-radius:8px}\n.quiz-v31-summary .ui-icon{width:13px;height:13px}\n.quiz-v31-summary strong{font-size:.78rem}\n.quiz-v31-summary small{margin-top:2px;font-size:.51rem}\n\n/* Library + editor use a strict, calm two-column grid. */\n.quiz-v31-layout{grid-template-columns:238px minmax(0,1fr);gap:10px}\n.quiz-v31-library{border-radius:13px;box-shadow:none}\n.quiz-v31-library-head{height:47px;padding:0 10px;background:var(--surface)}\n.quiz-v31-library-head strong{font-size:.68rem}\n.quiz-v31-library-head small{font-size:.51rem}\n.quiz-v31-search{height:34px;margin:8px;border-radius:8px}\n.quiz-v31-library-list{max-height:calc(100dvh - 188px)}\n.quiz-v31-library-item{grid-template-columns:30px minmax(0,1fr) auto;min-height:57px;gap:7px;padding:7px 8px}\n.quiz-v31-library-icon{width:29px;height:29px;border-radius:8px}\n.quiz-v31-library-copy strong{font-size:.61rem}\n.quiz-v31-library-copy small{font-size:.49rem}\n.quiz-v31-state{min-height:19px;padding-inline:5px;font-size:.47rem}\n\n.quiz-v31-main{gap:8px}\n\n/* Selected quiz header and metrics read as one aligned surface. */\n.quiz-v31-current-head{padding:11px 12px;border-radius:13px 13px 0 0;background:var(--surface);box-shadow:none}\n.quiz-v31-current-icon{width:38px;height:38px;flex-basis:38px;border-radius:10px;box-shadow:none}\n.quiz-v31-current-icon .ui-icon{width:17px;height:17px}\n.quiz-v31-current-title{gap:9px}\n.quiz-v31-current-title h3{margin:3px 0 2px;font-size:.9rem}\n.quiz-v31-current-title p{font-size:.54rem}\n.quiz-v31-current-actions{gap:4px}\n.quiz-v31-current-actions .btn{min-height:32px;padding-inline:8px;border-radius:9px;font-size:.57rem}\n.quiz-v31-current-metrics{margin-top:-8px;border-top:0;border-radius:0 0 13px 13px}\n.quiz-v31-current-metrics>div{min-height:49px;padding:7px 9px}\n.quiz-v31-current-metrics>div>span{width:27px;height:27px;border-radius:8px}\n.quiz-v31-current-metrics .ui-icon{width:13px;height:13px}\n.quiz-v31-current-metrics small{font-size:.49rem}\n.quiz-v31-current-metrics strong{font-size:.7rem}\n\n.quiz-v31-tabs{width:max-content;max-width:100%;padding:3px;border-radius:10px}\n.quiz-v31-tabs a{height:31px;padding:0 9px;border-radius:7px;font-size:.58rem}\n\n/* Builder columns align from the same top edge with consistent panel geometry. */\n.quiz-v31-builder-grid{grid-template-columns:292px minmax(0,1fr);gap:9px}\n.quiz-v31-settings,.quiz-v31-question-builder,.quiz-v31-external{padding:11px;border-radius:13px;box-shadow:none}\n.quiz-v31-panel-head{min-height:39px;padding-bottom:8px}\n.quiz-v31-panel-head h3{font-size:.73rem}\n.quiz-v31-panel-head>span:not(.quiz-v31-points){width:27px;height:27px;border-radius:8px}\n.quiz-v31-form.compact{gap:8px}\n.quiz-v31-form input,.quiz-v31-form select,.quiz-v31-question-form input{height:35px;border-radius:8px}\n.quiz-v31-form textarea,.quiz-v31-question-form textarea{border-radius:8px}\n.quiz-v31-form.compact textarea[name="instructions"]{min-height:112px}\n.quiz-v31-readiness{margin:8px 0}\n.quiz-v31-readiness>div{padding:6px}\n.quiz-v31-question-list{gap:7px;margin-top:8px}\n.quiz-v31-question-card{border-radius:10px}\n.quiz-v31-question-card>header{padding:9px}\n.quiz-v31-option-preview{gap:5px;padding:0 9px 8px 46px}\n.quiz-v31-explanation{margin:0 9px 8px 46px}\n.quiz-v31-lock-note{margin:8px 0;padding:8px}\n\n/* Creation screen uses the same aligned width and reduced visual weight. */\n.quiz-v31-create{padding:13px;border-radius:13px;box-shadow:none}\n.quiz-v31-create-intro{padding-bottom:10px}\n.quiz-v31-create-intro>span{width:38px;height:38px;border-radius:10px}\n\n@media(max-width:1180px){\n  .quiz-v31-layout{grid-template-columns:220px minmax(0,1fr)}\n  .quiz-v31-builder-grid{grid-template-columns:270px minmax(0,1fr)}\n}\n@media(max-width:940px){\n  .quiz-v31-layout{grid-template-columns:1fr}\n  .quiz-v31-library{position:static}\n  .quiz-v31-library-list{max-height:220px}\n  .quiz-v31-builder-grid{grid-template-columns:1fr}\n  .quiz-v31-settings{position:static}\n}\n@media(max-width:700px){\n  .quiz-v31-summary{grid-template-columns:repeat(3,minmax(0,1fr))}\n  .quiz-v31-summary>button,.quiz-v31-summary-static{min-height:47px}\n  .quiz-v31-header{align-items:flex-start}\n  .quiz-v31-tabs{width:100%;overflow-x:auto}\n}\n@media(max-width:520px){\n  .quiz-v31-summary{grid-template-columns:repeat(2,minmax(0,1fr))}\n  .quiz-v31-current-head{border-radius:12px 12px 0 0}\n  .quiz-v31-current-metrics{border-radius:0 0 12px 12px}\n  .quiz-v31-current-actions{margin-top:2px}\n}\n

/* =====================================================================
   ADMINISTRATOR DASHBOARD V33 — simplified executive workspace
   ===================================================================== */
.admin-home-v33{display:grid;gap:12px;max-width:1380px;margin:0 auto}
.admin-v33-hero{position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:22px 24px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 96%,var(--accent) 4%),var(--surface));box-shadow:0 16px 42px rgba(25,20,35,.045)}
.admin-v33-hero::after{content:"";position:absolute;right:-70px;top:-105px;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 12%,transparent),transparent 68%);pointer-events:none}
.admin-v33-hero>div{position:relative;z-index:1}
.admin-v33-eyebrow{display:flex;align-items:center;gap:6px;color:var(--accent);font-size:.63rem;font-weight:850;text-transform:uppercase;letter-spacing:.075em}
.admin-v33-eyebrow .ui-icon{width:14px;height:14px}
.admin-v33-hero h1{margin:6px 0 5px;font-size:clamp(1.65rem,2.4vw,2.35rem);letter-spacing:-.04em}
.admin-v33-hero p{margin:0;color:var(--muted);font-size:.78rem}
.admin-v33-hero-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.admin-v33-hero-actions .btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.admin-v33-hero-actions .ui-icon{width:15px;height:15px}

.admin-v33-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}
.admin-v33-summary>a{min-width:0;display:flex;align-items:center;gap:11px;padding:13px 15px;border-left:1px solid var(--border);color:var(--text);text-decoration:none;transition:background .14s ease}
.admin-v33-summary>a:first-child{border-left:0}
.admin-v33-summary>a:hover{background:var(--surface-soft)}
.admin-v33-summary>a>span{width:35px;height:35px;flex:0 0 35px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}
.admin-v33-summary>a.has-attention>span{background:color-mix(in srgb,#f59e0b 11%,var(--surface));color:#ad6500}
.admin-v33-summary .ui-icon{width:17px;height:17px}
.admin-v33-summary strong{display:block;font-size:1.1rem;line-height:1}
.admin-v33-summary small{display:block;margin-top:4px;color:var(--muted);font-size:.62rem;font-weight:700}

.admin-v33-shortcuts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:7px;border:1px solid var(--border);border-radius:15px;background:color-mix(in srgb,var(--surface) 96%,transparent)}
.admin-v33-shortcuts>a{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;height:39px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:.65rem;font-weight:780;transition:background .14s ease,color .14s ease}
.admin-v33-shortcuts>a:hover{background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}
.admin-v33-shortcuts>a>span{display:grid;place-items:center}
.admin-v33-shortcuts .ui-icon{width:15px;height:15px}

.admin-v33-primary-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.78fr);gap:10px;align-items:start}
.admin-v33-secondary-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:10px}
.admin-v33-panel{min-width:0;padding:13px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 10px 28px rgba(25,20,35,.025)}
.admin-v33-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.admin-v33-panel-head small{display:block;color:var(--muted);font-size:.56rem;font-weight:850;text-transform:uppercase;letter-spacing:.065em}
.admin-v33-panel-head h2{margin:2px 0 0;font-size:.88rem;letter-spacing:-.01em}
.admin-v33-panel-head p{margin:3px 0 0;color:var(--muted);font-size:.6rem}
.admin-v33-panel-head>a{display:flex;align-items:center;gap:4px;color:var(--accent);text-decoration:none;font-size:.61rem;font-weight:800;white-space:nowrap}
.admin-v33-panel-head>a .ui-icon{width:12px;height:12px}

.admin-v33-action-list{display:grid}
.admin-v33-action-list>a{display:grid;grid-template-columns:32px minmax(0,1fr) auto 14px;align-items:center;gap:8px;min-height:49px;padding:6px 2px;border-top:1px solid var(--border);color:var(--text);text-decoration:none}
.admin-v33-action-list>a:first-child{border-top:0}
.admin-v33-action-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--accent)}
.admin-v33-action-icon .ui-icon{width:14px;height:14px}
.admin-v33-action-list strong{display:block;font-size:.68rem}
.admin-v33-action-list small{display:block;margin-top:2px;color:var(--muted);font-size:.56rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-v33-action-list>a>b{min-width:32px;padding:4px 7px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.56rem;text-align:center}
.admin-v33-action-list>a.needs-action>b{background:color-mix(in srgb,#f59e0b 10%,var(--surface));color:#a76000}
.admin-v33-action-list>a.is-clear{opacity:.73}
.admin-v33-action-list>a>.ui-icon{width:13px;height:13px;color:var(--muted)}

.admin-v33-status-list{display:grid}
.admin-v33-status-list>div{display:grid;grid-template-columns:9px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:49px;padding:6px 2px;border-top:1px solid var(--border)}
.admin-v33-status-list>div:first-child{border-top:0}
.admin-v33-status-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px color-mix(in srgb,#22c55e 9%,transparent)}
.admin-v33-status-list>div.needs-attention .admin-v33-status-dot{background:#f59e0b;box-shadow:0 0 0 4px color-mix(in srgb,#f59e0b 9%,transparent)}
.admin-v33-status-list strong{display:block;font-size:.66rem}
.admin-v33-status-list small{display:block;margin-top:2px;color:var(--muted);font-size:.54rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-v33-status-list b{padding:4px 6px;border-radius:999px;background:color-mix(in srgb,#22c55e 8%,var(--surface));color:#16855b;font-size:.52rem}
.admin-v33-status-list>div.needs-attention b{background:color-mix(in srgb,#f59e0b 9%,var(--surface));color:#a76000}

.admin-v33-deliveries{padding-bottom:9px}
.admin-v33-delivery-list{display:grid}
.admin-v33-delivery-list>a{display:grid;grid-template-columns:34px minmax(0,1.7fr) minmax(72px,.35fr) minmax(88px,.4fr) auto 14px;align-items:center;gap:9px;min-height:51px;padding:6px 1px;border-top:1px solid var(--border);color:var(--text);text-decoration:none}
.admin-v33-delivery-list>a:first-child{border-top:0}
.admin-v33-delivery-list>a:hover .admin-v33-delivery-title strong{color:var(--accent)}
.admin-v33-delivery-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));color:var(--accent)}
.admin-v33-delivery-icon .ui-icon{width:15px;height:15px}
.admin-v33-delivery-title{min-width:0}
.admin-v33-delivery-title strong{display:block;font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .14s ease}
.admin-v33-delivery-title small{display:block;margin-top:2px;color:var(--muted);font-size:.55rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-v33-delivery-list>a>span:not(.admin-v33-delivery-icon):not(.admin-v33-delivery-title) small{display:block;color:var(--muted);font-size:.51rem}
.admin-v33-delivery-list>a>span:not(.admin-v33-delivery-icon):not(.admin-v33-delivery-title) strong{display:block;margin-top:2px;font-size:.64rem}
.admin-v33-delivery-list>a>b{padding:4px 7px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.52rem;text-transform:capitalize}
.admin-v33-delivery-list>a>b.status-active{background:color-mix(in srgb,#22c55e 9%,var(--surface));color:#16855b}
.admin-v33-delivery-list>a>.ui-icon{width:13px;height:13px;color:var(--muted)}

.admin-v33-role-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.admin-v33-role-grid>div{min-width:0;padding:9px 7px;border-radius:10px;background:var(--surface-soft)}
.admin-v33-role-grid>div>span{width:25px;height:25px;display:grid;place-items:center;margin-bottom:7px;border-radius:8px;background:var(--surface);color:var(--accent)}
.admin-v33-role-grid .ui-icon{width:13px;height:13px}
.admin-v33-role-grid strong{display:block;font-size:.77rem}
.admin-v33-role-grid small{display:block;margin-top:2px;color:var(--muted);font-size:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.admin-v33-audit-list{display:grid}
.admin-v33-audit-list>div{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:8px;min-height:42px;padding:5px 1px;border-top:1px solid var(--border)}
.admin-v33-audit-list>div:first-child{border-top:0}
.admin-v33-audit-list>div>span:first-child{width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:var(--surface-soft);color:var(--accent)}
.admin-v33-audit-list .ui-icon{width:13px;height:13px}
.admin-v33-audit-list strong{display:block;font-size:.63rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-v33-audit-list small{display:block;margin-top:2px;color:var(--muted);font-size:.53rem}

.admin-v33-announcement{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--border);border-radius:13px;background:var(--surface)}
.admin-v33-announcement>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}
.admin-v33-announcement .ui-icon{width:14px;height:14px}
.admin-v33-announcement small{display:block;color:var(--muted);font-size:.53rem}
.admin-v33-announcement strong{display:block;margin-top:1px;font-size:.64rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-v33-announcement>a{color:var(--accent);text-decoration:none;font-size:.58rem;font-weight:800;white-space:nowrap}
.admin-v33-calm-empty{display:flex;align-items:center;gap:9px;min-height:62px;color:var(--muted)}
.admin-v33-calm-empty>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--surface-soft);color:var(--accent)}
.admin-v33-calm-empty .ui-icon{width:16px;height:16px}
.admin-v33-calm-empty strong{display:block;color:var(--text);font-size:.68rem}
.admin-v33-calm-empty small{display:block;margin-top:2px;font-size:.56rem}
.admin-v33-calm-empty.compact{min-height:48px}

@media(max-width:1100px){
    .admin-v33-primary-grid,.admin-v33-secondary-grid{grid-template-columns:1fr}
    .admin-v33-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
    .admin-v33-hero{align-items:flex-start;flex-direction:column;padding:18px}
    .admin-v33-hero-actions{width:100%}
    .admin-v33-hero-actions .btn{flex:1;justify-content:center}
    .admin-v33-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
    .admin-v33-summary>a:nth-child(3){border-left:0;border-top:1px solid var(--border)}
    .admin-v33-summary>a:nth-child(4){border-top:1px solid var(--border)}
    .admin-v33-delivery-list>a{grid-template-columns:32px minmax(0,1fr) auto 13px}
    .admin-v33-delivery-list>a>span:not(.admin-v33-delivery-icon):not(.admin-v33-delivery-title){display:none}
    .admin-v33-role-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:520px){
    .admin-home-v33{gap:9px}
    .admin-v33-hero{border-radius:16px}
    .admin-v33-hero h1{font-size:1.55rem}
    .admin-v33-hero-actions{display:grid;grid-template-columns:1fr 1fr}
    .admin-v33-summary{border-radius:13px}
    .admin-v33-summary>a{padding:11px 10px}
    .admin-v33-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr));padding:6px}
    .admin-v33-panel{padding:10px;border-radius:13px}
    .admin-v33-action-list small,.admin-v33-status-list small{white-space:normal}
    .admin-v33-role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .admin-v33-announcement{grid-template-columns:30px minmax(0,1fr)}
    .admin-v33-announcement>a{grid-column:2}
}

/* =====================================================================
   PEOPLE MANAGEMENT V33 — administrator directory + access workspace
   ===================================================================== */
.admin-people-v33{display:grid;gap:11px;max-width:1450px;margin:0 auto}
.admin-people-v33-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:4px 2px 2px}
.admin-people-v33-head>div:first-child>span{display:block;color:var(--accent);font-size:.57rem;font-weight:850;letter-spacing:.075em;text-transform:uppercase}
.admin-people-v33-head h2{margin:4px 0 3px;font-size:1.08rem;letter-spacing:-.02em}
.admin-people-v33-head p{max-width:760px;margin:0;color:var(--muted);font-size:.63rem;line-height:1.5}
.admin-people-v33-head-actions{display:flex;gap:7px;flex-wrap:wrap}
.admin-people-v33-head-actions .btn{min-height:36px;border-radius:10px;font-size:.61rem}
.admin-people-v33-head-actions .ui-icon{width:13px;height:13px;margin-left:3px}

.admin-people-v33-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border:1px solid var(--border);border-radius:15px;background:var(--surface)}
.admin-people-v33-metrics>a{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:9px;min-height:64px;padding:10px 13px;border-left:1px solid var(--border);color:var(--text);text-decoration:none;transition:background .14s ease,color .14s ease}
.admin-people-v33-metrics>a:first-child{border-left:0}
.admin-people-v33-metrics>a:hover,.admin-people-v33-metrics>a.active{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.admin-people-v33-metrics>a>span{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--accent)}
.admin-people-v33-metrics>a.active>span{background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent)}
.admin-people-v33-metrics>a.has-attention>span{background:color-mix(in srgb,#f59e0b 11%,var(--surface));color:#a76000}
.admin-people-v33-metrics .ui-icon{width:14px;height:14px}
.admin-people-v33-metrics strong{display:block;font-size:.92rem;line-height:1}
.admin-people-v33-metrics small{display:block;margin-top:4px;color:var(--muted);font-size:.54rem;font-weight:760}

.admin-people-v33-filters{display:grid;grid-template-columns:minmax(260px,1fr) 145px 135px 140px auto auto;align-items:end;gap:7px;padding:8px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.admin-people-v33-filters>label:not(.admin-people-v33-search){display:grid;gap:3px}
.admin-people-v33-filters>label>span{padding-left:2px;color:var(--muted);font-size:.5rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.admin-people-v33-filters input,.admin-people-v33-filters select{height:36px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:var(--text);font:inherit;font-size:.61rem;outline:none}
.admin-people-v33-filters select{padding:0 28px 0 9px}
.admin-people-v33-filters input:focus,.admin-people-v33-filters select:focus{border-color:color-mix(in srgb,var(--accent) 52%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)}
.admin-people-v33-search{position:relative;display:block}
.admin-people-v33-search>.ui-icon{position:absolute;left:11px;top:50%;width:14px;height:14px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.admin-people-v33-search input{width:100%;padding:0 11px 0 34px}
.admin-people-v33-filters>.btn{min-height:36px;border-radius:9px;font-size:.58rem}
.admin-people-v33-clear{display:flex;align-items:center;justify-content:center;gap:4px;height:36px;padding:0 6px;color:var(--muted);text-decoration:none;font-size:.56rem;font-weight:760;white-space:nowrap}
.admin-people-v33-clear:hover{color:var(--accent)}
.admin-people-v33-clear .ui-icon{width:12px;height:12px}

.admin-people-v33-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,.62fr);gap:10px;align-items:start}
.admin-people-v33-directory{min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:15px;background:var(--surface)}
.admin-people-v33-directory-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:8px 12px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 96%,var(--surface-soft))}
.admin-people-v33-directory-head strong{display:block;font-size:.7rem}
.admin-people-v33-directory-head small{display:block;margin-top:2px;color:var(--muted);font-size:.52rem}
.admin-people-v33-directory-head>span{min-width:31px;padding:4px 7px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.52rem;font-weight:800;text-align:center}
.admin-people-v33-list{display:grid;max-height:690px;overflow:auto;overscroll-behavior:contain}
.admin-people-v33-list>a{display:grid;grid-template-columns:34px minmax(0,1.75fr) minmax(95px,.48fr) minmax(88px,.42fr) 48px 14px;align-items:center;gap:8px;min-height:58px;padding:7px 10px;border-top:1px solid var(--border);color:var(--text);text-decoration:none;transition:background .12s ease}
.admin-people-v33-list>a:first-child{border-top:0}
.admin-people-v33-list>a:hover{background:color-mix(in srgb,var(--accent) 3.5%,var(--surface))}
.admin-people-v33-list>a.active{background:color-mix(in srgb,var(--accent) 6.5%,var(--surface));box-shadow:inset 3px 0 0 var(--accent)}
.admin-people-v33-avatar{width:32px;height:32px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 16%,var(--surface)),var(--surface-soft));color:var(--accent);font-size:.69rem;font-weight:850}
.admin-people-v33-avatar.large{width:43px;height:43px;border-radius:12px;font-size:.9rem}
.admin-people-v33-person{min-width:0}
.admin-people-v33-person strong{display:block;font-size:.65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-people-v33-person small{display:block;margin-top:2px;color:var(--muted);font-size:.51rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-people-v33-role{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;column-gap:5px;min-width:0}
.admin-people-v33-role i{grid-row:1/3;width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:var(--surface-soft);color:var(--accent);font-style:normal}
.admin-people-v33-role .ui-icon{width:11px;height:11px}
.admin-people-v33-role b{font-size:.55rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-people-v33-role small{color:var(--muted);font-size:.48rem}
.admin-people-v33-access b,.admin-people-v33-profile-status{display:inline-flex;align-items:center;min-height:20px;padding:0 6px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.48rem;font-weight:820;text-transform:capitalize}
.admin-people-v33-access b.status-active,.admin-people-v33-profile-status.status-active{background:color-mix(in srgb,#22c55e 9%,var(--surface));color:#16855b}
.admin-people-v33-access b.status-suspended,.admin-people-v33-profile-status.status-suspended{background:color-mix(in srgb,#f59e0b 10%,var(--surface));color:#a76000}
.admin-people-v33-access b.status-archived,.admin-people-v33-profile-status.status-archived{background:color-mix(in srgb,#ef4444 8%,var(--surface));color:#b42318}
.admin-people-v33-access small{display:block;margin-top:2px;color:var(--muted);font-size:.48rem;white-space:nowrap}
.admin-people-v33-memberships{text-align:right}
.admin-people-v33-memberships strong{display:block;font-size:.64rem}
.admin-people-v33-memberships small{display:block;color:var(--muted);font-size:.46rem}
.admin-people-v33-list>a>.ui-icon{width:12px;height:12px;color:var(--muted)}

.admin-people-v33-detail{display:grid;gap:9px;position:sticky;top:82px}
.admin-people-v33-profile,.admin-people-v33-access-card,.admin-people-v33-academic-card,.admin-people-v33-create{border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:0 9px 25px rgba(25,20,35,.025)}
.admin-people-v33-profile,.admin-people-v33-access-card,.admin-people-v33-academic-card{padding:12px}
.admin-people-v33-profile-top{display:grid;grid-template-columns:43px minmax(0,1fr) auto;align-items:center;gap:9px}
.admin-people-v33-profile-top>div{min-width:0}
.admin-people-v33-profile-top small{display:block;color:var(--accent);font-size:.5rem;font-weight:850;text-transform:uppercase;letter-spacing:.055em}
.admin-people-v33-profile-top h3{margin:2px 0 1px;font-size:.83rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-people-v33-profile-top p{margin:0;color:var(--muted);font-size:.53rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-people-v33-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.admin-people-v33-badges>span{display:inline-flex;align-items:center;gap:4px;min-height:23px;padding:0 7px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.48rem;font-weight:760}
.admin-people-v33-badges .ui-icon{width:11px;height:11px;color:var(--accent)}
.admin-people-v33-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:10px 0 0;overflow:hidden;border:1px solid var(--border);border-radius:10px;background:var(--border)}
.admin-people-v33-facts>div{min-width:0;padding:8px;background:var(--surface)}
.admin-people-v33-facts dt{color:var(--muted);font-size:.47rem;font-weight:760}
.admin-people-v33-facts dd{margin:2px 0 0;font-size:.55rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-people-v33-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.admin-people-v33-card-head small{display:block;color:var(--muted);font-size:.48rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.admin-people-v33-card-head h3{margin:2px 0 0;font-size:.72rem}
.admin-people-v33-card-head>span{width:29px;height:29px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--accent)}
.admin-people-v33-card-head .ui-icon{width:13px;height:13px}
.admin-people-v33-status-form{display:flex;gap:6px;margin-bottom:7px}
.admin-people-v33-status-form .btn{min-height:33px;border-radius:9px;font-size:.55rem}
.admin-people-v33-reset{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px;padding-top:8px;border-top:1px solid var(--border)}
.admin-people-v33-reset label{display:grid;gap:4px;color:var(--muted);font-size:.5rem;font-weight:760}
.admin-people-v33-reset input{width:100%;height:34px;padding:0 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface-soft);color:var(--text);font:inherit;font-size:.58rem;outline:none}
.admin-people-v33-reset input:focus{border-color:color-mix(in srgb,var(--accent) 52%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)}
.admin-people-v33-reset .btn{min-height:34px;border-radius:8px;font-size:.54rem}
.admin-people-v33-note{margin:0;padding:8px 9px;border-radius:9px;background:var(--surface-soft);color:var(--muted);font-size:.53rem;line-height:1.5}
.admin-people-v33-warning{display:block;margin-top:6px;color:#a76000;font-size:.5rem;line-height:1.45}
.admin-people-v33-assignment-list{display:grid}
.admin-people-v33-assignment-list>div{display:grid;grid-template-columns:27px minmax(0,1fr) auto;align-items:center;gap:7px;min-height:43px;padding:5px 0;border-top:1px solid var(--border)}
.admin-people-v33-assignment-list>div:first-child{border-top:0}
.admin-people-v33-assignment-list>div>span{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:var(--surface-soft);color:var(--accent)}
.admin-people-v33-assignment-list .ui-icon{width:12px;height:12px}
.admin-people-v33-assignment-list p{min-width:0;margin:0}
.admin-people-v33-assignment-list strong{display:block;font-size:.57rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-people-v33-assignment-list small{display:block;margin-top:2px;color:var(--muted);font-size:.47rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-people-v33-assignment-list b{padding:4px 5px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.45rem;font-weight:800;white-space:nowrap}
.admin-people-v33-inline-link{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:7px;color:var(--accent);text-decoration:none;font-size:.51rem;font-weight:800}
.admin-people-v33-inline-link .ui-icon{width:11px;height:11px}

.admin-people-v33-create{overflow:hidden}
.admin-people-v33-create>summary{display:grid;grid-template-columns:29px minmax(0,1fr) 13px;align-items:center;gap:8px;min-height:50px;padding:8px 11px;cursor:pointer;list-style:none;user-select:none}
.admin-people-v33-create>summary::-webkit-details-marker{display:none}
.admin-people-v33-create>summary>span{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}
.admin-people-v33-create>summary>span .ui-icon{width:13px;height:13px}
.admin-people-v33-create>summary strong{display:block;font-size:.61rem}
.admin-people-v33-create>summary small{display:block;margin-top:2px;color:var(--muted);font-size:.49rem}
.admin-people-v33-create>summary>.ui-icon{width:12px;height:12px;color:var(--muted);transition:transform .15s ease}
.admin-people-v33-create[open]>summary>.ui-icon{transform:rotate(180deg)}
.admin-people-v33-create-form{display:grid;gap:7px;padding:0 11px 11px;border-top:1px solid var(--border)}
.admin-people-v33-create-form>label:first-of-type{margin-top:9px}
.admin-people-v33-create-form [hidden]{display:none!important}
.admin-people-v33-create-form label{display:grid;gap:3px;color:var(--muted);font-size:.5rem;font-weight:760}
.admin-people-v33-create-form input,.admin-people-v33-create-form select{width:100%;height:35px;padding:0 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface-soft);color:var(--text);font:inherit;font-size:.57rem;outline:none}
.admin-people-v33-create-form input:focus,.admin-people-v33-create-form select:focus{border-color:color-mix(in srgb,var(--accent) 52%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)}
.admin-people-v33-create-form label small{font-size:.46rem;font-weight:500;line-height:1.4}
.admin-people-v33-create-form>div{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.admin-people-v33-create-form>.btn{min-height:35px;border-radius:9px;font-size:.56rem}
.admin-people-v33-empty{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;color:var(--muted)}
.admin-people-v33-empty>.ui-icon{width:24px;height:24px;margin-bottom:8px;color:var(--accent)}
.admin-people-v33-empty strong{color:var(--text);font-size:.65rem}
.admin-people-v33-empty small{margin-top:3px;font-size:.53rem}
.admin-people-v33-empty a{margin-top:8px;color:var(--accent);text-decoration:none;font-size:.52rem;font-weight:800}
.admin-people-v33-empty.compact{min-height:90px;padding:10px}
.admin-people-v33-empty.detail-empty{min-height:220px;border:1px solid var(--border);border-radius:15px;background:var(--surface)}

@media(max-width:1180px){
  .admin-people-v33-layout{grid-template-columns:minmax(0,1.2fr) minmax(310px,.72fr)}
  .admin-people-v33-list>a{grid-template-columns:34px minmax(0,1.6fr) minmax(88px,.45fr) minmax(80px,.4fr) 14px}
  .admin-people-v33-memberships{display:none}
  .admin-people-v33-filters{grid-template-columns:minmax(220px,1fr) repeat(3,125px) auto}
  .admin-people-v33-clear{grid-column:1/-1;justify-content:flex-end;height:24px}
}
@media(max-width:940px){
  .admin-people-v33-layout{grid-template-columns:1fr}
  .admin-people-v33-detail{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-people-v33-profile,.admin-people-v33-create{grid-column:1/-1}
  .admin-people-v33-list{max-height:520px}
  .admin-people-v33-filters{grid-template-columns:minmax(0,1fr) repeat(3,120px) auto}
}
@media(max-width:720px){
  .admin-people-v33-head{align-items:flex-start;flex-direction:column}
  .admin-people-v33-head-actions{width:100%}
  .admin-people-v33-head-actions .btn{flex:1;justify-content:center}
  .admin-people-v33-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-people-v33-metrics>a:nth-child(3){border-left:0;border-top:1px solid var(--border)}
  .admin-people-v33-metrics>a:nth-child(4){border-top:1px solid var(--border)}
  .admin-people-v33-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-people-v33-search{grid-column:1/-1}
  .admin-people-v33-filters>.btn{grid-column:1/-1}
  .admin-people-v33-clear{grid-column:1/-1}
  .admin-people-v33-list>a{grid-template-columns:32px minmax(0,1fr) auto 13px;gap:7px;padding-inline:8px}
  .admin-people-v33-role{display:none}
  .admin-people-v33-access{justify-self:end;text-align:right}
  .admin-people-v33-detail{grid-template-columns:1fr}
  .admin-people-v33-profile,.admin-people-v33-create{grid-column:auto}
}
@media(max-width:480px){
  .admin-people-v33{gap:8px}
  .admin-people-v33-head-actions{display:grid;grid-template-columns:1fr 1fr}
  .admin-people-v33-metrics{border-radius:12px}
  .admin-people-v33-metrics>a{min-height:58px;padding:8px 9px}
  .admin-people-v33-filters{grid-template-columns:1fr;padding:7px}
  .admin-people-v33-filters>label,.admin-people-v33-search,.admin-people-v33-filters>.btn,.admin-people-v33-clear{grid-column:1}
  .admin-people-v33-directory,.admin-people-v33-profile,.admin-people-v33-access-card,.admin-people-v33-academic-card,.admin-people-v33-create{border-radius:12px}
  .admin-people-v33-list>a{min-height:55px}
  .admin-people-v33-access small{display:none}
  .admin-people-v33-facts{grid-template-columns:1fr}
  .admin-people-v33-create-form>div{grid-template-columns:1fr}
  .admin-people-v33-reset{grid-template-columns:1fr}
  .admin-people-v33-reset .btn{width:100%}
}

/* Academic Structure V33 */
.academic-v33{display:grid;gap:10px}
.academic-v33-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:4px 1px 1px}
.academic-v33-head>div:first-child{max-width:780px}
.academic-v33-eyebrow{display:inline-flex;align-items:center;gap:5px;color:var(--accent);font-size:.51rem;font-weight:860;text-transform:uppercase;letter-spacing:.075em}
.academic-v33-eyebrow .ui-icon{width:12px;height:12px}
.academic-v33-head h2{margin:4px 0 3px;font-size:1rem;letter-spacing:-.025em}
.academic-v33-head p{margin:0;color:var(--muted);font-size:.57rem;line-height:1.55}
.academic-v33-head-actions{display:flex;gap:7px;flex:0 0 auto}
.academic-v33-head-actions .btn{min-height:35px;border-radius:9px;font-size:.55rem}
.academic-v33-head-actions .ui-icon{width:12px;height:12px}

.academic-v33-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:hidden;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:0 8px 24px rgba(25,20,35,.025)}
.academic-v33-metrics>a{min-width:0;min-height:68px;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:8px;padding:10px 11px;border-left:1px solid var(--border);color:inherit;text-decoration:none}
.academic-v33-metrics>a:first-child{border-left:0}
.academic-v33-metrics>a>span{width:29px;height:29px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--accent)}
.academic-v33-metrics .ui-icon{width:13px;height:13px}
.academic-v33-metrics strong{display:block;font-size:.82rem;line-height:1}
.academic-v33-metrics small{display:block;margin-top:3px;color:var(--muted);font-size:.47rem;font-weight:740;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.academic-v33-metrics em{grid-column:2;color:var(--muted);font-size:.43rem;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.academic-v33-metrics>a:hover{background:color-mix(in srgb,var(--accent) 2.5%,var(--surface))}

.academic-v33-ownership{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border:1px solid var(--border);border-radius:13px;background:var(--surface)}
.academic-v33-ownership>div{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 11px}
.academic-v33-ownership>div+div{border-left:1px solid var(--border)}
.academic-v33-owner-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--muted)}
.academic-v33-owner-icon.lms{background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}
.academic-v33-owner-icon .ui-icon{width:13px;height:13px}
.academic-v33-ownership p{min-width:0;margin:0}
.academic-v33-ownership strong{display:block;font-size:.57rem}
.academic-v33-ownership small{display:block;margin-top:2px;color:var(--muted);font-size:.47rem;line-height:1.42}
.academic-v33-ownership b{padding:4px 6px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.44rem;white-space:nowrap}

.academic-v33-flow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:hidden;border:1px solid var(--border);border-radius:13px;background:var(--surface)}
.academic-v33-flow>a{min-width:0;display:grid;grid-template-columns:24px minmax(0,1fr) 11px;align-items:center;gap:6px;min-height:48px;padding:7px 8px;border-left:1px solid var(--border);color:inherit;text-decoration:none}
.academic-v33-flow>a:first-child{border-left:0}
.academic-v33-flow i{width:23px;height:23px;display:grid;place-items:center;border-radius:7px;background:var(--surface-soft);color:var(--accent);font-size:.49rem;font-style:normal;font-weight:900}
.academic-v33-flow span{min-width:0;font-size:.52rem;font-weight:830}
.academic-v33-flow small{display:block;margin-top:1px;color:var(--muted);font-size:.43rem;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.academic-v33-flow .ui-icon{width:10px;height:10px;color:var(--muted)}
.academic-v33-flow>a:hover{background:color-mix(in srgb,var(--accent) 3%,var(--surface))}

.academic-v33-filterbar{display:grid;grid-template-columns:minmax(250px,1.4fr) minmax(150px,.65fr) minmax(130px,.55fr) minmax(120px,.5fr) auto;align-items:end;gap:7px;padding:8px;border:1px solid var(--border);border-radius:13px;background:var(--surface)}
.academic-v33-filterbar>label{display:grid;gap:3px;color:var(--muted);font-size:.46rem;font-weight:780}
.academic-v33-filterbar select,.academic-v33-filterbar input{width:100%;height:34px;border:1px solid var(--border);border-radius:8px;background:var(--surface-soft);color:var(--text);font:inherit;font-size:.54rem;outline:none}
.academic-v33-filterbar select{padding:0 8px}
.academic-v33-search{position:relative}
.academic-v33-search>.ui-icon{position:absolute;left:9px;bottom:10px;width:12px;height:12px;color:var(--muted);pointer-events:none}
.academic-v33-search input{padding:0 10px 0 29px}
.academic-v33-filterbar input:focus,.academic-v33-filterbar select:focus{border-color:color-mix(in srgb,var(--accent) 50%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 7%,transparent)}
.academic-v33-clear{height:34px;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--muted);font:inherit;font-size:.5rem;font-weight:780;cursor:pointer}
.academic-v33-clear .ui-icon{width:10px;height:10px}
.academic-v33-results{display:none;margin:-4px 2px 0;color:var(--muted);font-size:.47rem}
.academic-v33-results.active{display:block}

.academic-v33-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,340px);align-items:start;gap:10px}
.academic-v33-registers{display:grid;gap:10px;min-width:0}
.academic-v33-card,.academic-v33-builder,.academic-v33-pilot{border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:0 9px 26px rgba(25,20,35,.025)}
.academic-v33-card{min-width:0;overflow:hidden}
.academic-v33-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid var(--border)}
.academic-v33-card>header>div{min-width:0}
.academic-v33-card>header span{display:block;color:var(--accent);font-size:.44rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em}
.academic-v33-card>header h3{margin:2px 0 1px;font-size:.7rem}
.academic-v33-card>header p{margin:0;color:var(--muted);font-size:.49rem;line-height:1.45}
.academic-v33-card>header>b{min-width:28px;height:27px;display:grid;place-items:center;padding:0 6px;border-radius:8px;background:var(--surface-soft);font-size:.56rem}

.academic-v33-programme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:9px}
.academic-v33-programme{min-width:0;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft);padding:9px}
.academic-v33-programme-top{display:grid;grid-template-columns:29px minmax(0,1fr) auto;align-items:center;gap:7px}
.academic-v33-programme-top>span{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--surface);color:var(--accent)}
.academic-v33-programme-top .ui-icon{width:12px;height:12px}
.academic-v33-programme-top p{min-width:0;margin:0}
.academic-v33-programme-top small{display:block;color:var(--accent);font-size:.44rem;font-weight:850}
.academic-v33-programme-top strong{display:block;margin-top:1px;font-size:.56rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.academic-v33-programme-top em{padding:3px 5px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:.42rem;font-style:normal;font-weight:800}
.academic-v33-programme dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:8px 0 0;overflow:hidden;border-radius:8px;background:var(--border)}
.academic-v33-programme dl>div{padding:6px;background:var(--surface)}
.academic-v33-programme dt{color:var(--muted);font-size:.4rem}
.academic-v33-programme dd{margin:2px 0 0;font-size:.54rem;font-weight:850}

.academic-v33-table-wrap{width:100%;overflow:auto}
.academic-v33-table{width:100%;border-collapse:collapse;min-width:670px}
.academic-v33-table th{padding:7px 9px;background:var(--surface-soft);color:var(--muted);font-size:.43rem;font-weight:820;text-align:left;text-transform:uppercase;letter-spacing:.035em;white-space:nowrap}
.academic-v33-table td{padding:8px 9px;border-top:1px solid var(--border);font-size:.51rem;vertical-align:middle}
.academic-v33-table tbody tr:first-child td{border-top:0}
.academic-v33-table td strong{display:block;font-size:.54rem}
.academic-v33-table td small{display:block;margin-top:2px;color:var(--muted);font-size:.43rem;line-height:1.35}
.academic-v33-table td b{font-size:.52rem}
.academic-v33-table tbody tr:hover{background:color-mix(in srgb,var(--accent) 2%,var(--surface))}
.academic-v33-filterable[hidden]{display:none!important}
.academic-v33-status{display:inline-flex;align-items:center;min-height:20px;padding:0 6px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.43rem;font-weight:830;text-transform:capitalize;white-space:nowrap}
.academic-v33-status.status-active,.academic-v33-status.status-approved{background:color-mix(in srgb,#22c55e 9%,var(--surface));color:#16855b}
.academic-v33-status.status-draft{background:color-mix(in srgb,#f59e0b 10%,var(--surface));color:#9b5b00}
.academic-v33-status.status-completed,.academic-v33-status.status-superseded{background:color-mix(in srgb,#64748b 9%,var(--surface));color:#596579}
.academic-v33-status.status-archived,.academic-v33-status.status-ended{background:color-mix(in srgb,#ef4444 7%,var(--surface));color:#a43c35}
.academic-v33-readiness{display:inline-flex;align-items:center;gap:4px;min-height:20px;padding:0 6px;border-radius:999px;font-size:.43rem;font-weight:820;white-space:nowrap}
.academic-v33-readiness .ui-icon{width:10px;height:10px}
.academic-v33-readiness.ready{background:color-mix(in srgb,#22c55e 9%,var(--surface));color:#16855b}
.academic-v33-readiness.attention{background:color-mix(in srgb,#f59e0b 10%,var(--surface));color:#9b5b00}
.academic-v33-status-form{display:flex;align-items:center;gap:5px;white-space:nowrap}
.academic-v33-status-form select{height:28px;padding:0 6px;border:1px solid var(--border);border-radius:7px;background:var(--surface-soft);color:var(--text);font:inherit;font-size:.47rem}
.academic-v33-status-form .btn{min-height:28px;padding-inline:7px;border-radius:7px;font-size:.45rem}

.academic-v33-builder{position:sticky;top:82px;overflow:hidden}
.academic-v33-builder-head{display:flex;align-items:center;gap:8px;padding:11px 11px 7px}
.academic-v33-builder-head>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}
.academic-v33-builder-head .ui-icon{width:13px;height:13px}
.academic-v33-builder-head small{display:block;color:var(--accent);font-size:.43rem;font-weight:850;text-transform:uppercase;letter-spacing:.055em}
.academic-v33-builder-head h3{margin:1px 0 0;font-size:.69rem}
.academic-v33-builder-note{margin:0;padding:0 11px 9px;color:var(--muted);font-size:.48rem;line-height:1.45}
.academic-v33-builder-item{border-top:1px solid var(--border)}
.academic-v33-builder-item>summary,.academic-v33-pilot>summary{display:grid;grid-template-columns:29px minmax(0,1fr) 12px;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;list-style:none;user-select:none}
.academic-v33-builder-item>summary::-webkit-details-marker,.academic-v33-pilot>summary::-webkit-details-marker{display:none}
.academic-v33-builder-item>summary>span,.academic-v33-pilot>summary>span{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--surface-soft);color:var(--accent)}
.academic-v33-builder-item>summary>span .ui-icon,.academic-v33-pilot>summary>span .ui-icon{width:12px;height:12px}
.academic-v33-builder-item>summary strong,.academic-v33-pilot>summary strong{display:block;font-size:.55rem}
.academic-v33-builder-item>summary small,.academic-v33-pilot>summary small{display:block;margin-top:1px;color:var(--muted);font-size:.44rem;line-height:1.35}
.academic-v33-builder-item>summary>.ui-icon,.academic-v33-pilot>summary>.ui-icon{width:11px;height:11px;color:var(--muted);transition:transform .15s ease}
.academic-v33-builder-item[open]>summary>.ui-icon,.academic-v33-pilot[open]>summary>.ui-icon{transform:rotate(180deg)}
.academic-v33-builder-item[open]>summary{background:color-mix(in srgb,var(--accent) 2.8%,var(--surface))}
.academic-v33-form{display:grid;gap:7px;padding:9px 10px 10px;border-top:1px solid var(--border)}
.academic-v33-form>div{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.academic-v33-form .form-two,.academic-v33-form .form-three{display:grid;gap:6px}
.academic-v33-form .form-two{grid-template-columns:1fr 1fr}
.academic-v33-form .form-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.academic-v33-form label{display:grid;gap:3px;min-width:0;color:var(--muted);font-size:.46rem;font-weight:760}
.academic-v33-form input:not([type="checkbox"]),.academic-v33-form select,.academic-v33-form textarea{width:100%;min-width:0;border:1px solid var(--border);border-radius:8px;background:var(--surface-soft);color:var(--text);font:inherit;font-size:.52rem;outline:none}
.academic-v33-form input:not([type="checkbox"]),.academic-v33-form select{height:34px;padding:0 8px}
.academic-v33-form textarea{min-height:68px;padding:7px 8px;resize:vertical;line-height:1.4}
.academic-v33-form input:focus,.academic-v33-form select:focus,.academic-v33-form textarea:focus{border-color:color-mix(in srgb,var(--accent) 50%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 7%,transparent)}
.academic-v33-form .btn{min-height:34px;border-radius:8px;font-size:.51rem}
.academic-v33-form>.check-row,.academic-v33-form .academic-v33-check{display:flex;align-items:center;gap:6px;min-height:34px;padding:0 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface-soft)}
.academic-v33-form .check-row input,.academic-v33-form .academic-v33-check input{width:auto}
.academic-v33-subform{margin-top:0;background:color-mix(in srgb,var(--accent) 2.5%,var(--surface))}
.academic-v33-subform>strong{font-size:.49rem}

.academic-v33-allocation-grid{display:grid;grid-template-columns:minmax(0,1fr) 240px}
.academic-v33-allocation-grid>aside{padding:10px;border-left:1px solid var(--border);background:var(--surface-soft)}
.academic-v33-allocation-grid h4{margin:0;font-size:.6rem}
.academic-v33-allocation-grid aside>p{margin:3px 0 8px;color:var(--muted);font-size:.45rem;line-height:1.4}
.academic-v33-allocation-grid .academic-v33-form{padding:0;border:0}

.academic-v33-empty{min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;text-align:center;color:var(--muted)}
.academic-v33-empty>.ui-icon{width:20px;height:20px;margin-bottom:6px;color:var(--accent)}
.academic-v33-empty strong{color:var(--text);font-size:.55rem}
.academic-v33-empty small{margin-top:3px;font-size:.46rem}
.academic-v33-pilot{overflow:hidden}
.academic-v33-pilot>summary{min-height:54px;padding:9px 11px}
.academic-v33-pilot .academic-v33-form{grid-template-columns:1fr 1fr;align-items:end}
.academic-v33-pilot .academic-v33-form>div{grid-column:span 2}
.academic-v33-pilot .academic-v33-form>.btn,.academic-v33-pilot .academic-v33-form>.config-note{grid-column:span 2}

@media(max-width:1180px){
  .academic-v33-main{grid-template-columns:minmax(0,1fr) 300px}
  .academic-v33-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .academic-v33-metrics>a:nth-child(4){border-left:0;border-top:1px solid var(--border)}
  .academic-v33-metrics>a:nth-child(4),.academic-v33-metrics>a:nth-child(5){border-top:1px solid var(--border)}
  .academic-v33-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .academic-v33-flow>a:nth-child(4){border-left:0;border-top:1px solid var(--border)}
  .academic-v33-flow>a:nth-child(4),.academic-v33-flow>a:nth-child(5),.academic-v33-flow>a:nth-child(6){border-top:1px solid var(--border)}
  .academic-v33-filterbar{grid-template-columns:minmax(220px,1fr) repeat(3,130px) auto}
}
@media(max-width:960px){
  .academic-v33-main{grid-template-columns:1fr}
  .academic-v33-builder{position:static}
  .academic-v33-builder-item>summary{min-height:52px}
}
@media(max-width:760px){
  .academic-v33-head{align-items:flex-start;flex-direction:column}
  .academic-v33-head-actions{width:100%}
  .academic-v33-head-actions .btn{flex:1;justify-content:center}
  .academic-v33-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .academic-v33-metrics>a:nth-child(odd){border-left:0}
  .academic-v33-metrics>a:nth-child(n+3){border-top:1px solid var(--border)}
  .academic-v33-ownership{grid-template-columns:1fr}
  .academic-v33-ownership>div+div{border-left:0;border-top:1px solid var(--border)}
  .academic-v33-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .academic-v33-flow>a:nth-child(odd){border-left:0}
  .academic-v33-flow>a:nth-child(n+3){border-top:1px solid var(--border)}
  .academic-v33-filterbar{grid-template-columns:1fr 1fr}
  .academic-v33-search{grid-column:1/-1}
  .academic-v33-clear{grid-column:1/-1}
  .academic-v33-programme-grid{grid-template-columns:1fr}
  .academic-v33-allocation-grid{grid-template-columns:1fr}
  .academic-v33-allocation-grid>aside{border-left:0;border-top:1px solid var(--border)}
  .academic-v33-pilot .academic-v33-form{grid-template-columns:1fr}
  .academic-v33-pilot .academic-v33-form>div,.academic-v33-pilot .academic-v33-form>.btn,.academic-v33-pilot .academic-v33-form>.config-note{grid-column:1}
}
@media(max-width:480px){
  .academic-v33{gap:8px}
  .academic-v33-head h2{font-size:.9rem}
  .academic-v33-metrics,.academic-v33-card,.academic-v33-builder,.academic-v33-pilot,.academic-v33-filterbar,.academic-v33-flow,.academic-v33-ownership{border-radius:12px}
  .academic-v33-metrics>a{min-height:59px;padding:8px}
  .academic-v33-metrics>a>span{width:26px;height:26px}
  .academic-v33-ownership>div{grid-template-columns:29px minmax(0,1fr)}
  .academic-v33-ownership>div>b{display:none}
  .academic-v33-flow>a{grid-template-columns:22px minmax(0,1fr);min-height:44px}
  .academic-v33-flow>a>.ui-icon{display:none}
  .academic-v33-filterbar{grid-template-columns:1fr;padding:7px}
  .academic-v33-filterbar>label,.academic-v33-search,.academic-v33-clear{grid-column:1}
  .academic-v33-card>header p{display:none}
  .academic-v33-programme-grid{padding:7px}
  .academic-v33-form>div,.academic-v33-form .form-two,.academic-v33-form .form-three{grid-template-columns:1fr}
}

/* Academic Structure V33 — simplified workspace */
.academic-v33-simple{gap:13px}
.academic-v33-simple-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:2px 1px}
.academic-v33-simple-head>div:first-child{max-width:720px}
.academic-v33-simple-head h2{margin:5px 0 3px;font-size:1.12rem;letter-spacing:-.025em}
.academic-v33-simple-head p{margin:0;color:var(--muted);font-size:.66rem;line-height:1.55}
.academic-v33-simple .academic-v33-eyebrow{font-size:.55rem}
.academic-v33-simple .academic-v33-head-actions .btn{min-height:38px;padding-inline:13px;font-size:.59rem}

.academic-v33-simple-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:hidden;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:0 8px 24px rgba(25,20,35,.025)}
.academic-v33-simple-metrics>button{appearance:none;min-width:0;min-height:76px;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:9px;padding:11px 12px;border:0;border-left:1px solid var(--border);background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.academic-v33-simple-metrics>button:first-child{border-left:0}
.academic-v33-simple-metrics>button:hover{background:color-mix(in srgb,var(--accent) 3%,var(--surface))}
.academic-v33-simple-metrics>button>span{width:33px;height:33px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));color:var(--accent)}
.academic-v33-simple-metrics .ui-icon{width:14px;height:14px}
.academic-v33-simple-metrics strong{display:block;font-size:.88rem;line-height:1}
.academic-v33-simple-metrics small{display:block;margin-top:4px;color:var(--text);font-size:.53rem;font-weight:780;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.academic-v33-simple-metrics em{display:block;margin-top:2px;color:var(--muted);font-size:.46rem;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.academic-v33-simple-ownership{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft);color:var(--muted)}
.academic-v33-simple-ownership>span{width:27px;height:27px;flex:0 0 auto;display:grid;place-items:center;border-radius:8px;background:var(--surface);color:var(--accent)}
.academic-v33-simple-ownership .ui-icon{width:12px;height:12px}
.academic-v33-simple-ownership p{margin:0;font-size:.5rem;line-height:1.45}
.academic-v33-simple-ownership strong{color:var(--text)}
.academic-v33-simple-ownership b{padding:0 4px;color:var(--border)}

.academic-v33-tabs{display:flex;align-items:center;gap:4px;overflow:auto;padding:4px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.academic-v33-tabs button{appearance:none;min-height:34px;flex:0 0 auto;padding:0 11px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:.54rem;font-weight:780;cursor:pointer;white-space:nowrap}
.academic-v33-tabs button:hover{background:var(--surface-soft);color:var(--text)}
.academic-v33-tabs button.is-active{background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent)}

.academic-v33-simple-filterbar{grid-template-columns:minmax(260px,1fr) minmax(170px,.55fr) minmax(140px,.45fr) auto}
.academic-v33-simple-filterbar[hidden],.academic-v33-panel[hidden]{display:none!important}
.academic-v33-panels,.academic-v33-panel{display:grid;gap:11px;min-width:0}
.academic-v33-overview-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:11px}

.academic-v33-simple .academic-v33-card{border-radius:14px;box-shadow:0 7px 22px rgba(25,20,35,.02)}
.academic-v33-simple .academic-v33-card>header{min-height:58px;padding:11px 13px}
.academic-v33-simple .academic-v33-card>header h3{font-size:.72rem}
.academic-v33-simple .academic-v33-card>header p{font-size:.51rem}
.academic-v33-simple .academic-v33-card>header span{font-size:.45rem}
.academic-v33-simple .academic-v33-table th{padding:8px 10px;font-size:.45rem}
.academic-v33-simple .academic-v33-table td{padding:9px 10px;font-size:.54rem}
.academic-v33-simple .academic-v33-table td strong{font-size:.56rem}
.academic-v33-simple .academic-v33-table td small{font-size:.45rem}

.academic-v33-setup-steps{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--border)}
.academic-v33-setup-steps>button{appearance:none;display:grid;grid-template-columns:29px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:55px;padding:8px 11px;border:0;border-bottom:1px solid var(--border);background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.academic-v33-setup-steps>button:nth-child(odd){border-right:1px solid var(--border)}
.academic-v33-setup-steps>button:nth-last-child(-n+2){border-bottom:0}
.academic-v33-setup-steps>button:hover{background:color-mix(in srgb,var(--accent) 2.5%,var(--surface))}
.academic-v33-setup-steps i{width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:var(--surface-soft);color:var(--accent);font-size:.48rem;font-style:normal;font-weight:900}
.academic-v33-setup-steps span{min-width:0}
.academic-v33-setup-steps strong{display:block;font-size:.56rem}
.academic-v33-setup-steps small{display:block;margin-top:2px;color:var(--muted);font-size:.44rem}
.academic-v33-setup-steps b{padding:4px 6px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.43rem;white-space:nowrap}

.academic-v33-attention-list{display:grid;border-top:1px solid var(--border)}
.academic-v33-attention-list>button{appearance:none;display:grid;grid-template-columns:31px minmax(0,1fr);align-items:center;gap:8px;min-height:58px;padding:8px 11px;border:0;border-bottom:1px solid var(--border);background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.academic-v33-attention-list>button:last-child{border-bottom:0}
.academic-v33-attention-list>button:hover{background:color-mix(in srgb,var(--accent) 2.5%,var(--surface))}
.academic-v33-attention-list>button>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--accent)}
.academic-v33-attention-list .ui-icon{width:13px;height:13px}
.academic-v33-attention-list p{margin:0}
.academic-v33-attention-list strong{display:block;font-size:.56rem}
.academic-v33-attention-list small{display:block;margin-top:2px;color:var(--muted);font-size:.45rem}

.academic-v33-quick-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;padding:9px}
.academic-v33-quick-actions button{appearance:none;display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:7px 8px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:var(--text);font:inherit;font-size:.5rem;font-weight:780;cursor:pointer}
.academic-v33-quick-actions button:hover{border-color:color-mix(in srgb,var(--accent) 30%,var(--border));background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.academic-v33-quick-actions .ui-icon{width:12px;height:12px;color:var(--accent)}

.academic-v33-card-action-head>div:last-child{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.academic-v33-card-action-head>div:last-child>b{min-width:28px;height:27px;display:grid;place-items:center;padding:0 6px;border-radius:8px;background:var(--surface-soft);font-size:.56rem}
.academic-v33-card-action-head .btn{min-height:29px;padding-inline:8px;font-size:.46rem;border-radius:7px}

.academic-v33-simple:not(.academic-v33-filtering) .academic-v33-list-limited:not(.academic-v33-expanded) .academic-v33-table tbody>.academic-v33-filterable:nth-child(n+13){display:none}
.academic-v33-show-more{appearance:none;width:100%;min-height:34px;border:0;border-top:1px solid var(--border);background:var(--surface-soft);color:var(--accent);font:inherit;font-size:.48rem;font-weight:820;cursor:pointer}
.academic-v33-show-more:hover{background:color-mix(in srgb,var(--accent) 5%,var(--surface))}

.academic-v33-compact-details{overflow:hidden}
.academic-v33-compact-details>summary{display:grid;grid-template-columns:31px minmax(0,1fr) 13px;align-items:center;gap:9px;min-height:58px;padding:10px 12px;cursor:pointer;list-style:none;user-select:none}
.academic-v33-compact-details>summary::-webkit-details-marker{display:none}
.academic-v33-compact-details>summary>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--accent)}
.academic-v33-compact-details>summary>span .ui-icon{width:13px;height:13px}
.academic-v33-compact-details>summary strong{display:block;font-size:.58rem}
.academic-v33-compact-details>summary small{display:block;margin-top:2px;color:var(--muted);font-size:.46rem;line-height:1.4}
.academic-v33-compact-details>summary>.ui-icon{width:11px;height:11px;color:var(--muted);transition:transform .15s ease}
.academic-v33-compact-details[open]>summary{border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--accent) 2%,var(--surface))}
.academic-v33-compact-details[open]>summary>.ui-icon{transform:rotate(180deg)}
.academic-v33-pilot-simple .academic-v33-form{grid-template-columns:1fr 1fr;align-items:end}
.academic-v33-pilot-simple .academic-v33-form>div{grid-column:span 2}
.academic-v33-pilot-simple .academic-v33-form>.btn,.academic-v33-pilot-simple .academic-v33-form>.config-note{grid-column:span 2}

.academic-v33-advanced-intro{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;border:1px solid var(--border);border-radius:13px;background:var(--surface-soft)}
.academic-v33-advanced-intro>span{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:var(--surface);color:var(--accent)}
.academic-v33-advanced-intro .ui-icon{width:14px;height:14px}
.academic-v33-advanced-intro h3{margin:1px 0 3px;font-size:.7rem}
.academic-v33-advanced-intro p{margin:0;color:var(--muted);font-size:.5rem;line-height:1.5}
.academic-v33-legacy-wrap{max-height:72vh;overflow:auto;padding:10px;background:var(--surface-soft)}
.academic-v33-legacy-wrap>.content-section:first-child{margin-top:0}

body.academic-v33-drawer-open{overflow:hidden}
.academic-v33-drawer[hidden]{display:none!important}
.academic-v33-drawer{position:fixed;inset:0;z-index:1200;display:grid;grid-template-columns:minmax(0,1fr) min(520px,92vw)}
.academic-v33-drawer-backdrop{appearance:none;border:0;background:rgba(20,16,25,.36);cursor:pointer}
.academic-v33-drawer-panel{min-width:0;height:100vh;display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--border);box-shadow:-22px 0 55px rgba(25,20,35,.16)}
.academic-v33-drawer-panel>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border-bottom:1px solid var(--border)}
.academic-v33-drawer-panel>header>div{display:flex;align-items:center;gap:9px}
.academic-v33-drawer-panel>header>div>span{width:33px;height:33px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}
.academic-v33-drawer-panel>header .ui-icon{width:14px;height:14px}
.academic-v33-drawer-panel>header small{display:block;color:var(--accent);font-size:.44rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em}
.academic-v33-drawer-panel>header h3{margin:1px 0 0;font-size:.75rem}
.academic-v33-drawer-panel>header>button{appearance:none;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:var(--muted);cursor:pointer}
.academic-v33-drawer-note{margin:0;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--muted);font-size:.49rem;line-height:1.45}
.academic-v33-drawer-scroll{min-height:0;overflow:auto;padding-bottom:20px}
.academic-v33-drawer .academic-v33-builder-item{border-top:0;border-bottom:1px solid var(--border)}
.academic-v33-drawer .academic-v33-builder-item>summary{min-height:56px;padding:10px 14px}
.academic-v33-drawer .academic-v33-form{padding:11px 14px 14px}

@media(max-width:1180px){
  .academic-v33-simple-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .academic-v33-simple-metrics>button:nth-child(4){border-left:0}
  .academic-v33-simple-metrics>button:nth-child(n+4){border-top:1px solid var(--border)}
  .academic-v33-overview-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .academic-v33-simple-head{align-items:flex-start;flex-direction:column}
  .academic-v33-simple-head .academic-v33-head-actions{width:100%}
  .academic-v33-simple-head .academic-v33-head-actions .btn{flex:1;justify-content:center}
  .academic-v33-simple-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .academic-v33-simple-metrics>button{border-left:1px solid var(--border);border-top:1px solid var(--border)}
  .academic-v33-simple-metrics>button:nth-child(-n+2){border-top:0}
  .academic-v33-simple-metrics>button:nth-child(odd){border-left:0}
  .academic-v33-simple-metrics>button:last-child{grid-column:1/-1;border-left:0}
  .academic-v33-tabs{padding-bottom:5px}
  .academic-v33-simple-filterbar{grid-template-columns:1fr 1fr}
  .academic-v33-simple-filterbar .academic-v33-search{grid-column:1/-1}
  .academic-v33-simple-filterbar .academic-v33-clear{grid-column:1/-1}
  .academic-v33-setup-steps{grid-template-columns:1fr}
  .academic-v33-setup-steps>button:nth-child(odd){border-right:0}
  .academic-v33-setup-steps>button:nth-last-child(-n+2){border-bottom:1px solid var(--border)}
  .academic-v33-setup-steps>button:last-child{border-bottom:0}
  .academic-v33-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .academic-v33-quick-actions button:last-child{grid-column:1/-1}
  .academic-v33-card-action-head{align-items:flex-start!important}
  .academic-v33-card-action-head>div:last-child{flex-direction:column;align-items:flex-end}
  .academic-v33-pilot-simple .academic-v33-form{grid-template-columns:1fr}
  .academic-v33-pilot-simple .academic-v33-form>div,.academic-v33-pilot-simple .academic-v33-form>.btn,.academic-v33-pilot-simple .academic-v33-form>.config-note{grid-column:1}
  .academic-v33-drawer{grid-template-columns:1fr}
  .academic-v33-drawer-backdrop{display:none}
  .academic-v33-drawer-panel{width:100%;border-left:0}
}
@media(max-width:480px){
  .academic-v33-simple{gap:9px}
  .academic-v33-simple-head h2{font-size:1rem}
  .academic-v33-simple-metrics>button{min-height:68px;padding:9px}
  .academic-v33-simple-ownership{align-items:flex-start}
  .academic-v33-simple-ownership p{font-size:.47rem}
  .academic-v33-simple-filterbar{grid-template-columns:1fr}
  .academic-v33-simple-filterbar>label,.academic-v33-simple-filterbar .academic-v33-search,.academic-v33-simple-filterbar .academic-v33-clear{grid-column:1}
  .academic-v33-quick-actions{grid-template-columns:1fr}
  .academic-v33-quick-actions button:last-child{grid-column:1}
  .academic-v33-simple .academic-v33-card>header p{display:block}
  .academic-v33-drawer .academic-v33-form>div,.academic-v33-drawer .academic-v33-form .form-two,.academic-v33-drawer .academic-v33-form .form-three{grid-template-columns:1fr}
}

/* Course Operations V33 */
.course-ops-v33{display:grid;gap:10px}
.course-ops-v33-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:4px 1px 1px}
.course-ops-v33-head>div:first-child{max-width:760px}
.course-ops-v33-eyebrow{display:inline-flex;align-items:center;gap:5px;color:var(--accent);font-size:.51rem;font-weight:860;text-transform:uppercase;letter-spacing:.075em}
.course-ops-v33-eyebrow .ui-icon{width:12px;height:12px}
.course-ops-v33-head h2{margin:4px 0 3px;font-size:1rem;letter-spacing:-.025em}
.course-ops-v33-head p{margin:0;color:var(--muted);font-size:.57rem;line-height:1.55}
.course-ops-v33-head-actions{display:flex;gap:7px;flex:0 0 auto}
.course-ops-v33-head-actions .btn{min-height:35px;border-radius:9px;font-size:.55rem}
.course-ops-v33-head-actions .ui-icon{width:12px;height:12px}
.course-ops-v33-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:hidden;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:0 8px 24px rgba(25,20,35,.025)}
.course-ops-v33-metrics>button{appearance:none;min-width:0;min-height:67px;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:8px;padding:10px 11px;border:0;border-left:1px solid var(--border);background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.course-ops-v33-metrics>button:first-child{border-left:0}
.course-ops-v33-metrics>button:hover{background:color-mix(in srgb,var(--accent) 3%,var(--surface))}
.course-ops-v33-metrics>button>span{width:29px;height:29px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--accent)}
.course-ops-v33-metrics>button.has-attention>span{background:color-mix(in srgb,#f59e0b 12%,var(--surface));color:#a76000}
.course-ops-v33-metrics .ui-icon{width:13px;height:13px}
.course-ops-v33-metrics p{min-width:0;margin:0}
.course-ops-v33-metrics strong{display:block;font-size:.82rem;line-height:1}
.course-ops-v33-metrics small{display:block;margin-top:3px;color:var(--muted);font-size:.47rem;font-weight:740;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.course-ops-v33-notice{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border));border-radius:11px;background:color-mix(in srgb,var(--accent) 3%,var(--surface))}
.course-ops-v33-notice>span{width:24px;height:24px;display:grid;place-items:center;flex:0 0 auto;border-radius:7px;background:var(--surface);color:var(--accent)}
.course-ops-v33-notice .ui-icon{width:12px;height:12px}
.course-ops-v33-notice p{margin:0;min-width:0}
.course-ops-v33-notice strong{display:block;font-size:.53rem}
.course-ops-v33-notice small{display:block;margin-top:2px;color:var(--muted);font-size:.46rem;line-height:1.45}
.course-ops-v33-tabs{display:flex;align-items:center;gap:3px;overflow:auto;padding:4px;border:1px solid var(--border);border-radius:11px;background:var(--surface)}
.course-ops-v33-tabs button{appearance:none;min-height:30px;padding:0 11px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:.5rem;font-weight:780;white-space:nowrap;cursor:pointer}
.course-ops-v33-tabs button:hover{background:var(--surface-soft);color:var(--text)}
.course-ops-v33-tabs button.is-active{background:var(--accent);color:#fff}
.course-ops-v33-filterbar{display:grid;grid-template-columns:minmax(220px,1fr) 180px 140px auto;align-items:end;gap:7px;padding:8px;border:1px solid var(--border);border-radius:11px;background:var(--surface)}
.course-ops-v33-filterbar[hidden]{display:none!important}
.course-ops-v33-filterbar label{display:grid;gap:3px;color:var(--muted);font-size:.45rem;font-weight:760}
.course-ops-v33-filterbar input,.course-ops-v33-filterbar select{width:100%;height:33px;padding:0 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface-soft);color:var(--text);font:inherit;font-size:.54rem;outline:none}
.course-ops-v33-search{position:relative}
.course-ops-v33-search>span{position:absolute;left:9px;bottom:10px;color:var(--muted);pointer-events:none}
.course-ops-v33-search .ui-icon{width:12px;height:12px}
.course-ops-v33-search input{padding-left:29px}
.course-ops-v33-clear{min-height:33px;border-radius:8px;font-size:.5rem}
.course-ops-v33-filterbar>small{grid-column:1/-1;display:none;color:var(--muted);font-size:.45rem}
.course-ops-v33-filterbar>small.active{display:block}
.course-ops-v33-panel[hidden]{display:none!important}
.course-ops-v33-overview-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:10px}
.course-ops-v33-card{overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:0 8px 24px rgba(25,20,35,.025)}
.course-ops-v33-card>header{min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;border-bottom:1px solid var(--border)}
.course-ops-v33-card>header>div{min-width:0}
.course-ops-v33-card>header small{display:block;color:var(--muted);font-size:.43rem;font-weight:820;text-transform:uppercase;letter-spacing:.06em}
.course-ops-v33-card>header h3{margin:2px 0 0;font-size:.67rem}
.course-ops-v33-card>header p{margin:2px 0 0;color:var(--muted);font-size:.45rem;line-height:1.4}
.course-ops-v33-card>header>a,.course-ops-v33-card>header>button{appearance:none;border:0;background:transparent;color:var(--accent);font:inherit;font-size:.47rem;font-weight:820;text-decoration:none;cursor:pointer}
.course-ops-v33-card>header>span{color:var(--muted);font-size:.47rem;font-weight:750;white-space:nowrap}
.course-ops-v33-attention-list,.course-ops-v33-class-list{display:grid}
.course-ops-v33-attention-list>button,.course-ops-v33-class-list>button{appearance:none;display:grid;align-items:center;gap:8px;min-height:56px;padding:7px 10px;border:0;border-bottom:1px solid var(--border);background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.course-ops-v33-attention-list>button:last-child,.course-ops-v33-class-list>button:last-child{border-bottom:0}
.course-ops-v33-attention-list>button:hover,.course-ops-v33-class-list>button:hover{background:color-mix(in srgb,var(--accent) 2.5%,var(--surface))}
.course-ops-v33-attention-list>button{grid-template-columns:29px minmax(0,1fr) auto 12px}
.course-ops-v33-attention-list>button>span{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,#f59e0b 10%,var(--surface));color:#a76000}
.course-ops-v33-attention-list .ui-icon,.course-ops-v33-class-list .ui-icon{width:12px;height:12px}
.course-ops-v33-attention-list p,.course-ops-v33-class-list p{min-width:0;margin:0}
.course-ops-v33-attention-list strong,.course-ops-v33-class-list strong{display:block;font-size:.54rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.course-ops-v33-attention-list small,.course-ops-v33-class-list small{display:block;margin-top:2px;color:var(--muted);font-size:.44rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.course-ops-v33-attention-list b{padding:4px 6px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.42rem;text-transform:capitalize}
.course-ops-v33-class-list>button{grid-template-columns:32px minmax(0,1fr) 12px}
.course-ops-v33-class-list>button>span{width:31px;height:34px;display:grid;place-items:center;align-content:center;border-radius:8px;background:var(--surface-soft);color:var(--accent)}
.course-ops-v33-class-list>button>span b{font-size:.58rem;line-height:1}
.course-ops-v33-class-list>button>span small{margin-top:1px;color:var(--muted);font-size:.38rem;font-weight:800;text-transform:uppercase}
.course-ops-v33-empty{min-height:145px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;text-align:center;color:var(--muted)}
.course-ops-v33-empty>.ui-icon{width:22px;height:22px;margin-bottom:6px;color:var(--accent)}
.course-ops-v33-empty strong{font-size:.58rem;color:var(--text)}
.course-ops-v33-empty small{margin-top:3px;font-size:.46rem}
.course-ops-v33-quick-card{margin-top:10px}
.course-ops-v33-quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:9px}
.course-ops-v33-quick-actions>button{appearance:none;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:7px;min-height:52px;padding:7px 8px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:inherit;text-align:left;font:inherit;cursor:pointer}
.course-ops-v33-quick-actions>button:hover{border-color:color-mix(in srgb,var(--accent) 28%,var(--border));background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.course-ops-v33-quick-actions>button>.ui-icon{width:13px;height:13px;justify-self:center;color:var(--accent)}
.course-ops-v33-quick-actions strong{display:block;font-size:.51rem}
.course-ops-v33-quick-actions small{display:block;margin-top:2px;color:var(--muted);font-size:.41rem}
.course-ops-v33-table-card>header{align-items:flex-start}
.course-ops-v33-table-wrap{overflow:auto}
.course-ops-v33-table-wrap table{width:100%;border-collapse:collapse;min-width:920px}
.course-ops-v33-table-wrap th{padding:7px 9px;border-bottom:1px solid var(--border);background:var(--surface-soft);color:var(--muted);font-size:.41rem;font-weight:840;text-align:left;text-transform:uppercase;letter-spacing:.05em}
.course-ops-v33-table-wrap td{padding:7px 9px;border-bottom:1px solid var(--border);font-size:.49rem;vertical-align:middle}
.course-ops-v33-table-wrap tbody tr:last-child td{border-bottom:0}
.course-ops-v33-table-wrap tbody tr:hover td{background:color-mix(in srgb,var(--accent) 2%,var(--surface))}
.course-ops-v33-table-wrap td>strong{display:block;font-size:.51rem}
.course-ops-v33-table-wrap td>small{display:block;margin-top:2px;color:var(--muted);font-size:.42rem;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.course-ops-v33-course-link{appearance:none;display:block;max-width:250px;padding:0;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.course-ops-v33-course-link strong{display:block;font-size:.52rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.course-ops-v33-course-link small{display:block;margin-top:2px;color:var(--muted);font-size:.42rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.course-ops-v33-course-link:hover strong{color:var(--accent)}
.course-ops-v33-status,.course-ops-v33-source{display:inline-flex;align-items:center;min-height:21px;padding:0 7px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.43rem;font-weight:820;text-transform:capitalize;white-space:nowrap}
.course-ops-v33-status.status-active{background:color-mix(in srgb,#22c55e 9%,var(--surface));color:#16855b}
.course-ops-v33-status.status-draft{background:color-mix(in srgb,#f59e0b 10%,var(--surface));color:#a76000}
.course-ops-v33-status.status-completed{background:color-mix(in srgb,#3b82f6 8%,var(--surface));color:#2563a8}
.course-ops-v33-warning,.course-ops-v33-ok{display:block;margin-top:3px;font-size:.4rem;font-weight:760}
.course-ops-v33-warning{color:#a76000}.course-ops-v33-ok{color:#16855b}
.course-ops-v33-muted{color:var(--muted);font-size:.44rem}
.course-ops-v33-manage{display:inline-flex;align-items:center;gap:3px;color:var(--accent);font-size:.45rem;font-weight:820;text-decoration:none;white-space:nowrap}
.course-ops-v33-manage .ui-icon{width:10px;height:10px}
.course-ops-v33-big-number{font-size:.66rem!important}
.course-ops-v33-check,.course-ops-v33-missing{display:inline-flex;align-items:center;gap:4px;font-size:.44rem;font-weight:820;white-space:nowrap}
.course-ops-v33-check{color:#16855b}.course-ops-v33-missing{color:#a76000}
.course-ops-v33-check .ui-icon,.course-ops-v33-missing .ui-icon{width:11px;height:11px}
.course-ops-v33-readiness-list{display:grid}
.course-ops-v33-readiness-list>button{appearance:none;display:grid;grid-template-columns:minmax(180px,.9fr) minmax(460px,1.6fr) 64px 12px;align-items:center;gap:9px;min-height:59px;padding:8px 10px;border:0;border-bottom:1px solid var(--border);background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.course-ops-v33-readiness-list>button:last-child{border-bottom:0}
.course-ops-v33-readiness-list>button:hover{background:color-mix(in srgb,var(--accent) 2%,var(--surface))}
.course-ops-v33-readiness-course{min-width:0}
.course-ops-v33-readiness-course strong{display:block;font-size:.52rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.course-ops-v33-readiness-course small{display:block;margin-top:2px;color:var(--muted);font-size:.42rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.course-ops-v33-checks{display:flex;align-items:center;gap:4px;min-width:0}
.course-ops-v33-checks i{min-width:55px;display:grid;grid-template-columns:11px minmax(0,1fr);align-items:center;gap:3px;padding:4px 5px;border-radius:7px;background:var(--surface-soft);font-style:normal;color:var(--muted)}
.course-ops-v33-checks i.is-ready{background:color-mix(in srgb,#22c55e 7%,var(--surface));color:#16855b}
.course-ops-v33-checks i.is-missing{background:color-mix(in srgb,#ef4444 7%,var(--surface));color:#b42318}
.course-ops-v33-checks .ui-icon{width:10px;height:10px}
.course-ops-v33-checks b{font-size:.36rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.course-ops-v33-readiness-state{display:inline-flex;align-items:center;justify-content:center;min-height:21px;padding:0 7px;border-radius:999px;font-size:.41rem;font-weight:850}
.course-ops-v33-readiness-state.ready{background:color-mix(in srgb,#22c55e 9%,var(--surface));color:#16855b}
.course-ops-v33-readiness-state.attention{background:color-mix(in srgb,#f59e0b 10%,var(--surface));color:#a76000}
.course-ops-v33-readiness-list>button>.ui-icon{width:11px;height:11px;color:var(--muted)}
.course-ops-v33-section-empty-filter:after{content:'No records match these filters.';display:block;padding:22px;text-align:center;color:var(--muted);font-size:.5rem}
body.course-ops-v33-drawer-open{overflow:hidden}
.course-ops-v33-drawer[hidden]{display:none!important}
.course-ops-v33-drawer{position:fixed;inset:0;z-index:1220;display:grid;grid-template-columns:minmax(0,1fr) min(470px,92vw)}
.course-ops-v33-drawer-backdrop{appearance:none;border:0;background:rgba(20,16,25,.36);cursor:pointer}
.course-ops-v33-drawer-panel{min-width:0;height:100vh;display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--border);box-shadow:-22px 0 55px rgba(25,20,35,.16)}
.course-ops-v33-drawer-panel>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
.course-ops-v33-drawer-panel>header>div{display:flex;align-items:center;gap:9px}
.course-ops-v33-drawer-panel>header>div>span{width:33px;height:33px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}
.course-ops-v33-drawer-panel>header .ui-icon{width:14px;height:14px}
.course-ops-v33-drawer-panel>header small{display:block;color:var(--accent);font-size:.43rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em}
.course-ops-v33-drawer-panel>header h3{margin:1px 0 0;font-size:.72rem}
.course-ops-v33-drawer-panel>header>button{appearance:none;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft);color:var(--muted);cursor:pointer}
.course-ops-v33-drawer-body{min-height:0;overflow:auto;padding:13px;display:grid;gap:10px}
.course-ops-v33-drawer-summary{padding:3px 1px}
.course-ops-v33-drawer-summary h3{margin:7px 0 2px;font-size:.82rem}
.course-ops-v33-drawer-summary p{margin:0;color:var(--muted);font-size:.51rem}
.course-ops-v33-drawer-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.course-ops-v33-drawer-meta span{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0 7px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.43rem;font-weight:740}
.course-ops-v33-drawer-meta .ui-icon{width:10px;height:10px;color:var(--accent)}
.course-ops-v33-drawer-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border:1px solid var(--border);border-radius:11px;background:var(--border);gap:1px}
.course-ops-v33-drawer-stats>div{padding:9px;background:var(--surface)}
.course-ops-v33-drawer-stats strong{display:block;font-size:.68rem}
.course-ops-v33-drawer-stats small{display:block;margin-top:2px;color:var(--muted);font-size:.4rem}
.course-ops-v33-drawer-section{overflow:hidden;border:1px solid var(--border);border-radius:11px;background:var(--surface)}
.course-ops-v33-drawer-section>header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:39px;padding:8px 9px;border-bottom:1px solid var(--border)}
.course-ops-v33-drawer-section>header h4{margin:0;font-size:.56rem}
.course-ops-v33-drawer-checks{display:grid;grid-template-columns:1fr 1fr}
.course-ops-v33-drawer-checks>div,.course-ops-v33-drawer-activity>div{display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:7px;padding:8px;border-bottom:1px solid var(--border)}
.course-ops-v33-drawer-checks>div:nth-child(odd){border-right:1px solid var(--border)}
.course-ops-v33-drawer-checks>div:nth-last-child(-n+2){border-bottom:0}
.course-ops-v33-drawer-checks>div>span,.course-ops-v33-drawer-activity>div>span{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:var(--surface-soft);color:var(--muted)}
.course-ops-v33-drawer-checks>div.ready>span{background:color-mix(in srgb,#22c55e 8%,var(--surface));color:#16855b}
.course-ops-v33-drawer-checks>div.missing>span{background:color-mix(in srgb,#ef4444 7%,var(--surface));color:#b42318}
.course-ops-v33-drawer-checks .ui-icon,.course-ops-v33-drawer-activity .ui-icon{width:11px;height:11px}
.course-ops-v33-drawer-checks p,.course-ops-v33-drawer-activity p{min-width:0;margin:0}
.course-ops-v33-drawer-checks strong,.course-ops-v33-drawer-activity strong{display:block;font-size:.48rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.course-ops-v33-drawer-checks small,.course-ops-v33-drawer-activity small{display:block;margin-top:2px;color:var(--muted);font-size:.4rem}
.course-ops-v33-drawer-alert{display:grid;grid-template-columns:29px minmax(0,1fr);align-items:center;gap:8px;padding:9px;border:1px solid color-mix(in srgb,#f59e0b 22%,var(--border));border-radius:10px;background:color-mix(in srgb,#f59e0b 5%,var(--surface))}
.course-ops-v33-drawer-alert>span{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--surface);color:#a76000}
.course-ops-v33-drawer-alert .ui-icon{width:12px;height:12px}
.course-ops-v33-drawer-alert p{margin:0}.course-ops-v33-drawer-alert strong{display:block;font-size:.5rem}.course-ops-v33-drawer-alert small{display:block;margin-top:2px;color:var(--muted);font-size:.41rem}
.course-ops-v33-drawer-activity{display:grid}
.course-ops-v33-drawer-activity>div:last-child{border-bottom:0}
.course-ops-v33-drawer-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.course-ops-v33-drawer-actions .btn{min-height:35px;border-radius:8px;font-size:.49rem;justify-content:center}
.course-ops-v33-drawer-actions .btn:first-child{grid-column:1/-1}
@media(max-width:1180px){
  .course-ops-v33-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .course-ops-v33-metrics>button:nth-child(4){border-left:0}.course-ops-v33-metrics>button:nth-child(n+4){border-top:1px solid var(--border)}
  .course-ops-v33-overview-grid{grid-template-columns:1fr}
  .course-ops-v33-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .course-ops-v33-readiness-list{overflow:auto}
  .course-ops-v33-readiness-list>button{min-width:860px}
}
@media(max-width:760px){
  .course-ops-v33-head{flex-direction:column}.course-ops-v33-head-actions{width:100%}.course-ops-v33-head-actions .btn{flex:1;justify-content:center}
  .course-ops-v33-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.course-ops-v33-metrics>button{border-left:1px solid var(--border);border-top:1px solid var(--border)}.course-ops-v33-metrics>button:nth-child(-n+2){border-top:0}.course-ops-v33-metrics>button:nth-child(odd){border-left:0}.course-ops-v33-metrics>button:last-child{grid-column:1/-1;border-left:0}
  .course-ops-v33-filterbar{grid-template-columns:1fr 1fr}.course-ops-v33-search{grid-column:1/-1}.course-ops-v33-clear{grid-column:1/-1}
  .course-ops-v33-quick-actions{grid-template-columns:1fr 1fr}
  .course-ops-v33-drawer{grid-template-columns:1fr}.course-ops-v33-drawer-backdrop{display:none}.course-ops-v33-drawer-panel{width:100%;border-left:0}
}
@media(max-width:480px){
  .course-ops-v33{gap:8px}.course-ops-v33-head-actions{display:grid;grid-template-columns:1fr 1fr}.course-ops-v33-metrics>button{min-height:61px;padding:8px}.course-ops-v33-notice small{font-size:.43rem}
  .course-ops-v33-filterbar{grid-template-columns:1fr}.course-ops-v33-filterbar>*{grid-column:1}.course-ops-v33-quick-actions{grid-template-columns:1fr}
  .course-ops-v33-attention-list>button{grid-template-columns:27px minmax(0,1fr) 11px}.course-ops-v33-attention-list b{display:none}
  .course-ops-v33-drawer-stats{grid-template-columns:1fr 1fr}.course-ops-v33-drawer-checks{grid-template-columns:1fr}.course-ops-v33-drawer-checks>div:nth-child(odd){border-right:0}.course-ops-v33-drawer-checks>div:nth-last-child(-n+2){border-bottom:1px solid var(--border)}.course-ops-v33-drawer-checks>div:last-child{border-bottom:0}
  .course-ops-v33-drawer-actions{grid-template-columns:1fr}.course-ops-v33-drawer-actions .btn:first-child{grid-column:1}
}

/* =====================================================================
   ADMIN ONBOARDING V33
   Compact operational workspace for MIS -> LMS learner readiness.
   ===================================================================== */
.onboarding-v33{display:grid;gap:12px;min-width:0}
.onboarding-v33-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:2px 1px 0}
.onboarding-v33-head>div:first-child{min-width:0}.onboarding-v33-head>div:first-child>span{display:block;color:var(--accent);font-size:.48rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin-bottom:2px}.onboarding-v33-head h2{font-size:1.12rem;line-height:1.15;margin:0}.onboarding-v33-head p{margin:5px 0 0;color:var(--muted);font-size:.55rem;max-width:720px;line-height:1.5}
.onboarding-v33-head-actions{display:flex;gap:7px;flex:0 0 auto}.onboarding-v33-head-actions .btn{min-height:35px;font-size:.5rem;border-radius:9px;white-space:nowrap}
.onboarding-v33-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--surface);border:1px solid var(--border);border-radius:13px;overflow:hidden;box-shadow:var(--shadow-sm)}
.onboarding-v33-metrics>button{appearance:none;border:0;border-left:1px solid var(--border);background:transparent;color:var(--text);display:flex;align-items:center;gap:9px;text-align:left;min-height:72px;padding:11px 13px;cursor:pointer;transition:background var(--transition-fast)}.onboarding-v33-metrics>button:first-child{border-left:0}.onboarding-v33-metrics>button:hover{background:var(--surface-2)}
.onboarding-v33-metrics>button>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--surface-2);color:var(--accent);flex:0 0 auto}.onboarding-v33-metrics>button>span .ui-icon{width:14px;height:14px}.onboarding-v33-metrics strong{display:block;font-size:.86rem;line-height:1}.onboarding-v33-metrics small{display:block;margin-top:4px;color:var(--muted);font-size:.45rem;line-height:1.2}.onboarding-v33-metrics>button.has-attention>span{background:var(--warning-soft);color:var(--warning)}.onboarding-v33-metrics>button.is-positive>span{background:var(--success-soft);color:var(--success)}
.onboarding-v33-tabs{display:flex;align-items:center;gap:3px;padding:4px;background:var(--surface);border:1px solid var(--border);border-radius:11px;overflow-x:auto;box-shadow:var(--shadow-sm)}
.onboarding-v33-tabs button{appearance:none;border:0;background:transparent;color:var(--muted);display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:8px;font-size:.5rem;font-weight:700;white-space:nowrap;cursor:pointer}.onboarding-v33-tabs button span{min-width:18px;padding:2px 5px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:.4rem;text-align:center}.onboarding-v33-tabs button:hover{color:var(--text);background:var(--surface-2)}.onboarding-v33-tabs button.is-active{background:var(--accent);color:#fff}.onboarding-v33-tabs button.is-active span{background:rgba(255,255,255,.16);color:#fff}
.onboarding-v33-search{display:grid;grid-template-columns:20px minmax(180px,1fr) auto auto;align-items:center;gap:7px;padding:7px 10px;background:var(--surface);border:1px solid var(--border);border-radius:10px}.onboarding-v33-search>.ui-icon{width:13px;height:13px;color:var(--muted)}.onboarding-v33-search input{border:0!important;background:transparent!important;min-height:28px!important;padding:0!important;box-shadow:none!important;font-size:.52rem}.onboarding-v33-search span{font-size:.44rem;color:var(--muted);white-space:nowrap}.onboarding-v33-search button{appearance:none;border:0;background:transparent;color:var(--accent);font-size:.45rem;font-weight:700;cursor:pointer}
.onboarding-v33-panel[hidden],.onboarding-v33-drawer[hidden]{display:none!important}
.onboarding-v33-overview-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,.8fr);gap:10px}
.onboarding-v33-card{background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow-sm);min-width:0;overflow:hidden}.onboarding-v33-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-bottom:1px solid var(--border)}.onboarding-v33-card>header>div{min-width:0}.onboarding-v33-card>header small{display:block;color:var(--muted);font-size:.41rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700}.onboarding-v33-card>header h3{margin:2px 0 0;font-size:.67rem}.onboarding-v33-card>header p{margin:4px 0 0;font-size:.46rem;color:var(--muted);line-height:1.45;max-width:690px}.onboarding-v33-card>header>span{font-size:.44rem;color:var(--muted);white-space:nowrap}
.onboarding-v33-pipeline{grid-column:1}.onboarding-v33-pipeline-steps{display:grid;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr) 16px minmax(0,1fr) 16px minmax(0,1fr);align-items:center;padding:13px}.onboarding-v33-pipeline-steps>button{appearance:none;border:1px solid var(--border);background:var(--surface-2);border-radius:10px;padding:10px;display:flex;align-items:center;gap:8px;text-align:left;cursor:pointer;color:var(--text);min-height:58px}.onboarding-v33-pipeline-steps>button:hover{border-color:var(--accent);background:var(--accent-soft)}.onboarding-v33-pipeline-steps>button>span{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:var(--surface);color:var(--accent);flex:0 0 auto}.onboarding-v33-pipeline-steps>button>span .ui-icon{width:12px;height:12px}.onboarding-v33-pipeline-steps strong{display:block;font-size:.61rem}.onboarding-v33-pipeline-steps small{display:block;margin-top:2px;color:var(--muted);font-size:.39rem;line-height:1.2}.onboarding-v33-pipeline-steps>i{display:grid;place-items:center;color:var(--muted)}.onboarding-v33-pipeline-steps>i .ui-icon{width:11px;height:11px}
.onboarding-v33-attention{grid-column:2;grid-row:1/span 2}.onboarding-v33-attention>header>span{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;font-weight:800}.onboarding-v33-attention>header>span.attention{background:var(--warning-soft);color:var(--warning)}.onboarding-v33-attention>header>span.clear{background:var(--success-soft);color:var(--success)}
.onboarding-v33-attention-list{display:grid}.onboarding-v33-attention-list>button{appearance:none;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);display:grid;grid-template-columns:29px minmax(0,1fr) 12px;align-items:center;gap:9px;padding:10px 13px;text-align:left;cursor:pointer}.onboarding-v33-attention-list>button:last-child{border-bottom:0}.onboarding-v33-attention-list>button:hover{background:var(--surface-2)}.onboarding-v33-attention-list>button>span{width:27px;height:27px;border-radius:8px;display:grid;place-items:center}.onboarding-v33-attention-list>button>span.good{background:var(--success-soft);color:var(--success)}.onboarding-v33-attention-list>button>span.warn{background:var(--warning-soft);color:var(--warning)}.onboarding-v33-attention-list .ui-icon{width:12px;height:12px}.onboarding-v33-attention-list p{margin:0}.onboarding-v33-attention-list strong{display:block;font-size:.48rem}.onboarding-v33-attention-list small{display:block;margin-top:2px;font-size:.4rem;color:var(--muted);line-height:1.35}
.onboarding-v33-status-card{padding-bottom:13px}.onboarding-v33-status-card>header{border-bottom:0;padding-bottom:7px}.onboarding-v33-status-card>header>span{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--accent-soft);color:var(--accent)}.onboarding-v33-status-card>header>span .ui-icon{width:13px;height:13px}.onboarding-v33-status-card>p{margin:8px 14px 11px;font-size:.44rem;line-height:1.5;color:var(--muted)}.onboarding-v33-status-card>.btn{margin:0 14px;min-height:32px;font-size:.46rem}.onboarding-v33-sync-state{margin:0 14px;padding:9px 10px;border-radius:9px;background:var(--surface-2)}.onboarding-v33-sync-state strong{display:block;font-size:.52rem}.onboarding-v33-sync-state small{display:block;margin-top:3px;color:var(--muted);font-size:.39rem}.onboarding-v33-mini-stats{display:grid;grid-template-columns:1fr 1fr;margin:0 14px;border:1px solid var(--border);border-radius:9px;overflow:hidden}.onboarding-v33-mini-stats>div{padding:9px 10px}.onboarding-v33-mini-stats>div+div{border-left:1px solid var(--border)}.onboarding-v33-mini-stats strong{display:block;font-size:.62rem}.onboarding-v33-mini-stats small{display:block;margin-top:2px;color:var(--muted);font-size:.38rem;line-height:1.25}
.onboarding-v33-table-card>header .btn{font-size:.46rem;min-height:32px;white-space:nowrap}.onboarding-v33-table-wrap{overflow:auto;max-height:640px}.onboarding-v33-table-wrap table{width:100%;border-collapse:separate;border-spacing:0;min-width:860px}.onboarding-v33-table-wrap th{position:sticky;top:0;z-index:2;background:var(--surface-2);color:var(--muted);font-size:.39rem;letter-spacing:.05em;text-transform:uppercase;text-align:left;padding:8px 11px;border-bottom:1px solid var(--border)}.onboarding-v33-table-wrap td{font-size:.45rem;padding:9px 11px;border-bottom:1px solid var(--border);vertical-align:middle}.onboarding-v33-table-wrap tbody tr:last-child td{border-bottom:0}.onboarding-v33-table-wrap tbody tr:hover td{background:var(--surface-2)}.onboarding-v33-table-wrap td strong{display:block;font-size:.47rem}.onboarding-v33-table-wrap td small{display:block;margin-top:2px;color:var(--muted);font-size:.38rem;line-height:1.25}.onboarding-v33-table-wrap form{margin:0}.onboarding-v33-table-wrap .btn{min-height:27px;font-size:.41rem;padding:4px 8px;border-radius:7px}.onboarding-v33-filterable[hidden]{display:none!important}.onboarding-v33-muted{color:var(--muted);font-size:.42rem;font-style:italic}.onboarding-v33-state{display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border-radius:999px;font-size:.39rem;font-weight:700;white-space:nowrap}.onboarding-v33-state .ui-icon{width:10px;height:10px}.onboarding-v33-state.ready{background:var(--success-soft);color:var(--success)}.onboarding-v33-state.blocked{background:var(--warning-soft);color:var(--warning)}.onboarding-v33-source{display:inline-flex;padding:4px 7px;border-radius:999px;background:var(--surface-2);font-size:.39rem;color:var(--muted);font-weight:700;white-space:nowrap}.onboarding-v33-actions{white-space:nowrap}.onboarding-v33-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:34px 18px;color:var(--muted)}.onboarding-v33-empty>.ui-icon{width:22px;height:22px;color:var(--success);margin-bottom:7px}.onboarding-v33-empty strong{font-size:.55rem;color:var(--text)}.onboarding-v33-empty small{font-size:.42rem;margin-top:3px;max-width:420px;line-height:1.4}.onboarding-v33-limit-note{margin:0;padding:8px 12px;border-top:1px solid var(--border);font-size:.4rem;color:var(--muted);background:var(--surface-2)}
.onboarding-v33-drawer{position:fixed;inset:0;z-index:var(--z-modal);display:grid;grid-template-columns:1fr minmax(350px,430px)}.onboarding-v33-drawer-backdrop{appearance:none;border:0;background:rgba(10,20,18,.35);backdrop-filter:blur(2px);cursor:default}.onboarding-v33-drawer-panel{background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow-lg);display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0}.onboarding-v33-drawer-panel>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border-bottom:1px solid var(--border)}.onboarding-v33-drawer-panel>header>div{display:flex;align-items:center;gap:9px}.onboarding-v33-drawer-panel>header>div>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--accent-soft);color:var(--accent)}.onboarding-v33-drawer-panel>header>div>span .ui-icon{width:14px;height:14px}.onboarding-v33-drawer-panel>header small{display:block;color:var(--muted);font-size:.39rem;text-transform:uppercase;letter-spacing:.06em}.onboarding-v33-drawer-panel>header h3{margin:2px 0 0;font-size:.64rem}.onboarding-v33-drawer-panel>header>button{appearance:none;border:0;background:var(--surface-2);color:var(--muted);width:29px;height:29px;border-radius:8px;display:grid;place-items:center;cursor:pointer}.onboarding-v33-drawer-panel>header>button:hover{color:var(--text)}.onboarding-v33-drawer-panel>header>button .ui-icon{width:12px;height:12px}.onboarding-v33-drawer-body{overflow:auto;padding:12px;display:grid;align-content:start;gap:10px}.onboarding-v33-drawer-body>section{border:1px solid var(--border);border-radius:11px;padding:11px;background:var(--surface)}
.onboarding-v33-tool-head{display:flex;align-items:flex-start;gap:9px}.onboarding-v33-tool-head>span{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--surface-2);color:var(--accent);flex:0 0 auto}.onboarding-v33-tool-head>span .ui-icon{width:12px;height:12px}.onboarding-v33-tool-head strong{display:block;font-size:.5rem}.onboarding-v33-tool-head small{display:block;margin-top:2px;color:var(--muted);font-size:.4rem;line-height:1.4}.onboarding-v33-tool-status{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:10px 0;padding:8px 9px;border-radius:8px;background:var(--surface-2)}.onboarding-v33-tool-status small{font-size:.39rem;color:var(--muted)}.onboarding-v33-tool-status strong{font-size:.43rem}.onboarding-v33-tool-summary{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0}.onboarding-v33-tool-summary>div{padding:8px 9px;border-radius:8px;background:var(--surface-2)}.onboarding-v33-tool-summary strong{display:block;font-size:.56rem}.onboarding-v33-tool-summary small{display:block;margin-top:2px;color:var(--muted);font-size:.38rem}.onboarding-v33-activate-form{display:grid;gap:8px}.onboarding-v33-activate-form label{display:grid;gap:4px;font-size:.41rem;font-weight:700}.onboarding-v33-activate-form input{min-height:34px!important;font-size:.46rem!important}.onboarding-v33-drawer-body .btn-full{width:100%;justify-content:center;margin-top:8px;min-height:34px;font-size:.46rem}.onboarding-v33-tool-note{margin:8px 0 0;color:var(--muted);font-size:.39rem;line-height:1.45}.onboarding-v33-tool-warning{display:flex!important;gap:8px!important;background:var(--warning-soft)!important;border-color:color-mix(in srgb,var(--warning) 30%,var(--border))!important}.onboarding-v33-tool-warning>span{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:var(--surface);color:var(--warning);flex:0 0 auto}.onboarding-v33-tool-warning>span .ui-icon{width:12px;height:12px}.onboarding-v33-tool-warning p{margin:0}.onboarding-v33-tool-warning strong{display:block;font-size:.45rem}.onboarding-v33-tool-warning small{display:block;margin-top:2px;color:var(--muted);font-size:.39rem;line-height:1.4}body.onboarding-v33-drawer-open{overflow:hidden}
@media(max-width:1120px){.onboarding-v33-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.onboarding-v33-metrics>button{border-top:1px solid var(--border)}.onboarding-v33-metrics>button:nth-child(-n+3){border-top:0}.onboarding-v33-metrics>button:nth-child(4){border-left:0}.onboarding-v33-overview-grid{grid-template-columns:1fr}.onboarding-v33-attention{grid-column:1;grid-row:auto}.onboarding-v33-pipeline{grid-column:1}}
@media(max-width:820px){.onboarding-v33-head{align-items:stretch;flex-direction:column}.onboarding-v33-head-actions{width:100%}.onboarding-v33-head-actions .btn{flex:1;justify-content:center}.onboarding-v33-pipeline-steps{grid-template-columns:1fr 1fr;gap:7px}.onboarding-v33-pipeline-steps>i{display:none}.onboarding-v33-search{grid-template-columns:20px minmax(0,1fr) auto}.onboarding-v33-search span{display:none}.onboarding-v33-drawer{grid-template-columns:1fr}.onboarding-v33-drawer-backdrop{display:none}.onboarding-v33-drawer-panel{border-left:0}}
@media(max-width:560px){.onboarding-v33{gap:8px}.onboarding-v33-metrics{grid-template-columns:1fr 1fr}.onboarding-v33-metrics>button{border-left:1px solid var(--border)!important;border-top:1px solid var(--border)!important;min-height:64px;padding:9px}.onboarding-v33-metrics>button:nth-child(-n+2){border-top:0!important}.onboarding-v33-metrics>button:nth-child(odd){border-left:0!important}.onboarding-v33-metrics>button:last-child{grid-column:1/-1;border-left:0!important}.onboarding-v33-pipeline-steps{grid-template-columns:1fr}.onboarding-v33-tabs button{padding:7px 9px}.onboarding-v33-card>header{align-items:flex-start;flex-direction:column}.onboarding-v33-table-card>header .btn{width:100%;justify-content:center}.onboarding-v33-head-actions{display:grid;grid-template-columns:1fr 1fr}.onboarding-v33-head-actions .btn{width:100%}.onboarding-v33-drawer-panel{width:100%}}

/* System Operations V33 */
.system-ops-v33{display:grid;gap:10px}
.system-ops-v33-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:4px 1px 1px}
.system-ops-v33-head>div:first-child{max-width:780px}
.system-ops-v33-eyebrow{display:inline-flex;align-items:center;gap:5px;color:var(--accent);font-size:.51rem;font-weight:860;text-transform:uppercase;letter-spacing:.075em}
.system-ops-v33-eyebrow .ui-icon{width:12px;height:12px}
.system-ops-v33-head h2{margin:4px 0 3px;font-size:1rem;letter-spacing:-.025em}
.system-ops-v33-head p{margin:0;color:var(--muted);font-size:.57rem;line-height:1.55}
.system-ops-v33-head-actions{display:flex;gap:7px;flex:0 0 auto}
.system-ops-v33-head-actions .btn{min-height:35px;border-radius:9px;font-size:.55rem}
.system-ops-v33-head-actions .ui-icon{width:12px;height:12px}
.system-ops-v33-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:hidden;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:0 8px 24px rgba(25,20,35,.025)}
.system-ops-v33-metrics>button{appearance:none;min-width:0;min-height:67px;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:8px;padding:10px 11px;border:0;border-left:1px solid var(--border);background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.system-ops-v33-metrics>button:first-child{border-left:0}
.system-ops-v33-metrics>button:hover{background:color-mix(in srgb,var(--accent) 3%,var(--surface))}
.system-ops-v33-metrics>button>span{width:29px;height:29px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,#22c55e 10%,var(--surface));color:#16803a}
.system-ops-v33-metrics>button.has-attention>span{background:color-mix(in srgb,#f59e0b 12%,var(--surface));color:#a76000}
.system-ops-v33-metrics .ui-icon{width:13px;height:13px}
.system-ops-v33-metrics p{min-width:0;margin:0}
.system-ops-v33-metrics strong{display:block;font-size:.82rem;line-height:1}
.system-ops-v33-metrics small{display:block;margin-top:3px;color:var(--muted);font-size:.47rem;font-weight:740;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.system-ops-v33-tabs{display:flex;align-items:center;gap:3px;overflow:auto;padding:4px;border:1px solid var(--border);border-radius:11px;background:var(--surface)}
.system-ops-v33-tabs button{appearance:none;min-height:30px;padding:0 11px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:.5rem;font-weight:780;white-space:nowrap;cursor:pointer}
.system-ops-v33-tabs button:hover{background:var(--surface-soft);color:var(--text)}
.system-ops-v33-tabs button.is-active{background:var(--accent);color:#fff}
.system-ops-v33-panel[hidden]{display:none!important}
.system-ops-v33-overview-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:10px}
.system-ops-v33-card{overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:0 8px 24px rgba(25,20,35,.025)}
.system-ops-v33-card>header{min-height:51px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;border-bottom:1px solid var(--border)}
.system-ops-v33-card>header>div{min-width:0}
.system-ops-v33-card>header small{display:block;color:var(--muted);font-size:.43rem;font-weight:820;text-transform:uppercase;letter-spacing:.06em}
.system-ops-v33-card>header h3{margin:2px 0 0;font-size:.67rem}
.system-ops-v33-card>header p{margin:2px 0 0;color:var(--muted);font-size:.45rem;line-height:1.4}
.system-ops-v33-card>header>button,.system-ops-v33-card>header>a{appearance:none;border:0;background:transparent;color:var(--accent);font:inherit;font-size:.47rem;font-weight:820;text-decoration:none;cursor:pointer}
.system-ops-v33-card>header>span{color:var(--muted);font-size:.47rem;font-weight:760;white-space:nowrap}
.system-ops-v33-health-list,.system-ops-v33-attention-list{display:grid}
.system-ops-v33-health-list>button,.system-ops-v33-attention-list>button,.system-ops-v33-attention-list>a{appearance:none;display:grid;grid-template-columns:29px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:58px;padding:8px 10px;border:0;border-bottom:1px solid var(--border);background:transparent;color:inherit;text-align:left;text-decoration:none;font:inherit;cursor:pointer}
.system-ops-v33-health-list>button:last-child,.system-ops-v33-attention-list>*:last-child{border-bottom:0}
.system-ops-v33-health-list>button:hover,.system-ops-v33-attention-list>button:hover,.system-ops-v33-attention-list>a:hover{background:color-mix(in srgb,var(--accent) 2.5%,var(--surface))}
.system-ops-v33-health-icon,.system-ops-v33-attention-list>button>span,.system-ops-v33-attention-list>a>span{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--surface-soft);color:var(--muted)}
.system-ops-v33-health-icon.ok{background:color-mix(in srgb,#22c55e 10%,var(--surface));color:#16803a}
.system-ops-v33-health-icon.warn,.system-ops-v33-attention-list>button>span,.system-ops-v33-attention-list>a>span{background:color-mix(in srgb,#f59e0b 10%,var(--surface));color:#a76000}
.system-ops-v33-health-list .ui-icon,.system-ops-v33-attention-list .ui-icon{width:12px;height:12px}
.system-ops-v33-health-list p,.system-ops-v33-attention-list p{min-width:0;margin:0}
.system-ops-v33-health-list strong,.system-ops-v33-attention-list strong{display:block;font-size:.54rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.system-ops-v33-health-list small,.system-ops-v33-attention-list small{display:block;margin-top:2px;color:var(--muted);font-size:.44rem;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.system-ops-v33-health-list b,.system-ops-v33-attention-list b{padding:4px 6px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.42rem;text-transform:capitalize}
.system-ops-v33-quick-card{margin-top:10px}
.system-ops-v33-quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:9px}
.system-ops-v33-quick-actions form{display:contents}
.system-ops-v33-quick-actions .btn{min-height:35px;justify-content:center;border-radius:9px;font-size:.5rem}
.system-ops-v33-quick-actions .ui-icon{width:12px;height:12px}
.system-ops-v33-worker-list{display:grid}
.system-ops-v33-worker-list>article{display:grid;grid-template-columns:34px minmax(180px,.8fr) minmax(260px,1.45fr) 120px;align-items:center;gap:10px;min-height:72px;padding:10px 11px;border-bottom:1px solid var(--border)}
.system-ops-v33-worker-list>article:last-child{border-bottom:0}
.system-ops-v33-worker-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--muted)}
.system-ops-v33-worker-icon.ok{background:color-mix(in srgb,#22c55e 10%,var(--surface));color:#16803a}
.system-ops-v33-worker-icon.warn{background:color-mix(in srgb,#f59e0b 10%,var(--surface));color:#a76000}
.system-ops-v33-worker-icon .ui-icon{width:13px;height:13px}
.system-ops-v33-worker-list article>div:nth-child(2) strong{display:block;font-size:.55rem}
.system-ops-v33-worker-list article>div:nth-child(2) small{display:block;margin-top:2px;color:var(--muted);font-size:.44rem;line-height:1.4}
.system-ops-v33-worker-detail{min-width:0}
.system-ops-v33-worker-detail>small{display:block;margin-top:4px;color:var(--muted);font-size:.44rem;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.system-ops-v33-worker-time{text-align:right}
.system-ops-v33-worker-time strong{display:block;font-size:.49rem}
.system-ops-v33-worker-time small{display:block;margin-top:2px;color:var(--muted);font-size:.42rem}
.system-ops-v33-compact-table{max-width:100%;overflow:auto}
.system-ops-v33-compact-table table{width:100%;border-collapse:collapse;min-width:680px}
.system-ops-v33-compact-table th{padding:7px 9px;border-bottom:1px solid var(--border);background:var(--surface-soft);color:var(--muted);font-size:.42rem;font-weight:820;text-transform:uppercase;letter-spacing:.045em;text-align:left;white-space:nowrap}
.system-ops-v33-compact-table td{padding:8px 9px;border-bottom:1px solid var(--border);font-size:.48rem;vertical-align:middle}
.system-ops-v33-compact-table tbody tr:last-child td{border-bottom:0}
.system-ops-v33-compact-table td strong{display:block;font-size:.5rem}
.system-ops-v33-compact-table td small{display:block;margin-top:2px;color:var(--muted);font-size:.42rem}
.system-ops-v33-integration-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:10px}
.system-ops-v33-integration-card{padding:10px;border:1px solid var(--border);border-radius:13px;background:var(--surface);box-shadow:0 8px 24px rgba(25,20,35,.02)}
.system-ops-v33-integration-card header{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px}
.system-ops-v33-integration-card header>div{min-width:0}
.system-ops-v33-integration-card h3{margin:0;font-size:.56rem}
.system-ops-v33-integration-card header small{display:block;margin-top:2px;color:var(--muted);font-size:.42rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.system-ops-v33-integration-icon{width:29px;height:29px;display:grid;place-items:center;border-radius:8px;background:var(--surface-soft);color:var(--muted)}
.system-ops-v33-integration-icon.ok{background:color-mix(in srgb,#22c55e 10%,var(--surface));color:#16803a}
.system-ops-v33-integration-icon.warn{background:color-mix(in srgb,#f59e0b 10%,var(--surface));color:#a76000}
.system-ops-v33-integration-icon .ui-icon{width:12px;height:12px}
.system-ops-v33-integration-card p{margin:9px 0 0;padding-top:8px;border-top:1px solid var(--border);color:var(--muted);font-size:.45rem;line-height:1.45}
.system-ops-v33-danger-card{margin-bottom:10px;border-color:color-mix(in srgb,#ef4444 22%,var(--border))}
.system-ops-v33-review-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.system-ops-v33-review-list{max-height:520px;overflow:auto}
.system-ops-v33-review-list>article{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.95fr);align-items:center;gap:10px;padding:9px 10px;border-bottom:1px solid var(--border)}
.system-ops-v33-review-list>article:last-child{border-bottom:0}
.system-ops-v33-review-list strong{display:block;font-size:.52rem}
.system-ops-v33-review-list small{display:block;margin-top:2px;color:var(--muted);font-size:.42rem}
.system-ops-v33-review-list p{margin:5px 0 0;color:var(--muted);font-size:.44rem;line-height:1.4}
.system-ops-v33-review-list p b{color:var(--text)}
.system-ops-v33-review-form{display:grid;grid-template-columns:minmax(120px,1fr) auto;align-items:center;gap:6px}
.system-ops-v33-review-form input{height:30px;padding:0 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface-soft);color:var(--text);font:inherit;font-size:.46rem;outline:none}
.system-ops-v33-review-form>span{display:flex;gap:5px}
.system-ops-v33-review-form .btn{min-height:29px}
.system-ops-v33-maintenance-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.system-ops-v33-maintenance-list,.system-ops-v33-coverage-list{display:grid}
.system-ops-v33-maintenance-list>div,.system-ops-v33-coverage-list>div{display:grid;grid-template-columns:29px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:57px;padding:8px 10px;border-bottom:1px solid var(--border)}
.system-ops-v33-coverage-list>div{grid-template-columns:29px minmax(0,1fr)}
.system-ops-v33-maintenance-list>div:last-child,.system-ops-v33-coverage-list>div:last-child{border-bottom:0}
.system-ops-v33-maintenance-list>div>span,.system-ops-v33-coverage-list>div>span{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--surface-soft);color:var(--muted)}
.system-ops-v33-coverage-list>div>span.ok{background:color-mix(in srgb,#22c55e 10%,var(--surface));color:#16803a}
.system-ops-v33-maintenance-list .ui-icon,.system-ops-v33-coverage-list .ui-icon{width:12px;height:12px}
.system-ops-v33-maintenance-list p,.system-ops-v33-coverage-list p{min-width:0;margin:0}
.system-ops-v33-maintenance-list strong,.system-ops-v33-coverage-list strong{display:block;font-size:.53rem}
.system-ops-v33-maintenance-list small,.system-ops-v33-coverage-list small{display:block;margin-top:2px;color:var(--muted);font-size:.43rem;line-height:1.4}
.system-ops-v33-maintenance-list b{padding:4px 6px;border-radius:999px;background:var(--surface-soft);font-size:.41rem}
.system-ops-v33-maintenance-list b.ok{color:#16803a;background:color-mix(in srgb,#22c55e 10%,var(--surface))}
.system-ops-v33-maintenance-list b.warn{color:#a76000;background:color-mix(in srgb,#f59e0b 10%,var(--surface))}
.system-ops-v33-card>footer{padding:9px 10px;border-top:1px solid var(--border)}
.system-ops-v33-card>footer .btn{min-height:33px;font-size:.49rem}
.system-ops-v33-thresholds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.system-ops-v33-thresholds>div{min-height:66px;display:grid;place-content:center;padding:9px;text-align:center;border-left:1px solid var(--border)}
.system-ops-v33-thresholds>div:first-child{border-left:0}
.system-ops-v33-thresholds strong{display:block;font-size:.72rem}
.system-ops-v33-thresholds small{display:block;margin-top:3px;color:var(--muted);font-size:.43rem;font-weight:760}
.system-ops-v33-panel>.system-ops-v33-card+.system-ops-v33-card{margin-top:10px}

@media(max-width:1100px){
  .system-ops-v33-integration-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .system-ops-v33-worker-list>article{grid-template-columns:34px minmax(160px,.75fr) minmax(220px,1.25fr) 105px}
  .system-ops-v33-review-grid,.system-ops-v33-maintenance-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
  .system-ops-v33-head{flex-direction:column}
  .system-ops-v33-head-actions{width:100%}
  .system-ops-v33-head-actions .btn{flex:1;justify-content:center}
  .system-ops-v33-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .system-ops-v33-metrics>button{border-left:1px solid var(--border);border-top:1px solid var(--border)}
  .system-ops-v33-metrics>button:nth-child(-n+2){border-top:0}
  .system-ops-v33-metrics>button:nth-child(odd){border-left:0}
  .system-ops-v33-metrics>button:last-child{grid-column:1/-1;border-left:0}
  .system-ops-v33-overview-grid{grid-template-columns:1fr}
  .system-ops-v33-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .system-ops-v33-worker-list>article{grid-template-columns:34px minmax(0,1fr) auto}
  .system-ops-v33-worker-detail{grid-column:2/-1}
  .system-ops-v33-worker-time{grid-column:2/-1;text-align:left;display:flex;align-items:center;gap:7px}
}
@media(max-width:620px){
  .system-ops-v33-integration-grid{grid-template-columns:1fr}
  .system-ops-v33-review-list>article{grid-template-columns:1fr}
  .system-ops-v33-review-form{grid-template-columns:1fr}
  .system-ops-v33-review-form>span{justify-content:flex-start}
  .system-ops-v33-thresholds{grid-template-columns:1fr}
  .system-ops-v33-thresholds>div{border-left:0;border-top:1px solid var(--border)}
  .system-ops-v33-thresholds>div:first-child{border-top:0}
}
@media(max-width:480px){
  .system-ops-v33{gap:8px}
  .system-ops-v33-head h2{font-size:.96rem}
  .system-ops-v33-metrics>button{min-height:64px;padding:8px}
  .system-ops-v33-quick-actions{grid-template-columns:1fr}
  .system-ops-v33-health-list>button,.system-ops-v33-attention-list>button,.system-ops-v33-attention-list>a{grid-template-columns:28px minmax(0,1fr)}
  .system-ops-v33-health-list b,.system-ops-v33-attention-list b{grid-column:2;justify-self:start}
  .system-ops-v33-worker-list>article{grid-template-columns:31px minmax(0,1fr);gap:7px}
  .system-ops-v33-worker-detail,.system-ops-v33-worker-time{grid-column:1/-1}
}

/* Administrator Audit Log V33 */
.audit-v33{display:grid;gap:10px;min-width:0}
.audit-v33-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:14px 16px;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:0 8px 26px rgba(25,20,35,.025)}
.audit-v33-head>div:first-child{min-width:0}
.audit-v33-head>div:first-child>span{display:block;color:var(--accent);font-size:.43rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.audit-v33-head h2{margin:4px 0 0;font-size:1.05rem;line-height:1.15}
.audit-v33-head p{margin:4px 0 0;color:var(--muted);font-size:.5rem;line-height:1.5}
.audit-v33-head-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.audit-v33-head-actions .btn{min-height:34px;font-size:.49rem}
.audit-v33-head-actions .ui-icon{width:12px;height:12px}
.audit-v33-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}
.audit-v33-metrics>button{appearance:none;min-height:74px;padding:10px 12px;border:0;border-left:1px solid var(--border);background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.audit-v33-metrics>button:first-child{border-left:0}
.audit-v33-metrics>button:hover{background:color-mix(in srgb,var(--accent) 2.5%,var(--surface))}
.audit-v33-metrics small{display:block;color:var(--muted);font-size:.42rem;font-weight:780}
.audit-v33-metrics strong{display:block;margin-top:3px;font-size:.92rem;line-height:1}
.audit-v33-metrics span{display:block;margin-top:4px;color:var(--muted);font-size:.41rem}
.audit-v33-tabs{display:flex;align-items:center;gap:4px;overflow:auto;padding:4px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.audit-v33-tabs button{appearance:none;min-height:34px;flex:0 0 auto;padding:0 11px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:.54rem;font-weight:780;cursor:pointer;white-space:nowrap}
.audit-v33-tabs button:hover{background:var(--surface-soft);color:var(--text)}
.audit-v33-tabs button.is-active{background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent)}
.audit-v33-filterbar{display:grid;grid-template-columns:minmax(260px,1fr) minmax(145px,.45fr) minmax(145px,.45fr) minmax(120px,.34fr) auto auto;align-items:center;gap:7px;padding:8px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.audit-v33-filterbar[hidden],.audit-v33-panel[hidden],.audit-v33-drawer[hidden]{display:none!important}
.audit-v33-search{height:33px;display:grid;grid-template-columns:27px minmax(0,1fr);align-items:center;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft)}
.audit-v33-search>span{display:grid;place-items:center;color:var(--muted)}
.audit-v33-search .ui-icon{width:12px;height:12px}
.audit-v33-search input,.audit-v33-filterbar select{width:100%;height:31px;border:0;background:transparent;color:var(--text);font:inherit;font-size:.47rem;outline:none}
.audit-v33-filterbar select{padding:0 8px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft)}
.audit-v33-clear{appearance:none;display:flex;align-items:center;gap:4px;height:31px;padding:0 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--muted);font:inherit;font-size:.44rem;font-weight:750;cursor:pointer}
.audit-v33-clear:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
.audit-v33-clear .ui-icon{width:10px;height:10px}
.audit-v33-filterbar>small{color:var(--muted);font-size:.42rem;white-space:nowrap;text-align:right}
.audit-v33-panels,.audit-v33-panel{display:grid;gap:10px;min-width:0}
.audit-v33-overview-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:10px}
.audit-v33-card{min-width:0;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:0 7px 22px rgba(25,20,35,.02);overflow:hidden}
.audit-v33-card>header{min-height:58px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:11px 13px;border-bottom:1px solid var(--border)}
.audit-v33-card>header>div{min-width:0}
.audit-v33-card>header small{display:block;color:var(--muted);font-size:.41rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.audit-v33-card>header h3{margin:3px 0 0;font-size:.72rem}
.audit-v33-card>header p{margin:3px 0 0;color:var(--muted);font-size:.46rem;line-height:1.4}
.audit-v33-card>header>span{padding:4px 7px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.42rem;font-weight:750;white-space:nowrap}
.audit-v33-card>header>button{appearance:none;border:0;background:transparent;color:var(--accent);font:inherit;font-size:.46rem;font-weight:800;cursor:pointer;white-space:nowrap}
.audit-v33-recent-list{display:grid}
.audit-v33-recent-list>button{appearance:none;display:grid;grid-template-columns:31px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:58px;padding:8px 11px;border:0;border-bottom:1px solid var(--border);background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.audit-v33-recent-list>button:last-child{border-bottom:0}
.audit-v33-recent-list>button:hover{background:color-mix(in srgb,var(--accent) 2.5%,var(--surface))}
.audit-v33-recent-list>button>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--muted)}
.audit-v33-recent-list>button>span.security{background:color-mix(in srgb,#ef4444 8%,var(--surface));color:#b52b2b}
.audit-v33-recent-list>button>span.academic{background:color-mix(in srgb,#2563eb 8%,var(--surface));color:#245fba}
.audit-v33-recent-list>button>span.system{background:color-mix(in srgb,#8b5cf6 8%,var(--surface));color:#7345c5}
.audit-v33-recent-list .ui-icon{width:12px;height:12px}
.audit-v33-recent-list p{min-width:0;margin:0}
.audit-v33-recent-list strong{display:block;font-size:.52rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audit-v33-recent-list small{display:block;margin-top:2px;color:var(--muted);font-size:.42rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audit-v33-recent-list b{padding:4px 6px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.4rem;font-weight:800}
.audit-v33-coverage{display:grid}
.audit-v33-coverage>button{appearance:none;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:8px;min-height:62px;padding:9px 11px;border:0;border-bottom:1px solid var(--border);background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.audit-v33-coverage>button:last-child{border-bottom:0}
.audit-v33-coverage>button:hover{background:color-mix(in srgb,var(--accent) 2.5%,var(--surface))}
.audit-v33-coverage>button>span{width:29px;height:29px;display:grid;place-items:center;border-radius:8px;background:var(--surface-soft);color:var(--accent)}
.audit-v33-coverage .ui-icon{width:12px;height:12px}
.audit-v33-coverage p{margin:0;min-width:0}
.audit-v33-coverage strong{display:block;font-size:.53rem}
.audit-v33-coverage small{display:block;margin-top:2px;color:var(--muted);font-size:.43rem;line-height:1.4}
.audit-v33-note{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:8px;padding:9px 11px}
.audit-v33-note>span{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,#22c55e 8%,var(--surface));color:#16803a}
.audit-v33-note .ui-icon{width:13px;height:13px}
.audit-v33-note strong{display:block;font-size:.52rem}
.audit-v33-note small{display:block;margin-top:2px;color:var(--muted);font-size:.43rem;line-height:1.45}
.audit-v33-table-wrap{max-width:100%;max-height:680px;overflow:auto}
.audit-v33-table-wrap table{width:100%;border-collapse:collapse;min-width:920px}
.audit-v33-table-wrap th{position:sticky;top:0;z-index:2;padding:7px 9px;border-bottom:1px solid var(--border);background:var(--surface-soft);color:var(--muted);font-size:.41rem;font-weight:820;text-transform:uppercase;letter-spacing:.045em;text-align:left;white-space:nowrap}
.audit-v33-table-wrap td{padding:8px 9px;border-bottom:1px solid var(--border);font-size:.47rem;vertical-align:middle}
.audit-v33-table-wrap tbody tr:last-child td{border-bottom:0}
.audit-v33-table-wrap tbody tr:hover td{background:color-mix(in srgb,var(--accent) 1.6%,var(--surface))}
.audit-v33-table-wrap td strong{display:block;font-size:.49rem}
.audit-v33-table-wrap td small{display:block;margin-top:2px;color:var(--muted);font-size:.41rem}
.audit-v33-table-wrap td code{display:block;margin-top:4px;color:var(--muted);font-size:.39rem;white-space:nowrap}
.audit-v33-action-chip{display:inline-flex;align-items:center;gap:4px;max-width:220px;padding:4px 6px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.4rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audit-v33-action-chip.security{background:color-mix(in srgb,#ef4444 8%,var(--surface));color:#b52b2b}
.audit-v33-action-chip.academic{background:color-mix(in srgb,#2563eb 8%,var(--surface));color:#245fba}
.audit-v33-action-chip.system{background:color-mix(in srgb,#8b5cf6 8%,var(--surface));color:#7345c5}
.audit-v33-action-chip .ui-icon{width:9px;height:9px;flex:0 0 auto}
.audit-v33-detail-cell{max-width:320px;color:var(--muted);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audit-v33-view{appearance:none;width:29px;height:29px;display:grid;place-items:center;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--muted);cursor:pointer}
.audit-v33-view:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
.audit-v33-view .ui-icon{width:11px;height:11px}
.audit-v33-empty-filter{display:grid;grid-template-columns:31px minmax(0,1fr);align-items:center;gap:8px;padding:14px 12px;border-top:1px solid var(--border)}
.audit-v33-empty-filter[hidden]{display:none!important}
.audit-v33-empty-filter>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--muted)}
.audit-v33-empty-filter .ui-icon{width:12px;height:12px}
.audit-v33-empty-filter strong{display:block;font-size:.52rem}
.audit-v33-empty-filter small{display:block;margin-top:2px;color:var(--muted);font-size:.43rem}
.audit-v33-drawer{position:fixed;inset:0;z-index:1400;display:grid;grid-template-columns:minmax(0,1fr) min(440px,92vw)}
.audit-v33-drawer-backdrop{appearance:none;border:0;background:rgba(20,17,26,.34);backdrop-filter:blur(1.5px);cursor:default}
.audit-v33-drawer>section{min-width:0;height:100%;overflow:auto;background:var(--surface);box-shadow:-14px 0 42px rgba(10,8,16,.16)}
.audit-v33-drawer>section>header{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:15px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(10px)}
.audit-v33-drawer>section>header small{display:block;color:var(--accent);font-size:.42rem;font-weight:850;text-transform:uppercase;letter-spacing:.07em}
.audit-v33-drawer>section>header h3{margin:4px 0 0;font-size:.78rem}
.audit-v33-drawer>section>header p{margin:3px 0 0;color:var(--muted);font-size:.45rem}
.audit-v33-drawer>section>header>button{appearance:none;width:31px;height:31px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);cursor:pointer}
.audit-v33-drawer>section>header>button .ui-icon{width:12px;height:12px}
.audit-v33-drawer-body{display:grid;gap:11px;padding:12px}
.audit-v33-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.audit-v33-detail-grid>div,.audit-v33-drawer-body>section{padding:10px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft)}
.audit-v33-detail-grid small,.audit-v33-drawer-body>section>small{display:block;color:var(--muted);font-size:.4rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.audit-v33-detail-grid strong{display:block;margin-top:4px;font-size:.5rem;word-break:break-word}
.audit-v33-detail-grid span{display:block;margin-top:2px;color:var(--muted);font-size:.42rem}
.audit-v33-drawer-body>section>p{margin:5px 0 0;font-size:.48rem;line-height:1.55}
.audit-v33-metadata{display:grid;gap:6px;margin-top:7px}
.audit-v33-metadata>div{display:grid;grid-template-columns:minmax(105px,.4fr) minmax(0,1fr);gap:8px;padding:6px 7px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.audit-v33-metadata b{font-size:.42rem;word-break:break-word}
.audit-v33-metadata span{font-size:.43rem;color:var(--muted);word-break:break-word;white-space:pre-wrap}
.audit-v33-metadata em{color:var(--muted);font-size:.44rem;font-style:normal}
body.audit-v33-drawer-open{overflow:hidden}

@media(max-width:1100px){
  .audit-v33-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .audit-v33-metrics>button:nth-child(4){border-left:0;border-top:1px solid var(--border)}
  .audit-v33-metrics>button:nth-child(5){border-top:1px solid var(--border)}
  .audit-v33-filterbar{grid-template-columns:minmax(240px,1fr) repeat(3,minmax(125px,.42fr))}
  .audit-v33-filterbar>.audit-v33-clear,.audit-v33-filterbar>small{grid-row:2}
}
@media(max-width:820px){
  .audit-v33-head{flex-direction:column}
  .audit-v33-head-actions{width:100%}
  .audit-v33-head-actions .btn{flex:1;justify-content:center}
  .audit-v33-overview-grid{grid-template-columns:1fr}
  .audit-v33-filterbar{grid-template-columns:1fr 1fr}
  .audit-v33-search{grid-column:1/-1}
  .audit-v33-filterbar>small{text-align:left}
  .audit-v33-drawer{grid-template-columns:minmax(0,1fr) min(420px,94vw)}
}
@media(max-width:620px){
  .audit-v33-metrics{grid-template-columns:1fr 1fr}
  .audit-v33-metrics>button{border-left:1px solid var(--border);border-top:1px solid var(--border)}
  .audit-v33-metrics>button:nth-child(-n+2){border-top:0}
  .audit-v33-metrics>button:nth-child(odd){border-left:0}
  .audit-v33-metrics>button:last-child{grid-column:1/-1;border-left:0}
  .audit-v33-filterbar{grid-template-columns:1fr}
  .audit-v33-search{grid-column:auto}
  .audit-v33-filterbar>.audit-v33-clear,.audit-v33-filterbar>small{grid-row:auto}
  .audit-v33-detail-grid{grid-template-columns:1fr}
  .audit-v33-drawer{grid-template-columns:1fr}
  .audit-v33-drawer-backdrop{display:none}
  .audit-v33-drawer>section{width:100vw}
}
@media(max-width:480px){
  .audit-v33{gap:8px}
  .audit-v33-head h2{font-size:.96rem}
  .audit-v33-metrics>button{min-height:64px;padding:8px}
  .audit-v33-recent-list>button{grid-template-columns:28px minmax(0,1fr)}
  .audit-v33-recent-list>button>b{grid-column:2;justify-self:start}
  .audit-v33-metadata>div{grid-template-columns:1fr}
}

/* Settings & Permissions V33 */
.settings-v33{display:grid;gap:10px;min-width:0}
.settings-v33-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:2px 1px}
.settings-v33-head>div:first-child{min-width:0}.settings-v33-head>div:first-child>span{display:block;color:var(--accent);font-size:.42rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.settings-v33-head h2{margin:4px 0 0;font-size:1rem}.settings-v33-head p{max-width:760px;margin:4px 0 0;color:var(--muted);font-size:.47rem;line-height:1.45}.settings-v33-head-actions{display:flex;gap:6px;flex:0 0 auto}
.settings-v33-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden}.settings-v33-metrics>button{appearance:none;min-width:0;min-height:70px;padding:10px 11px;border:0;border-left:1px solid var(--border);background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}.settings-v33-metrics>button:first-child{border-left:0}.settings-v33-metrics>button:hover{background:color-mix(in srgb,var(--accent) 2.5%,var(--surface))}.settings-v33-metrics small{display:block;color:var(--muted);font-size:.4rem;font-weight:800;text-transform:uppercase;letter-spacing:.055em}.settings-v33-metrics strong{display:block;margin-top:3px;font-size:.78rem;line-height:1.1}.settings-v33-metrics span{display:block;margin-top:3px;color:var(--muted);font-size:.42rem}
.settings-v33-tabs{display:flex;gap:4px;overflow:auto;padding:4px;border:1px solid var(--border);border-radius:11px;background:var(--surface)}.settings-v33-tabs button{appearance:none;flex:0 0 auto;min-height:31px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:.45rem;font-weight:800;cursor:pointer;white-space:nowrap}.settings-v33-tabs button:hover{color:var(--text);background:var(--surface-soft)}.settings-v33-tabs button.is-active{background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent)}
.settings-v33-panels,.settings-v33-panel{display:grid;gap:10px;min-width:0}.settings-v33-overview-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:10px}.settings-v33-card{min-width:0;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:0 7px 22px rgba(25,20,35,.02);overflow:hidden}.settings-v33-card>header{min-height:60px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:11px 13px;border-bottom:1px solid var(--border)}.settings-v33-card>header>div{min-width:0}.settings-v33-card>header small{display:block;color:var(--muted);font-size:.4rem;font-weight:820;text-transform:uppercase;letter-spacing:.055em}.settings-v33-card>header h3{margin:3px 0 0;font-size:.7rem}.settings-v33-card>header p{margin:3px 0 0;color:var(--muted);font-size:.44rem;line-height:1.42}.settings-v33-card>header>button{appearance:none;border:0;background:transparent;color:var(--accent);font:inherit;font-size:.44rem;font-weight:820;cursor:pointer;white-space:nowrap}
.settings-v33-role-list,.settings-v33-control-list{display:grid}.settings-v33-role-list>div,.settings-v33-control-list>div{display:grid;grid-template-columns:31px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:57px;padding:8px 11px;border-bottom:1px solid var(--border)}.settings-v33-role-list>div:last-child,.settings-v33-control-list>div:last-child{border-bottom:0}.settings-v33-role-list>div>span,.settings-v33-control-list>div>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--accent)}.settings-v33-role-list .ui-icon,.settings-v33-control-list .ui-icon{width:12px;height:12px}.settings-v33-role-list p,.settings-v33-control-list p{margin:0;min-width:0}.settings-v33-role-list strong,.settings-v33-control-list strong{display:block;font-size:.51rem}.settings-v33-role-list small,.settings-v33-control-list small{display:block;margin-top:2px;color:var(--muted);font-size:.41rem;line-height:1.35}.settings-v33-role-list b{font-size:.43rem;color:var(--muted)}.settings-v33-control-list>div{grid-template-columns:31px minmax(0,1fr)}.settings-v33-control-list>div.is-warning>span{background:color-mix(in srgb,#f59e0b 10%,var(--surface));color:#b56a00}
.settings-v33-guidance{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 11px}.settings-v33-guidance>span{width:33px;height:33px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,#2563eb 8%,var(--surface));color:#245fba}.settings-v33-guidance .ui-icon{width:14px;height:14px}.settings-v33-guidance strong{display:block;font-size:.51rem}.settings-v33-guidance small{display:block;margin-top:2px;color:var(--muted);font-size:.43rem;line-height:1.45}
.settings-v33-permission-table{max-height:680px;overflow:auto}.settings-v33-permission-table table{width:100%;min-width:840px;border-collapse:collapse}.settings-v33-permission-table th{position:sticky;top:0;z-index:3;padding:8px;border-bottom:1px solid var(--border);background:var(--surface-soft);color:var(--muted);font-size:.39rem;font-weight:820;text-transform:uppercase;letter-spacing:.045em;text-align:center;white-space:nowrap}.settings-v33-permission-table th:first-child{text-align:left}.settings-v33-permission-table td{padding:7px 8px;border-bottom:1px solid var(--border);font-size:.45rem;text-align:center}.settings-v33-permission-table td:first-child{text-align:left}.settings-v33-permission-table td strong{display:block;font-size:.47rem}.settings-v33-permission-table td small{display:block;margin-top:2px;color:var(--muted);font-size:.38rem}.settings-v33-permission-group td{padding:6px 8px;background:color-mix(in srgb,var(--accent) 4%,var(--surface));color:var(--accent);font-size:.39rem;font-weight:850;text-transform:uppercase;letter-spacing:.055em;text-align:left!important}.settings-v33-permission{display:inline-grid;width:24px;height:24px;place-items:center;border-radius:999px;font-size:.42rem;font-weight:850}.settings-v33-permission.yes{background:color-mix(in srgb,#22c55e 10%,var(--surface));color:#16803a}.settings-v33-permission.no{background:var(--surface-soft);color:var(--muted)}.settings-v33-permission .ui-icon{width:10px;height:10px}
.settings-v33-split{display:grid;grid-template-columns:1fr 1fr;gap:10px}.settings-v33-stat-list{display:grid}.settings-v33-stat-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid var(--border)}.settings-v33-stat-list>div:last-child{border-bottom:0}.settings-v33-stat-list span{color:var(--muted);font-size:.45rem}.settings-v33-stat-list strong{font-size:.58rem}.settings-v33-text-block{display:grid;gap:8px;padding:11px 12px}.settings-v33-text-block p{margin:0;color:var(--muted);font-size:.45rem;line-height:1.48}.settings-v33-text-block p strong{color:var(--text)}
.settings-v33-system-grid,.settings-v33-security-grid,.settings-v33-notification-grid,.settings-v33-integration-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.settings-v33-mini-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:0}.settings-v33-mini-metrics>div{padding:11px;border-left:1px solid var(--border);text-align:center}.settings-v33-mini-metrics>div:first-child{border-left:0}.settings-v33-mini-metrics strong{display:block;font-size:.65rem}.settings-v33-mini-metrics small{display:block;margin-top:3px;color:var(--muted);font-size:.4rem}.settings-v33-single-value{display:flex;align-items:baseline;gap:7px;padding:14px}.settings-v33-single-value strong{font-size:.8rem}.settings-v33-single-value span{color:var(--muted);font-size:.43rem}.settings-v33-status-pairs{display:grid}.settings-v33-status-pairs>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border)}.settings-v33-status-pairs>div:last-child{border-bottom:0}.settings-v33-status-pairs span{font-size:.44rem}.settings-v33-status-pairs b,.settings-v33-health{display:inline-flex;padding:4px 7px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.39rem;font-weight:850;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}.settings-v33-status-pairs b.ok,.settings-v33-health.ok{background:color-mix(in srgb,#22c55e 9%,var(--surface));color:#16803a}.settings-v33-status-pairs b.warn,.settings-v33-health.attention{background:color-mix(in srgb,#f59e0b 10%,var(--surface));color:#a96500}.settings-v33-status-pairs b.off{background:var(--surface-soft);color:var(--muted)}
.settings-v33-integration-title{display:flex!important;align-items:center;gap:8px}.settings-v33-integration-title>span{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--accent)}.settings-v33-integration-title .ui-icon{width:12px;height:12px}.settings-v33-integration-detail{margin:0;padding:10px 12px;color:var(--muted);font-size:.44rem;line-height:1.45}.settings-v33-card>footer{display:flex;justify-content:flex-end;gap:6px;padding:9px 11px;border-top:1px solid var(--border)}
.settings-v33-check-list{display:grid;padding:8px 11px}.settings-v33-check-list>div{display:flex;align-items:center;gap:7px;padding:6px 0;color:var(--muted);font-size:.44rem}.settings-v33-check-list .ui-icon{width:11px;height:11px;color:#16803a}
.settings-v33-drawer{position:fixed;inset:0;z-index:1450;display:block;pointer-events:auto}.settings-v33-drawer[hidden]{display:none!important}.settings-v33-drawer-backdrop{position:absolute;inset:0;z-index:0;width:100%;height:100%;appearance:none;border:0;background:rgba(20,17,26,.30);cursor:default}.settings-v33-drawer>section{position:absolute;top:0;right:0;bottom:0;z-index:1;width:min(460px,94vw);height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--surface);box-shadow:-14px 0 42px rgba(10,8,16,.16)}.settings-v33-drawer>section>header{position:sticky;top:0;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:15px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(10px)}.settings-v33-drawer>section>header small{display:block;color:var(--accent);font-size:.41rem;font-weight:850;text-transform:uppercase;letter-spacing:.07em}.settings-v33-drawer>section>header h3{margin:4px 0 0;font-size:.78rem}.settings-v33-drawer>section>header p{margin:3px 0 0;color:var(--muted);font-size:.44rem}.settings-v33-drawer>section>header>button{appearance:none;width:31px;height:31px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);cursor:pointer}.settings-v33-drawer>section>header>button .ui-icon{width:12px;height:12px}.settings-v33-form{display:grid;gap:10px;padding:12px}.settings-v33-form>section{display:grid;gap:8px;padding:11px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}.settings-v33-form h4{margin:0;font-size:.58rem}.settings-v33-form label{display:grid;gap:4px;color:var(--muted);font-size:.42rem;font-weight:750}.settings-v33-form input,.settings-v33-form select{width:100%;height:34px;padding:0 9px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);font:inherit;font-size:.46rem}.settings-v33-form label small{font-size:.39rem;font-weight:500;line-height:1.4}.settings-v33-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.settings-v33-form-grid.two{grid-template-columns:1fr 1fr}.settings-v33-warning{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:8px;padding:8px;border:1px solid color-mix(in srgb,#f59e0b 25%,var(--border));border-radius:9px;background:color-mix(in srgb,#f59e0b 5%,var(--surface));color:#9a6205}.settings-v33-warning>.ui-icon{width:14px;height:14px}.settings-v33-warning p{margin:0}.settings-v33-warning strong{display:block;font-size:.44rem}.settings-v33-warning small{display:block;margin-top:2px;font-size:.39rem;line-height:1.4}.settings-v33-form>footer{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:7px;padding:10px 0 2px;background:var(--surface)}body.settings-v33-drawer-open{overflow:visible}
@media(max-width:1050px){.settings-v33-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.settings-v33-metrics>button:nth-child(4){border-left:0;border-top:1px solid var(--border)}.settings-v33-metrics>button:nth-child(5){border-top:1px solid var(--border)}.settings-v33-overview-grid{grid-template-columns:1fr}.settings-v33-system-grid,.settings-v33-security-grid,.settings-v33-notification-grid,.settings-v33-integration-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.settings-v33-head{flex-direction:column}.settings-v33-head-actions{width:100%}.settings-v33-head-actions .btn{flex:1;justify-content:center}.settings-v33-metrics{grid-template-columns:1fr 1fr}.settings-v33-metrics>button{border-top:1px solid var(--border);border-left:1px solid var(--border)}.settings-v33-metrics>button:nth-child(-n+2){border-top:0}.settings-v33-metrics>button:nth-child(odd){border-left:0}.settings-v33-metrics>button:last-child{grid-column:1/-1;border-left:0}.settings-v33-split,.settings-v33-system-grid,.settings-v33-security-grid,.settings-v33-notification-grid,.settings-v33-integration-grid{grid-template-columns:1fr}.settings-v33-guidance{grid-template-columns:34px minmax(0,1fr)}.settings-v33-guidance>.btn{grid-column:2;justify-self:start}.settings-v33-drawer>section{width:min(440px,96vw)}.settings-v33-form-grid{grid-template-columns:1fr}.settings-v33-form-grid.two{grid-template-columns:1fr}}
@media(max-width:520px){.settings-v33{gap:8px}.settings-v33-head h2{font-size:.95rem}.settings-v33-drawer-backdrop{display:block}.settings-v33-drawer>section{width:100vw;max-width:100vw}.settings-v33-mini-metrics{grid-template-columns:1fr}.settings-v33-mini-metrics>div{border-left:0;border-top:1px solid var(--border)}.settings-v33-mini-metrics>div:first-child{border-top:0}}


/* =====================================================================
   Administrator Workspace V33 — Final QA hardening
   Keep overlay panels independent from document scroll so a missed close
   event can never leave the administrator workspace visually frozen.
   ===================================================================== */
body.academic-v33-drawer-open,
body.course-ops-v33-drawer-open,
body.onboarding-v33-drawer-open,
body.audit-v33-drawer-open,
body.settings-v33-drawer-open{overflow:visible!important}

.academic-v33-drawer-backdrop,
.course-ops-v33-drawer-backdrop,
.onboarding-v33-drawer-backdrop,
.audit-v33-drawer-backdrop,
.settings-v33-drawer-backdrop{cursor:pointer!important}

.academic-v33-drawer-panel,
.course-ops-v33-drawer-panel,
.onboarding-v33-drawer-panel,
.audit-v33-drawer>section,
.settings-v33-drawer>section{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

.admin-workspace-tabs{scroll-margin-top:12px}
.admin-workspace-tabs a[aria-current="page"]{font-weight:800}

@media (prefers-reduced-motion:reduce){
  .academic-v33-drawer *,
  .course-ops-v33-drawer *,
  .onboarding-v33-drawer *,
  .audit-v33-drawer *,
  .settings-v33-drawer *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ============================================================
   LECTURER WORKSPACE V33
   Compact role workspace layered over the existing teaching tools.
   ============================================================ */
.lecturer-v33{display:grid;gap:14px;min-width:0}
.lecturer-v33-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:2px 2px 0}
.lecturer-v33-kicker{display:block;color:var(--accent);font-size:.65rem;font-weight:850;text-transform:uppercase;letter-spacing:.075em}
.lecturer-v33-head h1{margin:5px 0 4px;font-size:clamp(1.7rem,2.4vw,2.35rem);letter-spacing:-.04em}
.lecturer-v33-head p{max-width:720px;margin:0;color:var(--muted);font-size:.82rem;line-height:1.55}
.lecturer-v33-head .btn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.lecturer-v33-head .ui-icon{width:15px;height:15px}

.lecturer-v33-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--border);border-radius:17px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow-sm)}
.lecturer-v33-summary>a{display:flex;align-items:center;gap:11px;min-width:0;padding:14px 16px;border-left:1px solid var(--border);color:var(--text);text-decoration:none;transition:background .15s ease}
.lecturer-v33-summary>a:first-child{border-left:0}
.lecturer-v33-summary>a:hover{background:var(--surface-soft)}
.lecturer-v33-summary>a>span{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)}
.lecturer-v33-summary>a.needs-attention>span{background:color-mix(in srgb,#f59e0b 11%,var(--surface));color:#a96200}
.lecturer-v33-summary .ui-icon{width:18px;height:18px}
.lecturer-v33-summary strong{display:block;font-size:1.18rem;line-height:1}
.lecturer-v33-summary small{display:block;margin-top:4px;color:var(--muted);font-size:.66rem;font-weight:700}

.lecturer-v33-shortcuts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.lecturer-v33-shortcuts>a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:8px 10px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--muted);text-decoration:none;font-size:.68rem;transition:border-color .15s ease,background .15s ease,color .15s ease}
.lecturer-v33-shortcuts>a:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--border));background:color-mix(in srgb,var(--accent) 5%,var(--surface));color:var(--accent)}
.lecturer-v33-shortcuts .ui-icon{width:15px;height:15px}

.lecturer-v33-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:12px;align-items:start}
.lecturer-v33-grid-secondary{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.lecturer-v33-panel{min-width:0;padding:14px;border:1px solid var(--border);border-radius:17px;background:var(--surface)}
.lecturer-v33-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:9px}
.lecturer-v33-panel-head small{display:block;color:var(--muted);font-size:.6rem;font-weight:850;text-transform:uppercase;letter-spacing:.07em}
.lecturer-v33-panel-head h2{margin:3px 0 0;font-size:.94rem}
.lecturer-v33-panel-head p{margin:3px 0 0;color:var(--muted);font-size:.64rem}
.lecturer-v33-panel-head>a{display:flex;align-items:center;gap:4px;color:var(--accent);font-size:.64rem;font-weight:800;text-decoration:none;white-space:nowrap}
.lecturer-v33-panel-head>a .ui-icon{width:13px;height:13px}
.lecturer-v33-count{padding:4px 8px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.6rem;font-weight:850}
.lecturer-v33-count.has-items{background:color-mix(in srgb,#f59e0b 11%,var(--surface));color:#a96200}
.lecturer-v33-count.is-clear{background:color-mix(in srgb,#22c55e 9%,var(--surface));color:#16855b}

.lecturer-v33-action-list{display:grid}
.lecturer-v33-action-list>a{display:grid;grid-template-columns:34px minmax(0,1fr) auto 16px;align-items:center;gap:9px;min-height:54px;padding:7px 0;border-top:1px solid var(--border);color:var(--text);text-decoration:none}
.lecturer-v33-action-list>a:first-child{border-top:0}
.lecturer-v33-action-list>a>span:first-child{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--accent)}
.lecturer-v33-action-list>a.needs-action>span:first-child{background:color-mix(in srgb,#f59e0b 10%,var(--surface));color:#a96200}
.lecturer-v33-action-list .ui-icon{width:15px;height:15px}
.lecturer-v33-action-list strong{display:block;font-size:.72rem}
.lecturer-v33-action-list small{display:block;margin-top:2px;color:var(--muted);font-size:.61rem}
.lecturer-v33-action-list>a>b{min-width:26px;text-align:center;font-size:.7rem}
.lecturer-v33-action-list>a>svg:last-child{color:var(--muted);width:14px;height:14px}

.lecturer-v33-timeline{display:grid}
.lecturer-v33-timeline>a{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:52px;padding:7px 0;border-top:1px solid var(--border);color:var(--text);text-decoration:none}
.lecturer-v33-timeline>a:first-child{border-top:0}
.lecturer-v33-timeline>a.is-past{opacity:.62}
.lecturer-v33-timeline time{font-size:.66rem;color:var(--muted);font-weight:750}
.lecturer-v33-timeline strong{display:block;font-size:.72rem}
.lecturer-v33-timeline small{display:block;margin-top:2px;color:var(--muted);font-size:.61rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lecturer-v33-timeline>a>b{padding:4px 7px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.57rem}

.lecturer-v33-list,.lecturer-v33-upcoming,.lecturer-v33-activity{display:grid}
.lecturer-v33-list>a,.lecturer-v33-upcoming>a,.lecturer-v33-activity>a{display:grid;align-items:center;gap:9px;min-height:50px;padding:7px 0;border-top:1px solid var(--border);color:var(--text);text-decoration:none}
.lecturer-v33-list>a:first-child,.lecturer-v33-upcoming>a:first-child,.lecturer-v33-activity>a:first-child{border-top:0}
.lecturer-v33-list>a{grid-template-columns:32px minmax(0,1fr) auto}
.lecturer-v33-avatar{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent);font-size:.68rem;font-weight:850}
.lecturer-v33-list strong,.lecturer-v33-upcoming strong,.lecturer-v33-activity strong{display:block;font-size:.69rem}
.lecturer-v33-list small,.lecturer-v33-upcoming small,.lecturer-v33-activity small{display:block;margin-top:2px;color:var(--muted);font-size:.59rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lecturer-v33-list>a>b{padding:4px 7px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.56rem}
.lecturer-v33-list>a>b.needs-grade{background:color-mix(in srgb,#f59e0b 10%,var(--surface));color:#a96200}
.lecturer-v33-list>a>b.is-done{background:color-mix(in srgb,#22c55e 9%,var(--surface));color:#16855b}
.lecturer-v33-upcoming>a,.lecturer-v33-activity>a{grid-template-columns:31px minmax(0,1fr) auto}
.lecturer-v33-upcoming>a>span:first-child,.lecturer-v33-activity>a>span:first-child{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--accent)}
.lecturer-v33-upcoming .ui-icon,.lecturer-v33-activity .ui-icon{width:14px;height:14px}
.lecturer-v33-upcoming time,.lecturer-v33-activity time{font-size:.58rem;color:var(--muted);font-weight:750}

.lecturer-v33-empty{display:flex;align-items:center;gap:10px;min-height:68px;color:var(--muted)}
.lecturer-v33-empty>span{width:37px;height:37px;display:grid;place-items:center;flex:0 0 37px;border-radius:10px;background:var(--surface-soft);color:var(--accent)}
.lecturer-v33-empty .ui-icon{width:17px;height:17px}
.lecturer-v33-empty strong{display:block;color:var(--text);font-size:.72rem}
.lecturer-v33-empty small{display:block;margin-top:2px;font-size:.61rem}
.lecturer-v33-empty>a{margin-left:auto;color:var(--accent);font-size:.62rem;font-weight:800;text-decoration:none}
.lecturer-v33-empty.compact{min-height:56px}

.lecturer-v33-alerts{display:grid}
.lecturer-v33-alerts>a{display:grid;grid-template-columns:58px minmax(170px,.8fr) minmax(220px,1.4fr) 16px;align-items:center;gap:10px;min-height:49px;padding:7px 0;border-top:1px solid var(--border);color:var(--text);text-decoration:none}
.lecturer-v33-alerts>a:first-child{border-top:0}
.lecturer-v33-alerts>a>span:first-child{padding:4px 6px;border-radius:999px;text-align:center;background:var(--surface-soft);font-size:.54rem;font-weight:850}
.lecturer-v33-alerts .severity-critical,.lecturer-v33-alerts .severity-high{background:color-mix(in srgb,#ef4444 9%,var(--surface));color:#b42318}
.lecturer-v33-alerts .severity-medium{background:color-mix(in srgb,#f59e0b 10%,var(--surface));color:#a96200}
.lecturer-v33-alerts strong{display:block;font-size:.69rem}
.lecturer-v33-alerts small{display:block;margin-top:2px;color:var(--muted);font-size:.58rem}
.lecturer-v33-alerts p{margin:0;color:var(--muted);font-size:.61rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lecturer-v33-alerts>a>svg{width:14px;height:14px;color:var(--muted)}

.lecturer-v33-course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.lecturer-v33-course-grid>article{padding:11px;border:1px solid var(--border);border-radius:13px;background:var(--surface-soft)}
.lecturer-v33-course-grid header{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;align-items:center}
.lecturer-v33-course-grid header>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--surface);color:var(--accent)}
.lecturer-v33-course-grid header .ui-icon{width:16px;height:16px}
.lecturer-v33-course-grid header small{display:block;color:var(--muted);font-size:.56rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lecturer-v33-course-grid h3{margin:2px 0 0;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lecturer-v33-course-grid header>b{padding:3px 6px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:.52rem;text-transform:capitalize}
.lecturer-v33-course-grid header>b.status-active{color:#16855b}
.lecturer-v33-course-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:10px 0 8px}
.lecturer-v33-course-metrics>span{padding:6px 5px;border-radius:8px;background:var(--surface)}
.lecturer-v33-course-metrics strong{display:block;font-size:.68rem}
.lecturer-v33-course-metrics strong.attention{color:#a96200}
.lecturer-v33-course-metrics small{display:block;margin-top:2px;color:var(--muted);font-size:.5rem}
.lecturer-v33-course-grid footer{display:flex;justify-content:flex-end;padding-top:7px;border-top:1px solid var(--border)}
.lecturer-v33-course-grid footer>a{display:flex;align-items:center;gap:4px;color:var(--accent);font-size:.6rem;font-weight:800;text-decoration:none}
.lecturer-v33-course-grid footer .ui-icon{width:12px;height:12px}

/* Lecturer V33 teaching hubs */
.lecturer-assessment-v33,.lecturer-schedule-v33{display:grid;gap:12px}
.lecturer-hub-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:2px}
.lecturer-hub-heading small{display:block;color:var(--accent);font-size:.61rem;font-weight:850;text-transform:uppercase;letter-spacing:.07em}
.lecturer-hub-heading h2{margin:3px 0 2px;font-size:1rem}
.lecturer-hub-heading p{margin:0;color:var(--muted);font-size:.65rem}
.lecturer-hub-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.lecturer-hub-actions .btn{min-height:35px;padding:0 11px;font-size:.63rem}
.lecturer-hub-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden}
.lecturer-hub-stats>div{padding:11px 13px;border-left:1px solid var(--border)}
.lecturer-hub-stats>div:first-child{border-left:0}
.lecturer-hub-stats strong{display:block;font-size:1rem}
.lecturer-hub-stats span{display:block;margin-top:3px;color:var(--muted);font-size:.58rem;font-weight:700}
.lecturer-hub-stats>div.needs-attention strong{color:#a96200}
.lecturer-hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lecturer-hub-card{min-width:0;padding:13px 14px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.lecturer-hub-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:7px}
.lecturer-hub-card>header small{display:block;color:var(--muted);font-size:.58rem;font-weight:850;text-transform:uppercase;letter-spacing:.07em}
.lecturer-hub-card>header h3{margin:3px 0 0;font-size:.86rem}
.lecturer-hub-card>header>a{color:var(--accent);font-size:.61rem;font-weight:800;text-decoration:none}
.lecturer-hub-list{display:grid}
.lecturer-hub-list>a{display:grid;grid-template-columns:minmax(0,1fr) 72px 62px 14px;align-items:center;gap:9px;min-height:49px;padding:7px 0;border-top:1px solid var(--border);color:var(--text);text-decoration:none}
.lecturer-hub-list>a:first-child{border-top:0}
.lecturer-hub-list strong{display:block;font-size:.68rem}
.lecturer-hub-list small{display:block;margin-top:2px;color:var(--muted);font-size:.56rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lecturer-hub-list>a>span:not(:first-child){text-align:right}
.lecturer-hub-list>a>span:not(:first-child) b{display:block;font-size:.67rem}
.lecturer-hub-list>a>span.attention b{color:#a96200}
.lecturer-hub-list>a>svg{width:13px;height:13px;color:var(--muted)}
.lecturer-hub-empty{display:flex;align-items:center;gap:10px;min-height:86px;color:var(--muted)}
.lecturer-hub-empty>span{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;border-radius:10px;background:var(--surface-soft);color:var(--accent)}
.lecturer-hub-empty .ui-icon{width:17px;height:17px}
.lecturer-hub-empty strong{display:block;color:var(--text);font-size:.71rem}
.lecturer-hub-empty small{display:block;margin-top:2px;font-size:.59rem}
.lecturer-hub-empty>a{margin-left:auto;color:var(--accent);font-size:.61rem;font-weight:800;text-decoration:none}
.lecturer-schedule-list{display:grid;border:1px solid var(--border);border-radius:15px;background:var(--surface);overflow:hidden}
.lecturer-schedule-list>a{display:grid;grid-template-columns:62px 34px minmax(0,1fr) auto 14px;align-items:center;gap:10px;min-height:58px;padding:8px 12px;border-top:1px solid var(--border);color:var(--text);text-decoration:none}
.lecturer-schedule-list>a:first-child{border-top:0}
.lecturer-schedule-list>a.is-past{opacity:.58}
.lecturer-schedule-list time b,.lecturer-schedule-list time small{display:block}
.lecturer-schedule-list time b{font-size:.68rem}.lecturer-schedule-list time small{margin-top:2px;color:var(--muted);font-size:.56rem}
.lecturer-schedule-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--surface-soft);color:var(--accent)}
.lecturer-schedule-icon .ui-icon{width:15px;height:15px}
.lecturer-schedule-list strong{display:block;font-size:.7rem}
.lecturer-schedule-list small{display:block;margin-top:2px;color:var(--muted);font-size:.59rem}
.lecturer-schedule-list>a>b{padding:4px 7px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:.56rem}
.lecturer-schedule-list>a>svg{width:13px;height:13px;color:var(--muted)}

@media (max-width:1180px){
    .lecturer-v33-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr))}
    .lecturer-v33-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .lecturer-v33-alerts>a{grid-template-columns:58px minmax(150px,.8fr) minmax(180px,1.2fr) 16px}
}
@media (max-width:900px){
    .lecturer-v33-head{align-items:flex-start;flex-direction:column;gap:11px}
    .lecturer-v33-head .btn{width:100%;justify-content:center}
    .lecturer-v33-grid,.lecturer-v33-grid-secondary,.lecturer-hub-grid{grid-template-columns:1fr}
    .lecturer-v33-summary,.lecturer-hub-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .lecturer-v33-summary>a:nth-child(3),.lecturer-hub-stats>div:nth-child(3){border-left:0;border-top:1px solid var(--border)}
    .lecturer-v33-summary>a:nth-child(4),.lecturer-hub-stats>div:nth-child(4){border-top:1px solid var(--border)}
    .lecturer-v33-alerts>a{grid-template-columns:58px minmax(0,1fr) 16px}.lecturer-v33-alerts p{display:none}
}
@media (max-width:640px){
    .lecturer-v33-shortcuts{display:flex;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.lecturer-v33-shortcuts::-webkit-scrollbar{display:none}.lecturer-v33-shortcuts>a{flex:0 0 auto;min-width:118px}
    .lecturer-v33-course-grid{grid-template-columns:1fr}
    .lecturer-v33-course-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
    .lecturer-hub-heading{align-items:flex-start;flex-direction:column}.lecturer-hub-actions{width:100%;justify-content:flex-start}
    .lecturer-hub-list>a{grid-template-columns:minmax(0,1fr) 58px 14px}.lecturer-hub-list>a>span:nth-child(3){display:none}
    .lecturer-schedule-list>a{grid-template-columns:56px 30px minmax(0,1fr) 13px}.lecturer-schedule-list>a>b{display:none}
}

/* =====================================================================
   PREMIUM STUDENT EXPERIENCE & UI/UX SYSTEM
   Enhanced micro-animations, glassmorphic cards, and tactile feedback.
   Preserves login page & dashboard skeleton handoff seamlessly.
   ===================================================================== */

/* ─── Student Theme Tokens & Variables ─── */
:root {
    --student-accent: #3b82f6;
    --student-accent-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --student-accent-glow: rgba(59, 130, 246, 0.25);
    --student-card-radius: 18px;
    --student-pill-radius: 9999px;
    --student-transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    --student-spring: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    --student-glass-bg: rgba(255, 255, 255, 0.82);
    --student-glass-border: rgba(226, 232, 240, 0.85);
    --student-shadow-sm: 0 2px 8px -2px rgba(15, 23, 42, 0.05);
    --student-shadow-md: 0 8px 24px -4px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
    --student-shadow-lg: 0 16px 36px -6px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
    --student-shadow-hover: 0 20px 40px -8px rgba(59, 130, 246, 0.18), 0 6px 16px -2px rgba(15, 23, 42, 0.05);
}

html[data-theme="dark"] {
    --student-glass-bg: rgba(20, 28, 26, 0.75);
    --student-glass-border: rgba(255, 255, 255, 0.09);
    --student-shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.35);
    --student-shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.45);
    --student-shadow-lg: 0 16px 36px -6px rgba(0, 0, 0, 0.55);
    --student-shadow-hover: 0 20px 40px -8px rgba(59, 130, 246, 0.3), 0 6px 16px -2px rgba(0, 0, 0, 0.4);
}

/* ─── Global Animation Keyframes ─── */
@keyframes studentFadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes studentFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes studentScaleUp {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes studentPulseDot {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.75);
        opacity: 0.45;
    }
}

@keyframes studentOrbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes studentShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
    }
}

/* ─── Tactile Feedback & Micro-Interactions ─── */
button, .btn, .nav-link, .hero-chip, .metric-card, .course-card, .task-card-v2, .courses-library-card {
    transition: var(--student-transition);
}

button:active, .btn:active, .hero-chip:active {
    transform: scale(0.975);
}

/* ─── Student Dashboard Polish ─── */
body[data-route="dashboard"][data-role="student"] .dashboard-intro,
body[data-route="dashboard"] .dashboard-intro {
    animation: studentFadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Learning Hero Card */
body[data-route="dashboard"] .learning-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.94) 0%, rgba(15, 23, 42, 0.96) 65%, rgba(13, 148, 136, 0.88) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--student-card-radius);
    box-shadow: var(--student-shadow-lg);
    padding: 34px 38px;
    color: #ffffff;
    transition: var(--student-transition);
}

body[data-route="dashboard"] .learning-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.28) 0%, rgba(99, 102, 241, 0.12) 50%, transparent 70%);
    pointer-events: none;
    filter: blur(40px);
}

body[data-route="dashboard"] .learning-hero .hero-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--student-pill-radius);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #bae6fd;
    backdrop-filter: blur(8px);
    margin-bottom: 12px;
}

body[data-route="dashboard"] .learning-hero h2 {
    font-size: clamp(1.45rem, 2.2vw, 1.85rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
}

body[data-route="dashboard"] .learning-hero p {
    color: rgba(241, 245, 249, 0.88);
    font-size: 0.92rem;
    line-height: 1.55;
    max-width: 520px;
    margin: 0 0 24px;
}

body[data-route="dashboard"] .learning-hero .btn-primary {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
    border-radius: 12px;
    padding: 10px 22px;
}

body[data-route="dashboard"] .learning-hero .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.55);
}

body[data-route="dashboard"] .learning-hero .btn-secondary {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 10px 18px;
    margin-left: 8px;
}

body[data-route="dashboard"] .learning-hero .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
}

/* Orbit Graphic in Learning Hero */
body[data-route="dashboard"] .hero-orbit {
    width: 90px;
    height: 90px;
    border: 2px dashed rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: studentOrbitSpin 24s linear infinite;
}

body[data-route="dashboard"] .hero-orbit .orbit-core {
    font-size: 1.25rem;
    font-weight: 850;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    animation: studentOrbitSpin 24s linear infinite reverse;
}

body[data-route="dashboard"] .hero-orbit .orbit-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor;
}

body[data-route="dashboard"] .hero-orbit .dot-one {
    top: -5px;
    background: #38bdf8;
    color: #38bdf8;
}

body[data-route="dashboard"] .hero-orbit .dot-two {
    right: -5px;
    background: #a78bfa;
    color: #a78bfa;
}

body[data-route="dashboard"] .hero-orbit .dot-three {
    bottom: -5px;
    background: #34d399;
    color: #34d399;
}

/* ─── Metric Grid Cards ─── */
body[data-route="dashboard"] .metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

body[data-route="dashboard"] .metric-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--student-card-radius);
    padding: 20px 22px;
    box-shadow: var(--student-shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    transition: var(--student-transition);
}

body[data-route="dashboard"] .metric-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--student-shadow-md);
    border-color: rgba(59, 130, 246, 0.4);
}

body[data-route="dashboard"] .metric-card.metric-mint:hover {
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 12px 28px -4px rgba(16, 185, 129, 0.2);
}

body[data-route="dashboard"] .metric-card.metric-gold:hover {
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 12px 28px -4px rgba(245, 158, 11, 0.2);
}

body[data-route="dashboard"] .metric-card.progress-card:hover {
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow: 0 12px 28px -4px rgba(99, 102, 241, 0.2);
}

body[data-route="dashboard"] .metric-card .metric-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    background: var(--surface-2);
    color: var(--accent);
    transition: var(--student-transition);
}

body[data-route="dashboard"] .metric-card:hover .metric-icon {
    transform: scale(1.08);
}

body[data-route="dashboard"] .metric-card.metric-mint .metric-icon {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

body[data-route="dashboard"] .metric-card.metric-gold .metric-icon {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

body[data-route="dashboard"] .metric-card small {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body[data-route="dashboard"] .metric-card strong {
    font-size: 2.1rem;
    font-weight: 850;
    line-height: 1.15;
    margin: 4px 0 8px;
    color: var(--text);
}

body[data-route="dashboard"] .metric-card span:last-child {
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--student-transition);
}

body[data-route="dashboard"] .metric-card:hover span:last-child {
    transform: translateX(4px);
}

/* Progress Ring in metric card */
body[data-route="dashboard"] .metric-card .progress-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}

body[data-route="dashboard"] .metric-card .progress-ring span {
    text-align: center;
}

body[data-route="dashboard"] .metric-card .progress-ring strong {
    font-size: 2.1rem;
    display: block;
    margin: 0;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body[data-route="dashboard"] .metric-card .progress-ring small {
    display: block;
    margin-top: 4px;
    color: var(--accent);
    font-weight: 700;
}

/* ─── Interactive Coming Up Schedule Card ─── */
body[data-route="dashboard"] .events-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--student-card-radius);
    padding: 22px;
    box-shadow: var(--student-shadow-sm);
    transition: var(--student-transition);
}

body[data-route="dashboard"] .events-card .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

body[data-route="dashboard"] .events-card .section-title h2 {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0;
    color: var(--text);
}

body[data-route="dashboard"] .events-card .section-title p {
    font-size: 0.74rem;
    color: var(--muted);
    margin: 2px 0 0;
}

body[data-route="dashboard"] .events-card .section-title a {
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 750;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--student-pill-radius);
    background: var(--surface-2);
}

body[data-route="dashboard"] .events-card .section-title a:hover {
    background: rgba(59, 130, 246, 0.12);
}

body[data-route="dashboard"] .date-strip {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    padding: 4px;
    background: var(--surface-2);
    border-radius: 14px;
}

body[data-route="dashboard"] .date-pill {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: var(--student-spring);
}

body[data-route="dashboard"] .date-pill small {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}

body[data-route="dashboard"] .date-pill strong {
    font-size: 0.95rem;
    font-weight: 850;
    margin-top: 2px;
}

body[data-route="dashboard"] .date-pill.active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

body[data-route="dashboard"] .event-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    background: var(--surface-2);
    text-decoration: none;
    color: var(--text);
    margin-bottom: 8px;
    border-left: 4px solid var(--accent);
    transition: var(--student-transition);
}

body[data-route="dashboard"] .event-item:hover {
    transform: translateX(4px);
    background: var(--surface-3);
}

body[data-route="dashboard"] .event-item.event-tone-1 { border-left-color: #3b82f6; }
body[data-route="dashboard"] .event-item.event-tone-2 { border-left-color: #10b981; }
body[data-route="dashboard"] .event-item.event-tone-3 { border-left-color: #f59e0b; }
body[data-route="dashboard"] .event-item.event-tone-4 { border-left-color: #8b5cf6; }

body[data-route="dashboard"] .event-item .event-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--surface);
    display: grid;
    place-items: center;
    color: var(--accent);
}

body[data-route="dashboard"] .event-item strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.25;
}

body[data-route="dashboard"] .event-item small {
    display: block;
    font-size: 0.7rem;
    color: var(--muted);
    margin-top: 2px;
}

/* ─── Dashboard Announcements Card ─── */
body[data-route="dashboard"] .dashboard-announcements-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--student-card-radius);
    padding: 22px;
    box-shadow: var(--student-shadow-sm);
    margin-top: 18px;
    transition: var(--student-transition);
}

body[data-route="dashboard"] .dashboard-announcements-card .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

body[data-route="dashboard"] .dashboard-announcements-card .section-title h2 {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0;
}

body[data-route="dashboard"] .dashboard-announcement-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    background: var(--surface-2);
    margin-bottom: 8px;
    transition: var(--student-transition);
}

body[data-route="dashboard"] .dashboard-announcement-item:hover {
    transform: translateX(4px);
    background: var(--surface-3);
}

body[data-route="dashboard"] .dashboard-announcement-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 8px;
    background: #3b82f6;
    box-shadow: 0 0 8px #3b82f6;
    animation: studentPulseDot 2s ease-in-out infinite;
}

body[data-route="dashboard"] .dashboard-announcement-item.priority-emergency .dashboard-announcement-dot {
    background: #ef4444;
    box-shadow: 0 0 10px #ef4444;
}

body[data-route="dashboard"] .dashboard-announcement-item.priority-important .dashboard-announcement-dot {
    background: #f59e0b;
    box-shadow: 0 0 8px #f59e0b;
}

body[data-route="dashboard"] .dashboard-announcement-meta b {
    font-size: 0.65rem;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--student-pill-radius);
    background: var(--surface);
    color: var(--accent);
}

body[data-route="dashboard"] .dashboard-announcement-copy strong {
    display: block;
    font-size: 0.82rem;
    margin-top: 3px;
    font-weight: 750;
}

body[data-route="dashboard"] .dashboard-announcement-arrow {
    margin-left: auto;
    color: var(--muted);
    transition: var(--student-transition);
}

body[data-route="dashboard"] .dashboard-announcement-item:hover .dashboard-announcement-arrow {
    transform: translateX(4px);
    color: var(--accent);
}

/* ─── Continue Learning Course Cards ─── */
.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 14px;
}

.course-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--student-card-radius);
    padding: 22px;
    box-shadow: var(--student-shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    color: var(--text);
    position: relative;
    overflow: hidden;
    transition: var(--student-transition);
}

.course-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--course-accent, #0d6b5f);
    transition: var(--student-transition);
}

.course-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--student-shadow-hover);
    border-color: rgba(59, 130, 246, 0.35);
}

.course-card:hover::before {
    height: 7px;
}

.course-card .course-kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 750;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.course-card h3 {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 8px;
    line-height: 1.3;
}

.course-card p {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-card .progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--muted);
}

.course-card .progress {
    height: 7px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
    margin-bottom: 14px;
}

.course-card .progress span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--course-accent, #0d6b5f) 0%, #38bdf8 100%);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.course-card .card-link {
    font-size: 0.8rem;
    font-weight: 750;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

.course-card .card-link b {
    display: inline-flex;
    transition: var(--student-transition);
}

.course-card:hover .card-link b {
    transform: translateX(4px);
}

/* Certificate Cards */
.certificate-card {
    border-left: 4px solid #f59e0b;
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
}

.certificate-card h3 {
    color: #b45309;
}

html[data-theme="dark"] .certificate-card h3 {
    color: #fbbf24;
}

/* ─── My Courses Page (routes/courses) ─── */
body[data-route="courses"] .courses-library-card {
    border-radius: var(--student-card-radius);
    border: 1px solid var(--border);
    box-shadow: var(--student-shadow-sm);
    transition: var(--student-transition);
    background: var(--surface);
    overflow: hidden;
}

body[data-route="courses"] .courses-library-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--student-shadow-hover);
    border-color: rgba(59, 130, 246, 0.35);
}

body[data-route="courses"] .courses-card-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--accent);
    display: grid;
    place-items: center;
    transition: var(--student-transition);
}

body[data-route="courses"] .courses-library-card:hover .courses-card-mark {
    transform: scale(1.1) rotate(-4deg);
    background: rgba(59, 130, 246, 0.14);
    color: #3b82f6;
}

body[data-route="courses"] .courses-card-status.is-progress {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border-radius: var(--student-pill-radius);
    font-weight: 750;
}

body[data-route="courses"] .courses-card-status.is-completed {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border-radius: var(--student-pill-radius);
    font-weight: 750;
}

body[data-route="courses"] .courses-search input {
    border-radius: var(--student-pill-radius);
    transition: var(--student-transition);
}

body[data-route="courses"] .courses-search input:focus {
    box-shadow: 0 0 0 4px var(--student-accent-glow);
    border-color: var(--student-accent);
}

/* ─── Single Course View (routes/course) ─── */
body[data-route="course"] .course-overview-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--student-card-radius);
    padding: 32px;
    box-shadow: var(--student-shadow-sm);
    margin-bottom: 22px;
}

body[data-route="course"] .course-page-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
    padding-bottom: 2px;
}

body[data-route="course"] .course-page-tabs a {
    padding: 10px 18px;
    border-radius: 12px;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
    transition: var(--student-transition);
}

body[data-route="course"] .course-page-tabs a.active,
body[data-route="course"] .course-page-tabs a[aria-current="page"] {
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 4px 14px var(--student-accent-glow);
}

body[data-route="course"] .course-module-item {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    margin-bottom: 12px;
    overflow: hidden;
    transition: var(--student-transition);
}

body[data-route="course"] .course-module-item:hover {
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow: var(--student-shadow-sm);
}

body[data-route="course"] .course-module-item[open] summary {
    border-bottom: 1px solid var(--border);
}

body[data-route="course"] .course-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: var(--student-transition);
}

body[data-route="course"] .course-item-row:last-child {
    border-bottom: none;
}

body[data-route="course"] .course-item-row:hover {
    background: var(--surface-2);
    transform: translateX(4px);
}

body[data-route="course"] .course-item-row.is-done .course-item-badge {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
}

/* ─── My Tasks & Assessment View (routes/tasks & assignment) ─── */
body[data-route="tasks"] .tasks-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

body[data-route="tasks"] .tasks-summary article {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--student-shadow-sm);
    transition: var(--student-transition);
}

body[data-route="tasks"] .tasks-summary article:hover {
    transform: translateY(-3px);
    box-shadow: var(--student-shadow-md);
}

body[data-route="tasks"] .tasks-summary article.has-alert {
    border-color: rgba(239, 68, 68, 0.35);
    background: linear-gradient(135deg, var(--surface) 0%, rgba(239, 68, 68, 0.05) 100%);
}

body[data-route="tasks"] .tasks-summary article.has-alert strong {
    color: #ef4444;
}

body[data-route="tasks"] .tasks-filter-tabs a {
    border-radius: var(--student-pill-radius);
    padding: 7px 16px;
    font-weight: 700;
    transition: var(--student-transition);
}

body[data-route="tasks"] .tasks-filter-tabs a.active {
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 4px 12px var(--student-accent-glow);
}

body[data-route="tasks"] .task-card-v2 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--student-shadow-sm);
    transition: var(--student-transition);
    position: relative;
    overflow: hidden;
}

body[data-route="tasks"] .task-card-v2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent);
}

body[data-route="tasks"] .task-card-v2.is-overdue::before { background: #ef4444; }
body[data-route="tasks"] .task-card-v2.is-today::before { background: #f59e0b; }
body[data-route="tasks"] .task-card-v2.is-completed::before { background: #10b981; }

body[data-route="tasks"] .task-card-v2:hover {
    transform: translateY(-3px) translateX(2px);
    box-shadow: var(--student-shadow-md);
}

body[data-route="assignment"] .assignment-summary-v2 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

body[data-route="assignment"] .assignment-summary-v2 article {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--student-shadow-sm);
    transition: var(--student-transition);
}

body[data-route="assignment"] .assignment-summary-v2 article:hover {
    transform: translateY(-2px);
}

/* ─── My Grades Page (routes/grades) ─── */
body[data-route="grades"] .grades-summary {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

body[data-route="grades"] .grades-summary article {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--student-card-radius);
    padding: 20px;
    box-shadow: var(--student-shadow-sm);
    transition: var(--student-transition);
}

body[data-route="grades"] .grades-summary article:hover {
    transform: translateY(-3px);
    box-shadow: var(--student-shadow-md);
}

body[data-route="grades"] .grades-summary-primary {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(99, 102, 241, 0.08) 100%);
    border-color: rgba(59, 130, 246, 0.3);
}

body[data-route="grades"] .grades-summary-primary strong {
    font-size: 2.2rem;
    font-weight: 850;
    color: var(--accent);
}

body[data-route="grades"] .grade-course-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--student-card-radius);
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: var(--student-shadow-sm);
    transition: var(--student-transition);
}

body[data-route="grades"] .grade-course-card:hover {
    box-shadow: var(--student-shadow-md);
}

body[data-route="grades"] .grade-course-header {
    padding: 18px 22px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body[data-route="grades"] .grade-course-average strong {
    font-size: 1.4rem;
    font-weight: 850;
    color: var(--accent);
}

/* ─── Attendance Page (routes/attendance) ─── */
body[data-route="attendance"] .attendance-overview-v2 {
    display: grid;
    grid-template-columns: 1.4fr 2.6fr;
    gap: 18px;
    margin-bottom: 22px;
}

body[data-route="attendance"] .attendance-overall-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--student-card-radius);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: var(--student-shadow-sm);
}

body[data-route="attendance"] .attendance-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

body[data-route="attendance"] .attendance-stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--student-shadow-sm);
    transition: var(--student-transition);
}

body[data-route="attendance"] .attendance-stat-card:hover {
    transform: translateY(-3px);
}

body[data-route="attendance"] .attendance-stat-card.is-present { border-left: 4px solid #10b981; }
body[data-route="attendance"] .attendance-stat-card.is-late { border-left: 4px solid #f59e0b; }
body[data-route="attendance"] .attendance-stat-card.is-absent { border-left: 4px solid #ef4444; }
body[data-route="attendance"] .attendance-stat-card.is-excused { border-left: 4px solid #06b6d4; }

body[data-route="attendance"] .attendance-meta-strip-v3 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 20px;
    background: var(--surface-2);
    border-radius: 14px;
    margin-bottom: 22px;
}

/* ─── Student Profile Page Polish (routes/profile) ─── */
body[data-route="profile"] .profile-hero-banner {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    border-radius: var(--student-card-radius);
    padding: 28px;
    box-shadow: var(--student-shadow-sm);
    margin-bottom: 22px;
}

body[data-route="profile"] .hero-avatar-ring {
    box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px rgba(59, 130, 246, 0.35);
    transition: var(--student-transition);
}

body[data-route="profile"] .hero-avatar-ring:hover {
    transform: scale(1.04);
    box-shadow: 0 0 0 4px var(--surface), 0 0 0 8px rgba(59, 130, 246, 0.55);
}

body[data-route="profile"] .hero-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--student-pill-radius);
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: var(--student-transition);
}

body[data-route="profile"] .hero-chip:hover {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.08);
    transform: translateY(-2px);
}

/* ─── Floating Toast Notification ─── */
.student-toast-container {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.student-toast {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 18px;
    box-shadow: var(--student-shadow-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 650;
    pointer-events: auto;
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.student-toast.toast-hiding {
    animation: toastSlideOut 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.student-toast .toast-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.14);
    color: #10b981;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
}

/* ─── Responsive Viewport Adjustments ─── */
@media (max-width: 1024px) {
    body[data-route="dashboard"] .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body[data-route="grades"] .grades-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body[data-route="attendance"] .attendance-overview-v2 {
        grid-template-columns: 1fr;
    }
    body[data-route="tasks"] .tasks-summary,
    body[data-route="assignment"] .assignment-summary-v2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    body[data-route="dashboard"] .metric-grid {
        grid-template-columns: 1fr;
    }
    body[data-route="dashboard"] .learning-hero {
        padding: 22px 20px;
    }
    body[data-route="dashboard"] .hero-orbit {
        display: none;
    }
    body[data-route="attendance"] .attendance-stat-grid,
    body[data-route="attendance"] .attendance-meta-strip-v3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body[data-route="grades"] .grades-summary,
    body[data-route="tasks"] .tasks-summary,
    body[data-route="assignment"] .assignment-summary-v2 {
        grid-template-columns: 1fr;
    }
}

/* ─── Task List & Announcements Refinements ─── */
body[data-route="dashboard"] .task-list {
    display: grid;
    gap: 10px;
}

body[data-route="dashboard"] .task-row {
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--student-shadow-sm);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: var(--text);
    transition: var(--student-transition);
}

body[data-route="dashboard"] .task-row:hover {
    transform: translateX(5px);
    box-shadow: var(--student-shadow-md);
    border-color: rgba(59, 130, 246, 0.4);
}

body[data-route="dashboard"] .task-row .task-priority {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 12px;
}

body[data-route="dashboard"] .task-row .task-priority.overdue {
    background: #ef4444;
    box-shadow: 0 0 8px #ef4444;
}

.announcement-list.standalone {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.announcement-list.standalone .announcement {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--student-card-radius);
    padding: 24px;
    box-shadow: var(--student-shadow-sm);
    transition: var(--student-transition);
    position: relative;
    overflow: hidden;
}

.announcement-list.standalone .announcement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent);
}

.announcement-list.standalone .announcement.priority-emergency::before { background: #ef4444; }
.announcement-list.standalone .announcement.priority-important::before { background: #f59e0b; }

.announcement-list.standalone .announcement:hover {
    transform: translateY(-3px);
    box-shadow: var(--student-shadow-md);
}

/* ─── Accessibility: Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}