@charset "UTF-8";

:root {
  --bg: #f4f1ed;
  --surface: #fffaf0;
  --ink: #342c23;
  --text: #5d4e3e;
  --muted: #a6917a;
  --line: #ebe5df;
  --green: #826d56;
  --green-dark: #6a5946;
  --green-soft: #ede5dd;
  --serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-family: var(--sans);
  color: var(--ink);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
button, input, textarea, select { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button { color: inherit; }
button:disabled { cursor: wait; opacity: .55; }
a { text-decoration: none; color: inherit; }
button, input, select, textarea { outline-offset: 4px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
button { border: 0; background: none; }
h1, h2, h3, p { margin: 0; }
button, .button, .nav-link { transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: middle; }
.skip-link { position: fixed; z-index: 100; top: -80px; left: 16px; padding: 10px 20px; background: var(--green-dark); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.sidebar { width: 232px; position: fixed; z-index: 20; left: 0; top: 0; bottom: 0; background: #faf6f3; border-right: 1px solid #e8e1d9; display: flex; flex-direction: column; padding: 36px 20px 17px; }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 9px 48px; width: fit-content; }
.brand-mark { color: #fff; background: var(--green); width: 43px; height: 45px; border-radius: 13px 13px 15px 13px; display: grid; place-items: center; transform: rotate(-4deg); }
.brand-mark svg { width: 38px; height: 38px; transform: rotate(4deg); }
.brand strong { display: block; font-family: var(--serif); font-size: 26px; font-weight: 700; line-height: 1.35; letter-spacing: 2px; }
.brand-dot { color: #907960; letter-spacing: -8px; }
.brand small { display: block; font-size: 10px; letter-spacing: 2px; color: #aa9680; margin-top: 4px; }
.nav-label { padding: 0 18px; color: #ac9983; font-size: 10px; letter-spacing: 1.5px; margin-bottom: 12px; }
.navigation { display: flex; flex-direction: column; gap: 7px; }
.nav-link { padding: 13px 16px; border-radius: 9px; display: flex; align-items: center; gap: 13px; font-size: 13px; color: #967e64; font-weight: 450; }
.nav-link .icon { width: 19px; height: 19px; }
.nav-link:hover { background: #f0ebe6; color: var(--green-dark); }
.nav-link.active { background: #ece2d6; color: #6b563e; font-weight: 550; }
.nav-count { margin-left: auto; font-size: 10px; min-width: 20px; padding: 1px 5px; background: #e3d7ca; border-radius: 5px; text-align: center; }
.nav-label-space { margin-top: 27px; margin-bottom: 3px; }
.tiny-new { width: 5px; height: 5px; background: #c4aa73; border-radius: 50%; margin-left: auto; }
.sidebar-bottom { margin-top: auto; padding-top: 54px; }
.sidebar-note { margin: 0 18px 29px; position: relative; }
.little-sprout { display: block; font-size: 31px; color: #a48f77; line-height: 1; margin-bottom: 12px; }
.sidebar-note p { font-family: var(--serif); font-size: 12px; color: #a28c74; line-height: 2.1; letter-spacing: .6px; }
.note-line { display: block; width: 24px; height: 1px; background: #d7cabb; margin-top: 15px; }
.profile-button { border-top: 1px solid #e8e1d9; padding: 20px 6px 0; display: flex; align-items: center; width: 100%; text-align: left; gap: 10px; }
.profile-button > .icon { width: 18px; margin-left: auto; color: #a38e76; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: #eadfcb; color: #9b8058; display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 15px; flex-shrink: 0; }
.profile-copy { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.profile-copy strong { font-weight: 500; font-size: 12px; max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy small { font-size: 9px; color: #a9957e; }
.app-shell { margin-left: 232px; }
.topbar { height: 74px; border-bottom: 1px solid #e8e2db; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; background: #faf6f3; gap: 16px; }
.breadcrumb { display: flex; align-items: center; gap: 14px; color: #a8937c; font-size: 11px; }
.breadcrumb strong { font-weight: 450; color: #6f5d4a; }
.breadcrumb-slash { color: #d3c8bd; }
.topbar-right { display: flex; align-items: center; gap: 20px; }
.today-date { font-size: 11px; color: #a08a71; }
.topbar-divider { height: 15px; width: 1px; background: #e1d9d1; }
.mode-badge { display: flex; align-items: center; gap: 6px; color: #88735b; font-size: 10px; padding: 5px 9px; background: #f0e8e0; border: 1px solid #e9dfd5; border-radius: 5px; }
.mode-badge > span { width: 5px; height: 5px; border-radius: 50%; background: #a28c73; }
main { padding: 33px 40px 20px; max-width: 1460px; margin: auto; min-height: calc(100vh - 135px); }
.page-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 26px; }
.eyebrow { display: flex; gap: 7px; align-items: center; color: #a7927b; font-size: 10px; letter-spacing: .6px; margin-bottom: 9px; }
.eyebrow .icon { width: 15px; height: 15px; color: #baad7c; }
h1 { font-family: var(--serif); font-size: clamp(23px, 2.2vw, 30px); font-weight: 600; line-height: 1.5; letter-spacing: 1.5px; }
.page-heading p { font-size: 11px; color: #a8937c; margin-top: 9px; letter-spacing: .5px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 7px; white-space: nowrap; font-size: 12px; font-weight: 450; line-height: 1.7; border: 1px solid transparent; }
.button .icon { width: 17px; height: 17px; }
.button.primary { color: #fff; background: var(--green); box-shadow: 0 3px 6px #6c5b4812; }
.button.primary:hover { background: var(--green-dark); transform: translateY(-1px); }
.button.secondary { color: var(--green-dark); background: #f1eae2; border-color: #e2d9ce; }
.button.secondary:hover { background: #e9dfd5; }
.button.subtle { color: #937b62; background: #f1ede9; }
.button.subtle:hover { background: #e9e2db; }
.button.small { padding: 5px 12px; font-size: 11px; }
.hero-banner { background: #ede5dd; border: 1px solid #e6ded4; border-radius: 12px; min-height: 198px; padding: 25px 30px; position: relative; overflow: hidden; margin-bottom: 24px; }
.hero-banner::before { content: ""; position: absolute; border: 1px solid #ddd1c4; opacity: .4; border-radius: 50%; width: 350px; height: 350px; right: -12px; top: -60px; }
.hero-copy { position: relative; z-index: 1; }
.hero-kicker { font-size: 9px; color: #9b8369; letter-spacing: 1.8px; display: flex; gap: 6px; align-items: center; margin-bottom: 12px; }
.hero-kicker > span { width: 4px; height: 4px; border-radius: 50%; background: #a18b72; }
.hero-banner h2 { font-family: var(--serif); font-size: 23px; letter-spacing: 1.6px; font-weight: 600; color: #5e4e3d; margin-bottom: 11px; }
.hero-banner p { color: #9f886f; font-size: 11px; line-height: 1.9; letter-spacing: .5px; }
.hero-footnote { font-size: 9px; color: #a7937c; display: flex; align-items: center; gap: 5px; margin-top: 15px; }
.hero-footnote .icon { width: 12px; height: 12px; }
.hero-banner > img { position: absolute; right: 0; bottom: -1px; width: 410px; height: 215px; object-fit: cover; object-position: right bottom; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
.stat-card { position: relative; padding: 20px 20px 16px; border: 1px solid #e8e1d9; border-radius: 10px; background: #fff; }
.stat-icon { position: absolute; right: 17px; top: 18px; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; }
.stat-icon .icon { width: 16px; height: 16px; }
.stat-label { color: #a08970; font-size: 10px; }
.stat-value { font-family: var(--sans); margin-top: 7px; font-size: 30px; font-weight: 500; letter-spacing: -.7px; line-height: 1.4; color: #463b2f; }
.stat-value > span { font-size: 10px; color: #a9957e; font-weight: 400; letter-spacing: 0; margin-left: 3px; }
.stat-value > .stat-denominator { font-size: 15px; color: #b29f8b; margin-left: 5px; }
.stat-caption { color: #b8a795; font-size: 9px; margin-top: 5px; display: block; letter-spacing: .2px; }
.sage { background: #ede4da; color: #8d775e; }
.blue { background: #e9f1f1; color: #7da0a1; }
.peach { background: #fbede3; color: #ca9c7c; }
.lavender { background: #efedf5; color: #a197b7; }
.yellow { background: #f8f1df; color: #c5ad6b; }
.pink { background: #f8e9eb; color: #bc909b; }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, 1fr) 286px; gap: 22px; align-items: start; }
.card { background: #fff; border: 1px solid #e8e1da; border-radius: 11px; overflow: hidden; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-heading h2 { font-size: 13px; font-weight: 550; color: #5b4d3d; letter-spacing: .4px; }
.card-heading p { font-size: 10px; color: #ab9781; margin-top: 6px; }
.section-title { display: flex; align-items: center; gap: 8px; }
.count-pill { background: #eee8e1; border-radius: 5px; color: #9b8369; padding: 1px 7px; font-size: 10px; }
.habits-card { padding: 22px 22px 0; }
.text-button { display: inline-flex; align-items: center; gap: 6px; color: #957d63; font-size: 10px; padding: 0; }
.text-button:hover { color: #5d4832; }
.text-button .icon { width: 13px; height: 13px; }
.text-button.muted { color: #baaa98; font-size: 9px; gap: 5px; }
.week-picker { display: flex; align-items: center; gap: 6px; margin: 24px -7px 20px; }
.week-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); flex: 1; gap: 6px; }
.week-day { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; padding: 8px 0 6px; border: 1px solid transparent; gap: 5px; }
.week-day > span { font-size: 9px; color: #b3a08d; }
.week-day > strong { font-size: 15px; font-weight: 450; color: #937c62; }
.week-day:hover { background: #f4eee7; }
.week-day.selected { background: #eee5da; border-color: #e8ddd0; }
.week-day.selected > span, .week-day.selected > strong { color: #87715a; }
.week-day.selected > strong { font-weight: 600; }
.week-day.is-today > span { color: #806b53; }
.day-dot { display: block; height: 3px; width: 3px; border-radius: 50%; background: transparent; }
.day-dot.has-activity { background: #c6b6a4; }
.week-day.selected .day-dot { background: #9b8369; }
.icon-button { padding: 6px; border-radius: 6px; display: inline-grid; place-items: center; color: #b09d88; }
.icon-button .icon { width: 18px; height: 18px; }
.icon-button:hover { background: #f0e9e2; color: #826d56; }
.week-arrow { padding: 3px; }
.week-arrow .icon { width: 13px; height: 13px; }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); margin-bottom: 0; gap: 8px; }
.filter-tabs { display: flex; gap: 21px; }
.filter-tabs button { padding: 0 0 12px; font-size: 10px; color: #b19e8a; position: relative; white-space: nowrap; }
.filter-tabs button > span { margin-left: 3px; font-size: 9px; color: #baa997; }
.filter-tabs button.active { color: #816d56; font-weight: 500; }
.filter-tabs button.active::after { content: ""; position: absolute; bottom: -1px; height: 2px; width: 100%; background: #937c62; left: 0; }
.list-toolbar select { width: 85px; padding: 3px 16px 3px 7px; font-size: 9px; color: #aa957f; border: 0; margin-bottom: 10px; background-color: #fff; }
.habit-row { padding: 20px 0; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #ede7e1; }
.habit-symbol { width: 44px; height: 46px; display: inline-grid; place-items: center; border-radius: 12px; flex-shrink: 0; }
.habit-symbol .icon { width: 22px; height: 22px; stroke-width: 1.5; }
.habit-info { min-width: 0; flex: 1; }
.habit-title-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.habit-title-line h3 { font-size: 12px; color: #625241; font-weight: 500; letter-spacing: .2px; }
.streak-badge { display: inline-flex; align-items: center; gap: 2px; color: #c3ad88; font-size: 8px; white-space: nowrap; }
.streak-badge .icon { height: 11px; width: 11px; stroke-width: 1.5; }
.habit-info > p { font-size: 9px; color: #b8a795; margin-top: 4px; line-height: 1.6; }
.habit-meta { display: flex; align-items: center; gap: 7px; color: #bbab99; font-size: 8px; margin-top: 8px; }
.habit-meta > i { width: 2px; height: 2px; background: #cabeb0; border-radius: 50%; }
.category-tag { font-size: 7px; padding: 1px 5px; border: 1px solid #ebe5df; border-radius: 3px; color: #b29f8b; margin-left: 2px; }
.checkin-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 11px; color: #a69179; border: 1px solid #e1d7cc; border-radius: 6px; font-size: 10px; flex-shrink: 0; white-space: nowrap; }
.checkin-button .icon { width: 13px; height: 13px; }
.checkin-button:hover { background: #f0e7dd; border-color: #aa957d; }
.checkin-button.checked { background: #f0e8df; color: #9a8267; border-color: #eae1d7; }
.is-complete .habit-symbol { opacity: .72; }
.is-complete .habit-title-line h3 { color: #9a8267; }
.add-habit-row { padding: 21px 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 10px; color: #b09c88; width: 100%; }
.add-habit-row .icon { width: 15px; height: 15px; }
.add-habit-row:hover { color: var(--green-dark); }
.dashboard-aside { display: flex; flex-direction: column; gap: 18px; }
.progress-card { padding: 20px 21px 0; }
.progress-card .card-heading > span { color: #c9b57a; }
.progress-card .card-heading > span .icon { width: 15px; height: 15px; }
.progress-ring { width: 174px; height: 174px; margin: 9px auto 0; position: relative; }
.progress-ring > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-ring circle { fill: none; stroke-width: 9; }
.ring-track { stroke: #ede7e0; }
.ring-fill { stroke: #a1886c; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; padding-top: 0; }
.ring-label strong { font-size: 36px; line-height: 1.3; letter-spacing: -1px; font-weight: 500; color: #72604c; }
.ring-label strong > span { font-size: 16px; margin-left: 2px; font-weight: 400; }
.ring-label small { font-size: 8px; color: #b09c88; margin-top: 7px; }
.progress-card > h3 { font-size: 11px; color: #8a745c; text-align: center; font-weight: 450; margin-top: 0; }
.progress-card > h3 > span { font-size: 12px; }
.progress-card > p { text-align: center; font-size: 9px; color: #b5a390; margin-top: 7px; }
.progress-legend { display: flex; align-items: center; justify-content: center; gap: 26px; border-top: 1px solid var(--line); margin-top: 19px; padding: 13px 0; font-size: 9px; color: #b09d88; }
.progress-legend span { display: inline-flex; align-items: center; gap: 6px; }
.progress-legend i { width: 5px; height: 5px; border-radius: 50%; background: #9e866b; }
.progress-legend > span + span i { background: #e7dfd6; }
.garden-card { border: 1px solid #e9dfd5; border-radius: 11px; background: #f0e8df; padding: 18px 20px 17px; text-align: center; overflow: hidden; }
.garden-card .card-heading h2 { font-size: 11px; color: #8b755c; }
.garden-tag { border: 1px solid #e2d5c7; border-radius: 4px; padding: 1px 5px; font-size: 7px; color: #a08a71; }
.garden-card > img { width: 185px; height: 125px; margin-top: 5px; object-fit: contain; }
.garden-card > h3 { font-family: var(--serif); font-size: 14px; color: #816c56; font-weight: 500; margin-top: 1px; letter-spacing: .7px; }
.garden-card > p { font-size: 9px; color: #ac9882; margin-top: 6px; }
.garden-card .text-button { margin-top: 13px; font-size: 9px; color: #a18a72; }
.daily-quote { text-align: center; color: #af9c87; padding: 0 10px 8px; }
.daily-quote > span { font-size: 31px; line-height: 1; font-family: Georgia, serif; color: #cfc3b5; }
.daily-quote > p { font-family: var(--serif); font-size: 10px; line-height: 2.2; margin-top: -7px; letter-spacing: .4px; }
.daily-quote > small { display: block; font-size: 8px; color: #c1b2a2; margin-top: 8px; }
.app-footer { padding: 22px 40px 25px; display: flex; align-items: center; justify-content: space-between; font-size: 8px; color: #bfaf9f; letter-spacing: .5px; max-width: 1460px; margin: auto; }
.app-footer > span:last-child { display: inline-flex; gap: 10px; align-items: center; }
.footer-sparkle { color: #ae9a85; font-size: 15px; }
.calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 286px; gap: 22px; align-items: start; }
.calendar-card { padding: 25px; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.calendar-header h2 { font-size: 14px; font-weight: 400; color: #9b8369; }
.calendar-header h2 strong { font-size: 18px; font-weight: 500; color: #6d5b48; margin-left: 4px; }
.calendar-controls { display: flex; align-items: center; gap: 6px; }
.calendar-weeknames { display: grid; grid-template-columns: repeat(7, 1fr); color: #ac9882; font-size: 10px; text-align: center; margin-bottom: 16px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.calendar-day { min-height: 89px; padding: 9px 5px; border-radius: 7px; position: relative; text-align: center; border: 1px solid transparent; }
.calendar-day > span { font-size: 12px; color: #836e57; }
.calendar-day.outside { opacity: .3; }
.calendar-day:hover { background: #f2ece6; }
.calendar-day.selected { background: #f1e9df; border-color: #d8c6b3; }
.calendar-day.current > span { background: #937b62; color: #fff; border-radius: 50%; display: inline-grid; place-items: center; height: 26px; width: 26px; margin-top: -3px; }
.calendar-day .today-marker { display: block; color: #9e876e; font-size: 7px; margin-top: 1px; }
.calendar-activity { min-height: 20px; margin-top: 10px; }
.calendar-activity > i { display: inline-block; border-radius: 4px; font-style: normal; font-size: 8px; padding: 2px 5px; white-space: nowrap; }
.activity-1 { background: #f0e7dc; color: #b29b82; }
.activity-2 { background: #eadfd2; color: #a1886c; }
.activity-3 { background: #e4d2bf; color: #8d755b; }
.activity-4 { background: #d8c1a8; color: #745d43; }
.calendar-legend { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 12px; font-size: 8px; color: #af9c87; }
.calendar-legend > span:first-child { display: flex; gap: 5px; align-items: center; }
.legend-dot { display: inline-block; width: 5px; height: 5px; background: #af9375; border-radius: 50%; }
.calendar-detail { padding: 21px 18px; }
.detail-subtitle { font-size: 9px; color: #b6a592; margin: 10px 0 20px; }
.calendar-habit { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); }
.calendar-habit:last-child { border-bottom: 0; padding-bottom: 0; }
.calendar-habit > span:nth-child(2) { font-size: 10px; color: #8b755c; }
.mini-habit-icon { display: inline-grid; place-items: center; width: 31px; height: 33px; border-radius: 8px; flex-shrink: 0; }
.mini-habit-icon .icon { width: 17px; height: 17px; }
.mini-check { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #e0d6cb; margin-left: auto; color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.mini-check.checked { border-color: #a89279; background: #a89279; }
.mini-check .icon { width: 11px; height: 11px; }
.detail-empty { font-size: 11px; color: #aa967f; line-height: 2; padding: 20px 0; }
.month-summary { background: #efe7dd; border: 1px solid #e7dcd0; border-radius: 10px; margin-top: 20px; padding: 22px; }
.month-summary > span { font-size: 11px; color: #9b8369; display: flex; gap: 6px; align-items: center; }
.month-summary > span .icon { width: 14px; height: 14px; }
.month-summary > strong { display: block; font-size: 33px; color: #7b6750; font-weight: 500; margin-top: 14px; }
.month-summary small { font-size: 10px; font-weight: 400; margin-left: 5px; color: #a8937c; }
.month-summary > p { font-size: 9px; color: #ae9b86; margin-top: 5px; }
.analytics-columns { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 22px; margin-bottom: 22px; }
.chart-card { padding: 24px; }
.chart-badge { background: #f0e8e0; color: #a9947e; border-radius: 4px; padding: 3px 9px; font-size: 9px; }
.chart-content { display: flex; gap: 16px; padding-top: 32px; }
.chart-y-labels { display: flex; flex-direction: column; justify-content: space-between; color: #bbab99; font-size: 8px; padding-bottom: 28px; }
.weekly-chart { display: flex; justify-content: space-around; width: 100%; gap: 15px; background: repeating-linear-gradient(to top, transparent 0, transparent 87px, #ece6df 88px, transparent 89px); }
.chart-column { flex: 1; text-align: center; min-width: 0; }
.bar-track { height: 180px; position: relative; display: flex; align-items: flex-end; max-width: 36px; margin: auto; }
.bar-fill { width: 100%; background: #e2d4c5; border-radius: 6px 6px 0 0; position: relative; min-height: 2px; }
.bar-fill.today-bar { background: #a48a6d; }
.bar-fill > span { position: absolute; top: -21px; left: 50%; transform: translateX(-50%); color: #a9947e; font-size: 8px; }
.chart-date { display: block; padding-top: 11px; color: #b29f8b; font-size: 9px; }
.chart-date.current { color: #8a735a; }
.growth-summary { background: #eee5db; border-color: #e7dbce; padding: 24px 25px 0; position: relative; overflow: hidden; }
.summary-icon { display: block; margin-bottom: 14px; color: #9d856a; }
.growth-summary h2 { font-family: var(--serif); font-size: 17px; color: #816d56; font-weight: 500; line-height: 1.8; }
.growth-summary p { font-size: 11px; color: #ac9882; line-height: 2; margin-top: 15px; }
.growth-summary p strong { color: #957d63; font-size: 16px; font-weight: 500; }
.growth-summary img { width: 173px; height: 137px; display: block; margin-left: auto; margin-top: -8px; }
.heatmap-card { padding: 25px; margin-bottom: 22px; }
.heatmap { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); grid-template-columns: repeat(15, 1fr); gap: 6px; margin-top: 24px; }
.heat-cell { height: 24px; border-radius: 4px; position: relative; }
.heat-cell:hover::after, .heat-cell:focus::after { content: attr(data-tooltip); position: absolute; padding: 5px 9px; background: #5e4f3f; color: #fff; border-radius: 5px; white-space: nowrap; font-size: 10px; z-index: 5; top: -35px; left: 50%; transform: translateX(-50%); }
.level-0 { background: #eee8e2; }
.level-1 { background: #e5d8c9; }
.level-2 { background: #d5bfa7; }
.level-3 { background: #b99e81; }
.level-4 { background: #957a5d; }
.heatmap-legend { font-size: 8px; color: #b09d89; display: flex; align-items: center; gap: 4px; }
.heatmap-legend > i { width: 9px; height: 9px; border-radius: 2px; }
.habit-ranking { padding: 24px; }
.muted-small { font-size: 9px; color: #bcab9a; }
.ranking-row { display: flex; align-items: center; gap: 15px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.ranking-row:first-of-type { margin-top: 10px; }
.ranking-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ranking-index { font-size: 11px; color: #bfaf9f; width: 20px; }
.ranking-name { min-width: 140px; }
.ranking-name strong { display: block; font-size: 11px; font-weight: 450; color: #867159; }
.ranking-name > span { font-size: 8px; color: #b7a593; }
.ranking-bar { height: 5px; background: #f1eae2; flex: 1; margin: 0 20px; border-radius: 9px; }
.ranking-bar > i { display: block; background: #cebaa4; height: 100%; border-radius: 9px; }
.ranking-total { font-size: 16px; font-weight: 500; color: #9c856b; min-width: 44px; }
.ranking-total small { font-size: 9px; font-weight: 400; color: #bcab9a; }
.manage-intro { display: flex; align-items: center; gap: 16px; padding: 22px 25px; border-radius: 10px; border: 1px solid #e7dfd5; background: #efe7dd; margin-bottom: 24px; }
.manage-intro > span { width: 42px; height: 42px; border-radius: 50%; background: #e7dacc; color: #998166; display: grid; place-items: center; }
.manage-intro h2 { font-family: var(--serif); color: #7f6b54; font-size: 16px; font-weight: 500; margin-bottom: 5px; }
.manage-intro p { font-size: 10px; color: #ab9781; }
.manage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.manage-card { padding: 23px 23px 0; }
.manage-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.manage-category { font-size: 8px; color: #b6a491; }
.manage-card h2 { font-size: 15px; font-weight: 500; color: #6e5c49; margin-top: 7px; }
.manage-card > p { font-size: 10px; color: #b29f8b; margin-top: 9px; min-height: 34px; line-height: 1.8; }
.manage-details { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 22px 0; }
.manage-details > span { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #ae9b85; }
.manage-details .icon { width: 12px; height: 12px; }
.manage-card-footer { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-top: 1px solid var(--line); gap: 8px; }
.manage-card-footer > span { font-size: 9px; color: #bcac9b; }
.manage-card-footer strong { font-size: 12px; font-weight: 500; color: #9e876e; margin: 0 2px; }
.manage-card-footer .text-button { font-size: 9px; }
.new-habit-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 280px; border: 1px dashed #dcd0c3; border-radius: 10px; background: #f4ede6; }
.new-habit-card:hover { background: #efe5da; border-color: #b29b82; }
.new-habit-card > span { display: grid; place-items: center; width: 39px; height: 39px; background: #ebe1d5; color: #ad977f; border-radius: 50%; margin-bottom: 5px; }
.new-habit-card > strong { font-size: 12px; font-weight: 450; color: #a48e76; }
.new-habit-card > small { font-size: 9px; color: #beae9d; }
.journal-banner { border: 1px solid #e5ded7; border-radius: 10px; background: #ede7e0; padding: 22px 25px; display: flex; align-items: center; gap: 15px; margin-bottom: 25px; }
.journal-banner > .icon { color: #ab9781; }
.journal-banner > p { font-family: var(--serif); font-size: 13px; color: #9a8167; }
.journal-banner > span { font-size: 9px; color: #b3a18d; margin-left: auto; }
.journal-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.journal-card { padding: 25px; display: flex; flex-direction: column; }
.journal-card-top { display: flex; align-items: center; gap: 12px; }
.journal-date { font-size: 10px; color: #af9c87; }
.mood-tag { border-radius: 4px; padding: 3px 7px; display: inline-flex; align-items: center; gap: 4px; font-size: 8px; color: #b4a66d; background: #faf5e6; }
.mood-tag .icon { width: 11px; height: 11px; }
.mood-tag.cloud { color: #9eacb4; background: #eef3f6; }
.mood-tag.rain { color: #a39bb1; background: #f2eff7; }
.mood-tag.heart { color: #bc9ca4; background: #f9eff1; }
.delete-note { margin-left: auto; color: #c9bcae; }
.delete-note .icon { width: 14px; height: 14px; }
.journal-text { font-family: var(--serif); color: #977f64; font-size: 13px; line-height: 2.4; padding: 22px 0; min-height: 160px; overflow-wrap: anywhere; }
.journal-card-bottom { border-top: 1px solid var(--line); padding-top: 16px; margin-top: auto; color: #bdad9c; font-size: 8px; display: flex; align-items: center; gap: 6px; }
.journal-card-bottom .icon { width: 12px; height: 12px; }
dialog { border: 1px solid #e6ded5; border-radius: 16px; padding: 0; width: min(540px, calc(100% - 32px)); max-height: calc(100dvh - 48px); background: #fffefb; color: var(--ink); box-shadow: 0 30px 120px #352c2133; }
dialog::backdrop { background: #39302655; backdrop-filter: blur(4px); }
.modal-header { display: flex; gap: 15px; align-items: flex-start; justify-content: space-between; padding: 25px 28px 20px; border-bottom: 1px solid var(--line); }
.modal-header h2 { font-family: var(--serif); color: #73604b; font-size: 20px; font-weight: 600; letter-spacing: .6px; }
.modal-header p { font-size: 10px; color: #b09d89; margin-top: 8px; }
.modal-header > .icon-button { margin-right: -5px; }
.modal-body { padding: 21px 28px 8px; }
.field-label { font-size: 11px; color: #957d63; font-weight: 450; display: block; margin-bottom: 8px; margin-top: 16px; }
.modal-body > .field-label:first-child { margin-top: 0; }
.field-label > span { color: #bca57f; }
.field-label > small { color: #bfaf9f; font-size: 8px; margin-left: 4px; }
input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), select, textarea { width: 100%; border: 1px solid #e4dbd1; background: #f9f5f1; padding: 10px 12px; border-radius: 6px; color: #8b755d; font-size: 11px; transition: border-color .2s, box-shadow .2s; }
input::placeholder, textarea::placeholder { color: #c2b3a3; font-size: 10px; }
input:focus, select:focus, textarea:focus { border-color: #b39c83; outline: 0; box-shadow: 0 0 0 3px #eee6dc; }
.form-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
fieldset > legend.field-label { padding-top: 16px; margin-top: 0; width: 100%; }
.weekday-options { display: flex; gap: 7px; }
.weekday-options > label { flex: 1; position: relative; cursor: pointer; }
.weekday-options input, .icon-options input, .color-options input, .mood-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.weekday-options span { display: block; text-align: center; padding: 7px 2px; border: 1px solid #e6dfd7; border-radius: 6px; color: #bbab99; font-size: 10px; }
.weekday-options input:checked + span { background: #efe6db; border-color: #e2d5c7; color: #9e876e; }
.weekday-options input:focus-visible + span, .icon-options input:focus-visible + span, .color-options input:focus-visible + span, .mood-options input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 3px; }
.icon-options { display: flex; gap: 7px; flex-wrap: wrap; }
.icon-options label { cursor: pointer; position: relative; }
.icon-options span { width: 37px; height: 35px; border: 1px solid #e7dfd6; border-radius: 7px; color: #baa997; display: grid; place-items: center; }
.icon-options .icon { width: 18px; height: 18px; }
.icon-options input:checked + span { background: #ede2d6; border-color: #b7a188; color: #8e785f; }
.color-options { display: flex; gap: 12px; }
.color-options label { cursor: pointer; position: relative; }
.color-options span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; outline: 1px solid transparent; outline-offset: 3px; }
.color-options .icon { opacity: 0; height: 14px; width: 14px; }
.color-options input:checked + span { outline-color: currentColor; }
.color-options input:checked + span .icon { opacity: 1; }
.modal-footer { padding: 19px 28px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.modal-footer-note { font-size: 9px; color: #b9a896; }
.form-error { font-size: 10px; color: #b77c70; min-height: 19px; padding-top: 9px; padding-bottom: 9px; }
.danger { color: #c0998b; }
.danger:hover { color: #ad7864; }
.danger-button { color: #fff; background: #b38e7c; }
.danger-button:hover { background: #a17b69; }
.confirmation-modal { max-width: 430px; }
.confirmation-modal .modal-header h2 { font-size: 18px; }
.confirmation-body { padding-top: 28px; padding-bottom: 28px; display: flex; align-items: center; gap: 16px; }
.confirmation-body > span { width: 45px; height: 45px; background: #eee8e1; border-radius: 50%; display: grid; place-items: center; color: #a8937c; flex-shrink: 0; }
.confirmation-body > p { font-size: 11px; color: #aa957f; line-height: 2; }
.mood-options { display: flex; gap: 9px; }
.mood-options label { position: relative; flex: 1; cursor: pointer; }
.mood-options span { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #bcab9a; font-size: 9px; border: 1px solid #e7dfd7; border-radius: 7px; padding: 12px 5px; }
.mood-options .icon { width: 23px; height: 23px; }
.mood-options input:checked + span { background: #f6f3e7; border-color: #e4dbb7; color: #b6a472; }
textarea { line-height: 2; resize: vertical; min-height: 160px; max-height: 350px; }
.text-counter { font-size: 8px; color: #beaf9e; display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 12px; }
.account-modal { max-width: 430px; }
.account-body { display: flex; flex-direction: column; align-items: center; padding: 0 25px 32px; text-align: center; }
.account-body > img { width: 200px; height: 160px; margin: 5px 0; }
.account-body h3 { font-family: var(--serif); color: #907960; font-size: 20px; font-weight: 500; }
.account-body p { font-size: 11px; color: #b19e8a; margin-top: 13px; margin-bottom: 24px; line-height: 2; }
.account-body > small { font-size: 8px; color: #c0b0a0; margin-top: 15px; }
.account-status { background: #eee6dc; color: #a59079; font-size: 11px; border-radius: 7px; padding: 11px 17px; }
.toast-region { position: fixed; bottom: 30px; left: calc(50% + 116px); transform: translateX(-50%); z-index: 100; max-width: min(90vw, 480px); }
.toast { background: #f9f5f0; color: #8e785f; border: 1px solid #e3d3c2; border-radius: 10px; box-shadow: 0 8px 30px #49392814; padding: 14px 21px; font-size: 11px; display: flex; align-items: center; gap: 9px; animation: toast-in .25s ease; }
.toast > .icon { width: 17px; height: 17px; }
.toast.error { background: #fffaf6; color: #b28c79; border-color: #eeded2; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.empty-state { text-align: center; padding: 45px 15px; }
.empty-icon { width: 55px; height: 55px; background: #f0e8df; border-radius: 50%; color: #b09c85; display: inline-grid; place-items: center; }
.empty-state h3 { font-family: var(--serif); font-size: 16px; color: #9c846a; font-weight: 500; margin-top: 18px; }
.empty-state p { font-size: 10px; color: #b9a896; margin-top: 10px; line-height: 1.9; }
.empty-state .button { margin-top: 22px; }
.welcome-state { text-align: center; padding: 50px 20px; }
.welcome-state img { width: 250px; height: 200px; }
.welcome-state h1 { font-size: 25px; color: #8e785f; }
.welcome-state p { color: #b4a28e; margin-top: 18px; font-size: 12px; }
.welcome-actions { margin-top: 30px; display: flex; gap: 12px; justify-content: center; }
.loading-state { min-height: 65vh; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 15px; color: #ae9a85; font-size: 12px; }
.loading-sprout { font-size: 45px; color: #ac977f; animation: sprout-pulse 2s ease-in-out infinite; }
@keyframes sprout-pulse { 50% { opacity: .5; transform: rotate(30deg); } }
.noscript { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); border-radius: 8px; background: #7b6852; color: #fff; padding: 15px 25px; }
.mobile-menu { display: none; }
.mobile-brand { display: none; }
.sidebar-backdrop { display: none; }

/* Quiet colors, with readable labels on standard-density displays. */
.nav-link { font-size: 14px; }
.nav-label { color: #957d63; font-size: 11px; }
.brand small { color: #998066; }
.breadcrumb { font-size: 12px; color: #937b62; }
.today-date { font-size: 12px; color: #8d765e; }
.eyebrow { font-size: 11px; color: #967e64; }
.page-heading p { color: #9a8267; font-size: 12px; }
.hero-kicker { color: #8e775e; font-size: 10px; }
.hero-banner p { font-size: 12px; color: #8f785f; }
.hero-footnote { font-size: 10px; color: #977f65; }
.stat-label { font-size: 12px; color: #8d765e; }
.stat-caption { font-size: 10px; color: #a38d75; }
.stat-value > span { color: #9c856b; }
.card-heading h2 { font-size: 15px; }
.card-heading p { font-size: 11px; color: #9d866c; }
.text-button.muted { font-size: 10px; color: #a48f77; }
.week-day > span { font-size: 10px; color: #a28b73; }
.week-day > strong { font-size: 16px; color: #826e57; }
.filter-tabs button { font-size: 12px; color: #9e876d; }
.filter-tabs button > span { font-size: 10px; color: #a8937c; }
.list-toolbar select { width: 93px; font-size: 11px; color: #9d866d; }
.habit-title-line h3 { font-size: 14px; color: #625241; }
.streak-badge { font-size: 9px; color: #b19870; }
.habit-info > p { font-size: 11px; color: #a38e76; margin-top: 5px; }
.habit-meta { font-size: 10px; color: #a7937c; }
.category-tag { font-size: 9px; color: #a38e76; }
.checkin-button { font-size: 11px; color: #947c62; padding: 8px 12px; }
.checkin-button.checked { color: #8e785f; }
.is-complete .habit-title-line h3 { color: #947d63; }
.add-habit-row { font-size: 11px; color: #9f886f; }
.progress-card > h3 { font-size: 12px; color: #846f58; }
.progress-card > p { font-size: 10px; color: #a48e76; }
.progress-legend { font-size: 10px; color: #a08970; }
.ring-label small { font-size: 10px; color: #a9947e; }
.garden-card .card-heading h2 { font-size: 12px; }
.garden-card > p { font-size: 10px; color: #a18b72; }
.garden-card .text-button { font-size: 10px; color: #917a61; }
.daily-quote > p { font-size: 11px; color: #a08a71; }
.daily-quote > small { font-size: 9px; color: #ad9984; }
.calendar-habit > span:nth-child(2) { font-size: 12px; }
.detail-subtitle, .calendar-legend { color: #9e866d; }
.manage-category { font-size: 10px; color: #a38e76; }
.manage-card > p { font-size: 12px; color: #a08970; }
.manage-details > span { font-size: 10px; color: #9f886f; }
.manage-card-footer > span { font-size: 10px; color: #a59079; }
.manage-card-footer .text-button { font-size: 11px; }
.journal-date { font-size: 11px; color: #a08970; }
.journal-text { font-size: 14px; color: #867159; }
.journal-card-bottom { font-size: 10px; color: #a9947e; }
.field-label { color: #867159; font-size: 12px; }
input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), textarea, .modal-body select { font-size: 12px; }
.form-error { font-size: 11px; }

@media (min-width: 1600px) {
  main { padding-top: 40px; }
  .hero-banner { min-height: 220px; padding-top: 30px; }
  .hero-banner > img { width: 460px; height: 240px; }
  .habit-row { padding: 24px 0; }
  .dashboard-columns { grid-template-columns: minmax(0, 1fr) 320px; }
  .dashboard-aside { gap: 22px; }
  .progress-ring { margin-top: 15px; margin-bottom: 10px; }
  .garden-card > img { height: 140px; }
}
@media (max-width: 1200px) {
  .sidebar { width: 205px; padding-left: 15px; padding-right: 15px; }
  .brand { gap: 8px; margin-left: 6px; margin-right: 0; }
  .brand strong { font-size: 24px; }
  .brand small { font-size: 9px; }
  .brand-mark { width: 39px; height: 41px; }
  .app-shell { margin-left: 205px; }
  .topbar { padding: 0 28px; }
  main { padding: 28px 28px 16px; }
  .dashboard-columns, .calendar-layout { grid-template-columns: minmax(0, 1fr) 255px; gap: 18px; }
  .stats-grid { gap: 12px; }
  .stat-card { padding-left: 16px; }
  .stat-icon { right: 13px; width: 27px; height: 27px; }
  .stat-caption { font-size: 8px; }
  .habits-card { padding-left: 18px; padding-right: 18px; }
  .habit-row { gap: 11px; }
  .habit-symbol { width: 39px; height: 42px; }
  .habit-title-line { gap: 5px; }
  .habit-title-line h3 { font-size: 11px; }
  .habit-info > p { font-size: 8px; }
  .category-tag { display: none; }
  .checkin-button { padding: 6px 8px; font-size: 9px; }
  .filter-tabs { gap: 15px; }
  .hero-banner > img { width: 340px; }
  .hero-banner h2 { font-size: 21px; }
  .hero-banner { padding-left: 25px; }
  .text-button.muted { font-size: 8px; }
  .progress-card { padding-left: 18px; padding-right: 18px; }
  .manage-grid { gap: 16px; }
  .manage-card { padding-left: 18px; padding-right: 18px; }
  .toast-region { left: calc(50% + 102px); }
}
@media (max-width: 1020px) {
  .sidebar { width: 185px; padding-left: 11px; padding-right: 11px; }
  .brand strong { font-size: 22px; }
  .brand small { letter-spacing: 1px; }
  .brand-mark { width: 36px; height: 39px; }
  .brand-mark svg { width: 33px; }
  .app-shell { margin-left: 185px; }
  .nav-link { padding-left: 14px; gap: 10px; font-size: 12px; }
  main { padding-left: 23px; padding-right: 23px; }
  .topbar { padding-left: 23px; padding-right: 23px; }
  .dashboard-columns { grid-template-columns: minmax(0, 1fr); }
  .dashboard-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .daily-quote { display: none; }
  .garden-card > img { width: 180px; height: 145px; }
  .hero-banner > img { width: 310px; opacity: .85; }
  .hero-banner h2 { font-size: 20px; }
  .stat-icon { position: static; float: right; width: 25px; height: 25px; margin-top: -3px; }
  .stat-icon .icon { width: 13px; height: 13px; }
  .stat-label { font-size: 9px; }
  .stat-value { margin-top: 13px; font-size: 27px; }
  .stat-caption { font-size: 7px; }
  .habit-title-line h3 { font-size: 13px; }
  .habit-info > p { font-size: 10px; }
  .habit-symbol { width: 46px; height: 48px; }
  .checkin-button { padding: 8px 13px; font-size: 10px; }
  .category-tag { display: inline-block; }
  .habit-meta { font-size: 9px; }
  .calendar-layout { grid-template-columns: minmax(0, 1fr); }
  .calendar-layout > aside { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .month-summary { margin-top: 0; }
  .calendar-day { min-height: 83px; }
  .analytics-columns { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
  .growth-summary { padding: 20px 18px 0; }
  .growth-summary h2 { font-size: 14px; }
  .growth-summary p { font-size: 10px; }
  .growth-summary img { width: 145px; height: 145px; }
  .manage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journal-list { grid-template-columns: 1fr; }
  .journal-banner { flex-wrap: wrap; gap: 9px; }
  .journal-banner > span { display: none; }
  .toast-region { left: calc(50% + 92px); }
}
@media (max-width: 760px) {
  .sidebar { width: 225px; transform: translateX(-100%); transition: transform .25s; padding: 30px 20px 18px; }
  .brand { margin-bottom: 38px; }
  .brand strong { font-size: 26px; }
  .brand-mark { width: 43px; height: 45px; }
  .brand-mark svg { width: 38px; }
  .nav-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; background: #39302655; z-index: 19; backdrop-filter: blur(2px); }
  .app-shell { margin-left: 0; }
  .mobile-menu { display: inline-grid; margin-left: -5px; }
  .mobile-brand { display: inline-block; font-family: var(--serif); font-size: 18px; font-weight: 600; color: #74614b; white-space: nowrap; }
  .mobile-brand > span { color: #a28b73; margin-left: -3px; }
  .topbar { height: 63px; padding-left: 22px; padding-right: 22px; }
  .breadcrumb { gap: 10px; font-size: 10px; }
  .topbar-right { gap: 10px; }
  .today-date { display: none; }
  .topbar-divider { display: none; }
  main { padding: 27px 22px 10px; }
  .page-heading { gap: 12px; margin-bottom: 23px; }
  h1 { font-size: 25px; }
  .page-heading p { font-size: 10px; }
  .page-heading .button { padding: 9px 12px; font-size: 10px; }
  .page-heading .button .icon { width: 15px; height: 15px; }
  .hero-banner { padding: 23px; min-height: 195px; }
  .hero-banner > img { width: 290px; height: 185px; }
  .hero-banner h2 { font-size: 21px; }
  .hero-banner p { font-size: 10px; }
  .hero-footnote { font-size: 8px; }
  .stats-grid { gap: 12px; margin-bottom: 22px; }
  .stat-card { padding: 16px 13px; }
  .stat-icon { width: 23px; height: 23px; }
  .stat-value { font-size: 26px; }
  .stat-value > span { font-size: 9px; }
  .stat-value > .stat-denominator { font-size: 13px; margin-left: 1px; }
  .stat-caption { display: none; }
  .app-footer { padding-left: 22px; padding-right: 22px; }
  .toast-region { left: 50%; bottom: 20px; width: max-content; }
  .calendar-card { padding: 21px 15px; }
  .calendar-grid { gap: 3px; }
  .calendar-day { min-height: 77px; }
  .calendar-activity > i { font-size: 7px; }
  .analytics-columns { grid-template-columns: 1fr 1fr; }
  .chart-card { padding: 21px 15px; }
  .weekly-chart { gap: 10px; }
  .bar-track { height: 170px; }
  .card-heading h2 { font-size: 12px; }
  .growth-summary img { height: 130px; }
  .ranking-bar { margin: 0 8px; }
}
@media (max-width: 480px) {
  main { padding: 23px 16px 10px; }
  .topbar { padding: 0 16px; }
  .breadcrumb { gap: 8px; }
  .breadcrumb > span:first-of-type { display: none; }
  .breadcrumb-slash { display: none; }
  .mode-badge { font-size: 8px; padding: 4px 6px; }
  .page-heading { gap: 8px; margin-bottom: 20px; align-items: center; }
  h1 { font-size: 21px; letter-spacing: 1px; }
  .eyebrow { font-size: 8px; margin-bottom: 8px; }
  .eyebrow .icon { width: 13px; height: 13px; }
  .page-heading p { font-size: 9px; letter-spacing: 0; margin-top: 7px; max-width: 230px; line-height: 1.8; }
  .page-heading .button { font-size: 9px; padding: 8px 10px; gap: 3px; }
  .page-heading .button .icon { width: 13px; height: 13px; }
  .hero-banner { min-height: 181px; padding: 20px 18px; margin-bottom: 17px; }
  .hero-banner > img { width: 220px; height: 160px; right: -22px; opacity: .7; }
  .hero-banner h2 { font-size: 17px; letter-spacing: .4px; max-width: 240px; }
  .hero-banner p { font-size: 9px; line-height: 2; }
  .hero-kicker { font-size: 7px; letter-spacing: 1px; margin-bottom: 12px; }
  .hero-footnote { font-size: 7px; margin-top: 14px; gap: 4px; }
  .hero-footnote .icon { width: 10px; }
  .hero-banner::before { width: 200px; height: 200px; right: -25px; top: -10px; }
  .stats-grid { gap: 9px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; }
  .stat-card { padding: 14px 15px 12px; }
  .stat-icon { width: 27px; height: 27px; margin-top: 0; }
  .stat-icon .icon { width: 14px; height: 14px; }
  .stat-label { font-size: 9px; }
  .stat-value { margin-top: 5px; font-size: 26px; }
  .stat-caption { display: block; font-size: 7px; margin-top: 3px; }
  .habits-card { padding: 18px 15px 0; }
  .habits-card > .card-heading .text-button { font-size: 7px; }
  .habits-card > .card-heading .text-button .icon { display: none; }
  .card-heading h2 { font-size: 12px; }
  .week-picker { margin-top: 19px; margin-bottom: 16px; gap: 3px; }
  .week-days { gap: 2px; }
  .week-day { padding-top: 7px; padding-bottom: 5px; }
  .week-day > strong { font-size: 14px; }
  .week-day > span { font-size: 8px; }
  .filter-tabs { gap: 16px; }
  .filter-tabs button { font-size: 9px; }
  .filter-tabs button > span { margin-left: 2px; font-size: 8px; }
  .list-toolbar select { width: 70px; padding-left: 2px; font-size: 8px; }
  .habit-row { gap: 10px; padding: 17px 0; }
  .habit-symbol { width: 36px; height: 40px; border-radius: 10px; }
  .habit-symbol .icon { width: 19px; height: 19px; }
  .habit-title-line { gap: 5px; flex-wrap: nowrap; }
  .habit-title-line h3 { font-size: 11px; letter-spacing: 0; }
  .habit-info > p { font-size: 8px; }
  .habit-meta { gap: 6px; font-size: 8px; margin-top: 6px; }
  .category-tag { display: none; }
  .checkin-button { padding: 6px; min-width: 28px; font-size: 8px; gap: 3px; }
  .checkin-button .icon { width: 11px; height: 11px; }
  .streak-badge { font-size: 7px; gap: 1px; }
  .streak-badge .icon { width: 9px; }
  .add-habit-row { font-size: 9px; padding: 18px 0; }
  .dashboard-aside { gap: 12px; }
  .progress-card { padding: 16px 12px 0; }
  .progress-card .card-heading h2 { font-size: 10px; }
  .progress-card .card-heading > span { display: none; }
  .progress-ring { width: 132px; height: 132px; margin: 10px auto 6px; }
  .ring-label strong { font-size: 29px; }
  .ring-label strong > span { font-size: 13px; }
  .ring-label small { font-size: 6px; }
  .progress-card > h3 { font-size: 8px; white-space: nowrap; }
  .progress-card > h3 > span { display: none; }
  .progress-card > p { font-size: 7px; white-space: nowrap; }
  .progress-legend { font-size: 7px; gap: 12px; padding: 10px 0; margin-top: 13px; }
  .progress-legend span { gap: 4px; }
  .progress-legend i { width: 4px; height: 4px; }
  .garden-card { padding: 16px 10px 12px; }
  .garden-card .card-heading h2 { font-size: 10px; }
  .garden-tag { font-size: 6px; padding: 1px 3px; }
  .garden-card > img { width: 142px; height: 130px; margin-top: 0; }
  .garden-card > h3 { font-size: 10px; letter-spacing: 0; }
  .garden-card > p { font-size: 7px; }
  .garden-card .text-button { font-size: 8px; margin-top: 10px; }
  .app-footer { padding: 20px 16px; font-size: 7px; }
  .app-footer > span:last-child { gap: 5px; }
  .calendar-layout > aside { grid-template-columns: 1fr; }
  .calendar-card { padding: 18px 10px; }
  .calendar-day { min-height: 69px; padding-left: 0; padding-right: 0; }
  .calendar-day > span { font-size: 11px; }
  .calendar-activity { margin-top: 8px; }
  .calendar-activity > i { font-size: 6px; padding: 2px 3px; }
  .calendar-day .today-marker { font-size: 6px; }
  .calendar-day.current > span { width: 23px; height: 23px; }
  .calendar-legend { font-size: 6px; padding-top: 13px; }
  .calendar-header { padding: 0 5px; }
  .calendar-header h2 { font-size: 12px; }
  .calendar-header h2 strong { font-size: 16px; }
  .analytics-columns { grid-template-columns: 1fr; }
  .growth-summary { min-height: 210px; }
  .growth-summary h2 { font-size: 16px; }
  .growth-summary img { position: absolute; right: 3px; bottom: 0; width: 160px; height: 150px; }
  .growth-summary p { font-size: 11px; }
  .heatmap-card { padding: 20px 15px; }
  .heatmap-card .card-heading h2 { font-size: 11px; }
  .heatmap-card .card-heading p { font-size: 8px; }
  .heatmap-legend { font-size: 7px; gap: 3px; }
  .heatmap-legend > i { width: 6px; height: 6px; }
  .heatmap { gap: 3px; }
  .heat-cell { height: 15px; border-radius: 3px; }
  .heat-cell:hover::after, .heat-cell:focus::after { display: none; }
  .habit-ranking { padding: 20px 15px; }
  .ranking-row { gap: 9px; }
  .ranking-index { font-size: 9px; width: 15px; }
  .ranking-name { min-width: 120px; }
  .ranking-name strong { font-size: 10px; }
  .ranking-bar { display: none; }
  .ranking-total { margin-left: auto; font-size: 14px; min-width: 32px; }
  .muted-small { font-size: 7px; }
  .manage-intro { padding: 19px 17px; gap: 12px; }
  .manage-intro h2 { font-size: 14px; }
  .manage-intro p { font-size: 9px; line-height: 1.9; }
  .manage-intro > span { width: 35px; height: 35px; flex-shrink: 0; }
  .manage-grid { grid-template-columns: 1fr; gap: 16px; }
  .manage-card { padding: 20px 22px 0; }
  .manage-card > p { min-height: 0; }
  .manage-details { padding: 18px 0; }
  .new-habit-card { min-height: 200px; }
  .journal-banner { padding: 18px; align-items: flex-start; gap: 11px; }
  .journal-banner > p { font-size: 11px; line-height: 2; }
  .journal-banner > .icon { width: 17px; height: 17px; margin-top: 4px; }
  .journal-card { padding: 20px; }
  .journal-text { font-size: 12px; }
  .modal-header { padding: 23px 20px 18px; }
  .modal-header h2 { font-size: 18px; }
  .modal-header p { font-size: 9px; }
  .modal-body { padding: 18px 20px 5px; }
  .modal-footer { padding: 17px 20px; }
  .modal-footer .button { font-size: 10px; padding: 9px 12px; }
  .modal-footer-note { font-size: 8px; }
  .weekday-options { gap: 4px; }
  .weekday-options span { font-size: 9px; padding: 7px 1px; }
  .icon-options { gap: 6px; }
  .icon-options span { width: 30px; height: 31px; }
  .icon-options .icon { width: 16px; height: 16px; }
  .text-counter { font-size: 7px; }
  .toast { font-size: 10px; padding: 12px 15px; }
  .confirmation-body { padding-top: 22px; padding-bottom: 22px; }
  .confirmation-modal .modal-header h2 { font-size: 17px; }
}
@media (min-width: 481px) and (max-width: 1200px) {
  .habit-title-line h3 { font-size: 13px; }
  .habit-info > p { font-size: 11px; }
  .stat-label { font-size: 11px; }
  .stat-caption { font-size: 9px; }
  .text-button.muted { font-size: 9px; }
}
@media (max-width: 480px) {
  .page-heading p { font-size: 10px; }
  .hero-banner p { font-size: 10px; }
  .hero-footnote { font-size: 8px; }
  .stat-label { font-size: 11px; }
  .stat-caption { font-size: 9px; }
  .week-day > span { font-size: 9px; }
  .filter-tabs button { font-size: 10px; }
  .filter-tabs button > span { font-size: 9px; }
  .list-toolbar select { width: 80px; font-size: 10px; }
  .habit-title-line { flex-wrap: wrap; }
  .habit-title-line h3 { font-size: 12px; }
  .habit-info > p { font-size: 10px; }
  .habit-meta { font-size: 9px; }
  .checkin-button { padding: 7px; font-size: 9px; }
  .streak-badge { font-size: 8px; }
  .progress-card > h3 { font-size: 9px; }
  .progress-card > p { font-size: 8px; }
  .manage-card > p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 360px) {
  .dashboard-aside { grid-template-columns: 1fr; }
  .progress-ring { width: 160px; height: 160px; }
  .progress-card > h3 { font-size: 11px; }
  .progress-card > p, .progress-legend { font-size: 10px; }
  .garden-card > img { width: 180px; height: 145px; }
  .garden-card > h3 { font-size: 14px; }
  .garden-card > p { font-size: 10px; }
}

/* Warm paper, stitched edges, and notebook ruling. */
body {
  background-color: var(--bg);
  background-image: radial-gradient(#8b68451a .6px, transparent .6px);
  background-size: 5px 5px;
}
.sidebar { background: #f2e7d5; border-right: 1px dashed #bba183; }
.topbar { background: #fbf5e9; border-bottom: 1px dashed #cbb698; }
.card, .stat-card, .manage-card, .journal-card, dialog {
  background-color: var(--surface);
  border-color: #cfb99b;
  border-style: dashed;
  box-shadow: 2px 4px 0 #8b68450a;
}
.hero-banner, .garden-card, .journal-banner, .manage-intro, .new-habit-card {
  border-color: #c6aa85;
  border-style: dashed;
}
.hero-banner { background-color: #eee0c9; }
.hero-banner > img { mix-blend-mode: multiply; filter: sepia(.35); }
.habit-row, .list-toolbar, .progress-legend, .profile-button,
.calendar-habit, .calendar-legend, .manage-card-footer,
.journal-card-bottom, .modal-header, .modal-footer {
  border-color: #d8c5aa;
  border-bottom-style: dashed;
}
.progress-legend, .profile-button, .calendar-legend,
.manage-card-footer, .journal-card-bottom, .modal-footer { border-top-style: dashed; }
.journal-text {
  background-image: repeating-linear-gradient(transparent 0, transparent calc(2.2em - 1px), #d8c5aa80 calc(2.2em - 1px), #d8c5aa80 2.2em);
  line-height: 2.2;
}
.list-toolbar select { background-color: var(--surface); }
.checkin-button { border-style: dashed; }
.checkin-button.checked { border-style: solid; }
.button.primary { background: #896342; }
.button.primary:hover { background: #6c4b30; }
.nav-link.active { background: #e6d5bb; color: #67482f; }