/* Family Hub — custom styles (extracted from index.html <style> block) */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}
body {
  background-color: #0b0d17;
  background-image:
    radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.12) 0px, transparent 50%),
    radial-gradient(at 100% 10%, rgba(56, 189, 248, 0.08) 0px, transparent 50%),
    radial-gradient(at 50% 100%, rgba(139, 92, 246, 0.07) 0px, transparent 50%);
  color: #f8fafc;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  padding-top: max(0.5rem, calc(var(--sat) + 0.25rem));
  padding-bottom: max(4.25rem, calc(var(--sab) + 3.75rem));
}
.glass-card {
  background: rgba(18, 23, 38, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 15px 35px -10px rgba(0,0,0,0.5);
}
.glass-nav {
  background: rgba(13, 17, 28, 0.88);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: max(0.75rem, var(--sab));
}
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.2s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.dir-active {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.5);
  color: #34d399;
  font-weight: 700;
}
.dir-inactive {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
}
.city-pill {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255,255,255,0.08);
  color: #94a3b8;
}
.city-pill.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.5);
  color: #34d399;
}
#header-refresh-icon { display: inline-block; transition: transform 0.5s ease; }

/* Pulsing colon animation */
@keyframes pulseColon {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
.pulse-colon {
  display: inline-block;
  animation: pulseColon 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Explicit dot color & size classes */
.w-1\.5, .w-1\.5 { width: 0.375rem; }
.h-1\.5, .h-1\.5 { height: 0.375rem; }
.w-2 { width: 0.5rem; }
.h-2 { height: 0.5rem; }
.w-3 { width: 0.75rem; }
.h-3 { height: 0.75rem; }
.bg-purple-400 { background-color: #c084fc; }
.bg-red-400 { background-color: #f87171; }
.bg-rose-400 { background-color: #fb7185; }
.bg-amber-400 { background-color: #fbbf24; }
.bg-emerald-400 { background-color: #34d399; }
.bg-sky-400 { background-color: #38bdf8; }