/* ========================================
   MUDBLAZOR OVERRIDES - GLOBAL CSS
   ========================================
   All rules targeting MudBlazor internal classes (.mud-*)
   MUST be in global CSS. Scoped .razor.css files silently
   fail because CSS isolation adds [b-xxx] attributes that
   MudBlazor internal elements never receive.
   ======================================== */


/* ----------------------------------------
   MainLayout - Toolbar & Menu
   ---------------------------------------- */

.no-quiz-selected .mud-icon-root,
.auth-prompt .mud-icon-root {
    color: rgba(var(--glytic-primary-rgb), 0.5);
}

.auth-expand-btn .mud-button-start-icon {
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.mud-menu .mud-paper {
    background: var(--glytic-bg-medium) !important;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.2) !important;
    backdrop-filter: blur(10px);
}

.mud-menu .mud-list-item:hover {
    background: rgba(var(--glytic-primary-rgb), 0.1) !important;
}


/* ----------------------------------------
   AdminDashboard - Cards, Tabs, Tables
   ---------------------------------------- */

.admin-breadcrumb .mud-breadcrumbs {
    color: rgba(224, 230, 237, 0.6);
    font-size: 0.9rem;
}

.admin-breadcrumb .mud-breadcrumbs a {
    color: var(--glytic-primary);
    text-decoration: none;
}

.admin-breadcrumb .mud-breadcrumbs a:hover {
    text-decoration: underline;
}

.action-card .mud-card-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.action-card .mud-icon-root {
    font-size: 3rem !important;
    margin-bottom: 1rem !important;
}

.action-card .mud-typography-h6 {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.dashboard-tabs .mud-tabs .mud-tab {
    font-weight: 600;
}

.dashboard-tabs .mud-tabs .mud-tab-slider {
    background: var(--mud-palette-primary);
}

.dashboard-tabs .mud-tab-panel {
    padding: 0;
}

.admin-dashboard .mud-table th {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-grey);
}

.admin-dashboard .mud-table td {
    vertical-align: middle;
}

.loading-container .mud-progress-circular {
    color: var(--mud-palette-primary);
}

.admin-dashboard .mud-grid-item {
    padding: 0.75rem;
}

.admin-dashboard .mud-card:not(.action-card):hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.dashboard-actions .mud-icon-button {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.dashboard-actions .mud-icon-button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}


/* ----------------------------------------
   TestListComponent - Table & Chips
   ---------------------------------------- */

.test-list-component .mud-table-cell {
    border-bottom: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
}

.test-list-component .mud-table-row:hover {
    background: rgba(var(--glytic-primary-rgb), 0.05);
}

.test-list-component .mud-chip-animate {
    animation: test-list-pulse 2s infinite;
}

@keyframes test-list-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}


/* ----------------------------------------
   QuestionRating - Stars & Comments
   ---------------------------------------- */

.rating-stars-inline .mud-rating-item {
    font-size: 0.9rem !important;
}

.comment-icon-inline .mud-icon-root {
    font-size: 0.9rem !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

.comment-icon-inline:hover .mud-icon-root {
    color: rgba(255, 255, 255, 0.7) !important;
}


/* ----------------------------------------
   Settings Menu - Gear Dropdown
   ---------------------------------------- */

.settings-menu-gear .mud-menu-items {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-width: 180px !important;
    padding: 8px 0 !important;
    background: rgba(26, 34, 48, 0.98) !important;
    box-shadow: 0 4px 16px rgba(0, 132, 187, 0.15), 0 2px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px !important;
}

.settings-menu-gear .mud-menu-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 8px 16px !important;
    font-size: 15px !important;
    color: #f0f0f0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    transition: background 0.2s, color 0.2s;
}

.settings-menu-gear .mud-menu-item:hover {
    background: rgba(0, 132, 187, 0.08) !important;
    color: #0071c5 !important;
}

.settings-menu-gear .mud-icon-root {
    margin-right: 10px !important;
    font-size: 18px !important;
    color: #0071c5 !important;
}

.settings-menu-gear .mud-switch-root {
    margin-right: 10px !important;
}


/* ----------------------------------------
   QuizForge Dialog Baseline
   All MudDialog instances get the dark theme
   ---------------------------------------- */

.mud-dialog:not(.tt-sheet):not(.qf-auth-dialog) {
    background: var(--glytic-bg-medium);
    border: 1px solid var(--glytic-border-hover);
    border-radius: var(--glytic-border-radius-small);
    box-shadow: 0 24px 64px rgba(var(--qf-ink-rgb), 0.5);
    clip-path: none;
    filter: none;
    overflow: hidden;
    position: relative;
}

.mud-dialog:not(.tt-sheet):not(.qf-auth-dialog)::before {
    content: none;
    display: none;
}

.mud-dialog > * {
    position: relative;
    z-index: 1;
}

.mud-dialog .mud-dialog-title {
    background: transparent;
    border-bottom: 1px solid var(--glytic-border);
    color: var(--glytic-text-primary);
    font-family: var(--glytic-font-heading);
    font-weight: 600;
    padding: 20px 24px;
}

.mud-dialog .mud-dialog-content {
    color: var(--glytic-text-secondary);
    padding: 24px;
}

.mud-dialog .mud-dialog-actions {
    border-top: 1px solid var(--glytic-border);
    padding: 16px 24px;
    gap: 8px;
}

/* Dialog buttons: sentence case + consistent shape. MudBlazor defaults to ALL-CAPS, which
   reads as unstyled. Scoped to the dialog (not .mud-dialog-actions) because the fragment-
   pattern dialogs render <MudDialogActions> as an unclassed custom element. House-wide. */
.mud-dialog .mud-button-root {
    font-weight: 600;
    letter-spacing: 0;
    border-radius: 8px;
    min-height: 44px;
}

.mud-dialog:not(.tt-sheet):not(.qf-auth-dialog) .mud-button-root {
    clip-path: none;
}

.mud-dialog:not(.tt-sheet):not(.qf-auth-dialog) .mud-dialog-actions .mud-button-root.mud-button-filled-primary {
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
}

.mud-dialog:not(.tt-sheet):not(.qf-auth-dialog) .mud-dialog-actions .mud-button-root.mud-button-outlined {
    border: 1px solid var(--glytic-border-hover);
    background: transparent;
    color: var(--glytic-text-primary);
    clip-path: none;
}

.mud-dialog:not(.tt-sheet):not(.qf-auth-dialog) .mud-dialog-actions .mud-button-root.mud-button-outlined::before {
    content: none;
}

.mud-dialog .mud-input-label,
.mud-dialog .mud-input-helper-text {
    color: rgba(201, 209, 217, 0.6) !important;
}

.mud-dialog .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(var(--glytic-primary-rgb), 0.15) !important;
}

.mud-dialog .mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(var(--glytic-primary-rgb), 0.3) !important;
}

.mud-dialog .mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: rgba(var(--glytic-primary-rgb), 0.5) !important;
}

.mud-dialog .mud-input {
    color: #e0e6ed !important;
}

.mud-dialog-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px);
}


/* ----------------------------------------
   RateExamDialog - Star Rating Modal
   ---------------------------------------- */

.rate-dialog-body {
    padding: 8px 0;
}

.rate-dialog-stars-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 0 20px;
}

.rate-dialog-prompt {
    color: rgba(201, 209, 217, 0.6);
    text-align: center;
}

.rate-dialog-stars .mud-rating-item {
    font-size: 2.2rem !important;
    transition: transform 0.15s ease;
}

.rate-dialog-stars .mud-rating-item:hover {
    transform: scale(1.15);
}

.rate-dialog-label {
    color: rgba(255, 193, 7, 0.85);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.rate-dialog-comment {
    margin-top: 4px;
}



/* ----------------------------------------
   AI Generate - Chip Overrides
   (Moved from unified-ai-generate.css)
   ---------------------------------------- */

.mud-chip-success {
    background: linear-gradient(135deg, #00c851, #00ff66);
    color: white;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.mud-chip-warning {
    background: linear-gradient(135deg, #ffbb33, #ffcc66);
    color: #333;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}


/* ========================================
   CONSOLIDATED RESPONSIVE OVERRIDES
   ======================================== */

/* MetricCard responsive */
@media (max-width: 960px) {
    .metric-card .mud-typography-h4,
    .enrichment-metric-card .mud-typography-h4 {
        font-size: 1.75rem;
    }

    .metric-icon .mud-icon-root {
        font-size: 2rem !important;
    }
}

/* All 768px overrides */
@media (max-width: 768px) {
    /* AdminDashboard */
    .action-card .mud-icon-root {
        font-size: 2.5rem !important;
    }

    .dashboard-header .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }

    /* QuestionRating */
    .rating-stars-inline .mud-rating-item {
        font-size: 0.8rem !important;
    }

    .comment-icon-inline .mud-icon-root {
        font-size: 0.8rem !important;
    }

    /* ExamDetail */
    .hero-cta .mud-paper {
        padding: 1rem !important;
    }

    .existing-exam-mode-card .mud-card-content {
        padding: 16px !important;
    }
}

/* All 600px overrides */
@media (max-width: 600px) {
    .metric-card .mud-typography-h4,
    .enrichment-metric-card .mud-typography-h4 {
        font-size: 1.5rem;
    }

    .metric-icon .mud-icon-root {
        font-size: 1.75rem !important;
    }
}

/* All 480px overrides */
@media (max-width: 480px) {
    /* MainLayout auth buttons */
    .login-btn .mud-button-label,
    .register-btn .mud-button-label {
        display: none;
    }

    /* AdminDashboard */
    .action-card .mud-icon-root {
        font-size: 2rem !important;
    }

    .action-card .mud-typography-h6 {
        font-size: 1rem;
    }

    /* QuestionRating */
    .rating-stars-inline .mud-rating-item {
        font-size: 0.75rem !important;
    }

    /* ExamDetail */
    .badge-row .mud-chip {
        font-size: 0.65rem !important;
    }
}


/* ----------------------------------------
   Homepage Sticky Fix
   MudBlazor layout ancestors must not create
   new stacking contexts or clip overflow,
   otherwise position:sticky breaks.
   body.homepage class is toggled by Index page.
   ---------------------------------------- */

body.homepage .mud-layout,
body.homepage .mud-main-content {
    overflow: visible !important;
    transform: none !important;
    contain: none !important;
    perspective: none !important;
    isolation: auto !important;
    will-change: auto !important;
    filter: none !important;
}




/* ========================================
   AUTH MODAL (AuthDialog)
   ========================================
   The MudDialog chrome is neutralized (transparent, no border/shadow); the visible card
   is the inner .qf-panel (.qf-panel--dialog), identical to the /login and /register pages.
   Scoped to .qf-auth-dialog so other dialogs are unaffected. */
.mud-overlay-scrim.mud-overlay-dark {
    background-color: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}
.mud-dialog-container:has(.qf-auth-dialog) {
    padding: 16px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
}
@media (min-width: 600px) {
    .mud-dialog-container:has(.qf-auth-dialog) { padding: 32px !important; }
}
.mud-dialog.qf-auth-dialog.mud-dialog-width-full {
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
}
.qf-auth-dialog .mud-dialog-content {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}
/* Float the close (X) button over the panel's top-right corner */
.qf-auth-dialog .mud-dialog-title {
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    background: transparent !important;
    border-bottom: none !important;
    position: absolute !important;
    top: 8px;
    right: 8px;
    z-index: 2;
}
.qf-auth-dialog .mud-dialog-title h6.mud-typography-h6:empty { display: none !important; }
.qf-auth-dialog .mud-dialog-title .mud-button-close { position: relative !important; top: unset !important; right: unset !important; opacity: 0.7; }
.qf-auth-dialog .mud-dialog-title .mud-button-close:hover { opacity: 1; }

/* ----------------------------------------
   Tutor study sheet (Client/Shared/TutorSheetDialog.razor)
   Opted out of the baseline above (:not(.tt-sheet)) so it can be a flat, edge-to-edge sheet on
   phones and a squared two-pane panel on desktop, without !important.
   ---------------------------------------- */
.mud-dialog.tt-sheet {
    max-width: 1120px;
    background: var(--glytic-bg-medium);
    border: 1px solid var(--glytic-border-hover);
    border-radius: var(--glytic-border-radius-small);
    box-shadow: 0 24px 64px rgba(var(--qf-ink-rgb), .5);
    overflow: hidden;
    animation: tt-sheet-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mud-dialog.tt-sheet .mud-dialog-content {
    padding: 0;
}

.mud-dialog.tt-sheet.mud-dialog-fullscreen {
    border: 0;
    border-radius: 0;
    animation: tt-sheet-up 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes tt-sheet-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to { opacity: 1; transform: none; }
}

@keyframes tt-sheet-up {
    from { opacity: 0.6; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mud-dialog.tt-sheet,
    .mud-dialog.tt-sheet.mud-dialog-fullscreen { animation: none; }
}

/* ========================================
   BUTTON SYSTEM: MudBlazor at the root (2026-09-23)
   Maps every MudButton / MudIconButton / MudFab / MudChip onto the button system in
   quizforge.css. Selectors copy MudBlazor's own specificity (two classes) so they win by
   load order only: any page or component rule still overrides them. Typography (sentence
   case, 600, no tracking) comes from the theme in Routes.razor, disabled colours from
   PaletteDark.ActionDisabled*.
   ======================================== */
.mud-button-root.mud-button {
    border-radius: var(--qf-btn-radius);
    min-height: var(--qf-btn-h-md);
    box-shadow: none;
}
.mud-button-root.mud-button-filled-size-small,
.mud-button-root.mud-button-outlined-size-small,
.mud-button-root.mud-button-text-size-small { min-height: var(--qf-btn-h-sm); }
.mud-button-root.mud-button-filled-size-large,
.mud-button-root.mud-button-outlined-size-large,
.mud-button-root.mud-button-text-size-large { min-height: var(--qf-btn-h-lg); }
.mud-button-root.mud-button:focus-visible { outline: var(--qf-btn-focus); outline-offset: 3px; }

/* Primary: ember with ink label. Primary, Secondary and Tertiary all resolve to the same
   role (Secondary/Tertiary are ember aliases since the 2026-09 purple retirement). */
.mud-button-filled.mud-button-filled-primary,
.mud-button-filled.mud-button-filled-secondary,
.mud-button-filled.mud-button-filled-tertiary {
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    font-weight: 700;
    --mud-ripple-color: var(--qf-ink);
}
.mud-button-filled.mud-button-filled-primary:hover,
.mud-button-filled.mud-button-filled-secondary:hover,
.mud-button-filled.mud-button-filled-tertiary:hover,
.mud-button-filled.mud-button-filled-primary:focus-visible,
.mud-button-filled.mud-button-filled-secondary:focus-visible,
.mud-button-filled.mud-button-filled-tertiary:focus-visible {
    background: var(--forge-gradient);
    color: var(--qf-ink);
}

/* Filled Default / Dark / Info: tonal and secondary (Info is the same teal as Primary). */
.mud-button-filled.mud-button-filled-default,
.mud-button-filled.mud-button-filled-dark {
    background: var(--qf-surface-tonal);
    border: 1px solid var(--qf-line);
    color: var(--glytic-text-primary);
}
.mud-button-filled.mud-button-filled-info {
    background: transparent;
    border: 1px solid var(--glytic-border-hover);
    color: var(--glytic-text-primary);
}
.mud-button-filled.mud-button-filled-default:hover,
.mud-button-filled.mud-button-filled-dark:hover,
.mud-button-filled.mud-button-filled-info:hover {
    background: var(--qf-surface-tonal-hover);
    border-color: var(--glytic-border-hover);
}

/* Status fills: white on #48bb78 was 2.43:1 and on #ffa726 1.94:1 -> tonal. */
.mud-button-filled.mud-button-filled-success {
    background: rgba(var(--glytic-success-rgb), .12);
    border: 1px solid rgba(var(--glytic-success-rgb), .45);
    color: var(--qf-success-text);
}
.mud-button-filled.mud-button-filled-warning {
    background: rgba(255, 167, 38, .12);
    border: 1px solid rgba(255, 167, 38, .45);
    color: var(--qf-warning-text);
}
.mud-button-filled.mud-button-filled-success:hover { background: rgba(var(--glytic-success-rgb), .2); }
.mud-button-filled.mud-button-filled-warning:hover { background: rgba(255, 167, 38, .2); }

/* Destructive confirm: bone on crimson-deep, 5.29:1 (white on #ff4757 was 3.34:1). */
.mud-button-filled.mud-button-filled-error {
    background: var(--qf-crimson-deep);
    border: 1px solid var(--qf-crimson-deep);
    color: var(--qf-bone);
}
.mud-button-filled.mud-button-filled-error:hover { background: #9E231D; }

/* Outlined: every colour becomes the teal-hairline secondary, except Error (destructive)
   and the status colours, which keep a tinted hairline and a readable label. Ember text on
   surfaces measured 3.93:1, so Secondary/Tertiary outlines lose the ember label. */
.mud-button-outlined.mud-button-outlined-default,
.mud-button-outlined.mud-button-outlined-primary,
.mud-button-outlined.mud-button-outlined-secondary,
.mud-button-outlined.mud-button-outlined-tertiary,
.mud-button-outlined.mud-button-outlined-info,
.mud-button-outlined.mud-button-outlined-dark,
.mud-button-outlined.mud-button-outlined-inherit {
    border: 1px solid var(--glytic-border-hover);
    color: var(--glytic-text-primary);
    --mud-ripple-color: var(--glytic-primary);
}
.mud-button-outlined.mud-button-outlined-default:hover,
.mud-button-outlined.mud-button-outlined-primary:hover,
.mud-button-outlined.mud-button-outlined-secondary:hover,
.mud-button-outlined.mud-button-outlined-tertiary:hover,
.mud-button-outlined.mud-button-outlined-info:hover,
.mud-button-outlined.mud-button-outlined-dark:hover,
.mud-button-outlined.mud-button-outlined-inherit:hover {
    border: 1px solid var(--glytic-primary);
    background-color: rgba(var(--glytic-primary-rgb), .08);
}
.mud-button-outlined.mud-button-outlined-error { border: 1px solid rgba(var(--qf-crimson-rgb), .55); color: var(--qf-crimson-text); }
.mud-button-outlined.mud-button-outlined-error:hover { border: 1px solid var(--qf-crimson-text); background-color: rgba(var(--qf-crimson-rgb), .1); }
.mud-button-outlined.mud-button-outlined-success { border: 1px solid rgba(var(--glytic-success-rgb), .45); color: var(--qf-success-text); }
.mud-button-outlined.mud-button-outlined-warning { border: 1px solid rgba(255, 167, 38, .45); color: var(--qf-warning-text); }

/* Text: the quiet recipe. Readable greys, underline on hover; ember text moves to spark. */
.mud-button-text.mud-button-text-default,
.mud-button-text.mud-button-text-primary,
.mud-button-text.mud-button-text-info,
.mud-button-text.mud-button-text-dark {
    color: var(--glytic-text-secondary);
    --mud-ripple-color: var(--glytic-primary);
}
.mud-button-text.mud-button-text-secondary,
.mud-button-text.mud-button-text-tertiary { color: var(--forge-spark); }
.mud-button-text.mud-button-text-error { color: var(--qf-crimson-text); }
.mud-button-text.mud-button-text-success { color: var(--qf-success-text); }
.mud-button-text.mud-button-text-warning { color: var(--qf-warning-text); }
.mud-button-text.mud-button-text-default:hover,
.mud-button-text.mud-button-text-primary:hover,
.mud-button-text.mud-button-text-info:hover,
.mud-button-text.mud-button-text-dark:hover {
    color: var(--glytic-text-primary);
    background-color: rgba(var(--glytic-primary-rgb), .06);
}

/* Icon buttons and FABs: 8px / 12px squares instead of circles. */
.mud-button-root.mud-icon-button { border-radius: var(--qf-btn-radius); }
.mud-button-root.mud-fab { border-radius: 12px; }

/* Chips: clickable chips are the filter pill; static chips read as labels (4px, no pill). */
.mud-chip.mud-clickable { border-radius: 999px; }
.mud-chip.mud-chip-size-small:not(.mud-clickable),
.mud-chip.mud-chip-size-medium:not(.mud-clickable) { border-radius: 4px; font-weight: 600; }

/* Disabled filled buttons: MudBlazor forces only background-color (!important), so the
   ember gradient image above would still paint under the grey label (1.08:1 measured on
   Test). Drop the image and border so the disabled plate reads as disabled. */
.mud-button-filled.mud-button-filled-success:disabled,
.mud-button-filled.mud-button-filled-warning:disabled,
.mud-button-filled.mud-button-filled-error:disabled,
.mud-button-filled.mud-button-filled-default:disabled {
    background-image: none;
    border-color: var(--qf-line);
}

/* Disabled primary (e.g. Continue before an email is typed): a muted ember plate, so the
   page's main action stays findable while plainly not ready. MudBlazor forces the base
   background-color with !important, so the tint rides on background-image over it.
   #E0E0E0 on the composited plate measures ~7.9:1. */
.mud-button-filled.mud-button-filled-primary:disabled,
.mud-button-filled.mud-button-filled-secondary:disabled,
.mud-button-filled.mud-button-filled-tertiary:disabled {
    background-image: linear-gradient(rgba(var(--forge-primary-rgb), .35), rgba(var(--forge-primary-rgb), .35));
    border-color: rgba(var(--forge-primary-rgb), .5);
    color: var(--glytic-text-secondary);
}

/* Tabs: MudTab hard-codes uppercase + tracking (it does not read the button typography
   variables). Sentence case 600; the active tab reads primary text, not ember (3.93:1). */
.mud-tabs .mud-tab {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}
.mud-tabs .mud-tab.mud-tab-active { color: var(--glytic-text-primary); }