:root{
  --bg:#ffffff;
  --text:#0b1220;
  --muted:#475467;
  --line:rgba(15,23,42,.10);
  --primary:#2563eb;
  --primary-ink:#ffffff;

  /* Google-ish friendly icon colors */
  --g-blue:#1a73e8;
  --g-green:#34a853;
  --g-yellow:#fbbc05;
  --g-red:#ea4335;

  --radius:18px;
  --focus:0 0 0 4px rgba(37,99,235,.18);
  --font: Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* larger, elderly-friendly */
  --base:20px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--base);
  line-height:1.55;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;

  background:
    /* DIAGONAAL WIT VLAK (houdt linksboven wit, loopt schuin af) */
    linear-gradient(135deg,
      #ffffff 0%,
      #ffffff 26%,
      rgba(255,255,255,0) 62%
    ),

    /* jouw bestaande zachte kleuren */
    radial-gradient(1200px 900px at 70% 25%, rgba(37,99,235,.10), rgba(37,99,235,0) 60%),
    radial-gradient(900px 700px at 40% 75%, rgba(52,168,83,.08), rgba(52,168,83,0) 60%),

    /* basis achtergrond */
    linear-gradient(180deg, #ffffff 0%, #ffffff 28%, #f7fafc 70%, #ffffff 100%);

  z-index:-2;
}

body::after{
  display: none;
}

.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.app{
  min-height:100%;
  max-width:860px;
  margin:0 auto;
  padding:22px 18px 28px;
}

/* ===== Header (minimal) ===== */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 4px 18px;
}

.brand{ display:flex; align-items:center; gap:14px; min-width:0; }
.logo{
  width:100px;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo img{
  width:100px;
  height:100px;
  object-fit:contain;
  display:block;
}

.brand-text{ min-width:0; }
.brand-text h1{
  margin:0;
  font-size:34px;
  letter-spacing:-0.02em;
  font-weight:900;
  display:flex;
  align-items:baseline;
  gap:10px;
}
.brand-name{ font:inherit; }
.tagline-inline{
  color:rgba(15,23,42,.55);
  font-weight:700;
  font-size:18px;
  letter-spacing:0;
  white-space:nowrap;
}
.subtitle{
  margin:4px 0 0 0;
  color:var(--text);
  font-weight:700;
  font-size:22px;
}

/* (tagline moved inline next to AL.) */
.icon-btn{
  width:52px;height:52px;
  border-radius:16px;
  border:2px solid var(--line);
  background:#fff;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  font-weight:800;
}
.icon-btn:focus{ outline:none; box-shadow:var(--focus); }

.main{ margin-top:6px; }

/* ===== Home tiles (4 vlakken) ===== */
.tiles{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  padding:10px 0 6px;
}

.tile{
  appearance:none;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.86);
  border-radius:22px;
  padding:16px 16px 14px;
  text-align:left;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow:
    0 14px 26px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.70);
}
.tile:active{ transform:translateY(1px); box-shadow:0 10px 18px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.70); }
.tile:focus{ outline:none; box-shadow:var(--focus), 0 14px 26px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.70); }

.tile-icon{
  width:44px;height:44px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 10px 18px rgba(15,23,42,.10);
}
.material-symbols-rounded{ font-size:26px; line-height:1; }
.material-symbols-rounded[data-ic="event"]{ color:var(--g-blue); }
.material-symbols-rounded[data-ic="chat_bubble"]{ color:var(--g-green); }
.material-symbols-rounded[data-ic="star"]{ color:var(--g-yellow); }
.material-symbols-rounded[data-ic="today"]{ color:var(--g-red); }

.tile-label{ font-weight:900; font-size:22px; letter-spacing:-0.01em; }
.tile-sub{ color:var(--muted); font-size:18px; font-weight:800; }

.home-hint{ margin:10px 2px 0; color:var(--muted); font-weight:600; }

/* ===== Panels ===== */
.panel{ display:none; padding:18px 0 6px; }
.panel.is-active{ display:block; }

.panel-head h2{ margin:0; font-size:34px; letter-spacing:-0.02em; font-weight:900; }
.panel-head p{ margin:10px 0 0 0; font-size:22px; color:var(--muted); }

.panel-head--with-back{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.back-btn{
  width:52px;height:52px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.86);
  box-shadow:0 10px 18px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.70);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.back-btn:active{ transform:translateY(1px); }
.back-btn:focus{ outline:none; box-shadow:var(--focus), 0 10px 18px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.70); }
.back-btn .material-symbols-rounded{ font-size:26px; color:var(--g-blue); }

/* ===== Date card ===== */
.card{
  margin-top:16px;
  border-radius:22px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.86);
  box-shadow:0 14px 26px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.70);
  padding:12px 14px;
}
.card-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:12px 6px; }
.card-row + .card-row{ border-top:1px solid rgba(15,23,42,.06); }
.card-k{ color:var(--muted); font-weight:700; font-size:18px; }
.card-v{ font-weight:900; font-size:22px; }

/* ===== Composer (stable, minimal) ===== */
.composer{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  margin-top:18px;
  align-items:stretch;
}
.composer input{
  min-width:0;
  height:66px;
  border-radius:18px;
  border:2px solid var(--line);
  padding:0 16px;
  font-size:22px;
  background:#fff;
}
.composer input:focus{ outline:none; box-shadow:var(--focus); border-color:rgba(37,99,235,.38); }

.btn{
  height:66px;
  padding:0 18px;
  border-radius:18px;
  border:0;
  background:#111827;
  color:#fff;
  cursor:pointer;
  font-weight:900;
  font-size:22px;
  letter-spacing:-0.01em;
}
.btn:focus{ outline:none; box-shadow:var(--focus); }

.btn-primary{ background:var(--primary); color:var(--primary-ink); }

/* ===== Toolbar (minimal chips) ===== */
.toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}
.spacer{ flex:1; }

.btn-ghost{
  height:54px;
  padding:0 16px;
  border-radius:999px;
  border:2px solid var(--line);
  background:#fff;
  color:var(--text);
  font-weight:900;
  font-size:20px;
}
.btn-ghost:hover{ border-color:rgba(17,24,39,.25); }

.btn-danger-soft{
  height:54px;
  padding:0 16px;
  border-radius:999px;
  border:2px solid rgba(217,45,32,.25);
  background:rgba(217,45,32,.06);
  color:#b42318;
  font-weight:900;
  font-size:20px;
}



/* ===== Place button (Vandaag) ===== */
.placebar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding:4px 0;
}
.btn-loc{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
}
.btn-loc .material-symbols-rounded{
  font-size:22px;
  line-height:1;
  color:rgba(17,24,39,.55);
}
.place-text{
  font-size:16px;
  font-weight:700;
  color:rgba(71,84,103,.75);
  text-align:right;
  white-space:nowrap;
}

/* ===== Lists (ultra minimal) ===== */
.list{ list-style:none; padding:0; margin:18px 0 0 0; }

.item{
  display:flex;
  gap:14px;
  align-items:center;
  padding:14px 0;
  border-bottom:2px solid var(--line);
}
.item:last-child{ border-bottom:0; }

.check{
  width:32px;height:32px;
  border-radius:10px;
  border:2px solid #cfd4dc;
  margin-top:0;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  cursor:pointer;
  user-select:none;
}

/* lead icon (no border) for Besproken/Belangrijk items */
.lead-icon{
  width:32px;height:32px;
  margin-top:0;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  user-select:none;
}
.lead-icon .material-symbols-rounded{ font-size:24px; line-height:1; }
.lead-icon.is-green{ color:var(--g-green); }
.lead-icon.is-yellow{ color:var(--g-yellow); }
.check.is-done{ border-color:rgba(37,99,235,.55); background:rgba(37,99,235,.12); }
.check span{ font-size:18px; color:var(--primary); line-height:1; }

.text{
  margin:0;
  font-size:22px;
  line-height:1.35;
  word-break:break-word;
}

.content{ flex:1 1 auto; min-width:0; }

.meta{ margin-top:6px; display:flex; gap:10px; flex-wrap:wrap; }
.meta-time{
  font-size:16px;
  color:rgba(15,23,42,.45);
  font-weight:700;
}
.meta-tag{
  font-size:16px;
  color:rgba(15,23,42,.50);
  font-weight:800;
}

.actions{ display:flex; gap:8px; align-items:center; margin-left:auto; }
.small-btn{
  position:relative;
  overflow:hidden;
  width:48px;height:48px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.92);
  cursor:pointer;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 10px 18px rgba(15,23,42,.10);
}
.small-btn:active{ transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 7px 12px rgba(15,23,42,.10); }
.small-btn .material-symbols-rounded{
  font-size:24px;
  line-height:1;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.small-btn:focus{ outline:none; box-shadow:var(--focus); }

/* Action icon colors */
.small-btn.star .material-symbols-rounded{ color:var(--g-yellow); }
.small-btn.edit .material-symbols-rounded{ color:var(--g-blue); }
.small-btn.delete .material-symbols-rounded{ color:#d92d20; }

/* Star feedback: filled when already set as important */
.small-btn.star.is-on .material-symbols-rounded{
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* 1x favourite animation (dotLottie) */
.small-btn.star.is-animating .material-symbols-rounded{ opacity:0; }
.small-btn.star.is-animating{ overflow:visible; }
.small-btn .lottie-star{
  position:absolute;
  left:50%;
  top:50%;
  width:72px;
  height:72px;
  display:block;
  pointer-events:none;
  z-index:3;
  /* center the animation; keep it crisp */
  transform:translate(-50%, -50%) translateZ(0);
}

/* Ensure the animated star can center itself properly */
.small-btn.star{ position:relative; }

.item.is-done .text{ color:#667085; text-decoration:line-through; }

/* Empty state: no box, just calm text */
.empty{
  text-align:center;
  padding:26px 0 10px;
}
.empty-emoji{ font-size:34px; }
.empty h3{ margin:12px 0 6px 0; font-size:26px; font-weight:900; }
.empty p{ margin:0; color:var(--muted); font-size:20px; }

/* Modal (keep, but cleaner) */
.modal{ position:fixed; inset:0; display:none; }
.modal.is-open{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(16,24,40,.40); }
.modal-card{
  position:relative;
  width:min(560px, calc(100% - 32px));
  margin:10vh auto;
  background:#fff;
  border-radius:22px;
  border:2px solid var(--line);
  overflow:hidden;
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:2px solid var(--line); }
.modal-head h2{ margin:0; font-size:22px; font-weight:900; letter-spacing:-0.02em; }
.modal-body{ padding:16px; }
.modal-foot{ padding:16px; border-top:2px solid var(--line); display:flex; justify-content:flex-end; }
.bullets{ margin:0; padding-left:18px; }
.bullets li{ margin:10px 0; font-size:20px; }

@media (max-width:520px){
  .app{ padding:16px 14px 24px; }
  .tiles{ gap:12px; }
  .composer{ grid-template-columns:1fr; }
  .btn{ width:100%; }
  .brand-text h1{ font-size:32px; }
  .tagline-inline{ font-size:16px; white-space:normal; }
  .subtitle{ font-size:21px; }

  /* Location row: stack button + place text for a calmer mobile layout */
  .placebar{ flex-direction:column; align-items:stretch; gap:8px; margin-top:14px; }
  .placebar .spacer{ display:none; }
  .btn-loc{ width:100%; justify-content:center; padding:0 16px; }
  .place-text{ text-align:center; white-space:normal; font-size:15px; padding:2px 4px 0; }
}

.material-symbols-rounded[data-ic="mood"]{ color:var(--g-red); }

.empty-emoji .material-symbols-rounded{ font-size:40px; line-height:1; color:rgba(15,23,42,.55); }

.logo video{ width:100px; height:100px; object-fit:contain; display:block; }


/* ===== Mood (Hoe voel ik me?) ===== */

.mood-card{ padding:14px; }
.mood-row{
  display:flex;
  gap:10px;
  align-items:stretch;
  justify-content:space-between;
  flex-wrap:wrap;
}
.mood-btn{
  flex:1 1 140px;
  min-width:120px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.92);
  border-radius:18px;
  padding:14px 12px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 10px 18px rgba(15,23,42,.08);
}
.mood-btn:active{ transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 7px 12px rgba(15,23,42,.08); }
.mood-btn:focus{ outline:none; box-shadow:var(--focus), 0 10px 18px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.7); }

.mood-btn .material-symbols-rounded{
  font-size:34px;
  line-height:1;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.mood-btn[data-mood="1"] .material-symbols-rounded{ color:var(--g-red); }
.mood-btn[data-mood="2"] .material-symbols-rounded{ color:rgba(217,45,32,.65); }
.mood-btn[data-mood="3"] .material-symbols-rounded{ color:rgba(26,115,232,.70); }
.mood-btn[data-mood="4"] .material-symbols-rounded{ color:rgba(52,168,83,.75); }
.mood-btn[data-mood="5"] .material-symbols-rounded{ color:var(--g-green); }

.mood-label{
  font-weight:900;
  font-size:18px;
  color:rgba(15,23,42,.85);
}

.mood-btn.is-on{
  border-color:rgba(37,99,235,.22);
  background:rgba(37,99,235,.06);
}
.mood-btn.is-on .material-symbols-rounded{
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.mood-status{
  margin-top:14px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:12px 6px 4px;
  border-top:1px solid rgba(15,23,42,.06);
}
.mood-status-k{ color:var(--muted); font-weight:700; font-size:18px; }
.mood-status-v{ font-weight:900; font-size:20px; }


/* Star Lottie (frame 1 idle, last frame pinned) */
.small-btn.star .star-lottie{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.small-btn.star .star-lottie svg{
  width:32px;
  height:32px;
}
.small-btn.star.has-lottie .star-fallback{ opacity:0; }
.small-btn.star .star-fallback{ transition:opacity .12s ease; }

/* ===== Feellin badge (bottom-left) ===== */
/* ===== Mini-footer (flat, bottom-left) ===== */
.mini-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  z-index: 50;
  pointer-events: none; /* footer is passive by default */
}

.mini-footer-inner{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  opacity: .85;
}

.feellin-anim{
  width: 28px;
  height: 28px;
  overflow: visible;
}

.mini-footer-copy{
  font-size: 12px;
  font-weight: 700;
  color: rgba(15,23,42,.48);
  letter-spacing: .2px;
  white-space: nowrap;
}

@media (max-width: 520px){
  .mini-footer{ padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); }
  .mini-footer-copy{ font-size: 11px; }
}

/* --- shared sync / pairing additions --- */
.syncbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
  padding:10px 14px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  background:#fff;
}
.sync-dot{width:10px;height:10px;border-radius:50%;background:#22c55e;flex:0 0 auto;}
.sync-label{font-weight:700;}
.sync-sub{color:var(--muted);font-size:.95rem;}
.sync-meta{margin-left:auto;color:var(--muted);font-size:.92rem;}
.partner-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:rgba(93,23,106,.08);color:#5d176a;font-weight:700;font-size:.92rem;}
.pair-card,.link-card{display:grid;gap:14px;padding:20px;border:1px solid rgba(15,23,42,.08);border-radius:22px;background:#fff;box-shadow:0 12px 32px rgba(15,23,42,.06);}
.code-box{display:flex;align-items:center;justify-content:center;min-height:82px;border-radius:18px;border:1px dashed rgba(93,23,106,.25);background:rgba(93,23,106,.04);font-size:2rem;font-weight:900;letter-spacing:.16em;color:#5d176a;text-transform:uppercase;}
.stack{display:grid;gap:12px;}
.field-hint{color:var(--muted);font-size:.95rem;}
.partner-byline{display:inline-flex;align-items:center;gap:8px;padding:4px 0 0;color:var(--muted);font-size:.92rem;}
.partner-byline .material-symbols-rounded{font-size:18px;}
.meta-row{display:flex;flex-wrap:wrap;gap:8px;}
.meta-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(15,23,42,.06);color:var(--muted);font-size:.84rem;}
.meta-chip .material-symbols-rounded{font-size:16px;}
.panel-inline-actions{display:flex;gap:10px;flex-wrap:wrap;}
.link-form{display:grid;gap:12px;}
.link-form input{min-height:56px;border-radius:16px;border:1px solid rgba(15,23,42,.10);padding:0 16px;font:inherit;text-transform:uppercase;letter-spacing:.08em;}
.qr-wrap{display:grid;justify-items:center;gap:10px;}
.qr-box{background:#fff;border-radius:20px;padding:14px;border:1px solid rgba(15,23,42,.08);}
.muted-top{margin-top:8px;}
.info-strip{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.94rem;}
.item .content{min-width:0;}
.item .text{word-break:break-word;}
.tile.is-soft{background:linear-gradient(180deg, rgba(93,23,106,.06), rgba(93,23,106,.02));}
.tile-sub.is-accent{color:#5d176a;font-weight:700;}
.auth-shell{display:grid;gap:18px;max-width:520px;margin:32px auto 0;}
.auth-note{color:var(--muted);}
.hidden{display:none !important;}
@media (max-width: 640px){
  .syncbar{align-items:flex-start;flex-wrap:wrap;}
  .sync-meta{margin-left:0;}
  .code-box{font-size:1.7rem;letter-spacing:.10em;}
}