:root {
    
    --color-primary: #3b82f6;
    --color-primary-hover: #2563eb;
    --color-primary-light: rgba(59, 130, 246, 0.1);
    --color-primary-muted: rgba(59, 130, 246, 0.2);
    --color-primary-info: rgba(59, 130, 246, 0.15);
    --color-primary-info-border: rgba(59, 130, 246, 0.3);
    --color-primary-focus: rgba(59, 130, 246, 0.5);
    --color-primary-shadow: rgba(59, 130, 246, 0.38);
    --color-primary-shadow-hover: rgba(59, 130, 246, 0.44);
    
    
    --color-secondary: #64748b;
    --color-secondary-hover: #475569;
    --color-secondary-light: rgba(100, 116, 139, 0.1);
    
    
    --color-success: #22c55e;
    --color-success-hover: #16a34a;
    --color-success-light: rgba(34, 197, 94, 0.1);
    --color-success-opaque: rgba(34, 197, 94, 0.93);
    --color-success-border: rgba(34, 197, 94, 0.4);
    
    
    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
    --color-danger-light: rgba(239, 68, 68, 0.1);
    --color-danger-opaque: rgba(239, 68, 68, 0.93);
    --color-danger-border: rgba(239, 68, 68, 0.2);
    
    
    --color-warning: #f59e0b;
    --color-warning-hover: #d97706;
    --color-warning-light: rgba(245, 158, 11, 0.1);
    
    
    --color-background: #f5f7fa;
    --color-surface: #ffffff;
    --color-surface-hover: #f8fafc;
    --color-surface-active: #f1f5f9;
    
    
    --color-dark: #1a2332;
    --color-dark-hover: #243044;
    --color-dark-muted: rgba(26, 35, 50, 0.95);
    
    
    --color-text: #1a2332;
    --color-text-secondary: #64748b;
    --color-text-muted: #94a3b8;
    --color-text-on-dark: #ffffff;
    --color-text-on-dark-secondary: rgba(255, 255, 255, 0.7);
    
    
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    --color-border-dark: rgba(255, 255, 255, 0.1);
    
    
    --login-bg-glass: rgba(255, 255, 255, 0.08);
    --login-bg-glass-hover: rgba(255, 255, 255, 0.12);
    --login-bg-glass-light: rgba(255, 255, 255, 0.05);
    --login-border-glass: rgba(255, 255, 255, 0.12);
    --login-border-glass-hover: rgba(255, 255, 255, 0.4);
    --login-text-muted: rgba(255, 255, 255, 0.6);
    --login-text-secondary: rgba(255, 255, 255, 0.5);
    --login-text-placeholder: rgba(255, 255, 255, 0.4);
    --login-link-color: #93c5fd;
    --login-link-hover: #60a5fa;
    --login-gradient-top: rgba(26, 35, 50, 0.98);
    --login-gradient-bottom: rgba(26, 35, 50, 0.8);
    
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
    
    
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;
    --spacing-3xl: 3rem;
    --spacing-4xl: 4rem;
    
    
    --spacing-input: var(--spacing-md);
    --spacing-button: var(--spacing-md) var(--spacing-xl);
    --spacing-button-sm: var(--spacing-xs) var(--spacing-sm);
    --spacing-button-lg: var(--spacing-lg) var(--spacing-2xl);
    
    
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 0.95rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    
    --transition: all 0.2s ease;
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.3s ease;
    
    
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 80px;
    --header-height: 70px;
    --content-max-width: 1400px;

    /* Container Widths */
    --container-sm: 640px;
    --container-md: 900px;
    --container-lg: var(--content-max-width);
    --container-xl: 1600px;

    /* Modal Widths */
    --modal-width-sm: 400px;
    --modal-width-md: 600px;
    --modal-width-lg: 900px;
    --modal-width-xl: 1200px;
    --modal-width-full: 95vw;
    
    
    --panel-width-default: 320px;
    --panel-width-mobile: 280px;
    
    
    --measure-distance: #ff4444;
    --measure-volume: #ffff44;
    --measure-spot: #4444ff;
    
    
    --color-background-dark: rgba(0, 0, 0, 0.85);
    --color-background-light: rgba(255, 255, 255, 0.1);
    --color-surface-muted: rgba(255, 255, 255, 0.1);
    --color-surface-strong: rgba(255, 255, 255, 0.2);
    
    
    --primary-color: var(--color-primary);
    --primary-hover: var(--color-primary-hover);
    --secondary-color: var(--color-success);
    --danger-color: var(--color-danger);
    --danger-hover: var(--color-danger-hover);
    --warning-color: var(--color-warning);
    --background-dark: var(--color-background-dark);
    --background-light: var(--color-background-light);
    --surface-muted: var(--color-surface-muted);
    --surface-strong: var(--color-surface-strong);
    --border-color: var(--color-border-dark);
    --text-color: var(--color-text-on-dark);
    --text-secondary: var(--color-text-on-dark-secondary);
    
    
    
    --responsive-scale: 1;
    --responsive-text-scale: 1;
    --responsive-padding-scale: 1;
    --responsive-spacing-scale: 1;
    
    
    
    
    --z-index-base: 0;
    
    
    --z-index-background: 1;
    
    
    --z-index-content: 10;
    
    
    --z-index-header: 100;
    
    
    --z-index-surface: 1000;
    
    
    --z-index-dropdown: 2000;
    
    
    --z-index-modal: 3000;
    
    
    --z-index-notification: 4000;
    
    
    --z-index-maximum: 99999;
    
    
    --color-white: #ffffff;
    --color-white-95: rgba(255, 255, 255, 0.95);
    --color-white-90: rgba(255, 255, 255, 0.9);
    --color-white-85: rgba(255, 255, 255, 0.85);
    --color-white-80: rgba(255, 255, 255, 0.8);
    --color-white-70: rgba(255, 255, 255, 0.7);
    --color-white-60: rgba(255, 255, 255, 0.6);
    --color-white-50: rgba(255, 255, 255, 0.5);
    --color-white-40: rgba(255, 255, 255, 0.4);
    --color-white-30: rgba(255, 255, 255, 0.3);
    --color-white-25: rgba(255, 255, 255, 0.25);
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-white-15: rgba(255, 255, 255, 0.15);
    --color-white-12: rgba(255, 255, 255, 0.12);
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-white-08: rgba(255, 255, 255, 0.08);
    --color-white-05: rgba(255, 255, 255, 0.05);
    --color-white-02: rgba(255, 255, 255, 0.02);
    
    --color-black-85: rgba(0, 0, 0, 0.85);
    --color-black-80: rgba(0, 0, 0, 0.8);
    --color-black-50: rgba(0, 0, 0, 0.5);
    --color-black-40: rgba(0, 0, 0, 0.4);
    --color-black-30: rgba(0, 0, 0, 0.3);
    --color-black-20: rgba(0, 0, 0, 0.2);
    --color-black-15: rgba(0, 0, 0, 0.15);
    --color-black-10: rgba(0, 0, 0, 0.1);
    --color-black-05: rgba(0, 0, 0, 0.05);
    
    --color-google-blue: #4285F4;
    --color-google-blue-hover: #357AE8;
    --color-google-blue-shadow: rgba(66, 133, 244, 0.3);
    --color-google-blue-shadow-hover: rgba(66, 133, 244, 0.4);
    --color-google-blue-muted: rgba(66, 133, 244, 0.7);

    /* Amber/Warning variants (tailwind amber palette) */
    --color-amber-400: #fbbf24;
    --color-amber-15: rgba(251, 191, 36, 0.15);
    --color-amber-30: rgba(251, 191, 36, 0.3);
    --color-amber-40: rgba(251, 191, 36, 0.4);
    
    --color-overlay-backdrop: rgba(0, 0, 0, 0.5);
    --color-overlay-dark: rgba(0, 0, 0, 0.8);
    --color-overlay-light: rgba(0, 0, 0, 0.2);

    --color-shadow-overlay: rgba(0, 0, 0, 0.4);

    /* Auth Modal Dark Theme */
    --auth-modal-gradient-start: #1e293b;
    --auth-modal-gradient-end: #0f172a;
    --auth-modal-gradient: linear-gradient(135deg, var(--auth-modal-gradient-start) 0%, var(--auth-modal-gradient-end) 100%);
    --auth-modal-shadow: 0 20px 60px var(--color-black-50), 0 0 0 1px var(--color-white-05);

    /* Error color variations */
    --color-danger-15: rgba(239, 68, 68, 0.15);
    --color-danger-30: rgba(239, 68, 68, 0.3);
    --color-danger-50: rgba(239, 68, 68, 0.5);
    --color-danger-70: rgba(239, 68, 68, 0.7);
    --color-danger-text-light: rgba(248, 113, 113, 0.95);

    /* Status badge colors - semantic color tokens */
    --badge-success-bg: #dcfce7;
    --badge-success-text: #166534;
    --badge-danger-bg: #fee2e2;
    --badge-danger-text: #991b1b;
    --badge-warning-bg: #fef3c7;
    --badge-warning-text: #92400e;
    --badge-info-bg: #dbeafe;
    --badge-info-text: #1d4ed8;
    --badge-neutral-bg: #f1f5f9;
    --badge-neutral-text: #475569;
    --badge-purple-bg: #e9d5ff;
    --badge-purple-text: #6b21a8;

    /* Info banner colors */
    --banner-info-bg: #f0f9ff;
    --banner-info-text: #0369a1;

    /* Slate color scale (additional grays) */
    --color-slate-300: #cbd5e1;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;

    /* Extended danger scale (red) */
    --color-red-50: #fef2f2;
    --color-red-200: #fecaca;
    --color-red-300: #fca5a5;
    --color-red-800: #991b1b;

    /* Extended success scale (green) */
    --color-green-50: #f0fdf4;
    --color-green-300: #86efac;

    /* Extended amber scale */
    --color-amber-300: #fcd34d;

    /* Extended blue scale */
    --color-blue-300: #93c5fd;
    --color-blue-800: #1e40af;

    /* Sky/Info color scale */
    --color-sky-50: #f0f9ff;
    --color-sky-200: #bae6fd;
    --color-sky-700: #0369a1;

    /* Purple color scale */
    --color-purple-100: #f3e8ff;
    --color-purple-500: #8b5cf6;
    --color-purple-700: #7c3aed;
    --color-purple-800: #6b21a8;

    /* Primary button gradients */
    --color-primary-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    --color-primary-gradient-hover: linear-gradient(135deg, var(--color-primary-hover) 0%, #1d4ed8 100%);
    --color-primary-dark: #1d4ed8;

    /* Google OAuth button colors */
    --color-google-btn-bg: #ffffff;
    --color-google-btn-text: #3c4043;
    --color-google-btn-hover: #f8f9fa;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.5;
    color: #1a2332;
    background-color: #ffffff;
    overflow-x: hidden;
}
#root {
    min-height: 100vh;
    width: 100%;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    color: #1a2332;
    color: var(--color-text);
    margin: 0;
}
p {
    margin: 0;
    line-height: 1.6;
}
a {
    color: #3b82f6;
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: #2563eb;
    color: var(--color-primary-hover);
}
.container {
    width: 100%;
    max-width: 1400px;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 1rem;
    padding: 0 var(--spacing-lg);
}
.section {
    margin-bottom: 2rem;
    margin-bottom: var(--spacing-2xl);
}
.grid {
    display: grid;
    grid-gap: 1rem;
    grid-gap: var(--spacing-lg);
    gap: 1rem;
    gap: var(--spacing-lg);
}
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.flex {
    display: flex;
}
.flex-col {
    flex-direction: column;
}
.flex-row {
    flex-direction: row;
}
.items-center {
    align-items: center;
}
.items-start {
    align-items: flex-start;
}
.items-end {
    align-items: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.justify-start {
    justify-content: flex-start;
}
.justify-end {
    justify-content: flex-end;
}
.gap-xs { gap: 0.25rem; gap: var(--spacing-xs); }
.gap-sm { gap: 0.5rem; gap: var(--spacing-sm); }
.gap-md { gap: 0.75rem; gap: var(--spacing-md); }
.gap-lg { gap: 1rem; gap: var(--spacing-lg); }
.gap-xl { gap: 1.5rem; gap: var(--spacing-xl); }
.admin-container,
.portal-container {
    display: flex;
    min-height: 100vh;
    background-color: #f5f7fa;
    background-color: var(--color-background);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--font-family);
    position: relative;
}
.admin-sidebar,
.portal-sidebar {
    background-color: #1a2332;
    background-color: var(--color-dark);
    color: #ffffff;
    color: var(--color-text-on-dark);
    transition: all 0.3s ease;
    transition: var(--transition-slow);
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    position: fixed;
    height: 100vh;
    z-index: 1000;
    z-index: var(--z-index-surface);
    width: 260px;
    width: var(--sidebar-width, 260px);
}
.admin-sidebar.sidebar-collapsed,
.portal-sidebar.sidebar-collapsed {
    width: 80px;
    width: var(--sidebar-collapsed-width, 80px);
}
.mobile-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: calc(1000 - 1);
    z-index: calc(var(--z-index-surface) - 1);
    display: none;
}
@media (max-width: 768px) {
    .mobile-sidebar-overlay {
        display: block;
    }
    
    .admin-sidebar,
    .portal-sidebar {
        transform: translateX(-100%);
        transition: transform all 0.3s ease;
        transition: transform var(--transition-slow);
    }
    
    .admin-sidebar.mobile-sidebar-open,
    .portal-sidebar.mobile-sidebar-open {
        transform: translateX(0);
    }
}
.sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid var(--color-border-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.sidebar-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border-radius: var(--radius-md);
    -o-object-fit: contain;
       object-fit: contain;
    background-color: rgba(59, 130, 246, 0.1);
    background-color: var(--color-primary-light);
    flex-shrink: 0;
}
.sidebar-title {
    font-size: 1.25rem;
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    color: #ffffff;
    color: var(--color-text-on-dark);
}
.sidebar-collapsed .sidebar-title {
    display: none;
}
.sidebar-toggle {
    background-color: transparent;
    border: none;
    color: #ffffff;
    color: var(--color-text-on-dark);
    cursor: pointer;
    font-size: 1.125rem;
    font-size: var(--font-size-lg);
    padding: 0.5rem;
    border-radius: 4px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    transition: var(--transition);
    flex-shrink: 0;
}
.sidebar-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.menu-list {
    list-style: none;
    padding: 1rem 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
}
.menu-item {
    margin: 0.25rem 0.75rem;
}
.menu-button {
    width: 100%;
    padding: 0.875rem 1rem;
    background-color: transparent;
    border: none;
    color: #ffffff;
    color: var(--color-text-on-dark);
    cursor: pointer;
    border-radius: 8px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
    transition: var(--transition);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--font-family);
    text-align: left;
}
.menu-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.menu-button.active {
    background-color: rgba(59, 130, 246, 0.2);
    background-color: var(--color-primary-muted);
}
.menu-icon {
    font-size: 1.25rem;
    font-size: var(--font-size-xl);
    flex-shrink: 0;
    width: 1.5rem;
    text-align: center;
}
.menu-label {
    font-size: 0.95rem;
    font-size: var(--font-size-base);
    font-weight: 500;
    white-space: nowrap;
}
.sidebar-collapsed .menu-label {
    display: none;
}
.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid var(--color-border-dark);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sidebar-footer button {
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: all 0.2s ease;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--font-family);
}
.sidebar-footer .button-sidebar-success {
    background-color: #22c55e;
    background-color: var(--color-success);
    color: white;
}
.sidebar-footer .button-sidebar-success:hover {
    background-color: #16a34a;
    background-color: var(--color-success-hover);
}
.sidebar-footer .button-sidebar-danger {
    background-color: #ef4444;
    background-color: var(--color-danger);
    color: white;
}
.sidebar-footer .button-sidebar-danger:hover {
    background-color: #dc2626;
    background-color: var(--color-danger-hover);
}
.sidebar-collapsed .sidebar-footer button span:not(:first-child) {
    display: none;
}
.admin-main,
.portal-main {
    flex: 1;
    transition: all 0.3s ease;
    transition: var(--transition-slow);
    min-height: 100vh;
    margin-left: 260px;
    margin-left: var(--sidebar-width, 260px);
}
.admin-main.sidebar-collapsed,
.portal-main.sidebar-collapsed {
    margin-left: 80px;
    margin-left: var(--sidebar-collapsed-width, 80px);
}
@media (max-width: 768px) {
    .admin-main,
    .portal-main {
        margin-left: 0;
    }
}
/* Content Area - Main wrapper below header */
.admin-content-area,
.portal-content-area {
    padding: 1.5rem;
    padding: var(--spacing-xl);
    width: 100%;
    box-sizing: border-box;
}
.admin-content-area.backdrop-transparent,
.portal-content-area.backdrop-transparent {
    background-color: #ffffff;
    background-color: var(--color-surface);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 768px) {
    .admin-content-area,
    .portal-content-area {
        padding: 1rem;
        padding: var(--spacing-lg);
    }
}
@media (max-width: 480px) {
    .admin-content-area,
    .portal-content-area {
        padding: 0.75rem;
        padding: var(--spacing-md);
    }
}
.mobile-hamburger-btn {
    display: none;
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    font-size: 1.5rem;
    font-size: var(--font-size-2xl);
    color: #1a2332;
    color: var(--color-text);
    margin-right: 1rem;
}
@media (max-width: 768px) {
    .mobile-hamburger-btn {
        display: block;
    }
}
.desktop-sidebar-toggle {
    display: block;
}
@media (max-width: 768px) {
    .desktop-sidebar-toggle {
        display: none;
    }
}
.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background-color: #ffffff;
    background-color: var(--color-surface);
    border-radius: 8px;
    border-radius: var(--radius-md);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--color-border);
}
.btn {
    padding: 0.75rem 1.5rem;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: 8px;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-size: var(--font-size-base);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    gap: var(--spacing-sm);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--font-family);
    text-decoration: none;
    line-height: 1;
}
.btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.btn-primary {
    background-color: #3b82f6;
    background-color: var(--color-primary);
    color: #ffffff;
    color: var(--color-text-on-dark);
}
.btn-primary:hover:not(:disabled) {
    background-color: #2563eb;
    background-color: var(--color-primary-hover);
}
.btn-secondary {
    background-color: #64748b;
    background-color: var(--color-secondary);
    color: #ffffff;
    color: var(--color-text-on-dark);
}
.btn-secondary:hover:not(:disabled) {
    background-color: #475569;
    background-color: var(--color-secondary-hover);
}
.btn-success {
    background-color: #22c55e;
    background-color: var(--color-success);
    color: #ffffff;
    color: var(--color-text-on-dark);
}
.btn-success:hover:not(:disabled) {
    background-color: #16a34a;
    background-color: var(--color-success-hover);
}
.btn-danger {
    background-color: #ef4444;
    background-color: var(--color-danger);
    color: #ffffff;
    color: var(--color-text-on-dark);
}
.btn-danger:hover:not(:disabled) {
    background-color: #dc2626;
    background-color: var(--color-danger-hover);
}
.btn-warning {
    background-color: #f59e0b;
    background-color: var(--color-warning);
    color: #ffffff;
    color: var(--color-text-on-dark);
}
.btn-warning:hover:not(:disabled) {
    background-color: #d97706;
    background-color: var(--color-warning-hover);
}
.btn-ghost {
    background-color: transparent;
    color: #1a2332;
    color: var(--color-text);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--color-border);
}
.btn-ghost:hover:not(:disabled) {
    background-color: #f8fafc;
    background-color: var(--color-surface-hover);
}
.btn-sm {
    padding: 0.25rem 0.5rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
}
.btn-lg {
    padding: 1rem 2rem;
    padding: var(--spacing-lg) var(--spacing-2xl);
    font-size: 1.125rem;
    font-size: var(--font-size-lg);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
}
/* Loading state */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spinner 0.6s linear infinite;
    color: #ffffff;
    color: var(--color-text-on-dark);
}
@keyframes spinner {
    to { transform: rotate(360deg); }
}
/* Full width variant */
.btn-full {
    width: 100%;
}
/* Icon button (no text, just icon) */
.btn-icon {
    padding: 0.75rem;
    padding: var(--spacing-md);
    width: 2.5rem;
    height: 2.5rem;
}
.btn-icon.btn-sm {
    padding: 0.5rem;
    padding: var(--spacing-sm);
    width: 2rem;
    height: 2rem;
}
.btn-icon.btn-lg {
    padding: 1rem;
    padding: var(--spacing-lg);
    width: 3rem;
    height: 3rem;
}
/* Icon wrapper inside button */
.btn-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-content {
    display: inline-flex;
    align-items: center;
}
button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.button-grid,
.table-actions.button-grid,
.button-group.button-grid,
.action-buttons.button-grid,
.control-group.button-grid,
.marker-button-group.button-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
    grid-gap: 0.5rem;
    gap: 0.5rem;
    justify-items: stretch;
    align-items: stretch;
}
.button-grid > button,
.button-grid > .btn,
.table-actions.button-grid > button,
.button-group.button-grid > button,
.action-buttons.button-grid > button {
    width: 100%;
    min-width: 0; 
}
/* ============================================================================
   FORM STYLES - MODULE INDEX
   Imports all form-related CSS modules for unified form styling
   ============================================================================ */
/* Base form elements: groups, labels, inputs, textareas, selects */
/* ============================================================================
   FORM BASE STYLES
   Base form elements: groups, labels, inputs, textareas, selects
   ============================================================================ */
.form-group {
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-lg);
}
.form-label {
    display: block;
    margin-bottom: 0.5rem;
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    color: #1a2332;
    color: var(--color-text);
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
}
.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 0.75rem;
    padding: var(--spacing-md);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    border-radius: var(--radius-md);
    background-color: #ffffff;
    background-color: var(--color-surface);
    transition: all 0.2s ease;
    transition: var(--transition);
    font-size: 0.95rem;
    font-size: var(--font-size-base);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--font-family);
    color: #1a2332;
    color: var(--color-text);
    box-sizing: border-box;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: #3b82f6;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
    background-color: #f8fafc;
    background-color: var(--color-surface-hover);
    cursor: not-allowed;
    opacity: 0.6;
}
.form-input::-moz-placeholder, .form-textarea::-moz-placeholder {
    color: #94a3b8;
    color: var(--color-text-muted);
    opacity: 0.7;
}
.form-input::placeholder,
.form-textarea::placeholder {
    color: #94a3b8;
    color: var(--color-text-muted);
    opacity: 0.7;
}
.form-textarea {
    resize: vertical;
    min-height: 100px;
}
/* ============================================================================
   ERROR & READONLY STATES
   ============================================================================ */
.form-input-error,
.form-textarea-error,
.form-select-error {
    border-color: #ef4444;
    border-color: var(--color-danger);
}
.form-input-error:focus,
.form-textarea-error:focus,
.form-select-error:focus {
    border-color: #ef4444;
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    box-shadow: 0 0 0 3px var(--color-danger-light);
}
.form-input-readonly,
.form-textarea-readonly {
    background-color: #f8fafc;
    background-color: var(--color-surface-hover);
    cursor: default;
}
.form-required {
    color: #ef4444;
    color: var(--color-danger);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
}
/* ============================================================================
   INPUT WITH ICON
   ============================================================================ */
.form-input-wrapper {
    position: relative;
}
.form-input-icon {
    position: absolute;
    left: 0.75rem;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.form-input.has-icon {
    padding-left: 2.5rem;
}
.form-readonly-badge {
    color: #64748b;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-size: var(--font-size-xs);
    font-weight: 400;
    font-weight: var(--font-weight-normal);
    margin-left: 0.5rem;
    margin-left: var(--spacing-sm);
}
/* ============================================================================
   NATIVE INPUT RESETS
   Consistent styling for native form elements
   ============================================================================ */
input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="file"],
textarea,
select {
    width: 100%;
    padding: 0.75rem;
    padding: var(--spacing-md);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    border-radius: var(--radius-md);
    background-color: #ffffff;
    background-color: var(--color-surface);
    transition: all 0.2s ease;
    transition: var(--transition);
    font-size: 0.95rem;
    font-size: var(--font-size-base);
    color: #1a2332;
    color: var(--color-text);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #3b82f6;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
textarea:disabled,
select:disabled {
    background-color: #f8fafc;
    background-color: var(--color-surface-hover);
    cursor: not-allowed;
    opacity: 0.6;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #94a3b8;
    color: var(--color-text-muted);
    opacity: 0.7;
}
input::placeholder,
textarea::placeholder {
    color: #94a3b8;
    color: var(--color-text-muted);
    opacity: 0.7;
}
label {
    display: block;
    margin-bottom: 0.5rem;
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    color: #64748b;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
}
/* Grid layouts for form rows, stacks, and field wrappers */
/* ============================================================================
   FORM LAYOUTS
   Grid layouts for form rows, stacks, and field wrappers
   ============================================================================ */
.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
    grid-gap: var(--spacing-lg);
    gap: 1rem;
    gap: var(--spacing-lg);
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-lg);
}
.form-row--single {
    grid-template-columns: 1fr;
}
.form-row--three {
    grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        gap: var(--spacing-md);
    }
}
/* ============================================================================
   FORM FIELD - Wrapper for label + input
   ============================================================================ */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    gap: var(--spacing-xs);
}
.form-field-label {
    font-size: 0.75rem;
    font-size: var(--font-size-xs);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    color: #64748b;
    color: var(--color-text-secondary);
}
/* ============================================================================
   FORM STACK - Vertical form layout with consistent spacing
   ============================================================================ */
.form-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    gap: var(--spacing-lg);
}
/* Range slider styling */
/* ============================================================================
   FORM RANGE INPUTS
   Styled range sliders with custom thumb and track
   ============================================================================ */
.form-range-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    gap: var(--spacing-md);
}
.form-range {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    background-color: #f1f5f9;
    background-color: var(--color-border-light);
    cursor: pointer;
    outline: none;
}
.form-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #3b82f6;
    background-color: var(--color-primary);
    cursor: pointer;
    border: 2px solid #ffffff;
    border: 2px solid var(--color-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-transition: var(--transition);
    transition: var(--transition);
}
.form-range::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-md);
}
.form-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #3b82f6;
    background-color: var(--color-primary);
    cursor: pointer;
    border: 2px solid #ffffff;
    border: 2px solid var(--color-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
}
.form-range-value {
    min-width: 50px;
    text-align: right;
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    color: #1a2332;
    color: var(--color-text);
}
/* Checkbox and radio inputs with labels */
/* ============================================================================
   FORM CHECKBOXES & RADIOS
   Styled checkbox and radio inputs with labels
   ============================================================================ */
.form-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    color: #64748b;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}
.form-checkbox-label input[type="checkbox"],
.form-checkbox-label input[type="radio"] {
    width: auto;
    margin: 0;
    cursor: pointer;
}
.form-checkbox-label:hover {
    color: #1a2332;
    color: var(--color-text);
}
/* ============================================================================
   CHECKBOX GRID - Grid of checkbox items
   ============================================================================ */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 0.75rem;
    grid-gap: var(--spacing-md);
    gap: 0.75rem;
    gap: var(--spacing-md);
    max-height: 300px;
    overflow-y: auto;
    padding: 0.75rem;
    padding: var(--spacing-md);
    background-color: #f5f7fa;
    background-color: var(--color-background);
    border-radius: 8px;
    border-radius: var(--radius-md);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--color-border);
}
.checkbox-grid__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    gap: var(--spacing-sm);
    padding: 0.5rem;
    padding: var(--spacing-sm);
    background-color: #ffffff;
    background-color: var(--color-surface);
    border-radius: 4px;
    border-radius: var(--radius-sm);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all 0.2s ease;
    transition: var(--transition);
}
.checkbox-grid__item:hover {
    border-color: #3b82f6;
    border-color: var(--color-primary);
}
.checkbox-grid__item input[type="checkbox"] {
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}
.checkbox-grid__label {
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    color: #1a2332;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Option cards (radio/checkbox as selectable cards) */
/* ============================================================================
   FORM OPTION CARDS
   Radio/Checkbox styled as selectable cards
   ============================================================================ */
.form-option-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    gap: var(--spacing-sm);
    padding: 0.75rem;
    padding: var(--spacing-md);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    transition: var(--transition);
    background-color: #ffffff;
    background-color: var(--color-surface);
}
.form-option-card:hover {
    border-color: #3b82f6;
    border-color: var(--color-primary);
    background-color: #f8fafc;
    background-color: var(--color-surface-hover);
}
.form-option-card--selected {
    border-color: #3b82f6;
    border-color: var(--color-primary);
    background-color: rgba(59, 130, 246, 0.1);
    background-color: var(--color-primary-light);
}
/* ============================================================================
   OPTION CARD VARIANTS
   ============================================================================ */
.form-option-card--success {
    background-color: rgba(34, 197, 94, 0.1);
    background-color: var(--color-success-light, rgba(16, 185, 129, 0.1));
    border-color: #22c55e;
    border-color: var(--color-success, #10b981);
}
.form-option-card--success:hover {
    background-color: rgba(34, 197, 94, 0.1);
    background-color: var(--color-success-light, rgba(16, 185, 129, 0.15));
}
.form-option-card__label {
    cursor: pointer;
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    color: #22c55e;
    color: var(--color-success, #10b981);
    flex: 1;
}
/* Error messages, help text, hints, warnings, and info banners */
/* ============================================================================
   FORM FEEDBACK
   Error messages, help text, hints, warnings, and info banners
   ============================================================================ */
/* Error message */
.form-error {
    color: #ef4444;
    color: var(--color-danger);
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    margin-top: 0.25rem;
    margin-top: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    gap: var(--spacing-xs);
}
.form-error-icon {
    font-size: 0.95rem;
    font-size: var(--font-size-base);
}
/* Helper text */
.form-help {
    color: #94a3b8;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    margin-top: 0.25rem;
    margin-top: var(--spacing-xs);
}
/* ============================================================================
   INLINE HINTS
   ============================================================================ */
.form-hint {
    font-size: 0.75rem;
    font-size: var(--font-size-xs);
    color: #94a3b8;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
    margin-top: var(--spacing-xs);
}
.form-hint--warning {
    color: #f59e0b;
    color: var(--color-warning);
    font-style: italic;
}
/* ============================================================================
   WARNING & INFO BANNERS
   ============================================================================ */
.form-warning {
    padding: 0.75rem 1rem;
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: rgba(245, 158, 11, 0.1);
    background-color: var(--color-warning-light, #fef3c7);
    border: 1px solid #f59e0b;
    border: 1px solid var(--color-warning);
    border-radius: 8px;
    border-radius: var(--radius-md);
    color: #92400e;
    color: var(--color-warning-text, #92400e);
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    gap: var(--spacing-sm);
}
.form-info {
    padding: 0.75rem 1rem;
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: rgba(59, 130, 246, 0.15);
    background-color: var(--color-primary-info);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border: 1px solid var(--color-primary-info-border);
    border-radius: 8px;
    border-radius: var(--radius-md);
    color: #1a2332;
    color: var(--color-text);
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    gap: var(--spacing-sm);
}
/* ============================================================================
   TOGGLE / ADVANCED SECTION BUTTONS
   ============================================================================ */
.form-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    gap: var(--spacing-sm);
    padding: 0.5rem 0.75rem;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: #f5f7fa;
    background-color: var(--color-background);
    border: 1px solid #f1f5f9;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.75rem;
    font-size: var(--font-size-xs);
    color: #64748b;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
    transition: var(--transition);
}
.form-toggle-btn:hover {
    border-color: #e2e8f0;
    border-color: var(--color-border);
    color: #1a2332;
    color: var(--color-text);
}
.card {
    background-color: #ffffff;
    background-color: var(--color-surface);
    border-radius: 12px;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    padding: var(--spacing-xl);
    margin-bottom: 1.5rem;
    margin-bottom: var(--spacing-xl);
    border: 1px solid #f1f5f9;
    border: 1px solid var(--color-border-light);
}
/* Transparent backdrop variant for animated backgrounds */
.card.backdrop-transparent {
    background-color: #ffffff;
    background-color: var(--color-surface);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.card-header {
    padding-bottom: 1rem;
    padding-bottom: var(--spacing-lg);
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid #f1f5f9;
    border-bottom: 1px solid var(--color-border-light);
}
.card-title {
    font-size: 1.25rem;
    font-size: var(--font-size-xl);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    color: #1a2332;
    color: var(--color-text);
    margin: 0;
}
.card-body {
    color: #1a2332;
    color: var(--color-text);
}
.card-footer {
    padding-top: 1rem;
    padding-top: var(--spacing-lg);
    margin-top: 1rem;
    margin-top: var(--spacing-lg);
    border-top: 1px solid #f1f5f9;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    gap: 0.5rem;
    gap: var(--spacing-sm);
    justify-content: flex-end;
}
/* Hover effect */
.card-hover {
    transition: all 0.2s ease;
    transition: var(--transition);
    cursor: pointer;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    box-shadow: var(--shadow-lg);
}
/* Padding variants */
.card-sm {
    padding: 0.75rem;
    padding: var(--spacing-md);
}
.card-md {
    padding: 1.5rem;
    padding: var(--spacing-xl);
}
.card-lg {
    padding: 2rem;
    padding: var(--spacing-2xl);
}
/* Semantic variants */
.card-info {
    border-left: 4px solid #3b82f6;
    border-left: 4px solid var(--color-primary);
    background-color: rgba(59, 130, 246, 0.1);
    background-color: var(--color-primary-light);
}
.card-success {
    border-left: 4px solid #22c55e;
    border-left: 4px solid var(--color-success);
    background-color: rgba(34, 197, 94, 0.1);
    background-color: var(--color-success-light);
}
.card-danger {
    border-left: 4px solid #ef4444;
    border-left: 4px solid var(--color-danger);
    background-color: rgba(239, 68, 68, 0.1);
    background-color: var(--color-danger-light);
}
.card-warning {
    border-left: 4px solid #f59e0b;
    border-left: 4px solid var(--color-warning);
    background-color: rgba(245, 158, 11, 0.1);
    background-color: var(--color-warning-light);
}
.table-container {
    overflow-x: auto;
    margin-bottom: 1.5rem;
    margin-bottom: var(--spacing-xl);
}
.table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    background-color: var(--color-surface);
}
.table-header {
    background-color: #f8fafc;
    background-color: var(--color-surface-hover);
    border-bottom: 2px solid #e2e8f0;
    border-bottom: 2px solid var(--color-border);
}
.table-header-cell {
    padding: 1rem;
    padding: var(--spacing-lg);
    text-align: left;
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    color: #64748b;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.table-cell {
    padding: 1rem;
    padding: var(--spacing-lg);
    border-bottom: 1px solid #f1f5f9;
    border-bottom: 1px solid var(--color-border-light);
    color: #1a2332;
    color: var(--color-text);
}
.table-row:hover {
    background-color: #f8fafc;
    background-color: var(--color-surface-hover);
}
.table-container,
.table-wrapper {
    position: relative;
    
    overflow-x: auto;
    overflow-y: visible; 
}
td[data-action-menu],
th[data-action-menu],
td:has([data-action-menu]),
th:has([data-action-menu]) {
    overflow: visible !important;
    position: relative;
    
}
td > [data-action-menu],
th > [data-action-menu] {
    position: relative;
    
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    gap: var(--spacing-xs);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}
/* Variants */
.badge-primary {
    background-color: rgba(59, 130, 246, 0.1);
    background-color: var(--color-primary-light);
    color: #3b82f6;
    color: var(--color-primary);
}
.badge-secondary {
    background-color: rgba(100, 116, 139, 0.1);
    background-color: var(--color-secondary-light);
    color: #64748b;
    color: var(--color-secondary);
}
.badge-success {
    background-color: rgba(34, 197, 94, 0.1);
    background-color: var(--color-success-light);
    color: #22c55e;
    color: var(--color-success);
}
.badge-danger {
    background-color: rgba(239, 68, 68, 0.1);
    background-color: var(--color-danger-light);
    color: #ef4444;
    color: var(--color-danger);
}
.badge-warning {
    background-color: rgba(245, 158, 11, 0.1);
    background-color: var(--color-warning-light);
    color: #f59e0b;
    color: var(--color-warning);
}
/* Sizes */
.badge-sm {
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-size: var(--font-size-xs);
}
.badge-lg {
    padding: 0.375rem 1rem;
    font-size: 0.95rem;
    font-size: var(--font-size-base);
}
.spinner {
    display: inline-block;
    border-radius: 50%;
    border-style: solid;
    border-top-color: transparent;
    animation: spinner-rotate 0.6s linear infinite;
}
/* Sizes */
.spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}
.spinner-md {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 2px;
}
.spinner-lg {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 3px;
}
/* Variants */
.spinner-primary {
    border-color: #3b82f6;
    border-color: var(--color-primary);
    border-top-color: transparent;
}
.spinner-secondary {
    border-color: #64748b;
    border-color: var(--color-secondary);
    border-top-color: transparent;
}
.spinner-white {
    border-color: #ffffff;
    border-top-color: transparent;
}
/* Screen reader only text */
.spinner-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
/* Animation */
@keyframes spinner-rotate {
    to {
        transform: rotate(360deg);
    }
}
/* Empty state component */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    padding: var(--spacing-3xl);
    text-align: center;
}
.empty-state-icon {
    font-size: 3rem;
    color: #94a3b8;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
    margin-bottom: var(--spacing-xl);
}
.empty-state-title {
    font-size: 1.25rem;
    font-size: var(--font-size-xl);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    color: #1a2332;
    color: var(--color-text);
    margin: 0 0 0.75rem 0;
    margin: 0 0 var(--spacing-md) 0;
}
.empty-state-description {
    font-size: 0.95rem;
    font-size: var(--font-size-base);
    color: #64748b;
    color: var(--color-text-secondary);
    margin: 0 0 1.5rem 0;
    margin: 0 0 var(--spacing-xl) 0;
    max-width: 400px;
}
.empty-state-action {
    margin-top: 1rem;
    margin-top: var(--spacing-lg);
}
.actions-menu {
    position: relative;
}
.actions-menu__button {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-size: var(--font-size-xs);
    min-width: auto;
    border: none;
    border-radius: 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    gap: var(--spacing-xs);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--font-family);
    line-height: 1;
}
.actions-menu__button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.actions-menu__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 99999;
    z-index: var(--z-index-maximum); 
    background-color: #ffffff; 
    background-color: var(--color-surface);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    padding: 0.375rem;
    backdrop-filter: blur(8px);
    display: block;
    visibility: visible;
    opacity: 1;
}
.actions-menu__dropdown--above {
    top: auto;
    bottom: calc(100% + 4px);
}
.actions-menu__dropdown--right {
    left: auto;
    right: 0;
}
.actions-menu__dropdown--left {
    left: 0;
    right: auto;
}
.actions-menu__dropdown--fixed {
    position: fixed;
}
.actions-menu__item {
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border: none;
    background: #ffffff;
    background: var(--color-surface);
    color: #1a2332;
    color: var(--color-text);
    cursor: pointer;
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    border-radius: 4px;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    gap: var(--spacing-sm);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--font-family);
    line-height: 1;
}
.actions-menu__item:hover:not(:disabled) {
    background-color: #f8fafc;
    background-color: var(--color-surface-hover);
}
.actions-menu__item:focus {
    outline: none;
    background-color: #f8fafc;
    background-color: var(--color-surface-hover);
}
.actions-menu__item--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.actions-menu__item--disabled:hover {
    background-color: #ffffff;
    background-color: var(--color-surface);
}
.actions-menu__item--danger {
    color: #ef4444;
    color: var(--color-danger);
}
.actions-menu__item--danger:hover:not(:disabled) {
    background-color: #fee2e2;
    color: #dc2626;
    color: var(--color-danger-hover);
}
.actions-menu__divider {
    height: 1px;
    background-color: #e2e8f0;
    background-color: var(--color-border);
    margin: 0.375rem 0;
    border: none;
    padding: 0;
}
.actions-menu__item > span {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
[data-action-menu] {
    position: relative;
    
}
[data-action-menu] .actions-menu__dropdown {
    z-index: 99999 !important;
    z-index: var(--z-index-maximum) !important;
    pointer-events: auto; 
}
.card:has([data-action-menu]),
[class*="card"]:has([data-action-menu]),
[class*="Card"]:has([data-action-menu]),
div:has([data-action-menu]):has([style*="overflow"]) {
    
    position: relative;
}
.table-container,
.table-wrapper {
    position: relative;
    overflow-x: auto;
    overflow-y: visible; 
}
td[data-action-menu],
th[data-action-menu],
td:has([data-action-menu]),
th:has([data-action-menu]) {
    overflow: visible !important;
    position: relative;
    
}
td > [data-action-menu],
th > [data-action-menu] {
    position: relative;
    
}
/* Modals - Split Modules */
/* ============================================================================
   MODALS - Base Structure
   Core modal overlay, content container, header, body, footer, close button
   ============================================================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    background-color: var(--color-overlay-backdrop);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    z-index: var(--z-index-dropdown);
    backdrop-filter: blur(4px);
    padding: 1rem;
    padding: var(--spacing-lg);
}
.modal-content {
    background-color: #ffffff;
    background-color: var(--color-surface);
    padding: 2rem;
    padding: var(--spacing-2xl);
    border-radius: 12px;
    border-radius: var(--radius-lg);
    max-width: 600px;
    max-width: var(--modal-width-md);
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    box-shadow: var(--shadow-xl);
}
.modal-content.modal-small {
    max-width: 400px;
    max-width: var(--modal-width-sm);
}
.modal-content.modal-large {
    max-width: 1200px;
    max-width: var(--modal-width-xl);
    padding: 1.5rem;
    padding: var(--spacing-xl);
}
.modal-content.modal-full {
    max-width: 95vw;
    max-width: var(--modal-width-full);
    max-height: 95vh;
}
.modal-header {
    padding-bottom: 1rem;
    padding-bottom: var(--spacing-lg);
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid #f1f5f9;
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-title {
    font-size: 1.5rem;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    font-weight: var(--font-weight-bold);
    color: #1a2332;
    color: var(--color-text);
    margin: 0;
}
.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    font-size: var(--font-size-2xl);
    color: #94a3b8;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    transition: var(--transition);
}
.modal-close-btn:hover {
    background-color: #f8fafc;
    background-color: var(--color-surface-hover);
    color: #1a2332;
    color: var(--color-text);
}
.modal-body {
    color: #1a2332;
    color: var(--color-text);
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.modal-content.modal-large .modal-body {
    max-height: calc(90vh - 200px);
    overflow-y: auto;
    margin-bottom: 0.75rem;
    margin-bottom: var(--spacing-md);
    padding: 0;
}
.modal-footer {
    padding-top: 1rem;
    padding-top: var(--spacing-lg);
    margin-top: 1rem;
    margin-top: var(--spacing-lg);
    border-top: 1px solid #f1f5f9;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    gap: 0.5rem;
    gap: var(--spacing-sm);
    justify-content: flex-end;
}
.modal-content.modal-large .modal-footer {
    padding-top: 0.75rem;
    padding-top: var(--spacing-md);
    margin-top: 0.75rem;
    margin-top: var(--spacing-md);
}
/* ============================================================================
   Login Overrides - Fix text colors in modals with white backgrounds
   ============================================================================ */
.modal-content .login-subtitle {
    color: #94a3b8;
    color: var(--color-text-muted);
}
.modal-content .login-error-message {
    color: #1a2332;
    color: var(--color-text);
}
.modal-content .login-switch-btn,
.modal-content .login-demo-btn {
    color: #64748b;
    color: var(--color-text-secondary);
}
.modal-content .login-switch-btn:hover:not(:disabled),
.modal-content .login-demo-btn:hover:not(:disabled) {
    color: #1a2332;
    color: var(--color-text);
}
.modal-content .login-divider-text {
    color: #94a3b8;
    color: var(--color-text-muted);
}
.modal-content .login-divider-line {
    background-color: #e2e8f0;
    background-color: var(--color-border);
}
.modal-content .login-label {
    color: #1a2332;
    color: var(--color-text);
}
.modal-content .login-input {
    color: #1a2332;
    color: var(--color-text);
    background-color: #ffffff;
    background-color: var(--color-surface);
    border-color: #e2e8f0;
    border-color: var(--color-border);
}
.modal-content .login-input::-moz-placeholder {
    color: #94a3b8;
    color: var(--color-text-muted);
}
.modal-content .login-input::placeholder {
    color: #94a3b8;
    color: var(--color-text-muted);
}
.modal-content .login-input:focus {
    background-color: #ffffff;
    background-color: var(--color-surface);
    border-color: #3b82f6;
    border-color: var(--color-primary);
}
.modal-content .login-error-text {
    color: #ef4444;
    color: var(--color-danger);
}
/* Override inline rgba(255,255,255,...) styles for dark-on-light contexts */
.modal-content span[style*="rgba(255,255,255"] {
    color: #94a3b8 !important;
    color: var(--color-text-muted) !important;
}
.modal-content span[style*="255,255,255"] {
    color: #94a3b8 !important;
    color: var(--color-text-muted) !important;
}
/* ============================================================================
   Mobile Responsive
   ============================================================================ */
@media screen and (max-width: 768px) {
    .modal-overlay {
        padding: 0.75rem;
        padding: var(--spacing-md);
    }
}
@media screen and (max-width: 480px) {
    .modal-overlay {
        padding: 0.5rem;
        padding: var(--spacing-sm);
        align-items: flex-start;
        padding-top: 1rem;
        padding-top: var(--spacing-lg);
    }
}
/* ============================================================================
   MODALS - Dark Auth Modal
   Custom dark theme for authentication modal on landing page
   ============================================================================ */
.modal-content.auth-modal {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    background: var(--auth-modal-gradient);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border: 1px solid var(--color-white-10);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    box-shadow: var(--auth-modal-shadow);
    backdrop-filter: blur(20px);
    max-width: 480px;
    padding: 1.5rem;
    padding: var(--spacing-xl);
}
/* Auth Modal Header with Logo */
.auth-modal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}
.auth-modal-logo {
    width: 90%;
    max-width: 280px;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
    filter: drop-shadow(0 2px 8px var(--color-black-30));
}
.auth-modal-title {
    font-size: 1.5rem;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    color: var(--color-white-95);
    text-align: center;
}
/* Override modal header for auth modal */
.modal-content.auth-modal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid var(--color-white-10);
    padding-bottom: 0.75rem;
    padding-bottom: var(--spacing-md);
    margin-bottom: 0.75rem;
    margin-bottom: var(--spacing-md);
}
.modal-content.auth-modal .modal-title {
    color: rgba(255, 255, 255, 0.95);
    color: var(--color-white-95);
    width: 100%;
}
/* Close button styling for dark modal */
.modal-content.auth-modal .modal-close-btn {
    color: rgba(255, 255, 255, 0.6);
    color: var(--color-white-60);
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
}
.modal-content.auth-modal .modal-close-btn:hover {
    color: rgba(255, 255, 255, 0.9);
    color: var(--color-white-90);
    background-color: rgba(255, 255, 255, 0.1);
    background-color: var(--color-white-10);
}
/* Reset text color overrides for dark theme */
.modal-content.auth-modal .login-subtitle {
    color: rgba(255, 255, 255, 0.7);
    color: var(--color-white-70);
    margin-bottom: 1.5rem;
    text-align: center;
}
.modal-content.auth-modal .login-error-message {
    background-color: rgba(239, 68, 68, 0.15);
    background-color: var(--color-danger-15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border: 1px solid var(--color-danger-30);
    color: rgba(255, 255, 255, 0.95);
    color: var(--color-white-95);
}
.modal-content.auth-modal .login-form-group {
    margin-bottom: 1rem;
    width: 100%;
}
.modal-content.auth-modal .login-label {
    color: rgba(255, 255, 255, 0.9);
    color: var(--color-white-90);
    margin-bottom: 0.5rem;
}
.modal-content.auth-modal .login-input {
    background: rgba(255, 255, 255, 0.05);
    background: var(--color-white-05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border: 1px solid var(--color-white-15);
    color: rgba(255, 255, 255, 0.95);
    color: var(--color-white-95);
    border-radius: 8px;
    border-radius: var(--radius-md);
    box-sizing: border-box;
    width: 100%;
}
.modal-content.auth-modal .login-input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.4);
    color: var(--color-white-40);
}
.modal-content.auth-modal .login-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    color: var(--color-white-40);
}
.modal-content.auth-modal .login-input:focus {
    background: rgba(255, 255, 255, 0.08);
    background: var(--color-white-08);
    border-color: #3b82f6;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    box-shadow: 0 0 0 3px var(--color-primary-muted);
}
.modal-content.auth-modal .login-input-error {
    border-color: rgba(239, 68, 68, 0.5);
    border-color: var(--color-danger-50);
}
.modal-content.auth-modal .login-input-error:focus {
    border-color: rgba(239, 68, 68, 0.7);
    border-color: var(--color-danger-70);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
    box-shadow: 0 0 0 3px var(--color-danger-15);
}
.modal-content.auth-modal .login-error-text {
    color: rgba(248, 113, 113, 0.95);
    color: var(--color-danger-text-light);
}
/* Button container centering */
.modal-content.auth-modal form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}
/* Keep submit button gradient */
.modal-content.auth-modal .login-submit-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    background: var(--color-primary-gradient);
    color: #ffffff;
    color: var(--color-white);
    border-radius: 8px;
    border-radius: var(--radius-md);
    margin-top: 1.25rem;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.modal-content.auth-modal .login-submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    background: var(--color-primary-gradient-hover);
}
/* Divider styling */
.modal-content.auth-modal .login-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.75rem 0;
    width: 100%;
    max-width: 100%;
}
.modal-content.auth-modal .login-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    background: linear-gradient(90deg, transparent, var(--color-white-15), transparent);
}
.modal-content.auth-modal .login-divider-text {
    color: rgba(255, 255, 255, 0.5);
    color: var(--color-white-50);
    font-size: 0.75rem;
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
/* OAuth button - white on dark */
.modal-content.auth-modal .login-oauth-btn {
    background: #ffffff;
    background: var(--color-google-btn-bg);
    color: #3c4043;
    color: var(--color-google-btn-text);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border: 1px solid var(--color-white-20);
    border-radius: 8px;
    border-radius: var(--radius-md);
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
}
.modal-content.auth-modal .login-oauth-btn:hover:not(:disabled) {
    background: #f8f9fa;
    background: var(--color-google-btn-hover);
}
/* Google Sign-In button container */
.modal-content.auth-modal .google-signin-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 52px;
    box-sizing: border-box;
}
/* Force Google's rendered button to match Sign In button width */
.modal-content.auth-modal .google-signin-container > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
}
.modal-content.auth-modal .google-signin-container > div > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.modal-content.auth-modal .google-signin-container iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
/* Fallback Google button styling */
.modal-content.auth-modal .google-signin-btn--fallback {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    min-height: 52px;
    box-sizing: border-box;
}
/* Passkey button */
.modal-content.auth-modal .login-passkey-btn {
    background: rgba(255, 255, 255, 0.05);
    background: var(--color-white-05);
    color: rgba(255, 255, 255, 0.95);
    color: var(--color-white-95);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border: 1.5px solid var(--color-white-20);
    border-radius: 8px;
    border-radius: var(--radius-md);
    margin-bottom: 0;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
}
.modal-content.auth-modal .login-passkey-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    background: var(--color-white-10);
    border-color: rgba(255, 255, 255, 0.4);
    border-color: var(--color-white-40);
}
/* Demo button */
.modal-content.auth-modal .login-demo-btn {
    background: rgba(255, 255, 255, 0.05);
    background: var(--color-white-05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border: 1px solid var(--color-white-15);
    color: rgba(255, 255, 255, 0.85);
    color: var(--color-white-85);
    border-radius: 8px;
    border-radius: var(--radius-md);
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
    width: 100%;
    max-width: 100%;
}
.modal-content.auth-modal .login-demo-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    background: var(--color-white-10);
    border-color: rgba(255, 255, 255, 0.25);
    border-color: var(--color-white-25);
    color: rgba(255, 255, 255, 0.95);
    color: var(--color-white-95);
}
/* Switch button */
.modal-content.auth-modal .login-switch-btn {
    background: rgba(255, 255, 255, 0.05);
    background: var(--color-white-05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border: 1px solid var(--color-white-15);
    color: rgba(255, 255, 255, 0.85);
    color: var(--color-white-85);
    border-radius: 8px;
    border-radius: var(--radius-md);
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
    width: 100%;
    max-width: 100%;
}
.modal-content.auth-modal .login-switch-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    background: var(--color-white-10);
    border-color: rgba(255, 255, 255, 0.25);
    border-color: var(--color-white-25);
    color: rgba(255, 255, 255, 0.95);
    color: var(--color-white-95);
}
/* Override inline styles */
.modal-content.auth-modal span[style*="rgba(255,255,255"] {
    color: inherit !important;
}
.modal-content.auth-modal span[style*="255,255,255"] {
    color: inherit !important;
}
/* ============================================================================
   Mobile Responsive
   ============================================================================ */
@media screen and (max-width: 768px) {
    .modal-content.auth-modal {
        padding: 1rem;
        padding: var(--spacing-lg);
        max-width: 100%;
        margin: 0.75rem;
        margin: var(--spacing-md);
    }

    .auth-modal-logo {
        width: 85%;
        max-width: 240px;
    }

    .auth-modal-title {
        font-size: 1.25rem;
        font-size: var(--font-size-xl);
    }

    .modal-content.auth-modal .login-subtitle {
        font-size: 0.875rem;
        font-size: var(--font-size-sm);
        margin-bottom: 1rem;
    }

    .modal-content.auth-modal form {
        width: 100%;
    }

    .modal-content.auth-modal .login-divider {
        margin: 0.5rem 0;
        gap: 0.75rem;
    }
}
@media screen and (max-width: 480px) {
    .modal-content.auth-modal {
        padding: 0.75rem;
        padding: var(--spacing-md);
        max-width: 100%;
        margin: 0;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }

    .auth-modal-logo {
        width: 80%;
        max-width: 200px;
    }

    .auth-modal-title {
        font-size: 1.125rem;
        font-size: var(--font-size-lg);
    }

    .modal-content.auth-modal .modal-close-btn {
        right: 0.75rem;
        right: var(--spacing-md);
        top: 0.75rem;
        top: var(--spacing-md);
        width: 28px;
        height: 28px;
        font-size: 1.125rem;
        font-size: var(--font-size-lg);
    }

    .modal-content.auth-modal .login-subtitle {
        font-size: 0.75rem;
        font-size: var(--font-size-xs);
        margin-bottom: 0.75rem;
    }

    .modal-content.auth-modal .login-divider {
        margin: 0.5rem 0;
        gap: 0.5rem;
    }

    .modal-content.auth-modal .login-divider-text {
        font-size: 0.625rem;
    }

    .modal-content.auth-modal .login-submit-btn,
    .modal-content.auth-modal .login-oauth-btn,
    .modal-content.auth-modal .login-passkey-btn,
    .modal-content.auth-modal .login-demo-btn,
    .modal-content.auth-modal .login-switch-btn {
        font-size: 0.875rem;
        font-size: var(--font-size-sm);
        padding: 0.5rem 0.75rem;
        padding: var(--spacing-sm) var(--spacing-md);
    }
}
@media screen and (max-width: 360px) {
    .modal-content.auth-modal {
        padding: 0.5rem;
        padding: var(--spacing-sm);
    }

    .auth-modal-logo {
        width: 75%;
        max-width: 180px;
    }

    .auth-modal-title {
        font-size: 0.95rem;
        font-size: var(--font-size-base);
    }
}
/* ============================================================================
   MODALS - Components
   Tabs, sections, stats grid, form layouts for modal content
   ============================================================================ */
/* ============================================================================
   MODAL TABS - For tabbed modal content
   ============================================================================ */
.modal-tabs {
    display: flex;
    gap: 0.5rem;
    gap: var(--spacing-sm);
    margin-bottom: 1.5rem;
    margin-bottom: var(--spacing-xl);
    border-bottom: 2px solid #e2e8f0;
    border-bottom: 2px solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.modal-tabs::-webkit-scrollbar {
    display: none;
}
.modal-tab {
    padding: 0.75rem 1.5rem;
    padding: var(--spacing-md) var(--spacing-xl);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    color: #64748b;
    color: var(--color-text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}
.modal-tab:hover {
    color: #3b82f6;
    color: var(--color-primary);
}
.modal-tab--active {
    color: #3b82f6;
    color: var(--color-primary);
    border-bottom-color: #3b82f6;
    border-bottom-color: var(--color-primary);
}
@media screen and (max-width: 768px) {
    .modal-tabs {
        gap: 0.25rem;
        gap: var(--spacing-xs);
    }

    .modal-tab {
        padding: 0.5rem 1rem;
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: 0.75rem;
        font-size: var(--font-size-xs);
    }
}
@media screen and (max-width: 480px) {
    .modal-tab {
        padding: 0.5rem 0.75rem;
        padding: var(--spacing-sm) var(--spacing-md);
    }
}
/* ============================================================================
   MODAL SECTIONS - For grouped content within modals
   ============================================================================ */
.modal-section {
    margin-bottom: 1.5rem;
    margin-bottom: var(--spacing-xl);
}
.modal-section:last-child {
    margin-bottom: 0;
}
.modal-section-title {
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    color: #64748b;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    margin-bottom: var(--spacing-md);
}
.modal-section-description {
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    color: #94a3b8;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-lg);
    line-height: 1.75;
    line-height: var(--line-height-relaxed);
}
/* ============================================================================
   MODAL STATS GRID - For displaying stats in modals
   ============================================================================ */
.modal-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.75rem;
    grid-gap: var(--spacing-md);
    gap: 0.75rem;
    gap: var(--spacing-md);
}
.modal-stat-card {
    padding: 0.75rem;
    padding: var(--spacing-md);
    background: #f5f7fa;
    background: var(--color-background);
    border: 1px solid #f1f5f9;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    border-radius: var(--radius-md);
    text-align: center;
}
.modal-stat-value {
    font-size: 1.25rem;
    font-size: var(--font-size-xl);
    font-weight: 700;
    font-weight: var(--font-weight-bold);
    color: #1a2332;
    color: var(--color-text);
    margin-bottom: 0.25rem;
    margin-bottom: var(--spacing-xs);
}
.modal-stat-label {
    font-size: 0.75rem;
    font-size: var(--font-size-xs);
    color: #64748b;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
    .modal-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 480px) {
    .modal-stats-grid {
        grid-template-columns: 1fr;
    }

    .modal-stat-card {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    .modal-stat-value {
        margin-bottom: 0;
        order: 2;
    }

    .modal-stat-label {
        order: 1;
    }
}
/* ============================================================================
   MODAL FORM LAYOUT - Consistent form styling within modals
   ============================================================================ */
.modal-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
    grid-gap: var(--spacing-lg);
    gap: 1rem;
    gap: var(--spacing-lg);
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-lg);
}
.modal-form-row--single {
    grid-template-columns: 1fr;
}
@media screen and (max-width: 768px) {
    .modal-form-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        gap: var(--spacing-md);
    }
}
.modal-form-actions {
    display: flex;
    gap: 1rem;
    gap: var(--spacing-lg);
    margin-top: 1rem;
    margin-top: var(--spacing-lg);
}
.modal-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    gap: var(--spacing-lg);
}
/* ============================================================================
   EMPTY STATE - For empty content areas
   ============================================================================ */
.empty-state {
    padding: 1.5rem;
    padding: var(--spacing-xl);
    text-align: center;
    color: #94a3b8;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
}
.empty-state--subtle {
    padding: 1rem;
    padding: var(--spacing-lg);
    background-color: #f5f7fa;
    background-color: var(--color-background);
    border-radius: 8px;
    border-radius: var(--radius-md);
}
/* ============================================================================
   MODALS - Content Components
   File grid, access control sections for modal body content
   ============================================================================ */
/* ============================================================================
   FILE GRID - For file listings in modals (FilesTab, etc.)
   ============================================================================ */
.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 1rem;
    grid-gap: var(--spacing-lg);
    gap: 1rem;
    gap: var(--spacing-lg);
}
.file-card {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    padding: var(--spacing-md);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    border-radius: var(--radius-lg);
    background-color: #ffffff;
    background-color: var(--color-surface);
    transition: all 0.2s ease;
    transition: var(--transition);
}
.file-card:hover {
    border-color: #f1f5f9;
    border-color: var(--color-border-light);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
}
.file-card__preview {
    width: 100%;
    height: 120px;
    margin-bottom: 0.75rem;
    margin-bottom: var(--spacing-md);
    border-radius: 8px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #f5f7fa;
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.file-card__preview img {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}
.file-card__preview-placeholder {
    color: #94a3b8;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    font-size: var(--font-size-2xl);
}
.file-card__preview-loading {
    color: #94a3b8;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
}
.file-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.file-card__name {
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    margin-bottom: 0.25rem;
    margin-bottom: var(--spacing-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1a2332;
    color: var(--color-text);
}
.file-card__meta {
    font-size: 0.75rem;
    font-size: var(--font-size-xs);
    color: #94a3b8;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
    margin-bottom: var(--spacing-sm);
}
.file-card__actions {
    display: flex;
    gap: 0.5rem;
    gap: var(--spacing-sm);
    justify-content: space-between;
}
.file-card__actions .btn {
    padding: 0.25rem 0.75rem;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.75rem;
    font-size: var(--font-size-xs);
}
.file-card__actions .btn--flex {
    flex: 1;
}
@media screen and (max-width: 480px) {
    .file-grid {
        grid-template-columns: 1fr;
    }

    .file-card {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        gap: var(--spacing-md);
    }

    .file-card__preview {
        width: 80px;
        height: 80px;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .file-card__content {
        min-width: 0;
    }

    .file-card__actions {
        flex-wrap: wrap;
    }
}
/* ============================================================================
   ACCESS CONTROL SECTIONS - Numbered sections for settings
   ============================================================================ */
.access-section {
    padding: 1.5rem;
    padding: var(--spacing-xl);
    background-color: #f5f7fa;
    background-color: var(--color-background);
    border-radius: 12px;
    border-radius: var(--radius-lg);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--color-border);
    margin-bottom: 1.5rem;
    margin-bottom: var(--spacing-xl);
}
.access-section__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    gap: var(--spacing-sm);
    margin-bottom: 0.75rem;
    margin-bottom: var(--spacing-md);
}
.access-section__number {
    font-size: 1.25rem;
    font-size: var(--font-size-xl);
    color: #1a2332;
    color: var(--color-text);
}
.access-section__title {
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    color: #1a2332;
    color: var(--color-text);
    margin-bottom: 0;
}
.access-section__description {
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    color: #94a3b8;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
    margin-bottom: var(--spacing-md);
    margin-left: calc(1.25rem + 0.5rem);
    margin-left: calc(var(--font-size-xl) + var(--spacing-sm));
}
.access-section__content {
    margin-left: calc(1.25rem + 0.5rem);
    margin-left: calc(var(--font-size-xl) + var(--spacing-sm));
}
.access-section__subsection {
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-lg);
}
.access-section__subsection:last-child {
    margin-bottom: 0;
}
.access-section__sublabel {
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    color: #1a2332;
    color: var(--color-text);
    margin-bottom: 0.25rem;
    margin-bottom: var(--spacing-xs);
}
.access-section__subhint {
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    color: #94a3b8;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
    margin-bottom: var(--spacing-sm);
}
/* ============================================================================
   ACCESS SUMMARY BOX
   ============================================================================ */
.access-summary {
    padding: 1.5rem;
    padding: var(--spacing-xl);
    background-color: rgba(59, 130, 246, 0.15);
    background-color: var(--color-primary-info);
    border-radius: 12px;
    border-radius: var(--radius-lg);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border: 2px solid var(--color-primary-info-border);
    margin-top: 1rem;
    margin-top: var(--spacing-lg);
}
.access-summary__title {
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    color: #3b82f6;
    color: var(--color-primary);
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-lg);
    font-size: 0.95rem;
    font-size: var(--font-size-base);
}
.access-summary__content {
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    color: #3b82f6;
    color: var(--color-primary);
    line-height: 2;
}
.access-summary__item {
    display: block;
}
.access-summary__item--warning {
    color: #ef4444;
    color: var(--color-danger);
}
.access-summary__divider {
    margin-top: 0.5rem;
    margin-top: var(--spacing-sm);
    padding-top: 0.5rem;
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(59, 130, 246, 0.3);
    border-top: 1px solid var(--color-primary-info-border);
}
.access-summary__list {
    margin-left: 1rem;
    margin-left: var(--spacing-lg);
    margin-top: 0.25rem;
    margin-top: var(--spacing-xs);
}
/**
 * Page Header Patterns
 *
 * Use PageHeader component for consistent page headers.
 * Supports backdrop blur via .backdrop-transparent class.
 */
/* ============================================================================
   PAGE HEADER - Main page-level headers with title, filters, and actions
   ============================================================================ */
.page-header {
    background-color: #ffffff;
    background-color: var(--color-surface);
    padding: 1rem 2rem;
    padding: var(--spacing-lg) var(--spacing-2xl);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    gap: var(--spacing-lg);
    border-bottom: 1px solid #e2e8f0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 8px;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-lg);
}
/* Modifier: Extra bottom margin */
.page-header--margin,
.page-header-with-margin {
    margin-bottom: 2rem;
    margin-bottom: var(--spacing-2xl);
}
/* Backdrop transparent variant for animated backgrounds */
.page-header.backdrop-transparent {
    background-color: rgba(255, 255, 255, 0.85);
    background-color: var(--backdrop-bg, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
/* Title group (title + subtitle) */
.page-header__title-group {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}
/* Page header title (h1/h2) */
.page-header h1,
.page-header h2,
.page-header__title,
.page-header .page-header-title {
    margin: 0;
    font-size: 1.5rem;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    font-weight: var(--font-weight-bold);
    color: #1a2332;
    color: var(--color-text);
}
/* Subtitle/count badge */
.page-header__subtitle {
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    color: #94a3b8;
    color: var(--color-text-muted);
    font-weight: 400;
    font-weight: var(--font-weight-normal);
}
/* Filters container */
.page-header__filters,
.page-header .page-header-filters {
    display: flex;
    gap: 0.75rem;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    align-items: center;
}
/* Actions container */
.page-header__actions,
.page-header .page-header-actions {
    display: flex;
    gap: 0.75rem;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    align-items: center;
}
/* ============================================================================
   SECTION HEADER - Sub-section headers within pages
   ============================================================================ */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-lg);
    padding-bottom: 0.75rem;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid #f1f5f9;
    border-bottom: 1px solid var(--color-border-light);
}
.section-header__title {
    margin: 0;
    font-size: 1.125rem;
    font-size: var(--font-size-lg);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    color: #1a2332;
    color: var(--color-text);
}
.section-header__actions {
    display: flex;
    gap: 0.5rem;
    gap: var(--spacing-sm);
    align-items: center;
}
.admin-header,
.portal-header {
    background-color: #ffffff;
    background-color: var(--color-surface);
    padding: 1rem 2rem;
    padding: var(--spacing-lg) var(--spacing-2xl);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    z-index: var(--z-index-header);
    border-bottom: 1px solid #e2e8f0;
    border-bottom: 1px solid var(--color-border);
    border-top-left-radius: 12px;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: 12px;
    border-top-right-radius: var(--radius-lg);
    width: 100%;
    box-sizing: border-box;
}
/* Transparent backdrop variant for animated backgrounds */
.portal-header.backdrop-transparent,
.admin-header.backdrop-transparent {
    background-color: #ffffff;
    background-color: var(--color-surface);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.admin-header h1,
.portal-header h1 {
    font-size: 1.5rem;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: #1a2332;
    color: var(--color-text);
    margin: 0;
}
.admin-header .header-actions,
.portal-header .header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    gap: var(--spacing-lg);
}
@media screen and (max-width: 768px) {
    .page-header,
    .page-header-with-margin,
    .page-header--margin {
        padding: 0.75rem 1rem;
        padding: var(--spacing-md) var(--spacing-lg);
        gap: 0.75rem;
        gap: var(--spacing-md);
    }

    .page-header h1,
    .page-header h2,
    .page-header__title,
    .page-header .page-header-title {
        font-size: 1.25rem;
        font-size: var(--font-size-xl);
    }

    .page-header__title-group {
        flex-basis: 100%;
        margin-bottom: 0.5rem;
        margin-bottom: var(--spacing-sm);
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        gap: var(--spacing-sm);
    }

    .section-header__actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .admin-header,
    .portal-header {
        padding: 0.75rem 1rem;
        padding: var(--spacing-md) var(--spacing-lg);
        flex-wrap: wrap;
        gap: 0.5rem;
        gap: var(--spacing-sm);
    }

    .admin-header h1,
    .portal-header h1 {
        font-size: 1.125rem;
        font-size: var(--font-size-lg);
    }

    .admin-header .header-actions,
    .portal-header .header-actions {
        gap: 0.5rem;
        gap: var(--spacing-sm);
    }

    .admin-header .header-actions button,
    .portal-header .header-actions button {
        font-size: 0.875rem;
        font-size: var(--font-size-sm);
        padding: 0.25rem 0.75rem;
        padding: var(--spacing-xs) var(--spacing-md);
    }
    
    .portal-header .user-info {
        font-size: 0.875rem;
        font-size: var(--font-size-sm);
    }
    
    .portal-header .user-info > div:first-child {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
        font-size: var(--font-size-xs);
    }
    
    .portal-header .user-info span:last-child {
        display: none;
    }
    
    
    .login-header,
    .login-footer {
        padding: 1rem;
        padding: var(--spacing-lg);
    }
    
    .login-main {
        padding-top: 100px;
    }
    
    .login-card {
        padding: 2rem 1.5rem;
        padding: var(--spacing-2xl) var(--spacing-xl);
    }
    
    .login-modal-overlay {
        padding: 1.5rem;
        align-items: flex-start;
        padding-top: 2rem;
    }
    
    .login-modal {
        padding: 2rem 1.5rem;
        max-width: 100%;
        width: 100%;
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
    }
}
@media screen and (max-width: 480px) {
    .page-header,
    .page-header-with-margin,
    .page-header--margin {
        padding: 0.5rem 0.75rem;
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: 4px;
        border-radius: var(--radius-sm);
    }

    .page-header__title,
    .page-header h1,
    .page-header h2 {
        font-size: 1.125rem;
        font-size: var(--font-size-lg);
    }

    .page-header__subtitle {
        font-size: 0.75rem;
        font-size: var(--font-size-xs);
    }

    .page-header__filters,
    .page-header__actions {
        width: 100%;
        gap: 0.5rem;
        gap: var(--spacing-sm);
    }

    .section-header__title {
        font-size: 0.95rem;
        font-size: var(--font-size-base);
    }
    
    .admin-header,
    .portal-header {
        padding: 0.5rem 0.75rem;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .admin-header h1,
    .portal-header h1 {
        font-size: 1rem;
        font-size: var(--font-size-md);
    }

    .admin-header .header-actions,
    .portal-header .header-actions {
        gap: 0.25rem;
        gap: var(--spacing-xs);
    }

    .admin-header .header-actions button,
    .portal-header .header-actions button {
        font-size: 0.75rem;
        font-size: var(--font-size-xs);
        padding: 0.25rem 0.5rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .portal-header .user-info span:last-child {
        display: none;
    }
    
    .login-header {
        padding: 1rem;
        padding: var(--spacing-lg);
    }
    
    .login-logo {
        font-size: 1.125rem;
        font-size: var(--font-size-lg);
    }
    
    .login-home-btn {
        padding: 0.5rem 1rem;
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: 0.875rem;
        font-size: var(--font-size-sm);
    }
    
    .login-footer {
        font-size: 0.875rem;
        font-size: var(--font-size-sm);
    }
    
    .login-modal-overlay {
        padding: 0.75rem;
        align-items: flex-start;
        padding-top: 1rem;
    }
    
    .login-modal {
        padding: 1.5rem 1.25rem;
        max-width: 100%;
        width: 100%;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        border-radius: 8px;
        border-radius: var(--radius-md);
    }
}
/**
 * Page Section Patterns
 *
 * Consistent page section styling with auto-backdrop transparency support.
 * Use with PageSection and PageHero React components.
 */
/* Base Page Section */
.page-section {
    width: 100%;
    margin-bottom: 1.5rem;
    margin-bottom: var(--spacing-xl);
}
/* Surface variant - solid background */
.page-section--surface {
    background-color: #ffffff;
    background-color: var(--color-surface);
    border-radius: 12px;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    padding: var(--spacing-xl);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
    border: 1px solid #f1f5f9;
    border: 1px solid var(--color-border-light);
}
/* Transparent variant - glassmorphism effect */
.page-section--transparent {
    background-color: rgba(255, 255, 255, 0.8);
    background-color: var(--backdrop-bg, rgba(255, 255, 255, 0.8));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    padding: var(--spacing-xl);
    border: 1px solid #f1f5f9;
    border: 1px solid var(--color-border-light);
}
/* Page Hero/Title Section */
.page-hero {
    width: 100%;
    padding: 2rem;
    padding: var(--spacing-2xl);
    margin-bottom: 1.5rem;
    margin-bottom: var(--spacing-xl);
    background-color: #ffffff;
    background-color: var(--color-surface);
    border-radius: 12px;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
    border: 1px solid #f1f5f9;
    border: 1px solid var(--color-border-light);
}
.page-hero.backdrop-transparent {
    background-color: rgba(255, 255, 255, 0.8);
    background-color: var(--backdrop-bg, rgba(255, 255, 255, 0.8));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.page-hero__title {
    font-size: 1.5rem;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: #1a2332;
    color: var(--color-text);
    margin: 0 0 0.5rem 0;
    margin: 0 0 var(--spacing-sm) 0;
}
.page-hero__subtitle {
    font-size: 0.95rem;
    font-size: var(--font-size-base);
    color: #64748b;
    color: var(--color-text-secondary);
    margin: 0;
}
/* Page Container - constrains content to max-width */
.page-container {
    width: 100%;
    max-width: 1400px;
    max-width: var(--content-max-width);
    margin: 0 auto;
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .page-section--surface,
    .page-section--transparent {
        padding: 1rem;
        padding: var(--spacing-lg);
        border-radius: 8px;
        border-radius: var(--radius-md);
    }

    .page-hero {
        padding: 1.5rem;
        padding: var(--spacing-xl);
        border-radius: 8px;
        border-radius: var(--radius-md);
    }

    .page-hero__title {
        font-size: 1.25rem;
        font-size: var(--font-size-xl);
    }
}
@media (max-width: 480px) {
    .page-section--surface,
    .page-section--transparent {
        padding: 0.75rem;
        padding: var(--spacing-md);
    }

    .page-hero {
        padding: 1rem;
        padding: var(--spacing-lg);
    }

    .page-hero__title {
        font-size: 1.125rem;
        font-size: var(--font-size-lg);
    }

    .page-hero__subtitle {
        font-size: 0.875rem;
        font-size: var(--font-size-sm);
    }
}
.tabs {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.5rem;
    margin-bottom: var(--spacing-xl);
    gap: 0.5rem;
    gap: var(--spacing-sm);
    overflow-x: auto;
    flex-wrap: nowrap;
}
.tab {
    padding: 0.75rem 1rem;
    padding: var(--spacing-md) var(--spacing-lg);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    color: #64748b;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
    transition: var(--transition);
    margin-bottom: -1px;
    white-space: nowrap;
    flex-shrink: 0;
}
.tab:hover {
    color: #3b82f6;
    color: var(--color-primary);
}
.tab-active {
    color: #3b82f6;
    color: var(--color-primary);
    border-bottom-color: #3b82f6;
    border-bottom-color: var(--color-primary);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
}
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(59, 130, 246, 0.1);
    border: 3px solid var(--color-primary-light);
    border-top-color: #3b82f6;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.loading-spinner-lg {
    width: 40px;
    height: 40px;
    border-width: 4px;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    padding: var(--spacing-3xl);
    color: #64748b;
    color: var(--color-text-secondary);
}
.error-message {
    padding: 0.75rem 1rem;
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: rgba(239, 68, 68, 0.1);
    background-color: var(--color-danger-light);
    border: 1px solid #ef4444;
    border: 1px solid var(--color-danger);
    border-radius: 8px;
    border-radius: var(--radius-md);
    color: #ef4444;
    color: var(--color-danger);
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-lg);
}
.success-message {
    padding: 0.75rem 1rem;
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: rgba(34, 197, 94, 0.1);
    background-color: var(--color-success-light);
    border: 1px solid #22c55e;
    border: 1px solid var(--color-success);
    border-radius: 8px;
    border-radius: var(--radius-md);
    color: #22c55e;
    color: var(--color-success);
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-lg);
}
.empty-state {
    text-align: center;
    padding: 3rem;
    padding: var(--spacing-3xl);
    color: #94a3b8;
    color: var(--color-text-muted);
}
.badge {
    padding: 0.25rem 0.5rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 8px;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    display: inline-block;
}
.badge-primary {
    background-color: rgba(59, 130, 246, 0.1);
    background-color: var(--color-primary-light);
    color: #3b82f6;
    color: var(--color-primary);
}
.badge-secondary {
    background-color: rgba(100, 116, 139, 0.1);
    background-color: var(--color-secondary-light);
    color: #64748b;
    color: var(--color-secondary);
}
.badge-success {
    background-color: rgba(34, 197, 94, 0.1);
    background-color: var(--color-success-light);
    color: #22c55e;
    color: var(--color-success);
}
.badge-danger {
    background-color: rgba(239, 68, 68, 0.1);
    background-color: var(--color-danger-light);
    color: #ef4444;
    color: var(--color-danger);
}
.badge-warning {
    background-color: rgba(245, 158, 11, 0.1);
    background-color: var(--color-warning-light);
    color: #f59e0b;
    color: var(--color-warning);
}
.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}
.icon-sm {
    width: 16px;
    height: 16px;
}
.icon-md {
    width: 24px;
    height: 24px;
}
.icon-lg {
    width: 32px;
    height: 32px;
}
.icon-xl {
    width: 40px;
    height: 40px;
}
.icon-logo {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2L2 7L12 12L22 7L12 2Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 17L12 22L22 17' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.7'/%3E%3Cpath d='M2 12L12 17L22 12' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2L2 7L12 12L22 7L12 2Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 17L12 22L22 17' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.7'/%3E%3Cpath d='M2 12L12 17L22 12' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'/%3E%3C/svg%3E");
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
.icon-hamburger {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6h16M4 12h16m-7 6h7'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6h16M4 12h16m-7 6h7'/%3E%3C/svg%3E");
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
.icon-portalapp {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 7V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V7' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 7L3 19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V7' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 11H16' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 15H16' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 7V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V7' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 7L3 19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V7' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 11H16' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 15H16' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
.icon-landingapp {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 3h18v18H3z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 9h6v6H9z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 12h18M12 3v18' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 3h18v18H3z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 9h6v6H9z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 12h18M12 3v18' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'/%3E%3C/svg%3E");
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
.icon-authmodal {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z' fill='%234285F4'/%3E%3Cpath d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z' fill='%2334A853'/%3E%3Cpath d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z' fill='%23FBBC05'/%3E%3Cpath d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z' fill='%23EA4335'/%3E%3C/svg%3E");
    background-color: transparent;
}
.icon-loginapp {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' fill='%2360a5fa'/%3E%3C/svg%3E");
    background-color: transparent;
}
.m-0 { margin: 0; }
.p-0 { padding: 0; }
.m-xs { margin: 0.25rem; margin: var(--spacing-xs); }
.m-sm { margin: 0.5rem; margin: var(--spacing-sm); }
.m-md { margin: 0.75rem; margin: var(--spacing-md); }
.m-lg { margin: 1rem; margin: var(--spacing-lg); }
.m-xl { margin: 1.5rem; margin: var(--spacing-xl); }
.mx-xs { margin-left: 0.25rem; margin-left: var(--spacing-xs); margin-right: 0.25rem; margin-right: var(--spacing-xs); }
.mx-sm { margin-left: 0.5rem; margin-left: var(--spacing-sm); margin-right: 0.5rem; margin-right: var(--spacing-sm); }
.mx-md { margin-left: 0.75rem; margin-left: var(--spacing-md); margin-right: 0.75rem; margin-right: var(--spacing-md); }
.mx-lg { margin-left: 1rem; margin-left: var(--spacing-lg); margin-right: 1rem; margin-right: var(--spacing-lg); }
.mx-xl { margin-left: 1.5rem; margin-left: var(--spacing-xl); margin-right: 1.5rem; margin-right: var(--spacing-xl); }
.my-xs { margin-top: 0.25rem; margin-top: var(--spacing-xs); margin-bottom: 0.25rem; margin-bottom: var(--spacing-xs); }
.my-sm { margin-top: 0.5rem; margin-top: var(--spacing-sm); margin-bottom: 0.5rem; margin-bottom: var(--spacing-sm); }
.my-md { margin-top: 0.75rem; margin-top: var(--spacing-md); margin-bottom: 0.75rem; margin-bottom: var(--spacing-md); }
.my-lg { margin-top: 1rem; margin-top: var(--spacing-lg); margin-bottom: 1rem; margin-bottom: var(--spacing-lg); }
.my-xl { margin-top: 1.5rem; margin-top: var(--spacing-xl); margin-bottom: 1.5rem; margin-bottom: var(--spacing-xl); }
.mt-xs { margin-top: 0.25rem; margin-top: var(--spacing-xs); }
.mt-sm { margin-top: 0.5rem; margin-top: var(--spacing-sm); }
.mt-md { margin-top: 0.75rem; margin-top: var(--spacing-md); }
.mt-lg { margin-top: 1rem; margin-top: var(--spacing-lg); }
.mt-xl { margin-top: 1.5rem; margin-top: var(--spacing-xl); }
.mb-xs { margin-bottom: 0.25rem; margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: 0.5rem; margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: 0.75rem; margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: 1rem; margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: 1.5rem; margin-bottom: var(--spacing-xl); }
.p-xs { padding: 0.25rem; padding: var(--spacing-xs); }
.p-sm { padding: 0.5rem; padding: var(--spacing-sm); }
.p-md { padding: 0.75rem; padding: var(--spacing-md); }
.p-lg { padding: 1rem; padding: var(--spacing-lg); }
.p-xl { padding: 1.5rem; padding: var(--spacing-xl); }
.px-xs { padding-left: 0.25rem; padding-left: var(--spacing-xs); padding-right: 0.25rem; padding-right: var(--spacing-xs); }
.px-sm { padding-left: 0.5rem; padding-left: var(--spacing-sm); padding-right: 0.5rem; padding-right: var(--spacing-sm); }
.px-md { padding-left: 0.75rem; padding-left: var(--spacing-md); padding-right: 0.75rem; padding-right: var(--spacing-md); }
.px-lg { padding-left: 1rem; padding-left: var(--spacing-lg); padding-right: 1rem; padding-right: var(--spacing-lg); }
.px-xl { padding-left: 1.5rem; padding-left: var(--spacing-xl); padding-right: 1.5rem; padding-right: var(--spacing-xl); }
.py-xs { padding-top: 0.25rem; padding-top: var(--spacing-xs); padding-bottom: 0.25rem; padding-bottom: var(--spacing-xs); }
.py-sm { padding-top: 0.5rem; padding-top: var(--spacing-sm); padding-bottom: 0.5rem; padding-bottom: var(--spacing-sm); }
.py-md { padding-top: 0.75rem; padding-top: var(--spacing-md); padding-bottom: 0.75rem; padding-bottom: var(--spacing-md); }
.py-lg { padding-top: 1rem; padding-top: var(--spacing-lg); padding-bottom: 1rem; padding-bottom: var(--spacing-lg); }
.py-xl { padding-top: 1.5rem; padding-top: var(--spacing-xl); padding-bottom: 1.5rem; padding-bottom: var(--spacing-xl); }
.pt-xs { padding-top: 0.25rem; padding-top: var(--spacing-xs); }
.pt-sm { padding-top: 0.5rem; padding-top: var(--spacing-sm); }
.pt-md { padding-top: 0.75rem; padding-top: var(--spacing-md); }
.pt-lg { padding-top: 1rem; padding-top: var(--spacing-lg); }
.pt-xl { padding-top: 1.5rem; padding-top: var(--spacing-xl); }
.pb-xs { padding-bottom: 0.25rem; padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: 0.5rem; padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: 0.75rem; padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: 1rem; padding-bottom: var(--spacing-lg); }
.pb-xl { padding-bottom: 1.5rem; padding-bottom: var(--spacing-xl); }
.text-xs { font-size: 0.75rem; font-size: var(--font-size-xs); }
.text-sm { font-size: 0.875rem; font-size: var(--font-size-sm); }
.text-base { font-size: 0.95rem; font-size: var(--font-size-base); }
.text-md { font-size: 1rem; font-size: var(--font-size-md); }
.text-lg { font-size: 1.125rem; font-size: var(--font-size-lg); }
.text-xl { font-size: 1.25rem; font-size: var(--font-size-xl); }
.text-2xl { font-size: 1.5rem; font-size: var(--font-size-2xl); }
.text-3xl { font-size: 1.875rem; font-size: var(--font-size-3xl); }
.text-4xl { font-size: 2.25rem; font-size: var(--font-size-4xl); }
.font-normal { font-weight: 400; font-weight: var(--font-weight-normal); }
.font-medium { font-weight: 500; font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: 600; font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: 700; font-weight: var(--font-weight-bold); }
.text-primary { color: #3b82f6; color: var(--color-primary); }
.text-secondary { color: #64748b; color: var(--color-text-secondary); }
.text-muted { color: #94a3b8; color: var(--color-text-muted); }
.text-danger { color: #ef4444; color: var(--color-danger); }
.text-success { color: #22c55e; color: var(--color-success); }
.text-warning { color: #f59e0b; color: var(--color-warning); }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.inline-flex { display: inline-flex; }
.hidden { display: none !important; }
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
/* =============================================================================
   FOCUS RING UTILITY
   Consistent focus styling across all interactive elements
   Usage: Add to :focus selectors or use @extend-like patterns
   ============================================================================= */
.focus-ring:focus,
.focus-ring:focus-visible {
    outline: none;
    border-color: #3b82f6;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
/* Mixin-like class for applying focus ring via CSS */
.has-focus-ring:focus {
    outline: none;
    border-color: #3b82f6;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
/* Danger variant for destructive actions */
.focus-ring--danger:focus,
.focus-ring--danger:focus-visible {
    outline: none;
    border-color: #ef4444;
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    box-shadow: 0 0 0 3px var(--color-danger-light);
}
/* Success variant */
.focus-ring--success:focus,
.focus-ring--success:focus-visible {
    outline: none;
    border-color: #22c55e;
    border-color: var(--color-success);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
    box-shadow: 0 0 0 3px var(--color-success-light);
}
/* =============================================================================
   BACKDROP BLUR UTILITIES
   Glassmorphism effects - use instead of repeating backdrop-filter
   ============================================================================= */
.backdrop-blur {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.backdrop-blur-lg {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.backdrop-blur-xl {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
/* =============================================================================
   CONTAINER PADDING UTILITIES
   Responsive padding that scales with viewport
   ============================================================================= */
.container-padding {
    padding: 1.5rem;
    padding: var(--spacing-xl);
}
.container-padding--responsive {
    padding: 1.5rem;
    padding: var(--spacing-xl);
}
@media (max-width: 768px) {
    .container-padding--responsive {
        padding: 1rem;
        padding: var(--spacing-lg);
    }
}
@media (max-width: 480px) {
    .container-padding--responsive {
        padding: 0.75rem;
        padding: var(--spacing-md);
    }
}
/* Section container with max-width */
.section-container {
    max-width: 1400px;
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-left: var(--spacing-lg);
    padding-right: 1rem;
    padding-right: var(--spacing-lg);
}
@media (max-width: 768px) {
    .section-container {
        padding-left: 0.75rem;
        padding-left: var(--spacing-md);
        padding-right: 0.75rem;
        padding-right: var(--spacing-md);
    }
}
@media (max-width: 480px) {
    .section-container {
        padding-left: 0.5rem;
        padding-left: var(--spacing-sm);
        padding-right: 0.5rem;
        padding-right: var(--spacing-sm);
    }
}
/* Responsive - Split Modules */
/* =============================================================================
   RESPONSIVE SCALES
   CSS custom property scale definitions for responsive sizing
   ============================================================================= */
:root {
    --responsive-scale: 1;
    --responsive-text-scale: 1;
    --responsive-padding-scale: 1;
    --responsive-spacing-scale: 1;
}
/* Mobile: Scale down */
@media screen and (max-width: 767px) {
    :root {
        --responsive-scale: 0.85;
        --responsive-text-scale: 0.9;
        --responsive-padding-scale: 0.8;
        --responsive-spacing-scale: 0.85;
    }
}
/* Tablet: Slight scale down */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    :root {
        --responsive-scale: 0.95;
        --responsive-text-scale: 0.95;
        --responsive-padding-scale: 0.9;
        --responsive-spacing-scale: 0.95;
    }
}
/* Desktop: Baseline */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
    :root {
        --responsive-scale: 1;
        --responsive-text-scale: 1;
        --responsive-padding-scale: 1;
        --responsive-spacing-scale: 1;
    }
}
/* Large Desktop: Scale up */
@media screen and (min-width: 1440px) {
    :root {
        --responsive-scale: 1.05;
        --responsive-text-scale: 1.05;
        --responsive-padding-scale: 1.1;
        --responsive-spacing-scale: 1.05;
    }
}
/* Extra Large (1920px+): Use clamp for progressive scaling */
@media screen and (min-width: 1920px) {
    :root {
        --responsive-scale: 1.1;
        --responsive-text-scale: 1.1;
        --responsive-padding-scale: 1.15;
        --responsive-spacing-scale: 1.1;
    }
}
/* Utility classes for responsive values */
.landing-responsive-text {
    font-size: calc(1em * 1);
    font-size: calc(1em * var(--responsive-text-scale));
}
.landing-responsive-padding {
    padding: calc(1em * 1);
    padding: calc(1em * var(--responsive-padding-scale));
}
.landing-responsive-margin {
    margin: calc(1em * 1);
    margin: calc(1em * var(--responsive-spacing-scale));
}
.landing-responsive-gap {
    gap: calc(1em * 1);
    gap: calc(1em * var(--responsive-spacing-scale));
}
/* Landing content container responsive widths */
.landing-content-container {
    max-width: 95%;
}
@media screen and (min-width: 768px) {
    .landing-content-container {
        max-width: min(900px, 90vw);
    }
}
@media screen and (min-width: 1024px) {
    .landing-content-container {
        max-width: min(1000px, 85vw);
    }
}
@media screen and (min-width: 1440px) {
    .landing-content-container {
        max-width: min(1200px, 80vw);
    }
}
@media screen and (min-width: 1920px) {
    .landing-content-container {
        max-width: min(1400px, 75vw);
    }
}
/* =============================================================================
   RESPONSIVE TYPOGRAPHY
   Font size scaling based on responsive scale variables
   ============================================================================= */
body {
    font-size: calc(0.95rem * 1);
    font-size: calc(var(--font-size-base) * var(--responsive-text-scale));
}
h1 {
    font-size: calc(2rem * 1);
    font-size: calc(2rem * var(--responsive-text-scale));
}
h2 {
    font-size: calc(1.5rem * 1);
    font-size: calc(1.5rem * var(--responsive-text-scale));
}
h3 {
    font-size: calc(1.25rem * 1);
    font-size: calc(1.25rem * var(--responsive-text-scale));
}
h4 {
    font-size: calc(1.125rem * 1);
    font-size: calc(1.125rem * var(--responsive-text-scale));
}
/* Header typography */
.admin-header,
.portal-header {
    padding: calc(1.25rem * 1) calc(2rem * 1);
    padding: calc(1.25rem * var(--responsive-padding-scale)) calc(2rem * var(--responsive-padding-scale));
}
.admin-header h1,
.portal-header h1 {
    font-size: calc(1.5rem * 1);
    font-size: calc(1.5rem * var(--responsive-text-scale));
}
.page-header,
.page-header-with-margin {
    padding: calc(1.25rem * 1) calc(2rem * 1);
    padding: calc(1.25rem * var(--responsive-padding-scale)) calc(2rem * var(--responsive-padding-scale));
}
.page-header h1,
.page-header h2,
.page-header .page-header-title {
    font-size: calc(1.5rem * 1);
    font-size: calc(1.5rem * var(--responsive-text-scale));
}
/* Main content area padding */
.admin-main,
.portal-main {
    padding: calc(2.5rem * 1) calc(2rem * 1);
    padding: calc(2.5rem * var(--responsive-padding-scale)) calc(2rem * var(--responsive-padding-scale));
}
/* Card typography */
.card {
    padding: calc(1.5rem * 1);
    padding: calc(1.5rem * var(--responsive-padding-scale));
    margin-bottom: calc(1.5rem * 1);
    margin-bottom: calc(1.5rem * var(--responsive-spacing-scale));
}
/* Button typography */
button {
    padding: calc(0.75rem * 1) calc(1.5rem * 1);
    padding: calc(0.75rem * var(--responsive-padding-scale)) calc(1.5rem * var(--responsive-padding-scale));
    font-size: calc(0.95rem * 1);
    font-size: calc(0.95rem * var(--responsive-text-scale));
}
/* Form input typography */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
    padding: calc(0.75rem * 1);
    padding: calc(0.75rem * var(--responsive-padding-scale));
    font-size: calc(0.95rem * 1);
    font-size: calc(0.95rem * var(--responsive-text-scale));
}
/* Table typography */
th, td {
    padding: calc(1rem * 1) calc(1rem * 1);
    padding: calc(1rem * var(--responsive-padding-scale)) calc(1rem * var(--responsive-padding-scale));
    font-size: calc(0.875rem * 1);
    font-size: calc(0.875rem * var(--responsive-text-scale));
}
/* Modal typography */
.modal-content {
    padding: calc(2rem * 1);
    padding: calc(2rem * var(--responsive-padding-scale));
    font-size: calc(1rem * 1);
    font-size: calc(1rem * var(--responsive-text-scale));
}
.modal-content.modal-large {
    padding: calc(1.5rem * 1);
    padding: calc(1.5rem * var(--responsive-padding-scale));
}
.modal-header {
    padding: calc(1.5rem * 1) calc(2rem * 1);
    padding: calc(1.5rem * var(--responsive-padding-scale)) calc(2rem * var(--responsive-padding-scale));
    font-size: calc(1.5rem * 1);
    font-size: calc(1.5rem * var(--responsive-text-scale));
}
.modal-body {
    padding: calc(1.5rem * 1) calc(2rem * 1);
    padding: calc(1.5rem * var(--responsive-padding-scale)) calc(2rem * var(--responsive-padding-scale));
    font-size: calc(1rem * 1);
    font-size: calc(1rem * var(--responsive-text-scale));
}
.modal-content.modal-large .modal-body {
    padding: 0;
}
.modal-footer {
    padding: calc(1.25rem * 1) calc(2rem * 1);
    padding: calc(1.25rem * var(--responsive-padding-scale)) calc(2rem * var(--responsive-padding-scale));
}
.modal-content.modal-large .modal-footer {
    padding: calc(0.75rem * 1) calc(1rem * 1);
    padding: calc(0.75rem * var(--responsive-padding-scale)) calc(1rem * var(--responsive-padding-scale));
}
/* Sidebar typography */
.admin-sidebar,
.portal-sidebar {
    padding: calc(1rem * 1);
    padding: calc(1rem * var(--responsive-padding-scale));
}
.admin-sidebar .menu-button,
.portal-sidebar .menu-button {
    padding: calc(0.875rem * 1) calc(1rem * 1);
    padding: calc(0.875rem * var(--responsive-padding-scale)) calc(1rem * var(--responsive-padding-scale));
    font-size: calc(0.95rem * 1);
    font-size: calc(0.95rem * var(--responsive-text-scale));
}
/* =============================================================================
   RESPONSIVE TOUCH
   Touch device optimizations for mobile usability
   ============================================================================= */
@media (pointer: coarse) {
    button,
    a,
    input[type="checkbox"],
    input[type="radio"],
    select {
        min-height: 44px;
        min-width: 44px;
    }

    .btn,
    button:not(.modal-close-btn) {
        padding: 0.75rem 1.25rem;
    }
}
/* High DPI / Retina display optimizations */
@media (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}
/* =============================================================================
   RESPONSIVE MOBILE
   Mobile and tablet styles (≤768px, ≤480px)
   ============================================================================= */
/* -----------------------------------------------------------------------------
   TABLET / MOBILE (≤768px)
   ----------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    body {
        font-size: 1.125rem;
        font-size: var(--font-size-lg);
    }

    h1 {
        font-size: 1.875rem;
        font-size: var(--font-size-3xl);
    }

    h2 {
        font-size: 1.5rem;
        font-size: var(--font-size-2xl);
    }

    h3 {
        font-size: 1.25rem;
        font-size: var(--font-size-xl);
    }

    h4 {
        font-size: 1.125rem;
        font-size: var(--font-size-lg);
    }

    /* Layout: Stack sidebar and main */
    .admin-container,
    .portal-container {
        flex-direction: column;
    }

    /* Mobile sidebar overlay */
    .mobile-sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        background: var(--color-overlay-backdrop);
        z-index: calc(1000 - 1);
        z-index: calc(var(--z-index-surface) - 1);
        display: block;
    }

    .mobile-hamburger-btn {
        display: block !important;
    }

    .desktop-sidebar-toggle {
        display: none !important;
    }

    /* Sidebar: Fixed slide-out panel */
    .admin-sidebar,
    .portal-sidebar {
        width: 280px !important;
        max-width: 85vw !important;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100vh !important;
        max-height: 100vh !important;
        z-index: 1000;
        z-index: var(--z-index-surface);
        flex-direction: column;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        border-right: 1px solid var(--color-border-dark);
        border-top: none;
    }

    .admin-sidebar.mobile-sidebar-open,
    .portal-sidebar.mobile-sidebar-open {
        transform: translateX(0);
    }

    .admin-sidebar .sidebar-header,
    .admin-sidebar .sidebar-footer {
        display: flex !important;
    }

    .admin-sidebar .menu-list {
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        gap: 0.25rem;
    }

    .admin-sidebar .menu-item {
        flex: none;
    }

    .admin-sidebar .menu-button {
        flex-direction: row;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        font-size: var(--font-size-sm);
        gap: 0.75rem;
        width: 100%;
    }

    .admin-sidebar .menu-icon {
        font-size: 1.25rem;
        font-size: var(--font-size-xl);
    }

    .admin-sidebar .menu-label {
        font-size: 0.875rem;
        font-size: var(--font-size-sm);
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: none;
    }

    /* Main content: Full width */
    .admin-main,
    .portal-main {
        margin-left: 0 !important;
        padding: 0.5rem !important;
        width: 100%;
    }

    .admin-main > div,
    .portal-main > div {
        padding: 1.25rem 1rem !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Portal main card styling */
    .portal-main > div > div[style*="backgroundColor"][style*="borderRadius"],
    .portal-main > div > div[style*="background"][style*="borderRadius"][style*="boxShadow"],
    .portal-main > div > div[style*="boxShadow"][style*="borderRadius"][style*="border"] {
        padding: 0.75rem !important;
    }

    .portal-main > div > div[style*="linear-gradient"],
    .portal-main > div > div[style*="gradient"] {
        padding: 0.75rem 1rem !important;
    }

    /* Header: Compact */
    .admin-header,
    .portal-header {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem 0.75rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .admin-header h1,
    .portal-header h1 {
        font-size: 1.125rem !important;
        font-size: var(--font-size-lg) !important;
    }

    .admin-header .header-actions,
    .portal-header .header-actions {
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-end;
        gap: 0.5rem !important;
    }

    .admin-header .header-actions button,
    .portal-header .header-actions button {
        font-size: 0.75rem !important;
        font-size: var(--font-size-xs) !important;
        padding: 0.375rem 0.75rem !important;
    }

    .portal-header .user-info {
        font-size: 0.75rem !important;
        font-size: var(--font-size-xs) !important;
    }

    .portal-header .user-info > div:first-child {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.75rem !important;
        font-size: var(--font-size-xs) !important;
    }

    .portal-header .user-info span:last-child {
        display: none !important;
    }

    /* Cards: Single column */
    .card-grid {
        grid-template-columns: 1fr;
    }

    /* Tables: Horizontal scroll */
    .table-container,
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
    }

    table {
        min-width: 600px;
    }

    th, td {
        padding: 0.5rem 0.35rem !important;
        font-size: 0.875rem;
        font-size: var(--font-size-sm);
    }

    table th[style*="padding"],
    table td[style*="padding"] {
        padding: 0.5rem 0.35rem !important;
    }

    /* Forms: Stack */
    .form-row,
    .form-group-row {
        flex-direction: column;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    /* Button grids */
    .button-grid,
    .table-actions.button-grid,
    .button-group.button-grid,
    .action-buttons.button-grid {
        grid-template-columns: repeat(min(2, 2), 1fr) !important;
        grid-template-columns: repeat(min(var(--grid-cols, 2), 2), 1fr) !important;
        gap: 0.375rem;
    }

    .button-group:not(.button-grid),
    .button-row:not(.button-grid),
    .action-buttons:not(.button-grid) {
        flex-direction: column;
        width: 100%;
    }

    .button-group:not(.button-grid) button,
    .button-row:not(.button-grid) button,
    .action-buttons:not(.button-grid) button {
        width: 100%;
        justify-content: center;
    }

    /* Modals: Compact */
    .modal-overlay {
        padding: 0.25rem;
    }

    .modal-content {
        max-height: calc(100vh - 0.5rem);
        max-width: calc(100vw - 0.5rem);
    }

    .modal-header {
        padding: 0.75rem;
    }

    .modal-body {
        padding: 0.75rem;
    }

    .modal-content.modal-large .modal-body {
        padding: 0;
    }

    .modal-footer {
        padding: 0.5rem 0.75rem;
    }

    .modal-content.modal-large .modal-footer {
        padding: 0.5rem;
    }

    /* Tabs: Horizontal scroll */
    .tabs,
    .tab-list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        white-space: nowrap;
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
    }

    .tab {
        flex-shrink: 0;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        font-size: var(--font-size-sm);
    }

    /* Cards: Compact */
    .card {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }

    /* Portal grid */
    .portal-main [style*="gridTemplateColumns"] {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
        gap: 1rem !important;
    }

    .admin-main,
    .portal-main {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .card-title {
        font-size: 1.125rem;
        font-size: var(--font-size-lg);
    }

    /* Filters: Stack */
    .filters,
    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .filters input,
    .filters select {
        width: 100%;
    }

    /* Badges: Compact */
    .badge {
        font-size: 0.75rem;
        font-size: var(--font-size-xs);
        padding: 0.2rem 0.4rem;
    }

    .search-input {
        width: 100%;
    }

    .user-info {
        display: none;
    }

    /* Dropdown: Fixed position */
    .dropdown-menu {
        position: fixed;
        bottom: 70px;
        left: 0.5rem;
        right: 0.5rem;
        max-height: 50vh;
    }
}
/* -----------------------------------------------------------------------------
   LANDSCAPE TABLET (≤768px landscape)
   ----------------------------------------------------------------------------- */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .admin-sidebar,
    .portal-sidebar {
        width: 60px;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        flex-direction: column;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        border-right: 1px solid var(--color-border-dark);
        border-top: none;
    }

    .admin-sidebar .menu-list {
        flex-direction: column;
    }

    .admin-main,
    .portal-main {
        margin-left: 60px !important;
        padding-bottom: 0 !important;
    }

    .modal-content {
        max-height: 90vh;
    }
}
/* -----------------------------------------------------------------------------
   SMALL MOBILE (≤480px)
   ----------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
    body {
        font-size: 1rem;
        font-size: var(--font-size-md);
    }

    h1 {
        font-size: 1.5rem;
        font-size: var(--font-size-2xl);
    }

    h2 {
        font-size: 1.25rem;
        font-size: var(--font-size-xl);
    }

    h3 {
        font-size: 1.125rem;
        font-size: var(--font-size-lg);
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="url"],
    input[type="date"],
    textarea,
    select {
        padding: 0.75rem;
        font-size: 1rem;
        font-size: var(--font-size-md);
    }

    /* Modal: Bottom sheet style */
    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .modal-content {
        max-width: 100vw;
        max-height: 95vh;
        border-radius: 12px 12px 0 0;
        margin: 0;
    }

    .modal-header {
        padding: 0.5rem !important;
    }

    .modal-body {
        padding: 0.5rem !important;
    }

    .modal-content.modal-large .modal-body {
        padding: 0 !important;
    }

    .modal-footer {
        padding: 0.5rem !important;
    }

    .modal-content.modal-large .modal-footer {
        padding: 0.5rem !important;
    }

    /* Header: Extra compact */
    .admin-header h1,
    .portal-header h1 {
        font-size: 1.25rem;
        font-size: var(--font-size-xl);
    }

    /* Table actions: Stack */
    .table-actions.button-grid,
    .row-actions.button-grid {
        grid-template-columns: 1fr !important;
        gap: 0.25rem;
        margin-top: 0.25rem;
    }

    .table-actions:not(.button-grid),
    .row-actions:not(.button-grid) {
        flex-direction: column;
        gap: 0.25rem;
        margin-top: 0.25rem;
    }

    .table-actions button,
    .row-actions button {
        width: 100%;
        padding: 0.35rem 0.7rem !important;
        font-size: 0.75rem !important;
        font-size: var(--font-size-xs) !important;
        min-height: auto;
    }

    td:has(.table-actions),
    td:has(.row-actions) {
        padding: 0.4rem 0.25rem !important;
    }

    .table-hide-mobile {
        display: none;
    }

    td, th {
        padding: 0.4rem 0.25rem !important;
        font-size: 0.875rem;
        font-size: var(--font-size-sm);
    }

    table th[style*="padding"],
    table td[style*="padding"] {
        padding: 0.4rem 0.25rem !important;
    }

    /* Portal grid: Single column */
    .portal-main [style*="gridTemplateColumns"] {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .card {
        border-radius: 8px;
        padding: 0.5rem;
    }

    .admin-main,
    .portal-main {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
    }

    .admin-header,
    .portal-header {
        padding: 0.625rem 0.5rem !important;
    }

    /* Portal gradient cards */
    .portal-main > div > div[style*="background"][style*="borderRadius"][style*="boxShadow"],
    .portal-main > div > div[style*="boxShadow"][style*="borderRadius"][style*="border"] {
        padding: 0.5rem !important;
    }

    .portal-main > div > div[style*="linear-gradient"],
    .portal-main > div > div[style*="gradient"] {
        padding: 1rem 1rem !important;
        margin-bottom: 1rem !important;
    }

    .portal-main > div > div[style*="linear-gradient"] h2,
    .portal-main > div > div[style*="gradient"] h2 {
        font-size: 1.25rem !important;
        font-size: var(--font-size-xl) !important;
        margin-bottom: 0.375rem !important;
    }

    .portal-main > div > div[style*="linear-gradient"] p,
    .portal-main > div > div[style*="gradient"] p {
        font-size: 0.875rem !important;
        font-size: var(--font-size-sm) !important;
    }

    /* Search input */
    .portal-main input[type="text"][placeholder*="Search"] {
        width: 100% !important;
        max-width: calc(100% - 2rem) !important;
    }

    .portal-main [style*="gridTemplateColumns"] {
        gap: 1rem !important;
    }

    /* Section padding */
    section,
    .content-section,
    .page-section {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .form-section {
        padding: 0.75rem 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    .card {
        border-radius: 8px;
        padding: 0.75rem;
    }

    /* Sidebar labels */
    .admin-sidebar:not(.mobile-sidebar-open) .menu-label {
        display: none;
    }

    .admin-sidebar.mobile-sidebar-open .menu-label {
        display: block !important;
        font-size: 0.875rem;
        font-size: var(--font-size-sm);
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: none;
    }

    .admin-sidebar .menu-icon {
        font-size: 1.5rem;
        font-size: var(--font-size-2xl);
    }

    .breadcrumbs {
        overflow-x: auto;
        white-space: nowrap;
    }
}
/* =============================================================================
   RESPONSIVE LANDING
   Landing page specific responsive styles
   ============================================================================= */
/* -----------------------------------------------------------------------------
   TABLET / MOBILE (≤768px)
   ----------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    /* Hero section */
    .landing-gradient-overlay {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        padding-top: 100px !important;
        padding-bottom: 3rem !important;
    }

    .landing-hero-icon {
        margin-bottom: 1.5rem !important;
        padding: 20px !important;
        min-width: 90px !important;
        min-height: 90px !important;
    }

    .landing-gradient-overlay h1 {
        margin-bottom: 1.25rem !important;
        line-height: 1.3 !important;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .landing-gradient-overlay p {
        margin-bottom: 2rem !important;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        line-height: 1.75 !important;
    }

    /* Hero buttons */
    .landing-gradient-overlay .button-grid {
        gap: 0.875rem !important;
        margin-bottom: 2.5rem !important;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .landing-gradient-overlay .button-grid > div {
        padding: 0.625rem 1rem !important;
        gap: 0.375rem !important;
    }

    /* Feature cards */
    .landing-feature-card {
        padding: 1.5rem !important;
        margin-bottom: 1.25rem !important;
    }

    .landing-feature-icon {
        margin-bottom: 1.25rem !important;
    }

    .landing-feature-card h3 {
        margin-bottom: 0.75rem !important;
    }

    .landing-feature-card p {
        line-height: 1.7 !important;
    }

    /* CTA button */
    .landing-cta-button {
        padding: 1rem 2.5rem !important;
        margin-top: 2rem !important;
        font-size: 1rem !important;
        font-size: var(--font-size-md) !important;
    }

    /* Section spacing */
    section[id="roles"],
    section[id="features"] {
        padding: 3.5rem 1.75rem !important;
    }

    section[id="roles"] h2,
    section[id="features"] h2 {
        margin-bottom: 2rem !important;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}
/* -----------------------------------------------------------------------------
   SMALL MOBILE (≤480px)
   ----------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
    /* Hero section */
    .landing-gradient-overlay {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        padding-top: 90px !important;
        padding-bottom: 2.5rem !important;
    }

    .landing-hero-icon {
        padding: 18px !important;
        min-width: 80px !important;
        min-height: 80px !important;
        margin-bottom: 1.25rem !important;
    }

    .landing-gradient-overlay h1 {
        margin-bottom: 1rem !important;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .landing-gradient-overlay p {
        margin-bottom: 1.75rem !important;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    /* Hero buttons */
    .landing-gradient-overlay .button-grid {
        gap: 0.75rem !important;
        margin-bottom: 2rem !important;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .landing-gradient-overlay .button-grid > div {
        padding: 0.5rem 0.875rem !important;
    }

    /* Feature cards */
    .landing-feature-card {
        padding: 1.25rem !important;
        margin-bottom: 1rem !important;
    }

    /* CTA button */
    .landing-cta-button {
        padding: 0.875rem 2rem !important;
        margin-top: 1.75rem !important;
        font-size: 0.95rem !important;
        font-size: var(--font-size-base) !important;
        width: calc(100% - 1rem);
        max-width: 300px;
    }

    /* Section spacing */
    section[id="roles"],
    section[id="features"] {
        padding: 3rem 1.5rem !important;
    }

    section[id="roles"] h2,
    section[id="features"] h2 {
        margin-bottom: 1.75rem !important;
    }
}
/* =============================================================================
   RESPONSIVE LARGE
   Large screen styles (1920px+)
   Consolidated 2560px and 3840px breakpoints using progressive scaling
   ============================================================================= */
/* -----------------------------------------------------------------------------
   EXTRA LARGE (1920px+)
   ----------------------------------------------------------------------------- */
@media screen and (min-width: 1920px) {
    body {
        font-size: calc(1rem * 1);
        font-size: calc(var(--font-size-md) * var(--responsive-text-scale));
    }

    h1 {
        font-size: calc(2.25rem * 1);
        font-size: calc(2.25rem * var(--responsive-text-scale));
    }

    h2 {
        font-size: calc(1.875rem * 1);
        font-size: calc(1.875rem * var(--responsive-text-scale));
    }

    h3 {
        font-size: calc(1.5rem * 1);
        font-size: calc(1.5rem * var(--responsive-text-scale));
    }

    h4 {
        font-size: calc(1.25rem * 1);
        font-size: calc(1.25rem * var(--responsive-text-scale));
    }

    /* Container */
    .admin-container,
    .portal-container {
        width: 100%;
        margin: 0 auto;
    }

    /* Main content */
    .admin-main,
    .portal-main {
        padding: 1.5rem 2rem !important;
        max-width: 100%;
    }

    .admin-header,
    .portal-header {
        padding: 1.25rem 2rem !important;
        max-width: 100%;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .admin-main > *,
    .portal-main > * {
        max-width: 100%;
    }

    /* Cards */
    .card {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    /* Tables */
    th, td {
        padding: 1rem 1.25rem !important;
        font-size: 0.95rem;
        font-size: var(--font-size-base);
    }

    table th[style*="padding"],
    table td[style*="padding"] {
        padding: 1rem 1.25rem !important;
    }

    /* Buttons */
    button {
        padding: 0.875rem 1.75rem;
        font-size: 1rem;
        font-size: var(--font-size-md);
    }

    /* Form inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    textarea,
    select {
        padding: 0.875rem 1rem;
        font-size: 1rem;
        font-size: var(--font-size-md);
    }

    /* Modals */
    .modal-content {
        max-width: 900px;
        padding: 2rem;
    }

    .modal-header {
        padding: 1.5rem 2rem;
        font-size: 1.5rem;
        font-size: var(--font-size-2xl);
    }

    .modal-body {
        padding: 1.5rem 2rem;
        font-size: 1rem;
        font-size: var(--font-size-md);
    }

    .modal-content.modal-large .modal-body {
        padding: 0;
    }

    .modal-footer {
        padding: 1.25rem 2rem;
    }

    .modal-content.modal-large .modal-footer {
        padding: 0.75rem 1rem;
    }

    /* Sidebar */
    .admin-sidebar,
    .portal-sidebar {
        width: 300px;
    }

    .admin-main,
    .portal-main {
        margin-left: 300px;
    }

    .admin-sidebar .menu-button {
        padding: 1rem 1.25rem;
        font-size: 1rem;
        font-size: var(--font-size-md);
    }

    /* Sections */
    section,
    .content-section,
    .page-section {
        padding: 1.5rem 2rem !important;
    }

    .form-section {
        padding: 1.5rem 2rem !important;
        margin-bottom: 1.5rem !important;
    }

    .form-group {
        margin-bottom: 1.25rem;
    }

    .button-group,
    .button-row,
    .action-buttons {
        gap: 0.875rem;
    }

    .card-grid {
        gap: 1.5rem;
    }
}
/* -----------------------------------------------------------------------------
   2K+ SCREENS (2560px+)
   ----------------------------------------------------------------------------- */
@media screen and (min-width: 2560px) {
    body {
        font-size: calc(1.125rem * 1);
        font-size: calc(var(--font-size-lg) * var(--responsive-text-scale));
    }

    h1 {
        font-size: calc(2.5rem * 1);
        font-size: calc(2.5rem * var(--responsive-text-scale));
    }

    h2 {
        font-size: calc(2rem * 1);
        font-size: calc(2rem * var(--responsive-text-scale));
    }

    h3 {
        font-size: calc(1.625rem * 1);
        font-size: calc(1.625rem * var(--responsive-text-scale));
    }

    h4 {
        font-size: calc(1.375rem * 1);
        font-size: calc(1.375rem * var(--responsive-text-scale));
    }

    .admin-container,
    .portal-container {
        width: 100%;
        margin: 0 auto;
    }

    .admin-main,
    .portal-main {
        padding: 2rem 2.5rem !important;
        max-width: 100%;
    }

    .admin-header,
    .portal-header {
        padding: 1.5rem 2.5rem !important;
        max-width: 100%;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .admin-main > *,
    .portal-main > * {
        max-width: 100%;
    }

    .card {
        padding: 2rem;
        margin-bottom: 2rem;
    }

    th, td {
        padding: 1.25rem 1.5rem !important;
        font-size: 1rem;
        font-size: var(--font-size-md);
    }

    table th[style*="padding"],
    table td[style*="padding"] {
        padding: 1.25rem 1.5rem !important;
    }

    button {
        padding: 1rem 2rem;
        font-size: 1.125rem;
        font-size: var(--font-size-lg);
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    textarea,
    select {
        padding: 1rem 1.25rem;
        font-size: 1.125rem;
        font-size: var(--font-size-lg);
    }

    .modal-content {
        max-width: 1000px;
        padding: 2.5rem;
    }

    .modal-header {
        padding: 2rem 2.5rem;
        font-size: 1.875rem;
        font-size: var(--font-size-3xl);
    }

    .modal-body {
        padding: 2rem 2.5rem;
        font-size: 1.125rem;
        font-size: var(--font-size-lg);
    }

    .modal-content.modal-large .modal-body {
        padding: 0;
    }

    .modal-footer {
        padding: 1.5rem 2.5rem;
    }

    .modal-content.modal-large .modal-footer {
        padding: 1rem 1.5rem;
    }

    .admin-sidebar,
    .portal-sidebar {
        width: 320px;
    }

    .admin-main,
    .portal-main {
        margin-left: 320px;
    }

    .admin-sidebar .menu-button {
        padding: 1.125rem 1.5rem;
        font-size: 1.125rem;
        font-size: var(--font-size-lg);
    }

    section,
    .content-section,
    .page-section {
        padding: 2rem 2.5rem !important;
    }

    .form-section {
        padding: 2rem 2.5rem !important;
        margin-bottom: 2rem !important;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .button-group,
    .button-row,
    .action-buttons {
        gap: 1rem;
    }

    .card-grid {
        gap: 1.75rem;
    }

    .admin-sidebar .menu-icon {
        font-size: 1.25rem;
        font-size: var(--font-size-xl);
    }
}
/* -----------------------------------------------------------------------------
   4K SCREENS (3840px+)
   ----------------------------------------------------------------------------- */
@media screen and (min-width: 3840px) {
    body {
        font-size: calc(1.25rem * 1);
        font-size: calc(var(--font-size-xl) * var(--responsive-text-scale));
    }

    h1 {
        font-size: calc(3rem * 1);
        font-size: calc(3rem * var(--responsive-text-scale));
    }

    h2 {
        font-size: calc(2.5rem * 1);
        font-size: calc(2.5rem * var(--responsive-text-scale));
    }

    h3 {
        font-size: calc(2rem * 1);
        font-size: calc(2rem * var(--responsive-text-scale));
    }

    h4 {
        font-size: calc(1.625rem * 1);
        font-size: calc(1.625rem * var(--responsive-text-scale));
    }

    .admin-container,
    .portal-container {
        width: 100%;
        margin: 0 auto;
    }

    .admin-main,
    .portal-main {
        padding: 2.5rem 3rem !important;
        max-width: 100%;
    }

    .admin-header,
    .portal-header {
        padding: 2rem 3rem !important;
        max-width: 100%;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .admin-main > *,
    .portal-main > * {
        max-width: 100%;
    }

    .card {
        padding: 2.5rem;
        margin-bottom: 2.5rem;
    }

    th, td {
        padding: 1.5rem 2rem !important;
        font-size: 1.125rem;
        font-size: var(--font-size-lg);
    }

    table th[style*="padding"],
    table td[style*="padding"] {
        padding: 1.5rem 2rem !important;
    }

    button {
        padding: 1.125rem 2.25rem;
        font-size: 1.125rem;
        font-size: var(--font-size-lg);
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    textarea,
    select {
        padding: 1.125rem 1.5rem;
        font-size: 1.125rem;
        font-size: var(--font-size-lg);
    }

    .modal-content {
        max-width: 1200px;
        padding: 3rem;
    }

    .modal-content.modal-large {
        max-width: 1400px;
        padding: 2rem;
    }

    .modal-header {
        padding: 2.5rem 3rem;
        font-size: 2.25rem;
        font-size: var(--font-size-4xl);
    }

    .modal-body {
        padding: 2.5rem 3rem;
        font-size: 1.125rem;
        font-size: var(--font-size-lg);
    }

    .modal-content.modal-large .modal-body {
        padding: 0;
    }

    .modal-footer {
        padding: 2rem 3rem;
    }

    .modal-content.modal-large .modal-footer {
        padding: 1rem 1.5rem;
    }

    .admin-sidebar,
    .portal-sidebar {
        width: 360px;
    }

    .admin-main,
    .portal-main {
        margin-left: 360px;
    }

    .admin-sidebar .menu-button {
        padding: 1.25rem 1.75rem;
        font-size: 1.125rem;
        font-size: var(--font-size-lg);
    }

    section,
    .content-section,
    .page-section {
        padding: 2.5rem 3rem !important;
    }

    .form-section {
        padding: 2.5rem 3rem !important;
        margin-bottom: 2.5rem !important;
    }

    .table-container,
    .table-wrapper {
        padding: 1rem 1.5rem;
    }

    .badge {
        font-size: 0.875rem;
        font-size: var(--font-size-sm);
        padding: 0.5rem 0.75rem;
    }

    label {
        font-size: 1rem;
        font-size: var(--font-size-md);
        margin-bottom: 0.75rem;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .button-group,
    .button-row,
    .action-buttons {
        gap: 1rem;
    }

    .card-grid {
        gap: 2rem;
    }

    p {
        line-height: 1.75;
    }

    .admin-sidebar .menu-icon {
        font-size: 1.5rem;
        font-size: var(--font-size-2xl);
    }
}
:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
@media print {
    .admin-sidebar,
    .portal-sidebar,
    .modal-overlay,
    .button-row,
    button,
    .no-print {
        display: none !important;
    }
    
    .admin-main,
    .portal-main {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #e2e8f0;
    }
}
.landing-particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
    z-index: var(--z-index-background);
}
.landing-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(147, 197, 253, 0.6);
    will-change: transform;
    animation: floatUp linear infinite;
}
@keyframes floatUp {
    0% {
        transform: translateY(100vh) translateX(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-10vh) translateX(50px) scale(0.5);
        opacity: 0;
    }
}
@keyframes particleFadeIn {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 0.4;
        opacity: var(--particle-opacity, 0.4);
        transform: scale(1);
    }
}
@keyframes particleFloat {
    0% {
        transform: translateY(100vh) translateX(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-10vh) translateX(50px) scale(0.5);
        opacity: 0;
    }
}
.landing-floating-shapes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
    z-index: var(--z-index-background);
}
.landing-shape {
    position: absolute;
    will-change: transform;
}
.landing-shape-hexagon {
    width: 120px;
    height: 104px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(147, 197, 253, 0.12));
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: floatShape 20s ease-in-out infinite;
}
.landing-shape-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgba(147, 197, 253, 0.15);
    background: transparent;
    animation: floatShape 25s ease-in-out infinite reverse;
}
.landing-shape-ring {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 1px solid rgba(59, 130, 246, 0.1);
    background: transparent;
    animation: floatShape 30s ease-in-out infinite;
}
.landing-shape-diamond {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(147, 197, 253, 0.1));
    transform: rotate(45deg);
    animation: floatShape 22s ease-in-out infinite reverse;
}
@keyframes floatShape {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(20px, -30px) rotate(5deg);
    }
    50% {
        transform: translate(-10px, -50px) rotate(-5deg);
    }
    75% {
        transform: translate(30px, -20px) rotate(3deg);
    }
}
.landing-gradient-overlay {
    background: linear-gradient(
        -45deg,
        rgba(26, 35, 50, 0.85),
        rgba(59, 130, 246, 0.3),
        rgba(29, 78, 216, 0.35),
        rgba(147, 197, 253, 0.25),
        rgba(26, 35, 50, 0.85)
    );
    background-size: 300% 300%;
    animation: gradientShift 10s ease infinite !important;
}
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.landing-fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.4s ease forwards;
}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.landing-cta-button {
    position: relative;
    animation: pulseGlow 2s ease-in-out infinite;
}
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 8px 30px rgba(59, 130, 246, 0.65);
    }
}
.landing-cta-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}
.landing-cta-button:hover .landing-cta-arrow {
    transform: translateX(4px);
}
.landing-feature-card {
    position: relative;
    transition: all 0.3s ease;
}
.landing-feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, transparent, transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.landing-feature-card:hover::before {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.5), rgba(147, 197, 253, 0.3));
    opacity: 1;
}
.landing-feature-card:hover {
    transform: translateY(-4px) rotate(0.5deg);
}
.landing-feature-icon {
    transition: transform 0.3s ease;
}
.landing-feature-card:hover .landing-feature-icon {
    transform: scale(1.1);
    animation: iconBounce 0.5s ease;
}
@keyframes iconBounce {
    0%, 100% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.2);
    }
}
.landing-hero-icon {
    animation: heroGlow 3s ease-in-out infinite;
}
@keyframes heroGlow {
    0%, 100% {
        box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 12px 48px rgba(59, 130, 246, 0.5);
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/**
 * Landing Page Header Styles
 * Static styles extracted from LandingHeader.jsx inline styles
 */
.landing-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    z-index: var(--z-index-header);
    padding: 1.5rem 2rem;
    padding: var(--spacing-xl) var(--spacing-2xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    gap: var(--spacing-lg);
    background: linear-gradient(to bottom, rgba(26, 35, 50, 0.98), rgba(26, 35, 50, 0.8));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid var(--color-border-dark);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--font-family);
}
@media (max-width: 768px) {
    .landing-header {
        padding: 1rem;
        padding: var(--spacing-lg);
    }
}
.landing-header__logo-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    gap: var(--spacing-md);
}
.landing-header__logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.38);
    box-shadow: 0 4px 12px var(--color-primary-shadow);
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .landing-header__logo {
        width: 32px;
        height: 32px;
    }
}
.landing-header__brand {
    display: flex;
    flex-direction: column;
}
.landing-header__brand-name {
    font-weight: 700;
    font-weight: var(--font-weight-bold);
    font-size: 0.95rem;
    font-size: var(--font-size-base);
    color: #ffffff;
    color: var(--color-text-on-dark);
}
.landing-header__brand-tagline {
    font-size: 0.75rem;
    font-size: var(--font-size-xs);
    color: var(--white-70);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
@media (max-width: 480px) {
    .landing-header__brand {
        display: none;
    }
}
.landing-header__actions {
    display: flex;
    gap: 0.75rem;
    gap: var(--spacing-md);
    align-items: center;
    flex-wrap: wrap;
}
@media (max-width: 480px) {
    .landing-header {
        padding: 0.75rem 1rem;
        padding: var(--spacing-md) var(--spacing-lg);
        gap: 0.75rem;
        gap: var(--spacing-md);
    }

    .landing-header__actions {
        gap: 0.5rem;
        gap: var(--spacing-sm);
        width: 100%;
        justify-content: flex-end;
    }

    .landing-header__actions button {
        font-size: 0.75rem;
        font-size: var(--font-size-xs);
        padding: 0.25rem 0.75rem;
        padding: var(--spacing-xs) var(--spacing-md);
    }
}
/**
 * Landing Page Hero Section Styles
 * Static styles extracted from HeroSection.jsx inline styles
 */
.hero-container {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--font-family);
}
.hero-content {
    max-width: 900px;
    width: 100%;
    margin: 4px auto;
}
.hero-icon-wrapper {
    width: -moz-fit-content;
    width: fit-content;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-40), var(--primary-hover-30));
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.15);
    padding: 26px;
    min-width: 100px;
    min-height: 100px;
    margin: 0 auto 1.5rem;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    border-radius: var(--radius-full);
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-badge__icon {
    color: #93c5fd;
}
.hero-title {
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, #ffffff, #93c5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}
.hero-subtitle {
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}
.statistics-grid {
    display: grid;
    grid-gap: var(--spacing-4);
    gap: var(--spacing-4);
    margin-bottom: 2rem;
}
.statistics-badge {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
    border-radius: var(--radius-full);
    padding: 0.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: all 0.3s ease;
}
.statistics-badge:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}
.statistics-badge__value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #93c5fd;
}
.statistics-badge__label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}
.features-grid {
    margin-bottom: 2rem;
}
.feature-card {
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: all 0.3s ease;
    text-align: center;
    min-height: 200px;
}
.feature-card:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.feature-card__icon {
    margin-bottom: 1rem;
    color: #93c5fd;
}
.feature-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: white;
}
.feature-card__description {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}
.cta-button-wrapper {
    display: inline-block;
    margin-top: 1.5rem;
    z-index: 2;
}
/**
 * Landing Page Sections Styles
 * Shared styles for Roles, UseCases, Enterprise sections
 */
.section-container {
    position: relative;
    z-index: 1;
    padding: 4rem 2rem;
    padding: var(--spacing-4xl) var(--spacing-2xl);
    max-width: 1400px;
    margin: 0 auto;
    color: white;
}
@media (max-width: 768px) {
    .section-container {
        padding: 3rem 1.5rem;
        padding: var(--spacing-3xl) var(--spacing-xl);
    }
}
@media (max-width: 480px) {
    .section-container {
        padding: 2rem 1rem;
        padding: var(--spacing-2xl) var(--spacing-lg);
    }
}
.section-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    font-weight: var(--font-weight-bold);
    margin-bottom: 2rem;
    margin-bottom: var(--spacing-2xl);
    text-align: center;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, #ffffff, rgba(59, 130, 246, 0.1));
    background: linear-gradient(135deg, var(--color-text-on-dark), var(--color-primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.section-divider {
    position: relative;
    z-index: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    margin: 4px 0;
}
.section-card {
    background-color: rgba(255, 255, 255, 0.08);
    background-color: var(--glass-bg, rgba(255, 255, 255, 0.08));
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
    min-height: 250px;
}
.section-card:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.section-card__icon {
    font-size: 2.25rem;
    font-size: var(--font-size-4xl, 3rem);
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-lg);
    color: rgba(59, 130, 246, 0.1);
    color: var(--color-primary-light);
}
.section-card__title {
    font-size: 1.25rem;
    font-size: var(--font-size-xl);
    font-weight: 700;
    font-weight: var(--font-weight-bold);
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-lg);
    color: #ffffff;
    color: var(--color-text-on-dark);
}
.section-card__subtitle {
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.8);
    color: var(--white-80, rgba(255, 255, 255, 0.8));
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-lg);
    font-style: italic;
    opacity: 0.7;
}
.section-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}
.section-card__feature {
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.75);
    color: var(--white-75, rgba(255, 255, 255, 0.75));
    line-height: 1.75;
    line-height: var(--line-height-relaxed);
    padding: 0.5rem 0;
    padding: var(--spacing-sm) 0;
}
.section-card__feature::before {
    content: "✓ ";
    color: rgba(59, 130, 246, 0.1);
    color: var(--color-primary-light);
    font-weight: 700;
    font-weight: var(--font-weight-bold);
    margin-right: 0.5rem;
    margin-right: var(--spacing-sm);
}
/* Gradient line separators between sections */
.section-separator {
    position: relative;
    z-index: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    margin: 4px 0;
}
/* CTA Section styles */
.cta-section {
    position: relative;
    z-index: 1;
    padding: 4rem 2rem;
    padding: var(--spacing-4xl) var(--spacing-2xl);
    text-align: center;
}
@media (max-width: 768px) {
    .cta-section {
        padding: 3rem 1.5rem;
        padding: var(--spacing-3xl) var(--spacing-xl);
    }
}
@media (max-width: 480px) {
    .cta-section {
        padding: 2rem 1rem;
        padding: var(--spacing-2xl) var(--spacing-lg);
    }
}
.cta-content {
    max-width: 700px;
    margin: 0 auto;
}
.cta-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    font-weight: var(--font-weight-bold);
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-lg);
    background: linear-gradient(135deg, #ffffff, rgba(59, 130, 246, 0.1));
    background: linear-gradient(135deg, var(--color-text-on-dark), var(--color-primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cta-subtitle {
    color: rgba(255, 255, 255, 0.8);
    color: var(--white-80, rgba(255, 255, 255, 0.8));
    font-size: 1.125rem;
    font-size: var(--font-size-lg);
    margin-bottom: 2rem;
    margin-bottom: var(--spacing-2xl);
    line-height: 1.75;
    line-height: var(--line-height-relaxed);
}
.cta-button {
    background-color: #3b82f6;
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: 1rem 3rem;
    padding: var(--spacing-lg) var(--spacing-3xl);
    font-size: 1.125rem;
    font-size: var(--font-size-lg);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    border-radius: 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--font-family);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.38);
    box-shadow: 0 4px 16px var(--color-primary-shadow);
    display: inline-block;
}
.cta-button:hover {
    background-color: #2563eb;
    background-color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.38);
    box-shadow: 0 6px 20px var(--color-primary-shadow);
}
.cta-button:active {
    transform: translateY(0);
}
.cta-arrow {
    margin-left: 0.5rem;
    margin-left: var(--spacing-sm);
    transition: transform 0.3s ease;
}
.cta-button:hover .cta-arrow {
    transform: translateX(4px);
}
/**
 * Landing Page Footer Styles
 * Static styles extracted from Footer.jsx inline styles
 */
.landing-footer {
    position: relative;
    z-index: 10;
    padding: 3rem 2rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    background: linear-gradient(to top, rgba(26, 35, 50, 0.98), rgba(26, 35, 50, 0.8));
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-dark);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--font-family);
}
@media (max-width: 768px) {
    .landing-footer {
        padding: 2rem 1rem;
        font-size: 0.875rem;
    }
}
.landing-footer__grid {
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 2rem;
}
.landing-footer__column {
    display: flex;
    flex-direction: column;
}
.landing-footer__brand-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.landing-footer__brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--primary), #2563eb);
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.landing-footer__brand-info {
    display: flex;
    flex-direction: column;
}
.landing-footer__brand-name {
    font-weight: 700;
    font-size: 1rem;
    color: white;
}
.landing-footer__brand-tagline {
    font-size: 0.7rem;
    opacity: 0.7;
    color: rgba(255, 255, 255, 0.7);
}
.landing-footer__description {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
}
.landing-footer__section-title {
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.landing-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.landing-footer__link-item {
    margin-bottom: 0.5rem;
}
.landing-footer__link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    transition: var(--transition);
    display: inline-block;
}
.landing-footer__link:hover {
    color: #93c5fd;
}
.landing-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
    margin-top: 2rem;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}
.landing-footer__bottom-text {
    margin-bottom: 0.5rem;
}
.landing-footer__developer-link {
    color: #93c5fd;
    text-decoration: none;
    transition: all 0.2s ease;
    transition: var(--transition);
}
.landing-footer__developer-link:hover {
    text-decoration: underline;
}
.landing-footer__credits-button {
    background: none;
    border: none;
    color: #93c5fd;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    transition: all 0.2s ease;
    transition: var(--transition);
    font-family: inherit;
}
.landing-footer__credits-button:hover {
    text-decoration: underline;
    color: #60a5fa;
}
/**
 * PROPRIETARY SOFTWARE LICENSE
 *
 * Copyright (c) 2025 Dronewest Pty Ltd. All rights reserved.
 */
/* =============================================================================
   EARTH DEBUG PANEL STYLES
   ============================================================================= */
.earth-debug-panel {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 420px;
    max-height: 90vh;
    background: rgba(15, 15, 25, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #ffffff;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    z-index: 10000;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
                0 0 1px rgba(255, 255, 255, 0.1) inset;
    backdrop-filter: blur(10px);
    display: none;
}
/* Header */
.debug-header {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px;
    padding-right: 50px; /* Space for close button */
    background: linear-gradient(135deg, rgba(30, 60, 100, 0.4), rgba(20, 40, 70, 0.4));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.debug-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
/* Auth Status Row */
.debug-auth-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    font-size: 12px;
}
.debug-auth-logged-in {
    color: rgba(100, 220, 120, 0.95);
    font-weight: 500;
}
.debug-auth-logged-out {
    color: rgba(255, 180, 80, 0.95);
    font-weight: 500;
}
.debug-actions {
    display: flex;
    gap: 8px;
}
.debug-actions button {
    padding: 6px 12px;
    background: rgba(60, 120, 220, 0.8);
    border: 1px solid rgba(100, 150, 255, 0.3);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
}
.debug-actions button:hover {
    background: rgba(80, 140, 240, 0.9);
    border-color: rgba(100, 150, 255, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(60, 120, 220, 0.3);
}
.debug-actions button:active {
    transform: translateY(0);
}
.debug-actions button#debug-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(200, 60, 60, 0.7);
    border-color: rgba(255, 100, 100, 0.3);
    padding: 6px 10px;
    font-size: 14px;
}
.debug-actions button#debug-close:hover {
    background: rgba(220, 80, 80, 0.85);
    border-color: rgba(255, 100, 100, 0.5);
}
/* Body */
.debug-body {
    max-height: calc(90vh - 110px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
}
.debug-body::-webkit-scrollbar {
    width: 8px;
}
.debug-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}
.debug-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}
.debug-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}
/* Section */
.debug-section {
    margin-bottom: 10px;
    background: rgba(25, 25, 35, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
}
.debug-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: rgba(30, 30, 40, 0.7);
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    font-weight: 600;
    font-size: 13px;
    transition: background 0.2s ease;
}
.debug-section-header:hover {
    background: rgba(40, 40, 50, 0.8);
}
.debug-section-toggle {
    font-size: 16px;
    font-weight: bold;
    color: rgba(100, 180, 255, 0.8);
    min-width: 20px;
    text-align: center;
}
.debug-section-body {
    padding: 14px;
    animation: slideDown 0.2s ease;
}
@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}
/* Subsection */
.debug-subsection {
    margin-top: 18px;
    margin-bottom: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    font-weight: 600;
    color: rgba(100, 180, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
/* Control */
.debug-control {
    margin-bottom: 14px;
}
.debug-control label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}
.debug-slider-group {
    display: flex;
    gap: 10px;
    align-items: center;
}
.debug-slider-group input[type="range"] {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
}
.debug-slider-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #4a9eff, #3080dd);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.debug-slider-group input[type="range"]::-webkit-slider-thumb:hover {
    background: linear-gradient(135deg, #5aafff, #4090ee);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(74, 158, 255, 0.5);
}
.debug-slider-group input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #4a9eff, #3080dd);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.debug-slider-group input[type="number"] {
    width: 75px;
    padding: 6px 8px;
    background: rgba(40, 40, 50, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    font-family: 'Courier New', monospace;
    text-align: center;
}
.debug-slider-group input[type="number"]:focus {
    outline: none;
    border-color: rgba(100, 180, 255, 0.5);
    background: rgba(50, 50, 60, 0.9);
}
.debug-value {
    min-width: 55px;
    text-align: right;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    color: rgba(100, 200, 255, 0.8);
    font-weight: 600;
}
/* Toggle checkbox */
.debug-control-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.debug-control-toggle label {
    margin-bottom: 0;
}
.debug-control-toggle input[type="checkbox"] {
    width: 42px;
    height: 22px;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background: rgba(100, 100, 120, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 11px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}
.debug-control-toggle input[type="checkbox"]::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    background: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.debug-control-toggle input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #4a9eff, #3080dd);
    border-color: rgba(100, 180, 255, 0.5);
}
.debug-control-toggle input[type="checkbox"]:checked::before {
    left: 22px;
    background: #ffffff;
}
/* Footer */
.debug-footer {
    padding: 10px 18px;
    background: rgba(20, 20, 30, 0.8);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}
.debug-footer small {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
}
.debug-footer kbd {
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: rgba(100, 200, 255, 0.9);
}
/* Notification */
.debug-notification {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 14px 20px;
    background: rgba(20, 20, 30, 0.95);
    border: 1px solid rgba(100, 200, 100, 0.3);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    z-index: 10001;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}
.debug-notification.show {
    opacity: 1;
    transform: translateY(0);
}