.light {
    --page-bg: #f4f5f6;
    --page-text: #0f172a;
    --card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(243, 244, 246, 0.4) 100%);
    --card-field-bg: rgba(0, 0, 0, 0.03);
    --card-border: rgba(255, 255, 255, 0.7);
    --card-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.05);
    --card-text: #0f172a;
    --card-muted: #64748b;
    --btn-accent-bg: #000000;
    --btn-accent-text: #ffffff;
    --btn-pct-bg: rgba(0, 0, 0, 0.04);
  }

  .dark {
    --bg-1: #1b1b1d;;
    --text-1: #dfdfd6;
    
    --card-bg: 
      linear-gradient(135deg, #2b2c33 0%, #222329 50%, #1a1b20 100%), 
      linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.01) 100%);
    --card-field-bg: rgba(0, 0, 0, 0.2); 
    --color-card-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.9);
    --color-card-text: #ffffff;
    --color-card-muted: #828695;
}
.apple-glass-card {
  background-image: var(--card-bg);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.custom-scrollbar::-webkit-scrollbar {
  width: 0px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #383942;
  border-radius: 10px;
}
.light .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}