/* Material Design 3 Core Components */
/* Based on Google's Material Design 3 specifications */

/* Material Design 3 Color System */
:root {
    /* Primary Colors */
    --md-sys-color-primary: #6750a4;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #eaddff;
    --md-sys-color-on-primary-container: #21005d;
    
    /* Secondary Colors */
    --md-sys-color-secondary: #625b71;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #e8def8;
    --md-sys-color-on-secondary-container: #1d192b;
    
    /* Tertiary Colors */
    --md-sys-color-tertiary: #7d5260;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #ffd8e4;
    --md-sys-color-on-tertiary-container: #31111d;
    
    /* Error Colors */
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;
    
    /* Surface Colors */
    --md-sys-color-surface: #fffbfe;
    --md-sys-color-on-surface: #1c1b1f;
    --md-sys-color-surface-variant: #e7e0ec;
    --md-sys-color-on-surface-variant: #49454f;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f7f2fa;
    --md-sys-color-surface-container: #f3edf7;
    --md-sys-color-surface-container-high: #ece6f0;
    --md-sys-color-surface-container-highest: #ffffff;
    
    /* Background Colors */
    --md-sys-color-background: #fffbfe;
    --md-sys-color-on-background: #1c1b1f;
    
    /* Outline Colors */
    --md-sys-color-outline: #79747e;
    --md-sys-color-outline-variant: #cac4d0;
    
    /* Shadow Colors */
    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;
    
    /* Inverse Colors */
    --md-sys-color-inverse-surface: #313033;
    --md-sys-color-inverse-on-surface: #f4eff4;
    --md-sys-color-inverse-primary: #d0bcff;
    
    /* Typography Scale */
    --md-sys-typescale-display-large-font: 'Roboto', sans-serif;
    --md-sys-typescale-display-large-size: 57px;
    --md-sys-typescale-display-large-line-height: 64px;
    --md-sys-typescale-display-large-weight: 400;
    --md-sys-typescale-display-large-tracking: -0.25px;
    
    --md-sys-typescale-display-medium-size: 45px;
    --md-sys-typescale-display-medium-line-height: 52px;
    --md-sys-typescale-display-medium-weight: 400;
    --md-sys-typescale-display-medium-tracking: 0px;
    
    --md-sys-typescale-display-small-size: 36px;
    --md-sys-typescale-display-small-line-height: 44px;
    --md-sys-typescale-display-small-weight: 400;
    --md-sys-typescale-display-small-tracking: 0px;
    
    --md-sys-typescale-headline-large-size: 32px;
    --md-sys-typescale-headline-large-line-height: 40px;
    --md-sys-typescale-headline-large-weight: 400;
    --md-sys-typescale-headline-large-tracking: 0px;
    
    --md-sys-typescale-headline-medium-size: 28px;
    --md-sys-typescale-headline-medium-line-height: 36px;
    --md-sys-typescale-headline-medium-weight: 400;
    --md-sys-typescale-headline-medium-tracking: 0px;
    
    --md-sys-typescale-headline-small-size: 24px;
    --md-sys-typescale-headline-small-line-height: 32px;
    --md-sys-typescale-headline-small-weight: 400;
    --md-sys-typescale-headline-small-tracking: 0px;
    
    --md-sys-typescale-title-large-size: 22px;
    --md-sys-typescale-title-large-line-height: 28px;
    --md-sys-typescale-title-large-weight: 400;
    --md-sys-typescale-title-large-tracking: 0px;
    
    --md-sys-typescale-title-medium-size: 16px;
    --md-sys-typescale-title-medium-line-height: 24px;
    --md-sys-typescale-title-medium-weight: 500;
    --md-sys-typescale-title-medium-tracking: 0.1px;
    
    --md-sys-typescale-title-small-size: 14px;
    --md-sys-typescale-title-small-line-height: 20px;
    --md-sys-typescale-title-small-weight: 500;
    --md-sys-typescale-title-small-tracking: 0.1px;
    
    --md-sys-typescale-body-large-size: 16px;
    --md-sys-typescale-body-large-line-height: 24px;
    --md-sys-typescale-body-large-weight: 400;
    --md-sys-typescale-body-large-tracking: 0.5px;
    
    --md-sys-typescale-body-medium-size: 14px;
    --md-sys-typescale-body-medium-line-height: 20px;
    --md-sys-typescale-body-medium-weight: 400;
    --md-sys-typescale-body-medium-tracking: 0.25px;
    
    --md-sys-typescale-body-small-size: 12px;
    --md-sys-typescale-body-small-line-height: 16px;
    --md-sys-typescale-body-small-weight: 400;
    --md-sys-typescale-body-small-tracking: 0.4px;
    
    --md-sys-typescale-label-large-size: 14px;
    --md-sys-typescale-label-large-line-height: 20px;
    --md-sys-typescale-label-large-weight: 500;
    --md-sys-typescale-label-large-tracking: 0.1px;
    
    --md-sys-typescale-label-medium-size: 12px;
    --md-sys-typescale-label-medium-line-height: 16px;
    --md-sys-typescale-label-medium-weight: 500;
    --md-sys-typescale-label-medium-tracking: 0.5px;
    
    --md-sys-typescale-label-small-size: 11px;
    --md-sys-typescale-label-small-line-height: 16px;
    --md-sys-typescale-label-small-weight: 500;
    --md-sys-typescale-label-small-tracking: 0.5px;
    
    /* Elevation */
    --md-sys-elevation-level0: none;
    --md-sys-elevation-level1: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-level2: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-level3: 0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-level4: 0px 2px 3px 0px rgba(0, 0, 0, 0.30), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-level5: 0px 4px 4px 0px rgba(0, 0, 0, 0.30), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
    
    /* Motion */
    --md-sys-motion-duration-short1: 50ms;
    --md-sys-motion-duration-short2: 100ms;
    --md-sys-motion-duration-short3: 150ms;
    --md-sys-motion-duration-short4: 200ms;
    --md-sys-motion-duration-medium1: 250ms;
    --md-sys-motion-duration-medium2: 300ms;
    --md-sys-motion-duration-medium3: 350ms;
    --md-sys-motion-duration-medium4: 400ms;
    --md-sys-motion-duration-long1: 450ms;
    --md-sys-motion-duration-long2: 500ms;
    --md-sys-motion-duration-long3: 550ms;
    --md-sys-motion-duration-long4: 600ms;
    --md-sys-motion-duration-extra-long1: 700ms;
    --md-sys-motion-duration-extra-long2: 800ms;
    --md-sys-motion-duration-extra-long3: 900ms;
    --md-sys-motion-duration-extra-long4: 1000ms;
    
    --md-sys-motion-easing-linear: cubic-bezier(0.0, 0.0, 1.0, 1.0);
    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
    --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
    --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
    --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0);
    --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);
    --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
    
    /* Shape */
    --md-sys-shape-corner-none: 0px;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 1000px;
    
    /* State Layer Opacities */
    --md-sys-state-hover-opacity: 0.08;
    --md-sys-state-focus-opacity: 0.12;
    --md-sys-state-pressed-opacity: 0.12;
    --md-sys-state-dragged-opacity: 0.16;
}

/* Dark Theme */
@media (prefers-color-scheme: dark) {
    :root {
        --md-sys-color-primary: #d0bcff;
        --md-sys-color-on-primary: #381e72;
        --md-sys-color-primary-container: #4f378b;
        --md-sys-color-on-primary-container: #eaddff;
        
        --md-sys-color-secondary: #ccc2dc;
        --md-sys-color-on-secondary: #332d41;
        --md-sys-color-secondary-container: #4a4458;
        --md-sys-color-on-secondary-container: #e8def8;
        
        --md-sys-color-tertiary: #efb8c8;
        --md-sys-color-on-tertiary: #492532;
        --md-sys-color-tertiary-container: #633b48;
        --md-sys-color-on-tertiary-container: #ffd8e4;
        
        --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-surface: #10131a;
        --md-sys-color-on-surface: #e6e1e5;
        --md-sys-color-surface-variant: #49454f;
        --md-sys-color-on-surface-variant: #cac4d0;
        --md-sys-color-surface-container-lowest: #0f1419;
        --md-sys-color-surface-container-low: #1d1b20;
        --md-sys-color-surface-container: #211f26;
        --md-sys-color-surface-container-high: #2b2930;
        --md-sys-color-surface-container-highest: #36343b;
        
        --md-sys-color-background: #10131a;
        --md-sys-color-on-background: #e6e1e5;
        
        --md-sys-color-outline: #938f99;
        --md-sys-color-outline-variant: #49454f;
        
        --md-sys-color-inverse-surface: #e6e1e5;
        --md-sys-color-inverse-on-surface: #313033;
        --md-sys-color-inverse-primary: #6750a4;
    }
}

/* Base Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Typography Classes */
.display-large {
    font-family: var(--md-sys-typescale-display-large-font);
    font-size: var(--md-sys-typescale-display-large-size);
    line-height: var(--md-sys-typescale-display-large-line-height);
    font-weight: var(--md-sys-typescale-display-large-weight);
    letter-spacing: var(--md-sys-typescale-display-large-tracking);
}

.display-medium {
    font-family: var(--md-sys-typescale-display-large-font);
    font-size: var(--md-sys-typescale-display-medium-size);
    line-height: var(--md-sys-typescale-display-medium-line-height);
    font-weight: var(--md-sys-typescale-display-medium-weight);
    letter-spacing: var(--md-sys-typescale-display-medium-tracking);
}

.headline-large {
    font-family: var(--md-sys-typescale-display-large-font);
    font-size: var(--md-sys-typescale-headline-large-size);
    line-height: var(--md-sys-typescale-headline-large-line-height);
    font-weight: var(--md-sys-typescale-headline-large-weight);
    letter-spacing: var(--md-sys-typescale-headline-large-tracking);
}

.title-large {
    font-family: var(--md-sys-typescale-display-large-font);
    font-size: var(--md-sys-typescale-title-large-size);
    line-height: var(--md-sys-typescale-title-large-line-height);
    font-weight: var(--md-sys-typescale-title-large-weight);
    letter-spacing: var(--md-sys-typescale-title-large-tracking);
}

.body-large {
    font-family: var(--md-sys-typescale-display-large-font);
    font-size: var(--md-sys-typescale-body-large-size);
    line-height: var(--md-sys-typescale-body-large-line-height);
    font-weight: var(--md-sys-typescale-body-large-weight);
    letter-spacing: var(--md-sys-typescale-body-large-tracking);
}

.body-medium {
    font-family: var(--md-sys-typescale-display-large-font);
    font-size: var(--md-sys-typescale-body-medium-size);
    line-height: var(--md-sys-typescale-body-medium-line-height);
    font-weight: var(--md-sys-typescale-body-medium-weight);
    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}

.label-large {
    font-family: var(--md-sys-typescale-display-large-font);
    font-size: var(--md-sys-typescale-label-large-size);
    line-height: var(--md-sys-typescale-label-large-line-height);
    font-weight: var(--md-sys-typescale-label-large-weight);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
}

/* Material Design 3 Buttons */
.md-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 40px;
    min-width: 64px;
    padding: 0 24px;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    font-family: var(--md-sys-typescale-display-large-font);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    outline: none;
    overflow: hidden;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.md-button:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

.md-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.md-button:hover::before {
    opacity: var(--md-sys-state-hover-opacity);
}

.md-button:focus::before {
    opacity: var(--md-sys-state-focus-opacity);
}

.md-button:active::before {
    opacity: var(--md-sys-state-pressed-opacity);
}

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

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

.md-button-filled:hover {
    box-shadow: var(--md-sys-elevation-level1);
}

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

.md-button-outlined::before {
    background-color: var(--md-sys-color-primary);
}

.md-button-outlined:hover {
    border-color: var(--md-sys-color-primary);
}

/* Text Button */
.md-button-text {
    background-color: transparent;
    color: var(--md-sys-color-primary);
    padding: 0 12px;
}

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

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

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

.md-button-tonal:hover {
    box-shadow: var(--md-sys-elevation-level1);
}

/* Material Design 3 Cards */
.md-card {
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    border-radius: var(--md-sys-shape-corner-medium);
    box-shadow: var(--md-sys-elevation-level1);
    transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
    overflow: hidden;
    position: relative;
}

.md-card:hover {
    box-shadow: var(--md-sys-elevation-level2);
}

.md-card-elevated {
    background-color: var(--md-sys-color-surface-container-low);
    box-shadow: var(--md-sys-elevation-level1);
}

.md-card-filled {
    background-color: var(--md-sys-color-surface-container-highest);
    box-shadow: none;
}

.md-card-outlined {
    background-color: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: none;
}

/* Material Design 3 Text Fields */
.md-textfield {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 16px;
}

.md-textfield input,
.md-textfield textarea,
.md-textfield select {
    width: 100%;
    padding: 16px 16px 8px 16px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
    background-color: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-display-large-font);
    font-size: var(--md-sys-typescale-body-large-size);
    line-height: var(--md-sys-typescale-body-large-line-height);
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    outline: none;
    border-bottom: 2px solid var(--md-sys-color-outline);
}

.md-textfield input:focus,
.md-textfield textarea:focus,
.md-textfield select:focus {
    border-bottom-color: var(--md-sys-color-primary);
    background-color: var(--md-sys-color-surface-container-high);
}

.md-textfield label {
    position: absolute;
    top: 16px;
    left: 16px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: var(--md-sys-typescale-body-large-size);
    font-weight: var(--md-sys-typescale-body-large-weight);
    pointer-events: none;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    transform-origin: left top;
    background-color: transparent;
    padding: 0 4px;
}

.md-textfield input:focus + label,
.md-textfield input:not(:placeholder-shown) + label,
.md-textfield textarea:focus + label,
.md-textfield textarea:not(:placeholder-shown) + label,
.md-textfield select:focus + label,
.md-textfield select:not([value=""]) + label {
    top: 0;
    left: 12px;
    font-size: var(--md-sys-typescale-body-small-size);
    color: var(--md-sys-color-primary);
    transform: translateY(-50%) scale(0.85);
    background-color: var(--md-sys-color-surface-container-highest);
}

/* Supporting Text */
.md-textfield-supporting-text {
    font-size: var(--md-sys-typescale-body-small-size);
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 4px;
    margin-left: 16px;
}

.md-textfield-error-text {
    font-size: var(--md-sys-typescale-body-small-size);
    color: var(--md-sys-color-error);
    margin-top: 4px;
    margin-left: 16px;
}

/* Material Design 3 Chips */
.md-chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 16px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-small);
    background-color: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--md-sys-typescale-display-large-font);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    position: relative;
    overflow: hidden;
}

.md-chip:hover {
    background-color: var(--md-sys-color-on-surface-variant);
    opacity: var(--md-sys-state-hover-opacity);
}

.md-chip.selected {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    border-color: transparent;
}

/* Material Design 3 Switches */
.md-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 32px;
    cursor: pointer;
}

.md-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.md-switch-track {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 32px;
    background-color: var(--md-sys-color-surface-container-highest);
    border: 2px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-full);
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.md-switch-thumb {
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-color: var(--md-sys-color-outline);
    border-radius: 50%;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    box-shadow: var(--md-sys-elevation-level1);
}

.md-switch input:checked + .md-switch-track {
    background-color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
}

.md-switch input:checked + .md-switch-track .md-switch-thumb {
    left: 24px;
    background-color: var(--md-sys-color-on-primary);
}

/* Material Design 3 Progress Indicators */
.md-linear-progress {
    width: 100%;
    height: 4px;
    background-color: var(--md-sys-color-surface-container-highest);
    border-radius: var(--md-sys-shape-corner-full);
    overflow: hidden;
}

.md-linear-progress-bar {
    height: 100%;
    background-color: var(--md-sys-color-primary);
    border-radius: var(--md-sys-shape-corner-full);
    transition: width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

.md-linear-progress.indeterminate .md-linear-progress-bar {
    width: 30%;
    animation: indeterminate 2s infinite linear;
}

@keyframes indeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

.md-circular-progress {
    width: 48px;
    height: 48px;
    transform: rotate(-90deg);
}

.md-circular-progress-circle {
    fill: none;
    stroke: var(--md-sys-color-primary);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 113;
    stroke-dashoffset: 113;
    animation: circular-progress 1.4s ease-in-out infinite;
}

@keyframes circular-progress {
    0% { stroke-dashoffset: 113; }
    50% { stroke-dashoffset: 28.25; }
    100% { stroke-dashoffset: 113; }
}

/* Material Design 3 Badges */
.md-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background-color: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
    font-size: var(--md-sys-typescale-label-small-size);
    font-weight: var(--md-sys-typescale-label-small-weight);
    border-radius: var(--md-sys-shape-corner-full);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Material Design 3 Tooltips */
.md-tooltip {
    position: relative;
    cursor: pointer;
}

.md-tooltip-content {
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
    padding: 4px 8px;
    border-radius: var(--md-sys-shape-corner-extra-small);
    font-size: var(--md-sys-typescale-body-small-size);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    z-index: 1000;
}

.md-tooltip:hover .md-tooltip-content {
    opacity: 1;
}

/* Material Design 3 Snackbars */
.md-snackbar {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
    padding: 12px 16px;
    border-radius: var(--md-sys-shape-corner-extra-small);
    font-size: var(--md-sys-typescale-body-medium-size);
    box-shadow: var(--md-sys-elevation-level3);
    z-index: 1000;
    max-width: calc(100% - 32px);
    opacity: 0;
    transform: translateX(-50%) translateY(100%);
    transition: all var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard);
}

.md-snackbar.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Material Design 3 Dialogs */
.md-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard);
}

.md-dialog.show {
    opacity: 1;
    visibility: visible;
}

.md-dialog-container {
    background-color: var(--md-sys-color-surface-container-high);
    border-radius: var(--md-sys-shape-corner-extra-large);
    box-shadow: var(--md-sys-elevation-level3);
    max-width: 560px;
    max-height: 80vh;
    overflow-y: auto;
    /* transform: scale(0.8);
    transition: transform var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized); */
}

.md-dialog.show .md-dialog-container {
    transform: scale(1);
}

.md-dialog-header {
    padding: 24px 24px 0;
}

.md-dialog-title {
    font-size: var(--md-sys-typescale-headline-small-size);
    font-weight: var(--md-sys-typescale-headline-small-weight);
    color: var(--md-sys-color-on-surface);
    margin: 0 0 16px 0;
}

.md-dialog-content {
    padding: 16px 24px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: var(--md-sys-typescale-body-medium-size);
    line-height: var(--md-sys-typescale-body-medium-line-height);
}

.md-dialog-actions {
    padding: 16px 24px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Ripple Effect */
.md-ripple {
    position: relative;
    overflow: hidden;
}

.md-ripple::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.12;
    transform: translate(-50%, -50%);
    transition: width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
                height var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

.md-ripple:active::before {
    width: 300px;
    height: 300px;
}

/* Utility Classes */
.elevation-0 { box-shadow: var(--md-sys-elevation-level0); }
.elevation-1 { box-shadow: var(--md-sys-elevation-level1); }
.elevation-2 { box-shadow: var(--md-sys-elevation-level2); }
.elevation-3 { box-shadow: var(--md-sys-elevation-level3); }
.elevation-4 { box-shadow: var(--md-sys-elevation-level4); }
.elevation-5 { box-shadow: var(--md-sys-elevation-level5); }

.surface { background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); }
.surface-variant { background-color: var(--md-sys-color-surface-variant); color: var(--md-sys-color-on-surface-variant); }
.primary { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.secondary { background-color: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary); }
.tertiary { background-color: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary); }
.error { background-color: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }

.text-primary { color: var(--md-sys-color-primary); }
.text-secondary { color: var(--md-sys-color-secondary); }
.text-error { color: var(--md-sys-color-error); }
.text-on-surface { color: var(--md-sys-color-on-surface); }
.text-on-surface-variant { color: var(--md-sys-color-on-surface-variant); }

.rounded-none { border-radius: var(--md-sys-shape-corner-none); }
.rounded-xs { border-radius: var(--md-sys-shape-corner-extra-small); }
.rounded-sm { border-radius: var(--md-sys-shape-corner-small); }
.rounded-md { border-radius: var(--md-sys-shape-corner-medium); }
.rounded-lg { border-radius: var(--md-sys-shape-corner-large); }
.rounded-xl { border-radius: var(--md-sys-shape-corner-extra-large); }
.rounded-full { border-radius: var(--md-sys-shape-corner-full); }

/* Responsive */
@media (max-width: 768px) {
    .md-dialog-container {
        max-width: calc(100% - 32px);
        margin: 16px;
    }
    
    .md-button {
        min-width: 48px;
        padding: 0 16px;
    }
    
    .md-textfield input,
    .md-textfield textarea,
    .md-textfield select {
        font-size: 16px; /* Prevent zoom on iOS */
    }
}