:root {
  color-scheme: light;
  --bg: #f4eee5;
  --paper: #fffdfa;
  --paper-2: #f9f4ed;
  --ink: #2c2723;
  --muted: #796f67;
  --line: #ded5ca;
  --brown: #503a2f;
  --brown-2: #745548;
  --latte: #d8b99e;
  --sage: #798578;
  --danger: #a45145;
  --shadow: 0 24px 70px rgba(71, 49, 36, .11);
  --radius: 28px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #191614;
  --paper: #24201d;
  --paper-2: #2c2723;
  --ink: #f2ece5;
  --muted: #b2a69c;
  --line: #453d37;
  --brown: #d7b69d;
  --brown-2: #c89f82;
  --latte: #755b49;
  --sage: #91a08f;
  --danger: #e78f83;
  --shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 90% 0%, rgba(216,185,158,.18), transparent 34%), var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, [data-route] { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 8px; color: var(--brown-2); font-size: 11px; font-weight: 800; letter-spacing: .19em; }
.app-shell { width: min(100%, 1120px); min-height: 100vh; margin: auto; padding: 0 34px 110px; }
.topbar { height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid color-mix(in srgb, var(--line), transparent 20%); }
.wordmark { display: flex; gap: 12px; align-items: center; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
.logo, .brand-tile { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; background: var(--brown); color: var(--paper); font-size: 21px; }
.wordmark strong, .wordmark small { display: block; }.wordmark strong { font-family: Georgia, serif; font-size: 19px; }.wordmark small { margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.top-actions { display: flex; align-items: center; gap: 16px; }.date-label { color: var(--muted); font-size: 13px; }.icon-btn { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); cursor: pointer; }
#view { outline: 0; animation: pageIn .35s ease both; }.page { padding: 48px 0 20px; }.page-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }.page-head h1 { margin: 2px 0 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(32px, 5vw, 56px); line-height: 1.03; font-weight: 500; letter-spacing: -.03em; }.page-head p { max-width: 500px; margin: 0; color: var(--muted); }
.section-head { display: flex; align-items: end; justify-content: space-between; margin: 38px 0 17px; gap: 14px; }.section-head h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 25px; font-weight: 500; }.section-head span { color: var(--muted); font-size: 12px; }
.card { background: color-mix(in srgb, var(--paper), transparent 3%); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(71,49,36,.04); }
.hero-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 18px; }.greeting-card { min-height: 355px; padding: 46px; position: relative; overflow: hidden; background: var(--brown); color: #fffaf5; border: 0; }.greeting-card::after { content: ""; position: absolute; right: -45px; bottom: -85px; width: 290px; height: 290px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.035), 0 0 0 76px rgba(255,255,255,.025); }.greeting-card h1 { max-width: 540px; margin: 12px 0 20px; font-family: Georgia, "Songti SC", serif; font-size: clamp(38px, 5.4vw, 66px); line-height: 1.04; font-weight: 500; }.greeting-card p { max-width: 440px; color: rgba(255,255,255,.68); line-height: 1.8; }.greeting-actions { position: relative; z-index: 1; display: flex; gap: 10px; margin-top: 34px; flex-wrap: wrap; }
.weather-card { padding: 30px; display: flex; flex-direction: column; justify-content: space-between; min-height: 355px; }.weather-top { display: flex; justify-content: space-between; }.weather-temp { font-family: Georgia, serif; font-size: 58px; line-height: 1; }.weather-city { font-size: 13px; color: var(--muted); }.weather-icon { font-size: 35px; }.weather-card h3 { margin: 18px 0 8px; font-family: Georgia, "Songti SC", serif; font-size: 24px; font-weight: 500; }.weather-card p { margin: 0; color: var(--muted); line-height: 1.6; }.weather-meta { display: flex; gap: 10px; margin-top: 22px; }.weather-meta span { flex: 1; padding: 12px; border-radius: 16px; background: var(--paper-2); text-align: center; font-size: 11px; }.weather-error { padding: 14px; border-radius: 15px; background: var(--paper-2); color: var(--muted); font-size: 13px; }
.primary-btn, .secondary-btn, .ghost-btn, .danger-btn, .text-btn { border: 0; border-radius: 999px; cursor: pointer; font-weight: 700; transition: .2s ease; }.primary-btn { padding: 14px 22px; background: var(--ink); color: var(--paper); }.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(44,39,35,.16); }.secondary-btn { padding: 13px 20px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); }.ghost-btn { padding: 11px 16px; background: var(--paper-2); }.danger-btn { padding: 12px 18px; background: color-mix(in srgb, var(--danger), transparent 88%); color: var(--danger); }.text-btn { padding: 7px 3px; background: transparent; color: var(--brown-2); }.wide { width: 100%; }.small-btn { padding: 9px 13px; font-size: 12px; }
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.quick-card { min-height: 155px; padding: 22px; text-align: left; cursor: pointer; transition: .25s ease; }.quick-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }.quick-icon { display: grid; place-items: center; width: 41px; height: 41px; margin-bottom: 25px; border-radius: 14px; background: var(--paper-2); font-size: 18px; }.quick-card strong, .quick-card small { display: block; }.quick-card strong { margin-bottom: 7px; }.quick-card small { color: var(--muted); line-height: 1.5; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.stat-card { padding: 25px; }.stat-card small { color: var(--muted); }.stat-card strong { display: block; margin-top: 10px; font: 500 37px/1 Georgia, serif; }.stat-card span { font: 500 14px/1 sans-serif; color: var(--muted); }
.empty-card { padding: 42px 24px; text-align: center; }.empty-illustration { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 50%; background: var(--paper-2); font-size: 31px; }.empty-card h3 { margin: 0 0 8px; }.empty-card p { max-width: 440px; margin: 0 auto 20px; color: var(--muted); line-height: 1.65; }
.bottom-nav { position: fixed; z-index: 20; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, 76px); align-items: center; padding: 8px; border: 1px solid color-mix(in srgb, var(--line), transparent 10%); border-radius: 27px; background: color-mix(in srgb, var(--paper), transparent 8%); box-shadow: 0 18px 45px rgba(58,41,30,.17); backdrop-filter: blur(18px); }.bottom-nav button { height: 51px; border: 0; background: transparent; border-radius: 19px; color: var(--muted); cursor: pointer; font-size: 11px; }.bottom-nav button span { display: block; margin-bottom: 3px; font-size: 18px; }.bottom-nav button.active { color: var(--ink); background: var(--paper-2); }.bottom-nav .brew-nav { width: 52px; height: 52px; margin: 0 auto; background: var(--ink); color: var(--paper); border-radius: 50%; box-shadow: 0 8px 16px rgba(44,39,35,.25); }.bottom-nav .brew-nav span { margin: 0; font-size: 25px; }
.mode-switch { display: inline-flex; padding: 5px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); }.mode-switch button { border: 0; background: transparent; padding: 10px 18px; border-radius: 999px; color: var(--muted); cursor: pointer; }.mode-switch button.active { background: var(--ink); color: var(--paper); }.brew-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 18px; align-items: start; }.side-card, .form-card, .timer-card { padding: 26px; }.side-card { position: sticky; top: 20px; }.preset-list { display: grid; gap: 9px; }.preset { display: flex; width: 100%; padding: 16px; gap: 14px; align-items: center; border: 1px solid var(--line); background: transparent; border-radius: 17px; text-align: left; cursor: pointer; }.preset.active { border-color: var(--brown-2); background: color-mix(in srgb, var(--latte), transparent 78%); }.preset span:first-child { font-size: 24px; }.preset strong, .preset small { display: block; }.preset small { margin-top: 3px; color: var(--muted); }.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }.form-grid label, .field { display: grid; gap: 7px; color: var(--muted); font-size: 12px; }.form-grid .full { grid-column: 1 / -1; }.input-wrap { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); overflow: hidden; }.input-wrap input, .input-wrap select, input, select, textarea { width: 100%; border: 0; outline: 0; padding: 14px 15px; background: transparent; color: var(--ink); }.input-wrap span { padding: 0 14px; color: var(--muted); font-size: 12px; }.form-note { padding: 14px 16px; border-radius: 16px; background: var(--paper-2); color: var(--muted); font-size: 12px; line-height: 1.6; }.brew-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
.stepper { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 30px; }.step { position: relative; text-align: center; color: var(--muted); font-size: 11px; }.step::before { content: ""; display: block; width: 11px; height: 11px; margin: 0 auto 9px; border: 2px solid var(--line); border-radius: 50%; background: var(--paper); }.step.active { color: var(--ink); font-weight: 700; }.step.active::before, .step.done::before { border-color: var(--brown); background: var(--brown); }.timer-visual { text-align: center; padding: 30px 0 22px; }.timer-ring { width: 230px; height: 230px; margin: auto; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--brown) var(--progress, 0%), var(--paper-2) 0); position: relative; }.timer-ring::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--paper); }.timer-copy { position: relative; z-index: 1; }.timer-copy strong { display: block; font: 500 54px/1 Georgia, serif; letter-spacing: .02em; }.timer-copy span { display: block; margin-top: 10px; color: var(--muted); font-size: 12px; }.timer-hint { max-width: 500px; min-height: 50px; margin: 19px auto 0; color: var(--muted); line-height: 1.6; }.timer-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.tabs { display: flex; gap: 6px; margin-bottom: 20px; overflow-x: auto; }.tabs button, .filter-select { border: 1px solid var(--line); border-radius: 999px; background: var(--paper); padding: 9px 15px; color: var(--muted); cursor: pointer; white-space: nowrap; }.tabs button.active { background: var(--ink); color: var(--paper); }.item-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }.item-card { padding: 24px; }.item-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.item-card h3 { margin: 0 0 5px; font-family: Georgia, "Songti SC", serif; font-size: 23px; font-weight: 500; }.badge { display: inline-block; padding: 6px 10px; border-radius: 999px; background: var(--paper-2); color: var(--muted); font-size: 10px; }.parameter-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 19px 0; }.parameter-row span { padding: 7px 10px; border-radius: 10px; background: var(--paper-2); font-size: 11px; }.card-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }.stars { color: #a9753d; letter-spacing: 2px; }.journal-photo { width: 100%; height: 180px; margin: 16px 0; border-radius: 18px; object-fit: cover; }.journal-meta { color: var(--muted); font-size: 12px; }.flavor-list { display: flex; flex-wrap: wrap; gap: 7px; }.flavor-tag { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }.flavor-tag.selected { border-color: var(--brown-2); background: color-mix(in srgb, var(--latte), transparent 72%); color: var(--ink); }.progress-bar { height: 7px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }.progress-bar i { display: block; height: 100%; border-radius: inherit; background: var(--sage); }.warning { margin-top: 13px; color: var(--danger); font-size: 12px; }.setting-list { display: grid; gap: 12px; }.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 23px; }.setting-row strong, .setting-row small { display: block; }.setting-row small { margin-top: 5px; color: var(--muted); }.setting-row select, .setting-row input[type="text"] { width: auto; min-width: 150px; border: 1px solid var(--line); border-radius: 13px; }.switch { position: relative; width: 50px; height: 28px; }.switch input { opacity: 0; width: 0; height: 0; }.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line); cursor: pointer; transition: .2s; }.switch span::after { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; border-radius: 50%; background: var(--paper); transition: .2s; box-shadow: 0 2px 5px rgba(0,0,0,.15); }.switch input:checked + span { background: var(--brown-2); }.switch input:checked + span::after { transform: translateX(22px); }
.modal-layer { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(37,30,25,.38); backdrop-filter: blur(9px); overflow-y: auto; }.welcome-card, .dialog-card { width: min(100%, 500px); max-height: calc(100vh - 40px); overflow-y: auto; padding: 34px; border: 1px solid rgba(255,255,255,.4); border-radius: 32px; background: var(--paper); box-shadow: var(--shadow); }.welcome-card h2, .dialog-card h2 { margin: 12px 0 8px; font: 500 39px/1.08 Georgia, "Songti SC", serif; }.welcome-card > label, .dialog-card label { display: grid; gap: 7px; margin: 18px 0; color: var(--muted); font-size: 12px; }.welcome-card input, .dialog-card input, .dialog-card select, .dialog-card textarea { border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2); }.welcome-card fieldset { border: 0; padding: 0; margin: 18px 0; }.welcome-card legend { margin-bottom: 9px; color: var(--muted); font-size: 12px; }.choice-row { display: flex; gap: 8px; }.check-pill { flex: 1; margin: 0 !important; }.check-pill input { display: none; }.check-pill span { display: block; padding: 12px; border: 1px solid var(--line); border-radius: 14px; text-align: center; cursor: pointer; }.check-pill input:checked + span { background: var(--brown); color: var(--paper); border-color: var(--brown); }.dialog-head { display: flex; justify-content: space-between; gap: 15px; }.close-btn { width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 23px; }.star-picker { display: flex; gap: 4px; }.star-picker button { padding: 0; border: 0; background: transparent; color: var(--line); font-size: 31px; cursor: pointer; }.star-picker button.on { color: #a9753d; }
.toast { position: fixed; z-index: 120; left: 50%; bottom: 98px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 12px 19px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; transition: .25s ease; box-shadow: var(--shadow); }.toast.show { opacity: 1; transform: translate(-50%, 0); }
.splash { position: fixed; z-index: 200; inset: 0; display: grid; place-content: center; justify-items: center; background: radial-gradient(circle at 50% 42%, #fffaf3 0, #f5e9dc 48%, #e7d3bf 100%); color: #362216; text-align: center; transition: opacity .55s ease, visibility .55s; }.splash::before { content: ""; position: absolute; inset: 5%; border: 1px solid rgba(67,40,24,.13); border-radius: 38px; }.splash::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(72vw, 520px); aspect-ratio: 1; transform: translate(-50%,-53%); border: 1px solid rgba(109,72,43,.08); border-radius: 50%; box-shadow: 0 0 0 42px rgba(109,72,43,.025), 0 0 0 84px rgba(109,72,43,.018); }.splash.hide { opacity: 0; visibility: hidden; }.splash-logo { position: relative; z-index: 1; display: block; width: clamp(210px, 34vw, 310px); height: auto; border-radius: 34px; box-shadow: 0 26px 65px rgba(74,45,27,.14); animation: logoIn .8s cubic-bezier(.2,.8,.2,1) both; }.splash > p { position: relative; z-index: 1; margin: 25px 0 0; color: rgba(54,34,22,.62); font-size: 13px; letter-spacing: .06em; }.splash-version { position: relative; z-index: 1; margin-top: 24px; font-size: 9px; font-weight: 700; letter-spacing: .25em; opacity: .46; }.splash-skip { position: absolute; z-index: 2; right: 28px; top: 25px; padding: 9px 14px; border: 1px solid rgba(67,40,24,.18); border-radius: 999px; background: rgba(255,250,243,.38); color: rgba(54,34,22,.65); cursor: pointer; backdrop-filter: blur(10px); }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes logoIn { from { opacity: 0; transform: translateY(18px) scale(.92); } }

@media (max-width: 760px) {
  .app-shell { padding: 0 18px 104px; }.topbar { height: 76px; }.date-label { display: none; }.page { padding-top: 32px; }.page-head { align-items: start; flex-direction: column; }.hero-grid, .brew-layout { grid-template-columns: 1fr; }.greeting-card { min-height: 360px; padding: 31px 27px; }.weather-card { min-height: 300px; }.quick-grid { grid-template-columns: repeat(2, 1fr); }.stat-row { grid-template-columns: 1fr; }.bottom-nav { grid-template-columns: repeat(5, 62px); bottom: 10px; }.side-card { position: static; }.item-grid { grid-template-columns: 1fr; }.form-grid { grid-template-columns: 1fr; }.form-grid .full { grid-column: auto; }.timer-ring { width: 205px; height: 205px; }.setting-row { align-items: start; flex-direction: column; }.setting-row select, .setting-row input[type="text"] { width: 100%; }.welcome-card, .dialog-card { padding: 27px 23px; border-radius: 26px; }.splash::before { inset: 16px; border-radius: 28px; }
}
/* Keep all timer actions on the same three-column rhythm. */
.timer-actions {
  width: min(100%, 560px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.timer-actions button {
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.timer-actions .ghost-btn { grid-column: 2; }

@media (max-width: 760px) {
  /* iOS zooms focused fields below 16px; keep the viewport stable while typing. */
  input, select, textarea { font-size: 16px; }
}
@media (max-width: 380px) { .bottom-nav { grid-template-columns: repeat(5, 57px); }.quick-grid { grid-template-columns: 1fr; }.choice-row { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }