:root {
  /* Material Design 3 Typography Tokens */
  --md-sys-typescale-display-large-font: "Inter", system-ui, sans-serif;
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-weight: 400;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-large-tracking: -0.25px;

  --md-sys-typescale-headline-large-font: "Inter", system-ui, sans-serif;
  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-weight: 400;
  --md-sys-typescale-headline-large-line-height: 40px;

  --md-sys-typescale-title-large-font: "Inter", system-ui, sans-serif;
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-weight: 500;
  --md-sys-typescale-title-large-line-height: 28px;

  --md-sys-typescale-body-large-font: "Inter", system-ui, sans-serif;
  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-large-tracking: 0.5px;

  --md-sys-typescale-label-large-font: "Inter", system-ui, sans-serif;
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-large-tracking: 0.1px;

  /* Shape Tokens */
  --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: 9999px;

  /* Elevation Tokens - 扁平化设计 */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --md-sys-elevation-level2: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
  --md-sys-elevation-level3: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
  --md-sys-elevation-level4: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
  --md-sys-elevation-level5: 0px 8px 16px 0px rgba(0, 0, 0, 0.14);

  /* Motion/Animation Tokens */
  --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-easing-linear: cubic-bezier(0, 0, 1, 1);
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --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, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);

  /* Spacing & Grid Tokens (8dp system) */
  --md-sys-spacing-0: 0px;
  --md-sys-spacing-1: 4px;
  --md-sys-spacing-2: 8px;
  --md-sys-spacing-3: 12px;
  --md-sys-spacing-4: 16px;
  --md-sys-spacing-5: 20px;
  --md-sys-spacing-6: 24px;
  --md-sys-spacing-8: 32px;
  --md-sys-spacing-10: 40px;
  --md-sys-spacing-12: 48px;
  --md-sys-spacing-16: 64px;

  /* Layout Breakpoints */
  --md-sys-breakpoint-compact: 0px;
  --md-sys-breakpoint-medium: 600px;
  --md-sys-breakpoint-expanded: 900px;
  --md-sys-breakpoint-large: 1240px;
  --md-sys-breakpoint-extra-large: 1440px;

  /* Color Tokens - Light Theme (Default) */
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #EADDFF;
  --md-sys-color-on-primary-container: #21005D;
  --md-sys-color-secondary: #625B71;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E8DEF8;
  --md-sys-color-on-secondary-container: #1D192B;
  --md-sys-color-tertiary: #7D5260;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFD8E4;
  --md-sys-color-on-tertiary-container: #31111D;
  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #F9DEDC;
  --md-sys-color-on-error-container: #410E0B;
  --md-sys-color-background: #FEF7FF;
  --md-sys-color-on-background: #1D1B20;
  --md-sys-color-surface: #FEF7FF;
  --md-sys-color-on-surface: #1D1B20;
  --md-sys-color-surface-container: #F3EDF7;
  --md-sys-color-surface-container-low: #F7F2FA;
  --md-sys-color-surface-container-high: #ECE6F0;
  --md-sys-color-surface-container-highest: #E6E0E9;
  --md-sys-color-on-surface-container: #1D192B;
  --md-sys-color-surface-variant: #E7E0EC;
  --md-sys-color-on-surface-variant: #49454F;
  --md-sys-color-outline: #79747E;
  --md-sys-color-outline-variant: #CAC4D0;
  --md-sys-color-surface-tint: #6750A4;
  
  /* Bootstrap Overrides for MD3 */
  --bs-primary: var(--md-sys-color-primary);
  --bs-secondary: var(--md-sys-color-secondary);
  --bs-success: #386a20;
  --bs-info: #00639a;
  --bs-warning: #7e5700;
  --bs-danger: var(--md-sys-color-error);
  --bs-light: var(--md-sys-color-surface-variant);
  --bs-dark: var(--md-sys-color-on-surface);
  
  --bs-body-bg: var(--md-sys-color-background);
  --bs-body-color: var(--md-sys-color-on-background);
  --bs-border-color: var(--md-sys-color-outline-variant);
  --bs-border-radius: var(--md-sys-shape-corner-medium);
  --bs-box-shadow: var(--md-sys-elevation-level1);
  
  /* Reset some Bootstrap hardcoded values */
  --bs-font-sans-serif: var(--md-sys-typescale-body-large-font);
  --bs-body-font-family: var(--md-sys-typescale-body-large-font);
  --bs-body-font-size: var(--md-sys-typescale-body-large-size);
  --bs-body-font-weight: var(--md-sys-typescale-body-large-weight);
  --bs-body-line-height: var(--md-sys-typescale-body-large-line-height);

  /* Bootstrap specific component resets */
  --bs-btn-border-radius: var(--md-sys-shape-corner-full);
  --bs-btn-padding-y: var(--md-sys-spacing-2);
  --bs-btn-padding-x: var(--md-sys-spacing-6);
  --bs-btn-font-family: var(--md-sys-typescale-label-large-font);
  --bs-btn-font-weight: var(--md-sys-typescale-label-large-weight);
  
  --bs-card-border-radius: var(--md-sys-shape-corner-medium);
  --bs-card-bg: var(--md-sys-color-surface);
  --bs-card-border-color: var(--md-sys-color-outline-variant);
  
  --bs-modal-border-radius: var(--md-sys-shape-corner-extra-large);
  --bs-modal-bg: var(--md-sys-color-surface-container-high);
}

/* Force Bootstrap Components to use MD3 */
.btn {
  transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.btn-primary {
  --bs-btn-bg: var(--md-sys-color-primary);
  --bs-btn-border-color: var(--md-sys-color-primary);
  --bs-btn-hover-bg: var(--md-sys-color-primary);
  --bs-btn-hover-border-color: var(--md-sys-color-primary);
}
.btn-primary:hover {
  background-image: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12));
}
.card {
  border: 1px solid var(--md-sys-color-outline-variant);
}
.modal-content {
  border: 1px solid var(--md-sys-color-outline-variant);
}

/* Dark Theme overrides */
.dark-mode {
  --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: #F2B8B5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8C1D18;
  --md-sys-color-on-error-container: #F9DEDC;
  --md-sys-color-background: #141218;
  --md-sys-color-on-background: #E6E0E9;
  --md-sys-color-surface: #141218;
  --md-sys-color-on-surface: #E6E0E9;
  --md-sys-color-surface-container: #211F26;
  --md-sys-color-surface-container-low: #1D1B20;
  --md-sys-color-surface-container-high: #2B2930;
  --md-sys-color-surface-container-highest: #36343B;
  --md-sys-color-surface-variant: #49454F;
  --md-sys-color-on-surface-variant: #CAC4D0;
  --md-sys-color-outline: #938F99;
  --md-sys-color-outline-variant: #49454F;
  --md-sys-color-surface-tint: #D0BCFF;
  
  /* Bootstrap Overrides for MD3 Dark */
  --bs-success: #9cd67d;
  --bs-info: #95ccff;
  --bs-warning: #f7bd48;
}

/* Base MD3 Styles */
* {
  transition: background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
              border-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
              color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

body {
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  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);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  transition: background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
              color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

/* Material Symbols Default Settings */
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
  vertical-align: middle;
}

/* MD3 Card */
.md-card {
  background-color: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-medium);
  border: 1px solid var(--md-sys-color-outline-variant);
  padding: var(--md-sys-spacing-4);
  transition: background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
              border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.md-card:hover {
  border-color: var(--md-sys-color-primary);
}

/* MD3 Buttons */
.md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-label-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);
  border: none;
  cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
              box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
              color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.md-btn-filled {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.md-btn-filled:hover {
  background-image: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12));
}

.md-btn-outlined {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
}
.md-btn-outlined:hover {
  background-color: rgba(103, 80, 164, 0.08); /* primary with 8% opacity */
}
.dark-mode .md-btn-outlined:hover {
  background-color: rgba(208, 188, 255, 0.08);
}

.md-btn-tonal {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.md-btn-tonal:hover {
  background-image: linear-gradient(rgba(29, 25, 43, 0.12), rgba(29, 25, 43, 0.12));
}
.dark-mode .md-btn-tonal:hover {
  background-image: linear-gradient(rgba(232, 222, 248, 0.08), rgba(232, 222, 248, 0.08));
}

.md-btn-text {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  padding: 0 12px;
}
.md-btn-text:hover {
  background-color: rgba(103, 80, 164, 0.08);
}
.dark-mode .md-btn-text:hover {
  background-color: rgba(208, 188, 255, 0.08);
}

/* FAB */
.md-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--md-sys-shape-corner-large);
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.md-fab:hover {
  background-image: linear-gradient(rgba(33, 0, 93, 0.12), rgba(33, 0, 93, 0.12));
}
.dark-mode .md-fab:hover {
  background-image: linear-gradient(rgba(234, 221, 255, 0.08), rgba(234, 221, 255, 0.08));
}

/* Text Field (Outlined) */
.md-text-field {
  position: relative;
  width: 100%;
  margin-bottom: var(--md-sys-spacing-4);
}
.md-text-field input, .md-text-field textarea {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background-color: transparent;
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  transition: border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.md-text-field input:focus, .md-text-field textarea:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
  padding: 15px; /* adjust for 2px border */
}
.md-text-field label {
  position: absolute;
  left: 16px;
  top: 16px;
  color: var(--md-sys-color-on-surface-variant);
  background-color: var(--md-sys-color-background);
  padding: 0 4px;
  transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  pointer-events: none;
}
.md-text-field input:focus ~ label,
.md-text-field input:not(:placeholder-shown) ~ label {
  top: -8px;
  left: 12px;
  font-size: 12px;
  color: var(--md-sys-color-primary);
}

/* Navigation Bar (Top) */
.md-top-app-bar {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 var(--md-sys-spacing-4);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  transition: background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

/* MD3 Utilities */
.text-primary-md { color: var(--md-sys-color-primary) !important; }
.bg-surface-md { background-color: var(--md-sys-color-surface) !important; }
.bg-surface-variant-md { background-color: var(--md-sys-color-surface-variant) !important; }

/* MD3 Menu Items */
.md-menu-item {
  transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.md-menu-item:hover {
  background-color: var(--md-sys-color-surface-variant);
}