/* Weloop — Basis-Styles. Design verbindlich nach dem Handoff
   design_handoff_habit_tracker_redesign (Varianten 4a hell / 4b dunkel):
   Türkis × Gamification · Space Grotesk · helles + dunkles Theme. Mobile-first. */

@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0;
}

/* ── Theme-Tokens (Handoff-README, Abschnitt „Design Tokens“) ─────────────
   Dunkel (4b) = Standard auf :root; Hell (4a) via [data-theme="light"] bzw.
   Systemeinstellung. Die Hell-Werte stehen zweimal (Attribut + Media-Query) —
   CSS kann Blöcke nicht referenzieren; bei Änderungen BEIDE pflegen. */
:root{
  --bg:#0d1a1c;            /* Seiten-/App-Hintergrund */
  --card:#132628;          /* Karten */
  --nav-bg:#0a1416;        /* Bottom-Navigation */
  --ink:#e7f2f0;           /* Text */
  --muted:#6f8f8c;         /* Text sekundär */
  --label:#49696b;         /* Labels/tertiär */
  --dim:#4d6b6d;           /* abgedimmt (Zukunft) */
  --line:#1c3234;          /* Border/Track */
  --check-border:#2c4a4c;  /* Checkbox-Border offen */
  --input-bg:#0f2022;      /* Eingabefelder */
  --surface-dim:#101f21;   /* dezente Flächen (Zukunft/inaktiv) */
  --accent:#17d9bd;
  --accent-text:#4fe3cd;   /* Akzent als Textfarbe */
  --on-accent:#06282a;     /* Text AUF Akzentflächen */
  --chip-bg:#123a38;       /* XP-Chip-Hintergrund */
  --boss-tag-fg:#06282a;  --boss-tag-bg:#17d9bd;
  --boss-chip-fg:#06282a; --boss-chip-bg:#17d9bd;
  --chest-bg:linear-gradient(135deg,#123a38,#132628);
  --chest-border:#1f5a52;
  --level-line:#9fd6cd;
  --avatar-fg:#06282a; --stat-border:transparent; --today-ring:#0a9fc4;
  --error:#e07a77;
  --glow:#17d9bd55;
  --grad:linear-gradient(90deg,#0a9fc4,#17d9bd);
  --grad-avatar:linear-gradient(135deg,#17d9bd,#0a9fc4);
  /* Status-Farblogik: türkis = erfüllt · orange = teilweise · fehlerrot = verpasst · grau = nicht fällig */
  --st-done:var(--accent);
  --st-part:#e0a33f;
  --st-miss:var(--error);
  --st-miss-dim:#5c2f2d;
  --st-miss-dim-text:#c99a97;
  --st-idle:var(--line);
  --st-on:var(--on-accent);
  /* Layout: Breite der Inhaltsspalte (Desktop-Breakpoint hebt sie an) */
  --col:430px;
  /* Legacy-Aliase (Bestandscode) */
  --page:var(--bg); --phone:var(--bg); --tile:var(--card);
  --lime:var(--accent); --lime-dim:var(--chip-bg);
  /* Habit-Palette */
  --blue:#58B6FF; --coral:#FF7A59; --violet:#B08CFF; --amber:#FFC44D; --teal:#37E0B0;
  /* Prioritäten */
  --p-low:#4ADE80; --p-mid:#FACC15; --p-high:#FF6B4A;
}
[data-theme="light"]{
  --bg:#f3faf8; --card:#fff; --nav-bg:#fff;
  --ink:#132b2b; --muted:#5f7f7c; --label:#8aa5a1; --dim:#9db4b1;
  --line:#dcece8; --check-border:#b9d1cd; --input-bg:#fff; --surface-dim:#e9f3f0;
  --accent-text:#0a9a86; --chip-bg:#ddf4ee;
  --boss-tag-fg:#4fe3cd; --boss-tag-bg:#0e3f4a;
  --boss-chip-fg:#0e3f4a; --boss-chip-bg:#d2e6ea;
  --chest-bg:linear-gradient(135deg,#e2f6f1,#eef9f6); --chest-border:#a9dfd3;
  --level-line:#0e3f4a; --avatar-fg:#fff; --stat-border:var(--line); --error:#c25a57; --glow:#17d9bd44;
  --st-miss-dim:#eac6c4; --st-miss-dim-text:#a2605d;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f3faf8; --card:#fff; --nav-bg:#fff;
    --ink:#132b2b; --muted:#5f7f7c; --label:#8aa5a1; --dim:#9db4b1;
    --line:#dcece8; --check-border:#b9d1cd; --input-bg:#fff; --surface-dim:#e9f3f0;
    --accent-text:#0a9a86; --chip-bg:#ddf4ee;
    --boss-tag-fg:#4fe3cd; --boss-tag-bg:#0e3f4a;
    --boss-chip-fg:#0e3f4a; --boss-chip-bg:#d2e6ea;
    --chest-bg:linear-gradient(135deg,#e2f6f1,#eef9f6); --chest-border:#a9dfd3;
    --level-line:#0e3f4a; --avatar-fg:#fff; --stat-border:var(--line); --error:#c25a57; --glow:#17d9bd44;
    --st-miss-dim:#eac6c4; --st-miss-dim-text:#a2605d;
  }
}

/* Status-Zellklassen — einzige Definitionsstelle der Statusfarben.
   st-* = gefüllte kleine Flächen (Heatmap-Punkte, Legende) ·
   stb-* = Rahmen-Variante für große Zellen (Monatskalender, Tages-Chips) */
.st-done{background:var(--st-done);color:var(--st-on)}
.st-part{background:var(--st-part);color:var(--st-on)}
.st-miss{background:var(--st-miss);color:var(--st-on)}
.st-missdim{background:var(--st-miss-dim);color:var(--st-miss-dim-text)}
.st-idle{background:var(--st-idle)}
.st-open{background:color-mix(in srgb,var(--muted) 30%,transparent)}
.st-future{background:var(--surface-dim);color:var(--dim)}
.st-void{background:transparent}
.stb-done{border:2px solid var(--st-done);background:color-mix(in srgb,var(--st-done) 10%,transparent)}
.stb-part{border:2px solid var(--st-part);background:color-mix(in srgb,var(--st-part) 10%,transparent)}
.stb-miss{border:2px solid var(--st-miss);background:color-mix(in srgb,var(--st-miss) 10%,transparent)}
.stb-idle{border:2px solid transparent;background:var(--st-idle)}
.stb-missdim{border:2px solid var(--st-miss-dim);background:color-mix(in srgb,var(--st-miss-dim) 14%,transparent);color:var(--st-miss-dim-text)}
.stb-off{border:2px solid transparent;background:transparent;color:var(--dim)}
.stb-future{border:2px solid transparent;background:var(--surface-dim);color:var(--dim)}
.stb-void{border:none;background:transparent}

*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light dark}
body{
  background:var(--page);color:var(--ink);
  font-family:'Space Grotesk',-apple-system,system-ui,sans-serif;
  /* Spalte statt Zeile: volle Breite für Banner über der zentrierten App-Spalte */
  min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.text-error{color:var(--st-miss)}
a{color:var(--accent-text)}

/* App-Container: mobil volle Breite, ab Tablet zentrierte Spalte */
.app{
  width:100%;max-width:var(--col);min-height:100dvh;background:var(--phone);
  padding:22px 16px calc(84px + env(safe-area-inset-bottom));position:relative;
}
@media (min-width:480px){
  .app{border-left:1px solid var(--line);border-right:1px solid var(--line)}
}

/* Kopfzeile */
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
h1{font-size:24px;font-weight:750;letter-spacing:.01em}
.date{font-size:12px;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.08em}
.avatar{
  width:38px;height:38px;border-radius:12px;background:var(--tile);border:1px solid var(--line);
  color:var(--accent-text);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
}

/* Kacheln */
.tile{background:var(--tile);border:1px solid var(--line);border-radius:20px;padding:14px}
.label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:8px}
.text-muted{color:var(--muted);font-size:13.5px;line-height:1.5}
.stat{font-size:24px;font-weight:800}
.bento-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--lime);color:var(--on-accent);border:none;border-radius:14px;
  padding:13px 18px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;
  text-decoration:none;transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{box-shadow:0 0 18px rgba(23,217,189,.35)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{box-shadow:none;border-color:var(--check-border)}

/* Formulare (Basis für Schritt 2) */
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;background:var(--input-bg);border:1px solid var(--line);border-radius:12px;
  color:var(--ink);font:inherit;font-size:15px;padding:12px 13px;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--lime);outline-offset:-1px;border-color:var(--accent-text)}
.hint{font-size:12px;line-height:1.45;color:var(--muted)}
.hint.text-error{color:var(--st-miss)}
.field .hint{font-size:12px;color:var(--muted);margin-top:5px}

/* Hinweise / Flash */
.alert{border-radius:14px;padding:12px 14px;font-size:13.5px;margin-bottom:14px;border:1px solid var(--line)}
.alert-error{border-color:color-mix(in srgb,var(--error) 45%,transparent);background:color-mix(in srgb,var(--error) 14%,transparent);color:var(--error)}
.alert-success{border-color:var(--lime-dim);background:var(--chip-bg);color:var(--accent-text)}
.alert-warn{border-color:color-mix(in srgb,var(--st-part) 45%,transparent);background:color-mix(in srgb,var(--st-part) 14%,transparent);color:var(--st-part)}

/* Tab-Bar (Hauptnavigation) — Handoff: eine Farbe, kein Glow */
.tabbar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--col);background:var(--nav-bg);
  display:flex;justify-content:space-between;border-top:1px solid var(--line);
  padding:16px 28px calc(16px + env(safe-area-inset-bottom));
}
.tab{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--label);
  background:none;border:none;font-family:inherit;cursor:pointer;text-decoration:none;
}
.tab .ic{display:block}
.tab.active{color:var(--accent-text)}
.tab.disabled{opacity:.35;cursor:default}

/* Heute-Screen (Handoff 4a/4b): Level-Header, Stat-Karten, Truhe, Quest-Zeilen */
.lvl-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.lvl-info{flex:1;min-width:0}
.lvl-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px}
.lvl-title{font-weight:700;color:var(--level-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvl-xp{color:var(--muted);white-space:nowrap}
.xp-track{height:10px;background:var(--line);border-radius:5px;margin-top:6px;overflow:hidden}
.xp-fill{height:10px;background:var(--grad);border-radius:5px;transition:width .5s ease}
.lvl-avatar{width:38px;height:38px;border-radius:12px;flex:none;background:var(--grad-avatar);
  color:var(--avatar-fg);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;text-decoration:none;overflow:hidden}
.lvl-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.head-btn{width:34px;height:34px;border-radius:11px;flex:none;background:var(--card);
  border:1px solid var(--line);color:var(--muted);display:flex;align-items:center;
  justify-content:center;cursor:pointer;text-decoration:none;padding:0;font:inherit}
.stat-cards{display:flex;gap:10px;margin-bottom:14px}
.stat-card{flex:1;background:var(--card);border:1px solid var(--stat-border);border-radius:14px;
  padding:12px;text-align:center}

.stat-emoji{font-size:20px}
.stat-value{font-size:16px;font-weight:700;margin-top:2px;font-family:inherit}
.stat-label{font-size:10.5px;color:var(--label);text-transform:uppercase;letter-spacing:.04em}
.chest-card{background:var(--chest-bg);border:1px solid var(--chest-border);border-radius:16px;
  padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:16px}
.chest-emoji{font-size:26px}
.chest-main{flex:1;min-width:0}
.chest-title{font-weight:700;font-size:14px;color:var(--level-line)}
.chest-sub{font-size:12px;color:var(--muted);margin-top:1px}
.chest-count{font-size:12px;color:var(--muted);font-family:inherit}
.quest-label{padding:6px 0 2px;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--label)}
/* Formular-Kopf: Werkzeug-Leiste (Teilen/Erinnern/Team/Pause) als EIN Container */
.tool-strip{display:flex;background:var(--card);border:1px solid var(--line);
  border-radius:14px;margin:-4px 0 14px;overflow:hidden}
.tool{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 4px 9px;background:none;border:none;font-family:inherit;cursor:pointer;
  color:var(--muted);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.tool + .tool{border-left:1px solid var(--line)}
.tool:hover{color:var(--ink)}
.tool.active{color:var(--accent-text)}
.head-btn.active{color:var(--accent-text);border-color:var(--accent)}
/* Archivieren/Löschen: dezente Text-Links unter der Speicherleiste */
.danger-links{display:flex;justify-content:center;align-items:center;gap:10px;
  margin-top:6px;font-size:12.5px;color:var(--muted)}
.danger-links button{background:none;border:none;font:inherit;font-size:12.5px;
  color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:4px 2px}
.danger-links button:hover{color:var(--ink)}
.danger-links button.danger{color:var(--error)}
.link-btn{background:none;border:none;font:inherit;font-size:13px;color:var(--muted);
  cursor:pointer;text-decoration:none}
.link-btn:hover{color:var(--accent-text)}
.quest-list{display:flex;flex-direction:column}
.habit.quest{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;
  color:inherit;background:none;border:none;border-radius:0;border-bottom:1px solid var(--line);
  padding:15px 0;cursor:pointer}
.habit.quest:last-child{border-bottom:none}
.habit.quest:active{transform:none}
.quest .icon{width:34px;height:34px;border-radius:11px}
.quest.done .icon,.quest.failed .icon,.quest.missed .icon{opacity:.55}
.q-main{flex:1;min-width:0}
.q-title{display:block;font-size:16.5px;font-weight:500;color:var(--ink)}
.q-sub{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.quest.done .q-title{text-decoration:line-through;color:var(--dim)}
.quest.done .q-sub{color:var(--accent-text)}
.quest.failed .q-title,.quest.failed .q-sub{color:var(--error)}
.quest.missed .q-title,.quest.missed .q-sub{color:var(--st-miss-dim-text)}
.boss-tag{font-style:normal;background:var(--boss-tag-bg);color:var(--boss-tag-fg);
  font-size:9.5px;font-weight:700;border-radius:5px;padding:2px 6px;vertical-align:2px;letter-spacing:.04em}
.xp-chip{flex:none;font-size:11.5px;font-weight:700;color:var(--accent-text);
  background:var(--chip-bg);border-radius:14px;padding:3px 9px;white-space:nowrap}
.xp-chip.boss{color:var(--boss-chip-fg);background:var(--boss-chip-bg)}
.quest .check{width:34px;height:34px;border-radius:11px;border:1.5px solid var(--check-border);background:transparent;box-shadow:none}
.quest.done .check{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:none}
.quest.failed .check{border-color:var(--error);color:var(--error);background:transparent;border-style:solid}
.quest.missed .check{border-color:var(--st-miss-dim-text);color:var(--st-miss-dim-text);background:transparent;border-style:dashed}

/* Gast-Seiten (Login, Registrierung, …) */
.guest{display:flex;flex-direction:column;justify-content:center;min-height:calc(100dvh - 64px);padding-bottom:24px}
.brand{text-align:center;margin-bottom:22px}
.logo{font-size:30px;letter-spacing:.02em;font-weight:800}
.logo img{max-width:240px;max-height:72px;width:auto;height:auto;display:block;margin:0 auto}
/* Branding-Verwaltung */
.invite-send{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.invite-send input{flex:1;min-width:130px;background:var(--input-bg);border:1px solid var(--line);
  border-radius:10px;color:var(--ink);font:inherit;font-size:12.5px;padding:8px 10px}
.ph-chip{display:inline-block;background:var(--input-bg);border:1px solid var(--line);border-radius:7px;
  padding:1px 6px;margin:2px 3px 0 0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--accent-text)}
.brand-preview{background:var(--input-bg);border:1px solid var(--line);border-radius:14px;
  padding:14px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:12px}
.brand-preview img{max-width:100%;max-height:80px}
.brand-preview.icons img{max-height:64px;border-radius:8px}
.brand-logo{max-height:22px;max-width:130px;width:auto;vertical-align:middle}
/* Logo in der Heute-Kopfzeile — auf schmalen Geräten kleiner, damit die Level-Zeile Platz behält */
.head-logo{max-height:20px;max-width:64px;width:auto;flex:none;display:block}
@media (min-width:400px){.head-logo{max-height:22px;max-width:96px}}
.logo-we{color:var(--muted);font-weight:650}
.logo-loop{color:var(--accent-text);text-shadow:0 0 18px rgba(23,217,189,.35)}
.brand p{margin-top:6px;font-size:13px}
.btn-block{width:100%}
.auth-links{display:flex;justify-content:center;gap:10px;margin-top:16px;font-size:13px}
.auth-links a{color:var(--muted);text-decoration:none}
.auth-links a:hover{color:var(--accent-text)}
.code-input{letter-spacing:.35em;font-size:20px;text-align:center}
.secret{font-size:16px;letter-spacing:.12em;margin:10px 0 12px;word-break:break-all;color:var(--accent-text)}
.backup-codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:14.5px;letter-spacing:.06em}
.backup-codes span{background:var(--input-bg);border:1px solid var(--line);border-radius:9px;padding:8px 10px;text-align:center}
.alert a{color:inherit;word-break:break-all}

/* Listen & Habit-Karten (Farbchip aus der Design-Referenz) */
.sec{display:flex;justify-content:space-between;align-items:baseline;margin:16px 2px 10px}
.sec b{font-size:13px;font-weight:750;text-transform:uppercase;letter-spacing:.1em}
.sec span{font-size:11px;color:var(--muted)}
.list{display:flex;flex-direction:column;gap:9px}
.habit{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;color:inherit;
  background:var(--tile);border:1px solid var(--line);border-radius:16px;padding:12px 13px;
  cursor:pointer;transition:transform .12s ease;text-decoration:none}
.habit:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.habit:active{transform:scale(.985)}
.habit.readonly{cursor:default;opacity:.8}
.habit.readonly:active{transform:none}
.icon{width:38px;height:38px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;
  color:var(--hc,var(--muted));
  background:color-mix(in srgb,var(--hc,#444) 24%,var(--input-bg));
  border:1px solid color-mix(in srgb,var(--hc,#444) 45%,var(--line));
  box-shadow:0 0 12px color-mix(in srgb,var(--hc,#444) 22%,transparent)}
.h-main{flex:1;min-width:0}
.h-main strong{display:block;font-size:14px;font-weight:650;letter-spacing:.005em}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:3px;font-size:11.5px;color:var(--muted)}
.prio{flex:none;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.p-low{color:var(--p-low)}.p-mid{color:var(--p-mid)}.p-high{color:var(--p-high)}
.empty-state{text-align:center;padding:26px 16px}

/* Seitenkopf mit Plus-Button */
.btn-add{width:38px;height:38px;border-radius:12px;background:var(--lime);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;
  text-decoration:none;box-shadow:0 0 16px rgba(23,217,189,.3)}
.btn-add.ghost{background:var(--tile);color:var(--muted);border:1px solid var(--line);box-shadow:none}

/* Filter-Tabs */
.filter-tabs{display:flex;gap:6px;margin-bottom:14px;background:var(--tile);border:1px solid var(--line);
  border-radius:13px;padding:4px}
.filter-tabs a{flex:1;text-align:center;padding:8px 4px;border-radius:10px;font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.filter-tabs a.active{background:var(--input-bg);color:var(--accent-text)}

/* Formulare: Kacheln, Icon-Grid, Farb-Swatches, Pills, Segmented */
.form-tile{margin-bottom:12px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:7px;
  max-height:172px;overflow-y:auto;padding:2px}
.icon-opt input{position:absolute;opacity:0;pointer-events:none}
.icon-opt .icon{width:100%;height:44px;border-radius:11px;color:var(--muted);
  background:var(--input-bg);border:1px solid var(--line);box-shadow:none;cursor:pointer}
.icon-opt input:checked + .icon{color:var(--hc,var(--lime));
  background:color-mix(in srgb,var(--hc,var(--lime)) 24%,var(--input-bg));
  border-color:color-mix(in srgb,var(--hc,var(--lime)) 55%,var(--line));
  box-shadow:0 0 12px color-mix(in srgb,var(--hc,var(--lime)) 25%,transparent)}
.icon-opt input:focus-visible + .icon{outline:2px solid var(--lime);outline-offset:1px}
.swatches{display:flex;flex-wrap:wrap;gap:9px}
.swatch input{position:absolute;opacity:0;pointer-events:none}
.swatch span{display:block;width:32px;height:32px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;transition:transform .12s ease}
.swatch input:checked + span{border-color:var(--ink);transform:scale(1.12)}
.swatch input:focus-visible + span{outline:2px solid var(--lime);outline-offset:2px}
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pill input{position:absolute;opacity:0;pointer-events:none}
.pill span{display:block;padding:8px 13px;border-radius:999px;font-size:12.5px;font-weight:700;
  background:var(--input-bg);border:1px solid var(--line);color:var(--muted);cursor:pointer}
.pill input:checked + span{background:var(--lime-dim);border-color:var(--accent-text);color:var(--accent-text)}
.pill input:focus-visible + span{outline:2px solid var(--lime);outline-offset:1px}
.segmented{display:flex;gap:5px;background:var(--input-bg);border:1px solid var(--line);border-radius:12px;padding:4px}
.segmented label{flex:1;position:relative}
.segmented input{position:absolute;opacity:0;pointer-events:none}
.segmented span{display:block;text-align:center;padding:9px 4px;border-radius:9px;font-size:12.5px;
  font-weight:700;color:var(--muted);cursor:pointer;border:1px solid transparent}
.segmented input:checked + span{background:var(--tile);color:var(--ink);border-color:var(--line)}
.segmented input:focus-visible + span{outline:2px solid var(--lime);outline-offset:1px}
.check-row{display:flex;gap:10px;align-items:flex-start;cursor:pointer;margin-top:4px}
.check-row input{margin-top:3px;accent-color:var(--accent-text)}
.check-row span{font-size:14px;font-weight:600}
.check-row small{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}
[hidden]{display:none!important}
.danger-zone{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.btn.danger{color:var(--st-miss);border-color:color-mix(in srgb,var(--error) 45%,transparent)}
.btn.danger-solid{background:var(--st-miss);color:#fff}
.btn.danger-solid:hover{box-shadow:0 0 18px rgba(224,122,119,.35)}
.btn:disabled{opacity:.35;cursor:default;box-shadow:none}
/* Formular-Kopf: Aktions-Icons (Teilen, Erinnerungen, Zurück) */
.top-actions{display:flex;gap:8px}
/* Sticky-Speicherleiste: bleibt beim Scrollen über der Tabbar sichtbar */
.form-actions{position:sticky;bottom:calc(62px + env(safe-area-inset-bottom));z-index:10;
  display:flex;gap:9px;padding:10px 0 4px;
  background:linear-gradient(to top,var(--phone) 78%,transparent)}
.form-actions .btn{flex:1}
.form-actions .btn[type="submit"]{flex:1.7}
/* Sheets: Kopfzeile + scrollbarer Inhalt */
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sheet-scroll{max-height:62dvh;overflow-y:auto;overscroll-behavior:contain}
/* Trackingtyp-Kachel: feste Mindesthöhe, damit der Typwechsel das Formular nicht springen lässt */
.type-tile{min-height:320px}

/* Heute: wischbarer Tages-Kalender + kompakte Stats-Zeile */
.day-strip{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 8px;margin-bottom:8px;
  scroll-snap-type:x proximity;scrollbar-width:none}
.day-strip::-webkit-scrollbar{display:none}
.day-chip{flex:none;width:50px;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 0;border-radius:12px;text-decoration:none;scroll-snap-align:center;
  border:1px solid var(--stat-border);background:var(--card)}
.day-chip small{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--label)}
.day-chip b{font-size:15px;font-weight:500;color:var(--ink);margin-top:2px}
.day-chip.future small{color:var(--dim)}
.day-chip.future b{color:var(--dim)}
.day-chip.sel{border:2px solid var(--accent);padding:7px 0;box-shadow:0 0 10px var(--glow)}
.day-chip.sel small{color:var(--accent-text)}
.day-chip.sel b{color:var(--level-line)}
.day-stats{font-size:13px;color:var(--muted);margin:2px 2px 6px}
.day-stats span{color:var(--ink);font-weight:800}
.t-streak b{font-size:24px;font-weight:800;color:var(--accent-text);text-shadow:0 0 16px rgba(23,217,189,.4)}
.t-streak small{display:block;font-size:11px;color:var(--muted);margin-top:2px}

/* Tracking-Zustände auf der Heute-Karte */
.habit.track{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.check{width:30px;height:30px;border-radius:9px;border:1.5px solid var(--check-border);flex:none;
  display:flex;align-items:center;justify-content:center;transition:all .2s ease}
.check svg{position:absolute;opacity:0;transform:scale(.5);transition:all .2s ease}
.check{position:relative}
/* Größere Trefferfläche der Checkbox (Tracken passiert nur noch hier) */
.habit.track .check::after{content:"";position:absolute;inset:-11px}
.habit.done .check{background:var(--lime);border-color:var(--accent-text);box-shadow:0 0 14px rgba(23,217,189,.45)}
.habit.done .check .check-done{opacity:1;transform:scale(1)}
.habit.done .h-main strong{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--dim)}
.habit.failed .check{border-color:var(--st-miss);color:var(--st-miss);background:color-mix(in srgb,var(--error) 14%,transparent)}
.habit.failed .check .check-fail{opacity:1;transform:scale(1)}
.habit.failed .h-main strong{color:var(--muted)}
.streak-flame{color:var(--accent-text);font-size:11px}

/* Schnelleingabe-Sheet */
.sheet-backdrop{position:fixed;inset:0;background:rgba(4,6,9,.72);z-index:40;
  display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:var(--col);background:var(--tile);border:1px solid var(--line);
  border-radius:24px 24px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:14px}
.sheet-title{font-size:17px;font-weight:750}
.stepper{display:flex;align-items:center;gap:12px}
.step-btn{width:52px;height:52px;border-radius:16px;background:var(--input-bg);border:1px solid var(--line);
  color:var(--ink);font-size:24px;font-weight:700;cursor:pointer;flex:none}
.step-btn:active{transform:scale(.95)}
.step-value{flex:1;display:flex;align-items:baseline;justify-content:center;gap:6px}
.step-value input{width:100%;max-width:120px;background:none;border:none;color:var(--ink);
  font-size:32px;font-weight:800;text-align:center;font-family:ui-monospace,"SF Mono",Menlo,monospace}
.step-value input:focus{outline:none}
.step-value span{font-size:14px}
.sheet-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}

/* Wiederholbare Formularzeilen (Jahrestage, Monatsmuster, Checklisten-Punkte) */
.repeat-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.repeat-row input[type="text"],.repeat-row select{flex:1;min-width:0;background:var(--input-bg);
  border:1px solid var(--line);border-radius:12px;color:var(--ink);font:inherit;font-size:14px;padding:10px 12px}
.repeat-row .pill{flex:none}
.row-remove{width:36px;height:38px;flex:none;background:var(--input-bg);border:1px solid var(--line);
  border-radius:10px;color:var(--muted);font-size:16px;cursor:pointer}
.row-remove:hover{color:var(--st-miss);border-color:color-mix(in srgb,var(--error) 45%,transparent)}
.row-add{margin-top:2px;padding:9px 14px;font-size:12.5px}
/* Checklisten-Sortierung: ▲/▼ je Zeile; erste/letzte Richtung ohne Ziel gedimmt */
.row-move{display:flex;flex-direction:column;gap:2px;flex:none}
.row-move button{width:30px;height:18px;display:grid;place-items:center;padding:0;cursor:pointer;
  background:var(--input-bg);border:1px solid var(--line);border-radius:7px;color:var(--muted)}
.row-move button:hover{color:var(--accent-text);border-color:var(--accent)}
[data-rows] > .repeat-row:first-child [data-move="up"],
[data-rows] > .repeat-row:last-child [data-move="down"]{opacity:.3;pointer-events:none}
.monthday-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.monthday-grid .pill span{display:flex;align-items:center;justify-content:center;padding:8px 0;text-align:center}

/* Checklisten-Sheet */
.cl-items{display:flex;flex-direction:column;gap:8px;max-height:45dvh;overflow-y:auto}
.cl-item{display:flex;align-items:center;gap:11px;background:var(--input-bg);border:1px solid var(--line);
  border-radius:12px;padding:12px 13px;font-size:14.5px;cursor:pointer}
.cl-item input{width:19px;height:19px;flex:none;accent-color:var(--accent-text)}
.cl-item:has(input:checked){border-color:var(--lime-dim)}
.cl-item:has(input:checked) span{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--dim)}

/* Auto-verpasste Tage: optisch von explizit „verfehlt" unterscheidbar */
.habit.missed .check{border-style:dashed;border-color:var(--st-miss-dim);color:var(--st-miss-dim-text);background:transparent}
.habit.missed .check .check-fail{opacity:.7;transform:scale(1)}
.habit.missed .h-main strong{color:var(--muted)}
.habit.track:disabled{cursor:default}

/* Kalender: Monatsansicht */
.month-nav{display:flex;gap:8px}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal-weekdays span{text-align:center;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:9px;
  font-size:12.5px;font-weight:650;color:var(--ink);text-decoration:none;
  font-family:ui-monospace,"SF Mono",Menlo,monospace}
.cal-day.today{border:2px solid var(--today-ring);background:color-mix(in srgb,var(--today-ring) 10%,transparent);box-shadow:0 0 10px color-mix(in srgb,var(--today-ring) 45%,transparent);color:var(--ink)}
a.cal-day:active{transform:scale(.94)}

/* Legende */
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:11.5px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:5px}
.legend .dot{width:11px;height:11px;border-radius:3px;display:inline-block}

/* Tagesdetail-Navigation */
.day-nav{display:flex;justify-content:space-between;gap:8px;margin-bottom:12px}
.day-nav .btn{padding:9px 14px;font-size:12.5px}

/* Habit-Chips (Einstieg Jahresübersicht) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;
  font-size:12.5px;font-weight:700;color:var(--ink);text-decoration:none;
  background:color-mix(in srgb,var(--hc,#444) 16%,var(--input-bg));
  border:1px solid color-mix(in srgb,var(--hc,#444) 40%,var(--line))}
.chip .ic{color:var(--hc)}

/* Habit-Detailseite: Quote-Ring + Erfolg/Misserfolg-Donut */
.q-ring,.donut{position:relative;margin:0 auto;width:max-content}
.q-ring svg,.donut svg{transform:rotate(-90deg);display:block}
.q-ring .track,.donut .track{stroke:var(--line)}
.q-ring .bar{stroke:var(--st-done);filter:drop-shadow(0 0 7px rgba(23,217,189,.5))}
.q-ring-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.q-ring-label b{font-size:20px;font-weight:800}

/* Jahres-Heatmap (Wochen als Spalten, horizontal scrollbar; Achsen: Mo–So links, Monate oben) */
.year-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.year-stats{display:flex;flex-wrap:wrap;gap:10px;font-size:11.5px}
.stat-done{color:var(--st-done)} .stat-fail{color:var(--st-miss)} .stat-miss{color:var(--st-miss-dim-text)}
.year-wrap{display:flex;gap:6px}
.year-days{display:grid;grid-template-rows:repeat(7,10px);gap:3px;margin-top:16px;flex:none}
.year-days span{font-size:8px;font-weight:700;line-height:10px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em}
.year-scroll{overflow-x:auto;padding-bottom:6px}
.year-months{display:flex;margin-bottom:4px;width:max-content}
.year-months span{flex:none;font-size:9px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;overflow:hidden}
.year-heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,10px);
  grid-auto-columns:10px;gap:3px;width:max-content}
.year-heat i{border-radius:2px}

/* Toast (Perfekter Tag) */
.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,12px);opacity:0;z-index:50;
  background:var(--lime);color:var(--on-accent);font-size:12.5px;font-weight:800;border-radius:999px;
  padding:10px 16px;transition:all .35s ease;pointer-events:none;box-shadow:0 0 30px rgba(23,217,189,.5)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Admin-Panel — breite Desktop-Shell (die App selbst bleibt mobil) */
.app--wide{max-width:1100px;padding-bottom:40px}
.admin-grid{display:grid;gap:12px;align-items:start}
.admin-grid > *{min-width:0}
.admin-grid .tile{margin-bottom:0}
@media (min-width:900px){
  .app--wide{padding:28px 32px 48px}
  .app--wide .admin-nav{flex-wrap:wrap;overflow:visible}
  .app--wide .bento-2{grid-template-columns:repeat(4,1fr)}
  .app--wide .list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .app--wide .list .habit{align-self:start}
  /* Formulare bleiben lesbar schmal — Löschen-Zone und lose Buttons gleich breit */
  .app--wide form .tile,.app--wide .form-tile,
  .app--wide .danger-zone,.app--wide form > .btn-block{max-width:640px}
  .app--wide .admin-grid{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
  .app--wide .admin-grid .form-tile,.app--wide .admin-grid form .tile,
  .app--wide .admin-grid form > .btn-block{max-width:none}
}
/* Ab 1024px: Admin-Navigation als feste Sidebar, Inhalt nutzt die volle Breite */
@media (min-width:1024px){
  body:has(.admin-nav){--admin-rail:236px;padding-left:var(--admin-rail)}
  body:has(.admin-nav) .app--wide{max-width:none;padding:28px 40px 48px}
  .app--wide .admin-nav{
    position:fixed;top:0;bottom:0;left:0;z-index:20;width:var(--admin-rail);
    flex-direction:column;flex-wrap:nowrap;gap:2px;overflow-y:auto;margin:0;
    padding:22px 14px;background:var(--nav-bg);border-right:1px solid var(--line);
  }
  .app--wide .admin-nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;
    border-radius:12px;background:none;border:1px solid transparent;
    font-size:13.5px;letter-spacing:0;white-space:normal}
  .app--wide .admin-nav a:hover{color:var(--ink);background:var(--input-bg)}
  .app--wide .admin-nav a.active{color:var(--accent-text);background:var(--chip-bg);border-color:var(--lime-dim)}
  .app--wide .admin-nav .ic{display:block;flex:none}
  .app--wide .admin-nav .admin-nav-brand{display:block;font-size:17px;font-weight:750;color:var(--ink);
    padding:4px 12px 16px;border:none;background:none}
  .app--wide .admin-nav .admin-nav-brand small{color:var(--accent-text);font-size:11px;font-weight:800;
    letter-spacing:.12em;text-transform:uppercase;margin-left:4px}
  .app--wide .admin-nav-group{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;
    text-transform:uppercase;color:var(--label);padding:16px 12px 6px}
  .app--wide .admin-nav .admin-nav-back{margin-top:auto;color:var(--muted)}
  .app--wide .bento-2{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .app--wide .list{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
}
.table-scroll{overflow-x:auto}
/* Fehlerprotokoll im Admin */
.log-view{max-height:60vh;overflow:auto;background:var(--input-bg);border:1px solid var(--line);
  border-radius:12px;padding:12px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:11.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--muted)}
.admin-table{width:100%;border-collapse:collapse;font-size:13px}
.admin-table th{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.admin-table td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.admin-table tr:hover td{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.admin-table a{text-decoration:none}
.filter-form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:12px}
.filter-form .field{margin-bottom:0;min-width:130px;flex:1}
.filter-form .btn{padding:11px 16px}
/* Live-Suche */
.livesearch-wrap{position:relative}
.livesearch-results{position:absolute;top:100%;left:0;right:0;z-index:30;margin-top:4px;
  background:var(--tile);border:1px solid var(--line);border-radius:14px;padding:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.5)}
.livesearch-results:empty{display:none}
.livesearch-results a{display:block;padding:9px 11px;border-radius:10px;color:var(--ink);
  text-decoration:none;font-size:13.5px}
.livesearch-results a:hover{background:var(--input-bg)}
.livesearch-results a small{color:var(--muted);margin-left:6px}

/* Admin-Panel */
.admin-nav{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding-bottom:4px}
.admin-nav a{flex:none;padding:8px 13px;border-radius:999px;font-size:12px;font-weight:700;
  letter-spacing:.04em;color:var(--muted);text-decoration:none;background:var(--tile);
  border:1px solid var(--line);white-space:nowrap}
.admin-nav a.active{color:var(--accent-text);border-color:var(--lime-dim);background:var(--chip-bg)}
/* Mobil: nur die Pills — Marke, Gruppentitel und Icons zeigt erst die Sidebar */
.admin-nav .admin-nav-brand,.admin-nav-group,.admin-nav .ic{display:none}
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:13.5px}
.kv span:nth-child(odd){color:var(--muted)}
.badge{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px}
.badge-lime{background:var(--lime-dim);color:var(--accent-text)}
.badge-red{background:color-mix(in srgb,var(--error) 20%,transparent);color:var(--error)}
.badge-amber{background:color-mix(in srgb,var(--st-part) 16%,transparent);color:var(--st-part)}
.admin-actions{display:flex;flex-direction:column;gap:9px}
/* Plan-Hinweis: dauerhaft, solange ein Limit überschritten ist */
.plan-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;flex:none;
  padding:10px 16px;font-size:12.5px;font-weight:600;
  background:color-mix(in srgb,var(--st-part) 16%,transparent);color:var(--st-part);
  border-bottom:1px solid color-mix(in srgb,var(--st-part) 45%,transparent)}
.plan-banner.expired{background:color-mix(in srgb,var(--st-miss) 16%,transparent);color:var(--st-miss);
  border-bottom-color:color-mix(in srgb,var(--st-miss) 45%,transparent)}
.plan-banner a{color:inherit;white-space:nowrap;font-weight:800;text-decoration:underline}
/* Durch das Plan-Limit gesperrt: sichtbar, aber nicht bedienbar */
.habit.locked{opacity:.55;cursor:default}
.habit.locked .check{border-style:dashed;opacity:.6}
.habit.locked .q-sub{color:var(--st-miss)}
.impersonation-banner{position:sticky;top:0;z-index:60;flex:none;display:flex;align-items:center;
  justify-content:space-between;gap:10px;width:100%;
  background:color-mix(in srgb,var(--st-part) 16%,transparent);border-bottom:1px solid color-mix(in srgb,var(--st-part) 45%,transparent);color:var(--st-part);
  padding:10px 16px;font-size:13px;font-weight:700}
.impersonation-banner button{background:none;border:1px solid color-mix(in srgb,var(--st-part) 45%,transparent);border-radius:9px;
  color:var(--st-part);font:inherit;font-size:12px;padding:6px 10px;cursor:pointer;white-space:nowrap}

/* Stats: Balkendiagramme + Zeilen mit Fortschrittsbalken */
.bar-chart{display:flex;gap:5px;align-items:flex-end;height:96px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;height:100%}
.bar-track{flex:1;width:100%;max-width:22px;background:var(--line);border-radius:5px;position:relative;overflow:hidden}
.bar-track i{position:absolute;bottom:0;left:0;right:0;background:var(--lime);border-radius:5px;
  box-shadow:0 0 8px rgba(23,217,189,.3);min-height:2px}
.bar-col span{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.stat-row{display:flex;align-items:center;gap:10px;padding:7px 0}
.stat-row + .stat-row{border-top:1px solid var(--line)}
.stat-row .icon-sm{width:28px;height:28px;border-radius:8px;font-size:0;box-shadow:none}
.stat-name{flex:1;min-width:0;font-size:13.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat-name small{font-weight:400;font-size:11px}
.bar-h{flex:1;max-width:34%;height:7px;background:var(--line);border-radius:4px;overflow:hidden}
.bar-h i{display:block;height:100%;background:var(--lime);border-radius:4px}
.stat-pct{flex:none;width:46px;text-align:right;font-size:12.5px}

/* Profilbilder: Bild füllt den Avatar-Rahmen, sonst Farb-Initialen */
.has-img{padding:0;overflow:hidden}
.has-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.avatar-lg{width:56px;height:56px;border-radius:16px;font-size:15px;flex:none}
.lvl-avatar-link{display:block;flex:none;text-decoration:none}
.avatar-upload-row{display:flex;align-items:center;gap:12px}
/* Upload-Feld (partials/file-drop): unsichtbares Datei-Input über der ganzen Fläche */
.file-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:22px 16px;margin-bottom:12px;border:1.5px dashed var(--check-border);border-radius:16px;
  background:var(--input-bg);color:var(--muted);font-size:13.5px;text-align:center;cursor:pointer;
  transition:border-color .2s,background .2s}
.file-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.file-drop:hover,.file-drop.drag{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--input-bg))}
.file-drop:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.file-drop.has-file{border-style:solid;border-color:var(--accent)}
.file-drop.too-large{border-color:var(--st-miss);color:var(--st-miss)}
.file-drop.too-large b{color:var(--st-miss)}
.file-drop-icon{color:var(--accent-text)}
.file-drop b{color:var(--ink);font-weight:700;word-break:break-all}
.file-drop-hint{font-size:11.5px;color:var(--label)}
.avatar-upload-row .file-drop{flex:1;margin-bottom:0;padding:16px 12px}
a.avatar-link{text-decoration:none}

/* Mitteilungs-Glocke + Dropdown */
.bell-wrap{position:relative}
.bell-badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--st-miss);color:#fff;font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.notify-pop{position:absolute;top:44px;right:0;z-index:30;width:min(300px,84vw);
  background:var(--tile);border:1px solid var(--line);border-radius:16px;padding:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.5)}
.notify-row{display:flex;align-items:center;gap:9px;padding:8px;border-radius:11px;
  text-decoration:none;color:var(--ink)}
.notify-row:hover{background:var(--input-bg)}
.notify-text{font-size:12.5px;line-height:1.35}
/* Zähler-Punkt am Tab „Gemeinsam“ */
.tab-ic-wrap{position:relative;display:block}
.tab-dot{position:absolute;top:-5px;right:-9px;min-width:15px;height:15px;padding:0 3px;
  border-radius:999px;background:var(--st-miss);color:#fff;font-size:9px;font-weight:800;
  font-style:normal;display:flex;align-items:center;justify-content:center}
/* QR-Anzeige */
.qr-tile{padding:14px;background:#fff;border-radius:20px}
.qr-tile svg{display:block;width:100%;height:auto}
.qr-sm{max-width:210px;margin:10px auto}

/* Freunde */
.friend-row{gap:9px}
.friend-avatar{width:38px;height:38px;border-radius:12px;flex:none;background:var(--input-bg);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800}
.friend-btn{padding:8px 12px;font-size:12px;flex:none}
.friend-row form{flex:none}

/* Teilen */
.share-row{display:flex;align-items:center;gap:10px;padding:7px 0}
.share-row + .share-row{border-top:1px solid var(--line)}
.share-link{display:flex;gap:8px;margin-bottom:9px}
.share-link input{flex:1;min-width:0;background:var(--input-bg);border:1px solid var(--line);border-radius:12px;
  color:var(--muted);font-size:12px;padding:10px 12px;font-family:ui-monospace,"SF Mono",Menlo,monospace}

/* Gemeinsame Habits */
.team-block{margin-bottom:14px}
.team-block .list{margin-bottom:6px}
.team-detail{border-top-left-radius:8px;border-top-right-radius:8px}
.team-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.team-members{display:flex;flex-direction:column;gap:7px}
.team-member{display:flex;align-items:center;gap:9px}
.team-member-name{flex:1;min-width:0;font-size:13px;font-weight:650;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.team-member-name small{font-weight:400;font-size:10.5px}
.team-member-today{font-size:12px}
.team-member-30{font-size:10.5px;flex:none}
.friend-avatar.contributed{border-color:var(--accent-text);box-shadow:0 0 8px rgba(23,217,189,.3)}
.tabbar .tab{padding:0 2px}

/* Badges */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
.badge-item{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  background:var(--input-bg);border:1px solid var(--line);border-radius:14px;padding:12px 8px}
.badge-item.earned{border-color:color-mix(in srgb,var(--hc,#444) 45%,var(--line))}
.badge-item.locked{opacity:.45;filter:grayscale(.8)}
.badge-name{font-size:11.5px;font-weight:700;line-height:1.25}
.badge-meta{font-size:9.5px;color:var(--muted)}

/* Profil */
.verified{color:var(--accent-text);font-size:12px;margin-left:6px}
.unverified{color:var(--st-part);font-size:12px;margin-left:6px}
a.avatar{text-decoration:none}

/* Fehlerseiten */
.error-page{min-height:70dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.error-page b{font-size:40px;color:var(--muted)}
.error-page h1{font-size:20px}
.error-page .btn{margin-top:12px}

/* ── Responsive ─────────────────────────────────────────────────────────
   Ein Transformationspunkt: ab 1024px (Tablet quer / Laptop / Desktop) wird
   die Bottom-Tabbar zur linken Seitenleiste und die Spalte wächst auf 640px.
   Gate body:has(.tabbar): Admin (eigene breite Shell) und Gast-Seiten haben
   keine Tabbar und bleiben unberührt; ohne :has() bleibt das mobile Layout. */
@media (max-width:359px){
  .app{padding-left:12px;padding-right:12px}
}
@media (min-width:1024px){
  body:has(.tabbar){--col:640px;--rail:96px;padding-left:var(--rail)}
  body:has(.tabbar) .tabbar{
    top:0;bottom:0;left:0;transform:none;
    width:var(--rail);max-width:none;
    flex-direction:column;justify-content:flex-start;gap:22px;
    border-top:none;border-right:1px solid var(--line);
    padding:28px 6px;
  }
  body:has(.tabbar) .tab{letter-spacing:.08em}
  body:has(.tabbar) .tab:hover{color:var(--ink)}
  body:has(.tabbar) .tab.active:hover{color:var(--accent-text)}
  body:has(.tabbar) .tab.disabled:hover{color:var(--label)}
  body:has(.tabbar) .app{padding-bottom:40px}
  body:has(.tabbar) .form-actions{bottom:0}
  body:has(.tabbar) .toast{left:calc(50% + var(--rail)/2);bottom:32px}
  /* Karten-Listen zweispaltig (Habits, Kategorien, Freunde, Team) —
     Quest-Liste bleibt bewusst einspaltig */
  body:has(.tabbar) .list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  body:has(.tabbar) .list .habit{align-self:start}
  /* Bottom-Sheets werden zentrierte Dialoge (gilt auch für Admin-Sheets) */
  .sheet-backdrop{align-items:center;padding:24px}
  .sheet{border-radius:24px;max-width:460px;padding-bottom:20px}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}

/* ── Benachrichtigungen: Geräte-Status, Installation, Matrix Ereignis × Kanal ── */
.push-box{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:14px}
.push-box .push-status{font-size:13.5px;line-height:1.5;margin:0}
.push-box .push-status[data-tone="on"]{color:var(--accent-text)}
.push-box .push-status[data-tone="warn"]{color:var(--st-part)}
.push-actions{display:grid;gap:8px;margin-top:10px}
.push-actions:empty{display:none}
.push-msg{font-size:12.5px;color:var(--muted);margin-top:8px}
.notify-matrix{width:100%;border-collapse:collapse;font-size:13.5px;margin:6px 0 12px}
.notify-matrix th{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;text-align:center;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.notify-matrix th:first-child{text-align:left;padding-left:0}
.notify-matrix td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.notify-matrix td:first-child{text-align:left;font-weight:600;padding-left:0}
.notify-matrix td small{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}
.notify-matrix tr:last-child td{border-bottom:0}
.notify-matrix input{width:18px;height:18px;accent-color:var(--accent-text);cursor:pointer}
.notify-matrix input:disabled{cursor:not-allowed;opacity:.45}
.notify-matrix .na{color:var(--muted)}