:root { --bg:#0b1220; --card:#0f1b33; --text:#e9eefc; --muted:#a9b7d4; --line:#203055; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; background:#060b16; color:var(--text); }
a{ color:var(--text); text-decoration:none; }
.container{ width:min(1100px, 92vw); margin:0 auto; padding:1.2rem 0; }
.topbar{ background:linear-gradient(180deg, #0b1220, #070c18); border-bottom:1px solid var(--line); position:sticky; top:0; }
.brand a{ font-weight:700; letter-spacing:.3px; }
.nav{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.topbar .container{ display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.footer{ border-top:1px solid var(--line); margin-top:2.5rem; color:var(--muted); }

h1{ margin:.2rem 0 1rem; font-size:2rem; }
h2{ margin:.2rem 0 1rem; font-size:1.2rem; color:#cfe0ff; }
p{ color:var(--muted); line-height:1.5; }

.panel{ background:rgba(15,27,51,.85); border:1px solid var(--line); border-radius:18px; padding:1rem; margin:1rem 0; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }
@media (max-width: 920px){ .grid2,.grid3{ grid-template-columns:1fr; } }

label{ display:block; margin:.7rem 0 .35rem; font-weight:600; color:#d7e4ff; }
input,select,textarea{
  width:100%; padding:.7rem .75rem; border-radius:14px;
  border:1px solid #23365f; background:#080f20; color:var(--text);
}
textarea{ resize:vertical; }
.row{ display:flex; gap:.6rem; align-items:center; }
.row input[type="checkbox"]{ width:auto; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.4rem; padding:.65rem .95rem; border-radius:14px;
  border:1px solid #2a3f71; background:#0c1631; color:var(--text);
  cursor:pointer;
}
.btn:hover{ border-color:#3b5bb0; }
.btn.primary{ background:linear-gradient(180deg, #1a3b8a, #142c66); border-color:#3b5bb0; }
.btn.ghost{ background:transparent; border-color:#2a3f71; }

.alert{ border:1px solid #2a3f71; background:rgba(10,20,45,.7); padding:.75rem 1rem; border-radius:16px; color:var(--muted); margin:1rem 0; }
.alert.success{ border-color:rgba(46, 204, 113, .5); color:#bff0d2; }
.val, .val-summary{ color:#ffb1b1; }
.muted{ color:var(--muted); margin:.4rem 0 0; }

.cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; margin-top:1rem; }
@media (max-width: 920px){ .cards{ grid-template-columns:1fr; } }
.card{
  background:rgba(15,27,51,.85); border:1px solid var(--line);
  border-radius:18px; padding:1rem; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.card h3{ margin:.2rem 0 .5rem; }
.card:hover{ border-color:#3b5bb0; transform:translateY(-1px); transition:.15s ease; }
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ border-bottom:1px solid #203055; padding:.6rem .4rem; text-align:left; }
.kid-row{ padding:.8rem; border:1px dashed #22365f; border-radius:16px; margin:.8rem 0; background:rgba(8,15,32,.35); }
.kid-actions{ display:flex; align-items:flex-end; justify-content:flex-end; }

/* Responsive homepage image wrapper */
.home-hero {
    width: 100%;
    min-height: 100svh; /* modern viewport unit (safe on mobile bars) */
    display: grid;
    place-items: center;
    padding: clamp(12px, 3vw, 32px);
    box-sizing: border-box;
}

    /* The image itself */
    .home-hero img {
        width: 100%;
        height: auto;
        /* cap the rendered size */
        max-width: 1200px;
        max-height: 800px;
        /* fit within caps without cropping */
        object-fit: contain;
        /* optional: avoid blurry upscales */
        /* image-rendering: auto; */
    }

/* If you want it to always fill the viewport (cropping allowed), use this instead:
.home-hero img { width: 100%; height: 100%; max-width: 1200px; max-height: 800px; object-fit: cover; }
*/