/* ===== iOS/Glassmorphism Theme (light/dark) ===== */
:root{
  --bg: linear-gradient(135deg,#f6f8fc 0%,#eef1f7 100%);
  --text: #0b1220;
  --muted: #6b7280;
  --primary: #0a84ff;      /* iOS Blau */
  --primary-ink: #fff;
  --card-bg: rgba(255,255,255,.65);
  --card-stroke: rgba(255,255,255,.45);
  --shadow: 0 10px 30px rgba(15,23,42,.08);
  --radius: 18px;
  --blur: 16px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: radial-gradient(1200px 800px at 10% -10%, #1f3259 0%, #1f3259 30%, #233662 100%);
    --text: #e5e7eb;
    --muted: #9aa3b2;
    --primary: #0a84ff;
    --primary-ink: #fff;
    --card-bg: rgba(13,18,31,.55);
    --card-stroke: rgba(255,255,255,.08);
    --shadow: 0 10px 30px rgba(0,0,0,.35);
  }
}

/* @media (prefers-color-scheme: dark){
  :root{
    --bg: linear-gradient(135deg,#f1f3f8 0%,#e6ebf2 100%);
    --text: #1c1c1e;
    --muted: #555;
    --primary: #007aff;
    --primary-ink: #fff;
    --card-bg: rgba(255,255,255,0.6);
    --card-stroke: rgba(255,255,255,0.4);
    --shadow: 0 8px 24px rgba(0,0,0,.1);
  }
} */


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "SF Pro Text", Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg) fixed;
  background-size:cover;
}

/* Layout */
.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 24px;
}

/* Glass Nav */
.nav{
  display:flex; gap:14px; align-items:center; padding:10px 14px; margin:12px 0 20px;
  border-radius: var(--radius);
  background: var(--card-bg);
  backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
  border: 1px solid var(--card-stroke);
  overflow:auto;
}
.nav a{
  display:inline-block; padding:8px 12px; border-radius:12px; text-decoration:none;
  color:var(--text); font-weight:500; opacity:.9;
}
.nav a:hover{ background: rgba(0,0,0,.06) }
@media (prefers-color-scheme: dark){
  .nav a:hover{ background: rgba(255,255,255,.06) }
}

/* Cards */
.card{
  border-radius: var(--radius);
  background: var(--card-bg);
  backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
  border: 1px solid var(--card-stroke);
  padding: 20px;
}
.card + .card{ margin-top:16px }

/* Headings */
h1{ margin: 0 0 14px; font-size: 28px; letter-spacing:.2px }
p{ color: var(--muted); line-height:1.55 }

/* Forms */
form{ display:grid; gap:12px; }
input, button{
  font: inherit;
}
input[type="text"],input[type="email"],input[type="password"],input[type="date"]{
  width:100%; padding:11px 12px; border-radius:12px; border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
}
@media (prefers-color-scheme: dark){
  input[type="text"],input[type="email"],input[type="password"],input[type="date"]{
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.06); color: var(--text);
  }
}
button{
  padding:12px 14px; border:none; border-radius:14px; font-weight:600; cursor:pointer;
  background: var(--primary); color: var(--primary-ink);
  box-shadow: 0 6px 18px rgba(10,132,255,.35);
}
button:hover{ filter:brightness(.97) }
button:active{ transform: translateY(1px) }

/* Map card */
#family-map{
  height: 480px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--card-stroke);
}

/* Links */
a{ color: var(--primary); text-decoration:none }
a:hover{ text-decoration:underline }

/* Helper grid */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.grid-zip{ display:grid; grid-template-columns:140px 1fr; gap:12px }