/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --peach:      #F5D1B8;
  --pink:       #F5D9D1;
  --gold:       #F0D99D;
  --lavender:   #E8D5F2;
  --blue:       #D1E8F5;
  --bg:         #FAFAF8;
  --app-bg:     linear-gradient(180deg, #FFF8F3 0%, #FAF6F1 42%, #F7F3EE 100%);
  --text:       #2D2D2B;
  --text-sub:   rgba(45,45,43,.66);
  --text-dim:   rgba(45,45,43,.44);
  --accent:     #C4967A;
  --accent2:    #9B7EA8;
  --surface:    #FFFFFF;
  --surface-alt:#FBF6F0;
  --border:     rgba(45,45,43,.08);
  --radius:     20px;
  --radius-sm:  12px;
  --space-page: 16px;
  --shadow:     0 2px 16px rgba(0,0,0,.06);
  --shadow-lg:  0 8px 40px rgba(0,0,0,.1);
  --safe-top:   env(safe-area-inset-top, 0px);
  --safe-bot:   env(safe-area-inset-bottom, 0px);
  /* Theme-aware utility vars */
  --ghost-bg:   rgba(45,45,43,.04);
  --toast-bg:   rgba(45,45,43,.9);
  --topbar-bg:  rgba(250,250,248,.92);
  --nav-bg:     rgba(250,250,248,.95);
  /* Mood card theming */
  --mood-grad-me:      radial-gradient(circle at 18% 16%, rgba(255,255,255,.76), transparent 34%), linear-gradient(135deg, #FDEEE5, #F8D9CB 58%, #F3CDBB);
  --mood-grad-partner: radial-gradient(circle at 18% 16%, rgba(255,255,255,.72), transparent 34%), linear-gradient(135deg, #EFE7F7, #E4DEF6 56%, #D9E8F4);
  --mood-card-text:    rgba(0,0,0,.68);
  --mood-card-sub:     rgba(0,0,0,.56);
}

/* ── Dark Theme ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:         #1C1B19;
  --app-bg:     linear-gradient(180deg, #211F1D 0%, #1C1B19 48%, #181716 100%);
  --surface:    #252320;
  --surface-alt:#2C2926;
  --text:       #EDE9E3;
  --text-sub:   rgba(237,233,227,.68);
  --text-dim:   rgba(237,233,227,.42);
  --border:     rgba(237,233,227,.1);
  --shadow:     0 2px 16px rgba(0,0,0,.45);
  --shadow-lg:  0 8px 40px rgba(0,0,0,.65);
  --accent:     #D4A68A;
  --accent2:    #B090BD;
  --peach:      rgba(245,209,184,.15);
  --pink:       rgba(245,217,209,.12);
  --gold:       rgba(240,217,157,.15);
  --lavender:   rgba(232,213,242,.12);
  --blue:       rgba(209,232,245,.12);
  --ghost-bg:   rgba(237,233,227,.07);
  --toast-bg:   rgba(12,11,10,.95);
  --topbar-bg:  rgba(28,27,25,.94);
  --nav-bg:     rgba(28,27,25,.97);
  --mood-grad-me:      radial-gradient(circle at 18% 16%, rgba(255,255,255,.08), transparent 34%), linear-gradient(135deg, rgba(212,166,138,.28), rgba(196,150,122,.15));
  --mood-grad-partner: radial-gradient(circle at 18% 16%, rgba(255,255,255,.08), transparent 34%), linear-gradient(135deg, rgba(176,144,189,.28), rgba(93,173,226,.12));
  --mood-card-text:    #EDE9E3;
  --mood-card-sub:     rgba(237,233,227,.55);
}

.mood-card-me,
.mood-card-partner {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.64);
  box-shadow: 0 12px 34px rgba(90,58,36,.08);
}
.mood-card-me      { background: var(--mood-grad-me); }
.mood-card-partner { background: var(--mood-grad-partner); }
.mood-bar-fill     { background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(196,150,122,.34)); }
[data-theme="dark"] .mood-bar-fill { background: rgba(255,255,255,.28); }
@keyframes zzzFloat {
  0%, 100% { opacity: 0; transform: translateY(8px); }
  45% { opacity: .85; transform: translateY(-8px); }
}

html, body {
  height: 100%;
  min-height: 100dvh;
  width: 100%;
  background: var(--app-bg, var(--bg));
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  overflow: hidden;
}

body {
  position: relative;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Screens ────────────────────────────────────────────────── */
.screen {
  display: none;
  position: fixed;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 220px),
    var(--app-bg, var(--bg));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  overscroll-behavior-x: none;
  padding-bottom: calc(72px + var(--safe-bot));
  scrollbar-width: none;
}
.screen::-webkit-scrollbar { width: 0; height: 0; display: none; }
.screen.active { display: block; }

/* Screens ohne Bottom-Nav */
.screen.full-screen { padding-bottom: 0; }

/* ── Top Bar ────────────────────────────────────────────────── */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: calc(var(--safe-top) + 12px) 20px 12px;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.top-bar-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.3px;
}
.top-bar-sub {
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 1px;
}
.topbar-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.68);
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 10px rgba(0,0,0,.04);
  -webkit-tap-highlight-color: transparent;
}

/* ── Bottom Nav ─────────────────────────────────────────────── */
#bottomNav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  padding-bottom: var(--safe-bot);
}
.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  transition: color .2s;
  -webkit-tap-highlight-color: transparent;
}
button:focus { outline: none; }
button:focus-visible {
  outline: 2px solid rgba(196,150,122,.42);
  outline-offset: 3px;
}
.nav-btn:focus-visible {
  outline: 2px solid rgba(196,150,122,.58);
  outline-offset: -4px;
  box-shadow: inset 0 0 0 1px rgba(196,150,122,.26);
  border-radius: 14px;
}
.topbar-icon-btn:focus-visible,
[role="button"]:focus-visible,
[data-nara-action]:focus-visible,
[data-nara-nav]:focus-visible {
  outline: 2px solid rgba(196,150,122,.58);
  outline-offset: 3px;
}
.nav-btn.on { color: var(--accent); }
.nav-btn svg { width: 22px; height: 22px; }
.nav-lbl { font-size: 10px; font-weight: 600; letter-spacing: .3px; }

/* Badge auf Deep Sync Nav */
.nav-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 18px);
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  border: 2px solid var(--bg);
  display: none;
}
.nav-badge.show { display: block; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.card + .card { margin-top: 12px; }
.card-soft {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(251,246,240,.9));
  box-shadow: 0 8px 28px rgba(0,0,0,.04);
}
.screen-pad {
  padding: var(--space-page);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.panel-kicker {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.screen-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hero-card {
  background: linear-gradient(135deg, #FDF0E8, #FAE8E0);
  border: none;
  position: relative;
  overflow: hidden;
}
.vibes-prompt-card {
  padding: 24px 20px;
  box-shadow: 0 12px 34px rgba(196,150,122,.12);
}
.vibes-answer-card {
  background:
    radial-gradient(circle at 90% 14%, rgba(232,168,152,.20), transparent 34%),
    linear-gradient(180deg, rgba(253,240,232,.98), rgba(255,255,255,.9));
  border-color: rgba(196,150,122,.24);
}
.vibes-partner-card {
  background:
    radial-gradient(circle at 90% 14%, rgba(155,126,168,.18), transparent 34%),
    linear-gradient(180deg, rgba(240,234,247,.98), rgba(255,255,255,.9));
  border-color: rgba(155,126,168,.24);
}
.vibes-reveal-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
}
.vibes-reveal-card::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -34px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 68%);
  pointer-events: none;
}
.vibes-card-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.vibes-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.vibes-card-avatar {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(245,209,184,.9), rgba(232,213,242,.75));
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-weight: 850;
  box-shadow: 0 10px 22px rgba(196,150,122,.13);
  flex-shrink: 0;
}
.vibes-card-name {
  margin-top: -5px;
  font-size: 12px;
  color: var(--text-sub);
  font-weight: 650;
}
.vibes-partner-card .vibes-card-kicker { color: var(--accent2); }
.vibes-card-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  position: relative;
  z-index: 1;
}
.vibes-received-reaction {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(196,150,122,.18);
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 650;
  position: relative;
  z-index: 1;
}
.vibes-attached-note {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(196,150,122,.18);
  box-shadow: 0 10px 24px rgba(30,28,26,.06);
}
.vibes-attached-note div {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}
.vibes-attached-note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  font-weight: 650;
}
.vibes-partner-actions {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 10px;
}
.vibes-reaction-box {
  display: grid;
  gap: 8px;
}
.vibes-note-btn {
  width: 100%;
  font-size: 13px;
  padding: 12px 14px;
}
.vibes-note-sheet {
  width: min(100%, 440px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
}
.vibes-note-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.vibes-note-sheet h3 {
  margin: 2px 0 0;
  font-size: 20px;
  line-height: 1.2;
  color: var(--text);
}
.vibes-note-sheet p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-sub);
}
.vibes-note-sheet textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-alt);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 13px;
  outline: none;
}
.vibes-note-sheet textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(196,150,122,.14);
}
.vibes-note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.vibes-note-footer span {
  font-size: 12px;
  color: var(--text-sub);
}
.vibes-history-answer em {
  display: block;
  margin-top: 7px;
  font-style: normal;
  font-size: 11px;
  line-height: 1.4;
  color: var(--accent);
  font-weight: 700;
}
.vibes-reveal-moment {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 14px 15px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 10%, rgba(255,255,255,.62), transparent 36%),
    linear-gradient(135deg, rgba(255,246,238,.94), rgba(241,248,239,.86));
  border: 1px solid rgba(109,171,113,.18);
  box-shadow: 0 10px 26px rgba(196,150,122,.08);
}
.vibes-reveal-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #6DAB71;
  background: rgba(255,255,255,.64);
  border: 1px solid rgba(109,171,113,.16);
  font-size: 18px;
  font-weight: 850;
}
.vibes-reveal-copy strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
}
.vibes-reveal-copy span {
  display: block;
  margin-top: 3px;
  color: var(--text-sub);
  font-size: 12px;
  line-height: 1.45;
}
.vibes-question-counter {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(196,150,122,.18);
  color: var(--accent);
  font-size: 12px;
  font-weight: 850;
  box-shadow: 0 8px 20px rgba(196,150,122,.08);
  backdrop-filter: blur(8px);
}
.vibes-history-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 94% 18%, rgba(209,232,245,.24), transparent 32%),
    linear-gradient(135deg, rgba(255,248,242,.98), rgba(246,240,248,.92));
  border-color: rgba(196,150,122,.16);
}
.vibes-history-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--vibe-tone, rgba(196,150,122,.45));
  opacity: .72;
}
.vibes-history-card.vibe-tone-0 {
  --vibe-tone: #D49A82;
  background:
    radial-gradient(circle at 94% 16%, rgba(232,168,152,.18), transparent 34%),
    linear-gradient(135deg, rgba(255,248,242,.98), rgba(253,240,232,.94));
}
.vibes-history-card.vibe-tone-1 {
  --vibe-tone: #9B7EA8;
  background:
    radial-gradient(circle at 92% 14%, rgba(155,126,168,.18), transparent 34%),
    linear-gradient(135deg, rgba(255,248,242,.98), rgba(246,240,248,.94));
}
.vibes-history-card.vibe-tone-2 {
  --vibe-tone: #6DAB71;
  background:
    radial-gradient(circle at 92% 14%, rgba(109,171,113,.15), transparent 34%),
    linear-gradient(135deg, rgba(255,248,242,.98), rgba(241,248,239,.94));
}
.vibes-history-card.vibe-tone-3 {
  --vibe-tone: #7EBFE8;
  background:
    radial-gradient(circle at 92% 14%, rgba(126,191,232,.18), transparent 34%),
    linear-gradient(135deg, rgba(255,248,242,.98), rgba(239,248,252,.94));
}
.vibes-history-card.answered {
  background:
    radial-gradient(circle at 92% 10%, rgba(109,171,113,.12), transparent 33%),
    linear-gradient(135deg, rgba(255,246,238,.98), rgba(241,248,239,.92));
  border-color: rgba(109,171,113,.16);
}
.vibes-history-card.partial {
  opacity: .88;
}
.vibes-history-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 9px;
  padding-left: 2px;
  font-size: 11px;
  color: var(--text-sub);
  position: relative;
  z-index: 1;
}
.vibes-history-prompt {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}
.vibes-history-answers {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}
.vibes-history-answer {
  border-radius: 12px;
  padding: 10px 11px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(196,150,122,.12);
}
.vibes-history-answer.partner {
  background: rgba(246,240,248,.78);
  border-color: rgba(155,126,168,.16);
}
.vibes-history-answer span {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .6px;
  color: var(--accent);
  text-transform: uppercase;
}
.vibes-history-answer.partner span {
  color: var(--accent2);
}
.vibes-history-answer p {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.vibes-archive-box {
  width: 100%;
  min-height: 132px;
  border: 1px solid rgba(196,150,122,.18);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 16% 18%, rgba(240,217,157,.34), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(232,213,242,.28), transparent 35%),
    linear-gradient(135deg, rgba(255,248,242,.98), rgba(247,241,250,.94));
  box-shadow: 0 14px 34px rgba(45,45,43,.06);
  display: grid;
  grid-template-columns: 94px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  text-align: left;
  color: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.vibes-archive-box.is-empty {
  cursor: default;
  grid-template-columns: 94px 1fr;
  opacity: .9;
}
.vibes-archive-box.has-highlights .vibes-archive-visual {
  animation: goodbox-wiggle 5.8s ease-in-out infinite;
}
.vibes-archive-visual {
  width: 86px;
  height: 86px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 35% 22%, rgba(255,255,255,.68), transparent 32%),
    linear-gradient(145deg, #F3C7B9, #CFA48C);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 -12px 18px rgba(116,78,56,.12), 0 12px 22px rgba(196,150,122,.16);
  overflow: hidden;
  position: relative;
}
.vibes-archive-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  inset: 0;
  z-index: 2;
}
.vibes-archive-visual img + .vibes-box-placeholder {
  opacity: 0;
}
.vibes-box-placeholder {
  font-size: 12px;
  line-height: 1.05;
  font-weight: 900;
  text-align: center;
  color: rgba(96,57,40,.66);
  letter-spacing: .2px;
}
.vibes-archive-kicker {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}
.vibes-archive-title {
  font-size: 17px;
  font-weight: 850;
  color: var(--text);
  margin-bottom: 5px;
}
.vibes-archive-sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-sub);
}
.vibes-archive-arrow {
  align-self: end;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.64);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(196,150,122,.14);
}
.vibes-archive-sheet {
  width: min(100%, 520px);
  max-height: min(82vh, 760px);
  overflow: auto;
  background:
    radial-gradient(circle at 12% 0%, rgba(240,217,157,.22), transparent 35%),
    linear-gradient(180deg, var(--surface), var(--surface-alt));
  border-radius: 24px;
  padding: 20px 16px 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
}
.vibes-archive-sheet-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.vibes-archive-sheet-title {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--text);
}
#vibesArchiveList {
  display: grid;
  gap: 14px;
}
.vibes-highlight-strip {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}
.vibes-highlight-card {
  border-radius: 16px;
  padding: 13px 14px;
  border: 1px solid rgba(240,217,157,.34);
  background:
    radial-gradient(circle at 90% 10%, rgba(240,217,157,.30), transparent 38%),
    rgba(255,255,255,.58);
}
.vibes-highlight-label,
.vibes-history-highlight {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(240,217,157,.28);
  color: #8B6835;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .4px;
  margin-bottom: 8px;
}
.vibes-highlight-text {
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  color: var(--text);
}
@keyframes goodbox-wiggle {
  0%, 82%, 100% { transform: rotate(0deg) translateY(0); }
  85% { transform: rotate(-2deg) translateY(-1px); }
  88% { transform: rotate(2deg) translateY(0); }
  91% { transform: rotate(-1deg) translateY(-1px); }
  94% { transform: rotate(1deg) translateY(0); }
}
.vibes-more-btn {
  margin-top: 14px;
  font-size: 13px;
  padding: 12px 14px;
  background: rgba(255,255,255,.58);
  border-color: rgba(196,150,122,.20);
}

/* ── Good Vibes: Nara Quests ─────────────────────────────────── */
.nara-quest-card {
  width: 100%;
  min-height: 158px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 16px;
  border: 1px solid rgba(196,150,122,.18);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 86% 18%, rgba(240,217,157,.28), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(251,246,240,.96));
  box-shadow: var(--shadow);
  text-align: left;
  cursor: pointer;
}
.nara-quest-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.70) 48%, rgba(255,255,255,.18) 100%),
    linear-gradient(0deg, rgba(255,255,255,.08), rgba(255,255,255,.08));
  pointer-events: none;
  z-index: 1;
}
.nara-quest-card .nara-quest-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center 32%;
  opacity: .78;
  filter: saturate(1.04) contrast(1.02);
  z-index: 0;
  pointer-events: none;
}
.nara-quest-copy { min-width: 0; max-width: 74%; position: relative; z-index: 2; }
.nara-quest-kicker {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 6px;
}
.nara-quest-title {
  font-size: 17px;
  font-weight: 850;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 6px;
}
.nara-quest-sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-sub);
}
.nara-quest-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.nara-quest-meta span {
  font-size: 11px;
  font-weight: 750;
  color: var(--accent);
  background: rgba(196,150,122,.11);
  border: 1px solid rgba(196,150,122,.14);
  border-radius: 999px;
  padding: 5px 9px;
}
.nara-quest-sheet {
  width: min(520px, 100%);
  max-height: min(760px, calc(100dvh - 28px));
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 16px;
  box-shadow: var(--shadow-lg);
}
.nara-quest-sheet::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.nara-quest-sheet-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  background: var(--surface-alt);
  margin-bottom: 16px;
  min-height: 142px;
  position: relative;
  overflow: hidden;
}
.nara-quest-sheet-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.68) 54%, rgba(255,255,255,.14) 100%),
    linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,.06));
  z-index: 1;
  pointer-events: none;
}
.nara-quest-sheet-hero > *:not(.nara-quest-sheet-bg) {
  position: relative;
  z-index: 2;
}
.nara-quest-sheet-hero .nara-quest-sheet-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center 32%;
  opacity: .78;
  z-index: 0;
  pointer-events: none;
}
.nara-flame-wrap {
  --flame-size: 58px;
  position: relative;
  width: var(--flame-size);
  height: var(--flame-size);
  flex: 0 0 var(--flame-size);
  display: grid;
  place-items: center;
  margin-left: auto;
  z-index: 2;
}
.nara-flame-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 4px 10px rgba(255,134,42,.34));
}
.nara-flame-glow {
  position: absolute;
  inset: 10%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,184,73,.62), rgba(255,115,74,.22) 48%, transparent 72%);
  filter: blur(10px);
  transform: scale(calc(.85 + var(--flame-level, 1) * .045));
  opacity: calc(.42 + var(--flame-level, 1) * .045);
}
.nara-flame-level {
  position: absolute;
  right: -2px;
  bottom: -2px;
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid rgba(255,172,69,.38);
  color: #B8651E;
  font-size: 10px;
  font-weight: 900;
  z-index: 3;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
.nara-flame-wrap.level-1 { --flame-level: 1; }
.nara-flame-wrap.level-2 { --flame-level: 2; }
.nara-flame-wrap.level-3 { --flame-level: 3; }
.nara-flame-wrap.level-4 { --flame-level: 4; }
.nara-flame-wrap.level-5 { --flame-level: 5; }
.nara-flame-wrap.level-6 { --flame-level: 6; }
.nara-flame-wrap.level-7 { --flame-level: 7; }
.nara-flame-wrap.level-8 { --flame-level: 8; }
.nara-flame-wrap.level-9 { --flame-level: 9; }
.nara-quest-sheet-hero .nara-flame-wrap {
  --flame-size: 62px;
  margin-left: 0;
}
.nara-quest-sheet-title {
  font-size: 19px;
  font-weight: 900;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 6px;
}
.nara-quest-sheet-section { margin-top: 18px; }
.nara-quest-sheet-head {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .5px;
  color: var(--text-sub);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.nara-quest-row,
.nara-quest-done-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 112px;
  padding: 18px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.nara-quest-row::after,
.nara-quest-done-row::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.70) 58%, rgba(255,255,255,.20) 100%),
    linear-gradient(0deg, rgba(255,255,255,.08), rgba(255,255,255,.08));
  z-index: 1;
  pointer-events: none;
}
.nara-quest-done-row { grid-template-columns: 1fr; }
.nara-quest-row .nara-quest-row-bg,
.nara-quest-done-row .nara-quest-row-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  opacity: .76;
  z-index: 0;
  pointer-events: none;
}
.nara-quest-row-copy,
.nara-quest-done-row span,
.nara-quest-mini-btn {
  position: relative;
  z-index: 2;
}
.nara-quest-row strong,
.nara-quest-done-row span {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}
.nara-quest-row small {
  display: block;
  font-size: 11px;
  color: var(--text-sub);
  margin-top: 5px;
}
.nara-quest-mini-btn {
  width: auto;
  min-width: 88px;
  padding: 9px 12px;
  font-size: 12px;
  border-radius: 999px;
}
.nara-quest-waiting {
  position: relative;
  z-index: 2;
  justify-self: end;
  border-radius: 999px;
  padding: 8px 11px;
  border: 1px solid rgba(196,150,122,.18);
  background: rgba(255,255,255,.64);
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 850;
}
.nara-quest-pick-list { display: grid; gap: 10px; }
.nara-quest-pick {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.nara-quest-pick.type-solo {
  border-color: rgba(196,150,122,.28);
  background: linear-gradient(135deg, rgba(196,150,122,.10), var(--surface));
}
.nara-quest-pick.type-together {
  border-color: rgba(111,149,123,.28);
  background: linear-gradient(135deg, rgba(111,149,123,.10), var(--surface));
}
.nara-quest-pick.type-wish {
  border-color: rgba(155,126,168,.30);
  background: linear-gradient(135deg, rgba(155,126,168,.11), var(--surface));
}
.nara-quest-pick span {
  display: block;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}
.nara-quest-pick small {
  display: block;
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  margin-top: 6px;
}
.nara-quest-type-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}
.nara-quest-type-badge.type-solo {
  color: #9B6846;
  background: rgba(196,150,122,.14);
  border-color: rgba(196,150,122,.24);
}
.nara-quest-type-badge.type-together {
  color: #4F7C61;
  background: rgba(111,149,123,.14);
  border-color: rgba(111,149,123,.24);
}
.nara-quest-type-badge.type-wish {
  color: #7C5A8E;
  background: rgba(155,126,168,.14);
  border-color: rgba(155,126,168,.24);
}
.nara-quest-from-you {
  color: var(--text-sub);
}
.nara-custom-quest {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.nara-custom-quest-input {
  min-height: 78px;
  resize: none;
  font-size: 13px;
  line-height: 1.45;
}
.nara-custom-quest-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.nara-custom-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nara-custom-type {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-sub);
  border-radius: 999px;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.nara-custom-type.on {
  color: var(--accent);
  border-color: rgba(196,150,122,.34);
  background: rgba(196,150,122,.11);
}
.nara-custom-type[data-type="together"].on {
  color: #4F7C61;
  border-color: rgba(111,149,123,.34);
  background: rgba(111,149,123,.12);
}
.nara-custom-type[data-type="wish"].on {
  color: #7C5A8E;
  border-color: rgba(155,126,168,.36);
  background: rgba(155,126,168,.12);
}
#naraCustomQuestCount {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.nara-custom-save {
  margin-top: 2px;
  font-size: 13px;
  padding: 12px 14px;
}
.nara-quest-empty {
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  color: var(--text-sub);
  font-size: 13px;
  line-height: 1.45;
}
[data-theme="dark"] .nara-quest-card {
  background:
    radial-gradient(circle at 86% 18%, rgba(212,166,138,.18), transparent 34%),
    linear-gradient(135deg, rgba(44,41,38,.98), rgba(37,35,32,.98));
  border-color: rgba(237,233,227,.1);
}
[data-theme="dark"] .nara-quest-card::after {
  background:
    linear-gradient(90deg, rgba(37,35,32,.92) 0%, rgba(37,35,32,.72) 52%, rgba(37,35,32,.26) 100%),
    linear-gradient(0deg, rgba(37,35,32,.10), rgba(37,35,32,.10));
}
[data-theme="dark"] .nara-quest-sheet-hero::after,
[data-theme="dark"] .nara-quest-row::after,
[data-theme="dark"] .nara-quest-done-row::after {
  background:
    linear-gradient(90deg, rgba(37,35,32,.92) 0%, rgba(37,35,32,.74) 58%, rgba(37,35,32,.28) 100%),
    linear-gradient(0deg, rgba(37,35,32,.10), rgba(37,35,32,.10));
}
@media (max-width: 380px) {
  .nara-quest-copy { max-width: 78%; }
  .nara-quest-sheet-hero { min-height: 132px; }
  .nara-quest-row { grid-template-columns: 1fr; }
  .nara-quest-mini-btn { grid-column: 1 / -1; width: 100%; }
}
.portrait-widget-card {
  background:
    radial-gradient(circle at 16% 6%, rgba(245,209,184,.30), transparent 35%),
    radial-gradient(circle at 90% 18%, rgba(232,213,242,.30), transparent 34%),
    linear-gradient(180deg, rgba(255,252,248,.98), rgba(250,246,241,.94));
  border-color: rgba(196,150,122,.16);
}
.premium-locked .top-bar,
.premium-locked .screen-pad {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
}
.nara-locked-preview {
  position: relative;
  overflow: hidden;
}
.nara-locked-preview > * {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
}
.nara-locked-preview::after {
  content: attr(data-lock-text);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  text-align: center;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(3px);
  z-index: 3;
}
.nara-locked-preview::before {
  content: "🔒";
  position: absolute;
  left: 50%;
  top: calc(50% - 42px);
  transform: translateX(-50%);
  z-index: 4;
  font-size: 20px;
}
.fortune-home-card {
  position: relative;
  min-height: 132px;
  border-radius: var(--radius);
  border: 1px solid rgba(196,150,122,.18);
  padding: 22px 20px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(196,150,122,.10);
  background:
    linear-gradient(90deg, rgba(255,245,238,.96) 0%, rgba(255,245,238,.88) 52%, rgba(255,245,238,.48) 100%),
    linear-gradient(135deg, #FDF0E8, #FAE8E0);
}
.fortune-home-card.locked { min-height: 124px; }
.fortune-home-bg {
  position: absolute;
  right: -20px;
  bottom: -34px;
  width: 190px;
  height: auto;
  opacity: .32;
  pointer-events: none;
  user-select: none;
}
.fortune-home-content {
  position: relative;
  z-index: 1;
  max-width: 245px;
}
.fortune-home-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 8px;
}
.fortune-home-status {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.45;
}
.calendar-card {
  padding: 16px;
  overflow: hidden;
}
.calendar-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.calendar-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.calendar-icon-btn,
.calendar-add-btn {
  border: 0;
  cursor: pointer;
  font-weight: 800;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.calendar-icon-btn {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(196,150,122,.12);
  color: var(--accent);
  font-size: 15px;
}
.calendar-add-btn {
  background: var(--accent);
  border-radius: 100px;
  padding: 7px 12px;
  font-size: 12px;
  color: #fff;
}
.calendar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.calendar-row:last-child { border-bottom: none; }
.calendar-past-btn {
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(196,150,122,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.54);
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.past-event-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.past-event-row small {
  display: block;
  margin-top: 4px;
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 500;
}
.calendar-month-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 86vh;
  overflow: auto;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  padding: 24px 20px 44px;
}
.calendar-month-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.calendar-month-title {
  color: var(--text);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: capitalize;
}
.calendar-month-nav {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--ghost-bg);
  color: var(--text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.calendar-week-row,
.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.calendar-week-row {
  margin-bottom: 7px;
}
.calendar-week-row span {
  color: var(--text-sub);
  font-size: 10px;
  font-weight: 850;
  text-align: center;
}
.calendar-month-empty {
  min-height: 43px;
}
.calendar-month-day {
  min-height: 43px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--ghost-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  position: relative;
  cursor: pointer;
}
.calendar-month-day.today {
  border-color: rgba(196,150,122,.54);
  box-shadow: inset 0 0 0 1px rgba(196,150,122,.18);
}
.calendar-month-day.has-events {
  background: linear-gradient(135deg, rgba(245,209,184,.35), rgba(232,213,242,.22));
}
.calendar-month-day small {
  position: absolute;
  right: 5px;
  bottom: 5px;
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}
.calendar-month-legend {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  color: var(--text-sub);
  font-size: 11px;
  line-height: 1.35;
}
.calendar-month-legend span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.calendar-month-legend i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}
[data-theme="dark"] .calendar-icon-btn {
  background: rgba(196,150,122,.18);
}
[data-theme="dark"] .calendar-month-day.has-events {
  background: linear-gradient(135deg, rgba(196,150,122,.20), rgba(142,112,163,.16));
}
.hero-card.cool {
  background: linear-gradient(135deg, rgba(232,213,242,.38), rgba(209,232,245,.28));
}
.soft-card {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(251,246,240,.9));
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
[data-theme="dark"] .card,
[data-theme="dark"] .soft-card {
  border-color: var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface-alt));
}
.soft-card.waiting {
  text-align: center;
  color: var(--text-sub);
  padding: 24px 20px;
}
.portrait-hero {
  text-align: center;
  padding: 10px 4px 4px;
}
.portrait-hero img {
  width: min(150px, 42vw);
  height: auto;
  margin-bottom: 12px;
  pointer-events: none;
}
.portrait-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 6px;
}
.portrait-sub {
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.6;
  max-width: 320px;
  margin: 0 auto;
}
.portrait-chart-card {
  padding: 24px 12px 18px;
  overflow: hidden;
}
.portrait-pattern-card {
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(196,150,122,.18);
  background:
    radial-gradient(circle at 16% 0%, rgba(245,209,184,.36), transparent 38%),
    linear-gradient(135deg, rgba(255,251,247,.96), rgba(247,239,249,.88));
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}
.portrait-pattern-main {
  margin-top: 9px;
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
}
.portrait-pattern-sub {
  margin-top: 8px;
  color: var(--text-sub);
  font-size: 13px;
  line-height: 1.55;
}
[data-theme="dark"] .portrait-pattern-card {
  background: linear-gradient(135deg, rgba(42,34,28,.82), rgba(34,28,42,.72));
  border-color: var(--border);
}
.portrait-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.portrait-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.portrait-line {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}
.portrait-line.partner {
  background: none;
  border-top: 3px dashed #6F5590;
  border-radius: 0;
}
.dimension-row {
  margin-bottom: 16px;
}
.dimension-row:last-child {
  margin-bottom: 0;
}
.dimension-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 7px;
}
.dim-dual-track {
  height: 5px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 4px;
}
.dim-dual-bar {
  height: 100%;
  border-radius: inherit;
  transition: width .8s cubic-bezier(.34,1.4,.64,1);
}
.dim-bar-a {
  background: linear-gradient(90deg,#F0C4B0,#C4967A);
}
.dim-bar-b {
  background: linear-gradient(90deg,#B09AC0,#6F5590);
}
.dim-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 18px;
}
.dim-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
@keyframes radar-breathe-a {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}
@keyframes radar-breathe-b {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(.96); }
}
.radar-poly-a {
  transform-box: fill-box;
  transform-origin: center center;
  animation: radar-breathe-a 4.5s ease-in-out infinite;
}
.radar-poly-b {
  transform-box: fill-box;
  transform-origin: center center;
  animation: radar-breathe-b 6s ease-in-out infinite;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-sub);
  white-space: nowrap;
}
.status-pill.warm {
  color: var(--accent);
  border-color: rgba(196,150,122,.22);
  background: rgba(196,150,122,.08);
}
.status-pill.success {
  color: #16a34a;
  border-color: rgba(34,197,94,.22);
  background: rgba(34,197,94,.08);
}
.status-pill.warning {
  color: #d97706;
  border-color: rgba(245,158,11,.22);
  background: rgba(245,158,11,.08);
}
.inline-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-dim);
}
.ghost-divider {
  height: 1px;
  background: var(--border);
  margin: 14px 0 0;
}
.reaction-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.reaction-btn {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: 18px;
  transition: all .2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.reaction-btn.on {
  border-color: var(--accent);
  background: rgba(196,150,122,.16);
  box-shadow: 0 8px 20px rgba(196,150,122,.16);
  transform: translateY(-1px);
}
.sync-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sync-card {
  position: relative;
  overflow: hidden;
  cursor: default;
  background:
    radial-gradient(circle at 94% 12%, rgba(155,126,168,.13), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,246,240,.92));
  border-color: rgba(196,150,122,.14);
}
.sync-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--sync-tone, rgba(196,150,122,.42));
  opacity: .75;
}
.sync-card.clickable {
  cursor: pointer;
}
.sync-tone-open {
  --sync-tone: #D49A82;
  background:
    radial-gradient(circle at 94% 12%, rgba(212,154,130,.17), transparent 36%),
    linear-gradient(135deg, rgba(255,248,242,.98), rgba(253,240,232,.92));
}
.sync-tone-review {
  --sync-tone: #E0AE4F;
  background:
    radial-gradient(circle at 94% 12%, rgba(224,174,79,.17), transparent 36%),
    linear-gradient(135deg, rgba(255,250,237,.98), rgba(255,248,242,.92));
}
.sync-tone-followup {
  --sync-tone: #9B7EA8;
  background:
    radial-gradient(circle at 94% 12%, rgba(155,126,168,.18), transparent 36%),
    linear-gradient(135deg, rgba(255,248,242,.98), rgba(246,240,248,.92));
}
.sync-tone-cooldown {
  --sync-tone: #7EBFE8;
  background:
    radial-gradient(circle at 94% 12%, rgba(126,191,232,.18), transparent 36%),
    linear-gradient(135deg, rgba(255,248,242,.98), rgba(239,248,252,.92));
}
.sync-tone-complete {
  --sync-tone: #6DAB71;
}
.sync-complete-card {
  background:
    radial-gradient(circle at 92% 12%, rgba(109,171,113,.14), transparent 34%),
    linear-gradient(135deg, rgba(255,248,242,.98), rgba(242,248,239,.94));
  border-color: rgba(109,171,113,.18);
}
.sync-card-illus {
  position: absolute;
  right: -14px;
  bottom: -18px;
  width: 132px;
  height: auto;
  opacity: .50;
  pointer-events: none;
  user-select: none;
  filter: saturate(1.08) contrast(1.02);
}
.sync-card-title {
  position: relative;
  z-index: 1;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.4;
  padding-right: 72px;
}
.sync-card-subtitle {
  position: relative;
  z-index: 1;
  margin-top: 5px;
  padding-right: 82px;
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}
.sync-card-date {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-dim);
}
.sync-quiet-card {
  min-height: 176px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, rgba(255,248,242,.70), rgba(246,240,248,.56));
  backdrop-filter: blur(8px);
}
.sync-quiet-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.58) 42%, rgba(255,255,255,.14) 100%),
    linear-gradient(180deg, rgba(255,248,242,.12), rgba(255,248,242,.34));
  pointer-events: none;
  z-index: 0;
}
.sync-quiet-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .86;
  filter: saturate(1.03) contrast(1.01);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.sync-quiet-copy {
  position: relative;
  max-width: 240px;
  z-index: 1;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.64);
  box-shadow: 0 12px 26px rgba(196,150,122,.08);
}
.sync-quiet-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.sync-quiet-steps span,
.sync-start-ritual span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(196,150,122,.14);
  color: var(--text-sub);
  font-size: 11px;
  font-weight: 750;
}
.sync-start-ritual {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0 22px;
}
.sync-phase-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 18px;
}
.sync-phase {
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.54);
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}
.sync-phase span {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ghost-bg);
  color: inherit;
  font-size: 10px;
}
.sync-phase.on {
  color: #7B5A4B;
  border-color: rgba(196,150,122,.28);
  background: linear-gradient(135deg, rgba(255,238,226,.86), rgba(246,240,248,.72));
}
[data-theme="dark"] .sync-phase {
  background: rgba(255,255,255,.04);
}
[data-theme="dark"] .sync-phase.on {
  color: #F1D0BE;
  background: linear-gradient(135deg, rgba(212,166,138,.18), rgba(176,144,189,.14));
}
.sync-prep-card {
  margin: 0 0 16px;
  padding: 15px;
  border-radius: 18px;
  border: 1px solid rgba(196,150,122,.15);
  background: linear-gradient(135deg, rgba(255,248,242,.88), rgba(246,240,248,.72));
}
.sync-prep-title {
  font-size: 14px;
  font-weight: 850;
  color: var(--text);
  margin-bottom: 4px;
}
.sync-prep-copy {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-sub);
  margin-bottom: 12px;
}
.sync-prep-group + .sync-prep-group {
  margin-top: 12px;
}
.sync-prep-label {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .7px;
  color: var(--text-sub);
  text-transform: uppercase;
  margin-bottom: 7px;
}
.sync-question-shell {
  padding: 18px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(232,213,242,.18), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(251,246,240,.56));
  border: 1px solid rgba(196,150,122,.12);
  box-shadow: 0 10px 28px rgba(196,150,122,.06);
}
.sync-calm-note {
  margin: -10px 0 18px;
  color: var(--text-sub);
  font-size: 12px;
  line-height: 1.45;
}
.mood-panel {
  border-radius: var(--radius);
  padding: 18px 16px 16px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.18);
}
.mood-card-me.mood-panel,
.mood-card-partner.mood-panel {
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}
.mood-sync-teaser {
  width: 100%;
  min-height: 132px;
  margin: 14px 0 12px;
  padding: 18px;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(135deg, #f5f0e8, #eaf4df);
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
}
.mood-sync-teaser::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.70) 48%, rgba(255,255,255,.20) 100%);
  pointer-events: none;
}
.mood-sync-teaser-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .62;
}
.mood-sync-teaser-copy,
.mood-sync-teaser-cta {
  position: relative;
  z-index: 1;
}
.mood-sync-teaser-kicker {
  color: #9b7d5e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.4px;
  margin-bottom: 5px;
}
.mood-sync-teaser-title {
  max-width: 230px;
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 8px;
}
.mood-sync-teaser-sub {
  max-width: 220px;
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  margin-bottom: 14px;
}
.mood-sync-teaser-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(196,150,122,.92);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}
[data-theme="dark"] .mood-sync-teaser {
  background: linear-gradient(135deg, #201a16, #20261d);
}
[data-theme="dark"] .mood-sync-teaser::after {
  background: linear-gradient(90deg, rgba(24,21,19,.92) 0%, rgba(24,21,19,.72) 52%, rgba(24,21,19,.22) 100%);
}
[data-theme="dark"] .mood-sync-teaser-bg {
  opacity: .48;
}
.mood-meta-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.mood-meta-item {
  font-size: 12px;
  color: var(--mood-card-sub);
}
.nara-inline-icon {
  width: 15px;
  height: 15px;
  object-fit: contain;
  vertical-align: -3px;
  opacity: .82;
  filter: saturate(.9) contrast(.96);
}
.nara-inline-icon.energy {
  width: 18px;
  height: 18px;
  border-radius: 5px;
}
.mood-form-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-sub);
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.mood-energy-option {
  flex: 1;
  min-width: 0;
  padding: 8px 4px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--ghost-bg);
  color: var(--text-sub);
  display: grid;
  place-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all .15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mood-energy-option img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 6px;
  filter: saturate(.94) contrast(.96);
}
.mood-energy-option span {
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
}
.mood-energy-option.selected {
  background: rgba(196,150,122,.16);
  border-color: rgba(196,150,122,.26);
  color: var(--text);
  box-shadow: 0 8px 18px rgba(196,150,122,.12);
}
.mood-goal-chip {
  border: 0;
  background: rgba(255,255,255,.28);
  color: var(--mood-card-text);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  max-width: 122px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sleep-zz {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 800;
  color: var(--mood-card-sub);
  letter-spacing: .2px;
}
.sleep-zz span {
  display: inline-block;
  animation: zzzFloat 2.6s ease-in-out infinite;
}
.sleep-zz span:nth-child(2) { animation-delay: .28s; font-size: .9em; opacity: .82; }
.sleep-zz span:nth-child(3) { animation-delay: .56s; font-size: .8em; opacity: .68; }
.mood-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.mood-actions .btn {
  padding: 11px 14px;
  font-size: 12px;
}
.mood-empty {
  background: linear-gradient(180deg, var(--surface), var(--surface-alt));
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 22px 16px;
  box-shadow: var(--shadow);
  text-align: center;
  color: var(--text-sub);
  line-height: 1.6;
  font-size: 14px;
}
.mood-editor {
  background: linear-gradient(180deg, var(--surface), var(--surface-alt));
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 18px 16px;
  box-shadow: var(--shadow);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: block;
  width: 100%;
  padding: 15px 20px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .7px;
  transition: opacity .2s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:active { transform: scale(.98); }
.btn-primary {
  background: linear-gradient(135deg, #E8A898, #C4967A);
  color: #fff;
  box-shadow: 0 4px 20px rgba(196,150,122,.3);
}
.btn-secondary {
  background: transparent;
  border: 1.5px solid rgba(196,150,122,.4);
  color: var(--accent);
}
.btn-ghost {
  background: var(--ghost-bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Inputs ─────────────────────────────────────────────────── */
.input {
  width: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 220px),
    var(--app-bg, var(--bg));
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 16px;
  color: var(--text);
  outline: none;
  transition: border-color .2s;
}
.input:focus { border-color: rgba(196,150,122,.6); }
textarea.input { resize: none; min-height: 100px; line-height: 1.6; }
[data-nara-sheet] input,
[data-nara-sheet] textarea,
[data-nara-sheet] select {
  font-size: 16px;
}

/* ── Chips ───────────────────────────────────────────────────── */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 8px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.chip.selected {
  background: linear-gradient(135deg, #E8A898, #C4967A);
  border-color: transparent;
  color: #fff;
}

/* ── Emoji Picker ─────────────────────────────────────────────── */
.emoji-row { display: flex; gap: 12px; justify-content: center; }
.emoji-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  font-size: 24px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  -webkit-tap-highlight-color: transparent;
}
.emoji-btn.selected {
  border-color: var(--accent);
  background: rgba(196,150,122,.1);
  transform: scale(1.15);
}

/* ── Slider ──────────────────────────────────────────────────── */
.slider-wrap { position: relative; }
input[type=range] {
  width: 100%;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E8A898, #C4967A);
  box-shadow: 0 2px 8px rgba(196,150,122,.4);
  cursor: pointer;
}

/* ── Section Header ──────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: .9px;
  text-transform: uppercase;
}
.section-link {
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}

/* ── Avatar ──────────────────────────────────────────────────── */
.avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--peach), var(--pink));
  background-size: cover;
  background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}
.avatar-lg {
  width: 64px; height: 64px;
  font-size: 26px;
}

/* ── Tag / Badge ─────────────────────────────────────────────── */
.tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
}
.tag-vibes { background: rgba(240,217,157,.3); color: #9B7840; }
.tag-sync  { background: rgba(232,213,242,.5); color: #7B5A9A; }
.tag-free  { background: rgba(45,45,43,.06); color: var(--text-sub); }

/* ── Divider ─────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

/* ── Empty State ─────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-sub);
}
.empty-state-icon { font-size: 40px; margin-bottom: 12px; }
.empty-state-text { font-size: 15px; line-height: 1.6; }

/* ── Animations ──────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.anim-fade-up { animation: fadeUp .35s ease both; }

/* ── Toast ───────────────────────────────────────────────────── */
#toastContainer {
  position: fixed;
  bottom: calc(80px + var(--safe-bot));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--toast-bg);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  animation: toastIn .3s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Loading Spinner ─────────────────────────────────────────── */
.spinner {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2.5px solid rgba(196,150,122,.2);
  border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}

/* ── Floating Leaves ─────────────────────────────────────────── */
@keyframes leaf-drift {
  0%   { transform: translateY(-40px) rotate(0deg)   translateX(0px);   opacity: 0; }
  8%   { opacity: 0.55; }
  88%  { opacity: 0.35; }
  100% { transform: translateY(105vh) rotate(540deg) translateX(30px);  opacity: 0; }
}
.leaf-particle {
  position: fixed;
  pointer-events: none;
  user-select: none;
  font-size: 16px;
  opacity: 0;
  animation: leaf-drift linear infinite;
  z-index: 1;
}
[data-theme="dark"] .leaf-particle { filter: brightness(.65) hue-rotate(10deg); }

/* ── Onboarding specific ─────────────────────────────────────── */
#screenOnboard {
  padding-bottom: 0;
}

/* ── Profil Zeilen ───────────────────────────────────────────── */
.profile-pair-head {
  margin: 8px 0 14px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 14% 0%, rgba(245,209,184,.34), transparent 42%),
    linear-gradient(135deg, rgba(255,248,244,.92), rgba(248,240,248,.72));
  border: 1px solid rgba(196,150,122,.14);
}
.profile-pair-names {
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 5px;
}
.profile-pair-line {
  color: var(--text-sub);
  font-size: 12px;
  line-height: 1.45;
}
[data-theme="dark"] .profile-pair-head {
  background: linear-gradient(135deg, rgba(42,34,28,.76), rgba(34,28,42,.62));
  border-color: var(--border);
}

.invite-preview-card {
  background:
    linear-gradient(135deg, rgba(245,209,184,.24), rgba(232,213,242,.18)),
    var(--surface-soft, rgba(255,255,255,.72));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 15px;
  margin: 0 0 16px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  box-shadow: 0 10px 26px rgba(0,0,0,.045);
}
.invite-preview-card .panel-kicker {
  margin-bottom: 7px;
}
[data-theme="dark"] .invite-preview-card {
  background:
    linear-gradient(135deg, rgba(196,150,122,.14), rgba(142,112,163,.12)),
    rgba(24,21,19,.62);
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.setting-row:last-child { border-bottom: none; }
.sr-left { display: flex; align-items: center; gap: 12px; }
.sr-ico { font-size: 20px; width: 28px; text-align: center; }
.sr-name { font-size: 15px; font-weight: 500; color: var(--text); }
.sr-sub  { font-size: 12px; color: var(--text-sub); margin-top: 1px; }
.sr-right { font-size: 15px; color: var(--text-dim); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.stat-tile {
  position: relative;
  overflow: hidden;
  padding: 14px 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface-alt));
  text-align: center;
}
.stat-tile::after {
  content: attr(data-avatar);
  position: absolute;
  right: 8px;
  bottom: -7px;
  font-size: 34px;
  font-weight: 800;
  color: rgba(196,150,122,.13);
  line-height: 1;
  pointer-events: none;
}
.stat-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.stat-label {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-sub);
}

/* ── Progress Bar (Deep Sync) ────────────────────────────────── */
.progress-bar-wrap {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #E8D5F2, #9B7EA8);
  border-radius: 2px;
  transition: width .3s ease;
}

/* ── Report specific ─────────────────────────────────────────── */
.report-answer-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.report-answer-box {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  border: 1px solid var(--border);
}
.report-answer-box.mismatch {
  border-color: rgba(240,217,157,.6);
  background: rgba(240,217,157,.1);
}
.report-who {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--text-sub);
  margin-bottom: 6px;
}
.sync-report-context-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.sync-context-tag {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  background: var(--ghost-bg);
  font-size: 12px;
  line-height: 1.35;
  color: var(--text);
}
.sync-context-tag span {
  display: block;
  margin-bottom: 3px;
  color: var(--text-sub);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.sync-repair-bridge {
  margin-bottom: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(196,150,122,.2);
  background:
    radial-gradient(circle at 100% 0%, rgba(196,150,122,.16), transparent 34%),
    linear-gradient(135deg, rgba(255,248,242,.96), rgba(246,240,248,.84));
  box-shadow: 0 10px 28px rgba(196,150,122,.08);
}
.sync-repair-kicker {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .8px;
  color: var(--accent2);
  margin-bottom: 6px;
}
.sync-repair-title {
  font-size: 18px;
  font-weight: 850;
  color: var(--text);
  margin-bottom: 13px;
}
.sync-repair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sync-repair-label {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .6px;
  color: var(--text-sub);
  text-transform: uppercase;
  margin: 8px 0 4px;
}
.sync-repair-text {
  border-radius: 13px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(196,150,122,.12);
  padding: 10px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
[data-theme="dark"] .sync-repair-text {
  background: rgba(255,255,255,.05);
}
@media (max-width: 380px) {
  .sync-phase {
    font-size: 9px;
  }
  .sync-report-context-grid,
  .sync-repair-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Mood bars ───────────────────────────────────────────────── */
.mood-bar-track {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.mood-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--peach), var(--accent));
}

/* ════════════════════════════════════════════════════════════════
   UI POLISH - Level 1 (Quick & Wirksam)
   ════════════════════════════════════════════════════════════════ */

/* ── Micro-Tap Lift für klickbare Karten ─────────────────────── */
.card.clickable,
.soft-card.clickable,
.sync-card.clickable,
.portrait-widget-card {
  transition: transform .15s ease, box-shadow .15s ease;
}
.card.clickable:active,
.soft-card.clickable:active,
.sync-card.clickable:active,
.portrait-widget-card:active {
  transform: scale(.984);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
@media (hover: hover) {
  .card.clickable:hover,
  .soft-card.clickable:hover,
  .sync-card.clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 36px rgba(0,0,0,.09);
  }
}

/* ── Status-Pill Glow (review/ready) ─────────────────────────── */
@keyframes pillGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,174,79,.35); }
  50%       { box-shadow: 0 0 0 6px rgba(224,174,79,.0); }
}
.status-pill.warning {
  animation: pillGlow 2.4s ease infinite;
}
@keyframes pillGlowGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,138,106,.35); }
  50%       { box-shadow: 0 0 0 6px rgba(74,138,106,.0); }
}
.status-pill.success {
  animation: pillGlowGreen 2.4s ease infinite;
}

/* ── Dimension-Bars (Portrait) - höher, Gradient stärker ─────── */
.dimension-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(45,45,43,.06);
}
.dimension-fill {
  height: 100%;
  background: linear-gradient(90deg, #E8A898, #C4967A 45%, #B090BD);
  border-radius: inherit;
  transition: width .7s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 1px 6px rgba(196,150,122,.25);
}
[data-theme="dark"] .dimension-track { background: rgba(237,233,227,.08); }

/* ── Portrait Chart Card - mehr Tiefe ────────────────────────── */
.portrait-chart-card {
  box-shadow: 0 12px 40px rgba(196,150,122,.1), 0 2px 8px rgba(0,0,0,.04);
  border-color: rgba(255,255,255,.8);
}

/* ── Sync-Cards - sichtbarer Schatten bei clickable ──────────── */
.sync-card.clickable {
  box-shadow: 0 4px 24px rgba(0,0,0,.05), 0 1px 4px rgba(0,0,0,.04);
}
.sync-card.clickable:active {
  box-shadow: 0 1px 8px rgba(0,0,0,.05);
}
/* Left-border leuchtet stärker */
.sync-card::before {
  width: 4px;
  border-radius: 0 2px 2px 0;
  opacity: .9;
}
.sync-tone-review::before {
  background: #E0AE4F;
  box-shadow: 1px 0 8px rgba(224,174,79,.45);
}
.sync-tone-open::before {
  box-shadow: 1px 0 8px rgba(212,154,130,.4);
}
.sync-tone-complete::before {
  box-shadow: 1px 0 8px rgba(109,171,113,.4);
}

/* ── Good Vibes - Frage größer, luftiger ─────────────────────── */
.vibes-prompt-card {
  padding: 28px 22px;
}
.vibes-prompt-text {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--text);
}
/* Meine Antwort: peach Akzent - Partner: lavendel Akzent */
.vibes-answer-card {
  border-left: 3px solid rgba(196,150,122,.5);
}
.vibes-partner-card {
  border-left: 3px solid rgba(155,126,168,.5);
}

/* ── Waiting Pulse (Good Vibes / Quiz) ───────────────────────── */
@keyframes waitPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}
.waiting-pulse {
  animation: waitPulse 2s ease infinite;
}

/* ── Btn-Primary: stärkerer Gradient + Glow ──────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #EEB49E 0%, #C4967A 55%, #B8856A);
  box-shadow: 0 5px 22px rgba(196,150,122,.38);
  transition: opacity .18s, transform .12s, box-shadow .18s;
}
.btn-primary:active {
  transform: scale(.97);
  box-shadow: 0 2px 10px rgba(196,150,122,.25);
}
@media (hover: hover) {
  .btn-primary:hover {
    box-shadow: 0 8px 30px rgba(196,150,122,.45);
  }
}

/* ── Report "Ansehen" Button - Gradient Accent ───────────────── */
.btn-report-primary {
  background: linear-gradient(135deg, #D4B8E0 0%, #9B7EA8 60%, #8A6A98);
  color: #fff;
  box-shadow: 0 5px 22px rgba(155,126,168,.32);
  border: none;
  border-radius: 16px;
  padding: 15px 20px;
  width: 100%;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  transition: transform .12s, box-shadow .18s;
}
.btn-report-primary:active { transform: scale(.97); }
@media (hover: hover) {
  .btn-report-primary:hover { box-shadow: 0 8px 30px rgba(155,126,168,.42); }
}

/* ── Soft-Card: leicht mehr Tiefe ────────────────────────────── */
.soft-card {
  box-shadow: 0 4px 20px rgba(0,0,0,.055), 0 1px 4px rgba(0,0,0,.03);
}
[data-theme="dark"] .soft-card {
  box-shadow: 0 4px 20px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.2);
}

/* ── Calendar Row - hover lift ───────────────────────────────── */
.calendar-row {
  transition: background .15s;
}
.calendar-row:active {
  background: var(--ghost-bg);
}

/* ── Vibes History Cards - sanftere Transition ───────────────── */
.vibes-history-card {
  transition: transform .15s ease, box-shadow .15s ease;
}
.vibes-history-card:active {
  transform: scale(.983);
}

/* ── Responsive Desktop / Tablet ─────────────────────────────── */
@media (min-width: 540px) {
  html {
    background: #EDEAE4;
    display: flex;
    justify-content: center;
  }
  body {
    width: 480px;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 80px rgba(0,0,0,.15);
  }
  .screen {
    position: absolute !important;
  }
  #bottomNav {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
}
[data-theme="dark"] html { background: #0A0908; }

@supports (height: 100svh) {
  html, body { min-height: 100svh; }
}

/* ════════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS - Phase 2
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Nav Icon Bounce beim Tab-Wechsel ─────────────────────── */
@keyframes navIconBounce {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-5px) scale(1.18); }
  65%  { transform: translateY(1px) scale(.93); }
  100% { transform: translateY(0) scale(1); }
}
.nav-btn.on svg {
  animation: navIconBounce .38s cubic-bezier(.34, 1.56, .64, 1);
}

/* ── 2. Button Press - mehr Feedback ─────────────────────────── */
.btn:active {
  transform: scale(.96) !important;
  transition: transform .07s ease !important;
}
.btn-primary:active {
  transform: scale(.96) !important;
  box-shadow: 0 2px 8px rgba(196,150,122,.18) !important;
}
.btn-secondary:active {
  transform: scale(.96) !important;
}
.btn-ghost:active {
  transform: scale(.96) !important;
}

/* ── 3. Input / Textarea - Fokus-Glow ────────────────────────── */
@keyframes inputFocusGlow {
  0%   { box-shadow: 0 0 0 0   rgba(196,150,122,.0); }
  40%  { box-shadow: 0 0 0 5px rgba(196,150,122,.22); }
  100% { box-shadow: 0 0 0 3px rgba(196,150,122,.12); }
}
.input:focus {
  border-color: rgba(196,150,122,.6);
  animation: inputFocusGlow .4s ease forwards;
}
[data-theme="dark"] .input:focus {
  border-color: rgba(212,166,138,.55);
  animation: inputFocusGlow .4s ease forwards;
}

/* ── Dark Mode - transparent logo has dark lettering ───────────── */
[data-theme="dark"] .nara-logo-transparent {
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.78))
    drop-shadow(0 -1px 0 rgba(255,255,255,.46))
    drop-shadow(0 0 18px rgba(237,233,227,.22));
}

/* ── 4. Quiz-Antwort-Button Pop ──────────────────────────────── */
@keyframes answerPop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.045); }
  68%  { transform: scale(.975); }
  100% { transform: scale(1); }
}
.quiz-opt-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.quiz-opt-btn:active {
  transform: scale(.96);
  transition: transform .07s ease;
}
.quiz-opt-btn.picked {
  animation: answerPop .3s cubic-bezier(.34, 1.56, .64, 1);
}
.quiz-duel-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
  margin-bottom: 18px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(155,126,168,.18);
  background:
    radial-gradient(circle at 90% 0%, rgba(232,213,242,.44), transparent 38%),
    linear-gradient(135deg, rgba(255,250,246,.96), rgba(244,236,252,.9));
  box-shadow: var(--shadow);
}
.quiz-duel-title {
  margin-top: 6px;
  color: var(--text);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.25;
}
.quiz-duel-sub {
  margin-top: 7px;
  color: var(--text-sub);
  font-size: 13px;
  line-height: 1.45;
}
.quiz-duel-score {
  min-width: 98px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 4px 6px;
  align-items: end;
  text-align: center;
  color: var(--text);
  justify-content: center;
}
.quiz-duel-score span {
  font-size: 27px;
  font-weight: 950;
  line-height: 1;
}
.quiz-duel-score span:first-child { color: #C4967A; }
.quiz-duel-score span:nth-of-type(2) { color: #9B7EA8; }
.quiz-duel-score b {
  color: var(--text-dim);
  font-size: 19px;
  line-height: 1;
}
.quiz-duel-score small {
  grid-row: 2;
  color: var(--text-sub);
  font-size: 9px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quiz-duel-score small:first-of-type { grid-column: 1; }
.quiz-duel-score small:nth-of-type(2) { grid-column: 3; }
[data-theme="dark"] .quiz-duel-hero {
  background: linear-gradient(135deg, rgba(38,28,48,.88), rgba(28,22,34,.78));
  border-color: var(--border);
}
@media (max-width: 430px) {
  .quiz-duel-score {
    max-width: 180px;
  }
}

/* ── Dark Mode - Card Fixes ──────────────────────────────────── */

/* Deep Sync - "Alles ruhig gerade." Card */
[data-theme="dark"] .sync-quiet-card {
  background: linear-gradient(135deg, rgba(42,34,26,.88), rgba(36,28,42,.78));
}
[data-theme="dark"] .sync-quiet-card::after {
  background:
    linear-gradient(90deg, rgba(22,20,18,.82) 0%, rgba(22,20,18,.50) 42%, rgba(22,20,18,.08) 100%),
    linear-gradient(180deg, rgba(28,22,18,.12), rgba(28,22,18,.32));
}
[data-theme="dark"] .sync-quiet-bg {
  opacity: .28;
  filter: saturate(.6) brightness(.55);
}
[data-theme="dark"] .sync-quiet-copy {
  background: rgba(28,26,24,.76);
  box-shadow: 0 12px 26px rgba(0,0,0,.32);
}
[data-theme="dark"] .sync-quiet-steps span,
[data-theme="dark"] .sync-start-ritual span {
  background: rgba(237,233,227,.06);
  border-color: rgba(237,233,227,.1);
}

/* Good Vibes - Archiv-Box "Eure geteilten Momente" */
[data-theme="dark"] .vibes-archive-box {
  background:
    radial-gradient(circle at 16% 18%, rgba(240,217,157,.06), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(232,213,242,.05), transparent 35%),
    linear-gradient(135deg, var(--surface), var(--surface-alt));
  border-color: var(--border);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
[data-theme="dark"] .vibes-archive-arrow {
  background: rgba(237,233,227,.07);
  border-color: rgba(237,233,227,.1);
}
[data-theme="dark"] .vibes-archive-visual {
  background:
    radial-gradient(circle at 35% 22%, rgba(255,255,255,.12), transparent 32%),
    linear-gradient(145deg, #3a2820, #2e2018);
  box-shadow: inset 0 -12px 18px rgba(0,0,0,.25), 0 12px 22px rgba(0,0,0,.3);
}