:root{
  --accent:#6750a4; --accent-d:#4f3d8f; --bg:#f5f3fa; --card:#fff;
  --text:#1c1b27; --muted:#6b6780; --line:#e6e2f0;
  --danger:#b3261e; --ok:#3a8a4f; --shadow:0 2px 10px rgba(40,30,80,.08);
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* schlägt .modal{display:flex} – sonst bleiben Dialoge offen */
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); -webkit-tap-highlight-color:transparent;
}
button{font-family:inherit; cursor:pointer}
a{color:var(--accent)}

/* ===== Gate ===== */
.gate{position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,var(--accent),#2b2150); padding:24px; z-index:50}
.gate-card{background:var(--card); border-radius:22px; padding:32px 26px; width:min(360px,100%);
  text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.3)}
.gate-logo{width:64px;height:64px;border-radius:18px;background:var(--accent);color:#fff;
  font-size:34px;line-height:64px;margin:0 auto 14px;font-weight:700}
.gate-card h1{margin:.2em 0 .1em;font-size:26px}
.gate-card p{margin:0 0 18px;color:var(--muted)}
.gate-card input{width:100%;padding:14px;border:1px solid var(--line);border-radius:12px;font-size:16px}
.gate-card button{width:100%;margin-top:14px;padding:14px;border:0;border-radius:12px;
  background:var(--accent);color:#fff;font-size:16px;font-weight:600}
.gate-err{color:var(--danger);margin-top:12px;font-size:14px}

/* ===== Topbar / tabs ===== */
.topbar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;background:var(--accent);color:#fff;z-index:10;
  padding-top:max(14px,env(safe-area-inset-top))}
.brand{font-size:20px;font-weight:700}
.top-actions{display:flex;gap:6px}
.icon-btn{background:rgba(255,255,255,.15);border:0;color:#fff;width:40px;height:40px;
  border-radius:50%;font-size:18px}
.tabs{display:flex;background:var(--accent);padding:0 8px 8px}
.tab{flex:1;background:transparent;border:0;color:#e9e3ff;padding:10px;font-size:15px;
  border-bottom:3px solid transparent;font-weight:600}
.tab.active{color:#fff;border-color:#fff}
.filterbar{display:flex;align-items:center;gap:10px;padding:12px 16px 0}
.cat-filter{flex:1;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:15px}
.sync-dot{width:10px;height:10px;border-radius:50%;background:#cfc8e6;flex:none;transition:background .3s}
.sync-dot.ok{background:var(--ok)} .sync-dot.busy{background:#e0a800} .sync-dot.err{background:var(--danger)}

/* ===== List ===== */
.list{padding:12px 14px 100px;display:flex;flex-direction:column;gap:10px;max-width:680px;margin:0 auto}
.empty{text-align:center;color:var(--muted);margin-top:60px}
.card{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;
  display:flex;gap:12px;align-items:flex-start}
.check{width:24px;height:24px;border:2px solid var(--accent);border-radius:50%;flex:none;
  margin-top:2px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;background:#fff}
.check.on{background:var(--accent)}
.card-body{flex:1;min-width:0}
.card-title{font-size:16px;font-weight:600;word-break:break-word}
.card.done .card-title{text-decoration:line-through;color:var(--muted)}
.card-note{font-size:14px;color:var(--muted);margin-top:2px;white-space:pre-wrap;word-break:break-word}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.chip{font-size:12px;background:#efeaff;color:var(--accent-d);padding:3px 9px;border-radius:20px;font-weight:600}
.remind-tag{font-size:12px;color:var(--muted);background:#fff4e0;padding:3px 9px;border-radius:20px}
.remind-tag.due{background:#ffe0e0;color:var(--danger)}
.card-actions{display:flex;flex-direction:column;gap:4px}
.mini{background:transparent;border:0;font-size:17px;opacity:.6;padding:2px 4px}
.mini:hover{opacity:1}

/* ===== FAB ===== */
.fab{position:fixed;right:20px;bottom:max(20px,env(safe-area-inset-bottom));width:60px;height:60px;
  border-radius:50%;border:0;background:var(--accent);color:#fff;font-size:30px;line-height:1;
  box-shadow:0 6px 18px rgba(80,60,160,.45);z-index:9}

/* ===== Modal / sheet ===== */
.modal{position:fixed;inset:0;background:rgba(20,12,40,.45);display:flex;align-items:flex-end;
  justify-content:center;z-index:30}
.sheet{background:var(--card);width:min(560px,100%);border-radius:22px 22px 0 0;padding:22px 20px;
  max-height:92vh;overflow:auto;animation:up .2s ease}
@media(min-width:560px){.modal{align-items:center}.sheet{border-radius:22px}}
@keyframes up{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
.sheet h2{margin:0 0 14px}
.sheet label{display:block;font-size:13px;color:var(--muted);margin-top:12px;font-weight:600}
.sheet input,.sheet textarea,.sheet select{width:100%;padding:12px;margin-top:5px;border:1px solid var(--line);
  border-radius:10px;font-size:16px;font-family:inherit;background:#fff}
.row{display:flex;gap:10px;align-items:flex-end}
.row .grow{flex:1}
.remind{border:1px solid var(--line);border-radius:12px;padding:10px 12px 14px;margin-top:14px}
.remind legend{font-size:13px;color:var(--muted);font-weight:700;padding:0 6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.chips button{background:#efeaff;border:0;color:var(--accent-d);padding:8px 12px;border-radius:20px;font-weight:600;font-size:14px}
.chips button.sel{background:var(--accent);color:#fff}
.sheet-actions{display:flex;gap:10px;margin-top:20px}
.primary-btn{flex:1;background:var(--accent);color:#fff;border:0;border-radius:12px;padding:14px;font-size:16px;font-weight:600}
.ghost-btn{background:#efeaff;color:var(--accent-d);border:0;border-radius:12px;padding:12px 14px;font-weight:600}
.ghost-btn.danger{background:#ffe3e1;color:var(--danger)}
.muted{color:var(--muted);font-size:14px}
#settings .ghost-btn,#settings .primary-btn{width:100%;margin-top:10px}
#settings hr{border:0;border-top:1px solid var(--line);margin:18px 0}

/* ===== Snooze bar ===== */
.snoozebar{position:fixed;left:0;right:0;bottom:0;background:#2b2150;color:#fff;padding:12px 14px;
  z-index:40;box-shadow:0 -4px 20px rgba(0,0,0,.3)}
.snooze-text{display:flex;flex-direction:column;margin-bottom:8px}
.snooze-text span{font-size:13px;opacity:.8}
.snooze-actions{display:flex;flex-wrap:wrap;gap:8px}
.snooze-actions button{background:rgba(255,255,255,.16);border:0;color:#fff;padding:9px 12px;border-radius:20px;font-weight:600;font-size:14px}
.snooze-actions button.done{background:var(--ok)}
.snooze-actions button.x{margin-left:auto;background:transparent;opacity:.7}