/* ═══════════════════════════════════════════
   排卵期 App · Design System & Styles
   Target: Mobile-first, production-ready UI
   ═══════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Inter:wght@400;500;600;700&family=Noto+Serif+SC:wght@400;500;600;700&display=swap');

/* ══════════════════════════════════════
   1. DESIGN TOKENS
   ══════════════════════════════════════ */
:root {
  /* ── Colors ── */
  --coral:        #F27D6A;
  --coral-deep:   #E0634F;
  --coral-soft:   #FFE8E0;
  --coral-fade:   rgba(242,125,106,.12);
  --sage:         #7A9E6D;
  --sage-deep:    #5E8451;
  --sage-soft:    #E9F2E4;
  --sage-fade:    rgba(122,158,109,.10);
  --amber:        #F2C87A;
  --amber-soft:   #FFF4E0;
  --amber-deep:   #D9A84E;
  --lavender:     #B8A9D4;
  --lavender-soft:#EDE8F5;

  --bg:           #FFF9F5;
  --bg-soft:      #FFF3EE;
  --surface:      rgba(255,255,255,.88);
  --surface-strong:rgba(255,255,255,.95);
  --surface-muted: rgba(252,243,238,.80);

  --ink-900:      #2B2226;
  --ink-700:      #4A3F44;
  --ink-600:      #6B5D62;
  --ink-400:      #A0929A;
  --ink-200:      #D4C8CC;

  --line:         #EEDBD5;
  --line-strong:  #E0C6BC;

  --success:      #6C8B62;
  --warning:      #C47A4A;
  --danger:       #D95050;

  /* ── Shadows ── */
  --shadow-xs:    0 2px 8px rgba(100,70,64,.06);
  --shadow-sm:    0 4px 16px rgba(100,70,64,.08);
  --shadow-md:    0 12px 32px rgba(100,70,64,.10);
  --shadow-lg:    0 24px 56px rgba(100,70,64,.14);
  --shadow-glow:  0 0 24px rgba(242,125,106,.18);

  /* ── Radii ── */
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 12px;
  --r-xs: 8px;
  --r-full: 999px;

  /* ── Typography ── */
  --font-heading: "Noto Serif SC","Songti SC","STSong",serif;
  --font-body:    "Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-data:    "DM Sans","Inter",sans-serif;

  /* ── Spacing ── */
  --gap-page:  16px;
  --gap-card:  16px;
  --pad-card:  20px;
  --pad-tight: 14px;

  /* ── Z-index ── */
  --z-header:  20;
  --z-nav:     30;
  --z-backdrop:50;
  --z-sheet:   60;
  --z-toast:   70;

  /* ── Transitions ── */
  --ease-out:  cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast:  180ms;
  --dur-normal:320ms;
  --dur-slow:  480ms;
}

/* ══════════════════════════════════════
   2. RESET & BASE
   ══════════════════════════════════════ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-900);
  background: var(--bg);
  min-height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; -webkit-appearance: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }

/* ══════════════════════════════════════
   3. APP SHELL
   ══════════════════════════════════════ */
.app-shell {
  position: relative;
  width: 100%;
  height: 100dvh;
  max-width: 430px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(242,125,106,.09), transparent 50%),
    radial-gradient(ellipse at 80% 5%, rgba(242,200,122,.08), transparent 40%),
    linear-gradient(180deg, #FFFDFB 0%, var(--bg) 100%);
  overflow: hidden;
}

/* ── Status Bar (faux) ── */
.status-bar {
  flex-shrink: 0;
  height: env(safe-area-inset-top, 0px);
}

/* ── Header ── */
.app-header {
  flex-shrink: 0;
  position: relative;
  z-index: var(--z-header);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px 14px;
  background: rgba(255,249,245,.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(238,219,213,.60);
}
.header-left { flex: 1; min-width: 0; }
.header-eyebrow {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 2px;
}
.header-title {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.15;
}
.header-subtitle {
  margin-top: 4px;
  font-size: .88rem;
  color: var(--ink-600);
  line-height: 1.5;
}
.header-actions { display: flex; gap: 8px; padding-top: 4px; }

/* ── Main Content ── */
.app-main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: 100px;
}

/* ── Screen ── */
.screen {
  display: none;
  padding: var(--gap-page);
  padding-bottom: 100px;
}
.screen.is-active {
  display: block;
  animation: screenIn var(--dur-normal) var(--ease-out);
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* card stack spacing inside screens */
.screen > .card,
.screen > .metric-grid,
.screen > .article-list,
.screen > .onboarding-hero,
.screen > .settings-section {
  margin-bottom: var(--gap-card);
}

/* ══════════════════════════════════════
   4. CARDS
   ══════════════════════════════════════ */
.card {
  background: var(--surface-strong);
  border: 1px solid rgba(238,219,213,.80);
  border-radius: var(--r-lg);
  padding: var(--pad-card);
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: cardIn var(--dur-normal) var(--ease-out) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card + .card { animation-delay: 60ms; }

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.card-kicker {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.card h3, .card-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 4px;
}
.card-muted {
  background: var(--surface-muted);
  border-color: rgba(238,219,213,.50);
}

/* ══════════════════════════════════════
   5. PHASE CARD (Home Hero)
   ══════════════════════════════════════ */
.phase-card {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 16px;
  align-items: center;
  background:
    radial-gradient(ellipse at top left, rgba(255,255,255,.80), transparent 50%),
    linear-gradient(135deg, rgba(255,234,226,.95), rgba(255,246,240,.90));
  border-color: rgba(242,125,106,.18);
}
.phase-copy { min-width: 0; }
.phase-name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 4px;
}
.phase-summary {
  margin-top: 8px;
  font-size: .88rem;
  color: var(--ink-600);
  line-height: 1.6;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-full);
  border: 1px solid rgba(224,198,188,.85);
  background: rgba(255,255,255,.72);
  font-size: .82rem;
  color: var(--ink-600);
}
.chip-strong {
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}
.chip-sage {
  background: var(--sage-soft);
  border-color: rgba(122,158,109,.20);
  color: var(--sage-deep);
}

/* ── Phase Ring ── */
.phase-ring {
  --progress: .44;
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(255,252,250,1) 54%, transparent 55%),
    conic-gradient(var(--coral) calc(var(--progress) * 1turn), rgba(238,219,213,.30) 0);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.50), var(--shadow-sm);
  justify-self: center;
}
.phase-ring span {
  font-family: var(--font-data);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink-900);
}

/* ══════════════════════════════════════
   6. METRIC GRID
   ══════════════════════════════════════ */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.metric-card {
  min-height: 115px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.metric-label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.metric-value {
  display: block;
  margin-top: 8px;
  font-family: var(--font-data);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
}
.metric-note {
  margin-top: 6px;
  font-size: .78rem;
  color: var(--ink-400);
  line-height: 1.5;
}

/* ══════════════════════════════════════
   7. QUICK ACTIONS
   ══════════════════════════════════════ */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.quick-action {
  text-align: left;
  padding: 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(224,198,188,.80);
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,244,238,.92));
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.quick-action:active { transform: scale(.97); }
.quick-action strong {
  display: block;
  font-size: .95rem;
  font-weight: 600;
}
.quick-action span {
  display: block;
  margin-top: 4px;
  font-size: .8rem;
  color: var(--ink-400);
}
.quick-action .qa-icon {
  font-size: 1.4rem;
  margin-bottom: 6px;
}

/* ══════════════════════════════════════
   8. TASK LIST & TIMELINE
   ══════════════════════════════════════ */
.task-list {
  display: grid;
  gap: 8px;
}
.task-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(255,244,238,.60);
  font-size: .9rem;
  color: var(--ink-700);
  line-height: 1.55;
}
.task-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--coral);
}

.timeline-list { display: grid; gap: 10px; }
.timeline-item {
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(238,219,213,.80);
  background: rgba(255,255,255,.72);
}
.timeline-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: .82rem;
  color: var(--ink-400);
}
.timeline-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.timeline-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-full);
  background: rgba(255,242,234,.78);
  font-size: .8rem;
  color: var(--ink-600);
}

/* ══════════════════════════════════════
   9. CALENDAR
   ══════════════════════════════════════ */
.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.calendar-head .card-kicker { margin-bottom: 0; }
.calendar-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
}
.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  font-size: .8rem;
  color: var(--ink-600);
}
.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.legend-period   { background: var(--coral-soft); }
.legend-fertile  { background: var(--sage-soft); }
.legend-ovulation{ background: var(--amber-soft); border: 1.5px solid var(--amber); }

.weekday-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 8px;
  text-align: center;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-400);
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.calendar-cell {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  border: 1px solid rgba(238,219,213,.50);
  background: rgba(255,255,255,.55);
  color: var(--ink-600);
  font-family: var(--font-data);
  font-size: .88rem;
  font-weight: 500;
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.calendar-cell:active { transform: scale(.92); }
.calendar-cell.is-empty {
  border-color: transparent;
  background: transparent;
  pointer-events: none;
}
.calendar-cell.is-today {
  border-color: rgba(122,158,109,.50);
  box-shadow: inset 0 0 0 1.5px rgba(122,158,109,.40);
  font-weight: 700;
  color: var(--ink-900);
}
.calendar-cell.is-selected {
  border-color: var(--coral);
  box-shadow: inset 0 0 0 2px var(--coral), var(--shadow-glow);
  color: var(--ink-900);
  font-weight: 700;
}
.calendar-cell.is-period {
  background: linear-gradient(180deg, rgba(255,232,224,.95), rgba(255,241,236,.97));
}
.calendar-cell.is-fertile {
  background: linear-gradient(180deg, rgba(233,242,228,.96), rgba(247,251,244,.98));
}
.calendar-cell.is-ovulation {
  background: linear-gradient(180deg, rgba(242,200,122,.85), rgba(255,244,224,.95));
}
.calendar-cell::after {
  content: attr(data-marker);
  position: absolute;
  bottom: 3px;
  font-size: .55rem;
  color: var(--ink-400);
}

/* ── Day Detail ── */
.day-detail { margin-top: 6px; }
.day-detail-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: 4px;
}
.day-detail-summary {
  margin-top: 6px;
  font-size: .88rem;
  color: var(--ink-600);
  line-height: 1.6;
}
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.detail-records { display: grid; gap: 8px; margin-top: 12px; }
.detail-record-item {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(238,219,213,.70);
  background: rgba(255,255,255,.65);
  font-size: .85rem;
  color: var(--ink-700);
}

/* ══════════════════════════════════════
   10. FORMS
   ══════════════════════════════════════ */
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field > span, .field > label {
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-600);
}
.field-full { grid-column: 1 / -1; }
.input {
  width: 100%;
  height: 48px;
  border-radius: var(--r-md);
  border: 1px solid rgba(224,198,188,.85);
  background: rgba(255,255,255,.80);
  padding: 0 14px;
  font-size: .92rem;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  -webkit-appearance: none;
  appearance: none;
}
.input:focus {
  outline: none;
  border-color: rgba(242,125,106,.65);
  box-shadow: 0 0 0 4px rgba(242,125,106,.10);
}
select.input {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23A0929A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.textarea {
  height: auto;
  min-height: 100px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.6;
}
.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: .88rem;
  color: var(--ink-600);
}
.toggle-row input[type="checkbox"] {
  width: 44px;
  height: 24px;
  accent-color: var(--coral);
  flex-shrink: 0;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* ══════════════════════════════════════
   11. BUTTONS
   ══════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  padding: 0 20px;
  border-radius: var(--r-full);
  font-size: .92rem;
  font-weight: 600;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast);
  -webkit-appearance: none;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  color: #fff;
  box-shadow: 0 8px 20px rgba(224,99,79,.22);
}
.btn-primary:active { box-shadow: 0 4px 12px rgba(224,99,79,.18); }
.btn-ghost {
  border: 1px solid rgba(224,198,188,.85);
  background: rgba(255,255,255,.72);
  color: var(--ink-900);
}
.btn-text {
  background: none;
  color: var(--coral-deep);
  font-weight: 600;
  padding: 0 8px;
  height: auto;
}
.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(224,198,188,.85);
  background: rgba(255,255,255,.80);
  color: var(--ink-900);
  font-size: 1.2rem;
}
.btn-sm { height: 36px; padding: 0 14px; font-size: .84rem; }
.btn-full { width: 100%; }

/* ══════════════════════════════════════
   12. INSIGHTS
   ══════════════════════════════════════ */
.chart {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  align-items: end;
  min-height: 160px;
  padding-top: 10px;
}
.chart-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(238,219,213,.70);
  background: rgba(255,255,255,.65);
  padding: 10px 6px;
}
.chart-column {
  width: 100%;
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(180deg, rgba(242,125,106,.90), rgba(242,125,106,.40));
  transition: height var(--dur-normal) var(--ease-spring);
}
.chart-caption {
  font-size: .72rem;
  color: var(--ink-400);
  font-family: var(--font-data);
}
.chart-value {
  font-size: .78rem;
  font-weight: 600;
  font-family: var(--font-data);
  color: var(--ink-700);
}

.insight-list { display: grid; gap: 8px; }
.insight-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(255,244,238,.50);
  font-size: .88rem;
  color: var(--ink-700);
  line-height: 1.6;
}
.insight-icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  margin-top: 2px;
}

.report-preview {
  padding: 14px;
  border-radius: var(--r-md);
  background: rgba(255,244,238,.50);
  border: 1px dashed rgba(224,198,188,.60);
  font-size: .85rem;
  color: var(--ink-600);
  line-height: 1.7;
}

/* ══════════════════════════════════════
   13. CONTENT / ARTICLES
   ══════════════════════════════════════ */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.filter-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-full);
  border: 1px solid rgba(224,198,188,.80);
  background: rgba(255,255,255,.70);
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-600);
  transition: all var(--dur-fast) var(--ease-out);
}
.filter-btn.is-active {
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  color: #fff;
  border-color: transparent;
}
.filter-btn:active { transform: scale(.95); }

.article-list { display: grid; gap: 12px; }
.article-card {
  padding: 16px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(238,219,213,.80);
  background: rgba(255,255,255,.72);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.article-card:active { transform: scale(.98); }
.article-card strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}
.article-card .article-desc {
  margin-top: 6px;
  font-size: .84rem;
  color: var(--ink-600);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  font-size: .78rem;
  color: var(--ink-400);
}
.article-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-full);
  background: var(--coral-fade);
  font-size: .72rem;
  font-weight: 600;
  color: var(--coral-deep);
}

/* ══════════════════════════════════════
   14. PROFILE / SETTINGS
   ══════════════════════════════════════ */
.settings-section { margin-bottom: 8px; }
.settings-list { display: grid; gap: 0; }
.setting-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(238,219,213,.55);
}
.setting-item:last-child { border-bottom: 0; }
.setting-info { flex: 1; min-width: 0; }
.setting-info strong {
  display: block;
  font-size: .92rem;
  font-weight: 600;
}
.setting-info small {
  display: block;
  margin-top: 3px;
  font-size: .8rem;
  color: var(--ink-400);
  line-height: 1.5;
}
.setting-item input[type="checkbox"] {
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  margin-top: 2px;
  accent-color: var(--coral);
}

.action-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ══════════════════════════════════════
   15. BOTTOM NAV
   ══════════════════════════════════════ */
.bottom-nav {
  flex-shrink: 0;
  position: relative;
  z-index: var(--z-nav);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 8px 10px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: rgba(255,250,247,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(238,219,213,.65);
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 52px;
  border-radius: var(--r-md);
  font-size: .72rem;
  font-weight: 500;
  color: var(--ink-400);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nav-item .nav-icon {
  font-size: 1.3rem;
  line-height: 1;
}
.nav-item.is-active {
  color: var(--coral-deep);
  background: rgba(255,232,224,.55);
  font-weight: 700;
}
.nav-item-center {
  position: relative;
}
.nav-item-center .nav-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(224,99,79,.25);
}
.nav-item-center.is-active .nav-icon {
  box-shadow: 0 6px 16px rgba(224,99,79,.35);
}

/* ══════════════════════════════════════
   16. SHEETS (Bottom drawer)
   ══════════════════════════════════════ */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(43,34,38,.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-normal) var(--ease-out);
}
.sheet-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: var(--z-sheet);
  width: 100%;
  max-width: 430px;
  max-height: 85dvh;
  overflow-y: auto;
  transform: translate(-50%, 100%);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 12px 20px max(20px, env(safe-area-inset-bottom));
  background: var(--surface-strong);
  border: 1px solid rgba(238,219,213,.80);
  border-bottom: none;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-slow) var(--ease-out);
}
.sheet.is-visible {
  transform: translate(-50%, 0);
}
.sheet-handle {
  width: 48px;
  height: 4px;
  border-radius: var(--r-full);
  background: rgba(160,146,154,.25);
  margin: 0 auto 14px;
}
.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.sheet h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 4px;
}

/* ── Article Sheet ── */
.article-sheet-meta {
  font-size: .82rem;
  color: var(--ink-400);
  margin-bottom: 12px;
}
.article-sheet-body {
  font-size: .92rem;
  color: var(--ink-700);
  line-height: 1.8;
}
.article-sheet-body p { margin-bottom: 12px; }
.article-points { display: grid; gap: 8px; margin-top: 12px; }
.article-point {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(255,244,238,.50);
  font-size: .88rem;
  color: var(--ink-700);
  line-height: 1.6;
}

/* ══════════════════════════════════════
   17. TOAST
   ══════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  max-width: 360px;
  padding: 12px 20px;
  border-radius: var(--r-full);
  background: var(--ink-900);
  color: #fff;
  font-size: .88rem;
  font-weight: 500;
  text-align: center;
  z-index: var(--z-toast);
  opacity: 0;
  pointer-events: none;
  transition: all var(--dur-normal) var(--ease-out);
  box-shadow: var(--shadow-md);
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ══════════════════════════════════════
   18. ONBOARDING
   ══════════════════════════════════════ */
.onboarding-hero {
  text-align: center;
  padding: 40px 20px 30px;
}
.onboarding-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), transparent 40%),
    linear-gradient(140deg, #F7BBA8, var(--coral));
  box-shadow: var(--shadow-md);
  display: grid;
  place-items: center;
  font-size: 2rem;
}
.onboarding-title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 10px;
}
.onboarding-desc {
  font-size: .92rem;
  color: var(--ink-600);
  line-height: 1.6;
  max-width: 300px;
  margin: 0 auto;
}

/* ══════════════════════════════════════
   19. MISC UTILITIES
   ══════════════════════════════════════ */
.text-coral  { color: var(--coral-deep); }
.text-sage   { color: var(--sage-deep); }
.text-amber  { color: var(--amber-deep); }
.text-muted  { color: var(--ink-400); }
.bg-coral-soft { background: var(--coral-soft); }
.bg-sage-soft  { background: var(--sage-soft); }
.bg-amber-soft { background: var(--amber-soft); }
.mt-auto { margin-top: auto; }
.hidden { display: none !important; }

/* ── Disclaimer Banner ── */
.disclaimer {
  padding: 14px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(255,244,238,.90), rgba(252,243,238,.75));
  border: 1px solid rgba(238,219,213,.50);
  font-size: .82rem;
  color: var(--ink-600);
  line-height: 1.6;
}
.disclaimer strong {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 4px;
}

/* ══════════════════════════════════════
   20. DESKTOP ENHANCEMENTS
   ══════════════════════════════════════ */
@media (min-width: 768px) {
  body {
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(ellipse at 25% 10%, rgba(242,125,106,.08), transparent 40%),
      radial-gradient(ellipse at 75% 80%, rgba(122,158,109,.06), transparent 40%),
      linear-gradient(180deg, #FFF9F5, #FFF3EE);
  }
  .app-shell {
    height: min(920px, 95dvh);
    border-radius: var(--r-xl);
    border: 1px solid rgba(238,219,213,.80);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
  .bottom-nav {
    padding-bottom: 8px;
  }
}

/* ══════════════════════════════════════
   21. SCROLL BAR
   ══════════════════════════════════════ */
.app-main::-webkit-scrollbar { width: 4px; }
.app-main::-webkit-scrollbar-track { background: transparent; }
.app-main::-webkit-scrollbar-thumb {
  background: rgba(160,146,154,.20);
  border-radius: var(--r-full);
}
.sheet::-webkit-scrollbar { width: 3px; }
.sheet::-webkit-scrollbar-track { background: transparent; }
.sheet::-webkit-scrollbar-thumb {
  background: rgba(160,146,154,.18);
  border-radius: var(--r-full);
}

/* ══════════════════════════════════════
   22. ANIMATIONS
   ══════════════════════════════════════ */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: .65; }
}
@keyframes float-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-in {
  animation: float-up var(--dur-normal) var(--ease-out) both;
}
.animate-delay-1 { animation-delay: 80ms; }
.animate-delay-2 { animation-delay: 160ms; }
.animate-delay-3 { animation-delay: 240ms; }
.animate-delay-4 { animation-delay: 320ms; }