:root{
  --bg:#0d1117;
  --bg2:#11161d;
  --surface:#161c24;
  --surface2:#1b222c;
  --border:#232b36;
  --text:#e6edf3;
  --muted:#9aa4b2;
  --accent:#20c997;
  --accent2:#0dcaf0;
  --pain:#ff5d6c;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html,body{ background:var(--bg); color:var(--text); }
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(12px + var(--safe-bottom));
}

/* ---- Topbar ---- */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(10px + var(--safe-top)) 16px 10px;
  background:rgba(13,17,23,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:1.1rem;
  color:var(--text); text-decoration:none; letter-spacing:.2px; }
.brand img{ border-radius:7px; }
.topbar-actions{ display:flex; gap:8px; }
.iconbtn{
  width:38px; height:38px; display:grid; place-items:center;
  background:var(--surface2); color:var(--text); border:1px solid var(--border);
  border-radius:11px; font-size:1.1rem; text-decoration:none; cursor:pointer;
  transition:.15s;
}
.iconbtn:hover{ background:var(--surface); border-color:var(--accent); color:var(--accent); }

/* ---- Tabbar ---- */
.tabbar{
  position:sticky; top:59px; z-index:20;
  display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:10px 12px; background:var(--bg);
  border-bottom:1px solid var(--border); scrollbar-width:none;
}
.tabbar::-webkit-scrollbar{ display:none; }
.tab{
  flex:0 0 auto; display:flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:999px; text-decoration:none;
  color:var(--muted); background:var(--surface); border:1px solid var(--border);
  font-size:.9rem; font-weight:500; white-space:nowrap; transition:.15s;
}
.tab span{ font-size:1rem; }
.tab.active{ color:#04130d; background:var(--accent); border-color:var(--accent); font-weight:700; }
.tab:not(.active):hover{ color:var(--text); border-color:#34404f; }

/* ---- Layout ---- */
.appmain{ max-width:1200px; margin:0 auto; padding:16px; }
h3{ font-weight:700; margin-bottom:4px; }

/* ---- Cards ---- */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; box-shadow:0 1px 0 rgba(255,255,255,.02), 0 8px 24px rgba(0,0,0,.25);
}
.card-header{
  background:transparent; border-bottom:1px solid var(--border);
  font-weight:600; color:var(--text); padding:.8rem 1rem;
}
.card-body{ padding:1rem; }
.card-footer{ background:transparent; border-top:1px solid var(--border); color:var(--muted); }

/* Stat-Kacheln */
.stat{ text-align:center; padding:1rem .5rem; }
.stat .num{ font-size:1.9rem; font-weight:700; line-height:1;
  background:linear-gradient(180deg,#fff,#9aa4b2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .lbl{ color:var(--muted); font-size:.78rem; margin-top:6px; }

/* ---- Tabellen ---- */
.table{ --bs-table-bg:transparent; --bs-table-color:var(--text);
  --bs-table-border-color:var(--border); color:var(--text); margin-bottom:0; }
.table thead th{ color:var(--muted); font-weight:600; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.4px; border-bottom-color:var(--border); }
.table td,.table th{ padding:.55rem .7rem; border-color:var(--border); }
.table-hover tbody tr:hover td{ background:var(--surface2); }
.table-responsive{ border-radius:12px; }
.table-striped>tbody>tr:nth-of-type(odd)>*{ --bs-table-accent-bg:rgba(255,255,255,.02); color:var(--text); }

code{ color:var(--accent2); background:rgba(13,202,240,.08); padding:.1em .35em; border-radius:5px; }

/* ---- Buttons / Badges ---- */
.btn-accent{ background:var(--accent); border:none; color:#04130d; font-weight:600; }
.btn-accent:hover{ filter:brightness(1.08); color:#04130d; }
.btn-outline-primary,.btn-outline-dark{ border-color:var(--border); color:var(--text); }
.btn-outline-primary:hover{ background:var(--accent2); border-color:var(--accent2); color:#04222b; }
.btn-outline-dark:hover{ background:var(--surface2); color:var(--text); }
.badge.bg-secondary{ background:var(--surface2)!important; color:var(--muted); border:1px solid var(--border); }

/* ---- Korrelationen Farben ---- */
.text-danger{ color:var(--pain)!important; }
.text-success{ color:var(--accent)!important; }

/* ---- Accordion (Labor) ---- */
.accordion{ --bs-accordion-bg:var(--surface); --bs-accordion-color:var(--text);
  --bs-accordion-border-color:var(--border);
  --bs-accordion-active-bg:var(--surface2); --bs-accordion-active-color:var(--accent);
  --bs-accordion-btn-color:var(--text); --bs-accordion-btn-focus-box-shadow:none;
  border-radius:12px; overflow:hidden; }

/* ---- Formular / Checkboxen ---- */
.form-check-input{ background-color:var(--surface2); border-color:#3a4554; }
.form-check-input:checked{ background-color:var(--accent); border-color:var(--accent); }

/* Pills für Datenauswahl */
.nav-pills .nav-link{ color:var(--muted); border:1px solid var(--border); margin:0 4px 6px 0; border-radius:999px; }
.nav-pills .nav-link.active{ background:var(--accent); color:#04130d; border-color:var(--accent); }

.text-muted{ color:var(--muted)!important; }

/* ---- Schnell-Eingabe ---- */
.entry-table{ width:100%; border-collapse:collapse; margin-bottom:4px; }
.entry-table th{ color:var(--muted); font-weight:600; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.3px; text-align:center; padding:2px 4px 6px; }
.entry-table td{ padding:3px; text-align:center; }
.entry-table .em-label{ text-align:left; color:var(--text); font-size:.86rem; font-weight:600;
  white-space:nowrap; padding-right:8px; }
.entry-input{ width:100%; min-width:46px; text-align:center; font-size:1.05rem; font-weight:700;
  background:var(--surface2); color:var(--text); border:1px solid var(--border);
  border-radius:9px; padding:.45rem .2rem; }
.entry-input:focus{ outline:none; border-color:var(--accent); }
.entry-input::-webkit-outer-spin-button,.entry-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.entry-input{ -moz-appearance:textfield; }

.em-subhead{ margin:14px 0 4px; font-size:.78rem; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; color:var(--muted); }
.med-toggle{ width:100%; min-width:46px; padding:.45rem .2rem; border-radius:9px; cursor:pointer;
  background:var(--surface2); border:1px solid var(--border);
  font-weight:800; font-size:1rem; color:transparent; transition:.12s; }
.med-toggle:hover{ border-color:#3a4554; }
.med-toggle.on{ background:var(--accent); border-color:var(--accent); color:#04130d; }

.entry-note{ display:flex; flex-direction:column; gap:4px; margin-top:12px; font-size:.82rem; color:var(--muted); }
.entry-textarea{ background:var(--surface2); color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:.5rem; font-size:.9rem; resize:vertical; }
.entry-textarea:focus{ outline:none; border-color:var(--accent); }

/* ---- Charts ---- */
.chart-box{ position:relative; width:100%; height:240px; }
@media (max-width:576px){ .chart-box{ height:260px; } }

/* Zeitraum-Umschalter */
.range-group{ display:flex; gap:6px; margin-bottom:14px; }
.range-group button{
  flex:1 1 auto; padding:8px 0; border-radius:10px; font-size:.85rem; font-weight:600;
  background:var(--surface); color:var(--muted); border:1px solid var(--border); cursor:pointer;
  transition:.15s;
}
.range-group button.active{ background:var(--accent); color:#04130d; border-color:var(--accent); }
.range-group button:not(.active):active{ background:var(--surface2); }

/* ---- Auffällige Laborwerte ---- */
.stat.flagged{ border-color:rgba(255,93,108,.5); box-shadow:0 0 0 1px rgba(255,93,108,.25), 0 8px 24px rgba(0,0,0,.25); }
.stat.flagged .num{ background:linear-gradient(180deg,#ff8a94,#ff5d6c); -webkit-background-clip:text; background-clip:text; color:transparent; }
.card.border-flag{ border-color:rgba(255,93,108,.45); }

.lab-badge{ display:inline-block; margin-left:6px; padding:.05em .5em; border-radius:999px;
  font-size:.7rem; font-weight:700; vertical-align:middle; border:1px solid transparent; }
.lab-hoch        { color:#ff5d6c; } .lab-badge.lab-hoch        { background:rgba(255,93,108,.14); border-color:rgba(255,93,108,.4); color:#ff8a94; }
.lab-niedrig     { color:#0dcaf0; } .lab-badge.lab-niedrig     { background:rgba(13,202,240,.14); border-color:rgba(13,202,240,.4); color:#5fd9f4; }
.lab-grenzwertig { color:#f2b441; } .lab-badge.lab-grenzwertig { background:rgba(242,180,65,.14); border-color:rgba(242,180,65,.4); color:#f2b441; }
.lab-auffällig   { color:#c792ea; } .lab-badge.lab-auffällig   { background:rgba(199,146,234,.14); border-color:rgba(199,146,234,.4); color:#c792ea; }
tr.lab-hoch td:first-child{ box-shadow:inset 3px 0 0 #ff5d6c; }
tr.lab-niedrig td:first-child{ box-shadow:inset 3px 0 0 #0dcaf0; }
tr.lab-grenzwertig td:first-child{ box-shadow:inset 3px 0 0 #f2b441; }
tr.lab-auffällig td:first-child{ box-shadow:inset 3px 0 0 #c792ea; }
tr.lab-hoch td,tr.lab-niedrig td,tr.lab-grenzwertig td,tr.lab-auffällig td{ background:rgba(255,255,255,.025); }

/* Labor-Akkordeon: auffällige Parameter sichtbar machen (ohne Aufklappen) */
.accordion-item.item-hoch        { border-left:3px solid #ff5d6c; }
.accordion-item.item-niedrig     { border-left:3px solid #0dcaf0; }
.accordion-item.item-grenzwertig { border-left:3px solid #f2b441; }
.accordion-item.item-auffällig   { border-left:3px solid #c792ea; }
.lab-name{ font-weight:600; }
.lab-last{ color:var(--muted); font-size:.85rem; }
.accordion-button::after{ margin-left:.5rem; }

.lab-info{ padding:.8rem 1rem; border-bottom:1px solid var(--border); background:var(--surface2);
  font-size:.86rem; line-height:1.5; }
.lab-info > div{ margin-bottom:3px; }
.lab-info .li-kurz{ color:var(--text); font-weight:600; margin-bottom:6px; }
.lab-info .lab-hoch, .lab-info .lab-niedrig{ font-weight:700; }

/* ---- To-dos ---- */
.todo-sec{ font-weight:600; }
.accordion-item.item-done .accordion-button .todo-sec{ color:var(--muted); }
.badge-open{ background:rgba(255,93,108,.16); color:#ff8a94; border:1px solid rgba(255,93,108,.4);
  border-radius:999px; padding:.05em .55em; font-size:.72rem; font-weight:700; }
.badge-done{ background:rgba(32,201,151,.14); color:var(--accent); border:1px solid rgba(32,201,151,.4);
  border-radius:999px; padding:.05em .55em; font-size:.72rem; font-weight:700; }
.todo-li{ display:flex; align-items:flex-start; gap:10px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.todo-li:last-child{ border-bottom:none; }
.todo-cb{ margin-top:3px; flex:0 0 auto; width:1.15em; height:1.15em; }
.todo-text.done{ color:var(--muted); text-decoration:line-through; }
.accordion-body{ padding:.4rem 1rem; }

/* ---- Supplements ---- */
.supp-name{ font-weight:700; font-size:1.05rem; }
.supp-dose{ color:var(--text); font-size:.92rem; margin-top:2px; }
.supp-card.supp-temp{ opacity:.85; }
.supp-badge{ display:inline-block; margin-left:8px; padding:.05em .55em; border-radius:999px;
  font-size:.7rem; font-weight:700; vertical-align:middle; }
.supp-badge.supp-aktiv{ background:rgba(32,201,151,.16); color:var(--accent); border:1px solid rgba(32,201,151,.4); }
.supp-badge.supp-vorübergehend{ background:rgba(242,180,65,.14); color:#f2b441; border:1px solid rgba(242,180,65,.4); }

/* ---- BASDAI ---- */
.basdai-q{ padding:10px 0; border-bottom:1px solid var(--border); }
.basdai-q:last-of-type{ border-bottom:none; }
.basdai-val{ font-weight:800; font-size:1.05rem; color:var(--accent); min-width:1.6em; text-align:center; }
.basdai-slider{ accent-color:var(--accent); }
.basdai-score{ font-size:2rem; font-weight:800; }
.basdai-score.aktiv{ color:var(--pain); }
.basdai-score.ruhig{ color:var(--accent); }

/* ---- Eintragen: Stufen-Buttons ---- */
.day-tabs{ display:flex; gap:6px; margin-bottom:14px; }
.day-tabs button{ flex:1; padding:9px 0; border-radius:10px; font-weight:600; font-size:.9rem;
  background:var(--surface); color:var(--muted); border:1px solid var(--border); cursor:pointer; }
.day-tabs button.active{ background:var(--accent); color:#04130d; border-color:var(--accent); }
.rate-row{ padding:10px 0; border-bottom:1px solid var(--border); }
.rate-label{ font-weight:600; margin-bottom:6px; }
.rate-btns{ display:flex; gap:6px; }
.rate-btn{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 2px; border-radius:12px; background:var(--surface2); border:1px solid var(--border);
  color:var(--muted); cursor:pointer; transition:.12s; min-width:0; }
.rate-btn .rate-emoji{ font-size:1.5rem; line-height:1; }
.rate-btn .rate-wort{ font-size:.62rem; text-align:center; line-height:1.1; }
.rate-btn:active{ transform:scale(.96); }
.rate-btn.sel{ background:var(--accent); border-color:var(--accent); color:#04130d; box-shadow:0 0 0 2px rgba(32,201,151,.3); }
.rate-btn.sel .rate-wort{ font-weight:700; }

/* „Bereits erfasst"-Übersicht im Eintragen-Tab */
.recap-box{ background:var(--card2,#161b22); border:1px solid var(--border); border-radius:11px;
  padding:9px 11px; margin-bottom:12px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.recap-head{ width:100%; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted,#9aa4b2); margin-bottom:2px; }
.recap-chip{ font-size:.8rem; background:rgba(255,255,255,.05); border:1px solid var(--border);
  border-radius:999px; padding:3px 9px; }
.recap-chip.recap-med{ background:rgba(32,201,151,.12); border-color:rgba(32,201,151,.35); }
.recap-note{ width:100%; font-size:.8rem; color:var(--muted,#9aa4b2); margin-top:2px; }
.recap-empty{ color:var(--muted,#9aa4b2); font-size:.82rem; justify-content:center; }