/* Space Grotesk lokal gebündelt (offline-fähig, kein CDN). Variabler Font, Gewichte 300–700. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("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+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0f172a;
  --bg-elev: #1e293b;
  --bg-elev-2: #273449;
  --border: #334155;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --accent: #14b8a6;
  --accent-hover: #0d9488;
  --accent-pressed: #0f766e;
  --accent-2: #60a5fa;   /* Sekundär-Akzent (Blau) – Kalender-Kontext & Navigations-Links */
  --brand: #b8ac99;
  --brand-muted: #8c8275;
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.12);
  --input-bg: #0b1220;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  --radius: 12px;
  --radius-sm: 8px;
  --tab-height: 64px;
}

* { box-sizing: border-box; }

/* Scrollleisten app-weit ausblenden (Inhalt bleibt scrollbar) */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Enable proper German hyphenation everywhere — requires lang="de" on <html> */
body * {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

html {
  color-scheme: dark;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  position: fixed;
  inset: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0);
  opacity: 0;
  /* CSS fallback: if JS fails to load, fade in automatically after 400ms */
  animation: body-fadein 0.15s ease 0.4s forwards;
}
/* iOS-Standalone (Klasse via JS, navigator.standalone): unteren Abstand zum Home-Indikator
   verkleinern, damit der Inhalt weiter nach unten reicht (wie Android). Nur Standalone. */
html.pwa-standalone body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) * 0.5); }
@keyframes body-fadein { to { opacity: 1; } }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
::-webkit-scrollbar-track { background: transparent; }

.main { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
/* Auf der Startseite darf das Logo bis zum Bildschirmrand (über den transparenten
   Header) reichen – daher hier kein Abschneiden nach oben. */
.on-home .main { overflow: visible; }
/* Sichtbare View füllt .main per Flex. Früher: height:100% – das löst WebKit/iOS in
   einem Flex-Item nicht zuverlässig auf → Leerraum unten in der iOS-PWA. */
.view { flex: 1; min-height: 0; }
.view.hidden { display: none !important; }

/* Views that need internal vertical scrolling */
#view-priotodo { overflow: hidden; }
#view-dayplan { overflow: hidden; display: flex; flex-direction: column; }

/* ========== Header ========== */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-elev);
  color: var(--text);
  padding: calc(env(safe-area-inset-top, 0) + 14px) 18px 14px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.on-home .app-header {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}

.header-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 10px;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.header-center {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 8px;
}
.header-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/* .header-app-name {
  color: var(--brand);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
} */

.header-app-name {
  color: var(--brand);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.app-header h1 {
  font-family: "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin: 0;
  letter-spacing: 0.4px;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 13px;
  white-space: nowrap;
}
.app-header h1.hidden { display: none; }

.header-brand {
  color: var(--brand);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.home-app-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.78);
  letter-spacing: 0.2px;
  text-align: center;
  user-select: none;
  line-height: 1.2;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.icon-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--bg-elev-2); color: var(--text); }
.icon-btn:active { background: var(--border); }
.icon-btn.hidden { display: none; }

/* Month picker */
.month-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.month-nav {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.month-nav:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.month-nav:active { background: var(--accent-pressed); }

.month-label {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  min-width: 180px;
  cursor: pointer;
  letter-spacing: 0.3px;
  text-align: center;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.month-label:hover { background: var(--bg-elev-2); border-color: var(--accent); }
.month-label:active { background: var(--bg-elev-2); }

/* ========== Dialogs ========== */
.dialog.hidden { display: none; }
.dialog {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  animation: fade-in 0.15s ease;
}
.dialog-panel {
  position: relative;
  background: var(--bg-elev);
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  border-radius: 14px 14px 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.6);
  animation: slide-up 0.2s ease;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.dialog-panel-small { max-width: 420px; }

@media (min-width: 600px) {
  .dialog { align-items: center; }
  .dialog-panel {
    border-radius: 14px;
    border-bottom: 1px solid var(--border);
    max-height: 88vh;
  }
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.dialog-header h2 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
  letter-spacing: 0.2px;
}
.dialog-header .icon-btn { color: var(--text-muted); }
.dialog-header .icon-btn:active { background: var(--bg-elev-2); }
.dialog-header-actions { display: flex; align-items: center; gap: 2px; }
#traffic-reminder-btn.active { color: var(--accent); }

.dialog-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dialog-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.dialog-footer .spacer { flex: 1; }

/* Eigene confirm()/prompt()-Dialoge (wgConfirm/wgPrompt) — zentriert, im App-Design */
.wg-ask-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500; /* Bestätigungen/Prompts immer ganz oben (über Seiten-Menü, Sheets, Onboarding …) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.65);
  animation: fade-in 0.15s ease;
}
.wg-ask {
  width: 100%;
  max-width: 360px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 20px 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  animation: wg-ask-pop 0.18s ease;
}
@keyframes wg-ask-pop {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to { opacity: 1; transform: none; }
}
.wg-ask-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--text); }
.wg-ask-msg { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.wg-ask-input { margin-bottom: 18px; }
.wg-ask-actions { display: flex; gap: 10px; justify-content: flex-end; }
.wg-ask-actions .btn { min-width: 100px; }

/* ========== Form elements ========== */
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  font-weight: 600;
}
.hint { margin: 0; font-size: 12px; color: var(--text-muted); }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="month"], input[type="search"], textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="password"]::placeholder, input[type="tel"]::placeholder, input[type="search"]::placeholder, textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.55;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="month"]:focus, input[type="search"]:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18);
}

/* Zahlen-, Zeit- und Datumsfelder: gleiche Glas-Optik wie Textfelder
   (Datum/Beginn/Ende sind readonly und öffnen den eigenen Glas-Picker). */
input[type="number"], input[type="time"], input[type="date"] {
  width: 66%;
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  font-family: inherit;
  accent-color: var(--accent);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="number"]:focus, input[type="time"]:focus, input[type="date"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; }

/* ========== Chips ========== */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chip:hover { background: var(--border); }
.chip.selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.chip:active { transform: scale(0.96); }

.chips-editable .chip { padding-right: 8px; }
.chips-editable .chip::after {
  content: "✕";
  margin-left: 8px;
  font-size: 10px;
  opacity: 0.45;
}

.add-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.add-row input { flex: 1; }

/* Sortable habit list */
.habit-sort-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.habit-sort-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  user-select: none;
  transition: background 0.15s, opacity 0.15s, box-shadow 0.15s;
}

.habit-sort-item.dragging {
  opacity: 0.35;
}

.habit-sort-item.drag-over {
  border-color: var(--accent);
  background: var(--bg-elev);
}

.habit-sort-handle {
  color: var(--text-muted);
  cursor: grab;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 3px 2px;
  touch-action: none;
  transition: color 0.15s;
}

.habit-sort-handle:active { cursor: grabbing; color: var(--text); }

@media (hover: hover) {
  .habit-sort-handle:hover { color: var(--text); }
}

.habit-sort-label {
  flex: 1;
  font-size: 13px;
  color: var(--text);
}

/* Home-Apps-Einstellungen: nach Kategorien gruppiert (umbenennen, ziehen, ein-/ausblenden) */
.ha-cat { margin-bottom: 6px; }
.ha-cat-head { display: flex; align-items: center; gap: 6px; margin: 16px 0 2px; }
.ha-cat:first-child .ha-cat-head { margin-top: 0; }
.ha-cat-name {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 4px 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ha-cat-name:focus { outline: none; background: var(--bg-elev-2); color: var(--text); }
.ha-cat-del {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text-muted);
  opacity: 0.5;
  cursor: pointer;
  border-radius: 6px;
}
.ha-cat-del:active { background: var(--bg-elev-2); opacity: 1; }

.ha-cat-apps { display: flex; flex-direction: column; min-height: 8px; }
.ha-drop-hint {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.6;
  padding: 10px 2px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  text-align: center;
}

.home-app-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
}
.home-app-toggle-row.app-hidden { opacity: 0.5; }
.home-app-toggle-row.dragging { opacity: 0.35; }

.ha-handle {
  flex-shrink: 0;
  width: 26px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  opacity: 0.6;
  cursor: grab;
  touch-action: none;
}
.ha-handle:active { cursor: grabbing; }

.ha-drag-clone {
  position: fixed;
  transform: translate(-14px, -50%);
  z-index: 1000;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}
body.ha-dragging { -webkit-user-select: none; user-select: none; }

.ha-add-cat {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px;
  margin-top: 12px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--accent);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.ha-add-cat:active { background: var(--bg-elev-2); }

/* Home-App-Sortierliste: farbiges Mini-Icon je App */
.home-app-sort-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-app-sort-icon svg { width: 20px; height: 20px; }
.home-app-sort-icon[data-view="entries"] { color: #3b82f6; }
.home-app-sort-icon[data-view="table"]   { color: #8b5cf6; }
.home-app-sort-icon[data-view="diary"]   { color: #10b981; }
.home-app-sort-icon[data-view="timer"]   { color: #f59e0b; }
.home-app-sort-icon[data-view="counter"] { color: #f43f5e; }
.home-app-sort-icon[data-view="plan"]    { color: #14b8a6; }
.home-app-sort-icon[data-view="todo"]     { color: rgb(249,115,22); }
.home-app-sort-icon[data-view="priotodo"] { color: rgb(239,68,68); }
.home-app-sort-icon[data-view="dayplan"]  { color: rgb(59,130,246); }
.home-app-sort-icon[data-view="expenses"] { color: rgb(20,184,166); }
.home-app-sort-icon[data-view="board"]    { color: rgb(234,179,8); }
.home-app-sort-icon[data-view="cards"]    { color: rgb(139,92,246); }
.home-app-sort-icon[data-view="chores"]   { color: rgb(16,185,129); }
.home-app-sort-item.app-hidden .home-app-sort-icon,
.home-app-sort-item.app-hidden .habit-sort-label { opacity: 0.4; }

.home-empty-msg {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  padding: 30px 16px;
  margin: 0 auto;
  max-width: 320px;
}

.habit-sort-delete {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}

.habit-sort-delete:hover { color: var(--danger); background: var(--danger-bg); }

.button-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ========== Buttons ========== */
.btn {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--bg-elev-2);
  color: var(--text);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:active { background: var(--accent-pressed); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg-elev-2); border-color: var(--text-muted); }
.btn-ghost:active { background: var(--border); }
.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: rgba(248, 113, 113, 0.5);
}
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }
.btn-danger:active { background: rgba(248, 113, 113, 0.2); }
.btn.hidden { display: none; }

/* ========== Toast ========== */
.toast {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0) + var(--tab-height) + 14px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(92vw, 440px);
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 11px 18px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  z-index: 200;
  animation: fade-in 0.18s ease;
  box-shadow: var(--shadow);
  white-space: normal;
  overflow-wrap: anywhere;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.toast.hidden { display: none; }
.toast.toast-undo { display: flex; align-items: center; gap: 14px; text-align: left; padding: 9px 9px 9px 18px; }
.toast.toast-undo .toast-msg { flex: 1; min-width: 0; }
.toast-undo-btn { flex: 0 0 auto; border: none; background: var(--accent); color: #04201c; font-size: 13px; font-weight: 800; border-radius: 999px; padding: 7px 15px; cursor: pointer; }
.toast-undo-btn:active { transform: scale(.95); }

/* ========== Animations ========== */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ========== Bottom Tab Bar (hidden – replaced by Home Screen) ========== */
.tab-bar {
  display: none;
}

.tab-indicator {
  position: absolute;
  top: 6px;
  left: 10px;
  height: calc(var(--tab-height) - 12px);
  background: rgba(248, 250, 252, 0.93);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  pointer-events: none;
  z-index: 0;
  transition:
    left 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  border-radius: 14px;
  position: relative;
  z-index: 1;
  transition: color 0.25s;
  font-family: inherit;
}
.tab-btn[aria-pressed="true"] {
  color: #0f172a;
  font-weight: 600;
}
.tab-btn .tab-icon {
  width: 22px;
  height: 22px;
  transition: transform 0.15s;
  display: block;
}
.tab-btn[aria-pressed="true"] .tab-icon { transform: scale(1.1); }
.tab-label { letter-spacing: 0.3px; line-height: 1; }

/* ========== Todo Lists ========== */

#view-todo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

#todo-list-view {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px 100px;
  position: relative;
}

#todo-list-view.hidden { display: none; }

#todo-detail-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#todo-detail-view.hidden { display: none; }

.todo-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
}

.todo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  padding: 64px 24px;
}
.todo-empty svg { opacity: 0.3; }

.todo-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.14s;
  padding: 14px 16px;
  font: inherit;
  font-family: inherit;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
@media (hover: hover) {
  .todo-card:hover {
    background: var(--bg-elev-2);
    border-color: rgba(234, 88, 12, 0.4);
  }
}
.todo-card:active { transform: scale(0.97); }
.todo-card.pressing {
  outline: 1.5px solid rgba(234, 88, 12, 0.4);
  outline-offset: 2px;
  transform: none;
}
.todo-card.dragging {
  opacity: 0.2;
  transform: none;
}

.todo-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.todo-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.todo-card-name-done {
  text-decoration: line-through;
  opacity: 0.5;
}

.todo-card-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.todo-progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 2px;
}
.todo-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ea580c, #f97316);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.todo-card-chevron {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0.4;
}

/* FAB */
.todo-fab {
  position: fixed;
  bottom: calc(var(--tab-height) + 18px + env(safe-area-inset-bottom, 0px));
  right: 18px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(59, 130, 246, 0.5), inset 0 1px 1px rgba(255,255,255,0.2);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
  z-index: 5;
}
.todo-fab:active { transform: scale(0.9); }
@media (hover: hover) {
  .todo-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 28px rgba(59, 130, 246, 0.62);
  }
}

/* Detail topbar */
.todo-detail-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.todo-detail-title-text {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.todo-delete-btn { color: var(--text-muted); }
@media (hover: hover) {
  .todo-delete-btn:hover { color: #ef4444; }
}

/* Items list */
.todo-items-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
}

.todo-items-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  font-style: italic;
  opacity: 0.7;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.todo-item:last-child { border-bottom: none; }
@media (hover: hover) {
  .todo-item:hover { background: rgba(255,255,255,0.03); }
}
.todo-item.pressing {
  outline: 1.5px solid rgba(234, 88, 12, 0.4);
  outline-offset: -2px;
  border-radius: 6px;
}
.todo-item.dragging {
  opacity: 0.2;
}

.todo-item-check {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.todo-item-check:active { transform: scale(0.85); }
.todo-item-checked .todo-item-check { color: #22c55e; }

.todo-item-text {
  flex: 1;
  font-size: 15px;
  color: var(--text);
  line-height: 1.4;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Mengen-Badge („2×") vor dem Artikeltext */
.todo-qty { flex: 0 0 auto; min-width: 26px; text-align: center; font-size: 12.5px; font-weight: 800; color: var(--accent); background: var(--bg-elev-2); border-radius: 8px; padding: 2px 6px; font-variant-numeric: tabular-nums; }
.todo-item-checked .todo-qty { color: var(--text-muted); }
/* Stammartikel-Chips (zuletzt genutzte Artikel zum Schnell-Wiederhinzufügen) */
.todo-recents { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 16px 8px; margin: 0; }
.todo-recents-label { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-right: 2px; }
.todo-recent-chip { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-muted); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.todo-recent-chip:active { transform: scale(.96); }
.todo-item-checked .todo-item-text {
  text-decoration: line-through;
  color: var(--text-muted);
  opacity: 0.6;
}

.todo-item-edit {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0.4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.todo-item-edit:hover { opacity: 1; color: #ea580c; }

.todo-item-del {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0.4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.todo-item-del:hover { opacity: 1; color: #ef4444; }

/* Zuweisungs-Button je Eintrag (geteilte Listen): Avatar wenn zugewiesen, sonst dezentes Icon */
.todo-item-assign { flex-shrink: 0; background: transparent; border: none; padding: 2px; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.todo-item-assign:not(.assigned) { opacity: 0.45; }
.todo-item-assign:not(.assigned):hover { opacity: 1; color: var(--accent); }
.todo-item-assign .attrib { margin-left: 0; }
.todo-item-assign:active { transform: scale(0.9); }

/* Add item row */
.todo-add-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.todo-add-item-row input {
  flex: 1;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
  font-family: inherit;
}
.todo-add-item-row input:focus {
  border-color: #ea580c;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15);
}
.todo-add-item-row input::placeholder { color: var(--text-muted); opacity: 0.6; }

.todo-add-item-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.42);
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.todo-add-item-btn:active { transform: scale(0.9); }
@media (hover: hover) {
  .todo-add-item-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 5px 16px rgba(234, 88, 12, 0.55);
  }
}

/* ========== Home Screen ========== */

.home-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  overflow: visible;
  padding: 6px 0 12px;
  position: relative;
  background:
    radial-gradient(ellipse 60% 35% at 18% 22%, rgba(59,130,246,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 60% 35% at 82% 78%, rgba(99,102,241,0.09) 0%, transparent 70%);
}

.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 0 0 auto;
}
/* Das Logo wird per JS (centerHomeLogo) vertikal exakt zwischen Bildschirmoberkante
   (inkl. Header) und der ersten Karte zentriert – verschoben über transform.
   Keine Transition → kein „Hüpfen" beim Wechsel auf den Home-Screen. */
.home-logo { will-change: transform; }

/* Früherer Flex-Ausgleich entfällt: Inhalt scrollt einfach unter dem Logo. */
.home-foot-spacer { display: none; }

/* Logo: mix-blend-mode:screen makes pure black pixels invisible,
   the beige/gold artwork remains visible against the dark background */
.home-logo {
  width: min(49vw, 220px);
  height: auto;
  display: block;
  mix-blend-mode: normal;
  filter: brightness(1.08) contrast(1.05);
  user-select: none;
  -webkit-user-drag: none;
}

/* Dezenter „mehr unten"-Hinweis (nur sichtbar, wenn scrollbar & nicht am Ende) */
.home-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: calc(54px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  color: var(--text-muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 4;
}
.home-scroll-hint.show {
  opacity: 0.5;
  animation: home-hint-bob 1.7s ease-in-out infinite;
}
@keyframes home-hint-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 5px); }
}

.home-byline {
  flex-shrink: 0;
  margin: 18px auto 12px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--brand);
  opacity: 0.5;
  white-space: nowrap;
}

/* Liste großer App-Karten (Glas-Pillen) */
.home-shelves {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 520px;
  padding: 2px 16px 6px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none;
  justify-content: center;
  justify-content: safe start;
  transform: translateY(-10px);
}
.home-shelves::-webkit-scrollbar { display: none; }

.home-app-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 100%;
}

/* Große, anklickbare Glas-Karte je App */
.home-app-card {
  --app: 148, 163, 184;
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  text-align: left;
  padding: 16px 16px 16px 22px;
  border-radius: 22px;
  cursor: pointer;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(150deg, rgba(var(--app), 0.13) 0%, rgba(255, 255, 255, 0.02) 60%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s, border-color 0.18s;
}
/* Farbige Akzentkante links */
.home-app-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(to bottom, rgb(var(--app)), rgba(var(--app), 0.4));
  box-shadow: 0 0 14px rgba(var(--app), 0.5);
}
.home-app-card:active {
  transform: scale(0.975);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
@media (hover: hover) {
  .home-app-card:hover { border-color: rgba(var(--app), 0.45); }
}

/* Icon-Kachel in der App-Farbe */
.home-app-tile {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, rgba(var(--app), 0.95) 0%, rgba(var(--app), 0.68) 100%);
  box-shadow: 0 6px 16px rgba(var(--app), 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.35);
}
.home-app-glyph { display: flex; }
.home-app-tile svg {
  width: 27px;
  height: 27px;
  stroke: #fff;
  fill: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.home-app-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.home-app-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-app-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-app-chev {
  flex: 0 0 auto;
  color: var(--text-muted);
  opacity: 0.55;
  display: flex;
}

/* Heller Modus: weiße Glaskarten mit Hairline + weichem Schatten */
body.theme-light .home-app-card {
  background: linear-gradient(150deg, rgba(var(--app), 0.10) 0%, rgba(255, 255, 255, 0.72) 60%);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 26px rgba(31, 31, 28, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Header: home button layout */
.header-row {
  gap: 0;
}

/* Month picker hidden state */
.month-picker.hidden {
  display: none !important;
}

/* ========== Home: General Settings ========== */
.home-general-settings {
  width: 100%;
  max-width: 400px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.home-gs-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.home-gs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.home-gs-label {
  font-size: 14px;
  color: var(--text);
}

.home-gs-actions {
  display: flex;
  gap: 8px;
}

/* ========== App: Settings bar ========== */
.app-settings-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 14px 0;
}

/* ====================== Info-Banner-System ====================== */
/* Kleines, dezentes Info-Icon neben dem jeweiligen Titel */
.info-icon-btn {
  flex-shrink: 0;
  margin-left: 6px;
  width: 18px;
  height: 18px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  opacity: 0.45;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: 50%;
  transition: opacity 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.info-icon-btn:hover { opacity: 0.9; color: var(--text); }
.info-icon-btn:active { opacity: 1; }
/* in Dialog-Kopfzeilen direkt hinter den Titel gruppieren */
.dialog-header > .info-icon-btn { margin-right: auto; }

/* Zentriertes Info-Banner mit abdunkelndem Hintergrund */
.info-banner {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.info-banner.show { opacity: 1; }
.info-banner.hidden { display: none; }

.info-banner-card {
  width: 100%;
  max-width: 440px;
  max-height: 82vh;
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  padding: 16px 18px 18px;
  transform: scale(0.94);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.info-banner.show .info-banner-card { transform: scale(1); }

.info-banner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.info-banner-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
}
.info-banner-title::before {
  content: "";
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  background: var(--accent);
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
  mask: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
}
.info-banner-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.info-banner-close:hover { color: var(--text); }

.info-banner-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}
.info-banner-body strong { color: var(--text); font-weight: 600; }
.info-banner-body ul { margin: 7px 0 0; padding-left: 18px; }
.info-banner-body li { margin: 4px 0; }

/* ========== Prio-To-Dos ========== */
.prio-scroll {
  height: 100%;
  overflow-y: auto;
  padding: 14px 16px calc(var(--tab-height) + 92px);
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prio-segment {
  display: flex;
  gap: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 4px;
}
.prio-seg-btn {
  flex: 1;
  padding: 9px 8px;
  border: none;
  border-radius: 18px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.prio-seg-btn.active { background: var(--accent); color: #fff; }

.prio-hint { font-size: 12px; color: var(--text-muted); padding: 0 4px; }
.prio-empty { padding: 52px 18px; text-align: center; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
/* Termine-Toolbar (Suche + „Nur meine" + Sortierung) und Erledigt-Archiv */
.prio-scroll .todo-search-row { margin: 0; }   /* Abstand kommt vom .prio-scroll-Gap – keine Doppel-Margin */
.prio-filterrow { display: flex; align-items: center; gap: 8px; }
.prio-filterrow .prio-segment { flex: 1; }
.prio-mine-chip { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-muted); border-radius: 999px; padding: 10px 14px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.prio-mine-chip svg { width: 15px; height: 15px; flex: 0 0 auto; }
.prio-mine-chip:active { transform: scale(.97); }
.prio-mine-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Abschnitts-Köpfe „X offen" / „Erledigt · X" einheitlich fett */
.prio-open-head { font-weight: 800; font-size: 14px; color: var(--text); padding: 2px 4px 0; }
.prio-done-toggle { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-weight: 800; font-size: 14px; padding: 6px 4px 4px; margin-top: 22px; cursor: pointer; }
.prio-done-list { opacity: 0.8; }
.prio-clear-done { width: 100%; margin-top: 4px; }
.prio-alldone { text-align: center; color: var(--text-muted); font-size: 14px; padding: 16px 0; }

.prio-list { display: flex; flex-direction: column; gap: 8px; }
.prio-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px 11px 11px;
}
.prio-card.prio-urgent { border-left-color: #ef4444; }
.prio-card.prio-high   { border-left-color: #f59e0b; }
.prio-card.prio-medium { border-left-color: #eab308; }
.prio-card.prio-low    { border-left-color: #22c55e; }
.prio-card.done { opacity: 0.55; }

.prio-check {
  flex-shrink: 0;
  width: 24px; height: 24px;
  margin-top: 1px;
  border: 1.5px solid var(--text-muted);
  border-radius: 50%;
  background: transparent;
  color: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.prio-check.checked { background: var(--accent); border-color: var(--accent); color: #fff; }

.prio-body { flex: 1; min-width: 0; cursor: pointer; display: flex; flex-direction: column; gap: 7px; }
.prio-title { font-size: 15px; color: var(--text); line-height: 1.35; }
.prio-card.done .prio-title { text-decoration: line-through; }

.prio-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.prio-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}
.prio-level-badge { background: transparent; }
.prio-deadline { color: var(--text-muted); }
.prio-deadline.soon { color: #f59e0b; border-color: rgba(245, 158, 11, 0.45); }
.prio-deadline.overdue { color: #f87171; border-color: rgba(248, 113, 113, 0.5); }

.prio-note { font-size: 13px; color: var(--text-muted); line-height: 1.45; }


/* FAB */
#prio-add-btn {
  position: fixed;
  bottom: calc(var(--tab-height) + 18px + env(safe-area-inset-bottom, 0px));
  right: 18px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(59, 130, 246, 0.52), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  z-index: 5;
}
#prio-add-btn:active { transform: scale(0.9); }
/* Wiederverwendbarer FAB (gleicher Look wie der Prio-Button) — z. B. „+ Ausgabe". */
.fab {
  position: fixed;
  bottom: calc(var(--tab-height) + 18px + env(safe-area-inset-bottom, 0px));
  right: 18px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(59, 130, 246, 0.52), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  z-index: 5;
}
.fab:active { transform: scale(0.9); }

/* Dialog: Auswahl-Chips */
.prio-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.prio-choice {
  padding: 8px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.prio-choice.sel { border-color: var(--c, var(--accent)); color: var(--text); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--c, var(--accent)); }

.prio-deadline-row { display: flex; gap: 10px; align-items: center; }
.prio-deadline-row input[type="date"] { flex: 1; }
.prio-remind-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prio-remind-fields { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.prio-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prio-set-row .field-label { margin: 0; }
.prio-set-row input { width: 110px; }

/* ========== Tagesplaner ========== */
.dp-daynav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 8px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.dp-nav-arrow {
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
}
.dp-nav-arrow:active { background: var(--bg-elev-2); }
.dp-day-label {
  flex: 1;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 10px; cursor: pointer; text-align: center;
}
.dp-day-label:active { background: var(--bg-elev-2); }

.dp-inbox {
  padding: 4px 16px 10px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  border-bottom: 1px solid var(--border);
}
.dp-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.dp-inbox-title { font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.dp-import-btn {
  padding: 6px 12px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  background: transparent;
  color: var(--text);
  font: inherit; font-size: 13px; cursor: pointer;
}
.dp-import-btn:active { background: var(--bg-elev-2); }

.dp-add-row { display: flex; gap: 8px; margin-bottom: 8px; }
.dp-add-row input { flex: 1; }
.dp-add-btn {
  width: 42px; flex-shrink: 0;
  border: none; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.dp-add-btn:active { filter: brightness(0.92); }

.dp-chips { display: flex; flex-wrap: wrap; gap: 7px; max-height: 108px; overflow-y: auto; }
.dp-chip {
  padding: 7px 13px;
  border: 1.5px solid var(--accent);
  border-radius: 18px;
  background: rgba(59, 130, 246, 0.12);
  color: var(--text);
  font: inherit; font-size: 13px; cursor: pointer;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-chip:active { transform: scale(0.96); }
.dp-chip.done { opacity: 0.5; text-decoration: line-through; border-color: var(--border); background: transparent; }
.dp-inbox-empty { font-size: 13px; color: var(--text-muted); font-style: italic; }
.dp-inbox-hint { font-size: 11px; color: var(--text-muted); margin-top: 8px; }

.dp-cal-scroll { flex: 1; overflow-y: auto; }
.dp-cal {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.dp-hour { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); }
.dp-hour-label {
  position: absolute; top: -7px; left: 6px;
  font-size: 10px; color: var(--text-muted);
  background: var(--bg);
  padding: 0 2px;
  font-variant-numeric: tabular-nums;
}
.dp-now { position: absolute; left: 40px; right: 0; height: 2px; background: #ef4444; z-index: 3; }
.dp-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }

.dp-block {
  position: absolute;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--c) 26%, var(--bg-elev));
  border: 1px solid var(--c);
  border-left: 3px solid var(--c);
  border-radius: 7px;
  padding: 3px 7px;
  overflow: hidden;
  cursor: pointer;
  z-index: 2;
  display: flex; flex-direction: column; gap: 1px;
}
.dp-block:active { transform: scale(0.99); }
.dp-block-time { font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
.dp-block-title { font-size: 13px; color: var(--text); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
/* Normale (hohe) Blöcke: Zeit oben, Titel darunter */
.dp-block:not(.compact) .dp-block-time { order: -1; }
/* Kurze Blöcke: eine Zeile, Titel hat Vorrang und wird nicht abgeschnitten */
.dp-block.compact { flex-direction: row; align-items: baseline; gap: 6px; padding: 2px 7px; }
.dp-block.compact .dp-block-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.dp-block.compact .dp-block-time { flex: 0 0 auto; }
.dp-block.done { opacity: 0.55; }
.dp-block.done .dp-block-title { text-decoration: line-through; }
/* Geteilte Aufgaben: kleiner Hinweis-Icon vor dem Titel */
.dp-block-shared-ic { vertical-align: -1px; opacity: 0.85; flex: 0 0 auto; }

/* --- Umschalt-Leiste Tag/Woche/Monat + WG-Tag --- */
.dp-modebar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.dp-modeseg { display: inline-flex; background: var(--bg-elev-2); border-radius: 10px; padding: 2px; gap: 2px; }
.dp-modeseg-btn { border: none; background: transparent; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 8px; cursor: pointer; }
.dp-modeseg-btn.active { background: var(--accent); color: #04201c; }
.dp-team-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 10px; cursor: pointer; }
.dp-team-btn:active { transform: scale(0.97); }
.dp-mode-body { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* --- Wochenansicht: 7 Spalten + gemeinsame Zeitachse --- */
.dpw-headrow { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.dpw-axis-corner { width: 30px; flex: 0 0 30px; }
.dpw-dayhead { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 0; background: transparent; border: none; border-left: 1px solid var(--border); color: var(--text-muted); cursor: pointer; }
.dpw-dh-wd { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.dpw-dh-day { font-size: 14px; font-weight: 700; color: var(--text); }
.dpw-dayhead.today .dpw-dh-wd, .dpw-dayhead.today .dpw-dh-day { color: var(--accent-2); }
.dpw-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.dpw-grid { display: flex; position: relative; }
.dpw-axis { width: 30px; flex: 0 0 30px; position: relative; }
.dpw-hour { position: absolute; left: 0; right: 0; }
.dpw-hour span { position: absolute; top: -6px; right: 3px; font-size: 9px; color: var(--text-muted); font-variant-numeric: tabular-nums; background: var(--bg); padding: 0 1px; }
.dpw-cols { display: flex; flex: 1; min-width: 0; }
.dpw-col { flex: 1 1 0; min-width: 0; position: relative; cursor: pointer; border-left: 1px solid var(--border); background: repeating-linear-gradient(to bottom, transparent 0, transparent 29px, var(--border) 29px, var(--border) 30px); }
/* Drop-Indikator in einer Wochenspalte (volle Spaltenbreite statt Tages-Achsen-Offset) */
.dpw-drop-indicator { left: 0; right: 0; }
.dpw-drop-indicator .dp-drop-time { font-size: 9px; padding: 0 3px; }
.dpw-now { position: absolute; left: 0; right: 0; height: 2px; background: #ef4444; z-index: 4; }
.dpw-block { position: absolute; box-sizing: border-box; background: color-mix(in srgb, var(--c) 30%, var(--bg-elev)); border: 1px solid var(--c); border-left: 3px solid var(--c); border-radius: 4px; padding: 1px 3px; overflow: hidden; cursor: pointer; z-index: 2; }
.dpw-block:active { transform: scale(0.98); }
.dpw-block.done { opacity: 0.5; }
.dpw-block.done .dpw-block-t { text-decoration: line-through; }
.dpw-block.shared { border-left-width: 4px; border-left-style: double; }
.dpw-block-t { font-size: 9px; line-height: 1.15; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; }

/* --- Monatsansicht: Kalenderraster --- */
.dpm-scroll { flex: 1; overflow-y: auto; min-height: 0; padding: 10px 10px 24px; }
.dpm-grid { max-width: 560px; margin: 0 auto; }
.dpm-wdrow, .dpm-cells { display: grid; grid-template-columns: repeat(7, 1fr); }
.dpm-wd { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-muted); padding: 4px 0; }
.dpm-cells { gap: 4px; }
.dpm-cell { aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 5px 2px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.dpm-cell.out { opacity: 0.4; }
.dpm-cell.has { background: var(--bg-elev-2); }
.dpm-cell.today { border-color: var(--accent-2); }
.dpm-num { font-size: 13px; font-weight: 600; color: var(--text); }
.dpm-cell.today .dpm-num { color: var(--accent-2); }
.dpm-dots { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; align-items: center; min-height: 7px; }
.dpm-dot { width: 5px; height: 5px; border-radius: 50%; }
.dpm-more { font-size: 8px; color: var(--text-muted); line-height: 1; }
.dpm-hint { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 12px; }

/* --- WG-Tagesübersicht (lesendes Overlay) --- */
.dpteam-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,0.55); display: flex; align-items: flex-end; justify-content: center; }
.dpteam-sheet { background: var(--bg-elev); width: 100%; max-width: 520px; max-height: 82vh; border-radius: 18px 18px 0 0; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.dpteam-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.dpteam-title { font-size: 16px; font-weight: 700; }
.dpt-hint { font-size: 12px; color: var(--text-muted); padding: 8px 16px 0; }
.dpteam-list { overflow-y: auto; padding: 10px 14px 20px; }
.dpt-member { padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.dpt-member:last-child { border-bottom: none; }
.dpt-mhead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dpt-av { color: #fff; flex: 0 0 auto; }
.dpt-mname { font-weight: 700; font-size: 14px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpt-mcount { font-size: 12px; color: var(--text-muted); flex: 0 0 auto; }
.dpt-blocks { display: flex; flex-direction: column; gap: 4px; padding-left: 2px; }
.dpt-block { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 8px; background: var(--bg-elev-2); border-left: 3px solid var(--c); }
.dpt-time { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-muted); flex: 0 0 auto; }
.dpt-title { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpt-title.done { text-decoration: line-through; opacity: 0.6; }
.dpt-none { font-size: 13px; color: var(--text-muted); font-style: italic; padding: 2px 4px; }
/* WG-Kalender: Umschaltleiste (Tag/Woche/Monat) + Navigation + Wochen-/Monatsansicht */
.dpteam-seg { display: flex; justify-content: center; padding: 12px 16px 0; flex: 0 0 auto; }
.dpteam-nav { padding: 6px 16px 4px; flex: 0 0 auto; }
.dpteam-list-month { padding-top: 6px; }
.dptw-daysec { padding: 8px 0; border-bottom: 1px solid var(--border); }
.dptw-daysec:last-child { border-bottom: none; }
.dptw-day { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-weight: 700; font-size: 13.5px; padding: 2px 0 7px; cursor: pointer; }
.dptw-daysec.today .dptw-day { color: var(--accent-2); }
.dptw-blocks { display: flex; flex-direction: column; gap: 5px; }
.dptw-block { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; background: var(--bg-elev-2); border-left: 3px solid var(--c, #3b82f6); }
.dptw-av { width: 20px; height: 20px; font-size: 9px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 800; }
.dptw-time { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto; }
.dptw-title { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dptw-title.done { text-decoration: line-through; color: var(--text-muted); }
/* Teilnehmer-Reihe je Eintrag (Ersteller vorn, dezent markiert) */
.dpt-atts { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; flex: 0 0 auto; }
.dpt-block .dpt-atts { margin-left: auto; }
.dpt-block .dpt-title { flex: 1 1 auto; min-width: 0; }
.dptw-block .dptw-title { flex: 1 1 auto; min-width: 0; }
/* Ersteller-Markierung: feiner, „schwebender" Ring (1px Linie mit 1px Abstand) statt dickem Rahmen */
.dp-att-mini.creator { box-shadow: 0 0 0 1px var(--bg-elev-2), 0 0 0 2px var(--accent-2); }
/* Einträge sind anklickbar → springen zum Termin im Kalender */
.dpt-block, .dptw-block { cursor: pointer; transition: transform .12s ease, filter .15s ease; }
.dpt-block:active, .dptw-block:active { transform: scale(0.99); filter: brightness(0.97); }
@media (hover: hover) { .dpt-block:hover, .dptw-block:hover { filter: brightness(1.04); } }

/* --- Zuweisungs-Picker (Mitglied zuweisen) --- */
.assignee-overlay { position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,0.55); display: flex; align-items: flex-end; justify-content: center; }
.assignee-sheet { background: var(--bg-elev); width: 100%; max-width: 460px; max-height: 70vh; border-radius: 18px 18px 0 0; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.assignee-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.assignee-title { font-size: 16px; font-weight: 700; }
.assignee-list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.assignee-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); font: inherit; font-size: 15px; font-weight: 600; padding: 11px 12px; border-radius: 12px; cursor: pointer; }
.assignee-row:active { background: var(--bg-elev-2); }
.assignee-row.sel { background: var(--bg-elev-2); box-shadow: inset 0 0 0 1.5px var(--accent); }
.assignee-row .attrib { margin-left: 0; }
.assignee-none-ic { width: 28px; height: 28px; border-radius: 999px; background: var(--bg-elev-2); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }

/* Prio-Dialog: „Zuweisen an"-Trigger */
.assign-trigger { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px 5px 6px; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; max-width: 180px; }
.assign-trigger .attrib { margin-left: 0; }
.assign-trigger-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assign-trigger-none { color: var(--text-muted); padding-left: 6px; }
.assign-trigger:active { transform: scale(0.97); }
.prio-badge.prio-assignee svg { vertical-align: -1px; }

/* Dialog */
.dp-time-row { display: flex; gap: 12px; }
.dp-time-row .field { flex: 1; }
.dp-duration-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.dp-dur {
  padding: 7px 12px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  background: transparent;
  color: var(--text-muted);
  font: inherit; font-size: 13px; cursor: pointer;
}
.dp-dur:active { background: var(--bg-elev-2); color: var(--text); }
/* Freie Minuten-Eingabe im Chip-Stil (neben „Dauer schnell setzen") */
.dp-dur-custom { display: inline-flex; align-items: center; gap: 5px; padding: 0 12px 0 13px; border: 1.5px solid var(--border); border-radius: 18px; background: transparent; }
.dp-dur-custom:focus-within { border-color: var(--accent); }
.dp-dur-custom input { width: 32px; border: none; background: transparent; color: var(--text); font: inherit; font-size: 13px; padding: 7px 0; text-align: right; outline: none; -moz-appearance: textfield; }
.dp-dur-custom input::-webkit-outer-spin-button, .dp-dur-custom input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dp-dur-custom input::placeholder { color: var(--text-muted); }
.dp-dur-custom-unit { font-size: 13px; color: var(--text-muted); }
.dp-done-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dp-done-row .field-label { margin: 0; }
/* Ganztägig: Dialog-Schalter (ganztägige Einträge sind ganz normale 0:00–24:00-Blöcke im Kalender) */
.dp-allday-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dp-block-recur { font-size: 9px; opacity: .85; }
.dpw-block-recur { font-size: 8px; }
/* Teilnehmer & RSVP (geteilte Termine) */
.dp-attendees { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dp-att-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--text-muted); border-radius: 999px; padding: 4px 11px 4px 4px; font-size: 12px; font-weight: 600; cursor: pointer; opacity: .5; }
.dp-att-chip.on { opacity: 1; border-color: var(--accent); color: var(--text); }
.dp-att-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dp-att-dot.yes { background: #22c55e; }
.dp-att-dot.maybe { background: #f59e0b; }
.dp-att-dot.no { background: #ef4444; }
.dp-rsvp { display: flex; gap: 8px; margin-top: 6px; }
.dp-rsvp-btn { flex: 1; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted); border-radius: 10px; padding: 9px 8px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.dp-rsvp-btn[data-rsvp="yes"].on { background: #22c55e; border-color: #22c55e; color: #fff; }
.dp-rsvp-btn[data-rsvp="maybe"].on { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.dp-rsvp-btn[data-rsvp="no"].on { background: #ef4444; border-color: #ef4444; color: #fff; }
.dp-block-att { display: flex; gap: 2px; margin-top: 2px; flex-wrap: wrap; overflow: hidden; }
.dp-att-mini { width: 15px; height: 15px; border-radius: 50%; font-size: 8px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: #64748b; flex: 0 0 auto; }
.dp-att-mini.yes { background: #22c55e; }
.dp-att-mini.maybe { background: #f59e0b; }
.dp-att-mini.no { background: #ef4444; opacity: .65; }
.dp-att-mini.pending { background: #64748b; }
#dayplan-dialog .dialog-footer { flex-wrap: wrap; gap: 8px; }

/* Import-Dialog */
.dp-import-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.dp-import-section { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 8px; }
.dp-import-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.dp-import-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dp-import-title { font-size: 14px; color: var(--text); }
.dp-import-sub { font-size: 11px; color: var(--text-muted); }
.dp-import-add { flex-shrink: 0; }
.dp-import-add:disabled { opacity: 0.6; }
.dp-import-empty { font-size: 14px; color: var(--text-muted); font-style: italic; padding: 20px 4px; text-align: center; }

/* Tagesplaner: Drag & Drop */
.dp-chip { touch-action: none; }
.dp-chip.dragging { opacity: 0.4; }
body.dp-dragging { cursor: grabbing; }
body.dp-dragging * { user-select: none; }
.dp-drag-clone {
  position: fixed;
  transform: translate(-50%, -140%);
  z-index: 1000;
  pointer-events: none;
  padding: 7px 13px;
  border-radius: 18px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}
/* Mitlaufendes Uhrzeit-Badge beim Ziehen – oben rechts neben dem Finger (nicht verdeckt) */
.dp-drag-time {
  position: fixed;
  z-index: 1001;
  transform: translateY(-100%);
  pointer-events: none;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  font-variant-numeric: tabular-nums;
}
.dp-drop-indicator {
  position: absolute;
  left: 40px; right: 0;
  height: 0;
  border-top: 2px dashed var(--accent);
  z-index: 4;
  pointer-events: none;
}
.dp-drop-time {
  position: absolute;
  left: 0; top: -9px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 6px;
  padding: 1px 6px;
  font-variant-numeric: tabular-nums;
}
.dp-duration-info { margin: 0 0 14px; font-size: 14px; color: var(--text); }

/* ============================================================
   HELLES THEME (Soft Glass Light) – global via body.theme-light
   ============================================================ */

/* Design-Umschalter im Einstellungs-Dialog (Segment) */
.theme-seg { display: flex; gap: 6px; }
.theme-seg-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.theme-seg-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Zentrale Token-Umstellung – re-themt alle token-basierten Flächen */
body.theme-light {
  --bg: #F1EFE8;
  --bg-elev: #FBFAF6;
  --bg-elev-2: #ECEAE1;
  --border: rgba(31, 31, 28, 0.10);
  --text: #1E1F1C;
  --text-muted: #8C8A82;
  --brand: #6E6453;
  --brand-muted: #9A9486;
  --input-bg: #FFFFFF;
  --shadow: 0 14px 36px rgba(31, 31, 28, 0.12);
}
body.theme-light { background: var(--bg); color: var(--text); color-scheme: light; }

body.theme-light .home-logo { mix-blend-mode: normal; filter: none; }

body.theme-light:not(.on-home) .app-header {
  background: rgba(244, 242, 236, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(31, 31, 28, 0.06);
  box-shadow: none;
  color: #1E1F1C;
}
body.theme-light .header-app-name { color: #1E1F1C; }
body.theme-light .app-header .icon-btn { color: #5B5A53; }
body.theme-light .month-picker,
body.theme-light #month-label { color: #1E1F1C; }
body.theme-light .month-nav { color: #5B5A53; }

body.theme-light #view-entries {
  background:
    radial-gradient(60% 30% at 16% 0%, rgba(170, 162, 235, 0.22), transparent 70%),
    radial-gradient(64% 32% at 86% 100%, rgba(245, 200, 205, 0.22), transparent 72%),
    #F4F2EC;
  color: #1E1F1C;
}

body.theme-light .day-card {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 10px 30px rgba(31, 31, 28, 0.08);
}
body.theme-light .day-card.today {
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 10px 30px rgba(31, 31, 28, 0.08), 0 0 0 1px rgba(59, 130, 246, 0.25);
}
body.theme-light .day-number { color: #1E1F1C; }
body.theme-light .day-card.today .day-number { color: #2563EB; }
body.theme-light .day-name { color: #9A988F; }
body.theme-light .day-add {
  background: rgba(59, 130, 246, 0.12);
  color: #2563EB;
  border: 1px solid rgba(59, 130, 246, 0.30);
}
body.theme-light .day-add:hover { background: rgba(59, 130, 246, 0.20); }

body.theme-light .entry {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(31, 31, 28, 0.05);
  border-left: 3px solid transparent;
}
body.theme-light .entry:hover,
body.theme-light .entry:active { background: rgba(255, 255, 255, 0.82); }
body.theme-light .entry.entry-mood-green  { border-left-color: #22A55E; }
body.theme-light .entry.entry-mood-orange { border-left-color: #E08A2B; }
body.theme-light .entry.entry-mood-red    { border-left-color: #E0564F; }
body.theme-light .entry-feeling { color: #2C2D28; }
body.theme-light .entry-activity,
body.theme-light .entry-notes,
body.theme-light .entry-empty,
body.theme-light .no-entries { color: #8C8A82; }
body.theme-light .entry-notes { border-top-color: rgba(31, 31, 28, 0.08); }

/* ============================================================
   Soft Glass – App-Feinschliff (beide Themes, additive Overrides)
   ============================================================ */

/* Prio-To-Dos */
#view-priotodo {
  background:
    radial-gradient(58% 24% at 16% 0%, rgba(99, 102, 241, 0.10), transparent 70%),
    radial-gradient(58% 26% at 86% 100%, rgba(59, 130, 246, 0.08), transparent 72%);
}
.prio-card {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.theme-light .prio-card {
  background: rgba(255, 255, 255, 0.60);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 22px rgba(31, 31, 28, 0.07);
}
.prio-segment { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.08); }
body.theme-light .prio-segment { background: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.8); }

/* To-Do Listen */
#view-todo {
  background:
    radial-gradient(58% 24% at 16% 0%, rgba(99, 102, 241, 0.10), transparent 70%),
    radial-gradient(58% 26% at 86% 100%, rgba(59, 130, 246, 0.08), transparent 72%);
}
.todo-card {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.theme-light .todo-card {
  background: rgba(255, 255, 255, 0.60);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 22px rgba(31, 31, 28, 0.07);
}

/* Tagesplaner */
#view-dayplan {
  background:
    radial-gradient(58% 22% at 16% 0%, rgba(99, 102, 241, 0.10), transparent 70%),
    radial-gradient(58% 24% at 86% 100%, rgba(59, 130, 246, 0.08), transparent 72%);
}

/* ============================================================
   Eigener Date-Picker (Glas) – ersetzt das native Popup
   ============================================================ */
.datepicker-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  animation: fade-in 0.15s ease;
}
.datepicker {
  width: 100%;
  max-width: 340px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 16px 16px 12px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body.theme-light .datepicker { background: rgba(255, 255, 255, 0.92); }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dp-title { font-size: 15px; font-weight: 700; color: var(--text); }
.dp-nav {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elev-2);
  color: var(--text);
  cursor: pointer;
}
.dp-nav:active { transform: scale(0.92); }
.dp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 6px; }
.dp-weekdays span { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; color: var(--text-muted); text-transform: uppercase; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dp-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.12s;
}
.dp-cell.dp-empty { cursor: default; }
.dp-cell:not(.dp-empty):not(.selected):active { background: var(--bg-elev-2); }
@media (hover: hover) { .dp-cell:not(.dp-empty):not(.selected):hover { background: var(--bg-elev-2); } }
.dp-cell.today { box-shadow: inset 0 0 0 1.5px var(--accent-2); color: var(--accent-2); font-weight: 700; }
.dp-cell.selected { background: var(--accent); color: #fff; font-weight: 700; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 12px; }
.dp-foot-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: 10px;
}
.dp-foot-btn:active { background: var(--bg-elev-2); }

/* ============================================================
   Eigener Farb-Picker (Glas) – HSV-Fläche + Hue + Presets
   (Basis-CSS; der helle Modus wird von villastudio-light.css überlagert)
   ============================================================ */
.colorpicker-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  animation: fade-in 0.15s ease;
}
.colorpicker {
  width: 100%;
  max-width: 340px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.cp-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
.cp-area {
  position: relative;
  width: 100%;
  height: 168px;
  border-radius: 14px;
  border: 1px solid var(--border);
  cursor: crosshair;
  touch-action: none;
  overflow: hidden;
}
.cp-area-cursor {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cp-hue {
  position: relative;
  width: 100%;
  height: 16px;
  margin-top: 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  touch-action: none;
  cursor: pointer;
  background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
}
.cp-hue-thumb {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cp-presets {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  margin-top: 16px;
}
.cp-preset {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  padding: 0;
}
.cp-preset:active { transform: scale(0.9); }
.cp-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.cp-preview {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.cp-hex {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  padding: 9px 12px;
  outline: none;
}
.cp-hex:focus { border-color: var(--accent); }
.cp-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.cp-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 9px 16px;
  border-radius: 11px;
}
.cp-btn:active { transform: scale(0.96); }
.cp-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ============================================================
   Eigener Time-Picker (Glas) – 24h-Uhrzeit
   ============================================================ */
.timepicker-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  animation: fade-in 0.15s ease;
}
.timepicker {
  width: 100%;
  max-width: 300px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body.theme-light .timepicker { background: rgba(255, 255, 255, 0.92); }
.tp-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; text-align: center; }
.tp-wheels {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
/* Mittlere Auswahl-Bande als Glas-Highlight */
.tp-band {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  pointer-events: none;
}
.tp-wheels .drum-wrap { width: 84px; }
.tp-colon { font-size: 26px; font-weight: 700; color: var(--text); padding-bottom: 2px; }
.tp-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.tp-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 9px 16px;
  border-radius: 11px;
}
.tp-btn:active { transform: scale(0.96); }
.tp-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ===== Drum-Picker (Basis – Stunden/Minuten-Räder im Zeit-Picker) =====
   Ohne diese Regeln rendern die Räder als endlose, volle Liste (kein Scroll-Snap). */
.drum-wrap {
  height: 220px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.drum-wrap::-webkit-scrollbar { display: none; }
.drum-pad { height: 88px; flex-shrink: 0; } /* (220 - 44) / 2 = 88px: zentriert erstes/letztes Item */
.drum-item {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  font-size: 20px;
  font-weight: 600;
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, font-size 0.1s;
  user-select: none;
  white-space: nowrap;
}
.drum-item.drum-selected { color: var(--text); font-size: 24px; font-weight: 700; }


/* =====================================================================================
   HABIT-TRACKER (portiert aus Life Studio) — Tabelle, Ampel, Seiten-Overlay, Auswertung,
   Challenge, Erinnerung, Monatswähler-Räder. Beide Themes.
   ===================================================================================== */
/* =====================================================================================
   HABIT-TRACKER — CSS (verbatim aus Life Studio styles.css extrahiert)
   Quelle: /Users/s.stolzenberger/.../Life Studio/app/styles.css
   Integrationshinweise in /tmp/habit_manifest.md

   BEREITS IN WG VORHANDEN (NICHT erneut einfügen):
     .month-picker / .month-nav / .month-label (+ body.theme-light-Override) (WG Z. 200-242, 1821-1823)
     .month-picker.hidden (WG Z. 1278)
     .habit-sort-list / .habit-sort-item / .habit-sort-handle / .habit-sort-label / .habit-sort-delete (WG Z. 425-612)
     .drum-wrap / .drum-item / .drum-item.drum-selected / .tp-band (WG Z. 2030, 2065-2091)
     .dialog-header-actions (WG Z. 302), .hint (WG Z. 332), .field-* (Form-Basis)
   FEHLT IN WG → MUSS ergänzt werden: ALLES Folgende.
   ===================================================================================== */


/* ===== Habit-Sortierliste: Ergänzungen, die WG NOCH NICHT hat (LS Z. 781-804) =====
   WG hat habit-sort-list/-item/-handle/-label/-delete bereits; ES FEHLEN:
   .habit-sort-edit und .habit-rename-input (für Inline-Umbenennen). */
.habit-sort-edit {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.habit-sort-edit:hover { color: var(--accent); background: var(--bg-elev); }

.habit-rename-input {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 5px 8px;
}


/* ===== Monatsraster: Tabelle (LS Z. 966-1342) ===== */
.table-wrap {
  margin: 6px 14px 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  padding: 4px 10px 10px 4px;
  position: relative;
  flex: 1;
  min-height: 0;
}
/* Heller Glas-Rahmen */
body.theme-light .table-wrap {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 30px rgba(31, 31, 28, 0.08);
}

.habit-table {
  border-collapse: separate;
  border-spacing: 5px;
  font-size: 13px;
  width: max-content;
}
.habit-table th,
.habit-table td {
  padding: 0;
  text-align: center;
  background: transparent;
}

/* Header row */
.habit-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: auto;
  padding: 8px 2px 6px;
  min-width: 44px;
  font-weight: 700;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.3px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.habit-table thead th.today-col { color: var(--accent); }
.th-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.th-day-num {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-muted);
}
.th-day-wd {
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
  opacity: 0.5;
  letter-spacing: 0.3px;
}
.habit-table thead th.today-col .th-day-num { color: var(--accent); }
.habit-table thead th.today-col .th-day-wd { opacity: 0.7; }

.today-badge {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  background: #3b82f6;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}
@keyframes today-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.55), inset 0 1px 1px rgba(255,255,255,0.25);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.70), inset 0 1px 1px rgba(255,255,255,0.3), 0 0 0 4px rgba(59, 130, 246, 0.12);
  }
}

/* Row labels */
.habit-table .row-label {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow: 4px 0 14px rgba(0, 0, 0, 0.16);
  color: var(--brand);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.1px;
  font-size: 12.5px;
  padding: 10px 14px;
  min-width: 120px;
  max-width: 120px;
  line-height: 1.3;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  border-radius: 12px;
  transition:
    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.2s,
    box-shadow 0.2s;
}

/* Row label inner layout */
.row-label-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.row-label-inner > span {
  cursor: pointer;
  text-align: center;
  width: 100%;
}

/* Bell button */
.notif-bell-btn {
  background: transparent;
  border: none;
  color: rgba(148, 163, 184, 0.28);
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
  line-height: 1;
  font-family: inherit;
}
.notif-bell-btn.active { color: var(--accent); }
.notif-bell-btn:hover { color: var(--text-muted); }
.notif-bell-btn.active:hover { color: var(--accent-hover); }

/* Toggle switch (FEHLT in WG) */
.notif-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.toggle-switch {
  position: relative;
  width: 50px;
  height: 28px;
  background: var(--border);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
  padding: 0;
}
.toggle-switch[aria-pressed="true"] { background: var(--accent); }
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  pointer-events: none;
}
.toggle-switch[aria-pressed="true"] .toggle-thumb { transform: translateX(22px); }

/* Notification fields (FEHLT in WG) */
.notif-days-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.notif-days-row input { width: 90px; flex-shrink: 0; }
.notif-unit { font-size: 14px; color: var(--text-muted); }
.notif-info {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.notif-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.notif-info-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}
.notif-info-value {
  font-size: 13px;
  color: var(--brand);
  font-weight: 600;
  text-align: right;
}
#notif-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#notif-fields.hidden { display: none; }

.notif-perm-warning {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 8px;
  color: #fca5a5;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  margin-top: 4px;
}
.notif-perm-warning.hidden { display: none; }

/* Daily reminder section in settings (FEHLT in WG) */
.daily-reminder-section {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 4px;
}
.daily-reminder-fields {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.daily-reminder-fields input[type="time"] {
  flex: 1;
  max-width: 140px;
}

/* HINWEIS: Die generischen input[type=number|time|date]-Regeln (LS Z. 1232-1256)
   sind in WG sehr wahrscheinlich schon vorhanden (Date-/Time-Picker existieren).
   Nur einfügen, falls sie in WG FEHLEN. */

.habit-table .row-label:active {
  transform: scale(0.95);
  background: var(--bg-elev-2);
}

.habit-table thead th.corner {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 120px;
  max-width: 120px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* Zellen als ruhige Glas-Kacheln; nur Markierungen leuchten */
.habit-table td.cell {
  height: 44px;
  min-width: 44px;
  cursor: pointer;
  position: relative;
  background: var(--bg-elev-2);
  border-radius: 10px;
  box-shadow: none;
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s ease;
}
.habit-table td.cell.today-col {
  background: rgba(59, 130, 246, 0.14);
}
/* Markierungen: ruhige Volltöne, leicht entsättigt
   (Hinweis: die aktive Farbe wird in renderTable() inline per backgroundColor gesetzt;
   diese val-*-Klassen sind ein Fallback für die Standard-IDs). */
.habit-table td.cell.val-green  { background: #34a36a; }
.habit-table td.cell.val-orange { background: #e08a3c; }
.habit-table td.cell.val-red    { background: #e0605a; }

.habit-table td.cell:active { transform: scale(0.9); }

@media (hover: hover) {
  .habit-table td.cell:hover {
    transform: scale(1.08);
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30);
  }
  .habit-table .row-label:hover {
    background: var(--bg-elev-2);
  }
}

/* Cell animations */
@keyframes cell-pop-set {
  0%   { transform: scale(0.35); opacity: 0.3; filter: blur(2px); }
  55%  { transform: scale(1.20); opacity: 1; filter: blur(0); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes cell-pop-clear {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.55); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}
.cell.just-set    { animation: cell-pop-set 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.cell.just-cleared { animation: cell-pop-clear 0.35s ease; }

/* Enter-Animation NUR beim View-Wechsel (Klasse ht-enter, einmalig in renderTable gesetzt),
   nicht bei jedem Daten-Re-Render (z. B. Zelle markieren) → sonst flackert die Tabelle. */
.habit-table.ht-enter {
  animation: table-enter 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes table-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.no-habits-msg {
  padding: 32px 18px;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  font-size: 14px;
}

/* Habit-Tracker: zarte Hintergrund-Glows (Soft-Glass-Tiefe, beide Themes) */
/* WICHTIG: Flex-Column + overflow:hidden (wie Life Studio), damit .table-wrap (flex:1, min-height:0)
   auf die verfügbare Höhe begrenzt wird und INTERN vertikal scrollt – sonst wächst die Tabelle bei
   vielen Aktivitäten über den Bildschirm und .main{overflow:hidden} schneidet sie ab (kein Down-Scroll). */
#view-table {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  background:
    radial-gradient(58% 24% at 16% 0%, rgba(99, 102, 241, 0.10), transparent 70%),
    radial-gradient(58% 26% at 86% 4%, rgba(59, 130, 246, 0.08), transparent 72%);
}


/* ========== Traffic-light dialog (LS Z. 1344-1464) ========== */
#traffic-dialog .dialog-panel {
  background: var(--bg-elev);
}

.day-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.day-pill {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.day-pill.is-day {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}

.traffic-buttons {
  display: grid;
  /* passt sich an beliebig viele Farben an */
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: 8px;
  padding: 4px 0 8px;
}
.traffic-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 4px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.25s,
    border-color 0.25s,
    box-shadow 0.3s;
  font-family: inherit;
}
.traffic-btn .traffic-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: relative;
  box-shadow:
    0 6px 16px -4px rgba(0, 0, 0, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.28),
    inset 0 -2px 3px rgba(0, 0, 0, 0.22);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}
.traffic-btn .traffic-dot::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.28), transparent 55%);
  pointer-events: none;
}
.traffic-green  .traffic-dot { background: linear-gradient(160deg, #4ade80 0%, #16a34a 100%); }
.traffic-orange .traffic-dot { background: linear-gradient(160deg, #fb923c 0%, #d97706 100%); }
.traffic-red    .traffic-dot { background: linear-gradient(160deg, #f87171 0%, #dc2626 100%); }
.traffic-none   .traffic-dot {
  background: rgba(51, 65, 85, 0.5);
  border: 1.5px dashed rgba(148, 163, 184, 0.38);
  box-shadow: none;
}
.traffic-none .traffic-dot::after { display: none; }

.traffic-btn:active { transform: scale(0.92); }
.traffic-btn:active .traffic-dot { transform: scale(0.9); }
.traffic-btn.selected {
  border-color: var(--accent);
  background: rgba(59, 130, 246, 0.12);
  transform: scale(1.05);
  box-shadow: 0 8px 22px -6px rgba(59, 130, 246, 0.35), 0 0 0 3px rgba(59, 130, 246, 0.08);
}
.traffic-btn.selected .traffic-dot {
  animation: dot-glow 1.8s ease-in-out infinite;
}
@keyframes dot-glow {
  0%, 100% {
    box-shadow:
      0 6px 16px -4px rgba(0, 0, 0, 0.50),
      inset 0 1px 2px rgba(255, 255, 255, 0.28),
      inset 0 -2px 3px rgba(0, 0, 0, 0.22);
  }
  50% {
    box-shadow:
      0 6px 24px -2px rgba(0, 0, 0, 0.55),
      inset 0 1px 2px rgba(255, 255, 255, 0.38),
      inset 0 -2px 3px rgba(0, 0, 0, 0.22),
      0 0 0 5px rgba(59, 130, 246, 0.07);
  }
}

@media (hover: hover) {
  .traffic-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--text-muted);
  }
  .traffic-btn:hover .traffic-dot { transform: scale(1.06); }
}


/* ===== Einstellungen: Markierungsfarben (LS Z. 1466-1506) ===== */
.habit-color-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.habit-color-swatch {
  width: 46px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.habit-color-swatch:active { transform: scale(0.95); }
input.habit-color-name {
  flex: 1;
  min-width: 0;
}
.habit-color-delete {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.habit-color-delete:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-bg);
}
#add-habit-color { margin-top: 8px; }


/* ===== field-hint (in WG NICHT vorhanden, LS Z. 423-428) ===== */
.field-hint {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.75;
}


/* ===== Auswertung: .habit-stats-panel + Tabs + Inhalte (LS Z. 3226-3337) ===== */
.habit-stats-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0);
}
.habit-stats-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  flex-shrink: 0;
}
.habit-stats-title { font-size: 17px; font-weight: 700; color: var(--text); }

.hs-tabs { display: flex; gap: 7px; padding: 10px 14px; background: var(--bg-elev); border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hs-tabs::-webkit-scrollbar { display: none; }
.hs-tab {
  flex: 0 0 auto; white-space: nowrap; padding: 8px 15px; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.hs-tab.active { background: var(--accent); border-color: var(--accent); color: #04201c; }

.hs-body { flex: 1; overflow-y: auto; padding: 16px; max-width: 640px; width: 100%; margin: 0 auto; }
.hs-empty { color: var(--text-muted); font-size: 14px; text-align: center; padding: 30px 10px; line-height: 1.6; }

/* Punkte-Gesamt */
.hs-points-total {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: linear-gradient(160deg, rgba(234,179,8,0.14), var(--bg-elev) 70%);
  border: 1px solid rgba(234,179,8,0.35);
  border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
}
.hs-points-star { font-size: 22px; }
.hs-points-num { font-size: 34px; font-weight: 800; color: var(--text); line-height: 1; }
.hs-points-cap { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* Bestenliste */
.hs-board { display: flex; flex-direction: column; gap: 8px; }
.hs-row { display: flex; align-items: center; gap: 12px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; }
.hs-rank { font-size: 16px; font-weight: 700; min-width: 26px; text-align: center; color: var(--text-muted); }
.hs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hs-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hs-name { font-size: 15px; font-weight: 600; color: var(--text); }
.hs-badges { display: inline-flex; gap: 3px; }
.hs-badge { font-size: 14px; }
.hs-streaks { font-size: 12px; color: var(--text-muted); }
.hs-streaks strong { color: var(--text); }
.hs-points { font-size: 18px; font-weight: 800; color: #eab308; flex-shrink: 0; }
.hs-points-p { font-size: 11px; font-weight: 700; margin-left: 1px; }

/* Belohnungen */
.hs-rewards-head { font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 22px 0 4px; }
.hs-rewards-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.hs-rewards { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; }
.hs-reward {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 6px;
  opacity: 0.4; filter: grayscale(0.8);
}
.hs-reward.earned { opacity: 1; filter: none; border-color: rgba(234,179,8,0.4); background: rgba(234,179,8,0.08); }
.hs-reward-icon { font-size: 22px; }
.hs-reward-days { font-size: 12px; font-weight: 700; color: var(--text); }
.hs-reward-label { font-size: 10px; color: var(--text-muted); text-align: center; }

/* Zusammenfassung */
.hs-sum-controls { display: flex; gap: 12px; margin-bottom: 14px; }
.hs-field { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.hs-field-label { font-size: 12px; color: var(--text-muted); }
.hs-date { width: 100%; }
.hs-sum-head { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; }
.hs-sum-list { display: flex; flex-direction: column; gap: 12px; }
.hs-sum-row { display: flex; flex-direction: column; gap: 6px; }
.hs-sum-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hs-sum-name { font-size: 14px; font-weight: 600; color: var(--text); }
.hs-sum-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.hs-sum-count strong { color: var(--text); font-size: 14px; }
.hs-bar { height: 8px; background: var(--bg-elev-2); border-radius: 5px; overflow: hidden; }
.hs-bar-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #60a5fa); border-radius: 5px; }
.hs-sum-last { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.hs-sum-last strong { color: var(--text); font-weight: 600; }

/* Im Blick Tab */
.hs-focus-sec {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;
  margin: 14px 0 8px; color: var(--danger);
}
.hs-focus-sec:first-child { margin-top: 0; }
.hs-focus-sec-ok { color: #22c55e; }
.hs-focus-card {
  background: var(--bg-elev); border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--radius-sm); padding: 12px 13px 12px 10px; margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 7px;
}
.hs-focus-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hs-focus-name { font-size: 15px; font-weight: 600; color: var(--text); }
.hs-focus-since { font-size: 12px; font-weight: 500; text-align: right; line-height: 1.3; }
.hs-focus-week { display: flex; align-items: center; gap: 8px; }
.hs-focus-bar-wrap { flex: 1; height: 6px; background: var(--bg-elev-2); border-radius: 4px; overflow: hidden; }
.hs-focus-bar-fill { height: 100%; border-radius: 4px; }
.hs-focus-week-txt { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.hs-focus-msg { font-size: 12.5px; color: var(--text-muted); font-style: italic; line-height: 1.4; }
.hs-focus-all-good {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 30px 16px; background: rgba(34,197,94,0.07); border: 1px solid rgba(34,197,94,0.2);
  border-radius: var(--radius); margin-bottom: 16px;
}
.hs-focus-all-good-icon { font-size: 32px; }
.hs-focus-all-good-text { font-size: 17px; font-weight: 700; color: #22c55e; }
.hs-focus-all-good-sub { font-size: 13px; color: var(--text-muted); text-align: center; line-height: 1.5; }


/* ===== Monatswähler-Wheels (NUR falls Monat-Dialog portiert; LS Z. 3711-3720) =====
   .month-picker / .month-nav / .month-label sind in WG schon da; .mp-wheels NICHT. */
.mp-wheels {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.mp-wheels .drum-wrap { width: 50%; }
.mp-wheels #mp-month .drum-item { font-size: 18px; }
.mp-wheels #mp-month .drum-item.drum-selected { font-size: 21px; }


/* =====================================================================================
   Habit-Tracker: Seiten-Auswahl (mehrere Tracker) + Glas-Menü (LS Z. 3722-3868)
   ===================================================================================== */
.habit-page-bar {
  display: flex;
  justify-content: center;
  padding: 10px 12px 2px;
}
.habit-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 9px 12px 9px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.theme-light .habit-page-btn { background: rgba(255, 255, 255, 0.75); }
.habit-page-btn:active { transform: scale(0.97); }
.habit-page-btn .hpb-icon { color: var(--accent); flex-shrink: 0; }
.habit-page-btn .hpb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.habit-page-btn .hpb-chev { color: var(--text-muted); flex-shrink: 0; }

.hp-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 78px 18px 18px;
  background: rgba(0, 0, 0, 0.5);
  animation: fade-in 0.15s ease;
}
.hp-menu {
  width: 100%;
  max-width: 360px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 14px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body.theme-light .hp-menu { background: rgba(255, 255, 255, 0.94); }
.hp-title { font-size: 13px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-muted); margin: 2px 4px 10px; }
.hp-list { display: flex; flex-direction: column; gap: 6px; }
.hp-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 6px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 8px;
}
.hp-item.active { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.hp-item-name {
  flex: 1 0 100%;
  min-width: 0;
  padding: 2px 2px 4px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  padding: 8px 6px;
  border-radius: 9px;
}
.hp-item-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-item.active .hp-item-name { color: var(--accent); }
.hp-item-name svg { color: var(--accent); flex-shrink: 0; }
.hp-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--text-muted); opacity: 0.5; flex-shrink: 0; box-sizing: border-box; }
.hp-icon-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 9px;
  color: var(--text-muted);
  cursor: pointer;
}
.hp-icon-btn:active { background: var(--bg-elev); }
.hp-icon-btn.hp-del:active { color: var(--danger); }
.hp-icon-btn.hp-move:disabled { opacity: 0.25; cursor: default; pointer-events: none; }
/* Teilen-Knopf im „geteilt"-Zustand (tippen = Teilen aufheben) farblich hervorheben */
.hp-icon-btn.is-shared { color: var(--accent); }
.icon-btn.is-shared { color: var(--accent); }
.hp-rename-input {
  flex: 1;
  min-width: 0;
  background: var(--input-bg);
  border: 1px solid var(--accent);
  border-radius: 9px;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  padding: 8px 10px;
}
.hp-add {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.hp-add-input {
  flex: 1;
  min-width: 0;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
}
.hp-add-input:focus { outline: none; border-color: var(--accent); }
.hp-add-btn {
  flex-shrink: 0;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border: none;
  border-radius: 11px;
  color: #fff;
  cursor: pointer;
}
.hp-add-btn:active { transform: scale(0.94); }

/* HINWEIS: .hp-overlay nutzt @keyframes fade-in. Falls fade-in in WG NICHT existiert,
   ergänzen: @keyframes fade-in { from { opacity:0 } to { opacity:1 } } */


/* ===== Challenge-Sektion: Wochenziel/Farben (LS Z. 3870-3919) ===== */
/* .notif-section-title / .notif-divider sind im Habit-Goal-Dialog NICHT zwingend genutzt,
   aber zur Vollständigkeit mitgenommen. */
.notif-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2px 0 10px;
}
.notif-divider {
  height: 1px;
  background: var(--border);
  margin: 18px 0 16px;
}
.hg-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hg-color-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 9px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.hg-color-chip:active { transform: scale(0.96); }
.hg-color-chip.selected {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-elev-2));
}
.hg-color-chip .hg-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  opacity: 0.4;
}
.hg-color-chip.selected .hg-color-dot { opacity: 1; }
.hs-goal { color: var(--text-muted); opacity: 0.85; }
.hg-intro { margin: 0 0 14px; }


/* =====================================================================================
   HABIT-RELEVANTE body.theme-light-OVERRIDES aus styles.css (LS Z. 3395-3397)
   (.month-picker/#month-label/.month-nav-Override hat WG bereits — NICHT doppeln.)
   In LS liegt der Großteil der Light-Optik in der separaten villastudio-light.css.
   Folgende habit-spezifischen Light-Overrides aus styles.css sind oben bereits
   inline enthalten: body.theme-light .table-wrap, .habit-page-btn, .hp-menu.
   ===================================================================================== */

/* ===== Konto: Google-Button & Trenner ===== */
.auth-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--text-muted); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-google-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
/* ===== Konto & Synchronisierung (überarbeitet, luftiger) ===== */
#account-status { display: flex; flex-direction: column; gap: 12px; }
.acct-card { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); }
.acct-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acct-head-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-email { font-weight: 700; font-size: 14px; word-break: break-all; line-height: 1.2; }
.acct-sub { font-size: 12px; color: var(--text-muted); }
.acct-card-title { font-weight: 700; font-size: 17px; margin-bottom: 10px; }
.acct-sub-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin: 16px 0 8px; }
.acct-sub-label:first-child { margin-top: 0; }
.acct-hint { font-size: 12px; color: var(--text-muted); margin: 12px 0 0; line-height: 1.45; }
.acct-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 16px; }
.acct-actions .btn { width: 100%; }
.acct-danger-row { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); text-align: center; }
.acct-danger-link { background: none; border: none; color: var(--text-muted); font-size: 13px; cursor: pointer; padding: 6px 10px; border-radius: 8px; }
.acct-danger-link:active { color: var(--danger); background: var(--danger-bg); }
.acct-empty { text-align: center; }
.acct-empty-icon { font-size: 34px; line-height: 1; margin-bottom: 8px; }
.acct-empty-text { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.5; }
.acct-empty .acct-actions { margin-top: 14px; }

/* ===== WG / Haushalt ===== */
.wg-qr-dummy { display: none; }
.wg-qr { display: flex; justify-content: center; margin: 8px auto 12px; }
.wg-qr svg { width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: 12px; }
.wg-code-big { font-size: 26px; font-weight: 700; letter-spacing: 4px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* ===== Phase 3: geteilte (WG) Listen ===== */
.scope-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.scope-row.hidden { display: none !important; } /* hidden-Klasse muss display:flex überschreiben */
.scope-row .field-hint { display: block; }
/* Benachrichtigungs-Dialog: Kategorie-Zeilen */
#notif-cats { margin-top: 6px; }
.notif-cat-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.notif-cat-row:first-child { border-top: none; }
.notif-cat-label { font-size: 14px; color: var(--text); min-width: 0; }
/* Master-Push aus → Kategorien deutlich deaktiviert (entsättigt, damit „grün/an" nicht aktiv wirkt) */
.notif-cats-disabled { opacity: 0.5; filter: grayscale(1); pointer-events: none; }
.notif-cat-row .toggle-switch:disabled { cursor: default; }
.wg-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(59,130,246,0.18); color: #93c5fd; margin-left: 6px; vertical-align: middle; }
/* Attribution „wer hat's gemacht" — Initialen-Pille bei geteilten Einträgen */
.attrib { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; flex: 0 0 auto; margin-left: 4px; }
.prio-badge.prio-attrib { color: var(--accent); border-color: var(--accent); }
.prio-badge.prio-repeat { color: var(--text-muted); border-color: rgba(255,255,255,0.14); }
.day-pill.is-attrib { background: rgba(20,184,166,0.15); color: var(--accent); border-color: transparent; }
body.theme-light .wg-badge { background: rgba(69,68,42,0.12); color: var(--vsl-accent, #45442A); }

/* WG-Seite teilen (Habit-Seiten-Menü) */
.hp-share { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.hp-share input { width: 16px; height: 16px; }

/* ===== QR-Scan-Overlay ===== */
.qr-scan-overlay { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top,0) 16px env(safe-area-inset-bottom,0); }
.qr-scan-box { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 360px; }
.qr-scan-video { width: 100%; max-width: 320px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 20px; background: #000; border: 3px solid rgba(255,255,255,0.85); box-shadow: 0 0 0 4px rgba(59,130,246,0.35); }
.qr-scan-hint { color: #e2e8f0; font-size: 14px; text-align: center; margin: 0; }
.qr-scan-cancel { background: rgba(255,255,255,0.12); color: #fff; }

/* WG-Mitglieder & Anfragen (Admin) */
.wg-members { display: flex; flex-direction: column; gap: 8px; }
/* Mitglied als eigene Karte; Admin-Aktionen rutschen in eine zweite Zeile (kein Gequetsche) */
.wg-member { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 9px 11px; border-radius: 12px; background: var(--bg-elev-2); }
.wg-member-main { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1 1 auto; }
.wg-member-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.wg-you { color: var(--text-muted); font-weight: 500; }
.wg-member-actions { display: flex; gap: 6px; flex-wrap: wrap; flex: 0 0 100%; padding-top: 1px; }
.wg-member-actions .btn-small { padding: 4px 11px; font-size: 12px; }
.wg-member-actions .wg-mem-danger { color: var(--danger); }
.attrib.wg-mem-av { border: none; margin-left: 0; cursor: default; font-family: inherit; }
.attrib.wg-mem-av.editable { cursor: pointer; box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 3px var(--border); }
.attrib.wg-mem-av.editable:active { transform: scale(0.92); }

/* Tagesplaner: Farb-Auswahl */
.dp-color-row { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-color-swatch { width: 30px; height: 30px; border-radius: 9px; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform .08s; }
.dp-color-swatch:active { transform: scale(0.92); }
.dp-color-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--bg-elev-2), 0 0 0 4px #fff; }
body.theme-light .dp-color-swatch.selected { border-color: var(--text); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--text); }

/* Tagesplaner: ausgewählte Dauer im Dauer-Dialog */
#dayplan-duration-dialog .dp-dur.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ===================== Ausgaben (Splitwise-light) ===================== */
.exp-scroll { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px 96px; max-width: 640px; margin: 0 auto; }
.exp-summary { border-radius: var(--radius); padding: 16px 18px; font-size: 16px; text-align: center; margin-bottom: 16px; border: 1px solid var(--border); background: var(--bg-elev); }
.exp-summary strong { font-size: 20px; }
.exp-summary.exp-pos { background: rgba(20,184,166,0.12); border-color: rgba(20,184,166,0.4); color: var(--accent); }
.exp-summary.exp-neg { background: var(--danger-bg); border-color: rgba(248,113,113,0.4); color: var(--danger); }
.exp-summary.exp-zero { color: var(--text-muted); }
.exp-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin: 18px 4px 8px; }
.exp-settles, .exp-mbals { display: flex; flex-direction: column; gap: 6px; }
.exp-settle { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-elev); border: 1px solid var(--border); font-size: 14px; }
.exp-settle.mine { border-color: rgba(20,184,166,0.5); }
.exp-settle svg { color: var(--text-muted); flex: 0 0 auto; }
.exp-settle-name { font-weight: 600; }
.exp-settle-amt { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.exp-settle-none { padding: 12px; text-align: center; color: var(--text-muted); font-size: 14px; }
.exp-mbal { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg-elev); border: 1px solid var(--border); }
.exp-mbal .attrib { background: var(--bg-elev-2); color: var(--text); }
.exp-mbal-name { font-size: 14px; }
.exp-mbal-amt { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.exp-mbal-ghost { opacity: 0.85; border-style: dashed; }
.exp-mbal-left { display: inline-block; margin-left: 4px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.exp-mbal-amt.pos { color: var(--accent); }
.exp-mbal-amt.neg { color: var(--danger); }
.exp-mbal-amt.zero { color: var(--text-muted); }
.exp-list { display: flex; flex-direction: column; gap: 8px; }
.exp-item { display: flex; flex-direction: column; border-radius: var(--radius); background: var(--bg-elev); border: 1px solid var(--border); overflow: hidden; }
.exp-item-tap { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; background: transparent; border: none; color: var(--text); cursor: pointer; font: inherit; }
.exp-item-tap:active { transform: scale(0.99); }
.exp-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.exp-item-title { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-item-sub { font-size: 12px; color: var(--text-muted); }
.exp-item-amt { font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
/* Ausgeglichene Ausgaben: ausgegraut, bleiben aber sichtbar */
.exp-item.is-settled { opacity: 0.55; }
.exp-item.is-settled .exp-item-tap { cursor: default; }
.exp-item.is-settled .exp-item-tap:active { transform: none; }
.exp-item.is-settled .exp-item-title { text-decoration: line-through; text-decoration-color: var(--text-muted); }
.exp-settled-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); background: var(--bg-elev-2); border-radius: 6px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; text-decoration: none; }
.exp-recurring-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.2px; color: var(--accent); background: rgba(20,184,166,0.12); border-radius: 6px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; white-space: nowrap; text-decoration: none; }
/* Kategorien: Badge am Eintrag, Schnellwahl-Chips im Dialog, Filter, Monatsköpfe, Aufschlüsselung */
.exp-cat-tag { display: inline-block; font-size: 10px; font-weight: 700; color: var(--text-muted); background: var(--bg-elev-2); border-radius: 6px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; white-space: nowrap; }
.exp-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.exp-cat-chip { border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--text-muted); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 600; cursor: pointer; }
.exp-cat-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.exp-catfilter { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.exp-catfilter::-webkit-scrollbar { display: none; }
.exp-cat-fchip { flex: 0 0 auto; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.exp-cat-fchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.exp-month-head { font-size: 12px; font-weight: 800; color: var(--text-muted); padding: 12px 4px 4px; }
.exp-breakdown { display: flex; flex-direction: column; gap: 1px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.exp-brk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 13px; background: var(--bg-elev); }
.exp-brk-cat { font-size: 13.5px; color: var(--text); }
.exp-brk-amt { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
/* Notiz ein-/ausklappen */
.exp-note-toggle { display: flex; align-items: center; gap: 6px; align-self: flex-start; margin: -2px 14px 0; padding: 4px 0 10px; background: transparent; border: none; color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.exp-note-toggle svg { transition: transform 0.18s ease; }
.exp-note-toggle.open svg { transform: rotate(180deg); }
.exp-note-body { padding: 0 14px 12px; font-size: 13px; line-height: 1.5; color: var(--text-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.exp-note-body.hidden { display: none; }
.exp-settle-all-btn { width: 100%; margin-top: 8px; }
.exp-empty { text-align: center; color: var(--text-muted); padding: 40px 20px; }
.exp-empty-icon { font-size: 40px; margin-bottom: 8px; }
.exp-empty-sub { font-size: 13px; margin-top: 6px; }
.exp-nowg .btn { margin-top: 14px; }
/* Dialog: Bezahlt-von-Chips + Teilnehmer */
.exp-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.exp-choice { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.exp-choice.sel { background: var(--accent); border-color: var(--accent); color: #04201c; }
.exp-part-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.exp-participants { display: flex; flex-wrap: wrap; gap: 8px; }
.exp-part { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted); font-size: 13px; cursor: pointer; }
.exp-part.sel { border-color: var(--accent); color: var(--text); }
.exp-part-check { display: inline-flex; width: 16px; justify-content: center; color: var(--accent); font-weight: 800; }

/* ===================== WG-Aktivitätsverlauf (Overlay) ===================== */
.activity-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,0.55); display: flex; align-items: flex-end; justify-content: center; }
.activity-sheet { background: var(--bg-elev); width: 100%; max-width: 520px; max-height: 80vh; border-radius: 18px 18px 0 0; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.activity-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.activity-title { font-weight: 700; font-size: 16px; }
.activity-list { overflow-y: auto; padding: 8px 12px 20px; }
.activity-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.activity-item:last-child { border-bottom: none; }
.activity-item .attrib { background: var(--bg-elev-2); color: var(--text); margin-top: 1px; }
.activity-text { font-size: 14px; line-height: 1.35; color: var(--text); }
.activity-time { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.activity-empty { text-align: center; color: var(--text-muted); padding: 28px 12px; font-size: 14px; }

/* ===================== Sync-/Offline-Status (Header) ===================== */
.sync-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; margin-left: 6px; white-space: nowrap; cursor: pointer; }
.sync-status.offline { background: var(--danger-bg); color: var(--danger); }
.sync-status.syncing { background: rgba(20,184,166,0.14); color: var(--accent); }
.sync-spin { animation: sync-rot 0.9s linear infinite; }
@keyframes sync-rot { to { transform: rotate(360deg); } }

/* Fairness-Auswertung (Markierungen je WG-Mitglied) */
.hs-fair-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.hs-fair-row:last-child { border-bottom: none; }
.hs-fair-main { flex: 1 1 auto; min-width: 0; }
/* Fairness je Aktivität — kompakt: gestapelter Balken + Legende */
.hs-fair-act { margin: 14px 0 6px; }
.hs-fair-act-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.hs-fair-act-total { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--bg-elev-2); border-radius: 999px; padding: 1px 9px; }
.hs-fair-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--bg-elev-2); margin-bottom: 6px; }
.hs-fair-stack span { display: block; height: 100%; }
.hs-fair-legend { display: flex; flex-wrap: wrap; gap: 5px 14px; }
.hs-fair-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.hs-fair-chip strong { color: var(--text); font-variant-numeric: tabular-nums; }
.hs-fair-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* To-Do/Einkaufsliste: Komfort-Leiste für erledigte Einträge */
.todo-done-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 9px 16px; margin: 0 16px 10px; border-radius: var(--radius-sm); background: var(--bg-elev); border: 1px solid var(--border); }
.todo-done-count { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.todo-done-act { margin-left: auto; background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 6px; }
.todo-done-act.danger { color: var(--danger); margin-left: 0; }

/* To-Do: Suchleiste in der Listenübersicht */
.todo-search-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin: 0 0 12px; border-radius: var(--radius-sm); background: var(--input-bg); border: 1px solid var(--border); }
.todo-search-icon { color: var(--text-muted); flex: 0 0 auto; }
#todo-search { flex: 1 1 auto; background: none; border: none; outline: none; color: var(--text); font-size: 15px; }
#todo-search::placeholder { color: var(--text-muted); }

/* Konto löschen (DSGVO) — dezenter Danger-Link */
.account-danger { margin-top: 16px; text-align: center; }
.acc-delete-link { background: none; border: none; color: var(--text-muted); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 4px; }
.acc-delete-link:active { color: var(--danger); }

/* ===================== Pinnwand ===================== */
/* height:100% + overflow-y:auto = eigener Scroll-Container (wie .prio-scroll); sonst wächst der
   Inhalt über den Bildschirm und .main{overflow:hidden} schneidet ihn ab → kein Down-Scroll. */
.board-scroll { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px 96px; max-width: 640px; margin: 0 auto; }
/* Suche + Kategorie-/Mitglieder-Filter */
.board-toolbar { margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.board-search-row { margin: 0; }
.board-search-row input { flex: 1 1 auto; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font: inherit; font-size: 14px; }
.board-chiprow { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.board-chiprow::-webkit-scrollbar { display: none; }
.board-chiprow .chip { flex: 0 0 auto; }
.board-mem-chip { display: inline-flex; align-items: center; gap: 6px; padding-left: 4px; }
.board-mem-chip .attrib { margin-left: 0; }
.board-list { display: flex; flex-direction: column; gap: 10px; }
.board-card { border-radius: var(--radius); background: var(--bg-elev); border: 1px solid var(--border); overflow: hidden; }
.board-card-pinned { border-color: rgba(234,179,8,0.5); background: rgba(234,179,8,0.06); }
.board-card-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.board-attrib { background: var(--bg-elev-2); color: var(--text); flex: 0 0 auto; }
.board-author { font-size: 13px; font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-time { font-size: 12px; color: var(--text-muted); flex: 0 0 auto; }
.board-pin-btn { color: var(--text-muted); }
.board-pin-btn.is-pinned { color: rgba(234,179,8,0.9); }
.board-del-btn { color: var(--text-muted); }
.board-del-btn:active { color: var(--danger); }
.board-msg { padding: 0 14px 12px; font-size: 14px; line-height: 1.55; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.board-empty { text-align: center; color: var(--text-muted); padding: 48px 20px; }
.board-empty-icon { font-size: 40px; margin-bottom: 10px; }
.board-empty-sub { font-size: 13px; margin-top: 6px; }
.board-nowg .btn { margin-top: 14px; }
.board-textarea { width: 100%; min-height: 100px; resize: vertical; font: inherit; font-size: 14px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 10px 12px; box-sizing: border-box; outline: none; }
.board-textarea:focus { border-color: var(--accent); }
.board-char-count { display: block; text-align: right; margin-top: 4px; }
/* Titel + Kategorie auf der Karte */
.board-title { padding: 0 14px 2px; font-size: 15px; font-weight: 700; color: var(--text); }
.board-card-tags { padding: 0 14px 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.board-cat-badge { display: inline-block; font-size: 11px; font-weight: 700; color: var(--text); background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; }
.board-mark { background: rgba(234,179,8,0.38); color: inherit; border-radius: 3px; padding: 0 1px; }
.board-edit-btn { color: var(--text-muted); }
/* Dialog: Titel-/Kategorie-Eingabe + Kategorie-Schnellauswahl */
.board-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 9px 12px; outline: none; }
.board-input:focus { border-color: var(--accent); }
.board-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
body.theme-light .board-card-pinned { border-color: rgba(69,68,42,0.4); background: rgba(69,68,42,0.05); }
body.theme-light .board-cat-badge { background: rgba(0,0,0,0.04); }
body.theme-light .board-pin-btn.is-pinned { color: var(--vsl-accent, #45442A); }

/* ===================== Habit-Notizen im Traffic-Dialog ===================== */
.traffic-note-area { padding: 10px 0 0; }
.traffic-note-input { width: 100%; resize: vertical; font: inherit; font-size: 13px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 8px 10px; box-sizing: border-box; outline: none; min-height: 54px; }
.traffic-note-input:focus { border-color: var(--accent); }

/* Kleiner Indikator-Punkt in Tabellenzellen mit Notiz */
.cell-note-dot { position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.85); pointer-events: none; }
.habit-table td.cell.val-set .cell-note-dot { background: rgba(255,255,255,0.85); }
body.theme-light .cell-note-dot { background: rgba(0,0,0,0.45); }
body.theme-light .habit-table td.cell.val-set .cell-note-dot { background: rgba(255,255,255,0.9); }

/* ===================== Home-Screen Drei-Punkte-Menü ===================== */
/* Drei-Punkte-Menü sitzt komplett oben rechts im Eck (fixed), unabhängig vom (auf Home leeren) Header. */
.home-hero-top { width: 100%; height: 0; position: relative; z-index: 25; }
.home-menu-wrap { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 16px); right: 16px; z-index: 40; flex-shrink: 0; }
/* Kein Klick-Effekt (kein Hover-/Active-Hintergrund) – nur Menü auf-/zuklappen, wie in Play Studio. */
.home-menu-btn { color: var(--text-muted); }
.home-menu-btn:hover,
.home-menu-btn:active { background: transparent; color: var(--text-muted); }
.home-menu-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  min-width: 230px; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.28); padding: 6px;
  display: flex; flex-direction: column; gap: 2px; transform-origin: top right;
  animation: home-pop-in 0.14s cubic-bezier(0.34,1.2,0.64,1);
}
.home-menu-pop.hidden { display: none; }
.home-menu-backdrop.hidden { display: none; }
#hmi-icon-sun.hidden, #hmi-icon-moon.hidden { display: none; }
@keyframes home-pop-in { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } }
.home-pop-item {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  background: transparent; border: none; color: var(--text); font: inherit;
  font-weight: 600; font-size: 15px; padding: 12px 14px; border-radius: 11px; cursor: pointer;
}
.home-pop-item:active { background: var(--bg-elev-2); }
.home-pop-item svg { flex-shrink: 0; color: var(--text-muted); width: 19px; height: 19px; }
.home-pop-icon { display: flex; align-items: center; flex-shrink: 0; }
.home-pop-icon svg { color: var(--text-muted); }
.home-menu-backdrop { position: fixed; inset: 0; z-index: 20; }
/* Light-Mode: Popup-Hintergrund heller */
body.theme-light .home-menu-pop { box-shadow: 0 8px 32px rgba(0,0,0,0.14); }

/* Einheitliches Einstellungs-Menü (Zahnrad oben rechts) – nutzt die .home-pop-item-Optik */
.settings-menu-overlay { position: fixed; inset: 0; z-index: 90; }
.settings-menu-pop { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 56px); right: 8px; }

/* ============ Dashboard (neue, konfigurierbare Startseite) ============ */
.home-dashboard .home-logo,
.home-dashboard .home-scroll-hint,
.home-dashboard .home-byline,
.home-dashboard .home-foot-spacer { display: none !important; }
.home-dashboard .home-hero { min-height: 0; height: auto; }
.home-dashboard .home-shelves { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dash { padding: 6px 16px 32px; display: flex; flex-direction: column; }
.dash-greet { display: flex; align-items: center; gap: 12px; margin: 2px 0 16px; padding-right: 46px; }
.dash-greet-av { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; flex: 0 0 auto; }
.dash-greet-txt { display: flex; flex-direction: column; min-width: 0; }
.dash-greet-s { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.dash-greet-t { font-size: 19px; font-weight: 800; letter-spacing: -.3px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Hero */
.dash-hero { display: block; width: 100%; text-align: left; border: none; border-radius: 22px; padding: 18px 20px; margin-bottom: 16px; position: relative; overflow: hidden; cursor: pointer; color: #fff; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 55%, #1e40af 100%); box-shadow: 0 14px 30px rgba(37,99,235,.32); }
.dash-hero-lab { font-size: 13px; font-weight: 700; color: #dbe7ff; }
.dash-hero-big { display: block; font-size: 34px; font-weight: 800; letter-spacing: -1px; margin-top: 2px; }
.dash-hero-sub { display: block; margin-top: 8px; font-size: 13px; color: #eaf1ff; }
.dash-hero-pill { background: rgba(255,255,255,.22); padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; }
.dash-hero-mems { display: flex; margin-top: 14px; }
.dash-hero-mav { width: 26px; height: 26px; border-radius: 50%; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #2563eb; margin-left: -7px; }
.dash-hero-mav:first-child { margin-left: 0; }
.dash-hero-spark { position: absolute; right: 0; bottom: 0; width: 200px; height: 74px; opacity: .85; pointer-events: none; }
.dash-hero-today { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); box-shadow: 0 14px 30px rgba(109,40,217,.3); }
/* Stat-Kacheln */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 18px; }
.dash-card { text-align: left; border: 1px solid var(--border); border-radius: 18px; padding: 13px 14px; background: var(--bg-elev); cursor: pointer; display: flex; flex-direction: column; }
.dash-card:active { transform: scale(.985); }
.dash-ci { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 17px; margin-bottom: 9px; }
.dash-cl { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.dash-cv { font-size: 22px; font-weight: 800; margin-top: 3px; color: var(--text); display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.dash-cv-sm { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
.dash-cu { font-size: 12px; color: var(--text-muted); font-weight: 600; }
/* Lade-Zustand (WG-Ansichten vor dem ersten Snapshot) */
.wg-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; padding: 54px 20px; color: var(--text-muted); }
.wg-spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: wg-spin 0.8s linear infinite; }
@keyframes wg-spin { to { transform: rotate(360deg); } }
.wg-loading-txt { font-size: 14px; font-weight: 600; }
/* „Meine Aufgaben"-Kachel: volle Breite, mehrzeilige Aufgabenliste */
.dash-card-wide { grid-column: 1 / -1; }
.dash-card-tasks { gap: 11px; }
.dash-tasks-head { display: flex; align-items: center; gap: 9px; }
.dash-card-tasks .dash-ci { margin-bottom: 0; flex: 0 0 auto; }
.dash-card-tasks .dash-cl { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.dash-tasks-count { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: var(--text); background: var(--bg-elev-2); border-radius: 999px; min-width: 24px; height: 23px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; }
.dash-tasks-empty { font-size: 15px; color: var(--text-muted); font-weight: 600; }
.dash-tasks-list { display: flex; flex-direction: column; gap: 7px; }
.dash-task-row { display: flex; align-items: baseline; gap: 10px; }
.dash-task-name { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-task-due { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.dash-task-due.is-over { color: #ef4444; }
.dash-task-more { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.dash-tasks-toggle { align-self: flex-start; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--accent-2); cursor: pointer; }
/* „Nächster Termin"-Kachel: Titel lesbar in bis zu 2 Zeilen, Fälligkeit darunter */
.dash-card-dl .dash-ci { margin-bottom: 9px; }
.dash-dl-title { font-size: 15px; font-weight: 800; color: var(--text); line-height: 1.25; margin-top: 1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dash-dl-rel { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.dash-dl-rel.is-over { color: #ef4444; }
.dash-dl-empty { margin-top: 2px; font-size: 18px; font-weight: 800; color: var(--text-muted); }
/* Kalender-Widget: Segment-Auswahl (Konfigurator) */
.dash-seg { flex: 1; display: flex; gap: 4px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 11px; padding: 3px; }
.dash-seg-btn { flex: 1; border: none; background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 700; padding: 7px 4px; border-radius: 8px; cursor: pointer; }
.dash-seg-btn.on { background: var(--bg-elev); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
/* Kalender-Widget: Wochenansicht */
.dash-cal-week { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.dash-cal-day { display: flex; flex-direction: column; gap: 7px; }
.dash-cal-day.is-today .dash-cal-dayh { color: var(--accent-2); }
.dash-cal-dayh { align-self: flex-start; background: none; border: none; padding: 2px 0; font-family: inherit; font-size: 12px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
.dash-cal-dayh:active { opacity: .6; }
.dash-cal-none { font-size: 12.5px; color: var(--text-muted); padding: 2px 2px 0; }
.dash-ag-ro { gap: 10px; }
/* Kalender-Widget: Monatsansicht (Mini-Raster) */
.dash-cal-month { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 16px; padding: 12px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.dash-mc-cap { font-size: 13px; font-weight: 800; color: var(--text); }
.dash-mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dash-mc-wd { font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-align: center; padding-bottom: 2px; }
.dash-mc-cell { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: transparent; border: none; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); border-radius: 8px; }
button.dash-mc-cell { cursor: pointer; }
button.dash-mc-cell:active { transform: scale(.9); }
.dash-mc-cell.is-empty { background: transparent; }
.dash-mc-cell.has-ev { background: var(--bg-elev-2); }
.dash-mc-cell.is-today { background: transparent; color: var(--accent-2); font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--accent-2); }
.dash-mc-dot { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent-2); }
/* Sektionen / Agenda / Liste */
.dash-sec { display: flex; justify-content: space-between; align-items: center; margin: 2px 2px 4px; }
.dash-sec h3 { font-size: 16px; font-weight: 800; color: var(--text); }
.dash-link { background: none; border: none; color: var(--accent-2); font-weight: 700; font-size: 13px; cursor: pointer; }
.dash-agenda { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
.dash-ag { display: flex; align-items: center; gap: 11px; background: var(--bg-elev); border: 1px solid var(--border); border-left: 4px solid #3b82f6; border-radius: 14px; padding: 10px 12px; }
.dash-ag-time { font-size: 13px; font-weight: 800; color: var(--text); width: 44px; flex: 0 0 auto; }
.dash-ag-ttl { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-av { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; flex: 0 0 auto; }
.dash-todo { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.dash-todo-item { display: flex; align-items: center; gap: 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 14px; color: var(--text); }
.dash-todo-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--text-muted); flex: 0 0 auto; }
.dash-empty { color: var(--text-muted); font-size: 13px; padding: 10px 2px; }
/* Anwendungen-Starter */
.dash-qgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.dash-q { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 16px; padding: 13px 6px; display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; }
.dash-q:active { transform: scale(.97); }
.dash-qi { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(var(--app), .16); color: rgb(var(--app)); }
.dash-qi svg { width: 22px; height: 22px; }
.dash-q span { font-size: 11px; color: var(--text-muted); font-weight: 600; text-align: center; line-height: 1.2; }
/* Konfigurator */
#dashboard-settings-body .dash-cfg-list { display: flex; flex-direction: column; gap: 10px; }
.dash-cfg-row { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; padding: 11px 12px; }
.dash-cfg-row.is-off { opacity: .55; }
.dash-cfg-move { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.dash-cfg-move button { width: 28px; height: 22px; border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--text); border-radius: 7px; cursor: pointer; font-size: 10px; line-height: 1; }
.dash-cfg-move button:disabled { opacity: .35; cursor: default; }
.dash-cfg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-cfg-label { font-size: 14px; font-weight: 700; color: var(--text); }
.dash-cfg-hint { font-size: 12px; color: var(--text-muted); }
.dash-cfg-opt { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.dash-seg, .dash-chip { border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--text-muted); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.dash-seg.on, .dash-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.dash-select { width: 100%; margin-top: 4px; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.dash-cfg-toggle { flex: 0 0 auto; align-self: center; }

/* ===== Dashboard – Erweiterungen (klickbare Einträge, Drag, Hero-Farben) ===== */
.dash-ag { width: 100%; text-align: left; cursor: pointer; }
.dash-ag.is-done .dash-ag-ttl { text-decoration: line-through; color: var(--text-muted); }
.dash-check { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--text-muted); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; }
.dash-check.on { background: #22c55e; border-color: #22c55e; }
.dash-todo-item { width: 100%; text-align: left; cursor: pointer; }
.dash-todo-item:active, .dash-ag:active { transform: scale(.99); }
/* Konfigurator – Zieh-Griff */
.dash-cfg-handle { flex: 0 0 auto; align-self: center; display: flex; align-items: center; justify-content: center; width: 30px; height: 38px; color: var(--text-muted); cursor: grab; touch-action: none; border-radius: 8px; }
.dash-cfg-handle:active { cursor: grabbing; }
.dash-cfg-row.dragging { opacity: .95; box-shadow: 0 10px 24px rgba(0,0,0,.3); background: var(--bg-elev-2); position: relative; z-index: 5; }
.dash-cfg-dragging { user-select: none; -webkit-user-select: none; }
/* Hero-Farbwahl */
.dash-swatches { gap: 8px !important; margin-top: 4px; }
.dash-swatch { width: 28px; height: 28px; border-radius: 9px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.dash-swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg-elev); }
/* Drei-Punkte-Menü im Dashboard: dezenter, beim Scrollen lesbarer Hintergrund */
.home-dashboard .home-menu-btn { background: rgba(127,140,160,.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 12px; }
.home-dashboard .home-menu-btn:hover, .home-dashboard .home-menu-btn:active { background: rgba(127,140,160,.26); }

/* ===== Dashboard – Überarbeitung v2 (Header weg, Quellen, abgehakte To-Dos, Aufklappen) ===== */
/* Sticky App-Header auf dem Dashboard ausblenden – nur die fixierten Drei-Punkte bleiben */
body.on-home.dash-home .app-header { display: none !important; }
.home-dashboard .dash { padding-top: calc(env(safe-area-inset-top, 0px) + 40px); }
/* abgehakte angepinnte To-Dos bleiben sichtbar (durchgestrichen) */
.dash-todo-item.is-done span:last-child { text-decoration: line-through; color: var(--text-muted); }
.dash-todo-dot { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; }
.dash-todo-dot.on { background: #22c55e; border-color: #22c55e; }
/* „weitere anzeigen" / „weniger" */
.dash-todo-more { width: 100%; text-align: center; background: none; border: 1px dashed var(--border); color: var(--text-muted); border-radius: 12px; padding: 9px; font-size: 13px; font-weight: 700; cursor: pointer; margin-top: 1px; }
.dash-todo-more:active { transform: scale(.99); }
/* Konfigurator – beschriftete Quell-Auswahl */
.dash-cfg-selrow { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.dash-cfg-sellabel { font-size: 12px; font-weight: 700; color: var(--text-muted); flex: 0 0 auto; min-width: 96px; }
.dash-cfg-selrow .dash-select { margin-top: 0; flex: 1; }

/* Dashboard – Hinweis-Kachel „anmelden" (nur wenn nicht eingeloggt) */
.dash-login { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; border: 1px solid rgba(59,130,246,.38); background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(37,99,235,.10)); border-radius: 18px; padding: 14px 16px; margin-bottom: 16px; }
.dash-login:active { transform: scale(.99); }
.dash-login-ic { font-size: 22px; flex: 0 0 auto; line-height: 1; }
.dash-login-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-login-t { font-size: 15px; font-weight: 800; color: var(--text); }
.dash-login-s { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.dash-login-chev { color: var(--accent); flex: 0 0 auto; }

/* ============ Bonuskarten (Wallet) ============ */
#view-cards { height: 100%; }
.cards-screen { position: relative; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 90px); }
.cards-head h2 { font-size: 22px; font-weight: 800; color: var(--text); }
.cards-sub { font-size: 13px; color: var(--text-muted); margin: 2px 0 16px; }
.cards-list { display: flex; flex-direction: column; gap: 12px; }
.card-tile { position: relative; width: 100%; text-align: left; border: none; cursor: pointer; border-radius: 18px; padding: 18px 18px 16px; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 8px 22px rgba(0,0,0,.22); overflow: hidden; }
.card-tile:active { transform: scale(.985); }
.card-tile::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.10); }
.card-tile-name { font-size: 18px; font-weight: 800; letter-spacing: .2px; }
.card-tile-num { font-size: 14px; font-weight: 600; opacity: .9; font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 1px; }
.card-tile-badge { position: absolute; top: 14px; right: 16px; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.22); padding: 3px 9px; border-radius: 999px; }
.cards-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.cards-empty-ic { font-size: 44px; margin-bottom: 8px; }
.cards-empty p { font-size: 16px; font-weight: 700; color: var(--text); margin: 0; }
.cards-empty-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px !important; font-weight: 500 !important; }
/* Detail: Hintergrund folgt dem Theme; der Code-Bereich (Karte) bleibt zum Scannen weiß */
.card-detail-overlay { position: fixed; inset: 0; z-index: 1200; background: linear-gradient(180deg, #1b2433 0%, #0e1622 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top,0px) + 20px) 22px calc(env(safe-area-inset-bottom,0px) + 24px); }
body.theme-light .card-detail-overlay { background: linear-gradient(180deg, #eef2f7 0%, #e2e8f1 100%); }
.card-detail { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 400px; }
.card-detail-close { position: fixed; top: calc(env(safe-area-inset-top,0px) + 12px); right: 14px; color: #e6ebf2; background: rgba(255,255,255,.12); border-radius: 12px; }
body.theme-light .card-detail-close { color: #1f2733; background: rgba(0,0,0,.06); }
.card-detail-card { width: 100%; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 18px 50px rgba(20,30,50,.20), 0 1px 0 rgba(0,0,0,.04); }
.card-detail-head { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 9px; }
.card-detail-name { font-size: 26px; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; word-break: break-word; }
.card-detail-cat { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 999px; border: 1.5px solid currentColor; opacity: .85; }
.card-detail-body { background: #fff; padding: 26px 22px 30px; display: flex; align-items: center; justify-content: center; }
.card-detail-code { background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 120px; }
.card-detail-code svg { max-width: 100%; height: auto; }
.card-detail-note { font-size: 14px; color: #9aa6b6; text-align: center; max-width: 340px; line-height: 1.45; }
.card-detail-hint { font-size: 13px; font-weight: 600; color: #8b97a8; text-align: center; }
body.theme-light .card-detail-note { color: #4a5463; }
body.theme-light .card-detail-hint { color: #6b7585; }
.card-detail-actions { margin-top: 2px; }
.card-detail-actions .btn { color: #e6ebf2; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }
body.theme-light .card-detail-actions .btn { color: #14181f; border-color: rgba(0,0,0,.18); background: rgba(255,255,255,.75); }
.card-code-err { color: #b45309; font-size: 13px; text-align: center; padding: 8px; }
/* Dialog: Format-Chips + Farb-Swatches */
.card-fmt-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.card-fmt-chip { border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--text-muted); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.card-fmt-chip.on { background: var(--accent); border-color: var(--accent); color: #04201c; }
.card-color-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 6px; }
.card-color-sw { width: 30px; height: 30px; border-radius: 9px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.card-color-sw.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg-elev); }

/* Bonuskarten – Scan-Reihe, Kategorien, Filter */
.card-scan-row { display: flex; gap: 8px; }
.card-scan-row .btn { flex: 1; justify-content: center; gap: 7px; }
.card-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.card-cat-chip { border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--text-muted); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer; }
.cards-filter { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cards-filter::-webkit-scrollbar { display: none; }
.cards-fchip { flex: 0 0 auto; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cards-fchip.on { background: var(--accent); border-color: var(--accent); color: #04201c; }
.card-tile-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-tile-cat { font-size: 11.5px; font-weight: 700; background: rgba(255,255,255,.20); padding: 3px 9px; border-radius: 999px; flex: 0 0 auto; }

/* Bonuskarten – eigener Farbpicker-Button (neben den Presets) */
.card-color-custom { width: 30px; height: 30px; border-radius: 9px; border: 2px solid var(--border); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.card-color-custom::after { content: ""; position: absolute; inset: 0; border-radius: 7px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }

/* Aufgabenplan – „geteilt"-Badge neben dem Seitennamen */
.hpb-name .wg-badge.hpb-shared { font-size: 10px; padding: 2px 6px; vertical-align: middle; }

/* Dashboard – Kennzahlen-Konfigurator: Öffnen-Button */
.dash-statcfg-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin-top: 8px; padding: 11px 12px; border: 1px solid var(--border); background: var(--bg-elev-2); border-radius: 12px; color: var(--text); cursor: pointer; }
.dash-statcfg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-statcfg-t { font-size: 14px; font-weight: 700; }
.dash-statcfg-sum { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-statcfg-btn > svg { color: var(--text-muted); flex: 0 0 auto; }

/* Dashboard – Kennzahlen-Overlay */
.dashstats-overlay { position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; }
.dashstats-sheet { width: 100%; max-width: 520px; max-height: 86vh; display: flex; flex-direction: column; background: var(--bg-elev); border-radius: 22px 22px 0 0; padding: 14px 16px calc(env(safe-area-inset-bottom,0px) + 18px); box-shadow: 0 -8px 40px rgba(0,0,0,.4); animation: dashstats-up .26s cubic-bezier(.22,1,.36,1); }
@keyframes dashstats-up { from { transform: translateY(30px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.dashstats-head { display: flex; align-items: center; justify-content: space-between; }
.dashstats-head h3 { font-size: 18px; font-weight: 800; color: var(--text); }
.dashstats-hint { font-size: 12.5px; color: var(--text-muted); margin: 2px 0 12px; line-height: 1.4; }
.dashstats-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dashstats-seclabel { font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); margin: 14px 2px 6px; }
.dashstats-list { display: flex; flex-direction: column; gap: 7px; }
.dashstats-list.dashstats-dragging { cursor: grabbing; }
.dashstats-row { display: flex; flex-direction: column; gap: 9px; padding: 9px 11px; border: 1px solid var(--border); background: var(--bg-elev-2); border-radius: 12px; }
.dashstats-row-main { display: flex; align-items: center; gap: 11px; }
.dashstats-row-sel { display: flex; align-items: center; gap: 9px; padding-left: 27px; }
.dashstats-row-sel .dash-cfg-sellabel { min-width: auto; }
.dashstats-row-sel .dash-select { margin-top: 0; flex: 1; }
.dashstats-row.dragging { opacity: .35; box-shadow: none; }
.dashstats-handle { flex: 0 0 auto; color: var(--text-muted); cursor: grab; touch-action: none; display: inline-flex; }
.dashstats-handle.is-empty { width: 16px; }
.dashstats-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.dashstats-name { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--text); }
.dashstats-empty { font-size: 13px; color: var(--text-muted); padding: 10px 4px; font-style: italic; }

/* Konto-Kopf: Avatar + Anzeigename + „Name ändern" */
.acct-head-text { flex: 1; }
.acct-avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.acct-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 16px; color: var(--text); line-height: 1.2; }
.acct-name-edit { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 7px; padding: 0; }
.acct-name-edit:hover { background: var(--bg-elev-2); color: var(--text); }
.acct-name-edit:active { transform: scale(.92); }
/* E-Mail wird zur Sekundärzeile (vorher Primärzeile) */
.acct-head .acct-email { font-weight: 500; font-size: 12.5px; color: var(--text-muted); }

/* Konto-Avatar als Farb-Picker-Button (oben) */
.acct-avatar { border: none; padding: 0; position: relative; cursor: default; }
.acct-avatar.editable { cursor: pointer; }
.acct-avatar.editable:hover { box-shadow: 0 0 0 3px var(--bg-elev), 0 0 0 5px rgba(127,140,160,.35); }
.acct-avatar.editable:active { transform: scale(.94); }
.acct-avatar-edit { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-elev); color: var(--text); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg-elev); }

/* Geteilte Habit-Zellen (kollaboratives Markieren) */
.habit-table td.cell.mine { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
body.theme-light .habit-table td.cell.mine { box-shadow: inset 0 0 0 2px rgba(20,26,36,.30); }

/* Zell-Notiz / „wer hat erledigt"-Overlay (Langdruck auf geteilte Zelle) */
.cellnote-overlay { position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.cellnote { width: 100%; max-width: 420px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 20px; padding: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.45); animation: cellnote-in .22s cubic-bezier(.22,1,.36,1); }
@keyframes cellnote-in { from { transform: translateY(14px) scale(.97); opacity: .6; } to { transform: none; opacity: 1; } }
.cellnote-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cellnote-head h3 { font-size: 18px; font-weight: 800; color: var(--text); }
.cellnote-date { font-size: 12.5px; color: var(--text-muted); flex: 0 0 auto; }
.cellnote-who { margin-bottom: 14px; }
.cellnote-wholabel { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); }
.cellnote-mems { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; }
.cellnote-mem { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px 3px 3px; }
.cellnote-mem .attrib { width: 22px; height: 22px; font-size: 10px; }
.cellnote-none { font-size: 13px; color: var(--text-muted); font-style: italic; }
.cellnote textarea.input { width: 100%; resize: vertical; font-family: inherit; }
.cellnote-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* Ausgaben – ungleiches Aufteilen (Anteile / feste Beträge) */
.exp-split-detail { margin-top: 10px; }
.exp-split-detail:empty { margin-top: 0; }
.exp-split-hint { font-size: 12.5px; color: var(--text-muted); margin: 4px 2px 0; line-height: 1.4; }
.exp-split-row { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.exp-split-av { width: 26px; height: 26px; font-size: 11px; flex: 0 0 auto; }
.exp-split-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* hohe Spezifität, damit die generische input[type=…]-Regel (width:100%) nicht greift */
.exp-split-row input.exp-split-input { flex: 0 0 auto; width: 88px; min-width: 88px; text-align: right; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font: inherit; font-size: 14px; padding: 7px 9px; outline: none; margin: 0; }
.exp-split-row input.exp-split-input:focus { border-color: #14b8a6; box-shadow: 0 0 0 3px rgba(20,184,166,.15); }
.exp-split-unit { flex: 0 0 auto; font-size: 12px; color: var(--text-muted); min-width: 30px; }
.exp-split-res { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--text); min-width: 58px; text-align: right; }
.exp-split-sum { font-size: 13px; font-weight: 600; margin: 8px 2px 0; }
.exp-split-sum.ok { color: #10b981; }
.exp-split-sum.bad { color: #ef4444; }

/* Erst-Onboarding (Willkommens-Tour) */
.onb-overlay { position: fixed; inset: 0; z-index: 1400; background: rgba(0,0,0,.62); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 22px; }
.onb-card { position: relative; width: 100%; max-width: 400px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 24px; padding: 30px 24px 22px; box-shadow: 0 24px 70px rgba(0,0,0,.5); text-align: center; animation: onb-in .3s cubic-bezier(.22,1,.36,1); }
@keyframes onb-in { from { transform: translateY(20px) scale(.96); opacity: .5; } to { transform: none; opacity: 1; } }
.onb-skip { position: absolute; top: 14px; right: 16px; background: transparent; border: none; color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 6px; }
/* App-Tour: feste Kartenhöhe → Body flext, Dots + Weiter/Zurück bleiben IMMER an derselben Position
   (nur die Tour in .onb-overlay; der Vorlagen-Chooser .wg-tpl-sheet liegt in .wg-tpl-overlay und bleibt auto-hoch). */
.onb-overlay .onb-card { display: flex; flex-direction: column; height: 480px; max-height: calc(100vh - 40px); }
.onb-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.onb-emoji { font-size: 60px; line-height: 1; margin-bottom: 18px; }
.onb-title { font-size: 23px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.onb-text { font-size: 15px; line-height: 1.5; color: var(--text-muted); max-width: 320px; }
.onb-text strong { color: var(--text); font-weight: 700; }
.onb-action { margin-top: 18px; }
.onb-dots { display: flex; justify-content: center; gap: 7px; margin: 20px 0 16px; }
.onb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: all .2s; }
.onb-dot.on { background: #14b8a6; width: 20px; border-radius: 4px; }
.onb-nav { display: flex; gap: 10px; }
.onb-nav .btn { flex: 1; }

/* Onboarding pausiert (während Anmelde-/Konto-Dialog offen) */
.onb-overlay.onb-hidden { display: none !important; }

/* Ausgleich – „Bezahlt"-Button + Verlauf */
.exp-settle { flex-wrap: wrap; }
.exp-settle-paid { flex: 0 0 auto; margin-left: auto; border: 1px solid rgba(16,185,129,.5); background: rgba(16,185,129,.14); color: #10b981; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.exp-settle-paid:active { transform: scale(.95); }
.exp-history { display: flex; flex-direction: column; gap: 6px; }
.exp-hist-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--border); background: var(--bg-elev-2); border-radius: 11px; }
.exp-hist-names { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-hist-names svg { flex: 0 0 auto; opacity: .6; }
.exp-hist-amt { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: #10b981; }
.exp-hist-date { flex: 0 0 auto; font-size: 11.5px; color: var(--text-muted); }
.exp-hist-del { flex: 0 0 auto; background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 8px; display: inline-flex; }
.exp-hist-del:hover { color: var(--danger, #ef4444); background: var(--bg-elev); }

/* Pinnwand – Umfrage-Eingabe (Dialog) */
.board-poll-edit { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.board-poll-edit.hidden { display: none; }
.board-poll-opt-row { display: flex; align-items: center; gap: 8px; }
.board-poll-edit input.board-poll-opt-input { flex: 1; min-width: 0; }
.board-poll-opt-del { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--text-muted); cursor: pointer; font-size: 14px; }
.board-poll-opt-del:hover { color: var(--danger, #ef4444); }
.board-poll-opt-spacer { flex: 0 0 auto; width: 30px; }
.board-poll-add { align-self: flex-start; background: transparent; border: none; color: #eab308; font-size: 13px; font-weight: 700; cursor: pointer; padding: 4px 2px; }

/* Pinnwand – Umfrage-Ansicht (Karte) */
.board-poll { margin-top: 8px; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 7px; }
.board-poll-opt { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid var(--border); background: var(--bg-elev-2); border-radius: 11px; padding: 10px 12px; cursor: pointer; overflow: hidden; min-height: 42px; }
.board-poll-opt.voted { border-color: #eab308; }
.board-poll-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(234,179,8,.16); transition: width .35s cubic-bezier(.22,1,.36,1); z-index: 0; }
.board-poll-opt.voted .board-poll-fill { background: rgba(234,179,8,.28); }
.board-poll-opt-text { position: relative; z-index: 1; flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.board-poll-avs { position: relative; z-index: 1; display: inline-flex; flex: 0 0 auto; }
.board-poll-av { width: 21px; height: 21px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; margin-left: -5px; border: 1.5px solid var(--bg-elev); }
.board-poll-av:first-child { margin-left: 0; }
.board-poll-pct { position: relative; z-index: 1; flex: 0 0 auto; font-size: 13px; font-weight: 800; color: var(--text-muted); min-width: 38px; text-align: right; }
.board-poll-total { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Putzplan (Rotation) */
#view-chores { height: 100%; }
.chores-screen { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px calc(env(safe-area-inset-bottom,0px) + 90px); position: relative; }
.chores-list { display: flex; flex-direction: column; gap: 12px; }
.chore-card { border: 1px solid var(--border); background: var(--bg-elev); border-radius: 16px; padding: 14px; border-left: 4px solid var(--cc, #10b981); }
.chore-card.mine { box-shadow: 0 0 0 1px var(--cc, #10b981); }
.chore-card.is-done { opacity: .72; }
.chore-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chore-name { font-size: 16px; font-weight: 800; color: var(--text); }
.chore-edit { width: 30px; height: 30px; color: var(--text-muted); }
.chore-assignee { display: flex; align-items: center; gap: 8px; margin: 9px 0 11px; }
.chore-av { width: 30px; height: 30px; font-size: 12px; flex: 0 0 auto; }
.chore-who { font-size: 15px; font-weight: 700; color: var(--text); flex: 1; min-width: 0; }
.chore-int { font-size: 11.5px; font-weight: 700; color: var(--text-muted); background: var(--bg-elev-2); border-radius: 999px; padding: 3px 9px; flex: 0 0 auto; }
.chore-done-btn { width: 100%; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 14px; font-weight: 700; border-radius: 11px; padding: 10px; cursor: pointer; }
.chore-done-btn:active { transform: scale(.99); }
.chore-doneline { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.chore-undo { background: transparent; border: none; color: var(--text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 2px; }
.chore-next { font-size: 12.5px; color: var(--text-muted); margin-top: 9px; }
.chore-next strong { color: var(--text); font-weight: 700; }
/* Putzplan-Dialog: Mitglieder-Rotation */
.chore-members { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.chore-mem-on, .chore-mem-off { display: flex; flex-direction: column; gap: 6px; }
.chore-mem-off { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border); }
.chore-mem-row { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--border); background: var(--bg-elev-2); border-radius: 11px; }
.chore-mem-row.off { opacity: .7; }
.chore-mem-row.dragging { opacity: .35; box-shadow: none; }
.chore-mem-handle { flex: 0 0 auto; color: var(--text-muted); cursor: grab; touch-action: none; display: inline-flex; }
.chore-mem-handle.is-empty { width: 15px; }
.chore-mem-av { width: 26px; height: 26px; font-size: 11px; flex: 0 0 auto; }
.chore-mem-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chore-mem-toggle { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted); cursor: pointer; font-weight: 800; }
.chore-mem-toggle.on { border-color: #10b981; background: rgba(16,185,129,.14); color: #10b981; }

/* Ausgleich – Bestätigungs-Hinweis (Nicht-Gläubiger) + Verlauf-Kopf + Archiv */
.exp-settle-await { flex: 0 0 auto; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-muted); font-style: italic; }
.exp-section-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 18px 2px 8px; }
.exp-section-row .exp-section-title { margin: 0; }
.exp-archive-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--text-muted); font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.exp-archive-btn:active { transform: scale(.96); }
.settle-archive-overlay { position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; }
.sarch { width: 100%; max-width: 520px; max-height: 84vh; display: flex; flex-direction: column; background: var(--bg-elev); border-radius: 22px 22px 0 0; padding: 16px 16px calc(env(safe-area-inset-bottom,0px) + 18px); box-shadow: 0 -8px 40px rgba(0,0,0,.4); animation: dashstats-up .26s cubic-bezier(.22,1,.36,1); }
.sarch-head { display: flex; align-items: center; justify-content: space-between; }
.sarch-head h3 { font-size: 18px; font-weight: 800; color: var(--text); }
.sarch-hint { font-size: 12.5px; color: var(--text-muted); margin: 2px 0 12px; }
.sarch-list { overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 7px; }
.sarch-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); background: var(--bg-elev-2); border-radius: 11px; }
.sarch-names { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 5px; }
.sarch-names svg { opacity: .6; flex: 0 0 auto; }
.sarch-amt { flex: 0 0 auto; font-size: 13.5px; font-weight: 800; color: #10b981; }
.sarch-date { flex: 0 0 auto; font-size: 11px; color: var(--text-muted); }
.sarch-empty { font-size: 13px; color: var(--text-muted); font-style: italic; padding: 12px 4px; }

/* Putzplan – frei einstellbares Intervall */
.chore-interval { display: flex; flex-direction: column; gap: 10px; }
.chore-iv-custom { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text-muted); }
.chore-iv-custom input.input { width: 74px; min-width: 74px; text-align: center; padding: 8px; margin: 0; }

/* Aufgaben-Einstellungen (geteilte Seite): Pokal + Glocke als Aktions-Buttons */
.ha-action { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; border: 1px solid var(--border); background: var(--bg-elev-2); border-radius: 13px; cursor: pointer; margin-top: 10px; }
.ha-action:active { transform: scale(.99); }
.ha-action-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-elev); color: var(--accent); }
.ha-action-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ha-action-txt strong { font-size: 15px; font-weight: 700; color: var(--text); }
.ha-action-txt small { font-size: 12.5px; color: var(--text-muted); }
.ha-action-chev { flex: 0 0 auto; color: var(--text-muted); }

/* Einheitlicher Leer-Zustand (alle Bereiche) */
.empty-state { text-align: center; padding: 56px 24px; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; }
.empty-state-ic { font-size: 46px; line-height: 1; margin-bottom: 11px; }
.empty-state-title { font-size: 16.5px; font-weight: 800; color: var(--text); }
.empty-state-sub { font-size: 13px; color: var(--text-muted); margin-top: 5px; max-width: 330px; line-height: 1.45; font-weight: 500; }
.empty-state .btn { margin-top: 16px; }

/* „Als WG-Ausgabe abrechnen" – beschrifteter Button im To-Do-Listenkörper */
.todo-expense-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 14px 0 4px; padding: 11px; border: 1px dashed var(--border); background: transparent; color: var(--text-muted); font-size: 13.5px; font-weight: 700; border-radius: 11px; cursor: pointer; }
.todo-expense-cta:active { background: var(--bg-elev-2); transform: scale(.99); }
.todo-expense-cta svg { flex: 0 0 auto; }

/* Mitglieder-Legende unter dem Aufgabenplan-Raster (geteilte Seiten) */
.habit-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 16px calc(env(safe-area-inset-bottom,0px) + 14px); }
.habit-legend-title { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.habit-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.habit-legend-dot { width: 14px; height: 14px; border-radius: 5px; flex: 0 0 auto; }

/* Legenden-Zähler (Markierungen pro Person/Monat) */
.habit-legend-count { font-weight: 800; color: var(--text); }

/* ===== Dashboard-Editor (Zwei-Zonen, Karten, progressive Konfiguration) ===== */
.dashed-mode { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 14px; }
.dashed-mode-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dashed-mode-label { font-size: 14.5px; font-weight: 700; color: var(--text); }
.dashed-mode-hint { font-size: 12px; color: var(--text-muted); }
.dashed-live { font-size: 12.5px; color: var(--text-muted); margin: 14px 2px 0; }
.dashed-seclabel { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: 16px 2px 8px; }
.dashed-seclabel span { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .8; }
.dashed-list { display: flex; flex-direction: column; gap: 9px; }
.dashed-card { border: 1px solid var(--border); background: var(--bg-elev-2); border-radius: 14px; overflow: hidden; }
.dashed-card.dragging { opacity: .35; box-shadow: none; }
.dashed-card.expanded { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.dashed-head { display: flex; align-items: center; gap: 10px; padding: 11px 12px; }
.dashed-head[role="button"] { cursor: pointer; }
.dashed-handle { flex: 0 0 auto; color: var(--text-muted); cursor: grab; touch-action: none; display: inline-flex; }
.dashed-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; }
.dashed-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dashed-label { font-size: 15px; font-weight: 700; color: var(--text); }
.dashed-sum { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashed-chev { flex: 0 0 auto; color: var(--text-muted); transition: transform .18s; }
.dashed-chev.up { transform: rotate(180deg); }
.dashed-remove { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dashed-remove:active { background: var(--bg-elev); color: var(--danger); }
.dashed-add { flex: 0 0 auto; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: 13px; font-weight: 700; border-radius: 999px; padding: 7px 13px; cursor: pointer; white-space: nowrap; }
.dashed-add:active { transform: scale(.97); }
.dashed-avail .dashed-card { opacity: .9; }
.dashed-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); }
.dashed-body .dash-cfg-opt { margin: 0; }
.dashed-empty { font-size: 13px; color: var(--text-muted); font-style: italic; padding: 16px; text-align: center; border: 1px dashed var(--border); border-radius: 12px; }
.dashed-reset { display: block; width: 100%; margin: 20px 0 4px; padding: 11px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 13.5px; font-weight: 700; border-radius: 12px; cursor: pointer; }
.dashed-reset:active { background: var(--bg-elev-2); }

/* Übersicht-Banner (Begrüßung + Mini-Kennzahlen) */
.dash-hero-greet { display: block; position: relative; z-index: 1; font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.dash-hero-mini { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; position: relative; z-index: 1; }
.dash-hero-ministat { flex: 1 1 calc(33.333% - 6px); min-width: 82px; display: flex; flex-direction: column; gap: 1px; padding: 9px 11px; border-radius: 13px; background: rgba(255,255,255,.16); cursor: pointer; transition: background .15s, transform .15s; }
.dash-hero-ministat b { font-size: 18px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-hero-ministat b.sm { font-size: 13.5px; }
.dash-hero-ministat small { font-size: 11px; font-weight: 600; opacity: .82; }
.dash-hero-ministat:active { background: rgba(255,255,255,.27); transform: scale(.98); }

/* Ausgleich: Schuldner-Meldung „Überwiesen" (pending) + Bestätigen im Verlauf */
.exp-settle-claim { border-color: rgba(245,158,11,.55); background: rgba(245,158,11,.14); color: #f59e0b; }
.exp-hist-row.is-pending { border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.08); }
.exp-hist-tag { font-size: 10.5px; font-weight: 700; color: #f59e0b; background: rgba(245,158,11,.16); border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: middle; white-space: nowrap; }
.exp-hist-confirm { flex: 0 0 auto; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 5px 11px; cursor: pointer; white-space: nowrap; }
.exp-hist-confirm:active { transform: scale(.96); }

/* Pinnwand-Filter im Bonuskarten-Stil (.cards-filter/.cards-fchip); Mitglieder-Chip mit Avatar */
.board-fchiprow { margin-top: 2px; padding-bottom: 8px; }
.board-memrow .board-mem-chip { display: inline-flex; align-items: center; gap: 6px; padding-left: 5px; }
.board-memrow .board-mem-chip .attrib { margin-left: 0; }
.board-memrow .board-mem-chip.on .attrib { box-shadow: 0 0 0 1.5px rgba(255,255,255,.55); }

/* Pinnwand: Kategorien verwalten (Bottom-Sheet) */
.board-cat-overlay { position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; }
.bcat-sheet { width: 100%; max-width: 520px; max-height: 82vh; display: flex; flex-direction: column; background: var(--bg-elev); border-radius: 22px 22px 0 0; padding: 16px 16px calc(env(safe-area-inset-bottom,0px) + 18px); box-shadow: 0 -8px 40px rgba(0,0,0,.4); animation: dashstats-up .26s cubic-bezier(.22,1,.36,1); }
.bcat-head { display: flex; align-items: center; justify-content: space-between; }
.bcat-head h3 { font-size: 18px; font-weight: 800; color: var(--text); }
.bcat-hint { font-size: 12.5px; color: var(--text-muted); margin: 2px 0 12px; line-height: 1.4; }
.bcat-list { overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 8px; }
.bcat-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); background: var(--bg-elev-2); border-radius: 12px; }
.bcat-name { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcat-count { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--bg-elev); border-radius: 999px; padding: 2px 9px; }
.bcat-act { width: 32px; height: 32px; color: var(--text-muted); }
.bcat-act.bcat-del:active { color: var(--danger, #ef4444); }
.bcat-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 22px 12px; line-height: 1.5; }

/* Pinnwand: Kategorie hinzufügen (Manage-Sheet) */
.bcat-add { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-bottom: 12px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 13.5px; font-weight: 700; border-radius: 999px; padding: 8px 15px; cursor: pointer; }
.bcat-add:active { transform: scale(.97); }

/* Bonuskarten: Hinweis zu ablaufenden/dynamischen Codes */
.card-hint-warn { display: block; margin-top: 7px; padding: 8px 11px; border-radius: 10px; background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.28); color: var(--text); line-height: 1.4; }

/* Aufgabenplan: Zuständigkeits-Rotation je Aktivität */
.rl-meta { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.rl-meta .notif-bell-btn { padding: 0; width: 17px; height: 17px; flex: 0 0 auto; }
.row-label { position: relative; }
.row-label-bell { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; }
.rot-badge { display: inline-flex; align-items: center; max-width: 100%; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; line-height: 1.5; }
.rot-badge.done { opacity: .85; }
.habit-sort-rot { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-muted); border-radius: 8px; cursor: pointer; }
.habit-sort-rot.on { color: var(--accent); }
.habit-sort-rot:active { transform: scale(.92); }

/* Rotations-Dialog: aktuelle Person + Überspringen */
.chore-rot-current { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); margin-bottom: 6px; }
.chore-rot-current.hidden { display: none; }
.chore-rot-who { flex: 1; min-width: 0; font-size: 13.5px; }

/* Schnellstart-Vorlagen nach WG-Erstellung (Onboarding-Look) */
.wg-tpl-overlay { position: fixed; inset: 0; z-index: 1400; background: rgba(0,0,0,.62); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 22px; }
.wg-tpl-sheet { max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.wg-tpl-sheet .onb-emoji { font-size: 44px; margin-bottom: 12px; }
.wg-tpl-list { display: flex; flex-direction: column; gap: 9px; margin: 18px 0 8px; text-align: left; }
.wg-tpl-card { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--border); background: var(--bg-elev-2); border-radius: 14px; cursor: pointer; text-align: left; transition: border-color .15s, transform .1s; }
.wg-tpl-card:active { transform: scale(.985); }
.wg-tpl-card:hover { border-color: var(--accent); }
.wg-tpl-emoji { flex: 0 0 auto; font-size: 26px; }
.wg-tpl-cardmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wg-tpl-cardtitle { font-size: 15px; font-weight: 800; color: var(--text); }
.wg-tpl-cardtitle small { font-weight: 600; color: var(--text-muted); font-size: 12px; }
.wg-tpl-carddesc { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.wg-tpl-chev { flex: 0 0 auto; color: var(--text-muted); }
.wg-tpl-skip { width: 100%; margin-top: 4px; }
.wg-tpl-result { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 18px; text-align: left; max-height: 48vh; overflow-y: auto; }
.wg-tpl-resitem { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); background: var(--bg-elev-2); border-radius: 11px; }
.wg-tpl-resck { flex: 0 0 auto; color: #16a34a; font-weight: 800; }
.wg-tpl-reslbl { flex: 1; min-width: 0; font-size: 13px; color: var(--text); line-height: 1.35; }
.wg-tpl-resrm { flex: 0 0 auto; width: 28px; height: 28px; border: none; background: transparent; color: var(--text-muted); border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.wg-tpl-resrm:hover { color: var(--danger, #ef4444); background: var(--bg-elev); }
.wg-tpl-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 16px; }

/* Schnellstart-Vorlage: Inhalts-Aufzählung im Chooser */
.wg-tpl-bullets { text-align: left; font-size: 13px; color: var(--text-muted); margin: 14px 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.wg-tpl-bullets li { line-height: 1.4; }
.wg-tpl-bullets strong { color: var(--text); }

/* Multi-Zuweisungs-Picker: Bestätigungs-Footer */
.assignee-foot { padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 12px); border-top: 1px solid var(--border); }
.assignee-foot .assignee-done { width: 100%; }

/* Inline-Feedback-Formular (Konto-Dialog) */
.feedback-textarea, .feedback-contact { width: 100%; box-sizing: border-box; margin-top: 10px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font: inherit; padding: 11px 13px; }
.feedback-textarea { resize: vertical; min-height: 92px; line-height: 1.45; display: block; }
.feedback-contact { margin-top: 8px; }
.feedback-textarea:focus, .feedback-contact:focus { outline: none; border-color: var(--accent); }
.feedback-send-btn { width: 100%; margin-top: 10px; }
.feedback-status { margin-top: 8px; }
.feedback-status.feedback-ok { color: #16a34a; }
.feedback-status.feedback-err { color: #ef4444; }