/* Material Design 3 (Material You) CSS Framework for SeaWarmth */

/* CSS Custom Properties - Material Design 3 Color System */
:root {
  /* Primary Colors */
  --md-sys-color-primary: #0061a4;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d1e4ff;
  --md-sys-color-on-primary-container: #001d36;
  
  /* Secondary Colors */
  --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 Colors */
  --md-sys-color-tertiary: #6b5778;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #f2daff;
  --md-sys-color-on-tertiary-container: #251431;
  
  /* Surface Colors */
  --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: #f4f4f7;
  --md-sys-color-surface-container: #eeeef1;
  --md-sys-color-surface-container-high: #e8e9ec;
  --md-sys-color-surface-container-highest: #e3e3e6;
  
  /* Background */
  --md-sys-color-background: #fefbff;
  --md-sys-color-on-background: #1a1c1e;
  
  /* 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;
  
  /* Outline Colors */
  --md-sys-color-outline: #73777f;
  --md-sys-color-outline-variant: #c3c7cf;
  
  /* Shadow & Elevation */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level4: 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level5: 0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
  
  /* Typography Scale */
  --md-sys-typescale-display-large-font-size: 57px;
  --md-sys-typescale-display-medium-font-size: 45px;
  --md-sys-typescale-display-small-font-size: 36px;
  --md-sys-typescale-headline-large-font-size: 32px;
  --md-sys-typescale-headline-medium-font-size: 28px;
  --md-sys-typescale-headline-small-font-size: 24px;
  --md-sys-typescale-title-large-font-size: 22px;
  --md-sys-typescale-title-medium-font-size: 16px;
  --md-sys-typescale-title-small-font-size: 14px;
  --md-sys-typescale-body-large-font-size: 16px;
  --md-sys-typescale-body-medium-font-size: 14px;
  --md-sys-typescale-body-small-font-size: 12px;
  --md-sys-typescale-label-large-font-size: 14px;
  --md-sys-typescale-label-medium-font-size: 12px;
  --md-sys-typescale-label-small-font-size: 11px;
  
  /* Motion & Animation */
  --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-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
}

/* Dark Theme */
@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #9ecaff;
    --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: #e2e2e9;
    --md-sys-color-surface-variant: #43474e;
    --md-sys-color-on-surface-variant: #c3c7cf;
    --md-sys-color-surface-container-lowest: #0b0f12;
    --md-sys-color-surface-container-low: #191c20;
    --md-sys-color-surface-container: #1d2024;
    --md-sys-color-surface-container-high: #27282c;
    --md-sys-color-surface-container-highest: #323537;
    
    --md-sys-color-background: #101418;
    --md-sys-color-on-background: #e2e2e9;
    
    --md-sys-color-outline: #8d9199;
    --md-sys-color-outline-variant: #43474e;
  }
  
  /* Dark mode glassmorphism cards */
  .md-card {
    background: rgba(25, 28, 32, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.4),
      0 2px 8px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  }
  
  .md-card:hover {
    background: rgba(25, 28, 32, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 
      0 16px 64px rgba(0, 0, 0, 0.5),
      0 8px 24px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-8px) scale(1.02) !important;
  }
  
  /* Dark mode card shimmer effect */
  .md-card::before {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.1),
      transparent
    ) !important;
  }
  
  /* Dark mode app bar */
  .md-top-app-bar {
    background: linear-gradient(
      135deg,
      rgba(25, 28, 32, 0.95) 0%,
      rgba(39, 40, 44, 0.9) 50%,
      rgba(50, 53, 55, 0.85) 100%
    ) !important;
    color: var(--md-sys-color-on-surface) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Dark mode chip */
  .md-chip {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--md-sys-color-on-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
  }
  
  /* Dark mode FAB */
  .md-fab {
    background: linear-gradient(
      135deg,
      var(--md-sys-color-primary) 0%,
      var(--md-sys-color-primary-container) 100%
    ) !important;
    box-shadow: 
      0 12px 40px rgba(158, 202, 255, 0.3),
      0 4px 16px rgba(158, 202, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  }
  
  .md-fab:hover {
    box-shadow: 
      0 20px 60px rgba(158, 202, 255, 0.4),
      0 8px 24px rgba(158, 202, 255, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  }
  
  /* Dark mode typography fixes */
  .md-headline-large {
    color: var(--md-sys-color-on-surface) !important;
    background: linear-gradient(135deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }
  
  /* Dark mode body background */
  body {
    background: linear-gradient(
      135deg,
      var(--md-sys-color-background) 0%,
      var(--md-sys-color-surface-container-lowest) 100%
    ) !important;
    background-attachment: fixed !important;
  }
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', 'Helvetica Neue', Roboto, system-ui, sans-serif;
  background: linear-gradient(
    135deg,
    var(--md-sys-color-background) 0%,
    var(--md-sys-color-surface-container-lowest) 100%
  );
  background-attachment: fixed;
  color: var(--md-sys-color-on-background);
  margin: 0;
  padding: 0;
  line-height: 1.6;
  font-size: var(--md-sys-typescale-body-large-font-size);
  font-weight: 400;
  letter-spacing: -0.011em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Material Design Cards - Enhanced with Glassmorphism */
.md-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--md-sys-color-on-surface);
  border-radius: 20px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 32px;
  margin: 20px 0;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  position: relative;
  overflow: hidden;
}

.md-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 16px 64px rgba(0, 0, 0, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Card shimmer effect */
.md-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left var(--md-sys-motion-duration-long1) var(--md-sys-motion-easing-standard);
  pointer-events: none;
}

.md-card:hover::before {
  left: 100%;
}

.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-variant);
  color: var(--md-sys-color-on-surface-variant);
  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;
}

/* Enhanced Typography for 2024 */
.md-headline-large {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0 0 20px 0;
  background: linear-gradient(135deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.md-headline-medium {
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 16px 0;
}

.md-headline-small {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 12px 0;
}

.md-title-large {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 8px 0;
}

.md-title-medium {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin: 0 0 6px 0;
}

.md-body-large {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.003em;
  margin: 0 0 12px 0;
}

.md-body-medium {
  font-size: clamp(0.875rem, 1vw, 1rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  margin: 0 0 8px 0;
}

.md-label-large {
  font-size: clamp(0.875rem, 1vw, 1rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Material Design Buttons */
.md-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 20px;
  padding: 10px 24px;
  font-family: inherit;
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: 500;
  line-height: 1.43;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  position: relative;
  overflow: hidden;
  min-height: 40px;
  text-decoration: none;
}

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

.md-button:hover::before {
  opacity: 0.08;
}

.md-button:focus::before {
  opacity: 0.12;
}

.md-button:active::before {
  opacity: 0.12;
}

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

.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);
  padding: 10px 12px;
}

/* Floating Action Button - Enhanced Modern Design */
.md-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 28px;
  width: 56px;
  height: 56px;
  background: linear-gradient(
    135deg,
    var(--md-sys-color-primary) 0%,
    var(--md-sys-color-primary-container) 100%
  );
  color: var(--md-sys-color-on-primary);
  cursor: pointer;
  box-shadow: 
    0 12px 40px rgba(0, 97, 164, 0.3),
    0 4px 16px rgba(0, 97, 164, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  position: relative;
  overflow: hidden;
  font-size: 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.md-fab:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 
    0 20px 60px rgba(0, 97, 164, 0.4),
    0 8px 24px rgba(0, 97, 164, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.md-fab:active {
  transform: scale(0.95);
}

.md-fab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.md-fab:hover::before {
  opacity: 0.08;
}

/* Layout Components */
.md-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.md-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}

/* App Bar - Enhanced with Gradient and Glassmorphism */
.md-top-app-bar {
  background: linear-gradient(
    135deg,
    rgba(0, 97, 164, 0.95) 0%,
    rgba(0, 73, 125, 0.9) 50%,
    rgba(107, 87, 120, 0.85) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--md-sys-color-on-primary);
  padding: 20px 32px;
  display: flex;
  align-items: center;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

.md-top-app-bar__title {
  font-size: var(--md-sys-typescale-title-large-font-size);
  font-weight: 400;
  margin: 0;
  flex: 1;
}

/* Chips */
.md-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 8px;
  background-color: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: 500;
  line-height: 1.43;
  letter-spacing: 0.1px;
  border: 1px solid var(--md-sys-color-outline);
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.md-chip:hover {
  background-color: var(--md-sys-color-surface-container-high);
}

/* Progress Indicators */
.md-circular-progress {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid var(--md-sys-color-surface-variant);
  border-top-color: var(--md-sys-color-primary);
  animation: md-spin 1s linear infinite;
}

@keyframes md-spin {
  to { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
  .md-container {
    padding: 0 12px;
  }
  
  .md-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .md-card {
    padding: 16px;
    margin: 12px 0;
  }
  
  .md-top-app-bar {
    padding: 12px 16px;
  }
}

@media (max-width: 480px) {
  .md-container {
    padding: 0 8px;
  }
  
  .md-card {
    padding: 12px;
    margin: 8px 0;
  }
  
  .md-grid {
    gap: 12px;
  }
}

/* Enhanced Animation Utilities */
.md-fade-in {
  animation: md-fade-in var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized);
}

.md-slide-up {
  animation: md-slide-up var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized);
}

.md-scale-in {
  animation: md-scale-in var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-emphasized);
}

.md-bounce-in {
  animation: md-bounce-in var(--md-sys-motion-duration-long1) var(--md-sys-motion-easing-emphasized);
}

@keyframes md-fade-in {
  from { 
    opacity: 0;
    filter: blur(4px);
  }
  to { 
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes md-slide-up {
  from { 
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    filter: blur(4px);
  }
  to { 
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes md-scale-in {
  from {
    opacity: 0;
    transform: scale(0.8);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes md-bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

/* Ripple effect for interactive elements */
.md-ripple {
  position: relative;
  overflow: hidden;
}

.md-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  pointer-events: none;
}

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

/* Chart Container Animations */
.chart-container {
  transition: all var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized);
  transform-origin: top;
  opacity: 0;
  max-height: 0;
}

.chart-container.expanded {
  opacity: 1;
  max-height: 200px;
  transform: scaleY(1);
}

.chart-container.collapsed {
  opacity: 0;
  max-height: 0;
  transform: scaleY(0);
}

/* Chart hint styling */
.chart-hint {
  transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.chart-card.expanded .chart-hint {
  opacity: 0;
  transform: translateY(-10px);
}

/* Chart card active state */
.chart-card:active {
  transform: scale(0.98);
}

/* Flip Card Styles */
.flip-card {
  perspective: 1000px;
  position: relative;
  min-height: 320px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 320px;
  text-align: center;
  transition: transform var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized);
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 320px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 28px 32px;
}

.flip-card-front {
  background: inherit;
  z-index: 2;
}

.flip-card-back {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  transform: rotateY(180deg);
  z-index: 1;
  position: relative;
}

/* Dark mode flip card back */
@media (prefers-color-scheme: dark) {
  .flip-card-back {
    background: rgba(25, 28, 32, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
  }
}

/* Chart content styling */
.chart-header {
  width: 100%;
  margin-bottom: 16px;
  text-align: center;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}


.chart-content {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  pointer-events: auto;
}

.chart-content canvas {
  pointer-events: auto;
  position: relative;
  z-index: 10;
  cursor: crosshair;
}

/* Indicate chart is interactive */
.flip-card.flipped .chart-content {
  position: relative;
}



/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .md-card {
    min-height: 280px;
    padding: 24px;
  }
  
  .flip-card {
    min-height: 280px;
  }
  
  .flip-card-inner {
    height: 280px;
  }
  
  .flip-card-front, .flip-card-back {
    height: 280px;
    padding: 20px 24px;
  }
  
  .chart-content {
    height: 160px;
  }
  
  .chart-content canvas {
    max-height: 120px;
  }
}