/* ============================================================
   happyMi Club — Design Tokens
   Farbe:   dein echtes Logo-Pink, Weiß, Blush, Ink
   Schrift: klare Grotesk (wie dein Instagram-Auftritt),
            das handgeschriebene Logo bleibt alleiniger Blickfang
   ============================================================ */

:root{
  --pink:        #F2769D;
  --pink-700:    #D9527D;
  --pink-soft:   #FDE6EE;
  --blush:       #FFF4F7;
  --navy:        #1C2B4A;
  --ink:         #1C2B4A;
  --ink-soft:    #5C6785;
  --cream:       #FFFFFF;
  --header-grad: linear-gradient(150deg, #FFF9F5 0%, #FDE2DD 30%, #FBD8E1 55%, #EBD6EF 80%, #DDE0F2 100%);

  --font-display: 'Baloo 2', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-script: 'Yellowtail', cursive;
  --font-body: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow-soft: 0 16px 36px -20px rgba(28,43,74,0.25);
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  min-height:100vh;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

/* ---------- Ladebildschirm ---------- */
.splash-screen{
  position:fixed;
  inset:0;
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--cream);
  transition: opacity 0.6s ease;
  opacity:1;
  overflow:hidden;
}
.splash-logo{
  width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  clip-path: circle(0% at 50% 50%);
  animation: splashGrow 2s linear forwards;
}
@keyframes splashGrow{
  from{ clip-path: circle(0% at 50% 50%); }
  to{ clip-path: circle(150% at 50% 50%); }
}
.splash-screen.splash-hide{
  opacity:0;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .splash-logo{ animation:none; clip-path:none; }
}

/* ---------- App shell ---------- */
.app-header{
  position:relative;
  width:100%;
  max-width:720px;
  aspect-ratio: 3 / 1;
  display:flex;
  flex-direction:column;
  align-items:center;
  border-bottom: 1px solid var(--pink-soft);
  overflow:hidden;
}
.brand-logo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.community-pill{
  position:fixed;
  bottom: calc(78px + env(safe-area-inset-bottom));
  left:50%;
  transform: translateX(-50%);
  z-index:6;
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#fff;
  color: var(--pink-700);
  font-family: var(--font-body);
  font-size:0.78rem;
  font-weight:600;
  text-decoration:none;
  padding:9px 16px;
  border-radius:999px;
  box-shadow: var(--shadow-soft);
}
.community-pill-dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--pink);
}

.entry-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-bottom:18px;
}
.entry-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  text-align:left;
  background:#fff;
  border: 1px solid var(--pink-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding:16px;
  cursor:pointer;
  font-family: var(--font-body);
}
.entry-eyebrow{
  font-size:0.68rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color: var(--pink-700);
}
.entry-title{
  font-family: var(--font-display);
  font-weight:700;
  font-size:1rem;
  color: var(--ink);
}
.entry-desc{
  font-size:0.82rem;
  color: var(--ink-soft);
}

.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 4px 0 16px;
}
.chip{
  border:1px solid var(--pink-soft);
  background:#fff;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size:0.8rem;
  font-weight:600;
  padding:7px 14px;
  border-radius:999px;
  cursor:pointer;
}
.chip-active{
  background: var(--pink);
  border-color: var(--pink);
  color:#fff;
}

.start-greeting{
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  color: var(--ink);
  margin: 4px 4px 6px;
}

.start-orientation{
  font-family: var(--font-body);
  font-size:0.92rem;
  color: var(--ink-soft);
  margin: 0 4px 16px;
  line-height:1.55;
}

.journal-list{
  margin:0 0 14px;
  padding-left:20px;
}
.journal-list li{
  color: var(--ink);
  line-height:1.65;
  margin-bottom:6px;
}
.journal-list li::marker{
  color: var(--pink);
}

.meta-row{
  display:flex;
  gap:12px;
}

.highlight-text{
  font-family: var(--font-display);
  font-weight:500;
  font-size:1rem;
  line-height:1.6;
  color: var(--navy);
  background: var(--pink-soft);
  border-radius: var(--radius-md);
  padding:16px 20px;
  margin: 0 0 14px;
  text-align:center;
}

.closing-text{
  font-style: italic;
  color: var(--pink-700);
  text-align:center;
  margin:0;
}

.view{
  width:100%;
  max-width:720px;
  flex:1;
  padding: 20px 20px 120px;
}

.card{
  background:#fff;
  border: 1px solid var(--pink-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 26px 24px;
  margin-bottom:18px;
}

.eyebrow{
  font-family: var(--font-body);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: var(--pink-700);
  margin:0 0 8px;
}

h1,h2,h3{
  font-family: var(--font-display);
  font-weight:700;
  color: var(--ink);
  margin:0 0 10px;
  line-height:1.25;
}
h1{ font-size:1.4rem; }
h2{ font-size:1.15rem; }

p{ line-height:1.65; margin:0 0 14px; color: var(--ink); }
p:last-child{ margin-bottom:0; }

.muted{ color: var(--ink-soft); font-size:0.92rem; }

/* ---------- Tabbar ---------- */
.tabbar{
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:5;
  display:flex;
  justify-content:center;
  gap:2px;
  padding: 10px max(10px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px);
  border-top:1px solid var(--pink-soft);
}
.tab{
  flex:1;
  max-width:110px;
  border:none;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:8px 4px;
  cursor:pointer;
  color: var(--ink-soft);
  font-family: var(--font-body);
}
.tab-dot{
  width:7px; height:7px; border-radius:50%;
  background: transparent;
  transition: background 0.2s ease, transform 0.2s ease;
}
.tab-label{ font-size:0.68rem; letter-spacing:0.02em; text-align:center; }
.tab[aria-current="page"]{ color: var(--pink-700); }
.tab[aria-current="page"] .tab-dot{ background: var(--pink); transform: scale(1.3); }
.tab:focus-visible{ outline:2px solid var(--pink-700); outline-offset:3px; border-radius:8px; }

/* ---------- Elements ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:none;
  border-radius:999px;
  padding:13px 22px;
  font-family: var(--font-body);
  font-size:0.95rem;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary{ background: var(--pink); color:#fff; }
.btn-primary:hover{ transform: translateY(-1px); box-shadow:0 10px 20px -8px rgba(232,64,158,0.5); }
.btn-ghost{ background: var(--pink-soft); color: var(--pink-700); }
.btn-ghost:hover{ transform: translateY(-1px); }

textarea{
  width:100%;
  min-height:72px;
  border-radius: var(--radius-md);
  border:1px solid var(--pink-soft);
  padding:12px 14px;
  font-family: var(--font-body);
  font-size:0.95rem;
  color: var(--ink);
  background: var(--blush);
  resize:vertical;
}
textarea:focus-visible, .btn:focus-visible{ outline:2px solid var(--pink-700); outline-offset:2px; }

.field{ margin-bottom:18px; }
.field-label{
  display:block;
  font-family: var(--font-display);
  font-weight:700;
  font-size:1rem;
  color: var(--ink);
  margin-bottom:6px;
}
.field-question{ margin:0 0 8px; color: var(--ink-soft); font-size:0.92rem; }

.divider{
  border:none;
  border-top:1px solid var(--pink-soft);
  margin:18px 0;
}

.list-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--pink-soft);
}
.list-item:last-child{ border-bottom:none; }
.list-item-title{ font-family: var(--font-display); font-weight:700; font-size:1.02rem; color:var(--ink); margin:0 0 3px; }
.list-item-meta{ font-size:0.82rem; color: var(--ink-soft); }

.saved-note{
  font-size:0.82rem;
  color: var(--pink-700);
  margin-top:10px;
  min-height:1.1em;
}

.history-entry{
  border: 1px solid var(--pink-soft);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.history-entry:last-child{ margin-bottom:0; }
.history-entry summary{
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
}
.history-entry summary::-webkit-details-marker{ display:none; }
.history-entry summary::before{
  content: '›';
  display:inline-block;
  margin-right:8px;
  color: var(--pink-700);
  transition: transform 0.15s ease;
}
.history-entry[open] summary::before{ transform: rotate(90deg); }

.day-block{
  background: var(--blush);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.day-label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--pink-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}

.button-row{
  display:flex;
  gap:10px;
}
.button-row .btn{
  flex:1;
}

.btn-small{
  padding: 8px 14px;
  font-size: 0.82rem;
}

.install-btn{
  position:fixed;
  top:16px;
  right:16px;
  z-index:6;
  border:none;
  background:#fff;
  color: var(--pink-700);
  font-family: var(--font-body);
  font-size:0.82rem;
  font-weight:600;
  padding:10px 16px;
  border-radius:999px;
  box-shadow: var(--shadow-soft);
  cursor:pointer;
}

@media (min-width: 720px){
  .view{ padding-top:26px; }
  .card{ padding: 32px 34px; }
}

/* ---------- Bestätigungsdialog ---------- */
.confirm-overlay{
  position:fixed;
  inset:0;
  background: rgba(28,43,74,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:20;
  padding:24px;
}
.confirm-overlay[hidden]{ display:none; }
.confirm-box{
  background:#fff;
  border-radius: var(--radius-lg);
  padding:26px 24px;
  max-width:380px;
  width:100%;
  box-shadow: 0 24px 48px -12px rgba(28,43,74,0.35);
}
.confirm-message{
  font-family: var(--font-display);
  font-weight:600;
  font-size:1.02rem;
  color: var(--ink);
  line-height:1.5;
  margin:0 0 20px;
  text-align:center;
}
.confirm-actions{
  display:flex;
  gap:10px;
}
.confirm-actions .btn{
  flex:1;
}