/* =============================================
   APP SHELL
   ============================================= */

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  width: 100%;
  margin: 0 auto;
  background: var(--bg);
  position: relative;
  isolation: isolate;
  overflow-x: hidden; /* Prevent horizontal jitter */
}

.app-presence-glow {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(68rem, 145vw);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: radial-gradient(
    circle,
    var(--presence-glow-core) 0%,
    var(--presence-glow-mid) 42%,
    var(--presence-glow-edge) 74%
  );
  filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 420ms ease, transform 620ms ease;
  z-index: -1;
}

.app-presence-glow--visible {
  opacity: var(--presence-glow-opacity);
  transform: translate(-50%, -50%) scale(1);
}

/* Partner presence glow ball — small orb in tab top-right when both partners share a tab */
.partner-presence-glow {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: radial-gradient(
    circle,
    var(--presence-partner-core) 0%,
    var(--presence-partner-mid) 50%,
    var(--presence-partner-edge) 100%
  );
  filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.6);
  transition: opacity 320ms ease, transform 420ms ease;
  z-index: 1;
}

.partner-presence-glow--visible {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .app-presence-glow {
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 1ms linear;
  }

  .partner-presence-glow {
    transform: scale(1);
    transition: opacity 1ms linear;
  }
}

/* Top sticky nav bar */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream-glass-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--primary-glass-border);
  padding: 0.875rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}

.top-nav-greeting {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--headline-font);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition);
}

.top-nav-greeting:hover {
  color: var(--primary);
  filter: brightness(1.05);
}

.top-nav-greeting::before {
  content: "♥";
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 9999px;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: 0.82rem;
  line-height: 1;
}

.top-nav-actions { display: flex; align-items: center; gap: 0.75rem; }
.top-nav-actions .lucide {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2;
  color: var(--primary);
}

@media (max-width: 640px) {
  .top-nav {
    min-height: 58px;
    padding: 0.625rem 0.875rem;
  }

  .top-nav-greeting {
    font-size: 1rem;
  }

  .top-nav-greeting::before {
    width: 1.625rem;
    height: 1.625rem;
  }

  .top-nav-actions {
    gap: 0.25rem;
  }

  .top-nav-actions .btn-sm {
    padding-inline: 0.75rem !important;
  }

  .top-nav-sign-out {
    width: 44px;
    padding-inline: 0 !important;
  }

  .top-nav-sign-out .sign-out-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
}

/* =============================================
   DESKTOP SUB-NAV (≥ 768px only)
   ============================================= */

.desktop-tab-nav {
  display: none;
}

@media (min-width: 768px) {
  .desktop-tab-nav {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--bg);
    position: sticky;
    top: 64px;
    z-index: 99;
  }
}

.desktop-tab-btn {
  position: relative;
  padding: 0.6rem 1.25rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1;
}

.desktop-tab-btn:hover { background: var(--surface-container); color: var(--primary); }

.desktop-tab-btn--active {
  background: var(--primary);
  color: var(--on-primary) !important;
}

/* =============================================
   TAB CONTENT AREA
   ============================================= */

.tab-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: transparent;
  width: 100%;
}

/* Individual tab panels */
.tab-panel {
  display: none;
  flex-direction: column;
  padding: 1.5rem;
  width: 100% !important;
  height: 100%;
  overflow-y: auto;
  animation: fadeIn 0.4s ease;
  position: relative;
}

.tab-panel--active {
  display: block;
}

/* Couple profile pages — rendered inside app-shell but not a tab-panel */
.couple-profile-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-y: auto;
}

@media (min-width: 1000px) {
  .couple-profile-content {
    max-width: 1000px;
  }
}

.couple-room-title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.couple-room-copy {
  margin-bottom: 1.5rem;
}

.couple-room-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.couple-room-refresh {
  margin-top: 0.5rem;
}

.couple-room-waiting {
  font-size: 0.9rem;
  margin-top: 1rem;
}

.couple-room-heading {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
}

.couple-room-onboarding {
  padding: 3rem;
}

.couple-room-secondary-copy {
  margin-top: 0.5rem;
}

/* ─── Couple Comparison ─────────────────────────────────────────────────── */
.comparison-card { padding: 2rem; }
.comparison-card-title { font-size: 1.5rem; margin-bottom: 0.375rem; }
.comparison-card-subtitle { font-size: 0.95rem; margin-bottom: 1.5rem; }

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.comparison-table th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.5rem 0.75rem;
  border-bottom: 1.5px solid var(--outline-variant);
}
.comparison-table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--surface-variant);
  color: var(--text);
  vertical-align: middle;
}
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-cell-label {
  font-weight: 600;
  color: var(--on-surface-variant);
  font-size: 0.85rem;
  width: 35%;
}
.comparison-row--diff td { background: rgba(var(--secondary-rgb, 105, 91, 95), 0.06); }

/* ─── Couple Feature Directory ──────────────────────────────────────────── */
.couple-feature-directory {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0 1.5rem 2rem;
}

.couple-feature-directory__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.couple-feature-directory__eyebrow {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0 0 0.25rem;
  text-transform: uppercase;
}

.couple-feature-directory__title {
  font-size: 1.35rem;
  margin: 0;
}

.couple-feature-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.couple-feature-group__title {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}

.couple-feature-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.couple-feature-link {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  color: var(--text);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 76px;
  padding: 0.9rem;
  text-decoration: none;
  transition: var(--transition);
}

.couple-feature-link:hover,
.couple-feature-link:focus-visible {
  background: var(--surface-container);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

.couple-feature-link:active {
  transform: translateY(0);
}

.couple-feature-link__icon {
  align-items: center;
  background: var(--primary-wash);
  border: 1px solid var(--primary-hairline);
  border-radius: var(--radius-sm);
  color: var(--primary);
  display: inline-flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.couple-feature-link__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.couple-feature-link__label {
  color: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
}

.couple-feature-link__detail {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
  margin-top: 0.2rem;
}

.couple-feature-link__arrow {
  color: var(--text-muted);
  flex: 0 0 auto;
  transition: var(--transition);
}

.couple-feature-link:hover .couple-feature-link__arrow,
.couple-feature-link:focus-visible .couple-feature-link__arrow {
  color: var(--primary);
  transform: translateX(0.125rem);
}

@media (max-width: 640px) {
  .couple-feature-directory {
    padding: 0 1rem 6rem;
  }

  .couple-feature-grid {
    grid-template-columns: 1fr;
  }
}

/* Chat panel: flex column, no outer scroll */
.tab-panel--chat {
  display: none;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
  height: calc(100dvh - 64px - 72px);
}

@media (min-width: 768px) {
  .tab-panel--chat {
    height: calc(100dvh - 64px - 60px);
  }
}

.tab-panel--chat.tab-panel--active {
  display: flex;
}

/* =============================================
   BOTTOM TAB BAR (mobile-first)
   ============================================= */

.tab-bar {
  position: fixed;
  left: 50%;
  bottom: calc(0.75rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 100;
  width: min(calc(100% - 1.5rem), 680px);
  margin: 0;
  background: var(--cream-glass-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--primary-glass-border);
  border-radius: var(--radius-full);
  display: flex;
  justify-content: flex-start;
  gap: 0.25rem;
  overflow-x: auto;
  padding: 0.5rem;
  min-height: 64px;
  box-shadow: var(--shadow-lg);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tab-bar::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
  .tab-bar { display: none; }
}

.tab-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-width: 64px;
  min-height: 52px;
  padding: 0.45rem 0.7rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font-family);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: var(--transition);
  -webkit-tap-highlight-color: transparent;
  flex: 0 0 auto;
}

.tab-bar-item:hover { color: var(--primary); background: var(--surface-container); }

.tab-bar-item--active {
  color: var(--on-primary);
  background: var(--primary);
  box-shadow: var(--shadow-sm);
}

.tab-bar-item .tab-icon {
  font-size: 1.5rem;
  line-height: 1;
  display: block;
}

.tab-bar-item--active .lucide {
  color: var(--on-primary);
}

.tab-icon--with-badge {
  position: relative;
}

@media (max-width: 430px) {
  .tab-bar {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    justify-content: stretch;
    gap: 0.125rem;
    width: min(calc(100% - 1rem), 680px);
    padding: 0.375rem;
  }

  .tab-bar-item {
    min-width: 0;
    padding: 0.45rem 0.2rem;
    font-size: 0.66rem;
  }

  .tab-bar-item .tab-icon {
    font-size: 1.2rem;
  }
}

.tab-unread-badge {
  position: absolute;
  background: var(--danger);
  color: var(--on-primary);
  border-radius: var(--radius-full);
  padding: 0.1rem 0.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}

.tab-unread-badge--mobile {
  top: -4px;
  right: -8px;
}

.tab-unread-badge--desktop {
  top: 0.25rem;
  right: 0.25rem;
}

.tab-bar-item .tab-icon .lucide,
.desktop-tab-btn .lucide {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 1.8;
}

/* =============================================
   HEADER CARD & GENERAL CARDS
   ============================================= */

.header-card, .card {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 1.5rem;
  border: 1px solid var(--primary-light);
}

@media (max-width: 390px) {
  .header-card, .card {
    padding: 1.25rem 1rem;
  }
}

.header-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .header-card {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.header-card h1 { font-size: 1.75rem; margin-bottom: 0.25rem; }
.header-card p { color: var(--text-muted); font-size: 0.95rem; }

/* =============================================
   FEATURE PAGES
   ============================================= */

.feature-page {
  width: min(100%, 800px);
  margin: 0 auto;
  padding: 1.5rem;
}

.feature-page--narrow {
  width: min(100%, 600px);
}

.feature-page--form {
  width: min(100%, 700px);
}

.feature-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.feature-header-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.feature-card {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.feature-card__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.feature-card__main {
  flex: 1;
  min-width: 0;
}

.feature-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.feature-icon {
  width: 3rem;
  height: 3rem;
  background: var(--primary-container);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.feature-icon--large {
  width: 6.25rem;
  height: 6.25rem;
  border-radius: var(--radius-full);
  margin: 0 auto 2rem;
  box-shadow: var(--shadow-md);
}

.feature-title {
  font-weight: 700;
  color: var(--text);
  font-family: var(--headline-font);
}

.feature-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.feature-copy {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.feature-copy--muted {
  color: var(--text-muted);
  font-style: italic;
}

.feature-copy--accent {
  color: var(--primary);
  font-style: italic;
}

.feature-tag-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.feature-tag {
  font-size: 0.7rem;
  background: var(--surface-container-high);
  color: var(--text-muted);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  text-transform: uppercase;
}

.feature-tag--primary {
  background: var(--primary-container);
  color: var(--primary);
}

.feature-tag--secondary {
  background: var(--secondary-container);
  color: var(--primary);
}

.feature-empty {
  text-align: center;
  padding-block: 4rem;
}

.feature-empty__icon {
  color: var(--primary);
  margin-bottom: 1.5rem;
}

.feature-empty__copy {
  color: var(--text-muted);
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.feature-form-card {
  width: 100%;
}

.feature-form-title {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
}

.feature-form-intro {
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  font-size: 1.1rem;
}

.feature-field {
  margin-bottom: 2rem;
}

.feature-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.75rem;
  font-family: var(--headline-font);
}

.feature-label--spacious {
  margin-bottom: 1rem;
}

.feature-help {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

.feature-error {
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 1.25rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
}

.feature-error__title {
  font-size: 1rem;
  font-weight: 700;
}

.feature-error__list {
  margin-top: 0.5rem;
  list-style: inside;
}

.feature-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.feature-option {
  padding: 1.25rem;
  cursor: pointer;
  text-align: left;
  align-items: flex-start;
  transition: var(--transition);
}

.feature-option__inner {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.feature-option__radio {
  margin-top: 0.25rem;
}

.feature-option__title {
  font-weight: 700;
  color: var(--text);
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.feature-option__copy {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  line-height: 1.4;
}

.feature-callout {
  padding: 1.5rem;
  border-radius: var(--radius-md);
  margin-bottom: 2rem;
  border-left: 4px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}

.gift-composer__header {
  margin-bottom: 2rem;
}

.gift-composer__layout {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.38fr);
  align-items: start;
}

.gift-composer__main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.gift-composer__step {
  border: 1px solid var(--primary-glass-border);
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  padding: 1.25rem;
}

.gift-composer__step .feature-field,
.gift-composer__step .feature-callout {
  margin-bottom: 0;
}

.gift-composer__step-label {
  margin: 0 0 0.75rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.gift-composer__preview {
  border: 1px solid var(--primary-glass-border);
  border-radius: var(--radius-lg);
  background: var(--cream-glass-strong);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  padding: 1.25rem;
  position: sticky;
  top: 6rem;
}

.gift-composer__preview h2 {
  font-size: 1.2rem;
  margin: 0.75rem 0 0.5rem;
}

.gift-composer__preview p {
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.gift-composer__preview-icon {
  color: var(--primary);
}

.gift-composer__preview-list {
  color: var(--text-muted);
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding-left: 1.2rem;
}

@media (max-width: 780px) {
  .gift-composer__layout {
    grid-template-columns: 1fr;
  }

  .gift-composer__preview {
    position: static;
  }
}

.feature-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.feature-detail-card {
  padding: 3.5rem 2.5rem;
  text-align: center;
}

.feature-detail-heading {
  margin-bottom: 2.5rem;
}

.feature-detail-heading .headline {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.feature-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.feature-panel {
  background: var(--surface-container);
  padding: 2.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--outline-variant);
  margin-bottom: 2.5rem;
}

.feature-panel__eyebrow {
  font-family: var(--headline-font);
  font-size: 1.15rem;
  color: var(--primary);
  margin-bottom: 1rem;
}

.feature-countdown {
  font-size: 2rem;
  color: var(--text);
}

.feature-attachment {
  margin-bottom: 2rem;
}

.feature-attachment img {
  max-width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.feature-message {
  font-family: var(--headline-font);
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--text);
  text-align: left;
  font-style: italic;
}

.feature-opened {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 700;
}

.form-input--tall {
  min-height: 150px;
}

.form-input--file {
  padding: 0.75rem;
}

.form-input--compact {
  max-width: 300px;
}

/* Weekly review surfaces */
.weekly-page {
  width: min(100%, 640px);
  margin: 0 auto;
  padding: 2rem 1rem;
}

.weekly-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.weekly-title {
  font-size: 1.75rem;
}

.weekly-subtitle {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.weekly-header .weekly-subtitle {
  margin: 0;
}

.weekly-card {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  border: 1px solid var(--outline-variant);
  transition: var(--transition);
}

.weekly-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.weekly-card + .weekly-card,
.weekly-section + .weekly-section {
  margin-top: 1rem;
}

.weekly-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.weekly-score-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1rem;
}

.weekly-score {
  text-align: center;
}

.weekly-score__value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.weekly-score__value--large {
  font-size: 2rem;
}

.weekly-score__label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.weekly-items {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--outline-variant);
}

.weekly-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.weekly-item__title {
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.weekly-item__score {
  font-weight: 600;
  color: var(--primary);
}

.weekly-section {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

.weekly-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.weekly-note-title {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.weekly-note-copy {
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

.weekly-note-copy + .weekly-note-title {
  margin-top: 1rem;
}

.score-group {
  margin-bottom: 2rem;
}

.score-group__title {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.score-group__hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.score-options {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.score-options--with-note {
  margin-bottom: 1rem;
}

.score-option {
  cursor: pointer;
}

.score-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.score-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--outline-variant);
  background: var(--surface-container);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}

.score-btn--area {
  width: 2rem;
  height: 2rem;
  font-size: 0.75rem;
}

.score-option:hover .score-btn,
.score-option:has(input:checked) .score-btn {
  border-color: var(--primary);
  background: var(--primary-container);
  color: var(--primary);
}

.area-score-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}

.area-score-row + .area-score-row {
  margin-top: 1rem;
}

.area-score-title {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text);
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.char-count {
  text-align: right;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* Relationship health tracker */
.health-page {
  width: min(100%, 900px);
  margin: 0 auto;
  padding: 1.5rem;
}

.health-status {
  padding: 2rem;
  border-left: 4px solid var(--outline-variant);
}

.health-status--struggling {
  background: var(--danger-container);
  color: var(--danger);
  border-left-color: var(--danger);
}

.health-status--fair {
  background: var(--tertiary-container);
  color: var(--primary);
  border-left-color: var(--tertiary);
}

.health-status--good {
  background: var(--secondary-container);
  color: var(--on-secondary);
  border-left-color: var(--secondary);
}

.health-status--excellent {
  background: var(--primary-container);
  color: var(--primary);
  border-left-color: var(--primary);
}

.health-status--no-data {
  background: var(--surface-container);
  color: var(--text-muted);
}

.health-status__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.health-status__icon {
  flex-shrink: 0;
}

.health-status__title {
  color: inherit;
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.health-status__copy {
  font-size: 1.1rem;
  opacity: 0.9;
  line-height: 1.4;
}

.health-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.health-metric {
  padding: 1.5rem;
  margin-bottom: 0;
}

.health-metric__label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.health-metric__value {
  font-family: var(--headline-font);
  font-size: 2rem;
  color: var(--primary);
}

.health-metric__unit {
  font-size: 1rem;
  opacity: 0.6;
}

.health-metric__hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

.health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.health-card {
  margin-bottom: 0;
}

.health-card--spaced {
  margin-bottom: 2rem;
}

.health-card__title {
  font-size: 1.15rem;
  margin-bottom: 1.5rem;
}

.health-card__title--compact {
  margin-bottom: 0.5rem;
}

.health-chart-empty {
  height: 250px;
  background: var(--surface-container);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  text-align: center;
}

.gratitude-list,
.reflection-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gratitude-card {
  padding: 1rem;
  background: var(--secondary-container);
  border-radius: var(--radius-md);
  position: relative;
}

.gratitude-card__date {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.gratitude-card__note {
  font-size: 0.95rem;
  color: var(--on-secondary);
  margin-bottom: 0.25rem;
  padding-right: 4rem;
}

.gratitude-card__user {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
}

.health-empty {
  color: var(--text-muted);
  font-size: 0.95rem;
  text-align: center;
  padding: 2rem;
}

.conflict-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.conflict-topic {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--danger-container);
  color: var(--danger);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
}

.reflection-card {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--surface-container);
  border-radius: var(--radius-md);
  border: 1px solid var(--primary-light);
}

.reflection-card__icon {
  color: var(--primary);
  flex-shrink: 0;
}

.reflection-card__body {
  flex: 1;
  min-width: 0;
}

.reflection-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.reflection-card__user {
  font-weight: 700;
  color: var(--primary);
}

.reflection-card__time {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.reflection-card__reason {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.5;
}

.reflection-card__gratitude {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--on-secondary);
  background: var(--secondary-container);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Journals and dream board */
.journal-card__excerpt {
  font-family: var(--headline-font);
  font-size: 1.15rem;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.journal-entry {
  padding: 2.5rem;
}

.journal-entry__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
}

.journal-entry__actions {
  display: flex;
  gap: 0.5rem;
}

.journal-entry__content {
  font-family: var(--headline-font);
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 3rem;
}

.journal-entry__footer {
  border-top: 1px solid var(--outline-variant);
  padding-top: 1.5rem;
}

.journal-chat-card {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.journal-chat-card__icon {
  color: var(--primary);
  flex-shrink: 0;
}

.dream-page {
  width: min(100%, 700px);
  margin: 0 auto;
  padding: 1rem;
}

.dream-back {
  margin-bottom: 1rem;
}

.dream-title {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.dream-form-card,
.dream-section {
  margin-bottom: 1.5rem;
}

.dream-form-title {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.dream-form-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dream-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.dream-section__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text-muted);
}

.dream-empty {
  padding: 3rem;
  margin-bottom: 1rem;
  background: var(--surface-container);
  border: 1px dashed var(--outline-variant);
}

.dream-empty__icon {
  color: var(--primary);
  opacity: 0.55;
  margin-bottom: 1rem;
}

.dream-empty__title {
  color: var(--text-muted);
  font-weight: 500;
}

.dream-empty__copy {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.dream-card {
  margin-bottom: 0.75rem;
}

.dream-card__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.dream-card__main {
  flex: 1;
  min-width: 0;
}

.dream-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
}

.dream-card__title {
  font-weight: 700;
  font-family: var(--headline-font);
}

.dream-card__description {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.dream-card__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  align-items: center;
}

.btn-xs {
  min-height: 32px;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
}

.btn-surface {
  background: var(--surface-container);
  color: var(--primary);
}

.link-inline {
  padding-inline: 0;
  color: var(--primary);
  font-weight: 700;
  gap: 0.5rem;
}

/* Privacy and consent */
.privacy-page {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 2rem 1rem;
}

.privacy-header {
  text-align: center;
  margin-bottom: 2rem;
}

.privacy-title {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.privacy-copy {
  color: var(--text-muted);
  line-height: 1.6;
}

.privacy-section {
  margin-bottom: 1.5rem;
}

.privacy-section__title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.danger-text {
  color: var(--danger);
}

.privacy-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.privacy-consent-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.privacy-consent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background: var(--surface-container);
  border-radius: var(--radius-md);
}

.privacy-consent-row__main {
  flex: 1;
  min-width: 0;
}

.privacy-consent-row__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.privacy-consent-row__copy,
.privacy-consent-row__meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.privacy-consent-row__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.privacy-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--surface-container-high);
  color: var(--text-muted);
}

.privacy-badge--active {
  background: var(--primary-container);
  color: var(--primary);
}

.privacy-badge--revoked {
  background: var(--danger-container);
  color: var(--danger);
}

.privacy-callout {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--primary-container);
  border-radius: var(--radius-md);
  border: 1px solid var(--primary-light);
}

.privacy-callout--danger {
  background: var(--danger-container);
  border-color: var(--danger);
}

.privacy-callout__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.privacy-callout--danger .privacy-callout__title,
.privacy-callout--danger .privacy-list {
  color: var(--danger);
}

.privacy-list {
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.6;
  padding-left: 1.25rem;
}

.privacy-form {
  margin-top: 1.5rem;
}

.privacy-form-field {
  margin-bottom: 1rem;
}

.privacy-footer {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 2rem;
}

.privacy-footer p + p {
  margin-top: 0.5rem;
}

@media (max-width: 720px) {
  .health-grid {
    grid-template-columns: 1fr;
  }

  .health-status__inner,
  .reflection-card,
  .journal-entry__header,
  .dream-card__body {
    align-items: flex-start;
    flex-direction: column;
  }

  .dream-form-grid {
    grid-template-columns: 1fr;
  }
}

.invite-code {
  font-family: 'Plus Jakarta Sans', monospace;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: var(--primary);
  background: var(--surface-container);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-md);
  display: inline-block;
  margin-top: 0.5rem;
}

/* =============================================
   NEW DASHBOARD LAYOUT: HERO + BENTO
   ============================================= */

/* Wider app-shell on desktop for multi-column bento layouts */
@media (min-width: 768px) {
  .app-shell { 
    width: min(1180px, 100%) !important;
    min-width: 0 !important;
  }
  .tab-panel { 
    padding: 2rem 2.5rem;
    width: 100% !important;
  }
}

@media (max-width: 390px) {
  .tab-panel { padding: 1rem 0.75rem; }
}

@media (max-width: 767px) {
  .tab-panel {
    padding: 1.25rem 1rem 6rem;
  }

  .tab-panel--chat {
    height: calc(100dvh - 58px - 86px);
  }
}

/* Hero section: 2-col grid (welcome left, partner right) */
.dashboard-hero {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 2rem;
}
@media (max-width: 768px) { .dashboard-hero { grid-template-columns: 1fr; gap: 1rem; } }

.hero-welcome {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 0;
  justify-content: center;
}

.welcome-title {
  font-family: var(--headline-font);
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .welcome-title { font-size: 1.5rem; }
}

.welcome-subtext {
  color: var(--on-surface-variant);
  font-size: 1.05rem;
  max-width: 480px;
  line-height: 1.6;
}

.thinking-of-you-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
}

.thinking-of-you-btn,
.guided-thread-btn {
  height: 44px;
  line-height: 1;
}

.btn-leading-icon {
  margin-right: 0.5rem;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.hero-actions .guided-thread-btn {
  order: -1;
}

.profile-status-banner {
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-md);
  border: 1px solid var(--outline-variant);
}

.profile-status-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.profile-status-message {
  font-size: 0.9rem;
  color: var(--text);
}

/* Partner Status Card */
.partner-status-card {
  background: var(--surface-container-lowest) !important;
  border-radius: var(--radius-xl) !important;
  padding: 1.5rem !important;
  border: 1px solid var(--surface-container-high) !important;
  box-shadow: var(--shadow-sm) !important;
  position: relative;
  overflow: hidden;
  margin-bottom: 0 !important;
}

.partner-status-card::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: var(--secondary-container);
  opacity: 0.5;
  z-index: 0;
}

.status-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.status-header-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.partner-avatar-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-container);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  border: 2px solid var(--surface);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.status-partner-name {
  font-family: var(--headline-font);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0;
  line-height: 1.2;
}

.status-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface-variant);
  font-weight: 600;
  margin-top: 0.2rem;
  display: block;
}

.status-body {
  background: var(--surface-container-low);
  border-radius: var(--radius-md);
  padding: 1rem;
  position: relative;
  z-index: 1;
}

.status-text {
  font-weight: 600;
  color: var(--on-surface);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.status-meta {
  font-size: 0.8rem;
  color: var(--on-surface-variant);
}

.status-actions {
  position: relative;
  z-index: 1;
}

.status-chat-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-container);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: var(--transition);
  text-decoration: none;
}

.status-chat-btn:hover {
  background: var(--primary);
  color: var(--on-primary);
}

/* Bento: 3-col grid */
.dashboard-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}
@media (max-width: 900px) { .dashboard-bento { grid-template-columns: 1fr; } }

/* Quick Access column (stacked link cards) */
.quick-actions-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0;
  height: 100%;
}

.quick-action-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface-container-low);
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--on-surface);
  transition: var(--transition);
  box-shadow: 0 4px 12px rgba(19,78,74,0.02);
  flex: 1;
}

.quick-action-card:hover {
  background: var(--surface-container);
  border-color: var(--outline-variant);
  transform: none;
  filter: none;
}

.action-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--secondary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.quick-action-card:hover .action-icon { transform: scale(1.05); }

.action-icon--tertiary { background: var(--tertiary-container); }
.action-icon--primary  { background: var(--primary-container); }

.action-content { flex: 1; }

.action-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--on-surface);
  margin: 0;
}

.action-desc { display: none; }

.action-arrow {
  color: var(--outline-variant);
  font-size: 1rem;
  transition: color 0.2s;
}

.quick-action-card:hover .action-arrow { color: var(--primary); }

/* Countdown card (bento middle) */
.bento-countdown {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
}

.countdown-banner-area {
  background: var(--primary-container);
  padding: 1.25rem 1.5rem;
  position: relative;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.countdown-banner-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--on-primary-container);
  font-weight: 600;
  opacity: 0.9;
  margin-bottom: 0.2rem;
}

.countdown-banner-title {
  font-family: var(--headline-font);
  color: var(--on-primary);
  font-size: 1.25rem;
  font-weight: 700;
}

.countdown-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  background: var(--surface-container-lowest);
}

.countdown-number {
  font-family: var(--headline-font);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}

@media (max-width: 480px) {
  .countdown-number { font-size: 2.25rem; }
}

.countdown-unit {
  color: var(--on-surface-variant);
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.countdown-desc {
  color: var(--outline);
  font-size: 0.85rem;
  max-width: 180px;
  line-height: 1.5;
  margin-top: 0.5rem;
}

/* Mood Trend Widget (bento right) */
.mood-trend-widget {
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
}

.mood-trend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.mood-trend-title {
  font-family: var(--headline-font);
  font-size: 1.1rem;
  color: var(--primary);
  font-weight: 700;
  margin: 0;
}

.mood-trend-period {
  font-size: 0.72rem;
  color: var(--on-surface-variant);
  background: var(--surface);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--outline-variant);
}

.mood-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.375rem;
  padding-bottom: 0.25rem;
  min-height: 90px;
}

.mood-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  flex: 1;
}

.mood-bar-track {
  width: 100%;
  height: 80px;
  background: var(--surface-variant);
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.mood-bar-fill {
  width: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: height 0.5s ease;
  min-height: 4px;
}

.mood-bar-label {
  font-size: 0.62rem;
  color: var(--outline);
  font-weight: 500;
  text-transform: uppercase;
}

.mood-bar-label.today { color: var(--primary); font-weight: 700; }

.mood-trend-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--surface-variant);
  font-size: 0.7rem;
  color: var(--outline);
  flex-wrap: wrap;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 2px;
  vertical-align: middle;
}

.legend-dot--joyful { background: var(--primary); }
.legend-dot--calm   { background: var(--tertiary); }
.legend-dot--tired  { background: var(--secondary); }

/* Waiting state */
.partner-status-card--waiting {
  background: var(--surface-variant) !important;
  border: 1px dashed var(--outline) !important;
  text-align: center;
  padding: 2rem !important;
}

.invite-partner-banner {
  margin-bottom: 1.5rem !important;
}

.tab-panel--chat .invite-partner-banner {
  margin: 1.5rem 1.5rem 0 !important;
}

.invite-code-box {
  display: inline-flex;
  flex-direction: column;
  background: var(--surface-container-lowest);
  padding: 1rem 2rem;
  border-radius: 1rem;
  border: 1px solid var(--outline-variant);
  box-shadow: var(--shadow-sm);
}

.invite-waiting-title {
  font-size: 1.25rem;
}

.invite-waiting-copy {
  margin-bottom: 1.5rem;
}

.invite-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
}

.invite-join-panel {
  margin: 1.5rem auto 0;
  max-width: 28rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--outline-variant);
}

.invite-join-copy {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

.invite-join-form {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
}

.invite-join-input {
  min-width: 0;
  flex: 1;
}

.invite-join-btn {
  background: var(--primary);
  color: var(--on-primary);
}

@media (max-width: 540px) {
  .invite-join-form {
    flex-direction: column;
    align-items: stretch;
  }

  .invite-join-btn {
    width: 100%;
  }
}

.invite-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.invite-code {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.1em;
  font-family: monospace;
}

/* =============================================
   DAILY RITUAL (Mood tab)
   ============================================= */

.daily-ritual-header {
  text-align: center;
  margin-bottom: 2rem;
}

.daily-ritual-title {
  font-family: var(--headline-font);
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

@media (max-width: 480px) {
  .daily-ritual-title { font-size: 1.75rem; }
}

.daily-ritual-subtitle {
  color: var(--on-surface-variant);
  font-size: 1.05rem;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

.ritual-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

.daily-ritual-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 768px) { .daily-ritual-grid { grid-template-columns: 1fr; } }

/* Partner week sidebar */
.partner-week-card {
  background: rgba(242,221,226,0.3);
  border-radius: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--secondary-container);
}

.partner-week-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.partner-week-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-container-lowest);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border: 2px solid var(--surface-container-lowest);
  flex-shrink: 0;
}

.partner-week-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--on-surface);
  margin: 0;
}

.partner-week-subtitle {
  font-size: 0.78rem;
  color: var(--on-surface-variant);
}

.partner-day-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--surface-container-lowest);
  border-radius: var(--radius-lg);
  margin-bottom: 0.5rem;
}

.partner-day-row--dim {
  background: var(--white-glass-soft);
  opacity: 0.65;
}

.day-emoji-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-container);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.day-label {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--on-surface);
}

.day-time {
  font-size: 0.75rem;
  color: var(--outline);
}

.partner-week-quote {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(242,221,226,0.6);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--on-surface-variant);
  text-align: center;
  line-height: 1.6;
}

/* =============================================
   SHARED SPACES (Events tab)
   ============================================= */

.shared-spaces-section-header {
  margin-bottom: 1.25rem;
}

.shared-spaces-page-title {
  font-family: var(--headline-font);
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.35rem;
}

@media (max-width: 480px) {
  .shared-spaces-page-title { font-size: 1.5rem; }
}

.shared-spaces-page-subtitle {
  color: var(--on-surface-variant);
  font-size: 1rem;
}

.timezone-indicators {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.timezone-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-container-low);
  border: 1px solid rgba(191,200,198,0.3);
  border-radius: var(--radius-full);
  padding: 0.45rem 1rem;
  font-size: 0.875rem;
  box-shadow: var(--shadow-sm);
}

.tz-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tz-dot--primary   { background: var(--primary); }
.tz-dot--secondary { background: var(--secondary); }
.tz-name { font-weight: 600; color: var(--on-surface); }
.tz-time { color: var(--on-surface-variant); margin-left: 0.35rem; }

.shared-spaces-bento {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 1.5rem;
}

.shared-spaces-bento,
.shared-spaces-left,
.shared-spaces-right {
  min-width: 0;
}

@media (max-width: 768px) { .shared-spaces-bento { grid-template-columns: 1fr; } }

.shared-spaces-left { display: flex; flex-direction: column; gap: 1rem; }
.shared-spaces-right { display: flex; flex-direction: column; }

.memories-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.memory-card {
  border-radius: 1.25rem;
  overflow: hidden;
  height: 140px;
}

.memory-card--add {
  background: var(--surface-container);
  border: 2px dashed var(--outline-variant);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: var(--transition);
  border-radius: 1.25rem;
}
.memory-card--add:hover { background: var(--surface-variant); }

.shared-space-card,
.future-plans-card {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .shared-spaces-bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .shared-spaces-left,
  .shared-spaces-right {
    width: 100%;
  }

  .widget-section-header,
  .date-plan-header-actions {
    min-width: 0;
    flex-wrap: wrap;
  }

  .widget-add-btn {
    width: auto;
    min-width: 2.75rem;
  }

  .event-form-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Milestones tab */
.milestones-title {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.milestones-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.milestones-action {
  gap: 0.5rem;
}

@media (max-width: 560px) {
  .milestones-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .milestones-action {
    width: 100%;
  }
}

/* Future Plans board styling */
.future-plans-card {
  flex: 1;
  margin-bottom: 0;
}

.future-plans-board-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.future-plans-icon {
  color: var(--tertiary-container);
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
}

.future-plans-title {
  font-size: 1.1rem;
  margin: 0;
}

.future-plans-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  padding-bottom: 0.1rem;
}

.future-tab {
  padding: 0.55rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-family);
  transition: var(--transition);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.future-tab.active { background: var(--primary); color: var(--on-primary); }
.future-tab:not(.active) { background: var(--surface-container); color: var(--on-surface-variant); }
.future-tab:not(.active):hover { background: var(--surface-variant); }

.add-item-btn {
  width: 100%;
  padding: 0.75rem;
  border: 2px dashed var(--outline-variant);
  border-radius: var(--radius-xl);
  background: transparent;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-family);
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.add-item-btn:hover { background: var(--surface-container); }

.future-plans-form-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.future-plans-input {
  flex: 1;
}

/* Shared Spaces widget headers */
.widget-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.widget-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary);
  font-family: var(--headline-font);
  font-size: 1.1rem;
  font-weight: 700;
}

.widget-add-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.85rem;
  border-radius: 50%;
  background: var(--surface-container);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: var(--on-surface-variant);
  font-family: var(--font-family);
  font-size: 0.8rem;
  font-weight: 700;
  transition: var(--transition);
}
.widget-add-btn:hover { background: var(--surface-variant); }

/* Event cards — reference style */
.event-item-card {
  display: flex;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-lowest);
  border: 1px solid rgba(191,200,198,0.3);
  transition: var(--transition);
  cursor: default;
}
.event-item-card:hover { box-shadow: var(--shadow-sm); }

.event-date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.5rem;
  flex-shrink: 0;
}
.event-date-badge--alt { background: var(--tertiary-fixed); color: var(--on-tertiary-fixed); }

.event-month {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.event-day-num {
  font-family: var(--headline-font);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.event-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.event-card-title { font-weight: 600; font-size: 0.9rem; color: var(--on-surface); }
.event-card-desc  { font-size: 0.8rem; color: var(--on-surface-variant); margin-top: 0.15rem; }

/* =============================================
   CHAT + OUR SPACE SIDEBAR
   ============================================= */

.chat-with-sidebar {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.chat-main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.our-space-sidebar {
  display: none;
}

@media (min-width: 768px) {
  .our-space-sidebar {
    display: flex;
    flex-direction: column;
    width: 260px;
    flex-shrink: 0;
    background: var(--surface-container-low);
    border-left: 1px solid var(--outline-variant);
    overflow-y: auto;
    padding: 1.25rem;
    gap: 1.5rem;
  }
}

.our-space-title {
  font-family: var(--headline-font);
  font-size: 1.1rem;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.our-space-section-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--on-surface-variant);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.our-space-section-count {
  font-weight: 400;
  opacity: 0.6;
}

.pinned-memory-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 0.5rem;
  background: var(--surface-container);
  padding: 0.625rem;
  font-size: 0.8rem;
  color: var(--on-surface);
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.pinned-memory-pin {
  color: var(--primary);
  display: inline-flex;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 0.1rem;
  opacity: 0.6;
}

.pinned-memory-pin .lucide {
  display: block;
  stroke-width: 2.25;
}

.shared-links-empty {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Flash notifications: fixed overlay, always on top */
#flash_notifications {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}

#flash_notifications > * { pointer-events: auto; }

/* Dashboard Helpers */
.card--centered { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.ping-prompt { color: var(--text-muted); font-weight: 500; font-size: 1rem; margin-bottom: 0.5rem; }
.invite-code-msg { margin-top: 1rem; color: var(--text-muted); line-height: 1.6; font-size: 0.95rem; }

/* =============================================
   COUPLE PROFILE HEADER (CoupleProfileHeaderComponent)
   ============================================= */

.profile-header {
  margin-bottom: 1.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.cover-image-wrapper {
  position: relative;
  height: 200px;
}

.cover-image {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.cover-image--placeholder {
  background: var(--profile-cover-gradient);
  width: 100%; height: 100%;
}

.edit-profile-link,
.back-link {
  align-items: center;
  background: var(--white-glass);
  border: 1px solid var(--primary-glass-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  color: var(--primary);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0.375rem 0.875rem;
  position: absolute;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}

.edit-profile-link {
  right: 0.75rem;
  top: 0.75rem;
}

.back-link {
  left: 0.75rem;
  top: 0.75rem;
}

.edit-profile-link:hover,
.back-link:hover {
  background: var(--surface-container-lowest);
  transform: translateY(-1px);
}

.edit-profile-link:active,
.back-link:active {
  transform: translateY(0);
}

.profile-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem 1.5rem 1rem;
  display: flex; align-items: flex-end; gap: 1rem;
  background: var(--profile-cover-scrim);
}

.avatar-wrapper { flex-shrink: 0; }

.avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 3px solid var(--white-glass);
  object-fit: cover; display: block;
}

.avatar--placeholder {
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
}

.avatar-initials {
  color: var(--on-primary); font-size: 1.375rem;
  font-weight: 700; letter-spacing: 2px;
}

.profile-names {
  display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.25rem; flex-wrap: wrap;
}

.profile-name {
  font-family: var(--headline-font);
  font-size: 1.25rem; font-weight: 700; color: var(--profile-cover-text);
  text-shadow: var(--profile-cover-text-shadow);
}

.profile-name-separator {
  color: var(--profile-cover-text);
  font-size: 1rem;
  font-weight: 400;
  opacity: 0.85;
  text-shadow: var(--profile-cover-text-shadow);
}

/* =============================================
   COUPLE DASHBOARD (couple/show)
   ============================================= */

.couple-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
}

.couple-dashboard-title {
  font-size: 3rem;
  margin-bottom: 2rem;
  color: var(--primary);
}

.couple-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .couple-dashboard-grid { grid-template-columns: 1fr; }
  .couple-dashboard-title { font-size: 2rem; }
}

/* =============================================
   INVITE FORM (InviteFormComponent)
   ============================================= */

.invite-form-container {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  margin-top: 1.5rem;
  border: 1px solid var(--primary-hairline);
}

.invite-form-title {
  font-family: var(--headline-font);
  font-size: 1.5rem; font-weight: 600;
  color: var(--primary);
  margin-bottom: 1rem;
}

/* =============================================
   NOTIFICATION BELL
   ============================================= */

.notification-bell {
  position: relative;
  display: flex;
  align-items: center;
}

.bell-icon {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--text);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  transition: var(--transition);
  position: relative;
}

.bell-icon:hover {
  background: var(--surface-container);
  color: var(--primary);
}

.notification-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius-full);
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}

.notification-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: -1rem;
  background: var(--surface-container-lowest);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 20rem;
  max-width: calc(100vw - 2rem);
  max-height: 28rem;
  overflow-y: auto;
  z-index: 1000;
  border: 1px solid var(--primary-light);
  margin-top: 0.5rem;
}

.notification-dropdown.is-open {
  display: block;
}

.notification-dropdown__header {
  align-items: center;
  border-bottom: 1px solid var(--outline-variant);
  color: var(--text);
  display: flex;
  font-weight: 800;
  justify-content: space-between;
  padding: 0.85rem 1rem;
}

.notification-dropdown__mark-all {
  background: transparent;
  border: 0;
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.25rem;
}

.notification-dropdown__mark-all:hover {
  color: var(--text);
}

@media (max-width: 480px) {
  .notification-dropdown {
    right: -0.5rem;
    width: calc(100vw - 1.5rem);
  }
}

.notification-list {
  display: flex;
  flex-direction: column;
}

.notification-list .notification {
  padding: 1rem;
  border-bottom: 1px solid var(--primary-hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  transition: var(--transition);
}

.notification-list .notification:last-child {
  border-bottom: none;
}

.notification-row {
  align-items: stretch;
}

.notification-row .notification-link {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.notification-row__icon {
  align-items: center;
  background: var(--surface-container);
  border-radius: var(--radius-full);
  color: var(--primary);
  display: inline-flex;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.notification-row__body {
  min-width: 0;
}

.notification-row__label,
.notification-row__action {
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 800;
}

.notification-row__label,
.notification-message,
.notification-time {
  display: block;
}

.notification-row__action {
  color: var(--text-muted);
  white-space: nowrap;
}

.notification.unread {
  background: var(--primary-wash);
}

.notification-row--unread {
  background: var(--surface-container-low);
}

.notification-content {
  flex: 1;
}

.notification-link {
  text-decoration: none;
  display: block;
}

.notification-link:hover .notification-message {
  color: var(--primary);
}

.notification-message {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 500;
}

.notification-time {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.btn-mark-read {
  padding: 0.4rem 0.8rem;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  min-height: 44px;
}

.btn-mark-read:hover {
  opacity: 0.9;
}

.notification-list .empty-state {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-muted);
}

/* =============================================
   MOBILE RESPONSIVENESS (375px / 390px)
   ============================================= */

@media (max-width: 480px) {
  /* Prevent horizontal overflow */
  .app-shell { overflow-x: hidden; }
  .tab-content { overflow-x: hidden; }

  /* Auth: prevent card overflow */
  .auth-card { max-width: 100%; }

  /* Dashboard hero: tighter padding */
  .dashboard-hero { gap: 0.75rem; }
  .hero-welcome { padding: 0.25rem 0; }
  .welcome-subtext { font-size: 0.95rem; }

  /* Partner card: compact */
  .partner-status-card { padding: 1.25rem !important; }

  /* Bento: reduce gap */
  .dashboard-bento { gap: 1rem; }

  /* Countdown: reduce padding */
  .countdown-body { padding: 1.25rem; }

  /* Daily ritual: reduce padding */
  .daily-ritual-header { margin-bottom: 1.25rem; }
  .daily-ritual-subtitle { font-size: 0.9rem; }

  /* Check-in box: reduce padding */
  .check-in-box { padding: 1.5rem; }

  /* Mood options: allow wrapping on very small screens */
  .mood-selector { flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
  .mood-option { min-width: 44px; min-height: 44px; flex: 0 0 auto; }

  /* Events: compact cards */
  .event-item { padding: 0.75rem 1rem; }
  .event-item-card { padding: 0.75rem 0.875rem; }

  /* Shared spaces: compact */
  .shared-spaces-bento { gap: 1rem; }

  /* Profile: reduce cover height */
  .cover-image-wrapper { height: 150px; }
  .avatar { width: 64px; height: 64px; }

  /* Couple dashboard */
  .couple-dashboard { padding: 1rem; }

  /* Future plans tabs: prevent overflow */
  .future-plans-tabs { gap: 0.25rem; }

  /* Memories grid: single column */
  .memories-grid { grid-template-columns: 1fr; }

  /* Timezone pills: compact */
  .timezone-pill { padding: 0.35rem 0.75rem; font-size: 0.8rem; }

  /* Notification dropdown: full-width on mobile */
  .notification-dropdown {
    position: fixed;
    top: 64px;
    left: 0.5rem;
    right: 0.5rem;
    width: auto;
    max-width: none;
    max-height: 60vh;
  }

  .notification-row .notification-link {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .notification-row__action {
    display: none;
  }

  /* Profile body: allow wrap */
  .profile-body { flex-wrap: wrap; }

  /* Header card: reduce padding */
  .header-card, .card { padding: 1.25rem 1rem; }

  /* Touch target: ensure icon/interactive elements >= 44px */
  .widget-add-btn { min-width: 44px; min-height: 44px; }
  .status-chat-btn { width: 44px; height: 44px; }
  .bell-icon { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .btn-sm { height: 44px !important; min-height: 44px !important; padding: 0 1.25rem !important; }
  .btn-mark-read { min-height: 44px; display: inline-flex; align-items: center; }
}

/* =============================================
   MOBILE RESPONSIVENESS — 375px / 390px
   ============================================= */

/* 390px breakpoint — iPhone 14/15, most modern phones */
@media (max-width: 390px) {
  /* Reduce card & header padding for narrow screens */
  .header-card,
  .card {
    padding: 1.25rem 1.25rem;
  }

  /* Downsize oversized type */
  .welcome-title          { font-size: 1.5rem; }
  .daily-ritual-title     { font-size: 1.75rem; }
  .couple-dashboard-title { font-size: 1.75rem; }
  .countdown-number       { font-size: 2.5rem; }
  .shared-spaces-page-title { font-size: 1.5rem; }

  /* Reduce tab panel gutter */
  .tab-panel { padding: 1rem 1rem 6rem; }
}

/* 375px breakpoint — iPhone SE, smallest supported viewport */
@media (max-width: 375px) {
  /* Shrink tab bar items to fit 5 tabs */
  .tab-bar-item {
    padding: 0.5rem 0.25rem;
    font-size: 0.65rem;
  }
  .tab-bar-item .tab-icon {
    font-size: 1.25rem;
  }

  /* Further reduce card padding */
  .header-card,
  .card {
    padding: 1rem 1rem;
  }
  .tab-panel { padding: 0.75rem 0.75rem 6rem; }

  /* Aggressive type downsize for tiny screens */
  .welcome-title          { font-size: 1.35rem; }
  .daily-ritual-title     { font-size: 1.5rem; }
  .couple-dashboard-title { font-size: 1.5rem; }
  .countdown-number       { font-size: 2rem; }
  .shared-spaces-page-title { font-size: 1.35rem; }
}
/* =============================================
   PROFILE PAGE TABS
   ============================================= */

.profile-tabs {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(253, 249, 240, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 54, 51, 0.06);
  border-radius: var(--radius-full);
  padding: 4px;
  box-shadow: var(--shadow-glass);
  scrollbar-width: none;
}
.profile-tabs::-webkit-scrollbar { display: none; }

.profile-tab-btn {
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  padding: 0.55rem 1.1rem;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile-tab-btn:hover {
  background: var(--surface-container);
  color: var(--primary);
}

.profile-tab-btn--active {
  background: var(--primary);
  color: var(--on-primary);
}

.profile-tab-btn--active:hover {
  background: var(--primary);
  color: var(--on-primary);
  filter: brightness(1.05);
}

.hidden {
  display: none !important;
}

.profile-settings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .profile-settings-grid {
    grid-template-columns: 2fr 1fr;
  }
}


.profile-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.profile-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 640px) {
  .profile-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   COUPLE EDIT PAGE
   ========================================================================== */

.edit-profile-page {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem;
}

.edit-profile-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-section {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--outline-variant);
}

.appearance-section {
  background: var(--surface-container-lowest);
}

.settings-section-copy {
  margin-bottom: 1rem;
}

.appearance-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.appearance-status {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.billing-settings__header,
.billing-settings__manage,
.billing-plan__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.billing-settings__header,
.billing-plan__header {
  align-items: flex-start;
}

.billing-settings__manage {
  align-items: center;
}

.billing-settings__status,
.billing-plan__badge {
  border: 1px solid var(--primary-glass-border);
  border-radius: var(--radius-full);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  padding: 0.45rem 0.65rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.billing-settings__plan {
  color: var(--text);
  font-weight: 800;
  margin: 0 0 0.25rem;
}

.billing-plan-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.billing-plan {
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1rem;
}

.billing-plan--recommended {
  background: var(--primary-wash);
  border-color: var(--primary-glass-border);
}

.billing-plan__title {
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 0.35rem;
}

.billing-plan__price {
  color: var(--primary);
  font-family: var(--headline-font);
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
}

.billing-plan__meta {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin: 0.35rem 0 0;
}

.billing-settings__button {
  justify-content: center;
  width: 100%;
}

.billing-settings__notice {
  align-items: center;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  display: flex;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
}

.theme-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.theme-choice {
  appearance: none;
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  color: var(--text);
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.875rem;
  min-height: 92px;
  padding: 0.875rem;
  text-align: left;
  transition: var(--transition);
  font-family: var(--font-family);
}

.theme-choice:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.theme-choice--active {
  border-color: var(--primary);
  background: var(--primary-wash);
  box-shadow: 0 0 0 4px var(--primary-hairline), var(--shadow-sm);
}

.theme-choice strong {
  display: block;
  color: var(--primary);
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.theme-choice small {
  color: var(--text-muted);
  display: block;
  font-size: 0.75rem;
  line-height: 1.4;
}

.theme-choice-preview {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: flex;
  align-items: flex-end;
  padding: 7px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--primary-glass-border);
}

.theme-choice-preview span {
  width: 100%;
  height: 16px;
  border-radius: 9999px;
  display: block;
}

.theme-choice-preview--night {
  background: var(--theme-preview-night-bg);
}

.theme-choice-preview--night span {
  background: var(--theme-preview-night-accent);
}

.theme-choice-preview--midnight {
  background: var(--theme-preview-midnight-bg);
}

.theme-choice-preview--midnight span {
  background: var(--theme-preview-midnight-accent);
}

.google-calendar-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.connection-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--primary);
  font-weight: 700;
}

.google-calendar-email,
.google-calendar-sync-time {
  color: var(--text-muted);
}

.google-calendar-empty {
  margin: 0;
}

.google-calendar-connect {
  text-decoration: none;
}

@media (max-width: 560px) {
  .appearance-header,
  .theme-choice-grid,
  .billing-plan-grid {
    grid-template-columns: 1fr;
  }

  .appearance-header,
  .billing-settings__header,
  .billing-settings__manage {
    display: grid;
  }
}

/* ==========================================================================
   LOVE LANGUAGE QUIZ
   ========================================================================== */

.love-language-page {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5rem;
}

.love-language-card {
  width: 100%;
  padding: 2rem;
}

.love-language-header {
  margin-bottom: 1.5rem;
}

.love-language-title {
  font-size: 2.25rem;
  margin-bottom: 1rem;
}

.love-language-lede {
  font-size: 1.05rem;
  max-width: 62ch;
}

.love-language-guidance,
.love-language-tip {
  background: var(--surface-container);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-md);
  color: var(--primary);
  margin-bottom: 2rem;
  padding: 1.25rem;
}

.love-language-guidance p,
.love-language-tip p {
  margin: 0;
}

.love-language-progress-card {
  border: 1px solid var(--primary-glass-border);
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  color: var(--text-muted);
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1.5rem;
  padding: 1rem;
  text-align: center;
}

.love-language-progress-card span {
  font-size: 0.82rem;
  font-weight: 800;
}

.love-language-form,
.love-language-question-list,
.love-language-score-list {
  display: flex;
  flex-direction: column;
}

.love-language-form,
.love-language-question-list {
  gap: 2rem;
}

.form-error-panel {
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  color: var(--danger);
  padding: 1.25rem;
}

.form-error-panel h2 {
  color: var(--danger);
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.form-error-panel ul {
  list-style: inside;
  margin: 0.5rem 0 0;
  padding: 0;
}

.love-language-question {
  border: 0;
  border-bottom: 1px solid var(--outline-variant);
  margin: 0;
  padding: 0 0 1.5rem;
}

.love-language-question legend {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0;
}

.love-language-question-number {
  color: var(--primary);
  font-family: var(--headline-font);
  font-size: 1.25rem;
  font-weight: 700;
}

.love-language-question-text {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 500;
}

.love-language-scale,
.love-language-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.love-language-scale {
  padding-left: 2.4rem;
}

.love-language-scale-option {
  align-items: center;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  transition: var(--transition);
}

.love-language-scale-option:hover {
  background: var(--surface-container);
}

.love-language-scale-option span {
  color: var(--text-muted);
  font-weight: 700;
}

.love-language-scale-option .love-language-scale-option__value {
  color: var(--primary);
}

.love-language-scale-option__label {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.love-language-actions {
  margin-top: 0.5rem;
}

.love-language-result-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 2.5rem;
}

.love-language-result-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2rem;
}

.love-language-result-card--primary {
  background: var(--primary);
  color: var(--on-primary);
}

.love-language-result-card--secondary {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.love-language-result-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 0.75rem;
  opacity: 0.85;
  text-transform: uppercase;
}

.love-language-result-title {
  color: inherit;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.love-language-score {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

.love-language-score span {
  font-size: 1.5rem;
}

.love-language-result-copy {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 1rem 0 0;
  opacity: 0.9;
}

.love-language-score-card {
  background: var(--surface-container);
  border-radius: var(--radius-lg);
  margin-bottom: 2rem;
  padding: 2rem;
}

.love-language-score-card h3 {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

.love-language-score-list {
  gap: 1rem;
}

.love-language-score-row {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(120px, 0.7fr) minmax(120px, 1fr) auto;
}

.love-language-score-name {
  color: var(--text-muted);
  font-weight: 700;
}

.love-language-meter {
  appearance: none;
  block-size: 0.75rem;
  inline-size: 100%;
}

.love-language-meter::-webkit-progress-bar {
  background: var(--surface-container-high);
  border-radius: var(--radius-full);
}

.love-language-meter::-webkit-progress-value {
  background: var(--primary);
  border-radius: var(--radius-full);
}

.love-language-meter::-moz-progress-bar {
  background: var(--primary);
  border-radius: var(--radius-full);
}

.love-language-score-value {
  color: var(--primary);
  font-weight: 800;
  text-align: right;
}

.love-language-tip {
  background: var(--secondary-container);
  border-left-color: var(--secondary);
  color: var(--on-secondary-container);
  margin-bottom: 2.5rem;
}

.love-language-tip h3 {
  color: inherit;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.love-language-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
}

@media (max-width: 640px) {
  .love-language-page {
    padding: 0.75rem 0.75rem 6.5rem;
  }

  .love-language-card,
  .love-language-score-card,
  .love-language-result-card {
    padding: 1rem;
  }

  .love-language-header {
    margin-bottom: 1rem;
  }

  .love-language-title {
    font-size: 1.55rem;
    margin-bottom: 0.5rem;
  }

  .love-language-lede {
    font-size: 0.95rem;
  }

  .love-language-guidance,
  .love-language-tip {
    margin-bottom: 1rem;
    padding: 0.85rem;
  }

  .love-language-progress-card {
    gap: 0.35rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 1rem;
    padding: 0.75rem;
    text-align: left;
  }

  .love-language-progress-card span {
    font-size: 0.7rem;
  }

  .love-language-form,
  .love-language-question-list {
    gap: 1.25rem;
  }

  .love-language-question legend,
  .love-language-score-row {
    grid-template-columns: 1fr;
  }

  .love-language-question {
    padding-bottom: 1rem;
  }

  .love-language-question legend {
    gap: 0.65rem;
    margin-bottom: 0.75rem;
  }

  .love-language-question-number {
    font-size: 1.05rem;
  }

  .love-language-question-text {
    font-size: 0.95rem;
  }

  .love-language-scale {
    display: grid;
    gap: 0.35rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-left: 0;
  }

  .love-language-scale-option {
    align-items: center;
    flex-direction: column;
    gap: 0.2rem;
    min-height: 3rem;
    padding: 0.35rem 0.2rem;
    text-align: center;
  }

  .love-language-scale-option__label {
    font-size: 0.58rem;
    line-height: 1.05;
  }
}

.section-title {
  font-family: var(--headline-font);
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 16px;
}

.section-header--dashboard {
  margin-bottom: 1.5rem;
}

.section-title--icon {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.section-subtitle {
  color: var(--text-muted);
}

.current-image-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.preview-cover {
  width: 160px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-default);
  border: 1px solid var(--outline-variant);
}

.preview-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--outline-variant);
}

.current-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.file-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
  font-family: var(--font-family);
}

.file-input {
  display: block;
  max-width: 100%;
  font-size: 0.875rem;
  color: var(--text);
  font-family: var(--font-family);
}

.file-input::file-selector-button {
  appearance: none;
  -webkit-appearance: none;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius-full);
  padding: 0.4rem 1rem;
  font-size: 0.8125rem;
  font-family: var(--font-family);
  font-weight: 600;
  cursor: pointer;
  margin-right: 0.75rem;
  transition: var(--transition);
}

.file-input::file-selector-button:hover {
  opacity: 0.9;
}

.field-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 6px 0 0;
}

.field-hint--right {
  text-align: right;
}

.form-section-footer {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--outline-variant);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text);
  font-family: var(--font-family);
}

.toggle-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-container-high);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row--sub { padding-left: 20px; }

.toggle-group {
  margin-top: 8px;
  border-top: 1px solid var(--surface-container-high);
}

.toggle-input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* Calendar tab */
.calendar-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.calendar-title {
  margin: 0;
  font-size: 1.25rem;
}

.calendar-sync-panel {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-default);
}

.calendar-sync-label {
  cursor: pointer;
  flex: 1;
  margin: 0;
}

.calendar-sync-toggle {
  cursor: pointer;
}

.calendar-sync-copy {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  width: 100%;
}

.calendar-weekday {
  text-align: center;
  font-weight: 600;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.calendar-day {
  min-height: 80px;
  padding: 0.5rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--surface-container-lowest);
}

.calendar-day--muted {
  opacity: 0.5;
}

.calendar-day--today {
  background: var(--secondary-container);
  border-color: var(--primary);
}

.calendar-day-number {
  font-weight: 600;
  color: var(--text);
}

.calendar-day--today .calendar-day-number {
  color: var(--primary);
}

.calendar-day-events {
  flex: 1;
  overflow-y: auto;
}

.calendar-event-chip {
  background: var(--surface-container);
  color: var(--primary);
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-more-count {
  color: var(--text-muted);
  font-size: 0.65rem;
}

.calendar-upcoming {
  padding-top: 1rem;
  border-top: 1px solid var(--outline-variant);
}

.calendar-upcoming-title {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-family);
}

.calendar-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
}

.calendar-upcoming-item {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--surface-container-low);
}

.calendar-upcoming-body {
  flex: 1;
}

.calendar-upcoming-name {
  font-weight: 600;
  font-size: 0.875rem;
}

.calendar-upcoming-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.calendar-google-badge {
  font-size: 0.65rem;
  background: var(--surface-container-high);
  color: var(--text-muted);
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
}

.shared-space-card {
  margin-bottom: 0;
}

.events-list {
  gap: 0.5rem;
}

.event-item--anniversary {
  background: var(--surface-container-high);
  border-color: var(--primary);
}

.event-anniversary-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.events-empty-state {
  padding: 1.5rem;
  border: 2px dashed var(--outline-variant);
  background: transparent;
  margin: 0.5rem 0;
}

.events-empty-icon {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.events-empty-copy {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.event-form-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
  width: 100%;
}

.event-form-row {
  display: flex;
  gap: 0.5rem;
}

.event-form-row .form-input-sm {
  flex: 1;
}

.event-form-submit {
  margin-top: 0.5rem;
}

.calendar-export-actions {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--outline-variant);
}

.calendar-export-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.recurrence-selector {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.recurrence-selector__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.recurrence-selector__field--compact {
  font-weight: 400;
}

.recurrence-selector__option-grid,
.recurrence-selector__inline,
.recurrence-selector__stack {
  padding: 0.5rem;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
}

.recurrence-selector__option-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.recurrence-selector__inline,
.recurrence-selector__inline-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.recurrence-selector__stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.recurrence-selector__option-grid[hidden],
.recurrence-selector__inline[hidden],
.recurrence-selector__stack[hidden] {
  display: none;
}

.recurrence-selector__legend {
  width: 100%;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

.recurrence-selector__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.recurrence-selector__checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.recurrence-selector__checkbox {
  cursor: pointer;
  accent-color: var(--primary);
}

.recurrence-selector__select {
  flex: 1;
}

.recurrence-selector__advanced {
  padding-top: 0.5rem;
  border-top: 1px solid var(--outline-variant);
}

.recurrence-selector__summary {
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}

.recurrence-selector__advanced-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* ==========================================================================
   TETHER - CONVERSATIONS
   ========================================================================== */

.dashboard-conversations {
  animation: fadeIn 0.6s ease-out;
}

.dashboard-section {
  margin-top: 2rem;
}

.on-this-day-card {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--primary-wash);
  border-left: 4px solid var(--primary);
}

.on-this-day-title {
  font-size: 1.1rem;
  color: var(--primary);
  margin-bottom: 1rem;
}

.on-this-day-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.on-this-day-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.on-this-day-year {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  margin-top: 0.2rem;
}

.on-this-day-entry-title {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.on-this-day-entry-copy {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.conversation-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5rem;
}

.conversation-empty {
  padding: 3rem;
  background: transparent;
  border: 2px dashed var(--outline-variant);
}

.conversation-start-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--cream-glass);
  border: 1px solid var(--primary-glass-border);
  box-shadow: var(--shadow-glass);
}

.conversation-start-copy {
  max-width: 560px;
}

.conversation-start-eyebrow {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

.conversation-start-card h3 {
  font-family: var(--headline-font);
  color: var(--primary);
  font-size: 1.2rem;
  margin-bottom: 0.35rem;
}

.conversation-start-card p {
  max-width: 62ch;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .conversation-start-card {
    align-items: stretch;
    flex-direction: column;
  }
}

.relationship-overview {
  animation: fadeIn 0.6s ease-out;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.relationship-overview-card {
  margin-bottom: 0;
}

.relationship-overview-card h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.conversation-card {
  padding: 1.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
  border-left: 4px solid var(--primary);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.conversation-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.conversation-card--partner {
  border-left-color: var(--secondary);
}

.conversation-card--partner.partner-authored-surface {
  border-left-color: var(--partner-surface-accent);
}

.conversation-card--partner.partner-authored-surface .conversation-title,
.conversation-card--partner.partner-authored-surface .conversation-body,
.conversation-card--partner.partner-authored-surface .vulnerability-block,
.conversation-card--partner.partner-authored-surface .feeling-tag {
  color: var(--partner-surface-text);
}

.conversation-card--partner.partner-authored-surface .conversation-status,
.conversation-card--partner.partner-authored-surface .vulnerability-block p {
  color: var(--partner-surface-muted);
}

.conversation-card--partner.partner-authored-surface .conversation-type-badge {
  background: color-mix(in srgb, var(--partner-surface-accent) 14%, transparent);
  color: var(--partner-surface-accent);
}

.conversation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.conversation-type-badge {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  background: var(--surface-variant);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.conversation-status {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 600;
}

.conversation-title {
  font-family: var(--headline-font);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: var(--primary);
}

.conversation-body {
  font-size: 0.95rem;
  color: var(--text-soft);
  line-height: 1.5;
  margin: 0;
}

.vulnerability-block {
  background: var(--surface-variant);
  padding: 0.75rem;
  border-radius: 8px;
  font-size: 0.85rem;
}

.feeling-tag {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.feeling-tag span {
  font-weight: 600;
  color: var(--primary);
}

.vote-prompt-box {
  background: linear-gradient(135deg, rgba(var(--primary-rgb, 0, 54, 51), 0.05), rgba(var(--secondary-rgb, 204, 153, 0), 0.05));
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid var(--primary-light);
}

.vote-options {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.vote-notes {
  margin-top: 1rem;
}

.vote-option-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.hidden-radio:checked + .vote-option-content {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

.type-selector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.type-option {
  min-width: 0;
}

.type-option-content {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 5rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.type-icon {
  display: flex;
  flex: 0 0 2.25rem;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
}

.type-icon svg {
  width: 1.875rem;
  height: 1.875rem;
}

.type-label {
  min-width: 0;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}

.hidden-radio:checked + .type-option-content {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb, 0, 54, 51), 0.05);
}

/* Modal Steps */
.modal-step {
  animation: slideIn 0.3s ease-out;
}

.hidden {
  display: none !important;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}


/* Modal Base Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 54, 51, 0.2); /* Tinted teal overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeIn 0.3s var(--ease-soft);
}

.modal-content {
  background: var(--surface);
  padding: 2.5rem;
  border-radius: var(--radius-xl);
  width: 90%;
  max-width: 500px;
  position: relative;
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid rgba(0, 54, 51, 0.05);
}

#conversation-modal .modal-content {
  max-width: 640px;
}

.modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.modal-close:hover {
  background: var(--surface-container);
  color: var(--primary);
}

.modal-header {
  margin-bottom: 2rem;
}

.modal-title {
  font-family: var(--headline-font);
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.modal-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.step-title {
  font-family: var(--headline-font);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--primary);
}

.modal-footer {
  display: flex;
  align-items: center;
  margin-top: 2.5rem;
  gap: 1rem;
}

.modal-summary-box {
  background: rgba(var(--primary-rgb), 0.04);
  padding: 1.25rem;
  border-radius: var(--radius-md);
  border: 1px dashed var(--outline-variant);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-top: 1.5rem;
  color: var(--on-surface-variant);
}

@media (max-width: 640px) {
  #conversation-modal .modal-content {
    width: calc(100% - 2rem);
    padding: 1.5rem;
  }

  .type-selector-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .type-option-content {
    min-height: 4.5rem;
    padding: 0.875rem 1rem;
  }
}