:root {
  --radius: 0.625rem;
  --background: 300 50% 100%;       
  --foreground: 300 0% 4%;          
  --card: 300 50% 100%;             
  --card-foreground: 300 0% 4%;
  --popover: 300 50% 100%;
  --popover-foreground: 300 0% 4%;
  --primary: 330 0% 9%;         
  --primary-foreground: 300 0% 98%; 
  --secondary: 300 0% 96%;           
  --secondary-foreground: 330 0% 9%;
  --muted: 300 0% 96%;
  --muted-foreground: 300 0% 45%;
  --accent: 300 0% 96%;
  --accent-foreground: 330 0% 9%;
  --destructive: 357.18 100% 45%;       
  --border: 330 0% 90%;
  --input: 330 0% 90%;
  --ring: 0 0% 63%;
  --chart-1: 18.01 100% 48%;
  --chart-2: 174.71 100% 28.999999999999996%;
  --chart-3: 195.82 72% 23%;
  --chart-4: 43.66 100% 50%;
  --chart-5: 36.49 100% 50%;
  --sidebar: 300 0% 98%;
  --sidebar-foreground: 300 0% 4%;
  --sidebar-primary: 330 0% 9%;
  --sidebar-primary-foreground: 300 0% 98%;
  --sidebar-accent: 300 0% 96%;
  --sidebar-accent-foreground: 330 0% 9%;
  --sidebar-border: 330 0% 90%;
  --sidebar-ring: 0 0% 63%;
}

.dark {
  --background: 300 0% 4%;          
  --foreground: 300 0% 98%;         
  --card: 330 0% 9%;
  --card-foreground: 300 0% 98%;
  --popover: 330 0% 9%;
  --popover-foreground: 300 0% 98%;
  --primary: 330 0% 90%;
  --primary-foreground: 330 0% 9%;
  --secondary: 320 0% 15%;
  --secondary-foreground: 300 0% 98%;
  --muted: 320 0% 15%;
  --muted-foreground: ;
  --accent: 320 0% 15%;
  --accent-foreground: 300 0% 98%;
  --destructive: 358.75 100% 70%;
  --border: 300 50% 100% / 0.1;
  --input: 300 50% 100% / 0.15;
  --ring: 300 0% 45%;
  --chart-1: 225.35 84% 49%;
  --chart-2: 159.74 100% 37%;
  --chart-3: 36.49 100% 50%;
  --chart-4: 273.3 100% 64%;
  --chart-5: 345.32 100% 56.00000000000001%;
  --sidebar: 330 0% 9%;
  --sidebar-foreground: 300 0% 98%;
  --sidebar-primary: 225.35 84% 49%;
  --sidebar-primary-foreground: 300 0% 98%;
  --sidebar-accent: 320 0% 15%;
  --sidebar-accent-foreground: 300 0% 98%;
  --sidebar-border: 300 50% 100% / 0.1;
  --sidebar-ring: 300 0% 45%;
}
a.active{
    color: #171717;
    text-shadow: -2px 6px 15px #927777;
}

  
    /* Simple toaster styles */
    #toast {
      position: fixed;
      top: 20px;
      right: 20px;
      min-width: 250px;
      padding: 12px 20px;
      border-radius: 8px;
      color: #fff;
      font-size: 14px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s ease, transform 0.5s ease;
      transform: translateY(-20px);
      z-index: 9999;
    }
    #toast.show {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    #toast.success { background: #16a34a; } /* green */
    #toast.error { background: #dc2626; }   /* red */
  #backToTop {
      position: fixed;
      bottom: 30px;
      right: 30px;
      padding: 12px 12px;
      font-size: 16px;
      border: none;
      border-radius: 50%;
      background: #333;
      color: #fff;
      cursor: pointer;
      display: none; /* hidden by default */
      z-index: 9999;
      transition: background 0.3s ease;
    }
    #backToTop:hover {
      background: #555;
    }