@font-face {
  font-family: 'Neiko';
  src: url('fonts/Neiko-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #F6F4EF;
  --card: #FFFFFF;
  --ink: #1B1D22;
  --ink-soft: #6B7280;
  --border: #E7E3DA;
  --emerald: #17B080;
  --emerald-2: #20C997;
  --purple: #7C5CD6;
  --amber: #F5C344;
  --orange: #F0883E;
  --red: #E5484D;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(20,20,20,.04), 0 8px 24px rgba(20,20,20,.06);
  --font: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-wordmark: 'Neiko', var(--font);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0D0F14;
    --card: #161A22;
    --ink: #F2F1EC;
    --ink-soft: #9AA0AC;
    --border: #262B36;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* Zachte, vaste gloed rechtsboven — geeft de gebruikers- en partneromgeving
   op een oogopslag een net iets andere sfeer, zonder de leesbaarheid van
   kaarten (die een eigen ondoorzichtige achtergrond hebben) te beïnvloeden.
   z-index:-1 houdt 'm altijd achter de content; geen enkele voorouder heeft
   een transform/filter die daar een stacking-context-val van zou maken. */
body::before {
  content: ''; position: fixed; top: -8%; right: -12%;
  width: min(70vw, 480px); height: min(70vw, 480px);
  border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, var(--ambient-glow, transparent) 0%, transparent 72%);
  opacity: .5;
}
body.role-adhd { --ambient-glow: var(--emerald-2); }
body.role-partner { --ambient-glow: var(--purple); }

/* Dekt de notch/statusbar-strook af zodat de ambient glow (hierboven) daar
   niet doorheen schijnt op iPhones. Op toestellen zonder safe-area-inset-top
   (of in de browser i.p.v. standalone) is de hoogte 0 en heeft dit geen effect. */
body::after {
  content: ''; position: fixed; top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top);
  background: var(--paper);
  z-index: 21; pointer-events: none;
}

#app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 88px;
}

a { color: inherit; }
button { font-family: var(--font); }

.topbar {
  position: sticky; top: 0; z-index: 20;
  padding: 14px 20px 10px;
  background: transparent;
}
.wordmark { font-family: var(--font-wordmark); font-weight: 400; letter-spacing: -0.01em; }
.brand-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.brand {
  font-size: 20px;
  display: flex; align-items: center; gap: 8px;
}
.brand-text { font-family: 'Lilita One', var(--font-wordmark); font-weight: 400; letter-spacing: .01em; }
.brand-adh2 {
  background: linear-gradient(135deg, #F5C344, #F0883E 55%, #E5484D);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.brand .role-badge {
  font-family: var(--font); font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 20px;
  background: rgba(124,92,214,.12); color: var(--purple);
}

.screen { padding: 8px 20px 20px; flex: 1; }

/* ---- Cards ---- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 14px;
}
.card h2 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.card .sub { color: var(--ink-soft); font-size: 13px; margin-bottom: 12px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 14px; padding: 13px 18px;
  font-weight: 700; font-size: 14.5px; cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
  width: 100%;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: linear-gradient(135deg, var(--emerald), var(--emerald-2)); color: #05231A; }
.btn-secondary { background: var(--paper); color: var(--ink); border: 1px solid var(--border); }
.btn-purple { background: rgba(124,92,214,.14); color: var(--purple); }
.btn-ghost { background: transparent; color: var(--ink-soft); box-shadow: none; }
.btn-sm { padding: 9px 14px; font-size: 13px; width: auto; }
.btn-danger { background: rgba(229,72,77,.12); color: var(--red); }

/* ---- Forms ---- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; max-width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 15px; box-sizing: border-box;
}

/* Datum/tijd-velden: de ECHTE native <input> ligt hier onzichtbaar en volledig
   absoluut gepositioneerd (kan zijn ouder dus nooit breder maken, ook niet als
   iOS Safari 'm intern breder rendert dan zijn eigen CSS-breedte toestaat —
   een bekende WebKit-eigenaardigheid die met normale CSS niet 100% te
   beteugelen is). Wat je ZIET is .date-display: een gewone div met tekst die
   wij zelf opmaken, dus altijd kort genoeg om netjes te passen. Een tik komt
   gewoon bij de onzichtbare input terecht (exact eroverheen), dus de normale
   OS-datumkiezer werkt gewoon. */
.date-field { position: relative; height: 48px; border-radius: 12px; overflow: hidden; }
.date-field input.dt-native {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; padding: 0; border: none; font-size: 16px; /* 16px voorkomt zoom-in bij focus op iOS */
}
.date-display {
  width: 100%; height: 100%; padding: 0 14px; border-radius: inherit;
  border: 1px solid var(--border); background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 15px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  pointer-events: none; /* tikken gaat dwars door deze laag heen naar de input eronder */
}
.date-display-text.placeholder { color: var(--ink-faint, #9AA1AC); }
.date-display svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .6; }

.field textarea { resize: vertical; min-height: 70px; }

/* Twee velden naast elkaar (Vanaf/Tot). gap + flex:1 met min-width:0 zorgt dat
   ze samen exact de kaartbreedte vullen. Op een heel smal scherm wrappen ze
   netjes onder elkaar i.p.v. over de rand te lopen. */
.field-row { display: flex; gap: 10px; min-width: 0; flex-wrap: wrap; }
.field-row .field { flex: 1 1 130px; min-width: 0; margin-bottom: 14px; }

/* ---- Water ---- */
.water-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 8px; }
.water-glass { background: none; border: none; padding: 4px; cursor: pointer; border-radius: 8px; transition: transform .12s ease; }
.water-glass:active { transform: scale(0.88); }
.water-glass.filled { filter: drop-shadow(0 2px 4px rgba(32,201,151,.35)); }

/* ---- Kleuraccenten ---- */
.card { position: relative; overflow: hidden; isolation: isolate; }
.card.accent-emerald::before, .card.accent-purple::before, .card.accent-amber::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.card.accent-emerald::before { background: linear-gradient(90deg, var(--emerald), var(--emerald-2)); }
.card.accent-purple::before { background: linear-gradient(90deg, var(--purple), #9C82E8); }
.card.accent-amber::before { background: linear-gradient(90deg, var(--amber), var(--orange)); }
.section-title { display: flex; align-items: center; gap: 6px; }
.section-title::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--emerald-2); }
.navitem.active svg, .navitem.active span { filter: drop-shadow(0 0 6px rgba(23,176,128,.35)); }

/* ---- Phase chips ---- */
.phase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.phase-chip {
  border-radius: 14px; padding: 16px 12px; text-align: left; border: 2px solid transparent;
  cursor: pointer; color: #0D0F14; font-weight: 700; font-size: 14px;
}
.phase-chip .n { font-size: 22px; display:block; margin-bottom: 4px;}
.phase-chip small { display: block; font-weight: 500; font-size: 12px; opacity: .85; margin-top: 2px; }
.phase-chip.selected { border-color: var(--ink); }

/* ---- Bottom nav ---- */
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: var(--card); border-top: 1px solid var(--border);
  display: flex; justify-content: space-around;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
.navitem {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: var(--ink-soft); font-size: 10.5px; font-weight: 600;
  padding: 6px 8px; border-radius: 10px; cursor: pointer;
}
.navitem.active { color: var(--emerald); }
.navitem svg { width: 22px; height: 22px; }

/* ---- Calendar ---- */
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-header .month-label { font-weight: 700; font-size: 16px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { text-align: center; font-size: 11px; color: var(--ink-soft); font-weight: 700; padding-bottom: 4px; }
.cal-day {
  aspect-ratio: 1; border-radius: 10px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
  background: var(--paper); border: 1px solid var(--border); position: relative; cursor: pointer;
  color: var(--ink);
}
.cal-day.empty { background: transparent; border: none; }
.cal-day .marks { position: absolute; bottom: 3px; display: flex; gap: 3px; }
.cal-day .marks span { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.5); }
.cal-day .battery-bar { position: absolute; top: 3px; left: 3px; right: 3px; height: 3px; border-radius: 2px; background: var(--purple); opacity: .55; }
.cal-day.today { outline: 2px solid var(--ink); outline-offset: 1px; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.legend .item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.legend .sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* ---- Day detail sheet ---- */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(10,10,10,.4); z-index: 40;
  display: flex; align-items: flex-end;
}
.sheet {
  background: var(--card); width: 100%; max-width: 520px; margin: 0 auto;
  border-radius: 22px 22px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  max-height: 82vh; overflow-y: auto;
}
.sheet-handle { width: 40px; height: 4px; border-radius: 4px; background: var(--border); margin: 0 auto 14px; }

/* ---- Lists ---- */
.list-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); }
.list-item:last-child { border-bottom: none; }
.list-item .meta { color: var(--ink-soft); font-size: 12px; }
.tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.tag-gewenst { background: rgba(23,176,128,.14); color: var(--emerald); }
.tag-ongewenst { background: rgba(229,72,77,.14); color: var(--red); }
.tag-neutraal { background: rgba(107,114,128,.14); color: var(--ink-soft); }

/* ---- Routine tasks ---- */
.task-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.checkbox {
  width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer;
}
.checkbox.checked { background: var(--emerald); border-color: var(--emerald); }
.task-row .label { flex: 1; font-size: 14.5px; }
.task-row.done .label { text-decoration: line-through; color: var(--ink-soft); }

/* ---- Battery ---- */
.battery-slider-wrap { text-align: center; }
.battery-value { font-size: 40px; font-weight: 800; margin: 6px 0; }
input[type=range] { width: 100%; accent-color: var(--purple); }

/* ---- Misc ---- */
.empty-state { text-align: center; padding: 30px 10px; color: var(--ink-soft); }
.empty-state .big { font-size: 34px; margin-bottom: 8px; }
.link { color: var(--emerald); font-weight: 700; text-decoration: none; cursor: pointer; }
.code-display {
  font-family: monospace; font-size: 22px; font-weight: 700; letter-spacing: 1px;
  background: var(--paper); border: 1px dashed var(--border); border-radius: 12px;
  padding: 14px; text-align: center; margin: 10px 0; color: var(--emerald);
}
.toast {
  position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 20px;
  font-size: 13px; font-weight: 600; z-index: 60; box-shadow: var(--shadow);
}
.section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 18px 0 8px 4px; }

/* ======================================================
   DASHBOARD — hero, orb, fase-slider, batterij, water
   ====================================================== */

.ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ico svg { width: 100%; height: 100%; display: block; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal { animation: rise .5s cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--d, 0) * 70ms); }

/* ---- Skeletons ---- */
.skeleton-stack { display: flex; flex-direction: column; gap: 14px; }
.skel { height: 120px; border-radius: var(--radius); background: linear-gradient(100deg, var(--card) 30%, var(--border) 50%, var(--card) 70%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; }
.skel-hero { height: 320px; }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* ---- Hero ---- */
.hero {
  position: relative; overflow: hidden;
  border-radius: 26px; padding: 20px 20px 22px; margin-bottom: 14px;
  background: var(--card); box-shadow: var(--shadow);
  transition: background .6s ease;
  isolation: isolate; /* eigen stacking context, zodat overflow-clipping betrouwbaar is */
}
.hero-aura {
  /* Binnen de kaartranden blijven: geen negatieve inset meer die buiten de
     afgeronde hoek uitsteekt. De radiale glow zit gecentreerd achter de orb en
     wordt door overflow:hidden + de eigen radius netjes afgesneden op de hoeken. */
  position: absolute; inset: 0; height: auto; pointer-events: none; z-index: 0;
  border-radius: inherit;
  background: radial-gradient(60% 55% at 50% 34%, var(--phase-color) 0%, transparent 70%);
  opacity: .22; transition: background .6s ease, opacity .6s ease;
}
.hero > *:not(.hero-aura) { position: relative; z-index: 1; }
.hero-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hero-greet { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.hero-chip {
  display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  padding: 5px 10px; border-radius: 20px; background: rgba(23,176,128,.14); color: var(--emerald);
}

/* ---- Orb ---- */
.orb-wrap { display: flex; justify-content: center; margin: 18px 0 6px; }
.orb { position: relative; width: 118px; height: 118px; display: grid; place-items: center; }
.orb-core {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--phase-color);
  box-shadow: 0 0 30px 2px var(--phase-color), inset 0 -6px 14px rgba(0,0,0,.18);
  transition: background .6s ease, box-shadow .6s ease;
  animation: breathe 3.6s ease-in-out infinite;
}
.orb-ring {
  position: absolute; border-radius: 50%; border: 1.5px solid var(--phase-color);
  transition: border-color .6s ease;
}
.orb-ring.r1 { inset: 18px; opacity: .45; animation: pulse 3.6s ease-out infinite; }
.orb-ring.r2 { inset: 0; opacity: .22; animation: pulse 3.6s ease-out .9s infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes pulse { 0% { transform: scale(.82); opacity: .5; } 100% { transform: scale(1.15); opacity: 0; } }

/* hogere fase = onrustiger orb */
.hero[data-phase="2"] .orb-core, .hero[data-phase="2"] .orb-ring { animation-duration: 2.6s; }
.hero[data-phase="3"] .orb-core, .hero[data-phase="3"] .orb-ring { animation-duration: 1.7s; }
.hero[data-phase="4"] .orb-core, .hero[data-phase="4"] .orb-ring { animation-duration: 1s; }

/* ---- Fase-uitlezing ---- */
.phase-readout { position: relative; text-align: center; min-height: 62px; }
.phase-readout.swap { animation: swapIn .35s cubic-bezier(.2,.7,.3,1) both; }
@keyframes swapIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.phase-name { font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 3px; }
.phase-signal { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* ---- Fase-slider ---- */
.phase-slider-wrap { position: relative; margin: 18px 2px 10px; }
.phase-track {
  position: absolute; top: 8px; left: 0; right: 0; height: 8px; border-radius: 8px;
  background: linear-gradient(90deg, #17B080 0%, #F5C344 33%, #F0883E 66%, #E5484D 100%);
  opacity: .9;
}
#phaseSlider {
  position: relative; width: 100%; height: 24px; margin: 0; background: none;
  -webkit-appearance: none; appearance: none;
}
#phaseSlider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 3px solid var(--phase-color); cursor: grab;
  box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: border-color .4s ease, transform .16s ease;
}
#phaseSlider:active::-webkit-slider-thumb { transform: scale(1.18); cursor: grabbing; }
#phaseSlider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 3px solid var(--phase-color); cursor: grab; box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
#phaseSlider::-moz-range-track { background: transparent; }

.phase-ticks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; }
.tick {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  font-family: var(--font); font-size: 10.5px; font-weight: 600;
  color: var(--ink-soft); opacity: .55; transition: opacity .25s ease, color .25s ease;
}
.tick span { width: 7px; height: 7px; border-radius: 50%; transition: transform .25s ease; }
.tick.on { opacity: 1; color: var(--ink); }
.tick.on span { transform: scale(1.5); }

.phase-action {
  display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 14px;
  padding: 11px 13px; border-radius: 14px; font-size: 13px; line-height: 1.5;
  background: var(--paper);
  background: color-mix(in srgb, var(--phase-color) 10%, transparent);
  color: var(--ink); transition: background .6s ease;
}
.phase-action .ico { margin-top: 1px; color: var(--phase-color); transition: color .6s ease; }

.hero-note {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 14px;
  background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 14.5px;
  padding: 12px 14px; min-height: 54px; resize: vertical; margin-bottom: 12px;
}
.btn-hero {
  width: 100%; border: none; border-radius: 16px; padding: 15px; cursor: pointer;
  font-family: var(--font); font-weight: 700; font-size: 15px; color: #fff;
  background: var(--phase-color); transition: background .6s ease, transform .14s ease;
  box-shadow: 0 6px 18px -6px var(--phase-color);
}
.btn-hero:active { transform: scale(.975); }
.btn-hero.saving { opacity: .7; pointer-events: none; }
.btn-hero.saved { animation: popOk .5s ease; }
@keyframes popOk { 50% { transform: scale(1.04); } }

/* ---- Tegels ---- */
.tile-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.tile {
  background: var(--card); border-radius: 22px; padding: 15px 14px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px;
}
.tile-label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }

/* ---- Batterij-gauge ---- */
.gauge { position: relative; display: grid; place-items: center; margin: 2px auto 0; width: 104px; height: 104px; }
.gauge-svg { width: 104px; height: 104px; transform: rotate(-90deg); }
.gauge-bg { fill: none; stroke: var(--border); stroke-width: 9; }
.gauge-fg {
  fill: none; stroke: var(--purple); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset .45s cubic-bezier(.2,.7,.3,1);
}
.gauge-val { position: absolute; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.gauge-val small { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.tile-battery input[type=range] { accent-color: var(--purple); margin-top: 4px; }

/* ---- Waterglazen ---- */
.water-count { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.water-count small { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.water-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 2px; }
.glass { background: none; border: none; padding: 0; cursor: pointer; transition: transform .16s cubic-bezier(.3,1.6,.5,1); }
.glass:active { transform: scale(.86); }
.glass svg { width: 100%; height: auto; display: block; }
.glass-outline { fill: none; stroke: var(--border); stroke-width: 1.6; }
.glass.full .glass-outline { stroke: var(--emerald); }
.glass-water, .glass-wave { fill: #22B8CF; transform: translateY(28px); transition: transform .55s cubic-bezier(.2,.8,.3,1); }
.glass.full .glass-water, .glass.full .glass-wave { transform: translateY(0); }
.glass.full .glass-wave { animation: waveMove 2.4s linear infinite; }
@keyframes waveMove { from { transform: translate(0, 0); } to { transform: translate(20px, 0); } }
.glass.pour { animation: pourIn .5s cubic-bezier(.3,1.4,.5,1) var(--delay, 0ms) both; }
@keyframes pourIn { 0% { transform: scale(.7); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ---- Brede actieknop ---- */
.wide-action {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--card); border: none; border-radius: 20px; padding: 15px 16px;
  box-shadow: var(--shadow); cursor: pointer; font-family: var(--font); color: var(--ink);
  transition: transform .14s ease;
}
.wide-action:active { transform: scale(.985); }
.wa-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: rgba(34,184,207,.14); color: #22B8CF; flex-shrink: 0; }
.wa-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.wa-text strong { font-size: 14.5px; font-weight: 700; }
.wa-text small { font-size: 12px; color: var(--ink-soft); }
.wa-plus { color: var(--ink-soft); }

/* ---- Nav met SVG ---- */
.navitem svg { width: 22px; height: 22px; }
.navitem { transition: color .2s ease, transform .16s ease; }
.navitem:active { transform: scale(.9); }
.navitem.active svg { animation: navPop .35s cubic-bezier(.3,1.5,.5,1); }
@keyframes navPop { 50% { transform: translateY(-3px) scale(1.12); } }

/* ---- Sheet-animatie ---- */
.sheet-backdrop { animation: fadeIn .22s ease both; }
.sheet { animation: slideUp .34s cubic-bezier(.2,.8,.3,1) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(28px); } to { transform: none; } }

/* ---- Kalendercellen ---- */
.cal-day { transition: transform .14s ease; }
.cal-day:not(.empty):active { transform: scale(.9); }

/* ---- Toegankelijkheid ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ---- Kleine iconhelpers ---- */
.inline-ico { display: inline-flex; vertical-align: -2px; width: 14px; height: 14px; }
.inline-ico .ico { width: 14px; height: 14px; }
.brand-mark {
  display: inline-flex; position: relative; margin-bottom: 4px;
  animation: rise .6s cubic-bezier(.2,.7,.3,1) both;
}
.brand-mark::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 240px; height: 240px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23,176,128,.22) 0%, rgba(124,92,214,.16) 42%, transparent 68%);
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
}
.step-mark {
  display: inline-grid; place-items: center; width: 62px; height: 62px; margin: 0 auto;
  border-radius: 20px; background: rgba(23,176,128,.12); color: var(--emerald);
  animation: rise .5s cubic-bezier(.2,.7,.3,1) both;
}
.empty-state .big { display: inline-flex; justify-content: center; color: var(--ink-soft); opacity: .6; margin-bottom: 10px; }
.install-done { display: flex; align-items: center; gap: 7px; color: var(--emerald); font-weight: 600; }
.install-done .ico { flex-shrink: 0; }

/* ---- Checkbox met SVG-vinkje ---- */
.checkbox { transition: background .2s ease, border-color .2s ease, transform .16s cubic-bezier(.3,1.6,.5,1); color: #fff; }
.checkbox:active { transform: scale(.85); }
.checkbox.checked { animation: checkPop .35s cubic-bezier(.3,1.5,.5,1); }
@keyframes checkPop { 50% { transform: scale(1.2); } }
.task-row .label { transition: color .25s ease, opacity .25s ease; }

/* ---- Nav-item met tekst onder icoon ---- */
.navitem span { display: block; }

/* ---- Maandnavigatie ---- */
.cal-header .btn-ghost { display: inline-flex; align-items: center; justify-content: center; padding: 8px; }

/* ---- Toast met veerkracht ---- */
.toast { animation: toastIn .3s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---- Bootscherm ---- */
.boot { display: grid; place-items: center; min-height: 70vh; color: var(--emerald); }
.boot-mark { width: 52px; height: 52px; animation: bootSpin 1.4s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes bootSpin { to { transform: rotate(360deg); } }

/* ---- Zachte knop (tegels) ---- */
.btn-soft {
  background: rgba(124,92,214,.12); color: var(--purple); border: none;
  border-radius: 12px; padding: 9px 12px; font-family: var(--font);
  font-weight: 700; font-size: 12.5px; cursor: pointer; width: 100%;
  transition: transform .14s ease, background .2s ease;
}
.btn-soft:active { transform: scale(.95); }
.tile-battery, .tile-water { justify-content: flex-start; }

/* ---- Segmented control ---- */
.seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  background: var(--paper); border: 1px solid var(--border); border-radius: 14px;
}
.seg.seg-3 { grid-template-columns: 1fr 1fr 1fr; }
.seg-btn {
  border: none; background: transparent; border-radius: 10px; padding: 9px 8px;
  font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; transition: background .22s ease, color .22s ease, box-shadow .22s ease;
}
.seg-btn.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ---- Voorbeeld van berekende tijden ---- */
.preview-times { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.time-pill {
  font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 20px;
  background: rgba(34,184,207,.13); color: #1799ac;
  animation: rise .3s cubic-bezier(.2,.7,.3,1) both;
}
@media (prefers-color-scheme: dark) { .time-pill { color: #4DD4E8; } }

/* ======================================================
   AGENDA v2 — gradient-dagen, factorband, analyse
   ====================================================== */

.cal-day {
  position: relative; overflow: hidden;
  aspect-ratio: 1; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600;
  background: var(--paper); border: 1px solid var(--border);
  color: var(--ink); cursor: pointer;
  transition: transform .14s ease, box-shadow .2s ease;
}
.cal-day.has-phase { border-color: transparent; box-shadow: 0 2px 6px -2px rgba(0,0,0,.18); }
.cal-day.has-phase .day-num {
  font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 3px; border-radius: 7px;
  background: rgba(255,255,255,.55); color: #0D0F14;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.cal-day.empty { background: transparent; border: none; box-shadow: none; cursor: default; }
.cal-day:not(.empty):active { transform: scale(.9); }
.day-num { position: relative; z-index: 2; }

/* Kleurenlaag van de dag: iets groter dan de cel en licht vervaagd, dan
   afgesneden door de afgeronde rand van .cal-day (overflow:hidden). Zo blijft
   er nooit een scherpe kleurlijn precies op de hoek-curve staan. */
.day-bg {
  position: absolute; inset: -6px; z-index: 0;
  filter: blur(3.5px);
  transform: scale(1.02); /* voorkomt een render-naad tussen laag en rand */
}

/* wisselwerkingsband onderaan de dag: één segment per factor */
/* Wisselwerking staat BEWUST los van de signaleringskleuren: een klein
   afgezonderd "pilletje" onderaan met een eigen witte rand, zodat het nooit
   optisch vermengt met de verticale gradient van de gemoedstoestand erboven. */
.day-band {
  position: absolute; left: 4px; right: 4px; bottom: 3px; height: 5px;
  display: flex; gap: 1.5px; z-index: 2; border-radius: 3px; overflow: hidden;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.9);
}
.day-band i { flex: 1; height: 100%; }

/* medicatie: kleine stip rechtsboven */
.day-med {
  position: absolute; top: 4px; right: 4px; width: 5px; height: 5px;
  border-radius: 50%; background: #1B1D22; opacity: .75; z-index: 2;
}
.cal-day .battery-bar { position: absolute; top: 0; left: 0; height: 3px; border-radius: 0 2px 2px 0; background: var(--purple); opacity: .6; z-index: 2; }

.sw-dot { border-radius: 50% !important; }

/* ---- Analyse ---- */
.insight {
  border-radius: 14px; padding: 12px 13px; margin-bottom: 10px;
  border-left: 3px solid var(--border); background: var(--paper);
  animation: rise .45s cubic-bezier(.2,.7,.3,1) both;
}
.insight-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 5px; }
.insight-head strong { font-size: 14px; font-weight: 700; }
.insight-ico { display: inline-flex; }
.insight-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 20px;
}
.insight p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }

.insight.risk { border-left-color: var(--red); background: rgba(229,72,77,.06); }
.insight.risk .insight-ico, .insight.risk .insight-tag { color: var(--red); }
.insight.risk .insight-tag { background: rgba(229,72,77,.13); }

.insight.warn { border-left-color: var(--amber); background: rgba(245,195,68,.08); }
.insight.warn .insight-ico { color: #B58100; }
.insight.warn .insight-tag { background: rgba(245,195,68,.22); color: #8A6200; }

.insight.good { border-left-color: var(--emerald); background: rgba(23,176,128,.06); }
.insight.good .insight-ico, .insight.good .insight-tag { color: var(--emerald); }
.insight.good .insight-tag { background: rgba(23,176,128,.13); }

.disclaimer { font-size: 11.5px; line-height: 1.5; color: var(--ink-soft); margin: 12px 0 0; opacity: .8; }

.progress-line { height: 6px; border-radius: 6px; background: var(--border); margin-top: 12px; overflow: hidden; }
.progress-line span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--emerald), var(--emerald-2)); transition: width .6s cubic-bezier(.2,.8,.3,1); }

@media (prefers-color-scheme: dark) {
  .insight.warn .insight-ico, .insight.warn .insight-tag { color: #F5C344; }
}

/* ======================================================
   Legenda's (Gemoedstoestand + Wisselwerking) — compact
   Alleen kleurbolletjes op een rij, met een info-icoon als tik-hint.
   Details blijven een tik verwijderd (fase-sheet resp. toast met naam).
   ====================================================== */
.dot-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin-top: 10px; }
.dot-legend-item {
  width: 26px; height: 26px; border-radius: 50%; border: none; padding: 0; flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(0,0,0,.08); cursor: pointer;
  transition: transform .15s cubic-bezier(.3,1.5,.5,1);
}
.dot-legend-item:active { transform: scale(.82); }
.dot-legend-hint { color: var(--ink-soft); display: inline-flex; opacity: .6; margin-left: 1px; }

/* ======================================================
   v3 — herhaalknop, tegels, icon-buttons, toggle, modal
   ====================================================== */

/* Hero-acties: opslaan + herhaal ernaast */
.hero-actions { display: flex; gap: 8px; }
.hero-actions .btn-hero { flex: 1; }
.btn-repeat {
  flex-shrink: 0; width: 52px; border: none; border-radius: 16px; cursor: pointer;
  background: var(--border); color: var(--ink-soft);
  display: grid; place-items: center; transition: transform .14s ease, background .2s ease, color .2s ease;
}
.btn-repeat:hover { color: var(--ink); }
.btn-repeat:active { transform: scale(.94) rotate(-30deg); }

/* Batterij full-width tegel */
.tile-battery-full { margin-bottom: 12px; }
.tile-battery-full .tile { flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }
.tile-battery-full .tile-label { flex-basis: 100%; }
.tile-battery-full .gauge { margin: 0; }
.battery-controls { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 10px; }
.battery-controls input[type=range] { accent-color: var(--purple); }

/* Wisselwerking-tegel */
.tile-interaction {
  border: none; cursor: pointer; text-align: left; font-family: var(--font);
  align-items: flex-start; color: var(--ink); position: relative;
}
.tile-interaction .ti-icon {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(34,184,207,.14); color: #22B8CF; margin: 2px 0 4px;
}
.tile-interaction .ti-text { font-size: 13px; color: var(--ink-soft); line-height: 1.4; flex: 1; }
.tile-interaction .ti-add {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700;
  color: #1799ac; margin-top: 8px;
}
@media (prefers-color-scheme: dark) { .tile-interaction .ti-add { color: #4DD4E8; } }
.tile-interaction:active { transform: scale(.98); }

/* Kaartkop met acties */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.card-head h2 { margin: 0; }
.card-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* Icon-knoppen (bewerk/verwijder) */
.icon-btn {
  width: 34px; height: 34px; border-radius: 10px; border: none; cursor: pointer;
  background: var(--paper); color: var(--ink-soft);
  display: grid; place-items: center; transition: background .18s ease, color .18s ease, transform .14s ease;
}
.icon-btn:active { transform: scale(.9); }
.icon-btn.danger:hover { color: var(--red); background: rgba(229,72,77,.1); }
.icon-btn.sm { width: 28px; height: 28px; }
.task-row .label { cursor: pointer; }
.task-row .icon-btn { flex-shrink: 0; }

/* Toggle-switch */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 14px; }
.toggle-row span { font-size: 14.5px; font-weight: 600; }
.switch { position: relative; display: inline-block; width: 46px; height: 27px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider-sw {
  position: absolute; inset: 0; cursor: pointer; border-radius: 27px;
  background: var(--border); transition: background .25s ease;
}
.slider-sw::before {
  content: ''; position: absolute; height: 21px; width: 21px; left: 3px; top: 3px;
  border-radius: 50%; background: #fff; transition: transform .25s cubic-bezier(.3,1.5,.5,1);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.switch input:checked + .slider-sw { background: var(--emerald); }
.switch input:checked + .slider-sw::before { transform: translateX(19px); }

/* Kopieerbare code */
.code-display { cursor: pointer; transition: transform .12s ease; position: relative; }
.code-display:active { transform: scale(.98); }
.copy-hint {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: 0;
  color: var(--ink-soft); margin-top: 8px; opacity: .8;
}
.copy-hint .ico { width: 14px; height: 14px; }

/* Modal-inhoud scrollbaar */
.modal-body { max-height: 60vh; overflow-y: auto; margin-bottom: 6px; }

/* Dagverloop-volgnummer in dagdetail */
.seq-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: var(--border); color: var(--ink-soft);
  font-size: 10px; font-weight: 800;
}
.row-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* Tijdstip bij routine-taak */
.task-time {
  display: inline-block; font-size: 11px; font-weight: 700; color: var(--emerald);
  background: rgba(23,176,128,.12); border-radius: 6px; padding: 1px 6px; margin-right: 7px;
  vertical-align: 1px;
}
.task-row.done .task-time { color: var(--ink-soft); background: var(--border); }

/* ======================================================
   ROUTINES v2 — verticale tijdlijn met countdown-ring
   ====================================================== */

.timeline { position: relative; margin: 4px 0; }
.tl-row { display: flex; align-items: flex-start; gap: 12px; position: relative; padding: 7px 0; }
.tl-row:not(.last)::after {
  content: ''; position: absolute; left: 16px; top: 34px; bottom: -7px; width: 2px;
  background: var(--border); z-index: 0;
}
.tl-row.done:not(.last)::after { background: rgba(23,176,128,.35); }
.tl-dot-wrap { position: relative; width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; z-index: 1; }
.tl-dot {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border);
  background: var(--card); display: grid; place-items: center; color: #fff; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .16s cubic-bezier(.3,1.6,.5,1);
  position: relative; z-index: 1;
}
.tl-dot:active { transform: scale(.85); }
.tl-dot.done { background: var(--emerald); border-color: var(--emerald); animation: checkPop .35s cubic-bezier(.3,1.5,.5,1); }
.tl-row.current .tl-dot { border-color: var(--amber); }
.tl-ring-svg { position: absolute; inset: 0; transform: rotate(-90deg); pointer-events: none; }
.tl-ring-svg circle { transition: stroke-dashoffset 1s linear, stroke .3s ease; }
.tl-ring-svg.overdue circle { animation: ringPulse 1.6s ease-in-out infinite; }
@keyframes ringPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.tl-content { flex: 1; min-width: 0; padding-top: 2px; }
.tl-row .icon-btn { margin-top: 1px; }
.tl-row.done .label { text-decoration: line-through; color: var(--ink-soft); }

/* Kleine schakelaar in kaartkop (meldingen per routine) */
.sw-sm { width: 38px; height: 22px; margin-right: 2px; }
.sw-sm .slider-sw::before { width: 16px; height: 16px; }
.sw-sm input:checked + .slider-sw::before { transform: translateX(16px); }

/* Versie-indicator onderaan Instellingen */
.version-footer {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px 0 8px; font-size: 12px; color: var(--ink-soft); text-align: center;
}
.link-btn {
  background: none; border: none; color: var(--emerald); font-family: var(--font);
  font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px;
}

/* ---- Update-banner ---- */
.update-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-top));
  background: var(--ink); color: var(--paper);
  font-size: 13px; font-weight: 600;
  animation: rise .3s cubic-bezier(.2,.7,.3,1) both;
}
.update-banner span { display: flex; align-items: center; gap: 6px; }
.update-banner button {
  background: var(--emerald); color: #05231A; border: none; border-radius: 20px;
  padding: 7px 14px; font-family: var(--font); font-weight: 700; font-size: 12.5px; cursor: pointer;
  flex-shrink: 0;
}

/* 'Vandaag ingenomen'-badge bij de partner */
.med-today-badge {
  width: 24px; height: 24px; border-radius: 50%; background: var(--emerald);
  color: #05231A; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  animation: checkPop .4s cubic-bezier(.3,1.5,.5,1);
}

/* Quick-tap pillen voor "Vandaag ingenomen" */
.med-quick-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.med-quick-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--paper); color: var(--ink); font-family: var(--font);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s ease;
}
.med-quick-pill.on {
  background: var(--emerald); border-color: var(--emerald); color: #05231A;
  animation: checkPop .35s cubic-bezier(.3,1.5,.5,1);
}
.med-quick-pill:active { transform: scale(.96); }
.med-quick-pill:disabled { opacity: .6; }

/* ---- Kaart-illustraties (sfeer, geen functioneel icoon) ---- */
.card-illo {
  position: absolute; right: -18px; bottom: -14px; width: 130px; height: auto;
  pointer-events: none; z-index: -1; transform: rotate(-8deg);
}
.card-illo svg { width: 100%; height: auto; display: block; }