:root{

  /* beruhigendes "Therapie"-Theme: mint + hellblau */

  --bgA:#eefbf7;

  --bgB:#eef7ff;

  --card: rgba(255,255,255,.80);

  --card2: rgba(255,255,255,.92);

  --text:#0b2a23;

  --muted:#47665c;

  --line: rgba(11,42,35,.12);



  --accent:#1ea88f;

  --accent2:#2bb9a0;

  --danger:#d93a3a;



  --shadow: 0 18px 42px rgba(5, 24, 20, .10);

  --radius: 18px;

}



*{box-sizing:border-box}

html, body{ height:100% }



body{

  margin:0;

  padding:16px;

  color:var(--text);

  font: 15.5px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial;

  background:

    radial-gradient(1100px 700px at 20% 10%, var(--bgB), transparent 55%),

    radial-gradient(1100px 700px at 90% 20%, var(--bgA), transparent 55%),

    linear-gradient(180deg, #f7fffd, #eefbf7 55%, #f0f7ff);

}



.wrap{max-width:760px;margin:0 auto}



header{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:12px;

  margin-bottom:14px;

}



h1{font-size:20px;margin:0}

.sub{color:var(--muted); font-size:13px; margin-top:4px}



.headerRight{ display:flex; align-items:center; gap:10px; }



.nowChip{

  display:inline-flex; align-items:center; gap:8px;

  padding:8px 10px; border-radius:999px;

  border:1px solid var(--line);

  background: rgba(255,255,255,.60);

  box-shadow: 0 10px 22px rgba(6, 28, 22, .08);

  font-size:13px;

  white-space:nowrap;

}



.dot{

  width:8px;height:8px;border-radius:50%;

  background:var(--accent);

  box-shadow: 0 0 0 3px rgba(30,168,143,.15);

  flex:0 0 auto;

}



.iconBtn{

  border:1px solid var(--line);

  background: rgba(255,255,255,.70);

  color: var(--text);

  border-radius: 12px;

  padding: 9px 10px;

  cursor:pointer;

  box-shadow: 0 10px 20px rgba(6,28,22,.08);

}

.iconBtn:active{ transform: translateY(1px); }

/* Größeres Menü-Icon (nur Header) */
#menuBtn{ font-size:20px; padding:10px 12px; }

/* Persönlicher Header im Formular */
.hero{
  background: linear-gradient(180deg, rgba(30,168,143,.10), rgba(255,255,255,0));
  border:1px solid var(--line);
  border-radius: 18px;
  padding: 12px 12px;
  margin-bottom: 12px;
}
.heroTitle{ font-size:22px; font-weight:800; letter-spacing:-0.02em; }
.heroSub{ margin-top:4px; color:var(--muted); font-size:14px; }

/* Streak (ausgelagert nach unten) */
.streakRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.streakTitle{ font-weight:800; font-size:16px; }
.streakSub{ color:var(--muted); font-size:13px; margin-top:2px; }
.streakValue{ font-size:28px; font-weight:900; padding:6px 10px; border:1px solid var(--line); border-radius:16px; background: rgba(255,255,255,.65); }
.streakHint{ margin-top:10px; color:var(--muted); }

/* Report Modal */
.reportMeta{ color:var(--muted); font-size:13px; margin-bottom:10px; }

/* Report: Zusammenfassung + Schieberegler */
.summaryControls{ margin: 10px 0 8px; }
.summaryRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.summaryLabel{ font-size:14px; font-weight:600; }
.reportSummary{ margin-top:8px; font-size:14px; line-height:1.45; }
.toggleRow{ display:flex; align-items:center; gap:10px; font-size:14px; margin:10px 0 8px; }
.reportSummary{ background: rgba(255,255,255,.70); border:1px solid var(--line); border-radius:16px; padding:12px; }



.card{

  background: var(--card);

  border:1px solid var(--line);

  border-radius:var(--radius);

  box-shadow:var(--shadow);

  padding:14px;

  backdrop-filter: blur(8px);

  margin-bottom:14px;

}



label{display:block; font-size:13px; color:var(--muted); margin:8px 0 6px}



select, input, textarea{

  width:100%;

  background: var(--card2);

  color:var(--text);

  border:1px solid var(--line);

  border-radius:14px;

  padding:10px 11px;

  outline:none;

}

select:focus, input:focus, textarea:focus{

  border-color: rgba(30,168,143,.45);

  box-shadow: 0 0 0 4px rgba(30,168,143,.12);

}



/* Auffällige Haupt-Felder (Zustand & Intensität) */

.primarySelect{

  border-radius:999px;

  border:2px solid rgba(30,168,143,.95);

  background: linear-gradient(180deg, #f6fffb, #e4fbf4);

  font-weight:600;

  padding:11px 14px;

  box-shadow: 0 8px 18px rgba(30,168,143,.18);

}

/* Spezielles Styling für die Auto‑Backup‑Select im Menü.
   Sie soll dezent sein (kein Verlauf), damit sie sich besser in die Menüzeile einfügt. */
#menuAutoBackup{
  /* orientiere dich am generischen select-Stil */
  width:auto;
  background: var(--card2) !important;
  color: var(--text) !important;
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  padding:10px 11px !important;
  min-width:120px !important;
  flex:0 0 auto !important;
}
#menuAutoBackup:focus{
  border-color: rgba(30,168,143,.45) !important;
  box-shadow: 0 0 0 4px rgba(30,168,143,.12) !important;
}



/* Fokuszustand noch etwas klarer */

.primarySelect:focus{

  border-color: rgba(30,168,143,1);

  box-shadow: 0 0 0 4px rgba(30,168,143,.22);

}





/* Fokus für Primary-Select */

.primarySelect:focus{

  border-color: rgba(30,168,143,.9);

  box-shadow: 0 0 0 4px rgba(30,168,143,.18);

}



textarea{min-height:82px; resize:vertical}



.grid2{display:grid; grid-template-columns:1fr; gap:10px}

@media(min-width:720px){ .grid2{grid-template-columns:1fr 1fr} }



.btns{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}



button{

  border:0; border-radius:14px; padding:10px 13px;

  background: linear-gradient(180deg, var(--accent2), var(--accent));

  color:#ffffff; font-weight:800;

  cursor:pointer;

  box-shadow: 0 14px 26px rgba(30,168,143,.18);

}

button.secondary{

  background: rgba(255,255,255,.72);

  color: var(--text);

  border:1px solid var(--line);

  box-shadow: 0 10px 20px rgba(6,28,22,.06);

}

button.danger{

  background: rgba(255,255,255,.75);

  color:var(--danger);

  border:1px solid rgba(217,58,58,.25);

  box-shadow: 0 10px 20px rgba(6,28,22,.06);

}

button:active{ transform: translateY(1px); }



/* Badge (KW, Statistik etc.) */

.badge{

  display:inline-flex; align-items:center; gap:8px;

  padding:6px 10px; border-radius:999px;

  border:1px solid rgba(30,168,143,.25);

  background: linear-gradient(180deg, #f6fffb, #e7faf7);

  font-size:13px; color:var(--text);

  white-space:nowrap;

}

/* -------------------------------------------------------------------
   Menü-Layout-Verbesserungen
   Die Export/Import-Buttons sollen eine saubere Zwei-Spalten-Grid haben.
   Wir überschreiben die Standard-flex-Definition gezielt nur im Menü-Modal. */
.modal .menuGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.modal .menuGrid > button{
  width:100%;
  flex:1 1 auto;
}



.hint{ color:var(--muted); font-size:13px; margin-top:10px }

.small{font-size:13px}

.muted{color:var(--muted)}



.list{margin-top:0}

.hr{height:1px;background:var(--line); margin:12px 0}



.stack{ display:flex; flex-direction:column; gap:10px; }



/* Accordion */

details{

  border:1px solid var(--line);

  border-radius:16px;

  background: rgba(255,255,255,.60);

  overflow:hidden;

}

summary{

  list-style:none;

  cursor:pointer;

  padding:12px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  user-select:none;

}

summary::-webkit-details-marker{ display:none; }



.sumLeft{

  display:flex;

  flex-wrap:wrap;

  gap:8px;

  align-items:center;

  min-width:0;

}

.entryHead{
  flex-direction: column;
  align-items: flex-start;
}

.entryHead .entryWhen{
  margin-left: 2px;
}




.chev{

  flex:0 0 auto;

  width:30px;height:30px;

  display:grid;place-items:center;

  border-radius:12px;

  border:1px solid var(--line);

  background: rgba(255,255,255,.70);

  transition: transform .15s ease;

}

details[open] .chev{ transform: rotate(180deg); }

.chev svg{ width:16px;height:16px; fill: var(--muted); }



.detailsBody{ padding: 0 12px 12px 12px; }

.entryInner{

  margin-top:10px;

  padding:10px;

  border-radius:14px;

  border:1px solid var(--line);

  background: rgba(255,255,255,.65);

}



.rowBetween{

  display:flex; align-items:center; justify-content:space-between; gap:10px;

  flex-wrap:wrap;

  margin-top:10px;

}



/* Toast */

/* Hintergrund weich ausblenden/blurrieren, solange ein Toast sichtbar ist */
.toastBackdrop{
  position: fixed;
  inset: 0;
  z-index: 1090; /* unter dem Toast */
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
  background: rgba(0,0,0,.07);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.toastBackdrop.show{
  opacity: 1;
}

.toast{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:16px 18px;
  border-radius:18px;
  background: rgba(255,255,255,.92);
  border:1px solid var(--line);
  color:var(--text);
  box-shadow: 0 18px 42px rgba(5, 24, 20, .14);
  display:none;
  max-width:min(92vw, 520px);
  text-align:center;
  backdrop-filter: blur(8px);
  z-index:1100;
  font-size: 18px;
  line-height: 1.25;
}

.toast.show{
  display:block;
  animation: toastPop .14s ease-out;
}

@keyframes toastPop{
  from{ transform:translate(-50%,-50%) scale(.98); opacity:0; }
  to{ transform:translate(-50%,-50%) scale(1); opacity:1; }
}



/* Stats / Chart */

.chartWrap{

  margin-top:12px;

  border:1px solid var(--line);

  border-radius:16px;

  background: rgba(255,255,255,.65);

  padding:10px;

}

#statsCanvas{ width:100%; display:block; }

.legend{

  display:flex; gap:8px; flex-wrap:wrap;

  margin-top:10px;

}

.pill{

  font-size:12px;

  color:var(--muted);

  border:1px solid var(--line);

  padding:4px 8px;

  border-radius:999px;

  background: rgba(255,255,255,.70);

}



/* Nachträglicher Eintrag Block */

.retroCard{

  margin-top:12px;

  padding:12px;

  border-radius:16px;

  border:1px solid var(--line);

  background: rgba(255,255,255,.62);

}



/* Vollbreiter Button für Nachträglicher Eintrag */

.retroBtnFull{

  width:100%;

  justify-content:center;

  text-align:center;

  display:flex;

  align-items:center;

  gap:6px;

}



/* Switch */

.switch{

  position:relative;

  width:46px;

  height:28px;

  display:inline-block;

  flex:0 0 auto;

}

.switch input{ opacity:0; width:0; height:0; }

.slider{

  position:absolute; inset:0;

  background: rgba(11,42,35,.12);

  border:1px solid var(--line);

  border-radius:999px;

  transition: .15s ease;

}

.slider:before{

  content:"";

  position:absolute;

  width:22px; height:22px;

  left:3px; top:2px;

  background: rgba(255,255,255,.95);

  border-radius:50%;

  box-shadow: 0 10px 18px rgba(6,28,22,.12);

  transition: .15s ease;

}

.switch input:checked + .slider{

  background: rgba(30,168,143,.35);

  border-color: rgba(30,168,143,.35);

}

.switch input:checked + .slider:before{

  transform: translateX(18px);

}



/* Modal Overlay */

.modalOverlay{

  position:fixed; inset:0;

  background: rgba(6, 22, 18, .22);

  display:none;

  align-items:center;

  justify-content:center;

  padding:18px;

  z-index:1000;

}

.modalOverlay.show{ display:flex; }



.modal{

  width:min(560px, 100%);

  background: rgba(255,255,255,.94);

  border:1px solid var(--line);

  border-radius:20px;

  box-shadow: var(--shadow);

  padding:14px;

  max-height:80vh;

  overflow:auto;

}



/* Kompakt-Modal (z.B. Datenschutz) */

.modal--compact{

  width:min(420px, 94%);

  padding:12px 10px;

}

/* Bestätigungs-Modal (heller + klare OK/Abbrechen Farben) */
.confirmModal{
  background: rgba(255,255,255,.98);
}
.confirmActions{
  display:flex;
  gap:10px;
  margin-top:10px;
}
.confirmActions button{
  flex:1;
  width:100%;
}
button.confirmOk{
  background: linear-gradient(180deg, #ff8f8f, #d93a3a) !important;
  color:#fff !important;
}
button.confirmCancel{
  background: linear-gradient(180deg, #48d0a6, #1ea88f) !important;
  color:#fff !important;
}



.modalTop{

  display:flex; align-items:center; justify-content:space-between; gap:10px;

  margin-bottom:10px;

}

.modal h2{ margin:0; font-size:16px; }



.menuGrid{

  display:flex;

  gap:10px;

  flex-wrap:wrap;

}

.menuGrid > button{ flex:1 1 180px; }



.menuRow{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:14px;

  padding:10px 4px;

}

/* Menü: Untermenü-Views */
.menuView{ display:block; }

/* Menü: Navigationseintrag (z.B. "Optionen") */
.menuNavRow{
  width:100%;
  text-align:left;
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(255,255,255,.70);
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  box-shadow: 0 10px 20px rgba(6,28,22,.06);
}
.menuNavRow:active{ transform: translateY(1px); }
.menuNavText{ flex:1 1 auto; min-width:0; }
.menuNavArrow{
  width:30px;height:30px;
  display:grid;place-items:center;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.70);
  color: var(--muted);
  font-size:20px;
  line-height:1;
  flex:0 0 auto;
}

/* STREAK: sauberer Aufbau (links flexibel, rechts kompakt) */
#streakSection .streakRow{
  display:flex;
  align-items:center;
  justify-content: flex-start; /* <- wichtig: killt das space-between von .streakRow */
  gap: 14px;
}

#streakSection .streakLeft{
  flex: 1 1 auto;
  min-width: 0;
}

#streakSection .streakRight{
  flex: 0 0 150px;            /* statt 25%: kompakt & stabil */
  display:flex;
  flex-direction:column;
  align-items: stretch;        /* Button volle Breite in der Spalte */
  gap: 8px;
}

#streakSection .streakValue{
  text-align:center;
  line-height: 1;
}

#streakSection .streakShareBtn{
  width: 100%;
  max-width: none;            /* nicht zusätzlich begrenzen */
  white-space: nowrap;
}


/* Mobile: rechts etwas breiter, damit es nicht quetscht */
@media (max-width: 420px){
  #streakSection .streakLeft{ flex-basis: 70%; }
  #streakSection .streakRight{ flex-basis: 30%; }
  #streakSection .streakShareBtn{ max-width: 120px; }
}


/* Untermenü-Header (Zurück + Titel) */
.menuSubTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.menuSubTitle{ font-weight:800; color:var(--text); }

/* Link wie Button (z.B. Ko-fi) */
.menuLinkBtn{
  display:block;
  text-decoration:none;
  text-align:center;
  border-radius:14px;
  padding:10px 13px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.72);
  color: var(--text);
  font-weight:800;
  box-shadow: 0 10px 20px rgba(6,28,22,.06);
  margin-top:10px;
}
.menuLinkBtn:active{ transform: translateY(1px); }

/* Rechts im Menü: Intervall + Uhrzeit untereinander */
.menuStack{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  flex:0 0 auto;
}
.menuTime{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}
.menuTime label{
  margin:0 0 4px 0;
  font-size:12px;
  color:var(--muted);
}
.menuTime input{
  width:120px;
  max-width:160px;
}



/* Text-/Label-Spalte im Menü & Datenschutz-Schalter */

.menuRow > div{

  flex:1 1 auto;

  min-width:0;

}



.menuLabel{ font-weight:800; color: var(--text); }

.menuHint{ font-size:12px; color: var(--muted); margin-top:3px; }



/* Privacy text */

.privacyText{

  padding:12px;

  border-radius:16px;

  border:1px solid var(--line);

  background: rgba(255,255,255,.70);

}

.privacyText p{

  margin:0;

  color:var(--muted);

  font-size:13px;

  line-height:1.35;

}



/* (alt) Checkbox-Layout – kann bleiben oder entfernt werden */

.checkRow{

  display:flex;

  align-items:center;

  gap:10px;

  margin-top:12px;

}

.checkLabel{ margin:0; font-size:13px; color: var(--muted); }



/* Kopf der KW-Zeilen */

.weekHeaderLine{

  display:flex;

  align-items:center;

  justify-content:space-between; /* Badge links, Anzahl rechts */

  gap:8px;

}



/* "3 Einträge" schlicht rechts */

.countPill{

  font-size:12px;

  color:var(--muted);

  margin-top:0;

  padding:0;

  border-radius:0;

  background:transparent;

}





/* Statistische & KW-Summaries leicht einfärben */

details > summary{

  background: rgba(255,255,255,.9);

  border-radius:16px;

}

details.stats > summary{

  background: rgba(255,255,255,.9); /* gleich wie die anderen */

}

/* ---------- ACT: Aktive Tage (Wochenübersicht) ---------- */
.actDaysCard{
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(11,42,35,.10);
  padding: 12px 12px;
  box-shadow: 0 10px 26px rgba(11,42,35,.08);
}
.actDaysTop{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.actDaysTitle{
  font-weight: 800;
  color: var(--ink);
}
.actDaysSub{
  margin-top: 3px;
  font-size: 12.5px;
  color: rgba(27,57,49,.72);
}
.actDaysCount{
  font-weight: 900;
  font-size: 18px;
  color: var(--ink);
  background: rgba(231,246,240,.8);
  border: 1px solid rgba(11,42,35,.10);
  padding: 6px 10px;
  border-radius: 14px;
  white-space: nowrap;
}
.actDaysDots{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.actDot{
  height: 12px;
  border-radius: 999px;
  background: rgba(11,42,35,.10);
  border: 1px solid rgba(11,42,35,.08);
}
.actDot.active{
  background: rgba(78,165,130,.85);
  border-color: rgba(78,165,130,.65);
}
.actDot.today{
  outline: 2px solid rgba(11,42,35,.20);
  outline-offset: 2px;
}
.actDaysHint{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(27,57,49,.80);
}


.footerSupport{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 14px 0;
}

.footerSupport img{
  height:36px;
  border:0;
  opacity:.92;
  transition: transform .12s ease, opacity .12s ease;
}
.footerSupport a:hover img{
  transform: scale(1.03);
  opacity:1;
}


.footerSupport{
  font-size: clamp(11px, 1.6vw, 12px);
  opacity: 0.75;
}


/* Mobile */

@media (max-width: 520px){

  body{ padding: 12px; font-size: 15px; }

  h1{ font-size: 18px; }

  .sub{ font-size: 12.5px; }

  .card{ padding: 12px; }

  select, input, textarea{ padding: 10px 11px; }

  textarea{ min-height: 78px; }

  button{ padding: 10px 12px; }

  .nowChip{ font-size:12px; padding:7px 9px; }

}
.ebookBox{
  margin-top: 18px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(0,0,0,0.03);
}

.ebookBox p{
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.downloadBtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-top: 8px;
  border-radius: 12px;
  background: #e9f3ee;
  color: #1f4f3a;
  text-decoration: none;
  font-size: 14px;
  transition: background .15s ease, transform .1s ease;
}

.downloadBtn:hover{
  background: #dff0e7;
  transform: translateY(-1px);
}

/* Print/PDF: Report ohne Popup (kein window.open nötig) */
.printArea{ display:none; }
body.printMode .wrap,
body.printMode .modalOverlay{
  display:none !important;
}
body.printMode .printArea{
  display:block;
  padding: 24px;
}

@media print{
  body{ background: #fff; }
  .wrap, .modalOverlay{ display:none !important; }
  .printArea{ display:block !important; }
}

/* MiniCheck Hinweis im Privacy-Modal (ohne Card-in-Card) */
.helpMiniIntro{
  margin-top: 0;
}

.helpMiniTitle{
  margin: 16px 0 10px;
  font-weight: 800;
  font-size: 1.05em; /* relativ, damit es zur App passt */
}

.helpMiniDl{
  margin: 0;
}

.helpMiniDl dt{
  margin-top: 12px;
  font-weight: 800;
}

.helpMiniDl dd{
  margin: 6px 0 0;
}

.helpMiniOutro{
  margin: 14px 0 0;
}

/* Streak neu: 50/50 Split + ruhiges Layout */
#streakSection .streakSplit{
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 */
  gap: 14px;
  align-items: center;
}

#streakSection .streakLeftBlock{
  min-width: 0;
}

#streakSection .streakDays{
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#streakSection .streakNum{
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

#streakSection .streakDaysLabel{
  font-size: 12px;
  font-weight: 700;
  opacity: .8;
}

#streakSection .streakMsg{
  margin-top: 10px;
}

#streakSection .streakRightBlock{
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
}

#streakSection .shareLabel{
  font-weight: 800;
}

#streakSection .shareBtnWide{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  white-space: nowrap;
}

/* Mobile polish (Streak/Share) */
@media (max-width: 520px){
  #streakSection .shareLabel{
    font-size: .95em;
    opacity: .9;
  }

  #streakSection .streakBadge{
    width: 78px;
    height: 78px;
    border-radius: 20px;
  }

  #streakSection .streakBadgeNum{
    font-size: 36px;
  }

  #streakSection .dayChip{
    height: 36px;
    border-radius: 12px;
  }

  #streakSection .shareBtnWide{
    padding: 11px 12px;
  }
}


#statsHint{
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  min-width: 8ch;      /* genug für "6 Einträge" */
}


#streakSection .streakTop{
  padding-bottom: 6px;
}

#streakSection .streakDays{
  margin-top: 6px;
  display:flex;
  align-items: baseline;
  gap: 10px;
}

#streakSection .streakNum{
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
}

#streakSection .streakLabel{
  font-weight: 800;
  opacity: .85;
}

#streakSection .streakMsg{
  margin-top: 10px;
}

#streakSection .streakShareRow{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
  display:flex;
  flex-direction: column;
  gap: 10px;
}

#streakSection .shareLabel{
  font-weight: 800;
}

#streakSection .shareBtnWide{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
}

/* --- Streak full width layout --- */
#streakSection .streakHeaderRow{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 12px;
}

#streakSection .streakKpi{
  display:flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

#streakSection .streakNum{
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
}

#streakSection .streakLabel{
  font-weight: 800;
  opacity: .85;
}

#streakSection .streakMsg{
  margin-top: 10px;
}

/* --- Week chips (Mo–So) --- */
#streakSection .weekRow{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

#streakSection .dayChip{
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  user-select:none;
}

#streakSection .dayChip.isDone{
  border-color: rgba(0,0,0,.08);
  background: rgba(30, 190, 140, .16);
}

#streakSection .dayChip.isToday{
  box-shadow: 0 0 0 2px rgba(30, 190, 140, .25) inset;
}

/* --- Share row full width --- */
#streakSection .streakShareRow{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
  display:flex;
  flex-direction: column;
  gap: 10px;
}

#streakSection .shareLabel{
  font-weight: 800;
}

#streakSection .shareBtnWide{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
}

/* Mobile polishing */
@media (max-width: 420px){
  #streakSection .streakNum{ font-size: 42px; }
  #streakSection .dayChip{ height: 36px; border-radius: 12px; }
}

/* --- STREAK: Zahl links + Text daneben --- */
#streakSection .streakHeaderRow{
  display:flex;
  align-items:center;
  gap: 14px;
}

#streakSection .streakInfo{
  min-width: 0;
}

#streakSection .streakTitle{
  margin: 0;
}

#streakSection .streakSub{
  margin-top: 4px;
}

/* Festlicher Badge / Schein */
#streakSection .streakBadge{
  flex: 0 0 auto;
  width: 86px;
  height: 86px;
  border-radius: 22px;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;

  /* Glasig + Glow */
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow:
    0 10px 26px rgba(0,0,0,.10),
    0 0 0 6px rgba(30, 190, 140, .10);
}

#streakSection .streakBadgeNum{
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
}

#streakSection .streakBadgeLabel{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  opacity: .8;
  text-transform: uppercase;
  letter-spacing: .04em;
}

#streakSection .streakMsg{
  margin-top: 12px;
}

/* --- Week chips --- */
#streakSection .weekRow{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

#streakSection .dayChip{
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  user-select:none;
}

#streakSection .dayChip.isDone{
  border-color: rgba(0,0,0,.08);
  background: rgba(30, 190, 140, .16);
}

#streakSection .dayChip.isToday{
  box-shadow: 0 0 0 2px rgba(30, 190, 140, .25) inset;
}

/* --- Share row --- */
#streakSection .streakShareRow{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
  display:flex;
  flex-direction: column;
  gap: 10px;
}

#streakSection .shareLabel{
  font-weight: 200;
}

#streakSection .shareBtnWide{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  white-space: nowrap;
}

/* Mobile polish */
@media (max-width: 420px){
  #streakSection .streakBadge{
    width: 78px;
    height: 78px;
    border-radius: 20px;
  }
  #streakSection .streakBadgeNum{ font-size: 36px; }
  #streakSection .dayChip{ height: 36px; }
}

/* Statistik-Zeile: Text soll mobil nicht abgeschnitten wirken */
#statsHint{
  display: inline-block;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

#streakSection .weekRow{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

#streakSection .dayChip{
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  user-select:none;
}

#streakSection .dayChip.isDone{
  background: rgba(30, 190, 140, .16);
  border-color: rgba(0,0,0,.08);
}

#streakSection .dayChip.isToday{
  box-shadow: 0 0 0 2px rgba(30, 190, 140, .25) inset;
}

/* Stats-Hint darf nicht auf 1 Zeichen zusammenschrumpfen */
#statsHint{
  flex: 0 0 auto;
}

.shareLabel{
  font-size: 12px;
  text-align: center;
   /* z.B. 12px, 13px oder 14px */
}


/* --- Streak: Glow-Pulse auf Zahl --- */
.streakBadgeNum.pulse{
  animation: streakPulse 900ms ease-out 1;
}
@keyframes streakPulse{
  0%   { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  40%  { transform: scale(1.10); filter: drop-shadow(0 0 14px rgba(255,255,255,0.75)); }
  100% { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
}

/* --- Streak: Banner (Overlay unten) --- */
.streakBanner{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 14px;
  z-index: 9999;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(20, 28, 45, 0.92);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
  font-size: 14px;
  line-height: 1.25;
}
.streakBanner.show{
  opacity: 1;
  transform: translateY(0);
}
#streakHint{
  text-align: center;
}