:root{--brand:#0B5ED7;--bg:#F6F8FB;--panel:#fff;--text:#0B1220;--muted:#6B7280;--line:#E6EAF2;--topbar:#000;}
*{box-sizing:border-box} html,body{height:100%;margin:0;width:100%;overflow-x:hidden}
/*
  BELANGRIJK (iOS fix):
  In Safari/standalone webview kan door viewport rounding (vooral bij rotatie)
  soms een 1px "lek" zichtbaar worden langs een rand.
  Door de *document-achtergrond* zwart te maken, valt zo'n lek weg in de zwarte
  topbar in plaats van als wit streepje.
  De daadwerkelijke UI blijft licht via #app.
*/
html{background:#000}
/*
  Maak de pagina-achtergrond altijd zwart.
  iOS Safari (zeker standalone/PWA + landscape) kan anders een 1px witte strook
  aan de rechterrand laten zien als de layout nét niet 100% van het visuele
  viewport vult.
*/
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial;background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}
html,body{width:100%;height:100%;overflow-x:hidden}
body{overscroll-behavior:none}
/* De UI zelf blijft gewoon licht; die tekenen we in #app.
   In iOS "app" (standalone) kan in landscape door viewport rounding een 1px strook zichtbaar worden.
   Door #app als fixed root te gebruiken, vullen we altijd het hele scherm. */
#app{
  position:fixed;
  inset:0;
  /* Geen 100vw: dat kan op iOS nét een pixel te breed uitpakken */
  width:auto;
  height:auto;
  background:var(--bg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
/* While the splash is visible, keep the page background black */
body.splashing{background:#000}
button,a,input{touch-action:manipulation}
.splash{overflow:hidden;position:fixed;inset:0;width:100%;height:100%;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:999;color:#fff;touch-action:none}

/* Block landscape to avoid iOS Safari keeping a skewed/zoomed state after rotating */
.landscape-blocker{display:none;position:fixed;inset:0;background:#000;z-index:9999;align-items:center;justify-content:center;padding:24px;padding-top:calc(24px + env(safe-area-inset-top));padding-right:calc(24px + env(safe-area-inset-right));padding-bottom:calc(24px + env(safe-area-inset-bottom));padding-left:calc(24px + env(safe-area-inset-left));}
.landscape-card{max-width:420px;width:100%;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:18px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);color:#fff}
.landscape-title{font-weight:900;font-size:28px;letter-spacing:.6px}
.landscape-sub{margin-top:6px;opacity:.9;font-size:16px}
.landscape-hint{margin-top:14px;opacity:.75;font-size:14px}
/* Only block landscape on phone-like viewports; allow tablets in landscape */
@media (orientation:landscape) and (max-height:500px){html,body{background:#000;}
  html,body{overflow:hidden!important}
  .landscape-blocker{display:flex}
}
.splash img{width:min(92%,560px);max-width:92vw;animation:logoIn .9s ease-out both}
.splash .title{font-weight:900;font-size:clamp(34px,7vw,56px);animation:textIn .9s .2s ease-out both}
.splash .subtitle{font-size:clamp(18px,4.5vw,28px);opacity:.9;animation:textIn .9s .35s ease-out both}
@keyframes logoIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes textIn{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

.topbar{
  position:sticky;
  top:0;
  z-index:5;
  background:#000;
  color:#fff;
  /* keep the header away from the iPhone notch when installed as PWA */
  padding: calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 14px calc(14px + env(safe-area-inset-left));
  border-bottom:1px solid #111;
  display:flex;
  justify-content:center;
}
.brand{
  width:100%;
  max-width:520px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.brand .name{font-size:26px;font-weight:900;letter-spacing:.6px;line-height:1.05}
.brand .tag{font-size:14px;opacity:.9;line-height:1.2}

.container{max-width:520px;margin:0 auto;padding:14px 14px 90px;flex:1;overflow:auto;-webkit-overflow-scrolling:touch;}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 8px 24px rgba(17,24,39,.06)}
.primary{width:100%;padding:12px;border-radius:14px;border:0;background:var(--brand);color:#fff;font-weight:900}

html,body{overflow-x:hidden;}

/* --- iOS standalone (Add to Home Screen) safe-area / statusbar hairline fix --- */
/*
  html/body moeten LICHT blijven (var(--bg)).
  Alleen de statusbar-notch-zone toppen we af met een zwart overlay zodat er geen 1px streepje zichtbaar is.
*/
html{
  background:var(--bg);
}

/*
  iOS (Safari/PWA) sometimes shows a 1px strip at the very top (safe-area).
  We paint that area explicitly so it always matches the NEFR topbar.
*/
body::before{
  content:"";
  position:fixed;
  top:0; left:0; right:0;
  height: max(env(safe-area-inset-top), 12px);
  background: var(--topbar);
  z-index:9999;
  pointer-events:none;
}

@media (display-mode: standalone) {
  body::after{
    content:"";
    position:fixed;
    top:0; bottom:0; left:0; right:0;
    /* Deze inset-box vult de notch-zijkanten met de topbar-kleur */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    box-shadow:
      inset env(safe-area-inset-left) 0 0 0 var(--topbar),
      inset calc(-1 * env(safe-area-inset-right)) 0 0 0 var(--topbar);
    pointer-events:none;
    z-index:9998;
  }
}


/* BLOK 2: Auth modal */
.modal.hidden { display:none; }
.modal { position: fixed; inset: 0; z-index: 9999; }
.modal-backdrop { position:absolute; inset:0; background: rgba(0,0,0,.45); }
.modal-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  background: #ffffff;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.modal-title { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.modal-sub { font-size: 12px; opacity: .75; margin-bottom: 10px; }

.tabs { display:flex; gap:8px; margin: 10px 0 12px; }
.tab {
  flex:1;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 10px 8px;
  background: #f5f5f7;
  font-weight: 700;
}
.tab.active { background: #000; color: #fff; border-color: #000; }

.tabpane.hidden { display:none; }

.field { display:block; margin-bottom: 10px; }
.label { font-size: 12px; font-weight: 700; margin-bottom: 6px; opacity:.8; }
.field input {
  width: 100%;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 16px;
  outline: none;
}
.field input:focus { border-color: #000; }

.primary.full { width:100%; margin-top: 6px; }

.modal-actions { display:flex; justify-content:flex-end; margin-top: 10px; }
button.ghost {
  border: 1px solid rgba(0,0,0,.18);
  background: transparent;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
}
.modal-msg {
  display:none;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f5f5f7;
  font-size: 13px;
}
.welcome-card{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}.welcome-logo{width:min(220px,70vw);border-radius:18px}.welcome-card h1{margin:4px 0 0;font-size:28px}.lead{margin:0;color:#374151;font-size:16px;line-height:1.45}.primary.secondary{background:#111827;margin-top:2px}.small-note{font-size:12px;color:#6b7280;margin:4px 0 0;line-height:1.35}