/* Base styles for the header container */
.header-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px; /* default gap */
  padding: 12px 24px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* Buttons default size */
.header-container button {
  padding: 0 !important;
  width: 48px !important; /* 12 * 4px = 48px */
  height: 48px !important;
}

/* === Responsive Adjustments === */

/* Horizontal scroll on small screens (420px) */
@media (max-width: 420px) {
  .header-container {
    overflow-x: auto;
    white-space: nowrap;
  }

  .header-container button {
    display: inline-block;
  }
}

/* Extra small devices (420px to 639px) */
/* We reduce gap and button size to fit better */
@media (max-width: 639px) {
  .header-container {
    gap: 8px;
    padding: 8px 16px;
  }

  .header-container button {
    width: 40px !important;
    height: 40px !important;
  }
}

/* Small devices (640px to 767px) */
@media (min-width: 640px) and (max-width: 767px) {
  .header-container {
    gap: 10px;
    padding: 10px 20px;
  }

  .header-container button {
    width: 44px !important;
    height: 44px !important;
  }
}

/* Medium devices (768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .header-container {
    gap: 12px;
    padding: 12px 24px;
  }

  .header-container button {
    width: 48px !important;
    height: 48px !important;
  }
}

/* Large devices (1024px to 1919px) */
@media (min-width: 1024px) and (max-width: 1919px) {
  .header-container {
    gap: 14px;
    padding: 14px 28px;
  }

  .header-container button {
    width: 52px !important;
    height: 52px !important;
  }
}

/* Extra large devices (1920px and up) */
@media (min-width: 1920px) {
  .header-container {
    gap: 16px;
    padding: 16px 32px;
  }

  .header-container button {
    width: 56px !important;
    height: 56px !important;
  }
}
/**
 * @file opt/aurahyprs-dev/frontend/src/Footer.css
 * ---------------------------------------------------------------
 * @description
 * This CSS file contains the styling for the footer layout, 
 * including the navbar, buttons, text, and responsive design for different 
 * screen sizes. The design uses a vibrant color scheme and smooth transitions 
 * to create an interactive and visually appealing user experience. 
 * The file ensures the app is well-styled across mobile (-first),
 * tablet (&-landscape view) and desktop devices.
 * ---------------------------------------------------------------
 * @features
 * - Color scheme using custom CSS variables for consistent theming
 * - Styling for footer navbar, including active state and hover effects
 * - Button hover effects and transitions
 * - Responsive design with media queries for mobile, tablet, and desktop
 * - Custom text styles for headings and paragraphs
 * - Footer styling with link hover effects and active state
 * ---------------------------------------------------------------
 * @author CastleLabs InternAItional
 * @company AuraHyprs · CastleLabs InternAItional
 * @contact support@aurahyprs.com
 * @copyright (c) 2025 AuraHyprs
 * @license MIT
 * @created 2025-08-11
 * @updated 2025-08-12
 * @version 0.4.6-beta
 * ---------------------------------------------------------------
 */

/* ================================
   🔗 LINKS
================================ */
a {
  color: var(--primary);
  text-decoration: none; /* Remove the Underline */
  font-style: italic;
  transition: color var(--transition-speed, 0.3s) ease-in-out;
  font-size: clamp(0.85rem, 0.9vw + 0.5rem, 1.1rem);
}

a:hover {
  color: var(--primary-foreground);
  text-decoration: underline;
  font-style: italic;
}

a:visited {
  color: var(--muted-foreground);
  text-decoration: underline;
  font-style: italic;
}

/* ================================
   🚀 NAVBAR
================================ */
.navbar {
  background-color: var(--glass-bg);
  backdrop-filter: blur(clamp(5px, 1vw, 10px));
  padding: clamp(0.5rem, 0.8vw + 0.3rem, 1.5rem);
  border-radius: var(--radius);
  position: relative !important;
  z-index: 0 !important;
  display: none !important;
}

.navbar .navbar-nav {
  display: flex;
  flex-direction: column;
  gap: clamp(0.25rem, 0.5vw, 1rem);
}

.navbar .nav-link {
  color: var(--foreground);
  font-size: clamp(0.9rem, 0.8vw + 0.5rem, 1.2rem);
  border-radius: var(--radius);
  padding: clamp(6px, 0.8vw, 12px) clamp(12px, 1vw + 8px, 25px);
}

.navbar .nav-link:hover {
  background-color: var(--muted);
  text-shadow: 0 0 clamp(5px, 0.5vw, 10px) var(--primary);
  box-shadow: 0 0 clamp(5px, 0.5vw, 10px) var(--primary);
}

/* Hamburger visible on mobile */
.navbar-toggler {
  display: flex;
  background: none;
  border: none;
  padding: clamp(0.25rem, 0.5vw, 0.8rem);
  margin-left: auto;
}

.navbar-toggler-icon {
  background-color: var(--foreground);
  height: clamp(2px, 0.3vw, 4px);
  width: clamp(20px, 5vw, 35px);
  border-radius: clamp(1px, 0.2vw, 3px);
  position: relative;
  transition: 0.3s;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: "";
  background-color: var(--foreground);
  position: absolute;
  width: 100%;
  height: clamp(2px, 0.3vw, 4px);
  left: 0;
  border-radius: clamp(1px, 0.2vw, 3px);
  transition: 0.3s;
}

.navbar-toggler-icon::before {
  top: -clamp(6px, 1vw, 10px);
}

.navbar-toggler-icon::after {
  top: clamp(6px, 1vw, 10px);
}

/* ================================
   ✨ HEADINGS
================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--card-foreground);
  text-shadow: 0 0 clamp(8px, 1vw, 20px) var(--aura-glow-color-1);
  animation: pulseGlow 1.5s infinite alternate;
  font-size: clamp(1.5rem, 1.8vw + 1rem, 3.5rem);
}

@keyframes pulseGlow {
  from {
    text-shadow: 0 0 clamp(8px, 1vw, 20px) var(--aura-glow-color-1);
  }
  to {
    text-shadow: 0 0 clamp(15px, 2vw, 40px) var(--aura-glow-color-2);
  }
}

/* ================================
   🔘 BUTTONS
================================ */
.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  max-width: 100%;
  word-wrap: break-word;
  padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem);
  font-size: clamp(1rem, 1vw + 0.5rem, 1.4rem);
  font-weight: 600;
  border-radius: clamp(20px, 5vw, 40px);
  border: none;
  box-shadow: 0 clamp(4px, 0.5vw, 15px) clamp(15px, 2vw, 30px) var(--aura-glow-color-3);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  transform: scale(1.05);
  box-shadow: 0 0 clamp(20px, 3vw, 40px) var(--aura-glow-color-3);
}

/* ================================
   🌌 FOOTER
================================ */
.glow-footer {
  position: relative;
  width: 100%;
  background: var(--glow-footer-bg);
  backdrop-filter: blur(clamp(5px, 1vw, 15px));
  -webkit-backdrop-filter: blur(clamp(5px, 1vw, 15px));
  border-top: clamp(2px, 0.3vw, 4px) solid var(--glow-footer-border);
  box-shadow: 0 0 clamp(25px, 3vw, 40px) var(--aura-glow-color-3);
  color: var(--glow-footer-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(0.2rem, 0.5vw, 1rem) clamp(1rem, 2vw, 4rem);
  border-radius: clamp(15px, 3vw, 40px) clamp(15px, 3vw, 40px) 0 0;
  z-index: 999;
  padding-left: clamp(1.5rem, 3vw, 4rem);
}

.glow-footer .footer-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.glow-footer .footer-nav {
  display: flex;
  gap: clamp(10px, 1vw, 20px);
}

.glow-footer .footer-nav a {
  color: var(--primary);
  text-decoration: none;
  font-weight: bold;
  font-size: clamp(0.8rem, 0.7vw + 0.7rem, 1rem);
  padding: clamp(4px, 0.5vw, 10px) clamp(8px, 1vw, 20px);
  transition: all 0.3s ease-in-out;
  position: relative;
}

.glow-footer .footer-nav a:hover {
  color: var(--primary);
  text-shadow: 0 0 clamp(10px, 1vw, 20px) var(--primary);
}

.glow-footer .footer-nav a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: clamp(2px, 0.2vw, 3px);
  bottom: -clamp(3px, 0.3vw, 5px);
  left: 0;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.glow-footer .footer-nav a:hover::before {
  transform: scaleX(1);
}

.glow-footer .footer-logo {
  display: flex;
  align-items: center;
  text-align: center;
  gap: clamp(8px, 1vw, 16px);
  padding: 0 clamp(1.5rem, 3vw, 4rem);
}

.glow-footer .footer-logo img {
  height: clamp(30px, 1vw + 30px, 50px);
  filter: drop-shadow(0 0 clamp(10px, 1vw, 20px) var(--glow-footer-text));
}

.glow-footer .footer-logo p {
  margin: clamp(4px, 0.5vw, 10px) 0 0;
  font-size: clamp(0.7rem, 0.5vw + 0.5rem, 1rem);
  font-weight: bold;
  color: rgba(var(--glow-footer-text-rgb, 255, 255, 255), 0.7);
}

/* ================================
   🎯 Responsive FOOTER Visibility & Layout
================================ */
@media (max-width: 766px) {
  .glow-footer {
    display: none !important;
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
  }
}

@media (min-width: 767px) and (max-width: 1023px) {
  .glow-footer .footer-content {
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1vw, 16px);
  }

  .glow-footer .footer-nav {
    flex-wrap: wrap;
    justify-content: center;
  }

  .glow-footer .footer-nav a {
    font-size: clamp(0.8rem, 0.6vw + 0.6rem, 1rem);
    padding: clamp(6px, 0.5vw, 10px) clamp(8px, 1vw, 18px);
  }

  .glow-footer .footer-logo {
    align-items: center;
    text-align: center;
    margin-top: clamp(8px, 1vw, 20px);
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .glow-footer .footer-content {
    flex-direction: row;
    justify-content: space-between;
    gap: clamp(16px, 2vw, 32px);
    padding: clamp(1rem, 1.5vw, 2rem) clamp(1rem, 2vw, 3rem);
  }

  .glow-footer .footer-nav a {
    font-size: clamp(0.9rem, 0.7vw + 0.7rem, 1.1rem);
    padding: clamp(8px, 0.7vw, 14px) clamp(12px, 1vw, 20px);
  }
}

@media (min-width: 1440px) {
  .glow-footer .footer-content {
    padding: clamp(2rem, 2vw, 4rem) clamp(3rem, 3vw, 6rem);
    gap: clamp(24px, 3vw, 48px);
  }

  .glow-footer .footer-nav a {
    font-size: clamp(1rem, 0.7vw + 1rem, 1.2rem);
    padding: clamp(10px, 0.8vw, 20px) clamp(14px, 1vw, 28px);
  }

  .glow-footer .footer-logo img {
    height: clamp(40px, 1vw + 40px, 60px);
  }
}

/* ================================
   📱 SMALL DEVICES (until 420px)
================================ */
@media (max-width: 420px) {
  .navbar-toggler {
    display: flex !important;
  }

  .navbar-collapse {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .navbar-nav .nav-link {
    font-size: clamp(1rem, 2vw + 0.8rem, 1.3rem);
    padding: clamp(10px, 1vw + 6px, 16px) clamp(14px, 2vw + 10px, 24px);
    width: 100%;
  }

  .navbar-toggler.open .navbar-collapse {
    display: flex;
  }

  .navbar-toggler.open .navbar-toggler-icon {
    transform: rotate(90deg);
  }
}

/* ================================
   📱📲 TABLETS PORTRAIT (421px–768px)
================================ */
@media (min-width: 421px) and (max-width: 768px) {
  .navbar-toggler {
    display: flex !important;
  }

  .navbar-collapse {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .navbar-nav {
    flex-direction: row;
    justify-content: center;
  }

  .navbar-nav .nav-link {
    font-size: clamp(1rem, 1vw + 0.9rem, 1.4rem);
    padding: clamp(10px, 1vw + 8px, 18px) clamp(14px, 2vw + 12px, 28px);
  }

  .navbar-toggler.open .navbar-collapse {
    display: flex;
  }
}

/* ================================
   💻 TABLETS LANDSCAPE (769px–1024px)
================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .navbar-toggler {
    display: flex;
  }

  .navbar-collapse {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .navbar-nav {
    flex-direction: row;
    justify-content: center;
  }

  .navbar-nav .nav-link {
    font-size: clamp(0.95rem, 0.8vw + 0.8rem, 1.3rem);
    padding: clamp(12px, 1vw + 12px, 22px) clamp(16px, 2vw + 14px, 28px);
  }
}

/* ================================
   🖥️ DESKTOP (1025px–1280px)
================================ */
@media (min-width: 1025px) and (max-width: 1280px) {
  .navbar-toggler {
    display: flex;
  }

  .navbar-collapse {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .navbar-nav {
    flex-direction: row;
    justify-content: center;
  }

  .navbar-nav .nav-link {
    font-size: clamp(1rem, 0.8vw + 1rem, 1.4rem);
    padding: clamp(14px, 1vw + 14px, 26px) clamp(18px, 2vw + 18px, 32px);
  }
}
.language-switcher-btn {
  border-radius: 50%;
  width: clamp(40px, 2vw + 20px, 60px);
  height: clamp(40px, 2vw + 20px, 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 4px 8px var(--aura-shadow);
  font-size: clamp(1rem, 1vw + 0.5rem, 1.4rem);
  background-color: var(--accent-purple);
  color: var(--foreground);
  border: none;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.2s ease;
}

.language-switcher-btn:hover {
  background-color: var(--accent-purple-light);
  transform: scale(1.05);
}

.language-switcher-dropdown {
  background-color: var(--accent-purple);
  color: var(--foreground);
  border-radius: var(--radius);
  min-width: clamp(45px, 3vw + 30px, 70px);
  box-shadow: 0 0 15px rgba(var(--aura-purple-rgb), 0.5);
  padding: clamp(6px, 1vw, 12px) 0;
  position: absolute;
  bottom: clamp(45px, 2vw + 30px, 60px);
}

.language-switcher-item {
  padding: clamp(6px, 1vw, 10px) clamp(10px, 2vw, 18px);
  font-size: clamp(0.85rem, 0.8vw + 0.4rem, 1.1rem);
  color: var(--foreground);
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.language-switcher-item:hover {
  background-color: var(--accent-purple-light);
  color: var(--foreground);
}

.language-switcher {
  position: fixed;
  bottom: clamp(12px, 1vw + 5px, 25px);
  left: clamp(8px, 1vw + 5px, 20px);
  transition: left 0.3s ease;
  z-index: 9999;
}

/* Feinjustierung für sehr kleine Bildschirme */
@media (max-width: 420px) {
  .language-switcher-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .language-switcher-dropdown {
    min-width: 45px;
    bottom: 45px;
    padding: 6px 0;
  }

  .language-switcher-item {
    padding: 6px 10px;
    font-size: 0.9rem;
  }

  .language-switcher {
    left: 12px;
    bottom: 12px;
  }
}
/**
 * @file opt/aurahyprs-dev/frontend/src/pages/Landing.css
 * --------------------------------------------------------------
 * @description
 * This CSS file defines the animations for a dynamic background gradient and a glowing logo effect. 
 *
 * @animations
 * - gradientMovement: A smooth, flowing background gradient animation that transitions between different opacity levels.
 * - logoGlow: A glowing logo effect that fades in and out to create a soft, pulsing glow.
 * ---------------------------------------------------------------
 * @author CastleLabs InternAItional
 * @company AuraHyprs · CastleLabs InternAItional
 * @contact support@aurahyprs.com
 * @copyright (c) 2025 AuraHyprs
 * @license MIT
 * @created 2025-03-13
 * @updated 2025-08-12
 * @version 0.4.6
 * ---------------------------------------------------------------
 */

/* Basic setup for the background gradient container */
.background-gradient {
  position: fixed; /* Fixed position to cover entire viewport */
  inset: 0;
  background: black;
  z-index: 0;
}

/* Keyframes for pulsing animation on logo */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.85;
  }
}

/* Logo styling with pulsing animation */
.logo-animation {
  animation: pulse 3s ease-in-out infinite;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  max-width: clamp(280px, 10vw, 600px);
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 10;
}

/* Styles for main heading (h1) */
h1 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: clamp(0.3rem, 1vw, 0.5rem);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  font-size: clamp(1.8rem, 2vw + 0.5rem, 3rem);
}

/* Styles for paragraph text */
p {
  color: var(--text);
  opacity: 0.9;
  line-height: 1.5;
  max-width: clamp(280px, 30vw, 800px);
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  font-size: clamp(1rem, 1vw + 0.1rem, 1.4rem);
}

/* Common styling for heading, paragraph and dark buttons */
h1,
p,
.btn-dark {
  position: relative;
  z-index: 15;
  color: var(--text);
}

/* Styling for buttons with dark theme */
button.btn-dark {
  background-color: var(--card-bg-alt);
  border: none;
  border-radius: var(--radius) !important;
  padding: clamp(10px, 1vw + 6px, 14px) clamp(24px, 2vw + 10px, 40px) !important;
  font-size: clamp(1rem, 1vw + 0.2rem, 1.4rem) !important;
  min-width: clamp(140px, 15vw, 180px);
  box-shadow: 0 4px 10px rgba(219, 39, 119, 0.5);
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
  z-index: 10;
  cursor: pointer;
  color: var(--primary-foreground);
}

/* Hover and focus effects for dark buttons */
button.btn-dark:hover,
button.btn-dark:focus {
  background-color: var(--primary);
  box-shadow: 0 6px 16px rgba(219, 39, 119, 0.75);
  outline: none;
  color: var(--primary-foreground);
}

/* Container for layout with flex display */
.container-fluid.d-flex {
  position: relative !important;
  z-index: 10;
  min-height: 100vh !important;
  padding-left: clamp(8px, 2vw, 16px) !important;
  padding-right: clamp(8px, 2vw, 16px) !important;
}

/* Responsive tweaks via media queries - only for special cases */

/* For very small screens (below 420px) - optional */
@media (max-width: 420px) {
  h1 {
    font-size: 1.6rem;
  }
  p {
    font-size: 0.95rem;
    max-width: 90%;
  }
  .logo-animation {
    max-width: 260px;
  }
  button.btn-dark {
    font-size: 0.95rem !important;
    padding: 8px 20px !important;
    min-width: 130px;
  }
}
/**
 * @file opt/aurahyprs-dev/frontend/src/pages/Dashboard.css
 * ---------------------------------------------------------------
 * @description
 * This file contains the styling for the dashboard layout, including header,
 * profile section, sidebar, revenue overview, transaction history, and responsive design
 * for various screen sizes.
 * ---------------------------------------------------------------
 * @author CastleLabs InternAItional
 * @company AuraHyprs · CastleLabs InternAItional
 * @contact support@aurahyprs.com
 * @copyright (c) 2025 AuraHyprs
 * @license MIT
 * @created 2025-03-13
 * @updated 2025-08-12
 * ---------------------------------------------------------------
 */

/* 🎯 Dashboard Header */
.dashboard-header {
  background: var(--background, rgba(var(--bg-rgb, 55, 0, 179), 0.4));
  backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 3px solid var(--header-border, var(--aura-purple));
  box-shadow: 0 0 clamp(20px, 1.5vw, 30px) var(--header-shadow, var(--aura-shadow));
  padding: clamp(1rem, 2vw, 1.5rem);
  text-align: center;
  border-radius: var(--radius, 16px);
  position: relative;
  z-index: 10;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.dashboard-header:hover {
  background: var(--header-hover-bg, var(--aura-glass));
  box-shadow:
    0 0 clamp(25px, 2vw, 40px) var(--accent-pink, var(--aura-glow)),
    0 0 clamp(40px, 3vw, 60px) var(--accent-purple, var(--aura-purple));
}

.dashboard-header h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 700;
  color: var(--text-light, var(--text));
  text-shadow:
    0 0 5px var(--accent-pink, var(--aura-glow)),
    0 0 10px var(--accent-purple, var(--aura-purple)),
    0 0 15px var(--accent-pink, var(--aura-glow)),
    0 0 20px var(--accent-purple, var(--aura-purple));
  -webkit-text-stroke: 0.7px rgba(236, 72, 153, 0.9);
  letter-spacing: 1.2px;
}

/* Logout Button */
.logout-button {
  position: absolute;
  top: clamp(1rem, 2vw, 18px);
  right: clamp(1rem, 2vw, 18px);
  background: transparent;
  color: var(--destructive);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 700;
  padding: clamp(0.4em, 0.8vw, 0.5em) clamp(1em, 2vw, 1.2em);
  border-radius: 40px;
  border: 2px solid var(--destructive);
  cursor: pointer;
  transition: 0.4s ease;
  box-shadow: 0 0 clamp(12px, 1vw, 12px) var(--destructive);
}

.logout-button:hover {
  background: var(--hover-bg-dark, var(--aura-glass));
  color: var(--card-foreground);
  box-shadow:
    0 0 clamp(20px, 1.5vw, 20px) var(--accent-pink, var(--aura-glow)),
    0 0 clamp(30px, 2vw, 30px) var(--accent-purple, var(--aura-purple)),
    0 0 clamp(40px, 3vw, 40px) var(--accent-pink, var(--aura-glow));
  transform: scale(1.1);
}

.avatar-container {
  position: relative;
  margin: 0 auto clamp(0.75rem, 2vw, 1.25rem) auto;
  width: clamp(100px, 12vw, 140px);
  height: clamp(100px, 12vw, 140px);
  border-radius: 50%;
  overflow: hidden;
  border: clamp(3px, 0.7vw, 5px) solid var(--avatar-border-color, var(--aura-purple));
  box-shadow:
    0 0 clamp(20px, 1.5vw, 30px) var(--accent-pink, var(--aura-glow)),
    0 0 clamp(30px, 2vw, 40px) var(--accent-purple, var(--aura-purple)) inset;
  transition: transform 0.3s ease;
  filter: var(--avatar-filter, none);
}

.avatar-container img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(0 0 clamp(10px, 1vw, 10px) var(--accent-pink, var(--aura-glow)));
}

/* User Info */
.user-info p {
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  margin: clamp(6px, 1vw, 8px) 0;
  color: var(--accent-pink, var(--aura-glow));
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.user-info p strong {
  color: var(--accent-pink, var(--aura-glow));
  text-shadow:
    0 0 3px #ff6f9c,
    0 0 5px #ff6f9c;
}

/* Quick Actions */
.card-content button {
  background: linear-gradient(
    135deg,
    var(--accent-purple, var(--aura-purple)),
    var(--accent-pink, var(--aura-glow))
  );
  color: var(--card-foreground);
  border-radius: var(--radius-lg, 16px);
  padding: clamp(0.8em, 1.8vw, 1em) clamp(0.8rem, 2vw, 1.2rem);
  font-weight: 700;
  box-shadow:
    0 0 clamp(12px, 1vw, 12px) var(--accent-pink, var(--aura-glow)),
    0 0 clamp(16px, 1.5vw, 16px) var(--accent-purple, var(--aura-purple));
  transition:
    background 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
  cursor: pointer;
}

.card-content button:hover {
  background: linear-gradient(
    135deg,
    var(--hover-accent-green, #20c997),
    var(--accent-pink, var(--aura-glow))
  );
  transform: scale(1.1);
  box-shadow:
    0 0 clamp(25px, 2vw, 25px) var(--hover-accent-green, #20c997),
    0 0 clamp(30px, 2.5vw, 30px) var(--accent-pink, var(--aura-glow));
}

.card-header {
  font-size: clamp(1.1rem, 1.8vw, 1.2rem);
  font-weight: 600;
  color: var(--accent-pink, var(--aura-glow));
  text-shadow:
    0 0 3px var(--accent-pink, var(--aura-glow)),
    0 0 5px var(--accent-purple, var(--aura-purple));
}

.card-content .flex {
  font-size: clamp(0.95rem, 1.6vw, 1rem);
  color: var(--text, var(--foreground));
}

.card-content .font-bold {
  font-size: clamp(1.1rem, 1.8vw, 1.2rem);
  color: var(--success, #1db954);
  text-shadow:
    0 0 2px var(--accent-purple, #8b5cf6),
    0 0 3px var(--accent-pink, #ec4899);
}

.earnings-entry {
  padding: clamp(8px, 1.5vw, 10px) 0;
  display: flex;
  justify-content: space-between;
  font-size: clamp(1rem, 1.7vw, 1.1rem);
  align-items: center;
  border-bottom: 1px solid var(--border-alpha, rgba(255, 255, 255, 0.3));
}

.earnings-entry:last-child {
  border-bottom: none;
}

.earnings-entry span.icon {
  margin-right: clamp(6px, 1vw, 10px);
  color: var(--accent-pink, #ec4899);
}

.flex > div {
  border-radius: 15px;
  box-shadow:
    0 0 clamp(10px, 1vw, 10px) var(--accent-pink, #ec4899),
    inset 0 0 clamp(8px, 1vw, 8px) var(--accent-purple, #8b5cf6);
  text-align: center;
  transition: background 0.3s ease;
}

.text-primary {
  color: var(--accent-pink, #ec4899) !important;
  filter: drop-shadow(0 0 clamp(5px, 1vw, 5px) var(--accent-pink, #ec4899));
}

.recent-content-title {
  font-size: clamp(1.4rem, 2.2vw, 1.6rem);
  font-weight: 700;
  color: var(--text-light, #fff);
  text-shadow:
    0 0 5px var(--accent-pink, #ec4899),
    0 0 10px var(--accent-purple, #8b5cf6),
    0 0 15px var(--accent-pink, #ec4899);
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.recent-content-item {
  margin-bottom: clamp(1.2rem, 2vw, 1.6rem);
  background: var(--recent-content-bg, rgba(55, 0, 179, 0.3));
  border-radius: 20px;
  box-shadow:
    0 0 clamp(25px, 2vw, 25px) var(--accent-purple, #8b5cf6),
    inset 0 0 clamp(15px, 1.5vw, 15px) var(--accent-pink, #ec4899);
  overflow: hidden;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.recent-content-item:hover {
  box-shadow:
    0 0 clamp(40px, 3vw, 40px) var(--hover-accent-green, #20c997),
    inset 0 0 clamp(30px, 2vw, 30px) var(--accent-pink, #ec4899);
  transform: scale(1.03);
}

.recent-content-item img,
.recent-content-item iframe {
  border-bottom: 1px solid var(--border-alpha, rgba(255, 255, 255, 0.2));
  border-radius: 20px 20px 0 0;
}

.recent-content-text {
  padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1rem, 2vw, 1.5rem);
  color: var(--text-light, #eee);
  font-size: clamp(0.9rem, 1.4vw, 0.95rem);
  letter-spacing: 0.02em;
  line-height: 1.4;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.recent-content-title-inner {
  color: var(--accent-pink, #ff79c6);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  text-shadow:
    0 0 clamp(8px, 1vw, 8px) var(--accent-pink, #ff79c6),
    0 0 clamp(15px, 2vw, 15px) var(--accent-pink, #ec4899);
  margin-bottom: clamp(0.1rem, 0.3vw, 0.2rem);
}

.recent-content-subtitle {
  font-style: italic;
  color: var(--accent-purple, #a78bfa);
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  margin-bottom: clamp(0.4rem, 1vw, 0.6rem);
  text-shadow: 0 0 clamp(5px, 1vw, 5px) var(--accent-purple, #a78bfa);
}

.recent-content-stats {
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  color: var(--muted-foreground, #bbb);
  margin-top: clamp(0.3rem, 0.8vw, 0.5rem);
  display: flex;
  gap: clamp(0.8rem, 1.5vw, 1rem);
  justify-content: flex-start;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.recent-content-stats span {
  display: flex;
  align-items: center;
  gap: clamp(0.2rem, 0.5vw, 0.3rem);
  color: var(--accent-pink, #ec4899);
  text-shadow: 0 0 clamp(5px, 1vw, 5px) var(--accent-pink, #ec4899);
  font-weight: 600;
}

.recent-content-stats svg {
  stroke: var(--accent-pink, #ec4899);
  filter: drop-shadow(0 0 clamp(2px, 0.5vw, 2px) var(--accent-pink, #ec4899));
  width: clamp(12px, 1.3vw, 16px);
  height: clamp(12px, 1.3vw, 16px);
}

@media (min-width: 768px) {
  .dashboard-root {
    flex-direction: row;
  }
  .dashboard-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .card-content .flex {
    font-size: 1.1rem;
  }
}

.responsive-video-square {
  position: relative;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
  border-radius: 0.75rem;
}

.responsive-video-square iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0.75rem;
}
/**
 * Auth.css
 * ---------------------------------------------------------------
 * Description:
 * This CSS file contains the styling for the login and registration page. 
 * It provides basic styles for the page layout, form elements, and buttons. 
 * The focus is on creating a clean, simple, and user-friendly design for 
 * new users to register on the platform. The page elements are designed 
 * for clarity and ease of interaction.
 * ---------------------------------------------------------------
 * Features:
 * - Styling for form elements including input fields and labels
 * - Button styling with margin adjustments
 * - Focused on a simple, functional registration layout
 * ---------------------------------------------------------------
 * @author CastleLabs InternAItional
 * @company AuraHyprs · CastleLabs InternAItional
 * @contact support@aurahyprs.com
 * @copyright (c) 2025 AuraHyprs
 * @license MIT
 * @created 2025-03-13
 * @updated 2025-08-11
 * @version 0.4.6
 * ---------------------------------------------------------------
 */

/* Global box-sizing reset to include padding and border in element's total width and height */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Hide footer on login and register pages */
.login-container ~ footer,
.login-container footer,
.auth-card ~ footer {
  display: none !important;
}

/* Main login container */
.login-container {
  position: relative;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100vw;
  overflow-y: auto;
  padding: clamp(0.75rem, 2vw, 1rem) clamp(0.75rem, 2vw, 1rem)
    calc(env(safe-area-inset-bottom, 1rem));
  background-color: var(--bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text);
}

/* Dark overlay */
.login-background-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(14, 17, 38, 0.85);
  z-index: -1;
}

/* Logo */
.login-logo {
  max-width: clamp(140px, 10vw, 280px);
  width: 100%;
  height: auto;
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

/* Title */
.login-title {
  margin-bottom: clamp(0.75rem, 2vw, 1rem);
  font-size: clamp(1.4rem, 4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--primary);
  text-shadow: 0 2px 6px rgba(115, 35, 244, 0.6);
}

/* Card container */
.auth-card {
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: clamp(320px, 30vw, 600px);
  width: 100%;
  box-shadow: 0 8px 24px rgba(115, 35, 244, 0.4);
  color: var(--card-foreground);
  z-index: 10;
}

/* Inputs */
.auth-card input,
.auth-card .form-control,
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
  width: 100%;
  border-radius: var(--radius);
  padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.75rem, 2vw, 1.25rem);
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  border: 1.5px solid var(--border);
  background-color: var(--input);
  color: var(--card-foreground);
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease;
  box-sizing: border-box;
  margin-bottom: clamp(0.75rem, 2vw, 1rem);
}

/* Input focus */
.auth-card input:focus,
.auth-card .form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 10px var(--primary);
  background-color: var(--background);
  color: var(--text);
}

/* Buttons */
.auth-card button,
.auth-card .btn {
  width: 100%;
  font-size: clamp(1rem, 2vw, 1.75rem);
  border-radius: 2rem;
  background-color: var(--primary);
  color: var(--primary-foreground);
  border: none;
  padding: clamp(0.5rem, 1.5vw, 1rem) clamp(1rem, 3vw, 2rem);
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 6px 18px rgba(167, 139, 250, 0.6);
  font-weight: 700;
}

/* Button hover/focus */
.auth-card button:hover,
.auth-card .btn:hover,
.auth-card button:focus,
.auth-card .btn:focus {
  background-color: var(--accent);
  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.9);
  outline: none;
}

/* Progress bar */
.auth-card .progress {
  height: clamp(6px, 1vw, 10px);
  border-radius: 10px;
  margin-top: -clamp(0.5rem, 1.5vw, 0.75rem);
  margin-bottom: clamp(0.75rem, 2vw, 1rem);
  background-color: var(--muted);
}

/* Alerts */
.auth-card .alert {
  margin-bottom: clamp(0.75rem, 2vw, 1rem);
  border-radius: var(--radius);
  font-size: clamp(0.75rem, 1.5vw, 0.9rem);
  color: var(--destructive-foreground);
  background-color: var(--destructive);
}

/* Checkbox label */
.auth-card .form-check-label {
  font-size: clamp(0.75rem, 1.5vw, 0.9rem);
  color: var(--accent-foreground);
}

/* Input placeholder */
.auth-card input::-moz-placeholder {
  color: var(--muted-foreground);
  opacity: 1;
}
.auth-card input::placeholder {
  color: var(--muted-foreground);
  opacity: 1;
}

/* Responsive Adjustments */

/* Small devices from 420px up to 639px */
@media (max-width: 639px) {
  .login-logo {
    max-width: 140px; /* Smaller logo */
  }
  .login-title {
    font-size: 1.4rem; /* Smaller title font */
  }
  .auth-card {
    padding: 1.5rem; /* Smaller padding */
    max-width: 320px; /* Smaller card width */
  }
  .auth-card button {
    font-size: 1rem; /* Smaller button text */
    padding: 0.65rem 1.25rem; /* Smaller padding */
  }
}

/* Medium devices 640px to 1023px */
@media (min-width: 640px) and (max-width: 1023px) {
  .login-logo {
    max-width: 160px; /* Medium logo size */
  }
  .login-title {
    font-size: 1.6rem; /* Medium title font */
  }
  .auth-card {
    max-width: 420px; /* Medium card width */
    padding: 1.75rem; /* Medium padding */
  }
  .auth-card button {
    font-size: 1.1rem; /* Medium button font */
  }
}

/* Tablets and small desktops 1024px to 1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
  .login-logo {
    max-width: 180px; /* Larger logo */
  }
  .login-title {
    font-size: 1.75rem; /* Larger title font */
  }
  .auth-card {
    max-width: 500px; /* Larger card width */
    padding: 2rem; /* Larger padding */
  }
  .auth-card button {
    font-size: 1.25rem; /* Larger button font */
  }
}

/* Large desktops / 4K and above (1920px and up) */
@media (min-width: 1920px) {
  .login-logo {
    max-width: 280px; /* Extra large logo */
  }
  .login-title {
    font-size: 2.5rem; /* Extra large title font */
  }
  .auth-card {
    max-width: 600px; /* Extra large card width */
    padding: 3rem; /* Extra padding */
  }
  .auth-card button {
    font-size: 1.75rem; /* Extra large button font */
    padding: 1rem 2rem; /* Extra padding */
  }
}
/* General Styles */
html,
body {
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  color: var(--foreground);
  background-color: var(--background);
}

/* Checkout Form */
.checkout-form {
  width: 100%;
  max-width: clamp(320px, 20vw + 200px, 500px);
  margin: clamp(1rem, 2vw + 0.5rem, 3rem) auto;
  padding: clamp(1rem, 2vw + 0.5rem, 2rem);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  background: var(--glass-bg);
  border-radius: clamp(10px, 1vw, 20px);
  box-shadow: 0 10px 50px var(--glass-shadow);
  backdrop-filter: blur(15px);
  border: 2px solid var(--glass-border);
}

/* Card input container */
.card-element-container {
  position: relative;
  width: 100%;
  margin-bottom: clamp(12px, 1vw + 5px, 20px);
  background: var(--card-bg);
  border-radius: clamp(8px, 1vw, 15px);
  padding: clamp(10px, 1vw + 5px, 15px);
}

/* Card input field */
.card-element-container input {
  background-color: var(--input);
  color: var(--foreground);
  border: 2px solid var(--border);
  border-radius: clamp(8px, 1vw, 15px);
  padding: clamp(8px, 0.8vw + 2px, 12px);
  width: 100%;
  transition: all 0.3s ease;
  font-size: clamp(0.9rem, 0.8vw + 0.5rem, 1.1rem);
}

/* Focus state for card input */
.card-element-container input:focus {
  border-color: var(--ring);
  box-shadow: 0 0 8px var(--ring);
}

/* Placeholder text style */
.card-element-container input::-moz-placeholder {
  color: var(--muted-foreground);
}
.card-element-container input::placeholder {
  color: var(--muted-foreground);
}

/* Error Message */
.error-message {
  color: var(--destructive);
  font-size: clamp(0.9rem, 0.7vw + 0.5rem, 1rem);
  text-align: center;
  margin-top: clamp(8px, 1vw, 10px);
}

/* Success Message */
.success-message {
  color: var(--primary);
  font-size: clamp(0.9rem, 0.7vw + 0.5rem, 1rem);
  text-align: center;
  margin-top: clamp(8px, 1vw, 10px);
}

/* Hover Effects for Elements */
.card-element-container input:hover {
  border-color: var(--primary);
  box-shadow: 0 0 6px var(--primary);
}

/* Glowing Neon Text Effect */
.glowing-text {
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2.5rem);
  text-align: center;
  color: var(--foreground);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: clamp(2px, 1vw, 4px);
  animation: glow 1.5s infinite alternate;
}

/* Dynamic Glow Animation */
@keyframes glow {
  0% {
    text-shadow:
      0 0 10px var(--aura-glow-color-1),
      0 0 20px var(--aura-glow-color-1),
      0 0 30px var(--aura-glow-color-1),
      0 0 40px var(--aura-glow-color-1);
  }
  100% {
    text-shadow:
      0 0 10px var(--aura-glow-color-2),
      0 0 20px var(--aura-glow-color-2),
      0 0 30px var(--aura-glow-color-2),
      0 0 40px var(--aura-glow-color-2);
  }
}

/* Neon Button */
.neon-button {
  padding: clamp(10px, 1vw + 4px, 16px) clamp(16px, 2vw + 8px, 28px);
  font-size: clamp(0.9rem, 0.8vw + 0.3rem, 1.2rem);
  font-weight: 700;
  border-radius: clamp(8px, 1vw, 14px);
  cursor: pointer;
  color: var(--foreground);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow:
    0 0 8px var(--primary),
    0 0 16px var(--accent);
  transition:
    box-shadow 0.3s ease,
    transform 0.2s ease;
}

.neon-button:hover:not(:disabled) {
  box-shadow:
    0 0 14px var(--primary),
    0 0 28px var(--accent);
  transform: scale(1.05);
}

.neon-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Responsive Anpassungen */
@media (max-width: 420px) {
  .checkout-form {
    padding: clamp(8px, 2vw, 12px);
    margin: clamp(0.5rem, 1vw, 1.5rem) auto;
  }
}

@media (min-width: 2560px) {
  .checkout-form {
    max-width: 700px;
    padding: 3rem;
  }
}
/* Main container */
.creator-profile-container {
  max-width: clamp(320px, 30vw, 960px);
  margin: clamp(1rem, 4vw, 2rem) auto;
  padding: clamp(0.75rem, 3vw, 1rem);
  background: var(--background);
  color: var(--foreground);
  border-radius: clamp(0.5rem, 1vw, var(--radius));
  box-shadow: 0 4px 12px var(--glass-shadow);
  backdrop-filter: var(--background) blur(10px);
  transition:
    background 0.3s,
    color 0.3s,
    box-shadow 0.3s;
}

/* Header: Avatar & Details */
.creator-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.5rem);
  padding-bottom: clamp(1rem, 3vw, 1.5rem);
  border-bottom: 1px solid var(--border);
}

/* Avatar */
.creator-avatar {
  flex: 0 0 auto;
  width: clamp(80px, 8vw, 120px);
  height: clamp(80px, 8vw, 120px);
  border-radius: 50%;
  border: 2px solid var(--avatar-border-color);
  filter: var(--avatar-filter);
  box-shadow: 0 0 8px var(--avatar-glow-color);
  -o-object-fit: cover;
     object-fit: cover;
  transition: filter 0.3s;
}

/* Details */
.creator-details {
  flex: 1;
  min-width: clamp(160px, 20vw, 200px);
}

/* Name */
.creator-name {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: clamp(0.15rem, 0.5vw, 0.25rem);
}

/* Handle */
.creator-handle {
  font-size: clamp(0.85rem, 2vw, 1rem);
  color: var(--muted-foreground);
  margin-bottom: clamp(0.75rem, 3vw, 1rem);
}

/* Bio */
.creator-bio {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.5;
  color: var(--card-foreground);
}

/* Social Links */
.creator-social {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 2vw, 1rem);
  margin-top: clamp(0.75rem, 3vw, 1rem);
}

.creator-social a {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.25rem, 1vw, 0.5rem);
  padding: clamp(0.25rem, 1vw, 0.4rem) clamp(0.5rem, 2vw, 0.8rem);
  background: var(--secondary);
  color: var(--secondary-foreground);
  border: 1px solid var(--border);
  border-radius: clamp(0.25rem, 1vw, var(--radius));
  font-weight: 600;
  transition:
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}

.creator-social a:hover,
.creator-social a:focus {
  background: var(--primary);
  color: var(--primary-foreground);
  outline: none;
  box-shadow: 0 0 8px var(--primary);
}

/* AuraHyprs Buttons */
.aura-btn {
  font-weight: 600;
  margin: 0 clamp(0.25rem, 1vw, 5px);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.2s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: clamp(0.25rem, 1vw, var(--radius));
  border: none;
  padding: clamp(0.4rem, 1.5vw, 0.6rem) clamp(0.8rem, 3vw, 1.2rem);
  cursor: pointer;
  box-shadow: 0 0 6px var(--primary);
}

.aura-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 12px var(--aura-glow);
}

.aura-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* CreatorWorld Section */
.creator-world {
  border-top: 2px solid var(--primary);
  padding-top: clamp(0.5rem, 2vw, 1rem);
}

.creator-world-description {
  font-style: italic;
  margin-bottom: clamp(0.75rem, 3vw, 1rem);
  color: var(--secondary-text);
}

/* Aura Cards */
.aura-card {
  flex: 0 0 clamp(160px, 15vw, 220px);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: 0 2px 6px var(--aura-glow);
  border-radius: clamp(0.5rem, 1vw, 0.75rem);
  overflow: hidden;
  background: var(--background);
  color: var(--foreground);
}

.aura-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  -o-object-fit: cover;
     object-fit: cover;
}

.aura-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Rarity tags */
.aura-card .rarity-tag {
  margin-top: auto;
}

.aura-card-exclusive {
  border: 2px solid gold;
}

.aura-card-rare {
  border: 2px solid var(--primary);
}

.aura-card-common {
  border: 2px solid var(--muted);
}

.creator-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1rem, 3vw, 6rem) clamp(1rem, 3vw, 6rem) clamp(4rem, 6vw, 12rem);
  font-family: var(--font-family);
  background: linear-gradient(to bottom, var(--background), var(--input));
  color: var(--foreground);
  position: relative;
  min-height: 100vh;
}

/* Meta Icon */
.meta-icon {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--aura-neon);
  margin-bottom: clamp(0.15rem, 0.5vw, 0.3rem);
}

/* Profile Meta Grid */
.profile-meta {
  margin-top: clamp(1rem, 3vw, 1.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 10vw, 160px), 1fr));
  gap: clamp(0.5rem, 2vw, 1rem);
  text-align: center;
}

/* Profile Meta Item */
.profile-meta-item {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--aura-border);
  border-radius: clamp(0.5rem, 1vw, 1rem);
  padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 3vw, 1.2rem);
  box-shadow: 0 0 12px var(--aura-glow-color-1);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  animation: fadeInUp 0.8s ease-out;
}

.profile-meta-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 16px var(--aura-glow-color-2);
}

.profile-meta-label {
  font-size: clamp(0.65rem, 1.5vw, 0.85rem);
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: clamp(0.25rem, 0.5vw, 0.4rem);
}

.profile-meta-value {
  font-size: clamp(0.75rem, 1.5vw, 0.9rem);
  font-weight: 700;
  background: linear-gradient(90deg, var(--aura-neon), var(--aura-glow-color-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  word-break: break-word;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.4;
}

/* Aura Status */
.aura-status {
  margin-top: clamp(0.25rem, 1vw, 0.5rem);
  font-size: clamp(0.85rem, 1.5vw, 1.05rem);
  font-style: italic;
  font-weight: 500;
  color: var(--aura-glow-color-3);
  text-align: center;
  background: var(--glass-bg);
  padding: clamp(0.4rem, 1.5vw, 0.6rem) clamp(0.6rem, 2vw, 1rem);
  border-radius: clamp(0.5rem, 1vw, 1rem);
  border: 1px solid rgba(255, 0, 204, 0.3);
  box-shadow: 0 0 8px rgba(255, 0, 204, 0.15);
  animation: auraPulse 4s infinite ease-in-out;
}

/* Hero Banner */
.hero-section {
  position: relative;
  width: 100%;
  max-height: clamp(250px, 20vw, 369px);
  overflow: visible;
}

.banner-img {
  width: 100%;
  min-height: clamp(180px, 15vw, 300px);
  -o-object-fit: cover;
     object-fit: cover;
  filter: brightness(0.4) blur(1px);
  border: 4px solid var(--aura-neon);
  border-bottom: 2px solid var(--aura-border);
  border-radius: clamp(1rem, 2vw, 1.5rem);
  transition: filter 0.3s ease;
}

/* Hero profile wrapper */
.hero-profile-wrapper {
  position: absolute;
  bottom: clamp(160px, 18vw, 260px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  transition:
    left 0.3s ease,
    transform 0.3s ease;
}

@media (min-width: 768px) {
  .hero-profile-wrapper {
    left: clamp(60px, 8vw, 100px);
    transform: none;
  }
}

/* Profile Image */
.profile-img {
  width: clamp(120px, 12vw, 160px);
  height: clamp(120px, 12vw, 160px);
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 4px solid var(--aura-neon);
  box-shadow:
    0 0 clamp(10px, 1vw, 15px) var(--aura-glow-color-1),
    0 0 clamp(15px, 1.5vw, 25px) var(--aura-glow-color-2),
    0 0 clamp(20px, 2vw, 40px) var(--aura-glow-color-3);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  background-color: var(--input);
  will-change: transform;
}

.profile-img:hover,
.profile-img:focus-visible {
  transform: scale(1.08);
  outline: none;
}

/* Glass Effect Container */
.profile-container {
  backdrop-filter: blur(15px);
  background: var(--aura-glass);
  border: 1px solid var(--aura-border);
  box-shadow: var(--aura-shadow);
  border-radius: clamp(1rem, 1.5vw, 1.5rem);
  padding: clamp(1rem, 3vw, 2rem);
  width: 100%;
  max-width: clamp(320px, 65vw, 760px);
  animation: fadeInUp 0.6s ease-out;
  position: relative;
  z-index: 5;
}

/* Creator Info */
.creator-info {
  text-align: center;
  padding: clamp(0.5rem, 1.5vw, 1rem) 0;
  position: relative;
}

.creator-info h1 {
  position: relative;
  display: inline-block;
  padding: clamp(0.25rem, 0.5vw, 0.4rem) clamp(0.8rem, 2vw, 1.4rem);
  font-size: clamp(1.6rem, 1.5vw + 1rem, 2.8rem);
  font-weight: 800;
  z-index: 1;
  background: linear-gradient(90deg, var(--aura-neon), var(--aura-glow-color-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--foreground);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  animation: auraPulse 3s ease-in-out infinite;
}

.creator-info h1::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  color: var(--background);
  backdrop-filter: blur(8px);
  border-radius: clamp(1rem, 1.5vw, 1.2rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

/* Bio */
.creator-info .bio {
  font-style: italic;
  color: var(--muted-foreground);
  margin-top: clamp(0.5rem, 1.5vw, 0.75rem);
  font-size: clamp(1rem, 1vw + 0.75rem, 1.1rem);
  line-height: 1.4;
}

/* Social Links Container */
.social-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 2vw, 0.875rem);
  margin-top: clamp(1rem, 3vw, 1.2rem);
}

/* Social Link */
.link {
  color: var(--aura-glow-color-3);
  font-weight: 600;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    color 0.3s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.link:hover,
.link:focus-visible {
  transform: scale(1.1);
  color: var(--foreground);
  outline: none;
}

/* Visitor Counter */
.visitor-count {
  margin-top: clamp(1rem, 3vw, 1.5rem);
  font-weight: bold;
  background-color: rgba(255, 0, 204, 0.08);
  padding: clamp(0.5rem, 2vw, 0.75rem) clamp(1rem, 3vw, 1.25rem);
  border-radius: clamp(0.5rem, 1vw, 1rem);
  border: 1px solid rgba(255, 0, 204, 0.3);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Content Counters */
.content-counters {
  margin-top: clamp(1rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(100px, 15vw, 140px), 1fr));
  gap: clamp(0.5rem, 2vw, 1rem);
}

.content-counters p {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  padding: clamp(0.75rem, 2vw, 1rem);
  border-radius: clamp(0.5rem, 1vw, 1rem);
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  text-align: center;
  box-shadow: var(--glass-shadow);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Promo Video Card */
.promo-video-card {
  margin-top: clamp(1rem, 3vw, 2rem);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: clamp(1rem, 1.5vw, 1.5rem);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}

/* Responsive Video Wrapper */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  border-radius: clamp(0.5rem, 1vw, 1rem);
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Buttons */
button,
.save-btn {
  margin-top: clamp(1rem, 3vw, 2rem);
  padding: clamp(0.75rem, 2vw, 1rem) clamp(1.25rem, 3vw, 1.5rem);
  border: none;
  border-radius: 2rem;
  background: linear-gradient(to right, var(--aura-purple), var(--aura-glow-color-2));
  color: var(--foreground);
  font-weight: 600;
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

button:hover,
.save-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(to right, var(--aura-glow-color-2), var(--aura-purple));
  outline: none;
}

/* Loading Spinner */
.loading-spinner {
  color: var(--aura-glow);
  text-align: center;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}

/* API Fallback Text */
.fallback-text {
  margin-top: clamp(0.5rem, 2vw, 1rem);
  color: var(--muted-foreground);
  font-style: italic;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Gallery */
.aura-gallery {
  margin-top: clamp(1rem, 3vw, 2.5rem);
}

.aura-gallery h3 {
  font-weight: 600;
  margin-bottom: clamp(0.75rem, 2vw, 1rem);
}

.aura-gallery .gallery-slider {
  padding: clamp(0.75rem, 2vw, 1rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(100px, 14vw, 140px), 1fr));
  gap: clamp(0.5rem, 1.5vw, 0.75rem);
}

.aura-gallery .gallery-item {
  width: 100%;
  overflow: hidden;
  border-radius: clamp(0.5rem, 1vw, 0.75rem);
  background: var(--card);
  box-shadow: var(--glass-shadow);
}

.aura-gallery .gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
}

.aura-gallery .gallery-item img:hover,
.aura-gallery .gallery-item img:focus-visible {
  transform: scale(1.05);
  outline: none;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes auraPulse {
  0%,
  100% {
    text-shadow:
      0 0 5px var(--aura-neon),
      0 0 10px var(--aura-glow),
      0 0 3px var(--aura-glow);
  }
  50% {
    text-shadow:
      0 0 8px var(--aura-neon),
      0 0 15px var(--aura-glow),
      0 0 2px var(--aura-glow);
  }
}

/* Mobile Fix (<= 540px) */
@media screen and (max-width: 540px) {
  .profile-img {
    width: 80px !important;
    height: 80px !important;
    border-width: 2px !important;
    box-shadow:
      0 0 6px var(--aura-glow),
      0 0 12px var(--aura-glow),
      0 0 20px rgba(255, 0, 204, 0.3) !important;
  }

  .hero-profile-wrapper {
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding-bottom: 169px;
    padding-right: 239px;
  }

  .profile-container {
    margin-top: 5px;
    padding: 1rem !important;
  }

  .creator-info h1 {
    font-size: 1.6rem !important;
    padding: 0.3rem 1rem !important;
  }
  .creator-info h1::before {
    inset: -4px !important;
    border-radius: 1rem !important;
  }
}

/* Mobile small devices (375px - 479px) */
@media (max-width: 479px) {
  .hero-profile-wrapper {
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
  }

  .profile-img {
    width: 60px;
    height: 60px;
    border: 3px solid var(--aura-neon);
    box-shadow:
      0 0 8px var(--aura-glow),
      0 0 15px var(--aura-glow),
      0 0 20px rgba(255, 0, 204, 0.5);
  }

  .profile-container {
    margin-top: 5px;
    padding: 1rem;
  }

  .creator-info h1 {
    font-size: 1.4rem;
    line-height: 1.2;
    margin: 0 auto;
    text-shadow:
      0 0 3px rgba(0, 0, 0, 0.6),
      0 0 6px rgba(0, 0, 0, 0.3);
  }

  .creator-info h1::before {
    width: 100%;
    height: 120%;
  }
}

/* Tablets small (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
  .hero-profile-wrapper {
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
  }

  .profile-img {
    width: 100px;
    height: 100px;
  }

  .profile-container {
    margin-top: 5px;
    padding: 1.25rem;
  }

  .creator-info h1 {
    font-size: 1.8rem;
  }
}

/* Tablets & small laptops (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-profile-wrapper {
    bottom: 120px;
    left: 80px;
    transform: none;
  }

  .profile-img {
    width: 120px;
    height: 120px;
  }

  .profile-container {
    margin-top: 5px;
    padding: 1.75rem;
  }

  .creator-info h1 {
    font-size: 2.1rem;
  }
}

/* Standard desktops (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
  .hero-profile-wrapper {
    bottom: 140px;
    left: 100px;
  }

  .profile-img {
    width: 140px;
    height: 140px;
  }

  .profile-container {
    margin-top: 10px;
    padding: 2rem;
  }

  .creator-info h1 {
    font-size: 2.3rem;
  }
}

/* Large screens (1440px - 1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
  .hero-profile-wrapper {
    bottom: 160px;
    left: 120px;
  }

  .profile-img {
    width: 160px;
    height: 160px;
  }

  .profile-container {
    margin-top: 15px;
  }

  .creator-info h1 {
    font-size: 2.6rem;
  }
}

/* Ultra-HD 4K+ (1920px and up) */
@media (min-width: 1920px) {
  .hero-profile-wrapper {
    bottom: 180px;
    left: 140px;
  }

  .profile-img {
    width: 180px;
    height: 180px;
  }

  .profile-container {
    margin-top: 20px;
  }

  .creator-info h1 {
    font-size: 2.8rem;
  }
}
.creator-settings {
  margin: clamp(1rem, 3vw, 2rem) auto;
  background: var(--card-bg);
  padding: clamp(1rem, 2vw, 2rem) clamp(1rem, 2.5vw, 2.5rem);
  border-radius: var(--radius);
  color: var(--card-foreground);
  font-family: var(--font-family);
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

h3,
h4 {
  font-weight: 600;
  color: var(--accent-purple);
  border-bottom: 2px solid var(--accent-purple-dark);
  padding-bottom: clamp(0.15rem, 0.3vw, 0.3rem);
  margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.links-section {
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(80px, 20vw, 100px), 1fr));
  gap: clamp(0.5rem, 1vw, 1rem);
}

.gallery-item {
  position: relative;
  border-radius: clamp(8px, 1vw, 12px);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease;
  box-shadow: 0 0 clamp(6px, 0.5vw, 6px) rgba(var(--aura-purple-rgb), 0.5);
  background: var(--card-bg-alt);
}

.gallery-item:hover {
  transform: scale(1.05);
  box-shadow: 0 0 clamp(12px, 1vw, 12px) var(--accent-purple);
}

.gallery-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn-remove {
  position: absolute;
  top: clamp(3px, 1vw, 5px);
  right: clamp(3px, 1vw, 5px);
  background: var(--destructive);
  border: none;
  color: var(--destructive-foreground);
  font-weight: bold;
  width: clamp(18px, 1.5vw, 26px);
  height: clamp(18px, 1.5vw, 26px);
  border-radius: 50%;
  line-height: clamp(14px, 1vw, 20px);
  text-align: center;
  padding: 0;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 20;
}

.btn-remove:hover {
  opacity: 1;
}

.gallery-upload-label {
  width: clamp(80px, 18vw, 100px);
  height: clamp(80px, 18vw, 100px);
  border: 2px dashed var(--accent-purple);
  border-radius: clamp(8px, 1vw, 12px);
  color: var(--accent-purple);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease;
}

.gallery-upload-label:hover {
  background-color: var(--accent-purple-light-alpha);
}

.gallery-upload-input {
  display: none;
}

.preview-img {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 0 clamp(10px, 1vw, 15px) rgba(var(--aura-purple-rgb), 0.4);
}

textarea.font-monospace {
  font-family: var(--font-family);
  background-color: var(--card-bg-alt);
  color: var(--muted-foreground);
  border: 1px solid var(--accent-purple);
  border-radius: 0.5rem;
  padding: clamp(0.5rem, 1.5vw, 1rem);
  resize: vertical;
  min-height: clamp(120px, 15vw, 160px);
  overflow-y: auto;
  font-size: clamp(0.9rem, 1.5vw, 1rem);
}

textarea.font-monospace:focus {
  outline: none;
  border-color: var(--accent-purple-light);
  box-shadow: 0 0 clamp(8px, 1vw, 8px) var(--accent-purple-light);
}
/**
 * @file /opt/aurahyprs-dev/frontend/src/pages/Discover.css
 * @module DiscoverPageStyles
 * ---------------------------------------------------------------
 * @description
 * Mobile-first CSS styles for the Discover page card layout on AuraHyprs.
 * This stylesheet defines the visual appearance and responsive behavior of 
 * container layouts, interactive content cards, headers, body sections, media,
 * buttons, and badges – all optimized for screens starting at 420px and up.
 *
 * @notes
 * - Container: Defines maximum width and centering behavior.
 * - Card: Encapsulates card appearance, hover/touch interactions.
 * - Header: Displays creator/user information inside cards.
 * - Body: Contains media, text, and content details.
 * - Media: Image and video handling with cropping and fitting.
 * - Buttons: Reusable button styles for actions like visit, comment, etc.
 * - Badges: Tag-like elements for categorization or counters.
 * - Mobile Responsiveness: Tailored styles for <420px viewport widths.
 * - Fully responsive and optimized for touch and hover interactions via media queries.
 *
 * ---------------------------------------------------------------
 * @author CastleLabs InternAItional
 * @company AuraHyprs · CastleLabs InternAItional
 * @contact support@aurahyprs.com
 * @copyright (c) 2025 AuraHyprs
 * @license MIT
 * @created 2025-03-13
 * @updated 2025-08-12
 * ---------------------------------------------------------------
 */

/* === Base Layout === */
html {
  box-sizing: border-box;
  font-size: clamp(14px, 1.5vw, 18px);
}

body {
  background-color: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  font-family: system-ui, sans-serif;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* === Container === */
.container {
  width: 100% !important;
  max-width: 1440px !important;
  margin-inline: auto !important;
  padding: clamp(1rem, 5vw, 5rem) !important;
  box-sizing: border-box !important;
}

/* === Cards === */
.card {
  margin-block: clamp(1rem, 3vw, 2rem);
  padding: clamp(1rem, 2vw, 2rem);
  background: var(--card-bg);
  color: var(--card-fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px var(--glass-shadow);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.card:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 16px var(--glass-shadow);
}

.card-header {
  background-color: var(--card-bg);
  padding: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  align-items: flex-start;
  gap: clamp(0.75rem, 2vw, 1rem);
  border-radius: 1rem;
}

/* Profile picture */
.card-header .profile-pic {
  width: clamp(40px, 4vw, 80px);
  height: clamp(40px, 4vw, 80px);
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 2px solid var(--avatar-border-color);
  box-shadow:
    0 0 8px var(--aura-glow-color-1),
    0 0 15px var(--aura-glow-color-2);
  transition: box-shadow 0.3s ease;
}

.card-header .profile-pic:hover {
  box-shadow:
    0 0 16px var(--primary),
    0 0 24px var(--secondary);
}

.card-header-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--fg);
}

/* Card Title (dynamic font size) */
.card-header-content h6,
.card-body .card-title {
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 600;
  margin: 0;
  color: var(--primary);
  font-weight: bold;
  margin-bottom: clamp(0.25rem, 0.5vw, 0.5rem);
}

.card-header-content .card-title {
  color: var(--primary);
  font-weight: bold;
  margin: 4px 0;
}

/* Card Text (dynamic font size) */
.card-header-content .card-text,
.card-body .card-text {
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  color: var(--fg);
  line-height: 1.4;
}

.card-body {
  flex: 1;
  padding: clamp(1rem, 2vw, 2rem);
  color: var(--fg);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Images / videos in card body */
.card-body .card-img,
.card-body video {
  width: 100%;
  max-height: clamp(180px, 20vw, 320px);
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
}

.card-body .card-img:hover {
  transform: scale(1.05);
}

.preview-overlay {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(10px);
  transition: filter 0.3s ease-in-out;
  z-index: 1;
}

.preview-overlay:hover {
  filter: blur(5px);
}

.preview-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--fg);
  z-index: 10;
  padding: 12px;
}

.comment-section {
  margin-top: 2rem;
  padding: 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.comment-item {
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: clamp(0.8rem, 2vw, 1rem);
  color: var(--fg);
}

.comment-item:last-child {
  border-bottom: none;
}

textarea,
.comment-textarea {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  padding: clamp(0.75rem, 1vw, 1rem);
  width: 100%;
  resize: none;
  margin-top: 10px;
}

textarea:focus {
  border-color: var(--accent);
  outline: none;
}

.text-muted {
  font-size: 0.9rem;
  color: var(--muted-foreground);
  margin-top: 8px;
}

button,
.btn {
  display: inline-block;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  border-radius: var(--radius);
  padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem);
  color: var(--primary-foreground) !important;
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  box-shadow:
    0 0 15px var(--shadow),
    0 0 25px var(--glass-shadow);
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
  margin-top: 10px;
  font-weight: 700;
  font-family: "NewsGothicBT-BoldCondensed", sans-serif;
}

button:hover,
.btn:hover {
  transform: scale(1.05);
  background: linear-gradient(45deg, var(--aura-purple), var(--aura-neon));
  box-shadow:
    0 0 30px var(--shadow),
    0 0 45px var(--glass-shadow);
}

button:active,
.btn:active {
  transform: scale(0.95);
  background: linear-gradient(45deg, var(--aura-purple), var(--primary));
  box-shadow:
    0 0 20px var(--aura-glow-color-1),
    0 0 40px var(--aura-glow-color-2);
}

.interaction-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.interaction-button {
  width: 100%;
  padding: clamp(0.5rem, 1vw, 1rem) 0;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  border-radius: var(--radius);
}

.visitor-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(var(--bg-rgb, 0, 0, 0), 0.6);
  border-radius: var(--radius);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.visitor-container:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 30px var(--primary),
    0 0 50px var(--secondary);
}

.visitor-badge,
.visitor-container .badge {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  font-weight: bold;
  border-radius: var(--radius);
  background: linear-gradient(45deg, var(--secondary), var(--primary));
  box-shadow: 0 0 15px var(--aura-shadow, var(--shadow, rgba(0, 0, 0, 0.3)));
  color: var(--primary-foreground);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.visitor-badge:hover {
  transform: translateY(-5px);
  box-shadow:
    0 0 30px var(--aura-glow-color-1, var(--primary)),
    0 0 50px var(--aura-glow-color-2, var(--secondary));
}

/* === Media Queries === */
@media (max-width: 768px) {
  .container {
    padding: clamp(2rem, 5vw, 6rem);
  }
  .card-title {
    font-size: 1.3rem;
  }
  .card-text {
    font-size: 1rem;
  }
  .visitor-badge {
    font-size: 1rem;
  }
}

@media (max-width: 420px) {
  .container {
    padding: 10px;
  }
  .visitor-container {
    padding: 0.75rem;
  }
  .visitor-badge {
    font-size: 0.9rem;
    padding: 10px 16px;
  }
  .interaction-button {
    padding: 10px 0;
  }
  textarea,
  .comment-textarea {
    font-size: 0.9rem;
    padding: 10px;
  }
  button,
  .btn {
    padding: 10px 16px;
  }
}

@media (min-width: 1024px) {
  .card {
    display: flex;
    flex-direction: column;
    padding: 2rem;
  }
  .card-header {
    padding: 1.5rem;
    gap: 1.25rem;
  }
  .card-body {
    padding: 1.5rem;
  }
}

@media (min-width: 1440px) {
  .card {
    max-width: 1200px;
    margin-inline: auto;
  }
}

/* Additional fine adjustment for 4K (greater than 2560px) */
@media (min-width: 2560px) {
  .card {
    max-width: 1400px;
    height: clamp(480px, 30vw, 700px);
  }
  .card-header-content h6,
  .card-body .card-title {
    font-size: 1.6rem;
  }
  .card-header .profile-pic {
    width: 80px;
    height: 80px;
  }
}
.spotlight-container {
  display: flex;
  gap: clamp(12px, 1vw + 8px, 30px);
  overflow-x: auto;
  padding: clamp(6px, 1vw + 6px, 20px) clamp(8px, 2vw, 30px);
  padding-bottom: clamp(6px, 1vw + 6px, 20px);
  scroll-behavior: smooth;
  scrollbar-width: none;
  align-items: flex-start;
  margin: 0;
}

.spotlight-container::-webkit-scrollbar {
  display: none;
}

.spotlight-card {
  flex-shrink: 0;
  width: clamp(260px, 15vw, 360px);
  height: clamp(420px, 35vw, 580px);
  background: var(--card-bg);
  border-radius: clamp(10px, 1vw + 10px, 20px);
  border: 1px solid var(--card-border);
  box-shadow: 0 4px 14px var(--glass-shadow);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: none !important;
  transform: none !important;
  pointer-events: auto;
}

/* Removes hover completely */
.spotlight-card:hover,
.spotlight-card:focus,
.spotlight-card:active {
  transform: none !important;
  box-shadow: 0 4px 14px var(--glass-shadow) !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* Reset margin/padding/position for the first card */
.spotlight-card:first-child {
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  top: 0 !important;
}

/* Image fixing */
.spotlight-card img {
  width: 100%;
  height: clamp(140px, 9vw, 210px);
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: clamp(10px, 1vw + 10px, 20px) clamp(10px, 1vw + 10px, 20px) 0 0;
  margin: 0;
  padding: 0;
  display: block;
  box-sizing: border-box;
}

/* Card Body */
.card-body {
  flex: 1;
  margin: 0;
  padding: clamp(10px, 1vw + 10px, 20px) clamp(12px, 2vw + 8px, 24px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  color: var(--card-foreground);
}

/* === GLOW Pulse Effect === */
@keyframes neonPulse {
  0%,
  100% {
    box-shadow:
      0 0 2px var(--primary),
      0 0 4px var(--primary);
  }
  50% {
    box-shadow:
      0 0 3px var(--primary),
      0 0 6px var(--accent-purple-light, var(--primary));
  }
}

.spotlight-card.glow {
  animation: neonPulse 6s ease-in-out infinite;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  box-shadow:
    0 0 2px var(--primary),
    0 0 5px var(--accent-purple-light, var(--primary));
  transition: box-shadow 0.3s ease;
}

/* Image – No Glow */
.spotlight-card.glow img {
  border: none;
  box-shadow: none;
  transition: none;
}
.spotlight-card.glow img:hover {
  box-shadow: none;
}

/* Text Glow */
.spotlight-card.glow .card-body {
  color: var(--primary);
  text-shadow:
    0 0 1px var(--primary),
    0 0 2px var(--accent-purple-light, var(--primary));
}

.spotlight-card.glow .card-body .card-title {
  font-weight: 700;
  font-size: clamp(0.9rem, 0.8vw + 0.4rem, 1.1rem);
  color: var(--primary);
  text-shadow:
    0 0 2px var(--primary),
    0 0 4px var(--accent-purple-light, var(--primary));
  margin-bottom: clamp(4px, 0.5vw, 8px);
}

.spotlight-card.glow .card-body .card-text {
  font-size: clamp(0.85rem, 0.7vw + 0.4rem, 1rem);
  color: color-mix(in srgb, var(--primary) 70%, transparent);
  text-shadow: 0 0 1px var(--primary);
}
/**
 * Upload.css
 * ---------------------------------------------------------------
 * Description:
 * This stylesheet is designed to style the file upload form, including the input fields, file preview area,
 * tags, checkboxes, alert messages, and the submit button. It ensures a clean, user-friendly layout with smooth 
 * transitions and hover effects. It also provides distinct visual feedback for success and error messages.
 *
 * Main components:
 * - Input Fields: Styled with rounded corners, subtle focus effects, and smooth transitions.
 * - File Preview: A preview area for uploaded images with a soft shadow and rounded corners.
 * - Tags: Displayed as badges with a hover effect and distinct colors.
 * - Alerts: Success and error messages with rounded corners, bold text, and appropriate background colors.
 * - Submit Button: A button with a blue background that changes color on hover and provides a smooth transition.
 * ---------------------------------------------------------------
 * @author CastleLabs InternAItional
 * @company AuraHyprs · CastleLabs InternAItional
 * @contact support@aurahyprs.com
 * @copyright (c) 2025 AuraHyprs
 * @license MIT
 * @created 2025-03-13
 * @updated 2025-08-12
 */

.custom-file-input {
  display: none;
}

/* === Container === */
.upload-form-wrapper {
  background: var(--card-bg);
  border-radius: clamp(10px, 1.5vw, 16px);
  max-width: clamp(320px, 90vw, 1080px);
  margin: 0 auto;
  color: var(--text);
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  padding: clamp(16px, 3vw, 40px);
}

.upload-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: clamp(10px, 1.2vw, 16px);
  color: var(--text);
  padding: clamp(16px, 2vw, 32px);
}

/* === Headings === */
.upload-card h2 {
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: bold;
  color: var(--primary);
  text-shadow: 0 0 clamp(8px, 1vw, 12px) var(--primary);
  margin-bottom: clamp(12px, 1.5vw, 20px);
}

/* === Form Control Styling === */
.form-control {
  border-radius: clamp(6px, 1vw, 10px);
  border: 1px solid var(--border);
  padding: clamp(8px, 1.5vw, 14px) clamp(10px, 2vw, 18px);
  background-color: var(--input);
  color: var(--text);
  font-size: clamp(13px, 1.2vw, 15px);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease,
    background-color 0.3s ease;
}

.form-control:focus {
  border-color: var(--ring);
  box-shadow: 0 0 clamp(10px, 1vw, 14px) var(--ring);
  outline: none;
}

/* === Labels === */
.form-label {
  font-weight: 600;
  color: var(--text);
  margin-bottom: clamp(4px, 1vw, 8px);
  font-size: clamp(14px, 1.3vw, 16px);
}

/* === Radio / Checkbox Labels === */
.form-check-label {
  font-weight: 500;
  color: var(--destructive);
  font-size: clamp(13px, 1vw, 15px);
}

/* === Text muted === */
.text-muted {
  color: var(--muted-foreground);
  font-size: clamp(11px, 0.9vw, 13px);
}

/* === Tag Badges === */
#tags .badge {
  background-color: var(--aura-purple);
  font-size: clamp(11px, 0.8vw, 13px);
  padding: clamp(4px, 0.8vw, 6px) clamp(8px, 1.5vw, 10px);
  border-radius: 50px;
  margin-right: clamp(4px, 1vw, 6px);
  transition: all 0.2s ease;
  color: var(--card-foreground);
  cursor: pointer;
}

#tags .badge:hover {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

/* === Image Preview === */
.img-fluid {
  max-height: clamp(140px, 15vw, 240px);
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: clamp(8px, 1vw, 12px);
  margin-top: clamp(6px, 1vw, 10px);
  border: 2px solid var(--ring);
  box-shadow: 0 4px 16px var(--glass-shadow);
  filter: var(--avatar-filter);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    filter 0.3s ease;
  width: 100%;
}

/* === Video Preview === */
video {
  border-radius: clamp(8px, 1vw, 12px);
  border: 2px solid var(--ring);
  box-shadow: 0 4px 16px var(--glass-shadow);
  filter: var(--avatar-filter);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    filter 0.3s ease;
  width: 100%;
}

/* === Submit Button === */
button[type="submit"] {
  background-color: var(--destructive);
  color: var(--destructive-foreground);
  border: none;
  padding: clamp(10px, 1.5vw, 14px) clamp(20px, 3vw, 36px);
  font-size: clamp(14px, 1.3vw, 16px);
  border-radius: clamp(6px, 1vw, 8px);
  font-weight: bold;
  margin-top: clamp(8px, 1.5vw, 12px);
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.2s ease,
    color 0.3s ease;
}

button[type="submit"]:hover {
  background-color: hsl(348, 94%, 45%);
  transform: scale(1.02);
}

/* === Alerts === */
.alert {
  border-radius: clamp(6px, 1vw, 8px);
  padding: clamp(12px, 1.5vw, 16px);
  font-weight: 600;
  font-size: clamp(13px, 1vw, 15px);
  color: var(--card-foreground);
}

.alert-success {
  background-color: #28a745; /* Green tone static */
  color: #fff;
  border: none;
}

.alert-danger {
  background-color: var(--destructive);
  color: var(--destructive-foreground);
  border: none;
}

/* === Section Spacing === */
.form-group {
  margin-bottom: clamp(16px, 2vw, 24px);
}

.form-section {
  margin-bottom: clamp(24px, 3vw, 40px);
  padding: clamp(12px, 1.5vw, 20px);
  background-color: var(--glass-shadow);
  border-radius: clamp(8px, 1vw, 12px);
  border-left: 4px solid var(--primary);
  color: var(--text);
}

/* === Responsive Layout === */
@media (min-width: 576px) {
  .container {
    padding: 30px;
  }

  .form-control {
    padding: 12px;
  }
}

@media (min-width: 768px) {
  .container {
    padding: 40px;
  }

  button[type="submit"] {
    padding: 16px 36px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
/**
 * Messages.css
 * ---------------------------------------------------------------
 * 
 * This CSS file contains styles for the chat component, which includes the chat window, 
 * message input area, user profile section, and message history. It also includes responsive 
 * design adjustments for smaller screen sizes.
 * 
 * Key Sections:
 * - Chat Container: Defines the overall structure of the chat window, including fixed input area.
 * - Message Styles: Differentiates between sent and received messages with distinct styling.
 * - User Profile: Styles the user profile section with padding, background, and a shadow effect.
 * - Responsive Design: Adjusts the layout for smaller screen sizes, making the chat window and input areas more user-friendly.
 * ---------------------------------------------------------------
 * @author CastleLabs InternAItional
 * @company AuraHyprs · CastleLabs InternAItional
 * @contact support@aurahyprs.com
 * @copyright (c) 2025 AuraHyprs
 * @license MIT
 * @created 2025-03-13
 * @updated 2025-08-12
 */

/* === General reset & layout === */
.chat-wrapper {
  display: flex;
  height: 100vh;
  background: linear-gradient(
    135deg,
    var(--aura-purple),
    var(--aura-neon),
    var(--aura-glow)
  );
  color: var(--text);
  font-family: var(--font-family);
  gap: clamp(4px, 0.3vw, 6px);
  padding: clamp(4px, 0.3vw, 6px);
  box-sizing: border-box;
  border-radius: var(--radius);
}

/* === Glas & Glow Backgrounds === */
.aura-glass {
  background: var(--aura-glass);
  backdrop-filter: blur(clamp(12px, 0.5vw, 20px));
  border-radius: calc(var(--radius) * 1.4);
  border: 1px solid var(--aura-border);
  box-shadow: 0 0 clamp(20px, 1vw, 28px) var(--aura-glow);
  display: flex;
  flex-direction: column;
}

.aura-glow {
  position: relative;
  transition: box-shadow 0.3s ease;
  cursor: pointer;
}

.aura-glow:hover,
.user-item.active.aura-glow {
  box-shadow:
    0 0 clamp(8px, 0.5vw, 12px) var(--aura-neon),
    0 0 clamp(16px, 1vw, 20px) var(--aura-neon),
    0 0 clamp(32px, 1.5vw, 40px) var(--accent-purple-light),
    0 0 clamp(48px, 2vw, 60px) var(--accent-purple-light-alpha);
  border-radius: var(--radius);
}

/* === Sidebar === */
.chat-sidebar {
  flex: 0 0 clamp(180px, 6vw, 260px);
  overflow-y: auto;
  padding: clamp(4px, 0.3vw, 6px);
  border-right: 1px solid var(--aura-border);
  min-width: clamp(160px, 5vw, 220px);
}

/* === User List Styling === */
.user-list {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.5vw, 14px);
}

.user-item {
  display: flex;
  align-items: center;
  gap: clamp(12px, 0.8vw, 18px);
  padding: clamp(6px, 0.6vw, 12px) clamp(8px, 1vw, 14px);
  font-weight: 600;
  font-size: clamp(14px, 1.1vw, 18px);
  color: var(--accent-purple-light);
  border-radius: var(--radius);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background-color 0.3s ease;
}

.user-item:hover {
  background-color: rgba(143, 95, 255, 0.2);
}

/* === Avatars === */
.avatar {
  width: clamp(32px, 3vw, 48px);
  height: clamp(32px, 3vw, 48px);
  border-radius: 50%;
  border: clamp(1px, 0.1vw, 1.5px) solid var(--avatar-border-color);
  filter: var(--avatar-filter)
    drop-shadow(0 0 clamp(3px, 0.2vw, 6px) var(--avatar-glow-color));
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
}

.avatar:hover {
  transform: scale(1.1);
}

/* Profile picture in header */
.profile-avatar {
  width: clamp(64px, 6vw, 88px);
  height: clamp(64px, 6vw, 88px);
  border-color: var(--accent-purple-light);
  filter: drop-shadow(0 0 clamp(8px, 0.5vw, 12px) var(--accent-purple-light))
    drop-shadow(0 0 clamp(12px, 0.7vw, 18px) var(--aura-glow));
}

/* Glow effect specifically for profile picture */
.glow-avatar {
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 clamp(8px, 0.5vw, 12px) var(--accent-purple-light));
  }
  50% {
    filter: drop-shadow(0 0 clamp(18px, 1vw, 28px) var(--aura-glow));
  }
}

/* === Suchinput & Chat-Eingabe === */
.input-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-weight: 600;
  border-radius: var(--radius);
  transition: background-color 0.3s ease;
  box-shadow: inset 0 0 clamp(6px, 0.3vw, 8px) var(--glass-shadow);
  padding: clamp(6px, 1vw, 12px);
  font-size: clamp(14px, 1vw, 16px);
}

.input-glass::-moz-placeholder {
  color: var(--muted-foreground);
}

.input-glass::placeholder {
  color: var(--muted-foreground);
}

.input-glass:focus {
  background: var(--glass-border);
  outline: none;
  border-color: var(--aura-neon);
  box-shadow:
    0 0 clamp(10px, 0.5vw, 14px) var(--aura-neon),
    inset 0 0 clamp(12px, 0.5vw, 16px) var(--glass-shadow);
}

/* Search bar */
.search-input {
  margin-bottom: clamp(12px, 0.8vw, 16px);
}

/* === Chat Main Area === */
.chat-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border-radius: calc(var(--radius) * 1.4);
  padding: clamp(12px, 1vw, 16px);
  gap: clamp(12px, 1vw, 20px);
  max-width: 100%;
}

/* === Header with name & status === */
.chat-header {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1vw, 20px);
  padding-bottom: clamp(8px, 0.5vw, 12px);
  border-bottom: 1px solid var(--aura-border);
  color: var(--accent-purple-light);
  font-weight: 700;
  text-shadow: 0 0 clamp(8px, 0.4vw, 12px) var(--aura-neon);
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.3vw, 6px);
  margin-left: clamp(8px, 0.6vw, 12px);
}

.status-wrapper {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.4vw, 8px);
  font-size: clamp(12px, 0.7vw, 14px);
  color: #4ade80; /* light green remains static */
  font-weight: 600;
  text-shadow: 0 0 clamp(6px, 0.3vw, 8px) #22c55e88;
}

.status-dot {
  width: clamp(4px, 0.3vw, 6px);
  height: clamp(4px, 0.3vw, 6px);
  background-color: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 clamp(8px, 0.4vw, 12px) clamp(2px, 0.1vw, 4px) #22c55eaa;
}

/* User Info (Name + Status) */
.user-info strong {
  font-size: clamp(1rem, 1.1vw, 1.3rem);
}

.user-info small {
  font-size: clamp(0.7rem, 0.7vw, 0.9rem);
  color: var(--muted-foreground);
  font-weight: 600;
}

/* === Chat Box === */
.chat-box {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: clamp(12px, 1vw, 16px);
  background: rgba(0 0 0 / 0.18);
  border-radius: calc(var(--radius) * 1.4);
  box-shadow: inset 0 0 clamp(16px, 1vw, 24px) var(--aura-neon);
  scrollbar-width: thin;
  scrollbar-color: var(--accent-purple-light-alpha) transparent;
}

/* Scrollbar for Webkit */
.chat-box::-webkit-scrollbar {
  width: clamp(6px, 0.3vw, 8px);
}

.chat-box::-webkit-scrollbar-thumb {
  background: var(--accent-purple-light-alpha);
  border-radius: clamp(10px, 0.6vw, 12px);
}

.chat-box::-webkit-scrollbar-track {
  background: transparent;
}

.chat-input-wrapper {
  padding-top: clamp(4px, 0.3vw, 8px);
}

.chat-input-relative {
  position: relative;
  width: 100%;
}

.chat-textarea {
  padding-right: clamp(36px, 3vw, 72px) !important; /* Make space for button */
  font-size: clamp(14px, 1vw, 16px);
}

/* === Send Button Icon === */
.btn-send-icon {
  position: absolute;
  bottom: clamp(8px, 0.5vw, 12px);
  right: clamp(8px, 0.5vw, 12px);
  height: clamp(36px, 3vw, 45px);
  width: clamp(36px, 3vw, 45px);
  border-radius: 50%;
  background: linear-gradient(135deg, #08db95, #6ed8ff);
  color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 clamp(6px, 0.3vw, 10px) var(--aura-neon),
    0 0 clamp(12px, 0.6vw, 20px) var(--accent-purple-light);
  transition:
    transform 0.2s ease,
    box-shadow 0.3s ease;
  z-index: 10;
  padding: 0;
  border: none;
}

.btn-send-icon:hover:not(:disabled) {
  transform: scale(1.1);
  box-shadow:
    0 0 clamp(10px, 0.5vw, 14px) var(--accent-purple-light),
    0 0 clamp(20px, 1vw, 28px) var(--aura-glow);
}

.btn-send-icon:disabled {
  background: #5e12b584;
  color: #860eab;
  cursor: not-allowed;
  box-shadow: none;
}

/* === Messages Styling === */
.message {
  margin: clamp(4px, 0.2vw, 6px) 0 clamp(4px, 0.2vw, 6px);
  padding: 0.01rem clamp(4px, 0.4vw, 10px);
  border-radius: clamp(8px, 1vw, 12px);
  max-width: 96%;
  word-wrap: break-word;
  font-weight: 600;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.1;
  box-shadow: 0 0 clamp(4px, 0.2vw, 6px) var(--accent-purple-light-alpha);
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

/* Sent messages */
.message-sent {
  background: linear-gradient(135deg, var(--aura-neon), var(--accent-purple-light));
  color: var(--card-foreground);
  margin-left: auto;
  text-align: right;
  box-shadow:
    0 0 clamp(6px, 0.3vw, 10px) var(--accent-purple-light),
    0 0 clamp(18px, 1vw, 28px) var(--aura-glow);
}

/* Received messages */
.message-received {
  background: linear-gradient(135deg, var(--aura-purple), var(--accent-purple));
  color: var(--text);
  margin-right: auto;
  box-shadow:
    0 0 clamp(3px, 0.1vw, 4px) var(--aura-glow-color-1),
    0 0 clamp(4px, 0.2vw, 6px) var(--aura-glow-color-2);
}

/* Timestamp */
.timestamp {
  font-size: clamp(10px, 0.7vw, 12px);
  color: var(--muted-foreground);
  display: block;
  margin-bottom: clamp(4px, 0.2vw, 6px);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* === Input Footer === */
.chat-input {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.5vw, 8px);
}

.chat-input textarea {
  resize: none;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 600;
  padding: clamp(12px, 1vw, 16px) clamp(16px, 1.5vw, 20px);
  border-radius: calc(var(--radius) * 1.4);
  border: none;
  box-shadow: inset 0 0 clamp(12px, 0.7vw, 20px) var(--aura-glow-color-1);
  background: var(--glass-bg);
  color: var(--text);
  transition: box-shadow 0.3s ease;
}

.chat-input textarea:focus {
  outline: none;
  box-shadow:
    0 0 clamp(12px, 0.7vw, 16px) var(--accent-purple-light),
    inset 0 0 clamp(16px, 0.8vw, 24px) var(--glass-shadow);
}

/* === Send Button === */
.btn-glow {
  background: linear-gradient(90deg, var(--aura-purple), var(--accent-purple-light));
  border: none;
  color: white;
  font-weight: 700;
  padding: clamp(10px, 1vw, 14px) clamp(14px, 1.2vw, 20px);
  border-radius: calc(var(--radius) * 1.4);
  box-shadow:
    0 0 clamp(8px, 0.4vw, 14px) var(--aura-purple),
    0 0 clamp(16px, 0.8vw, 28px) var(--accent-purple-light);
  cursor: pointer;
  transition:
    box-shadow 0.3s ease,
    transform 0.2s ease;
}

.btn-glow:hover:not(:disabled) {
  box-shadow:
    0 0 clamp(14px, 0.8vw, 20px) var(--accent-purple-light),
    0 0 clamp(32px, 1.2vw, 48px) var(--aura-glow);
  transform: scale(1.05);
}

.btn-glow:disabled {
  background: var(--muted);
  box-shadow: none;
  cursor: not-allowed;
}

/* === Empty chat & error messages === */
.aura-alert-glow {
  background: rgba(130, 100, 255, 0.15) !important;
  border: 1px solid rgba(130, 100, 255, 0.3) !important;
  color: var(--accent-purple-light) !important;
  text-align: center;
  font-weight: 600;
  box-shadow: 0 0 clamp(12px, 0.7vw, 18px) rgba(130, 100, 255, 0.4);
  border-radius: calc(var(--radius) * 1.4);
}

/* Empty Chat Info */
.empty-chat {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === Responsive Layouts === */

/* Mobile */
@media (max-width: 420px) {
  .chat-wrapper {
    flex-direction: column;
    height: 100vh;
  }

  .chat-sidebar {
    flex: none;
    width: 100%;
    max-height: 180px;
    overflow-y: auto;
    border-right: none;
    border-bottom: 1px solid var(--aura-border);
  }

  .chat-main {
    flex: 1;
    width: 100%;
  }

  .user-list {
    flex-direction: row;
    overflow-x: auto;
    gap: clamp(4px, 0.3vw, 8px);
  }

  .user-item {
    flex: none;
    padding: clamp(4px, 0.3vw, 8px) clamp(6px, 0.3vw, 12px);
    font-size: clamp(12px, 0.8vw, 14px);
  }

  .user-item span {
    display: none; /* Only avatar on super small screens */
  }

  .chat-header {
    flex-direction: column;
    gap: clamp(4px, 0.3vw, 6px);
    text-align: center;
  }
}

/* Tablet */
@media (min-width: 421px) and (max-width: 768px) {
  .chat-wrapper {
    flex-direction: column;
    height: 100vh;
  }

  .chat-sidebar {
    flex: none;
    width: 100%;
    max-height: 200px;
    border-right: none;
    border-bottom: 1px solid var(--aura-border);
  }

  .chat-main {
    flex: 1;
  }
}

/* Desktop */
@media (min-width: 769px) {
  .chat-wrapper {
    flex-direction: row;
  }
}
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 576px) {
  .user-management-container h1 {
    font-size: 1.5rem;
    text-align: center;
  }

  .table th,
  .table td {
    font-size: 0.85rem;
    white-space: nowrap;
  }
}
.content-moderation-wrapper {
  padding: 1rem;
}

@media (max-width: 576px) {
  .content-moderation-wrapper {
    padding: 0.5rem;
  }

  .content-moderation-wrapper h1 {
    font-size: 1.5rem;
  }

  .table th,
  .table td {
    font-size: 0.85rem;
    vertical-align: middle;
    white-space: nowrap;
  }

  .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
  }
}
.warnings-wrapper {
  padding: 1rem;
}

@media (max-width: 576px) {
  .warnings-wrapper {
    padding: 0.5rem;
  }

  .warnings-wrapper h1 {
    font-size: 1.5rem;
  }

  .table th,
  .table td {
    font-size: 0.85rem;
    white-space: nowrap;
  }
}
.sales-overview-wrapper {
  padding: 1rem;
}

@media (max-width: 576px) {
  .sales-overview-wrapper {
    padding: 0.5rem;
  }

  .sales-overview-wrapper h1 {
    font-size: 1.5rem;
  }

  .table th,
  .table td {
    font-size: 0.85rem;
    white-space: nowrap;
  }
}
.blurred-wrapper {
  position: relative;
  overflow: hidden;
}

.blurred-wrapper img {
  filter: blur(8px) grayscale(0.5);
  transition: filter 0.3s ease;
}

.blurred-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.blurred-overlay svg {
  margin-bottom: 0.5rem;
  color: #888;
}
/* @file ./frontend/src/pages/SuccessPage.module.css */

._successPageWrapper_19brg_3 {
  padding: clamp(16px, 3vw, 48px) clamp(8px, 2vw, 32px);
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-family);
  font-weight: var(--font-weight);
}

._successCard_19brg_11 {
  max-width: 100%;
  width: 100%;
  background-color: var(--card-bg);
  border-radius: clamp(12px, 1.5vw, 24px);
  box-shadow: 0 8px 24px var(--glass-shadow, rgba(0, 0, 0, 0.05));
  margin: auto;
  padding: clamp(16px, 2.5vw, 40px);
  border: 1px solid var(--card-border);
  color: var(--card-foreground);
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease;
  max-width: clamp(300px, 50vw, 80vw);
}

._successSection_19brg_28 {
  border-radius: clamp(10px, 1.2vw, 16px);
  padding: clamp(12px, 1.5vw, 24px);
  background-color: var(--card-bg);
  margin-bottom: clamp(12px, 1.5vw, 24px);
  border: 1px solid var(--card-border);
  color: var(--card-foreground);
}

._successMedia_19brg_37 {
  max-height: clamp(280px, 20vw, 600px);
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: clamp(10px, 1.2vw, 16px);
  filter: var(--avatar-filter, none);
  transition: filter 0.3s ease;
}

@media (min-width: 576px) {
  ._successCard_19brg_11 {
    padding: 2.5rem;
  }
}

@media (min-width: 1024px) {
  ._successCard_19brg_11 {
    max-width: 960px;
  }
}

@media (min-width: 1440px) {
  ._successCard_19brg_11 {
    max-width: 1140px;
  }
}

@media (min-width: 1920px) {
  ._successCard_19brg_11 {
    max-width: 80vw;
  }
}

@media (max-width: 420px) {
  ._successCard_19brg_11 {
    padding: 1rem;
  }

  ._successMedia_19brg_37 {
    max-height: 280px;
  }
}
/**
 * NotFound.css
 * ---------------------------------------------------------------
 *
 * This stylesheet contains the design elements for the 404 error message page.
 * It uses modern techniques such as glass morphism, smooth animations and neon glow effects,
 * to ensure an appealing and professional design.
 *
 * @notes
 * - Radial background with animated light effect
 * - Glass morphism for the content box
 * - Large, eye-catching 404 display with glow effect
 * - Animated buttons with soft hover effect
 * - Responsive adaptation for different screen sizes
 * ---------------------------------------------------------------
 * @author CastleLabs InternAItional
 * @company AuraHyprs · CastleLabs InternAItional
 * @contact support@aurahyprs.com
 * @copyright (c) 2025 AuraHyprs
 * @license MIT
 * @created 2025-03-13
 * @updated 2025-08-12
 */

/* Container with dynamic theme background and smooth movement */
.not-found-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at top, var(--aura-purple), var(--aura-neon));
  color: var(--foreground);
  text-align: center;
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  width: 100vw;
  height: 100vh;
  animation: bgShift 12s ease-in-out infinite alternate;
}

/* Subtle animated lighting effects for depth */
.not-found-container::before {
  content: "";
  position: absolute;
  background: var(--aura-glow-color-1);
  filter: blur(120px);
  width: 60%;
  height: 60%;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  animation: lightMove 10s ease-in-out infinite alternate;
}

/* Content Box – Theme-compatible & Glassmorphism */
.content-box {
  background: var(--aura-glass);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 20px;
  width: 80vw;
  border-radius: 25px;
  box-shadow: var(--aura-shadow);
  border: 1px solid var(--aura-border);
  animation: fadeIn 1s ease-out;
}

/* 404 error text with Theme Glow */
.error-code {
  font-size: clamp(6rem, 10vw, 10rem);
  font-weight: 900;
  color: var(--foreground);
  text-shadow: 0 0 15px var(--aura-glow);
  animation: pulseGlow 1.5s infinite alternate;
}

/* Button-Container */
.button-group {
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
  margin-top: 15px;
}

/* Primary button – glow effect with theme colors */
.btn-custom-primary {
  background: linear-gradient(135deg, var(--accent-purple), var(--aura-neon));
  border: none;
  color: var(--primary-foreground);
  padding: 16px 32px;
  font-size: 1.3rem;
  font-weight: bold;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 4px 20px var(--aura-shadow);
}

.btn-custom-primary:hover {
  background: linear-gradient(135deg, var(--accent-purple-light), var(--aura-glow));
  transform: scale(1.08);
}

/* Secondary button – neon frame */
.btn-custom-secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid var(--accent-purple);
  color: var(--foreground);
  padding: 16px 32px;
  font-size: 1.3rem;
  font-weight: bold;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 0px 12px var(--aura-glow-color-2);
}

.btn-custom-secondary:hover {
  background: var(--accent-purple-light-alpha);
  border: 2px solid var(--foreground);
  transform: scale(1.08);
  box-shadow: 0px 0px 25px var(--aura-glow);
}

/* Keyframes */
@keyframes pulseGlow {
  from {
    text-shadow: 0px 0px 15px var(--aura-glow);
  }
  to {
    text-shadow: 0px 0px 30px var(--aura-glow);
  }
}

@keyframes bgShift {
  0% {
    background: radial-gradient(circle at top, var(--aura-purple), var(--aura-neon));
  }
  100% {
    background: radial-gradient(circle at bottom, var(--aura-neon), var(--aura-purple));
  }
}

@keyframes lightMove {
  0% {
    transform: translate(-50%, -20%) scale(1);
  }
  100% {
    transform: translate(-40%, 20%) scale(1.2);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-\[50\%\]{top:50%}.top-\[calc\(theme\(spacing\.14\)\+theme\(spacing\.3\)\)\]{top:4.25rem}.left-\[50\%\]{left:50%}.z-40{z-index:40}.z-50{z-index:50}.z-\[10000\]{z-index:10000}.col-span-1{grid-column:span 1/span 1}.col-span-3{grid-column:span 3/span 3}.container{width:100%}.mx-auto{margin-inline:auto}.mt-auto{margin-top:auto}.ml-auto{margin-left:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.aspect-square{aspect-ratio:1}.h-\[1px\]{height:1px}.h-full{height:100%}.h-px{height:1px}.max-h-\[75vh\]{max-height:75vh}.min-h-\[80px\]{min-height:80px}.min-h-\[100dvh\]{min-height:100dvh}.min-h-\[120px\]{min-height:120px}.min-h-screen{min-height:100vh}.w-\[1px\]{width:1px}.w-full{width:100%}.max-w-\[70\%\]{max-width:70%}.max-w-full{max-width:100%}.min-w-\[8rem\]{min-width:8rem}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize-none{resize:none}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:3.40282e38px}.rounded-br-none{border-bottom-right-radius:0}.rounded-bl-none{border-bottom-left-radius:0}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-\[var\(--card-border\)\]{border-color:var(--card-border)}.border-t-transparent{border-top-color:#0000}.border-l-transparent{border-left-color:#0000}.bg-\[rgba\(55\,0\,179\,0\.36\)\]{background-color:#3700b35c}.bg-\[var\(--card-bg\)\]{background-color:var(--card-bg)}.bg-gradient-to-b{--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-\[\#3609a7\]{--tw-gradient-from:#3609a7;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-\[\#5619bf\]{--tw-gradient-to:#5619bf;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.fill-current{fill:currentColor}.object-cover{-o-object-fit:cover;object-fit:cover}.p-\[1px\]{padding:1px}.text-center{text-align:center}.text-right{text-align:right}.text-\[10px\]{font-size:10px}.leading-none{--tw-leading:1;line-height:1}.font-\[var\(--font-family\)\]{--tw-font-weight:var(--font-family);font-weight:var(--font-family)}.tracking-\[var\(--letter-spacing\)\]{--tw-tracking:var(--letter-spacing);letter-spacing:var(--letter-spacing)}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[var\(--text\)\]{color:var(--text)}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.shadow-\[0_0_12px_rgba\(139\,92\,246\,0\.8\)\]{--tw-shadow:0 0 12px var(--tw-shadow-color,#8b5cf6cc);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_0_20px_rgba\(139\,92\,246\,0\.8\)\]{--tw-shadow:0 0 20px var(--tw-shadow-color,#8b5cf6cc);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.drop-shadow-\[0_0_8px_rgba\(139\,92\,246\,0\.7\)\]{--tw-drop-shadow-size:drop-shadow(0 0 8px var(--tw-drop-shadow-color,#8b5cf6b3));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.drop-shadow-\[0_0_8px_rgba\(255\,100\,100\,0\.8\)\]{--tw-drop-shadow-size:drop-shadow(0 0 8px var(--tw-drop-shadow-color,#ff6464cc));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.drop-shadow-\[0_0_10px_rgba\(32\,201\,151\,0\.9\)\]{--tw-drop-shadow-size:drop-shadow(0 0 10px var(--tw-drop-shadow-color,#20c997e6));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.drop-shadow-\[0_0_10px_rgba\(168\,85\,247\,0\.9\)\]{--tw-drop-shadow-size:drop-shadow(0 0 10px var(--tw-drop-shadow-color,#a855f7e6));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.drop-shadow-\[0_0_10px_rgba\(236\,72\,153\,0\.8\)\]{--tw-drop-shadow-size:drop-shadow(0 0 10px var(--tw-drop-shadow-color,#ec4899cc));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.drop-shadow-\[0_0_10px_rgba\(255\,100\,100\,0\.85\)\]{--tw-drop-shadow-size:drop-shadow(0 0 10px var(--tw-drop-shadow-color,#ff6464d9));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-blur-\[15px\]{--tw-backdrop-blur:blur(15px);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-saturate-\[150\%\]{--tw-backdrop-saturate:saturate(150%);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (hover:hover){.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-70:is(:where(.peer):disabled~*){opacity:.7}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}@media (hover:hover){.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\:scale-\[1\.02\]:hover{scale:1.02}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-100:hover{opacity:1}.hover\:shadow-\[0_0_20px_rgba\(236\,72\,153\,0\.9\)\]:hover{--tw-shadow:0 0 20px var(--tw-shadow-color,#ec4899e6);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.hover\:brightness-110:hover{--tw-brightness:brightness(110%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.hover\:drop-shadow-\[0_0_12px_rgba\(255\,100\,100\,0\.8\)\]:hover{--tw-drop-shadow-size:drop-shadow(0 0 12px var(--tw-drop-shadow-color,#ff6464cc));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-\[var\(--ring\)\]:focus{--tw-ring-color:var(--ring)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}@layer base{:root{--bg:var(--background);--text:var(--foreground);--font-family:"Inter",sans-serif;--font-weight:400;--letter-spacing:.02em;--card-bg:#fff;--card-bg-alt:#e6e6e6;--card-border:#ccc;--selection-bg:#999;--selection-color:#fafafa;--background:#fafafa;--foreground:#333;--card:#fff;--card-foreground:#333;--popover:#fff;--popover-foreground:#333;--primary:#666;--primary-foreground:#fafafa;--secondary:#f5f5f5;--secondary-foreground:#4d4d4d;--muted:#f5f5f5;--muted-foreground:#ccc;--accent:#f5f5f5;--accent-foreground:#4d4d4d;--destructive:#f92f57;--destructive-foreground:#fff;--border:#ccc;--input:#e6e6e6;--ring:#999;--radius:.5rem;--glass-bg:#ffffff0d;--glass-border:#ffffff1a;--glass-shadow:#1f26874d;--avatar-filter:none;--avatar-border-color:#c8c8c8b3;--avatar-glow-color:#c8c8c8b3;--aura-glow-color-1:#7878784d;--aura-glow-color-2:#a0a0a033;--aura-glow-color-3:#5050501a;--glow-footer-bg:#0000000d;--glow-footer-border:#0000001a;--glow-footer-shadow:#0000001a;--glow-footer-text:#4d4d4d;--glow-footer-link-hover:#262626;--aura-purple:#666;--aura-neon:#888;--aura-glow:#bbb;--aura-glass:#ffffff12;--aura-border:#ffffff40;--aura-shadow:0 8px 30px #7878784d;--aura-purple-rgb:102,102,102;--accent-purple:#666;--accent-purple-dark:102,102,102;--accent-purple-light:#999;--accent-purple-light-alpha:#99999921}.dark{--bg:var(--background);--text:var(--foreground);--font-family:"Inter",sans-serif;--font-weight:400;--letter-spacing:.02em;--card-bg:#1f1f1f;--card-border:#404040;--selection-bg:#666;--selection-color:#1a1a1a;--background:#141414;--foreground:#d9d9d9;--card:#1f1f1f;--card-bg-alt:#333;--card-foreground:#d9d9d9;--popover:#262626;--popover-foreground:#d9d9d9;--primary:#999;--primary-foreground:#1f1f1f;--secondary:#404040;--secondary-foreground:#b3b3b3;--muted:#333;--muted-foreground:#b3b3b3;--accent:#333;--accent-foreground:#d9d9d9;--destructive:#f92f57;--destructive-foreground:#fafafa;--border:#404040;--input:#404040;--ring:#999;--glass-bg:#0000004d;--glass-border:#ffffff0d;--glass-shadow:#0006;--avatar-filter:grayscale(100%)brightness(85%);--avatar-border-color:#c8c8c8b3;--avatar-glow-color:#c8c8c8b3;--aura-glow-color-1:#78787826;--aura-glow-color-2:#a0a0a01a;--aura-glow-color-3:#5050500d;--glow-footer-bg:#ffffff14;--glow-footer-border:#ffffff1f;--glow-footer-shadow:#ffffff26;--glow-footer-text:#d9d9d9;--glow-footer-link-hover:#fafafa;--aura-purple:#666;--aura-neon:#888;--aura-glow:#bbb;--aura-glass:#ffffff12;--aura-border:#ffffff40;--aura-shadow:0 8px 30px #7878784d;--aura-purple-rgb:102,102,102;--accent-purple:#999;--accent-purple-dark:153,153,153;--accent-purple-light:#bbb;--accent-purple-light-alpha:#bbbbbb21}.aura{--bg:var(--background);--text:var(--foreground);--font-family:"JetBrains Mono",monospace;--font-weight:500;--letter-spacing:.03em;--card-bg:#0e0e0e;--card-border:#444;--selection-bg:#0fc;--selection-color:#000;--background:#000;--foreground:#fff;--card:#0e0e0e;--card-foreground:#fff;--popover:#0e0e0e;--popover-foreground:#fff;--primary:#0fc;--primary-foreground:#000;--secondary:#111;--secondary-foreground:#fff;--muted:#1a1a1a;--muted-foreground:#888;--accent:#1a1a1a;--accent-foreground:#fff;--destructive:#f55;--destructive-foreground:#fff;--border:#333;--input:#222;--ring:#0fc;--glass-bg:#00ffcc14;--glass-border:#0fc3;--glass-shadow:#00ffcc4d;--avatar-filter:grayscale(100%)brightness(80%);--avatar-border-color:#aaaaaab3;--avatar-glow-color:#aaaaaab3;--aura-glow-color-1:#00ffcc4d;--aura-glow-color-2:#ec489933;--aura-glow-color-3:#20c9971a;--glow-footer-bg:#00ffcc14;--glow-footer-border:#0fc3;--glow-footer-shadow:#00ffcc4d;--glow-footer-text:#ccc;--glow-footer-link-hover:#aaa;--aura-purple:#512188;--aura-neon:#8d0fd2;--aura-glow:#f0c;--aura-glass:#ffffff12;--aura-border:#ffffff40;--aura-shadow:0 8px 30px #8c00ff4d;--aura-purple-rgb:81,33,136;--accent-purple:#512188;--accent-purple-dark:81,33,136;--accent-purple-light:#9a7fff;--accent-purple-light-alpha:#9a7fff21}.greenLight{--bg:#f9fbf9;--text:#244224;--font-family:"Inter",sans-serif;--font-weight:400;--letter-spacing:.02em;--card-bg:#fff;--card-bg-alt:#e2e9e2;--card-border:#c4d4c4;--selection-bg:#6c6;--selection-color:#f8fbf8;--background:#f9fbf9;--foreground:#244224;--card:#fff;--card-foreground:#244224;--popover:#fff;--popover-foreground:#244224;--primary:#3d8f3d;--primary-foreground:#f9fbf9;--secondary:#f3f6f3;--secondary-foreground:#366336;--muted:#f3f6f3;--muted-foreground:#c4d4c4;--accent:#f3f7f3;--accent-foreground:#366336;--destructive:#f92f57;--destructive-foreground:#fff;--border:#c4d4c4;--input:#e2e9e2;--ring:#70c270;--radius:.5rem;--glass-bg:#c8ffc80d;--glass-border:#c8ffc81a;--glass-shadow:#78c8784d;--avatar-filter:none;--avatar-border-color:#a0c8a0b3;--avatar-glow-color:#a0c8a0b3;--aura-glow-color-1:#50a0504d;--aura-glow-color-2:#6eb46e33;--aura-glow-color-3:#3278321a;--glow-footer-bg:#508c500d;--glow-footer-border:#508c501a;--glow-footer-shadow:#508c501a;--glow-footer-text:#366336;--glow-footer-link-hover:#1f471f;--aura-purple:#4a754a;--aura-neon:#64a564;--aura-glow:#8c8;--aura-glass:#c8ffc812;--aura-border:#c8ffc840;--aura-shadow:0 8px 30px #78a0784d;--aura-purple-rgb:74,117,74;--accent-purple:#4a754a;--accent-purple-dark:74,117,74;--accent-purple-light:#7cb07c;--accent-purple-light-alpha:#7cb07c21}.greenDark{--bg:#122112;--text:#cde4cd;--font-family:"Inter",sans-serif;--font-weight:400;--letter-spacing:.02em;--card-bg:#152815;--card-border:#2d532d;--selection-bg:#3d8f3d;--selection-color:#122112;--background:#0e1b0e;--foreground:#cde4cd;--card:#152815;--card-bg-alt:#244224;--card-foreground:#cde4cd;--popover:#1b321b;--popover-foreground:#cde4cd;--primary:#70c270;--primary-foreground:#152815;--secondary:#2d532d;--secondary-foreground:#9cc99c;--muted:#244224;--muted-foreground:#9cc99c;--accent:#244224;--accent-foreground:#cde4cd;--destructive:#f92f57;--destructive-foreground:#fafafa;--border:#2d532d;--input:#2d532d;--ring:#70c270;--glass-bg:#0028004d;--glass-border:#78ff780d;--glass-shadow:#003c0066;--avatar-filter:grayscale(100%)brightness(85%);--avatar-border-color:#a0dca0b3;--avatar-glow-color:#a0dca0b3;--aura-glow-color-1:#50a05026;--aura-glow-color-2:#6eb46e1a;--aura-glow-color-3:#3278320d;--glow-footer-bg:#64ff6414;--glow-footer-border:#64ff641f;--glow-footer-shadow:#64ff6426;--glow-footer-text:#cde4cd;--glow-footer-link-hover:#f8fbf8;--aura-purple:#4a754a;--aura-neon:#64a564;--aura-glow:#8c8;--aura-glass:#c8ffc812;--aura-border:#c8ffc840;--aura-shadow:0 8px 30px #78a0784d;--aura-purple-rgb:74,117,74;--accent-purple:#7cb07c;--accent-purple-dark:124,176,124;--accent-purple-light:#a7d1a7;--accent-purple-light-alpha:#a7d1a721}.blueLight{--bg:#f9fafb;--text:#243342;--font-family:"Inter",sans-serif;--font-weight:400;--letter-spacing:.02em;--card-bg:#fff;--card-bg-alt:#e2e6e9;--card-border:#c4ccd4;--selection-bg:#69c;--selection-color:#f8fafb;--background:#f9fafb;--foreground:#243342;--card:#fff;--card-foreground:#243342;--popover:#fff;--popover-foreground:#243342;--primary:#3d668f;--primary-foreground:#f9fafb;--secondary:#f3f5f6;--secondary-foreground:#364d63;--muted:#f3f5f6;--muted-foreground:#c4ccd4;--accent:#f3f5f7;--accent-foreground:#364d63;--destructive:#f92f57;--destructive-foreground:#fff;--border:#c4ccd4;--input:#e2e6e9;--ring:#7099c2;--radius:.5rem;--glass-bg:#c8dcff0d;--glass-border:#c8dcff1a;--glass-shadow:#788cdc4d;--avatar-filter:none;--avatar-border-color:#a0b4dcb3;--avatar-glow-color:#a0b4dcb3;--aura-glow-color-1:#5078a04d;--aura-glow-color-2:#6e8cb433;--aura-glow-color-3:#325a8c1a;--glow-footer-bg:#5078b40d;--glow-footer-border:#5078b41a;--glow-footer-shadow:#5078b41a;--glow-footer-text:#364d63;--glow-footer-link-hover:#1f3347;--aura-purple:#468;--aura-neon:#59c;--aura-glow:#8bf;--aura-glass:#c8dcff12;--aura-border:#c8dcff40;--aura-shadow:0 8px 30px #788cc84d;--aura-purple-rgb:68,102,136;--accent-purple:#468;--accent-purple-dark:68,102,136;--accent-purple-light:#7ba0d6;--accent-purple-light-alpha:#7ba0d621}.blueDark{--bg:#121a21;--text:#cdd9e4;--font-family:"Inter",sans-serif;--font-weight:400;--letter-spacing:.02em;--card-bg:#151f28;--card-border:#2d4053;--selection-bg:#3d668f;--selection-color:#121a21;--background:#0e141b;--foreground:#cdd9e4;--card:#151f28;--card-bg-alt:#243342;--card-foreground:#cdd9e4;--popover:#1b2632;--popover-foreground:#cdd9e4;--primary:#7099c2;--primary-foreground:#151f28;--secondary:#2d4053;--secondary-foreground:#9cb3c9;--muted:#243342;--muted-foreground:#9cb3c9;--accent:#243342;--accent-foreground:#cdd9e4;--destructive:#f92f57;--destructive-foreground:#fafafa;--border:#2d4053;--input:#2d4053;--ring:#7099c2;--glass-bg:#0000284d;--glass-border:#788cff0d;--glass-shadow:#00003c66;--avatar-filter:grayscale(100%)brightness(85%);--avatar-border-color:#a0b4dcb3;--avatar-glow-color:#a0b4dcb3;--aura-glow-color-1:#5078a026;--aura-glow-color-2:#6e8cb41a;--aura-glow-color-3:#325a8c0d;--glow-footer-bg:#64a0ff14;--glow-footer-border:#64a0ff1f;--glow-footer-shadow:#64a0ff26;--glow-footer-text:#cdd9e4;--glow-footer-link-hover:#f8fafb;--aura-purple:#468;--aura-neon:#59c;--aura-glow:#8bf;--aura-glass:#c8dcff12;--aura-border:#c8dcff40;--aura-shadow:0 8px 30px #788cc84d;--aura-purple-rgb:68,102,136;--accent-purple:#7ba0d6;--accent-purple-dark:123,160,214;--accent-purple-light:#a1c3ff;--accent-purple-light-alpha:#a1c3ff21}.orangeLight{--bg:#fefaf5;--text:#794006;--font-family:"Inter",sans-serif;--font-weight:400;--letter-spacing:.02em;--card-bg:#fff;--card-bg-alt:#fce6cf;--card-border:#facc9e;--selection-bg:#f5993d;--selection-color:#fefaf5;--background:#fefaf5;--foreground:#794006;--card:#fff;--card-foreground:#794006;--popover:#fff;--popover-foreground:#794006;--primary:#da730b;--primary-foreground:#fefaf5;--secondary:#fef5ec;--secondary-foreground:#aa5909;--muted:#fef5ec;--muted-foreground:#facc9e;--accent:#fef5ec;--accent-foreground:#aa5909;--destructive:#f92f57;--destructive-foreground:#fff;--border:#facc9e;--input:#fce6cf;--ring:#f6a655;--radius:.5rem;--glass-bg:#ffe6c80d;--glass-border:#ffc8641a;--glass-shadow:#ffb43c4d;--avatar-filter:none;--avatar-border-color:#c8a064b3;--avatar-glow-color:#c8a064b3;--aura-glow-color-1:#ffb4504d;--aura-glow-color-2:#ffc86433;--aura-glow-color-3:#ff8c3c1a;--glow-footer-bg:#ffb43c0d;--glow-footer-border:#ffb43c1a;--glow-footer-shadow:#ffb43c1a;--glow-footer-text:#aa5909;--glow-footer-link-hover:#794006;--aura-purple:#b36b12;--aura-neon:#ff9c15;--aura-glow:#ffbc30;--aura-glass:#ffe6c812;--aura-border:#ffe6c840;--aura-shadow:0 8px 30px #ffb43c4d;--aura-purple-rgb:179,107,18;--accent-purple:#b36b12;--accent-purple-dark:179,107,18;--accent-purple-light:#dca646;--accent-purple-light-alpha:#dca64621}.orangeDark{--bg:#2e1a05;--text:#f7d9ba;--font-family:"Inter",sans-serif;--font-weight:400;--letter-spacing:.02em;--card-bg:#371f06;--card-border:#73400d;--selection-bg:#b86614;--selection-color:#2e1a05;--background:#251404;--foreground:#f7d9ba;--card:#371f06;--card-bg-alt:#5c330a;--card-foreground:#f7d9ba;--popover:#452608;--popover-foreground:#f7d9ba;--primary:#eb9947;--primary-foreground:#371f06;--secondary:#73400d;--secondary-foreground:#f0b375;--muted:#5c330a;--muted-foreground:#f0b375;--accent:#5c330a;--accent-foreground:#f7d9ba;--destructive:#f92f57;--destructive-foreground:#fafafa;--border:#73400d;--input:#73400d;--ring:#f5993d;--glass-bg:#3c28004d;--glass-border:#ffb4500d;--glass-shadow:#3c280066;--avatar-filter:grayscale(100%)brightness(85%);--avatar-border-color:#dcb478b3;--avatar-glow-color:#dcb478b3;--aura-glow-color-1:#ffc86426;--aura-glow-color-2:#ffd2781a;--aura-glow-color-3:#ffa03c0d;--glow-footer-bg:#ffc86414;--glow-footer-border:#ffc8641f;--glow-footer-shadow:#ffc86426;--glow-footer-text:#f7d9ba;--glow-footer-link-hover:#fefaf6;--aura-purple:#b36b12;--aura-neon:#ff9c15;--aura-glow:#ffbc30;--aura-glass:#ffe6c812;--aura-border:#ffe6c840;--aura-shadow:0 8px 30px #ffb43c4d;--aura-purple-rgb:179,107,18;--accent-purple:#dca646;--accent-purple-dark:220,166,70;--accent-purple-light:#e7c47a;--accent-purple-light-alpha:#e7c47a21}.pinkLight{--bg:#fef6fa;--text:#521433;--font-family:"Inter",sans-serif;--font-weight:400;--letter-spacing:.02em;--card-bg:#fff;--card-bg-alt:#fad1e6;--card-border:#f5a3cc;--selection-bg:#eb4799;--selection-color:#fdf7fa;--background:#fef6fa;--foreground:#521433;--card:#fff;--card-foreground:#521433;--popover:#fff;--popover-foreground:#521433;--primary:#c32273;--primary-foreground:#fef6fa;--secondary:#fdedf5;--secondary-foreground:#7a1f4d;--muted:#fdedf5;--muted-foreground:#f5a3cc;--accent:#fdedf5;--accent-foreground:#7a1f4d;--destructive:#f92f57;--destructive-foreground:#fff;--border:#f5a3cc;--input:#fad1e6;--ring:#ed5ea6;--radius:.5rem;--glass-bg:#ffb4dc0d;--glass-border:#ff96b41a;--glass-shadow:#ff96b44d;--avatar-filter:none;--avatar-border-color:#dc78b4b3;--avatar-glow-color:#dc78b4b3;--aura-glow-color-1:#ff96b44d;--aura-glow-color-2:#ff82aa33;--aura-glow-color-3:#ff64961a;--glow-footer-bg:#ff96b40d;--glow-footer-border:#ff96b41a;--glow-footer-shadow:#ff96b41a;--glow-footer-text:#7a1f4d;--glow-footer-link-hover:#521433;--aura-purple:#b05288;--aura-neon:#ff5bac;--aura-glow:#ff73bc;--aura-glass:#ffb4dc12;--aura-border:#ffb4dc40;--aura-shadow:0 8px 30px #ff96b44d;--aura-purple-rgb:176,82,136;--accent-purple:#b05288;--accent-purple-dark:176,82,136;--accent-purple-light:#e28db9;--accent-purple-light-alpha:#e28db921}.pinkDark{--bg:#2b081a;--text:#f4bed9;--font-family:"Inter",sans-serif;--font-weight:400;--letter-spacing:.02em;--card-bg:#34091f;--card-border:#6c1340;--selection-bg:#ad1f66;--selection-color:#2b081a;--background:#230614;--foreground:#f4bed9;--card:#34091f;--card-bg-alt:#570f33;--card-foreground:#f4bed9;--popover:#410b26;--popover-foreground:#f4bed9;--primary:#e05299;--primary-foreground:#34091f;--secondary:#6c1340;--secondary-foreground:#e87db3;--muted:#570f33;--muted-foreground:#e87db3;--accent:#570f33;--accent-foreground:#f4bed9;--destructive:#f92f57;--destructive-foreground:#fafafa;--border:#6c1340;--input:#6c1340;--ring:#e05299;--glass-bg:#2800284d;--glass-border:#ff96b40d;--glass-shadow:#28002866;--avatar-filter:grayscale(100%)brightness(85%);--avatar-border-color:#dc78b4b3;--avatar-glow-color:#dc78b4b3;--aura-glow-color-1:#ff82aa26;--aura-glow-color-2:#ff96be1a;--aura-glow-color-3:#ff64960d;--glow-footer-bg:#ff96be14;--glow-footer-border:#ff96be1f;--glow-footer-shadow:#ff96be26;--glow-footer-text:#f4bed9;--glow-footer-link-hover:#fdf6fa;--aura-purple:#b05288;--aura-neon:#ff5bac;--aura-glow:#ff73bc;--aura-glass:#ffb4dc12;--aura-border:#ffb4dc40;--aura-shadow:0 8px 30px #ff96b44d;--aura-purple-rgb:176,82,136;--accent-purple:#e28db9;--accent-purple-dark:226,141,185;--accent-purple-light:#ffb4db;--accent-purple-light-alpha:#ffb4dc21}.turquoiseLight{--bg:#f8fcfc;--text:#1f4747;--font-family:"Inter",sans-serif;--font-weight:400;--letter-spacing:.02em;--card-bg:#fff;--card-bg-alt:#dbf0f0;--card-border:#b8e0e0;--selection-bg:#6cc;--selection-color:#f8fcfc;--background:#f8fcfc;--foreground:#1f4747;--card:#fff;--card-foreground:#1f4747;--popover:#fff;--popover-foreground:#1f4747;--primary:#45a1a1;--primary-foreground:#f8fcfc;--secondary:#f1f9f9;--secondary-foreground:#367d7d;--muted:#f1f9f9;--muted-foreground:#b8e0e0;--accent:#f1f9f9;--accent-foreground:#367d7d;--destructive:#f92f57;--destructive-foreground:#fff;--border:#b8e0e0;--input:#dbf0f0;--ring:#82c9c9;--radius:.5rem;--glass-bg:#96dcdc0d;--glass-border:#96dcdc1a;--glass-shadow:#78c8c84d;--avatar-filter:none;--avatar-border-color:#96dcdcb3;--avatar-glow-color:#96dcdcb3;--aura-glow-color-1:#78dcdc4d;--aura-glow-color-2:#96dcdc33;--aura-glow-color-3:#64bebe1a;--glow-footer-bg:#78dcdc0d;--glow-footer-border:#78dcdc1a;--glow-footer-shadow:#78dcdc1a;--glow-footer-text:#367d7d;--glow-footer-link-hover:#265959;--aura-purple:#399999;--aura-neon:#5cc;--aura-glow:#8ee;--aura-glass:#96dcdc12;--aura-border:#96dcdc40;--aura-shadow:0 8px 30px #78dcdc4d;--aura-purple-rgb:57,153,153;--accent-purple:#399999;--accent-purple-dark:57,153,153;--accent-purple-light:#69c6c6;--accent-purple-light-alpha:#69c6c621}.turquoiseDark{--bg:#0d2626;--text:#c6ecec;--font-family:"Inter",sans-serif;--font-weight:400;--letter-spacing:.02em;--card-bg:#0f2e2e;--card-border:#206060;--selection-bg:#399;--selection-color:#0d2626;--background:#0a1f1f;--foreground:#c6ecec;--card:#0f2e2e;--card-bg-alt:#194d4d;--card-foreground:#c6ecec;--popover:#133939;--popover-foreground:#c6ecec;--primary:#6cc;--primary-foreground:#0f2e2e;--secondary:#206060;--secondary-foreground:#8cd9d9;--muted:#194d4d;--muted-foreground:#8cd9d9;--accent:#194d4d;--accent-foreground:#c6ecec;--destructive:#f92f57;--destructive-foreground:#fafafa;--border:#206060;--input:#206060;--ring:#6cc;--glass-bg:#0028284d;--glass-border:#96dcdc0d;--glass-shadow:#003c3c66;--avatar-filter:grayscale(100%)brightness(85%);--avatar-border-color:#96dcdcb3;--avatar-glow-color:#96dcdcb3;--aura-glow-color-1:#78dcdc26;--aura-glow-color-2:#96dcdc1a;--aura-glow-color-3:#64bebe0d;--glow-footer-bg:#78dcdc14;--glow-footer-border:#78dcdc1f;--glow-footer-shadow:#78dcdc26;--glow-footer-text:#c6ecec;--glow-footer-link-hover:#f7fcfc;--aura-purple:#399999;--aura-neon:#5cc;--aura-glow:#8ee;--aura-glass:#96dcdc12;--aura-border:#96dcdc40;--aura-shadow:0 8px 30px #78dcdc4d;--aura-purple-rgb:57,153,153;--accent-purple:#69c6c6;--accent-purple-dark:105,198,198;--accent-purple-light:#9be6e6;--accent-purple-light-alpha:#9be6e621}}*,h1,h2,h3,h4,h5,h6,p,span,strong,em,blockquote,li,input,button,textarea,select{font-family:var(--font-family);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);color:var(--foreground);background-color:#0000}.bg-card{background-color:var(--card);color:var(--card-foreground)}.bg-popover{background-color:var(--popover);color:var(--popover-foreground)}.border-border{border-color:var(--border)}input,textarea,select,button{background-color:var(--input);color:var(--foreground);border:1px solid var(--border);font-family:inherit;font-weight:inherit;letter-spacing:inherit;transition:all .2s}input:focus,textarea:focus,select:focus,button:focus{border-color:var(--ring);box-shadow:0 0 0 2px var(--ring);outline:none;transition:box-shadow .2s,border-color .2s}.card-header,.CardHeader{border-bottom:1px solid var(--border)}.card-title,.CardTitle{color:var(--primary-foreground);font-size:1.125rem;font-weight:600}.card-description,.CardDescription{color:var(--muted-foreground)}.text-primary{color:var(--primary)}.text-secondary{color:var(--secondary)}.text-muted{color:var(--muted)}.text-accent{color:var(--accent)}.text-destructive{color:var(--destructive)}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.bg-muted{background-color:var(--muted)}.bg-accent{background-color:var(--accent)}.bg-destructive{background-color:var(--destructive)}::-moz-selection{background-color:var(--selection-bg);color:var(--selection-color)}::selection{background-color:var(--selection-bg);color:var(--selection-color)}a,.link{color:var(--primary);text-decoration:none;transition:color .2s}a:hover,.link:hover{color:var(--accent)}hr{border:none;border-top:1px solid var(--border);margin:1.5em 0}blockquote{border-left:4px solid var(--accent);color:var(--muted-foreground);background-color:var(--muted);padding-left:1em}code,kbd,samp,pre{font-family:var(--font-family);background-color:var(--input);color:var(--foreground);border:1px solid var(--border);border-radius:var(--radius);padding:.2em .4em;font-size:.95em}pre{padding:1em;overflow:auto}table{border-collapse:collapse;background-color:var(--card);width:100%;color:var(--card-foreground)}th,td{border:1px solid var(--border);padding:.75em 1em}th{background-color:var(--secondary);color:var(--secondary-foreground)}select,input[type=checkbox],input[type=radio]{accent-color:var(--primary)}.badge,.tag{background-color:var(--secondary);color:var(--secondary-foreground);border-radius:var(--radius);padding:.25em .6em;font-size:.75rem;font-weight:500;display:inline-block}.tooltip{cursor:help;position:relative}.tooltip:hover:after{content:attr(data-tooltip);background-color:var(--popover);color:var(--popover-foreground);border-radius:var(--radius);white-space:nowrap;box-shadow:0 2px 10px var(--glass-shadow);z-index:1000;padding:.5em;position:absolute;bottom:125%;left:50%;transform:translate(-50%)}.modal-backdrop{background-color:var(--glass-bg);backdrop-filter:blur(4px);z-index:900;position:fixed;inset:0}.tab-list{border-bottom:1px solid var(--border);display:flex}.tab{cursor:pointer;color:var(--muted-foreground);padding:.75em 1.25em;transition:color .2s,border-bottom-color .2s}.tab[aria-selected=true]{color:var(--primary-foreground);border-bottom:2px solid var(--primary)}.breadcrumb{gap:.5em;list-style:none;display:flex}.breadcrumb li+li:before{content:"›";color:var(--muted-foreground)}.breadcrumb a{color:var(--primary)}.alert{border:1px solid var(--border);border-left-width:4px;border-left-color:var(--accent);background-color:var(--muted);color:var(--foreground);border-radius:var(--radius);padding:1em}.avatar{border:2px solid var(--avatar-border-color);width:48px;height:48px;filter:var(--avatar-filter);box-shadow:0 0 8px var(--avatar-glow-color);border-radius:50%}.border-1{border-width:1px}.border-2{border-width:2px}.border{border-color:var(--border)}.text-bg{background-color:var(--background)}.text-fg{color:var(--foreground)}.ripple{position:relative;overflow:hidden}.ripple:after{content:"";background:var(--glass-shadow);opacity:0;border-radius:50%;width:100px;height:100px;transition:transform .4s,opacity .8s;position:absolute;transform:scale(0)}.ripple:active:after{opacity:.3;transition:all;transform:scale(2)}html,body,.light,.dark,.aura{background-color:var(--background);color:var(--foreground);font-family:var(--font-family);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);scroll-behavior:smooth;-webkit-font-smoothing:antialiased;transition:background-color .3s,color .3s}.font-serif{font-family:Playfair Display,serif}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--background)}::-webkit-scrollbar-thumb{background:var(--muted);border-radius:4px;-webkit-transition:background-color .2s;transition:background-color .2s}::-webkit-scrollbar-thumb:hover{background:var(--muted-foreground)}.text-gradient{color:#0000;-webkit-background-clip:text;background-clip:text}.aura-bg{position:relative;overflow:hidden}.aura-bg:before{content:"";background:radial-gradient(circle,var(--aura-glow-color-1)0%,var(--aura-glow-color-2)25%,var(--aura-glow-color-3)50%,#0000 75%);z-index:-1;width:300%;height:300%;animation:10s ease-in-out infinite aura-glow;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes aura-glow{0%,to{filter:blur(10px)opacity(.8);background:radial-gradient(circle,var(--primary),transparent)}50%{filter:blur(20px)opacity();background:radial-gradient(circle,var(--accent),transparent)}}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}div[style*="position: fixed"][style*="inset: 3.5rem"]{display:none!important}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}