@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-gray-200:oklch(92.8% .006 264.531);--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-2xl:42rem;--container-4xl:56rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-6xl:3.75rem;--text-6xl--line-height:1;--text-8xl:6rem;--text-8xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--leading-relaxed:1.625;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.bottom-0{bottom:calc(var(--spacing)*0)}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.mt-8{margin-top:calc(var(--spacing)*8)}.mr-1{margin-right:calc(var(--spacing)*1)}.mr-2{margin-right:calc(var(--spacing)*2)}.mr-3{margin-right:calc(var(--spacing)*3)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.mb-12{margin-bottom:calc(var(--spacing)*12)}.ml-4{margin-left:calc(var(--spacing)*4)}.ml-6{margin-left:calc(var(--spacing)*6)}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.table{display:table}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-8{height:calc(var(--spacing)*8)}.h-12{height:calc(var(--spacing)*12)}.h-14{height:calc(var(--spacing)*14)}.min-h-\[240px\]{min-height:240px}.min-h-screen{min-height:100vh}.w-8{width:calc(var(--spacing)*8)}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-md{max-width:var(--container-md)}.flex-1{flex:1}.flex-grow{flex-grow:1}.scale-75{--tw-scale-x:75%;--tw-scale-y:75%;--tw-scale-z:75%;scale:var(--tw-scale-x)var(--tw-scale-y)}.scale-105{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.scale-125{--tw-scale-x:125%;--tw-scale-y:125%;--tw-scale-z:125%;scale:var(--tw-scale-x)var(--tw-scale-y)}.scale-150{--tw-scale-x:150%;--tw-scale-y:150%;--tw-scale-z:150%;scale:var(--tw-scale-x)var(--tw-scale-y)}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-10>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*10)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*10)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.bg-gray-200{background-color:var(--color-gray-200)}.bg-white{background-color:var(--color-white)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.p-12{padding:calc(var(--spacing)*12)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}.py-8{padding-block:calc(var(--spacing)*8)}.text-center{text-align:center}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.text-8xl{font-size:var(--text-8xl);line-height:var(--tw-leading,var(--text-8xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-red-500{color:var(--color-red-500)}.underline{text-decoration-line:underline}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}@media (hover:hover){.hover\:no-underline:hover{text-decoration-line:none}.hover\:underline:hover{text-decoration-line:underline}}@media (min-width:48rem){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:justify-end{justify-content:flex-end}.md\:text-left{text-align:left}.md\:text-right{text-align:right}}}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}

/* Material 3 Expressive Theme for TMC File Transfer */
/* Global font loading */
:root {
  /* Reference Typeface Tokens (recommended by Material Web docs) */
  --md-ref-typeface-brand: 'Inter', 'Roboto', sans-serif;
  --md-ref-typeface-plain: 'Inter', 'Roboto', sans-serif;

  /* Primary Color Palette - Blue Theme */
  --md-sys-color-primary: #1565C0;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #D1E4FF;
  --md-sys-color-on-primary-container: #001D36;
  
  /* Secondary Color Palette */
  --md-sys-color-secondary: #535F70;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #D7E3F7;
  --md-sys-color-on-secondary-container: #101C2B;
  
  /* Tertiary Color Palette */
  --md-sys-color-tertiary: #6B5778;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #F2DAFF;
  --md-sys-color-on-tertiary-container: #251431;
  
  /* Error Color Palette */
  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;
  
  /* Success/Positive Color Palette */
  --md-sys-color-success: #146C2E;
  --md-sys-color-on-success: #FFFFFF;
  --md-sys-color-success-container: #A6F2BB;
  --md-sys-color-on-success-container: #002109;
  
  /* Surface Color Palette */
  --md-sys-color-surface: #FEFBFF;
  --md-sys-color-on-surface: #1A1C1E;
  --md-sys-color-surface-variant: #DFE2EB;
  --md-sys-color-on-surface-variant: #43474E;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F3F4FA;
  --md-sys-color-surface-container: #EDEEF4;
  --md-sys-color-surface-container-high: #E7E8EE;
  --md-sys-color-surface-container-highest: #E1E2E8;
  
  /* Background */
  --md-sys-color-background: #FEFBFF;
  --md-sys-color-on-background: #1A1C1E;
  
  /* Outline */
  --md-sys-color-outline: #73777F;
  --md-sys-color-outline-variant: #C3C7CF;
  
  /* Shape System - More expressive, softer shapes */
  --md-sys-shape-corner-extra-small: 8px;
  --md-sys-shape-corner-small: 12px;
  --md-sys-shape-corner-medium: 16px;
  --md-sys-shape-corner-large: 20px;
  --md-sys-shape-corner-extra-large: 28px;
  
  /* Typography Scale */
  --md-sys-typescale-display-large-font: 'Inter', 'Roboto', sans-serif;
  --md-sys-typescale-display-large-weight: 400;
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-line-height: 64px;
  
  --md-sys-typescale-headline-large-font: 'Inter', 'Roboto', sans-serif;
  --md-sys-typescale-headline-large-weight: 500;
  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  
  --md-sys-typescale-body-large-font: 'Inter', 'Roboto', sans-serif;
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;
  
  /* Custom Expressive Enhancements */
  --md-expressive-motion-duration-short: 200ms;
  --md-expressive-motion-duration-medium: 300ms;
  --md-expressive-motion-duration-long: 500ms;
  --md-expressive-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-expressive-motion-easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  
  /* Enhanced elevation and shadow */
  --md-sys-elevation-shadow-color: rgba(26, 28, 30, 0.08);
  --md-expressive-elevation-1: 0 1px 3px var(--md-sys-elevation-shadow-color), 0 1px 2px rgba(26, 28, 30, 0.16);
  --md-expressive-elevation-2: 0 2px 6px var(--md-sys-elevation-shadow-color), 0 1px 2px rgba(26, 28, 30, 0.16);
  --md-expressive-elevation-3: 0 4px 8px var(--md-sys-elevation-shadow-color), 0 1px 3px rgba(26, 28, 30, 0.16);
  --md-expressive-elevation-4: 0 6px 12px var(--md-sys-elevation-shadow-color), 0 2px 4px rgba(26, 28, 30, 0.16);
  --md-expressive-elevation-5: 0 8px 16px var(--md-sys-elevation-shadow-color), 0 2px 6px rgba(26, 28, 30, 0.16);
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #9CCAFF;
    --md-sys-color-on-primary: #003258;
    --md-sys-color-primary-container: #00497D;
    --md-sys-color-on-primary-container: #D1E4FF;
    
    --md-sys-color-secondary: #BBC7DB;
    --md-sys-color-on-secondary: #253140;
    --md-sys-color-secondary-container: #3B4858;
    --md-sys-color-on-secondary-container: #D7E3F7;
    
    --md-sys-color-surface: #101418;
    --md-sys-color-on-surface: #E1E2E8;
    --md-sys-color-surface-variant: #43474E;
    --md-sys-color-on-surface-variant: #C3C7CF;
    --md-sys-color-surface-container-lowest: #0B0F14;
    --md-sys-color-surface-container-low: #191C20;
    --md-sys-color-surface-container: #1D2024;
    --md-sys-color-surface-container-high: #27292F;
    --md-sys-color-surface-container-highest: #32343A;
    
    --md-sys-color-background: #101418;
    --md-sys-color-on-background: #E1E2E8;
    
    --md-sys-color-outline: #8D9199;
    --md-sys-color-outline-variant: #43474E;
    
    --md-sys-elevation-shadow-color: rgba(0, 0, 0, 0.4);
  }
}
/* Global base styles with Material 3 Expressive enhancements */
* {
  box-sizing: border-box;
}
body {
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  color: var(--md-sys-color-on-background);
  background-color: var(--md-sys-color-background);
  margin: 0;
  padding: 0;
  transition: background-color var(--md-expressive-motion-duration-medium) var(--md-expressive-motion-easing-standard);
}
/* Enhanced Material 3 button styles */
.md-expressive-button {
  --md-filled-button-container-shape: var(--md-sys-shape-corner-medium);
  --md-filled-button-container-color: var(--md-sys-color-primary);
  --md-filled-button-label-text-color: var(--md-sys-color-on-primary);
  --md-filled-button-hover-container-color: color-mix(in srgb, var(--md-sys-color-primary) 92%, transparent);
  --md-filled-button-pressed-container-color: color-mix(in srgb, var(--md-sys-color-primary) 88%, transparent);
  
  transition: all var(--md-expressive-motion-duration-medium) var(--md-expressive-motion-easing-emphasized);
  transform: scale(1);
  box-shadow: var(--md-expressive-elevation-2);
}
.md-expressive-button:hover {
  transform: scale(1.02);
  box-shadow: var(--md-expressive-elevation-3);
}
.md-expressive-button:active {
  transform: scale(0.98);
  box-shadow: var(--md-expressive-elevation-1);
}
/* Enhanced Material 3 card styles */
.md-expressive-card {
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-large);
  padding: 24px;
  box-shadow: var(--md-expressive-elevation-2);
  transition: all var(--md-expressive-motion-duration-medium) var(--md-expressive-motion-easing-standard);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.md-expressive-card:hover {
  box-shadow: var(--md-expressive-elevation-3);
  transform: translateY(-2px);
}
/* Progress indicator enhancements */
.md-expressive-progress {
  background-color: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-small);
  overflow: hidden;
  position: relative;
}
.md-expressive-progress-bar {
  background-color: var(--md-sys-color-primary);
  height: 100%;
  border-radius: var(--md-sys-shape-corner-small);
  transition: width var(--md-expressive-motion-duration-medium) var(--md-expressive-motion-easing-emphasized);
  position: relative;
  overflow: hidden;
}
/* Material Web Icons configuration */
md-icon {
  --md-icon-font: 'Material Symbols Outlined';
  --md-icon-size: 24px;
}
/* Material Icon size utilities */
md-icon.text-sm { --md-icon-size: 16px; }
md-icon.text-2xl { --md-icon-size: 32px; }
md-icon.text-4xl { --md-icon-size: 48px; }
md-icon.text-6xl { --md-icon-size: 64px; }
md-icon.text-8xl { --md-icon-size: 80px; }
/* Large icons with proper spacing */
md-icon.text-6xl, md-icon.text-8xl {
  margin: 8px;
  line-height: 1.2;
}
/* Icon spacing in buttons and slots */
md-filled-button md-icon[slot="icon"],
md-outlined-button md-icon[slot="icon"],
md-text-button md-icon[slot="icon"] {
  margin-right: 8px;
}
md-filled-button md-icon[slot="leading-icon"],
md-outlined-button md-icon[slot="leading-icon"],
md-text-button md-icon[slot="leading-icon"] {
  margin-right: 8px;
}
/* Material Web Components button typography consistency */
md-filled-button,
md-outlined-button,
md-text-button,
md-fab,
md-icon-button {
  --md-sys-typescale-label-large-font: 'Inter', 'Roboto', sans-serif;
  --md-sys-typescale-label-medium-font: 'Inter', 'Roboto', sans-serif;
  --md-sys-typescale-label-small-font: 'Inter', 'Roboto', sans-serif;
  font-family: 'Inter', 'Roboto', sans-serif;
  font-weight: 500;
}
.md-expressive-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
/* Enhanced form field styles */
.md-expressive-field {
  --md-outlined-text-field-container-shape: var(--md-sys-shape-corner-medium);
  --md-outlined-text-field-outline-color: var(--md-sys-color-outline);
  --md-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);
  --md-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);
  --md-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);
  
  transition: all var(--md-expressive-motion-duration-short) var(--md-expressive-motion-easing-standard);
}
.md-expressive-field:focus-within {
  transform: scale(1.01);
}
/* Checkbox and switch enhancements */
.md-expressive-checkbox {
  --md-checkbox-container-shape: var(--md-sys-shape-corner-extra-small);
  --md-checkbox-selected-container-color: var(--md-sys-color-primary);
  --md-checkbox-selected-icon-color: var(--md-sys-color-on-primary);
  
  transition: transform var(--md-expressive-motion-duration-short) var(--md-expressive-motion-easing-emphasized);
}
.md-expressive-checkbox:active {
  transform: scale(0.9);
}
/* Enhanced typography classes */
.md-expressive-headline {
  font-family: var(--md-sys-typescale-headline-large-font);
  font-weight: var(--md-sys-typescale-headline-large-weight);
  font-size: var(--md-sys-typescale-headline-large-size);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  color: var(--md-sys-color-on-surface);
  margin: 0 0 16px 0;
}
.md-expressive-body {
  font-family: var(--md-sys-typescale-body-large-font);
  font-weight: var(--md-sys-typescale-body-large-weight);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 12px 0;
}
/* Utility classes */
.md-expressive-surface {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}
.md-expressive-surface-container {
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}
.md-expressive-primary {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.md-expressive-secondary {
  background-color: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
}
.md-expressive-error {
  background-color: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}
.md-expressive-success {
  background-color: var(--md-sys-color-success);
  color: var(--md-sys-color-on-success);
}
/* Animation utilities */
.md-expressive-fade-in {
  animation: fadeIn var(--md-expressive-motion-duration-medium) var(--md-expressive-motion-easing-standard) forwards;
}
.md-expressive-slide-up {
  animation: slideUp var(--md-expressive-motion-duration-medium) var(--md-expressive-motion-easing-emphasized) forwards;
}
.md-expressive-scale-in {
  animation: scaleIn var(--md-expressive-motion-duration-short) var(--md-expressive-motion-easing-emphasized) forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(32px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scaleIn {
  from { 
    opacity: 0;
    transform: scale(0.8);
  }
  to { 
    opacity: 1;
    transform: scale(1);
  }
}
/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .md-expressive-card {
    padding: 16px;
    border-radius: var(--md-sys-shape-corner-medium);
  }
  
  .md-expressive-headline {
    font-size: 28px;
    line-height: 36px;
  }
}