/* ========== CSS Variables & Base Styles ========== */
:root{
  /* Colors - Custom Palette */
  --primary-950:#1A4520;
  --primary-900:#1E5424;
  --primary-800:#28702F;
  --primary-700:#2E7D36;
  --primary-600:#22B561;
  --primary-500:#22B561;
  --primary-400:#97B45E;
  --accent-danger:#C92A44;
  --accent-danger-hover:#A52236;
  --red-600:#DC2626;
  --red-700:#B91C1C;
  --neutral-50:#F8F7F5;
  --neutral-100:#DFDBD4;
  --neutral-200:#CCC6BC;
  --ink-900:#1C1C1C;
  --ink-700:#2D2D2D;
  --ink-600:#3F3F3F;
  --ink-500:#5A5A5A;
  --ink-400:#7A7A7A;
  --ink-300:#9A9A9A;
  --line:#D4CFC6;
  --line-soft:#E5E2DA;

  /* Shadows - More depth & modern */
  --shadow-xs:0 1px 2px rgba(40,112,47,0.04), 0 1px 3px rgba(40,112,47,0.02);
  --shadow-sm:0 2px 8px rgba(40,112,47,0.08), 0 1px 4px rgba(40,112,47,0.04);
  --shadow-md:0 10px 26px rgba(40,112,47,0.12), 0 4px 10px rgba(40,112,47,0.06);
  --shadow-lg:0 20px 48px rgba(40,112,47,0.18), 0 8px 20px rgba(40,112,47,0.08);
  --shadow-xl:0 32px 64px rgba(40,112,47,0.24), 0 12px 28px rgba(40,112,47,0.10);

  /* Glassmorphism */
  --glass-bg:rgba(255, 255, 255, 0.75);
  --glass-bg-strong:rgba(255, 255, 255, 0.85);
  --glass-border:rgba(255, 255, 255, 0.2);
  --glass-shadow:0 8px 32px rgba(40,112,47,0.12);
  --blur-sm:blur(8px);
  --blur-md:blur(12px);
  --blur-lg:blur(16px);

  /* Easing - Smoother animations */
  --ease:cubic-bezier(.22,.9,.32,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --ease-smooth:cubic-bezier(.4,0,.2,1);

  /* Border Radius - Modern rounded */
  --radius-xl:24px;
  --radius-lg:20px;
  --radius-md:16px;
  --radius-sm:12px;
  --radius-xs:8px;

  /* Performance optimizations */
  --transform-gpu: translateZ(0);
}

/* Enable hardware acceleration globally for key elements */
.card, .panel, .plan-panel, .overlay, .toast, .chip, .menu-fab{
  transform: var(--transform-gpu);
  will-change: auto;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{ color-scheme:light; scroll-behavior:smooth; }
html,body{margin:0;padding:0;}
body{
  font-family:'Noto Sans Thai',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--neutral-50);
  background-image:
    radial-gradient(circle at 1.5px 1.5px, rgba(40,112,47,0.04) 1px, transparent 0);
  background-size:32px 32px;
  color:var(--ink-900);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color-scheme:light;
  font-size:16px;
  line-height:1.6;
}

h1,h2,h3,.display{font-family:'Noto Sans Thai',sans-serif; font-weight:700; line-height:1.3;}
::selection{background:var(--primary-400); color:var(--primary-950);}
:focus-visible{ outline:3px solid var(--primary-500); outline-offset:3px; border-radius:8px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

.panel::-webkit-scrollbar, .plan-panel::-webkit-scrollbar{ width:8px; }
.panel::-webkit-scrollbar-thumb, .plan-panel::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
.panel::-webkit-scrollbar-track, .plan-panel::-webkit-scrollbar-track{ background:transparent; }

/* ========== Toast Notification - Modern & Elegant ========== */
.toast{
  position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(24px);
  background:var(--glass-bg-strong);
  backdrop-filter:var(--blur-lg) saturate(1.3);
  -webkit-backdrop-filter:var(--blur-lg) saturate(1.3);
  color:var(--ink-900); padding:14px 24px; border-radius:999px;
  font-size:14px; font-weight:600; z-index:60; opacity:0;
  transition:all .3s var(--ease); pointer-events:none;
  box-shadow:0 16px 48px rgba(40,112,47,0.2);
  border:1px solid var(--glass-border);
  display:flex; align-items:center; gap:10px;
  max-width:min(500px, calc(100vw - 48px));
}

.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}

.toast-icon{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:18px; height:18px;
}

.toast-message{
  flex:1; min-width:0;
}

.toast-action{
  flex:none; background:rgba(255,255,255,0.2); color:#fff;
  border:none; padding:6px 14px; border-radius:999px;
  font-family:'Noto Sans Thai',sans-serif; font-weight:700; font-size:13px;
  cursor:pointer; transition:all .2s var(--ease);
  text-transform:uppercase; letter-spacing:.02em;
}

.toast-action:hover{
  background:rgba(255,255,255,0.3);
  transform:scale(1.05);
}

.toast-action:active{
  transform:scale(0.98);
}

/* Toast types */
.toast-success{
  background:linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 100%);
  border-color:rgba(74,156,91,0.3);
  color:#fff;
}

.toast-error{
  background:linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  border-color:rgba(231,76,60,0.3);
  color:#fff;
}

.toast-warning{
  background:linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  border-color:rgba(243,156,18,0.3);
  color:#fff;
}

.toast-info{
  background:linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  border-color:rgba(52,152,219,0.3);
  color:#fff;
}

/* Animated border gradient */
.toast::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:999px;
  padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0.5;
}