/* ═══════════════════════════════════════════════════════════════
   CampusFlow — Premium Glassmorphism Design System
   Inspired by Linear, Vercel, Raycast, Notion, Stripe
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   §1  DESIGN TOKENS
   ═══════════════════════════════════════════ */
:root {
  /* ── Primary Palette ── */
  --brand-primary: #7C3AED;
  --brand-primary-rgb: 124, 58, 237;
  --brand-primary-dark: #6D28D9;
  --brand-primary-light: rgba(124, 58, 237, .08);
  --brand-secondary: #06B6D4;
  --brand-secondary-rgb: 6, 182, 212;
  --brand-accent: #EC4899;
  --brand-accent-rgb: 236, 72, 153;

  /* ── Surfaces ── */
  --surface-bg: #F5F3FF;
  --surface-bg-2: #EDE9FE;
  --surface-card: rgba(255, 255, 255, .75);
  --surface-card-solid: #ffffff;
  --surface-glass: rgba(255, 255, 255, .55);

  /* ── Text ── */
  --text-main: #1A1A2E;
  --text-muted: #5E6B78;    /* darkened from #6B7280 for WCAG AA on lavender bg */
  --text-secondary: #4B5563;

  /* ── Borders ── */
  --border-soft: rgba(124, 58, 237, .08);
  --border-glass: rgba(255, 255, 255, .35);

  /* ── Navigation ── */
  --nav-link: #4B5563;
  --nav-hover-bg: rgba(124, 58, 237, .06);

  /* ── Inputs ── */
  --input-bg: rgba(255, 255, 255, .7);

  /* ── Shadows ── */
  --shadow-soft: 0 1px 3px rgba(124, 58, 237, .03), 0 4px 16px rgba(124, 58, 237, .04);
  --shadow-card: 0 4px 24px rgba(124, 58, 237, .06), 0 1px 4px rgba(0, 0, 0, .03);
  --shadow-glow: 0 0 24px rgba(124, 58, 237, .1);
  --shadow-elevated: 0 12px 40px rgba(124, 58, 237, .08), 0 4px 12px rgba(0, 0, 0, .04);

  /* ── Layout ── */
  --sidebar-w: 260px;
  --topnav-h: 60px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;

  /* ── Glass ── */
  --glass-blur: blur(20px) saturate(1.4);
  --glass-bg: rgba(255, 255, 255, .6);
  --glass-border: rgba(255, 255, 255, .3);

  /* ── Footer ── */
  --footer-bg: rgba(255, 255, 255, .65);

  /* ── Transition Curves ── */
  --ease-out: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.22, .68, 0, 1.2);
}

/* ============================================================================
   CampusFlow Admin Sidebar Navigation - Enterprise SaaS Rail
   Scoped to Admin shell only. Supports dark/light themes, 280px expanded,
   80px collapsed, desktop fixed rail and mobile drawer.
   ========================================================================== */
body.area-admin {
    --sidebar-w: 280px;
    --admin-sidebar-expanded: 280px;
    --admin-sidebar-collapsed: 80px;
    --admin-nav-radius: 14px;
    --admin-nav-accent: #2563eb;
    --admin-nav-accent-2: #4ea8ff;
    --admin-nav-success: #16a34a;
    --admin-nav-warning: #d97706;
    --admin-nav-danger: #dc2626;
    --admin-nav-bg: #f5f7fb;
    --admin-nav-card: #ffffff;
    --admin-nav-surface: #f8fafc;
    --admin-nav-border: #e5e7eb;
    --admin-nav-hover: rgba(37, 99, 235, .08);
    --admin-nav-text: #0f172a;
    --admin-nav-secondary: #475569;
    --admin-nav-muted: #64748b;
    --admin-nav-active: linear-gradient(135deg, #2563eb, #3b82f6);
    --admin-nav-glow: 0 0 24px rgba(37, 99, 235, .18);
}

[data-theme="dark"] body.area-admin {
    --admin-nav-accent: #4ea8ff;
    --admin-nav-accent-2: #4ea8ff;
    --admin-nav-success: #22c55e;
    --admin-nav-warning: #f59e0b;
    --admin-nav-danger: #ef4444;
    --admin-nav-bg: #071226;
    --admin-nav-card: #0b1730;
    --admin-nav-surface: #101d3a;
    --admin-nav-border: rgba(255, 255, 255, .08);
    --admin-nav-hover: rgba(78, 168, 255, .12);
    --admin-nav-text: #ffffff;
    --admin-nav-secondary: #aab4d6;
    --admin-nav-muted: #7b86a8;
    --admin-nav-active: linear-gradient(135deg, #2563eb, #4ea8ff);
    --admin-nav-glow: 0 0 24px rgba(78, 168, 255, .25);
    background:
        radial-gradient(720px 460px at 16% -12%, rgba(78, 168, 255, .13), transparent 60%),
        radial-gradient(760px 520px at 100% 0%, rgba(37, 99, 235, .12), transparent 56%),
        #071226;
}

body.area-admin .sidebar {
    width: var(--admin-sidebar-expanded);
    padding: 18px 18px 16px;
    background: color-mix(in srgb, var(--admin-nav-card) 92%, transparent);
    border-right: 1px solid var(--admin-nav-border);
    box-shadow: 18px 0 42px -36px rgba(15, 23, 42, .55);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    transition: width .26s var(--ease-out), transform .26s var(--ease-out), background .2s var(--ease-out);
}

[data-theme="dark"] body.area-admin .sidebar {
    background:
        linear-gradient(180deg, rgba(11, 23, 48, .96), rgba(7, 18, 38, .98)),
        #071226;
    border-right-color: var(--admin-nav-border);
    box-shadow: 18px 0 48px -36px rgba(78, 168, 255, .45), inset -1px 0 0 rgba(255, 255, 255, .03);
}

body.area-admin .sidebar > div[style*="overflow-y"] {
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--admin-nav-accent) 42%, transparent) transparent;
}

body.area-admin .admin-sidebar-brand {
    min-height: 54px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

body.area-admin .admin-sidebar-logo {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #4ea8ff);
    box-shadow: 0 12px 24px -14px rgba(78, 168, 255, .7);
    font-size: 1.22rem;
}

body.area-admin .admin-sidebar-wordmark {
    color: var(--admin-nav-text);
    font-size: 1.12rem;
    font-weight: 850;
    letter-spacing: 0;
    white-space: nowrap;
}

body.area-admin .admin-sidebar-wordmark span { color: var(--admin-nav-accent-2); }

body.area-admin .admin-sidebar-badge,
body.area-admin .admin-role-chip {
    border: 1px solid color-mix(in srgb, var(--admin-nav-accent) 35%, transparent);
    background: color-mix(in srgb, var(--admin-nav-accent) 14%, transparent);
    color: var(--admin-nav-accent);
    border-radius: 999px;
    padding: 3px 8px;
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

body.area-admin .admin-profile-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin: 0 0 20px;
    padding: 12px;
    min-height: 76px;
    border-radius: 18px;
    border: 1px solid var(--admin-nav-border);
    color: var(--admin-nav-text);
    text-decoration: none;
    background: linear-gradient(135deg, color-mix(in srgb, var(--admin-nav-surface) 86%, transparent), color-mix(in srgb, var(--admin-nav-card) 92%, transparent));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: transform .22s var(--ease-out), border-color .22s var(--ease-out), box-shadow .22s var(--ease-out), background .22s var(--ease-out);
}

[data-theme="dark"] body.area-admin .admin-profile-card {
    background: linear-gradient(135deg, rgba(16, 29, 58, .86), rgba(11, 23, 48, .72));
}

body.area-admin .admin-profile-card:hover {
    transform: translateX(4px);
    border-color: color-mix(in srgb, var(--admin-nav-accent) 44%, var(--admin-nav-border));
    box-shadow: 0 14px 28px -22px rgba(37, 99, 235, .45);
}

body.area-admin .admin-profile-card:focus-visible,
body.area-admin .sidebar .nav-link:focus-visible,
body.area-admin .sidebar-rail-toggle:focus-visible {
    outline: 2px solid var(--admin-nav-accent);
    outline-offset: 3px;
}

body.area-admin .admin-profile-avatar {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #172554, #2563eb);
    box-shadow: 0 12px 24px -16px rgba(37, 99, 235, .8);
}

body.area-admin .admin-profile-status {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--admin-nav-success);
    border: 2px solid var(--admin-nav-card);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-nav-success) 18%, transparent);
}

body.area-admin .admin-profile-meta {
    min-width: 0;
    display: grid;
    gap: 2px;
}

body.area-admin .admin-profile-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
    color: var(--admin-nav-text);
}

body.area-admin .admin-profile-role {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--admin-nav-secondary);
    font-size: .78rem;
}

body.area-admin .admin-role-chip {
    width: fit-content;
    margin-top: 3px;
    padding: 2px 7px;
    font-size: .61rem;
}

body.area-admin .sidebar-section-label {
    margin: 19px 8px 8px;
    color: var(--admin-nav-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .13em;
}

[data-theme="dark"] body.area-admin .sidebar-section-label { color: rgba(255, 255, 255, .55); }

body.area-admin .sidebar .nav { gap: 6px; }

body.area-admin .sidebar .nav-link {
    position: relative;
    min-height: 48px;
    width: 100%;
    border: 0;
    border-radius: var(--admin-nav-radius);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    background: transparent;
    color: var(--admin-nav-secondary);
    font-weight: 650;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .22s var(--ease-out), background .22s var(--ease-out), color .22s var(--ease-out), box-shadow .22s var(--ease-out);
}

body.area-admin .sidebar .nav-link i {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 0;
    border-radius: 12px;
    display: inline-grid;
    place-items: center;
    background: transparent;
    color: currentColor;
    font-size: 20px;
    line-height: 1;
    transition: transform .22s var(--ease-out), color .22s var(--ease-out), background .22s var(--ease-out), box-shadow .22s var(--ease-out);
}

body.area-admin .sidebar .nav-link:hover {
    transform: translateX(4px);
    background: var(--admin-nav-hover);
    color: var(--admin-nav-text);
}

body.area-admin .sidebar .nav-link:hover i {
    color: var(--admin-nav-accent);
    background: color-mix(in srgb, var(--admin-nav-accent) 10%, transparent);
    box-shadow: none;
}

body.area-admin .sidebar .nav-link.active,
body.area-admin .sidebar .nav-link[aria-current="page"] {
    background: var(--admin-nav-active);
    color: #fff !important;
    box-shadow: var(--admin-nav-glow);
}

body.area-admin .sidebar .nav-link.active::before,
body.area-admin .sidebar .nav-link[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: #4ea8ff;
    box-shadow: 0 0 16px rgba(78, 168, 255, .58);
}

body.area-admin .sidebar .nav-link.active::after,
body.area-admin .sidebar .nav-link[aria-current="page"]::after { display: none; }

body.area-admin .sidebar .nav-link.active i,
body.area-admin .sidebar .nav-link[aria-current="page"] i {
    color: #fff;
    background: rgba(255, 255, 255, .15);
    transform: scale(1.02);
}

body.area-admin .admin-nav-badge-warning {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-left: auto;
    background: var(--admin-nav-warning);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--admin-nav-warning) 18%, transparent);
}

body.area-admin .admin-nav-count {
    min-width: 24px;
    height: 24px;
    margin-left: auto;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    padding: 0 7px;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    font-size: .74rem;
    font-weight: 850;
}

body.area-admin .admin-sidebar-logout-form { margin: 0; }
body.area-admin .admin-sidebar-logout {
    cursor: pointer;
    color: var(--admin-nav-danger) !important;
}
body.area-admin .admin-sidebar-logout:hover {
    background: color-mix(in srgb, var(--admin-nav-danger) 10%, transparent);
}

body.area-admin .admin-sidebar-bottom {
    flex: 0 0 auto;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--admin-nav-border);
}

body.area-admin .admin-collapse-bottom {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 13px;
    color: var(--admin-nav-secondary);
    background: var(--admin-nav-surface);
    border-color: var(--admin-nav-border);
    font-weight: 700;
}

body.area-admin .admin-collapse-bottom:hover {
    color: var(--admin-nav-accent);
    border-color: color-mix(in srgb, var(--admin-nav-accent) 36%, var(--admin-nav-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-nav-accent) 10%, transparent);
}

@media (min-width: 992px) {
    [data-sidebar="collapsed"] body.area-admin {
        --sidebar-w: var(--admin-sidebar-collapsed);
    }

    [data-sidebar="collapsed"] body.area-admin .sidebar {
        width: var(--admin-sidebar-collapsed);
        padding-left: 12px;
        padding-right: 12px;
    }

    [data-sidebar="collapsed"] body.area-admin .admin-sidebar-brand {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 0;
    }

    [data-sidebar="collapsed"] body.area-admin .admin-sidebar-wordmark,
    [data-sidebar="collapsed"] body.area-admin .admin-sidebar-badge,
    [data-sidebar="collapsed"] body.area-admin .admin-profile-meta,
    [data-sidebar="collapsed"] body.area-admin .sidebar .nav-label,
    [data-sidebar="collapsed"] body.area-admin .admin-collapse-bottom span,
    [data-sidebar="collapsed"] body.area-admin .sidebar-section-label {
        display: none;
    }

    [data-sidebar="collapsed"] body.area-admin .admin-profile-card {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 10px 0;
    }

    [data-sidebar="collapsed"] body.area-admin .sidebar .nav-link {
        justify-content: center;
        gap: 0;
        padding: 0;
    }

    [data-sidebar="collapsed"] body.area-admin .sidebar .nav-link.active::before,
    [data-sidebar="collapsed"] body.area-admin .sidebar .nav-link[aria-current="page"]::before {
        left: -12px;
    }

    [data-sidebar="collapsed"] body.area-admin .admin-nav-badge-warning {
        position: absolute;
        right: 8px;
        top: 8px;
        margin-left: 0;
    }

    [data-sidebar="collapsed"] body.area-admin .admin-nav-count {
        position: absolute;
        right: 4px;
        top: 4px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        font-size: .62rem;
    }

    [data-sidebar="collapsed"] body.area-admin .admin-collapse-bottom {
        justify-content: center;
        padding: 0;
    }
}

@media (max-width: 991.98px) {
    body.area-admin .sidebar {
        width: min(280px, calc(100vw - 32px));
        padding: 18px;
    }

    body.area-admin .admin-sidebar-bottom { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.area-admin .sidebar,
    body.area-admin .admin-profile-card,
    body.area-admin .sidebar .nav-link,
    body.area-admin .sidebar .nav-link i {
        transition: none !important;
    }
}

/* ═══ Dark Mode ═══ */
[data-theme="dark"] {
  --brand-primary: #8B5CF6;
  --brand-primary-rgb: 139, 92, 246;
  --brand-primary-dark: #A78BFA;
  --brand-primary-light: rgba(139, 92, 246, .12);

  --surface-bg: #080816;
  --surface-bg-2: #0E0E22;
  --surface-card: rgba(255, 255, 255, .025);
  --surface-card-solid: #111128;
  --surface-glass: rgba(255, 255, 255, .035);

  --text-main: #E2E8F0;
  --text-muted: #8494A7;
  --text-secondary: #94A3B8;

  --border-soft: rgba(255, 255, 255, .06);
  --border-glass: rgba(255, 255, 255, .07);

  --nav-link: #CBD5E1;
  --nav-hover-bg: rgba(139, 92, 246, .1);

  --input-bg: rgba(255, 255, 255, .04);

  --shadow-soft: 0 1px 3px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .3);
  --shadow-card: 0 4px 32px rgba(139, 92, 246, .08), 0 1px 4px rgba(0, 0, 0, .2);
  --shadow-glow: 0 0 40px rgba(139, 92, 246, .15);
  --shadow-elevated: 0 12px 48px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .3);

  --glass-blur: blur(24px) saturate(1.6);
  --glass-bg: rgba(12, 12, 30, .65);
  --glass-border: rgba(255, 255, 255, .06);

  --footer-bg: rgba(8, 8, 22, .75);
}

/* ═══════════════════════════════════════════
   §2  BASE & RESET
   ═══════════════════════════════════════════ */
html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
  scroll-behavior: smooth;
}
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  background: var(--surface-bg);
  color: var(--text-main);
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.01em;
}

[data-theme="dark"] body {
  background: var(--surface-bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(139, 92, 246, .08), transparent),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(6, 182, 212, .04), transparent);
}

main { flex: 1; }

a:not(.btn):not(.pub-nav-pill):not(.pub-login-btn):not(.pub-register-btn):not(.lang-option):not(.footer-link):not(.adm-qaction):not(.sd-hero-btn):not(.id-banner-btn):not(.id-kpi-link):not(.id-card-action):not(.id-row-btn):not(.id-quick-btn):not(.id-empty-cta):not(.sd-link):not(.adm-link-btn):not(.sd-course):not(.sd-course-action):not(.sp-link-btn):not(.nav-link):not(.dropdown-item):not(.sd-completed-name):not(.sd-empty-cta):not(.qd-add-btn):not(.qd-action-btn):not(.qd-edit-q-btn):not(.qd-add-answer-btn):not(.qd-back-btn):not(.lp-btn-primary):not(.lp-btn-ghost):not(.lp-final-btn):not(.lp-cert-cta):not(.lp-contact-btn):not(.btn-primary-premium):not(.btn-secondary-premium):not(.pg-btn):not(.es-cta):not(.comm-btn):not(.sw-btn):not(.sw-shortcut):not(.sw-course):not(.sw-link):not(.ip-btn):not(.ip-shortcut):not(.ip-text-link):not(.ip-metric):not(.ip-student-row):not(.ap-btn):not(.ap-shortcut):not(.ap-link):not(.spw-btn):not(.apf-btn):not(.qr-act-btn):not(.ah-retry-btn):not(.rs-btn):not(.ia-rq-btn):not(.pc-action) {
  /* NOTE: the landing-page CTAs (.lp-btn-ghost / .lp-btn-primary / .lp-final-btn
     / .lp-cert-cta / .lp-contact-btn) are EXCLUDED here. They are <a> elements, and without this
     exclusion this high-specificity !important rule forced their text
     to brand purple (#7C3AED) — the real cause of the "faded/disabled" CTA
     label. Their own white color now applies cleanly.

     Same reason for the quiz CTAs: .qr-act-btn (Result Details hero — "Bütün
     Nəticələr"/"Cəhd Tarixçəsi"/"Kursa qayıt"), .ah-retry-btn (Attempt History
     "Yenidən Cəhd Et", purple gradient → purple-on-purple looked disabled), and
     .rs-btn (Quiz Result hero). These set their own readable colors on warm/
     gradient hero backgrounds; the !important purple here would override them. */
  color: var(--brand-primary) !important;
  text-decoration: none;
  transition: color .15s var(--ease-out);
}
a:not(.btn):not(.pub-nav-pill):not(.pub-login-btn):not(.pub-register-btn):not(.lang-option):not(.footer-link):not(.adm-qaction):not(.sd-hero-btn):not(.id-banner-btn):not(.id-kpi-link):not(.id-card-action):not(.id-row-btn):not(.id-quick-btn):not(.id-empty-cta):not(.sd-link):not(.adm-link-btn):not(.sd-course):not(.sd-course-action):not(.sp-link-btn):not(.nav-link):not(.dropdown-item):not(.sd-completed-name):not(.sd-empty-cta):not(.qd-add-btn):not(.qd-action-btn):not(.qd-edit-q-btn):not(.qd-add-answer-btn):not(.qd-back-btn):not(.lp-btn-primary):not(.lp-btn-ghost):not(.lp-final-btn):not(.lp-cert-cta):not(.lp-contact-btn):not(.btn-primary-premium):not(.btn-secondary-premium):not(.pg-btn):not(.es-cta):not(.comm-btn):not(.sw-btn):not(.sw-shortcut):not(.sw-course):not(.sw-link):not(.ip-btn):not(.ip-shortcut):not(.ip-text-link):not(.ip-metric):not(.ip-student-row):not(.ap-btn):not(.ap-shortcut):not(.ap-link):not(.spw-btn):not(.apf-btn):not(.qr-act-btn):not(.ah-retry-btn):not(.rs-btn):not(.ia-rq-btn):not(.pc-action):hover {
  color: var(--brand-primary-dark) !important;
  text-decoration: underline;
}
.text-primary { color: var(--brand-primary) !important; }

/* ── Scrollbar ── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--brand-primary-rgb), .18) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--brand-primary-rgb), .18);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--brand-primary-rgb), .28);
  background-clip: padding-box;
}
[data-theme="dark"] * {
  scrollbar-color: rgba(139, 92, 246, .20) transparent;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, .20);
  border: 2px solid transparent;
  background-clip: padding-box;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, .30);
  background-clip: padding-box;
}

::selection {
  background: rgba(var(--brand-primary-rgb), .2);
  color: var(--text-main);
}

/* ═══════════════════════════════════════════
   §3  TOP NAVBAR
   ═══════════════════════════════════════════ */
.top-nav {
  height: var(--topnav-h);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: background .3s var(--ease-out);
}

[data-theme="dark"] .top-nav {
  background: rgba(8, 8, 22, .65);
  border-bottom-color: rgba(255, 255, 255, .04);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .02);
}

.navbar-brand {
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -.3px;
  color: var(--brand-primary) !important;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.navbar .nav-link {
  color: var(--nav-link) !important;
  border-radius: var(--radius-md);
  padding: .45rem .85rem;
  font-size: .88rem;
  font-weight: 500;
  transition: all .15s var(--ease-out);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--brand-primary) !important;
  background-color: var(--nav-hover-bg);
}

/* ─── Public Navbar Pills ─── */
.pub-nav-pill {
  display: inline-flex;
  align-items: center;
  padding: .38rem .9rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--nav-link) !important;
  text-decoration: none !important;
  transition: all .15s var(--ease-out);
  background: transparent;
  border: 1px solid transparent;
}
.pub-nav-pill:hover {
  background: var(--nav-hover-bg);
  color: var(--brand-primary) !important;
  text-decoration: none !important;
  border-color: rgba(var(--brand-primary-rgb), .1);
}

/* ─── Auth Buttons ─── */
.pub-login-btn {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--nav-link) !important;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: .82rem;
  padding: .38rem .85rem;
  text-decoration: none !important;
  transition: all .15s var(--ease-out);
}
.pub-login-btn:hover {
  background: var(--nav-hover-bg);
  border-color: rgba(var(--brand-primary-rgb), .25);
  color: var(--brand-primary) !important;
  text-decoration: none !important;
}

.pub-register-btn {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, var(--brand-primary), #9333EA);
  border: 1px solid transparent;
  color: #ffffff !important;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: .82rem;
  padding: .38rem .95rem;
  text-decoration: none !important;
  transition: all .2s var(--ease-out);
  box-shadow: 0 2px 12px rgba(var(--brand-primary-rgb), .25);
}
.pub-register-btn:hover {
  background: linear-gradient(135deg, #6D28D9, #7C3AED);
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(var(--brand-primary-rgb), .35);
}

.pub-logout-btn {
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: .78rem;
}

.pub-username {
  font-weight: 500;
  color: var(--text-muted) !important;
}

/* ═══════════════════════════════════════════
   §4  LANGUAGE SWITCHER
   ═══════════════════════════════════════════ */
.lang-switcher-btn {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: var(--surface-glass);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: .3rem .7rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-main);
  transition: all .15s var(--ease-out);
  white-space: nowrap;
  backdrop-filter: blur(8px);
}
.lang-switcher-btn::after { display: none; }
.lang-switcher-btn:hover {
  background: var(--brand-primary-light);
  border-color: rgba(var(--brand-primary-rgb), .2);
  color: var(--brand-primary);
  box-shadow: 0 0 16px rgba(var(--brand-primary-rgb), .08);
}
.lang-flag  { font-size: 1rem; line-height: 1; }
.lang-code  { font-size: .72rem; font-weight: 700; letter-spacing: .03em; }

.lang-dropdown {
  min-width: 175px;
  border-radius: var(--radius-xl) !important;
  overflow: hidden;
  padding: .3rem !important;
  background: var(--surface-card-solid) !important;
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-elevated) !important;
  border: 1px solid var(--border-soft) !important;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .55rem .8rem;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  font-size: .84rem;
  color: var(--text-main);
  transition: all .12s var(--ease-out);
  text-align: left;
  text-decoration: none !important;
}
.lang-option:hover {
  background: var(--brand-primary-light);
  color: var(--brand-primary);
}
.lang-option-active {
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  font-weight: 700;
}
.lang-opt-flag { font-size: 1.1rem; flex-shrink: 0; }
.lang-opt-name { flex: 1; }

[data-theme="dark"] .lang-switcher-btn {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .06);
  color: #E2E8F0;
}
[data-theme="dark"] .lang-dropdown {
  box-shadow: 0 12px 48px rgba(0, 0, 0, .55) !important;
}
[data-theme="dark"] .lang-option { color: #E2E8F0; }
[data-theme="dark"] .lang-option:hover { color: #A78BFA; background: rgba(139, 92, 246, .1); }
[data-theme="dark"] .lang-option-active { color: #A78BFA; background: rgba(139, 92, 246, .12); }

/* ═══════════════════════════════════════════
   §5  APP SHELL (PUBLIC PAGES)
   ═══════════════════════════════════════════ */
.app-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
  flex: 1 0 auto;
}

/* ═══════════════════════════════════════════
   §6  SIDEBAR LAYOUT
   ═══════════════════════════════════════════ */
.app-with-sidebar {
  display: flex;
  min-height: calc(100vh - var(--topnav-h));
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--border-soft);
  position: sticky;
  top: var(--topnav-h);
  height: calc(100vh - var(--topnav-h));
  overflow-y: auto;
  overflow-x: hidden;
  padding: .75rem .625rem 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--brand-primary-rgb), .1) transparent;
  transition: transform .25s var(--ease-out), width .25s var(--ease-out), padding .25s var(--ease-out), background .3s var(--ease-out);
  display: flex;
  flex-direction: column;
}

[data-theme="dark"] .sidebar {
  background: rgba(10, 10, 26, .5);
  border-right-color: rgba(255, 255, 255, .04);
  box-shadow: 1px 0 0 rgba(255, 255, 255, .02);
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(var(--brand-primary-rgb), .1); border-radius: 4px; }

.sidebar-content {
  flex: 1;
  min-width: 0;
  padding: 1.75rem 2rem;
  overflow: auto;
}

/* ─── Sidebar Nav Links ─── */
.sidebar .nav-link {
  border-radius: var(--radius-md);
  padding: .6rem .9rem;
  margin-bottom: 3px;
  color: var(--nav-link);
  font-size: .86rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .65rem;
  transition: background-color .15s var(--ease-out), color .15s var(--ease-out), transform .15s var(--ease-out);
  position: relative;
}

.sidebar .nav-link i {
  width: 18px;
  text-align: center;
  font-size: .95rem;
  flex-shrink: 0;
  opacity: .7;
  transition: all .15s var(--ease-out);
}

.sidebar .nav-link:hover {
  background-color: var(--nav-hover-bg);
  color: var(--brand-primary) !important;
  text-decoration: none;
  transform: translateX(2px);
}
.sidebar .nav-link:hover i {
  opacity: 1;
  color: var(--brand-primary);
}

/* Active state — calm premium fill + crisp accent bar (no blur glow). */
.sidebar .nav-link.active {
  background: rgba(var(--brand-primary-rgb), .10);
  color: var(--brand-primary) !important;
  font-weight: 600;
  text-decoration: none;
}
.sidebar .nav-link.active i { opacity: 1; }

[data-theme="dark"] .sidebar .nav-link.active {
  background: rgba(var(--brand-primary-rgb), .15);
}

/* Active indicator bar — full-height, solid brand (matches Admin nav restraint). */
.sidebar .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--brand-primary);
  pointer-events: none;
}

/* ─── Sidebar Section Labels ─── */
.sidebar-section-label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
  padding: .85rem .875rem .35rem;
  margin-top: .35rem;
}

/* ─── Sidebar User Profile (Bottom) ─── */
.sidebar-user {
  margin-top: auto;
  padding: .75rem;
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: .65rem;
}
/* The block is a real link to the role's profile page. */
a.sidebar-user {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.sidebar-user:hover .sidebar-user-name,
a.sidebar-user:focus-visible .sidebar-user-name {
  color: var(--brand-primary);
}
a.sidebar-user:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}
.sidebar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand-primary), #9333EA);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(var(--brand-primary-rgb), .2);
  overflow: hidden;
}
/* Uploaded/preset avatar fills the tile; initials span keeps the gradient. */
.sidebar-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.sidebar-user-role {
  font-size: .66rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ─── Mobile Sidebar Overlay ─── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(4px);
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease-out);
}

@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    top: var(--topnav-h);
    left: 0;
    height: calc(100vh - var(--topnav-h));
    z-index: 1045;
    transform: translateX(-100%);
    box-shadow: 8px 0 32px rgba(0, 0, 0, .15);
  }
  .sidebar.sidebar-open { transform: translateX(0); }
  .sidebar-overlay { display: block; }
  .sidebar-overlay.sidebar-open { opacity: 1; pointer-events: auto; }
  .sidebar-content { padding: 1.25rem 1rem; }
}
@media (min-width: 992px) {
  .btn-sidebar-toggle { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   COLLAPSIBLE DESKTOP SIDEBAR
   State is driven by data-sidebar="collapsed" on <html> (set by an
   inline head script for no-flash, kept in sync by sidebar.js).
   Only applies ≥992px; below that the sidebar is an off-canvas drawer.
   ════════════════════════════════════════════════════════════════ */
.btn-sidebar-collapse .bi { transition: transform .25s var(--ease-out); }
[data-sidebar="collapsed"] .btn-sidebar-collapse .bi { transform: rotate(180deg); }

@media (min-width: 992px) {
  [data-sidebar="collapsed"] .sidebar {
    width: 72px;
    padding-left: .5rem;
    padding-right: .5rem;
  }
  /* Icon-only nav: hide the label text node + inline badges via font-size:0,
     then restore the icon glyph size. */
  [data-sidebar="collapsed"] .sidebar .nav-link {
    justify-content: center;
    gap: 0;
    font-size: 0;
    padding-left: 0;
    padding-right: 0;
  }
  [data-sidebar="collapsed"] .sidebar .nav-link i {
    font-size: 1.05rem;
    width: auto;
    opacity: .9;
  }
  [data-sidebar="collapsed"] .sidebar .nav-link .badge { display: none; }
  /* Section labels collapse to a subtle divider dot */
  [data-sidebar="collapsed"] .sidebar-section-label {
    font-size: 0;
    text-align: center;
    padding: .6rem 0 .25rem;
  }
  [data-sidebar="collapsed"] .sidebar-section-label::after {
    content: "•";
    font-size: .7rem;
    color: var(--text-muted);
    opacity: .45;
  }
  /* User card → avatar only */
  [data-sidebar="collapsed"] .sidebar-user { justify-content: center; padding: .75rem .25rem; }
  [data-sidebar="collapsed"] .sidebar-user-info { display: none; }
}

/* ═══════════════════════════════════════════
   §7  GLASS SURFACE CARDS
   ═══════════════════════════════════════════ */
.surface-card {
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

a .surface-card:hover,
.surface-card.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}

[data-theme="dark"] a .surface-card:hover,
[data-theme="dark"] .surface-card.hover-lift:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, .5), 0 0 24px rgba(var(--brand-primary-rgb), .06);
}

/* Bootstrap card overrides */
.card {
  background-color: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--text-main);
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
}

.list-group-item,
.modal-content,
.accordion-item {
  background-color: var(--surface-card);
  color: var(--text-main);
  border-color: var(--border-soft);
}

/* Bootstrap dropdown dark mode */
.dropdown-menu {
  background-color: var(--surface-card-solid);
  backdrop-filter: var(--glass-blur);
  color: var(--text-main);
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
  padding: .3rem;
}
.dropdown-item {
  color: var(--text-main);
  border-radius: var(--radius-sm);
  transition: all .12s var(--ease-out);
  font-size: .88rem;
  padding: .45rem .75rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--brand-primary-light);
  color: var(--brand-primary);
}
.dropdown-item.active,
.dropdown-item:active {
  background: var(--brand-primary);
  color: #fff;
}

/* ═══════════════════════════════════════════
   §8  KPI STAT CARDS
   ═══════════════════════════════════════════ */
.kpi-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: all .2s var(--ease-out);
}
.kpi-card:hover {
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.kpi-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.kpi-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
}

.kpi-label {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: .2rem;
}

/* ═══════════════════════════════════════════
   §9  EMPTY STATES
   ═══════════════════════════════════════════ */
.empty-state {
  padding: 3.5rem 1.5rem;
  text-align: center;
}
.empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: rgba(var(--brand-primary-rgb), .08);
  color: var(--brand-primary);
  font-size: 1.6rem;
  line-height: 1;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(var(--brand-primary-rgb), .08);
}
[data-theme="dark"] .empty-state-icon {
  background: rgba(var(--brand-primary-rgb), .12);
}
.empty-state h5 {
  font-weight: 700;
  margin-bottom: .4rem;
  color: var(--text-main);
  font-size: 1rem;
}
.empty-state p {
  color: var(--text-muted);
  max-width: 360px;
  margin: 0 auto 1.25rem;
  font-size: .85rem;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════
   §10  PAGE HEADER
   ═══════════════════════════════════════════ */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
  gap: .75rem;
}
.page-header-title h2 {
  font-weight: 800;
  margin-bottom: .2rem;
  font-size: 1.5rem;
  letter-spacing: -.3px;
}
.page-header-title p {
  color: var(--text-muted);
  margin: 0;
  font-size: .88rem;
}

/* ═══════════════════════════════════════════
   §11  TABLES — Premium SaaS Style
   ═══════════════════════════════════════════ */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-main);
  --bs-table-border-color: var(--border-soft);
  --bs-table-striped-bg: rgba(var(--brand-primary-rgb), .02);
  --bs-table-striped-color: var(--text-main);
  --bs-table-hover-bg: rgba(var(--brand-primary-rgb), .04);
  border-collapse: separate;
  border-spacing: 0;
}
[data-theme="dark"] .table {
  --bs-table-striped-bg: rgba(255, 255, 255, .015);
  --bs-table-hover-bg: rgba(var(--brand-primary-rgb), .06);
}

.table thead th {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
  padding: .75rem 1rem;
  white-space: nowrap;
  background: rgba(var(--brand-primary-rgb), .02);
}
[data-theme="dark"] .table thead th {
  background: rgba(255, 255, 255, .02);
}

.table tbody td {
  padding: .7rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(var(--brand-primary-rgb), .04);
}
[data-theme="dark"] .table tbody td {
  border-bottom-color: rgba(255, 255, 255, .03);
}

.table tbody tr {
  transition: all .15s var(--ease-out);
}
.table tbody tr:hover {
  background: rgba(var(--brand-primary-rgb), .04) !important;
}
[data-theme="dark"] .table tbody tr:hover {
  background: rgba(var(--brand-primary-rgb), .06) !important;
}

/* ═══════════════════════════════════════════
   §12  ALERTS
   ═══════════════════════════════════════════ */
.alert {
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  padding: .875rem 1.125rem;
  backdrop-filter: blur(8px);
}
.alert-success { background: rgba(34, 197, 94, .08); color: #15803d; border-color: rgba(34, 197, 94, .15); }
.alert-danger  { background: rgba(239, 68, 68, .08); color: #b91c1c; border-color: rgba(239, 68, 68, .15); }
.alert-warning { background: rgba(245, 158, 11, .08); color: #92400e; border-color: rgba(245, 158, 11, .15); }
.alert-info    { background: rgba(59, 130, 246, .08); color: #1d4ed8; border-color: rgba(59, 130, 246, .15); }

[data-theme="dark"] .alert-success { background: rgba(34, 197, 94, .1); color: #4ade80; border-color: rgba(34, 197, 94, .15); }
[data-theme="dark"] .alert-danger  { background: rgba(239, 68, 68, .1); color: #f87171; border-color: rgba(239, 68, 68, .15); }
[data-theme="dark"] .alert-warning { background: rgba(245, 158, 11, .1); color: #fbbf24; border-color: rgba(245, 158, 11, .15); }
[data-theme="dark"] .alert-info    { background: rgba(59, 130, 246, .1); color: #60a5fa; border-color: rgba(59, 130, 246, .15); }

/* ═══════════════════════════════════════════
   §13  BUTTONS
   ═══════════════════════════════════════════ */
.btn {
  transition: all .15s var(--ease-out);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: -.01em;
}
.btn:active { transform: scale(.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-primary), #9333EA);
  border: 1px solid transparent;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), .2);
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #6D28D9, #7C3AED);
  border-color: transparent;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(var(--brand-primary-rgb), .3);
  transform: translateY(-1px);
}

.btn-outline-primary {
  border-color: rgba(var(--brand-primary-rgb), .3);
  color: var(--brand-primary);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--brand-primary-light);
  border-color: rgba(var(--brand-primary-rgb), .5);
  color: var(--brand-primary);
}

.btn:focus, .btn:active:focus,
.form-control:focus, .form-select:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .15);
  border-color: rgba(var(--brand-primary-rgb), .4);
}

/* Keyboard-only focus ring (visible ring, no ring on mouse click) */
.btn:focus:not(:focus-visible),
.form-control:focus:not(:focus-visible),
.form-select:focus:not(:focus-visible) {
  box-shadow: none;
}

.btn-primary-premium,
.btn-secondary-premium,
.auth-card .btn-primary.btn-lg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  border-radius: 14px;
  padding: .85rem 1.25rem;
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid transparent;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out), background .2s var(--ease-out);
}

.btn-primary-premium,
.auth-card .btn-primary.btn-lg {
  background: linear-gradient(135deg, #2563EB 0%, #7C3AED 56%, #A855F7 100%);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 16px 38px rgba(124,58,237,.36), inset 0 1px 0 rgba(255,255,255,.28);
}

.btn-secondary-premium {
  background: rgba(255,255,255,.085);
  border-color: rgba(255,255,255,.34);
  box-shadow: 0 14px 34px rgba(15,23,42,.24), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(16px);
}

.btn-primary-premium::before,
.btn-secondary-premium::before,
.auth-card .btn-primary.btn-lg::before {
  content: "";
  position: absolute;
  inset: -35% auto -35% -55%;
  z-index: -1;
  width: 46%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  opacity: 0;
  transition: transform .55s ease, opacity .2s ease;
}

.btn-primary-premium:hover,
.btn-secondary-premium:hover,
.auth-card .btn-primary.btn-lg:hover {
  color: #ffffff !important;
  transform: translateY(-2px);
}

.btn-primary-premium:hover,
.auth-card .btn-primary.btn-lg:hover {
  box-shadow: 0 20px 48px rgba(124,58,237,.48), 0 0 24px rgba(56,189,248,.18), inset 0 1px 0 rgba(255,255,255,.32);
}

.btn-secondary-premium:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.54);
  box-shadow: 0 18px 44px rgba(15,23,42,.32), 0 0 28px rgba(168,85,247,.20), inset 0 1px 0 rgba(255,255,255,.18);
}

.btn-primary-premium:hover::before,
.btn-secondary-premium:hover::before,
.auth-card .btn-primary.btn-lg:hover::before {
  opacity: 1;
  transform: translateX(360%) skewX(-18deg);
}

.btn-primary-premium:focus-visible,
.btn-secondary-premium:focus-visible,
.auth-card .btn-primary.btn-lg:focus-visible {
  color: #ffffff !important;
  outline: 3px solid rgba(125,211,252,.86);
  outline-offset: 3px;
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.28), 0 18px 44px rgba(124,58,237,.42) !important;
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .25);
  outline: none;
}

/* ═══════════════════════════════════════════
   §14  FORMS
   ═══════════════════════════════════════════ */
.form-control,
.form-select {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  min-height: 2.7rem;
  background-color: var(--input-bg);
  backdrop-filter: blur(8px);
  color: var(--text-main);
  transition: all .15s var(--ease-out);
}
.form-control:focus,
.form-select:focus {
  background-color: var(--input-bg);
  border-color: rgba(var(--brand-primary-rgb), .4);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .1), 0 0 16px rgba(var(--brand-primary-rgb), .05);
}
.form-control::placeholder { color: var(--text-muted); }
.form-label {
  font-weight: 600;
  font-size: .86rem;
  color: var(--text-main);
  margin-bottom: .35rem;
}
/* ═══ ROOT-CAUSE FIX (auth inputs invisible in dark mode) ═════════════
 * The previous rule set a dark input BACKGROUND but never set `color`, so
 * typed text inherited the base .form-control colour (dark) → dark-on-dark,
 * almost invisible. Only input[type=password] had a colour fix (§30.4), which
 * is why password fields looked fine but Full name / Username / Email / Role
 * did not. Set an explicit light text colour + caret for ALL inputs/selects,
 * and harden every state (placeholder, focus, hover, validation, disabled,
 * autofill, select options).
 * ════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  border-color: rgba(255, 255, 255, .16);
  background-color: rgba(255, 255, 255, .06);
  color: #F8FAFC !important;
  caret-color: #FFFFFF;
}
[data-theme="dark"] .form-control::placeholder {
  color: rgba(226, 232, 240, .55) !important;
  -webkit-text-fill-color: rgba(226, 232, 240, .55);
  opacity: 1;
}
[data-theme="dark"] .form-control:hover,
[data-theme="dark"] .form-select:hover {
  border-color: rgba(255, 255, 255, .24);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: rgba(255, 255, 255, .08);
  border-color: rgba(168, 85, 247, .70);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .18), 0 0 16px rgba(168, 85, 247, .10);
  color: #FFFFFF !important;
}
/* Validation states must keep light typed text (Bootstrap only recolours the
   border/icon, leaving the dark inherited text → invisible without this). */
[data-theme="dark"] .form-control.is-invalid,
[data-theme="dark"] .form-control.input-validation-error,
[data-theme="dark"] .form-control.is-valid,
[data-theme="dark"] .form-select.is-invalid,
[data-theme="dark"] .form-select.input-validation-error {
  color: #F8FAFC !important;
  -webkit-text-fill-color: #F8FAFC !important;
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] .form-control[readonly] {
  color: rgba(226, 232, 240, .45) !important;
  -webkit-text-fill-color: rgba(226, 232, 240, .45) !important;
  background-color: rgba(255, 255, 255, .03);
}
/* §33  Role <select> — readable control + native option list */
[data-theme="dark"] .form-select {
  color: #F8FAFC !important;
}
[data-theme="dark"] .form-select option {
  background-color: #14142A;
  color: #F8FAFC;
}
[data-theme="dark"] .form-select option[value=""],
[data-theme="dark"] .form-select option:disabled {
  color: rgba(226, 232, 240, .55);
}
/* §34  Browser autofill — force the premium dark surface + light text instead
 * of Chrome's white/yellow box-with-black-text. The 1000px inset shadow trick
 * paints over the UA autofill background; text-fill keeps glyphs light. */
[data-theme="dark"] .form-control:-webkit-autofill,
[data-theme="dark"] .form-control:-webkit-autofill:hover,
[data-theme="dark"] .form-control:-webkit-autofill:focus,
[data-theme="dark"] .form-control:-webkit-autofill:active,
[data-theme="dark"] .form-select:-webkit-autofill {
  -webkit-text-fill-color: #F8FAFC !important;
  caret-color: #FFFFFF;
  -webkit-box-shadow: 0 0 0 1000px #181830 inset !important;
  box-shadow: 0 0 0 1000px #181830 inset !important;
  border-color: rgba(255, 255, 255, .16) !important;
  transition: background-color 9999s ease-out 0s;
}
.form-check-label {
  color: var(--text-muted);
  font-size: .88rem;
}

/* Password visibility toggle */
.pwd-toggle-btn {
  border-color: var(--border-soft);
  background: transparent;
  color: var(--text-muted);
  transition: all .15s var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .75rem;
}
.pwd-toggle-btn:hover {
  color: var(--brand-primary);
  background: var(--brand-primary-light);
  border-color: rgba(var(--brand-primary-rgb), .2);
}
.pwd-toggle-btn:focus {
  box-shadow: none;
  border-color: rgba(var(--brand-primary-rgb), .4);
  color: var(--brand-primary);
}
[data-theme="dark"] .pwd-toggle-btn {
  border-color: rgba(255, 255, 255, .06);
  color: var(--text-muted);
}
[data-theme="dark"] .pwd-toggle-btn:hover {
  background: rgba(var(--brand-primary-rgb), .1);
  border-color: rgba(var(--brand-primary-rgb), .3);
  color: var(--brand-primary);
}

/* ═══════════════════════════════════════════
   §15  PROGRESS BAR
   ═══════════════════════════════════════════ */
.progress {
  background-color: rgba(var(--brand-primary-rgb), .08);
  border-radius: 999px;
  overflow: hidden;
  height: 6px;
}
.progress-bar {
  background: linear-gradient(90deg, var(--brand-primary), #9333EA);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(var(--brand-primary-rgb), .3);
}

/* ═══════════════════════════════════════════
   §16  THEME TOGGLE
   ═══════════════════════════════════════════ */
.theme-toggle {
  border-radius: var(--radius-md);
  border-color: var(--border-soft);
  color: var(--text-main);
  background-color: transparent;
  min-width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s var(--ease-out);
}
.theme-toggle:hover,
.theme-toggle:focus {
  color: var(--brand-primary);
  background-color: var(--brand-primary-light);
  border-color: rgba(var(--brand-primary-rgb), .2);
  box-shadow: 0 0 12px rgba(var(--brand-primary-rgb), .1);
}

/* ═══════════════════════════════════════════
   §18  HERO (PUBLIC HOME)
   ═══════════════════════════════════════════ */
.hero {
  padding: 4.5rem 1.5rem 4rem;
  text-align: center;
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -1.5px;
  margin-bottom: .85rem;
  background: linear-gradient(135deg, var(--brand-primary) 0%, #9333EA 40%, #EC4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="dark"] .hero h1 {
  background: linear-gradient(135deg, #8B5CF6 0%, #C084FC 40%, #F0ABFC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p {
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
  line-height: 1.75;
}

/* ═══════════════════════════════════════════
   §19  COURSE CARDS
   ═══════════════════════════════════════════ */
.course-card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: all .25s var(--ease-out);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.course-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-elevated);
}
[data-theme="dark"] .course-card:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, .5), 0 0 20px rgba(var(--brand-primary-rgb), .08);
}

.course-card-img {
  height: 180px;
  object-fit: cover;
  width: 100%;
}
.course-card-img-placeholder {
  height: 180px;
  background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), .08), rgba(var(--brand-primary-rgb), .15));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  opacity: .5;
}
.course-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.course-card-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: .4rem;
  line-height: 1.4;
  color: var(--text-main);
}
.course-card-desc {
  font-size: .85rem;
  color: var(--text-muted);
  flex: 1;
  margin-bottom: 1rem;
  line-height: 1.55;
}

/* ═══════════════════════════════════════════
   §20  FOOTER
   ═══════════════════════════════════════════ */
.footer {
  border-top: 1px solid var(--border-soft);
  color: var(--text-muted);
  padding: .85rem 0;
  margin-top: auto;
  flex-shrink: 0;
  background-color: var(--footer-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: .82rem;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-brand {
  font-weight: 700;
  font-size: .82rem;
  color: var(--brand-primary);
}
.footer-copy { color: var(--text-muted); }
.footer-link {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted) !important;
  text-decoration: none !important;
  font-weight: 500;
  transition: color .15s var(--ease-out);
}
.footer-link:hover { color: var(--brand-primary) !important; }

/* ═══════════════════════════════════════════
   §21  TEXT & BADGE HELPERS
   ═══════════════════════════════════════════ */
.text-muted, .form-text, small { color: var(--text-muted) !important; }

.badge {
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 8px;
  padding: .3em .65em;
  font-size: .72rem;
}

/* ═══════════════════════════════════════════
   §22  ANIMATIONS & MICRO-INTERACTIONS
   ═══════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.fade-in-up { animation: fadeInUp .45s var(--ease-out) both; }
.fade-in { animation: fadeIn .3s var(--ease-out) both; }
.scale-in { animation: scaleIn .3s var(--ease-out) both; }

.stagger-children > * { animation: fadeInUp .4s var(--ease-out) both; }
.stagger-children > *:nth-child(1) { animation-delay: 0s; }
.stagger-children > *:nth-child(2) { animation-delay: .05s; }
.stagger-children > *:nth-child(3) { animation-delay: .1s; }
.stagger-children > *:nth-child(4) { animation-delay: .15s; }
.stagger-children > *:nth-child(5) { animation-delay: .2s; }
.stagger-children > *:nth-child(6) { animation-delay: .25s; }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, rgba(var(--brand-primary-rgb), .06) 25%, rgba(var(--brand-primary-rgb), .1) 50%, rgba(var(--brand-primary-rgb), .06) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.03) 75%);
  background-size: 200% 100%;
}

/* Skeleton text shorthand */
.skeleton-text { height: 14px; border-radius: 6px; }
.skeleton-text--sm { height: 10px; }
.skeleton-text--lg { height: 20px; }
.skeleton-circle { border-radius: 50%; }

/* Content-loaded fade transition for async sections */
.async-content {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.async-content.loaded {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children 7-10 */
.stagger-children > *:nth-child(7) { animation-delay: .3s; }
.stagger-children > *:nth-child(8) { animation-delay: .35s; }
.stagger-children > *:nth-child(9) { animation-delay: .4s; }
.stagger-children > *:nth-child(10) { animation-delay: .45s; }

/* ═══════════════════════════════════════════
   §23  ADMIN DASHBOARD COMPONENTS
   ═══════════════════════════════════════════ */
.adm-stat {
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: 1.1rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
  box-shadow: var(--shadow-soft);
}
.adm-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-elevated);
}

.adm-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: transform .2s var(--ease-out);
}
.adm-stat:hover .adm-stat-icon {
  transform: scale(1.08);
}

.adm-stat-text { min-width: 0; }

.adm-stat-value {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.5px;
  color: var(--text-main);
}

.adm-stat-label {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: .15rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adm-card {
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.adm-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
  gap: .5rem;
}
.adm-card-title {
  font-size: .9rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-main);
  display: flex;
  align-items: center;
}
.adm-card-body { padding: 1.25rem; }

/* Admin Table */
.adm-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-main);
  --bs-table-border-color: var(--border-soft);
}
.adm-table thead th {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  border-bottom-width: 1px;
  padding: .7rem 1rem;
  white-space: nowrap;
  background: rgba(var(--brand-primary-rgb), .02);
}
[data-theme="dark"] .adm-table thead th {
  background: rgba(255, 255, 255, .02);
}
.adm-table thead th a {
  color: var(--text-muted) !important;
  text-decoration: none !important;
}
.adm-table thead th a:hover { color: var(--brand-primary) !important; }
.adm-table thead th .bi-sort-up,
.adm-table thead th .bi-sort-down { color: var(--brand-primary) !important; }

.adm-table tbody td {
  padding: .7rem 1rem;
  font-size: .84rem;
  vertical-align: middle;
}
.adm-table tbody tr {
  transition: all .15s var(--ease-out);
  border-left: 3px solid transparent;
}
.adm-table tbody tr:hover {
  background: rgba(var(--brand-primary-rgb), .04);
  border-left-color: var(--brand-primary);
}
[data-theme="dark"] .adm-table tbody tr:hover {
  background: rgba(var(--brand-primary-rgb), .06);
}

.adm-table tbody tr:nth-child(even) {
  background: rgba(var(--brand-primary-rgb), .015);
}
.adm-table tbody tr:nth-child(even):hover {
  background: rgba(var(--brand-primary-rgb), .04);
}
[data-theme="dark"] .adm-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, .015);
}
[data-theme="dark"] .adm-table tbody tr:nth-child(even):hover {
  background: rgba(var(--brand-primary-rgb), .06);
}

/* Row stagger animation */
.adm-table.adm-stagger tbody tr { animation: fadeInUp .3s var(--ease-out) both; }
.adm-table.adm-stagger tbody tr:nth-child(1)  { animation-delay: 0s; }
.adm-table.adm-stagger tbody tr:nth-child(2)  { animation-delay: .03s; }
.adm-table.adm-stagger tbody tr:nth-child(3)  { animation-delay: .06s; }
.adm-table.adm-stagger tbody tr:nth-child(4)  { animation-delay: .09s; }
.adm-table.adm-stagger tbody tr:nth-child(5)  { animation-delay: .12s; }
.adm-table.adm-stagger tbody tr:nth-child(6)  { animation-delay: .15s; }
.adm-table.adm-stagger tbody tr:nth-child(7)  { animation-delay: .18s; }
.adm-table.adm-stagger tbody tr:nth-child(8)  { animation-delay: .21s; }
.adm-table.adm-stagger tbody tr:nth-child(9)  { animation-delay: .24s; }
.adm-table.adm-stagger tbody tr:nth-child(10) { animation-delay: .27s; }

/* Admin Empty State */
.adm-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
}
.adm-empty-state .adm-empty-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: .75rem;
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  box-shadow: 0 0 20px rgba(var(--brand-primary-rgb), .08);
}
.adm-empty-state h6 { font-weight: 700; color: var(--text-main); margin-bottom: .25rem; }
.adm-empty-state p { color: var(--text-muted); font-size: .84rem; margin: 0; }

/* Health dots */
.adm-health-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: .35rem;
}
.adm-dot-green {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, .5);
  animation: pulse-soft 2s infinite;
}
.adm-dot-red {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, .5);
  animation: pulse-soft 1.5s infinite;
}
.adm-status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Avatar gradients */
.adm-avatar[data-hue="0"] { background: linear-gradient(135deg, #6366f1, #7c3aed); }
.adm-avatar[data-hue="1"] { background: linear-gradient(135deg, #ec4899, #a855f7); }
.adm-avatar[data-hue="2"] { background: linear-gradient(135deg, #14b8a6, #06b6d4); }
.adm-avatar[data-hue="3"] { background: linear-gradient(135deg, #f97316, #ef4444); }
.adm-avatar[data-hue="4"] { background: linear-gradient(135deg, #22c55e, #10b981); }
.adm-avatar[data-hue="5"] { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.adm-avatar[data-hue="6"] { background: linear-gradient(135deg, #f59e0b, #f97316); }
.adm-avatar[data-hue="7"] { background: linear-gradient(135deg, #8b5cf6, #ec4899); }

/* Trend buttons */
.trend-btn {
  border-color: var(--border-soft) !important;
  color: var(--text-muted) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  padding: .2rem .55rem !important;
  transition: all .15s var(--ease-out) !important;
  border-radius: var(--radius-sm) !important;
}
.trend-btn:hover,
.trend-btn.active {
  background: linear-gradient(135deg, var(--brand-primary), #9333EA) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), .25) !important;
}

/* ═══════════════════════════════════════════
   §24  ADMIN ACTION BUTTONS & AVATAR
   ═══════════════════════════════════════════ */
.btn-adm-action {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: .78rem;
  transition: all .15s var(--ease-out);
}
.btn-adm-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.adm-avatar {
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand-primary), #9333EA);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(var(--brand-primary-rgb), .15);
}

/* Admin pagination */
.adm-pagination .page-link {
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 600;
  min-width: 32px;
  text-align: center;
  margin: 0 2px;
  border-color: var(--border-soft);
  color: var(--text-main);
  background: var(--surface-card);
  transition: all .15s var(--ease-out);
}
.adm-pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--brand-primary), #9333EA);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), .2);
}
.adm-pagination .page-link:hover {
  background: var(--nav-hover-bg);
  color: var(--brand-primary);
  border-color: rgba(var(--brand-primary-rgb), .2);
}

/* Admin search */
.adm-search-input {
  transition: border-color .2s, box-shadow .2s;
}
.adm-search-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .1), 0 0 16px rgba(var(--brand-primary-rgb), .05);
}
.adm-search-input.adm-searching {
  border-color: var(--brand-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%237c3aed' viewBox='0 0 16 16'%3E%3Cpath d='M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  background-size: 14px;
  padding-right: 2rem;
}

/* Row count badge */
.adm-row-count {
  font-size: .72rem;
  font-weight: 700;
  padding: .2em .55em;
  border-radius: 8px;
  transition: transform .2s var(--ease-out);
}
.adm-row-count.adm-count-updated { animation: scaleIn .3s var(--ease-out); }

/* Chart toolbar */
.adm-chart-toolbar { display: flex; gap: .35rem; }
.adm-chart-toolbar .btn {
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  font-size: .78rem;
}

/* Chart fullscreen */
.adm-chart-fullscreen {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--surface-card-solid);
  padding: 1.5rem;
  display: flex; flex-direction: column;
  animation: fadeIn .2s var(--ease-out);
}
.adm-chart-fullscreen .adm-chart-fs-close { position: absolute; top: 1rem; right: 1rem; z-index: 1; }
.adm-chart-fullscreen canvas { flex: 1; max-height: calc(100vh - 4rem); }

/* Date preset */
.adm-date-preset.active {
  background: linear-gradient(135deg, var(--brand-primary), #9333EA) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), .2) !important;
}

/* Report cards */
.adm-report-card {
  transition: all .2s var(--ease-out);
}
.adm-report-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}

/* ═══════════════════════════════════════════
   §25  DARK MODE COMPREHENSIVE OVERRIDES
   ═══════════════════════════════════════════ */
[data-theme="dark"] .adm-stat:hover {
  box-shadow: 0 0 32px rgba(var(--brand-primary-rgb), .12);
}
[data-theme="dark"] .adm-card { border-color: var(--border-soft); }

/* bg-opacity dark mode */
[data-theme="dark"] .bg-primary.bg-opacity-10 { background: rgba(139, 92, 246, .15) !important; }
[data-theme="dark"] .bg-success.bg-opacity-10 { background: rgba(34, 197, 94, .15) !important; }
[data-theme="dark"] .bg-warning.bg-opacity-10 { background: rgba(245, 158, 11, .15) !important; }
[data-theme="dark"] .bg-info.bg-opacity-10    { background: rgba(6, 182, 212, .15) !important; }
[data-theme="dark"] .bg-danger.bg-opacity-10  { background: rgba(239, 68, 68, .15) !important; }

[data-theme="dark"] .text-primary { color: #8B5CF6 !important; }
[data-theme="dark"] .text-success { color: #4ade80 !important; }
[data-theme="dark"] .text-warning { color: #fbbf24 !important; }
[data-theme="dark"] .text-info    { color: #22d3ee !important; }
[data-theme="dark"] .text-danger  { color: #f87171 !important; }

[data-theme="dark"] .adm-stat .text-primary { color: #8B5CF6 !important; }
[data-theme="dark"] .adm-stat .text-success { color: #4ade80 !important; }
[data-theme="dark"] .adm-stat .text-warning { color: #fbbf24 !important; }
[data-theme="dark"] .adm-stat .text-info    { color: #22d3ee !important; }
[data-theme="dark"] .adm-stat .text-danger  { color: #f87171 !important; }

/* Dark borders */
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end,
[data-theme="dark"] .border { border-color: var(--border-soft) !important; }

/* Dark code */
[data-theme="dark"] code {
  background: rgba(139, 92, 246, .1);
  color: #A78BFA;
  padding: .15em .35em;
  border-radius: 5px;
  font-size: .85em;
}

/* Dark warning badge fix */
[data-theme="dark"] .badge.bg-warning.text-dark { color: #fde68a !important; }
[data-theme="dark"] .btn-warning.text-dark { color: #fde68a !important; }

/* Dark form-check */
[data-theme="dark"] .form-check-input {
  background-color: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .1);
}
[data-theme="dark"] .form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* Dark outline buttons */
[data-theme="dark"] .btn-outline-secondary {
  border-color: rgba(255, 255, 255, .08);
  color: var(--text-muted);
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
  color: var(--text-main);
}
[data-theme="dark"] .btn-outline-primary {
  border-color: rgba(139, 92, 246, .3);
  color: #8B5CF6;
}
[data-theme="dark"] .btn-outline-primary:hover {
  background: rgba(139, 92, 246, .1);
  border-color: #8B5CF6;
  color: #A78BFA;
}
[data-theme="dark"] .btn-outline-danger {
  border-color: rgba(239, 68, 68, .3);
  color: #f87171;
}
[data-theme="dark"] .btn-outline-danger:hover {
  background: rgba(239, 68, 68, .1);
  border-color: #f87171;
  color: #fca5a5;
}
[data-theme="dark"] .btn-outline-success {
  border-color: rgba(34, 197, 94, .3);
  color: #4ade80;
}
[data-theme="dark"] .btn-outline-success:hover {
  background: rgba(34, 197, 94, .1);
  border-color: #4ade80;
  color: #86efac;
}
[data-theme="dark"] .btn-outline-warning {
  border-color: rgba(245, 158, 11, .3);
  color: #fbbf24;
}
[data-theme="dark"] .btn-outline-warning:hover {
  background: rgba(245, 158, 11, .1);
  border-color: #fbbf24;
  color: #fde68a;
}
[data-theme="dark"] .btn-outline-info {
  border-color: rgba(6, 182, 212, .3);
  color: #22d3ee;
}
[data-theme="dark"] .btn-outline-info:hover {
  background: rgba(6, 182, 212, .1);
  border-color: #22d3ee;
  color: #67e8f9;
}

/* Dark bg-opacity badges */
[data-theme="dark"] .bg-primary.bg-opacity-75 { background: rgba(139, 92, 246, .4) !important; }
[data-theme="dark"] .bg-success.bg-opacity-75 { background: rgba(34, 197, 94, .35) !important; }
[data-theme="dark"] .bg-danger.bg-opacity-75  { background: rgba(239, 68, 68, .35) !important; }
[data-theme="dark"] .bg-warning.bg-opacity-75 { background: rgba(245, 158, 11, .35) !important; color: #fde68a !important; }
[data-theme="dark"] .bg-secondary             { background: rgba(148, 163, 184, .15) !important; color: #94a3b8 !important; }
[data-theme="dark"] .bg-secondary.bg-opacity-75 { background: rgba(148, 163, 184, .25) !important; }

/* Dark progress */
[data-theme="dark"] .progress { background-color: rgba(139, 92, 246, .08); }

/* Dark form-text */
[data-theme="dark"] .form-text { color: var(--text-muted) !important; }

/* Dark star icons */
[data-theme="dark"] .bi-star.text-muted { color: rgba(148, 163, 184, .25) !important; }

/* Dark dl/dt/dd */
[data-theme="dark"] dt { color: var(--text-muted); }
[data-theme="dark"] dd { color: var(--text-main); }

/* Dark notification dropdown items */
[data-theme="dark"] .nd-item { border-bottom-color: rgba(255, 255, 255, .04); }
[data-theme="dark"] .nd-item:hover { background: rgba(139, 92, 246, .08); }
[data-theme="dark"] .nd-item-unread { background: rgba(139, 92, 246, .06); }
[data-theme="dark"] .nd-item-title { color: var(--text-main); }
[data-theme="dark"] .nd-footer { border-top-color: rgba(255, 255, 255, .04); }

/* Dark badge overrides */
[data-theme="dark"] .badge.bg-primary { background: rgba(139, 92, 246, .2) !important; color: #A78BFA !important; }
[data-theme="dark"] .badge.bg-success { background: rgba(34, 197, 94, .15) !important; color: #4ade80 !important; }
[data-theme="dark"] .badge.bg-warning { background: rgba(245, 158, 11, .15) !important; color: #fbbf24 !important; }
[data-theme="dark"] .badge.bg-danger  { background: rgba(239, 68, 68, .15) !important; color: #f87171 !important; }
[data-theme="dark"] .badge.bg-info    { background: rgba(6, 182, 212, .15) !important; color: #22d3ee !important; }
[data-theme="dark"] .badge.bg-dark     { background: rgba(148, 163, 184, .15) !important; color: #94a3b8 !important; }
[data-theme="dark"] .badge.bg-dark.bg-opacity-50 { background: rgba(148, 163, 184, .2) !important; color: #CBD5E1 !important; }

/* Dark alert-dark */
[data-theme="dark"] .alert-dark { background: rgba(148, 163, 184, .08); color: #CBD5E1; border-color: rgba(148, 163, 184, .15); }

/* Dark bg-light: prevent jarring white backgrounds */
[data-theme="dark"] .bg-light { background: rgba(255, 255, 255, .04) !important; }
[data-theme="dark"] .card-header.bg-light { background: rgba(255, 255, 255, .03) !important; }
[data-theme="dark"] .card-footer.bg-light { background: rgba(255, 255, 255, .03) !important; border-color: rgba(255, 255, 255, .04) !important; }

/* Dark text-dark override: prevent invisible text */
[data-theme="dark"] .text-dark { color: var(--text-main) !important; }
[data-theme="dark"] .fw-semibold.text-dark { color: var(--text-main) !important; }

/* Dark modal */
[data-theme="dark"] .modal-content {
  background: var(--surface-card-solid);
  backdrop-filter: var(--glass-blur);
  border-color: rgba(255, 255, 255, .06);
  color: var(--text-main);
  box-shadow: var(--shadow-elevated);
}
[data-theme="dark"] .modal-header { border-color: rgba(255, 255, 255, .04); }
[data-theme="dark"] .modal-footer { border-color: rgba(255, 255, 255, .04); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(2); }

/* Dark cards */
[data-theme="dark"] .card {
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  border-color: var(--border-soft);
  color: var(--text-main);
}
[data-theme="dark"] .card-header {
  background: rgba(255, 255, 255, .02);
  border-color: rgba(255, 255, 255, .04);
  color: var(--text-main);
}
[data-theme="dark"] .list-group-item {
  background: var(--surface-card);
  border-color: var(--border-soft);
  color: var(--text-main);
}

/* Dark pagination */
[data-theme="dark"] .page-link {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .06);
  color: var(--text-main);
}
[data-theme="dark"] .page-link:hover {
  background: rgba(var(--brand-primary-rgb), .1);
  color: var(--brand-primary);
}
[data-theme="dark"] .page-item.active .page-link {
  background: linear-gradient(135deg, var(--brand-primary), #9333EA);
  border-color: transparent;
}

/* Dark tooltip */
.tooltip-inner {
  background: var(--surface-card-solid);
  color: var(--text-main);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  font-size: .78rem;
  padding: .4rem .7rem;
  box-shadow: var(--shadow-elevated);
}

/* Dark navbar */
.navbar-toggler { border-color: var(--border-soft); }
[data-theme="dark"] .navbar-toggler-icon {
  filter: invert(1) grayscale(100%) brightness(2);
}

/* ═══════════════════════════════════════════
   §26  MOBILE RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 575.98px) {
  .app-shell { padding: 1rem .75rem 2rem; }

  .adm-table-mobile thead { display: none; }
  .adm-table-mobile tbody tr {
    display: block;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border-soft);
    border-left: 3px solid transparent;
    border-radius: var(--radius-md);
    margin-bottom: .35rem;
    background: var(--surface-card);
  }
  .adm-table-mobile tbody tr:hover { border-left-color: var(--brand-primary); }
  .adm-table-mobile tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .25rem 0;
    border: none;
    font-size: .82rem;
  }
  .adm-table-mobile tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin-right: .75rem;
    flex-shrink: 0;
  }
  .adm-table-mobile tbody td:last-child {
    justify-content: flex-end;
    padding-top: .5rem;
  }

  .btn-adm-action { width: 40px; height: 40px; font-size: .85rem; }
  .adm-pagination .page-link {
    min-width: 40px; min-height: 40px;
    display: flex; align-items: center; justify-content: center;
  }
  canvas { min-height: 200px; }
}

/* Tablet breakpoint */
@media (min-width: 576px) and (max-width: 991.98px) {
  .app-shell { padding: 1.25rem 1rem 2rem; }
  canvas { min-height: 220px; }
}

/* Chart container overflow fix on all sizes */
.table-responsive { -webkit-overflow-scrolling: touch; }
canvas { max-width: 100%; }

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

/* ═══════════════════════════════════════════
   §27.9  SHARED INTERIOR COMPONENTS
   _PageHeader + _EmptyState partials. Token-driven → dark/light parity is
   automatic. Roll these out across interior pages for one design language.
   ═══════════════════════════════════════════ */

/* ── Page header ── */
.pg-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.pg-header-main { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.pg-header-icon {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.25rem; color: #fff;
  background: linear-gradient(135deg, var(--pg-accent, #7C3AED),
              color-mix(in srgb, var(--pg-accent, #7C3AED) 60%, #1a1a2e));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--pg-accent, #7C3AED) 30%, transparent);
}
.pg-header-text { min-width: 0; }
.pg-header-title { font-size: 1.45rem; font-weight: 800; margin: 0; color: var(--text-main); letter-spacing: -.3px; line-height: 1.2; }
.pg-header-sub { font-size: .85rem; color: var(--text-muted); margin: .15rem 0 0; }
.pg-header-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.pg-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1rem; border-radius: 12px; min-height: 42px;
  font-size: .85rem; font-weight: 700; text-decoration: none;
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), background .15s, border-color .15s;
}
.pg-btn--primary {
  background: linear-gradient(135deg, var(--brand-primary), #9333EA);
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(var(--brand-primary-rgb), .28);
}
.pg-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(var(--brand-primary-rgb), .4); }
.pg-btn--ghost {
  background: var(--surface-bg-2); color: var(--text-main) !important;
  border: 1px solid var(--border-soft);
}
.pg-btn--ghost:hover { border-color: rgba(var(--brand-primary-rgb), .4); color: var(--brand-primary) !important; }
.pg-btn:focus-visible { outline: 3px solid rgba(var(--brand-primary-rgb), .5); outline-offset: 2px; }
@media (max-width: 575.98px) {
  .pg-header-title { font-size: 1.2rem; }
  .pg-header-actions { width: 100%; }
  .pg-btn { flex: 1; justify-content: center; }
}

/* ── Empty state ── */
.es {
  text-align: center; padding: 3rem 1.5rem;
  background: var(--surface-bg-2); border: 1px dashed var(--border-soft);
  border-radius: 18px;
}
.es--compact { padding: 1.75rem 1rem; }
.es-icon {
  width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 1rem;
  display: grid; place-items: center; font-size: 1.7rem;
  background: rgba(var(--brand-primary-rgb), .1); color: var(--brand-primary);
}
.es--compact .es-icon { width: 48px; height: 48px; font-size: 1.3rem; margin-bottom: .65rem; }
.es-title { font-size: 1rem; font-weight: 700; color: var(--text-main); margin: 0 0 .35rem; }
.es-desc { font-size: .85rem; color: var(--text-muted); margin: 0 auto 1.1rem; max-width: 360px; line-height: 1.55; }
.es--compact .es-desc { margin-bottom: .85rem; }
.es-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.1rem; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-primary), #9333EA);
  color: #fff !important; font-size: .84rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 6px 16px rgba(var(--brand-primary-rgb), .28);
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.es-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(var(--brand-primary-rgb), .4); }
.es-cta:focus-visible { outline: 3px solid rgba(var(--brand-primary-rgb), .5); outline-offset: 2px; }
[data-theme="dark"] .es { background: rgba(255,255,255,.02); }

/* ═══════════════════════════════════════════
   §28  PREMIUM GLASSMORPHISM UTILITIES
   ═══════════════════════════════════════════ */

/* Glass card utility */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, var(--brand-primary), #EC4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow effect on hover */
.glow-hover {
  transition: box-shadow .3s var(--ease-out);
}
.glow-hover:hover {
  box-shadow: var(--shadow-glow);
}

/* Neon border */
.neon-border {
  border: 1px solid rgba(var(--brand-primary-rgb), .15);
  box-shadow: inset 0 0 20px rgba(var(--brand-primary-rgb), .03);
}
[data-theme="dark"] .neon-border {
  border-color: rgba(var(--brand-primary-rgb), .2);
  box-shadow: inset 0 0 30px rgba(var(--brand-primary-rgb), .04), 0 0 20px rgba(var(--brand-primary-rgb), .05);
}

/* Gradient backgrounds */
.bg-gradient-primary { background: linear-gradient(135deg, var(--brand-primary), #9333EA) !important; }
.bg-gradient-secondary { background: linear-gradient(135deg, #06B6D4, #3B82F6) !important; }
.bg-gradient-accent { background: linear-gradient(135deg, #EC4899, #8B5CF6) !important; }
.bg-gradient-success { background: linear-gradient(135deg, #22c55e, #16a34a) !important; }
.bg-gradient-warning { background: linear-gradient(135deg, #f59e0b, #ef4444) !important; }

/* Subtle mesh background for dark mode */
[data-theme="dark"] .mesh-bg {
  background-image:
    radial-gradient(at 40% 20%, rgba(139, 92, 246, .06) 0px, transparent 50%),
    radial-gradient(at 80% 0%, rgba(6, 182, 212, .04) 0px, transparent 50%),
    radial-gradient(at 0% 50%, rgba(236, 72, 153, .03) 0px, transparent 50%);
}

/* Premium card with gradient border */
.premium-card {
  position: relative;
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
  overflow: hidden;
}
.premium-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), .2), rgba(6, 182, 212, .1), rgba(236, 72, 153, .1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Floating/lifted effect */
.float-card {
  transition: all .3s var(--ease-out);
}
.float-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-elevated);
}

/* Tag/chip styles */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  border: 1px solid rgba(var(--brand-primary-rgb), .1);
}

/* Divider with glow */
.divider-glow {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--brand-primary-rgb), .2), transparent);
  border: none;
  margin: 1.5rem 0;
}

/* Status indicator */
.status-online { color: #22c55e; }
.status-online::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: .4rem;
  box-shadow: 0 0 6px rgba(34, 197, 94, .5);
  animation: pulse-soft 2s infinite;
}

/* Ambient glow for sections (dark mode only) */
[data-theme="dark"] .ambient-glow {
  position: relative;
}
[data-theme="dark"] .ambient-glow::after {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(var(--brand-primary-rgb), .06) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ═══════════════════════════════════════════
   §29  CONTRAST + BUTTON STATE SYSTEM
   Global fixes for readability, WCAG, eye strain
   ═══════════════════════════════════════════ */

/* ── 29.1  Disabled button states ──────────────────────── */
.btn:disabled,
.btn[aria-disabled="true"],
.btn.disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(.2);
  box-shadow: none;
  transform: none;
}

/* ── 29.2  btn-primary — ensure white text always wins ── */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  color: #ffffff !important;
}
[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #8B5CF6, #A855F7);
  box-shadow: 0 2px 10px rgba(139, 92, 246, .3);
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus {
  background: linear-gradient(135deg, #7C3AED, #9333EA);
  box-shadow: 0 4px 18px rgba(139, 92, 246, .4);
}

/* ── 29.3  btn-outline-primary — readable on all surfaces ── */
[data-theme="dark"] .btn-outline-primary {
  color: #C4B5FD;
  border-color: rgba(196, 181, 253, .35);
}
[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary:focus {
  background: rgba(139, 92, 246, .15);
  color: #E9D5FF;
  border-color: rgba(196, 181, 253, .5);
}

/* ── 29.4  Focus ring — stronger visibility ─────────────── */
.btn:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .35) !important;
  outline: 2px solid rgba(var(--brand-primary-rgb), .5);
  outline-offset: 2px;
}
[data-theme="dark"] .btn:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(196, 181, 253, .3) !important;
  outline-color: rgba(196, 181, 253, .5);
}

/* ── 29.5  Ghost/glass buttons on purple surfaces ────────── */
/*
 * .sd-hero-btn--ghost, .adm-qaction, and similar buttons sit
 * on gradient-purple banners. Text must be bright white.
 */
.sd-hero-btn--ghost,
.id-banner-btn-ghost,
.adm-qaction,
.id-banner-btn {
  color: #ffffff !important;
  font-weight: 700;
}
.sd-hero-btn--ghost,
.id-banner-btn-ghost {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .35);
}
.sd-hero-btn--ghost:hover,
.id-banner-btn-ghost:hover {
  background: rgba(255, 255, 255, .3);
  border-color: rgba(255, 255, 255, .5);
}
.adm-qaction {
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .3);
}
.adm-qaction:hover {
  background: rgba(255, 255, 255, .35);
  border-color: rgba(255, 255, 255, .45);
}
/* Instructor primary banner button — ensure readable */
.id-banner-btn-primary {
  background: rgba(255, 255, 255, .97);
  color: var(--brand-primary) !important;
  font-weight: 700;
}
.id-banner-btn-primary:hover {
  background: #ffffff;
  color: var(--brand-primary-dark) !important;
}

/* ── 29.6  CTA on purple gradient backgrounds ────────────── */
.sd-hero-btn--primary {
  background: rgba(255, 255, 255, .97);
  color: var(--brand-primary) !important;
  font-weight: 700;
}
.sd-hero-btn--primary:hover {
  background: #ffffff;
  color: var(--brand-primary-dark) !important;
}

/* ── 29.7  Empty state CTA buttons — solid gradient ──────── */
.sd-empty-cta,
.empty-state .btn-primary,
.adm-empty-state .btn-primary {
  background: linear-gradient(135deg, var(--brand-primary), #9333EA) !important;
  color: #ffffff !important;
  font-weight: 700;
  border: none;
  box-shadow: 0 3px 14px rgba(var(--brand-primary-rgb), .25);
}
.sd-empty-cta:hover,
.empty-state .btn-primary:hover,
.adm-empty-state .btn-primary:hover {
  box-shadow: 0 5px 22px rgba(var(--brand-primary-rgb), .35);
  transform: translateY(-2px);
}
[data-theme="dark"] .sd-empty-cta,
[data-theme="dark"] .empty-state .btn-primary,
[data-theme="dark"] .adm-empty-state .btn-primary {
  background: linear-gradient(135deg, #8B5CF6, #A855F7) !important;
  box-shadow: 0 3px 14px rgba(139, 92, 246, .35);
}

/* ── 29.8  Active filled CTA text lock ─────────────────────── */
/*
 * Component CTAs are often <a> elements. Keep filled/gradient active buttons
 * from inheriting global link purple or muted child icon colors.
 */
.cta-solid,
.btn-action,
.profile-action-primary,
.empty-state-cta,
.pg-btn--primary,
.es-cta,
.comm-btn-primary,
.sw-btn-primary,
.ip-btn--primary,
.ap-btn-primary,
.spw-btn-primary,
.apf-btn-primary,
.sd-empty-cta,
.id-empty-cta,
.empty-state .btn-primary,
.adm-empty-state .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  text-decoration: none !important;
}

.cta-solid:hover,
.btn-action:hover,
.profile-action-primary:hover,
.empty-state-cta:hover,
.pg-btn--primary:hover,
.es-cta:hover,
.comm-btn-primary:hover,
.sw-btn-primary:hover,
.ip-btn--primary:hover,
.ap-btn-primary:hover,
.spw-btn-primary:hover,
.apf-btn-primary:hover,
.sd-empty-cta:hover,
.id-empty-cta:hover,
.empty-state .btn-primary:hover,
.adm-empty-state .btn-primary:hover,
.cta-solid:focus,
.btn-action:focus,
.profile-action-primary:focus,
.empty-state-cta:focus,
.pg-btn--primary:focus,
.es-cta:focus,
.comm-btn-primary:focus,
.sw-btn-primary:focus,
.ip-btn--primary:focus,
.ap-btn-primary:focus,
.spw-btn-primary:focus,
.apf-btn-primary:focus,
.sd-empty-cta:focus,
.id-empty-cta:focus,
.empty-state .btn-primary:focus,
.adm-empty-state .btn-primary:focus {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
}

.cta-solid :is(i, span, svg),
.btn-action :is(i, span, svg),
.profile-action-primary :is(i, span, svg),
.empty-state-cta :is(i, span, svg),
.pg-btn--primary :is(i, span, svg),
.es-cta :is(i, span, svg),
.comm-btn-primary :is(i, span, svg),
.sw-btn-primary :is(i, span, svg),
.ip-btn--primary :is(i, span, svg),
.ap-btn-primary :is(i, span, svg),
.spw-btn-primary :is(i, span, svg),
.apf-btn-primary :is(i, span, svg),
.sd-empty-cta :is(i, span, svg),
.id-empty-cta :is(i, span, svg),
.empty-state .btn-primary :is(i, span, svg),
.adm-empty-state .btn-primary :is(i, span, svg) {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ── 29.8  Dark mode eye-strain reduction ────────────────── */
/*
 * Slightly reduce purple saturation on large dark surfaces
 * to avoid eye strain without losing brand feel.
 */
[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(139, 92, 246, .05), transparent),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(6, 182, 212, .03), transparent);
}

/* ── 29.9  Notification dropdown text — dark mode fix ────── */
[data-theme="dark"] .nd-item-title { color: #E2E8F0; }
[data-theme="dark"] .nd-item-ago { color: #8494A7; }
[data-theme="dark"] .nd-empty-msg { color: #8494A7; }

/* ── 29.10  Sidebar icon opacity — ensure visibility ─────── */
.sidebar .nav-link i {
  opacity: .7;
}
.sidebar .nav-link:hover i,
.sidebar .nav-link.active i {
  opacity: 1;
}

/* ── 29.11  Admin welcome banner text on purple ──────────── */
.adm-welcome-text h1 { color: #ffffff; }
.adm-welcome-text p {
  color: rgba(255, 255, 255, .9);
}
.adm-health-badge {
  color: rgba(255, 255, 255, .9);
}

/* ── 29.12  Admin topbar profile dropdown ─────────────────── */
.adm-profile-dropdown {
  min-width: 200px;
  border-radius: var(--radius-lg) !important;
  padding: .3rem !important;
}
.adm-profile-dropdown .dropdown-header {
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--border-soft);
}
.adm-profile-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  font-size: .84rem;
  border-radius: var(--radius-sm);
}
.adm-profile-dropdown .dropdown-item i {
  width: 16px;
  text-align: center;
  font-size: .9rem;
  color: var(--text-muted);
}
.adm-profile-dropdown .dropdown-item:hover i {
  color: var(--brand-primary);
}
.adm-profile-dropdown .dropdown-divider {
  margin: .25rem .5rem;
  border-color: var(--border-soft);
}

/* ── 29.13  Admin notification badge — conditional ────────── */
.adm-notif-badge {
  display: none;  /* hidden by default — JS shows when count > 0 */
}
.adm-notif-badge.has-unread {
  display: block;
}

/* ── 29.14  Notification bell accessible label ────────────── */
.adm-icon-btn[aria-label] {
  position: relative;
}

/* ═══════════════════════════════════════════
   §29B  ACTION LINK VISIBILITY + DARK MODE
   Fixes faded action links, inherited opacity,
   interactive hierarchy, purple-on-purple washout
   ═══════════════════════════════════════════ */

/* ── 29B.1  Action link base — ensure active appearance ──────
 * All "→" links, "View All" links, card-action links across
 * Admin, Instructor, and Student dashboards.
 */
.adm-link-btn,
.id-card-action,
.id-kpi-link,
.sd-link {
  opacity: 1 !important;
  filter: none !important;
}

/* Dark mode: brighten brand-primary links for perceived contrast.
 * Double attribute selector [data-theme="dark"][data-theme="dark"]
 * boosts specificity to beat inline <style> !important rules
 * that use var(--brand-primary).
 */
[data-theme="dark"][data-theme="dark"] .adm-link-btn,
[data-theme="dark"][data-theme="dark"] .id-card-action,
[data-theme="dark"][data-theme="dark"] .sd-link {
  color: #A78BFA !important;   /* lighter purple — 5.2:1 on dark surface */
}
[data-theme="dark"][data-theme="dark"] .adm-link-btn:hover,
[data-theme="dark"][data-theme="dark"] .id-card-action:hover,
[data-theme="dark"][data-theme="dark"] .sd-link:hover {
  color: #C4B5FD !important;   /* even brighter on hover */
  background: rgba(167, 139, 250, .1);
}

/* ── 29B.2  KPI accent links — fix reverse-hover bug ─────────
 * .id-kpi-link had opacity:.75 on hover making it dimmer.
 * Fix: hover should brighten, not dim.
 */
[data-theme="dark"] .id-kpi-link {
  filter: brightness(1.2);
}
.id-kpi-link:hover {
  opacity: 1 !important;
  filter: brightness(1.15);
}
[data-theme="dark"] .id-kpi-link:hover {
  filter: brightness(1.35);
}

/* ── 29B.3  Table row action buttons — not disabled ──────────
 * .id-row-btn uses --text-muted which looks inactive.
 * Fix: use brand-primary tint, stronger on hover.
 */
.id-row-btn {
  color: var(--brand-primary);
  border-color: rgba(var(--brand-primary-rgb), .15);
}
[data-theme="dark"] .id-row-btn {
  color: #A78BFA;
  border-color: rgba(167, 139, 250, .2);
}
[data-theme="dark"] .id-row-btn:hover {
  color: #C4B5FD;
  background: rgba(167, 139, 250, .12);
  border-color: rgba(196, 181, 253, .35);
}

/* ── 29B.4  Inherited opacity removal on banner subtexts ─────
 * Banner sub-texts use `opacity: .65–.85` creating faded look.
 * Replace with explicit rgba color — no child inheritance issue.
 */
.id-greeting-sub {
  opacity: 1 !important;
  color: rgba(255, 255, 255, .85);
}
.id-greeting-hint {
  opacity: 1 !important;
  color: rgba(255, 255, 255, .78);
}
.sd-hero-greeting {
  opacity: 1 !important;
  color: rgba(255, 255, 255, .88);
}
.sd-ring-sub {
  opacity: 1 !important;
  color: rgba(255, 255, 255, .78);
}

/* ── 29B.5  Quick action buttons — dark mode brightness ──────
 * .id-quick-btn uses color-mix with accent colors that
 * can appear dim on dark surfaces. Boost text brightness.
 */
[data-theme="dark"] .id-quick-btn {
  filter: brightness(1.1);
}
[data-theme="dark"] .id-quick-btn:hover {
  filter: brightness(1.25);
}

/* ── 29B.6  Dark mode text hierarchy — tuned luminance ───────
 * --text-muted (#8494A7) is acceptable but stat labels,
 * sub-descriptions, and secondary text benefit from a
 * slightly cooler, brighter muted tone.
 */
[data-theme="dark"] .id-kpi-lbl,
[data-theme="dark"] .id-card-sub,
[data-theme="dark"] .id-feed-course,
[data-theme="dark"] .id-prog-pct,
[data-theme="dark"] .id-rating-na,
[data-theme="dark"] .sd-stat-label,
[data-theme="dark"] .sd-course-instructor,
[data-theme="dark"] .sd-prog-text,
[data-theme="dark"] .sd-empty-state p {
  color: #94A3B8;   /* +1 step brighter than #8494A7 */
}

/* ── 29B.7  Interactive hierarchy enforcement ────────────────
 * PRIMARY   = solid gradient/filled buttons — already bright
 * SECONDARY = outline/glass buttons — need clear border+color
 * TERTIARY  = text links with arrows — must look clickable
 * DISABLED  = opacity .5 + grayscale (§29.1)
 *
 * Ensure tertiary never looks disabled:
 */
.id-card-action,
.sd-link,
.adm-link-btn,
.id-kpi-link {
  cursor: pointer;
  text-decoration: none;
}
.id-card-action::after,
.sd-link .bi-arrow-right,
.adm-link-btn .bi-arrow-right {
  transition: transform .18s var(--ease-out);
}
.id-card-action:hover i,
.sd-link:hover .bi-arrow-right,
.adm-link-btn:hover .bi-arrow-right {
  transform: translateX(3px);
}

/* Outline/glass secondary buttons — clearer in dark mode */
[data-theme="dark"] .btn-outline-secondary {
  color: #CBD5E1;
  border-color: rgba(203, 213, 225, .25);
}
[data-theme="dark"] .btn-outline-secondary:hover {
  color: #E2E8F0;
  background: rgba(203, 213, 225, .08);
  border-color: rgba(203, 213, 225, .4);
}

/* ── 29B.8  Hover & focus visibility for action links ────────*/
.id-card-action:focus-visible,
.sd-link:focus-visible,
.adm-link-btn:focus-visible,
.id-kpi-link:focus-visible,
.id-row-btn:focus-visible,
.id-quick-btn:focus-visible {
  outline: 2px solid rgba(var(--brand-primary-rgb), .5);
  outline-offset: 2px;
  box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .2);
}
[data-theme="dark"] .id-card-action:focus-visible,
[data-theme="dark"] .sd-link:focus-visible,
[data-theme="dark"] .adm-link-btn:focus-visible,
[data-theme="dark"] .id-kpi-link:focus-visible,
[data-theme="dark"] .id-row-btn:focus-visible,
[data-theme="dark"] .id-quick-btn:focus-visible {
  outline-color: rgba(167, 139, 250, .5);
  box-shadow: 0 0 0 .2rem rgba(167, 139, 250, .2);
}

/* ── 29B.9  Admin stat label — dark mode bump ────────────────*/
[data-theme="dark"] .adm-stat-label {
  color: #9CA3AF;   /* slightly brighter than token #94a3b8 */
}

/* ── 29B.10  Empty state secondary text — ensure readable ────*/
[data-theme="dark"] .id-empty-title {
  color: #94A3B8;
}
[data-theme="dark"] .adm-empty-state p,
[data-theme="dark"] .adm-empty-state .text-muted {
  color: #94A3B8;
}

/* ── 29B.11  btn-link.text-muted — dark mode readability ─────
 * "Back" links on admin detail pages use btn-link + text-muted,
 * which is nearly invisible in dark mode.
 */
[data-theme="dark"] .btn-link.text-muted {
  color: #94A3B8 !important;
}
[data-theme="dark"] .btn-link.text-muted:hover {
  color: #C4B5FD !important;
}

/* ── 29B.12  Profile / hardcoded indigo links — dark fix ─────
 * sp-link-btn uses hardcoded #6366f1 which is dim on dark bg.
 */
[data-theme="dark"] .sp-link-btn {
  color: #A5B4FC;
  border-color: rgba(165, 180, 252, .3);
}
[data-theme="dark"] .sp-link-btn:hover {
  color: #C7D2FE;
  background: rgba(165, 180, 252, .1);
  border-color: rgba(165, 180, 252, .45);
}

/* ── 29B.13  Notification dropdown action links — dark mode ──*/
[data-theme="dark"] .dropdown-menu a[href="/Notifications"] {
  color: #E2E8F0;
}

/* ── 29B.14  Admin topbar icon buttons — active state ────────
 * Ensure admin topbar icons never look disabled.
 */
.adm-icon-btn {
  opacity: 1;
  filter: none;
}

/* ── 29B.15  Generic a.text-muted — dark mode back-links ─────
 * Chat back-links, breadcrumb-style nav links use a.text-muted.
 * Ensure they're visible as interactive in dark mode.
 */
[data-theme="dark"] a.text-muted,
[data-theme="dark"] a.text-decoration-none.text-muted {
  color: #94A3B8 !important;
}
[data-theme="dark"] a.text-muted:hover,
[data-theme="dark"] a.text-decoration-none.text-muted:hover {
  color: #C4B5FD !important;
}

/* ── 29B.16  Sidebar nav links — no inherited opacity/filter ──*/
.sidebar .nav-link {
  opacity: 1;
  filter: none;
}

/* ── 29B.17  Accordion module headers — dark mode ────────────
 * Instructor course details uses Bootstrap .accordion-button
 * with .badge.bg-light.text-dark for lesson count.
 * In dark mode the accordion header needs a surface-appropriate bg
 * and the badge needs to remain readable.
 */
[data-theme="dark"] .accordion-item {
  background: var(--surface-card);
  border-color: var(--border-soft) !important;
}
[data-theme="dark"] .accordion-button {
  background: var(--surface-card);
  color: var(--text-main);
  box-shadow: none;
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
  background: rgba(var(--brand-primary-rgb), .08);
  color: var(--text-main);
  box-shadow: none;
}
[data-theme="dark"] .accordion-button::after {
  filter: invert(1) brightness(1.5);
}
[data-theme="dark"] .accordion-button .badge.bg-light {
  background: rgba(var(--brand-primary-rgb), .12) !important;
  color: #C4B5FD !important;
}
[data-theme="dark"] .accordion-body {
  background: var(--surface-card);
  color: var(--text-main);
}
[data-theme="dark"] .accordion-body .list-group-item {
  background: rgba(255, 255, 255, .03);
  border-color: var(--border-soft) !important;
  color: var(--text-main);
}
[data-theme="dark"] .accordion-body .text-primary {
  color: #A78BFA !important;
}

/* General bg-light.text-dark badges in dark mode */
[data-theme="dark"] .badge.bg-light.text-dark {
  background: rgba(255, 255, 255, .1) !important;
  color: #CBD5E1 !important;
}

/* ═══════════════════════════════════════════════════════
   §29B.18 – Quiz Details dark-mode contrast
   ═══════════════════════════════════════════════════════ */
[data-theme="dark"] .qd-add-answer-btn {
  color: #818CF8;
  background: rgba(99,102,241,.14);
  border-color: rgba(99,102,241,.3);
}
[data-theme="dark"] .qd-add-answer-btn:hover {
  background: rgba(99,102,241,.22);
}
[data-theme="dark"] .qd-chip--active {
  color: #818CF8;
  background: rgba(99,102,241,.14);
  border-color: rgba(99,102,241,.3);
}
[data-theme="dark"] .qd-correct-label {
  color: #4ade80;
  background: rgba(34,197,94,.16);
}
[data-theme="dark"] .qd-action--settings {
  color: #fbbf24;
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.3);
}
[data-theme="dark"] .qd-action--settings:hover {
  background: rgba(245,158,11,.22);
  color: #fbbf24;
}
[data-theme="dark"] .qd-action--analytics {
  color: #4ade80;
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.3);
}
[data-theme="dark"] .qd-action--analytics:hover {
  background: rgba(34,197,94,.22);
  color: #4ade80;
}
[data-theme="dark"] .qd-empty-icon {
  color: #818CF8;
  background: rgba(99,102,241,.16);
}
[data-theme="dark"] .qd-timer-toggle-btn {
  color: #60a5fa;
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.3);
}
[data-theme="dark"] .qd-timer-toggle-btn:hover {
  background: rgba(59,130,246,.22);
}
[data-theme="dark"] .qd-timer-remove-btn {
  color: #f87171;
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.25);
}
[data-theme="dark"] .qd-timer-remove-btn:hover {
  background: rgba(239,68,68,.2);
}
[data-theme="dark"] .qd-edit-q-btn:hover {
  color: #818CF8;
  background: rgba(99,102,241,.16);
  border-color: rgba(99,102,241,.35);
}

/* ═══════════════════════════════════════════
   §30  FINAL VISUAL QA SPRINT
   Dark theme consistency, opacity, passwords,
   Grade Book, accessibility, Bootstrap overrides
   ═══════════════════════════════════════════ */

/* ── 30.1  Global dark mode overrides for Bootstrap bg-* utilities ── */
[data-theme="dark"] .bg-white {
  background-color: var(--surface-card-solid) !important;
}
[data-theme="dark"] .bg-light {
  background-color: rgba(255,255,255,.04) !important;
}
[data-theme="dark"] .table-light {
  --bs-table-bg: rgba(255,255,255,.03);
  --bs-table-border-color: rgba(255,255,255,.06);
  --bs-table-color: var(--text-main);
}
[data-theme="dark"] .table-light th {
  color: var(--text-secondary) !important;
  border-color: rgba(255,255,255,.06) !important;
}
[data-theme="dark"] .text-dark {
  color: var(--text-main) !important;
}
[data-theme="dark"] .card-header.bg-white {
  background-color: var(--surface-card-solid) !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
}

/* ── 30.2  Grade Book dark mode ──────────────────────────────── */
[data-theme="dark"] .card {
  background: var(--surface-card-solid);
  border-color: var(--border-soft);
}
[data-theme="dark"] .card .card-header {
  background: var(--surface-card-solid) !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
}
[data-theme="dark"] .card .card-title.text-primary {
  color: #A78BFA !important;
}
[data-theme="dark"] .card .text-muted {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-main);
  --bs-table-border-color: rgba(255,255,255,.06);
}
[data-theme="dark"] .table-hover > tbody > tr:hover {
  --bs-table-hover-bg: rgba(139,92,246,.06);
  --bs-table-hover-color: var(--text-main);
}
[data-theme="dark"] .badge.bg-success {
  background-color: #15803d !important;
  color: #bbf7d0 !important;
}
[data-theme="dark"] .badge.bg-primary {
  background: linear-gradient(135deg,#7C3AED,#8B5CF6) !important;
  color: #ffffff !important;
}
[data-theme="dark"] .badge.bg-warning {
  background-color: #92400e !important;
  color: #fef3c7 !important;
}
[data-theme="dark"] .badge.bg-danger {
  background-color: #991b1b !important;
  color: #fecaca !important;
}
[data-theme="dark"] .badge.bg-secondary {
  background-color: rgba(148,163,184,.15) !important;
  color: #94A3B8 !important;
}

/* ── 30.3  Form label icon opacity fix ───────────────────────── */
/*
 * Form label icons (<i> inside <label>) used inline opacity:.6
 * which made them look disabled. Use color instead.
 */
.form-label i.bi {
  opacity: .85 !important;
  color: var(--text-muted);
}
[data-theme="dark"] .form-label i.bi {
  color: var(--text-secondary);
}

/* ── 30.4  Password input polish ─────────────────────────────── */
/*
 * Password dots should be clearly visible with solid background.
 * Focus glow uses premium purple.
 */
input[type="password"].form-control {
  letter-spacing: .15em;
  font-size: .95rem;
}
[data-theme="dark"] input[type="password"].form-control {
  background-color: rgba(255,255,255,.06);
  color: #F8FAFC;
  border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] input[type="password"].form-control:focus {
  background-color: rgba(255,255,255,.08);
  border-color: rgba(139,92,246,.5);
  box-shadow: 0 0 0 3px rgba(139,92,246,.15), 0 0 16px rgba(139,92,246,.08);
}
/* Input group with password toggle — ensure consistent height & border */
.input-group .form-control[type="password"] {
  border-right: 0;
}
.input-group .pwd-toggle-btn {
  border-left: 0;
  min-height: 2.7rem;
}
[data-theme="dark"] .input-group .pwd-toggle-btn {
  background: rgba(255,255,255,.04);
}

/* ── 30.5  Quiz Result score text readability ────────────────── */
.rs-score-sep { opacity: .7; }
.rs-score-total { opacity: .85; }
.rs-pct { opacity: .9; }
.rs-meta { opacity: .75; }
.rs-attempt-info { opacity: .9; }
.rs-remaining { opacity: .85; }

/* ── 30.6  Quiz Result Details opacity fix ───────────────────── */
.qr-ring-sub { opacity: .85; }
.qr-pill-lbl { opacity: .85; }
.qr-pill-div { opacity: .55; }
.qr-hero-meta { opacity: .8; }

/* ── 30.7  Course Preview readability ────────────────────────── */
.cp-desc { opacity: .88; }
.cp-back { opacity: .85; }
.cp-back:hover { opacity: 1; }
/* Enroll button on hero — never look disabled */
.cp-enroll-btn:hover { opacity: 1; transform: translateY(-1px); }
.cp-enroll-btn-card:hover { opacity: 1; transform: translateY(-1px); }
/* Dark mode: price tag readable */
[data-theme="dark"] .cp-price-tag {
  color: #A5B4FC;
}

/* ── 30.8  Home page CTA ghost button readability ────────────── */
/* Overridden by §31 — kept for reference */

/* ── 30.9  Student Profile opacity fix ───────────────────────── */
.sp-hero-bio--empty { opacity: .65; }
.sp-see-all:hover { opacity: .85; }
.sp-cert-view:hover { opacity: .85; }

/* ── 30.10  Instructor Dashboard opacity fix ─────────────────── */
.id-greeting-hint { opacity: 1 !important; color: rgba(255,255,255,.78); }
.id-kpi-link:hover { opacity: 1 !important; }

/* ── 30.11  Review create dark mode ──────────────────────────── */
[data-theme="dark"] .card-header.bg-white.border-bottom-0 {
  background: var(--surface-card-solid) !important;
}

/* ── 30.12  Alert dark mode improvements ─────────────────────── */
[data-theme="dark"] .alert-info {
  background-color: rgba(59,130,246,.1);
  border-color: rgba(59,130,246,.2);
  color: #93C5FD;
}

/* ── 30.13  Chat bg-light dark mode ──────────────────────────── */
[data-theme="dark"] .card-footer.bg-light {
  background-color: rgba(255,255,255,.03) !important;
}

/* ── 30.14  QuizResults Index attempt badge ──────────────────── */
[data-theme="dark"] .badge.bg-light.text-dark {
  background-color: rgba(255,255,255,.08) !important;
  color: var(--text-main) !important;
  border-color: rgba(255,255,255,.1) !important;
}

/* ── 30.15  Instructor Course Details badge ──────────────────── */
[data-theme="dark"] .badge.bg-light.text-dark.small {
  background-color: rgba(255,255,255,.08) !important;
  color: var(--text-secondary) !important;
}

/* ── 30.16  Enrollment Request bg-light panels ───────────────── */
[data-theme="dark"] .p-2.bg-light.rounded {
  background-color: rgba(255,255,255,.04) !important;
  color: var(--text-main);
}

/* ── 30.17  Question Create loading state — use disabled pattern ── */
.qb-submit-btn.loading {
  opacity: .5;
  pointer-events: none;
  cursor: not-allowed;
}

/* ── 30.18  Session dots separator ───────────────────────────── */
[data-theme="dark"] .sec-dot-sep,
[data-theme="dark"] [style*="background: var(--text-muted)"] {
  opacity: .5;
}

/* ── 30.19  Accessibility — focus-visible rings ──────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(var(--brand-primary-rgb), .5);
  outline-offset: 2px;
}
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible {
  outline-color: rgba(167, 139, 250, .5);
}

/* ── 30.20  Disabled states — enforce correct pattern ────────── */
button:disabled,
a.disabled,
.btn:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ── 30.21  Progress bar dark mode — visible track ───────────── */
[data-theme="dark"] .progress {
  background-color: rgba(255,255,255,.06);
}
[data-theme="dark"] .progress-bar.bg-success {
  background: linear-gradient(90deg, #15803d, #22c55e) !important;
}

/* ═══════════════════════════════════════════
   §31  OPACITY + HERO CONTRAST FIX SPRINT
   Solid dark surfaces, interactive buttons,
   reduced decorative noise, explicit colors
   ═══════════════════════════════════════════ */

/* ── 31.1  Hero text — explicit color, no opacity ────────────── */
/*
 * Root cause: .lp-hero-sub used opacity:.8 which fades ALL content
 * including text. Use explicit color instead so decorative layers
 * don't compound the fade effect.
 */
.lp-hero-sub {
  opacity: 1 !important;
  color: #CBD5E1;
}
.lp-cta p {
  opacity: 1 !important;
  color: #CBD5E1;
}
/* Hero badge — slightly brighter for readability */
.lp-badge {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.25);
  color: #F1F5F9;
}

/* ── 31.2  Ghost button — match sd-hero-btn--ghost style ──────── */
/*
 * Matches the Student Dashboard ghost button: rgba(.2) bg, blur(8px),
 * hover to rgba(.32) — looks clearly interactive, never disabled.
 */
/* ═══ DEBUG / CONTRAST-SPRINT FIX (real root cause) ═══════════════════
 * This §31.2 block — NOT the inline <style> in Home/Index.cshtml — is the
 * rule that actually wins the cascade (external sheet + !important). The old
 * values (.2 fill / .35 border) made the secondary CTA "Kursları kəşf et"
 * read as DISABLED over the bright purple hero gradient. The inline edits had
 * no effect because they carry no !important and lose to these declarations.
 *
 * Fix: bright, near-solid border (.85) so it reads as a clickable outline
 * button, a stronger fill (.24), and a text-shadow for crisp white text.
 * Element opacity stays a hard 1 — the alpha is on the fill/border only.
 * ════════════════════════════════════════════════════════════════════ */
.lp-btn-ghost {
  /* ROUND-3 FIX: keep a strong dark text-shadow + bright border, and apply the
     requested fill/border/box-shadow. A faint top-edge inset highlight gives a
     premium glass look without lightening the text area. */
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.78) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  box-shadow:
    0 16px 34px rgba(15,23,42,.22),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .18s, border-color .18s, box-shadow .18s, transform .18s;
}
/* Anchor state colours — INCLUDING :visited, which a bare-text <a> needs or the
   browser's visited colour can tint the label. This was the gap in the prior
   child-lock (it had no :visited). */
.lp-btn-ghost,
.lp-btn-ghost:link,
.lp-btn-ghost:visited,
.lp-btn-ghost:hover,
.lp-btn-ghost:focus,
.lp-btn-ghost:focus-visible,
.lp-btn-ghost:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
}
.lp-btn-ghost:hover,
.lp-btn-ghost:focus-visible {
  background: rgba(255,255,255,.30) !important;
  border-color: rgba(255,255,255,.95) !important;
  box-shadow:
    0 16px 34px rgba(15,23,42,.26),
    inset 0 1px 0 rgba(255,255,255,.40) !important;
  transform: translateY(-1px);
}
.lp-btn-ghost:active {
  background: rgba(255,255,255,.40) !important;
  transform: translateY(0);
}
/* Bulletproof child lock: no inherited link/utility colour (e.g. .text-primary,
   global icon colour, anchor :visited) can fade the inner text or icon. Covers
   <i>, <span>, <svg> and bare text spans. */
.lp-btn-ghost *,
.lp-btn-ghost i,
.lp-btn-ghost .bi,
.lp-btn-ghost span,
.lp-btn-ghost svg {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
/* SVG icons (if any future icon swap uses inline SVG) inherit white via fill. */
.lp-btn-ghost svg,
.lp-btn-ghost svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ── 31.3  Primary button — solid, never faded ───────────────── */
.lp-btn-primary {
  opacity: 1 !important;
  cursor: pointer;
}
.lp-btn-primary:hover {
  opacity: 1 !important;
}

/* ── 31.4  Decorative overlays — reduce noise ────────────────── */
/*
 * Root cause: hero particles (circles) had rgba(.06) bg + opacity
 * animation .5→.8 — creates muddy wash over text.
 * Fix: reduce max animation opacity, shrink radii.
 */
.lp-hero-particles span {
  background: rgba(255,255,255,.03) !important;
}
/* Ensure hero content is always above overlay layers */
.lp-hero-content {
  position: relative;
  z-index: 2;
}
.lp-hero-bg {
  z-index: 0;
}
.lp-hero-particles {
  z-index: 1;
}

/* ── 31.5  Testimonial / review cards — solid dark surface ──── */
/*
 * Root cause: var(--surface-card) in dark mode = rgba(255,255,255,.025)
 * which is nearly transparent. Cards look ghostly.
 * Fix: solid dark surface for landing page cards.
 */
[data-theme="dark"] .lp-testimonial-card {
  background: #12182A;
  border-color: rgba(148,163,184,.14);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
[data-theme="dark"] .lp-testimonial-card:hover {
  border-color: rgba(148,163,184,.22);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  transform: translateY(-3px);
}
/* Testimonial author name — brighter in dark mode */
[data-theme="dark"] .lp-test-name {
  color: #F1F5F9;
}
[data-theme="dark"] .lp-test-comment {
  color: #E2E8F0;
}
/* Star icons — ensure visibility */
.lp-star-on {
  color: #FBBF24 !important;
}
[data-theme="dark"] .lp-star-off {
  color: rgba(148,163,184,.25) !important;
}

/* ── 31.6  Feature cards — solid dark surface ────────────────── */
[data-theme="dark"] .lp-feature-card {
  background: #12182A;
  border-color: rgba(148,163,184,.12);
}
[data-theme="dark"] .lp-feature-card:hover {
  border-color: rgba(148,163,184,.2);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
[data-theme="dark"] .lp-feature-card h5 {
  color: #F1F5F9;
}
[data-theme="dark"] .lp-feature-card p {
  color: #94A3B8;
}

/* ── 31.7  Course cards — solid dark surface ──────────────────── */
[data-theme="dark"] .lp-course-card {
  background: #12182A;
  border-color: rgba(148,163,184,.12);
}
[data-theme="dark"] .lp-course-card:hover {
  box-shadow: 0 10px 36px rgba(0,0,0,.4);
  border-color: rgba(148,163,184,.2);
}
[data-theme="dark"] .lp-course-title {
  color: #F1F5F9;
}
[data-theme="dark"] .lp-course-desc {
  color: #94A3B8;
}
[data-theme="dark"] .lp-course-footer {
  border-top-color: rgba(148,163,184,.1);
}

/* ── 31.8  Stats bar — solid dark surface ─────────────────────── */
[data-theme="dark"] .lp-stats {
  background: #12182A;
  border-color: rgba(148,163,184,.12);
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
}
[data-theme="dark"] .lp-stat-num {
  color: #A78BFA;
}
[data-theme="dark"] .lp-stat-label {
  color: #94A3B8;
}
[data-theme="dark"] .lp-stat-divider {
  background: rgba(148,163,184,.15);
}

/* ── 31.9  Section headings — brighter in dark ────────────────── */
[data-theme="dark"] .lp-section-title {
  color: #F1F5F9;
}
[data-theme="dark"] .lp-section-sub {
  color: #94A3B8;
}

/* ── 31.10  Steps — solid dark ────────────────────────────────── */
[data-theme="dark"] .lp-step h6 {
  color: #F1F5F9;
}
[data-theme="dark"] .lp-step p {
  color: #94A3B8;
}
[data-theme="dark"] .lp-step-connector {
  background: rgba(148,163,184,.15);
}

/* ── 31.11  Global active button defense ──────────────────────── */
/*
 * Active interactive buttons must NEVER inherit faded opacity.
 * Only :disabled, .disabled, and [aria-disabled] get reduced opacity.
 */
.btn:not(:disabled):not(.disabled):not([aria-disabled="true"]),
a.btn:not(.disabled):not([aria-disabled="true"]),
.lp-btn-primary,
.lp-btn-ghost,
.cp-enroll-btn,
.cp-enroll-btn-card {
  opacity: 1;
  filter: none;
}
/* Ensure hover never reduces opacity */
.btn:not(:disabled):hover,
.btn:not(:disabled):focus-visible,
a.btn:not(.disabled):hover,
a.btn:not(.disabled):focus-visible {
  opacity: 1 !important;
}
/* Outline buttons — stronger in dark mode */
[data-theme="dark"] .btn-outline-primary {
  color: #A78BFA;
  border-color: rgba(139,92,246,.5);
}
[data-theme="dark"] .btn-outline-primary:hover {
  background: rgba(139,92,246,.15);
  color: #C4B5FD;
  border-color: rgba(139,92,246,.7);
}
[data-theme="dark"] .btn-outline-secondary {
  color: #94A3B8;
  border-color: rgba(148,163,184,.35);
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background: rgba(148,163,184,.1);
  color: #CBD5E1;
  border-color: rgba(148,163,184,.5);
}

/* ── 31.12  CTA section — richer depth ────────────────────────── */
/*
 * The CTA inner text area needs explicit z-index above the bg layer.
 */
.lp-cta-inner {
  position: relative;
  z-index: 2;
}
.lp-cta-bg {
  z-index: 0;
}
.lp-cta h2 {
  color: #FFFFFF;
}

/* ── 31.13  Hero gradient — deeper for dark mode readability ─── */
[data-theme="dark"] .lp-hero {
  background: linear-gradient(135deg, #080816 0%, #0f0a2e 25%, #1e1b4b 55%, #4f46e5 85%, #7c3aed 100%);
}
[data-theme="dark"] .lp-cta {
  background: linear-gradient(135deg, #0f0a2e 0%, #1e1b4b 40%, #4f46e5 75%, #7c3aed 100%);
}

/* ── 31.14  Course preview hero — enroll button never faded ──── */
.cp-enroll-btn {
  opacity: 1 !important;
}
.cp-enroll-btn-card {
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §32  GLOBAL ACTIVE-BUTTON SAFETY NET
   ─────────────────────────────────────────────────────────────────
   Defensive last-line rule. Every active button or button-like link
   must look clickable: opacity 1, no greyscale, no `pointer-events:
   none`, and cursor:pointer.

   The selector chain explicitly EXCLUDES every legitimate disabled
   marker so true disabled states keep their reduced look. Order:

     1. Component-level rules win at lower specificity but provide
        the design.
     2. This safety net ONLY enforces "not visually disabled" — it
        does not override colors, backgrounds, or borders.

   Touched markers (kept as-is):
     :disabled            (form buttons)
     [aria-disabled=true] (links acting as disabled buttons)
     .disabled            (Bootstrap-style)
     .btn-disabled        (defensive — for any future variant)
   ═══════════════════════════════════════════════════════════════ */

button:not(:disabled):not([aria-disabled="true"]):not(.disabled),
.btn:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.btn-disabled),
a.btn:not([aria-disabled="true"]):not(.disabled),
[class*="btn-"]:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.btn-disabled),
.lp-btn-primary, .lp-btn-ghost,
.lp-final-btn, .lp-final-btn--primary, .lp-final-btn--ghost,
.lp-cert-cta,
.rs-btn, .rs-btn--retry, .rs-btn--ghost,
.qr-act-btn, .qr-act-ghost, .qr-act-primary,
.sd-hero-btn, .sd-hero-btn--primary, .sd-hero-btn--ghost {
  opacity: 1;
  filter: none;
  cursor: pointer;
}

/* Icons inside any active button must inherit the button's text colour
   and stay fully opaque — fixes the "faded icon on white button" bug. */
button:not(:disabled):not([aria-disabled="true"]):not(.disabled) > i,
.btn:not(:disabled):not([aria-disabled="true"]):not(.disabled) > i,
.btn:not(:disabled):not([aria-disabled="true"]):not(.disabled) > .bi,
a.btn:not([aria-disabled="true"]):not(.disabled) > i,
a.btn:not([aria-disabled="true"]):not(.disabled) > .bi,
[class*="btn-"]:not(:disabled):not([aria-disabled="true"]):not(.disabled) > i,
[class*="btn-"]:not(:disabled):not([aria-disabled="true"]):not(.disabled) > .bi,
.lp-btn-primary > i, .lp-btn-ghost > i,
.lp-final-btn > i, .lp-cert-cta > i,
.rs-btn > i, .qr-act-btn > i, .sd-hero-btn > i {
  color: currentColor;
  opacity: 1;
}

/* Minimum accessible tap target — only applied where a component
   hasn't already specified its own height. */
.lp-btn-primary,
.lp-btn-ghost,
.lp-final-btn,
.lp-cert-cta {
  min-height: 44px;
}

/* Re-assert disabled visuals so the safety net above can never override
   a true disabled state. This block intentionally repeats the §29.1
   intent at higher specificity. */
button:disabled,
button[aria-disabled="true"],
.btn:disabled,
.btn[aria-disabled="true"],
.btn.disabled,
a.btn[aria-disabled="true"],
a.btn.disabled,
[class*="btn-"]:disabled,
[class*="btn-"][aria-disabled="true"],
[class*="btn-"].disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(.2) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ── 32.1  Buttons on brand-gradient backgrounds ─────────────────
   Any button placed inside .lp-cta, .lp-final, or any element
   styled as the purple/indigo/pink brand gradient must use
   high-contrast text. Prevents the "purple text on purple" trap. */
.lp-cta .lp-btn-primary,
.lp-final .lp-final-btn--primary {
  color: #6D28D9 !important;
  background: #ffffff !important;
}
.lp-cta .lp-btn-primary:hover,
.lp-final .lp-final-btn--primary:hover {
  color: #6D28D9 !important;
}
/* DEBUG / CONTRAST-SPRINT FIX: these parent-scoped rules (.lp-final ...) beat
 * the inline <style> on SPECIFICITY (0,2,0 vs 0,1,0), so the inline border bump
 * never showed. Brighten border to .85 + add text-shadow so the ghost CTA on
 * the gradient final-CTA band is clearly clickable, not disabled. */
.lp-cta .lp-btn-ghost,
.lp-final .lp-final-btn--ghost {
  color: #ffffff !important;
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.85) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  opacity: 1 !important;
}
.lp-cta .lp-btn-ghost *,
.lp-final .lp-final-btn--ghost * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}
.lp-cta .lp-btn-ghost:hover,
.lp-final .lp-final-btn--ghost:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,.30) !important;
  border-color: #ffffff !important;
}

/* ── 32.1b  Certificate CTA — fix sub-AA white-on-light-purple ────────
 * DEBUG / CONTRAST-SPRINT FIX (real root cause for "Sertifikatlı kursları
 * gör" looking faded):
 *   The inline gradient ended in #A855F7 / #EC4899 (light purple + pink).
 *   White text on those stops measures only ~2.6:1 — BELOW WCAG AA (4.5:1) —
 *   so the label genuinely renders low-contrast / "disabled-looking". This
 *   was NOT a parent opacity/filter issue; the button is fully active.
 *
 * Fix: shift the gradient to darker BRAND purples (#5B21B6 → #6D28D9 →
 *   #7C3AED). White now clears ~4.6–6.5:1 across the whole button. Pink was
 *   the worst offender and is dropped from the fill; brand purple identity is
 *   preserved. Solid #FFFFFF text + text-shadow guarantees crisp contrast.
 *   Declared here (external sheet + !important) so it wins over the inline
 *   <style> in Home/Index.cshtml regardless of specificity. */
.lp-cert-cta {
  background: linear-gradient(135deg, #5B21B6 0%, #6D28D9 50%, #7C3AED 100%) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  border-color: rgba(255,255,255,.55) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.32);
}
.lp-cert-cta:hover {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 50%, #8B47F0 100%) !important;
  color: #ffffff !important;
  filter: brightness(1.06) !important;
}
.lp-cert-cta > i {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* ── 32.2  Focus-visible default for every button-like control ──
   Components may override; this guarantees there is ALWAYS a ring. */
button:focus-visible,
.btn:focus-visible,
a.btn:focus-visible,
[class*="btn-"]:focus-visible {
  outline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════════
   §33  PREMIUM ACTION-BUTTON SYSTEM  (.btn-action)
   One consistent, confident action button for Grade / Review / Approve /
   Manage / Open / Continue etc. Lives in shared.css (static, cache-busted) so it
   applies on a browser refresh with no rebuild. Dark + light parity by design
   (solid gradient + white text reads on any background).
   ════════════════════════════════════════════════════════════════ */
.btn-action {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: linear-gradient(135deg, #8B5CF6, #A855F7);
  color: #ffffff !important; -webkit-text-fill-color: #ffffff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px;
  padding: .55rem 1.15rem; min-height: 42px;
  font-weight: 700; font-size: .85rem; line-height: 1; text-decoration: none;
  box-shadow: 0 12px 32px rgba(168,85,247,.30), inset 0 1px 0 rgba(255,255,255,.22);
  cursor: pointer; opacity: 1; filter: none;
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), filter .15s;
}
.btn-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(168,85,247,.40), inset 0 1px 0 rgba(255,255,255,.28);
  filter: brightness(1.06);
  color: #ffffff !important;
}
.btn-action:active { transform: translateY(0); filter: brightness(1); }
.btn-action:focus-visible { outline: 3px solid rgba(168,85,247,.6); outline-offset: 2px; }
/* Icons always match the text and are never faded (Phase 6) */
.btn-action > i, .btn-action > .bi, .btn-action i, .btn-action .bi {
  color: currentColor !important; opacity: 1 !important;
}
.btn-action svg, .btn-action svg * { fill: currentColor; stroke: currentColor; }
/* Smaller variant for dense rows */
.btn-action--sm { padding: .4rem .9rem; min-height: 36px; font-size: .8rem; border-radius: 11px; box-shadow: 0 8px 22px rgba(168,85,247,.28), inset 0 1px 0 rgba(255,255,255,.2); }
/* TRUE disabled — ONLY genuinely disabled buttons may look faded (Phase 4) */
.btn-action:disabled, .btn-action.disabled, .btn-action[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; pointer-events: none;
  box-shadow: none; filter: grayscale(.2); transform: none;
}

/* ── 33.1  Grade button (Phase 7) — adopt the premium action look ──
   !important beats any stale inline .ug-grade-btn from a not-yet-rebuilt view,
   so the Grade button becomes confident on a plain refresh. */
.ug-grade-btn {
  background: linear-gradient(135deg, #8B5CF6, #A855F7) !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 13px !important; min-height: 42px;
  font-weight: 700 !important;
  box-shadow: 0 12px 32px rgba(168,85,247,.30), inset 0 1px 0 rgba(255,255,255,.22) !important;
  opacity: 1 !important; filter: none;
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), filter .15s !important;
}
.ug-grade-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(168,85,247,.40), inset 0 1px 0 rgba(255,255,255,.28) !important;
  filter: brightness(1.06);
  color: #ffffff !important;
}
.ug-grade-btn:active { transform: translateY(0); filter: brightness(1); }
.ug-grade-btn:focus-visible { outline: 3px solid rgba(168,85,247,.6); outline-offset: 2px; }
.ug-grade-btn i, .ug-grade-btn .bi { color: currentColor !important; opacity: 1 !important; }

/* ── 33.2  Enroll-card button — purple primary on a NEUTRAL card → align to
   the system. It was the old #6366f1→#7c3aed gradient with a faded-on-hover
   (opacity:.9). Now: system gradient + lift-on-hover. (The other enroll button,
   .cp-enroll-btn, is white-on-hero and is deliberately left alone.) */
.cp-enroll-btn-card {
  background: linear-gradient(135deg, #8B5CF6, #A855F7) !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 12px 32px rgba(168,85,247,.30), inset 0 1px 0 rgba(255,255,255,.22) !important;
  opacity: 1 !important;
}
.cp-enroll-btn-card:hover {
  opacity: 1 !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(168,85,247,.40), inset 0 1px 0 rgba(255,255,255,.28) !important;
  filter: brightness(1.06);
}
.cp-enroll-btn-card:focus-visible { outline: 3px solid rgba(168,85,247,.6); outline-offset: 2px; }
.cp-enroll-btn-card i, .cp-enroll-btn-card .bi { color: currentColor !important; opacity: 1 !important; }

/* ==========================================================================
   34  GLOBAL PREMIUM CONSISTENCY LAYER
   Shared polish for legacy Bootstrap surfaces without changing page markup.
   ========================================================================== */

.card.border-0.shadow-sm,
.card.shadow-sm:not(.auth-card),
.surface-card,
.adm-card {
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, .88), var(--surface-card));
  box-shadow: 0 14px 42px rgba(var(--brand-primary-rgb), .075), 0 2px 8px rgba(15, 23, 42, .04) !important;
}

[data-theme="dark"] .card.border-0.shadow-sm,
[data-theme="dark"] .card.shadow-sm:not(.auth-card),
[data-theme="dark"] .surface-card,
[data-theme="dark"] .adm-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), var(--surface-card));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35), 0 0 18px rgba(var(--brand-primary-rgb), .05) !important;
}

.card.border-0.shadow-sm,
.card.shadow-sm:not(.auth-card) {
  overflow: hidden;
}

.card.border-0.shadow-sm .card-header,
.card.shadow-sm:not(.auth-card) .card-header {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, .45);
}

.card.border-0.shadow-sm .card-footer,
.card.shadow-sm:not(.auth-card) .card-footer {
  border-color: var(--border-soft);
}

.course-card {
  border-color: rgba(var(--brand-primary-rgb), .10);
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), var(--surface-card));
  box-shadow: 0 14px 42px rgba(var(--brand-primary-rgb), .08), 0 2px 8px rgba(15, 23, 42, .04);
}

[data-theme="dark"] .course-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), var(--surface-card));
  border-color: rgba(255, 255, 255, .075);
}

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

.course-card-img,
.course-card-img-placeholder {
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 176px;
}

.course-card-img-placeholder {
  opacity: 1;
  color: var(--brand-primary);
  background:
    radial-gradient(circle at 24% 18%, rgba(var(--brand-secondary-rgb), .14), transparent 34%),
    linear-gradient(135deg, rgba(var(--brand-primary-rgb), .08), rgba(var(--brand-primary-rgb), .16));
}

.course-card-img-placeholder i,
.course-card-img-placeholder .bi {
  color: currentColor;
  opacity: .88;
}

.course-card-body .btn {
  margin-top: auto;
}

.table-responsive {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-card-solid);
  box-shadow: var(--shadow-soft);
  overflow: auto;
}

.adm-card .table-responsive,
.comm-panel .table-responsive,
.card .table-responsive,
.surface-card .table-responsive {
  box-shadow: none;
}

[data-theme="dark"] .table-responsive {
  background: rgba(255, 255, 255, .025);
}

.table-responsive > .table {
  margin-bottom: 0;
}

.table:not(.adm-table) {
  color: var(--text-main);
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-main);
  --bs-table-border-color: var(--border-soft);
}

.table:not(.adm-table) thead th {
  color: var(--text-muted);
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom-color: var(--border-soft);
  background: rgba(var(--brand-primary-rgb), .025);
  white-space: nowrap;
}

.table:not(.adm-table) tbody td,
.table:not(.adm-table) tbody th {
  color: var(--text-main);
  border-color: var(--border-soft);
  vertical-align: middle;
}

.table:not(.adm-table) tbody tr {
  transition: background .15s var(--ease-out);
}

.table:not(.adm-table) tbody tr:hover {
  background: rgba(var(--brand-primary-rgb), .045);
}

.list-group-item {
  border-radius: var(--radius-md);
}

.accordion-item.shadow-sm,
.list-group-item.border {
  border: 1px solid var(--border-soft) !important;
  box-shadow: var(--shadow-soft) !important;
}

.alert.alert-light.border {
  color: var(--text-main);
  border-color: var(--border-soft) !important;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .58);
}

[data-theme="dark"] .alert.alert-light.border {
  background: rgba(255, 255, 255, .04);
}

.empty-state-icon,
.adm-empty-state .adm-empty-icon {
  border: 1px solid rgba(var(--brand-primary-rgb), .12);
}

.adm-empty-state,
.comm-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
}

.adm-empty-state > *,
.comm-empty > * {
  max-width: 540px;
}

.btn-primary > i,
.btn-primary > .bi,
.btn-success > i,
.btn-success > .bi,
.btn-outline-primary > i,
.btn-outline-primary > .bi,
.btn-outline-secondary > i,
.btn-outline-secondary > .bi {
  color: currentColor;
  opacity: 1;
}

.btn-primary,
.btn-success {
  box-shadow: 0 10px 26px rgba(var(--brand-primary-rgb), .20);
}

.btn-primary:hover,
.btn-success:hover {
  box-shadow: 0 14px 34px rgba(var(--brand-primary-rgb), .28);
}

@media (max-width: 767.98px) {
  .container > .d-flex.justify-content-between.align-items-center.mb-4,
  .container > .d-flex.align-items-start.justify-content-between.mb-4 {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 1rem;
  }

  .container > .d-flex.justify-content-between.align-items-center.mb-4 > .btn,
  .container > .d-flex.align-items-start.justify-content-between.mb-4 > .btn,
  .container > .d-flex.align-items-start.justify-content-between.mb-4 > .d-flex {
    width: 100%;
  }

  .container > .d-flex.align-items-start.justify-content-between.mb-4 > .d-flex .btn {
    flex: 1 1 160px;
  }

  .course-card-img,
  .course-card-img-placeholder {
    min-height: 148px;
  }

  .table-responsive {
    border-radius: var(--radius-md);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §  Soft status pills  (opt-in — does NOT override Bootstrap .badge)
   Reusable, theme-aware status chips for tables/cards. Use:
     <span class="badge-soft badge-soft--success"><i class="bi bi-check"></i>Passed</span>
   ═══════════════════════════════════════════════════════════════════════ */
.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .3rem .62rem;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
}
.badge-soft i { font-size: .92em; }

.badge-soft--success { background: rgba(34, 197, 94, .12);  color: #15803d; border-color: rgba(34, 197, 94, .22); }
.badge-soft--danger  { background: rgba(239, 68, 68, .12);  color: #b91c1c; border-color: rgba(239, 68, 68, .22); }
.badge-soft--warning { background: rgba(245, 158, 11, .14); color: #b45309; border-color: rgba(245, 158, 11, .24); }
.badge-soft--info    { background: rgba(6, 182, 212, .12);  color: #0e7490; border-color: rgba(6, 182, 212, .22); }
.badge-soft--primary { background: rgba(var(--brand-primary-rgb), .12); color: var(--brand-primary); border-color: rgba(var(--brand-primary-rgb), .22); }
.badge-soft--neutral { background: rgba(100, 116, 139, .12); color: #475569; border-color: rgba(100, 116, 139, .20); }

[data-theme="dark"] .badge-soft--success { background: rgba(34, 197, 94, .15);  color: #4ade80; border-color: rgba(34, 197, 94, .25); }
[data-theme="dark"] .badge-soft--danger  { background: rgba(239, 68, 68, .15);  color: #f87171; border-color: rgba(239, 68, 68, .25); }
[data-theme="dark"] .badge-soft--warning { background: rgba(245, 158, 11, .15); color: #fbbf24; border-color: rgba(245, 158, 11, .25); }
[data-theme="dark"] .badge-soft--info    { background: rgba(6, 182, 212, .15);  color: #22d3ee; border-color: rgba(6, 182, 212, .25); }
[data-theme="dark"] .badge-soft--primary { background: rgba(var(--brand-primary-rgb), .18); color: #A78BFA; border-color: rgba(var(--brand-primary-rgb), .28); }
[data-theme="dark"] .badge-soft--neutral { background: rgba(148, 163, 184, .15); color: #cbd5e1; border-color: rgba(148, 163, 184, .22); }

/* Late shared compatibility guards retained from the former global bundle. */

[data-theme="light"] .pagination .page-link {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border-color: rgba(129, 140, 248, .18);
    background: rgba(255, 255, 255, .88);
    color: #475569;
    box-shadow: 0 8px 18px -16px rgba(30, 64, 175, .30);
}

[data-theme="light"] .pagination .page-link:hover,
[data-theme="light"] .pagination .page-link:focus {
    color: #4f46e5;
    border-color: rgba(99, 102, 241, .32);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}

[data-theme="light"] .pagination .page-item.active .page-link {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 0 12px 24px -16px rgba(79, 70, 229, .55);
}

[data-theme="light"] .pagination .page-item.disabled .page-link {
    color: #94a3b8;
    background: rgba(241, 245, 249, .70);
    border-color: rgba(148, 163, 184, .14);
}

/* Landing support CTA: keep the mail action crisp over its gradient in every state. */
.course-image-frame,
.course-card-img-placeholder,
.cc-thumb-placeholder,
.sd-course-image-placeholder,
.adm-course-thumb,
.adm-course-detail-cover,
.instructor-course-cover,
.student-course-cover,
.cp-hero-img-wrap,
.cp-enroll-card {
  position: relative;
}

img[data-course-image] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  color: transparent;
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 1;
}

img[data-course-image].is-loaded {
  opacity: 1;
}

img[data-course-image][hidden],
[data-course-image-placeholder][hidden] {
  display: none !important;
}

[data-course-image-placeholder] {
  pointer-events: none;
}

[data-course-image-placeholder]:not([hidden]) {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.lp-contact-btn--primary,
.lp-contact-btn--primary:link,
.lp-contact-btn--primary:visited,
.lp-contact-btn--primary:hover,
.lp-contact-btn--primary:focus,
.lp-contact-btn--primary:focus-visible,
.lp-contact-btn--primary:active,
.lp-contact-btn--primary *,
.lp-contact-btn--primary i,
.lp-contact-btn--primary .bi,
.lp-contact-btn--primary span,
.lp-contact-btn--primary svg {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  opacity: 1 !important;
}

.lp-contact-btn--primary svg,
.lp-contact-btn--primary svg * {
  fill: currentColor;
  stroke: currentColor;
}

/* Shared password UX */
.password-field {
  position: relative;
  display: flex;
  align-items: center;
}
.password-field input {
  width: 100%;
  padding-right: 3.25rem !important;
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: .25rem;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: .78;
  transition: opacity .16s ease, color .16s ease, box-shadow .16s ease;
}
.password-toggle:hover {
  opacity: 1;
  color: var(--text-main);
}
.password-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .22);
}
.password-toggle i {
  font-size: 1.05rem;
  pointer-events: none;
}
.password-strength,
.password-match {
  display: grid;
  gap: .3rem;
  min-height: 1.1rem;
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 800;
}
.password-strength-bar {
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, .25);
}
.password-strength-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: transparent;
  transition: width .18s ease, background-color .18s ease;
}
.password-strength.is-weak .password-strength-bar span { background: #dc2626; }
.password-strength.is-medium .password-strength-bar span { background: #f97316; }
.password-strength.is-strong .password-strength-bar span { background: #16a34a; }
.password-strength.is-very-strong .password-strength-bar span { background: #2563eb; }
.password-strength.is-weak .password-strength-text { color: #dc2626; }
.password-strength.is-medium .password-strength-text { color: #f97316; }
.password-strength.is-strong .password-strength-text { color: #16a34a; }
.password-strength.is-very-strong .password-strength-text { color: #2563eb; }
.password-match.is-match { color: #16a34a; }
.password-match.is-mismatch { color: #dc2626; }

/* CampusFlow certificate */
.certificate-detail-page {
  --cf-navy: #0F2747;
  --cf-gold: #C8A86B;
  --cf-ink: #243247;
  --cf-muted: #697386;
  background: #f4f6f8;
  min-height: 100vh;
  padding: 2rem 1rem 3rem;
}
.certificate-actions {
  max-width: 1120px;
  margin: 0 auto 1rem;
  display: flex;
  justify-content: space-between;
  gap: .75rem;
}
.cf-certificate {
  position: relative;
  overflow: hidden;
  max-width: 1120px;
  aspect-ratio: 1.414 / 1;
  margin: 0 auto;
  padding: clamp(1.2rem, 3vw, 2.4rem);
  background: linear-gradient(135deg, #fff 0%, #fafafa 100%);
  border: 2px solid var(--cf-navy);
  box-shadow: 0 20px 60px rgba(15, 39, 71, .08);
  color: var(--cf-ink);
}
.cf-certificate::before {
  content: "";
  position: absolute;
  inset: .55rem;
  border: 1px solid var(--cf-gold);
  pointer-events: none;
}
.cf-watermark {
  position: absolute;
  right: 7%;
  top: 20%;
  font-size: clamp(8rem, 22vw, 15rem);
  line-height: 1;
  font-weight: 900;
  color: rgba(15, 39, 71, .04);
}
.cf-cert-header,
.cf-cert-footer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
}
.cf-brand {
  grid-column: 2;
  text-align: center;
  color: var(--cf-navy);
}
.cf-brand strong {
  display: block;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  letter-spacing: 0;
}
.cf-brand span,
.cf-cert-id span {
  display: block;
  font-size: .72rem;
  letter-spacing: .16em;
}
.cf-cert-id {
  grid-column: 3;
  justify-self: end;
  text-align: right;
  color: var(--cf-navy);
}
.cf-cert-id strong {
  font-size: clamp(.75rem, 1.3vw, 1rem);
}
.cf-cert-title {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: clamp(.6rem, 2vw, 1.3rem);
  color: var(--cf-navy);
}
.cf-cert-title i {
  color: var(--cf-gold);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
}
.cf-cert-title h1 {
  margin: .35rem 0 0;
  font-size: clamp(2rem, 5vw, 4.1rem);
  font-weight: 800;
  letter-spacing: .18em;
}
.cf-cert-title p {
  margin: 0;
  color: var(--cf-gold);
  font-weight: 700;
  letter-spacing: .38em;
}
.cf-cert-body {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: clamp(.8rem, 2vw, 1.4rem) auto 0;
}
.cf-cert-body p {
  margin: .45rem 0;
  color: var(--cf-muted);
  font-size: clamp(.82rem, 1.5vw, 1.08rem);
}
.cf-cert-body h2 {
  margin: .25rem 0;
  color: var(--cf-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
}
.cf-gold-rule {
  display: block;
  width: 82px;
  height: 2px;
  margin: .35rem auto .65rem;
  background: var(--cf-gold);
}
.cf-course-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: .7rem auto;
  padding: clamp(.7rem, 1.6vw, 1rem) 1.4rem;
  max-width: 620px;
  background: #f2f5f8;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: var(--cf-navy);
}
.cf-course-block i {
  color: var(--cf-navy);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
}
.cf-course-block strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.2rem, 2.6vw, 2rem);
}
.cf-description {
  max-width: 620px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.cf-meta {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 780px;
  margin: clamp(.75rem, 2vw, 1.4rem) auto 0;
}
.cf-meta div {
  padding: 0 .8rem;
  text-align: center;
  border-right: 1px solid #d8c8a8;
}
.cf-meta div:last-child {
  border-right: 0;
}
.cf-meta dt {
  color: var(--cf-muted);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cf-meta dd {
  margin: .2rem 0 0;
  color: var(--cf-navy);
  font-weight: 700;
  font-size: clamp(.72rem, 1.35vw, 1rem);
}
.cf-cert-footer {
  margin-top: clamp(.8rem, 2vw, 1.5rem);
  align-items: end;
}
.cf-signature {
  color: var(--cf-navy);
}
.cf-signature strong {
  display: block;
  width: 180px;
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--cf-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-style: italic;
  font-weight: 400;
}
.cf-signature span,
.cf-signature em,
.cf-verify strong,
.cf-verify a {
  display: block;
  font-size: .75rem;
}
.cf-signature span,
.cf-verify strong {
  margin-top: .35rem;
  color: var(--cf-muted);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cf-signature em {
  color: var(--cf-navy);
  font-style: normal;
  font-weight: 700;
}
.cf-seal {
  justify-self: center;
  width: clamp(70px, 10vw, 92px);
  height: clamp(70px, 10vw, 92px);
  border: 1px solid var(--cf-gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--cf-navy);
  background: #fff;
  padding: .65rem;
}
.cf-seal span,
.cf-seal small {
  font-size: clamp(.38rem, .8vw, .52rem);
  letter-spacing: .12em;
}
.cf-seal strong {
  font-size: clamp(1.2rem, 2.8vw, 2rem);
}
.cf-verify {
  justify-self: end;
  text-align: right;
  color: var(--cf-navy);
}
.cf-qr {
  margin-left: auto;
  width: clamp(52px, 7vw, 76px);
  height: clamp(52px, 7vw, 76px);
  border: 1px solid var(--cf-navy);
  display: grid;
  place-items: center;
  font-size: clamp(2rem, 5vw, 3.6rem);
  background: #fff;
}
.cf-verify a {
  color: var(--cf-navy);
  text-decoration: none;
}
.certificate-verify-page {
  min-height: 100vh;
  padding: 4rem 1rem;
  background: #f5f7fa;
}
.certificate-verify-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem;
  background: #fff;
  border: 1px solid #d8c8a8;
  border-top: 5px solid #0F2747;
  color: #243247;
}
.certificate-verify-brand {
  color: #0F2747;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.certificate-status {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
}
.certificate-status.valid {
  color: #14532d;
  background: #dcfce7;
}
.certificate-status.invalid {
  color: #7f1d1d;
  background: #fee2e2;
}
.certificate-verify-shell h1 {
  color: #0F2747;
  margin: 1rem 0 1.5rem;
}
.certificate-verify-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
}
.certificate-verify-grid div {
  padding: 1rem;
  border: 1px solid #e5e7eb;
}
.certificate-verify-grid dt {
  color: #697386;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.certificate-verify-grid dd {
  margin: .3rem 0 0;
  color: #0F2747;
  font-weight: 700;
}
@media (max-width: 720px) {
  .certificate-detail-page {
    padding-inline: .5rem;
  }
  .cf-certificate {
    padding: 1rem;
  }
  .cf-meta {
    grid-template-columns: repeat(2, 1fr);
    row-gap: .5rem;
  }
  .cf-meta div:nth-child(2) {
    border-right: 0;
  }
  .certificate-verify-grid {
    grid-template-columns: 1fr;
  }
}
@media print {
  .certificate-actions {
    display: none;
  }
  .certificate-detail-page {
    background: #fff;
    padding: 0;
  }
  .cf-certificate {
    box-shadow: none;
    max-width: none;
  }
}