:root{
  --bg:#f6f8fb;
  --text:#1d2939;
  --muted:#667085;
  --brand:#5b7c99;      /* zacht blauwgrijs */
  --brand-2:#9fb3c8;
  --white:#fff;
  --radius:18px;
  --shadow:0 4px 18px rgba(0,0,0,.08);
}

.app-logo {
  animation: fadein 0.9s ease forwards;
  opacity: 0;
}
@keyframes fadein {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.6;
  -webkit-tap-highlight-color: transparent;
}

.app-header{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  color:var(--white); padding:1rem; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.app-header h1{margin:0; font-size:1.35rem; letter-spacing:.3px}

.container{max-width:840px; margin:0 auto; padding:1rem}

.view{display:none; animation:fade .18s ease}
.view.active{display:block}
@keyframes fade{from{opacity:.6; transform:translateY(2px)} to{opacity:1; transform:none}}

.grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin:1rem 0 1.25rem;
}
.tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.35rem; width:100%; min-height:90px;
  padding:1rem; border:none; border-radius:var(--radius);
  background:var(--white); box-shadow:var(--shadow);
  font-size:1.05rem; font-weight:700; color:var(--text);
}
.tile:active{transform:scale(.98)}
.tile-emoji{font-size:1.6rem}

.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.95rem}

.toolbar{
  display:flex; align-items:center; gap:.75rem; margin:.25rem 0 1rem;
}
.back{
  border:none; background:var(--white); color:var(--brand);
  padding:.6rem .9rem; border-radius:999px; box-shadow:var(--shadow);
  font-weight:700;
}
.back:active{transform:scale(.98)}

.card{
  background:var(--white); border-radius:var(--radius);
  padding:1rem; box-shadow:var(--shadow);
}

.form{display:grid; gap:.75rem; margin-top:.75rem}
.form input,.form select{
  width:100%; padding:.8rem .9rem; border-radius:14px; border:1px solid #d0d5dd; background:#fff;
  font-size:1rem;
}
.btn{
  display:inline-block; border:none; padding:.85rem 1rem; border-radius:14px; font-weight:700;
}
.btn.primary{background:var(--brand); color:#fff}

.app-footer{
  text-align:center; padding:1rem; color:var(--muted);
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.app-logo{
  display:block;
  margin:0 auto;
  max-height:120px;
  width:auto;
  padding:.2rem 0;
}

.info-box{
  background:#f1f5f9;
  border:1px solid #d0d5dd;
  border-radius:14px;
  padding:.75rem .9rem;
  color:#334155;
  font-size:1rem;
}
.info-box strong{ color:#1d2939; }