:root{
  --bg:#f4f5f7; --card:#ffffff; --ink:#111417; --muted:#8b9199;
  --line:#e9ebee; --green:#0a8f5b; --green-d:#0a7a4d; --tint:#0a8f5b22; --red:#e5484d;
  --shadow:0 1px 3px rgba(20,24,30,.06),0 6px 20px rgba(20,24,30,.05);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%; overflow-x:hidden; overscroll-behavior-x:none}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink);
  display:flex; flex-direction:column; min-height:100dvh;
  padding-top:env(safe-area-inset-top,0px);
  touch-action:pan-y;              /* nur hoch/runter, kein horizontales Wischen */
}
/* Bei offenem Dialog: Hintergrund einfrieren (kein Mitscrollen) */
body.sheet-open{overflow:hidden}
body.sheet-open .list{overflow:hidden}

/* Header */
.top{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px 12px; background:rgba(244,245,247,.85);
  backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line);
}
.hdr-btns{display:flex; gap:10px}
.brand{display:flex; align-items:center; gap:12px}
.logo{font-size:26px; line-height:1}
h1{font-size:22px; font-weight:800; margin:0; letter-spacing:-.02em}
.sync{font-size:12px; color:var(--muted)}
.sync.on{color:var(--green)}
.sync.off{color:var(--red)}
.me{
  width:40px; height:40px; border:none; border-radius:50%;
  background:var(--card); box-shadow:var(--shadow); font-size:18px;
  display:grid; place-items:center; overflow:hidden;
}

/* Datums-Leiste „Nächster Einkauf" */
.datebar{
  position:relative; margin:12px 14px 2px;
  display:flex; align-items:center; gap:10px;
  background:var(--card); border-radius:14px; padding:13px 14px; box-shadow:var(--shadow);
}
.datebar .cal{font-size:18px; line-height:1}
.datetext{flex:1; font-size:15px; font-weight:700; color:var(--ink)}
.datetext .set{color:var(--muted); font-weight:600}
.datetext .lead{color:var(--muted); font-weight:600}
.datetext .val{color:var(--green)}
.dateclear{
  position:relative; z-index:2; flex:none; border:none; background:transparent;
  color:#c3c8ce; font-size:16px; padding:4px 6px; margin:-4px -4px -4px 0; cursor:pointer;
}
.dateclear:active{color:var(--red)}
.datehidden{position:absolute; inset:0; z-index:1; width:100%; height:100%; opacity:0; border:none; background:transparent; -webkit-appearance:none; cursor:pointer}

/* Liste */
.list{flex:1; padding:10px 14px 8px; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; touch-action:pan-y; overscroll-behavior:contain}
.item{
  display:flex; align-items:flex-start; gap:12px;
  background:var(--card); border-radius:16px; padding:14px 14px;
  margin-bottom:10px; box-shadow:var(--shadow);
  transition:opacity .15s, transform .1s;
}
.item:active{transform:scale(.99)}
.check{
  flex:none; width:26px; height:26px; margin-top:1px;
  border:2px solid #cfd4da; border-radius:50%; background:transparent;
  display:grid; place-items:center; cursor:pointer;
}
.check.done{background:var(--green); border-color:var(--green)}
.check svg{width:15px; height:15px; opacity:0; color:#fff}
.check.done svg{opacity:1}
.body{flex:1; min-width:0}
.text{font-size:17px; font-weight:600; line-height:1.25; word-break:break-word}
.item.done .text{color:var(--muted); text-decoration:line-through}
.note{font-size:14px; color:var(--muted); margin-top:3px; white-space:pre-wrap; word-break:break-word}
.meta{font-size:11.5px; color:#b4b9c0; margin-top:6px}
.del{
  flex:none; border:none; background:transparent; color:#c3c8ce;
  font-size:20px; padding:2px 4px; margin:-2px -4px 0 0; cursor:pointer;
}
.del:active{color:var(--red)}

/* Note-Editor inline */
.noteEdit{margin-top:8px; display:none}
.item.editing .noteEdit{display:block}
.noteEdit textarea{
  width:100%; border:1px solid var(--line); border-radius:12px; padding:10px;
  font:inherit; font-size:15px; resize:none; background:#fafbfc; color:var(--ink);
}
.noteEdit .row{display:flex; gap:8px; margin-top:8px}
.noteEdit button{flex:1; border:none; border-radius:10px; padding:9px; font-weight:600; font-size:14px}
.noteEdit .ok{background:var(--green); color:#fff}
.noteEdit .cancel{background:#eef0f2; color:var(--ink)}

.empty{text-align:center; color:var(--muted); padding:60px 20px}
.empty .big{font-size:44px}
.empty p{margin:12px 0 0; font-size:15px}

/* Erledigte löschen */
.clearbar{padding:0 14px 6px; text-align:center}
.clear{
  border:none; background:transparent; color:var(--muted);
  font-size:13px; padding:8px 14px; border-radius:10px;
}
.clear:active{background:#eef0f2}

/* Eingabe-Leiste */
.addbar{
  position:sticky; bottom:0; z-index:5;
  display:flex; gap:10px; padding:12px 14px calc(12px + var(--safe-b));
  background:rgba(244,245,247,.9); backdrop-filter:saturate(160%) blur(12px);
  border-top:1px solid var(--line);
}
.add-input{
  flex:1; border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:14px; padding:14px 16px; font-size:17px; outline:none;
}
.add-input:focus{border-color:var(--green)}
.add-input.full{width:100%; margin:14px 0}
.add-btn{
  flex:none; width:52px; border:none; border-radius:14px;
  background:var(--green); color:#fff; font-size:30px; font-weight:300; line-height:1;
}
.add-btn:active{background:var(--green-d)}

/* Name-Sheet */
.sheet{
  position:fixed; inset:0; z-index:20; background:rgba(10,14,18,.35);
  display:grid; place-items:end center; padding:16px;
}
.card{
  width:100%; max-width:440px; background:var(--card); border-radius:22px;
  padding:22px 20px calc(22px + var(--safe-b)); box-shadow:var(--shadow);
  max-height:88dvh; overflow-y:auto; overflow-x:hidden;
  touch-action:pan-y; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
.card h2{margin:0 0 4px; font-size:20px}
.muted{color:var(--muted); font-size:14px; margin:0}
.primary{
  width:100%; border:none; border-radius:14px; background:var(--green);
  color:#fff; font-size:17px; font-weight:700; padding:14px; margin-top:16px;
}
.hidden{display:none !important}

/* Profil / Onboarding */
.prof-preview{display:flex; justify-content:center; margin-bottom:6px}
.prof-av{
  width:72px; height:72px; border-radius:50%; display:grid; place-items:center;
  font-size:38px; background:var(--tint); box-shadow:inset 0 0 0 2px var(--green);
}
.av-label{font-size:13px; color:var(--muted); margin:16px 0 8px; font-weight:600}
.avatar-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:8px;
}
.avatar-grid button{
  aspect-ratio:1; border:none; border-radius:14px; background:#f1f3f5;
  font-size:24px; display:grid; place-items:center; cursor:pointer;
  border:2px solid transparent;
}
.avatar-grid button.sel{background:var(--tint); border-color:var(--green)}

/* Einstellungen: Farben + Darstellung */
.set-label{font-size:13px; color:var(--muted); margin:18px 0 10px; font-weight:600}
.theme-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px 12px}
.theme-grid button{border:none; background:transparent; padding:0; cursor:pointer}
.theme-grid .sw{
  display:block; height:46px; border-radius:14px;
  background:linear-gradient(140deg, var(--c), var(--d));
  box-shadow:0 2px 8px rgba(20,24,30,.12);
}
.theme-grid button.sel .sw{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--c)}
.theme-grid .cap{display:block; text-align:center; font-size:11px; color:var(--muted); margin-top:6px}
.theme-grid button.sel .cap{color:var(--ink); font-weight:600}

.seg{display:flex; gap:4px; background:#eef0f2; border-radius:13px; padding:4px}
.seg button{
  flex:1; border:none; background:transparent; padding:10px 4px; border-radius:10px;
  font-weight:600; font-size:14px; color:var(--muted); cursor:pointer;
}
.seg button.sel{background:var(--card); color:var(--ink); box-shadow:var(--shadow)}

/* Avatar-Blase an Einträgen */
.avatar{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-size:19px; background:#eef1f4;
}
.item .body .meta .who{display:inline-flex; align-items:center; gap:5px}
.mini-av{
  width:20px; height:20px; border-radius:50%; flex:none;
  display:inline-grid; place-items:center; font-size:12px;
  vertical-align:middle; background:#eef1f4; overflow:hidden;
}

/* Emoji als 3D-Bild */
.emi{display:inline-block; width:1.2em; height:1.2em; vertical-align:-0.22em; object-fit:contain}
.mini-av .emi{width:86%; height:86%; vertical-align:baseline}
.prof-av .emi{width:80%; height:80%; vertical-align:baseline}
.me .emi{width:78%; height:78%; vertical-align:baseline}
.ti .emi{width:66%; height:66%; vertical-align:baseline}
.avatar-grid button .emi{width:82%; height:82%; vertical-align:baseline}
.sig .emi{width:1.1em; height:1.1em}
.big .emi{width:1em; height:1em; vertical-align:-0.1em}

/* Hintergrund-Auswahl im Onboarding */
.bg-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px 8px}
.bg-grid button{border:none; background:transparent; padding:0; cursor:pointer}
.bg-grid .sw{display:block; height:42px; border-radius:12px; box-shadow:0 2px 6px rgba(20,24,30,.12)}
.bg-grid button.sel .sw{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--green)}
.bg-grid .cap{display:block; text-align:center; font-size:10px; color:var(--muted); margin-top:5px; line-height:1.15}
.bg-grid button.sel .cap{color:var(--ink); font-weight:600}

/* Emoji-Lesbarkeit auf bunten Hintergründen */
.prof-av, .mini-av, #me{text-shadow:0 1px 2px rgba(0,0,0,.30)}

/* ── Avatar-Hintergründe (alles reines CSS, kein Bild-Download) ──────
   Schlichte Farben → Verläufe → Muster → kreative Kunst-Szenen.
   Als .abg-* Klasse überall wiederverwendet (Vorschau, Button, Blase). */
.abg-none{background:#eef1f4}
/* schlichte Farben */
.abg-coral{background:#f2593f}
.abg-ocean{background:#1f7ae0}
.abg-mint{background:#12b886}
.abg-grape{background:#7c3aed}
.abg-amber{background:#f59e0b}
.abg-rose{background:#ec4899}
.abg-slate{background:#475569}
.abg-crimson{background:#dc2626}
/* Verläufe */
.abg-sunrise{background:linear-gradient(135deg,#ff9966,#ff5e62)}
.abg-twilight{background:linear-gradient(135deg,#654ea3,#eaafc8)}
.abg-lagoon{background:linear-gradient(135deg,#43cea2,#185a9d)}
.abg-gold{background:linear-gradient(135deg,#f7971e,#ffd200)}
.abg-berry{background:linear-gradient(135deg,#c31432,#240b36)}
.abg-neon{background:linear-gradient(135deg,#f857a6,#43e97b)}
/* Muster */
.abg-dots{background-color:#ff8fab; background-image:radial-gradient(rgba(255,255,255,.9) 22%,transparent 24%); background-size:12px 12px}
.abg-stripes{background:repeating-linear-gradient(45deg,#4b7bec 0 8px,#3867d6 8px 16px)}
.abg-checker{background-color:#1b1b1b; background-image:linear-gradient(45deg,#f4c20d 25%,transparent 25% 75%,#f4c20d 75%),linear-gradient(45deg,#f4c20d 25%,transparent 25% 75%,#f4c20d 75%); background-size:14px 14px; background-position:0 0,7px 7px}
.abg-confetti{background-color:#1f2937; background-image:radial-gradient(circle at 15% 20%,#f43f5e 0 3px,transparent 4px),radial-gradient(circle at 72% 26%,#22c55e 0 3px,transparent 4px),radial-gradient(circle at 40% 60%,#3b82f6 0 3px,transparent 4px),radial-gradient(circle at 85% 72%,#eab308 0 3px,transparent 4px),radial-gradient(circle at 25% 85%,#a855f7 0 3px,transparent 4px)}
/* kreative Kunst-Szenen */
.abg-jungle{background:radial-gradient(circle at 72% 22%,rgba(190,242,100,.55) 0 7%,transparent 8%),radial-gradient(circle at 22% 32%,rgba(132,204,22,.4) 0 6%,transparent 7%),radial-gradient(circle at 25% 125%,#0b3d1f 0,transparent 42%),linear-gradient(160deg,#1a7f3c 0%,#0f5c2a 55%,#08431f 100%)}
.abg-sunset{background:radial-gradient(circle at 50% 72%,#ffd98a 0 11%,transparent 12%),linear-gradient(180deg,#241a5e 0%,#7b2ff7 24%,#f0576b 52%,#ff9e57 76%,#ffe29a 100%)}
.abg-galaxy{background:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 62% 22%,#fff,transparent),radial-gradient(2px 2px at 82% 58%,#fff,transparent),radial-gradient(1.5px 1.5px at 38% 72%,#fff,transparent),radial-gradient(2px 2px at 52% 48%,#fff,transparent),radial-gradient(circle at 70% 38%,rgba(168,85,247,.55),transparent 45%),radial-gradient(circle at 30% 62%,rgba(59,130,246,.5),transparent 45%),linear-gradient(135deg,#0a0a2a,#1b1035 60%,#2a0e3a)}
.abg-aurora{background:radial-gradient(ellipse at 30% 22%,rgba(34,197,94,.6),transparent 52%),radial-gradient(ellipse at 72% 30%,rgba(168,85,247,.5),transparent 55%),radial-gradient(ellipse at 50% 8%,rgba(45,212,191,.5),transparent 45%),linear-gradient(180deg,#041025 0%,#06243a 60%,#0a2a2a 100%)}
.abg-sea{background:radial-gradient(circle at 78% 20%,#fff3b0 0 8%,transparent 9%),linear-gradient(180deg,#1e3c72 0%,#2a5298 38%,#2eb5c9 74%,#8fe3ea 100%)}
.abg-desert{background:radial-gradient(circle at 74% 24%,#ffe08a 0 9%,transparent 10%),radial-gradient(circle at 50% 130%,#a86b3c 0,transparent 45%),linear-gradient(180deg,#f6d365 0%,#fda085 48%,#c98a52 100%)}
.abg-sakura{background:radial-gradient(circle at 24% 30%,rgba(255,255,255,.85) 0 4%,transparent 5%),radial-gradient(circle at 66% 52%,rgba(255,255,255,.75) 0 4%,transparent 5%),radial-gradient(circle at 80% 24%,rgba(255,255,255,.7) 0 3%,transparent 4%),radial-gradient(circle at 40% 80%,rgba(255,255,255,.7) 0 3%,transparent 4%),linear-gradient(160deg,#ffd6e8 0%,#ff9ec4 60%,#f56aa0 100%)}
.abg-rainbow{background:linear-gradient(135deg,#ff5f6d,#ffc371,#4ce8a0,#3ba0ff,#a06bff)}
.abg-volcano{background:radial-gradient(circle at 50% 118%,#ffec8b 0 8%,#ff7a18 9% 18%,transparent 30%),linear-gradient(180deg,#1a0f1f 0%,#4a1020 45%,#8f1d0e 80%,#ff5e2e 100%)}
.abg-mountain{background:radial-gradient(circle at 78% 22%,#fff3c4 0 8%,transparent 9%),linear-gradient(180deg,#8ec5fc 0%,#dfe9f3 45%,transparent 46%),linear-gradient(160deg,#3a6073 55%,#16222a 100%)}

/* Dunkel-Modus: manuell via [data-appearance="dark"] (JS setzt es, löst auch „System" auf) */
html[data-appearance="dark"]{
  --bg:#0c0e12; --card:#171a20; --ink:#f0f2f5; --muted:#8b9199;
  --line:#262a31; --shadow:0 1px 3px rgba(0,0,0,.3);
}
html[data-appearance="dark"] .top,
html[data-appearance="dark"] .addbar{background:rgba(12,14,18,.85)}
html[data-appearance="dark"] .noteEdit textarea{background:#0f1216}
html[data-appearance="dark"] .noteEdit .cancel,
html[data-appearance="dark"] .clear:active,
html[data-appearance="dark"] .seg,
html[data-appearance="dark"] .avatar-grid button{background:#262a31}
html[data-appearance="dark"] .check{border-color:#3a3f47}

/* ═══════════ MEMENTO: Tabs, Tab-Leiste, Home, Don't Forget ═══════════ */

/* Bühne + Tabs */
.stage{flex:1; min-height:0; display:flex; overflow:hidden}
.tab{flex:1; min-height:0; width:100%; display:none; flex-direction:column}
.tab.active{display:flex}
.scroll{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; touch-action:pan-y; overscroll-behavior:contain; padding:6px 14px 14px}

/* Untere Tab-Leiste (App-Buttons) */
.tabbar{
  display:flex; justify-content:space-around; align-items:flex-start; gap:4px;
  padding:7px 8px calc(6px + var(--safe-b));
  background:rgba(244,245,247,.92); backdrop-filter:saturate(160%) blur(12px);
  border-top:1px solid var(--line);
}
.tabbtn{flex:1; border:none; background:transparent; display:flex; flex-direction:column; align-items:center; gap:4px; padding:2px; cursor:pointer}
.tabbtn .ti{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  font-size:23px; box-shadow:0 2px 7px rgba(20,24,30,.15);
  filter:saturate(.55) brightness(1.05); opacity:.5; transition:transform .15s, opacity .15s, filter .15s;
  text-shadow:0 1px 2px rgba(0,0,0,.30);
}
.tabbtn .tl{font-size:11px; color:var(--muted); font-weight:600}
.tabbtn.active .ti{filter:none; opacity:1; transform:translateY(-2px); box-shadow:0 5px 14px rgba(20,24,30,.22)}
.tabbtn.active .tl{color:var(--ink)}

/* Abschnitts-Überschriften */
.section-h{font-size:13px; font-weight:700; color:var(--muted); margin:18px 4px 10px}
.scroll .section-h:first-child{margin-top:8px}

/* Home: Signale */
.signals-row{display:flex; gap:10px}
.sig{
  flex:1; border:none; border-radius:16px; background:var(--card); box-shadow:var(--shadow);
  padding:14px 6px; display:flex; flex-direction:column; align-items:center; gap:6px; font-size:25px; cursor:pointer;
}
.sig span{font-size:12px; font-weight:700; color:var(--ink)}
.sig:active{transform:scale(.97)}
.signal-feed{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.signal-card{display:flex; align-items:center; gap:10px; background:var(--tint); border-radius:14px; padding:10px 12px}
.signal-card .st{flex:1; font-weight:700; font-size:14px}
.signal-card .sm{font-size:11px; color:var(--muted)}

/* Home: Presets + Zuweisungs-Chips */
.preset-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
.preset{border:1px dashed #cfd4da; background:transparent; color:var(--muted); border-radius:20px; padding:7px 12px; font-size:13px; font-weight:600; cursor:pointer}
.preset:active{background:var(--tint)}
.assign-row{display:flex; flex-wrap:wrap; gap:8px; padding:10px 14px 0}
.mchip{display:inline-flex; align-items:center; gap:6px; border:2px solid var(--line); background:var(--card); border-radius:20px; padding:4px 12px 4px 4px; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer}
.mchip.all{padding-left:12px}
.mchip .mini-av{width:22px; height:22px; font-size:13px}
.mchip.sel{border-color:var(--green); background:var(--tint)}

/* Aufgaben-/Notiz-Liste nutzt .item aus dem Einkauf-Teil; hier nur Ergänzungen */
.hlist,.bdlist,.notelist{display:flex; flex-direction:column}
.assignee{display:inline-flex; align-items:center; gap:5px; background:var(--tint); border-radius:20px; padding:3px 10px 3px 3px; font-size:12px; font-weight:700; color:var(--ink); margin-top:7px}
.assignee.none{background:#eef1f4; color:var(--muted); padding-left:10px}
.assignee .mini-av{width:18px; height:18px; font-size:11px}

/* Don't Forget: Geburtstage */
.bd-item{display:flex; align-items:center; gap:12px; background:var(--card); border-radius:14px; padding:12px 14px; margin-bottom:8px; box-shadow:var(--shadow)}
.bd-cake{font-size:22px; flex:none}
.bd-main{flex:1; min-width:0}
.bd-name{font-weight:700; font-size:16px}
.bd-when{font-size:12px; color:var(--muted); margin-top:2px}
.bd-when .soon{color:var(--green); font-weight:700}
.bd-add{display:flex; gap:8px; margin-top:10px}
.bd-add input{border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:12px; padding:12px 12px; font-size:15px; outline:none}
.bd-add input[type=text]{flex:1; min-width:0}
.bd-add input:focus{border-color:var(--green)}

/* Don't Forget: Notizen */
.note-item{display:flex; gap:10px; background:var(--card); border-radius:14px; padding:12px 14px; margin-bottom:8px; box-shadow:var(--shadow)}
.note-item .body{flex:1; min-width:0}
.note-txt{font-size:15px; line-height:1.35; white-space:pre-wrap; word-break:break-word}
.note-add{display:flex; gap:10px; margin-top:10px}
.add-btn.small{width:48px; font-size:26px}

/* Emoji-Lesbarkeit auch auf Tab-Icons */
.ti{}

/* Dark-Overrides für die neuen Teile */
html[data-appearance="dark"] .tabbar{background:rgba(12,14,18,.9)}
html[data-appearance="dark"] .preset{border-color:#3a3f47}
html[data-appearance="dark"] .assignee.none{background:#262a31}
html[data-appearance="dark"] .bd-add input{background:#0f1216}

/* Benachrichtigungs-Einstellungen */
.primary.alt{background:var(--ink); color:var(--card)}
.primary.alt.on{background:var(--green); color:#fff}
.toggles{margin-top:12px; display:flex; flex-direction:column; gap:2px}
.tog{display:flex; align-items:center; justify-content:space-between; padding:12px 2px; border-bottom:1px solid var(--line); font-size:15px; font-weight:600}
.tog:last-of-type{border-bottom:none}
.tog input{width:20px; height:20px; accent-color:var(--green)}
.ghost{margin-top:10px; width:100%; border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:12px; padding:11px; font-weight:600; font-size:14px}
.ghost:active{background:var(--tint)}