body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: linear-gradient(45deg, #e8f4f8, #f5f9ff);
  min-height: 100vh;
  margin: 0;
  color: #333;
  background-image: url("/images/wallpaper/pexels-souvenirpixels-417074.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}


.grid-container {
  display: grid;
  grid-template-columns: 1fr; /* Stack items vertically on small screens */
  gap: 2rem;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  overflow-x: hidden; /* Prevent horizontal overflow */
}

/* Medium and up: switch to responsive columns */
@media (min-width: 700px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* Optional: Tweak individual item width on mid-size screens */
@media (min-width: 500px) and (max-width: 699px) {
  .service-tier {
    max-width: 500px;
    margin: 0 auto;
  }
}

.service-tier {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease;

  /* Responsive fix */
  width: 100%;
  max-width: 400px;
  box-sizing: border-box; /* Ensures padding doesn't add to width */
}

    .service-tier:hover {
      transform: translateY(-5px);
    }

    .tier-header {
      text-align: center;
      margin-bottom: 1.5rem;
    }

    .tier-emoji {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .tier-title {
      font-size: 1.5rem;
      margin: 0.5rem 0;
      color: var(--primary-color);
    }

    .price-tag {
      font-size: 1.8rem;
      font-weight: bold;
      margin: 1rem 0;
      color: var(--primary-color);
    }

    .features-list {
      list-style: none;
      padding: 0;
      margin: 1.5rem 0;
    }

    .features-list li {
      padding: 0.8rem 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }

    .features-list li::before {
      content: '✓';
      color: var(--primary-color);
      font-weight: bold;
    }

    .auth-form {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .form-input {
      padding: 0.8rem;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.8);
      transition: all 0.3s ease;
    }

    .form-input:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2);
    }

    .auth-buttons {
      display: flex;
      gap: 1rem;
      margin-top: 1rem;
    }

    .btn {
      padding: 0.8rem 1.5rem;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.3s ease;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    .btn-primary {
      background: var(--primary-color);
      color: white;
    }

    .btn-secondary {
      background: rgba(255, 255, 255, 0.9);
      color: var(--primary-color);
      border: 1px solid var(--primary-color);
    }

    /* Tier-specific colors */
    .basic-tier { --primary-color: var(--primary-blue); }
    .pro-tier { --primary-color: var(--primary-green); }
    .proline-tier { --primary-color: var(--primary-gray); }
    .care-tier { --primary-color: var(--primary-gray); }
    .research-tier { --primary-color: var(--primary-purple); }

    @media (max-width: 768px) {
      .grid-container {
        grid-template-columns: 1fr;
        padding: 1rem;
      }
      
      .auth-buttons {
        flex-direction: column;
      }
    }

.footer-logo {
    margin-top: 20px;
    text-align: center;
    position: relative;
}

.footer-logo img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transform: rotateZ(-5deg) translateZ(5px);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    filter: grayscale(50%);
    filter: grayscale(0%);
}

.footer-logo img:hover {
    transform: rotateZ(0deg) translateZ(10px);
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.4);
    filter: grayscale(0%);
    cursor: pointer;
}

.footer-text {
    margin-top: 10px;
    font-size: 0.95em;
    color: #777;
    text-align: center;
    font-family: 'Arial', sans-serif;
    letter-spacing: 0.5px;
}

.footer-text p {
    margin: 5px 0;
    line-height: 1.5;
    color: #666;
}

.footer-text a {
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.footer-text a:hover {
    color: #2980b9;
}
.container {
    max-width: 1300px;
    margin: 10px auto; /* Center the container horizontally */
    padding: 20px;
    background: rgba(255, 255, 255, 0.4); /* Semi-transparent background */
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Horizontally center content */
    align-items: center; /* Vertically center content */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), /* Black glow */
                0 0 20px rgba(0, 0, 0, 0.2); /* Extended black glow */
}

#randomId12345 {
    height: 400px;
    overflow-y: auto;
    padding: 1rem;
}

.randomClass67890 {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.randomHeader24680 {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.randomPhoto13579 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.randomTimestamp98765 {
    color: #666;
    display: block;
    margin-top: 0.5rem;
}

/* Header */
.ranron-7583 {
    color: black;
    padding: 20px 0;
    text-align: center;
}

.ranron-1123 {
    font-size: 2.5em;
}

.ranron-8765 {
    font-size: 1.9em;
    margin-top: 10px;
}

/* Section Styling */
.ranron-2457 {
    padding: 40px 20px;
    background-color: #fff;
    text-align: center;
}

.ranron-4321 {
    font-size: 2em;
    margin-bottom: 20px;
}

.ranron-1567 {
    font-size: 1.2em;
    max-width: 900px;
    margin: 0 auto 30px;
}

/* Service Tiers */
.ranron-5643 {
    padding: 40px 20px;
    background-color: #ecf0f1;
}

.ranron-1234, .ranron-9032, .ranron-2110 {
    background-color: #cce7ff;
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
}

 .ranron-9475 {
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
    background-color: plum;
}

.ranron-5632 {
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
    background-color: #b3b3b3;
}

.ranron-6781, .ranron-1120, .ranron-4310, .ranron-7812 .ranron-7812 {
    font-size: 20px;
    margin-bottom: 10px;
}



.ranron-1125 {
    font-size: 1.8em;
    margin-bottom: 10px;
}

.ranron-8901, .ranron-6341, .ranron-7654, .ranron-8888, .ranron-5934 {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.ranron-8901 li, .ranron-6341 li, .ranron-7654 li, .ranron-8888 li, .ranron-5934 li {
    padding: 8px 0;
    font-size: 1.1em;
}

/* Footer */
.ranron-3812 {
    background-color: #16a085;
    color: #fff;
    text-align: center;
    padding: 40px 20px;
}

.ranron-2284 {
    font-size: 2em;
    margin-bottom: 20px;
}

.ranron-1440 {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 1.2em;
}

.ranron-1440 li {
    padding: 10px 0;
}

.ranron-9085 {
    font-size: 1.5em;
    margin-top: 20px;
}

/* The Cockpit */
.section-cockpit { 
    margin: 0 auto; /* Centers horizontally */
    background: rgba(153, 204, 255, 0.7);
    border-radius: 15px;
    padding: 2rem;
    max-width: 1200px;
    margin-bottom: 30px;
    background: rgba(153, 204, 255, 0.2); /* Semi-transparent white */
    border-radius: 20px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), -10px -10px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    
    /* Glass effect: blur the background */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari */
    
    /* Add inner shadows for a more 3D effect */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), 
                inset 0px 0px 15px rgba(255, 255, 255, 0.3),
                inset 0px 0px 20px rgba(0, 0, 0, 0.15); /* Soft inner shadow for 3D look */
    
    /* Create a border with a soft glow */
    border: 1px solid rgba(255, 255, 255, 0.5);
    
    /* Optional: Add a subtle shine effect */
    position: relative;
    overflow: hidden;

    /* Centering it vertically and horizontally */
    display: flex;
    justify-content: center;

display: flex;
flex-direction: column;
}

.section-cockpit::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(153, 204, 255, 0.15), rgba(153, 204, 255, 0.1));

  z-index: -1; /* To stay behind the content */
  opacity: 0.5;
  pointer-events: none;
}

.trans-section {
    border-radius: 20px;
 

    overflow: hidden; /* Hide overflow for the transition */

    transition: height 1s ease; /* Transition for height only */
  /* Glass effect: blur the background */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* For Safari */
  
  /* Add inner shadows for a more 3D effect */
  background-color: hsl(120deg 20% 95%);
  box-shadow: 10px 10px 20px 0px rgb(124, 134, 124), 
    inset -8px -8px 16px 0px rgba(117, 133, 117, 0.7), 
    inset 0px 14px 28px 0px hsl(120deg 20% 95%);
  max-height: 0;
  transition: max-height 0.5s ease-out;
  overflow: hidden;
  padding: 0 20px; /* Keep padding in transition */
}

.trans-section.visible {
  max-height: 3000px; /* Expand to full height */
}

.trans-section h2 {
    margin: 0 0 10px 0;
    font-weight: bold;
    font-size: 1.8em;
    color: #555;
    text-shadow: 2px 2px 5px #aaa;
}

.section-buddort { 
    margin-bottom: 30px;
    background: rgba(128, 0, 128, 0.2); /* Semi-transparent purple */
    border-radius: 20px;
    padding: 20px;
  
    /* Glass effect: blur the background */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari */
  
    /* Add inner shadows for a more 3D effect */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), 
                inset 0px 0px 15px rgba(255, 255, 255, 0.3),
                inset 0px 0px 20px rgba(0, 0, 0, 0.15); /* Soft inner shadow for 3D look */
  
    /* Create a border with a soft glow */
    border: 1px solid rgba(255, 255, 255, 0.5);
  
    /* Optional: Add a subtle shine effect */
    position: relative;
    overflow: hidden;
}

.section-buddort::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(128, 0, 128, 0.15), rgba(128, 0, 128, 0.1));

    z-index: -1; /* To stay behind the content */
    opacity: 0.5;
    pointer-events: none;
}

.section-chamber {  
    margin-bottom: 30px;
    background: rgba(169, 169, 169, 0.5); /* Semi-transparent gray */
    border-radius: 20px;
    padding: 20px;
  
    /* Glass effect: blur the background */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari */
  
    /* Add inner shadows for a more 3D effect */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), 
                inset 0px 0px 15px rgba(255, 255, 255, 0.3),
                inset 0px 0px 20px rgba(0, 0, 0, 0.15); /* Soft inner shadow for 3D look */
  
    /* Create a border with a soft glow */
    border: 1px solid rgba(255, 255, 255, 0.5);
  
    /* Optional: Add a subtle shine effect */
    position: relative;
    overflow: hidden;
}

.section-chamber::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(169, 169, 169, 0.15), rgba(169, 169, 169, 0.1));

    z-index: -1; /* To stay behind the content */
    opacity: 0.5;
    pointer-events: none;
}

/* From Uiverse.io by SelfMadeSystem */
.frutiger-button {
  cursor: pointer;
  position: relative;
  padding: 2px;
  border-radius: 15px;
  border: 0;
  text-shadow: 1px 1px #000a;
  background: linear-gradient(#006caa, #00c3ff);
  box-shadow: 0px 4px 6px 0px #0008;
  transition: 0.3s all;
}

/* Hover effect */
.frutiger-button:hover {


box-shadow: 0 0 5px rgb(10, 186, 181),       /* Soft Tiffany Blue glow */
            0 0 25px rgb(10, 186, 181),      /* Medium Tiffany Blue glow */
            0 0 50px rgb(10, 186, 181),      /* Stronger Tiffany Blue glow */
            0 0 100px rgb(10, 186, 181);     /* Outer soft Tiffany Blue glow */

 
}

/* Keep the button's style the same after it's clicked */
.frutiger-button:active {
  /* You can add any active state effect here, e.g., changing the shadow on click */
  box-shadow: 0px 4px 6px 0px #0008; /* Keep the shadow same after click */
  background: linear-gradient(#006caa, #00c3ff); /* Keep background same */

}

/* The inner part of the button */
.inner {
  position: relative;
  inset: 0px;
  padding: 1em;
  border-radius: 15px;
  background: radial-gradient(circle at 50% 100%, #30f8f8 10%, #30f8f800 55%),
    linear-gradient(#00526a, #009dcd);
  overflow: hidden;
  transition: inherit;
}

/* Glowing animation effect inside the button */
.inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(-65deg, #0000 40%, #fff7 50%, #0000 70%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: thing 3s ease infinite;
}

/* Glowing animation for inner effect */
@keyframes thing {
  0% {
    background-position: 130%;
    opacity: 1;
  }

  to {
    background-position: -166%;
    opacity: 0;
  }
}

/* Top white effect for a smooth light hit */
.top-white {
  position: absolute;
  border-radius: inherit;
  inset: 0 -8em;
  background: radial-gradient(
    circle at 50% -270%,
    #fff 45%,
    #fff6 60%,
    #fff0 60%
  );
  transition: inherit;
}

/* Adding shadow effect inside the button when clicked */
.inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: inherit;
  box-shadow: inset 0px 2px 8px -2px #0000;
}

/* Active state inside button */
.frutiger-button:active .inner::after {
  box-shadow: inset 0px 2px 8px -2px #000a;
}

/* Text style */
.text {
font-size: 20px;
  position: relative;
  z-index: 1;
  color: white;
  font-weight: 550;
  transition: inherit;
}

.frutiger-button .text:hover {
  transform: scale(1.5); /* Slight zoom effect */
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8), 
               0 6px 12px rgba(0, 0, 0, 0.8);
  filter: brightness(1.5); /* Brighten on hover */
}


/* From Uiverse.io by SelfMadeSystem */
.frutiger-button-purple {
  cursor: pointer;
  position: relative;
  padding: 2px;
  border-radius: 15px;
  border: 0;
  text-shadow: 1px 1px #000a;
  background: linear-gradient(#6a00aa, #c300ff);
  box-shadow: 0px 4px 6px 0px #0008;
  transition: 0.3s all;
}

/* Hover effect */
.frutiger-button-purple:hover { 
  box-shadow: 0 0 5px rgb(128, 0, 128),       /* Soft purple glow */
              0 0 25px rgb(186, 85, 211),    /* Medium purple glow */
              0 0 50px rgb(147, 112, 219),   /* Stronger purple glow */
              0 0 100px rgb(216, 191, 216); /* Outer soft purple glow */
}


/* Keep the button's style the same after it's clicked */
.frutiger-button-purple:active {
  /* You can add any active state effect here, e.g., changing the shadow on click */
  box-shadow: 0px 4px 6px 0px #0008; /* Keep the shadow same after click */
  background: linear-gradient(#6a00aa, #c300ff); /* Keep background same */
}

/* The inner part of the button */
.frutiger-button-purple .inner {
  position: relative;
  inset: 0px;
  padding: 1em;
  border-radius: 15px;
  background: radial-gradient(circle at 50% 100%, #f830f8 10%, #f830f800 55%),
    linear-gradient(#4a005a, #9d00cd);
  overflow: hidden;
  transition: inherit;
}

/* Glowing animation effect inside the button */
.frutiger-button-purple .inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(-65deg, #0000 40%, #fff7 50%, #0000 70%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: purple-glow 3s ease infinite;
}

/* Glowing animation for inner effect */
@keyframes purple-glow {
  0% {
    background-position: 130%;
    opacity: 1;
  }
  to {
    background-position: -166%;
    opacity: 0;
  }
}

/* Top white effect for a smooth light hit */
.frutiger-button-purple .top-white {
  position: absolute;
  border-radius: inherit;
  inset: 0 -8em;
  background: radial-gradient(
    circle at 50% -270%,
    #fff 45%,
    #fff6 60%,
    #fff0 60%
  );
  transition: inherit;
}

/* Adding shadow effect inside the button when clicked */
.frutiger-button-purple .inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: inherit;
  box-shadow: inset 0px 2px 8px -2px #0000; /* Initial state with no inset shadow */
}

/* Active state inside button */
.frutiger-button-purple:active .inner::after {
  box-shadow: inset 0px 2px 8px -2px rgba(0, 0, 0, 0.6); /* Deeper pressed shadow */
  background: radial-gradient(circle at 50% 100%, #aa30f8 10%, #aa30f800 55%),
    linear-gradient(#5a005a, #cd00cd); /* Adjusted background for consistency */
}

/* Hover effect */
.frutiger-button-purple:hover {
  box-shadow: 0 0 5px rgb(128, 0, 128),       /* Soft purple glow */
              0 0 25px rgb(186, 85, 211),    /* Medium purple glow */
              0 0 50px rgb(147, 112, 219),   /* Stronger purple glow */
              0 0 100px rgb(216, 191, 216); /* Outer soft purple glow */
}

/* Text style */
.frutiger-button-purple .text {
  position: relative;
  z-index: 1;
  color: white;
  font-weight: 550;
  transition: inherit;
}

.frutiger-button-purple .text:hover {
  transform: scale(1.5); /* Slight zoom effect */
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8),
               0 6px 12px rgba(0, 0, 0, 0.8);
  filter: brightness(1.5); /* Brighten on hover */
}

/* From Uiverse.io by SelfMadeSystem */
.frutiger-button-teal {
  cursor: pointer;
  position: relative;
  padding: 2px;
  border-radius: 15px;
  border: 0;
  text-shadow: 1px 1px #000a;
  background: linear-gradient(#20B2AA, #5fdfbf);
  box-shadow: 0px 4px 6px 0px #0008;
  transition: 0.3s all;
}

/* Hover effect */
.frutiger-button-teal:hover { 
  box-shadow: 0 0 5px rgb(32, 178, 170),       /* Soft teal glow */
              0 0 25px rgb(47, 224, 190),    /* Medium teal glow */
              0 0 50px rgb(63, 216, 187),   /* Stronger teal glow */
              0 0 100px rgb(160, 255, 237); /* Outer soft teal glow */
}


/* Keep the button's style the same after it's clicked */
.frutiger-button-teal:active {
  box-shadow: 0px 4px 6px 0px #0008; /* Keep the shadow same after click */
  background: linear-gradient(#20B2AA, #5fdfbf); /* Keep background same */
}

/* The inner part of the button */
.frutiger-button-teal .inner {
  position: relative;
  inset: 0px;
  padding: 1em;
  border-radius: 15px;
  background: radial-gradient(circle at 50% 100%, #a0f8f8 10%, #a0f8f800 55%),
    linear-gradient(#20B2AA, #5fdfbf);
  overflow: hidden;
  transition: inherit;
}

/* Glowing animation effect inside the button */
.frutiger-button-teal .inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(-65deg, #0000 40%, #fff7 50%, #0000 70%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: teal-glow 3s ease infinite;
}

/* Glowing animation for inner effect */
@keyframes teal-glow {
  0% {
    background-position: 130%;
    opacity: 1;
  }
  to {
    background-position: -166%;
    opacity: 0;
  }
}

/* Top white effect for a smooth light hit */
.frutiger-button-teal .top-white {
  position: absolute;
  border-radius: inherit;
  inset: 0 -8em;
  background: radial-gradient(
    circle at 50% -270%,
    #fff 45%,
    #fff6 60%,
    #fff0 60%
  );
  transition: inherit;
}

/* Adding shadow effect inside the button when clicked */
.frutiger-button-teal .inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: inherit;
  box-shadow: inset 0px 2px 8px -2px #0000; /* Initial state with no inset shadow */
}

/* Active state inside button */
.frutiger-button-teal:active .inner::after {
  box-shadow: inset 0px 2px 8px -2px rgba(0, 0, 0, 0.6); /* Deeper pressed shadow */
  background: radial-gradient(circle at 50% 100%, #5af8f8 10%, #5af8f800 55%),
    linear-gradient(#20B2AA, #5fdfbf); /* Adjusted background for consistency */
}

/* Hover effect */
.frutiger-button-teal:hover {
  box-shadow: 0 0 5px rgb(32, 178, 170),       /* Soft teal glow */
              0 0 25px rgb(47, 224, 190),    /* Medium teal glow */
              0 0 50px rgb(63, 216, 187),   /* Stronger teal glow */
              0 0 100px rgb(160, 255, 237); /* Outer soft teal glow */
}

/* Text style */
.frutiger-button-teal .text {
  position: relative;
  z-index: 1;
  color: white;
  font-weight: 550;
  transition: inherit;
}

.frutiger-button-teal .text:hover {
  transform: scale(1.5); /* Slight zoom effect */
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8),
               0 6px 12px rgba(0, 0, 0, 0.8);
  filter: brightness(1.5); /* Brighten on hover */
}

/* From Uiverse.io by SelfMadeSystem */
.frutiger-button-black {
  cursor: pointer;
  position: relative;
  padding: 2px;
  border-radius: 15px;
  border: 0;
  text-shadow: 1px 1px #000a;
  background: linear-gradient(#000000, #444444);
  box-shadow: 0px 4px 6px 0px #0008;
  transition: 0.3s all;
}

/* Hover effect */
.frutiger-button-black:hover {
  box-shadow: 0 0 5px rgba(50, 50, 50, 1), /* Soft black/gray glow */
              0 0 25px rgba(30, 30, 30, 0.8), /* Medium gray glow */
              0 0 50px rgba(10, 10, 10, 0.7), /* Strong dark glow */
              0 0 100px rgba(0, 0, 0, 0.6); /* Outer subtle dark glow */
}

/* Active state inside button */
.frutiger-button-black:active {
  box-shadow: 0px 4px 6px 0px #0008; /* Keep the shadow same after click */
  background: linear-gradient(#000000, #444444); /* Keep background same */
}

/* The inner part of the button */
.frutiger-button-black .inner {
  position: relative;
  inset: 0px;
  padding: 1em;
  border-radius: 15px;
  background: radial-gradient(circle at 50% 100%, #666666 10%, #66666600 55%),
    linear-gradient(#222222, #555555);
  overflow: hidden;
  transition: inherit;
}

/* Glowing animation effect inside the button */
.frutiger-button-black .inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(-65deg, #0000 40%, #ffffff7a 50%, #0000 70%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: black-glow 3s ease infinite;
}

/* Glowing animation effect outside the button */



.frutiger-button-black .inner::after {
  content: "";
  position: absolute;
  inset: -4px; /* Slightly larger than the button to create an outer glow */
  border-radius: inherit;
  background: radial-gradient(circle, #00000000 60%, rgba(255, 255, 255, 0.1) 100%);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2),
              0 0 20px rgba(255, 255, 255, 0.15),
              0 0 40px rgba(255, 255, 255, 0.1);
  animation: outer-black-glow 4s linear infinite;
}

/* Glowing animation for inner effect */
@keyframes black-glow {
  0% {
    background-position: 130%;
    opacity: 1;
  }
  to {
    background-position: -166%;
    opacity: 0;
  }
}

/* Glowing animation for outer effect */
@keyframes outer-black-glow {
  0% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2),
                0 0 20px rgba(255, 255, 255, 0.15),
                0 0 40px rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3),
                0 0 30px rgba(255, 255, 255, 0.2),
                0 0 50px rgba(255, 255, 255, 0.15);
  }
  100% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2),
                0 0 20px rgba(255, 255, 255, 0.15),
                0 0 40px rgba(255, 255, 255, 0.1);
  }
}

/* Top white effect for a smooth light hit */
.frutiger-button-black .top-white {
  position: absolute;
  border-radius: inherit;
  inset: 0 -8em;
  background: radial-gradient(
    circle at 50% -270%,
    #ffffff 45%,
    #ffffff60 60%,
    #ffffff00 60%
  );
  transition: inherit;
}

/* Adding shadow effect inside the button when clicked */
.frutiger-button-black .inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: inherit;
  box-shadow: inset 0px 2px 8px -2px #0000;
}

/* Active state inside button */
/* Active state inside button */
.frutiger-button-black:active .inner::after {
  box-shadow: inset 0px 2px 8px -2px rgba(0, 0, 0, 0.6); /* Deeper pressed shadow */
  background: radial-gradient(circle at 50% 100%, #444444 10%, #44444400 55%),
    linear-gradient(#222222, #555555); /* Consistent darker pressed look */
}

/* Text style */
.frutiger-button-black .text {
  position: relative;
  z-index: 1;
  color: white;
  font-weight: 550;
  transition: inherit;
}

.frutiger-button-black .text:hover {
  transform: scale(1.5); /* Slight zoom effect */
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8), 
               0 6px 12px rgba(0, 0, 0, 0.8);
  filter: brightness(1.5); /* Brighten on hover */
}

.ping-button-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center-align both the ping and button */
    justify-content: center; /* Vertically center the content */
    position: relative; /* Set a relative position for the container */
}

.ping {
    --uib-size: 150px;
    --uib-speed: 2s;
    --uib-color: #3950cf;
    position: absolute; /* Position the ping relative to its container */
    top: -68px; /* Move the ping above the button, adjust as needed */
    height: var(--uib-size);
    width: var(--uib-size);
    z-index: -1;
}

.ping::before,
.ping::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: var(--uib-color);
    animation: pulse7132 var(--uib-speed) linear infinite;
    transform: scale(0);
    opacity: 0;
}

.ping::after {
    animation-delay: calc(var(--uib-speed) / -2);
}

@keyframes pulse7132 {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.ping-black {
    --uib-size: 150px;
    --uib-speed: 2s;
    --uib-color: #000000; /* Black color */
    position: absolute; /* Position the ping relative to its container */
    top: -68px; /* Move the ping above the button, adjust as needed */
    height: var(--uib-size);
    width: var(--uib-size);
    z-index: -1;
}

.ping-black::before,
.ping-black::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: var(--uib-color);
    animation: pulse7132 var(--uib-speed) linear infinite;
    transform: scale(0);
    opacity: 0;
}

.ping-black::after {
    animation-delay: calc(var(--uib-speed) / -2);
}

@keyframes pulse7132 {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.ping-purple {
    --uib-size: 150px;
    --uib-speed: 2s;
    --uib-color: #800080; /* Purple color */
    position: absolute; /* Position the ping relative to its container */
    top: -68px; /* Move the ping above the button, adjust as needed */
    height: var(--uib-size);
    width: var(--uib-size);
    z-index: -1;
}

.ping-purple::before,
.ping-purple::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: var(--uib-color);
    animation: pulse7132 var(--uib-speed) linear infinite;
    transform: scale(0);
    opacity: 0;
}

.ping-purple::after {
    animation-delay: calc(var(--uib-speed) / -2);
}

@keyframes pulse7132 {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.toast {
  width: 300px;
  background: white;
  position: fixed;
  bottom: 20px;

  right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  border-radius: 12px;

  background-color: hsl(120deg 20% 95%);
  box-shadow: 10px 10px 20px 0px rgb(124, 134, 124), 
    inset -8px -8px 16px 0px rgba(117, 133, 117, 0.7), 
    inset 0px 14px 28px 0px hsl(120deg 20% 95%);
  z-index: 1000; /* Ensures it appears above other content */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.toast.show {
  width: 300px;
  background: white;
  position: fixed;
  bottom: 20px;

  right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  border-radius: 12px;

  background-color: hsl(120deg 20% 95%);
  box-shadow: 10px 10px 20px 0px rgb(124, 134, 124), 
    inset -8px -8px 16px 0px rgba(117, 133, 117, 0.7), 
    inset 0px 14px 28px 0px hsl(120deg 20% 95%);
  z-index: 1000; /* Ensures it appears above other content */
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.toast .title {
  color: black;
  font-size: 1.4rem;
  font-weight: 600;
}

.toast .description {
  color: black;
  margin-top: 5px;
  margin-bottom: 15px;
}

.toast .prefs {
  color: blue;
  font-size: .9em;
  margin-bottom: 10px;
}

.toast .actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toast button {
  color: white;
  border: none;
  background: none;
  padding: 10px 15px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.1em;
  font-weight: bold;
}

.toast .decline {
  color: rgb(255, 0, 0);
  box-shadow: 4px 4px 8px 0px rgb(134, 124, 124), 
    inset -8px -8px 16px 0px rgba(92, 92, 92, 0.7), 
    inset 0px 14px 28px 0px hsl(120deg 20% 95%);
}

.toast .valid {
  color: rgb(0, 156, 0);
  box-shadow: 4px 4px 8px 0px rgb(124, 134, 125), 
    inset -8px -8px 16px 0px rgba(121, 121, 121, 0.7), 
    inset 0px 14px 28px 0px hsl(120deg 20% 95%);
}

.toast .decline:hover {
  color: white;
  background-color: rgb(255, 0, 0);
  box-shadow: 4px 4px 8px 0px rgb(134, 124, 124), 
    inset -8px -8px 16px 0px rgba(134, 20, 20, 0.7), 
    inset 0px 14px 28px 0px hsl(120deg 20% 95%);
}

.toast .valid:hover {
  color: white;
  background-color: rgb(0, 156, 0);
  box-shadow: 4px 4px 8px 0px rgb(124, 134, 125), 
    inset -8px -8px 16px 0px rgba(47, 134, 20, 0.7), 
    inset 0px 14px 28px 0px hsl(120deg 20% 95%);
}



/* Dim overlay styling */
.dim-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black for dim effect */
  backdrop-filter: blur(5px); /* Adds a blur effect to background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Ensure it's above everything */
  transition: background 0.3s ease-in-out; /* Smooth transition for the dim effect */
}

/* Hide the overlay initially */
.hidden {
  display: none;
}

/* Spinning logo */
.spinning-logo {
  width: 50px;
  height: 50px;
  animation: spin 10s linear infinite;
}

/* Animation for spinning */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* From Uiverse.io by SelfMadeSystem */
.frutiger-button-green {
  cursor: pointer;
  position: relative;
  padding: 2px;
  border-radius: 15px;
  border: 0;
  text-shadow: 1px 1px #000a;
  background: linear-gradient(#28A745, #6fdc8f);
  box-shadow: 0px 4px 6px 0px #0008;
  transition: 0.3s all;
}

/* Hover effect */
.frutiger-button-green:hover { 
  box-shadow: 0 0 5px rgb(40, 167, 69),       /* Soft green glow */
              0 0 25px rgb(84, 204, 126),    /* Medium green glow */
              0 0 50px rgb(98, 218, 138),   /* Stronger green glow */
              0 0 100px rgb(184, 255, 187); /* Outer soft green glow */
}


/* Keep the button's style the same after it's clicked */
.frutiger-button-green:active {
  box-shadow: 0px 4px 6px 0px #0008; /* Keep the shadow same after click */
  background: linear-gradient(#28A745, #6fdc8f); /* Keep background same */
}

/* The inner part of the button */
.frutiger-button-green .inner {
  position: relative;
  inset: 0px;
  padding: 1em;
  border-radius: 15px;
  background: radial-gradient(circle at 50% 100%, #a1f8a1 10%, #a1f8a100 55%),
    linear-gradient(#28A745, #6fdc8f);
  overflow: hidden;
  transition: inherit;
}

/* Glowing animation effect inside the button */
.frutiger-button-green .inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(-65deg, #0000 40%, #fff7 50%, #0000 70%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: green-glow 3s ease infinite;
}

/* Glowing animation for inner effect */
@keyframes green-glow {
  0% {
    background-position: 130%;
    opacity: 1;
  }
  to {
    background-position: -166%;
    opacity: 0;
  }
}

/* Top white effect for a smooth light hit */
.frutiger-button-green .top-white {
  position: absolute;
  border-radius: inherit;
  inset: 0 -8em;
  background: radial-gradient(
    circle at 50% -270%,
    #fff 45%,
    #fff6 60%,
    #fff0 60%
  );
  transition: inherit;
}

/* Adding shadow effect inside the button when clicked */
.frutiger-button-green .inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: inherit;
  box-shadow: inset 0px 2px 8px -2px #0000; /* Initial state with no inset shadow */
}

/* Active state inside button */
.frutiger-button-green:active .inner::after {
  box-shadow: inset 0px 2px 8px -2px rgba(0, 0, 0, 0.6); /* Deeper pressed shadow */
  background: radial-gradient(circle at 50% 100%, #6af86a 10%, #6af86a00 55%),
    linear-gradient(#28A745, #6fdc8f); /* Adjusted background for consistency */
}

/* Hover effect */
.frutiger-button-green:hover {
  box-shadow: 0 0 5px rgb(40, 167, 69),       /* Soft green glow */
              0 0 25px rgb(84, 204, 126),    /* Medium green glow */
              0 0 50px rgb(98, 218, 138),   /* Stronger green glow */
              0 0 100px rgb(184, 255, 187); /* Outer soft green glow */
}

/* Text style */
.frutiger-button-green .text {
  position: relative;
  z-index: 1;
  color: white;
  font-weight: 550;
  transition: inherit;
}

.frutiger-button-green .text:hover {
  transform: scale(1.5); /* Slight zoom effect */
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8),
               0 6px 12px rgba(0, 0, 0, 0.8);
  filter: brightness(1.5); /* Brighten on hover */
}

/* From Uiverse.io by SelfMadeSystem */
.frutiger-button-cream {
  cursor: pointer;
  position: relative;
  padding: 2px;
  border-radius: 15px;
  border: 0;
  text-shadow: 1px 1px #000a;
  background: linear-gradient(#f5e1b5, #f1d46d); /* Cream gradient */
  box-shadow: 0px 4px 6px 0px #0008;
  transition: 0.3s all;
}

/* Hover effect */
.frutiger-button-cream:hover {
  box-shadow: 0 0 5px rgb(255, 228, 196),       /* Soft cream glow */
              0 0 25px rgb(255, 224, 150),      /* Medium cream glow */
              0 0 50px rgb(255, 195, 130),      /* Stronger cream glow */
              0 0 100px rgb(255, 248, 220);     /* Outer soft cream glow */
}

/* Keep the button's style the same after it's clicked */
.frutiger-button-cream:active {
  box-shadow: 0px 4px 6px 0px #0008;
  background: linear-gradient(#f5e1b5, #f1d46d); /* Keep background same */
}

/* The inner part of the button */
.frutiger-button-cream .inner {
  position: relative;
  inset: 0px;
  padding: 1em;
  border-radius: 15px;
  background: radial-gradient(circle at 50% 100%, #fff3c1 10%, #fff3c100 55%),
    linear-gradient(#f1e0a7, #e8c96a); /* Creamy inner background */
  overflow: hidden;
  transition: inherit;
}

/* Glowing animation effect inside the button */
.frutiger-button-cream .inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(-65deg, #0000 40%, #fff7 50%, #0000 70%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: cream-glow 3s ease infinite;
}

/* Glowing animation for inner effect */
@keyframes cream-glow {
  0% {
    background-position: 130%;
    opacity: 1;
  }
  to {
    background-position: -166%;
    opacity: 0;
  }
}

/* Top white effect for a smooth light hit */
.frutiger-button-cream .top-white {
  position: absolute;
  border-radius: inherit;
  inset: 0 -8em;
  background: radial-gradient(
    circle at 50% -270%,
    #fff 45%,
    #fff6 60%,
    #fff0 60%
  );
  transition: inherit;
}

/* Adding shadow effect inside the button when clicked */
.frutiger-button-cream .inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: inherit;
  box-shadow: inset 0px 2px 8px -2px #0000;
}

/* Active state inside button */
.frutiger-button-cream:active .inner::after {
  box-shadow: inset 0px 2px 8px -2px rgba(0, 0, 0, 0.6);
  background: radial-gradient(circle at 50% 100%, #f3e1b5 10%, #f3e1b500 55%),
    linear-gradient(#f1d46d, #e8c96a); /* Adjusted background for consistency */
}

/* Text style */
.frutiger-button-cream .text {
  position: relative;
  z-index: 1;
  color: #6b4f1f; /* Dark cream for the text */
  font-weight: 550;
  transition: inherit;
}

.frutiger-button-cream .text:hover {
  transform: scale(1.5); /* Slight zoom effect */
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8),
               0 6px 12px rgba(0, 0, 0, 0.8);
  filter: brightness(1.5); /* Brighten on hover */
}

.recovery-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

.recovery-code-wrapper {
    flex-grow: 1; /* Takes all available space */
}

.full-width {
    width: 100%;
    box-sizing: border-box; /* Includes padding in width calculation */
}

.recover-button-wrapper {
    flex-shrink: 0; /* Prevents the button from shrinking */
}

/* Keep your existing styles for other elements */
.input-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 10px 0;
}

/* From Uiverse.io by SelfMadeSystem */
.frutiger-button-red {
  cursor: pointer;
  position: relative;
  padding: 2px;
  border-radius: 15px;
  border: 0;
  text-shadow: 1px 1px #000a;
  background: linear-gradient(#a80000, #ff0000);
  box-shadow: 0px 4px 6px 0px #0008;
  transition: 0.3s all;
}

/* Hover effect */
.frutiger-button-red:hover { 
  box-shadow: 0 0 5px rgb(255, 0, 0),       /* Soft red glow */
              0 0 25px rgb(255, 0, 0),      /* Medium red glow */
              0 0 50px rgb(255, 60, 60),    /* Stronger red glow */
              0 0 100px rgb(255, 100, 100); /* Outer soft red glow */
}


/* Keep the button's style the same after it's clicked */
.frutiger-button-red:active {
  /* Keep the shadow and background consistent after click */
  box-shadow: 0px 4px 6px 0px #0008;
  background: linear-gradient(#a80000, #ff0000);
}

/* The inner part of the button */
.frutiger-button-red .inner {
  position: relative;
  inset: 0px;
  padding: 1em;
  border-radius: 15px;
  background: radial-gradient(circle at 50% 100%, #ff3030 10%, #ff303000 55%),
    linear-gradient(#7a0000, #d70000);
  overflow: hidden;
  transition: inherit;
}

/* Glowing animation effect inside the button */
.frutiger-button-red .inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(-65deg, #0000 40%, #ffffff7a 50%, #0000 70%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: red-glow 3s ease infinite;
}

/* Glowing animation for inner effect */
@keyframes red-glow {
  0% {
    background-position: 130%;
    opacity: 1;
  }
  to {
    background-position: -166%;
    opacity: 0;
  }
}

/* Top white effect for a smooth light hit */
.frutiger-button-red .top-white {
  position: absolute;
  border-radius: inherit;
  inset: 0 -8em;
  background: radial-gradient(
    circle at 50% -270%,
    #fff 45%,
    #fff6 60%,
    #fff0 60%
  );
  transition: inherit;
}

/* Active state inside button */
.frutiger-button-red:active .inner::after {
  box-shadow: inset 0px 2px 8px -2px rgba(0, 0, 0, 0.6); /* Deeper pressed shadow */
  background: radial-gradient(circle at 50% 100%, #ff4b2b 10%, #ff4b2b00 55%),
    linear-gradient(#8b0000, #ff6347); /* Adjusted background for consistency */
}

/* Active state inside button */
.frutiger-button-red:active .inner::after {
  box-shadow: inset 0px 2px 8px -2px #000a;
}

/* Text style */
.frutiger-button-red .text {
  position: relative;
  z-index: 1;
  color: white;
  font-weight: 550;
  transition: inherit;
}

.frutiger-button-red .text:hover {
  transform: scale(1.5); /* Slight zoom effect */
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8), 
               0 6px 12px rgba(0, 0, 0, 0.8);
  filter: brightness(1.5); /* Brighten on hover */
}

      .requirements-box {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            border-radius: 8px;
            background: #f8f9fa;
            border-left: 4px solid #ff9800;
            font-family: Arial, sans-serif;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .requirements-box h2 {
            margin-top: 0;
            color: #333;
        }
        .requirements-box ul {
            padding-left: 20px;
        }
        .requirements-box li {
            margin-bottom: 8px;
        }
        .warning {
            color: #d32f2f;
            font-weight: bold;
            margin: 15px 0;
        }
        .note {
            font-style: italic;
            color: #555;
        }

/* Tantrum */
.tantrum { 
    margin-bottom: 20px;
    background: rgba(153, 204, 255, 0.7);
    border-radius: 15px;
    padding: 20px;

  margin-bottom: 30px;
  background: rgba(153, 204, 255, 0.2); /* Semi-transparent white */


  border-radius: 20px;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), -10px -10px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  padding: 20px;
  
  /* Glass effect: blur the background */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* For Safari */
  
  /* Add inner shadows for a more 3D effect */
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), 
              inset 0px 0px 15px rgba(255, 255, 255, 0.3),
              inset 0px 0px 20px rgba(0, 0, 0, 0.15); /* Soft inner shadow for 3D look */
  
  /* Create a border with a soft glow */
  border: 1px solid rgba(255, 255, 255, 0.5);
  
  /* Optional: Add a subtle shine effect */
  position: relative;
  overflow: hidden;

}

.tantrum::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(153, 204, 255, 0.15), rgba(153, 204, 255, 0.1));

  z-index: -1; /* To stay behind the content */
  opacity: 0.5;
}

/* Tantrum */
.tantrum-teal { 
  margin-bottom: 30px;
  background: rgba(153, 255, 204, 0.2); /* Pale teal green background */
  border-radius: 20px;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), 
              inset 0px 0px 15px rgba(255, 255, 255, 0.3),
              inset 0px 0px 20px rgba(0, 0, 0, 0.15); /* Soft inner shadow for 3D look */
  padding: 20px;
  
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* For Safari */
  
  border: 1px solid rgba(255, 255, 255, 0.5);
  
  position: relative;
  overflow: hidden;
}

.tantrum-teal::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(153, 255, 204, 0.15), rgba(153, 255, 204, 0.1)); /* Pale teal overlay */
  z-index: -1;
  opacity: 0.5;
}

/* Tantrum */
.tantrum-gray { 
  margin-bottom: 30px;
  background: rgba(211, 211, 211, 0.2); /* Light gray background */
  border-radius: 20px;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), 
              inset 0px 0px 15px rgba(255, 255, 255, 0.3),
              inset 0px 0px 20px rgba(0, 0, 0, 0.15); /* Soft inner shadow for 3D look */
  padding: 20px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* For Safari */

  border: 1px solid rgba(255, 255, 255, 0.5);

  position: relative;
  overflow: hidden;
}

.tantrum-gray::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(211, 211, 211, 0.15), rgba(211, 211, 211, 0.1)); /* Light gray overlay */
  z-index: -1;
  opacity: 0.5;
}

.ping-red {
    --uib-size: 150px;
    --uib-speed: 2s;
    --uib-color: #FF0000; /* Red color */
    position: absolute; /* Position the ping relative to its container */
    top: -68px; /* Move the ping above the button, adjust as needed */
    height: var(--uib-size);
    width: var(--uib-size);
    z-index: -1;
}

.ping-red::before,
.ping-red::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: var(--uib-color);
    animation: pulse7132 var(--uib-speed) linear infinite;
    transform: scale(0);
    opacity: 0;
}

.ping-red::after {
    animation-delay: calc(var(--uib-speed) / -2);
}

@keyframes pulse7132 {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}


.codeinput {
  margin: 30px;
  background: none;
  border: none;
  outline: none;
  max-width: 190px;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 9999px;
  box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
  color: #fff;
}

.flex-row-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  justify-content: center;
}


/* ===== Section Scroll ===== */
.section-scroll { 
  margin-bottom: 20px;
  border-radius: 15px;
  padding: 20px;
  max-height: calc(100vh - 100px); /* Fixed height when visible */
  overflow-y: auto; /* Enable vertical scrolling if content exceeds height */
  background: rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 
              0 0 20px rgba(0, 0, 0, 0.1);
  position: relative; /* Optional, if you need additional positioning */

  /* New scrollbar styles */
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.1); /* For Firefox */

  /* WebKit (Chrome, Safari, Edge) customization */
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    margin: 4px 0;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color 0.2s ease;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }
}

/* Add to your existing CSS */
#2faHelpText, #emailVerifyHelpText {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Style for the 2FA input when visible */
#authCodeBasic {
  transition: all 0.3s ease;
}

/* Smooth transitions for 2FA input */
.f25-input {
  transition: all 0.3s ease;
}

/* Style for readonly password during 2FA */
input[readonly] {
  background-color: #f9f9f9 !important;
  border-color: #e0e0e0 !important;
}

/* 2FA help text styling */
.2fa-help-text {
  animation: fadeIn 0.5s ease-in;
  padding: 10px;
  border-radius: 8px;
  background-color: #f8f9fa;
  border-left: 4px solid #007bff;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.ai-chatRed {
    background-color: #FFEBEE;
    border: 4px solid #EF9A9A;
    border-radius: 15px;
    margin-bottom: 10px;
    padding: 10px;
}

.ai-chat {
    background-color: #FFF8E1;
    border: 4px solid #FFE082;
    border-radius: 15px;
    margin-bottom: 10px;
    padding: 10px;
}

.ai-chatBlue {
    background-color: #00c3ff;
    border: 4px solid  #006caa;
    border-radius: 15px;
    margin-bottom: 10px;
    padding: 10px;
}
 

.ai-chatTeal {
    background-color: #5fdfbf;
    border: 4px solid  #20B2AA;
    border-radius: 15px;
    margin-bottom: 10px;
    padding: 10px;
}

.ai-chatGrey {
    background-color: rgb(179, 179, 179);
    border: 4px solid black;
    border-radius: 15px;
    margin-bottom: 10px;
    padding: 10px;
}

.ai-chatGreen {
    background-color: #E1F5E1;
    border: 4px solid #A5D6A7;
    border-radius: 15px;
    margin-bottom: 10px;
    padding: 10px;
}

.ai-chatPlum {
    background-color: #EAE1F3;
    border: 4px solid #B39DDB;
    border-radius: 15px;
    margin-bottom: 10px;
    padding: 10px;
}
.app-icon {
  width: 250px;
  height: 250px;
  background: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, 
              rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, 
              rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}