/* ============================================================
   Theme tokens and global visual skin

   Keep here: fonts, :root design tokens, app-wide element
   typography, MudBlazor theme bridges, and color/type skin for
   global shell elements.

   Keep out: page layout geometry, feature-page rules, and reusable
   studio control internals.
   ============================================================ */

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope/manrope-variable.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces/fraunces-variable.ttf') format('truetype');
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Premium dark design system */
    --app-canvas-start: #07141B;
    --app-canvas-middle: #0B1F29;
    --app-canvas-end: #102A36;
    --app-surface: #12202A;
    --app-surface-raised: #162832;
    --app-surface-soft: rgba(255, 255, 255, 0.035);
    --app-surface-hover: rgba(255, 255, 255, 0.065);
    --app-control-surface-base: var(--app-surface-raised);
    --app-control-surface-hover:
        linear-gradient(var(--app-surface-hover), var(--app-surface-hover)),
        var(--app-control-surface-base);
    --app-control-surface-selected:
        linear-gradient(rgba(20, 184, 166, 0.10), rgba(20, 184, 166, 0.10)),
        var(--app-control-surface-base);
    --app-control-surface-disabled: #1A2D38;
    --app-text-primary: #E8F1F4;
    --app-text-strong: #F6FAFB;
    --app-text-secondary: #BACBD2;
    --app-text-muted: #9EB2BC;
    --app-on-accent: #031716;
    --app-on-dark-accent: #F8FBFC;
    --app-border-subtle: rgba(255, 255, 255, 0.06);
    --app-border-control: rgba(255, 255, 255, 0.08);
    --app-border-emphasis: rgba(255, 255, 255, 0.14);
    --app-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
    --app-shadow-control: 0 8px 24px rgba(0, 0, 0, 0.25);
    --app-shadow-float: 0 16px 42px rgba(0, 0, 0, 0.42);
    --app-focus-ring: 0 0 0 3px rgba(20, 184, 166, 0.18);
    --app-radius-surface: 20px;
    --app-radius-control: 16px;
    --app-radius-small: 12px;
    --app-motion-fast: 180ms;
    --app-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Compatibility palette used by existing feature styles. */
    --palette-neutral-0: var(--app-surface);
    --palette-neutral-25: #0F1E27;
    --palette-neutral-50: var(--app-canvas-start);
    --palette-neutral-100: #1A2D38;
    --palette-neutral-200: #243A46;

    --palette-slate-900: var(--app-text-strong);
    --palette-slate-800: var(--app-text-primary);
    --palette-slate-700: #CDDBE1;
    --palette-slate-600: var(--app-text-secondary);
    --palette-slate-500: var(--app-text-muted);
    --palette-slate-300: #405762;
    --palette-slate-200: #2A404B;

    --palette-sand-700: #617985;
    --palette-sand-400: #91A6B0;
    --palette-sand-300: var(--app-text-secondary);
    --palette-sand-200: #E0EAEE;
    --palette-sand-50: #F7FAFB;

    --palette-teal-700: #14B8A6;
    --palette-teal-600: #2DD4BF;
    --palette-primary-500: var(--palette-teal-700);
    --palette-primary: var(--palette-primary-500);
    --palette-info-500: #38BDF8;
    --palette-success-500: #4ADE80;
    --palette-purple-500: #A78BFA;
    --palette-warning-500: #FBBF24;
    --palette-danger-700: #F87171;
    --palette-error-700: #F87171;

    /* Palette alpha variants */
    --palette-neutral-0-a14: rgba(255, 255, 255, 0.14);

    --palette-slate-900-a38: rgba(3, 12, 17, 0.52);
    --palette-slate-900-a35: rgba(3, 12, 17, 0.46);
    --palette-slate-900-a10: rgba(3, 12, 17, 0.18);
    --palette-slate-800-a86: rgba(232, 241, 244, 0.86);
    --palette-slate-800-a24: rgba(232, 241, 244, 0.14);
    --palette-slate-800-a22: rgba(232, 241, 244, 0.12);
    --palette-slate-500-a92: rgba(127, 150, 162, 0.92);
    --palette-slate-500-a88: rgba(127, 150, 162, 0.88);
    --palette-slate-500-a82: rgba(127, 150, 162, 0.82);
    --palette-slate-500-a10: rgba(127, 150, 162, 0.10);
    --palette-slate-500-a08: rgba(127, 150, 162, 0.08);
    --palette-slate-300-a50: rgba(64, 87, 98, 0.50);
    --palette-slate-200-a95: rgba(255, 255, 255, 0.095);
    --palette-slate-200-a82: rgba(255, 255, 255, 0.082);
    --palette-slate-200-a72: rgba(255, 255, 255, 0.06);

    --palette-teal-700-a82: rgba(20, 184, 166, 0.82);
    --palette-teal-700-a68: rgba(20, 184, 166, 0.68);
    --palette-teal-700-a54: rgba(20, 184, 166, 0.54);
    --palette-teal-700-a38: rgba(20, 184, 166, 0.38);
    --palette-teal-700-a28: rgba(20, 184, 166, 0.28);
    --palette-teal-700-a25: rgba(20, 184, 166, 0.25);
    --palette-teal-700-a20: rgba(20, 184, 166, 0.20);

    --palette-info-500-a45: rgba(56, 189, 248, 0.45);
    --palette-success-500-a44: rgba(74, 222, 128, 0.44);
    --palette-purple-500-a64: rgba(167, 139, 250, 0.64);
    --palette-warning-500-a28: rgba(251, 191, 36, 0.28);
    --palette-warning-500-a14: rgba(251, 191, 36, 0.14);
    --palette-danger-700-a85: rgba(248, 113, 113, 0.85);

    --palette-overlay-900-a50: rgba(2, 8, 12, 0.72);
    --palette-overlay-800-a50: rgba(2, 8, 12, 0.68);
    --palette-black-a28: rgba(0, 0, 0, 0.35);

    /* Typography and responsive sizing contract */
    --font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Manrope', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --app-text-2xs: 11px;
    --app-text-xs: 13px;
    --app-text-sm: 14px;
    --app-text-base: 15px;
    --app-text-md: 16px;
    --app-text-lg: 18px;
    --app-text-xl: 22px;
    --app-text-2xl: 32px;
    --app-text-line-tight: 1.1;
    --app-text-line-control: 1.25;
    --app-text-line-body: 1.45;

    --app-control-height: 40px;
    --app-control-value-font-size: 14px;
    --app-control-label-font-size: var(--app-text-xs);
    --app-control-helper-font-size: var(--app-text-xs);
    --app-control-placeholder-font-size: var(--app-control-value-font-size);
    --app-control-inline-padding: 10px;
    --app-control-label-inline-padding: 4px;
    --app-control-label-inset: 10px;
    --app-control-icon-size: 18px;
    --app-control-width-sm: 220px;
    --app-control-width-xs: 90px;

    --app-toggle-height: var(--app-control-height);
    --app-toggle-compact-height: 34px;
    --app-toggle-dense-height: 30px;
    --app-toggle-font-size: var(--app-control-value-font-size);
    --app-toggle-compact-font-size: var(--app-text-sm);
    --app-toggle-dense-font-size: var(--app-text-xs);
    --app-toggle-gap: 8px;
    --app-toggle-compact-gap: 6px;
    --app-toggle-dense-gap: 5px;
    --app-toggle-inline-padding: var(--app-control-inline-padding);
    --app-toggle-compact-inline-padding: 8px;
    --app-toggle-dense-inline-padding: 6px;

    --app-button-height: var(--app-control-height);
    --app-button-touch-height: 40px;
    --app-button-font-size: 13px;
    --app-button-inline-padding: 12px;
    --app-action-button-height: 28px;
    --app-action-button-grid-height: 30px;
    --app-icon-button-size: var(--app-control-height);

    --app-dropdown-option-height: var(--app-control-height);
    --app-dropdown-option-font-size: var(--app-text-sm);
    --app-dropdown-selected-font-size: var(--app-control-value-font-size);
    --app-dropdown-placeholder-font-size: var(--app-control-placeholder-font-size);
    --app-dropdown-popover-max-height: 240px;

    --app-filter-height: 42px;
    --app-filter-mobile-height: 38px;
    --app-filter-font-size: var(--app-text-xs);
    --app-filter-count-font-size: var(--app-text-2xs);
    --app-filter-padding-block: 8px;
    --app-filter-padding-inline: 10px;

    --app-chip-font-size: var(--app-text-sm);
    --app-chip-height: 22px;
    --app-chip-compact-height: 20px;
    --app-chip-inline-padding: 8px;
    --app-chip-icon-size: 22px;
    --app-chip-icon-font-size: 16px;

    --app-nav-font-size: 14px;
    --app-page-title-font-size: clamp(1.65rem, 2vw, 2rem);
    --app-page-description-font-size: var(--app-text-xs);
    --app-empty-state-font-size: var(--app-text-base);
    --app-empty-state-padding: 20px;
    --app-inline-empty-padding: 16px;
    --app-message-font-size: 0.95rem;
    --app-preview-text-font-size: var(--app-text-sm);
    --app-selected-text-font-size: var(--app-text-md);
    --app-detail-text-font-size: var(--app-text-xs);
    --app-table-font-size: var(--app-text-sm);
    --app-table-heading-font-size: var(--app-text-sm);
    --app-table-meta-font-size: var(--app-text-xs);
    --app-schedule-cell-text-size: 9px;
    --app-schedule-cell-detail-size: 0.68rem;
    --app-schedule-cell-meta-size: 0.62rem;
    --app-schedule-cell-badge-size: 10px;
    --app-schedule-cell-count-size: 9px;

    /* Compatibility aliases. Prefer the app-* tokens for new sizing. */
    --font-size-xs: var(--app-text-xs);
    --font-size-sm: var(--app-text-sm);
    --font-size-base: var(--app-text-base);
    --font-size-md: var(--app-text-md);
    --font-size-lg: var(--app-text-lg);
    --font-size-xl: var(--app-text-xl);
    --font-size-2xl: var(--app-text-2xl);
    --posted-label-size: var(--app-control-value-font-size);
    --auth-label-size: var(--app-control-label-font-size);
    --studio-control-height: var(--app-control-height);
    --studio-control-value-font-size: var(--app-control-value-font-size);
    --studio-control-label-font-size: var(--app-control-label-font-size);
    --studio-control-inline-padding: var(--app-control-inline-padding);
    --studio-button-font-size: var(--app-button-font-size);
    --studio-nav-font-size: var(--app-nav-font-size);
    --studio-filter-font-size: var(--app-filter-font-size);
    --studio-filter-count-font-size: var(--app-filter-count-font-size);
    --studio-row-status-dot-size: 11px;
    --studio-card-grid-status-dot-size: 12px;
    --studio-chip-font-size: var(--app-chip-font-size);
    --studio-chip-height: var(--app-chip-height);
    --studio-chip-compact-height: var(--app-chip-compact-height);
    --studio-chip-inline-padding: var(--app-chip-inline-padding);
    --studio-chip-icon-size: var(--app-chip-icon-size);
    --studio-chip-icon-font-size: var(--app-chip-icon-font-size);
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --letter-spacing-tight: 0.01em;
    --letter-spacing-base: 0.015em;
    --letter-spacing-wide: 0.035em;
    --letter-spacing-wider: 0.065em;
    --letter-spacing-caps: 0.11em;

    /* Generic studio tone tokens */
    --studio-tone-default-accent: var(--palette-teal-700);
    --studio-tone-default-bg: rgba(20, 184, 166, 0.10);
    --studio-tone-default-border: var(--palette-teal-700-a38);
    --studio-tone-default-text: #5EEAD4;
    --studio-tone-default-count-bg: var(--palette-teal-700-a20);
    --studio-tone-default-ring: var(--palette-teal-700-a28);

    --studio-tone-1-accent: var(--palette-success-500);
    --studio-tone-1-bg: rgba(74, 222, 128, 0.10);
    --studio-tone-1-border: var(--palette-success-500-a44);
    --studio-tone-1-text: #86EFAC;
    --studio-tone-1-count-bg: rgba(74, 222, 128, 0.18);
    --studio-tone-1-ring: rgba(74, 222, 128, 0.28);

    --studio-tone-2-accent: var(--palette-warning-500);
    --studio-tone-2-bg: var(--palette-warning-500-a14);
    --studio-tone-2-border: var(--palette-warning-500-a28);
    --studio-tone-2-text: #FCD34D;
    --studio-tone-2-count-bg: rgba(251, 191, 36, 0.18);
    --studio-tone-2-ring: var(--palette-warning-500-a28);

    --studio-tone-3-accent: var(--palette-info-500);
    --studio-tone-3-bg: rgba(56, 189, 248, 0.10);
    --studio-tone-3-border: rgba(56, 189, 248, 0.38);
    --studio-tone-3-text: #7DD3FC;
    --studio-tone-3-count-bg: rgba(56, 189, 248, 0.18);
    --studio-tone-3-ring: var(--palette-info-500-a45);

    --studio-tone-4-accent: var(--palette-danger-700);
    --studio-tone-4-bg: rgba(248, 113, 113, 0.10);
    --studio-tone-4-border: rgba(248, 113, 113, 0.38);
    --studio-tone-4-text: #FCA5A5;
    --studio-tone-4-count-bg: rgba(248, 113, 113, 0.18);
    --studio-tone-4-ring: rgba(248, 113, 113, 0.24);

    --studio-tone-5-accent: var(--palette-slate-500);
    --studio-tone-5-bg: var(--palette-neutral-100);
    --studio-tone-5-border: var(--palette-slate-300);
    --studio-tone-5-text: var(--app-text-secondary);
    --studio-tone-5-count-bg: var(--palette-neutral-0);
    --studio-tone-5-ring: var(--palette-slate-500-a10);

    --studio-tone-6-accent: #FB923C;
    --studio-tone-6-bg: rgba(251, 146, 60, 0.10);
    --studio-tone-6-border: rgba(251, 146, 60, 0.38);
    --studio-tone-6-text: #FDBA74;
    --studio-tone-6-count-bg: rgba(251, 146, 60, 0.18);
    --studio-tone-6-ring: rgba(251, 146, 60, 0.26);

    --studio-tone-7-accent: var(--palette-purple-500);
    --studio-tone-7-bg: rgba(167, 139, 250, 0.10);
    --studio-tone-7-border: rgba(167, 139, 250, 0.38);
    --studio-tone-7-text: #C4B5FD;
    --studio-tone-7-count-bg: rgba(167, 139, 250, 0.18);
    --studio-tone-7-ring: var(--palette-purple-500-a64);

    /* Layout tokens */
    --appbar-height: 48px;
    --page-padding-x: 16px;
    --page-padding-y: 10px;
    --gap-page: 8px;
    --radius-base: var(--app-radius-control);
    --radius-sm: var(--app-radius-small);
    --radius-xs: 8px;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --app-viewport-height: 100vh;
    --appbar-total-height: calc(var(--appbar-height) + var(--safe-area-top));
    --mud-appbar-height: var(--appbar-total-height);

    /* MudBlazor dark palette bridge */
    color-scheme: dark;
    --mud-default-borderradius: var(--app-radius-control) !important;
    --mud-palette-black: #02090D !important;
    --mud-palette-white: var(--app-text-strong) !important;
    --mud-palette-background: var(--app-canvas-start) !important;
    --mud-palette-background-gray: var(--app-canvas-middle) !important;
    --mud-palette-surface: var(--app-surface) !important;
    --mud-palette-drawer-background: #091820 !important;
    --mud-palette-drawer-text: var(--app-text-secondary) !important;
    --mud-palette-drawer-icon: var(--app-text-secondary) !important;
    --mud-palette-appbar-background: rgba(7, 20, 27, 0.90) !important;
    --mud-palette-appbar-text: var(--app-text-strong) !important;
    --mud-palette-text-primary: var(--app-text-primary) !important;
    --mud-palette-text-primary-rgb: 232, 241, 244 !important;
    --mud-palette-text-secondary: var(--app-text-secondary) !important;
    --mud-palette-text-disabled: #607681 !important;
    --mud-palette-action-default: var(--app-text-secondary) !important;
    --mud-palette-action-default-hover: rgba(255, 255, 255, 0.07) !important;
    --mud-palette-action-disabled: rgba(166, 184, 196, 0.42) !important;
    --mud-palette-action-disabled-background: rgba(255, 255, 255, 0.05) !important;
    --mud-palette-lines-default: var(--app-border-subtle) !important;
    --mud-palette-lines-inputs: var(--app-border-control) !important;
    --mud-palette-table-lines: var(--app-border-subtle) !important;
    --mud-palette-table-striped: rgba(255, 255, 255, 0.025) !important;
    --mud-palette-table-hover: rgba(20, 184, 166, 0.06) !important;
    --mud-palette-divider: var(--app-border-subtle) !important;
    --mud-palette-divider-light: rgba(255, 255, 255, 0.04) !important;
    --mud-palette-overlay-dark: rgba(2, 8, 12, 0.72) !important;
    --mud-palette-skeleton: rgba(255, 255, 255, 0.08) !important;
    --mud-palette-primary: var(--palette-primary) !important;
    --mud-palette-primary-rgb: 20, 184, 166 !important;
    --mud-palette-primary-text: var(--app-on-accent) !important;
    --mud-palette-primary-hover: rgba(20, 184, 166, 0.14) !important;
    --mud-palette-primary-lighten: var(--palette-teal-600) !important;
    --mud-palette-primary-darken: #0F8F82 !important;
    --mud-palette-secondary: var(--palette-info-500) !important;
    --mud-palette-secondary-rgb: 56, 189, 248 !important;
    --mud-palette-secondary-text: #04171F !important;
    --mud-palette-info: var(--palette-info-500) !important;
    --mud-palette-success: var(--palette-success-500) !important;
    --mud-palette-warning: var(--palette-warning-500) !important;
    --mud-palette-error: var(--palette-error-700) !important;
    --mud-palette-dark: var(--app-surface-raised) !important;
}

@supports (height: 100dvh) {
    :root {
        --app-viewport-height: 100dvh;
    }
}

body {
    background:
        radial-gradient(circle at 82% 8%, rgba(20, 184, 166, 0.08), transparent 32%),
        linear-gradient(180deg, var(--app-canvas-start), var(--app-canvas-middle) 48%, var(--app-canvas-end));
    background-attachment: fixed;
    color: var(--palette-slate-800);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: 400;
    letter-spacing: var(--letter-spacing-base);
    line-height: 1.45;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Generic MudBlazor sizing bridge */
.mud-typography,
.mud-input,
.mud-button,
.mud-chip,
.mud-table,
.mud-list,
.mud-nav-link {
    font-family: var(--font-body) !important;
    letter-spacing: var(--letter-spacing-base);
}

.mud-input-control .mud-input-control-input-container > .mud-input-label {
    font-size: var(--app-control-label-font-size) !important;
    line-height: var(--app-text-line-tight) !important;
}

.mud-input,
.mud-input-root,
.mud-input-slot,
.mud-select,
.mud-select-input {
    font-size: var(--app-control-value-font-size) !important;
    line-height: var(--app-text-line-control) !important;
}

.mud-input input::placeholder,
.mud-input textarea::placeholder,
.mud-input-slot::placeholder {
    font-size: var(--app-control-placeholder-font-size) !important;
}

.mud-input-helper-text {
    font-size: var(--app-control-helper-font-size) !important;
    line-height: var(--app-text-line-control) !important;
}

.mud-button-root:not(.mud-switch-base) {
    font-size: var(--app-button-font-size) !important;
    line-height: 1.2 !important;
    min-height: var(--app-button-height);
}

.mud-button-root .mud-button-label {
    min-width: 0;
}

.mud-icon-button-root:not(.mud-switch-base),
.mud-icon-button:not(.mud-switch-base) {
    height: var(--app-icon-button-size);
    min-height: var(--app-icon-button-size);
    min-width: var(--app-icon-button-size);
    width: var(--app-icon-button-size);
}

.mud-switch .mud-switch-base {
    height: auto;
    min-height: 0;
    min-width: 0;
    width: auto;
}

.mud-select .mud-input-slot,
.mud-select-input .mud-input-slot {
    font-size: var(--app-dropdown-selected-font-size) !important;
}

.mud-popover .mud-list-item {
    min-height: var(--app-dropdown-option-height);
}

.mud-popover .mud-list-item-text,
.mud-popover .mud-typography {
    font-size: var(--app-dropdown-option-font-size) !important;
    line-height: 1.3 !important;
}

.mud-popover .mud-list-item.mud-selected .mud-list-item-text,
.mud-popover .mud-list-item.mud-selected .mud-typography,
.mud-popover .mud-list-item-selected .mud-list-item-text,
.mud-popover .mud-list-item-selected .mud-typography {
    font-size: var(--app-dropdown-selected-font-size) !important;
    font-weight: 600 !important;
}

.mud-table {
    font-size: var(--app-table-font-size) !important;
}

.mud-table th,
.mud-table th .mud-typography {
    font-size: var(--app-table-heading-font-size) !important;
}

.mud-table td,
.mud-table td .mud-typography {
    font-size: var(--app-table-font-size) !important;
}

.mud-chip {
    font-size: var(--app-chip-font-size) !important;
}

.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6 {
    letter-spacing: 0.01em;
    line-height: 1.25;
}

.mud-typography-body1,
.mud-typography-body2,
.mud-typography-caption,
.mud-typography-subtitle1,
.mud-typography-subtitle2 {
    line-height: 1.45;
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: var(--palette-neutral-50);
}

::-webkit-scrollbar-thumb {
    background: var(--palette-slate-200);
    border-radius: var(--radius-base);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--palette-slate-500);
}

.mud-appbar {
    background-color: var(--palette-slate-800) !important;
    border-bottom: 1px solid var(--palette-slate-700) !important;
    box-shadow: none !important;
}

.mud-appbar .mud-toolbar,
.mud-appbar .mud-toolbar-appbar {
    background-color: var(--palette-slate-800) !important;
}

.mud-appbar .mud-typography,
.mud-appbar .mud-icon-button,
.mud-appbar .mud-button {
    color: var(--palette-sand-200) !important;
}

.mud-drawer {
    background: linear-gradient(180deg, var(--palette-slate-800) 0%, #18222c 100%) !important;
}

.mud-drawer.mud-drawer-left {
    border-right: 1px solid var(--palette-slate-700) !important;
}

.mud-drawer.mud-drawer-right {
    border-left: 1px solid var(--palette-slate-700) !important;
}

.mud-main-content {
    background-color: var(--palette-neutral-50) !important;
}

.appbar-title {
    color: var(--palette-sand-200) !important;
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.appbar-account-email {
    color: var(--palette-sand-200) !important;
    font-family: var(--font-body) !important;
    letter-spacing: var(--letter-spacing-tight) !important;
    text-transform: none !important;
}

.appbar-account-drawer-item {
    color: var(--palette-sand-400);
}

.appbar-account-drawer-item:hover,
.appbar-account-drawer-item:focus-visible {
    color: var(--palette-sand-200);
}

.drawer-brand-title {
    color: var(--app-text-muted);
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mud-drawer .nav-group-title {
    color: var(--palette-sand-200) !important;
    font-family: var(--font-body) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: 600 !important;
    letter-spacing: var(--letter-spacing-caps) !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
}

.mud-drawer .mud-divider {
    border-color: var(--palette-slate-700) !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
    opacity: 1 !important;
}

.mud-drawer .mud-nav-link {
    color: var(--palette-sand-400) !important;
    font-family: var(--font-body) !important;
    font-size: var(--studio-nav-font-size) !important;
    font-weight: 600 !important;
    letter-spacing: var(--letter-spacing-base) !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

.mud-drawer .mud-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.065) !important;
    border-color: rgba(232, 228, 220, 0.10) !important;
    color: var(--palette-sand-200) !important;
}

.mud-drawer .mud-nav-link.active,
.mud-drawer .drawer-nav-link--selected > .mud-nav-link,
.mud-drawer .mud-nav-link[aria-current="page"] {
    background: linear-gradient(100deg, var(--palette-sand-50), var(--palette-sand-200)) !important;
    border-color: rgba(117, 190, 190, 0.72) !important;
    box-shadow: inset 4px 0 0 var(--palette-teal-600), 0 5px 16px rgba(8, 12, 20, 0.24) !important;
    color: var(--palette-slate-900) !important;
    font-weight: 700 !important;
}

.mud-drawer .mud-nav-link.active:hover,
.mud-drawer .drawer-nav-link--selected > .mud-nav-link:hover,
.mud-drawer .mud-nav-link[aria-current="page"]:hover {
    background: var(--palette-neutral-0) !important;
    border-color: #75bebe !important;
}

.mud-drawer .mud-nav-link .mud-icon-root {
    color: inherit !important;
    font-size: 18px !important;
}

.mud-drawer .mud-nav-link.active .mud-nav-link-icon,
.mud-drawer .drawer-nav-link--selected > .mud-nav-link .mud-nav-link-icon,
.mud-drawer .mud-nav-link[aria-current="page"] .mud-nav-link-icon {
    color: var(--palette-teal-700) !important;
}

.mud-drawer .mud-nav-link:focus-visible {
    outline: 2px solid #75bebe !important;
    outline-offset: 2px;
}

.mud-drawer .drawer-nav-group-header {
    background-color: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    color: var(--palette-sand-200) !important;
}

.mud-drawer .drawer-nav-group-header:hover {
    background-color: rgba(255, 255, 255, 0.065) !important;
    border-color: rgba(232, 228, 220, 0.10) !important;
}

.mud-drawer .drawer-nav-group-header .mud-nav-link-expand-icon {
    background-color: rgba(232, 228, 220, 0.10) !important;
    border: 1px solid rgba(232, 228, 220, 0.14);
    border-radius: 8px;
    color: var(--palette-sand-200) !important;
    fill: var(--palette-sand-200) !important;
}

.mud-drawer .drawer-nav-group-header:hover .mud-nav-link-expand-icon {
    background-color: rgba(117, 190, 190, 0.16) !important;
    border-color: rgba(117, 190, 190, 0.30);
    color: #b9dddd !important;
    fill: #b9dddd !important;
}

.mud-drawer button.mud-nav-link {
    background: transparent;
    border: none;
    color: var(--palette-sand-400) !important;
    font-family: var(--font-body) !important;
    font-size: var(--studio-nav-font-size) !important;
    letter-spacing: var(--letter-spacing-tight) !important;
    transition: color 0.2s, background 0.2s !important;
}

.mud-drawer button.mud-nav-link:hover {
    background-color: var(--palette-slate-700) !important;
    color: var(--palette-sand-200) !important;
}

.appbar-account-drawer-logout-item {
    color: inherit;
}

@media (max-width: 760px) {
    :root {
        --app-text-base: 14px;
        --app-text-xl: 22px;
        --app-text-2xl: 34px;
        --app-control-height: 44px;
        --app-control-value-font-size: 16px;
        --app-control-label-font-size: 12px;
        --app-toggle-compact-height: 40px;
        --app-toggle-dense-height: 38px;
        --app-toggle-compact-font-size: 14px;
        --app-toggle-dense-font-size: 13px;
        --app-button-touch-height: 40px;
        --app-button-font-size: 14px;
        --app-action-button-grid-height: 34px;
        --app-nav-font-size: 16px;
        --app-filter-height: var(--app-filter-mobile-height);
        --app-filter-padding-block: 7px;
        --app-page-title-font-size: 20px;
        --app-empty-state-padding: 16px;
        --app-selected-text-font-size: 0.95rem;
        --appbar-height: 52px;
        --page-padding-x: 12px;
        --page-padding-y: 10px;
    }
}