:root {
  color-scheme: dark;
  font-synthesis: none;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: -0.01em;
}

.glass-card {
  backdrop-filter: blur(28px);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 64, 175, 0.35) 100%);
  border: 1px solid rgba(148, 163, 184, 0.12);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.45);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.glass-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 28px 56px rgba(56, 189, 248, 0.15);
  transform: translateY(-2px);
}

.status-banner {
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, rgba(15, 23, 42, 0.85) 100%);
}

.status-banner[data-tone='success'] {
  border-color: rgba(16, 185, 129, 0.35);
  color: rgba(209, 250, 229, 0.9);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(15, 23, 42, 0.85) 100%);
}

.status-banner[data-tone='neutral'] {
  border-color: rgba(148, 163, 184, 0.3);
  color: rgba(226, 232, 240, 0.8);
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.16) 0%, rgba(15, 23, 42, 0.85) 100%);
}

.status-banner[data-tone='danger'] {
  border-color: rgba(248, 113, 113, 0.35);
  color: rgba(254, 205, 211, 0.9);
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.2) 0%, rgba(15, 23, 42, 0.85) 100%);
}

#timeline-events li {
  border: 1px solid rgba(148, 163, 184, 0.14);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

#timeline-events li:hover {
  border-color: rgba(56, 189, 248, 0.35);
  transform: translateX(4px);
}

#call-history-list li {
  border: 1px solid rgba(148, 163, 184, 0.1);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

#call-history-list li:hover {
  border-color: rgba(56, 189, 248, 0.25);
  transform: translateY(-1px);
}

.dialpad-key:active {
  transform: translateY(1px);
  background: rgba(14, 165, 233, 0.15);
  border-color: rgba(56, 189, 248, 0.5);
}

button:focus-visible,
.dialpad-key:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.6);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  header .shadow-hero {
    display: none;
  }
}