body {
  font-family: 'Noto Sans SC', sans-serif;
  background-color: #fefce8;
  background-image: radial-gradient(circle at 1% 1%, rgba(250, 204, 21, 0.2), transparent 30%),
                    radial-gradient(circle at 99% 99%, rgba(234, 179, 8, 0.2), transparent 40%);
  color: #44403c;
}
.chart-container {
  position: relative; width: 100%; max-width: 600px; margin: auto;
  height: 350px; max-height: 50vh;
}
@media (min-width: 768px) { .chart-container { height: 450px; } }

.nav-link {
  transition: color 0.3s, border-bottom-color 0.3s;
  border-bottom: 2px solid transparent;
}
.nav-link.active, .nav-link:hover {
  color: #ca8a04;
  border-bottom-color: #ca8a04;
}
.glass-card {
  background: rgba(255, 251, 235, 0.5);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(202, 138, 4, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.glass-card:hover {
  border-color: rgba(202, 138, 4, 0.5);
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.accordion-content {
  max-height: 0; overflow: hidden;
  transition: max-height 0.5s ease-in-out, margin-top 0.5s ease-in-out, padding-top 0.5s ease-in-out;
}
.accordion-item.active .accordion-content {
  max-height: 200px; 
  margin-top: 1rem;
  padding-top: 1rem;
}
.accordion-chevron { transition: transform 0.5s ease; }
.accordion-item.active .accordion-chevron { transform: rotate(180deg); }

.text-banana-dark { color: #78350f; }
.bg-banana-header { background-color: rgba(254, 252, 232, 0.8); }
.border-banana { border-color: rgba(202, 138, 4, 0.2); }

.demo-tab { transition: all 0.3s ease; }
.demo-tab.active {
  background-color: #facc15;
  color: #78350f;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.upload-area { border: 2px dashed rgba(202, 138, 4, 0.4); }
.loader {
  width: 50px; aspect-ratio: 1; border-radius: 50%; border: 8px solid #ca8a04;
  animation: l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;
}
@keyframes l20-1 {
  0%    {clip-path: polygon(50% 50%,0 0,50% 0,50% 0,50% 0,50% 0)}
  12.5% {clip-path: polygon(50% 50%,0 0,50% 0,100% 0,100% 0,100% 0)}
  25%   {clip-path: polygon(50% 50%,0 0,50% 0,100% 0,100% 50%,100% 50%)}
  37.5% {clip-path: polygon(50% 50%,0 0,50% 0,100% 0,100% 50%,100% 100%)}
  50%   {clip-path: polygon(50% 50%,0 0,50% 0,100% 0,100% 50%,100% 100%,50% 100%)}
  62.5% {clip-path: polygon(50% 50%,0 0,50% 0,100% 0,100% 50%,100% 100%,50% 100%,0 100%)}
  75%   {clip-path: polygon(50% 50%,0 0,50% 0,100% 0,100% 50%,100% 100%,50% 100%,0 100%,0 50%)}
  87.5% {clip-path: polygon(50% 50%,0 0,50% 0,100% 0,100% 50%,100% 100%,50% 100%,0 100%,0 50%,0 0)}
  100%  {clip-path: polygon(50% 50%,0 0,50% 0,100% 0,100% 50%,100% 100%,50% 100%,0 100%,0 50%,0 0,0 0)}
}
@keyframes l20-2 { 
  0%    {transform:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(135deg)}
  50%   {transform:scaleY(-1) rotate(-135deg)}
  100%  {transform:scaleY(-1) rotate(-360deg)}
}