/* ============================================
   Dracula Theme - Weather Service UI Framework
   Mobile-first, professional, production-ready
   ============================================ */

:root {
  /* Dracula Color Palette */
  --dracula-bg: #282a36;
  --dracula-current-line: #44475a;
  --dracula-selection: #44475a;
  --dracula-foreground: #f8f8f2;
  --dracula-comment: #7e8dba; /* WCAG AA compliant - 4.5:1 contrast ratio on dark bg */
  --dracula-cyan: #8be9fd;
  --dracula-green: #50fa7b;
  --dracula-orange: #ffb86c;
  --dracula-pink: #ff79c6;
  --dracula-purple: #bd93f9;
  --dracula-red: #ff5555;
  --dracula-yellow: #f1fa8c;

  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;

  /* Z-index layers */
  --z-dropdown: 1000;
  --z-modal: 2000;
  --z-toast: 3000;
  --z-tooltip: 4000;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */

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

html {
  font-size: 16px;
}

body {
  background-color: var(--dracula-bg);
  color: var(--dracula-foreground);
  font-family: var(--font-sans);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

@media (min-width: 768px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.75rem; }
}

p {
  margin-bottom: var(--space-md);
}

a {
  color: var(--dracula-cyan);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--dracula-purple);
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-xl);
  }
}

.grid {
  display: grid;
  gap: var(--space-md);
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-1 {
  flex: 1 1 0%;
}

.empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  background: var(--dracula-current-line);
  border: 1px solid var(--dracula-selection);
  border-radius: var(--radius-md);
  color: var(--dracula-comment);
}

.empty-state__icon {
  font-size: 4rem;
  margin-bottom: var(--space-md);
}

.empty-state__title {
  color: var(--dracula-foreground);
  margin-bottom: var(--space-sm);
}

.empty-state__message {
  color: var(--dracula-comment);
  margin-bottom: var(--space-md);
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

/* ============================================
   NAVIGATION BAR
   ============================================ */

.navbar {
  background: var(--dracula-current-line);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  max-width: 1400px;
  margin: 0 auto;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dracula-purple);
  white-space: nowrap;
}

.navbar-menu {
  display: none;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 768px) {
  .navbar-menu {
    display: flex;
  }
}

.navbar-link {
  color: var(--dracula-foreground);
  font-weight: 500;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.navbar-link:hover {
  background: var(--dracula-bg);
  color: var(--dracula-cyan);
}

.navbar-link.active {
  background: var(--dracula-purple);
  color: var(--dracula-bg);
}

.navbar-link:focus-visible {
  outline: 3px solid var(--dracula-cyan);
  outline-offset: 2px;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Mobile Menu Toggle */
.navbar-toggle {
  display: block;
  background: none;
  border: none;
  color: var(--dracula-foreground);
  font-size: 1.5rem;
  cursor: pointer;
  padding: var(--space-sm);
}

.navbar-toggle:focus-visible {
  outline: 3px solid var(--dracula-cyan);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}

.navbar-menu-mobile {
  display: none;
  flex-direction: column;
  background: var(--dracula-bg);
  padding: var(--space-md);
  border-top: 1px solid var(--dracula-current-line);
}

.navbar-menu-mobile.active {
  display: flex;
}

.navbar-menu-mobile .navbar-link {
  display: block;
  padding: var(--space-md);
}

/* ============================================
   NOTIFICATION BELL
   ============================================ */

.notification-bell {
  position: relative;
  cursor: pointer;
  padding: var(--space-sm);
  border-radius: var(--radius-full);
  transition: all 0.2s ease;
  background: transparent;
  border: none;
  font-size: 1.25rem;
}

.notification-bell:hover {
  background: var(--dracula-bg);
}

.notification-bell:focus-visible {
  outline: 3px solid var(--dracula-cyan);
  outline-offset: 2px;
}

.notification-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--dracula-red);
  color: white;
  border-radius: var(--radius-full);
  min-width: 18px;
  height: 18px;
  font-size: 0.7rem;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-xs);
  box-shadow: var(--shadow-sm);
}

/* ============================================
   PROFILE AVATAR
   ============================================ */

.profile-avatar {
  position: relative;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--dracula-purple);
  color: var(--dracula-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  text-transform: uppercase;
}

.avatar:hover {
  border-color: var(--dracula-cyan);
  transform: scale(1.05);
}

.avatar:focus-visible {
  outline: 3px solid var(--dracula-cyan);
  outline-offset: 2px;
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.profile-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-sm));
  right: 0;
  background: var(--dracula-bg);
  border: 1px solid var(--dracula-selection);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  min-width: 220px;
  z-index: var(--z-dropdown);
  overflow: hidden;
}

.profile-dropdown.active {
  display: block;
}

.profile-dropdown-header {
  padding: var(--space-md) var(--space-lg);
  background: var(--dracula-current-line);
  border-bottom: 1px solid var(--dracula-selection);
}

.profile-dropdown-header > div:first-child {
  font-weight: 600;
  color: var(--dracula-foreground);
  font-size: 0.95rem;
}

.profile-dropdown-email {
  font-size: 0.875rem;
  color: var(--dracula-comment);
}

.profile-dropdown-role {
  font-size: 0.7rem;
  color: var(--dracula-comment);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.profile-dropdown-menu {
  list-style: none;
  padding: var(--space-xs) 0;
}

.profile-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  color: var(--dracula-foreground);
  transition: all 0.15s ease;
  font-size: 0.9rem;
}

.profile-dropdown-item:hover {
  background: var(--dracula-selection);
  color: var(--dracula-cyan);
}

.profile-dropdown-item:focus-visible {
  outline: 2px solid var(--dracula-cyan);
  outline-offset: -2px;
}

.profile-dropdown-item:last-child {
  border-top: 1px solid var(--dracula-selection);
  margin-top: var(--space-xs);
  padding-top: var(--space-md);
  color: var(--dracula-red);
}

.profile-dropdown-item:last-child:hover {
  background: var(--dracula-red);
  color: var(--dracula-bg);
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 3px solid var(--dracula-cyan);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--dracula-purple);
  color: var(--dracula-bg);
}

.btn-primary:hover:not(:disabled) {
  background: var(--dracula-pink);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--dracula-cyan);
  color: var(--dracula-bg);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--dracula-green);
  transform: translateY(-1px);
}

.btn-success {
  background: var(--dracula-green);
  color: var(--dracula-bg);
}

.btn-success:hover:not(:disabled) {
  background: #3fd968;
}

.btn-danger {
  background: var(--dracula-red);
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background: #ff3333;
}

.btn-warning {
  background: var(--dracula-orange);
  color: var(--dracula-bg);
}

.btn-warning:hover:not(:disabled) {
  background: #ff9944;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--dracula-purple);
  color: var(--dracula-purple);
}

.btn-outline:hover:not(:disabled) {
  background: var(--dracula-purple);
  color: var(--dracula-bg);
}

.btn-ghost {
  background: transparent;
  color: var(--dracula-foreground);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--dracula-current-line);
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

.btn-icon {
  padding: var(--space-sm);
  border-radius: var(--radius-full);
}

/* ============================================
   FORMS
   ============================================ */

.form-group {
  margin-bottom: var(--space-lg);
}

.form-label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: 600;
  color: var(--dracula-foreground);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem;
  background: var(--dracula-current-line);
  border: 2px solid var(--dracula-comment);
  border-radius: var(--radius-md);
  color: var(--dracula-foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: all 0.2s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--dracula-purple);
  box-shadow: 0 0 0 3px rgba(189, 147, 249, 0.2);
}

.form-input::placeholder {
  color: var(--dracula-comment);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.form-help {
  display: block;
  margin-top: var(--space-sm);
  font-size: 0.875rem;
  color: var(--dracula-comment);
}

.form-error {
  color: var(--dracula-red);
  font-size: 0.875rem;
  margin-top: var(--space-sm);
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--dracula-comment);
  transition: 0.3s;
  border-radius: var(--radius-full);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: var(--radius-full);
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--dracula-green);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

/* Custom Checkbox */
.custom-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-box {
  position: relative;
  height: 20px;
  width: 20px;
  background-color: var(--dracula-current-line);
  border: 2px solid var(--dracula-comment);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.custom-checkbox:hover .checkbox-box {
  border-color: var(--dracula-purple);
}

.custom-checkbox input:checked ~ .checkbox-box {
  background-color: var(--dracula-purple);
  border-color: var(--dracula-purple);
}

.checkbox-box:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkbox-box:after {
  display: block;
}

.checkbox-label {
  margin-left: var(--space-sm);
  color: var(--dracula-foreground);
}

/* Custom Radio Button */
.custom-radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  margin-right: var(--space-lg);
}

.custom-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.radio-circle {
  position: relative;
  height: 20px;
  width: 20px;
  background-color: var(--dracula-current-line);
  border: 2px solid var(--dracula-comment);
  border-radius: var(--radius-full);
  transition: all 0.2s ease;
}

.custom-radio:hover .radio-circle {
  border-color: var(--dracula-purple);
}

.custom-radio input:checked ~ .radio-circle {
  background-color: var(--dracula-purple);
  border-color: var(--dracula-purple);
}

.radio-circle:after {
  content: "";
  position: absolute;
  display: none;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: white;
}

.custom-radio input:checked ~ .radio-circle:after {
  display: block;
}

.radio-label {
  margin-left: var(--space-sm);
  color: var(--dracula-foreground);
}

/* File Input */
.file-input-wrapper {
  position: relative;
  display: inline-block;
}

.file-input-wrapper input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.file-input-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.5rem;
  background: var(--dracula-current-line);
  border: 2px solid var(--dracula-comment);
  border-radius: var(--radius-md);
  color: var(--dracula-foreground);
  cursor: pointer;
  transition: all 0.2s ease;
}

.file-input-label:hover {
  border-color: var(--dracula-purple);
  background: var(--dracula-purple);
  color: var(--dracula-bg);
}

.file-input-icon {
  font-size: 1.25rem;
}

.file-input-text {
  font-weight: 600;
}

/* ============================================
   MODALS
   ============================================ */

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  animation: fadeIn 0.2s ease;
  backdrop-filter: blur(4px);
}

.modal-overlay.active {
  display: flex;
}

.modal-overlay.closing {
  animation: fadeOut 0.2s ease;
}

.modal {
  background: var(--dracula-bg);
  border: 1px solid var(--dracula-purple);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}

.modal-sm {
  max-width: 400px;
}

.modal-md {
  max-width: 600px;
}

.modal-lg {
  max-width: 800px;
}

.modal-xl {
  max-width: 1200px;
}

/* Modal auto-close indicator */
.modal-auto-close {
  font-size: 0.75rem;
  color: var(--dracula-comment);
  text-align: center;
  margin-top: var(--space-sm);
  font-style: italic;
}

.modal-header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--dracula-current-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 1.5rem;
  color: var(--dracula-purple);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  color: var(--dracula-foreground);
  font-size: 1.5rem;
  cursor: pointer;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: var(--dracula-current-line);
  color: var(--dracula-red);
}

.modal-body {
  padding: var(--space-lg);
}

.modal-body-text {
  margin: 0;
  line-height: 1.6;
  color: var(--dracula-foreground);
}

.modal-body-text-spacing {
  margin: 0 0 1rem 0;
  line-height: 1.6;
  color: var(--dracula-foreground);
}

.modal-body-text-center {
  margin: 0;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--dracula-foreground);
}

.modal-input-full {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--dracula-current-line);
  border: 1px solid var(--dracula-purple);
  border-radius: var(--radius-md);
  color: var(--dracula-foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
}

.modal-input-full:focus {
  outline: none;
  border-color: var(--dracula-cyan);
  box-shadow: 0 0 0 3px rgba(139, 233, 253, 0.1);
}

.modal-footer {
  padding: var(--space-lg);
  border-top: 1px solid var(--dracula-current-line);
  display: flex;
  gap: var(--space-md);
  justify-content: flex-end;
}

@media (min-width: 768px) {
  .modal {
    max-width: 600px;
  }
}

/* ============================================
   ALERTS & BANNERS
   ============================================ */

.alert {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  border-left: 4px solid;
  display: flex;
  align-items: start;
  gap: var(--space-md);
}

.alert-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.alert-message {
  font-size: 0.875rem;
}

.alert-info {
  background: rgba(139, 233, 253, 0.1);
  border-color: var(--dracula-cyan);
  color: var(--dracula-cyan);
}

.alert-success {
  background: rgba(80, 250, 123, 0.1);
  border-color: var(--dracula-green);
  color: var(--dracula-green);
}

.alert-warning {
  background: rgba(255, 184, 108, 0.1);
  border-color: var(--dracula-orange);
  color: var(--dracula-orange);
}

.alert-error {
  background: rgba(255, 85, 85, 0.1);
  border-color: var(--dracula-red);
  color: var(--dracula-red);
}

.alert-dismissible {
  position: relative;
  padding-right: calc(var(--space-lg) + 2rem);
}

.alert-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: none;
  border: none;
  color: inherit;
  font-size: 1.25rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.alert-close:hover {
  opacity: 1;
}

/* Banner (full-width alert) */
.banner {
  padding: var(--space-md);
  text-align: center;
  border-bottom: 2px solid;
}

.banner-info {
  background: var(--dracula-current-line);
  border-color: var(--dracula-cyan);
  color: var(--dracula-cyan);
}

.banner-success {
  background: rgba(80, 250, 123, 0.1);
  border-color: var(--dracula-green);
  color: var(--dracula-green);
}

.banner-warning {
  background: rgba(255, 184, 108, 0.1);
  border-color: var(--dracula-orange);
  color: var(--dracula-orange);
}

.banner-error {
  background: rgba(255, 85, 85, 0.1);
  border-color: var(--dracula-red);
  color: var(--dracula-red);
}

/* ============================================
   CARDS
   ============================================ */

.card {
  background: var(--dracula-current-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: all 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card-header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--dracula-bg);
}

.card-title {
  font-size: 1.25rem;
  color: var(--dracula-purple);
  margin: 0;
}

.card-body {
  padding: var(--space-lg);
}

.card-footer {
  padding: var(--space-lg);
  border-top: 1px solid var(--dracula-bg);
  background: var(--dracula-bg);
}

/* ============================================
   BADGES
   ============================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-primary {
  background: var(--dracula-purple);
  color: var(--dracula-bg);
}

.badge-success {
  background: var(--dracula-green);
  color: var(--dracula-bg);
}

.badge-warning {
  background: var(--dracula-orange);
  color: var(--dracula-bg);
}

.badge-danger {
  background: var(--dracula-red);
  color: white;
}

.badge-info {
  background: var(--dracula-cyan);
  color: var(--dracula-bg);
}

/* Setup user flow */
.setup-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
}

.setup-card {
  max-width: 450px;
  width: 100%;
  background: var(--dracula-current-line);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  border: 1px solid var(--dracula-selection);
}

.setup-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.setup-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
}

.setup-title {
  font-size: 1.75rem;
  color: var(--dracula-cyan);
  margin-bottom: var(--space-xs);
}

.setup-subtitle {
  color: var(--dracula-comment);
  font-size: 0.95rem;
}

.setup-form-group {
  margin-bottom: var(--space-xl);
}

.setup-form-label {
  display: block;
  color: var(--dracula-foreground);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.setup-form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--dracula-bg);
  border: 1px solid var(--dracula-selection);
  border-radius: var(--radius-md);
  color: var(--dracula-foreground);
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.setup-form-input:focus {
  outline: none;
  border-color: var(--dracula-cyan);
  box-shadow: 0 0 0 3px rgba(139, 233, 253, 0.15);
}

.setup-submit {
  width: 100%;
  background: var(--dracula-green);
  color: var(--dracula-bg);
  border: none;
  padding: 0.875rem;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.setup-submit:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.setup-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

.setup-error {
  background: var(--dracula-red);
  color: var(--dracula-bg);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  display: none;
}

.form-hint {
  display: block;
  margin-top: var(--space-xs);
  color: var(--dracula-comment);
  font-size: 0.8125rem;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

.toast-container {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 350px;
}

.toast {
  background: var(--dracula-current-line);
  border: 1px solid;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-md);
  display: flex;
  align-items: start;
  gap: var(--space-md);
  animation: slideInRight 0.3s ease;
}

.toast-success {
  border-color: var(--dracula-green);
}

.toast-error {
  border-color: var(--dracula-red);
}

.toast-warning {
  border-color: var(--dracula-orange);
}

.toast-info {
  border-color: var(--dracula-cyan);
}

.toast-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.toast-content {
  flex: 1;
}

.toast-title {
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.toast-message {
  font-size: 0.875rem;
  color: var(--dracula-comment);
}

.toast-close {
  background: none;
  border: none;
  color: var(--dracula-foreground);
  cursor: pointer;
  font-size: 1.25rem;
  padding: 0;
  opacity: 0.7;
}

.toast-close:hover {
  opacity: 1;
}

/* ============================================
   LOADING STATES
   ============================================ */

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--dracula-current-line);
  border-top-color: var(--dracula-purple);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

.spinner-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.spinner-lg {
  width: 60px;
  height: 60px;
  border-width: 6px;
}

.loading-dots {
  display: inline-flex;
  gap: var(--space-xs);
}

.loading-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--dracula-purple);
  animation: bounce 1.4s infinite ease-in-out both;
}

.loading-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.loading-dot:nth-child(2) {
  animation-delay: -0.16s;
}

/* ============================================
   TABLES
   ============================================ */

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--dracula-current-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.table thead {
  background: var(--dracula-bg);
}

.table th {
  padding: var(--space-md);
  text-align: left;
  font-weight: 700;
  color: var(--dracula-purple);
  border-bottom: 2px solid var(--dracula-purple);
}

.table td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--dracula-bg);
}

.table tbody tr:hover {
  background: var(--dracula-bg);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(20px);
    opacity: 0;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-purple { color: var(--dracula-purple); }
.text-cyan { color: var(--dracula-cyan); }
.text-green { color: var(--dracula-green); }
.text-red { color: var(--dracula-red); }
.text-yellow { color: var(--dracula-yellow); }
.text-orange { color: var(--dracula-orange); }
.text-pink { color: var(--dracula-pink); }
.text-comment { color: var(--dracula-comment); }

.bg-bg { background: var(--dracula-bg); }
.bg-current { background: var(--dracula-current-line); }

.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

.pt-lg { padding-top: var(--space-lg); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-sm); }
.mt-2 { margin-top: var(--space-md); }
.mt-3 { margin-top: var(--space-lg); }
.mt-4 { margin-top: var(--space-xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-sm); }
.mb-2 { margin-bottom: var(--space-md); }
.mb-3 { margin-bottom: var(--space-lg); }
.mb-4 { margin-bottom: var(--space-xl); }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-sm); }
.p-2 { padding: var(--space-md); }
.p-3 { padding: var(--space-lg); }
.p-4 { padding: var(--space-xl); }

.w-full { width: 100%; }
.h-full { height: 100%; }

.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

/* Mobile menu - hidden by default, shown on mobile when active */
.mobile-menu {
  display: none;
  background: var(--dracula-current-line);
  padding: 1rem;
  flex-direction: column;
  gap: 0.5rem;
}

.mobile-menu.active {
  display: flex;
}

.mobile-menu-item {
  padding: 0.75rem 1rem;
  color: var(--dracula-foreground);
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s;
}

.mobile-menu-item:hover {
  background: var(--dracula-selection);
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--dracula-foreground);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
}

@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
  .mobile-menu-toggle { display: block; }
  .navbar-menu { display: none; }
}

@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}

/* ============================================
   WEATHER PAGE STYLES
   ============================================ */

/* Weather Container */
.weather-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-lg);
}

/* Mobile: Reduce padding */
@media (max-width: 719px) {
  /* Hide navbar brand text on mobile, show only icon */
  .navbar-brand-text {
    display: none;
  }

  .weather-container {
    padding: var(--space-md);
  }
}

/* Search Form */
.search-form {
  margin: var(--space-lg) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.search-row {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
}

.search-row-single {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
  width: 100%;
  flex-wrap: wrap;
}

/* Mobile: Stack search form vertically */
@media (max-width: 719px) {
  .search-row-single {
    flex-direction: column;
  }

  .search-input-wrapper {
    width: 100%;
    flex: none;
  }

  .units-select {
    width: 100%;
    flex: none;
  }

  .search-button {
    width: 100%;
    flex: none;
  }
}

.search-input-wrapper {
  position: relative;
  flex: 1;
}

.location-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border: 1px solid var(--dracula-selection);
  border-radius: var(--radius-md);
  color: #282a36;
  font-size: 1rem;
  font-family: var(--font-sans);
  transition: all 0.2s;
}

.location-input:focus {
  outline: none;
  border-color: var(--dracula-cyan);
  box-shadow: 0 0 0 3px rgba(139, 233, 253, 0.1);
}

.location-input::placeholder {
  color: var(--dracula-comment);
}

.units-select {
  flex-shrink: 0;
  width: 4rem;
  padding: 0.75rem 0.5rem;
  background: var(--dracula-current-line);
  border: 1px solid var(--dracula-selection);
  border-radius: var(--radius-md);
  color: var(--dracula-foreground);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.units-select:focus {
  outline: none;
  border-color: var(--dracula-purple);
  box-shadow: 0 0 0 3px rgba(189, 147, 249, 0.1);
}

.button-row {
  display: flex;
  gap: var(--space-sm);
}

.search-button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-sans);
  white-space: nowrap;
  flex-shrink: 0;
}

.search-button.primary {
  background: var(--dracula-current-line);
  color: var(--dracula-foreground);
  border: 1px solid var(--dracula-selection);
}

.search-button.primary:hover {
  background: var(--dracula-selection);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.search-button.secondary {
  background: var(--dracula-cyan);
  color: var(--dracula-bg);
}

.search-button.secondary:hover {
  background: #7cdcf4;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.search-button:active {
  transform: translateY(0);
}

.search-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Location Card */
.location-card {
  margin: var(--space-md) 0;
  padding: var(--space-md);
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.location-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  align-items: center;
}

.location-detail {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
}

.location-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.location-label {
  color: var(--dracula-cyan);
  font-weight: 600;
  flex-shrink: 0;
}

.location-value {
  color: var(--dracula-foreground);
}

.location-value.location-name {
  color: var(--dracula-yellow);
  font-weight: 600;
}

.location-value.country {
  color: var(--dracula-green);
}

.location-value.coords {
  color: var(--dracula-pink);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.location-value.population {
  color: var(--dracula-orange);
}

/* Current Weather Display */
.current-weather {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  background: transparent;
  border-radius: 0;
  margin: var(--space-lg) 0;
  border: none;
  box-shadow: none;
}

@media (min-width: 768px) {
  .current-weather {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-xl);
  }
}

.weather-icon {
  font-size: 5rem;
  line-height: 1;
  margin-bottom: var(--space-md);
}

@media (min-width: 768px) {
  .weather-icon {
    font-size: 6rem;
    margin-bottom: 0;
  }
}

.weather-details {
  text-align: left;
  flex: 1;
}

@media (min-width: 768px) {
  .weather-details {
    text-align: left;
    padding-left: 0;
  }
}

.temperature {
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--dracula-foreground);
  line-height: 1.2;
  margin-bottom: var(--space-xs);
}

@media (min-width: 768px) {
  .temperature {
    font-size: 3rem;
  }
}

.description {
  font-size: 1rem;
  color: var(--dracula-foreground);
  margin-bottom: var(--space-md);
  font-weight: 400;
}

.weather-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: 0;
}

@media (min-width: 640px) {
  .weather-stats {
    flex-direction: column;
    gap: var(--space-xs);
  }
}

.stat {
  color: var(--dracula-foreground);
  font-size: 0.875rem;
}

.stat-value {
  color: var(--dracula-foreground);
  font-weight: 400;
  margin-left: 0;
}

/* Autocomplete Dropdown */
.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--dracula-current-line);
  border: 1px solid var(--dracula-cyan);
  border-radius: var(--radius-md);
  margin-top: var(--space-xs);
  max-height: 500px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  box-shadow: var(--shadow-lg);
  display: none;
}

.autocomplete-dropdown.show {
  display: block;
}

.autocomplete-item {
  padding: var(--space-md);
  cursor: pointer;
  border-bottom: 1px solid var(--dracula-selection);
  transition: background 0.15s;
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-item:hover {
  background: var(--dracula-selection);
}

.autocomplete-item .city-name {
  color: var(--dracula-cyan);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.autocomplete-item .location-details {
  color: var(--dracula-comment);
  font-size: 0.875rem;
}

/* Forecast Section */
.forecast-section {
  margin: var(--space-xl) 0;
}

.forecast-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--dracula-current-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.forecast-table thead {
  background: var(--dracula-bg);
}

.forecast-table th {
  padding: var(--space-md);
  text-align: left;
  color: var(--dracula-cyan);
  font-weight: 600;
  border-bottom: 2px solid var(--dracula-selection);
}

.forecast-table td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--dracula-selection);
}

.forecast-table tbody tr:last-child td {
  border-bottom: none;
}

.forecast-table tbody tr:hover {
  background: var(--dracula-selection);
}

/* Console Commands */
.console-commands {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.command-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

@media (min-width: 768px) {
  .command-item {
    flex-direction: row;
    align-items: center;
  }
}

.command-item strong {
  flex-shrink: 0;
  min-width: 120px;
}

.code-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.mobile-code {
  background: var(--dracula-current-line);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  color: var(--dracula-yellow);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  overflow-x: auto;
  display: block;
  white-space: nowrap;
  flex: 1;
}

@media (min-width: 768px) {
  .mobile-code {
    display: inline-block;
  }
}

.copy-btn {
  background: var(--dracula-purple);
  color: var(--dracula-bg);
  border: none;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.2s;
  flex-shrink: 0;
  white-space: nowrap;
}

.copy-btn:hover {
  background: var(--dracula-pink);
  transform: translateY(-1px);
}

.copy-btn:active {
  transform: translateY(0);
}

.copy-btn.copied {
  background: var(--dracula-green);
}

/* Mobile Forecast Cards */
.mobile-forecast {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .mobile-forecast {
    display: none;
  }

  .desktop-table {
    display: table;
  }
}

@media (max-width: 767px) {
  .desktop-table {
    display: none;
  }
}

.forecast-card {
  background: var(--dracula-current-line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 2px solid var(--dracula-cyan);
  box-shadow: var(--shadow-sm);
}

.forecast-card-header {
  color: var(--dracula-cyan);
  font-weight: 600;
  font-size: 1.125rem;
  margin-bottom: var(--space-md);
}

.forecast-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.forecast-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.forecast-icon {
  font-size: 3rem;
}

.forecast-temp {
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
  gap: var(--space-sm);
}

.forecast-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  color: var(--dracula-foreground);
}

/* ============================================
   PAGE-SPECIFIC STYLES (Extracted from inline)
   ============================================ */

/* ==================== SEVERE WEATHER PAGE ==================== */

.page-header {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}

.page-subtitle {
  color: var(--dracula-comment);
}

.page-container {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.severe-weather-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.severe-location-form {
  margin: var(--space-lg) 0;
}

.alert-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.summary-item {
  background: var(--dracula-current-line);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  border: 1px solid var(--dracula-selection);
}

.summary-count {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--dracula-cyan);
}

.summary-label {
  color: var(--dracula-comment);
  margin-top: var(--space-sm);
}

.alert-section {
  margin-top: var(--space-xl);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--dracula-current-line);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--dracula-selection);
}

.section-icon {
  font-size: 1.5rem;
}

.section-title {
  flex: 1;
  margin-left: var(--space-sm);
  font-weight: 600;
  color: var(--dracula-foreground);
}

.section-count {
  color: var(--dracula-green);
  font-weight: 600;
}

.alerts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.alert-card {
  background: var(--dracula-bg);
  border: 1px solid var(--dracula-current-line);
  border-left: 4px solid var(--dracula-cyan);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.alert-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.alert-card.extreme { border-left-color: var(--dracula-red); }
.alert-card.severe { border-left-color: var(--dracula-orange); }
.alert-card.moderate { border-left-color: var(--dracula-yellow); }
.alert-card.minor { border-left-color: var(--dracula-green); }
.alert-card.unknown { border-left-color: var(--dracula-purple); }

.alert-distance {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: var(--dracula-current-line);
  color: var(--dracula-cyan);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.alert-event {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--dracula-yellow);
}

.alert-meta {
  display: flex;
  gap: var(--space-md);
  color: var(--dracula-comment);
  font-size: 0.875rem;
  margin-bottom: var(--space-sm);
}

.alert-area {
  color: var(--dracula-foreground);
  margin-bottom: var(--space-sm);
}

.alert-headline {
  color: var(--dracula-cyan);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.alert-details {
  display: none;
  margin-top: var(--space-sm);
  background: var(--dracula-current-line);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}

.alert-details.show {
  display: block;
}

@media (max-width: 719px) {
  .alert-meta {
    flex-direction: column;
    gap: var(--space-xs);
  }
}

/* Select elements for forms */
.select-input {
  padding: 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid var(--dracula-selection);
  background: var(--dracula-bg);
  color: var(--dracula-foreground);
}

/* Alert detail sections */
.alert-detail__title {
  font-weight: bold;
  margin-bottom: var(--space-sm);
  color: var(--dracula-purple);
}

.alert-detail__content {
  line-height: 1.6;
}

.alert-detail__instruction-title {
  font-weight: bold;
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
  color: var(--dracula-orange);
}

.alert-detail__expires {
  margin-top: var(--space-md);
  color: var(--dracula-comment);
}

/* Storm detail specific */
.storm-detail--full-width {
  grid-column: 1 / -1;
}

/* All Clear message */
.all-clear__title {
  color: var(--dracula-green);
  font-size: 1.75rem;
  margin-bottom: var(--space-md);
}

.all-clear__message {
  margin-top: var(--space-sm);
  color: var(--dracula-foreground);
  font-size: 1.125rem;
}

.all-clear__note {
  margin-top: var(--space-md);
  color: var(--dracula-comment);
}

.all-clear__location-info {
  margin-top: var(--space-md);
  color: var(--dracula-cyan);
  font-size: 0.875rem;
}

/* Data source footer */
.data-source-box {
  text-align: center;
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  background: var(--dracula-current-line);
  border-radius: var(--radius-md);
}

.data-source-box__primary {
  color: var(--dracula-comment);
  margin-bottom: var(--space-sm);
}

.data-source-box__meta {
  color: var(--dracula-comment);
  font-size: 0.875rem;
}

/* ==================== LOCATION DETAILS (Uniform Across All Pages) ==================== */

.location-details-section {
  margin: 1.5rem 0;
  padding: 1rem;
  background-color: var(--dracula-bg);
  border-radius: 0.5rem;
  border: 1px solid var(--dracula-current-line);
}

.location-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.location-detail {
  margin: 0;
  font-size: 0.875rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.location-detail__label {
  color: var(--dracula-cyan);
  font-weight: bold;
}

.location-detail__value--name {
  color: var(--dracula-yellow);
}

.location-detail__value--country {
  color: var(--dracula-green);
}

.location-detail__value--coords {
  color: var(--dracula-pink);
  font-family: var(--font-mono);
}

.location-detail__value--timezone {
  color: var(--dracula-orange);
}

.location-detail__value--population {
  color: var(--dracula-purple);
}

/* ==================== MOON PAGE ==================== */

/* Moon form layout */
.moon-form {
  margin: var(--space-md) 0;
  width: 100%;
}

.moon-form__wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.moon-form__row {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.moon-form__input-wrapper {
  position: relative;
  flex: 1;
}

.moon-form__input {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.moon-form__units {
  flex-shrink: 0;
  width: 5rem;
}

.moon-form__button {
  flex: 1;
}

.moon-form__button--location {
  flex: 1;
  background-color: var(--dracula-cyan);
}

/* Mobile: Stack moon form rows vertically */
@media (max-width: 719px) {
  .moon-form__row {
    flex-direction: column;
  }

  .moon-form__input-wrapper {
    width: 100%;
  }

  .moon-form__units {
    width: 100%;
  }

  .moon-form__button,
  .moon-form__button--location {
    width: 100%;
  }
}

/* Moon weather display */
.moon-weather-icon {
  font-size: 4rem;
}

.moon-temp-display {
  color: var(--dracula-purple);
}

/* Console section */
.console-section {
  background-color: var(--dracula-bg);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--dracula-current-line);
  margin-top: var(--space-xl);
}

.console-section__title {
  color: var(--dracula-purple);
  text-align: center;
  margin-top: 0;
}

.console-section__label {
  color: var(--dracula-green);
}

/* Moon/Sun info boxes */
.info-box {
  background-color: var(--dracula-bg);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--dracula-current-line);
}

.info-box__title {
  color: var(--dracula-purple);
  margin-top: 0;
  text-align: center;
}

.info-box__title--lunar {
  color: var(--dracula-purple);
}

.info-box__title--solar {
  color: var(--dracula-yellow);
}

.info-box__content {
  color: var(--dracula-foreground);
}

.info-box__item {
  margin: 0.75rem 0;
}

.info-box__label {
  color: var(--dracula-cyan);
}

.info-box__value {
  color: var(--dracula-foreground);
}

.info-box__value--primary {
  color: var(--dracula-yellow);
}

.info-box__value--green {
  color: var(--dracula-green);
}

.info-box__value--pink {
  color: var(--dracula-pink);
}

.info-box__value--orange {
  color: var(--dracula-orange);
}

.info-box__value--red {
  color: var(--dracula-red);
}

.info-box__value--cyan {
  color: var(--dracula-cyan);
}

.info-box__value--purple {
  color: var(--dracula-purple);
}

.info-box__value--yellow {
  color: var(--dracula-yellow);
}

/* Grid layouts */
.grid-auto-fit-300 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

/* Moon-specific */
.moon-temp-display {
  color: var(--dracula-purple);
}

/* Welcome/intro sections */
.welcome-section {
  text-align: center;
  color: var(--dracula-comment);
  margin: 40px 0;
}

.welcome-section__title {
  color: var(--dracula-purple);
}

.city-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 20px 0;
}

.city-link {
  color: var(--dracula-pink);
  text-decoration: none;
  padding: 8px;
  background: var(--dracula-bg);
  border-radius: var(--radius-sm);
  display: block;
}

/* ==================== EARTHQUAKE PAGE ==================== */

/* Statistics boxes */
.stat-box {
  background: var(--dracula-bg);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--dracula-current-line);
  text-align: center;
}

.stat-box__value {
  font-size: 2rem;
  font-weight: bold;
}

.stat-box__value--cyan {
  color: var(--dracula-cyan);
}

.stat-box__value--orange {
  color: var(--dracula-orange);
}

.stat-box__value--purple {
  color: var(--dracula-purple);
}

.stat-box__label {
  color: var(--dracula-comment);
  margin-top: var(--space-sm);
}

.grid-auto-fit-200 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

/* Map */
.map-container {
  height: 600px;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--dracula-current-line);
  margin: var(--space-lg) 0;
}

/* Earthquake items */
.earthquake-item {
  background: var(--dracula-bg);
  padding: var(--space-md);
  margin: var(--space-sm) 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.earthquake-item--minor {
  border-left: 4px solid var(--dracula-green);
}

.earthquake-item--light {
  border-left: 4px solid var(--dracula-yellow);
}

.earthquake-item--moderate {
  border-left: 4px solid var(--dracula-orange);
}

.earthquake-item--strong {
  border-left: 4px solid var(--dracula-red);
}

.earthquake-item--tsunami {
  border-left: 4px solid var(--dracula-cyan);
}

.magnitude-badge {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  text-align: center;
  line-height: 3rem;
  font-weight: bold;
}

.magnitude-badge--minor {
  background-color: var(--dracula-green);
}

.magnitude-badge--light {
  background-color: var(--dracula-yellow);
}

.magnitude-badge--moderate {
  background-color: var(--dracula-orange);
}

.magnitude-badge--strong {
  background-color: var(--dracula-red);
}

.magnitude-badge--major {
  background-color: var(--dracula-purple);
}

.eq-info {
  color: var(--dracula-comment);
  margin-top: 0.25rem;
  font-size: 0.875rem;
}

.eq-details {
  display: none;
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background: var(--dracula-current-line);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

/* ==================== LOCATION MANAGEMENT ==================== */

.location-manager {
  max-width: 900px;
  margin: 0 auto;
}

.location-manager__header {
  margin-bottom: var(--space-xl);
}

.back-link {
  color: var(--dracula-cyan);
  text-decoration: none;
  font-weight: 600;
}

.back-link:hover {
  color: var(--dracula-purple);
}

.location-tabs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--dracula-current-line);
  flex-wrap: wrap;
}

.location-tab {
  padding: var(--space-md) var(--space-lg);
  background: transparent;
  border: none;
  color: var(--dracula-comment);
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}

.location-tab:hover {
  color: var(--dracula-foreground);
}

.location-tab.active {
  color: var(--dracula-purple);
  border-bottom-color: var(--dracula-purple);
}

.location-tab-content {
  display: none;
}

.location-tab-content.active {
  display: block;
}

.search-results {
  position: relative;
  margin-top: var(--space-sm);
}

.results-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--dracula-current-line);
  border: 1px solid var(--dracula-purple);
  border-radius: var(--radius-md);
  max-height: 300px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  box-shadow: var(--shadow-lg);
}

.results-dropdown.active {
  display: block;
}

.result-item {
  padding: var(--space-md);
  cursor: pointer;
  border-bottom: 1px solid var(--dracula-bg);
  transition: all 0.2s ease;
}

.result-item:last-child {
  border-bottom: none;
}

.result-item:hover {
  background: var(--dracula-purple);
  color: var(--dracula-bg);
}

.result-item:hover .result-details {
  color: var(--dracula-bg);
  opacity: 0.8;
}

.result-city {
  font-weight: 700;
  color: var(--dracula-cyan);
}

.result-item:hover .result-city {
  color: var(--dracula-bg);
}

.result-details {
  font-size: 0.875rem;
  color: var(--dracula-comment);
  margin-top: var(--space-xs);
}

.gps-button {
  width: 100%;
  margin-bottom: var(--space-lg);
}

.location-confirm-form {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 2px solid var(--dracula-current-line);
}

.result-coords {
  opacity: 0.6;
}

.no-alerts {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  background: var(--dracula-current-line);
  border-radius: var(--radius-lg);
  border: 1px solid var(--dracula-selection);
  margin-top: var(--space-2xl);
}

.no-alerts-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.checkbox-group input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* Earthquake detail view */
.eq-detail-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-lg);
  margin: var(--space-md) 0 var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: var(--dracula-bg);
  border: 1px solid var(--dracula-current-line);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

.eq-detail-nav__link {
  font-weight: 600;
  text-decoration: none;
  color: var(--dracula-cyan);
  transition: color 0.2s ease;
}

.eq-detail-nav__link--moon {
  color: var(--dracula-purple);
}

.eq-detail-nav__link--earthquake {
  color: var(--dracula-orange);
}

.eq-detail-nav__link:hover {
  color: var(--dracula-purple);
}

.eq-detail-back-link {
  display: inline-block;
  margin-bottom: var(--space-md);
  color: var(--dracula-cyan);
  text-decoration: none;
  font-weight: 600;
}

.eq-detail-back-link:hover {
  color: var(--dracula-purple);
}

.eq-detail-card {
  background: var(--dracula-current-line);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  border: 1px solid var(--dracula-selection);
}

.eq-detail-title {
  margin: 0;
  padding-left: var(--space-md);
  border-left: 4px solid transparent;
}

.eq-detail-title--cyan { border-left-color: var(--dracula-cyan); }
.eq-detail-title--green { border-left-color: var(--dracula-green); }
.eq-detail-title--yellow { border-left-color: var(--dracula-yellow); }
.eq-detail-title--orange { border-left-color: var(--dracula-orange); }
.eq-detail-title--red { border-left-color: var(--dracula-red); }

.eq-detail-summary {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin: var(--space-lg) 0;
}

.eq-magnitude {
  text-align: center;
}

.eq-magnitude__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: 700;
  color: var(--dracula-bg);
}

.eq-magnitude__badge--minor { background: var(--dracula-green); }
.eq-magnitude__badge--light { background: var(--dracula-yellow); color: var(--dracula-bg); }
.eq-magnitude__badge--moderate { background: var(--dracula-orange); }
.eq-magnitude__badge--strong { background: var(--dracula-red); }
.eq-magnitude__badge--major { background: var(--dracula-purple); }

.eq-magnitude__label {
  display: block;
  margin-top: var(--space-sm);
  color: var(--dracula-comment);
  font-size: 0.875rem;
}

.eq-tsunami-alert {
  background: var(--dracula-cyan);
  color: var(--dracula-bg);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-weight: 700;
}

.eq-detail-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.eq-detail-attribute {
  background: var(--dracula-bg);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  border: 1px solid var(--dracula-current-line);
}

.eq-detail-attribute__label {
  color: var(--dracula-orange);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.eq-detail-attribute__value {
  color: var(--dracula-foreground);
  font-size: 1.1rem;
  font-weight: 600;
}

.eq-detail-attribute__meta {
  margin-top: var(--space-xs);
  color: var(--dracula-comment);
  font-size: 0.875rem;
}

.eq-detail-map {
  height: 400px;
  margin-top: var(--space-xl);
}

.map-popup {
  color: #1e212a;
  font-family: var(--font-sans);
  line-height: 1.4;
}

.map-popup__title {
  font-size: 1.1rem;
  font-weight: 700;
  display: block;
  margin-bottom: 0.25rem;
}

.map-popup__place {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.map-popup__time {
  font-size: 0.85rem;
  color: #555b6e;
  margin-bottom: 0.25rem;
}

.map-popup__meta {
  font-size: 0.85rem;
  color: #2d3142;
}

.map-popup__warning {
  margin-top: 0.5rem;
  color: #0077b6;
  font-weight: 700;
}

.map-popup__link {
  display: inline-block;
  margin-top: 0.5rem;
  color: #0077b6;
  text-decoration: none;
  font-weight: 600;
}

.map-popup__link:hover {
  color: #023e8a;
}

/* Footer section */
.page-footer {
  text-align: center;
  margin-top: var(--space-2xl);
  padding: var(--space-xl) var(--space-md);
  border-top: 1px solid var(--dracula-current-line);
  color: var(--dracula-comment);
}

.page-footer__text {
  margin: var(--space-sm) 0;
  font-size: 0.875rem;
}

.page-footer__links {
  margin: 0;
  font-size: 0.875rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-lg);
}

.page-footer__divider {
  color: var(--dracula-pink);
}

/* ==================== HURRICANE PAGE ==================== */

/* ==================== WEATHER PAGE ==================== */

/* ==================== NOTIFICATIONS PAGE ==================== */

.notifications-container {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-xl);
}

.top-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.filter-tabs {
  display: flex;
  gap: var(--space-sm);
}

.filter-tab {
  padding: 0.5rem 1rem;
  background: var(--dracula-current-line);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--dracula-foreground);
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-tab.active {
  background: var(--dracula-pink);
  color: var(--dracula-bg);
}

.notification-item {
  background: var(--dracula-current-line);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin: var(--space-md) 0;
  border-left: 4px solid var(--dracula-cyan);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.notification-item.unread {
  border-left-color: var(--dracula-green);
  background: rgba(80, 250, 123, 0.1);
}

.notification-item:hover {
  transform: translateX(5px);
  box-shadow: var(--shadow-md);
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
  gap: var(--space-sm);
}

.notification-title {
  color: var(--dracula-cyan);
  font-weight: 600;
  font-size: 1.1rem;
}

.notification-time {
  color: var(--dracula-comment);
  font-size: 0.875rem;
}

.notification-message {
  color: var(--dracula-foreground);
  line-height: 1.6;
}

.notification-actions {
  margin-top: var(--space-sm);
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.notification-type {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.notification-type.alert {
  background: rgba(255, 85, 85, 0.2);
  color: var(--dracula-red);
}

.notification-type.info {
  background: rgba(139, 233, 253, 0.2);
  color: var(--dracula-cyan);
}

.notification-type.success {
  background: rgba(80, 250, 123, 0.2);
  color: var(--dracula-green);
}

.notification-type.warning {
  background: rgba(241, 250, 140, 0.2);
  color: var(--dracula-yellow);
}

/* Error messages */
.error-box {
  background-color: var(--dracula-red);
  color: var(--dracula-bg);
  padding: 10px;
  border-radius: 6px;
  margin: 20px 0;
}

/* Forecast table elements */
.day-header {
  /* Additional styles if needed */
}

.forecast-condition {
  /* Additional styles if needed */
}

.forecast-temp {
  /* Additional styles if needed */
}

.wind-info {
  /* Additional styles if needed */
}

.precipitation {
  /* Additional styles if needed */
}

/* Wind direction */
.wind-direction {
  font-size: 0.75rem;
  color: var(--dracula-comment);
}

/* Precipitation details */
.precip-prob {
  font-size: 0.75rem;
  color: var(--dracula-comment);
}

/* ==================== SHARED UTILITY CLASSES ==================== */

/* Color utilities (foreground text) */
.color-primary {
  color: var(--dracula-purple);
}

.color-cyan {
  color: var(--dracula-cyan);
}

.color-yellow {
  color: var(--dracula-yellow);
}

.color-green {
  color: var(--dracula-green);
}

.color-orange {
  color: var(--dracula-orange);
}

.color-red {
  color: var(--dracula-red);
}

.color-pink {
  color: var(--dracula-pink);
}

.color-comment {
  color: var(--dracula-comment);
}

.color-foreground {
  color: var(--dracula-foreground);
}

/* Display utilities */
.flex-align-center {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.flex-column-gap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.flex-row-gap {
  display: flex;
  gap: var(--space-sm);
  width: 100%;
}

/* Responsive flex to column */
@media (max-width: 719px) {
  .flex-column-mobile {
    flex-direction: column;
  }
}

/* Margin utilities - refined */
.margin-y-md {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

.margin-y-lg {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* Scroll container */
.scroll-container {
  max-height: 600px;
  overflow-y: auto;
}

/* Full-width grid spans */
.grid-span-full {
  grid-column: 1 / -1;
}

/* ==================== HURRICANE PAGE ==================== */

.hurricane-header {
  text-align: center;
  margin: 2rem 0;
}

.storm-count {
  color: var(--dracula-yellow);
  font-size: 1.2rem;
  margin: 1rem 0;
}

.storms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.storm-card {
  background: var(--dracula-current-line);
  border-radius: 0.5rem;
  padding: 1.5rem;
  border-left: 4px solid var(--dracula-red);
  transition: transform 0.2s;
}

.storm-card:hover {
  transform: translateY(-5px);
}

.storm-card.category-5 {
  border-left-color: var(--dracula-red);
}

.storm-card.category-4 {
  border-left-color: var(--dracula-orange);
}

.storm-card.category-3 {
  border-left-color: var(--dracula-yellow);
}

.storm-card.category-2 {
  border-left-color: var(--dracula-green);
}

.storm-card.category-1 {
  border-left-color: var(--dracula-cyan);
}

.storm-card.tropical-storm {
  border-left-color: var(--dracula-purple);
}

.storm-name {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--dracula-cyan);
  margin-bottom: 0.5rem;
}

.storm-classification {
  color: var(--dracula-yellow);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.storm-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1rem 0;
}

.detail-item {
  display: flex;
  flex-direction: column;
}

.detail-label {
  color: var(--dracula-comment);
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.detail-value {
  color: var(--dracula-foreground);
  font-size: 1.1rem;
  font-weight: bold;
}

.storm-location {
  margin: 1rem 0;
  padding: 1rem;
  background: var(--dracula-bg);
  border-radius: 0.375rem;
}

.storm-update {
  color: var(--dracula-comment);
  font-size: 0.875rem;
  margin-top: 1rem;
}

.advisory-links {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.advisory-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--dracula-purple);
  color: var(--dracula-bg);
  text-decoration: none;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  transition: background 0.2s;
}

.advisory-link:hover {
  background: var(--dracula-pink);
}

.no-storms {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--dracula-comment);
}

.no-storms-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .storms-grid {
    grid-template-columns: 1fr;
  }

  .storm-details {
    grid-template-columns: 1fr;
  }
}

/* ==================== DATA SOURCE FOOTER ==================== */

.data-footer {
  text-align: center;
  margin-top: 3rem;
  padding: 2rem 1rem;
  border-top: 1px solid var(--dracula-current-line);
  color: var(--dracula-comment);
}

.data-footer__text {
  margin: 0;
  font-size: 0.875rem;
}

.data-footer__link {
  color: var(--dracula-cyan);
  text-decoration: none;
}

.data-footer__link:hover {
  color: var(--dracula-purple);
}

/* ==================== PROFILE PAGE ==================== */

.tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid var(--dracula-bg);
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.tab {
  padding: 1rem 1.5rem;
  background: var(--dracula-current-line);
  color: var(--dracula-foreground);
  border: none;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.tab:hover {
  background: var(--dracula-comment);
}

.tab.active {
  background: var(--dracula-purple);
  color: white;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
  padding: 2rem;
  background: var(--dracula-current-line);
  border-radius: 12px;
}

.profile-avatar-large {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dracula-purple), var(--dracula-pink));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: white;
  font-weight: bold;
}

.profile-info h1 {
  margin: 0 0 0.5rem 0;
  color: var(--dracula-cyan);
}

.profile-info p {
  margin: 0.25rem 0;
  color: var(--dracula-comment);
}

.token-display {
  font-family: 'Courier New', monospace;
  background: var(--dracula-current-line);
  padding: 1rem;
  border-radius: 8px;
  word-break: break-all;
  font-size: 0.9rem;
}

.activity-item {
  padding: 1rem;
  border-left: 3px solid var(--dracula-purple);
  background: var(--dracula-current-line);
  margin-bottom: 1rem;
  border-radius: 4px;
}

.activity-time {
  font-size: 0.85rem;
  color: var(--dracula-comment);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.stat-card {
  background: var(--dracula-current-line);
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--dracula-purple);
  text-align: center;
  transition: all 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.stat-value {
  font-size: 2rem;
  font-weight: bold;
  color: var(--dracula-cyan);
  margin: 0.5rem 0;
}

.stat-label {
  color: var(--dracula-comment);
  font-size: 0.875rem;
}

/* ============================================
   UTILITY CLASSES (NO INLINE STYLES)
   ============================================ */

/* Text utilities */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-comment {
  color: var(--dracula-comment);
}

.text-error {
  color: var(--dracula-red);
}

.text-success {
  color: var(--dracula-green);
}

.text-sm {
  font-size: 0.9rem;
}

/* Display utilities */
.display-none {
  display: none;
}

.overflow-auto {
  overflow-x: auto;
}

/* Spacing utilities */
.padding-2 {
  padding: 2rem;
}

.padding-top-sm {
  padding-top: 0.5rem;
}

.margin-top-sm {
  margin-top: 0.5rem;
}

/* Badge styles */
.badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
}

.badge-admin {
  background: var(--dracula-red);
  color: white;
}

.badge-user {
  background: var(--dracula-purple);
  color: white;
}

/* Table utility styles */
.table-full {
  width: 100%;
  border-collapse: collapse;
}

.table-border-bottom {
  border-bottom: 2px solid var(--dracula-comment);
}

.table-border-row {
  border-bottom: 1px solid var(--dracula-comment);
}

.table-cell {
  padding: 1rem;
}

.table-cell-right {
  padding: 1rem;
  text-align: right;
}

/* Button utilities */
.btn-delete {
  background: var(--dracula-red);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.btn-delete:hover {
  opacity: 0.8;
}

/* Loading state utilities */
.loading-text {
  text-align: center;
  color: var(--dracula-comment);
  padding: 2rem;
}

/* Notification badge */
.notification-badge {
  background: var(--dracula-red);
  color: white;
  border-radius: 50%;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: bold;
  margin-left: 0.5rem;
}

/* Stat value variations */
.stat-value-success {
  font-size: 1.5rem;
  color: var(--dracula-green);
}

/* Table cell variations */
.table-cell-mono {
  padding: 1rem;
  font-family: var(--font-mono);
  color: var(--dracula-cyan);
}

.table-cell-mono-plain {
  padding: 1rem;
  font-family: var(--font-mono);
}

.table-cell-comment {
  padding: 1rem;
  color: var(--dracula-comment);
  font-size: 0.9rem;
}

/* Button variations */
.btn-edit {
  background: var(--dracula-purple);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.btn-edit:hover {
  opacity: 0.8;
}

.btn-revoke {
  background: var(--dracula-orange);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.btn-revoke:hover {
  opacity: 0.8;
}

/* Table size variations */
.table-small {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

/* Table cell size variations */
.table-cell-sm {
  padding: 0.75rem;
}

.table-cell-sm-mono {
  padding: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.table-cell-sm-cyan {
  padding: 0.75rem;
  color: var(--dracula-cyan);
}

.table-cell-sm-comment {
  padding: 0.75rem;
  color: var(--dracula-comment);
}

/* ============================================
   ADMIN SETTINGS - MOBILE FIRST
   ============================================ */

.settings-category {
  background: var(--dracula-current-line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.settings-category-title {
  margin: 0 0 var(--space-md) 0;
  color: var(--dracula-purple);
  font-size: 1.1rem;
}

.settings-grid {
  display: grid;
  gap: var(--space-md);
}

.setting-item {
  background: var(--dracula-bg);
  border: 1px solid var(--dracula-comment);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: grid;
  gap: var(--space-sm);
}

.setting-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.setting-name {
  font-weight: 600;
  color: var(--dracula-foreground);
}

.setting-key {
  font-size: 0.85rem;
  color: var(--dracula-cyan);
  font-family: var(--font-mono);
}

.setting-description {
  font-size: 0.85rem;
  color: var(--dracula-comment);
  margin-top: 0.25rem;
}

.setting-value {
  margin-top: var(--space-sm);
}

/* Desktop: side-by-side layout */
@media (min-width: 768px) {
  .setting-item {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .setting-value {
    margin-top: 0;
    min-width: 200px;
  }
}

/* Admin tables - mobile responsive */
.admin-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 720px) {
  .table-full,
  .table-small {
    font-size: 0.85rem;
  }

  .table-cell,
  .table-cell-sm {
    padding: 0.5rem;
  }

  .table-cell-mono,
  .table-cell-mono-plain {
    font-size: 0.75rem;
  }
}

/* ============================================
   ADMIN HEADER & NAVIGATION (from partials)
   ============================================ */

.admin-header {
    background: var(--dracula-bg);
    padding: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--dracula-current-line);
}

.admin-header-content {
    max-width: 1400px;
    margin: 0 auto;
}

.admin-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.breadcrumb-link {
    color: var(--dracula-cyan);
    text-decoration: none;
}

.breadcrumb-link:hover {
    text-decoration: underline;
}

.breadcrumb-separator {
    color: var(--dracula-comment);
}

.breadcrumb-current {
    color: var(--dracula-foreground);
}

.admin-page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dracula-purple);
    margin: 0;
}

.admin-page-description {
    color: var(--dracula-comment);
    margin: 0.5rem 0 0 0;
    font-size: 1rem;
}

.admin-header-actions {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
}

.admin-nav {
    background: var(--dracula-current-line);
    border-bottom: 2px solid var(--dracula-purple);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.admin-nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0 2rem;
    gap: 2rem;
}

.admin-nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
}

.admin-icon {
    font-size: 1.5rem;
}

.admin-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dracula-purple);
}

.admin-nav-menu {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    overflow-x: auto;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    color: var(--dracula-foreground);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-weight: 500;
}

.admin-nav-link:hover {
    background: rgba(189, 147, 249, 0.1);
    color: var(--dracula-purple);
}

.admin-nav-link.active {
    color: var(--dracula-purple);
    border-bottom-color: var(--dracula-purple);
    background: rgba(189, 147, 249, 0.05);
}

.nav-icon {
    font-size: 1.1rem;
}

.admin-nav-user {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--dracula-purple);
    color: var(--dracula-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.user-name {
    color: var(--dracula-foreground);
    font-weight: 500;
    font-size: 0.9rem;
}

.admin-nav-link.logout {
    color: var(--dracula-red);
    padding: 0.75rem 1rem;
    border-radius: 6px;
}

.admin-nav-link.logout:hover {
    background: rgba(255, 85, 85, 0.1);
}

@media (max-width: 1200px) {
    .admin-nav-menu {
        gap: 0.25rem;
    }
    .admin-nav-link {
        padding: 1rem 0.75rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .admin-header {
        padding: 1.5rem 1rem;
    }
    .admin-page-title {
        font-size: 1.5rem;
    }
    .admin-nav-container {
        flex-direction: column;
        gap: 1rem;
    }
    .admin-nav-menu {
        width: 100%;
        justify-content: flex-start;
    }
    .admin-nav-user {
        width: 100%;
        justify-content: space-between;
        border-top: 1px solid var(--dracula-comment);
        padding-top: 1rem;
    }
}

/* ============================================
   JAVASCRIPT ERROR DISPLAYS (NON-INLINE)
   ============================================ */

.js-error-display-red {
  background: var(--dracula-red);
  color: var(--dracula-bg);
  padding: 0.75rem;
  border-radius: var(--radius-md);
  margin: 0.5rem 0;
  text-align: center;
}

.js-error-display-orange {
  background: var(--dracula-orange);
  color: var(--dracula-bg);
  padding: 0.75rem;
  border-radius: var(--radius-md);
  margin: 0.5rem 0;
  text-align: center;
  font-size: 0.875rem;
}

/* ============================================
   VISIBILITY UTILITIES
   ============================================ */

.location-form-visible {
  display: block !important;
}

.earthquake-card-hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(139, 233, 253, 0.3);
}

/* ============================================
   SCREEN READER ONLY
   ============================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================
   AUTOCOMPLETE & FORM UTILITIES
   ============================================ */

/* Autocomplete Dropdown Visibility */
.autocomplete-dropdown-visible {
  display: block !important;
}

/* Setup Error Display */
.setup-error-visible {
  display: block !important;
}

/* ============================================
   UTILITY CLASSES
   Per AI.md PART 16: NO inline CSS - use classes
   ============================================ */

/* Display Utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

/* Flex Utilities */
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.align-center { align-items: center !important; }
.align-stretch { align-items: stretch !important; }
.gap-1 { gap: var(--space-sm) !important; }
.gap-2 { gap: var(--space-md) !important; }
.gap-3 { gap: var(--space-lg) !important; }

/* Text Alignment */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* Margin Utilities */
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--space-sm) !important; }
.m-2 { margin: var(--space-md) !important; }
.m-3 { margin: var(--space-lg) !important; }
.m-4 { margin: var(--space-xl) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-sm) !important; }
.mt-2 { margin-top: var(--space-md) !important; }
.mt-3 { margin-top: var(--space-lg) !important; }
.mt-4 { margin-top: var(--space-xl) !important; }
.mt-5 { margin-top: var(--space-2xl) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-sm) !important; }
.mb-2 { margin-bottom: var(--space-md) !important; }
.mb-3 { margin-bottom: var(--space-lg) !important; }
.mb-4 { margin-bottom: var(--space-xl) !important; }
.mb-5 { margin-bottom: var(--space-2xl) !important; }

.my-2 { margin-top: var(--space-md) !important; margin-bottom: var(--space-md) !important; }
.my-3 { margin-top: var(--space-lg) !important; margin-bottom: var(--space-lg) !important; }
.my-4 { margin-top: var(--space-xl) !important; margin-bottom: var(--space-xl) !important; }

.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Padding Utilities */
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--space-sm) !important; }
.p-2 { padding: var(--space-md) !important; }
.p-3 { padding: var(--space-lg) !important; }
.p-4 { padding: var(--space-xl) !important; }
.p-5 { padding: var(--space-2xl) !important; }

.pt-0 { padding-top: 0 !important; }
.pt-2 { padding-top: var(--space-md) !important; }
.pt-3 { padding-top: var(--space-lg) !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-2 { padding-bottom: var(--space-md) !important; }
.pb-3 { padding-bottom: var(--space-lg) !important; }

.py-2 { padding-top: var(--space-md) !important; padding-bottom: var(--space-md) !important; }
.py-3 { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; }

.px-2 { padding-left: var(--space-md) !important; padding-right: var(--space-md) !important; }
.px-3 { padding-left: var(--space-lg) !important; padding-right: var(--space-lg) !important; }

/* Width Utilities */
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }
.w-50 { width: 50% !important; }
.max-w-sm { max-width: 24rem !important; }
.max-w-md { max-width: 32rem !important; }
.max-w-lg { max-width: 48rem !important; }
.flex-1 { flex: 1 !important; }
.min-w-60 { min-width: 60px !important; }

/* Heading/Section Title Styles */
.section-title {
  color: var(--dracula-cyan);
  margin-bottom: var(--space-md);
  font-size: 1.1rem;
}

/* Duration Label Styles */
.duration-label-success { color: var(--dracula-green); font-weight: bold; min-width: 60px; }
.duration-label-info { color: var(--dracula-cyan); font-weight: bold; min-width: 60px; }
.duration-label-warning { color: var(--dracula-orange); font-weight: bold; min-width: 60px; }

/* Info Box Style */
.info-box-styled {
  background: var(--dracula-current-line);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin-top: var(--space-md);
  border-left: 4px solid var(--dracula-purple);
}

.info-box-styled p {
  margin: 0;
  color: var(--dracula-foreground);
  font-size: 0.9rem;
}

/* Font Size Utilities */
.fs-xs { font-size: 0.75rem !important; }
.fs-sm { font-size: 0.875rem !important; }
.fs-base { font-size: 1rem !important; }
.fs-lg { font-size: 1.125rem !important; }
.fs-xl { font-size: 1.25rem !important; }
.fs-2xl { font-size: 1.5rem !important; }
.fs-3xl { font-size: 2rem !important; }
.fs-4xl { font-size: 3rem !important; }

/* Font Weight Utilities */
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }

/* Text Color Utilities */
.text-muted { color: var(--dracula-comment) !important; }
.text-primary { color: var(--dracula-purple) !important; }
.text-success { color: var(--dracula-green) !important; }
.text-warning { color: var(--dracula-orange) !important; }
.text-danger { color: var(--dracula-red) !important; }
.text-info { color: var(--dracula-cyan) !important; }

/* Background Color Utilities */
.bg-current-line { background-color: var(--dracula-current-line) !important; }
.bg-selection { background-color: var(--dracula-selection) !important; }

/* Border Utilities */
.border-0 { border: none !important; }
.rounded { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* Empty State Styling */
.empty-state {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--dracula-comment);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
}

.empty-state-text {
  margin-top: var(--space-md);
  font-size: 0.875rem;
}

/* Modal Hidden State */
.modal-hidden {
  display: none;
}

/* Back Link Styling */
.back-link {
  text-align: center;
  margin-top: 2.5rem;
  color: var(--dracula-comment);
}

.back-link a {
  color: var(--dracula-cyan);
  text-decoration: none;
}

.back-link a:hover {
  text-decoration: underline;
}

/* ============================================
   ADMIN NOTIFICATION/SETTINGS UTILITIES
   AI.md PART 16: External stylesheets only
   ============================================ */

/* Section styling for admin pages */
.section-title {
  color: var(--dracula-purple);
  margin-top: 0;
}

.subsection-title {
  color: var(--dracula-cyan);
  margin-bottom: var(--space-md);
  font-size: 1.1rem;
}

/* Checkbox/toggle row layout */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
}

.checkbox-hint {
  display: block;
  margin-left: var(--space-lg);
}

/* Settings grid for responsive forms */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

/* Range slider row */
.slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.slider-label {
  min-width: 60px;
  font-weight: bold;
}

.slider-label-success { color: var(--dracula-green); }
.slider-label-info { color: var(--dracula-cyan); }
.slider-label-warning { color: var(--dracula-orange); }

/* Info/note box */
.note-box {
  background: var(--dracula-current-line);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-top: var(--space-md);
  border-left: 4px solid var(--dracula-purple);
}

.note-box p {
  margin: 0;
  color: var(--dracula-foreground);
  font-size: 0.9rem;
}

/* Settings form label */
.settings-label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: 600;
}

/* Additional display utilities */
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-grid { display: grid !important; }

/* Cursor utilities */
.cursor-pointer { cursor: pointer !important; }

/* Additional margin utilities */
.ml-md { margin-left: var(--space-md) !important; }
.ml-lg { margin-left: var(--space-lg) !important; }
.mr-md { margin-right: var(--space-md) !important; }
.mr-lg { margin-right: var(--space-lg) !important; }

/* Width utilities */
.min-w-60 { min-width: 60px; }
.w-full { width: 100% !important; }

/* Flex utilities for slider/input */
.flex-grow { flex: 1 !important; }

/* Font utilities */
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.text-sm { font-size: 0.875rem !important; }
.text-xs { font-size: 0.75rem !important; }

/* Additional padding utilities */
.pt-md { padding-top: var(--space-md) !important; }
.pb-md { padding-bottom: var(--space-md) !important; }
.pl-md { padding-left: var(--space-md) !important; }
.pr-md { padding-right: var(--space-md) !important; }

/* ============================================
   TOR HIDDEN SERVICE STYLES
   AI.md PART 16: External stylesheets only
   ============================================ */

/* Status indicator dot */
.status-indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: var(--space-sm);
}

.status-connected { background: var(--dracula-green); }
.status-disconnected { background: var(--dracula-comment); }
.status-error { background: var(--dracula-red); }

/* Onion address display box */
.onion-address-box {
  background: var(--dracula-bg);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  margin: var(--space-md) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Vanity generation progress */
.vanity-progress {
  background: var(--dracula-bg);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-top: var(--space-md);
}

.progress-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--dracula-purple);
}

.stat-label {
  font-size: 0.875rem;
  color: var(--dracula-comment);
}

/* Help/info section with cyan border */
.help-section {
  background: var(--dracula-bg);
  padding: var(--space-lg);
  border-radius: var(--radius-sm);
  margin-top: var(--space-md);
  border-left: 4px solid var(--dracula-cyan);
}

/* Status row layout */
.status-row {
  display: flex;
  align-items: center;
  margin: var(--space-md) 0;
}

/* Action buttons row */
.action-row {
  margin-top: var(--space-lg);
}

/* Success message box */
.success-box {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--dracula-green);
  color: var(--dracula-bg);
  border-radius: var(--radius-sm);
}

/* Warning text */
.warning-text {
  margin-top: var(--space-md);
  color: var(--dracula-red);
}

/* Code/pre block styling */
.code-block {
  background: var(--dracula-bg);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

/* Table styling */
.data-table {
  width: 100%;
  margin-top: var(--space-sm);
}

.data-table th,
.data-table td {
  text-align: left;
  padding: var(--space-sm);
}

/* Modal button row */
.modal-actions {
  margin-top: var(--space-lg);
}

/* ============================================
   SSL/TLS CERTIFICATE MANAGEMENT STYLES
   AI.md PART 16: External stylesheets only
   ============================================ */

/* Info grid for certificate details */
.info-grid {
  display: grid;
  gap: 0.75rem;
  margin: var(--space-md) 0;
}

.info-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .info-row {
    grid-template-columns: 1fr;
  }
}

.info-label {
  font-weight: 500;
  color: var(--dracula-comment);
}

.info-value {
  color: var(--dracula-foreground);
  word-break: break-all;
}

/* Status badges for SSL */
.status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 500;
}

.status-active {
  background: rgba(80, 250, 123, 0.2);
  color: var(--dracula-green);
}

.status-expiring {
  background: rgba(255, 184, 108, 0.2);
  color: var(--dracula-orange);
}

.status-expired {
  background: rgba(255, 85, 85, 0.2);
  color: var(--dracula-red);
}

.status-none {
  background: var(--dracula-selection);
  color: var(--dracula-comment);
}

/* Progress bar */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--dracula-selection);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: var(--space-md) 0;
}

.progress-fill {
  height: 100%;
  background: var(--dracula-cyan);
  transition: width 0.3s ease;
}

.progress-fill.success { background: var(--dracula-green); }
.progress-fill.warning { background: var(--dracula-orange); }
.progress-fill.danger { background: var(--dracula-red); }

/* Setup wizard progress */
.setup-progress {
  margin: var(--space-lg) 0;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-sm);
  font-size: 0.75rem;
}

.progress-steps .step {
  color: var(--dracula-comment);
  text-align: center;
  flex: 1;
}

.progress-steps .step.active {
  color: var(--dracula-cyan);
  font-weight: 600;
}

.progress-steps .step.completed {
  color: var(--dracula-green);
}

/* Password fields toggle */
.password-fields {
  transition: opacity 0.2s ease;
}

.password-fields.hidden {
  display: none;
}

/* Checkbox label styling */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  padding: var(--space-sm) 0;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--dracula-cyan);
}

/* Setup wizard card */
.setup-card {
  max-width: 500px;
}

/* Token display box */
.token-display {
  margin: var(--space-lg) 0;
}

.token-box {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
  margin-top: var(--space-sm);
}

.token-value {
  flex: 1;
  padding: var(--space-md);
  background: var(--dracula-bg);
  border: 1px solid var(--dracula-selection);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  overflow-x: auto;
}

.btn-copy {
  padding: var(--space-sm) var(--space-md);
  background: var(--dracula-selection);
  color: var(--dracula-fg);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}

.btn-copy:hover {
  background: var(--dracula-comment);
}

/* Service options */
.service-option {
  padding: var(--space-md);
  background: var(--dracula-bg);
  border: 1px solid var(--dracula-selection);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

.service-option .checkbox-label.disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.service-status {
  float: right;
}

.sub-options {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--dracula-selection);
}

.sub-options.hidden {
  display: none;
}

/* Setup skip link */
.setup-skip {
  text-align: center;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--dracula-selection);
}

.setup-skip a {
  font-size: 0.875rem;
}

/* Checkbox confirm */
.checkbox-confirm {
  margin: var(--space-lg) 0;
  padding: var(--space-md);
  background: var(--dracula-bg);
  border-radius: var(--radius-sm);
}

/* QR code styling */
.totp-qr {
  text-align: center;
  padding: var(--space-md);
  background: var(--dracula-bg);
  border-radius: var(--radius-sm);
  margin: var(--space-md) 0;
}

.qr-code {
  max-width: 200px;
  margin: var(--space-md) auto;
  display: block;
}

/* Onion preview */
.onion-preview {
  margin-top: var(--space-sm);
}

/* Renewal schedule */
.renewal-schedule {
  background: var(--dracula-bg);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin: var(--space-md) 0;
}

.schedule-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--dracula-selection);
}

.schedule-item:last-child {
  border-bottom: none;
}

/* Timeline for history */
.timeline {
  position: relative;
  padding-left: 2rem;
  margin: var(--space-lg) 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--dracula-selection);
}

.timeline-item {
  position: relative;
  margin-bottom: var(--space-lg);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -1.5rem;
  top: 0.25rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dracula-current-line);
  border: 2px solid var(--dracula-cyan);
}

.timeline-item.completed::before {
  background: var(--dracula-green);
  border-color: var(--dracula-green);
}

.timeline-item.failed::before {
  background: var(--dracula-red);
  border-color: var(--dracula-red);
}

.timeline-title {
  font-weight: 500;
  color: var(--dracula-foreground);
}

.timeline-time {
  font-size: 0.85rem;
  color: var(--dracula-comment);
}

/* Loading spinner */
.loading {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--dracula-selection);
  border-radius: 50%;
  border-top-color: var(--dracula-purple);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Button group vertical layout */
.btn-group-vertical {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
}

/* Text utilities for alignment */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* Display none utility */
.d-none { display: none !important; }

/* Button group for inline buttons */
.button-group {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Toggle switch styles */
.toggle-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  font-weight: 600;
}

.toggle-input {
  width: 50px;
  height: 26px;
}

/* Action card for database/cache operations */
.action-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border: 1px solid var(--dracula-current-line);
  border-radius: var(--border-radius);
  background: var(--dracula-current-line);
}

.action-info h3 {
  margin: 0 0 var(--space-sm) 0;
  font-size: 1.125rem;
}

.action-info p {
  margin: 0 0 var(--space-sm) 0;
  color: var(--dracula-comment);
}

.action-info ul {
  margin: 0;
  padding-left: var(--space-md);
  color: var(--dracula-comment);
  font-size: 0.875rem;
}

.optimization-actions {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

/* Position utilities */
.position-relative { position: relative; }
.position-absolute { position: absolute; }

/* Password toggle button */
.btn-toggle-password {
  position: absolute;
  right: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.125rem;
  padding: 0;
}

.input-with-toggle {
  padding-right: 2.5rem;
}

/* Alert result for JS feedback */
.alert-result {
  margin-top: var(--space-md);
}

/* Margin Y utilities */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: var(--space-sm) !important; margin-bottom: var(--space-sm) !important; }
.my-2 { margin-top: var(--space-md) !important; margin-bottom: var(--space-md) !important; }
.my-3 { margin-top: var(--space-lg) !important; margin-bottom: var(--space-lg) !important; }
.my-4 { margin-top: var(--space-xl) !important; margin-bottom: var(--space-xl) !important; }

/* Cache status grid */
.cache-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* Toast notification for JS-created alerts */
.toast-notification {
  position: fixed;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 9999;
  min-width: 300px;
}

/* ============================================
   ADMIN TEMPLATE STYLES
   Extracted from inline style blocks per PART 16
   ============================================ */

/* Code editor textarea */
.code-editor {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  background-color: var(--dracula-current-line);
  border: 1px solid var(--dracula-selection);
  color: var(--dracula-foreground);
}

/* Required field indicator */
.required {
  color: var(--dracula-red);
}

/* Card description subtitle */
.card-description {
  color: var(--dracula-comment);
  margin-top: var(--space-xs);
  font-size: 0.875rem;
}

/* Margin top utilities */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-sm) !important; }
.mt-2 { margin-top: var(--space-md) !important; }
.mt-3 { margin-top: var(--space-lg) !important; }
.mt-4 { margin-top: var(--space-xl) !important; }

/* Stats grid for admin panels */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.stat-item {
  background: var(--dracula-current-line);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  text-align: center;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--dracula-comment);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dracula-cyan);
}

/* Settings form styles */
.settings-form .form-group {
  margin-bottom: var(--space-md);
}

/* Admin card sections */
.admin-card {
  background: var(--dracula-current-line);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  overflow: hidden;
}

.admin-card .card-header {
  padding: var(--space-md);
  border-bottom: 1px solid var(--dracula-selection);
}

.admin-card .card-body {
  padding: var(--space-md);
}

.admin-card .card-footer {
  padding: var(--space-md);
  border-top: 1px solid var(--dracula-selection);
  background: rgba(0, 0, 0, 0.1);
  font-size: 0.875rem;
}

.admin-card .card-footer p {
  margin: 0 0 var(--space-sm) 0;
}

.admin-card .card-footer p:last-child {
  margin-bottom: 0;
}

/* Admin content area */
.admin-content {
  padding: var(--space-lg);
}

.content-header {
  margin-bottom: var(--space-lg);
}

.content-header h1 {
  margin-bottom: var(--space-xs);
}

.content-header .subtitle {
  color: var(--dracula-comment);
  margin: 0;
}

/* Admin container layout */
.admin-container {
  display: flex;
  min-height: 100vh;
}

/* Form text help */
.form-text {
  display: block;
  margin-top: var(--space-xs);
  font-size: 0.8125rem;
  color: var(--dracula-comment);
}

/* Footer link styles */
.footer-link {
  color: var(--dracula-cyan);
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline;
}

/* Nav link styles */
.nav-link {
  color: var(--dracula-cyan);
  text-decoration: none;
}

.nav-link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Help Page Styles (moved from help.tmpl per AI.md PART 16)
   ========================================================================== */

.help-section {
  border-bottom: 1px solid var(--dracula-comment);
  padding: 1rem 0;
}

.help-summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--dracula-cyan);
  padding: 0.5rem;
  user-select: none;
}

.help-summary:hover {
  background: var(--dracula-current-line);
  border-radius: var(--radius-sm);
}

.help-content {
  padding: 1rem 1.5rem;
  color: var(--dracula-fg);
}

.help-content ul {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.help-content li {
  margin: 0.5rem 0;
}

/* ==========================================================================
   Health Page Styles (moved from healthz.tmpl per AI.md PART 16)
   ========================================================================== */

.health-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
}

.health-header {
  text-align: center;
  margin-bottom: 40px;
}

.health-status {
  font-size: 48px;
  margin: 20px 0;
}

.status-healthy { color: var(--dracula-green); }
.status-degraded { color: var(--dracula-orange); }
.status-unhealthy { color: var(--dracula-red); }

.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.health-card {
  background: var(--dracula-bg);
  border: 1px solid var(--dracula-selection);
  border-radius: 8px;
  padding: 20px;
}

.health-card h3 {
  margin: 0 0 15px 0;
  color: var(--dracula-purple);
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.check-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.check-ok { background: var(--dracula-green); color: var(--dracula-bg); }
.check-warning { background: var(--dracula-orange); color: var(--dracula-bg); }
.check-error { background: var(--dracula-red); color: var(--dracula-fg); }
.check-inactive { background: var(--dracula-comment); color: var(--dracula-fg); }

.metric {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--dracula-selection);
}

.metric:last-child {
  border-bottom: none;
}

.metric-label {
  color: var(--dracula-cyan);
}

.metric-value {
  color: var(--dracula-fg);
  font-weight: bold;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background: var(--dracula-selection);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 5px;
}

.progress-fill {
  height: 100%;
  transition: width 0.3s;
}

.progress-ok { background: var(--dracula-green); }
.progress-warning { background: var(--dracula-orange); }
.progress-critical { background: var(--dracula-red); }

/* ==========================================================================
   History Page Styles (moved from history.tmpl per AI.md PART 16)
   ========================================================================== */

.history-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.history-form {
  background: var(--dracula-current-line);
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.stats-summary {
  background: var(--dracula-current-line);
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--dracula-bg);
  padding: 1.5rem;
  border-radius: 4px;
  border-left: 4px solid var(--dracula-purple);
}

.stat-card h3 {
  margin: 0 0 0.5rem 0;
  color: var(--dracula-purple);
  font-size: 0.875rem;
  text-transform: uppercase;
}

.stat-card .value {
  font-size: 2rem;
  font-weight: bold;
  color: var(--dracula-fg);
}

.stat-card .label {
  color: var(--dracula-comment);
  font-size: 0.875rem;
}

.year-data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
  background: var(--dracula-current-line);
  border-radius: 8px;
  overflow: hidden;
}

.year-data-table thead {
  background: var(--dracula-bg);
}

.year-data-table th {
  padding: 1rem;
  text-align: left;
  color: var(--dracula-purple);
  font-weight: 600;
}

.year-data-table td {
  padding: 1rem;
  border-top: 1px solid var(--dracula-comment);
}

.year-data-table tbody tr:hover {
  background: var(--dracula-bg);
}

.warmest-year {
  background: var(--dracula-red) !important;
  color: white !important;
}

.coldest-year {
  background: var(--dracula-cyan) !important;
  color: var(--dracula-bg) !important;
}

.wettest-year {
  background: var(--dracula-comment) !important;
  color: white !important;
}

@media (max-width: 768px) {
  .history-container {
    padding: 1rem;
  }

  .year-data-table {
    font-size: 0.875rem;
  }

  .year-data-table th,
  .year-data-table td {
    padding: 0.5rem;
  }
}

/* ==========================================================================
   Setup Complete Page Styles (moved from server_setup_complete.tmpl per AI.md PART 16)
   ========================================================================== */

.admin-link {
  display: inline-block;
  margin: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--dracula-purple);
  color: var(--dracula-bg);
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  transition: background 0.2s;
}

.admin-link:hover {
  background: #9580ff;
}

.admin-link-secondary {
  background: var(--dracula-selection);
  color: var(--dracula-fg);
}

.admin-link-secondary:hover {
  background: var(--dracula-comment);
}

.isolation-note {
  margin-top: 2rem;
  padding: 1rem;
  background: rgba(139, 233, 253, 0.1);
  border: 1px solid var(--dracula-cyan);
  border-radius: 4px;
  font-size: 0.875rem;
  color: var(--dracula-cyan);
}

/* ==========================================================================
   Admin Login Page Styles (moved from login.tmpl per AI.md PART 16)
   ========================================================================== */

.login-container {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  margin: 0 auto;
}

.login-card {
  background: var(--dracula-current-line);
  border: 1px solid var(--dracula-comment);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--dracula-comment);
}

.login-title {
  margin: 0 0 0.25rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--dracula-fg);
}

.login-subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--dracula-comment);
}

/* ==========================================================================
   Admin Dashboard Styles (moved from dashboard.tmpl per AI.md PART 16)
   ========================================================================== */

.dashboard-header {
  margin-bottom: 2rem;
}

.dashboard-header h1 {
  margin: 0 0 0.5rem 0;
  font-size: 2rem;
  color: var(--dracula-fg);
}

.stat-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.stat-icon {
  color: var(--dracula-purple);
}

.stat-header h3 {
  margin: 0;
  font-size: 0.875rem;
  color: var(--dracula-comment);
  font-weight: 500;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--dracula-fg);
  margin-bottom: 0.5rem;
}

.stat-value.status-ok {
  color: var(--dracula-green);
}

.stat-value.status-warning {
  color: var(--dracula-yellow);
}

.stat-value.status-error {
  color: var(--dracula-red);
}

.stat-footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--dracula-comment);
}

.dashboard-section {
  background: var(--dracula-bg);
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--dracula-comment);
  margin-bottom: 1.5rem;
}

.dashboard-section h2 {
  margin: 0 0 1.5rem 0;
  font-size: 1.25rem;
  color: var(--dracula-fg);
}

/* Additional Login Page Styles */
.form-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.form-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.form-checkbox label {
  font-size: 0.875rem;
  color: var(--dracula-fg);
  cursor: pointer;
}

.btn-login {
  width: 100%;
  padding: 0.75rem;
  background: var(--dracula-purple);
  color: var(--dracula-bg);
  border: none;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-login:hover {
  background: #9580ff;
}

.btn-login:active {
  background: #7b68ee;
}

.login-footer {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.75rem;
  color: var(--dracula-comment);
}

.login-info {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--dracula-comment);
  line-height: 1.5;
}

.login-info p {
  margin: 0.5rem 0;
}

.login-help {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--dracula-comment);
  text-align: center;
  font-size: 0.875rem;
  color: var(--dracula-comment);
}

.login-help p {
  margin: 0.25rem 0;
}

.success-box {
  border: 1px solid var(--dracula-green);
  background: rgba(80, 250, 123, 0.1);
  padding: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.btn-secondary {
  display: block;
  text-align: center;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--dracula-purple);
  border: 2px solid var(--dracula-purple);
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: var(--dracula-purple);
  color: var(--dracula-background);
}

/* ==========================================================================
   Additional Dashboard Styles (moved from dashboard.tmpl per AI.md PART 16)
   ========================================================================== */

.resource-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.resource-card {
  background: var(--dracula-current-line);
  padding: 1rem;
  border-radius: 4px;
}

.resource-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.resource-name {
  color: var(--dracula-fg);
}

.resource-value {
  color: var(--dracula-purple);
  font-weight: 600;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.activity-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: var(--dracula-current-line);
  border-radius: 4px;
}

.activity-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
}

.activity-message {
  color: var(--dracula-fg);
  margin-bottom: 0.25rem;
}

.activity-time {
  font-size: 0.75rem;
  color: var(--dracula-comment);
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

/* ==========================================================================
   Admin Web Settings Styles (moved from admin_web.tmpl per AI.md PART 16)
   ========================================================================== */

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

.web-section {
  background: var(--dracula-current-line);
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.web-section h2 {
  margin-top: 0;
  color: var(--dracula-purple);
}

.btn-view {
  background: var(--dracula-cyan);
  color: var(--dracula-bg);
}

.preview-link {
  margin-top: 0.5rem;
}

.preview-link a {
  color: var(--dracula-cyan);
  text-decoration: none;
}

.preview-link a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Admin Standalone Page Styles (moved from admin templates per AI.md PART 16)
   Templates: admin-scheduler.tmpl, admin-metrics.tmpl, admin-system.tmpl, admin-domains.tmpl
   ========================================================================== */

/* Admin Page Layout */
.admin-page-header {
  background: var(--dracula-current-line);
  color: var(--dracula-foreground);
  padding: 1rem 2rem;
  box-shadow: var(--shadow-md);
}

.admin-page-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0;
}

.admin-page-breadcrumb {
  color: var(--dracula-comment);
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.admin-page-breadcrumb a {
  color: var(--dracula-cyan);
  text-decoration: none;
}

.admin-page-breadcrumb a:hover {
  text-decoration: underline;
}

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

.admin-page-container.wide {
  max-width: 1400px;
}

/* Navigation Links */
.admin-nav-links {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.admin-nav-link {
  padding: 0.5rem 1rem;
  background: var(--dracula-current-line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--dracula-foreground);
  transition: all 0.2s;
  box-shadow: var(--shadow-sm);
}

.admin-nav-link:hover {
  background: var(--dracula-purple);
  color: var(--dracula-bg);
}

/* Admin Cards */
.admin-page-card {
  background: var(--dracula-current-line);
  border-radius: var(--radius-lg);
  padding: 1.5rem 2rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 2rem;
}

.admin-page-card h2 {
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  color: var(--dracula-purple);
  border-bottom: 2px solid var(--dracula-purple);
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Scheduler Task Sections */
.task-section {
  background: var(--dracula-bg);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--dracula-cyan);
}

.task-section.critical {
  border-left-color: var(--dracula-red);
  background: rgba(255, 85, 85, 0.1);
}

.task-section h3 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: var(--dracula-foreground);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.task-category {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dracula-comment);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 2rem 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--dracula-selection);
}

/* Warning Badge */
.warning-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--dracula-orange);
  color: var(--dracula-bg);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 500;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 28px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--dracula-comment);
  transition: 0.4s;
  border-radius: 28px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: var(--dracula-foreground);
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: var(--dracula-green);
}

input:checked + .toggle-slider:before {
  transform: translateX(32px);
}

input:disabled + .toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form Row Grid */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Help Text & Icon */
.help-text {
  font-size: 0.85rem;
  color: var(--dracula-comment);
  margin-top: 0.25rem;
}

.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: var(--dracula-cyan);
  color: var(--dracula-bg);
  border-radius: 50%;
  font-size: 0.75rem;
  margin-left: 0.5rem;
  cursor: help;
}

/* Cron Preview */
.cron-preview {
  background: var(--dracula-selection);
  border-left: 3px solid var(--dracula-cyan);
  padding: 0.75rem;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  border-radius: var(--radius-md);
}

.cron-preview-title {
  font-weight: 600;
  color: var(--dracula-foreground);
  margin-bottom: 0.25rem;
}

.cron-preview-times {
  font-family: var(--font-mono);
  color: var(--dracula-cyan);
}

/* Button Group */
.btn-group {
  display: flex;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
}

.btn-group.vertical {
  flex-direction: column;
}

.btn-group-vertical {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Admin Page Alerts */
.admin-alert {
  padding: 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  display: none;
}

.admin-alert.show {
  display: block;
}

.admin-alert-success {
  background: rgba(80, 250, 123, 0.2);
  color: var(--dracula-green);
  border: 1px solid var(--dracula-green);
}

.admin-alert-error {
  background: rgba(255, 85, 85, 0.2);
  color: var(--dracula-red);
  border: 1px solid var(--dracula-red);
}

.admin-alert-warning {
  background: rgba(255, 184, 108, 0.2);
  color: var(--dracula-orange);
  border: 1px solid var(--dracula-orange);
}

.admin-alert-info {
  background: rgba(139, 233, 253, 0.2);
  color: var(--dracula-cyan);
  border: 1px solid var(--dracula-cyan);
}

/* Metrics Page Specific Styles */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
}

@media (max-width: 768px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }
}

.metric-preview {
  background: var(--dracula-bg);
  border: 1px solid var(--dracula-selection);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  max-height: 300px;
  overflow-y: auto;
}

.metric-line {
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--dracula-selection);
}

.metric-line:last-child {
  border-bottom: none;
}

.metric-item {
  background: var(--dracula-bg);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 0.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
}

.metric-info h3 {
  font-size: 1rem;
  color: var(--dracula-foreground);
  margin-bottom: 0.25rem;
}

.metric-info p {
  font-size: 0.85rem;
  color: var(--dracula-comment);
  margin-bottom: 0;
}

/* Code Block */
.code-block {
  background: var(--dracula-bg);
  color: var(--dracula-foreground);
  padding: 1rem;
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  margin: 1rem 0;
  border: 1px solid var(--dracula-selection);
}

/* Tabs */
.admin-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--dracula-selection);
  flex-wrap: wrap;
}

.admin-tab {
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--dracula-comment);
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
  margin-bottom: -2px;
}

.admin-tab:hover {
  color: var(--dracula-foreground);
}

.admin-tab.active {
  color: var(--dracula-cyan);
  border-bottom-color: var(--dracula-cyan);
}

.admin-tab-content {
  display: none;
}

.admin-tab-content.active {
  display: block;
}

/* Stats Box for Metrics */
.stats-box {
  background: var(--dracula-bg);
  padding: 1rem;
  border-radius: var(--radius-md);
  text-align: center;
}

.stats-box .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dracula-cyan);
}

.stats-box .stat-label {
  font-size: 0.85rem;
  color: var(--dracula-comment);
  margin-top: 0.25rem;
}

/* System Info Grid */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.info-item {
  padding: 12px;
  border-bottom: 1px solid var(--dracula-selection);
}

.info-label {
  font-size: 0.8rem;
  color: var(--dracula-comment);
  margin-bottom: 5px;
  text-transform: uppercase;
}

.info-value {
  font-size: 0.95rem;
  color: var(--dracula-foreground);
  font-weight: 500;
  word-break: break-all;
}

/* Domains Page Specific Styles */
.domains-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
}

.domain-card {
  background: var(--dracula-current-line);
  border: 1px solid var(--dracula-selection);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
}

.domain-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 10px;
}

.domain-name {
  font-size: 1.3em;
  font-weight: bold;
  color: var(--dracula-foreground);
}

.domain-status {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.status-badge {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.85em;
  font-weight: 600;
}

.status-verified {
  background: rgba(80, 250, 123, 0.2);
  color: var(--dracula-green);
}

.status-unverified {
  background: rgba(255, 184, 108, 0.2);
  color: var(--dracula-orange);
}

.status-active {
  background: rgba(139, 233, 253, 0.2);
  color: var(--dracula-cyan);
}

.status-inactive {
  background: rgba(255, 85, 85, 0.2);
  color: var(--dracula-red);
}

.domain-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 15px;
  padding: 15px;
  background: var(--dracula-bg);
  border-radius: var(--radius-md);
}

.detail-item {
  display: flex;
  flex-direction: column;
}

.detail-label {
  font-size: 0.85em;
  color: var(--dracula-comment);
  margin-bottom: 4px;
}

.detail-value {
  font-weight: 500;
  color: var(--dracula-foreground);
}

.domain-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.add-domain-form {
  background: var(--dracula-current-line);
  border: 1px solid var(--dracula-selection);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 30px;
}

.verification-info {
  background: rgba(139, 233, 253, 0.1);
  border: 1px solid var(--dracula-cyan);
  border-radius: var(--radius-md);
  padding: 15px;
  margin-top: 15px;
}

.verification-info h4 {
  margin-top: 0;
  color: var(--dracula-cyan);
}

.verification-code {
  background: var(--dracula-bg);
  border: 1px solid var(--dracula-cyan);
  border-radius: var(--radius-md);
  padding: 10px;
  font-family: var(--font-mono);
  margin: 10px 0;
  word-break: break-all;
  color: var(--dracula-foreground);
}

.ssl-info {
  background: var(--dracula-bg);
  padding: 10px;
  border-radius: var(--radius-md);
  font-size: 0.9em;
  margin-top: 10px;
  color: var(--dracula-comment);
}

/* Loading state */
.loading {
  font-size: 0.9rem;
  color: var(--dracula-comment);
}

/* Action buttons row */
.action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 15px;
}