:root {
  --ios-blue: #007aff;
  --label: #111113;
  --secondary: #6e6e73;
  --tertiary: #a1a1a6;
  --fill: #f5f5f7;
  --separator: rgba(60, 60, 67, 0.16);
  --radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #e8e8ed;
  color: var(--label);
}

button {
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.phone-shell {
  position: relative;
  width: min(390px, 100vw);
  height: min(844px, 100vh);
  overflow: hidden;
  background: #fff;
  border-radius: 44px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22);
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

.screen.is-active {
  display: flex;
}

.status-bar {
  height: 48px;
  padding: 15px 26px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

.login-content {
  flex: 1;
  padding: 54px 32px 0;
  text-align: center;
}

.app-mark {
  width: 78px;
  height: 78px;
  margin: 0 auto 22px;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.app-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.app-mark span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #e85f83;
  font-size: 44px;
  font-weight: 700;
}

.gift-grid button span {
  display: block;
  font-size: 34px;
}

.gift-grid button strong {
  display: block;
  margin-top: 8px;
  color: #ff6f91;
  font-size: 14px;
  letter-spacing: 0;
}

.gift-grid button:nth-child(1) {
  background: #ffeef4;
}

.gift-grid button:nth-child(2) {
  background: #fff6d9;
}

.gift-grid button:nth-child(3) {
  background: #eff8ff;
}

.gift-grid button:nth-child(4) {
  background: #f2eeff;
}

.gift-grid button {
  width: 118px;
  height: 112px;
  border-radius: 26px;
  box-shadow: inset 0 0 0 1px rgba(255, 111, 145, 0.09);
}

.gift-grid {
  display: grid;
  grid-template-columns: repeat(2, 118px);
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}

.gift-heading p {
  margin-top: 10px;
  color: #9a7a8a;
  font-size: 15px;
  font-weight: 500;
}

.gift-heading h3 {
  margin: 0;
  color: #ff5f87;
  font-size: 27px;
  line-height: 1.12;
  font-weight: 800;
}

.gift-section {
  position: relative;
  z-index: 1;
  margin: 10px 26px 0;
  padding: 28px 24px 30px;
  text-align: center;
  border: 1px solid rgba(255, 143, 171, 0.13);
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 28px rgba(255, 111, 145, 0.09);
}

/*
  Legacy photo-prototype styles remain below because the static preview can still
  contain older hidden elements in local experiments.
*/

.app-mark span {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
}

h1,
h2,
p {
  margin: 0;
}

.login-content h1 {
  font-size: 31px;
  line-height: 1.08;
  font-weight: 700;
}

.login-content p {
  margin-top: 10px;
  color: var(--secondary);
  font-size: 15px;
}

.face-button {
  width: 100%;
  height: 50px;
  margin-top: 36px;
  border-radius: 14px;
  background: var(--ios-blue);
  color: #fff;
  font-weight: 600;
}

.passcode {
  margin: 24px auto 8px;
  display: flex;
  justify-content: center;
  gap: 14px;
}

.passcode span {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--tertiary);
  border-radius: 50%;
}

.passcode.is-filled span {
  background: var(--label);
  border-color: var(--label);
}

.passcode span.is-filled {
  background: var(--label);
  border-color: var(--label);
}

.passcode-hint {
  min-height: 18px;
  color: var(--secondary);
  font-size: 13px;
}

.passcode-hint.is-error {
  color: #ff3b30;
}

.number-pad {
  width: 252px;
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 18px;
}

.number-pad button {
  width: 72px;
  height: 52px;
  border-radius: 26px;
  background: var(--fill);
  font-size: 24px;
  font-weight: 400;
}

.text-button,
.text-action {
  color: var(--ios-blue);
  font-size: 16px;
  font-weight: 500;
}

.privacy-note {
  padding-bottom: 31px;
  text-align: center;
  color: var(--secondary);
  font-size: 12px;
}

.menu-screen,
.finance-screen,
.simple-feature-screen,
.fitness-screen,
.food-screen,
.travel-screen,
.wellness-screen {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 127, 159, 0.18), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(97, 199, 182, 0.18), transparent 28%),
    linear-gradient(135deg, #fff8fb 0%, #f6fbff 54%, #fff7e8 100%);
}

.money-flow-screen {
  overflow-y: auto;
  background: #f4f7f7;
}

.menu-screen {
  overflow-y: auto;
}

.menu-content {
  flex: 1;
  padding: 42px 24px 24px;
}

.menu-content h2 {
  font-size: 31px;
  line-height: 1.08;
  font-weight: 800;
}

.menu-content > p {
  margin-top: 8px;
  color: #8b7b87;
  font-size: 16px;
  font-weight: 500;
}

.feature-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  grid-auto-rows: 166px;
}

.feature-card {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 28px;
  color: #fff;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.1);
}

.feature-card span {
  font-size: 38px;
}

.feature-card strong {
  margin-top: auto;
  font-size: 25px;
  line-height: 1;
  font-weight: 800;
}

.feature-card em {
  margin-top: 6px;
  font-style: normal;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}

.birthday-card {
  background: linear-gradient(135deg, #ff7aa8, #ffd1dc);
}

.finance-card {
  background: linear-gradient(135deg, #61c7b6, #d8fff5);
}

.food-card {
  background: linear-gradient(135deg, #ffb45e, #ffe6b8);
}

.travel-card {
  background: linear-gradient(135deg, #8d8bff, #e5e4ff);
}

.fitness-card {
  background: linear-gradient(135deg, #3dae8b, #bcefd1);
}

.wellness-card {
  background: linear-gradient(135deg, #73a970, #e0f2cc);
}

.money-flow-card {
  background: linear-gradient(135deg, #267c86, #9ed8d5);
}

.money-flow-content {
  padding: 24px 20px 32px;
  color: #12353a;
}

.flow-date-selector {
  margin-bottom: 20px;
}

.flow-date-selector small {
  color: #52656a;
  font-size: 12px;
  font-weight: 800;
}

.flow-date-selector > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.flow-date-selector button {
  width: 100%;
  padding: 9px 12px;
  border-radius: 9px;
  color: #267c86;
  background: #f0f6f6;
  font-size: 12px;
  font-weight: 800;
}

.flow-date-selector button.is-active {
  color: #fff;
  background: #267c86;
}

.flow-market-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 14px;
}

.flow-market-summary small,
.flow-section-label {
  color: #52656a;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.flow-market-summary h2 {
  margin-top: 6px;
  font-size: 38px;
  line-height: 1;
}

.flow-benchmark-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.flow-benchmark-heading small {
  color: #52656a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.flow-benchmark-heading strong {
  display: block;
  margin-top: 6px;
  color: #12353a;
  font-size: 27px;
  line-height: 1.05;
}

.flow-benchmark-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.flow-benchmark-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid #cfe2e1;
  border-radius: 10px;
  color: #12353a;
  background: #e9f6f5;
  text-align: left;
}

.flow-benchmark-card > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.flow-benchmark-card > div strong {
  font-size: 18px;
}

.flow-benchmark-card > div span,
.flow-benchmark-card small {
  overflow: hidden;
  color: #52656a;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-benchmark-card b {
  display: block;
  margin-top: 10px;
  font-size: 16px;
}

.flow-benchmark-card small {
  display: block;
  margin-top: 5px;
}

@media (max-width: 360px) {
  .flow-benchmark-grid { grid-template-columns: 1fr; }
}

.flow-strength {
  padding: 9px 12px;
  border-radius: 8px;
  color: #147a49;
  background: #e3f6ec;
  font-size: 13px;
  font-weight: 800;
}

.flow-demo-note,
.flow-scope,
.flow-disclaimer {
  margin-top: 10px;
  color: #718084;
  font-size: 12px;
  line-height: 1.45;
}

.flow-data-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 7px;
  color: #52656a;
  font-size: 11px;
  line-height: 1.4;
}

.flow-data-meta span {
  max-width: 100%;
}

.flow-ai-analysis {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #cfe2e1;
  border-radius: 8px;
  color: #12353a;
  background: #f2f8f8;
}

.flow-ai-analysis small {
  color: #267c86;
  font-size: 11px;
  font-weight: 800;
}

.flow-ai-analysis h3 {
  margin-top: 6px;
  font-size: 18px;
}

.flow-ai-analysis > strong {
  display: inline-block;
  margin-top: 7px;
  color: #147a49;
  font-size: 14px;
}

.flow-ai-analysis p,
.flow-ai-analysis em {
  display: block;
  margin-top: 7px;
  color: #52656a;
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}

.flow-ai-analysis div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.flow-ai-analysis div span {
  padding: 5px 7px;
  border-radius: 6px;
  color: #267c86;
  background: #e3f1f0;
  font-size: 11px;
  font-weight: 700;
}

.flow-scope {
  margin-top: 4px;
  color: #8a6d32;
  font-weight: 700;
}

.flow-early-filter {
  margin-top: 6px;
  color: #267c86;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.flow-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  margin-top: 16px;
  padding: 0 12px;
  border-radius: 10px;
  color: #607579;
  background: #eaf1f1;
}

.flow-search-wrap span { font-size: 22px; line-height: 1; }
.flow-search-wrap input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: #12353a;
  background: transparent;
  font: inherit;
  font-size: 14px;
}

.flow-search-results {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.flow-search-results-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  color: #52656a;
  font-size: 12px;
}

.flow-search-results-heading strong {
  color: #267c86;
  font-weight: 800;
}

.flow-search-results button {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #cfe2e1;
  border-radius: 8px;
  color: #12353a;
  background: #f7fbfb;
  text-align: left;
}

.flow-search-results button strong {
  color: #12353a;
  font-size: 14px;
}

.flow-search-results button span,
.flow-search-results button em {
  overflow: hidden;
  color: #52656a;
  font-size: 12px;
  font-style: normal;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-search-results button em {
  color: #267c86;
  font-size: 11px;
  font-weight: 700;
}

.flow-search-results button.is-loading {
  border-color: #267c86;
  background: #e9f6f5;
}

.flow-search-results button.is-pending {
  border-color: #267c86;
  background: #e9f6f5;
}

.flow-confirm-button {
  width: 100%;
  margin-top: 3px;
  padding: 11px 14px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #267c86;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.flow-confirm-button:active {
  background: #1d626a;
}

@media (max-width: 360px) {
  .flow-search-results button { grid-template-columns: 58px 1fr; }
  .flow-search-results button em { grid-column: 2; }
}

.flow-watchlist {
  display: flex;
  gap: 7px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.flow-watchlist small {
  flex: 0 0 auto;
  align-self: center;
  color: #718084;
  font-size: 12px;
  font-weight: 700;
}

.flow-watchlist button {
  flex: 0 0 auto;
  padding: 7px 9px;
  border: 1px solid #cfe2e1;
  border-radius: 8px;
  color: #267c86;
  background: #f7fbfb;
  font-size: 12px;
  font-weight: 800;
}

.flow-watchlist em {
  margin-left: 4px;
  color: #718084;
  font-style: normal;
  font-weight: 600;
}

.flow-title {
  margin-top: 25px;
  font-size: 21px;
  font-weight: 800;
}

.flow-trend {
  height: 92px;
  margin-top: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 12px;
}

.flow-trend span {
  width: 24px;
  height: var(--height);
  border-radius: 5px 5px 0 0;
  background: #9ed8d5;
}

.flow-trend span:last-child { background: #16854f; }

.flow-trend-empty {
  align-self: center;
  color: #718084;
  font-size: 12px;
}

.flow-list {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.flow-row {
  display: grid;
  grid-template-columns: 24px 54px max-content minmax(52px, 1fr);
  gap: 6px;
  align-items: center;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  color: #12353a;
  background: #fff;
  text-align: left;
}

.flow-row.is-selected {
  border-color: #267c86;
  background: #e9f6f5;
}

.flow-row strong { font-size: 17px; }
.flow-positive { color: #16854f; font-weight: 800; }
.flow-negative { color: #ca3d46; font-weight: 800; }
.flow-score { color: #b26a00; font-weight: 800; text-align: right; }

.flow-out-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #12353a;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.flow-out-row:hover,
.flow-out-row:focus-visible {
  border-color: #e5b3b7;
  background: #fff7f7;
  outline: 0;
}

.flow-out-row.is-selected {
  border-color: #ca3d46;
  background: #fff0f0;
}

.flow-empty,
.flow-history-empty {
  margin: 0;
  padding: 14px;
  border-radius: 8px;
  color: #718084;
  background: #f2f7f7;
  font-size: 13px;
  line-height: 1.4;
}

.flow-watchlist-result {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 14px;
  border-radius: 8px;
  color: #52656a;
  background: #f2f7f7;
  font-size: 13px;
  line-height: 1.4;
}

.flow-watchlist-result strong { color: #267c86; }

.flow-history {
  display: grid;
  gap: 8px;
}

.flow-day {
  padding: 13px 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: #fff;
}

.flow-day > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.flow-day strong { font-size: 14px; }
.flow-day span { color: #718084; font-size: 12px; }
.flow-day b { display: block; margin-top: 5px; color: #16854f; font-size: 15px; }
.flow-day p { margin-top: 7px; color: #267c86; font-size: 12px; font-weight: 700; }
.flow-day.is-outflow b { color: #ca3d46; }

.flow-detail-title {
  margin-top: 5px;
  font-size: 22px;
  font-weight: 800;
}

.flow-selected-detail {
  scroll-margin-top: 18px;
  margin-top: 24px;
  padding-top: 2px;
}

.flow-selected-kicker {
  color: #267c86;
  font-size: 12px;
  font-weight: 800;
}

.flow-anomaly-card {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid rgba(38, 124, 134, 0.24);
  border-radius: 8px;
  background: #f2f8f8;
}

.flow-anomaly-card h3 {
  margin: 0 0 14px;
  color: #12353a;
  font-size: 20px;
}

.flow-anomaly-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

.flow-anomaly-grid > div {
  display: grid;
  gap: 3px;
}

.flow-anomaly-grid span {
  color: #52656a;
  font-size: 12px;
}

.flow-anomaly-grid strong {
  color: #16854f;
  font-size: 15px;
}

.flow-anomaly-grid .is-emphasis,
.flow-anomaly-grid .is-signal {
  grid-column: 1 / -1;
  padding-top: 10px;
  border-top: 1px solid rgba(38, 124, 134, 0.16);
}

.flow-anomaly-grid .is-emphasis strong {
  font-size: 18px;
}

.flow-anomaly-grid .is-signal strong {
  color: #16854f;
}

.flow-distribution-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(38, 124, 134, 0.16);
  color: #52656a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.flow-metrics {
  margin-top: 12px;
  padding: 7px 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: #fff;
}

.flow-metric {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  justify-content: space-between;
  padding: 9px 0;
  color: #52656a;
}

.flow-metric strong {
  max-width: 62%;
  color: #718084;
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
}

.flow-metric strong.flow-positive {
  color: #16854f;
  font-size: 14px;
}

.flow-metric-group {
  padding-top: 7px;
  color: #267c86;
  font-size: 12px;
  font-weight: 800;
}

.flow-metric-group.is-alt {
  margin-top: 8px;
  padding-top: 13px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  color: #8a6500;
}

.flow-signal {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(193, 132, 0, 0.22);
  border-radius: 8px;
  color: #704f00;
  background: #fff5da;
}

.flow-signal strong {
  display: block;
  margin-top: 6px;
  font-size: 18px;
}

.flow-signal em {
  display: block;
  margin-top: 6px;
  color: #8a6500;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
}

.flow-signal p { margin-top: 6px; font-size: 14px; line-height: 1.4; }
.flow-disclaimer { text-align: center; }

.finance-content,
.simple-feature-content {
  padding: 34px 24px 24px;
}

.fitness-screen {
  overflow-y: auto;
}

.food-screen {
  overflow-y: auto;
}

.travel-screen {
  overflow-y: auto;
}

.wellness-screen {
  overflow-y: auto;
}

.wellness-content {
  padding: 26px 20px 32px;
}

.wellness-hero {
  padding: 22px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, #507a51, #97c681);
}

.wellness-hero p,
.wellness-hero span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 600;
}

.wellness-hero h2 {
  margin-top: 8px;
  color: #fff;
  font-size: 27px;
  font-weight: 800;
}

.wellness-daily-card {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #dae8d7;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
}

.wellness-daily-card > span {
  font-size: 34px;
}

.wellness-daily-card h3 {
  margin-top: 10px;
  color: #294b2d;
  font-size: 22px;
  font-weight: 800;
}

.wellness-daily-card > p {
  margin-top: 9px;
  color: #506553;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
}

.wellness-action {
  margin-top: 18px;
  padding: 14px;
  border-radius: 14px;
  background: #f1f8ec;
}

.wellness-action strong {
  color: #507a51;
  font-size: 15px;
  font-weight: 800;
}

.wellness-action p {
  margin-top: 4px;
  color: #506553;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.wellness-note {
  margin-top: 14px;
  color: #718174;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.travel-content {
  padding: 24px 20px 28px;
}

.travel-content > h2 {
  color: #303052;
  font-size: 30px;
  font-weight: 800;
}

.travel-subtitle {
  margin-top: 8px;
  color: #77758f;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.landmark-segments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 18px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(118, 116, 141, 0.13);
}

.landmark-segments button {
  min-height: 36px;
  border-radius: 8px;
  color: #65627b;
  font-size: 14px;
  font-weight: 700;
}

.landmark-segments button.is-active {
  color: #3e3a70;
  background: #fff;
  box-shadow: 0 1px 5px rgba(43, 39, 79, 0.14);
}

.landmark-search {
  width: 100%;
  height: 42px;
  margin-top: 12px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  outline: none;
  color: #333047;
  background: rgba(118, 116, 141, 0.11);
  font-size: 15px;
}

.landmark-search:focus {
  box-shadow: inset 0 0 0 2px rgba(92, 87, 168, 0.42);
}

.landmark-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.landmark-list-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  text-align: left;
  background: rgba(255, 255, 255, 0.9);
}

.landmark-list-item > b {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  color: #5c57a8;
  background: #edebff;
  font-size: 13px;
}

.landmark-list-item > span {
  min-width: 0;
}

.landmark-list-item strong,
.landmark-list-item em {
  display: block;
}

.landmark-list-item strong {
  color: #303052;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 800;
}

.landmark-list-item em {
  margin-top: 4px;
  overflow: hidden;
  color: #77758f;
  font-size: 13px;
  line-height: 1.35;
  font-style: normal;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landmark-list-item > i {
  color: #9c99af;
  font-size: 26px;
  font-style: normal;
}

.landmark-empty {
  padding: 40px 12px;
  color: #77758f;
  text-align: center;
  font-size: 15px;
}

.landmark-list-back {
  min-height: 40px;
  padding: 0 4px;
  color: #5c57a8;
  font-size: 16px;
  font-weight: 700;
}

.landmark-detail-hero {
  margin-top: 8px;
  padding: 20px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, #5c57a8, #a8a4e8);
}

.landmark-detail-hero p,
.landmark-detail-hero span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.landmark-detail-hero h2 {
  margin: 7px 0 9px;
  color: #fff;
  font-size: 27px;
  line-height: 1.15;
  font-weight: 800;
}

.landmark-detail-sections {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.landmark-detail-sections article {
  padding: 18px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
}

.landmark-detail-sections h3 {
  color: #403c73;
  font-size: 19px;
  font-weight: 800;
}

.landmark-detail-sections p {
  margin-top: 8px;
  color: #55536a;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.65;
}

.landmark-source-note {
  margin: 15px 8px 0;
  color: #77758f;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.travel-selectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.travel-selectors label {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border-radius: 16px;
  color: #77758f;
  background: #f3f2ff;
  font-size: 13px;
  font-weight: 700;
}

.travel-selectors select {
  width: 100%;
  border: 0;
  outline: 0;
  color: #393754;
  background: transparent;
  font-size: 17px;
  font-weight: 800;
}

.travel-hero {
  margin-top: 16px;
  padding: 22px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, #7775d7, #b9b6ff);
  box-shadow: 0 14px 28px rgba(88, 84, 183, 0.18);
}

.travel-hero h3 {
  color: #fff;
  font-size: 30px;
  font-weight: 800;
}

.travel-hero p {
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.91);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}

.travel-info-card {
  margin-top: 12px;
  padding: 17px;
  border-radius: 18px;
}

.travel-history { background: #f1eeff; }
.travel-food { background: #fff0df; }
.travel-restaurants { background: #e7f8f1; }

.travel-info-card h3,
.travel-note-title {
  color: #393754;
  font-size: 18px;
  font-weight: 800;
}

.travel-info-card p {
  margin-top: 8px;
  color: #625f78;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.travel-detail-entry {
  margin-top: 12px;
  padding: 13px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.72);
}

.travel-detail-entry h4 {
  color: #514e69;
  font-size: 16px;
  font-weight: 800;
}

.travel-detail-entry p {
  margin-top: 6px;
}

.travel-info-card > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.travel-info-card span {
  padding: 8px 11px;
  border-radius: 11px;
  color: #514e69;
  background: rgba(255, 255, 255, 0.74);
  font-size: 14px;
  font-weight: 700;
}

.travel-visited,
.travel-note-submit {
  width: 100%;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  color: #fff;
  background: #7775d7;
  font-size: 16px;
  font-weight: 800;
}

.travel-visited.is-done { background: #57b78b; }

.travel-note-title { margin-top: 22px; }

.travel-content textarea {
  width: 100%;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  color: #454361;
  background: rgba(255, 255, 255, 0.9);
  font: inherit;
  line-height: 1.4;
  resize: vertical;
}

.travel-note-submit {
  margin-top: 10px;
  background: #4e4ca6;
}

.travel-note-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.travel-note-list p {
  padding: 16px;
  border-radius: 16px;
  color: #454361;
  background: #f7f6ff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}

.food-content {
  padding: 28px 20px 26px;
}

.food-hero {
  padding: 22px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, #ff8e4a, #ffc76a);
  box-shadow: 0 14px 28px rgba(221, 126, 48, 0.18);
}

.food-hero p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  font-weight: 700;
}

.food-hero h2 {
  margin-top: 8px;
  color: #fff;
  font-size: 27px;
  line-height: 1.12;
  font-weight: 800;
}

.food-hero span {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.42;
  font-weight: 600;
}

.food-favorite {
  display: block;
  width: 100%;
  padding: 12px 16px;
  color: #a54d4d;
  background: transparent;
  font-size: 16px;
  font-weight: 800;
}

.food-favorite.is-favorite {
  color: #df5d5d;
}

.food-favorite-list {
  width: 100%;
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 16px;
  color: #fff;
  background: #b75555;
  font-size: 16px;
  font-weight: 800;
}

.food-favorite-items {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.food-favorite-items p {
  padding: 14px;
  border-radius: 14px;
  color: #8d4645;
  background: #fff4f3;
  font-size: 16px;
  font-weight: 800;
}

.food-favorite-items .food-favorite-empty {
  color: #8c786a;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

.food-content > h3 {
  margin-top: 22px;
  color: #5a3216;
  font-size: 21px;
  font-weight: 800;
}

.ingredient-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ingredient-list span {
  padding: 9px 12px;
  border-radius: 12px;
  color: #87521e;
  background: #fff2d9;
  font-size: 14px;
  font-weight: 700;
}

.recipe-step-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.recipe-step-list article {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
}

.recipe-step-list b {
  display: grid;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #ff9c54;
  font-size: 14px;
  font-weight: 800;
}

.recipe-step-list p {
  color: #5a4435;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.food-note {
  margin-top: 16px;
  color: #8c786a;
  text-align: center;
  font-size: 13px;
}

.fitness-content {
  padding: 28px 20px 26px;
}

.fitness-period-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  border-radius: 10px;
  background: #e7ecea;
}

.fitness-period-switch button {
  min-height: 40px;
  border-radius: 7px;
  color: #65766f;
  background: transparent;
  font-size: 16px;
  font-weight: 800;
}

.fitness-period-switch button.is-active {
  color: #173e34;
  background: #fff;
  box-shadow: 0 2px 8px rgba(23, 62, 52, 0.1);
}

.fitness-period-panel[hidden] {
  display: none;
}

.fitness-hero {
  padding: 22px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, #217a62, #54b890);
  box-shadow: 0 14px 28px rgba(33, 122, 98, 0.2);
}

.evening-panel .fitness-hero {
  background: linear-gradient(135deg, #5a4c91, #8a78c7);
  box-shadow: 0 14px 28px rgba(90, 76, 145, 0.2);
}

.fitness-hero p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  font-weight: 700;
}

.fitness-hero h2 {
  margin-top: 8px;
  color: #fff;
  font-size: 26px;
  line-height: 1.12;
  font-weight: 800;
}

.fitness-hero span {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.42;
}

.fitness-period-panel > h3 {
  margin-top: 20px;
  color: #173e34;
  font-size: 21px;
  font-weight: 800;
}

.fitness-workout-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.workout-item {
  display: grid;
  grid-template-columns: 42px 30px minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: center;
  width: 100%;
  padding: 15px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 18px;
  text-align: left;
  background: rgba(255, 255, 255, 0.88);
}

.workout-motion {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: #e9f7f1;
  font-size: 25px;
  animation: workout-bounce 1.8s ease-in-out infinite;
}

.motion-lift,
.motion-row { animation-name: workout-sway; }

.motion-squat { animation-name: workout-squat; }

@keyframes workout-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.06); }
}

@keyframes workout-sway {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(-3px); }
}

@keyframes workout-squat {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(4px) scaleY(0.9); }
}

.workout-item.is-done {
  border-color: #56b98a;
  background: #e9f9f0;
}

.workout-check {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #5b716a;
  background: #f1f5f3;
  font-size: 15px;
  font-weight: 800;
}

.workout-item.is-done .workout-check {
  color: #fff;
  background: #3dae8b;
}

.workout-item strong {
  color: #173e34;
  font-size: 17px;
  font-weight: 800;
}

.workout-item em {
  color: #217a62;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.workout-item small {
  grid-column: 3 / 5;
  margin-top: 4px;
  color: #5b716a;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.fitness-checkin {
  width: 100%;
  margin-top: 18px;
  padding: 15px 18px;
  border-radius: 16px;
  color: #fff;
  background: #217a62;
  font-size: 17px;
  font-weight: 800;
}

.fitness-checkin.is-done {
  background: #3dae8b;
}

.fitness-status {
  min-height: 22px;
  margin-top: 10px;
  color: #217a62;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
}

.fitness-note {
  margin-top: 5px;
  color: #7d8a84;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
}

.fitness-youtube {
  margin-top: 22px;
}

.fitness-youtube > h3 {
  color: #173e34;
  font-size: 21px;
  font-weight: 800;
}

.fitness-youtube > p {
  margin-top: 6px;
  color: #65766f;
  font-size: 14px;
  line-height: 1.45;
}

.fitness-youtube-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.fitness-youtube-list a {
  display: grid;
  gap: 5px;
  padding: 15px 16px;
  border: 1px solid rgba(33, 122, 98, 0.18);
  border-radius: 8px;
  color: #173e34;
  background: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.fitness-youtube-list strong {
  color: #126457;
  font-size: 16px;
}

.fitness-youtube-list span {
  color: #42675d;
  font-size: 14px;
  font-weight: 700;
}

.fitness-youtube-list small {
  color: #65766f;
  font-size: 13px;
  line-height: 1.4;
}

.fitness-youtube .fitness-youtube-note {
  margin-top: 10px;
  color: #7d8a84;
  text-align: center;
  font-size: 13px;
}

.fitness-video {
  margin-top: 22px;
}

.fitness-video h3 {
  color: #173e34;
  font-size: 19px;
  font-weight: 800;
}

.fitness-video video {
  display: block;
  width: 100%;
  margin-top: 9px;
  border-radius: 18px;
  background: #173e34;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

.fitness-celebration {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  background: rgba(21, 44, 37, 0.34);
  transition: opacity 180ms ease;
}

.fitness-celebration.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.fitness-celebration-card {
  width: min(100%, 330px);
  padding: 28px 24px 22px;
  border-radius: 24px;
  text-align: center;
  background: #ffffff;
  box-shadow: 0 22px 48px rgba(17, 59, 46, 0.28);
  transform: translateY(12px) scale(0.96);
  transition: transform 220ms ease;
}

.fitness-celebration.is-visible .fitness-celebration-card {
  transform: translateY(0) scale(1);
}

.fitness-celebration-card > span {
  display: block;
  font-size: 40px;
}

.fitness-celebration-card h2 {
  margin-top: 10px;
  color: #217a62;
  font-size: 26px;
  font-weight: 800;
}

.fitness-celebration-card p {
  margin-top: 10px;
  color: #4d675e;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.fitness-celebration-card button {
  width: 100%;
  margin-top: 20px;
  padding: 13px 18px;
  border-radius: 14px;
  color: #fff;
  background: #217a62;
  font-size: 16px;
  font-weight: 800;
}

.finance-screen {
  overflow-y: auto;
}

.finance-content h2 {
  font-size: 30px;
  line-height: 1.08;
  font-weight: 800;
  color: #172a2a;
}

.finance-subtitle {
  margin-top: 8px;
  color: var(--secondary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.finance-daily-grid {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.finance-card-daily {
  padding: 18px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  background: #effffa;
}

.finance-card-daily.card-mint {
  background: #effffa;
}

.finance-card-daily.card-warm {
  background: #fff6e7;
}

.finance-card-daily.card-lavender {
  background: #f1f0ff;
}

.chatgpt-entry {
  width: 100%;
  margin-top: 14px;
  padding: 18px;
  border: 0;
  border-radius: 24px;
  color: #ffffff;
  background: linear-gradient(135deg, #172a2a, #377a70);
  box-shadow: 0 16px 32px rgba(23, 42, 42, 0.16);
}

.chatgpt-entry span {
  display: block;
  font-size: 30px;
  text-align: left;
}

.chatgpt-entry strong {
  display: block;
  margin-top: 8px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.35;
  text-align: left;
}

.chatgpt-entry em {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-style: normal;
  line-height: 1.3;
  text-align: left;
}

.finance-card-daily h3 {
  margin: 0;
  color: #172a2a;
  font-size: 19px;
  font-weight: 800;
}

.finance-card-daily h3 span {
  margin-right: 6px;
}

.finance-card-daily ul {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-left: 18px;
}

.finance-card-daily li {
  color: #2d4b48;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.finance-card-daily p {
  margin-top: 10px;
  color: #2d4b48;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.finance-card-daily strong {
  display: block;
  margin-top: 12px;
  color: #9a5a00;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
}

.finance-love-line {
  color: #4b4580 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

.finance-list-title {
  margin-top: 18px;
  color: #172a2a;
  font-size: 22px;
  font-weight: 800;
}

.finance-lesson-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.finance-lesson-item {
  padding: 16px;
  border: 1px solid rgba(97, 199, 182, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.84);
}

.finance-api-status {
  color: var(--secondary);
  font-size: 13px;
  font-weight: 700;
}

.finance-lesson-item img {
  width: 100%;
  height: 150px;
  margin-bottom: 12px;
  border-radius: 14px;
  object-fit: cover;
}

.finance-lesson-item h4 {
  margin: 0;
  color: #126457;
  font-size: 17px;
  font-weight: 800;
}

.finance-lesson-item p {
  margin-top: 8px;
  color: #2d4b48;
  font-size: 14px;
  line-height: 1.42;
}

.finance-lesson-item strong {
  display: block;
  margin-top: 0;
  color: #377a70;
  font-size: 14px;
  line-height: 1.35;
}

.finance-lesson-item em {
  display: block;
  margin-top: 8px;
  color: #007aff;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
}

.finance-lesson-item a {
  display: block;
  margin-top: 8px;
  color: #007aff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

.finance-note {
  margin-top: 18px;
  color: var(--secondary);
  font-size: 13px;
}

.simple-feature-content {
  height: calc(100% - 48px);
  display: grid;
  place-items: center;
  text-align: center;
}

.simple-feature-content span {
  display: block;
  font-size: 64px;
}

.simple-feature-content h2 {
  margin-top: 18px;
  font-size: 30px;
  font-weight: 800;
}

.simple-feature-content p {
  max-width: 290px;
  margin-top: 12px;
  color: var(--secondary);
  font-size: 17px;
  line-height: 1.45;
}

.simple-feature-content textarea {
  width: min(290px, 100%);
  margin-top: 16px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  color: var(--primary);
  background: #f7f8fa;
  font: inherit;
  resize: none;
}

.chat-send-button {
  margin-top: 10px;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background: #007aff;
  font-weight: 800;
}

.chat-answer {
  max-height: 160px;
  overflow-y: auto;
  text-align: left;
}

.birthday-screen {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 213, 128, 0.36), transparent 30%),
    radial-gradient(circle at 82% 10%, rgba(255, 127, 159, 0.24), transparent 28%),
    linear-gradient(180deg, #fff8fb 0%, #ffffff 48%, #f8fbff 100%);
}

.birthday-screen > .status-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  flex: 0 0 48px;
  background: rgba(255, 248, 251, 0.82);
  backdrop-filter: blur(16px);
}

.birthday-screen > .status-bar .back-button {
  position: relative;
  z-index: 11;
  pointer-events: auto;
}

.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.confetti span {
  position: absolute;
  top: -36px;
  width: 30px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #ddf8df;
  box-shadow: inset 0 0 0 1px rgba(24, 133, 64, 0.18), 0 3px 9px rgba(0, 0, 0, 0.08);
  font-size: 18px;
  animation: confetti-fall 4.8s linear infinite;
}

.confetti span:nth-child(2n) {
  background: #e7ffe7;
}

.confetti span:nth-child(3n) {
  background: #d7f8d7;
}

.confetti span:nth-child(4n) {
  background: #f0fff0;
}

.confetti span:nth-child(1) { left: 8%; animation-delay: 0s; }
.confetti span:nth-child(2) { left: 18%; animation-delay: 1.2s; }
.confetti span:nth-child(3) { left: 29%; animation-delay: 0.4s; }
.confetti span:nth-child(4) { left: 38%; animation-delay: 2.1s; }
.confetti span:nth-child(5) { left: 48%; animation-delay: 0.9s; }
.confetti span:nth-child(6) { left: 58%; animation-delay: 1.7s; }
.confetti span:nth-child(7) { left: 68%; animation-delay: 0.2s; }
.confetti span:nth-child(8) { left: 78%; animation-delay: 2.6s; }
.confetti span:nth-child(9) { left: 88%; animation-delay: 1.4s; }
.confetti span:nth-child(10) { left: 94%; animation-delay: 0.7s; }

.birthday-hero {
  position: relative;
  z-index: 1;
  padding: 42px 28px 20px;
  text-align: center;
}

.birthday-hero .eyebrow {
  font-size: 20px;
  font-weight: 800;
  animation: birthday-float 1.8s ease-in-out infinite, birthday-gradient 3.8s linear infinite;
}

.birthday-hero .eyebrow,
.birthday-hero h2,
.birthday-hero p:last-child {
  color: transparent;
  background: linear-gradient(105deg, #ff5f87, #ffc857, #b66dff, #ff7aa8, #ff5f87);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

.birthday-hero h2 {
  margin-top: 8px;
  font-size: 48px;
  line-height: 1.02;
  font-weight: 800;
  animation: birthday-pop 1.8s ease-in-out infinite, birthday-gradient 3.4s linear infinite;
}

.birthday-hero p:last-child {
  max-width: 280px;
  margin: 12px auto 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.42;
  animation: birthday-gradient 4.2s linear infinite;
}

.hero-photo-carousel {
  width: min(322px, calc(100vw - 68px));
  aspect-ratio: 1.08;
  margin: 14px auto 0;
  overflow: hidden;
  border-radius: 28px;
  background: transparent;
  box-shadow: 0 14px 34px rgba(155, 88, 110, 0.18);
}

.hero-photo-carousel img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.hero-photo-carousel > span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #9b6675;
  background: #fff1f5;
  font-size: 14px;
  font-weight: 700;
}

.fitness-video > p {
  margin-top: 10px;
  color: #718084;
  font-size: 13px;
}

.birthday-screen {
  scrollbar-color: rgba(255, 95, 135, 0.8) rgba(255, 255, 255, 0.35);
  scrollbar-width: thin;
}

.birthday-screen::-webkit-scrollbar {
  width: 7px;
}

.birthday-screen::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 999px;
}

.birthday-screen::-webkit-scrollbar-thumb {
  background: rgba(255, 95, 135, 0.82);
  border-radius: 999px;
}

.wheel-wrap {
  position: relative;
  width: min(292px, 78vw);
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.wheel-pointer {
  position: absolute;
  top: -5px;
  z-index: 3;
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 24px solid #ff3b30;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
}

.gift-wheel {
  position: absolute;
  inset: 0;
  border: 8px solid #fff;
  border-radius: 50%;
  background:
    conic-gradient(
      #fff0f4 0deg 45deg,
      #fff8d6 45deg 90deg,
      #edf7ff 90deg 135deg,
      #ecfff4 135deg 180deg,
      #fff0f4 180deg 225deg,
      #fff8d6 225deg 270deg,
      #edf7ff 270deg 315deg,
      #ecfff4 315deg 360deg
    );
  box-shadow: 0 18px 42px rgba(255, 59, 107, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: transform 3.6s cubic-bezier(0.12, 0.78, 0.14, 1);
}

.gift-wheel::after {
  content: "";
  position: absolute;
  inset: 50%;
  z-index: 2;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  transform: translate(-50%, -50%);
}

.gift-wheel span {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  font-size: 25px;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--i) * 45deg + 22.5deg))
    translateY(-102px)
    rotate(calc(-1 * (var(--i) * 45deg + 22.5deg)))
    rotate(calc(-1 * var(--wheel-rotation, 0deg)));
  transform-origin: center;
  transition: transform 3.6s cubic-bezier(0.12, 0.78, 0.14, 1);
}

.spin-button {
  position: relative;
  z-index: 4;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #ff3b6b;
  color: #fff;
  box-shadow: 0 8px 22px rgba(255, 59, 107, 0.32);
  font-size: 22px;
  font-weight: 800;
}

.spin-button:disabled {
  opacity: 0.78;
}

.gift-result {
  min-height: 24px;
  margin-top: 22px;
  color: #ff3b6b;
  font-size: 17px;
  font-weight: 700;
}

.gift-message {
  margin: 10px auto 0;
  max-width: 290px;
  min-height: 0;
  color: #9a4d68;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.42;
}

@keyframes birthday-pop {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.025);
  }
}

@keyframes birthday-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes birthday-gradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 240% 50%;
  }
}

@keyframes confetti-fall {
  0% {
    opacity: 0;
    transform: translateY(-24px) rotate(0deg);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
    transform: translateY(880px) rotate(520deg);
  }
}

.nav-bar {
  padding: 4px 20px 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.eyebrow {
  margin-bottom: 2px;
  color: var(--secondary);
  font-size: 13px;
  font-weight: 500;
}

.nav-bar h2 {
  font-size: 33px;
  line-height: 1.05;
  font-weight: 700;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
}

.icon-button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--ios-blue);
  font-size: 20px;
}

.segmented {
  height: 34px;
  margin: 8px 20px 14px;
  padding: 2px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  border-radius: 9px;
  background: #eeeef0;
}

.segmented button,
.time-rail button {
  border-radius: 7px;
  color: var(--secondary);
  font-size: 13px;
  font-weight: 600;
}

.segmented .is-selected,
.time-rail .is-selected {
  background: #fff;
  color: var(--label);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.diary-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 28px;
}

.day-card {
  margin-bottom: 30px;
}

.empty-state {
  min-height: 360px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--secondary);
}

.empty-state h3 {
  margin: 0 0 8px;
  color: var(--label);
  font-size: 21px;
}

.empty-state p {
  max-width: 250px;
  font-size: 14px;
  line-height: 1.35;
}

.day-heading {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.day-heading h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.1;
  font-weight: 700;
}

.day-heading p {
  margin-top: 4px;
  color: var(--secondary);
  font-size: 13px;
}

.cover-button {
  width: 100%;
  aspect-ratio: 1.62;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--fill);
}

.cover-button img,
.mini-strip img,
.photo-grid img,
#viewerImage {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mini-strip {
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.mini-strip button {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  background: var(--fill);
}

.photo-note {
  margin-top: 9px;
  color: var(--secondary);
  font-size: 14px;
  line-height: 1.35;
}

.month-card {
  margin-bottom: 22px;
}

.month-card h3 {
  margin: 0 0 10px;
  font-size: 23px;
  line-height: 1.12;
}

.month-mosaic {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4px;
  height: 202px;
  overflow: hidden;
  border-radius: var(--radius);
}

.month-mosaic button {
  overflow: hidden;
  background: var(--fill);
}

.month-mosaic .month-stack {
  display: grid;
  gap: 4px;
}

.month-mosaic img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.month-meta {
  margin-top: 7px;
  color: var(--secondary);
  font-size: 13px;
}

.compact-nav {
  min-height: 58px;
  padding: 2px 16px 10px;
  display: grid;
  grid-template-columns: 40px 1fr 52px;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--separator);
}

.back-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--ios-blue);
  font-size: 23px;
}

.compact-nav h2,
.viewer-nav h2 {
  font-size: 17px;
  line-height: 1.1;
  font-weight: 700;
  text-align: center;
}

.compact-nav p,
.viewer-nav p {
  margin-top: 3px;
  color: var(--secondary);
  font-size: 12px;
  text-align: center;
}

.time-rail {
  height: 44px;
  padding: 7px 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  border-bottom: 1px solid var(--separator);
}

.photo-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: start;
  gap: 2px;
  background: #fff;
}

.photo-grid button {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--fill);
}

.viewer-screen {
  background: #000;
  color: #fff;
}

.viewer-chrome,
.viewer-toolbar {
  position: relative;
  z-index: 2;
}

.viewer-status {
  color: #fff;
}

.viewer-nav {
  height: 58px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
}

.viewer-nav p {
  color: rgba(255, 255, 255, 0.72);
}

.light {
  color: #fff;
}

.photo-stage {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
}

#viewerImage {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 180ms ease;
  transform-origin: center;
}

#viewerImage.is-zoomed {
  transform: scale(1.72);
}

.viewer-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(0, 0, 0, 0.28);
  transform: translateY(-50%);
}

.viewer-arrow.left {
  left: 10px;
}

.viewer-arrow.right {
  right: 10px;
}

.viewer-toolbar {
  height: 86px;
  padding: 9px 20px 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.76);
}

.viewer-toolbar button {
  display: grid;
  place-items: center;
  gap: 3px;
  color: #fff;
  font-size: 20px;
}

.viewer-toolbar span {
  font-size: 11px;
}

.upload-sheet {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
}

.upload-sheet.is-open {
  display: block;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
}

.sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 20px 30px;
  border-radius: 22px 22px 0 0;
  background: #fff;
  box-shadow: 0 -12px 38px rgba(0, 0, 0, 0.18);
}

.sheet-grabber {
  width: 38px;
  height: 5px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: #d1d1d6;
}

.sheet-header {
  height: 34px;
  display: grid;
  grid-template-columns: 58px 1fr 58px;
  align-items: center;
}

.sheet-header h2 {
  font-size: 17px;
  text-align: center;
}

.upload-drop {
  position: relative;
  height: 168px;
  margin-top: 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: var(--fill);
  color: var(--ios-blue);
  font-weight: 600;
}

.upload-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.upload-drop img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  object-fit: cover;
}

.upload-drop.has-image img {
  display: block;
}

.upload-drop.has-image span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  font-size: 13px;
}

.field-label {
  margin-top: 14px;
  display: grid;
  gap: 7px;
  color: var(--secondary);
  font-size: 13px;
  font-weight: 600;
}

.field-label textarea,
.field-label input {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px;
  background: var(--fill);
  color: var(--label);
  font: inherit;
  font-weight: 400;
  resize: none;
  outline: none;
}

@media (max-width: 430px) {
  body {
    background: #fff;
  }

  .phone-shell {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }
}