/* Material Design 3 - Unity IT Theme */
/* Light and Dark Mode Support */

:root {
    /* Light Theme - Unity Colors */
    --md-sys-color-primary: #6ABF4B;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #D4F5C5;
    --md-sys-color-on-primary-container: #1A3A0F;

    --md-sys-color-secondary: #1ABC9C;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #C8F5EA;
    --md-sys-color-on-secondary-container: #0A3529;

    --md-sys-color-tertiary: #9B59B6;
    --md-sys-color-on-tertiary: #FFFFFF;
    --md-sys-color-tertiary-container: #E8D5F0;
    --md-sys-color-on-tertiary-container: #3A1A45;

    --md-sys-color-error: #E74C3C;
    --md-sys-color-on-error: #FFFFFF;
    --md-sys-color-error-container: #FCDAD5;
    --md-sys-color-on-error-container: #410002;

    --md-sys-color-background: #FDFCF7;
    --md-sys-color-on-background: #1C1B1A;
    --md-sys-color-surface: #FDFCF7;
    --md-sys-color-on-surface: #1C1B1A;
    --md-sys-color-surface-variant: #E7E3D9;
    --md-sys-color-on-surface-variant: #49473E;

    --md-sys-color-outline: #7A7768;
    --md-sys-color-outline-variant: #CBC6B9;

    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;

    --md-sys-color-inverse-surface: #313030;
    --md-sys-color-inverse-on-surface: #F4F0E8;
    --md-sys-color-inverse-primary: #A8D98C;

    /* Surface Levels */
    --md-sys-elevation-level0: var(--md-sys-color-surface);
    --md-sys-elevation-level1: #F2F1EC;
    --md-sys-elevation-level2: #EBE9E4;
    --md-sys-elevation-level3: #E5E3DD;
    --md-sys-elevation-level4: #E3E1DB;
    --md-sys-elevation-level5: #DEDCD6;
}

[data-theme="dark"] {
    /* Dark Theme - Unity Colors */
    --md-sys-color-primary: #A8D98C;
    --md-sys-color-on-primary: #1F3A12;
    --md-sys-color-primary-container: #2F5020;
    --md-sys-color-on-primary-container: #C4F5A5;

    --md-sys-color-secondary: #7FE5D0;
    --md-sys-color-on-secondary: #003729;
    --md-sys-color-secondary-container: #1B4E3D;
    --md-sys-color-on-secondary-container: #9BFFEA;

    --md-sys-color-tertiary: #D8B4E8;
    --md-sys-color-on-tertiary: #3E1F4D;
    --md-sys-color-tertiary-container: #563965;
    --md-sys-color-on-tertiary-container: #F5DDFF;

    --md-sys-color-error: #FFB4AB;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000A;
    --md-sys-color-on-error-container: #FFDAD6;

    --md-sys-color-background: #1C1B1A;
    --md-sys-color-on-background: #E6E2D9;
    --md-sys-color-surface: #1C1B1A;
    --md-sys-color-on-surface: #E6E2D9;
    --md-sys-color-surface-variant: #49473E;
    --md-sys-color-on-surface-variant: #CBC6B9;

    --md-sys-color-outline: #958F81;
    --md-sys-color-outline-variant: #49473E;

    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;

    --md-sys-color-inverse-surface: #E6E2D9;
    --md-sys-color-inverse-on-surface: #313030;
    --md-sys-color-inverse-primary: #4B6B38;

    /* Surface Levels - Dark */
    --md-sys-elevation-level0: #1C1B1A;
    --md-sys-elevation-level1: #27251F;
    --md-sys-elevation-level2: #2C2B24;
    --md-sys-elevation-level3: #323028;
    --md-sys-elevation-level4: #34322A;
    --md-sys-elevation-level5: #38362D;
}

/* 1. Monochromatic Minimalism Theme */
[data-theme="monochromatic-minimalism"] {
    --md-sys-color-primary: #888888;
    --md-sys-color-on-primary: #121212;
    --md-sys-color-primary-container: #444444;
    --md-sys-color-on-primary-container: #E0E0E0;

    --md-sys-color-secondary: #B0B0B0;
    --md-sys-color-on-secondary: #121212;
    --md-sys-color-secondary-container: #444444;
    --md-sys-color-on-secondary-container: #E0E0E0;

    --md-sys-color-tertiary: #888888;
    --md-sys-color-on-tertiary: #121212;
    --md-sys-color-tertiary-container: #444444;
    --md-sys-color-on-tertiary-container: #E0E0E0;

    --md-sys-color-error: #FFB4AB;
    --md-sys-color-on-error: #121212;
    --md-sys-color-error-container: #444444;
    --md-sys-color-on-error-container: #E0E0E0;

    --md-sys-color-background: #121212;
    --md-sys-color-on-background: #E0E0E0;
    --md-sys-color-surface: #121212;
    --md-sys-color-on-surface: #E0E0E0;
    --md-sys-color-surface-variant: #444444;
    --md-sys-color-on-surface-variant: #B0B0B0;

    --md-sys-color-outline: #888888;
    --md-sys-color-outline-variant: #444444;

    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;

    --md-sys-color-inverse-surface: #E0E0E0;
    --md-sys-color-inverse-on-surface: #121212;
    --md-sys-color-inverse-primary: #444444;

    /* Surface Levels */
    --md-sys-elevation-level0: #121212;
    --md-sys-elevation-level1: #1E1E1E;
    --md-sys-elevation-level2: #232323;
    --md-sys-elevation-level3: #272727;
    --md-sys-elevation-level4: #2C2C2C;
    --md-sys-elevation-level5: #2E2E2E;
}

/* 2. Neon Highlights Theme */
[data-theme="neon-highlights"] {
    --md-sys-color-primary: #00FF85;
    --md-sys-color-on-primary: #0D0D0D;
    --md-sys-color-primary-container: #004D2E;
    --md-sys-color-on-primary-container: #00FF85;

    --md-sys-color-secondary: #1E90FF;
    --md-sys-color-on-secondary: #0D0D0D;
    --md-sys-color-secondary-container: #003D66;
    --md-sys-color-on-secondary-container: #1E90FF;

    --md-sys-color-tertiary: #FF0099;
    --md-sys-color-on-tertiary: #FFFFFF;
    --md-sys-color-tertiary-container: #66003D;
    --md-sys-color-on-tertiary-container: #FF0099;

    --md-sys-color-error: #FF4444;
    --md-sys-color-on-error: #0D0D0D;
    --md-sys-color-error-container: #660000;
    --md-sys-color-on-error-container: #FF4444;

    --md-sys-color-background: #0D0D0D;
    --md-sys-color-on-background: #FFFFFF;
    --md-sys-color-surface: #0D0D0D;
    --md-sys-color-on-surface: #FFFFFF;
    --md-sys-color-surface-variant: #1A1A1A;
    --md-sys-color-on-surface-variant: #CCCCCC;

    --md-sys-color-outline: #00FF85;
    --md-sys-color-outline-variant: #1A1A1A;

    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;

    --md-sys-color-inverse-surface: #FFFFFF;
    --md-sys-color-inverse-on-surface: #0D0D0D;
    --md-sys-color-inverse-primary: #004D2E;

    /* Surface Levels */
    --md-sys-elevation-level0: #0D0D0D;
    --md-sys-elevation-level1: #141414;
    --md-sys-elevation-level2: #1A1A1A;
    --md-sys-elevation-level3: #1F1F1F;
    --md-sys-elevation-level4: #242424;
    --md-sys-elevation-level5: #2A2A2A;
}

/* 3. Warm Tones Theme */
[data-theme="warm-tones"] {
    --md-sys-color-primary: #FF6F61;
    --md-sys-color-on-primary: #1C1C1C;
    --md-sys-color-primary-container: #663329;
    --md-sys-color-on-primary-container: #FF6F61;

    --md-sys-color-secondary: #DAA520;
    --md-sys-color-on-secondary: #1C1C1C;
    --md-sys-color-secondary-container: #66490C;
    --md-sys-color-on-secondary-container: #DAA520;

    --md-sys-color-tertiary: #FF4500;
    --md-sys-color-on-tertiary: #1C1C1C;
    --md-sys-color-tertiary-container: #661A00;
    --md-sys-color-on-tertiary-container: #FF4500;

    --md-sys-color-error: #FF5555;
    --md-sys-color-on-error: #1C1C1C;
    --md-sys-color-error-container: #660000;
    --md-sys-color-on-error-container: #FF5555;

    --md-sys-color-background: #1C1C1C;
    --md-sys-color-on-background: #F5E8D8;
    --md-sys-color-surface: #1C1C1C;
    --md-sys-color-on-surface: #F5E8D8;
    --md-sys-color-surface-variant: #2D2520;
    --md-sys-color-on-surface-variant: #E0C4A8;

    --md-sys-color-outline: #DAA520;
    --md-sys-color-outline-variant: #2D2520;

    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;

    --md-sys-color-inverse-surface: #F5E8D8;
    --md-sys-color-inverse-on-surface: #1C1C1C;
    --md-sys-color-inverse-primary: #663329;

    /* Surface Levels */
    --md-sys-elevation-level0: #1C1C1C;
    --md-sys-elevation-level1: #252015;
    --md-sys-elevation-level2: #2D2520;
    --md-sys-elevation-level3: #352A25;
    --md-sys-elevation-level4: #3A2E28;
    --md-sys-elevation-level5: #40342D;
}

/* 4. Muted Pastels Theme */
[data-theme="muted-pastels"] {
    --md-sys-color-primary: #A8DADC;
    --md-sys-color-on-primary: #2C2C2C;
    --md-sys-color-primary-container: #457B7D;
    --md-sys-color-on-primary-container: #A8DADC;

    --md-sys-color-secondary: #FFC1CC;
    --md-sys-color-on-secondary: #2C2C2C;
    --md-sys-color-secondary-container: #B85450;
    --md-sys-color-on-secondary-container: #FFC1CC;

    --md-sys-color-tertiary: #B39CD0;
    --md-sys-color-on-tertiary: #2C2C2C;
    --md-sys-color-tertiary-container: #6B4C93;
    --md-sys-color-on-tertiary-container: #B39CD0;

    --md-sys-color-error: #FFB3B3;
    --md-sys-color-on-error: #2C2C2C;
    --md-sys-color-error-container: #8B0000;
    --md-sys-color-on-error-container: #FFB3B3;

    --md-sys-color-background: #2C2C2C;
    --md-sys-color-on-background: #E4E4E4;
    --md-sys-color-surface: #2C2C2C;
    --md-sys-color-on-surface: #E4E4E4;
    --md-sys-color-surface-variant: #3A3A3A;
    --md-sys-color-on-surface-variant: #D0D0D0;

    --md-sys-color-outline: #B39CD0;
    --md-sys-color-outline-variant: #3A3A3A;

    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;

    --md-sys-color-inverse-surface: #E4E4E4;
    --md-sys-color-inverse-on-surface: #2C2C2C;
    --md-sys-color-inverse-primary: #457B7D;

    /* Surface Levels */
    --md-sys-elevation-level0: #2C2C2C;
    --md-sys-elevation-level1: #333333;
    --md-sys-elevation-level2: #3A3A3A;
    --md-sys-elevation-level3: #404040;
    --md-sys-elevation-level4: #454545;
    --md-sys-elevation-level5: #4A4A4A;
}

/* 5. Deep Jewel Tones Theme */
[data-theme="deep-jewel-tones"] {
    --md-sys-color-primary: #004D61;
    --md-sys-color-on-primary: #F0F0F0;
    --md-sys-color-primary-container: #007A9A;
    --md-sys-color-on-primary-container: #F0F0F0;

    --md-sys-color-secondary: #822659;
    --md-sys-color-on-secondary: #F0F0F0;
    --md-sys-color-secondary-container: #B3368A;
    --md-sys-color-on-secondary-container: #F0F0F0;

    --md-sys-color-tertiary: #3E5641;
    --md-sys-color-on-tertiary: #F0F0F0;
    --md-sys-color-tertiary-container: #5C7F5F;
    --md-sys-color-on-tertiary-container: #F0F0F0;

    --md-sys-color-error: #B71C1C;
    --md-sys-color-on-error: #F0F0F0;
    --md-sys-color-error-container: #E53935;
    --md-sys-color-on-error-container: #F0F0F0;

    --md-sys-color-background: #1A1A1A;
    --md-sys-color-on-background: #F0F0F0;
    --md-sys-color-surface: #1A1A1A;
    --md-sys-color-on-surface: #F0F0F0;
    --md-sys-color-surface-variant: #2A2A2A;
    --md-sys-color-on-surface-variant: #D0D0D0;

    --md-sys-color-outline: #004D61;
    --md-sys-color-outline-variant: #2A2A2A;

    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;

    --md-sys-color-inverse-surface: #F0F0F0;
    --md-sys-color-inverse-on-surface: #1A1A1A;
    --md-sys-color-inverse-primary: #B3D9E0;

    /* Surface Levels */
    --md-sys-elevation-level0: #1A1A1A;
    --md-sys-elevation-level1: #212121;
    --md-sys-elevation-level2: #2A2A2A;
    --md-sys-elevation-level3: #303030;
    --md-sys-elevation-level4: #353535;
    --md-sys-elevation-level5: #3B3B3B;
}

/* 6. Contrasting Vibrancy Theme */
[data-theme="contrasting-vibrancy"] {
    --md-sys-color-primary: #00d4ff;
    --md-sys-color-on-primary: #1a1f3e;
    --md-sys-color-primary-container: #0088aa;
    --md-sys-color-on-primary-container: #00d4ff;

    --md-sys-color-secondary: #d946ef;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #a020c0;
    --md-sys-color-on-secondary-container: #f0a0ff;

    --md-sys-color-tertiary: #ff9800;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #e65100;
    --md-sys-color-on-tertiary-container: #ffcc80;

    --md-sys-color-error: #ff5555;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #cc0000;
    --md-sys-color-on-error-container: #ffcccc;

    --md-sys-color-background: #1a1f3e;
    --md-sys-color-on-background: #e8eaf0;
    --md-sys-color-surface: #1a1f3e;
    --md-sys-color-on-surface: #e8eaf0;
    --md-sys-color-surface-variant: #2a3050;
    --md-sys-color-on-surface-variant: #b8c0d8;

    --md-sys-color-outline: #00d4ff;
    --md-sys-color-outline-variant: rgba(255, 255, 255, 0.08);

    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;

    --md-sys-color-inverse-surface: #e8eaf0;
    --md-sys-color-inverse-on-surface: #1a1f3e;
    --md-sys-color-inverse-primary: #0088aa;

    /* Surface Levels */
    --md-sys-elevation-level0: #1a1f3e;
    --md-sys-elevation-level1: #232847;
    --md-sys-elevation-level2: #2a3050;
    --md-sys-elevation-level3: #333a5c;
    --md-sys-elevation-level4: #3a4165;
    --md-sys-elevation-level5: #42496e;
}

/* 7. Nebula Theme */
[data-theme="nebula"] {
    --md-sys-color-primary: #00BCD4;
    --md-sys-color-on-primary: #0a0e27;
    --md-sys-color-primary-container: #006A7A;
    --md-sys-color-on-primary-container: #00BCD4;

    --md-sys-color-secondary: #9C27B0;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #6A1B9A;
    --md-sys-color-on-secondary-container: #D8B4E8;

    --md-sys-color-tertiary: #FF9800;
    --md-sys-color-on-tertiary: #FFFFFF;
    --md-sys-color-tertiary-container: #E65100;
    --md-sys-color-on-tertiary-container: #FFCC80;

    --md-sys-color-error: #FF5252;
    --md-sys-color-on-error: #FFFFFF;
    --md-sys-color-error-container: #B71C1C;
    --md-sys-color-on-error-container: #FFCDD2;

    --md-sys-color-background: #0a0e27;
    --md-sys-color-on-background: #ffffff;
    --md-sys-color-surface: #1a2035;
    --md-sys-color-on-surface: #ffffff;
    --md-sys-color-surface-variant: #242b3d;
    --md-sys-color-on-surface-variant: #7c8db0;

    --md-sys-color-outline: #00BCD4;
    --md-sys-color-outline-variant: rgba(255, 255, 255, 0.06);

    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;

    --md-sys-color-inverse-surface: #ffffff;
    --md-sys-color-inverse-on-surface: #0a0e27;
    --md-sys-color-inverse-primary: #006A7A;

    /* Surface Levels */
    --md-sys-elevation-level0: #0a0e27;
    --md-sys-elevation-level1: #1a2035;
    --md-sys-elevation-level2: #242b3d;
    --md-sys-elevation-level3: #2a3148;
    --md-sys-elevation-level4: #303752;
    --md-sys-elevation-level5: #363d5c;
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', 'Segoe UI', Tahoma, sans-serif;
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Blade Layout */
.blade-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.blade {
    background-color: var(--md-sys-elevation-level1);
    border-left: 1px solid var(--md-sys-color-outline-variant);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
}

.blade::-webkit-scrollbar {
    width: 8px;
}

.blade::-webkit-scrollbar-track {
    background: var(--md-sys-elevation-level0);
}

.blade::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline);
    border-radius: 4px;
}

.blade::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-primary);
}

/* Main Blade (Right Menu) */
.blade-main {
    width: 280px;
    min-width: 280px;
    order: 2;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 100;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed Menu State */
.blade-main.collapsed {
    width: 72px;
    min-width: 72px;
}

.blade-main.collapsed .md-nav-label {
    display: none;
}

.blade-main.collapsed .menu-logo > div {
    display: none;
}

.blade-main.collapsed .menu-user-info {
    display: none;
}

.blade-main.collapsed .menu-signout-text {
    display: none;
}

.blade-main.collapsed .menu-signout-btn {
    padding: 8px;
    min-width: auto;
}

.blade-main.collapsed .menu-theme-text {
    display: none;
}

.blade-main.collapsed .menu-theme-btn {
    padding: 8px !important;
    min-width: auto;
}

.blade-main.collapsed .md-nav-item {
    justify-content: center;
    padding: 12px;
}

.blade-main.collapsed .menu-logo {
    padding: 16px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Content Blade */
.blade-content {
    flex: 1;
    order: 1;
    padding: 24px;
    background-color: var(--md-sys-color-background);
    position: relative;
    z-index: 0;
}

/* Additional Blades (slide in from right) */
.blade-secondary {
    width: 320px;
    min-width: 320px;
    transform: translateX(100%);
    position: fixed;
    right: 280px;
    top: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.blade-secondary.active {
    transform: translateX(0);
    visibility: visible;
}

/* Adjust blade position when main menu is collapsed */
.blade-main.collapsed ~ .blade-secondary {
    right: 72px;
}

/* Adjust filters panel when main menu is collapsed */
.blade-main.collapsed ~ .blade-content #filtersPanel {
    right: 72px !important;
}

.blade-tertiary {
    width: 400px;
    min-width: 400px;
    transform: translateX(100%);
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 15;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
}

.blade-tertiary.active {
    transform: translateX(-600px);
    visibility: visible;
}

/* Adjust tertiary blade when main menu is collapsed */
.blade-main.collapsed ~ .blade-secondary.active ~ .blade-tertiary.active {
    transform: translateX(-392px);
}

/* Blade Header */
.blade-header {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background-color: var(--md-sys-elevation-level2);
}

.blade-back-button {
    background: none;
    border: none;
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    padding: 8px;
    margin-right: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.blade-back-button:hover {
    background-color: var(--md-sys-color-surface-variant);
}

.blade-title {
    font-size: 22px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
}

.blade-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Sub-menu items for blades */
.md-menu-item {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    margin: 4px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-elevation-level1);
    text-decoration: none;
    margin-bottom: 8px;
    border: none; /* Remove default button border */
    width: calc(100% - 24px); /* Make buttons full width like links, accounting for margin */
    text-align: left; /* Align button text to the left like links */
    font-size: inherit; /* Inherit font size for buttons */
    font-family: inherit; /* Inherit font family for buttons */
}

.md-menu-item:hover {
    background-color: var(--md-sys-color-surface-variant);
}

.md-menu-item .material-symbols-outlined {
    font-size: 24px;
    margin-right: 12px;
    color: var(--md-sys-color-primary);
}

.md-menu-item-label {
    font-size: 14px;
    font-weight: 500;
}

/* Material Design 3 Components */

/* Cards */
.md-card {
    background-color: var(--md-sys-elevation-level1);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.md-card:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.md-card-elevated {
    background-color: var(--md-sys-elevation-level2);
    box-shadow: 0 2px 4px rgba(0,0,0,0.14), 0 3px 4px rgba(0,0,0,0.12);
}

/* Buttons */
.md-button {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px;
    padding: 10px 24px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.md-button-filled {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.md-button-filled:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.md-button-tonal {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.md-button-outlined {
    background-color: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline);
}

.md-button-text {
    background-color: transparent;
    color: var(--md-sys-color-primary);
}

/* Navigation Items */
.md-nav-item {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    margin: 4px 12px;
    border-radius: 28px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
}

.md-nav-item:hover {
    background-color: var(--md-sys-color-surface-variant);
}

.md-nav-item.active {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.md-nav-icon {
    font-size: 24px;
    margin-right: 12px;
    width: 24px;
    text-align: center;
}

.md-nav-label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px;
}

/* Input Fields */
.md-input {
    width: 100%;
    padding: 16px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 4px;
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font-size: 16px;
    transition: border-color 0.2s ease;
    font-family: 'Roboto', 'Segoe UI', Tahoma, sans-serif;
}

.md-input:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    border-width: 2px;
}

/* Select dropdown styling */
select.md-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

select.md-input option {
    padding: 12px;
    font-size: 14px;
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

.md-input-container {
    position: relative;
    margin-bottom: 16px;
}

.md-input-label {
    position: absolute;
    left: 16px;
    top: 16px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 16px;
    pointer-events: none;
    transition: all 0.2s ease;
}

.md-input:focus + .md-input-label,
.md-input:not(:placeholder-shown) + .md-input-label {
    top: -8px;
    left: 12px;
    font-size: 12px;
    background-color: var(--md-sys-color-surface);
    padding: 0 4px;
    color: var(--md-sys-color-primary);
}

/* Status Indicator */
.status-indicator {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    margin: 12px;
    border-radius: 8px;
    background-color: var(--md-sys-elevation-level2);
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 12px;
    animation: pulse 2s infinite;
}

.status-dot.connected {
    background-color: var(--md-sys-color-primary);
}

.status-dot.disconnected {
    background-color: var(--md-sys-color-error);
}

.status-dot.connecting {
    background-color: var(--md-sys-color-tertiary);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-text {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}

/* Theme Toggle */
.theme-toggle {
    position: fixed;
    top: 16px;
    right: 300px;
    z-index: 1000;
    background-color: var(--md-sys-elevation-level2);
    border-radius: 20px;
    padding: 8px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.theme-toggle-icon {
    font-size: 24px;
    color: var(--md-sys-color-on-surface);
}

/* Typography */
.md-headline-large {
    font-size: 32px;
    font-weight: 400;
    line-height: 40px;
    color: var(--md-sys-color-on-surface);
}

.md-headline-medium {
    font-size: 28px;
    font-weight: 400;
    line-height: 36px;
    color: var(--md-sys-color-on-surface);
}

.md-title-large {
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
    color: var(--md-sys-color-on-surface);
}

.md-body-large {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--md-sys-color-on-surface);
}

.md-body-medium {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--md-sys-color-on-surface-variant);
}

/* Divider */
.md-divider {
    height: 1px;
    background-color: var(--md-sys-color-outline-variant);
    margin: 16px 0;
}

/* Logo */
.blade-logo {
    padding: 24px;
    text-align: center;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.blade-logo-text {
    font-size: 20px;
    font-weight: 500;
    color: var(--md-sys-color-primary);
    margin-bottom: 4px;
}

.blade-logo-subtitle {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}

/* Navigation Container */
.blade-nav {
    flex: 0 1 auto;
    padding: 16px 0;
    overflow-y: auto;
}

/* Bottom Status Container */
.blade-status {
    padding: 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* Menu Toggle Button */
.menu-toggle-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    border: 1px solid var(--md-sys-color-outline);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    z-index: 10;
}

.menu-toggle-btn:hover {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.menu-toggle-btn .material-symbols-outlined {
    font-size: 20px;
}

.blade-main.collapsed .menu-toggle-btn {
    left: 50%;
    transform: translateX(-50%);
}

/* Responsive */
@media (max-width: 768px) {
    .blade-main {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        transform: translateX(100%);
        z-index: 999;
    }

    .blade-main.mobile-open {
        transform: translateX(0);
    }

    .theme-toggle {
        right: 16px;
    }
}

/* Theme Selector Styles */
.theme-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    border: 2px solid var(--md-sys-color-outline-variant);
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.theme-option:hover {
    background-color: var(--md-sys-elevation-level1);
    border-color: var(--md-sys-color-primary);
}

.theme-option.active {
    border-color: var(--md-sys-color-primary);
    background-color: var(--md-sys-color-primary-container);
}

.theme-preview {
    width: 80px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.theme-preview-content {
    padding: 8px;
}

.theme-info {
    flex: 1;
}

.theme-check {
    color: var(--md-sys-color-primary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.theme-option.active .theme-check {
    opacity: 1;
}

/* Coastal Blue Theme */
html[data-theme="coastal-blue"] {
    --md-sys-color-primary: #014F86;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #A9D6E5;
    --md-sys-color-on-primary-container: #001D32;
    
    --md-sys-color-secondary: #2C7DA0;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #89C2D9;
    --md-sys-color-on-secondary-container: #00131C;
    
    --md-sys-color-background: #012A4A;
    --md-sys-color-on-background: #E0F4FF;
    --md-sys-color-surface: #013A63;
    --md-sys-color-on-surface: #E0F4FF;
    --md-sys-color-surface-variant: #01497C;
    --md-sys-color-on-surface-variant: #A9D6E5;
    
    --md-sys-color-outline: #61A5C2;
    --md-sys-color-outline-variant: #2C7DA0;
    
    --md-sys-elevation-level0: #012A4A;
    --md-sys-elevation-level1: #013A63;
    --md-sys-elevation-level2: #01497C;
    --md-sys-elevation-level3: #014F86;
    --md-sys-elevation-level4: #0A4D7A;
    --md-sys-elevation-level5: #014F86;
}

/* Pink Ombre Theme */
html[data-theme="pink-ombre"] {
    --md-sys-color-primary: #FF477E;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #FFB3D1;
    --md-sys-color-on-primary-container: #5C0022;
    
    --md-sys-color-secondary: #FF85A1;
    --md-sys-color-on-secondary: #FFF;
    --md-sys-color-secondary-container: #FFC8D6;
    --md-sys-color-on-secondary-container: #3A0015;
    
    --md-sys-color-background: #2D0015;
    --md-sys-color-on-background: #FFE5EE;
    --md-sys-color-surface: #4A0020;
    --md-sys-color-on-surface: #FFE5EE;
    --md-sys-color-surface-variant: #6A002D;
    --md-sys-color-on-surface-variant: #FFB3D1;
    
    --md-sys-color-outline: #FF85A1;
    --md-sys-color-outline-variant: #8A003A;
    
    --md-sys-elevation-level0: #2D0015;
    --md-sys-elevation-level1: #4A0020;
    --md-sys-elevation-level2: #6A002D;
    --md-sys-elevation-level3: #8A003A;
    --md-sys-elevation-level4: #A00045;
    --md-sys-elevation-level5: #B50050;
}

/* Room for Comfort Theme */
html[data-theme="room-comfort"] {
    --md-sys-color-primary: #868B8E;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #C4C2C8;
    --md-sys-color-on-primary-container: #2D2E30;
    
    --md-sys-color-secondary: #B9B7BD;
    --md-sys-color-on-secondary: #2D2E30;
    --md-sys-color-secondary-container: #E0DFE4;
    --md-sys-color-on-secondary-container: #1C1C1E;
    
    --md-sys-color-background: #E7D2CC;
    --md-sys-color-on-background: #2D2E30;
    --md-sys-color-surface: #F5F0EE;
    --md-sys-color-on-surface: #2D2E30;
    --md-sys-color-surface-variant: #EEEDED;
    --md-sys-color-on-surface-variant: #49473E;
    
    --md-sys-color-outline: #9DA1A4;
    --md-sys-color-outline-variant: #C4C2C8;
    
    --md-sys-elevation-level0: #E7D2CC;
    --md-sys-elevation-level1: #F0E5E1;
    --md-sys-elevation-level2: #F5F0EE;
    --md-sys-elevation-level3: #FAF7F5;
    --md-sys-elevation-level4: #FFFFFF;
    --md-sys-elevation-level5: #FFFFFF;
}

/* Earthy and Serene Theme */
html[data-theme="earthy-serene"] {
    --md-sys-color-primary: #AC8968;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #D4C4B0;
    --md-sys-color-on-primary-container: #2A1F17;
    
    --md-sys-color-secondary: #93785B;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #C4A888;
    --md-sys-color-on-secondary-container: #1F1611;
    
    --md-sys-color-background: #3E362E;
    --md-sys-color-on-background: #F5F0E8;
    --md-sys-color-surface: #4A4138;
    --md-sys-color-on-surface: #F5F0E8;
    --md-sys-color-surface-variant: #5A4F44;
    --md-sys-color-on-surface-variant: #D4C4B0;
    
    --md-sys-color-outline: #A69080;
    --md-sys-color-outline-variant: #6A5D50;
    
    --md-sys-elevation-level0: #3E362E;
    --md-sys-elevation-level1: #4A4138;
    --md-sys-elevation-level2: #5A4F44;
    --md-sys-elevation-level3: #6A5D50;
    --md-sys-elevation-level4: #7A6B5C;
    --md-sys-elevation-level5: #8A7968;
}

/* Cosmic Artistry Theme */
html[data-theme="cosmic-artistry"] {
    --md-sys-color-primary: #865D36;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #B8956F;
    --md-sys-color-on-primary-container: #1A1208;
    
    --md-sys-color-secondary: #AC8968;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #D4C4B0;
    --md-sys-color-on-secondary-container: #2A1F17;
    
    --md-sys-color-background: #3E362E;
    --md-sys-color-on-background: #F5F0E8;
    --md-sys-color-surface: #4A4138;
    --md-sys-color-on-surface: #F5F0E8;
    --md-sys-color-surface-variant: #5A4F44;
    --md-sys-color-on-surface-variant: #D4C4B0;
    
    --md-sys-color-outline: #A69080;
    --md-sys-color-outline-variant: #6A5D50;
    
    --md-sys-elevation-level0: #3E362E;
    --md-sys-elevation-level1: #4A4138;
    --md-sys-elevation-level2: #5A4F44;
    --md-sys-elevation-level3: #6A5D50;
    --md-sys-elevation-level4: #7A6B5C;
    --md-sys-elevation-level5: #8A7968;
}

/* Striking and Simple Theme */
html[data-theme="striking-simple"] {
    --md-sys-color-primary: #C5C6C7;
    --md-sys-color-on-primary: #0B0C10;
    --md-sys-color-primary-container: #E5E6E7;
    --md-sys-color-on-primary-container: #0B0C10;
    
    --md-sys-color-secondary: #66FCF1;
    --md-sys-color-on-secondary: #0B0C10;
    --md-sys-color-secondary-container: #45A29E;
    --md-sys-color-on-secondary-container: #FFFFFF;
    
    --md-sys-color-background: #0B0C10;
    --md-sys-color-on-background: #C5C6C7;
    --md-sys-color-surface: #1F2833;
    --md-sys-color-on-surface: #C5C6C7;
    --md-sys-color-surface-variant: #2C3531;
    --md-sys-color-on-surface-variant: #C5C6C7;
    
    --md-sys-color-outline: #66FCF1;
    --md-sys-color-outline-variant: #45A29E;
    
    --md-sys-elevation-level0: #0B0C10;
    --md-sys-elevation-level1: #1F2833;
    --md-sys-elevation-level2: #2C3531;
    --md-sys-elevation-level3: #116466;
    --md-sys-elevation-level4: #45A29E;
    --md-sys-elevation-level5: #66FCF1;
}

/* Sleek and Futuristic Theme */
html[data-theme="sleek-futuristic"] {
    --md-sys-color-primary: #116466;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #D1E8E2;
    --md-sys-color-on-primary-container: #001F20;
    
    --md-sys-color-secondary: #45A29E;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #FFCB9A;
    --md-sys-color-on-secondary-container: #2C3531;
    
    --md-sys-color-background: #2C3531;
    --md-sys-color-on-background: #D1E8E2;
    --md-sys-color-surface: #1F2833;
    --md-sys-color-on-surface: #D1E8E2;
    --md-sys-color-surface-variant: #116466;
    --md-sys-color-on-surface-variant: #D9B08C;
    
    --md-sys-color-outline: #45A29E;
    --md-sys-color-outline-variant: #D9B08C;
    
    --md-sys-elevation-level0: #2C3531;
    --md-sys-elevation-level1: #1F2833;
    --md-sys-elevation-level2: #116466;
    --md-sys-elevation-level3: #45A29E;
    --md-sys-elevation-level4: #D9B08C;
    --md-sys-elevation-level5: #FFCB9A;
}

/* Clean and Energetic Theme */
html[data-theme="clean-energetic"] {
    --md-sys-color-primary: #5680E9;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #C1C8E4;
    --md-sys-color-on-primary-container: #001A41;
    
    --md-sys-color-secondary: #5AB9EA;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #84CEEB;
    --md-sys-color-on-secondary-container: #001F2A;
    
    --md-sys-color-background: #F8F9FF;
    --md-sys-color-on-background: #001A41;
    --md-sys-color-surface: #FFFFFF;
    --md-sys-color-on-surface: #001A41;
    --md-sys-color-surface-variant: #E8EAFF;
    --md-sys-color-on-surface-variant: #44474F;
    
    --md-sys-color-outline: #8860D0;
    --md-sys-color-outline-variant: #C1C8E4;
    
    --md-sys-elevation-level0: #F8F9FF;
    --md-sys-elevation-level1: #FFFFFF;
    --md-sys-elevation-level2: #E8EAFF;
    --md-sys-elevation-level3: #C1C8E4;
    --md-sys-elevation-level4: #84CEEB;
    --md-sys-elevation-level5: #5AB9EA;
}
/* Sleek and Futuristic Glassmorphism Theme */
html[data-theme="sleek-futuristic"] {
    --md-sys-color-primary: #116466;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: rgba(209, 232, 226, 0.2);
    --md-sys-color-on-primary-container: #D1E8E2;
    
    --md-sys-color-secondary: #45A29E;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: rgba(255, 203, 154, 0.15);
    --md-sys-color-on-secondary-container: #FFCB9A;
    
    --md-sys-color-background: #2C3531;
    --md-sys-color-on-background: #D1E8E2;
    --md-sys-color-surface: rgba(31, 40, 51, 0.8);
    --md-sys-color-on-surface: #D1E8E2;
    --md-sys-color-surface-variant: rgba(17, 100, 102, 0.3);
    --md-sys-color-on-surface-variant: #D9B08C;
    
    --md-sys-color-outline: rgba(69, 162, 158, 0.5);
    --md-sys-color-outline-variant: rgba(217, 176, 140, 0.3);
    
    --md-sys-elevation-level0: #2C3531;
    --md-sys-elevation-level1: rgba(31, 40, 51, 0.9);
    --md-sys-elevation-level2: rgba(17, 100, 102, 0.4);
    --md-sys-elevation-level3: rgba(69, 162, 158, 0.3);
    --md-sys-elevation-level4: rgba(217, 176, 140, 0.2);
    --md-sys-elevation-level5: rgba(255, 203, 154, 0.15);
}

html[data-theme="sleek-futuristic"] .md-card {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(69, 162, 158, 0.2);
}

html[data-theme="sleek-futuristic"] .blade {
    backdrop-filter: blur(15px);
    border-left: 1px solid rgba(69, 162, 158, 0.3);
}

html[data-theme="sleek-futuristic"] .md-button-filled {
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
/* AI Website Builder Theme */
html[data-theme="ai-builder"] {
    --md-sys-color-primary: #6366F1;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: rgba(99, 102, 241, 0.1);
    --md-sys-color-on-primary-container: #6366F1;
    
    --md-sys-color-secondary: #8B5CF6;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: rgba(139, 92, 246, 0.1);
    --md-sys-color-on-secondary-container: #8B5CF6;
    
    --md-sys-color-background: #0F0F23;
    --md-sys-color-on-background: #F8FAFC;
    --md-sys-color-surface: rgba(15, 15, 35, 0.95);
    --md-sys-color-on-surface: #F8FAFC;
    --md-sys-color-surface-variant: rgba(30, 30, 60, 0.8);
    --md-sys-color-on-surface-variant: #CBD5E1;
    
    --md-sys-color-outline: rgba(99, 102, 241, 0.3);
    --md-sys-color-outline-variant: rgba(139, 92, 246, 0.2);
    
    --md-sys-elevation-level0: #0F0F23;
    --md-sys-elevation-level1: rgba(15, 15, 35, 0.95);
    --md-sys-elevation-level2: rgba(30, 30, 60, 0.9);
    --md-sys-elevation-level3: rgba(45, 45, 90, 0.8);
    --md-sys-elevation-level4: rgba(60, 60, 120, 0.7);
    --md-sys-elevation-level5: rgba(75, 75, 150, 0.6);
}

html[data-theme="ai-builder"] .md-card {
    backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.2);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
}

html[data-theme="ai-builder"] .blade {
    backdrop-filter: blur(25px);
    border-left: 1px solid rgba(99, 102, 241, 0.3);
    background: linear-gradient(180deg, rgba(15, 15, 35, 0.98) 0%, rgba(30, 30, 60, 0.95) 100%);
}

html[data-theme="ai-builder"] .md-button-filled {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.3);
}

html[data-theme="ai-builder"] .md-nav-item:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    backdrop-filter: blur(10px);
}
/* Retro Futurism Theme */
html[data-theme="retro-futurism"] {
    --md-sys-color-primary: #FF6B35;
    --md-sys-color-on-primary: #000000;
    --md-sys-color-primary-container: #FFE5DB;
    --md-sys-color-on-primary-container: #FF6B35;
    
    --md-sys-color-secondary: #00D9FF;
    --md-sys-color-on-secondary: #000000;
    --md-sys-color-secondary-container: #B3F0FF;
    --md-sys-color-on-secondary-container: #00D9FF;
    
    --md-sys-color-background: #1A0B2E;
    --md-sys-color-on-background: #FFFFFF;
    --md-sys-color-surface: #2D1B69;
    --md-sys-color-on-surface: #FFFFFF;
    --md-sys-color-surface-variant: #7209B7;
    --md-sys-color-on-surface-variant: #FFFFFF;
    
    --md-sys-color-outline: #FF6B35;
    --md-sys-color-outline-variant: #00D9FF;
    
    --md-sys-elevation-level0: #1A0B2E;
    --md-sys-elevation-level1: #2D1B69;
    --md-sys-elevation-level2: #7209B7;
    --md-sys-elevation-level3: #FF6B35;
    --md-sys-elevation-level4: #00D9FF;
    --md-sys-elevation-level5: #FFFFFF;
}

html[data-theme="retro-futurism"] .md-card {
    border: 2px solid #FF6B35;
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
}

html[data-theme="retro-futurism"] .md-button-filled {
    background: linear-gradient(45deg, #FF6B35, #00D9FF);
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.7);
}

/* Cyberpunk Theme */
html[data-theme="cyberpunk"] {
    --md-sys-color-primary: #00FF41;
    --md-sys-color-on-primary: #000000;
    --md-sys-color-primary-container: rgba(0, 255, 65, 0.1);
    --md-sys-color-on-primary-container: #00FF41;
    
    --md-sys-color-secondary: #FF0080;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: rgba(255, 0, 128, 0.1);
    --md-sys-color-on-secondary-container: #FF0080;
    
    --md-sys-color-background: #0A0A0A;
    --md-sys-color-on-background: #00FF41;
    --md-sys-color-surface: #1A1A1A;
    --md-sys-color-on-surface: #00FF41;
    --md-sys-color-surface-variant: #2A2A2A;
    --md-sys-color-on-surface-variant: #00FFFF;
    
    --md-sys-color-outline: #00FF41;
    --md-sys-color-outline-variant: #FF0080;
    
    --md-sys-elevation-level0: #0A0A0A;
    --md-sys-elevation-level1: #1A1A1A;
    --md-sys-elevation-level2: #2A2A2A;
    --md-sys-elevation-level3: #3A3A3A;
    --md-sys-elevation-level4: #4A4A4A;
    --md-sys-elevation-level5: #5A5A5A;
}

html[data-theme="cyberpunk"] .md-card {
    border: 1px solid #00FF41;
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.5), inset 0 0 10px rgba(255, 0, 128, 0.1);
}

html[data-theme="cyberpunk"] .md-button-filled {
    background: #00FF41;
    color: #000000;
    text-shadow: 0 0 5px #00FF41;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.8);
}

/* Pure Glassmorphism Theme */
html[data-theme="glassmorphism"] {
    --md-sys-color-primary: #FFFFFF;
    --md-sys-color-on-primary: #000000;
    --md-sys-color-primary-container: rgba(255, 255, 255, 0.1);
    --md-sys-color-on-primary-container: #FFFFFF;
    
    --md-sys-color-secondary: #E0E0E0;
    --md-sys-color-on-secondary: #000000;
    --md-sys-color-secondary-container: rgba(224, 224, 224, 0.1);
    --md-sys-color-on-secondary-container: #E0E0E0;
    
    --md-sys-color-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --md-sys-color-on-background: #FFFFFF;
    --md-sys-color-surface: rgba(255, 255, 255, 0.1);
    --md-sys-color-on-surface: #FFFFFF;
    --md-sys-color-surface-variant: rgba(255, 255, 255, 0.05);
    --md-sys-color-on-surface-variant: #FFFFFF;
    
    --md-sys-color-outline: rgba(255, 255, 255, 0.2);
    --md-sys-color-outline-variant: rgba(255, 255, 255, 0.1);
    
    --md-sys-elevation-level0: rgba(255, 255, 255, 0.05);
    --md-sys-elevation-level1: rgba(255, 255, 255, 0.1);
    --md-sys-elevation-level2: rgba(255, 255, 255, 0.15);
    --md-sys-elevation-level3: rgba(255, 255, 255, 0.2);
    --md-sys-elevation-level4: rgba(255, 255, 255, 0.25);
    --md-sys-elevation-level5: rgba(255, 255, 255, 0.3);
}

html[data-theme="glassmorphism"] body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

html[data-theme="glassmorphism"] .md-card {
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

html[data-theme="glassmorphism"] .blade {
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

html[data-theme="glassmorphism"] .md-button-filled {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}