/* === The Deity — Custom Styles === */

/* Material Symbols config */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Glass Panel */
.glass-panel {
  backdrop-filter: blur(24px);
  background: rgba(17, 19, 24, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Radar grid background */
.radar-grid {
  background-image: radial-gradient(circle, rgba(153, 247, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Card glows */
.card-glow-primary {
  box-shadow: 0 0 20px -5px rgba(153, 247, 255, 0.15);
}
.card-glow-secondary {
  box-shadow: 0 0 20px -5px rgba(195, 244, 0, 0.15);
}
.card-glow-tertiary {
  box-shadow: 0 0 20px -5px rgba(133, 150, 255, 0.15);
}

/* Neon glows */
.neon-glow-primary {
  filter: drop-shadow(0 0 8px rgba(153, 247, 255, 0.4));
}
.neon-glow-secondary {
  filter: drop-shadow(0 0 8px rgba(195, 244, 0, 0.4));
}

/* Text glows */
.text-glow-primary {
  text-shadow: 0 0 12px rgba(153, 247, 255, 0.5);
}
.text-glow-secondary {
  text-shadow: 0 0 12px rgba(195, 244, 0, 0.5);
}

/* Progress ring */
.progress-ring {
  transform: rotate(-90deg);
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #23262c; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #46484d; }

/* Tab active indicator */
.tab-active {
  color: #99f7ff;
  border-bottom: 2px solid #99f7ff;
}
.tab-inactive {
  color: #aaabb0;
  border-bottom: 2px solid transparent;
}
.tab-inactive:hover {
  color: #f6f6fc;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Counter button press */
.counter-btn:active {
  transform: scale(0.9);
}

/* Toggle check */
.toggle-done {
  background: rgba(195, 244, 0, 0.15);
  border-color: rgba(195, 244, 0, 0.4);
}
.toggle-undone {
  background: rgba(35, 38, 44, 0.6);
  border-color: rgba(255, 255, 255, 0.05);
}

/* View transitions */
.view-enter {
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Section collapse */
.section-content {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

/* Ensure body fills viewport */
body {
  min-height: 100dvh;
}

/* Hide on mobile / desktop */
@media (max-width: 767px) {
  .desktop-only { display: none !important; }
}
@media (min-width: 768px) {
  .mobile-only { display: none !important; }
}