@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');

:root {
  --neon-blue: #0ff;
  --neon-pink: #f0f;
  --neon-purple: #b967ff;
  --dark-bg: #0f0f1a;
  --darker-bg: #0a0a12;
  --card-bg: rgba(20, 20, 35, 0.95);
  --text-primary: #fff;
  --text-secondary: #a0a0c0;
  --border-radius: 12px;
  --neon-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
  --pink-shadow: 0 0 20px rgba(255, 0, 255, 0.2);
}

/* Base & Typography */
body {
  background: var(--dark-bg);
  color: var(--text-primary);
  font-family: 'Audiowide', cursive;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Audiowide', cursive;
  color: var(--text-primary);
  text-shadow: 0 0 10px var(--neon-blue);
}

/* Headers */
.main-header, .profile-header {
  background: linear-gradient(45deg, var(--darker-bg), var(--dark-bg)) !important;
  border-bottom: 2px solid var(--neon-blue);
  box-shadow: var(--neon-shadow);
  position: relative;
  overflow: hidden;
}

.main-header::before, .profile-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, rgba(0, 255, 255, 0.1), rgba(255, 0, 255, 0.1));
  z-index: 1;
}

/* Cards & Sections */
.bg-white, .card, .comments-section, .comment-form {
  background: var(--card-bg) !important;
  border: 1px solid var(--neon-blue) !important;
  box-shadow: var(--neon-shadow) !important;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.bg-white:hover {
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.3) !important;
  transform: translateY(-2px);
}

/* Text & Colors */
.text-gray-500, .text-gray-600, .text-gray-700 { color: var(--text-secondary) !important; }
.text-gray-900 { color: var(--text-primary) !important; }
.bg-white p, .bg-white div { color: var(--text-primary) !important; }

/* Links & Buttons */
a {
  color: var(--neon-pink) !important;
  text-shadow: 0 0 5px var(--neon-pink);
  transition: all 0.3s ease;
}

a:hover {
  color: #ff00aa !important;
  text-shadow: 0 0 10px var(--neon-pink);
}

.btn, .bg-\[\#B39B63\], .comment-form .submit-button {
  background: var(--neon-pink) !important;
  border: 1px solid #ff00aa !important;
  box-shadow: var(--pink-shadow) !important;
  color: white !important;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.btn:hover, .bg-\[\#B39B63\]:hover, .comment-form .submit-button:hover {
  background: #ff00aa !important;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.4) !important;
  transform: translateY(-2px);
}

/* Forms & Inputs */
input[type="text"], textarea, select, .comment-form textarea {
  background: rgba(15, 15, 26, 0.8) !important;
  border: 1px solid var(--neon-blue) !important;
  color: var(--text-primary) !important;
  transition: all 0.3s ease;
}

input[type="text"]:focus, textarea:focus, select:focus, .comment-form textarea:focus {
  box-shadow: 0 0 15px var(--neon-blue) !important;
  outline: none;
}

/* Comments */
.comment {
  background: rgba(15, 15, 26, 0.8) !important;
  border: 1px solid rgba(0, 255, 255, 0.2) !important;
  border-radius: var(--border-radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

.comment-header {
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

.comment-author { color: var(--neon-pink) !important; }
.comment-timestamp { color: var(--neon-blue) !important; opacity: 0.8; }
.comment-content { color: var(--text-primary) !important; line-height: 1.6; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--darker-bg); }
::-webkit-scrollbar-thumb {
  background: var(--neon-blue);
  border-radius: 5px;
  box-shadow: 0 0 10px var(--neon-blue);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--neon-pink);
  box-shadow: 0 0 10px var(--neon-pink);
}

/* Animations */
@keyframes neon-pulse {
  0%, 100% { text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue); }
  50% { text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue); }
}

.profile-header h1 { animation: neon-pulse 2s infinite; }