*{box-sizing:border-box}button,textarea{font:inherit}button{cursor:pointer}button:focus-visible,textarea:focus-visible{outline:3px solid rgba(200,87,125,.32);outline-offset:2px}
.app-shell{position:relative;z-index:var(--z-content);width:min(100%,620px);min-height:100dvh;margin:auto;padding:var(--safe-top) 16px calc(var(--tray-height) + var(--safe-bottom) + 28px)}
.topbar{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin:0 4px 18px}
.brand{display:flex;gap:10px;align-items:center}.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:15px;background:rgba(255,255,255,.72);font-size:22px;box-shadow:var(--shadow-soft)}
.brand h1{font-size:20px;margin:0}.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted);font-weight:750}
.page-title{display:flex;gap:12px;align-items:center;margin:0 2px 18px}.page-title h1{font-size:23px;margin:0}.page-title p{margin:2px 0 0;color:var(--color-muted);font-size:12px}
.home-content{min-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - var(--tray-height) - 94px);display:flex;flex-direction:column;justify-content:flex-start;gap:18px}
.hero{padding:18px 6px 4px}.hero h2{font-size:clamp(31px,8vw,42px);line-height:1.04;margin:7px 0 9px;max-width:420px}.hero p,.lead{color:var(--color-muted);line-height:1.5;margin:0}
.home-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.home-actions .nav-card:first-child{grid-column:1/-1}
.home-relationship{font-weight:700}
.home-nearest{display:grid;gap:4px;width:min(100%,420px);padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-soft)}
.home-nearest time{color:var(--color-muted);font-size:.92rem}
.state-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:16px}.button-stack{display:grid;gap:9px}
.date-list,.history-list{display:grid;gap:10px}.detail-flow{display:grid;gap:0}.meta-row{display:flex;flex-wrap:wrap;gap:7px}
.bottom-nav{position:fixed;z-index:var(--z-tray);bottom:var(--safe-bottom);left:50%;transform:translateX(-50%);width:min(calc(100% - 28px),560px);height:var(--tray-height);display:grid;grid-template-columns:repeat(5,1fr);padding:6px;background:rgba(255,250,252,.8);border:1px solid rgba(255,255,255,.72);box-shadow:var(--shadow-tray);border-radius:24px;backdrop-filter:blur(var(--blur));overflow:hidden}
.bottom-nav::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:calc((100% - 12px)/5);border-radius:18px;background:rgba(255,255,255,.68);box-shadow:0 6px 20px rgba(87,50,67,.09);transition:transform var(--motion-normal) var(--ease)}
.bottom-nav[data-active="dates"]::before{transform:translateX(100%)}.bottom-nav[data-active="history"]::before{transform:translateX(200%)}.bottom-nav[data-active="moments"]::before{transform:translateX(300%)}.bottom-nav[data-active="wishes"]::before{transform:translateX(400%)}
.bottom-nav[data-active="none"]::before{opacity:0}
.bottom-nav button{position:relative;z-index:1;min-width:44px;min-height:44px;border:0;background:transparent;color:var(--color-muted);padding:6px 2px;border-radius:17px;font-size:11px}.bottom-nav button span{display:block;font-size:19px;margin-bottom:1px}.bottom-nav button.active{color:var(--color-primary-deep);font-weight:750}
.dialog{z-index:var(--z-modal)}
@media(max-width:360px){.app-shell{padding-left:12px;padding-right:12px}.hero h2{font-size:29px}.home-actions{gap:8px}.page-title{margin-bottom:14px}}
@media(max-height:620px){.topbar{margin-bottom:8px}.home-content{gap:8px}.hero{padding-top:4px}.hero h2{font-size:28px}.nav-card{min-height:96px!important;padding:14px!important}.nav-icon{margin-bottom:8px!important}.background-bottom{height:120px}}

html[data-viewport-layout="desktop"] .app-shell {
  display: grid;
  grid-template-columns: clamp(160px, 21vw, 240px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 30px;
  row-gap: 22px;
  width: min(1160px, calc(100% - 48px));
  min-height: calc(100dvh - 48px);
  margin: 24px auto;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 32px;
  background: rgba(255, 250, 252, .12);
}

html[data-viewport-layout="desktop"] .topbar {
  grid-column: 1;
  grid-row: 1;
  align-items: flex-start;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 22px;
  background: rgba(255, 250, 252, .64);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(var(--blur));
}

html[data-viewport-layout="desktop"] .brand {
  min-width: 0;
}

html[data-viewport-layout="desktop"] .mode-badge,
html[data-viewport-layout="desktop"] .offline-badge {
  align-self: flex-start;
}

html[data-viewport-layout="desktop"] .app-shell > main {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 100%;
  max-width: 840px;
  min-width: 0;
  margin: 0 auto;
  padding: 4px 0 28px;
}

html[data-viewport-layout="desktop"] .bottom-nav {
  position: sticky;
  grid-column: 1;
  grid-row: 2;
  top: 24px;
  left: auto;
  bottom: auto;
  align-self: start;
  width: 100%;
  height: auto;
  transform: none;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 8px;
  border-radius: 20px;
  overflow: visible;
}

html[data-viewport-layout="desktop"] .bottom-nav::before {
  display: none;
}

html[data-viewport-layout="desktop"] .bottom-nav button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 48px;
  padding: 9px 12px;
  text-align: left;
  font-size: 13px;
}

html[data-viewport-layout="desktop"] .bottom-nav button span {
  display: grid;
  place-items: center;
  width: 28px;
  margin: 0;
  font-size: 20px;
}

html[data-viewport-layout="desktop"] .bottom-nav button.active {
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 6px 18px rgba(87, 50, 67, .1);
}

html[data-viewport-layout="desktop"] .home-content {
  min-height: 0;
  gap: 24px;
}

html[data-viewport-layout="desktop"] .hero {
  padding: 34px 8px 12px;
}

html[data-viewport-layout="desktop"] .hero h2 {
  font-size: clamp(42px, 4vw, 58px);
  max-width: 640px;
}

html[data-viewport-layout="desktop"] .home-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

html[data-viewport-layout="desktop"] .page-title {
  margin-bottom: 22px;
}

html[data-viewport-layout="desktop"] .page-title h1 {
  font-size: 30px;
}

html[data-viewport-layout="desktop"] .state-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

html[data-viewport-layout="desktop"] .date-list,
html[data-viewport-layout="desktop"] .history-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

html[data-viewport-layout="desktop"] .date-detail-page {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-rows: auto 1fr;
  gap: 0 28px;
  max-width: 880px;
}

html[data-viewport-layout="desktop"] .date-detail-page .page-title {
  grid-column: 1 / -1;
}

html[data-viewport-layout="desktop"] .date-detail-page .detail-hero {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  padding: 24px;
  border-radius: 24px;
  background: rgba(255, 250, 252, .7);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(var(--blur));
}

html[data-viewport-layout="desktop"] .date-detail-page .detail-flow {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  padding: 8px 22px;
  border-radius: 24px;
  background: rgba(255, 250, 252, .7);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(var(--blur));
}

@media (min-width: 900px) {
  html[data-preview-mode="mobile"] .app-shell {
    width: min(430px, calc(100% - 48px));
    min-height: calc(100dvh - 48px);
    margin: 24px auto;
    border-radius: 28px;
  }
}

@media (max-width: 899px) {
  html[data-viewport-layout="desktop"] .app-shell {
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 10px;
    width: calc(100% - 16px);
    min-height: calc(100dvh - 16px);
    margin: 8px auto;
    padding: 10px;
    border-radius: 22px;
  }

  html[data-viewport-layout="desktop"] .topbar {
    gap: 8px;
    padding: 8px;
  }

  html[data-viewport-layout="desktop"] .brand-mark {
    width: 32px;
    height: 32px;
  }

  html[data-viewport-layout="desktop"] .brand h1 {
    font-size: 14px;
  }

  html[data-viewport-layout="desktop"] .brand .eyebrow,
  html[data-viewport-layout="desktop"] .mode-badge,
  html[data-viewport-layout="desktop"] .offline-badge {
    display: none;
  }

  html[data-viewport-layout="desktop"] .bottom-nav button {
    gap: 4px;
    padding: 5px;
    font-size: 9px;
  }

  html[data-viewport-layout="desktop"] .app-shell > main {
    padding-bottom: 180px;
  }

  html[data-viewport-layout="desktop"] .state-grid,
  html[data-viewport-layout="desktop"] .date-list,
  html[data-viewport-layout="desktop"] .history-list,
  html[data-viewport-layout="desktop"] .date-detail-page {
    grid-template-columns: 1fr;
  }

  html[data-viewport-layout="desktop"] .date-detail-page .page-title,
  html[data-viewport-layout="desktop"] .date-detail-page .detail-hero,
  html[data-viewport-layout="desktop"] .date-detail-page .detail-flow {
    grid-column: 1;
    grid-row: auto;
  }
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
strong {
  font-family: var(--font-heading);
}

button,
textarea,
select,
input {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.35;
}

button:focus-visible,
textarea:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.topbar {
  color: var(--color-ink);
}

.brand {
  padding: 6px 10px;
  border-radius: 16px;
  background: var(--title-surface);
  backdrop-filter: blur(12px);
}

.brand h1 {
  font-size: 21px;
  font-weight: 750;
  line-height: 1.2;
  text-shadow: var(--heading-shadow);
}

.eyebrow {
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.25;
}

.page-title {
  width: fit-content;
  max-width: 100%;
  padding: 8px 12px 8px 8px;
  border-radius: 18px;
  background: var(--title-surface);
  backdrop-filter: blur(12px);
}

.page-title h1 {
  font-weight: 760;
  line-height: 1.18;
  text-shadow: var(--heading-shadow);
}

.page-title p {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.35;
}

.hero {
  width: fit-content;
  max-width: 100%;
  padding: 16px 18px;
  border-radius: 24px;
  background: var(--title-surface);
  backdrop-filter: blur(12px);
}

.hero h2 {
  font-weight: 780;
  letter-spacing: -.025em;
  text-shadow: var(--heading-shadow);
}

.hero p,
.lead {
  color: var(--color-muted);
  font-size: 16px;
  line-height: 1.55;
}

.bottom-nav {
  border-color: var(--color-line);
  background: var(--nav-surface);
}

.bottom-nav::before {
  background: var(--nav-active-bg);
}

.bottom-nav button {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 650;
}

.bottom-nav button.active {
  color: var(--nav-active-text);
  font-weight: 760;
}

html[data-viewport-layout="desktop"] .brand {
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}

html[data-viewport-layout="desktop"] .topbar {
  border-color: var(--color-line);
  background: var(--color-surface);
}

html[data-viewport-layout="desktop"] .bottom-nav button {
  font-size: 14px;
}

html[data-viewport-layout="desktop"] .bottom-nav button.active {
  background: var(--nav-active-bg);
}

html[data-viewport-layout="desktop"] .date-detail-page .detail-hero,
html[data-viewport-layout="desktop"] .date-detail-page .detail-flow {
  background: var(--color-surface);
}

html:not([data-viewport-layout="desktop"]) .bottom-nav button {
  min-width: 0;
  padding-inline: 1px;
  font-size: 9px;
}

html:not([data-viewport-layout="desktop"]) .bottom-nav button span {
  font-size: 16px;
}

@media (max-width: 360px) {
  .brand {
    padding: 5px 8px;
  }

  .brand h1 {
    font-size: 19px;
  }

  .hero {
    padding: 13px 14px;
  }
}

/* The final visual pass keeps most of the approved background exposed. */
.home-content {
  justify-content: space-between;
  gap: 12px;
}

.hero {
  padding: 10px 12px;
}

.home-actions {
  align-self: stretch;
  gap: 8px;
}

.date-swipe-screen {
  width: min(100%, 520px);
  margin-inline: auto;
}

html[data-viewport-layout="desktop"] .home-content {
  justify-content: space-between;
}

html[data-viewport-layout="desktop"] .home-actions {
  max-width: 690px;
}

html[data-viewport-layout="desktop"] .date-swipe-screen {
  width: min(100%, 640px);
}