/* JC Pekà — stijl volgens ontwerp versie 24 (donkerblauw, paars accent, liquid glass) */
:root {
  --bg: #0A1628; --surface: #11213A; --surface-2: #17304F; --border: #24406A;
  --text: #F1F5FA; --muted: #A3B3CC; --soft: #D6E0EE;
  --accent: #7C3AED; --accent-light: #C4B5FD; --accent-glow: #A855F7; --glass-on: #B794F6;
  --danger: #F87171; --success: #4ADE80;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --spring: cubic-bezier(.3, 1.45, .45, 1);
  --glass-release: cubic-bezier(.34, 1.32, .5, 1); /* langzame, zachte terugveer van glazen knoppen */
  --glass-spring: cubic-bezier(.3, 1.25, .45, 1); /* rustige veer, zelfde als de tabbalk */
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text);
  font-family: Inter, system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.35;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none;
}
button, input, select, textarea { font-family: inherit; font-size: 16px; }
a { color: var(--accent-light); }
h1, h2, h3, p { margin: 0; }
img { display: block; }
[hidden] { display: none !important; }

#app { max-width: 480px; margin: 0 auto; min-height: 100dvh; position: relative; }
.view { padding-bottom: calc(106px + var(--safe-bottom)); }
.view.no-tab { padding-bottom: 32px; }

.ser { font-family: Lora, Georgia, serif; font-weight: 600; }
.muted { color: var(--muted); }
.lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-light); }
.small { font-size: 12px; }
.center { text-align: center; }
.pos { color: var(--success); } .neg { color: var(--danger); }

/* Header */
.hd {
  background: linear-gradient(180deg, #143565 0%, #0E2546 100%);
  border-bottom: 1px solid var(--accent-light); border-radius: 0 0 26px 26px;
  padding: calc(var(--safe-top) + 14px) 18px 18px; display: flex; flex-direction: column; gap: 12px;
}
.hd h1 { font-family: Lora, Georgia, serif; font-size: 30px; font-weight: 600; }
.hd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Tabbladkoppen: overal even hoog (alleen de titel, met of zonder plusknop). */
.hd.top, .hd.sub { padding-bottom: 14px; }
.hd.top > .hd-row, .hd.sub > .hd-row { min-height: 44px; }
/* Detailschermen: glazen terugknop met de naam ernaast, zelfde hoogte als de tabbladkoppen */
.hd.sub > .hd-row { justify-content: flex-start; }
.hd.sub h1 { font-size: 26px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-end { margin-left: auto; flex: none; }
/* Terugknop in liquid glass, zelfde glas als de plusknop */
.back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 22px; flex: none;
  color: var(--glass-on); text-decoration: none; padding-right: 2px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%);
  box-shadow: 0 4px 14px rgba(0,0,0,.28); transition: transform 750ms var(--glass-release), background 500ms, box-shadow 500ms; }
/* Liquid glass zoals iOS: bij indrukken zwelt het glas op en licht het op, bij loslaten veert het terug */
.back.press { transform: scale(1.18); background: rgba(255,255,255,.18); box-shadow: 0 6px 22px rgba(0,0,0,.32), 0 0 18px rgba(255,255,255,.10); transition: transform 220ms cubic-bezier(.2,.8,.3,1), background 220ms, box-shadow 220ms; }


.content { padding: 14px 16px 0; display: flex; flex-direction: column; gap: 12px; }
.section-title { font-family: Lora, Georgia, serif; font-size: 18px; font-weight: 600; margin-top: 6px; }

/* Kaarten */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.card.pad { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.card.list { padding: 0 16px; }
.card.admin { border-color: var(--accent); }
.card.clip { overflow: hidden; }
.glass-box { background: rgba(10, 22, 40, .6); border: 1px solid var(--border); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.facts { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--soft); }
.facts span { display: flex; gap: 8px; align-items: center; }
.hero {
  border: 0; text-align: left; cursor: pointer; border-radius: 18px; padding: 16px 18px; color: #fff; width: 100%;
  background: linear-gradient(135deg, #7C3AED 0%, #4C1D95 100%); display: flex; align-items: center; justify-content: space-between; text-decoration: none;
}

.row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); min-height: 52px; color: var(--text); text-decoration: none; }
.card.list > .row:last-child, .card.list > *:last-child > .row { border-bottom: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .t { font-size: 15px; font-weight: 700; }
.row .s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.row .v { font-size: 15px; font-weight: 800; white-space: nowrap; }
.prow { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer; text-align: left; }
.card.clip > .prow:last-child { border-bottom: 0; }
.chev { color: var(--muted); flex: none; }

/* Avatars: afgeronde vierkantjes */
.av { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); color: var(--accent-light);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none; overflow: hidden; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av.lg { width: 44px; height: 44px; border-radius: 12px; font-size: 16px; }
.av.xl { width: 112px; height: 112px; border-radius: 28px; font-size: 40px; }
.av.club { background: var(--accent); color: #fff; border-color: var(--accent); }
.tile-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.num { width: 22px; height: 22px; border-radius: 7px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.date-tile { width: 40px; height: 46px; flex: none; border-radius: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; background: var(--accent); }
.date-tile.today { box-shadow: 0 0 0 2px var(--accent-light); }
.date-tile .d { font-size: 10px; font-weight: 700; color: #DDD6FE; }
.date-tile .n { font-size: 17px; font-weight: 800; }
.badge { font-size: 11px; font-weight: 700; color: var(--accent-light); border: 1px solid var(--accent); border-radius: 99px; padding: 2px 8px; white-space: nowrap; }

/* Knoppen */
.btn { min-height: 46px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; padding: 0 16px; width: 100%; }
.btn:disabled { opacity: .45; cursor: default; }
.btn2 { min-height: 46px; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 15px; font-weight: 700; cursor: pointer; padding: 0 16px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.btn2.danger { color: var(--danger); border-color: rgba(248, 113, 113, .4); }
.chk { min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--accent); background: transparent; color: var(--accent-light); font-size: 13px; font-weight: 700; cursor: pointer; flex: none; }
/* Plusknop in liquid glass: kleurloos glas, paarse plus met gloed */
.plus { width: 44px; height: 44px; border-radius: 22px; border: 1px solid rgba(255,255,255,.12); color: var(--glass-on); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
  background: rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%);
  box-shadow: 0 4px 14px rgba(0,0,0,.28); transition: transform 750ms var(--glass-release), background 500ms, box-shadow 500ms; }
/* Ingedrukt (class .press via JS, blijft minstens even staan): glas zwelt rustig op; bij loslaten zakt het langzaam terug met een zachte veer */
.plus.press { transform: scale(1.18); background: rgba(255,255,255,.18); box-shadow: 0 6px 22px rgba(0,0,0,.32), 0 0 18px rgba(255,255,255,.10); transition: transform 220ms cubic-bezier(.2,.8,.3,1), background 220ms, box-shadow 220ms; }
.icon-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* Polletje */
.opt { position: relative; overflow: hidden; min-height: 44px; border-radius: 12px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: 14px; font-weight: 700; cursor: pointer; width: 100%; }
.opt.mine { border-color: var(--accent-light); }
.opt .bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(124, 58, 237, .45); transition: width .5s var(--spring); }
.opt span { position: relative; }
.opt:disabled { cursor: default; }

/* Liquid glass: tabbalk */
.tab {
  position: fixed; left: 50%; transform: translateX(-50%); width: min(456px, calc(100% - 24px));
  /* Zo laag als de iPhone toelaat: net boven/over de home-indicator, zoals de zwevende tabbalk van iOS */
  bottom: max(10px, calc(var(--safe-bottom) - 12px)); height: 74px; padding: 4px; z-index: 20;
  /* Native-achtig glas: weinig eigen kleur, veel blur + verzadiging, zodat wat eronder scrolt helder (maar wazig) doorschijnt */
  background: rgba(20, 30, 48, .22);
  -webkit-backdrop-filter: blur(22px) saturate(200%) brightness(1.08); backdrop-filter: blur(22px) saturate(200%) brightness(1.08);
  border: .5px solid rgba(255,255,255,.18); border-radius: 999px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 .5px rgba(255,255,255,.06);
}
/* iOS "scroll edge": onderin vervaagt en verdonkert de inhoud zacht achter de balk, zoals in Apple-apps */
body:has(.tab)::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: calc(130px + var(--safe-bottom)); z-index: 19; pointer-events: none;
  background: linear-gradient(to top, rgba(10,22,40,.85) 0%, rgba(10,22,40,.45) 45%, rgba(10,22,40,0) 100%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent); mask-image: linear-gradient(to top, #000 35%, transparent);
}
.glass-pill {
  position: absolute; top: 4px; bottom: 4px; border-radius: 999px; pointer-events: none;
  background: rgba(255,255,255,.13);
  -webkit-backdrop-filter: blur(8px) saturate(160%); backdrop-filter: blur(8px) saturate(160%);
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  transition: left 520ms cubic-bezier(.3, 1.25, .45, 1), transform 280ms cubic-bezier(.3, 1.15, .5, 1);
}
.glass-pill.moving { transform: scaleX(1.12) scaleY(.94); }
.tb { position: relative; z-index: 1; height: 100%; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 11px; font-weight: 600; cursor: pointer; color: var(--text); text-decoration: none; transition: color 200ms; min-width: 0; }
.tb .ic { display: flex; transition: transform 300ms cubic-bezier(.3, 1.3, .5, 1); }
.tb .ic path { transition: fill 200ms, stroke 200ms; }
.tb.on { color: var(--glass-on); }
.tb.on .ic .f { fill: currentColor; }      /* actief icoon is ingevuld */
.tb.on .ic .in { stroke: var(--bg); }      /* binnenlijnen worden donker */
.tb.bounce .ic { transform: translateY(-1px) scale(1.06); }

/* Detailschermen schuiven van rechts naar binnen */
.view.push { animation: push-in 420ms cubic-bezier(.25, .9, .3, 1); box-shadow: -14px 0 32px rgba(0,0,0,.35); }
.view.pop { animation: pop-in 320ms cubic-bezier(.25, .9, .3, 1); }
@keyframes push-in { from { transform: translateX(100%); } }
@keyframes pop-in { from { transform: translateX(-24%); opacity: .6; } }
body { overflow-x: hidden; }

/* Verjaardag: foto van de jarige */
.av.bday { border: 2px solid var(--accent-glow); background: linear-gradient(160deg, #24406A 0%, #17304F 100%); align-items: flex-end; }
.av.bday.photo { align-items: center; }

/* Liquid glass: schakelaars */
.gseg { position: relative; display: flex; padding: 3px; border-radius: 999px;
  background: rgba(10,22,40,.35);
  -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255,255,255,.12); box-shadow: none; }
.gseg .glass-pill { top: 3px; bottom: 3px; }
.gseg .glass-pill.moving { transform: scaleX(1.1) scaleY(.95); }
.gbtn { position: relative; z-index: 1; flex: 1; min-height: 38px; border: 0; background: transparent; border-radius: 999px; font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--text); transition: color 200ms; }
.gbtn.on { color: var(--glass-on); }

/* Menu (plus) */
/* Glazen menu (Overzicht) in Apple-stijl: het plusje zet zich uit tot dit menu (vorm-animatie in app.js).
   Het menu ligt over het plusje heen, rechtsboven op dezelfde plek; de opties komen er daarna één voor één in. */
.menu { position: fixed; top: calc(var(--safe-top) + 10px); right: 14px; width: 236px; padding: 6px; z-index: 15; overflow: hidden;
  display: flex; justify-content: flex-end; align-items: flex-start;
  background: rgba(23, 48, 79, .72); border: .5px solid rgba(255,255,255,.18); border-radius: 22px;
  -webkit-backdrop-filter: blur(22px) saturate(200%); backdrop-filter: blur(22px) saturate(200%);
  box-shadow: 0 18px 44px rgba(0,0,0,.5); }
.menu-list { flex: none; width: 224px; }
.menu button { width: 100%; min-height: 48px; border: 0; border-radius: 16px; background: transparent; color: var(--text); text-align: left; padding: 0 14px; font-size: 15px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 12px; transition: background 160ms, transform 300ms var(--glass-spring); }
.menu button svg { color: var(--glass-on); flex: none; }
.menu button:active { background: rgba(255,255,255,.12); transform: scale(.97); }
.menu.in button { animation: opt-in 380ms var(--glass-spring) backwards; }
.menu.in button:nth-child(1) { animation-delay: 110ms; }
.menu.in button:nth-child(2) { animation-delay: 150ms; }
.menu.in button:nth-child(3) { animation-delay: 190ms; }
.menu.out { pointer-events: none; }
.menu.out .menu-list { opacity: 0; transition: opacity 120ms; }
.plus.open { opacity: 0; transition: opacity 80ms; } /* het plusje "is" nu het menu */
@keyframes opt-in { from { opacity: 0; transform: translateY(-6px) scale(.94); } }
.scrim { position: fixed; inset: 0; z-index: 14; }

/* Bottom sheet */
.sheet-bg { position: fixed; inset: 0; background: rgba(4, 10, 20, .7); z-index: 30; display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
.sheet { width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; background: var(--surface-2); border-top: 1px solid var(--accent-light); border-radius: 24px 24px 0 0;
  padding: 20px 20px calc(28px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 14px; animation: up .32s var(--spring); }
.sheet h2 { font-family: Lora, Georgia, serif; font-size: 22px; font-weight: 600; }
.x { width: 40px; height: 40px; border-radius: 20px; border: 0; background: var(--surface); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; }
@keyframes up { from { transform: translateY(40%); opacity: .4; } }
@keyframes fade { from { opacity: 0; } }

/* Formulieren */
label.f { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; min-width: 0; }
.sheet > *, .grid2 > * { min-width: 0; }
.fld { min-height: 46px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 0 14px; font-size: 16px; width: 100%; min-width: 0; max-width: 100%; color-scheme: dark; }
/* iOS Safari geeft datum/tijd-velden een vaste minimale breedte: daardoor werd het venster breder dan het scherm */
input.fld[type="date"], input.fld[type="time"], input.fld[type="datetime-local"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; text-align: left; line-height: 44px; }
input.fld::-webkit-date-and-time-value { text-align: left; }
textarea.fld { padding: 12px 14px; min-height: 90px; resize: vertical; }
select.fld { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.fld:focus { outline: 2px solid var(--accent-glow); outline-offset: 1px; }
.stepper { display: flex; align-items: center; gap: 10px; }
.step { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 20px; font-weight: 700; cursor: pointer; }
.stepper .val { width: 26px; text-align: center; font-size: 18px; font-weight: 800; }
.pick { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; width: 100%; }
.pick.on, .pick:has(input:checked) { background: rgba(124, 58, 237, .35); border-color: var(--accent-light); }
.pick:has(input:focus-visible) { outline: 2px solid var(--accent-glow); outline-offset: 1px; }
.sr { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pick { position: relative; }
.err { color: var(--danger); font-size: 13px; font-weight: 600; }

/* Groepsfoto */
.groupphoto { height: 140px; border-radius: 16px; background: var(--surface-2); border: 1px dashed var(--border); display: flex; align-items: flex-end; padding: 10px 12px; overflow: hidden; position: relative; }
.groupphoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.groupphoto.has { border-style: solid; }

/* Inloggen */
.login { min-height: 100dvh; padding: calc(var(--safe-top) + 48px) 20px 32px; display: flex; flex-direction: column; gap: 22px; align-items: center; }
.login h1 { font-family: Lora, Georgia, serif; font-size: 32px; font-weight: 600; }
.setup { gap: 26px; }
.photo-pick { display: flex; flex-direction: column; align-items: center; gap: 14px; cursor: pointer; }
.photo-pick .btn2 { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; pointer-events: none; }
.setup-form { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; }
.who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }
.who button { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 16px; padding: 14px 6px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 600; }
.who .av { width: 56px; height: 56px; border-radius: 15px; font-size: 20px; }
.dots { display: flex; gap: 14px; height: 18px; }
.dots i { width: 14px; height: 14px; border-radius: 5px; border: 2px solid var(--accent-light); }
.dots i.on { background: var(--accent-light); box-shadow: 0 0 10px rgba(167,139,250,.7); }
.dots.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.keypad { display: grid; grid-template-columns: repeat(3, 76px); gap: 14px; }
.keypad button { height: 76px; border-radius: 22px; border: 1px solid rgba(255,255,255,.12); color: var(--text); font-size: 26px; font-weight: 600; cursor: pointer;
  background: rgba(14,30,56,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.keypad button:active { background: rgba(255,255,255,.18); }
.keypad .ghost { border: 0; background: none; box-shadow: none; font-size: 15px; color: var(--muted); }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(106px + var(--safe-bottom)); background: var(--surface-2); border: 1px solid var(--accent-light);
  color: var(--text); padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 600; z-index: 40; box-shadow: 0 10px 30px rgba(0,0,0,.5); max-width: calc(100% - 32px); animation: fade .2s; }
.empty { padding: 16px 0; color: var(--muted); font-size: 14px; }
.loading { min-height: 100dvh; display: flex; align-items: center; justify-content: center; color: var(--muted); }

/* Melding in Apple-stijl, midden in het scherm (zoals een iOS-alert) */
.ios-alert-bg { position: fixed; inset: 0; z-index: 40; background: rgba(4, 10, 20, .45); display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: fade .2s; }
.ios-alert-bg.out { animation: fade-out .18s forwards; }
.ios-alert { width: 270px; border-radius: 14px; overflow: hidden; text-align: center;
  background: rgba(30, 42, 62, .78); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
  border: .5px solid rgba(255,255,255,.14); box-shadow: 0 20px 50px rgba(0,0,0,.45);
  animation: alert-in .26s cubic-bezier(.2, .9, .3, 1.1); }
.ios-alert-bg.out .ios-alert { animation: alert-out .18s forwards; }
.ios-alert-text { padding: 19px 16px 18px; }
.ios-alert-text .t { font-size: 17px; font-weight: 600; }
.ios-alert-text .m { font-size: 13px; color: var(--muted); margin-top: 3px; }
.ios-alert-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; border: 0; border-top: .5px solid rgba(255,255,255,.16);
  background: transparent; color: var(--glass-on); font-size: 17px; font-weight: 400; text-decoration: none; cursor: pointer; font-family: inherit; }
.ios-alert-btn:active { background: rgba(255,255,255,.10); }
.ios-alert-btn.cancel { font-weight: 600; }
@keyframes alert-in { from { opacity: 0; transform: scale(1.15); } }
@keyframes alert-out { to { opacity: 0; transform: scale(.94); } }
@keyframes fade-out { to { opacity: 0; } }

/* Zolang een invulscherm (sheet) open is, verdwijnt de tabbalk onderin */
.tab, .tab::before, .tab::after { transition: opacity 200ms, transform 260ms var(--glass-spring); }
body:has(.sheet-bg) .tab { opacity: 0; transform: translate(-50%, 24px); pointer-events: none; }
body:has(.sheet-bg) .tab::before, body:has(.sheet-bg) .tab::after { opacity: 0; }