/* detail_extra.css - additional UI enhancements */
/* Dark mode variables */
:root.dark-mode {
  --bg: #121212;
  --card-bg: #1e1e1e;
  --text-primary: #e0e0e0;
  --text-secondary: #b0b0b0;
  --primary: #ff914d; /* lighter orange for contrast */
  --primary-dark: #e6813b;
  --border: #333;
}

/* Glass effect for header and footer */
.glass-header, .glass-footer {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.dark-mode .glass-header, .dark-mode .glass-footer {
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.18);
}

/* Dark mode toggle button */
.dark-mode-toggle {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 1.2rem;
  cursor: pointer;
  transition: color .3s;
}
.dark-mode-toggle:hover { color: var(--primary); }