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

:root {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
  --dark-gradient: linear-gradient(135deg, #1a1c2e 0%, #2d3561 50%, #3d4e8a 100%);
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
}

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

body {
  font-family: 'Inter', sans-serif;
  background: #0a0a15;
  color: #e2e8f0;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(255, 219, 98, 0.2) 0%, transparent 50%);
  z-index: -1;
  animation: floatingGradient 20s ease-in-out infinite;
}

@keyframes floatingGradient {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-20px, -20px) rotate(1deg); }
  66% { transform: translate(20px, -10px) rotate(-1deg); }
}

.orbitron {
  font-family: 'Orbitron', monospace;
}

.glass-3d {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform-style: preserve-3d;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-3d:hover {
  transform: translateY(-5px) rotateX(5deg);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.neon-text {
  text-shadow: 
    0 0 20px rgba(102, 126, 234, 0.5),
    0 0 40px rgba(102, 126, 234, 0.3);
}

.gradient-text {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.floating-card {
  animation: float 6s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotateX(0deg); }
  50% { transform: translateY(-20px) rotateX(2deg); }
}

.cyber-button {
  position: relative;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border: none;
  overflow: hidden;
  transition: all 0.3s;
}

.cyber-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.cyber-button:hover::before {
  left: 100%;
}

.cyber-button:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
}

.year-card {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  overflow: hidden;
}

.year-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(102, 126, 234, 0.5) 90deg,
    transparent 120deg,
    rgba(118, 75, 162, 0.5) 210deg,
    transparent 240deg,
    rgba(240, 147, 251, 0.5) 330deg,
    transparent 360deg
  );
  animation: rotate 4s linear infinite;
  opacity: 0;
  transition: opacity 0.3;
}

.year-card:hover::before {
  opacity: 1;
}

.year-card:hover {
  transform: translateY(-10px) rotateY(5deg) scale(1.02);
  border-color: rgba(102, 126, 234, 0.6);
}

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

.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: particleFloat 20s linear infinite;
}

@keyframes particleFloat {
  0% {
    transform: translateY(100vh) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(100px);
    opacity: 0;
  }
}

/* Notes specific styles */
.note-item {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.note-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  border-color: rgba(102, 126, 234, 0.4);
}

.note-title {
  color: #f1f5f9;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 8px;
  display: block;
}

.note-subject {
  color: #94a3b8;
  font-size: 0.9rem;
  margin-bottom: 12px;
  display: block;
}

.note-link {
  color: #60a5fa;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}

.note-link:hover {
  color: #3b82f6;
}

.note-link i {
  font-size: 0.9rem;
}

/* Search input styles */
.search-input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
  border-radius: 8px;
  padding: 12px 16px;
  width: 100%;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: rgba(102, 126, 234, 0.5);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-input::placeholder {
  color: #94a3b8;
}

/* Subject card styles */
.subject-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 20px;
  text-align: left;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  cursor: pointer;
}

.subject-card:hover {
  transform: translateY(-6px) rotateX(3deg) scale(1.03);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-color: rgba(102, 126, 234, 0.5);
}

.subject-name {
  color: #f1f5f9;
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: 6px;
}

.subject-description {
  color: #94a3b8;
  font-size: 0.85rem;
}

/* Chapter section styles */
.chapter-section {
  margin-bottom: 24px;
}

.chapter-title {
  color: #e2e8f0;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Loading and error states */
.loading {
  color: #94a3b8;
  text-align: center;
  padding: 20px;
  font-style: italic;
}

.error {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}

.no-notes {
  color: #94a3b8;
  text-align: center;
  padding: 32px;
  font-style: italic;
}

/* Year and Subject Display Styles */
.year-badge {
  color: #1e40af;
  font-weight: 700;
  font-size: 0.75rem;
  background: rgba(99, 102, 241, 0.2);
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(99, 102, 241, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.subject-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.subject-list-item {
  color: #e2e8f0;
  font-size: 0.95rem;
  padding: 8px 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.year-header {
  color: #ffffff;
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: 16px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.drive-subject {
  color: #ffffff;
  font-weight: 600;
  font-size: 1rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Year Card Button Styles - Enhanced Eye-Catching Design */
.year-card-button {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95), 
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.85));
  backdrop-filter: blur(25px);
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 24px;
  text-align: left;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 8px 20px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  position: relative;
  overflow: hidden;
}

.year-card-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(99, 102, 241, 0.1),
    rgba(168, 85, 247, 0.05),
    rgba(236, 72, 153, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 16px;
}

.year-card-button::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(99, 102, 241, 0.3) 45deg,
    transparent 90deg,
    rgba(168, 85, 247, 0.3) 135deg,
    transparent 180deg,
    rgba(236, 72, 153, 0.3) 225deg,
    transparent 270deg,
    rgba(99, 102, 241, 0.3) 315deg,
    transparent 360deg
  );
  animation: rotate 8s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 50%;
}

.year-card-button:hover {
  transform: translateY(-8px) scale(1.03) rotateX(2deg) rotateY(1deg);
  box-shadow: 
    0 30px 60px rgba(0, 0, 0, 0.25),
    0 15px 30px rgba(0, 0, 0, 0.15),
    0 5px 15px rgba(99, 102, 241, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(99, 102, 241, 0.3);
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.9));
}

.year-card-button:hover::before {
  opacity: 1;
}

.year-card-button:hover::after {
  opacity: 0.6;
}

.year-title {
  color: #000000;
  font-weight: 900;
  font-size: 1.4rem;
  margin-bottom: 12px;
  text-shadow: 
    0 0 12px rgba(255, 255, 255, 1),
    0 0 20px rgba(255, 255, 255, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.9);
  background: linear-gradient(135deg, 
    rgba(204, 61, 61, 0.3),
    rgba(255, 255, 255, 0.1));
  padding: 8px 12px;
  border-radius: 8px;
  display: inline-block;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.year-title:hover {
  transform: scale(1.05);
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.2));
}

.year-badge {
  color: #000000;
  font-weight: 900;
  font-size: 0.85rem;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.4));
  padding: 4px 10px;
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0.8);
  text-shadow: 
    0 0 8px rgba(255, 255, 255, 1),
    0 0 16px rgba(255, 255, 255, 0.8),
    0 0 24px rgba(255, 255, 255, 0.6);
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  animation: pulse 2s ease-in-out infinite;
}

.year-badge:hover {
  transform: scale(1.1);
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.5));
  border-color: rgba(0, 0, 0, 0.9);
}

.year-subjects {
  color: #000000;
  font-size: 0.9rem;
  line-height: 1.6;
  font-weight: 600;
  text-shadow: 
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 16px rgba(255, 255, 255, 0.7),
    0 1px 3px rgba(0, 0, 0, 0.8);
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.1));
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 12px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.year-subjects:hover {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.15));
  transform: translateY(-2px);
}

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

/* Enhanced overall UI improvements */
body {
  background: linear-gradient(135deg, #0a0a15 0%, #1a1c2e 50%, #0f0f1e 100%);
  position: relative;
}

body::before {
  background: 
    radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.6) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.6) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(236, 72, 153, 0.5) 0%, transparent 50%),
    radial-gradient(circle at 60% 70%, rgba(34, 197, 94, 0.4) 0%, transparent 50%);
  animation: floatingGradient 25s ease-in-out infinite;
}

/* Enhanced glass effects */
.glass-3d {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.15), 
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.4),
    0 6px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

.glass-3d::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(99, 102, 241, 0.2) 90deg,
    transparent 120deg,
    rgba(168, 85, 247, 0.2) 210deg,
    transparent 240deg,
    rgba(236, 72, 153, 0.2) 330deg,
    transparent 360deg
  );
  animation: rotate 15s linear infinite;
  opacity: 0.3;
}

.glass-3d:hover {
  transform: translateY(-8px) rotateX(3deg) rotateY(1deg);
  box-shadow: 
    0 30px 60px rgba(0, 0, 0, 0.5),
    0 12px 30px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.glass-3d:hover::before {
  opacity: 0.5;
  animation-duration: 8s;
}

/* Enhanced floating animation */
.floating-card {
  animation: float 10s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes float {
  0%, 100% { 
    transform: translateY(0px) rotateX(0deg) rotateY(0deg); 
  }
  25% { 
    transform: translateY(-20px) rotateX(3deg) rotateY(2deg); 
  }
  50% { 
    transform: translateY(-35px) rotateX(2deg) rotateY(-2deg); 
  }
  75% { 
    transform: translateY(-20px) rotateX(-2deg) rotateY(3deg); 
  }
}

/* Year Section Button Styles - Drive Config Generated */
.year-button,
#years .year-button {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95), 
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.85)) !important;
  backdrop-filter: blur(25px);
  border: 2px solid transparent !important;
  border-radius: 16px;
  padding: 20px;
  text-align: left;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.2),
    0 6px 15px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.year-button::before,
#years .year-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.1),
    rgba(147, 51, 234, 0.05),
    rgba(236, 72, 153, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 16px;
}

.year-button::after,
#years .year-button::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(59, 130, 246, 0.3) 45deg,
    transparent 90deg,
    rgba(147, 51, 234, 0.3) 135deg,
    transparent 180deg,
    rgba(236, 72, 153, 0.3) 225deg,
    transparent 270deg,
    rgba(59, 130, 246, 0.3) 315deg,
    transparent 360deg
  );
  animation: rotate 10s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 50%;
}

.year-button:hover,
#years .year-button:hover {
  transform: translateY(-10px) scale(1.05) rotateX(3deg) rotateY(2deg);
  box-shadow: 
    0 35px 70px rgba(0, 0, 0, 0.3),
    0 18px 35px rgba(0, 0, 0, 0.2),
    0 8px 20px rgba(59, 130, 246, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(59, 130, 246, 0.4) !important;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.9)) !important;
}

.year-button:hover::before,
#years .year-button:hover::before {
  opacity: 1;
}

.year-button:hover::after,
#years .year-button:hover::after {
  opacity: 0.7;
  animation-duration: 5s;
}

/* Year button title styling - MAXIMUM VISIBILITY */
.year-title,
#years .year-title,
.year-button .year-title,
#years .year-button .year-title {
  color: #000000 !important;
  font-weight: 900 !important;
  font-size: 1.3rem !important;
  text-shadow: 
    0 0 12px rgba(255, 255, 255, 1),
    0 0 20px rgba(255, 255, 255, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.9) !important;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.2),
    rgba(255, 255, 255, 0.1)) !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  display: inline-block !important;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.year-button:hover .year-title,
#years .year-button:hover .year-title {
  transform: scale(1.05);
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.3),
    rgba(255, 255, 255, 0.2)) !important;
}

/* Year button badge styling - MAXIMUM VISIBILITY */
.year-badge,
#years .year-badge,
.year-button .year-badge,
#years .year-button .year-badge {
  color: #000000 !important;
  font-weight: 900 !important;
  font-size: 0.8rem !important;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.3),
    rgba(255, 255, 255, 0.4)) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(0, 0, 0, 0.8) !important;
  text-shadow: 
    0 0 8px rgba(255, 255, 255, 1),
    0 0 16px rgba(255, 255, 255, 0.8),
    0 0 24px rgba(255, 255, 255, 0.6) !important;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  animation: yearPulse 2.5s ease-in-out infinite;
}

.year-button:hover .year-badge,
#years .year-button:hover .year-badge {
  transform: scale(1.1);
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.4),
    rgba(255, 255, 255, 0.5)) !important;
  border-color: rgba(0, 0, 0, 0.9) !important;
}

/* Year button subjects styling - MAXIMUM VISIBILITY */
.year-subjects,
#years .year-subjects,
.year-button .year-subjects,
#years .year-button .year-subjects {
  color: #000000 !important;
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
  font-weight: 600 !important;
  text-shadow: 
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 16px rgba(255, 255, 255, 0.7),
    0 1px 3px rgba(0, 0, 0, 0.8) !important;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.1),
    rgba(255, 255, 255, 0.1)) !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0, 0, 0, 0.6) !important;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.year-button:hover .year-subjects,
#years .year-button:hover .year-subjects {
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.2),
    rgba(255, 255, 255, 0.15)) !important;
  transform: translateY(-2px);
}

/* Fallback styles for any remaining text */
#years button,
#years button * {
  color: #000000 !important;
  font-weight: 600 !important;
}

#years button .flex,
#years button .flex * {
  color: #000000 !important;
}

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

/* Notes Section Styling - Maximum Visibility */
#notes,
#notes * {
  color: #000000 !important;
}

/* Subject Button Styling */
.subject-button {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95), 
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.85)) !important;
  backdrop-filter: blur(25px);
  border: 2px solid transparent !important;
  border-radius: 16px;
  padding: 16px;
  text-align: left;
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.subject-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.1),
    rgba(147, 51, 234, 0.05),
    rgba(236, 72, 153, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 16px;
}

.subject-button:hover {
  transform: translateY(-6px) scale(1.02) rotateX(2deg);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.2),
    0 8px 20px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(59, 130, 246, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(59, 130, 246, 0.3) !important;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.9)) !important;
}

.subject-button:hover::before {
  opacity: 1;
}

/* Subject Name Styling */
.subject-name {
  color: #000000 !important;
  font-weight: 900 !important;
  font-size: 1.1rem !important;
  text-shadow: 
    0 0 8px rgba(255, 255, 255, 1),
    0 0 16px rgba(255, 255, 255, 0.8),
    0 2px 3px rgba(0, 0, 0, 0.9) !important;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.15),
    rgba(255, 255, 255, 0.1)) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.subject-button:hover .subject-name {
  transform: scale(1.03);
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.25),
    rgba(255, 255, 255, 0.15)) !important;
}

/* Subject Action Styling */
.subject-action {
  color: #000000 !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  text-shadow: 
    0 0 6px rgba(255, 255, 255, 1),
    0 0 12px rgba(255, 255, 255, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.8) !important;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.2),
    rgba(255, 255, 255, 0.3)) !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 0, 0, 0.6) !important;
  display: inline-block !important;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.subject-button:hover .subject-action {
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.3),
    rgba(255, 255, 255, 0.4)) !important;
  transform: scale(1.05);
}

/* File Link Styling */
.file-link {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95), 
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.85)) !important;
  backdrop-filter: blur(20px);
  border: 2px solid transparent !important;
  border-radius: 12px;
  padding: 16px;
  text-decoration: none;
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.file-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.08),
    rgba(147, 51, 234, 0.04),
    rgba(236, 72, 153, 0.04));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 12px;
}

.file-link:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 
    0 15px 30px rgba(0, 0, 0, 0.15),
    0 6px 15px rgba(0, 0, 0, 0.1),
    0 3px 8px rgba(59, 130, 246, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  border: 2px solid rgba(59, 130, 246, 0.3) !important;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.9)) !important;
  text-decoration: none !important;
}

.file-link:hover::before {
  opacity: 1;
}

/* File Name Styling */
.file-name {
  color: #000000 !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  text-shadow: 
    0 0 6px rgba(255, 255, 255, 1),
    0 0 12px rgba(255, 255, 255, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.8) !important;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.1),
    rgba(255, 255, 255, 0.05)) !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  display: block !important;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.file-link:hover .file-name {
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.15),
    rgba(255, 255, 255, 0.1)) !important;
}

/* File Subject Styling */
.file-subject {
  color: #000000 !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  text-shadow: 
    0 0 4px rgba(255, 255, 255, 1),
    0 0 8px rgba(255, 255, 255, 0.8),
    0 1px 1px rgba(0, 0, 0, 0.7) !important;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.08),
    rgba(255, 255, 255, 0.05)) !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  display: block !important;
  margin-top: 4px !important;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.file-link:hover .file-subject {
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.12),
    rgba(255, 255, 255, 0.08)) !important;
}

/* File Action Styling */
.file-action {
  color: #000000 !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  text-shadow: 
    0 0 4px rgba(255, 255, 255, 1),
    0 0 8px rgba(255, 255, 255, 0.8),
    0 1px 1px rgba(0, 0, 0, 0.7) !important;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.15),
    rgba(255, 255, 255, 0.2)) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(0, 0, 0, 0.5) !important;
  display: inline-block !important;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  flex-shrink: 0 !important;
}

.file-link:hover .file-action {
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.2),
    rgba(255, 255, 255, 0.25)) !important;
  transform: scale(1.05);
}

/* Chapter Header Styling */
#notes h4 {
  color: #000000 !important;
  font-weight: 900 !important;
  font-size: 1.1rem !important;
  text-shadow: 
    0 0 8px rgba(255, 255, 255, 1),
    0 0 16px rgba(255, 255, 255, 0.8),
    0 2px 3px rgba(0, 0, 0, 0.9) !important;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.1),
    rgba(255, 255, 255, 0.05)) !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  margin-bottom: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

/* Notes Header Styling */
#notes .text-sm {
  color: #000000 !important;
  font-weight: 700 !important;
  text-shadow: 
    0 0 6px rgba(255, 255, 255, 1),
    0 0 12px rgba(255, 255, 255, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.8) !important;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.08),
    rgba(255, 255, 255, 0.05)) !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

/* Search Input Styling */
#notes input {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.8)) !important;
  border: 2px solid rgba(59, 130, 246, 0.3) !important;
  color: #000000 !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

#notes input::placeholder {
  color: #000000 !important;
  opacity: 0.6 !important;
}

#notes input:focus {
  outline: none !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
  box-shadow: 
    0 0 0 3px rgba(59, 130, 246, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* Loading and Error Messages */
#notes .p-4 {
  color: #000000 !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.8)) !important;
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-radius: 8px !important;
  text-shadow: 
    0 0 4px rgba(255, 255, 255, 1),
    0 0 8px rgba(255, 255, 255, 0.8) !important;
}

#notes .text-red-600 {
  color: #dc2626 !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, 
    rgba(254, 226, 226, 0.9),
    rgba(254, 202, 202, 0.8)) !important;
  border: 1px solid rgba(220, 38, 38, 0.3) !important;
}

/* Fallback for any remaining elements */
#notes button,
#notes button *,
#notes a,
#notes a *,
#notes div,
#notes span {
  color: #000000 !important;
}

/* Drive Config Generated Button Styles */
.drive-button {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95), 
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.85));
  backdrop-filter: blur(25px);
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 20px;
  text-align: left;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.2),
    0 6px 15px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.drive-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.1),
    rgba(147, 51, 234, 0.05),
    rgba(236, 72, 153, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 16px;
}

.drive-button::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(59, 130, 246, 0.3) 45deg,
    transparent 90deg,
    rgba(147, 51, 234, 0.3) 135deg,
    transparent 180deg,
    rgba(236, 72, 153, 0.3) 225deg,
    transparent 270deg,
    rgba(59, 130, 246, 0.3) 315deg,
    transparent 360deg
  );
  animation: rotate 10s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 50%;
}

.drive-button:hover {
  transform: translateY(-10px) scale(1.05) rotateX(3deg) rotateY(2deg);
  box-shadow: 
    0 35px 70px rgba(0, 0, 0, 0.3),
    0 18px 35px rgba(0, 0, 0, 0.2),
    0 8px 20px rgba(59, 130, 246, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.9));
}

.drive-button:hover::before {
  opacity: 1;
}

.drive-button:hover::after {
  opacity: 0.7;
  animation-duration: 5s;
}

/* Drive button text styles */
.drive-button-title {
  color: #000000;
  font-weight: 900;
  font-size: 1.3rem;
  margin-bottom: 10px;
  text-shadow: 
    0 0 12px rgba(255, 255, 255, 1),
    0 0 20px rgba(255, 255, 255, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.9);
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.2),
    rgba(255, 255, 255, 0.1));
  padding: 8px 12px;
  border-radius: 8px;
  display: inline-block;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.drive-button-title:hover {
  transform: scale(1.05);
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.3),
    rgba(255, 255, 255, 0.2));
}

.drive-button-badge {
  color: #000000;
  font-weight: 900;
  font-size: 0.8rem;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.3),
    rgba(255, 255, 255, 0.4));
  padding: 4px 10px;
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0.8);
  text-shadow: 
    0 0 8px rgba(255, 255, 255, 1),
    0 0 16px rgba(255, 255, 255, 0.8),
    0 0 24px rgba(255, 255, 255, 0.6);
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  animation: drivePulse 2.5s ease-in-out infinite;
}

.drive-button-badge:hover {
  transform: scale(1.1);
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.4),
    rgba(255, 255, 255, 0.5));
  border-color: rgba(0, 0, 0, 0.9);
}

.drive-button-subjects {
  color: #000000;
  font-size: 0.85rem;
  line-height: 1.6;
  font-weight: 600;
  text-shadow: 
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 16px rgba(255, 255, 255, 0.7),
    0 1px 3px rgba(0, 0, 0, 0.8);
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.1),
    rgba(255, 255, 255, 0.1));
  padding: 8px 12px;
  border-radius: 8px;
  margin-top: 10px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.drive-button-subjects:hover {
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.2),
    rgba(255, 255, 255, 0.15));
  transform: translateY(-2px);
}

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

/* Enhanced particle effects */
.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, 
    rgba(99, 102, 241, 0.8),
    rgba(168, 85, 247, 0.6),
    rgba(236, 72, 153, 0.4));
  border-radius: 50%;
  animation: particleFloat 25s linear infinite;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

@keyframes particleFloat {
  0% {
    transform: translateY(100vh) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(150px) rotate(360deg);
    opacity: 0;
  }
}

/* Enhanced gradient text */
.gradient-text {
  background: linear-gradient(135deg, 
    #60a5fa 0%, 
    #a78bfa 25%, 
    #f472b6 50%, 
    #fbbf24 75%, 
    #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gradientShift 8s ease-in-out infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Enhanced cyber button */
.cyber-button {
  position: relative;
  background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899);
  border: none;
  overflow: hidden;
  transition: all 0.4s;
  border-radius: 12px;
}

.cyber-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.4), 
    transparent);
  transition: left 0.6s;
}

.cyber-button:hover::before {
  left: 100%;
}

.cyber-button:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 
    0 15px 30px rgba(59, 130, 246, 0.5),
    0 5px 15px rgba(139, 92, 246, 0.3);
  background: linear-gradient(45deg, #2563eb, #7c3aed, #db2777);
}

.file-subject {
  color: #e2e8f0;
  font-size: 0.85rem;
  margin-top: 4px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

/* Chapter and File Styles */
.chapter-name {
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.file-name {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .note-title {
    font-size: 1rem;
  }
  
  .subject-name {
    font-size: 1.1rem;
  }
  
  .note-item {
    padding: 12px;
  }
  
  .subject-card {
    padding: 16px;
  }
  
  .year-badge {
    font-size: 0.8rem;
    padding: 3px 6px;
  }
  
  .subject-title {
    font-size: 1rem;
  }
  
  .drive-subject {
    font-size: 0.9rem;
  }
}