/* Generated by output/package-v37.py: main + private health styles. */
:root {
  --bg: #f7f1e8;
  --surface: #fffdf9;
  --ink: #2d2520;
  --muted: #8b7d73;
  --deep: #3a2924;
  --deep-2: #50352c;
  --accent: #e78157;
  --accent-soft: #f8d8c5;
  --sage-soft: #dce9e1;
  --gold: #e8b86a;
  --danger: #bd5353;
  --page-pad: 20px;
  --motion-fast: 150ms;
  --motion-sheet: 220ms;
}
* { box-sizing: border-box; }
html { background: #ddd8d0; overscroll-behavior-y: none; touch-action: manipulation; scrollbar-color: #b8a99f transparent; scrollbar-width: thin; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { border-radius: 999px; background: #b8a99f; }
*::-webkit-scrollbar-thumb:hover { background: #9d8c81; }
*::-webkit-scrollbar-thumb:active { background: #806f65; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: #ddd8d0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, input, textarea { font: inherit; }
button { color: inherit; touch-action: manipulation; }
button, label { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(215,114,77,.34); outline-offset: 2px; }
.app-shell {
  position: relative;
  width: 100%;
  max-width: 402px;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: radial-gradient(circle at 100% 0, rgba(232,184,106,.14), transparent 28%), var(--bg);
  box-shadow: 0 0 55px rgba(61,44,35,.10);
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(15px + env(safe-area-inset-top)) max(var(--page-pad), env(safe-area-inset-right)) 15px max(var(--page-pad), env(safe-area-inset-left));
}
.eyebrow {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.brand-lockup h1 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  max-width: 290px;
  font-family: "Songti SC", "STSong", serif;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.05;
}
.secret-name-trigger {
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  cursor: pointer;
}
.secret-name-trigger:active { transform: scale(.98); }
.secret-name-trigger:disabled { cursor: default; }
.brand-lockup h1 small {
  flex: none;
  padding: 4px 7px;
  border-radius: 999px;
  color: #8c4d34;
  background: var(--accent-soft);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .06em;
}
.brand-caption { margin: 4px 0 0; color: #a29388; font-size: 10px; letter-spacing: .18em; }
.icon-button, .close-button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.icon-button {
  width: 44px;
  height: 44px;
  color: #68574e;
  background: rgba(255,253,249,.94);
  box-shadow: 0 7px 20px rgba(66,48,38,.07);
}
.icon-button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.55; }
main { padding: 0 max(var(--page-pad), env(safe-area-inset-right)) calc(108px + env(safe-area-inset-bottom)) max(var(--page-pad), env(safe-area-inset-left)); }
.view { display: none; animation: reveal .18s cubic-bezier(.22,.72,.25,1); }
.view.active { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero-card {
  position: relative;
  min-height: 236px;
  padding: 21px;
  overflow: hidden;
  color: #fff8f2;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 30px;
  background: radial-gradient(circle at 78% 10%, rgba(231,129,87,.30), transparent 35%), linear-gradient(145deg, var(--deep-2), #2d211e 68%);
  box-shadow: 0 22px 44px rgba(72,48,38,.20);
}
.hero-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(255,255,255,.05), transparent 40%); pointer-events: none; }
.hero-glow { position: absolute; width: 190px; height: 190px; right: -48px; top: -68px; border-radius: 50%; background: rgba(238,178,111,.13); }
.hero-copy { position: relative; z-index: 2; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: #eddcd2;
  background: rgba(255,255,255,.07);
  font-size: 10px;
  font-weight: 650;
}
.status-pill i { width: 6px; height: 6px; border-radius: 50%; background: #f2bd78; box-shadow: 0 0 0 4px rgba(242,189,120,.10); }
.hero-kicker { margin: 27px 0 5px; color: #c5afa4; font-size: 10px; letter-spacing: .08em; }
.duration-display { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.duration-display strong { font-family: "Avenir Next", "SF Pro Display", sans-serif; font-size: 43px; font-weight: 560; letter-spacing: -.06em; line-height: 1; }
.duration-display span { margin-right: 4px; color: #cdb9af; font-size: 11px; }
.hero-range { max-width: 235px; margin: 9px 0 0; color: #bca89f; font-size: 10px; line-height: 1.5; }
.moon-orbit { position: absolute; right: 20px; bottom: 18px; width: 83px; height: 83px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; }
.moon { position: absolute; width: 50px; height: 50px; right: 5px; bottom: 1px; border-radius: 50%; background: #ffe8ca; box-shadow: -7px 8px 28px rgba(255,201,137,.25); }
.moon::after { content: ""; position: absolute; width: 45px; height: 45px; left: -10px; top: -7px; border-radius: 50%; background: #32231f; }
.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #f6ddc6; }
.star-a { left: 8px; top: 23px; }.star-b { left: 29px; top: 4px; opacity: .5; }.star-c { right: 1px; top: 29px; opacity: .7; }
.primary-action {
  position: relative;
  z-index: 3;
  width: calc(100% - 24px);
  display: grid;
  grid-template-columns: 46px 1fr 20px;
  align-items: center;
  gap: 11px;
  margin: -17px auto 26px;
  padding: 12px 14px;
  border: 1px solid rgba(87,63,51,.06);
  border-radius: 20px;
  text-align: left;
  background: #fffdf9;
  box-shadow: 0 12px 28px rgba(60,43,34,.12);
  cursor: pointer;
  transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.primary-action:active { transform: scale(.985); box-shadow: 0 7px 18px rgba(60,43,34,.11); }
.primary-action .plus { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px; color: #fff8f2; background: linear-gradient(145deg, #ef9168, #d96d46); box-shadow: 0 8px 18px rgba(222,112,72,.23); font-size: 24px; font-weight: 300; }
.primary-action b { display: block; font-size: 14px; letter-spacing: -.01em; }
.primary-action small { color: #998a80; font-size: 10px; }
.primary-action svg { width: 18px; fill: none; stroke: #7a6960; stroke-width: 1.8; }
.quick-actions {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin: -17px 6px 26px;
}
.quick-action {
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-rows: 34px auto;
  justify-items: center;
  align-content: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(87,63,51,.06);
  border-radius: 18px;
  text-align: center;
  background: rgba(255,253,249,.97);
  box-shadow: 0 13px 30px rgba(60,43,34,.11);
  cursor: pointer;
  transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.quick-action:active { transform: scale(.97); box-shadow: 0 7px 18px rgba(60,43,34,.09); }
.quick-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: #fff8f2;
  background: linear-gradient(145deg,#ef9168,#d96d46);
}
.quick-icon svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.poop-mark { color: #654639; background: #ead4bf; font-family: "Songti SC",serif; font-weight: 800; }
.calcium-mark { color: #486b5a; background: #d8e9df; font-family: "Avenir Next",sans-serif; font-size: 12px; font-weight: 800; }
.quick-action > span:last-child { width: 100%; min-width: 0; }
.quick-action b, .quick-action small { display: block; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.quick-action b { font-size: 13px; line-height: 17px; }.quick-action small { margin-top: 2px; color: #9a8c82; font-size: 8px; line-height: 11px; }
.section-block { margin-top: 25px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 12px; }
.section-heading.compact { align-items: center; }
.section-heading h2, .sheet-header h2 { margin: 0; letter-spacing: -.04em; }
.section-heading h2 { font-size: 19px; }
.text-button { min-height: 36px; border: 0; padding: 7px 0 7px 12px; color: #c06442; background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.daily-metrics { grid-template-columns: repeat(3,1fr); gap: 8px; }
.daily-metrics .metric-card { display: grid; min-height: 128px; grid-template-rows: 31px 20px 28px 14px; justify-items: center; align-content: center; padding: 12px 8px; text-align: center; }
.daily-metrics .metric-card p { width: 100%; margin: 8px 0 0; line-height: 12px; }
.daily-metrics .metric-card strong { width: 100%; align-self: center; font-size: 17px; line-height: 24px; }
.daily-metrics .metric-card small { width: 100%; align-self: center; overflow: hidden; line-height: 12px; text-overflow: ellipsis; white-space: nowrap; }
.poop-mini { color: #6b493a; background: #eedbc8; font-family: "Songti SC",serif; font-size: 13px; font-weight: 800; }
.calcium-mini { color: #4f7562; background: #dcebe3; font-family: "Avenir Next",sans-serif; font-size: 10px; font-weight: 800; }
.metric-card { min-width: 0; padding: 15px; border: 1px solid rgba(65,49,40,.05); border-radius: 20px; background: rgba(255,253,249,.94); box-shadow: 0 9px 26px rgba(62,45,36,.05); }
.metric-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 11px; }
.metric-icon svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.metric-icon.warm { color: #a7603e; background: #f8e3d5; }.metric-icon.green { color: #527966; background: var(--sage-soft); }
.metric-card p { margin: 13px 0 3px; color: var(--muted); font-size: 10px; }
.metric-card strong { display: block; overflow: hidden; font-size: 22px; letter-spacing: -.05em; text-overflow: ellipsis; white-space: nowrap; }
.metric-card small { color: #ab9e95; font-size: 9px; }
.legend { color: var(--muted); font-size: 9px; }.legend i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 3px; background: var(--accent-soft); }
.week-chart-card { padding: 17px 13px 12px; border: 1px solid rgba(65,49,40,.05); border-radius: 20px; background: rgba(255,253,249,.94); box-shadow: 0 9px 26px rgba(62,45,36,.04); }
.chart-zone { position: relative; height: 120px; display: flex; align-items: end; }
.goal-band { position: absolute; left: 0; right: 0; bottom: 74px; height: 27px; border-radius: 7px; background: rgba(248,216,197,.30); }
.goal-band::after { content: "7–9h"; position: absolute; right: 5px; top: 5px; color: #b37a62; font-size: 8px; }
.bars { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(7,1fr); align-items: end; gap: 10px; }
.bar { position: relative; min-height: 5px; border-radius: 7px 7px 4px 4px; background: #d9d1ca; transition: height .4s ease; }
.bar.on-target { background: #6fa58a; }.bar.late { background: #e18b6e; }.bar.today { box-shadow: inset 0 0 0 2px rgba(45,37,32,.38); }
.bar::before { content: attr(data-value); position: absolute; top: -16px; left: 50%; transform: translateX(-50%); color: #8d7d74; font-size: 8px; white-space: nowrap; }
.bar.empty { height: 5px !important; opacity: .42; }.bar.empty::before { content: "—"; }
.chart-labels { display: grid; grid-template-columns: repeat(7,1fr); gap: 10px; margin-top: 9px; text-align: center; color: #95867d; font-size: 9px; }
#view-trends { padding-top: 10px; }
.period-switch { display: grid; grid-template-columns: repeat(3,1fr); padding: 4px; border-radius: 15px; background: #e9e0d6; }
.period-switch button { display: grid; min-height: 37px; place-items: center; border: 0; border-radius: 12px; color: #8e8076; background: transparent; font-size: 11px; line-height: 1; cursor: pointer; }
.period-switch button.active { color: var(--ink); background: var(--surface); box-shadow: 0 5px 16px rgba(61,44,35,.08); font-weight: 750; }
.trend-summary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.trend-summary-card { display: flex; min-width: 0; min-height: 108px; flex-direction: column; align-items: center; justify-content: center; padding: 9px 6px; border: 1px solid rgba(65,49,40,.04); border-radius: 17px; text-align: center; background: var(--surface); }
.summary-mark { display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; margin-bottom: 5px; border-radius: 10px; font-size: 13px; line-height: 1; }
.sleep-summary-mark { color: #a7603e; background: #f8e3d5; font-size: 18px; }
.trend-summary-card small, .trend-summary-card em, .trend-summary-card strong { display: block; width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.trend-summary-card small { color: var(--muted); font-size: 8px; line-height: 11px; }
.trend-summary-card strong { margin-top: 2px; font-size: 17px; line-height: 23px; letter-spacing: -.04em; }
.trend-summary-card em { color: var(--muted); font-size: 8px; line-height: 11px; font-style: normal; }
.calendar-card { margin: 12px 0; padding: 17px 14px 15px; border: 1px solid rgba(65,49,40,.05); border-radius: 22px; background: var(--surface); box-shadow: 0 10px 28px rgba(62,45,36,.05); }
.calendar-head { display: flex; align-items: center; justify-content: space-between; }
.calendar-head small { color: var(--muted); font-size: 8px; }.calendar-head h3 { margin: 3px 0 0; font-size: 18px; letter-spacing: -.03em; }
.month-controls { display: flex; gap: 6px; }.month-controls button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #e6ddd6; border-radius: 11px; color: #6f5f56; background: #faf6f1; font-size: 20px; cursor: pointer; }
.calendar-metric-switch { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin: 13px 0 12px; padding: 4px; border-radius: 13px; background: #eee6df; }
.calendar-metric-switch button { display: grid; min-height: 34px; place-items: center; border: 0; border-radius: 10px; color: #8e8076; background: transparent; font-size: 10px; line-height: 1; cursor: pointer; }
.calendar-metric-switch button.active { color: #fff9f4; background: var(--deep); font-weight: 750; box-shadow: 0 5px 14px rgba(62,44,36,.15); }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); column-gap: 3px; }
.calendar-grid { row-gap: 3px; }
.calendar-weekdays { margin-bottom: 4px; text-align: center; color: #9b8d84; font-size: 8px; }
.calendar-day { position: relative; display: grid; aspect-ratio: 1; place-items: center; border: 1px solid rgba(65,49,40,.03); border-radius: 10px; color: #9c8f87; text-align: center; font-variant-numeric: tabular-nums; background: #f1ece7; transition: .2s ease; }
.calendar-day b { font-size: 10px; font-weight: 650; }
.calendar-day.outside { opacity: .27; }
.calendar-day.sleep-good { color: #315b49; background: #b9dbc9; }.calendar-day.sleep-late { color: #8a422f; background: #f2b7a3; }
.calendar-day.heat-1 { color: #526b5f; background: #dbeae2; }.calendar-day.heat-2 { color: #315c4a; background: #9bcbb5; }.calendar-day.heat-3 { color: #fff; background: #4f9173; }
.calendar-day.today-cell { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #8b6959; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 9px 12px; margin-top: 11px; color: #8e8178; font-size: 8px; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 5px; }.calendar-legend i { width: 10px; height: 10px; border-radius: 4px; background: #f1ece7; }
.calendar-legend i.sleep-good { background: #b9dbc9; }.calendar-legend i.sleep-late { background: #f2b7a3; }.calendar-legend i.heat-1 { background: #dbeae2; }.calendar-legend i.heat-2 { background: #9bcbb5; }.calendar-legend i.heat-3 { background: #4f9173; }
.night-dot, .morning-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; }.night-dot { background: #4c3530; }.morning-dot { background: var(--gold); }
#view-history { padding-top: 10px; }
#view-honors { padding-top: 4px; }
.honor-hero {
  position: relative;
  min-height: 194px;
  overflow: hidden;
  padding: 25px 21px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 28px;
  color: #fff8ef;
  background: linear-gradient(145deg,#4b342d,#2f231f 72%);
  box-shadow: 0 20px 42px rgba(64,43,34,.18);
}
.honor-hero-copy { position: relative; z-index: 2; max-width: 205px; }
.honor-hero .eyebrow { color: #dfb987; }
.honor-hero h2 { margin: 0; font-family: "Songti SC","STSong",serif; font-size: 29px; letter-spacing: -.05em; }
.honor-hero-copy > p:last-child { margin: 13px 0 0; color: #cdbbb1; font-size: 10px; line-height: 1.7; }
.honor-tally { position: absolute; z-index: 2; right: 20px; bottom: 24px; display: grid; width: 92px; height: 105px; place-items: center; align-content: center; border: 1px solid rgba(238,197,132,.28); border-radius: 44px 44px 23px 23px; background: rgba(255,255,255,.055); }
.honor-tally-seal { display: grid; width: 29px; height: 29px; place-items: center; margin-bottom: 4px; border-radius: 50%; color: #4b342d; background: var(--gold); box-shadow: 0 0 0 5px rgba(232,184,106,.10); font-size: 14px; }
.honor-tally strong { font-family: "Avenir Next","SF Pro Display",sans-serif; font-size: 27px; line-height: 29px; font-weight: 650; }
.honor-tally small { color: #c8b4aa; font-size: 8px; }
.honor-thread { position: absolute; border: 1px solid rgba(232,184,106,.18); border-radius: 50%; pointer-events: none; }
.thread-one { width: 178px; height: 178px; right: -69px; top: -73px; }
.thread-two { width: 128px; height: 128px; right: -41px; top: -48px; }
.honor-section-heading { display: flex; align-items: end; justify-content: space-between; margin: 24px 1px 12px; }
.honor-section-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.04em; }
.honor-section-heading > span { margin-bottom: 2px; color: #a4684e; font-size: 9px; font-weight: 750; }
.honor-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; padding-bottom: 10px; }
.honor-card { position: relative; min-width: 0; min-height: 205px; overflow: hidden; padding: 15px 13px 13px; border: 1px solid rgba(71,53,44,.06); border-radius: 21px; background: rgba(255,253,249,.94); box-shadow: 0 8px 24px rgba(62,45,36,.045); }
.honor-card.is-locked { background: rgba(240,234,227,.72); box-shadow: none; }
.honor-card-top { display: flex; align-items: start; justify-content: space-between; }
.honor-medal { position: relative; display: grid; width: 50px; height: 50px; place-items: center; border-radius: 50%; color: #fff9ef; background: linear-gradient(145deg,#d89562,#b96843); box-shadow: inset 0 0 0 4px rgba(255,248,235,.4), 0 7px 17px rgba(165,95,56,.16); font-family: "Songti SC","STSong",serif; font-size: 20px; font-weight: 800; }
.honor-card.is-locked .honor-medal { color: #9d9189; background: #ddd5ce; box-shadow: inset 0 0 0 4px rgba(255,255,255,.38); }
.honor-medal::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 9px; height: 9px; border: 2px solid #fffdf9; border-radius: 50%; background: #6f9a82; }
.honor-card.is-locked .honor-medal::after { background: #b9afa8; }
.honor-state { padding: 4px 7px; border-radius: 999px; color: #537460; background: #e0ece5; font-size: 7px; font-weight: 800; }
.honor-card.is-locked .honor-state { color: #8d8179; background: #e6ded7; }
.honor-card h3 { margin: 13px 0 4px; font-family: "Songti SC","STSong",serif; font-size: 16px; line-height: 1.2; }
.honor-card-desc { min-height: 33px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.honor-progress { margin-top: 13px; }
.honor-progress-copy { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; color: #8d7c72; font-size: 8px; }
.honor-progress-copy strong { color: #735748; font-size: 8px; }
.honor-progress-track { height: 5px; overflow: hidden; border-radius: 999px; background: #e5ddd6; }
.honor-progress-track i { display: block; width: var(--honor-progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#d88560,#e8b86a); transition: width .35s ease; }
.honor-earned-date { display: block; margin-top: 10px; color: #8a765f; font-size: 8px; }
.honor-unlock-backdrop { align-items: center; padding: max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
.honor-unlock-dialog { position: relative; width: 100%; max-width: 334px; overflow: hidden; padding: 31px 24px 23px; border: 1px solid rgba(124,81,53,.09); border-radius: 29px; text-align: center; background: radial-gradient(circle at 50% -8%,#f8dfba 0,rgba(248,223,186,0) 46%),#fffdf9; box-shadow: 0 24px 62px rgba(55,37,30,.25); animation: sheetUp var(--motion-sheet) cubic-bezier(.2,.76,.24,1) both; }
.honor-unlock-mark { position: relative; z-index: 2; display: grid; width: 78px; height: 78px; margin: 1px auto 21px; place-items: center; border: 2px solid #f4d8a7; border-radius: 50%; color: #fff9ef; background: linear-gradient(145deg,#e1a362,#b86b42); box-shadow: inset 0 0 0 6px rgba(255,249,235,.42),0 13px 28px rgba(169,98,57,.23); font-family: "Songti SC","STSong",serif; font-size: 30px; font-weight: 800; }
.honor-unlock-dialog .eyebrow { color: #a86a48; }
.honor-unlock-dialog h2 { margin: 0; font-family: "Songti SC","STSong",serif; font-size: 25px; letter-spacing: -.04em; }
.honor-unlock-dialog > p:not(.eyebrow):not(.honor-unlock-date) { margin: 11px 5px 0; color: #6f5e54; font-size: 11px; line-height: 1.65; }
.honor-unlock-date { margin: 10px 0 19px; color: #a08f84; font-size: 8px; }
.honor-unlock-action { width: 100%; min-height: 49px; border: 0; border-radius: 15px; color: #fff9f4; background: var(--deep); font-size: 11px; font-weight: 750; cursor: pointer; transition: transform var(--motion-fast) ease,background-color var(--motion-fast) ease; }
.honor-unlock-action:hover { background: var(--deep-2); }
.honor-unlock-action:active { transform: scale(.98); }
.honor-burst { position: absolute; inset: 15px 40px auto; height: 105px; pointer-events: none; }
.honor-burst i { position: absolute; left: 50%; bottom: 12px; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); transform: rotate(var(--burst-angle)) translateY(-58px); transform-origin: 0 58px; }
.honor-burst i:nth-child(1) { --burst-angle: 0deg; }.honor-burst i:nth-child(2) { --burst-angle: 58deg; }.honor-burst i:nth-child(3) { --burst-angle: 116deg; }.honor-burst i:nth-child(4) { --burst-angle: 180deg; }.honor-burst i:nth-child(5) { --burst-angle: 242deg; }.honor-burst i:nth-child(6) { --burst-angle: 304deg; }
#view-friends { padding-top: 4px; }
.friend-hero { position: relative; min-height: 218px; overflow: hidden; padding: 24px 21px 20px; border: 1px solid rgba(65,49,40,.05); border-radius: 28px; background: linear-gradient(145deg,#eef5f0,#fffaf4 72%); box-shadow: 0 15px 38px rgba(59,47,38,.08); }
.friend-hero::after { content: ""; position: absolute; width: 180px; height: 180px; right: -82px; top: -82px; border: 1px solid rgba(96,137,113,.15); border-radius: 50%; box-shadow: 0 0 0 24px rgba(96,137,113,.035); }
.friend-hero-copy { position: relative; z-index: 2; max-width: 235px; }
.friend-hero .eyebrow { color: #627c6c; }
.friend-hero h2 { margin: 0; font-family: "Songti SC","STSong",serif; font-size: 28px; letter-spacing: -.05em; }
.friend-hero-copy > p:last-child { margin: 11px 0 0; color: #748078; font-size: 10px; line-height: 1.65; }
.friend-thread-mark { position: absolute; z-index: 2; right: 20px; bottom: 23px; display: flex; width: 126px; align-items: center; }
.friend-thread-mark i { display: grid; width: 39px; height: 39px; flex: 0 0 39px; place-items: center; border: 3px solid #fffdf9; border-radius: 50%; color: #fffaf4; background: #5f8872; box-shadow: 0 6px 16px rgba(70,103,85,.18); font-family: "Songti SC",serif; font-size: 10px; font-style: normal; font-weight: 800; }
.friend-thread-mark i:last-child { color: #6b493a; background: #e8c7b0; }
.friend-thread-mark span { position: relative; height: 2px; flex: 1; background: repeating-linear-gradient(90deg,#c67a59 0 5px,transparent 5px 9px); }
.friend-thread-mark span::after { content: "♥"; position: absolute; left: 50%; top: 50%; display: grid; width: 24px; height: 24px; transform: translate(-50%,-50%); place-items: center; border-radius: 50%; color: #c16a4d; background: #fff9f4; font-size: 10px; }
.friend-add-button { position: absolute; z-index: 3; left: 21px; bottom: 21px; min-height: 43px; padding: 0 15px; border: 0; border-radius: 14px; color: #fffaf5; background: var(--deep); font-size: 10px; font-weight: 750; cursor: pointer; transition: transform var(--motion-fast) ease,background-color var(--motion-fast) ease; }
.friend-add-button:hover { background: var(--deep-2); }.friend-add-button:active { transform: scale(.97); }
.friend-add-button:disabled { color: #9c9088; background: #e2dad3; cursor: not-allowed; }
.friend-service-state { min-height: 0; margin-top: 12px; }
.friend-service-card { display: flex; min-height: 68px; align-items: center; gap: 11px; padding: 13px 14px; border: 1px solid rgba(65,49,40,.05); border-radius: 18px; background: var(--surface); }
.friend-service-card[hidden] { display: none; }
.friend-service-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 13px; color: #5d7869; background: var(--sage-soft); font-size: 17px; }
.friend-service-card strong,.friend-service-card small { display: block; }.friend-service-card strong { font-size: 11px; }.friend-service-card small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.friend-service-card button { min-height: 38px; margin-left: auto; padding: 0 12px; border: 0; border-radius: 12px; color: #fffaf5; background: var(--deep); font-size: 9px; font-weight: 750; cursor: pointer; }
.friend-service-card.error { border-color: rgba(189,83,83,.14); background: #fff8f6; }.friend-service-card.error .friend-service-icon { color: #974c47; background: #f7dfdc; }
.friend-section { margin-top: 23px; }.friend-section[hidden] { display: none; }
.friend-section-title { display: flex; align-items: end; justify-content: space-between; margin: 0 1px 11px; }
.friend-section-title h2 { margin: 0; font-size: 18px; letter-spacing: -.04em; }.friend-section-title > span { margin-bottom: 2px; color: var(--muted); font-size: 8px; }
.friend-stack { display: grid; gap: 9px; }
.friend-empty { min-height: 116px; display: grid; place-items: center; padding: 20px; border: 1px dashed #dfd5ce; border-radius: 19px; color: var(--muted); text-align: center; background: rgba(255,253,249,.5); }
.friend-empty strong { display: block; color: var(--ink); font-size: 12px; }.friend-empty p { margin: 5px 0 0; font-size: 9px; line-height: 1.6; }
.friend-card,.friend-request-card { min-width: 0; padding: 14px; border: 1px solid rgba(65,49,40,.05); border-radius: 19px; background: var(--surface); box-shadow: 0 7px 21px rgba(62,45,36,.04); }
.friend-card-head { display: flex; align-items: center; gap: 10px; }
.friend-avatar { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 15px; color: #fffaf5; background: linear-gradient(145deg,#759783,#547360); font-family: "Songti SC",serif; font-size: 15px; font-weight: 800; }
.friend-card-head > div { min-width: 0; flex: 1; }.friend-card-head strong,.friend-card-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.friend-card-head strong { font-size: 12px; }.friend-card-head small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.friend-status-chip { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; color: #537460; background: #e0ece5; font-size: 7px; font-weight: 800; }
.friend-card-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 12px; }
.friend-card-actions button,.friend-request-actions button { min-height: 42px; border: 1px solid #e3d9d2; border-radius: 13px; color: #66564d; background: #fffaf5; font-size: 9px; font-weight: 750; cursor: pointer; transition: transform var(--motion-fast) ease,background-color var(--motion-fast) ease; }
.friend-card-actions button:first-child { border-color: #d9e5dd; color: #4f705e; background: #f1f7f3; }.friend-card-actions button:active,.friend-request-actions button:active { transform: scale(.97); }
.friend-card-actions button:disabled,.friend-request-actions button:disabled { color: #a79b93; background: #eee8e2; cursor: wait; }
.friend-request-card { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px; }.friend-request-copy strong,.friend-request-copy small { display: block; }.friend-request-copy strong { font-size: 12px; }.friend-request-copy small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.friend-request-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }.friend-request-actions .accept { border-color: transparent; color: #fffaf5; background: #587964; }
.challenge-card { overflow: hidden; border: 1px solid rgba(65,49,40,.055); border-radius: 21px; background: var(--surface); box-shadow: 0 8px 24px rgba(62,45,36,.045); }
.challenge-card-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; padding: 15px 15px 12px; background: linear-gradient(145deg,#f6e6d9,#fffaf5); }
.challenge-card.poop .challenge-card-head { background: linear-gradient(145deg,#efe4d8,#fffaf5); }
.challenge-card.calcium .challenge-card-head { background: linear-gradient(145deg,#e3eee7,#fffdf9); }
.challenge-card-title { min-width: 0; }
.challenge-card-kicker { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 5px; color: #8b684f; font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.challenge-card-kicker i { width: 6px; height: 6px; border-radius: 50%; background: #d07c58; }
.challenge-card.poop .challenge-card-kicker i { background: #a77955; }
.challenge-card.calcium .challenge-card-kicker i { background: #648773; }
.challenge-card-head h3 { margin: 0; font-family: "Songti SC",serif; font-size: 16px; }.challenge-card-head p { margin: 4px 0 0; color: #8a776c; font-size: 8px; }
.challenge-chip { padding: 5px 8px; border-radius: 999px; color: #8c593f; background: #f4d5c3; font-size: 7px; font-weight: 800; }
.challenge-chip.active { color: #51715f; background: #dfece4; }.challenge-chip.completed { color: #755625; background: #f3dfad; }.challenge-chip.failed { color: #8b7e75; background: #e9e2dc; }
.challenge-body { padding: 13px 14px 15px; }
.challenge-lane + .challenge-lane { margin-top: 13px; padding-top: 13px; border-top: 1px solid #eee6df; }
.challenge-lane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }.challenge-lane-head strong { font-size: 10px; }.challenge-lane-head span { color: var(--muted); text-align: right; font-size: 8px; }
.challenge-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(49px,1fr); gap: 5px; overflow-x: auto; overscroll-behavior-x: contain; padding: 1px 0 5px; scrollbar-gutter: stable; }
.challenge-day { display: grid; min-width: 0; min-height: 58px; place-items: center; align-content: center; gap: 3px; border: 1px solid #e6ddd6; border-radius: 11px; color: #9a8c83; background: #f5f0eb; text-align: center; }
.challenge-day b { font-size: 8px; }.challenge-day small { max-width: 100%; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.challenge-day.done { border-color: #bbd7c6; color: #426552; background: #e2eee7; }.challenge-day.missed { border-color: #ead3ca; color: #9c6754; background: #f8e8e1; }.challenge-day.upcoming { opacity: .72; }
.challenge-pending-body { padding: 14px; }.challenge-pending-body p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }.challenge-pending-body .friend-request-actions { margin-top: 11px; }
.friend-sheet-copy { margin: -5px 1px 13px; color: var(--muted); font-size: 10px; line-height: 1.65; }
.friend-input-wrap { position: relative; display: block; }.friend-input-wrap input { padding-right: 45px; }.friend-input-clear { position: absolute; top: 7px; right: 7px; display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 11px; color: #77675e; background: #f0e8e1; font-size: 17px; cursor: pointer; }
.friend-form-meta { display: flex; align-items: center; justify-content: space-between; margin: 7px 2px 0; color: #9a8d84; font-size: 8px; }.friend-form-meta span:first-child { color: #7b665a; font-variant-numeric: tabular-nums; font-weight: 750; }
.challenge-invite-mark { display: flex; width: 175px; align-items: center; margin: 3px auto 18px; }.challenge-invite-mark i { display: grid; width: 47px; height: 47px; flex: 0 0 47px; place-items: center; border-radius: 17px; color: #fff; background: #63836f; font-style: normal; font-size: 10px; font-weight: 800; }.challenge-invite-mark i:last-child { color: #714e3c; background: #ecd0bc; }.challenge-invite-mark span { position: relative; display: grid; height: 2px; flex: 1; place-items: center; color: #fff; background: #d9a276; font-size: 9px; }.challenge-invite-mark span::after { content: attr(data-days); position: absolute; display: grid; min-width: 38px; height: 25px; padding: 0 8px; place-items: center; border-radius: 999px; color: #955b3f; background: #f6dfcf; font-size: 8px; font-weight: 800; white-space: nowrap; }
.challenge-category-field,.challenge-rule-field { margin: 14px 0 0; padding: 0; border: 0; }
.challenge-category-field legend,.challenge-rule-field legend { margin: 0 0 8px 2px; color: #66584f; font-size: 11px; font-weight: 700; }
.challenge-category-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.challenge-category-options input,.challenge-rule-options input { position: absolute; opacity: 0; pointer-events: none; }
.challenge-category-options label { display: grid; min-height: 66px; place-items: center; align-content: center; gap: 5px; border: 1px solid #e3d9d2; border-radius: 15px; color: #796960; background: #fffdfb; cursor: pointer; transition: transform var(--motion-fast) ease,border-color var(--motion-fast) ease,background-color var(--motion-fast) ease; }
.challenge-category-options label b { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 9px; color: #7d5a49; background: #f5dfd2; font-size: 9px; }
.challenge-category-options label span { font-size: 9px; font-weight: 750; }
.challenge-category-options input:checked + label { border-color: #8daf9a; color: #416451; background: #eff6f2; box-shadow: inset 0 0 0 1px #8daf9a; }
.challenge-category-options input:focus-visible + label,.challenge-rule-options input:focus-visible + label { outline: 3px solid rgba(214,138,103,.24); outline-offset: 2px; }
.challenge-category-options label:active,.challenge-rule-options label:active { transform: scale(.98); }
.challenge-days-input { position: relative; display: block; }
.challenge-days-input input { padding-right: 47px; }
.challenge-days-input i { position: absolute; top: 0; right: 14px; display: grid; height: 50px; align-items: center; color: #8d7e75; font-size: 10px; font-style: normal; pointer-events: none; }
.field-hint { display: block; margin: 6px 2px 0; color: #9a8d84; font-size: 8px; line-height: 1.5; }
.challenge-rule-options { display: grid; gap: 7px; }
.challenge-rule-options label { display: grid; min-height: 58px; align-content: center; gap: 4px; padding: 10px 13px; border: 1px solid #e3d9d2; border-radius: 14px; color: #66564d; background: #fffdfb; cursor: pointer; transition: transform var(--motion-fast) ease,border-color var(--motion-fast) ease,background-color var(--motion-fast) ease; }
.challenge-rule-options label strong,.challenge-rule-options label small { display: block; }.challenge-rule-options label strong { font-size: 10px; }.challenge-rule-options label small { color: var(--muted); font-size: 8px; line-height: 1.45; }
.challenge-rule-options input:checked + label { border-color: #d39a79; background: #fff5ef; box-shadow: inset 0 0 0 1px #d39a79; }
.challenge-calcium-rule[hidden],.challenge-rule-field[hidden] { display: none; }
.challenge-privacy-note { display: grid; gap: 4px; margin: 12px 0 0; padding: 12px 13px; border: 1px solid #dce7e0; border-radius: 14px; color: #66796e; background: #f0f6f2; font-size: 9px; line-height: 1.55; }.challenge-privacy-note strong { color: #4e6c5b; font-size: 9px; }.friend-challenge-with { margin: 15px 1px 0; color: var(--muted); font-size: 9px; }.friend-challenge-with strong { color: var(--ink); }
.friend-message-backdrop { align-items: center; padding: max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
.friend-message-dialog { position: relative; width: 100%; max-width: 334px; overflow: hidden; padding: 31px 24px 23px; border: 1px solid rgba(111,78,59,.09); border-radius: 29px; text-align: center; background: radial-gradient(circle at 50% -12%,#e2eee7 0,rgba(226,238,231,0) 45%),#fffdf9; box-shadow: 0 24px 62px rgba(55,37,30,.25); animation: sheetUp var(--motion-sheet) cubic-bezier(.2,.76,.24,1) both; }
.friend-message-dialog::before,.friend-message-dialog::after { content: ""; position: absolute; width: 72px; height: 1px; top: 68px; background: repeating-linear-gradient(90deg,#cb8a67 0 4px,transparent 4px 8px); }.friend-message-dialog::before { left: -8px; transform: rotate(18deg); }.friend-message-dialog::after { right: -8px; transform: rotate(-18deg); }
.friend-message-stamp { display: grid; width: 61px; height: 61px; margin: 0 auto 18px; place-items: center; transform: rotate(-4deg); border: 2px solid #f2d0bc; border-radius: 20px 18px 22px 16px; color: #fffaf5; background: linear-gradient(145deg,#df8d68,#bd684c); box-shadow: inset 0 0 0 5px rgba(255,249,244,.28),0 10px 23px rgba(178,96,66,.2); font-size: 20px; }
.friend-message-dialog .eyebrow { color: #647d6e; }.friend-message-dialog h2 { margin: 0; font-family: "Songti SC","STSong",serif; font-size: 23px; }.friend-message-dialog blockquote { margin: 16px 3px 0; color: #514038; font-family: "Songti SC","STSong",serif; font-size: 17px; font-weight: 700; line-height: 1.7; quotes: "“" "”"; overflow-wrap: anywhere; }.friend-message-dialog blockquote::before { content: open-quote; color: #c78b6c; }.friend-message-dialog blockquote::after { content: close-quote; color: #c78b6c; }.friend-message-time { margin: 11px 0 18px; color: #a09288; font-size: 8px; }.friend-message-action { width: 100%; min-height: 49px; border: 0; border-radius: 15px; color: #fff9f4; background: var(--deep); font-size: 11px; font-weight: 750; cursor: pointer; }
.history-list { display: grid; gap: 19px; }.month-title { margin: 0 0 8px 3px; color: var(--muted); font-size: 10px; font-weight: 750; }.history-group { display: grid; gap: 8px; }
.history-overview { display: flex; align-items: center; justify-content: space-between; min-height: 26px; color: var(--muted); font-size: 9px; }
.history-overview p { margin: 0; color: #6f5f56; font-weight: 750; }
.history-item { width: 100%; min-height: 73px; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 13px; border: 1px solid rgba(65,49,40,.05); border-radius: 18px; text-align: left; background: var(--surface); cursor: pointer; }
.history-item:hover { border-color: rgba(134,88,65,.13); background: #fffaf5; }
.history-item:active { transform: scale(.99); background: #fffaf5; }.date-tile { display: flex; height: 47px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 13px; text-align: center; background: #f2e6dc; }
.date-tile strong { font-size: 17px; line-height: 17px; }.date-tile small { margin: 0; color: var(--muted); font-size: 8px; line-height: 10px; }
.history-main { display: grid; min-width: 0; align-content: center; }.history-main strong, .history-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.history-main strong { font-size: 13px; line-height: 17px; }.history-main small { color: var(--muted); font-size: 9px; line-height: 12px; }
.history-duration { display: grid; align-content: center; text-align: right; }.history-duration strong { display: block; font-size: 15px; line-height: 20px; }.history-duration small { color: #b07351; font-size: 10px; line-height: 13px; letter-spacing: 1px; }
.poop-tile { background: #efe0cf; }.calcium-tile { background: #dfece5; }
.event-tag { display: inline-block; margin-bottom: 3px; padding: 2px 5px; border-radius: 5px; color: #97543a; background: #f8e2d6; font-size: 7px; font-style: normal; font-weight: 750; }
.event-tag.poop-tag { color: #6f4c3d; background: #efdfcf; }.event-tag.calcium-tag { color: #4f7562; background: #deece4; }
.history-pagination { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 10px; padding-top: 2px; }
.history-pagination button { min-height: 44px; padding: 0 14px; border: 1px solid #e4d9d1; border-radius: 14px; color: #625249; background: var(--surface); font-size: 10px; font-weight: 750; cursor: pointer; transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.history-pagination button:last-child { justify-self: stretch; }
.history-pagination button:hover:not(:disabled) { border-color: #d3b8a8; background: #fff8f2; }
.history-pagination button:active:not(:disabled) { transform: scale(.97); }
.history-pagination button:disabled { color: #b7aaa2; background: #eee8e2; cursor: not-allowed; }
.history-pagination span { min-width: 62px; color: var(--muted); text-align: center; font-size: 9px; white-space: nowrap; }
.history-pagination strong { color: var(--ink); font-size: 11px; }
.empty-state { padding: 52px 24px; text-align: center; color: var(--muted); }.empty-state .empty-moon { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; background: #f6d9c6; box-shadow: inset 15px -8px 0 #d99f7e; }
.empty-state h3 { margin: 0 0 8px; color: var(--ink); font-size: 16px; }.empty-state p { margin: 0; font-size: 10px; line-height: 1.7; }
.bottom-nav {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: 402px;
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  padding: 8px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  transform: translateX(-50%);
  border: 0;
  border-top: 1px solid #e7dfd7;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}
.bottom-nav button { display: grid; min-height: 51px; grid-template-rows: 20px 12px; justify-items: center; align-content: center; gap: 3px; border: 0; padding: 4px; border-radius: 16px; color: #a0938b; background: transparent; font-size: 8px; cursor: pointer; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform var(--motion-fast) ease; }
.bottom-nav button:active { transform: scale(.94); }

/* 恋爱手帐：浅紫计数、正方形相册与奶油色期待。 */
.love-binding-state { margin: -3px 0 15px; }
.love-binding-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px dashed #d7bca9; border-radius: 16px; color: #7b604f; font-size: 11px; line-height: 1.6; }
.love-binding-empty button { flex: none; min-height: 40px; padding: 6px 9px; border: 0; border-radius: 10px; background: #ead8c8; color: #684837; cursor: pointer; font-size: 11px; }
.love-bound-pair { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px 5px; }
.love-bound-person { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; }.love-bound-person span { max-width: 95px; overflow-wrap: anywhere; }.love-bound-person i { display: grid; flex: none; width: 32px; height: 32px; place-items: center; border: 1px solid #d2b6a3; border-radius: 50%; color: #84543f; background: #ecd5c3; font-size: 12px; font-style: normal; }.love-bound-person:last-child i { color: #516a53; background: #e1e9dc; border-color: #b6c4ad; }.love-bound-heart { color: #a45140; font-size: 17px; }
.love-sync-panel { margin-top: 12px; padding: 16px 18px; border: 1px solid #e4d8ce; border-radius: 20px; background: var(--surface); }.love-sync-panel[hidden] { display: none; }.love-sync-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.love-sync-heading strong { font-size: 13px; }
.love-sync-panel p { margin: 8px 0 11px; color: #7b685b; font-size: 11px; line-height: 1.6; }.love-sync-panel > button { width: 100%; min-height: 44px; border: 0; border-radius: 13px; color: #fff7eb; background: #897298; cursor: pointer; font-size: 13px; font-weight: 700; }.love-sync-panel button:disabled { opacity: .55; cursor: default; }
.friend-card-actions .friend-bind-lover { width: 100%; grid-column: 1 / -1; color: #984b3b; border-color: #d8b4a2; background: #f8e9de; }.friend-card-actions .friend-bind-lover:disabled { opacity: .65; cursor: default; }
.love-sync-panel > .love-receive-button { min-height: 48px; margin-bottom: 10px; border: 1px solid #c7d0bd; color: #536747; background: #edf2e5; font-size: 13px; }.love-sync-panel > #publish-love { min-height: 48px; }
/* Quiet lavender time card and two perfectly aligned square memories. */
.love-days-card { position: relative; isolation: isolate; overflow: hidden; margin-bottom: 18px; padding: 17px 22px 0; border: 1px solid #d3cee6; border-radius: 24px; color: #423957; background: linear-gradient(130deg,#efedf8,#e7e2f0); box-shadow: 0 6px 20px #5c486408; }
.love-days-card::after { content: ""; position: absolute; z-index: -1; right: -32px; top: -55px; width: 175px; height: 175px; border-radius: 50%; background: #fff9; filter: blur(1px); }
.love-card-top { display: flex; align-items: center; justify-content: space-between; color: #625574; font-size: 11px; letter-spacing: .12em; }
.love-card-top button { min-height: 44px; margin: -10px -8px -10px 0; padding: 8px; border: 0; color: #625574; background: transparent; font-size: 11px; cursor: pointer; }
.love-day-emblem { position: absolute; right: 23px; top: 56px; width: 57px; height: 57px; transform: rotate(-9deg); }.love-day-emblem svg { width: 100%; height: 100%; fill: none; stroke: #b29ebd; stroke-width: 1.2; }
.love-day-label { margin: 22px 0 1px; color: #766586; font-size: 11px; letter-spacing: .12em; }
.love-day-number { display: flex; align-items: baseline; gap: 11px; margin: 0; }.love-day-number strong { font-family: "Avenir Next", "SF Pro Display", sans-serif; font-size: min(24vw,var(--love-digit-size,90px)); font-weight: 400; line-height: 1.1; letter-spacing: -.065em; font-variant-numeric: tabular-nums; }.love-day-number span { font-size: 15px; }
.love-days-copy { margin: 7px 0 19px; color: #73617e; font-family: "Songti SC", "STSong", serif; font-size: 12px; line-height: 1.7; }
.love-card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px; margin: 0 -22px; padding: 13px 22px; border-top: 1px solid #c6bddb70; color: #72647f; background: #f8f6fc60; font-size: 10px; line-height: 1.6; }.love-card-footer span:first-child { max-width: 100%; overflow-wrap: anywhere; font-size: 12px; font-weight: 600; }
.love-memory-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; align-items: stretch; }
.love-photo-card,.love-anniversary-card { position: relative; display: grid; grid-template-rows: 64px auto 44px; min-width: 0; margin: 4px 0 0; padding: 0 11px; border: 1px solid #ded5c8; border-radius: 7px 8px 12px 7px; background: linear-gradient(145deg,#fffefa,#fffdf8); box-shadow: 1px 3px 0 #e9e0d37a,0 7px 14px #53403908; }
.love-photo-card::before { content: ""; position: absolute; z-index: 1; top: -9px; left: calc(50% - 29px); width: 58px; height: 19px; border: 1px solid #d9ba9180; background: repeating-linear-gradient(0deg,#ebd4b13d 0 1px,transparent 1px 4px),#efdab7b5; box-shadow: 0 1px 2px #7457380b; transform: rotate(-6deg); pointer-events: none; }
.love-photo-card .love-section-title h3 { color: #544838; font-family: inherit; font-weight: 650; }.love-photo-card .love-section-title .eyebrow { color: #7d6c5b; }.love-photo-card .love-section-title button { color: #9c7056; }
.love-anniversary-card { border-color: #d6dbce; background: linear-gradient(145deg,#fbfdf8,#f4f7f0); box-shadow: 1px 3px 0 #dde4d67a,0 7px 14px #46573d08; }
.love-anniversary-card .love-section-title h3 { color: #435843; font-family: inherit; font-weight: 600; }.love-anniversary-card .love-section-title .eyebrow { color: #63745c; }.love-anniversary-card .love-section-title button { color: #708362; }
.love-section-title { display: flex; align-items: center; justify-content: space-between; gap: 3px; min-width: 0; }.love-section-title > div { min-width: 0; }.love-section-title h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: #554660; font-family: "Songti SC", "STSong", serif; font-size: 14px; line-height: 1.4; }.love-section-title .eyebrow { margin-bottom: 3px; color: #7d6a85; font-size: 8px; letter-spacing: .06em; }
.love-section-title button { flex: none; width: 34px; min-height: 44px; margin-right: -6px; padding: 6px; border: 0; color: #8d7b9a; background: transparent; font-size: 16px; cursor: pointer; }
.love-photo-gallery { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin: 0; padding: 0; aspect-ratio: 1; border-radius: 4px; scrollbar-width: none; }.love-photo-gallery::-webkit-scrollbar { display: none; }
.love-photo-frame { flex: 0 0 100%; overflow: hidden; border-radius: 4px; background: #eeebe7; aspect-ratio: 1; scroll-snap-align: center; }.love-photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.love-photo-empty { display: grid; flex: 0 0 100%; width: 100%; aspect-ratio: 1; place-items: center; align-content: center; gap: 9px; padding: 8px; border: 1px dashed #d6ccdc; border-radius: 10px; color: #7d6a85; background: #f2eff5; text-align: center; font-size: 9px; }.love-photo-empty > span { display: grid; width: 33px; height: 33px; place-items: center; border: 1px solid #d5c9dc; border-radius: 50%; font-size: 20px; }
.love-photo-footer { display: flex; align-items: center; justify-content: space-between; gap: 3px; }.love-photo-caption { margin: 0; color: #7d6a85; font-size: 10px; font-variant-numeric: tabular-nums; }.love-photo-footer > div { display: flex; }.love-photo-footer button { width: 36px; min-height: 40px; padding: 0; border: 0; color: #82728f; background: transparent; cursor: pointer; font-size: 23px; }.love-photo-footer button[hidden] { display: none; }
.love-countdown-face { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; aspect-ratio: 1; padding: 42px 5px 20px; border: 1px solid #cbd4be; border-radius: 5px 5px 8px 8px; color: #43593e; background: linear-gradient(#dce5d2 0 35px,#edf1e5 35px); box-shadow: 0 3px 0 #dbe2cf,0 5px 0 -1px #f8faef; }
.love-countdown-face::before,.love-countdown-face::after { content: ""; position: absolute; z-index: 1; top: -7px; width: 5px; height: 13px; border: 1px solid #8d9b7c; border-radius: 3px; background: #fbfcf4; box-shadow: 1px 1px 0 #66775515; }.love-countdown-face::before { left: 19%; }.love-countdown-face::after { right: 19%; }
.love-countdown-botanical { position: absolute; z-index: -1; right: 3px; bottom: 3px; width: 48px; height: 55px; fill: none; stroke: #adb998; stroke-width: 1; opacity: .65; pointer-events: none; }
.love-date-stamp { position: absolute; top: 12px; left: 8px; right: 8px; padding-bottom: 10px; border-bottom: 1px dashed #b8c5a8; color: #526348; font-family: "Avenir Next", sans-serif; font-size: 10px; letter-spacing: .15em; text-align: center; }
.love-anniversary-number { display: flex; flex-direction: column; align-items: center; gap: 5px; max-width: 100%; }.love-anniversary-number strong { max-width: 100%; font-family: Georgia,"Times New Roman",serif; font-size: var(--countdown-digit-size,44px); font-weight: 400; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }.love-anniversary-number span { color: #627155; font-size: 10px; letter-spacing: .12em; }
.love-anniversary-card > p { display: grid; align-content: center; margin: 0; color: #617055; text-align: center; font-size: 10px; line-height: 1.5; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.love-photo-card .love-photo-caption { color: #7d6c5b; }.love-photo-card .love-photo-footer button { color: #9b785f; }.love-photo-card .love-photo-empty { border-color: #d5c6b3; border-radius: 4px; color: #7d6c5b; background: #f4eee4; }.love-photo-card .love-photo-empty > span { border-color: #d5c6b3; }
.love-photo-preview { display: flex; gap: 9px; overflow-x: auto; padding: 5px 3px 12px; margin: 0 -3px 8px; }
.love-photo-thumb { position: relative; flex: 0 0 58px; padding: 3px; border: 1px solid #ddd1e3; border-radius: 10px; color: #fff; background: #f8f4fa; cursor: pointer; }.love-photo-thumb .love-photo-frame { width: 100%; border-radius: 6px; }.love-photo-thumb > span { position: absolute; right: 5px; bottom: 5px; min-width: 16px; padding: 1px 3px; border-radius: 4px; background: #44354e9c; font-size: 9px; }.love-photo-thumb[aria-pressed="true"] { outline: 2px solid #9583ab; outline-offset: 1px; }
.love-album-empty { margin: 0; padding: 10px 0; color: #96859b; font-size: 11px; line-height: 1.7; }
#love-crop-editor[hidden] { display: none; }.love-crop-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 9px; color: #695474; }.love-crop-heading strong { font-size: 12px; }.love-crop-heading > span { font-size: 9px; color: #7d6687; }
.love-crop-boundary { position: relative; width: min(100%,310px); aspect-ratio: 1; overflow: hidden; margin: 0 auto; border: 2px solid #a088b2; border-radius: 9px; background: #e5dfe8; box-shadow: 0 0 0 4px #eee7f1; }
#love-crop-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }#love-crop-canvas:active { cursor: grabbing; }
.love-crop-grid { position: absolute; pointer-events: none; inset: 0; background: linear-gradient(to right,transparent calc(33.33% - .5px),#fff5 33.33%,transparent calc(33.33% + .5px),transparent calc(66.67% - .5px),#fff5 66.67%,transparent calc(66.67% + .5px)),linear-gradient(to bottom,transparent calc(33.33% - .5px),#fff5 33.33%,transparent calc(33.33% + .5px),transparent calc(66.67% - .5px),#fff5 66.67%,transparent calc(66.67% + .5px)); }
.love-crop-corners { position: absolute; pointer-events: none; inset: 6px; border: 1px solid #fff9; border-radius: 3px; }
.love-crop-control { display: block; min-width: 0; margin: 14px 0 0; }.love-crop-control > span { display: flex; justify-content: space-between; color: #7d6486; font-size: 11px; }.love-crop-control input { display: block; width: 100%; height: 36px; margin: 0; padding: 0; accent-color: #9682a9; cursor: pointer; }
.love-crop-position { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }.love-crop-position .love-crop-control { margin: 0; }
.love-crop-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin-top: 5px; }.love-crop-actions button,.love-replace-label { display: grid; place-items: center; min-height: 44px; padding: 5px 2px; border: 1px solid #ded1e4; border-radius: 10px; color: #7c6388; background: #f3edf7; font-size: 10px; cursor: pointer; }.love-replace-label input { position: absolute; width: 1px; height: 1px; opacity: 0; }.love-replace-label:focus-within { outline: 3px solid #b4a0bf70; }.love-replace-label:has(input:disabled) { opacity: .5; cursor: default; }
.love-upload-label { display: flex; min-height: 48px; align-items: center; justify-content: space-between; margin-top: 14px; padding: 10px 14px; border: 1px dashed #b8a4c4; border-radius: 14px; color: #7b6188; background: #f6f1f8; font-size: 13px; cursor: pointer; }.love-upload-label:focus-within { outline: 3px solid #b4a0bf70; outline-offset: 2px; }.love-upload-label input { position: absolute; width: 1px; height: 1px; opacity: 0; }.love-upload-label span { font-size: 11px; }.love-upload-label[aria-disabled="true"] { opacity: .5; cursor: default; }
@media (max-width: 350px) { .love-days-card { padding-right: 18px; padding-left: 18px; }.love-card-footer { margin-right: -18px; margin-left: -18px; padding-right: 18px; padding-left: 18px; }.love-memory-grid { gap: 10px; }.love-photo-card,.love-anniversary-card { padding-right: 8px; padding-left: 8px; }.love-section-title h3 { font-size: 12px; }.love-section-title button { width: 27px; }.love-countdown-face { padding-top: 36px; padding-bottom: 12px; }.love-anniversary-number strong { font-size: min(36px,var(--countdown-digit-size,44px)); }.love-countdown-botanical { width: 37px; height: 43px; }.love-journal-tabs button { font-size: 11px; }.love-note-paper { padding-right: 10px; padding-left: 10px; } }

.love-journal { margin-top: 27px; }
.love-journal-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 13px; }.love-journal-heading h3 { margin: 0; font-family: "Songti SC", "STSong", serif; font-size: 22px; }.love-journal-heading .eyebrow { font-size: 9px; letter-spacing: .08em; }.love-journal-mark { color: #aa7254; font-size: 28px; }
.love-journal-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 4px; border: 1px solid #dfd2c2; border-radius: 14px; background: #eee4d7; }
.love-journal-tabs button { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 7px 3px; border: 0; border-radius: 10px; color: #756557; background: transparent; font-size: 12px; cursor: pointer; transition: background var(--motion-fast),color var(--motion-fast); }
.love-journal-tabs button[aria-selected="true"] { color: #754534; background: var(--surface); box-shadow: 0 2px 5px #5734200c; font-weight: 700; }.love-journal-tabs button span { font-size: 10px; opacity: .75; font-variant-numeric: tabular-nums; }
.love-journal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 2px 5px; }.love-journal-toolbar p { margin: 0; color: #7e6d5e; font-size: 10px; line-height: 1.7; }.love-journal-toolbar button { flex: none; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 10px; color: #86533b; background: #eee0cb; font-size: 11px; font-weight: 650; cursor: pointer; }
.love-journal [role="tabpanel"][hidden] { display: none; }
.love-wish-row { display: flex; align-items: center; gap: 5px; padding: 6px 2px; border-bottom: 1px solid #d9cdbd; }.love-wish-row:last-child { border: 0; }
.love-wish-toggle { display: flex; flex: 1; align-items: center; gap: 11px; min-width: 0; min-height: 48px; padding: 4px 0; border: 0; color: #493e32; text-align: left; background: transparent; cursor: pointer; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.love-wish-toggle i { display: grid; flex: none; width: 23px; height: 23px; place-items: center; border: 1px solid #b39b81; border-radius: 50%; font-style: normal; }.love-wish-toggle[aria-pressed="true"] i { color: #fff; border-color: #6d8062; background: #6d8062; }.love-wish-toggle small { display: block; color: #6b7b61; font-size: 9px; }.love-wish-delete { flex: none; width: 40px; min-height: 44px; border: 0; color: #8d7966; background: transparent; font-size: 20px; cursor: pointer; }
.love-journal-empty { grid-column: 1/-1; display: grid; justify-items: center; padding: 23px 10px 25px; color: #7e6d5e; text-align: center; }.love-journal-empty > span { display: grid; width: 43px; height: 43px; place-items: center; margin-bottom: 10px; border: 1px dashed #c5af96; border-radius: 50%; color: #a17454; font-size: 23px; }.love-journal-empty strong { color: #74604d; font-family: "Songti SC", "STSong", serif; font-size: 15px; font-weight: 500; }.love-journal-empty p { margin: 8px 0 0; font-size: 11px; line-height: 1.8; }
.love-notes-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 16px 12px; padding: 12px 2px 5px; }
.love-note-paper { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-width: 0; min-height: 163px; padding: 22px 13px 12px; border: 1px solid #ddcaa8; border-radius: 2px 2px 14px 2px; color: #594735; background: #f3e6c6; text-align: left; box-shadow: 0 4px 8px #713d2609; cursor: pointer; transition: transform var(--motion-fast); }
.love-note-paper:nth-child(3n+1) { transform: rotate(-1deg); }.love-note-paper:nth-child(3n+2) { transform: rotate(1deg); }.love-note-paper:active { transform: rotate(0) translateY(2px); }
.love-note-paper[data-color="rose"],#love-note-text[data-color="rose"] { border-color: #dfc0b5; background: #f2dcd3; }.love-note-paper[data-color="sage"],#love-note-text[data-color="sage"] { border-color: #becdb5; background: #e1e8d5; }
.love-note-tape { position: absolute; top: -7px; left: calc(50% - 20px); width: 40px; height: 15px; background: #fcf5e9aa; border: 1px solid #d6c3a640; transform: rotate(-6deg); }
.love-note-body { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; font-family: "Songti SC", "STSong", serif; font-size: 14px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }.love-note-meta { display: flex; justify-content: space-between; align-items: center; gap: 3px; width: 100%; color: #7c6854; font-size: 9px; line-height: 1.6; }.love-note-meta > span { font-size: 16px; }
.love-note-colors { display: flex; gap: 12px; margin: 0 0 18px; padding: 0; border: 0; }.love-note-colors legend { margin-bottom: 10px; font-size: 12px; font-weight: 600; }.love-note-colors button { width: 44px; height: 44px; border: 1px solid #d0b78e; border-radius: 50%; background: #f3e6c6; cursor: pointer; }.love-note-colors button[data-love-note-color="rose"] { background: #f2dcd3; }.love-note-colors button[data-love-note-color="sage"] { background: #e1e8d5; }.love-note-colors button[aria-pressed="true"] { outline: 2px solid #8b6144; outline-offset: 3px; }.love-note-colors button[aria-pressed="true"]::after { content: "✓"; }
#love-note-text { background: #f3e6c6; line-height: 1.8; resize: vertical; }
.love-notes-overview { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 15px; border-top: 1px solid #ded2c3; padding-top: 8px; color: #776655; font-size: 10px; }.love-notes-overview button { min-height: 44px; border: 0; padding: 5px 0 5px 10px; color: #684b37; background: transparent; font-size: 12px; cursor: pointer; }
.love-note-pin-badge { align-self: flex-start; margin: -3px 0 2px; border: 1px solid #9e806249; border-radius: 4px; padding: 1px 5px; color: #725137; background: #fff9ed66; font-size: 9px; line-height: 1.6; }
.love-note-paper { height: 210px; }.love-note-paper .love-note-body { -webkit-line-clamp: 4; }
.love-note-pin-control { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; color: #5e4a38; font-size: 13px; cursor: pointer; }.love-note-pin-control input { width: 20px; height: 20px; margin: 0; accent-color: #8b6144; flex: none; }.love-note-pin-control small { display: block; margin-top: 4px; color: #7d6b5b; font-size: 11px; line-height: 1.7; }
.love-notes-back { min-height: 44px; margin: -5px 0 14px; padding: 0 5px; border: 0; color: #7c654e; background: transparent; font-size: 12px; cursor: pointer; }.love-library-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }.love-library-heading .eyebrow { margin-bottom: 7px; color: #8b7561; font-size: 10px; }.love-library-heading h2 { margin: 0; font-family: "Songti SC","STSong",serif; font-size: 26px; font-weight: 500; }.love-library-heading > button { min-height: 44px; padding: 6px 12px; border: 1px solid #d8c5af; border-radius: 10px; color: #76513a; background: #f1e5d4; font-size: 12px; cursor: pointer; }
.love-library-summary { margin: 13px 0 23px; color: #7d6b5b; font-size: 11px; line-height: 1.8; }.love-notes-library .love-notes-grid { gap: 20px 14px; padding: 0 3px; }.love-notes-library .love-note-paper { min-height: 170px; }
.love-notes-pagination { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #ded2c3; }.love-notes-pagination button { min-height: 44px; padding: 8px 12px; border: 1px solid #d9cbb9; border-radius: 10px; color: #71583e; background: #fcf8f0; font-size: 11px; cursor: pointer; }.love-notes-pagination label { flex: 1; min-width: 0; }.love-notes-pagination select { width: 100%; min-height: 44px; border: 1px solid #d9cbb9; border-radius: 10px; padding: 8px 6px; color: #71583e; background: #fcf8f0; font-size: 12px; text-align: center; }.love-notes-pagination .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.love-library-footnote { margin: 18px 0 0; text-align: center; color: #827161; font-size: 10px; line-height: 1.8; }
.love-wish-card { min-width: 0; padding: 12px 11px 4px; border: 1px solid #ddcdb5; border-radius: 6px 6px 13px 6px; background: #fcf7eb; box-shadow: 0 3px 8px #713d2606; }.love-wish-card .love-wish-toggle { width: 100%; flex-direction: column; align-items: flex-start; gap: 9px; min-height: 112px; padding-top: 0; padding-bottom: 9px; }.love-wish-card .love-wish-toggle > span { width: 100%; }.love-wish-card .love-wish-toggle small { margin-top: 7px; font-size: 9px; }.love-wish-card > div { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #ddd0bc; }.love-wish-pin { min-height: 40px; padding: 4px 5px; border: 0; color: #806c54; background: transparent; font-size: 10px; cursor: pointer; }.love-wish-pin[aria-pressed="true"] { color: #745339; font-weight: 600; }.love-wish-card .love-wish-delete { width: 32px; min-height: 40px; }
.sheet-backdrop.love-note-detail-backdrop { align-items: center; padding: max(28px,env(safe-area-inset-top)) 20px max(28px,env(safe-area-inset-bottom)); }
.love-note-detail { position: relative; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 362px; min-height: 280px; max-height: calc(100dvh - 72px); padding: 25px 23px 18px; border: 1px solid #d7bd91; border-radius: 4px 4px 20px 4px; color: #594735; background: #f3e6c6; box-shadow: 0 22px 65px #35261935; animation: loveNoteZoom 260ms cubic-bezier(.16,.8,.26,1) both; }
.love-note-detail[data-color="rose"] { border-color: #dfc0b5; background: #f2dcd3; }.love-note-detail[data-color="sage"] { border-color: #becdb5; background: #e1e8d5; }
.love-note-detail > .love-note-tape { width: 64px; height: 23px; top: -12px; left: calc(50% - 32px); }
.love-note-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }.love-note-detail-heading .eyebrow { margin-bottom: 7px; color: #7c6854; font-size: 10px; line-height: 1.6; }.love-note-detail-heading h2 { margin: 0; font-family: "Songti SC","STSong",serif; font-size: 22px; font-weight: 500; }.love-note-detail-heading .close-button { flex: none; background: #fff9ef65; }
#love-note-detail-text { flex: 1; min-height: 70px; max-height: 52dvh; overflow-y: auto; overscroll-behavior: contain; white-space: pre-wrap; overflow-wrap: anywhere; font-family: "Songti SC","STSong",serif; font-size: 17px; line-height: 1.95; padding: 0 2px 5px; }
#edit-love-note-detail { flex: none; min-height: 44px; padding: 9px 0 0; border: 0; border-top: 1px solid #a58a6350; color: #745338; background: transparent; text-align: right; font-size: 12px; cursor: pointer; }
.sheet-backdrop.closing .love-note-detail { transform: scale(.92); opacity: 0; transition: transform 160ms ease,opacity 160ms ease; }
@keyframes loveNoteZoom { from { opacity: 0; transform: translateY(12px) scale(.84); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .love-note-detail { animation: none; }.sheet-backdrop.closing .love-note-detail { transition: none; } }
#view-love button:disabled { opacity: .5; cursor: default; }
@media (prefers-reduced-motion: reduce) { .love-journal-tabs button,.love-note-paper { transition: none; } }

.love-form-hint { margin: 8px 0 17px; color: var(--muted); font-size: 11px; line-height: 1.6; }.form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.form-row > * { min-width: 0; }
.challenge-history-button { min-height: 44px; padding: 7px 10px; border: 1px solid #ddcbbb; border-radius: 12px; background: #fffaf4; color: #79573f; font-size: 10px; cursor: pointer; }.challenge-history-button span { margin-left: 3px; }.challenge-history-button:disabled { opacity: .55; cursor: default; }
.challenge-list-count { margin: -6px 0 10px; color: var(--muted); font-size: 10px; }.challenge-card-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 14px 13px; }.challenge-card-actions button { min-height: 44px; padding: 7px 12px; border: 1px solid #ddcbbb; border-radius: 12px; color: #79573f; background: #fffaf4; cursor: pointer; font-size: 11px; }
.challenge-record-details summary { padding: 13px 14px; color: #765945; font-size: 11px; cursor: pointer; }.challenge-record-details[open] summary { border-bottom: 1px solid #eee6df; }
.bottom-nav svg { display: block; width: 20px; height: 20px; align-self: center; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.bottom-nav button > span { display: block; height: 12px; line-height: 12px; text-align: center; }.bottom-nav button.active { color: #fff9f4; background: var(--deep); font-weight: 700; }
.sheet-backdrop { position: fixed; z-index: 30; inset: 0; display: flex; justify-content: center; align-items: flex-end; padding: 0 max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: rgba(37,27,23,.42); animation: backdropIn .16s ease-out both; }
.sheet-backdrop[hidden] { display: none; }
.bottom-sheet { width: 100%; max-width: 382px; max-height: calc(100dvh - max(18px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 10px 20px 20px; border-radius: 28px; background: #fbf7f1; box-shadow: 0 18px 52px rgba(41,29,24,.22); animation: sheetUp var(--motion-sheet) cubic-bezier(.2,.76,.24,1) both; will-change: transform; }
.sheet-backdrop.closing { opacity: 0; transition: opacity .16s ease; }
.sheet-backdrop.closing .bottom-sheet { transform: translateY(18px) scale(.985); transition: transform .16s ease; }
@keyframes backdropIn { from { background: rgba(37,27,23,0); } }
@keyframes sheetUp { from { opacity: .6; transform: translateY(34px) scale(.985); } to { opacity: 1; transform: none; } }
.sheet-handle { width: 38px; height: 4px; margin: 0 auto 15px; border-radius: 4px; background: #d5cbc3; }
.sheet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }.sheet-header h2 { font-family: "Songti SC", "STSong", serif; font-size: 25px; }
.close-button { width: 40px; height: 40px; color: #75655c; background: #eee6df; font-size: 23px; font-weight: 300; transition: transform var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.close-button:active { transform: scale(.9); background: #e5dad2; }
.bottom-sheet form, .form-field, .time-field, .form-two-col > * { min-width: 0; }
.form-field { display: block; margin-top: 14px; }.form-field > span, .quality-field legend { display: block; margin: 0 0 8px 2px; color: #66584f; font-size: 11px; font-weight: 700; }.form-field span small { color: #a79b93; font-weight: 400; }
.form-field input, .form-field textarea, .profile-input-row input { width: 100%; border: 1px solid #e4dad2; outline: none; border-radius: 14px; color: var(--ink); background: #fffdfb; }
.form-field input { min-width: 0; height: 50px; padding: 0 13px; font-size: 16px; }.form-field textarea { min-height: 82px; padding: 13px; resize: none; font-size: 16px; line-height: 1.5; }
.form-field input[type="date"], .form-field input[type="time"], .time-field input[type="time"], .bedtime-goal-row input[type="time"] { display: flex; width: 100%; min-width: 0; max-width: 100%; align-items: center; justify-content: center; overflow: hidden; padding-block: 0; -webkit-appearance: none; appearance: none; line-height: normal; font-variant-numeric: tabular-nums; }
.form-field input[type="date"]::-webkit-date-and-time-value, .form-field input[type="time"]::-webkit-date-and-time-value, .time-field input[type="time"]::-webkit-date-and-time-value, .bedtime-goal-row input[type="time"]::-webkit-date-and-time-value { display: flex; min-width: 0; height: 100%; align-items: center; justify-content: center; margin: 0; padding: 0; line-height: normal; text-align: center; }
.form-field input:focus, .form-field textarea:focus, .time-field input:focus, .profile-input-row input:focus { border-color: #d68a67; box-shadow: 0 0 0 3px rgba(214,138,103,.12); }
.time-grid { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: end; gap: 10px; margin-top: 14px; }.time-field span { display: block; margin: 0 0 8px 2px; color: #66584f; font-size: 11px; font-weight: 700; }
.time-field input { width: 100%; min-width: 0; height: 53px; padding: 0 7px; border: 1px solid #e4dad2; outline: none; border-radius: 15px; color: var(--ink); background: #fffdfb; font-size: 18px; font-weight: 700; }.time-arrow { padding-bottom: 18px; text-align: center; color: #a0938a; }
.time-arrow { position: absolute; z-index: 2; left: 50%; bottom: 14px; display: grid; width: 24px; height: 24px; padding: 0; transform: translateX(-50%); place-items: center; border: 1px solid #e7ddd6; border-radius: 50%; color: #6f5f56; background: #fbf7f1; font-size: 14px; line-height: 1; font-weight: 700; pointer-events: none; }
.duration-preview { display: flex; justify-content: space-between; margin-top: 10px; padding: 12px 13px; border-radius: 13px; color: #87543e; background: #f8e5d9; font-size: 10px; }.duration-preview strong { font-size: 11px; }
.quality-field { margin: 16px 0 0; padding: 0; border: 0; }.quality-options { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; }.quality-options input { position: absolute; opacity: 0; pointer-events: none; }
.quality-options label { display: flex; min-width: 0; min-height: 59px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 2px; border: 1px solid #e5dcd5; border-radius: 13px; text-align: center; background: #fffdfb; cursor: pointer; transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.quality-options label:active { transform: scale(.94); }
.quality-options label span { display: block; font-size: 19px; line-height: 20px; filter: grayscale(.4); opacity: .7; }.quality-options label small { display: block; color: #91837a; font-size: 8px; line-height: 9px; }
.quality-options input:checked + label { border-color: #df9a79; background: #f9e6da; box-shadow: 0 0 0 2px rgba(223,154,121,.10); }.quality-options input:checked + label span { filter: none; opacity: 1; }
.save-button, .delete-button { width: 100%; min-height: 53px; margin-top: 19px; border: 0; border-radius: 16px; color: #fff; background: linear-gradient(145deg,#4b342d,#30221e); box-shadow: 0 10px 22px rgba(57,39,32,.13); font-weight: 750; cursor: pointer; transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.save-button:active { transform: scale(.98); box-shadow: 0 5px 13px rgba(57,39,32,.11); }
.delete-button { margin-top: 7px; color: var(--danger); background: transparent; font-size: 11px; }
.form-two-col { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 9px; }
.choice-field { margin: 15px 0 0; padding: 0; border: 0; }
.choice-field legend { margin: 0 0 7px 2px; color: #66584f; font-size: 10px; font-weight: 700; }
.condition-options { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.condition-options input { position: absolute; opacity: 0; pointer-events: none; }
.condition-options label { display: grid; min-width: 0; min-height: 45px; place-items: center; border: 1px solid #e5dcd5; border-radius: 12px; color: #786a61; text-align: center; background: #fffdfb; font-size: 10px; line-height: 1; cursor: pointer; transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.condition-options label:active { transform: scale(.94); }
.condition-options input:checked + label { border-color: #d79270; color: #88482f; background: #f9e3d6; box-shadow: 0 0 0 2px rgba(215,146,112,.09); font-weight: 750; }
.dose-presets { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 8px; }
.dose-presets button { display: grid; min-width: 0; min-height: 42px; place-items: center; border: 1px solid #dedfd9; border-radius: 12px; color: #557061; text-align: center; background: #edf4f0; font-size: 10px; line-height: 1; font-weight: 700; cursor: pointer; transition: transform var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.dose-presets button:active { transform: scale(.95); background: #dcece3; }
.profile-settings { margin-bottom: 13px; padding: 15px; border: 1px solid rgba(65,49,40,.05); border-radius: 18px; background: #fffdfb; }
.icon-button { position: relative; }
.cloud-indicator { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border: 2px solid var(--bg); border-radius: 50%; background: #a69a92; transition: background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.cloud-indicator.synced { background: #5e8c73; box-shadow: 0 0 0 3px rgba(94,140,115,.12); }
.cloud-indicator.pending, .cloud-indicator.needs-consent { background: #d58b55; }
.cloud-indicator.error { background: var(--danger); }
.cloud-card { margin-bottom: 13px; padding: 15px; border: 1px solid rgba(65,49,40,.06); border-radius: 18px; background: linear-gradient(145deg,#f3f7f3,#fffdfb 72%); }
.cloud-card-heading { display: flex; align-items: center; gap: 10px; }
.cloud-status-mark { width: 11px; height: 11px; flex: 0 0 auto; border: 3px solid #d7ddd8; border-radius: 50%; background: #fffdfb; }
.cloud-card[data-status="synced"] .cloud-status-mark { border-color: #6c947d; background: #6c947d; box-shadow: 0 0 0 4px rgba(108,148,125,.12); }
.cloud-card[data-status="syncing"] .cloud-status-mark { border-color: #9cb4a5; border-top-color: #4f7d65; animation: cloudSpin .8s linear infinite; }
.cloud-card[data-status="pending"] .cloud-status-mark, .cloud-card[data-status="needs-consent"] .cloud-status-mark { border-color: #dda273; background: #dda273; }
.cloud-card[data-status="error"] .cloud-status-mark { border-color: var(--danger); background: var(--danger); }
.cloud-card h3 { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.35; }
.cloud-card-heading p { margin: 3px 0 0; color: #557061; font-size: 9px; font-weight: 700; }
.cloud-status-copy { margin: 10px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.cloud-error { margin: 9px 0 0; padding: 9px 10px; border-radius: 11px; color: #873f3b; background: #f9e4e1; font-size: 9px; line-height: 1.5; }
.cloud-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.cloud-actions button { min-height: 40px; padding: 0 13px; border-radius: 12px; font-size: 10px; font-weight: 750; cursor: pointer; }
.cloud-actions button[hidden] { display: none; }
.cloud-actions button:disabled, .account-submit:disabled { cursor: wait; opacity: .68; }
.cloud-primary { border: 0; color: #fffaf5; background: var(--deep); }
.cloud-secondary { border: 1px solid #dce4de; color: #4f6d5d; background: #f8fbf8; }
.profile-settings label { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }.profile-settings label span { font-size: 12px; font-weight: 750; }.profile-settings label small { color: var(--muted); font-size: 8px; }
.profile-input-row { display: grid; grid-template-columns: 1fr 78px; gap: 8px; }.profile-input-row input { min-width: 0; height: 45px; padding: 0 12px; }.profile-input-row button { border: 0; border-radius: 13px; color: #fff9f4; background: var(--deep); font-size: 10px; font-weight: 700; cursor: pointer; }
.profile-settings .preference-label { margin-top: 15px; padding-top: 14px; border-top: 1px solid #eee5de; }
.bedtime-goal-row { display: flex; align-items: center; gap: 10px; }
.bedtime-goal-row input { width: 126px; height: 43px; padding: 0 11px; border: 1px solid #e4dad2; outline: none; border-radius: 13px; color: var(--ink); background: #fffdfb; font-size: 17px; font-weight: 700; }
.bedtime-goal-row span { color: var(--muted); font-size: 9px; }
.settings-copy { margin: 0 2px 13px; color: var(--muted); font-size: 10px; line-height: 1.6; }.settings-actions { overflow: hidden; border: 1px solid rgba(65,49,40,.05); border-radius: 18px; background: #fffdfb; }
.settings-actions button, .import-label { width: 100%; display: block; padding: 14px 15px; border: 0; border-bottom: 1px solid #eee6e0; text-align: left; background: #fffdfb; cursor: pointer; }
.settings-actions span, .settings-actions small { display: block; }.settings-actions span { font-size: 12px; font-weight: 700; }.settings-actions small { margin-top: 3px; overflow-wrap: anywhere; color: var(--muted); font-size: 9px; line-height: 1.4; }.settings-actions input { display: none; }.settings-actions .danger-row { color: var(--danger); border-bottom: 0; }
.confirm-backdrop { z-index: 40; align-items: center; padding: max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
.confirm-dialog { width: 100%; max-width: 330px; padding: 22px; border-radius: 24px; text-align: center; background: #fffdf9; box-shadow: 0 18px 52px rgba(41,29,24,.24); animation: sheetUp var(--motion-sheet) cubic-bezier(.2,.76,.24,1) both; }
.confirm-mark { display: grid; width: 38px; height: 38px; margin: 0 auto 12px; place-items: center; border-radius: 13px; color: #9b433f; background: #f7dddd; font-size: 19px; font-weight: 800; }
.confirm-dialog h2 { margin: 0; font-family: "Songti SC","STSong",serif; font-size: 21px; }
.confirm-dialog p { margin: 9px 8px 18px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.confirm-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.confirm-actions button { min-height: 46px; border: 1px solid #e5dcd5; border-radius: 14px; background: #fffaf5; font-size: 11px; font-weight: 750; cursor: pointer; }
.confirm-actions .confirm-danger { border-color: transparent; color: #fff; background: var(--danger); }
.secret-backdrop { align-items: center; padding: max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
.secret-dialog { position: relative; width: 100%; max-width: 330px; overflow: hidden; padding: 30px 25px 24px; border: 1px solid rgba(129,83,61,.08); border-radius: 28px; text-align: center; background: radial-gradient(circle at 50% -15%, #f9d7c2 0, transparent 47%), #fffdf9; box-shadow: 0 22px 58px rgba(55,37,30,.24); animation: sheetUp var(--motion-sheet) cubic-bezier(.2,.76,.24,1) both; }
.secret-mark { display: grid; width: 48px; height: 48px; margin: 0 auto 17px; place-items: center; transform: rotate(-5deg); border-radius: 17px 17px 19px 14px; color: #fff9f4; background: linear-gradient(145deg,#ed9571,#d9684c); box-shadow: 0 10px 22px rgba(217,104,76,.22); font-size: 21px; }
.secret-dialog .eyebrow { margin-bottom: 7px; color: #a4664b; }
.secret-dialog h2 { margin: 0; font-family: "Songti SC","STSong",serif; font-size: 23px; }
.secret-dialog > p:last-of-type { margin: 13px 2px 21px; color: #6f5e54; font-family: "Songti SC","STSong",serif; font-size: 15px; font-weight: 700; line-height: 1.85; }
.secret-close { width: 100%; min-height: 48px; border: 0; border-radius: 15px; color: #fff9f4; background: var(--deep); font-size: 11px; font-weight: 750; cursor: pointer; transition: transform var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.secret-close:hover { background: var(--deep-2); }
.secret-close:active { transform: scale(.98); }
.account-backdrop { align-items: center; padding: max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
.account-dialog { position: relative; width: 100%; max-width: 350px; padding: 25px 23px 23px; border: 1px solid rgba(65,49,40,.08); border-radius: 27px; background: #fffdf9; box-shadow: 0 22px 58px rgba(55,37,30,.24); animation: sheetUp var(--motion-sheet) cubic-bezier(.2,.76,.24,1) both; }
.account-dialog .eyebrow { margin: 0 0 6px; color: #617b6c; }
.account-dialog h2 { margin: 0; font-family: "Songti SC","STSong",serif; font-size: 23px; }
.account-dialog > p:not(.eyebrow):not(.form-error) { margin: 9px 0 18px; color: var(--muted); font-size: 10px; line-height: 1.65; }
.account-dialog form[hidden] { display: none; }
.dialog-close { position: absolute; top: 13px; right: 13px; display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 50%; color: #72655c; background: #f7f1eb; font-size: 20px; cursor: pointer; }
.account-mark { display: grid; width: 44px; height: 44px; margin-bottom: 16px; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg,#71917f,#4f725f); box-shadow: 0 10px 22px rgba(79,114,95,.18); font-size: 20px; }
.login-method-switch { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: #eee6df; }
.login-method-switch button { min-height: 40px; border: 0; border-radius: 11px; color: #8a7a70; background: transparent; font-size: 10px; font-weight: 750; cursor: pointer; }
.login-method-switch button[aria-selected="true"] { color: var(--ink); background: var(--surface); box-shadow: 0 5px 14px rgba(61,44,35,.08); }
.account-field { display: block; margin-top: 12px; }
.account-field > label { display: block; margin: 0 0 7px 2px; color: #66584f; font-size: 10px; font-weight: 700; }
.account-field input { width: 100%; min-width: 0; height: 49px; padding: 0 13px; border: 1px solid #e4dad2; outline: none; border-radius: 14px; color: var(--ink); background: #fffdfb; font-size: 16px; }
.account-field input:focus { border-color: #73917f; box-shadow: 0 0 0 3px rgba(115,145,127,.13); }
.account-field input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(189,83,83,.10); }
.sms-code-row { display: grid; grid-template-columns: minmax(0,1fr) 104px; gap: 7px; }
.sms-code-row button { min-height: 49px; border: 1px solid #dce4de; border-radius: 14px; color: #4f6d5d; background: #f4f8f5; font-size: 10px; font-weight: 750; cursor: pointer; }
.sms-code-row button:disabled { cursor: wait; opacity: .68; }
.sms-login-hint { min-height: 30px; margin: 9px 1px 0 !important; color: #7b8d82 !important; font-size: 9px !important; line-height: 1.55 !important; }
.password-wrap { position: relative; display: block; }
.password-wrap input { padding-right: 62px; }
.password-wrap button { position: absolute; top: 6px; right: 6px; min-width: 48px; height: 37px; border: 0; border-radius: 10px; color: #5c7466; background: #edf3ef; font-size: 9px; font-weight: 700; cursor: pointer; }
.form-error { margin: 10px 1px 0; color: #944540; font-size: 10px; line-height: 1.5; }
.account-submit { width: 100%; min-height: 49px; margin-top: 16px; border: 0; border-radius: 14px; color: #fffaf5; background: var(--deep); font-size: 11px; font-weight: 750; cursor: pointer; }
.migration-dialog { text-align: center; }
.migration-dialog .account-mark { margin-right: auto; margin-left: auto; }
.migration-mark { background: linear-gradient(145deg,#d99470,#bd684d); }
.migration-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.35fr); gap: 8px; margin-top: 18px; }
.migration-actions button { min-height: 48px; margin: 0; border-radius: 14px; font-size: 10px; font-weight: 750; cursor: pointer; }
.migration-actions > button:first-child { border: 1px solid #e4dad2; color: #72655c; background: #fffaf5; }
@keyframes cloudSpin { to { transform: rotate(360deg); } }
.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); max-width: calc(100% - 40px); padding: 11px 16px; transform: translate(-50%,20px); border-radius: 999px; color: #fff9f4; background: rgba(56,39,33,.95); box-shadow: 0 10px 28px rgba(0,0,0,.18); opacity: 0; pointer-events: none; transition: .25s ease; font-size: 10px; white-space: nowrap; }
.toast.show { transform: translate(-50%,0); opacity: 1; }
@media (min-width: 600px) {
  body { padding: 24px 0; }
  .app-shell { min-height: calc(100dvh - 48px); border-radius: 38px; }
  .bottom-nav { bottom: 0; }
  .sheet-backdrop { align-items: center; padding: 24px; }
}
@media (max-width: 430px) { html, body { background: var(--bg); }.app-shell { max-width: none; box-shadow: none; } }
@media (max-width: 430px) and (max-height: 900px) {
  body[data-view="trends"] .topbar { padding-bottom: 8px; }
  #view-trends { padding-top: 2px; }
  .trend-summary-grid { margin-top: 9px; }
  .trend-summary-card { min-height: 102px; }
  .calendar-card { margin-top: 9px; padding-top: 14px; padding-bottom: 11px; }
  .calendar-metric-switch { margin-top: 10px; margin-bottom: 8px; }
  .calendar-legend { margin-top: 8px; }
}
@media (max-height: 760px) { .hero-card { min-height: 218px; }.hero-kicker { margin-top: 20px; }.moon-orbit { transform: scale(.88); transform-origin: bottom right; } }
@media (max-width: 350px) { .honor-grid { grid-template-columns: 1fr; }.honor-card { min-height: 185px; } }
@media (max-width: 350px) { .friend-thread-mark { right: 13px; width: 104px; }.friend-card-actions { grid-template-columns: 1fr; } }
/* v25: the Today screen, with a continuous bottom navigation surface. */
body[data-view="today"] .topbar { padding: calc(19px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left)); }
body[data-view="today"] .eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .03em; margin-bottom: 7px; }
body[data-view="today"] .brand-lockup h1 { font-family: "Songti SC", "STSong", "SimSun", serif; font-size: 27px; letter-spacing: -.02em; }
body[data-view="today"] .brand-lockup h1 small { font-size: 10px; letter-spacing: 0; }
body[data-view="today"] .brand-caption { font-size: 11px; letter-spacing: .08em; margin-top: 6px; }
body[data-view="today"] .icon-button { box-shadow: none; }
body[data-view="today"] main { padding-right: max(18px, env(safe-area-inset-right)); padding-left: max(18px, env(safe-area-inset-left)); padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.today-sleep-card { min-height: 292px; padding: 23px 16px 16px; border: 0; border-radius: 23px; background: #392720 url("assets/today-sleep-bg.webp") center / cover no-repeat; box-shadow: none; }
.today-sleep-card::after { display: none; }
.today-sleep-card .hero-kicker { margin: 0; color: #fff9f2; font-size: 14px; line-height: 1.2; font-weight: 650; letter-spacing: .02em; }
.today-sleep-card .hero-range { max-width: 265px; margin: 7px 0 0; font-size: 12px; color: #d6c6bb; }
.today-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.today-sleep-card .duration-display { gap: 6px; margin: 14px 0 24px; }
.today-sleep-card .duration-display strong { font-size: 66px; font-weight: 650; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.today-sleep-card .duration-display span { font-size: 17px; color: #fff7ee; margin-right: 2px; }
.sleep-timeline { position: relative; z-index: 2; }
.sleep-time-values, .sleep-time-labels { display: flex; align-items: center; justify-content: space-between; color: #e5d8ce; font-size: 11px; line-height: 14px; font-variant-numeric: tabular-nums; }
.sleep-time-track { display: flex; height: 14px; margin: 7px 0 8px; border-radius: 5px; overflow: hidden; border-left: 2px solid #ead9c7; border-right: 2px solid #ead9c7; }
.sleep-time-track span { flex: 1; background: #947467; }
.sleep-time-track span:nth-child(3n) { background: #af8d78; }
.sleep-time-track span:nth-child(4n) { background: #c7a484; }
.sleep-time-labels span { display: flex; align-items: center; gap: 5px; }
.sleep-time-labels img { width: 13px; height: 13px; filter: invert(93%) sepia(9%) saturate(500%) hue-rotate(340deg); }
.today-record-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; border: 0; border-radius: 999px; padding: 8px 10px; font-size: 12px; font-weight: 600; cursor: pointer; transition: transform 160ms cubic-bezier(.2,.7,.2,1), opacity 160ms ease; }
.today-record-button img { width: 17px; height: 17px; }
.today-record-button .action-chevron { width: 13px; height: 13px; }
.today-record-button:active { transform: scale(.975); opacity: .85; }
.today-sleep-card > .today-record-button { position: relative; z-index: 2; min-height: 43px; margin-top: 15px; background: #fffdf9; color: #392720; font-size: 14px; }
#view-today .section-block { margin-top: 24px; }
.today-section-heading { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 13px; }
.today-section-heading h2 { flex: none; margin: 0; font-size: 13px; font-weight: 650; letter-spacing: .01em; }
.today-section-heading > span:last-child { flex: none; font-size: 10px; color: #8b7d73; white-space: nowrap; }
.today-section-heading .section-rule { flex: 1; min-width: 8px; height: 1px; background: #e4dcd4; }
.today-record-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.today-record-card { min-width: 0; padding: 12px; border-radius: 18px; background: var(--surface); }
.today-record-summary { display: flex; align-items: center; gap: 9px; min-width: 0; }
.today-record-summary > div { flex: 1; min-width: 0; }
.today-category-mark { flex: none; display: grid; place-items: center; width: 47px; height: 47px; border-radius: 50%; background: #faeade; color: #aa6a48; }
.today-category-mark img { width: 26px; height: 26px; opacity: .72; }
.calcium-record-card .today-category-mark { background: #e0eee6; color: #3d6e5a; font-size: 23px; font-weight: 700; }
.today-record-summary p { margin: 0 0 3px; font-size: 10px; color: #8b7d73; }
.today-record-summary strong { display: block; white-space: nowrap; font-size: 26px; line-height: 1.1; font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.today-record-summary .metric-unit { margin-left: 4px; font-size: 13px; font-weight: 550; letter-spacing: 0; }
.today-record-summary small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.today-record-card > .today-record-button { margin-top: 11px; background: #f8f0e9; }
.calcium-record-card > .today-record-button { background: #edf3ed; }
.today-average strong { color: var(--ink); font-size: 10px; font-weight: 650; }
.today-week .today-section-heading { gap: 7px; }
.today-week .week-chart-card { padding: 24px 14px 12px; border: 0; box-shadow: none; border-radius: 19px; }
.today-week .chart-zone { height: 80px; }
.today-week .bars { gap: 11px; }
.today-week .bar { background: #dfd2c8; border-radius: 9px; box-shadow: none; transition: none; }
.today-week .bar.today:not(.empty) { background: #e98d66; }
.today-week .bar::before { top: -29px; width: 48px; color: #89776b; font-size: 9px; line-height: 1.3; white-space: pre-line; text-align: center; }
.today-week .bar.today::before { color: #c3663c; }
.today-week .chart-labels { gap: 11px; margin-top: 7px; font-size: 9px; line-height: 12px; }
.today-week .chart-labels small { display: block; margin-top: 3px; font-size: 9px; line-height: 12px; }
.today-week .chart-labels .today-label { color: #c3663c; }
.today-chart-note { margin: 9px 0 0; text-align: center; color: #9a8b80; font-size: 9px; }
.bottom-nav button { min-height: 51px; grid-template-rows: 34px 13px; gap: 3px; border-radius: 0; padding: 0; background: transparent; font-size: 10px; }
.bottom-nav svg { width: 34px; height: 34px; padding: 7px; border-radius: 12px; transition: color 180ms ease, background-color 180ms ease, transform 180ms cubic-bezier(.2,.7,.2,1); }
.bottom-nav button.active { color: var(--deep); background: transparent; }
.bottom-nav button.active svg { color: #fff9f4; background: var(--deep); }
.bottom-nav button > span { height: 13px; line-height: 13px; }
#view-today.active > .today-sleep-card { animation: todayArrive 360ms cubic-bezier(.2,.7,.2,1) both; }
#view-today.active > .today-records { animation: todayArrive 360ms 50ms cubic-bezier(.2,.7,.2,1) both; }
#view-today.active > .today-week { animation: todayArrive 360ms 90ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes todayArrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 430px) { .bottom-nav { max-width: none; } html { scrollbar-width: none; } html::-webkit-scrollbar { display: none; } }
@media (max-width: 370px) {
  .today-sleep-card .duration-display strong { font-size: 52px; }
  .today-sleep-card .duration-display span { font-size: 14px; }
  .today-record-card { padding: 10px; }
  .today-record-summary { gap: 6px; }
  .today-category-mark { width: 37px; height: 37px; }
  .today-record-summary strong { font-size: 22px; }
  .today-record-button { gap: 5px; font-size: 11px; }
  .today-week .today-section-heading { flex-wrap: wrap; }
  .today-week .today-section-heading > .today-average { margin-left: auto; }
}
/* v26: grouped settings, shared preference save, and separated data actions. */
#settings-backdrop { padding: 0; align-items: flex-end; }
.settings-sheet { max-width: 402px; max-height: calc(100dvh - max(28px, env(safe-area-inset-top))); padding: 12px max(20px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); border-radius: 26px 26px 0 0; scrollbar-gutter: auto; scrollbar-width: none; }
.settings-sheet::-webkit-scrollbar { display: none; }
.settings-sheet .sheet-handle { width: 34px; height: 4px; margin-bottom: 18px; }
.settings-sheet .settings-header { position: sticky; top: 0; z-index: 2; padding: 0 0 10px; margin-bottom: 12px; background: #fbf7f1; }
.settings-header h2 { font-family: inherit; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.03em; }
.settings-header p { margin: 6px 0 0; color: #8b7d73; font-size: 11px; line-height: 1.4; }
.settings-header .close-button { background: #eee7df; }
.settings-group-title { margin: 20px 3px 9px; color: #8b7d73; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .04em; }
.settings-header + .settings-group-title { margin-top: 0; }
.settings-sheet .cloud-card { padding: 14px 15px; margin: 0; border: 1px solid #e3e8e1; border-radius: 17px; background: #f2f6f0; }
.settings-sheet .cloud-card-heading { gap: 11px; }
.settings-sheet .cloud-card-heading > div { min-width: 0; }
.settings-sheet .cloud-card h3 { font-size: 14px; font-weight: 650; }
.settings-sheet .cloud-card-heading p { margin-top: 5px; font-size: 11px; font-weight: 500; overflow-wrap: anywhere; }
.settings-sheet .cloud-status-copy { margin-top: 10px; font-size: 11px; color: #748174; }
.settings-sheet .cloud-error { font-size: 11px; margin-top: 10px; }
.settings-sheet .cloud-actions { align-items: center; gap: 14px; margin-top: 12px; }
.settings-sheet .cloud-actions .cloud-primary { flex: 1; min-height: 40px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.settings-sheet .cloud-actions .cloud-secondary { flex: none; min-height: 40px; padding: 0 3px; border: 0; background: transparent; color: #687568; font-size: 11px; font-weight: 500; }
.settings-sheet .profile-settings { padding: 15px; border: 1px solid #eee7df; border-radius: 17px; background: #fffdf9; }
.settings-sheet .profile-settings label { margin: 0 0 8px; }
.settings-sheet .profile-settings label span { font-size: 12px; font-weight: 600; }
.settings-sheet .profile-input-row { display: block; }
.settings-sheet .profile-input-row input { height: 44px; padding: 0 12px; border-radius: 11px; background: #faf7f2; border-color: #e5dbd2; font-size: 16px; }
.settings-field-hint { margin: 7px 0 0; color: #93847a; font-size: 10px; line-height: 1.5; }
.settings-bedtime-preference { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; margin-top: 14px; border-top: 1px solid #eee7df; }
.settings-bedtime-preference > div:first-child { min-width: 0; }
.settings-sheet .settings-bedtime-preference label { margin-bottom: 4px; }
.settings-bedtime-preference .settings-field-hint { margin: 0; }
.settings-sheet .bedtime-goal-row { flex: none; }
.settings-sheet .bedtime-goal-row input[type="time"] { width: 101px; max-width: 101px; height: 42px; padding: 0 8px; border-radius: 11px; background: #faf7f2; font-size: 17px; }
.settings-save-button { display: block; width: 100%; min-height: 42px; margin-top: 16px; padding: 10px 12px; border: 0; border-radius: 12px; color: #fff9f4; background: var(--deep); font-size: 12px; font-weight: 600; cursor: pointer; transition: transform var(--motion-fast) ease, opacity var(--motion-fast) ease; }
.settings-save-button:active { transform: scale(.98); opacity: .85; }
.settings-form-error { margin: 11px 0 0; color: var(--danger); font-size: 11px; line-height: 1.4; }
.settings-sheet input[aria-invalid="true"] { border-color: var(--danger); }
.settings-sheet .settings-actions { border: 1px solid #eee7df; border-radius: 17px; background: #fffdf9; }
.settings-sheet .settings-actions > button, .settings-danger { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 61px; padding: 13px 14px; border: 0; border-bottom: 1px solid #eee7df; color: var(--ink); text-align: left; background: #fffdf9; cursor: pointer; transition: background-color var(--motion-fast) ease; }
.settings-sheet .settings-actions > button:last-child { border-bottom: 0; }
.settings-sheet .settings-actions > button:active { background: #f5eee5; }
.settings-action-copy { display: block; flex: 1; min-width: 0; }
.settings-action-copy > span { display: block; font-size: 12px; font-weight: 600; line-height: 1.4; }
.settings-action-copy > small { display: block; margin-top: 4px; color: #93847a; font-size: 10px; line-height: 1.4; }
.settings-action-copy #backup-file-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-row-icon { display: block; flex: none; width: 21px; height: 21px; opacity: .65; }
.settings-row-chevron { display: block; flex: none; width: 14px; height: 14px; opacity: .35; }
.settings-sheet .settings-copy { margin: 10px 4px 0; color: #93847a; font-size: 10px; line-height: 1.6; }
.settings-danger { margin-top: 15px; border: 1px solid #eeded7; border-radius: 15px; color: #b45b50; background: #fcf4ef; }
.settings-danger .settings-action-copy > small { color: #9c7f72; }
.settings-danger .settings-row-icon { filter: invert(42%) sepia(30%) saturate(780%) hue-rotate(322deg); opacity: 1; }
.settings-danger:active { background: #f5e6de; }
@media (max-width: 350px) { .settings-sheet { padding-left: 16px; padding-right: 16px; } .settings-sheet .profile-settings { padding: 13px; } .settings-bedtime-preference { gap: 8px; } .settings-sheet .bedtime-goal-row input[type="time"] { width: 87px; max-width: 87px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (forced-colors: active) { html { scrollbar-color: auto; } *::-webkit-scrollbar-thumb { background: CanvasText; } }

/* Private health styles: source health.css. */
/* Private health space. All styles stay scoped to the entry card or native dialogs. */
.health-entry-card { width:100%; display:grid; grid-template-columns:47px minmax(0,1fr) 16px; gap:12px; align-items:center; text-align:left; padding:18px 16px; margin-top:24px; border:0; border-radius:18px; background:var(--surface,#fffdf9); color:var(--ink,#2d2520); box-shadow:none; cursor:pointer; }
.health-entry-card .health-entry-icon { width:47px; height:47px; display:grid; place-items:center; background:var(--sage-soft,#dce9e1); color:#3d6e5a; border-radius:50%; }
.health-entry-card svg { width:22px; height:22px; display:block; }
.health-entry-card>span:nth-child(2) { min-width:0; display:grid; gap:5px; }
.health-entry-card strong { font-size:16px; line-height:1.4; font-weight:650; }.health-entry-card small { font-size:11px; line-height:1.5; color:var(--muted,#8b7d73); overflow-wrap:anywhere; }
.health-entry-card:focus-visible { outline:3px solid #b67345; outline-offset:4px; }
.health-open { overflow:hidden !important; overscroll-behavior-x:none; touch-action:pan-y; }
.health-dialog { --health-bg:#08090c; --health-panel:#15171c; --health-line:#ffffff14; --health-text:#f5f5f7; --health-muted:#a4a7b3; --health-accent:#52d9f6; --health-radius:25px; color-scheme:dark; color:var(--health-text); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; box-sizing:border-box; border:1px solid #ffffff20; background:var(--health-bg); padding:24px; overflow-x:hidden; overscroll-behavior-x:none; touch-action:pan-y; }
.health-dialog *, .health-dialog *::before, .health-dialog *::after { box-sizing:border-box; min-width:0; }
.health-dialog::backdrop { background:#000b; backdrop-filter:blur(8px); }
.health-dialog [hidden] { display:none !important; }
.health-dialog svg { width:23px; height:23px; flex-shrink:0; }
.health-dialog button { color:inherit; font:inherit; border:0; cursor:pointer; background:transparent; min-height:44px; }
.health-dialog button:disabled { opacity:.42; cursor:default; }
.health-dialog button:focus-visible, .health-dialog input:focus-visible, .health-dialog textarea:focus-visible, .health-dialog summary:focus-visible { outline:2px solid #c9ced7; outline-offset:4px; }
.health-dialog h1, .health-dialog h2, .health-dialog h3, .health-dialog p { margin:0; font-family:inherit; }
.health-dialog h1 { font-size:34px; line-height:1.25; font-weight:700; letter-spacing:-1.2px; }
.health-dialog h2 { font-size:21px; line-height:1.4; font-weight:650; }
.health-dialog h3 { font-size:17px; }
.health-muted { color:var(--health-muted); font-size:14px; line-height:1.65; }
.health-popup { margin:auto; width:calc(100% - 28px); max-width:420px; max-height:calc(100dvh - 32px); border-radius:26px; background:linear-gradient(145deg,#23252b,#14161b); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; padding:22px; }
.health-popup h2 { margin-bottom:12px; }.health-popup .health-primary { margin-top:22px; }
.health-modal-head { display:grid; grid-template-columns:minmax(0,1fr) 40px; align-items:center; margin-bottom:20px; gap:12px; min-width:0; }
.health-modal-head>button { display:grid; place-items:center; padding:0; border:1px solid var(--health-line); background:#ffffff08; border-radius:50%; width:40px; height:40px; min-height:40px; font-size:25px; line-height:1; }
.health-icon-badge { display:grid; place-items:center; background:#52d9f617; border:1px solid #52d9f632; color:var(--health-accent); width:48px; height:48px; border-radius:17px; }
.health-eyebrow { color:var(--health-accent); font-size:11px; letter-spacing:1.6px; line-height:1.6; font-weight:600; }
.health-field { display:grid; grid-template-columns:minmax(0,1fr); gap:9px; margin-top:20px; font-size:14px; color:#ccd0d9; font-weight:500; min-width:0; }
.health-field input, .health-field textarea { min-width:0; max-width:100%; width:100%; display:block; background:#090b10; color:var(--health-text); border:1px solid #ffffff25; border-radius:13px; padding:14px; min-height:48px; font:inherit; font-size:16px; resize:vertical; }
.health-field input[type="datetime-local"] { min-height:52px; }
.health-field textarea { line-height:1.6; }
.health-primary { display:flex; justify-content:center; align-items:center; gap:8px; width:100%; border-radius:16px; background:linear-gradient(115deg,#4bdcf4,#36d4c1) !important; color:#07242b !important; font-weight:650 !important; padding:15px; min-height:52px !important; }
.health-error { font-size:14px; color:#ffb2ba; line-height:1.6; margin-top:16px !important; }
.health-space { position:fixed; inset:0; margin:0; width:100%; max-width:none; height:100%; max-height:none; min-height:100%; border:0; border-radius:0; padding:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; background:radial-gradient(ellipse at 90% 0,#15242d77,transparent 40%),#08090c; }
.health-dialog.health-obscured { visibility:hidden; }
.health-shell { width:100%; max-width:600px; min-width:0; padding:calc(18px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); margin:auto; }
.health-header { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:12px; margin-bottom:24px; }
.health-dialog .health-back { display:grid; place-items:center; width:44px; height:44px; border:1px solid #ffffff15; border-radius:50%; background:#ffffff05; }
.health-title-row { display:grid; grid-template-columns:minmax(0,1fr) 48px; align-items:center; column-gap:16px; margin-bottom:24px; }
.health-title-row .health-muted { margin-top:9px; }
.health-dialog .health-add { width:48px; height:48px; display:grid; place-items:center; padding:0; background:var(--health-accent); color:#07242b; border-radius:16px; }
.health-add svg { width:28px; height:28px; }
.health-tabs { display:flex; padding:5px; gap:4px; background:#1b1d24; border:1px solid #ffffff0a; border-radius:18px; margin-bottom:25px; }
.health-tabs button { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; font-size:14px; border-radius:13px; color:#a4a7b3; }
.health-tabs button.active { color:var(--health-accent); background:#07090d; box-shadow:0 2px 7px #0004; }
.health-tabs svg { width:19px; height:19px; }
.health-panel { min-width:0; width:100%; border:1px solid var(--health-line); border-radius:var(--health-radius); background:linear-gradient(150deg,#191b20,#101216); padding:20px; margin:0 0 20px; }
.health-panel>h2+.health-muted { margin-top:7px; }
.health-section-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:25px 0 14px; }
.health-section-heading h2 { font-size:19px; }.health-section-heading>span { font-size:12px; color:var(--health-muted); }
.health-kind-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.health-dialog .health-kind { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:44px auto 1fr; align-content:start; align-items:start; justify-items:start; text-align:left; padding:18px 16px; border-radius:20px; border:1px solid #ffffff12; background:linear-gradient(135deg,#23252c,#181a20); min-width:0; gap:10px; min-height:144px; }
.health-kind-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:15px; color:var(--kind); background:color-mix(in srgb,var(--kind) 13%,transparent); margin:0; }
.health-kind-icon svg { width:25px; height:25px; }
.health-kind strong { font-size:16px; line-height:1.4; overflow-wrap:anywhere; }.health-kind small { color:var(--health-muted); font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.health-kind[aria-pressed="true"] { border-color:#ffffff12; background:color-mix(in srgb,var(--kind) 13%,#17191f); }
.health-dialog .health-score-card { width:100%; display:grid; grid-template-columns:88px minmax(0,1fr); align-items:center; gap:18px; text-align:left; border-radius:var(--health-radius); padding:20px; border:1px solid #52d9f620; background:radial-gradient(ellipse at 0% 0%,#153f4c99,transparent 75%),#11161c; }
.health-score-card>span:last-child { display:grid; gap:8px; }.health-score-card strong { font-size:18px; }.health-score-card small { color:var(--health-muted); display:flex; align-items:center; gap:5px; font-size:12px; }.health-score-card small svg { width:14px; height:14px; }
.health-score-ring { flex-shrink:0; display:grid; place-items:center; border-radius:50%; width:88px; height:88px; background:conic-gradient(from -90deg,#52d9f6,#37dfce var(--score),#ffffff12 var(--score)); position:relative; }
.health-score-ring::before { content:""; position:absolute; inset:6px; background:#10191f; border-radius:50%; }.health-score-ring strong { z-index:1; font-size:30px; font-variant-numeric:tabular-nums; }
.health-record-list { padding:4px 16px; }.health-record-row { width:100%; min-width:0; display:grid; grid-template-columns:38px minmax(0,1fr) 16px; align-items:center; text-align:left; gap:12px; padding:16px 0; border-bottom:1px solid var(--health-line) !important; }.health-record-row:last-child { border-bottom:0 !important; }
.health-row-icon { width:38px; height:38px; display:grid; place-items:center; flex-shrink:0; border-radius:13px; color:var(--kind); background:color-mix(in srgb,var(--kind) 12%,transparent); }
.health-record-row>span:nth-child(2) { display:grid; gap:5px; flex:1; min-width:0; }.health-record-row strong { font-size:15px; }.health-record-row time { color:var(--health-muted); font-size:12px; }.health-record-row small { font-size:13px; color:#c8cad2; white-space:pre-wrap; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }.health-record-row>svg:last-child { width:16px; color:#747986; }
.health-empty { padding:34px 5px; text-align:center; color:#dddfe5; font-size:15px; }.health-empty p { color:var(--health-muted); margin-top:8px; font-size:12px; }
.health-data-actions button { display:grid; grid-template-columns:22px minmax(0,1fr) 16px; gap:12px; width:100%; align-items:center; text-align:left; padding:13px 0; border-bottom:1px solid var(--health-line); font-size:14px; }.health-data-actions svg { width:16px; }.health-data-actions p { margin-top:13px; font-size:12px; }
.health-footer { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:32px; color:#9398a7; font-size:11px; }.health-footer svg { width:13px; height:13px; }
.health-message { color:#7de9db; font-size:14px; line-height:1.6; margin-top:14px !important; }
.health-range { display:flex; margin-top:17px; padding:4px; border-radius:13px; background:#ffffff08; }.health-range button { flex:1; font-size:12px; min-height:38px; padding:4px 2px; white-space:nowrap; color:var(--health-muted); border-radius:10px; }.health-range button.active { color:#fff; background:#ffffff20; }
.health-chips { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:20px 0; }.health-chips button { display:grid; grid-template-columns:21px minmax(0,1fr); align-items:center; gap:9px; min-width:0; border:1px solid #ffffff15; border-radius:14px; padding:12px; text-align:left; color:#b9bdc9; font-size:13px; }.health-chips button svg { color:var(--kind); width:21px; height:21px; }.health-chips button.active { border-color:#ffffff15; background:color-mix(in srgb,var(--kind) 12%,transparent); color:#fff; }.health-chips small { display:block; margin-top:4px; color:var(--health-muted); font-size:11px; }
.health-chart { max-width:100%; width:100% !important; height:auto !important; display:block; overflow:hidden; margin:14px 0 4px; }.health-chart text { fill:#a4a7b3; font-size:11px; font-family:inherit; }
.health-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:20px; }.health-stats article { min-width:0; padding:16px 14px; border:1px solid var(--health-line); background:linear-gradient(130deg,#25272f,#181a1f); border-radius:20px; display:grid; grid-template-rows:22px 30px auto; align-items:center; justify-items:start; gap:10px; }.health-stats svg { color:var(--health-accent); width:21px; height:21px; }.health-stats article:first-child svg { color:#dc69f4; }.health-stats article:last-child svg { color:#37dfce; }.health-stats strong { font-size:26px; line-height:1; font-variant-numeric:tabular-nums; }.health-stats span { font-size:11px; color:var(--health-muted); }
.health-heat-heading { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:10px; color:var(--health-muted); margin:15px 0; }.health-heatmap { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }.health-weekday { text-align:center; font-size:12px; color:var(--health-muted); padding:2px 0 10px; }.health-heat-cell { min-height:0 !important; aspect-ratio:1; padding:4px 1px; border-radius:9px; font-size:11px !important; background:#ffffff06 !important; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }.health-heat-cell small { font-size:8px; color:#fff9; }.health-heat-cell[data-level="1"], .health-heat-legend [data-level="1"] { background:color-mix(in srgb,var(--kind) 28%,#13151b) !important; }.health-heat-cell[data-level="2"],.health-heat-legend [data-level="2"] { background:color-mix(in srgb,var(--kind) 53%,#13151b) !important; }.health-heat-cell[data-level="3"],.health-heat-legend [data-level="3"] { background:color-mix(in srgb,var(--kind) 80%,#13151b) !important; }.health-heat-cell.today { box-shadow:inset 0 0 0 1.5px #e0e4f1; }.health-heat-cell[aria-pressed="true"] { font-weight:700; filter:brightness(1.25); }.health-heat-legend { display:flex; align-items:center; gap:6px; font-size:10px; color:var(--health-muted); margin-top:18px; }.health-heat-legend i { width:13px; height:13px; border-radius:4px; background:#ffffff06; }
.health-dialog .health-text-button { display:flex; align-items:center; gap:5px; color:var(--health-accent); font-size:12px; padding:0; }.health-text-button svg { width:14px; }.health-history-date { margin:0 0 17px; }.health-pagination { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; color:var(--health-muted); }.health-pagination button { padding:8px 15px; border:1px solid var(--health-line); border-radius:12px; }
.health-delete { color:#ff9cab !important; width:100%; margin-top:12px; }.health-confirm-actions { display:flex; gap:10px; margin-top:24px; }.health-confirm-actions>button { flex:1; padding:13px; border:1px solid var(--health-line); border-radius:15px; }.health-confirm-actions .health-primary { margin:0; }
.health-score-detail { display:grid; justify-items:center; gap:8px; padding:24px 0; color:var(--health-accent); }.health-score-detail strong { font-size:64px; }.health-score-detail small { font-size:18px; color:var(--health-muted); }.health-score-detail+.health-muted { margin-bottom:20px; }.health-dialog dl { display:grid; grid-template-columns:1fr auto; gap:16px; font-size:13px; margin:20px 0 0; }.health-dialog dt { color:var(--health-muted); }.health-dialog dd { margin:0; font-variant-numeric:tabular-nums; }.health-dialog details { font-size:14px; line-height:1.7; }.health-dialog details p { margin:12px 0; }
.health-success { text-align:center; background:radial-gradient(ellipse at 50% 30%,#075b5888,transparent 65%),#0b101a; padding-top:48px; }.health-success-orbit { width:120px; height:120px; display:grid; place-items:center; margin:10px auto 42px; color:#73fff0; background:#0e777b; border:1px solid #36d4c188; border-radius:50%; box-shadow:0 0 0 16px #36d4c108,0 0 0 33px #36d4c108; }.health-success-orbit svg { width:55px; height:55px; }.health-success h2 { font-size:29px; }.health-success-pill { color:#96f0e7; font-size:14px; margin-top:25px !important; }
@media(min-width:700px) { .health-shell { padding-top:30px; }.health-popup { padding:30px; } }
@media(max-width:360px) { .health-shell { padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); }.health-panel { padding:16px; }.health-popup { padding:20px 16px; }.health-score-card { grid-template-columns:76px minmax(0,1fr) !important; gap:14px !important; padding:18px 16px !important; }.health-score-card .health-eyebrow { font-size:9px; }.health-score-card strong { font-size:16px; }.health-score-ring { width:76px; height:76px; }.health-score-ring strong { font-size:28px; }.health-heatmap { gap:4px; }.health-heat-cell { font-size:10px !important; }.health-chips button { font-size:12px; padding:11px 10px; gap:8px; }.health-stats article { padding:15px 10px; }.health-stats strong { font-size:23px; } }
@media(prefers-reduced-motion:reduce) { .health-dialog * { animation:none !important; transition:none !important; } }
@media(forced-colors:active) { .health-dialog button,.health-panel,.health-score-card { border:1px solid ButtonText !important; }.health-kind[aria-pressed="true"],.health-tabs .active,.health-chips .active { outline:2px solid Highlight; }.health-heat-cell[data-level="1"],.health-heat-cell[data-level="2"],.health-heat-cell[data-level="3"] { border:2px solid Highlight !important; } }

.health-password-wrap { display:grid; grid-template-columns:minmax(0,1fr); position:relative; align-items:center; width:100%; min-width:0; }.health-password-wrap input { padding-right:62px; }.health-password-wrap button { position:absolute; right:4px; top:2px; bottom:2px; font-size:12px; padding:4px 12px; color:var(--health-accent); }

/* v33: shared alignment, intrinsic-width containment, vertical-only detail layouts. */
.health-entry-card > svg:last-child { width:16px; height:16px; color:var(--muted,#8b7d73); }
.health-dialog svg { display:block; }
.health-dialog form, #health-content, .health-title-row > div { width:100%; min-width:0; max-width:100%; }
.health-dialog h1,.health-dialog h2,.health-dialog h3,.health-dialog p,.health-dialog summary { overflow-wrap:anywhere; }
.health-header > .health-eyebrow { text-align:center; }
.health-dialog .health-back { padding:0; }
.health-modal-head h2 { margin:0; }
.health-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.health-tabs button { min-width:0; padding:8px 4px; }
.health-section-heading h2 { min-width:0; }
.health-section-heading > span { text-align:right; }
.health-score-card > span:last-child { min-width:0; }
.health-score-card .health-eyebrow { letter-spacing:1px; }
.health-dialog .health-field input[type="date"], .health-dialog .health-field input[type="datetime-local"] { appearance:none; -webkit-appearance:none; min-width:0; max-width:100%; width:100%; text-align:left; }
.health-field input::-webkit-date-and-time-value { min-width:0; text-align:left; }
.health-field input::-webkit-datetime-edit { display:inline-flex; padding:0; min-width:0; }
.health-field input::-webkit-calendar-picker-indicator { flex:none; margin:0 0 0 6px; }
.health-field input[type="password"],.health-password-wrap input { font-variant-numeric:tabular-nums; letter-spacing:2px; }
.health-password-wrap { max-width:100%; }
.health-password-wrap button { display:grid; place-items:center; padding:0 12px; }
.health-legacy-toggle { margin-top:14px; min-height:44px; }
.health-action-icon { width:22px; height:22px; display:block; filter:brightness(0) invert(.8); }
.health-data-actions button > svg:last-child { width:16px; height:16px; }
#health-kind-picker { gap:10px; }
#health-kind-picker .health-kind { grid-template-columns:32px minmax(0,1fr); grid-template-rows:auto auto; gap:4px 9px; align-content:center; padding:13px 11px; min-height:82px; border-radius:16px; }
#health-kind-picker .health-kind-icon { grid-row:1 / 3; align-self:center; width:32px; height:32px; border-radius:11px; }
#health-kind-picker .health-kind-icon svg { width:21px; height:21px; }
#health-kind-picker .health-kind strong { align-self:end; font-size:14px; }
#health-kind-picker .health-kind small { font-size:10px; line-height:1.5; }
.health-chips button > span { min-width:0; overflow-wrap:anywhere; }
.health-stats strong { line-height:30px; }
.health-heat-cell { min-width:0; width:100%; overflow:hidden; }
.health-heat-heading { line-height:1.6; }
.health-heat-legend { flex-wrap:wrap; }
.health-range { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.health-chart-details { margin-top:16px; border-top:1px solid var(--health-line); }
.health-chart-details summary { display:list-item; padding:14px 0; cursor:pointer; color:var(--health-muted); font-size:13px; }
.health-detail-list { max-height:360px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding-right:4px; }
.health-data-day { padding:14px 0; border-top:1px solid var(--health-line); }
.health-data-day h3 { font-size:12px; color:var(--health-muted); font-variant-numeric:tabular-nums; }
.health-dialog .health-data-day dl { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; margin:12px 0 0; }
.health-data-day dl > div { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px; }
.health-data-day dt { font-size:11px; }
.health-data-day dd { color:var(--kind); font-size:14px; }
.health-data-day dd span { font-size:10px; color:var(--health-muted); }
.health-dialog .health-text-button { justify-content:flex-start; }
.health-success-orbit { max-width:100%; }
@media(max-width:360px) {
  .health-dialog .health-kind { padding:16px 13px; }
  #health-kind-picker .health-kind { grid-template-columns:28px minmax(0,1fr); gap:4px 7px; padding:12px 8px; min-height:88px; }
  #health-kind-picker .health-kind-icon { width:28px; height:28px; }
  #health-kind-picker .health-kind strong { font-size:13px; }
  .health-entry-card { padding:16px 12px; gap:10px; }
}

/* v34: optional device authentication; the numeric-password form always remains available. */
.health-face-button { margin-top:22px; }
.health-face-divider { margin-top:18px !important; color:var(--health-muted); font-size:12px; text-align:center; }
.health-face-button:not([hidden]) ~ #health-unlock { background:#ffffff0b !important; color:var(--health-text) !important; border:1px solid var(--health-line); }
.health-passkey-note { margin-top:18px !important; font-size:12px; }
.health-security-card > div { display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; align-items:center; }
.health-security-card .health-row-icon { color:var(--health-accent); background:#52d9f612; }
.health-security-card h3 { font-size:15px; margin-bottom:5px; }
.health-security-card p { font-size:12px; }
.health-security-card > button { margin-top:14px; min-height:44px; width:100%; }

/* v35: touch/pointer interaction has no focus rectangle; keyboard navigation stays visible. */
.health-dialog, .health-dialog * { -webkit-tap-highlight-color:transparent; }
.health-pointer-input .health-dialog:focus,
.health-pointer-input .health-dialog :is(button,input,textarea,summary,select):focus {
  outline:none;
  box-shadow:none;
}

/* v36: fixed, fading Gaussian blur behind the persistent top controls. */
.health-space::before {
  content:"";
  position:fixed;
  inset:0 0 auto;
  height:calc(84px + env(safe-area-inset-top));
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,12,.92) 0%,rgba(8,9,12,.76) 42%,rgba(8,9,12,.28) 76%,rgba(8,9,12,0) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(110%);
  backdrop-filter:blur(16px) saturate(110%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,rgba(0,0,0,.72) 68%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 40%,rgba(0,0,0,.72) 68%,transparent 100%);
}
.health-space .health-header {
  position:sticky;
  top:calc(18px + env(safe-area-inset-top));
  z-index:3;
}
@media(forced-colors:active) {
  .health-space::before { background:Canvas; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .health-space .health-header { background:Canvas; }
}


/* Selected concept 1. Presentation layer; v37 remains the behavior baseline. */
:root {
  --bg:#f8f5ee; --surface:#fffdf8; --ink:#292d27; --muted:#696d60;
  --deep:#687660; --deep-2:#52614d; --accent:#c58d6b; --accent-soft:#f4dece;
  --sage-soft:#e4eadd; --gold:#c8b58c; --page-pad:22px;
  --motion-fast:130ms; --motion-sheet:280ms;
  --journal-serif:"Noto Serif SC","Songti SC","STSong",serif;
  --journal-sans:-apple-system,BlinkMacSystemFont,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}
html,body { background:#e5e2da; color:var(--ink); }
body { font-family:var(--journal-sans); }
.app-shell { max-width:402px; background:var(--bg); box-shadow:0 0 48px #302a2010; isolation:isolate; }
.app-shell[data-current-view="today"]::before { content:""; position:absolute; z-index:-1; inset:0 0 auto; height:390px; background:url("assets/morning-hero.webp") center -28px / 100% auto no-repeat; mask-image:linear-gradient(#000 0%,#000 75%,transparent 100%); -webkit-mask-image:linear-gradient(#000 0%,#000 75%,transparent 100%); pointer-events:none; }
.app-shell[data-current-view="today"]::after { content:""; position:absolute; z-index:-1; left:0; bottom:65px; width:145px; height:145px; background:url("assets/morning-botanical.webp") left bottom / contain no-repeat; opacity:.72; pointer-events:none; }
body[data-view] .topbar { height:145px; padding:35px max(22px,env(safe-area-inset-right)) 12px max(22px,env(safe-area-inset-left)); align-items:flex-start; }
body[data-view] .topbar .eyebrow { color:#595d52; font:400 13px/1.5 var(--journal-serif); letter-spacing:.015em; margin:0 0 6px; }
body[data-view] .brand-lockup h1 { font-family:var(--journal-serif); font-size:29px; font-weight:750; letter-spacing:-1px; line-height:1.3; max-width:290px; gap:8px; }
.brand-lockup h1 small { font-size:11px; font-weight:600; color:#805234; padding:4px 8px; background:var(--accent-soft); letter-spacing:.03em; }
body[data-view] .brand-caption { font:400 14px/1.5 var(--journal-serif); letter-spacing:.15em; margin:5px 0 0; color:#64675c; }
.icon-button { width:44px; height:44px; background:#fffdf8e8; box-shadow:none; margin-top:3px; }
.icon-button>img { width:23px; height:23px; opacity:.85; }
.cloud-indicator { display:none; }
body[data-view] main { padding-left:max(22px,env(safe-area-inset-left)); padding-right:max(22px,env(safe-area-inset-right)); padding-bottom:110px; }
.view { animation:morning-enter 220ms cubic-bezier(.2,.7,.2,1); }
@keyframes morning-enter { from { opacity:.5; transform:translateY(5px); } to { opacity:1; transform:none; } }
.hero-card.today-sleep-card { padding:11px 0 0; min-height:280px; border:0; border-radius:0; background:none; color:var(--ink); box-shadow:none; }
.hero-copy { display:flex; flex-direction:column; }
.today-sleep-card .hero-kicker { order:0; font:650 21px/1.5 var(--journal-serif); color:var(--ink); letter-spacing:0; margin:0; }
.today-sleep-card .duration-display { order:1; gap:4px; margin:18px 0 8px; align-items:baseline; }
.today-sleep-card .duration-display strong { font:550 76px/1.15 var(--journal-serif); letter-spacing:-4px; color:#303b2e; }
.today-sleep-card .duration-display span { font:550 18px/1.3 var(--journal-serif); color:var(--ink); margin-right:5px; }
.today-sleep-card .hero-range { order:2; margin:0; max-width:none; color:#5b6054; font:400 14px/1.6 var(--journal-serif); }
.sleep-timeline { margin:19px 4px 0; padding:0 19px; display:flex; flex-direction:column; }
.sleep-time-values { order:1; color:#666d5d; font:400 11px/1.3 var(--journal-sans); }
.sleep-time-track { order:0; margin:0 0 8px; border:0; border-radius:5px; background:#b7c0a9; height:11px; }
.sleep-time-labels { position:absolute; top:-2px; left:-3px; right:-3px; color:#606955; font-size:0; }
.sleep-time-labels img { filter:none; opacity:.7; width:14px; height:14px; }
.today-sleep-card>.today-record-button { margin:16px 4px 0; width:calc(100% - 8px); min-height:48px; background:var(--deep); color:#fffdf6; font-size:17px; font-weight:500; box-shadow:0 6px 15px #54634a12; }
.today-sleep-card>.today-record-button img { filter:brightness(0) invert(1); width:20px; height:20px; }
.today-sleep-card>.today-record-button .action-chevron { width:16px; height:16px; }
.section-block.today-records { margin-top:20px; }
.today-section-heading { margin-bottom:13px; gap:10px; }
.today-section-heading h2 { font:650 16px/1.5 var(--journal-serif); }
.today-section-heading .section-rule { background:#e5e1d6; }
.today-section-heading>span:last-child { color:#666b5e; font:400 10px/1.4 var(--journal-serif); }
.today-record-grid { display:block; background:#fffdf8db; border:1px solid #efebe2; border-radius:22px; padding:2px 15px; }
.today-record-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:9px; padding:10px 0; border-radius:0; background:none; min-height:76px; }
.today-record-card+.today-record-card { border-top:1px solid #eae5dc; }
.today-record-summary { gap:11px; }
.today-category-mark { width:51px; height:51px; color:#8d664a; background:#f7e8dc; }
.today-category-mark img { width:29px; height:29px; opacity:.8; }
.calcium-record-card .today-category-mark { background:#e2eadc; color:#596b50; font-size:25px; font-weight:650; }
.today-record-summary p { color:#686b60; font:400 12px/1.4 var(--journal-serif); margin:0 0 3px; }
.today-record-summary strong { font:600 34px/1 var(--journal-serif); letter-spacing:-1px; color:var(--ink); }
.today-record-summary .metric-unit { font:500 12px var(--journal-serif); margin-left:2px; }
.today-record-card>.today-record-button { min-height:44px; margin:0; width:auto; padding:8px 12px; gap:5px; color:#84583c; background:#f7e8dc; font:500 12px/1.4 var(--journal-serif); }
.calcium-record-card>.today-record-button { background:#e5ecdf; color:#465a3e; }
.today-record-card>.today-record-button img { width:16px; height:16px; opacity:.8; }
.today-record-card>.today-record-button .action-chevron { width:12px; height:12px; }
.health-entry-card { padding:16px 14px; margin-top:22px; min-height:82px; grid-template-columns:49px minmax(0,1fr) 16px; gap:11px; background:#fffdf8d9; border-radius:20px; }
.health-entry-card .health-entry-icon { width:49px; height:49px; background:#e2eadc; color:#536a4c; }
.health-entry-card strong { font:650 17px/1.5 var(--journal-serif); }
.health-entry-card small { font:400 12px/1.5 var(--journal-serif); color:#696d60; }
.bottom-nav { width:100%; max-width:402px; left:50%; transform:translateX(-50%); bottom:0; padding:7px 10px calc(10px + env(safe-area-inset-bottom)); gap:0; background:#fffdf8f5; border-top:1px solid #e8e3d9; box-shadow:none; border-radius:0; }
.bottom-nav button { min-width:0; min-height:53px; grid-template-rows:33px 17px; gap:3px; font:400 12px/1.4 var(--journal-serif); color:#73756b; padding:0; background:transparent; }
.bottom-nav .nav-icon { width:33px; height:33px; padding:6px; border-radius:50%; display:block; align-self:center; transition:background-color 180ms ease,transform 180ms ease; opacity:.62; }
.bottom-nav button>span { height:17px; line-height:17px; }
.bottom-nav button.active { color:#34432f; background:none; font-weight:650; }
.bottom-nav button.active .nav-icon { background:#687660; filter:brightness(0) invert(1); background:none; opacity:1; }
.bottom-nav button { position:relative; z-index:1; }
.bottom-nav .morning-nav-marker { position:absolute; top:7px; left:0; width:33px; height:33px; border-radius:50%; background:var(--deep); transition:transform 220ms cubic-bezier(.2,.75,.25,1); pointer-events:none; }
.bottom-nav button:active .nav-icon { transform:scale(.93); }
button { transition:transform var(--motion-fast) ease,background-color 180ms ease,color 180ms ease; }
button:active:not(:disabled) { transform:scale(.98); }
button:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid #687660; outline-offset:3px; }
.sheet-backdrop { padding:0; background:#25251b55; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.bottom-sheet { max-width:402px; width:100%; max-height:calc(100dvh - max(20px,env(safe-area-inset-top))); padding:14px 22px max(24px,env(safe-area-inset-bottom)); border:1px solid #ffffff70; border-radius:25px 25px 0 0; background:#fbf8f1; box-shadow:0 -12px 45px #29291b15; animation:morning-sheet 280ms cubic-bezier(.2,.8,.25,1); }
@keyframes morning-sheet { from { opacity:.5; transform:translateY(35px); } to { opacity:1; transform:none; } }
.sheet-handle { width:40px; height:4px; margin:0 auto 20px; background:#d5d1c6; }
.sheet-header { margin-bottom:25px; align-items:center; }
.sheet-header .eyebrow { font:400 13px/1.4 var(--journal-serif); letter-spacing:0; color:#78796c; margin:0 0 7px; }
.sheet-header h2 { font:650 28px/1.3 var(--journal-serif); letter-spacing:-.5px; }
.close-button { width:40px; height:40px; background:#edeae1; color:#5a6052; font-size:26px; font-weight:300; }
.form-field { margin-top:19px; }
.form-field>span,.quality-field legend,.time-field span,.choice-field legend { font:550 14px/1.5 var(--journal-serif); color:#292d27; margin:0 0 8px; }
.form-field input,.form-field textarea,.time-field input { background:#fffdf8; color:#2e392b; border:1px solid #deded1; border-radius:12px; font-family:var(--journal-sans); }
.form-field input { height:48px; }
.form-field input[type="date"] { justify-content:flex-start; text-align:left; font:500 19px var(--journal-serif); }
.form-field input[type="date"]::-webkit-date-and-time-value { justify-content:flex-start; text-align:left; }
.form-field textarea { min-height:82px; font-size:16px; line-height:1.6; padding:12px; }
.form-field input:focus,.form-field textarea:focus,.time-field input:focus { border-color:#8d9c80; box-shadow:0 0 0 3px #68766012; }
.time-grid { margin-top:21px; gap:16px; }
.time-field input { font:600 22px var(--journal-serif); height:50px; }
.time-arrow { display:none; }
.night-dot,.morning-dot { display:none; }
.duration-preview { background:#e7ecdf; color:#44533c; margin-top:14px; padding:13px 14px; border-radius:12px; font:400 14px/1.5 var(--journal-serif); }
.duration-preview strong { font:600 18px/1.5 var(--journal-serif); }
.quality-field { margin-top:24px; }
.quality-options { gap:5px; }
.quality-options label { min-height:65px; gap:7px; background:#fffdf8; border:1px solid #e3dfd4; border-radius:13px; }
.quality-options label span { font-size:22px; }
.quality-options label small { font:400 12px/1.4 var(--journal-serif); color:#606957; }
.quality-options input:checked+label { border-color:#687660; background:#e7ecdf; box-shadow:0 0 0 1px #68766020; }
.quality-options input:focus-visible+label { outline:2px solid #687660; outline-offset:2px; }
.save-button,.settings-save-button { min-height:51px; margin-top:23px; background:#687660; color:#fffdf5; border-radius:18px; box-shadow:none; font:600 17px/1.4 var(--journal-serif); }
.condition-options label,.dose-presets button { font-size:13px; min-height:44px; }
.condition-options input:checked+label { color:#405537; border-color:#87967c; background:#e7ecdf; box-shadow:none; }
.delete-button { font-size:13px; background:transparent; color:var(--danger); box-shadow:none; }
.toast { font-size:14px; background:#3d4e35; }
.period-switch { border:1px solid #e3dece; background:#f5f2e9; border-radius:999px; padding:3px; }
.period-switch button { min-height:40px; font-size:14px; border-radius:999px; }
.period-switch button.active { background:#687660; color:white; }
.trend-summary-card { padding:17px 6px; border:0; background:transparent; box-shadow:none; text-align:center; }
.trend-summary-card strong { font-family:var(--journal-serif); font-size:21px; color:#384631; }
.trend-summary-card small,.trend-summary-card em { font-size:11px; }
.calendar-card { background:#fffdf8d9; border:1px solid #ede8dc; border-radius:22px; box-shadow:none; padding:20px 14px; }
.calendar-head h3 { font:600 21px var(--journal-serif); }
.calendar-metric-switch button { min-height:39px; font-size:13px; }
.calendar-metric-switch button.active { background:#687660; color:white; }
.calendar-day { font-size:14px; }
.month-title { font-family:var(--journal-serif); font-size:20px; }
.history-group { background:#fffdf8; border-color:#e8e2d6; }
.history-main strong { font-size:14px; }.history-main small { font-size:12px; }
.history-duration>strong { font-family:var(--journal-serif); }
.honor-hero,.friend-hero { box-shadow:none; background:#e8ecdf; color:#35482d; }
.honor-hero h2,.friend-hero h2 { font-family:var(--journal-serif); }
.honor-card { background:#fffdf8; box-shadow:none; border-color:#e7dfcf; }
.love-days-card { background:#e9ecde; color:#394d31; border-color:#d8dfcd; box-shadow:none; }
.love-day-number strong { color:#495e3e; font-family:var(--journal-serif); }
.love-photo-card,.love-anniversary-card,.love-journal { border-color:#e8e1d4; box-shadow:none; }
.love-journal-tabs button[aria-selected="true"] { color:#624a35; background:#f2dfce; }
.settings-header h2 { font-family:var(--journal-serif); }
.settings-sheet .settings-group-title { font-size:13px; color:#596b50; }
.settings-sheet .settings-action-copy>span { font-size:14px; }
.settings-sheet .settings-action-copy>small { font-size:12px; }
.settings-sheet .settings-copy { font-size:12px; }
.settings-sheet .settings-header { background:#fbf8f1; }
.morning-changed { animation:morning-confirm 380ms ease; }
@keyframes morning-confirm { 0% { background-color:#dce7ce; } 100% { background-color:transparent; } }
@media(max-width:350px) {
  :root { --page-pad:16px; }
  body[data-view] .topbar { padding-left:17px; padding-right:17px; height:138px; }
  body[data-view] main { padding-left:17px; padding-right:17px; }
  body[data-view] .brand-lockup h1 { font-size:25px; }.brand-caption { font-size:12px; }
  .today-sleep-card .duration-display strong { font-size:64px; }.today-sleep-card .duration-display span { font-size:16px; }
  .today-record-grid { padding-inline:10px; }.today-category-mark { width:42px; height:42px; }
  .today-record-card { gap:5px; }.today-record-summary { gap:7px; }.today-record-summary strong { font-size:29px; }
  .today-record-card>.today-record-button { padding-inline:9px; font-size:11px; }.today-record-card>.today-record-button .action-chevron { display:none; }
  .today-section-heading>span:last-child { font-size:9px; }
  .bottom-sheet { padding-inline:18px; }.quality-options label small { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media(forced-colors:active) { .bottom-nav button.active { outline:2px solid Highlight; }.today-record-button,.save-button,.quality-options label { border:1px solid ButtonText; } }














/* v38 completed screens: scoped presentation for trends, love and the private space. */
.app-shell:is([data-current-view="trends"],[data-current-view="love"])::before { content:""; position:absolute; z-index:-1; inset:0 0 auto; height:215px; background:url("assets/journal-header.webp") center top / cover no-repeat; -webkit-mask-image:linear-gradient(#000 75%,transparent); mask-image:linear-gradient(#000 75%,transparent); pointer-events:none; }
.app-shell:is([data-current-view="trends"],[data-current-view="love"])::after { content:""; position:absolute; z-index:-1; left:0; bottom:65px; width:140px; height:140px; background:url("assets/morning-botanical.webp") left bottom / contain no-repeat; opacity:.7; pointer-events:none; }
body[data-view="trends"] main,body[data-view="love"] main { padding-bottom:95px; }
.journal-page-title { margin:3px 0 17px; font:650 32px/1.3 var(--journal-serif); color:var(--ink); }
#view-trends .period-switch { margin:0; padding:3px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid #e4ddce; background:#f8f5ecbb; }
#view-trends .period-switch button { min-height:34px; font:500 15px/1.4 var(--journal-serif); }
#view-trends .trend-summary-grid { margin:17px 0 20px; gap:7px; }
#view-trends .trend-summary-card { display:grid; grid-template-columns:32px minmax(0,1fr); gap:7px; min-height:61px; padding:0; align-items:center; text-align:left; }
#view-trends .trend-summary-card>div { min-width:0; }
#view-trends .summary-mark { display:grid; place-items:center; margin:0; width:32px; height:36px; border-radius:50%; background:#e4e8da; color:#607053; font:650 19px var(--journal-sans); }
#view-trends .summary-mark img { width:23px; height:23px; opacity:.75; }
#view-trends .poop-mark { background:#f5e2d2; }
#view-trends .trend-summary-card small { font:400 12px/1.5 var(--journal-serif); text-align:left; color:#4e5647; }
#view-trends .trend-summary-card strong { width:auto; overflow:visible; margin:3px 0 0; text-align:left; font:600 21px/1.2 var(--journal-serif); letter-spacing:-1px; color:#263121; white-space:nowrap; }
#view-trends .summary-unit { font:500 9px/1 var(--journal-serif); letter-spacing:0; margin-left:1px; }
#view-trends .trend-summary-card em { display:none; }
#view-trends .calendar-metric-switch { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; margin:0 0 12px; padding:3px; border:1px solid #e5decf; border-radius:999px; background:#f7f4ecb0; }
#view-trends .calendar-metric-switch button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:37px; margin:0; padding:4px 6px; border:0; border-radius:999px; background:none; color:#535c49; font:500 14px/1.4 var(--journal-serif); }
#view-trends .calendar-metric-switch button.active { background:#687660; color:#fffef9; }
#view-trends .calendar-metric-switch img { width:20px; height:20px; opacity:.8; }
#view-trends .calendar-metric-switch button.active img { filter:brightness(0) invert(1); opacity:1; }
#view-trends .calendar-metric-switch button>span { font:650 18px var(--journal-sans); }
#view-trends .calendar-card { padding:12px 13px 12px; border:1px solid #eee8dc; background:#fffdf8de; border-radius:20px; }
#view-trends .calendar-head { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:4px; margin:0 0 9px; }
#view-trends .calendar-head h3 { margin:0; text-align:center; font:600 21px/1.4 var(--journal-serif); }
#view-trends .calendar-head button { display:grid; place-items:center; min-height:44px; width:44px; padding:0; background:none; border:0; border-radius:50%; cursor:pointer; }
#view-trends .calendar-head img { width:19px; height:19px; }
#view-trends .calendar-weekdays { margin-bottom:5px; color:#737569; font:400 13px/1.5 var(--journal-serif); }
#view-trends .calendar-weekdays>span { padding:3px 0; }
#view-trends .calendar-grid { gap:6px; }
#view-trends .calendar-day { width:100%; min-height:44px; aspect-ratio:auto; margin:0; padding:0; color:#737767; background:#f0ede4; border:1px solid #e8e3d8; border-radius:10px; box-shadow:none; cursor:pointer; font:400 17px/1 var(--journal-serif); transition:background-color 160ms ease,box-shadow 160ms ease; }
#view-trends .calendar-day b { font:inherit; }
#view-trends .calendar-day.sleep-good { color:#315b49; background:#b9dbc9; border-color:#a8ccb8; }
#view-trends .calendar-day.sleep-late { color:#813e2f; background:#f2b7a3; border-color:#e4a68f; }
#view-trends .calendar-day.heat-1 { color:#45604e; background:#dbeae2; border-color:#c7ddce; }
#view-trends .calendar-day.heat-2 { color:#264e3b; background:#9bcbb5; border-color:#87bba2; }
#view-trends .calendar-day.heat-3 { color:#fff; background:#4f9173; border-color:#438264; }
#view-trends .calendar-day[aria-pressed="true"] { box-shadow:inset 0 0 0 2px #fffdf7,0 0 0 2px #687660; font-weight:700; }
#view-trends .calendar-day.today-cell b { font-weight:700; }
#view-trends .calendar-day.outside { visibility:hidden; pointer-events:none; }
#view-trends .calendar-legend { display:flex; flex-wrap:wrap; gap:8px 11px; margin:14px 0 2px; color:#666f5b; font:400 11px/1.5 var(--journal-serif); }
#view-trends .calendar-legend i { width:12px; height:12px; border-radius:3px; background:#f0ede4; border:1px solid #dedfd1; }
#view-trends .calendar-legend i.sleep-good { background:#b9dbc9; border-color:#a8ccb8; }
#view-trends .calendar-legend i.sleep-late { background:#f2b7a3; border-color:#e4a68f; }
#view-trends .calendar-legend i.heat-1 { background:#dbeae2; border-color:#c7ddce; }
#view-trends .calendar-legend i.heat-2 { background:#9bcbb5; border-color:#87bba2; }
#view-trends .calendar-legend i.heat-3 { background:#4f9173; border-color:#438264; }
.calendar-detail { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; width:100%; min-height:69px; margin-top:12px; padding:11px 16px; background:#fffdf8de; border:1px solid #eee8dc; border-radius:18px; text-align:left; color:#2e3828; cursor:pointer; }
.calendar-detail-copy { border-left:3px solid #687660; padding-left:10px; min-width:0; display:grid; gap:5px; align-content:center; }
.calendar-detail-copy strong { font:500 13px/1.4 var(--journal-serif); }
.calendar-detail-copy small { font:400 11px/1.5 var(--journal-serif); color:#666e5f; overflow-wrap:anywhere; }
#calendar-detail-value { align-self:center; white-space:nowrap; font:600 29px/1.3 var(--journal-serif); letter-spacing:-1px; }
#calendar-detail-value .summary-unit { font-size:11px; margin-left:2px; }
.calendar-detail:disabled { opacity:.7; cursor:default; }

/* Love journal: actual user content stays editable; artwork never contains metrics. */
#view-love .love-days-card { min-height:145px; margin:0 -3px 12px; padding:15px 17px 12px; border:0; border-radius:0; overflow:visible; isolation:auto; color:#293321; background:url("assets/love-paper.webp") center / 100% 100% no-repeat; box-shadow:none; }
#view-love .love-days-card::after { display:none; }
#view-love .love-card-top { position:static; display:block; margin:0; font:650 18px/1.4 var(--journal-serif); color:#253020; }
#view-love .love-card-top button { position:absolute; top:3px; right:4px; display:grid; place-items:center; width:44px; min-height:44px; padding:0; border:0; background:none; }
#view-love .love-card-top button img { width:15px; height:15px; opacity:.5; }
.love-hero-body { display:grid; grid-template-columns:52% minmax(0,1fr); align-items:center; gap:6px; margin-top:5px; }
#view-love .love-day-label { position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip-path:inset(50%); }
#view-love .love-day-number { gap:5px; margin:0; }
#view-love .love-day-number strong { font:600 min(18vw,var(--love-digit-size,70px))/1 var(--journal-serif); letter-spacing:-3px; color:#46553a; }
#view-love .love-day-number span { font:500 18px var(--journal-serif); color:#293321; }
#view-love .love-days-copy { margin:5px 0 0; font:400 12px/1.6 var(--journal-serif); color:#62664f; }
.love-pair-copy { display:grid; gap:30px; text-align:center; padding-top:5px; min-width:0; }
#love-names { display:block; font:500 14px/1.6 var(--journal-serif); color:#4e5942; overflow-wrap:anywhere; }
#love-start-label { display:block; font:400 10px/1.5 var(--journal-serif); color:#5f6253; overflow-wrap:anywhere; }
#view-love .love-memory-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:stretch; }
#view-love .love-photo-card,#view-love .love-anniversary-card { display:grid; grid-template-rows:39px auto 26px; margin:0; padding:0 9px; border:1px solid #efe8db; border-radius:16px; background:#fffdf8d9; box-shadow:none; }
#view-love .love-photo-card::before { display:none; }
#view-love .love-section-title { display:flex; align-items:center; justify-content:space-between; gap:0; min-width:0; margin:0; }
#view-love .love-section-title>div { min-width:0; }
#view-love .love-section-title .eyebrow { display:none; }
#view-love .love-section-title h3 { min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#2b3324; font:650 15px/1.5 var(--journal-serif); }
#view-love .love-section-title button { display:grid; place-items:center; flex:none; width:26px; min-height:39px; padding:0; color:#647057; }
#view-love .love-section-title button img { width:15px; height:15px; }
#view-love .love-photo-gallery,#view-love .love-photo-frame { border-radius:1px; }
#view-love .love-photo-empty { border:1px dashed #d6d6c7; background:#f3f0e5; color:#666e59; font-size:11px; }
#view-love .love-photo-empty>span { border-color:#c7cdbb; }
#view-love .love-photo-footer { min-height:26px; }
#view-love .love-photo-caption { font:400 10px/1.5 var(--journal-serif); color:#69715e; }
#view-love .love-photo-footer button { width:24px; min-height:26px; font-size:18px; }
#view-love .love-countdown-face { position:relative; gap:0; padding:12px 3px 6px; border:0; border-radius:2px; box-shadow:none; background:#e5eadb url("assets/note-paper.webp") center / cover no-repeat; background-blend-mode:multiply; color:#485c3c; }
#view-love .love-countdown-face::before,#view-love .love-countdown-face::after { display:none; }
.love-anniversary-label { font:400 10px/1.4 var(--journal-serif); color:#5d6a51; }
#view-love .love-date-stamp { position:static; display:block; width:auto; height:auto; margin:9px 0 8px; padding:0; border:0; border-radius:0; background:none; color:#33432b; font:550 clamp(22px,7vw,29px)/1.3 var(--journal-serif); white-space:nowrap; transform:none; }
#view-love .love-anniversary-number { display:flex; flex-direction:row; align-items:baseline; justify-content:center; gap:3px; padding-top:8px; width:85%; border-top:1px solid #a8b19b; }
#view-love .love-anniversary-number strong { font:600 22px/1.2 var(--journal-serif); color:#667b52; letter-spacing:-.5px; }
#view-love .love-anniversary-number span { font:400 10px/1.4 var(--journal-serif); color:#56664b; letter-spacing:0; }
#view-love .love-countdown-botanical { position:absolute; width:35px; height:35px; right:0; bottom:0; opacity:.5; object-fit:contain; z-index:0; }
#view-love .love-anniversary-card>p { color:#67705c; font:400 10px/1.5 var(--journal-serif); letter-spacing:0; }
#view-love .love-journal { margin-top:12px; padding:12px 13px 6px; border:1px solid #eee7dc; border-radius:18px; background:#fffdf8b8; }
#view-love .love-journal-heading { min-height:31px; padding:0 0 9px; }
#view-love .love-journal-heading .eyebrow { display:none; }
#view-love .love-journal-heading h3 { margin:0; font:650 18px/1.5 var(--journal-serif); }
.love-header-add { display:flex; gap:5px; align-items:center; justify-content:center; min-height:33px; padding:6px 12px; border:0; border-radius:999px; color:#805738; background:#f4ddc9; font:500 13px/1.5 var(--journal-serif); cursor:pointer; }
.love-header-add img { width:16px; height:16px; }
#view-love .love-journal-tabs { gap:2px; padding:3px; background:#f1eee5; border:0; border-radius:999px; }
#view-love .love-journal-tabs button { min-height:32px; border-radius:999px; font:400 13px/1.4 var(--journal-serif); color:#5a6152; }
#view-love .love-journal-tabs button[aria-selected="true"] { color:#704628; background:#f2dfce; font-weight:600; box-shadow:none; }
#view-love .love-journal-tabs button span { font-size:9px; }
#view-love #love-notes-panel>.love-journal-toolbar { display:none; }
#view-love #love-home .love-notes-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:5px; margin-top:8px; padding:0; }
#view-love #love-home .love-note-paper { position:relative; display:grid; align-content:center; gap:5px; min-height:63px; padding:10px 27px 10px 50px; border:0; border-radius:0; color:#303629; background:url("assets/note-paper.webp") center / 100% 100% no-repeat; box-shadow:none; transform:none; text-align:left; }
#view-love #love-home .love-note-tape { display:none; }
#view-love #love-home .love-note-body { display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; max-height:40px; font:500 14px/1.45 var(--journal-serif); white-space:pre-wrap; }
#view-love #love-home .love-note-meta { display:block; padding:0; margin:0; border:0; color:#737766; font:400 10px/1.3 var(--journal-serif); }
#view-love #love-home .love-note-meta>img { position:absolute; right:12px; top:24px; width:16px; height:16px; opacity:.55; }
#view-love .love-note-pin-badge { position:absolute; top:5px; right:11px; font-size:8px; color:#746d4f; }
#view-love .love-notes-overview { display:flex; justify-content:center; margin:0; padding:0; border:0; }
#view-love .love-notes-overview>span { display:none; }
#view-love .love-notes-overview>button { min-height:32px; color:#616850; font:400 12px/1.4 var(--journal-serif); }
#view-love .love-journal-empty { padding:17px 7px; font-size:12px; }
#view-love .love-journal-toolbar { padding-top:8px; }
#view-love .love-journal-toolbar p { font-size:11px; }
#view-love .love-journal-toolbar button { min-height:33px; border-radius:999px; background:#e7ebdc; color:#536749; font-size:12px; }
#view-love .love-binding-state { margin:12px 0 0; font-size:12px; line-height:1.5; color:#59684d; background:#eef0e6; border-color:#dde2d2; }
#view-love .love-sync-panel { background:#edf0e5; border-color:#d9e0cf; }
.love-note-detail { background:#fbf6e8 url("assets/note-paper.webp") center / cover no-repeat; border-color:#dad8c8; border-radius:10px; color:#3c4633; }
.love-note-detail[data-color="rose"] { background-color:#f8e8dc; background-blend-mode:multiply; }
.love-note-detail[data-color="sage"] { background-color:#e5edda; background-blend-mode:multiply; }

/* Private space: appearance is independent of its existing encryption/auth lifecycle. */
.health-dialog { --health-bg:#121914; --health-panel:#202822; --health-line:#b6c3a729; --health-text:#f3f0e5; --health-muted:#b7bdaf; --health-accent:#bfceac; --health-radius:19px; color:var(--health-text); }
.health-space { background:#121914 url("assets/private-background.webp") top center / 100% auto no-repeat; }
.health-space::before { height:calc(75px + env(safe-area-inset-top)); background:#121914bc; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.health-shell { max-width:402px; padding:calc(28px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); }
.health-svg-icon { display:inline-block; flex:none; width:23px; height:23px; color:inherit; background:currentColor; -webkit-mask:var(--icon) center / contain no-repeat; mask:var(--icon) center / contain no-repeat; vertical-align:middle; }
.health-space .health-header { top:calc(18px + env(safe-area-inset-top)); margin:0 0 23px; height:40px; grid-template-columns:40px minmax(0,1fr) 40px; }
.health-space .health-back { width:40px; min-height:40px; height:40px; color:#eeeede; background:#20292170; border-color:#c8d3bb2e; }
.health-space .health-header>.health-eyebrow { color:#c4d3b6; font:500 12px/1.5 var(--journal-serif); letter-spacing:2px; }
.health-space .health-title-row { grid-template-columns:minmax(0,1fr) 42px; margin-bottom:17px; }
.health-space .health-title-row h1 { color:#fffdf2; font:700 40px/1.25 var(--journal-serif); letter-spacing:-1px; }
.health-space .health-title-row .health-muted { margin-top:7px; color:#c1c3b7; font:400 14px/1.5 var(--journal-serif); }
.health-space .health-add { width:42px; height:42px; min-height:42px; border-radius:12px; background:#b1c5a5; color:#15271a; }
.health-space .health-tabs { padding:4px; gap:3px; margin-bottom:18px; border:1px solid #a9b39d30; border-radius:17px; background:#252c257d; }
.health-space .health-tabs button { min-height:35px; font:500 15px/1.4 var(--journal-serif); gap:7px; color:#c1c0b6; }
.health-space .health-tabs button.active { background:#0d170f; color:#cfdbb9; box-shadow:none; }
.health-tabs .health-svg-icon { width:19px; height:19px; }
.health-space .health-score-card { display:block; width:100%; margin:0; grid-template-columns:none!important; gap:0!important; padding:16px 17px!important; border:1px solid #b7c3aa39; border-radius:19px; background:#202b249e; box-shadow:none; text-align:left; }
.health-space .health-score-top { display:flex; align-items:center; justify-content:space-between; gap:7px; color:#d5dec7; font:400 12px/1.5 var(--journal-serif); }
.health-space .health-score-top>small { font:400 10px/1.4 var(--journal-serif); color:#bcc4b1; }
.health-space .health-score-main { display:flex; align-items:center; gap:14px; margin-top:6px; }
.health-space .health-score-main>.health-score-value { flex:none; color:#fff8e6; font:600 62px/1 var(--journal-serif); letter-spacing:-2px; }
.health-space .health-score-main>span { display:grid; gap:7px; }
.health-space .health-score-main>span>strong { color:#f3f1e2; font:600 18px/1.5 var(--journal-serif); }
.health-space .health-score-main small { display:flex; align-items:center; gap:3px; color:#c1c6b7; font:400 12px/1.4 var(--journal-serif); }
.health-space .health-score-main small .health-svg-icon { width:13px; height:13px; }
.health-space .health-score-track { display:block; width:100%; height:12px; margin:13px 0 0; overflow:hidden; background:#dce4d415; border:1px solid #c1cead5c; border-radius:999px; }
.health-space .health-score-track>span { display:block; height:100%; background:#b7c8a6; border-radius:999px; }
.health-space .health-score-scale { display:flex!important; justify-content:space-between; gap:0!important; margin-top:5px; color:#c1c6b7; font:400 11px/1.5 var(--journal-serif); }
.health-space .health-section-heading { margin:24px 0 11px; align-items:center; }
.health-space .health-section-heading h2 { font:650 21px/1.5 var(--journal-serif); color:#fffbed; }
.health-space .health-section-heading>span { color:#b6baac; font:400 12px/1.5 var(--journal-serif); }
.health-space .health-kind-grid { gap:8px; }
.health-space .health-kind { position:relative; grid-template-rows:36px auto 1fr; gap:4px; min-height:110px; padding:12px 14px; background:#222a247f; border:1px solid #bec6b32a; border-radius:16px; color:#fffbed; }
.health-space .health-kind-icon { width:36px; height:36px; margin:0; border-radius:50%; background:color-mix(in srgb,var(--kind) 16%,#29302a); }
.health-space .health-kind-icon .health-svg-icon { width:24px; height:24px; }
.health-space .health-kind strong { font:600 17px/1.3 var(--journal-serif); }
.health-space .health-kind small { color:#c0c2b7; font:400 11px/1.5 var(--journal-serif); }
.health-kind-arrow { position:absolute; top:31px; right:12px; color:#a8b29c; }
.health-kind-arrow .health-svg-icon { width:14px; height:14px; }
#health-kind-picker .health-kind-arrow { display:none; }
.health-space .health-privacy-line { display:flex; align-items:center; justify-content:center; gap:6px; margin:13px 0 0; color:#b4bbaa; font:400 11px/1.5 var(--journal-serif); }
.health-privacy-line .health-svg-icon { width:13px; height:13px; }
.health-more { margin-top:16px; border-top:1px solid var(--health-line); }
.health-more>summary { display:flex; justify-content:space-between; align-items:center; min-height:44px; list-style:none; cursor:pointer; color:#c7d0b9; font-size:13px; }
.health-more>summary::-webkit-details-marker { display:none; }
.health-more[open]>summary>.health-svg-icon { transform:rotate(90deg); }
.health-space[data-h-view="today"] .health-shell>.health-footer { display:none; }
.health-space .health-panel { background:#202921bb; border-color:#b2c09e2b; border-radius:18px; }
.health-space .health-chips button { background:#29342a; color:#e1e7d4; border-color:#c4cead2b; }
.health-space .health-chips button.active { background:color-mix(in srgb,var(--kind) 12%,#29342a); }
.health-space .health-range button.active { background:#b7c8a6; color:#172715; }
.health-space .health-chart text { fill:#c6cbbd; }
.health-space .health-score-chart polyline { stroke:#c0d2a7; }
.health-space .health-record-row { background:none; border-color:var(--health-line); }
.health-space .health-record-row strong { font-family:var(--journal-serif); }
.health-space .health-stats article { background:#222e24; }
.health-space .health-stats strong { color:#e1ebd4; }
.health-space .health-footer { color:#b4bbaa; gap:7px; }
.health-footer .health-svg-icon { width:13px; height:13px; }
.health-popup { background:#1c271e; border-color:#bdcaa540; }
.health-dialog .health-icon-badge { color:#c6d5b5; background:#aec49b1c; border-color:#aec49b3c; }
.health-dialog .health-primary { background:#b4c7a2!important; color:#182617!important; }
.health-dialog .health-field { color:#dde3d2; }
.health-dialog .health-field input,.health-dialog .health-field textarea { border-color:#b7c3a43b; background:#111a13; color:#f8f6ea; }
.health-dialog .health-text-button { color:#cbdcba; }
.health-space #health-content { animation:morning-enter 180ms ease; }
@media(max-width:350px) {
  #view-trends .trend-summary-grid { gap:4px; }
  #view-trends .trend-summary-card { grid-template-columns:24px minmax(0,1fr); gap:4px; }
  #view-trends .summary-mark { width:24px; height:30px; font-size:16px; }
  #view-trends .summary-mark img { width:19px; height:19px; }
  #view-trends .trend-summary-card strong { font-size:19px; letter-spacing:-1.1px; }
  #view-trends .summary-unit { font-size:8px; }
  #view-trends .calendar-card { padding-inline:9px; }
  #view-trends .calendar-day { min-height:40px; font-size:16px; }
  #view-trends .calendar-head h3 { font-size:19px; }
  #calendar-detail-value { font-size:25px; }
  #view-love .love-days-card { padding-inline:14px; }
  #view-love .love-pair-copy { gap:25px; }
  #view-love .love-day-number strong { font-size:58px; }
  #view-love .love-memory-grid { gap:7px; }
  #view-love .love-photo-card,#view-love .love-anniversary-card { padding-inline:7px; }
  #view-love .love-section-title h3 { font-size:13px; }
  #view-love .love-section-title button { width:21px; }
  #view-love .love-journal { padding-inline:10px; }
  #view-love .love-journal-heading h3 { font-size:16px; }
  #view-love #love-home .love-note-paper { padding-left:43px; }
  .health-shell { padding-inline:16px; }
  .health-space .health-title-row h1 { font-size:34px; }
  .health-space .health-header>.health-eyebrow { font-size:10px; letter-spacing:1px; }
  .health-space .health-score-top { font-size:11px; }.health-space .health-score-top>small { font-size:9px; }
  .health-space .health-score-main>.health-score-value { font-size:55px; }
  .health-space .health-kind { padding-inline:12px; }
  .health-space .health-kind strong { font-size:16px; }
  .health-space .health-kind small { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { #health-content,.health-kind,.health-score-card,.love-note-detail { animation:none!important; transition:none!important; } }


/* Shared journal system across every public page and editor. */
#view-love #love-home .love-note-paper { height:65px; min-height:65px; }
#view-love .love-days-card { min-height:140px; padding-top:9px; padding-bottom:7px; }
#view-love .love-journal-heading { padding-bottom:6px; }
#view-love .love-journal-heading .love-header-add { height:31px; min-height:31px; padding:4px 11px; }
#view-love .love-journal-tabs { padding:2px; }
#view-love .love-journal-tabs button { min-height:28px; height:28px; padding:3px; }
#view-trends .period-switch button { min-height:28px; }
.health-space { scrollbar-width:none; }.health-space::-webkit-scrollbar { display:none; }
.health-space .health-header { margin-bottom:18px; }
.health-space .health-title-row { margin-bottom:14px; }
.health-space .health-tabs { margin-bottom:15px; }
.health-space .health-section-heading { margin-top:20px; }
.quality-options label>span { display:grid; place-items:center; }.quality-options label img { width:23px; height:23px; opacity:.7; }
.app-shell:not([data-current-view="today"])::before { content:""; position:absolute; z-index:-1; top:0; right:0; width:100%; height:215px; background:url("assets/journal-header.webp") center top / cover no-repeat; mask-image:linear-gradient(#000 78%,transparent); pointer-events:none; }
body[data-view="history"] main,body[data-view="honors"] main,body[data-view="friends"] main { padding-bottom:100px; }
#view-trends .trend-summary-grid { margin:12px 0 14px; }
#view-trends .calendar-card { margin-top:0; }
#view-trends .calendar-head { height:37px; margin-bottom:2px; }
#view-trends .calendar-head button { min-height:37px; height:37px; }
#view-trends .calendar-weekdays { margin-top:0; }
.health-entry-icon img { width:23px; height:23px; opacity:.7; }.health-entry-chevron { width:18px; height:18px; opacity:.65; }
.honor-hero,.friend-hero { background:#fffdf8cf; border:1px solid #e8e1d3; border-radius:21px; box-shadow:none; }
.honor-hero { min-height:161px; padding:21px; }
.honor-hero-copy { max-width:230px; }.honor-hero .eyebrow,.friend-hero .eyebrow { color:#636f56; font-size:11px; letter-spacing:1px; }
.honor-hero h2,.friend-hero h2 { color:#273322; font:600 28px/1.4 var(--journal-serif); }
.honor-hero-copy>p:last-child,.friend-hero-copy>p:last-child { color:#68705f; font-size:12px; line-height:1.7; }
.honor-thread,.friend-hero::after { display:none; }
.honor-tally { background:#eef0e6; border:0; border-radius:17px; padding:13px 12px; bottom:21px; right:16px; min-width:61px; }
.honor-tally-seal { width:24px; height:24px; padding:0; background:none; border:0; border-radius:0; opacity:.65; }
.honor-tally>strong { color:#4b5e41; font:600 31px var(--journal-serif); }.honor-tally small { color:#657059; font-size:10px; }
.honor-section-heading { margin-top:24px; }.honor-section-heading h2 { font:600 21px var(--journal-serif); }
.honor-section-heading>span { color:#637057; font-size:11px; }.honor-section-heading .eyebrow { color:#68705f; font-size:10px; }
.honor-grid { gap:10px; }.honor-card { min-height:196px; padding:15px 13px; border-radius:18px; background:#fffdf8e8; }
.honor-card.is-locked { background:#f2efe6e8; border-color:#e7e1d6; }
.honor-medal,.honor-card.is-locked .honor-medal { width:43px; height:43px; background:#dfe8d5; color:#4e6544; box-shadow:none; }
.honor-card.is-locked .honor-medal { background:#e5e2d8; opacity:.7; }.honor-medal img { width:28px; height:28px; opacity:.72; }.honor-medal::after { display:none; }
.honor-state,.honor-card.is-locked .honor-state { font-size:9px; color:#6b705f; background:#e6e7dc; padding:4px 6px; }
.honor-card h3 { margin-top:12px; color:#2e3829; font-size:18px; }.honor-card-desc { color:#666c5f; font-size:11px; min-height:38px; line-height:1.7; }
.honor-progress-copy,.honor-progress-copy strong { color:#69725e; font-size:9px; }.honor-progress-track { background:#e4e3d7; }.honor-progress-track i { background:#879779; }
.honor-earned-date { color:#5d7350; font-size:10px; }
.friend-hero { min-height:201px; padding:21px; }.friend-hero-copy { max-width:250px; }
.friend-thread-mark { width:64px; height:64px; right:20px; bottom:16px; opacity:.32; }
.friend-add-button { display:flex; align-items:center; gap:5px; font-size:13px; background:#687660; border-radius:999px; left:21px; bottom:20px; }
.friend-add-button img { width:17px; height:17px; filter:brightness(0) invert(1); }.friend-add-button:disabled { opacity:.6; }
.friend-service-card { border:1px solid #e2e5d7; background:#edf0e5; border-radius:16px; padding:14px 12px; gap:10px; }
.friend-service-icon { background:#e0e7d5; border-radius:50%; flex:none; }.friend-service-icon img { width:22px; height:22px; opacity:.6; }
.friend-service-card strong { color:#46533b; font-size:13px; }.friend-service-card small { color:#66725d; font-size:11px; line-height:1.6; }
.friend-service-card>button { color:#4d6141; background:#dce6d1; border-color:#cdd8c2; min-height:44px; font-size:12px; }
.friend-service-card>button { min-width:58px; flex:none; white-space:nowrap; }
.honor-unlock-mark { background:#e2ead6; border:1px solid #cbd7ba; box-shadow:none; }.honor-unlock-mark img { width:43px; height:43px; opacity:.75; }.honor-burst { display:none; }
.friend-section-title h2 { color:#2e3829; font:600 21px var(--journal-serif); }.friend-section-title .eyebrow { font-size:10px; color:#6a745f; }
.friend-section-title>span { color:#69755f; font-size:12px; }
.friend-empty { min-height:113px; padding:23px 17px; border:1px solid #e7e2d6; border-radius:18px; background:#fffdf8b8; }
.friend-empty strong { color:#59674f; font:500 16px var(--journal-serif); }.friend-empty p { margin-top:8px; color:#74796c; font-size:12px; line-height:1.8; }
.friend-card,.friend-request,.challenge-card { border:1px solid #e3e2d3; border-radius:18px; background:#fffdf8e6; box-shadow:none; }
.friend-card-name,.challenge-card h3 { color:#35432c; font-size:15px; }.friend-card-actions button,.challenge-card-actions button { font-size:12px; color:#58674b; background:#f1f2e9; border-color:#dde2d0; }
.challenge-history-button { font-size:11px; border-color:#dce1d0; color:#5c6c50; background:#f4f4eb; }
.challenge-day b,.challenge-day small,.challenge-pending-body p { font-size:10px; }
.history-overview { color:#65715b; }.history-group { background:#fffdf8d9; border-radius:19px; box-shadow:none; }.history-group h3 { font:500 19px var(--journal-serif); color:#46543c; }
.history-item { background:transparent; border:0; border-radius:13px; min-height:85px; }.history-item+.history-item { border-top:1px solid #ece8de; }
.date-tile { background:#e7ecdf; color:#596c4b; }.history-duration small { color:#69775d; }.history-pagination button { border-radius:999px; border-color:#dfe3d3; color:#58694b; background:#fafaf0; font-size:12px; }
.empty-state { min-height:350px; display:flex; flex-direction:column; align-items:center; justify-content:center; margin-top:15px; border:1px solid #e8e2d6; background:#fffdf8ad; border-radius:22px; }
.journal-empty-icon { width:47px; height:47px; opacity:.45; margin-bottom:12px; }.empty-state h3 { color:#4c5d40; font:500 23px var(--journal-serif); }.empty-state p { font-size:13px; color:#727a68; line-height:1.9; }
.bottom-sheet,.account-dialog,.secret-dialog,.confirm-dialog,.friend-message-dialog,.honor-unlock-dialog { background:#fbf8f0; background-image:none; border:1px solid #e6dfd0; box-shadow:0 20px 70px #1c271b28; }
.bottom-sheet h2,.account-dialog h2,.confirm-dialog h2,.secret-dialog h2,.honor-unlock-dialog h2 { color:#2e3829; font-family:var(--journal-serif); }
.bottom-sheet .eyebrow,.account-dialog .eyebrow { color:#667759; font-size:11px; letter-spacing:1px; }.sheet-header h2 { font-size:27px; }
.close-button { color:#65705b; background:#eaece2; min-width:40px; border:0; }
.bottom-sheet .form-field>span,.bottom-sheet .time-field>span,.quality-field legend { color:#5e6855; font-size:12px; }
.form-field input:focus,.form-field textarea:focus,.time-field input:focus,.profile-input-row input:focus,.account-field input:focus { border-color:#8a9b7b; box-shadow:0 0 0 3px #a3b58f25; }
.save-button,.account-submit,.settings-save-button,.honor-unlock-action,.confirm-action,.cloud-primary { color:#fffdf5; background:#687660; background-image:none; border-radius:15px; font-size:14px; }
.bottom-sheet .delete-button { color:#ab5e4b; }.account-mark { background:#e5ebda; color:#5b704c; border-radius:50%; box-shadow:none; }.account-mark img { width:25px; height:25px; opacity:.7; }
.account-dialog>p:not(.eyebrow):not(.form-error),.friend-sheet-copy { font-size:12px; color:#6e7863; line-height:1.8; }
.account-field>label { font-size:12px; color:#5c6950; }.account-dialog .cloud-error { font-size:12px; }
.settings-sheet { background:#fbf8f0; }.settings-sheet .cloud-card,.settings-sheet .profile-settings,.settings-sheet .settings-actions { background:#fffdf8; border:1px solid #e5e2d5; border-radius:18px; }
.settings-sheet .settings-group-title { color:#586b49; font-size:14px; margin-top:23px; }.settings-sheet .settings-action-copy>small { color:#78816c; line-height:1.7; }
.settings-sheet input { border-color:#dde2d1; background:#fffef9; }.settings-sheet .settings-copy { color:#6f7b63; }
.love-note-detail { background-image:url("assets/note-paper.webp"); background-size:cover; border-color:#e4d9c5; box-shadow:0 20px 65px #353e2b35; }
.love-note-tape { display:none; }.love-notes-library .love-note-paper { background-image:url("assets/note-paper.webp"); background-size:cover; border:0; box-shadow:none; }
.love-note-meta>img { width:18px; height:18px; flex:none; opacity:.6; }
.love-notes-library .love-notes-grid { grid-template-columns:minmax(0,1fr); gap:10px; }
.love-notes-library .love-note-paper { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:5px; height:110px; min-height:110px; padding:15px 20px 15px 66px; background-size:100% 100%; background-repeat:no-repeat; background-color:transparent; border-radius:0; transform:none; }
.love-notes-library .love-note-body { -webkit-line-clamp:3; font:500 15px/1.65 var(--journal-serif); }
.love-notes-library .love-note-meta { font-size:11px; }
.love-library-heading h2 { color:#33432b; }.love-notes-back,.love-library-summary { color:#68765b; }
.love-photo-preview { border-color:#e0e2d2; }.love-crop-boundary { border-color:#92a17e; }.love-photo-actions button,.love-crop-actions button { color:#586a48; border-color:#d9e0cd; background:#f0f2e7; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #879d6caa; outline-offset:3px; }
@media(max-width:350px) { .honor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.honor-card { min-height:207px; padding:13px 10px; }.honor-card h3 { font-size:16px; }.honor-card-desc { font-size:10px; }.honor-state { font-size:8px; }.honor-hero-copy { max-width:170px; }.honor-tally { right:13px; }.friend-service-card { gap:7px; }.friend-service-card small { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* v41: compact paper journal and a quieter calendar. v39 heat colors are retained. */
#view-love [hidden] { display:none!important; }
#view-love .love-journal-heading { padding:2px 0 12px; }
#view-love .love-journal-toolbar,
#view-love #love-notes-panel>.love-journal-toolbar { display:flex; min-height:47px; padding:8px 2px 2px; }
#view-love .love-journal-toolbar p { color:#7b7d6c; font-size:11px; }
#view-love .love-journal-toolbar button { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:36px; padding:5px 7px; border:0; background:transparent; color:#667456; font:500 12px/1.5 var(--journal-serif); }
#view-love .love-journal-toolbar button img { width:15px; height:15px; opacity:.75; }
#view-love #love-home .love-notes-grid,
#view-love .love-notes-library .love-notes-grid { grid-template-columns:minmax(0,1fr); gap:8px; padding:0; margin-top:6px; }
#view-love #love-home .love-note-paper,
#view-love .love-notes-library .love-note-paper { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:21px 15px; align-content:center; gap:5px; width:100%; height:76px; min-height:76px; padding:12px 43px 12px 50px; background:url("assets/note-paper.webp") center / 100% 100% no-repeat; border:0; border-radius:0; box-shadow:none; transform:none; text-align:left; }
#view-love #love-home .love-note-body,
#view-love .love-notes-library .love-note-body { display:block; min-width:0; max-width:100%; height:21px; max-height:21px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -webkit-line-clamp:unset; overflow-wrap:normal; font:500 14px/21px var(--journal-serif); }
#view-love .love-notes-library .love-note-meta,
#view-love #love-home .love-note-meta { display:block; margin:0; padding:0; border:0; color:#7b7d6c; font:400 10px/15px var(--journal-serif); }
#view-love .love-notes-library .love-note-meta>img,
#view-love #love-home .love-note-meta>img { position:absolute; right:12px; top:31px; width:17px; height:17px; opacity:.55; }
#view-love .love-note-pin-badge { position:absolute; top:4px; right:12px; margin:0; padding:0 4px; border:0; background:#f9f5eccc; color:#807962; font:400 8px/14px var(--journal-serif); pointer-events:none; }
#view-love .love-wish-card { position:relative; min-width:0; height:76px; min-height:76px; padding:0; border:0; border-radius:0; background:url("assets/note-paper.webp") center / 100% 100% no-repeat; box-shadow:none; }
#view-love .love-wish-card .love-wish-toggle { position:relative; display:flex; flex-direction:row; align-items:center; gap:0; width:calc(100% - 40px); height:76px; min-height:76px; padding:12px 4px 12px 50px; overflow:hidden; }
#view-love .love-wish-toggle i { position:absolute; left:19px; top:27px; width:21px; height:21px; border:1px solid #8d997b; background:#faf7eddd; box-shadow:0 0 0 3px #faf7ed66; color:#667456; font-size:13px; }
#view-love .love-wish-toggle[aria-pressed="true"] i { color:#fffdf6; background:#6d8062; border-color:#6d8062; }
#view-love .love-wish-card .love-wish-toggle>span { display:block; min-width:0; width:100%; }
#view-love .love-wish-title { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#303629; font:500 14px/21px var(--journal-serif); }
#view-love .love-wish-card .love-wish-toggle small { margin-top:5px; color:#7b7d6c; font:400 10px/15px var(--journal-serif); }
#view-love .love-wish-card.is-complete .love-wish-title { color:#657258; }
#view-love .love-wish-actions { position:absolute; right:4px; top:22px; z-index:1; }
#view-love .love-wish-actions[open] { z-index:4; }
#view-love .love-wish-actions summary { display:grid; place-items:center; width:36px; height:42px; padding:0; border-radius:10px; list-style:none; cursor:pointer; }
#view-love .love-wish-actions summary::-webkit-details-marker { display:none; }
#view-love .love-wish-actions summary img { width:17px; height:17px; opacity:.55; }
#view-love .love-wish-menu { position:absolute; top:38px; right:4px; display:grid; width:112px; padding:4px; border:1px solid #e2dfd1; border-radius:12px; background:#fffdf7; box-shadow:0 8px 24px #36402a1c; }
#view-love .love-wish-menu button { width:100%; min-height:40px; padding:8px; border:0; border-radius:8px; text-align:left; font:400 12px/1.5 var(--journal-serif); }
#view-love .love-wish-menu .love-wish-delete { color:#a66753; }
#view-love .love-wish-menu button:hover { background:#f2efe6; }
#view-love .love-notes-overview>button { min-height:42px; margin-top:3px; font-size:11px; }

/* Fixed square geometry prevents the summary circles stretching at every breakpoint. */
#view-trends .trend-summary-grid { gap:0; margin:16px 0 18px; }
#view-trends .trend-summary-card { position:relative; grid-template-columns:30px minmax(0,1fr); gap:6px; min-height:55px; padding:0 8px; border:0; border-radius:0; background:transparent; }
#view-trends .trend-summary-card:first-child { padding-left:0; }
#view-trends .trend-summary-card:last-child { padding-right:0; }
#view-trends .trend-summary-card+.trend-summary-card::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:27px; background:#d9d9ca; }
#view-trends .summary-mark { box-sizing:border-box; width:30px; min-width:30px; max-width:30px; height:30px; min-height:30px; max-height:30px; aspect-ratio:1; flex:none; border-radius:50%; font-size:15px; }
#view-trends .summary-mark img { display:block; width:19px; height:19px; }
#view-trends .trend-summary-card strong { font-size:20px; letter-spacing:-.7px; }

/* Paper depth, a two-level month heading and fine rules frame the existing color blocks. */
#view-trends .calendar-card { margin:0; padding:17px 14px 13px; border:1px solid #e6e2d6; border-radius:21px; background:#fffdf8ed; box-shadow:0 3px 4px #59604603,0 12px 28px #59604608; }
#view-trends .calendar-head { height:auto; min-height:61px; margin:0 0 12px; padding-bottom:13px; border-bottom:1px solid #e9e6db; }
#view-trends .calendar-head h3 { display:grid; gap:3px; justify-items:center; margin:0; line-height:1; }
#view-trends .calendar-month-year { color:#8a8c7c; font:400 10px/1.3 var(--journal-sans); letter-spacing:2px; }
#view-trends .calendar-month-name { color:#35422d; font:600 27px/1.2 var(--journal-serif); letter-spacing:1px; }
#view-trends .calendar-head button { width:38px; height:38px; min-height:38px; border:1px solid #e8e6db; background:#f7f6ee; }
#view-trends .calendar-head button:last-child { justify-self:end; }
#view-trends .calendar-head img { width:16px; height:16px; opacity:.7; }
#view-trends .calendar-weekdays { margin-bottom:8px; color:#8b8d7e; font:400 10px/1.5 var(--journal-sans); }
#view-trends .calendar-weekdays>span:nth-last-child(-n+2) { color:#a3967e; }
#view-trends .calendar-grid { gap:7px; }
#view-trends .calendar-day { position:relative; min-height:44px; border-radius:9px; font:500 16px/1 var(--journal-sans); font-variant-numeric:tabular-nums; }
#view-trends .calendar-day b { position:relative; }
#view-trends .calendar-day.today-cell b::after { content:""; position:absolute; left:50%; bottom:-8px; width:3px; height:3px; border-radius:50%; background:currentColor; transform:translateX(-50%); }
#view-trends .calendar-day[aria-pressed="true"] { box-shadow:inset 0 0 0 2px #fffdf7,0 0 0 1.5px #687660; }
#view-trends .calendar-legend { gap:7px 13px; margin:14px 0 0; padding-top:12px; border-top:1px solid #e9e6db; font-size:10px; color:#7a806d; }
#view-trends .calendar-legend i { width:9px; height:9px; border-radius:2px; }
#view-trends .calendar-detail { margin-top:10px; padding:13px 15px; border:1px solid #e6e2d6; border-radius:17px; background:#fffdf8dc; box-shadow:0 5px 18px #59604605; }
#view-trends .calendar-detail-copy { border-left-width:2px; }
#view-trends #calendar-detail-value { color:#4e6143; font-family:var(--journal-sans); font-size:27px; }
#view-trends .calendar-detail-copy strong::after { content:"  ›"; color:#89947b; }
#view-trends .calendar-detail:disabled .calendar-detail-copy strong::after { content:""; }
@media(max-width:360px) {
  #view-love #love-home .love-note-paper,#view-love .love-notes-library .love-note-paper { padding-left:43px; padding-right:37px; }
  #view-love .love-wish-card .love-wish-toggle { padding-left:43px; }
  #view-love .love-wish-toggle i { left:15px; }
  #view-trends .trend-summary-card { grid-template-columns:26px minmax(0,1fr); gap:4px; padding-inline:6px; }
  #view-trends .summary-mark { width:26px; min-width:26px; max-width:26px; height:26px; min-height:26px; max-height:26px; font-size:13px; }
  #view-trends .summary-mark img { width:17px; height:17px; }
  #view-trends .trend-summary-card strong { font-size:17px; letter-spacing:-.8px; }
  #view-trends .trend-summary-card small { font-size:11px; }
  #view-trends .summary-unit { font-size:8px; }
  #view-trends .calendar-card { padding-inline:10px; }
  #view-trends .calendar-grid { gap:6px; }
  #view-trends .calendar-day { min-height:40px; font-size:15px; }
}
@media(forced-colors:active) {
  #view-love .love-note-paper,#view-love .love-wish-card { border:1px solid CanvasText; }
  #view-trends .trend-summary-card+.trend-summary-card::before { background:CanvasText; }
}