/* 月記 v2 — styles */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Serif+TC:wght@500;600;700&family=Cormorant+Garamond:wght@500;600;700&display=swap');

:root {
  --canvas: #f4f0e8;
  --paper: #fbf8f3;
  --panel: #efe8dc;
  --ink: #1c1814;
  --muted: #4f4840;
  --subtle: #6f665c;
  --line: #e3dacd;
  --accent: #1c1814;
  --accent-fg: #fbf8f3;
  --period: #9a4338;
  --period-fg: #fff8f5;
  --fertile: #2c6844;
  --shadow: 0 16px 40px #1c18140f;
  --wash-a: #f0d7a4;
  --wash-b: #f0c6b6;
  --wash-c: transparent;
  --wash: radial-gradient(78% 46% at 100% -8%, var(--wash-a) 0%, transparent 46%),
          radial-gradient(70% 42% at -6% 108%, var(--wash-b) 0%, transparent 48%),
          radial-gradient(48% 36% at 78% 18%, var(--wash-c) 0%, transparent 55%);
  --radius: 22px;
  --radius-sm: 14px;
  --font-sans: "Noto Sans TC", "PingFang TC", "Heiti TC", system-ui, sans-serif;
  --font-display: "Noto Serif TC", "Cormorant Garamond", "Songti TC", serif;
  --type: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tab-h: 68px;
  color-scheme: light;
}

[data-style="luxe"] {
  --canvas: #f4f0e8; --paper: #fbf8f3; --panel: #efe8dc; --ink: #1c1814;
  --muted: #4f4840; --subtle: #6f665c; --line: #e3dacd;
  --accent: #1c1814; --accent-fg: #fbf8f3; --period: #9a4338; --period-fg: #fff8f5;
  --fertile: #2c6844; --shadow: 0 16px 40px #1c18140f;
  --wash-a: #f0d7a4; --wash-b: #f0c6b6; --wash-c: transparent; --radius: 22px;
}
[data-style="cute"] {
  --canvas: #fff4f6; --paper: #fffdfb; --panel: #ffe3eb; --ink: #4c3140;
  --muted: #7a5362; --subtle: #9a7382; --line: #f4d3dc;
  --accent: #e56b8a; --accent-fg: #fffafb; --period: #e06a84; --period-fg: #fff7f8;
  --fertile: #2f8a62; --shadow: 0 18px 40px #e56b8a24;
  --wash-a: #ffc0d2; --wash-b: #ffe1b8; --wash-c: #c9f0dc; --radius: 28px;
}
[data-style="plain"] {
  --canvas: #f5f6f8; --paper: #fff; --panel: #eef0f3; --ink: #1a1c1f;
  --muted: #4d5259; --subtle: #6f757e; --line: #e3e6eb;
  --accent: #1a1c1f; --accent-fg: #fff; --period: #b55248; --period-fg: #fff8f6;
  --fertile: #2f6d4f; --shadow: none;
  --wash-a: #fff; --wash-b: #e3e8f0; --wash-c: transparent; --radius: 14px;
}
[data-style="ink"] {
  --canvas: #f2efe8; --paper: #faf8f3; --panel: #e8e2d6; --ink: #161412;
  --muted: #4a443c; --subtle: #6e665c; --line: #ddd4c6;
  --accent: #2a241c; --accent-fg: #faf7f0; --period: #8b3d35; --period-fg: #fff7f4;
  --fertile: #255a3d; --shadow: 0 12px 32px #16141212;
  --wash-a: #d4c4a0; --wash-b: #c9b8a4; --wash-c: transparent; --radius: 18px;
}

.dark[data-style="luxe"], .dark:not([data-style]) {
  --canvas: #0e0d0b; --paper: #171614; --panel: #24211d; --ink: #f6f1e8;
  --muted: #d4cbc0; --subtle: #b4aa9e; --line: #2e2b27;
  --accent: #f6f1e8; --accent-fg: #141210; --period: #e3a394; --period-fg: #2c1412;
  --fertile: #b5d2bf; --shadow: 0 18px 50px #00000059;
  --wash-a: #e2c27a; --wash-b: #e09a90; --wash-c: transparent;
  color-scheme: dark;
}
.dark[data-style="cute"] {
  --canvas: #160f14; --paper: #261820; --panel: #362430; --ink: #fff1f5;
  --muted: #ecd2da; --subtle: #c9a8b4; --line: #41303a;
  --accent: #ffb4c8; --accent-fg: #2a121c; --period: #ffb3c2; --period-fg: #2a1218;
  --fertile: #b7e0c8; --shadow: 0 18px 50px #00000073;
  --wash-a: #ff8aab; --wash-b: #ffc48a; --wash-c: #7ddec0;
  color-scheme: dark;
}
.dark[data-style="plain"] {
  --canvas: #101114; --paper: #181a1e; --panel: #23262c; --ink: #f3f4f6;
  --muted: #d0d3d9; --subtle: #a8adb6; --line: #2c3036;
  --accent: #f3f4f6; --accent-fg: #121316; --period: #e7b1a8; --period-fg: #2c1412;
  --fertile: #b7d4c2; --shadow: none;
  --wash-a: #9eb4dc; --wash-b: transparent; --wash-c: transparent;
  color-scheme: dark;
}
.dark[data-style="ink"] {
  --canvas: #0c0b09; --paper: #15130f; --panel: #211e18; --ink: #f3ede8;
  --muted: #d0c7b8; --subtle: #aea395; --line: #2a2620;
  --accent: #e8dfd0; --accent-fg: #12100c; --period: #d9a090; --period-fg: #2a1410;
  --fertile: #a8cbb8; --shadow: 0 18px 48px #00000066;
  --wash-a: #c4a86a; --wash-b: #b88878; --wash-c: transparent;
  color-scheme: dark;
}

/* Fix typo above */
.dark[data-style="ink"] { --ink: #f3ede8; }

[data-palette="gold"] { --accent: #8c6b2e; --accent-fg: #fffaf1; --wash-a: #efd7a2; --wash-b: #f3e4c6; }
.dark[data-palette="gold"] { --accent: #e4c57a; --accent-fg: #1c160c; --wash-a: #e4c57a; --wash-b: #d9a27a; }
[data-palette="violet"] { --accent: #6a458f; --accent-fg: #faf7ff; --wash-a: #ddc8f2; --wash-b: #f0d4e4; }
.dark[data-palette="violet"] { --accent: #c4b0e8; --accent-fg: #1a1224; --wash-a: #c4b0e8; --wash-b: #e0a0c4; }
[data-palette="teal"] { --accent: #1f6f5b; --accent-fg: #f4fbf8; --wash-a: #c9ebe0; --wash-b: #d7efe4; }
.dark[data-palette="teal"] { --accent: #8fd0bc; --accent-fg: #10201a; --wash-a: #8fd0bc; --wash-b: #6aab96; }
[data-palette="blue"] { --accent: #2a4e7a; --accent-fg: #f5f8fc; --wash-a: #d5e2f4; --wash-b: #e4eaf6; }
.dark[data-palette="blue"] { --accent: #9eb6d8; --accent-fg: #101820; --wash-a: #9eb6d8; --wash-b: #7f98bc; }
[data-palette="rose"] { --accent: #a84d68; --accent-fg: #fff7fa; --wash-a: #f3c4d2; --wash-b: #f0d0c4; }
.dark[data-palette="rose"] { --accent: #f0a8bc; --accent-fg: #2a1218; --wash-a: #f0a8bc; --wash-b: #e09090; }
[data-palette="sage"] { --accent: #4a6b52; --accent-fg: #f5faf6; --wash-a: #c8ddc9; --wash-b: #d8e4d0; }
.dark[data-palette="sage"] { --accent: #a8c9b0; --accent-fg: #121a14; --wash-a: #a8c9b0; --wash-b: #88a890; }
/* ink palette = default accent from style */

[data-type="md"] { --type: 15px; }
[data-type="lg"] { --type: 16.5px; }
[data-type="xl"] { --type: 18.5px; }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--type);
  line-height: 1.5;
  color: var(--ink);
  background: var(--canvas);
  background-image: var(--wash);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; }

#app {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100%;
  min-height: 100dvh;
  position: relative;
  display: flex;
  flex-direction: column;
}

.shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 16px calc(var(--tab-h) + var(--safe-b) + 12px);
  gap: 14px;
}

.sheet {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
[data-style="plain"] .sheet { box-shadow: none; }
[data-style="cute"] .sheet { border-radius: 28px; }

.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.kicker {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--subtle);
  font-weight: 600;
}
.muted { color: var(--muted); }
.subtle { color: var(--subtle); }

.small { font-size: 0.88em; }
.tiny { font-size: 0.78em; }
.disclaimer {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}
.dark .disclaimer { color: color-mix(in srgb, var(--muted) 92%, var(--ink)); }


.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px;
  border-radius: 999px;
  background: var(--accent); color: var(--accent-fg);
  font-weight: 600;
  transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 22%, transparent);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); box-shadow: none;
}
.btn.soft {
  background: var(--panel); color: var(--ink); box-shadow: none;
}
.btn.danger {
  background: color-mix(in srgb, var(--period) 88%, #000);
  color: var(--period-fg);
}
.btn.block { width: 100%; }
.btn.sm { min-height: 40px; padding: 0 14px; font-size: 0.92em; }

.chip-row {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; min-width: 4.6em; padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 22%, var(--line));
  background: var(--paper);
  color: var(--ink);
  font-weight: 500;
  transition: background .12s, border-color .12s, color .12s, transform .1s;
}
.chip:active { transform: scale(0.97); }
.chip.on {
  background: var(--accent); color: var(--accent-fg);
  border-color: var(--accent);
}
.chip.period-on {
  background: var(--period); color: var(--period-fg);
  border-color: var(--period);
}
.chip.flow {
  min-width: 64px;
}
.dark .chip {
  border-color: color-mix(in srgb, var(--ink) 28%, var(--line));
}

.field-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 10px;
}
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.grow { flex: 1; }
.gap-sm { gap: 8px; }
.gap-md { gap: 12px; }
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 12px; }
.mb-1 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 12px; }

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.stat {
  background: var(--panel);
  border-radius: calc(var(--radius) - 6px);
  padding: 14px;
}
.stat .val {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
}
.stat .lbl { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

.ring-wrap {
  display: grid;
  place-items: center;
  padding: 8px 0 4px;
}
.ring {
  width: 180px; height: 180px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--paper) 0 58%, transparent 59%),
    conic-gradient(var(--accent) calc(var(--p, 0) * 1%), color-mix(in srgb, var(--panel) 80%, var(--line)) 0);
  display: grid; place-items: center;
  position: relative;
}
.ring-inner { text-align: center; padding: 12px; }
.ring-inner .big {
  font-family: var(--font-display);
  font-size: 2.2rem; font-weight: 700; line-height: 1;
}
.phase-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--panel); font-size: 0.86rem; font-weight: 600;
}
.phase-pill.period { background: color-mix(in srgb, var(--period) 18%, var(--paper)); color: var(--period); }
.phase-pill.fertile, .phase-pill.ovulation { background: color-mix(in srgb, var(--fertile) 16%, var(--paper)); color: var(--fertile); }

/* Calendar */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-nav {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--panel); display: grid; place-items: center; font-size: 1.1rem;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-dow {
  text-align: center; font-size: 0.74rem; color: var(--muted);
  font-weight: 600; padding: 4px 0 8px;
}
.cal-day.focus:not(.period) {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent);
}
.cal-hint {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
}
.cal-day-summary {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--panel);
  border-radius: 14px;
}
.cal-day {
  aspect-ratio: 1;
  border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; position: relative;
  font-weight: 500; font-size: 0.92rem;
  border: 1px solid transparent;
}
.cal-day.out { opacity: .28; }
.cal-day.today { border-color: var(--accent); }
.cal-day.period { background: var(--period); color: var(--period-fg); }
.cal-day.predicted { background: color-mix(in srgb, var(--period) 16%, var(--paper)); }
.cal-day.fertile { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fertile) 55%, transparent); }
.cal-day.ovulation::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--fertile); position: absolute; bottom: 5px;
}
.cal-day .dot {
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .7;
}
.cal-day.period .dot { background: var(--period-fg); }
.legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); }
.lg-dot { width: 10px; height: 10px; border-radius: 50%; }
.lg-period { background: var(--period); }
.lg-pred { background: color-mix(in srgb, var(--period) 28%, var(--paper)); border: 1px solid color-mix(in srgb, var(--period) 40%, transparent); }
.lg-fert { box-shadow: inset 0 0 0 2px var(--fertile); background: transparent; }

/* Tabs */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0; width: min(430px, 100%);
  padding: 8px 10px calc(8px + var(--safe-b));
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  z-index: 40;
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; border-radius: 14px;
  color: var(--muted); font-size: 0.68rem; font-weight: 600;
}
.tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tab.on {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--paper));
}
.tab.on svg { stroke-width: 2.15; }

/* Modal / sheet overlay */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: #0006;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 12px; padding-bottom: calc(12px + var(--safe-b));
  animation: fade .18s ease;
}
.overlay .modal {
  width: min(430px, 100%);
  max-height: min(88vh, 720px);
  overflow: auto;
  background: var(--paper);
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 18px;
  animation: rise .22s ease;
}
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(18px); opacity: .6; } }

.seg {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 6px; background: var(--panel); padding: 5px; border-radius: 999px;
}
.seg button {
  min-height: 36px; border-radius: 999px; font-weight: 600; font-size: 0.88rem;
  color: var(--muted);
}
.seg button.on { background: var(--paper); color: var(--ink); box-shadow: 0 2px 8px #0001; }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--line);
  position: relative;
}
.swatch.on { outline: 2px solid var(--accent); outline-offset: 3px; border-color: transparent; }
.swatch[data-p="ink"] { background: linear-gradient(135deg, #1c1814, #8d8478); }
.swatch[data-p="gold"] { background: linear-gradient(135deg, #8c6b2e, #efd7a2); }
.swatch[data-p="violet"] { background: linear-gradient(135deg, #6a458f, #ddc8f2); }
.swatch[data-p="teal"] { background: linear-gradient(135deg, #1f6f5b, #c9ebe0); }
.swatch[data-p="blue"] { background: linear-gradient(135deg, #2a4e7a, #d5e2f4); }
.swatch[data-p="rose"] { background: linear-gradient(135deg, #a84d68, #f3c4d2); }
.swatch[data-p="sage"] { background: linear-gradient(135deg, #4a6b52, #c8ddc9); }

.look-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.look-card {
  border: 1.5px solid var(--line);
  border-radius: calc(var(--radius) - 4px);
  padding: 14px; text-align: left;
  background: var(--panel);
  min-height: 88px;
}
.look-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.look-card .name { font-weight: 700; }
.look-card .hint { font-size: 0.78rem; color: var(--muted); margin-top: 4px; }

textarea, input[type="text"], input[type="date"], input[type="password"], input[type="number"] {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 14px;
  padding: 12px 14px;
  outline: none;
}
textarea:focus, input:focus { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
textarea { min-height: 88px; resize: vertical; }

.stepper {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border-radius: 999px; padding: 6px 8px;
}
.stepper button {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--paper); font-size: 1.2rem; font-weight: 600;
}
.stepper .num {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; min-width: 2.2ch; text-align: center;
}

.section-title {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 700; margin: 0 0 4px;
}
.divider {
  height: 1px; background: var(--line); margin: 8px 0;
}
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--safe-b) + 16px);
  transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: 999px;
  font-size: 0.88rem; font-weight: 600; z-index: 80;
  animation: fade .2s ease;
  max-width: min(90vw, 360px); text-align: center;
}
.danger-zone {
  border: 1.5px dashed color-mix(in srgb, var(--period) 45%, var(--line));
  border-radius: var(--radius);
  padding: 16px;
  background: color-mix(in srgb, var(--period) 6%, var(--paper));
}
.danger-zone-spaced {
  margin-top: 28px;
  margin-bottom: 8px;
}
.ring-day-label {
  margin-top: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 12px; text-align: center;
  background: var(--panel); border-radius: 14px;
}
.empty-glyph {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  background: color-mix(in srgb, var(--accent) 14%, var(--paper));
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}
.backup-zone {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--panel);
}
.bar {
  height: 8px; border-radius: 999px; background: var(--panel); overflow: hidden;
}
.bar > i {
  display: block; height: 100%; border-radius: 999px; background: var(--accent);
}
.list-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line); gap: 10px;
}
.list-row:last-child { border-bottom: none; }
.hint-box {
  background: var(--panel); border-radius: 14px; padding: 12px 14px;
  font-size: 0.88rem; color: var(--muted);
}
.suggest {
  border-left: 3px solid var(--accent);
  padding: 10px 12px; background: var(--panel);
  border-radius: 0 12px 12px 0; margin-top: 8px;
  font-size: 0.92rem;
}
.lock-screen {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; padding: 24px;
  text-align: center;
}
.pin-dots { display: flex; gap: 12px; margin: 8px 0 16px; }
.pin-dots i {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: .35;
}
.pin-dots i.on { opacity: 1; background: var(--accent); }
.pin-pad {
  display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; justify-content: center;
}
.pin-pad button {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--panel); font-size: 1.4rem; font-weight: 600;
}
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

@media (min-width: 500px) {
  body { padding: 24px 0; }
  #app {
    border-radius: 28px;
    overflow: clip;
    min-height: calc(100dvh - 48px);
    box-shadow: 0 24px 60px #00000014;
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  }
  .tabbar { border-radius: 0 0 28px 28px; }
}