/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Import Orbitron font family */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Orbitron', monospace;
  font-weight: 400;
  background: linear-gradient(135deg, #0a0e27 0%, #1a1b3a 25%, #2d1b69 50%, #667eea 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
  line-height: 1.6;
  letter-spacing: 0.5px;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  --mouse-x: 0px;
  --mouse-y: 0px;
}

/* Mobile Navigation */
.mobile-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Top bar with hamburger and logo */
.nav-top-bar {
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

/* Hamburger button */
.hamburger-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
  color: #ffffff;
  font-size: 1.4rem;
}

.hamburger-btn:active {
  transform: scale(0.95);
}

.hamburger-btn i {
  --fa-primary-color: #ffffff;
  --fa-secondary-color: #667eea;
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.hamburger-btn.active i {
  transform: rotate(90deg);
  --fa-primary-color: #667eea;
  --fa-secondary-color: #ffffff;
}

/* Top bar logo */
.nav-logo {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-logo i {
  font-size: 1.6rem;
  --fa-primary-color: #667eea;
  --fa-secondary-color: #764ba2;
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Sliding menu */
.nav-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: 999;
}

.nav-menu.open {
  transform: translateX(0);
}

.nav-menu-content {
  width: 280px;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  transform: translateX(-20px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.1s;
}

.nav-menu.open .nav-menu-content {
  transform: translateX(0);
  opacity: 1;
}

/* Menu header */
.nav-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-logo-large {
  font-size: 2.2rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 3px;
  text-align: center;
  background: linear-gradient(45deg, #fff, #667eea, #fff);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s ease-in-out infinite;
}

/* Navigation links */
.nav-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  color: #ffffff;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
  transition: left 0.5s ease;
}

.nav-link:hover::before {
  left: 100%;
}

.nav-link:hover {
  background: rgba(102, 126, 234, 0.2);
  transform: translateX(4px);
}

.nav-icon {
  font-size: 1.2rem;
  width: 28px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-icon i {
  --fa-primary-color: #ffffff;
  --fa-secondary-color: #667eea;
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 0.6;
}

.nav-link:hover .nav-icon i {
  --fa-secondary-color: #764ba2;
  animation: pulse 0.5s ease;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.logout-btn .nav-icon i {
  --fa-primary-color: #ffcdd2;
  --fa-secondary-color: #f44336;
}

/* Brand icon in logo */
.nav-logo-large i {
  margin-right: 0.5rem;
  font-size: 2.2rem;
  vertical-align: middle;
  --fa-primary-color: #667eea;
  --fa-secondary-color: #764ba2;
}

/* User info icons */
.user-email i {
  margin-right: 0.5rem;
  font-size: 0.9rem;
  --fa-primary-color: rgba(255, 255, 255, 0.9);
  --fa-secondary-color: #667eea;
  --fa-secondary-opacity: 0.4;
}

.user-role-badge i {
  margin-right: 0.4rem;
  font-size: 0.75rem;
  vertical-align: middle;
}

/* User card footer */
.nav-footer {
  margin-top: auto;
  padding-top: 1.5rem;
}

.nav-user-info {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1rem;
  margin-bottom: 1rem;
  backdrop-filter: blur(10px);
}

.user-email {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  word-break: break-word;
}

.user-email i {
  font-size: 1.2rem;
  flex-shrink: 0;
  --fa-primary-color: #ffffff;
  --fa-secondary-color: #667eea;
  --fa-secondary-opacity: 0.5;
}

.user-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.user-role-badge i {
  font-size: 0.85rem;
}

.profile-settings-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.2);
  border-radius: 8px;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.profile-settings-link:hover {
  background: rgba(102, 126, 234, 0.2);
  border-color: rgba(102, 126, 234, 0.4);
  transform: translateY(-1px);
}

.profile-settings-link i {
  font-size: 0.9rem;
  --fa-primary-color: #ffffff;
  --fa-secondary-color: #667eea;
}

.logout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.875rem;
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.15), rgba(244, 67, 54, 0.05));
  border: 1px solid rgba(244, 67, 54, 0.3);
  border-radius: 12px;
  color: #ffcdd2;
  font-family: 'Orbitron', monospace;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.logout-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(244, 67, 54, 0.1), transparent);
  transition: left 0.6s ease;
}

.logout-btn:hover::before {
  left: 100%;
}

.logout-btn:hover {
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.25), rgba(244, 67, 54, 0.1));
  border-color: rgba(244, 67, 54, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.2);
}

.alert {
  padding: 1rem 2rem;
  margin: 0;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.alert i {
  font-size: 1.2rem;
}

.alert-success {
  background: rgba(76, 175, 80, 0.2);
  color: #a5d6a7;
  border-bottom: 1px solid rgba(76, 175, 80, 0.3);
}

.alert-success i {
  --fa-primary-color: #4caf50;
  --fa-secondary-color: #81c784;
}

.alert-danger {
  background: rgba(244, 67, 54, 0.2);
  color: #ef9a9a;
  border-bottom: 1px solid rgba(244, 67, 54, 0.3);
}

.alert-danger i {
  --fa-primary-color: #f44336;
  --fa-secondary-color: #e57373;
}

.main-content {
  margin: 0;
  padding: 0;
  background: transparent;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  letter-spacing: 1px;
}

h1 { font-weight: 800; letter-spacing: 2px; }
h2 { font-weight: 700; letter-spacing: 1.5px; }
h3 { font-weight: 600; letter-spacing: 1px; }

/* Form and button styling */
input, textarea, select {
  font-family: 'Orbitron', monospace;
  font-weight: 500;
  letter-spacing: 0.5px;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  border: 1px solid #e5e5e7;
}

button, .btn {
  font-family: 'Orbitron', monospace;
  font-weight: 600;
  letter-spacing: 0.75px;
  border-radius: 4px;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

table {
  font-weight: 500;
  letter-spacing: 0.3px;
}

th {
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.container, .content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Global starfield background for all pages */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    /* Large bright stars */
    radial-gradient(3px 3px at 20% 30%, #fff, transparent),
    radial-gradient(2px 2px at 40% 70%, #fff, transparent),
    radial-gradient(3px 3px at 90% 40%, #fff, transparent),
    radial-gradient(2px 2px at 50% 50%, #fff, transparent),
    radial-gradient(3px 3px at 75% 15%, #fff, transparent),
    radial-gradient(2px 2px at 15% 85%, #fff, transparent),
    radial-gradient(4px 4px at 10% 60%, #fff, transparent),
    radial-gradient(3px 3px at 85% 75%, #fff, transparent),
    radial-gradient(2px 2px at 35% 25%, #fff, transparent),
    radial-gradient(3px 3px at 65% 80%, #fff, transparent),
    
    /* Medium colored stars */
    radial-gradient(2px 2px at 25% 25%, #667eea, transparent),
    radial-gradient(2px 2px at 75% 75%, #764ba2, transparent),
    radial-gradient(2px 2px at 80% 20%, #667eea, transparent),
    radial-gradient(2px 2px at 30% 80%, #764ba2, transparent),
    radial-gradient(2px 2px at 45% 35%, #667eea, transparent),
    radial-gradient(2px 2px at 85% 65%, #764ba2, transparent),
    radial-gradient(2px 2px at 15% 45%, #667eea, transparent),
    radial-gradient(2px 2px at 55% 90%, #764ba2, transparent),
    radial-gradient(2px 2px at 95% 25%, #667eea, transparent),
    radial-gradient(2px 2px at 25% 95%, #764ba2, transparent),
    
    /* Small scattered stars */
    radial-gradient(1px 1px at 60% 15%, #fff, transparent),
    radial-gradient(1px 1px at 12% 45%, #fff, transparent),
    radial-gradient(1px 1px at 88% 55%, #fff, transparent),
    radial-gradient(1px 1px at 32% 12%, #fff, transparent),
    radial-gradient(1px 1px at 78% 88%, #fff, transparent),
    radial-gradient(1px 1px at 22% 68%, #fff, transparent),
    radial-gradient(1px 1px at 92% 32%, #fff, transparent),
    radial-gradient(1px 1px at 42% 78%, #fff, transparent),
    radial-gradient(1px 1px at 68% 22%, #fff, transparent),
    radial-gradient(1px 1px at 8% 82%, #fff, transparent),
    radial-gradient(1px 1px at 98% 8%, #fff, transparent),
    radial-gradient(1px 1px at 52% 48%, #fff, transparent),
    radial-gradient(1px 1px at 18% 28%, #fff, transparent),
    radial-gradient(1px 1px at 82% 68%, #fff, transparent),
    radial-gradient(1px 1px at 38% 58%, #fff, transparent),
    radial-gradient(1px 1px at 72% 38%, #fff, transparent),
    radial-gradient(1px 1px at 28% 72%, #fff, transparent),
    radial-gradient(1px 1px at 58% 82%, #fff, transparent),
    radial-gradient(1px 1px at 88% 18%, #fff, transparent),
    radial-gradient(1px 1px at 48% 8%, #fff, transparent),
    
    /* Tiny distant stars */
    radial-gradient(1px 1px at 33% 67%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 67% 33%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 83% 17%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 17% 83%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 93% 47%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 7% 53%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 47% 93%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 53% 7%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 77% 23%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 23% 77%, rgba(255, 255, 255, 0.8), transparent),
    
    /* Additional scattered stars */
    radial-gradient(1px 1px at 11% 33%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 89% 77%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 44% 11%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 66% 89%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 22% 56%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 78% 44%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 56% 22%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 34% 78%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 91% 9%, #fff, transparent),
    radial-gradient(1px 1px at 9% 91%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 71% 29%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 29% 71%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 86% 14%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 14% 86%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 61% 39%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 39% 61%, rgba(255, 255, 255, 0.9), transparent),
    
    /* More colored accent stars */
    radial-gradient(1px 1px at 73% 27%, rgba(102, 126, 234, 0.8), transparent),
    radial-gradient(1px 1px at 27% 73%, rgba(118, 75, 162, 0.8), transparent),
    radial-gradient(1px 1px at 19% 19%, rgba(102, 126, 234, 0.7), transparent),
    radial-gradient(1px 1px at 81% 81%, rgba(118, 75, 162, 0.7), transparent);
  background-size: 
    1200px 1000px, 1000px 800px, 800px 600px, 600px 500px,
    900px 700px, 700px 600px, 500px 400px, 600px 500px,
    400px 350px, 350px 300px,
    800px 700px, 600px 550px, 400px 350px, 300px 250px,
    500px 450px, 450px 400px, 350px 300px, 250px 200px,
    200px 180px, 180px 160px,
    300px 250px, 250px 200px, 200px 180px, 180px 160px,
    160px 140px, 140px 120px, 120px 100px, 100px 90px,
    90px 80px, 80px 70px, 70px 60px, 60px 50px,
    50px 45px, 45px 40px, 40px 35px, 35px 30px,
    30px 28px, 28px 25px, 25px 23px, 23px 20px,
    100px 90px, 90px 80px, 80px 70px, 70px 60px,
    60px 55px, 55px 50px, 50px 45px, 45px 40px,
    40px 38px, 38px 35px,
    85px 75px, 75px 65px, 65px 55px, 55px 45px,
    45px 40px, 40px 35px, 35px 30px, 30px 25px,
    120px 100px, 25px 22px, 22px 20px, 20px 18px,
    18px 16px, 16px 14px, 14px 12px, 12px 10px,
    110px 95px, 95px 85px, 85px 75px, 75px 65px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  animation: 
    starfield-drift 200s linear infinite,
    starfield-twinkle 4s ease-in-out infinite alternate;
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}

/* Shooting star that crosses the screen every 60 seconds */
body::after {
  content: '';
  position: fixed;
  top: 20%;
  left: -50px;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0.9) 20%, rgba(102, 126, 234, 0.6) 40%, transparent 70%);
  border-radius: 50%;
  box-shadow: 
    -20px 10px 15px rgba(255, 255, 255, 0.3),
    -40px 20px 25px rgba(102, 126, 234, 0.2),
    -60px 30px 35px rgba(118, 75, 162, 0.1),
    0 0 25px #ffffff,
    0 0 50px rgba(102, 126, 234, 0.6),
    0 0 75px rgba(102, 126, 234, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  animation: shootingStar 60s linear infinite;
}

@keyframes shootingStar {
  0% { 
    left: -50px; 
    top: 20%; 
    opacity: 0; 
    transform: scale(0.5) rotate(0deg);
  }
  2% { 
    opacity: 1; 
    transform: scale(1) rotate(45deg);
  }
  5% { 
    left: 120vw; 
    top: 80%; 
    opacity: 1; 
    transform: scale(1.2) rotate(45deg);
  }
  6% { 
    opacity: 0; 
    transform: scale(0.8) rotate(45deg);
  }
  100% { 
    left: 120vw; 
    top: 80%; 
    opacity: 0; 
    transform: scale(0.5) rotate(45deg);
  }
}

@keyframes starfield-drift {
  0% { 
    transform: translateX(0) translateY(0) translateZ(0) rotate(0deg); 
  }
  100% { 
    transform: translateX(-50px) translateY(-100px) translateZ(0) rotate(360deg); 
  }
}

@keyframes starfield-twinkle {
  0% { opacity: 0.3; }
  100% { opacity: 0.7; }
}

/* Navbar adjustments for dark theme */
.navbar {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-logo {
  color: #ffffff;
}

.nav-link {
  color: #ffffff;
}

.nav-link:hover {
  color: #667eea;
}

.btn-logout {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-logout:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.8);
}

/* Alert styling for dark theme */
.alert-success {
  background: rgba(76, 175, 80, 0.2);
  color: #a5d6a7;
  border-bottom: 1px solid rgba(76, 175, 80, 0.3);
}

.alert-danger {
  background: rgba(244, 67, 54, 0.2);
  color: #ef9a9a;
  border-bottom: 1px solid rgba(244, 67, 54, 0.3);
}

/* Form styling for dark theme */
input, textarea, select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

input:focus, textarea:focus, select:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: #667eea;
  outline: none;
}

button, .btn {
  background: rgba(102, 126, 234, 0.3);
  color: #ffffff;
  border: 1px solid rgba(102, 126, 234, 0.5);
}

button:hover, .btn:hover {
  background: rgba(102, 126, 234, 0.5);
  border-color: #667eea;
}

/* Table styling for dark theme */
table {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  overflow: hidden;
}

th {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Content area styling */
.main-content {
  background: transparent;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
}

/* Add top padding when user is signed in to account for fixed nav */
body:has(.mobile-navbar) {
  padding-top: 60px;
}

/* Fallback for browsers that don't support :has() */
.logged-in-body {
  padding-top: 60px;
}

/* Page content containers should be transparent */
.container, .content, .web3-landing {
  background: transparent !important;
  margin: 0 !important;
  padding: 2rem !important;
}

/* Ensure all page containers are transparent */
div, section, main, article {
  background: transparent;
}

/* Content cards for better readability when needed */
.content-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  margin: 1rem auto;
  max-width: 1200px;
}