/* Visual style: spec section 2. Peach page, white 16px cards, no shadows, no gradients. */
/* Fonts (spec 2), self-hosted: latin + vietnamese subsets from Google Fonts (OFL).
   Fraunces is variable (opsz, wght) with SOFT pinned at 100; Nunito is variable 400-700. */
@font-face { font-family: "Fraunces"; src: url(/fonts/fraunces-vietnamese.woff2) format("woff2"); font-weight: 300 600; font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Fraunces"; src: url(/fonts/fraunces-latin.woff2) format("woff2"); font-weight: 300 600; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; src: url(/fonts/nunito-vietnamese.woff2) format("woff2"); font-weight: 400 700; font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Nunito"; src: url(/fonts/nunito-latin.woff2) format("woff2"); font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --bg: #FAECE7;
  --card: #FFFFFF;
  --line: #F1DDD4;
  --text: #4A1B0C;
  --muted: #7E5A4E; /* 5:1 on the peach page, 6:1 on cards (readable at 11-13 px) */
  --faint: #CDB3A9; /* days that can't be picked yet */
  --switch-off: #E8D3CA;
  --scrim: rgba(74, 27, 12, .25);

  /* Area colors: light fill / mid / dark ink (+ in-between tints for charts and predictions) */
  --water-bg: #E6F1FB;  --water: #378ADD;  --water-ink: #0C447C;
  --sleep-bg: #EEEDFE;  --sleep: #7F77DD;  --sleep-ink: #3C3489;
  --cycle-bg: #FBEAF0;  --cycle: #D4537E;  --cycle-ink: #4B1528;
  --sinner-bg: #FAEEDA; --sinner: #BA7517; --sinner-ink: #412402;
  --kimi-bg: #E1F5EE;   --kimi: #1D9E75;   --kimi-ink: #04342C;
  --points-bg: #F5C4B3; --points: #D85A30; --points-ink: #4A1B0C;
  --water-soft: #B9D6F2; --water-tint: #9CC8F0; --cycle-tint: #F2B5CA; --kimi-tint: #A6DCC7;

  --serif: "Fraunces", ui-serif, "New York", serif; /* no Georgia: it lacks Vietnamese accents */
  --sans: "Nunito", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* Rhythm (spec 2, session 24): bigger gaps between sections than inside them. */
  --gap-section: 24px; /* between sections / groups of cards */
  --gap-card: 16px;    /* inside a card */
  --gap-row: 12px;     /* between related rows and cards of one group */
  --gap-label: 8px;    /* label → its value */
  /* Type scale: page title 28, main text 16, supporting text 14, small notes 12. */
  --fs-title: 28px; --fs-main: 16px; --fs-support: 14px; --fs-small: 12px;
}

/* Night mode (spec 2): she picks Sáng / Tối / Theo iPhone in Cài đặt (theme.js sets <html data-theme>). Same layout,
   warm dark browns instead of peach; area mids stay the same (white text on buttons), fills darker, inks lighter. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1C1512;
  --card: #2A201C;
  --line: #3B2E28;
  --text: #F7E8E1;
  --muted: #BFA79D;
  --faint: #6B5850;
  --switch-off: #4A3A33;
  --scrim: rgba(0, 0, 0, .5);

  --water-bg: #172A3D;  --water-ink: #A8CDF3;
  --sleep-bg: #25233F;  --sleep-ink: #CAC6F6;
  --cycle-bg: #3A1D29;  --cycle-ink: #F4BDD0;
  --sinner-bg: #382912; --sinner-ink: #F0D09B;
  --kimi-bg: #0F3129;   --kimi-ink: #9FE0C8;
  --points-bg: #4A271B; --points-ink: #F8D2C3;
  --water-soft: #2F4B66; --water-tint: #2F5F8C; --cycle-tint: #8A4560; --kimi-tint: #2F6E5A;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body {
  font: var(--fs-main)/1.4 var(--sans);
  display: flex; flex-direction: column; height: 100dvh;
  overflow: hidden; overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%;
}
h1, p { margin: 0; }
.serif { font-family: var(--serif); font-weight: 400; font-variation-settings: "SOFT" 100; }
.muted { color: var(--muted); font-size: var(--fs-support); }
.small-strong { font-size: 14px; font-weight: 600; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 12px; }
.icon { display: block; flex: none; }

/* ---------- Fast buttons (spec 4) ---------- */
button, a.btn, [data-tap] {
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
[data-tap] { transition: transform 60ms ease-out; }
[data-tap].pressed { transform: scale(.94); }
.card[data-tap].pressed { transform: scale(.98); }

/* ---------- Screens + transitions ---------- */
.screens { position: relative; flex: 1; overflow: hidden; }
.screen {
  position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 16px) 24px calc(env(safe-area-inset-left) + 16px);
}
.screen, .subscreen {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(var(--shift, 0));
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s 220ms;
}
.screen.active, .subscreen.active {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s;
}
.subscreens { display: grid; }
.subscreen { grid-area: 1 / 1; }
/* A sub-tab's own pointer-events override its hidden parent's, so an open Care sub-tab
   would sit invisibly on top of the other tabs and steal their taps and scrolls. */
.screen:not(.active) .subscreen { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .screen, .subscreen { transform: none !important; }
}

/* ---------- Tab bar ---------- */
.tabbar {
  display: flex; background: var(--card); border-top: 1px solid var(--line);
  padding: 6px env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + 4px) env(safe-area-inset-left);
}
/* Same size as before (the tour's spotlight and fox poses are placed on these buttons); the active tab gets a peach pill. */
.tab {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 0 3px; padding: 4px 0; border-radius: 14px; color: var(--muted); font-size: 11px;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.tab.active { color: var(--points); background: var(--bg); font-weight: 700; }

/* ---------- Header ---------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 8px 0 var(--gap-section); }
.page-head h1 { font-size: var(--fs-title); line-height: 1.2; margin-top: 2px; }
/* A section title above a group of cards ("Hôm nay", "Thống kê nhanh", ...), with an optional link on the right.
   Margins collapse with the card above, so there are 24 px before the title and 12 px after it. */
.section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: var(--gap-section) 4px var(--gap-row); font-size: 18px; font-weight: 700;
}
.section-head:first-child { margin-top: 0; }
.section-head .link { font-size: var(--fs-support); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 2px; }
.badge {
  display: flex; align-items: center; gap: 4px; flex: none;
  background: var(--points-bg); color: var(--points-ink);
  border-radius: 999px; padding: 6px 12px 6px 8px; font-weight: 600; font-size: 14px;
}

/* ---------- Cards ---------- */
.card { background: var(--card); border-radius: 16px; padding: var(--gap-card); margin-bottom: var(--gap-row); }
.card-title { display: flex; align-items: center; gap: 2px; font-weight: 700; margin-bottom: var(--gap-row); }
.card-title .icon { color: var(--muted); }
.card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--gap-label); }
/* Small label naming what a number is ("Uống nước" above "4 / 8 ly"). */
.card-label { font-size: var(--fs-support); font-weight: 700; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-row); margin-bottom: var(--gap-row); }
.grid2 .card { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0; }
.big { font-size: 30px; font-weight: 600; line-height: 1.1; }
.big small { font-size: 14px; font-weight: 500; }

.chip { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.round-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; }

/* Buttons (spec 2, session 24): ONE filled main action per screen (.btn-fill), outlined secondary ones (.btn-line),
   and .link for small fixes ("Bấm nhầm"). The colour comes from an area class: <button class="btn btn-fill water">.
   Without one they are coral (points / general). The older .btn-water, .btn-sleep, ... are filled main buttons too. */
.btn {
  --a: var(--points); --a-ink: var(--points-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
  border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: var(--fs-support); text-decoration: none;
}
.btn-soft { background: var(--points-bg); color: var(--points-ink); }

/* Area fills (light background + mid icon) and inks (dark text) */
.water { --a: var(--water); --a-ink: var(--water-ink); background: var(--water-bg); color: var(--water); }
.sleep { --a: var(--sleep); --a-ink: var(--sleep-ink); background: var(--sleep-bg); color: var(--sleep); }
.cycle { --a: var(--cycle); --a-ink: var(--cycle-ink); background: var(--cycle-bg); color: var(--cycle); }
.sinner { --a: var(--sinner); --a-ink: var(--sinner-ink); background: var(--sinner-bg); color: var(--sinner); }
.kimi { --a: var(--kimi); --a-ink: var(--kimi-ink); background: var(--kimi-bg); color: var(--kimi); }
.points { --a: var(--points); --a-ink: var(--points-ink); background: var(--points-bg); color: var(--points); }
.btn.btn-fill { background: var(--a); color: #fff; }
.btn.btn-line { background: transparent; color: var(--a-ink); border: 1.5px solid var(--a); }
.water-ink { color: var(--water-ink); }
.sleep-ink { color: var(--sleep-ink); }
.cycle-ink { color: var(--cycle-ink); }
.sinner-ink { color: var(--sinner-ink); }
.kimi-ink { color: var(--kimi-ink); }
.points-ink { color: var(--points-ink); }

/* ---------- Home pieces ---------- */
.note { display: flex; align-items: flex-end; gap: 10px; margin-bottom: var(--gap-section); }
.fox-spot { flex: none; display: grid; place-items: center; }
.fox-spot .fox { display: block; }
.bubble { position: relative; flex: 1; background: var(--card); border-radius: 16px 16px 16px 4px; padding: 12px 14px; }
.bubble-label { font-size: 12px; color: var(--points); font-weight: 600; margin-bottom: 4px; }
.bubble p { font-size: 17px; line-height: 1.35; }

/* Home order (session 25): note card, "Hôm nay" (water + sleep, slim study row), then fav corners and cycle. */
.note-card { align-items: center; gap: 12px; margin-bottom: var(--gap-section); }
.note-card p { font-size: 17px; line-height: 1.35; }
/* Several notes a day (session 33): one at a time, a short fade between them, dots show which one. */
.note-stack, .note-ghosts { display: grid; }
.note-stack > *, .note-ghosts > * { grid-area: 1 / 1; }
.note-ghosts { visibility: hidden; }
.note-text { transition: opacity .18s; }
.note-text.swap { opacity: 0; }
.note-dots { display: flex; gap: 6px; margin-top: 8px; }
.note-dots[hidden] { display: none; }
.note-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.note-dots span.on { background: var(--points); }
@media (prefers-reduced-motion: reduce) { .note-text { transition: none; } }
/* 20.10 (spec 5.9): two flower sprigs, one beside the greeting, one on the note card's corner. */
.page-head, .note-card { position: relative; }
.day-sprig { position: absolute; pointer-events: none; }
.day-sprig svg { display: block; width: 100%; height: 100%; }
.day-sprig[hidden] { display: none; }
.head-sprig { right: 10px; bottom: 0; width: 60px; height: 60px; }
.note-sprig { right: -6px; top: -14px; width: 46px; height: 46px; transform: rotate(24deg); }
.today .card { gap: 4px; }
.today .card-top { margin-bottom: 4px; }
.progress.home-bar { margin: 6px 0 2px; }
.home-add { width: 100%; margin-top: auto; padding: 8px 10px; }
.today .muted { margin-bottom: var(--gap-label); }
.study-row { padding-top: 12px; padding-bottom: 12px; margin-bottom: var(--gap-section); }
.study-done-line { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--points-ink); font-weight: 600; }
.home-mood { width: 100%; margin-top: var(--gap-card); }

.player { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.player + .player { border-top: 1px solid var(--line); }
.initials {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.player-name { font-weight: 600; }
.player .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-when { font-size: 12px; font-weight: 600; text-align: right; flex: none; max-width: 30%; }

.cycle-day {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; line-height: 1;
}
.cycle-day small { font-size: 10px; font-weight: 500; margin-top: 2px; }

/* ---------- Placeholders, segmented control, stepper ---------- */
.soon { display: flex; align-items: center; gap: 14px; }

.soon p { font-size: 17px; }

.segmented {
  position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr);
  background: var(--card); border-radius: 12px; padding: 4px; margin-bottom: 12px;
}
.seg { position: relative; z-index: 1; padding: 8px 0; font-weight: 600; font-size: 14px; color: var(--muted); }
.seg.active { color: var(--points-ink); }
.seg-thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / var(--n)); border-radius: 9px; background: var(--bg);
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform 220ms var(--ease);
}
.stepper { display: flex; align-items: center; justify-content: space-between; }

/* ---------- Care: Nước + Ngủ ---------- */
.huge { font-size: 44px; font-weight: 700; line-height: 1; }
.huge small { font-size: 16px; font-weight: 600; }
.center { text-align: center; }
.note-line { margin-top: 8px; }

/* Quiet "this may be out of date" lines (points waiting to sync, old sports info). No colour alarm. */
.sync-note { display: flex; align-items: flex-start; gap: 6px; color: var(--muted); font-size: 13px; line-height: 1.4; margin: 0 4px 12px; }
.sync-note[hidden] { display: none; }
.sync-note .icon { flex: none; margin-top: 1px; }
.badge .wait-ico { display: inline-flex; }
.badge .wait-ico[hidden] { display: none; }
.title-icon { display: inline-flex; margin-right: 4px; }
.btn-wide { width: 100%; padding: 14px; font-size: 16px; border-radius: 14px; }
.btn-water { background: var(--water); color: #fff; }
.btn-sleep { background: var(--sleep); color: #fff; }
.link { position: relative; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: underline; padding: 6px 0; }
.link::before { content: ""; position: absolute; inset: -6px -8px; } /* 44 px tap area, same look */

/* Nước (session 26): count, a row of 8 drops (a 2nd row past 8), bar, line, "Thêm 1 ly", "Bấm nhầm" link. */
.glasses { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin: var(--gap-card) 0 0; }
.cup { aspect-ratio: 1; max-height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--water-bg); color: var(--water-soft); }
.progress.water-bar { margin-top: var(--gap-row); }
.water-add { margin-top: var(--gap-card); }
.undo-slot { min-height: 8px; }
.cup.on { background: var(--water); color: #fff; }
.progress { height: 8px; border-radius: 999px; background: var(--water-bg); margin-top: 14px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--water); transition: width 220ms var(--ease); }

.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.week-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.week-num { font-size: 11px; font-weight: 600; color: var(--muted); min-height: 15px; }
.week-day { font-size: 12px; color: var(--muted); }
.bar-track { width: 18px; height: 56px; border-radius: 6px; background: var(--water-bg); display: flex; align-items: flex-end; overflow: hidden; }
.bar { width: 100%; background: var(--water-tint); }
.bar.full { background: var(--water); }

.times { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.time-chip { border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 600; color: var(--water-ink); }
/* Reminder times she can change (Care › Nước, Ngủ): native time pickers, 44 px targets, 16 px so iOS does not zoom. */
.times { align-items: center; }
.time-edit { display: inline-flex; align-items: center; gap: 2px; border-radius: 999px; background: var(--water-bg); padding-right: 4px; }
.time-input { font: inherit; font-size: 16px; font-weight: 600; color: var(--water-ink); background: transparent; border: 0; border-radius: 999px; min-height: 44px; padding: 0 6px 0 12px; touch-action: manipulation; }
.time-x { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--water-ink); background: var(--card); flex: none; position: relative; }
.time-x::before { content: ""; position: absolute; inset: -6px; } /* 44 px tap area */
.time-add { min-height: 44px; border-radius: 999px; padding: 0 14px; font-size: 14px; font-weight: 600; color: var(--water-ink); border: 1px dashed var(--water); display: inline-flex; align-items: center; gap: 4px; }
.switch-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.switch-row + .switch-row { border-top: 1px solid var(--line); }
.switch { position: relative; width: 48px; height: 28px; flex: none; border-radius: 999px; background: var(--switch-off); transition: background 160ms; }
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; transition: transform 160ms var(--ease);
}
.switch.on { background: var(--water); }
.switch.on::after { transform: translateX(20px); }

/* Ngủ (session 26): big bedtime + "Đổi giờ ngủ", countdown, "Em đi ngủ đây"; 7 nights + streak / record panel. */
.bed-row { display: flex; justify-content: space-between; align-items: baseline; margin: var(--gap-label) 0 4px; }
.sleep-act { margin-top: var(--gap-card); }
.streaks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-row); margin-top: var(--gap-card); padding-top: var(--gap-row); border-top: 1px solid var(--line); text-align: center; }
/* A link with a see-through date / time input on top: the tap lands on the input, so iOS opens its picker. */
.picker { display: inline-block; }
.pick-input { position: absolute; inset: -6px -8px; width: calc(100% + 16px); height: calc(100% + 12px); opacity: 0; font-size: 16px; border: 0; padding: 0; margin: 0; }
.slept { display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 10px 12px; font-weight: 600; color: var(--sleep-ink); }
.late { background: var(--bg); color: var(--muted); }
.slept.late { color: var(--text); }
.moon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; }
.moon.none { border: 1.5px dashed var(--line); }
.tip { display: flex; gap: 12px; align-items: flex-start; }
.tip p { padding-top: 7px; }

/* ---------- Study (spec 5.5) ---------- */
/* Session 26: filled "Mở Notion", outlined check-in under it, then 2 compact cards (month count, exam). */
.study-check { margin-top: var(--gap-row); }
.study-yesterday { margin-top: 4px; }
.study-stats .card { gap: 2px; }
.study-stats .card-label { margin-bottom: 4px; }
.exam-links { display: flex; gap: 16px; margin-top: auto; padding-top: var(--gap-label); }
.exam-links .link { padding: 6px 0; }

/* ---------- Care: Chu kỳ ---------- */
.btn-cycle-solid { background: var(--cycle); color: #fff; }
.btn-cycle-soft { background: var(--cycle-bg); color: var(--cycle-ink); }
.slept.cycle { color: var(--cycle-ink); }
.switch.pink.on { background: var(--cycle); }
.round-btn.small { width: 32px; height: 32px; }
.chip.small { width: 24px; height: 24px; border-radius: 8px; }
.set-num { min-width: 58px; text-align: center; font-weight: 700; }
.center-block { display: block; margin: 6px auto 0; }
.privacy { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; text-align: center; }
.share-row { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line); }
.fine { font-size: 12px; margin: 4px 0 8px; }

.ring { position: relative; width: min(240px, 72vw); margin: 0 auto 12px; }
.ring > svg { display: block; width: 100%; height: auto; }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 22%; }
.ring-day { font-size: 56px; line-height: 1; margin: 2px 0 4px; }
.phase-btn { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.phase-btn .icon { color: var(--cycle); }
.phase-btn::before { content: ""; position: absolute; inset: -12px -8px; } /* 44 px tap area */
.phase-info { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--cycle-bg); color: var(--cycle-ink); font-size: 14px; line-height: 1.4; text-align: center; }
.seg-none { stroke: var(--cycle-bg); }
.seg-period { stroke: var(--cycle); }
.seg-predicted { stroke: var(--cycle-tint); }
.seg-fertile { stroke: var(--kimi-tint); }
.seg-ovulation { stroke: var(--kimi); }
.ring-today { fill: var(--card); stroke: var(--cycle-ink); stroke-width: 3; }

.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; }
.lg-period { background: var(--cycle); }
.lg-predicted { background: var(--cycle-tint); }
.lg-fertile { background: var(--kimi-tint); }
.lg-ovulation { background: var(--kimi); }

.todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.todo li { display: flex; align-items: flex-start; gap: 10px; }

.moods { display: flex; flex-wrap: wrap; gap: 8px; }
.mood {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px;
  background: var(--bg); color: var(--cycle-ink); font-weight: 600; font-size: 14px;
}
.sheet .mood { background: var(--card); }
.mood.on, .sheet .mood.on { background: var(--cycle); color: #fff; }

/* "Kiểu khác" note + mood diary (Nhật ký cảm xúc) */
.note-edit { margin-top: 12px; }
.link.danger { color: var(--cycle); }
.note-edit textarea {
  display: block; width: 100%; resize: none; border: 1.5px solid var(--cycle-bg); border-radius: 14px;
  background: var(--bg); color: var(--text); padding: 12px 14px;
  font: 16px/1.45 var(--sans); /* 16px: iOS zooms into smaller inputs */
  -webkit-user-select: text; user-select: text;
}
.sheet .note-edit textarea { background: var(--card); }
.note-edit textarea:focus { outline: none; border-color: var(--cycle); }
.note-acts { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.note-acts .muted { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.note-acts .btn { padding: 8px 18px; }
.note-view {
  display: block; width: 100%; text-align: left; margin-top: 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--cycle-bg); color: var(--cycle-ink); font-size: 16px; line-height: 1.4; white-space: pre-wrap;
}

.dstats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.dstat {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px;
  background: var(--bg); color: var(--cycle-ink); font-size: 13px; font-weight: 600;
}
.dstat b { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--card); text-align: center; font-size: 12px; }
.dstat.on { background: var(--cycle); color: #fff; }
.dstat.on b { color: var(--cycle-ink); }
.diary-list { margin-top: 6px; }
.diary-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 12px 0; }
.diary-row + .diary-row { border-top: 1px solid var(--line); }
.diary-date {
  width: 48px; flex: none; padding: 6px 0; border-radius: 12px; background: var(--cycle-bg); color: var(--cycle-ink);
  display: flex; flex-direction: column; align-items: center; line-height: 1.1;
}
.diary-date b { font-size: 18px; }
.diary-date small { font-size: 11px; font-weight: 600; margin-top: 2px; }
.diary-date.today { background: var(--cycle); color: #fff; }
.diary-row .grow { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.dtags { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.dtag { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--cycle-ink); }
.dtag .icon { color: var(--cycle); }
.dtag.period { padding: 1px 8px 1px 5px; border-radius: 999px; background: var(--cycle-bg); }
.diary-note { font-size: 15px; line-height: 1.4; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.diary-empty { padding: 12px 8px 4px; }

.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head .round-btn { background: var(--bg); width: 44px; height: 44px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px 0; text-align: center; }
.cal-wd { font-size: 11px; color: var(--muted); padding-bottom: 2px; }
.cal-day {
  position: relative; aspect-ratio: 1; max-width: 46px; width: 100%; margin: 0 auto;
  border-radius: 50%; font-size: 14px; font-weight: 600; display: grid; place-items: center;
}
.cal-day:disabled { opacity: 1; color: var(--faint); }
.cal-day.today { outline: 2px solid var(--cycle-ink); outline-offset: -2px; }
.cal-period { background: var(--cycle); color: #fff; }
.cal-predicted { border: 1.5px dashed var(--cycle); color: var(--cycle-ink); }
.cal-predicted:disabled { color: var(--cycle); }
.cal-fertile { background: var(--kimi-bg); color: var(--kimi-ink); }
.cal-ovulation { background: var(--kimi); color: #fff; }
.cal-fertile:disabled, .cal-ovulation:disabled { color: var(--kimi-ink); }
.cal-ovulation:disabled { color: #fff; }
.cal-day.logged::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

/* Bottom sheet (day edit) and full sheet (first-time setup). */
.sheet-wrap { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.sheet-wrap.open { pointer-events: auto; }
.sheet-back { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity 220ms var(--ease); }
.sheet-wrap.open .sheet-back { opacity: 1; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); border-radius: 20px 20px 0 0;
  padding: 16px calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 16px) calc(env(safe-area-inset-left) + 16px);
  transform: translateY(100%); transition: transform 260ms var(--ease);
}
.sheet.full { top: 0; max-height: none; border-radius: 0; padding-top: calc(env(safe-area-inset-top) + 8px); }
.sheet-wrap.open .sheet { transform: none; }
.sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sheet-head .round-btn { background: var(--card); }
.sheet-acts { display: grid; gap: 8px; margin-bottom: 18px; }
.more-btn { display: flex; align-items: center; width: 100%; text-align: left; font-weight: 600; }
.more-btn .icon { transition: transform 220ms var(--ease); }
.more-btn.open .icon { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .sheet { transition: none; } }

/* ---------- Fox (spec 3): the pictures (fox-art.js) and their one-off reactions ---------- */
/* One-off reactions (fox-react.js): a sip when she logs a glass, a happy hop at her daily goal. */
.fox.react-sip { transform-origin: 50% 100%; animation: fox-sip .9s ease-in-out; }
.fox.react-cheer { transform-origin: 50% 100%; animation: fox-cheer 1.1s ease-in-out; }
@keyframes fox-sip { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-7deg) translateY(-2px); } 65% { transform: rotate(3deg); } }
@keyframes fox-cheer { 0%, 100% { transform: translateY(0); } 20%, 60% { transform: translateY(-9px) rotate(-4deg); } 40%, 80% { transform: translateY(0) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .fox * { animation: none !important; } .fox.react-sip, .fox.react-cheer { animation: none; } }

/* .fa = one-off reactions, .fa-move = the pose's idle move, .fa-body = breathing, .fa-pic = the picture.
   Base styles are the still frame (what "Reduce Motion" shows); the animations only add movement. */
.fa { position: relative; display: block; flex: none; transform-origin: 50% 100%; }
.fa-move, .fa-body, .fa-pic { position: absolute; inset: 0; transform-origin: 50% 100%; }
.fa-pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.fa-blink { opacity: 0; animation: fa-blink 9s infinite; } /* two blinks per 8-10 s, at uneven gaps */
.fa-body { animation: fa-breathe 4s ease-in-out infinite; }
/* Night: a thin cream sticker edge, so the dark-brown outline doesn't vanish into the dark page (no blur: not a shadow). */
:root[data-theme="dark"] .fa-pic { filter: drop-shadow(1px 0 0 #FFF4EE) drop-shadow(-1px 0 0 #FFF4EE) drop-shadow(0 1px 0 #FFF4EE) drop-shadow(0 -1px 0 #FFF4EE); }
.fa-home .fa-move { animation: fa-tilt 7s ease-in-out infinite; }
.fa-peek .fa-move { animation: fa-lean 5s ease-in-out infinite; }
.fa-sleep .fa-body { animation: fa-sleep 5s ease-in-out infinite; }
.fa-water-goal .fa-move { animation: fa-hop .9s ease-in-out .1s 1; } /* the done card appears: one hop */
.fa-hello .fa-move { animation: fa-wave 1.6s ease-in-out infinite; } /* gift intro: rocks a little as it waves */
.fa-fav-f1 .fa-move { animation: fa-wave 2s ease-in-out infinite; } /* Kimi's side: sways as it waves the flag */

.fa-x { position: absolute; display: block; line-height: 0; }
.fa-x svg { display: block; width: 100%; height: auto; overflow: visible; }
.fa-spark svg { fill: #F6C453; }
.fa-points .fa-spark svg { fill: #FFFBEA; } /* on the gold coin */
.fa-spark { animation: fa-twinkle 2.4s ease-in-out infinite; }
.fa-spark.s2 { animation-delay: -1.2s; }
.fa-spark.s3 { animation-delay: -.6s; }
.fa-ball svg circle { fill: #D9E650; stroke: #3B1A12; stroke-width: 1.6; }
.fa-ball svg path { fill: none; stroke: #fff; stroke-width: 1.3; }
.fa-ball { animation: fa-ball 1.1s infinite; transform-origin: 50% 100%; }
.fa-bub { opacity: 0; animation: fa-rise 2.4s ease-out infinite; }
.fa-bub svg { fill: rgba(255, 255, 255, .95); }
.fa-bub.b2 { animation-delay: -1.2s; }
.fa-drop svg { fill: #6CB4EE; }
.fa-z svg { fill: none; stroke: #7F77DD; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.fa-z { animation: fa-z 3.6s ease-out infinite; }
.fa-z.z2 { animation-delay: -3s; }
.fa-z.z3 { animation-delay: -2.4s; }
.fa-heart svg { fill: #F27098; }
.fa-heart.h1, .fa-heart.h2 { animation: fa-float 3.2s ease-out infinite; }
.fa-heart.h2 { animation-delay: -1.6s; }
.fa-dots-box { fill: #fff; stroke: #3B1A12; stroke-width: 1.4; }
.fa-dots circle { fill: #3B1A12; animation: fa-dot 1.2s infinite; }
.fa-dots circle:nth-of-type(2) { animation-delay: .2s; }
.fa-dots circle:nth-of-type(3) { animation-delay: .4s; }
.fa-check svg circle { fill: #3FAE7A; }
.fa-check svg path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fa-check { animation: fa-pop .6s cubic-bezier(.3, 1.6, .5, 1) .25s 1 both; }
.fa-q { font: 700 1em/1 var(--serif); color: #3B1A12; text-align: center; animation: fa-bob 2.2s ease-in-out infinite; }
:root[data-theme="dark"] .fa-q { color: var(--text); }
/* Bursts: hidden until they play (the water done card on arrival; the cycle hearts when she saves a mood). */
.fa-burst { opacity: 0; }
.fa-water-goal .fa-burst { animation: fa-burst 1.1s ease-out .2s 1 both; }
.fa.react-hearts .fa-pop { animation: fa-burst 1s ease-out 1 both; }

@keyframes fa-blink { 0%, 31.9%, 33.6%, 73.9%, 75.6%, 100% { opacity: 0; } 32%, 33.5%, 74%, 75.5% { opacity: 1; } }
@keyframes fa-breathe { 50% { transform: scale(1.01, 1.018); } }
@keyframes fa-sleep { 50% { transform: scale(1.015, 1.035); } }
@keyframes fa-tilt { 0%, 55%, 100% { transform: rotate(0); } 64%, 82% { transform: rotate(-3deg); } }
@keyframes fa-wave { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } }
@keyframes fa-lean { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes fa-hop { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-12%) rotate(-3deg); } 60% { transform: translateY(0) rotate(2deg); } 80% { transform: translateY(-3%); } }
@keyframes fa-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(20deg); } }
@keyframes fa-ball {
  0%, 100% { transform: translateY(0) scale(1.15, .85); animation-timing-function: ease-out; }
  8% { transform: translateY(-10%) scale(1); }
  50% { transform: translateY(-130%); animation-timing-function: ease-in; }
}
@keyframes fa-rise { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-300%); } }
@keyframes fa-z { 0% { opacity: 0; transform: translate(-20%, 40%) scale(.6); } 25%, 60% { opacity: 1; } 100% { opacity: 0; transform: translate(40%, -60%) scale(1); } }
@keyframes fa-float { 0% { opacity: 0; transform: translateY(40%) scale(.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-220%) scale(1); } }
@keyframes fa-dot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@keyframes fa-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes fa-bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-15%) rotate(6deg); } }
@keyframes fa-burst {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 100%), calc(var(--dy) * 100%)) scale(1); }
}
/* More one-off reactions: a hop when she's back after a day away, a bounce when her points go up. */
.fox.react-hop { animation: fox-hop .9s ease-in-out; }
.fox.react-bounce { animation: fox-bounce .8s ease-out; }
@keyframes fox-hop { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-10px) rotate(-3deg); } 50% { transform: translateY(0) rotate(2deg); } 70% { transform: translateY(-4px); } }
@keyframes fox-bounce { 0%, 100% { transform: none; } 20% { transform: scale(1.06, .92); } 45% { transform: translateY(-8px) scale(.97, 1.04); } 70% { transform: scale(1.03, .97); } }
@media (prefers-reduced-motion: reduce) { .fox.react-hop, .fox.react-bounce { animation: none; } }

/* Empty / offline states: the peeking fox above the line. Done cards: the finished state on top of Nước / Học tập. */
.fa-empty { display: grid; justify-items: center; gap: var(--gap-label); text-align: center; padding: 4px 0; }
.fa-empty .fa-peek { margin-top: -12px; } /* the peeking fox is wide: less empty room above it */
.done-card { display: flex; align-items: center; gap: var(--gap-card); margin-bottom: var(--gap-section); }
.done-title { font-size: 19px; line-height: 1.3; color: var(--a-ink); }
.done-row { display: flex; align-items: center; gap: var(--gap-row); margin-top: var(--gap-label); }
.done-pts { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--a); color: #fff; font-weight: 700; font-size: var(--fs-support); }
.done-card .link { color: var(--a-ink); }

/* ---------- Points (spec 5.2) ---------- */
/* Order (session 25): hero (fox + total), chart, "Thống kê nhanh", calendar, "Gần đây". */
.total-card { display: flex; align-items: center; gap: var(--gap-card); }
.hero-num { font-size: 48px; font-weight: 700; line-height: 1; }
.rules-link { display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; text-decoration: none; color: var(--points-ink); font-size: var(--fs-support); }
.rules-link .icon { transition: transform 220ms var(--ease); }
.rules-link[aria-expanded="true"] .icon { transform: rotate(90deg); }
.rule-row { padding: 6px 0; font-size: 14px; }
.rule-row .chip { width: 32px; height: 32px; border-radius: 10px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-card) var(--gap-row); }
.stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat-top { display: flex; align-items: center; gap: var(--gap-label); }
.stats-note { margin-top: var(--gap-card); padding-top: var(--gap-row); border-top: 1px solid var(--line); }
.card-title.split { justify-content: space-between; }
.card-title .link { font-size: var(--fs-support); text-decoration: none; color: var(--points-ink); }

.pchart-toggle { background: var(--bg); }
.pchart-toggle .seg-thumb { background: var(--card); }
.pchart-grid { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: 4px; text-align: center; }
.pchart-col { min-width: 0; }
.pchart-plot { height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.pchart-num { font-size: 11px; font-weight: 600; line-height: 15px; min-height: 15px; color: var(--muted); }
.pchart-bar { width: 18px; flex: none; border-radius: 6px 6px 0 0; background: var(--points); opacity: .65; }
.pchart-label { display: block; margin-top: 6px; min-height: 34px; font-size: 12px; line-height: 17px; color: var(--muted); }
.pchart-col.current .pchart-bar { opacity: 1; }
.pchart-col.current .pchart-num { color: var(--points-ink); }
.pchart-total { margin-top: 10px; }

.pcal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pcal-head .round-btn { background: var(--bg); width: 44px; height: 44px; }
.pcal-prev .icon { transform: rotate(180deg); }
.pcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px 2px; text-align: center; }
.pcal-wd { font-size: 11px; color: var(--muted); padding-bottom: 2px; }
.pcal-day { aspect-ratio: 1; max-width: 42px; width: 100%; margin: 0 auto; border-radius: 50%; font-size: 14px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.pcal-day.today { outline: 2px solid var(--points-ink); outline-offset: -2px; }
.pcal-day.future { color: var(--faint); }
.pcal-dots { display: flex; justify-content: center; gap: 3px; height: 5px; }
.pcal-dot { display: inline-block; width: 5px; height: 5px; flex: none; border-radius: 50%; }
.pcal-dot.water-dot { background: var(--water); }
.pcal-dot.sleep-dot { background: var(--sleep); }
.pcal-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.pcal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pcal-legend .pcal-dot { width: 8px; height: 8px; }

.phistory-row { padding: 10px 0; }
.phistory-row + .phistory-row { border-top: 1px solid var(--line); }
.phistory-row:last-child { padding-bottom: 0; }
.phistory-points { flex: none; color: var(--points-ink); white-space: nowrap; }
.phistory-points.negative { color: var(--muted); }

/* ---------- Your fav corners (spec 5.3) ---------- */
.fav-toggle .seg-thumb { background: var(--bg); }
.fav-toggle { margin-bottom: 12px; }
.big-initials { width: 48px; height: 48px; font-size: 16px; }
.next-main { font-weight: 600; font-size: 16px; }
.next-when { margin-top: 6px; font-weight: 600; }
.next-when small { font-weight: 500; color: var(--muted); font-size: 12px; }
.next-rows { margin-top: 10px; display: grid; gap: 6px; }
.next-row { display: flex; justify-content: space-between; gap: 12px; }
.later { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.later-head { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.later-row { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; }
.later-day { flex: none; width: 76px; font-size: 13px; font-weight: 600; padding-top: 1px; }

/* Kết quả gần nhất + Cuộc đua vô địch (session 16) */
.res-rows { margin-top: 10px; }
.res-row { padding: 8px 0; }
.res-row + .res-row { border-top: 1px solid var(--line); }
.res-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.res-pos { font-size: 17px; flex: none; }
.res-end { flex: none; font-size: 14px; }
.path { margin-top: 10px; }
.path-step { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; }
.path-step .muted { overflow-wrap: anywhere; }
.path-chip { border-radius: 50%; margin-top: 1px; background: var(--bg); color: var(--muted); }
.path-step.win .path-chip { background: var(--sinner); color: #fff; }
.path-step.loss .path-chip { background: var(--cycle-bg); color: var(--cycle); }
.path-step.next .path-chip { background: var(--sinner-bg); color: var(--sinner); }
.path-step.later .small-strong { color: var(--muted); font-weight: 500; }
.fight { margin-top: 12px; display: grid; gap: 8px; }
.fight-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.fight-row.me { color: var(--kimi-ink); font-weight: 700; }
.fight-name { flex: none; width: 108px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fight-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; }
.fight-bar i { display: block; height: 100%; border-radius: 4px; background: var(--faint); }
.fight-row.me .fight-bar i { background: var(--kimi); }
.fight-pts { flex: none; min-width: 32px; text-align: right; }
.fight-toggle { margin: 16px 0 0; }
.notice.clinch { margin: 10px 0 0; }

.guess { padding: 12px 0; }
.guess + .guess { border-top: 1px solid var(--line); }
.guess:last-of-type { padding-bottom: 0; }
.guess-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.guess-pts { flex: none; font-size: 15px; }
.guess-intro { margin-bottom: 4px; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.pick {
  padding: 9px 14px; border-radius: 999px; background: var(--bg); color: var(--text);
  font-weight: 600; font-size: 14px; min-height: 40px;
}
.pick.on { background: var(--pick, var(--sinner)); color: #fff; }
.fav-kimi { --pick: var(--kimi); }
.guess-lock { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; }
.notice { background: var(--bg); border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 600; margin-bottom: 8px; }

.past { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.past-title { margin-bottom: 4px; }
.past-row { padding: 8px 0; }
.past-row + .past-row { border-top: 1px solid var(--line); }
.past-chip { background: var(--bg); color: var(--muted); border-radius: 50%; }
.past-chip.good { background: var(--kimi-bg); color: var(--kimi); }
.past-chip.bad { background: var(--cycle-bg); color: var(--cycle); }
.past-result { flex: none; font-size: 13px; font-weight: 700; color: var(--muted); }
.past-result.good { color: var(--kimi-ink); }
.past-row .muted, .past-row .small-strong { overflow-wrap: anywhere; }

.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stats3 .muted { font-size: 12px; margin-top: 2px; }

.timeline { margin-bottom: 4px; }
.jyear { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-size: 20px; margin: 14px 0 2px; }
.jyear:first-child { margin-top: 0; }
.jrow { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.jchip { margin-top: 1px; border-radius: 50%; }
.jrow.runner .jchip { background: var(--bg); color: var(--muted); }
.jdate { flex: none; font-size: 12px; padding-top: 2px; }
.journey-more { width: 100%; margin-top: 10px; }

.fav-feature-next { border-top: 1px solid var(--line); margin-top: var(--gap-card); padding-top: var(--gap-card); }
.fav-feature-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--gap-label); }
.fav-feature .next-main { font-size: 22px; line-height: 1.25; font-weight: 400; overflow-wrap: anywhere; }

/* ---------- Notifications (push.js) ---------- */
.switch.sleep.on { background: var(--sleep); }
.switch.sinner.on { background: var(--sinner); }
.switch.kimi.on { background: var(--kimi); }
.switch-row .link { padding: 6px 4px; }

/* ---------- Credit footer + hidden "Hỏi & góp ý" page (spec 5.6) ---------- */
.credit { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 20px 0 0; text-align: center; }
.credit-from { display: inline-flex; align-items: center; gap: 5px; font-family: var(--serif); font-variation-settings: "SOFT" 100; font-size: 14px; color: var(--muted); }
.credit-from .icon { color: var(--points); }
.back-head { align-items: center; justify-content: flex-start; gap: 8px; }
.back-head h1 { margin-top: 0; }
.back-btn { width: 44px; height: 44px; background: var(--card); color: var(--text); }
.kinds { display: flex; gap: 8px; margin-bottom: 12px; }
.kind-chip { min-height: 44px; padding: 8px 18px; border-radius: 999px; background: var(--bg); color: var(--points-ink); font-weight: 600; font-size: 14px; }
.kind-chip.on { background: var(--points); color: #fff; }
.fb-edit textarea {
  display: block; width: 100%; resize: none; border: 1.5px solid var(--points-bg); border-radius: 14px;
  background: var(--bg); color: var(--text); padding: 12px 14px;
  font: 16px/1.45 var(--sans); /* 16px: iOS zooms into smaller inputs */
  -webkit-user-select: text; user-select: text;
}
.fb-edit textarea:focus { outline: none; border-color: var(--points); }
.btn-points { background: var(--points); color: #fff; padding: 12px 20px; min-height: 44px; }
.sent-row { padding: 10px 0; }
.sent-row + .sent-row { border-top: 1px solid var(--line); }
.sent-row p { margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Trung's replies (spec 5.6): under her message, a dot on the footer link, a card on Home */
.reply { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--points-bg); color: var(--points-ink); }
.reply-label { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.reply p { white-space: pre-wrap; overflow-wrap: anywhere; }
.sent-row .wait { margin-top: 4px; }
.sent-del { display: block; min-height: 44px; margin-top: 2px; text-align: left; }
.reply-dot { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--points); color: #fff; font-size: 12px; line-height: 18px; text-decoration: none; }
.reply-card { display: flex; align-items: center; gap: 12px; }
.reply-card[hidden] { display: none; }
.reply-card .icon:last-child { color: var(--muted); }

/* ---------- Cài đặt (spec 5.7): gear on every tab, hidden settings page ---------- */
.head-acts { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.gear-btn { position: relative; width: 36px; height: 36px; background: var(--card); color: var(--muted); }
.gear-btn::before { content: ""; position: absolute; inset: -4px; } /* 44 px tap area */
.gear-dot { position: absolute; top: -5px; right: -7px; margin: 0; }
.reply-count[hidden] { display: none; }
/* "BẢN THỬ" on preview hosts only (app.js): in the 24 px gap under the title, so the layout is the same as hers. */
.test-tag {
  position: absolute; top: calc(100% + 2px); left: 0; pointer-events: none;
  padding: 1px 8px; border: 1px dashed var(--sinner); border-radius: 999px;
  background: var(--sinner-bg); color: var(--sinner-ink); font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: .04em;
}
.theme-toggle { background: var(--bg); }
.theme-toggle .seg-thumb { background: var(--card); }
.settings-links { flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }
.about p { margin-top: 10px; line-height: 1.5; }
.about-head { display: flex; align-items: center; gap: 12px; }
.about-head .card-title { margin-bottom: 0; }
.about-name { font-size: 20px; margin-top: 0 !important; }
.about-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 12px 0 0; font-size: 14px; }
.about-facts dt { color: var(--muted); font-weight: 600; }
.about-facts dd { margin: 0; }
.inline-link { display: inline; padding: 0; font-size: inherit; color: var(--points); }
.about-sign { justify-content: center; width: 100%; margin-top: 14px !important; }

/* ---------- "Mở quà" intro + install screen (spec 5.8, intro.js) ---------- */
/* Above the app and the tab bar, under the sheets (Care's cycle setup opens on top of it). */
.intro {
  position: fixed; inset: 0; z-index: 9; background: var(--bg); display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 16px) calc(env(safe-area-inset-left) + 16px);
  transition: opacity 300ms var(--ease), background-color 300ms var(--ease);
}
.intro.closing { opacity: 0; pointer-events: none; }
.intro-top { display: flex; justify-content: flex-end; min-height: 36px; }
.intro-skip { padding: 6px 4px; }
.intro-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.intro-body.in .intro-step { animation: intro-in 320ms var(--ease); }
.intro-step { margin: auto 0; width: 100%; max-width: 420px; align-self: center; padding: 8px 0 4px; }
.intro-center { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.intro-title { font-size: 22px; line-height: 1.3; }
.intro-text { font-size: 16px; line-height: 1.4; }
.intro-acts[hidden] { display: none; }
.intro-acts { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; margin-top: 12px; }
@keyframes intro-in { from { opacity: 0; transform: translateY(8px); } }

/* The gift: 3 taps = wiggle, the ribbon comes undone, the lid pops and the fox jumps out. */
.gift { position: relative; width: 220px; height: 220px; display: block; }
.gift-svg, .install-gift { overflow: visible; display: block; }
.gift-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gift-name { font: 600 12px var(--serif); fill: #3B1A12; }
.gift-fox { position: absolute; left: 50%; bottom: 30%; width: 132px; margin-left: -66px; opacity: 0; transform: translateY(40px) scale(.5); transform-origin: 50% 100%; }
.gift-tie { transition: opacity 400ms var(--ease); }
.gift-lid, .gift-bow { transform-box: fill-box; }
.gift-bow { transform-origin: 50% 100%; transition: transform 450ms var(--ease), opacity 450ms var(--ease); }
.gift-lid { transform-origin: 0% 100%; transition: transform 600ms cubic-bezier(.3, 1.3, .5, 1), opacity 600ms var(--ease); }
.gift.s1 .gift-svg { transform-origin: 50% 95%; animation: gift-wiggle 500ms ease-in-out; }
.gift.s2 .gift-svg { animation: gift-wiggle-2 600ms ease-in-out; }
.gift.s2 .gift-tie { opacity: 0; }
.gift.s2 .gift-bow { transform: translateY(-24px) rotate(30deg) scale(.3); opacity: 0; }
.gift.s3 .gift-lid { transform: translate(-50px, -120px) rotate(-35deg); opacity: 0; }
.gift.s3 .gift-fox { opacity: 1; transform: none; transition: transform 650ms cubic-bezier(.3, 1.6, .5, 1) 250ms, opacity 150ms 250ms; }
@keyframes gift-wiggle { 25% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } 75% { transform: rotate(-2deg); } }
@keyframes gift-wiggle-2 { 20% { transform: rotate(-6deg) translateY(-4px); } 45% { transform: rotate(6deg); } 70% { transform: rotate(-3deg) translateY(-2px); } }
.intro-hop { transform-origin: 50% 100%; animation: intro-hop 1.6s ease-in-out infinite; }
@keyframes intro-hop { 0%, 50%, 100% { transform: translateY(0); } 15%, 35% { transform: translateY(-12px) rotate(-3deg); } 25% { transform: translateY(0) rotate(2deg); } }

/* Trung's letter, one line after another (a tap shows all of it). */
.letter { background: var(--card); border-radius: 16px; padding: 20px 18px; text-align: left; }
.letter p { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-size: 18px; line-height: 1.45; }
.letter p + p { margin-top: 8px; }
.letter .gap { height: 4px; }
.letter .sign { text-align: right; margin-top: 14px; }
.letter p, .intro-late { animation: letter-in 700ms var(--ease) both; animation-delay: calc(var(--d, 0) * 1.1s + .4s); }
.intro-step.all .letter p, .intro-step.all .intro-late { animation: none; }
@keyframes letter-in { from { opacity: 0; transform: translateY(6px); visibility: hidden; } to { opacity: 1; transform: none; visibility: visible; } }

/* Install screen (iPhone, still in Safari or in Instagram's browser). */
.install-hero { display: flex; align-items: flex-end; justify-content: center; gap: 0; }
.install-gift { width: 96px; height: 96px; margin-left: -14px; }
.install-steps { list-style: none; padding: 8px 14px; margin: 0; width: 100%; text-align: left; }
.install-step { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 15px; line-height: 1.35; }
.install-step + .install-step { border-top: 1px solid var(--line); }
.install-num { width: 18px; flex: none; font-weight: 700; color: var(--points); text-align: center; }
.install-app { width: 36px; height: 36px; border-radius: 9px; flex: none; display: block; }

/* Spotlight tour (spec 5.8, intro.js): the real app under a dark stage with one button lit. The stage is the
   one dark layer allowed (spec 2: still no shadows or gradients on cards). Warm dark brown, not black. */
:root { --stage: rgba(33, 15, 9, .74); }
:root[data-theme="dark"] { --stage: rgba(8, 4, 2, .7); } /* the app is dark already: darker, so the lit button still stands out */
.intro.touring { background-color: transparent; padding: 0; }
.intro.touring > .intro-top, .intro.touring > .intro-body { display: none; }
.tour { position: absolute; inset: 0; overflow: hidden; }
.tour.pressed { transform: none; } /* a tap anywhere goes on; only the buttons squish */
.tour-frame { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.tour-frame > svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.tour-shade { fill: var(--stage); }
/* Dark mode: the lit button is dark too, so a faint cream rim shows where the light is (hidden otherwise). */
:root[data-theme="dark"] .tour-rim { display: inline; stroke: #FFF4EE; stroke-opacity: .45; stroke-width: 1.5; }
.tour-arrow path { fill: none; stroke: #FFF4EE; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.tour-wait { visibility: hidden; }
.tour-gone { pointer-events: none; }
.tour-clip { position: absolute; left: 0; top: 0; width: 100%; }
.tour-clip.cut { overflow: hidden; } /* the fox comes up from behind the tab bar / the bubble */
.tour-fox { position: absolute; line-height: 0; }
/* The tour pictures carry their own cream sticker edge (tools/fox-convert.py), for the dark stage. */
.tour-fox img { position: absolute; left: 0; top: 0; display: block; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tour-in { position: absolute; overflow: hidden; } /* step 9: the fox inside the parcel, hidden below its rim */
.tour-fox .fa-heart.late { animation-delay: -.8s; }
.tour-bubble { position: absolute; min-width: 256px; background: var(--card); border-radius: 18px; padding: 14px 16px 10px; }
.tour-bubble.c-bl { border-bottom-left-radius: 4px; } /* the sharp corner points at the fox */
.tour-bubble.c-br { border-bottom-right-radius: 4px; }
.tour-bubble.c-tl { border-top-left-radius: 4px; }
.tour-bubble.c-tr { border-top-right-radius: 4px; }
.tour-bubble.seat { padding-top: 22px; } /* the fox sits / lies on its top edge, paws over it */
.tour-label { font-size: 12px; font-weight: 600; color: var(--points); margin-bottom: 4px; }
.tour-line { font-size: 18px; line-height: 1.4; }
.tour-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.tour-foot .link { padding: 8px 0; white-space: nowrap; }
.tour-dots { flex: 1; display: flex; justify-content: center; gap: 5px; }
.tour-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--switch-off); }
.tour-dots span.on { background: var(--points); }
.tour-next { padding: 8px 18px; min-height: 38px; border-radius: 12px; }
.tour-bubble .btn-wide { margin-top: 12px; }

/* One-time tab tip: the fox for a few seconds above the tab bar (a tap closes it). */
.tab-tip {
  position: absolute; left: calc(env(safe-area-inset-left) + 16px); right: calc(env(safe-area-inset-right) + 16px); bottom: 12px; z-index: 5;
  display: flex; align-items: flex-end; gap: 8px; opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.tab-tip.show { opacity: 1; transform: none; pointer-events: auto; }
.tab-tip .bubble { border: 1px solid var(--line); }
.tab-tip .bubble p { font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .intro-body.in .intro-step, .gift-svg, .gift.s1 .gift-svg, .gift.s2 .gift-svg, .intro-hop, .letter p, .intro-late, .tour-fox .fa-x { animation: none !important; }
  .gift-tie, .gift-bow, .gift-lid, .gift.s3 .gift-fox, .tab-tip, .intro { transition: none !important; }
}